/* ============ Deep Calls 2 Deep University — "Illuminated" ============
   Sacred manuscript: parchment, gold leaf, double gold frame, Cinzel + Cormorant.
   Locked style: projects/dc2d-university/STYLE-DNA.md (direction A). */
:root {
  --parch:#F4EEDF; --parch-2:#EFE6D0; --parch-3:#E7DBBE;
  --ink:#2C2418; --ink-2:#5B4A2E; --accent:#8A6A2C; --line:#C9A45C; --line-soft:rgba(201,164,92,.45);
  --blue:#0068B0; --blue-deep:#0B4A86; --lapis:#082F57; --lapis-2:#0B3D70; --gold:#F0B050; --yellow:#F6C343;
  /* gold leaf, kept dark enough to read on parchment at every point of the light sweep */
  --leaf:linear-gradient(100deg,#6F4E17 0%,#A07324 26%,#C99A42 40%,#DDB35A 46%,#B98D37 54%,#7C5A1C 100%);
  --serif:"Cormorant Garamond", Georgia, serif; --caps:Cinzel, "Trajan Pro", serif; --sans:Mulish, system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(20px,5vw,72px);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; } @supports (overflow:clip) { html { overflow-x:clip; } }
body { margin:0; background:var(--parch); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
/* paper grain over everything */
body::before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width:100%; display:block; }
a { color:inherit; }
.wrap { max-width:1240px; margin:0 auto; padding-inline:var(--pad); position:relative; z-index:2; }
.wrap.narrow { max-width:900px; }
.kicker { font-family:var(--caps); font-weight:600; font-size:13px; letter-spacing:.42em; text-transform:uppercase; color:var(--blue); }
h1, h2, h3 { font-family:var(--serif); font-weight:600; color:var(--ink); margin:0; letter-spacing:.005em; }
h2 { font-size:clamp(40px,5.2vw,76px); line-height:1.02; }
h2 em { font-style:italic; font-weight:500; color:var(--blue); }
.gold { filter:drop-shadow(0 1px 0 rgba(90,60,15,.28)); background:var(--leaf); background-size:250% 100%; background-position:0% 0; -webkit-background-clip:text; background-clip:text; color:transparent; }
.head { margin-bottom:clamp(28px,3.4vw,50px); }
.head h2 { margin-top:14px; }
.lead { font-family:var(--serif); font-style:italic; font-size:clamp(20px,1.8vw,24px); color:var(--ink-2); max-width:52ch; margin:18px 0 0; line-height:1.45; }
section { position:relative; overflow-x:clip; }   /* entrance animations slide in from the sides — never widen the page */
body { overflow-x:clip; }

/* buttons: engraved plates */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; font-family:var(--caps); font-weight:600; font-size:13px; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  color:#FFF8E8; background:var(--blue); border:1px solid var(--blue-deep); border-radius:0; box-shadow:inset 0 0 0 3px var(--blue), inset 0 0 0 4px rgba(246,195,67,.8); transition:background .4s var(--ease), color .4s, box-shadow .4s; }
.btn:hover { background:var(--blue-deep); box-shadow:inset 0 0 0 3px var(--blue-deep), inset 0 0 0 4px var(--yellow); }
.btn.ghost { color:var(--ink); background:transparent; border-color:var(--line); box-shadow:inset 0 0 0 3px var(--parch), inset 0 0 0 4px var(--line-soft); }
.btn.ghost:hover { background:rgba(201,164,92,.12); }

/* double gold frame with corner ornaments */
.frame { position:absolute; inset:clamp(12px,2.2vw,30px); border:1.5px solid var(--line); pointer-events:none; z-index:3; }
.frame::before { content:""; position:absolute; inset:7px; border:.75px solid var(--line); }
.frame .c { position:absolute; width:28px; height:28px; }
.frame .c::before { content:""; position:absolute; inset:0; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 2 Q15.2 12.8 26 14 Q15.2 15.2 14 26 Q12.8 15.2 2 14 Q12.8 12.8 14 2Z' fill='%23C9A45C'/%3E%3C/svg%3E"); }
.frame .tl { left:-14px; top:-14px; } .frame .tr { right:-14px; top:-14px; } .frame .bl { left:-14px; bottom:-14px; } .frame .br { right:-14px; bottom:-14px; }

/* ======================= HERO ======================= */
.hero { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; text-align:center;
  background:radial-gradient(ellipse at 50% 42%, #FBF6EA 0%, var(--parch) 45%, var(--parch-3) 100%); }
.hero::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(120,90,40,.22)); pointer-events:none; z-index:2; }
.hero .dust { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero-inner { position:relative; z-index:4; padding:120px var(--pad) 110px; max-width:1100px; }
.hero-crest { width:clamp(120px,13vw,190px); margin:0 auto; filter:drop-shadow(0 12px 22px rgba(120,80,20,.3)); }
.hero .kicker { margin-top:clamp(26px,3vw,40px); }
.hero h1 { margin-top:14px; font-size:clamp(46px,7.4vw,112px); line-height:.98; }
.hero .rule { width:min(360px,50vw); height:1.5px; margin:clamp(20px,2.4vw,30px) auto 0; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.hero .sub { margin:18px 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,28px); color:var(--ink-2); }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(30px,3.4vw,46px); }
.scroll-cue { position:absolute; left:50%; bottom:clamp(26px,4vh,46px); transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; font-family:var(--caps); font-size:11px; letter-spacing:.4em; color:var(--accent); }
.scroll-cue i { width:1px; height:44px; background:linear-gradient(var(--line),transparent); transform-origin:top; animation:cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform:scaleY(0); opacity:1; } 60% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:0; } }

/* nav (inside the hero frame; becomes a sticky parchment bar after the hero) */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:clamp(26px,3.4vw,48px) clamp(34px,4.6vw,70px) 0; transition:background .5s, padding .5s var(--ease), box-shadow .5s; }
.nav ul { list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:clamp(18px,2.6vw,38px); }
.nav a { font-family:var(--caps); font-size:12.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--ink); position:relative; }
.nav ul a::after { content:""; position:absolute; left:0; right:.24em; bottom:-6px; height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.nav ul a:hover::after { transform:none; }
.nav .signin { color:var(--blue); }
.nav-crest { opacity:0; pointer-events:none; transition:opacity .5s; } .nav-crest img { height:46px; width:auto; }
/* the frosted bar lives on ::before — backdrop-filter on .nav itself would trap the fixed mobile menu inside the bar */
.nav::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(244,238,223,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line-soft); opacity:0; transition:opacity .5s; }
.nav.solid::before { opacity:1; }
.nav.solid { padding-top:12px; padding-bottom:12px; }
.nav.solid .nav-crest { opacity:1; pointer-events:auto; }
.nav-toggle { display:none; }

/* ======================= SCRIPTURE ======================= */
.scripture { padding:clamp(80px,10vw,150px) var(--pad); text-align:center; z-index:2; }
.scripture .verse { margin:0 auto; max-width:16ch; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(44px,7vw,108px); line-height:1.02; color:var(--ink); }
.scripture .verse .wd { display:inline-block; }
.scripture .ref { margin-top:30px; font-family:var(--caps); font-size:13px; letter-spacing:.5em; color:var(--accent); }

/* ======================= VISION ======================= */
.vision { padding:clamp(64px,7vw,110px) 0; text-align:center; }
.dropcap { margin:26px 0 0; font-family:var(--serif); font-size:clamp(26px,2.9vw,40px); line-height:1.35; color:var(--ink); text-align:left; }
.dropcap::first-letter { float:left; font-family:var(--caps); font-weight:700; font-size:4.1em; line-height:.82; padding:.06em .12em 0 0; margin-top:.04em;
  background:var(--leaf); background-size:200% 100%; background-position:calc(100% - var(--x,0) * 100%) 0; -webkit-background-clip:text; background-clip:text; color:transparent; }
.ornament { color:var(--line); width:120px; margin:32px auto 0; } .ornament svg { width:100%; }

/* ======================= MISSION ======================= */
.mission { padding:clamp(60px,7vw,104px) 0; background:linear-gradient(180deg,transparent,rgba(231,219,190,.55) 30%,rgba(231,219,190,.55) 70%,transparent); }
.mission .head { text-align:center; }
.folios { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,44px); }
.folio { position:relative; border-radius:18px; padding:clamp(34px,3.4vw,50px) clamp(26px,2.6vw,38px) 40px; text-align:center; background:linear-gradient(180deg,#FBF6EA,#F2E9D3); border:1px solid var(--line-soft); box-shadow:0 30px 50px -40px rgba(80,55,15,.55); }
.folio::before { content:""; position:absolute; inset:8px; border:.75px solid var(--line-soft); border-radius:12px; pointer-events:none; }
.folio .num { display:block; font-family:var(--caps); font-weight:700; font-size:14px; letter-spacing:.3em; color:var(--blue); }
.folio .ico { width:64px; height:64px; margin:22px auto 20px; fill:none; stroke:var(--blue); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.folio h3 { font-size:clamp(28px,2.4vw,34px); }
.folio p { margin:12px 0 0; color:var(--ink-2); font-size:16px; }

/* ======================= PATH (how we fulfill) ======================= */
.path { padding:clamp(60px,7vw,104px) 0; }
.path .wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,100px); align-items:start; }
.path .head { position:sticky; top:130px; }
.steps { list-style:none; margin:0; padding:0 0 0 34px; position:relative; }
.steps::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:1.5px; background:var(--line-soft); }
.steps::after { content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:linear-gradient(var(--yellow),var(--blue)); transform-origin:top; transform:scaleY(var(--p,0)); }
.steps li { display:grid; grid-template-columns:62px 1fr; gap:10px; padding:26px 0; border-bottom:1px solid var(--line-soft); }
.steps li:last-child { border-bottom:0; }
.steps .n { font-family:var(--serif); font-style:italic; font-size:30px; color:var(--blue); line-height:1.1; }
.steps h3 { font-size:clamp(28px,2.6vw,38px); line-height:1.1; }
.steps p { margin:8px 0 0; color:var(--ink-2); }

/* ======================= COURSES ======================= */
.courses { padding:clamp(60px,7vw,104px) 0; background:linear-gradient(180deg,transparent,rgba(231,219,190,.6) 20%,rgba(231,219,190,.6) 80%,transparent); }
.courses .head { text-align:center; } .courses .lead { margin-inline:auto; }
.plates { display:grid; gap:clamp(46px,5.5vw,84px); }
.plate { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
.plate.flip .pic { order:2; }
.plate .pic { display:block; position:relative; padding:12px; background:#FBF4E2; border:1.5px solid var(--line); border-radius:22px; box-shadow:0 40px 60px -40px rgba(80,55,15,.6); transform:rotate(-.6deg); transition:transform .9s var(--ease); }
.plate.flip .pic { transform:rotate(.6deg); }
.plate .pic::before { content:""; position:absolute; inset:5px; border:.75px solid var(--line-soft); border-radius:17px; pointer-events:none; z-index:1; }
.plate .pic img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; filter:sepia(.22) saturate(1.05); transition:filter .8s, transform 1.2s var(--ease); }
.plate .pic:hover { transform:rotate(0) translateY(-6px); }
.plate .pic:hover img { filter:sepia(0) saturate(1.1); }
.plate h3 { margin-top:14px; font-size:clamp(34px,3.4vw,52px); line-height:1.02; }
.plate .by { margin:12px 0 0; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--accent); }
.plate p { color:var(--ink-2); margin:14px 0 0; }
.enroll { display:inline-flex; gap:8px; margin-top:26px; padding:14px 0; font-family:var(--caps); font-weight:600; font-size:13px; letter-spacing:.26em; text-transform:uppercase; text-decoration:none; color:var(--ink); border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); transition:letter-spacing .5s var(--ease), color .3s; }
.enroll span { color:var(--accent); }
.enroll:hover { letter-spacing:.32em; color:var(--blue); border-color:var(--blue); }
.courses .all { text-align:center; margin-top:clamp(44px,5vw,70px); }

/* ======================= STUDY ======================= */
.study { padding:clamp(60px,7vw,104px) 0; }
.study-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,7vw,110px); align-items:center; }
.seal { position:relative; width:min(360px,80%); aspect-ratio:1; margin:0 auto; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FFF7E4, #F1E2BD 60%, #DCC58C); box-shadow:0 40px 60px -35px rgba(80,55,15,.6), inset 0 0 0 10px rgba(201,164,92,.35), inset 0 0 0 11px rgba(201,164,92,.7); }
.seal img { width:40%; filter:drop-shadow(0 8px 12px rgba(80,55,15,.3)); }
.seal svg { position:absolute; inset:0; width:100%; height:100%; animation:spin 60s linear infinite; }
.seal text { font-family:var(--caps); font-weight:600; font-size:12.5px; fill:var(--accent); }
@keyframes spin { to { transform:rotate(360deg); } }
.study p { color:var(--ink-2); font-size:18px; max-width:52ch; }
.ways { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
.ways li { padding:14px 0 14px 26px; border-bottom:1px solid var(--line-soft); position:relative; font-family:var(--serif); font-size:22px; color:var(--ink); }
.ways li::before { content:""; position:absolute; left:0; top:50%; width:10px; height:10px; margin-top:-5px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0Q5.5 4.5 10 5Q5.5 5.5 5 10Q4.5 5.5 0 5Q4.5 4.5 5 0Z' fill='%23B8913F'/%3E%3C/svg%3E"); }

/* ======================= TENETS ======================= */
.tenets { padding:clamp(60px,7vw,104px) 0; background:linear-gradient(180deg,transparent,rgba(231,219,190,.55) 25%,rgba(231,219,190,.55) 75%,transparent); }
.tenets .head { text-align:center; } .tenets .lead { margin-inline:auto; }
.articles { list-style:none; margin:0; padding:0; counter-reset:none; }
.articles li { display:grid; grid-template-columns:70px 1fr; gap:12px; padding:26px 0; border-top:1px solid var(--line-soft); }
.articles li:last-child { border-bottom:1px solid var(--line-soft); }
.articles span { font-family:var(--caps); font-weight:700; font-size:20px; color:var(--blue); padding-top:4px; }
.articles p { margin:0; font-family:var(--serif); font-size:clamp(20px,1.7vw,23px); line-height:1.5; color:var(--ink); }
.articles:not(.open) li.more { display:none; }
.more-btn { display:flex; margin:40px auto 0; }

/* ======================= CLOSING ======================= */
.closing { position:relative; min-height:72svh; display:grid; place-items:center; text-align:center; overflow:hidden; margin:clamp(20px,3vw,40px) 0 0;
  background:radial-gradient(ellipse at 50% 50%, #FBF6EA 0%, var(--parch-2) 55%, var(--parch-3) 100%); }
.closing-inner { position:relative; z-index:4; padding:90px var(--pad); }
.closing-crest { width:clamp(100px,10vw,150px); margin:0 auto; }
.closing h2 { margin-top:26px; font-size:clamp(56px,9vw,140px); line-height:.95; }
.closing .sub { margin:18px 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,28px); color:var(--ink-2); }

/* ======================= FOOTER ======================= */
.footer { position:relative; z-index:2; padding:60px 0 50px; text-align:center; border-top:1px solid var(--line-soft); }
.footer img { width:84px; margin:0 auto; }
.footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin-top:26px; }
.footer nav a { font-family:var(--caps); font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; padding:8px 0; }
.footer p { margin:22px 0 0; color:var(--ink-2); font-size:15px; } .footer p a { color:var(--accent); }
.footer .copy { margin-top:8px; font-size:13px; color:#8C7B5C; }

/* ======================= video modal ======================= */

/* reveals */
.rv { opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.rv.in { opacity:1; transform:none; } .d1 { transition-delay:.12s; } .d2 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } .seal svg, .scroll-cue i { animation:none; } }

/* ======================= responsive ======================= */
@media (max-width: 900px) {
  .folios { grid-template-columns:1fr; }
  .path .wrap, .study-grid, .plate { grid-template-columns:1fr; }
  .plate.flip .pic { order:0; }
  .path .head { position:static; }
  .ways { grid-template-columns:1fr; }
  .nav ul { position:fixed; inset:0; z-index:-1; flex-direction:column; align-items:center; justify-content:center; gap:30px; background:var(--parch); transform:translateY(-100%); transition:transform .8s var(--ease); }
  .nav ul.open { transform:none; }
  .nav a { font-size:15px; }
  .nav-toggle { display:grid; gap:6px; margin-left:auto; width:44px; height:44px; place-content:center; background:none; border:0; cursor:pointer; position:relative; z-index:2; }
  .nav-crest { position:relative; z-index:2; }
  html:has(.nav ul.open) { overflow:hidden; }
  .nav-toggle span { display:block; width:26px; height:1.5px; background:var(--ink); transition:transform .5s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
  .articles li { grid-template-columns:48px 1fr; }
  .steps li { grid-template-columns:44px 1fr; }
}
@media (max-width: 520px) {
  body { font-size:16px; }
  .hero-inner { padding-top:110px; }
  .hero-ctas .btn { width:100%; }
  .frame .c { display:none; }
}

/* ======================= LAPIS: the blue of the crest, as in illuminated manuscripts ======================= */
.scripture { background:radial-gradient(ellipse at 50% 0%, var(--lapis-2) 0%, var(--lapis) 60%, #061F3B 100%); color:#F4EEDF; overflow:hidden; }
.scripture::before { content:""; position:absolute; inset:clamp(12px,2.2vw,30px); border:1.5px solid rgba(246,195,67,.55); pointer-events:none; }
.scripture::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:radial-gradient(circle, rgba(246,195,67,.9) 0 1px, transparent 1.6px) 0 0/46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%); }
.scripture .verse { color:#F7EFD9; position:relative; z-index:1; }
.scripture .verse .wd:nth-child(1), .scripture .verse .wd:nth-child(4) { color:var(--yellow); }  /* "Deep … deep" */
.scripture .ref { color:var(--yellow); position:relative; z-index:1; }
.head h2::after { content:""; display:block; width:64px; height:3px; margin-top:18px; background:linear-gradient(90deg,var(--blue) 0 50%,var(--yellow) 50%); }
.mission .head h2::after, .courses .head h2::after, .tenets .head h2::after { margin-inline:auto; }
.ways li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0Q5.5 4.5 10 5Q5.5 5.5 5 10Q4.5 5.5 0 5Q4.5 4.5 5 0Z' fill='%230068B0'/%3E%3C/svg%3E"); }
.seal { box-shadow:0 40px 60px -35px rgba(8,47,87,.55), inset 0 0 0 10px rgba(0,104,176,.18), inset 0 0 0 11px rgba(0,104,176,.55); }
.seal text { fill:var(--blue); }
.footer { background:var(--lapis); color:#DCE6F2; border-top:3px solid var(--yellow); }
.footer img { background:#F4EEDF; border-radius:14px; padding:8px; width:96px; }
.footer nav a { color:#F4EEDF; } .footer nav a:hover { color:var(--yellow); }
.footer p { color:#B9CBE0; } .footer p a { color:var(--yellow); } .footer .copy { color:#8FA6C2; }

/* ======================= READING PROGRESS ======================= */
.progress { position:fixed; left:0; right:0; top:0; height:3px; z-index:60; pointer-events:none; }
.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--yellow)); transform-origin:left; transform:scaleX(var(--p,0)); }
.rail { position:fixed; right:clamp(16px,2vw,30px); top:50%; transform:translateY(-50%); z-index:40; opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.rail.on { opacity:1; pointer-events:auto; }
.rail ol { list-style:none; margin:0; padding:0; position:relative; display:grid; gap:22px; }
.rail ol::before { content:""; position:absolute; right:6px; top:6px; bottom:6px; width:1px; background:var(--line-soft); }
.rail ol::after { content:""; position:absolute; right:5.5px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--blue),var(--yellow)); transform-origin:top; transform:scaleY(var(--p,0)); }
.rail li { position:relative; }
.rail a { display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; padding:3px 0; }
.rail .lbl { font-family:var(--caps); font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); opacity:0; transform:translateX(6px); transition:opacity .4s, transform .5s var(--ease), color .3s; white-space:nowrap; }
.rail .dot { position:relative; z-index:1; width:13px; height:13px; flex:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0Q7.7 6.3 14 7Q7.7 7.7 7 14Q6.3 7.7 0 7Q6.3 6.3 7 0Z' fill='%23C9A45C'/%3E%3C/svg%3E"); transition:transform .5s var(--ease); }
.rail li.done .dot { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0Q7.7 6.3 14 7Q7.7 7.7 7 14Q6.3 7.7 0 7Q6.3 6.3 7 0Z' fill='%230068B0'/%3E%3C/svg%3E"); }
.rail li.on .dot { transform:scale(1.6); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0Q7.7 6.3 14 7Q7.7 7.7 7 14Q6.3 7.7 0 7Q6.3 6.3 7 0Z' fill='%23F6C343'/%3E%3C/svg%3E"); }
.rail li.on .lbl, .rail:hover .lbl { opacity:1; transform:none; }
.rail li.on .lbl { color:var(--blue); }
.rail.dark .lbl { color:#F4EEDF; } .rail.dark li.on .lbl { color:var(--yellow); }
.nav .chap { display:none; }
@media (max-width: 1100px) {
  .rail { display:none; }
  .nav .chap { display:block; position:absolute; left:50%; transform:translateX(-50%); font-family:var(--caps); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap; }
  .nav.solid .chap { opacity:1; }
}

/* ============ Welcome — Apostle Frank's introduction ============ */
.welcome { padding:clamp(64px,7vw,110px) 0 clamp(56px,6vw,96px); }
.welcome .wrap { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr); gap:clamp(32px,5vw,84px); align-items:center; }
.welcome h2 em { display:block; }
.welcome-copy .btn { margin-top:30px; }
.welcome-copy .btn .dur { margin-left:12px; padding-left:12px; border-left:1px solid rgba(246,195,67,.6); letter-spacing:.12em; opacity:.85; }
.welcome-media { position:relative; aspect-ratio:16/9; padding:12px; background:#FBF4E2; border:1.5px solid var(--line); border-radius:22px; box-shadow:0 40px 60px -40px rgba(80,55,15,.6); }
.player { position:absolute; inset:12px; border-radius:12px; overflow:hidden; background:#1C160E; }
.player video { width:100%; height:100%; object-fit:cover; display:block; }
.play-big { position:absolute; left:50%; top:50%; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; border:0; cursor:pointer; background:rgba(8,47,87,.88);
  box-shadow:0 0 0 2px rgba(233,196,112,.95), 0 0 0 10px rgba(8,47,87,.35), 0 0 0 11px rgba(233,196,112,.45), 0 24px 50px -10px rgba(0,0,0,.5); transition:transform .6s var(--ease), opacity .5s; }
.play-big span { position:absolute; left:50%; top:50%; margin:-15px 0 0 -9px; border-left:28px solid var(--yellow); border-top:16px solid transparent; border-bottom:16px solid transparent; }
.play-big:hover { transform:scale(1.06); }
.player.playing .play-big { opacity:0; pointer-events:none; }
/* detached: the same video leaves its frame and follows you (position/size driven live by site.js) */
.player.detached { position:fixed; inset:auto; z-index:60; box-shadow:0 0 0 1.5px var(--line), 0 0 0 6px rgba(251,244,226,.96), 0 0 0 7px var(--line-soft), 0 30px 60px -18px rgba(28,22,14,.6); }
.player.detached .play-big { opacity:0; pointer-events:none; }
.player.leaving { opacity:0; transform:scale(.8); transform-origin:100% 100%; transition:opacity .45s var(--ease), transform .45s var(--ease); }
.player.popin { animation:dockIn .8s var(--ease); }
/* the section's .wrap is a stacking context (z-index:2) -> lift it while its player is out, or later sections paint over it */
.welcome.docking .wrap { z-index:60; }
@keyframes dockIn { from { opacity:0; transform:translateY(26px) scale(.96); } }
.dock-bar { position:absolute; left:0; right:0; bottom:0; display:none; justify-content:flex-end; gap:6px; padding:28px 8px 8px; background:linear-gradient(transparent, rgba(20,14,6,.72)); opacity:0; transition:opacity .4s; }
.player.detached .dock-bar { display:flex; }
.player.detached:hover .dock-bar, .player.detached:focus-within .dock-bar, .player.detached.paused .dock-bar { opacity:1; }
@media (hover:none) { .player.detached .dock-bar { opacity:1; } }
.dock-bar button { width:36px; height:36px; border-radius:50%; border:1px solid rgba(233,196,112,.75); background:rgba(28,22,14,.6); color:#FBF3DF; display:grid; place-items:center; cursor:pointer; padding:0; transition:background .3s; }
.dock-bar button:hover { background:rgba(8,47,87,.9); }
.dock-bar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dock-bar .i-play { fill:currentColor; stroke:none; }
.player:not(.paused) .i-play, .player.paused .i-pause, .player.muted .i-wave, .player:not(.muted) .i-x { display:none; }
/* the floating medallion */
.medallion { position:fixed; right:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px); z-index:55; display:flex; flex-direction:row-reverse; align-items:center; gap:14px;
  opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .7s var(--ease), transform .9s var(--ease); }
.medallion.on { opacity:1; transform:none; pointer-events:auto; }
.m-open { position:relative; width:78px; height:78px; padding:0; border:0; border-radius:50%; background:#F1E3BE; cursor:pointer;
  box-shadow:0 0 0 2px var(--line), 0 0 0 7px rgba(251,244,226,.96), 0 0 0 8px var(--line-soft), 0 20px 40px -12px rgba(40,26,8,.55); transition:transform .6s var(--ease); }
.m-open:hover { transform:scale(1.05); }
.m-open img { width:100%; height:100%; border-radius:50%; }
.m-open::after { content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--line); animation:halo 3.6s var(--ease) infinite; }
@keyframes halo { 0% { opacity:.8; transform:scale(1); } 70%,100% { opacity:0; transform:scale(1.35); } }
.m-play { position:absolute; right:-6px; bottom:-4px; width:30px; height:30px; border-radius:50%; background:var(--blue); box-shadow:inset 0 0 0 1.5px var(--yellow), 0 4px 10px rgba(0,0,0,.25); }
.m-play::after { content:""; position:absolute; left:11px; top:8px; border-left:11px solid #FFF8E8; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.m-lbl { font-family:var(--caps); font-weight:600; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); background:rgba(251,244,226,.96); border:1px solid var(--line-soft); padding:9px 14px; white-space:nowrap; box-shadow:0 10px 24px -14px rgba(40,26,8,.5); }
.m-off { position:absolute; right:-8px; top:-10px; width:24px; height:24px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--parch); color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer; }
@media (max-width:900px) { .welcome .wrap { grid-template-columns:1fr; } }
@media (max-width:520px) { .m-lbl { display:none; } .m-open { width:66px; height:66px; } .play-big { width:84px; height:84px; margin:-42px 0 0 -42px; } }
@media (prefers-reduced-motion: reduce) { .player.popin { animation:none; } .m-open::after { animation:none; } }

/* phones: comfortable tap targets (≥44px hit areas without changing the look) */
.m-off::before { content:""; position:absolute; inset:-10px; }
@media (max-width:900px) { .nav ul a { display:inline-block; padding:12px 8px; } }
footer a { display:inline-block; padding-block:10px; }

/* phones: the welcome plays as a vertical (9:16) film */
.welcome.vertical .welcome-media { aspect-ratio:9/16; width:min(100%, calc(76vh * 9 / 16)); margin-inline:auto; }
.welcome.vertical .dock-bar { flex-wrap:wrap; justify-content:center; gap:5px; padding:30px 6px 8px; }
.welcome.vertical .dock-bar button { width:32px; height:32px; }

/* while the player is out following you, its frame keeps a faded poster + a quiet note (never an empty box) */
.welcome-media::before { content:""; position:absolute; inset:12px; border-radius:12px; background:var(--poster) center/cover; opacity:0; filter:sepia(.35) saturate(.7); transition:opacity .8s var(--ease); }
.welcome-media::after { content:"Playing in the corner"; position:absolute; left:50%; bottom:28px; transform:translateX(-50%); padding:8px 16px; white-space:nowrap;
  font-family:var(--caps); font-weight:600; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink); background:rgba(251,244,226,.94); border:1px solid var(--line-soft); opacity:0; transition:opacity .8s var(--ease); }
.welcome.docking .welcome-media::before { opacity:.32; }
.welcome.docking .welcome-media::after { opacity:1; }
.welcome.vertical .play-big { top:84%; }   /* the vertical poster's circle sits mid-frame → play button goes in the empty parchment below it */