/* HOLO NEST — single character, small navbar, light-theme scroll hero */
:root { --paper:#fafaf6; --ink:#132d36; --ink-muted:#5b7179; --sky:#38aacc;
  --sky-dark:#117e9f; --border:rgba(26,67,79,.16); --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
a:focus-visible { outline:3px solid var(--sky-dark); outline-offset:4px; }
/* Clean hero stage: only the main character and scroll-attached flame. */
.scroll-track { position:relative; height:790vh; height:790svh; }
.hero-pin { position:sticky; top:0; height:100vh; height:100svh;
  width:100%; overflow:hidden; background:#fafaf6; isolation:isolate; }
.art-stage { position:absolute; inset:0; z-index:3; pointer-events:none;
  perspective:1400px; transform-style:preserve-3d; }
/* inset + auto margins centers the actual image box on every screen size. */
.char-rig { position:absolute; inset:0; margin:auto;
  width:min(88vw, 1020px); height:min(88svh, 850px);
  transform-origin:50% 50%; transform:translate3d(0,0,0);
  filter:drop-shadow(12px 20px 12px rgba(28,81,98,.09));
  opacity:0; will-change:transform,opacity; }
.char-rig--pose { z-index:3; opacity:1; }
.character { width:100%; height:100%; object-fit:contain; display:block;
  user-select:none; -webkit-user-drag:none; }
/* The textured fire renders on a compact transparent WebGL canvas, always
   behind the illustrated character so the face and mouth stay unobstructed. */
.fire-shader { position:absolute; top:0; left:0; z-index:2;
  width:1px; height:1px; pointer-events:none; opacity:0;
  transform-origin:0 50%; will-change:transform; }
.fire-canvas { position:absolute; inset:0; z-index:2; pointer-events:none; }
.eyebrow{display:flex;align-items:center;gap:10px;color:#3d7b8b;letter-spacing:.16em;font-size:10px;font-weight:700;}
.eyebrow-spark{font-size:19px;color:var(--sky-dark);}

/* ============== COLLECTION SECTION ============== */
.collection{padding:92px max(6vw,28px) 50px;background:#fbfcf9;position:relative;z-index:2}
.collection-topline{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:18px;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.15em;color:#78979e}
.collection-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:64px 0 55px}.collection-heading h2{font:700 clamp(48px,6vw,100px)/.98 'Space Grotesk',sans-serif;letter-spacing:-.085em;margin:22px 0 0}.collection-heading h2 em{font:400 1.1em 'Instrument Serif',Georgia,serif;letter-spacing:-.045em;color:var(--sky-dark)}.collection-heading p{max-width:290px;color:#66828b;line-height:1.9;font-size:14px;padding-bottom:9px}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.teaser-img{height:clamp(300px,32vw,490px);display:grid;place-items:center;position:relative;border-radius:14px;overflow:hidden}.teaser-img--one{background:#e4f6f5}.teaser-img--two{background:#e8f2f9}.teaser-img--three{background:#f2f1e6}.teaser-img img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(10px 16px 9px rgba(50,108,133,.1));transition:transform .7s var(--ease)}.teaser-card:hover img{transform:scale(1.08) rotate(-3deg)}.teaser-img--two img{width:75%;height:85%}.teaser-label{position:absolute;top:20px;left:23px;z-index:3;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#417486}.teaser-name{display:flex;justify-content:space-between;padding:23px 3px;font:600 19px 'Space Grotesk',sans-serif;letter-spacing:-.045em}.teaser-name b{font-size:20px;font-weight:400}
.collection-end{margin-top:95px;padding:28px 0 0;border-top:1px solid var(--border);font:700 23px 'Space Grotesk',sans-serif;letter-spacing:-.075em;display:flex;align-items:center;justify-content:space-between}.collection-end>span:first-child{font-weight:400}.collection-end>span:last-child{font:700 9px 'DM Sans',sans-serif;letter-spacing:.15em;color:#91a6ad}


@media(max-width:850px){
  .char-rig{width:94vw; height:84svh;}
  .collection-heading{display:block;}
  .collection-heading p{margin-top:20px;}
}
@media(max-width:650px){
  .scroll-track{height:690vh; height:690svh;}
  .char-rig{width:100vw; height:78svh;}
  .collection{padding:64px 6% 35px;}
  .collection-topline{font-size:8px;}
  .collection-heading{margin:45px 0 30px;}
  .collection-heading h2{font-size:clamp(44px,9vw,68px);}
  .collection-heading p{font-size:12px;max-width:340px;}
  .collection-grid{grid-template-columns:1fr;gap:8px;}
  .teaser-img{height:340px;}
  .teaser-name{font-size:17px;padding:15px 0 25px;}
  .collection-end{margin-top:50px;}
  .collection-end>span:last-child{font-size:7px;}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* Compact, lightweight navigation; never blocks character/fire. */
.site-nav{height:62px;position:fixed;z-index:30;left:0;right:0;top:0;
 display:flex;align-items:center;justify-content:space-between;gap:24px;
 padding:0 clamp(20px,5vw,74px);background:rgba(250,250,246,.89);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(19,45,54,.085);}
.brand{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.075em;white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.brand span:last-child{color:#238eaa}.brand-icon{font-size:16px;font-weight:600;color:#238eaa;margin-right:8px}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.8vw,40px)}
.nav-links a{font:500 12px 'DM Sans',sans-serif;color:#566f78;transition:color .2s}
.nav-links a:hover,.nav-action:hover{color:#086b87}
.nav-action{font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.02em;color:#173843;white-space:nowrap;
 padding:9px 15px;border:1px solid rgba(19,45,54,.18);border-radius:99px;transition:color .2s,border-color .2s}
.nav-action span{margin-left:6px;font-size:14px}
.scroll-track, .collection{scroll-margin-top:62px;}
.teaser-abstract{display:block;position:relative;width:56%;aspect-ratio:3 / 3.8;transform:rotate(-9deg);filter:drop-shadow(16px 22px 12px rgba(14,72,88,.14))}
.teaser-abstract--ring{border-radius:16px;background:linear-gradient(130deg,#e9fdff,#87b3d5 55%,#f8fdff);border:7px solid rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(5,75,105,.13)}
.teaser-abstract--ring i{position:absolute;border:1px solid rgba(0,94,142,.25);border-radius:100%;inset:18%}
.teaser-abstract--ring i:nth-child(2){inset:30%}
.teaser-abstract--ring i:nth-child(3){inset:43%;background:#f6fcff}
.teaser-abstract--holo{transform:rotate(9deg);border-radius:16px;background:linear-gradient(125deg,#fffbf1,#d3eaf4 35%,#e2dae9 64%,#b4eef0);border:7px solid white;box-shadow:inset 0 0 0 1px rgba(5,75,105,.12)}
.teaser-abstract--holo i{position:absolute;inset:15%;border:1px solid rgba(15,104,146,.19);border-radius:12px}
.teaser-abstract--holo i:nth-child(2){inset:28%;border-radius:100%;border-width:3px}
.teaser-abstract--holo i:nth-child(3){inset:39%;border-radius:100%;background:#fffaf1}



/* V7: responsive navigation and scroll-stage, designed for real phones. */
.nav-controls{display:flex;align-items:center;gap:10px;margin-left:auto;}
.menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;
  gap:4px;width:39px;height:39px;border:1px solid rgba(19,45,54,.13);
  border-radius:12px;background:#fff;cursor:pointer;color:var(--ink);padding:0;}
.menu-toggle span{width:16px;height:1.5px;display:block;background:currentColor;border-radius:2px;
  transition:transform .2s,opacity .2s;}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg);}
@media(max-width:650px){
  .site-nav{height:56px;padding:0 14px 0 max(14px,env(safe-area-inset-left));gap:10px;}
  .brand{font-size:17px;letter-spacing:-.06em;}
  .brand-icon{font-size:14px;margin-right:3px;}
  .nav-controls{gap:8px;}
  .menu-toggle{display:flex;flex-shrink:0;}
  .nav-action{padding:9px 12px;font-size:10px;}
  .nav-action span{margin-left:3px;}
  .nav-links{display:flex;position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(100% + 8px);
    min-width:184px;flex-direction:column;align-items:stretch;gap:0;padding:9px;
    border:1px solid rgba(19,45,54,.13);border-radius:14px;
    background:rgba(255,255,253,.98);box-shadow:0 16px 48px rgba(22,66,78,.12);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;}
  .nav-links.is-open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links a{font-size:13px;padding:12px 14px;border-radius:8px;}
  .nav-links a:hover,.nav-links a:focus-visible{background:#f2fafb;}
  .scroll-track{height:690vh; height:690svh;}
  .hero-pin{height:100svh;}
  .char-rig{width:min(100vw,540px);height:min(78svh,640px);}
  .collection{padding:56px 5.5% 34px;}
  .collection-heading h2{font-size:clamp(40px,10vw,64px);line-height:1;}
  .collection-topline{font-size:8px;gap:10px;}
  .collection-grid{gap:4px;}
  .teaser-img{height:clamp(290px,90vw,430px);}
  .collection-end{gap:14px;}
  .collection-end>span:last-child{text-align:right;line-height:1.5;max-width:140px;}
}
@media(max-width:360px){
  .site-nav{padding-inline:12px;}
  .brand{font-size:15px;}
  .nav-action{padding:8px 10px;}
  .menu-toggle{width:36px;height:36px;}
  .collection-heading h2{font-size:clamp(37px,10.3vw,50px);}
}
@media(max-height:520px) and (orientation:landscape){
  .char-rig{width:min(74vw,730px);height:calc(100svh - 62px);}
  .scroll-track{height:570vh; height:570svh;}
  .site-nav{height:48px;}
  .nav-links{top:calc(100% + 4px);}
}
@media(prefers-reduced-motion:reduce){
  .menu-toggle span,.nav-links{transition:none;}
}