/* ==========================================================================
   Brykanova Astrology - V1
   --------------------------------------------------------------------------
   One page, one file of CSS, no build step. Split out of index.html only
   because V1 is a real scrolling page rather than a single screen, and 700
   lines of inline <style> stops being readable.

   THE GROUND is the plum sky from the social kit, so the page and the posts
   are visibly one brand. Deliberately NOT the near-black of the V2 app: that
   is right for a long read at a desk and reads as a dead rectangle on a phone
   held at arm's length, which is how most of this will be seen.
   ========================================================================== */

:root{
  --sky-1:#4b3f6d;
  --sky-2:#2b2440;
  --sky-3:#1d1828;
  --panel:rgba(232,220,192,.035);
  --gold:#c9a227;
  --gold-lit:#e3c46a;
  --parchment:#e8dcc0;
  --text-2:#c3bbb0;
  --muted:#9d93b8;
  --hairline:rgba(201,162,39,.26);
  --hairline-soft:rgba(232,220,192,.10);
  --font-display:'Cormorant Garamond','Iowan Old Style',Palatino,Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --wrap:64rem;
  --gutter:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
/* `hidden` is only a UA-stylesheet display:none, so any class that sets
   display beats it. That shipped once as a dead button rendered next to the
   note meant to replace it. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  background:var(--sky-3);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The sky sits behind everything and does not scroll away. The star field is
   static: a twinkle on a page whose job is one decision is decoration
   competing with the decision. */
.sky{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(122% 62% at 50% -8%, var(--sky-1) 0%, var(--sky-2) 44%, var(--sky-3) 100%);
}
.sky::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(232,220,192,.13) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(201,162,39,.10) 1px, transparent 0);
  background-size:96px 96px,151px 143px;
  background-position:0 0,53px 67px;
}
/* The named stars. Each one carries its own period (--d) and phase (--p) in
   its markup, so no two pulse together and the field reads as a sky rather
   than a blinking pattern. The gold sparks do not pulse - they flash, the way
   a real star glints once and goes quiet. The whole field and the moon drift
   against each other, slowly enough that you feel it rather than see it. */
.sky > svg{
  position:absolute;inset:0;width:100%;height:100%;
  animation:field-drift 240s ease-in-out infinite alternate;
}
.sky .tw{opacity:.18;animation:twinkle var(--d,6s) ease-in-out var(--p,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.85}}
.sky .glint{
  opacity:.16;transform-box:fill-box;transform-origin:center;
  animation:glint var(--d,15s) ease-in-out var(--p,0s) infinite;
}
@keyframes glint{
  0%,82%,100%{opacity:.16;transform:scale(.85)}
  87%{opacity:1;transform:scale(1.35)}
  92%{opacity:.35;transform:scale(.95)}
}
@keyframes field-drift{to{transform:translate(9px,-7px)}}

/* Tonight's moon - drawn by the script with the real phase for the night the
   page is opened on. Fixed in the sky like everything else here, drifting
   opposite the star field. Absent with scripting off, which is honest: it is
   a decoration, not content. */
.moon{
  position:absolute;top:11vh;right:clamp(1.25rem,9vw,8.5rem);
  width:clamp(44px,6vw,60px);aspect-ratio:1;
  filter:drop-shadow(0 0 16px rgba(232,220,192,.28));
  animation:moon-drift 210s ease-in-out infinite alternate;
}
.moon svg{width:100%;height:auto;display:block}
@keyframes moon-drift{to{transform:translate(-14px,10px)}}

@media (prefers-reduced-motion:reduce){
  .sky .tw,.sky .glint,.sky > svg,.moon{animation:none}
  .sky .tw,.sky .glint{opacity:.45}
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:44rem}

/* ---- Type ------------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;text-wrap:balance;line-height:1.06}
h1{font-size:clamp(2.6rem,8.5vw,4.5rem);letter-spacing:.005em}
h2{font-size:clamp(1.9rem,5vw,2.9rem)}
h3{font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.2}
p{margin:0}
.gold{color:var(--gold)}
.it{font-family:var(--font-display);font-style:italic;color:var(--gold-lit)}

.eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
.lede{font-size:clamp(1.0625rem,2.6vw,1.1875rem);line-height:1.62;color:var(--text-2);max-width:38ch}
.body{color:var(--text-2);max-width:62ch}
.body + .body{margin-top:1rem}

.rule{
  height:1px;border:0;width:min(300px,60vw);
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
}

/* ---- Header ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(29,24,40,.72);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.site-header[data-stuck]{border-bottom-color:var(--hairline-soft)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:4rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--parchment)}
.brand svg{width:22px;height:31px;flex:0 0 auto}
.brand b{font-family:var(--font-display);font-weight:500;font-size:1.15rem;white-space:nowrap}
.brand b span{color:var(--gold)}
.site-header nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.site-header nav a{
  color:var(--text-2);text-decoration:none;font-size:.875rem;
  padding:.55rem .7rem;border-radius:8px;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.site-header nav a:hover{color:var(--parchment);background:rgba(232,220,192,.06)}
@media (max-width:720px){.site-header nav a:not(.btn){display:none}}

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.75rem 1.4rem;border-radius:999px;border:1px solid transparent;
  font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gold);color:#17130a;font-weight:600;box-shadow:0 10px 26px -14px rgba(201,162,39,.7)}
.btn--primary:hover{background:var(--gold-lit)}
.btn--ghost{background:rgba(232,220,192,.04);color:var(--parchment);border-color:var(--hairline)}
.btn--ghost:hover{background:rgba(232,220,192,.09);border-color:var(--gold)}
.btn--lg{min-height:56px;padding:.9rem 1.9rem;font-size:1rem}
.btn svg{width:19px;height:19px;flex:0 0 auto}

/* ---- Sections --------------------------------------------------------- */
section{padding-block:clamp(3.5rem,9vw,6.5rem);position:relative}
.section-head{margin-bottom:clamp(2rem,4vw,3rem);max-width:46rem}
.section-head .lede{margin-top:1rem}

/* ---- Hero ------------------------------------------------------------- */
.hero{
  padding-block:clamp(3rem,10vh,6rem) clamp(3rem,8vw,5.5rem);
  text-align:center;
  position:relative;overflow:hidden;
}
.hero .wrap{display:flex;flex-direction:column;align-items:center;position:relative}
/* The engraved ring: the practice's own instrument, empty of any claim,
   turning at a rate you notice only if you stay. Clipped by the hero, so
   just the lower arc crowns the headline. */
.hero__ring{
  position:absolute;left:50%;top:0;width:min(150vw,74rem);aspect-ratio:1;
  transform:translate(-50%,-58%);pointer-events:none;opacity:.13;
}
.hero__ring svg{width:100%;height:auto;display:block;animation:ring-turn 300s linear infinite}
@keyframes ring-turn{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.hero__ring svg{animation:none}}
.hero .mark{width:clamp(78px,14vw,104px);height:auto;display:block}
.hero h1{margin-top:clamp(1.1rem,3vh,1.8rem)}
.hero .rule{margin:clamp(1.1rem,2.6vh,1.7rem) 0}
.hero .role{
  font-size:.75rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);padding-left:.3em;
}
.hero .lede{margin-top:1.25rem;text-align:center}
.hero .actions{
  display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(1.6rem,4vh,2.4rem);width:100%;
}
.hero .actions .btn{flex:1 1 15rem;max-width:20rem}
.hero .note{margin-top:1.1rem;font-size:.875rem;color:var(--muted)}

/* A phone held sideways has about 320px of usable height. At the full hero
   size the call to action lands below the fold there, which on the one page
   whose job is a single decision is a real failure and not a nitpick. The mark
   goes first: the header is carrying it two centimetres above. */
@media (max-height:540px) and (orientation:landscape){
  .hero{padding-block:1.25rem 2rem}
  .hero .mark{display:none}
  .hero h1{font-size:clamp(2rem,5.5vw,2.6rem);margin-top:0}
  .hero .rule{margin:.7rem 0}
  .hero .lede{margin-top:.7rem;font-size:.9375rem;max-width:52ch}
  .hero .actions{margin-top:1rem}
  .hero .note{margin-top:.7rem}
}

/* The portrait twin: a short small phone with booking live stacks two
   buttons, and both are the hero's one job, so both must clear the fold.
   Same philosophy - trim the ceremony, keep the decision. */
@media (max-height:700px) and (max-width:420px) and (orientation:portrait){
  .hero{padding-block:1.5rem 2rem}
  .hero .mark{width:56px}
  .hero h1{font-size:2.1rem;margin-top:.9rem}
  .hero .rule{margin:.8rem 0}
  .hero .lede{margin-top:.8rem;font-size:.9375rem}
  .hero .actions{margin-top:1.1rem}
  .hero .note{margin-top:.8rem}
  .hero .btn--lg{min-height:48px;padding:.7rem 1.3rem;font-size:.9375rem}
}

/* ---- The four methods -------------------------------------------------
   A list, not a grid of cards: they are one practice, and four equal boxes
   would say "menu of services", which is exactly the reading to avoid. */
.methods{border-top:1px solid var(--hairline-soft)}
.method{
  display:grid;grid-template-columns:auto 1fr;gap:0 1.6rem;
  padding-block:1.6rem;border-bottom:1px solid var(--hairline-soft);
  align-items:baseline;
}
.method:first-of-type{border-top:1px solid var(--hairline-soft)}
.method__n{
  font-family:var(--font-display);font-size:1.35rem;color:var(--gold);opacity:.8;
  min-width:1.6rem;
}
.method__name{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-weight:500;line-height:1.1}
.method__body{grid-column:2;color:var(--text-2);margin-top:.45rem;max-width:56ch;font-size:.9375rem}
@media (max-width:520px){
  .method{gap:0 1rem}
  .method__n{font-size:1.1rem;min-width:1.2rem}
}

/* ---- The example wheel -------------------------------------------------
   Rendered by the same engine the studio uses (tools/make-landing-wheel.mjs)
   and baked in as static SVG, so the page stays self-contained and works with
   scripting off. On phones it sits between the section head and the list; on
   wide screens it keeps the reader company while the four methods scroll. */
.methods__flow{display:grid;gap:1.5rem}
.wheel{margin:1rem auto 0;max-width:24rem;width:100%}
.wheel svg{width:100%;height:auto;display:block}
.wheel figcaption{
  margin-top:1.1rem;text-align:center;color:var(--muted);
  font-size:.8125rem;line-height:1.6;max-width:34ch;margin-inline:auto;
}
@media (min-width:64rem){
  .methods__flow{grid-template-columns:minmax(0,1fr) 23rem;gap:0 4rem;align-items:start}
  .methods__list{grid-column:1;grid-row:1}
  .wheel{grid-column:2;grid-row:1;position:sticky;top:6rem;margin:0;max-width:none}
}

/* ---- What arrives ----------------------------------------------------- */
/* margin/padding zeroed explicitly: a <ul> carries 40px of inline padding from
   the UA stylesheet, and `list-style:none` on the items does not remove it.
   The block renders shoved 40px to the right of every other section, which is
   subtle enough to survive a green test suite. */
.arrives{
  margin:0;padding:0;
  display:grid;gap:1px;background:var(--hairline-soft);
  border:1px solid var(--hairline-soft);border-radius:16px;overflow:hidden;
}
@media (min-width:760px){.arrives{grid-template-columns:1fr 1fr}}
.arrives li{list-style:none;background:var(--sky-3);padding:1.6rem clamp(1.2rem,3vw,1.8rem)}
.arrives h3{color:var(--parchment)}
.arrives p{color:var(--text-2);margin-top:.5rem;font-size:.9375rem;line-height:1.6}

/* ---- Steps ------------------------------------------------------------
   Numbered because this genuinely is a sequence: you cannot read a chart
   before you have a birth time. */
.steps{display:grid;gap:clamp(.9rem,2vw,1.4rem);counter-reset:step}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;padding:3.3rem 1.4rem 1.6rem;
  background:var(--panel);border:1px solid var(--hairline-soft);border-radius:16px;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:1.15rem;left:1.4rem;
  font-family:var(--font-display);font-size:1.6rem;color:var(--gold);opacity:.75;
}
.step h3{margin-bottom:.5rem}
.step p{color:var(--text-2);font-size:.9375rem}

/* ---- Who ---------------------------------------------------------------- */
.who{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:start}
@media (min-width:820px){.who{grid-template-columns:16rem 1fr}}
.who__portrait{
  width:100%;max-width:16rem;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--hairline);
  background:radial-gradient(circle at 38% 30%, #3a3054, var(--sky-3));
  margin-inline:auto;overflow:hidden;
}
.who__portrait img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.who__name{font-family:var(--font-display);font-size:clamp(1.8rem,4.5vw,2.4rem);font-weight:500}
.who__role{
  font-size:.6875rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-top:.5rem;
}
.who .body{margin-top:1.25rem}

/* Refusals. The most persuasive block on the page, so it is set apart. */
.refuse{
  margin-top:1.75rem;padding:1.25rem 1.4rem;
  border-left:2px solid var(--gold);background:var(--panel);
  border-radius:0 12px 12px 0;
}
.refuse p{color:var(--text-2);font-size:.9375rem}
.refuse p + p{margin-top:.6rem}
.refuse b{color:var(--parchment);font-weight:600}

/* ---- Booking ----------------------------------------------------------- */
.book{text-align:center}
.book .wrap{display:flex;flex-direction:column;align-items:center}
.book .lede{text-align:center;margin-top:1rem}
.book .actions{margin-top:2rem;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;width:100%}
.book .actions .btn{flex:1 1 15rem;max-width:20rem}
.embed{
  width:100%;margin-top:2.25rem;border:1px solid var(--hairline-soft);border-radius:16px;
  overflow:hidden;background:var(--panel);min-height:34rem;
}
.embed iframe{display:block;width:100%;height:38rem;border:0}
.soon{
  margin-top:2rem;width:100%;max-width:34rem;
  border:1px dashed var(--hairline);border-radius:14px;padding:1.1rem 1.3rem;
  color:var(--text-2);font-size:.9375rem;line-height:1.55;
}
.soon b{color:var(--parchment);font-weight:600;display:block;margin-bottom:.2rem}

/* ---- Questions --------------------------------------------------------- */
.q{border-top:1px solid var(--hairline-soft)}
.q:last-of-type{border-bottom:1px solid var(--hairline-soft)}
.q summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.1rem,2.6vw,1.3rem);color:var(--parchment);
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:'';position:absolute;right:.35rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.q[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.q__body{padding:0 0 1.35rem;color:var(--text-2);max-width:62ch;font-size:.9375rem}
.q__body p + p{margin-top:.75rem}

/* ---- Footer ------------------------------------------------------------
   The address block is deliberately real, visible text and not only JSON-LD:
   AI engines demote structured data that the page does not also show, and
   consistent name/area/contact across the web is the strongest single signal
   for being cited at all. */
footer{border-top:1px solid var(--hairline-soft);padding-block:2.75rem 3.5rem}
.foot{display:grid;gap:1.75rem}
@media (min-width:720px){.foot{grid-template-columns:1fr auto;align-items:start}}
.foot__name{font-family:var(--font-display);font-size:1.3rem}
.foot__name span{color:var(--gold)}
.foot address{font-style:normal;color:var(--muted);font-size:.875rem;margin-top:.6rem;line-height:1.8}
.foot address a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--hairline)}
.foot address a:hover{color:var(--parchment);border-bottom-color:var(--gold)}
.foot__links{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.875rem}
.foot__links a{color:var(--text-2);text-decoration:none}
.foot__links a:hover{color:var(--parchment)}
.foot__legal{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline-soft);
  color:var(--muted);font-size:.8125rem;max-width:70ch;line-height:1.7;
}

/* ---- Reveal ------------------------------------------------------------
   Scoped to .js, set inline in <head> before first paint. Without the class
   every revealable block stays plainly visible, which is the correct fallback
   rather than content hidden by CSS nothing will un-hide. */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-reveal].in{transition:none}
}

:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:#17130a;padding:.75rem 1.25rem;
  border-radius:0 0 10px 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}