/* MenstruatieKalender design system, prototype v2.
   Mobile first. Every value comes from the token scales below.
   Night = the sky (moon, ring, the answer). Paper = everything else.
   Orchid (#CC98CA, the 2012 site's colour) is the brand thread: the dusk glow,
   the eyebrows on night, the luteal phase and callouts on paper (as orchid-deep). */

/* ---------- Fonts (self-hosted, SIL Open Font Licence) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-normal-latin-d9fd39a1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-normal-latin-ext-8069e2da.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-latin-340fb213.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-normal-latin-ce5692a4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-italic-latin-ecb0104b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* paper surfaces: a warm off-white with the faintest blush, the 2012 site's memory */
  --paper: #FCF8F6;
  --paper-2: #F5EEEC;
  --paper-3: #ECE2E1;
  --line: #DED1D3;
  --line-strong: #8E7F93;
  /* ink */
  --ink: #241C2B;
  --ink-2: #5B5063;
  --ink-3: #776B7F;
  /* night surfaces */
  --night: #19122E;
  --night-2: #261C47;
  --night-3: #3A2C66;
  --moon: #F3E9D6;
  --moon-dim: #BBB0CF;
  /* orchid: the brand thread (text on night, glow, luteal and callouts on paper as orchid-deep) */
  --orchid: #CC98CA;
  --orchid-deep: #7E4A7C;
  --orchid-soft: #F3E6F2;
  /* the bead in the mark ("today"): the one touch of colour in the logo. Deep on paper, light on the night. */
  --brand-bead: var(--orchid-deep);
  --brand-gap: var(--paper);
  /* the one action colour: ink on paper, moon on night */
  --action: var(--ink);
  --action-hover: var(--night-3);
  --on-action: var(--paper);
  /* meaning colours, never decorative */
  --berry: #9E2A4F;       /* menstruation */
  --berry-soft: #F4DCE3;
  --amber: #8A5A00;       /* fertile days, text */
  --amber-fill: #F0C05A;  /* fertile days, fill */
  --amber-soft: #FBEEC9;
  --plum: var(--orchid-deep);   /* luteal phase, callouts (v1 name kept for the article pages) */
  --plum-soft: var(--orchid-soft);
  --sage: #3F6B4A;        /* reviewed, trust */
  --sage-soft: #DDEAD9;

  /* spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* type scale (fluid where it matters) */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-display: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --t-h1: clamp(2rem, 1.55rem + 2vw, 3rem);
  --t-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-h3: 1.25rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;
  --t-num: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

  /* radii */
  --r-1: 0.375rem;
  --r-2: 0.75rem;
  --r-3: 1.25rem;
  --r-full: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(36, 28, 43, 0.06), 0 8px 24px rgba(36, 28, 43, 0.06);
  --shadow-2: 0 2px 4px rgba(36, 28, 43, 0.08), 0 20px 48px rgba(36, 28, 43, 0.12);
  --shadow-night: 0 2px 4px rgba(0, 0, 0, 0.2), 0 24px 56px rgba(0, 0, 0, 0.35);

  /* motion */
  --d-fast: 150ms;
  --d-base: 250ms;
  --d-fade: 350ms; /* reduced motion: what would draw or travel fades in where it is */
  --d-slow: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-even: cubic-bezier(0.45, 0, 0.55, 1); /* the answer arriving: spread evenly, not over in its first tenth */
  --ease-moon: cubic-bezier(0.16, 1, 0.3, 1); /* light arriving: there at once, settling slowly (cycle.js EASE.moon) */
  --d-bloom: 900ms; /* a light that blooms once and settles: a ring where something arrived, a glow fading */

  --measure: 64ch;
  --container: 72rem;
  --gutter: var(--s-4);
}
@media (min-width: 40rem) {
  :root { --gutter: var(--s-6); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orchid-deep); outline-offset: 3px; border-radius: var(--r-1); }
.night :focus-visible { outline-color: var(--amber-fill); }
::selection { background: var(--amber-fill); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -3rem; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-1); z-index: 50; }
.skip:focus { top: var(--s-4); }
[hidden] { display: none !important; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3 { font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
.display { font-family: var(--font-display); font-size: var(--t-display); line-height: 1.04; font-variation-settings: "SOFT" 60, "WONK" 0; font-optical-sizing: auto; }
.h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: 1.08; font-variation-settings: "SOFT" 50; font-optical-sizing: auto; }
.h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.15; font-variation-settings: "SOFT" 40; font-optical-sizing: auto; }
.h3 { font-family: var(--font-body); font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--t-small); }
.micro, .eyebrow { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow { color: var(--ink-3); }
.night .eyebrow { color: var(--orchid); }
.muted { color: var(--ink-2); }
.night .muted { color: var(--moon-dim); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose p { text-wrap: pretty; }
.num { font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 80; font-variant-numeric: lining-nums; letter-spacing: -0.02em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 46rem; }
/* one rhythm between sections: 32 on phones, 48 on wide screens; stacked sections drop their top padding inline */
.section { padding-block: var(--s-6); }
@media (min-width: 64rem) { .section { padding-block: var(--s-7); } }
.section-head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.section-head .h2 { max-width: 24ch; }
.stack > * + * { margin-top: var(--s-4); }
.stack-s > * + * { margin-top: var(--s-2); }
.stack-l > * + * { margin-top: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.grid-3 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.grid-4 { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.brand svg { width: 1.75rem; height: 1.75rem; flex: none; }
.brand .bead { fill: var(--brand-bead); }
.brand .gap { fill: var(--brand-gap); }
.night { --brand-bead: var(--orchid); --brand-gap: var(--night); }
.site-footer { --brand-gap: var(--paper-2); }
.brand .wordmark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100, "opsz" 72; line-height: 1; }
.brand .wordmark b { font-weight: 650; }
.nav { display: none; align-items: center; gap: var(--s-5); }
.nav a { text-decoration: none; font-weight: 500; color: var(--ink-2); padding: var(--s-2) 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--orchid-deep); }
.nav .nav-login { color: var(--ink-3); }
.menu { display: block; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--paper-2); }
.menu-panel { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 14rem; padding: var(--s-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-2); z-index: 40; }
.menu-panel a { display: block; padding: var(--s-3) var(--s-3); border-radius: var(--r-1); text-decoration: none; font-weight: 500; }
.menu-panel a:hover { background: var(--paper-2); }
.menu-panel a[aria-current="page"] { color: var(--orchid-deep); }
@media (min-width: 64rem) { .nav { display: flex; } .menu { display: none; } }

/* ---------- Ad slots: reserved, labelled, never content ---------- */
.ad { display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.ad-label { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: var(--s-1) 0; line-height: 1rem; }
.ad-box { width: 100%; border: 1px dashed var(--line-strong); border-radius: var(--r-1); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(36, 28, 43, 0.03) 10px 20px); display: grid; place-items: center; color: var(--ink-2); font-size: var(--t-small); }
.ad-top { padding-block: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.ad-top .ad-box { width: 320px; height: 100px; }
@media (min-width: 48rem) { .ad-top .ad-box { width: 728px; height: 90px; } }
.ad-rect .ad-box { width: 300px; height: 250px; }
@media (min-width: 40rem) { .ad-rect .ad-box { width: 336px; height: 280px; } }
.ad-inline { margin-block: var(--s-6); padding-block: var(--s-4); border-block: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3rem; padding: 0 var(--s-5); border-radius: var(--r-full); border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
/* the main actions answer a press with a pass of moonlight across them, under the words (site.js) */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary.is-lit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%); transform: translateX(-100%); animation: sheen 700ms var(--ease-even) forwards; pointer-events: none; }
@keyframes sheen { to { transform: translateX(100%); } }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--paper-2); }
.btn-quiet { background: transparent; color: var(--ink-2); padding-inline: var(--s-3); }
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); }
.night .btn-primary { background: var(--moon); color: var(--night); }
.night .btn-primary:hover { background: #fff; }
.night .btn-secondary { color: var(--moon); border-color: rgba(243, 233, 214, 0.35); }
.night .btn-secondary:hover { background: rgba(243, 233, 214, 0.08); }
.night .btn-quiet { color: var(--moon-dim); }
.night .btn-quiet:hover { background: rgba(243, 233, 214, 0.08); color: var(--moon); }
.btn-block { width: 100%; }
.btn-sm { min-height: 2.5rem; padding-inline: var(--s-4); font-size: var(--t-small); }
.btn svg { width: 1.125rem; height: 1.125rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label, .field .label { font-weight: 600; }
.field .hint { font-size: var(--t-small); color: var(--ink-2); }
.input { width: 100%; min-height: 3rem; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: #fff; color: var(--ink); transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.input:focus { outline: none; border-color: var(--orchid-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orchid-deep) 25%, transparent); }
.input[type="date"] { appearance: none; -webkit-appearance: none; }
.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: #fff; overflow: hidden; }
.stepper button { min-height: 3rem; border: 0; background: var(--paper-2); color: var(--ink); font-size: 1.25rem; cursor: pointer; }
.stepper button:hover { background: var(--paper-3); }
.stepper input { border: 0; text-align: center; min-height: 3rem; font-weight: 600; font-size: 1.125rem; -moz-appearance: textfield; width: 100%; background: transparent; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stepper:focus-within { border-color: var(--orchid-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orchid-deep) 25%, transparent); }
.form-row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--orchid-deep); flex: none; }
.disclosure summary { cursor: pointer; font-weight: 600; color: var(--orchid-deep); list-style: none; display: inline-flex; gap: var(--s-2); align-items: center; min-height: 2.75rem; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid currentColor; font-weight: 600; }
.disclosure[open] summary::before { content: "\2212"; }
.disclosure .disclosure-body { margin-top: var(--s-3); }
.field-group { display: grid; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.field-group .label { font-weight: 600; }
.field-group .hint { font-size: var(--t-small); color: var(--ink-2); }
.field-error { color: var(--berry); font-weight: 600; font-size: var(--t-small); }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow-1); }
.card-soft { background: var(--paper-2); border: 0; box-shadow: none; }

/* ---------- Pills / badges / dots ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.2rem var(--s-3); border-radius: var(--r-full); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.pill svg { width: 0.875rem; height: 0.875rem; }
.pill-berry { background: var(--berry-soft); color: var(--berry); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-plum { background: var(--orchid-soft); color: var(--orchid-deep); }
.pill-sage { background: var(--sage-soft); color: var(--sage); }
.pill-paper { background: var(--paper-2); color: var(--ink-2); }
.dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; flex: none; }
.dot-berry { background: var(--berry); }
.dot-amber { background: var(--amber-fill); }
.dot-amber-2 { background: color-mix(in srgb, var(--amber-fill) 62%, transparent); }
.dot-amber-1 { background: color-mix(in srgb, var(--amber-fill) 32%, transparent); }
.dot-ov { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
.dot-today { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.dot-maybe { background: transparent; outline: 2px dashed var(--berry); outline-offset: -2px; }
.dot-moon { background: var(--moon); }
.dot-plum { background: var(--orchid-deep); }

/* ---------- The sky: hero ---------- */
.night { background: var(--night); color: var(--moon); }
.sky {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(243, 233, 214, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 12%, rgba(243, 233, 214, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 68%, rgba(243, 233, 214, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 84%, rgba(243, 233, 214, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 44%, rgba(243, 233, 214, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 8%, rgba(243, 233, 214, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 56%, rgba(243, 233, 214, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 92%, rgba(243, 233, 214, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 40%, rgba(243, 233, 214, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 70%, rgba(204, 152, 202, 0.5) 50%, transparent 51%),
    /* the dusk: orchid over a warm horizon, the 2012 moon-phases picture modernised */
    radial-gradient(70rem 26rem at 50% 118%, rgba(240, 192, 90, 0.16) 0%, transparent 55%),
    radial-gradient(90rem 40rem at 50% 115%, rgba(204, 152, 202, 0.32) 0%, transparent 62%),
    var(--night);
}
/* The hero is one column on phones (question, form, answer, instrument) and two aligned columns from 64rem:
   the copy, the form and the answer on the left; the instrument on the right, spanning all three rows.
   Both columns start on the same line (an eyebrow each). The form row is the flexible one: once she has an
   answer it sits on the instrument's bottom line; before that the form follows the question and the sky
   below it is left alone. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); padding-block: var(--s-4) var(--s-6); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-3); }
.hero-copy .lead { color: var(--moon-dim); }
.hero .lead-phone { display: none; }
@media (max-width: 39.99rem) {
  .hero { padding-top: var(--s-3); row-gap: var(--s-4); }
  .hero-copy .lead { display: none; }
  .hero .lead-phone { display: block; }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--s-8); row-gap: var(--s-5); padding-block: var(--s-7); align-items: start; }
  .hero-copy { grid-column: 1; grid-row: 1; gap: var(--s-4); }
  .hero-form { grid-column: 1; grid-row: 2; align-self: start; }
  .answer { grid-column: 1; grid-row: 3; }
  .instrument { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }
}

/* ---------- The instrument: her cycle and the real moon, one selected day ---------- */
.instrument { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.inst-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--s-4); min-height: 2.75rem; }
/* the moon floats in whatever room the column has: extra space reads as sky, never as a gap */
.inst-stage { flex: 1; display: grid; place-items: center; }
.stage { position: relative; width: min(100%, 17rem); aspect-ratio: 1; flex: none; user-select: none; -webkit-user-select: none; }
@media (min-width: 40rem) { .stage { width: min(100%, 20rem); } }
@media (min-width: 64rem) { .stage { width: min(100%, 26rem); } }
/* the ring is the slider: its band takes the pointer and keeps the page from scrolling under a drag; the
   corners of its box let touches through to the page */
.stage .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; touch-action: none; }
.stage .moon { position: absolute; inset: 22%; border-radius: 50%; }
.moon-poster, .moon-3d { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.moon-3d { opacity: 0; transition: opacity var(--d-slow) var(--ease); cursor: grab; }
.moon-3d.is-turning { cursor: grabbing; }
.moon-3d.is-ready { opacity: 1; }
.moon-3d.is-ready + .moon-poster { opacity: 0; pointer-events: none; transition: opacity var(--d-slow) var(--ease); }
/* one caption: the day, in both rhythms */
.inst-caption { text-align: center; color: var(--moon-dim); font-size: var(--t-small); line-height: 1.4; max-width: 44ch; margin-inline: auto; text-wrap: balance; min-height: 3lh; }
/* the caption and the moon's place in the sky keep three lines of room and the distance note two, so the chips
   under her thumb (and on a wide screen the ring itself) stay where they are while the sweep or a chip changes the
   day: each runs one line shorter or longer from day to day */
.moon-stats .wide dd.sub { min-height: 2lh; }
.inst-stand { min-height: 3lh; }
.inst-caption strong { color: var(--moon); font-weight: 600; }
.inst-caption .sep { color: var(--orchid); }
.inst-hint { text-align: center; font-size: var(--t-micro); color: var(--moon-dim); max-width: 40ch; margin-inline: auto; min-height: 1.3em; text-wrap: pretty; }
/* the chips jump the selected day; the pressed one is where she is */
.inst-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.night .chip { min-height: 2.75rem; background: transparent; color: var(--moon); border-color: rgba(243, 233, 214, 0.35); font-weight: 500; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.night .chip:hover { border-color: var(--moon); background: rgba(243, 233, 214, 0.08); }
.night .chip[aria-pressed="true"] { color: var(--night); border-color: var(--moon); font-weight: 600; }
/* the chosen view: its fill blooms out from the middle of the chip, under her finger */
.night .chip { position: relative; isolation: isolate; overflow: hidden; }
.night .chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--moon); opacity: 0; transform: scale(0.35); z-index: -1; transition: transform var(--d-slow) var(--ease-moon), opacity var(--d-base) var(--ease); }
.night .chip[aria-pressed="true"]::before { opacity: 1; transform: none; }
/* the cities: quiet text toggles in the head, the chosen one underlined in orchid */
.cities { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); border: 0; padding: 0; margin: 0; min-width: 0; font-size: var(--t-small); }
.city { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--moon-dim); cursor: pointer; font-weight: 500; }
.city input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.city span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.25em; border-radius: var(--r-1); transition: color var(--d-fast) var(--ease), text-decoration-color var(--d-fast) var(--ease); }
.city:hover span { color: var(--moon); }
.city:has(input:checked) span { color: var(--moon); font-weight: 600; }
/* the chosen city: its line draws out from the middle under the name */
.city span { position: relative; }
.city span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.3em; height: 2px; border-radius: 1px; background: var(--orchid); transform: scaleX(0); transition: transform var(--d-slow) var(--ease-moon); }
.city:has(input:checked) span::after { transform: none; }
.city:has(input:focus-visible) span { outline: 3px solid var(--amber-fill); outline-offset: 3px; }
/* the numbers: two across on phones (every label and value on one line), four across from 40rem */
.moon-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin: 0; }
@media (min-width: 40rem) { .moon-stats { grid-template-columns: repeat(4, 1fr); } }
.moon-stats > div { display: grid; gap: 1px; align-content: start; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: rgba(243, 233, 214, 0.06); border: 1px solid rgba(243, 233, 214, 0.1); min-width: 0; }
.moon-stats .wide { grid-column: span 2; }
.moon-stats dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orchid); display: flex; gap: var(--s-2); align-items: center; white-space: nowrap; }
.moon-stats dd { font-size: 1rem; font-weight: 600; color: var(--moon); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.moon-stats dd.sub { font-size: var(--t-micro); font-weight: 400; color: var(--moon-dim); text-wrap: pretty; }
.badge { font-size: 0.625rem; line-height: 1.4; padding: 0.05rem 0.45rem; border-radius: var(--r-full); background: var(--amber-fill); color: var(--ink); letter-spacing: 0.04em; }
.inst-stand { text-align: center; color: var(--moon-dim); font-size: var(--t-micro); text-wrap: pretty; max-width: 48ch; margin-inline: auto; }
.inst-rhythm { text-align: center; font-size: var(--t-micro); color: var(--moon-dim); max-width: 48ch; margin-inline: auto; padding-top: var(--s-3); border-top: 1px solid rgba(243, 233, 214, 0.12); text-wrap: pretty; }
.inst-rhythm a { color: var(--moon); font-weight: 600; }

/* ring parts */
.ring .ring-hit { fill: none; stroke: transparent; stroke-width: 76; pointer-events: stroke; }
.ring .ring-base { fill: none; stroke: var(--night-3); stroke-width: 10; }
.ring .ring-ticks { fill: none; stroke: rgba(204, 152, 202, 0.45); stroke-width: 1.5; }
.ring .ring-seg { fill: none; stroke-width: 10; stroke-linecap: butt; }
.ring .seg-period { stroke: var(--berry); }
.ring .seg-fertile { stroke: var(--amber-fill); }
.ring .wedge { fill: var(--amber-fill); }
.ring .seg-ovulation { fill: var(--amber-fill); stroke: var(--night); stroke-width: 1.5; }
.ring .ring-label { fill: var(--moon-dim); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.ring .ring-label.is-start { fill: var(--moon); }
.ring .ring-label.is-minor { display: none; }
@media (min-width: 64rem) { .ring .ring-label.is-minor { display: block; fill: color-mix(in srgb, var(--moon-dim) 70%, transparent); font-weight: 500; } }
/* the moons of this cycle, on the band: full as a lit disc, new as a dark one */
.ring .ring-moon circle { stroke: var(--night); stroke-width: 1.5; pointer-events: auto; }
.ring .ring-moon-full circle { fill: var(--moon); }
.ring .ring-moon-new circle { fill: var(--night-2); stroke: var(--moon-dim); }
/* today: a quiet outline with a halo, which stays put while the bead travels */
.ring .ring-today-halo { fill: var(--moon); opacity: 0.16; }
.ring .ring-today { fill: var(--night); stroke: var(--moon); stroke-width: 2.5; }
/* the bead: the selected day, in the brand's orchid, turning about the centre */
.ring .ring-bead { pointer-events: auto; cursor: grab; outline: none; transform-box: view-box; transform-origin: 200px 200px; transition: transform var(--d-base) var(--ease); }
.ring.is-dragging .ring-bead { transition: none; cursor: grabbing; }
.ring .ring-bead-halo { fill: var(--orchid); opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.ring .ring-bead-dot { fill: var(--orchid); stroke: var(--night); stroke-width: 3; }
.ring.is-dragging .ring-bead-halo, .ring .ring-bead:focus-visible .ring-bead-halo { opacity: 0.28; }
.ring .ring-bead:focus-visible .ring-bead-dot { stroke: var(--amber-fill); stroke-width: 4; }
/* the moon's path: when the bead travels, a light runs along the days it passes (cycle.js draws it with the bead,
   then fades it), a soft band and a bright line in it; the bead carries its halo and rings once where it lands */
.ring .ring-trail { pointer-events: none; }
.ring .trail-glow, .ring .trail-core { fill: none; stroke: var(--moon); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.ring .trail-glow { stroke-width: 18; stroke-opacity: 0.16; }
.ring .trail-core { stroke-width: 3; stroke-opacity: 0.9; }
.ring.is-gliding .ring-bead { transition: none; }
.ring.is-gliding .ring-bead-halo { opacity: 0.32; }
.ring .ring-bead-ripple { fill: none; stroke: var(--moon); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* the moon while the days pass: a little closer and lit, then back as it was once it has reached today */
.stage .moon { transition: transform var(--d-bloom) var(--ease-even); }
.stage .moon::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 233, 214, 0.3), rgba(243, 233, 214, 0.09) 60%, transparent); opacity: 0; transition: opacity var(--d-bloom) var(--ease-even); pointer-events: none; }
.stage.is-sweeping .moon { transform: scale(1.045); transition-duration: var(--d-slow); }
.stage.is-sweeping .moon::before { opacity: 1; transition-duration: var(--d-slow); }
/* her cycle drawing itself in, in cycle order (cycle.js sets --at and --for per arc; every arc has pathLength 1, so
   it draws over its whole time): the period arc, then the fertile days as one stroke, then the ovulation dot */
.ring.is-drawing .ring-seg { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-draw var(--for, 750ms) linear var(--at, 0ms) forwards; }
.ring.is-drawing .seg-period { animation-timing-function: var(--ease-even); }
.ring.is-drawing .wedge { opacity: 0; transform-box: view-box; transform-origin: 200px 200px; animation: wedge-in var(--d-slow) var(--ease-moon) var(--at, 0ms) forwards; }
.ring.is-drawing .seg-ovulation { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-in var(--d-base) var(--ease-even) var(--at, 0ms) forwards; }
@keyframes dot-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
/* ovulation blooms once, a ring of light from the dot: the day her chance is highest; then the moon's own marks */
.ring .ov-ripple { fill: none; stroke: var(--amber-fill); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.ring.is-drawing .ov-ripple { animation: ov-ripple var(--d-bloom) var(--ease-moon) var(--at, 0ms) forwards; }
@keyframes ov-ripple { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
.ring.is-drawing .ring-moon { opacity: 0; animation: fade-in var(--d-slow) var(--ease-even) var(--at, 0ms) forwards; }
/* waiting to draw (not on screen yet): exactly where the drawing starts, so it never shows her arcs and takes them away */
.ring.is-waiting .ring-seg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ring.is-waiting .wedge, .ring.is-waiting .seg-ovulation, .ring.is-waiting .ring-moon { opacity: 0; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
/* the fertile window opens outward from the moon to the ring as its days draw */
@keyframes wedge-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

/* the form card on the night: paper, so the first thing she needs is the brightest thing after the moon */
.hero-form { display: grid; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-3); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-night); }
@media (min-width: 40rem) { .hero-form { padding: var(--s-5); } }
.hero-form .input { background: #fff; color: var(--ink); border-color: var(--line-strong); color-scheme: light; }
.hero-form .input:focus { border-color: var(--orchid-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orchid-deep) 25%, transparent); }
.hero-form :focus-visible { outline-color: var(--orchid-deep); }
.hero-form .eyebrow { color: var(--ink-3); }
.hero-form .hint { color: var(--ink-2); }
.hero-form .btn-primary { background: var(--action); color: var(--on-action); }
.hero-form .btn-primary:hover { background: var(--action-hover); }
.hero-form .free { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-2); text-align: center; }
.hero-form .free svg { width: 1rem; height: 1rem; flex: none; color: var(--sage); }
.hero-form .check { font-size: var(--t-small); color: var(--ink-2); }
.saved { display: grid; gap: var(--s-2); }
.saved:not(.is-saved) > summary { display: none; }
.saved summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 2.75rem; font-weight: 500; }
.saved summary::-webkit-details-marker { display: none; }
.saved summary .edit { font-weight: 600; color: var(--orchid-deep); text-decoration: underline; text-underline-offset: 0.16em; }
.saved[open] summary .edit { visibility: hidden; }
.saved .saved-body { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
/* on a wide screen the fields stay open beside the result, so the summary line would only repeat them */
@media (min-width: 64rem) { .saved > summary { display: none; } .saved .saved-body { padding-top: 0; } }
/* folded to its summary line (a phone, once she has her answer): nothing to submit until she opens it again */
.hero-form:has(.saved.is-saved:not([open])) > .btn-primary, .hero-form:has(.saved.is-saved:not([open])) > .free { display: none; }

/* the answer, inside the sky */
.answer { display: grid; gap: var(--s-2); scroll-margin-top: var(--s-4); }
.answer:focus { outline: none; }
.answer:focus-visible { outline: 3px solid var(--amber-fill); outline-offset: 6px; }
.answer .big { font-size: var(--t-num); line-height: 1; color: var(--moon); }
/* a new answer waits, unseen, until any of it is on screen; then it rises part by part (kalender.js) */
.answer.is-held > * { opacity: 0; }
.answer .rel { color: var(--moon-dim); font-size: var(--t-small); max-width: 44ch; text-wrap: pretty; }
@media (min-width: 64rem) { .answer .rel { font-size: var(--t-body); } }
.answer .today-line { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(243, 233, 214, 0.15); color: var(--moon-dim); font-size: var(--t-small); max-width: 52ch; text-wrap: pretty; }
.answer .today-line strong { color: var(--moon); }
.answer .cluster { margin-top: var(--s-2); }

/* ---------- The result on paper ---------- */
.result { display: grid; gap: var(--s-5); }
.result-head { display: flex; flex-direction: column; gap: var(--s-1); }
.result-head .h2 { max-width: none; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-small); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend .group { display: inline-flex; gap: 2px; }
.night .legend { color: var(--moon-dim); }

/* month calendar: this month and the next two, swipeable on phones */
.calendar { display: grid; gap: var(--s-3); }
.months-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.months-nav .dots { display: inline-flex; gap: var(--s-2); }
.months-nav .dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line); }
.months-nav .dots i.is-on { background: var(--ink); }
.months-nav button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; display: grid; place-items: center; }
.months-nav button svg { width: 1rem; height: 1rem; }
.months-nav button:hover { background: var(--paper-2); }
@media (min-width: 64rem) { .months-nav { display: none; } }
.months { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.months::-webkit-scrollbar { display: none; }
.month { scroll-snap-align: start; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); }
@media (min-width: 64rem) { .months { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: var(--s-5); } }
.month-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.month-head h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; font-variation-settings: "SOFT" 60; text-transform: capitalize; }
.month-head .sum { font-size: var(--t-micro); color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cal { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.cal th { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 var(--s-2); text-align: center; }
.cal td { padding: 0; }
.day { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; align-content: center; row-gap: 2px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--d-fast) var(--ease); }
.day .n { line-height: 1; font-size: var(--t-small); }
.day .mg { width: 0.625rem; height: 0.625rem; }
.day:hover { background: var(--paper-2); }
.day.is-past { color: var(--ink-3); }
.day.is-past .mg { opacity: 0.6; }
.day.is-fertile { background: color-mix(in srgb, var(--amber-fill) var(--f, 50%), transparent); }
.day.is-fertile:hover { background: color-mix(in srgb, var(--amber-fill) calc(var(--f, 50%) + 12%), transparent); }
.day.is-period { background: var(--berry); color: #fff; }
.day.is-period:hover { background: #8A2445; }
.day.is-period.is-past { background: color-mix(in srgb, var(--berry) 55%, white); color: #fff; }
.day.is-maybe { outline: 2px dashed var(--berry); outline-offset: -2px; }
.day.is-ov::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; border: 2px solid var(--amber); pointer-events: none; }
.day.is-today { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.day.is-period.is-today { box-shadow: inset 0 0 0 2px #fff; }
.day[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--orchid-deep); }
.day:focus-visible { outline-offset: 0; z-index: 1; }
/* Her months arrive as a wave through time: each marked day takes its colour in date order, from the first one on
   (cycle.js sets --wave per day). Held (not on screen yet), every marked day waits in the first frame of its
   animation: the numbers and today are there, the colours not yet. */
.months.is-arriving .day.is-period, .months.is-arriving .day.is-fertile, .months.is-arriving .day.is-maybe { animation: day-in var(--day-for, 400ms) var(--ease-even) var(--wave, 0ms) both; }
.months.is-arriving .day.is-ov::after { animation: ov-in var(--day-for, 400ms) var(--ease-even) calc(var(--wave, 0ms) + var(--d-fast)) both; }
.months.is-arriving.is-held .day, .months.is-arriving.is-held .day::after { animation-play-state: paused; }
/* each day blooms into its colour; the ovulation ring closes in on its day from outside; and once the wave
   reaches today, a ring goes out from it: here you are (cycle.js sets --today-at) */
@keyframes day-in { from { background-color: transparent; color: var(--ink); outline-color: transparent; transform: scale(0.82); } }
@keyframes day-fade { from { background-color: transparent; color: var(--ink); outline-color: transparent; } }
@keyframes ov-in { from { opacity: 0; transform: scale(1.6); } }
.months.is-arriving .day.is-today::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ink); opacity: 0; pointer-events: none; animation: today-ripple var(--d-bloom) var(--ease-moon) calc(var(--today-at, 0ms) + var(--d-base)) forwards; }
.months.is-arriving.is-held .day::before { animation-play-state: paused; }
@keyframes today-ripple { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
.mg .mg-dark { fill: var(--paper-3); }
.mg .mg-lit { fill: var(--ink-2); }
.is-period .mg .mg-dark { fill: rgba(255, 255, 255, 0.25); }
.is-period .mg .mg-lit { fill: #fff; }
.is-fertile .mg .mg-dark { fill: rgba(36, 28, 43, 0.12); }

/* the selected day, echoed under the calendar: the instrument's caption and a small real moon, as one link up */
.sel-echo { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--night); color: var(--moon-dim); font-size: var(--t-small); text-decoration: none; line-height: 1.4; }
.sel-echo .mini { width: 2.5rem; height: 2.5rem; flex: none; }
.sel-echo .mini svg { width: 100%; height: 100%; }
.sel-echo .text { display: grid; gap: 2px; min-width: 0; text-wrap: pretty; }
.sel-echo strong { color: var(--moon); font-weight: 600; }
.sel-echo .more { font-size: var(--t-micro); color: var(--orchid); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--orchid) 50%, transparent); text-underline-offset: 0.16em; }
.sel-echo:hover .more { text-decoration-color: currentColor; }
.sel-echo:focus-visible { outline: 3px solid var(--orchid-deep); outline-offset: 3px; }

/* tiles */
.tiles { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.tile { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); border-left-width: 4px; }
.tile-amber { border-left-color: var(--amber-fill); }
.tile-plum { border-left-color: var(--orchid-deep); }
.tile-berry { border-left-color: var(--berry); }
.tile .eyebrow { color: var(--ink-3); }
.tile .val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "SOFT" 70; line-height: 1.15; letter-spacing: -0.01em; }
.tile .sub { color: var(--ink-2); font-size: var(--t-small); }
.tile-wide { grid-column: 1 / -1; }
.upcoming { display: grid; gap: 0; }
.upcoming li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.upcoming li:first-child { border-top: 0; }
.upcoming li strong { font-weight: 600; }
.upcoming li .range { color: var(--ink-3); }

/* fertile likelihood per day: columns, one hue, intensity by band */
.lik { display: grid; gap: var(--s-2); margin-top: var(--s-2); max-width: 30rem; }
.lik-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 3.5rem; }
.lik-bar { position: relative; height: calc(var(--v) * 100%); min-height: 2px; background: var(--amber-fill); border-radius: 3px 3px 0 0; opacity: 0.32; }
.lik-bar.is-hoger { opacity: 0.62; }
.lik-bar.is-hoogst { opacity: 1; }
.lik-bar.is-ov::after { content: ""; position: absolute; left: 50%; bottom: -0.45rem; width: 0.4rem; height: 0.4rem; margin-left: -0.2rem; border-radius: 50%; background: var(--amber); }
/* her chance arriving (kalender.js): the bars grow from the axis in day order, rising towards ovulation and
   falling after it, then the ovulation dot blooms under its bar; held on the axis until she is there */
.lik-bars.is-arriving .lik-bar { transform-origin: bottom; animation: bar-rise var(--d-slow) var(--ease-moon) calc(var(--i, 0) * 45ms) both; }
.lik-bars.is-arriving .lik-bar.is-ov::after { animation: dot-bloom var(--d-slow) var(--ease-moon) calc(var(--i, 0) * 45ms + var(--d-slow)) both; }
.lik-bars.is-arriving.is-held .lik-bar, .lik-bars.is-arriving.is-held .lik-bar::after { animation-play-state: paused; }
@keyframes bar-rise { from { transform: scaleY(0); } }
@keyframes dot-bloom { from { transform: scale(0); } 55% { transform: scale(1.7); } to { transform: none; } }
.lik-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; font-size: var(--t-micro); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); padding-top: var(--s-2); }
.lik-axis span.is-ov { color: var(--amber); font-weight: 700; }
.lik-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--t-micro); color: var(--ink-2); align-items: center; }
.lik-legend li { display: inline-flex; align-items: center; gap: var(--s-1); }
.lik-legend .dot { width: 0.625rem; height: 0.625rem; }
.lik-legend .dot-ov { box-shadow: none; background: var(--amber); width: 0.4rem; height: 0.4rem; border-radius: 50%; }
.affiliate { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.affiliate .tag { flex: none; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 0.1rem var(--s-2); border: 1px solid var(--line); border-radius: var(--r-1); margin-top: 0.15rem; }
.affiliate a { font-weight: 600; color: var(--ink); }
@media (max-width: 39.99rem) { .affiliate { flex-direction: column; gap: var(--s-1); } .affiliate .tag { align-self: flex-start; margin-top: 0; } }

/* her own numbers, and why it is an estimate */
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); align-content: start; }
.stat .label { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.stat .v small { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.stat .sub { font-size: var(--t-small); color: var(--ink-2); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 2.25rem; margin-top: var(--s-1); }
.spark i { flex: 1; min-width: 4px; max-width: 14px; background: var(--orchid-deep); opacity: 0.35; border-radius: 3px 3px 0 0; height: calc(var(--h) * 100%); }
.spark i:last-child { opacity: 1; }
.context { display: grid; gap: var(--s-3); }
@media (min-width: 64rem) { .context { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.fact { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-2); background: var(--orchid-soft); align-content: start; }
.fact .big { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; font-weight: 500; font-variation-settings: "SOFT" 80; color: var(--orchid-deep); letter-spacing: -0.02em; }
.fact .big small { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-left: var(--s-1); }
.fact p { font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.fact p strong { color: var(--ink); }
.fact svg { width: 100%; height: auto; margin-top: var(--s-1); }
.fact .src { font-size: var(--t-micro); color: var(--ink-3); }
/* on a phone each fact is one row: the number on the left, the sentence beside it */
@media (max-width: 39.99rem) {
  .context { gap: var(--s-2); }
  .fact { grid-template-columns: 5.25rem 1fr; column-gap: var(--s-3); row-gap: var(--s-1); padding: var(--s-3) var(--s-4); align-items: start; }
  .fact .big { grid-row: 1 / span 2; display: grid; gap: 2px; align-content: start; font-size: 1.75rem; }
  .fact .big small { margin-left: 0; font-size: var(--t-micro); }
  .fact svg { grid-column: 2; }
}
.sources-line { font-size: var(--t-micro); color: var(--ink-3); max-width: var(--measure); }

/* the estimate note: part of the result, not a footer */
.note { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-2); background: var(--amber-soft); color: var(--ink); font-size: var(--t-small); }
.note svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--amber); margin-top: 0.1rem; }
.note a { font-weight: 600; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.install-help { font-size: var(--t-small); color: var(--ink-2); max-width: var(--measure); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 600; min-height: 3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-3); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-body { padding-bottom: var(--s-4); color: var(--ink-2); max-width: var(--measure); }

/* ---------- Phase strip ---------- */
.phase { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); min-height: 100%; }
.phase svg { width: 2.75rem; height: 2.75rem; }
.phase .h3 { font-size: 1.0625rem; }
.phase p { font-size: var(--t-small); color: var(--ink-2); }
.phase .days { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
/* the four phases arrive as one cycle (site.js plays them when she gets there): the cards rise one after another
   and each icon draws its own part of the circle in turn, the fertile days blooming their ovulation dot, so the
   four go once around together */
.grid-4[data-arrive] > .phase { animation: rise var(--d-slow) var(--ease-moon) calc(var(--n, 0) * 80ms) both; }
.grid-4[data-arrive] .phase .arc { stroke-dasharray: 1; animation: arc-draw 520ms var(--ease-even) calc(250ms + var(--n, 0) * 420ms) both; }
.grid-4[data-arrive] .phase .dot { transform-box: fill-box; transform-origin: center; animation: dot-bloom var(--d-slow) var(--ease-moon) calc(250ms + var(--n, 0) * 420ms + 420ms) both; }
.grid-4[data-arrive] > .phase:nth-child(2) { --n: 1; }
.grid-4[data-arrive] > .phase:nth-child(3) { --n: 2; }
.grid-4[data-arrive] > .phase:nth-child(4) { --n: 3; }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
@keyframes arc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* on a phone the four phases are four rows, the icon beside the words, instead of four narrow columns */
@media (max-width: 39.99rem) {
  .grid-4 { grid-template-columns: 1fr; gap: var(--s-2); }
  .phase { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--s-3); row-gap: var(--s-1); align-items: start; padding: var(--s-3) var(--s-4); min-height: 0; }
  .phase svg { grid-row: 1 / span 3; width: 2.5rem; height: 2.5rem; }
}

/* ---------- Article cards ---------- */
.article-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); min-height: 100%; text-decoration: none; transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.article-card .h3 { text-decoration: none; }
.article-card p { color: var(--ink-2); font-size: var(--t-small); }
.article-card .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--t-micro); color: var(--ink-3); align-items: center; }
.article-card .meta .pill { font-size: var(--t-micro); padding-block: 0.1rem; }
.kicker { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orchid-deep); }
/* on a phone a card is its kicker, its title and its facts; the title already says what the blurb repeats */
@media (max-width: 39.99rem) {
  .grid-3 { gap: var(--s-3); }
  .article-card { padding: var(--s-4); gap: var(--s-2); }
  .article-card > p { display: none; }
}

/* ---------- Sharing: the poll and the motto ---------- */
.share { display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-3); background: var(--orchid-soft); }
@media (min-width: 64rem) { .share { grid-template-columns: 1fr 1fr; gap: var(--s-7); padding: var(--s-7); align-items: center; } }
.motto { display: grid; gap: var(--s-3); }
.motto .pull { border-left-color: var(--orchid-deep); color: var(--orchid-deep); }
.motto p:not(.pull) { color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }
.poll { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); }
.poll .h3 { text-wrap: balance; }
.poll-options { display: grid; gap: var(--s-2); }
.poll-options button { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3rem; padding: 0 var(--s-4); border-radius: var(--r-2); border: 1px solid var(--line-strong); background: #fff; text-align: left; cursor: pointer; font-weight: 500; }
.poll-options button:hover { background: var(--paper-2); border-color: var(--ink); }
.poll-results { display: grid; gap: var(--s-2); }
.poll-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); font-size: var(--t-small); align-items: baseline; }
.poll-row .bar { grid-column: 1 / -1; height: 0.5rem; border-radius: 0.25rem; background: var(--paper-3); overflow: hidden; }
.poll-row .bar i { display: block; height: 100%; width: var(--p); background: var(--orchid-deep); border-radius: inherit; transition: width var(--d-slow) var(--ease); }
.poll-row.is-mine .label { font-weight: 600; }
.poll-row .pct { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.poll .fine { font-size: var(--t-micro); color: var(--ink-3); }
@media (max-width: 39.99rem) { .share { padding: var(--s-4); gap: var(--s-4); } .poll { padding: var(--s-4); } }

/* ---------- Ask block (the helper) ---------- */
.ask { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper-2); }
@media (min-width: 64rem) { .ask { grid-template-columns: 1.2fr 1fr; gap: var(--s-6); padding: var(--s-6); } }
.ask-form { display: grid; gap: var(--s-3); }
.ask-form .input { background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid var(--line-strong); background: #fff; font-size: var(--t-small); cursor: pointer; text-decoration: none; }
.chip:hover { border-color: var(--ink); }
.ask-limits { font-size: var(--t-small); color: var(--ink-2); display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); background: #fff; border-radius: var(--r-2); border: 1px solid var(--line); }
.ask-limits li { display: flex; gap: var(--s-2); }
.ask-limits svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--sage); }
.ask-answer { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); display: grid; gap: var(--s-3); font-size: var(--t-small); }
.ask-answer .src { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ask-answer .src a { font-size: var(--t-micro); padding: 0.15rem var(--s-2); border-radius: var(--r-1); background: var(--paper-2); text-decoration: none; }
/* on a phone the example questions are one row that scrolls sideways, not three rows */
@media (max-width: 39.99rem) {
  .ask { padding: var(--s-4); }
  .ask-form .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); padding-bottom: 2px; }
  .ask-form .chips::-webkit-scrollbar { display: none; }
  .ask-form .chip { flex: none; }
}

/* ---------- Article ---------- */
.article-head { display: grid; gap: var(--s-4); padding-block: var(--s-6) var(--s-5); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-3); }
.breadcrumb a { text-decoration: none; color: var(--ink-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
/* the trust line: four true facts in one quiet line. No badge announces what is missing. */
.trust-line { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-small); color: var(--ink-2); align-items: center; }
.trust-line > span:not(:last-child)::after { content: "·"; margin-left: var(--s-2); color: var(--line-strong); }
.trust-line a { color: inherit; }
.trust-line .by { color: var(--ink); font-weight: 500; }
.reviewed { display: inline-flex; gap: var(--s-2); align-items: center; font-size: var(--t-small); color: var(--sage); font-weight: 600; }
.reviewed svg { width: 1rem; height: 1rem; }
/* "In het kort": the answer the snippets quote, framed as what is known */
.in-short { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: var(--orchid-soft); border-left: 4px solid var(--orchid-deep); }
.in-short .eyebrow { color: var(--orchid-deep); }
.in-short p:not(.eyebrow) { font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; max-width: var(--measure); }
.article-kit { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.article-kit > section { display: grid; gap: var(--s-3); }
.article-kit .h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "SOFT" 50; }
/* the changelog: the page is alive */
.changelog ul { display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }
.changelog li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-3); }
.changelog time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 29.99rem) { .changelog li { grid-template-columns: 1fr; gap: 0; } }
/* the invitation to BIG-registered professionals: an invitation, not a stamp of what is missing */
.pro-invite { padding: var(--s-5); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); }
.pro-invite p { color: var(--ink-2); font-size: var(--t-small); max-width: 58ch; text-wrap: pretty; }
.pro-invite .btn { justify-self: start; }
/* comments: first party, moderated, honest */
.comments .section-head { margin-bottom: 0; }
.comment { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); }
.comment-pinned { background: var(--orchid-soft); border-color: transparent; }
.comment-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--t-small); color: var(--ink-3); }
.comment-meta .who { font-weight: 600; color: var(--ink); }
.comment-pinned .who { color: var(--orchid-deep); }
.comment-meta .tag { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem var(--s-2); border-radius: var(--r-1); background: var(--paper-2); color: var(--ink-2); }
.comment-meta .tag-team { background: var(--orchid-deep); color: #fff; }
.comment p:not(.comment-meta) { text-wrap: pretty; }
.comment-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.react { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid var(--line-strong); background: #fff; font-size: var(--t-small); cursor: pointer; }
.react:hover { border-color: var(--ink); }
.react[aria-pressed="true"] { background: var(--orchid-soft); border-color: var(--orchid-deep); color: var(--orchid-deep); }
.react .count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.comment-reply { margin-left: var(--s-5); border-left: 3px solid var(--orchid-soft); }
.comments-empty { display: grid; gap: var(--s-1); padding: var(--s-5); border-radius: var(--r-2); border: 1px dashed var(--line-strong); text-align: center; color: var(--ink-2); }
.comments-empty strong { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.sample-note { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.sample-note::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amber-fill); }
.sample-list { display: grid; gap: var(--s-3); }
.comment-form { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); background: var(--paper-2); }
.comment-form .textarea { width: 100%; min-height: 7rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: #fff; resize: vertical; line-height: 1.5; }
.comment-form .textarea:focus { outline: none; border-color: var(--orchid-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orchid-deep) 25%, transparent); }
.comment-form .chips { gap: var(--s-2); }
.comment-form .fine { font-size: var(--t-small); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.comment-form .fine strong { color: var(--ink); font-weight: 600; }
.comment-form .btn { justify-self: start; }
.name-row { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .name-row { grid-template-columns: 1fr 1fr; } }
.ask-compact { padding: var(--s-4) var(--s-5); }
.ask-compact .h2 { font-size: 1.375rem; }
.article-layout { display: grid; gap: var(--s-6); }
@media (min-width: 64rem) { .article-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-8); } .article-layout > .toc { order: 2; position: sticky; top: var(--s-4); } }
.article-layout > .toc { align-self: start; }
.toc { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: var(--paper-2); font-size: var(--t-small); }
.toc ol { display: grid; gap: var(--s-2); counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: var(--s-2); }
.toc li::before { content: counter(toc, decimal-leading-zero); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); }
.callout { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-2); background: var(--orchid-soft); border-left: 4px solid var(--orchid-deep); }
.callout .h3 { color: var(--orchid-deep); }
.callout ul { padding-left: 1.2em; }
.pull { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); line-height: 1.3; color: var(--orchid-deep); padding-left: var(--s-5); border-left: 3px solid var(--amber-fill); font-variation-settings: "SOFT" 100; margin: 0; text-wrap: pretty; }
.sources { font-size: var(--t-small); color: var(--ink-2); }
.sources ol { padding-left: 1.5em; display: grid; gap: var(--s-2); }
.sources li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sources .checked-on { font-size: var(--t-micro); color: var(--ink-3); }
.article-foot { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: var(--paper-2); font-size: var(--t-small); color: var(--ink-2); }

/* ---------- Article body, generated from Markdown by build-articles.mjs ---------- */
/* the table of contents: a closed disclosure on phones (one tap, 44 px), the open sidebar on wide screens (site.js opens it) */
.toc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 2.75rem; margin-block: calc(-1 * var(--s-2)); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .toc-count { font-size: var(--t-micro); color: var(--ink-3); }
.toc[open] summary { margin-bottom: var(--s-1); }
@media (min-width: 64rem) { .toc summary { pointer-events: none; min-height: 0; } .toc summary .toc-count { display: none; } }
/* source references: small, orchid, one group per sentence */
.ref { font-size: 0.72em; line-height: 0; vertical-align: super; margin-left: 0.08em; font-variant-numeric: tabular-nums; }
.ref a { text-decoration: none; color: var(--orchid-deep); font-weight: 600; padding: 0.15em 0.1em; }
.ref a + a::before { content: ","; color: var(--ink-3); font-weight: 400; margin-right: 0.08em; }
.ref a:hover { text-decoration: underline; }
/* "Wist je dat?": the one night card inside a paper article. One surprising fact, isolated. */
.wist { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-2); background: var(--night) radial-gradient(24rem 12rem at 100% 0%, rgba(204, 152, 202, 0.22), transparent 60%); color: var(--moon); margin-block: var(--s-6); }
.wist .eyebrow { color: var(--orchid); }
.wist p:not(.eyebrow) { font-size: var(--t-body); text-wrap: pretty; }
.wist .ref a { color: var(--orchid); }
.wist a { color: var(--moon); }
/* a study card: who, how many, what they found, how strong. Phone-sized, one per study. */
.study { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); background: #fff; border: 1px solid var(--line); }
.prose .study + .study { margin-top: var(--s-3); }
.study-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; font-variation-settings: "SOFT" 50; margin: 0; text-wrap: balance; }
.study-facts { display: grid; gap: var(--s-3); margin: 0; }
.study-facts > div { display: grid; gap: 2px; }
.study-facts dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orchid-deep); }
.study-facts dd { font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.study-facts dd strong { color: var(--ink); }
@media (min-width: 40rem) {
  .study-facts > div { grid-template-columns: 6.5rem 1fr; gap: var(--s-3); align-items: baseline; }
  .study-facts dt { padding-top: 0.2em; }
}
/* tables: the one per article that earns it */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.table { width: 100%; min-width: 28rem; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.table thead th { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-top: 0; padding-top: 0; }
.table tbody th { font-weight: 600; color: var(--ink); }
.table td { color: var(--ink-2); }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table-wrap:has(.table) { font-variant-numeric: tabular-nums; }
/* the FAQ inside an article */
.prose .faq { margin-top: var(--s-7); }
.prose .faq .h2 { margin-bottom: var(--s-3); }
.prose .faq details + details { margin-top: 0; }
.prose .faq .faq-body p { margin: 0; }
/* the sources: title, where, what it supports */
.sources li { display: grid; gap: 1px; padding-left: var(--s-1); }
.sources li a { color: var(--ink); }
.sources .pub { color: var(--ink-3); font-size: var(--t-micro); }
.sources .supports { color: var(--ink-2); font-size: var(--t-micro); text-wrap: pretty; }
.sources li:target { background: var(--orchid-soft); border-radius: var(--r-1); outline: 6px solid var(--orchid-soft); }
/* the index: the count line and the featured night card */
.index-count { font-size: var(--t-small); color: var(--ink-3); }
.feature { display: grid; gap: var(--s-4); padding: var(--s-5); margin-bottom: var(--s-5); border-radius: var(--r-3); text-decoration: none; color: var(--moon); background: var(--night) radial-gradient(40rem 20rem at 85% 110%, rgba(204, 152, 202, 0.3), transparent 60%); }
.feature:focus-visible { outline: 3px solid var(--amber-fill); outline-offset: 4px; }
.feature-moon { position: relative; display: grid; justify-items: center; gap: var(--s-2); }
.feature-moon .moon-poster { position: static; width: 7.5rem; height: 7.5rem; }
.feature-tonight { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--t-micro); color: var(--moon-dim); }
.feature-tonight strong { color: var(--moon); font-weight: 600; font-size: var(--t-small); }
.feature-copy { display: grid; gap: var(--s-3); }
.feature-copy .eyebrow { color: var(--orchid); }
.feature-copy .h2 { color: var(--moon); max-width: 20ch; }
.feature-blurb { color: var(--moon-dim); max-width: 48ch; text-wrap: pretty; }
.feature-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-micro); color: var(--moon-dim); }
.feature-meta > span + span::before { content: "·"; margin-right: var(--s-2); }
.feature-cta { justify-self: start; font-weight: 600; color: var(--moon); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--moon) 40%, transparent); text-underline-offset: 0.16em; }
.feature:hover .feature-cta { text-decoration-color: currentColor; }
@media (min-width: 40rem) { .feature { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-6); padding: var(--s-6); } .feature-moon .moon-poster { width: 10rem; height: 10rem; } }
@media (min-width: 64rem) { .feature { padding: var(--s-7); gap: var(--s-8); } .feature-moon .moon-poster { width: 13rem; height: 13rem; } }
/* the homepage section link under the cards */
.section-more { margin-top: var(--s-4); font-weight: 600; }
/* Thuisarts' margin under the fertile estimate: a quiet line, a link to the source */
.tile .margin-note a { font-weight: 600; color: var(--ink); }

/* ---------- Premium ---------- */
.plans { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .plans { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.plan { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-3); background: #fff; border: 1px solid var(--line); align-content: start; }
.plan-premium { background: var(--night); color: var(--moon); border-color: var(--night); background-image: radial-gradient(40rem 20rem at 50% 120%, rgba(204, 152, 202, 0.3), transparent 60%); }
.plan .price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan .price .num { font-size: 2.75rem; line-height: 1; }
.plan .price .per { color: var(--ink-2); }
.plan-premium .price .per { color: var(--moon-dim); }
.plan ul { display: grid; gap: var(--s-2); }
.plan li { display: flex; gap: var(--s-2); align-items: flex-start; }
.plan li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.2rem; color: var(--sage); }
.plan-premium li svg { color: var(--amber-fill); }
.plan .fine { font-size: var(--t-small); color: var(--ink-2); }
.plan-premium .fine { color: var(--moon-dim); }
.plan-premium .btn-primary { background: var(--moon); color: var(--night); }
.plan-premium .btn-primary:hover { background: #fff; }
.toggle { display: inline-flex; padding: var(--s-1); border-radius: var(--r-full); background: var(--paper-2); border: 1px solid var(--line); }
.toggle label { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; padding: 0 var(--s-4); border-radius: var(--r-full); cursor: pointer; font-weight: 500; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle input:checked + span { color: var(--ink); }
.toggle label:has(input:checked) { background: #fff; box-shadow: var(--shadow-1); }
.toggle label:has(input:focus-visible) { outline: 3px solid var(--orchid-deep); outline-offset: 2px; }
.toggle .save { font-size: var(--t-micro); color: var(--sage); font-weight: 600; }
.pay { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--ink-2); align-items: center; }
.pay span { padding: 0.15rem var(--s-2); border: 1px solid var(--line); border-radius: var(--r-1); font-weight: 600; font-size: var(--t-micro); color: var(--ink-2); }
.plan-premium .pay span { color: var(--moon); border-color: rgba(243, 233, 214, 0.35); }

/* ---------- Consent dialog ---------- */
.consent-backdrop { position: fixed; inset: 0; background: rgba(25, 18, 46, 0.35); z-index: 90; }
.consent { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; background: #fff; color: var(--ink); border-radius: var(--r-3) var(--r-3) 0 0; padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); display: grid; gap: var(--s-4); max-height: 90vh; overflow: auto; }
@media (min-width: 40rem) { .consent { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: min(92vw, 34rem); border-radius: var(--r-3); padding: var(--s-6); } }
.consent .h2 { font-size: 1.5rem; }
.consent p { color: var(--ink-2); font-size: var(--t-small); max-width: 60ch; }
.consent-actions { display: grid; gap: var(--s-2); }
@media (min-width: 40rem) { .consent-actions { grid-template-columns: 1fr 1fr; } }
.consent-actions .btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.consent-actions .btn:hover { background: var(--paper-2); }
.consent-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-small); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s-7); padding-block: var(--s-6); border-top: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); font-size: var(--t-small); }
.footer-grid { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: 1fr 1fr; }
.footer-grid > .stack-s { grid-column: 1 / -1; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); } .footer-grid > .stack-s { grid-column: auto; } }
.site-footer h2 { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.site-footer ul { display: grid; gap: var(--s-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; }
.disclaimer { max-width: var(--measure); }
.credit { max-width: var(--measure); }

/* ---------- Premium nudge, deliberately quiet ---------- */
.quiet-nudge { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-radius: var(--r-2); border: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.quiet-nudge a { font-weight: 600; color: var(--ink); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .months { scroll-behavior: auto; }
  /* Her answer still arrives when she gets there, but nothing draws, sweeps or travels: her arcs and her colours
     fade in where they are, all at once (each duration has to out-rank the rule above). */
  .ring.is-drawing .ring-seg { stroke-dashoffset: 0; }
  .ring.is-drawing .ring-seg, .ring.is-drawing .wedge, .ring.is-drawing .seg-ovulation { animation: fade-in var(--d-fade) var(--ease-even) both; animation-duration: var(--d-fade) !important; }
  .ring.is-drawing .ring-moon { animation: fade-in var(--d-fade) var(--ease-even) both; animation-duration: var(--d-fade) !important; }
  .ring.is-drawing .ov-ripple { animation: none; }
  .months.is-arriving .day.is-period, .months.is-arriving .day.is-fertile, .months.is-arriving .day.is-maybe,
  .months.is-arriving .day.is-ov::after { animation-delay: 0ms; animation-duration: var(--d-fade) !important; }
  .months.is-arriving .day.is-ov::after { animation-name: fade-in; }
  .months.is-arriving .day.is-period, .months.is-arriving .day.is-fertile, .months.is-arriving .day.is-maybe { animation-name: day-fade; }
  .months.is-arriving .day.is-today::before { animation: none; }
  .lik-bars.is-arriving .lik-bar { animation-name: appear; animation-delay: 0ms; animation-duration: var(--d-fade) !important; }
  .lik-bars.is-arriving .lik-bar.is-ov::after { animation: none; }
  .grid-4[data-arrive] > .phase, .grid-4[data-arrive] .phase .arc, .grid-4[data-arrive] .phase .dot { animation-name: appear; animation-delay: 0ms; animation-duration: var(--d-fade) !important; }
  .night .chip::before { transform: none; transition: opacity var(--d-fade) !important; }
  .city span::after { transform: none; opacity: 0; transition: opacity var(--d-fade) !important; }
  .city:has(input:checked) span::after { opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes appear { from { opacity: 0; } }

/* ---------- Print: the result sheet for a doctor's visit ---------- */
@media print {
  .site-header, .ad, .site-footer, .consent, .consent-backdrop, .result-actions, .nav, .menu, .instrument, .sel-echo, .months-nav, .affiliate { display: none !important; }
  body { background: #fff; color: #000; }
  .sky { background: #fff; color: #000; }
  .hero-form { box-shadow: none; border: 1px solid #000; }
  .answer .big, .answer .rel, .answer .today-line { color: #000; }
  .months { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .months .day, .months .day::after { animation: none !important; }
  .months .day::before, .lik-bar, .lik-bar::after { animation: none !important; }
  [data-arrive], [data-arrive] * { animation: none !important; }
  .month { break-inside: avoid; }
}