/* =====================================================================
   sea-views.com — canonical design tokens
   Loaded FIRST on every page. Nothing else may redefine these names.

   Fixes P5.3: --ink was #1D2B33 (near-black) in site.css/pages.css and
   #FBF9F4 (near-white) in index.html. A component using var(--ink)
   rendered or inverted depending which sheet won. Colour tokens are now
   named for their ROLE, not their appearance, so the collision cannot recur.

   Fixes P5.4: one type scale, rem only. Nine steps, not sixty-five.
   ===================================================================== */

:root {
  /* ---------- surfaces ---------- */
  --surface:      #FBF9F4;   /* page background (paper) */
  --surface-2:    #F1EBDF;   /* panel one shade off paper (was --linen / --ink-2) */
  --surface-sand: #DED8CC;   /* heavier fill, rules, chips */
  --surface-inv:  #1D2B33;   /* dark panel background */

  /* ---------- text ---------- */
  --text:      #1D2B33;                /* body text on --surface */
  --text-dim:  rgba(29, 43, 51, .62);  /* secondary text on --surface */
  --text-mute: #55504A;                /* tertiary / captions (6.9:1 on paper) */
  --text-inv:  #FBF9F4;                /* text on --surface-inv or on brass */

  /* ---------- accent ---------- */
  --brass:       #9A7B3F;   /* primary accent. WAS --gold in index.html and
                               --brass in site.css/pages.css — same value,
                               two names. One name now. */
  --brass-deep:  #7C6132;   /* hover / emphasis */
  --brass-light: #BE9E5E;   /* WAS the OTHER --gold, in site.css only.
                               Decorative use on dark only — 2.6:1 on paper,
                               so never use it for text on --surface. */
  --sea:         #3E6474;   /* secondary accent */

  /* ---------- lines ---------- */
  --rule:      rgba(29, 43, 51, .12);
  --rule-firm: rgba(29, 43, 51, .28);

  /* ---------- type families ---------- */
  --display: 'Cormorant Garamond', Georgia, serif;  /* the one display face */
  --serif:   'EB Garamond', Georgia, serif;
  --sans:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --monof:   'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- type scale (P5.4) ----------
     Nine steps. The 0.688rem micro step is kept deliberately: the site
     uses it for letterspaced uppercase eyebrows, where 0.75rem overflows. */
  --t-micro: 0.688rem;  /* 11px — eyebrows, badges, legal */
  --t-xs:    0.75rem;   /* 12px */
  --t-sm:    0.875rem;  /* 14px */
  --t-base:  1rem;      /* 16px */
  --t-md:    1.25rem;   /* 20px */
  --t-lg:    1.625rem;  /* 26px */
  --t-xl:    2.125rem;  /* 34px */
  --t-2xl:   2.875rem;  /* 46px */
  --t-3xl:   3.875rem;  /* 62px */

  /* fluid display sizes — the only permitted clamp()s */
  --t-hero:    clamp(2.8rem, 9vw, 7.5rem);      /* 45-120px, homepage masthead only */
  --t-display: clamp(2.125rem, 5.6vw, 3.875rem); /* 34-62px, page mastheads */
  --t-h1:      clamp(1.75rem, 4.4vw, 2.75rem);   /* 28-44px */
  --t-h2:      clamp(1.375rem, 3vw, 2rem);       /* 22-32px */
  --t-h3:      clamp(1.125rem, 2vw, 1.375rem);   /* 18-22px */

  /* ---------- letter-spacing scale (P5.4) ---------- */
  --ls-tight:  -0.015em;  /* large display */
  --ls-normal: 0;
  --ls-wide:   0.06em;    /* small caps body, captions */
  --ls-caps:   0.18em;    /* uppercase eyebrows, nav, buttons */

  /* ---------- motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-lux: linear(0, 0.0039 0.62%, 0.0156 1.27%, 0.0625 2.65%, 0.2461 5.68%, 0.5 9.09%, 0.7539 12.5%, 0.9375 15.53%, 0.9844 16.91%, 0.9961 17.56%, 1);

  /* ---------- back-compat aliases ----------
     Legacy names still referenced across 22 files. They now all resolve to
     one canonical value, so var(--ink) means the same thing everywhere.
     Do not use these in new code. */
  --paper:     var(--surface);
  --linen:     var(--surface-2);
  --cream:     var(--surface-2);
  --sand:      var(--surface-sand);
  --ink:       var(--text);        /* was inverted in index.html — fixed */
  --ink-2:     var(--surface-2);
  --abyss:     var(--surface-inv);
  --foam:      var(--text);
  --foam-dim:  var(--text-dim);
  --muted:     var(--text-mute);   /* was #55504A and #5B6A72 — unified */
  --gold:      var(--brass);       /* was two different golds — unified */
  --gold-deep: var(--brass-deep);
  --line:      var(--rule);
  --hairline:  var(--rule);
  --font-serif: var(--display);
  --font-sans:  var(--sans);
}

/* =====================================================================
   Shared components
   ===================================================================== */

/* ---- image provenance labels (P1.2) ----
   Three states, one component. "Actual" is reserved for photographs taken
   by GrihVann inside the building. Everything else declares itself. */
.shot { position: relative; display: block; overflow: hidden; min-height: 0; height: 100%; }
.shot img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 10px; }

.img-label {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: .5em;
  max-width: calc(100% - 20px);
  padding: .42em .72em; border-radius: 3px;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1.35;
  background: rgba(12, 20, 26, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(251, 249, 244, .2);
  color: var(--text-inv);
}
.img-label b { font-weight: 500; letter-spacing: var(--ls-caps); }
.img-label i {
  font-style: normal; letter-spacing: var(--ls-wide); text-transform: none;
  font-size: .95em; color: rgba(251, 249, 244, .66);
}
.img-label.is-actual b { color: #8FD3B4; }
.img-label.is-render b { color: var(--brass-light); }
.img-label.is-rep    b { color: #CFC7B6; }
@media (max-width: 620px) { .img-label { left: 8px; bottom: 8px; } .img-label i { display: none; } }

/* ---- the standing promise (P1.4) ---- */
.view-promise {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 26px 0; margin: 34px 0;
}
.view-promise p {
  font-family: var(--display); font-size: var(--t-md);
  line-height: 1.45; max-width: 52ch; letter-spacing: var(--ls-normal);
}
.view-promise small {
  display: block; margin-top: 12px; font-size: var(--t-xs);
  letter-spacing: var(--ls-wide); color: var(--text-mute);
}

/* ---- not-yet-photographed (P1.5) ---- */
.not-shot {
  display: flex; flex-direction: column; justify-content: center;
  padding: 34px; border: 1px dashed var(--rule-firm); border-radius: 10px;
  background: var(--surface-2);
}
.not-shot b {
  display: block; font-family: var(--display); font-size: var(--t-md);
  margin-bottom: 8px; font-weight: 500;
}
.not-shot span { font-size: var(--t-sm); color: var(--text-mute); }

/* ---- price freshness stamp (P2.3) ---- */
.price-stamp {
  display: inline-block; margin-top: .5rem;
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: var(--ls-wide); text-transform: none;
  color: var(--text-mute);
}
.price-stamp::before { content: "\2713\00a0"; color: var(--sea); }

/* ---- the non-negotiation line (P5.5) ---- */
.lede-line {
  font-family: var(--display); font-size: var(--t-h2);
  line-height: 1.32; letter-spacing: var(--ls-tight);
  margin: 22px 0; padding-left: 22px;
  border-left: 2px solid var(--brass);
  max-width: 26ch;
}

/* ---- the four-rung CTA ladder (P2.6) ---- */
.ladder { list-style: none; counter-reset: rung; margin: 26px 0; padding: 0; }
.ladder li {
  counter-increment: rung; position: relative;
  padding: 18px 0 18px 56px; border-bottom: 1px solid var(--rule);
}
.ladder li::before {
  content: counter(rung); position: absolute; left: 0; top: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--brass); color: var(--brass);
  font-family: var(--sans); font-size: var(--t-xs);
  display: flex; align-items: center; justify-content: center;
}
.ladder li b { display: block; margin-bottom: 4px; }
.ladder li a { color: var(--brass); }

/* ---- gated cell in a rate card (P3.3) ---- */
.rate-table .gated { color: var(--sea); white-space: nowrap; }
.rate-table .gated a { color: inherit; }