:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Sand, koa, deep Pacific */
  --color-bg:#f5efe3;
  --color-surface:#faf6ec;
  --color-surface-offset:#ebe2cf;
  --color-border:oklch(0.3 0.03 60 / .14);
  --color-text:#182530;
  --color-text-muted:#5b6670;
  --color-text-faint:#98a0a6;
  --color-text-inverse:#f5efe3;
  --color-primary:#7b4420;
  --color-primary-hover:#5f3217;
  --color-primary-active:#48250f;
  --color-ocean:#10333f;
  --color-ocean-2:#0b262f;

  --radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --shadow-md:0 4px 14px oklch(0.25 0.03 60 / .10);
  --shadow-lg:0 16px 40px oklch(0.25 0.03 60 / .16);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;

  --font-display:'Zodiak','Georgia',serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;
}

/* ---------- layout primitives ---------- */
.container{width:min(100% - 2*clamp(var(--space-4),5vw,var(--space-12)),var(--content-wide));margin-inline:auto}
.container--default{max-width:var(--content-default)}
.container--narrow{max-width:var(--content-narrow)}
.section{padding-block:clamp(var(--space-12),8vw,var(--space-24))}
.section--tight{padding-block:clamp(var(--space-8),5vw,var(--space-16))}
.section--ocean{background:var(--color-ocean);color:var(--color-text-inverse)}
.section--ocean .muted{color:oklch(from var(--color-text-inverse) l c h / .7)}
.section--offset{background:var(--color-surface-offset)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:var(--space-4)}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.h-hero{font-size:var(--text-3xl)}
.h-page{font-size:var(--text-2xl)}
.h-section{font-size:var(--text-xl)}
.h-sub{font-size:var(--text-lg);font-weight:700;line-height:1.3}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.section--ocean .eyebrow{color:oklch(from var(--color-text-inverse) l c h / .7)}
.lead{font-size:var(--text-lg);font-weight:400;line-height:1.45;color:var(--color-text-muted)}
.section--ocean .lead{color:oklch(from var(--color-text-inverse) l c h / .82)}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--text-sm)}
.hawaiian{font-family:var(--font-display);font-style:italic;font-weight:400}
.stack>*+*{margin-top:var(--space-4)}
.stack-lg>*+*{margin-top:var(--space-8)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:700;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-hover)}
.btn--primary:active{background:var(--color-primary-active)}
.btn--ghost{color:var(--color-text);box-shadow:inset 0 0 0 1.5px var(--color-border)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--color-text)}
.section--ocean .btn--ghost,.hero .btn--ghost{color:var(--color-text-inverse);box-shadow:inset 0 0 0 1.5px oklch(1 0 0 / .45)}
.section--ocean .btn--ghost:hover,.hero .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.cta-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3)}
.hero .cta-note,.section--ocean .cta-note{color:oklch(from var(--color-text-inverse) l c h / .72)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / .88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);line-height:1.1}
.brand__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400}
.brand__sub{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.nav{display:flex;align-items:center;gap:clamp(var(--space-3),2vw,var(--space-6))}
.nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-2) 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--color-border)}
.nav a[aria-current="page"]{border-bottom-color:var(--color-primary)}
.header__cta{min-height:40px;padding-block:var(--space-2)}
.header__cta,.header__cta:hover{color:#fff}
.nav{margin-left:auto}
@media (max-width:640px){
  .header__inner{flex-wrap:wrap;row-gap:0;padding-bottom:var(--space-2)}
  .brand{order:1}
  .header__cta{order:2;margin-left:auto}
  .nav{order:3;flex-basis:100%;margin-left:0;gap:var(--space-5);justify-content:flex-start;border-top:1px solid var(--color-border);padding-top:var(--space-2)}
  .brand__sub{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88dvh,820px);display:grid;align-items:end;color:var(--color-text-inverse);isolation:isolate;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,oklch(0.15 0.03 230 / .88) 0%,oklch(0.15 0.03 230 / .35) 45%,oklch(0.15 0.03 230 / .05) 100%)}
.hero__content{padding-block:clamp(var(--space-12),8vw,var(--space-20))}
.hero__content .h-hero{max-width:16ch}
.hero__content .lead{color:oklch(from var(--color-text-inverse) l c h / .85);max-width:48ch}
.hero--short{min-height:min(56dvh,520px)}

/* ---------- grids ---------- */
.split{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media (min-width:800px){.split{grid-template-columns:1fr 1fr}.split--text-wide{grid-template-columns:3fr 2fr}.split--img-first .split__img{order:-1}}
.split__img img{border-radius:var(--radius-md);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
.bleed{width:100%;max-height:70vh;object-fit:cover;object-position:center}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:var(--space-6)}
@media (min-width:800px){.quotes{grid-template-columns:1.4fr 1fr 1fr}.quotes .quote:first-child{grid-row:span 1}}
.quote{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.quote blockquote{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.3;font-weight:400}
.quote p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.quote--big blockquote{font-size:var(--text-xl)}
.rating{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.rating strong{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;line-height:1}
.rating span{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ---------- details list ---------- */
.details{display:grid;gap:0;border-top:1px solid var(--color-border)}
.details div{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
.details dt{font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);letter-spacing:.02em}
.details dd{font-size:var(--text-base)}
@media (max-width:520px){.details div{grid-template-columns:1fr;gap:var(--space-1)}}
.tbc{display:inline-block;font-family:var(--font-body);font-style:normal;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--color-primary);background:oklch(from var(--color-primary) l c h / .09);padding:2px var(--space-2);border-radius:var(--radius-sm);vertical-align:middle}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:0;max-width:72ch;border-top:1px solid var(--color-border)}
.steps li{counter-increment:step;display:grid;grid-template-columns:3.5rem 1fr;column-gap:var(--space-4);padding-block:var(--space-6);border-bottom:1px solid var(--color-border)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:var(--text-xl);line-height:1.2;color:var(--color-primary);grid-row:span 2}
.steps h3{font-size:var(--text-lg);font-weight:700;line-height:1.2}
.steps p{grid-column:2}
.steps p{margin-top:var(--space-2);color:var(--color-text-muted)}

/* ---------- time cards ---------- */
.times{display:grid;gap:var(--space-4)}
@media (min-width:640px){.times{grid-template-columns:1fr 1fr}}
.time{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}
.time__hour{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;line-height:1}
.time__hour small{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);margin-left:var(--space-2)}
.time ul{margin:0;padding-left:1.1em;color:var(--color-text-muted);font-size:var(--text-sm)}
.time .btn{margin-top:auto;align-self:flex-start}

/* ---------- footer ---------- */
.footer{background:var(--color-ocean-2);color:oklch(from var(--color-text-inverse) l c h / .78);padding-block:var(--space-12) var(--space-8)}
.footer__grid{display:grid;gap:var(--space-8)}
@media (min-width:800px){.footer__grid{grid-template-columns:2fr 1fr 1fr}}
.footer a{color:var(--color-text-inverse);text-decoration:none;border-bottom:1px solid oklch(1 0 0 / .25)}
.footer a:hover{border-bottom-color:#fff}
.footer .brand{color:var(--color-text-inverse);border-bottom:0}
.footer .brand__sub{color:oklch(from var(--color-text-inverse) l c h / .6)}
.footer__list{list-style:none;display:grid;gap:var(--space-2);font-size:var(--text-sm)}
.footer__bottom{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid oklch(1 0 0 / .12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:oklch(from var(--color-text-inverse) l c h / .55)}
.footer__chant{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--color-text-inverse);max-width:28ch;line-height:1.35}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}