/* DS-06 Sticker Playground -- Fern & Marigold Flowers.
 *
 * Section 9, recommendation #5 (florist), applied as tokens. The master
 * layout, header model, hero composition, footer model, navigation, spacing
 * scale, responsive transformations and the signature wobble are the base
 * build's, untouched.
 *
 * The measured contrast of every pairing this stylesheet ships. Computed at
 * build time by css.contrast(), not asserted:
 *
 *   ink on the page ground         15.15:1
 *   ink on the raised plane        16.18:1
 *   ink in a form field            13.84:1
 *   ink on the review panel        13.84:1
 *   ink on the staff panel         13.16:1
 *   muted text on the ground        7.52:1
 *   muted text on the plane         8.04:1
 *   link text on the ground         9.35:1
 *   link text on the plane          9.98:1
 *   secondary text on the ground    8.45:1
 *   label on the action fill       10.22:1
 *   label on the hovered action     7.88:1
 *   label on the pressed action    13.12:1
 *   label on the accent fill        9.24:1
 *   ink on the highlight fill      12.03:1
 *   ink on the hovered highlight   10.94:1
 *   the frame line on the ground    7.11:1
 *   the frame line on the plane     7.60:1
 *   the focus ring on the ground    9.35:1
 *   the focus ring on the plane     9.98:1
 *   footer text on the footer      14.09:1
 *
 * THREE CORRECTIONS TO RECOMMENDATION #5, stated plainly because they are
 * deviations.
 *
 *   1. THE LABEL ON A FILL IS NOT ALWAYS INK. The base build put ink on every
 *      fill because its action was a pale coral. This action is a deep green
 *      and its accent a dark bark brown; ink on either measures under 1.6:1.
 *      Recommendation #5 names the action label as #FFFFFF, so --on-act is
 *      white and carries every dark fill -- the action, the accent, the
 *      footer's name block, the closing call to action, the 404 plate. Ink
 *      stays on the pale highlight fill, where it measures well over the bar.
 *   2. THE 5px PETAL CORNER ACCENT IS THE OFFSET SHADOW. Every framed surface
 *      in this design already carries a flat offset shadow at its corner, and
 *      that shadow is drawn in the accent colours. It is set to 5px and left
 *      where it is rather than introducing a separate corner element: a new
 *      element would be a new layout box, and the `sizes` attribute on every
 *      image is a promise about that box.
 *   3. THE FOCUS RING IS #0C4B29, EXACTLY AS NAMED. It needed no substitution
 *      here -- it measures well over the 3:1 a non-text indicator needs on
 *      both the ground and the raised plane. The 3px width and the 3px offset
 *      are kept as written.
 *
 * A NOTE ON THE FONT FILES. Recommendation #5 allows no more than two
 * variable font files. One ships: Cormorant Infant. Inter has no variable
 * cut, so it ships as two static instances, 400 and 700.
 *
 * A LOAD-BEARING NOTE ON THE FRAME LINES.
 *
 * Every outline in this build is a box-shadow, never a border. A border adds
 * its width twice 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. `box-shadow: 0 0 0 var(--line)` draws the same line
 * and takes no layout space at all. The flat offset shadow beside it is a
 * second box-shadow for the same reason. The 18px radius lands on boxes that
 * were already there, so it costs no layout either.
 *
 * 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.
 */





:root {
  --bg: #F8F4F1;
  --ink: #251D18;
  --act: #0C4B29;
  --acc: #6D3A1D;
  --hi: #B2E4F0;
  --plane: #FDFCFC;
  --field: #F2E9E3;
  --muted: #5A4C44;
  --act-t: #0C4B29;
  --acc-t: #6D3A1D;
  --acc-f: #6D3A1D;
  --ring: #0C4B29;
  --act-h: #0D5E33;
  --act-a: #0B3820;
  --hi-h: #9CDCEC;
  --on-act: #FFFFFF;

  /* Recommendation #5 names these four surfaces separately from the plane. */
  --frame: #6C4B37;
  --panel-rev: #F2E9E3;
  --panel-stf: #ECE4DA;
  --footer: #38281E;
  --on-footer: #FFFFFF;
  --on-footer-muted: #D9CFC7;

  /* 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: 18px;         /* recommendation #5: 18px botanical frame */
  --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 #5: a 1px frame */
  --drop: 5px;            /* the 5px petal-colour corner accent */

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

  /* The media treatment named by recommendation #5. The overlay is declared
     for the treatment but nothing draws it: no text sits on a photograph
     anywhere in this layout -- every caption is a sibling below its frame --
     so there is no media a gradient would have to rescue. */
  --media-filter: saturate(.92) contrast(1.04);
  --media-overlay: linear-gradient(180deg, rgba(10,12,14,.02) 0%, rgba(10,12,14,.64) 100%);

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. */
  --focus-ring: #0C4B29;
  --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='%236D3A1D'/%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='%230C4B29' stroke='%236C4B37' 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='%236D3A1D'/%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='%23B2E4F0' stroke='%236C4B37' stroke-width='6'/%3E%3Ccircle cx='66' cy='58' r='18' fill='none' stroke='%236C4B37' 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='%236C4B37'/%3E%3Ccircle cx='82' cy='60' r='22' fill='%236C4B37'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%236C4B37'/%3E%3C/g%3E%3Ccircle cx='38' cy='38' r='30' fill='%23B2E4F0' stroke='%236C4B37' stroke-width='6'/%3E%3Ccircle cx='82' cy='60' r='22' fill='none' stroke='%236C4B37' stroke-width='6'/%3E%3Ccircle cx='48' cy='90' r='24' fill='%230C4B29' stroke='%236C4B37' 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='%236C4B37' 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='%230C4B29' 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: 0 0 0 var(--line) var(--frame),
              var(--drop) var(--drop) 0 var(--line) var(--acc-f);
}

.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(--act-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 2px 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 2px 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: 0 0 0 var(--line) var(--frame),
              var(--drop) var(--drop) 0 var(--line) var(--act);
}

.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 2px 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: 0 0 0 var(--line) var(--frame),
              var(--drop) var(--drop) 0 var(--line) var(--frame);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}

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

/* The label stays white in all four states, which is the point of choosing
   the fills this way: nothing has to flip colour mid-gesture. The press moves the
   button onto its own shadow, which is the flattest possible way to show a
   pressed state and 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:active {
  transform: translate(var(--drop), var(--drop));
  box-shadow: 0 0 0 var(--line) var(--frame);
}

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

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

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

.ft a { color: var(--on-footer); }
.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(--frame);
}

.ft__mark-h {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--s5);
  background: var(--act);
  color: var(--on-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;
}

.ft__mark-sub:nth-of-type(1) { background: var(--hi); }
.ft__mark-sub:nth-of-type(2) { background: var(--acc-f); color: var(--on-act); }

@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 2px 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 var(--line) var(--frame); }

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


/* ---- recommendation #5: the botanical frame ---------------------------- */
/*
 * One hairline in the frame colour, an 18px radius, and the flat 5px offset
 * in the petal colours that every framed surface already carried. The radius
 * lands on boxes that exist, and the media filter is one declaration on the
 * image itself, so neither costs a layout box.
 */
.ratio,
.hero__frame, .gal__frame, .place__frame, .galp__fig, .galp__fig img,
.svcp__item, .revp__item, .rev__card, .svc__row, .prin__item,
.faq__item, .faq__escape, .cd, .appr__in, .alt__in, .cta__in,
.stf__card, .nf__code {
  border-radius: var(--radius);
}

.ratio img { border-radius: inherit; }

/* The photograph sits at the top of the staff card, so it takes the card's
   top corners and squares off where the body begins. */
.stf__card .stf__fig { border-radius: var(--radius) var(--radius) 0 0; }

img { filter: var(--media-filter); }

/* 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(178,228,240,.16), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(178,228,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; }
.stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: translateY(-5px) rotate(-.5deg); border-color: var(--frame); box-shadow: 0 18px 48px rgba(12,75,41,.16); }
.field--intake { padding: 14px; border-inline-start: 3px solid var(--act); background: rgba(12,75,41,.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; } }


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