@font-face{font-family:'Syne';src:url('../fonts/heading-syne.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Bitter';src:url('../fonts/body-bitter.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* ============================================================================
   DS-01 CUTOUT CITY JOURNAL — Bramble & Paw Pet Grooming
   One stylesheet. No framework, no CDN, no preprocessor.
   Section order:
     1  tokens
     2  reset + base
     3  focus, skip link
     4  masthead (56px) + compact drawer + desktop nav
     5  layout: wrap, broadsheet asymmetric grids, section rhythm
     6  typography scale
     7  buttons, links, chips
     8  hero cutout collage (masks, rotation, tape, halftone)
     9  cards: service, gallery, staff, review, faq
     10 contact CTA band, subscribe band
     11 footer (three-column newspaper)
     12 forms + status region
     13 404 motif
     14 responsive contract 320 / 360 / 375 / 390 / 414 / 768 / 1024 / 1600
     15 reduced motion, print, forced colours
   ========================================================================= */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  /* colour — pet grooming */
  --paper:      #111B1C;
  --paper-2:    #2A373C;
  --paper-3:    #3E5257;
  --ink:        #F2F7F7;
  --ink-soft:   #D3DEDF;
  --ink-muted:  #B9C9CA;
  --rule:       #456065;
  --red:        #EFCA9F;
  --red-dark:   #F5D8B7;
  --green:      #83D8E2;
  --amber:      #DBF29C;
  --focus:      #EFCA9F;
  --on-action:  #101318;
  --surface-2:  #1F2C2E;
  --ok-bg:      #1E3A32;
  --err-bg:     #3B2426;
  --err-dark:   #4A1C16;
  --status-dark:#17282A;
  --band-bg:    #0B1314;
  --band-text:  #FFFFFF;
  --foot-text:  #E8F1F1;
  --foot-meta:  #C3D3D4;

  /* frame + texture -- section 9 replaces section 4's frame colours */
  --frame:      #6DAAB0;
  --frame-w:    2px;
  --shadow:     rgba(2, 5, 6, .62);
  --cut-shadow: rgba(2, 5, 6, .66);
  --halftone:   rgba(242, 247, 247, .05);
  --halftone-2: rgba(242, 247, 247, .22);
  --tape-edge:  rgba(242, 247, 247, .28);
  --tape:       rgba(219, 242, 156, .72);
  --amber-soft: rgba(219, 242, 156, .45);
  --halftone-3: rgba(131, 216, 226, .34);
  --media-filter: saturate(.88) contrast(1.08);

  /* type */
  --display:var(--catalog-font-heading);
  --text:var(--catalog-font-body);

  /* spacing scale — 4 8 12 16 24 32 48 64 96 128 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* geometry */
  --measure: 68ch;
  --measure-review: 52ch;
  --max: 1180px;
  --gutter: 16px;
  --sect: 72px;
  --header-h: 56px;
  --radius: 20px;
  --control-h: 44px;

  /* motion */
  --t: 220ms cubic-bezier(.2, .8, .2, 1);
  --t-long: 600ms cubic-bezier(.2, .8, .2, 1);
}


/* self-hosted, two files only */



/* section 9 media grading -- the emblem is inline SVG, so
   this reaches photographs only */
img { filter: var(--media-filter); }

/* ------------------------------------------------------- 2 reset and base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /*
   * The masthead is sticky and 56px tall, so an anchor that lands at the top of
   * the scrollport lands UNDERNEATH it. Measured: jumping to a target put its
   * first 56px behind the bar at both 390 and 1600. That hit the skip-to-content
   * link on every page -- the one anchor a keyboard user has no way around --
   * and the three FAQ group jumps. Padding the scrollport fixes every anchor at
   * once, including any added later, and follows --header-h if the bar changes.
   * The +16px is the breathing room the legal sections were already carrying as
   * their own scroll-margin-top: 72px, which is now redundant and removed, since
   * scroll-margin and scroll-padding ADD and would have offset those by 144px.
   */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  /* faint halftone ground — the signature texture, drawn, never an image file */
  background-image:
    radial-gradient(circle at 1px 1px, var(--halftone) 1px, transparent 1.6px);
  background-size: 7px 7px;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; border: 0; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; }
p, ul, ol, dl, figure, table { margin: 0; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }

hr { border: 0; border-top: 2px solid var(--rule); margin: 0; }

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

/* --------------------------------------------------- 3 focus, skip, a11y */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* keep a ring for browsers without :focus-visible support */
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s5);
  font-weight: 700;
}
.skip:focus {
  left: var(--s3);
  top: var(--s3);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- 4 the masthead */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 3px double var(--rule);
}

.masthead__inner {
  height: var(--header-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  max-width: min(var(--max), 100%);
  box-sizing: border-box;
}

/* stacked editorial wordmark, fixed box so the 56px bar cannot move on font swap */
.wordmark {
  display: block;
  flex: 0 0 auto;
  height: 44px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  padding-right: var(--s4);
  border-right: 2px solid var(--rule);
}
.wordmark b {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 24px;
  height: 24px;
  overflow: hidden;
}
.wordmark span {
  display: block;
  font-family: var(--text);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 20px;
  height: 20px;
  overflow: hidden;
  color: var(--ink-soft);
}

.nav-desktop { display: none; }
.nav-desktop ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop a {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t), color var(--t);
}
.nav-desktop a:hover { border-bottom-color: var(--red); }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--ink); }

.masthead__spacer { flex: 1 1 auto; }

/* compact disclosure drawer — native <details>, works with JS disabled */
.drawer { position: relative; flex: 0 0 auto; }
.drawer:not([open]) > .drawer__panel { display: none; }
@media (max-width: 360px) { .drawer { right: 8px; } }
.drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--control-h);
  padding: 0 var(--s3);
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after {
  content: "";
  width: 14px; height: 10px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px, 0 4px, 100% 4px, 100% 6px, 0 6px, 0 8px, 100% 8px, 100% 10px, 0 10px);
}
.drawer[open] > summary::after {
  clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px);
}
.drawer__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: max-content;
  min-width: 220px;
  background: var(--paper);
  border: var(--frame-w) solid var(--frame);
  box-shadow: 8px 8px 0 var(--shadow);
  padding: var(--s3);
}
.drawer__panel ul { list-style: none; margin: 0; padding: 0; }
.drawer__panel a {
  display: block;
  min-height: var(--control-h);
  line-height: calc(var(--control-h) - 8px);
  padding: 4px var(--s3);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--paper-3);
}
.drawer__panel li:last-child a { border-bottom: 0; }
.drawer__panel a:hover { background: var(--paper-2); color: var(--red-dark); }
.drawer__panel a[aria-current="page"] { color: var(--red-dark); }

/* ------------------------------------------------------------- 5 layout */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.sect { padding-top: var(--sect); padding-bottom: var(--sect); }
.sect--tight { padding-top: calc(var(--sect) * .6); padding-bottom: calc(var(--sect) * .6); }

/* the broadsheet: asymmetric at >=1024, never a single centered column */
.broadsheet { display: grid; gap: var(--s6); }
.broadsheet__lead { min-width: 0; }
.broadsheet__rail { min-width: 0; }

.rule-top { border-top: 3px double var(--rule); padding-top: var(--s5); }

.kicker {
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--s3);
}
.kicker--red { color: var(--red-dark); }

.measure { max-width: var(--measure); }
.measure-review { max-width: var(--measure-review); }


/* --------------------------------------------------------- 6 typography */
h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 96;
}
h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 64;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 24;
}
h4 {
  font-family: var(--text);
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lede {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: var(--measure);
}
.meta {
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.label {
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
}
.dropcap::first-letter {
  font-family: var(--display);
  font-size: 3.4em;
  line-height: .78;
  font-weight: 800;
  float: left;
  padding: 4px 10px 0 0;
  color: var(--red-dark);
}

/* --------------------------------------------------- 7 buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 10px 24px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  font-family: var(--text);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.btn--primary {
  background: var(--red);
  color: var(--on-action);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn--primary:hover {
  background: var(--red-dark);
  color: var(--on-action);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }


/*
 * Both form handlers disable the submit button for the duration of the request
 * (forms.js:114 and :151). Without a rule for it the button kept its full red,
 * its hover lift and its press while it was inert, so a second click during the
 * send looked exactly like the first. It reads as paper that has gone flat:
 * the drop shadow is withdrawn, the fill drops back to the muted paper tone,
 * and the lift and press are neutralised so hovering an inert control does
 * nothing. `cursor: default` rather than `not-allowed` -- the button is
 * working, not forbidden.
 *
 * The selector is doubled (`.btn.btn`) on purpose. Contextual skins like
 * `.sub-form .btn--primary`, which repaints the shadow amber for the dark
 * band, are also (0,2,0) and sit LATER in the file, so a plain `.btn:disabled`
 * lost the tie on source order and the inert button kept its amber shadow.
 * Measured, not assumed. Disabled is a state that must outrank every skin, so
 * it is raised to (0,3,0) once here rather than re-listed per context.
 */
.btn.btn:disabled,
.btn.btn[aria-disabled="true"] {
  background: var(--paper-2);
  color: var(--ink-muted);
  border-color: var(--ink-muted);
  box-shadow: none;
  cursor: default;
}
.btn.btn:disabled:hover,
.btn.btn:disabled:active,
.btn.btn[aria-disabled="true"]:hover {
  background: var(--paper-2);
  color: var(--ink-muted);
  transform: none;
  box-shadow: none;
}

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); }

.btn--book { padding: 8px 24px; min-height: 40px; }

.textlink {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.textlink:hover { text-decoration-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  background: var(--amber);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chip--plain { background: transparent; }

/* -------------------------------------------- 8 hero cutout photo collage */
.hero { padding-top: var(--s7); padding-bottom: var(--sect); }
.hero__grid { display: grid; gap: var(--s6); align-items: start; }

.hero h1 { margin-bottom: var(--s4); }
.hero .prop { font-size: 1.1875rem; line-height: 1.45; max-width: 34ch; margin-bottom: var(--s5); }

/* the collage: layered paper cutouts with torn edges, tape and drop shadow */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 12px;
}
.cut {
  position: relative;
  background: var(--paper);
  padding: 8px;
  box-shadow: 6px 8px 0 var(--cut-shadow);
  transform-origin: 50% 50%;
}
.cut img { width: 100%; height: auto; display: block; }
/* torn deckle edge, drawn as a mask so no image file is needed */
.cut--torn {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' preserveAspectRatio='none' viewBox='0 0 120 120'%3E%3Cpath fill='%23000' d='M2 4l6-2 5 3 6-2 5 2 6-3 5 2 6-2 5 3 6-2 5 2 6-3 5 2 6-2 5 3 6-2 5 2 6-3 5 2 4 1v110l-5 2-6-2-5 3-6-2-5 2-6-3-5 2-6-2-5 3-6-2-5 2-6-3-5 2-6-2-5 3-6-2-5 2-6-3-5 2-4-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' preserveAspectRatio='none' viewBox='0 0 120 120'%3E%3Cpath fill='%23000' d='M2 4l6-2 5 3 6-2 5 2 6-3 5 2 6-2 5 3 6-2 5 2 6-3 5 2 6-2 5 3 6-2 5 2 6-3 5 2 4 1v110l-5 2-6-2-5 3-6-2-5 2-6-3-5 2-6-2-5 3-6-2-5 2-6-3-5 2-6-2-5 3-6-2-5 2-6-3-5 2-4-1z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* strip of tape */
.cut::after {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(-1.2deg);
  background: var(--tape);
  border-left: 1px dashed var(--tape-edge);
  border-right: 1px dashed var(--tape-edge);
}
.cut--tape-left::after { left: 22px; transform: rotate(-1.5deg); }
.cut--tape-right::after { left: auto; right: 14px; transform: rotate(1.5deg); }

/* resting positions — this is exactly what an animation-off visitor sees */
.cut--a { grid-column: 1 / 5;  grid-row: 1 / 32; --rot: -1.4deg; transform: rotate(var(--rot)); z-index: 3; }
.cut--b { grid-column: 4 / 7;  grid-row: 20 / 46; --rot: 1.4deg;  transform: rotate(var(--rot)); z-index: 4; }
.cut--c { grid-column: 1 / 4;  grid-row: 34 / 56; --rot: 1.1deg;  transform: rotate(var(--rot)); z-index: 2; }

/* halftone patch behind the collage */
.collage::before {
  content: "";
  position: absolute;
  inset: -18px -10px auto -10px;
  height: 62%;
  z-index: 0;
  background-image: radial-gradient(circle at 2px 2px, var(--halftone-3) 1.6px, transparent 2.2px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(160deg, #000 12%, transparent 72%);
  mask-image: linear-gradient(160deg, #000 12%, transparent 72%);
}

/* the settle: only ever added on top of the resting state */
@media (prefers-reduced-motion: no-preference) {
  .cut--a { animation: settle-a var(--t-long) cubic-bezier(.2, .8, .2, 1) both; }
  .cut--b { animation: settle-b var(--t-long) cubic-bezier(.2, .8, .2, 1) 90ms both; }
  .cut--c { animation: settle-c var(--t-long) cubic-bezier(.2, .8, .2, 1) 170ms both; }
}
@keyframes settle-a {
  from { transform: translate3d(-14px, -16px, 0) rotate(-1.5deg); opacity: 0; }
  to   { transform: rotate(-1.4deg); opacity: 1; }
}
@keyframes settle-b {
  from { transform: translate3d(16px, -12px, 0) rotate(1.5deg); opacity: 0; }
  to   { transform: rotate(1.4deg); opacity: 1; }
}
@keyframes settle-c {
  from { transform: translate3d(-10px, 18px, 0) rotate(1.3deg); opacity: 0; }
  to   { transform: rotate(1.1deg); opacity: 1; }
}

/* ------------------------------------------------------------- 9 cards */
/* deliberately different geometry per page — no repeated equal three-card row */

/* services: staggered broadsheet entries with a hanging price */





/* gallery: an irregular composition, never an even grid */
.plates { display: grid; gap: var(--s5); }
.plate { margin: 0; background: var(--paper); }
.plate img {
  width: 100%;
  height: auto;
  border: var(--frame-w) solid var(--frame);
  box-shadow: 5px 6px 0 var(--shadow);
}
.plate figcaption {
  margin-top: var(--s3);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 3px solid var(--amber);
  padding-left: var(--s3);
}
.plate--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.plate--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.plate--spread img { aspect-ratio: 12 / 5; object-fit: cover; }
.plate__no {
  display: block;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.plate--square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* staff: portrait medallion + record, offset rows */
.record {
  display: grid;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 2px solid var(--rule);
}
.record:last-of-type { border-bottom: 2px solid var(--rule); }
.record__portrait {
  width: 100%;
  aspect-ratio: 100 / 122;
  border: var(--frame-w) solid var(--frame);
  background-color: var(--paper-2);
  box-shadow: 5px 6px 0 var(--shadow);
  --rot: -1.5deg;
  transform: rotate(var(--rot));
}
.record__body { min-width: 0; }
.record__folio { margin: 0 0 var(--s2); }
.record__bio { max-width: var(--measure); margin: var(--s3) 0 0; }
.record__cue {
  max-width: var(--measure);
  margin: var(--s4) 0 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--green);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.record__focus h4 { margin: 0 0 var(--s2); }
.record:nth-of-type(even) .record__portrait { --rot: 1.5deg; }
.record__portrait picture,
.record__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.record__role {
  display: inline-block;
  margin: var(--s2) 0 0;
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.focuses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }

/* =====================================================================
   REVIEWS -- R1 editorial pull-quote ledger (spec 16A, spec 17)
   A 38% identity rail that sticks while its quotation scrolls beside it, one
   lead quote set large and five smaller columns under it. Avatars sit in a
   fixed 80px box and are cropped at alternating 6deg, which spec 16A names
   as an exception to the shallow page-element tilt range.
   ===================================================================== */
.ledger { padding-bottom: var(--sect); }

.rev {
  display: grid;
  gap: var(--s4);
  padding: var(--s6) 0;
  border-top: 1px solid var(--rule);
}
.rev:last-of-type { border-bottom: 1px solid var(--rule); }

/* mobile: the rail lies down as an identity strip above the quotation */
.rev__rail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.rev__ava {
  display: block;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: var(--frame-w) solid var(--frame);
  background-color: var(--paper-2);
}
.rev__ava picture,
.rev__ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rev__ava--a { transform: rotate(-6deg); }
.rev__ava--b { transform: rotate(6deg); }
.rev__id { min-width: 0; }
.rev__who { margin: 0; font-family: var(--display); font-size: 1.125rem; font-weight: 800; }
.rev__who cite { font-style: normal; }
.rev__svc { margin: var(--s1) 0 0; font-size: .9375rem; }
.rev__when { margin: var(--s1) 0 0; font-size: .8125rem; color: var(--ink-soft); }
.rev__folio { margin: 0; }

.rev__quote { margin: 0; }
.rev__quote p {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.34;
}
.rev--lead .rev__quote p {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.14;
}

@media (min-width: 768px) {
  .rev { grid-template-columns: 38% 1fr; gap: var(--s7); align-items: start; }
  .rev__rail {
    display: block;
    position: sticky;
    top: var(--s5);
    border-right: 1px solid var(--rule);
    padding-right: var(--s5);
  }
  .rev__ava { margin-bottom: var(--s4); width: 88px; height: 88px; }
  .rev__folio { margin-top: var(--s4); }
  .rev--lead .rev__rail { border-right-color: var(--ink); }
}

/* faq: native details, grouped */
.qgroup { border-top: 3px double var(--rule); padding-top: var(--s4); }
.q {
  border-bottom: 2px solid var(--paper-3);
  padding: var(--s2) 0;
}
.q > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  min-height: 52px;
  padding: var(--s3) 0;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--amber);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
.q[open] > summary::before { content: "\2013"; background: var(--green); color: var(--on-action); border-color: var(--green); }
.q__body {
  margin: 0 0 var(--s4) 42px;
  padding: var(--s4);
  max-width: var(--measure);
  background-color: var(--paper);
  border-left: 3px solid var(--red);
}
.q__body p { margin: 0; }

/* the advice column's category index */
.qband { padding-bottom: var(--s6); }
.qband__h { margin: 0 0 var(--s4); font-size: 1rem; }
.qindex {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.qindex li { border-bottom: 1px solid var(--rule); }
.qindex__link {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s3) var(--s4);
  align-items: baseline;
  min-height: 52px;
  padding: var(--s4) 0;
  text-decoration: none;
  color: var(--ink);
}
.qindex__link:hover .qindex__t { text-decoration: underline; }
.qindex__n {
  grid-row: span 2;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red-dark);
}
.qindex__t {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
}
.qindex__c { font-size: .9375rem; color: var(--ink-soft); max-width: var(--measure); }

/* small stat/detail table used on contact + about */
/* numbered process */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: start; }
.steps li::before {
  content: counter(step);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 800;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  transform: rotate(-1.1deg);
}

.note {
  border-left: 4px solid var(--green);
  background: var(--paper-2);
  padding: var(--s4) var(--s5);
  max-width: var(--measure);
}

/* --------------------------------------- 10 contact CTA + subscribe band */
.cta-band {
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  background: var(--paper-2);
  padding: var(--sect) 0;
}
.cta-band__grid { display: grid; gap: var(--s5); align-items: center; }

.subscribe-band {
  background: var(--band-bg);
  color: var(--band-text);
  padding: calc(var(--sect) * .7) 0;
}
.subscribe-band h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.subscribe-band p { color: var(--foot-text); }
.subscribe-band a { color: var(--amber); }

/* -------------------------------------------------------- 11 the footer
   Four zones inside DS-01's three-column newspaper model: the brand and its
   summary, the nine pages plus Book, where the shop is and when it is open,
   and the column subscription. The signature device is the folio masthead
   rule at the top -- issue number, title, city -- which belongs to this
   design and is not carried into any other DS unit.
   Mobile 48px padding with 24px group gaps; desktop 80px padding with 32px
   column gaps; 13px labels against 16px useful text throughout. */
.foot {
  border-top: 6px solid var(--ink);
  padding: var(--s7) 0;
}

.foot__mast {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  font-family: var(--display);
}
.foot__issue {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--red-dark);
}
.foot__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.foot__city {
  margin-left: auto;
  font-family: var(--text);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.foot__cols { display: grid; gap: var(--s5); }
.foot__zone { min-width: 0; }
.foot h2 {
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--rule);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__lede { margin: 0; max-width: var(--measure); font-size: 1rem; line-height: 1.55; }
.foot__addr { margin: 0 0 var(--s4); font-size: 1rem; line-height: 1.55; }
.foot__addr:last-of-type { margin-bottom: var(--s5); }

/* two compact columns on mobile, one ordered list of nine */
.foot__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s4); }
.foot__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
}
.foot__act { margin: var(--s4) 0 0; }

.foot .hours { margin: 0; font-size: 1rem; }


.foot__base {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 2px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: baseline;
  font-size: .8125rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------- 12 forms */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.field > label { font-size: .875rem; line-height: 1.35; font-weight: 800; }
.field .hint { font-size: .8125rem; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px var(--s3);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.4;
}
textarea { min-height: 168px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 13px) 50%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; padding-right: 40px; }
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: var(--red-dark); }

.err {
  display: block;
  margin-top: var(--s1);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--red-dark);
  min-height: 1.2em;
}

.consent { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); }
.consent input { width: 22px; height: 22px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--green); }
.consent label { font-size: .875rem; line-height: 1.45; }

.status {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  padding: var(--s4);
  margin-bottom: var(--s5);
  font-weight: 700;
}
.status[data-state="idle"] { display: none; }
.status[data-state="pending"] { border-color: var(--green); }
.status[data-state="ok"] { border-color: var(--green); background: var(--ok-bg); }
.status[data-state="error"] { border-color: var(--red-dark); background: var(--err-bg); }

/* subscribe form sits on the dark band */
.sub-form { display: grid; gap: var(--s3); }
.sub-form label { font-size: .875rem; font-weight: 800; }
.sub-form input {
  background: var(--paper);
  border-color: var(--paper);
}
.sub-form .btn--primary { box-shadow: 5px 5px 0 var(--amber); border-color: var(--paper); }
.sub-form .err { color: var(--amber); }
.sub-form .status { background: var(--status-dark); color: var(--band-text); border-color: var(--band-text); }
.sub-form .status[data-state="ok"] { background: var(--green); border-color: var(--amber); }
.sub-form .status[data-state="error"] { background: var(--err-dark); border-color: var(--amber); }

/* -------------------------------------------------------- 13 404 motif
   A misprinted classified: the folio is struck twice and slightly out of
   register, the routes are set as three ruled classified entries, and one
   paper cutout arrow points into them. The whole recovery block is kept
   short enough to sit inside one viewport from 768px upward. */
.gone { padding-block: var(--s7) var(--s8); }
.gone__sheet { display: grid; gap: var(--s6); align-items: start; }
.gone__lead, .gone__rail { min-width: 0; }

.gone__slug {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 3px double var(--rule);
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gone__slug .tab { margin-right: var(--s3); }

.gone__mark {
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: .8;
  font-weight: 900;
  color: var(--paper-3);
  letter-spacing: -.05em;
  -webkit-text-stroke: 2px var(--ink);
  /* the second impression, struck a few points off register */
  text-shadow: 5px 4px 0 var(--amber-soft);
  transform: rotate(-1.8deg);
  transform-origin: left bottom;
}
.gone__lede { margin-top: var(--s4); }

/* the one cutout arrow: a clipped paper shape, not a glyph */
.gone__arrow {
  display: block;
  width: 76px;
  height: 62px;
  margin: 0 0 var(--s4);
  background-color: var(--red-dark);
  clip-path: polygon(0 38%, 56% 38%, 56% 8%, 100% 50%, 56% 92%, 56% 62%, 0 62%);
  transform: rotate(18deg);
  filter: drop-shadow(3px 4px 0 var(--cut-shadow));
}
.gone__ask {
  margin: 0;
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--rule);
}
.gone__routes { list-style: none; margin: 0; padding: 0; }
.gone__routes li { border-bottom: 1px dashed var(--ink); }
.gone__routes a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  min-height: 56px;
  padding: var(--s3) 0;
  text-decoration: none;
}
.gone__routes a:hover .gone__t { text-decoration: underline; }
.gone__n {
  grid-row: span 2;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--red-dark);
}
.gone__t { font-family: var(--display); font-size: 1.125rem; font-weight: 800; }
.gone__c { font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }

@media (min-width: 768px) {
  .gone { padding-block: var(--s6) var(--s7); }
  .gone__sheet { grid-template-columns: 1fr 300px; column-gap: var(--s7); }
  .gone__rail { border-left: 1px solid var(--rule); padding-left: var(--s6); }
}
@media (min-width: 1024px) {
  .gone__sheet { grid-template-columns: 1fr 340px; column-gap: var(--s8); }
}

/* ------------------------------------------ 14 the responsive contract */

/* 320 base: 16px gutters, single column, hero crop 4:5 */
.hero__media { --hero-ratio: 4 / 5; }
.cut--a img { aspect-ratio: var(--hero-ratio); object-fit: cover; }
.cut--b img, .cut--c img { aspect-ratio: 1 / 1; object-fit: cover; }
.collage { min-height: 380px; }

/* 360 */
@media (min-width: 360px) {
  :root { --gutter: 18px; }
}
/* 375 — paired actions only when each can hold 148px, else they stack at 12px */
@media (min-width: 375px) {
  :root { --gutter: 20px; }
  .actions > .btn { flex: 1 1 148px; }
}
/* 390 — the hero crop may widen to 3:4 */
@media (min-width: 390px) {
  .hero__media { --hero-ratio: 3 / 4; }
  .collage { min-height: 420px; }
}
/* 414 — two compact metadata columns allowed */
@media (min-width: 414px) {
  :root { --gutter: 24px; }
  .actions > .btn { flex: 0 0 auto; }
}
/* 768 — desktop identity begins */
@media (min-width: 768px) {
  :root { --gutter: 36px; --sect: 80px; }
  body { font-size: 1.0625rem; }
  h1 { font-size: clamp(3.25rem, 7vw, 7rem); line-height: .94; letter-spacing: -.035em; }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
  .hero__media { --hero-ratio: 4 / 5; }
  .collage { min-height: 520px; }
  .broadsheet { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .plates { grid-template-columns: repeat(2, 1fr); }
  .plate--spread { grid-column: 1 / -1; }
  .record { grid-template-columns: 288px 1fr; column-gap: var(--s6); }
  .record__portrait { width: 288px; }
  .cta-band__grid { grid-template-columns: 1.35fr 1fr; gap: var(--s7); }
  .foot { padding: 80px 0; }
  .foot__cols { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .foot__nav { grid-template-columns: 1fr; }
  .foot__base { margin-top: var(--s6); padding-top: var(--s6); }
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); }
}
/* 1024 — the full asymmetric broadsheet, desktop nav replaces the disclosure */
@media (min-width: 1024px) {
  :root { --gutter: 48px; --sect: 88px; }
  .nav-desktop { display: block; }
  .drawer { display: none; }
  .hero__grid { grid-template-columns: 1.08fr 1fr; gap: var(--s8); }
  .collage { min-height: 600px; }
  /* the asymmetry that must survive: 7 / 5, not 1 / 1, and never centred */
  .broadsheet { grid-template-columns: 7fr 5fr; gap: var(--s8); }
  .broadsheet--flip { grid-template-columns: 5fr 7fr; }
  .broadsheet--rail { grid-template-columns: 8.4fr 3.6fr; }
  .plates { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
  .plate--wide { grid-column: span 4; }
  .plate--tall { grid-column: span 2; }
  .plate--square { grid-column: span 3; }
  .record { grid-template-columns: 288px 1.5fr 1fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .foot__cols { grid-template-columns: 2.2fr 1.5fr 1.3fr; gap: 40px; }
}

/* --------------------------- 15 reduced motion, print, forced colours */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (forced-colors: active) {
  .btn, .cut, .plate img, .rev__ava, .drawer__panel { border: 2px solid ButtonText; }
  .cut::after, .collage::before { display: none; }
}

@media print {
  .masthead, .subscribe-band, .cta-band, .drawer { display: none; }
  body { background: #FFFFFF; }
  .cut, .plate img, .record__portrait { box-shadow: none; }
}

/* ------------------------------------- 16 masthead fit + small additions */
/*
 * At 320px the 56px bar has 288px of usable width. A stacked wordmark, a
 * 24px-padded primary action and a disclosure do not all fit inside it, and
 * the primary action's 24px padding is a fixed requirement. The Book action
 * therefore leaves the bar below 768px and leads the drawer panel instead,
 * where it is still one keystroke away and still works with JS disabled.
 */
.btn--book { display: none; }
@media (min-width: 768px) { .btn--book { display: inline-flex; } }

.drawer__panel .book a {
  background: var(--red);
  color: var(--on-action);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: var(--s3);
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .875rem;
}
.drawer__panel .book a:hover { background: var(--red-dark); color: var(--on-action); }

/* the hero proposition, one sentence, held short on purpose */
.prop { font-size: 1.1875rem; line-height: 1.45; max-width: 34ch; margin-bottom: var(--s5); }

/* a plain unordered list that keeps the broadsheet rhythm */
.tick { list-style: none; margin: 0; padding: 0; }
.tick li { padding: var(--s3) 0; border-bottom: 1px solid var(--paper-3); }
.tick li:first-child { border-top: 1px solid var(--paper-3); }

/* the five platform links, sitting under the hours in the third footer zone.
   44px targets because they are the smallest tap targets on the page, and a
   1px rule rather than a filled chip so they read as pressed marks on paper
   like everything else in this footer. */
.foot__social {
  display: flex;
  flex-wrap: wrap;
  /* 8px, not 12px: the third footer zone is the narrowest of the three, and
     five 44px targets plus four 8px gaps is 252px against the zone's 261px.
     12px wraps the fifth mark onto a line of its own at 1280. */
  gap: var(--s2);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}
.foot__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.foot__social a:hover {
  color: var(--paper);
  background: var(--red);
  border-color: var(--red);
  text-decoration: none;
}
/* the ring colour is --focus, the one section 4 names. Do NOT reach for a
   token this sheet has not defined: var() on an undefined property is invalid
   at computed-value time, the declaration becomes `unset`, and outline-style
   lands on none -- which is how the hair-salon copy of this block shipped
   with no focus ring at all. */
.foot__social a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.foot__social .soc { width: 22px; height: 22px; display: block; }

/* the hours table in the footer and on contact */
.hours { margin: 0; }
.hours div { display: flex; gap: var(--s3); padding: 3px 0; }
.hours dt { flex: 0 0 96px; font-weight: 800; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.hours dd { margin: 0; font-size: .875rem; }

/* subscribe field colours on the dark band */
.subscribe-band .field > label { color: var(--paper); }
.subscribe-band .meta { color: var(--foot-meta); }
.subscribe-band .meta a { color: var(--amber); }

/* the staff record's third column at 1024 */
.record__focus { min-width: 0; }

/* gallery: the eight-plate composition never resolves to an even grid */
@media (min-width: 1024px) {
  .plates .plate:nth-child(1) { grid-column: 1 / -1; }
  .plates .plate:nth-child(2) { grid-column: span 2; }
  .plates .plate:nth-child(3) { grid-column: span 4; }
  .plates .plate:nth-child(4) { grid-column: span 3; }
  .plates .plate:nth-child(5) { grid-column: span 3; }
  .plates .plate:nth-child(6) { grid-column: span 2; }
  .plates .plate:nth-child(7) { grid-column: span 2; }
  .plates .plate:nth-child(8) { grid-column: span 2; }
}

/* the two-portrait home preview: authored medallions, not a three-card row */
.duo { display: grid; gap: var(--s6); }
.duo figure { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); align-items: start; }
.duo figure > div:first-child {
  width: 96px; height: 96px;
  border: var(--frame-w) solid var(--frame);
  background: var(--paper-2);
  box-shadow: 4px 5px 0 var(--shadow);
  --rot: -1.5deg;
  transform: rotate(var(--rot));
}
.duo figure:nth-child(even) > div:first-child { --rot: 1.5deg; }
.duo figure picture,
.duo figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   ISSUE-NUMBER SYSTEM  (spec 17, site-wide)
   Five devices -- folios, 1px rules, amber annotation tabs, torn edges and
   one shallow rotation range -- used on every page and never all at once in
   a single section. Each page below picks two or three of them.
   ===================================================================== */

/* 01-09 folios: the issue number a broadsheet prints beside a section */
.folio {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.folio::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--rule);
}
.folio--lg { font-size: 1.125rem; color: var(--ink); }

/* the 1px rule -- distinct from the 2px and 3px double rules already here */
.rule-hair { border-top: 1px solid var(--rule); }

/* amber annotation tab: a marker pasted onto the edge of a block */
.tab {
  display: inline-block;
  padding: 3px var(--s3);
  background: var(--amber);
  color: var(--ink);
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
}

/* torn paper edge, 18px to 34px, drawn as a mask so nothing can overflow */
.torn {
  position: relative;
  background-color: var(--paper-2);
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.torn::before,
.torn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  background-color: var(--paper);
  background-image:
    linear-gradient(-46deg, var(--paper-2) 33%, transparent 33%),
    linear-gradient(46deg, var(--paper-2) 33%, transparent 33%);
  background-size: 26px 22px;
  background-repeat: repeat-x;
}
.torn::before { top: 0; }
.torn::after { bottom: 0; transform: scaleY(-1); }
.torn--deep { padding-top: var(--s7); padding-bottom: var(--s7); }
.torn--deep::before,
.torn--deep::after { height: 32px; background-size: 38px 32px; }

/* the one rotation range, as two named tilts */
.tilt-a { transform: rotate(-1.2deg); }
.tilt-b { transform: rotate(1.3deg); }


/* =====================================================================
   SERVICES -- SV1 editorial rate sheet (spec 16A)
   A narrow left rail carries the category, the service number and the price;
   a wider right column carries everything a decision actually needs. Rows are
   ruled at 1px and never fall below 72px on the desktop composition.
   ===================================================================== */
.rate-sheet { padding-bottom: var(--sect); }

.rate {
  display: grid;
  gap: var(--s3);
  padding: var(--s5) 0;
  min-height: 72px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.rate:last-of-type { border-bottom: 1px solid var(--rule); }

/* the rule extension and the tinted number, on hover and on keyboard focus
 * alike -- a pointer-only affordance is not an affordance */
.rate::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transition: width var(--t-mid, 220ms) cubic-bezier(.2, .8, .2, 1);
}
.rate:hover::after,
.rate:focus-within::after { width: 24px; }
.rate:hover .rate__num,
.rate:focus-within .rate__num { color: var(--red-dark); }

/* mobile: the price rail lies down as a metadata strip above the description */
.rate__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
}
.rate__cat {
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}
.rate__num {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-soft);
  margin: 0;
  transition: color var(--t-mid, 220ms) cubic-bezier(.2, .8, .2, 1);
}
.rate__price {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red-dark);
  margin: 0 0 0 auto;
}
.rate__pnote {
  font-size: .75rem;
  color: var(--ink-soft);
  margin: 0;
  width: 100%;
}
.rate__body { min-width: 0; }
.rate__name { margin: 0 0 var(--s3); }
.rate__desc { max-width: var(--measure); margin: 0; }
.rate__detail { margin-top: var(--s4); }
.rate__label {
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}
.rate__incl {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.rate__incl li {
  padding: 2px 0 2px var(--s5);
  position: relative;
  font-size: .9375rem;
}
.rate__incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 12px;
  height: 1px;
  background: var(--rule);
}
.rate__bound {
  margin-top: var(--s4);
  max-width: var(--measure);
  font-size: .9375rem;
  border-left: 3px solid var(--amber);
  padding-left: var(--s3);
}
.rate__meta {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
}
.rate__dur {
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  padding: 3px var(--s3);
  white-space: nowrap;
}
.rate__best { font-size: .9375rem; color: var(--ink-soft); flex: 1 1 16rem; }
.rate__act { margin-top: var(--s4); }
.rate__plate { display: none; }

/* the one featured signature service */
.rate--featured { background-color: var(--paper-2); padding: var(--s6) var(--s5); }
.rate--featured .rate__name { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02; }
.rate--featured .rate__price { font-size: 2.5rem; }

/* the illustrated inset after every third service */
.rate-inset {
  margin: 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--s4);
}
.rate-inset svg {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--ink);
  transform: rotate(-1.2deg);
}
.rate-inset--b svg { transform: rotate(1.3deg); }
.rate-inset figcaption {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: var(--measure);
}

@media (min-width: 768px) {
  /* above the fold of a tablet the rail stands up again as a true rail */
  .rate { grid-template-columns: 190px 1fr; gap: var(--s6); align-items: start; }
  .rate__rail { display: block; }
  .rate__cat { margin-bottom: var(--s3); }
  .rate__num { font-size: 2rem; margin-bottom: var(--s2); }
  .rate__price { margin: 0; font-size: 2rem; }
  .rate__pnote { margin-top: var(--s1); }
  .rate-inset { grid-template-columns: 220px 1fr; align-items: center; gap: var(--s6); }
}
@media (min-width: 1024px) {
  .rate--featured { grid-template-columns: 190px 1fr 260px; }
  .rate--featured .rate__plate { display: block; }
  .rate--featured .rate__plate img {
    width: 100%;
    height: auto;
    border: var(--frame-w) solid var(--frame);
    box-shadow: 5px 6px 0 var(--shadow);
    transform: rotate(1.3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rate::after, .rate__num { transition-duration: 0.01ms; }
}

/* =====================================================================
   HOME DEVICES  (spec 17)
   A 36px ticker under the cutout hero, a two-column proof strip in place of
   the old preview rows, and one oversized standing quote between the Services
   half of the page and the Gallery half.
   ===================================================================== */

/* the ticker: a fixed 36px band, so it can never move the hero or the fold.
 * The row scrolls sideways inside the band rather than wrapping, and the band
 * is a focusable group so a keyboard can reach the end of it. */
.ticker {
  background-color: var(--ink);
  border-bottom: 3px solid var(--amber);
}
.ticker__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ticker__scroll::-webkit-scrollbar { display: none; }
.ticker__scroll:focus-visible { outline-offset: -3px; }
.ticker__row {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--max);
  height: 36px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--text);
  font-size: .8125rem;
  line-height: 1;
  color: var(--paper);
}
.ticker__row > li + li { margin-left: var(--s4); }
.ticker__row > li + li::before {
  content: "\25C6";
  color: var(--amber);
  margin-right: var(--s4);
  font-size: .625rem;
}
.ticker__tab {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* the proof strip: what it is called, what it costs, and how to ask */
.proof { list-style: none; margin: 0; padding: 0; }
.proof__row {
  display: grid;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--paper-3);
}
.proof__row:first-child { border-top: 3px double var(--rule); }
.proof__what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
}
.proof__name { margin: 0; font-size: 1.25rem; }
.proof__price {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red-dark);
  margin: 0 0 0 auto;
}
.proof__dur {
  width: 100%;
  margin: 0;
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.proof__cue { min-width: 0; }
.proof__cue p { margin: 0; }
.proof__ask { margin-top: var(--s3) !important; font-size: .9375rem; }

/* the standing quote: the one oversized voice on the page */
.pullq { padding-block: var(--sect) var(--s7); }
.pullq__fig {
  margin: 0;
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  padding: var(--s7) 0;
}
.pullq__q { margin: 0; }
.pullq__q p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 18ch;
}
.pullq__q p::before { content: "\201C"; }
.pullq__q p::after { content: "\201D"; }
.pullq__by {
  margin-top: var(--s5);
  max-width: var(--measure);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.pullq__by .folio { margin-right: var(--s3); }

@media (min-width: 768px) {
  .proof__row { grid-template-columns: 240px 1fr; column-gap: var(--s6); align-items: start; }
  .proof__what { display: block; }
  .proof__price { margin: var(--s2) 0 0; font-size: 2rem; }
  .proof__dur { margin-top: var(--s2); }
  .pullq__fig { display: grid; grid-template-columns: 1fr 260px; column-gap: var(--s7); align-items: end; }
  .pullq__by { margin-top: 0; }
}

/* =====================================================================
   ABOUT  (spec 17)
   One place image at 5:4, a two-column editor's letter, and three vertical
   principles carrying large 01/02/03 numerals. There is no centred mission
   card on this page: the limits read as a torn-paper band with the heading
   on one side and the prose on the other.
   ===================================================================== */

.letter { display: grid; gap: var(--s6); }
.letter__body { min-width: 0; }
.letter__body .measure { margin-top: var(--s5); }
.letter__sign {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
}
.letter__sign .tab { margin-right: var(--s3); }
.letter__aside { min-width: 0; }
.letter__date { margin: var(--s4) 0 0; }

/* the one place image: a 3:2 file cropped to the 5:4 the spec asks for, so
 * the declared width and height still describe the file itself */
.plate--place img { aspect-ratio: 5 / 4; object-fit: cover; }

/* three vertical principles, each under its own oversized numeral */
.prin {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}
.prin__col {
  min-width: 0;
  border-top: 3px solid var(--ink);
  padding-top: var(--s3);
}
.prin__n {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--red-dark);
}
.prin__h { margin: var(--s3) 0 0; font-size: 1.125rem; }
.prin__p { margin: var(--s3) 0 0; max-width: var(--measure); }
.prin__src {
  margin: var(--s7) 0 0;
  padding-top: var(--s4);
  max-width: var(--measure);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.prin__src .tab { margin-right: var(--s3); }

/* the limits band sits inside a torn edge, so it needs clearance for it */
.limits { padding-top: var(--s9); padding-bottom: var(--s9); }
.limits .measure { margin: 0; }

@media (min-width: 768px) {
  .prin { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .letter { grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: start; }
  .prin { gap: var(--s7); }
}

/* =====================================================================
   CONTACT  (spec 17)
   A tear-off desk card carrying the form, set beside an address and hours
   column that is bold because it is typographic rather than because it is
   in a box. The card keeps the 2px dark frame, 48px controls, and a result
   region that is always on the page with its height already reserved.
   ===================================================================== */

.desk-sect { padding-bottom: var(--sect); }
.desk { display: grid; gap: var(--s7); align-items: start; }
.desk__info { min-width: 0; }

.desk__addr {
  margin: var(--s4) 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.desk__mail {
  margin: var(--s4) 0 0;
  font-family: var(--display);
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.desk__mail a { text-decoration: none; color: var(--red-dark); }
.desk__mail a:hover { text-decoration: underline; }
.desk__sub { margin: var(--s6) 0 0; padding-top: var(--s4); font-size: 1rem; }
.desk__hours { margin-top: var(--s3); font-size: 1rem; }
.desk__hours dt { font-weight: 800; }
.desk__note { margin-top: var(--s6); }
.desk__note .meta { margin-top: var(--s2); }
.desk__note p:last-child { margin-top: var(--s4); }

/* the card itself: a 2px frame, a perforated stub and a printer's shadow */
.tearoff {
  min-width: 0;
  border: var(--frame-w) solid var(--frame);
  background-color: var(--paper);
  padding: var(--s5);
  box-shadow: 6px 7px 0 var(--shadow);
}
.tearoff__stub {
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 2px dashed var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}
.tearoff__no {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--red-dark);
}
.tearoff__tear {
  font-family: var(--text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tearoff form { margin-top: var(--s5); }

.tearoff input[type="text"],
.tearoff input[type="email"],
.tearoff input[type="tel"],
.tearoff select { min-height: 48px; }

/* the reserved result region. The global rule hides an idle status, which
 * would let the first answer shove the whole form down the page; here it is
 * always displayed and the height is reserved for the longest sentence the
 * script can write at this width. */
.tearoff .status {
  display: block;
  min-height: 120px;
  background-color: var(--paper-2);
}
.tearoff .status[data-state="pending"] { background-color: var(--paper-2); }
.tearoff .status[data-state="ok"] { background-color: var(--ok-bg); }
.tearoff .status[data-state="error"] { background-color: var(--err-bg); }

@media (min-width: 768px) {
  .desk { grid-template-columns: 1fr 1fr; }
  .tearoff { padding: var(--s6); }
  .tearoff .status { min-height: 104px; }
}
@media (min-width: 1024px) {
  .desk { grid-template-columns: 4.6fr 7fr; gap: var(--s8); }
  .tearoff .status { min-height: 84px; }
}

/* =====================================================================
   PRIVACY  (spec 17)
   A restrained legal broadsheet: ten numbered sections at the 68ch
   measure, a contents column that becomes sticky once there is room for
   it beside the text, and one small halftone seal. The seal is the only
   decoration on the page and it sits under the document title -- the
   halftone is never laid behind a line of legal copy.
   ===================================================================== */

/* the seal: the design's own drawn halftone, cut to a disc */
.seal {
  margin: var(--s5) 0 0;
  width: 104px;
  height: 104px;
  border: var(--frame-w) solid var(--frame);
  border-radius: 50%;
  background-color: var(--paper-2);
  background-image:
    radial-gradient(circle at 2px 2px, var(--halftone-2) 1.5px, transparent 2.1px);
  background-size: 8px 8px;
  display: grid;
  place-items: center;
  padding: var(--s2);
  transform: rotate(-6deg);
}
.seal__t {
  background-color: var(--paper);
  padding: var(--s2) var(--s2);
  font-family: var(--text);
  font-size: .625rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.legal-sect { padding-bottom: var(--sect); }
.legal-grid { display: grid; gap: var(--s6); align-items: start; }

.legal__toc { min-width: 0; }
.legal__toch {
  font-family: var(--text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--rule);
}
.legal__list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.legal__list li { border-bottom: 1px solid var(--paper-3); }
.legal__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) 0;
  font-size: 1rem;
  text-decoration: none;
}
.legal__list a:hover { text-decoration: underline; }
.legal__ln {
  flex: 0 0 1.8em;
  font-family: var(--display);
  font-weight: 800;
  color: var(--red-dark);
}

.legal { list-style: none; margin: 0; padding: 0; min-width: 0; }
.legal__sec + .legal__sec {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.legal__n {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red-dark);
}
.legal__h { margin: var(--s2) 0 0; font-size: 1.375rem; }
.legal__h + p { margin-top: var(--s3); }
.legal p + p { margin-top: var(--s3); }
.legal p { max-width: var(--measure); }

@media (min-width: 1024px) {
  .legal-grid { grid-template-columns: 240px 1fr; gap: var(--s8); }
  .legal__toc { position: sticky; top: 72px; }
}

/* =====================================================================
   23  PAPER HOVER DEVICES
   DS-01's assigned treatment is layer lift, shadow separation, caption
   underline movement and controlled crop change -- explicitly NOT a carousel
   and not a luxury oval. Everything below is written in the devices the design
   already owns: the hard-edged offset paper shadow, the 2px ink border and the
   amber accent rule, so a hovered frame reads as a pasted-down cutting being
   picked up off the page rather than as a web card animating.

   Three constraints shape the rules:

   - Every tilted frame composes its hover transform as rotate(var(--rot))
     translate(...). A bare translate() would drop the tilt and snap the
     cutting straight, which is the one thing this design must not do.
   - Nothing here can move layout. transform, box-shadow and object-position
     are all off the layout path, so the crop can change inside a frame whose
     box never moves and the sweep's CLS stays at 0.
   - Guarded on (hover: hover) and (pointer: fine). A touch device has no
     hover to leave, so an unguarded rule leaves the last-tapped frame stuck
     lifted. The frames are non-interactive <figure>s and carry no information
     of their own, so nothing is withheld from a visitor who never sees these;
     where a frame sits inside something focusable, :focus-within is given the
     same treatment so a keyboard gets what a mouse gets.

   The reduced-motion block in section 15 already collapses every transition in
   the stylesheet to 1ms, so these arrive instantly for anyone who asked for
   that, with no separate opt-out needed here.
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

  /* --- gallery plates: lift, deepen, and shift the crop ---------------- */
  .plate img {
    transition: transform var(--t), box-shadow var(--t), object-position var(--t);
  }
  .plate:hover img {
    transform: translate(-3px, -4px);
    box-shadow: 9px 11px 0 var(--shadow);
    /* The cropped variants all use object-fit: cover, so moving the focal
       point up a little re-frames the picture inside an unchanged box. Small
       on purpose: enough to read as the cutting shifting under the hand, not
       enough to crop the subject out at any width. */
    object-position: 50% 42%;
  }

  /* --- the caption's amber rule, drawn on ------------------------------ */
  .plate__no {
    position: relative;
    width: fit-content;       /* still its own line; the rule ends with the text */
    padding-bottom: 3px;
  }
  .plate__no::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t);
  }
  .plate:hover .plate__no::after { transform: scaleX(1); }

  /* --- the hero cuttings ----------------------------------------------- */
  .cut { transition: transform var(--t), box-shadow var(--t); }
  .cut:hover {
    transform: rotate(var(--rot, 0deg)) translate(-4px, -5px);
    box-shadow: 10px 13px 0 var(--cut-shadow);
  }

  /* --- staff records and the home preview medallions -------------------- */
  .record__portrait,
  .duo figure > div:first-child {
    transition: transform var(--t), box-shadow var(--t);
  }
  .record__portrait img,
  .duo figure > div:first-child img {
    transition: object-position var(--t);
  }
  .record:hover .record__portrait,
  .record:focus-within .record__portrait {
    transform: rotate(var(--rot)) translate(-3px, -4px);
    box-shadow: 9px 11px 0 var(--shadow);
  }
  .record:hover .record__portrait img,
  .record:focus-within .record__portrait img { object-position: 50% 44%; }

  .duo figure:hover > div:first-child,
  .duo figure:focus-within > div:first-child {
    transform: rotate(var(--rot)) translate(-2px, -3px);
    box-shadow: 7px 8px 0 var(--shadow);
  }
}

/* ============================== the emblem ==============================

   A comb cut out of a stamped block, the top-right corner sliced away and
   the cut filled in the masthead red -- the same cut-paper operation the
   whole design is built on, reduced to 24 units.  It is drawn in
   `currentColor`, so it takes the ink of whatever sits around it, and it
   is boxed at a fixed size so the header never shifts when it paints.

   The wordmark becomes a two-row grid: the mark spans both rows on the
   left, the shop name and the city stack to its right.  The 44px height
   the header was already reserving is unchanged (24 + 20).             */

.emb { display: block; flex: 0 0 auto; width: 34px; height: 34px; }

.wordmark {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 24px 20px;
  column-gap: 10px;
  align-items: center;
}
.wordmark .emb { grid-column: 1; grid-row: 1 / 3; }
.wordmark b { grid-column: 2; grid-row: 1; }
.wordmark span { grid-column: 2; grid-row: 2; }

.foot__mast .emb { align-self: center; width: 30px; height: 30px; }

/* At 320px the header row is the tightest thing on the site: the wordmark,
   the rule beside it and the drawer button share 288px of content width. The
   mark is therefore cut to 22px and the space either side of it tightened, so
   the emblem costs 20px of that row rather than 44px and the drawer button
   still lands inside the viewport. */
@media (max-width: 359px) {
  .wordmark { column-gap: 6px; padding-right: var(--s2); }
  .wordmark .emb { width: 24px; height: 24px; }
  .wordmark b { font-size: 1rem; }
  .wordmark span { font-size: .625rem; letter-spacing: .2em; }
}


/* ------------------------------------------- section 9 friendly frame
   2px frame and 20px radius are tokens above. This is the 5px SOFT offset
   shadow recommendation 4 asks for; the reference's zero-blur cutout offset
   stays on everything that is not a frame. */
.drawer__panel,
.plate img,
.record__portrait,
.rev__ava,
.duo figure > div:first-child,
.rate--featured .rate__plate img,
.tearoff,
.seal {
  box-shadow: 5px 5px 12px var(--shadow);
}

/* The dark band inverts what these two rules were tuned for: white on the
   pale accent is unreadable, and a --paper field on a --band-bg band has no
   edge. Both take tokens this palette already carries. */
.sub-form .status[data-state="ok"] { color: var(--on-action); }
.sub-form input { background: var(--surface-2); border-color: var(--frame); }

/* Three more rules the dark inversion turns against itself. Each was written
   for a pale sheet, where --paper is the light and --ink is the dark, and
   this unit swaps the pair.

   .tab and the FILLED .chip lay --amber (#DBF29C here) under text that
   inherits --ink (#F2F7F7): two near-whites, 1.13:1 across eight nodes on
   four pages. --on-action is the token this palette already declares for
   text on a filled action and it is the right one for the same reason.
   .chip--plain is excluded by name -- it has no fill, sits on the dark
   sheet, and --on-action would erase it.

   .ticker fills with --ink, which makes it the one PALE band in a dark unit
   and puts .ticker__tab's --amber on it at 1.13:1. The band is re-laid on
   --band-bg, where every other full-width band in this unit already sits,
   and the row text moves to --foot-text with it; the amber tab and the amber
   diamond separators then read as they do in the reference.

   .subscribe-band's field label takes --paper to match the band under it --
   correct on a pale sheet, 1.07:1 against --band-bg here. --band-text is
   what the rest of that band already uses. */
.tab,
.chip:not(.chip--plain),
.q > summary::before { color: var(--on-action); }
::selection { background: var(--amber); color: var(--on-action); }

.ticker { background-color: var(--band-bg); }
.ticker__row { color: var(--foot-text); }

.subscribe-band .field > label { color: var(--band-text); }

/* The wordmark is the widest fixed box in the 56px bar, and this unit's name
   is what sets it. "Bramble & Paw" measures 121.5px of Newsreader at 320 in a
   bar with 288px to spend, and 136.5px at 360; the disclosure therefore lands
   4.4px past the viewport at 320 and 3.3px past it at 360. The town line is
   NOT the cause and was the first suspect, because refont.py moves it onto
   Atkinson Hyperlegible Next -- it measures 95.5px and 120.9px, comfortably inside the name.
   So the fix is one step of display size at each of the two widths that
   overflow, and nothing at 375 and above, which already fit. The 24px
   line-height and 24px height on .wordmark b are untouched, so the bar stays
   56px and no page shifts. */
@media (max-width: 359px) {
  .wordmark b { font-size: .875rem; }
}
@media (min-width: 360px) and (max-width: 374px) {
  .wordmark { padding-right: var(--s3); }
  .wordmark b { font-size: 1rem; }
}

/* fix pass: spacing and home-page helpers */
.cta-band h2 + p, .subscribe-band h2 + p { margin-top: var(--s3); }
.foot a { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .pullq__q p { text-indent: -.36em; }
  .proof--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .proof--two .proof__row { grid-template-columns: 1fr; }
  .proof--two .proof__what { display: flex; }
  .proof--two .proof__price { margin: 0 0 0 auto; font-size: 1.75rem; }
  .proof--two .proof__row:nth-child(2) { border-top: 3px double var(--rule); }
}
.revgrid { display: grid; gap: var(--s6); margin-top: var(--s6); }
.revgrid figure { margin: 0; border-top: 3px double var(--rule); padding-top: var(--s4); }
.revgrid blockquote { margin: 0; }
.revgrid blockquote p { margin: 0; font-family: var(--display); font-size: 1.125rem; line-height: 1.5; }
.revgrid figcaption { margin-top: var(--s3); font-size: .875rem; color: var(--ink-soft); }
.revgrid cite { font-style: normal; font-weight: 800; color: var(--ink); }
.visit { display: grid; gap: var(--s6); margin-top: var(--s6); }
.visit h3 { margin: 0 0 var(--s2); }
.visit p { margin: 0 0 var(--s3); }
.duo figcaption p.bio { margin: var(--s2) 0 0; font-size: .9375rem; line-height: 1.55; }
@media (min-width: 768px) {
  .visit { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
}
@media (min-width: 1024px) {
  .revgrid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s7); }
  .visit { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* fix pass: mobile collage */
@media (max-width: 767px) {
  .collage { min-height: 0; }
  .cut--a { grid-row: 1 / 29; }
  .cut--b { grid-row: 19 / 36; }
  .cut--c { grid-row: 30 / 47; }
}

/* fix pass: home photo grid */
.homeplates { display: grid; gap: var(--s6) var(--s5); margin-top: var(--s6); }
.homeplates .plate { margin: 0; }
.homeplates .plate img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) { .homeplates { grid-template-columns: 1fr 1fr; } .homeplates .plate img { aspect-ratio: 4 / 5; } }
@media (min-width: 1024px) { .homeplates { grid-template-columns: repeat(4, 1fr); } }
/* Catalogue typography identity — headings and reading text. */
:root{--catalog-font-heading:'Syne', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--catalog-font-body:'Bitter', Georgia, 'Times New Roman', serif;--display:var(--catalog-font-heading)}
html body,input,select,textarea,button{font-family:var(--catalog-font-body)}
h1,h2,h3,h4,h5,h6,.display,.disp,.brand,.logo{font-family:var(--catalog-font-heading)}

/* aajwebz-mailto-nowrap — an address is one token, never split across lines */
a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 380px) {
  a[href^="mailto:"] { font-size: 0.88em; }
}