:root{

  --yellow:#FFD146;
  --purple:#3676FF;
  --orange:#0E4C4B;
  --paper:#F4F3EE;
  --surface:#E8E2D8;
  --ink:#1A1A18;
  --text-2:#5A5650;
  --text-3:#9A9590;
  --live:#FF5733;
  --s:1;

  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --headline:74px;
  --sub:24px;
  --badge:15px;
  --cue:19px;
  --bignum:250px;
  --tick-year:30px;
  --chrome-top:78px;
  --chrome-bottom:66px;
}

*{box-sizing:border-box}
html{background:var(--paper)}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--surface); border-radius:3px}
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior-y:none;
}

body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--paper);
  background-image:radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size:28px 28px;
}
body.is-detail-open{overflow:hidden}

.halftone{
  background-image:radial-gradient(currentColor 1.15px, transparent 1.3px);
  background-size:9px 9px;
}

.halftone-edge::after{
  content:""; position:absolute; inset:0; pointer-events:none; color:var(--ink);
  background-image:radial-gradient(currentColor 1.1px, transparent 1.25px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(120% 90% at 0% 0%, #000 0 6%, transparent 46%),
                     linear-gradient(0deg, #000 0 4%, transparent 22%);
  mask-image:radial-gradient(120% 90% at 0% 0%, #000 0 6%, transparent 46%),
             linear-gradient(0deg, #000 0 4%, transparent 22%);
  opacity:.34;
}

.topbar,.topbar__right{display:contents}

.logo{
  position:fixed; top:40px; left:clamp(16px, 2vw, 36px); z-index:40;
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2vw, 1.8rem);

  font-weight:400; letter-spacing:-0.02em;
  color:var(--text-2); text-decoration:none;
  transform-origin:top left;
  transition:transform .35s var(--ease-out), color .18s ease;
}
.logo:hover{color:var(--ink)}

.discovery-cta{
  position:fixed; top:34px; right:clamp(16px, 2vw, 36px); z-index:40;
  display:inline-flex; align-items:center; gap:8px;
  background:#111; color:#fff; border:none; border-radius:999px;
  padding:9px 18px;
  font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:-0.005em; line-height:1.2; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, transform .18s ease;
}
.discovery-cta:hover{background:#000; transform:translateY(-1px)}

.au-contact{
  position:fixed; top:78px; right:clamp(16px, 2vw, 36px); z-index:40;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-family:var(--font-display);
  font-size:clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight:400; letter-spacing:-0.01em; line-height:1.25;
  color:var(--text-2); text-align:right;
  transform-origin:top right;
  transition:transform .35s var(--ease-out);
}
.au-contact__link{
  position:relative;
  color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; white-space:nowrap;
  transition:color .18s ease;
}
.au-contact__link:hover{color:var(--ink)}

.au-contact__link::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:32px; transform:translateY(-50%);
}

body.is-scrolled .logo{transform:scale(.6)}
.au-contact--scrolled{transform:scale(.9)}

@media (min-width: 900px){
  .logo{top:48px}
}

@media (max-width: 699px){

  .logo{left:20px; top:28px}
  body.is-scrolled .logo{transform:scale(.7)}

  .discovery-cta{display:none}

  .au-contact{top:26px; right:16px; gap:14px; line-height:1.3; font-size:16px}
  .au-contact, #au-contact{display:none}
  .au-contact--scrolled{transform:scale(.85)}

}
.pill{
  display:inline-flex; align-items:center; gap:calc(10px * var(--s));
  border-radius:999px; text-decoration:none; white-space:nowrap;
  padding:calc(13px * var(--s)) calc(24px * var(--s));
  font-family:var(--font-display); font-size:calc(16px * var(--s)); font-weight:500;
  transition:background .2s ease, transform .18s ease;
}
.pill:hover{transform:translateY(-1px)}
.pill--dark:hover{background:#000}
.pill--dark{background:var(--ink); color:#fff}
.pill--accent{background:var(--yellow); color:var(--ink)}
.pill .arrow{font-size:.95em}

.footer-legal{
  position:fixed; bottom:28px; left:28px; z-index:200;
  font-family:var(--font-mono); font-size:0.72rem; color:var(--text-3);
  line-height:1; white-space:nowrap; pointer-events:none;
  transition:opacity .4s ease;
}
.footer-legal p{margin:0}
.footer-legal__link{
  color:inherit; text-decoration:none; pointer-events:auto;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.footer-legal__link:hover{color:var(--ink); border-bottom-color:currentColor}

#scroll-hint{
  position:fixed; left:50%;
  bottom:max(92px, calc(80px + env(safe-area-inset-bottom)));
  transform:translateX(-50%) translateY(10px);
  opacity:0; pointer-events:none;
  transition:opacity .55s ease, transform .55s var(--ease-out);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  z-index:9000; white-space:nowrap;
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
}
#scroll-hint.is-visible{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
#scroll-hint:hover .scroll-hint-chevron{animation-play-state:paused; transform:translateY(2px)}
.scroll-hint-chevron{color:var(--text-2); animation:sh-bounce 1.5s ease-in-out infinite}
@keyframes sh-bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)}}
.scroll-hint-label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.08em;
  color:var(--text-2); margin:0; text-transform:lowercase;
}
.sh-o{display:inline-block; animation:sh-o-out 2s ease-in-out infinite}
.sh-o:nth-child(1){animation-delay:0s}
.sh-o:nth-child(2){animation-delay:.22s}
.sh-o:nth-child(3){animation-delay:.44s}
.sh-o:nth-child(4){animation-delay:.66s}
@keyframes sh-o-out{
  0%,35%,100%{transform:scaleX(1) translateY(0); opacity:1}
  60%{transform:scaleX(.05) translateY(1px); opacity:0}
  80%{transform:scaleX(1.15) translateY(-1px); opacity:1}
}

.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:max(28px, calc(16px + env(safe-area-inset-bottom)));
  background:#111; border-radius:100px; padding:12px 28px;
  display:flex; align-items:center; gap:24px; z-index:9900;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  transition:transform .4s var(--ease-out), opacity .4s ease;
}
.nav-icon{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:rgba(255,255,255,.45); transition:color .2s; position:relative;
}
.nav-icon:hover,.nav-icon.active{color:#fff}

.nav-hire{
  background:none; border:none; padding:0; cursor:pointer; position:relative;
  display:inline-flex; align-items:center;

  height:20px;
  font-family:var(--font-display); font-size:13px; font-weight:500;
  letter-spacing:-.005em; line-height:1; white-space:nowrap;
  color:rgba(255,255,255,.72); transition:color .2s ease;
}
.nav-hire:hover,.nav-hire[aria-expanded="true"]{color:#fff}
.nav-tooltip{
  position:absolute; bottom:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(10px) scale(.86);
  transform-origin:center bottom;
  background:#1a1a18; color:#fff; padding:7px 14px; border-radius:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  white-space:nowrap; opacity:0; pointer-events:none;
}
.nav-icon:hover .nav-tooltip{
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity .12s ease, transform .38s var(--ease-spring);
}
.nav-icon:not(:hover) .nav-tooltip{transition:opacity .12s ease, transform .2s ease}

.ask-ai-btn{
  position:fixed;
  left:calc(50% + var(--nav-half-width, 200px) + 14px);
  bottom:max(28px, calc(16px + env(safe-area-inset-bottom)));
  width:var(--nav-height, 44px); height:var(--nav-height, 44px);
  background:#111; color:#fff; border:none; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:0; cursor:pointer; z-index:9900; overflow:hidden; white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  transition:width .32s var(--ease-out), padding .32s var(--ease-out),
             transform .25s var(--ease-out), opacity .3s ease, background .2s ease;
}
.ask-ai-btn__icon{display:block; pointer-events:none; flex-shrink:0;
  margin-left:calc((var(--nav-height, 44px) - 18px) / 2)}
.ask-ai-btn__label{
  display:inline-flex; font-family:var(--font-display); font-size:13px;
  font-weight:500; letter-spacing:-.005em; color:#fff;
  pointer-events:none; white-space:pre;
}
.ask-ai-btn__char{
  display:inline-block; opacity:0; transform:translateY(4px);
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 18ms);
}
.ask-ai-btn:hover{width:auto; padding-right:18px; transform:translateY(-2px)}
.ask-ai-btn:hover .ask-ai-btn__char{
  opacity:1; transform:translateY(0);
  transition-delay:calc(var(--i, 0) * 24ms + 60ms);
}
.ask-ai-btn.is-open{background:#fff; color:var(--ink)}
.ask-ai-btn.is-open .ask-ai-btn__label{color:var(--ink)}

.social-fixed{position:fixed; bottom:28px; right:28px; display:flex; gap:8px; z-index:600;
  transition:opacity .4s ease, transform .4s var(--ease-out)}
.social-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  transition:opacity .2s, transform .2s var(--ease-out);
}
.social-btn:hover{opacity:.82; transform:translateY(-2px)}
.social-btn--li{background:#0A66C2; color:#fff}

.nav-menu-panel{
  position:fixed; background:#1a1a18; border-radius:12px; padding:4px 0;
  min-width:160px; opacity:0; transform:translateY(6px) scale(.96);
  transform-origin:bottom center; pointer-events:none;
  transition:opacity .2s ease, transform .22s var(--ease-out);
  z-index:9850; box-shadow:0 8px 40px rgba(0,0,0,.28);
}
.nav-menu-panel.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.nav-menu-item{
  display:block; padding:7px 18px; color:rgba(232,230,220,.8);
  font-family:var(--font-mono); font-size:.8rem; font-weight:500;
  letter-spacing:-.01em; text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
.nav-menu-item:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav-menu-item + .nav-menu-item{border-top:1px solid rgba(255,255,255,.06)}

.contact-panel{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:calc(max(28px, 16px + env(safe-area-inset-bottom)) + 56px + 14px);
  width:min(calc(100vw - 32px), 480px);
  background:#1a1a18; border-radius:14px; overflow:hidden;
  z-index:9850; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .3s var(--ease-out);
  box-shadow:0 -4px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.contact-panel.is-open{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.contact-panel__inner{padding:28px 28px 24px}
.contact-panel__heading{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.9); margin:0 0 20px;
}
.contact-panel__close{
  all:unset; position:absolute; top:10px; right:10px; z-index:10; cursor:pointer;
  color:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.06);
  transition:color .15s, background .15s;
}
.contact-panel__close:hover{color:#fff; background:rgba(255,255,255,.14)}
.contact-panel .form-row{display:flex; gap:10px; margin-bottom:10px}
.contact-panel .form-input{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:8px; padding:11px 13px; color:#fff;
  font-family:var(--font); font-size:14px; outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.contact-panel .form-input::placeholder{color:rgba(255,255,255,.38)}
.contact-panel .form-input:focus{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.09)}
.contact-panel .form-textarea{min-height:86px; resize:vertical}
.contact-panel .form-actions{display:flex; justify-content:flex-end; margin-top:12px}
.contact-panel .form-submit{
  background:#fff; color:var(--ink); border:none; border-radius:999px;
  padding:10px 22px; cursor:pointer;
  font-family:var(--font-display); font-size:13px; font-weight:500;
  transition:transform .18s ease, background .2s ease;
}
.contact-panel .form-submit:hover{transform:translateY(-1px); background:#F4F3EE}
.contact-panel .form-success{display:none}
.contact-panel .form-success.is-shown{display:block}
.contact-panel .form-success-msg{color:#fff; font-size:15px; margin:0 0 6px}
.contact-panel .form-success-sub{color:rgba(255,255,255,.5); font-size:12.5px; margin:0}
.contact-panel .contact-form.is-sent{display:none}

.spacer{position:relative; width:100%}
.stage{
  position:sticky; top:0; height:100vh; height:100dvh;
  overflow:hidden; cursor:grab; touch-action:pan-y;
}
.stage.is-dragging{cursor:grabbing}

.world{
  position:absolute; top:0; left:0;
  height:calc(var(--world-h) * 1px); width:calc(var(--track-w) * 1px);

  transform:scale(var(--s)) translateX(calc(var(--x, 0) * -1px));
  transform-origin:0 0;
  will-change:transform;
}

.hero{position:absolute; inset:0 auto 0 0; width:calc(var(--hero-w) * 1px); height:calc(var(--world-h) * 1px)}

.hero__panel{
  position:absolute; left:0; top:0; width:810px; height:100%;
  background:linear-gradient(to bottom,
    var(--yellow) 0,
    var(--yellow) calc(100% - 440px / var(--s)),
    var(--paper)  calc(100% - 160px / var(--s)));
}
.hero__copy{position:absolute; left:100px; top:150px; width:760px}
.badge{
  display:inline-block; border:2px solid var(--ink); border-radius:999px;
  padding:9px 20px; font-size:var(--badge); font-weight:400; line-height:1;
  font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.13em;
}
.display{
  font-family:var(--font-display); font-weight:400;

  font-size:var(--headline); line-height:.96; letter-spacing:-.03em;
  margin:32px 0 0;
}
.hero__sub{font-size:var(--sub); line-height:1.42; margin:38px 0 0; font-weight:400}
.cue{display:flex; align-items:center; gap:18px; margin:52px 0 0; font-size:var(--cue); line-height:1.28}
.cue__dot{
  width:46px; height:46px; border-radius:50%; background:var(--orange); flex:none;
  box-shadow:0 0 0 3px rgba(14,76,75,.22);
}

.shape{position:absolute}
.shape--slab{
  left:620px; top:450px; width:510px; height:450px;
  background:var(--purple); color:rgba(255,255,255,.30);
  border-radius:130px 130px 0 0;
  clip-path:polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 34%);
}

.shape--dome{
  left:730px; top:560px; width:280px; height:340px;
  background:#AAEA38; color:rgba(24,36,0,.28);
  border-radius:150px 150px 0 0;
}
.shape--wedge{
  left:975px; top:515px; width:165px; height:385px;
  background:#FF7A00;
  border-radius:86px 0 0 0;
}

.bignum{
  position:absolute; left:1145px; top:565px; z-index:2;
  font-family:var(--font-display); font-weight:400; font-size:var(--bignum); line-height:.82;
  letter-spacing:-.03em; color:var(--ink);
}

.rule{
  position:absolute; left:calc(var(--x) * 1px); top:calc(var(--rule-y) * 1px);
  width:calc(var(--w) * 1px); height:2px; background:var(--ink);
}

.rule__fill{
  position:absolute; left:0; top:-1px; height:4px;
  width:calc(var(--fill, 0) * 1px);
  background:linear-gradient(90deg,
    var(--yellow) 0, var(--yellow) calc(100% - 54px), rgba(255,209,70,0) 100%);
}

.tick{position:absolute; left:calc(var(--x) * 1px); top:calc(var(--rule-y) * 1px)}
.tick__year{
  position:absolute; left:0; bottom:34px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:var(--tick-year); font-weight:400; white-space:nowrap;

  line-height:1;
  transition:opacity .25s ease;
  opacity:.55;
}
.tick__dot{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:19px; height:19px; border-radius:50%; background:var(--ink); display:block;
}
.tick.is-passed .tick__year{opacity:1; font-weight:700}
.tick.is-passed .tick__dot{background:var(--yellow); box-shadow:0 0 0 3.5px var(--ink)}
.tick.is-current .tick__dot{box-shadow:0 0 0 3.5px var(--ink), 0 0 0 9px rgba(255,87,51,.38)}

.card{
  position:absolute; left:calc(var(--x) * 1px); top:calc(var(--y) * 1px);
  width:calc(var(--card-w) * 1px); height:calc(var(--card-h) * 1px);
  border-radius:20px; padding:22px 24px 66px;
  overflow:hidden; z-index:5;

  opacity:var(--in,1);
  transform:translate(calc((1 - var(--in,1)) * 46px), calc((1 - var(--in,1)) * 22px))
            scale(calc(.94 + .06 * var(--in,1)));
}

.card, .detail__panel{
  --fill:var(--yellow); --on:var(--ink); --wash:rgba(0,0,0,.08);
}
.t-red     { --fill:#C0392B; --on:#FFFFFF; --wash:rgba(255,255,255,.14) }
.t-lavender{ --fill:#B7A6E0; --on:#1A1A18; --wash:rgba(0,0,0,.08)      }
.t-purple  { --fill:#2D1B56; --on:#E0D0F8; --wash:rgba(255,255,255,.14) }
.t-aqua    { --fill:#A9DCE3; --on:#1A1A18; --wash:rgba(0,0,0,.08)      }
.t-gold    { --fill:#E8B33C; --on:#2A1A00; --wash:rgba(0,0,0,.08)      }
.t-forest  { --fill:#2A6042; --on:#C8F0D8; --wash:rgba(255,255,255,.14) }
.t-lime    { --fill:#AAEA38; --on:#182400; --wash:rgba(0,0,0,.08)      }
.t-blue    { --fill:#3676FF; --on:#FFFFFF; --wash:rgba(255,255,255,.14) }
.t-pink    { --fill:#EE3F8E; --on:#FFFFFF; --wash:rgba(255,255,255,.14) }
.t-bone    { --fill:#F0EEE4; --on:#1A1A18; --wash:rgba(0,0,0,.08)      }
.t-teal    { --fill:#0E4C4B; --on:#FFFFFF; --wash:rgba(255,255,255,.14) }
.t-orange  { --fill:#FF7A00; --on:#1A1A18; --wash:rgba(0,0,0,.08)      }
.t-ink     { --fill:#1A1A18; --on:#FFFFFF; --wash:rgba(255,255,255,.14) }

.card{background:var(--fill); color:var(--on)}
.card.is-active{z-index:8; box-shadow:0 24px 60px rgba(0,0,0,.28)}
.card__n{font-family:var(--font-display); font-size:46px; line-height:.9; font-weight:400; letter-spacing:-.03em}
.card__title{font-size:21px; line-height:1.14; font-weight:700; margin:10px 0 0; max-width:54%}
.card__disc{font-size:12.5px; line-height:1.28; margin:6px 0 0; opacity:.78; max-width:56%}
.card__view{
  position:absolute; left:24px; bottom:20px;
  display:inline-flex; align-items:center; gap:9px;
  border:1.5px solid currentColor; border-radius:999px; padding:6px 14px; font-size:14px;
  background:none; color:inherit; font-family:inherit; cursor:pointer;
  transition:background .18s ease;
}
.card__view:hover{background:var(--wash)}
.card__view:focus-visible{outline:3px solid currentColor; outline-offset:3px}
.card__view i{
  font-style:normal; display:grid; place-items:center; width:19px; height:19px;
  border-radius:50%; font-size:11px;
  transition:transform .22s var(--ease-out);
}
.card__view:hover i{transform:translate(2px,-2px)}

.card__view i{background:var(--on); color:var(--fill)}

.card__art{
  position:absolute; right:6px; top:30px; width:150px; height:145px;
  color:currentColor; opacity:.85; background-size:7px 7px;
  -webkit-mask-image:linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image:linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:96px 66px, 78px 82px, 88px 58px;
  mask-size:96px 66px, 78px 82px, 88px 58px;
  -webkit-mask-position:2px 0, 74px 40px, 12px 100px;
  mask-position:2px 0, 74px 40px, 12px 100px;
}

.outro{
  position:absolute; left:calc(var(--x) * 1px); bottom:calc(var(--bottom) * 1px);
  margin:0; z-index:4;

  display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:flex-end; gap:0 .22em;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--outro-size, 78px); line-height:1;
  letter-spacing:-.03em; color:var(--ink);
}
.outro__wrap{display:inline-block; overflow:hidden; line-height:1.1; padding:0 .04em}
.outro__word{
  display:inline-block;
  transform:translateY(calc((1 - var(--wr, 0)) * 115%));
  will-change:transform;
}

.walker{
  position:absolute; left:calc(var(--x) * 1px); top:calc(var(--y) * 1px);
  z-index:9; pointer-events:none;
  transform:translateY(var(--drop, 0px));
}

.figure{position:absolute; left:0; top:0; overflow:visible}
.fig-arm{stroke:#dcd5c9}
.fig-arm--far{stroke:#bab3a7}
.fig-torso{fill:#f7f6f2}
.fig-head{fill:#e6e0d4}
.fig-hair{fill:#17181c}
.fig-glasses{fill:none; stroke:#17181c; stroke-linecap:round}

body.is-detail-open .stage{filter:saturate(.5) brightness(.94); transition:filter .3s ease}
body.is-detail-open::after{
  content:""; position:fixed; inset:0; z-index:55; background:rgba(12,12,12,.42);
  animation:scrim .28s ease both;
}
@keyframes scrim{from{opacity:0}to{opacity:1}}

.detail[hidden]{display:none}
.detail{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:5vh 5vw;

  transform-origin:var(--from-x, 50%) var(--from-y, 50%);
  transform:scale(.55); opacity:0;
  transition:transform .34s cubic-bezier(.2,.8,.25,1), opacity .24s ease;
}
.detail.is-in{transform:scale(1); opacity:1}

.detail__panel{
  position:relative; width:min(640px, 100%);
  max-height:calc(100vh - var(--chrome-top) - var(--chrome-bottom) - 20px);
  overflow:auto;
  border-radius:24px; padding:32px 38px 28px; user-select:text;
  box-shadow:0 30px 90px rgba(0,0,0,.4);
}
.detail__panel{background:var(--fill); color:var(--on)}
.detail__close{
  position:absolute; right:22px; top:20px; width:44px; height:44px; border-radius:50%;
  border:1.5px solid currentColor; background:none; color:inherit; cursor:pointer;
  font-size:24px; line-height:1; display:grid; place-items:center;
}
.detail__close:hover{background:rgba(0,0,0,.1)}
.detail__n{font-family:var(--font-display); font-weight:400; font-size:54px; letter-spacing:-.03em; line-height:.9}
.detail__period{display:block; font-family:var(--font-mono); font-size:14px; opacity:.75; margin-top:10px; letter-spacing:.06em; text-transform:uppercase}
.detail__title{font-size:32px; line-height:1.1; font-weight:750; margin:12px 0 0; letter-spacing:-.01em}
.detail__role{font-size:16px; font-weight:600; margin:8px 0 0; opacity:.85}

.detail__company{font-size:14.5px; line-height:1.5; margin:10px 0 0; opacity:.68; max-width:52ch}
.detail__blurb{font-size:16.5px; line-height:1.6; margin:15px 0 0; max-width:56ch}
.detail__list{margin:13px 0 0; padding-left:1.1em; font-size:15.5px; line-height:1.55}
.detail__list li{margin:5px 0}
.detail__tags{display:flex; flex-wrap:wrap; gap:8px; margin:17px 0 0}
.detail__tags span{
  border:1.5px solid currentColor; border-radius:999px; padding:5px 13px; font-size:13px; opacity:.9;
}

body[data-layout="portrait"]{

  --headline:54px;
  --sub:24px;
  --badge:16px;
  --cue:19px;
  --bignum:150px;
  --tick-year:34px;
  --chrome-top:92px;
  --chrome-bottom:84px;
}

body[data-layout="portrait"] .hero__panel{width:620px}
body[data-layout="portrait"] .hero__copy{left:52px; top:140px; width:530px}
body[data-layout="portrait"] .display{margin-top:26px}
body[data-layout="portrait"] .hero__sub{margin-top:28px}
body[data-layout="portrait"] .cue{margin-top:32px}
body[data-layout="portrait"] .cue__dot{width:40px; height:40px}

body[data-layout="portrait"] .shape--slab{
  left:150px; top:760px; width:470px; height:520px;
  border-radius:150px 150px 0 0;
  clip-path:polygon(26% 0, 100% 0, 100% 100%, 0 100%, 0 38%);
}
body[data-layout="portrait"] .shape--dome{left:250px; top:880px; width:280px; height:400px}
body[data-layout="portrait"] .shape--wedge{left:508px; top:840px; width:150px; height:440px}
body[data-layout="portrait"] .bignum{left:200px; top:1080px}

body[data-layout="portrait"] .card{border-radius:26px; padding:26px 28px 78px}
body[data-layout="portrait"] .card__n{font-size:58px}

body[data-layout="portrait"] .card__title{font-size:29px; max-width:70%; margin-top:14px}
body[data-layout="portrait"] .card__disc{font-size:21px; max-width:74%; margin-top:9px}
body[data-layout="portrait"] .card__view{
  font-size:19px; min-height:72px; padding:0 26px; left:28px; bottom:24px;
}
body[data-layout="portrait"] .card__view i{width:26px; height:26px; font-size:14px}

body[data-layout="portrait"] .card__art{width:160px; height:150px; right:8px; top:44px}
body[data-layout="portrait"] .tick__dot{width:23px; height:23px}
body[data-layout="portrait"] .tick__year{bottom:40px}
body[data-layout="portrait"] .rule__fill{height:5px; top:-1.5px}

.outro--wrap{
  flex-wrap:wrap; white-space:normal; width:var(--outro-maxw);
}

body[data-layout="portrait"] .detail{place-items:end center; padding:0}

body[data-layout="portrait"] .detail__panel{
  width:100%; max-height:calc(100dvh - var(--chrome-top) - 12px);
  border-radius:28px 28px 0 0;
  padding:26px 24px calc(var(--chrome-bottom) + env(safe-area-inset-bottom));
}
body[data-layout="portrait"] .detail__title{font-size:28px}
body[data-layout="portrait"] .detail__n{font-size:46px}

@media (prefers-reduced-motion: reduce){
  .detail{transition:none}
  body.is-detail-open::after{animation:none}
  .tick__year{transition:none}

  .outro__word{transform:none}
}

@media (max-width: 699px){
  .footer-legal{display:none}
  #scroll-hint{display:none}
  .social-fixed{display:none}
  .ask-ai-btn__label{display:none}
}