/* kellecalco.com — shared styles. tokens from the Blacksoil / HU+NA design systems */
@font-face{font-family:"Xanh Mono";src:url(../fonts/xanh-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Xanh Mono";src:url(../fonts/xanh-mono-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(../fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(../fonts/space-mono-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --soil-000:#0a0a08;--soil-900:#14140f;--soil-800:#1c1c1a;--soil-700:#2e2e2a;--soil-600:#484947;--soil-500:#73716e;--soil-400:#908b87;--soil-300:#b6b2ae;--soil-100:#d8d4cc;
  --bone-100:#e4dfd5;--bone-050:#efeae0;--olive-700:#35342c;--clay-700:#7d7367;
  --ember-300:#c98a5e;--ember-400:#af6f4c;--ember-500:#8d4e3b;
  --dusk-300:#a5b2b4;--dusk-400:#8a9a9d;--dusk-600:#4c5a5e;
  --accent:var(--ember-400);--accent-hover:var(--ember-300);
  --line-hairline:rgba(216,212,204,.14);--line-rule:rgba(216,212,204,.28);--line-strong:rgba(216,212,204,.55);
  --line-rule-inverse:rgba(20,20,15,.32);
  --scrim-bottom:linear-gradient(to top,rgba(10,10,8,.92) 0%,rgba(10,10,8,.55) 38%,rgba(10,10,8,0) 100%);
  --scrim-top:linear-gradient(to bottom,rgba(10,10,8,.7) 0%,rgba(10,10,8,0) 100%);
  --font-display:"Xanh Mono",ui-monospace,monospace;--font-body:"DM Mono",ui-monospace,monospace;--font-label:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--dur:320ms;--filmic:1200ms;
  --pad:24px;--max:1360px;
}
/* HU+NA pages swap the warm accent for dusk */
.huna{--accent:var(--dusk-400);--accent-hover:var(--dusk-300)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--soil-900);color:var(--soil-300);font:300 15px/1.7 var(--font-body);letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:opacity 180ms,color 180ms}
a:hover{opacity:.62}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent-hover);outline-offset:2px}
p{margin:0 0 1.1em}
::selection{background:var(--ember-500);color:var(--bone-100)}

/* grain — mandatory on flat surfaces */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.13;mix-blend-mode:overlay;
  background-image: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px}
.paper .grain::after,.paper.grain::after{opacity:.22;mix-blend-mode:multiply}

/* type */
.display,h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.04em;line-height:.98;color:var(--soil-100);margin:0}
h1{font-size:clamp(40px,11vw,96px)}
h2{font-size:clamp(34px,8.6vw,64px)}
h3{font-size:clamp(26px,5.6vw,34px)}
.it{font-style:italic}
.label{font:400 10.5px/1.5 var(--font-label);letter-spacing:.26em;text-transform:uppercase;color:var(--soil-500)}
.label b{font-weight:400;color:var(--soil-300)}
.aside{font:300 italic 14px/1.6 var(--font-body);color:var(--soil-400)}
.accent{color:var(--accent)}
.lede{font-size:16px;color:var(--soil-100)}
.measure{max-width:44ch}
.measure-wide{max-width:60ch}
.pull{font-family:var(--font-display);font-size:clamp(22px,5.4vw,30px);line-height:1.2;letter-spacing:.02em;color:var(--accent)}
.pull.it{font-style:italic}

/* layout */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:96px 0;border-top:1px solid var(--line-hairline)}
.section:first-child{border-top:0}
.sec-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:28px}
.stack>*+*{margin-top:24px}
.rule{height:1px;background:var(--line-rule);border:0;margin:32px 0;width:48px}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);
  font:400 10px/1 var(--font-label);letter-spacing:.28em;text-transform:uppercase;color:var(--soil-100);transition:background var(--dur) var(--ease),border-color var(--dur);border-bottom:1px solid transparent}
.topbar.solid{background:rgba(20,20,15,.94);border-bottom-color:var(--line-hairline)}
.topbar a{opacity:.85}
.topbar .mark{height:14px;width:auto}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--soil-000)}
.hero .media{position:absolute;inset:0}
.hero .media img,.hero .media video{width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;background:var(--scrim-bottom);z-index:1}
.hero::after{z-index:2}
.hero .top-scrim{position:absolute;inset:0 0 auto;height:140px;background:var(--scrim-top);z-index:1}
.hero .inner{position:relative;z-index:4;width:100%;padding:0 var(--pad) 40px}
.hero .coords{position:absolute;z-index:4;top:64px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between}
.wordmark{width:min(78vw,520px);height:auto;margin-bottom:22px}
.hero .tag{font-family:var(--font-display);font-size:clamp(20px,5.4vw,30px);color:var(--soil-100);letter-spacing:.04em;margin:0 0 22px}
.hero .meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;border-top:1px solid var(--line-rule);padding-top:14px}
.scroll-cue{position:absolute;z-index:4;bottom:16px;left:50%;transform:translateX(-50%);font:400 10px var(--font-label);letter-spacing:.3em;color:var(--soil-400)}

/* image / video plates */
.plate{position:relative;overflow:hidden;background:var(--soil-800)}
.plate img,.plate video{width:100%;height:100%;object-fit:cover}
.plate figcaption{position:absolute;left:12px;bottom:10px;z-index:4}
.ratio-45{aspect-ratio:4/5}.ratio-916{aspect-ratio:9/16}.ratio-34{aspect-ratio:3/4}.ratio-wide{aspect-ratio:16/9}.ratio-letter{aspect-ratio:21/9}
video.fade{opacity:0;transition:opacity var(--filmic) var(--ease)}
video.fade.on{opacity:1}

/* split: mobile = media then text; desktop = side by side */
.split{display:grid;grid-template-columns:1fr;gap:0}
.split .media-col{position:relative;min-height:78svh}
.split .media-col .plate{position:absolute;inset:0}
.split .text-col{padding:56px var(--pad) 72px}

/* interlude: full-bleed moving image */
.interlude{position:relative;height:88svh;overflow:hidden;background:var(--soil-000)}
.interlude .plate{position:absolute;inset:0}
.interlude .cap{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;gap:16px}
.interlude::before{content:"";position:absolute;inset:auto 0 0;height:40%;background:var(--scrim-bottom);z-index:2}

/* triptych of vertical clips (one on mobile, three on desktop) */
.triptych{display:grid;grid-template-columns:1fr;gap:6px}
.triptych .plate{aspect-ratio:9/16}
.triptych .plate:nth-child(n+2){display:none}

/* lists */
.pairs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-hairline)}
.pairs li{display:grid;grid-template-columns:minmax(0,10.5em) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-hairline)}
.pairs .k{color:var(--soil-100)}
.pairs.accent-k .k{color:var(--accent)}
.words{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;font-family:var(--font-display);font-size:clamp(22px,5.6vw,28px);color:var(--soil-100);margin:0;padding:0;list-style:none}
.words li{border-bottom:1px solid var(--line-hairline);padding:8px 0}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font:400 10px/1 var(--font-label);letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--line-rule);padding:8px 10px;color:var(--soil-300)}
.grid2{display:grid;grid-template-columns:1fr;gap:28px}
.cell{border-top:1px solid var(--line-rule);padding-top:14px}
.cell h4{font:400 italic 17px/1.3 var(--font-display);letter-spacing:.02em;color:var(--accent);margin:0 0 8px}
.cell p{font-size:13.5px;margin:0}
.numbered{list-style:none;margin:0;padding:0;counter-reset:n}
.numbered li{counter-increment:n;display:grid;grid-template-columns:2.4em 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--line-hairline)}
.numbered li::before{content:counter(n,decimal-leading-zero);font:400 10.5px/2.2 var(--font-label);letter-spacing:.2em;color:var(--soil-500)}
.numbered h4{font:400 18px/1.25 var(--font-display);letter-spacing:.02em;color:var(--accent);margin:0 0 6px}
.numbered p{margin:0;font-size:13.5px}
.credits h5{font:400 10.5px/1.5 var(--font-label);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:28px 0 10px}
.credits ul{list-style:none;margin:0;padding:0}
.credits li{padding:3px 0;color:var(--soil-100);font-size:14px}
.credits li span{color:var(--soil-500)}

/* paper (bone) sections */
.paper{background:var(--bone-100);color:var(--olive-700)}
.paper .label{color:var(--clay-700)}
.paper h2,.paper h3,.paper .display{color:var(--soil-900)}
.paper .pairs li,.paper .cell{border-color:var(--line-rule-inverse)}
.paper .accent,.paper .cell h4{color:var(--ember-500)}
.paper .pairs .k,.paper .credits li,.paper .lede{color:var(--soil-900)}
.paper .credits li span{color:var(--clay-700)}
.paper .pairs li{border-color:var(--line-rule-inverse)}
.paper .tags span{border-color:var(--line-rule-inverse);color:var(--olive-700)}

.dash{list-style:none;margin:24px 0 0;padding:0;font-size:13.5px;max-width:44ch}
.dash li{padding:7px 0 7px 1.8em;position:relative;border-bottom:1px solid var(--line-hairline);color:var(--soil-100)}
.dash li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* options (three ways) */
.options{display:grid;grid-template-columns:1fr;gap:0}
.option{border-top:1px solid var(--line-rule);padding:28px 0}
.option h3{margin:8px 0 14px}
.option ul{list-style:none;margin:16px 0 0;padding:0;font-size:13.5px}
.option li{padding:6px 0 6px 1.6em;position:relative;border-bottom:1px solid var(--line-hairline)}
.option li::before{content:"—";position:absolute;left:0;color:var(--soil-500)}

/* film (YouTube facade) */
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--soil-000);overflow:hidden;border:0;padding:0;cursor:pointer;color:var(--bone-100)}
.film img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity var(--dur)}
.film:hover img{opacity:.9}
.film .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:4}
.film .tri{width:64px;height:64px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;background:rgba(10,10,8,.35)}
.film .tri::before{content:"";margin-left:5px;border-left:15px solid var(--bone-100);border-top:9px solid transparent;border-bottom:9px solid transparent}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px}

/* contact */
.contact a.big{display:block;font-family:var(--font-display);font-size:clamp(22px,6vw,34px);color:var(--soil-100);letter-spacing:.02em;padding:14px 0;border-bottom:1px solid var(--line-hairline)}
.contact a.big .label{display:block;margin-bottom:4px}
.contact a.big:hover{opacity:1;color:var(--accent-hover)}
.closer{text-align:center;padding:120px var(--pad) 72px}
.closer .wordmark{margin:0 auto 18px;width:min(60vw,320px)}
footer.foot{padding:28px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;border-top:1px solid var(--line-hairline)}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}video.fade{opacity:1}}
.no-js .rv{opacity:1;transform:none}

/* ≥ 900px */
@media (min-width:900px){
  :root{--pad:64px}
  body{font-size:15.5px}
  .section{padding:144px 0}
  .split{grid-template-columns:1fr 1fr;min-height:100vh}
  .split.rev .media-col{order:2}
  .split .media-col{min-height:100vh;position:sticky;top:0;height:100vh}
  .split .text-col{padding:144px var(--pad);display:flex;flex-direction:column;justify-content:center}
  .hero .inner{padding-bottom:64px}
  .hero .coords{top:84px}
  .triptych{grid-template-columns:repeat(3,1fr)}
  .triptych .plate:nth-child(n+2){display:block}
  .grid2{grid-template-columns:1fr 1fr;gap:40px 48px}
  .options{grid-template-columns:repeat(3,1fr);gap:40px}
  .cols{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:start}
  .cols.even{grid-template-columns:1fr 1fr}
  .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
  .interlude{height:100vh}
  .topbar{padding:22px var(--pad)}
}
@media (max-width:899px){.cols>*+*,.cols3>*+*{margin-top:48px}.desk{display:none}}
@media (min-width:900px){.mob{display:none}}