/* ============================================================
   XXVI — Round 11 shared brand system
   One design system. Ten expressions of it.

   Round 17 adds: the two approved typefaces, self-hosted (no
   network request, same rule as every other asset here), and a
   --gold custom property each concept sets once, for its own
   material -- the mark's V, the canvas warmth and the lower
   text all read from the same variable.
   ============================================================ */

/* V18 (task 013 · 1): Geist, Geist Mono, Heebo and Bodoni Moda (the mark's X V I only), self-hosted
   OFL files in assets/fonts (licences beside them). Over file:// a browser may refuse font files, so a page
   opened from disk shows the fallback stack; served (start.py, the host) it shows these. */
@font-face{font-family:'Geist';src:url(fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Heebo';src:url(fonts/Heebo-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda XXVI';src:url(fonts/BodoniModa-XVI.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:block}

/* Round 27 — on the font swap.
   A metric-matched fallback family was built here first
   (src:local('Arial') + size-adjust measured at 97.84%) and then
   REMOVED, because it was measured to not work: local() does not
   resolve in this runtime, so the family fell through to a
   last-resort face and actively caused the lede to wrap to three
   lines before Inter Tight arrived, shifting the whole block 24px.
   The system stack below wraps the lede identically to Inter Tight
   at every container width from 244px to 338px (measured), so the
   honest fix is to let it do that job and to preload the three
   faces the hero uses so the window is as short as possible. */

:root{
  --ground:#08090B;
  --graphite:#0E1013;
  --graphite-2:#14171C;
  --line:#1E222A;
  --line-2:#2A2F39;

  --ink:#E9EAED;
  --ink-2:#9AA0AB;
  --ink-3:#666C77;
  --ink-4:#454B55;

  --champ:#C9A876;
  --champ-deep:#A98A56;
  --champ-wash:rgba(201,168,118,.13);
  --champ-line:rgba(201,168,118,.32);

  /* each concept sets its own --gold once; everything gold reads
     from this single variable rather than from --champ directly */
  --gold:var(--champ);
  --gold-deep:var(--champ-deep);

  /* the XXVI unit: every measure here is a multiple of 26 */
  --u:26px;
  --u2:52px;
  --u3:78px;
  --u4:104px;
  --u6:156px;

  --display:'Geist','Heebo',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:'Geist Mono','Heebo',ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* one easing, one base duration; systems come online in stages */
  --ease:cubic-bezier(.16,.84,.28,1);
  --t:520ms;

  --maxw:1360px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--display);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* the scrollbar is part of the surface, not a system afterthought */
html{scrollbar-color:#1E222A #08090B;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#08090B}
::-webkit-scrollbar-thumb{background:#1E222A;border:3px solid #08090B;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#2A2F39}
canvas{display:block}
img{max-width:100%;display:block}

/* ---------- typography ---------- */

.display{
  font-size:clamp(38px,6.4vw,86px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:400;
  margin:0;
}
.display b{font-weight:600}
.display em{font-style:normal;color:var(--gold)}

.lede{
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.55;
  letter-spacing:-.008em;
  color:var(--ink-2);
  font-weight:350;
  margin:0;
  max-width:40em;
}

.sec-title{
  font-size:clamp(24px,2.8vw,40px);
  line-height:1.1;letter-spacing:-.028em;font-weight:350;margin:0;
}

.meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.meta.champ{color:var(--champ-deep)}

.fig{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.rn{
  font-family:var(--display);
  letter-spacing:.16em;
  font-weight:400;
  color:var(--champ-deep);
  font-size:12px;
}

/* ---------- chrome: identical on all ten ---------- */

.chrome{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:80;
  height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(18px,3.2vw,52px);
  background:linear-gradient(to bottom,rgba(8,9,11,.94),rgba(8,9,11,.62) 62%,rgba(8,9,11,0));
  pointer-events:none;
}
.chrome > *{pointer-events:auto}
.mark{
  font-family:var(--mono);
  font-size:14px;letter-spacing:.4em;font-weight:500;
  color:var(--ink);padding-inline-end:.4em;
}
/* the gold V: one variable, seven materials -- each concept
   overrides this rule for its own treatment. The default here
   is the plain flat fallback so no file can ship without it. */
.mark .gv{font-style:normal;color:var(--gold)}
.chrome-r{display:flex;align-items:center;gap:18px}
.langs{display:flex;gap:2px;align-items:center}
.langs button{
  background:none;border:0;cursor:pointer;padding:5px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--ink-3);border-radius:2px;
}
.langs button.on{color:var(--champ);background:var(--champ-wash)}
.home{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink-4);text-transform:uppercase;
}
.home:hover{color:var(--ink-2)}

/* ---------- foot: the honesty register ---------- */

.foot{
  border-top:1px solid var(--line);
  padding:var(--u2) clamp(18px,3.2vw,52px) var(--u3);
  display:grid;gap:var(--u);
  grid-template-columns:repeat(12,1fr);
}
.foot .fl{grid-column:span 5}
.foot .fr{grid-column:span 6/-1}
.foot p{margin:0 0 10px;font-size:12.5px;line-height:1.62;color:var(--ink-3);max-width:46em}
.foot .fmark{font-size:14px;letter-spacing:.42em;color:var(--ink-2);margin-bottom:14px}

/* ---------- shared components ---------- */

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(18px,3.2vw,52px)}

.exhibit{
  border:1px solid var(--line);background:var(--graphite);
  position:relative;overflow:hidden;
}
.exhibit .cap{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:11px 14px;border-bottom:1px solid var(--line);
}
.exhibit .shot{aspect-ratio:16/10;overflow:hidden;background:#0B0D10}
.exhibit .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

.hr{height:1px;background:var(--line);border:0;margin:0}

.stat{display:flex;flex-direction:column;gap:7px}
.stat .v{font-family:var(--mono);font-size:clamp(21px,2.3vw,31px);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .v small{font-size:.5em;letter-spacing:.06em;color:var(--ink-3);margin-inline-start:.4em}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.st{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-2);padding:3px 7px;white-space:nowrap;
}
.st.live{color:var(--champ-deep);border-color:var(--champ-line)}

/* ---------- RTL ---------- */

[dir="rtl"]{--display:'Heebo','Geist',"Segoe UI",Arial,sans-serif}
[dir="rtl"] body,[dir="rtl"]{
  font-family:var(--display);
}
[dir="rtl"] .display{letter-spacing:-.015em}
[dir="rtl"] .mark,[dir="rtl"] .fmark{letter-spacing:.42em}
[dir="rtl"] .meta,[dir="rtl"] .st,[dir="rtl"] .stat .k{letter-spacing:.06em}
[dir="rtl"] .fig,[dir="rtl"] .stat .v{direction:ltr;unicode-bidi:embed}

/* ---------- mobile: a designed target, not a collapse ---------- */

@media(max-width:820px){
  :root{--u:22px;--u2:44px;--u3:60px;--u4:80px;--u6:112px}
  .display{font-size:clamp(33px,8.6vw,46px);line-height:1.05;letter-spacing:-.03em}
  .lede{font-size:16.5px;line-height:1.5}
  .sec-title{font-size:26px}
  .meta{font-size:10px;letter-spacing:.16em}
  .chrome{height:50px}
  .mark{font-size:14px;letter-spacing:.38em}
  .home{display:none}
  .foot{grid-template-columns:1fr;gap:var(--u)}
  .foot .fl,.foot .fr{grid-column:1/-1}
  .foot p{font-size:13px}
  .exhibit .shot{aspect-ratio:4/3}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
}