/* middl-men — shared tokens. Import _fonts.css before this. */
:root{
  --paper:#F4EFE7; --cream:#FAF6EE; --ink:#111111; --red:#D9381F; --red-ink:#B32A14;
  --teal:#6F9C99; --graphite:#5A5A5A; --mute:#8C867E;
  --hair:rgba(17,17,17,.12); --hair-2:rgba(17,17,17,.22);
  --sh1:0 1px 0 rgba(17,17,17,.06);
  --sh2:0 8px 24px -12px rgba(17,17,17,.18);
  --ease:cubic-bezier(.2,0,0,1);
  --display:'Mango Grotesque',Impact,'Haettenschweiler',sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility}

/* ── type scale ──────────────────────────────────
   Display is set tight per the design system (-0.02em) and optically
   corrected further at very large sizes, where tracking reads looser. */
.d1{font-family:var(--display);text-transform:uppercase;line-height:.83;
  font-size:clamp(64px,13.5vw,206px);letter-spacing:-.035em}
.d2{font-family:var(--display);text-transform:uppercase;line-height:.87;
  font-size:clamp(40px,6.4vw,92px);letter-spacing:-.026em}
.d3{font-family:var(--display);text-transform:uppercase;line-height:.92;
  font-size:clamp(26px,3vw,44px);letter-spacing:-.018em}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.7}
.lab-s{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.8}
.bd{font-size:16px;line-height:1.62;max-width:62ch}
.bd-l{font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:34ch}
.marg{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--red);
  border-left:2px solid var(--red);padding-left:12px;max-width:30ch}
em{font-family:var(--display);font-style:italic;color:var(--red);
  font-size:1.14em;letter-spacing:-.01em}

a{color:inherit}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* image slot — never broken while a file is missing */
.slot{position:relative;background:
  repeating-linear-gradient(45deg,#EDE7DD 0 10px,#F2ECE3 10px 20px);
  border:1px solid var(--hair);overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover}
.slot::after{content:attr(data-slot);position:absolute;left:10px;bottom:8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);pointer-events:none}
.slot.filled::after{display:none}

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