/* pages.css: the few rules the core public pages (home, readings, oracle, membership, about, contact, reviews,
   sign in) add on top of style.css. Tokens only; no new colours. */

/* Warm light behind the hero card and Today's card (BUILD_BRIEF §2b: "gold tokens at low strength").
   A still radial wash, nothing moves. The plate's own hairline frame (::after) stays on top. */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:-18%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 20%,transparent),color-mix(in srgb,var(--gold) 7%,transparent) 55%,transparent)}
.today-in .glow::before{inset:-35% -60%}

/* A framed card stands where Rosemary's portrait was (she asked on 14 Oct 2026 for no picture of herself on the
   site): the 1909 card at its own proportions at every width, a gilded edge, the plate's hairline frame and the
   glow behind. Small on a phone, so her sentence and the first button still share the first screen (§6.1). */
.card-plate{width:150px;margin:12px}
.hero .card-plate img,.about-grid .card-plate img,.card-plate img{display:block;aspect-ratio:480/827;object-fit:cover;padding:5px;border:1px solid var(--gold-2);border-radius:var(--r-s);background:var(--card)}
.hero .hero-art:has(.card-plate){justify-self:start;width:max-content}
.hero-grid > .card-plate{justify-self:start}
.about-grid > .card-plate{width:190px}
@media (min-width:768px){ .card-plate{width:210px} }
@media (min-width:1024px){
  .card-plate{width:300px}
  .hero .hero-art:has(.card-plate),.hero-grid > .card-plate{justify-self:center}
  .about-grid > .card-plate{width:280px;justify-self:center}
}

/* Below 1024 the section head sits above its content inside .two-col, whose gap already spaces them;
   the head's own bottom margin would double that gap. */
@media (max-width:1023.98px){
  .two-col > .section-head{margin-bottom:0}
}

/* The glow may reach past the screen edge on a phone; clip it sideways without making main a scroll box. */
#main{overflow-x:clip}

/* Phone: the Oracle panel gives its reading more width (the bubble inside already has its own padding). */
@media (max-width:767.98px){
  .oracle{padding-inline:var(--s3)}
}

/* Readings page (docs/BOOKING.md): a length and its packs sit together. */
.book-group + .book-group{margin-top:var(--s5)}
[data-credits-line] a{color:var(--cream);text-underline-offset:4px;text-decoration-color:var(--gold-line)}
.member-price{color:var(--gold-2)}
[data-member-save] a{color:var(--cream);text-underline-offset:4px;text-decoration-color:var(--gold-line)}

/* ==== The opening Rosemary asked for (15 Oct 2026): her headline, the Seed of Life, the Path of Remembrance ==== */
/* Her ten-word headline needs more than the 12ch the display step allows, so it holds three lines on a phone and the
   first button still sits above 640px at 375 wide (§6.1). */
.hero-soul .hero-text h1{max-width:22ch}
.hero-soul .hero-text .measure{max-width:52ch}
.hero-words{margin:0;font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero-words span{margin-inline:.2em}
/* The plate: a circle, not a card. Sized so the art stays small on a phone and the text leads; from 1024 it sits to
   the right of the words like the card did. The hairline frame (.plate::after) and the glow stay. */
.soul-plate{width:168px;margin:12px}
.soul-plate .soul{display:block;width:100%;height:auto;border-radius:var(--r-full);overflow:visible}
.hero .hero-art:has(.soul-plate){justify-self:start;width:max-content}
@media (min-width:768px){ .soul-plate{width:236px} }
@media (min-width:1024px){ .soul-plate{width:320px} .hero .hero-art:has(.soul-plate){justify-self:center} }
/* A slow breath: the core brightens and the seed swells a little, eight seconds a cycle, still under reduced motion. */
.soul-breath{transform-origin:200px 200px;animation:soul-breath 8s ease-in-out infinite}
.soul-core{animation:soul-core 8s ease-in-out infinite}
.soul-motes circle{animation:soul-mote 6s ease-in-out infinite}
.soul-motes circle:nth-child(2n){animation-delay:-2s} .soul-motes circle:nth-child(3n){animation-delay:-4s}
@keyframes soul-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes soul-core{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes soul-mote{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .soul-breath,.soul-core,.soul-motes circle{animation:none} }
/* The Path of Remembrance (Rosemary, 15 Oct 2026): her teaching on consciousness, energy, chakras and spiritual awakening.
   The four doors are the way in and jump to each theme; each theme ends with one thing to do on the site today (.path-do);
   the only selling is the quiet line at the end (.path-close). Gold on night, the hairline and the soft line only. */
.path-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.path-door{display:grid;gap:var(--s2);align-content:start;height:100%;padding:var(--card-pad);background:var(--card);border:var(--soft);border-radius:var(--r-s);color:var(--cream);text-decoration:none;transition:border-color var(--dur-ui),background var(--dur-ui)}
.path-door:hover,.path-door:focus-visible{border-color:var(--gold-line);background:var(--card-2)}
.path-door strong{font:400 var(--t4)/var(--lh4) var(--f-display)}
.path-door > span{font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.path-glyph{width:32px;height:32px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.path-glyph .fill{fill:var(--gold);stroke:none}
@media (min-width:768px){ .path-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .two-col .path-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.path .path-door > span{min-height:calc(var(--lh6) * 2)}
.path-themes{list-style:none;margin:var(--s6) 0 0;padding:0}
.path-theme{display:grid;gap:var(--s4);padding-block:var(--s6);border-top:1px solid var(--line);scroll-margin-top:calc(var(--tap) + var(--s4))}
.path-theme-head{display:grid;gap:var(--s3);align-content:start;justify-items:start}
.path-theme-head .path-glyph{width:40px;height:40px}
.path-theme-head h3{margin:0;font-weight:var(--w-display)}
.path-theme-body{display:grid;gap:var(--s4)}
.path-theme-body p{margin:0}
.path-theme-body .disclosure{margin-top:calc(var(--s2) * -1)}
.chakra-list{list-style:none;margin:0;padding:0;max-width:var(--measure)}
.chakra-list li{display:grid;grid-template-columns:2ch minmax(0,1fr);column-gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--line)}
.chakra-list li:last-child{border-bottom:1px solid var(--line)}
.chakra-list .n{grid-row:span 2;font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--gold);text-align:right}
.chakra-list strong{font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.chakra-list .where{font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3);margin-left:var(--s2)}
.chakra-list .what{grid-column:2;display:block;color:var(--cream-2)}
.path-do{display:grid;gap:var(--s2);padding:var(--card-pad);background:var(--card);border:var(--soft);border-radius:var(--r-s)}
.path-do p:not(.label){color:var(--cream-2)}
.path-do .actions{margin-top:var(--s2)}
.path-close{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:baseline;padding-top:var(--s5);border-top:1px solid var(--line)}
.path-close p{margin:0}
@media (min-width:768px){ .path-theme{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s6)} }
@media (min-width:1024px){ .path-theme-head{position:sticky;top:96px;align-self:start} }
/* On a phone the Seed of Life is a soft backdrop behind her words, so the first screen holds the headline, her two
   paragraphs and the button (§6.1: the button above 640px at 375 wide; measured 15 Oct 2026). Her words are kept whole
   and set one step smaller. From 768 the symbol is the plate beside the text and the deck card rests on it again. */
@media (max-width:767.98px){
  .hero-soul .hero-grid{position:relative;gap:0}
  .hero-soul .hero-art{position:absolute;inset:0;z-index:-1;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;pointer-events:none}
  .hero-soul .soul-plate{width:min(88vw,360px);margin:0;opacity:.38;transform:translateY(-6%)}
  .hero-soul .soul-plate::after{display:none}
  .hero-soul .glow::before{display:none}
  .hero-soul .hero-card{display:none}
  .hero-soul .hero-text{padding-top:var(--s5)}
  .hero-soul .hero-text h1{font-size:36px;line-height:40px}
  .hero-soul .hero-text .measure{font-size:var(--t6);line-height:var(--lh6)}
}
/* From Rosemary: the master feed on the home page (docs/GROWTH.md, public/js/feed.js). The Sanctuary has the same in sanctuary.css. */
.feed{display:grid;gap:var(--s4);list-style:none;margin:0;padding:0}
.feed-item{display:grid;gap:var(--s3);padding:var(--card-pad);background:var(--card);border:var(--soft);border-radius:var(--r-m)}
.feed-media{display:block;width:100%;max-width:420px;height:auto;border-radius:var(--r-s);background:var(--deep)}
.feed-body{display:grid;gap:var(--s2);min-width:0}
.feed-text{color:var(--cream);overflow-wrap:anywhere}
.feed-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media (min-width:768px){ .feed-item:has(.feed-media){grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:start} }
/* Special pricing (docs/SPECIAL_PRICING.md): only the signed-in member it belongs to ever sees these. */
.price-was{text-decoration:line-through;text-decoration-thickness:1px;color:var(--cream-3)}
.your-price{color:var(--gold-2);font-weight:500}
.special-note{color:var(--cream-3)}
.tier .your-price{display:block;margin-top:var(--s1)}

/* ---- Sign in: "Continue with Google" (docs/AUTH.md). Google's own button rules, which are the one place the site's palette gives way:
   a white button, text near-black, a 1px grey line, the G mark at 20px, medium weight. These four are Google's colours, kept as tokens here. ---- */
:root{--g-btn:#fff;--g-btn-ink:#1f1f1f;--g-btn-line:#747775;--g-btn-hover:#f2f2f2;--g-btn-shadow:rgba(0,0,0,.3)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:var(--tap);padding:0 16px;background:var(--g-btn);color:var(--g-btn-ink);border:1px solid var(--g-btn-line);border-radius:var(--r-s);font:500 15px/1 Roboto,var(--f-body);letter-spacing:.2px;text-decoration:none;transition:background-color var(--dur-ui),box-shadow var(--dur-ui)}
.btn-google:hover{background:var(--g-btn-hover);box-shadow:0 1px 2px var(--g-btn-shadow);color:var(--g-btn-ink)}
.btn-google:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-google svg{flex:none}
.or-line{display:flex;align-items:center;gap:var(--s3);margin:0;color:var(--cream-3);font-size:var(--t6);line-height:var(--lh6)}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* Rosemary's picture on About (pages.js herPicture; public/js/avatar.js draws the same ring in the shells) */
.avatar-icon svg,.avatar svg{width:68%;height:68%;color:var(--gold);fill:none}
.avatar-photo{border-color:var(--gold-line)}
.about-pic{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3)}
.about-pic[hidden]{display:none}
/* the full AI notice at the foot of the Oracle page (15 Oct 2026); the one-line label stays above the title */
.ai-foot{padding-block:var(--s5)}
.ai-foot p{color:var(--cream-3)}