/* Workchop · site styles (redesign "concept D", Nov 2026).
   Every colour is a token below; light and dark share every rule and only the tokens change.
   Light mode sits on Slate, not cream or white: the brand lime #c8ff3c disappears on pale warm
   backgrounds, and a cool grey keeps it visible. */
:root{
  --bg:#c4c8cf; --bg2:#babec6; --ink:#15150f; --ink2:#2f3238; --dim:#575b63; --faint:#858a93; --rule:#a5aab4;
  --acid:#c8ff3c; --acid-ink:#4d6600; --on-acid:#0e0e0b; --hatch1:#b8bcc4; --hatch2:#bec2ca;
  --head:"Space Grotesk",sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"JetBrains Mono",monospace;
  --gut:clamp(16px,3.2vw,46px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e0e0b; --bg2:#18180f; --ink:#efede4; --ink2:#c9c7bc; --dim:#8f8d80; --faint:#5f5e55; --rule:#2c2b24;
  --acid-ink:#c8ff3c; --hatch1:#1b1b15; --hatch2:#131310;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--head);overflow-x:hidden;transition:background .35s,color .35s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--acid);color:var(--on-acid)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.pad{padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.it{font-style:italic}
.acid{color:var(--acid-ink)}

/* the cut: a slanted lime blade, drawn like the logo's two cut shapes laid on their side.
   Angled ends (clip-path) plus a slight upward tilt; it slices through the work that never happened. */
.cut{position:relative;display:inline-block;color:var(--dim)}
.cut::after{content:"";position:absolute;left:-.12em;right:-.12em;top:50%;height:.15em;min-height:4px;margin-top:-.075em;background:var(--acid);
  clip-path:polygon(.32em 0,100% 0,calc(100% - .32em) 100%,0 100%);
  transform:rotate(-5deg) scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.cut.drawn::after,.in .cut::after,.in.cut::after{transform:rotate(-5deg) scaleX(1)}
.cut.thin::after{height:.2em;min-height:3px;clip-path:polygon(.25em 0,100% 0,calc(100% - .25em) 100%,0 100%)}
/* small text (mono labels, index ratios): a thicker blade so the slant still reads */
.cut.sm::after{height:.24em;min-height:2.5px;margin-top:-.12em;clip-path:polygon(.3em 0,100% 0,calc(100% - .3em) 100%,0 100%);transform:rotate(-7deg) scaleX(0)}
.cut.sm.drawn::after,.in .cut.sm::after{transform:rotate(-7deg) scaleX(1)}

/* header */
header{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-block:13px}
.hd .m{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.03em}
.hd .m svg{width:16px;height:16px}
/* the symbol is the same lime in both themes; only the wordmark text follows the theme */
.hd .m{color:var(--ink)}
.hd .m polygon{fill:#c8ff3c}
.hd nav{display:flex;gap:22px;justify-self:center}
.hd nav a{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:.2s;position:relative}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .3s}
.hd nav a:hover,.hd nav a.on{color:var(--ink)}.hd nav a:hover::after,.hd nav a.on::after{transform:scaleX(1)}
.hd .right{justify-self:end;display:flex;gap:10px;align-items:center}
.theme{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.theme button{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;border:0;background:none;
  color:var(--dim);padding:7px 10px;cursor:pointer;transition:.2s}
.theme button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.theme button:hover:not([aria-pressed="true"]){color:var(--ink)}

/* hero (the Specimen header: grotesk + serif italic) */
.hero{padding-top:clamp(34px,6vw,76px);padding-bottom:clamp(26px,4vw,44px)}
.display{font-size:clamp(2.6rem,9.4vw,8.6rem);line-height:.92;letter-spacing:-.045em;font-weight:700;margin-top:clamp(20px,3vw,40px)}
.display .l2{display:block;padding-left:clamp(0px,8vw,9rem)}
.display .serif{font-size:1.04em;letter-spacing:-.02em}
.hero-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,60px);margin-top:clamp(26px,4vw,52px);padding-top:22px;border-top:1px solid var(--rule)}
/* the pixel office: two canvases over the hero, the floor and furniture behind the copy, the bots in front */
.hero[data-pixel-office]{position:relative;padding-top:clamp(70px,9vw,120px)}
.hero[data-pixel-office] > *:not(canvas){position:relative;z-index:1}
.hero[data-pixel-office] .hero-cols{margin-top:clamp(110px,11vw,150px);background:var(--bg)}
.display .l1{display:block}
.px-a,.px-z{display:inline-block;width:0;height:0;vertical-align:baseline}
canvas.px-hero{position:absolute;left:0;top:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;z-index:2}
canvas.px-back{z-index:0}
@media(max-width:700px){.hero[data-pixel-office] .hero-cols{margin-top:124px}}
.hero-cols p{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.55;color:var(--ink2);max-width:46ch;font-weight:400}
.notes{display:grid;gap:14px;align-content:start}
.note{display:grid;grid-template-columns:72px 1fr;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--rule)}
.note b{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acid-ink);padding-top:4px;font-weight:500}
.note span{font-size:.94rem;line-height:1.45;color:var(--ink2)}
.acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:13px 19px;border:1px solid var(--ink);
  display:inline-flex;gap:9px;align-items:center;border-radius:2px;transition:.25s;white-space:nowrap}
.btn.fill{background:var(--ink);color:var(--bg)}
.btn.fill:hover{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
.btn.line:hover{background:var(--ink);color:var(--bg)}

/* numbers under the header (Specimen) */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--rule)}
.nums div{padding:clamp(18px,2.6vw,34px) clamp(10px,1.6vw,22px);border-right:1px solid var(--rule)}
.nums div:first-child{padding-left:0}
.nums div:last-child{border-right:0}
.nums b{font-family:var(--serif);font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:.9;display:block;font-weight:400}
.nums b.a{color:var(--acid-ink)}
.nums span{display:block;margin-top:8px}

/* section heads */
.sec{padding-block:clamp(56px,8vw,112px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:22px}
.sec-head h2{font-size:clamp(1.9rem,5.4vw,4.1rem);letter-spacing:-.045em;line-height:.94;font-weight:700}
.sec-head h2 .serif{font-size:1.06em;letter-spacing:-.02em}
.kicker{display:block;margin-bottom:14px}

/* work index (Chopping Block rows, each opens its case study) */
/* the work: the Specimen's plates */
.plates{--pg:clamp(28px,4vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--pg);border-top:1px solid var(--rule)}
.plate{position:relative;border-bottom:1px solid var(--rule);padding-block:clamp(18px,2.4vw,32px);display:flex;flex-direction:column}
.plate:not(:nth-child(3n+1))::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pg) / -2);border-left:1px solid var(--rule)}
.plate .pn{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px}
.plate .thumb{display:block;aspect-ratio:16/10;background:var(--bg2) center top/cover no-repeat;border:1px solid var(--rule);position:relative;overflow:hidden}
.plate .thumb::after{content:"";position:absolute;inset:0;background:var(--acid);mix-blend-mode:multiply;opacity:0;transition:opacity .4s}
.plate:hover .thumb::after{opacity:.24}
.plate h3{font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.04em;line-height:1;margin-top:20px}
.plate h3 a{display:inline-flex;align-items:center;gap:.3em}
.plate .p-icon{width:.9em;height:.9em}
.plate .tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink2);margin-top:6px}
.plate p{color:var(--ink2);line-height:1.55;margin-top:10px;font-weight:400;font-size:.97rem}
.plate p:not(.tag){flex:1}
.plate .chopr{display:flex;align-items:baseline;gap:12px;margin-top:18px;font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1}
.plate .chopr .cut{font-style:italic}
.plate .chopr .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.plate dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.plate dd{font-size:.88rem}
.plate .gos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.plate .go{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.plate .go:hover{border-color:var(--acid-ink);color:var(--acid-ink)}
@media(max-width:1000px){.plates{grid-template-columns:repeat(2,minmax(0,1fr))}.plate:nth-child(n)::before{display:block}.plate:nth-child(2n+1)::before{display:none}}
@media(max-width:640px){.plates{grid-template-columns:1fr}.plate:nth-child(n)::before{display:none}}
.index{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:62px minmax(0,1fr) 170px 112px 118px 36px;align-items:center;gap:16px;
  padding:clamp(18px,2.4vw,30px) var(--gut);border-bottom:1px solid var(--rule);position:relative;isolation:isolate}
.row::after{content:"";position:absolute;inset:0;background:var(--acid);transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:-1}
a.row:hover::after{transform:scaleY(1)}
a.row:hover,a.row:hover .mono,a.row:hover .ratio .s,a.row:hover .ratio b{color:var(--on-acid)}
.row .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim)}
.row h3{font-size:clamp(1.6rem,4.4vw,3.1rem);font-weight:700;letter-spacing:-.04em;line-height:1;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.row h3 .serif{font-size:.62em;letter-spacing:0;color:var(--dim);margin-left:12px;font-style:italic}
a.row:hover h3{transform:translateX(10px)}
a.row:hover h3 .serif{color:var(--on-acid)}
.row .arr{font-size:1.3rem;text-align:right;transition:transform .35s}
a.row:hover .arr{transform:translate(5px,-5px)}
.ratio{font-family:var(--serif);font-size:1.35rem;white-space:nowrap;display:flex;gap:10px;align-items:baseline}
.ratio .s{font-style:italic;color:var(--dim)}
a.row:hover .ratio .s{color:var(--on-acid)}
a.row:hover .cut::after{background:var(--on-acid)}
.tagpill{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;
  padding:4px 9px;border-radius:999px;opacity:.75;white-space:nowrap;justify-self:start}
.st{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.st i{width:6px;height:6px;border-radius:50%;background:var(--acid-ink);display:block}
.st.soon i{background:var(--faint)}
a.row:hover .st i{background:var(--on-acid)}
.row.off{color:var(--dim)}
.row.off h3{color:var(--faint)}
.peek{position:fixed;top:0;left:0;width:320px;height:210px;pointer-events:none;z-index:50;opacity:0;transition:opacity .3s;
  background:var(--bg2) center top/cover no-repeat;border:1px solid var(--rule);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.peek.on{opacity:1}

/* how the work gets chopped (Chopping Block process) */
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.proc article{padding:clamp(22px,3vw,38px) clamp(16px,2.4vw,30px);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.proc article:first-child{padding-left:0}
.proc article:last-child{border-right:0}
.proc .big{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--acid-ink)}
.proc .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;display:block;margin-top:14px}
.proc h3{font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.03em;margin:12px 0 10px}
.proc p{font-size:.93rem;line-height:1.5;color:var(--dim);font-weight:400}
.proc .saved{margin-top:16px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.proc .saved .cut{color:var(--dim)}
.proc article::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.proc article:hover::before{transform:scaleX(1)}

/* team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);border-top:1px solid var(--rule);padding-top:clamp(22px,3vw,36px)}
.mate{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:clamp(16px,2.4vw,30px)}
.portrait{aspect-ratio:4/5;background:var(--bg2);border:1px solid var(--rule);position:relative;overflow:hidden;display:grid;place-items:center}
.portrait .px-face{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.px-face{--o:#1d1f24;--sh:#f4f5f7;--sh2:#c9ced6}
:root[data-theme="dark"] .px-face{--o:#e6e4da;--sh:#15150f;--sh2:#2e2e27}
.px-face .o{fill:var(--o)} .px-face .sh{fill:var(--sh)} .px-face .sh2{fill:var(--sh2)}
.px-face .ft{fill:#15150f} .px-face .sk{fill:#e3b48e} .px-face .sk2{fill:#c48d68} .px-face .st{fill:#c39371}
.px-face .hr{fill:#2a2620} .px-face .hr2{fill:#4a4239} .px-face .fd{fill:#6f5d4c} .px-face .bd{fill:#45332a}
.px-face .hb{fill:#5b3b22} .px-face .hb2{fill:#86603c} .px-face .fd2{fill:#8a6a50}
.px-face .th{fill:#fff} .px-face .mo{fill:#7a2f2a}
.portrait::after{content:"";position:absolute;right:0;bottom:0;width:34%;height:7px;background:var(--acid)}
.mate h3{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.04em;line-height:1}
.mate .role{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--dim);margin-top:6px}
.mate p{color:var(--ink2);line-height:1.55;margin-top:14px;font-weight:400;font-size:.97rem;max-width:44ch}
.mate dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.mate dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.mate dd{font-size:.9rem;line-height:1.45}
.mate .links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px}
.mate .links a{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.mate .links a:hover{color:var(--acid-ink);border-color:var(--acid-ink)}

/* pull quote */
.pull{padding-block:clamp(46px,7vw,100px);border-block:1px solid var(--rule);text-align:center}
.pull p{font-family:var(--serif);font-size:clamp(1.8rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;max-width:22ch;margin:0 auto}
.pull .mono{margin-bottom:22px;font-family:var(--mono);font-size:.64rem}

/* newsletter */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:end;padding-block:clamp(52px,8vw,110px)}
.cta h2{font-size:clamp(1.9rem,5vw,3.8rem);letter-spacing:-.045em;line-height:.96}
.field{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:11px}
.field input{flex:1;min-width:0;border:0;background:none;outline:0;font-family:var(--head);font-size:clamp(1rem,2vw,1.4rem);color:var(--ink)}
.field input::placeholder{color:var(--faint)}
.field button{border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* footer: Chopping Block columns + Specimen outlined wordmark */
.foot{border-top:1px solid var(--rule);padding-top:34px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding-bottom:clamp(30px,5vw,60px)}
.foot .about p{color:var(--dim);line-height:1.5;max-width:30ch;margin-top:12px;font-size:.92rem}
.foot h5{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;color:var(--ink);font-weight:500}
.foot .cols a{display:block;font-size:.92rem;color:var(--dim);padding:3px 0;transition:.2s}
.foot .cols a:hover{color:var(--ink)}
.foot .wm{font-size:clamp(3.4rem,20vw,19rem);line-height:.76;font-weight:700;letter-spacing:-.06em;white-space:nowrap;overflow:hidden;
  border-top:1px solid var(--rule);padding-top:clamp(14px,2vw,26px)}
/* footer wordmark: theme text colour; on hover the blade chops it in two along the logo's slant,
   the halves pull apart around the lime cut, and they rejoin when the pointer leaves */
.foot .wm{color:var(--ink);cursor:crosshair;padding-bottom:.16em}
.foot .wm em{font-style:normal}
.wmc{display:inline-grid;position:relative}
.wmc .h{grid-area:1/1;transition:transform .5s cubic-bezier(.5,0,.2,1);transition-delay:0s}
.wmc .top{clip-path:polygon(-2% -30%,102% -30%,102% 41.6%,-2% 62.6%)}
.wmc .bot{clip-path:polygon(-2% 62%,102% 41%,102% 130%,-2% 130%)}
.wm.sliced .wmc .top{transform:translate(.05em,-.02em) rotate(-.5deg);transition-delay:.3s}
.wm.sliced .wmc .bot{transform:translate(-.03em,.06em) rotate(.4deg);transition-delay:.3s}
/* the blade: the outer element only holds the slant (a fixed rotation), the inner bar only grows and
   shrinks along it. Keeping the two apart means the bar never pivots, so it can't jump as it retracts. */
.wmc .blade{position:absolute;left:-.04em;right:-.04em;top:51.5%;height:.035em;min-height:3px;margin-top:-.017em;pointer-events:none;transform:rotate(-2deg)}
.wmc .blade::before{content:"";position:absolute;inset:0;background:var(--acid);clip-path:polygon(.12em 0,100% 0,calc(100% - .12em) 100%,0 100%);
  transform-origin:left center;transform:scaleX(0)}
.wm.sliced .wmc .blade::before{animation:wm-in .45s cubic-bezier(.7,0,.2,1) both}
.wm.mended .wmc .blade::before{animation:wm-out .4s cubic-bezier(.7,0,.2,1) both}
@keyframes wm-in{from{transform:scaleX(0);transform-origin:left center}to{transform:scaleX(1);transform-origin:left center}}
@keyframes wm-out{from{transform:scaleX(1);transform-origin:right center}to{transform:scaleX(0);transform-origin:right center}}
@media (prefers-reduced-motion:reduce){.wmc .h{transition:none}.wmc .blade::before{animation:none!important}}
.legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:18px 26px;border-top:1px solid var(--rule)}

/* project page (Behance-style case study) */
.crumbs{display:flex;gap:10px;align-items:center;padding-block:18px;border-bottom:1px solid var(--rule)}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:var(--ink)}
.p-hero{padding-top:clamp(28px,5vw,64px)}
.p-title{display:flex;align-items:center;gap:.16em}
.p-icon{width:.74em;height:.74em;border-radius:22%;flex:none;box-shadow:0 0 0 1px var(--rule)}
.p-title{font-size:clamp(3.2rem,13vw,12rem);line-height:.84;letter-spacing:-.06em;font-weight:700;margin-top:14px}
.p-tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.6vw,3rem);line-height:1.05;color:var(--ink2);max-width:26ch;margin-top:clamp(14px,2vw,24px)}
.p-chop{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:clamp(20px,3vw,34px);font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.2rem);line-height:1}
.p-chop .cut{font-style:italic}
.p-chop .mono{font-size:.62rem}
.p-meta{display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--rule);margin-top:clamp(28px,4vw,48px)}
.p-meta div{padding:16px clamp(8px,1.4vw,18px);border-right:1px solid var(--rule)}
.p-meta div:first-child{padding-left:0}
.p-meta div:last-child{border-right:0}
.p-meta dd{font-size:.98rem;margin-top:7px;line-height:1.35}
.p-meta dd a{border-bottom:1px solid var(--ink)}
.cover{display:block;margin-top:clamp(28px,4vw,48px);aspect-ratio:16/9;background:var(--bg2) center top/cover no-repeat;border:1px solid var(--rule);position:relative}
.cover .mono{position:absolute;left:14px;bottom:12px;background:var(--bg);padding:5px 8px}
.p-sec{display:grid;grid-template-columns:minmax(160px,28%) 1fr;gap:clamp(18px,4vw,60px);padding-block:clamp(40px,6vw,84px);border-bottom:1px solid var(--rule)}
.p-sec h2{font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.04em;line-height:1}
.p-sec h2 .serif{display:block;font-size:1.05em;color:var(--dim);margin-top:4px}
.p-sec .body p{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;color:var(--ink2);max-width:60ch;font-weight:400}
.p-sec .body p+p{margin-top:16px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.feat{border-top:2px solid var(--ink);padding-top:14px}
.feat .n{font-family:var(--serif);font-size:2.4rem;line-height:.9;display:block}
.feat h3{font-size:1.12rem;letter-spacing:-.02em;margin:10px 0 7px}
.feat p{font-size:.93rem!important;line-height:1.5!important;color:var(--dim)!important}
.timeline{display:grid;gap:18px}
.tl-row{display:grid;grid-template-columns:110px 1fr 110px;gap:14px;align-items:center}
.tl-row .bar{height:22px;position:relative;background:repeating-linear-gradient(-45deg,var(--hatch1) 0 7px,var(--hatch2) 7px 14px);border:1px solid var(--rule)}
.tl-row .bar i{position:absolute;left:0;top:-1px;bottom:-1px;background:var(--acid);width:0;transition:width 1.2s cubic-bezier(.7,0,.2,1)}
.in .tl-row .bar i{width:var(--w)}
.tl-row .v{font-family:var(--serif);font-size:1.2rem;text-align:right}
.tl-row .v .cut{font-style:italic;margin-right:6px}
.stack{display:flex;flex-wrap:wrap;gap:8px}
.stack span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);padding:8px 12px;border-radius:999px}
.gallery{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(12px,1.6vw,20px);padding-block:clamp(40px,6vw,84px);border-bottom:1px solid var(--rule)}
.shot{background:var(--bg2) center top/cover no-repeat;border:1px solid var(--rule);position:relative;min-height:240px}
.shot.tall{grid-row:span 2;min-height:520px}
.shot .mono{position:absolute;left:12px;bottom:10px;background:var(--bg);padding:4px 7px}
.res{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.res div{padding:18px clamp(10px,1.6vw,22px);border-right:1px solid var(--rule)}
.res div:first-child{padding-left:0}
.res div:last-child{border-right:0}
.res b{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.6rem);font-weight:400;line-height:.9;display:block}
.res span{display:block;margin-top:8px}
.next{display:block;padding-block:clamp(44px,7vw,100px);border-bottom:1px solid var(--rule);position:relative;isolation:isolate}
.next::after{content:"";position:absolute;inset:0;background:var(--acid);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1}
.next:hover::after{transform:scaleY(1)}
.next:hover,.next:hover .mono{color:var(--on-acid)}
.next b{display:block;font-size:clamp(2.8rem,10vw,9rem);letter-spacing:-.055em;line-height:.86;margin-top:12px}
.note-small{border:1px dashed var(--faint);color:var(--dim);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;margin-top:18px;max-width:60ch;line-height:1.6}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cut::after,.reveal,.tl-row .bar i,.row::after,.next::after{transition:none}}

@media(max-width:1000px){
  .row{grid-template-columns:38px 1fr 30px;row-gap:10px}
  .row .ratio,.row .tagpill,.row .st{grid-column:2}
  .row h3 .serif{display:block;margin:6px 0 0;font-size:.6em}
  .peek{display:none}
  .foot .cols{grid-template-columns:repeat(2,1fr)}
  .foot .about{grid-column:1/-1}
  .p-meta{grid-template-columns:repeat(3,1fr)}
  .p-meta div:nth-child(3){border-right:0}
  .p-meta div:nth-child(4){padding-left:0}
  .p-meta div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
}
@media(max-width:900px){
  .hero-cols,.team,.cta,.p-sec,.gallery{grid-template-columns:1fr}
  .mate{grid-template-columns:110px 1fr}
  .proc,.nums{grid-template-columns:repeat(2,1fr)}
  .nums div:nth-child(2),.proc article:nth-child(2){border-right:0}
  .nums div:nth-child(3),.proc article:nth-child(3){padding-left:0}
  .nums div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .hd{grid-template-columns:1fr auto;row-gap:10px}
  .hd nav{grid-column:1/-1;grid-row:2;justify-self:start;gap:18px;overflow-x:auto;max-width:100%}
  .display .l2{padding-left:0}
  .feats,.res{grid-template-columns:1fr}
  .res div{border-right:0;border-bottom:1px solid var(--rule);padding-left:0}
  .shot.tall{grid-row:auto;min-height:380px}
  .tl-row{grid-template-columns:80px 1fr;}
  .tl-row .v{grid-column:2;text-align:left}
}
@media(max-width:520px){
  .p-meta{grid-template-columns:repeat(2,1fr)}
  .p-meta div:last-child{grid-column:1/-1}
  .p-meta div{border-right:0!important;padding-left:0!important;border-bottom:1px solid var(--rule)}
  .theme button{padding:7px 8px}
}


/* slices: a word is cut along the logo's slant and falls apart to show "Friday." */
.swap{display:inline-grid;position:relative;cursor:crosshair;outline:none;vertical-align:baseline}
.swap .w{grid-area:1/1;white-space:nowrap;transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .45s ease;transition-delay:.15s}
.swap .old{color:var(--dim)}
/* the two halves of "spring", split on a line that rises left to right like the blade */
.swap .top{clip-path:polygon(-5% -20%,105% -20%,105% 40.8%,-5% 64.8%)}
.swap .bot{clip-path:polygon(-5% 64%,105% 40%,105% 120%,-5% 120%)}
.swap .new{color:var(--ink);opacity:0;transform:translateY(.18em);transition-delay:0s}
.swap.sliced .top{transform:translate(.12em,-.38em) rotate(-5deg);opacity:0;transition-delay:.28s}
.swap.sliced .bot{transform:translate(-.1em,.42em) rotate(4deg);opacity:0;transition-delay:.28s}
.swap.sliced .new{opacity:1;transform:none;transition-delay:.42s}
.swap .blade{position:absolute;left:-.16em;right:-.16em;top:52%;height:.065em;min-height:3px;margin-top:-.032em;pointer-events:none;transform:rotate(-5deg)}
.swap .blade::before{content:"";position:absolute;inset:0;background:var(--acid);clip-path:polygon(.16em 0,100% 0,calc(100% - .16em) 100%,0 100%);
  transform-origin:left center;transform:scaleX(0)}
.swap.sliced .blade::before{animation:slice-a .8s cubic-bezier(.7,0,.2,1) both}
.swap.mended .blade::before{animation:slice-b .7s cubic-bezier(.7,0,.2,1) both}
/* in, then out the far side: the origin flips only while the bar is full length, where it changes nothing */
@keyframes slice-a{0%{transform:scaleX(0);transform-origin:left center}
  42%{transform:scaleX(1);transform-origin:left center}
  42.01%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}}
@keyframes slice-b{0%{transform:scaleX(0);transform-origin:right center}
  45%{transform:scaleX(1);transform-origin:right center}
  45.01%{transform:scaleX(1);transform-origin:left center}
  100%{transform:scaleX(0);transform-origin:left center}}
.swap:focus-visible{outline:2px solid var(--acid);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.swap .w{transition:opacity .2s}.swap.sliced .top,.swap.sliced .bot{transform:none}.swap .blade::before{animation:none!important}}

/* contact */
.page-head{padding-top:clamp(34px,6vw,76px);padding-bottom:clamp(26px,4vw,44px);border-bottom:1px solid var(--rule)}
.page-head .display{margin-top:0}
.page-head p{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.55;color:var(--ink2);max-width:52ch;margin-top:22px;font-weight:400}
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,80px);padding-block:clamp(40px,6vw,84px)}
.contact .ways{display:grid;gap:0;align-content:start;border-top:1px solid var(--rule)}
.contact .ways a,.contact .ways div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule);font-size:1rem}
.contact .ways a:hover{color:var(--acid-ink)}
.form{display:grid;gap:22px}
.form label{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font-family:var(--head);font-size:1.1rem;padding:6px 0 10px;border-radius:0;outline:0}
.form textarea{min-height:140px;resize:vertical;line-height:1.5}
.form select{appearance:none;cursor:pointer;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 6px center/7px 7px no-repeat}
.form select option{background:var(--bg);color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--acid-ink);box-shadow:0 1px 0 var(--acid-ink)}
.form .send{justify-self:start;cursor:pointer;font:inherit;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.form-status,.subscribe-status{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);min-height:1em;margin-top:12px}
.form-status.ok,.subscribe-status.ok{color:var(--acid-ink)}
.form-status.err,.subscribe-status.err{color:#b3261e}
:root[data-theme="dark"] .form-status.err,:root[data-theme="dark"] .subscribe-status.err{color:#ff8a80}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* privacy and other long text */
.prose{padding-block:clamp(40px,6vw,84px);max-width:68ch}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.03em;margin:38px 0 12px}
.prose p,.prose li{font-size:1.02rem;line-height:1.65;color:var(--ink2);font-weight:400}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;margin-top:10px;display:grid;gap:6px}
.prose a{border-bottom:1px solid currentColor}
.prose .updated{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* 404 */
.lost{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,8vw,120px)}
.lost p{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.55;color:var(--ink2);max-width:46ch;margin-top:22px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 12px;font-family:var(--mono);font-size:.7rem}
.skip:focus{left:8px}
@media(max-width:900px){.contact{grid-template-columns:1fr}}

/* menu links glide to their section, and land below the sticky header */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* --land: the sticky header's height plus a little air (it wraps to two rows at 900px) */
:root{--land:72px}
@media(max-width:900px){:root{--land:96px}}
section[id],[id="join"]{scroll-margin-top:var(--land)}
/* a .sec has its own top padding, so pull it up by that much and every section lands with its small header just under the menu (Team has none) */
.sec[id]:not(#team){scroll-margin-top:calc(var(--land) - clamp(56px,8vw,112px))}