/* ============================================================
   Direction D — "Nocturne / Daylight"
   Photography carries the page and content rides on frosted glass above it.
   The ground is deep ocean rather than black, and the page alternates into
   light sand bands so it breathes — this is Miami, not a night shoot.
   ============================================================ */

/* ── the palette contract ────────────────────────────────────────────────────
   A palette declares ELEVEN colors and nothing else. Everything below them —
   the transparencies, the hairlines, the soft accent fills, the hero wash — is
   derived here, once, so that a thirteenth palette is eleven lines rather than
   sixty and cannot be half-written.

     --night --night-2 --night-3   the ground and the two surfaces above it
     --text                        ink on that ground
     --brass --aqua                the two accents
     --sand --sand-2 --ink         the light band: its ground and its ink
     --accent-light                the accent as it reads INSIDE a light band
     --scrim                       the tint of the wash over the hero photograph

   Four more are optional and only when the derivation cannot know the answer:
   --on-accent (ink on a solid accent button), --on-hero, --glass, --glass-strong.
   See 06-palettes.css.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  /* deep ocean, not black — lighter and bluer than a true night palette */
  --night:#12242C;
  --night-2:#17303A;
  --night-3:#1D3A46;

  --text:#F2F6F7;

  --brass:#E0B978;      /* warm accent — the under-cabinet light */
  --aqua:#5FD3C4;       /* the water. second accent, used for cool details */

  /* sand — the light bands */
  --sand:#F4F1EA;
  --sand-2:#EAE5DA;
  --ink:#15272E;

  /* ── derived. A palette overrides the colors above; these follow. ──
     Written as color-mix on the tokens rather than as a literal rgba() of the same color, which
     is what they used to be: an rgba() has to be recomputed by hand for every palette, and twelve
     palettes each restating eight of them is where the copies came from. */
  --line:color-mix(in srgb,var(--text) 13%,transparent);
  --line-2:color-mix(in srgb,var(--text) 22%,transparent);
  --text-70:color-mix(in srgb,var(--text) 76%,transparent);
  --text-45:color-mix(in srgb,var(--text) 70%,transparent);
  --brass-soft:color-mix(in srgb,var(--brass) 18%,transparent);
  --aqua-soft:color-mix(in srgb,var(--aqua) 16%,transparent);
  --ink-70:color-mix(in srgb,var(--ink) 74%,transparent);
  --ink-45:color-mix(in srgb,var(--ink) 70%,transparent);
  --ink-line:color-mix(in srgb,var(--ink) 14%,transparent);

  /* Text on a solid accent button — the one place the accent is a ground rather than ink, and the
     one color no rule can derive: a pale accent needs dark text on it, a deep one needs light. */
  --on-accent:#1A1305;

  /* The accent used INSIDE a light band. It cannot be --brass: that color is picked to glow on a
     dark ground and goes to mud on sand. So it is a token of its own — one denser relative of the
     palette's accent — and every eyebrow, counter, bullet and inline link on a light band reads it.

     🔴 It used to be the literal #0E7A6B repeated across nine rules, which each palette then
     re-stated in a block of its own. Five of the twelve never re-stated all nine: on sunset, aqua,
     clay, vice and graphite the code keys, the phone links and the ghost-link hover stayed the
     ocean palette's teal while everything beside them had changed color. A token cannot be
     half-overridden, which is the reason for making it one. */
  --accent-light:#0E7A6B;

  /* The hero wash, as one tint rather than a hand-written rgba() per layer per breakpoint.
     There are four scrims — desktop and phone, ordinary photograph and daylight exterior — and a
     palette that re-declared only the first left the other three washing ocean blue over a green
     or a plum ground. Now a palette says what color its wash is and gets all four right. */
  --scrim:#0A2A34;
  --scrim-glow:var(--brass);

  /* Danger, and deliberately NOT a palette color.
     A guide's warning block and the warning parts of its diagrams say "stop, this is how somebody
     gets hurt". Red is what that means to a reader, and it has to mean it on the plum palette and
     on the green one too — an accent-colored warning is a warning that looks like a heading. It is
     a token so that this decision is visible; every other literal in this stylesheet was one
     somebody forgot, and the next reader has no way to tell those apart from this one. */
  --warn:#E07878;

  /* glass: thinner and more transparent than the night version */
  --on-hero:#fff;          /* text over the hero photograph — flips on light palettes */
  --glass:color-mix(in srgb,var(--text) 10%,transparent);
  --glass-strong:color-mix(in srgb,var(--night-2) 42%,transparent);
  --blur:26px;

  --r:18px;
  --r-lg:26px;

  --step--1:clamp(.86rem,.83rem + .14vw,.94rem);
  --step-0:clamp(1rem,.97rem + .18vw,1.09rem);
  --step-1:clamp(1.16rem,1.08rem + .36vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2.2rem);
  --step-3:clamp(2rem,1.62rem + 1.8vw,3.3rem);
  --step-4:clamp(2.5rem,1.9rem + 3.2vw,4.9rem);

  --gap:clamp(1.4rem,1rem + 2vw,2.8rem);
  --band-y:clamp(4rem,2.8rem + 5vw,8rem);

  /* Space held for the booking form before it paints — see .embed in 04-sections.css.
     Measured rather than guessed, and measured again after the form's own title was hidden
     and its min-h-screen removed: 666px at desk width, 647–683 at 390. Holding too little
     makes the page jump when the form arrives; too much leaves a black gap under it, which
     is exactly what 1060 did once the form stopped being a screen tall. */
  --embed-min:690px;
  /* The standby iframe renders the provider's whole page, including the heading this site hides
     on the script embed, so it needs about 200px more before it scrolls inside itself. */
  --embed-standby:900px;

  --display:"Sora",-apple-system,"Segoe UI",sans-serif;
  --sans:"Manrope",-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* the header is fixed, so anchored sections must clear it */
html{scroll-behavior:smooth;scroll-padding-top:108px}

/* The hidden attribute has to win, and by default it does not.
   [hidden]{display:none} is a user-agent rule with the weakest possible
   specificity, so any class that sets display beats it. On this site
   .feature-card is display:flex — which meant the blog's category filter
   set `hidden` on eight cards, reported "2 of 10" quite correctly, and
   painted all ten anyway. Nothing in the DOM looked wrong; only the screen
   did. The same trap is waiting for every list this site filters in place,
   so it is closed here once rather than per component. */
[hidden]{display:none !important}

body{
  margin:0;background:var(--night);color:var(--text);
  font:400 var(--step-0)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.032em;line-height:1.03}
h1{font-size:var(--step-4);font-weight:500}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
code{font-family:ui-monospace,monospace;font-size:.9em;color:var(--brass);background:var(--brass-soft);padding:.1em .38em;border-radius:5px}

.wrap{width:min(1300px,100% - 2.5rem);margin-inline:auto}
.wrap-narrow{width:min(820px,100% - 2.5rem);margin-inline:auto}
.band{padding-block:var(--band-y)}
.band-alt{background:var(--night-2)}

/* ── light bands — same glass language, inverted ────────── */
.band-light{
  background:var(--sand);
  --text:var(--ink);--text-70:var(--ink-70);--text-45:var(--ink-45);
  --line:var(--ink-line);--line-2:color-mix(in srgb,var(--ink) 24%,transparent);
  --night-2:#fff;--night-3:#fff;--night:var(--sand-2);
  --glass:rgba(255,255,255,.6);
  color:var(--ink);
}
.band-light .eyebrow{color:var(--accent-light)}
.band-light .step-n{color:var(--accent-light)}
.band-light .mini li::before,.band-light .facts li::before{background:var(--accent-light)}
.band-light .ghost-link span{color:var(--accent-light)}
.band-light .ghost-link:hover{color:var(--accent-light)}
.band-light .card{box-shadow:0 18px 40px -30px rgba(21,39,46,.45)}
.band-light .cost .from{color:var(--accent-light)}
.band-light .citylist a:hover,.band-light .county h3{color:var(--ink)}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--text);color:var(--night);padding:.6rem 1rem;border-radius:8px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}