/*
 * Scribbled Fox Cosmos — the homepage design system.
 *
 * Scoped to .sf-c and its children so the shop, the product pages and the global
 * header and footer are untouched. Three site-specific traps are handled up front,
 * all three learned the hard way on this build:
 *
 *   1. Hello Elementor paints bare buttons and links #c36 pink. Every control here
 *      states its own colour rather than inheriting.
 *   2. Elementor paints link text with -webkit-text-fill-color, which overrides
 *      `color` outright. Anything coloured sets both.
 *   3. The kit styles raw <button> with a gold fill and 15/32 padding, so our
 *      buttons reset padding and background explicitly.
 *
 * Colour contrast, all measured against the ground each pair actually sits on:
 *   cream #F5EEE1 on midnight #0E1428    15.7:1
 *   gold  #C9A24B on midnight #0E1428     7.7:1
 *   lilac #D9C3E8 on midnight #0E1428    11.3:1
 *   plum  #6B2C43 on cream    #F5EEE1     8.8:1
 *   gold dark #82662C on cream #F5EEE1    4.7:1
 */

.sf-cosmos-page,
.sf-c {
  --sf-ink: #070b16;
  --sf-midnight: #0e1428;
  --sf-midnight-2: #151e3a;
  --sf-gold: #c9a24b;
  --sf-gold-lit: #e8c87e;
  --sf-gold-dark: #82662c;
  --sf-cream: #f5eee1;
  --sf-cream-2: #ece1cd;
  --sf-lilac: #d9c3e8;
  --sf-plum: #6b2c43;
  --sf-line: rgba(201, 162, 75, 0.28);
  --sf-dim: rgba(245, 238, 225, 0.66);

  --sf-display: "Cormorant Garamond", "Cormorant", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sf-ui: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sf-wrap: 1180px;
  --sf-pad: clamp(20px, 5vw, 72px);
  /* The x of the wrapped column's left edge, usable by full-bleed children so that
     a heading, a horizontal rail and a timeline spine all share one left edge. */
  --sf-inset: max(var(--sf-pad), calc((100% - var(--sf-wrap)) / 2 + var(--sf-pad)));

  /* Per band, flipped on the light grounds further down. */
  --sf-heading: #f5eee1;
  --sf-body: rgba(245, 238, 225, 0.78);
  --sf-focus: #e8c87e;
}

.sf-cosmos-page {
  background: var(--sf-midnight);
}

/* Let the bands run full bleed inside Elementor's containers, on any page. */
.elementor-widget-container > .sf-c,
.e-con-inner > .elementor-widget > .elementor-widget-container > .sf-c {
  width: 100%;
}

/* The running index (01, 02 ...) only makes sense on the full Cosmos page. A band
   borrowed by another page shows no number. */
body:not(.sf-cosmos-page) .sf-c .sf-num {
  display: none;
}

.sf-c,
.sf-c * {
  box-sizing: border-box;
}

/* The global header is fixed at 98px, and the smooth-scroll offset only exists when
   Lenis runs. This is the same offset for reduced motion and for no JavaScript. */
.sf-c[id],
.sf-c [id] {
  scroll-margin-top: 110px;
}

.sf-c {
  position: relative;
  font-family: var(--sf-ui);
  color: var(--sf-cream);
  background: var(--sf-midnight);
  overflow: clip;
}

.sf-c img,
.sf-c svg,
.sf-c canvas,
.sf-c picture {
  display: block;
  max-width: 100%;
}

.sf-wrap {
  max-width: var(--sf-wrap);
  margin: 0 auto;
  padding: 0 var(--sf-pad);
  position: relative;
  z-index: 2;
}

.sf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fallback faces with adjusted metrics, so the swap from the local fallback to the
   web font does not reflow the page. The hero headline alone contributed 0.18 CLS. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 92%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------- the kit override
 *
 * The Elementor kit ships these, and they out-specify a single class of ours:
 *
 *   .elementor-kit-9 h1..h6   colour #0E1428, Cormorant 600, a fixed pixel size
 *   .elementor-kit-9 a        colour #82662C
 *   .elementor-kit-9 button   gold fill, uppercase, 1.4px tracking, 2px radius
 *
 * Left alone, that paints our midnight headings midnight on midnight, which is
 * exactly what happened on the first build. Doubling .sf-c takes the specificity
 * to (0,2,1) and wins on our own bands only, with no !important and no reach
 * outside the homepage. Everything after this block that needs to beat the kit
 * carries a .sf-c prefix for the same reason.
 */
.sf-c.sf-c h1,
.sf-c.sf-c h2,
.sf-c.sf-c h3,
.sf-c.sf-c h4,
.sf-c.sf-c h5,
.sf-c.sf-c h6 {
  color: var(--sf-heading);
  font-family: var(--sf-display);
  font-weight: 400;
  letter-spacing: -0.012em;
}

.sf-c.sf-c a {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}

.sf-c.sf-c button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  text-transform: none;
  letter-spacing: normal;
}

/* ------------------------------------------------------------------ type */

.sf-c .sf-eyebrow {
  font-family: var(--sf-ui);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin: 0 0 22px;
  max-width: 46ch;
  line-height: 1.5;
}

.sf-c .sf-num {
  font-family: var(--sf-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--sf-gold);
  margin: 0 0 16px;
}
.sf-num::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
}

.sf-c .sf-display {
  font-family: var(--sf-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0 0 24px;
  color: var(--sf-cream);
  text-wrap: balance;
}

.sf-c .sf-c-hero__h1 {
  font-size: clamp(42px, 6.2vw, 92px);
}

.sf-c .sf-h2 {
  font-size: clamp(34px, 5vw, 68px);
  max-width: 21ch;
}
/* The three bands that are centred on purpose need the auto margins back. */
.sf-c--promise .sf-display,
.sf-c--finder .sf-h2,
.sf-c--cta .sf-h2 {
  margin-inline: auto;
}

.sf-c .sf-c-promise__h2 {
  font-size: clamp(46px, 9vw, 132px);
  line-height: 0.92;
}

.sf-c .sf-lede {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--sf-dim);
  max-width: 56ch;
  margin: 0 0 30px;
}

.sf-c .sf-note {
  font-family: var(--sf-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--sf-dim);
  max-width: 60ch;
  margin: 34px 0 0;
}

/* Word-by-word lift.
 *
 * The transition lives in CSS and is switched by a class, deliberately, rather
 * than being a JavaScript tween. A headline is the most important element on the
 * page, so it must never depend on an animation frame arriving: a tab opened in
 * the background gets no rAF, and a tween that never ticks would leave the H1
 * invisible. A CSS transition simply completes when the tab is looked at, and
 * cosmos.js drops the armed class after two seconds no matter what happens. */
.sf-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The mask clips at the line box, and display headings sit on a 0.92 to 0.98 line
     height, so without this the tails of g, j, p, q and y are cut off (Mitch, 17 Sep
     2026). The padding widens the mask; the negative margin keeps the layout where it
     was. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.sf-w > i {
  display: inline-block;
  font-style: inherit;
}
[data-sf-words].is-armed .sf-w > i {
  /* Far enough down to clear the taller mask above, so no word peeks before it lifts. */
  transform: translateY(125%);
}
[data-sf-words].is-in .sf-w > i {
  transform: none;
  transition: transform 0.95s cubic-bezier(0.16, 0.84, 0.32, 1);
  transition-delay: calc(var(--wi, 0) * 45ms);
}

.sf-reveal {
  opacity: 1;
}
.sf-reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
}
.sf-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Small labels. Without this they inherit the kit's absolute line-height, which puts
   a 29.75px line box around 10px type. */
.sf-c .sf-glyph__dates,
.sf-c .sf-card__dates,
.sf-c .sf-card__meta,
.sf-c .sf-feature__i,
.sf-c .sf-month__rx,
.sf-c .sf-rail__hint,
.sf-c .sf-c-hero__cue,
.sf-c .sf-c-hero__trust,
.sf-c .sf-field__label,
.sf-c .sf-event__flag,
.sf-c .sf-wheel__deg,
.sf-c .sf-standfirst span,
.sf-c .sf-ruler__stats span {
  line-height: 1.45;
}

/* --------------------------------------------------------------- buttons */

.sf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 28px;
}

.sf-c.sf-c a.sf-btn,
.sf-c.sf-c button.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sf-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.sf-c.sf-c a.sf-btn--gold,
.sf-c.sf-c button.sf-btn--gold {
  background-color: var(--sf-gold);
  border-color: var(--sf-gold);
  color: #12182c;
  -webkit-text-fill-color: #12182c;
}
.sf-c.sf-c a.sf-btn--gold:hover,
.sf-c.sf-c a.sf-btn--gold:focus-visible,
.sf-c.sf-c button.sf-btn--gold:hover,
.sf-c.sf-c button.sf-btn--gold:focus-visible {
  background-color: var(--sf-gold-lit);
  border-color: var(--sf-gold-lit);
  color: #12182c;
  -webkit-text-fill-color: #12182c;
}

.sf-c.sf-c a.sf-btn--ghost {
  background-color: transparent;
  border-color: rgba(201, 162, 75, 0.6);
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}
.sf-c.sf-c a.sf-btn--ghost:hover,
.sf-c.sf-c a.sf-btn--ghost:focus-visible {
  border-color: var(--sf-gold);
  background-color: rgba(201, 162, 75, 0.14);
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}

.sf-c.sf-c a.sf-btn--plum,
.sf-c.sf-c button.sf-btn--plum {
  background-color: var(--sf-plum);
  border-color: var(--sf-plum);
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}
.sf-c.sf-c a.sf-btn--plum:hover,
.sf-c.sf-c a.sf-btn--plum:focus-visible,
.sf-c.sf-c button.sf-btn--plum:hover,
.sf-c.sf-c button.sf-btn--plum:focus-visible {
  background-color: #521f33;
  border-color: #521f33;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}

.sf-c.sf-c .sf-btn--small {
  font-size: 13px;
  padding: 11px 18px;
  white-space: nowrap;
}

.sf-c a:focus-visible,
.sf-c button:focus-visible,
.sf-c select:focus-visible,
.sf-c summary:focus-visible {
  /* Light bands set --sf-focus to plum: gold-lit on cream measures 1.07:1, which
     leaves a keyboard user with no visible focus at all. */
  outline: 2px solid var(--sf-focus);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ hero */

.sf-c--hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(120px, 16vh, 190px) 0 clamp(80px, 12vh, 130px);
  background: var(--sf-ink);
}

.sf-c-hero__sky,
.sf-c-hero__sky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-c-hero__sky {
  opacity: 0.85;
  z-index: 0;
}

.sf-c-hero__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.sf-c-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 78% 46%, rgba(14, 20, 40, 0) 0%, rgba(7, 11, 22, 0.5) 62%, rgba(7, 11, 22, 0.94) 100%),
    linear-gradient(180deg, rgba(7, 11, 22, 0.72) 0%, rgba(7, 11, 22, 0) 26%, rgba(7, 11, 22, 0) 62%, rgba(7, 11, 22, 0.9) 100%);
}

.sf-c-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sf-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

.sf-c-hero__copy {
  max-width: 620px;
}

.sf-c-hero__trust {
  font-family: var(--sf-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(245, 238, 225, 0.56);
  margin: 0;
}

.sf-c-hero__stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}

.sf-c-hero__cue {
  position: absolute;
  left: var(--sf-pad);
  bottom: 26px;
  z-index: 3;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sf-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.5);
}
.sf-c-hero__cue span {
  width: 1px;
  height: 34px;
  background: var(--sf-gold);
  display: block;
  animation: sf-drop 2.2s ease-in-out infinite;
}
@keyframes sf-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  46% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----------------------------------------------------------------- wheel */

.sf-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.sf-wheel__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sf-wheel__rot {
  transform: rotate(var(--sf-wheel-rot, 0deg));
  transform-origin: 500px 500px;
}

.sf-wheel__ring {
  fill: none;
  stroke: var(--sf-line);
  stroke-width: 1;
}
.sf-wheel__ring--web {
  stroke: rgba(201, 162, 75, 0.18);
}
.sf-wheel__ring--hub {
  stroke: rgba(201, 162, 75, 0.42);
}

.sf-wheel__tick {
  fill: none;
  stroke: var(--sf-gold);
}
.sf-wheel__tick--minor { stroke-width: 0.6; opacity: 0.24; }
.sf-wheel__tick--medium { stroke-width: 0.8; opacity: 0.4; }
.sf-wheel__tick--major { stroke-width: 1.1; opacity: 0.62; }

.sf-wheel__deg {
  fill: var(--sf-gold);
  opacity: 0.4;
  font-family: var(--sf-mono);
  font-size: 13px;
  transform: rotate(calc(-1 * var(--sf-wheel-rot, 0deg)));
  transform-box: fill-box;
  transform-origin: center;
}

.sf-wheel__web {
  fill: none;
  stroke: rgba(201, 162, 75, 0.16);
  stroke-width: 0.8;
}
.sf-wheel__node {
  fill: var(--sf-gold);
  opacity: 0.5;
}

.sf-wheel__wedge {
  fill: transparent;
  transition: fill 0.5s ease;
}
.sf-wheel__spoke {
  stroke: var(--sf-line);
  stroke-width: 1;
}
.sf-wheel__glyph {
  fill: var(--sf-gold);
  font-size: 40px;
  transform: rotate(calc(-1 * var(--sf-wheel-rot, 0deg)));
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.4s ease;
}
.sf-wheel__seg.is-selected .sf-wheel__wedge {
  fill: rgba(217, 195, 232, 0.26);
  stroke: var(--sf-lilac);
  stroke-width: 1.2;
}
.sf-wheel__seg.is-selected .sf-wheel__glyph {
  fill: var(--sf-lilac);
}

.sf-wheel__hub picture { display: contents; }
.sf-wheel__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-wheel__cover {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(201, 162, 75, 0.34), 0 0 60px rgba(217, 195, 232, 0.18);
  transition: opacity 0.35s ease;
}

/* the fox drawn over the wheel */
.sf-fox__line {
  fill: none;
  stroke: var(--sf-gold-lit);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}
.sf-fox__line--thin {
  stroke-width: 1.4;
  opacity: 0.6;
}
.sf-fox__star {
  fill: var(--sf-gold-lit);
}
.sf-fox__star--eye {
  fill: #fff6e2;
}
.sf-fox.is-armed:not(.is-in) .sf-fox__line {
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: var(--len, 3000);
}
.sf-fox.is-armed:not(.is-in) .sf-fox__star {
  opacity: 0;
}
.sf-fox.is-in .sf-fox__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s cubic-bezier(0.5, 0, 0.2, 1);
}
.sf-fox.is-in .sf-fox__line--thin {
  transition-delay: 0.9s;
  transition-duration: 1.1s;
}
.sf-fox.is-in .sf-fox__star {
  opacity: 1;
  transition: opacity 0.55s ease-out;
  transition-delay: calc(1.15s + var(--i, 0) * 60ms);
}

.sf-foxmark {
  width: clamp(90px, 12vw, 150px);
  height: auto;
  margin: 0 auto 28px;
}

/* --------------------------------------------------------------- promise */

.sf-c--promise {
  padding: clamp(90px, 15vw, 190px) 0 clamp(60px, 9vw, 110px);
  background: linear-gradient(180deg, var(--sf-ink), var(--sf-midnight));
  text-align: center;
}
.sf-c--promise .sf-lede {
  margin-inline: auto;
}
.sf-c .sf-c-promise__kicker {
  font-family: var(--sf-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--sf-gold-lit);
  max-width: 24ch;
  margin: 8px auto 0;
}

/* A candle flame standing on the gold rule, set back behind the words, throwing a
   warm light across the band. Only transform and opacity animate, so the flicker
   runs on the compositor, and the sway, the glow and the core run on clocks that
   never line up, so it does not visibly loop. Its brightest point is at the rule,
   below the text, and the body stays faint where it rises behind the words.
   cosmos.js pauses it off screen; reduced motion leaves it lit and still. */
.sf-c--promise > .sf-rule {
  z-index: 1;
}
.sf-c-promise__flames {
  position: absolute;
  inset: 0;
  /* The rule is the band's last child, so it sits exactly one bottom padding up. */
  bottom: clamp(60px, 9vw, 110px);
  z-index: 0;
  pointer-events: none;
}
/* Far off, the way distance actually reads: small, dim, softer and a touch less
   saturated, with a smaller pool of light, and its foot a little above the rule so the
   rule sits in front of it like the near edge of a table. */
.sf-c-promise__flame {
  position: absolute;
  bottom: clamp(6px, 1.4vw, 18px);
  left: 50%;
  width: 0;
  height: min(38%, 280px, 52vw);
  opacity: 0.62;
}
.sf-c-promise__light {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(900px, 110vw);
  aspect-ratio: 2 / 1;
  translate: -50% 50%;
  background: radial-gradient(closest-side, rgba(232, 150, 70, 0.11), rgba(201, 120, 55, 0.05) 38%, rgba(201, 120, 55, 0.015) 68%, rgba(201, 120, 55, 0));
  animation: sf-candle-glow 2.9s linear infinite;
  will-change: opacity, transform;
}
.sf-c-promise__fire {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 100%;
  aspect-ratio: 100 / 260;
  translate: -50% 0;
  transform-origin: 50% 100%;
  filter: blur(clamp(8px, 0.8vw, 11px)) saturate(0.85);
  animation: sf-candle-sway 3.7s ease-in-out infinite;
  will-change: transform;
}
.sf-c .sf-c-promise__fire svg {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
.sf-c-promise__core {
  animation: sf-candle-flicker 1.9s linear infinite;
}
.sf-c--promise.is-unlit .sf-c-promise__flames * {
  animation-play-state: paused;
}

@keyframes sf-candle-glow {
  0%   { opacity: 0.9;  transform: scale(1); }
  9%   { opacity: 0.7;  transform: scale(0.985); }
  17%  { opacity: 1;    transform: scale(1.01); }
  26%  { opacity: 0.8;  transform: scale(1); }
  34%  { opacity: 0.95; }
  45%  { opacity: 0.68; transform: scale(0.98); }
  53%  { opacity: 0.88; transform: scale(1); }
  64%  { opacity: 1;    transform: scale(1.015); }
  73%  { opacity: 0.76; transform: scale(1); }
  82%  { opacity: 0.93; }
  91%  { opacity: 0.78; transform: scale(0.99); }
  100% { opacity: 0.9;  transform: scale(1); }
}
@keyframes sf-candle-sway {
  0%, 100% { transform: rotate(0) scale(1, 1); }
  16% { transform: rotate(-1.8deg) scale(0.95, 1.04); }
  33% { transform: rotate(1.2deg) scale(1.04, 0.97); }
  49% { transform: rotate(-0.8deg) scale(0.97, 1.06); }
  67% { transform: rotate(2deg) scale(1.02, 0.98); }
  84% { transform: rotate(-0.5deg) scale(0.99, 1.03); }
}
@keyframes sf-candle-flicker {
  0%   { opacity: 0.8; }
  11%  { opacity: 0.55; }
  19%  { opacity: 0.92; }
  31%  { opacity: 0.62; }
  42%  { opacity: 1; }
  50%  { opacity: 0.7; }
  63%  { opacity: 0.86; }
  71%  { opacity: 0.5; }
  82%  { opacity: 0.96; }
  91%  { opacity: 0.68; }
  100% { opacity: 0.8; }
}

.sf-rule {
  margin: clamp(50px, 8vw, 96px) auto 0;
  width: min(760px, 82vw);
  height: 1px;
  background: rgba(201, 162, 75, 0.16);
  position: relative;
}
.sf-rule i {
  position: absolute;
  inset: 0;
  background: var(--sf-gold);
  transform: scaleX(0);
  transform-origin: left;
  display: block;
}

/* ---------------------------------------------------------------- finder */

.sf-c--finder {
  background: var(--sf-cream);
  color: #1b1a17;
  padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 10vw, 130px);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(107, 44, 67, 0.05), transparent 42%),
    radial-gradient(circle at 88% 76%, rgba(201, 162, 75, 0.09), transparent 46%);
}
.sf-c--finder { --sf-heading: #6b2c43; --sf-body: rgba(27, 26, 23, 0.76); --sf-focus: #6b2c43; }
.sf-c--finder .sf-num { color: var(--sf-gold-dark); }
.sf-c--finder .sf-lede { color: rgba(27, 26, 23, 0.74); }
.sf-c-finder__head { text-align: center; }
.sf-c-finder__head .sf-lede { margin-inline: auto; }

.sf-plate {
  position: relative;
  margin: clamp(24px, 4vw, 48px) auto 0;
  max-width: 780px;
  padding: clamp(30px, 4.4vw, 54px);
  background: rgba(255, 253, 248, 0.72);
  /* The diary cover's own double rule, borrowed. A border plus an offset outline
     lands both lines on exact pixels; an SVG rect stretched to fit does not. */
  border: 2px solid var(--sf-plum);
  outline: 1px solid rgba(130, 102, 44, 0.55);
  outline-offset: 5px;
}

.sf-finder__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
}
.sf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 150px;
}
.sf-field__label {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-gold-dark);
}
.sf-c select {
  font-family: var(--sf-ui);
  font-size: 16px;
  color: #1b1a17;
  -webkit-text-fill-color: #1b1a17;
  background-color: #fffdf8;
  border: 1px solid rgba(107, 44, 67, 0.78);
  border-radius: 0;
  padding: 13px 14px;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sf-plum) 50%), linear-gradient(135deg, var(--sf-plum) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.sf-finder__result {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(107, 44, 67, 0.2);
  text-align: center;
}
/* The orrery, played between "Show me her sign" and the answer. Twelve signs on three
   rings, one ring per modality, turning at 3:2:1 (4s, 6s, 12s; the middle ring the
   other way). Each glyph turns back against its ring so it stays upright. Then the
   rings fold to the centre and her sign rises out of them, at the size the answer's
   own glyph uses. Individual transform properties (scale, rotate, translate) carry
   the fold and the placement, so they compose with the spin instead of fighting it. */
.sf-c .sf-orrery {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 4px 0;
}
.sf-c .sf-orrery__sky {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 1;
}
.sf-c .sf-orrery__ring {
  position: absolute;
  inset: calc(50% - var(--d) / 2);
  border: 1px solid rgba(130, 102, 44, 0.34);
  border-radius: 50%;
  animation: sf-orbit var(--t) linear infinite;
  transition: scale 0.6s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.5s ease-in;
}
.sf-c .sf-orrery__ring--1 { --d: 36%; --t: 4s; }
.sf-c .sf-orrery__ring--2 { --d: 66%; --t: 6s; animation-direction: reverse; }
.sf-c .sf-orrery__ring--3 { --d: 96%; --t: 12s; }
.sf-c .sf-orrery__body {
  position: absolute;
  inset: 0;
  rotate: var(--a);
}
.sf-c .sf-orrery__body i {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  translate: -50% -50%;
  rotate: calc(var(--a) * -1);
  border-radius: 50%;
  /* The plate's own ground, so the ring line breaks cleanly behind each sign. */
  background: #fcf9f2;
  font-style: normal;
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1;
  color: var(--sf-plum);
  animation: sf-orbit var(--t) linear infinite reverse;
}
.sf-c .sf-orrery__ring--2 .sf-orrery__body i {
  animation-direction: normal;
}
.sf-c .sf-orrery__star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  translate: -50% -50%;
  background: var(--sf-gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: sf-orrery-pulse 1.3s ease-in-out infinite;
  transition: opacity 0.3s ease-in, scale 0.3s ease-in;
}
.sf-c .sf-orrery__found {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: clamp(56px, 9vw, 88px);
  line-height: 1;
  color: var(--sf-plum);
  text-shadow: 0 0 26px rgba(201, 162, 75, 0.6);
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.45s ease-out 0.25s, scale 0.65s cubic-bezier(0.2, 0.8, 0.2, 1.25) 0.25s;
}
.sf-c .sf-orrery__caption {
  font-family: var(--sf-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--sf-plum);
  margin: 0;
  transition: opacity 0.3s ease-in;
}
.sf-c .sf-orrery.is-found .sf-orrery__ring { scale: 0.08; opacity: 0; }
.sf-c .sf-orrery.is-found .sf-orrery__caption { opacity: 0; }
/* The star's pulse animates opacity, which beats a plain opacity rule, so the pulse
   stops and the star shrinks away. */
.sf-c .sf-orrery.is-found .sf-orrery__star { animation: none; opacity: 0; scale: 0; }
.sf-c .sf-orrery.is-found .sf-orrery__found { opacity: 1; scale: 1; }

@keyframes sf-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sf-orrery-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.7) rotate(45deg); opacity: 0.55; }
}

.sf-c .sf-finder__glyph {
  font-size: clamp(56px, 9vw, 88px);
  line-height: 1;
  color: var(--sf-plum);
  margin: 0 0 10px;
}
.sf-c .sf-finder__sign {
  font-family: var(--sf-display);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.05;
  color: var(--sf-plum);
  margin: 0 0 10px;
}
.sf-finder__line {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(27, 26, 23, 0.78);
  max-width: 48ch;
  margin: 0 auto 8px;
}
.sf-finder__cover {
  width: 132px;
  height: auto;
  margin: 22px auto 20px;
  box-shadow: 0 14px 34px rgba(107, 44, 67, 0.24);
}
/* Every cover a sign's diary comes in: cream cards on the plum plate, one tap each. */
.sf-finder__choose { margin-top: 18px; }
.sf-finder__editions {
  list-style: none;
  margin: 18px auto 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 160px));
  justify-content: center;
  gap: 14px;
}
.sf-c .sf-edition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 14px;
  background: #fffdf8;
  border: 1px solid rgba(107, 44, 67, 0.32);
  text-decoration: none;
  color: #1b1a17;
  -webkit-text-fill-color: #1b1a17;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sf-c .sf-edition:hover,
.sf-c .sf-edition:focus-visible {
  border-color: var(--sf-plum);
  box-shadow: 0 12px 28px rgba(107, 44, 67, 0.18);
  transform: translateY(-2px);
  outline: none;
}
.sf-c .sf-edition__cover {
  width: 104px;
  height: auto;
  margin: 0 0 6px;
  box-shadow: 0 10px 22px rgba(107, 44, 67, 0.22);
}
.sf-c .sf-edition__label {
  font-family: var(--sf-display);
  font-size: 19px;
  line-height: 1.1;
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
  text-align: center;
}
.sf-c .sf-edition__price {
  font-family: var(--sf-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--sf-gold-dark);
  -webkit-text-fill-color: var(--sf-gold-dark);
}
.sf-c .sf-edition__go {
  font-size: 12.5px;
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 480px) {
  .sf-finder__editions { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
  .sf-c .sf-edition__cover { width: 84px; }
  .sf-c .sf-edition__label { font-size: 17px; }
}

.sf-c.sf-c .sf-finder__again {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sf-ui);
  font-size: 13.5px;
  color: var(--sf-gold-dark);
  -webkit-text-fill-color: var(--sf-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sf-c-finder__picker {
  text-align: center;
  font-size: 14px;
  color: rgba(27, 26, 23, 0.66);
  margin: clamp(44px, 6vw, 72px) 0 22px;
}

.sf-glyphs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: rgba(107, 44, 67, 0.16);
  border: 1px solid rgba(107, 44, 67, 0.16);
}
.sf-c.sf-c a.sf-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 10px 18px;
  background: rgba(255, 253, 248, 0.66);
  text-decoration: none;
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
  transition: background-color 0.3s;
}
.sf-c.sf-c a.sf-glyph:hover,
.sf-c.sf-c a.sf-glyph:focus-visible {
  background: #fffdf8;
}
.sf-glyph__mark { font-size: 30px; line-height: 1; color: var(--sf-gold-dark); -webkit-text-fill-color: var(--sf-gold-dark); }
.sf-c .sf-glyph__name { font-family: var(--sf-display); font-size: 19px; }
.sf-c .sf-glyph__dates { font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(27, 26, 23, 0.74); -webkit-text-fill-color: rgba(27, 26, 23, 0.74); }

/* ---------------------------------------------------------------- twelve */

.sf-c--twelve {
  padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 10vw, 120px);
  background: var(--sf-midnight);
}
.sf-c-twelve__head { }

.sf-rail {
  margin: clamp(34px, 5vw, 60px) 0 0;
  position: relative;
}
/* Only in the pinned state, where --sf-cover-h is known. Positioned from a magic
   pixel value it drew across the middle of every cover in every other state. */
.sf-rail.is-pinned::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sf-cover-h) + 10px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, 0.5) 8%, rgba(201, 162, 75, 0.5) 92%, transparent);
}
.sf-rail__track {
  display: flex;
  gap: 22px;
  padding: 0 var(--sf-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sf-rail.is-pinned .sf-rail__track {
  overflow: visible;
  scroll-snap-type: none;
}

/* Pinned: the whole band has to fit one viewport, head and cards and buttons, or the
   visitor spends the entire pin looking at cards whose titles are below the fold.
   Everything below is therefore sized off viewport HEIGHT, not width. The JavaScript
   refuses to pin at all under 700px tall, because no amount of shrinking makes twelve
   book covers and their buttons fit a short laptop window. */
.sf-c--twelve.is-pinned-band {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(72px, 11svh, 104px);
  padding-bottom: clamp(20px, 4svh, 40px);
  overflow: hidden;
}
.sf-c--twelve.is-pinned-band .sf-c-twelve__head { margin-bottom: 0; }
.sf-c--twelve.is-pinned-band .sf-h2 {
  font-size: clamp(26px, 4.4svh, 44px);
  margin-bottom: clamp(6px, 1.4svh, 14px);
}
.sf-c--twelve.is-pinned-band .sf-c-twelve__head .sf-lede {
  font-size: clamp(14px, 1.9svh, 17px);
  margin-bottom: 0;
}
.sf-c--twelve.is-pinned-band .sf-note { display: none; }
.sf-c--twelve.is-pinned-band .sf-card__meta { display: none; }
.sf-c--twelve.is-pinned-band .sf-rail {
  --sf-cover-h: clamp(170px, 29svh, 300px);
  margin-top: clamp(14px, 3svh, 40px);
}
.sf-c--twelve.is-pinned-band .sf-card {
  flex-basis: calc(var(--sf-cover-h) * 0.667);
  padding-bottom: 0;
}
.sf-c--twelve.is-pinned-band .sf-card__cover { aspect-ratio: auto; height: var(--sf-cover-h); }
.sf-c--twelve.is-pinned-band .sf-card__glyph {
  margin: clamp(8px, 1.6svh, 18px) 0 clamp(2px, 0.5svh, 6px);
  font-size: clamp(18px, 2.6svh, 26px);
}
.sf-c--twelve.is-pinned-band .sf-card__name {
  font-size: clamp(18px, 2.9svh, 27px);
  margin-bottom: 2px;
}
.sf-c--twelve.is-pinned-band .sf-card__dates { margin-bottom: clamp(8px, 1.6svh, 16px); }
.sf-card {
  flex: 0 0 clamp(230px, 62vw, 268px);
  scroll-snap-align: center;
  padding-bottom: 26px;
}
.sf-card__cover {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--sf-midnight-2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 162, 75, 0.2);
}
.sf-card__cover picture { display: contents; }
.sf-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sf-card:hover .sf-card__cover img { transform: scale(1.05); }
.sf-c .sf-card__glyph {
  font-size: 26px;
  line-height: 1;
  color: var(--sf-gold);
  margin: 20px 0 6px;
}
.sf-c .sf-card__name {
  font-family: var(--sf-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--sf-cream);
}
.sf-card__dates {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sf-gold);
  margin: 0 0 4px;
}
.sf-card__meta {
  font-size: 12.5px;
  color: rgba(245, 238, 225, 0.5);
  margin: 0 0 16px;
}
.sf-card__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.sf-c.sf-c a.sf-card__link {
  font-size: 13px;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sf-c.sf-c a.sf-card__link:hover { opacity: 1; }

.sf-card:focus-within .sf-card__cover {
  outline: 2px solid var(--sf-gold-lit);
  outline-offset: 4px;
}

.sf-rail__hint {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.4);
  margin: 18px var(--sf-pad) 0;
}
.sf-rail.is-pinned .sf-card:focus-within .sf-card__cover {
  outline: 2px solid var(--sf-gold-lit);
  outline-offset: 4px;
}

.sf-rail.is-pinned .sf-rail__hint { display: none; }

/* ---------------------------------------------------------------- inside */

.sf-c--inside {
  background: var(--sf-cream);
  color: #1b1a17;
  padding: clamp(80px, 12vw, 150px) 0 0;
}
.sf-c--inside { --sf-heading: #6b2c43; --sf-body: rgba(27, 26, 23, 0.76); --sf-focus: #6b2c43; }
.sf-c--inside .sf-num { color: var(--sf-gold-dark); }
.sf-c--inside .sf-lede,
.sf-c--inside .sf-note { color: rgba(27, 26, 23, 0.72); }
.sf-c-inside__head { }

.sf-c-inside__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(30px, 4vw, 52px);
  align-items: start;
}
.sf-feature {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(107, 44, 67, 0.3);
  outline: 1px solid rgba(130, 102, 44, 0.24);
  outline-offset: 4px;
}
.sf-feature__i {
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--sf-gold-dark);
  margin: 0 0 14px;
}
.sf-c .sf-feature__title {
  font-family: var(--sf-display);
  font-weight: 400;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--sf-plum);
  margin: 0 0 10px;
}
.sf-feature__body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(27, 26, 23, 0.74);
  margin: 0;
}
.sf-c-inside__fig {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  display: flex;
  justify-content: center;
}
.sf-c-inside__fig picture { display: contents; }
.sf-c-inside__fig img {
  width: clamp(180px, 24vw, 260px);
  height: auto;
  box-shadow: 0 22px 50px rgba(107, 44, 67, 0.2);
}

.sf-ruler {
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid rgba(107, 44, 67, 0.24);
  padding: 0 var(--sf-inset) clamp(56px, 8vw, 92px);
}
.sf-ruler__ticks {
  height: 16px;
  background-image: repeating-linear-gradient(90deg, rgba(107, 44, 67, 0.34) 0 1px, transparent 1px 12px);
  opacity: 0.8;
}
.sf-ruler__stats {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
}
.sf-c .sf-ruler__stats b {
  display: block;
  font-family: var(--sf-display);
  font-weight: 400;
  font-size: clamp(50px, 7vw, 88px);
  line-height: 0.95;
  color: var(--sf-plum);
  margin-bottom: 8px;
}
.sf-ruler__stats span {
  font-size: 13px;
  color: rgba(27, 26, 23, 0.66);
}

/* ------------------------------------------------------------------ year */

.sf-c--year {
  background: var(--sf-ink);
  padding: 0 0 clamp(70px, 10vw, 120px);
}
.sf-c-year__sky {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
}
.sf-c-year__plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.sf-c-year__pic,
.sf-c-year__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-c-year__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 22, 0.9) 0%, rgba(7, 11, 22, 0.62) 30%, rgba(7, 11, 22, 0.68) 70%, rgba(7, 11, 22, 0.94) 100%);
}
.sf-c-year__body {
  position: relative;
  z-index: 2;
  padding-top: clamp(90px, 14vw, 170px);
}
.sf-c-year__head { }
.sf-c-year__rail {
  position: absolute;
  left: calc(var(--sf-inset) + 5px);
  top: clamp(230px, 30vw, 330px);
  bottom: 220px;
  width: 1px;
  background: rgba(201, 162, 75, 0.2);
}
.sf-c-year__rail i {
  position: absolute;
  inset: 0;
  background: var(--sf-gold);
  transform: scaleY(0);
  transform-origin: top;
  display: block;
}

.sf-months {
  list-style: none;
  margin: clamp(40px, 6vw, 80px) 0 0;
  /* Same inset as the spine, so a node's centre lands on the line. */
  padding: 0 var(--sf-inset) 0 calc(var(--sf-inset) + 34px);
}
.sf-month {
  position: relative;
  padding: clamp(26px, 3.4vw, 42px) 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.14);
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(14px, 3vw, 40px);
  align-items: start;
}
.sf-month__node {
  position: absolute;
  left: -34px;
  top: clamp(34px, 4vw, 52px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--sf-gold);
  background: var(--sf-ink);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.sf-month.is-on .sf-month__node {
  background: var(--sf-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 75, 0.16);
}
.sf-c .sf-month__name {
  font-family: var(--sf-display);
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1;
  /* Dim the colour, never the box. `opacity` on this element creates a group, and the
     0.7 on the year label inside it compounded to an effective 0.434, taking 11px gold
     text to 2.37:1. Colour alpha does not compound into children. */
  color: rgba(245, 238, 225, 0.72);
  margin: 0;
  transition: color 0.5s ease;
}
.sf-month.is-on .sf-month__name { color: var(--sf-gold-lit); }
.sf-c .sf-month__name span {
  display: block;
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--sf-gold);
  margin-top: 8px;
}
.sf-month__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-event { display: flex; align-items: flex-start; gap: 13px; }
.sf-event__text { font-size: 15px; line-height: 1.55; color: rgba(245, 238, 225, 0.8); }
.sf-event__text b {
  display: block;
  font-family: var(--sf-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin-bottom: 3px;
}
.sf-event__flag {
  display: inline-block;
  font-family: var(--sf-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-lilac);
  border: 1px solid rgba(217, 195, 232, 0.42);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: 1px;
}
.sf-moon { flex: 0 0 auto; margin-top: 2px; }
.sf-moon__disc { stroke: var(--sf-gold-lit); stroke-width: 1.4; }
.sf-moon--new .sf-moon__disc { fill: rgba(7, 11, 22, 0.9); }
.sf-moon--full .sf-moon__disc { fill: #f3e6c6; stroke: #f3e6c6; }
.sf-month__rx {
  grid-column: 2;
  margin: 14px 0 0;
  font-family: var(--sf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-lilac);
  border-left: 2px solid rgba(217, 195, 232, 0.4);
  padding-left: 12px;
}
.sf-month__rx--first { margin: 0 0 16px; }
.sf-c .sf-finder__noscript {
  margin: 22px auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sf-plum);
  border-top: 1px solid rgba(107, 44, 67, 0.2);
  padding-top: 20px;
}
.sf-c-year__foot { margin-top: clamp(50px, 7vw, 84px); }
.sf-c-year__foot .sf-note { margin-bottom: 26px; }

/* ------------------------------------------------------------ astrologer */

.sf-c--astrologer {
  background: var(--sf-cream-2);
  color: #1b1a17;
  padding: clamp(80px, 12vw, 150px) 0;
}
.sf-c--astrologer {
  --sf-heading: #6b2c43;
  --sf-body: rgba(27, 26, 23, 0.76);
  --sf-focus: #6b2c43;
  /* Cream-2 is darker than cream, and the brand's gold dark only reaches 4.17:1 on
     it. A shade down takes the same colour to 5.4:1 without leaving the palette. */
  --sf-gold-dark: #6f5622;
}
.sf-c--astrologer .sf-num { color: var(--sf-gold-dark); }
.sf-c--astrologer p { color: rgba(27, 26, 23, 0.78); font-size: 16px; line-height: 1.7; }
.sf-c-astro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.sf-c-astro__fig { margin: 0; }
.sf-c-astro__arch {
  border-radius: 50% 50% 4px 4px / 32% 32% 3px 3px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(107, 44, 67, 0.22);
  outline: 1px solid rgba(107, 44, 67, 0.24);
  outline-offset: 10px;
}
.sf-c-astro__arch picture { display: contents; }
.sf-c-astro__arch img { width: 100%; height: auto; }
/* A standfirst, not a pull quote. Nobody has given us a spoken line, so nothing
   here may be typeset as her words: no quotation marks, no <blockquote>, no <cite>. */
.sf-c .sf-standfirst {
  margin: 30px 0;
  padding: 22px 0 22px 24px;
  border-left: 2px solid var(--sf-gold-dark);
  font-family: var(--sf-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--sf-plum);
}
.sf-c .sf-standfirst span {
  display: block;
  margin-top: 12px;
  font-family: var(--sf-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-gold-dark);
}

/* ------------------------------------------------------------- notebooks */

.sf-c--notebooks {
  background: var(--sf-midnight);
  padding: clamp(80px, 12vw, 140px) 0 clamp(70px, 10vw, 120px);
}
.sf-c-note__head { }
.sf-marquee {
  margin: clamp(34px, 5vw, 58px) 0 clamp(34px, 5vw, 56px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sf-marquee__track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.sf-marquee__item { flex: 0 0 auto; }
.sf-marquee__item picture { display: contents; }
.sf-marquee__item img {
  width: 150px;
  height: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 162, 75, 0.16);
}

/* ------------------------------------------------------------------- faq */

.sf-c--faq {
  background: var(--sf-cream);
  color: #1b1a17;
  padding: clamp(80px, 12vw, 150px) 0;
}
.sf-c--faq { --sf-heading: #6b2c43; --sf-body: rgba(27, 26, 23, 0.76); --sf-focus: #6b2c43; }
.sf-c--faq .sf-num { color: var(--sf-gold-dark); }
.sf-c--faq .sf-lede { color: rgba(27, 26, 23, 0.72); }
.sf-c-faq__head { }
.sf-faq { max-width: 820px; margin-top: clamp(26px, 4vw, 44px); }
.sf-faq__item { border-top: 1px solid rgba(107, 44, 67, 0.22); }
.sf-faq__item:last-child { border-bottom: 1px solid rgba(107, 44, 67, 0.22); }
.sf-c .sf-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sf-display);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.3;
  color: var(--sf-plum);
}
.sf-faq__item summary::-webkit-details-marker { display: none; }
.sf-c .sf-faq__item summary i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  position: relative;
}
.sf-c .sf-faq__item summary i::before,
.sf-c .sf-faq__item summary i::after {
  content: "";
  position: absolute;
  background: var(--sf-gold-dark);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sf-c .sf-faq__item summary i::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.sf-c .sf-faq__item summary i::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.sf-faq__item[open] summary i::after { transform: scaleY(0); }
.sf-faq__body { padding: 0 0 24px; max-width: 66ch; }
.sf-faq__body p { font-size: 15.5px; line-height: 1.72; color: rgba(27, 26, 23, 0.76); margin: 0; }

/* ------------------------------------------------------------------- cta */

.sf-c--cta {
  background: var(--sf-ink);
  padding: clamp(100px, 15vw, 190px) 0 clamp(90px, 13vw, 170px);
  text-align: center;
}
.sf-c-cta__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sf-c-cta__inner { position: relative; z-index: 2; }
.sf-c--cta .sf-lede { margin-inline: auto; }
.sf-c--cta .sf-actions { justify-content: center; }
.sf-c-cta__fox { width: clamp(100px, 13vw, 158px); }

/* ------------------------------------------------------------ shop page */
/* The shop front (17 Sep 2026): intro, offer strip, ranges, star signs, covers,
   mix and match, facts. Same tokens and type as the homepage bands. Everything that
   is a product comes from live data, so nothing here assumes a count. */

.sf-c--shopintro {
  background: var(--sf-ink);
  padding: clamp(96px, 13vw, 170px) 0 clamp(64px, 9vw, 120px);
  text-align: center;
}
.sf-c-shopintro__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sf-c-shopintro__inner { position: relative; z-index: 2; }
.sf-c--shopintro .sf-eyebrow { margin-inline: auto; }
.sf-c .sf-c-shopintro__h1 {
  font-size: clamp(40px, 6vw, 84px);
  max-width: 18ch;
  margin-inline: auto;
}
.sf-c--shopintro .sf-lede { margin-inline: auto; }
.sf-c--shopintro .sf-actions { justify-content: center; margin-bottom: 0; }

/* Offer strip: only rendered when a headline has been written into it. */
.sf-c--shopoffer {
  background: var(--sf-gold);
  color: #12182c;
  padding: 18px 0;
  text-align: center;
}
.sf-c--shopoffer { --sf-focus: #12182c; }
.sf-c-shopoffer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  justify-content: center;
}
.sf-c .sf-c-shopoffer__headline {
  font-family: var(--sf-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  margin: 0;
}
.sf-c .sf-c-shopoffer__detail { font-size: 15px; margin: 0; }
.sf-c.sf-c a.sf-c-shopoffer__link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #12182c;
  -webkit-text-fill-color: #12182c;
}

/* Shared section head for the dark shop bands. */
.sf-c-shop__head { text-align: center; margin: 0 auto clamp(34px, 5vw, 60px); }
.sf-c-shop__head .sf-h2 { margin-inline: auto; }
.sf-c-shop__head .sf-lede { margin: 0 auto; }

/* Ranges */
.sf-c--shopranges {
  background: var(--sf-midnight);
  padding: clamp(80px, 11vw, 140px) 0;
}
.sf-ranges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.sf-c.sf-c a.sf-range__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sf-midnight-2);
  border: 1px solid var(--sf-line);
  outline: 1px solid rgba(201, 162, 75, 0.12);
  outline-offset: 5px;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
  transition: border-color 0.3s, transform 0.3s;
}
.sf-c.sf-c a.sf-range__link:hover,
.sf-c.sf-c a.sf-range__link:focus-visible {
  border-color: var(--sf-gold);
  transform: translateY(-3px);
}
.sf-range__covers {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(210px, 22vw, 280px);
  padding: 30px 20px 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(201, 162, 75, 0.16), transparent 70%);
  overflow: hidden;
}
.sf-range__cover {
  width: clamp(110px, 11vw, 150px);
  margin: 0 -22px;
  transform: rotate(calc((var(--ci, 0) - 1) * 7deg)) translateY(calc(var(--ci, 0) * 0px));
  transform-origin: 50% 110%;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
  z-index: calc(3 - var(--ci, 0));
}
.sf-range__cover:nth-child(2) { z-index: 3; transform: translateY(-10px); }
.sf-range__cover img { width: 100%; height: auto; }
.sf-range__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  flex: 1;
}
.sf-c .sf-range__name {
  font-family: var(--sf-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}
.sf-c .sf-range__line {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sf-dim);
  -webkit-text-fill-color: var(--sf-dim);
  max-width: 46ch;
}
.sf-c .sf-range__meta {
  font-family: var(--sf-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--sf-gold);
  -webkit-text-fill-color: var(--sf-gold);
  margin: 2px 0 8px;
}
.sf-range__body .sf-btn { margin-top: auto; }
/* The card's button is a span (the whole card is the link), so it gets the button look here. */
.sf-c.sf-c span.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sf-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.sf-c.sf-c span.sf-btn--gold {
  background-color: var(--sf-gold);
  border-color: var(--sf-gold);
  color: #12182c;
  -webkit-text-fill-color: #12182c;
}
.sf-c.sf-c a.sf-range__link:hover span.sf-btn--gold,
.sf-c.sf-c a.sf-range__link:focus-visible span.sf-btn--gold {
  background-color: var(--sf-gold-lit);
  border-color: var(--sf-gold-lit);
}
.sf-c.sf-c span.sf-btn--small { font-size: 13px; padding: 11px 18px; white-space: nowrap; }

/* Star signs: the finder plate plus the twelve signs as buttons. */
.sf-c.sf-c button.sf-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 22px 10px 18px;
  background: rgba(255, 253, 248, 0.66);
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
  font-family: var(--sf-ui);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.sf-c.sf-c button.sf-glyph:hover,
.sf-c.sf-c button.sf-glyph:focus-visible {
  background: #fffdf8;
}
.sf-c--shopsigns .sf-c-finder__picker { text-align: center; margin: clamp(36px, 5vw, 56px) 0 18px; }
.sf-c--shopsigns .sf-finder__notebooks { margin-top: 12px; }

/* Covers */
.sf-c--shopcovers {
  background: var(--sf-ink);
  padding: clamp(80px, 11vw, 140px) 0;
}
.sf-covers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 28px);
}
.sf-covers > li { flex: 0 1 168px; }
.sf-c.sf-c a.sf-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px 20px;
  border: 1px solid transparent;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
  text-align: center;
  transition: border-color 0.3s, background-color 0.3s;
}
.sf-c.sf-c a.sf-cover:hover,
.sf-c.sf-c a.sf-cover:focus-visible {
  border-color: var(--sf-line);
  background-color: rgba(201, 162, 75, 0.06);
}
.sf-cover__img {
  display: block;
  width: min(130px, 70%);
  margin-bottom: 8px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s;
}
.sf-cover__img img { width: 100%; height: auto; }
.sf-c.sf-c a.sf-cover:hover .sf-cover__img { transform: translateY(-4px) rotate(-1.5deg); }
.sf-c .sf-cover__name {
  font-family: var(--sf-display);
  font-size: 22px;
  line-height: 1.1;
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}
.sf-c .sf-cover__count {
  font-family: var(--sf-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--sf-gold);
  -webkit-text-fill-color: var(--sf-gold);
}

/* Mix and match */
.sf-c--shoppairing {
  background: var(--sf-cream-2);
  color: #1b1a17;
  padding: clamp(80px, 11vw, 140px) 0;
  text-align: center;
}
.sf-c--shoppairing { --sf-heading: #6b2c43; --sf-body: rgba(27, 26, 23, 0.76); --sf-focus: #6b2c43; }
.sf-c.sf-c--shoppairing .sf-display { color: var(--sf-plum); margin-inline: auto; }
.sf-c--shoppairing .sf-lede { color: rgba(27, 26, 23, 0.76); margin-inline: auto; }
.sf-c--shoppairing .sf-actions { justify-content: center; margin-bottom: 0; }
.sf-c.sf-c a.sf-btn--outline {
  background-color: transparent;
  border-color: var(--sf-plum);
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
}
.sf-c.sf-c a.sf-btn--outline:hover,
.sf-c.sf-c a.sf-btn--outline:focus-visible {
  background-color: rgba(107, 44, 67, 0.08);
}

/* Facts strip */
.sf-c--shopfacts {
  background: var(--sf-midnight);
  border-top: 1px solid var(--sf-line);
  padding: 22px 0;
}
.sf-c .sf-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 0 auto;
}
.sf-c .sf-facts li {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--sf-dim);
}
.sf-c .sf-facts li span { color: var(--sf-gold); margin-right: 6px; }

@media (max-width: 780px) {
  .sf-c--shopintro { padding: 72px 0 56px; }
  .sf-c .sf-c-shopintro__h1 { font-size: clamp(36px, 10vw, 48px); }
  .sf-range__covers { height: 200px; }
  .sf-range__cover { width: 104px; margin: 0 -18px; }
  .sf-covers { gap: 14px; }
  .sf-covers > li { flex-basis: calc(50% - 7px); }
  .sf-c .sf-facts { justify-content: flex-start; gap: 8px 20px; }
}

@media (max-width: 480px) {
  .sf-c.sf-c a.sf-glyph,
  .sf-c.sf-c button.sf-glyph { padding: 16px 4px 14px; }
  .sf-c .sf-glyph__dates {
    max-width: 100%;
    font-size: 10px;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
  }
}

/* ------------------------------------------------------- flagship shelves */
/* Home: the diary covers on shelves, one per cover range (17 Sep 2026). Covers only; each
   opens its product. Four layouts, chosen in the widget: carousel, wall, tabs, cubbies. */

.sf-c--shelves {
  --sf-heading: #6b2c43;
  --sf-body: rgba(27, 26, 23, 0.76);
  --sf-focus: #6b2c43;
  --sf-ledge-h: 14px;
  background: var(--sf-cream);
  color: #1b1a17;
  padding: clamp(80px, 11vw, 140px) 0;
}
.sf-c--shelves .sf-eyebrow { color: var(--sf-gold-dark); margin-inline: auto; }
.sf-c.sf-c--shelves .sf-display { color: var(--sf-plum); }
.sf-c--shelves .sf-lede { color: rgba(27, 26, 23, 0.76); }
.sf-c--shelves .sf-actions.sf-c-shelves__actions { justify-content: center; margin: clamp(34px, 4.5vw, 56px) 0 0; }

/* A cover on a shelf: a shaded spine edge and a soft shadow on the plank. */
.sf-c.sf-c a.sf-book {
  display: block;
  position: relative;
  transform-origin: 50% 100%;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sf-book picture { display: contents; }
.sf-book img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 12px 16px -10px rgba(52, 34, 8, 0.55), 0 2px 5px rgba(52, 34, 8, 0.16);
}
.sf-book::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.08) 60%, transparent);
  pointer-events: none;
}
.sf-c.sf-c a.sf-book:hover,
.sf-c.sf-c a.sf-book:focus-visible { transform: translateY(-10px) rotate(-1deg); }

/* The plank. The ledge sits under the covers and never scrolls with them. */
.sf-shelf__stage {
  position: relative;
  padding-bottom: var(--sf-ledge-h);
}
.sf-shelf__stage::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 0;
  height: var(--sf-ledge-h);
  border-radius: 2px;
  background: linear-gradient(180deg, #f1e2c0 0, #d6b67a 22%, #b8904f 70%, #9c7639 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 20px -12px rgba(60, 40, 10, 0.55);
  pointer-events: none;
}
.sf-c .sf-shelf__books {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 1.6vw, 22px);
}
.sf-c .sf-shelf__books > li { margin: 0; }

/* Shelf heading row */
.sf-shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 5.5vw, 70px); }
/* Grid and flex children default to their content's width, which would let a scrolling
   shelf push past the page instead of scrolling inside it. */
.sf-shelf,
.sf-shelf__stage { min-width: 0; }
.sf-shelf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.sf-c .sf-shelf__name {
  margin: 0;
  font-family: var(--sf-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--sf-plum);
}
.sf-c .sf-shelf__count {
  font-family: var(--sf-ui);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-gold-dark);
}
.sf-c.sf-c a.sf-shelf__all {
  font-family: var(--sf-ui);
  font-size: 14px;
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
  text-decoration: underline;
  text-decoration-color: rgba(107, 44, 67, 0.35);
  text-underline-offset: 4px;
}
.sf-c.sf-c a.sf-shelf__all:hover { text-decoration-color: currentColor; }
.sf-shelf__nav { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.sf-shelf__nav[hidden] { display: none; }
.sf-c.sf-c button.sf-shelf__btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sf-gold);
  background: transparent;
  color: var(--sf-gold-dark);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.sf-c.sf-c button.sf-shelf__btn:hover:not(:disabled) { background: var(--sf-gold); color: var(--sf-midnight); }
.sf-c.sf-c button.sf-shelf__btn:disabled { opacity: 0.3; cursor: default; }

/* A. Scrolling shelves */
.sf-c .sf-shelf__books--scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: 2px;
}
.sf-c .sf-shelf__books--scroll::-webkit-scrollbar { display: none; }
.sf-c .sf-shelf__books--scroll > li { flex: 0 0 clamp(118px, 13.2vw, 150px); scroll-snap-align: start; }

/* E. Stacks: the twelve signs standing shoulder to shoulder, like books on a shelf.
   Widths are percentages of the shelf, so twelve covers always span it:
   12 x 10.3% less 11 overlaps of 2.2% = 99.4%. Sized so the whole band lands within a
   few percent of the section it replaces on the homepage. */
.sf-shelves--stacks { gap: clamp(20px, 2.4vw, 30px); }
/* 27 Oct 2026: books no longer overlap on desktop. 12 books with 11 equal gaps between. */
/* 27 Oct 2026 (later): bigger books on desktop. The shelves band runs wider than the rest of the page
   (1560px instead of 1180px) and the gaps tighten, so each book is about a third larger. */
.sf-c--shelves-stacks .sf-wrap,
.sf-c--shelves-stacks .sf-shelf { max-width: 1560px; }
.sf-c .sf-shelf__books--stack {
  gap: clamp(6px, 0.8vw, 12px);
  padding-top: 18px;
}
.sf-c .sf-shelf__books--stack > li {
  flex: 0 0 auto;
  width: calc((100% - 11 * clamp(6px, 0.8vw, 12px)) / 12);
  margin-right: 0;
}
.sf-c .sf-shelf__books--stack > li:last-child { margin-right: 0; }
.sf-c .sf-shelf__books--stack > li:hover,
.sf-c .sf-shelf__books--stack > li:focus-within { z-index: 4; }

/* B. Wall: twelve to a shelf */
.sf-shelves--wall { gap: clamp(30px, 3.6vw, 46px); }
.sf-c .sf-shelves--wall .sf-shelf__name { font-size: clamp(21px, 1.9vw, 25px); }
.sf-c .sf-shelf__books--fit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(6px, 0.9vw, 12px);
  padding-top: 16px;
}

/* C. Tabs: choose a cover, two shelves of six */
.sf-c .sf-shelftabs__label {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--sf-ui);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-gold-dark);
}
.sf-shelftabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto clamp(30px, 4vw, 48px);
}
.sf-c.sf-c button.sf-shelftab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(130, 102, 44, 0.35);
  background: rgba(255, 253, 248, 0.7);
  font-family: var(--sf-ui);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #1b1a17;
  -webkit-text-fill-color: #1b1a17;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.sf-c.sf-c button.sf-shelftab:hover { border-color: var(--sf-plum); }
.sf-c.sf-c button.sf-shelftab[aria-selected="true"] {
  background: var(--sf-plum);
  border-color: var(--sf-plum);
  color: var(--sf-cream);
  -webkit-text-fill-color: var(--sf-cream);
}
.sf-shelftab__swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 33px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(40, 25, 5, 0.3);
}
.sf-shelftab__swatch picture { display: contents; }
.sf-shelftab__swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-shelftabs__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 40px); max-width: 980px; margin: 0 auto; }
.sf-shelftabs__panel[hidden] { display: none; }
.sf-shelftabs__panel:not([hidden]) { animation: sf-shelf-in 0.45s ease both; }
@keyframes sf-shelf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sf-c .sf-shelf__books--six {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 38px);
  padding-inline: clamp(8px, 2.4vw, 32px);
}
.sf-c .sf-shelftabs__more { margin: 0; text-align: center; }

/* D. Cubbies: a bookcase of covers */
.sf-cubbies {
  --gap: clamp(16px, 2vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(34px, 4vw, 48px) var(--gap);
}
.sf-cubbies > li { flex: 0 1 calc((100% - 3 * var(--gap)) / 4); margin: 0; }
.sf-c.sf-c a.sf-cubby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: #1b1a17;
  -webkit-text-fill-color: #1b1a17;
}
.sf-cubby__box {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  margin-bottom: 14px;
  padding: 0 6% var(--sf-ledge-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(232, 200, 126, 0.8), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(232, 200, 126, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 38%, rgba(245, 238, 225, 0.55), transparent 60%),
    radial-gradient(1px 1px at 36% 9%, rgba(245, 238, 225, 0.5), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #1d2849 0%, var(--sf-midnight) 58%, #0a0f1f 100%);
  border: 1px solid rgba(201, 162, 75, 0.6);
  outline: 1px solid rgba(201, 162, 75, 0.2);
  outline-offset: 5px;
  transition: outline-color 0.3s;
}
.sf-cubby__box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sf-ledge-h);
  background: linear-gradient(180deg, #f1e2c0 0, #d6b67a 22%, #b8904f 70%, #9c7639 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}
.sf-cubby__book {
  --r: 0deg;
  --y: 0px;
  --x: 0px;
  position: relative;
  z-index: 3;
  flex: 0 0 35%;
  margin: 0 -10%;
  transform: translateY(var(--y)) rotate(var(--r));
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sf-cubby__book picture { display: contents; }
.sf-cubby__book img { display: block; width: 100%; height: auto; box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.65); }
.sf-cubby__book:nth-child(1) { --r: -10deg; --y: 6px; --x: -18px; z-index: 1; }
.sf-cubby__book:nth-child(2) { --r: -5deg; --y: 2px; --x: -9px; z-index: 2; }
.sf-cubby__book:nth-child(4) { --r: 5deg; --y: 2px; --x: 9px; z-index: 2; }
.sf-cubby__book:nth-child(5) { --r: 10deg; --y: 6px; --x: 18px; z-index: 1; }
.sf-c.sf-c a.sf-cubby:hover .sf-cubby__book,
.sf-c.sf-c a.sf-cubby:focus-visible .sf-cubby__book { transform: translate(var(--x), -8px) rotate(calc(var(--r) * 0.5)); }
.sf-c.sf-c a.sf-cubby:hover .sf-cubby__box { outline-color: rgba(201, 162, 75, 0.6); }
.sf-c .sf-cubby__name {
  font-family: var(--sf-display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.1;
  color: var(--sf-plum);
  -webkit-text-fill-color: var(--sf-plum);
}
.sf-c .sf-cubby__count {
  font-family: var(--sf-ui);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-gold-dark);
  -webkit-text-fill-color: var(--sf-gold-dark);
}

@media (max-width: 1000px) {
  .sf-c .sf-shelf__books--fit {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 12px;
  }
  .sf-c .sf-shelf__books--fit::-webkit-scrollbar { display: none; }
  .sf-c .sf-shelf__books--fit > li { flex: 0 0 96px; }
  .sf-cubbies > li { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

@media (max-width: 780px) {
  .sf-c .sf-shelf__books--stack {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sf-c .sf-shelf__books--stack::-webkit-scrollbar { display: none; }
  .sf-c .sf-shelf__books--stack > li { width: 33vw; margin-right: -8vw; }
  .sf-shelftabs__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sf-pad));
    padding: 2px var(--sf-pad) 6px;
  }
  .sf-shelftabs__list::-webkit-scrollbar { display: none; }
  .sf-c .sf-shelf__books--six {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 0;
    gap: 14px;
  }
  .sf-c .sf-shelf__books--six::-webkit-scrollbar { display: none; }
  .sf-c .sf-shelf__books--six > li { flex: 0 0 29%; }
  .sf-shelf__nav { display: none !important; }
  .sf-c .sf-shelf__books--scroll > li { flex-basis: 34%; }
}

@media (max-width: 600px) {
  .sf-cubbies > li { flex-basis: calc((100% - var(--gap)) / 2); }
  .sf-c .sf-shelf__books--fit > li { flex-basis: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-shelftabs__panel:not([hidden]) { animation: none; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .sf-c-hero__inner { grid-template-columns: 1fr; }
  .sf-c-hero__stage { order: -1; max-width: 460px; margin-bottom: 8px; }
  .sf-c-astro__grid { grid-template-columns: 1fr; }
  .sf-c-astro__arch { max-width: 380px; margin-inline: auto; }
  .sf-month { grid-template-columns: 1fr; }
  .sf-month__rx { grid-column: 1; }
}

@media (max-width: 780px) {
  .sf-c-inside__grid { grid-template-columns: 1fr; }
  .sf-c--hero { min-height: 0; padding-top: clamp(96px, 20vh, 140px); }
  .sf-c-hero__cue { display: none; }
  .sf-c-year__sky { height: 100svh; }
  .sf-glyphs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-glyph__name { font-size: 17px; }
  .sf-card__actions { flex-wrap: wrap; }
}

/* ----------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .sf-c *,
  .sf-c *::before,
  .sf-c *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sf-c-hero__cue span { animation: none; }
  .sf-c-promise__flames * { animation: none !important; }
  .sf-reveal.is-armed { opacity: 1; transform: none; }
  [data-sf-words].is-armed .sf-w > i { transform: none; }
  .sf-fox.is-armed .sf-fox__line,
  .sf-fox.is-armed:not(.is-in) .sf-fox__line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .sf-fox.is-armed .sf-fox__star,
  .sf-fox.is-armed:not(.is-in) .sf-fox__star { opacity: 1; }
  [data-sf-words].is-armed .sf-w > i,
  [data-sf-words].is-in .sf-w > i { transform: none; transition: none; }
  .sf-rule i { transform: scaleX(1); }
  .sf-c-year__rail i { transform: scaleY(1); }
  .sf-c-year__plate[data-season="winter"] { opacity: 1; }
  .sf-month__name { color: var(--sf-cream); }
  .sf-month__node { background: var(--sf-gold); }
  .sf-wheel__rot { transform: none; }
  .sf-wheel__deg,
  .sf-wheel__glyph { transform: none; }
  .sf-marquee__track { transform: none; }
}

/* Homepage "Shop by her star sign" band (18 Sep 2026): the finder's cream ground, twelve linked glyphs. */
.sf-c--homesigns { padding: clamp(64px, 9vw, 120px) 0 clamp(64px, 9vw, 120px); }
.sf-c--homesigns .sf-glyphs { margin-top: clamp(28px, 4vw, 48px); }
/* The shop's twelve signs are links now (18 Sep 2026), styled exactly as the buttons were. */
.sf-c.sf-c a.sf-glyph { width: 100%; min-height: 44px; text-align: center; box-sizing: border-box; }

/* ======================================================================
   Phone layout from "Front Page Design.xlsx" (22 Oct 2026). Desktop and
   tablet are untouched: everything here sits under max-width 767px, which
   is Elementor's mobile cut-off.
   ====================================================================== */
.sf-c-shelves__choose,
.sf-c-shelves__colours,
.sf-c-shelves__carousels { display: none; }

@media (max-width: 767px) {
  /* Hero: the shop button only. */
  .elementor-element-29a31e3 { display: none; }

  /* Finder: the twelve signs first, then the question and the birthday box. */
  .sf-c.sf-c--finder[data-sf-band="finder"] { display: flex; flex-direction: column; padding-top: 36px; padding-bottom: 40px; }
  .sf-c--finder[data-sf-band="finder"] > .sf-wrap { width: 100%; }
  .sf-c--finder[data-sf-band="finder"] .sf-c-finder__signs { order: -1; }
  /* The band now opens with this line, so it reads as a heading-sized prompt (Sam, 22 Oct 2026). */
  .sf-c--finder[data-sf-band="finder"] .sf-c-finder__signs .sf-c-finder__picker { margin: 0 0 18px; font-size: 22px; color: rgba(27, 26, 23, 0.8); }
  .sf-c--finder[data-sf-band="finder"] .sf-c-finder__head { margin-top: 56px; }
  .sf-c--finder[data-sf-band="finder"] .sf-c-finder__head .sf-lede { display: none; }


  /* Diaries: closer to the birthday box, then the heading, "Choose your colour",
     and the shop page's colour rows. */
  .sf-c.sf-c--shelves { padding-top: 40px; }
  .sf-c--shelves .sf-c-shop__head { margin-bottom: 28px; }
  .sf-c--shelves .sf-c-shop__head > .sf-eyebrow:first-child,
  .sf-c--shelves .sf-c-shop__head > .sf-lede,
  .sf-c--shelves .sf-shelves { display: none; }
  .sf-c--shelves .sf-c-shelves__choose { display: block; margin: 14px 0 14px; }
  .sf-c--shelves .sf-c-shelves__carousels { display: block; }

  /* The colour grid: swatch and name, four across. Tapping one shows that row only. */
  .sf-c--shelves .sf-c-shelves__colours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; }
  .sf-c.sf-c .sf-c-shelves__colour {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 10px 4px 9px; margin: 0; min-height: 44px;
    background: rgba(255, 253, 248, 0.66); border: 1px solid rgba(107, 44, 67, 0.18); border-radius: 0;
    color: #1b1a17; -webkit-text-fill-color: #1b1a17; font: 500 12px/1.2 var(--sf-ui); letter-spacing: 0; text-transform: none;
    cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
  }
  .sf-c.sf-c .sf-c-shelves__colour.is-active { border-color: var(--sf-plum); background: #fffdf8; box-shadow: inset 0 0 0 1px var(--sf-plum); }
  .sf-c .sf-c-shelves__swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 1px solid rgba(27, 26, 23, 0.14); }
  .sf-c .sf-c-shelves__colour-name { text-align: center; }
  .sf-c-shelves__carousels[data-sf-picked] .sf-carousel { display: none; }
  .sf-c-shelves__carousels[data-sf-picked] .sf-carousel.is-active { display: block; }
  /* Phone: no side swipe. The picked colour's twelve diaries stack two across, flowing down (27 Oct 2026). */
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
    overflow: visible !important; scroll-snap-type: none; padding: 8px 2px 8px !important;
  }
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track::before,
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track::after { content: none !important; display: none !important; }
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track > li.product { flex: none !important; width: auto !important; min-width: 0; }
  .sf-c--shelves .sf-carousel__viewport::before,
  .sf-c--shelves .sf-carousel__viewport::after { display: none; }
  .sf-c--shelves .sf-carousel__nav,
  .sf-c--shelves .sf-carousel__hint,
  .sf-c--shelves .sf-carousel__dots { display: none !important; }
  /* No colour tag under the diary name; the colour is already picked above (27 Oct 2026). */
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track > li.product .sf-edition { display: none !important; }
  /* Every title is given two lines of space, so the price and button sit at the same height on both
     cards in a row whether the sign name wraps or not (27 Oct 2026). */
  /* max-width 8em makes every sign name wrap to exactly two lines (checked 360 to 430px), so the
     cover, name, price and button sit at the same height on every card. */
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track > li.product .woocommerce-loop-product__title { -webkit-line-clamp: unset; min-height: 2.5em; max-width: 8em; margin-left: auto !important; margin-right: auto !important; overflow: visible; display: flex; align-items: flex-end; justify-content: center; }
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track > li.product { display: flex; flex-direction: column; }
  .sf-c--shelves .sf-carousels ul.products.sf-carousel__track > li.product .woocommerce-loop-product__link { flex: 1 1 auto; }
}

/* ------------------------------------------------------- sign colours, all widths */
/* 27 Oct 2026: the per-sign tints used on phones now apply on desktop too. Moved out of the
   phone media query below the finder band. */
/* Each sign in its own colour. Every ink passes 4.5:1 on its own ground. */
.sf-c--finder[data-sf-band="finder"] [data-sign="aries"]       { --sg-bg: #F6D5CC; --sg-ink: #9C3520; }
.sf-c--finder[data-sf-band="finder"] [data-sign="taurus"]      { --sg-bg: #DCE8D2; --sg-ink: #46643A; }
.sf-c--finder[data-sf-band="finder"] [data-sign="gemini"]      { --sg-bg: #F6EAC2; --sg-ink: #7A5C0E; }
.sf-c--finder[data-sf-band="finder"] [data-sign="cancer"]      { --sg-bg: #D8E6EF; --sg-ink: #33607C; }
.sf-c--finder[data-sf-band="finder"] [data-sign="leo"]         { --sg-bg: #F8DDB8; --sg-ink: #8E5210; }
.sf-c--finder[data-sf-band="finder"] [data-sign="virgo"]       { --sg-bg: #E6E3CF; --sg-ink: #5C5636; }
.sf-c--finder[data-sf-band="finder"] [data-sign="libra"]       { --sg-bg: #F4D6E2; --sg-ink: #8E3559; }
.sf-c--finder[data-sf-band="finder"] [data-sign="scorpio"]     { --sg-bg: #E8D3DA; --sg-ink: #6B2C43; }
.sf-c--finder[data-sf-band="finder"] [data-sign="sagittarius"] { --sg-bg: #E6D7F0; --sg-ink: #5F3784; }
.sf-c--finder[data-sf-band="finder"] [data-sign="capricorn"]   { --sg-bg: #DCD9D2; --sg-ink: #47423B; }
.sf-c--finder[data-sf-band="finder"] [data-sign="aquarius"]    { --sg-bg: #CFE7EA; --sg-ink: #24646F; }
.sf-c--finder[data-sf-band="finder"] [data-sign="pisces"]      { --sg-bg: #D6DDF2; --sg-ink: #3E5091; }
.sf-c.sf-c.sf-c--finder[data-sf-band="finder"] a.sf-glyph[data-sign],
.sf-c.sf-c.sf-c--finder[data-sf-band="finder"] a.sf-glyph[data-sign]:hover { background: var(--sg-bg); }
.sf-c.sf-c.sf-c--finder[data-sf-band="finder"] a.sf-glyph[data-sign] .sf-glyph__mark,
.sf-c.sf-c.sf-c--finder[data-sf-band="finder"] a.sf-glyph[data-sign] .sf-glyph__name { color: var(--sg-ink); -webkit-text-fill-color: var(--sg-ink); }
.sf-c.sf-c.sf-c--finder[data-sf-band="finder"] a.sf-glyph[data-sign] .sf-glyph__dates { color: #3a3833; -webkit-text-fill-color: #3a3833; }