/* The Brooklyn Riviera — brand stylesheet
   Tokens taken verbatim from brand-kit/color-palette.md and brand-kit/typography.md.
   Two rules are load-bearing and must not be relaxed:
     1. never white text on --awning-coral (3.00:1, fails) — use --terracotta-deep
     2. --sea-glass is never text on a light ground — tint only                     */

:root{
  --riviera-blue:#0B4F6C;
  --deep-harbor:#093F58;
  --brownstone-clay:#8C4A32;
  --awning-coral:#E8743B;
  --terracotta-deep:#B8481A;
  --sea-glass:#7FB2B8;
  --stoop-cream:#FAF3E8;
  --limestone:#D9CFC1;
  --slate:#4A5560;
  --ink:#14181C;
  --success:#2F7D5C;
  --alert:#B23A2E;
  --paper:#FFFDF9;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --shell:1140px;
  --measure:68ch;
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--stoop-cream); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{max-width:100%}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; color:var(--riviera-blue)}
p,ul,ol{margin:0}
a{color:var(--terracotta-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--terracotta-deep); outline-offset:3px}

.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:var(--body); font-weight:600; font-size:13px; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brownstone-clay);
}
.on-dark .eyebrow, .dark .eyebrow{color:var(--sea-glass)}
.lede{font-size:19px; line-height:1.65; color:var(--slate); max-width:var(--measure)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:var(--paper); padding:12px 18px; border-radius:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:600; font-size:16px;
  letter-spacing:.03em; line-height:1; text-decoration:none;
  background:var(--terracotta-deep); color:#fff;
  padding:17px 28px; border-radius:10px; border:0; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:#9E3E15}
.btn.ghost{background:transparent; color:var(--riviera-blue); border:1px solid var(--limestone)}
.btn.ghost:hover{background:var(--paper); border-color:var(--riviera-blue)}
.on-dark .btn.ghost{color:var(--stoop-cream); border-color:rgba(127,178,184,.55)}
.on-dark .btn.ghost:hover{background:rgba(127,178,184,.14)}

/* ---------- header ---------- */
.site-head{background:var(--riviera-blue); color:var(--stoop-cream)}
.site-head .shell{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px}
.site-head a{color:var(--stoop-cream)}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
.brand svg{height:52px; width:auto; display:block}
nav.main{margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px}
nav.main a{
  text-decoration:none; font-size:15.5px; font-weight:500; padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--sea-glass)}
nav.main a[aria-current="page"]{border-bottom-color:var(--awning-coral)}
nav.main .btn{color:#fff; padding:12px 20px; font-size:15px}
nav.main .btn:hover{border-bottom-color:transparent}

/* ---------- hero ---------- */
.hero{background:var(--deep-harbor); color:var(--stoop-cream); padding:78px 0 84px}
.hero h1{
  color:var(--stoop-cream); font-weight:700; letter-spacing:-.01em; line-height:1.05;
  font-size:clamp(40px,6.2vw,64px); margin:16px 0 20px;
}
.hero p{max-width:var(--measure); font-size:19px; color:#DCE8EC}
.hero .btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero.compact{padding:56px 0 60px}
.hero.compact h1{font-size:clamp(34px,5vw,48px)}

/* ---------- sections ---------- */
section{padding:72px 0}
section.tight{padding:52px 0}
.section-head{max-width:var(--measure); margin-bottom:38px}
.section-head h2{font-size:clamp(28px,4vw,34px); font-weight:600; line-height:1.2; margin:12px 0 14px}
.section-head p{color:var(--slate)}
.band-dark{background:var(--riviera-blue); color:var(--stoop-cream)}
.band-dark h2,.band-dark h3{color:var(--stoop-cream)}
.band-dark p{color:#DCE8EC}
.band-paper{background:var(--paper)}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.card{
  background:var(--paper); border:1px solid var(--limestone); border-radius:var(--r);
  padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px;
}
.card h3{font-size:24px; font-weight:600; line-height:1.25}
.card p{color:var(--slate); font-size:16px}
.card .price{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:1.1;
  letter-spacing:-.01em; color:var(--brownstone-clay); margin-top:auto; padding-top:12px;
}
.card .price small{font-family:var(--body); font-size:14px; font-weight:500; color:var(--slate); letter-spacing:0}
/* Weekend rate stays clearly secondary — the weeknight price is the headline. */
.card .price .wknd{
  display:block; font-family:var(--body); font-size:14px; font-weight:500;
  color:var(--slate); letter-spacing:0; margin-top:5px;
}

/* ---------- placeholders (must be unmissable) ---------- */
.ph{
  display:inline-block; background:#FFE9D8; color:var(--terracotta-deep);
  border:1px dashed var(--terracotta-deep); border-radius:6px;
  padding:1px 8px; font-family:var(--body); font-size:.82em; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:normal;
}
.photo-slot{
  display:grid; place-items:center; text-align:center; gap:6px;
  background:repeating-linear-gradient(45deg,#F3E7D6,#F3E7D6 12px,#EFE0CC 12px,#EFE0CC 24px);
  border:2px dashed var(--brownstone-clay); border-radius:var(--r);
  color:var(--brownstone-clay); padding:26px 20px; min-height:190px;
}
.photo-slot b{font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.photo-slot span{font-size:14px; color:var(--slate); max-width:34ch; line-height:1.5}

/* ---------- stats ---------- */
.stats{display:grid; gap:1px; background:var(--limestone); border:1px solid var(--limestone); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.stat{background:var(--paper); padding:24px 22px; display:flex; flex-direction:column; gap:4px}
.band-dark .stats{background:rgba(127,178,184,.3); border-color:rgba(127,178,184,.3)}
.band-dark .stat{background:var(--riviera-blue)}
.stat b{font-family:var(--display); font-weight:700; font-size:42px; line-height:1; letter-spacing:-.01em;
  color:var(--riviera-blue); font-variant-numeric:tabular-nums}
.band-dark .stat b{color:var(--stoop-cream)}
.stat span{font-size:14px; color:var(--slate); letter-spacing:.02em}
.band-dark .stat span{color:#B9D2D8}

/* ---------- quotes ---------- */
.quotes{columns:3 300px; column-gap:22px}
.quote{
  break-inside:avoid; margin:0 0 22px; background:var(--paper);
  border:1px solid var(--limestone); border-left:4px solid var(--awning-coral);
  border-radius:0 var(--r) var(--r) 0; padding:24px 26px;
}
.quote p{font-family:var(--display); font-size:19px; line-height:1.45; font-weight:400; color:var(--ink)}
.quote footer{
  margin-top:14px; font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brownstone-clay);
}
.quote footer .score{color:var(--success)}

/* ---------- lists ---------- */
.ticks{list-style:none; padding:0; display:grid; gap:11px}
.ticks li{position:relative; padding-left:30px; color:var(--slate)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:15px; height:9px;
  border-left:2.5px solid var(--success); border-bottom:2.5px solid var(--success);
  transform:rotate(-45deg);
}
.band-dark .ticks li{color:#DCE8EC}
.band-dark .ticks li::before{border-color:var(--sea-glass)}
.rules{list-style:none; counter-reset:r; padding:0; display:grid; gap:0;
  border:1px solid var(--limestone); border-radius:var(--r); overflow:hidden; background:var(--paper)}
.rules li{counter-increment:r; display:grid; grid-template-columns:56px 1fr; gap:0; border-top:1px solid var(--limestone)}
.rules li:first-child{border-top:0}
.rules li::before{
  content:counter(r); font-family:var(--display); font-weight:700; font-size:19px;
  color:var(--awning-coral); background:var(--stoop-cream); display:grid; place-items:center;
  border-right:1px solid var(--limestone);
}
.rules b{display:block; font-family:var(--body); font-weight:600; color:var(--riviera-blue); font-size:17px}
.rules div{padding:17px 22px}
.rules span{display:block; color:var(--slate); font-size:15.5px; margin-top:3px; line-height:1.55}

/* ---------- split ---------- */
.split{display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); align-items:center}
.map-frame{border:1px solid var(--limestone); border-radius:var(--r); overflow:hidden; background:var(--paper); line-height:0}
.map-frame iframe{width:100%; height:390px; border:0; display:block}

/* honest note — the brand's "say what it is" trait, made visible */
.honest{
  border-left:4px solid var(--sea-glass); background:var(--paper);
  padding:24px 28px; border-radius:0 var(--r) var(--r) 0; max-width:var(--measure);
}
.honest h3{font-family:var(--body); font-size:16px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--riviera-blue); margin-bottom:9px}
.honest p{color:var(--slate)}
.honest p+p{margin-top:10px}

/* ---------- footer ---------- */
.site-foot{background:var(--deep-harbor); color:#DCE8EC; padding:56px 0 40px; font-size:15.5px}
.site-foot h4{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sea-glass); margin-bottom:14px}
.site-foot a{color:var(--stoop-cream)}
.site-foot .cols{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.site-foot ul{list-style:none; padding:0; display:grid; gap:8px}
.site-foot .fine{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(127,178,184,.3);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; font-size:13.5px; color:#93B6C0;
}
.site-foot .brandmark svg{height:66px; width:auto}

@media (max-width:860px){
  nav.main{margin-left:0; width:100%; gap:4px 16px}
  .quotes{columns:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ── WordPress block-theme integration ──────────────────────────────────────
   Twenty Twenty-Five constrains .wp-site-blocks children to
   --wp--style--global--content-size (645px). Our markup is full-bleed and
   manages its own .shell width, so opt OUR OWN elements out of that cap.
   Deliberately scoped: WooCommerce cart/checkout must keep the theme's
   constrained layout, so no bare `section` or `.wp-block-post-content` here. */
.wp-site-blocks .site-head,
.wp-site-blocks .site-foot,
.wp-site-blocks main#main,
.wp-site-blocks main#main > section,
.wp-site-blocks > .cs,
.wp-site-blocks .cs,
.wp-site-blocks .cs-foot{
  max-width:none;
  margin-left:0;
  margin-right:0;
  width:100%;
}
/* Only break the content wrapper out on pages that carry our chrome. */
.wp-site-blocks:has(> .wp-block-post-content .site-head) .wp-block-post-content,
.wp-block-post-content:has(.site-head){
  max-width:none;
  width:100%;
  margin-inline:0;
}
/* WooCommerce and the parent theme register their own faces; make ours win
   for the two families the brand specifies. Fonts only - no layout, no color. */
.wp-site-blocks h1,.wp-site-blocks h2,.wp-site-blocks h3,.wp-site-blocks h4{font-family:var(--display)}
.wp-site-blocks,.wp-site-blocks p,.wp-site-blocks li,.wp-site-blocks a{font-family:var(--body)}


/* ── holding page ─────────────────────────────────────── */
body{display:flex;flex-direction:column;min-height:100vh}
.cs{flex:1;display:flex;align-items:center;padding:64px 0}
.cs-dark{background:var(--deep-harbor);color:var(--stoop-cream)}
.cs-dark h1{color:var(--stoop-cream)}
.cs h1{font-weight:700;letter-spacing:-.01em;line-height:1.05;font-size:clamp(40px,7vw,64px);margin:18px 0 20px}
.cs p.sub{font-size:19px;max-width:52ch;line-height:1.6}
.cs-dark p.sub{color:#DCE8EC}
.cs-mark{width:min(460px,86%);height:auto;display:block;margin-bottom:10px}
.signup{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.signup input{
  font:inherit;font-size:16px;padding:16px 18px;border-radius:10px;min-width:min(300px,100%);
  border:1px solid var(--limestone);background:var(--paper);color:var(--ink);flex:1;
}
.cs-dark .signup input{background:rgba(250,243,232,.07);border-color:rgba(127,178,184,.45);color:var(--stoop-cream)}
.cs-dark .signup input::placeholder{color:#8FB3BC}
.facts{display:flex;flex-wrap:wrap;gap:14px 46px;margin-top:44px;padding-top:26px;
  border-top:1px solid var(--limestone)}
.cs-dark .facts{border-top-color:rgba(127,178,184,.35)}
.facts div b{display:block;font-family:var(--display);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts div span{font-size:14px;color:var(--slate)}
.cs-dark .facts div span{color:#B9D2D8}
.cs-foot{padding:22px 0 30px;font-size:14px;color:var(--slate)}
.cs-dark~.cs-foot{color:var(--slate)}
.awn{display:flex;height:22px}
.awn i{flex:1}
.pcard{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:center}
.pquote{background:var(--deep-harbor);color:var(--stoop-cream);border-radius:var(--r);padding:40px}
.pquote p{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);line-height:1.35;font-weight:600}
.pquote footer{margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sea-glass)}