:root{
  --bg:#173327;
  --panel:#1F4534;
  --line:#ffffff;
  --paper:#F5F0E3;
  --muted:#A9C6B2;
  --accent:#F2B84B;   /* warm gold */
  --tape:#F2B84B;
  --pink:#FF9EC4;      /* soft pink pop */
  --coral:#FF8A65;     /* warm coral pop */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; background:var(--bg); overflow-x:hidden;
  background-image:
    radial-gradient(box at 10% 5%, rgba(242,184,75,0.08), transparent 45%),
    radial-gradient(box at 90% 95%, rgba(255,158,196,0.06), transparent 45%);
  color:var(--paper); font-family:'Quicksand', sans-serif; font-weight:500;
  line-height:1.7; font-size:16.5px;
}
a{color:var(--accent);}
::selection{background:var(--accent); color:var(--bg);}
.wrap{max-width:780px; margin:0 auto; padding:0 28px;}

header{padding:68px 0 40px; border-bottom:2px solid var(--line);}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow .dot{width:9px; height:9px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 10px 3px rgba(255,158,196,0.55); animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
h1{
  font-family:'Silkscreen', monospace; font-weight:700;
  font-size:clamp(2.6rem, 8vw, 4.2rem); margin:0; color:var(--paper);
  letter-spacing:0.01em;
}
.links{margin-top:24px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:12px;}
.links a{color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--muted);}
.links a:hover{color:var(--pink); border-color:var(--pink);}

.contents{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}
.contents a{
  font-family:'IBM Plex Mono', monospace; font-size:16px; text-transform:uppercase;
  letter-spacing:0.08em; text-decoration:none; color:var(--paper);
  background:none; padding:4px 2px;
  transition:color 0.2s;
}
.contents a:hover, .contents a.current{color:var(--accent);}

.about{padding:40px 0; border-bottom:2px solid var(--line);}
.about-head{margin-bottom:18px;}
.about-head h2{
  font-family:'Silkscreen', monospace; font-weight:700; text-transform:uppercase;
  font-size:1.3rem; margin:0; color:var(--paper);
}
.about p{max-width:62ch; font-size:1.06rem;}

.work{padding:56px 0; border-bottom:2px solid var(--line); scroll-margin-top:24px;}
.work:last-of-type{border-bottom:none;}
.work-head{margin-bottom:32px;}
.work-head h2{
  font-family:'Silkscreen', monospace; font-weight:700;
  font-size:1.9rem; margin:0 0 8px; color:var(--paper);
}
.work-sub{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.1em;
}

.item{display:grid; grid-template-columns:42px 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--line);}
.item:last-child{border-bottom:1px solid var(--line);}
.item-num{font-family:'IBM Plex Mono', monospace; font-size:0.95rem; padding-top:4px; color:#ffffff;}
.item h3{font-family:'Silkscreen', monospace; font-weight:700; font-size:1.1rem; margin:0 0 8px; color:var(--paper);}
.item .fave{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--bg);
  background:#ffffff; border-radius:12px; padding:3px 10px;
  margin-left:8px; text-transform:uppercase; letter-spacing:0.06em; vertical-align:middle;
}
.item p{margin:0 0 12px; color:var(--muted); font-size:0.98rem;}
.item-link{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-decoration:none;
  padding:6px 14px; border-radius:20px; display:inline-block;
  color:#ffffff; border:1.5px solid #ffffff; background:none;
  appearance:none; -webkit-appearance:none; cursor:pointer; transition:all 0.2s;
}
.item-link:hover{background:#ffffff; color:var(--bg); transform:translateY(-2px);}
.piece-image{
  max-width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid var(--line);
  margin-top:6px;
}
.piece-image-full{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  margin-top:10px;
  padding:0 16px;
}
.piece-image-full .piece-image{
  width:100%;
  max-width:none;
  border-radius:16px;
}

.single{padding-top:8px;}
.single p{margin:0 0 14px; color:var(--muted); font-size:1rem; max-width:62ch;}
.single ul{margin:0; padding-left:20px; color:var(--muted); font-size:1rem;}
.single li + li{margin-top:10px;}
.single li strong{color:var(--paper);}

.aside{
  background:var(--panel); border:1.5px solid var(--line); border-radius:16px;
  padding:26px 28px; margin:30px 0;
}
.aside .label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:12px; color:var(--pink);
}
.aside p, .aside ul{margin:0; font-size:0.98rem; color:var(--paper);}
.aside ul{padding-left:20px;}
.aside li + li{margin-top:8px;}

.fill-me{background:rgba(242,184,75,0.16); outline:1.5px dashed var(--accent); padding:0 4px; border-radius:6px;}

footer{padding:56px 0 72px; border-top:2px solid var(--line);}
footer h2{font-family:'Silkscreen', monospace; font-weight:700; font-size:1.6rem; margin:0 0 14px;}
footer p{color:var(--muted); max-width:58ch;}
.contact-row{margin-top:22px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace; font-size:13px;}
.contact-row a{color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent);}

@media (max-width:480px){
  .item{grid-template-columns:30px 1fr;}
}

/* landing page */
.bg-video{
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.bg-overlay{
  position:fixed; inset:0;
  background:rgba(23,51,39,0.55); /* forest green tint, adjust opacity to taste */
  z-index:-1;
}

.landing{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:60px 24px;
}
.landing h1{margin-bottom:16px;}
.landing .eyebrow{justify-content:center; font-family:'Silkscreen', monospace;}
.landing .contents{justify-content:center; margin-top:44px;}
.landing .contents a{font-size:24px; padding:12px 22px; font-family:'Silkscreen', monospace; letter-spacing:0.06em;}

.name-canvas-wrap{width:100%; display:flex; justify-content:center; margin-bottom:6px;}
#name-canvas{max-width:100%; touch-action:none;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.name-3d-wrap{
  width:100%; padding:60px 0;
  display:flex; justify-content:center; align-items:center;
  perspective:1000px;
}
.name-3d{
  position:relative;
  font-family:'Silkscreen', monospace;
  font-weight:700;
  font-size:clamp(1.9rem, 8.5vw, 5.2rem);
  letter-spacing:0.1em;
  color:#F4F5F6;
  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 30px rgba(190,196,204,0.2);
  white-space:nowrap;
  cursor:grab;
  transform-style:preserve-3d;
  will-change:transform;
  user-select:none;
  touch-action:none;
}
.name-3d:active{cursor:grabbing;}
.name-3d .aum-mark{
  position:absolute;
  top:-0.62em;
  left:0;
  transform:translateX(-50%);
  font-family:'Noto Sans Devanagari', sans-serif;
  font-size:0.4em;
  color:#ffffff;
  text-shadow:0 0 12px rgba(255,255,255,0.55);
  white-space:nowrap;
}

@media (max-width:480px){
  .name-3d{letter-spacing:0.06em;}
}

/* bouncing nav buttons on the landing page */
.bounce-nav a{
  position:fixed;
  top:0; left:0;
  font-family:'Silkscreen', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper);
  text-decoration:none;
  border:none;
  background:none;
  padding:6px 4px;
  white-space:nowrap;
  z-index:5;
  transition:color 0.2s;
}
.bounce-nav a:hover{color:var(--accent);}

.music-note{
  position:fixed;
  top:0; left:0;
  font-family:'Noto Sans Symbols 2', 'IBM Plex Mono', monospace;
  font-size:8px; line-height:1.05;
  white-space:pre;
  color:#D6D8DB;
  text-decoration:none;
  background:none;
  border:none;
  z-index:6;
  transition:color 0.2s;
}
.music-note:hover{color:#ffffff;}

body.dark-page {
  background:#000000;
}

.ring-carousel-wrap{
  width:100%; max-width:100%; height:200px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  perspective:800px;
  cursor:grab;
  margin:24px 0 10px;
  touch-action:pan-y;
}
.ring-carousel-wrap:active{cursor:grabbing;}
.ring-carousel{
  position:relative;
  width:120px; height:160px;
  transform-style:preserve-3d;
  will-change:transform;
}
.ring-item{
  position:absolute; top:0; left:0;
  width:120px; height:160px;
  border-radius:10px; overflow:hidden;
  border:1.5px solid #ffffff;
  display:block;
  background:var(--panel);
}
.ring-item img{
  width:120px; height:160px; object-fit:cover; display:block;
  pointer-events:none;
}

.totem-wrap{
  width:100%; max-width:100%;
  display:flex; align-items:center; justify-content:center;
  perspective:900px;
  cursor:grab;
  margin:24px 0 10px;
  overflow:hidden;
  touch-action:none;
}
.totem-wrap:active{cursor:grabbing;}
.totem-inner{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.totem-item{
  position:absolute; top:0; left:0;
  border-radius:10px; overflow:hidden;
  border:1.5px solid #ffffff;
  background:var(--panel);
  cursor:pointer;
}
.totem-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none;
}
.totem-item-label{
  position:absolute; bottom:0; left:0; right:0;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,0.75));
  color:#ffffff; font-family:'IBM Plex Mono', monospace; font-size:10px;
  text-transform:uppercase; letter-spacing:0.05em;
  pointer-events:none;
}

.totem-modal{
  display:none;
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.92);
  flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
}
.totem-modal.open{display:flex;}
.totem-modal-close{
  position:absolute; top:20px; right:24px;
  background:none; border:1px solid #ffffff; color:#ffffff;
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  padding:6px 12px; border-radius:20px; cursor:pointer;
}
.totem-modal img{
  max-width:90vw; max-height:55vh; border-radius:8px; object-fit:contain;
}
.totem-gallery-nav{
  display:flex; align-items:center; gap:18px; margin-top:16px;
}
.totem-nav-btn{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:#ffffff; border:1.5px solid #ffffff; background:none;
  padding:6px 14px; border-radius:20px; cursor:pointer;
}
.totem-nav-btn:hover{background:#ffffff; color:#000;}
.totem-counter{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--muted);
}
.totem-modal-info{
  margin-top:18px; max-width:60ch; text-align:center;
}
.totem-modal-info h3{
  font-family:'Silkscreen', monospace; color:#ffffff; font-size:1.1rem; margin:0 0 8px;
}
.totem-modal-role{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.totem-modal-info p{
  color:#ffffff; font-size:0.98rem; margin:0;
}