body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: one marina café that changes with the clock. Light theme is the morning coffee bar,
   dark theme is the night cocktail bar. A to-scale weekly hours chart is the signature element. */
:root{
  --bg:#fff7ec; --surface:#ffffff; --band:#ffe2bf; --fg:#43280d; --muted:#805933; --line:#f3d8bd;
  --accent:#b3363f; --btn:#ff6677; --btn-fg:#43280d; --sea:#7db37d; --sea-soft:#e6e0a1;
  --deep:#43280d; --on-deep:#ffe2bf; --on-deep-muted:#cc9967; --deep-line:#805933; --now:#43280d;
  --mango:#ffc980; --on-mango:#43280d; --peach:#f6a87a; --sun-a:#b3363f; --sun-b:#a66185; --on-sun:#ffffff; --on-sun-muted:#ffe2bf; --sun-line:#e68a93;
  --sky-a:#ffc980; --sky-b:#ff99a4; --script:"Pacifico","Brush Script MT",cursive;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gl:max(20px, env(safe-area-inset-left, 0px)); --gr:max(20px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#2b1909; --surface:#43280d; --band:#38200b; --fg:#ffe2bf; --muted:#cc9967; --line:#5e3d1c;
  --accent:#ff99a4; --btn:#ff6677; --btn-fg:#43280d; --sea:#7db37d; --sea-soft:#50512a;
  --deep:#1c0f04; --on-deep:#ffe2bf; --on-deep-muted:#cc9967; --deep-line:#5e3d1c; --now:#ffe2bf;
  --mango:#ffc980; --on-mango:#43280d; --peach:#f6a87a; --sun-a:#b3363f; --sun-b:#7a3f5f; --on-sun:#ffffff; --on-sun-muted:#ffe2bf; --sun-line:#e68a93;
  --sky-a:#996027; --sky-b:#b76065; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#2b1909; --surface:#43280d; --band:#38200b; --fg:#ffe2bf; --muted:#cc9967; --line:#5e3d1c;
  --accent:#ff99a4; --btn:#ff6677; --btn-fg:#43280d; --sea:#7db37d; --sea-soft:#50512a;
  --deep:#1c0f04; --on-deep:#ffe2bf; --on-deep-muted:#cc9967; --deep-line:#5e3d1c; --now:#ffe2bf;
  --mango:#ffc980; --on-mango:#43280d; --peach:#f6a87a; --sun-a:#b3363f; --sun-b:#7a3f5f; --on-sun:#ffffff; --on-sun-muted:#ffe2bf; --sun-line:#e68a93;
  --sky-a:#996027; --sky-b:#b76065; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--deep)}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.lede{font-size:1.14rem;color:var(--muted);max-width:52ch}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.btn{display:inline-block;font:inherit;font-weight:700;text-decoration:none;border-radius:999px;padding:13px 24px;border:2px solid var(--btn);background:var(--btn);color:var(--btn-fg);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.line{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn.sm{padding:9px 18px;font-size:.93rem}
.more{font-weight:700;color:var(--accent)}

/* announcement + header */
.announce{background:var(--deep);color:var(--on-deep);font-size:.92rem;text-align:center;padding-block:9px}
.announce a{font-weight:700}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:12px}
.brand{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1;text-decoration:none}
.brand small{display:block;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-top:5px}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.links a{text-decoration:none;font-weight:500;font-size:.97rem;padding-block:4px;border-bottom:2px solid transparent}
.links a[aria-current="page"]{border-bottom-color:var(--btn)}
.links a.btn{border:2px solid var(--btn);padding:9px 18px}

/* sections */
.sec{padding-block:72px}
.sec.band{background:var(--band)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin-bottom:32px}
.head h2,.sec h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.head .stack{gap:10px}

/* photo frames: real photo when it loads, a labelled slot when it cannot */
.ph{margin:0;border-radius:20px;overflow:hidden;background:var(--sea-soft);position:relative;max-width:100%}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph figcaption{display:none}
.ph.noimg{display:flex;align-items:flex-end;border:1px dashed var(--sea)}
.ph.noimg figcaption{display:block;padding:18px;font-size:.88rem;color:var(--muted)}
.ph.noimg figcaption b{display:block;color:var(--fg);font-size:.95rem}

/* hero */
.hero{padding-block:56px 64px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .grid>*{min-width:0}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.7rem)}
.hero h1 em{font-weight:500;color:var(--accent)}
.hero .ph{aspect-ratio:5/4;border-radius:200px 200px 20px 20px}
.hero .stack{gap:22px}

/* today strip */
.today{background:var(--deep);color:var(--on-deep)}
.today .wrap{display:grid;grid-template-columns:1.1fr 1.5fr .9fr;gap:0}
.today .cell{padding:20px 22px;border-left:1px solid var(--deep-line);min-width:0}
.today .cell:first-child{border-left:0;padding-left:0}
.today .label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-deep-muted);margin-bottom:4px}
.today .val{font-weight:700}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7db37d;margin-right:8px}
.dot.off{background:#ff99a4}

/* three ways in */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:flex;flex-direction:column;gap:14px;min-width:0}
.card .ph{aspect-ratio:4/3}
.card h3{font-size:1.6rem}
.card p{color:var(--muted)}

/* hours chart */
.hours{display:grid;gap:8px;font-variant-numeric:tabular-nums}
.hrow{display:grid;grid-template-columns:3.2em 1fr 9.5em;gap:12px;align-items:center;font-size:.95rem}
.hrow .track{position:relative;height:16px;border-radius:8px;background:var(--sea-soft)}
.hrow .bar{position:absolute;top:0;bottom:0;border-radius:8px;background:var(--sea)}
.hrow .now{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--now)}
.hrow .t{text-align:right;color:var(--muted)}
.hrow.is-today{font-weight:700}
.hrow.is-today .bar{background:var(--btn)}
.hrow.is-today .t{color:var(--fg)}
.haxis{display:grid;grid-template-columns:3.2em 1fr 9.5em;gap:12px;font-size:.74rem;color:var(--muted)}
.haxis div{display:flex;justify-content:space-between}

/* events band */
.deep{background:var(--deep);color:var(--on-deep)}
.deep .eyebrow{color:#ffb3bb}
.deep .lede{color:var(--on-deep-muted)}
.deep .btn.line{color:var(--on-deep);border-color:var(--on-deep)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
.split>*{min-width:0}
.plan{border:1px solid var(--deep-line);border-radius:16px;padding:20px 22px}
.plan h3{font-size:1.25rem;margin-bottom:6px}
.plan .price{font-family:var(--display);font-weight:700;font-size:1.7rem}
.plan .price small{font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--on-deep-muted)}
.plan ul{margin:10px 0 0;padding-left:1.1em;color:var(--on-deep-muted);font-size:.96rem}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rev blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:1.1rem;line-height:1.4}
.rev figcaption{margin-top:auto;font-size:.9rem;color:var(--muted)}
.rev figcaption b{display:block;color:var(--fg);font-size:1rem}
.stars{color:var(--btn);letter-spacing:3px}

/* menu */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px}
.mcol{min-width:0}
.mcol h3{font-size:1.5rem;padding-bottom:10px;border-bottom:2px solid var(--fg);margin-bottom:6px}
.mcol h4{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:20px 0 4px}
.mcol ul{list-style:none;margin:0;padding:0}
.mcol li{padding:8px 0;border-bottom:1px dashed var(--line)}
.note{border-left:3px solid var(--btn);padding-left:14px;color:var(--muted);font-size:.96rem;max-width:60ch}

/* estimator + forms */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.legend{font-weight:700;font-size:.92rem}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
input[type=range]{width:100%;accent-color:var(--btn)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{border:2px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg input:checked+span{color:var(--accent)}
.seg label:has(input:checked){border-color:var(--btn)}
.seg label:has(input:focus-visible){outline:3px solid var(--sea);outline-offset:2px}
.lines{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.lines div{display:flex;justify-content:space-between;gap:12px}
.lines .total{font-family:var(--display);font-weight:700;font-size:1.6rem;border-top:2px solid var(--fg);padding-top:10px;margin-top:6px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
.sent{background:var(--sea-soft);border-radius:12px;padding:14px 16px}
details{border-bottom:1px solid var(--line);padding-block:14px}
summary{font-weight:700;cursor:pointer}
details p{color:var(--muted);margin-top:8px;max-width:65ch}

/* visit */
.facts{display:grid;gap:18px}
.facts dt{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700}
.facts dd{margin:2px 0 0;font-size:1.06rem}
.copy{font:inherit;font-size:.82rem;font-weight:700;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:3px 10px;margin-left:8px;cursor:pointer}

footer.site{background:var(--deep);color:var(--on-deep-muted);padding-block:44px;font-size:.95rem}
footer.site .brand{color:var(--on-deep)}
footer.site .brand small{color:#ffb3bb}
footer.site .cols{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
footer.site .stack{align-items:center}
footer.site nav{justify-content:center}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* tropical layer: sunset photo frames, a peach sun, hibiscus blooms, waves */
.hero{background:linear-gradient(180deg,var(--band),var(--bg));overflow:hidden}
.hero h1 em{font-family:var(--script);font-style:normal;font-weight:400;font-size:.86em;line-height:1.25;display:inline-block}
.art{position:relative;min-width:0}
.art .ph{position:relative;z-index:1}
.art .sun{position:absolute;z-index:0;width:48%;aspect-ratio:1;border-radius:50%;background:var(--mango);top:-7%;left:-14%}
.art .bloom{position:absolute;z-index:2;left:-7%;bottom:26%;width:19%;height:auto;color:var(--btn);pointer-events:none}
.art .bloom.b2{left:auto;right:-6%;bottom:-5%;width:27%;color:var(--peach)}
.art .bloom.b3{left:auto;right:16%;bottom:-3%;width:13%;color:var(--sun-line)}
.ph{background:linear-gradient(160deg,var(--sky-a),var(--sky-b))}
.ph.noimg{border:0}
.ph.noimg figcaption{background:var(--surface);margin:14px;border-radius:12px;padding:10px 14px}
.hib{width:1.15em;height:1.15em;vertical-align:-.2em;color:var(--btn);margin-right:.3em}
.today,footer.site{position:relative}
.wave{position:absolute;left:0;bottom:100%;width:100%;height:22px;display:block;color:var(--deep);margin-bottom:-1px;pointer-events:none}
.deep.sunset{background:linear-gradient(135deg,var(--sun-a),var(--sun-b));color:var(--on-sun);--btn:var(--mango);--btn-fg:var(--on-mango);position:relative;overflow:hidden}
.sunset .eyebrow,.sunset .lede,.sunset .plan .price small,.sunset .plan ul{color:var(--on-sun-muted)}
.sunset .plan{border-color:var(--sun-line)}
.sunset .btn.line{color:var(--on-sun);border-color:var(--on-sun)}
.sunset .wrap{position:relative;z-index:1}
.sunset .bigbloom{position:absolute;right:-80px;top:-90px;width:320px;height:auto;color:var(--sun-line);opacity:.4;pointer-events:none}
.mcol h3{border-bottom-color:var(--btn)}
.card .ph{border-radius:120px 120px 20px 20px}
.flogo{display:block;width:170px;height:auto}
.mbar{display:none}
@media (max-width:860px){
  .hero .grid,.split,.today .wrap,.cards,.reviews,.menu-grid,.fgrid{grid-template-columns:1fr}
  .hero .ph{aspect-ratio:4/3;border-radius:120px 120px 20px 20px}
  .today .cell{border-left:0;border-top:1px solid var(--deep-line);padding:14px 0}
  .today .cell:first-child{border-top:0}
  .sec{padding-block:52px}
  .links a.btn{display:none}
  .hrow,.haxis{grid-template-columns:2.6em 1fr 7.6em;gap:8px;font-size:.86rem}
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--bg);border-top:1px solid var(--line);
    padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gl)}
  .mbar .btn{flex:1;text-align:center;padding:12px 8px}
  main{padding-bottom:76px}
}
@media (prefers-reduced-motion:no-preference){ .view{animation:in .25s ease-out} @keyframes in{from{transform:translateY(6px)}to{transform:none}} }