/* ==================================================================
   Raeha Bashyam — author site
   Design tokens follow the handoff spec. No border-radius anywhere.
   ================================================================== */

:root {
  /* --- Dark ("ink") --- */
  --ink:          #0d1418;  /* page / dark section background */
  --ink-card:     #0f191e;  /* card background on dark */
  --ink-panel:    #0c1216;  /* deep panel (cover backing) */
  --ink-hover:    #1c2b30;  /* subscribe button hover */
  --frame:        #25313a;  /* photo frame fill */

  /* --- Text on dark --- */
  --display-dark: #eee7d6;  /* display text on dark */
  --bright-dark:  #e6dfd0;  /* bright text on dark */
  --body-dark:    #b9c2c0;  /* body text on dark */
  --second-dark:  #a7b2b2;  /* secondary text on dark */
  --muted-dark:   #8a9a9e;  /* muted text / links on dark */
  --faint-dark:   #5f6f72;  /* faint text on dark */

  /* --- Brass --- */
  --brass:        #c9b98a;
  --brass-bright: #e0cf9e;
  --brass-hair:   rgba(201, 185, 138, .16);
  --brass-border: rgba(201, 185, 138, .2);
  --brass-line:   rgba(201, 185, 138, .4);
  --brass-shadow: rgba(201, 185, 138, .12);

  /* --- Light ("bone") --- */
  --bone:         #ece7db;  /* light section background */
  --text-light:   #26333a;  /* dark text on light */
  --body-light:   #37464b;  /* body text on light */
  --muted-light:  #7d8a8d;  /* muted text on light */
  --brass-light:  #8a6f3c;  /* brass-on-light kicker */
  --rule-light:   rgba(38, 51, 58, .2);
  --border-light: rgba(38, 51, 58, .45);

  /* --- Text on brass band --- */
  --on-brass:        #1a1712;
  --on-brass-body:   #4a4030;
  --on-brass-faint:  #6d5f45;

  /* --- Type --- */
  --display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --body:    'EB Garamond', Garamond, 'Times New Roman', serif;
  --fell:    'IM Fell English', Garamond, serif;

  /* --- Layout --- */
  --wide:    1100px;  /* nav / footer */
  --content: 960px;   /* content grids */
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bright-dark);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

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

/* Must outrank the display rules below (e.g. .newsletter__form is
   display:flex, which would otherwise defeat the hidden attribute). */
[hidden] { display: none !important; }

::selection { background: var(--brass); color: var(--ink); }

/* Visible focus ring — the design specifies none, but keyboard users
   need one. Brass so it reads as part of the palette. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--brass);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.band--ink { background: var(--ink); color: var(--bright-dark); }

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

.kicker {
  margin: 0 0 22px;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.kicker--brass { color: var(--brass); }
.kicker--light { color: var(--brass-light); }
.kicker--hero {
  margin: 0 0 26px;
  font-size: 12px;
  letter-spacing: .36em;
  color: var(--brass);
}

.h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  color: var(--display-dark);
}

/* ------------------------------------------------------------------
   1. Nav
   ------------------------------------------------------------------ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 30px 40px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
}

/* The inner wrapper carries the layout; the outer is the animation
   container the mobile menu collapses (see the 760px breakpoint). */
.nav__links-inner { display: flex; gap: 34px; }

.nav__links a {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dark);
  text-decoration: none;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--brass); }

/* Hidden until the mobile breakpoint. */
.nav__toggle {
  display: none;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Hairline, inset to the same 1100px container as the nav. */
.nav__rule-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 40px; }
.nav__rule { height: 1px; background: var(--brass-hair); }

/* ------------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------------ */

.hero { padding: 104px 40px; text-align: center; }

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(52px, 7.5vw, 88px);
  line-height: 1.04;
  color: var(--display-dark);
}
.hero__title em {
  font-weight: 500;
  color: var(--brass);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 40px 0;
}
.ornament__line { width: 72px; height: 1px; background: var(--brass-line); }
.ornament__lozenge {
  width: 6px; height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
}

.hero__logline {
  margin: 0 auto;
  max-width: 520px;
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--second-dark);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-top: 44px;
}

.btn-outline {
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--brass); color: var(--ink); }

.hero__cta-note { font-size: 13px; color: var(--faint-dark); }

/* ------------------------------------------------------------------
   3. Hero art band
   ------------------------------------------------------------------ */

/* The band is a fixed 440px window; the image inside is deliberately
   taller and drifts vertically as the band crosses the viewport, so the
   sea sits on a different plane from the page. JS sets --shift. */
.art-band {
  position: relative;
  margin: 0;
  width: 100%;
  height: 440px;
  overflow: hidden;
}
.art-band img {
  --shift: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + (2 * var(--parallax-range, 42px)));
  margin-top: calc(var(--parallax-range, 42px) * -1);
  object-fit: cover;
  object-position: center 55%;
  transform: translate3d(0, var(--shift), 0);
  will-change: transform;
}

.art-band__credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 5px 8px;
  background: rgba(13, 20, 24, .72);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(238, 231, 214, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------
   4. The Book (light)
   ------------------------------------------------------------------ */

.book {
  background: var(--bone);
  color: var(--text-light);
  padding: 96px 40px;
}

.book__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

/* The cover sits in a 3D scene: hovering tilts it (JS sets the
   rotation), revealing a page block, spine, and back board so it
   reads as a physical hardback rather than a flat card.
   The perspective wrapper hugs the cover exactly so the vanishing
   point is the cover's own center — with it higher up (e.g. on the
   whole column), the bottom page face is viewed edge-on and culls,
   leaving a dark gap at the bottom corners when tilted. */
.cover-scene { perspective: 1100px; }

.cover {
  --book-depth: 52px; /* a hardback's thickness at this cover width */
  position: relative;
  /* Let the physical frame follow the cover image's native ratio instead of
     forcing the art into a slightly different padded aspect ratio. */
  aspect-ratio: auto;
  background: var(--ink-panel);
  border: 1px solid var(--border-light);
  padding: 12px;
  box-shadow: 0 18px 40px -18px rgba(16, 20, 24, .45);
  transform-style: preserve-3d;
  transition: transform .6s ease, box-shadow .6s ease;
}
/* Scroll-driven: JS writes the transform every frame, so CSS must not
   also try to ease it — that would fight the scroll and lag behind. */
.cover--scrolling {
  transition: box-shadow .5s ease;
  box-shadow: 0 30px 60px -22px rgba(16, 20, 24, .55);
  will-change: transform;
}
.cover__art { width: 100%; height: auto; object-fit: contain; }

/* Back board. */
.cover::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--ink-panel);
  transform: translateZ(calc(var(--book-depth) * -1));
}

/* Side faces — pages are inset a touch so the boards overhang them,
   the way a hardback's cover does. */
.cover__side {
  position: absolute;
  backface-visibility: hidden;
}
.cover__side--pages-right,
.cover__side--pages-bottom,
.cover__side--pages-top {
  background: repeating-linear-gradient(
      var(--page-grain, 90deg),
      #e3dac4 0, #e3dac4 2px,
      #cfc4a8 2px, #cfc4a8 3px);
}
.cover__side--pages-right {
  top: 0;
  left: 100%;
  width: var(--book-depth);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.cover__side--pages-bottom,
.cover__side--pages-top {
  --page-grain: 0deg;
  left: 0;
  width: 100%;
  height: var(--book-depth);
}
.cover__side--pages-bottom {
  top: 100%;
  transform-origin: center top;
  transform: rotateX(-90deg);
}
.cover__side--pages-top {
  bottom: 100%;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
/* Spine — convex, like a casebound round. Built from three facets:
   two angled strips at the hinges and a raised middle, so the spine
   bulges outward past the boards instead of sitting flat. The facet
   sizes are fractions of --book-depth, so the whole spine scales if
   the depth changes; the 21° hinge angle matches those fractions
   (bulge ≈ sin 21° × 0.27 × depth). */
.cover__side--spine {
  top: -1px;
  right: 100%;
  width: var(--book-depth);
  height: calc(100% + 2px);
  transform-origin: right center;
  transform: rotateY(-90deg);
  transform-style: preserve-3d;
}
/* Inside the rotated spine plane, local left = the book's back,
   local right = the front hinge. */
.cover__spine-facet {
  position: absolute;
  top: 0;
  height: 100%;
  backface-visibility: hidden;
}
.cover__spine-facet--front {
  right: 0;
  width: calc(var(--book-depth) * .27);
  transform-origin: right center;
  transform: rotateY(21deg);
  background: linear-gradient(to left, #0a0f13, #182430);
}
.cover__spine-facet--mid {
  left: calc(var(--book-depth) * .25);
  width: calc(var(--book-depth) * .5);
  transform: translateZ(calc(var(--book-depth) * .097));
  background: linear-gradient(90deg, #182430, #1e2b37 50%, #182430);
}
.cover__spine-facet--back {
  left: 0;
  width: calc(var(--book-depth) * .27);
  transform-origin: left center;
  transform: rotateY(-21deg);
  background: linear-gradient(to right, #0a0f13, #182430);
}

.cover__credit {
  margin: 12px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  color: var(--muted-light);
}

.book__para {
  margin: 0 0 20px;
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--body-light);
}
.book__para--last { margin-bottom: 30px; }

.book__para--dropcap::first-letter {
  float: left;
  font-family: var(--fell);
  font-size: 58px;
  line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--text-light);
}

.specs { margin: 0; }
.specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-light);
}
.specs__row--last { border-bottom: 1px solid var(--rule-light); }
.specs dt {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.specs dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--text-light);
  text-align: right;
}

/* ------------------------------------------------------------------
   5. About
   ------------------------------------------------------------------ */

/* Portrait sits right, opposite the book cover, so the two images don't
   stack down the same edge. Copy leads in the DOM, which also reads
   better linearly. */
.about {
  max-width: calc(var(--content) + 80px);
  margin: 0 auto;
  padding: 96px 40px 84px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: start;
}

.portrait {
  width: 280px;
  height: 356px;
  background: var(--frame);
  padding: 9px;
  /* Mirrored from the spec's 16px 16px: the offset points inward,
     toward the copy, rather than off the page edge. */
  box-shadow: -16px 16px 0 var(--brass-shadow);
}
.portrait__crop { width: 100%; height: 100%; overflow: hidden; }
.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--portrait-zoom, 1));
  transform-origin: center;
  will-change: transform;
}

.about__bio {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body-dark);
}
.about__bio--last { margin-bottom: 0; }
.about__contact {
  margin: 22px 0 0;
  color: var(--muted-dark);
  font-size: 15px;
}
.about__contact a { color: var(--brass); }

/* ------------------------------------------------------------------
   6. Shops
   ------------------------------------------------------------------ */

.shops {
  max-width: calc(var(--content) + 80px);
  margin: 0 auto;
  padding: 0 40px 124px;
}

.shops__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.shop-card {
  --shop-card-padding: 24px;
  --shop-logo-size: 112px;
  display: grid;
  grid-template-columns: var(--shop-logo-size) minmax(0, 1fr);
  grid-template-areas: "logo content";
  align-items: start;
  gap: 22px;
  min-height: calc(var(--shop-logo-size) + (2 * var(--shop-card-padding)));
  padding: var(--shop-card-padding);
  border: 1px solid var(--brass-border);
  background: var(--ink-card);
  text-decoration: none;
  transition: border-color .25s ease;
}
.shop-card:hover { border-color: var(--brass); }
.shop-card__content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}
.shop-card__logo-frame {
  grid-area: logo;
  width: var(--shop-logo-size);
  height: var(--shop-logo-size);
  border: 1px solid var(--brass-line);
  overflow: hidden;
}
.shop-card__logo { width: 100%; height: 100%; object-fit: cover; }

.shop-card__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 25px;
  color: var(--bright-dark);
}
.shop-card__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-dark);
}
.shop-card__visit {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ------------------------------------------------------------------
   7. Newsletter (brass band)
   ------------------------------------------------------------------ */

/* Laid paper stock, softened so the writing remains the focal point. */
.newsletter {
  background-color: #e6d7ae;
  color: var(--on-brass);
  padding: 124px 40px 84px;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.newsletter::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("assets/paper-texture.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: .25;
  pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }

.newsletter-divider {
  position: relative;
  z-index: 2;
  height: 0;
}
.newsletter-divider img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 126px;
  height: 126px;
  transform: translate(-50%, -50%);
}

.newsletter__title { margin: 0 0 14px; color: var(--on-brass); }

.newsletter__sub {
  margin: 0 auto 34px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-brass-body);
}

.newsletter__sub span { display: block; }

.newsletter__form {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.newsletter__input {
  width: 280px;
  padding: 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--on-brass);
  font-family: var(--body);
  font-size: 16px;
  color: var(--on-brass);
  outline: none;
}
.newsletter__input::placeholder { color: var(--on-brass-faint); opacity: 1; }
.newsletter__input:focus-visible {
  outline: 2px solid var(--on-brass);
  outline-offset: 3px;
}

.newsletter__btn {
  padding: 14px 30px;
  background: var(--ink);
  color: var(--brass);
  border: none;
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.newsletter__btn:hover { background: var(--ink-hover); }
.newsletter__btn[disabled] { opacity: .6; cursor: default; }
.newsletter__btn:focus-visible {
  outline: 2px solid var(--on-brass);
  outline-offset: 3px;
}

.newsletter__error {
  margin: 14px 0 0;
  font-size: 14px;
  font-style: italic;
  color: #6b2318;
}

.newsletter__thanks {
  margin: 0;
  font-style: italic;
  font-size: 17px;
  color: var(--on-brass);
}

.newsletter__footnote {
  max-width: 440px;
  margin: 20px auto 0;
  font-size: 12.5px;
  color: var(--on-brass-faint);
}

.newsletter__footnote a { color: inherit; }

/* Dedicated signup page ------------------------------------------------ */

.letter-page {
  min-height: calc(100vh - 81px);
  padding: 56px 40px 64px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 185, 138, .08), transparent 45%),
    var(--ink);
  color: var(--bright-dark);
}
.letter-page::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("assets/paper-texture.jpg") center / cover;
  mix-blend-mode: soft-light;
  opacity: .035;
  pointer-events: none;
}
.letter-page > * { position: relative; z-index: 1; }

.newsletter-envelope {
  --shell-start: -180px;
  --letter-start: 120px;
  --letter-start-clip: 84px;
  --letter-rest: -24px;
  --reveal-duration: 1.4s;
  --reveal-delay: .12s;
  position: relative;
  width: min(660px, 100%);
  height: 913px;
  margin: 0 auto;
}

.newsletter-envelope__layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateY(var(--shell-start));
  animation: newsletter-envelope-drop var(--reveal-duration) var(--reveal-delay) cubic-bezier(.18, .76, .2, 1) both;
  pointer-events: none;
  will-change: transform;
}
.newsletter-envelope__layer--back { z-index: 1; }
.newsletter-envelope__layer--front {
  z-index: 3;
  filter:
    drop-shadow(0 -6px 7px rgba(28, 20, 12, .17))
    drop-shadow(0 16px 16px rgba(0, 0, 0, .18));
}

.letter-page__inner {
  width: calc(100% - 72px);
  max-width: 588px;
  margin: 0;
  padding: 42px 42px 138px;
  text-align: center;
}

.newsletter-envelope__letter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 223px;
  isolation: isolate;
  overflow: hidden;
  clip-path: inset(0 0 var(--letter-start-clip) 0);
  transform: translate(-50%, var(--letter-start));
  background: #eee2c5;
  border: 1px solid rgba(74, 48, 20, .42);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .26);
  animation: newsletter-letter-lift var(--reveal-duration) var(--reveal-delay) cubic-bezier(.18, .76, .2, 1) both;
  will-change: transform, clip-path;
}

.newsletter-envelope__letter::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("assets/paper-texture.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: .23;
  pointer-events: none;
}

@keyframes newsletter-letter-lift {
  from {
    clip-path: inset(0 0 var(--letter-start-clip) 0);
    transform: translate(-50%, var(--letter-start));
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, var(--letter-rest));
  }
}

@keyframes newsletter-envelope-drop {
  from { transform: translateY(var(--shell-start)); }
  to { transform: translateY(0); }
}

.letter-page__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(46px, 6vw, 62px);
  line-height: 1.02;
  color: var(--on-brass);
}
.letter-page__sub {
  max-width: 440px;
  margin: 20px auto 30px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--on-brass-body);
}
.letter-page__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  text-align: left;
}
.letter-page__field { display: grid; }
.letter-page__field--email { grid-column: 1 / -1; }
.letter-page__input {
  width: 100%;
  padding: 9px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--on-brass);
  border-radius: 0;
  color: var(--on-brass);
  font-family: var(--body);
  font-size: 19px;
  outline: none;
}
.letter-page__input::placeholder {
  color: var(--on-brass-faint);
  opacity: 1;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.letter-page__input:focus::placeholder { color: transparent; opacity: 0; }
.letter-page__input:focus-visible { outline: 2px solid var(--on-brass); outline-offset: 3px; }
.letter-page__btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
  padding: 13px 30px;
  border: none;
  border-radius: 0;
  background: var(--ink);
  color: var(--brass);
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.letter-page__btn:hover { background: var(--ink-hover); }
.letter-page__btn[disabled] { opacity: .6; cursor: default; }
.letter-page__btn:focus-visible { outline: 2px solid var(--on-brass); outline-offset: 3px; }
.letter-page__error { margin: 18px 0 0; color: #6b2318; font-size: 14px; font-style: italic; }
.letter-page__thanks { margin: 0; color: var(--on-brass); font-size: 18px; font-style: italic; }
.letter-page__privacy {
  max-width: 400px;
  margin: 18px auto 0;
  color: var(--on-brass-faint);
  font-size: 12.5px;
  line-height: 1.55;
}
.letter-page__privacy a { color: inherit; }

/* ------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------ */

.footer {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px 40px;
  font-size: 13px;
  color: var(--faint-dark);
}

.footer__links { display: flex; gap: 26px; }
.footer__links a {
  color: var(--muted-dark);
  text-decoration: none;
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--brass); }

/* ------------------------------------------------------------------
   Privacy page
   ------------------------------------------------------------------ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 40px;
}
.legal__updated {
  margin: -8px 0 42px;
  font-size: 14px;
  color: var(--muted-dark);
}
.legal__section { margin-top: 36px; }
.legal__heading {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  color: var(--bright-dark);
}
.legal__body {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body-dark);
}
.legal__body a { color: var(--brass); }

/* ------------------------------------------------------------------
   Responsive — desktop-first at ~1100px, per the spec
   ------------------------------------------------------------------ */

/* Tighten the nav before it wraps. */
@media (max-width: 860px) {
  .nav__links-inner { gap: 22px; }
}

@media (max-width: 760px) {
  /* Nav collapses behind a Menu button. */
  .nav { padding: 22px 24px; position: relative; flex-wrap: wrap; }
  .nav__toggle { display: block; }

  /* Stays display:flex so it can animate — `display:none` can't
     transition. Collapsed via grid-template-rows (animatable to
     content height, unlike max-height guesswork); visibility keeps
     the links out of the tab order while shut. */
  .nav__links {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    gap: 0;
    padding-top: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows .42s cubic-bezier(.2, .7, .3, 1),
      opacity .3s ease,
      padding-top .42s cubic-bezier(.2, .7, .3, 1),
      visibility 0s linear .42s;
  }
  .nav__links[data-open] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    padding-top: 20px;
    transition:
      grid-template-rows .42s cubic-bezier(.2, .7, .3, 1),
      opacity .3s ease .06s,
      padding-top .42s cubic-bezier(.2, .7, .3, 1),
      visibility 0s linear;
  }
  .nav__links[data-open] { margin-bottom: -22px; }
  .nav__links[data-instant-close],
  .nav__links[data-instant-close] a { transition: none; }
  /* The animating row needs a zero-min-height overflow container.
     gap resets to 0 — the desktop 34px/22px row gap would otherwise
     push the stacked links apart from their hairline rules. */
  .nav__links-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }
  /* Each link drifts up into place, staggered. */
  .nav__links a {
    padding: 14px 0;
    border-top: 1px solid var(--brass-hair);
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .38s ease, opacity .38s ease;
  }
  .nav__links[data-open] a { transform: none; opacity: 1; }
  .nav__links[data-open] a:nth-child(1) { transition-delay: .08s; }
  .nav__links[data-open] a:nth-child(2) { transition-delay: .14s; }
  .nav__links[data-open] a:nth-child(3) { transition-delay: .20s; }
  .nav__links[data-open] a:nth-child(4) { transition-delay: .26s; }
  .nav__rule-wrap { padding: 0 24px; }

  .hero { padding: 72px 24px; }
  .hero__logline { font-size: 17.5px; }

  .art-band { height: 225px; }

  /* Two-column grids collapse to one. */
  .book { padding: 72px 24px; }
  .book__inner { grid-template-columns: 1fr; gap: 52px; }
  .book__cover-col { max-width: 236px; margin: 0 auto; }
  .cover { --book-depth: 44px; }

  .about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 24px 64px;
  }
  /* Single column: portrait leads again, as in the original design. */
  .about__copy { order: 2; }
  .portrait { order: 1; margin: 0 auto; }

  .shops { padding: 0 24px 84px; }
  .shops__grid { grid-template-columns: 1fr; }
  .shop-card {
    --shop-card-padding: 20px;
    grid-template-columns: 1fr;
    grid-template-areas: "content";
    min-height: 0;
    gap: 0;
  }
  .shop-card__content { gap: 8px; }
  .shop-card__logo-frame { display: none; }

  .newsletter-divider img { width: 104px; height: 104px; }
  .newsletter { padding: 80px 24px 72px; }
  .newsletter__sub { max-width: 320px; }
  .newsletter__form { flex-direction: column; align-items: center; }
  .newsletter__input { width: 100%; max-width: 320px; text-align: center; }
  .newsletter__btn { width: 100%; max-width: 320px; }
  .newsletter__footnote { max-width: 320px; padding: 0 16px; }

  .letter-page { min-height: 0; padding: 14px 14px 30px; }
  .newsletter-envelope {
    --shell-start: -140px;
    --letter-start: 90px;
    --letter-start-clip: 230px;
    --letter-rest: -20px;
    width: min(100%, 510px);
    height: 700px;
  }
  .letter-page__inner {
    width: calc(100% - 28px);
    padding: 34px 18px 108px;
  }
  .letter-page__title { font-size: clamp(34px, 10.8vw, 42px); }
  .letter-page__sub { margin: 18px auto 28px; font-size: 16.5px; }
  .newsletter-envelope__letter { top: 34px; bottom: auto; }
  .letter-page__form { grid-template-columns: 1fr; gap: 13px; }
  .letter-page__field--email, .letter-page__btn { grid-column: auto; }
  .letter-page__input { padding: 6px 0; font-size: 17px; }
  .letter-page__input::placeholder { font-size: 10px; letter-spacing: .16em; }
  .letter-page__btn { margin-top: 3px; padding: 11px 24px; }

  /* Footer stacks and centers. */
  .footer {
    flex-direction: column;
    gap: 18px;
    padding: 34px 24px;
    text-align: center;
  }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .legal { padding: 72px 24px; }
}

@media (max-width: 420px) {
  .specs__row { flex-direction: column; gap: 6px; }
  .specs dd { text-align: left; }
  .letter-page__title { font-size: 32px; }
}

/* ------------------------------------------------------------------
   Motion & print
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  /* JS skips the scroll tilt and parallax; these reset anything the
     effects would have left behind, and drop the menu stagger. */
  .cover { transform: none !important; }
  .art-band img { transform: none !important; }
  .nav__links a { transform: none; opacity: 1; }
  .newsletter-envelope__letter {
    animation: none !important;
    clip-path: inset(0);
    transform: translate(-50%, var(--letter-rest));
  }
  .newsletter-envelope__layer {
    animation: none !important;
    transform: none;
  }
}

@media print {
  .nav, .nav__rule-wrap, .newsletter, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}