/* JCOACH design system v2 — EDITORIAL LUXURY.
   Operator direction 2026-08-30: "vastly more visual, enterprise grade, opulent,
   very rich, luxurious."

   THE RESOLUTION, stated so a later session does not flatten it back:
   opulence lives in the ARCHITECTURE (heroes, bands, rules, ornament, scale,
   the dark furniture) and restraint lives in the READING COLUMN. The highest
   paying cohort reads restraint as cheap. The most vulnerable cohort reads
   decoration-over-text as untrustworthy. Both are satisfied by putting the
   luxury in the frame and the clarity in the body, never by compromising to a
   middle that serves neither. */

/* ============================================================== TOKENS */
:root{
  /* grounds */
  --ink:#100E0C;
  --ink-2:#191512;
  --ink-3:#241E19;
  --cream:#FAF6EE;
  --cream-2:#F3EDE1;
  --paper:#FFFFFF;

  /* metal */
  --gold:#C2A15C;
  --gold-lt:#E4CD98;
  --gold-dk:#8F7436;
  --gold-grad:linear-gradient(100deg,#8F7436 0%,#E4CD98 32%,#C2A15C 55%,#F0DEB4 78%,#A98A45 100%);

  /* accent */
  --jade:#1F4038;
  --jade-lt:#2E5A4C;
  --jade-wash:#EAF0EC;
  --rose:#B9836A;

  /* text */
  --on-dark:#EFE7DA;
  --on-dark-soft:#B6AA98;
  --on-light:#171310;
  --on-light-soft:#5A5147;
  --on-light-faint:#8C8175;

  --line-dk:rgba(226,205,152,.20);
  --line-lt:#E3D9C8;

  --maxw:78rem;
  --readw:40rem;
  --r:2px;             /* luxury reads as sharp, not rounded */
  --r-lg:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--on-light);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.72;font-weight:380;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ============================================================== TYPE */
h1,h2,h3,h4,.display{
  font-family:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  font-weight:500;line-height:1.06;letter-spacing:-.005em;margin:0 0 .45em;
}
h1{font-size:clamp(2.9rem,1.7rem + 4.6vw,5.6rem);font-weight:400}
h2{font-size:clamp(2rem,1.5rem + 1.9vw,3.1rem);margin-top:2.1em;font-weight:400}
h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);margin-top:1.9em;font-weight:600;letter-spacing:0}
h4{font-size:1.15rem;font-weight:600}
p{margin:0 0 1.15em}
a{color:var(--jade);text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .25s var(--ease),color .2s}
a:hover{color:var(--gold-dk)}
strong{font-weight:640}
em{font-style:italic}
ul,ol{margin:0 0 1.3em;padding-left:1.3em}
li{margin:.45em 0}
ol{counter-reset:none}

/* eyebrow / kicker: wide-tracked small caps in gold. The luxury tell. */
.kicker,.eyebrow{
  font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dk);
  margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem;
}
.kicker::after,.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold) 0%,transparent 100%);opacity:.55;max-width:9rem}
.on-dark .kicker,.band-dark .kicker,.on-dark .eyebrow,.band-dark .eyebrow{color:var(--gold-lt)}

.lede{font-size:clamp(1.1rem,1rem + .45vw,1.32rem);line-height:1.62;color:var(--on-light-soft);font-weight:380;max-width:36rem}
.band-dark .lede,.on-dark .lede{color:var(--on-dark-soft)}

/* ============================================================== LAYOUT */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
@media(max-width:640px){.wrap{padding:0 1.25rem}}
.read{max-width:var(--readw)}
.read-wide{max-width:44rem}
.center{text-align:center}
.mt0{margin-top:0}
.small{font-size:.9rem;color:var(--on-light-soft)}

/* ============================================================== GRAIN */
/* A near-invisible film grain over the dark bands. This is most of what
   separates "dark website" from "expensive dark website". */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================== BANNER */
.provisional{
  background:var(--ink);color:var(--gold-lt);font-size:.76rem;letter-spacing:.06em;
  text-align:center;padding:.6rem 1rem;line-height:1.5;
  border-bottom:1px solid var(--line-dk);position:relative;z-index:60;
}
.provisional strong{color:#fff;font-weight:600}

/* ============================================================== HEADER */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(16,14,12,.86);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line-dk);
}
.site-head .wrap{display:flex;align-items:center;gap:2rem;min-height:78px}
.brand{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.6rem;font-weight:500;
  letter-spacing:.02em;color:var(--on-dark);background:none;padding:0;white-space:nowrap;
}
.brand:hover{color:#fff}
.brand span{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav{margin-left:auto;display:flex;gap:1.75rem;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--on-dark-soft);font-size:.82rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;background:none;padding-bottom:2px;position:relative;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold);transition:right .3s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold-lt)}
.nav a:hover::after,.nav a[aria-current=page]::after{right:0}
.nav .btn{color:var(--ink)}
.nav .btn::after{display:none}
@media(max-width:940px){
  .site-head .wrap{flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem;min-height:0;gap:1rem}
  .nav{margin-left:0;width:100%;gap:1.1rem;justify-content:flex-start}
  .nav a{font-size:.74rem}
}

/* ============================================================== BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--gold-grad);
  color:var(--ink);padding:.85rem 1.7rem;border-radius:999px;font-weight:600;
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  border:0;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;
  box-shadow:0 2px 20px rgba(194,161,92,.22);background-size:200% 100%;background-position:0 0;
}
.btn:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 34px rgba(194,161,92,.34);background-position:100% 0}
.btn-ghost{
  background:transparent;color:var(--gold-lt);border:1px solid var(--line-dk);box-shadow:none;
}
.btn-ghost:hover{background:rgba(226,205,152,.09);color:var(--gold-lt);box-shadow:none}
.on-light .btn-ghost,.band-cream .btn-ghost{color:var(--jade);border-color:var(--line-lt)}
.on-light .btn-ghost:hover,.band-cream .btn-ghost:hover{background:var(--jade-wash);color:var(--jade)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin:2.2rem 0 1.4rem;align-items:center}

/* ============================================================== BANDS */
.band{padding:6rem 0;position:relative}
@media(max-width:760px){.band{padding:3.75rem 0}}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper)}
.band-alt{background:var(--cream-2)}
.band-dark{background:var(--ink);color:var(--on-dark)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--on-dark)}
.band-dark a{color:var(--gold-lt)}
.band-jade{background:var(--jade);color:var(--on-dark)}
.band-jade h2,.band-jade h3{color:#fff}
.band-dark .wrap,.band-jade .wrap{position:relative;z-index:1}

/* hairline rule with a gold gradient */
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-lt) 50%,var(--gold) 78%,transparent);opacity:.5}
hr{height:1px;border:0;margin:3.5rem 0;background:linear-gradient(90deg,var(--line-lt),transparent)}

/* ornamental diamond divider */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:3.5rem 0;opacity:.85}
.ornament::before,.ornament::after{content:"";height:1px;flex:1;max-width:11rem;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament i{width:7px;height:7px;transform:rotate(45deg);background:var(--gold-grad);display:block}

/* ============================================================== HERO */
.hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;padding:7.5rem 0 6.5rem}
@media(max-width:860px){.hero{padding:4rem 0 3.5rem}}
.hero-art{position:absolute;inset:0;z-index:0;opacity:.9}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:2.75rem}}
.hero h1{margin-bottom:.35em}
.hero h1 .gild{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-style:italic;
}
.hero-sub{color:var(--on-dark-soft);max-width:33rem;font-size:1.16rem;line-height:1.62}
.hero-note{color:var(--on-dark-soft);font-size:.87rem;max-width:31rem;opacity:.82}

/* portrait frame: double gold keyline, the classic luxury device */
.portrait{
  position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#241E19,#12100D 60%);
  border:1px solid var(--line-dk);display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;color:var(--on-dark-soft);font-size:.86rem;
  padding:2rem;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.portrait::before{content:"";position:absolute;inset:12px;border:1px solid var(--line-dk);pointer-events:none}
.portrait::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(226,205,152,.10),transparent 65%);pointer-events:none}

/* ============================================================== STAT STRIP */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:2.4rem 1.6rem;border-right:1px solid var(--line-dk);text-align:center}
.stat:last-child{border-right:0}
@media(max-width:860px){.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-dk)}}
.stat .n{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2.6rem,2rem + 1.8vw,3.7rem);
  line-height:1;font-weight:400;display:block;margin-bottom:.5rem;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat .l{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-soft);line-height:1.5}
.band-cream .stat,.band-paper .stat{border-color:var(--line-lt)}
.band-cream .stat .l,.band-paper .stat .l{color:var(--on-light-faint)}
.band-cream .stats,.band-paper .stats{border-color:var(--line-lt)}

/* ============================================================== CARDS */
.grid{display:grid;gap:1.6rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line-lt);padding:2.2rem 2rem;
  position:relative;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card h3{margin-top:0;font-size:1.32rem}
.card p{font-size:.98rem;color:var(--on-light-soft);margin-bottom:0}
.card p+p{margin-top:.9em}
a.card{display:block}
a.card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -28px rgba(16,14,12,.34);border-color:var(--gold)}
a.card:hover::before{transform:scaleX(1)}
a.card h3{color:var(--on-light)}
a.card .more{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-dk);font-weight:600;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;margin-top:1.4rem}
a.card:hover .more{color:var(--jade)}

.band-dark .card{background:var(--ink-2);border-color:var(--line-dk)}
.band-dark .card h3,.band-dark a.card h3{color:var(--on-dark)}
.band-dark .card p{color:var(--on-dark-soft)}
.band-dark a.card:hover{border-color:var(--gold);box-shadow:0 26px 60px -28px rgba(0,0,0,.8)}

/* numbered feature card */
.card .num{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:2.6rem;line-height:1;display:block;
  margin-bottom:1rem;color:var(--line-lt);font-weight:400;
}
.band-dark .card .num{color:rgba(226,205,152,.28)}

/* cohort card with icon */
.icon-card .ico{margin-bottom:1.4rem;display:block}
.icon-card .ico svg{width:44px;height:44px}

/* ============================================================== ANSWER */
.answer{
  position:relative;background:var(--ink);color:var(--on-dark);
  padding:2.4rem 2.6rem;margin:0 0 3rem;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(16,14,12,.55);
}
.answer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-grad)}
.answer p{color:var(--on-dark);font-size:1.06rem;line-height:1.66}
.answer p:last-child{margin-bottom:0}
.answer strong{color:#fff}
.answer .answer-label{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  margin:0 0 1rem;color:var(--gold-lt);
}
@media(max-width:640px){.answer{padding:1.8rem 1.5rem}}

/* ============================================================== QUOTE */
.quote{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.75rem,1.3rem + 1.9vw,2.85rem);line-height:1.22;font-weight:400;
  font-style:italic;color:var(--on-light);margin:3.5rem 0;max-width:38rem;position:relative;
  padding-left:3.2rem;
}
.quote::before{
  content:"\201C";position:absolute;left:0;top:-.16em;font-size:5.4rem;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.quote cite{
  display:block;font-family:Inter,sans-serif;font-size:.74rem;font-style:normal;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-faint);margin-top:1.5rem;
}
.band-dark .quote,.band-jade .quote{color:var(--on-dark)}
.band-dark .quote cite,.band-jade .quote cite{color:var(--on-dark-soft)}

/* ============================================================== NOTICE */
.notice{
  background:var(--paper);border:1px solid var(--line-lt);border-left:3px solid var(--gold);
  padding:2rem 2.2rem;margin:2.8rem 0;
}
.notice h3{margin-top:0;font-size:1.25rem}
.notice p:last-child{margin-bottom:0}
.notice.urgent{border-left-color:var(--rose);background:#FDF6F2}

/* ============================================================== STEPS */
.steps{counter-reset:s;list-style:none;padding:0;margin:3rem 0}
.steps li{counter-increment:s;position:relative;padding-left:5rem;margin:0 0 2.6rem}
.steps li::before{
  content:"0" counter(s);position:absolute;left:0;top:-.3rem;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:2.5rem;line-height:1;font-weight:400;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.steps li::after{content:"";position:absolute;left:1.15rem;top:2.7rem;bottom:-2.1rem;width:1px;background:linear-gradient(180deg,var(--line-lt),transparent)}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 .35rem;font-size:1.28rem}
.steps p{margin:0;color:var(--on-light-soft)}
.band-dark .steps p{color:var(--on-dark-soft)}
.band-dark .steps li::after{background:linear-gradient(180deg,var(--line-dk),transparent)}

/* ============================================================== TABLE */
.table-wrap{overflow-x:auto;margin:2.4rem 0;border:1px solid var(--line-lt);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:32rem}
th,td{text-align:left;padding:1.05rem 1.3rem;border-bottom:1px solid var(--line-lt);vertical-align:top}
th{
  font-family:Inter,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:var(--cream-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
td:first-child{font-weight:520}

/* ============================================================== FAQ */
.faq{margin:2.6rem 0;border-top:1px solid var(--line-lt)}
.faq details{border-bottom:1px solid var(--line-lt)}
.faq summary{
  cursor:pointer;padding:1.5rem 2.5rem 1.5rem 0;list-style:none;position:relative;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;font-weight:500;
  transition:color .2s;
}
.faq summary:hover{color:var(--gold-dk)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:2rem;width:11px;height:11px;
  border-right:1px solid var(--gold-dk);border-bottom:1px solid var(--gold-dk);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:2.35rem}
.faq .faq-body{padding:0 3rem 1.7rem 0;color:var(--on-light-soft)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ============================================================== PRICE */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-lt);background:var(--paper)}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.price{padding:3rem 2rem;text-align:center;border-right:1px solid var(--line-lt);position:relative}
.price:last-child{border-right:0}
@media(max-width:820px){.price{border-right:0;border-bottom:1px solid var(--line-lt)}.price:last-child{border-bottom:0}}
.price .per,.price .note{color:var(--on-light-soft)}
.band-dark .price-grid{border-color:var(--line-dk);background:transparent}
.band-dark .price{border-color:var(--line-dk)}
.band-dark .price .per,.band-dark .price .note{color:var(--on-dark-soft)}
.price .amt{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(3.2rem,2.4rem + 2.4vw,4.6rem);
  font-weight:400;line-height:1;display:block;margin:.7rem 0 .5rem;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.price .per{color:var(--on-dark-soft);font-size:.74rem;letter-spacing:.19em;text-transform:uppercase}
.price .note{color:var(--on-dark-soft);font-size:.92rem;margin-top:1.4rem;line-height:1.6}
.price.featured{background:linear-gradient(170deg,rgba(226,205,152,.09),transparent 70%)}
.price .tag{position:absolute;top:1.1rem;left:50%;transform:translateX(-50%)}

/* ============================================================== TAGS */
.tag{
  display:inline-block;border:1px solid var(--gold);color:var(--gold-dk);
  padding:.28rem .95rem;font-size:.66rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
}
.band-dark .tag,.band-jade .tag{color:var(--gold-lt)}
.ph{
  display:inline-block;border:1px dashed var(--rose);color:var(--rose);
  padding:.1rem .55rem;font-size:.76rem;font-weight:600;letter-spacing:.06em;
  background:rgba(185,131,106,.06);
}
.band-dark .ph{color:#D9A98F;border-color:#8C5E48;background:rgba(185,131,106,.1)}

/* ============================================================== LISTS */
.list-plain{list-style:none;padding:0}
.list-plain li{padding-left:2rem;position:relative;margin:.85em 0}
.list-plain li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;transform:rotate(45deg);
  background:var(--gold-grad);
}
.band-dark .list-plain li{color:var(--on-dark-soft)}

/* ============================================================== CHAPTER RAIL */
.article-shell{display:grid;grid-template-columns:1fr minmax(0,44rem) 1fr;gap:3rem;align-items:start}
@media(max-width:1180px){.article-shell{grid-template-columns:1fr;gap:0}.rail{display:none}}
.rail{position:sticky;top:8.5rem;font-size:.82rem;border-left:1px solid var(--line-lt);padding-left:1.4rem;max-width:15rem}
.rail .rail-label{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);font-weight:600;margin-bottom:1rem}
.rail a{display:block;color:var(--on-light-faint);padding:.4rem 0;background:none;line-height:1.4}
.rail a:hover,.rail a.on{color:var(--jade)}
.rail a.on{font-weight:600}
.article-shell>.spacer{}

/* ============================================================== CRUMBS */
.crumbs{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-light-faint);margin:0 0 2rem;font-weight:500}
.crumbs a{color:var(--on-light-faint);background:none}
.crumbs a:hover{color:var(--gold-dk)}
.page-head{background:var(--ink);color:var(--on-dark);padding:5.5rem 0 4.5rem;position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:1}
.page-head .crumbs{color:var(--on-dark-soft)}
.page-head .crumbs a{color:var(--on-dark-soft)}
.page-head .crumbs a:hover{color:var(--gold-lt)}
.page-head h1{color:var(--on-dark);max-width:22ch}
.page-head .lede{color:var(--on-dark-soft)}
@media(max-width:760px){.page-head{padding:3rem 0 2.5rem}}

/* ============================================================== FOOTER */
.site-foot{background:var(--ink);color:var(--on-dark-soft);padding:5.5rem 0 2.5rem;position:relative;overflow:hidden;font-size:.94rem}
.site-foot .wrap{position:relative;z-index:1}
.site-foot a{color:var(--on-dark-soft);background:none}
.site-foot a:hover{color:var(--gold-lt)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;padding-bottom:3.5rem}
@media(max-width:860px){.foot-top{grid-template-columns:1fr;gap:2.5rem}}
.foot-brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.4rem;color:var(--on-dark);line-height:1;margin-bottom:1.2rem}
.foot-brand span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot-top h4{color:var(--gold-lt);font-family:Inter,sans-serif;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-bottom:1.3rem}
.foot-top ul{list-style:none;padding:0;margin:0}
.foot-top li{margin:.65em 0}
.legal{border-top:1px solid var(--line-dk);padding-top:2rem;font-size:.82rem;color:#8A7F71;line-height:1.7;max-width:60rem}
.legal strong{color:var(--on-dark-soft)}

/* ============================================================== FORM */
.form{background:var(--paper);border:1px solid var(--line-lt);padding:2.8rem;max-width:36rem;box-shadow:0 30px 70px -40px rgba(16,14,12,.3)}
.field{margin:0 0 1.5rem}
.field label{display:block;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.55rem;color:var(--ink)}
.field .hint{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--on-light-faint);font-size:.85rem;margin-top:.3rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line-lt);border-radius:0;
  font:inherit;font-size:.98rem;background:var(--cream);color:var(--on-light);transition:.2s;
}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(194,161,92,.14)}

/* ============================================================== REVEAL */
/* Progressive enhancement only. Without JS everything is visible, which is what
   a crawler and a screen reader get. */
.js [data-reveal]{opacity:0;transform:translateY(22px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================ OVERRIDES */
/* ★ .nav a and .site-foot a are (0,1,1) and .btn is (0,1,0), so the context
   link resets were WINNING over the button and painting the primary CTA flat
   black-on-black in the sticky header and the footer. Caught eyes-on, not by
   any check: nothing in the build can see a contrast failure.
   Fixed by specificity, not by !important, so the cascade stays legible. */
.nav a.btn,.site-foot a.btn,.band-dark a.btn,a.btn{
  background-image:var(--gold-grad);background-color:transparent;
  background-size:200% 100%;background-position:0 0;background-repeat:no-repeat;
  color:var(--ink);
}
.nav a.btn:hover,.site-foot a.btn:hover,.band-dark a.btn:hover,a.btn:hover{
  background-position:100% 0;color:var(--ink);
}
.nav a.btn-ghost,.site-foot a.btn-ghost,.band-dark a.btn-ghost,a.btn-ghost{
  background-image:none;background-color:transparent;color:var(--gold-lt);
}
.band-cream a.btn-ghost,.band-paper a.btn-ghost,.band-alt a.btn-ghost{color:var(--jade)}
.band-cream a.btn-ghost:hover,.band-paper a.btn-ghost:hover,.band-alt a.btn-ghost:hover{background-color:var(--jade-wash);color:var(--jade)}

/* The hero rings were crossing the headline. A scrim behind the text column
   keeps the artwork and keeps the type readable, which is the whole brief:
   opulent frame, legible content. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(16,14,12,.94) 34%,rgba(16,14,12,.55) 52%,transparent 70%);
}
@media(max-width:940px){
  .hero::after{background:linear-gradient(180deg,rgba(16,14,12,.92) 0%,rgba(16,14,12,.72) 60%,rgba(16,14,12,.45) 100%)}
}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(16,14,12,.9) 40%,transparent 78%);
}

/* ======================================================= LIVING BACKGROUND */
/* Replaces the concentric-ring artwork (operator, 2026-08-31).
   Four empty spans. No images, no libraries, no extra requests.
   Everything animates on transform and opacity ONLY, so it composites on the
   GPU and never triggers layout or paint of the text above it. */

.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.aura span{position:absolute;display:block;border-radius:50%;will-change:transform;backface-visibility:hidden}

/* The three light masses. Different sizes, different speeds, different
   directions, and cycle lengths that share no common factor, so the composition
   never visibly repeats. */
.aura .a1{
  width:60vw;height:60vw;right:-14vw;top:-24vw;filter:blur(90px);opacity:.85;
  background:radial-gradient(circle at 42% 44%,rgba(240,222,180,.42),rgba(194,161,92,.14) 46%,transparent 70%);
  animation:drift-a 41s ease-in-out infinite alternate;
}
.aura .a2{
  width:46vw;height:46vw;left:-12vw;bottom:-20vw;filter:blur(100px);opacity:.7;
  background:radial-gradient(circle at 55% 45%,rgba(184,120,72,.30),rgba(143,116,54,.12) 50%,transparent 72%);
  animation:drift-b 57s ease-in-out infinite alternate;
}
.aura .a3{
  width:38vw;height:38vw;left:38%;top:12%;filter:blur(110px);opacity:.55;
  background:radial-gradient(circle at 50% 50%,rgba(46,90,76,.42),rgba(31,64,56,.16) 52%,transparent 74%);
  animation:drift-c 73s ease-in-out infinite alternate;
}

/* Brushed metal. Hair-fine gold lines panning very slowly across the band.
   Almost subliminal at 3.5% and it is most of the perceived depth. */
.aura .weave{
  inset:-10% -60%;width:auto;height:auto;border-radius:0;opacity:.035;
  background:repeating-linear-gradient(102deg,
    rgba(240,222,180,0) 0px,rgba(240,222,180,.9) 1px,rgba(240,222,180,0) 2px,rgba(240,222,180,0) 9px);
  animation:weave-pan 90s linear infinite;
}

/* The sheen. One slow pass of light across the whole band. This is the single
   most "expensive looking" element and it works because it is rare: a 26 second
   cycle, most of which is off-canvas. */
.aura .sheen{
  left:-60%;top:-30%;width:80%;height:170%;border-radius:0;filter:blur(46px);opacity:.13;
  background:linear-gradient(100deg,transparent 0%,rgba(240,222,180,.10) 34%,rgba(255,246,225,.95) 50%,rgba(240,222,180,.10) 66%,transparent 100%);
  animation:sheen-sweep 26s cubic-bezier(.5,0,.5,1) infinite;
}

@keyframes drift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-7vw,9vh,0) scale(1.16)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  100%{transform:translate3d(9vw,-7vh,0) scale(.9)}
}
@keyframes drift-c{
  0%{transform:translate3d(0,0,0) scale(.92)}
  100%{transform:translate3d(-11vw,6vh,0) scale(1.2)}
}
@keyframes weave-pan{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(9px,0,0)}
}
@keyframes sheen-sweep{
  0%{transform:translate3d(0,0,0) rotate(-6deg)}
  55%,100%{transform:translate3d(230%,0,0) rotate(-6deg)}
}

/* Per-band tuning. The hero gets the full composition; the interior mastheads
   and the footer get a quieter version so the effect stays an event rather than
   a wallpaper. */
.aura-head .a3,.aura-foot .a3{display:none}
.aura-head .sheen{animation-duration:34s;opacity:.10}
.aura-head .a1{width:48vw;height:48vw;top:-20vw;opacity:.7}
.aura-foot .sheen{display:none}
.aura-foot .a1{opacity:.42}
.aura-foot .a2{opacity:.5}
.aura-foot .weave{opacity:.022}

/* Mobile: blur radii this large are the one genuinely expensive part, so the
   composition thins out rather than dropping to nothing. */
@media(max-width:760px){
  .aura .a1{width:100vw;height:100vw;filter:blur(60px)}
  .aura .a2{width:90vw;height:90vw;filter:blur(64px)}
  .aura .a3{display:none}
  .aura .sheen{display:none}
}

/* Non-negotiable. Motion of this kind is genuinely unpleasant for some people,
   and a meaningful share of this site's readers are already dysregulated. */
@media(prefers-reduced-motion:reduce){
  .aura span{animation:none!important}
  .aura .sheen{opacity:.06;transform:translate3d(120%,0,0) rotate(-6deg)}
}

/* `contain:strict` includes SIZE containment, which is a foot-gun on an
   inset-positioned layer. Layout and paint containment give the same isolation
   without the risk of a collapsed box. */
.aura{contain:layout paint}

/* The scrims were tuned against the old ring artwork, which had hard edges that
   crossed the headline. The aura is blurred, so the scrim can be much gentler
   and let the light actually show. */
.hero::after{
  background:linear-gradient(100deg,rgba(16,14,12,.92) 0%,rgba(16,14,12,.72) 30%,rgba(16,14,12,.28) 52%,transparent 74%);
}
@media(max-width:940px){
  .hero::after{background:linear-gradient(180deg,rgba(16,14,12,.86) 0%,rgba(16,14,12,.6) 55%,rgba(16,14,12,.3) 100%)}
}
.page-head::after{
  background:linear-gradient(100deg,rgba(16,14,12,.9) 0%,rgba(16,14,12,.62) 38%,rgba(16,14,12,.2) 66%,transparent 84%);
}

/* ★ Off-screen aura layers are PAUSED. The home page instantiates five of these
   and each carries up to five animated, heavily blurred layers, so left running
   they would burn a laptop battery to animate light nobody is looking at.
   The default is RUNNING and JS adds .idle, never the reverse: with scripting
   off the page is correct rather than frozen. */
.aura.idle span{animation-play-state:paused}