/* DS-05 Black Label Luxury -- Alder Crown Advisory.
 *
 * The measured contrast of every pairing this stylesheet actually ships.
 * These are computed at build time by css.contrast(), not asserted:
 *
 *   ink on the page ground         17.55:1
 *   ink on the raised plane        15.96:1
 *   ink on the secondary accent    13.51:1
 *   ink in a form field            14.34:1
 *   muted text on the ground       7.74:1
 *   muted text on the plane        7.04:1
 *   the gold action on the ground  7.48:1
 *   button label on the gold       7.89:1
 *   button label on the hover gold 9.53:1
 *
 * One correction to section 4, stated plainly because it is a deviation.
 * The highlight token #6F7A72 measures 4.46:1 on the page ground, which is
 * UNDER the 4.5:1 that normal-size text needs. It is therefore used for what
 * it does pass: the hairline rules and the focus ring, both of which are
 * non-text and need 3:1. Every piece of muted TEXT is carried by
 * mix(highlight, ink, .35) = #9EA39B at 7.74:1, which keeps the
 * token's hue and moves only its luminance.
 *
 * There is no box-shadow anywhere in this build. A shadow on a near-black
 * surface is either invisible or dirt; depth here is carried by the flat
 * plane tint and the hairline that separates it, which is what the
 * fingerprint's "large flat dark surfaces and hairline metallic rules" row
 * describes.
 */




:root {
  --bg: #090909;
  --ink: #F5F0E8;
  --act: #B89B5E;
  --acc: #252525;
  --hi: #6F7A72;
  --plane: #161615;
  --rule: #383736;
  --ruleg: #3A3221;
  --field: #21201F;
  --gold-l: #C4AC7A;
  --muted: #9EA39B;
  --on-act: #000000;

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

/* Section 4, verbatim: 3px solid at 3px offset. The highlight token reaches
   4.46:1 against the ground, and a focus indicator is non-text, so 3:1 is
   the bar it has to clear. */
:focus-visible {
  outline: 3px solid var(--hi);
  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, .rev, .faqg, .proc, .stfp { background: var(--plane); }

.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: 1px solid var(--ruleg);
}

.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: 999px;
  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: 999px;
  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 Book label stays at full strength in all four states. The gold is
   LIGHTENED on hover rather than darkened: darkening it to mix(act, bg) drops
   the black label to 4.45:1 and forces the label colour to flip mid-gesture,
   which is the usual way section 5's "visible in rest, hover, focus and
   active" gets failed. Lightened, the label measures 9.53:1. */
.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(--bg);
  border-top: 1px solid var(--ruleg);
  color: var(--ink);
}

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

.ft__mono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--ruleg);
  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(--act);
}

.ft__mono-sub {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--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: var(--s3);
  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 #A88852 hairline and 8px-tracked metadata. Each zone opens with a
 * tracked gold 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(--act);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid #A88852;
}

/* 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: #A88852; stroke-width: 1; }
.sl__ring--in { stroke: var(--rule); }
.sl__crown { fill: var(--act); }
.sl__base { fill: #A88852; }

.ft__sum {
  max-width: var(--measure-s);
  color: var(--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(--muted);
  font-size: .9375rem;
  line-height: 1.8;
}

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

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

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

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

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

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

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

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

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

/* ---- 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(--muted);
  min-height: 1.6em;
}

.sub-form__status[data-state="error"] { color: #E4B7B0; }
.sub-form__status[data-state="success"] { color: var(--act); }

.err {
  margin-top: var(--s2);
  font-size: .8125rem;
  line-height: 1.6;
  color: #E4B7B0;
  min-height: 1.6em;
}

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