/* Shared look for the hand-built pages (about, inky, contact): same fonts, ink
   outlines, square corners and pill colors as the home page. */
@font-face{font-family:"Display";src:url("awards-assets/fonts/flux.woff2") format("woff2");font-weight:400 1000;font-display:swap}
@font-face{font-family:"Hand";src:url("awards-assets/fonts/handwritten.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Mono";src:url("awards-assets/fonts/dm-mono.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Body";src:url("awards-assets/fonts/inter.woff2") format("woff2");font-display:swap}
:root{--ink:#111212;--soft:#5b5e60;--line:#dfe1e2;--paper:#fff;--grid:#eef0f1;--cream:#f2f0ec;
  --amber:#ECB22E;--green:#2EB67D;--red:#E01E5A;--sky:#36C5F0;--accent:#0099ff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Body",system-ui,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:96px 96px;overflow-x:hidden;padding-top:92px}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1120px;margin-inline:auto;padding:0 clamp(16px,5vw,56px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.hand{font-family:"Hand",cursive;font-size:clamp(22px,2.4vw,28px);line-height:1;color:var(--accent);font-weight:400}
.mono{font-family:"Mono",monospace}
h1,h2.big{font-family:"Display",sans-serif;font-weight:1000;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
h1{font-size:clamp(52px,12vw,136px);margin-top:8px}
h2.big{font-size:clamp(38px,6.6vw,76px);margin-top:8px}
.letters{display:flex;flex-wrap:wrap;column-gap:.32em}
.letters .word{display:inline-flex;overflow:hidden;font-weight:inherit}
.letters span{display:inline-block}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;max-width:640px;margin-top:18px}
.sub{font-size:16px;line-height:1.55;color:var(--soft);max-width:560px;margin-top:12px}
section.block{margin-top:clamp(72px,9vw,128px)}
.label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:9px;border-bottom:1.5px solid var(--ink);margin-top:clamp(36px,5vw,56px);
  font:12px "Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
.chip{display:inline-block;padding:2px 7px;background:var(--c,var(--cream));font:11px/1.5 "Mono",monospace;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}

.proof{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ink);color:#fff}
.proof>div{padding:clamp(14px,1.8vw,20px) clamp(14px,1.8vw,22px);border-left:1px solid rgba(255,255,255,.2)}
.proof>div:first-child{border-left:0}
.proof b{display:block;font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.proof span{display:block;margin-top:5px;font:12px/1.35 "Mono",monospace;color:rgba(255,255,255,.72)}

.photo{position:relative;margin:0;overflow:hidden;background:var(--cream)}
.photo img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover}
.photo figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:4px 8px;background:#fff;border:1.5px solid var(--ink);font:12px/1.25 "Mono",monospace}

.card{border:1.5px solid var(--ink);background:#fff;padding:clamp(18px,2.2vw,26px)}
.card h3{font-size:clamp(18px,1.8vw,21px);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.card .org{margin-top:4px;font:12.5px/1.4 "Mono",monospace;color:var(--soft)}
.card p{margin-top:10px;font-size:15px;line-height:1.5;color:rgba(17,18,18,.82)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}

.strip{width:100vw;margin:clamp(64px,8vw,104px) 0 0 calc(50% - 50vw);overflow:hidden}
.strip div{display:flex;gap:10px;width:max-content;will-change:transform}
.strip span{padding:.08em .28em;font-family:"Display",sans-serif;font-weight:1000;font-size:clamp(48px,9vw,120px);line-height:1.1;text-transform:uppercase;white-space:nowrap}

/* pinned scroll: text steps past a sticky panel */
.pinned{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,64px);margin-top:clamp(28px,4vw,44px)}
.pinned .stage{position:sticky;top:112px;align-self:start;height:min(62vh,520px);overflow:hidden;background:var(--cream);border:1.5px solid var(--ink)}
.pinned .stage .photo{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.pinned .stage .photo.on{opacity:1}
.step{padding:clamp(40px,12vh,120px) 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .3s ease}
.step:first-child{border-top:0;padding-top:0}
.step.on{opacity:1}
.step h3{font-size:clamp(23px,2.8vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.step p{margin-top:12px;font-size:17px;line-height:1.55;color:rgba(17,18,18,.82)}
.step .hand{display:inline-block;margin-bottom:8px;color:var(--red)}

.ledger .yr{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.ledger .yr>b{font-family:"Display",sans-serif;font-weight:1000;font-size:30px;line-height:1}
.ledger ul{list-style:none}
.ledger li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;padding:5px 0;font-size:15px;line-height:1.4}
.ledger li time{font:12px/1.7 "Mono",monospace;color:var(--soft)}
.ledger li a{text-underline-offset:3px}

.foot{margin-top:clamp(64px,8vw,104px);border-top:1px solid var(--line);padding:24px 0 96px;font:12px "Mono",monospace;color:var(--soft)}

@media (prefers-reduced-motion:no-preference){
  .anim .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*70ms)}
  .anim .rv.in{opacity:1;transform:none}
  .anim .wipe{clip-path:inset(0 0 100% 0);transition:clip-path .95s cubic-bezier(.2,.8,.2,1)}
  .anim .wipe.in{clip-path:inset(0)}
  .anim .letters span{transform:translateY(105%);transition:transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*28ms)}
  .anim .letters.in span{transform:none}
}
@media (max-width:860px){
  .grid2,.grid3,.pinned{grid-template-columns:minmax(0,1fr)}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof>div:nth-child(3){border-left:0}
  .proof>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
  .pinned .stage{position:relative;top:0;height:300px}
  .pinned .stage .photo{opacity:1}
  .pinned .stage .photo:not(:first-child){display:none}
  .step{opacity:1;padding:28px 0}
  .ledger .yr{grid-template-columns:minmax(0,1fr);gap:8px}
}