/* ═══════════════════════════════════════════════════════════════════
   THE METHOD
   How she uses astrology to support her clients, read down the page
   in three chapters joined by a thread, emblem beside text, sides
   alternating. The emblems are instruments: the first is set to
   tonight's sky, the second is a slider from a horoscope app's twelve
   boxes to the thousands of moving parts, the third measures out a
   hard season under Saturn and Pluto, who say how long they take.
   ═══════════════════════════════════════════════════════════════ */
:root { --mt-ink:#6B5E48; --mt-lav:#9998D0; --mt-lavd:#6F6DAE; --mt-paper:#F2EEE6; }
html[data-sect] {
  --d-mt-ink:#6B5E48; --n-mt-ink:#C9C3B4;
  --d-mt-paper:#F2EEE6; --n-mt-paper:#231E1A;
  --d-mt-lavd:#6F6DAE; --n-mt-lavd:#B4B2E0;
}
html[data-sect] {
  --mt-ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-mt-ink)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-mt-ink)));
  --mt-paper:color-mix(in oklab, var(--d-mt-paper) var(--day-pct), var(--n-mt-paper));
  --mt-lavd:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-mt-lavd)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-mt-lavd)));
}

.method .method-lede { font-family:var(--quote); font-style:italic; font-size:1.12rem; color:var(--dim); margin:0 0 2.6rem; }
.chapters { position:relative; display:grid; gap:clamp(2.4rem,5vw,4.2rem); }
/* the thread */
.chapters::before { content:''; position:absolute; left:50%; top:1rem; bottom:1rem; width:1px; background:var(--hair); transform:translateX(-50%); }
.ch { position:relative; display:grid; grid-template-columns:minmax(0, 18rem) 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.ch--rev { grid-template-columns:1fr minmax(0, 18rem); }
.ch--rev .ch-emblem { order:2; } .ch--rev .ch-text { order:1; }
.ch::before { content:''; position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); z-index:1;
  background:var(--mt-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%239998D0' d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat; border-radius:50%; }

/* text */
.ch-text { position:relative; background:var(--mt-paper); padding:1.4rem 1.6rem 1.5rem; border-radius:6px; z-index:1; }
html[data-sect="nocturnal"] .ch-text { background:color-mix(in srgb, var(--mt-paper) 70%, transparent); }
.ch-text p { max-width:none; }
.ch-num { font-family:var(--quote); font-style:italic; font-size:1.1rem; color:var(--mt-lavd); margin:0 0 .1rem; }
.ch-title { font-family:var(--display); font-weight:400; font-kerning:none; font-size:1.5rem; line-height:1.1; margin:0 0 .6rem; }
.ch-title em { font-style:italic; color:var(--accent); }
.ch-pull { font-family:var(--quote); font-style:italic; font-size:1.05rem; line-height:1.4; color:var(--ink); margin:0 0 .8rem; text-wrap:pretty; }
.ch-text > p:not(.ch-num):not(.ch-pull):not(.ch-tags) { font-size:.95rem; line-height:1.6; color:var(--body-ink); }
.ch-tags { display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.9rem 0 0; }
.ch-tags span { font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.18em; text-transform:uppercase; color:var(--mt-ink); border:1px solid var(--hair); border-radius:999px; padding:.3rem .6rem; }

/* emblems */
.ch-emblem { position:relative; z-index:1; display:grid; justify-items:center; gap:.6rem; }
.ch-emblem svg { width:min(15rem, 100%); height:auto; overflow:visible; }
.ch-emblem circle, .ch-emblem path { fill:none; stroke:var(--mt-ink); stroke-width:.9; stroke-linecap:round; }
.ch-emblem .dash { stroke-dasharray:2 2.6; stroke-width:.6; opacity:.7; }
.ch-emblem .hair { stroke-width:.45; opacity:.55; }
.ch-emblem .dot { fill:var(--mt-lav); stroke:none; }
.ch-emblem .tick { stroke:var(--mt-lavd); stroke-width:1.1; }
.ch-emblem .gl { font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols',serif; font-size:9px; fill:var(--mt-ink); text-anchor:middle; dominant-baseline:central;
  paint-order:stroke; stroke:var(--mt-paper); stroke-width:2.4px; }
.ch-emblem .gl--big { font-size:22px; fill:var(--mt-lavd); stroke-width:0; }
.ch-emblem .lbl { font-family:var(--caps); font-size:5px; letter-spacing:.2em; text-transform:uppercase; fill:var(--mt-ink); text-anchor:middle; }
.ch-cap { margin:0; font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.2em; text-transform:uppercase; color:var(--mt-ink); text-align:center; line-height:1.9; display:grid; }
.ch-cap b { font-weight:400; color:var(--mt-lavd); }
/* i · the outer ring turns at the pace of a sky, the inner holds */
.ring-out { transform-origin:80px 80px; animation:ch-turn 240s linear infinite; }
.ring-out .gl { transform-box:fill-box; transform-origin:center; animation:ch-counter 240s linear infinite; }
@keyframes ch-turn { to { transform:rotate(360deg); } } @keyframes ch-counter { to { transform:rotate(-360deg); } }
/* ii · the two ways of seeing, mixed by the slider */
#ch-parts { --mix:0; }
#ch-parts .boxes { opacity:calc(1 - var(--mix) * .9); transition:opacity .15s linear; }
#ch-parts .gl--one { font-size:16px; fill:var(--mt-lavd); }
#ch-parts .field circle { fill:var(--mt-lav); stroke:none; opacity:calc(var(--mix) * .9); animation:ch-twinkle 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; transform:scale(calc(.2 + var(--mix) * .8)); transition:transform .3s ease; }
@keyframes ch-twinkle { 0%,100% { filter:brightness(.7); } 50% { filter:brightness(1.3); } }
.ch-slider { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; width:min(15rem, 100%); font-family:var(--caps); font-size:var(--caps-xxs); letter-spacing:.18em; text-transform:uppercase; color:var(--mt-ink); }
.ch-slider input { -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--hair); border-radius:2px; outline:none; cursor:pointer; }
.ch-slider input::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--mt-lavd); border:3px solid var(--mt-paper); box-shadow:0 0 0 1px var(--mt-lavd); }
.ch-slider input::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--mt-lavd); border:3px solid var(--mt-paper); }
/* iii · the season measures itself out; the planets say how long they take */
#ch-season .arc { stroke:var(--mt-lavd); stroke-width:1.3; stroke-dasharray:150; stroke-dashoffset:150; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.3,1) .3s; }
#ch-season .brk { stroke:var(--mt-lavd); stroke-width:1; opacity:0; transition:opacity .4s ease 1.8s; }
#ch-season .lbl { opacity:0; transition:opacity .5s ease 2.1s; }
#method.is-in #ch-season .arc { stroke-dashoffset:0; }
#method.is-in #ch-season .brk, #method.is-in #ch-season .lbl { opacity:1; }
#ch-season .planet { cursor:help; pointer-events:auto; }
#ch-season .halo { stroke:none; fill:color-mix(in srgb, var(--mt-lav) 18%, transparent); opacity:0; transition:opacity .3s ease; }
#ch-season .planet.on .halo { opacity:1; }
.ch-emblem[aria-hidden] { pointer-events:auto; }

@media (max-width:860px) {
  .chapters::before, .ch::before { display:none; }
  .ch, .ch--rev { grid-template-columns:1fr; gap:1rem; }
  .ch--rev .ch-emblem { order:1; } .ch--rev .ch-text { order:2; }
  .ch-text { padding:1.2rem 1.1rem 1.3rem; }
  .ch-emblem svg { width:min(12rem, 70vw); }
}
@media (prefers-reduced-motion:reduce) { .ring-out, .ring-out .gl, #ch-parts .field circle { animation:none; } #ch-season .arc, #ch-season .brk, #ch-season .lbl { transition:none; } }

/* ═══ ROUND THREE: SCALE, LIGHT, A FEW MORE TRUE DETAILS ═══ */
:root { --mt-rose:#D4A6B6; }
.ch { grid-template-columns:minmax(0, 21rem) 1fr; }
.ch--rev { grid-template-columns:1fr minmax(0, 21rem); }
.ch-emblem svg { width:min(19rem, 100%); }
/* lamplight behind each instrument */
.ch-emblem::before { content:''; position:absolute; left:50%; top:42%; width:26rem; height:26rem; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--mt-lav) 16%, transparent), transparent 72%); }
html[data-sect="nocturnal"] .ch-emblem::before { background:radial-gradient(closest-side, color-mix(in srgb, var(--mt-lav) 12%, transparent), transparent 72%); }
/* the chapter mark: a large faint numeral beside the title */
.ch-num { position:absolute; left:-.2rem; top:-.9rem; font-size:4.6rem; line-height:1; color:var(--mt-lavd); opacity:.14; pointer-events:none; margin:0; }
.ch-text { padding:1.9rem 1.8rem 1.7rem; }
.ch-title { font-size:1.95rem; margin:.2rem 0 .7rem; }
.ch-pull { font-size:1.12rem; }
.ch-text > p:not(.ch-num):not(.ch-pull):not(.ch-tags) { font-size:.98rem; max-width:38rem; }
/* the thread inks in; the stars light */
.thread-ink { position:absolute; left:50%; top:1rem; width:1px; height:0; background:var(--mt-lavd); transform:translateX(-50%); transition:height .25s linear; z-index:0; }
.ch::before { transition:box-shadow .5s ease, background-color .5s ease; }
.ch.lit::before { box-shadow:0 0 0 4px color-mix(in srgb, var(--mt-lav) 30%, transparent), 0 0 18px 2px color-mix(in srgb, var(--mt-lav) 45%, transparent); }
/* i · the Sun in rose, the Moon drawn true */
.tonight text:first-child { fill:var(--mt-rose); }
.tonight .tick:first-of-type { stroke:var(--mt-rose); }
.sky-moon .m-paper { fill:var(--mt-paper); stroke:none; }
.sky-moon .m-disc { fill:color-mix(in srgb, var(--mt-ink) 22%, transparent); stroke:none; }
.sky-moon .m-lit { fill:var(--mt-ink); stroke:none; }
/* placement lives on the outer group as an attribute; only the inner group spins against the ring */
.ring-out .moon-spin { transform-box:fill-box; transform-origin:center; animation:ch-counter 240s linear infinite; }
/* ii · the readout */
.ch-read { margin:-.2rem 0 0; font-family:var(--quote); font-style:italic; font-size:.9rem; color:var(--dim); text-align:center; min-height:1.3em; }
/* iii · the arc warms at its crest and reshapes to the planet */
#ch-season .arc { transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.3,1) .3s, d .6s cubic-bezier(.2,.7,.3,1); stroke:url(#ch-warm); }
#ch-season .brk { transition:opacity .4s ease 1.8s, d .6s cubic-bezier(.2,.7,.3,1); }
/* the foot */
.method-foot { margin:2.6rem 0 0; text-align:center; font-family:var(--quote); font-style:italic; font-size:1.05rem; color:var(--dim); max-width:none; }
.method-foot a { color:var(--accent-text); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.method-foot a:hover { color:var(--ink); border-color:currentColor; }
@media (max-width:860px) {
  .ch, .ch--rev { grid-template-columns:1fr; }
  .ch-emblem svg { width:min(14rem, 74vw); }
  .ch-emblem::before { width:18rem; height:18rem; }
  .ch-num { font-size:3.4rem; }
  .ch-title { font-size:1.6rem; }
  .thread-ink { display:none; }
}

/* ═══ ROUND FOUR: THE THREAD RUNS IN THE GAP ═══ equal halves, so the thread at the
   centre falls between emblem and card on every chapter; the cards are opaque so
   nothing shows through the paragraphs, by day or by night. */
.ch, .ch--rev { grid-template-columns:1fr 1fr; gap:clamp(2.6rem,5vw,4.6rem); }
.ch-text { background:var(--mt-paper); }
html[data-sect="nocturnal"] .ch-text { background:var(--mt-paper); }
.chapters::before { opacity:.55; }
.thread-ink { box-shadow:0 0 10px 1px color-mix(in srgb, var(--mt-lav) 35%, transparent); }
.ch::before { z-index:2; }
.ch-emblem { justify-self:center; width:100%; }
@media (max-width:860px) { .ch, .ch--rev { grid-template-columns:1fr; gap:1rem; } }