/* Sacred Mystery Teachings — site styles
   Homepage: design D, stars version (11/01/2026): night above, one gold thread
   down the page, the only liquid gold at the bottom.
   Colors from the brand guide (10/25/2026, v3 11/01/2026). Gold on black only. */

@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --gold:#D9B45A;      /* names, ring, headings — 10.6:1 on black */
  --gold-hi:#F0D38A;   /* hover */
  --muted:#A69267;     /* small print, labels — 6.9:1 */
  --pale:#C9BD9B;      /* body text — 11.2:1 */
  --bright:#F1E6C8;    /* the lit tip of the thread, bright stars */
  --black:#000;
  --glow:#18140C;      /* soft background glow (the banners') */
  --line:rgba(217,180,90,.3);
  --display:"Cinzel",Georgia,serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --thread-glow:0 0 8px 1px rgba(217,180,90,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Never wider than the screen, even mid-animation */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  margin:0;background:var(--black);color:var(--pale);
  font-family:var(--body);font-size:1.1875rem;line-height:1.65;
  background-image:radial-gradient(ellipse 90% 60% at 50% 0%,#1E180D 0%,#0A0805 45%,#000 80%);
  background-repeat:no-repeat;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}
h1,h2,h3{text-wrap:balance;font-family:var(--display);font-weight:500;color:var(--gold);letter-spacing:.05em;line-height:1.2;margin:0}
p{margin:0}

.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--gold);color:#000;padding:10px 16px;border-radius:4px;font-family:var(--display);text-decoration:none}
.skip:focus{left:16px}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.eyebrow{font-family:var(--display);font-size:.82rem;letter-spacing:.22em;color:var(--muted)}

/* ---------- Hover line: a fine gold line grows under a link ---------- */
.hl{text-decoration:none;background:linear-gradient(currentColor,currentColor) left calc(100% - 8px)/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.hl:hover,.hl:focus-visible{background-size:100% 1px}
p .hl,.signup-fine .hl{background-position:left bottom}
@media (prefers-reduced-motion:reduce){.hl{transition:none}}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:5}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand img{width:44px;height:44px}
.brand span{font-family:var(--display);font-size:1rem;letter-spacing:.12em;color:var(--gold)}
.nav{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;font-family:var(--display);font-size:.95rem;letter-spacing:.1em}
.nav>a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.nav a.btn{padding:10px 18px}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
/* the small menu is for phones only */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--gold)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu .bars{display:flex;flex-direction:column;gap:5px;width:20px}
.nav-menu .bars i{display:block;height:1px;background:currentColor}
.nav-menu[open] .bars i:nth-child(2){opacity:0}
.nav-menu-list{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;display:flex;flex-direction:column;padding:8px 20px;background:#000;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,.7)}
.nav-menu-list a{padding:12px 0;min-height:44px;display:flex;align-items:center;background-position:left calc(100% - 10px)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:4px;
  font-family:var(--display);font-weight:500;font-size:.9rem;letter-spacing:.12em;text-decoration:none;cursor:pointer;text-align:center;
  border:1px solid var(--gold);color:var(--gold);background:transparent;
  transition:background-color .2s ease-out,box-shadow .2s ease-out,color .2s ease-out}
.btn-solid{background:var(--gold);color:#000;font-weight:600}
.btn-sm{min-height:44px;padding:10px 18px;font-size:.82rem}
@media (hover:hover){
  .btn:hover{background-color:rgba(217,180,90,.14);box-shadow:0 0 24px rgba(217,180,90,.22);color:var(--gold-hi)}
  .btn-solid:hover{background-color:#E6C574;color:#000;box-shadow:0 0 28px rgba(217,180,90,.35)}
}

/* ---------- Ornaments: fading hairline and diamond rule ---------- */
.hairline{height:1px;width:min(220px,60%);margin:0 auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.diamond-rule{display:flex;align-items:center;gap:12px;width:min(320px,80%);margin:0 auto;color:var(--gold)}
.diamond-rule::before,.diamond-rule::after{content:"";flex:1;height:1px}
.diamond-rule::before{background:linear-gradient(90deg,transparent,var(--gold))}
.diamond-rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.diamond-rule i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ---------- Shared text pieces (other pages use these too) ---------- */
.tagline{font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;color:var(--pale)}
.eyebrow-slogan{font-family:var(--display);font-size:.95rem;letter-spacing:.22em;color:var(--muted);margin-bottom:-8px}
.welcome{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:.1em;color:var(--gold)}
.lede{max-width:620px;font-size:1.3rem;color:var(--pale)}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}

/* ---------- Sections ---------- */
.section{padding:0 0 104px}
.section-title{text-align:center;font-size:clamp(1.6rem,3.4vw,2.1rem);margin-bottom:14px}
.section-sub{text-align:center;color:var(--muted);font-style:italic;margin-bottom:36px}

/* ---------- Video ---------- */
.video{position:relative;aspect-ratio:16/9;border:1px solid rgba(217,180,90,.35);border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#1A150C,#050403 70%)}
.video-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.video-face img.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video-play{position:relative;width:84px;height:84px;border-radius:50%;border:1px solid var(--gold);background:rgba(0,0,0,.55);color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color .2s ease-out,box-shadow .2s ease-out}
@media (hover:hover){.video-play:hover{background:rgba(217,180,90,.16);box-shadow:0 0 28px rgba(217,180,90,.3)}}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-soon .eyebrow{font-size:.9rem}
.video-soon h3{font-size:clamp(1.25rem,3vw,1.75rem)}
.video-soon p{max-width:520px}
.video:has(.video-soon){aspect-ratio:auto;min-height:320px;display:flex}
.video .video-soon{position:relative;inset:auto;flex:1;padding:40px 20px}

/* ---------- Email signup (posts straight to Kit; no third-party script) ---------- */
.signup-box{text-align:center;margin-top:28px}
.signup-box>p:first-child{margin:0 auto 20px;max-width:560px}
.signup-box .signup-fine{margin:14px auto 0;font-size:.9rem;color:var(--muted)}
.signup-box .signup-fine a{color:var(--gold)}
.signup-box .fine-credit{margin-top:6px}
.signup-box .fine-credit a{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.signup{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:540px;margin:0 auto}
.signup-input{flex:1 1 260px;min-height:48px;padding:12px 16px;background:#0b0905;border:1px solid var(--line);border-radius:4px;
  color:var(--pale);font-family:var(--body);font-size:1.05rem}
.signup-input::placeholder{color:var(--muted);opacity:1}
.signup-input:focus{border-color:var(--gold)}
.fine-credit{font-size:.85rem;color:var(--muted)}
.fine-credit a{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{position:relative;padding:44px 0 52px;text-align:center;color:var(--muted);font-size:1rem;background:#000}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.site-footer .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.site-footer img{width:300px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;font-family:var(--display);font-size:.9rem;letter-spacing:.12em}
.footer-nav a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.legal-nav a{color:var(--muted)}
.legal-nav a:hover{color:var(--gold)}
.fine{max-width:640px;font-size:.95rem}

/* ---------- Policy pages ---------- */
.doc{padding:48px 0 88px}
.doc h1{font-size:clamp(1.8rem,4.4vw,2.5rem);margin-bottom:12px;text-align:center}
.doc .hairline{margin-bottom:36px}
.doc h2{font-size:1.2rem;letter-spacing:.06em;margin:36px 0 10px}
.doc p,.doc li{color:var(--pale)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc strong{color:#E4D9BB;font-weight:500}
.doc .summary{margin:0 0 8px;padding:18px 22px 6px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:4px;background:rgba(217,180,90,.04)}
.doc .summary h2{margin-top:0}
.doc-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.doc .doc-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}

/* =====================================================================
   HOMEPAGE (body.home)
   ===================================================================== */
.home{
  background-image:none;
  --hero-pb:clamp(112px,15vh,160px); /* hero bottom padding; the thread starts 44px under the buttons */
  --seed-y:44px;
  --thread-x:50%;
  --pool-pt:110px;                   /* pool top padding; the thread ends in the tree below it */
  --tree:150px;
  --u:80px;                          /* one unit of the Tree of Life drawing (Kether to Malkuth is 8 units) */
}
/* the header sits on the hero's night sky */
.home .site-header{position:absolute;top:0;left:0;right:0}
.home .site-header::after{opacity:.6}

/* ---------- Hero: logo, headline, cheat sheet button on the brand black ---------- */
.hero{position:relative;overflow:hidden;text-align:center;
  padding:calc(76px + clamp(28px,7vh,96px)) 0 var(--hero-pb);
  background:#000}
.hero .stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:900px}
.hero-lockup{width:min(560px,88%);height:auto;aspect-ratio:1124/278}
.hero h1{font-size:clamp(2rem,4.3vw,3.6rem);line-height:1.13;letter-spacing:.04em;max-width:15em;margin-top:4px}
.hero-answer{font-family:var(--display);font-size:clamp(1.45rem,2.6vw,2.05rem);letter-spacing:.1em;color:var(--bright);margin-top:-6px}
.hero .lede{max-width:34em;font-size:1.25rem}
.hero .actions{margin-top:6px}
/* laptops: keep both buttons above the fold */
@media (min-width:721px) and (max-height:820px){
  .hero{padding-top:calc(76px + 18px)}
  .hero .wrap{gap:14px}
  .hero-lockup{width:min(440px,80%)}
  .hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
  .hero .lede{font-size:1.15rem;line-height:1.5}
}
@media (min-width:721px) and (max-height:700px){
  .hero-lockup{width:min(360px,70%)}
  .hero h1{font-size:clamp(1.8rem,3.2vw,2.3rem)}
  .hero .wrap{gap:10px}
}

/* ---------- The thread ---------- */
.run{position:relative}
/* the box is wider and 16px longer than the line so the line's glow fades out softly instead of being cut */
.thread{position:absolute;left:var(--thread-x);width:48px;margin-left:-24px;z-index:1;pointer-events:none;
  top:calc(var(--seed-y) - var(--hero-pb));
  bottom:calc(-1 * (var(--pool-pt) + var(--tree) / 2) - 16px);
  overflow:hidden}
/* the line fades in from the seed: a still overlay, so nothing has to be re-masked while scrolling */
.thread-fade{position:absolute;left:var(--thread-x);width:48px;margin-left:-24px;height:70px;top:calc(var(--seed-y) - var(--hero-pb));z-index:2;pointer-events:none;background:linear-gradient(#000,rgba(0,0,0,0))}
/* the bright tip that pours the line: one light that rides the straight line and the curve alike */
.thread-tip{position:absolute;left:0;top:0;width:10px;height:48px;margin-left:-5px;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  transform-origin:50% 100%;will-change:transform;
  background:radial-gradient(ellipse 50% 16% at 50% 92%,rgba(241,230,200,1),rgba(241,230,200,0)),linear-gradient(rgba(241,230,200,0),rgba(241,230,200,.55) 60%,rgba(241,230,200,.9));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}
.js-motion .thread-tip.on{opacity:1}
/* the line and its glow in one strip: the same layered glow the phone curve is drawn with, so they match exactly */
.thread-line{position:absolute;top:0;bottom:16px;left:13px;width:22px;background:linear-gradient(90deg, rgba(217,180,90,0.015) 0px 2.5px , rgba(217,180,90,0.045) 2.5px 4.5px , rgba(217,180,90,0.0899) 4.5px 6px , rgba(217,180,90,0.14) 6px 7.5px , rgba(217,180,90,0.1899) 7.5px 9px , rgba(217,180,90,0.2198) 9px 10px , var(--gold) 10px 12px , rgba(217,180,90,0.2198) 12px 13px , rgba(217,180,90,0.1899) 13px 14.5px , rgba(217,180,90,0.14) 14.5px 16px , rgba(217,180,90,0.0899) 16px 17.5px , rgba(217,180,90,0.045) 17.5px 19.5px , rgba(217,180,90,0.015) 19.5px 22px);will-change:transform}
/* the falling tip */
.js-motion .thread-line{transform:translateY(-100%)}
/* phones: the line sweeps in one curve onto the tree */
.thread-curve-wrap{display:none;position:absolute;left:0;width:100%;z-index:1;pointer-events:none;
  top:calc(var(--seed-y) - var(--hero-pb));bottom:calc(-1 * (var(--pool-pt) + var(--tree) / 2))}
.thread-curve{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.thread-curve path{fill:none;stroke-linecap:butt}
.thread-curve .c-b{stroke:var(--gold)}
.thread-curve .c-line{stroke:var(--gold);stroke-width:2}
.seed{position:absolute;left:var(--thread-x);top:calc(var(--seed-y) - var(--hero-pb));width:8px;height:8px;margin:-4px 0 0 -4px;z-index:3;pointer-events:none}
.seed b{position:absolute;inset:0;border-radius:50%;background:var(--bright);box-shadow:0 0 12px 4px rgba(217,180,90,.7)}
.seed .ring,.tree .ring{position:absolute;border-radius:50%;border:1px solid var(--gold);opacity:0}
.seed .ring{inset:-10px}
@media (prefers-reduced-motion:no-preference){
  .js-motion .seed b::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 18px 6px rgba(217,180,90,.85);opacity:0;animation:seed-breathe 3.6s ease-in-out infinite}
}
/* the breath fades a ready-made glow in and out (opacity only, cheap on phones) */
@keyframes seed-breathe{0%,100%{opacity:0}50%{opacity:.7}}

/* a black plate the thread passes behind */
.plate{display:table;margin-left:auto;margin-right:auto;background:#000;padding:6px 26px;position:relative;z-index:2}

/* ---------- Start Here: video left, signup right, a lane down the middle ---------- */
.start{padding-top:72px}
.start .section-title{margin-bottom:40px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:150px;row-gap:32px;align-items:start;position:relative;z-index:2}
.start .wrap{max-width:1160px}
.start .video{min-height:340px}
.panel{background:#000;border:1px solid rgba(217,180,90,.35);border-radius:6px;padding:36px 32px;text-align:left;margin:0;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.panel>p:first-child{margin:0 0 22px}
.panel>p.panel-tag{margin:0 0 10px}
.panel>p.panel-tag+p{margin:0 0 22px}
.panel .signup{flex-direction:column;align-items:stretch;max-width:none;gap:10px;margin:0}
.panel .signup-input{flex:0 0 auto}
.panel .signup-fine{margin:16px 0 0}
/* tablets (an iPad held upright): a narrower lane for the thread, so the two boxes and the About
   story keep a readable width; computers and phones are untouched */
@media (min-width:721px) and (max-width:1024px){
  .split{column-gap:80px}
  .panel{padding:28px 24px}
}

/* ---------- Topics: four stops along the thread ---------- */
.topics .section-title{margin-bottom:6px}
.topics .section-sub{margin-bottom:40px;font-size:1.4rem}
.path{list-style:none;margin:0 auto;padding:0;max-width:1100px}
.stop{display:grid;grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);align-items:center;min-height:200px;position:relative}
.stop .node{grid-row:1;grid-column:2;justify-self:center}
.stop-l .stop-text{grid-row:1;grid-column:1;text-align:right;justify-self:end;padding-right:36px}
.stop-r .stop-text{grid-row:1;grid-column:3;text-align:left;justify-self:start;padding-left:36px}
.stop-text{max-width:24em;position:relative;z-index:2;font-size:1.25rem;line-height:1.55}
.stop h3{font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:.06em;margin:4px 0 10px}
.numeral{font-family:var(--display);font-size:.9rem;letter-spacing:.24em;color:var(--muted)}
.soon{margin-top:10px;font-family:var(--display);font-size:.86rem;letter-spacing:.22em;color:var(--muted)}
.node{width:116px;height:116px;border-radius:50%;background:#000;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
}
.node img{width:76px;height:76px}
.node::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 1px var(--gold),0 0 40px 6px rgba(217,180,90,.42);pointer-events:none;transition:opacity .6s var(--ease-out)}
.js-motion .node::after{opacity:0}
.js-motion .node.lit::after{opacity:1}

/* ---------- About: photo left, Christian right ---------- */
.about{padding-top:40px;padding-bottom:120px}
.about .split{align-items:start}
.about .about-text{grid-column:1}
.about h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:22px}
.about-text{min-width:0;background:#000}
/* About: his portrait fills the other column and stays beside the story while you read.
   The fade into black is in the image itself, so there is no frame and no seam. */
.about-photo{grid-column:2;grid-row:1;margin:-58px 0 0;width:100%;max-width:480px;position:sticky;top:clamp(24px,calc(50vh - 300px),150px);z-index:2}
.about-photo picture,.about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5}
/* With motion on it warms up out of the dark once, when it is really on screen (home.js adds .lit). */
.js-motion .about-photo img{opacity:0;transform:scale(1.025);transition:opacity 1.8s cubic-bezier(.25,.1,.25,1),transform 2.4s cubic-bezier(.2,.6,.2,1)}
.js-motion .about-photo.lit img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.about-photo img{transition:none}}
.story{display:flex;flex-direction:column;gap:18px;font-size:1.2rem;margin-bottom:30px}
.story p:first-child::first-letter{font-family:var(--display);color:var(--gold);font-size:3.2em;float:left;line-height:.9;padding:6px 10px 0 0}

/* ---------- The Tree of Life above the logo (the logo is Malkuth) ---------- */
.tree-band{height:calc(8.5 * var(--u) - var(--pool-pt) - var(--tree) / 2 + 40px)}
.tol{position:absolute;left:50%;width:calc(4.4 * var(--u));height:calc(8.5 * var(--u));margin-left:calc(-2.2 * var(--u));
  bottom:calc(-1 * (var(--pool-pt) + var(--tree) / 2));z-index:2;overflow:visible;pointer-events:none}
.tol line{vector-effect:non-scaling-stroke;stroke-linecap:round}
.tol .p{stroke:rgba(217,180,90,.5);stroke-width:1.2}
.tol .pg1{stroke:rgba(217,180,90,.09);stroke-width:5}
.tol .pg2{stroke:rgba(217,180,90,.045);stroke-width:10}
.tol .s{fill:#000;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tol .sg{fill:url(#tol-halo);opacity:1}
.tol [data-s="1"].s{stroke:var(--bright)}
/* Daath: no paths, no fill, a dashed ghost that only stirs as the thread passes through it */
.tol .daath{fill:none;stroke:rgba(217,180,90,.42);stroke-width:1.1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
/* with motion: the Tree waits in the dark and lights as the thread comes down it */
.js-motion .tol .p{stroke:rgba(217,180,90,.13);transition:stroke 1s ease-out .2s}
.js-motion .tol .pg{opacity:0;transition:opacity 1s ease-out .2s}
.js-motion .tol .s{stroke:rgba(217,180,90,.3);transition:stroke .6s ease-out}
.js-motion .tol .sg{opacity:0;transition:opacity .9s ease-out}
.js-motion .tol .p.lit{stroke:rgba(217,180,90,.5)}
.js-motion .tol .pg.lit,.js-motion .tol .sg.lit{opacity:1}
.js-motion .tol .s.lit{stroke:var(--gold)}
.js-motion .tol [data-s="1"].s.lit{stroke:var(--bright)}
.js-motion .tol .daath{stroke:rgba(217,180,90,.22)}
.js-motion .tol .daath.stir{animation:daath-stir 2.4s ease-in-out}
@keyframes daath-stir{0%,100%{stroke:rgba(217,180,90,.22)}40%{stroke:rgba(241,230,200,.75)}}
/* the Lightning Flash: the right-hand sphere of each pair lights a moment before the left */
.js-motion .tol .l.lit{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.tol *{transition:none!important;animation:none!important}}

/* ---------- The bottom: the tree, the only liquid gold, the second signup ---------- */
.pool{position:relative;overflow:hidden;padding:var(--pool-pt) 0 clamp(220px,30vh,320px);text-align:center;background:#000}
.pool-gold{position:absolute;inset:0;z-index:0;pointer-events:none}
.pool-gold img,.pool-gold canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pool-gold canvas{opacity:0;transition:opacity 1.2s ease-out}
.pool-gold canvas.on{opacity:1}
/* a soft darkness behind the words so they stay readable */
.pool::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 50% 46%,rgba(0,0,0,.9),rgba(0,0,0,.55) 60%,transparent 100%)}
.pool-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.tree{position:relative;width:var(--tree);height:var(--tree);margin-bottom:6px}
.tree img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;background:#000}
.tree .ring{inset:0;z-index:1}
/* the bloom lives behind the mark, never on it */
.tree::before{content:"";position:absolute;inset:-70px;border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(217,180,90,.42),rgba(217,180,90,.12) 45%,transparent 68%);opacity:1;transition:opacity 1.4s ease-out}
.js-motion .tree::before{opacity:0}
.js-motion .tree.lit::before{opacity:1}
.pool h2{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:.08em}
.pool-line{max-width:30em;font-size:1.25rem}
.pool-form{width:min(620px,100%);padding:20px;background:rgba(0,0,0,.84);border:1px solid rgba(217,180,90,.45);border-radius:6px}
.pool-form .signup{max-width:none}
.pool-form .signup label{width:100%;text-align:left}
.pool-form .signup-fine{margin-top:12px;font-size:.9rem;color:var(--muted)}

/* ---------- Homepage on phones: one line down the left edge ---------- */
@media (max-width:720px){
  .home{--thread-x:28px;--hero-pb:96px;--seed-y:40px;--pool-pt:100px;--tree:128px;--u:60px}
  .hero{padding-top:calc(64px + 14px)}
  .hero .wrap{gap:12px}
  .hero-lockup{width:min(300px,86%)}
  .hero h1{font-size:clamp(1.55rem,6.9vw,1.85rem);margin-top:2px}
  .hero-answer{font-size:1.4rem;margin-top:-4px}
  .hero .lede{font-size:1.06rem;line-height:1.48}
  .hero .actions{width:100%;gap:10px;margin-top:2px}
  .hero .actions .btn{width:100%;min-height:46px;padding:11px 20px}
  /* everything the thread runs past sits to the right of it */
  .run .wrap{padding-left:56px;padding-right:16px}
  .plate{margin-left:0;padding:4px 0 4px 0;text-align:left;display:block;background:transparent}
  .start{padding-top:48px}
  .start .section-title{margin-bottom:24px}
  .split{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .start .video,.panel{min-height:0}
  .panel{padding:24px 20px}
  .topics .section-sub{margin-bottom:28px;font-size:1.3rem}
  .stop{display:block;min-height:0;padding:22px 0 30px}
  .stop .stop-text{text-align:left;padding:0;max-width:none}
  .stop .node{position:absolute;left:calc(var(--thread-x) - 56px - 22px);top:22px;width:44px;height:44px}
  .node img{width:26px;height:26px}
  .stop h3{font-size:1.7rem;margin:2px 0 8px}
  /* phones: heading first, then his photo, then the story (the text box opens up so its parts can sit around the photo) */
  .about{padding-top:0;padding-bottom:124px}
  .about .split{row-gap:0}
  .about .about-text{display:contents}
  .about h2{order:1;grid-column:1;margin-bottom:0;position:relative;z-index:3}
  .about-photo{order:2;grid-column:1;grid-row:auto;position:static;max-width:400px;margin:-10px 0 4px}
  .about .story{order:3;grid-column:1}
  .about .about-text .btn{order:4;grid-column:1;justify-self:start}
  .story{font-size:1.12rem}
  /* phones: the whole line is one drawn path (no joint between the straight part and the curve) */
  .js .thread-curve-wrap{display:block}
  .js .thread{display:none}
  .thread{bottom:calc(190px + 8 * var(--u) - var(--pool-pt) - var(--tree) / 2 - 16px)}
  .pool{padding-bottom:240px}
  .pool-inner{padding-left:16px;padding-right:16px}
  .pool-line{font-size:1.1rem}
  .pool-form{padding:16px}
  .pool-form .signup-input{flex-basis:100%}
  .pool-form .signup .btn{width:100%}
}

/* ---------- Motion off: everything drawn, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.video-play,.node,.tree::before,.pool-gold canvas{transition:none}
}

/* ---------- Small screens ---------- */
@media (max-width:720px){
  body{font-size:1.125rem}
  .wrap{padding:0 16px}
  .home .run .wrap{padding-left:56px}
  .section{padding-bottom:72px}
  /* one-line header: the emblem, the cheat sheet button and a small menu */
  .site-header .wrap{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .nav{flex-wrap:nowrap;gap:0 4px}
  .nav>.nav-link{display:none}
  .nav-menu{display:block}
  .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .eyebrow-slogan{font-size:.86rem;letter-spacing:.12em;white-space:nowrap;margin-bottom:-6px}
}
@media (max-width:350px){
  .nav .btn-sm{padding:8px 12px;font-size:.74rem;white-space:nowrap}
}

/* ---------- /links page (link-in-bio) ---------- */
.links-page{padding:40px 0 72px}
.links-page .wrap{max-width:520px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.links-page .links-emblem{width:96px}
.links-page h1{font-size:clamp(1.35rem,5vw,1.7rem);letter-spacing:.1em}
.links-list{list-style:none;margin:10px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:12px}
.links-list .btn{width:100%}
.links-page .signup-box{width:100%;margin-top:18px}
.links-social{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:18px;font-family:var(--display);font-size:.85rem;letter-spacing:.1em}
.links-social a{text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
/* phones: the field and the button each take the full width, as the homepage's bottom form does */
@media (max-width:720px){
  .links-page .signup-input{flex-basis:100%}
  .links-page .signup .btn{width:100%}
}

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- Free gift page: /hidden-map/ (11/03/2026) ---------- */
@font-face{font-family:"Frank Ruhl Libre";src:url(/assets/fonts/frank-ruhl-libre-hebrew-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
.gift [lang="he"]{font-family:"Frank Ruhl Libre",var(--body)}
.gift-page{background-image:none}
.gift-top{text-align:center}
.gift-top .welcome{margin:-2px 0 14px}
.gift-lede{max-width:34em;margin:0 auto 26px}
.gift-downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px}
.gift-downloads p{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.gift-file{font-size:.9rem;color:var(--muted)}
.gift-map{padding-top:76px;max-width:900px}
.gift-map .gift-intro{max-width:36em;margin:0 auto 10px;text-align:center}
.gift-map svg.map{width:100%;max-width:720px;margin:0 auto}
.map .ring{fill:none;stroke:#55451F;stroke-width:1}
.map .ring.faint{stroke-dasharray:2 4}
.map .lb{fill:#000}
.map .nd{fill:#000;stroke:var(--gold);stroke-width:1.1}
.map .he{font-family:"Frank Ruhl Libre",var(--body);font-size:22px;font-weight:500;fill:var(--gold);text-anchor:middle}
.map .nm{font-family:var(--display);font-size:12.6px;font-weight:500;letter-spacing:.04em;fill:var(--pale);text-anchor:middle}
.map .at{font-family:var(--body);font-style:italic;font-size:13.4px;fill:var(--muted);text-anchor:middle}
.gift-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin:18px auto 22px;text-align:center}
.gift-legend h3{font-size:1.05rem;letter-spacing:.12em;margin-bottom:6px}
.gift-legend p{font-size:1.05rem;line-height:1.5;margin:0 auto;max-width:21em;text-align:center}
.gift-map .gift-key{max-width:36em;margin:0 auto 30px;text-align:center;font-style:italic;color:var(--muted)}
.gift-fold{max-width:760px;margin:0 auto 14px;border:1px solid var(--line);border-radius:4px;padding:0 20px}
.gift-fold summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-family:var(--display);letter-spacing:.08em;color:var(--gold)}
.gift-fold[open] summary{margin-bottom:6px}
.gift-fold>p{padding-bottom:18px}
.gift-lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;padding-bottom:18px}
.gift-lists h3{font-size:.95rem;letter-spacing:.08em;margin-bottom:8px}
.gift-lists{text-align:center}
.gift-lists ul{list-style:none;margin:0;padding:0}
.gift-lists li{margin:0 0 8px;line-height:1.35}
.gift-lists .he{color:var(--gold);display:inline-block;margin-right:.35em}
.gift-lists .at{display:block;font-style:italic;color:var(--muted);font-size:.95rem}
.gift-next{text-align:center;padding-top:64px}
.gift-next .hairline{margin-bottom:28px}
.gift-close{margin-top:30px}
.gift-next .doc-foot{text-align:center}
@media (max-width:720px){
  .gift-legend,.gift-lists{grid-template-columns:1fr}
  .gift-map{padding-top:56px}
}