/* ============================================================
   TRIBEAWAKEN v2 — DESIGN SYSTEM
   Standard: Pat Mitchell (restraint, editorial confidence)
             Emma Grede (bold, direct, commercial)
   Rules: BIG type. HEAVY weights. Warm canyon palette. Generous air.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  /* canyon earth */
  --ink:#140D0A;         /* deepest */
  --bg:#1B1210;          /* page */
  --bg-2:#241814;        /* raised */
  --bg-3:#2E1E18;        /* card */
  --cream:#FAF3E9;       /* primary text */
  --cream-2:#FFFCF6;
  --sand:#D9C6B4;        /* secondary text */
  --clay:#C96A3E;        /* primary accent */
  --clay-lt:#E5895C;
  --gold:#D9A25F;
  --rule:rgba(250,243,233,.14);
  --on-clay:#1B1210;

  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,sans-serif;

  /* BIG type scale */
  --t-hero: clamp(3.4rem, 2rem + 7vw, 7.5rem);
  --t-h1:   clamp(2.8rem, 1.8rem + 4.6vw, 5.4rem);
  --t-h2:   clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --t-h3:   clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --t-lead: clamp(1.25rem, 1.1rem + .8vw, 1.7rem);
  --t-body: clamp(1.08rem, 1.02rem + .32vw, 1.28rem);
  --t-small:clamp(.95rem, .9rem + .2vw, 1.05rem);
  --t-eyebrow: .84rem;

  --gut: clamp(1.5rem, 1rem + 3vw, 4rem);
  --pad: clamp(4rem, 2.5rem + 6vw, 9rem);
  --max: 1280px;
  --measure: 62ch;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--cream);
  font-family:var(--body); font-size:var(--t-body); font-weight:450; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}

/* --- layout --- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--tight{max-width:860px}
.sec{padding-block:var(--pad)}
.sec--alt{background:var(--bg-2)}
.sec--deep{background:var(--ink)}

/* --- type --- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em}
p{max-width:var(--measure)}
p + p{margin-top:1.1em}
.lead{font-size:var(--t-lead);line-height:1.5;font-weight:500;color:var(--cream);max-width:34ch}
.body-lg{font-size:calc(var(--t-body) * 1.06)}
.muted{color:var(--sand)}
strong,b{font-weight:700;color:var(--cream-2)}
em{font-style:italic}

.eyebrow{
  font-family:var(--body);font-size:var(--t-eyebrow);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay-lt);
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:2.2rem;height:2px;background:var(--clay);flex:none}
.eyebrow--center{justify-content:center}

/* --- actions --- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--body);font-weight:800;font-size:1.05rem;letter-spacing:.005em;
  padding:1.05em 2.1em;border-radius:6px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;line-height:1;
  transition:transform .16s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--clay);color:var(--on-clay)}
.btn--primary:hover{background:var(--clay-lt)}
.btn--ghost{border-color:var(--rule);color:var(--cream)}
.btn--ghost:hover{border-color:var(--clay);color:var(--clay-lt)}

.arrow{
  display:inline-flex;align-items:center;gap:.55em;text-decoration:none;
  font-family:var(--body);font-weight:800;font-size:.95rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay-lt);
  border-bottom:2px solid transparent;padding-bottom:.3em;transition:.2s;
}
.arrow:hover{border-bottom-color:var(--clay);gap:.9em}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(27,18,16,.66);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.15rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--clay-lt)}
.brand img{width:44px;height:auto}
.nav{display:flex;align-items:center;gap:1.9rem;list-style:none;padding:0}
.nav a{text-decoration:none;font-weight:700;font-size:1rem;color:var(--cream);white-space:nowrap;transition:color .18s}
.nav a:hover{color:var(--clay-lt)}
@media(max-width:960px){.nav{display:none}}

/* --- hero --- */
.hero{position:relative;min-height:min(88vh,900px);display:grid;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(20,13,10,.66) 0%,rgba(20,13,10,.58) 42%,rgba(20,13,10,.35) 100%)}
.hero__in{position:relative;z-index:2;padding-block:var(--pad)}
.hero h1{font-size:var(--t-hero);font-weight:900;max-width:16ch}
.hero .lead{margin-top:1.8rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}

/* --- grids --- */
.grid{display:grid;gap:clamp(1.2rem,.8rem + 1.6vw,2.2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* --- cards --- */
.card{background:var(--bg-3);border:1px solid var(--rule);border-radius:14px;padding:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);display:flex;flex-direction:column;height:100%}
.card h3{margin-bottom:.7rem}
.card p{margin-bottom:1.2rem}
.card .arrow{margin-top:auto;align-self:flex-start}

/* --- media --- */
.band{position:relative}
.band img{width:100%;height:clamp(340px,48vh,560px);object-fit:cover}
figure{margin:0}
.figcap{font-size:var(--t-small);color:var(--sand);font-style:italic;margin-top:.9rem}

/* --- stat / proof --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-top:3rem}
.stat__n{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,2rem + 2.6vw,4.4rem);color:var(--gold);line-height:1}
.stat__l{font-weight:700;font-size:1rem;color:var(--sand);margin-top:.5rem}

/* --- quote --- */
.pull{font-family:var(--display);font-weight:600;font-style:italic;font-size:clamp(1.6rem,1.2rem + 1.8vw,2.7rem);line-height:1.3;letter-spacing:-.02em;max-width:24ch}

/* --- footer --- */
.ftr{background:var(--ink);border-top:1px solid var(--rule);padding-block:4rem 2.5rem}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem}
@media(max-width:800px){.ftr__grid{grid-template-columns:1fr;gap:2rem}}
.ftr h4{font-family:var(--body);font-size:.86rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-lt);margin-bottom:1rem}
.ftr ul{list-style:none;padding:0;display:grid;gap:.7rem}
.ftr a{text-decoration:none;font-weight:600;color:var(--sand);transition:color .18s}
.ftr a:hover{color:var(--cream)}
.ftr__legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--t-small);color:var(--sand)}

/* --- reveal --- */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
  .rv.in{opacity:1;transform:none}
}

/* --- the cowboy signature is the opening mark, on every page --- */
.brand{display:inline-flex;align-items:center;gap:.85rem}
.brand__logo{width:clamp(104px, 9vw, 148px);height:auto;flex:none;display:block}
.brand__txt{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(1.4rem, 1.2rem + .55vw, 1.85rem)}
.hdr__in{padding-block:clamp(.9rem, .7rem + .5vw, 1.35rem)}
.menu__top .brand__logo{width:clamp(104px, 10vw, 148px)}
@media(max-width:860px){ .brand__logo{width:86px} .brand__txt{font-size:1.3rem} }
@media(max-width:520px){ .brand__logo{width:72px} }

/* ============================================================
   THE ROCK FACE  —  now a site-wide component.
   A pecked petroglyph panel: figures scattered at real scale
   across the dark, the way they sit on an actual rock wall.
   Use .peckfield on any dark section that would otherwise be
   empty; use .rockface when it carries a photograph too.
   ============================================================ */
.peckhost{ position: relative; isolation: isolate; }
.peckfield{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  color: rgba(246,210,166,.52);
}
.peckfield svg{
  position:absolute; color: inherit; stroke-width: 3; height:auto;
  overflow: visible;
}
.peckfield--faint{ color: rgba(240,198,156,.155); }
/* the markings stay off the reading column — they are the wall,
   not the writing on it */
.peckfield--faint{
  
}
.peckfield--strong{ color: rgba(250,220,178,.66); }
@media (max-width: 820px){ .peckfield svg:nth-child(n+6){ display:none } }
@media (max-width: 560px){ .peckfield svg:nth-child(n+4){ display:none } }

.rockface{
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(340px, 42vw, 620px);
  display: grid; align-items: center;
  border-block: 1px solid rgba(230,180,140,.2);
}
.rockface__bg{ position:absolute; inset:0; z-index:-3; }
.rockface__bg img{ width:100%; height:100%; object-fit:cover;
  filter: saturate(.5) contrast(1.08) brightness(.76); }
.rockface__in{ position: relative; max-width: 46rem;
  padding-block: clamp(3rem,2rem + 4vw,6rem); }
.rockface__q{
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(1.6rem, 1.05rem + 2.4vw, 3.2rem);
  line-height: 1.22; letter-spacing: -.025em;
  color: var(--cream-2); max-width: 21ch;
  text-shadow: 0 3px 30px rgba(20,13,10,.66);
}
.rockface__c{
  font-family:'Courier New', ui-monospace, Menlo, monospace;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; color: var(--gold); margin-top: 1.6rem;
}

/* ============================================================
   THE OPENING  —  the cowboy signature on the dark, the ledge
   in its own panel beside it. The type never crosses the man.
   ============================================================ */
.mark{
  display:block; width: clamp(150px, 16vw, 280px); height:auto;
  margin-bottom: clamp(.9rem, .6rem + 1.1vw, 1.8rem);
  filter: drop-shadow(0 6px 34px rgba(20,13,10,.58));
}
.opening{
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(230,180,140,.22);
  background: var(--bg);
}
.opening__say{
  position: relative; z-index: 2;
  padding: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(1.5rem,1rem + 3vw,4rem)
           clamp(2.6rem, 1.6rem + 4vw, 5.5rem) var(--gut);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 46rem; margin-left: auto;
}
.opening__say h1{
  font-size: clamp(2.6rem, 1.2rem + 5.2vw, 6.2rem);
  line-height: .98; letter-spacing: -.04em; max-width: 13ch;
}
.opening__say .lead{ max-width: 40ch; color: var(--sand); margin-top: 1.6rem; }
.opening__say .eyebrow{ color: var(--gold); }
.opening__say .eyebrow::before{ background: var(--gold); }
.opening__ledge{
  position: relative; overflow: hidden;
  min-height: clamp(420px, 74vh, 880px);
  border-left: 1px solid rgba(230,180,140,.2);
}
.opening__ledge img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 62% 30%;
}
.opening__ledge::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,13,10,.52) 0%, rgba(20,13,10,.12) 22%, transparent 46%),
    linear-gradient(180deg, rgba(20,13,10,.45) 0%, transparent 22%, transparent 70%, rgba(20,13,10,.52) 100%);
}
.opening__cred{
  position:absolute; right: clamp(1rem,2vw,2rem); bottom: clamp(.9rem,1.8vw,1.8rem); z-index:2;
  font-family:'Courier New', ui-monospace, Menlo, monospace;
  text-transform: uppercase; letter-spacing: .17em; font-size: .66rem;
  color: rgba(250,243,233,.7); text-align: right;
}
.opening .peckfield{ z-index: 0; }
@media (max-width: 1000px){
  .opening{ grid-template-columns: 1fr; }
  .opening__say{ max-width: none; margin-left: 0; order: 2;
    padding: clamp(2.2rem,1.6rem + 3vw,3.4rem) var(--gut) clamp(2.6rem,2rem + 3vw,4rem); }
  .opening__ledge{ order: 1; min-height: clamp(340px, 52vh, 560px); border-left: 0;
    border-bottom: 1px solid rgba(230,180,140,.2); }
  .opening__ledge img{ object-position: 60% 26%; }
  .mark{ width: clamp(132px, 34vw, 210px); }
}

/* the signature stands alone — nothing is allowed under or beside it */
.opening__say .mark{ margin-bottom: clamp(1.6rem, 1.1rem + 1.8vw, 3rem); }
.opening .peckfield{
  -webkit-mask-image: radial-gradient(58% 46% at 14% 20%, transparent 0 62%, #000 100%);
  mask-image: radial-gradient(58% 46% at 14% 20%, transparent 0 62%, #000 100%);
}

/* ---- the markings catch the light ---- */
.peckfield svg{
  stroke-width: 3.4;
  filter: drop-shadow(0 0 12px rgba(240,180,116,.55))
          drop-shadow(0 0 34px rgba(214,120,60,.34));
}
.peckfield--faint{ color: rgba(244,206,160,.40); }

/* ---- and one of them is lit ---- */
.peckfield svg.lit{
  color: rgba(247,214,168,.62);
  stroke-width: 3.4;
  filter: drop-shadow(0 0 14px rgba(247,196,120,.62))
          drop-shadow(0 0 44px rgba(217,120,52,.42))
          drop-shadow(0 0 90px rgba(217,120,52,.24));
}
.peckfield svg.lit::after{ content:none }
.lamphalo{
  position:absolute; pointer-events:none; border-radius:50%;
  background: radial-gradient(circle,
    rgba(247,196,120,.16) 0%, rgba(217,120,52,.09) 34%, transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  .peckfield svg.lit{ animation: wick 7.5s ease-in-out infinite; }
  @keyframes wick{
    0%,100%{ opacity:1 }
    42%{ opacity:.86 }
    58%{ opacity:1.0 }
    73%{ opacity:.92 }
  }
}

/* ============================================================
   THE RECORD — the work, with the numbers in the margin
   ============================================================ */
.creds{
  list-style:none; padding:0;
  margin: clamp(2.4rem, 1.8rem + 2vw, 3.8rem) 0 0;
  border-top: 1px solid var(--rule);
}
.creds li{
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: clamp(1rem, .6rem + 2vw, 3rem);
  padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.creds__n{
  font-family: var(--display); font-weight: 900; letter-spacing: -.035em;
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.8rem); line-height: 1;
  color: var(--gold); white-space: nowrap;
}
.creds b{
  display:block; font-family: var(--display); font-weight: 700;
  letter-spacing: -.022em; color: var(--cream-2);
  font-size: clamp(1.2rem, 1.02rem + .85vw, 1.7rem); line-height: 1.15;
  margin-bottom: .5rem;
}
.creds span:not(.creds__n){
  display:block; color: var(--sand); font-size: 1.05rem; line-height: 1.62; max-width: 62ch;
}
.creds__foot{
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  color: var(--sand); font-size: .98rem; letter-spacing: .01em; max-width: 74ch;
}
@media (max-width: 700px){
  .creds li{ grid-template-columns: 1fr; gap: .5rem; }
  .creds__n{ font-size: 1.6rem; }
}

/* ============================================================
   THE ASK — a quiet panel, bottom-right, never a full takeover
   ============================================================ */
.ask{
  position: fixed; z-index: 400;
  right: clamp(.8rem, 2vw, 2rem); bottom: clamp(.8rem, 2vw, 2rem);
  width: min(25rem, calc(100vw - 1.6rem));
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid rgba(230,180,140,.34);
  border-radius: 16px;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  box-shadow: 0 28px 80px rgba(0,0,0,.62), 0 0 0 1px rgba(20,13,10,.5);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.ask.in{ opacity: 1; transform: none; pointer-events: auto; }
.ask__x{
  position: absolute; top: .5rem; right: .5rem;
  width: 2.1rem; height: 2.1rem; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--sand); font-size: 1.5rem; border-radius: 8px;
}
.ask__x:hover{ color: var(--cream); background: rgba(250,243,233,.07); }
.ask__k{
  font-family: 'Courier New', ui-monospace, Menlo, monospace;
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .7rem;
}
.ask__h{
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); line-height: 1.12;
  color: var(--cream-2); margin-bottom: .7rem; max-width: 18ch;
}
.ask__p{ color: var(--sand); font-size: .96rem; line-height: 1.58; }
.ask__f{ display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.ask__in{
  flex: 1 1 11rem; min-width: 0;
  background: rgba(20,13,10,.6);
  border: 1px solid rgba(230,180,140,.3); border-radius: 9px;
  padding: .78em .9em; color: var(--cream); font: inherit; font-size: .96rem;
}
.ask__in::placeholder{ color: rgba(217,198,180,.5); }
.ask__in:focus{ outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }
.ask__in.bad{ border-color: #E5895C; animation: nudge .3s ease; }
@keyframes nudge{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.ask__go{ flex: 0 0 auto; font-size: .94rem; padding: .78em 1.2em; }
.ask__note{ margin-top: .85rem; font-size: .8rem; color: rgba(217,198,180,.72); line-height: 1.5; }
.ask__note.bad{ color: #E5895C; }
.ask__note a{ color: var(--gold-lt); }
@media (max-width: 560px){
  .ask{ left: .8rem; right: .8rem; width: auto; }
  .ask__f{ flex-direction: column; }
  .ask__go{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .ask{ transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   SHARED CHROME — restored. These rules had been truncated out
   of this file by an earlier edit, so any page without its own
   inline copy (the course page) rendered its header unstyled.
   ============================================================ */
.globebar{background:var(--ink);border-top:1px solid var(--rule);font-size:.82rem}
.globebar__in{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding-block:.55rem;min-height:2.6rem}
.globebar__lbl{display:flex;align-items:center;gap:.55rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);flex:none;margin:0}
.globebar__lbl svg{width:15px;height:15px;flex:none}
.globebar__ls{display:flex;align-items:center;gap:.35rem 1.15rem;flex-wrap:wrap;
  list-style:none;padding:0;margin:0}
.globebar__ls a{text-decoration:none;font-weight:700;color:var(--sand);
  letter-spacing:.04em;white-space:nowrap;transition:color .18s}
.globebar__ls a:hover{color:var(--cream)}
.globebar__ls .is-on{color:var(--cream);border-bottom:2px solid var(--clay);padding-bottom:2px}
.globebar .soon{color:rgba(217,198,180,.42);white-space:nowrap;font-weight:600}
.globebar__mail{margin-left:auto;text-decoration:none;font-weight:700;color:var(--sand);
  letter-spacing:.03em;white-space:nowrap;transition:color .18s}
.globebar__mail:hover{color:var(--clay-lt)}

.hdr__cta{font-size:.92rem;padding:.85em 1.4em;white-space:nowrap}

.burger{display:none;flex-direction:column;justify-content:center;gap:6px;
  width:52px;height:44px;padding:0 12px;background:none;border:1px solid var(--rule);
  border-radius:6px;cursor:pointer}
.burger i{display:block;height:2px;background:var(--cream);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:200;background:var(--ink);overflow-y:auto;
  padding:clamp(1.5rem, 1rem + 3vw, 3rem) 0 4rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1.6rem, 1rem + 3vw, 3rem)}
.menu__close{width:52px;height:44px;background:none;border:1px solid var(--rule);
  border-radius:6px;color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer}
.menu__ls{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.menu__ls li{border-bottom:1px solid var(--rule)}
.menu__ls a{display:flex;align-items:baseline;gap:1.2rem;text-decoration:none;
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.6rem, 1.1rem + 2.4vw, 2.9rem);line-height:1.05;
  padding-block:clamp(.45rem, .3rem + .5vw, .8rem);transition:padding .2s,color .2s}
.menu__ls a:hover{color:var(--clay-lt);padding-left:.6rem}
.menu__ls em{font-family:var(--body);font-style:normal;font-size:.78rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-lt);flex:none}
.menu__foot{margin-top:clamp(1.6rem, 1.2rem + 2vw, 2.6rem);display:flex;flex-wrap:wrap;
  gap:1.2rem 2.4rem;align-items:center}
.menu__foot a{text-decoration:none;font-weight:800;font-size:.9rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sand)}
.menu__foot a:hover{color:var(--clay-lt)}
body.locked{overflow:hidden}

@media(max-width:1010px){ .nav{display:none} .burger{display:inline-flex} }
@media(max-width:860px){ .globebar__mail{display:none} }
@media(max-width:520px){
  .globebar__lbl span{display:none}
  .globebar__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .globebar__in::-webkit-scrollbar{display:none}
}

/* ============================================================
   THE GREETINGS — three cultures, three bold marks, every page
   ============================================================ */
.greet{ background:var(--ink); border-bottom:1px solid var(--rule); }
.greet__in{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,.5rem + 1.6vw,2.4rem);
  padding-block:clamp(1.4rem,1rem + 2vw,2.8rem);
}
.greet__c{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.75rem; text-decoration:none; transition:opacity .2s;
}
.greet__c:hover{ opacity:.72 }
.greet__c svg{
  width:clamp(48px, 6.5vw, 84px); height:auto;
  stroke-width:3.6; color:var(--clay-lt);
}
.greet__c:nth-child(2) svg{ color:var(--gold) }
.greet__c:nth-child(3) svg{ color:#A3B490 }
.greet__w{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.05rem,.9rem + 1vw,1.8rem); line-height:1.1; color:var(--cream-2);
}
.greet__l{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); opacity:.6;
}
@media(max-width:640px){
  .greet__in{ gap:.6rem; padding-block:1.1rem }
  .greet__c svg{ width:38px; stroke-width:4 }
  .greet__w{ font-size:.92rem }
  .greet__l{ font-size:.54rem; letter-spacing:.12em }
}

/* ---- an open chapter ---- */
.scene{ border:1px solid var(--rule); background:var(--bg-2); margin-top:1rem; overflow:hidden }
.scene__btn{ display:flex; width:100%; gap:clamp(1rem,2vw,2rem); align-items:center; cursor:pointer;
  padding:clamp(1.2rem,1rem + 1.2vw,2rem); list-style:none; transition:background .2s }
.scene__btn::-webkit-details-marker{ display:none }
.scene__btn:hover{ background:rgba(201,106,62,.08) }
.scene__mark{ flex:none; width:clamp(42px,4.6vw,62px); color:var(--clay-lt); stroke-width:3.4 }
.scene__t{ flex:1 }
.scene__t b{ display:block; font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem); color:var(--cream-2); line-height:1.16; margin-bottom:.25rem }
.scene__t span{ display:block; color:var(--sand); font-size:.94rem }
.scene__x{ flex:none; font-size:1.5rem; color:var(--clay-lt); transition:transform .3s }
.scene[open] .scene__x{ transform:rotate(45deg) }
.scene__body{ padding:0 clamp(1.2rem,1rem + 1.2vw,2rem) clamp(1.8rem,1.4rem + 2vw,3rem);
  border-top:1px solid var(--rule-2) }
.scene__body p{ max-width:62ch; margin-top:1.1rem; color:var(--cream); line-height:1.82; font-size:1.06rem }
.scene__body p:first-child{ margin-top:1.6rem }
.scene__body .say{ font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem); color:var(--gold-lt); line-height:1.5 }
.scene__body .src{ margin-top:2rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand); opacity:.7 }
.join{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; max-width:34rem }
.join__in{ flex:1 1 14rem; min-width:0; background:rgba(20,13,10,.6);
  border:1px solid var(--rule); border-radius:8px; padding:.85em 1em;
  color:var(--cream); font:inherit; font-size:1rem }
.join__in::placeholder{ color:rgba(217,198,180,.5) }
.join__in:focus{ outline:2px solid var(--clay); outline-offset:1px; border-color:transparent }
.join__note{ margin-top:.9rem; font-size:.9rem; color:var(--sand); max-width:44ch }
.join__note a{ color:var(--gold-lt) }
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the opening — his words on the left, the garden beside them */
.opening__say h1{ font-size:clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); max-width:17ch; line-height:1.06 }
.opening__say .lead{ max-width:52ch; margin-top:1.6rem; font-size:1.08rem; line-height:1.78 }
.opening__say .lead strong{ color:var(--cream-2); font-weight:600 }
.opening__ledge img{ object-position:52% 50% !important }

/* the menu has to fit a laptop, not just a desktop */
@media (min-width:1011px) and (max-width:1320px){
  .nav{ gap:1rem }
  .nav a{ font-size:.86rem }
  .hdr__cta{ font-size:.82rem; padding:.7em 1em }
  .brand img{ width:46px }
  .brand__txt{ font-size:1.2rem }
}

/* ============================================================
   THE THEME — out of the canyon, into the garden.
   Wet stone, moss, deep shade, and the vermilion of the torii.
   ============================================================ */
:root{
  --ink:#0F1210;
  --bg:#141814;
  --bg-2:#1A1F1A;
  --bg-3:#222922;
  --cream:#F2EFE6;
  --cream-2:#FBF9F3;
  --sand:#C3C6B8;
  --clay:#B8503A;
  --clay-lt:#D06E52;
  --gold:#C6A45F;
  --gold-lt:#E3C68C;
  --rule:rgba(242,239,230,.13);
  --rule-2:rgba(242,239,230,.07);
  --on-clay:#0F1210;
}

@media (min-width:1011px){ .burger{ display:none !important } }

/* ============================================================
   PHOTOGRAPHS CARRY THE PAGE.  STANDING RULE: a background
   photograph is always visible. Never a texture, never a hint.
   Weight goes under the type only, and falls away over the picture.
   ============================================================ */
.photo-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none }
.photo-bg img{ width:100%; height:100%; object-fit:cover; opacity:1;
  filter:saturate(1.02) contrast(1) }
.photo-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(15,18,16,.88) 0%, rgba(15,18,16,.78) 34%,
    rgba(15,18,16,.42) 64%, rgba(15,18,16,.16) 100%) }
.hasphoto{ position:relative; isolation:isolate }
.hasphoto .wrap > *{ position:relative }
.hasphoto h2,.hasphoto h3,.hasphoto p,.hasphoto li,.hasphoto b,.hasphoto span{
  text-shadow:0 1px 18px rgba(15,18,16,.72) }
@media (max-width:820px){
  .photo-bg::after{ background:linear-gradient(180deg,
    rgba(15,18,16,.58) 0%, rgba(15,18,16,.74) 45%, rgba(15,18,16,.9) 100%) }
}

/* ---- the Stone Breath ---- */
.breath{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(1.6rem,1.2rem + 2.4vw,3.4rem);align-items:center;
  margin-top:clamp(2rem,1.6rem + 2vw,3.2rem)}
@media(max-width:820px){.breath{grid-template-columns:1fr}}
.orb{position:relative;display:grid;place-items:center;width:min(100%,17rem);
  aspect-ratio:1;margin-inline:auto}
.orb__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,161,94,.32)}
.orb__fill{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(201,161,94,.34), rgba(184,80,58,.16) 60%, transparent 72%);
  transform:scale(.62);transition:transform 1s linear}
.orb__t{position:relative;text-align:center;z-index:2}
.orb__t b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);color:var(--cream-2);letter-spacing:-.02em}
.orb__t span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-top:.5rem;min-height:1.2em;max-width:15rem;line-height:1.5}
.orb__n{display:block;font-family:var(--display);font-size:2.4rem;color:var(--gold);
  line-height:1;margin-top:.6rem;min-height:1em}
.pull{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1.2rem + 1.7vw,2.6rem);line-height:1.2;
  color:var(--cream-2);max-width:22ch}
.say{color:var(--sand);font-size:1.06rem;line-height:1.78;max-width:62ch;margin-top:1.1rem}
.say strong{color:var(--cream-2)}

/* ---- plain rows, not cards ---- */
.rows{list-style:none;padding:0;margin:clamp(2rem,1.6rem + 2vw,3.2rem) 0 0;
  border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule);
  padding-block:clamp(1.4rem,1.1rem + 1.2vw,2.2rem)}
.rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;
  align-items:baseline;text-decoration:none;transition:padding .25s ease}
.rows a:hover{padding-left:.7rem}
.rows b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.7rem);letter-spacing:-.02em;
  color:var(--cream-2);margin-bottom:.4rem;line-height:1.16}
.rows span span{display:block;color:var(--sand);font-size:1.02rem;line-height:1.66;max-width:60ch}
.rows em{font-style:normal;color:var(--clay-lt);white-space:nowrap;font-size:1.3rem}
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
  margin-top:clamp(2rem,1.6rem + 2vw,3.2rem);border-top:1px solid var(--rule)}
.four div{padding:clamp(1.5rem,1.2rem + 1.2vw,2.3rem) clamp(1rem,1vw + .6rem,1.9rem);
  border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.four div:first-child{border-left:0;padding-left:0}
.four b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);color:var(--cream-2);margin-bottom:.6rem}
.four span{display:block;color:var(--sand);font-size:1rem;line-height:1.66}
@media(max-width:780px){.four div{border-left:0;padding-left:0}}

/* ══════════════════════════════════════════════════════════════════
   CARRIED-OVER PAGES — the old teal tokens, pointed at the garden
   palette. 47 pages came across from the previous site still asking
   for --night, --turq, --space-3 and so on. Rather than rewrite
   47 files of his prose, the old names now resolve here.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --night:var(--bg); --night-2:var(--bg-2); --night-3:var(--bg-3);
  --bone:var(--cream); --bone-2:var(--cream-2); --silver:var(--sand);
  --amber:var(--gold); --amber-soft:var(--gold); --turq:var(--clay-lt);
  --earth:var(--clay); --forest:var(--bg-2);
  --ink-soft:var(--sand);
  --bg-panel:var(--bg-2); --surface:var(--bg-3);
  --text:var(--cream); --text-muted:var(--sand);
  --accent:var(--clay); --accent-ink:var(--on-clay);

  --font-display:var(--display);
  --font-body:var(--body);

  --step--1:var(--t-small); --step-0:var(--t-body); --step-1:var(--t-h3);
  --step-2:var(--t-h3); --step-3:var(--t-h2); --step-4:var(--t-h1);
  --step-5:var(--t-hero);

  --space-1:.5rem; --space-2:1rem; --space-3:1.6rem;
  --space-4:2.5rem; --space-5:4rem;
  --content:var(--max); --radius:2px; --radius-lg:3px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.5s;
}