/* ==========================================================================
   EXHIBITA — the evidence in award-winning web design
   Shared design system. Warm paper / ink, editorial rules, mono metadata.
   ========================================================================== */

:root{
  --paper:#f4f0e8; --ink:#1c1a16; --ink-soft:#5c564b; --rule:#1c1a1622;
  --rule-hard:#1c1a1655;
  --accent:#d4491f; --accent-soft:#d4491f18; --glow:#e8b84b;
  --card:#fbf8f2; --gold:#9a7b28;
  --mono:'Cascadia Code','Consolas',ui-monospace,monospace;
  /* T→A tuck in the wordmark. "TA" is a classic loose pair: the A's apex sits
     under the T's crossbar, so it needs more negative kern than "EX" to look
     equally closed. Nudge this one number to taste. */
  --wm-kern:-.18em;
  /* Optical alignment. Arial Black's "E" carries a 0.073em left side bearing —
     at display size that is ~8px of dead space, versus ~0.9px on the 10px mono
     kicker above it, so the wordmark reads as indented. Pull it back so the E's
     stem hangs flush with the small type above and below. Scales with the
     clamp() because em is relative to the wordmark's own size. */
  --wm-inset:-.065em;
  --display:'Arial Black','Segoe UI Black',Inter,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#161412; --ink:#ece7dc; --ink-soft:#a39b8b; --rule:#ece7dc22;
    --rule-hard:#ece7dc55;
    --accent:#ff6b3d; --accent-soft:#ff6b3d1c; --glow:#ffd166; --card:#1e1b18;
    --gold:#e8c268;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:Georgia,'Times New Roman',ui-serif,serif;line-height:1.6;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:1040px;margin:0 auto;padding:0 5vw}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}

/* ---------- masthead ---------- */
.masthead{padding:1.6rem 0 1.1rem;border-bottom:2px solid var(--ink)}
.mast-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.mast-top .dot{color:var(--accent)}
.wordmark{display:block;text-decoration:none;color:var(--ink);margin:.7rem 0 .5rem}
.wordmark h1,.wordmark .wm{font-family:var(--display);font-weight:900;letter-spacing:-.05em;
  font-size:clamp(2.5rem,10.8vw,7rem);line-height:.85;text-transform:uppercase;display:block;
  margin-left:var(--wm-inset)}
/* EXHIBITA is one word. The final "a" carries the accent colour and tucks
   under the T's crossbar so the pair closes up like the "Ex" at the start. */
.wm-a{color:var(--accent);margin-left:var(--wm-kern)}
.wordmark .wm-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.7rem;display:block}

/* ---------- site nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:.7rem 0;margin-bottom:1.8rem}
.nav ul{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);display:flex;gap:.6em;padding:.15em 0;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current]{color:var(--accent)}
.nav .n{color:var(--accent);font-size:.66rem}

/* ---------- scroll reveal ---------- */
@supports (animation-timeline: view()){
  .rv{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ---------- headings ---------- */
.dept{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem;display:flex;align-items:center;gap:.9em}
.dept::after{content:"";flex:1;height:1px;background:var(--rule)}
h2{font-family:var(--display);font-size:clamp(1.8rem,5vw,3.2rem);line-height:1;
  letter-spacing:-.025em;text-transform:uppercase;margin-bottom:1.1rem}
h3{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:-.005em;margin-bottom:.6rem}
.standfirst{font-size:1.15rem;font-style:italic;color:var(--ink-soft);max-width:40em;margin-bottom:2rem}
p{max-width:44em;margin-bottom:1rem}
section{padding:3.5rem 0;border-top:1px solid var(--rule)}
section.major{border-top:2px solid var(--ink)}

/* ---------- results board ---------- */
.board{width:100%;border-collapse:collapse;font-size:.92rem}
.board caption{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);padding-bottom:.8rem}
.board th{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;font-weight:400;padding:.5rem .8rem .5rem 0;
  border-bottom:1px solid var(--rule-hard)}
.board td{padding:.62rem .8rem .62rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.board tr:hover td{background:var(--accent-soft)}
.board .date{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);white-space:nowrap}
.board .title{font-weight:700}
.board .studio{color:var(--ink-soft);font-style:italic}
.badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-hard);padding:.15em .5em;white-space:nowrap;color:var(--ink-soft)}
.badge.dev{border-color:var(--accent);color:var(--accent)}
.badge.soty{border-color:var(--gold);color:var(--gold);background:transparent}

/* ---------- league table ---------- */
.league{width:100%;border-collapse:collapse;font-size:.92rem}
.league th{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-align:right;font-weight:400;padding:.5rem .7rem;
  border-bottom:1px solid var(--rule-hard)}
.league th:nth-child(-n+3){text-align:left}
.league td{padding:.55rem .7rem;border-bottom:1px solid var(--rule);text-align:right;
  font-family:var(--mono);font-size:.82rem}
.league td:nth-child(-n+3){text-align:left;font-family:inherit;font-size:.92rem}
.league .rank{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.league .name{font-weight:700}
.league .country{color:var(--ink-soft);font-size:.78rem;font-style:italic}
.league tr:hover td{background:var(--accent-soft)}
.league .peak{color:var(--accent);font-weight:700}

/* ---------- bar meter ---------- */
.meter{display:flex;align-items:center;gap:.7em;margin:.35rem 0}
.meter .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  flex:0 0 8.5em;color:var(--ink-soft)}
.meter .track{flex:1;height:10px;background:var(--rule);position:relative;overflow:hidden}
.meter .fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.meter .val{font-family:var(--mono);font-size:.74rem;flex:0 0 3.2em;text-align:right}

/* ---------- cards ---------- */
.grid{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);padding:1.3rem 1.4rem;
  text-decoration:none;color:var(--ink);display:block;transition:border-color .25s var(--ease),transform .25s var(--ease)}
a.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.6rem}
.card p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- case file ---------- */
.case{border-top:1px solid var(--rule);padding:2.2rem 0}
.case-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.case-studio{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.06em}
.awards{display:flex;gap:.4em;flex-wrap:wrap;margin:.7rem 0 1rem}
.tech{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.9rem}
.tech span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;background:var(--accent-soft);
  color:var(--accent);padding:.2em .55em}
.note{background:var(--card);border-left:3px solid var(--accent);border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 1.15rem;font-family:var(--mono);font-size:.78rem;line-height:1.7;max-width:46em;overflow-x:auto}
.note b{letter-spacing:.12em;text-transform:uppercase;font-size:.64rem;color:var(--accent)}
.note code{background:var(--accent-soft);padding:.1em .4em;border-radius:3px}

/* ---------- pull quote ---------- */
.pull{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,2.1rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:-.015em;max-width:20em;margin:2.2rem 0;
  padding-left:1.2rem;border-left:3px solid var(--accent)}

/* ---------- ladder ---------- */
.ladder{list-style:none;counter-reset:rung;max-width:46em}
.ladder li{border-top:1px solid var(--rule);padding:1.1rem 0 1.1rem 3.2rem;position:relative}
.ladder li::before{counter-increment:rung;content:counter(rung,decimal-leading-zero);
  position:absolute;left:0;top:1.15rem;font-family:var(--mono);font-size:.75rem;color:var(--accent)}
.ladder b{display:block;font-family:var(--display);text-transform:uppercase;font-size:1rem;margin-bottom:.3rem}
.ladder p{font-size:.94rem;margin:0;color:var(--ink-soft)}

/* ---------- shots: the visual layer ---------- */
.gallery{display:grid;gap:1.6rem 1.3rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:1.8rem 0}
.gallery.wide{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.shot{display:block;text-decoration:none;color:var(--ink);position:relative}
.shot figure{margin:0}
.shot .frame{position:relative;overflow:hidden;border:1px solid var(--rule-hard);background:var(--card);
  aspect-ratio:4/3;display:block}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),filter .5s var(--ease);filter:saturate(.92)}
.shot:hover img{transform:scale(1.04);filter:saturate(1.06)}
.shot .rank-tab{position:absolute;top:0;left:0;background:var(--paper);color:var(--accent);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;padding:.28em .6em;
  border-right:1px solid var(--rule-hard);border-bottom:1px solid var(--rule-hard);z-index:2}
.shot .dev-tab{position:absolute;top:0;right:0;background:var(--accent);color:var(--paper);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;padding:.28em .6em;z-index:2}
.shot figcaption{padding-top:.7rem}
.shot .cap-title{font-family:var(--display);font-size:.98rem;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.15;display:block}
.shot:hover .cap-title{color:var(--accent)}
.shot .cap-meta{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);
  letter-spacing:.06em;display:block;margin-top:.3rem}
.shot .cap-tags{font-family:var(--mono);font-size:.6rem;color:var(--accent);
  letter-spacing:.08em;display:block;margin-top:.35rem;text-transform:uppercase}

/* big lead image */
.lead-shot{margin:1.5rem 0 2rem;border:1px solid var(--rule-hard);overflow:hidden;background:var(--card)}
.lead-shot img{width:100%;display:block}
.lead-shot figcaption{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);
  letter-spacing:.08em;padding:.7rem .9rem;border-top:1px solid var(--rule)}

/* case-file image */
.case-shot{margin:1.1rem 0 1.2rem;border:1px solid var(--rule-hard);overflow:hidden;
  background:var(--card);max-width:640px}
.case-shot img{width:100%;display:block;transition:transform .5s var(--ease)}
.case-shot:hover img{transform:scale(1.03)}

/* credit strip */
.credit{font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);letter-spacing:.06em;
  border-top:1px solid var(--rule);padding-top:.8rem;margin-top:1.2rem}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);margin-top:4rem;padding:2.5rem 0 4.5rem;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);line-height:2}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{border-bottom:1px dotted var(--accent)}
.foot-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:2rem}
.foot-grid b{color:var(--ink);letter-spacing:.16em;text-transform:uppercase;font-size:.64rem;
  display:block;margin-bottom:.4rem}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}