/* ==========================================================================
   Luigi's Pizza & Pasta — concept site
   One hand-written stylesheet. No bundler, no framework, no utility classes.

   Design notes, so the next person does not undo them by accident:

   - ONE accent colour, and it is earned. The red is the red of the checked
     vinyl tablecloths in their own dining room and of the sauce on their own
     plates. It is not "Italian restaurant red", and there is deliberately no
     green-white-red tricolour anywhere.
   - No gradients as a design device. Texture instead: a faint paper grain and
     one gingham rule that quotes the real tablecloth. Used as a thin divider,
     never as a background wash — the point is to reference the room, not to
     costume the page.
   - Type has character on purpose. A heavy grotesk for headings (American
     signage, delis, catalogue covers) against a warm serif for reading. No
     Inter, no Poppins, no rounded-2xl-plus-soft-shadow on every surface.
   - Rhythm varies. Full-bleed, then tight, then generous. Sections are not
     all the same height with the same padding.
   - The menu is set like a printed menu: dotted price leaders, two columns
     when there is room, generous type. It is the reason the site exists.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root {
  --ink:        #17120f;
  --ink-soft:   #4a413a;
  --ink-faint:  #6e635a;   /* AA on paper, paper-warm AND paper-deep (4.52:1 worst case) */

  --paper:      #faf6ef;
  --paper-warm: #f3ece1;
  --paper-deep: #ebe1d2;

  --red:        #b4231d;
  --red-dark:   #8d1a15;
  --red-tint:   #f7e6e3;

  --rule:       #ddd2c1;

  --font-display: 'Franklin Gothic Medium', 'Franklin Gothic', 'Arial Narrow',
                  'Helvetica Neue Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', 'Times New Roman', serif;

  --wrap:  74rem;
  --gut:   clamp(1.15rem, 4vw, 2.5rem);

  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.38vw, 1.42rem);
  --step-2: clamp(1.5rem, 1.33rem + 0.8vw, 2rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.7vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);
}

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Faint paper grain. Texture, not gradient. */
  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='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red-dark); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.017em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.008em; }

p { margin: 0 0 1em; }

.wrap {
  width: min(100% - (var(--gut) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap.narrow { max-width: 44rem; }

/* Visually hidden, still read aloud. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 100;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42ch;
}

.meta {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The gingham rule — quotes the real tablecloth. Used as a divider only.
   Two translucent passes so the overlaps darken, which is what makes a check
   read as a check. A solid pass in each direction just paints a red bar: at
   this height the horizontal band covers the whole strip. */
.band-menu, .band-fish, .footer { position: relative; }
.band-menu::before, .band-fish::before, .footer::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 12px;
  background-color: var(--paper-warm);
  background-image:
    repeating-linear-gradient(90deg, rgba(180, 35, 29, 0.55) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(0deg,  rgba(180, 35, 29, 0.55) 0 6px,  transparent 6px 12px);
}

/* -------------------------------------------------------------- concept -- */

.concept {
  background: var(--ink);
  color: #f0e7db;
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 0.5rem 0;
}
.concept strong { color: #fff; display: block; }
.concept span { color: #cabfb2; }
.concept a { color: #fff; }
@media (min-width: 48rem) {
  .concept strong { display: inline; margin-right: 0.4em; }
}

/* ------------------------------------------------------------- masthead -- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
}
/* Phones get the name on its own line. Sharing the row with the phone number
   and the order button squeezed "Luigi's Pizza & Pasta" onto three lines. */
.masthead-in {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding-block: 0.7rem;
}
@media (min-width: 30rem) {
  .masthead-in { grid-template-columns: 1fr auto; }
}

.brand { text-decoration: none; color: inherit; display: block; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-town {
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--red-dark);
  margin-top: 0.28rem;
}

.nav { grid-column: 1 / -1; order: 3; }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.35rem;
}
.nav a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.83rem;
  text-decoration: none;
  color: var(--ink);
  /* 44px minimum tap target. These were 32px, which is a miss on a phone,
     and this site gets used on a phone more than anywhere else. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--red); color: var(--red-dark); }

/* --------------------------------------------------- collapsed nav (phones) --
   Below 48rem the four secondary destinations fold behind a toggle. "Menu"
   and the phone number stay in the bar: on a restaurant site those are the
   two things people came for, and this site's entire argument is that the
   menu should be easy to find.

   Everything here is gated on `.js`. With JS off the toggle stays `hidden`,
   no rule below applies, and the nav is the plain wrapping list it was. */

.nav-toggle {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0 0.2rem;
  min-height: 44px;
  /* Shown only below 48rem, and only once JS has removed [hidden]. An author
     `display` beats the hidden attribute, so the :not([hidden]) guard is what
     stops the button appearing before it is wired up. */
  display: none;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--red); }

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 14px;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 140ms ease, opacity 140ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 47.999rem) {
  .js .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.35rem;
  }
  .js .nav ul { border-top: 0; padding-top: 0; flex: 1 1 auto; }

  .js .nav-toggle:not([hidden]) { display: inline-flex; }

  /* Collapsed: only the primary link shows, and it leads the row. */
  .js .nav-secondary { display: none; }
  .js .nav-primary a { font-weight: 700; }

  /* Expanded: the links stack and the toggle stays put at the top right.
     Letting it wrap to the bottom moved the control the moment you used it. */
  .js .nav[data-open="true"] { align-items: flex-start; }
  .js .nav[data-open="true"] .nav-secondary { display: block; }
  .js .nav[data-open="true"] ul {
    flex-wrap: wrap;
    gap: 0;
  }
  .js .nav[data-open="true"] li { flex: 0 0 100%; }
  .js .nav[data-open="true"] li + li a { border-top: 1px solid var(--rule); }
  .js .nav[data-open="true"] li a {
    display: flex;
    width: 100%;
  }
}

.masthead-cta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; justify-content: flex-start; }
@media (min-width: 30rem) {
  .masthead-cta { justify-content: flex-end; }
}

.tel {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  /* A phone number on a restaurant site is a primary action, not body text. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.tel:hover { color: var(--red); }
.tel-big { font-size: var(--step-2); color: var(--red-dark); }

@media (min-width: 62rem) {
  .masthead-in { grid-template-columns: auto 1fr auto; padding-block: 1.15rem; }
  .nav { grid-column: auto; order: 0; justify-self: center; }
  .nav ul { border-top: 0; padding-top: 0; }
}

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.72rem 1.25rem;
  border: 2px solid var(--ink);
  min-height: 44px;               /* thumb target */
  line-height: 1.5;
}
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-order { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-order:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ----------------------------------------------------------------- hero -- */
/* Asymmetric on purpose: the photograph is the argument. */

.hero { display: grid; }
.hero-media { order: 1; }
.hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-copy {
  order: 2;
  padding: clamp(1.6rem, 5vw, 3.4rem) var(--gut) clamp(2rem, 5vw, 3.6rem);
  background: var(--paper-warm);
}
.hero h1 { margin-bottom: 0.4em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.hero-cap {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faint);
}

@media (min-width: 60rem) {
  /* Proportional columns: the photograph holds a constant 46.5% of the hero at
     every width. An earlier pass capped the copy column at `min(43rem, 52%)`
     to close the strip of dead space between the last word and the photo, but
     that handed every extra pixel to the image — 48% of the hero at 1280, 64%
     at 1920, 73% at 2560 — and the hero grew to 924px then 1404px tall to
     match it. The gap is closed below instead, by letting the copy fill its
     column rather than by shrinking the column. */
  .hero { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .hero-media { order: 2; }
  .hero-media img { height: 100%; aspect-ratio: auto; min-height: 32rem; }
  .hero-copy {
    order: 1;
    display: flex; flex-direction: column; justify-content: center;
    /* Asymmetric: generous on the outside edge, tighter against the
       photograph, so the copy reads as set against the image rather than
       floating away from it. */
    padding-inline: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 3.5vw, 3rem);
  }
  /* The headline sets to the full width of the column — that is what closes
     the gap, and it is why the column can stay proportional. A 56rem cap was
     tried here and rejected: it put the dead strip straight back above 2100px
     (155px at 2100, 401px at 2560) for no gain, since a display headline
     reads fine at that measure and still only runs to two lines.
     The lede is the exception and keeps a 34rem measure — running body copy
     the full width of the column would be ~120 characters a line. */
  .hero-copy > * { max-width: none; }
  .hero-copy .lede { max-width: 34rem; }
}

/* ---------------------------------------------------------------- bands -- */

.band { padding-block: clamp(2.6rem, 6vw, 5rem); }
.band-menu  { background: var(--paper); }
.band-fish  { background: var(--paper-deep); }
.band-plates{ padding-block: clamp(2rem, 4vw, 3.4rem); }
.band-visit { background: var(--ink); color: var(--paper); padding-block: clamp(2.4rem, 5vw, 4rem); }
.band-visit h2 { color: #fff; }
.band-visit a { color: #ffb3ad; }
.band-visit .tel-big { color: #fff; }
.band-visit .hours-row { border-color: #362d26; }
.band-visit dt { color: #cbbfb2; }

.band-head { margin-bottom: 2rem; }
.band-note { color: var(--ink-faint); font-style: italic; }

/* ------------------------------------------------------- category grid -- */

/* Rules are drawn per-cell, not with a background showing through 1px gaps:
   fifteen sections never divide evenly into the column count, and a gap-based
   grid paints its leftover cells in the rule colour. */
.catgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
}
.catgrid a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 1.05rem 1.15rem;
  text-decoration: none;
  min-height: 44px;
}
.catgrid a:hover { background: var(--red); }
.catgrid a:hover .catgrid-name,
.catgrid a:hover .catgrid-count { color: #fff; }
.catgrid-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.catgrid-count {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ fish band -- */

.fish-in { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.fish-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 54rem) {
  .fish-in { grid-template-columns: 1fr 1.1fr; align-items: center; }
  .fish-media img { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------- plates -- */

.plates {
  display: grid;
  gap: clamp(0.7rem, 2vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.plate { margin: 0; }
.plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.plate figcaption {
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding-top: 0.55rem;
  font-style: italic;
}

/* ------------------------------------------------------------ page head -- */

.pagehead { padding-block: clamp(1.8rem, 5vw, 3.2rem) 1.4rem; }
.pagehead .meta { margin-top: 0.8rem; }

.crumbs {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding-top: 1.4rem;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink); }

/* ----------------------------------------------------------- jump links -- */

.jump { border-block: 1px solid var(--rule); padding-block: 0.9rem; margin-bottom: 2.4rem; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.15rem; }
.jump a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  color: var(--ink-soft);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.jump a:hover { color: var(--red); }

/* ----------------------------------------------------------- menu items -- */
/* Set like a printed menu: dotted leaders, tabular prices, two columns when
   there is room. Not a grid of identical cards. */

.section { margin-bottom: clamp(2.4rem, 5vw, 4rem); scroll-margin-top: 1.5rem; }
.section-head { border-bottom: 2px solid var(--ink); padding-bottom: 0.6rem; margin-bottom: 1.4rem; }
.section-head h2 { margin-bottom: 0.15em; }
.section-head h2 a { color: inherit; text-decoration: none; }
.section-head h2 a:hover { color: var(--red); }
.section-blurb { color: var(--ink-faint); font-style: italic; margin: 0; }

.items { list-style: none; margin: 0; padding: 0; }
@media (min-width: 56rem) {
  .items { columns: 2; column-gap: 3.2rem; }
}

.item {
  break-inside: avoid;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.item-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
/* The dotted leader — a real menu detail, and it does the alignment work. */
.item-head::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: flex-end;
  margin-bottom: 0.28em;
  border-bottom: 1px dotted var(--rule);
}
.item-name {
  order: 1;
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
  flex: 0 1 auto;
}
.item-price {
  order: 3;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--red-dark);
}
.item-bysize {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 400;
}
.item-desc {
  margin: 0.3rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.item-note {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red-dark);
}
.item-off .item-name { color: var(--ink-soft); }

.pricenote {
  font-size: 0.87rem;
  font-style: italic;
  color: var(--ink-faint);
  border-left: 3px solid var(--rule);
  padding-left: 1rem;
  max-width: 50ch;
}

.cat-media { margin: 0 0 2rem; }
.cat-media img { width: 100%; max-height: 22rem; object-fit: cover; object-position: center 45%; }
.cat-media figcaption {
  font-size: 0.85rem; font-style: italic; color: var(--ink-faint); padding-top: 0.55rem;
}

.order-out {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.6rem 2.4rem;
  border-top: 1px solid var(--rule);
}
.order-note { font-size: 0.85rem; color: var(--ink-faint); font-style: italic; }

.sib { border-top: 1px solid var(--rule); padding-block: 1.6rem 2.6rem; }
.sib h2 { font-size: var(--step-1); }
.sib ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.sib a { font-family: var(--font-display); font-size: 0.88rem; }

/* ---------------------------------------------------------------- hours -- */

.hours { margin: 0; }
.hours-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--rule);
}
.hours dt { font-family: var(--font-display); letter-spacing: 0.02em; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.hours-unknown {
  color: var(--red-dark);
  font-style: italic;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------- visit -- */

.visit-in { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 48rem) { .visit-in { grid-template-columns: 1fr 1fr; } }
.addr-big { font-size: var(--step-1); line-height: 1.35; }

/* ---------------------------------------------------------------- prose -- */

.prose { max-width: 38rem; font-size: var(--step-1); line-height: 1.62; }
.prose p { margin-bottom: 1.1em; }

/* --------------------------------------------------------------- footer -- */

.footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-h {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { padding-block: 0; }
.footer-list a {
  font-size: 0.93rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.addr { line-height: 1.5; }
.footer-col > p > a:not(.tel) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.disclaimer {
  border-top: 1px solid var(--rule);
  padding-block: 1.3rem 2.2rem;
}
.disclaimer p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0;
}

/* --------------------------------------------------------- preferences -- */

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

@media print {
  .concept, .masthead-cta, .jump, .order-out, .sib, .skip { display: none; }
  body { background: #fff; }
}