/* ==========================================================================
   Michael "Mike" Thomas Anderson, 1951–2026 — memorial page
   Broadsheet-feature typography on warm paper, with restrained western
   furniture: double rules, small-cap labels, engraved ornaments.
   ========================================================================== */

:root {
  --paper: #f6f1e4;
  --paper-deep: #eee6d2;
  --ink: #221c12;
  --ink-2: #4b4232;
  --muted: #786c5b;   /* 4.55:1 on the paper — the minimum that clears AA */
  --saddle: #8e4a2b;
  --saddle-deep: #6c3117;
  --gold: #a97f3f;
  --line: rgba(70, 55, 32, 0.35);
  --line-soft: rgba(70, 55, 32, 0.18);
  --serif-display: "Playfair Display", "Times New Roman", serif;
  --serif-body: "Lora", Georgia, serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --measure: 34.5rem;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.075rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  /* faint paper grain */
  background-image:
    radial-gradient(rgba(120, 96, 58, 0.055) 1px, transparent 1.4px),
    radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.6px);
  background-size: 290px 290px, 420px 420px;
  background-position: 0 0, 130px 200px;
}

a { color: var(--saddle-deep); text-decoration-color: rgba(142, 74, 43, 0.5); text-underline-offset: 2px; }
a:hover { color: var(--saddle); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 50;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------------- rules & ornaments ---------------- */

.double-rule {
  height: 7px;
  border-top: 2.5px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  opacity: 0.85;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 3.1rem auto 3.1rem;
  max-width: var(--measure);
}
.ornament span { flex: 1; border-top: 1px solid var(--line-soft); }
.ornament img {
  width: 30px;
  opacity: 0.8;
}

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

.masthead { padding: 1.15rem clamp(1rem, 4vw, 3rem) 0; }
.masthead-inner {
  max-width: 74rem;
  margin: 0 auto 0.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.masthead .double-rule { max-width: 74rem; margin: 0 auto; }
.masthead-home { color: var(--muted); text-decoration: none; }
.masthead-home:hover { color: var(--saddle-deep); }
.masthead-title {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* optically center the tracked caps */
}
.masthead-date { color: var(--muted); }

/* ---------------- title block ---------------- */

.sheet { padding: 0 clamp(1rem, 4vw, 3rem) 4rem; }

.titles {
  text-align: center;
  max-width: 54rem;
  margin: clamp(1.2rem, 2.4vh, 1.9rem) auto 0;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--saddle-deep);
  margin: 0 0 0.95rem;
}
.eyebrow span { color: var(--gold); font-size: 0.7rem; padding: 0 0.55rem; }

/* On a phone the full date line breaks after "JULY 27," and leaves "2026"
   stranded on a line of its own. The string is not too long — the tracking is
   too wide for the width available, so tighten the tracking rather than shrink
   the type. */
@media (max-width: 30rem) {
  .eyebrow { letter-spacing: 0.13em; }
  .eyebrow span { padding: 0 0.35rem; }

  /* All three masthead items wrap to two lines on a phone — there is simply not
     room for publication, section and dateline across 360 pixels. Rather than
     shrink the type, drop the dateline, the way a newspaper does: "Hudson,
     Wyoming" is stated again in the caption directly below the portrait. The
     remaining two keep their designed size and tracking. */
  .masthead { padding-top: 0.8rem; }
  .masthead-inner { gap: 0.5rem; margin-bottom: 0.55rem; }
  .masthead-inner > * { white-space: nowrap; }
  .masthead-date { display: none; }
}

h1 {
  font-family: var(--serif-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 0.95rem;
  text-wrap: balance;
}

.dek {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1.06rem, 2.4vw, 1.3rem);
  color: var(--ink-2);
  margin: 0 auto 1.4rem;
  max-width: 38rem;
  text-wrap: balance;
}

.byline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.6rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 0.58rem 0.5rem;
  max-width: 40rem;
  margin: 0 auto;
}

/* Phone only: one rule instead of two. The top rule moves up under the dek so
   it reads as binding the byline to the title block rather than floating
   between them, and the bottom rule goes — the photograph's own edge already
   draws that line, an inch below where the rule was.
   This has to live below .byline-row rather than up with the other phone
   overrides: a media query adds no specificity, so an earlier block loses to
   the later base rule.

   The breakpoint is 32rem because that is where the byline and the listen
   control stop fitting on one line — measured, not guessed. Tying it to the
   phone breakpoint instead left a band between 480 and 512px where the row had
   already wrapped but still carried both rules. */
@media (max-width: 32rem) {
  .dek { margin-bottom: 0.7rem; }
  .byline-row { border-bottom: 0; padding-bottom: 0; }
}
.byline {
  font-family: var(--sans);
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  margin: 0;
}
.byline strong { font-weight: 700; color: var(--ink); }

/* Listen pill */
.listen-dock { display: flex; align-items: center; gap: 0.5rem; }
.listen-pill, .listen-stop {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--saddle-deep);
  background: rgba(142, 74, 43, 0.07);
  border: 1px solid rgba(142, 74, 43, 0.45);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 0.15s, color 0.15s;
}
.listen-pill:hover, .listen-stop:hover { background: rgba(142, 74, 43, 0.14); }
.listen-pill.playing { background: var(--saddle-deep); color: var(--paper); border-color: var(--saddle-deep); }
.listen-icon { font-size: 0.62rem; }
.listen-time { color: inherit; opacity: 0.7; font-weight: 500; }

/* The two idle labels share a single grid cell, so the pill is sized by the
   longer of them and never changes width as they trade places — a button that
   resized itself every few seconds would shove the byline around. */
.listen-label {
  display: grid;
  align-items: center;
  justify-items: center;
}
.listen-label > .lbl {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.listen-label > .lbl.is-on { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .listen-label > .lbl { transition: none; }
}
.listen-stop { padding: 0.5rem 0.8rem; font-size: 0.66rem; }

/* A slow sheen crossing the pill every few seconds. This is the only moving
   thing on an otherwise still page, so it is deliberately faint and brief: the
   sweep occupies about a second of an eight-second cycle, which reads as an
   occasional glint rather than a loop demanding attention. It runs six times
   and then stops for good — long enough to be noticed while someone reads the
   top of the page, short of nagging them for the whole visit. */
.listen-pill { position: relative; overflow: hidden; }
.listen-pill > span { position: relative; z-index: 1; }   /* text stays above the glint */
.listen-pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 246, 216, 0.62) 48%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  animation: listenSheen 8s ease-in-out 2.5s 6;
}
@keyframes listenSheen {
  0%, 5%    { left: -45%; opacity: 0; }
  8%        { opacity: 1; }
  17%       { left: 108%; opacity: 1; }
  20%, 100% { left: 108%; opacity: 0; }
}
/* once it is actually playing, the invitation has been taken */
.listen-pill.playing::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .listen-pill::after { animation: none; opacity: 0; }
}

/* ---------------- hero ---------------- */

.hero {
  max-width: 46rem;
  margin: clamp(1.1rem, 2.2vh, 1.6rem) auto 0;
}
.hero img {
  width: 100%;
  /* The photograph is a tall 4:5 frame whose lower half is shirt, and at full
     height it stands taller than a laptop screen — his face landed below the
     fold. Showing a square of it, anchored to the top, trims only the shirt.
     The file itself is untouched; the width/height attributes on the <img>
     match this box so nothing shifts as it loads. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 0%;
  border: 1px solid var(--line-soft);
  box-shadow: 0 22px 50px -28px rgba(50, 36, 15, 0.55);
}
.hero figcaption, .inset figcaption, .triptych figcaption, .west-item figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 0.65rem;
}
.hero figcaption { text-align: center; }

/* ---------------- body copy ---------------- */

.body-copy {
  margin: clamp(2.6rem, 6vh, 4rem) auto 0;
  max-width: var(--measure);
}

.para { margin: 0 0 1.55rem; }

.para.drop::first-letter {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 4.6em;
  line-height: 0.78;
  float: left;
  padding: 0.09em 0.12em 0 0;
  color: var(--saddle-deep);
}

.closer { font-weight: 500; }

/* narration highlight */
.para.narrating {
  background: linear-gradient(to right, rgba(169, 127, 63, 0.16), rgba(169, 127, 63, 0.05));
  outline: 6px solid rgba(169, 127, 63, 0.16);
  outline-offset: 2px;
  border-radius: 2px;
  transition: background 0.4s;
}

/* ---------------- inset figures ---------------- */

.inset { margin: 0.35rem 0 1.4rem; }
.inset img { border: 1px solid var(--line-soft); }

@media (min-width: 720px) {
  .inset-right {
    float: right;
    width: 15.5rem;
    margin: 0.3rem -7.5rem 1.4rem 2rem;
  }
  .inset-left {
    float: left;
    width: 13.5rem;
    margin: 0.3rem 2rem 1.4rem -7.5rem;
  }
}

/* ---------------- marginalia ----------------
   On wide screens the keepsakes leave the Effects section and sit out in the
   page's empty margins, beside the paragraphs they belong to. The anchor is a
   zero-height marker in the text flow, so each object lands at the right
   vertical position without being in the flow itself.

   Everything here is off below 1280px; the Effects section takes over there.
   The offset must clear 4rem, which is how far the photo plates bleed past
   the text column — otherwise the two would overlap. */

.margin-anchor { display: none; }

@media (min-width: 1280px) {
  .margin-anchor {
    display: block;
    position: relative;
    height: 0;
  }

  .marginalia {
    position: absolute;
    top: -0.5rem;
    width: 11rem;
    margin: 0;
  }
  .marginalia.side-left  { right: calc(100% + 5rem); }
  .marginalia.side-right { left:  calc(100% + 5rem); }
  /* stagger, so facing objects don't sit at the same height like a matched pair */
  .marginalia.offset-down { top: 5.5rem; }
  .marginalia.offset-far  { top: 9.5rem; }

  /* These three arrived with real alpha channels, so the shadow follows the
     object's own outline rather than a rectangle. The book is portrait and
     would run tall at full width, so it is held narrower. */
  .marginalia-book { width: 78%; transform: rotate(-2deg); }
  .marginalia-jade { transform: rotate(1.4deg); }
  .marginalia-rope { transform: rotate(-1.2deg); }
  .marginalia:hover .marginalia-book,
  .marginalia:hover .marginalia-jade,
  .marginalia:hover .marginalia-rope { transform: rotate(0deg) translateY(-3px); }

  /* the road signs read as objects too: no frame, just a shadow */
  .marginalia-sign {
    border-radius: 2px;
    transform: rotate(-1.6deg);
  }
  .marginalia.side-right .marginalia-sign { transform: rotate(1.8deg); }
  .marginalia:hover .marginalia-sign { transform: rotate(0deg) translateY(-3px); }

  /* on wide screens these in-flow stand-ins give way to the margin objects */
  .signpost { display: none; }
  .object-pair { display: none; }

  .marginalia img {
    width: 100%;
    filter: drop-shadow(0 12px 16px rgba(58, 42, 18, 0.26));
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .marginalia-pin { border-radius: 50%; transform: rotate(3.2deg); }
  .marginalia-matchbook { transform: rotate(-1.8deg); width: 82%; }
  .marginalia:hover .marginalia-pin { transform: rotate(0deg) translateY(-3px); }
  .marginalia:hover .marginalia-matchbook { transform: rotate(0deg) translateY(-3px); }

  .marginalia figcaption {
    font-family: var(--sans);
    font-size: 0.76rem;   /* matches the photo captions; 11.2px was too small */
    line-height: 1.5;
    color: var(--muted);
    margin-top: 0.7rem;
  }
  .marginalia.side-left figcaption  { text-align: right; }
  .marginalia.side-right figcaption { text-align: left; }

  /* The yearbook, scaled down for the margin. These need two classes to beat
     the base .yearbook rules, which are defined further down the file. */
  .marginalia .yearbook-sm { width: 100%; transform: rotate(-2.4deg); }
  .marginalia .yearbook-year { font-size: 0.78rem; }
  .marginalia:hover .yearbook-sm { transform: rotate(0deg) translateY(-3px); }
  /* the crest is printed on the cover: no shadow of its own, and not full-bleed */
  .marginalia .yearbook-crest {
    width: 74%;
    filter: none;
    opacity: 0.82;
    transform: none;
  }
  .marginalia:hover .yearbook-crest { transform: none; }

  /* the Effects section is redundant once the objects are in the margins */
  .effects { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marginalia img, .yearbook-sm { transition: none; }
  .marginalia:hover img,
  .marginalia:hover .yearbook-sm { transform: none; }
}

/* ---------------- effects case ----------------
   The keepsakes are objects, not photographs: no frames, no borders. Each is
   cropped to its own edge, tipped a degree or two, and given a contact shadow
   so it reads as something set down on the paper. Hovering picks it up. */

.effects { margin: clamp(3.4rem, 9vh, 5.5rem) auto 0; max-width: 58rem; }

.case { list-style: none; margin: 0; padding: 0; }

.artifact {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.artifact:last-child { border-bottom: 0; }
.artifact:nth-child(even) { grid-template-columns: 1fr 15rem; }
.artifact:nth-child(even) .artifact-object { order: 2; }
.artifact:nth-child(even) .artifact-label { order: 1; text-align: right; }

.artifact-object { display: flex; justify-content: center; }

.artifact-object img {
  width: 100%;
  /* the object's own drop shadow — shaped to the art, not to a box */
  filter: drop-shadow(0 14px 18px rgba(58, 42, 18, 0.28));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.45s;
  will-change: transform;
}

/* each sits at its own angle, the way things actually land on a table */
/* ---- the yearbook ----
   The crest was printed on the cover of his 1969 annual, so it is rebuilt as
   the book: an ivory board with the crest and the year in black, as it was.
   Ivory on cream gives almost no tonal contrast, so the object is defined by
   its shadow, a hairline edge, and the spine rather than by its fill. */

.yearbook {
  position: relative;
  width: 12.5rem;
  aspect-ratio: 17 / 22;
  transform: rotate(-2.4deg);
  border-radius: 1px 4px 4px 1px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(158deg, #fbf8f0 0%, #f4eee0 62%, #ece4d2 100%);
  box-shadow:
    0 18px 26px -12px rgba(66, 48, 22, 0.42),
    0 2px 5px rgba(66, 48, 22, 0.16),
    inset 0 0 0 1px rgba(96, 78, 48, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.6rem 1.1rem 1.3rem 1.6rem;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.45s;
}

/* faint cloth tooth, so the ivory doesn't read as flat paper */
.yearbook::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(rgba(120, 98, 60, 0.05) 0.5px, transparent 0.6px),
    radial-gradient(rgba(255, 255, 255, 0.5) 0.5px, transparent 0.6px);
  background-size: 4px 4px, 5px 5px;
  background-position: 0 0, 2px 3px;
  pointer-events: none;
}

.yearbook-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.66rem;
  border-radius: 1px 0 0 1px;
  background: linear-gradient(90deg, rgba(108, 88, 54, 0.26) 0%, rgba(108, 88, 54, 0.1) 55%, rgba(255, 255, 255, 0.42) 100%);
}

/* scoped past the generic .artifact-object img rules above */
.artifact-object .yearbook-crest {
  width: 74%;
  filter: none;   /* the art is already black ink on transparency */
  opacity: 0.82;
  transform: none;
}
/* the crest is printed on the cover — it must not lift on its own */
.artifact-crest:hover .artifact-object .yearbook-crest { transform: none; }

.yearbook-year {
  font-family: var(--serif-display);
  font-size: 0.92rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #221c12;
  opacity: 0.82;
}

.artifact-crest:hover .yearbook {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 26px 34px -14px rgba(66, 48, 22, 0.45),
    0 3px 7px rgba(66, 48, 22, 0.18),
    inset 0 0 0 1px rgba(96, 78, 48, 0.22);
}
.artifact-pin .artifact-object img { transform: rotate(3.2deg); max-width: 11.5rem; border-radius: 50%; }
.artifact-matchbook .artifact-object img { transform: rotate(-1.6deg); max-width: 10rem; }
.artifact-book .artifact-object img { transform: rotate(2deg); max-width: 8.5rem; }

.artifact:hover .artifact-object img { transform: rotate(0deg) translateY(-4px); }
.artifact-crest:hover .artifact-object img { filter: none; }
.artifact-pin:hover .artifact-object img,
.artifact-book:hover .artifact-object img,
.artifact-matchbook:hover .artifact-object img {
  filter: drop-shadow(0 22px 26px rgba(58, 42, 18, 0.3));
}

.artifact-year {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.artifact-label p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 680px) {
  .artifact,
  .artifact:nth-child(even) { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .artifact:nth-child(even) .artifact-object { order: 0; }
  .artifact:nth-child(even) .artifact-label { order: 1; text-align: center; }
  .artifact-object img { max-width: 9rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-object img { transition: none; }
  .artifact:hover .artifact-object img { transform: none; }
}

/* ---------------- in-body photo plates ---------------- */

.plate { margin: 2.4rem -4rem 2.8rem; }
.plate img { width: 100%; border: 1px solid var(--line-soft); }
.plate figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 0.65rem;
  text-align: center;
}
.plate-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.plate-two img { height: 100%; object-fit: cover; }

@media (max-width: 900px) { .plate { margin-left: 0; margin-right: 0; } }
@media (max-width: 520px) { .plate-two { grid-template-columns: 1fr; } }

/* ---------------- the studio portrait, matted and framed ---------------- */

.studio-plate { margin: 3rem auto 0; max-width: 27rem; }
.studio-mat {
  background: linear-gradient(158deg, #fbf8f0 0%, #f2ece0 100%);
  padding: 1.1rem 1.1rem 1.5rem;
  border: 1px solid rgba(96, 78, 48, 0.28);
  box-shadow:
    0 20px 34px -16px rgba(66, 48, 22, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.studio-mat img {
  width: 100%;
  display: block;
  border: 1px solid rgba(70, 55, 32, 0.45);
}
.studio-plate figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin-top: 0.9rem;
}
.studio-lead {
  display: block;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: 0.25rem;
}

/* ---------------- triptych ---------------- */

.triptych { margin: 2.4rem -7.5rem 2.6rem; }
.triptych-grid { display: grid; grid-template-columns: 1fr 1fr 1.78fr; gap: 0.7rem; align-items: stretch; }
.triptych-grid img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line-soft); }
.triptych figcaption { text-align: center; }

@media (max-width: 900px) {
  .triptych { margin: 2.2rem 0 2.4rem; }
  .triptych-grid { grid-template-columns: 1fr 1fr; }
  .triptych-grid img:last-child { grid-column: 1 / -1; }
}

/* ---------------- sections: shared head ---------------- */

.section-head { text-align: center; max-width: 46rem; margin: 0 auto 2.2rem; }
.section-head .double-rule { margin-bottom: 2rem; }
.section-head h2 {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin: 0 0 0.7rem;
}
.section-note {
  font-style: italic;
  color: var(--ink-2);
  max-width: 34rem;
  margin: 0 auto;
  text-wrap: balance;
}

.west, .soundtrack { margin: clamp(3.4rem, 9vh, 5.5rem) auto 0; max-width: 62rem; }

/* ---------------- the west grid ---------------- */

.west-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.west-item { margin: 0; }
.west-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line-soft);
  filter: saturate(0.92);
  transition: filter 0.25s;
}
.west-item img:hover { filter: saturate(1); }
/* landscape source in a portrait cell: keep the subject, not the empty plain */
.west-item img.focus-right { object-position: 82% 40%; }
/* taller-than-cell source: crop off the boots, never the hats */
.west-item img.focus-top { object-position: 50% 0%; }
.west-item.wide { grid-column: 1 / -1; }
.west-item.wide img { aspect-ratio: 21 / 9; object-position: 50% 45%; }
.west-item.half { grid-column: span 2; }
.west-item.half img { aspect-ratio: 3 / 2; }

/* the paintings are a second movement, spaced away from the film stills */
.country-grid { margin-top: 0; }
.section-head-sub { margin-top: 3.4rem; }
.section-head-sub h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--saddle-deep);
  margin: 0 0 0.8rem;
}

/* the film stills band is three across since the studio portrait moved out */
.screen-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 820px) {
  .west-grid { grid-template-columns: 1fr 1fr; }
  .screen-grid { grid-template-columns: 1fr 1fr; }
  .west-item.half { grid-column: 1 / -1; }
}

/* Town limits — two signs propped against the page and overlapping,
   the way they'd lean in the corner of a town shop. Not framed photos. */
.signpost { margin: 2.8rem -4rem 3rem; }
.signpost-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 3.4rem; /* clears the river sign's negative bottom margin */
}
.signpost .sign {
  filter: drop-shadow(0 16px 20px rgba(58, 42, 18, 0.3));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sign-town { width: 58%; transform: rotate(-1.5deg); position: relative; z-index: 1; }
/* the river sign laps the town sign's corner only — never across its own lettering */
.sign-river {
  width: 38%;
  transform: rotate(2.5deg);
  margin-left: -3.5%;
  margin-bottom: -2.4rem;
  position: relative;
  z-index: 2;
}
.signpost:hover .sign-town { transform: rotate(-0.5deg) translateY(-3px); }
.signpost:hover .sign-river { transform: rotate(1.4deg) translateY(-3px); }

.signpost figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 0.4rem;
  text-align: center;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) { .signpost { margin-left: 0; margin-right: 0; } }
@media (max-width: 560px) {
  .signpost-stack { flex-direction: column; align-items: center; }
  .sign-town, .sign-river { width: 82%; margin-left: 0; }
  .sign-river { margin-top: -0.5rem; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .signpost .sign { transition: none; }
  .signpost:hover .sign-town, .signpost:hover .sign-river { transform: none; }
}

/* ---------------- soundtrack ---------------- */

.soundtrack { max-width: 44rem; }

.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
}

.track {
  display: grid;
  grid-template-columns: 2.6rem 2.2rem 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.track:last-child { border-bottom: 0; }

.track-play {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--saddle-deep);
  color: var(--saddle-deep);
  background: transparent;
  font-size: 0.62rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.track-play:hover { background: rgba(142, 74, 43, 0.1); }
.track.playing .track-play { background: var(--saddle-deep); color: var(--paper); }
.track.unavailable .track-play { opacity: 0.3; cursor: default; }

.track-no {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.track-title { font-family: var(--serif-body); font-weight: 600; font-size: 1.02rem; }
.track.playing .track-title { color: var(--saddle-deep); }
.track-artist { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em; }
.track-time { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.9rem; text-align: right; }
.track.unavailable .track-title, .track.unavailable .track-artist { opacity: 0.45; }

/* the visible stream panel — framed like a print plate */
.stage { margin-top: 1.6rem; }
.stage-frame {
  border: 1px solid var(--line);
  padding: 0.5rem;
  background: #1b160e;
  box-shadow: 0 18px 40px -26px rgba(50, 36, 15, 0.7);
}
/* the ratio box must outlive the placeholder: YT.Player replaces #yt-player itself */
.stage-ratio { position: relative; aspect-ratio: 16 / 9; }
.stage-ratio iframe, .stage-ratio > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.stage-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  margin: 0.7rem 0 0;
}

@media (max-width: 560px) {
  .track { grid-template-columns: 2.4rem 1fr auto; }
  .track-no, .track-artist { display: none; }
}

/* ---------------- services ---------------- */

.services { margin: clamp(3.4rem, 9vh, 5.5rem) auto 0; max-width: 46rem; }
.services-card {
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: rgba(255, 252, 243, 0.55);
}
.services-card h2 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.4rem;
  color: var(--saddle-deep);
}
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.services-grid h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.services-grid h3 + p { margin-top: 0; }
.services-grid p { margin: 0 0 1.1rem; font-size: 0.98rem; line-height: 1.65; }
.services-grid p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------------- sticky narration bar ---------------- */

.narration-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  width: min(30rem, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #241c10;
  color: #f0e8d6;
  border: 1px solid rgba(240, 232, 214, 0.25);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 14px 40px -12px rgba(20, 12, 2, 0.6);
  z-index: 40;
}
.bar-btn {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(240, 232, 214, 0.4);
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  font-size: 0.7rem;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.bar-btn:hover { background: rgba(240, 232, 214, 0.12); }
.bar-meta { flex: 1; min-width: 0; }
.bar-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
  margin-bottom: 0.4rem;
}
.bar-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(240, 232, 214, 0.2);
  overflow: hidden;
  cursor: pointer;
}
#bar-fill { display: block; height: 100%; width: 0%; background: var(--gold); transition: width 0.3s; }

/* ---------------- colophon ---------------- */

.colophon { padding: 0 clamp(1rem, 4vw, 3rem) 3.2rem; }
.colophon .double-rule { max-width: 74rem; margin: 0 auto 1.1rem; }
.colophon p {
  max-width: 74rem;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

/* ---------------- narrow screens: cancel bleeds ---------------- */

@media (max-width: 1100px) {
  .inset-right { margin-right: 0; }
  .inset-left { margin-left: 0; }
  .triptych { margin-left: 0; margin-right: 0; }
}

/* ---------------- print ---------------- */

@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead-home, .listen-dock, .narration-bar, .soundtrack, .skip-link, .turntable { display: none !important; }
  .hero img, .triptych-grid img, .west-item img { box-shadow: none; }
  .para.narrating { background: none; outline: none; }
  a { color: inherit; text-decoration: none; }
}

/* ---------------- turntable ----------------
   A record sitting at the top of the page. It spins on arrival and, if the
   Big Iron MP3 is installed and the browser permits sound, plays about thirty
   seconds before fading out. Then it starts nudging: the sleeve lifts, a ring
   pulses out of it, and clicking carries you down to the songs section.

   Autoplay with sound is blocked by every current browser until the visitor
   interacts with the page, so playback is also armed to start on their first
   scroll, click, or keypress. With no MP3 present it simply spins and invites,
   which is the state the page ships in. */

/* Narrow screens: a pill in the byline row, matching the Listen control it
   sits beside. It used to be a 126px band of its own above the dateline,
   which pushed the whole page down for a decoration. */
.turntable {
  /* Hidden by default. The narration now opens with thirty seconds of Big Iron
     before the first sentence, so a separate button for it is saying the same
     thing twice — and on a phone it was saying it in the most expensive place
     on the page. From 1200px up it reappears out in the margin, where it is a
     decorative object beside the title block rather than a row in the flow. */
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.turntable-deck {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--saddle-deep);
  background: rgba(142, 74, 43, 0.07);
  border: 1px solid rgba(142, 74, 43, 0.45);
  border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.35rem;
  transition: background 0.15s;
}
.turntable-deck:hover { background: rgba(142, 74, 43, 0.14); }

.platter {
  position: relative;
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* the arm is unreadable at pill size */
.tonearm { display: none; }

/* the invitation: the whole deck lifts and a ring travels out of it */
.turntable.inviting .platter { animation: deckBob 2.8s ease-in-out infinite; }
.turntable.inviting .platter::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  animation: deckRing 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes deckBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes deckRing {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.28); }
  100% { opacity: 0;    transform: scale(1.28); }
}

.record {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* grooves, then the vinyl itself */
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(circle at 50% 50%,
      #2b2723 0 20%, #191612 20% 68%, #221e19 68% 92%, #14110e 92% 100%);
  box-shadow:
    0 10px 22px -8px rgba(40, 26, 10, 0.55),
    inset 0 0 0 1px rgba(255, 235, 200, 0.09);
  animation: spin 4.2s linear infinite;
  animation-play-state: paused;
}
.turntable.spinning .record { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* a single moving highlight, so the vinyl reads as glossy */
.record-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255, 245, 225, 0) 0deg,
    rgba(255, 245, 225, 0.16) 26deg,
    rgba(255, 245, 225, 0) 62deg,
    rgba(255, 245, 225, 0) 180deg,
    rgba(255, 245, 225, 0.1) 214deg,
    rgba(255, 245, 225, 0) 250deg);
  pointer-events: none;
}

.record-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #a8542f 0%, #8e4a2b 48%, #6c3117 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 180, 0.22);
}
.record-title {
  font-family: var(--serif-display);
  font-size: 0.44rem;
  font-weight: 700;
  color: #fbf3e2;
  letter-spacing: 0.02em;
  line-height: 1;
}
.record-artist {
  font-family: var(--sans);
  font-size: 0.29rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 243, 226, 0.72);
  line-height: 1;
}
.record-spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5%;
  height: 5%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}

/* the arm swings down onto the record while it plays */
.tonearm {
  position: absolute;
  right: 2%;
  top: 8%;
  width: 46%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #cbbfa6 0%, #8e836c 70%, #6f6553 100%);
  transform-origin: right center;
  transform: rotate(-78deg);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(40, 26, 10, 0.45);
}
.turntable.playing .tonearm { transform: rotate(4deg); }
.tonearm-head {
  position: absolute;
  left: -4px;
  top: -3px;
  width: 12px;
  height: 9px;
  border-radius: 2px;
  background: #4a4136;
}

.turntable-hint {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit;
  transition: color 0.3s;
}
.turntable.inviting .turntable-hint { color: var(--saddle-deep); }
.turntable-deck:hover .turntable-hint { color: var(--saddle-deep); }

.turntable-stop {
  appearance: none;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  cursor: pointer;
}
.turntable-stop:hover { color: var(--saddle-deep); border-color: rgba(142, 74, 43, 0.45); }

/* Narrow screens have no spare margin, so it stays in the flow above the
   dateline — small enough not to cost much height. From 1200px up there is
   room beside the title block, so it moves out into that margin and stops
   displacing the page. Positioned entirely outside .titles, it cannot collide
   with the headline the way an earlier version did. */


@media (min-width: 1200px) {
  .titles { position: relative; }
  .turntable {
    display: inline-flex;
    position: absolute;
    flex-direction: column;
    top: 0.25rem;
    right: -8rem;
    width: 7.5rem;
    margin: 0;
  }
  /* out in the margin it is an object again, not a button */
  .turntable-deck {
    flex-direction: column;
    gap: 0.45rem;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: inherit;
  }
  .turntable-deck:hover { background: none; }
  .platter { width: 5rem; height: 5rem; }
  .tonearm { display: block; }
  .turntable-hint {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
  }
  .turntable.ready .turntable-hint,
  .turntable.inviting .turntable-hint { color: var(--saddle-deep); }
  .turntable-play { width: 1.85rem; height: 1.85rem; font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .record { animation: none; }
  .turntable.inviting .platter { animation: none; }
  .turntable.inviting .platter::after { animation: none; opacity: 0.4; }
  .tonearm { transition: none; }
}

/* The play badge: shown only when the browser refused to start the clip on
   its own. It sits outside .record so the spin never carries it round, and
   the disc holds still while it waits, which reads as stopped rather than
   silently playing. */
.turntable-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 0.4rem;
  color: var(--saddle-deep);
  background: rgba(246, 241, 228, 0.94);
  box-shadow: 0 3px 8px rgba(40, 26, 10, 0.4), inset 0 0 0 1px rgba(108, 49, 23, 0.35);
  pointer-events: none;
}
.turntable.ready .turntable-play { display: flex; }
.turntable.ready .record { animation-play-state: paused; }
.turntable.ready .turntable-hint { color: var(--saddle-deep); }
.turntable-deck:hover .turntable-play { background: #fff; }

/* ---------------- in-flow object pair ----------------
   The narrow-screen stand-in for margin objects that have no other home.
   These are cut-out PNGs, so they get their own drop shadows and no frame —
   a border would draw a box round a transparent image. Hidden from 1280px up,
   where the objects move out into the margins instead. */

.object-pair { margin: 2.2rem 0 2.6rem; }
.object-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: center;
  justify-items: center;
}
.object-two img {
  width: 100%;
  max-width: 11rem;
  filter: drop-shadow(0 12px 16px rgba(58, 42, 18, 0.26));
}
.object-two img:first-child { transform: rotate(1.4deg); }
.object-two img:last-child { transform: rotate(-1.2deg); }
.object-pair figcaption {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 0.9rem;
  text-align: center;
}

@media (max-width: 460px) {
  .object-two { gap: 1.1rem; }
}

/* ---------------- jump row ----------------
   The service details sit ~19 screens down on a phone, and they are the most
   time-critical thing on the page. This puts them one tap from the top. */

.page-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.9rem;
  margin: 1.5rem auto 0;
  max-width: 40rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.page-jump a {
  color: var(--saddle-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(142, 74, 43, 0.35);
  padding: 0.35rem 0.1rem;
}
.page-jump a:hover { border-bottom-color: var(--saddle); }
.page-jump span { color: var(--gold); }

@media print { .page-jump { display: none !important; } }

/* ---------------- guestbook ----------------
   Entries read as a column of short notes on the same paper, not as blog
   comments. Every entry is held for review before it appears here. */

.guestbook { margin: clamp(3.4rem, 9vh, 5.5rem) auto 0; max-width: 44rem; }

.gb-thanks {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--saddle-deep);
  background: rgba(142, 74, 43, 0.07);
  border: 1px solid rgba(142, 74, 43, 0.3);
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  text-align: center;
}

.gb-entries { list-style: none; margin: 0 0 2.6rem; padding: 0; }
.gb-entry {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.gb-entry:first-child { border-top: 1px solid var(--line-soft); }
.gb-body { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
.gb-body p { margin: 0 0 0.6rem; }
.gb-meta {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.gb-name { font-weight: 700; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; }
.gb-empty {
  font-style: italic;
  color: var(--muted);
  text-align: center;
  margin: 0 0 2.4rem;
}

.gb-form-title {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  text-align: center;
}
.gb-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0 auto 1.6rem;
  max-width: 30rem;
}
.gb-field { margin: 0 0 1.1rem; }
.gb-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.gb-hint { font-weight: 400; text-transform: none; letter-spacing: 0.02em; color: var(--muted); }
.gb-field input,
.gb-field textarea {
  width: 100%;
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.7);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
}
.gb-field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.gb-field input:focus,
.gb-field textarea:focus {
  outline: 2px solid var(--saddle);
  outline-offset: 1px;
  border-color: var(--saddle);
}

/* the honeypot: present for bots, gone for everyone else */
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gb-actions { margin: 0; text-align: center; }
.gb-actions input[type="submit"] {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--saddle-deep);
  border: 1px solid var(--saddle-deep);
  border-radius: 999px;
  padding: 0.75rem 1.8rem;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
}
.gb-actions input[type="submit"]:hover { background: var(--saddle); }

@media print {
  .gb-form, .gb-thanks, .gb-form-title, .gb-note, .gb-field, .gb-actions { display: none !important; }
}