*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scroll-behavior: smooth; }
body { font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-tint); 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: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: calc(var(--measure) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--s-12); }
.section--sunk { background: var(--paper-sunk); }
.section--ink { background: var(--ink); color: var(--on-ink); --wheel-ink: var(--on-ink); --wheel-muted: var(--on-ink); }
.section--ink .lead, .section--ink .meta { color: color-mix(in srgb, var(--on-ink) 78%, transparent); }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.grid-2 { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); } }
.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-8); }
.rule--ink { border-top: 1.5px solid var(--ink); }
.display, h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .96; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; }
h4, .h4 { font: 700 var(--fs-h4)/1.25 var(--font-ui); letter-spacing: -.01em; }
.display em, h1 em, h2 em, h3 em { font-style: italic; color: var(--accent-ink); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 38ch; }
.small { font-size: var(--fs-small); }
.meta { font-size: var(--fs-meta); color: var(--ink-2); }
.kicker { font: 700 var(--fs-tiny)/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.prose { max-width: var(--measure); font-size: 18px; line-height: 1.7; hanging-punctuation: first; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.dropcap::first-letter { float: left; font: 600 4.6em/.8 var(--font-display); color: var(--accent-ink); padding: .06em .08em 0 0; margin-top: .05em; }
.glyph { font-family: var(--font-glyph); font-weight: 400; }
.hand { font: 600 22px/1.05 var(--font-hand); color: var(--accent-ink); }
mark { background: var(--mark); color: inherit; padding: 0 .1em; border-radius: 2px; }
.issue { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font: 700 var(--fs-tiny)/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 7px 0; }
.header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; }
.logo { display: inline-flex; align-items: baseline; font: 700 25px/1 var(--font-display); letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.logo--small { font-size: 21px; }
.logo__sun { display: inline-block; vertical-align: -.013em; width: .44em; height: .44em; margin-inline: .035em; }
.logo__ring { fill: currentColor; }
.logo__core { fill: var(--accent); }
.nav { display: flex; align-items: center; gap: var(--s-5); font-size: var(--fs-small); font-weight: 600; }
.nav a { text-decoration: none; padding-block: 10px; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.nav .btn { display: none; }
@media (min-width: 900px) { .nav .btn { display: inline-flex; } }
.header--back .header__in { justify-content: flex-start; gap: var(--s-3); }
.back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: var(--fs-small); min-height: 44px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-meta); color: var(--ink-2); list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); font: 700 16px/1.1 var(--font-ui); letter-spacing: -.005em; text-decoration: none; text-align: center; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); -webkit-tap-highlight-color: transparent; }
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink); }
.btn--primary:hover { --btn-bg: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn--paper { --btn-bg: var(--paper-raised); --btn-fg: var(--ink); --btn-bd: var(--paper-raised); }
.btn--block { display: flex; width: 100%; justify-content: space-between; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { min-height: 60px; font-size: 17px; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.link { color: var(--accent-ink); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.link:hover { text-decoration: underline; }
.textbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; min-height: 44px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-size: 14px; font-weight: 600; text-decoration: none; background: var(--paper-raised); }
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip .glyph { font-size: 15px; }
.tag { display: inline-block; font: 700 11px/1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-xs); background: var(--accent-tint); color: var(--accent-ink); }
.tag--fire { background: var(--fire-tint); color: var(--fire); }
.tag--earth { background: var(--earth-tint); color: var(--earth); }
.tag--air { background: var(--air-tint); color: var(--air); }
.tag--water { background: var(--water-tint); color: var(--water); }
.stamp { display: inline-block; transform: rotate(-7deg); font: 800 11px/1.15 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--accent-ink); border: 2px solid currentColor; border-radius: 8px; padding: 6px 9px; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence baseFrequency='1.4' numOctaves='1'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence baseFrequency='1.4' numOctaves='1'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>"); -webkit-mask-size: 120px 60px; mask-size: 120px 60px; }
.stamp--round { border-radius: 50%; width: 96px; height: 96px; display: inline-grid; place-items: center; padding: 8px; }
.ticket { position: relative; display: inline-flex; align-items: baseline; gap: 3px; background: var(--air); color: #1F1A15; font: 800 16px/1 var(--font-ui); padding: 9px 14px 9px 22px; border-radius: 4px 10px 10px 4px; white-space: nowrap; }
.ticket::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--paper); }
.ticket::after { content: ""; position: absolute; left: 15px; top: 3px; bottom: 3px; border-left: 1.5px dashed rgba(31,26,21,.45); }
.note { position: relative; display: inline-block; font: 600 22px/1.05 var(--font-hand); color: var(--accent-ink); transform: rotate(-4deg); }
.note svg { width: 64px; height: 36px; overflow: visible; }
.note path, .scribble { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.circled { position: relative; display: inline-block; white-space: nowrap; padding-inline: 2px; margin-inline: 2px; }
.circled path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.circled svg { position: absolute; left: -9px; top: -5px; width: calc(100% + 18px); max-width: none; height: calc(100% + 10px); overflow: visible; pointer-events: none; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .js .pen-in path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .pen-in.is-in path { animation: pen 900ms var(--ease) forwards; } }
@keyframes pen { to { stroke-dashoffset: 0; } }
.field { display: grid; gap: 8px; }
.field__label { font-weight: 700; font-size: var(--fs-small); }
.field__hint { font-size: var(--fs-meta); color: var(--ink-2); }
.field__error { display: none; font-size: var(--fs-meta); font-weight: 600; color: var(--danger); }
.field.is-error .field__error { display: block; }
.field.is-error .input { border-color: var(--danger); background: var(--danger-tint); }
.input { width: 100%; min-height: 56px; padding: 14px 18px; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--r-md); font-size: 18px; font-weight: 600; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder { color: var(--ink-3); font-weight: 500; }
.input:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.input--xl { min-height: 72px; font: 600 34px/1 var(--font-display); letter-spacing: .02em; text-align: center; padding: 10px 8px; }
.dateparts { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; }
.dateparts .field__label { font-size: var(--fs-meta); color: var(--ink-2); font-weight: 600; text-align: center; }
.checkline { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--fs-small); }
.checkline input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin-top: 1px; }
.toggle { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--paper-sunk); border-radius: var(--r-pill); }
.toggle button { min-height: 46px; border: 0; background: none; border-radius: var(--r-pill); font-weight: 700; cursor: pointer; color: var(--ink-2); }
.toggle button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: var(--sh-1); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.steps span { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.steps span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.steps span.is-done::after, .steps span.is-current::after { transform: scaleX(1); }
.steps span.is-current::after { background: var(--accent); }
.step { display: none; }
.step.is-active { display: block; animation: step-in var(--dur-slow) var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(12px); } }
.formcard { background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: var(--r-xl); padding: var(--s-6) var(--s-5); box-shadow: var(--sh-2); }
.whyline { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-2); background: var(--paper-sunk); border-radius: var(--r-md); padding: 12px 14px; }
.whyline .glyph { color: var(--accent-ink); font-size: 18px; line-height: 1.3; }
.ac { position: relative; }
.ac__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; list-style: none; padding: 6px; margin: 0; background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-2); max-height: 300px; overflow: auto; }
.ac__item { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; min-height: 48px; }
.ac__item b { font-weight: 700; }
.ac__item span { font-size: var(--fs-meta); color: var(--ink-2); }
.ac__item[aria-selected="true"], .ac__item:hover { background: var(--paper-sunk); }
.ac__empty { padding: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.card--ink { border: 1.5px solid var(--ink); }
.card--flat { background: transparent; }
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.big3 > * { padding: 12px 0 12px 10px; border-left: 1px solid var(--ink); text-decoration: none; }
.big3 > *:first-child { border-left: 0; padding-left: 0; }
.big3 small { display: block; font: 700 11px/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.big3 b { display: block; font: 600 clamp(20px, 5.4vw, 27px)/1.05 var(--font-display); margin-top: 4px; }
.big3 .glyph { color: var(--accent-ink); font-size: 18px; }
.big3 a.term { background-image: none; font-weight: inherit; }
.big3 a.term:hover { background-color: var(--paper-sunk); }
.big3 em { display: block; font-style: normal; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.spheres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .spheres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.sphere { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 16px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease); }
.sphere:hover { transform: translateY(-2px) rotate(-.4deg); color: var(--ink); }
.sphere b { font: 600 26px/1 var(--font-display); padding-right: 30px; }
.sphere span { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.sphere .glyph { position: absolute; right: 12px; top: 8px; font-size: 34px; opacity: .55; }
.sphere--fire { background: var(--fire-tint); } .sphere--fire .glyph { color: var(--fire); }
.sphere--earth { background: var(--earth-tint); } .sphere--earth .glyph { color: var(--earth); }
.sphere--air { background: var(--air-tint); } .sphere--air .glyph { color: var(--air); }
.sphere--water { background: var(--water-tint); } .sphere--water .glyph { color: var(--water); }
.plate { position: relative; overflow: hidden; background: var(--paper-sunk); }
.plate__img { position: absolute; pointer-events: none; filter: var(--engraving-filter); mix-blend-mode: var(--engraving-blend); opacity: .5; }
.plate__body { position: relative; }
.credit { font-size: 11px; font-style: italic; color: var(--ink-2); }
.skynow { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.skynow .wheel { width: 112px; }
.skynow__time { font: 700 var(--fs-tiny)/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.skynow__line { font: 600 24px/1.1 var(--font-display); margin-top: 4px; }
.skynow__line .glyph { font-size: 18px; color: var(--accent-ink); }
.tariffs { display: grid; gap: 14px; }
@media (min-width: 900px) { .tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.tariff { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: 22px 20px 20px; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur) var(--ease), box-shadow var(--dur); }
.tariff:hover { border-color: var(--ink); }
.tariff:has(input:checked) { border-color: var(--ink); box-shadow: var(--sh-press); transform: translate(-2px, -2px); }
.tariff input { position: absolute; opacity: 0; pointer-events: none; }
.tariff__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tariff__name { font: 600 26px/1.05 var(--font-display); }
.tariff__price { font: 700 30px/1 var(--font-display); white-space: nowrap; }
.tariff__price small { font: 700 15px var(--font-ui); }
.tariff__list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.tariff__list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.tariff__list li::before { content: "✓"; color: var(--earth); font-weight: 800; }
.tariff__list li.is-plus::before { content: "+"; color: var(--accent-ink); }
.tariff__radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); flex: none; display: grid; place-items: center; }
.tariff:has(input:checked) .tariff__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.tariff--featured { border-color: var(--ink); background: var(--paper-raised); }
.tariff__badge { position: absolute; top: -13px; left: 20px; background: var(--accent); color: var(--on-accent); font: 800 12px/1 var(--font-ui); letter-spacing: .02em; padding: 7px 11px; border-radius: var(--r-pill); }
.paybar { display: grid; gap: 10px; margin-top: 18px; }
.paynote { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: var(--fs-meta); color: var(--ink-2); }
.paynote span::before { content: "·"; margin-right: 14px; color: var(--ink-3); }
.paynote span:first-child::before { content: none; }
.versus { display: grid; gap: 12px; }
@media (min-width: 700px) { .versus { grid-template-columns: 1fr 1fr; } }
.versus__col { border-radius: var(--r-lg); padding: 18px; }
.versus__col--them { background: var(--paper-sunk); color: var(--ink-2); }
.versus__col--them s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.versus__col--us { background: var(--paper-raised); border: 1.5px solid var(--ink); }
.versus__big { font: 600 34px/1 var(--font-display); color: var(--ink); margin: 6px 0; }
.sealed { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-raised); border: 1px solid var(--line); }
.sealed__text { padding: 20px 20px 34px; filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; font-size: var(--fs-small); line-height: 1.7; }
.sealed__flap { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 20px; background: linear-gradient(to bottom right, transparent calc(50% - .6px), color-mix(in srgb, var(--ink) 18%, transparent) 50%, transparent calc(50% + .6px)) top left / 50% 52% no-repeat, linear-gradient(to bottom left, transparent calc(50% - .6px), color-mix(in srgb, var(--ink) 18%, transparent) 50%, transparent calc(50% + .6px)) top right / 50% 52% no-repeat, color-mix(in srgb, var(--paper-raised) 55%, transparent); }
.sealed__title { font: 600 24px/1.1 var(--font-display); max-width: 18ch; }
.sealed__meta { font-size: var(--fs-meta); color: var(--ink-2); max-width: 30ch; }
.seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #F6E3D6; background: radial-gradient(circle at 35% 30%, var(--wax-hi), var(--wax) 62%); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--wax) 70%, #000 30%), 0 3px 0 rgba(0,0,0,.18), 0 8px 18px -8px rgba(80, 20, 10, .7); font: 600 26px/1 var(--font-glyph); clip-path: polygon(50% 0, 61% 4%, 72% 2%, 80% 10%, 92% 14%, 95% 26%, 100% 38%, 97% 50%, 100% 62%, 94% 73%, 91% 86%, 79% 90%, 70% 98%, 58% 96%, 47% 100%, 36% 96%, 25% 98%, 17% 89%, 6% 84%, 4% 72%, 0 60%, 3% 48%, 0 36%, 6% 25%, 9% 13%, 21% 9%, 30% 2%, 41% 4%); }
.sealed.is-open .seal { animation: seal-break 700ms var(--ease) forwards; }
.sealed.is-open .sealed__flap { animation: flap-open 700ms 300ms var(--ease) forwards; }
.sealed.is-open .sealed__text { animation: unblur 700ms 500ms var(--ease) forwards; }
@keyframes seal-break { 40% { transform: scale(1.1) rotate(-6deg); } to { transform: scale(.4) rotate(25deg); opacity: 0; } }
@keyframes flap-open { to { opacity: 0; visibility: hidden; } }
@keyframes unblur { to { filter: none; opacity: 1; } }
a.term, .term { color: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background-image: linear-gradient(to right, var(--accent) 45%, transparent 45%); background-size: 6px 1.5px; background-repeat: repeat-x; background-position: 0 100%; padding-bottom: 1px; transition: background-color var(--dur-fast); }
a.term:hover, .term:hover, .term[aria-expanded="true"] { color: inherit; background-color: var(--accent-tint); border-radius: 2px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(20, 16, 12, .42); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); background: var(--paper-raised); border-radius: 24px 24px 0 0; box-shadow: var(--sh-sheet); padding: 10px var(--gutter) calc(22px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform 380ms var(--ease); max-height: 82vh; overflow: auto; }
.sheet.is-open { transform: none; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.sheet__close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--ink-2); }
@media (min-width: 900px) { .sheet { left: auto; right: auto; bottom: auto; width: 380px; border-radius: var(--r-lg); border: 1.5px solid var(--ink); box-shadow: var(--sh-2); padding: 18px 20px 20px; transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur) var(--ease); } .sheet.is-open { transform: none; opacity: 1; pointer-events: auto; } .sheet__grip { display: none; } .sheet-backdrop.is-open { background: transparent; } }
.termcard { display: grid; gap: 10px; }
.termcard__kicker { display: flex; gap: 8px; align-items: center; }
.termcard__title { font: 600 32px/1 var(--font-display); }
.termcard__aka { font-size: var(--fs-meta); color: var(--earth); font-weight: 700; }
.termcard__yours { background: var(--accent-tint); border-radius: var(--r-md); padding: 12px 14px; font-size: var(--fs-small); }
.termcard__yours b { color: var(--accent-ink); }
.stories { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.stories__bar { display: grid; grid-auto-flow: column; gap: 5px; padding: 12px var(--gutter) 0; position: relative; z-index: 3; }
.stories__bar span { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stories__bar span i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.stories__bar span.is-done i { transform: scaleX(1); }
.stories__bar span.is-current i { animation: story-progress var(--story-dur, 9s) linear forwards; }
.stories.is-paused .stories__bar span.is-current i { animation-play-state: paused; }
@keyframes story-progress { to { transform: scaleX(1); } }
.stories__top { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--gutter) 0; position: relative; z-index: 3; }
.stories__deck { position: relative; flex: 1; margin: 10px 12px 0; }
.story { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: 24px 22px; overflow: hidden; transition: transform 520ms var(--ease), opacity 520ms var(--ease); }
.story:nth-child(odd) { --tilt: -1.2deg; } .story:nth-child(even) { --tilt: 1deg; }
.story.is-next { transform: translateY(14px) scale(.96) rotate(var(--tilt)); opacity: 1; z-index: 1; }
.story.is-current { transform: none; z-index: 2; }
.story.is-past { transform: translateX(-115%) rotate(-8deg); opacity: 0; z-index: 3; }
.story.is-later { transform: translateY(26px) scale(.92); opacity: 0; z-index: 0; }
.story__num { font: 600 15px/1 var(--font-display); font-style: italic; color: var(--accent-ink); }
.story h2 { font-size: clamp(34px, 9vw, 46px); line-height: 1; }
.story p { font-size: 17px; color: var(--ink-2); }
.story__art { flex: 1; min-height: 120px; position: relative; display: grid; place-items: center; }
.story__tap { position: absolute; top: 0; bottom: 120px; width: 35%; z-index: 4; background: none; border: 0; cursor: pointer; }
.story__tap--prev { left: 0; } .story__tap--next { right: 0; width: 65%; }
.stories__foot { padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; position: relative; z-index: 5; }
@media (min-width: 900px) { .stories { height: auto; min-height: 100vh; align-items: center; } .stories__bar, .stories__top, .stories__foot { width: 440px; } .stories__deck { width: 440px; height: 640px; flex: none; } }
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font: 600 22px/1.2 var(--font-display); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--font-ui); color: var(--accent-ink); transition: transform var(--dur) var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; color: var(--ink-2); max-width: 60ch; }
.excerpt { position: relative; background: var(--paper-raised); border-radius: var(--r-lg); padding: 22px 20px; border: 1px solid var(--line); }
.excerpt p { font-size: 18px; line-height: 1.7; }
.margin-note { float: right; margin: 4px 0 0 10px; font: 600 21px/1 var(--font-hand); color: var(--accent-ink); transform: rotate(-3deg); white-space: nowrap; }
.margin-note::before { content: "← "; }
@media (min-width: 1100px) { .has-margin { position: relative; } .margin-note { position: absolute; top: 0; right: calc(100% + 28px); width: 170px; margin: 0; float: none; text-align: right; white-space: normal; } .margin-note::before { content: none; } .margin-note::after { content: " →"; } }
.chapter { padding-block: var(--s-10); border-top: 1px solid var(--line); }
.chapter__head { display: grid; gap: 6px; margin-bottom: var(--s-5); }
.chapter__num { font: italic 600 18px/1 var(--font-display); color: var(--accent-ink); }
.toc { list-style: none; padding: 0; counter-reset: toc; border-top: 1.5px solid var(--ink); }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline; padding: 13px 0; text-decoration: none; font: 600 21px/1.2 var(--font-display); }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 700 12px var(--font-ui); color: var(--ink-3); }
.toc a span { font: 500 13px var(--font-ui); color: var(--ink-2); }
.ink-reveal .w { display: inline; opacity: 0; filter: blur(5px); transition: opacity 700ms ease-out, filter 900ms ease-out; }
.ink-reveal .w.is-in { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .ink-reveal .w { opacity: 1; filter: none; transition: none; } }
.upsell { position: relative; display: grid; gap: 14px; border-radius: var(--r-xl); padding: 24px 20px; background: var(--ink); color: var(--on-ink); overflow: hidden; }
.upsell h3 { color: var(--on-ink); }
.upsell p { color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.upsell .btn--accent { --btn-bd: var(--accent); }
.upsell__img { position: absolute; right: -60px; bottom: -40px; width: 260px; opacity: .22; filter: grayscale(1) invert(1) contrast(1.3); mix-blend-mode: screen; pointer-events: none; }
:root[data-theme="dark"] .upsell__img { filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; }
.search { position: relative; }
.search .input { padding-left: 46px; }
.search::before { content: "⌕"; position: absolute; left: 16px; top: 50%; transform: translateY(-52%); font-size: 22px; color: var(--ink-2); pointer-events: none; }
.alpha { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.alpha::-webkit-scrollbar { display: none; }
.gloss-group { padding-top: var(--s-8); scroll-margin-top: 80px; }
.gloss-group__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 8px; }
.gloss { list-style: none; padding: 0; }
.gloss li { border-bottom: 1px solid var(--line); }
.gloss a { display: grid; grid-template-columns: 34px 1fr 18px; gap: 12px; align-items: start; padding: 14px 0; text-decoration: none; }
.gloss a:hover b { color: var(--accent-ink); }
.gloss .glyph { font-size: 22px; color: var(--accent-ink); text-align: center; line-height: 1.2; }
.gloss b { display: block; font: 600 23px/1.1 var(--font-display); }
.gloss span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.gloss a::after { content: "→"; color: var(--ink-3); align-self: center; }
.termhero { display: grid; gap: 14px; }
.termhero__glyph { font: 400 64px/1 var(--font-glyph); color: var(--accent-ink); }
.yours { display: grid; gap: 8px; border: 1.5px solid var(--ink); border-radius: var(--r-lg); padding: 16px 18px; background: var(--paper-raised); position: relative; }
.yours .kicker { color: var(--accent-ink); }
.pull { font: italic 600 clamp(26px, 2vw + 18px, 34px)/1.15 var(--font-display); border-left: 3px solid var(--accent); padding-left: 18px; margin-block: var(--s-8); max-width: 26ch; }
.bysign { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.bysign li { display: grid; grid-template-columns: 30px 110px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); align-items: baseline; }
.bysign .glyph { font-size: 20px; color: var(--accent-ink); }
.bysign b { font: 600 19px/1 var(--font-display); }
@media (max-width: 420px) { .bysign li { grid-template-columns: 28px 1fr; } .bysign li span:last-child { grid-column: 2; } }
.answer { border-radius: var(--r-lg); background: var(--paper-raised); border: 1.5px solid var(--ink); padding: 18px; display: grid; gap: 8px; }
.answer .kicker { color: var(--earth); }
.answer p { font-size: 18px; line-height: 1.55; }
.qlist { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.qlist a { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 20px/1.2 var(--font-display); }
.qlist a::after { content: "→"; font: 500 16px var(--font-ui); color: var(--ink-3); }
.cta { position: relative; border-radius: var(--r-xl); background: var(--accent); color: var(--on-accent); padding: 26px 22px; display: grid; gap: 14px; overflow: hidden; }
.cta h2, .cta h3 { color: var(--on-accent); }
.cta p { color: color-mix(in srgb, var(--on-accent) 86%, transparent); }
.cta .btn--primary { --btn-bg: var(--on-accent); --btn-fg: var(--accent); --btn-bd: var(--on-accent); }
.cta__img { position: absolute; right: -50px; top: -30px; width: 240px; opacity: .25; filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; pointer-events: none; }
.calc { display: grid; justify-items: center; gap: 14px; text-align: center; padding-block: var(--s-10); }
.calc .wheel { width: min(300px, 80vw); }
.formgrid.is-calc { display: flex !important; justify-content: center; align-items: center; min-height: calc(100vh - 120px); }
.formgrid.is-calc .formside { display: none !important; }
.formgrid.is-calc .formwrap { width: 100%; max-width: 560px; margin-inline: auto; }
.formgrid.is-calc .calc { animation: calc-in .6s ease both; }
.formgrid.is-calc .calc .wheel { width: min(440px, 82vw); }
@keyframes calc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.calc__line { font: 600 26px/1.1 var(--font-display); }
.calc__sub { font-size: var(--fs-small); color: var(--ink-2); min-height: 1.6em; }
.footer { border-top: 1.5px solid var(--ink); padding-block: var(--s-10) var(--s-12); font-size: var(--fs-small); }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__links { list-style: none; padding: 0; display: grid; gap: 4px; }
.footer__links a { text-decoration: none; display: inline-block; padding-block: 6px; }
.footer__links a:hover { text-decoration: underline; }
.disclaimer { font-size: var(--fs-meta); color: var(--ink-2); max-width: 52ch; }
.age { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 800; font-size: 13px; flex: none; }
.themeswitch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.themeswitch button { border: 0; background: none; padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); min-height: 32px; }
.themeswitch button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.stickybar { position: sticky; bottom: 0; z-index: 15; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 70%, transparent); }
@media (min-width: 900px) { .stickybar { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.signbar { display: flex; gap: 6px; overflow-x: auto; padding-block: 2px 6px; scrollbar-width: none; }
.signbar::-webkit-scrollbar { display: none; }
.signbar .chip { flex: none; }
.signbar .chip[aria-current="page"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.signhero { display: grid; gap: 10px; }
.signhero__glyph { font: 400 72px/1 var(--font-glyph); color: var(--accent-ink); }
.signhero__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-meta); color: var(--ink-2); }
.keypoints { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 6px; }
.keypoints li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.keypoints b { font: 700 var(--fs-tiny)/1.4 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.months { border-top: 1.5px solid var(--ink); }
.month { border-bottom: 1px solid var(--line); }
.month summary { list-style: none; display: grid; grid-template-columns: 1fr auto 24px; gap: 4px 12px; align-items: center; padding: 16px 0; cursor: pointer; min-height: 56px; }
.month summary::-webkit-details-marker { display: none; }
.month summary::after { content: "+"; font: 400 26px/1 var(--font-ui); color: var(--accent-ink); grid-column: 3; grid-row: 1; transition: transform var(--dur) var(--ease); }
.month[open] summary::after { transform: rotate(45deg); }
.month__name { font: 600 24px/1.1 var(--font-display); }
.month__line { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-2); }
.month__body { padding: 0 0 20px; display: grid; gap: 10px; max-width: var(--measure); }
.month__event { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-meta); color: var(--ink-2); }
.month__event .glyph { color: var(--accent-ink); font-size: 16px; }
.yearline { position: relative; display: grid; gap: 10px; }
.yearline__scale { display: grid; grid-template-columns: repeat(12, 1fr); font: 700 10px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.yearline__scale span { border-left: 1px solid var(--line); padding: 0 0 4px 3px; }
.yearline__row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; font-size: var(--fs-meta); }
.yearline__row b { font-weight: 700; }
.yearline__track { position: relative; height: 18px; border-radius: var(--r-pill); background: var(--paper-sunk); }
.yearline__seg { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); border-radius: var(--r-pill); background: var(--accent); }
.yearline__seg--soft { background: var(--water); }
.yearline__none { font-size: var(--fs-meta); color: var(--ink-3); }
.yearline__head { grid-template-columns: 92px 1fr; display: grid; gap: 10px; }
.rtable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); border-top: 1.5px solid var(--ink); }
.rtable th { text-align: left; font: 700 var(--fs-tiny)/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); }
.rtable td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rtable td b { font: 600 19px/1.2 var(--font-display); }
@media (max-width: 600px) {
  .rtable thead { display: none; }
  .rtable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rtable td { padding: 0; border: 0; }
  .rtable td:nth-child(1) { grid-column: 1; }
  .rtable td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; color: var(--ink-2); font-size: var(--fs-meta); }
  .rtable td:nth-child(n+3) { grid-column: 1 / -1; color: var(--ink-2); }
}
.signgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .signgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.signcard { position: relative; display: grid; gap: 6px; align-content: start; min-height: 168px; padding: 16px 14px; border-radius: var(--r-lg); background: var(--paper-raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--dur-fast), transform var(--dur) var(--ease); }
.signcard:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.signcard .glyph { font-size: 30px; line-height: 1; }
.signcard b { font: 600 24px/1 var(--font-display); }
.signcard small { font-size: 12px; color: var(--ink-3); }
.signcard span { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.signcard--fire .glyph { color: var(--fire); } .signcard--earth .glyph { color: var(--earth); } .signcard--air .glyph { color: var(--air); } .signcard--water .glyph { color: var(--water); }
.calcform { display: grid; gap: 14px; background: var(--paper-raised); border: 1.5px solid var(--ink); border-radius: var(--r-xl); padding: 20px 18px; }
.calcform__row { display: grid; gap: 12px; }
@media (min-width: 700px) { .calcform__row--2 { grid-template-columns: 1fr 1fr; } .calcform__row--3 { grid-template-columns: 1.2fr 1fr 1.4fr; } }
.calcform .input[type="date"], .calcform .input[type="time"] { font-family: var(--font-ui); }
.calcform__person { display: grid; gap: 10px; padding-top: 4px; }
.calcform__person + .calcform__person { border-top: 1px dashed var(--line); padding-top: 14px; }
.calcresult { display: grid; gap: 12px; padding: 22px 20px; border-radius: var(--r-xl); background: var(--paper-raised); border: 1px solid var(--line); scroll-margin-top: 80px; }
.calcresult__main { display: flex; gap: 14px; align-items: center; }
.calcresult__glyph { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); font: 400 38px/1 var(--font-glyph); }
.calcresult__title { font: 600 clamp(28px, 7vw, 38px)/1.02 var(--font-display); }
.calcresult__sub { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 4px; }
.calcresult .wheel { width: min(260px, 70vw); margin-inline: auto; }
.notice { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--air-tint); color: var(--ink); }
.notice__title { display: flex; gap: 8px; align-items: baseline; font-weight: 700; }
.notice__title .glyph { color: var(--air); font-size: 18px; }
.notice p { font-size: var(--fs-small); }
.notice--error { background: var(--danger-tint); }
.notice--error .notice__title { color: var(--danger); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split > div { padding: 12px; border-radius: var(--r-md); background: var(--paper-raised); border: 1px solid var(--line); }
.split b { display: block; font: 600 21px/1.1 var(--font-display); margin-top: 2px; }
.split small { font: 700 11px/1.3 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.inlineform { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.inlineform .input { min-height: 48px; padding: 10px 14px; }
.inlineform .btn { min-height: 48px; }
.statelabel { font: 700 11px/1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.statelabel::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.pairhero { display: flex; align-items: center; gap: 12px; font: 400 54px/1 var(--font-glyph); color: var(--accent-ink); }
.pairhero span { font: italic 600 26px/1 var(--font-display); color: var(--ink-3); }
.facets { display: grid; gap: 10px; }
@media (min-width: 700px) { .facets { grid-template-columns: repeat(3, 1fr); } }
.facet { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--paper-raised); border: 1px solid var(--line); }
.facet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.facet__head b { font: 600 22px/1.1 var(--font-display); }
.facet p { font-size: var(--fs-small); color: var(--ink-2); }
.pairs { display: flex; flex-wrap: wrap; gap: 6px; }
.toolcards { display: grid; gap: 10px; }
@media (min-width: 700px) { .toolcards { grid-template-columns: repeat(3, 1fr); } }
.toolcard { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper-raised); text-decoration: none; color: var(--ink); }
.toolcard:hover { border-color: var(--ink); color: var(--ink); }
.toolcard b { font: 600 22px/1.1 var(--font-display); }
.toolcard span { font-size: 14px; color: var(--ink-2); }
.toolcard[aria-current="page"] { border-color: var(--ink); box-shadow: var(--sh-press); }
.yearswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yearswitch__nav { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.yearswitch__nav a, .yearswitch__nav span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; text-decoration: none; font: 700 15px/1 var(--font-ui); }
.yearswitch__nav a { color: var(--ink-2); }
.yearswitch__nav a:hover { background: var(--paper-sunk); color: var(--ink); }
.yearswitch__nav [aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.yearswitch__nav > * + * { border-left: 1px solid var(--line); }
.yearswitch form { display: inline-flex; gap: 6px; align-items: center; }
.yearswitch select { min-height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--paper-raised); padding: 0 34px 0 14px; font: 600 14px/1 var(--font-ui); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; }
.monthpicker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 700px) { .monthpicker { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.monthpicker a { display: grid; place-items: center; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-raised); text-decoration: none; font: 600 15px/1 var(--font-ui); color: var(--ink); }
.monthpicker a:hover { border-color: var(--ink); color: var(--ink); }
.monthpicker a[aria-current="page"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.daylist { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.daylist li { display: grid; grid-template-columns: 54px 26px 1fr; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.daylist time { font: 600 26px/1 var(--font-display); }
.daylist time small { display: block; font: 700 10px/1.4 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.daylist .glyph { color: var(--accent-ink); font-size: 18px; }
.daylist b { display: block; font: 600 19px/1.2 var(--font-display); }
.daylist span span { color: var(--ink-2); }
.spheretext { display: grid; gap: 10px; }
@media (min-width: 700px) { .spheretext { grid-template-columns: repeat(3, 1fr); } }