/* ==========================================================================
   CONCEPT 4 — "THE JOURNAL"
   The house as a privately printed periodical. A ruled masthead, a cover
   plate, numbered chapter bars, drop capitals and a dense two-column
   measure. The most typographic of the five: the craft is in the rules,
   the numerals and the setting rather than in effects.
   ========================================================================== */

body { background: linear-gradient(180deg, #EFF8EB 0%, #E8F6E3 20%, #EFF8EB 40%, #E3F5DE 58%, #EFF8EB 76%, #E6F6E1 90%, #DFEFD9 100%); }

.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 42rem; }
.measure--wide { max-width: 54rem; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .75rem 1.25rem; background: var(--forest); color: var(--mint-100); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; transition: top .25s ease; }
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   MASTHEAD — a printed nameplate
   -------------------------------------------------------------------------- */
.masthead { position: sticky; top: 0; z-index: 100; background: rgba(239,248,235,.97); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 3px double var(--rule-gilt); }
.strip { background: var(--forest); color: var(--ink-on-dark-2); font-size: .75rem; letter-spacing: .06em; }
.strip__inner { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.5rem); flex-wrap: wrap; min-height: 1.95rem; }
.strip__group { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.5rem); flex-wrap: wrap; }
.strip__locale { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-soft); }
.strip a { transition: color .3s ease; white-space: nowrap; }
.strip a:hover { color: var(--mint-100); }
.strip span { color: var(--gilt-soft); margin-right: .4em; letter-spacing: .14em; }
.strip__toggle { display: none; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt-soft); }
.strip a[href^="mailto"] { margin-left: auto; }

/* Tightened — the nameplate was taking 232px before the cover photograph even
   started. Same wordmark, less air, and the hero gets the difference. */
.masthead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: clamp(.6rem, 1.15vw, .95rem); }
.brand { grid-column: 2; justify-self: center; }
.brand img { width: clamp(12rem, 24vw, 19rem); }
.masthead__tools { grid-column: 3; justify-self: end; display: flex; gap: .5rem; }
.icon-btn { display: none; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--rule); color: var(--ink); transition: border-color .3s ease, color .3s ease; }
.icon-btn:hover { border-color: var(--gilt); color: var(--gilt-ink); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.masthead__tools .icon-btn:first-child { display: inline-grid; }

.nav { border-top: 1px solid var(--rule-gilt); }
.nav__list { display: flex; align-items: stretch; justify-content: space-between; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); flex-wrap: nowrap; }
.nav__item { position: relative; flex: 1; display: flex; }
.nav__item + .nav__item { border-left: 1px solid var(--rule); }
.nav__link { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; padding: .72rem .5rem; font-size: clamp(.5625rem, .5rem + .12vw, .6875rem); font-weight: 500; letter-spacing: clamp(.06em, .02em + .08vw, .14em); text-transform: uppercase; color: var(--ink); text-align: center; transition: background-color .3s ease, color .3s ease; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--mint-200); color: var(--gilt-ink); }
.nav__caret { width: .45rem; height: .45rem; opacity: .55; transition: transform .35s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__cta { flex: 0 0 auto; }
.nav__cta .nav__link { background: var(--forest); color: var(--mint-100); padding-inline: clamp(.8rem, 1.4vw, 1.6rem); }
.nav__cta .nav__link:hover { background: var(--gilt-ink); color: var(--mint-100); }

.submenu { position: absolute; top: 100%; left: 0; min-width: 15rem; padding: .5rem 0; background: var(--paper); border: 1px solid var(--rule-gilt); box-shadow: 0 18px 46px rgba(56,77,52,.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s ease, transform .3s var(--ease), visibility .3s; z-index: 5; }
.nav__item:hover > .submenu, .nav__item:focus-within > .submenu, .submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: .6rem 1.2rem; font-size: .78rem; color: var(--ink-2); transition: background-color .3s ease, color .3s ease; }
.submenu a:hover { background: var(--mint-200); color: var(--forest); }

.search { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.search.is-open { grid-template-rows: 1fr; border-top: 1px solid var(--rule); }
.search__inner { overflow: hidden; }
.search__form { display: flex; align-items: center; gap: 1rem; padding-block: clamp(.9rem, 2vw, 1.5rem); }
.search__form input { flex: 1; min-width: 0; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; font-family: var(--serif); font-size: clamp(1rem, .95rem + .5vw, 1.4rem); color: var(--ink); }
.search__form input:focus { outline: none; border-bottom-color: var(--gilt); }

/* --------------------------------------------------------------------------
   HERO — the cover plate
   -------------------------------------------------------------------------- */
/* The cover runs the full width of the screen, edge to edge. */
.hero { padding: 0; }
.hero > .wrap { max-width: none; padding-inline: 0; }
/* Exactly the screen left below the chrome. Concept 4's utility strip sits
   inside the sticky masthead, so --header-h already measures both. */
.hero__cover { position: relative; isolation: isolate; min-height: calc(100svh - var(--header-h, 9rem)); display: grid; align-items: end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,63,43,.68) 0%, rgba(46,63,43,.50) 30%, rgba(46,63,43,.68) 64%, rgba(46,63,43,.92) 100%);
}
.hero__mount { position: absolute; inset: clamp(.85rem, 1.7vw, 1.6rem); z-index: 2; pointer-events: none; border: 1px solid var(--mount); }
.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 78rem; margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem) var(--gutter);
}
.hero .eyebrow { color: #DAC79E; }
.hero__title { color: var(--mint-100); margin-bottom: clamp(1rem, 2vw, 1.75rem); max-width: 19ch; }
.hero__sub { max-width: 38rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.72; color: rgba(230,248,225,.95); }
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --------------------------------------------------------------------------
   CHAPTERS — a numbered, ruled periodical
   -------------------------------------------------------------------------- */
.chapter { max-width: 78rem; margin-inline: auto; padding: clamp(2.5rem, 5vw, 5rem) var(--gutter); }
.chapter__mark {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: .8125rem; letter-spacing: .3em;
  color: var(--gilt-ink); text-transform: uppercase;
  padding-bottom: .7rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 3px double var(--rule-gilt);
}
.chapter__mark::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* A passage standing on its own is centred in the measure, so the space falls
   evenly either side instead of piling up down the right. */
.chapter__body > .prose,
.chapter__body > .lede,
.chapter__body > .note { margin-inline: auto; }
.chapter__body > .lede { text-align: center; }
.chapter__body > p:not([class]) { text-align: center; margin-inline: auto; max-width: 46rem; }

/* Drop capital on the opening paragraph of a passage. */
.prose > p:first-child::first-letter {
  float: left; font-family: var(--serif); font-size: 3.4em; line-height: .82;
  padding: .06em .12em 0 0; color: var(--forest);
}
.card .prose > p:first-child::first-letter, .step p::first-letter, .note::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; }

.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3.5vw, 3.25rem); align-items: start; }
.pair--top { align-items: start; }
@media (min-width: 62rem) {
  .pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .pair > figure { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.25rem); }
  .pair > figure[style*="order"] { border-left: 0; border-right: 1px solid var(--rule); padding-left: 0; padding-right: clamp(1.25rem, 2.5vw, 2.25rem); }
}

.rule-h { height: 1px; background: var(--rule-gilt); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   COMPONENTS — ruled, dense, typographic
   -------------------------------------------------------------------------- */
.index { border-top: 1px solid var(--rule-gilt); }
.index li { border-bottom: 1px solid var(--rule); }
.index a { display: flex; align-items: baseline; gap: clamp(.7rem, 1.6vw, 1.2rem); padding: clamp(.7rem, 1.4vw, 1rem) 0; font-family: var(--serif); font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.3; color: var(--ink); transition: color .3s ease, padding-left .35s var(--ease); }
.index a:hover { color: var(--gilt-ink); padding-left: .5rem; }
.index__mark { flex: none; font-size: .55em; color: var(--gilt); transform: translateY(-.15em); }
.index__arrow { flex: none; margin-left: auto; font-size: .8rem; color: var(--gilt-ink); opacity: .45; transition: opacity .35s ease; }
.index a:hover .index__arrow { opacity: 1; }
.index--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: clamp(1.5rem, 3.5vw, 3rem); border-top: 1px solid var(--rule-gilt); }
.spec li { border-bottom: 1px solid var(--rule); }
.spec__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .7rem 0; }
a.spec__row:hover .spec__k { color: var(--gilt-ink); }
.spec__k { font-family: var(--serif); font-size: clamp(.98rem, .93rem + .25vw, 1.1rem); line-height: 1.25; color: var(--ink); }
.spec__bar { display: none; }
.spec__v { font-size: .82rem; line-height: 1.55; color: var(--ink-3); }

.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.25rem, 2.5vw, 2rem); border-block: 1px solid var(--rule-gilt); }
.press li { flex: 0 1 6.5rem; display: grid; place-items: center; }
.press img { width: 100%; max-width: 7.5rem; filter: brightness(0); opacity: .48; transition: opacity .4s ease; }
.press li:hover img { opacity: .92; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; border-top: 1px solid var(--rule-gilt); }
.step { display: grid; gap: .85rem; align-content: start; padding: clamp(1.25rem, 2.4vw, 1.85rem) clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--rule); }
.step + .step { border-left: 1px solid var(--rule); }
.step__disc { width: clamp(3.25rem, 5vw, 4.25rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--rule-gilt); }
.step__disc img { width: 58%; height: 58%; object-fit: contain; mix-blend-mode: multiply; opacity: .82; }
.step__num { font-family: var(--serif); font-size: .95rem; color: var(--gilt-ink); letter-spacing: .1em; }
.step p { font-size: .875rem; line-height: 1.7; }

.quote { padding-block: clamp(1.5rem, 3vw, 2.5rem); border-block: 3px double var(--rule-gilt); text-align: center; }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1rem + .95vw, 1.85rem); line-height: 1.42; color: var(--ink); max-width: 42rem; margin-inline: auto; }

.card { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); border: 3px double var(--rule-gilt); background: rgba(246,252,244,.7); }
.card > * + * { margin-top: clamp(.85rem, 1.7vw, 1.3rem); }
.ticks { display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .8em; font-size: .9rem; line-height: 1.6; }
.ticks li::before { content: "\2756"; flex: none; font-size: .58em; line-height: 2.5; color: var(--gilt); }

.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: clamp(1.5rem, 3.5vw, 3rem); border-top: 1px solid var(--rule-gilt); }
.defs li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.defs__k { display: block; font-family: var(--serif); font-size: clamp(1rem, .95rem + .28vw, 1.18rem); color: var(--ink); }
.defs__dash { color: var(--gilt-ink); }
.defs__v { display: block; margin-top: .3rem; font-size: .85rem; line-height: 1.62; color: var(--ink-3); }

.disclaimer { padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--rule-gilt); border-left: 3px solid var(--gilt); background: var(--mint-200); font-family: var(--serif); font-style: italic; font-size: clamp(.9375rem, .9rem + .25vw, 1.05rem); line-height: 1.65; color: var(--ink); }

.cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); column-gap: clamp(1.5rem, 3.5vw, 3rem); border-top: 1px solid var(--rule-gilt); }
.cities li { border-bottom: 1px solid var(--rule); }
.cities a { display: flex; align-items: baseline; gap: .6em; padding: .75rem 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .55vw, 1.55rem); line-height: 1.2; color: var(--ink); transition: color .3s ease, padding-left .35s var(--ease); }
.cities a:hover { color: var(--gilt-ink); padding-left: .5rem; }
.cities__mark { font-size: .4em; color: var(--gilt); transform: translateY(-.35em); }

.collection { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); }
.collection figcaption { padding-top: .85rem; border-top: 1px solid var(--rule); margin-top: .85rem; }
.collection__k { display: block; font-family: var(--serif); font-size: clamp(1rem, .95rem + .28vw, 1.18rem); line-height: 1.25; color: var(--ink); }
.collection__colon { color: var(--gilt-ink); }
.collection__v { display: block; margin-top: .3rem; font-size: .82rem; line-height: 1.6; color: var(--ink-3); }

.contact-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: clamp(1.75rem, 4vw, 3.5rem); row-gap: .7rem; }
.contact-line { display: flex; align-items: baseline; gap: .9em; font-size: .9375rem; }
.contact-label { flex: none; min-width: 3.25rem; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gilt-ink); }
.contact-line a { color: var(--ink); transition: color .3s ease; }
.contact-line a:hover { color: var(--gilt-ink); }

/* --------------------------------------------------------------------------
   FOOTER — the colophon
   -------------------------------------------------------------------------- */
.foot { background: linear-gradient(180deg, #DFEFD9, #D6E9CF); position: relative; z-index: 4; padding-inline: var(--gutter); border-top: 3px double var(--rule-gilt); }
.foot > * { max-width: 78rem; margin-inline: auto; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.foot__h { margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule-gilt); font-family: var(--serif); font-size: 1rem; color: var(--forest); }
.foot__links { display: grid; gap: .22rem; }
.foot__links a { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); transition: color .3s ease; }
.foot__links a:hover { color: var(--gilt-ink); }
.foot__note { font-size: .8125rem; color: var(--ink-3); }
.foot__tel { display: grid; gap: .35rem; margin-top: .7rem; }
.foot__tel a, .foot__mail a { font-size: .9rem; color: var(--ink); transition: color .3s ease; }
.foot__tel a:hover, .foot__mail a:hover { color: var(--gilt-ink); }
.foot__tel span { color: var(--gilt-ink); margin-right: .5em; font-size: .6875rem; letter-spacing: .18em; }
.foot__mail { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot__social { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--rule-gilt); color: var(--ink); transition: border-color .3s ease, color .3s ease; }
.foot__social:hover { border-color: var(--gilt); color: var(--gilt-ink); }
.foot__social svg { width: 1rem; height: 1rem; }
.pay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pay li { padding: .35rem .7rem; border: 1px solid var(--rule-gilt); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.foot__base { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--rule-gilt); }
/* The wordmark fills its quarter of the base bar, aligned to the same left
   edge as the columns above it — otherwise it floats mid-column and opens a
   gap beside the copyright that the locale side does not have. */
.foot__brand { justify-self: start; width: 100%; }
.foot__brand img { width: min(100%, 15.5rem); opacity: .95; }
.foot__copy { font-size: .72rem; line-height: 1.7; color: var(--ink-3); text-align: center; }
.foot__locale { display: flex; gap: clamp(.9rem, 2vw, 1.5rem); flex-wrap: wrap; justify-self: end; }
.foot__locale a { display: inline-flex; align-items: center; gap: .55em; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); transition: color .3s ease; }
.foot__locale a:hover { color: var(--gilt-ink); }
.foot__flag { width: 1.2rem; flex: none; border: 1px solid rgba(56,77,52,.22); }

/* --------------------------------------------------------------------------
   DRAWER
   -------------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 150; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-1.25rem); transition: opacity .4s ease, transform .5s var(--ease), visibility .4s; padding-inline: var(--gutter); }
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.drawer__top img { width: 9.5rem; }
.drawer__top .icon-btn { display: inline-grid; }
.drawer__nav { padding-block: clamp(1.25rem, 4vw, 2.5rem) 3rem; }
.drawer__group + .drawer__group { border-top: 1px solid var(--rule); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); text-align: left; }
.drawer__head svg { width: .7rem; height: .7rem; color: var(--gilt); transition: transform .35s var(--ease); }
.drawer__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.drawer__panel.is-open { grid-template-rows: 1fr; }
.drawer__panel > ul { overflow: hidden; }
.drawer__panel a { display: block; padding: .55rem 0 .55rem 1.1rem; font-size: .9375rem; color: var(--ink-2); border-left: 1px solid var(--rule); }
.drawer__panel li:last-child a { margin-bottom: .9rem; }
.drawer__contact { padding-block: 1.5rem; border-top: 1px solid var(--rule); display: grid; gap: .45rem; font-size: .875rem; }

@media (max-width: 68rem) {
  .nav { display: none; }
  .masthead__tools .icon-btn { display: inline-grid; }
  .masthead__row { grid-template-columns: auto 1fr auto; }
  .brand { grid-column: 1; justify-self: start; }
}
@media (max-width: 48rem) {
  .strip__group { display: none; }
  .strip__group.is-open { display: flex; width: 100%; padding-bottom: .6rem; }
  .strip__toggle { display: inline-flex; }
  .strip a[href^="mailto"] { margin-left: 0; }
  .step + .step { border-left: 0; }
  .foot__base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__locale { justify-self: center; }
  .contact-grid { grid-template-columns: auto; }
}

/* Opening sequence */
.js .hero__media img { transform: scale(1.06); }
.js .hero.is-ready .hero__media img { transform: scale(1); transition: transform 2.8s cubic-bezier(.16,1,.3,1); }
.js .hero__inner > * { opacity: 0; transform: translateY(16px); }
.js .hero.is-ready .hero__inner > * { animation: rise .95s var(--ease) forwards; }
.js .hero.is-ready .hero__inner > *:nth-child(1) { animation-delay: .12s; }
.js .hero.is-ready .hero__inner > *:nth-child(2) { animation-delay: .26s; }
.js .hero.is-ready .hero__inner > *:nth-child(3) { animation-delay: .40s; }
.js .hero.is-ready .hero__inner > *:nth-child(4) { animation-delay: .54s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero__inner > * { opacity: 1; transform: none; } .js .hero__media img { transform: none; } }

/* --------------------------------------------------------------------------
   SECTION TEXT TAKES THE FULL WIDTH OF ITS CHAPTER
   A 42-46rem cap left a third of a widescreen empty on either side of every
   paragraph, so the copy read as crumpled into the middle of the page. The cap
   is lifted at the container, which catches every kind of text block in one
   place — prose wrappers, single paragraphs, ledes and standfirsts alike —
   rather than relying on a utility class being present on each one.
   The centred quotations keep their own measure: those are interludes, and a
   quotation running the full width of a widescreen stops reading as a quote.
   -------------------------------------------------------------------------- */
.chapter__body > .measure,
.chapter__body > .prose,
.chapter__body > .lede,
.chapter__body > p,
.chapter__body > .note,
.chapter__body > .disclaimer { max-width: none; }

/* --------------------------------------------------------------------------
   BALANCED COLUMNS
   `auto-fit` fits as many columns as will physically go, which for a four-item
   list at this width means three across and one stranded on a row of its own.
   A count that divides the item count evenly is the only thing that reads as
   composed, so four items are laid two-by-two and drop to one column on a
   phone. Never three.
   -------------------------------------------------------------------------- */
.defs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 44rem) { .defs { grid-template-columns: minmax(0, 1fr); } }

/* Six collection cards under `auto-fit` came out four across with two
   stranded beneath, and the ragged second row is what reads as cards
   overlapping. Three across divides six exactly; two across does the same on
   a tablet. */
.collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .collection { grid-template-columns: minmax(0, 1fr); } }