/* KOD portfolio - Kristen O'Donnell. Dark default, one font. */
@font-face{font-family:"Aulia Grotesk";src:url("fonts/aulia-grotesk.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
:root{
  --ink:#ECEAE2; --paper:#0E0E0C; --paper-2:#191916;
  --line:#2B2B26; --mute:#8A897F;
  --teal:#5FB0A6; --lime:#C7D84A;
  --gut:clamp(14px,3vw,34px);
  --grid-gap:clamp(6px,1.4vw,16px);
  --s--1:clamp(.72rem,.7rem + .1vw,.78rem);
  --s-0:clamp(.9rem,.87rem + .13vw,.98rem);
  --s-1:clamp(1.02rem,.92rem + .42vw,1.2rem);
  --s-2:clamp(1.3rem,1.05rem + 1.3vw,2.05rem);
  --s-3:clamp(1.8rem,1.25rem + 2.7vw,3.5rem);
  --s-4:clamp(2.2rem,1.2rem + 5vw,5.2rem);
}
:root[data-theme="light"]{
  --ink:#131311; --paper:#FBFAF7; --paper-2:#EFEEE8;
  --line:#E0DED5; --mute:#77766C; --teal:#2C6E66; --lime:#7C9A1C;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Aulia Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--s-0);line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;}
h1,h2,h3{margin:0;font-weight:400;line-height:1.04;letter-spacing:-.03em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:#0E0E0C}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.lab{font-size:var(--s--1);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.hl{font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}

a.lk{position:relative;transition:color .25s ease}
a.lk::after{content:"";position:absolute;left:50%;right:50%;bottom:-3px;height:1.5px;background:var(--lime);
  transition:left .3s cubic-bezier(.16,.72,.2,1),right .3s cubic-bezier(.16,.72,.2,1)}
a.lk:hover,a.lk:focus-visible{color:var(--teal)}
a.lk:hover::after,a.lk:focus-visible::after{left:0;right:0}

.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(7px);border-bottom:1px solid transparent;transition:border-color .25s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.mark{font-weight:700;font-size:.96rem;letter-spacing:.24em}
.mark:hover{color:var(--teal)}
.nav-r{display:flex;align-items:center;gap:clamp(14px,2.6vw,26px)}
.nav-r a{font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tgl{background:none;border:1px solid var(--line);color:var(--mute);width:29px;height:29px;border-radius:999px;cursor:pointer;font-size:12px;display:grid;place-items:center;transition:color .2s,border-color .2s}
.tgl:hover{color:var(--teal);border-color:var(--teal)}

.intro{padding:clamp(38px,7vw,88px) 0 clamp(30px,5vw,54px)}
.intro h1{font-size:var(--s-3);line-height:1.08;letter-spacing:-.035em;max-width:20ch}
.intro .sub{margin-top:22px;font-size:1.04rem;color:var(--mute);max-width:66ch;line-height:1.5;letter-spacing:-.006em}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);padding-bottom:clamp(20px,4vw,44px)}
.tile{position:relative;display:block;overflow:hidden;background:var(--paper-2);aspect-ratio:4/3}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .9s cubic-bezier(.16,.7,.2,1),filter .5s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04);filter:brightness(.5)}
.tile--logo{background:#601E4E}
.tile--logo img{object-fit:contain;object-position:center;padding:15% 13%}
.tile--logo:hover img,.tile--logo:focus-visible img{filter:brightness(.78);transform:scale(1.03)}
.tile--contain{background:#12100f}
.tile--contain img{object-fit:contain;padding:9%}
.tile--contain:hover img{filter:brightness(.8);transform:scale(1.03)}
.tile--pad img{object-position:center}
.tile .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,2vw,26px);
  background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,.18) 55%,rgba(0,0,0,.04));color:#FBFAF7;opacity:0;transition:opacity .4s ease}
.tile:hover .ov,.tile:focus-visible .ov{opacity:1}
.tile .ov .ttl{font-size:clamp(1.25rem,1rem + 1.4vw,1.9rem);line-height:1.08;letter-spacing:-.03em}
.tile .ov .meta{margin-top:7px;font-size:var(--s--1);letter-spacing:.11em;text-transform:uppercase;opacity:.9}
.tile .ov .meta b{font-weight:700;opacity:1}
@media (hover:none){
  .tile img{filter:brightness(.62)}
  .tile--logo img,.tile--contain img{filter:none}
  .tile .ov{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)}
  .tile .ov .ttl{font-size:1.1rem}
}

.info{border-top:1px solid var(--line);margin-top:clamp(30px,5vw,64px);padding:clamp(44px,7vw,92px) 0}
.info-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(18px,4vw,60px)}
@media (max-width:760px){.info-grid{grid-template-columns:1fr}}
.info h2{font-size:var(--s-2);letter-spacing:-.03em;max-width:16ch;line-height:1.06}
.info p{max-width:58ch;margin-bottom:13px}
.info p.dim{color:var(--mute)}
.caps{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.caps li{font-size:var(--s--1);border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--mute)}
.contact{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.contact a.mail{width:max-content;font-size:var(--s-1)}
.socials{display:flex;gap:15px;align-items:center}
.socials a{color:var(--mute);display:inline-flex;transition:color .2s}
.socials a:hover{color:var(--teal)}
.socials svg{width:19px;height:19px;display:block}

footer{border-top:1px solid var(--line);padding:22px 0 38px;margin-top:clamp(30px,6vw,70px)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;color:var(--mute);font-size:var(--s--1)}
footer .socials svg{width:17px;height:17px}

/* ---- project pages ---- */
.case{display:block}
.cwrap{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.back{display:inline-flex;gap:7px;align-items:center;margin:clamp(18px,3vw,36px) 0 0;font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.chead{padding:clamp(18px,3vw,40px) 0 clamp(18px,3vw,34px)}
.chead h1{font-size:var(--s-4);line-height:1.02;letter-spacing:-.04em;max-width:18ch}
.cmeta{margin-top:14px;font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cmeta b{color:var(--ink);font-weight:700}
.cintro{margin-top:18px;max-width:58ch;font-size:var(--s-1);line-height:1.46}
.facts{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:3px;max-width:34ch}
.facts .k{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.facts .v{font-size:var(--s-0)}

.hero{margin-top:clamp(16px,2.5vw,30px)}
.hero img{width:100%;max-width:840px;margin-inline:auto;object-position:top;background:var(--paper-2)}
.hero--tall img{max-width:420px}
.hero--logo{background:#601E4E;padding:clamp(26px,6vw,64px) clamp(22px,8vw,100px)}
.hero--logo img{max-width:660px;background:none}

.stack{margin-top:clamp(14px,2vw,22px)}
.stack .full{margin:clamp(8px,1.4vw,14px) 0}
.stack .full img{width:100%;max-width:760px;margin-inline:auto;background:var(--paper-2)}
.stack .gif{margin:clamp(10px,1.6vw,18px) 0}
.stack .gif img{max-width:400px;margin-inline:auto;display:block;border-radius:2px;background:var(--paper-2)}
.stack .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,14px);margin:clamp(8px,1.4vw,14px) 0;align-items:start}
@media (max-width:620px){.stack .pair{grid-template-columns:1fr}}
.stack .pair img{width:100%;background:var(--paper-2)}
.stack .solo{max-width:620px;margin:clamp(8px,1.4vw,14px) auto}
.stack .solo img{width:100%;background:var(--paper-2)}
/* transparent source art keeps its transparency: no flat panel behind it */
.tp,.tp img{background:transparent!important}
.ccap{font-size:var(--s--1);color:var(--mute);margin-top:8px;max-width:60ch}

.csec{max-width:58ch;margin:clamp(30px,5vw,58px) auto clamp(12px,2vw,18px)}
.csec h2{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.csec .step{font-size:.66rem;letter-spacing:.14em;color:var(--teal);margin-bottom:4px}
.csec p{font-size:var(--s-1);line-height:1.5}
.csec p + p{margin-top:10px}
.csec ul{margin:10px 0 0;padding-left:18px}
.csec li{font-size:var(--s-1);line-height:1.5;margin:5px 0}

.pull{max-width:26ch;margin:clamp(36px,6vw,72px) auto;font-size:var(--s-3);line-height:1.1;text-align:center;letter-spacing:-.03em}

.swz{display:flex;gap:8px;max-width:58ch;margin:16px auto 0;flex-wrap:wrap}
.swz>div{flex:1;min-width:88px}
.swz .c{height:50px;border:1px solid var(--line)}
.swz small{display:block;margin-top:6px;font-size:.66rem;letter-spacing:.05em;color:var(--mute)}

/* ---- horizontal scroll sections: pin + scrub on desktop, swipe on mobile ---- */
.hsec{position:relative;margin:clamp(16px,3vw,30px) 0;width:100vw;margin-left:calc(50% - 50vw)}
.hsec .sticky{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;cursor:grab}
.hsec .sticky.drag{cursor:grabbing}
.hsec .sticky::-webkit-scrollbar{height:5px}
.hsec .sticky::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.hsec .track{display:flex;gap:clamp(8px,1.4vw,14px);width:max-content;padding:0 var(--gut) 14px;align-items:center}
.hsec .track::after{content:"";flex:0 0 clamp(14px,3vw,34px)}
.hsec .hi{flex:0 0 auto;background:var(--paper-2);border-radius:2px;overflow:hidden;display:flex;height:clamp(300px,42vh,420px);width:clamp(240px,72vw,330px)}
.hsec .hi img{height:100%;width:100%;display:block;object-fit:contain}
.hsec.v-wide .hi{height:clamp(200px,38vh,300px);width:clamp(280px,82vw,500px)}
.hsec.v-sq .hi{height:clamp(230px,32vh,320px);width:clamp(230px,58vw,300px)}
.hs-hint{font-size:var(--s--1);color:var(--mute);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;padding-left:var(--gut);display:flex;align-items:center;gap:6px}
.hs-hint::after{content:"\2192"}
@media (hover:hover){.hsec .hi img{cursor:zoom-in}}
/* pinned by JS on wide + fine-pointer only */
.hsec.pinned{margin-top:clamp(40px,7vw,96px);margin-bottom:clamp(40px,7vw,96px)}
.hsec.pinned .sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;cursor:default}
.hsec.pinned .track{padding:0 0 0 var(--gut);width:max-content;will-change:transform}
.hsec.pinned .hi{height:min(62vh,500px);width:clamp(300px,38vw,430px)}
.hsec.pinned.v-wide .hi{height:min(58vh,440px);width:min(52vw,640px)}
.hsec.pinned.v-sq .hi{height:min(46vh,390px);width:min(46vh,390px)}
.hsec.pinned .hs-hint{display:none}
/* short row that already fits the viewport: centre it, drop the scroll affordance */
.hsec.fits{margin-top:clamp(20px,3.4vw,40px);margin-bottom:clamp(20px,3.4vw,40px)}
.hsec.fits .sticky{cursor:default}
.hsec.fits .track{margin-inline:auto}
.hsec.fits .hs-hint{display:none}

/* phone-screenshot row: fixed grid, reveals upward, never scrolls sideways */
.prow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(8px,1.4vw,16px);margin:clamp(18px,3vw,34px) 0;align-items:start}
.prow .pcell{background:var(--paper-2);border-radius:2px;overflow:hidden;aspect-ratio:9/17;display:flex}
.prow .pcell img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (hover:hover){.prow .pcell img{cursor:zoom-in}}
@media (max-width:640px){.prow{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}}

/* ---- press wall: big stacked quotes, outlet in the margin ---- */
.press{position:relative;margin:clamp(44px,8vw,104px) 0;padding-top:clamp(24px,4vw,46px);border-top:1px solid var(--line)}
.press::before{content:"\201C";position:absolute;top:-.36em;left:-.05em;font-size:clamp(5rem,13vw,10rem);line-height:1;color:var(--paper-2);pointer-events:none}
.press-h{position:relative;margin-bottom:clamp(20px,3.4vw,38px)}
.pwall{position:relative;display:grid;gap:clamp(20px,3.4vw,42px);list-style:none;margin:0;padding:0}
.pq{display:grid;gap:8px}
.pq + .pq{border-top:1px solid var(--line);padding-top:clamp(16px,2.6vw,32px)}
.pq-src{font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.pq-t{font-size:clamp(1.3rem,.92rem + 1.9vw,2.15rem);line-height:1.17;letter-spacing:-.03em;color:var(--ink);max-width:32ch;text-wrap:balance}
.pq:first-child .pq-t{font-size:clamp(1.6rem,1rem + 3vw,2.9rem);max-width:26ch}
@media (min-width:740px){
  .pq{grid-template-columns:clamp(120px,16vw,200px) 1fr;gap:clamp(18px,3.6vw,54px);align-items:baseline}
  .pq-src{padding-top:.4em}
}
@media (hover:hover){
  .pwall:hover .pq{opacity:.4;transition:opacity .4s ease}
  .pwall:hover .pq:hover{opacity:1}
}
@media (prefers-reduced-motion:reduce){.pwall:hover .pq{opacity:1}}

.next{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:clamp(32px,5vw,60px);padding:clamp(24px,4vw,42px) 0;transition:color .25s}
.next .lab{display:block;margin-bottom:6px}
.next h3{font-size:var(--s-2);letter-spacing:-.03em}
.next .ar{font-size:var(--s-2);color:var(--mute);transition:transform .3s cubic-bezier(.16,.72,.2,1)}
.next:hover h3{color:var(--teal)}
.next:hover .ar{color:var(--teal);transform:translateX(6px)}

/* ---- lightbox ---- */
#lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,7,.95);display:none;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ---- scroll reveal ---- */
.tile.pre,.rv.pre{opacity:0;transform:translateY(42px) scale(.985)}
.tile.inview,.rv.inview{opacity:1;transform:none;transition:opacity .7s ease,transform .85s cubic-bezier(.16,.72,.2,1)}
.grid .tile:nth-child(even).inview{transition:opacity .7s ease .13s,transform .85s cubic-bezier(.16,.72,.2,1) .13s}
.stack .pair img:nth-child(2).inview{transition:opacity .7s ease .13s,transform .85s cubic-bezier(.16,.72,.2,1) .13s}
.pwall .pq:nth-child(even).inview{transition:opacity .7s ease .12s,transform .85s cubic-bezier(.16,.72,.2,1) .12s}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .tile.pre,.rv.pre{opacity:1;transform:none}
  a.lk::after{display:none}
  .hsec.pinned .track{transform:none!important}
}