/* ==========================================================================
   CONCEPT 2 — "THE ATELIER"
   A fixed vertical rail carries the house name and the whole menu. The
   document runs beside it in one wide editorial column, chapter-marked in
   the margin, with photography bleeding off the right edge of the screen.
   Everything scales as a function of the viewport — the rail included.
   ========================================================================== */

:root {
  --rail-w: clamp(12.5rem, 15vw, 17.5rem);
  --shell-pad: clamp(1.5rem, 4.5vw, 5rem);
}

/* Ground: one slow wave, no section seams. */
body { background: linear-gradient(180deg, #EFF8EB 0%, #E7F5E2 18%, #EFF8EB 34%, #E3F5DE 52%, #EFF8EB 70%, #E5F6E0 86%, #DFEFD9 100%); }

.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; }

/* --------------------------------------------------------------------------
   THE RAIL
   -------------------------------------------------------------------------- */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: var(--rail-w);
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 1.6vw, 1.6rem);
  background: linear-gradient(180deg, var(--mint-200), var(--mint-300));
  border-right: 1px solid var(--rule-gilt);
  overflow-y: auto; overscroll-behavior: contain;
}
.rail__brand { display: block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rail__brand img { width: 100%; max-width: 12rem; }

.rail__strip {
  margin: 0 calc(-1 * clamp(1rem, 1.6vw, 1.6rem)) clamp(1.25rem, 2.5vw, 2rem);
  padding: .55rem clamp(1rem, 1.6vw, 1.6rem);
  background: var(--forest); color: var(--mint-100);
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  text-align: center;
}

.rail__nav { flex: 1; }
.rail__item + .rail__item { border-top: 1px solid var(--rule); }
.rail__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  width: 100%; padding: .72rem 0; text-align: left;
  font-size: .6875rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink);
  transition: color .3s ease, padding-left .3s var(--ease);
}
.rail__link:hover, .rail__link[aria-expanded="true"] { color: var(--gilt-ink); padding-left: .35rem; }
.rail__link svg { width: .5rem; height: .5rem; flex: none; opacity: .6; transition: transform .35s var(--ease); }
.rail__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.rail__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.rail__sub.is-open { grid-template-rows: 1fr; }
.rail__sub > ul { overflow: hidden; }
.rail__sub a {
  display: block; padding: .4rem 0 .4rem .9rem;
  font-size: .78rem; color: var(--ink-2);
  border-left: 1px solid var(--rule-gilt);
  transition: color .3s ease, border-color .3s ease;
}
.rail__sub li:last-child a { margin-bottom: .6rem; }
.rail__sub a:hover { color: var(--gilt-ink); border-left-color: var(--gilt); }

.rail__cta {
  display: block; margin-top: 1.25rem; padding: .8rem 1rem;
  border: 1px solid var(--forest); background: var(--forest); color: var(--mint-100);
  font-family: var(--serif); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; text-align: center;
  transition: background-color .4s ease, color .4s ease;
}
.rail__cta:hover { background: transparent; color: var(--forest); }

.rail__foot { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--rule-gilt); font-size: .75rem; }
.rail__foot a { display: block; padding: .18rem 0; color: var(--ink-2); transition: color .3s ease; }
.rail__foot a:hover { color: var(--gilt-ink); }
.rail__foot span { color: var(--gilt-ink); letter-spacing: .16em; font-size: .625rem; margin-right: .5em; }
.rail__locale { display: flex; gap: .5rem; margin-top: .9rem; }
.rail__locale svg { width: 1.15rem; border: 1px solid rgba(56,77,52,.22); }

/* --------------------------------------------------------------------------
   THE SHELL
   -------------------------------------------------------------------------- */
.shell { margin-left: var(--rail-w); }
.topbar, .topbar__strip { display: none; }

.band { padding-inline: var(--shell-pad); }
.chapter { position: relative; padding-block: clamp(3.25rem, 6vw, 6.5rem); }

/* Chapter marks live in the outer margin and hold while the chapter scrolls. */
.chapter__mark {
  position: absolute; top: clamp(3.25rem, 6vw, 6.5rem); left: 0;
  width: clamp(2rem, 4vw, 4rem);
  font-family: var(--serif); font-size: .8125rem; letter-spacing: .08em;
  color: var(--gilt-ink); text-align: right;
}
.chapter__mark::after { content: ""; display: block; width: 1px; height: clamp(1.5rem, 3vw, 2.5rem); margin: .5rem 0 0 auto; background: var(--rule-gilt); }
.chapter__body { margin-left: clamp(3rem, 6vw, 6rem); }

.measure { max-width: 46rem; }
.measure--wide { max-width: 58rem; }

/* --------------------------------------------------------------------------
   HERO — photograph full-bleed, the words on a mint card pinned into it
   -------------------------------------------------------------------------- */
.hero { position: relative; }
/* Short enough that the film, the overlap and the whole headline card all
   land inside the first screen — the last line of the heading must never be
   cut in half on load. */
/* Concept 2 is the deliberate exception to "hero fills the fold": the headline
   card sits below the photograph rather than on it, so a full-height film would
   push the words off screen. Half the screen in landscape keeps the walk
   present without leaving a long empty band above the card; a portrait screen
   is narrow enough that the film needs more height to read at all. */
.hero__media { position: relative; height: 62svh; min-height: 18rem; overflow: hidden; }
@media (orientation: landscape) { .hero__media { height: 60svh; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(56,77,52,.38), rgba(56,77,52,.56));
}
.hero__mount { position: absolute; inset: clamp(.8rem, 1.5vw, 1.4rem); border: 1px solid var(--mount); pointer-events: none; z-index: 2; }

.hero__card {
  position: relative; z-index: 3;
  width: min(53rem, 88%);
  margin: clamp(-6rem, -8vw, -3.5rem) 0 0 var(--shell-pad);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  background: var(--mint-100);
  box-shadow: 0 40px 90px -55px rgba(56, 77, 52, .55);
}
.hero__card::before { content: ""; position: absolute; inset: .55rem; border: 1px solid var(--rule-gilt); pointer-events: none; }
.hero__card > * + * { margin-top: clamp(.9rem, 1.8vw, 1.4rem); }
.hero__card .d1 { font-size: clamp(2.2rem, .8rem + 3.8vw, 4.25rem); }
.hero__sub { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.7; max-width: 34rem; }

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

/* Photography that runs off the right edge of the screen. */
.bleed { margin-right: calc(-1 * var(--shell-pad)); }

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}
.pair--top { align-items: start; }
/* The written column carries more than the photograph, so it takes more of
   the width — and the service index and the process now sit inside it, which
   is what closes the empty well that used to open beneath the text. */
@media (min-width: 62rem) { .pair { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } }

/* Four steps, two up, inside the written column. */
.steps--paired { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.steps--paired .step__disc { width: clamp(3rem, 4.5vw, 3.75rem); }
.steps--paired .step p { font-size: .875rem; line-height: 1.68; }

/* A passage standing alone sits in a reading measure centred in the column,
   so the space falls evenly either side instead of piling up on the right. */
.chapter__body > .prose { max-width: 46rem; margin-inline: auto; }

.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.8vw, 1.35rem) clamp(.4rem, 1.2vw, 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, .index a:focus-visible { background: var(--mint-200); padding-left: clamp(.9rem, 2.2vw, 1.75rem); color: var(--forest); }
.index__mark { flex: none; font-size: .58em; color: var(--gilt); transform: translateY(-.15em); }
.index__arrow { flex: none; margin-left: auto; font-family: var(--sans); 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); }

.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); column-gap: clamp(1.75rem, 4vw, 4rem); border-top: 1px solid var(--rule); }
.spec li { border-bottom: 1px solid var(--rule); }
.spec__row { display: block; padding: clamp(.85rem, 1.7vw, 1.2rem) 0; }
a.spec__row:hover .spec__k { color: var(--gilt-ink); }
.spec__k { display: block; font-family: var(--serif); font-size: clamp(1rem, .95rem + .3vw, 1.18rem); line-height: 1.25; color: var(--ink); }
.spec__bar { display: none; }
.spec__v { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.6; color: var(--ink-3); }

.press { display: flex; flex-wrap: wrap; align-items: 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.75rem, 3.5vw, 3rem); }
.step { display: grid; gap: 1rem; align-content: start; }
.step__disc { width: clamp(3.75rem, 6vw, 5rem); 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; }

/* The quotations are interludes, not argument: centred between their two brass
   rules so the break in the reading is deliberate rather than accidental. The
   long passages stay left-aligned — centring those would read as a poem. */
.quote { padding-block: clamp(1.75rem, 3.5vw, 3rem); border-top: 1px solid var(--rule-gilt); border-bottom: 1px solid var(--rule-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; padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--mint-100); border: 1px solid var(--rule-gilt);
}
.card::before { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(169,143,95,.2); 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(1.4rem, 3vw, 2.5rem); }
.defs li { padding-top: 1.2rem; border-top: 1px solid var(--rule-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%, 15rem), 1fr)); column-gap: clamp(1.75rem, 4vw, 4rem); border-top: 1px solid var(--rule); }
.cities li { border-bottom: 1px solid var(--rule); }
.cities a {
  display: flex; align-items: baseline; gap: .65em;
  padding: clamp(.85rem, 1.8vw, 1.25rem) clamp(.4rem, 1.2vw, 1rem);
  font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.85rem);
  line-height: 1.2; color: var(--ink);
  transition: background-color .4s var(--ease), padding-left .4s var(--ease), color .3s ease;
}
.cities a:hover { background: var(--mint-200); padding-left: clamp(.85rem, 2.2vw, 1.6rem); color: var(--forest); }
.cities__mark { font-size: .4em; color: var(--gilt); transform: translateY(-.35em); }

.collection { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.25rem, 2.8vw, 2.25rem); }
.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); padding-inline: var(--shell-pad); position: relative; z-index: 4; }
.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); }

/* --------------------------------------------------------------------------
   NARROW — the rail lies down into a bar; everything else was already fluid
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .rail { display: none; }
  .shell { margin-left: 0; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: sticky; top: 0; z-index: 100;
    padding: .85rem var(--shell-pad);
    background: rgba(239, 248, 235, .95);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .topbar__strip { display: block; background: var(--forest); color: var(--mint-100); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: .5rem var(--shell-pad); }
  .topbar img { width: 9.5rem; }
  .icon-btn { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--rule); color: var(--ink); }
  .icon-btn svg { width: 1.05rem; height: 1.05rem; }
  .chapter__mark { position: static; width: auto; text-align: left; margin-bottom: 1rem; }
  .chapter__mark::after { margin-left: 0; }
  .chapter__body { margin-left: 0; }
  .hero__card { width: auto; margin-inline: var(--shell-pad); }
  .foot__base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__locale { justify-self: center; }
  .contact-grid { grid-template-columns: auto; }
}

/* --------------------------------------------------------------------------
   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(--shell-pad);
}
.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; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--rule); }
.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; }

.search { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.search.is-open { grid-template-rows: 1fr; }
.search__inner { overflow: hidden; }
.search__form { display: flex; align-items: center; gap: 1rem; padding: clamp(.9rem, 2vw, 1.5rem) var(--shell-pad); border-bottom: 1px solid var(--rule); }
.search__form input { flex: 1; min-width: 0; padding: .7rem 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 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__card > * { opacity: 0; transform: translateY(16px); }
.js .hero.is-ready .hero__card > * { animation: rise .95s var(--ease) forwards; }
.js .hero.is-ready .hero__card > *:nth-child(1) { animation-delay: .12s; }
.js .hero.is-ready .hero__card > *:nth-child(2) { animation-delay: .26s; }
.js .hero.is-ready .hero__card > *:nth-child(3) { animation-delay: .40s; }
.js .hero.is-ready .hero__card > *:nth-child(4) { animation-delay: .54s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero__card > * { 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); } }

/* The discretion figure sat at 4/5 beside a single short paragraph, so the
   photograph ran some 400px taller than the text it was paired with and the
   row opened a hole down its middle. A landscape crop puts the two columns
   within a line or two of each other. */
.plate--brief { aspect-ratio: 3 / 2; }

/* 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); } }

/* --------------------------------------------------------------------------
   MOBILE: THE EDGE BLEED IS A DESKTOP DEVICE
   .bleed pulls photography off the right edge of the screen, which reads as
   deliberate beside a wide measure of text. On a phone the same negative
   margin leaves the picture 15px from the right edge while the copy beside it
   sits at 24px — close enough to look like a mistake rather than a decision.
   Below 48rem the photography returns to the text gutter.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .bleed { margin-right: 0; }
  .chapter__body { margin-left: 0; }
  .chapter__mark { position: static; width: auto; text-align: left; margin-bottom: .75rem; }
  .chapter__mark::after { margin: .5rem 0 0; }
}