/* site.css — beach-hut theme for the after-party site: public RSVP page, admin login and dashboard.
   Colours are tokens on :root (sand, sea, hut stripes) with a dusk variant for dark mode. Mobile-first. */
:root {
  --sky-top: #cfeaf3; --sky-bot: #eef8f8; --sand: #f4e7cf; --sand-deep: #ead6b1;
  --bg: #f4e7cf; --card: #fffaf1; --ink: #23414d; --muted: #6f7b7c; --rule: #e3d2b2;
  --sea: #1f7a93; --sea-ink: #fff; --coral: #e2725b; --shell: #eba48f; --err: #b3392d; --ok-bg: #e2f2ef;
  --stripe: repeating-linear-gradient(90deg, #e9806e 0 18px, #fff4e6 18px 36px, #7fb8d0 36px 54px, #fff 54px 72px, #f2c76e 72px 90px, #fff 90px 108px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #14243a; --sky-bot: #2a3a52; --sand: #2a2620; --sand-deep: #3a3329;
    --bg: #211e19; --card: #2b2721; --ink: #f1e7d6; --muted: #b3a894; --rule: #463e33;
    --sea: #6cc3d8; --sea-ink: #0e1d22; --coral: #f08f7a; --shell: #e7a893; --err: #f39488; --ok-bg: #1f3433;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 Karla, system-ui, sans-serif; overflow-x: hidden; }
a { color: var(--sea); }
.muted { color: var(--muted); }
.small { font-size: .9rem; color: var(--muted); }

/* Hero: sky, huts, sand */
.hero { text-align: center; }
/* Bottom band continues the SVG's sand dune edge-to-edge; height tracks the SVG's scale (capped at its 640px max width). */
.sky { background: linear-gradient(to top, var(--sand-deep) min(3.4vw, 21px), transparent 0), linear-gradient(var(--sky-top), var(--sky-bot)); padding: clamp(2.5rem, 9vw, 4.5rem) 16px 0; }
.announce { font: 600 clamp(1.6rem, 6.5vw, 2.6rem)/1.15 Fraunces, Georgia, serif; color: var(--sea); margin: 0 0 1.4rem; }
.kicker { margin: 0; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; font-weight: 600; color: var(--sea); }
.hero h1 { font: 400 clamp(3.2rem, 15vw, 6.5rem)/1.15 Pacifico, cursive; margin: .1em 0 0; color: var(--coral); }
.names { font: 600 clamp(1.4rem, 5.5vw, 2rem)/1.2 Fraunces, Georgia, serif; margin: .2rem 0 1.25rem; }
.names span { color: var(--sea); font-style: italic; }
.huts { display: block; width: 100%; max-width: 640px; margin: 0 auto -2px; height: auto; }
.sand { background: var(--sand-deep); padding: .5rem 16px 2.5rem;
  background-image: radial-gradient(rgba(120, 90, 40, .12) 1px, transparent 1.5px); background-size: 9px 9px; }
.facts { position: relative; display: inline-block; max-width: 100%; background: var(--card); border-radius: 14px;
  padding: 1.6rem 1.5rem 1.2rem; margin-top: 1rem; box-shadow: 0 6px 0 var(--rule); }
.facts::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 14px 14px 0 0; background: var(--stripe); }
.facts p { margin: .25rem 0; }
.facts .date { font: 600 1.35rem/1.3 Fraunces, Georgia, serif; }
.facts .time { font-weight: 600; color: var(--sea); }
.privacy { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
.privacy .sig { font: italic 600 1rem Fraunces, Georgia, serif; color: var(--ink); white-space: nowrap; }
.shell { width: 34px; height: 34px; color: var(--shell); display: block; margin: 0 auto .3rem; }
.shell.sm { width: 24px; height: 24px; display: inline-block; margin: 0; }
.links { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0 0; }
.links a { text-decoration: none; font-weight: 600; background: var(--card); padding: .55rem 1rem; border-radius: 999px; border: 2px solid var(--sea); min-height: 44px; display: inline-flex; align-items: center; }

/* Good to know */
.know { max-width: 34rem; margin: 2.5rem auto 0; padding: 0 16px; text-align: center; }
.know h2 { margin-bottom: 1rem; }
.know-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; text-align: left; }
.know-grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* odd tile out spans the row */
@media (max-width: 30rem) { .know-grid { grid-template-columns: 1fr; } }
.tile { background: var(--card); border-radius: 14px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 4px 0 var(--rule); }
.tile .icon { width: 36px; height: 36px; display: block; }
.tile h3 { margin: .5rem 0 .25rem; text-transform: none; letter-spacing: 0; font: 600 1.15rem/1.25 Fraunces, Georgia, serif; color: var(--ink); }
.tile p { margin: 0; color: var(--muted); font-size: .95rem; }

a.tile-link { display: block; text-decoration: none; color: inherit; transition: transform .15s; }
a.tile-link:hover { transform: translateY(-2px); }
.tile .more { display: block; margin-top: .4rem; color: var(--sea); font-weight: 600; }

/* Staying over page */
.hero-sm .sky { padding-top: 2rem; }
.hero-sm h1 { font-size: clamp(2.6rem, 12vw, 4.8rem); }
.hero-sm .kicker a { text-decoration: none; }
.hero-sm .huts { margin-top: .5rem; }
.page { max-width: 46rem; margin: 0 auto; padding: 1.5rem 16px 2rem; }
.callout { background: var(--card); border-radius: 14px; padding: 1.2rem 1.3rem; box-shadow: 0 4px 0 var(--rule); border-left: 5px solid var(--coral); }
.callout h2 { font-size: 1.5rem; margin: 0 0 .4rem; }
.callout p { margin: 0; }
.sec { margin: 2.2rem 0 .3rem; }
.page h3 { margin: 1.6rem 0 .6rem; }
.list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 34rem) { .list { grid-template-columns: 1fr; } }
.place { background: var(--card); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 3px 0 var(--rule); display: flex; flex-direction: column; }
.place-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.place h4 { margin: 0; font: 600 1.1rem/1.3 Fraunces, Georgia, serif; }
.place h4 a { color: var(--ink); text-decoration-color: var(--rule); }
.place .price { color: var(--coral); font-weight: 600; white-space: nowrap; }
.place .meta { margin: .15rem 0 .4rem; font-size: .85rem; color: var(--muted); }
.place p { margin: 0 0 .6rem; font-size: .95rem; }
.place .tel { margin-top: auto; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.back { text-align: center; margin-top: 2rem; }
.badge { display: inline-block; margin: 0 0 .5rem; padding: .2rem .7rem; border-radius: 999px; background: var(--coral); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* RSVP card */
.card { position: relative; background: var(--card); max-width: 34rem; margin: 2rem auto; padding: clamp(1.4rem, 5vw, 2.25rem);
  border-radius: 16px; box-shadow: 0 6px 0 var(--rule); overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--stripe); }
.card.narrow { max-width: 24rem; margin-top: 4rem; }
@media (max-width: 36rem) { .card { margin-inline: 16px; } }
h2 { font: 600 1.9rem/1.15 Fraunces, Georgia, serif; margin: .3rem 0 .4rem; }
h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 2rem 0 .75rem; }
.lede { margin: 0 0 1.25rem; color: var(--muted); }
label, legend { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
fieldset { border: 0; padding: 0; margin: 0; }
input:not([type=radio]), textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */ color: inherit;
  background: var(--bg); border: 1.5px solid var(--rule); border-radius: 10px; padding: .7rem .8rem; min-height: 46px;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
[aria-invalid=true] { border-color: var(--err); }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.choice label { font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; min-height: 48px;
  border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; background: var(--bg); }
.choice input { accent-color: var(--sea); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.choice label:has(input:checked) { border-color: var(--sea); background: var(--ok-bg); }
@media (max-width: 30rem) { .choice { grid-template-columns: 1fr; } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pair + .small { margin: .4rem 0 0; }
.err { color: var(--err); margin: .3rem 0 0; font-size: .9rem; }
.ok { background: var(--ok-bg); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; border-left: 4px solid var(--sea); }
.ok p { margin: .2rem 0; }
.hp { position: absolute; left: -9999px; }
.cf-turnstile { margin-top: 1.25rem; min-height: 65px; }
button, .btn {
  display: inline-block; margin-top: 1.5rem; font: 600 1.05rem Karla, sans-serif; text-decoration: none; min-height: 50px;
  background: var(--sea); color: var(--sea-ink); border: 0; border-radius: 999px; padding: .85rem 1.6rem; cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.08); }
form > button { width: 100%; }
button.secondary { background: var(--bg); color: var(--ink); border: 1.5px solid var(--rule); margin-top: .75rem; }
button.link { background: none; color: var(--sea); padding: 0; margin: 0 0 0 1rem; min-height: 0; text-decoration: underline; }
.inline { display: inline; }
.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 16px 3rem; }

/* Admin */
.admin { max-width: 70rem; margin: 0 auto; padding: 2rem 16px 4rem; }
.bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.bar .btn { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.stat { background: var(--card); border-radius: 12px; padding: 1rem; color: var(--muted); font-size: .9rem; box-shadow: 0 4px 0 var(--rule); }
.stat span { display: block; font: 600 2.3rem/1.1 Fraunces, Georgia, serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat.big { background: var(--sea); color: var(--sea-ink); }
.stat.big span { color: var(--sea-ink); }
.diet { padding-left: 1.1rem; margin: 0; }
.scroll { overflow-x: auto; border-radius: 12px; background: var(--card); box-shadow: 0 4px 0 var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
tr.no td { color: var(--muted); }