/* DS-08 White Cube Gallery -- Wren Street Flowers, florist.
 *
 * Every contrast this stylesheet ships, measured at build time rather than
 * asserted:
 *
 *   ink on the page ground               15.00:1
 *   ink on the card surface              16.02:1
 *   muted text on the page ground         7.25:1
 *   muted text on the surface             7.74:1
 *   link text on the page ground          7.37:1
 *   link text on the surface              7.87:1
 *   the label on the primary action fill 10.15:1
 *   the label on the hovered fill         7.81:1
 *   the label on the pressed fill        13.06:1
 *   ink on the highlight fill            11.17:1
 *   the frame line on the page ground     6.53:1
 *   the frame line on the surface         6.97:1
 *   the focus ring on the page ground     9.34:1
 *   the focus ring on the surface         9.98:1
 *   the action fill against the page      9.34:1
 *   the page ground reversed out of ink  15.00:1
 *   ink on the review panel              13.80:1
 *   ink on the staff panel               13.21:1
 *
 * THREE DEVIATIONS FROM THE FLORIST SECTION, each forced by a measurement
 * and each keeping the section's geometry in the build.
 *
 *   1. THE HIGHLIGHT. #B2DCF0 measures 1.34:1 against the #F8F5F1 page. It
 *      is therefore never a rule and never a text colour. It appears only
 *      as a FILL -- the mat a plate sits on, the ground a marked passage
 *      takes -- where ink reads on it at 11.17:1.
 *
 *   2. THE 5px CORNER ACCENT on a frame. The section calls it a petal
 *      colour, and the petal colour in this palette is that same #B2DCF0:
 *      an accent nobody can see is not an accent. It is drawn in the
 *      secondary accent #6D491D instead, which is 7.37:1 on the page, at
 *      the section's exact 5px width and in the same corner on every frame.
 *
 *   3. THE FOOTER. The section names a #382D1E footer with white text. This
 *      design's whole argument is that the ground never changes, and the
 *      base build carries no dark slab anywhere. A reversed footer would
 *      have read as a different design wearing the same typeface, so the
 *      footer stays on the page ground and separates with a hairline. The
 *      colour is not used, and that is a deliberate refusal, not an
 *      oversight.
 *
 * The rest of the palette is used according to what it measures:
 *
 *   - The ACTION #0C4B32 is 9.34:1 against the page, so unlike the base
 *     build it needs no borrowed border to make its own edge visible. It
 *     still carries the section's 1px frame line, because every control and
 *     every plate in this build is framed the same way.
 *   - The ACCENT #6D491D carries links, caption rules and the corner
 *     accent at 7.37:1. It is the only warm colour in the build.
 *   - Muted prose is #5A5044 at 7.25:1 on the page and 7.74:1 on a card.
 *     Frames are #6C5437 at 6.53:1, well past the 3:1 a non-text boundary
 *     has to clear, which is what lets the frame be 1px and still read.
 *   - The review panel #F2EBE3 and the staff panel #ECE7DA are fills only;
 *     ink reads on them at 13.80:1 and 13.21:1.
 *
 * WHAT THE WHITE CUBE IS, in CSS terms, because it is easy to mistake for
 * "no design at all". Three things carry it and all three are here:
 *
 *   1. The ground never changes. There is no dark slab anywhere in this
 *      build -- not the header, not the subscribe band, not the footer.
 *      Every band is the page ground or the plane #FDFDFC. Separation is
 *      done with a hairline, never with a colour change.
 *   2. The rules are measured, not decorative. Every hairline in the build
 *      is 1px and every heavier rule is 2px, both in #6C5437, and a caption
 *      rule is always the same distance from its caption.
 *   3. The chrome is quiet and the plate is loud. The header is 56px tall
 *      on mobile and 72px from 1024, in the page's own ground, with one
 *      hairline under it: it is sticky rather than fixed, its height is set
 *      on the inner flex row and not on the text, and both faces load with
 *      font-display: optional, so the bar cannot reflow when they arrive.
 *
 * The media grade is the florist section's own: saturate(.92) contrast(1.04)
 * on every photograph, which pulls the shop-window colour back to something
 * a gallery wall can hold without draining the flowers.
 */





:root {
  --bg: #F8F5F1;
  --ink: #251F18;
  --act: #0C4B32;
  --acc: #6D491D;
  --hi: #B2DCF0;
  --surface: #FDFDFC;
  --muted: #5A5044;
  --line: #6C5437;
  --act-h: #0D5E3E;
  --act-a: #0B3826;
  --on-act: #FFFFFF;
  --panel-rev: #F2EBE3;
  --panel-stf: #ECE7DA;
  --media-grade: saturate(.92) contrast(1.04);
  --media-overlay: linear-gradient(180deg, rgba(10,12,14,.02) 0%, rgba(10,12,14,.64) 100%);

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

  --max: 1280px;         /* the CONTENT width, section 4 */
  --measure: 68ch;        /* section 4 */
  --measure-s: 52ch;      /* section 4, review quotations */
  --radius: 18px;         /* the florist section's corner, the only radius here */
  --head-h:var(--catalog-font-heading);        /* section 4, the quiet gallery bar */
  --band-pad: 72px;       /* section 4's 72 / 112 / 144 section spacing */
  --gutter: 16px;
  --gap: var(--s5);       /* base.css reads this for every .grid */

  --hair: 1px;
  --rule: 2px;

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

  /* Section 4: 220ms standard, 600ms atmospheric maximum. */
  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. Section 4's geometry
     exactly; see deviation 1 above for the colour. */
  --focus-ring: var(--act);
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Section 7's gutter ladder, and the section spacing that steps with it. */
@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: 112px; } }
@media (min-width: 1024px) {
  :root { --gutter: 48px; --band-pad: 144px; --head-h:var(--catalog-font-heading); }
}

/* The outer halo of deviation 1. The outline is base.css's and carries
   section 4's 3px/3px; this only puts the specified highlight back around
   it, which is what keeps the ring legible over a dark plate. */
:focus-visible {
  box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-width) * 2)
              var(--hi);
}

/* ---- 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 {
  font-family: var(--font-h);
  font-weight: 400;
  margin: 0;
  overflow-wrap: break-word;
}

/* Section 4's mobile H1, then its desktop H1 at the 768 identity change. */
h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.02em;
}

@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; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }

p { margin: 0; }

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

a { color: var(--acc); text-underline-offset: .18em; }
a:hover { color: var(--ink); }

/* Section 4 puts the metadata floor at .8125rem and labels at .875rem. This
   is the museum-label voice and it is used for every piece of metadata in
   the build, which is what makes the captions read as one system. */
.nav__no, .price__q, .svc__fitlabel, .gal__no, .rev__no, .proc__no,
.how__no, .ft__legal, .hint, .field__opt, .sub-form__status,
.cform__status, .pv__date, .revp__by, .rev__by {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- the band --------------------------------------------------------- */
/*
 * `overflow: clip` and not `hidden`: clip contains the caption rules that
 * run to the band edge without creating a scroll container, which `hidden`
 * would, and a scroll container is what silently breaks a sticky child.
 */

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

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

.sec > .wrap > * + * { margin-top: var(--s6); }

/* The measured caption rule. Every band heading in the build carries the
   same short rule above it at the same distance, which is the one piece of
   decoration a white cube is allowed. */
.sec > .wrap > h2,
.sec > .wrap > .phead__h1,
.sec > .wrap > .nf__h1 { padding-top: var(--s5); }

.sec > .wrap > h2::before,
.sec > .wrap > .phead__h1::before,
.sec > .wrap > .nf__h1::before {
  content: "";
  display: block;
  width: 64px;
  height: var(--rule);
  margin-bottom: var(--s5);
  background: var(--acc);
}

/* ---- the quiet gallery bar -------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  color: var(--ink);
  border-bottom: var(--hair) solid var(--line);
}

/* A button carries its own pair and must not inherit the bar's link colour:
   `.hd a` is (0,1,1) and `.btn--book` is (0,1,0), so without the :not() the
   bar's accent repaints the Book control's ink label, accent on the pale
   action fill, and the same failure repeats in the footer. */
.hd a:not(.btn) { color: var(--ink); }
.hd a:not(.btn):hover { color: var(--acc); }

.hd__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--head-h);
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mark {
  font-family: var(--font-h);
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.mark__h { white-space: nowrap; }

/* The collection line under the name. There is no room for it in the 56px
   bar, so below 768 it is hidden rather than deleted -- deleting it would
   make the selector dead and the wordmark would lose its second line in the
   footer too, where there is room for it. */
.mark__s {
  display: none;
  font-family: var(--font-b);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) { .mark__s { display: inline; } }

/* ---- navigation: minimal text links plus the collection index ---------- */

.nav { display: none; }

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

/* The two-digit index is the collection number, and unlike every other unit
   in this set it stays VISIBLE on the desktop bar: section 3 names the
   navigation as "minimal text links plus collection index", so the number is
   half of that fingerprint row and hiding it would remove it. */
.nav__link {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s2);
  text-decoration: none;
  font-size: .875rem;
  letter-spacing: .02em;
}

.nav__link[aria-current="page"] {
  color: var(--acc);
  box-shadow: inset 0 -2px 0 var(--acc);
}

.nav__no {
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.nav__link[aria-current="page"] .nav__no { color: var(--acc); }

/* ---- the drawer, below 1024 ------------------------------------------- */

.drawer { margin-left: var(--s2); }

.drawer__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s2);
  cursor: pointer;
  list-style: none;
  font-size: .8125rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}

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

.drawer__bars {
  width: 20px;
  height: var(--rule);
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.drawer[open] .drawer__bars { box-shadow: 0 6px 0 currentColor; }

.drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: var(--hair) solid var(--line);
  box-shadow: 0 24px 48px rgba(21, 21, 21, .08);
  padding: var(--s4) var(--gutter) var(--s6);
}

.drawer__panel nav { display: grid; }

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  min-height: 44px;
  padding-block: var(--s2);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--line);
}

.drawer__link:last-child { border-bottom: 0; }

.drawer__link[aria-current="page"] { color: var(--acc); }

/* ---- the desktop bar, at 1024 and up ---------------------------------- */

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

  .nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s4);
  }

  .drawer { display: none; }

  .mark { font-size: 1.5rem; }
}

/* ---- actions ---------------------------------------------------------- */
/*
 * Logical padding throughout, and section 4's 24px minimum on the primary
 * action is the padding-inline, so it is 24px ALONG the text whichever way
 * the control is written.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s5);
  padding-block: var(--s3);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-b);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}

/* Section 4's action, with the border of deviation 2. */
.btn--primary, .btn--sub, .btn--book {
  background: var(--act);
  color: var(--on-act);
}

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

.btn--ghost { color: var(--acc); }

.btn--ghost:hover, .btn--ghost:active {
  background: var(--surface);
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* ---- the skip link ---------------------------------------------------- */

.skip {
  position: absolute;
  left: 0;
  top: var(--s4);
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateX(calc(-100% - var(--s4)));
}

.skip:focus,
.skip:focus-visible {
  left: var(--s4);
  transform: none;
}

/* ---- the subscribe band ----------------------------------------------- */

.sub-band {
  background: var(--surface);
  color: var(--ink);
  border-block: var(--hair) solid var(--line);
  padding-block: var(--s9);
}

.sub-band a:not(.btn) { color: var(--acc); }

.sub-band__in {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 1024px) {
  .sub-band__in {
    grid-template-columns: 58% 42%;
    column-gap: var(--s7);
    align-items: start;
  }
}

.sub-band__h {
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.04;
}

.sub-band__p {
  margin-top: var(--s4);
  max-width: var(--measure);
  color: var(--muted);
}

.sub-form { display: grid; gap: var(--s4); justify-items: start; }

.sub-form__field { width: 100%; max-width: 420px; }

.sub-form__status { margin: 0; }

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

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

.field input, .field select, .field textarea, .sub-band input {
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 0 0 var(--hair) var(--line);
  transition: box-shadow var(--t);
}

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

.field input:focus, .field select:focus, .field textarea:focus,
.sub-band input:focus { box-shadow: inset 0 0 0 var(--rule) var(--ink); }

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

.field__opt { text-transform: none; letter-spacing: normal; }

.hint { margin-top: var(--s2); text-transform: none; letter-spacing: normal; }

.err { margin: var(--s2) 0 0; font-size: .875rem; color: var(--acc); }

/* ---- the museum-label footer ------------------------------------------ */
/*
 * A wall label: a heavy rule, then the identity, then the metadata in the
 * same .8125rem uppercase voice the captions use. It stays on the page's own
 * white, because a reversed footer would end the white cube one band early.
 */

.ft {
  background: var(--bg);
  color: var(--ink);
  border-top: var(--rule) solid var(--ink);
  padding-block: var(--s8) var(--s7);
}

.ft a:not(.btn) { color: var(--acc); }
.ft a:not(.btn):hover { color: var(--ink); }

.ft__in {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s8);
}

@media (min-width: 768px) {
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ft__h {
  font-family: var(--font-b);
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--hair) solid var(--line);
}

.ft__addr { line-height: 1.9; font-style: normal; }

.ft__hours { margin: 0; }

.ft__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-block: var(--s2);
  border-bottom: var(--hair) solid var(--line);
}

.ft__row:last-child { border-bottom: 0; }

.ft__row dt { font-weight: 700; min-width: 11ch; }

.ft__row dd { margin: 0; color: var(--muted); }

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

.ft__list li { border-bottom: var(--hair) solid var(--line); }

.ft__list li:last-child { border-bottom: 0; }

.ft__list a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  text-decoration: none;
}

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s3);
}

/* ---- print ------------------------------------------------------------ */
/*
 * base.css already hides .skip, .drawer and .sub-band in print. The bar is
 * sticky rather than fixed, so it does not reprint on every page; it only
 * needs its hairline turned into something a printer will actually render.
 */

@media print {
  .hd { position: static; border-bottom: 1px solid #000; }
  .ft { border-top: 2px solid #000; }
  .sec { padding-block: var(--s7); }
}


/* 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(109,73,29,.09), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(109,73,29,.09) 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: #6D491D; }
.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: scale(1.012); border-color: #6D491D; box-shadow: 0 18px 48px rgba(109,73,29,.09); }
.field--intake { padding: 14px; border-inline-start: 3px solid #6D491D; background: rgba(109,73,29,.09); }
.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; } }


/* ---- the florist frame, and the grade every photograph is printed at ----
 *
 * The frame is the one thing this palette adds to the white cube: a 1px
 * #6C5437 line, an 18px corner, and a 5px accent laid into the top outer
 * corner of every plate. Nothing about the composition moves; the plate is
 * the same box it was, now with an edge that can be seen at 6.53:1.
 *
 * Boxes that hold ONLY media take the frame and the accent. A figure that
 * also holds its caption cannot, so its image carries the frame instead --
 * the caption stays outside the line, where a gallery label belongs.
 */

.hero__frame, .gal__frame, .place__frame, .stf__fig {
  position: relative;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.hero__frame::after, .gal__frame::after,
.place__frame::after, .stf__fig::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  inline-size: 28px;
  block-size: 28px;
  border-block-start: 5px solid var(--acc);
  border-inline-end: 5px solid var(--acc);
  border-start-end-radius: var(--radius);
  pointer-events: none;
  z-index: 1;
}

.galp__fig img, .exhibit__fig img, .cd__plate img, .nf__visual img {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.hero__frame img, .gal__frame img, .place__frame img, .stf__fig img,
.galp__fig img, .exhibit__fig img, .cd__plate img, .nf__visual img {
  filter: var(--media-grade);
}

/* The review and staff panels are fills, exactly as the palette specifies,
   and they are the only two places a card ground differs from the page. */
.rev__card { background: var(--panel-rev); padding: var(--s5); border-radius: var(--radius); }
.stf__card { background: var(--panel-stf); border-radius: var(--radius); overflow: hidden; }
.stf__body { padding: var(--s5); }