/* DS-05 Black Label Luxury -- Harbourline Property.
 *
 * 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          15.58:1
 *   ink on the raised plane         16.86:1
 *   ink on the review panel         13.82:1
 *   ink on the staff panel          12.82:1
 *   ink in a form field             17.48:1
 *   ink on the highlight fill       13.63:1
 *   muted text on the ground         8.32:1
 *   muted text on the plane          9.00:1
 *   the action colour on the ground  8.13:1
 *   button label on the action       9.12:1
 *   button label on the hover action 6.84:1
 *   footer text on the footer       15.98:1
 *   footer muted on the footer       7.85:1
 *
 * The keyboard focus ring is the action colour itself at 3px and 3px offset,
 * as the recommendation states it. It measures 8.13:1 against the ground and
 * 6.84:1 against the plane, well past the 3:1 a non-text indicator needs.
 * The one surface it would not clear is the footer, which is near-black;
 * there the ring takes the footer accent instead, at 12.46:1.
 *
 * There is no box-shadow anywhere in this build. Depth is carried by the flat
 * panel tint, the one-pixel architectural frame at a 2px radius and the 8px
 * baseline plinth under every framed plate, which is what the recommendation's
 * frame treatment asks for and what the fingerprint's "large flat surfaces
 * and hairline rules" row describes.
 */




:root {
  --bg: #F2F1F8;
  --ink: #1A1825;
  --act: #4A4B0C;
  --acc: #2A1D6D;
  --hi: #4A4B0C;
  --plane: #FCFCFD;
  --rule: #40376C;
  --ruleg: #40376C;
  --field: #FFFFFF;
  --gold-l: #5D5E0D;
  --act-d: #37380B;
  --muted: #48445A;
  --on-act: #FFFFFF;

  /* the selected-state fill and the two tinted panels */
  --sel: #C1F0B2;
  --on-sel: #1A1825;
  --panel-rev: #E5E3F2;
  --panel-stf: #E0DAEC;

  /* the footer is the one dark plane in the build and carries its own set */
  --ft-bg: #231E38;
  --ft-ink: #FFFFFF;
  --ft-muted: #B9B2CE;
  --ft-act: #C1F0B2;
  --ft-rule: rgba(255, 255, 255, .28);

  --err: #8C1D18;
  --err-ft: #F2B8B5;

  /* 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: 2px;
  --plinth: 8px;
  --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, in the action colour the
   recommendation names for it. It reaches 8.13:1 against the ground, well
   past the 3:1 a non-text indicator 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, .faqg, .proc { background: var(--plane); }

/* The recommendation names two tinted panels by hand -- the review panel and
   the staff panel -- and they are the only two surfaces in this build that
   are neither the ground nor the raised plane. */
.rev, .revp { background: var(--panel-rev); }
.stf, .stfp { background: var(--panel-stf); }

/* The frame treatment, in one place: a one-pixel architectural frame at a
   2px radius, standing on an 8px baseline plinth. Every framed plate in the
   build takes it, and nothing else in the build has a border at all. */
.hero__plate, .gal__frame, .galp__fig, .svc__featfig,
.place__frame, .stf__fig {
  border-bottom: var(--plinth) solid var(--rule);
  border-radius: var(--radius);
}

.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 white label stays at full strength in all four states. Hover takes
   the recommendation's own hover olive, which lifts the fill slightly and
   still carries the label at 6.84:1, so the label colour never has to flip
   mid-gesture -- the usual way section 5's "visible in rest, hover, focus
   and active" gets failed. */
.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(--ft-rule);
  color: var(--ft-ink);
}

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

/* The action colour is an olive dark enough to sink into the footer ground,
   so inside this one plane the subscribe button takes the footer accent and
   carries the dark ink on it instead. */
.ft .btn--sub,
.ft a.btn.btn--sub {
  background: var(--ft-act);
  border-color: var(--ft-act);
  color: var(--on-sel);
}

.ft .btn--sub:hover, .ft .btn--sub:active, .ft .btn--sub:focus-visible {
  background: var(--ft-ink);
  border-color: var(--ft-ink);
  color: var(--on-sel);
}

.ft .sl__ring { stroke: var(--ft-act); }
.ft .sl__ring--in { stroke: var(--ft-rule); }
.ft .sl__crown { fill: var(--ft-act); }
.ft .sl__base { fill: var(--ft-act); }

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

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

.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-act); 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-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(--ft-muted);
  min-height: 1.6em;
}

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

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

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

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