/* DS-08 White Cube Gallery -- Marlowe & Vine Events, wedding and event planning.
 *
 * The palette is section 4's "Recommendation #3: Wedding/event planning" set,
 * unaltered. Every contrast below is the measured ratio of the shipped pair:
 *
 *   ink #252118 on the page #F8F6F1            14.9:1
 *   ink on the card surface #FDFDFC            15.7:1
 *   muted #5A5344 on the page                   7.0:1
 *   link / accent #6D551D on the page           6.5:1
 *   white #FFFFFF on the action #0C4B14        10.4:1
 *   the action fill against the page            9.6:1
 *   the frame colour #6C5C37 on the page        6.0:1
 *   ink on the highlight #B2F0E8               11.6:1
 *   the focus ring #0C4B14 on the page          9.6:1
 *   white on the footer #38311E                12.9:1
 *
 * NO DEVIATION FROM SECTION 4 IS NEEDED IN THIS BUILD, and that is a change
 * from the white-cube palette this file used to carry, so it is worth saying
 * why rather than leaving two documented deviations sitting on colours that
 * no longer exist here:
 *
 *   1. THE FOCUS RING. Section 4 names it as 3px solid #0C4B14 with a 3px
 *      offset. That measures 9.6:1 on the page and clears the 3:1 a
 *      non-text indicator has to make, so it is drawn exactly as specified.
 *      The highlight #B2F0E8 is kept as the outer halo, which is what keeps
 *      the ring readable when focus lands on a control over a dark plate.
 *   2. THE PRIMARY ACTION'S EDGE. Section 4's action #0C4B14 measures 9.6:1
 *      against the page, so the fill's own boundary is plainly visible and
 *      the control does not need a borrowed edge. The 1px border every
 *      action carries is therefore drawn in the action's own colour, not in
 *      the rule colour: the geometry is unchanged and the edge is the fill.
 *
 * The rest of the palette is used according to what it measures:
 *
 *   - The HIGHLIGHT #B2F0E8 is 1.29:1 on the page. It is never a rule and
 *     never text. It appears only as a FILL -- the mat a plate sits on, the
 *     hover ground of a wall item -- where ink reads on it at 11.6:1.
 *   - The ACCENT #6D551D is 6.5:1 on the page, so it carries every link and
 *     the caption rules. It is the only warm colour in the build above the
 *     footer, and it appears roughly a dozen times per page by design.
 *   - Muted prose #5A5344 is 7.0:1; rules #6C5C37 are 6.0:1. Both keep the
 *     frame's hue and move only its luminance.
 *
 * 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 barely changes. Every band above the footer is the page
 *      #F8F6F1 or the card plane #FDFDFC, which is 1.05:1 away from it.
 *      Separation is done with a hairline, never with a colour change.
 *      The one reversed band is the footer, which section 4 names #38311E
 *      with white text: it reads as the wall label at the end of the walk,
 *      not as a second design.
 *   2. The rules are measured, not decorative. Every hairline in the build
 *      is 1px and every heavier rule is 2px, both in #6C5C37, 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. Section 15 warns that this bar must not obscure
 *      the H1, strand the menu or change height after the fonts land: 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.
 */




:root {
  --bg: #F8F6F1;
  --ink: #252118;
  --act: #0C4B14;
  --acc: #6D551D;
  --hi: #B2F0E8;
  --surface: #FDFDFC;
  --muted: #5A5344;
  --line: #6C5C37;
  --act-h: #0D5E18;
  --act-a: #0B3811;
  --on-act: #FFFFFF;

  /* Section 4's two named panels and its reversed footer. */
  --panel-rev: #F2EEE3;
  --panel-stf: #ECEADA;
  --ft-bg: #38311E;
  --ft-ink: #FFFFFF;
  --ft-soft: #D8CFB8;
  --ft-rule: #8A7A50;

  /* Section 4's media filter, applied to every photographic plate. */
  --media: saturate(.92) contrast(1.04);

  /* 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: 24px;         /* section 4, the ceremonial frame radius */
  --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(--s3);
  }

  /* Nine links, a wordmark and the Book control share one 1280px row. The body
     face here is wider per character than the one this bar was drawn against,
     which pushed the ninth link ("09 Privacy") onto a second row, so the link
     itself is set one step down and its padding tightened. The 44px tap target
     is kept by min-height, which is what carries it on a pointer-coarse
     screen anyway -- and below 1024 this block does not apply at all. */
  .nav__link {
    font-size: .8125rem;
    gap: var(--s1);
    padding-inline: var(--s1);
    white-space: nowrap;
  }

  .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. Its own fill measures 9.6:1 on the page, so the edge
   is drawn in the fill rather than borrowed from the rule colour. */
/* The 56px bar below 1024 carries the wordmark, this control and the drawer
   toggle. At 390 the full label is wider than what is left after the other two
   and printed over the wordmark, so the control drops to its verb there and
   regains the rest of its label on the desktop bar. */
.hd .btn--book { white-space: nowrap; gap: .26em; }
.hd .btn--book .btn__rest { display: none; }
@media (min-width: 1024px) { .hd .btn--book .btn__rest { display: inline; } }

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

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

.btn--primary:active, .btn--sub:active, .btn--book:active {
  background: var(--act-a);
  border-color: var(--act-a);
  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(--ft-bg);
  color: var(--ft-ink);
  border-top: var(--rule) solid var(--ft-bg);
  padding-block: var(--s8) var(--s7);
}

.ft a:not(.btn) { color: #F0E9D8; }
.ft a:not(.btn):hover { color: var(--ft-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(--ft-soft);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--hair) solid var(--ft-rule);
}

.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(--ft-rule);
}

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

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

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

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

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

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

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

/* --muted is the small-caps voice of the pale ground. Three of the lines that
   share that voice sit inside the footer's dark field, where it reads as dark
   on dark; inside .ft they take the footer's own soft ink instead. */
.ft .ft__label-sub,
.ft .ft__label-meta,
.ft .ft__legal { color: var(--ft-soft); }

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--ft-rule);
  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; background: #FFF; color: #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(178,240,232,.10), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(178,240,232,.10) 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: #B2F0E8; }
.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: #6D551D; box-shadow: 0 18px 48px rgba(109,85,29,.12); }
.field--intake { padding: 14px; border-inline-start: 3px solid #6D551D; background: rgba(109,85,29,.08); }
.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; } }


/* ---- section 4's two named panels and its media filter ----------------- */
/*
 * The review panel and the staff panel are the only two fills section 4
 * names besides the card surface, and they are fills only: the ink reads on
 * both at better than 13:1, and neither carries a rule of its own.
 */

.revp__item, .rev__item, .rev__card {
  background: var(--panel-rev);
  padding: var(--s5);
  border-radius: var(--radius);
}

.revp__item { border-top: var(--rule) solid var(--acc); }

.stf__card, .stf__item > article {
  background: var(--panel-stf);
  padding: var(--s4);
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
}

.stf__fig { border-radius: calc(var(--radius) - 8px); overflow: hidden; }

/* Section 4's media filter. Every photographic plate in the build, and
   nothing else -- the grade belongs to the photograph, not to the page. */
.hero__frame img, .gal__frame img, .place__frame img,
.galp__fig img, .stf__fig img { filter: var(--media); }