/* Hardwater Booking — ice-blue ground, ink type, blaze orange for anything you can act on. */
:root {
  --bg: #EEF3F5;
  --surface: #FFFFFF;
  --ink: #13233A;
  --muted: #4F6075;
  --line: #D3DEE4;
  --ice: #D6E7EE;
  --deep: #13233A;
  --on-deep: #EEF3F5;
  --on-deep-muted: #A9C0D0;
  --blaze: #C95A1C;
  --blaze-ink: #FFFFFF;
  --blaze-text: #A84A14;
  --good: #2E7D5B;
  --warn: #9A6210;
  --bad: #B23A3A;
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Public Sans', Arial, sans-serif;
  --font-data: 'IBM Plex Mono', 'Courier New', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1724; --surface: #15233A; --ink: #E6EEF2; --muted: #A3B5C6; --line: #26384F; --ice: #1E3550;
    --deep: #081019; --on-deep: #E6EEF2; --on-deep-muted: #9DB0C2; --blaze: #E8803F; --blaze-ink: #1A0E05; --blaze-text: #F09A5E;
    --good: #5CC195; --warn: #E0A54A; --bad: #EE7B7B; color-scheme: dark;
  }
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55 }
img { max-width: 100% }
a { color: var(--blaze-text) }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: .3px }
p { margin: 0 }
:focus-visible { outline: 3px solid var(--blaze); outline-offset: 2px }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.label { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted) }
.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums }
.muted { color: var(--muted) }
.small { font-size: 14px }
.skip { position: absolute; left: -9999px } .skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 50 }

/* header */
.bar { background: var(--deep); color: var(--on-deep) }
.bar .wrap { display: flex; align-items: center; gap: 16px; padding-block: 14px; flex-wrap: wrap }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 2px; text-transform: uppercase; color: var(--on-deep); text-decoration: none; display: flex; align-items: center; gap: 10px }
.brand span { color: var(--blaze) }
.brand svg { width: 28px; height: 28px }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap }
.nav a { color: var(--on-deep); text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 15px; opacity: .85 }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.1) }
.nav a.cta { background: var(--blaze); color: var(--blaze-ink); opacity: 1 }

main { padding-block: 40px 72px; display: flex; flex-direction: column; gap: 48px }

/* buttons & forms */
.btn { display: inline-block; background: var(--blaze); color: var(--blaze-ink); border: 0; border-radius: 8px; padding: 12px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn.light { background: var(--on-deep); color: var(--deep) }
form.card { display: flex; flex-direction: column; gap: 16px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field label { font-size: 14px; font-weight: 600 }
.field .hint { font-size: 13px; color: var(--muted) }
input, select, textarea { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100% }
textarea { min-height: 96px; resize: vertical }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px } .check input { width: auto; margin-top: 4px }
.hp { position: absolute; left: -9999px }

/* hero */
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center }
.hero h1 { font-size: clamp(44px, 7vw, 80px); text-transform: uppercase; letter-spacing: 1px }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 52ch; margin-top: 16px }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px }
.signal { background: var(--deep); color: var(--on-deep); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px }
.signal .label { color: var(--on-deep-muted) }
.signal ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px }
.signal li { display: grid; grid-template-columns: 30px 1fr; gap: 10px }
.signal li b.n { font-family: var(--font-display); color: var(--blaze); font-size: 22px; line-height: 1.2 }

/* sections */
.sect { display: flex; flex-direction: column; gap: 20px }
.sect-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.sect-head h2 { font-size: clamp(28px, 4vw, 38px) }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; min-width: 0 }
.lake { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none }
.lake:hover { border-color: var(--blaze) }
.lake h3 { font-size: 28px }
.lake .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--ice); color: var(--ink) }
.pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted) }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.three h3 { font-size: 24px; margin-bottom: 8px }
.band { background: var(--deep); color: var(--on-deep); border-radius: 14px; padding: 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center }
.band h2 { font-size: clamp(28px, 4vw, 40px); text-transform: uppercase }
.band p { color: var(--on-deep-muted); margin-top: 10px }
.band .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px }
details summary { font-weight: 700; cursor: pointer }
details p { margin-top: 10px; color: var(--muted) }
.faq { display: flex; flex-direction: column; gap: 10px }

/* lake page */
.crumbs { font-size: 14px; color: var(--muted) } .crumbs a { color: var(--muted) }
.lakehead h1 { font-size: clamp(40px, 6vw, 64px); text-transform: uppercase }
.lakehead .meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap }
.cols { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.panel h2 { font-size: 24px; margin-bottom: 4px }
.report { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line) }
.report .in { font-family: var(--font-data); font-size: 22px; font-weight: 600 }
.report p { font-size: 15px } .report .who { color: var(--muted); font-size: 13px }
.guide { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin-top: 10px }
.guide .mono { font-weight: 600 }
.disclaim { font-size: 13px; color: var(--muted); border-left: 3px solid var(--warn); padding-left: 10px }
.listing { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center }
.listing h3 { font-size: 22px }
.feat { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.feat span { font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; color: var(--muted) }
.price { display: flex; flex-direction: column; gap: 8px; align-items: flex-end }
.price .amt { font-family: var(--font-data); font-size: 24px; font-weight: 600 }
.empty { border: 1px dashed var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; background: var(--surface) }
.empty h3 { font-size: 22px }
.tags { display: flex; gap: 6px; flex-wrap: wrap }

/* form pages */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start }
.split h1 { font-size: clamp(38px, 5.5vw, 60px); text-transform: uppercase }
.split .lead { font-size: 18px; color: var(--muted); max-width: 50ch; margin-top: 14px }
.points { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px }
.points li { padding-left: 20px; position: relative }
.points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--blaze); border-radius: 2px }
.math { display: flex; flex-direction: column; gap: 8px; margin-top: 20px }
.math div { display: flex; justify-content: space-between }
.math .total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700 }
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 14px }
.prose h1 { font-size: clamp(36px, 5vw, 56px); text-transform: uppercase }
.prose h2 { font-size: 26px; margin-top: 12px }
.prose table { border-collapse: collapse; width: 100% }
.prose td, .prose th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.table-wrap { overflow-x: auto }

footer { background: var(--deep); color: var(--on-deep-muted); font-size: 14px }
footer .wrap { padding-block: 32px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap }
footer a { color: var(--on-deep) }
footer nav { display: flex; gap: 16px; flex-wrap: wrap }
footer .us-flag { width: 24px; height: auto; aspect-ratio: 19 / 10; vertical-align: -1px; margin-right: 8px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.18) }
@media (max-width: 600px) { footer .us-flag { width: 22px } }

@media (max-width: 860px) {
  .hero, .cols, .split, .band, .three { grid-template-columns: 1fr }
  .band .actions { justify-content: flex-start }
  .listing { grid-template-columns: 1fr } .price { align-items: flex-start }
}
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* form errors, toasts, summaries */
.form-error { color: var(--bad); font-size: 14px; font-weight: 600; min-height: 1em }
.form-error:empty { display: none }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.sum { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px }
.sum div { display: flex; justify-content: space-between; gap: 12px }
.sum .total { font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 8px; font-weight: 600; z-index: 30; max-width: calc(100% - 32px) }
.toast.err { background: var(--bad); color: #fff }
.btn:disabled { opacity: .6; cursor: wait }

/* admin */
.admin { display: flex; flex-direction: column; gap: 20px }
.admin-login { max-width: 420px; margin: 40px auto; width: 100% }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap }
#panel { display: flex; flex-direction: column; gap: 20px }
#panel[hidden] { display: none }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 4px; color: var(--ink); font: inherit; cursor: pointer }
.tile .mono { font-size: 32px; font-weight: 600 }
.tile.hot { border-color: var(--blaze) } .tile.hot .mono { color: var(--blaze-text) }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line) }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blaze) }
.tabs .count { background: var(--blaze); color: var(--blaze-ink); border-radius: 999px; padding: 0 7px; font-size: 12px }
.hint { color: var(--muted); font-size: 14px; max-width: 80ch; margin-bottom: 12px }
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start }
.admin-form { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px }
.admin-form h2 { font-size: 22px }
.admin-table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 14px; border: 1px solid var(--line); border-radius: 10px }
.admin-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 10px; border-bottom: 1px solid var(--line) }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top }
.admin-table td.notes { max-width: 260px }
.admin-table select { font-size: 14px; padding: 6px 8px; min-width: 120px }
.nowrap { white-space: nowrap } .big { font-size: 18px }
.sel { user-select: all }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ice); color: var(--ink) }
.badge.good { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good) }
.badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn) }
.badge.bad { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad) }
.mini { display: inline-block; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; margin: 2px 0 }
.mini.good { border-color: var(--good); color: var(--good) }
.mini.danger { color: var(--bad) }
.mini.armed { background: var(--bad); color: #fff; border-color: var(--bad) }
.mini.good.armed { background: var(--good); border-color: var(--good) }
.link-out:empty { display: none }
.link-out { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 360px }
.link-out input, .cal-box input { font-size: 12px; padding: 6px 8px }
.cal-box { display: flex; flex-direction: column; gap: 10px }
.empty-note { color: var(--muted); padding: 24px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface) }
@media (max-width: 960px) { .admin-split { grid-template-columns: 1fr } .admin-form { position: static } .tiles { grid-template-columns: repeat(2, 1fr) } }
.photos-admin { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px }
.photos-admin h3 { font-size: 20px }
.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.thumbs figure { margin: 0; display: flex; flex-direction: column; gap: 6px }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ice) }
.upload { cursor: pointer }

/* search bar */
.hero-search { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px }
.searchbar { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr .7fr .7fr auto; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 6px 24px rgba(19,35,58,.08); align-items: stretch }
.sb-field { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-right: 1px solid var(--line); min-width: 0 }
.sb-field:nth-last-child(2) { border-right: 0 }
.sb-field label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted) }
.sb-field select, .sb-field input { border: 0; padding: 2px 0; background: transparent; font-weight: 600 }
.searchbar .btn { border-radius: 10px; padding-inline: 28px }
.pagetitle { font-size: clamp(34px, 5vw, 52px); text-transform: uppercase }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }

/* result cards */
.stays-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 18px }
.staycard { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none }
.staycard.dim { opacity: .55 }
.sc-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ice) }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s }
.staycard:hover .sc-photo img { transform: scale(1.03) }
.sc-tag { position: absolute; left: 10px; top: 10px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px }
.sc-body { display: flex; flex-direction: column; gap: 2px }
.sc-row { display: flex; justify-content: space-between; gap: 8px; align-items: center }
.sc-title { font-weight: 600 }
.nophoto { display: block; width: 100%; height: 100%; min-height: 120px; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 38 32 22l20 16v14H12z' fill='none' stroke='%237E99AE' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='27' y='40' width='10' height='12' fill='%237E99AE'/%3E%3Cpath d='M6 56h52' stroke='%237E99AE' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 72px no-repeat,
  linear-gradient(160deg, var(--ice), var(--bg)) }
.listing { grid-template-columns: 160px 1fr auto }
.listing .thumb { display: block; width: 160px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--ice) }
.listing .thumb img { width: 100%; height: 100%; object-fit: cover }
a.plain { color: inherit; text-decoration: none } a.plain:hover { text-decoration: underline }

/* listing page */
.stay { display: flex; flex-direction: column; gap: 20px }
.stay-head h1 { font-size: clamp(32px, 4.5vw, 48px) }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 8px; border-radius: 14px; overflow: hidden; position: relative }
.gallery.single { grid-template-columns: 1fr; grid-template-rows: 380px }
.gallery button { border: 0; padding: 0; cursor: zoom-in; background: var(--ice) }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block }
.g-main { grid-row: 1 / 3 }
.gallery.single .g-main { grid-row: auto }
.g-more { position: absolute; right: 12px; bottom: 12px; background: var(--surface) !important; color: var(--ink); border: 1px solid var(--line) !important; border-radius: 8px; padding: 8px 12px !important; font: inherit; font-weight: 600; cursor: pointer }
.nophoto.big { min-height: 260px; background-size: 120px, cover }
.stay-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start }
.stay-cols section h2 { font-size: 24px; margin-bottom: 10px }
.stay-cols .stack > section { border-bottom: 1px solid var(--line); padding-bottom: 24px }
.prewrap { white-space: pre-line }
.host { display: flex; gap: 16px; align-items: flex-start }
.host h2 { font-size: 22px }
.host-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--deep); color: var(--on-deep); font-family: var(--font-display); font-size: 24px; display: grid; place-items: center }
.amen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.amen li { padding-left: 26px; position: relative }
.amen li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 3px solid var(--good); border-bottom: 3px solid var(--good); transform: rotate(-45deg) }
.bookcard { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 28px rgba(19,35,58,.10) }
.bookcard form { display: flex; flex-direction: column; gap: 12px }
.avail-msg { font-size: 14px; font-weight: 600; color: var(--muted) }
.avail-msg.good { color: var(--good) } .avail-msg.bad { color: var(--bad) }
.cal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 10px }
.month .m-name { font-weight: 700; margin-bottom: 8px }
.m-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center }
.m-grid span { font-size: 12px; color: var(--muted); padding: 4px 0 }
.m-grid .d { font: inherit; font-size: 14px; aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums }
.m-grid .d:hover:not(:disabled) { outline: 1px solid var(--ink) }
.m-grid .d.past { color: var(--line); cursor: default }
.m-grid .d.taken { color: var(--muted); text-decoration: line-through; cursor: not-allowed; opacity: .6 }
.m-grid .d.sel { background: var(--ink); color: var(--bg) }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8,16,25,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 8px }
.lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); font-size: 34px; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer }
.lb-nav { display: flex; gap: 16px; align-items: center; color: #fff }

@media (max-width: 860px) {
  .searchbar { grid-template-columns: 1fr 1fr; gap: 4px }
  .sb-field { border-right: 0; border-bottom: 1px solid var(--line) }
  .searchbar .btn { grid-column: 1 / -1 }
  .stay-cols { grid-template-columns: 1fr }
  .bookcard { position: static }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 120px }
  .g-main { grid-column: 1 / -1; grid-row: auto } .g-thumb:nth-of-type(n+4) { display: none }
  .listing { grid-template-columns: 1fr } .listing .thumb { width: 100% }
}
@media (max-width: 520px) { .cal { grid-template-columns: 1fr } .amen { grid-template-columns: 1fr } }
.mobile-reserve { display: none }
@media (max-width: 860px) {
  .mobile-reserve:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(19,35,58,.10);
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
  .stay { padding-bottom: 80px }
}
.admin-table td.acts { min-width: 200px }
.admin-table tr.subrow td { padding: 0; border-bottom: 0 }
.admin-table tr.subrow:has(.link-out:not(:empty)) td { padding: 0 10px 14px; border-bottom: 1px solid var(--line) }
.sub-boxes { display: flex; gap: 16px; flex-wrap: wrap }
.sub-boxes .link-out { max-width: 520px; flex: 1 1 320px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px }
.sub-boxes .link-out:empty { display: none }

/* printable flyer */
.flyer-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.flyer { background: #FBFCFD; color: #13233A; border: 1px solid var(--line); border-radius: 12px; padding: 48px; max-width: 8.5in; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px }
.fl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid #13233A; padding-bottom: 12px }
.fl-brand { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 2px; text-transform: uppercase }
.fl-brand span { color: #C95A1C }
.fl-season { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #4F6075 }
.flyer h1 { font-size: clamp(36px, 6vw, 56px); text-transform: uppercase; line-height: 1 }
.fl-lead { font-size: 19px; color: #3B4A5C; max-width: 52ch }
.fl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px }
.fl-grid h2 { font-size: 22px; margin-bottom: 4px; color: #13233A }
.fl-grid p { color: #3B4A5C }
.fl-cta { background: #13233A; color: #EEF3F5; border-radius: 10px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.fl-cta p:first-child { font-family: var(--font-display); font-size: 24px; text-transform: uppercase }
.fl-url { font-family: var(--font-data); font-size: 22px; font-weight: 600; color: #F09A5E; word-break: break-all }
.fl-foot { font-size: 14px; color: #4F6075 }
@media (max-width: 600px) { .flyer { padding: 24px } .fl-grid { grid-template-columns: 1fr } }
@media print {
  @page { size: letter; margin: 0.4in }
  body { background: #fff }
  .bar, footer, .skip, .flyer-tools { display: none !important }
  main { padding: 0 !important }
  .flyer { border: 0; padding: 0; max-width: none }
  .fl-cta { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}

/* Ice Signal sign-in (in place on Hardwater) */
.is-dialog{border:0;border-top:4px solid #D6E7EE;border-radius:14px;padding:22px 22px 18px;width:min(440px,calc(100vw - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px #0006}
.is-dialog::backdrop{background:#0d1724b3}
.is-close{position:absolute;top:10px;right:10px;background:none;border:0;font-size:20px;color:var(--muted);cursor:pointer;min-width:44px;min-height:44px}
.is-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;padding-right:40px}.is-head h2{font-size:24px}
.is-dest{margin-top:4px;color:var(--muted)}.is-dest b{color:var(--ink)}
.is-works{font-size:14px;color:var(--muted);margin:6px 0 4px}
.is-sites{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.is-sites li{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}.is-sites img{border-radius:5px}
.is-google{width:100%}.is-or{text-align:center;color:var(--muted);font-size:13px;margin:10px 0}
.is-sent h3{font-family:var(--font-display);font-size:22px;margin-bottom:6px}.is-terms{margin-top:10px}
.is-hint{display:flex;gap:10px;align-items:flex-start;background:var(--ice);border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.is-hint:empty{display:none}.is-hint img{flex:0 0 20px;margin-top:1px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--blaze-text);text-decoration:underline;cursor:pointer}
.is-powered{display:flex;align-items:center;gap:6px;margin-top:6px}
.is-brand{text-transform:none;letter-spacing:.3px}
/* Ice Signal wordmark: "Ice" white, "Signal" ice blue #5BC8F5. On light backgrounds it sits in a navy pill so both stay readable. */
.is-wm{white-space:nowrap;font-weight:800;letter-spacing:.01em;text-transform:none}.is-wm .is-ice{color:#fff}.is-wm .is-sig{color:#5BC8F5}
.is-pill{display:inline-block;background:#01193b;border-radius:999px;padding:2px 10px;font-size:13px;line-height:1.6}
.is-head .is-pill{margin-bottom:6px}.is-hint .is-pill{flex:0 0 auto;margin-top:1px}

/* ---------- Sponsored placements (owner-approved, paid ads only) ---------- */
.ad{position:relative;margin:0}.ad img{display:block;width:100%;height:auto;border-radius:10px;background:var(--ice)}
.ad-label{position:absolute;top:8px;left:8px;z-index:1;background:#13233Ae6;color:#fff;font:700 11px/1 var(--font-body);letter-spacing:.6px;text-transform:uppercase;padding:5px 8px;border-radius:999px}
.ad-by{font-size:13px;color:var(--muted);margin-top:6px}
.ad-wide{max-width:640px}.ad-before{margin-top:22px}
.ad-feed{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}
.ad-strip-wrap{padding-top:8px;padding-bottom:28px}.ad-strip-wrap:empty{display:none}
.ad-strip{border-top:1px solid var(--line);padding-top:14px}.ad-strip-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ad-logo img{width:150px;height:75px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
/* /advertise/ */
.wide-prose{max-width:760px}.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tier{display:flex;flex-direction:column;gap:8px}.tier-price b{font-size:30px}
.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.adv-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.adv-ad{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.adv-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.adv-art{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.adv-art figure{margin:0}
.adv-thumb{background:var(--ice);border-radius:8px;overflow:hidden;margin-bottom:6px}.adv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.adv-msg{background:var(--ice);padding:10px 12px;border-radius:8px}
.adv-billing{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}.btn.mini,.mini.btn{padding:6px 12px;font-size:14px}
/* owner review */
.ad-admin{margin-bottom:16px;display:flex;flex-direction:column;gap:10px}.ad-arts{display:flex;flex-wrap:wrap;gap:14px}
.ad-review{margin:0;max-width:320px}.ad-review img{width:100%;border-radius:6px;border:1px solid var(--line);margin-top:4px;min-height:40px;background:var(--ice)}

/* artwork cropper */
.crop-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,20,30,.72);display:flex;align-items:center;justify-content:center;padding:12px}
.crop-box{background:#fff;border-radius:12px;padding:14px;width:min(640px,100%);max-height:100%;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.crop-title{margin:0 0 10px}
.crop-frame{position:relative;width:100%;background:#e9eef3 repeating-conic-gradient(#dfe5ea 0 25%,transparent 0 50%) 0 0/20px 20px;border-radius:6px;overflow:hidden;cursor:grab;user-select:none;outline:2px solid #3C3B6E}
.crop-frame:active{cursor:grabbing}
.crop-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.crop-zoom{display:flex;align-items:center;gap:10px;margin:12px 0}
.crop-zoom input{flex:1;min-height:32px}
.crop-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.crop-actions .btn{min-height:44px}
.adv-edit{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.adv-new{border:2px solid var(--line)}
.adv-new-hl{outline:3px solid var(--warn,#c80);outline-offset:2px}
.btn.danger{color:var(--bad,#b00020);border-color:currentColor}

/* header logo: art + name + .com baked into one image */
.brand picture { display: block; flex: none; line-height: 0 }
.brand-logo { display: block; height: 80px; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px }
.bar .wrap { padding-block: 8px }
@media (max-width: 600px) { .brand-logo { height: 48px } }

/* lakes dropdown + mobile menu */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.menu-btn { display: none; margin-left: auto; background: transparent; color: var(--on-deep); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: 22px; line-height: 1; padding: 8px 12px; min-height: 44px; cursor: pointer }
.lakes-menu { position: relative; display: flex }
.lakes-toggle .caret { font-size: .75em; margin-left: 4px }
.lakes-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: min(720px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.35) }
.lakes-panel[hidden] { display: none }
.lp-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line) }
.lp-q { flex: 1; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; min-height: 44px }
.lp-close { background: transparent; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; min-width: 44px }
.lp-body { overflow: auto; padding: 8px 16px 16px; columns: 2 260px; column-gap: 24px }
.lp-state { break-inside: avoid; margin: 10px 0 6px }
.lp-state h3 { font-size: 17px; margin: 0 0 4px }
.lp-region { break-inside: avoid; margin-bottom: 8px }
.lp-region .label { margin: 4px 0 2px }
.lp-region ul { list-style: none; margin: 0; padding: 0 }
.nav .lp-region a { display: block; color: var(--ink); opacity: 1; padding: 6px 8px; font-weight: 500; font-size: 15px; border-radius: 6px }
.nav .lp-region a:hover, .nav .lp-region a:focus { background: var(--ice); outline: none }
.lp-dot { color: var(--blaze); font-size: 9px; vertical-align: middle }

/* homepage big search */
.bigsearch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 6px 24px rgba(19,35,58,.12) }
.bs-field { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0 }
.bs-field label { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted) }
.bs-field select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; min-height: 46px; width: 100%; background: var(--surface); color: var(--ink) }
.bs-field input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; min-height: 46px; width: 100%; box-sizing: border-box; background: var(--surface); color: var(--ink) }
.bs-go { min-height: 46px; padding-inline: 28px; font-size: 17px }
.ta-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); max-height: 300px; overflow: auto }
.ta-list li { padding: 9px 10px; border-radius: 6px; cursor: pointer }
.ta-list li[aria-selected="true"], .ta-list li:hover { background: var(--ice) }

@media (max-width: 760px) {
  .menu-btn { display: inline-flex }
  .bar .nav { display: none; width: 100%; flex-direction: column; margin-left: 0; gap: 2px }
  .bar .nav.open { display: flex }
  .bar .nav > a, .lakes-toggle { padding: 12px; font-size: 17px }
  .lakes-menu { display: block }
  .lakes-panel { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; z-index: 100 }
  .lp-body { columns: 1 }
  body.lakes-open { overflow: hidden }
  .bigsearch { grid-template-columns: 1fr 1fr }
  .bs-lake, .bs-go { grid-column: 1 / -1 }
}
@media (min-width: 761px) { .bar .nav { position: relative } .lakes-menu { position: static } .lakes-panel { left: auto; right: 0 } }
@media (max-width: 760px) { .bar .wrap { gap: 10px } .brand { min-width: 0; flex: 0 1 auto } .brand-logo { height: 48px } .menu-btn { padding: 6px 10px } }
@media (max-width: 760px) { .bar .nav .lakes-toggle { padding: 12px; font-size: 17px } }

/* homepage outfitters + guides cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.duo .band { grid-template-columns: 1fr; align-content: space-between }
.duo .band .actions { justify-content: flex-start }
.duo .band .label { color: var(--on-deep-muted) }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr } }

@media (min-width: 761px) { .bigsearch .bs-lake { grid-column: span 2 } .bigsearch .bs-go { grid-column: 1 / -1 } }
.species-pick { display: flex; flex-wrap: wrap; gap: 4px 14px }
.species-pick legend { width: 100% }
.lake-ta { position: relative }
.lake-ta input[type="text"] { font: inherit; width: 100% }
.region-lakes { columns: 2 220px; margin: 8px 0 0; padding-left: 18px }
.nav .lp-region a.lp-rlink { display: inline; padding: 0; font-size: inherit; font-weight: 700; color: var(--muted); text-decoration: underline }

/* Listing extras: add-ons/rental gear, approximate map circle, amenity filter chips */
.addon-pick .addon-row { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08) }
.addon-pick .addon-row > label { display: flex; justify-content: space-between; gap: 10px; align-items: center }
.addon-pick select { width: auto; min-width: 56px }
.addon-pick input[type="number"] { width: 70px }
.addon-list li { margin: 4px 0 }
.approx-map { position: relative; height: 260px; overflow: hidden; margin: 8px 0 }
.approx-map iframe { width: 100%; height: 100%; border: 0; pointer-events: none }
.approx-circle { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(46,125,182,.18); border: 2px solid rgba(46,125,182,.7) }
.amen-chips { align-items: center }
.amen-chips select { width: auto; padding: 4px 6px }
.small.bad { color: #b3261e }
/* Reporting (outfitters, advertisers, admin) */
.reports { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px }
.reports .tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 16px 0 }
.reports .tile { cursor: default }
.reports .tile .mono { font-size: 26px }
.rep-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0 }
.rep-controls .field { margin: 0 }
.rep-btns { display: flex; gap: 8px }
.rep-chart { margin: 8px 0 20px; background: var(--surface); border: 1px solid var(--line); padding: 12px }
.rep-chart svg { width: 100%; height: auto; display: block }
.rc-bar { fill: var(--ice, #7fb3d5) } .rc-line { fill: none; stroke: var(--blaze, #d9531e); stroke-width: 2 }
.rc-axis { stroke: var(--line) } .rc-t { font-size: 11px; fill: currentColor; opacity: .7 }
.rc-key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; vertical-align: middle }
.rc-key-bar { background: var(--ice, #7fb3d5) } .rc-key-line { background: var(--blaze, #d9531e) }
.tablewrap { overflow-x: auto }
.rep-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px }
.rep-table th, .rep-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap }
.rep-table th:first-child, .rep-table td:first-child { text-align: left; white-space: normal }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 20px }
.rep-top { margin: 0; padding-left: 20px }