* { box-sizing:border-box; }
  body { margin:0; background:var(--cream); color:var(--ink);
         font-family:var(--font-sans); font-size:15px; line-height:1.6; }
  /* Grid and flex children default to min-width:auto, which lets a wide table
     push the whole page sideways. This is the rule the signed-in mockup was
     missing on all seventeen routes. */
  .l-wrap > *, .l-sec > * { min-width:0; }
  .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; }
  .l-sec { padding:38px 0; }
  .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); }
  .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2);
           margin:0; max-width:66ch; }
  /* A link in a lede had no colour and came out in the browser's own
     -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on
     every page, so this was one page today and any page that adds a link to a
     lede tomorrow. Set here rather than on the page that happened to have
     one. */
  .l-sub a { color:var(--gold-dk); text-underline-offset:2px; }
  /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather
     than in a page's stylesheet because two clusters use it now — it was
     .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without
     the rule, so its ledes rendered left under centred heads and looked like
     an oversight. margin-inline is not optional: .l-sub caps at 66ch, so
     centring the text without centring the box leaves a centred column
     sitting on the left of the wrap.
     Only the lede. Lists, tables and cards inside a .l-ctr stay left —
     centred body copy is ragged on both edges and a centred bulleted list
     stops forming a column to scan. */
  .l-ctr .l-sub { text-align:center; margin-inline:auto; }
  /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line
     readable and the grid or panel under it carries the width. Two of them
     stacked is not — they fill the left half of the band, the right half is
     empty, and under a full-width heading with a full-width panel below it
     the pair reads as a column that has been cut off rather than as air.
     Measured at 1280: 582px of a 1180px section, 49% of it, twice over.

     A track each, so both keep the SAME measure they had — this is a layout
     fix, not a wider line. Stretching one paragraph across 1180px would give
     150 characters to a line that is already at 74.

     auto-fit rather than two fixed columns, because the home page has a pair
     inside a half-width column; there they stack again rather than becoming
     two forty-character ribbons.

     .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px
     cap, so the track is what governs in two columns and the cap is what
     governs when it falls back to one — which is the width it has today.
     Overriding the cap to none looked tidier and gave a 736px tablet a
     93-character line, which is the fault this rule exists to avoid.

     min(400px, 100%), NOT 400px. A minimum track wider than the container
     does not shrink — it overflows it, and at 320px the whole page scrolled
     sideways by 26px. min() caps the floor at whatever room there is. */
  .l-lede { display:grid; gap:10px 44px; margin-bottom:20px;
            grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
  .l-mb { margin-bottom:20px; }
  .l-mt { margin-top:22px; }
  .l-signin, .l-signup { text-decoration:none; white-space:nowrap; }
  .l-act-u, .l-act-a { display:flex; align-items:center; gap:8px; }
  /* The drawer carries Sign in and Sign up and nothing else now — the theme
     toggle moved to top_nav's `bar`, which is the header at every width. Its
     own display and gap belong to the component, in ui.py, so the breakpoint
     that hides it there is not overruled from here. */
  .c-drawer-a .l-signin, .c-drawer-a .l-signup {
      flex:1; min-height:44px; padding:0 15px; justify-content:center; }
  /* Date and time are one question, asked once. Both values are short enough
     to sit side by side even at 360px, and pairing them stops the form
     reading as five separate chores. */
  /* Date and time side by side, and STACKED on the narrowest phones. The two
     were always a 1fr 1fr grid; what changed is that the time trigger now
     reads 09:15 PM as four flex spans rather than one string, so its
     min-content is wider than half of a 288px card and the card grew to 311 —
     7px of sideways scroll on the page the whole site links to. minmax(0,1fr)
     alone would have kept the row and clipped the readout instead. */
  .l-dt { display:grid; grid-template-columns:1fr; gap:10px; }
  @media (min-width:360px) {
    .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  }
  /* Part of the hero's left column, not a band of its own. It anchors the
     bottom of that column so it finishes level with the form card. */
  /* Inside the form card the list sits under the button, separated by a rule
     rather than by more whitespace — it is what pressing the button gets you,
     so it should read as part of the button's promise. */
  .l-cardsub { margin:2px 0 14px; }
  .l-cardinc { margin-top:14px; padding-top:14px;
               border-top:1px solid var(--line-soft); }
  .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .l-inc li { display:flex; align-items:flex-start; gap:9px; }
  .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); }
  .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); }

  .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px;
            text-decoration:none; color:var(--ink); border:1px solid var(--line);
            border-radius:var(--r-card); background:var(--surface); }
  .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); }
  /* Between the two-column breakpoint and 1024 the left column runs 9px past
     the card, because the headline takes an extra line before the columns are
     wide enough. Four pixels off the padding and four off the stack gap close
     it without anyone being able to tell the difference. */

  .l-samp > svg:first-child { flex:none; color:var(--gold-dk); }
  .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; }
  .l-samp span { min-width:0; }
  .l-samp b { display:block; font-size:14.5px; font-weight:700; }
  .l-samp i { display:block; font-style:normal; font-size:12.5px;
              color:var(--ink-3); margin-top:2px; line-height:1.45; }
  .l-dt .c-pf { margin-bottom:0; }
  .l-dth { margin:6px 0 var(--space-3); }
  .l-mb2 { margin-bottom:16px; }

  .l-mark { display:block; width:34px; height:34px; flex:none; }
  .l-mark img { display:block; width:100%; height:100%; border-radius:19%; }

  /* proof row */
  .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); }
  .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0;
           padding:4px 0; }
  .l-pf { padding:18px 4px 18px 18px; }
  /* Hairlines, not a colour change, do the separating — and only between
     cells that are actually side by side, which changes at each breakpoint. */
  .l-pf:nth-child(2n) { border-left:1px solid var(--line); }
  .l-pf:nth-child(n+3) { border-top:1px solid var(--line); }
  .l-pf:first-child { padding-left:0; }
  .l-pf b { display:block; font-family:var(--font-serif); font-size:29px;
            line-height:1.05; font-weight:600; color:var(--gold-dk);
            letter-spacing:-.015em; }
  .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px;
               color:var(--ink); }
  .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
            margin-top:2px; }
  @media (min-width:760px) {
    .l-pfr { grid-template-columns:repeat(4,1fr); }
    .l-pf:nth-child(n+3) { border-top:0; }
    .l-pf:nth-child(n+2) { border-left:1px solid var(--line); }
  }

  /* panchang */
  .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
  .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); }
  .l-pc span { display:block; font-family:var(--font-mono); font-size:9px;
               letter-spacing:.13em; color:var(--ink-3); }
  .l-pc b { display:block; font-size:15px; margin-top:5px; }
  .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); }
  .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); }
  @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } }

  /* rashifal */
  .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); }
  .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px;
          min-height:98px; justify-content:center; padding:12px 5px;
          border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); text-decoration:none; color:var(--ink);
          text-align:center; }
  .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); }
  .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; }
  .l-rs b { font-size:12.5px; font-weight:650; }
  .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); }
  .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); }
  @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } }
  @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } }

  /* tools */
  .l-tools { display:grid; gap:12px; }
  .l-ti { display:grid; place-items:center; width:40px; height:40px;
          border-radius:11px; color:var(--gold-dk); background:var(--gold-bg);
          margin-bottom:11px; }
  .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
  .l-tl a { display:inline-flex; align-items:center; min-height:44px;
            font-size:12.5px; font-weight:600; padding:0 14px;
            border-radius:var(--r-pill); color:var(--ink-2);
            border:1px solid var(--line); background:var(--surface);
            text-decoration:none; }
  .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold);
                  background:var(--gold-bg); }
  @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } }

  /* astrologers */
  /* .h-astro in home.py sets display on top of this and is the only caller,
     so anything layout-ish added here is dead. The phone rail lives there. */
  .l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); }
  .l-ah { display:flex; align-items:center; gap:11px; }
  .l-an { display:block; font-size:15px; font-weight:700; }
  .l-as { display:block; font-size:12.5px; color:var(--ink-3); }
  .l-am { display:flex; gap:5px; margin-top:12px; }
  @media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } }

  /* The unknown-birth-time escape hatch belongs inside the time picker, where
     someone reaches it at the exact moment they realise they cannot answer. */
  .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
  .l-faq { margin-top:16px; }


/* ── page head ────────────────────────────────────────── */
.s-crumb { padding-top:16px; }
.s-top { padding:22px 0 6px; }
.s-head { max-width:64ch; }
/* With a form beside it the header is the full width and the two columns
   share it, so the reading underneath is not squeezed into a rail. */
.s-head-2 { max-width:none; display:grid; gap:26px;
            grid-template-columns:minmax(0,1fr); align-items:start; }
.s-head-2 > * { min-width:0; }
@media (min-width:960px) {
  .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
}
.s-head-t { max-width:64ch; }
.s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px;
             letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk);
             padding:5px 10px; border-radius:var(--r-pill);
             background:var(--gold-bg); margin-bottom:14px; }
.s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px);
        line-height:1.08; letter-spacing:-.021em; font-weight:600;
        margin:0 0 13px; text-wrap:balance; }
.s-h1 em { font-style:normal; color:var(--gold-dk); }
.s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2);
         margin:0; max-width:58ch; }
/* What the page gives back, named. See page_head() for why it is only on the
   fourteen with a full birth-details form. */
.s-ret { margin-top:18px; max-width:58ch; }
.s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid;
            gap:5px; }
.s-ret li { position:relative; padding-left:18px; font-size:14px;
            line-height:1.55; color:var(--ink-2); }
.s-ret li::before { content:''; position:absolute; left:2px; top:9px;
                    width:5px; height:5px; border-radius:50%;
                    background:var(--gold-solid); }
@media (min-width:960px) {
  .s-head-fill { align-items:stretch; }
  .s-head-fill > .s-head-t { display:flex; flex-direction:column; }
  .s-head-fill .s-meta { margin-top:auto; padding-top:16px; }
}
/* The facts a dek would otherwise carry as adjectives. Mono, so they read as
   data rather than as more sentence. */
/* THE CENTRED HEAD, for pages that are not asking for a birth time. The
   default sits beside a form card and runs to 64ch down the left; a page
   whose top is a choice rather than a form leaves that whole right-hand
   column empty, and the text reads as the caption of something that failed
   to load. Two pages want this — the tarot hub, whose top half is six
   readings, and the astrologer pages, whose top half is a roster — so it
   lives here rather than being written twice. */
.s-head-c { max-width:700px; margin-inline:auto; text-align:center; }
.s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700;
          border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; }
.s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); }
.s-head-c .s-dek { margin-inline:auto; max-width:62ch; }
.s-head-c .s-meta { justify-content:center; }

.s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
          font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
          color:var(--ink-3); }
.s-meta span { display:flex; align-items:center; gap:7px; }
.s-meta span + span::before { content:''; width:3px; height:3px; flex:none;
          border-radius:50%; background:var(--line); margin-left:-11px; }

/* ── related ──────────────────────────────────────────── */
.s-rel { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } }
.s-rel > * { min-width:0; }
.s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
           min-height:44px; text-decoration:none; color:var(--ink);
           background:var(--surface); border:1px solid var(--line);
           border-radius:var(--r-card); }
.s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); }
.s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px;
           border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); }
.s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; }
.s-rel-x b { font-size:14px; font-weight:650; }
.s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3);
             margin-top:2px; }

/* ── closing CTA ──────────────────────────────────────── */
.s-cta { display:grid; gap:20px; align-items:center; padding:28px;
         border-radius:var(--r-card); border:1px solid var(--gold-lt);
         background:
           radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%),
           var(--surface); }
@media (min-width:820px) {
  .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } }
.s-cta > * { min-width:0; }
.s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px);
            line-height:1.16; letter-spacing:-.018em; font-weight:600;
            margin:0 0 9px; text-wrap:balance; }
.s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2);
           margin:0; max-width:52ch; }
.s-cta-b { display:flex; flex-wrap:wrap; gap:10px; }
.s-cta-b > * { flex:1 1 auto; }
.s-cta-alt { display:inline-flex; align-items:center; justify-content:center;
             gap:8px; text-decoration:none; white-space:nowrap; }
.s-cta-alt svg { color:var(--gold-dk); }

  /* Everything here is namespaced t-. The shell owns c-, h-, l-, s- and sg-;
     restyling a bare class one of those owns is what checks/clash.py is for. */

  /* ── the card face ──────────────────────────────────────────── */
  /* A PLAYING CARD IS PORTRAIT. aspect-ratio rather than a height, so the
     three sizes are one rule and a face never crops its own name. */
  .t-c { display:flex; flex-direction:column; align-items:center;
    gap:5px; padding:12px 10px 13px; text-align:center; text-decoration:none;
    color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:12px; min-width:0; }
  a.t-c:hover { border-color:var(--gold); background:var(--gold-bg); }
  .t-c-n { font-family:var(--font-mono); font-size:11px; font-weight:700;
    letter-spacing:.06em; color:var(--gold-dk); }
  .t-c-e { display:block; width:100%; margin:3px 0 5px; }
  /* NOTHING TURNS. A reversed card really is dealt upside down, and drawing
     it that way is correct — for somebody who already knows that. To everybody
     else an upside-down photograph is a broken image, and this page is for
     readers meeting tarot for the first time. The fact is carried in words
     instead: "REVERSED" under the name, and in the alt text.
     Third position on this: symbol rotated (wrong, made a point-down
     pentagram), picture rotated (right by convention, reads as a defect),
     words only. */
  .t-c-rev { background:var(--surface-2); }
  .t-c-i { display:block; width:100%; height:auto; border-radius:5px;
    background:var(--surface-2); }
  .t-c-t { font-family:var(--font-serif); font-size:15px; font-weight:600;
    line-height:1.25; text-wrap:balance; }
  .t-c-a { font-style:normal; font-size:11px; line-height:1.35;
    color:var(--ink-3); }
  .t-c-r { font-style:normal; font-size:10.5px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
    border-top:1px solid var(--line-soft); padding-top:5px; margin-top:2px;
    align-self:stretch; }
  .t-c-sm .t-c-t { font-size:13.5px; }
  .t-c-sm { padding:10px 8px 11px; }

  /* ── 01 the reading ─────────────────────────────────────────── */
  .t-read { border:1px solid var(--gold-lt); border-radius:var(--r-card);
    background:var(--gold-bg); padding:20px; }
  .t-read-h { display:flex; flex-wrap:wrap; gap:14px 26px;
    align-items:flex-start; padding-bottom:15px; margin-bottom:18px;
    border-bottom:1px solid var(--gold-lt); }
  .t-read-h > div { min-width:0; }
  .t-read-h b { display:block; font-family:var(--font-serif); font-size:19px;
    font-weight:600; color:var(--ink); margin-top:3px; }
  .t-read-m { margin-left:auto; text-align:right; }
  /* The spread. auto-fit rather than a fixed three, because the same block
     lays out one card, three, five and the Celtic Cross's ten. */
  .t-ds { display:grid; gap:18px;
    grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); }
  .t-d { display:flex; flex-direction:column; align-items:center;
    min-width:0; text-align:center; padding:16px 16px 18px;
    border:1px solid var(--line); border-radius:var(--r-in);
    background:var(--surface); }
  .t-d-p { margin-bottom:10px; }
  /* The flipper. Two nested boxes and neither does anything until the cards
     are dealt face down: .t-d-fl is the width limit that used to be on
     .t-d-c, .t-d-in is the thing that rotates. In the worked example — which
     is what a crawler and a reader with no script get — this is two plain
     divs around a picture. */
  .t-d-fl { width:100%; max-width:190px; margin-bottom:13px; }
  .t-d-c { display:block; border-radius:7px; overflow:hidden;
    text-decoration:none;
    box-shadow:0 1px 3px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.07); }
  .t-d-c:hover { box-shadow:0 1px 3px rgba(0,0,0,.14), 0 8px 26px rgba(0,0,0,.12); }
  /* Not rotated — see the note on .t-c-rev. The card keeps its badge and the
     word under the name. */
  .t-d-rev .t-c-i { outline:2px solid var(--gold-lt); outline-offset:-2px; }
  .t-d-h { display:block; font-family:var(--font-serif); font-size:19px;
    font-weight:600; line-height:1.25; text-wrap:balance; margin-bottom:7px; }
  .t-d-h a { color:var(--ink); text-decoration:none; }
  .t-d-h a:hover { color:var(--gold-dk); }
  .t-d-h em { display:block; font-style:normal; font-size:11px;
    font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-3); margin-top:3px; }
  .t-d-m { margin:0 0 11px; font-size:14px; line-height:1.6;
    color:var(--ink-2); }
  .t-kw { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .t-kw span { font-size:11.5px; font-weight:600; color:var(--gold-dk);
    padding:3px 9px; border:1px solid var(--gold-lt); border-radius:999px;
    background:var(--surface); }
  .t-d-n { display:block; margin-top:auto; padding-top:12px;
    font-size:12.5px; line-height:1.5; color:var(--ink-3); }

  /* ── what the spread is saying ──────────────────────────────── */
  /* The panel that closes a reading. On the worked example it is simply
     there, under the cards, because that reading is face up. On your own it
     is held back until the last card is over — see .t-read-all below. */
  .t-sum { margin-top:20px; padding-top:18px;
    border-top:1px solid var(--gold-lt); }
  .t-sum-l { display:block; margin-bottom:12px; }
  .t-sum-g { display:grid; gap:14px; grid-template-columns:1fr;
    margin-bottom:14px; }
  @media (min-width:760px) { .t-sum-g { grid-template-columns:1fr 1fr; } }
  /* Alone in the row it takes the whole row rather than half of it with a
     hole beside it — which is what four of the six spreads produce. */
  .t-sum-g > :only-child { grid-column:1 / -1; }
  .t-sc { min-width:0; padding:16px 18px 17px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); }
  .t-sc b { display:block; font-family:var(--font-serif); font-size:19px;
    font-weight:600; line-height:1.3; margin:5px 0 7px; }
  .t-sc b a { color:var(--ink); text-decoration:none; }
  .t-sc b a:hover { color:var(--gold-dk); }
  .t-sc b em { display:block; font-style:normal; font-family:var(--font-sans);
    font-size:11px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
  .t-sc p { margin:0 0 11px; font-size:14px; line-height:1.6;
    color:var(--ink-2); }
  .t-sc .t-kw { justify-content:flex-start; }
  /* The move is the one the reader came for on that spread, so it carries the
     accent edge and the outcome does not. */
  .t-sc-do { border-left:3px solid var(--gold); }
  /* The facts about the deal — reversals, suit weight, major/minor. One list,
     because they are all the same kind of statement; the weight line used to
     hang under it as a loose sentence in a different size, which read as a
     caption that had come adrift. */
  .t-sum-n { list-style:none; margin:0; padding:0; display:grid; gap:0;
    border:1px solid var(--line); border-radius:var(--r-in);
    background:var(--surface); }
  .t-sum-n li { padding:10px 15px 10px 32px; position:relative;
    font-size:13.5px; line-height:1.6; color:var(--ink-2);
    border-bottom:1px solid var(--line-soft); }
  .t-sum-n li:last-child { border-bottom:0; }
  .t-sum-n li::before { content:''; position:absolute; left:15px; top:18px;
    width:5px; height:5px; border-radius:50%; background:var(--gold); }
  .t-sum .t-v { margin:0; }

  /* ── face down, and turning over ────────────────────────────── */
  /* ALL OF THIS IS BEHIND .t-read-down, which only the script adds. The
     example the build renders is face up and stays face up: it is the page a
     crawler indexes and the page somebody with no script reads, and a grid of
     card backs says nothing to either of them.

     The flip is a real one — .t-d-in rotates in 3D, the back is at 0deg and
     the picture at 180deg, both with their reverse sides hidden, so the
     picture is genuinely behind the back rather than fading through it. */
  .t-turn { display:none; }
  .t-read-down .t-turn { display:flex; flex-wrap:wrap; align-items:center;
    gap:10px 16px; margin-bottom:18px; padding:11px 14px;
    border:1px dashed var(--gold-lt); border-radius:var(--r-in);
    background:var(--surface); }
  .t-read-down .t-turn p { margin:0; flex:1 1 240px; font-size:13.5px;
    line-height:1.5; color:var(--ink-2); }
  .t-read-down .t-turn b { color:var(--ink); }

  /* YOUR closing panel waits for the last card. It is the one thing on the
     page that is genuinely earned by turning them over, and handing it out
     while eight of ten are still face down would make the turning ornamental.
     The example's panel is never hidden — it has no cards to turn. */
  .t-read-down .t-sum { display:none; }
  .t-read-down.t-read-all .t-sum { display:block;
    animation:t-in .45s ease .1s both; }

  .t-read-down .t-d-fl { perspective:1100px; }
  .t-read-down .t-d-in { position:relative; transform-style:preserve-3d; }
  .t-read-down .t-d-b { display:grid; place-items:center; position:absolute;
    inset:0; z-index:2; width:100%; padding:0; cursor:pointer;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    border:1px solid rgba(216,178,105,.45); border-radius:7px;
    box-shadow:0 1px 3px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.14); }
  .t-read-down .t-d-c { transform:rotateY(180deg);
    -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  /* AN ANIMATION, NOT A TRANSITION, because a card being turned over is not
     a straight line between two angles — a hand lifts it, turns it and sets
     it down. The scale at the halfway point is that lift, and it is the only
     moment the card is edge-on and therefore invisible, so it is also where
     the eye is least able to tell that the picture was never there before.
     A transition with a front-loaded easing landed the whole rotation inside
     380ms and read as the back being swapped for the face. */
  @keyframes t-flip {
    0%   { transform:rotateY(0)      scale(1); }
    50%  { transform:rotateY(90deg)  scale(1.07); }
    100% { transform:rotateY(180deg) scale(1); }
  }
  .t-read-down .t-d-up .t-d-in { transform:rotateY(180deg);
    animation:t-flip .66s cubic-bezier(.42,.02,.36,1) both; }
  /* THE BACK GOES AWAY WHEN THE CARD IS UP, and backface-visibility is not
     enough to do it: it hides the back from the eye and leaves it in the tab
     order and in the accessibility tree, so a keyboard reaching a card it had
     already turned over found a button offering to turn it over again.
     step-end holds it visible for the whole flip — it is the thing being
     turned — and drops it at the far end, where it is already facing away. */
  @keyframes t-hide { from { visibility:visible; } to { visibility:hidden; } }
  .t-read-down .t-d-up .t-d-b { animation:t-hide .66s step-end both; }

  /* THE BACK KEEPS ITS OWN COLOURS IN BOTH THEMES. Every other surface here
     follows the reader's; a card back does not, because it is a printed
     object — the same deck in a lit room and a dark one. It is also the only
     way the gold lattice reads as ink on card rather than as a UI panel. */
  .t-d-b { display:none; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 18%, #3A2A18 0%, #241A0F 62%); }
  .t-b-l { position:absolute; inset:5px; border-radius:4px;
    border:1px solid rgba(216,178,105,.30);
    background:
      repeating-linear-gradient(45deg, transparent 0 12px,
        rgba(216,178,105,.15) 12px 13px),
      repeating-linear-gradient(-45deg, transparent 0 12px,
        rgba(216,178,105,.15) 12px 13px); }
  .t-b-r { position:relative; color:#D8B269; opacity:.92;
    transition:transform .35s ease, opacity .35s ease; }
  .t-read-down .t-d-b:hover .t-b-r { transform:scale(1.14); opacity:1; }
  .t-read-down .t-d-b:focus-visible { outline:3px solid var(--gold);
    outline-offset:3px; }
  /* Face down there is nothing to read yet, so the name, the meaning and the
     keywords are not merely invisible — they are out of the document, and a
     screen reader reaching this card is offered the button and the position,
     which is exactly what a face-down card tells you. The position note
     stays: it is the question the card is going to answer. */
  .t-read-down .t-d:not(.t-d-up) .t-d-h,
  .t-read-down .t-d:not(.t-d-up) .t-d-m,
  .t-read-down .t-d:not(.t-d-up) .t-kw { display:none; }
  .t-read-down .t-d-up .t-d-h, .t-read-down .t-d-up .t-d-m,
  .t-read-down .t-d-up .t-kw { animation:t-in .4s ease .34s both; }
  @keyframes t-in { from { opacity:0; transform:translateY(5px); }
    to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce) {
    /* The card still ends up face up — only the turning goes. */
    .t-read-down .t-d-up .t-d-in { animation:none;
      transform:rotateY(180deg); }
    .t-read-down .t-d-up .t-d-b { animation:none; visibility:hidden; }
    .t-read-down .t-d-up .t-d-h, .t-read-down .t-d-up .t-d-m,
    .t-read-down .t-d-up .t-kw { animation:none; }
    .t-b-r { transition:none; }
  }

  /* ── the readings, as tiles ────────────────────────────────── */
  /* A GRID ON A DESKTOP AND A SWIPE ON A PHONE, and both are the same six
     tiles. On a phone, six full-width cards is a 3000px column that buries
     everything under it; a scroll-snap rail keeps the choice to one screen
     and makes it feel like a hand of cards you push along. CSS only — the
     rail is overflow-x with snap points, and no script is involved in any
     of it.

     Three across at the top end, because these lead with a picture now and a
     picture wants width. Two of the six were 501px tall against the others'
     352px when the tile carried its layout's positions — one to ten lines of
     them — which is why those went to the reading's own page and the tiles
     became the same height by construction. */
  .t-sp-g { display:grid; gap:14px; grid-auto-flow:column;
    grid-auto-columns:minmax(238px, 76%);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding:0 16px;
    /* The rail bleeds to both edges of the phone rather than stopping at the
       wrap's padding, so the sixth tile does not look like the last one. */
    margin:0 -16px; padding:2px 16px 14px; }
  .t-sp-g > * { scroll-snap-align:start; }
  @media (min-width:700px) {
    .t-sp-g { grid-auto-flow:row; grid-template-columns:1fr 1fr;
      overflow:visible; margin:0; padding:0; }
  }
  @media (min-width:1000px) {
    .t-sp-g { grid-template-columns:repeat(3, 1fr); }
  }
  .t-sp { display:flex; flex-direction:column; min-width:0;
    padding:0 0 18px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); overflow:hidden;
    text-decoration:none; color:var(--ink); }
  a.t-sp:hover { border-color:var(--gold); }

  /* The picture band. A fixed height whatever the spread deals, so six tiles
     are level without the grid having to stretch them. */
  .t-sp-sh { display:grid; place-items:center; height:172px; padding:16px 0 0;
    background:linear-gradient(180deg, var(--gold-bg) 0%,
      color-mix(in srgb, var(--gold-bg) 45%, var(--surface)) 100%);
    border-bottom:1px solid var(--line-soft); }
  a.t-sp:hover .t-sp-sh { border-bottom-color:var(--gold-lt); }
  /* The fan. Real cards from that reading's own worked example, overlapped
     and tipped, the way a hand sits on a table. The middle one comes forward
     so the three read as a pile rather than as a row that happens to touch. */
  .t-fan { display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:2px; }
  .t-fan img { display:block; width:84px; height:auto; border-radius:5px;
    background:var(--surface);
    box-shadow:0 1px 2px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.13);
    transition:transform .3s cubic-bezier(.3,.7,.3,1); }
  .t-fan-2 img:first-child, .t-fan-3 img:first-child {
    transform:rotate(-9deg) translateX(14px); }
  .t-fan-3 img:nth-child(2) { position:relative; z-index:2; }
  .t-fan-2 img:last-child, .t-fan-3 img:last-child {
    transform:rotate(9deg) translateX(-14px); }
  a.t-sp:hover .t-fan-3 img:first-child { transform:rotate(-15deg) translateX(4px); }
  a.t-sp:hover .t-fan-3 img:last-child { transform:rotate(15deg) translateX(-4px); }
  a.t-sp:hover .t-fan-2 img:first-child { transform:rotate(-15deg) translateX(4px); }
  a.t-sp:hover .t-fan-2 img:last-child { transform:rotate(15deg) translateX(-4px); }
  @media (prefers-reduced-motion:reduce) { .t-fan img { transition:none; } }

  .t-sp-h { display:block; padding:15px 18px 0; }
  .t-sp-go { display:flex; align-items:center; gap:6px; margin-top:auto;
    padding:13px 18px 0; font-size:13.5px; font-weight:650;
    color:var(--gold-dk); }
  a.t-sp:hover .t-sp-go { gap:9px; }
  .t-sp-go svg { transition:transform .2s ease; }

  /* The shape. One box per card, placed where that card is dealt. Sized in
     ch so it scales with the type rather than being pinned to a pixel. */
  /* min-height, not height: the tracks size the grid now, and the six
     spreads are one, three and ten cards deep. The floor keeps the six cards
     level with each other. */
  /* min-height went with the stacked layout. It existed to keep six diagrams
     level with each other across a row; in its own column it only padded a
     one-card spread out to 150px, which drew one small box adrift in an
     empty field and read as an image that had failed to load. */
  .t-sh { display:grid; gap:7px; justify-content:center; align-content:center;
    margin-bottom:0; padding:4px 0; }
  .t-sh .sh-c { display:grid; place-items:center; width:32px; height:45px;
    border:1px solid var(--gold-lt); border-radius:4px;
    background:var(--gold-bg); font-family:var(--font-mono); font-size:11px;
    font-weight:700; color:var(--gold-dk); }
  /* Card two lies ACROSS card one, in the same cell — and at 32px it covered
     card one completely, so the diagram lost a position. Transparent, with
     its numeral pushed to the rotated card's top edge (screen right), so both
     "1" and "2" stay readable and the pair still reads as a cross. */
  /* LONGER THAN THE CARD IT COVERS, so its numeral clears the one beneath.
     At equal size the rotated card's near edge sits 22px from centre and
     card one's "1" sits at centre — 22px apart with two 8px numerals, which
     read as "1 2" crammed into one box rather than as two cards. At 62px the
     "2" lands 28px out, past card one's 16px half-width, so it is plainly
     outside the card it crosses. The pair still reads as a cross; only the
     label has moved off the pile. */
  /* SAME SIZE AS THE CARD IT COVERS. At 62px it cleared card one's numeral
     and reached 8px into cards four and six instead — the gap between cells
     is 7px, so no length both clears the centre and misses the neighbours.
     The cards stay equal and the NUMERALS move apart instead: the crossed
     card's to its top-left, the crossing card's to its own top, which after
     the rotation is screen right. Diagonally opposite corners of the same
     pile, and the cross still reads as a cross. */
  /* DIAGONALLY OPPOSITE, and this is the fourth attempt at it. Both numerals
     were at their own top-left, which after a 90deg turn puts the crossing
     card's at screen top-RIGHT — 18px from card one's, with two 8px glyphs
     between them. Ten pixels of gap, at the top of the same 32px box: it
     read as one two-digit number rather than as two cards.
     The crossing card's numeral now sits at its own top-right, which the
     rotation carries to the bottom-right of the pile. Card one keeps the
     top-left. Opposite corners of a 32x45 box is 44px apart, which is the
     most the geometry allows. */
  .t-sh .sh-x { transform:rotate(90deg); background:transparent;
    align-items:start; justify-items:end; padding:3px 4px 0 0;
    align-self:center; justify-self:center; }
  .t-sh .sh-under { align-items:start; justify-items:start;
    padding:3px 0 0 4px; }

  .t-sp-h b { display:block; font-family:var(--font-serif); font-size:20px;
    font-weight:600; line-height:1.2; margin:4px 0 6px; text-wrap:balance; }
  .t-sp-h i { font-style:normal; display:block; font-size:13.5px;
    line-height:1.55; color:var(--ink-2); }

  /* ── 03 yes or no ───────────────────────────────────────────── */
  .t-v { display:grid; gap:20px; grid-template-columns:1fr;
    padding:22px; border-radius:var(--r-card); border:1px solid var(--line); }
  /* The ANSWER column is the narrow one. It was 1fr against a 320px list,
     which gave a 44px word and one line of gloss 1150px to sit in and left
     the count crammed into a third of the width. The verdict needs enough
     room for the word and no more; the three cards are the working. */
  @media (min-width:760px) {
    .t-v { grid-template-columns:minmax(0,300px) minmax(0,1fr); }
  }
  /* THE VERDICT'S OWN THREE COLOURS, and not --good/--mid/--bad.
     --good is #2F7A57 light and #4EA87A dark: the only cool hue anywhere on
     a page that is otherwise gold, brown and cream, so a green edge read as
     foreign rather than designed. These are the same three meanings retuned
     into the warm family — moss for yes, a burnt red for no, and a warm
     neutral for a tie that is not brand gold, because a gold "No" would mean
     nothing on a page where gold is every other accent.

     Local to this component on purpose. --good and friends are right where
     they are used against tinted backgrounds elsewhere; this is one panel
     whose chrome sits directly on --surface. Measured, not chosen by eye:
     light 5.5/7.5/6.8:1 and dark 8.8/5.8/7.0:1 against their surfaces. */
  .t-v { --v-yes:#5F6F2A; --v-no:#933722; --v-maybe:#6A5842;
    --v-line:#756853; }
  :root[data-theme="dark"] .t-v { --v-yes:#AFBF68; --v-no:#D97A5C;
    --v-maybe:#B7A084; --v-line:#83745F; }
  :root[data-theme="light"] .t-v { --v-yes:#5F6F2A; --v-no:#933722;
    --v-maybe:#6A5842; --v-line:#756853; }

  /* NO TINTED FIELD. --good-bg is #EAF3ED in light and #1B2620 in dark, and
     the dark one is a COLD green against a palette whose surfaces are warm
     brown-black (#1F1810). At the size of this panel that reads as a foreign
     block with the card list floating on it, rather than as a verdict.

     So the tone moves to an edge and to the word itself: a 4px bar down the
     left, the border, and "Yes" set in the tone colour. Same device
     .m-rl-good uses on the matching page, and it survives greyscale because
     the word already says which way it went. */
  /* Neutral all round, semantic only on the left edge — a full saturated
     border was the loudest thing in the section. */
  .t-v { background:var(--surface); border-color:var(--v-line);
    border-left-width:4px; }
  .t-v-t-good { border-left-color:var(--v-yes); }
  .t-v-t-bad { border-left-color:var(--v-no); }
  .t-v-t-mid { border-left-color:var(--v-maybe); }
  .t-v-a b { display:block; font-family:var(--font-serif); font-size:44px;
    font-weight:600; line-height:1.05; margin:6px 0 8px; }
  .t-v-t-good .t-v-a b { color:var(--v-yes); }
  .t-v-t-bad .t-v-a b { color:var(--v-no); }
  .t-v-t-mid .t-v-a b { color:var(--v-maybe); }
  .t-v-a i { font-style:normal; font-size:14.5px; line-height:1.6;
    color:var(--ink-2); }
  /* --surface-2, not --surface. The list sat on --surface inside a tinted
     panel; now the panel is that same surface, so on it the list vanished.
     Set here rather than in a second .t-v-l rule above — same selector, same
     specificity, and the later one wins, which is the fault dupe_rule.py
     exists to catch and which I had just written in by hand. */
  .t-v-l { list-style:none; margin:0; padding:0; display:grid; gap:0;
    align-content:start; border:1px solid var(--line);
    border-radius:var(--r-in); background:var(--surface-2); }
  .t-v-l li { display:flex; align-items:baseline; gap:12px; padding:10px 14px;
    border-bottom:1px solid var(--line-soft); }
  .t-v-l li:last-child { border-bottom:0; }
  .t-v-l span { flex:1 1 auto; min-width:0; font-size:13.5px;
    color:var(--ink); }
  .t-v-l b { flex:none; font-size:12px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; }
  .t-v-good { color:var(--v-yes); }
  .t-v-bad { color:var(--v-no); }
  .t-v-mid { color:var(--v-maybe); }

  /* ── 04 the suits ───────────────────────────────────────────── */
  .t-su-g { display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:620px) { .t-su-g { grid-template-columns:1fr 1fr; } }
  @media (min-width:980px) { .t-su-g { grid-template-columns:repeat(4,1fr); } }
  .t-su { min-width:0; padding:20px; text-align:center;
    border:1px solid var(--line); border-radius:var(--r-card);
    background:var(--surface); }
  .t-su-e { display:grid; place-items:center; color:var(--gold-dk);
    margin-bottom:10px; }
  .t-su b { display:block; font-family:var(--font-serif); font-size:21px;
    font-weight:600; }
  .t-su-el { font-style:normal; font-size:12px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dk); }
  .t-su p { margin:10px 0 12px; font-size:13.5px; line-height:1.6;
    color:var(--ink-2); }
  .t-su-s { display:block; font-size:11.5px; color:var(--ink-3);
    padding-top:11px; border-top:1px solid var(--line-soft); }

  /* ── 05 the library ─────────────────────────────────────────── */
  .t-lib-t { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
  .t-lib-t .c-sel { display:flex; align-items:baseline; gap:8px;
    padding:9px 15px; min-height:44px; border:1px solid var(--line);
    border-radius:999px; background:var(--surface); cursor:pointer; }
  .t-lib-t b { font-size:13.5px; font-weight:650; color:var(--ink); }
  .t-lib-t i { font-style:normal; font-family:var(--font-mono);
    font-size:11.5px; color:var(--ink-3); }
  .t-lib-p { display:none; }
  .t-lib-g { display:grid; gap:12px;
    grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); }

  /* one reading type's own page */
  /* The layout, under the hero on a spread page: the shape on the left and
     what each position asks on the right. The label spans both, because it
     names the pair and not the diagram. */
  .t-spx { display:grid; gap:6px 24px; grid-template-columns:1fr;
    align-items:start; }
  @media (min-width:760px) {
    .t-spx { grid-template-columns:minmax(0,200px) minmax(0,1fr); }
  }
  .t-spx .t-sh { margin:0; padding:0; justify-content:start; }
  .t-spx-l { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .t-spx-l li { display:grid; grid-template-columns:22px 1fr; gap:2px 12px;
    align-items:baseline; padding-bottom:11px;
    border-bottom:1px solid var(--line-soft); }
  .t-spx-l li:last-child { border-bottom:0; padding-bottom:0; }
  .t-spx-l b { grid-row:span 2; font-family:var(--font-mono); font-size:12px;
    font-weight:700; color:var(--gold-dk); }
  .t-spx-l span { font-size:15px; font-weight:650; color:var(--ink); }
  .t-spx-l i { font-style:normal; font-size:13px; line-height:1.5;
    color:var(--ink-3); }

  /* ── 06 what this is ────────────────────────────────────────── */
  .t-hon { display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:720px) { .t-hon { grid-template-columns:1fr 1fr; } }
  /* The reading's own questions. The shell's .c-acc does the accordion; this
     only stacks them and gives the group an edge, so it reads as one block
     rather than three loose <details>. */
  .t-faq { display:grid; gap:8px; }
  /* The chevron goes at the END and points forward, like every other
     cross-link on the site. Leading it and rotating it made a Back button
     out of a link that goes somewhere new. */
  .t-faq-m { margin-top:18px; }

  /* Three blocks rather than an even number, so at two columns the third
     would sit alone beside a hole. Three across once there is room for it. */
  @media (min-width:960px) { .t-abt { grid-template-columns:repeat(3,1fr); } }
  .t-hon > div { min-width:0; padding:18px 20px;
    border:1px solid var(--line); border-radius:var(--r-card);
    background:var(--surface); }
  .t-hon p { margin:7px 0 0; font-size:13.5px; line-height:1.65;
    color:var(--ink-2); }

  /* ── the hero ───────────────────────────────────────────────── */
  /* ── the hub's top: the picker IS the hero ──────────────────── */
  /* Centred and full width, which no other tool page here is. Every one of
     those asks for a birth time, so it is a column of words beside a form;
     this one asks for nothing and has a single job — six doors, pick one.
     Putting that in a 500px aside while the other half of the screen argues
     for it would be the shared layout solving a problem this page does not
     have. */
  /* The head itself is the shell's .s-head-c now — the astrologer pages
     wanted the same centred top, and two callers is one too many for a
     page-local copy of it. What is left here is the strip of counts, which
     is this page's own and not something a shared head should know about. */
  .t-top { padding-top:30px; }
  .t-top .s-head { margin-bottom:26px; }
  .t-top-f { list-style:none; display:flex; flex-wrap:wrap;
    justify-content:center; gap:8px 26px; margin:18px 0 0; padding:0; }
  .t-top-f li { display:flex; align-items:baseline; gap:7px; }
  .t-top-f b { font-family:var(--font-mono); font-size:16px; font-weight:700;
    color:var(--gold-dk); }
  .t-top-f span { font-size:13px; color:var(--ink-3); }
  .t-pick-l { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
    margin-bottom:12px; }
  .t-pick-l i { font-style:normal; font-size:13px; color:var(--ink-3); }
  .t-top-k { margin-top:22px; }
  /* The form on a reading page, under the centred headline rather than
     pinned to its right. At 620px it is the width of the thing you type in;
     wider and a one-line question box looks like a mistake. */
  .t-form-w { max-width:620px; margin:0 auto; }

  /* The example on the hub is a demonstration, not your reading, so it ends
     with the door rather than with a form. */
  .t-egcta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
    margin-top:20px; }
  .t-egcta span { font-size:13.5px; color:var(--ink-3); }

  /* ── the two steps ──────────────────────────────────────────── */
  /* The rail. One row per step so the descriptions can be sentences rather
     than two words squeezed under a circle — this sits in a 500px hero
     column, not across a page. The checked step's tint comes from
     selectable_css, the same rule every other picker on the site uses; only
     the third has to be written out, because it has no label to click. */
  .t-rail { list-style:none; margin:2px 0 15px; padding:0; display:grid;
    gap:2px; }
  .t-rail-i > label, .t-rail-i > div { display:grid;
    grid-template-columns:24px 1fr; gap:1px 10px; align-items:baseline;
    padding:7px 9px; border:1px solid transparent; border-radius:var(--r-in); }
  .t-rail-i > label { cursor:pointer; }
  .t-rail-i > label:hover { background:var(--surface-2); }
  .t-rail b { grid-row:span 2; display:grid; place-items:center;
    width:24px; height:24px; border-radius:50%;
    background:var(--surface-2); border:1px solid var(--line);
    font-family:var(--font-mono); font-size:11px; font-weight:700;
    color:var(--ink-3); }
  .t-rail span { font-size:14px; font-weight:650; color:var(--ink-3); }
  .t-rail i { font-style:normal; font-size:12.5px; line-height:1.4;
    color:var(--ink-3); }
  /* The step you are in: its numeral fills, its title darkens. The tint on
     the row itself is selectable_css's. */
  #tstep-1:checked ~ .t-rail .t-ri-1 b, #tstep-2:checked ~ .t-rail .t-ri-2 b,
  #tstep-3:checked ~ .t-rail .t-ri-3 b { background:var(--gold-solid);
    border-color:var(--gold-solid); color:var(--gold-solid-text); }
  #tstep-1:checked ~ .t-rail .t-ri-1 span,
  #tstep-2:checked ~ .t-rail .t-ri-2 span,
  #tstep-3:checked ~ .t-rail .t-ri-3 span { color:var(--ink); }
  #tstep-3:checked ~ .t-rail .t-ri-3 > div { border-color:var(--gold);
    background:var(--gold-bg); }
  /* A step already taken. Not greyed out — you can go back to it, and a
     control that looks disabled and is not is worse than no state at all. */
  #tstep-2:checked ~ .t-rail .t-ri-1 b,
  #tstep-3:checked ~ .t-rail .t-ri-1 b,
  #tstep-3:checked ~ .t-rail .t-ri-2 b { background:var(--gold-bg);
    border-color:var(--gold-lt); color:var(--gold-dk); }

  .t-pane { display:none; }
  .t-pane .c-field { margin-bottom:12px; }
  .t-bk { display:block; margin-top:12px; text-align:center; font-size:13px;
    font-weight:650; color:var(--gold-dk); cursor:pointer; }
  .t-bk:hover { text-decoration:underline; }
  .t-done-p { margin:2px 0 14px; font-size:14px; line-height:1.6;
    color:var(--ink-2); }
  /* What to ask, above the box rather than under it, because advice that
     arrives after you have typed is not advice. */
  .t-ask-h { margin:2px 0 13px; font-size:13.5px; line-height:1.6;
    color:var(--ink-2); }
  .t-ask { display:flex; flex-wrap:wrap; align-items:center; gap:7px;
    margin:-2px 0 15px; }
  .t-ask .h-f-l { flex:0 0 100%; margin-bottom:1px; }
  .t-ask-i { font-size:12.5px; line-height:1.35; color:var(--ink-2);
    padding:7px 12px; border:1px solid var(--line); border-radius:999px;
    background:var(--surface-2); }
  /* Only once the script has made them do something. Until then they are
     three sentences and must not look like three dead buttons. */
  .t-ask-i[role="button"] { cursor:pointer; }
  .t-ask-i[role="button"]:hover { border-color:var(--gold);
    background:var(--gold-bg); color:var(--ink); }
  .t-ask-i:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }


  .t-err { color:var(--bad-dk); }

  /* ── one card's own page ────────────────────────────────────── */
  .t-cp { display:grid; gap:24px; grid-template-columns:1fr;
    align-items:start; }
  @media (min-width:820px) {
    .t-cp { grid-template-columns:minmax(0,230px) minmax(0,1fr); }
  }
  .t-cp-m { min-width:0; }
  .t-cp-s { display:grid; gap:14px; }
  .t-cp-b { padding:18px 20px; border:1px solid var(--line);
    border-radius:var(--r-card); background:var(--surface); }
  .t-cp-b p { margin:7px 0 0; font-size:14.5px; line-height:1.65;
    color:var(--ink-2); }
  .t-cp-two { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:620px) { .t-cp-two { grid-template-columns:1fr 1fr; } }
  .t-cp-kv { display:grid; gap:0; margin-top:14px; padding-top:14px;
    border-top:1px solid var(--line-soft); }
  .t-cp-kv > div { display:flex; align-items:baseline; gap:14px;
    padding:7px 0; border-bottom:1px solid var(--line-soft); }
  .t-cp-kv > div:last-child { border-bottom:0; }
  .t-cp-kv span { flex:none; width:112px; }
  .t-cp-kv b { font-size:13.5px; font-weight:650; color:var(--ink); }
  .t-near { display:grid; gap:12px;
    grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); }

/* ── 10 FAQ ──────────────────────────────────────────── */
.h-fq-b { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
/* ── ON A PHONE THE TABS ARE A RAIL ──
   Eight category tabs at 44px each, wrapping: 200px of tab strip before a
   reader reaches a single question, which is a quarter of the screen spent
   on navigation for a section that is mostly answers. In a row it is 44px
   and the swipe is the same gesture the four rails above it use.
   Written AFTER the base rule and scoped .h-fq .h-fq-b, because a media
   query adds no specificity and this file has lost that fight before. */
@media (max-width:640px) {
  .h-fq .h-fq-b { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
                  margin-inline:-16px; padding-inline:16px;
                  scroll-padding-inline:16px; scroll-snap-type:x proximity;
                  margin-bottom:14px; }
  .h-fq .h-fq-b::-webkit-scrollbar { display:none; }
  .h-fq .h-fq-t { flex:0 0 auto; scroll-snap-align:start; }
}
.h-fq-t { display:inline-flex; align-items:center; gap:9px; min-height:44px;
          padding:0 16px; cursor:pointer; font-size:14px; font-weight:650;
          color:var(--ink-2); border:1px solid var(--line);
          border-radius:var(--r-pill); background:var(--surface); }
.h-fq-t:hover { border-color:var(--gold-lt); color:var(--gold-dk); }
/* The count is part of the label, not decoration: it is how you know
   Getting started has five and Your kundli has five before you open either. */
.h-fq-t i { font-style:normal; font-family:var(--font-mono); font-size:11px;
            min-width:19px; height:19px; display:grid; place-items:center;
            border-radius:var(--r-pill); background:var(--rail);
            color:var(--ink-3); }
.h-fq-p { display:none; }
.h-fq-p .c-acc:last-child { margin-bottom:0; }#tfaq-tarot:checked ~ * .h-fq-p-tarot { display:block; }
#tfaq-tarot:focus-visible ~ * label[for="tfaq-tarot"] { outline:2px solid var(--gold); outline-offset:2px; }
#tfaq-tarot:checked ~ * label[for="tfaq-tarot"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#tfaq-tarot:checked ~ * label[for="tfaq-tarot"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#tfaq-start:checked ~ * .h-fq-p-start { display:block; }
#tfaq-start:focus-visible ~ * label[for="tfaq-start"] { outline:2px solid var(--gold); outline-offset:2px; }
#tfaq-start:checked ~ * label[for="tfaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#tfaq-start:checked ~ * label[for="tfaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); }#tlib-major:checked ~ .t-lp-major,
#tlib-major:checked ~ * .t-lp-major { display:block; }
#tlib-major:checked ~ label[for="tlib-major"],
#tlib-major:checked ~ * label[for="tlib-major"] { border-color:var(--gold); background:var(--gold-bg); }
#tlib-major:focus-visible ~ label[for="tlib-major"],
#tlib-major:focus-visible ~ * label[for="tlib-major"] { outline:2px solid var(--gold); outline-offset:2px; }
#tlib-wands:checked ~ .t-lp-wands,
#tlib-wands:checked ~ * .t-lp-wands { display:block; }
#tlib-wands:checked ~ label[for="tlib-wands"],
#tlib-wands:checked ~ * label[for="tlib-wands"] { border-color:var(--gold); background:var(--gold-bg); }
#tlib-wands:focus-visible ~ label[for="tlib-wands"],
#tlib-wands:focus-visible ~ * label[for="tlib-wands"] { outline:2px solid var(--gold); outline-offset:2px; }
#tlib-cups:checked ~ .t-lp-cups,
#tlib-cups:checked ~ * .t-lp-cups { display:block; }
#tlib-cups:checked ~ label[for="tlib-cups"],
#tlib-cups:checked ~ * label[for="tlib-cups"] { border-color:var(--gold); background:var(--gold-bg); }
#tlib-cups:focus-visible ~ label[for="tlib-cups"],
#tlib-cups:focus-visible ~ * label[for="tlib-cups"] { outline:2px solid var(--gold); outline-offset:2px; }
#tlib-swords:checked ~ .t-lp-swords,
#tlib-swords:checked ~ * .t-lp-swords { display:block; }
#tlib-swords:checked ~ label[for="tlib-swords"],
#tlib-swords:checked ~ * label[for="tlib-swords"] { border-color:var(--gold); background:var(--gold-bg); }
#tlib-swords:focus-visible ~ label[for="tlib-swords"],
#tlib-swords:focus-visible ~ * label[for="tlib-swords"] { outline:2px solid var(--gold); outline-offset:2px; }
#tlib-pentacles:checked ~ .t-lp-pentacles,
#tlib-pentacles:checked ~ * .t-lp-pentacles { display:block; }
#tlib-pentacles:checked ~ label[for="tlib-pentacles"],
#tlib-pentacles:checked ~ * label[for="tlib-pentacles"] { border-color:var(--gold); background:var(--gold-bg); }
#tlib-pentacles:focus-visible ~ label[for="tlib-pentacles"],
#tlib-pentacles:focus-visible ~ * label[for="tlib-pentacles"] { outline:2px solid var(--gold); outline-offset:2px; }