/** Shopify CDN: Minification failed

Line 1101:0 Unexpected "<"

**/
/* ==========================================================================
   Orrery — product page styles
   Moved from orrery3.html. Element-level rules are scoped to .orrery so the
   theme's own header and footer keep their styles; .section and .field are
   renamed .orrery-section / .orrery-field because Horizon's base.css already
   defines both. The design's own header, announcement bar and footer are
   replaced by the theme's header and footer groups, styled to match at the
   end of this file. Fonts are the six woff2 files beside this stylesheet.
   ========================================================================== */
/* --------------------------------------------------------------- fonts */
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("libre-baskerville-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("libre-baskerville-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("libre-baskerville-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("source-serif-4-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Orrery — styles
   Palette and type sampled from the desktop design.
   ========================================================================== */

:root {
  --cream:        #f4efe4;
  --cream-deep:   #eae3d1;   /* format card fill */
  --navy:         #111a2d;   /* buttons, headings, selected border */
  --navy-soft:    #1b2235;   /* image placeholders */
  --ink:          #2b3852;   /* body copy */
  --ink-muted:    #3d4962;   /* labels, captions, eyebrows */
  --gold:         #af8c2d;   /* rules, stars, numerals, faq icon */
  --gold-bright:  #c9a544;   /* gold on navy */
  --rule:         #d3bf7d;   /* the same gold as the section rules, lighter, for lists and minor dividers */
  --rule-input:   #979b9e;   /* input underline */
  --placeholder:  #a4a4a0;
  --card-border:  #e8e2d2;
  --error:        #9b3b2c;
  /* the screen chart, on the cream ground: navy linework, a warm grey for the
     cusps and numbers (5.2:1), the palette's red for hard aspects (6.4:1) */
  --wheel-ink:    #111b2e;
  --wheel-grey:   #6b6357;
  --wheel-hard:   #9b3b2c;

  --serif-display: "Libre Baskerville", "Baskerville", "Georgia", "Times New Roman", serif;
  --serif-text:    "Source Serif 4", "Source Serif Pro", "Georgia", "Times New Roman", serif;

  --container: 76rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-gap: clamp(3rem, 7vw, 5.5rem);
}

/* --------------------------------------------------------------- reset */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.orrery) *, :where(.orrery) *::before, :where(.orrery) *::after { transition: none !important; animation: none !important; }
}
body:has(.orrery) { background: var(--cream); }
.orrery {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: clamp(1.0625rem, 0.45vw + 0.95rem, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.orrery) :is(img, svg) { display: block; max-width: 100%; }
:where(.orrery) :is(h1, h2, h3, p, figure, blockquote, dl, dd, ol, fieldset) { margin: 0; }
:where(.orrery) fieldset { padding: 0; border: 0; min-width: 0; }
:where(.orrery) :is(button, input) { font: inherit; color: inherit; }
:where(.orrery) a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--navy); color: var(--cream);
  padding: .6rem 1rem; z-index: 10;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:where(.orrery) :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.orrery-section { padding-top: var(--section-gap); }
.orrery-section > .rule--gold { margin-bottom: clamp(2rem, 4vw, 3rem); }

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule--gold { border-top-color: var(--gold); }

/* --------------------------------------------------------------- type */
.wordmark {
  display: block;
  text-align: center;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding-left: .32em; /* balance the trailing letter-spacing */
}

:where(.orrery) h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.9rem, 1rem + 3vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
:where(.orrery) h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.6rem);
  line-height: 1.2;
  text-wrap: balance;
}
:where(.orrery) h3 {
  font-family: var(--serif-text);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.15em;
  line-height: 1.35;
}

.eyebrow {
  font-family: var(--serif-display);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .9rem;
}
.eyebrow--muted { margin: 0; }

.lede {
  font-size: 1.1em;
  color: var(--ink);
  max-width: 44ch;
  margin-top: 1.4rem;
}
.section-intro {
  margin-top: .9rem;
  max-width: 62ch;
}
.small { font-size: .92em; color: var(--ink-muted); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--serif-display);
  font-size: 1.05rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 1.15rem 1.5rem;
  border: 1.5px solid var(--navy);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn--primary { background: var(--navy); color: var(--cream); }
.btn--primary:hover { background: #1f2b47; }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream); }
.btn--block { display: block; width: 100%; }

/* --------------------------------------------------------------- image placeholders
   Each .ph is a navy block. Drop a photo with the matching filename into
   /images and it fills the block; until then the block shows the intended
   shot as a muted caption, exactly as the design does. */
.ph {
  position: relative;
  display: block;
  background: var(--navy-soft);
  overflow: hidden;
  isolation: isolate;
}
.ph > picture { position: absolute; inset: 0; display: block; }
.ph > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The hero photo is pushed in a little so the framed poster carries the frame,
   with the book kept in view at the right. The loupe reads the img's rendered
   box, so the zoom and its origin can change freely here. */
.ph--wide { aspect-ratio: 2 / 1; }
.ph--half { aspect-ratio: 5 / 3; }

/* the book: cover large, the spread beside it at the same height */
.book-figs {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1.25rem, 3vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.5rem);
}
.book-figs .fig { display: contents; }
.book-figs .ph { grid-row: 1; }
.book-figs figcaption { grid-row: 2; }
.ph--cover { aspect-ratio: 4 / 3; }
.ph--spread { aspect-ratio: auto; }

.fig figcaption {
  margin-top: .9rem;
  color: var(--ink-muted);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.5rem);
}
.orrery-section .ph--wide { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.orrery-section .fig .ph--wide { margin-top: 0; }
.orrery-section .fig { margin-top: clamp(1.25rem, 3vw, 1.5rem); }

/* --------------------------------------------------------------- hero loupe
   A magnifier that reads from a 4K copy of the photo. The photo itself
   never moves; the lens follows the pointer. Touch: press and drag, or tap
   to hold it in place. Keyboard: Enter, arrows, Escape. */
.loupe { cursor: none; touch-action: pan-y; --lens: clamp(9rem, 26vw, 15rem); }
.loupe.is-held { touch-action: none; }
.loupe:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.loupe__lens {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: var(--lens); height: var(--lens);
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 6px rgba(17, 26, 45, .35), inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -14px 24px rgba(0, 0, 0, .22);
  background-color: var(--navy-soft);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .28s ease, transform .32s cubic-bezier(.34, 1.4, .64, 1);
}
.loupe.is-active .loupe__lens { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.loupe__lens::before {
  /* glass highlight */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%);
}
.loupe__lens::after {
  /* fine crosshair, so it reads as an instrument */
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--gold-bright), var(--gold-bright)) center / 1px 100% no-repeat,
    linear-gradient(var(--gold-bright), var(--gold-bright)) center / 100% 1px no-repeat;
  opacity: .8;
}
.loupe__hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem;
  background: rgba(17, 26, 45, .78); color: var(--cream);
  font-family: var(--serif-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.loupe__hint-icon { width: .9rem; height: .9rem; border: 1.5px solid var(--gold-bright); border-radius: 50%; position: relative; flex: 0 0 auto; }
.loupe__hint-icon::after { content: ""; position: absolute; width: .5rem; height: 1.5px; background: var(--gold-bright); right: -.4rem; bottom: -.2rem; transform: rotate(45deg); }
.loupe.is-used .loupe__hint, .loupe.is-active .loupe__hint { opacity: 0; transform: translateX(-50%) translateY(6px); }
@media (max-width: 560px) {
  .loupe__hint { white-space: normal; text-align: center; max-width: calc(100% - 2rem); font-size: .62rem; letter-spacing: .12em; padding: .45rem .7rem; }
}
.loupe__hint-text::before { content: "Move over the photo to look closer"; }
@media (hover: none) { .loupe__hint-text::before { content: "Press to look closer"; } .loupe { cursor: auto; } }
@media (prefers-reduced-motion: reduce) { .loupe__lens { transition: opacity .2s ease; } }

/* --------------------------------------------------------------- hero */
/* Two equal-height columns on the cream: the room photo, and a navy panel.
   Brand navy (#111B2E → #1A2745), never violet. Text is cream at full opacity
   or, for the small line, 70%: measured against the panel these are 13.6:1,
   13.6:1 and 7.9:1. */
#top { position: relative; }
.hero {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding-top: clamp(1rem, 3vw, 3.75rem);
}
.hero__photo { position: relative; z-index: 1; aspect-ratio: 1.15 / 1; margin: 0; overflow: hidden; background: var(--cream-deep); }
.hero__photo > picture, .hero__photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__panel {
  position: relative; z-index: 1; overflow: hidden;
  background: linear-gradient(170deg, #111B2E 0%, #1A2745 100%);
  color: #EFE7D6;
  padding: 1.75rem;
}
.hero__orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .08; }
.hero__copy { position: relative; z-index: 1; max-width: 30rem; }
.hero h1 {
  margin: 0; max-width: 24ch; color: #EFE7D6;
  /* sized so the headline breaks into three lines inside the panel at every width from 1024 up */
  font-size: clamp(2.1rem, 3.05vw, 3.25rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance;
}
.hero__sub { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); font-family: var(--serif-display); font-size: 1.125rem; color: #EFE7D6; }
.hero__cta {
  display: inline-block; margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
  padding: 1.5rem 4.25rem; background: #F2EFE4; color: #1E1A40;
  font-family: var(--serif-display); font-size: .875rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; text-align: center;
  transition: background-color 150ms ease;
}
.hero__cta:hover { background: #FFFFFF; }
.hero__cta:focus-visible { outline: 2px solid #EFE7D6; outline-offset: 4px; }
/* one colour, one weight: nothing in this line is a link */
.hero__micro { margin-top: 1.75rem; font-family: var(--serif-text); font-size: 1rem; color: rgba(239, 231, 214, .7); }
.hero__micro a { color: inherit; text-decoration: none; }
.hero__arcs { position: absolute; left: -10vw; right: -10vw; top: 0; bottom: 0; width: 120vw; height: 100%; pointer-events: none; z-index: 0; opacity: .06; }
#top, .page-wrapper { overflow-x: clip; }
@media (max-width: 63.999rem) {
  .hero { padding-inline: 1rem; }
  .hero__panel { order: -1; }
  .hero__cta { display: block; width: 100%; }
}
@media (min-width: 64rem) {
  .hero {
    grid-template-columns: 46fr 54fr; gap: 1.875rem; align-items: stretch;
    padding-inline: 3rem; padding-top: 3.75rem;
  }
  .hero__photo { aspect-ratio: auto; min-height: 100%; }
  .hero__panel { padding: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .hero__cta { transition: none; } }

/* --------------------------------------------------------------- order form */
.order { padding-top: var(--section-gap); }
.order > .rule--gold { margin-bottom: clamp(2rem, 4vw, 3rem); }
.step + .step { margin-top: var(--section-gap); }
.step h2 { margin-top: .25rem; }

.orrery-field { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.orrery-field label {
  display: block;
  font-family: var(--serif-display);
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .35rem;
}
.orrery-field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule-input);
  border-radius: 0;
  padding: .85rem 0 .7rem;
  font-family: var(--serif-text);
  font-size: 1.45rem;
  color: var(--navy);
  transition: border-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.orrery-field input::placeholder { color: var(--placeholder); opacity: 1; }
.orrery-field input:focus { outline: none; border-bottom-color: var(--navy); }
.orrery-field input:focus-visible { outline: none; }
.orrery-field input[type="date"],
.orrery-field input[type="time"] {
  font-size: 1.35rem;
  min-height: 3.6rem;   /* Safari/iOS collapse empty date inputs */
}
.orrery-field input[type="date"]::-webkit-calendar-picker-indicator,
.orrery-field input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .8;
}
.orrery-field.is-invalid input { border-bottom-color: var(--error); }

/* place of birth: suggestions drop from the underline, the match is confirmed beneath */
.field--place { position: relative; }
.place-list {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 6;
  list-style: none; margin: 0; padding: .3rem 0;
  background: var(--cream); border: 1px solid var(--gold);
  box-shadow: 0 14px 32px rgba(17, 26, 45, .16);
  max-height: 18rem; overflow-y: auto;
}
.place-list[hidden] { display: none; }
.field--place .error, .field--place .place-note { position: relative; z-index: 1; }
.field--place:has(.place-list:not([hidden])) .error,
.field--place:has(.place-list:not([hidden])) .place-note { visibility: hidden; }
.place-list li {
  padding: .6rem .85rem; cursor: pointer;
  font-size: 1.05rem; line-height: 1.3; color: var(--navy);
}
.place-list li + li { border-top: 1px solid var(--card-border); }
.place-list li.is-active, .place-list li:hover { background: var(--cream-deep); }
.place-list__sub { display: block; font-size: .85em; color: var(--ink-muted); margin-top: .1rem; }
.place-list__status { padding: .6rem .85rem; color: var(--ink-muted); font-size: .95em; cursor: default; }
.place-list__status:hover { background: none; }
.place-note { margin-top: .55rem; font-size: .92em; color: var(--ink-muted); min-height: 1.4em; }
.place-note:empty { display: none; }
.place-note b { font-weight: 600; color: var(--navy); }
.place-note.is-set::before { content: ""; display: inline-block; width: .45rem; height: .75rem; margin: 0 .55rem .05rem .1rem; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.orrery-field.is-invalid .place-note { display: none; }
.error {
  display: none;
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--error);
}
.orrery-field.is-invalid .error { display: block; }
.help {
  margin-top: .85rem;
  font-size: .97em;
  color: var(--ink);
}
.note {
  margin-top: 1.75rem;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* segmented control */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  border: 1.5px solid var(--navy);
}
.segmented__option { position: relative; display: block; }
.segmented__option input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.segmented__option span {
  display: block;
  text-align: center;
  padding: 1.15rem .75rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color .18s ease, color .18s ease;
}
.segmented__option:first-child span { border-right: 1.5px solid var(--navy); }
.segmented__option input:checked + span { background: var(--navy); color: var(--cream); }
.segmented__option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -4px; }
.note--gift { margin-top: 1.1rem; }

/* format cards */
.formats {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.format {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.9rem);
  padding: clamp(1rem, 3vw, 1.9rem);
  background: var(--cream-deep);
  border: 1.5px solid var(--card-border);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.format:hover { border-color: var(--ink-muted); }
.format > input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.format:has(input:checked) { border: 2px solid var(--navy); }
.format:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }

.format__badge {
  position: absolute;
  top: -1.05rem;
  left: clamp(.85rem, 3vw, 1.75rem);
  display: none;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--serif-display);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: .45rem 1.1rem .4rem;
}
.format:has(input:checked) .format__badge { display: block; }

.format__thumb {
  width: clamp(5.25rem, 14vw, 7.25rem);
  aspect-ratio: 5 / 6.2;
  background: var(--navy-soft);
  color: var(--gold-bright);
  display: grid; place-items: center;
}

.format__title {
  display: block;
  font-family: var(--serif-display);
  font-size: clamp(1.4rem, 1rem + 1.3vw, 1.9rem);
  color: var(--navy);
  line-height: 1.2;
}
.format__price {
  font-weight: 700;
  margin-left: .35em;
}
.format__desc {
  display: block;
  margin-top: .5rem;
  color: var(--ink);
}

/* --------------------------------------------------------------- chapters */
.chapters {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.chapters li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .4rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.chapters__num {
  font-family: var(--serif-display);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1.4;
}
.chapters h3 { font-size: 1.05em; }
.chapters p { margin-top: .15rem; font-size: .95em; }
@media (min-width: 56rem) {
  .chapters { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* --------------------------------------------------------------- sample reading */
.reading p:first-child {
  font-family: var(--serif-display);
  color: var(--navy);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  line-height: 1.55;
}
.section--reading { padding-top: calc(var(--section-gap) * 1.35); padding-bottom: clamp(1rem, 3vw, 2rem); }
.section--reading .reading {
  max-width: 46rem;                 /* a wider measure than body copy */
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.reading footer { margin-top: 1.75rem; }
.reading footer .small { margin-top: .6rem; max-width: 62ch; }

/* --------------------------------------------------------------- assurances */
.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  text-align: center;
}
.assurances__icon { width: 3rem; height: 3rem; margin: 0 auto .9rem; color: var(--gold); }
.assurances dt {
  font-family: var(--serif-display);
  color: var(--navy);
  font-size: 1.1rem;
  line-height: 1.35;
}
.assurances dd { margin-top: .5rem; font-size: .95em; }
@media (max-width: 860px) { .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .assurances { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--rule); margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item h3 { font-size: 1em; }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  width: 100%;
  background: none; border: 0; padding: 1.5rem 0;
  text-align: left;
  font-family: var(--serif-text);
  font-weight: 600;
  font-size: 1.2em;
  color: var(--navy);
  cursor: pointer;
}
.faq__icon {
  position: relative; flex: 0 0 auto;
  width: 1rem; height: 1rem;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--gold);
  top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -.75px;
  transition: transform .22s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0); }
.faq__a { padding: 0 0 1.5rem; max-width: 66ch; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------- final cta */
.cta { padding-top: var(--section-gap); text-align: center; }
.cta > .rule--gold { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.cta__title { font-size: clamp(1.9rem, 1rem + 2.6vw, 2.8rem); }
.cta__price {
  font-family: var(--serif-display);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(2rem, 1rem + 2.8vw, 3rem);
  line-height: 1.2;
  margin-top: .25rem;
}
.cta__blurb { margin-top: 1rem; font-size: 1.1em; }
.cta .btn { margin-top: 1.75rem; }
.cta__note { margin-top: 1.5rem; color: var(--ink-muted); }

.cta.is-done > :not(.rule):not(.confirm) { display: none; }
.confirm { text-align: left; max-width: 62ch; margin-inline: auto; }
.confirm[hidden] { display: none; }
.confirm__title { margin-bottom: 1rem; }
.confirm .btn { margin-top: 1.75rem; }

.btn--small { padding: .8rem 1.25rem; font-size: .8rem; letter-spacing: .18em; }

/* sticky order bar, shown once the hero button has scrolled away */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--cream);
  border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(17, 26, 45, .10);
  transform: translateY(100%);
  transition: transform .25s ease;
  visibility: hidden;
}
.orderbar.is-visible { transform: none; visibility: visible; }
.orderbar__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px;
  padding-top: .7rem; padding-bottom: .7rem;
}
.orderbar__text { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; color: var(--navy); }
.orderbar__text b { font-family: var(--serif-display); font-weight: 400; font-size: 1.05rem; }
.orderbar__price { font-family: var(--serif-display); font-weight: 700; }
.orderbar__note { color: var(--ink-muted); font-size: .85em; }
.orderbar__save { color: var(--ink-muted); font-size: .9em; }
.orderbar__save[hidden] { display: none; }
.orderbar .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .orderbar__note { display: none; }
  .orderbar__row { min-height: 48px; gap: .6rem; }
  .orderbar__text { gap: .1rem .5rem; }
}
body.has-orderbar, body.has-orderbar .page-wrapper { padding-bottom: 4.5rem; }
body.has-consent, body.has-consent .page-wrapper { padding-bottom: 9rem; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .ph--wide { aspect-ratio: 4 / 3; }
  .grid-2 { grid-template-columns: 1fr; }
  .book-figs { grid-template-columns: 1fr; grid-template-rows: auto; }
  .book-figs .ph, .book-figs figcaption { grid-row: auto; }
  .book-figs .fig + .fig .ph { margin-top: clamp(1.25rem, 3vw, 1.5rem); }
  .ph--spread { aspect-ratio: 3 / 2; }
  .format { grid-template-columns: auto 1fr; }
  .chapters li { grid-template-columns: 2.75rem 1fr; }
  .btn { letter-spacing: .16em; font-size: .95rem; }
  .orrery-field input { font-size: 1.3rem; }
}
@media (max-width: 400px) {
  .segmented__option span { padding: 1rem .5rem; font-size: .95rem; }
}

/* --------------------------------------------------------------- price and shipping */
.format__was {
  margin-right: .3em;
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.format__ship { display: block; margin-top: .45rem; font-size: .92em; color: var(--ink-muted); }
.formats-group { margin: 0; }
.formats-group > legend { padding: 0; }

/* step two sits under the birth details, small, with the chart still alongside */
.step--inline { margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(2.5rem, 4.5vw, 3.5rem); border-top: 1px solid var(--gold); }
.step--inline h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem); }
.step--inline .formats { gap: .8rem; margin-top: 1.6rem; }
.step--inline .format { padding: .7rem .9rem; gap: .9rem; }
.step--inline .format__thumb { width: 3.4rem; }
.step--inline .format__title { font-size: 1.2rem; }
.step--inline .format__desc { font-size: .92em; margin-top: .2rem; }
.step--inline .format__ship { display: none; }
.step--inline .format__badge { top: -.8rem; left: .8rem; font-size: .6rem; letter-spacing: .2em; padding: .3rem .7rem .26rem; }
.step--inline .prices-note { margin-top: 1.1rem; font-size: .9em; }
.prices-note { margin-top: 1.5rem; color: var(--ink-muted); font-size: .95em; }


/* --------------------------------------------------------------- live chart preview */
.details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}
.preview { position: sticky; top: 6.5rem; }
.preview__panel { position: relative; }
.preview__wheel { width: 100%; height: auto; display: block; }
/* the name plate under the screen chart */
.preview__plate {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--navy);
  font-family: var(--serif-display);
}
.preview__name { font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }
.preview__meta { margin-top: .45rem; font-size: .85rem; letter-spacing: .06em; color: var(--ink-muted); }
.preview__phase { margin-top: .35rem; font-size: .8rem; letter-spacing: .08em; color: var(--ink-muted); }
.preview__phase:empty { display: none; }
/* the shortcut to the reading: a quiet text link under the plate, underlined in
   gold; it must not compete with the buy button, the page's one primary action */
.preview__jump {
  display: inline-block; margin: 1.4rem 0 .4rem; line-height: 1.6;
  font-family: var(--serif-display); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold);
}
.preview__jump:hover { color: var(--gold); }
.preview__jump[hidden] { display: none; }
.preview__jump-arrow { display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.preview__jump:hover .preview__jump-arrow { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .preview__jump-arrow { transition: none; } }
/* the reading's heading takes focus when the shortcut lands; the ring shows for keyboard users only */
#reading-page-title:focus:not(:focus-visible) { outline: none; }
.preview__caption { margin-top: 1rem; color: var(--ink-muted); font-size: .92em; text-align: center; }

/* The screen chart. Its elements carry the print's navy-and-gold as attributes;
   these rules restyle them for the cream ground so everything reads: navy for
   the wheel, glyphs and names (15:1), warm grey for cusps and numbers (5.2:1),
   nothing faint. Sizes are user units of the 400-unit wheel; the mobile block
   below raises them so no label falls under 11px on a 390px screen. */
.preview__wheel .pw { cursor: pointer; outline: none; }
.preview__wheel .pw-ring { stroke: var(--wheel-ink); opacity: 1; }
.preview__wheel .pw-house line { stroke: var(--wheel-grey); stroke-width: .8; opacity: 1; }
.preview__wheel .pw-house-num { fill: var(--wheel-grey); opacity: 1; font-size: 11px; }
.preview__wheel .pw-sign line { stroke: var(--wheel-ink); opacity: 1; }
.preview__wheel .pw-sign .pw-glyph { fill: var(--wheel-ink); opacity: 1; font-size: 17px; }
.preview__wheel .pw-signname { fill: var(--wheel-ink); opacity: 1; font-size: 10px; letter-spacing: .08em; }
/* the names need a wheel of 480px or more to reach 12px; narrower screens get the glyphs alone */
@media (max-width: 1080px) { .preview__wheel .pw-signname { display: none; } }
.preview__wheel .pw-axis line { stroke: var(--wheel-ink); opacity: 1; }
.preview__wheel .pw-axis .pw-glyph { fill: var(--wheel-ink); opacity: 1; font-size: 9.5px; letter-spacing: .1em; }
.preview__wheel .pw-planet .pw-glyph { fill: var(--wheel-ink); font-size: 19px; paint-order: stroke; stroke: var(--cream); stroke-width: 3px; }
.preview__wheel .pw-node .pw-glyph { font-size: 17px; opacity: 1; }
.preview__wheel .pw-retro { fill: var(--wheel-ink); font-size: 8.5px; font-weight: 700; }
.preview__wheel .pw-tick { stroke: var(--wheel-grey); opacity: 1; stroke-width: .8; }
.preview__wheel .pw-hit { fill: rgba(17, 27, 46, 0); stroke: none; pointer-events: all; transition: fill .22s ease; }
.preview__wheel .pw-planet .pw-hit { r: 17px; }   /* 46px at desktop scale */
/* aspects: two hues, and each with its own weight and dash so the figure reads in monochrome */
.pw-aspect { fill: none; opacity: 1; transition: opacity .22s ease, stroke-width .22s ease; }
.pw-aspect.is-hard { stroke: var(--wheel-hard); stroke-width: 1.2; }
.pw-aspect.is-soft { stroke: var(--wheel-grey); stroke-width: .8; stroke-dasharray: 3 2; }
.pw-aspect.is-conj { stroke: var(--wheel-grey); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: none; }
/* hover and pin: gold used only as a highlight where it sits on navy */
.preview__wheel .pw text { transition: fill .2s ease, opacity .2s ease; }
.preview__wheel .pw-sign:hover .pw-hit,
.preview__wheel .pw-sign.is-lit .pw-hit,
.preview__wheel .pw-sign.is-linked .pw-hit { fill: rgba(17, 27, 46, .1); }
.preview__wheel .pw-house:hover .pw-hit,
.preview__wheel .pw-house.is-lit .pw-hit { fill: rgba(17, 27, 46, .08); }
.preview__wheel .pw-halo { fill: none; stroke: none; opacity: 0; transition: opacity .22s ease; }
.preview__wheel .pw-planet:hover .pw-halo,
.preview__wheel .pw-planet.is-lit .pw-halo,
.preview__wheel .pw-planet:focus-visible .pw-halo { fill: var(--navy); stroke: var(--gold-bright); stroke-width: 1; opacity: 1; }
.preview__wheel .pw-planet:hover .pw-glyph,
.preview__wheel .pw-planet.is-lit .pw-glyph,
.preview__wheel .pw-planet:focus-visible .pw-glyph { fill: var(--gold-bright); stroke: none; }
.preview__wheel .pw-axis:hover line, .preview__wheel .pw-axis.is-lit line, .preview__wheel .pw-axis:focus-visible line { stroke-width: 1.8; }
.preview__wheel .pw:focus-visible .pw-glyph { text-decoration: underline; }
.preview__wheel.has-focus .pw-planet:not(.is-lit) .pw-glyph { opacity: .65; }
.preview__wheel.has-focus .pw-planet:not(.is-lit) .pw-tick { opacity: .65; }
.preview__wheel.has-focus .pw-aspect { opacity: .25; }
.preview__wheel.has-focus .pw-aspect.is-lit { opacity: 1; }
.preview__wheel.has-focus .pw-aspect.is-lit.is-hard { stroke-width: 2; }
.preview__wheel.has-focus .pw-aspect.is-lit.is-soft { stroke-width: 1.4; }
.preview__legend {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem;
  font-family: var(--serif-display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}
.preview__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.preview__legend svg { width: 1.75rem; height: .5rem; overflow: visible; }
/* narrow screens: the wheel is ~350px wide (scale .875), so every label is raised to 11px or more, planet glyphs to 18px, hit areas to 44px */
@media (max-width: 560px) {
  .preview__wheel .pw-house-num { font-size: 13px; }
  .preview__wheel .pw-sign .pw-glyph { font-size: 19px; }
  .preview__wheel .pw-signname { display: none; }
  .preview__wheel .pw-axis .pw-glyph { font-size: 12.6px; }
  .preview__wheel .pw-planet .pw-glyph { font-size: 21px; }
  .preview__wheel .pw-node .pw-glyph { font-size: 21px; }
  .preview__wheel .pw-retro { font-size: 12.6px; }
  .preview__wheel .pw-planet .pw-hit { r: 26px; }
}
@media (prefers-contrast: more) {
  .preview__wheel { --wheel-grey: var(--navy); }
  .preview__wheel .pw-ring { stroke-width: 1.6; }
  .preview__wheel .pw-house line { stroke-width: 1.2; }
  .preview__wheel .pw-sign line { stroke-width: 1.1; }
  .preview__wheel .pw-tick { stroke-width: 1.2; }
  .preview__wheel .pw-axis line { stroke-width: 1.7; }
  .preview__wheel .pw-aspect.is-hard { stroke-width: 1.8; }
  .preview__wheel .pw-aspect.is-soft { stroke: var(--navy); stroke-width: 1.2; }
  .preview__wheel .pw-aspect.is-conj { stroke: var(--navy); stroke-width: 3.6; }
  .preview__legend .pw-aspect { stroke: var(--navy); }
}

/* the printed version: the same wheel in the print's own gold on navy, framed
   like the poster in the hero photo, small; it is the object being sold */
.print-thumb {
  display: flex; align-items: center; gap: 1.1rem; width: 100%;
  margin-top: 1.25rem; padding: .4rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.print-thumb__frame {
  flex: 0 0 7.25rem; display: block;
  padding: .45rem; background: #f9f6ee; border: .28rem solid #15171c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 12px 24px -10px rgba(17, 26, 45, .45), 0 2px 6px rgba(17, 26, 45, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.print-thumb:hover .print-thumb__frame { transform: translateY(-2px); }
.print-thumb:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.print-thumb__panel { display: block; background: var(--navy); padding: .4rem .4rem .35rem; }
.print-thumb__wheel { width: 100%; height: auto; display: block; }
.print-thumb__wheel .pw-signname { display: none; }
.print-thumb__wheel .pw-aspect { stroke: #c9a544; opacity: .5; }
.print-thumb__plate { display: block; margin-top: .25rem; padding-top: .2rem; border-top: 1px solid rgba(201, 165, 68, .5); text-align: center; color: var(--gold-bright); font-family: var(--serif-display); }
.print-thumb__plate b { display: block; font-weight: 400; font-size: .34rem; letter-spacing: .1em; text-transform: uppercase; }
.print-thumb__plate span { display: block; font-size: .26rem; color: rgba(244, 239, 228, .75); }
.print-thumb__caption { display: block; font-family: var(--serif-display); font-size: 1.05rem; color: var(--navy); }
.print-thumb__hint { display: block; margin-top: .3rem; font-size: .92em; color: var(--ink-muted); }
.print-thumb:hover .print-thumb__hint { color: var(--navy); }

.preview__wheel.is-drawn .pw-ring { animation: pw-draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes pw-draw { to { stroke-dashoffset: 0; } }
.preview__wheel .pw { opacity: 0; transform-box: fill-box; transform-origin: center; }
.preview__wheel.is-drawn .pw { animation: pw-in .55s ease forwards; animation-delay: calc(260ms + var(--i, 0) * 26ms); }
@keyframes pw-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .preview__wheel .pw { opacity: 1; }
  .preview__wheel .pw-ring { stroke-dashoffset: 0; }
}

/* tooltip */
.preview__tip {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: max-content; max-width: min(17rem, 80%);
  padding: .6rem .85rem .7rem;
  background: var(--cream); color: var(--navy);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  font-family: var(--serif-text); font-size: .85rem; line-height: 1.45;
  pointer-events: none;
  --ax: 50%;
}
.preview__tip[hidden] { display: none; }
.preview__tip-label { display: block; font-family: var(--serif-display); font-weight: 400; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.preview__tip-glyph { font-family: "DejaVu Sans", "Segoe UI Symbol", serif; font-size: 1rem; letter-spacing: 0; margin-right: .4em; vertical-align: -.08em; }
.preview__tip-glyph:empty { display: none; }
.preview__tip-detail { display: block; font-weight: 600; margin-top: .15rem; }
.preview__tip-more { display: block; margin-top: .3rem; color: var(--ink); }
.preview__tip-more:empty { display: none; }
.preview__tip::after {
  content: ""; position: absolute; left: var(--ax); bottom: -6px;
  width: 10px; height: 10px; background: var(--cream);
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.preview__tip.is-below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(-135deg); }

/* below the chart the page is one column again: placements, then the reading,
   on the reading's measure and centred; the rhythm above them is unchanged */
/* the placements and the analysis run on a wider measure, for their two-column pieces; the prose keeps the reading measure */
.details-after { max-width: 62rem; margin-inline: auto; }
.details-after[hidden] { display: none; }
.details-after > .near-cusp, .details-after > .reading-page, .details-after > .reading-offer { max-width: 46rem; margin-inline: auto; }

/* placements list, linked to the wheel. Each row is a button: hovering lights
   the planet on the wheel, pressing opens the row's reading beneath it */
/* the chapter break above the rows: roughly twice the gap between rows, so the eye reads a new part of the page */
.chapter { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.chapter__rule { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); border: 0; height: 1px; background: var(--gold); }
.placements { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
/* two columns on wide screens, one on narrow. Each row is glyph, then name in
   sign with the position right-aligned beneath it, then "more" spanning both lines */
.placements { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; }
@media (min-width: 861px) { .placements { grid-template-columns: 1fr 1fr; } .placements__name { white-space: nowrap; } }
.placements__item { border-bottom: 1px solid var(--rule); }
.placements__glyph { grid-row: 1 / span 2; padding-top: .15rem; }
.placements__pos { grid-column: 2; }
.placements__more { grid-row: 1 / span 2; grid-column: 3; align-self: center; margin-left: .4rem; }
.placements__row {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: start; gap: .15rem .6rem;
  width: 100%; padding: .55rem .4rem;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; outline: none;
  transition: background-color .18s ease, padding-left .18s ease;
}
.placements__row:hover, .placements__row.is-lit, .placements__row:focus-visible { background: var(--cream-deep); padding-left: .8rem; }
.placements__row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.placements__row.is-pinned { box-shadow: inset 3px 0 0 var(--gold); }
.placements__glyph { font-family: "DejaVu Sans", "Segoe UI Symbol", serif; color: var(--navy); font-size: 1.15rem; line-height: 1; }
.placements__name { font-weight: 600; color: var(--navy); }
.placements__pos { font-size: .9em; color: var(--ink-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.placements__sign { font-weight: 400; color: var(--ink); }
.placements__retro { color: var(--navy); font-weight: 700; font-family: "DejaVu Sans", "Segoe UI Symbol", serif; }
.placements__empty { padding: .8rem .4rem; color: var(--ink-muted); font-size: .95em; border-bottom: 1px solid var(--rule); }
/* the affordance: "more" with a chevron that turns when the row is open */
/* "more": its own column, set apart from the degrees, at least 44px tall to tap */
.placements__more { display: inline-flex; align-items: center; min-height: 2.75rem; padding-left: 1rem; font-family: var(--serif-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.placements__more::after {
  content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .5em; vertical-align: .18em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.placements__row:hover .placements__more, .placements__row[aria-expanded="true"] .placements__more { color: var(--navy); }
.placements__item.is-open .placements__more::after { transform: translateY(.2em) rotate(-135deg); }
/* the reading opens in place: a grid row growing from nothing, the text clipped while it does */
.placements__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.placements__panel[hidden] { display: none; }
.placements__item.is-open .placements__panel { grid-template-rows: 1fr; }
.placements__panel-inner { overflow: hidden; min-height: 0; }
.placements__panel p { padding: .15rem .6rem 1rem 2.6rem; font-size: .95em; line-height: 1.6; color: var(--ink); }
.placements__panel p + p { padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .placements__panel, .placements__more::after, .placements__row { transition: none; }
}
/* copy that has not been written yet is marked, wherever it appears */
.reading__ph { background: rgba(201, 165, 68, .16); color: var(--ink-muted); font-style: italic; padding: 0 .15em; }

/* tier two: the Sun, Moon and rising sign read together, beneath the rows */
.reading-page { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }   /* the gold rule above it is the shared .an-rule */
.reading--page { margin-top: 1.25rem; }
.reading--page p + p { margin-top: 1.1rem; }
.reading--page p:first-child { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.6; }
/* the division with the book, stated once */
.reading-page__scope { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: .95em; max-width: 62ch; }


/* the buy path, directly under the chart. Before the chart is the visitor's
   own the button leads to the name field; after, it opens the format step. */
.print-cta { margin-top: clamp(1.5rem, 3vw, 2rem); }
.print-cta[hidden] { display: none; }
.print-cta__from { margin-top: .75rem; text-align: center; color: var(--ink-muted); font-size: .95em; }
.print-cta__from[hidden] { display: none; }
.preview .step--inline { margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: clamp(1.5rem, 3vw, 2rem); }
.preview .step--inline[hidden] { display: none; }
.preview .step--inline .formats { margin-top: 1.3rem; }
.format-submit { margin-top: 1.5rem; }
.format-note { margin-top: 1rem; text-align: center; color: var(--ink-muted); font-size: .92em; }
.format-error, .cta__error { display: block; text-align: center; }
.format-error[hidden], .cta__error[hidden] { display: none; }

/* tier three, the full reading by email: a clear exchange beneath the reading,
   quieter than the buy button; the address unlocks this and nothing above it */
.reading-offer { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--gold); }
.reading-offer[hidden] { display: none; }
.reading-offer__title { font-family: var(--serif-display); font-size: 1.15rem; color: var(--navy); }
.reading-offer__text { margin-top: .45rem; font-size: .95em; color: var(--ink); max-width: 46ch; }
.reading-offer__row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.reading-offer__field { flex: 1 1 14rem; margin-top: .5rem; }
.reading-offer__field input { font-size: 1.15rem; padding: .6rem 0 .5rem; }
.reading-offer__send { flex: 0 0 auto; margin-bottom: .35rem; padding: .7rem 1.1rem; font-size: .74rem; letter-spacing: .16em; }
.reading-offer__send:disabled { opacity: .6; cursor: default; }
.reading-offer__send:disabled:hover { background: transparent; color: var(--navy); }
.reading-offer__sent { margin-top: .7rem; font-size: .9em; color: var(--navy); font-weight: 600; }
.reading-offer__sent[hidden] { display: none; }
.reading-offer__sent::before { content: ""; display: inline-block; width: .45rem; height: .75rem; margin: 0 .55rem .05rem .1rem; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* add-on checkbox card */
.addon { margin-top: clamp(1.5rem, 4vw, 2rem); }
.addon legend { font-family: var(--serif-display); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .75rem; }
.addon__option {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: clamp(1rem, 3vw, 1.4rem); background: var(--cream-deep); border: 1.5px solid var(--card-border);
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.addon__option:hover { border-color: var(--ink-muted); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17, 26, 45, .10); }
.addon__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.addon__check {
  width: 1.35rem; height: 1.35rem; margin-top: .25rem; border: 1.5px solid var(--navy); background: var(--cream);
  display: grid; place-items: center; transition: background-color .18s ease;
}
.addon__check::after { content: ""; width: .45rem; height: .8rem; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.addon__option:has(input:checked) { border: 2px solid var(--navy); }
.addon__option:has(input:checked) .addon__check { background: var(--navy); }
.addon__option:has(input:checked) .addon__check::after { opacity: 1; }
.addon__option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.addon__title { display: block; font-family: var(--serif-display); font-size: 1.25rem; color: var(--navy); }
.addon__price { font-weight: 700; margin-left: .35em; }
.addon__desc { display: block; margin-top: .4rem; color: var(--ink); font-size: .97em; }
@media (max-width: 860px) {
  .details-grid { grid-template-columns: 1fr; gap: 0; }
  /* one column: fields, then the chart with the buy path and the format step beneath it */
  .preview { position: static; margin-top: clamp(2rem, 5vw, 3rem); }
}

/* --------------------------------------------------------------- hover polish */
.format { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.format:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17, 26, 45, .10); }
.format__thumb { overflow: hidden; }
.format__thumb img { transition: transform .6s ease; }
.format:hover .format__thumb img { transform: scale(1.05); }
.ph > picture > img { transition: transform .9s ease; }
.fig:hover .ph > picture > img,
.orrery-section > .ph--wide:hover > picture > img { transform: scale(1.025); }
.chapters li { transition: background-color .2s ease, padding-left .2s ease; }
.chapters li:hover { background: var(--cream-deep); padding-left: .6rem; }
.chapters__num { transition: color .2s ease; }
.chapters li:hover .chapters__num { color: var(--navy); }
.faq__a { animation: faq-in .25s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
.assurances__icon { transition: transform .25s ease, color .25s ease; }
.assurances > div:hover .assurances__icon { transform: translateY(-3px) scale(1.06); color: var(--navy); }
.btn { transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .2s ease; }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(17, 26, 45, .22); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }

/* --------------------------------------------------------------- consent */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--cream);
  border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(17, 26, 45, .12);
}
.consent[hidden] { display: none; }
.consent__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-top: .9rem; padding-bottom: .9rem;
}
.consent__text { font-size: .95em; max-width: 60ch; }
.consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.consent .btn { padding: .75rem 1.1rem; font-size: .78rem; letter-spacing: .16em; }

/* Fallback for browsers without :has() (older Firefox) — JS toggles .is-selected */
.format.is-selected { border: 2px solid var(--navy); }
.format.is-selected .format__badge { display: block; }

@media print {
  .btn, .skip-link, .orderbar, .consent { display: none !important; }
  .ph { background: none; border: 1px solid #999; }
}

</style>

/* ==========================================================================
   Theme header and footer, styled to the design
   (announcement bar, ORRERY wordmark left, one button right, gold rules)
   ========================================================================== */
body:has(.orrery) .announcement-bar {
  background: var(--navy); color: var(--cream);
  font-size: .85rem; letter-spacing: .04em;
}
body:has(.orrery) .announcement-bar .announcement-bar__dot { color: var(--gold-bright); }
body:has(.orrery) #header-component {
  background: var(--cream);
  border-bottom: 1px solid var(--gold);
}
body:has(.orrery) #header-component[data-sticky-state='active'] { box-shadow: 0 8px 24px rgba(17, 26, 45, .08); }
body:has(.orrery) .header-logo,
body:has(.orrery) .header-logo .header-logo__image {
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  font-size: 1.25rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--navy);
}
body:has(.orrery) .header-cta { flex: 0 0 auto; }
@media (max-width: 560px) {
  body:has(.orrery) .header-logo, body:has(.orrery) .header-logo .header-logo__image { font-size: 1.05rem; letter-spacing: .26em; }
  body:has(.orrery) .header-cta { padding: .55rem .9rem; }
  body:has(.orrery) .announcement-bar { font-size: .8rem; }
  body:has(.orrery) .announcement-bar .announcement-bar__extra { display: none; }
}
/* the slim header gives way to the buy bar on narrow screens, as designed */
@media (max-width: 700px) {
  body.has-orderbar #header-component[data-sticky-state='active'] { visibility: hidden; }
}
/* the theme's header and footer share the design's 76rem container */
body:has(.orrery) { --page-content-width: calc(76rem - var(--page-margin) * 2); }
body:has(.orrery) footer .footer-content { border-top: 1px solid var(--gold); padding-top: clamp(2rem, 4vw, 2.75rem); }
body:has(.orrery) footer .text-block h2 { margin: 0; white-space: nowrap; font-family: var(--serif-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .32em; text-transform: uppercase; color: var(--navy); }
body:has(.orrery) footer .text-block h3,
body:has(.orrery) footer .email-signup__heading { margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--navy); }
body:has(.orrery) footer .text-block p { margin: 0 0 .5rem; font-family: var(--serif-text); font-size: .95rem; line-height: 1.6; color: var(--ink-muted); max-width: 30ch; }
body:has(.orrery) footer .text-block a { color: var(--ink); text-decoration: none; }
body:has(.orrery) footer .text-block a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }
body:has(.orrery) footer .email-signup__input { font-family: var(--serif-text); }
body:has(.orrery) footer .footer-utilities { font-family: var(--serif-text); color: var(--ink-muted); }
body:has(.orrery) .announcement-bar { font-family: var(--serif-text); }


/* --------------------------------------------------------------- the empty wheel and the staged chart */
/* without a chart the identity block, the thumbnail, the caption and the aspect legend do not exist */
.preview__plate[hidden], .print-thumb[hidden], .preview__caption[hidden], .preview__legend[hidden] { display: none; }
/* a waiting section keeps a little height so the page settles rather than jumps when its body arrives */
.an[data-state="pending"] { min-height: 11rem; }
.reading-page[data-state="pending"] { min-height: 8rem; }
.preview__wheel .pw-invite { fill: var(--wheel-grey); font-size: 7.6px; letter-spacing: .06em; }
.print-thumb__wheel .pw-invite { display: none; }
.preview__wheel .pw-scaffold { stroke: var(--wheel-grey); opacity: .35; }
/* a placement that cannot be placed yet: the same row shape, no button, one quiet line */
.placements__item--held { display: grid; grid-template-columns: 2rem 1fr; gap: .15rem .6rem; padding: .55rem .4rem; color: var(--ink-muted); }
.placements__item--held .placements__name { color: var(--ink-muted); font-weight: 600; }
.placements__item--held .placements__held { grid-column: 2; font-size: .9em; font-style: italic; }
.placements__item--held .placements__glyph { grid-row: 1 / span 2; padding-top: .15rem; opacity: .6; }
.near-cusp { margin-top: 1rem; font-size: .92em; color: var(--ink-muted); max-width: 62ch; }
.near-cusp[hidden] { display: none; }

/* --------------------------------------------------------------- the analysis sections */
.an-rule { display: flex; align-items: center; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); color: var(--gold); }
.an-rule::before, .an-rule::after { content: ""; flex: 1; height: 1px; background: var(--gold); opacity: .8; }
.an-rule span { font-size: .8rem; line-height: 1; opacity: .9; font-family: "DejaVu Sans", "Segoe UI Symbol", serif; }
.an { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.an__eyebrow { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-muted); }
.an__num { font-size: 1.15rem; letter-spacing: 0; color: var(--gold); margin-right: .35rem; vertical-align: -.05em; }
.an__title { margin-top: .5rem; font-family: var(--serif-display); font-weight: 400; color: var(--navy); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -.005em; }
/* "What's this?": a native disclosure, styled as the page's quiet link */
.an__what { margin-top: .9rem; }
.an__what summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font-size: .92em; color: var(--navy); border-bottom: 1px solid var(--gold); line-height: 1.5; }
.an__what summary::-webkit-details-marker { display: none; }
.an__what summary:hover { color: var(--gold); }
.an__what summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.an__what-mark { display: inline-block; width: 0; height: 0; border-left: .35rem solid var(--gold); border-top: .25rem solid transparent; border-bottom: .25rem solid transparent; transition: transform .2s ease; }
.an__what[open] .an__what-mark { transform: rotate(90deg); }
.an__what > p { margin-top: .7rem; max-width: 62ch; color: var(--ink); font-size: .97em; animation: an-reveal .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes an-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* a section waits for its inputs with one line; when they arrive the body fades in where the line was */
.an__missing, #reading-missing { margin-top: 1.4rem; font-style: italic; color: var(--ink-muted); }
.an__missing[hidden], #reading-missing[hidden] { display: none; }
.an__body { margin-top: 1.6rem; opacity: 0; transition: opacity .6s ease; }
.an[data-state="ready"] .an__body { opacity: 1; }
.reading--page { opacity: 0; transition: opacity .6s ease; }
.reading-page[data-state="ready"] .reading--page { opacity: 1; }
.an__body:empty { margin-top: 0; }
.an__note { margin-top: 1.25rem; font-size: .92em; color: var(--ink-muted); max-width: 66ch; }
.an__note[hidden], .an__note:empty { display: none; }
.an__sub { font-family: var(--serif-display); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.an-glyph { font-family: "DejaVu Sans", "Segoe UI Symbol", serif; }
@media (prefers-reduced-motion: reduce) { .an__body, .reading--page, .an__what-mark { transition: none; } .an__what > p { animation: none; } }

/* I — the moon that night */
.moon-panel { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem 1.4rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--cream-deep); border: 1px solid var(--rule); align-items: center; }
.moon-panel__fig { grid-row: 1 / span 2; }
.moon-disc { width: 6rem; height: 6rem; display: block; }
.moon-panel__name { font-family: var(--serif-display); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); color: var(--navy); line-height: 1.2; }
.moon-panel__data { margin-top: .4rem; font-size: .9em; color: var(--ink-muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.moon-panel__prose { grid-column: 1 / -1; }
.moon-panel__prose p { font-size: .98em; line-height: 1.6; }
@media (min-width: 50rem) {
  .moon-panel { grid-template-columns: 6rem 14rem 1fr; }
  .moon-panel__fig { grid-row: auto; }
  .moon-panel__prose { grid-column: auto; }
}

/* II — angles and points */
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 50rem) { .points { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.points__item { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .1rem .6rem; padding: .9rem .2rem; border-bottom: 1px solid var(--rule); align-items: start; }
.points__item > .an-glyph { color: var(--gold); font-size: 1.05rem; font-family: var(--serif-display); padding-top: .1rem; }
.points__name { display: block; font-weight: 600; color: var(--navy); }
.points__def { display: block; margin-top: .2rem; font-size: .9em; color: var(--ink-muted); max-width: 30ch; }
.points__pos { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.points__item.is-held .points__pos { white-space: normal; font-style: italic; font-size: .9em; color: var(--ink-muted); }
@media (max-width: 30rem) { .points__item { grid-template-columns: 2.4rem 1fr; } .points__pos { grid-column: 2; margin-top: .3rem; } }

/* III — aspects */
.asp-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9em; color: var(--ink-muted); margin-bottom: .6rem; }
.asp-legend__item .an-glyph { margin-right: .3rem; }
.asp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.asp { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: .6rem; align-items: baseline; padding: .7rem .2rem; border-bottom: 1px solid var(--rule); }
.asp > .an-glyph:first-child { font-size: 1.05rem; }
.asp--hard > .an-glyph:first-child, .asp-legend__item.asp--hard .an-glyph { color: var(--wheel-hard); }
.asp--soft > .an-glyph:first-child, .asp-legend__item.asp--soft .an-glyph { color: var(--wheel-grey); }
.asp--quincunx > .an-glyph:first-child, .asp-legend__item.asp--quincunx .an-glyph { color: var(--gold); }
.asp__pair { color: var(--navy); }
.asp__pair .an-glyph { color: var(--ink-muted); font-size: .95em; }
.asp__pair em { color: var(--ink); }
.asp__orb { font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }

/* IV — houses */
.hs-list { list-style: none; margin: .7rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.hs { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .1rem .6rem; padding: .85rem .2rem; border-bottom: 1px solid var(--rule); align-items: start; }
.hs[hidden] { display: none; }
.hs__num { color: var(--gold); font-family: var(--serif-display); font-size: 1.05rem; padding-top: .05rem; }
.hs__label { display: block; font-weight: 600; color: var(--navy); }
.hs__sub { display: block; margin-top: .2rem; font-size: .9em; color: var(--ink-muted); }
.hs__cusp { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.hs__planets { display: inline-block; margin-left: .6rem; color: var(--navy); letter-spacing: .12em; }
.hs-toggle { margin-top: 1.25rem; }
@media (max-width: 30rem) { .hs { grid-template-columns: 2.4rem 1fr; } .hs__cusp { grid-column: 2; margin-top: .3rem; text-align: left; } }

/* V — patterns */
.pat { padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.75rem); border: 1px solid var(--rule); background: transparent; }
.pat + .pat { margin-top: 1rem; }
.pat--lead { background: var(--cream-deep); border-color: var(--gold); }
.pat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; color: var(--navy); }
.pat__head b { font-weight: 600; }
.pat__glyphs { color: var(--gold); letter-spacing: .25em; font-family: "DejaVu Sans", "Segoe UI Symbol", serif; }
.pat__detail { font-size: .9em; color: var(--ink-muted); }
.pat__body { margin-top: .7rem; max-width: 60ch; font-size: .97em; }
.pat__grid { display: grid; grid-template-columns: 1fr; gap: .9rem 2rem; margin: .8rem 0 0; }
@media (min-width: 50rem) { .pat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pat__grid dt { font-weight: 600; color: var(--navy); font-size: .95em; }
.pat__absent { min-width: 0; }
.pat__grid dd { margin: .2rem 0 0; font-size: .9em; color: var(--ink-muted); }

/* VI — the signature */
.sig-count { padding: .9rem 1.1rem; border-left: 2px solid var(--gold); background: var(--cream-deep); font-size: .92em; color: var(--ink); max-width: 62ch; }
.sig-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; margin-top: 1.5rem; }
@media (min-width: 50rem) { .sig-cols { grid-template-columns: 1fr 1fr; } }
.sig-bar { display: grid; grid-template-columns: 5.5rem 1fr 2rem; align-items: center; gap: .8rem; margin-top: .7rem; }
.sig-bar__label { color: var(--navy); }
.sig-bar__track { display: block; height: 6px; background: var(--cream-deep); position: relative; }
.sig-bar__fill { display: block; height: 100%; background: var(--navy); transition: width .6s ease; }
.sig-bar__n { font-family: var(--serif-display); font-size: 1.15rem; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.sig-words { margin-top: 1rem; font-size: .92em; color: var(--ink-muted); max-width: 66ch; }
.sig-facts { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; margin-top: .9rem; }
@media (min-width: 50rem) { .sig-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sig-fact { border-top: 1px solid var(--navy); padding-top: .8rem; }
.sig-fact h4 { font-family: var(--serif-display); font-weight: 400; font-size: 1.15rem; color: var(--navy); }
.sig-fact p { margin-top: .5rem; font-size: .93em; color: var(--ink); }
.sig-facts + .an__sub { margin-top: 1.5rem; }
.an__body > .an__sub + .sig-facts, .an__body > .sig-words + .an__sub { margin-top: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .sig-bar__fill { transition: none; } }