/* sablerune.com, from the approved Figma page "Sablerune · Website" (November 4, 2026) and the design system's tokens.
   Desktop drawn at 1440 (content 1200), phone at 390 (gutter 24). Silver type and line; gold lives only in the art. */

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/cinzel.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/ebgaramond.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/ebgaramond-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-italic.woff2) format('woff2'); }
@font-face { font-family: 'Noto Sans Symbols'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/symbols.woff2) format('woff2'); }
/* Fallbacks sized to the faces, so the swap moves nothing. */
@font-face { font-family: 'Garamond fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 88%; ascent-override: 103%; descent-override: 30%; }
@font-face { font-family: 'Cinzel fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 112%; ascent-override: 87%; descent-override: 33%; }

:root {
  --ground: #0c0b13; --band: #0f0e17; --raised: #13121c; --selected: #1e1c2c; --base: #0b0a0f;
  --bright: #eef0f5; --silver: #c9cdd6; --cream: #e1ded7; --muted: #8d92a1;
  --line: #c9cdd6; --hair: rgba(201, 205, 214, 0.24); --faint: rgba(201, 205, 214, 0.12); --field: rgba(201, 205, 214, 0.5); --fill: rgba(238, 240, 245, 0.05);
  --display: 'Cinzel', 'Cinzel fallback', Georgia, serif; --serif: 'EB Garamond', 'Garamond fallback', Georgia, serif;
  --italic: 'Cormorant Garamond', 'EB Garamond', 'Garamond fallback', Georgia, serif; --symbols: 'Noto Sans Symbols', 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
  --gutter: 120px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (max-width: 1439px) { :root { --gutter: max(40px, calc((100vw - 1200px) / 2)); } }
@media (max-width: 639px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--bright); font-family: var(--serif); font-size: 19px; line-height: 29.5px; overflow-x: hidden;
       font-kerning: normal; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 12px 18px; background: var(--bright); color: var(--ground); font: 600 13px/16px var(--display); letter-spacing: 0.18em; }
.skip:focus { top: 16px; }

/* ---------- type, by role (desktop left, phone right in the Notes' scale) ---------- */
.t-kick { font: 400 20.4px/27.2px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.t-title { font: 400 54px/68px var(--display); letter-spacing: 0.06em; color: var(--bright); }
.t-ltitle { font: 400 54px/68px var(--serif); color: var(--bright); }
.t-stitle { font: 400 30px/40px var(--display); letter-spacing: 0.06em; color: var(--bright); }
.t-name { font: 400 24px/32px var(--display); letter-spacing: 0.04em; color: var(--bright); }
.t-line { font: italic 400 34px/44px var(--serif); color: var(--silver); }
.t-head { font: 400 18px/24px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.t-label { font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.t-value { font: italic 400 24px/30px var(--serif); color: var(--bright); }
.t-body { font: 400 19px/29.5px var(--serif); color: var(--cream); }
.t-meta { font: italic 400 17px/22px var(--serif); color: var(--muted); }
.t-q { font: italic 400 30px/38px var(--italic); color: var(--bright); }
.t-glyph { font-family: var(--symbols); font-weight: 400; }
.muted { color: var(--muted); }
.silver { color: var(--silver); }
.cream { color: var(--cream); }
@media (max-width: 639px) {
  .t-kick { font-size: 13px; line-height: 18px; }
  .t-title { font-size: 30px; line-height: 36px; letter-spacing: 0.12em; }
  .t-ltitle { font-size: 30px; line-height: 36px; }
  .t-stitle, .t-name { font-size: 22px; line-height: 28px; letter-spacing: 0.06em; }
  .t-line { font-size: 19px; line-height: 26px; }
  .t-head { font-size: 13px; line-height: 18px; }
  .t-label { font-size: 12px; line-height: 16px; letter-spacing: 0.2em; }
  .t-value { font-size: 18px; line-height: 24px; }
  .t-body { font-size: 18px; line-height: 28px; }
  .t-meta { font-size: 15px; line-height: 20px; }
  .t-q { font-size: 24px; line-height: 30px; }
  body { font-size: 18px; line-height: 28px; }
}

/* ---------- ornaments ---------- */
.kicker { display: flex; align-items: center; justify-content: center; gap: 19.04px; white-space: nowrap; }
.kicker::before, .kicker::after { content: ''; flex: 0 1 65.28px; min-width: 16px; height: 1.36px; background: var(--line); }
.kicker.left { justify-content: flex-start; }
@media (max-width: 639px) { .kicker { gap: 12px; max-width: 100%; } .kicker::before, .kicker::after { flex-basis: 40px; height: 1px; } }
.divider { width: 290px; height: 30px; color: var(--line); margin: 0 auto; }
.star { width: 360px; height: 16px; color: var(--line); margin: 0 auto; }
.star.s288 { width: 288px; height: 12.8px; }
.star.left { margin: 0; }
@media (max-width: 639px) { .divider { width: 180px; height: 18.6px; } .star { width: 216px; height: 9.6px; } }
.dia { display: inline-block; width: 7px; height: 7px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; }

/* The double rule with corner diamonds: the hero's (2px at 40 and 54, 20 diamonds), a card frame's (1.5px and a
   55% 1px rule 10 in, 16 diamonds) and the button's. Diamonds sit on the outer rule's corners. */
.frame { position: absolute; inset: 40px; border: 2px solid var(--line); pointer-events: none; z-index: 3; }
.frame::before { content: ''; position: absolute; inset: 12px; border: 2px solid var(--line); }
.frame i { position: absolute; width: 20px; height: 20px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.frame i:nth-child(1) { left: -12px; top: -12px; } .frame i:nth-child(2) { right: -12px; top: -12px; }
.frame i:nth-child(3) { left: -12px; bottom: -12px; } .frame i:nth-child(4) { right: -12px; bottom: -12px; }
@media (max-width: 639px) {
  .frame { inset: 12px; border-width: 1.5px; } .frame::before { inset: 4.5px; border-width: 1.5px; }
  .frame i { width: 12px; height: 12px; } .frame i:nth-child(1), .frame i:nth-child(2) { top: -7px; } .frame i:nth-child(3), .frame i:nth-child(4) { bottom: -7px; }
  .frame i:nth-child(1), .frame i:nth-child(3) { left: -7px; } .frame i:nth-child(2), .frame i:nth-child(4) { right: -7px; }
}
.cardframe { position: relative; }
.cardframe > .cf { position: absolute; inset: 0; border: 1.5px solid var(--line); pointer-events: none; }
.cardframe > .cf::before { content: ''; position: absolute; inset: 8.5px; border: 1px solid rgba(201, 205, 214, 0.55); }
.cardframe > .cf i { position: absolute; width: 16px; height: 16px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cardframe > .cf i:nth-child(1) { left: -8.75px; top: -8.75px; } .cardframe > .cf i:nth-child(2) { right: -8.75px; top: -8.75px; }
.cardframe > .cf i:nth-child(3) { left: -8.75px; bottom: -8.75px; } .cardframe > .cf i:nth-child(4) { right: -8.75px; bottom: -8.75px; }
@media (max-width: 639px) {
  .cardframe > .cf { border-width: 1.2px; } .cardframe > .cf::before { inset: 6.8px; }
  .cardframe > .cf i { width: 12px; height: 12px; }
  .cardframe > .cf i:nth-child(1), .cardframe > .cf i:nth-child(2) { top: -6.6px; } .cardframe > .cf i:nth-child(3), .cardframe > .cf i:nth-child(4) { bottom: -6.6px; }
  .cardframe > .cf i:nth-child(1), .cardframe > .cf i:nth-child(3) { left: -6.6px; } .cardframe > .cf i:nth-child(2), .cardframe > .cf i:nth-child(4) { right: -6.6px; }
}
.panel { position: relative; background: var(--raised); border: 1px solid var(--hair); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }

/* ---------- buttons and links ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 0; background: none; cursor: pointer;
       font: 600 13px/16px var(--display); letter-spacing: 0.18em; color: var(--bright); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.btn::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); }
.btn::after { content: ''; position: absolute; inset: 4px; border: 1px solid var(--hair); transition: inset 200ms ease-out, background-color 200ms ease-out; }
.btn > span { position: relative; z-index: 1; }
.btn .d { position: absolute; width: 7px; height: 7px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: background-color 200ms ease-out; }
.btn .d:nth-of-type(1) { left: -3.5px; top: -3.5px; } .btn .d:nth-of-type(2) { right: -3.5px; top: -3.5px; }
.btn .d:nth-of-type(3) { left: -3.5px; bottom: -3.5px; } .btn .d:nth-of-type(4) { right: -3.5px; bottom: -3.5px; }
.btn.primary { color: var(--ground); }
.btn.primary::after { background: var(--bright); border-color: var(--bright); }
.btn:hover::after, .btn:focus-visible::after { inset: 2px; }
.btn:hover .d, .btn:focus-visible .d { background: var(--bright); }
.btn:active { opacity: 0.7; }
.btn.big { min-height: 68px; padding: 0 48px; font-size: 18px; line-height: 24px; letter-spacing: 0.22em; }
.btn.big::after { inset: 5px; }
.btn.big:hover::after, .btn.big:focus-visible::after { inset: 3px; }
.btn.big .d { width: 9px; height: 9px; } .btn.big .d:nth-of-type(1), .btn.big .d:nth-of-type(2) { top: -4.5px; } .btn.big .d:nth-of-type(3), .btn.big .d:nth-of-type(4) { bottom: -4.5px; }
.btn.big .d:nth-of-type(1), .btn.big .d:nth-of-type(3) { left: -4.5px; } .btn.big .d:nth-of-type(2), .btn.big .d:nth-of-type(4) { right: -4.5px; }
.btn.wide { width: 256px; }
.btn[disabled], .btn.waiting { cursor: default; color: var(--muted); opacity: 1; }
.btn[disabled]::before, .btn.waiting::before { border-color: var(--hair); }
.btn[disabled]::after, .btn.waiting::after { background: none; border-color: var(--faint); inset: 4px; }
.btn[disabled] .d, .btn.waiting .d { background: var(--hair); }
.link { display: inline-flex; align-items: center; gap: 14px; padding: 12px 0; font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--silver); white-space: nowrap; }
.link svg { width: 28px; height: 10px; flex: none; transition: transform 200ms ease-out; }
.link:hover svg, .link:focus-visible svg { transform: translateX(4px); }
.link.back svg { transform: scaleX(-1); }
.link.back:hover svg, .link.back:focus-visible svg { transform: scaleX(-1) translateX(4px); }
.link:hover { color: var(--bright); }
@media (max-width: 639px) {
  .link { gap: 10px; padding: 13px 0; font-size: 13px; line-height: 18px; }
  .link svg { width: 22px; }
  .btn.big { min-height: 52px; padding: 0 30px; font-size: 13px; line-height: 16px; letter-spacing: 0.18em; }
  .btn.big::after { inset: 4px; }
  .btn.big .d { width: 7px; height: 7px; } .btn.big .d:nth-of-type(1), .btn.big .d:nth-of-type(2) { top: -3.5px; } .btn.big .d:nth-of-type(3), .btn.big .d:nth-of-type(4) { bottom: -3.5px; }
  .btn.big .d:nth-of-type(1), .btn.big .d:nth-of-type(3) { left: -3.5px; } .btn.big .d:nth-of-type(2), .btn.big .d:nth-of-type(4) { right: -3.5px; }
}
.textlink { border-bottom: 1px solid var(--hair); color: var(--silver); }
.textlink:hover { color: var(--bright); border-bottom-color: var(--silver); }
button.textlink { background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 0; cursor: pointer; font: inherit; }

/* ---------- the nav ---------- */
.nav { position: absolute; z-index: 10; left: 110px; right: 110px; top: 84px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 14px; font: 400 18px/24px var(--display); letter-spacing: 0.3em; color: var(--bright); }
.brand svg { width: 40px; height: 40px; }
.nav .right { display: flex; align-items: center; gap: 48px; }
.nav .links { display: flex; gap: 48px; font: 400 16px/22px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.nav .links a { padding: 11px 0; }
.nav .links a:hover, .nav .links a[aria-current] { color: var(--bright); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 0 0 12px; background: none; border: 0; cursor: pointer; font: 400 13px/18px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.menu-btn svg { width: 18px; height: 10px; }
.menu { display: none; }
@media (max-width: 1100px) { .nav { left: 70px; right: 70px; } .nav .right, .nav .links { gap: 30px; } }
@media (max-width: 899px) {
  .nav .links, .nav .right > .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .menu { position: absolute; z-index: 20; top: 132px; left: 54px; right: 54px; padding: 16px 24px 24px; background: rgba(12, 11, 19, 0.96); border: 1px solid var(--hair); }
  .menu.open { display: block; }
  .menu a { display: block; padding: 12px 0; font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--silver); border-bottom: 1px solid var(--faint); }
  .menu a:last-child { border-bottom: 0; }
}
@media (max-width: 639px) {
  .nav { left: 30px; right: 30px; top: 30px; height: 44px; }
  .brand { gap: 10px; font-size: 14px; line-height: 20px; }
  .brand svg { width: 28px; height: 28px; }
  .menu { top: 82px; left: 18px; right: 18px; }
}

/* ---------- heroes ---------- */
.hero { position: relative; height: clamp(640px, 62.5vw, 900px); overflow: hidden; background: var(--ground); }
.hero .art { position: absolute; left: 0; top: -53.333%; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.hero .art img { width: 100%; height: 100%; object-fit: cover; }
.hero .burn { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; mix-blend-mode: multiply; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7) 55%, #000); }
.hero .stop { position: absolute; left: 0; right: 0; top: 0; height: 340px; background: linear-gradient(#0c0b13, #0c0b13 26%, rgba(12,11,19,0)); }
.hero .scentre { position: absolute; left: 50%; top: 170px; width: 1300px; height: 640px; margin-left: -650px; border-radius: 50%;
                 background: radial-gradient(closest-side, rgba(14,13,19,0.55), rgba(14,13,19,0.32) 60%, rgba(14,13,19,0)); }
.hero .grade { position: absolute; inset: 0; background: var(--ground); mix-blend-mode: lighten; }
/* The words sit in the middle of the space between the nav and the frame, lifted a touch (Bobby, November 4: bring
   them down so they're visually centred). */
.hero .centre { position: absolute; z-index: 4; left: 50%; top: 132px; bottom: 54px; padding-bottom: 24px; width: 900px; margin-left: -450px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero .sigil { width: 124px; height: 124px; }
.wordmark { margin-top: 26px; padding-left: 24px; font: 400 71.68px/89.6px var(--display); letter-spacing: 0.34em; color: var(--bright); white-space: nowrap; }
.hero .tag { margin-top: 18px; }
.hero .divider { margin-top: 30px; }
.hero .centre .btn { margin-top: 36px; }
@media (max-width: 1100px) { .wordmark { font-size: 56px; line-height: 70px; } }
@media (max-width: 1023px) { .hero .centre { width: 100%; margin-left: -50%; padding: 0 60px 24px; } }
@media (max-width: 639px) {
  .hero { height: 740px; }
  .hero .art { left: -71.8%; top: -170px; width: 184.6%; }
  .hero .burn { height: 90px; }
  .hero .stop { height: 260px; background: linear-gradient(#0c0b13, #0c0b13 40%, rgba(12,11,19,0)); }
  .hero .scentre { top: 110px; width: 520px; height: 560px; margin-left: -260px; background: radial-gradient(closest-side, rgba(14,13,19,0.6), rgba(14,13,19,0.35) 60%, rgba(14,13,19,0)); }
  .hero .centre { top: 74px; bottom: 17px; padding: 0 40px 40px; }
  .hero .sigil { width: 72px; height: 72px; }
  .wordmark { margin-top: 16px; padding-left: 10px; font-size: 30px; line-height: 38px; }
  .hero .tag { margin-top: 12px; max-width: 200px; }
  .hero .divider { margin-top: 18px; }
  .hero .centre .btn { margin-top: 24px; }
}
/* A template page's header: the nocturne inside the frame, its words in the middle below the nav. */
/* One hero for every page but Home (Bobby, November 5): 560 tall, 420 on a phone, its words centred between the nav and
   the frame's inner rule. */
.head { position: relative; height: 560px; background: var(--ground); }
.head .plate { position: absolute; inset: 40px; overflow: hidden; }
.head .plate img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.head .plate .stop { position: absolute; left: 0; right: 0; top: 0; height: 240px; background: linear-gradient(#0c0b13, #0c0b13 26%, rgba(12,11,19,0)); }
.head .plate .scentre { position: absolute; left: 50%; top: calc(50% + 39px - 320px); width: 1300px; height: 640px; margin-left: -650px; border-radius: 50%; background: radial-gradient(closest-side, rgba(14,13,19,0.55), rgba(14,13,19,0.32) 60%, rgba(14,13,19,0)); }
.head .plate .grade { position: absolute; inset: 0; background: var(--ground); mix-blend-mode: lighten; }
.head .words { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: 132px; bottom: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.head .words > * + * { margin-top: 0; }
.head .t-kick + .t-title, .head .t-kick + .t-ltitle { margin-top: 28px; }
.head .t-title + .t-line { margin-top: 6px; }
.head .h-sub { margin-top: 8px; font: italic 400 24px/30px var(--serif); color: var(--silver); max-width: 1200px; }
.head .divider { margin-top: 24px; }
.head .t-line + .divider { margin-top: 28px; }
.head .place { margin-top: 20px; }
.head .h-body { margin-top: 16px; max-width: 640px; }
@media (max-width: 639px) {
  .head { height: 420px; }
  .head .plate { inset: 12px; }
  .head .plate img { object-position: var(--ppos, 50% 50%); opacity: var(--pop, 1); }
  .head .plate .stop { height: 180px; background: linear-gradient(#0c0b13, #0c0b13 40%, rgba(12,11,19,0)); }
  .head .plate .scentre { top: calc(50% + 28px - 280px); width: 520px; height: 560px; margin-left: -260px; background: radial-gradient(closest-side, rgba(14,13,19,0.6), rgba(14,13,19,0.35) 60%, rgba(14,13,19,0)); }
  .head .words { top: 74px; bottom: 17px; left: 24px; right: 24px; }
  .head .t-kick + .t-title, .head .t-kick + .t-ltitle { margin-top: 18px; }
  .head .t-title + .t-line { margin-top: 4px; }
  .head .h-sub { margin-top: 10px; font-size: 18px; line-height: 24px; }
  .head .divider { margin-top: 18px; }
  .head .place { margin-top: 14px; }
  .head .h-body { margin-top: 12px; }
}

/* ---------- page sections ---------- */
/* The margin art hangs past the sides: clip it sideways only, so it can still bleed from one section into the next. */
main { overflow-x: hidden; }
@supports (overflow: clip) { main { overflow-x: clip; } }
.band { background: linear-gradient(rgba(15,14,23,0), var(--band) 12%, var(--band) 88%, rgba(15,14,23,0)); }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
section { position: relative; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head .t-title, .sec-head .t-ltitle { margin-top: 28px; }
.sec-head .t-line { margin-top: 12px; }
@media (max-width: 639px) { .sec-head .t-title, .sec-head .t-ltitle { margin-top: 18px; } .sec-head .t-line { margin-top: 8px; } }
.bgart { position: absolute; pointer-events: none; mix-blend-mode: lighten; z-index: 0; will-change: transform; transform: translate3d(0, calc(var(--py, 0px) + var(--ty, 0px)), 0) rotate(var(--rot, 0deg)); }
.bgart img { width: 100%; height: 100%; object-fit: cover; }
.sec-body { position: relative; z-index: 1; }

/* The sky strip: four cells under a rule. */
.strip { width: 100%; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: repeat(4, 1fr); }
.strip .cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 16px; text-align: center; }
.strip .cell + .cell::before { content: ''; position: absolute; left: 0; top: 48px; bottom: 48px; width: 1px; background: var(--hair); }
.strip .mark { width: 64px; height: 64px; margin-bottom: 8px; position: relative; }
.strip .t-meta { max-width: 260px; }
@media (max-width: 639px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip .cell { gap: 6px; padding: 28px 8px; }
  .strip .cell:nth-child(3)::before { display: none; }
  .strip .cell:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .strip .cell + .cell::before { top: 20px; bottom: 20px; }
  .strip .mark { width: 44px; height: 44px; margin-bottom: 10px; }
}
.roundel { width: 100%; height: 100%; color: var(--line); }
.mhand { transform-origin: 32px 32px; transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.mark .inner { position: absolute; }

/* Ledger rows: label left, value right. */
.rows { width: 100%; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 18px 0; }
.row + .row, .rows .fold, .row + .fold { border-top: 1px solid var(--hair); }
.row .t-value { text-align: right; }
@media (max-width: 639px) { .row { min-height: 56px; padding: 10px 0; } }

/* A fold: "Show the spirits", "Sources". */
details.fold { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
details.fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 14px 0; cursor: pointer; list-style: none;
                         font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--muted); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '+'; font: italic 400 24px/30px var(--serif); letter-spacing: 0; color: var(--muted); transition: transform 200ms ease-out; }
details.fold[open] > summary::after { content: '−'; }
details.fold > summary:hover, details.fold > summary:hover::after { color: var(--silver); }
details.fold .fold-body { padding: 0 0 20px; }
details.fold .fold-body .t-body + .t-body, details.fold .fold-body .t-meta + .t-body { margin-top: 12px; }
@media (max-width: 639px) { details.fold > summary { min-height: 50px; padding: 12px 0; font-size: 12px; line-height: 16px; letter-spacing: 0.2em; } details.fold > summary::after { font-size: 18px; line-height: 24px; } }

/* ---------- the footer ---------- */
.foot { padding: 64px var(--gutter) 72px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 36px; }
.foot nav a { padding: 13px 0; font: 400 13px/18px var(--display); letter-spacing: 0.2em; color: var(--silver); }
.foot nav a:hover { color: var(--bright); }
.foot .close { font: italic 400 20px/26px var(--serif); color: var(--silver); }
.foot .small { font: italic 400 17px/22px var(--serif); color: var(--muted); white-space: pre-line; }
.foot .small a:hover { color: var(--silver); }
.foot .day { display: flex; align-items: center; gap: 10px; font: 400 13px/18px var(--display); letter-spacing: 0.2em; color: var(--muted); }
.foot .day .t-glyph { font-size: 20px; line-height: 24px; letter-spacing: 0; }
.foot .small .sep { padding: 0 0.5em; }
@media (max-width: 639px) {
  .foot { padding: 48px 24px 56px; gap: 16px; }
  .foot nav { gap: 0 22px; max-width: 342px; }
  .foot nav a { padding: 14px 0; font-size: 12px; line-height: 16px; }
  .foot .close { font-size: 15px; line-height: 20px; }
  .foot .small { font-size: 15px; line-height: 20px; }
  .foot .small .br { display: block; height: 0; overflow: hidden; }
  .foot .small .s1 { display: none; }
  .foot .day { font-size: 12px; line-height: 16px; }
}

/* ---------- motion (Notes for building · Motion) ---------- */
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-12px, 6px) rotate(1.5deg); } }
.hero .art img { animation: settle 2400ms var(--ease) both; }
.hero .centre > * { animation: rise 700ms var(--ease) both; }
.hero .centre > :nth-child(2) { animation-delay: 120ms; } .hero .centre > :nth-child(3) { animation-delay: 240ms; }
.hero .centre > :nth-child(4) { animation-delay: 360ms; } .hero .centre > :nth-child(5) { animation-delay: 480ms; }
.js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }
.moonplate { animation: drift 24s ease-in-out infinite; }
.js .still[data-lift] .still-art { transform: translateY(40px); transition: transform 1200ms var(--ease); }
.js .still[data-lift].in .still-art { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .art img { animation: none; }
  .hero .centre > * { animation: fade 200ms linear both; animation-delay: 0ms !important; }
  .js [data-rise] { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
  .moonplate { animation: none; }
  .js .still[data-lift] .still-art { transform: none; transition: none; }
  .btn::after, .btn .d, .link svg { transition: none; }
  .link:hover svg, .link:focus-visible svg { transform: none; }
  .link.back:hover svg { transform: scaleX(-1); }
  .btn:hover::after, .btn:focus-visible::after { inset: 4px; }
  .hand, .mhand { transition: none !important; }
}

/* ======================================================================================== Home */
.h-today { padding: 176px 0 0; }
.h-yew { left: -70px; top: 684px; width: 320px; height: 320px; opacity: 0.22; --rot: 8deg; }
.h-moon { left: calc(50% + 210px); top: 60px; width: 460px; height: 460px; opacity: 0.34; }
.moonfade { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 42%, transparent 92%); mask-image: linear-gradient(#000 42%, transparent 92%); }
.moonplate, .moonplate img { width: 100%; height: 100%; }
.moonplate { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.h-today .sec-head .t-line { margin-top: 12px; }
.h-today .strip { margin-top: 64px; }
.strip .mark .roundel { position: absolute; inset: 0; }
.strip .mark .mi { left: 13px; top: 13px; width: 38px; height: 38px; }
.strip .mark .ti { left: 9px; top: 9px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; mix-blend-mode: lighten; opacity: 0.7;
                   -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.strip .mark .ti img { width: 100%; height: 100%; }
.strip .t-meta .ph { display: none; }
.after-strip { display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
.after-strip .place { text-align: center; }
.place .textlink { color: var(--muted); border-bottom-color: rgba(141,146,161,0.4); }
.place .textlink:hover { color: var(--silver); }
@media (max-width: 639px) {
  .h-today { padding-top: 104px; }
  .h-yew { left: -76px; top: 754px; width: 170px; height: 170px; }
  .h-moon { left: auto; right: -76px; top: 36px; width: 230px; height: 230px; }
  .h-today .sec-head .t-line { margin-top: 8px; }
  .h-today .strip { margin-top: 40px; }
  .strip .mark .mi { left: 9px; top: 9px; width: 26px; height: 26px; }
  .strip .mark .mi svg { width: 26px; height: 26px; }
  .strip .mark .ti { left: 6px; top: 6px; width: 32px; height: 32px; }
  .strip .t-meta .dk { display: none; } .strip .t-meta .ph { display: inline; }
  .after-strip { margin-top: 16px; }
  .after-strip .place { max-width: 300px; }
}

.h-three { padding: 200px 0 64px; overflow: clip; }
.h-back1 { left: calc(50% + 530px); top: -97px; width: 300px; height: 514px; opacity: 0.26; --rot: -14deg; }
.h-back2 { left: calc(50% - 166px); top: 346px; width: 320px; height: 548px; opacity: 0.3; --rot: 11deg; }
.cardback img { width: 100%; height: 100%; object-fit: cover; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; margin-top: 80px; }
.prod { display: flex; flex-direction: column; align-items: center; text-align: center; }
.prod .pa { width: 100%; height: 460px; display: flex; align-items: flex-end; justify-content: center; }
.prod .phone { width: 213px; height: auto; }
/* Today cut under the dial (app-shots/today-top-dial), the phone fading out below it. */
.prod .phone.dial { width: 264px; }
.prod .t-name { margin-top: 44px; }
.prod .t-body { margin-top: 14px; max-width: 336px; }
.prod .t-meta { margin-top: 12px; }
.prod .acts { margin-top: auto; padding-top: 68px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 140px; }
.fan { position: relative; width: 411px; height: 440px; flex: none; }
.fan img { position: absolute; width: 225px; height: auto; aspect-ratio: 840 / 1441; outline: 0.98px solid var(--hair); outline-offset: -0.98px; background: var(--base); }
.fan .c { left: 93px; top: 27px; }
.fan .l { left: 30.5px; top: 37.4px; rotate: -8deg; }
.fan .r { left: 156.2px; top: 37.8px; rotate: 8deg; }
/* The fan's entrance (Bobby, November 4: "the 3 cards just suddenly appear"): all three rise together, the middle card
   on top, then the outer two fan out from behind it and turn to their places. Only with motion; otherwise they're
   simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js .fan[data-fan] img { transition: transform 800ms var(--ease), opacity 600ms ease-out, translate 1000ms var(--ease) 450ms, rotate 1000ms var(--ease) 450ms; }
  .js .fan[data-fan] .l, .js .fan[data-fan] .r { transition-delay: 90ms, 90ms, 450ms, 450ms; }
  .js .fan[data-fan]:not(.in) img { opacity: 0; transform: translateY(48px); }
  .js .fan[data-fan]:not(.in) .l { translate: 62.5px 0; rotate: 0deg; }
  .js .fan[data-fan]:not(.in) .r { translate: -63.2px 0; rotate: 0deg; }
}
.prod .fan { margin-bottom: 0; }
/* The guidebook's cover, drawn in silver line, at any width (--cw, 276 on Home). */
/* The guidebook's cover (Bobby's, November 5) as a book, at any width (--cw, 276 on Home): the picture at 5:8, a soft
   fold of shade and light down its left edge for the spine (a gradient, never a rule), and its shadow. */
.cover { --u: calc(var(--cw, 276) / 276); position: relative; flex: none; width: calc(276px * var(--u)); aspect-ratio: 375 / 600; background: #0b0a0f;
         border-radius: 1px 2px 2px 1px; overflow: hidden; box-shadow: 0 calc(18px * var(--u)) calc(44px * var(--u)) rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.5); }
.cover img { display: block; width: 100%; height: 100%; }
.cover::after { content: ''; position: absolute; inset: 0; pointer-events: none;
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.18) 1.4%, rgba(255, 255, 255, 0.05) 2.8%, rgba(255, 255, 255, 0) 5%, rgba(0, 0, 0, 0.1) 6.5%, rgba(0, 0, 0, 0) 9.5%); }
.prod .cover { margin-bottom: 0; }
@media (max-width: 1023px) and (min-width: 640px) {
  .three { grid-template-columns: 1fr 1fr; } .prod:last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .h-three { padding: 120px 0 48px; }
  .h-back1 { display: none; }
  .h-back2 { left: calc(50% - 88px); top: 1056px; width: 270px; height: 462px; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 72px; margin-top: 56px; }
  .prod .pa { height: 420px; }
  .prod .phone { width: 198px; }
  .prod .phone.dial { width: 240px; }
  .prod .t-name { margin-top: 32px; }
  .prod .t-body { margin-top: 10px; max-width: 326px; }
  .prod .t-meta { margin-top: 8px; }
  .prod .acts { padding-top: 24px; min-height: 0; gap: 4px; }
  .fan { transform: scale(0.9075); transform-origin: 50% 100%; margin: 0 -19px; }
  .prod .cover { --cw: 258; }
}

.h-turn { padding: 184px 0 96px; overflow: clip; }
.turn-head { display: none; }
.wheelbox { position: relative; width: 1200px; height: 1250px; margin: 0 auto; }
.wheel { position: absolute; inset: 0; transform: rotate(var(--turn, 0deg)); will-change: transform; }
.ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plates li { position: absolute; left: 600px; top: 604.5px; width: 240px; margin-left: -120px;
             transform: rotate(var(--a)) translateY(-516.5px) rotate(calc(-1 * var(--a))) rotate(calc(-1 * var(--turn, 0deg))); transform-origin: 120px 0; }
.plates .pl { position: absolute; left: 36px; top: -84px; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; mix-blend-mode: lighten; opacity: 0.5;
              -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.plates .now .pl { opacity: 0.9; }
.plates .pl img { width: 100%; height: 100%; }
.plates .nm { position: absolute; left: 0; right: 0; top: 98px; text-align: center; font: 400 20px/26px var(--display); letter-spacing: 0.22em; color: var(--bright); }
.plates .ring { position: absolute; left: 24px; top: -96px; width: 192px; height: 192px; border-radius: 50%; border: 1px solid rgba(201,205,214,0.55); }
.wcentre { position: absolute; left: 320px; top: 448px; width: 560px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wc-head { display: flex; flex-direction: column; align-items: center; }
.wc-head .t-title { margin-top: 28px; }
.wc-head .t-line { margin-top: 12px; }
.wstar { width: 280px; height: 12.4px; margin-top: 32px; }
.wcentre .now { margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.wcentre .wnote { margin-top: 10px; font: italic 400 20px/26px var(--serif); color: var(--muted); }
@media (max-width: 1239px) and (min-width: 800px) { .wheelbox { transform: scale(calc((100vw - 80px) / 1200px)); transform-origin: 50% 0; margin-bottom: calc((100vw - 80px) * 1250 / 1200 - 1250px); } }
/* Under 800 the big wheel's names would fall below 12px and crowd each other, so a phone gets its own wheel
   (src/pages/wheel-phone.js), laid out in its own width and spread to the 16px gutter: each label outside the ring
   along its spoke, never on a neighbour (Bobby, November 5: keep the circle). Below 360 the eight go two by two. */
.turnings { display: none; }
@media (max-width: 799px) {
  .h-turn { padding: 104px 0 88px; }
  .h-turn .wheelbox { display: none; }
  .turn-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .turn-head .t-title { margin-top: 18px; } .turn-head .t-line { margin-top: 8px; }
  .turn-head .tnote { margin-top: 12px; max-width: 300px; }
  .turnings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 16px; margin-top: 48px; }
  .tn { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tn .pl { position: relative; width: min(140px, 100%); aspect-ratio: 1; }
  .tn .pl img { width: 100%; height: 100%; border-radius: 50%; opacity: 0.6;
                -webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent); mask-image: radial-gradient(closest-side, #000 64%, transparent); }
  .tn.now .pl img { opacity: 0.95; }
  .tn .ring { position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(201,205,214,0.55); }
  .tn .nm { margin-top: 14px; font: 400 13px/18px var(--display); letter-spacing: 0.18em; color: var(--bright); }
  .tn .dt { margin-top: 4px; font: italic 400 15px/20px var(--serif); color: var(--muted); }
  .tn.now .dt { color: var(--silver); }
}
@media (max-width: 559px) {
  .turnings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin-top: 40px; }
  .tn .pl { width: min(132px, 38vw); }
  .tn .nm { font-size: 12px; line-height: 16px; }
}

/* The phone wheel. Every measure is a share of its width --pw, so it reads the same from 360 to 799: at 360 the
   names are 11px and the plates 67px. */
.pwheel { display: none; }
@media (min-width: 360px) and (max-width: 799px) {
  .turnings, .turn-head .tnote { display: none; }
  .pwheel { --pw: min(calc(100vw - 32px), 520px); display: block; position: relative; width: var(--pw); height: calc(var(--pw) * var(--pwh));
            margin: 40px 0 0 calc(50% - var(--pw) / 2); }
  .pw-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pw-plates { margin: 0; padding: 0; list-style: none; }
  .pw-pl { position: absolute; width: 20.5%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: 0.55;
           -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
  .pw-pl img { width: 100%; height: 100%; }
  .pw-i.now .pw-pl { opacity: 0.95; }
  .pw-now { position: absolute; width: 24.768%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(201, 205, 214, 0.55); }
  .pw-nm { position: absolute; font: 400 calc(var(--pw) * 0.033537) / 1.2727 var(--display); letter-spacing: 0.06em; color: var(--bright); white-space: nowrap; }
  .pw-nm.pw-centre { transform: translateX(-50%); }
  .pw-c { position: absolute; left: 25%; width: 50%; transform: translateY(-50%); text-align: center; }
  .pw-now-l { display: flex; align-items: center; justify-content: center; gap: calc(var(--pw) * 0.022);
              font: 400 calc(var(--pw) * 0.033537) / 1.2727 var(--display); letter-spacing: 0.2em; color: var(--silver); }
  .pw-now-l .dia { width: calc(var(--pw) * 0.018); height: calc(var(--pw) * 0.018); }
  .pw-note { margin-top: calc(var(--pw) * 0.018); font: italic 400 calc(var(--pw) * 0.03963) / 1.3077 var(--serif); color: var(--muted); }
}

.h-season { height: 970px; overflow: clip; }
.h-herb { left: -44px; top: 81px; width: 300px; height: 300px; opacity: 0.14; --rot: 51.92deg; }
.h-stone { left: calc(50% + 460px); top: 630px; width: 300px; height: 300px; opacity: 0.12; --rot: -8deg; }
.still { position: absolute; left: calc(50% - 403px); top: -34px; width: 806px; height: 1008px; opacity: 0.55; pointer-events: none;
         -webkit-mask-image: linear-gradient(transparent 50%, #000 78%); mask-image: linear-gradient(transparent 50%, #000 78%); }
.still-art { position: absolute; left: -64px; top: 19px; width: 874px; height: 1094px; opacity: 0.9; mix-blend-mode: lighten;
             -webkit-mask-image: radial-gradient(510px 504px at 474px 505px, #000 56%, transparent 100%); mask-image: radial-gradient(510px 504px at 474px 505px, #000 56%, transparent 100%); }
.still-art img { width: 100%; height: 100%; }
.h-season .sec-body { padding-top: 200px; }
.s-star { margin-top: 28px; }
.sstrip { margin-top: 36px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: repeat(5, 1fr); }
.sstrip .sc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 16px; text-align: center; }
.sstrip .sc + .sc::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--hair); }
.h-season .until { margin-top: 24px; text-align: center; }
.h-season .caption { position: absolute; left: 50%; top: 888px; width: 600px; margin-left: -300px; text-align: center; }
@media (max-width: 639px) {
  .h-season { height: 787px; }
  .h-herb { left: auto; right: -125px; top: -41px; width: 170px; height: 170px; }
  .h-stone { display: none; }
  .still { left: -45px; top: 130px; width: 480px; height: 600px; }
  .still-art { left: -38px; top: 11px; width: 520px; height: 652px; -webkit-mask-image: radial-gradient(303px 300px at 280px 300px, #000 56%, transparent 100%); mask-image: radial-gradient(303px 300px at 280px 300px, #000 56%, transparent 100%); }
  .h-season .sec-body { padding-top: 120px; }
  .s-star { margin-top: 18px; }
  .sstrip { margin-top: 16px; border: 0; display: block; }
  .sstrip .sc { flex-direction: row; justify-content: space-between; padding: 10px 0; min-height: 44px; border-top: 1px solid var(--hair); }
  .sstrip .sc:first-child { border-top: 0; }
  .sstrip .sc + .sc::before { display: none; }
  .sstrip .sc .t-value { text-align: right; }
  .h-season .until { margin-top: 14px; }
  .h-season .caption { left: 35px; right: 35px; width: auto; margin: 0; top: 683px; }
}

.h-list { padding: 160px 0 200px; }
.h-key, .l-key, .g-key { left: calc(50% + 1px); top: 696px; width: 300px; height: 147px; opacity: 0.32; --rot: 16deg;
                          -webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent); mask-image: radial-gradient(closest-side, #000 64%, transparent); }
.listcard { display: flex; align-items: center; gap: 64px; padding: 72px 80px; }
.listcard .intro { flex: 0 0 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.candle { width: 150px; height: 172px; opacity: 0.6; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }
.candle img { width: 100%; height: 100%; object-fit: cover; }
.listcard .intro .kicker { margin-top: 8px; }
.listcard .intro .t-ltitle { margin-top: 24px; }
.listcard .divide { align-self: stretch; width: 1px; flex: none; background: var(--hair); }
.listcard .lform { flex: 1; min-width: 0; }
@media (max-width: 1023px) and (min-width: 640px) { .listcard { flex-direction: column; } .listcard .divide { display: none; } }
@media (max-width: 639px) {
  .h-list { padding: 88px 0 176px; }
  .h-key, .l-key, .g-key { left: calc(50% - 115px); top: auto; bottom: 22px; width: 230px; height: 112px; }
  .listcard { flex-direction: column; gap: 0; padding: 44px 24px 52px; }
  .listcard .intro { flex: none; }
  .candle { width: 108px; height: 124px; }
  .listcard .intro .kicker { margin-top: 6px; }
  .listcard .intro .t-ltitle { margin-top: 16px; max-width: 230px; }
  .listcard .divide { display: none; }
  .listcard .lform { margin-top: 32px; width: 100%; }
}

/* The list's form and its states (Web / List form). */
.lform fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lform legend { padding: 0; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip > span { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 12px 18px; border: 1px solid var(--field); cursor: pointer;
               font: 400 12px/16px var(--display); letter-spacing: 0.18em; color: var(--silver); transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.chip .dia { display: none; background: var(--bright); }
.chip input:checked + span { background: rgba(201,205,214,0.14); border-color: var(--line); color: var(--bright); }
.chip input:checked + span .dia { display: inline-block; }
.chip input:focus-visible + span { outline: 2px solid var(--line); outline-offset: 2px; }
.chip > span:hover { border-color: var(--line); }
.lform .elabel { display: block; margin-top: 44px; }
.frow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.field { flex: 1; min-width: 0; height: 56px; padding: 0 18px; background: var(--fill); border: 1px solid var(--field); border-radius: 0; color: var(--bright);
         font: 400 19px/29.5px var(--serif); -webkit-appearance: none; appearance: none; }
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: 2px solid var(--line); outline-offset: 2px; border-color: var(--line); }
.field.bad { border: 1.5px solid var(--bright); }
.frow .btn { flex: none; }
.lform .note { margin-top: 16px; }
.lform .note.err { color: var(--bright); }
.lform .note.ok { color: var(--bright); font-style: normal; font-size: 19px; line-height: 29.5px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lform.compact .frow { margin-top: 24px; gap: 10px; }
.lform.compact .chips { margin-bottom: 0; }
.lform.compact fieldset { margin-bottom: 0; }
@media (max-width: 639px) {
  .lform legend { margin-bottom: 12px; }
  .lform .elabel { margin-top: 36px; }
  .frow { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px; }
  .field { flex: none; height: 52px; font-size: 18px; line-height: 28px; }
  .frow .btn { width: 100%; }
  .lform .note { margin-top: 12px; }
  .lform .note.ok { font-size: 18px; line-height: 28px; }
}

/* ======================================================================================== Today */
.head .place { color: var(--silver); }
.d-hours { padding: 136px 0 0; }
.two { display: flex; gap: 80px; align-items: flex-start; }
.dialbox { flex: 0 0 560px; }
.dial { width: 560px; height: 600px; overflow: visible; }
.dial .dg { font: 400 20px var(--symbols); fill: var(--silver); text-anchor: middle; }
.dial .dg.now { fill: var(--bright); }
.dial .dl { font: 400 12px var(--display); letter-spacing: 0.2em; fill: var(--muted); text-anchor: middle; }
.dial .dc-g { font: 400 26px var(--symbols); fill: var(--bright); text-anchor: middle; }
.dial .dc-p { font: 400 30px var(--display); letter-spacing: 0.06em; fill: var(--bright); text-anchor: middle; }
.dial .dc-l { font: italic 400 24px var(--serif); fill: var(--silver); text-anchor: middle; }
.hand { transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.thishour { flex: 1; min-width: 0; max-width: 560px; }
.thishour .mark { width: 64px; height: 64px; }
.thishour .mark + .t-label { margin-top: 14px; }
.thishour .t-stitle { margin-top: 10px; }
.thishour .times { margin-top: 6px; font: 500 19px/29.5px var(--serif); color: var(--bright); }
.thishour .reading { margin-top: 14px; }
.hlists { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.hl ol { margin-top: 8px; }
.hl li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; font: italic 400 17px/22px var(--serif); color: var(--silver); }
.hl li + li { border-top: 1px solid var(--hair); }
.hl li .t-glyph { font-size: 20px; line-height: 24px; font-style: normal; width: 18px; text-align: center; }
.hl li .hp { flex: 1; }
.hl li .tm { color: var(--muted); text-align: right; }
.hl li.now { background: var(--selected); color: var(--bright); }
.hl li.now .tm { color: var(--bright); }
@media (max-width: 1239px) and (min-width: 640px) { .two { flex-direction: column; align-items: center; gap: 56px; } .thishour { max-width: 760px; width: 100%; } .dialbox { flex: none; } }
@media (max-width: 639px) {
  .d-hours { padding-top: 72px; }
  .two { flex-direction: column; gap: 32px; }
  .dialbox { flex: none; width: 100%; }
  .dial { width: 100%; height: auto; }
  .dial .dl { font-size: 17px; }
  .row .wd { display: none; }
  .thishour .mark { width: 44px; height: 44px; }
  .thishour .t-stitle { margin-top: 8px; }
  .thishour .times { margin-top: 4px; font-size: 18px; line-height: 28px; }
  .thishour .reading { margin-top: 12px; }
  .hlists { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .hlists.night-first .night { order: -1; }
  .hl ol { margin-top: 6px; }
  .hl li { min-height: 40px; padding: 8px 10px; font-size: 15px; line-height: 20px; }
}

.d-moonday { padding: 96px 0 0; }
.d-yew { left: -91px; top: 251px; width: 300px; height: 300px; opacity: 0.22; --rot: 8deg; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.md { padding: 44px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.md .bigmoon { position: relative; width: 112px; height: 112px; margin-top: 20px; }
.md .bigmoon .roundel { position: absolute; inset: 0; }
.md .bigmoon .inner { position: absolute; left: 22.5px; top: 22.5px; line-height: 0; }
.md .bigmoon .inner svg { width: 67px; height: 67px; }
.md .t-stitle { margin-top: 18px; }
.md .t-meta { margin-top: 4px; }
.md .rows { margin-top: 22px; text-align: left; }
.md .lore { margin-top: auto; padding-top: 20px; }
.md .specs { display: flex; gap: 40px; margin-top: 20px; }
.md .specs figure { width: 112px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.md .specs img { width: 112px; height: 112px; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 95%); mask-image: radial-gradient(closest-side, #000 55%, transparent 95%); }
.md .specs + .rows { margin-top: 18px; }
@media (max-width: 899px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .d-moonday { padding-top: 56px; }
  .d-yew { left: -114px; top: 116px; width: 150px; height: 150px; }
  .md { padding: 28px 24px; }
  .md .bigmoon { width: 80px; height: 80px; margin-top: 16px; }
  .md .bigmoon .inner { left: 16.5px; top: 16.5px; } .md .bigmoon .inner svg { width: 47px; height: 47px; }
  .md .t-stitle { margin-top: 12px; }
  .md .rows { margin-top: 14px; }
  .md .specs { gap: 32px; margin-top: 16px; }
  .md .specs figure { width: 88px; gap: 4px; } .md .specs img { width: 88px; height: 88px; }
  .md .specs + .rows { margin-top: 12px; }
  .md .lore { padding-top: 14px; }
}

.d-tide { padding: 120px 0 0; }
.tide { display: flex; gap: 72px; align-items: flex-start; }
.tplate { flex: 0 0 320px; margin-top: 21px; height: 320px; opacity: 0.8; mix-blend-mode: lighten; }
.tplate img { width: 100%; height: 100%; }
.tide .words { flex: 1; min-width: 0; max-width: 740px; }
.tide .t-stitle { margin-top: 10px; }
.tide .t-body { margin-top: 14px; }
.tide .cl { margin-top: 28px; }
.tide .custom { margin-top: 8px; }
.tide .custom + .t-body { margin-top: 8px; }
.tide .star { margin-top: 22px; }
.tide .care { margin-top: 14px; }
@media (max-width: 639px) {
  .d-tide { padding-top: 64px; }
  .tide { flex-direction: column; gap: 16px; align-items: center; }
  .tplate { flex: none; width: 200px; height: 200px; margin: 0; }
  .tide .words { width: 100%; }
  .tide .t-stitle { margin-top: 8px; } .tide .t-body { margin-top: 10px; } .tide .cl { margin-top: 22px; }
  .tide .custom { font: italic 400 18px/24px var(--serif); letter-spacing: 0; margin-top: 6px; }
  .tide .star { margin-top: 18px; } .tide .care { margin-top: 12px; }
}

.d-card { padding: 136px 0 136px; display: flex; flex-direction: column; align-items: center; overflow: clip; }
.cardstage { position: relative; width: 300px; height: 514px; }
.cardstage .halo { position: absolute; left: 80px; top: -123px; width: 620px; height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,204,214,0.06), rgba(201,204,214,0.025) 50%, rgba(201,204,214,0) 100%); pointer-events: none; }
.cs-back { left: 179px; top: -40px; width: 324px; height: 555px; opacity: 0.3; --rot: 11deg; }
.cs-face { position: relative; display: block; width: 300px; z-index: 1; }
.cs-face img, .face img, .sface img { width: 100%; height: auto; outline: 1px solid var(--hair); outline-offset: -1px; background: var(--base); }
.d-card .words { width: min(720px, 100% - 48px); margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.d-card .t-stitle { margin-top: 10px; }
.d-card .t-line { margin-top: 14px; }
.d-card .why { margin-top: 14px; }
.d-card .link { margin-top: 8px; }
@media (max-width: 639px) {
  .d-card { padding: 64px 0 0; }
  .cardstage { width: 175px; height: 300px; }
  .cardstage .halo { left: -60px; top: -80px; width: 300px; height: 460px; }
  .cs-back { left: 9px; top: -39px; width: 189px; height: 323px; }
  .cs-face { width: 175px; }
  .d-card .words { margin-top: 20px; width: calc(100% - 48px); }
  .d-card .t-stitle { margin-top: 8px; }
  .d-card .t-line { margin-top: 10px; }
  .d-card .why { display: none; }
  .d-card .link { margin-top: 4px; }
}

.d-rest { padding: 120px 0 0; }
.restpanel, .deck-panel, .printpanel { display: flex; align-items: center; gap: 72px; padding: 64px 96px; }
.halo { position: relative; }
.restpanel .art { flex: 0 0 380px; height: 492px; display: flex; align-items: center; justify-content: center; }
.halo::before { content: ''; position: absolute; left: 50%; top: 50%; width: 115%; height: 105%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
                background: radial-gradient(closest-side, rgba(201,204,214,0.12), rgba(201,204,214,0.05) 50%, rgba(201,204,214,0)); }
.restpanel .phone { position: relative; width: 213px; }
.restpanel .words, .deck-panel .words, .printpanel .words { flex: 1; min-width: 0; max-width: 556px; }
.cardframe .words .t-stitle { margin-top: 14px; }
.cardframe .words .t-body { margin-top: 14px; }
.cardframe .words .t-meta { margin-top: 8px; }
.cardframe .words > .btn { margin-top: 32px; }
@media (max-width: 899px) { .restpanel, .deck-panel, .printpanel { flex-direction: column; gap: 24px; padding: 36px 24px 40px; text-align: center; } .cardframe .words { display: flex; flex-direction: column; align-items: center; } }
@media (max-width: 639px) {
  .d-rest { padding-top: 64px; }
  .restpanel .art { flex: none; width: 280px; height: 325px; }
  .restpanel .phone { width: 141px; }
  .cardframe .words .t-stitle { margin-top: 10px; } .cardframe .words .t-body { margin-top: 10px; }
  .cardframe .words > .btn { margin-top: 24px; width: 100%; }
}

.sources { padding-top: 72px; }
@media (max-width: 639px) { .sources { padding-top: 48px; } }

/* ======================================================================================== The card pages */
.card-main { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 96px; align-items: start; padding-top: 136px; }
.card-main .pn { grid-column: 1 / -1; }
.card-main .cardback { left: -2px; top: 6px; width: 445px; height: 762px; opacity: 0.3; --rot: 11deg; }
.face { position: relative; z-index: 1; flex: 0 0 420px; }
.reading { position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 624px; }
.reading .mean { margin-top: 36px; }
.reading .mean + .mean { margin-top: 26px; }
.reading .mean .t-body { margin-top: 8px; }
.reading details.fold { margin-top: 26px; border-bottom: 0; }
.reading .fold .t-label { margin-bottom: 8px; }
.question { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); }
.question .t-q { margin-top: 8px; }
.pn { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; border-top: 1px solid var(--hair); padding-top: 4px; }
.pn a { display: flex; align-items: center; gap: 14px; padding: 13px 0; color: var(--silver); }
.pn a:hover .t-label { color: var(--bright); }
.pn .arrow svg { width: 28px; height: 10px; }
.pn .arrow.back svg { transform: scaleX(-1); }
.pn .thumb { width: 40px; height: auto; aspect-ratio: 240 / 412; box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
.corr { padding: 136px 0; margin-top: 0; }
.corr-herb { left: -74px; top: 19px; width: 300px; height: 300px; opacity: 0.14; --rot: 52deg; }
.corr-stone { left: calc(50% + 510px); top: 471px; width: 300px; height: 300px; opacity: 0.12; --rot: -8deg; }
.corr-panel { padding: 44px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.corr-panel .t-stitle { margin-top: 8px; }
.corr-panel .star { margin-top: 18px; }
.corr-panel .rows { margin-top: 18px; text-align: left; }
.corr-panel details.fold { width: 100%; text-align: left; border-top: 1px solid var(--hair); }
.spirit-more { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0 8px; }
.spirit-more .seal { width: 64px; height: 64px; mix-blend-mode: lighten; flex: none; }
.more { display: flex; justify-content: center; gap: 48px; padding-top: 40px; }
.deck { padding: 96px 0 0; }
.deck-panel .art { flex: 0 0 524px; height: 419px; display: flex; align-items: center; justify-content: center; }
.deck-panel .fan { transform: scale(0.849); }
.page-index .t-intro { padding-top: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 760px; }
.page-index .t-intro .t-body { margin-top: 16px; }
.page-index .t-intro .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 32px; }
/* A pair of buttons is one width, side by side or (on a phone) stacked (Bobby, November 4). */
.actions .btn { min-width: 248px; }
@media (max-width: 639px) {
  .actions, .page-index .t-intro .actions { flex-direction: column; align-items: stretch; gap: 12px; width: min(100%, 320px); margin-inline: auto; }
  .actions .btn { width: 100%; min-width: 0; }
}
.page-index .group { padding-top: 96px; }
.page-index .group .sub { text-align: center; margin-top: 10px; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 28px 18px; margin-top: 36px; }
.grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.grid img { width: 100%; height: auto; outline: 1px solid var(--hair); outline-offset: -1px; background: var(--base); transition: outline-color 200ms ease-out; }
.grid a:hover img { outline-color: var(--line); }
.grid .cap { font: italic 400 16px/20px var(--serif); color: var(--silver); }
.grid .n { display: block; font: 400 12px/16px var(--display); letter-spacing: 0.18em; color: var(--muted); font-style: normal; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1239px) and (min-width: 640px) { .card-main { column-gap: 48px; grid-template-columns: 340px minmax(0, 1fr); } .deck-panel .art { flex-basis: auto; } }
@media (max-width: 899px) and (min-width: 640px) { .card-main { grid-template-columns: minmax(0, 1fr); justify-items: center; } .card-main .face { width: 340px; } .card-main .reading { justify-self: stretch; } }
@media (max-width: 639px) {
  .card-main { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 71px; }
  .card-main .reading { order: 2; justify-self: stretch; }
  .card-main .pn { order: 1; }
  .card-main .cardback { left: calc(50% - 165px); top: 5px; width: 300px; height: 514px; }
  .face { flex: none; width: 240px; }
  .reading { width: 100%; margin-top: 0; }
  .reading .essence { text-align: center; }
  .reading .mean { margin-top: 28px; } .reading .mean + .mean { margin-top: 22px; }
  .pn { flex-direction: column; gap: 0; border-top: 0; margin-top: 24px; }
  .pn .thumb { width: 30px; }
  .pn a { padding: 8px 0; }
  .corr { padding: 80px 0; }
  .corr-herb { left: auto; right: -110px; top: -60px; width: 170px; height: 170px; }
  .corr-stone { display: none; }
  .corr-panel { padding: 28px 20px; }
  .corr-panel .row { flex-wrap: nowrap; }
  .corr-panel .t-value { max-width: 62%; }
  .more { flex-direction: column; align-items: center; gap: 0; padding-top: 24px; }
  .deck { padding-top: 64px; }
  .deck-panel .art { flex: none; width: 100%; height: 360px; }
  .deck-panel .fan { transform: scale(0.78); }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
  .page-index .group { padding-top: 64px; }
}

/* ======================================================================================== The Guidebook */
.g-hero { padding: 136px 0 0; }
.g-hero .two { gap: 96px; align-items: center; }
.gcover { position: relative; flex: 0 0 360px; }
.gcover .halo { position: absolute; left: -162px; top: -135px; width: 684px; height: 810px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,204,214,0.13), rgba(201,204,214,0.06) 45%, rgba(201,204,214,0)); pointer-events: none; }
.cover.big { --cw: 360; box-shadow: 0 28px 64px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.cover.small { --cw: 216; box-shadow: 0 16.8px 38.4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.g-hero .words { flex: 1; min-width: 0; max-width: 624px; }
.g-hero .t-body { margin-top: 24px; }
.g-hero .acts { display: flex; align-items: center; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.g-hero .t-meta { margin-top: 10px; }
.g-inside { padding: 136px 0 0; }
.contents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
.contents ol { margin-top: 14px; }
.contents li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.contents .num { flex: 0 0 34px; font: 400 13px/18px var(--display); letter-spacing: 0.2em; color: var(--muted); }
.contents .it { font: italic 400 17px/22px var(--serif); color: var(--cream); }
.g-from { padding: 136px 0 0; }
.g-back { left: calc(50% + 506px); top: 61px; width: 280px; height: 480px; opacity: 0.26; --rot: -14deg; }
.spread { display: flex; gap: 80px; align-items: center; padding: 56px 80px; margin-top: 48px; }
.sface { flex: 0 0 300px; display: block; }
.spread .page { flex: 1; min-width: 0; max-width: 640px; }
.spread .t-stitle { margin-top: 8px; }
.spread .gd { margin-top: 4px; }
.spread .rows { margin-top: 18px; border-top: 1px solid var(--hair); }
.spread details.fold { border-bottom: 1px solid var(--hair); }
.spread .up { margin-top: 18px; }
.spread .up + .t-body { margin-top: 6px; }
.spirit-txt { padding-bottom: 8px; }
.g-print { padding: 136px 0 200px; }
.printpanel .art { flex: 0 0 380px; height: 380px; display: flex; align-items: center; justify-content: center; }
.printpanel .lform { margin-top: 32px; }
.g-key { top: auto; bottom: 70px; }
@media (max-width: 1023px) and (min-width: 640px) { .g-hero .two { flex-direction: column; } .spread { flex-direction: column; } }
@media (max-width: 639px) {
  .g-hero { padding-top: 72px; }
  .g-hero .two { flex-direction: column; gap: 40px; }
  .gcover { flex: none; align-self: center; }
  .cover.big { --cw: 258; }
  .gcover .halo { left: -120px; top: -100px; width: 500px; height: 590px; }
  .g-hero .words { text-align: center; }
  .g-hero .t-body { margin-top: 18px; }
  .g-hero .acts { flex-direction: column; gap: 8px; margin-top: 28px; }
  .g-hero .acts .btn { width: 100%; }
  .g-inside { padding-top: 72px; }
  .contents { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 36px; }
  .contents li { padding: 11px 0; }
  .contents .it { font-size: 15px; line-height: 20px; }
  .g-from { padding-top: 72px; }
  .g-back { display: none; }
  .spread { flex-direction: column; gap: 28px; padding: 28px 20px 32px; margin-top: 36px; }
  .sface { flex: none; width: 200px; }
  .spread .page { text-align: center; }
  .spread .rows, .spread details.fold { text-align: left; }
  .g-print { padding: 72px 0 176px; }
  .printpanel .art { flex: none; width: 100%; height: 372px; }
  .printpanel .lform { margin-top: 24px; width: 100%; text-align: left; }
}

/* ======================================================================================== The List */
.l-form { padding: 136px 0 296px; }
@media (min-width: 640px) { .lc2 .intro { flex-basis: 380px; } }
.lc2 .candle { margin-bottom: 16px; }
.hear { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hear .star { margin-top: 14px; }
.hear .rows { margin-top: 14px; text-align: left; }
.hear .link { margin-top: 10px; }
.phone-only { display: none; }
.l-key { top: auto; bottom: -54px; }
@media (max-width: 639px) {
  .l-form { padding: 0 0 64px; margin-top: 64px; }
  .wide-only { display: none; }
  .phone-only { display: flex; margin-top: 232px; }
  .l-key { bottom: 400px; }
}

/* ======================================================================================== Plain pages */

.prose { width: min(720px, 100% - 2 * var(--gutter)); margin: 72px auto 0; font: 400 19px/29.5px var(--serif); color: var(--cream); }
.prose .lhead { text-align: center; margin-bottom: 40px; }
.prose .sub { font: italic 400 24px/30px var(--serif); color: var(--silver); }
.prose .when { margin-top: 6px; font: italic 400 17px/22px var(--serif); color: var(--muted); }
.prose p { margin: 0 0 14px; }
.prose h2 { display: flex; align-items: center; gap: 16px; margin: 48px 0 16px; font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.prose h2::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.prose h3 { margin: 28px 0 6px; font: 400 18px/24px var(--display); letter-spacing: 0.08em; color: var(--bright); }
.prose ul { margin: 0 0 16px; }
.prose li { position: relative; padding-left: 22px; margin: 0 0 8px; }
.prose li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.prose a:not(.link) { color: var(--silver); border-bottom: 1px solid var(--hair); }
.prose a:not(.link):hover { color: var(--bright); border-bottom-color: var(--silver); }
.prose b { font-weight: 500; color: var(--bright); }
.prose .muted { color: var(--muted); }
.prose .path { font-variant: small-caps; letter-spacing: 0.04em; color: var(--silver); }
.prose .panel.short { padding: 28px 32px 18px; margin: 0 0 40px; }
.prose .panel.short h2 { margin-top: 0; }
.prose .ask-us { text-align: center; margin: 0 0 40px; }
.prose .ask-us .mail { font: 400 17px/24px var(--display); letter-spacing: 0.12em; }
.prose .jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 40px; }
.prose .jump li { padding: 0; margin: 0; } .prose .jump li::before { display: none; }
.prose .jump a { display: inline-block; padding: 10px 14px; border: 1px solid var(--field); font: 400 12px/16px var(--display); letter-spacing: 0.16em; color: var(--silver); }
.prose .jump a:hover { border-color: var(--line); color: var(--bright); }
.prose .cta { margin-top: 32px; text-align: center; }
.page-plain .foot { margin-top: 72px; }
@media (max-width: 639px) {

  .prose { margin-top: 48px; font-size: 18px; line-height: 28px; }
  .prose .sub { font-size: 19px; line-height: 26px; }
  .prose .panel.short { padding: 22px 18px 12px; }
}

/* The place dialog */
.placedlg { width: min(520px, 100% - 32px); padding: 0; border: 1px solid var(--hair); background: var(--raised); color: var(--bright); }
.placedlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.pd { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.pd-acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: 1px solid var(--hair); }
.pl-opt { width: 100%; min-height: 44px; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--faint); text-align: left; cursor: pointer; font: italic 400 17px/22px var(--serif); color: var(--silver); }
.pl-opt:hover { color: var(--bright); }
.pd-close { align-self: flex-end; color: var(--muted); }

/* ======================================================================================== Notes, November 4 */
/* The footer's social row: quiet marks in silver, each a 44px target. */
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: -6px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--silver); transition: color 200ms ease-out; }
.social a:hover, .social a:focus-visible { color: var(--bright); }
.social svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* The tarot index: jump links held at the top of the screen, and each section opened at its first row. */
.tjump { position: sticky; top: 0; z-index: 30; margin-top: 64px; background: rgba(12, 11, 19, 0.94); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--hair);
         -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tjump ul { display: flex; gap: 0 40px; width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.tjump ul::-webkit-scrollbar { display: none; }
.tjump ul.more-right { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.tjump ul.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.tjump ul.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
/* Centred when they fit, scrollable from the first when they don't. */
.tjump li:first-child { margin-left: auto; } .tjump li:last-child { margin-right: auto; }
.tjump a { display: block; padding: 15px 0 13px; border-bottom: 1px solid transparent; font: 400 14px/18px var(--display); letter-spacing: 0.22em; color: var(--silver); white-space: nowrap; }
.tjump a:hover { color: var(--bright); }
.tjump a[aria-current] { color: var(--bright); border-bottom-color: var(--line); }
.page-index .group { scroll-margin-top: 64px; }
.tjump + .group { padding-top: 72px; }
.group.collapsed .grid li:nth-child(n + 8) { display: none; }
.more-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin: 20px auto 0; padding: 0 16px; background: none; border: 0; cursor: pointer;
            font: 400 15px/20px var(--display); letter-spacing: 0.22em; color: var(--silver); }
.more-btn::after { content: '+'; font: italic 400 24px/24px var(--serif); letter-spacing: 0; color: var(--muted); }
.more-btn[aria-expanded="true"]::after { content: '−'; }
.more-btn:hover, .more-btn:hover::after { color: var(--bright); }
.more-btn[hidden] { display: none; }
@media (max-width: 1100px) { .group.collapsed .grid li:nth-child(n + 6) { display: none; } }
@media (max-width: 639px) {
  .tjump { margin-top: 48px; }
  .tjump ul { gap: 0 26px; width: 100%; padding: 0 24px; }
  .tjump a { padding: 14px 0 12px; font-size: 12px; line-height: 16px; letter-spacing: 0.2em; }
  .page-index .group { scroll-margin-top: 52px; }
  .tjump + .group { padding-top: 48px; }
  .group.collapsed .grid li:nth-child(n + 4) { display: none; }
  .more-btn { font-size: 13px; line-height: 18px; margin-top: 16px; }
}

/* About: how to say the name, a quiet line under the hero. */
.prose .say { margin: 0 0 18px; font: italic 400 17px/22px var(--serif); color: var(--muted); }
.prose .say span { font: 400 13px/18px var(--display); letter-spacing: 0.2em; font-style: normal; color: var(--silver); }
@media (max-width: 639px) { .prose .say { font-size: 15px; line-height: 20px; margin-bottom: 14px; } .prose .say span { font-size: 12px; } }
/* The List's hero carries a paragraph over the art: a deeper shade behind the words, so no bright leaf or moth sits
   under small text. */
.page-list .head .plate .scentre { background: radial-gradient(closest-side, rgba(14,13,19,0.8), rgba(14,13,19,0.6) 55%, rgba(14,13,19,0)); }

/* ======================================================================================== The App (/app) */
/* The app tab by tab in its own screens (framed by scripts/build-phones.py), then everything inside, and the list. */
.ap-intro { padding: 136px 0 0; }
.ap-intro .two { gap: 96px; align-items: center; justify-content: center; }
.ap-lead { flex: 0 0 300px; }
.ap-lead img { position: relative; width: 300px; filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.55)); }
.ap-intro .words { flex: 1; min-width: 0; max-width: 600px; }
.ap-intro .t-body { margin-top: 24px; }
.ap-when { margin-top: 36px; }
.ap-intro .lform { margin-top: 18px; }
.ap-badge { display: inline-block; margin-top: 18px; }
.ap-sec { padding: 120px 0; }
.ap-intro + .ap-sec { margin-top: 64px; }
.ap-lede { margin-top: 20px; max-width: 680px; }
.ap-shots { display: flex; gap: 56px; margin-top: 64px; }
.ap-shots li { flex: 0 0 236px; }
.ap-shots li:first-child { margin-left: auto; } .ap-shots li:last-child { margin-right: auto; }
.ap-shots img { width: 100%; }
.ap-shots figcaption { margin-top: 20px; text-align: center; }
.ap-shots.six { flex-wrap: wrap; justify-content: center; max-width: 860px; margin-inline: auto; row-gap: 64px; }
.ap-shots.six li { margin: 0; }
.ap-opt-in { gap: 80px; align-items: flex-start; justify-content: center; margin-top: 56px; }
.ap-opt-in > figure { flex: 0 0 236px; }
.ap-opt-in > figure figcaption { margin-top: 20px; text-align: center; }
.ap-opt-in .words { flex: 1; min-width: 0; max-width: 600px; }
.ap-opt-in .words .t-body + .t-body { margin-top: 16px; }
.ap-fold { margin-top: 32px; }
.ap-shots.in-fold { gap: 24px; margin-top: 8px; }
.ap-shots.in-fold li { flex-basis: 180px; }
.ap-shots.in-fold li:first-child { margin-left: 0; }
.ap-kpanel { max-width: 800px; margin: 0 auto; padding: 56px 72px 60px; text-align: center; }
.ap-kpanel .t-stitle { margin-top: 14px; }
.ap-kpanel .t-body { margin-top: 16px; }
.ap-klist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 24px; text-align: left; }
.ap-klist li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--hair); font: italic 400 19px/26px var(--serif); color: var(--bright); }
.ap-klist li::before { content: ''; position: absolute; left: 3px; top: 21px; width: 6px; height: 6px; background: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ap-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 64px; }
.ap-tab + .ap-tab { margin-top: 56px; }
.page-app .sec-head .t-title { text-wrap: balance; }
.ap-tab h3 { display: flex; align-items: center; gap: 12px; color: var(--silver); }
.ap-ic { width: 24px; height: 24px; flex: none; color: var(--silver); }
.ap-tab ul { margin-top: 14px; }
.ap-tab li { padding: 11px 0; border-top: 1px solid var(--hair); font: italic 400 17px/23px var(--serif); color: var(--cream); }
.ap-opt { display: inline-block; margin-left: 4px; padding: 1px 6px 0; border: 1px solid var(--hair); font: normal 400 10.5px/15px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); white-space: nowrap; vertical-align: 2px; }
.ap-foot { padding-bottom: 200px; }
.ap-foot .printpanel .art img { position: relative; width: 240px; }
@media (max-width: 1023px) {
  .ap-intro .two, .ap-opt-in { flex-direction: column; align-items: center; }
  .ap-shots, .ap-shots.six { flex-wrap: nowrap; justify-content: flex-start; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
                             margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; gap: 28px; scrollbar-width: none; }
  .ap-shots::-webkit-scrollbar { display: none; }
  .ap-shots li, .ap-shots.six li { flex-basis: 200px; scroll-snap-align: start; }
  .ap-shots.six li:first-child { margin-left: auto; } .ap-shots.six li:last-child { margin-right: auto; }
  .ap-shots.in-fold { margin-inline: calc(-1 * var(--gutter)); }
  .ap-shots.in-fold li { flex-basis: 180px; }
  .ap-index { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; gap: 48px; }
  .ap-col { display: contents; }
  .ap-tab + .ap-tab { margin-top: 0; }
}
@media (max-width: 639px) {
  .ap-intro { padding-top: 64px; }
  .ap-intro .two { gap: 40px; }
  .ap-lead { flex: none; }
  .ap-lead img { width: 240px; }
  .ap-intro .words, .ap-opt-in .words { text-align: center; }
  .ap-intro .lform { text-align: left; }
  .ap-intro .t-body { margin-top: 18px; }
  .ap-when { margin-top: 28px; }
  .ap-sec { padding: 72px 0; }
  .ap-intro + .ap-sec { margin-top: 40px; }
  .ap-lede { margin-top: 14px; }
  .ap-shots { margin-top: 40px; }
  .ap-opt-in { gap: 32px; margin-top: 36px; }
  .ap-opt-in > figure { flex: none; width: 200px; }
  .ap-fold { text-align: left; }
  .ap-kpanel { padding: 36px 24px 32px; }
  .ap-klist { grid-template-columns: minmax(0, 1fr); }
  .ap-klist li { font-size: 17px; line-height: 23px; }
  .ap-index { margin-top: 40px; gap: 40px; }
  .ap-tab li { font-size: 15px; line-height: 21px; padding: 10px 0; }
  .ap-foot { padding-bottom: 160px; }
  .ap-foot .printpanel .art img { width: 220px; }
}