@charset "UTF-8";
/* ==========================================================================
   MAYFIELD MOTEL — the design system
   --------------------------------------------------------------------------
   Concept: RESTORED MID-CENTURY MOTOR MOTEL.
   The period is carried by geometry, proportion and signwriting — never by
   decay. Nothing here is distressed, sepia, grained or "aged". The building
   is 1962; the site is 2026 and spotless. That distinction is the whole brief.

   STRUCTURE, NOT SKIN.
   This site deliberately does not use the layout every accommodation site
   uses. There is no centred section header, no eyebrow-rule, no alternating
   background bands, no 3-or-4-up grid of rounded cards and no centred CTA
   band anywhere in this file. The page is built as a COURT:

     · a fixed sign rail (the kerb) standing down the left of the viewport
     · a low awning header with the booking slab bleeding off the right edge
     · numbered BAYS, each with its number and name hung in a permanent left
       margin column, divided by the black keyline
     · rooms as numbered DOORS in a row, not cards
     · amenities as a pierced breezeblock PEGBOARD
     · distances drawn to a real measured SCALE
     · the gallery as a numbered contact SHEET
     · a black SLAB closing every page

   ORDER
     01 Tokens          06 Kerb & awning       11 The scale
     02 Reset & base    07 Hangar & thumb bar  12 The pegboard
     03 Utilities       08 The base (footer)   13 The contact sheet
     04 Typography      09 The bay             14 Forms, fold, trail, locator
     05 Actions         10 Door & register     15 Page blocks, motion, print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   Every colour is inherited from something physically on the building: the
   green of the 1962 script logo and the sign panels, the red of the neon
   tubes and the room doors, the bone of the painted brick, and the heavy
   BLACK of the logo's outline — which is the colour that makes this read as
   signwriting rather than as another hospitality palette.
   ========================================================================== */
:root {
  --green-900:#123A18;
  --green-700:#1E5B2A;   /* PRIMARY — headings, dark sections. 7.0:1 on bone */
  --green-500:#3E9142;   /* the sign-panel green. 4.7:1 on ink — safe on black */
  --green-300:#B7CDAE;
  --green-100:#DCE8D4;

  /* THE RED RAMP — split by JOB. Signal red is a graphic colour; it does not
     clear AA as small text or as a small-text background, so it never becomes
     one. Measured on the rendered page by tools/qa.mjs on every run.
       -500  #D8321F  GRAPHICS ONLY — neon, rules, door plates, focus ring
       -600  #A81E10  TEXT + BUTTONS. White on it is 7.4:1
       -700  #7E160B  hover / pressed */
  --red-700:#7E160B;
  --red-600:#A81E10;
  --red-500:#D8321F;
  --red-100:#F7DED9;
  --red-on-dark:#FFB6A4;  /* 11:1 on ink — the accent for small text on black */

  --bone:#F2EFE4;
  --bone-2:#E8E3D2;
  --rule:#CFC7AE;
  --ink-900:#14120E;      /* the logo's black. 16.4:1 on bone */
  --ink-soft:#5C5850;
  --ink-onblack:#BDB6A4;  /* 9:1 on ink — secondary copy on black */
  /* Green is a much lighter field than black, so secondary copy on it needs
     its own value: --ink-onblack measures 4.02:1 there and fails AA. */
  --ink-ongreen:#D5CFBF;  /* 5.2:1 on --green-700 */
  --chalk:#FFFFFF;

  /* -- semantic --------------------------------------------------------- */
  --bg:var(--bone);
  --surface:var(--chalk);
  --ink:var(--ink-900);
  --ink-2:var(--ink-soft);
  --accent-text:var(--red-600);
  --line:var(--rule);
  --line-dark:rgba(242,239,228,.26);

  /* -- type -------------------------------------------------------------
     Bricolage Grotesque: a variable grotesque with genuinely idiosyncratic
     letterforms — tight, slightly awkward, sign-painted. No template ships it.
     Figtree underneath: warm and plain rather than Silicon-Valley-neutral.
     Bungee in exactly ONE place — the pylon. It is a typeface drawn for
     signage, including vertical setting, which is what the pylon is. */
  --font-display:'Bricolage Grotesque','Bricolage Grotesque Fallback',Georgia,serif;
  --font-body:'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sign:'Bungee','Bricolage Grotesque',system-ui,sans-serif;
  /* Bricolage is variable on opsz/wdth/wght — always set together, because
     font-variation-settings overrides font-weight. */
  --fv-display:'opsz' 48,'wdth' 88,'wght' 800;
  --fv-wide:'opsz' 48,'wdth' 100,'wght' 700;
  --fv-label:'opsz' 14,'wdth' 100,'wght' 700;
  --fv-numeral:'opsz' 48,'wdth' 78,'wght' 800;

  --fs-display:clamp(2.75rem,7.2vw,6.25rem);
  --fs-h1:clamp(2.25rem,4.5vw,3.75rem);
  --fs-h2:clamp(1.75rem,3vw,2.625rem);
  --fs-h3:clamp(1.1875rem,1.8vw,1.5rem);
  --fs-lead:clamp(1.125rem,1.6vw,1.375rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;

  /* -- space (8px base) ------------------------------------------------- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;    --s-10:8rem;   --s-11:10rem;

  --shell:1440px;          /* the outer measure — wider than the kit's 1280 */
  --margin-col:0px;        /* the bay margin column; set from 1080px up */
  --kerb:0px;              /* the sign rail; set from 1200px up */
  --gutter:1.5rem;
  --bay-y:clamp(3.25rem,6vw,6rem);

  /* -- shape -------------------------------------------------------------
     THE SIGNWRITER'S CONSTRUCTION. It comes straight off the logo: the
     Mayfield script is a green fill inside a heavy BLACK OUTLINE, and the
     pylon is flat panels with hard edges. So every surface here is built the
     same way — a solid black keyline and a solid black offset, no blur
     anywhere. Soft shadows and 14px radii are what every hospitality template
     ships; hard keylines and hard offsets are what a sign painter does. */
  --r-sm:0; --r-md:2px; --r-lg:3px; --r-pill:999px;

  --key:2px;
  --keyline:var(--key) solid var(--ink-900);
  --keyline-bone:var(--key) solid var(--bone);

  --shadow-1:3px 3px 0 var(--ink-900);
  --shadow-2:6px 6px 0 var(--ink-900);
  --shadow-3:10px 10px 0 var(--ink-900);
  --shadow-bone:3px 3px 0 var(--bone);

  /* -- motion ----------------------------------------------------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-micro:180ms;
  --t-move:320ms;
  --t-enter:600ms;

  --hdr-h:84px;
  --thumb-h:0px;
}

@media (min-width:640px){ :root{ --gutter:2.25rem; } }
@media (min-width:1080px){ :root{ --gutter:3rem; --margin-col:172px; } }
@media (min-width:1200px){ :root{ --kerb:84px; } }
@media (max-width:767px){ :root{ --thumb-h:64px; } }

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  /* The page is inset PAST the sign rail, never sliding under it. */
  padding-left:var(--kerb);
  padding-bottom:var(--thumb-h);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-family:var(--font-display); color:var(--ink-900); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }

a{ color:var(--green-700); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--red-600); }

img,svg,video{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }

/* [hidden] must win over the component display rules below — the hangar and
   the lightbox are display:flex/grid, which would otherwise defeat it and
   leave a fixed panel sitting off-canvas creating horizontal overflow. */
[hidden]{ display:none!important; }
strong,b{ font-weight:700; }

::selection{ background:var(--red-500); color:#fff; }

/* One focus treatment, everywhere. Never removed. */
:focus-visible{
  outline:3px solid var(--red-500);
  outline-offset:2px;
  border-radius:2px;
}
.on-black :focus-visible,
.slab :focus-visible,
.base :focus-visible,
.front :focus-visible,
.bay--black :focus-visible,
.bay--green :focus-visible,
.lightbox :focus-visible{ outline-color:var(--red-on-dark); }

/* ==========================================================================
   03  UTILITIES
   ========================================================================== */
.u-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:var(--s-4); top:-100px; z-index:200;
  background:var(--red-600); color:#fff; padding:.75rem 1.25rem;
  border:var(--keyline); font-weight:700; text-decoration:none;
  transition:top var(--t-micro) var(--ease);
}
.skip:focus{ top:0; color:#fff; }

.measure{ max-width:62ch; }
.prose{ max-width:66ch; }
.prose p + p{ margin-top:1.1em; }
.prose p{ margin-bottom:0; }
.stack > * + *{ margin-top:var(--s-5); }
.stack-sm > * + *{ margin-top:var(--s-4); }
.ico{ flex:none; }

/* Every dark surface opts in through THIS list, so a panel can never end up
   with dark-on-dark text because someone forgot a class. */
.on-black,.front,.slab,.base,.bay--black,.bay--green{
  --ink:var(--bone);
  --ink-2:var(--ink-onblack);
  --accent-text:var(--red-on-dark);
  --line:var(--line-dark);
  --surface:rgba(255,255,255,.05);
  color:var(--bone);
}
.on-black h1,.on-black h2,.on-black h3,.on-black h4,
.front h1,.front h2,.slab h2,.base h2,
.bay--black h1,.bay--black h2,.bay--black h3,.bay--black h4,
.bay--green h1,.bay--green h2,.bay--green h3,.bay--green h4{ color:var(--bone); }
.on-black a,.front a,.slab a,.base a,.bay--black a,.bay--green a{ color:var(--bone); }
.on-black a:hover,.front a:hover,.slab a:hover,.base a:hover,
.bay--black a:hover,.bay--green a:hover{ color:var(--red-on-dark); }
.bay--green,.crown--green{ --ink-2:var(--ink-ongreen); }

/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */
.t-display,.t-h1,.t-h2,.t-h3,
.head__h,.front__h,.door__h,.straight__h,.slab__h,.reg__h{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-weight:800;
}
.t-display,.front__h{ font-size:var(--fs-display); line-height:.94; letter-spacing:-.025em; }
.t-h1{ font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.02em; }
.t-h2,.head__h,.slab__h{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.018em; }
.t-h3,.door__h,.straight__h{ font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; }
.t-lead,.head__lede{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); }
.t-small{ font-size:var(--fs-small); }

/* THE STENCIL LABEL. Replaces the eyebrow-plus-rule that opens every section
   on every hospitality site — here the section's label lives in the bay's
   margin column instead, and this is used only for small standalone marks. */
.tag{
  display:inline-flex; align-items:center;
  padding:.28rem .6rem;
  background:var(--ink-900); color:var(--bone);
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  line-height:1.35;
}
.tag--soft{ background:transparent; color:var(--ink-900); border:1px solid var(--ink-900); }
.tag--red{ background:var(--red-600); }
.on-black .tag--soft,.bay--black .tag--soft,.bay--green .tag--soft{ color:var(--bone); border-color:var(--bone); }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* The sign numeral — a door number, a bay number, a year. */
.nums{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-numeral);
  font-feature-settings:"tnum";
  font-size:clamp(3rem,7vw,6rem);
  line-height:.78; letter-spacing:-.04em;
  color:var(--rule);
  display:block;
}
.nums--red{ color:var(--red-600); }
.nums--ghost{ color:rgba(242,239,228,.16); }

/* A visible, deliberate placeholder for a fact the owner must confirm. */
.stamp{
  display:inline-flex; align-items:center;
  padding:.1rem .45rem; margin-right:.35rem;
  border:1px dashed var(--red-600); background:var(--red-100);
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-700);
}

/* ==========================================================================
   05  ACTIONS
   A printed panel: black keyline, hard black offset, no blur. Hover PRESSES
   it into the page along its own offset instead of lifting it on a shadow,
   because a sign painter's panel does not float.
   ========================================================================== */
.act{
  --act-bg:var(--red-600);
  --act-fg:#fff;
  --act-bd:var(--ink-900);
  --act-shadow:var(--shadow-1);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.8rem 1.6rem;
  background:var(--act-bg); color:var(--act-fg);
  border:var(--key) solid var(--act-bd); border-radius:var(--r-md);
  box-shadow:var(--act-shadow);
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 96,'wght' 700;
  font-size:.9375rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease),
             transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.act:hover{ transform:translate(3px,3px); box-shadow:0 0 0 var(--act-bd); color:var(--act-fg); }
.act:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--act-bd); }
.act__ico{ margin-inline-start:-.15rem; }
.act__ext{ opacity:.75; }

.act--go:hover{ --act-bg:var(--red-700); }
.act--green{ --act-bg:var(--green-700); }
.act--green:hover{ --act-bg:var(--green-900); }
.act--line{ --act-bg:var(--chalk); --act-fg:var(--ink-900); }
.act--line:hover{ --act-bg:var(--green-100); --act-fg:var(--ink-900); }
/* On black the keyline flips to bone — a black keyline on a black field is
   invisible, and the panel loses its construction entirely. */
.act--ghost{ --act-bg:transparent; --act-fg:var(--bone); --act-bd:var(--bone); --act-shadow:var(--shadow-bone); }
.act--ghost:hover{ --act-bg:var(--bone); --act-fg:var(--ink-900); }
.act--block{ width:100%; }
.acts{ display:flex; flex-wrap:wrap; gap:var(--s-4); }

/* A text link that steps forward. */
.onward{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 96,'wght' 700;
  text-decoration:none; color:var(--green-700);
  border-bottom:2px solid var(--red-500); align-self:flex-start;
}
.onward .ico{ transition:transform var(--t-micro) var(--ease); }
.onward:hover{ color:var(--red-600); }
.onward:hover .ico{ transform:translateX(4px); }
.on-black .onward,.bay--black .onward,.bay--green .onward{ color:var(--bone); }

/* ==========================================================================
   06  THE KERB + THE AWNING
   ========================================================================== */

/* ---- the kerb: the pylon standing beside the page ----------------------
   Fixed, decorative, aria-hidden. It holds nothing that isn't reachable
   elsewhere — a fixed rail carrying the only copy of the phone number would
   be a trap for a screen reader and a dead zone for a keyboard. */
.kerb{ display:none; }
@media (min-width:1200px){
  .kerb{
    position:fixed; left:0; top:0; bottom:0; width:var(--kerb); z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    padding-block:var(--s-5);
    background:var(--ink-900); border-right:2px solid var(--red-600);
  }
  .kerb__lamp{
    width:18px; height:18px; flex:none; border-radius:50%;
    background:var(--red-500);
    box-shadow:0 0 10px rgba(216,50,31,.9),0 0 26px rgba(216,50,31,.5);
    animation:lamp 4s var(--ease) infinite;
  }
  .kerb__word{
    writing-mode:vertical-rl; text-orientation:mixed;
    font-family:var(--font-sign); font-size:1rem; letter-spacing:.24em;
    color:var(--bone); text-transform:uppercase;
  }
  .kerb__rule{ width:2px; flex:1 1 auto; min-height:24px; background:rgba(242,239,228,.22); margin-block:var(--s-4); }
  .kerb__no{
    font-family:var(--font-display); font-variation-settings:var(--fv-numeral);
    font-size:1.5rem; color:var(--green-500); letter-spacing:.02em;
  }
}
@keyframes lamp{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.35) } }

/* ---- the awning: the header ------------------------------------------ */
.awning{
  position:sticky; top:0; z-index:90;
  background:var(--bone);
  border-bottom:var(--keyline);
  transition:box-shadow var(--t-move) var(--ease);
}
.awning.is-stuck{ box-shadow:0 5px 0 rgba(20,18,14,.10); }

.awning__in{
  display:flex; align-items:stretch; gap:var(--s-5);
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-left:var(--gutter);
  min-height:var(--hdr-h);
}

.brand{
  display:flex; align-items:center; gap:.7rem; align-self:center;
  min-height:48px; text-decoration:none; flex:none; padding-right:.6rem;
}
.brand__mark{ width:auto; height:46px; }
.brand__est{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); writing-mode:vertical-rl; text-orientation:mixed;
  border-left:2px solid var(--red-600); padding-left:.35rem;
}

/* the nav, ranged LEFT beside the mark — never centred */
.prime{ display:flex; align-items:stretch; margin-right:auto; }
.prime__list{ display:flex; align-items:stretch; }
.prime__i{ display:flex; }
.prime__a{
  position:relative; display:flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem; min-height:48px;
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 92,'wght' 700;
  font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-900); text-decoration:none;
  transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.prime__lamp{
  width:7px; height:7px; flex:none; background:transparent;
  border:1.5px solid var(--rule); border-radius:50%;
  transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.prime__a:hover{ background:var(--ink-900); color:var(--bone); }
.prime__a:hover .prime__lamp{ background:var(--red-500); border-color:var(--red-500); }
.prime__a.is-here .prime__lamp{
  background:var(--red-500); border-color:var(--red-500);
  box-shadow:0 0 8px rgba(216,50,31,.75);
}
.prime__a.is-here::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:10px; height:3px;
  background:var(--red-600);
}
.prime__a.is-here:hover::after{ background:var(--bone); }

.awning__tel{
  display:flex; flex-direction:column; justify-content:center; align-self:center;
  padding:.35rem 0 .35rem var(--s-5); min-height:48px;
  text-decoration:none; color:var(--ink-900);
  border-left:1px solid var(--rule);
}
.awning__tel .ico{ display:none; }
.awning__telno{
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 92,'wght' 800;
  font-size:1.0625rem; letter-spacing:-.01em; line-height:1.15;
}
.awning__telsub{ font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.awning__tel:hover{ color:var(--red-700); }

/* the booking slab — full height of the awning, bleeding off the right edge */
.awning__book{
  display:flex; align-items:center; flex:none;
  padding:0 var(--s-6) 0 var(--s-5);
  background:var(--red-600); color:#fff; text-decoration:none;
  border-left:var(--keyline);
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 94,'wght' 700;
  font-size:.8125rem; line-height:1.2; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--t-micro) var(--ease);
}
.awning__book:hover{ background:var(--ink-900); color:#fff; }

.latch{
  display:none; align-items:center; justify-content:center; align-self:center;
  width:50px; height:50px; margin-left:auto; margin-right:var(--gutter);
  background:var(--ink-900); border:var(--keyline); border-radius:var(--r-md);
  box-shadow:var(--shadow-1); cursor:pointer;
}
.latch__box{ display:block; width:20px; }
.latch__box span{ display:block; height:2px; background:var(--bone);
  transition:transform var(--t-move) var(--ease),opacity var(--t-micro) var(--ease); }
.latch__box span + span{ margin-top:4px; }
.latch[aria-expanded="true"] .latch__box span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.latch[aria-expanded="true"] .latch__box span:nth-child(2){ opacity:0; }
.latch[aria-expanded="true"] .latch__box span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   07  THE HANGAR (mobile menu) + THE THUMB BAR
   ========================================================================== */
.scrim{
  position:fixed; inset:0; z-index:98; background:rgba(20,18,14,.62);
  opacity:0; transition:opacity var(--t-move) var(--ease);
}
.scrim.is-open{ opacity:1; }

/* Enters from the LEFT — from the kerb, where the sign is. */
.hangar{
  position:fixed; inset:0 auto 0 0; z-index:99;
  width:min(370px,86vw); display:flex; flex-direction:column;
  background:var(--bone); border-right:var(--keyline); box-shadow:var(--shadow-3);
  transform:translateX(-101%); transition:transform var(--t-move) var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
.hangar.is-open{ transform:translateX(0); }
.hangar__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-5); border-bottom:var(--keyline);
}
.hangar__logo{ width:auto; height:38px; }
.hangar__close{
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--ink-900); color:var(--bone); border:var(--keyline); border-radius:var(--r-md);
  cursor:pointer;
}
.hangar__list{ padding:var(--s-3) var(--s-5) var(--s-5); }
.hangar__a{
  display:flex; align-items:baseline; gap:.9rem; padding:.8rem 0; min-height:48px;
  font-family:var(--font-display); font-variation-settings:'opsz' 32,'wdth' 88,'wght' 800;
  font-size:1.375rem; color:var(--ink-900); text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.hangar__n{
  font-size:.6875rem; letter-spacing:.14em; color:var(--red-600);
  font-variation-settings:var(--fv-label); font-feature-settings:"tnum";
}
.hangar__a.is-here{ color:var(--red-700); }
.hangar__foot{ margin-top:auto; padding:var(--s-5); background:var(--ink-900); color:var(--bone); }
.hangar__addr{ font-weight:700; margin-bottom:.2rem; color:var(--bone); }
.hangar__hours{ font-size:var(--fs-small); color:var(--ink-onblack); margin-bottom:var(--s-4); }
.hangar__call{
  display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s-4); min-height:44px;
  font-family:var(--font-display); font-variation-settings:'opsz' 32,'wdth' 92,'wght' 800;
  font-size:1.375rem; color:var(--bone); text-decoration:none;
}
.hangar__call:hover{ color:var(--red-on-dark); }
.hangar__foot .act{ width:100%; }

/* A meaningful share of these bookings happen on a phone at the side of a
   road. Call and Book are never more than a thumb away. */
.thumb{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  background:var(--ink-900); border-top:2px solid var(--red-600);
  padding-bottom:env(safe-area-inset-bottom);
}
.thumb__b{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:64px; padding:.5rem; text-decoration:none; text-align:center;
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 94,'wght' 700;
  font-size:.875rem; letter-spacing:.04em; text-transform:uppercase;
}
.thumb__b--call{ color:var(--bone); border-right:1px solid rgba(242,239,228,.24); }
.thumb__b--book{ background:var(--red-600); color:#fff; }
.thumb__b--book:hover{ background:var(--red-700); color:#fff; }
@media (max-width:767px){ .thumb{ display:grid; } }

/* ==========================================================================
   08  THE BASE (footer)
   Leads with the address at sign size, because that is what is painted on
   the building — not with a five-column link farm.
   ========================================================================== */
.base{ background:var(--ink-900); color:var(--ink-onblack); }
.base__sign{ border-bottom:1px solid rgba(242,239,228,.18); background:var(--green-900); }
.base__signin{
  width:100%; max-width:var(--shell); margin-inline:auto; padding:var(--s-7) var(--gutter);
  display:grid; gap:var(--s-5); align-items:end;
}
.base__addr{ margin:0; display:flex; flex-direction:column; gap:.25rem; }
.base__addr1{
  font-family:var(--font-display); font-variation-settings:'opsz' 96,'wdth' 84,'wght' 800;
  font-size:clamp(2rem,5.5vw,4rem); line-height:.95; letter-spacing:-.03em; color:var(--bone);
}
.base__addr2{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green-300);
}
.base__tel{
  justify-self:start; display:inline-flex; align-items:center; min-height:50px;
  font-family:var(--font-display); font-variation-settings:'opsz' 96,'wdth' 88,'wght' 800;
  font-size:clamp(1.75rem,4vw,3rem); line-height:1.1; letter-spacing:-.02em;
  color:var(--bone); text-decoration:none; border-bottom:4px solid var(--red-600);
}
.base__tel:hover{ color:var(--red-on-dark); }
@media (min-width:900px){
  .base__signin{ grid-template-columns:minmax(0,1fr) auto; }
}

.base__in{
  width:100%; max-width:var(--shell); margin-inline:auto; padding:var(--s-8) var(--gutter);
  display:grid; gap:var(--s-7);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.2fr);
}
.base__logo{ width:auto; height:50px; margin-bottom:var(--s-4); }
.base__tag{
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 96,'wght' 700;
  font-size:1.0625rem; color:var(--bone); margin-bottom:var(--s-5);
}
.base__nap{ font-style:normal; display:flex; flex-direction:column; gap:.45rem; font-size:var(--fs-small); }
.base__nap a,.base__hours{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-onblack); text-decoration:none; }
.base__nap a{ align-self:flex-start; min-height:44px; }
.base__nap a:hover{ color:var(--bone); }
.base__name{ font-weight:700; color:var(--bone); }

.base__ch{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-300)!important; margin-bottom:var(--s-3);
  padding-bottom:.5rem; border-bottom:1px solid rgba(242,239,228,.18);
}
.base__list{ display:flex; flex-direction:column; font-size:var(--fs-small); }
.base__list a{
  display:flex; align-items:center; min-height:44px;
  color:var(--bone); text-decoration:none; opacity:.86;
  transition:opacity var(--t-micro) var(--ease),padding-left var(--t-micro) var(--ease);
}
.base__list a:hover{ opacity:1; color:var(--red-on-dark); padding-left:5px; }
.base__facts{ display:flex; flex-direction:column; gap:.5rem; font-size:var(--fs-small); margin-bottom:var(--s-5); }
.base__facts li{ display:flex; justify-content:space-between; gap:var(--s-3);
  border-bottom:1px solid rgba(242,239,228,.18); padding-bottom:.4rem; }
.base__facts b{ color:var(--bone); font-feature-settings:"tnum"; white-space:nowrap; }
.base__dir{ min-height:46px; padding:.5rem 1rem; font-size:.8125rem; }

.base__legal{ background:#0C0B08; font-size:.8125rem; }
.base__legalin{
  width:100%; max-width:var(--shell); margin-inline:auto; padding:var(--s-4) var(--gutter);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; align-items:center;
}
.base__legal p{ margin:0; }
.base__bz{ display:inline-flex; vertical-align:middle; color:var(--green-500); }
.base__legallinks{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.base__legallinks a{ display:flex; align-items:center; min-height:44px; }
.base__legal a{ color:var(--ink-onblack); text-decoration:none; }
.base__legal a:hover{ color:var(--bone); }

/* ==========================================================================
   09  THE BAY — the structural unit of every page

   A numbered span of the court. The bay's number and name sit in a permanent
   margin column on the left and stay with you as the bay scrolls; the
   content sits to the right of them. Headings hang left and are NEVER
   centred, because a plan drawing is never centred. Bays are divided by the
   black keyline, not by alternating background colours.
   ========================================================================== */
.bay{ padding-block:var(--bay-y); position:relative; }
.bay + .bay{ border-top:var(--keyline); }
.bay--black{ background:var(--ink-900); }
.bay--green{ background:var(--green-700); }
.bay--bone{ background:var(--bone-2); }
.bay--tight{ padding-block:calc(var(--bay-y) * .6); }
.bay--flush{ padding-bottom:0; }

.bay__in{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-5);
}
.bay__in--wide{ max-width:none; }
@media (min-width:1080px){
  .bay__in{ grid-template-columns:var(--margin-col) minmax(0,1fr); gap:0 var(--s-7); }
  .bay--nomargin .bay__in{ grid-template-columns:minmax(0,1fr); }
}

.bay__margin{
  display:flex; align-items:baseline; gap:var(--s-4);
  padding-bottom:var(--s-3); border-bottom:var(--keyline);
}
.bay__no{
  font-family:var(--font-display); font-variation-settings:var(--fv-numeral);
  font-feature-settings:"tnum";
  font-size:2.25rem; line-height:.8; color:var(--red-600);
}
.bay__tag{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2);
}
.bay__tick{ display:none; }
.bay--black .bay__margin,.bay--green .bay__margin{ border-color:rgba(242,239,228,.3); }
.bay--black .bay__no,.bay--green .bay__no{ color:var(--red-on-dark); }
.bay--black .bay__tag,.bay--green .bay__tag{ color:var(--ink-2); }

@media (min-width:1080px){
  /* On desktop the margin column stands up: the number sits at the top of the
     bay and the label runs DOWN the page beside it, so the left edge of every
     page reads like a measured drawing. It sticks, so whichever bay you are
     reading names itself. */
  .bay__margin{
    position:sticky; top:calc(var(--hdr-h) + 24px); align-self:start;
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
    padding-bottom:0; border-bottom:0;
    border-left:var(--keyline); padding-left:var(--s-4);
    min-height:190px;
  }
  .bay__no{ font-size:3.25rem; }
  .bay__tag{ writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.24em; }
  .bay__tick{ display:block; width:2px; flex:1 1 auto; background:var(--red-600); min-height:28px; }
  .bay--black .bay__margin,.bay--green .bay__margin{ border-left-color:rgba(242,239,228,.3); }
}

/* The heading block inside a bay.
   The measure is set on the HEADING and the LEDE separately, never on the
   block: clamping the block to a headline measure drags the lede into a
   28-character column with half the bay empty beside it. */
.head{ margin-bottom:var(--s-6); }
.head__h{ margin:0; max-width:20ch; }
.head--wide .head__h{ max-width:32ch; }
.head__lede{ margin:var(--s-4) 0 0; max-width:58ch; }

/* ---- media ------------------------------------------------------------ */
.mount{
  position:relative; overflow:hidden;
  background:var(--green-100); border:var(--keyline); box-shadow:var(--shadow-1);
  aspect-ratio:var(--ar,3/2);
}
.mount > img{ width:100%; height:100%; object-fit:cover; }
.mount--flat{ box-shadow:none; }
.fig{ margin:0; }
.fig__cap{ margin-top:var(--s-3); font-size:var(--fs-small); color:var(--ink-2); max-width:46ch; }
.on-black .mount,.bay--black .mount,.bay--green .mount{ box-shadow:none; border-color:var(--bone); }

/* the honest "photo needed" slot. Designed, not broken. */
.gap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
  /* width:100% matters: with aspect-ratio set, an ancestor forcing height:100%
     would otherwise make the WIDTH derive from the height and blow the track
     out sideways. */
  width:100%; aspect-ratio:var(--ar,3/2); padding:var(--s-4);
  background:var(--bone-2); border:var(--key) dashed var(--ink-900);
  color:var(--ink-soft); text-align:center;
}
.gap__glyph{ color:var(--rule); }
.gap__label{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-900);
}
.gap__what{ font-size:var(--fs-small); max-width:26ch; line-height:1.4; }
.gap--wanted{ border-color:var(--red-600); border-style:solid; background:var(--red-100); }
.gap--wanted .gap__label{ color:var(--red-700); }
.gap--wanted .gap__glyph{ color:var(--red-500); }

/* ---- the straight-up notice ------------------------------------------- */
.straight{
  display:flex; align-items:stretch;
  background:var(--chalk); border:var(--keyline); box-shadow:var(--shadow-2);
}
.straight__rail{
  flex:none; width:44px; background:var(--red-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.straight__rail > span{
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
}
.straight__b{ padding:var(--s-5) var(--s-6); }
.straight__h{ margin-bottom:var(--s-3); }
.straight__body{ color:var(--ink-900); }
.straight__body ul{ display:flex; flex-direction:column; gap:.5rem; margin-top:var(--s-3); }
.straight__body ul li{ display:flex; gap:.6rem; align-items:flex-start; }
.straight__body ul li::before{
  content:""; flex:none; width:8px; height:8px; margin-top:.58em; background:var(--red-500);
}
.bay--black .straight,.bay--green .straight,.on-black .straight{ box-shadow:var(--shadow-bone); }
.bay--black .straight__h,.bay--green .straight__h,.on-black .straight__h{ color:var(--ink-900); }
.bay--black .straight a,.bay--green .straight a,.on-black .straight a{ color:var(--green-700); }
.bay--black .straight a:hover,.bay--green .straight a:hover{ color:var(--red-700); }

/* ---- a ruled key/value strip ------------------------------------------ */
.strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:2px; background:var(--ink-900); border:var(--keyline); margin:0;
}
.strip__c{ background:var(--bone); padding:var(--s-4); }
.strip__c dt{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.25rem;
}
.strip__c dd{
  margin:0; font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 92,'wght' 700;
  font-size:1.0625rem; color:var(--ink-900); line-height:1.25;
}

/* ==========================================================================
   10  THE DOOR + THE REGISTER
   ========================================================================== */

/* ---- the door: a room, as a numbered door in a row of doors ------------ */
.doors{ border-top:var(--keyline); }
.door{ border-bottom:var(--keyline); }
.door__hit{
  display:grid; grid-template-columns:76px minmax(0,1fr);
  text-decoration:none; color:inherit;
  transition:background var(--t-move) var(--ease);
}
.door__hit:hover{ background:var(--bone-2); color:inherit; }

/* the door itself: a red panel with its number and a knob */
.door__plate{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--s-4); padding:var(--s-5) 0;
  background:var(--red-600); border-right:var(--keyline);
  transition:background var(--t-move) var(--ease);
}
.door__hit:hover .door__plate{ background:var(--ink-900); }
.door__no{
  font-family:var(--font-display); font-variation-settings:var(--fv-numeral);
  font-feature-settings:"tnum"; font-size:2rem; line-height:1; color:#fff;
}
.door__knob{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.75); }

.door__media{ display:block; background:var(--green-100); }
.door__media .shot{ width:100%; height:100%; object-fit:cover; }
.door__media .gap{ height:100%; aspect-ratio:4/3; border:0; }
.door__body{ display:flex; flex-direction:column; gap:.65rem; padding:var(--s-5); }
.door__h{ color:var(--ink-900); }
.door__spec{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem var(--s-4);
  padding-block:var(--s-3); border-block:1px solid var(--rule);
  font-size:var(--fs-small);
}
.door__k{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  align-self:center;
}
.door__v{ font-weight:600; color:var(--ink-900); }
.door__blurb{ font-size:var(--fs-small); color:var(--ink-2); }
.door__go{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:var(--s-3);
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 96,'wght' 700;
  font-size:.875rem; color:var(--green-700);
}
.door__go .ico{ transition:transform var(--t-micro) var(--ease); }
.door__hit:hover .door__go{ color:var(--red-700); }
.door__hit:hover .door__go .ico{ transform:translateX(4px); }

@media (min-width:720px){
  .door__hit{ grid-template-columns:88px minmax(0,300px) minmax(0,1fr); align-items:stretch; }
  .door__media{ border-right:var(--keyline); }
  .door__body{ padding:var(--s-6); }
}
@media (min-width:1080px){
  .door__hit{ grid-template-columns:100px minmax(0,360px) minmax(0,1fr); }
}

/* ---- the register: a ruled, numbered ledger ---------------------------- */
.reg{ border-top:var(--keyline); }
.reg__i{ border-bottom:1px solid var(--rule); }
.reg__hit{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-3) var(--s-5);
  align-items:baseline; padding:var(--s-5) 0; text-decoration:none; color:inherit;
  transition:padding-left var(--t-move) var(--ease),background var(--t-move) var(--ease);
}
a.reg__hit:hover{ background:var(--bone-2); padding-left:var(--s-4); color:inherit; }
.reg__no{
  font-family:var(--font-display); font-variation-settings:var(--fv-numeral);
  font-feature-settings:"tnum"; font-size:1.75rem; line-height:1; color:var(--red-600);
  min-width:2.2ch;
}
.reg__b{ display:flex; flex-direction:column; gap:.4rem; }
.reg__h{ font-size:var(--fs-h3); margin:0; color:var(--ink-900); }
.reg__p{ font-size:var(--fs-small); color:var(--ink-2); max-width:62ch; }
.reg__go{ display:none; }
a.reg__hit:hover .reg__h{ color:var(--red-700); }

.bay--black .reg,.bay--green .reg{ border-top-color:var(--bone); }
.bay--black .reg__i,.bay--green .reg__i{ border-bottom-color:rgba(242,239,228,.24); }
.bay--black .reg__no,.bay--green .reg__no{ color:var(--red-on-dark); }
.bay--black .reg__h,.bay--green .reg__h{ color:var(--bone); }
.bay--black a.reg__hit:hover,.bay--green a.reg__hit:hover{ background:rgba(242,239,228,.07); }
.bay--black a.reg__hit:hover .reg__h,.bay--green a.reg__hit:hover .reg__h{ color:var(--red-on-dark); }

@media (min-width:720px){
  .reg__hit{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
  .reg__go{ display:flex; color:var(--red-600); transition:transform var(--t-micro) var(--ease); }
  a.reg__hit:hover .reg__go{ transform:translateX(5px); }
  .bay--black .reg__go,.bay--green .reg__go{ color:var(--red-on-dark); }
}

/* ==========================================================================
   11  THE SCALE — distances, drawn to scale
   Bar length is computed from the real kilometres, so the drawing is true. A
   column of icons with numbers beside them tells a guest nothing they
   couldn't read; a measured scale tells them the shape of the town.
   ========================================================================== */
.scale{ border-top:var(--keyline); }
.scale__i{
  display:grid; align-items:center; gap:.15rem var(--s-4);
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"km label" "track track" "drive drive";
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.scale__km{
  grid-area:km;
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 88,'wght' 800;
  font-feature-settings:"tnum"; font-size:1.0625rem; color:var(--ink-900); white-space:nowrap;
}
.scale__label{ grid-area:label; font-size:var(--fs-small); }
.scale__track{
  grid-area:track; height:10px; background:var(--bone-2); border:1px solid var(--ink-900);
  margin-block:.35rem;
}
.scale__bar{ display:block; height:100%; background:var(--red-500); }
.scale__drive{ grid-area:drive; font-size:.8125rem; color:var(--ink-2); font-feature-settings:"tnum"; }

@media (min-width:720px){
  .scale__i{
    grid-template-columns:7.5rem minmax(0,1fr) minmax(0,15rem) 4.5rem;
    grid-template-areas:"km track label drive";
    gap:var(--s-4);
  }
  .scale__track{ margin-block:0; }
  .scale__drive{ text-align:right; }
}
.bay--black .scale,.bay--green .scale{ border-top-color:var(--bone); }
.bay--black .scale__i,.bay--green .scale__i{ border-bottom-color:rgba(242,239,228,.24); }
.bay--black .scale__km,.bay--green .scale__km{ color:var(--bone); }
.bay--black .scale__track,.bay--green .scale__track{ background:rgba(242,239,228,.12); border-color:var(--bone); }

/* ---- THE LEDGER — the things-to-do list --------------------------------
   The kilometres are the left-hand column and read as a running scale down
   the page: how far, then what. It is the densest block on the site and the
   only one that carries outbound links, so the source host is printed under
   each entry rather than hidden behind "read more". */
.ledger{ border-top:var(--keyline); }
.ledger__i{
  display:grid; grid-template-columns:minmax(0,1fr); gap:.35rem;
  padding:var(--s-5) 0; border-bottom:1px solid var(--rule);
}
.ledger__km{
  margin:0;
  font-family:var(--font-display); font-variation-settings:'opsz' 48,'wdth' 84,'wght' 800;
  font-feature-settings:"tnum"; font-size:1.375rem; line-height:1.1; color:var(--red-600);
}
.ledger__drive{
  display:block; margin-top:.2rem;
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.ledger__h{ font-size:var(--fs-h3); margin:0; }
.ledger__h a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--ink-900); text-decoration:none;
}
.ledger__h a:hover{ color:var(--red-700); text-decoration:underline; }
.ledger__desc{ font-size:var(--fs-small); margin:.15rem 0 0; max-width:64ch; }
.ledger__detail{ font-size:.8125rem; color:var(--ink-2); margin:.35rem 0 0; max-width:64ch; }
.ledger__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:.7rem 0 0; }
.ledger__src{
  display:inline-flex; align-items:center; gap:.3rem; min-height:44px;
  font-size:.75rem; color:var(--green-700); text-decoration:none;
}
.ledger__src:hover{ color:var(--red-700); text-decoration:underline; }
@media (min-width:720px){
  .ledger__i{ grid-template-columns:9rem minmax(0,1fr); gap:var(--s-5); }
}

/* ==========================================================================
   12  THE PEGBOARD — amenities as a pierced breezeblock wall
   The cells are divided by the black keyline itself: a black ground showing
   through a 2px grid gap, so the wall is built out of the same construction
   as every other surface here.
   ========================================================================== */
.peg{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:2px; background:var(--ink-900); border:var(--keyline);
}
.peg__i{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.55rem; justify-content:flex-end;
  min-height:120px; padding:var(--s-4);
  background:var(--bone); color:var(--ink-900);
}
.peg__ico{ color:var(--red-600); position:relative; z-index:1; }
.peg__l{ font-size:var(--fs-small); line-height:1.35; position:relative; z-index:1; }
.peg__bz{ position:absolute; right:-14px; top:-14px; color:var(--rule); opacity:.55; pointer-events:none; }
.peg__i--on{ background:var(--ink-900); color:var(--bone); }
.peg__i--on .peg__ico{ color:var(--red-on-dark); }
.peg__i--on .peg__bz{ color:rgba(242,239,228,.16); opacity:1; }

/* ==========================================================================
   13  THE CONTACT SHEET — the gallery
   Numbered frames, captions printed UNDER the frame and always visible. A
   caption that only appears on hover is invisible on a phone, which is where
   most of this site is read.
   ========================================================================== */
.sheet{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-4); }
@media (min-width:720px){ .sheet{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sheet__i{ margin:0; display:flex; flex-direction:column; }
.sheet__i--wide{ grid-column:span 2; }
.sheet__hit{
  display:block; width:100%; padding:0; background:none; border:0; cursor:zoom-in; text-align:left;
}
.sheet__hit--flat{ cursor:default; }
.sheet__frame{
  position:relative; display:block; overflow:hidden;
  border:var(--keyline); background:var(--green-100); box-shadow:var(--shadow-1);
  aspect-ratio:4/3;
}
.sheet__frame > .shot{ width:100%; height:100%; object-fit:cover; transition:transform 480ms var(--ease); }
.sheet__hit:hover .shot{ transform:scale(1.04); }
.sheet__frame .gap{ height:100%; aspect-ratio:auto; border:0; }
.sheet__no{
  position:absolute; left:0; top:0; z-index:1;
  padding:.2rem .5rem; background:var(--ink-900); color:var(--bone);
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-feature-settings:"tnum"; font-size:.625rem; letter-spacing:.12em;
}
.sheet__cap{
  display:flex; gap:.5rem; align-items:baseline;
  margin-top:.6rem; font-size:.8125rem; line-height:1.4; color:var(--ink-2);
}
.sheet__capno{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-feature-settings:"tnum"; font-size:.625rem; color:var(--red-600); flex:none;
}
.sheet__i--off{ display:none; }
.bay--black .sheet__cap,.bay--green .sheet__cap{ color:var(--ink-onblack); }
.bay--black .sheet__frame,.bay--green .sheet__frame{ box-shadow:var(--shadow-bone); border-color:var(--bone); }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--s-6); }
.filter{
  min-height:44px; padding:.5rem 1rem; background:var(--bone);
  border:var(--keyline); border-radius:var(--r-md); box-shadow:2px 2px 0 var(--ink-900);
  font-family:var(--font-display); font-variation-settings:'opsz' 14,'wdth' 94,'wght' 700;
  font-size:.8125rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-900); cursor:pointer;
  transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease),
             transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.filter:hover{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-900); }
.filter[aria-pressed="true"]{ background:var(--ink-900); color:var(--bone); }
.filter__n{ opacity:.65; margin-left:.35rem; font-feature-settings:"tnum"; }

/* the lightbox */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(20,18,14,.95); padding:var(--s-5);
  opacity:0; transition:opacity var(--t-move) var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lb__fig{ margin:0; max-width:min(1100px,92vw); max-height:82vh; display:flex; flex-direction:column; gap:var(--s-4); }
.lb__img{ max-width:100%; max-height:74vh; width:auto; height:auto; object-fit:contain;
  border:var(--keyline-bone); background:var(--ink-900); }
.lb__cap{ display:flex; justify-content:space-between; gap:var(--s-4); color:var(--bone); font-size:var(--fs-small); }
.lb__count{ color:var(--ink-onblack); font-feature-settings:"tnum"; white-space:nowrap; }
.lb__close,.lb__nav{
  position:absolute; display:grid; place-items:center; width:52px; height:52px;
  background:var(--ink-900); border:1px solid rgba(242,239,228,.4); color:var(--bone); cursor:pointer;
  transition:background var(--t-micro) var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:var(--red-600); }
.lb__close{ top:var(--s-5); right:var(--s-5); }
.lb__nav--prev{ left:var(--s-5); top:50%; transform:translateY(-50%) rotate(180deg); }
.lb__nav--next{ right:var(--s-5); top:50%; transform:translateY(-50%); }

/* ==========================================================================
   14  FORMS, THE DATE STRIP, THE FOLD, THE TRAIL, THE LOCATOR
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-900);
}
.field .req{ color:var(--red-700); }
.field__help{ font-size:.8125rem; color:var(--ink-2); }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:.7rem .85rem;
  font-family:inherit; font-size:1rem; color:var(--ink-900);
  background:var(--chalk); border:var(--keyline); border-radius:0;
  transition:box-shadow var(--t-micro) var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field input:hover,.field select:hover,.field textarea:hover{ box-shadow:var(--shadow-1); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:3px solid var(--red-500); outline-offset:1px; }
.field__err{ font-size:.8125rem; font-weight:700; color:#96240F; display:none; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:#96240F; }
.field.is-err .field__err{ display:block; }

.check{ display:flex; gap:.7rem; align-items:center; min-height:44px; font-size:var(--fs-small); cursor:pointer; }
.check input{ width:24px; height:24px; min-height:0; flex:none; accent-color:var(--red-600); cursor:pointer; }

.form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-4); }
.form-grid > .field--full{ grid-column:1/-1; }
.form__ok{
  display:none; gap:.75rem; align-items:flex-start; padding:var(--s-5);
  background:var(--green-100); border:var(--keyline); box-shadow:var(--shadow-1);
}
.form__ok.is-on{ display:flex; }
.form__ok .ico{ color:var(--green-700); margin-top:2px; }

/* the date strip */
.dates{ background:var(--chalk); border:var(--keyline); box-shadow:var(--shadow-2); padding:var(--s-5); }
.dates__head{
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 92,'wght' 800;
  font-size:1.125rem; color:var(--ink-900); margin-bottom:var(--s-4);
}
.dates__form{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); align-items:end; }
@media (min-width:720px){
  .dates__form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto; }
}
.dates__f{ display:flex; flex-direction:column; gap:.3rem; }
.dates__f label{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.dates__f input,.dates__f select{
  min-height:50px; padding:.6rem .75rem; font-family:inherit; font-size:.9375rem;
  background:var(--bone); border:var(--keyline); border-radius:0; color:var(--ink-900);
}
.dates__go{ white-space:nowrap; }
.dates__note{ margin:var(--s-3) 0 0; font-size:.8125rem; color:var(--ink-2); }
.bay--black .dates,.bay--green .dates,.on-black .dates{ box-shadow:var(--shadow-bone); }
.bay--black .dates__note,.bay--green .dates__note{ color:var(--ink-soft); }

/* a plain printed panel — the booking hand-off, the promo slot */
.panel{ background:var(--chalk); border:var(--keyline); box-shadow:var(--shadow-2); padding:var(--s-6); }
.panel--center{ text-align:center; }
.panel__h{ margin-bottom:var(--s-3); }
.panel p{ color:var(--ink-2); }
.bay--black .panel,.bay--green .panel,.on-black .panel{ box-shadow:var(--shadow-bone); }
.bay--black .panel h2,.bay--black .panel h3{ color:var(--ink-900); }

/* the fold */
.fold{ border-top:var(--keyline); }
.fold__i{ border-bottom:1px solid var(--rule); }
.fold__hd{ margin:0; font-family:inherit; }
.fold__btn{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-4);
  width:100%; padding:1.15rem 0; background:none; border:0; cursor:pointer; text-align:left;
}
.fold__n{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-feature-settings:"tnum"; font-size:.6875rem; letter-spacing:.1em; color:var(--red-600);
}
.fold__q{
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 94,'wght' 700;
  font-size:1.0625rem; line-height:1.4; color:var(--ink-900);
}
.fold__sign{ position:relative; flex:none; width:22px; height:22px; }
.fold__sign::before,.fold__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink-900);
  transform:translate(-50%,-50%);
  transition:transform var(--t-move) var(--ease),opacity var(--t-micro) var(--ease);
}
.fold__sign::before{ width:18px; height:2px; }
.fold__sign::after{ width:2px; height:18px; }
.fold__btn[aria-expanded="true"] .fold__sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.fold__btn:hover .fold__q{ color:var(--red-700); }
.fold__panel{ overflow:hidden; }
.fold__inner{ padding:0 0 1.25rem calc(2rem + var(--s-4)); max-width:70ch; color:var(--ink-2); }

/* the trail */
.trail{ background:var(--bone-2); border-bottom:var(--keyline); font-size:var(--fs-small); }
.trail__in{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.trail__list{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.trail__i{ display:flex; align-items:center; gap:.5rem; color:var(--ink-2); }
.trail a{ display:flex; align-items:center; min-height:44px; color:var(--green-700); text-decoration:none; }
.trail a:hover{ color:var(--red-700); text-decoration:underline; }
.trail__sep{ color:var(--rule); }

/* the locator */
.loc{ position:relative; border:var(--keyline); box-shadow:var(--shadow-2); background:var(--green-100); }
.loc__art{ aspect-ratio:5/3; }
.loc__art svg{ width:100%; height:100%; }
.lc-field{ fill:#E4EAD8; }
.lc-road{ stroke:var(--bone); stroke-width:9; fill:none; }
.lc-road--major{ stroke-width:16; }
.lc-green{ fill:#C6DCB4; }
.lc-block{ fill:#DAD3BE; }
.lc-pin rect{ fill:var(--red-600); }
.loc__card{
  position:absolute; left:var(--s-4); bottom:var(--s-4); right:var(--s-4);
  max-width:340px; background:var(--bone); padding:var(--s-4);
  border:var(--keyline); box-shadow:var(--shadow-1);
}
.loc__h{
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 92,'wght' 800;
  font-size:1.0625rem; color:var(--ink-900); margin-bottom:.2rem;
}
.loc__addr{ font-size:var(--fs-small); color:var(--ink-2); margin-bottom:var(--s-3); }
.loc__card .act{ min-height:46px; padding:.5rem 1rem; font-size:.8125rem; }
.bay--black .loc,.bay--green .loc{ box-shadow:var(--shadow-bone); }

/* ==========================================================================
   15  PAGE BLOCKS
   ========================================================================== */

/* ---- THE PYLON — the 1962 sign, rebuilt ------------------------------- */
.pylon{ display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; }
.pylon > span{ display:inline-flex; flex-direction:column; align-items:center; }
.pylon__disc{
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  background:var(--green-500); border:3px solid var(--ink-900);
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 84,'wght' 800;
  /* Black, not white: white on the sign green measures 3.94:1 and the disc
     numerals are 18px, just under the large-text threshold. Black is also
     truer to the object — the real 503 disc is black-outlined signwriting. */
  font-size:1.125rem; color:var(--ink-900); position:relative; z-index:2;
}
.pylon__mast{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.6rem .55rem; margin-top:-6px;
  background:var(--ink-900); border:3px solid var(--ink-900);
}
.pylon__l{
  font-family:var(--font-sign); font-size:1.5rem; line-height:1.06; color:#FF9E86;
  text-shadow:0 0 8px rgba(216,50,31,.9),0 0 22px rgba(216,50,31,.55),0 0 46px rgba(216,50,31,.3);
}
.pylon__script{
  padding:.3rem 1.1rem; background:var(--bone); border:3px solid var(--ink-900); border-top:0;
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 78,'wght' 800;
  font-size:1.0625rem; color:var(--green-700); letter-spacing:-.01em;
}
.pylon__vac{
  margin-top:6px; padding:.45rem 1.2rem;
  background:var(--ink-900); border:3px solid var(--red-500);
  font-family:var(--font-sign); font-size:.8125rem; letter-spacing:.2em; text-indent:.2em;
  color:#FF9E86;
  text-shadow:0 0 8px rgba(216,50,31,.9),0 0 24px rgba(216,50,31,.55);
  animation:neon-on 700ms steps(1,end) 1 both,neon-breathe 4s var(--ease) 700ms infinite;
}
.pylon--link{ transition:transform var(--t-micro) var(--ease); }
.pylon--link:hover{ transform:translateY(-3px); }
.pylon--link:hover .pylon__vac,.pylon--link:hover .pylon__l{
  text-shadow:0 0 10px rgba(216,50,31,1),0 0 32px rgba(216,50,31,.7),0 0 64px rgba(216,50,31,.4);
}
.pylon--sm .pylon__disc{ width:44px; height:44px; font-size:.875rem; border-width:2px; }
.pylon--sm .pylon__mast{ padding:.45rem .45rem; border-width:2px; }
.pylon--sm .pylon__l{ font-size:1.125rem; }
.pylon--sm .pylon__script{ font-size:.8125rem; padding:.25rem .8rem; border-width:2px; }
.pylon--sm .pylon__vac{ font-size:.6875rem; padding:.35rem .9rem; border-width:2px; }
/* The one place the joke is permitted: the 404. */
.pylon--dim .pylon__vac{ color:#C89482; animation:none; text-shadow:none; border-color:#7A5645; }
.pylon--dim .pylon__l{ color:#C89482; text-shadow:none; }

@keyframes neon-on{
  0%,10%{ opacity:0 }   14%{ opacity:1 }   18%{ opacity:.15 }
  26%{ opacity:1 }      32%{ opacity:.35 } 40%{ opacity:1 }
  46%{ opacity:.6 }     100%{ opacity:1 }
}
@keyframes neon-breathe{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.14) } }

/* ---- the awning rule -------------------------------------------------- */
.awn{ line-height:0; }
.awn svg{ width:100%; height:54px; display:block; }
.awn--ink svg{ fill:var(--ink-900); }
.awn--bone svg{ fill:var(--bone); }
.awn--red svg{ fill:var(--red-600); }
.awn--flip{ transform:scaleY(-1); }
@media (min-width:900px){ .awn svg{ height:72px; } }

/* ---- THE FRONTAGE — the home hero ------------------------------------
   Composed, not stretched. The best photograph on this property is 334px
   wide; it is hung at its own size as a plate beside the drawn sign rather
   than blown across a full-bleed band where it would look soft — and on this
   property soft reads as run-down. See claude-data/strategy.md §4. */
.front{ background:var(--ink-900); color:var(--bone); position:relative; overflow:hidden; }
.front__in{
  width:100%; max-width:var(--shell); margin-inline:auto; padding:var(--s-8) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-7);
}
.front__stamp{
  display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-5);
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--green-300);
}
.front__stamp::before{ content:""; width:44px; height:3px; background:var(--red-600); flex:none; }
.front__h{ color:var(--bone); max-width:15ch; }
.front__lede{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-onblack); max-width:46ch; margin:var(--s-5) 0 0; }
.front__acts{ margin-top:var(--s-6); }
.front__sign{ display:flex; align-items:flex-end; gap:var(--s-5); }
.front__plate{ flex:1 1 auto; max-width:340px; }
.front__plate .shot{ border:var(--keyline-bone); }
.front__platecap{ margin:var(--s-3) 0 0; font-size:.8125rem; color:var(--ink-onblack); max-width:34ch; }
.front__pylon{ flex:none; }

@media (min-width:900px){
  .front__in{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--s-8);
    align-items:center; padding-block:var(--s-9);
  }
  .front__sign{ justify-content:flex-end; }
}
@media (max-width:899px){
  .front__pylon{ display:none; }   /* the drawn sign needs room to read as a sign */
}

/* the ticker under the frontage */
.ticker{ border-top:1px solid rgba(242,239,228,.22); background:#0C0B08; }
.ticker__list{
  width:100%; max-width:var(--shell); margin-inline:auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
}
.ticker__i{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem .75rem; text-align:center;
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-onblack);
  border-right:1px solid rgba(242,239,228,.18); border-bottom:1px solid rgba(242,239,228,.18);
}
.ticker__i .ico{ color:var(--red-on-dark); }
@media (min-width:720px){
  .ticker__list{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .ticker__i{ border-bottom:0; }
  .ticker__i:last-child{ border-right:0; }
}

/* ---- THE CROWN — the inner-page opening bay --------------------------- */
.crown{ background:var(--bone-2); padding-block:var(--s-7) var(--s-8); }
.crown .head{ max-width:22ch; margin-bottom:0; }
.crown__meta{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); margin-top:var(--s-5); }
.crown__meta li{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-small); color:var(--ink-2); }
.crown__meta .ico{ color:var(--red-600); }
.crown--black{ background:var(--ink-900); }
.crown--green{ background:var(--green-700); }
.crown--black .crown__meta li,.crown--green .crown__meta li{ color:var(--ink-onblack); }
.crown--black .crown__meta .ico,.crown--green .crown__meta .ico{ color:var(--red-on-dark); }

/* ---- the room hero ---------------------------------------------------- */
.rhero{ display:grid; grid-template-columns:minmax(0,1fr); background:var(--ink-900); }
.rhero__media{ background:var(--green-100); }
.rhero__media .shot,.rhero__media .gap{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.rhero__body{
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-4);
  padding:var(--s-7) var(--gutter); color:var(--bone);
}
.rhero__body h1{ color:var(--bone); }
.rhero__no{ color:var(--red-on-dark); }
.rhero__lede{ font-size:var(--fs-lead); color:var(--ink-onblack); }
@media (min-width:900px){
  .rhero{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:stretch; }
  .rhero__media .shot,.rhero__media .gap{ height:100%; aspect-ratio:auto; min-height:400px; }
}

/* ---- the three-slot room strip ----------------------------------------
   EQUAL THIRDS, deliberately: cleanliness is this property's review
   complaint, so the ensuite slot gets exactly the same real estate as the
   room shot — and where that photograph doesn't exist yet, the empty slot is
   the same size too. An honest gap at full size beats a reassuring photo of
   a different room. */
.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); align-items:start; }

/* ---- the split -------------------------------------------------------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-8); }
  .split--wide{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .split--narrow{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .split--top{ align-items:start; }
}

/* ---- the years (About) ------------------------------------------------ */
.years{ border-left:var(--keyline); padding-left:var(--s-6); display:flex; flex-direction:column; gap:var(--s-6); }
.years__i{ position:relative; }
.years__i::before{
  content:""; position:absolute; left:calc(var(--s-6) * -1 - 9px); top:.4rem;
  width:16px; height:16px; background:var(--red-600); border:var(--keyline);
}
.years__y{
  font-family:var(--font-display); font-variation-settings:'opsz' 48,'wdth' 84,'wght' 800;
  font-feature-settings:"tnum"; font-size:1.75rem; color:var(--ink-900); line-height:1;
  margin-bottom:.4rem;
}
.years__p{ font-size:var(--fs-small); color:var(--ink-2); margin:0; max-width:54ch; }
.bay--black .years,.bay--green .years{ border-left-color:var(--bone); }
.bay--black .years__y,.bay--green .years__y{ color:var(--bone); }
.bay--black .years__i::before,.bay--green .years__i::before{ border-color:var(--bone); }

/* ---- the matrix (room comparison) — cards on mobile, never a scroll --- */
.matrix{ width:100%; border-collapse:collapse; }
.matrix th,.matrix td{ padding:1rem .9rem; text-align:left; border-bottom:1px solid var(--rule); vertical-align:middle; }
.matrix thead th{
  font-family:var(--font-display); font-variation-settings:var(--fv-label);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone);
  background:var(--ink-900); white-space:nowrap; border-bottom:0;
}
.matrix tbody tr{ transition:background var(--t-micro) var(--ease); }
.matrix tbody tr:hover{ background:var(--bone-2); }
.matrix__name{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-display); font-variation-settings:'opsz' 24,'wdth' 90,'wght' 800;
  font-size:1.0625rem; color:var(--ink-900); text-decoration:none;
}
.matrix__name:hover{ color:var(--red-700); }
.matrix__num{ font-feature-settings:"tnum"; font-weight:700; }
.matrix .act{ min-height:46px; padding:.5rem .95rem; font-size:.8125rem; white-space:nowrap; }

/* ---- the court plan --------------------------------------------------- */
.plan{ margin:0; }
.plan__svg{ width:100%; height:auto; background:var(--bone); border:var(--keyline); box-shadow:var(--shadow-1); }
.cp-site{ fill:none; stroke:var(--rule); stroke-width:1.5; stroke-dasharray:6 5; }
.cp-room{ fill:var(--green-100); stroke:var(--ink-900); stroke-width:1.5; }
.cp-door{ fill:var(--red-600); }
.cp-bay{ fill:none; stroke:var(--ink-900); stroke-width:1.5; stroke-dasharray:4 3; }
.cp-awning{ stroke:var(--ink-900); stroke-width:3; }
.cp-drive{ fill:var(--bone-2); stroke:var(--rule); stroke-width:1; }
.cp-service{ fill:var(--red-100); stroke:var(--red-600); stroke-width:1.5; }
.cp-block{ fill:var(--green-700); }
.cp-pylon rect,.cp-pylon circle{ fill:var(--red-600); }
.cp-pool{ fill:#BCD9E4; stroke:var(--ink-900); stroke-width:1.5; }
.cp-lawn{ fill:#CFE0BF; stroke:var(--ink-900); stroke-width:1.5; }
.cp-road{ fill:var(--ink-900); }
.cp-num{ font-family:var(--font-display); font-variation-settings:'wdth' 90,'wght' 800;
  font-size:15px; fill:var(--ink-900); font-feature-settings:"tnum"; }
.cp-lbl{ font-family:var(--font-display); font-variation-settings:'wdth' 96,'wght' 700;
  font-size:11px; letter-spacing:.12em; fill:var(--ink-900); }
.cp-lbl--accent{ fill:var(--red-700); }
.cp-lbl--road,.cp-lbl--rev{ fill:var(--bone); }
.cp-lbl--pool{ fill:var(--ink-900); }
.cp-note{ font-family:var(--font-body); font-size:12px; fill:var(--ink-soft); }
.plan__cap{ margin-top:var(--s-4); font-size:var(--fs-small); color:var(--ink-2); max-width:62ch; }
.bay--black .plan__svg,.bay--green .plan__svg{ box-shadow:var(--shadow-bone); }
.bay--black .plan__cap,.bay--green .plan__cap{ color:var(--ink-onblack); }

/* ---- bed plans -------------------------------------------------------- */
.bedplan{ width:100%; max-width:260px; height:auto; border:var(--keyline); background:var(--bone); }
.bd-room{ fill:var(--bone); }
.bd-wall{ fill:var(--rule); }
.bd-bed{ fill:var(--chalk); stroke:var(--ink-900); stroke-width:1.5; }
.bd-pillow{ fill:var(--green-100); }
.bd-lbl{ font-family:var(--font-body); font-size:7px; fill:var(--ink-soft); }

/* ---- THE SLAB — closes every page ------------------------------------- */
.slab{ background:var(--ink-900); color:var(--bone); border-top:4px solid var(--red-600); }
.slab__in{
  width:100%; max-width:var(--shell); margin-inline:auto; padding:var(--s-8) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-7); align-items:center;
}
.slab__h{ color:var(--bone); max-width:16ch; }
.slab__line{ color:var(--ink-onblack); max-width:52ch; margin:var(--s-4) 0 0; }
.slab__tel{
  display:inline-flex; align-items:center; min-height:52px; margin-block:var(--s-5);
  font-family:var(--font-display); font-variation-settings:'opsz' 96,'wdth' 88,'wght' 800;
  font-size:clamp(2rem,5vw,3.5rem); line-height:1.1; letter-spacing:-.025em;
  color:var(--bone); text-decoration:none; border-bottom:4px solid var(--red-600);
}
.slab__tel:hover{ color:var(--red-on-dark); }
.slab__sign{ display:none; }
@media (min-width:900px){
  .slab__in{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-8); }
  .slab__sign{ display:flex; justify-content:flex-end; }
}

/* ---- the oversized tap-to-call on Book and Contact -------------------- */
.bigcall{
  display:inline-flex; align-items:center; min-height:52px;
  font-family:var(--font-display); font-variation-settings:'opsz' 96,'wdth' 92,'wght' 800;
  font-size:clamp(1.75rem,4vw,2.75rem); line-height:1.15; letter-spacing:-.02em;
  color:var(--ink-900); text-decoration:none; border-bottom:4px solid var(--red-600);
}
.bigcall:hover{ color:var(--red-700); }
.bay--black .bigcall,.bay--green .bigcall,.on-black .bigcall{ color:var(--bone); }
.bigmail{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; word-break:break-word; }

/* ---- 404 -------------------------------------------------------------- */
.nf{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-5); }

/* ==========================================================================
   MOTION, RESPONSIVE, PRINT
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(16px); }
.js [data-reveal]{ transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }

@media (max-width:1199px){
  .base__in{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
  .base__col--go{ grid-column:span 3; }
}

@media (max-width:1079px){
  .awning__tel{ display:none; }
  .prime__a{ padding-inline:.6rem; font-size:.75rem; }
}

@media (max-width:899px){
  .prime,.awning__book{ display:none; }
  .latch{ display:flex; }
  .brand{ margin-right:auto; }
  .trio{ grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
  .base__signin{ padding-block:var(--s-6); }
}

@media (max-width:719px){
  .form-grid{ grid-template-columns:minmax(0,1fr); }
  .base__in{ grid-template-columns:minmax(0,1fr); gap:var(--s-6); }
  .base__col--go{ grid-column:auto; }
  /* the matrix becomes labelled cards rather than a horizontal scroll */
  .matrix,.matrix tbody,.matrix tr,.matrix td{ display:block; width:100%; }
  .matrix thead{ display:none; }
  .matrix tr{ border:var(--keyline); box-shadow:var(--shadow-1); margin-bottom:var(--s-5); background:var(--bone); }
  .matrix td{ border-bottom:1px solid var(--rule); padding:.7rem var(--s-4); }
  .matrix td:last-child{ border-bottom:0; }
  .matrix td[data-k]::before{
    content:attr(data-k); display:block;
    font-family:var(--font-display); font-variation-settings:var(--fv-label);
    font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
    margin-bottom:.15rem;
  }
  .straight{ flex-direction:column; }
  .straight__rail{ width:100%; min-height:34px; }
  .straight__rail > span{ writing-mode:horizontal-tb; transform:none; }
  .straight__b{ padding:var(--s-5); }
}

@media (max-width:479px){
  .sheet{ grid-template-columns:minmax(0,1fr); }
  .sheet__i--wide{ grid-column:auto; }
  .door__hit{ grid-template-columns:58px minmax(0,1fr); }
  .door__no{ font-size:1.5rem; }
  .peg{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
  .fold__inner{ padding-left:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  /* the neon renders steady-lit immediately — no flicker, no breathing */
  .pylon__vac,.kerb__lamp{ animation:none!important; opacity:1!important; }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .sheet__hit:hover .shot{ transform:none; }
}

@media print{
  .kerb,.awning,.thumb,.hangar,.scrim,.lightbox,.slab,.act,.filters,.skip{ display:none!important; }
  body{ padding:0; background:#fff; color:#000; }
  .bay{ padding-block:1rem; border-top:1px solid #000; break-inside:avoid; }
  .bay__margin{ display:none; }
  .base,.base__legal,.base__sign{ background:#fff; color:#000; border-top:1px solid #000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; word-break:break-all; }
}