/* ink.css — the only stylesheet drewink.com has.
   Linked, never inlined. The build before this one pasted a copy into every page,
   so a corrected colour changed nothing that shipped and still reported success. */

:root{
  --paper:#fbfbf9;         /* neutral near-white. never cream. */
  --ink:#111111;
  --grey:#4e4e4e;          /* the only grey. 8.0:1 on paper, 7.4:1 on the card fill. */
  --hair:#e2e2e0;

  --type:#0b3d91;          /* the three divisions, as fields rather than labels */
  --icon:#8e3013;
  --logo:#12482c;
  --figure:#d94420;        /* vermilion. marks, rules, counters. never text. */

  /* The ramp is on the ladder now, and the ladder is the anti-φ one: a module of
     8, and only the ratios 3:2 and 4:3, which multiply to 2:1 exactly. Every step
     below is a whole ratio and every value is a whole multiple of 8. The ramp it
     replaced — 120/44/24/18/16 — had 44:24 = 1.833 and 18:16 = 1.125 in it, which
     are not ratios, they are numbers that looked about right.
     The calculation is published in the Graphics Standards Manual, section 3.1. */
  --t1:clamp(3rem,7.6vw,8rem);       /* 128 — 48 × 8:3 (an octave and a fourth) */
  --t2:clamp(2rem,3.6vw,3rem);       /*  48 — 32 × 3:2 */
  --t3:2rem;                         /*  32 — 24 × 4:3 */
  --t4:1.5rem;                       /*  24 — 16 × 3:2 */
  --t5:1rem;                         /*  16 — the floor, and the module × 2 */

  /* The stack a SPECIMEN falls back to, and it is deliberately not the body font.
     Every font-family on the typefaces page reads `'dif-N', var(--fallback)`, and
     this token was used in nine places and declared in none — an undefined var()
     makes the whole declaration invalid at computed-value time, so the property
     fell back to INHERITED, which is Poppins. The page loaded all three weights
     correctly, reported them loaded, and then set every specimen on it in the body
     font: the exact failure check_catalog.py was written to prevent, arriving by a
     route that check could not see, because the files were all present and correct.
     Poppins is a geometric sans too, which is what let it pass a glance. */
  --fallback:ui-rounded,'SF Pro Rounded',system-ui,sans-serif;

  --pad:clamp(1.5rem,4vw,3.5rem);   /* 24 → 56, both on the module */
  --wrap:1400px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--paper); color:var(--ink);
  font-family:'Poppins',ui-rounded,'SF Pro Rounded','Avenir Next',system-ui,sans-serif;
  font-size:var(--t5); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible{ outline:3px solid var(--ink); outline-offset:3px }
[hidden]{ display:none !important }   /* display:inline-block outranks the attribute otherwise */
img,svg{ display:block }

/* the page measure. .field-in and footer .f each re-declare this;
   they are another session's and left alone, but nothing new should. */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* ── the shell ─────────────────────────────────────────────────────────── */
.bar{ position:relative; z-index:5; display:flex; align-items:center; gap:1rem;
      padding:.75rem var(--pad); background:var(--paper);
      border-bottom:1px solid var(--hair) }
.bar--over{ background:none; border:0; position:absolute; inset:0 0 auto 0 }
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto;
        padding-block:.5rem; min-height:44px; font-weight:600; font-size:var(--t5) }
.brand-mark{ width:30px; height:30px; border-radius:7px; overflow:hidden; flex:0 0 auto }
.brand-mark svg{ width:100%; height:100% }
.nav{ display:flex; gap:clamp(.9rem,2.4vw,1.8rem); flex-wrap:wrap; justify-content:flex-end;
       min-width:0 }
/* Four links plus the brand stopped fitting a 390 viewport the day the manual was
   added a nav item. Below that width the bar stacks instead of pushing the page
   sideways: a horizontal scrollbar on a phone is the whole layout failing, not a
   detail. */
@media (max-width:430px){
  .bar{ flex-wrap:wrap; row-gap:.25rem }
  .brand{ margin-right:0 }
  .nav{ width:100%; justify-content:flex-start; gap:1rem }
}
.nav a{ min-height:44px; display:flex; align-items:center; color:var(--grey);
        font-size:var(--t5); font-weight:500 }
.nav a:hover,.nav a[aria-current]{ color:var(--ink) }

/* ── the division fields: colour as structure, not as an accent ────────── */
.field{ color:var(--paper); padding:clamp(3rem,9vh,6rem) var(--pad);
        min-height:86vh; display:flex; align-items:center }
/* Each division owns a screen-turn rather than a stripe in a bundle. Two colours
   are then never in one window, which is the condition a stack of bands needs in
   order to be read as one striped object at all. Measured, not assumed: at 390 the
   fields were 92% of a window with 0.54 evenness against a 0.55 threshold, which is
   a near-miss and not a fix. */
.field--type{ background:var(--type) }
.field--icon{ background:var(--icon) }
.field--logo{ background:var(--logo) }
.field-in{ max-width:var(--wrap); margin:0 auto; width:100% }
/* The field became a flex container when each division was given a screen-turn,
   and a flex item does not stretch to its container by default: the inner block
   collapsed to its content and the goods inside it wrapped at two across on a
   1440 screen. */
.field h2{ font-size:var(--t2); font-weight:700; letter-spacing:-.03em; line-height:.95;
           margin-left:-.03em }
.field p{ font-size:var(--t4); margin-top:.7rem; max-width:44ch }
.field .n{ font-size:var(--t3); font-weight:600; margin-top:1.6rem; display:block }
.field a.go{ display:inline-flex; align-items:center; min-height:44px; margin-top:1.4rem;
             font-size:var(--t4); font-weight:600;
             border-bottom:3px solid var(--paper); padding-bottom:.15rem }
.field a.go:hover{ border-bottom-color:var(--figure) }

/* ── type ──────────────────────────────────────────────────────────────── */
h1{ font-size:var(--t1); font-weight:700; letter-spacing:-.04em; line-height:.88;
    margin-left:-.03em }
.lede{ font-size:var(--t3); max-width:40ch; line-height:1.4 }
.meta{ color:var(--grey); font-size:var(--t5) }

/* ── footer ────────────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--hair); margin-top:0 }
footer .f{ max-width:var(--wrap); margin:0 auto; padding:2.2rem var(--pad) 3rem;
           color:var(--grey); font-size:var(--t5); line-height:1.9 }
footer .f b{ color:var(--ink); font-weight:600 }

/* ── specimen ───────────────────────────────────────────────────────────
   The specimen page carries its own layout; what is left here is the one thing
   that has to look the same wherever a drawing fails to arrive. */
.spec-fail{ border-left:6px solid var(--figure); padding:1rem 0 1rem 1.2rem; max-width:60ch }
.spec-fail b{ display:block; font-size:var(--t3); font-weight:600; margin-bottom:.4rem }
.spec-fail code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--t5);
                 word-break:break-all; color:var(--ink) }


/* the index: a head that informs, then the faces as cards — each set in its own
   drawing over a ground, the way the reference puts the product on the first screen */
.ix-head{ padding-block:clamp(3rem,8vh,5.5rem) clamp(1.6rem,4vh,2.6rem) }
.facts{ display:flex; gap:clamp(1.4rem,3.5vw,2.6rem); margin-top:clamp(1rem,2.5vh,1.6rem);
        flex-wrap:wrap; align-items:baseline }
.facts div{ display:flex; align-items:baseline; gap:.55rem }
/* A value never stands on its own. The unit is the label, printed, because it is
   one word and it makes the number exact — Munari, p019: "communication must be
   instant and it must be exact." A mark would be shorter; ours does not read at
   this size yet, and a mark that has to be deciphered is neither. */
.facts dt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.facts dd{ font-size:var(--t2); font-weight:700; letter-spacing:-.03em; line-height:1;
           display:flex; align-items:baseline; gap:.4rem }
.facts dd span{ font-size:var(--t4); font-weight:500; color:var(--grey); letter-spacing:0 }
.facts--small dd{ font-size:var(--t4); font-weight:600 }
.field .facts dd{ color:var(--paper) }
.field .facts dd span{ color:var(--paper); opacity:.78 }
.facts--small .i{ width:1.5em; height:1.5em }
.i{ width:1.5em; height:1.5em; flex:0 0 auto; color:var(--grey) }
.bit{ display:inline-flex; align-items:baseline; gap:.35rem; font-size:var(--t4);
      font-weight:600; color:var(--ink) }
.bit span{ font-weight:500; color:var(--grey) }
.bit .i{ width:1.5em; height:1.5em; color:var(--grey) }
.bit--p{ font-weight:700 }
.facts .i{ width:2.2em; height:2.2em; color:var(--ink) }
.ix-head h1{ font-size:clamp(2.6rem,7.6vw,6rem); line-height:.9; letter-spacing:-.04em;
             margin-left:-.03em }

/* The card is a module, and every module is the same size because its content is
   always exactly two characters. Vignelli, the Canon p40: graphic design is "the
   organization of information", and a grid "provides consistency… an orderly look";
   p92: "in typography the white space is more important than the black of the type
   … white space not only separates the different parts of the message but helps to
   position the message in the context of the page." So: no cell, no fill, no rule —
   a regular module, and space between. Munari p028 wants a sign read ALONE; at a
   thousand that value is bought on the specimen page, one click away, not here.
   A saturated ground would also lie about the face: reversed out, a stem optically
   spreads, so the drawing shown is not the drawing bought. */
.card{ display:grid; gap:.35rem; align-content:start; container-type:inline-size }
.card-art{ display:grid; place-items:end start }
.card-set{ color:var(--ink); font-size:clamp(2.25rem,42cqi,5.5rem); line-height:1.06;
           letter-spacing:-.02em; margin-left:-.03em; white-space:nowrap }
/* A face whose drawing did not arrive says so by going quiet — it never borrows
   the look of a face that did. */
.card--bare .card-set{ font-family:var(--fallback) !important; color:var(--grey) }
.card-n{ font-size:var(--t4); font-weight:600; letter-spacing:-.01em; line-height:1.2 }
.card-foot{ display:flex; align-items:baseline; gap:.5rem .9rem; flex-wrap:wrap }
.card:hover .card-set{ color:var(--figure) }

/* the letter a name is filed under, standing across the whole shelf */
.group{ grid-column:1 / -1; font-size:var(--t2); font-weight:700; letter-spacing:-.03em;
        line-height:1; color:var(--ink); padding-top:clamp(1.4rem,3.5vh,2.4rem) }
.group:first-child{ padding-top:0 }

.more{ display:grid; place-items:center; padding:clamp(2rem,5vh,3rem) 0 }
.soon{ color:var(--grey); font-size:var(--t4); max-width:46ch; padding:clamp(1.5rem,4vh,2.5rem) 0 }
.soon b{ display:block; color:var(--ink); font-weight:600; font-size:var(--t3);
         margin-bottom:.4rem; letter-spacing:-.02em }