/* Juggle: this site's own styles, on top of the round 3 system (assets/system/). */
/*
 * Lane J's kit, shared word for word by Simplify and Juggle (each site carries
 * its own copy, under its own name below). It sits on top of the round 3
 * system (assets/system/) and reads only its semantic tokens; nothing here
 * changes a family or area colour. Pairs added here are in the lane report.
 */

/* ---------- the page's rhythm ---------- */
.band { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.band + .band { padding-top: 0; }
.band--tint { background: var(--tint); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.band--tint + .band { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.band-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 52rem; }
.band-head .divider { margin: 0 0 var(--s-2); }
.band-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: var(--s-2); }
.kicker .seal-icon { --seal-size: 28px; }

/* ---------- the front page's answer (8.6's clarity, 9.11) ---------- */
.hero { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.hero-words { display: grid; gap: var(--s-5); }
.hero-lines { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.hero-lines li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-3); align-items: baseline; font-size: 1.08rem; line-height: 1.5; }
.hero-lines .mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--accent); border-radius: 50%; font-family: var(--face-caps); font-weight: 650; font-size: 0.8rem; color: var(--accent); transform: translateY(0.2em); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hero-act .call-note { margin: 0; }
.smallest { display: grid; gap: var(--s-2); max-width: 34rem; padding: var(--s-4) var(--s-5); border: 1px solid var(--hair); border-left: 4px solid var(--area-ink); border-radius: var(--radius); background: var(--raised); }
.smallest .caps { margin: 0; }
.hero-instrument { position: relative; justify-self: center; width: min(100%, 30rem); }
@media (max-width: 959px) { .hero-instrument { width: min(88%, 24rem); } }

/* ---------- prices: offers on a page ---------- */
.offers { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.offer { position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.offer::before { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--area-ink); }
.offer h3 { font-size: var(--step-2); }
.offer .price-item { font-size: 1.12rem; }
.offer .price-what { font-size: var(--step-small); }
.offer ul { margin: 0; padding-left: 1.1rem; color: var(--ink); font-size: var(--step-small); }
.offer ul li + li { margin-top: var(--s-1); }
.offer .btn { justify-self: start; }
.offer--lead { border-color: var(--boundary); }
.offer-tag { justify-self: start; font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.offer .disclosure { border-color: var(--hair); }
.offer .disclosure > summary { min-height: 48px; font-size: 0.98rem; }
.price-row { display: grid; gap: 2px; padding: var(--s-3) 0; border-top: 1px solid var(--hair); }
.price-row:last-child { border-bottom: 1px solid var(--hair); }

/* ---------- a two-column ledger: what Laura keeps, what you decide ---------- */
.ledger { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger-col { padding: var(--s-5); border-radius: calc(var(--radius) + 4px); background: var(--raised); border: 1px solid var(--hair); }
.ledger-col h3 { display: flex; align-items: center; gap: var(--s-3); }
.ledger-col h3 .seal-icon { --seal-size: 32px; }
.ledger-col ul { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.ledger-col li { display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--s-2); align-items: baseline; }
.ledger-col li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--accent); transform: translateY(-0.05em); }
.ledger-col--you li::before { border-color: var(--boundary); background: var(--tint); }

/* ---------- her own words: only HERS rows, quoted whole (shared wording 5) ---------- */
.words { display: grid; gap: var(--s-5); padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: calc(var(--radius) + 8px); background: var(--raised); border: 1px solid var(--hair); }
.words-list { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .words-list--two { grid-template-columns: 1fr 1fr; } }
.words blockquote { margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--area-ink); }
.words blockquote p { font-family: var(--face-head); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.35; }
.words cite { display: block; margin-bottom: var(--s-2); font-style: normal; }
.words-who { color: var(--ink-2); font-size: var(--step-small); }

/* ---------- doors: the second door (the app) and the two neighbours ---------- */
.doors-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.door-card { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); align-items: center; min-height: 100%; padding: var(--s-4) var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); color: var(--ink); text-decoration: none; transition: border-color var(--t-swap) ease-out, transform var(--t-press) var(--ease-out); }
.door-card .seal-icon { --seal-size: 52px; grid-row: span 3; transition: transform var(--t-turn) var(--ease-out); }
.door-card:hover { border-color: var(--boundary); }
.door-card:hover .seal-icon, .door-card:focus-visible .seal-icon { transform: rotate(30deg); }
.door-card:active { transform: scale(.98); }
.door-kicker { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.door-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.12rem; }
.door-line { color: var(--ink-2); font-size: var(--step-small); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .door-card:hover .seal-icon, .door-card:focus-visible .seal-icon { transform: none; } .door-card:active { transform: none; } }

/* ---------- the call band: what happens next, four marks round a small ring ---------- */
.callband { display: grid; gap: var(--s-6); align-items: center; padding: clamp(1.75rem, 3vw, 3rem); border-radius: calc(var(--radius) + 10px); background: var(--raised); border: 1px solid var(--hair); }
@media (min-width: 900px) { .callband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.callband-words { display: grid; gap: var(--s-4); }
.next-ring { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: next; }
.next-ring li { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-3); align-items: start; counter-increment: next; }
.next-ring li::before { content: counter(next); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--accent); font-family: var(--face-caps); font-weight: 650; color: var(--accent); background: var(--ground); }
.next-ring li:not(:last-child)::after { content: ""; position: absolute; left: 1.2rem; top: 2.5rem; bottom: calc(-1 * var(--s-3)); width: 1.5px; background: var(--hair); }
.next-ring b { display: block; }
.next-ring span { color: var(--ink-2); font-size: var(--step-small); }

/* ---------- notes on an image: live words in the pencil hand ---------- */
.chip-note { position: absolute; z-index: 2; display: grid; gap: 2px; max-width: min(15rem, 46%); padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--note-paper); color: var(--note-ink); box-shadow: 0 10px 22px -12px rgb(20 16 10 / .55); font-size: 0.86rem; line-height: 1.3; }
.chip-note b { font-family: var(--face-note); font-weight: 600; font-size: 0.98rem; }
.chip-note small { color: var(--note-ink-2); font-size: 0.75rem; }
.chip-note--bubble { border-bottom-left-radius: 3px; }
.chip-note--set { border: 2px solid var(--note-set); }
.chip-note .tick { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.3em; border-radius: 50%; background: var(--note-set); vertical-align: -0.1em; }
:root { --note-paper: light-dark(#FCF9F2, #F3ECDD); --note-ink: #1F1B16; --note-ink-2: #5A5045; --note-set: #3C6A12; }
.process-figure .chip-note, .process-stage-frame .chip-note { position: absolute; }
.example-chip { position: absolute; z-index: 3; left: var(--s-3); top: var(--s-3); }

.process-intro { margin-bottom: var(--s-6); }
.process-end { margin-top: var(--s-4); }

/* ---------- interface illustrations, drawn in HTML (no image, every word live) ---------- */
.screen { position: relative; display: grid; align-content: start; gap: var(--s-2); width: min(86%, 21rem); margin: 8% auto; padding: var(--s-4); border-radius: 22px; background: var(--note-paper); color: var(--note-ink); box-shadow: 0 18px 40px -22px rgb(20 16 10 / .6); font-size: 0.88rem; line-height: 1.35; }
.screen-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid #DCD3C3; font-family: var(--face-caps); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: #5A5045; }
.screen-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.45rem 0.6rem; border-radius: 10px; background: #F1EADC; }
.screen-row--on { background: #E3EBD3; }
.screen-hand { font-family: var(--face-note); font-weight: 600; font-size: 1rem; }
.screen-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid #8A7E6E; font-size: 0.75rem; font-weight: 600; color: #3C3329; }
.screen-play { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; background: #2E2924; color: #EFE8DC; }
.screen-play svg { width: 44px; height: 44px; }
.screen-progress { height: 6px; border-radius: 3px; background: #DCD3C3; overflow: hidden; }
.screen-progress i { display: block; width: 38%; height: 100%; background: #735600; }
.screen-msg { justify-self: start; max-width: 85%; padding: 0.5rem 0.7rem; border-radius: 14px 14px 14px 4px; background: #F1EADC; }
.screen-msg--back { justify-self: end; border-radius: 14px 14px 4px 14px; background: #E3EBD3; }

/* ---------- small print style pages built by this lane: about, the call ---------- */
.about-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .about-grid .photo-slot { position: sticky; top: var(--s-6); } }
.photo-slot-note { margin-top: var(--s-2); }
.about-tag { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--ink); }
.about-desc { color: var(--ink-2); font-size: 1.1rem; }

/* ---------- the 404: the pattern torn at one edge ---------- */
.torn { position: relative; width: min(100%, 34rem); height: 120px; margin-inline: auto; }
.torn .weave { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 62%, 96% 70%, 92% 58%, 87% 76%, 82% 60%, 77% 80%, 71% 63%, 66% 82%, 60% 66%, 55% 84%, 49% 64%, 44% 79%, 38% 61%, 33% 77%, 27% 59%, 22% 74%, 16% 57%, 11% 70%, 5% 55%, 0 66%); }
.torn .weave rect { opacity: .55; }
.torn .seal-icon { position: absolute; left: 50%; top: 100%; --seal-size: 96px; transform: translate(-50%, -30%) rotate(-12deg); }
.lost-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ---------- questions ---------- */
.qs { max-width: 52rem; }
.qs-group + .qs-group { margin-top: var(--s-7); }
.qs-group > h2 { margin-bottom: var(--s-3); font-size: var(--step-2); }
.qs .disclosure-body p + p { margin-top: var(--s-3); }

/* ---------- the area's name in its label character (8.3, 7.2) ---------- */
.area-nav-name { font-family: var(--face-caps); font-weight: 650; letter-spacing: 0.01em; }
.area-nav-name .ch { display: inline-block; }

/* ---------- arrival motion, once, then still ---------- */
@media (prefers-reduced-motion: no-preference) {
  .arrive-up { animation: lj-up 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
}
html.lt-js:not(.lt-ready) .arrive-up { animation-play-state: paused; }
@keyframes lj-up { from { opacity: .15; transform: translateY(16px); } }
.d1 { --i: 1; } .d2 { --i: 2; } .d3 { --i: 3; } .d4 { --i: 4; } .d5 { --i: 5; }

/* ---------- phone ---------- */
@media (max-width: 719px) {
  .offer { padding: var(--s-4); }
  .offer::before { left: var(--s-4); right: var(--s-4); }
  .words blockquote p { font-size: 1.15rem; }
  .callband { padding: var(--s-5); }
  .chip-note { font-size: 0.78rem; padding: 0.4rem 0.55rem; }
  .chip-note b { font-size: 0.86rem; }
}

/* ---------- headings inside cards, and a comparison table ---------- */
.offer-title { font-size: var(--step-2); }
.offer--side { max-width: 46rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--step-small); }
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.compare thead th { font-family: var(--face-caps); font-weight: 650; font-size: 0.95rem; color: var(--ink); background: var(--tint); }
.compare tbody th { font-weight: 650; color: var(--ink); width: 11rem; }
.compare tr:last-child > * { border-bottom: 0; font-weight: 650; }

/* ===================== Juggle's own (shippo, green) ===================== */

/* paper on the fridge door stays paper in the evening light: fixed warm tones, ink always dark */
:root { --door-paper: light-dark(#FCF8EE, #E9DFCB); --door-ink: #2A241C; --door-ink-2: #5A5045; }

/* ---------- the year ring (the round as a family year) ---------- */
.yr { display: block; width: 100%; height: auto; overflow: visible; --yr-term: var(--say-juggle); --yr-hol: var(--say-stage); --yr-bday: var(--say-celebrate); --yr-renew: var(--say-share); --yr-appt: var(--say-organise); --yr-inset: var(--ink-2); --yr-bank: var(--boundary); --yr-paper: var(--raised); --yr-ink: var(--ink); --yr-month-a: var(--tint); --yr-month-b: var(--raised); }
.on-door .yr, .yr--step { --yr-term: #3C6A12; --yr-hol: #136170; --yr-bday: #6A2F94; --yr-renew: #A81E31; --yr-appt: #9A4307; --yr-inset: #5A5045; --yr-bank: #8A7E6E; --yr-paper: var(--door-paper); --yr-ink: var(--door-ink); --yr-month-a: #EEE6D2; --yr-month-b: var(--door-paper); }
.yr-paper { fill: var(--yr-paper); }
.yr-month--a { fill: var(--yr-month-a); } .yr-month--b { fill: var(--yr-month-b); }
.yr-line { fill: none; stroke: var(--yr-bank); stroke-width: 1; }
.yr-initial { font-family: var(--face-caps); font-weight: 650; font-size: 14px; fill: var(--yr-ink); }
.yr-term { fill: none; stroke: var(--yr-term); stroke-width: 9; stroke-linecap: round; }
.yr-holiday { fill: none; stroke: var(--yr-hol); stroke-width: 9; stroke-linecap: round; }
.yr-inset { fill: var(--yr-paper); stroke: var(--yr-inset); stroke-width: 2.5; }
.yr-birthday { fill: var(--yr-bday); }
.yr-renewal { fill: var(--yr-renew); }
.yr-appt { fill: var(--yr-appt); }
.yr-bank { fill: none; stroke: var(--yr-bank); stroke-width: 2.5; stroke-linecap: round; }
.yr .yr-hop, .yr .is-new { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .yr--hero .yr-hop { animation: yr-hop 760ms var(--ease-out) both; }
  .yr-d0 { animation-delay: 300ms !important; } .yr-d1 { animation-delay: 380ms !important; } .yr-d2 { animation-delay: 460ms !important; } .yr-d3 { animation-delay: 540ms !important; }
  .yr-d4 { animation-delay: 620ms !important; } .yr-d5 { animation-delay: 700ms !important; } .yr-d6 { animation-delay: 780ms !important; } .yr-d7 { animation-delay: 860ms !important; }
  .yr-d8 { animation-delay: 940ms !important; } .yr-d9 { animation-delay: 1020ms !important; } .yr-d10 { animation-delay: 1100ms !important; } .yr-d11 { animation-delay: 1180ms !important; }
  .process-stage-frame.is-shown .is-new { animation: yr-pop 520ms var(--ease-out) both; }
  .process-stage-frame.is-shown .yr-k1 { animation-delay: 120ms; } .process-stage-frame.is-shown .yr-k2 { animation-delay: 240ms; } .process-stage-frame.is-shown .yr-k3 { animation-delay: 360ms; }
  .process-stage-frame.is-shown .yr-k4 { animation-delay: 480ms; } .process-stage-frame.is-shown .yr-k5 { animation-delay: 600ms; } .process-stage-frame.is-shown .yr-k6 { animation-delay: 720ms; } .process-stage-frame.is-shown .yr-k7 { animation-delay: 840ms; }
}
html.lt-js:not(.lt-ready) .yr * { animation-play-state: paused; }
@keyframes yr-hop { 0% { opacity: 0; transform: translateY(-14px); } 45% { opacity: 1; transform: translateY(2px); } 70% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes yr-pop { from { opacity: 0; transform: scale(.3); } }
.yr-centre { position: absolute; inset: 30%; display: grid; place-content: center; gap: 0.35rem; text-align: center; }
.yr-centre b { font-family: var(--face-head); font-weight: 600; font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); line-height: 1.15; }
.yr-centre span { font-family: var(--face-note); font-weight: 600; font-size: clamp(0.82rem, 0.75rem + 0.3vw, 0.98rem); color: var(--ink-2); line-height: 1.3; }
.yr-key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--step-quiet); color: var(--ink-2); }
.yr-key li { display: inline-flex; align-items: center; gap: 0.45em; }
.yr-key i { display: inline-block; width: 0.8rem; height: 0.8rem; }
.key-term { border-radius: 4px; height: 0.4rem !important; width: 1.1rem !important; background: var(--say-juggle); }
.key-bday { border-radius: 50%; background: var(--say-celebrate); }
.key-renew { border-radius: 2px; background: var(--say-share); }
.key-appt { transform: rotate(45deg) scale(.8); background: var(--say-organise); }
.key-hol { border-radius: 4px; height: 0.4rem !important; width: 1.1rem !important; background: var(--say-stage); }

/* ---------- the fridge (front page): notes fly in, then file into one month ---------- */
.fridge { position: relative; }
.fridge-steps { display: grid; gap: var(--s-7); margin: 0; padding: 0; list-style: none; }
.fridge-stage { position: relative; z-index: 5; }
.fridge-door { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; container-type: inline-size; background: var(--tint); box-shadow: 0 24px 50px -30px rgb(20 16 10 / .6); }
.fridge-door > picture, .fridge-door > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fridge-door::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 6px solid color-mix(in srgb, var(--area-ink) 24%, transparent); pointer-events: none; z-index: 8; }
.piece { position: absolute; z-index: 3; display: block; transform-origin: 50% 10%; }
.piece picture, .piece img { display: block; width: 100%; height: auto; }
.piece-words { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.2em; padding: 18% 14% 12%; text-align: center; color: var(--door-ink); font-family: var(--face-note); font-weight: 600; font-size: 1.45cqi; line-height: 1.2; }
.piece-words b { font-size: 1.12em; }
.piece-words small { font-size: 0.86em; color: var(--door-ink-2); }
.magnet { position: absolute; z-index: 4; left: 50%; top: -1.1cqi; width: 3.4cqi; height: 3.4cqi; margin-left: -1.7cqi; border-radius: 50%; box-shadow: 0 0.35cqi 0.6cqi rgb(20 16 10 / .35), inset 0 -0.4cqi 0.5cqi rgb(0 0 0 / .18), inset 0 0.4cqi 0.5cqi rgb(255 255 255 / .35); }
.magnet--sage { background: #7E9478; } .magnet--rose { background: #C9908A; } .magnet--mustard { background: #C9A245; } .magnet--slate { background: #6E8494; }
/* where each piece lands on the door (the door spans about 25% to 77% of the picture's width) */
.piece--letter { left: 29%; top: 20%; width: 17%; --rot: -3deg; }
.piece--card { left: 51%; top: 15%; width: 16%; --rot: 4deg; }
.piece--invite { left: 52.5%; top: 38%; width: 13.5%; --rot: -5deg; }
.piece--renewal { left: 30.5%; top: 55%; width: 18%; --rot: 2deg; }
.piece--letter .piece-words { padding: 22% 12% 18%; }
.piece--invite .piece-words { padding: 26% 12% 14%; }
.piece--renewal .piece-words { padding: 4% 12% 46%; }
.piece--card .piece-words { padding: 12% 10%; }
/* the month, filed: one tidy calendar on the door */
.month { position: absolute; z-index: 2; left: 29%; top: 13%; width: 39%; padding: 1.4cqi 1.6cqi 1.6cqi; border-radius: 0.8cqi; background: var(--door-paper); color: var(--door-ink); box-shadow: 0 1cqi 2cqi -1cqi rgb(20 16 10 / .5); font-size: 1.35cqi; line-height: 1.2; }
.month .magnet { top: -1.2cqi; }
.month-name { font-family: var(--face-head); font-weight: 600; font-size: 2.3cqi; text-align: center; margin-bottom: 0.8cqi; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3cqi; margin: 0; padding: 0; list-style: none; }
.month-grid li { position: relative; min-height: 4.4cqi; padding: 0.3cqi 0.35cqi; border-radius: 0.35cqi; background: #F1EADA; font-family: var(--face-caps); font-weight: 600; font-size: 1.05cqi; }
.month-grid .dow { min-height: 0; background: none; text-align: center; color: var(--door-ink-2); letter-spacing: 0.08em; }
.month-grid .blank { background: none; }
.month-grid .ev { background: #E2EBD2; }
.month-grid .ev em { display: block; margin-top: 0.2cqi; font-family: var(--face-note); font-style: normal; font-weight: 600; font-size: 0.98cqi; line-height: 1.1; color: var(--door-ink); }
.month-grid .ev--renew { background: #F2DCDA; } .month-grid .ev--bday { background: #E8DDEE; } .month-grid .ev--appt { background: #F3E1CF; }
.fridge-stage .press { position: absolute; z-index: 9; right: 25%; bottom: 9%; --seal-size: 9cqi; }
.fridge-captions { position: relative; min-height: 3.2em; margin-top: var(--s-3); }
.fridge-caption { position: absolute; inset: 0 0 auto; margin: 0; font-family: var(--face-note); font-weight: 600; font-size: 1.05rem; line-height: 1.35; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 320ms ease-out, transform 320ms var(--ease-out); }
.fridge-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.fridge-meta .caption { margin: 0; }

/* states: with JavaScript the door fills step by step; without it, the month is shown filed */
.lt-js .fridge .piece { opacity: 0; transform: translate(var(--fx, 40cqi), var(--fy, -20cqi)) rotate(calc(var(--rot) * 6)) scale(1.4); transition: transform 520ms var(--ease-out), opacity 300ms ease-out; }
.piece--letter { --fx: -40cqi; --fy: 10cqi; } .piece--card { --fx: 40cqi; --fy: -24cqi; } .piece--invite { --fx: 44cqi; --fy: 18cqi; } .piece--renewal { --fx: -42cqi; --fy: 34cqi; }
.lt-js .fridge.s1 .piece--letter, .lt-js .fridge.s2 .piece--letter, .lt-js .fridge.s3 .piece--letter, .lt-js .fridge.s4 .piece--letter,
.lt-js .fridge.s2 .piece--card, .lt-js .fridge.s3 .piece--card, .lt-js .fridge.s4 .piece--card,
.lt-js .fridge.s3 .piece--invite, .lt-js .fridge.s4 .piece--invite,
.lt-js .fridge.s4 .piece--renewal { opacity: 1; transform: rotate(var(--rot)); }
/* the fold: each piece lifts off and shrinks into the month, 120 ms apart */
.lt-js .fridge.s5 .piece { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0deg) scale(.25); transition: transform 700ms var(--ease-turn), opacity 500ms ease-in 200ms; }
.piece--letter { --tx: 8cqi; --ty: 6cqi; } .piece--card { --tx: -6cqi; --ty: 10cqi; } .piece--invite { --tx: -8cqi; --ty: -4cqi; } .piece--renewal { --tx: 9cqi; --ty: -14cqi; }
.lt-js .fridge.s5 .piece--card { transition-delay: 120ms, 320ms; } .lt-js .fridge.s5 .piece--invite { transition-delay: 240ms, 440ms; } .lt-js .fridge.s5 .piece--renewal { transition-delay: 360ms, 560ms; }
.lt-js .fridge .month { opacity: 0; transform: scale(.9) translateY(2cqi); transition: opacity 360ms ease-out, transform 420ms var(--ease-out); }
.lt-js .fridge.s5 .month { opacity: 1; transform: none; transition-delay: 620ms; }
.lt-js .fridge.s0 .fridge-caption--0, .lt-js .fridge.s1 .fridge-caption--1, .lt-js .fridge.s2 .fridge-caption--2, .lt-js .fridge.s3 .fridge-caption--3, .lt-js .fridge.s4 .fridge-caption--4, .lt-js .fridge.s5 .fridge-caption--5 { opacity: 1; transform: none; }
html:not(.lt-js) .fridge .piece { display: none; }
html:not(.lt-js) .fridge-caption--5 { position: static; opacity: 1; transform: none; }
html:not(.lt-js) .fridge-stage .press { opacity: 1; transform: none; }
/* dark theme: a cut-out takes the evening light of the door beneath it (brief 12, row 2) */
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .piece picture { opacity: .86; } }
html[data-theme="dark"] .piece picture { opacity: .86; }
.fridge-steps .process-step p { max-width: 40ch; }

@media (min-width: 1024px) {
  .fridge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .fridge-stage { order: 2; position: sticky; top: calc(50svh - min(38svh, 22rem)); }
  .fridge-door { width: min(100%, calc(70svh * 4 / 3)); }
  .fridge-steps .process-step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 1023px) {
  .fridge-stage { position: sticky; top: 0; padding: var(--s-2) 0 var(--s-2); background: var(--tint); }
  .fridge-door { width: min(100%, calc(40svh * 4 / 3)); margin-inline: auto; }
  .fridge-captions { min-height: 2.8em; }
  .fridge-caption { font-size: 0.95rem; text-align: center; }
  .fridge-meta { justify-content: center; }
  .fridge-steps { gap: var(--s-5); padding-top: var(--s-5); }
  .fridge-steps .process-step { padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); min-height: 46svh; }
  .piece-words { font-size: 2.2cqi; }
  .piece--letter { width: 20%; left: 27%; } .piece--card { width: 19%; left: 51%; } .piece--invite { width: 16%; left: 53%; } .piece--renewal { width: 21%; left: 29%; }
  .month-grid li { font-size: 1.5cqi; } .month-grid .ev em { font-size: 1.35cqi; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-js .fridge .piece, .lt-js .fridge.s5 .piece, .lt-js .fridge .month, .fridge-caption { transition: opacity 120ms linear !important; transition-delay: 0ms !important; }
  .lt-js .fridge .piece { transform: rotate(var(--rot)); }
  .lt-js .fridge.s5 .piece { transform: rotate(var(--rot)); }
}

/* ---------- one-offs: notes pinned under magnets ---------- */
.pinned { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: var(--s-4) 0 0; list-style: none; }
.pin { position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); border-radius: 6px; background: var(--raised); border: 1px solid var(--hair); box-shadow: 0 16px 30px -22px rgb(20 16 10 / .5); transform: rotate(var(--tilt, -1deg)); transition: transform var(--t-turn) var(--ease-out); }
.pin:nth-child(2n) { --tilt: 1.2deg; } .pin:nth-child(3n) { --tilt: -0.6deg; }
.pin:hover, .pin:focus-within { transform: rotate(0deg) translateY(-3px); }
.pin .magnet-dot { position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; box-shadow: 0 3px 6px rgb(20 16 10 / .3), inset 0 -3px 4px rgb(0 0 0 / .18), inset 0 3px 4px rgb(255 255 255 / .3); }
.pin:nth-child(4n+1) .magnet-dot { background: #7E9478; } .pin:nth-child(4n+2) .magnet-dot { background: #C9908A; } .pin:nth-child(4n+3) .magnet-dot { background: #C9A245; } .pin:nth-child(4n+4) .magnet-dot { background: #6E8494; }
.pin h2, .pin h3 { font-size: var(--step-2); }
.pin ul { margin: 0; padding-left: 1.1rem; font-size: var(--step-small); }
@media (prefers-reduced-motion: reduce) { .pin, .pin:hover, .pin:focus-within { transform: none; transition: none; } }

/* ---------- monthly plans: hours as a ring of twenty ---------- */
.hours { width: 6.5rem; height: 6.5rem; }
.hours .h-seg { fill: var(--tint); stroke: var(--raised); stroke-width: 2; }
.hours .h-seg.on { fill: var(--area-ink); }
.hours .h-num { font-family: var(--face-head); font-weight: 600; font-size: 30px; fill: var(--ink); }
.hours .h-unit { font-family: var(--face-caps); font-weight: 650; font-size: 9px; letter-spacing: 2px; fill: var(--ink-2); }
.offer-top { display: flex; align-items: center; gap: var(--s-4); }
@media (prefers-reduced-motion: no-preference) {
  .hours .h-seg.on { animation: h-on 300ms ease-out both; animation-delay: calc(var(--n, 0) * 40ms + 200ms); }
}
html.lt-js:not(.lt-ready) .hours * { animation-play-state: paused; }
@keyframes h-on { from { fill: var(--tint); } }

/* ---------- the second navbar's name: the letters hop in a gentle wave (8.3) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .area-nav-home:hover .ch, .area-nav-home:focus-visible .ch { animation: ch-hop 520ms var(--ease-out) both; }
  .area-nav-name .ch:nth-child(2) { animation-delay: 80ms; } .area-nav-name .ch:nth-child(3) { animation-delay: 160ms; } .area-nav-name .ch:nth-child(4) { animation-delay: 240ms; }
  .area-nav-name .ch:nth-child(5) { animation-delay: 320ms; } .area-nav-name .ch:nth-child(6) { animation-delay: 400ms; }
}
@keyframes ch-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); } }
.yr-wrap { position: relative; }

.hours .hn0{--n:0;}.hours .hn1{--n:1;}.hours .hn2{--n:2;}.hours .hn3{--n:3;}.hours .hn4{--n:4;}.hours .hn5{--n:5;}.hours .hn6{--n:6;}.hours .hn7{--n:7;}.hours .hn8{--n:8;}.hours .hn9{--n:9;}.hours .hn10{--n:10;}.hours .hn11{--n:11;}.hours .hn12{--n:12;}.hours .hn13{--n:13;}.hours .hn14{--n:14;}.hours .hn15{--n:15;}.hours .hn16{--n:16;}.hours .hn17{--n:17;}.hours .hn18{--n:18;}.hours .hn19{--n:19;}
.which { display: grid; gap: 0; margin: 0; max-width: 52rem; }
.which > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--hair); }
.which > div:last-child { border-bottom: 1px solid var(--hair); }
.which dt { color: var(--ink); }
.which dd { margin: 0; }
.which dd a { display: inline-flex; align-items: center; min-height: var(--target); }

/* ---------- a family year: the ring pinned on the fridge door ---------- */
.on-door { position: absolute; z-index: 2; left: 31%; top: 8%; width: 38%; filter: drop-shadow(0 6px 10px rgb(20 16 10 / .35)); }
.on-door .magnet { top: -2%; width: 9%; height: 12%; margin-left: -4.5%; }
.process-stage-frame .on-door[data-note] { opacity: 1; transform: none; }
.year-fig { aspect-ratio: 4 / 3; }
.year-fig > picture, .year-fig > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.year-process .process-stage-inner { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .year-process.is-staged .process-stage { height: auto; top: calc(50svh - min(30svh, 18rem)); }
  .year-process.is-staged .process-stage-inner { height: auto; width: min(100%, calc(60svh * 4 / 3)); }
}
.year-key { margin-top: var(--s-6); }
.door-label { position: absolute; z-index: 9; left: 2.4cqi; top: 2.4cqi; }
.fridge-illus { margin-top: var(--s-1); }
.piece--renewal .piece-words { padding: 13% 12% 44%; }
@media (max-width: 1023px) {
  .fridge-captions { margin-top: var(--s-2); min-height: 2.7em; }
  .fridge-caption { font-size: 0.9rem; }
  .fridge-illus { text-align: center; font-size: 0.75rem; }
}