/* Shared foundation for both ff. directions.
   One theme (dark), one accent, one radius system (sharp, 0). */

@font-face{font-family:Anton;src:url(fonts/anton-latin.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-400-700.woff2)format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(fonts/satoshi-bold.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-700.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  /* House palette: the ground is black, the ink is warm off-white, and there is
     no accent colour anywhere. The photographs carry all the colour. */
  --paper:#000;
  --paper-lift:#121213;
  --ink:#f0eee7;
  --muted:#8a8880;
  --dim:#4f4e49;
  --line:#232324;
  /* Emphasis is ink at full strength, never a colour. */
  --accent:#f0eee7;

  /* One large, calm grotesque carries the display voice. Anton is reserved for
     a single poster moment per page, never for labels. */
  --display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --poster:Anton,"Arial Narrow",Impact,sans-serif;
  --sans:"Space Grotesk",Satoshi,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,4vw,54px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Grain sits on a fixed, non-interactive layer so scrolling never repaints it. */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* Shared lightbox used by both directions. */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(6,6,7,.96);display:none;
  align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.lightbox[open]{display:flex}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;background:var(--paper-lift)}
.lightbox-shell{position:relative;display:flex;flex-direction:column;gap:14px;max-width:1500px;width:100%;align-items:center}
.lightbox-bar{display:flex;gap:18px;align-items:baseline;justify-content:space-between;width:100%;flex-wrap:wrap}
.lightbox-close{border:1px solid var(--line);padding:7px 14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s var(--ease),color .2s var(--ease)}
.lightbox-close:hover{border-color:var(--accent);color:var(--accent)}
.lightbox-nav{position:absolute;top:50%;translate:0 -50%;width:56px;height:56px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(11,11,12,.7);font-size:20px}
.lightbox-nav:hover{border-color:var(--accent);color:var(--accent)}
.lightbox-nav--prev{left:0}
.lightbox-nav--next{right:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}