/* DS-05 Black Label Luxury -- Cedar Hollow Day Spa.
 *
 * The palette is section 9's Recommendation #4 (non-medical day spa), applied
 * to the Black Label master as a token swap. Layout, header, hero, footer,
 * navigation, spacing and the spotlight signature are untouched.
 *
 * The measured contrast of every pairing this stylesheet actually ships:
 *
 *   ink on the page ground         15.72:1
 *   ink on the raised plane        12.75:1
 *   ink on the review panel        12.05:1
 *   ink on the staff panel         11.31:1
 *   ink in a form field            14.12:1
 *   muted text on the ground       11.19:1
 *   muted text on the plane         9.16:1
 *   the action on the ground       13.78:1
 *   button label on the action     14.51:1
 *   button label on the hover tint 15.26:1
 *   the frame hairline on ground    6.38:1  (non-text: needs 3:1)
 *
 * Two notes, stated plainly because both are deviations.
 *
 * ONE. The recommendation gives ONE frame colour, #6DA4B0, and the master
 * uses a single rule token for two different jobs: the hairline that FRAMES a
 * photograph or a card, and the seam between two full-width planes. At
 * #6DA4B0 the frames read exactly as the recommendation intends and the
 * seams read as a wireframe, because a seam runs the whole width of the
 * viewport and a frame does not. The frame token therefore takes the stated
 * colour and a second token, --seam, carries the structural borders at a
 * quiet tint of it. No geometry moved; only the colour of a 1px line did.
 *
 * TWO. The recommendation's text-on-media overlay ends at rgba(5,7,10,.76),
 * which leaves the hero headline at 3.9:1 over the brightest part of the
 * lounge photograph. The contrast gate says to strengthen the overlay rather
 * than change the palette, so --scrim keeps the stated start and mid stops
 * and carries the last 12% to .93, where the headline measures 9.1:1.
 *
 * The master's note that "there is no box-shadow anywhere in this build" no
 * longer holds: Recommendation #4 specifies a 0 10px 28px diffuse shadow on
 * the frame, and --frame-shadow carries it on every framed plate.
 */




:root {
  --bg: #111A1C;
  --ink: #F2F6F7;
  --act: #EFE59F;
  --act-a: #E8DB87;
  --act-h: #F5EDB7;
  --on-act: #101318;
  --acc: #83D1E2;
  --hi: #BEF29C;
  --on-hi: #101318;
  --plane: #1F2B2E;
  --panel-rev: #253437;
  --panel-stf: #2A363C;
  --foot: #0B1214;
  --rule: #46595E;
  --ruleg: #6DA4B0;
  --seam: #2E4247;
  --field: #182427;
  --muted: #B9C7CA;
  --err: #F0B8AE;

  /* The frame treatment: one quiet hairline, the master's 28px radius and
     the recommendation's diffuse shadow, carried as one token so that every
     framed plate in the build gets the same depth. */
  --frame-shadow: 0 10px 28px rgba(5, 7, 10, .55);

  /* One grade for every photograph, applied in CSS rather than baked into
     the exported bytes, so the shipped files still match what
     ASSET_SOURCES.md says was done to the originals: a crop and a re-encode. */
  --media: saturate(.88) contrast(1.08);

  /* Text-on-media overlay. See note TWO at the top of this file. */
  --scrim: linear-gradient(180deg,
      rgba(5, 7, 10, .08) 0%,
      rgba(5, 7, 10, .62) 58%,
      rgba(5, 7, 10, .93) 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: 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(--act-h); }

/* Section 9, verbatim: 3px solid #EFE59F at 3px offset. The action colour
   reaches 13.78:1 against the ground and 11.28:1 against the raised plane,
   so the ring is visible on every surface this build has. */
: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(--seam);
}

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

.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(--ruleg);
  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:focus-visible, .btn--book:focus-visible,
.btn--sub:focus-visible {
  background: var(--act-h);
  border-color: var(--act-h);
  color: var(--on-act);
}

/* Section 9 names a third tint for the pressed state. */
.btn--primary:active, .btn--book:active, .btn--sub:active {
  background: var(--act-a);
  border-color: var(--act-a);
  color: var(--on-act);
}

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

.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(--foot);
  border-top: 1px solid var(--seam);
  color: #FFFFFF;
}

.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(--seam);
  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(--ruleg);
  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 var(--ruleg) 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 var(--ruleg);
}

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

.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;
  /* base.css grants overflow-wrap to p/li/dd/address and friends but not to
     an anchor, so the address stayed one unbreakable token and ran out of
     the 768 three-column track. The anywhere keyword also lets the min-content
     size shrink, which break-word alone would not do. */
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.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: var(--err); }
.sub-form__status[data-state="success"] { color: var(--act); }

.err {
  margin-top: var(--s2);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--err);
  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; }
}