/* =========================================================================
   McMURRY & HUGHES — main.css
   Foundations: fonts, tokens, base type, layout, rail, navigation, footer.

   THE THREE RULES THIS FILE IS BUILT TO PROTECT
   1  GREY IS SEMANTIC. --field / --grey mean "the market a company is already
      searching". They are never a panel, a card, a section ground or a stripe.
      There is no rule in this stylesheet that fills a container with grey.
   2  VERMILION IS ONE PERSON outside that search. It is a marker, a hairline
      and a flag on an unmeasured field. It is never a button fill, never body
      copy, never on a photograph.
   3  TWO FAMILIES, NO THIRD. Archivo + IBM Plex Mono, self-hosted, latin and
      latin-ext. The ext subsets are not optional: Kraków and Wrocław are set
      correctly and a missing subset substitutes a serif silently.
   Target ratio across the site: ~90% paper, ~7% ink, ~2% grey, ~1% vermilion.
   ========================================================================= */

/* ── 01 · TYPE ─────────────────────────────────────────────────────────── */

@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_400_normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_500_normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* latin-ext — required for Kraków, Wrocław, São, façade */
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Regular-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Medium-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-SemiBold-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url('../assets/fonts/Archivo-Bold-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_400_ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PlexMono';src:url('../assets/fonts/IBM_Plex_Mono_500_ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── 02 · TOKENS ───────────────────────────────────────────────────────── */

:root{
  /* palette — MH_colour-specification.txt, edition 1.0 */
  --paper:#FCFCFA;          /* ground, no meaning of its own */
  --bone:#F1F1EE;           /* second ground, structural only */
  --field:#E4E4E0;          /* THE SEARCHED MARKET — semantic */
  --grey:#9A9A96;           /* the same, at small scale — semantic */
  --ink:#0E0F12;            /* fact: type, rules, boundaries */
  --verm:#D33A1A;           /* one person outside the search */
  --slate:#41444A;          /* body copy */
  --mid:#7B7F85;            /* labels */
  /* interface only, never marketing */
  --confirmed:#33523A;      /* the availability dot */
  --error:#9C2410;
  --pending:#7E6416;

  --hair:rgba(14,15,18,.20);
  --hairsoft:rgba(14,15,18,.08);
  --hair-rev:rgba(252,252,250,.26);
  --hairsoft-rev:rgba(252,252,250,.12);

  --A:'Archivo';
  --M:'PlexMono';

  /* spatial system — the page rail is 26mm in print; 72px on screen */
  --rail:72px;
  --gutter:24px;
  --measure:64ch;
  --band:clamp(72px,10vw,148px);   /* vertical rhythm between sections */

  /* motion — slow, controlled, no bounce anywhere in the system */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-depth:cubic-bezier(.33,.9,.28,1);
  --t-fast:.28s;
  --t:.52s;
  --t-slow:.9s;
}

/* ── 03 · RESET & BASE ─────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--A);
  font-weight:400;
  font-size:17px;
  line-height:1.56;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--ink);color:var(--paper)}

/* Focus: a visible ink offset rule. Never removed, never a glow. */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.ink :focus-visible,.section--ink :focus-visible{outline-color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:14px 20px;
  font-family:var(--M);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:0}

/* visually hidden, but present for screen readers and for heading order */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── 04 · TYPE SCALE ───────────────────────────────────────────────────── */

.say{font-weight:700;letter-spacing:-.042em;line-height:.93;text-wrap:balance}
.say--xl{font-size:clamp(38px,6.6vw,88px)}
.say--l {font-size:clamp(32px,4.6vw,64px)}
.say--m {font-size:clamp(27px,3.2vw,44px)}
.say--s {font-size:clamp(23px,2.3vw,32px)}

.hd{font-weight:600;letter-spacing:-.03em;line-height:1.06;font-size:clamp(23px,2.2vw,34px);text-wrap:balance}
.hd--s{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.026em;line-height:1.14}

.standfirst{
  font-weight:500;font-size:clamp(18px,1.5vw,21px);
  letter-spacing:-.02em;line-height:1.34;color:var(--ink);
  max-width:42ch;
}

p{color:var(--slate);max-width:var(--measure)}
p + p{margin-top:1.1em}
p b,strong{font-weight:600;color:var(--ink)}
.lede{font-size:19px;line-height:1.5;color:var(--slate);max-width:56ch}
.small{font-size:15px;line-height:1.55}

a{color:inherit;text-decoration:none}
.link{
  border-bottom:1px solid var(--hair);
  transition:border-color var(--t-fast) var(--ease);
}
.link:hover{border-color:var(--ink)}

/* label / figure / caption — always Plex Mono */
.label{
  font-family:var(--M);font-weight:400;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
  display:block;
}
.label--v{color:var(--verm)}
.label--ink{color:var(--ink)}
.figure{font-family:var(--M);font-weight:500;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.caption{font-family:var(--M);font-size:11px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.mono{font-family:var(--M);font-variant-numeric:tabular-nums lining-nums}
.v{color:var(--verm)}

.rule{height:1px;background:var(--ink);border:0}
.hairline{height:1px;background:var(--hair);border:0}
.hairline--soft{height:1px;background:var(--hairsoft);border:0}

/* ── 05 · LAYOUT ───────────────────────────────────────────────────────── */

.page{position:relative}

.wrap{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:1024px){
  .wrap{padding-left:calc(var(--rail) + 40px);padding-right:56px}
}

.section{padding-block:var(--band);position:relative}
.section--tight{padding-block:calc(var(--band) * .58)}
.section--bone{background:var(--bone)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink p,.section--ink .lede{color:rgba(252,252,250,.74)}
.section--ink .label{color:rgba(252,252,250,.55)}
.section--ink .label--v{color:var(--verm)}
.section--ink .rule{background:rgba(252,252,250,.55)}
.section--ink .hairline{background:var(--hair-rev)}
.section--ink .hairline--soft{background:var(--hairsoft-rev)}

/* section head: mono index + rule, the book's running head translated */
.shead{
  display:flex;align-items:baseline;gap:20px;
  padding-bottom:14px;margin-bottom:44px;
  border-bottom:1px solid var(--ink);
}
.section--ink .shead{border-bottom-color:rgba(252,252,250,.55)}
.shead__n{font-family:var(--M);font-size:11px;letter-spacing:.24em;color:var(--verm);flex:none}
.shead__t{font-family:var(--M);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
.shead__r{margin-left:auto;font-family:var(--M);font-size:11px;letter-spacing:.2em;color:var(--mid);text-align:right}

.cols{display:grid;gap:clamp(28px,4vw,72px)}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.cols--5{grid-template-columns:repeat(5,1fr)}
.cols--aside{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
.cols--lead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}

.stack-s > * + *{margin-top:12px}
.stack   > * + *{margin-top:24px}
.stack-l > * + *{margin-top:44px}

/* ── 06 · THE RAIL (search trace) ──────────────────────────────────────── */
/* The book's page rail, made functional: it records where in the argument
   the reader is. One vermilion tick — the section in view. Nothing else
   about it moves. */

.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);
  z-index:40;pointer-events:none;display:none;
}
@media (min-width:1024px){.rail{display:block}}
.rail__line{
  position:absolute;right:0;top:140px;bottom:120px;width:1px;background:var(--hair);
}
.rail__ticks{position:absolute;right:0;top:140px;bottom:120px;width:100%}
.rail__tick{
  position:absolute;right:0;height:1px;background:var(--hair);width:14px;
  transition:width var(--t) var(--ease),background-color var(--t) var(--ease);
  pointer-events:auto;
}
.rail__tick[aria-current="true"]{width:28px;height:2px;background:var(--verm)}
.rail__label{
  position:absolute;left:18px;bottom:120px;
  font-family:var(--M);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mid);writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;
}
.rail__n{
  position:absolute;left:18px;top:140px;
  font-family:var(--M);font-size:10px;letter-spacing:.16em;color:var(--mid);
}
.rail--rev .rail__line,.rail--rev .rail__tick{background:var(--hair-rev)}
.rail--rev .rail__tick[aria-current="true"]{background:var(--verm)}
.rail--rev .rail__label,.rail--rev .rail__n{color:rgba(252,252,250,.5)}

/* ── 07 · NAVIGATION ───────────────────────────────────────────────────── */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(252,252,250,0);
  border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),
             padding var(--t) var(--ease);
}
.nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:26px;
  transition:padding var(--t) var(--ease);
}
.nav[data-scrolled="true"]{
  background:rgba(252,252,250,.94);
  backdrop-filter:saturate(1) blur(6px);
  border-bottom-color:var(--hair);
}
.nav[data-scrolled="true"] .nav__in{padding-block:14px}

.mark{display:flex;align-items:center;gap:12px}
.mark__sym{width:34px;height:auto;flex:none;color:var(--ink)}
.mark__sym .fr{fill:none;stroke:currentColor}
.mark__sym .bk{fill:currentColor}
.mark__sym .pt{fill:var(--verm)}
.mark__wd{
  font-weight:700;letter-spacing:-.03em;font-size:16px;line-height:1;white-space:nowrap;
}
.mark__wd .amp{font-weight:400;color:var(--verm)}
.mark__wd--hide{display:none}
@media (min-width:600px){.mark__wd--hide{display:inline}}

.nav__links{display:flex;align-items:center;gap:26px}
.nav__link{
  font-family:var(--M);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--verm)}

.nav__toggle{
  display:none;background:none;border:0;padding:12px 0 12px 12px;cursor:pointer;
  font-family:var(--M);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  min-height:44px;
}
.nav__panel{display:contents}

/* ── 08 · BUTTONS ──────────────────────────────────────────────────────── */
/* Hairline rule, no fill, radius 0, 44px minimum target.
   Vermilion appears as the hairline on the primary action only — the action
   that leads to the market. It is never a fill. */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:13px 24px;
  border:1px solid var(--ink);border-radius:0;background:none;
  font-family:var(--A);font-weight:500;font-size:16px;letter-spacing:-.01em;
  color:var(--ink);cursor:pointer;text-align:center;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--primary{border-color:var(--verm)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--rev{border-color:rgba(252,252,250,.55);color:var(--paper)}
.btn--rev:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed;background:none;color:var(--ink);border-color:var(--ink)}
.btn__tick{font-family:var(--M);font-size:11px;letter-spacing:.16em}

.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* a text action, used where a button would be too loud */
.act{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--M);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--verm);align-self:flex-start;
  transition:opacity var(--t-fast) var(--ease);
}
.act:hover{opacity:.62}

/* ── 09 · FOOTER ───────────────────────────────────────────────────────── */

.foot{border-top:1px solid var(--ink);padding-block:56px 40px;background:var(--paper)}
.foot__grid{
  display:grid;gap:40px;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  align-items:start;
}
.foot__list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.foot__list a,.foot__list span{
  font-size:15px;color:var(--slate);
  transition:color var(--t-fast) var(--ease);
}
.foot__list a:hover{color:var(--ink)}
.foot__note{
  margin-top:48px;padding-top:18px;border-top:1px solid var(--hairsoft);
  display:flex;flex-wrap:wrap;gap:12px 32px;
}
.foot__note span{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}

/* ── 10 · ILLUSTRATIVE-DATA FLAG ───────────────────────────────────────── */
/* Everything on this site that is not a counted fact says so, in the same
   visual field as the thing it qualifies. */

.flag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verm);
}
.flag::before{content:"";width:8px;height:8px;background:var(--verm);flex:none}

/* ── 11 · MOTION PRIMITIVES ────────────────────────────────────────────── */
/* Opacity + a short translation. Nothing scales, nothing bounces, nothing
   rotates on entry. Staggering is done with a per-element delay set in JS. */

/* Gated on .js, which the inline script in every <head> sets. If that script
   never runs — JavaScript off, blocked, or failed — nothing is hidden and the
   whole page is readable exactly as written. An entrance animation must never
   be the reason a sentence cannot be read. */
.js [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* A masked reveal, left to right — the same gesture as the search widening.
   Mask, not clip-path: a clipped element has no intersection area, so the
   observer that is meant to reveal it never sees it arrive. */
.js [data-reveal="wipe"]{
  opacity:1;transform:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 100%);
          mask-image:linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:0% 100%;mask-size:0% 100%;
  transition:-webkit-mask-size 1.1s var(--ease),mask-size 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal="wipe"].is-in{-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* line-by-line statement reveal */
.lines{display:block}
.lines .ln{display:block;overflow:hidden}
.js .lines .ln > span{
  display:block;transform:translateY(105%);
  transition:transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
.lines.is-in .ln > span{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-reveal="wipe"]{-webkit-mask-image:none !important;mask-image:none !important}
  /* the people are present and still: no drift, no arrival, no lean */
  .person,.marker,.compare__dot{
    opacity:1 !important;
    --dx:0px !important;--dy:0px !important;--mx:0px !important;--my:0px !important;--s:1 !important;
  }
  .lines .ln > span{transform:none !important}
}