/* KEBUD — celestial layer.
   Astrology appears as marginalia, never as clipart: an ecliptic rim built from the same glyphs the
   chart wheel uses, a quiet star field on the dark sections, and a numbered rule that draws itself as
   each block arrives. Every colour here is an existing token or a shade already in kebud.css; nothing
   introduces a new hue. All movement stops under prefers-reduced-motion and under data-motion="reduced". */

/* ── Section marginalia ─────────────────────────────────────────────────────────────── */
.concept.a.final .page{counter-reset:kebud-section}
.concept.a.final .page>section[id^="a-"]:not(#a-home){counter-increment:kebud-section}
.concept.a.final .page>section[id^="a-"]:not(#a-home) .eyebrow::before{
  content:counter(kebud-section,decimal-leading-zero) " / ";opacity:.55}

/* A hairline that draws itself across the top of each block. .contact brings its own border. */
.concept.a.final .page>section[id^="a-"]:not(#a-home,.contact){position:relative}
.concept.a.final .page>section[id^="a-"]:not(#a-home,.contact)::before{
  content:'';position:absolute;top:0;left:clamp(22px,4vw,64px);right:clamp(22px,4vw,64px);height:1px;
  background:currentColor;opacity:.16;transform:scaleX(1);transform-origin:left}

/* ── Ecliptic rim ───────────────────────────────────────────────────────────────────── */
.celestial-ring{position:absolute;pointer-events:none;color:inherit;opacity:.32;
  width:min(640px,72vw);aspect-ratio:1;right:-11%;top:50%;translate:0 -50%;z-index:0}
.celestial-ring .ring-line{fill:none;stroke:currentColor;stroke-width:1}
.celestial-ring .ring-dashed{stroke-dasharray:3 9}
.celestial-ring .ring-faint{opacity:.45}
.celestial-ring .ring-tick{stroke:currentColor;stroke-width:1;opacity:.5}
.celestial-ring .ring-glyph{fill:currentColor;font-size:20px;text-anchor:middle;dominant-baseline:central;opacity:.8}
.celestial-ring .ring-turn{transform-box:view-box;transform-origin:200px 200px}
/* Everything the ring sits behind has to stay above it. */
.concept.a.final section:has(.celestial-ring){overflow:hidden}
.concept.a.final section:has(>.celestial-ring)>:not(.celestial-ring){position:relative;z-index:1}

/* ── A star field for the dark blocks, drawn with gradients so it costs no elements ──── */
.concept.a.final :is(.calendar,.chart-cta,.chart-stage,.sky-feature-dark){isolation:isolate}
.concept.a.final :is(.calendar,.chart-cta,.chart-stage)::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 9% 18%,#e7e6d6,transparent 60%),
    radial-gradient(1px 1px at 21% 63%,#e7e6d6,transparent 60%),
    radial-gradient(1.6px 1.6px at 33% 28%,#dba38c,transparent 60%),
    radial-gradient(1px 1px at 44% 79%,#e7e6d6,transparent 60%),
    radial-gradient(1.2px 1.2px at 57% 12%,#e7e6d6,transparent 60%),
    radial-gradient(1px 1px at 63% 48%,#e7e6d6,transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 86%,#dba38c,transparent 60%),
    radial-gradient(1px 1px at 86% 33%,#e7e6d6,transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 70%,#e7e6d6,transparent 60%),
    radial-gradient(1px 1px at 15% 90%,#e7e6d6,transparent 60%),
    radial-gradient(1px 1px at 50% 94%,#e7e6d6,transparent 60%),
    radial-gradient(1.2px 1.2px at 80% 8%,#e7e6d6,transparent 60%);
  background-repeat:no-repeat}
.concept.a.final :is(.calendar,.chart-cta)>*:not(.celestial-ring){position:relative;z-index:1}

/* ── Zodiac grid: each sign carries its own glyph, revealed on hover and on focus ────── */
.concept.a.final .sign{position:relative;overflow:hidden;isolation:isolate}
.concept.a.final .sign[data-glyph]::before{
  content:attr(data-glyph);position:absolute;right:14px;bottom:-16px;z-index:-1;
  font:120px/1 var(--serif);color:var(--accent);opacity:0;translate:0 14px}
.concept.a.final .sign[data-glyph]:hover::before,
.concept.a.final .sign[data-glyph]:focus-visible::before{opacity:.16;translate:0 0}

/* ── The birth-chart stage: the form stands on a night panel instead of on paper ─────── */
.concept.a.final .chart-stage{position:relative;isolation:isolate;overflow:hidden;
  width:min(1100px,92vw);margin:34px 0 10px 50%;translate:-50% 0;
  padding:clamp(34px,5vw,68px) clamp(22px,4vw,60px) clamp(30px,4vw,54px);
  background:var(--ink);color:var(--paper);border-radius:3px}
.concept.a.final .chart-stage>*:not(.celestial-ring,.page-hero-backdrop){position:relative;z-index:1}
.concept.a.final .chart-stage:has(>.page-hero-backdrop)::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,#1b1a16e6 0%,#1b1a16b3 52%,#1b1a1659 100%)}
.concept.a.final .chart-stage .celestial-ring{opacity:.22;right:-16%;width:min(560px,76vw)}
.concept.a.final .chart-stage .eyebrow{color:#dba38c;margin-bottom:22px}
.reading .chart-stage h1{color:var(--paper);max-width:14ch;margin-bottom:22px}
.reading .chart-stage .collection-intro{max-width:52ch;opacity:.86}
.concept.a.final .chart-stage .chart-form{border-color:#f4f0e833;margin-top:30px}
.concept.a.final .chart-stage .chart-field label{opacity:.72}
.concept.a.final .chart-stage :is(.chart-field input[type=number],.chart-field select){
  border-color:#f4f0e840;background:#f4f0e80d;color:var(--paper)}
.concept.a.final .chart-stage .chart-field select option{color:var(--ink)}
.concept.a.final .chart-stage :is(.chart-field input:focus-visible,.chart-field select:focus-visible){outline-color:#dba38c}
.concept.a.final .chart-stage .outline{border-color:var(--paper)}
.concept.a.final .chart-stage .field-error{color:#f0b7a4}
.reading .chart-stage .chart-privacy{opacity:.66}
@media(prefers-reduced-motion:no-preference){
  .concept.a.final .chart-stage .chart-form .outline:hover{background:#dba38c;border-color:#dba38c;color:var(--ink)}
}

/* ── The result gets an index, so a very long chart stays navigable ──────────────────── */
.concept.a.final .reading .chart-index{position:sticky;top:88px;z-index:4;display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 30px;padding:12px 0;background:var(--paper)}
.concept.a.final .reading .chart-index a{padding:7px 14px;border:1px solid var(--line,#28272026);border-radius:999px;
  font:11px 'IBM Plex Mono',monospace;letter-spacing:.07em;text-transform:uppercase;line-height:1.6}
.concept.a.final .reading .chart-index a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink);text-decoration:none}
.concept.a.final .reading .chart-index a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.reading .chart-result h3{scroll-margin-top:150px}
@media(max-width:700px){.concept.a.final .reading .chart-index{top:74px;gap:6px}.concept.a.final .reading .chart-index a{padding:6px 11px;font-size:10px}}

/* ── Motion ─────────────────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .concept.a.final .page>section[id^="a-"]:not(#a-home,.contact)::before{
    transform:scaleX(0);transition:transform 1.2s var(--editorial-ease,cubic-bezier(.16,1,.3,1))}
  body[data-motion="full"] .concept.a.final .is-revealed::before{transform:scaleX(1)}
  body[data-motion="full"] .celestial-ring .ring-turn{animation:ecliptic-turn 240s linear infinite}
  body[data-motion="full"] .celestial-ring .ring-turn-back{animation-duration:360s;animation-direction:reverse}
  body[data-motion="full"] :is(.calendar,.chart-cta,.chart-stage)::after{animation:star-breathe 14s ease-in-out infinite alternate}
  body[data-motion="full"] .concept.a.final .sign[data-glyph]::before{
    transition:opacity .45s var(--editorial-ease,ease),translate .45s var(--editorial-ease,ease)}
  @keyframes ecliptic-turn{to{rotate:360deg}}
  @keyframes star-breathe{from{opacity:.38}to{opacity:.68}}
}

/* The calendar's own text comes first: the rim sits further out and quieter behind it. */
.concept.a.final .calendar .celestial-ring{right:-19%;opacity:.26}

/* The homepage invitation shows the same rim the calculator does, and keeps its scroll-linked turn:
   kebud.js writes --spin as the block passes, so the dial answers the page instead of ticking on its own. */
.concept.a.final .chart-cta-ring{overflow:hidden}
.concept.a.final .chart-cta-ring:before,.concept.a.final .chart-cta-ring:after{display:none}
.concept.a.final .chart-cta-ring .celestial-ring{inset:0;width:auto;height:auto;translate:none;opacity:.6}
@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .chart-cta-ring .ring-turn{animation:none;rotate:var(--spin,0deg);transition:rotate .18s linear}
  body[data-motion="full"] .chart-cta-ring .ring-turn-back{rotate:calc(var(--spin,0deg) * -1.4)}
}

/* ── A naive backdrop for the four reading blocks ─────────────────────────────────────
   Astroloji Notları, Gökyüzünden Notlar, Astroloji Sözlüğü and Günlük Notlar keep the live
   composition; only the air behind them changes. A soft wash plus a handful of stars, drawn with
   gradients so there is no image to upload and nothing extra to download. It drifts a few pixels
   over half a minute — enough to feel alive, not enough to notice while reading. */
.concept.a.final .page>:is(.notes,.today,.dictionary,.instagram){position:relative;isolation:isolate;overflow:hidden}
.concept.a.final .page>:is(.notes,.today,.dictionary,.instagram)::after{
  content:'';position:absolute;inset:-28px;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(40vw 40vw at 86% 14%,#a3452e0f,transparent 70%),
    radial-gradient(32vw 32vw at 8% 88%,#2e3d3412,transparent 70%),
    radial-gradient(1.6px 1.6px at 22% 18%,#a3452e4d,transparent 60%),
    radial-gradient(1.2px 1.2px at 69% 26%,#2827203d,transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 72%,#a3452e40,transparent 60%),
    radial-gradient(1px 1px at 88% 58%,#2827203d,transparent 60%),
    radial-gradient(1.2px 1.2px at 13% 54%,#2827203d,transparent 60%),
    radial-gradient(1px 1px at 57% 91%,#a3452e40,transparent 60%)}
@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .concept.a.final .page>:is(.notes,.today,.dictionary,.instagram)::after{
    animation:backdrop-drift 34s ease-in-out infinite alternate}
  @keyframes backdrop-drift{from{transform:translate3d(-10px,-6px,0)}to{transform:translate3d(10px,6px,0)}}
}

/* ── Inner-page hero ──────────────────────────────────────────────────────────────────
   One band at the top of every listing page. It breaks out of the 850px reading column the way the
   chart result does, carries either the editor's picture or a drawn motif, and collapses to a plain
   stacked block on a phone. Text sits above everything; the motif never competes with it. */
.reading>.page-hero{position:relative;isolation:isolate;overflow:hidden;
  width:min(1100px,92vw);margin:0 0 clamp(30px,4vw,52px) 50%;translate:-50% 0;
  padding:clamp(34px,5vw,72px) clamp(22px,4vw,56px);border-radius:3px;background:var(--soft)}
.reading>.page-hero>.page-hero-copy{position:relative;z-index:2;max-width:min(640px,64%)}
.reading>.page-hero h1{overflow-wrap:normal;text-wrap:balance}
.reading>.page-hero h1{margin:0 0 18px}
.reading>.page-hero .eyebrow{margin-bottom:20px}
.reading>.page-hero .collection-intro{margin:0;max-width:44ch}

/* The editor's picture: a backdrop, with a scrim so the heading keeps its contrast. */
.page-hero-backdrop{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.reading>.page-hero-image-on{background:var(--ink);color:var(--paper);min-height:clamp(240px,30vw,380px);display:flex;align-items:flex-end}
.reading>.page-hero-image-on::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#1b1a16e0 0%,#1b1a16a6 46%,#1b1a1640 100%)}
.reading>.page-hero-image-on h1{color:var(--paper)}
.reading>.page-hero-image-on .eyebrow{color:#dba38c}

/* The drawn motifs, for a section with no picture of its own. */
.reading>.page-hero-ring .celestial-ring{opacity:.3;right:-8%;width:min(520px,62%)}
.reading>.page-hero-stars::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;
  background-image:
    radial-gradient(44% 66% at 86% 24%,#a3452e1a,transparent 70%),
    radial-gradient(2px 2px at 62% 22%,#a3452e8c,transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 58%,#28272066,transparent 60%),
    radial-gradient(1.8px 1.8px at 91% 34%,#a3452e73,transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 80%,#28272059,transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 72%,#2827204d,transparent 60%),
    radial-gradient(1.2px 1.2px at 96% 62%,#2827204d,transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 40%,#a3452e59,transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 12%,#28272047,transparent 60%)}
.moon-row{position:absolute;z-index:0;right:clamp(16px,4%,56px);top:50%;translate:0 -50%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);width:min(300px,46%)}
.moon-dot{position:relative;aspect-ratio:1;border-radius:50%;background:var(--ink);opacity:.22;overflow:hidden}
/* The shadow is a disc of the page colour slid across each face: covering it is a new moon, fully
   off it is a full moon. Eight explicit offsets, because waxing and waning slide to opposite sides. */
.moon-dot i{position:absolute;inset:-1px;border-radius:50%;background:var(--soft);translate:var(--shift,0) 0}
.moon-dot:nth-child(1) i{--shift:0}
.moon-dot:nth-child(2) i{--shift:-32%}
.moon-dot:nth-child(3) i{--shift:-58%}
.moon-dot:nth-child(4) i{--shift:-84%}
.moon-dot:nth-child(5) i{--shift:-108%}
.moon-dot:nth-child(6) i{--shift:84%}
.moon-dot:nth-child(7) i{--shift:58%}
.moon-dot:nth-child(8) i{--shift:32%}

@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .reading>.page-hero-image-on .page-hero-backdrop{animation:hero-drift 28s ease-in-out infinite alternate}
  body[data-motion="full"] .reading>.page-hero-stars::after{animation:backdrop-drift 30s ease-in-out infinite alternate}
  body[data-motion="full"] .moon-dot i{transition:translate .6s var(--editorial-ease)}
  body[data-motion="full"] .moon-row{animation:moon-breathe 22s ease-in-out infinite alternate}
  @keyframes hero-drift{from{transform:scale(1.02) translate3d(-8px,0,0)}to{transform:scale(1.07) translate3d(8px,0,0)}}
  @keyframes moon-breathe{from{opacity:.75}to{opacity:1}}
}

@media(max-width:760px){
  .reading>.page-hero{width:100%;margin-left:0;translate:none;padding:26px 20px 28px;border-radius:2px}
  .reading>.page-hero>.page-hero-copy{max-width:none}
  .reading>.page-hero-image-on{min-height:220px}
  .reading>.page-hero-ring .celestial-ring{opacity:.2;right:-22%;width:min(300px,78%)}
  .moon-row{position:static;translate:none;width:min(220px,62%);margin:0 0 26px;gap:10px}
  .reading>.page-hero-stars::after{background-size:cover}
}

/* A standing portrait beside the heading, for the pages whose picture is a person rather than a scene. */
.reading>.page-hero-portrait{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.reading>.page-hero-portrait>.page-hero-copy{max-width:none}
.page-hero-figure{position:relative;z-index:2;width:100%;height:auto;aspect-ratio:4/5;
  max-height:min(420px,46vh);object-fit:cover;border-radius:3px;filter:grayscale(1)}
@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .page-hero-figure{transition:filter .8s var(--editorial-ease)}
  body[data-motion="full"] .page-hero-portrait:hover .page-hero-figure{filter:grayscale(0)}
}
@media(max-width:760px){
  .reading>.page-hero-portrait{grid-template-columns:minmax(0,1fr);gap:24px}
  .page-hero-figure{max-height:min(320px,40vh);max-width:260px}
}

/* ── The calculator's controls ────────────────────────────────────────────────────────
   Everything here was appearance:auto — a Windows checkbox and a Windows select dropped onto a night
   panel. Drawn instead, in the site's own colours, with the native behaviour untouched: these are still
   a real <input type=checkbox> and a real <select>, so the keyboard, the screen reader and the phone's
   own picker all work exactly as before. */
.concept.a.final .chart-stage .chart-field label{font-size:11px;letter-spacing:.11em;opacity:.66;margin-bottom:11px}
.concept.a.final .chart-stage .chart-field :is(input[type=number],select){
  appearance:none;-webkit-appearance:none;min-height:54px;padding:14px 16px;border-radius:4px;
  border:1px solid #f4f0e830;background-color:#f4f0e80d;color:var(--paper);
  font:17px Manrope,Arial,sans-serif;width:100%}
@media(hover:hover){
  .concept.a.final .chart-stage .chart-field :is(input[type=number],select):hover{border-color:#f4f0e85c;background-color:#f4f0e817}
}
.concept.a.final .chart-stage .chart-field :is(input[type=number],select):focus-visible{
  border-color:#dba38c;background-color:#f4f0e81a;outline:2px solid #dba38c;outline-offset:1px}
/* The spin buttons are the most operating-system-looking part of a number field. */
.concept.a.final .chart-field input[type=number]{-moz-appearance:textfield}
.concept.a.final .chart-field input[type=number]::-webkit-outer-spin-button,
.concept.a.final .chart-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* A drawn chevron replaces the native arrow; the list itself stays the browser's own. The selector
   carries .chart-form because the rule above uses :is(), which lifts its specificity over a bare
   element selector — without it this whole block loses and the chevron never appears. */
.concept.a.final .chart-stage .chart-form .chart-field select{
  padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f4f0e8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center;background-size:13px}
.concept.a.final .chart-stage .chart-field select option{background:var(--ink);color:var(--paper)}

/* The checkbox: a 24px square that fills with the accent and draws its own tick. */
.concept.a.final .chart-stage .chart-check{display:flex;align-items:center;gap:13px;min-height:44px;cursor:pointer}
.concept.a.final .chart-stage .chart-check input{
  appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;min-height:0;margin:0;
  border:1px solid #f4f0e866;border-radius:6px;background:#f4f0e80d;display:grid;place-items:center;cursor:pointer}
.concept.a.final .chart-stage .chart-check input::after{
  content:'';width:11px;height:6px;margin-top:-3px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(.4);opacity:0}
.concept.a.final .chart-stage .chart-check input:checked{background:#dba38c;border-color:#dba38c}
.concept.a.final .chart-stage .chart-check input:checked::after{opacity:1;transform:rotate(-45deg) scale(1)}
.concept.a.final .chart-stage .chart-check input:focus-visible{outline:2px solid #dba38c;outline-offset:3px}
@media(hover:hover){
  .concept.a.final .chart-stage .chart-check:hover input:not(:checked){border-color:#f4f0e8b3}
}
@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .concept.a.final .chart-stage .chart-field :is(input,select){
    transition:border-color .2s ease,background-color .2s ease}
  body[data-motion="full"] .concept.a.final .chart-stage .chart-check input{transition:background .2s ease,border-color .2s ease}
  body[data-motion="full"] .concept.a.final .chart-stage .chart-check input::after{transition:opacity .18s ease,transform .18s var(--editorial-ease)}
}

/* The one thing the visitor came to press should read as the primary action, not an outline. */
.concept.a.final .chart-stage .chart-form .outline{
  background:var(--paper);color:var(--ink);border-color:var(--paper);
  min-height:54px;padding-inline:32px;font-weight:600;letter-spacing:.01em}

/* ── Waiting for the chart ────────────────────────────────────────────────────────────
   The same ecliptic motif the page is built on, reduced to what a waiting state needs. It covers the
   viewport so the answer arrives into a settled screen rather than onto a half-filled form. The spin is
   gated on the visitor's own motion preference only, not on the panel switch: the panel turns off
   decoration, and a progress indicator is not decoration. */
.chart-loader{position:fixed;inset:0;z-index:90;display:grid;align-content:center;justify-items:center;
  padding:40px 24px;text-align:center;background:#1b1a16f7;color:var(--paper)}
.chart-loader[hidden]{display:none}
.chart-loader-ring{position:relative;width:clamp(72px,20vw,104px);aspect-ratio:1;margin-bottom:28px}
.chart-loader-ring span{position:absolute;inset:0;border:1px solid #f4f0e840;border-radius:50%}
.chart-loader-ring span:last-of-type{inset:19%;border-style:dashed;border-color:#dba38c73}
.chart-loader-ring i{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:#dba38c}
.chart-loader-title{font:400 clamp(21px,4vw,27px)/1.3 var(--serif);margin:0 0 10px}
.chart-loader-note{font-size:14px;line-height:1.6;margin:0;max-width:34ch;opacity:.66}
@media(prefers-reduced-motion:no-preference){
  .chart-loader-ring{animation:loader-orbit 2.8s linear infinite}
  .chart-loader-ring span:last-of-type{animation:loader-orbit 4.4s linear infinite reverse}
  .chart-loader{animation:loader-arrive .25s ease both}
  @keyframes loader-orbit{to{rotate:360deg}}
  @keyframes loader-arrive{from{opacity:0}to{opacity:1}}
}
/* The panel's "animations off" switch stops everything on the page, including this. A spinner that does
   not spin tells the visitor nothing, so the waiting ring is the one thing that keeps moving — still
   only when the visitor's own system preference allows it. */
@media(prefers-reduced-motion:no-preference){
  .concept.a.final .chart-loader-ring{animation:loader-orbit 2.8s linear infinite!important}
  .concept.a.final .chart-loader-ring span:last-of-type{animation:loader-orbit 4.4s linear infinite reverse!important}
}

/* ── A zodiac page ────────────────────────────────────────────────────────────────────
   The emblem shows where the sign falls on the wheel; the strip lets a reader step straight to any
   other one instead of walking through twelve. */
.concept.a.final .entry-zodiac{position:relative}
.zodiac-emblem{width:min(188px,38vw);margin:0 0 26px}
.zodiac-emblem svg{width:100%;height:auto;display:block}
.zodiac-emblem .emblem-line{fill:none;stroke:currentColor;stroke-width:1;opacity:.26}
.zodiac-emblem .emblem-tick{stroke:currentColor;stroke-width:1;opacity:.18}
.zodiac-emblem .emblem-wedge{fill:var(--accent);opacity:.16;stroke:var(--accent);stroke-width:1}
.zodiac-emblem .emblem-glyph{fill:var(--accent);font-size:76px;text-anchor:middle;dominant-baseline:central}
/* The emblem belongs in the margin beside the column, not inside it. Carving 230px out of an 850px
   measure left the prose at 572px — narrower than anything else on the site reads — while 287px of
   margin sat empty next to it. Below this width there is no margin to spare, so it stacks above the
   heading instead. It is sticky, so it travels with the reader and stops where the article does. */
@media(min-width:1300px){
  .concept.a.final .entry-zodiac{
    display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:30px;row-gap:0;
    margin-right:-190px;padding-right:0}
  .concept.a.final .entry-zodiac>*{grid-column:1}
  .concept.a.final .entry-zodiac>.zodiac-emblem{
    grid-column:2;grid-row:1/span 40;align-self:start;
    position:sticky;top:118px;width:160px;margin:0}
}

.concept.a.final .zodiac-nav{margin-top:clamp(40px,5vw,64px);padding-top:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
/* .page .reading nav sets display:block with a higher specificity than a bare class, so the grid has
   to be stated from .reading down — the same trap the chart index hit. */
.concept.a.final .reading .zodiac-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px;margin-top:18px}
.concept.a.final .zodiac-strip a{display:flex;align-items:center;gap:11px;min-height:48px;padding:6px 10px;
  border-radius:3px;font-size:16px;line-height:1.35}
.zodiac-strip-glyph{font-size:21px;color:var(--accent);flex-shrink:0;width:24px;text-align:center}
.concept.a.final .zodiac-strip a[aria-current]{background:var(--soft);color:var(--accent);font-weight:600}
.concept.a.final .zodiac-strip a:hover{background:#a3452e0f;color:var(--accent);text-decoration:none}

@media(prefers-reduced-motion:no-preference){
  body[data-motion="full"] .zodiac-emblem .emblem-wedge{animation:emblem-fill .9s var(--editorial-ease) both}
  body[data-motion="full"] .zodiac-emblem .emblem-glyph{animation:emblem-rise 1s var(--editorial-ease) .15s both}
  body[data-motion="full"] .concept.a.final .zodiac-strip a{transition:background .2s ease,color .2s ease}
  @keyframes emblem-fill{from{opacity:0}to{opacity:.16}}
  @keyframes emblem-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
/* Twelve signs in one column is a long scroll on a phone; two keeps the index readable at a glance. */
@media(max-width:620px){
  .concept.a.final .reading .zodiac-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
  .concept.a.final .reading .zodiac-strip a{font-size:15px;gap:9px;padding:6px 8px}
}