/* meroni-colzani.com
   Design system 10 of 10, built to DESIGN.md. Grown from preview/style.css, which the
   client approved on 21.09; nothing in the approved part is rewritten, only extended.

   Cool gesso ground, ink-blue blocks, and no chromatic accent at all: the colour comes
   from the pieces. Newsreader for everything that reads, DM Mono for everything that
   labels. One radius, 4px, everywhere. Dashed rules where other sites draw solid ones.
   No shadow anywhere.

   Capitals are set by text-transform and never typed into the markup, so a screen
   reader says "outdoor" and not "oh you tee dee oh oh arr".

   Laid out at 360 first and widened at 620 / 900 / 1024 / 1500. */

:root {
  /* colour */
  --ground: #DCDFE2;          /* cool gesso, the page */
  --ink: #161B22;             /* text, and the blocks */
  --body: #2B333D;            /* paragraphs, 9.55:1 on the ground */
  --on-ink: #DCDFE2;
  --on-ink-muted: #8F99A4;    /* 5.98:1 on ink */
  --muted: #4A535E;           /* 5.83:1 on the ground */
  --rule: #6F7B8A;            /* the dashed rules, 3.22:1 on the ground */
  --rule-solid: #C2C8CE;
  --rule-ink: #68727E;        /* the same rules on ink, 3.54:1 */
  --photo: #C6CBD1;           /* what sits under a frame while it loads */
  --error: #8C2F1C;
  --scrim: rgba(22, 27, 34, 0.45);

  /* type */
  --read: Newsreader, 'Newsreader Fallback', Georgia, serif;
  --label: 'DM Mono', 'DM Mono Fallback', Consolas, ui-monospace, monospace;

  /* space: 8px unit, 7 columns, 1500 container */
  --container: 1500px;
  --margin: 20px;
  --gutter: 20px;
  --section: 64px;

  --r: 4px;                   /* the only radius in the system */
  --fast: 180ms;
  --mid: 260ms;
  --slow: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 768px) { :root { --margin: 40px; --gutter: 24px; --section: 96px; } }
@media (min-width: 1024px) { :root { --margin: 64px; --gutter: 32px; --section: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 300 18px/1.6 var(--read);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.foot :focus-visible, .drawer :focus-visible { outline-color: var(--on-ink); }

.wrap { width: min(100% - var(--margin) * 2, var(--container)); margin-inline: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 80;
  background: var(--ink); color: var(--on-ink); border-radius: var(--r);
  padding: 12px 18px; font-family: var(--label); font-size: 15px;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- type */

.d-xl {
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.03;
  letter-spacing: 0;
  text-indent: -0.06em;         /* the first letter hangs into the margin */
}
.h-lg { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; text-indent: -0.05em; }
.h-md { font-size: clamp(24px, 3vw, 34px); line-height: 1.14; text-indent: -0.04em; }
.lead { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.55; color: var(--body); }
.prose { color: var(--body); max-width: 68ch; }
.prose p + p { margin-top: 0; }
.mono {
  font-family: var(--label); font-size: 15px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mono--wide { letter-spacing: 0.12em; }
.small { font-family: var(--label); font-size: 14px; color: var(--muted); }
.muted { color: var(--muted); }
.sec { padding: var(--section) 0; }
.sec--tight { padding: calc(var(--section) * 0.6) 0; }
.sec__head {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
  justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 16px;
}
.sec__head + * { margin-top: 28px; }
.stack > * + * { margin-top: 20px; }

/* ------------------------------------------------- header: the ink plaque */

.head { border-bottom: 1px solid var(--ink); }
.head__bar { display: flex; align-items: stretch; }
.mark {
  background: var(--ink); color: var(--on-ink);
  padding: 14px 22px; flex: none;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.mark svg { width: 30px; height: 18px; }
.mark__word {
  font-family: var(--label); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
}
.head__right { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.util {
  display: none;
  border-bottom: 1px solid var(--rule-solid);
  padding: 0 var(--margin) 0 24px; min-height: 46px;
  align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--label); font-size: 14px; color: var(--muted);
}
.util a {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px dashed var(--muted); line-height: 1.2;
}
.util a:hover { border-bottom-style: solid; }
.nav { display: none; }
.drawer-btn {
  flex-grow: 1; min-height: 44px; background: transparent;
  border: 0; border-left: 1px dashed var(--rule);
  font-family: var(--label); font-size: 15px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); cursor: pointer;
}
@media (min-width: 1024px) {
  .util { display: flex; }
  .drawer-btn { display: none; }
  .nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0 var(--margin) 0 24px; min-height: 58px;
    font-family: var(--label); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  }
  /* One underline travels between the links instead of appearing under each. The
     hit area is pushed out to 44px high by a pseudo-element rather than by padding,
     so the travelling underline stays where the eye expects it, under the word. */
  .nav a { position: relative; padding-bottom: 4px; }
  .nav a::before { content: ''; position: absolute; inset: -9px -8px; }
  .nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform 220ms var(--ease);
  }
  .nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }
}

/* ------------------------------------------------- the drawer, on the phone */

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(318px, 86vw);
  background: var(--ink); color: var(--on-ink);
  display: flex; flex-direction: column; z-index: 60;
  transform: translateX(100%);
  transition: transform var(--slow) var(--ease);
}
.drawer[data-open] { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px dashed var(--rule-ink);
  font-family: var(--label); font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-ink-muted);
}
.drawer__close {
  min-width: 44px; min-height: 44px; background: transparent; border: 0;
  color: var(--on-ink); font-family: var(--label); font-size: 15px;
  text-transform: uppercase; cursor: pointer;
}
.drawer nav { flex-grow: 1; padding: 4px 0; overflow-y: auto; }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; padding: 0 20px;
  border-bottom: 1px dashed var(--rule-ink); background: var(--ink); font-size: 24px;
}
.drawer nav a span { font-family: var(--label); font-size: 14px; color: var(--on-ink-muted); }
/* the shelves stand in a stack, each one drawn a little further in than the one above */
.drawer nav a:nth-child(2) { margin-right: 10px; }
.drawer nav a:nth-child(3) { margin-right: 20px; }
.drawer nav a:nth-child(4) { margin-right: 30px; }
.drawer nav a:nth-child(5) { margin-right: 40px; }
.drawer nav a:nth-child(6) { margin-right: 50px; }
.drawer nav a:nth-child(7) { margin-right: 60px; }
.drawer__foot { padding: 18px 20px 24px; border-top: 1px dashed var(--rule-ink); }
.drawer__foot .btn { width: 100%; background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.drawer__foot .small { color: var(--on-ink-muted); margin-top: 14px; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }

/* --------------------------------------- the dashed spine, the layout device */

.spread { position: relative; }
@media (min-width: 900px) {
  .spread { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .spread::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    border-left: 1px dashed var(--rule);
  }
  .spread__a { padding-right: calc(var(--gutter) * 1.5); min-width: 0; }
  .spread__b { padding-left: calc(var(--gutter) * 1.5); min-width: 0; }
  .spread--wide { grid-template-columns: 2fr 3fr; }
  .spread--wide::before { left: 40%; }
  .spread--flip .spread__a { order: 2; padding-right: 0; padding-left: calc(var(--gutter) * 1.5); }
  .spread--flip .spread__b { order: 1; padding-left: 0; padding-right: calc(var(--gutter) * 1.5); }
}
.spread__b { margin-top: 32px; }
@media (min-width: 900px) { .spread__b { margin-top: 0; } }

/* ------------------------------ photographs: the block never exceeds the file */

.shot { margin: 0; }
.shot__frame {
  position: relative;
  border-radius: var(--r); overflow: hidden; background: var(--photo);
  max-width: var(--maxw, none); margin-inline: auto;
}
.shot__frame img { width: 100%; }
/* the veneer seam: the frame parts along a vertical line */
.shot__frame::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
  border-left: 1px solid rgba(220, 223, 226, 0);
  transition: border-color var(--mid) var(--ease);
}
.shot:hover .shot__frame::after { border-left-color: rgba(220, 223, 226, 0.85); }
.shot figcaption {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 20px;
  justify-content: space-between;
  font-family: var(--label); font-size: 14px; color: var(--muted);
}

/* -------------------------------------------------------------------- hero */

.hero { padding-top: 28px; }
.hero__kicker { margin-bottom: 18px; color: var(--muted); }
.hero .d-xl { max-width: 13ch; }
.hero__lead { margin-top: 22px; max-width: 36ch; }
.hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.facts {
  margin: 40px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 28px;
  font-family: var(--label); font-size: 15px;
}
.facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.facts dd { margin: 0; }

/* -------------------------- buttons: the fill presses in, the outline stays */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px;
  border-radius: var(--r); border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--label); font-size: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
  transition: box-shadow var(--fast), transform var(--fast) var(--ease);
}
.btn:hover, .btn:focus-visible { box-shadow: inset 0 0 0 2px var(--ground); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.lnk {
  position: relative;
  font-family: var(--label); font-size: 16px; text-transform: uppercase;
  border-bottom: 1px dashed var(--muted); padding-bottom: 3px;
  display: inline-block;
}
/* the same trick as the navigation: a 44px target without moving the dashed rule */
.lnk::before { content: ''; position: absolute; inset: -10px -6px; }
.lnk:hover { border-bottom-style: solid; }
.tlnk { font-family: var(--label); font-size: 0.95em; border-bottom: 1px dashed var(--muted); }
.tlnk:hover { border-bottom-style: solid; }

/* ------------------------------ the ledger: cells parted by dashed rules */

.ledger { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cell { min-width: 0; padding: 24px 0; border-bottom: 1px dashed var(--rule); display: block; }
@media (min-width: 620px) {
  .cell { padding: 26px 24px; border-right: 1px dashed var(--rule); }
  .cell:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1024px) {
  .cell, .cell:nth-child(2n) { border-right: 1px dashed var(--rule); }
  .cell:nth-child(3n) { border-right: 0; }
}
/* In the ledger the frames share one proportion so the rows line up. It is the one
   place a frame is cropped, and only sideways. Everywhere else a photograph keeps
   its own shape. */
/* The frame is held to the width of the file inside it. Gargano is the one family the
   factory publishes at 300px and no wider, and without this its card was drawn at 452px
   on a wide screen: a 300px photograph stretched half as big again. The card is narrower
   than its neighbours instead, which is the honest way round. */
.cell__frame { max-width: var(--maxw, none); }
.cell picture { display: block; border-radius: var(--r); overflow: hidden; background: var(--photo); }
.cell picture img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.cell__no {
  margin-top: 14px; font-family: var(--label); font-size: 14px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.cell__name {
  margin: 14px 0 0; font-family: var(--label); font-size: 17px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cell__kind { margin: 6px 0 0; font-size: 17px; color: var(--body); }
/* the sample strip slides out from under the cell */
.cell__strip {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--mid) var(--ease), opacity 200ms;
}
.cell:hover .cell__strip, .cell:focus-within .cell__strip { max-height: 40px; opacity: 1; }
/* A pale finish would vanish on the gesso, so every dot is outlined. A line,
   not a shadow: the system has no shadows. */
.swatch { width: 15px; height: 15px; border-radius: var(--r); flex: none;
  border: 1px solid var(--rule-solid); }
.cell__by { font-family: var(--label); font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------- the gallery strip */

.strip { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
@media (min-width: 620px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------- the ink slab */

.slab {
  background: var(--ink); color: var(--on-ink); border-radius: var(--r);
  padding: 32px 24px;
}
@media (min-width: 768px) { .slab { padding: 44px 48px; } }
.slab p, .slab .lead { color: var(--on-ink-muted); }
.slab .h-lg, .slab .h-md { max-width: 16ch; }
.slab .spread::before { border-left-color: var(--rule-ink); }
.slab .facts dt { color: var(--on-ink-muted); }
.slab .lnk { border-bottom-color: var(--on-ink-muted); }

/* ------------------------------------------------------------------- tables */

.tbl-wrap { overflow-x: auto; }
.tbl {
  width: 100%; border-collapse: collapse;
  font-family: var(--label); font-size: 15px; min-width: 460px;
}
.tbl caption {
  text-align: left; font-size: 14px; color: var(--muted);
  padding-bottom: 14px; letter-spacing: 0.06em;
}
.tbl th {
  text-align: left; font-weight: 500; padding: 11px 12px 11px 0;
  border-bottom: 1px solid currentColor;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tbl tbody th { font-weight: 400; border-bottom: 1px dashed var(--rule); text-transform: none; letter-spacing: 0; }
.tbl td { padding: 12px 12px 12px 0; border-bottom: 1px dashed var(--rule); }
.tbl td:last-child, .tbl th:last-child { text-align: right; padding-right: 0; }
.slab .tbl td, .slab .tbl tbody th { border-bottom-color: var(--rule-ink); }
.slab .tbl caption, .slab .tbl td { color: var(--on-ink-muted); }

/* ---------------------------------------------- the drawing: a section, to scale */

.figure { margin: 0; }
/* The plate is drawn at 320 wide and grows no further than 460: at 360px it sits
   at 1 to 1 with 14px labels, and on a desktop it reaches about 20px. Left free to
   fill the column it would print its callouts at 28px, which is a poster, not a
   drawing. */
.figure svg { width: 100%; max-width: 460px; height: auto; display: block; }
.figure figcaption {
  margin-top: 14px; font-family: var(--label); font-size: 14px;
  color: var(--muted); max-width: 52ch; line-height: 1.6;
}
.l-note { font-family: 'DM Mono', 'DM Mono Fallback', monospace; font-size: 15px; fill: var(--muted); }
.l-dim { font-family: 'DM Mono', 'DM Mono Fallback', monospace; font-size: 14px; fill: var(--ink); }

/* -------------------------------------------- the form: dashed cells, label above */

.form { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .wide { grid-column: 1 / -1; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label {
  display: block; font-family: var(--label); font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; min-height: 50px;
  border: 1px dashed var(--muted); border-radius: var(--r);
  background: transparent; padding: 12px 14px; color: var(--ink);
  font: 300 18px/1.5 var(--read);
}
.field textarea { min-height: 120px; resize: vertical; }
/* The field answers focus by turning its dashed border solid and laying a 1px rule
   inside it, which is what DESIGN.md specifies. The outline is replaced, never removed:
   the result is a 2px perimeter at 5.8:1 and 12.9:1 on the ground. */
.field input:focus, .field textarea:focus {
  outline: none; border-style: solid; border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--error); border-style: solid; }
.hint { margin: 8px 0 0; font-family: var(--label); font-size: 14px; color: var(--muted); }
.err { margin: 8px 0 0; font-family: var(--label); font-size: 14px; color: var(--error); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form__status { margin: 0; font-family: var(--label); font-size: 15px; color: var(--body); }
.cf-turnstile {
  min-height: 65px; min-width: min(300px, 100%);
  display: flex; align-items: center;
}
.after {
  border: 1px dashed var(--rule); border-radius: var(--r); padding: 18px 20px;
  font-family: var(--label); font-size: 15px; color: var(--body);
  max-width: 52ch; line-height: 1.65; margin-top: 24px;
}
.after b {
  display: block; margin-bottom: 8px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}

/* ------------------------------------------------------ breadcrumbs and lists */

.crumbs {
  padding-top: 16px; font-family: var(--label); font-size: 14px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.crumbs a { border-bottom: 1px dashed var(--muted); padding-bottom: 2px; }
.crumbs a:hover { border-bottom-style: solid; }
.bullets { color: var(--body); }
.bullets li { padding-left: 22px; position: relative; margin-bottom: 12px; }
.bullets li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 9px; height: 9px; border-radius: var(--r); border: 1px solid var(--ink);
}
.slab .bullets { color: var(--on-ink-muted); }
.slab .bullets li::before { border-color: var(--on-ink-muted); }
.near { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .near { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.near a {
  display: block; padding: 20px 0; border-top: 1px dashed var(--rule);
  font-family: var(--label); font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em;
}
@media (min-width: 620px) { .near a { padding: 20px 24px; border-right: 1px dashed var(--rule); } }
@media (min-width: 620px) { .near a:last-child { border-right: 0; padding-right: 0; } }
@media (min-width: 620px) { .near a:first-child { padding-left: 0; } }
.near span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); text-transform: none; }

/* ------------------------------ footer: a specification of the site itself */

.foot {
  background: var(--ink); color: var(--on-ink);
  padding: 44px 0 34px; margin-top: var(--section);
}
.foot__grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  font-family: var(--label); font-size: 15px;
}
@media (min-width: 620px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.foot__col { min-width: 0; }
@media (min-width: 1024px) {
  .foot__col { border-right: 1px dashed var(--rule-ink); padding: 0 28px; }
  .foot__col:first-child { padding-left: 0; }
  .foot__col:last-child { border-right: 0; padding-right: 0; }
}
.foot__head {
  color: var(--on-ink-muted); margin-bottom: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.foot__col li { line-height: 2; }
.foot__col a:hover { border-bottom: 1px dashed var(--on-ink-muted); }
.foot__rule {
  margin-top: 36px; padding-top: 20px; border-top: 1px dashed var(--rule-ink);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between;
  font-family: var(--label); font-size: 14px; color: var(--on-ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.foot__age { font-size: 44px; color: var(--on-ink); line-height: 1; letter-spacing: 0; }

/* ------------------------------------------------------------------- motion */

/* The magnet moves the button with a transform the script sets. The starting state
   lives here, not in the script, so nothing flashes before the module arrives. */
[data-magnetic] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-magnetic] { transform: none !important; }
}