/* /assets/css/pages/articles.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: what-happens-in-a-kundalini-activation-session, kundalini-activation-vs-awakening, what-is-a-cacao-ceremony,
          what-is-a-sound-bath, journal.

   THE SERPENT'S MARGIN. On these long reads the gold line runs in the left margin of the 680 px article column
   (spine preset "prose" = (vw - 680)/2 - 56). Every wide block below hangs from the article's left text edge
   (.a-hang) and grows to the right, so the line never has to leave its margin to get past a table, a gallery or a spread.
   Image-left spreads (.ed) let the line pass behind the photo.

   ALIGNMENT ("centred sanctuary", _scratch/align/SYSTEM.md): headings, kicks, short leads, set-apart lines, stepped stacks,
   facts, definitions, card text and closing notes sit on the axis of their column; the article prose, lists, tables, FAQ
   answers and the long paragraphs of the numbered cells keep a left edge. Long final-band bodies carry .is-reading. */

/* ------------------------------------------------------------ 0. shared bits ------------------------------------------------------------ */
:root{--hang:max(var(--gutter),calc((100vw - 680px) / 2 + var(--gutter)));--hang-r:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.a-hang{position:relative;z-index:2;padding-left:var(--hang);padding-right:var(--hang-r)}
@media (max-width:767px){:root{--hang:var(--gutter);--hang-r:var(--gutter)}}

.hero--page .hero-arch{z-index:2}

/* intro lead under the hero: a touch more air before the index */
.a-intro{padding-top:clamp(24px,4vw,56px)}
.a-index{margin-top:clamp(48px,6vw,88px)}
.a-index>.kick{text-align:center}
.a-index .index ol{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.a-index .index ol{grid-template-columns:minmax(0,1fr)}}

/* her "stack" lines inside the prose column: one centred stair, line over line on the axis, the last turns italic gold.
   (The old step-ins became ragged narrow columns on phone; .flat is now the same as every stack.) */
.prose .a-stack,.prose-txt .a-stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.18em;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.5vw,34px);line-height:1.22;color:var(--ink);margin:1.5em auto;max-width:22em}
.a-stack>span{display:block;text-wrap:balance}
.a-stack>span:last-child{font-style:italic;color:var(--gold-deep);margin-top:.12em}
@media (max-width:767px){.prose .a-stack,.prose-txt .a-stack{font-size:25px}}

/* short leads inside the prose (a heading's one-line deck, a set-apart sentence): centred under the heading, balanced.
   The opening drop-cap lead is reading text and stays left. */
.prose>.lead:not(.dropcap),.prose-txt>.lead:not(.dropcap){text-align:center;text-wrap:balance;max-width:26em;margin-left:auto;margin-right:auto}
.prose-txt>.lead:not(.dropcap){align-self:center}
/* the closing "you may also like" line before the author block (and the sound-bath read-more line) closes a centred block */
.prose>p.a-also{text-align:center;text-wrap:balance;max-width:30em;margin-left:auto;margin-right:auto}

/* the ladder band, re-used from the homepage statement (one per article, the page's big moment) */
.state.a-state{padding:clamp(110px,14vw,200px) 0}
.state.a-silk{background:var(--silk)}
.a-state .ladder .ln.call{max-width:18ch}
.ladder.a-sm{font-size:clamp(30px,3.3vw,50px);line-height:1.14;gap:.32em}
.ladder.a-sm .ln{max-width:none;padding-right:var(--gutter)}
.ladder.a-sm .ln.call{max-width:30ch;margin-top:.3em}
.a-state .state-after{margin-top:clamp(48px,6vw,80px)}
.a-state .state-after .lead{max-width:30em}
@media (max-width:767px){
  .state.a-state{padding:96px 0 90px}
  .ladder.a-sm{font-size:clamp(28px,8vw,34px)}
}

/* ------------------------------------------------------------ 1. facts row (what happens: two hours / 90 minutes / lie down) ------------------------------------------------------------ */
.a-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:clamp(48px,6vw,80px) 0}
.a-fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border-top:1px solid var(--gold);padding-top:22px}
.a-fact h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.3vw,50px);line-height:1;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.a-fact h3 em{font-style:italic;color:var(--gold-deep)}
.a-fact p{font-size:15px;line-height:1.65;color:var(--soft);max-width:22em;text-wrap:balance}
@media (max-width:767px){
  .a-facts{grid-template-columns:minmax(0,1fr);gap:0;margin:40px 0}
  .a-fact{gap:6px;padding:18px 0 20px;border-top:1px solid var(--hair)}
  .a-fact:first-child{border-top-color:var(--gold)}
  .a-fact h3{font-size:34px}
}

/* ------------------------------------------------------------ 2. hung spreads: text on the article's left edge, photo to the right ------------------------------------------------------------ */
.a-hed{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:clamp(40px,4.5vw,72px);align-items:center}
.a-hed .a-hed-media{position:relative;justify-self:start;width:100%;max-width:460px;aspect-ratio:4/5}
.a-hed .a-hed-media img{width:100%;height:100%;object-fit:cover}
.a-hed .prose-txt{display:flex;flex-direction:column;align-items:stretch}
.a-hed.top{align-items:start}
.a-hed.top .a-hed-media{margin-top:8px}
@media (max-width:1023px){
  .a-hed{grid-template-columns:minmax(0,1fr);gap:40px}
  .a-hed .a-hed-media{order:-1;justify-self:center;width:86%;max-width:520px}
}
.a-after{margin-top:clamp(40px,5vw,72px)}

/* ------------------------------------------------------------ 3. full-bleed wide photo (the room, mid-ceremony) ------------------------------------------------------------ */
.a-bleed{position:relative;z-index:2;margin:0;height:clamp(420px,56vw,820px);overflow:hidden;background:var(--linen)}
.a-bleed.frame>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.a-bleed.frame::after{inset:18px}
@media (max-width:767px){.a-bleed{height:auto;aspect-ratio:4/5}.a-bleed.frame>img{top:0;height:100%}.a-bleed.frame::after{inset:12px}}

/* ------------------------------------------------------------ 4. comparison tables as a diptych ------------------------------------------------------------ */
.a-vs-wrap{margin:clamp(36px,4vw,56px) 0 0}
.a-vs{width:100%;border-collapse:collapse;table-layout:fixed}
.a-vs th{text-align:left;vertical-align:bottom;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.8vw,42px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);padding:0 clamp(20px,3vw,48px) 22px 0;border-bottom:1px solid var(--gold)}
.a-vs th+th,.a-vs td+td{padding-left:clamp(20px,3vw,48px);border-left:1px solid var(--hair)}
.a-vs th+th{font-style:italic;color:var(--gold-deep)}
.a-vs td{vertical-align:top;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.45vw,21px);line-height:1.45;color:var(--ink-2);padding:18px clamp(20px,3vw,48px) 18px 0;border-bottom:1px solid var(--hair)}
.a-vs td a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px;padding:0}
.a-vs-after{margin:28px auto 0;max-width:536px}
@media (max-width:767px){
  .a-vs th{font-size:23px;padding:0 14px 16px 0}
  .a-vs th+th,.a-vs td+td{padding-left:14px}
  .a-vs td{font-size:16.5px;line-height:1.45;padding:14px 14px 14px 0}
  .a-vs td a{font-size:11.5px;letter-spacing:.16em}
}

/* the two definitions (vs awakening): A ceremony / A process */
.a-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin:clamp(44px,5vw,72px) 0}
.a-def{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border-top:1px solid var(--gold);padding-top:24px}
.a-def h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.2vw,48px);line-height:1;letter-spacing:-.012em;color:var(--ink)}
.a-def+.a-def h3{font-style:italic;color:var(--gold-deep)}
.a-def p{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.55;color:var(--ink-2);max-width:24em;text-wrap:balance}
@media (max-width:767px){.a-defs{grid-template-columns:minmax(0,1fr);gap:36px;margin:40px 0}.a-def h3{font-size:36px}.a-def p{font-size:19px}}

/* ------------------------------------------------------------ 5. care notice (screening / medical) ------------------------------------------------------------ */
.prose .a-care,.a-care{position:relative;background:var(--light);border:1px solid var(--hair-strong);padding:28px 32px 28px 58px;margin:1.6em 0}
.a-care::before{content:"";position:absolute;left:28px;top:36px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(182,154,94,.16)}
.a-care p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;color:var(--ink-2)}
.prose-sec.alt .a-care{background:var(--ivory)}
@media (max-width:767px){.prose .a-care,.a-care{padding:22px 20px 22px 44px}.a-care::before{left:20px;top:30px}}

/* small italic disclaimer */
.prose .a-note{font-style:italic;font-size:16px;line-height:1.6;color:var(--soft)}

/* ------------------------------------------------------------ 6. numbered grids: signs of awakening (2 x 2), activation / yoga / shaktipat (3) ------------------------------------------------------------ */
.a-head{max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin:0 auto clamp(40px,5vw,72px)}
.a-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.a-head h2 em{font-style:italic;color:var(--gold-deep)}
.a-head p{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.65;color:var(--ink-2);text-wrap:balance}
.a-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(32px,4.5vw,72px)}
.a-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.a-cell{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--hair-strong);padding-top:24px}
.a-cell .num{font-size:16px;text-align:center}
.a-cell h3{text-align:center}
.a-cell h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.15;color:var(--ink);text-wrap:balance}
.a-cell p{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.6;color:var(--ink-2)}
.a-cell p+p{margin-top:.2em}
.a-grid>.a-cell:nth-child(even){margin-top:clamp(0px,4vw,64px)}
.a-grid.three>.a-cell:nth-child(even){margin-top:0}
.a-grid.three>.a-cell:nth-child(2){margin-top:clamp(0px,3vw,48px)}
.a-grid.three>.a-cell:nth-child(3){margin-top:clamp(0px,6vw,96px)}
@media (max-width:1023px){.a-grid.three{grid-template-columns:minmax(0,1fr)}.a-grid.three>.a-cell:nth-child(n){margin-top:0}}
@media (max-width:767px){.a-grid{grid-template-columns:minmax(0,1fr);gap:40px}.a-grid>.a-cell:nth-child(n){margin-top:0}.a-cell p{font-size:18px}}

/* ------------------------------------------------------------ 7. instruments gallery (sound bath) ------------------------------------------------------------ */
.a-inst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(24px,3vw,48px)}
.a-inst figure{display:flex;flex-direction:column;gap:18px;margin:0}
.a-inst figure:nth-child(3n+2){margin-top:clamp(0px,6vw,96px)}
.a-inst .frame{aspect-ratio:1;width:100%}
.a-inst .frame::after{inset:12px}
.a-inst .frame img{transition:transform 2.2s var(--ease)}
.a-inst figure:hover .frame img{transform:scale(1.04)}
.a-inst figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.a-inst h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.3vw,34px);line-height:1.05;color:var(--ink);text-wrap:balance}
.a-inst p{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.55;color:var(--ink-2);text-wrap:balance;max-width:20em}
@media (max-width:1023px){.a-inst{grid-template-columns:repeat(2,minmax(0,1fr))}.a-inst figure:nth-child(3n+2){margin-top:0}.a-inst figure:nth-child(even){margin-top:64px}}
@media (max-width:767px){
  .a-inst{gap:36px 14px}
  .a-inst figure{gap:12px}
  .a-inst figure:nth-child(even){margin-top:48px}
  .a-inst .frame::after{inset:8px}
  .a-inst figcaption{gap:6px}
  .a-inst figcaption .num{font-size:13px}
  .a-inst h3{font-size:21px}
  .a-inst p{font-size:15.5px;line-height:1.5}
}

/* ------------------------------------------------------------ 8. new moon / full moon pair (cacao) ------------------------------------------------------------ */
.a-moons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(48px,6vw,88px)}
.a-moon{display:flex;flex-direction:column;background:var(--ivory);border:1px solid var(--hair);color:inherit}
.a-moon:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.a-moon .frame{aspect-ratio:16/10}
.a-moon .frame img{transition:transform 2.2s var(--ease)}
.a-moon:hover .frame img{transform:scale(1.04)}
.a-moon-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:clamp(24px,2.6vw,36px)}
.a-moon h3{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.8vw,42px);line-height:1;color:var(--ink)}
.a-moon:nth-child(2) h3{font-style:italic;color:var(--gold-deep)}
.a-moon ul{width:100%;border-top:1px solid var(--rule-ink)}
.a-moon li{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.45;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--rule-ink)}
.a-moon .more{margin-top:6px}
@media (max-width:767px){.a-moons{grid-template-columns:minmax(0,1fr);gap:24px}.a-moon:nth-child(2){margin-top:0}.a-moon li{font-size:17.5px}}

/* her affiliate code, set as a small hairline tag inside the sentence */
.prose strong.a-code,.prose-txt strong.a-code{display:inline-block;font-family:var(--sans);font-weight:400;font-size:.72em;letter-spacing:.28em;color:var(--gold-text);border:1px solid var(--hair-strong);padding:.15em .5em .15em .78em;line-height:1.5;vertical-align:.12em}

/* the feel list centred a little left in a band */
.prose .feel{margin:1.4em 0}

/* ------------------------------------------------------------ 9. closing band: three links (guide / ceremonies / start here) ------------------------------------------------------------ */
.a-final-new{margin-top:-6px}
/* the closing band is centred at every width, so the third link sits on the axis under the cta group */
.a-final-new{align-self:center;justify-content:center;text-align:center}
@media (max-width:767px){.a-final-new{margin-top:4px}}

/* ------------------------------------------------------------ 10. author block spacing on these pages ------------------------------------------------------------ */
.a-more{margin-top:2.2em}

/* ============================================================ JOURNAL (archive) ============================================================ */
/* the list hangs from the same left edge as the articles, so the serpent keeps its margin from the hero to the crown */
.j-hero .h1{font-size:clamp(76px,10vw,160px);line-height:.86}
.j-hero .h1 em{font-size:.8em;margin-top:0}
.j-hero .lead{max-width:24em}
@media (max-width:767px){.j-hero .h1{font-size:clamp(72px,22vw,96px)}}

.j-list{position:relative;padding:clamp(24px,3vw,48px) 0 clamp(90px,11vw,150px)}
.j-group+.j-group{margin-top:clamp(64px,8vw,120px)}
.j-gh{display:flex;align-items:baseline;justify-content:center;text-align:center;gap:22px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,46px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);padding-bottom:20px;border-bottom:1px solid var(--gold)}
.j-gh .num{font-size:15px}
.j-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;column-gap:clamp(22px,3vw,48px);align-items:center;padding:26px 0;border-bottom:1px solid var(--hair);color:inherit}
.j-thumb{position:relative;width:112px;aspect-ratio:3/4;overflow:hidden;background:var(--linen)}
.j-thumb.frame::after{inset:7px}
.j-thumb.arch::after{inset:6px}
.j-thumb img{transition:transform 2.2s var(--ease)}
.j-row:hover .j-thumb img{transform:scale(1.06)}
.j-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.j-title{font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.04;letter-spacing:-.01em;color:var(--ink);transition:color var(--t-fast);text-wrap:balance}
.j-row:hover .j-title{color:var(--gold-deep)}
.j-ex{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--ink-2);max-width:30em}
.j-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.j-side .kick{color:var(--soft)}
@media (max-width:767px){
  .j-row{grid-template-columns:84px minmax(0,1fr);column-gap:18px;row-gap:8px;padding:22px 0;align-items:start}
  .j-thumb{width:84px;grid-row:1/3}
  .j-title{font-size:26px}
  .j-ex{font-size:17px}
  .j-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:12px}
}


/* FAQ pull lines: site.css sizes them but leaves them in the answer's Jost; set them as the serif italic gold they are everywhere else */
/* closing headline: her two sentences on two lines */
.a-art .final-h em,.j-page .final-h em{display:block}

/* site.js sizes the serpent's SVG to the document height, and the SVG itself then keeps the document that tall:
   after any transient growth (lazy images, the phone index toggling) the page gains empty space below the footer.
   Capping the SVG box at its containing block (body) stops the ratchet; the path still paints (overflow:visible). */
/* tablet: stacked spreads hang from the article edge too, so the line (prose margin) never runs through their text */
@media (min-width:768px) and (max-width:1023px){.a-art .prose-sec .wrap.ed{padding-left:var(--hang);padding-right:var(--hang)}}
.a-grid.three .a-cell p{font-size:18px;line-height:1.6}
.ladder.a-sm .ln{text-wrap:balance}
.prose-txt .a-note{font-style:italic;font-size:16px;line-height:1.6;color:var(--soft)}
.a-hed .a-hed-media.a-sq{aspect-ratio:1}
.a-moon-body .more{font-size:11px}

/* ------------------------------------------------------------ review fixes ------------------------------------------------------------ */
/* italic gold deck lines and table heads stay at 24 px+ so --gold-deep counts as large text (AA 3:1) */
@media (max-width:767px){.a-vs th{font-size:24px}}
/* vs awakening: "Receive / the transmission" on two lines, never "the" alone */
.final-h.a-final-mid{font-size:clamp(44px,5vw,84px);line-height:.98}
@media (max-width:767px){.final-h.a-final-mid{font-size:clamp(40px,11vw,48px)}}
/* tablet (768-1023): the closing copy column is ~300 px wide, so her longer CTA labels ("Explore the free Kundalini guide",
   "Explore Kundalini Activation ceremonies") wrap inside it instead of running off the right edge */
@media (min-width:768px) and (max-width:1023px){
  .a-art .final-cta{align-self:stretch;min-width:0;max-width:100%}
  .a-art .final-cta .btn{white-space:normal;line-height:1.6;padding:12px 28px;text-wrap:balance;max-width:100%;text-align:center}
  .a-art .final-cta .link-ul{white-space:normal;line-height:1.6;text-wrap:balance;max-width:100%}
}

/* ------------------------------------------------------------ alignment review, round 1 ------------------------------------------------------------ */
/* a short list straight under a centred heading (cacao "How to prepare") sits as one block on the axis; its lines keep their
   left dash edge. A long list (fit-content = the full column) is unchanged. */
.prose>h2+ul,.prose-txt>h2+ul{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
/* the closing disclaimer under the centred author block follows that block */
.author+.a-note,.prose .author+.a-note{text-align:center;text-wrap:balance;max-width:34em;margin-left:auto;margin-right:auto}
/* the one-sentence note under each comparison table is three lines on tablet/desktop: centred under the centred table head */
@media (min-width:768px){.a-vs-after p{text-align:center;text-wrap:balance}}
/* the Signs intro reads left on phone (5 lines) but is three lines at desktop: centre it under its heading there */
@media (min-width:1024px){.a-head p.is-reading{text-align:center;text-wrap:balance}}

/* ------------------------------------------------------------ alignment review, round 2 ------------------------------------------------------------ */
/* closing bands: one rule for every article. A final body of up to four lines is centred and balanced under its centred
   heading (cacao, sound bath, vs awakening at every width; what-happens and what-is-KA from tablet up, where they run 3-4
   lines). Only the 5-6 line phone bodies (.is-reading on what-happens and what-is-KA) keep their left-set reading column. */
.a-art .final-txt>.body{text-wrap:balance}
@media (min-width:768px){.a-art .final-txt>.body.is-reading{text-align:center}}
/* vs awakening: the single paragraph that opens the closing composition (paragraph, pull line, author, note: all centred)
   sits on the same axis instead of hanging left between centred blocks */
.prose>p.a-lede{text-align:center;text-wrap:balance;max-width:30em;margin-left:auto;margin-right:auto}