/* /assets/css/pages/library.css : page-group layout only. Loaded AFTER /assets/css/site.css by the pages of this group.
   Rules here may only add page-specific layout (grids, spacing, one-off crops). Never redefine site.css tokens or components.
   Pages: library, guide, surrender, chakra. */


/* ================================================================ LIBRARY ================================================================ */

/* hero: one centred stack on the axis: the giant title, her line, the portal link, the two-entry index as one row, the Begin cue */
.hero--page.lib-hero{min-height:0;padding-bottom:clamp(48px,5vw,72px)}
.lib-hero-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(26px,3vw,40px);width:100%}
.lib-h1{font-family:var(--serif);font-weight:300;font-size:clamp(96px,11.5vw,184px);line-height:.82;letter-spacing:-.03em;color:var(--ink)}
.lib-h1 .the{display:block;font-style:italic;font-size:.3em;line-height:1;letter-spacing:0;color:var(--gold-deep);margin:0 auto .12em}
.lib-h1 .word{display:block}
.lib-hero-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;width:min(100%,560px)}
.lib-hero-side .lead{max-width:22em}
.lib-hero-side .index{width:100%;margin-top:10px}
.lib-hero-side .index a{justify-content:center;gap:14px}
.lib-hero-side .index a i{min-width:0}
.lib-hero-side .hero-cue{margin-top:4px;min-height:20px}
@media (min-width:768px){
  /* the two entries sit side by side, each centred in its half */
  .lib-hero .index.one-col ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the plate: her wide temple photograph, one cinematic opening */
.lib-plate{position:relative;background:linear-gradient(to bottom,var(--ivory) 58%,var(--silk) 58%);padding:0}
.lib-free{padding-top:clamp(96px,11vw,160px)}
.lib-plate-fig{aspect-ratio:2400/1120;width:100%}
.lib-plate-fig picture,.lib-plate-fig img{display:block;width:100%;height:100%}
.lib-plate-fig img{object-fit:cover;object-position:50% 30%}

/* free teachings: the guide as an object, then the shelf */
.lib-free .sec-head{margin-bottom:var(--head-gap)}
.lib-feature{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,8vw,140px);align-items:center;margin-bottom:clamp(130px,15vw,230px)}
.lib-feature .guide-fig{max-width:500px;width:100%;justify-self:end}
.lib-feature-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:30em;justify-self:center}
.lib-feature-txt .h3{font-size:clamp(40px,4.4vw,68px);line-height:1}
.lib-feature-txt .h3 em{display:block}

.shelf-wrap{position:relative}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);row-gap:64px;align-items:start;position:relative;z-index:2}
.shelf-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.shelf-item:nth-child(even){margin-top:clamp(48px,6vw,104px)}
.shelf-item .frame{width:100%;margin-bottom:12px}
.shelf-item .frame>img{transition:transform 2.2s var(--ease)}
.shelf-item:hover .frame>img{transform:scale(1.04)}
.shelf-item:hover .frame::after{inset:9px}
.shelf-title{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.3vw,34px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.shelf-item p{font-size:15.5px;line-height:1.7;color:var(--ink-2);text-wrap:balance}
.shelf-item .btn{margin-top:auto;padding:12px 22px;letter-spacing:.24em;max-width:100%;white-space:normal;line-height:1.5}
.lib-mandala{background:#F7F1E4}
.shelf .lib-mandala>img{position:absolute;left:-24%;top:-15%;width:148%;height:130%;max-width:none}

/* courses: quiet hairline rows */
.lib-courses-head{grid-column:1/5;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;align-self:start;position:sticky;top:calc(var(--bar) + var(--navh) + 32px)}
.lib-rows{grid-column:6/13;border-top:1px solid var(--hair)}
.lib-row{display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:32px;align-items:center;padding:30px 0;border-bottom:1px solid var(--hair)}
.lib-row-img{aspect-ratio:16/10;width:168px}
.lib-row-txt{display:flex;flex-direction:column;gap:8px}
.lib-row-txt .h4{font-size:clamp(24px,2vw,30px);font-weight:300}
.lib-row-txt p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:30em}
.lib-soon{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap;align-self:center;font-style:normal}

/* the doorway statement */
.lib-state{padding:clamp(120px,15vw,220px) 0;background:var(--champagne)}
.lib-courses{padding-bottom:clamp(100px,12vw,160px)}
.lib-state .ladder em{font-style:italic;color:var(--gold-deep)}

/* spine anchors for the courses and the statement: the column gap / the 21vw margin left of the first ladder line on wide screens;
   when the courses stack (<1200) the rows run full width, so the line moves into the right gutter and stays there down to the crown */
#libCourseGap{left:39%;top:50%}
#libStateGap{left:calc(21vw - max(0px,(100vw - var(--max)) / 2));top:50%}
@media (max-width:1199px){
  #libCourseGap,#libStateGap{left:auto;right:calc(0.5 * var(--gutter))}
  #libCourseGap{top:-24px}
}

/* small laptop / tablet landscape: four covers at ~214px wrap every button onto two lines, and the course rows squeeze to a 5-line column */
@media (min-width:1024px) and (max-width:1199px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,6vw,80px);row-gap:72px}
  .shelf-item:nth-child(even){margin-top:96px}
  .shelf-item .frame{max-width:340px}
  .lib-courses-head{grid-column:1/-1;position:static;margin-bottom:40px}
  .lib-rows{grid-column:1/-1}
}
@media (max-width:1023px){
  .lib-feature{grid-template-columns:minmax(0,1fr);gap:56px}
  .lib-feature .guide-fig{justify-self:center;max-width:460px}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:72px}
  .shelf-item:nth-child(even){margin-top:64px}
  .lib-courses-head{grid-column:1/-1;position:static;margin-bottom:40px}
  .lib-rows{grid-column:1/-1}
  /* stacked courses: each course a centred card (cover, title, line, Coming soon), two side by side on tablet, one on phone */
  .lib-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cg)}
  .lib-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 0}
  .lib-row-img{width:200px}
  .lib-row-txt{align-items:center}
  .lib-row-txt p{max-width:22em;text-wrap:balance}
}
@media (max-width:767px){
  .hero--page.lib-hero{padding-bottom:36px}
  .lib-h1{font-size:clamp(84px,25vw,112px)}
  .lib-h1 .the{font-size:.34em}
  .lib-hero-side{gap:14px}
  .lib-hero-side .index{margin-top:6px}
  .lib-free{padding-top:88px}
  .lib-plate-fig{aspect-ratio:900/761}
  .lib-plate-fig img{object-position:50% 35%}
  .lib-feature{gap:72px;margin-bottom:88px}
  .lib-feature .guide-fig{width:82%;max-width:none;justify-self:center}
  .lib-feature-txt{max-width:none;width:100%}
  .lib-feature-txt .btn{width:100%}
  /* phone shelf: one centred card per teaching between hairlines: a small arched cover on the axis, its words, a full-width button */
  .shelf{grid-template-columns:minmax(0,1fr);row-gap:0;border-top:1px solid var(--hair)}
  .shelf-item,.shelf-item:nth-child(even){gap:10px;margin-top:0;padding:36px 0 34px;border-bottom:1px solid var(--hair)}
  .shelf-item .frame{width:132px;margin:0 0 10px}
  .shelf-item .frame::after{inset:7px}
  .shelf-title{font-size:27px}
  .shelf-item p{font-size:15px;max-width:22em}
  .shelf-item .btn{align-self:stretch;width:100%;margin-top:12px;padding:0 18px;letter-spacing:.24em;min-height:48px}
  .lib-rows{grid-template-columns:minmax(0,1fr)}
  .lib-row{padding:34px 0}
  .lib-row-img{width:176px}
  .lib-row-txt .h4{font-size:25px}
  .lib-row-txt p{font-size:15px}
  .lib-state{padding:96px 0}
}

/* ================================================================ GUIDE ================================================================ */
.guide-hero{padding:calc(var(--bar) + var(--navh) + clamp(40px,6vh,88px)) 0 clamp(100px,12vw,170px)}
.guide-hero .guide-txt{gap:22px}
.gs-sec{padding-top:clamp(72px,8vw,120px)}
.guide-hero .h1.h1-long{font-size:clamp(52px,5.6vw,92px);line-height:.96}
.guide-hero .h1.h1-long em{font-size:.8em}
.guide-hero .body{max-width:30em}
.gh-note{color:var(--soft);font-size:14px;margin-top:-4px}
@media (min-width:1024px){
  .guide-hero .guide-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .guide-hero .guide-fig{order:2;justify-self:end;width:100%}
}

/* the form beside her portrait */
/* the arch and the form sit as one pair on the page axis; the note is centred over the form it belongs to */
.gs-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,720px);justify-content:center;gap:clamp(40px,6vw,96px);align-items:start}
.gs-fig{aspect-ratio:3/4;position:sticky;top:calc(var(--bar) + var(--navh) + 32px);max-width:460px;width:100%;justify-self:center}
.gs-form{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;min-width:0}
.gs-form .lead{max-width:24em}
.gs-form .embed{align-self:stretch;text-align:left}
.gs-form .embed{min-height:calc(725px + 2 * clamp(20px,3vw,40px))}

/* the course */
.gi-course .ed .ed-media{max-width:620px}
.gi-soon{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;line-height:1.5;color:var(--gold-text)} /* 19px italic on silk: gold-deep is 3.75:1, gold-text passes AA */
.gi-lessons-wrap{margin-top:clamp(56px,7vw,96px)}
/* the lessons accordion spans the whole wrap: its edges line up with the copy above and the serpent photograph's right edge */
.gi-lessons-wrap .faq{border-top:1px solid var(--hair)}
.gi-lessons-wrap .faq .faq-body{max-width:none}
.gi-lessons{counter-reset:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cg)}
.gi-lessons li{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-top:1px solid var(--rule-ink);font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.25;color:var(--ink)}
.gi-lessons li span{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}

@media (max-width:1023px){
  .gs-grid{grid-template-columns:minmax(0,1fr)}
  .gs-fig{position:relative;top:auto;max-width:420px;aspect-ratio:4/5;order:2}
  .gs-form{width:100%;max-width:720px;justify-self:center}
}
@media (max-width:767px){
  .guide-hero{padding:calc(var(--bar) + var(--navh) + 32px) 0 96px}
  .guide-hero .guide-grid{gap:64px}
  .guide-hero .h1.h1-long{font-size:clamp(44px,12.6vw,56px)}
  .gs-fig{max-width:none;width:86%}
  .gs-form .embed{min-height:calc(725px + 32px)}
  .gi-lessons{grid-template-columns:minmax(0,1fr)}
  .gi-lessons li{font-size:20px}
}

/* ================================================================ OPT-IN (surrender, chakra) ================================================================ */
.optin{position:relative;background:var(--silk);padding:calc(var(--bar) + var(--navh) + clamp(40px,6vh,80px)) 0 clamp(72px,8vw,120px)}
.optin-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,128px);align-items:start}
.optin-media{position:sticky;top:calc(var(--bar) + var(--navh) + 32px)}
.optin-arch{aspect-ratio:4/5;width:100%;max-width:520px}
.optin-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;min-width:0;max-width:640px;width:100%;justify-self:center}
.optin-body .h1{font-size:clamp(60px,6.4vw,104px)}
.optin-body .body{max-width:34em;text-wrap:pretty}
.optin-body .embed{width:100%;margin-top:12px;min-height:calc(500px + 2 * clamp(20px,3vw,40px));text-align:left}
/* listen, feel, allow: three words stepping down and right, the page's one display moment; the stair is symmetric about the axis */
.optin-words{display:flex;flex-direction:column;align-items:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,3.4vw,54px);line-height:1.08;color:var(--gold-deep);margin:4px 0 6px}
.optin-words span:nth-child(1){margin-right:2.4em}
.optin-words span:nth-child(3){margin-left:2.4em}

/* chakra: the mandala as a round window inside two gold hairline rings */
.chakra-disc{position:relative;width:min(100%,520px);aspect-ratio:1;border-radius:50%;margin:24px auto 0;background:#F7F1E4}
.chakra-disc img{width:100%;height:100%;object-fit:cover;border-radius:50%;transform:scale(1.04)}
.chakra-disc::before,.chakra-disc::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.chakra-disc::before{inset:-14px;border:1px solid var(--hair-strong)}
.chakra-disc::after{inset:-26px;border:1px solid var(--hair)}
html.motion.js .chakra-disc.mask{clip-path:circle(38% at 50% 50%)}
html.motion.js .chakra-disc.mask.in{clip-path:circle(75% at 50% 50%)}
.optin-chakra .optin-media{padding-top:12px}

/* also in the library */
.optin-also .sec-head{margin-bottom:clamp(40px,5vw,64px)}

@media (max-width:1023px){
  .optin-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  /* stacked: the image opens the page on the axis (the arch and the mandala alike), then the words and the form */
  .optin-media{position:relative;top:auto;order:-1;display:flex;justify-content:center}
  .optin-arch{max-width:340px}
  .optin-chakra .optin-media{padding-top:0}
  .chakra-disc{width:min(70vw,360px)}
}
@media (max-width:767px){
  .optin{padding:calc(var(--bar) + var(--navh) + 28px) 0 80px}
  .optin-body{gap:18px}
  .optin-body .h1{font-size:clamp(52px,15vw,64px)}
  .optin-words{flex-direction:row;flex-wrap:wrap;gap:0 .32em;font-size:clamp(26px,7.4vw,32px)}
  .optin-words{justify-content:center}
  .optin-words span:nth-child(n){margin:0}
  .optin-body .embed{min-height:calc(500px + 32px);margin-top:6px}
  .optin-arch{width:min(58vw,224px)}
  .chakra-disc{width:min(48vw,184px);margin:20px auto 4px}
  .chakra-disc::before{inset:-10px}
  .chakra-disc::after{inset:-19px}
}

/* her old page footer (Navigate / Sessions / Connect) is now the shared .coda in site.css */

/* ================================================================ REVIEW ROUND 1 · one axis everywhere in this group ================================================================ */

/* the guide card's title: "Kundalini:" over its italic line, never "Kundalini: A / Gentle Introduction" */
.guide-card .gc-title em{display:block}

/* library hero, phone: the Contents disclosure sits on the axis like the entries under it; an invisible twin of the + keeps the word centred */
@media (max-width:1023px){
  .lib-hero .index summary{justify-content:center;gap:14px}
  .lib-hero .index summary::before{content:"";flex:none;width:12px}
}

/* guide course: the short lead balances, and the six-lessons disclosure is a centred table of contents (label on the axis, each lesson centred) */
.gi-course .ed-txt .body{max-width:30em;text-wrap:balance}
.gi-drop summary{justify-content:center;gap:18px}
.gi-drop summary::before{content:"";flex:none;width:14px}
.gi-lessons li{align-items:center;text-align:center;text-wrap:balance}

/* also-in-the-library cards: the three links share one baseline however long each card's line runs */
.optin-also .also-card .more{margin-top:auto;padding-top:4px}

/* her coda on phone: Navigate and Sessions side by side, Connect centred under them at the same column width (it was stranded under Navigate) */
@media (max-width:767px){
  .coda-col:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - 20px) / 2)}
}
.gi-soon{text-wrap:balance}

/* ================================================================ REVIEW ROUND 2 · even lines on the axis ================================================================ */

/* centred card text and small print balance their lines (no "is not holding." / "check your spam" left hanging under a long line) */
.optin-also .also-card p{text-wrap:balance}
.gh-note{text-wrap:balance}

/* chakra hero, tablet and desktop: the intro runs three lines there, so by the system's line rule it is a short lead and centres,
   balanced, under the centred title (on phone it runs four or more lines and keeps the left reading column from .is-reading) */
@media (min-width:768px){
  .optin-chakra .optin-body .body.is-reading{text-align:center;text-wrap:balance}
}

/* library hero, phone: "Already enrolled? Enter the portal" wraps to two lines at 360, and its label-wide underline ran across the second line.
   On phone it takes the site's phone link treatment instead: centred lines, room below, and the short centred stroke (--stroke) */
@media (max-width:767px){
  .lib-hero-side>.link-ul{justify-content:center;text-align:center;line-height:1.6;padding:8px 0 12px .3em}
  .lib-hero-side>.link-ul::after{left:50%;right:auto;width:var(--stroke);margin-left:calc(var(--stroke) / -2);bottom:4px}
}