/* ==========================================================================
   CONCEPT 3 — "THE SALON"
   Everything is laid, not stacked. Photographs and text plates overlap one
   another on a mint field the way prints and letters lie on a desk, so the
   page has real depth without a single heavy fill. The masthead floats over
   the opening photograph and settles onto paper as you begin to read.
   ========================================================================== */

body { background: linear-gradient(180deg, #EFF8EB 0%, #E6F6E1 14%, #EFF8EB 30%, #E2F3DD 48%, #EFF8EB 66%, #E5F6E0 84%, #DFEFD9 100%); }

.wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); }
.band { }
.measure { max-width: 44rem; }
.measure--wide { max-width: 56rem; }

.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 — floats on the photograph, settles onto paper
   -------------------------------------------------------------------------- */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color .5s ease, box-shadow .5s ease; }
/* While the masthead floats on the photograph its type is reversed out, so
   it needs a scrim of its own — 7.9:1 worst case rather than 2.7:1. */
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(46,63,43,.86) 0%, rgba(46,63,43,.62) 62%, rgba(46,63,43,.18) 100%);
  transition: opacity .5s ease;
}
.masthead.is-scrolled::before { opacity: 0; }
.masthead.is-scrolled { background: rgba(239, 248, 235, .96); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 26px rgba(56, 77, 52, .09); }

.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: 2.5rem; }
.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; }

.masthead__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(.85rem, 1.8vw, 1.35rem); }
/* `flex: none` is load-bearing. As a plain flex item the anchor shrinks to its
   minimum, and the global `img { max-width: 100% }` then shrinks the logo to
   match — it was rendering at 66x11px, which is why the header read as having
   no logo at all. */
.brand { flex: none; display: block; }
.brand img { display: block; width: clamp(9.5rem, 15vw, 13rem); height: auto; transition: filter .5s ease; }
.masthead:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.masthead__tools { 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 svg { width: 1.05rem; height: 1.05rem; }
.masthead:not(.is-scrolled) .icon-btn { border-color: rgba(255,255,255,.45); color: var(--mint-100); }
.masthead__tools .icon-btn:first-child { display: inline-grid; }

.nav__list { display: flex; align-items: center; gap: clamp(.55rem, 1.35vw, 1.7rem); flex-wrap: nowrap; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: .45em; padding: .8rem 0; font-size: clamp(.625rem, .55rem + .1vw, .6875rem); font-weight: 500; letter-spacing: clamp(.09em, .03em + .1vw, .16em); text-transform: uppercase; color: var(--ink); white-space: nowrap; position: relative; transition: color .3s ease; }
.masthead:not(.is-scrolled) .nav__link { color: var(--mint-100); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: currentColor; opacity: .7; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__caret { width: .5rem; height: .5rem; opacity: .55; transition: transform .35s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__cta .nav__link { padding: .65rem clamp(.8rem, 1.1vw, 1.3rem); border: 1px solid currentColor; }
.nav__cta .nav__link::after { display: none; }
.nav__cta .nav__link:hover { background: var(--forest); border-color: var(--forest); color: var(--mint-100); }

.submenu { position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 15rem; padding: .55rem 0; background: var(--paper); border: 1px solid var(--rule); 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; }
.nav__item:hover > .submenu, .nav__item:focus-within > .submenu, .submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: .65rem 1.35rem; font-size: .78rem; color: var(--ink-2); transition: background-color .3s ease, color .3s ease, padding-left .3s var(--ease); }
.submenu a:hover { background: var(--mint-200); color: var(--forest); padding-left: 1.7rem; }

.search { display: grid; grid-template-rows: 0fr; background: var(--paper); 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 — full screen, type centred on the photograph
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; 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 24%; }
/* The film is masked away over its bottom third, so it dissolves straight
   into the page. No green shelf underneath the hero, and nothing tinting the
   section that follows. */
.hero__media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.5) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.5) 78%, transparent 100%);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(46,63,43,0) 6%, rgba(46,63,43,.52) 22%, rgba(46,63,43,.62) 46%, rgba(46,63,43,.54) 64%, rgba(46,63,43,0) 78%),
    linear-gradient(180deg, rgba(46,63,43,.62) 0%, rgba(46,63,43,.50) 44%, rgba(46,63,43,.54) 100%);
}
.hero__mount { position: absolute; inset: clamp(.85rem, 1.7vw, 1.6rem); z-index: 2; pointer-events: none; border: 1px solid var(--mount); border-bottom-color: transparent; }
.hero__inner { position: relative; z-index: 3; text-align: center; padding-block: 0 clamp(7rem, 20vh, 13rem); }
.hero .eyebrow { color: #DAC79E; }
.hero__title { color: var(--mint-100); margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.hero__sub { max-width: 40rem; margin-inline: auto; font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); line-height: 1.7; color: rgba(230,248,225,.95); }
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --------------------------------------------------------------------------
   CHAPTERS — laid plates, not stacked blocks
   -------------------------------------------------------------------------- */
.chapter { position: relative; padding-block: clamp(3.5rem, 7vw, 7.5rem); padding-inline: var(--gutter); max-width: 82rem; margin-inline: auto; }

/* The numeral sits ON the plate but UNDER the words — printed into the paper
   rather than hidden behind it. For that ordering to be possible the plate
   must NOT open a stacking context of its own, or everything inside it would
   be sealed above or below the numeral together. Hence: plate paints in tree
   order, numeral at 2, the plate's own words lifted to 3. */
.chapter__mark {
  position: absolute; top: clamp(.9rem, 2.2vw, 2.25rem); left: clamp(1rem, 3vw, 3.25rem);
  font-family: var(--serif); font-size: clamp(4.5rem, 10vw, 9rem); line-height: 1;
  color: var(--forest); opacity: .12; pointer-events: none; z-index: 2;
}
.chapter__body { position: relative; }

/* The overlap: text plate and photograph share ground and lean on each other. */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.pair--top { align-items: start; }
.pair > div:not([class]), .pair > .card {
  position: relative;
  background: rgba(246, 252, 244, .88);
  backdrop-filter: blur(14px);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  box-shadow: 0 40px 90px -60px rgba(56, 77, 52, .55);
}
.pair > div:not([class]) > *, .pair > .card > * { position: relative; z-index: 3; }
.pair > figure { position: relative; z-index: 1; }
@media (min-width: 62rem) {
  .pair { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .pair > div:not([class]), .pair > .card { margin-right: clamp(-4rem, -4vw, -1.5rem); }
  .pair > figure[style*="order"] { margin-right: 0; }
}

.bleed { }

/* A passage standing on its own is laid on a plate and centred, like every
   other element in this concept. Left-aligned text in a full-width chapter
   leaves a void down the right side; a centred plate reads as placed. */
.chapter__body > .prose,
.chapter__body > .lede {
  max-width: 54rem;
  margin-inline: auto;
  background: rgba(246, 252, 244, .86);
  backdrop-filter: blur(14px);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  box-shadow: 0 40px 90px -60px rgba(56, 77, 52, .5);
}
.chapter__body > .lede { text-align: center; }

/* Anything that trails a section — a call to action, the note under it —
   centres beneath the plate rather than hanging off its left edge. */
.chapter__body > p:not([class]),
.chapter__body > .note { text-align: center; margin-inline: auto; max-width: 46rem; }

/* A brass hairline closes the document before the footer begins. */
.foot { border-top: 2px solid var(--gilt); }

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

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
.index { border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--rule); }
.index a { display: flex; align-items: baseline; gap: clamp(.8rem, 2vw, 1.4rem); padding: clamp(.9rem, 1.9vw, 1.4rem) clamp(.5rem, 1.4vw, 1.1rem); font-family: var(--serif); font-size: clamp(1.02rem, .95rem + .42vw, 1.35rem); line-height: 1.3; color: var(--ink); transition: background-color .4s var(--ease), padding-left .4s var(--ease), color .3s ease; }
.index a:hover { background: var(--mint-200); padding-left: clamp(.9rem, 2.2vw, 1.75rem); }
.index__mark { flex: none; font-size: .58em; color: var(--gilt); transform: translateY(-.15em); }
.index__arrow { flex: none; margin-left: auto; font-size: .82rem; color: var(--gilt-ink); opacity: .4; transition: opacity .4s ease, transform .4s var(--ease); }
.index a:hover .index__arrow { opacity: 1; transform: translateX(.25rem); }
.index--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }

/* The sixteen standards as a card mosaic rather than a list. */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(.75rem, 1.6vw, 1.15rem); }
.spec li { }
.spec__row { display: block; height: 100%; padding: clamp(1rem, 2vw, 1.4rem); background: rgba(246,252,244,.8); border: 1px solid var(--rule); transition: background-color .4s ease, transform .4s var(--ease), box-shadow .4s ease; }
a.spec__row:hover { background: var(--mint-100); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(56,77,52,.45); }
.spec__k { display: block; font-family: var(--serif); font-size: clamp(1rem, .95rem + .28vw, 1.15rem); line-height: 1.25; color: var(--ink); }
.spec__bar { display: none; }
.spec__v { display: block; margin-top: .35rem; font-size: .85rem; line-height: 1.6; color: var(--ink-3); }

.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.press li { flex: 0 1 7rem; display: grid; place-items: center; }
.press img { width: 100%; max-width: 8rem; 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%, 15rem), 1fr)); gap: clamp(1.25rem, 2.6vw, 2rem); }
.step { display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, 2.6vw, 2rem); background: rgba(246,252,244,.82); border: 1px solid var(--rule); }
.step__disc { width: clamp(3.5rem, 5.5vw, 4.75rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--mint-100); border: 1px solid var(--rule-gilt); }
.step__disc img { width: 56%; height: 56%; object-fit: contain; mix-blend-mode: multiply; opacity: .82; }
.step__num { font-family: var(--serif); font-size: .95rem; color: var(--gilt-ink); }
.step p { font-size: .9375rem; line-height: 1.72; }

.quote { padding: clamp(1.75rem, 3.5vw, 3rem); background: var(--mint-100); border-left: 2px solid var(--gilt); text-align: center; }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.95rem); line-height: 1.42; color: var(--ink); max-width: 44rem; margin-inline: auto; }

.card { position: relative; }
.card::before { content: ""; position: absolute; inset: .55rem; border: 1px solid var(--rule-gilt); pointer-events: none; }
.card > * + * { margin-top: clamp(.9rem, 1.8vw, 1.4rem); }
.ticks { display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .8em; font-size: .9375rem; 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%, 18rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.defs li { padding: clamp(1.1rem, 2.2vw, 1.6rem); background: rgba(246,252,244,.8); border-top: 2px solid var(--gilt); }
.defs__k { display: block; font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink); }
.defs__dash { color: var(--gilt-ink); }
.defs__v { display: block; margin-top: .4rem; font-size: .9rem; line-height: 1.68; color: var(--ink-3); }

.disclaimer { padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.9rem); border-left: 2px 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%, 13rem), 1fr)); gap: clamp(.7rem, 1.5vw, 1rem); }
.cities li { }
.cities a { display: flex; align-items: baseline; gap: .6em; height: 100%; padding: clamp(1rem, 2vw, 1.5rem); background: rgba(246,252,244,.82); border: 1px solid var(--rule); font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); line-height: 1.2; color: var(--ink); transition: background-color .4s ease, transform .4s var(--ease), box-shadow .4s ease; }
.cities a:hover { background: var(--mint-100); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(56,77,52,.45); }
.cities__mark { font-size: .4em; color: var(--gilt); transform: translateY(-.35em); }

/* Three across, holding at three on a tablet and dropping to two on a phone —
   never one, so the collection always reads as a set. */
.collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.25rem); }
/* The stagger has to be a margin, not a transform. A transform moves the card
   but leaves its grid cell exactly where it was, so the row below keeps its
   original height and the shifted card prints straight over the top of it —
   which is what was happening here. A margin moves the cell too, so the grid
   grows to accommodate the offset and nothing collides. */
.collection { align-items: start; }
.collection li:nth-child(even) { margin-top: clamp(1rem, 3vw, 2.75rem); }
.collection figcaption { padding-top: 1rem; }
.collection__k { display: block; font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.25; color: var(--ink); }
.collection__colon { color: var(--gilt-ink); }
.collection__v { display: block; margin-top: .4rem; font-size: .875rem; line-height: 1.62; 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: .8rem; }
.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
   -------------------------------------------------------------------------- */
.foot { background: linear-gradient(180deg, #DFEFD9, #D6E9CF); position: relative; z-index: 4; padding-inline: var(--gutter); }
.foot > * { max-width: 82rem; margin-inline: auto; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.foot__h { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.05rem; color: var(--forest); }
.foot__links { display: grid; gap: .28rem; }
.foot__links a { font-size: .84375rem; line-height: 1.45; color: var(--ink-2); transition: color .3s ease, padding-left .3s var(--ease); }
.foot__links a:hover { color: var(--gilt-ink); padding-left: .35rem; }
.foot__note { font-size: .8125rem; color: var(--ink-3); }
.foot__tel { display: grid; gap: .4rem; margin-top: .8rem; }
.foot__tel a, .foot__mail a { font-size: .9375rem; 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: 1.1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot__social { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; 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: .45rem; margin-top: 1rem; }
.pay li { padding: .4rem .8rem; 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.75rem, 3.5vw, 2.5rem); 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: .75rem; line-height: 1.75; 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; }

/* --------------------------------------------------------------------------
   NARROW
   -------------------------------------------------------------------------- */
@media (max-width: 68rem) {
  .nav { display: none; }
  .masthead__tools .icon-btn { display: inline-grid; }
  .pair > div:not([class]), .pair > .card { margin-right: 0; }
}
@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; }
  .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection__k { font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); }
  .collection__v { font-size: .8rem; }
  .collection li:nth-child(even) { transform: none; }
  .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.07); }
.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(18px); }
.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); } }