/* DS-06 Sticker Playground -- Lacquer & Lark Nail Studio.
 *
 * Recommendation #4's palette, typefaces, frame treatment and media filter,
 * applied to the DS-06 master layout. The grid, the header model, the hero
 * composition, the footer model, the navigation behaviour, the spacing scale,
 * the responsive transformations and the signature effect are the base
 * build's, untouched.
 *
 * The measured contrast of every pairing this stylesheet ships:
 *
 *   ink on the page ground              15.27:1
 *   ink on the raised plane             16.48:1
 *   ink on the review panel             13.65:1
 *   ink on the staff panel              13.20:1
 *   ink in a form field                 13.65:1
 *   muted text on the ground             7.72:1
 *   muted text on the plane              8.33:1
 *   link text on the ground             12.67:1
 *   secondary accent text on the ground  9.28:1
 *   label on the primary action fill    13.95:1
 *   label on the hovered action fill    11.77:1
 *   label on the pressed action fill    16.19:1
 *   ink on the highlight fill            8.64:1
 *   ink on the accent fill              13.20:1
 *   footer text on the footer           14.76:1
 *   footer muted text on the footer     10.40:1
 *   the frame line on the ground         7.64:1
 *   the focus ring on the ground        12.67:1
 *
 * NO DEVIATIONS WERE NEEDED. The base build carried three, because its ground
 * was a cream and its three fills were saturated enough that ink on them
 * barely cleared 4.5:1 and its highlight could not clear 3:1 at all. This
 * palette is built the other way round -- a near-white ground, a very dark
 * navy action, a pale lavender highlight -- so every pairing above is taken
 * straight from Recommendation #4 with nothing moved. In particular the focus
 * ring is the action colour exactly as written, 3px solid at 3px offset, and
 * it measures 12.67:1 on the ground.
 *
 * ON THE TEXT-ON-MEDIA OVERLAY. Recommendation #4 specifies a top-to-bottom
 * darkening gradient for text set over a photograph. This layout sets no text
 * over a photograph anywhere: the hero copy sits beside the hero picture, and
 * every gallery, staff and place caption sits below its frame on the page
 * ground. There is therefore nothing to attach the overlay to, and shipping
 * the token unused would be a dead declaration the audit refuses. The media
 * filter it travels with -- saturate(.92) contrast(1.04) -- is live, on every
 * photograph, at the foot of this file.
 *
 * A LOAD-BEARING NOTE ON THE OUTLINES.
 *
 * Every outline in this build is a box-shadow, never a border. A border adds
 * its width to the painted box, and the `sizes` attribute on every image is a
 * promise about that box; a border on a frame makes every one of those
 * promises wrong. Recommendation #4's double 1px frame is composed textually
 * in --fr, so one declaration draws the inner hairline, the 2px breathing gap
 * in the page ground and the outer ring, and the colourway is passed in at
 * the point of use: `box-shadow: var(--fr) var(--act), var(--shadow);`.
 *
 * A SECOND LOAD-BEARING NOTE, ON THE WOBBLE.
 *
 * The signature effect is a hover rotation, and a rotation on an ancestor of
 * an <img> inflates that image's getBoundingClientRect -- which is exactly
 * what the audit measures the `sizes` promise against. No element that
 * contains a photograph is ever rotated here. The wobble is carried by the
 * authored marks, the number chips and the pill items, all of which contain
 * no image, and by ::after stickers pinned to the picture frames, which
 * rotate without moving the picture. The staff card is a photograph's
 * ancestor and therefore lifts on hover without turning.
 */




:root {
  --bg: #F8F3F1;          /* page background */
  --ink: #251B18;         /* primary text */
  --act: #0C2E4B;         /* primary action */
  --act-h: #0D3A5E;       /* action, hovered */
  --act-a: #0B2338;       /* action, pressed */
  --on-act: #FFFFFF;      /* the label that rides the action fill */
  --acc: #6D2E1D;         /* secondary accent */
  --hi: #BDB2F0;          /* highlight / selected-state fill, ink on it */
  --hi-h: #ACA0E8;
  --plane: #FDFCFC;       /* primary surface / cards */
  --panel-rev: #F2E6E3;   /* review panel */
  --panel-stf: #ECE1DA;   /* staff panel */
  --field: #F2E6E3;
  --muted: #5A4944;       /* secondary / muted text */
  --frame: #6C4337;       /* frames and borders */
  --act-t: #0C2E4B;       /* the action colour is already dark enough to set */
  --acc-t: #6D2E1D;       /* and so is the accent -- no mix() needed here */
  --acc-f: #ECE1DA;       /* the light accent FILL, ink on it */
  --ft-bg: #38241E;
  --ft-ink: #FFFFFF;
  --ft-muted: #E4D6D0;
  --ft-rule: rgba(255, 255, 255, .22);

  /* Section 4's spacing scale, entire. No length here is off it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1180px;
  --measure: 68ch;
  --measure-s: 52ch;
  --radius: 22px;         /* recommendation #4 */
  --pill: 999px;          /* the one permitted departure, for pills */
  --head-h:var(--catalog-font-heading);         /* 56px at every width, section 4 */
  --band-pad: 72px;

  --line: 1px;            /* recommendation #4's hairline */
  --drop: 1px;            /* how far a pressed control travels */

  /* The double 1px frame, composed textually so the colourway can be passed
     in at the point of use. --fr ends on a bare `0 0 0 4px`, so writing
     `box-shadow: var(--fr) var(--act), var(--shadow);` expands to an inner
     hairline in the frame colour, a 2px gap in the page ground and a 1px
     outer ring in whichever colourway that rule carries. */
  --fr: 0 0 0 1px var(--frame), 0 0 0 3px var(--bg), 0 0 0 4px;
  --shadow: 0 8px 24px rgba(37, 27, 24, .16);

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

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

  --gutter: 16px;

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. */
  --focus-ring: #0C2E4B;
  --focus-width: 3px;
  --focus-offset: 3px;

  --stk-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 4 L71 34 L101 22 L89 52 L119 60 L89 68 L101 98 L71 86 L60 116 L49 86 L19 98 L31 68 L1 60 L31 52 L19 22 L49 34 Z' transform='translate(7,8)' fill='%236D2E1D'/%3E%3Cpath d='M60 4 L71 34 L101 22 L89 52 L119 60 L89 68 L101 98 L71 86 L60 116 L49 86 L19 98 L31 68 L1 60 L31 52 L19 22 L49 34 Z' fill='%230C2E4B' stroke='%236C4337' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --stk-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 120'%3E%3Cpath d='M18 58 C18 28 40 10 66 10 C96 10 116 30 116 58 C116 90 94 108 64 108 C36 108 18 88 18 58 Z' transform='translate(8,9)' fill='%230C2E4B'/%3E%3Cpath d='M18 58 C18 28 40 10 66 10 C96 10 116 30 116 58 C116 90 94 108 64 108 C36 108 18 88 18 58 Z' fill='%23BDB2F0' stroke='%236C4337' stroke-width='6'/%3E%3Ccircle cx='66' cy='58' r='18' fill='none' stroke='%236C4337' stroke-width='6'/%3E%3C/svg%3E");
  --stk-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate(7,8)'%3E%3Ccircle cx='38' cy='38' r='30' fill='%236C4337'/%3E%3Ccircle cx='82' cy='60' r='22' fill='%236C4337'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%236C4337'/%3E%3C/g%3E%3Ccircle cx='38' cy='38' r='30' fill='%23BDB2F0' stroke='%236C4337' stroke-width='6'/%3E%3Ccircle cx='82' cy='60' r='22' fill='none' stroke='%236C4337' stroke-width='6'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%236D2E1D' stroke='%236C4337' stroke-width='6'/%3E%3C/svg%3E");
  --stk-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 96'%3E%3Cpath d='M6 74 L38 18 L70 74 L102 18 L134 74 L166 18 L198 74' transform='translate(0,10)' fill='none' stroke='%236C4337' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 74 L38 18 L70 74 L102 18 L134 74 L166 18 L198 74' fill='none' stroke='%230C2E4B' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 360px) { :root { --gutter: 18px; } }
@media (min-width: 375px) { :root { --gutter: 20px; } }
@media (min-width: 414px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 36px; --band-pad: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --band-pad: 88px; } }

/* ---- the ground ------------------------------------------------------- */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3, .mark__h, .price__v, .rev__no, .gal__no, .how__no, .proc__no,
.faq__q, .nf__h1, .ft__mark-h {
  font-family: var(--font-h);
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; margin: 0; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; margin: 0; }

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

a { color: var(--act-t); }
a:hover { color: var(--ink); }

/* ---- the sticker field over a strong grid ----------------------------- */
/*
 * The grid is deliberately ordinary: one content column, capped at 1180px,
 * with the same gutter everywhere. All of the freedom is in the layer above
 * it -- the authored marks, absolutely positioned inside the band, at angles
 * no grid would produce.
 *
 * `overflow: clip` is what makes that safe. A sticker pinned near the right
 * edge of a 320px viewport would otherwise open the document horizontally,
 * which is the responsive gate's first and loudest failure. Clip contains it
 * without creating a scroll container, which `hidden` would.
 *
 * The marks are PSEUDO-ELEMENTS, not markup, and that is a hard constraint
 * rather than a preference: a design module has exactly two HTML hooks, and
 * every other class in the document comes from the shared renderer. A class
 * invented in this stylesheet and emitted by nobody is a dead selector and
 * the audit refuses it. A pseudo-element is not a class, so the sticker field
 * can be as dense as it likes.
 */

.sec {
  position: relative;
  overflow: clip;
  padding-block: var(--band-pad);
}

.sec::before, .sec::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform var(--t);
}

/* Every sticker's resting angle is a CUSTOM PROPERTY rather than a literal
   inside its own transform, and that is what makes the animation-off state
   below one rule instead of twenty-six. The hover rule adds to whatever angle
   it finds; the reduced-motion rule puts that angle back. Neither has to know
   which band it is sitting in. */
.sec::before, .sec::after { --rot: 0deg; transform: rotate(var(--rot)); }

.sec > .wrap { position: relative; z-index: 1; }

/* Which band carries which mark, and where. Sizes are in the 4-to-128 scale
   doubled; positions are a per-cent of the band so they move with it. */
.hero::before {
  inset-block-start: 6%; inset-inline-end: -22px;
  width: 116px; height: 116px;
  background-image: var(--stk-a);
  --rot: -9deg;
}

.hero::after {
  inset-block-end: 4%; inset-inline-start: -26px;
  width: 128px; height: 118px;
  background-image: var(--stk-b);
  --rot: 12deg;
}

.svcp::before {
  inset-block-start: 24px; inset-inline-start: -30px;
  width: 112px; height: 112px;
  background-image: var(--stk-c);
  --rot: -14deg;
}

.appr::after {
  inset-block-end: 18px; inset-inline-end: -18px;
  width: 168px; height: 78px;
  background-image: var(--stk-d);
  --rot: 6deg;
}

.galp::before, .gal::before {
  inset-block-start: 20px; inset-inline-end: -24px;
  width: 120px; height: 110px;
  background-image: var(--stk-b);
  --rot: -7deg;
}

.stfp::after, .stf::after {
  inset-block-end: 24px; inset-inline-start: -28px;
  width: 108px; height: 108px;
  background-image: var(--stk-a);
  --rot: 15deg;
}

.rev::before, .revp::before {
  inset-block-start: 16px; inset-inline-start: -26px;
  width: 104px; height: 104px;
  background-image: var(--stk-c);
  --rot: 8deg;
}

.faqg::after, .faqp::after {
  inset-block-end: 20px; inset-inline-end: -20px;
  width: 176px; height: 82px;
  background-image: var(--stk-d);
  --rot: -5deg;
}

.prin::before, .proc::before {
  inset-block-start: 28px; inset-inline-end: -26px;
  width: 110px; height: 102px;
  background-image: var(--stk-b);
  --rot: 10deg;
}

.how::after, .limit::after, .focus::after {
  inset-block-end: 16px; inset-inline-end: -24px;
  width: 100px; height: 100px;
  background-image: var(--stk-a);
  --rot: -11deg;
}

.cta::before, .note::before, .alt::before {
  inset-block-start: -18px; inset-inline-start: -22px;
  width: 104px; height: 96px;
  background-image: var(--stk-c);
  --rot: 6deg;
}

.con::after, .abt::after, .place::after, .pv::after, .nf::after {
  inset-block-end: -20px; inset-inline-end: -22px;
  width: 160px; height: 74px;
  background-image: var(--stk-d);
  --rot: 4deg;
}

.phead::before {
  inset-block-start: 8px; inset-inline-end: -20px;
  width: 96px; height: 96px;
  background-image: var(--stk-a);
  --rot: 13deg;
}

/* Fingerprint row six: gentle sticker wobble on hover. The band's own marks
   answer to a hover anywhere in the band, which is what makes the field feel
   like one surface rather than a set of independent widgets. */
.sec:hover::before,
.sec:hover::after { transform: rotate(calc(var(--rot) + 3deg)) scale(1.04); }

/* Section 4's animation-off state, verbatim: "stickers keep deliberate
   rotations but do not wobble, float or enter". The rotations above are
   declarations, not animations, so switching the transition off is the whole
   of it -- and the hover rotation is suppressed with them. */
@media (prefers-reduced-motion: reduce) {
  .sec:hover::before,
  .sec:hover::after { transform: rotate(var(--rot)); }
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- the floating pill header ----------------------------------------- */
/*
 * 56px at every width, which section 4 states twice. The bar itself is not
 * the pill: `.hd` is a transparent strip that keeps the pill off the viewport
 * edge, and `.hd__in` is the pill, outlined and dropped in the flat shadow
 * that every sticker on the page carries.
 *
 * It is sticky rather than fixed. Fixed takes the header out of flow and
 * leaves a 56px hole at the top of every page that has to be padded back in
 * by hand; sticky keeps the flow intact, which is also why this build starts
 * at CLS 0 and stays there.
 */

.hd {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--bg);
  padding: var(--s3) var(--gutter);
}

.hd__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--head-h);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--s4);
  background: var(--plane);
  border-radius: var(--pill);
  box-shadow: var(--fr) var(--acc), var(--shadow);
}

.mark {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
}

.mark__h { font-size: 1.125rem; letter-spacing: -.01em; }

.mark__amp { color: var(--acc-t); padding-inline: 1px; }

.mark__sub {
  display: none;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* The sub-label is the first thing to go. A 320px pill holds the wordmark, a
   44px Book action and a 44px toggle and nothing else. */
@media (min-width: 560px) { .mark__sub { display: inline; } }
@media (min-width: 768px) { .mark__h { font-size: 1.25rem; } }

/* ---- pill tabs, and the menu card that stands in for them ------------- */
/*
 * Fingerprint row five is "pill tabs plus menu card", so the wide navigation
 * is a row of real pills and the narrow one is a card, not a full-screen
 * overlay.
 *
 * The tabs begin at 1024 and are deliberately tight there. Nine pills, a
 * wordmark and a visible Book action have about 896px to share inside a
 * 1024px viewport once the gutters and the pill's own padding are taken out;
 * at the 1280 size they would wrap, and a wrapped row cannot hold a 44px
 * target inside a 56px bar. The 01..09 index the shared header emits is
 * hidden in the tabs -- a number inside a pill reads as a quantity -- and
 * kept in the card, where it is the only thing giving the links an order.
 */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--s2);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}

.nav__link:hover { background: var(--hi); color: var(--ink); }

/* The current page is marked twice: a filled pill and full ink. Colour on its
   own would be the only cue, and section 5 asks for a visual treatment beside
   aria-current. */
.nav__link[aria-current="page"] {
  background: var(--act);
  color: var(--on-act);
  box-shadow: 0 0 0 1px var(--frame);
}

.nav__link .nav__no { display: none; }

.drawer__link .nav__no {
  display: inline-block;
  min-width: 2.25em;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .drawer { display: none; }
}

@media (min-width: 1280px) {
  .nav__list { gap: var(--s2); }
  .nav__link { font-size: .75rem; padding-inline: var(--s3); min-height: 40px; }
}

/* ---- the menu card ---------------------------------------------------- */

.drawer { position: relative; }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s3);
  border-radius: var(--pill);
  background: var(--hi);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 0 0 1px var(--frame);
}

.drawer__toggle::-webkit-details-marker { display: none; }

.drawer[open] .drawer__toggle { background: var(--act); color: var(--on-act); }

.drawer__bars {
  width: 16px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Below 375px the wordmark, the Book action and the toggle do not fit a
   320px viewport, and flex will not shrink a control that has declared a 44px
   floor. The toggle drops its word and becomes a square.

   The word is CLIPPED, never display:none. Hidden that way the summary is
   left with an aria-hidden icon and no accessible name at all, which is a
   worse failure than the one being fixed. */
@media (max-width: 374px) {
  .drawer__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.drawer__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s3));
  z-index: 40;
  width: min(20rem, calc(100vw - (var(--gutter) * 2) - var(--s6)));
  padding: var(--s3);
  background: var(--plane);
  border-radius: var(--s5);
  box-shadow: var(--fr) var(--act), var(--shadow);
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--s3);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.drawer__link:hover { background: var(--hi); }

.drawer__link[aria-current="page"] {
  background: var(--act);
  color: var(--on-act);
  box-shadow: 0 0 0 1px var(--frame);
}

/* ---- actions ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);   /* section 4: 24px minimum on the primary */
  border: 0;
  border-radius: var(--pill);
  font-family: var(--font-h);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--fr) var(--frame), var(--shadow);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}

.btn--primary, .btn--book, .btn--sub {
  background: var(--act);
  color: var(--on-act);
}

/* Recommendation #4 puts a white label on the action fill, so the label is a
   token of its own rather than the body ink: it measures 13.95:1 at rest,
   11.77:1 hovered and 16.19:1 pressed, and never has to flip colour
   mid-gesture. The press drops the soft shadow and moves the control one
   pixel, which costs no layout. */
.btn--primary:hover, .btn--book:hover, .btn--sub:hover,
.btn--primary:focus-visible, .btn--book:focus-visible,
.btn--sub:focus-visible {
  background: var(--act-h);
}

.btn--ghost {
  background: var(--bg);
  color: var(--ink);
}

.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--hi-h); }

.btn--primary:active, .btn--book:active, .btn--sub:active {
  background: var(--act-a);
}

.btn:active {
  transform: translateY(var(--drop));
  box-shadow: var(--fr) var(--frame);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---- the colour-block community footer -------------------------------- */

.ft {
  background: var(--ft-bg);
  color: var(--ft-ink);
  box-shadow: inset 0 var(--line) 0 var(--frame);
}

.ft a { color: var(--ft-ink); }
.ft a:hover { color: var(--hi); }

/* Three flat blocks of colour across the top of the footer, emitted by
   footer_mark(). At 320 they stack into three bands; from 560 they sit in a
   row and read as one block of colour. Nothing is written on them but the
   business name and the town, because section 10 allows nothing else here. */
.ft__mark {
  display: grid;
  gap: 0;
  border-block-end: var(--line) solid var(--ft-rule);
}

.ft__mark-h {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--s5);
  background: var(--act);
  font-size: 1.75rem;
  line-height: 1.05;
  text-align: center;
}

.ft__mark-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--s4) var(--s5);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

/* The two sub-blocks are light fills, so they carry ink and not the
   footer's own white. */
.ft__mark-sub:nth-of-type(1) { background: var(--hi); color: var(--ink); }
.ft__mark-sub:nth-of-type(2) { background: var(--acc-f); color: var(--ink); }

@media (min-width: 560px) {
  .ft__mark { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ft__mark-h { min-height: 104px; }
  .ft__mark-sub { min-height: 104px; }
}

/* ---- the subscribe band ----------------------------------------------- */
/*
 * base.footer() emits this as a bare <section class="sub-band">, NOT as a
 * ".sec", so none of the sticker machinery above reaches it and it needs its
 * own. It is the last colour block before the footer's three, so it takes the
 * highlight and the two of them read as one run of colour down the foot of the
 * page.
 */

.sub-band {
  position: relative;
  overflow: clip;
  padding-block: var(--s8);
  background: var(--hi);
  box-shadow: inset 0 var(--line) 0 var(--frame),
              inset 0 calc(var(--line) * -1) 0 var(--frame);
}

.sub-band::before {
  content: "";
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: -22px;
  width: 118px;
  height: 108px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--stk-b);
  --rot: -8deg;
  transform: rotate(var(--rot));
  transition: transform var(--t);
}

.sub-band:hover::before {
  transform: rotate(calc(var(--rot) + 3deg)) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .sub-band:hover::before { transform: rotate(var(--rot)); }
}

.sub-band__in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 900px) {
  .sub-band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

.sub-band__h { margin: 0 0 var(--s3); }

.sub-band__p { margin: 0; max-width: var(--measure-s); }

.sub-form { display: grid; gap: var(--s3); }

.sub-form__status { margin: 0; font-size: .875rem; }

/* ---- forms ------------------------------------------------------------ */

.field label, .sub-band label {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea, .sub-band input {
  width: 100%;
  min-height: 44px;
  padding: var(--s3);
  border: 0;
  border-radius: var(--s3);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  box-shadow: 0 0 0 1px var(--frame);
}

.field textarea { min-height: 168px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus,
.sub-band input:focus { box-shadow: 0 0 0 2px var(--frame); }

.field input::placeholder, .field textarea::placeholder,
.sub-band input::placeholder { color: var(--muted); }


/* PREMIUM REALISM PASS — DS01-09
   One unmistakable signature per design; shared selectors only provide polish. */
footer, .ft { position: relative; overflow: hidden; isolation: isolate; }
footer::before, .ft::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 88% 12%, rgba(189,178,240,.16), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(189,178,240,.16) 58% 59%, transparent 59%); }
footer a, .ft a { text-underline-offset: .28em; transition: color .2s ease, transform .2s ease; }
footer a:hover, footer a:focus-visible, .ft a:hover, .ft a:focus-visible { color: var(--hi); }
.stf, .stf__card, [class*="staff-card"] { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
/* The staff card is a photograph's ancestor, so it lifts but never turns:
   a rotation here would inflate the picture's getBoundingClientRect and make
   its `sizes` promise wrong. The frame is re-stated rather than replaced, so
   the hover deepens the drop shadow instead of erasing the outline. */
.stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: translateY(-5px); box-shadow: var(--fr) var(--act), 0 14px 34px rgba(37,27,24,.22); }
.field--intake { padding: 14px; border-inline-start: 3px solid var(--acc); background: rgba(109,46,29,.07); }
.field--intake label { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stf, .stf__card, [class*="staff-card"] { transition: none; } .stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: none; } }

/* ---- recommendation #4: radius, clipping and the media filter ---------- */
/*
 * The 22px radius is set on the surfaces that carry the double frame. The
 * pills keep --pill, which is the one departure the base build already made
 * and this one keeps.
 *
 * `overflow: hidden` goes only on the elements that CLIP a photograph. An
 * outer box-shadow is not clipped by overflow, so the frame and the drop
 * shadow survive it intact.
 */
.drawer__panel { border-radius: var(--radius); }

/* Recommendation #4's media treatment: macro detail, lacquer shine and clean
   colour blocking, pulled back slightly in saturation and pushed slightly in
   contrast so the photographs sit inside the palette rather than beside it. */
picture img { filter: saturate(.92) contrast(1.04); }


/* Each sticker hangs off its band by 18-30px and is 104-176px wide, so on a
   phone - where the gutter is 20px and the text runs the full width - roughly
   80px of every mark landed on a heading or a caption. The text paints above
   it, but near-black on an opaque mark reads as nothing there. Shrink the mark
   and push it further out so the part still on screen stays in the gutter.
   margin-inline moves it outward whichever edge it is anchored to, which is
   what keeps this one rule instead of twenty-six. */
@media (max-width: 700px) {
  .sec::before, .sec::after {
    width: 76px;
    height: 76px;
    margin-inline: -40px;
  }
}