/* ============================================================
   BOWL OF LIGHT — Kahu Kāhealani Satchitananda
   v4 — The photograph is the page.
   Doctrine: images are never washed or masked. One subtle dark
   gradient anchored to the text corner; small white type offset
   bottom-left or bottom-right; everything else stays clean.
   White sections between frames carry ink text and the craft.
   ============================================================ */

:root{
  /* ---- ground ---- */
  --white:      #FFFFFF;
  --warm:       #FDFBF7;
  --sand:       #F6F1E8;

  /* ---- gold ----
     --gold      fills, rules, decorative
     --gold-deep large gold text (≥3:1 on white)
     --gold-text small gold text (≥4.5:1 on white)      */
  --gold:       #BFA063;
  --gold-deep:  #8A6D35;
  --gold-text:  #755E2B;
  --gold-lt:    #E6D7B2;
  --gold-pale:  #F7F1E2;

  /* ---- ink ---- */
  --ink:        #1D1915;
  --ink-2:      #655D54;
  --ink-3:      #9A9186;
  --hair:       rgba(29,25,21,.10);
  --hair-strong:rgba(29,25,21,.16);

  /* ---- scrim base (photograph shadow, warm not grey) ---- */
  --shade: 14,10,6;

  /* ---- type ---- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Manrope", "Helvetica Neue", system-ui, sans-serif;

  /* Over-image type is deliberately restrained — the image speaks. */
  --t-hero:  clamp(2.9rem, 1.6rem + 4.4vw, 6rem);
  --t-frame: clamp(2.3rem, 1.45rem + 3.1vw, 4.6rem);
  /* White-section scale */
  --t-xxl:   clamp(2.1rem, 1.2rem + 3.3vw, 4.4rem);
  --t-xl:    clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem);
  --t-lg:    clamp(1.4rem, 1.12rem + 1.1vw, 2.05rem);
  --t-sub:   clamp(1.13rem, 1.01rem + .6vw, 1.5rem);
  --t-base:  1.0625rem;
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;
  --t-2xs:   .6875rem;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:9rem;
  --section: clamp(5.5rem, 3rem + 8.5vw, 12.5rem);

  --measure: 36rem;
  --shell: 80rem;
  --gutter: clamp(1.5rem, 5vw, 5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0 0 1.1em}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:#F0E5C9; color:var(--ink)}
[id]{scroll-margin-top:5.5rem}

h1,h2,h3,h4{
  margin:0; font-family:var(--display); font-weight:300; line-height:1.06;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  letter-spacing:-.026em; text-wrap:balance;
}

/* ============================================================ LAYOUT */
.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); position:relative}
.shell--mid{max-width:58rem}
.shell--narrow{max-width:46rem}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.6)}
.band-warm{background:var(--warm)}
.band-sand{background:var(--sand)}
.center{text-align:center}
.center .sub{margin-inline:auto}
.center .btn-row{justify-content:center}

/* asymmetric editorial pair — claim left, body right */
.duo{display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start}
.duo__body{padding-top:clamp(0rem,4vw,3.2rem)}

/* ============================================================ TYPE */
.eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:var(--t-2xs); font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-text); margin:0 0 var(--s3);
}
.eyebrow::before{content:""; width:2rem; height:1px; background:var(--gold); flex:0 0 auto}
.center .eyebrow::before{display:none}
.display{font-size:var(--t-hero); letter-spacing:-.03em; line-height:1.04}
.h2{font-size:var(--t-xxl)}
.h3{font-size:var(--t-xl)}
.h4{font-size:var(--t-lg); font-weight:400; letter-spacing:-.02em}
.sub{font-size:var(--t-sub); line-height:1.52; color:var(--ink-2);
  max-width:var(--measure); letter-spacing:-.011em}
.sub--wide{max-width:44rem}
.prose{max-width:var(--measure); color:var(--ink-2)}
.prose p{margin-bottom:1.35em}
.prose strong{color:var(--ink); font-weight:600}
.haw{white-space:nowrap; color:var(--gold-text)}
.caption{font-size:var(--t-xs); color:var(--ink-3); line-height:1.55}
.gold{color:var(--gold-text)}

/* ============================================================ NAV */
.nav{position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  transition:background .3s var(--ease)}
.nav.is-stuck{background:rgba(255,255,255,.95)}
.nav__in{max-width:var(--shell); margin-inline:auto; padding:0 var(--gutter);
  height:66px; display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto}
.brand__mark{width:25px;height:25px;flex:0 0 25px}
.brand__txt{font-family:var(--display); font-weight:400; font-size:1.02rem;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36; letter-spacing:-.012em}
.nav__links{display:flex; align-items:center; gap:clamp(.8rem,1.5vw,1.5rem); min-width:0}
.nav__links .btn{min-height:44px; padding:0 1.35rem; font-size:var(--t-xs)}
.nav__links a{position:relative; text-decoration:none; font-size:var(--t-sm); font-weight:500;
  color:var(--ink-2); transition:color .2s var(--ease); white-space:nowrap; padding:.35rem 0}
.nav__links a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__toggle{display:none; width:44px;height:44px; align-items:center; justify-content:center; margin-right:-10px}
.nav__toggle svg{width:21px;height:21px}

/* ============================================================ BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:0 1.85rem; border-radius:999px;
  font-size:var(--t-sm); font-weight:600; letter-spacing:.01em; text-decoration:none;
  white-space:nowrap; flex:0 0 auto;
  transition:background .25s var(--ease), color .25s var(--ease),
             transform .2s var(--ease)}
/* gold carries ink text — white-on-gold fails contrast */
.btn--gold{background:var(--gold); color:var(--ink)}
.btn--gold:hover{background:#B29455}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:#000}
.btn--quiet{background:rgba(29,25,21,.06); color:var(--ink)}
.btn--quiet:hover{background:rgba(29,25,21,.1)}
.btn--onimg{background:rgba(255,255,255,.94); color:var(--ink)}
.btn--onimg:hover{background:#fff}
.btn--clear{background:rgba(255,255,255,.2); color:#fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.btn--clear:hover{background:rgba(255,255,255,.3)}
.btn:active{transform:scale(.985)}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:var(--s4)}

.tlink{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-size:var(--t-sm); font-weight:600; color:var(--gold-text); transition:gap .25s var(--ease)}
.tlink:hover{gap:.7rem}
.tlink svg{width:13px;height:13px;flex:0 0 13px;margin-top:1px}

/* ============================================================ FRAME
   Full-viewport photograph. The image is never washed — a single
   eased shadow rises from the base, dying before mid-frame, plus a
   soft pool behind the text corner. Type is small, white, offset. */
.frame{
  position:relative; display:grid; width:100%;
  height:100svh; min-height:34rem; max-height:62rem; overflow:hidden;
}
.frame--tall{height:108svh; max-height:72rem}
.frame--half{height:72svh; min-height:28rem; max-height:46rem}
.frame > picture,.frame > img{grid-area:1/1; width:100%; height:100%}
.frame picture{display:block}
.frame img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,center)}

/* cinematic settle — one-time 1.05→1, JS-gated so no-JS never sticks zoomed */
html.js .frame img{transform:scale(1.05); transition:transform 2.4s var(--ease-out)}
html.js .frame.is-seen img{transform:scale(1)}

/* THE SHADOW — a cinematic wash climbing the full frame from the base.
   Deep at the floor, still present at three-quarter height where the
   headline sits, gone at the very top so the sky stays open. The
   many stops trace an ease curve; a two-stop ramp bands visibly. */
.frame__scrim{grid-area:1/1; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(var(--shade),.96) 0%,
      rgba(var(--shade),.95) 7%,
      rgba(var(--shade),.93) 14%,
      rgba(var(--shade),.90) 21%,
      rgba(var(--shade),.85) 28%,
      rgba(var(--shade),.78) 35%,
      rgba(var(--shade),.69) 42%,
      rgba(var(--shade),.58) 49%,
      rgba(var(--shade),.46) 56%,
      rgba(var(--shade),.34) 63%,
      rgba(var(--shade),.23) 70%,
      rgba(var(--shade),.14) 77%,
      rgba(var(--shade),.07) 84%,
      rgba(var(--shade),.02) 92%,
      rgba(var(--shade),0)  100%);
}


/* the words: small, white, bottom-left (or bottom-right) */
.frame__in .shell--narrow{max-width:none}
.frame__in{
  grid-area:1/1; z-index:2; align-self:end;
  /* no shell cap — the words start at the page gutter, not the
     centred column, so they sit truly bottom-left on wide screens */
  width:100%;
  padding:0 var(--gutter) clamp(2.75rem,5.5vh,4.5rem);
  /* no text-shadow — the corner gradient alone grounds the type */
  color:#fff;
}
.frame .display{font-size:var(--t-hero); max-width:20ch}
.frame .h2,.frame h1.h2{font-size:var(--t-frame); max-width:17ch}
.frame .h3{font-size:var(--t-frame)}
.frame .sub{color:rgba(255,255,255,.95); font-size:clamp(1.1rem,1rem+.5vw,1.4rem);
  max-width:38rem; margin-top:var(--s2)}
.frame .eyebrow{color:var(--gold-lt); margin-bottom:var(--s2)}
.frame .eyebrow::before{background:rgba(230,215,178,.65)}
.frame .caption{color:rgba(255,255,255,.68)}
.frame .btn-row{margin-top:var(--s3)}
.frame .haw{color:var(--gold-lt)}

/* first frame on each page: quiet load choreography (CSS-only) */
main > .frame:first-child .frame__in > *{opacity:0; transform:translateY(22px);
  animation:frameRise 1s var(--ease-out) forwards}
main > .frame:first-child .frame__in > *:nth-child(1){animation-delay:.15s}
main > .frame:first-child .frame__in > *:nth-child(2){animation-delay:.3s}
main > .frame:first-child .frame__in > *:nth-child(3){animation-delay:.45s}
main > .frame:first-child .frame__in > *:nth-child(4){animation-delay:.58s}
main > .frame:first-child .frame__in > *:nth-child(5){animation-delay:.7s}
@keyframes frameRise{to{opacity:1; transform:none}}

/* ============================================================ SPLIT / GRID */
.split{display:grid; gap:clamp(2.5rem,6vw,var(--s8)); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.split--l{grid-template-columns:1.05fr .95fr}
.split--r{grid-template-columns:.95fr 1.05fr}
.grid-3{display:grid; gap:clamp(1.75rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid-2{display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.soft{position:relative; border-radius:10px; overflow:hidden}
.soft img{width:100%}

/* ============================================================ THE TWELVE
   The protocols are the artifact. Large serif numerals, air, a
   sweep of gold on hover — set like a table of sacred contents. */
.protocol{display:grid; grid-template-columns:5.75rem 1fr; gap:var(--s3);
  padding-block:clamp(1.5rem,2.6vw,2.1rem); border-radius:14px;
  align-items:start; position:relative; transition:background .3s var(--ease)}
.protocol:hover{background:var(--gold-pale)}
.protocol__wk{font-family:var(--display); font-weight:300; margin:0;
  font-size:clamp(1.7rem,1.2rem+1.4vw,2.5rem); line-height:1; padding-top:.3rem;
  color:var(--gold-deep); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60;
  font-feature-settings:"tnum" 1}
.protocol__haw{font-family:var(--display); font-weight:300; font-size:var(--t-lg);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60; letter-spacing:-.022em; margin:0 0 .3rem}
.protocol__en{color:var(--ink-2); font-size:var(--t-sm); margin:0; max-width:44rem}

/* ============================================================ LINEAGE
   The moʻokūʻauhau — each generation a node on the line. */
.moo__link{padding-block:clamp(1.5rem,2.8vw,2.3rem);
  display:grid; grid-template-columns:minmax(6.5rem,9.5rem) 1fr; gap:var(--s3); align-items:baseline}
.moo__rel{font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; margin:0}
.moo__rel::before{content:""; display:inline-block; width:7px; height:7px;
  border:1px solid var(--gold); border-radius:50%; margin-right:.65rem;
  vertical-align:1px; background:transparent}
.moo__link:last-child .moo__rel::before{background:var(--gold)}
.moo__name{font-family:var(--display); font-weight:300; font-size:var(--t-lg);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 72; letter-spacing:-.022em; margin:0 0 .45rem}
.moo__what{color:var(--ink-2); margin:0; font-size:var(--t-sm); max-width:36rem}

/* ============================================================ CARDS */
/* borderless, shadowless — a quiet sand panel on white; white on sand/warm */
.card{background:var(--sand); border-radius:22px;
  padding:clamp(1.9rem,3.2vw,2.75rem); height:100%; display:flex; flex-direction:column;
  /* floating panels only — a whisper of lift, nothing more */
  box-shadow:0 1px 2px rgba(29,25,21,.03), 0 14px 36px -18px rgba(29,25,21,.10);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}
.card:hover{box-shadow:0 2px 4px rgba(29,25,21,.04), 0 22px 50px -20px rgba(29,25,21,.14);
  transform:translateY(-2px)}
.band-warm .card,.band-sand .card{background:var(--white)}
.card__k{font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; margin-bottom:var(--s2)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink-2); font-size:var(--t-sm)}
.card .tlink{margin-top:auto; align-self:flex-start; padding-top:var(--s3)}
.price{font-family:var(--display); font-weight:300;
  font-size:clamp(2.3rem,1.6rem+2.1vw,3.3rem);
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 100; letter-spacing:-.03em;
  font-feature-settings:"tnum" 1; line-height:1}
.price small{display:block; font-family:var(--body); font-size:var(--t-sm);
  color:var(--ink-3); margin-top:.6rem; font-weight:500; letter-spacing:0}

.spec__row{display:grid; grid-template-columns:minmax(7rem,12rem) 1fr; gap:var(--s3);
  padding-block:.85rem; align-items:baseline}
.spec__k{font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700}
.spec__v{margin:0; font-size:var(--t-sm)}

/* ============================================================ QUOTES */
.quote{position:relative; padding-top:2.9rem}
.quote::before{content:"\201C"; position:absolute; top:0; left:-.05em;
  font-family:var(--display); font-weight:300; font-size:4.6rem; line-height:1;
  color:var(--gold-lt)}
.quote blockquote{margin:0; font-family:var(--display); font-weight:300;
  font-size:var(--t-lg); line-height:1.34; letter-spacing:-.022em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 72; color:var(--ink)}
.quote cite{display:block; margin-top:var(--s3); font-style:normal;
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; line-height:1.7}
.quote cite::before{content:""; display:inline-block; width:1.6rem; height:1px;
  background:var(--gold); margin-right:.6rem; vertical-align:.25em}

/* ============================================================ FORM */
.form__grid{display:grid; gap:var(--s3)}
.field{display:grid; gap:.5rem}
.field > span{font-size:var(--t-xs); font-weight:600; color:var(--ink-2); letter-spacing:.02em}
.input{width:100%; min-height:54px; padding:0 1.15rem;
  border:0; border-radius:14px; background:var(--sand);
  font:inherit; font-size:1rem; color:var(--ink);
  transition:background .2s var(--ease)}
textarea.input{padding:.9rem 1.1rem; min-height:9rem; resize:vertical}
select.input{appearance:none; -webkit-appearance:none; padding-right:2.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23755E2B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1rem center}
.input:focus{outline:2px solid var(--gold-deep); outline-offset:2px; background:#fff}
.form__grid .btn{justify-self:start}

/* ============================================================ FOOTER */
.foot{background:var(--sand); padding-block:var(--s7) var(--s4); color:var(--ink-2)}
.foot a{text-decoration:none; transition:color .2s var(--ease)}
.foot a:hover{color:var(--gold-text)}
.foot__pule{font-family:var(--display); font-weight:300; font-size:var(--t-xl);
  line-height:1.26; letter-spacing:-.026em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 80; color:var(--ink);
  max-width:22ch; margin:0}
.foot__pule::before{content:""; display:block; width:2.4rem; height:2px;
  background:var(--gold); margin-bottom:var(--s3)}
.foot__grid{display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); margin-block:var(--s6)}
.foot__h{font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700; margin-bottom:var(--s2)}
.foot li{margin-bottom:.55rem; font-size:var(--t-sm)}
.foot__base{margin-top:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between;
  font-size:var(--t-xs); color:var(--ink-3)}

/* ============================================================ REVEAL
   JS-gated: without JS everything is simply visible. */
html.js .rise{opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
html.js .rise.is-in{opacity:1; transform:none}
.rise-d1{transition-delay:.1s} .rise-d2{transition-delay:.2s} .rise-d3{transition-delay:.3s}

/* ============================================================ A11Y */
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:4px}
.frame :focus-visible{outline-color:#fff}
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.9rem 1.3rem; text-decoration:none}
.skip:focus{left:var(--gutter); top:.6rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html.js .rise{opacity:1; transform:none}
  html.js .frame img{transform:none; transition:none}
  main > .frame:first-child .frame__in > *{animation:none; opacity:1; transform:none}
}

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .nav__links{position:fixed; inset:66px 0 auto 0; background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px); flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s2) var(--gutter) var(--s4);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    max-height:calc(100svh - 66px); overflow-y:auto}
  .nav__links.is-open{opacity:1; transform:none; pointer-events:auto}
  .nav__links a{padding:1rem 0; font-size:var(--t-sub)}
  .nav__links a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:var(--s3)}
  .nav__toggle{display:flex}
}
@media (max-width:900px){
  .split--l,.split--r{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .duo__body{padding-top:0}
  .frame--tall{height:102svh}
}
@media (max-width:600px){
  .protocol{grid-template-columns:3.6rem 1fr; gap:var(--s2)}
  .moo__link{grid-template-columns:1fr; gap:.5rem}
  .spec__row{grid-template-columns:1fr; gap:.15rem}
}