/* DS-05 Black Label Luxury -- Marchmont Vale Law.
 *
 * The measured contrast of every pairing this stylesheet actually ships.
 * These are computed from the sRGB relative luminance of the tokens below,
 * not asserted:
 *
 *   ink on the page ground          15.39:1
 *   ink on the raised plane         17.02:1
 *   ink on the review panel         13.68:1
 *   ink on the staff panel          12.81:1
 *   ink on the highlight fill       13.52:1
 *   ink in a form field             17.02:1
 *   muted text on the ground         8.18:1
 *   muted text on the plane          9.04:1
 *   the action colour on the ground  8.02:1
 *   button label on the action       9.09:1
 *   button label on the hover action 6.68:1
 *   the keyline frame on the ground  9.19:1   (non-text, needs 3:1)
 *   footer text on the footer plane 15.58:1
 *   footer muted on the footer      9.08:1
 *   footer accent on the footer     12.07:1
 *
 * This build inverts the base palette: the ground is a light lilac-grey and
 * the footer is the only dark plane on the page. Two consequences are worth
 * stating, because both are deviations from a straight token swap.
 *
 * First, the footer carries its own six tokens (--ft-*). The action colour is
 * a dark olive that measures 1.6:1 on the footer ground and would vanish
 * there, so every piece of footer text, rule and accent is re-pointed rather
 * than inherited.
 *
 * Second, at 1024 and above the hero copy sits ON the photographic plate,
 * under the media overlay. Ink at 15.39:1 on the page ground measures under
 * 2:1 on that overlay, so the overlaid copy alone is carried by --on-media.
 * Everywhere the copy sits on the page rather than on a photograph it stays
 * on --ink.
 *
 * There is no box-shadow anywhere in this build. Depth is carried by the flat
 * plane tint and the one-pixel keyline that separates it, which is what the
 * fingerprint's "large flat surfaces and hairline rules" row describes.
 */




:root {
  --bg: #F3F1F8;
  --ink: #1B1825;
  --act: #4B4B0C;
  --acc: #321D6D;
  /* A fill, not a line: it backs the open FAQ row. The footer keeps the
     green in --ft-hi, which is read against the dark plane only. */
  --hi: #E7E3F2;
  --plane: #FCFCFD;
  --rule: #45376C;
  --ruleg: #45376C;
  --field: #FCFCFD;
  --gold-l: #5E5E0D;
  --muted: #4A445A;
  --on-act: #FFFFFF;
  --act-d: #38380B;
  --rev-panel: #E7E3F2;
  --stf-panel: #E2DAEC;
  --err: #A4231A;
  --on-media: #FFFFFF;

  /* The footer is the only dark plane in the build and cannot inherit the
     page tokens; a dark olive action reads 1.6:1 against it. */
  --ft-bg: #251E38;
  --ft-ink: #FFFFFF;
  --ft-muted: #C9C2DC;
  --ft-hi: #C3F0B2;
  --ft-rule: #8E7FB4;
  --ft-err: #F3B3AC;

  /* 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: 1360px;
  --measure: 68ch;
  --measure-s: 52ch;
  --radius: 0px;
  --head-h:var(--catalog-font-heading);
  --band-pad: 72px;

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

@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; --head-h:var(--catalog-font-heading); }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --band-pad: 144px; }
}

/* ---- 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, .ft__mono-h {
  font-family: var(--font-h);
  /* The display face ships a single 400. Asking for 700 would be answered by
     a synthesised bold, which thickens a high-contrast serif unevenly. */
  font-weight: 400;
}

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); }
a:hover { color: var(--gold-l); }

/* Section 4, verbatim: 3px solid at 3px offset, in the action colour, which
   measures 8.02:1 against the ground and 3.5:1 against the raised plane. The
   highlight token is a fill in this palette, not a line colour. */
:focus-visible {
  outline: 3px solid var(--act);
  outline-offset: 3px;
}

/* ---- wide cinematic planes -------------------------------------------- */
/*
 * Every <section> is a full-width plane. Alternate planes are raised by five
 * and a half per cent of the ink, and every seam between two of them is a
 * one-pixel metallic rule. That pair -- a flat surface and a hairline -- is
 * the whole of the layout fingerprint, and it is why this build has no
 * free-floating cards and no shadows.
 */

.sec {
  position: relative;
  padding-block: var(--band-pad);
  border-top: 1px solid var(--ruleg);
}

/* The hero is the first plane on the page and sits directly under the
   header's own rule; a second hairline 1px below it would read as a
   mistake. */
.sec.hero { border-top: 0; }

.svcp, .prin, .how, .faqg, .proc { background: var(--plane); }
.rev  { background: var(--rev-panel); }
.stfp { background: var(--stf-panel); }

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

/* ---- 88px minimal black header ---------------------------------------- */

.hd {
  position: relative;
  background: var(--bg);
  border-bottom: 3px double var(--rule);
}

.hd__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--head-h);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s2);
}

.mark__h {
  font-size: 1.0625rem;
  letter-spacing: .02em;
}

@media (min-width: 768px) { .mark__h { font-size: 1.25rem; } }

.mark__sub {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---- sparse centered navigation --------------------------------------- */
/*
 * The wide navigation is a centred row of plain labels -- no boxes, no
 * separators, and the 01..09 index that the shared header emits is hidden
 * here, because a numbered list is the opposite of sparse. It stays visible
 * in the drawer, where it is the only thing giving the nine links an order.
 *
 * It begins at 1024 and not at 768. Nine labels centred between a wordmark
 * and a visible Book action need about 930px at this type size; in a 768px
 * bar they wrap into the wordmark, and a wrapped row cannot hold a 44px
 * target inside an 88px header.
 */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t);
}

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

/* The active page is marked twice: the label goes to full ink, and a
   one-pixel metallic rule is drawn under it. Colour alone would be the only
   cue, and section 5 asks for a visual treatment as well as aria-current. */
.nav__link[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--act);
}

.nav__link .nav__no { display: none; }

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

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

@media (min-width: 1280px) {
  .nav__list { gap: var(--s5); }
  .nav__link { font-size: .8125rem; }
}

/* ---- the disclosure that stands in for it below 1024 ------------------ */

.drawer { position: relative; }

.drawer__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

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

.drawer__bars {
  width: 18px;
  height: 1px;
  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 at a 16px gutter, 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 would
   be left with an aria-hidden icon and no accessible name, 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(--s2));
  z-index: 40;
  width: min(21rem, calc(100vw - (var(--gutter) * 2)));
  padding: var(--s3);
  background: var(--plane);
  border: 1px solid var(--ruleg);
  border-radius: var(--radius);
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

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

.drawer__link[aria-current="page"] {
  color: var(--act);
  font-weight: 700;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}

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

/* The white label stays at full strength in all four states. The action
   colour is LIGHTENED on hover, which is what the profession's own token set
   specifies (#4B4B0C rest, #5E5E0D hover); the label measures 9.09:1 at rest
   and 6.68:1 on the hover fill, so it never has to flip mid-gesture. */
.btn--primary:hover, .btn--book:hover, .btn--sub:hover,
.btn--primary:active, .btn--book:active, .btn--sub:active,
.btn--primary:focus-visible, .btn--book:focus-visible,
.btn--sub:focus-visible {
  background: var(--gold-l);
  border-color: var(--gold-l);
  color: var(--on-act);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn--ghost:hover, .btn--ghost:active {
  border-color: var(--act);
  color: var(--act);
}

/* At 1024 the header carries the wordmark, nine centred labels and this
   button inside 1024px. A slightly tighter button is what buys the nav its
   centred row; the label itself is untouched. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hd__in .btn--book { padding-inline: var(--s4); font-size: .8125rem; }
}

/* ---- thin-rule monogram footer ---------------------------------------- */

.ft {
  background: var(--ft-bg);
  border-top: 1px solid var(--rule);
  color: var(--ft-ink);
}

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

/* The one field in the footer keeps the light form surface, so its own text
   is ink on white exactly as it is on every other page. */
.ft .field label { color: var(--ft-ink); }

.ft__mono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--ft-rule);
  text-align: center;
}

.ft__mono-h {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .5em;
  /* letter-spacing adds a trailing space after the last letter, which throws
     a centred monogram off centre by half of it. Taking it back here is the
     whole reason this rule exists. */
  text-indent: .5em;
  color: var(--ft-hi);
}

.ft__mono-sub {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ft-muted);
}

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

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

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

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

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--act); }

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



/* ---- footer: the four zones under the monogram ------------------------ */
/*
 * Section 17 asks for four zones and a restrained signature device carried
 * into the footer. The device here is the one the whole design runs on: a
 * 1px hairline and 8px-tracked metadata. Each zone opens with a tracked
 * label over a hairline, so the footer reads as four ruled fields of a folio
 * rather than four stacked lists.
 *
 * Everything below the monogram band had no rule at all before this pass -
 * the markup shipped .ft__in, .ft__block, .ft__h, .ft__addr, .ft__hours,
 * .ft__row, .ft__list, .ft__foot and .ft__legal and the stylesheet defined
 * none of them, so the closing scene of every page was default flow. The
 * dead-selector gate only looks CSS-to-HTML and never caught it.
 */

.ft__in {
  display: grid;
  gap: var(--s7);
  padding-block: var(--s8);
}

.ft__block { min-width: 0; }

.ft__h {
  font-family: var(--font-b);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ft-hi);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--ft-rule);
}

/* The second label inside one zone sits closer: it is a subdivision of the
   field it is in, not a new field. */
.ft__h--2 { margin-top: var(--s6); }

.ft__seal {
  display: block;
  width: 56px;
  margin-bottom: var(--s5);
}

/* base.css resets every svg to max-width:100%, which collapses a fixed mark
   inside any container allowed to shrink. The seal opts out and takes its
   size from the track, not from the element. */
.ft__seal svg { display: block; width: 56px; height: 56px; max-width: none; flex: none; }
.sl__ring { fill: none; stroke: var(--ft-hi); stroke-width: 1; }
.sl__ring--in { stroke: var(--ft-rule); }
.sl__crown { fill: var(--ft-hi); }
.sl__base { fill: var(--ft-hi); }

.ft__sum {
  max-width: var(--measure-s);
  color: var(--ft-muted);
  font-size: .9375rem;
  line-height: 1.7;
}

.ft__list { display: grid; gap: var(--s1); }
.ft__list a { text-decoration: none; }
.ft__list a:hover, .ft__list a:focus-visible { text-decoration: underline; text-underline-offset: .28em; }

.ft__list a,
.ft__addr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
}

.ft__act { margin-top: var(--s4); }

.ft__addr {
  color: var(--ft-muted);
  font-size: .9375rem;
  line-height: 1.8;
}

.ft__hours { font-size: .9375rem; }

.ft__row {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--ft-rule);
}

.ft__row:last-child { border-bottom: 0; }
.ft__row dt {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ft-muted);
  margin-bottom: var(--s1);
}
.ft__row dd { color: var(--ft-ink); font-variant-numeric: tabular-nums; }

.ft__subp {
  color: var(--ft-muted);
  font-size: .9375rem;
  line-height: 1.7;
  margin-bottom: var(--s5);
}

.ft__note {
  margin-top: var(--s4);
  color: var(--ft-muted);
  font-size: .8125rem;
  line-height: 1.7;
}

.ft__note a { color: var(--ft-hi); text-decoration: underline; text-underline-offset: .28em; }

.ft__foot {
  padding-block: var(--s5);
  border-top: 1px solid var(--ft-rule);
}

.ft__legal {
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--ft-muted);
}

.ft__legal a { color: var(--ft-muted); text-decoration: underline; text-underline-offset: .28em; }
.ft__legal a:hover { color: var(--ft-hi); }

/* ---- the subscribe form, now inside the footer ------------------------ */

.sub-form { display: grid; gap: var(--s4); }
.sub-form__field { margin: 0; }
.sub-form .btn--sub { justify-self: start; }

.sub-form__status {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ft-muted);
  min-height: 1.6em;
}

.sub-form__status[data-state="error"] { color: var(--ft-err); }
.sub-form__status[data-state="success"] { color: var(--ft-hi); }

/* .err is emitted by both the contact form, which sits on the light ground,
   and the subscribe form, which sits on the dark footer. One colour cannot
   serve both: the light-ground red measures 2.1:1 on the footer. */
.err {
  margin-top: var(--s2);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--err);
  min-height: 1.6em;
}

.ft .err { color: var(--ft-err); }

/* 414px: the two short metadata zones pair off before the wide ones do. */
@media (min-width: 414px) {
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
  .ft__block--brand { grid-column: 1 / -1; }
}

/* 768px: the folio opens to its full four fields. The brand zone keeps the
   width its summary needs; the three metadata fields share the rest. */
@media (min-width: 768px) {
  .ft__in {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s7) var(--s7);
  }
  .ft__block--brand { grid-column: 1; grid-row: 1 / 3; }
  .ft__block--sub { grid-column: 2 / -1; }
}

@media (min-width: 1024px) {
  .ft__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.1fr); }
  .ft__block--brand { grid-column: 1; grid-row: 1; }
  .ft__block--sub { grid-column: 4; }
}