/* Visit Hawaii — G "Sunlit Classic" (F "Modern Classic" structure).
   Treatment system: Sunlit (default) + Daytime, toggled on <html data-treatment>,
   persisted in localStorage (key: visithawaii.treatment), applied before first paint.
   Dark-scheme rules are scoped to :root:not([data-treatment="daytime"]) so the
   Daytime treatment can never be overridden by the OS colour scheme. */
:root{
  --ground:#FBF3E4; --ground-soft:#F7EAD3; --card:#FFFDF7;
  --ink:#2E2118; --ink-soft:#6E5638; --muted:#8A6F52;
  --line:#DEC9A6; --chip-bg:#FDEBD3;
  --accent:#0B6FB8; --accent-ink:#FFFFFF;
  --sunset:#E8933B; --apricot:#F2A65A; --coral:#EE7B52;
  --vivid1:#44A1FE; --vivid2:#369FE3; --vivid3:#2FB9C6;
  --turq:#0E7C86;
  --radius:3px;
  --font-d:"Cormorant Garamond",Georgia,serif;
  --font-b:"Manrope",system-ui,-apple-system,sans-serif;
  --shadow:0 14px 34px rgba(46,33,24,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-treatment="daytime"]){
    --ground:#1E1307; --ground-soft:#261A0C; --card:#2E2010;
    --ink:#F6EBD6; --ink-soft:#D8C29E; --muted:#AE9673;
    --line:#4C3A22; --chip-bg:#4A3410;
    --accent:#63B6F2; --accent-ink:#12233A;
    --turq:#4FD1DC;
    --shadow:0 14px 34px rgba(0,0,0,.45);
  }
}
:root[data-treatment="daytime"]{
  --ground:#FDFBF6; --ground-soft:#F6F0E1; --card:#FFFDF9;
  --ink:#2E2118; --ink-soft:#6E5638; --muted:#8A6F52;
  --line:#E7DCC2; --chip-bg:#FAEED6;
  --accent:#0B6FB8; --accent-ink:#FFFFFF;
  --turq:#0E7C86;
  --shadow:0 14px 34px rgba(46,33,24,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-b);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-d);font-weight:600;line-height:1.12;margin:0}
a{color:var(--accent)}
img{filter:saturate(1.22) contrast(1.08) brightness(1.05)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.kicker{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;gap:22px;padding:14px 0}
.wordmark{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark small{display:block;font-size:9px;letter-spacing:.3em;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:600;padding:6px 9px;border-radius:var(--radius)}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.treatments{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.treatments button{font:inherit;font-size:12px;font-weight:700;padding:6px 12px;background:transparent;color:var(--ink-soft);border:0;cursor:pointer}
.treatments button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.search-link{font-size:13.5px;font-weight:700;text-decoration:none}

/* ---------- hero (treatment-invariant, photo-led) ---------- */
.hero{position:relative;color:#FFF6E8;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,19,7,.18),rgba(30,19,7,.42) 78%)}
.hero-in{position:relative;padding:96px 0 84px;max-width:760px}
.hero .kicker{color:#FBD9A8}
.hero h1{font-size:clamp(44px,6.4vw,72px);margin:14px 0 12px}
.hero p{font-size:19px;max-width:560px;margin:0 0 26px;color:#FBEEDB}
.btn{display:inline-block;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-b)}
.btn-primary{background:linear-gradient(90deg,var(--vivid1),var(--vivid2) 55%,var(--vivid3));color:#fff}
.btn-ghost{background:rgba(255,246,232,.12);color:#FFF6E8;border-color:rgba(255,246,232,.55)}
.btn-plain{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}

/* ---------- sections & cards ---------- */
.section{padding:64px 0}
.section.alt{background:var(--ground-soft)}
.section h2{font-size:clamp(30px,4vw,42px);margin:10px 0 12px}
.lede{font-size:17.5px;color:var(--ink-soft);max-width:680px;margin:0 0 30px}
.grid{display:grid;gap:18px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:23px;margin:6px 0 8px}
.card p{margin:0;color:var(--ink-soft);font-size:15px}
.card .count{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--turq)}
.chapter-card{text-decoration:none;display:block}
.chapter-card:hover{border-color:var(--accent)}
.chip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:var(--radius);border:1px solid}
.chip.idea{background:#FDEBD3;border-color:#EFD3A1;color:#9A5A14}
.chip.held{background:#F1E3C8;border-color:#DEC9A6;color:#7C5A2E}
.chip.booked{background:#EAF3DC;border-color:#C4DCA6;color:#42631A}
@media (prefers-color-scheme: dark){
  :root:not([data-treatment="daytime"]) .chip.idea{background:#4A3410;border-color:#6B4D1B;color:#F4C87E}
  :root:not([data-treatment="daytime"]) .chip.held{background:#463619;border-color:#5E4A24;color:#E7CF9C}
  :root:not([data-treatment="daytime"]) .chip.booked{background:#2F451C;border-color:#47632B;color:#BCD98F}
}
.tier-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--turq)}
.status-flag{font-size:12px;font-weight:700;color:var(--coral)}
.note-band{background:var(--chip-bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:0 0 14px}
.note-band h3{font-size:20px;margin:0 0 4px}
.note-band p{margin:0;color:var(--ink-soft);font-size:15px}

/* ---------- listing rows ---------- */
.listing{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 12px;box-shadow:var(--shadow)}
.listing-main{flex:1;min-width:0}
.listing h3{font-size:22px;margin:2px 0 4px}
.listing h3 a{color:var(--ink);text-decoration:none}
.listing h3 a:hover{color:var(--accent)}
.listing .meta{font-size:13.5px;color:var(--muted);margin:0 0 6px}
.listing .desc{font-size:14.5px;color:var(--ink-soft);margin:0}
.listing .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mini-btn{font:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--ground-soft);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.mini-btn:hover{border-color:var(--accent);color:var(--accent)}
.mini-btn.added{background:var(--turq);border-color:var(--turq);color:#fff}
.group-h{font-family:var(--font-d);font-size:27px;margin:34px 0 14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.filters button{font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- place detail ---------- */
.place-head{padding:56px 0 10px}
.place-head h1{font-size:clamp(36px,5vw,54px);margin:8px 0}
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;margin:26px 0 64px}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr}}
.facts{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.facts dl{margin:0}
.facts dt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 3px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:0;font-size:15px;color:var(--ink)}
.facts .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}

/* ---------- folio modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(30,19,7,.55);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:520px;width:100%;padding:26px 28px}
.modal h3{font-size:26px;margin:0 0 6px}
.modal p{color:var(--ink-soft);font-size:14.5px}
.modal label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.modal input,.modal select{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);color:var(--ink)}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .state-pick{display:flex;gap:8px}
.modal .state-pick button{flex:1;font:inherit;font-size:13px;font-weight:700;padding:9px 4px;border-radius:var(--radius);border:1px solid var(--line);background:var(--ground-soft);color:var(--ink-soft);cursor:pointer}
.modal .state-pick button[aria-pressed="true"]{outline:2px solid var(--accent);color:var(--ink)}
.modal .foot{display:flex;gap:10px;margin-top:22px;justify-content:flex-end}
.modal .msg{font-size:14px;margin-top:12px}
.modal .msg.err{color:var(--coral)}
.modal .msg.ok{color:var(--turq)}
.modal .devlink{word-break:break-all;font-size:13px;background:var(--ground-soft);padding:10px;border-radius:var(--radius)}

/* ---------- search / plan ---------- */
.search-box{width:100%;font:inherit;font-size:19px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
table.facts-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.facts-table th,table.facts-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
table.facts-table th{width:32%;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:15.5px}
.checklist li::before{content:"";position:absolute;left:2px;top:14px;width:15px;height:15px;border:1.5px solid var(--muted);border-radius:2px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ground-soft);padding:44px 0 54px;margin-top:20px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media (max-width:900px){footer .cols{grid-template-columns:1fr}}
footer h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-family:var(--font-b)}
footer a{color:var(--ink-soft);text-decoration:none;font-size:14px;display:block;padding:3px 0}
footer p{color:var(--muted);font-size:13.5px;max-width:420px}
.gate-note{border:1px dashed var(--line);border-radius:var(--radius);padding:22px;background:var(--ground-soft)}