@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050505;font-family:Inter,Arial,sans-serif;color:#fff}a{color:inherit;text-decoration:none}
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#030303}
.hero-bg{position:absolute;inset:0;background:url('../img/hero.png') center center/cover no-repeat;filter:brightness(.43) saturate(.72) contrast(1.12)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.05) 55%,rgba(0,0,0,.26)),radial-gradient(ellipse at 50% 45%,transparent 0,rgba(0,0,0,.15) 52%,rgba(0,0,0,.48) 100%)}
header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 4.5vw;font-size:10px;letter-spacing:.27em}.domain{font-weight:400}header nav{display:flex;align-items:center;gap:42px;text-transform:uppercase}header nav a{font-size:9px}header nav i{display:block;width:26px;height:1px;background:#ddd}.menu{display:none;background:none;border:0}.menu span{display:block;width:25px;height:1px;background:#fff;margin:6px}
.brand{position:absolute;z-index:4;left:50%;top:48%;transform:translate(-50%,-50%);width:88%;text-align:center}.mark{display:flex;justify-content:center;align-items:baseline;white-space:nowrap}.after{font-size:clamp(18px,2.5vw,38px);font-weight:300;letter-spacing:.38em;margin-right:25px}.zero{position:relative;font-size:clamp(72px,9.2vw,145px);line-height:.82;font-weight:200;letter-spacing:-.055em}.zero sup{position:absolute;right:-.28em;top:-.28em;font-size:.35em;font-weight:300}.o{position:relative;display:inline-block}.rule{position:absolute;left:67%;top:52%;width:15vw;height:1px;background:#fff}.brand p{margin:43px 0 0;font-size:clamp(9px,.95vw,14px);letter-spacing:.48em;font-weight:300;color:#ddd}.scroll{position:absolute;z-index:4;bottom:30px;left:4.5vw;display:flex;align-items:center;gap:20px;font-size:9px;letter-spacing:.24em}.chev{width:17px;height:17px;border-left:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(-45deg);margin-top:-8px}


@media(max-width:900px){header nav{display:none}.menu{display:block}.menu.open+nav{display:flex;position:absolute;right:18px;top:68px;flex-direction:column;align-items:flex-end;gap:22px;padding:24px;background:rgba(0,0,0,.94)}.brand{width:94%}.after{margin-right:12px}.rule{width:18vw}}
@media(max-width:560px){.hero{min-height:100svh}.hero-bg{background-position:37% center}.brand{top:44%}.after{font-size:13px;letter-spacing:.26em}.zero{font-size:56px}.brand p{font-size:8px;letter-spacing:.25em;line-height:1.7}}

/* ---------- Below the hero ---------- */
:root{--paper:#efede7;--paper-2:#e2dfd7;--paper-3:#cfcbc1;--ink:#0c0c0b;--ink-2:#5a5852;--hair:#bdb9ae;--accent:#9a6a32;--dark:#121110;--gutter:4.5vw}
.section{padding:clamp(72px,11vh,130px) var(--gutter)}
.label{display:flex;align-items:center;gap:14px;margin:0 0 34px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.label i{display:block;width:26px;height:1px;background:currentColor;opacity:.6}
.label em{font-style:normal;color:var(--accent)}
.more{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding-bottom:7px;border-bottom:1px solid currentColor;transition:color .2s,border-color .2s}
.more:hover{color:var(--accent)}
.more b{font-weight:300;font-size:15px;transition:translate .25s}
.more:hover b{translate:4px 0}

/* intro */
.intro{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--hair)}
.intro h2{margin:0;max-width:920px;font-size:clamp(30px,3.6vw,56px);line-height:1.15;font-weight:300;letter-spacing:-.02em}
.intro h2 strong{font-weight:500}
.intro p{max-width:560px;margin:34px 0 0;color:var(--ink-2);font-size:16px;line-height:1.75}

.collection{background:var(--paper);color:var(--ink);border-top:1px solid var(--hair);overflow:hidden}
.collection .head{border-bottom:1px solid var(--ink)}
.collection .head{margin-bottom:0}
.collection .head h2{margin:0;font-size:clamp(30px,3.6vw,56px);font-weight:300;letter-spacing:-.02em}
.collection .head p{margin:0 0 8px;color:var(--ink-2);font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* featured */
.featured{background:#050505;color:#f5f5f2;display:grid;grid-template-columns:58% 1fr;min-height:80vh}
.featured .media{position:relative;overflow:hidden}
.featured .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.9)}
.featured .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#050505)}
.featured .body{padding:clamp(60px,10vh,120px) var(--gutter) clamp(60px,10vh,120px) clamp(36px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.featured .label{color:#8a8a86}
.featured h2{margin:0 0 20px;font-size:clamp(34px,4.4vw,68px);line-height:1;font-weight:200;letter-spacing:-.03em}
.featured p{margin:0 0 40px;max-width:440px;color:#aaa;font-size:15px;line-height:1.75}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0 0 44px;padding:0;border-top:1px solid #262626}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #262626}
.specs dt{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:#777}
.specs dd{margin:0;font-size:13px;font-weight:300;text-align:right}
.featured .more:hover{color:var(--accent)}

/* journal strip */
.journal{background:var(--paper-2);color:var(--ink);min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(80px,14vh,170px);padding-bottom:clamp(80px,14vh,170px)}
.entries a{border-top-color:var(--hair)}.entries li:last-child a{border-bottom-color:var(--hair)}
.journal .head{margin-bottom:40px}
.journal .head h2{margin:0;font-size:clamp(32px,4.2vw,68px);font-weight:300;letter-spacing:-.025em}
.entries{list-style:none;margin:0;padding:0}
.entries a{display:grid;grid-template-columns:140px 1fr auto;gap:32px;align-items:baseline;padding:34px 0;border-top:1px solid var(--hair);transition:color .2s}
.entries li:last-child a{border-bottom:1px solid var(--hair)}
.entries a:hover{color:var(--accent)}
.entries time{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-2)}
.entries h3{margin:0 0 8px;font-size:clamp(22px,2.4vw,34px);font-weight:400;letter-spacing:-.015em}
.entries p{margin:0;font-size:15px;color:var(--ink-2)}
.entries b{font-weight:300;font-size:18px;color:var(--ink-2)}

/* footer */
footer{background:#070707;color:#8c8c88;padding:56px var(--gutter) 34px;display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:end;font-size:10px;letter-spacing:.25em;text-transform:uppercase}
footer .tag{display:block;font-size:12px;font-weight:400;letter-spacing:.3em;color:#f5f5f2}
footer nav{display:flex;gap:34px}
footer nav a:hover,footer .meta a:hover{color:#fff}
footer .meta a{transition:color .2s}
footer .meta{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid #222;font-size:9px}

@media(max-width:900px){
  .featured{grid-template-columns:1fr;min-height:0}
  .featured .media{aspect-ratio:16/10}
  .featured .media::after{background:linear-gradient(180deg,transparent 60%,#080808)}
  .featured .body{padding:40px var(--gutter) 72px}
  .specs{grid-template-columns:1fr}
  .entries a{grid-template-columns:1fr auto;gap:8px 20px}
  .entries time{grid-column:1/-1}
  footer{grid-template-columns:1fr}
  footer nav{flex-wrap:wrap;gap:18px 28px}
}


/* ---------- Hero motion ---------- */
.hero-bg{bottom:-8%;translate:0 var(--py,0px)}
.mark{clip-path:inset(-120px -50vw -.15em -.1em)}
.brand p{--tag-ls:.48em;letter-spacing:var(--tag-ls)}
.hero-overlay::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse 24vw 70vh at 84% 45%,rgba(255,236,210,.18),rgba(255,236,210,.05) 45%,transparent 70%)}
@media(max-width:560px){.brand p{--tag-ls:.25em}}

@media(prefers-reduced-motion:no-preference){
  :root{--out:cubic-bezier(.16,1,.3,1);--draw:cubic-bezier(.7,0,.2,1)}

  /* 0.0s  photo settles */
  .hero-bg{animation:settle 2.4s var(--out) both}
  @keyframes settle{
    from{opacity:0;transform:scale(1.05);filter:brightness(.15) saturate(.72) contrast(1.12)}
    to{opacity:1;transform:scale(1);filter:brightness(.43) saturate(.72) contrast(1.12)}
  }
  /* 0.4s  light from the door */
  .hero-overlay::after{animation:appear 2.2s ease-out .4s forwards}

  /* 0.1s  AFTER then ZERO slide up out of the baseline */
  .after,.zero{transform:translateY(110%);animation:slide .85s var(--out) forwards}
  .after{animation-delay:.1s}
  .zero{animation-delay:.22s}
  @keyframes slide{to{transform:none}}

  /* 0.75s  the line draws out of the O ... */
  .rule{transform:scaleX(0);transform-origin:left center;animation:draw .55s var(--draw) .75s forwards}
  @keyframes draw{to{transform:scaleX(1)}}

  /* 1.15s  ... and arrives at one */
  .zero sup{opacity:0;transform:scale(.6);transform-origin:left bottom;animation:pop .45s var(--out) 1.15s forwards}
  @keyframes pop{to{opacity:1;transform:none}}

  /* 1.25s  tagline settles */
  .brand p{opacity:0;animation:tagline .9s var(--out) 1.25s forwards}
  @keyframes tagline{from{opacity:0;letter-spacing:calc(var(--tag-ls) * 1.6)}to{opacity:1;letter-spacing:var(--tag-ls)}}

  /* 1.4s  chrome fades in, staggered */
  .domain,.menu,header nav a,header nav i,.scroll{opacity:0;animation:appear .7s ease-out forwards}
  @keyframes appear{to{opacity:1}}
  .domain,.menu{animation-delay:1.4s}
  header nav a:nth-child(1){animation-delay:1.46s}
  header nav a:nth-child(2){animation-delay:1.52s}
  header nav a:nth-child(3){animation-delay:1.58s}
  header nav a:nth-child(4){animation-delay:1.64s}
  header nav a:nth-child(5){animation-delay:1.7s}
  header nav i{animation-delay:1.76s}
  .scroll{animation-delay:1.7s}

  /* scroll cue nods */
  .chev{animation:nod 2.4s ease-in-out 2.6s infinite}
  @keyframes nod{50%{translate:0 5px}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Texture & motion below the hero ---------- */
.featured .media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}




/* journal rows */
.entries b{transition:translate .3s cubic-bezier(.16,1,.3,1),color .2s}
.entries a:hover b{translate:8px 0;color:var(--accent)}

/* scroll reveals (hidden only when JS is running) */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .9s cubic-bezier(.16,1,.3,1),translate .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;translate:0 0}
.js .stagger>*{opacity:0;translate:0 18px;transition:opacity .8s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1)}
.js .stagger.in>*{opacity:1;translate:0 0}
.js .stagger.in>*:nth-child(1){transition-delay:.05s}.js .stagger.in>*:nth-child(2){transition-delay:.13s}.js .stagger.in>*:nth-child(3){transition-delay:.21s}.js .stagger.in>*:nth-child(4){transition-delay:.29s}.js .stagger.in>*:nth-child(5){transition-delay:.37s}.js .stagger.in>*:nth-child(6){transition-delay:.45s}
.js .label.reveal i{scale:0 1;transform-origin:left;transition:scale .8s cubic-bezier(.16,1,.3,1) .2s}
.js .label.reveal.in i{scale:1 1}

@media(prefers-reduced-motion:reduce){
  .js .door{opacity:1;animation:none}.doors .cut path{transition:none}
  .js .reveal,.js .stagger>*{opacity:1;translate:0 0;transition:none}
  .js .label.reveal i{scale:1 1}
}
@media(max-width:900px){
}

/* ---------- Collection: category groups + item tiles ---------- */
.cat{padding:clamp(34px,5vh,56px) 0;border-top:1px solid var(--hair)}
.cat:first-of-type{border-top:0}
.cat-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n h more" "n p more";column-gap:22px;align-items:baseline;margin-bottom:22px}
.cat-head small{grid-area:n;font-size:10px;letter-spacing:.3em;color:var(--accent);align-self:start;padding-top:.9em}
.cat-head h3{grid-area:h;margin:0;font-size:clamp(28px,3vw,46px);font-weight:300;letter-spacing:-.025em;line-height:1}
.cat-head p{grid-area:p;margin:8px 0 0;color:var(--ink-2);font-size:14px}
.cat-head .more{grid-area:more;align-self:end;margin-bottom:4px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--dark);color:#efede7;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 14px 13px;isolation:isolate;outline:1px solid transparent;outline-offset:-1px;transition:outline-color .25s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.92);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .4s;z-index:-1}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72));z-index:-1}
.tile .name{font-size:13px;font-weight:400;letter-spacing:-.005em;line-height:1.25}
.tile .meta{margin-top:5px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#a09d95}
.tile:hover{outline-color:var(--accent)}
.tile:hover img{transform:scale(1.05);filter:saturate(.9) brightness(1)}
.tile.empty{background:#1a1917 repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.025) 9px 10px)}
.tile.empty::before{background:none}
.tile.empty::after{content:"No photo yet";position:absolute;top:13px;left:14px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#5d5a53}
.tile.empty .name{color:#cfccc4}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.cat-head{grid-template-columns:auto 1fr;grid-template-areas:"n h" "n p" "n more";row-gap:6px}.cat-head .more{margin-top:12px}}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr);gap:6px}.tile{padding:12px}}

/* ---------- Doors ---------- */
.doors{position:relative;display:flex;height:calc(62svh + var(--overlap));min-height:420px;background:#fff}
.doors .cut{position:absolute;z-index:3;top:0;left:0;width:100%;height:var(--overlap);overflow:visible;pointer-events:none;fill:none;stroke:var(--ink);stroke-width:1.5px;transition:stroke 1s ease 1.6s}
.doors .cut{visibility:hidden}
.doors.drawn .cut{visibility:visible}
.doors.drawn .cut path{transition:stroke-dashoffset 1.5s cubic-bezier(.7,0,.2,1)}
.doors.drawn .cut{stroke:rgba(255,255,255,.55)}
.js .door{opacity:0}
.js .doors.drawn .door{animation:doorin 1s ease forwards}
@keyframes doorin{to{opacity:1}}
.js .doors.drawn .door:nth-child(2){animation-delay:1.35s}.js .doors.drawn .door:nth-child(3){animation-delay:1.45s}.js .doors.drawn .door:nth-child(4){animation-delay:1.55s}.js .doors.drawn .door:nth-child(5){animation-delay:1.65s}.js .doors.drawn .door:nth-child(6){animation-delay:1.75s}
.door{position:relative;flex:1 1 0;overflow:hidden;color:#efede7;border-left:1px solid rgba(255,255,255,.14);transition:flex .7s cubic-bezier(.7,0,.2,1);isolation:isolate}
.door:first-child{border-left:0}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.75) brightness(.38) contrast(1.1);transform:scale(1.06);transition:filter .7s ease,transform 1.1s cubic-bezier(.16,1,.3,1);z-index:-1}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 40%,rgba(0,0,0,.7));z-index:-1}
.door .n{position:absolute;bottom:200px;left:50%;translate:-50% 0;font-size:10px;letter-spacing:.3em;color:var(--accent)}
.door .side{position:absolute;left:50%;bottom:40px;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;font-size:12px;letter-spacing:.4em;text-transform:uppercase;white-space:nowrap;transition:opacity .5s}
.door .open{position:absolute;left:clamp(26px,3.5vw,56px);right:clamp(26px,3.5vw,56px);bottom:clamp(34px,6vh,64px);display:flex;flex-direction:column;align-items:flex-start;opacity:0;translate:0 18px;transition:opacity .45s ease .1s,translate .7s cubic-bezier(.16,1,.3,1) .1s;white-space:nowrap}
.door .open strong{font-size:clamp(40px,5.2vw,86px);font-weight:200;letter-spacing:-.035em;line-height:.95}
.door .open em{margin:16px 0 26px;font-style:normal;font-size:14px;color:#bdb9b0;white-space:normal;max-width:34ch}
.door .open b{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;padding-bottom:7px;border-bottom:1px solid currentColor}
.doors:hover .door{flex:0.7 1 0}
.doors:hover .door:hover,.doors .door.is-open{flex:3.6 1 0}
.door:hover img,.door.is-open img{filter:grayscale(0) brightness(.78) contrast(1.05);transform:scale(1)}
.door:hover .side,.door.is-open .side,.door:hover .n,.door.is-open .n{opacity:0}
.door .n{transition:opacity .4s}
.door:hover .open,.door.is-open .open{opacity:1;translate:0 0}
.door:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.js .door{transition:flex .7s cubic-bezier(.7,0,.2,1)}

/* about */
/* About overlaps the doors: full on the left, cut back to half height on the right, joined by a diagonal */
:root{--about-h:64svh;--overlap:32svh}
.about{position:relative;z-index:2;background:#fff;color:var(--ink);height:var(--about-h);min-height:520px;display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px;clip-path:polygon(0 0,100% 0,100% 50%,66% 50%,48% 100%,0 100%)}
.about h2{margin:0;max-width:min(46vw,760px);font-size:clamp(30px,3.6vw,60px);line-height:1.1;font-weight:300;letter-spacing:-.025em}
.about p{margin:22px 0 0;max-width:min(42vw,560px);font-size:16px;line-height:1.7;color:var(--ink-2)}
.about .lede{margin-top:22px;font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:400;color:var(--ink)}
.doors{margin-top:calc(-1 * var(--overlap))}
main{background:#fff}
.about h2 strong{font-weight:500}

@media(max-width:900px){
  .about,.journal{min-height:0}
  .about{height:auto;clip-path:none;justify-content:center}
  .about h2,.about p{max-width:none}
  .doors{margin-top:0;height:auto;background:#050505}
  .doors .cut{display:none}
  .js .doors.drawn .door{animation-delay:0s}
  .doors{flex-direction:column;height:auto;min-height:0}
  .door{flex:none;height:24svh;min-height:150px;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .door .n{left:22px;top:18px;translate:0 0}
  .door .side{display:none}
  .door .open{opacity:1;translate:0 0;left:22px;right:22px;bottom:20px}
  .door .open strong{font-size:34px}
  .door .open em{margin:8px 0 0;font-size:13px}
  .door .open b{display:none}
  .door img{filter:grayscale(.3) brightness(.55)}
  .doors:hover .door,.doors:hover .door:hover,.doors .door.is-open{flex:none}
}

/* Header nav: split-flap hover, each character rolls up in turn */
header nav a,footer nav a{display:inline-flex;letter-spacing:0}
.ch{display:inline-block;overflow:hidden;height:1.4em;line-height:1.4;margin-right:.23em}
footer nav .ch{margin-right:.28em}
.ch span{display:block;transition:translate .38s cubic-bezier(.3,1.4,.4,1) calc(var(--i) * 28ms)}
a:hover .ch span,a:focus-visible .ch span{translate:0 -100%}
@media(max-width:900px){header nav a{display:inline-block;letter-spacing:.27em}header nav .ch{display:inline;overflow:visible;margin:0}header nav .ch span{display:inline}header nav .ch span+span{display:none}header nav a:hover .ch span{translate:0 0}}
@media(hover:none){footer nav a{display:inline-block;letter-spacing:.28em}footer nav .ch{display:inline;overflow:visible;margin:0}footer nav .ch span{display:inline}footer nav .ch span+span{display:none}}

/* ---------- Door transition: the chosen door fills the screen while the next page loads ---------- */
.transit{position:fixed;z-index:50;overflow:hidden;background:#050505;color:#efede7;transition:top .8s cubic-bezier(.7,0,.2,1),left .8s cubic-bezier(.7,0,.2,1),width .8s cubic-bezier(.7,0,.2,1),height .8s cubic-bezier(.7,0,.2,1)}
.transit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(0) brightness(.78) contrast(1.05);transform:scale(1);transition:filter .8s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.transit.full img{filter:brightness(.45);transform:scale(1.04)}
.transit::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 55%,rgba(0,0,0,0),rgba(0,0,0,.55))}
.transit .t{position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;text-align:center;opacity:0;transition:opacity .5s ease .5s}
.transit.full .t{opacity:1}
.transit .t small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.transit .t strong{display:block;font-size:clamp(44px,7vw,110px);font-weight:200;letter-spacing:-.035em;line-height:1}
.transit .bar{position:relative;width:min(320px,60vw);height:1px;margin:34px auto 0;background:rgba(255,255,255,.18);overflow:hidden}
.transit .bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.4,0,.2,1) .55s}
.transit.full .bar i{transform:scaleX(1)}
.transit .t em{display:block;margin-top:16px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-style:normal;color:#8d8a82}
body.transiting{overflow:hidden}
html.arriving body{animation:arrive .8s ease both}
@keyframes arrive{from{opacity:0}to{opacity:1}}

/* ---------- Sub pages ---------- */
body.sub{background:#050505;color:#efede7;min-height:100svh;display:flex;flex-direction:column}
body.sub header{position:relative}
body.sub .page{flex:1;padding:clamp(60px,12vh,140px) var(--gutter);display:flex;flex-direction:column;justify-content:center;background:#050505}
body.sub .page .label{color:#8d8a82}
body.sub h1{margin:0 0 20px;font-size:clamp(56px,9vw,150px);font-weight:200;letter-spacing:-.04em;line-height:.95}
body.sub .page p:not(.label){margin:0 0 40px;color:#8d8a82;font-size:16px}
body.sub .more{align-self:flex-start}
body.sub .more b{margin-left:0;margin-right:12px;order:-1}