/* Gece design language, shared by the V2 project page family and the five landing pages.
   Thin uppercase Jost for display, Hanken Grotesk for reading, 11px tracked labels, a fixed sheet label top-left,
   hairline rules, teak as the single accent. Pages may change the palette tokens, never the grammar. */
:root{
  --bg:#0B0B0B; --bg-2:#151514; --fg:#EFEEE9; --soft:#CFCEC8; --mute:#8A8984; --line:#2A2A28; --accent:#C39364;
  --disp:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --draw:invert(1) hue-rotate(180deg);
  --kit-font:var(--body); --kit-bg:color-mix(in srgb,var(--bg) 85%,transparent); --kit-fg:var(--fg); --kit-line:color-mix(in srgb,var(--fg) 22%,transparent); --kit-accent:var(--accent); --kit-hover:color-mix(in srgb,var(--fg) 8%,transparent);
  --lb-bg:var(--bg); --lb-fg:var(--fg); --lb-paper:transparent; --lb-draw-filter:var(--draw);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:300 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.g{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lbl{font:400 11px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.lbl b{color:var(--fg);font-weight:500}
.disp{font-family:var(--disp);font-weight:200;text-transform:uppercase;letter-spacing:.06em;line-height:1;margin:0}
.outline{color:transparent;-webkit-text-stroke:1px var(--fg)}
.draw{filter:var(--draw)}
.ph{cursor:zoom-in;overflow:hidden}
.ph img{width:100%;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.ph:hover img{transform:scale(1.03)}
.ph-cap{display:flex;justify-content:space-between;gap:16px;padding-top:10px}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block}

/* preloader: name and a counter, as on the project page */
.pre{position:fixed;inset:0;z-index:2000;background:var(--bg);display:grid;place-items:center;transition:transform 1s cubic-bezier(.8,0,.2,1)}
.pre.out{transform:translateY(-100%)}
.pre .w{display:flex;align-items:baseline;gap:22px;font:200 13px var(--disp);letter-spacing:.5em;text-transform:uppercase}
.pre .n{font-variant-numeric:tabular-nums;width:3ch;color:var(--accent);letter-spacing:0}
.pre .bar{position:absolute;left:0;bottom:0;height:1px;background:var(--fg);width:0}

/* top bar: fixed sheet label left, site menu right */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:30px;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent)}
.top>*{pointer-events:auto}
.top .sheet{display:block;overflow:hidden;height:1.4em;font:400 12px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase}
.top .sheet span{display:block;transition:transform .5s cubic-bezier(.2,.7,.1,1),opacity .4s}
.top .sheet span.go{transform:translateY(-100%);opacity:0}
.top nav{display:flex;gap:clamp(14px,2.2vw,30px)}
.top nav a{font:400 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .3s}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}
.top.clear{background:none}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:48px calc(90px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
@media (max-width:720px){ .top nav{gap:12px} .top nav a{font-size:10px;letter-spacing:.1em} }
@media (prefers-reduced-motion:reduce){.pre{display:none}*{transition:none!important}}

/* mobile menu: the nav folds into a full-screen list */
.mbtn{display:none;font:400 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase}
.mmenu{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(90px + env(safe-area-inset-top,0px));padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.mmenu[hidden]{display:none}
.mmenu ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mmenu li a{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font:200 clamp(34px,10vw,52px)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.mmenu li a[aria-current]{color:var(--accent)}
.mm-open,.mm-open body{overflow:hidden}
@media (max-width:720px){ .top nav{display:none} .mbtn{display:block} }

/* scroll-drawn technical drawing */
.drawin{position:relative;color:var(--fg)}
.drawin canvas{display:block;width:100%;height:auto}
.drawin-cap{display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--line);margin-top:14px}

/* letter roll on hover */
.rl{display:inline-flex;overflow:hidden;vertical-align:top}
.rl>span{display:inline-flex;flex-direction:column;height:1.1em;line-height:1.1}
.rl>span>span{display:block;transition:transform .55s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*18ms)}
a:hover .rl>span>span,a:focus-visible .rl>span>span{transform:translateY(-100%)}

/* shared route list (welcome page footers and inner pages) */
.routes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.routes a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);transition:padding .5s cubic-bezier(.2,.7,.1,1),color .3s}
.routes a b{font:200 clamp(30px,4.6vw,64px)/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.routes a:hover{padding-left:14px;color:var(--accent)}
.routes a .ar{font:300 20px var(--disp);transition:transform .4s}
.routes a:hover .ar{transform:translateX(6px)}
@media (max-width:560px){ .routes a{grid-template-columns:2.4em minmax(0,1fr) auto} .routes a .lbl.d{display:none} }

/* sketch → drawing pair */
.pair{display:grid;gap:clamp(16px,2.4vw,40px);align-items:end}
.pair .pc{margin:0;min-width:0}
.pair.stack{grid-template-columns:minmax(0,1fr)!important;align-items:start;gap:clamp(40px,6vw,90px)}
.pair.stack .pc{margin-inline:auto;width:100%}
.pair .drawin-cap .lbl:last-child{text-align:right}
@media (max-width:720px){ .pair{grid-template-columns:minmax(0,1fr)!important;gap:40px} }