/* Cards: the landing's drawings, and the I Ching page: the question, the cloth with the hexagram beside it, the
   counting, the reading and the how-this-works note. tarot and the oracle add theirs below as they come */
.cards * { box-sizing: border-box }
.cards { --ring: color-mix(in srgb, var(--ink) 42%, transparent) }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* the landing: tarot shows a fan of Smith's own faces, each card the page's colour with its lines in the theme's ink,
   so it's chalk on charcoal in the dark and charcoal on chalk in the light. our own deck isn't out yet: one card with
   the wordmark on it, a plain line round it and nothing behind, and no link */
.world .live { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: end center; padding: 104px 24px 28px; color: var(--ink) }
.fan i, .ours i { position: relative; display: block; grid-area: 1 / 1; height: 92%; aspect-ratio: 960 / 1660; border-radius: 5% / 2.9%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent) }
.world .live:is(.fan, .ours) { padding-top: 150px }
.world .live.fan { padding: 44px 16px 0 }
.fan i { height: 88%; transform-origin: 50% 118%; transform: translateY(-6%) rotate(var(--r)); box-shadow: 0 14px 28px -18px rgb(0 0 0 / .7); transition: transform .35s var(--ease-smooth-out, ease) }
.fan i::after { content: ''; position: absolute; inset: 4.5%; background: var(--ink); -webkit-mask: var(--face) center / contain no-repeat; mask: var(--face) center / contain no-repeat }
.world a:hover .fan i, .world a:focus-visible .fan i { transform: translateY(-6%) rotate(calc(var(--r) * 1.18)) }
.world .live.ours { place-items: center }
.ours i { display: grid; place-items: center; height: 84%; border-color: var(--ink) }
.ours .logo { position: relative; z-index: 1; width: 84%; aspect-ratio: 1387.1 / 203.8; background: currentColor; -webkit-mask: url(/site/mushlove.svg) center / contain no-repeat; mask: url(/site/mushlove.svg) center / contain no-repeat }
.world .pill { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--soft); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.recent { margin: 44px 0 0; padding: 28px 0 0; border-top: 1px dotted var(--ring); max-width: 720px }
.recent h2 { margin: 0 0 12px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }
.recent ol { list-style: none; margin: 0; padding: 0 }
.recent a { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none }
.recent a:hover b, .recent a:focus-visible b { text-decoration: underline; text-underline-offset: 3px }
.recent .kind, .recent .when { font: 500 12px/1.3 var(--mono); color: var(--soft) }
.recent b { font-weight: 700 }

/* a page: the title row, then everything in one column, with the stage given more room */
.cd-main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 72px }
.cd-main > :not(.stage, .table) { max-width: 760px }
.intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px }
.intro h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em }
.intro .sub { margin: 0; font-size: 15px; line-height: 1.4; color: var(--soft); text-wrap: pretty }
.intro .up { flex-basis: 100%; margin: 0; font: 500 12px/1.3 var(--mono); color: var(--soft) }
.intro .up a, .how a, .notes a { text-underline-offset: 3px }
.needs { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash) }
.soft { color: var(--soft) }
.kicker { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }

/* the question */
.ask { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px }
.ask label { font-size: 15px; font-weight: 700 }
.ask input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 12px; background: var(--bg); color: var(--ink); font: 500 16px/1.3 var(--sans) }
.ask input::placeholder { color: var(--soft) }
.ask input:read-only { background: var(--wash); border-color: var(--line) }
.ask input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

/* the stage: the cloth, and the hexagram being built to its right */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: stretch }
.cloth { position: relative; aspect-ratio: 1640 / 940; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--charcoal) }
.cloth canvas, .cloth svg { display: block; width: 100%; height: 100% }
:root[data-theme="light"] .cloth { filter: url(#chalk); border-color: color-mix(in srgb, var(--charcoal) 14%, transparent) }
.build { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 22px }
.drawn .hexagram { width: 100%; max-width: 150px; margin: 0 auto }
.hexagram { display: block; width: 100%; height: auto; color: var(--ink) }
.hexagram line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: butt; vector-effect: non-scaling-stroke }
.hexagram .hx-row.on line { stroke-width: 3.5px }
.hexagram .hx-mark { fill: none; stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke }
/* the lines in words, read in order from line 1 but shown from the bottom up, like the hexagram */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 2px; font: 500 12px/1.5 var(--mono) }
.rows li { display: flex; gap: 10px; color: var(--ink) }
.rows li span { min-width: 4.6em; color: var(--soft) }
.rows li.to-come { color: var(--soft) }
.rows li.to-come i { font-style: normal; opacity: .6 }

/* Throw the sticks, and Count quickly beside it */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 20px 0 0 }
.throw { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 16px/1 var(--sans); cursor: pointer; transition: opacity var(--duration-quick) }
.throw .of { font: 500 12px/1 var(--mono); opacity: .72 }
.throw:hover { opacity: .88 }
.throw[aria-disabled="true"] { opacity: .45; cursor: progress }
.throw:focus-visible, .switch:focus-visible, .quiet:focus-visible, .reading h2:focus-visible, .past a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; border-radius: 10px }
.switch .track { position: relative; width: 38px; height: 22px; border: 1.5px solid var(--ink); border-radius: 999px }
.switch .track span { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); opacity: .45; transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) }
.switch[aria-pressed="true"] .track span { transform: translateX(16px); opacity: 1 }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--soft) }
.tally { list-style: none; margin: 6px 0 0; padding: 0; font: 500 13px/1.7 var(--mono); white-space: pre-wrap; color: var(--ink) }

/* the reading */
.reading { margin: 40px 0 0; padding: 32px 0 0; border-top: 1px dotted var(--ring); display: flex; flex-direction: column; gap: 14px }
.reading h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; border-radius: 6px }
.reading h2 .num { font-family: var(--mono); font-weight: 500 }
.reading h2 i { font-style: normal; font-weight: 600; color: var(--soft) }
.reading .asked { margin: 0; font-size: 17px; font-style: italic; color: var(--soft) }
.reading p { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty }
.reading p.soft { font-size: 15px }
.reading .tri { font: 500 13px/1.5 var(--mono); color: var(--soft) }
.pair { display: flex; align-items: flex-start; gap: 18px; margin: 6px 0 }
.pair figure .hexagram { width: 96px }
.pair figure:first-child .hexagram { width: 115px } /* its box is wider, to hold the marks */
.pair figure { margin: 0; display: flex; flex-direction: column; gap: 8px }
.pair figcaption { font: 500 12px/1.3 var(--mono); color: var(--soft) }
.pair .to { width: 40px; flex: none; margin-top: 42px; fill: none; stroke: var(--soft); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round }

/* the book's words: each passage in our English, Legge's under a disclosure, the hexagram it becomes set apart */
.book, .words { display: flex; flex-direction: column; gap: 14px }
.book[aria-busy="true"] p { opacity: .7 }
.psg { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 0; border-top: 1px solid var(--line) }
.psg h3 { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink) }
.psg h3 span { color: var(--soft); letter-spacing: .04em; text-transform: none }
.psg.becoming { margin-top: 10px; border-top: 1px dotted var(--ring) }
.psg details { margin: 2px 0 0 }
.psg summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 500 12px/1.3 var(--mono); color: var(--soft); cursor: pointer; list-style: none; border-radius: 6px }
.psg summary::-webkit-details-marker { display: none }
.psg summary::before { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.4px 1.4px 0; transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-smooth-out) }
.psg details[open] summary::before { transform: rotate(45deg) translate(-2px, -1px) }
.psg summary:hover { color: var(--ink) }
.psg summary:focus-visible, .again:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.reading .psg details p { margin: 4px 0 6px; padding: 0 0 0 14px; border-left: 1px dotted var(--ring); font-size: 15px; line-height: 1.6; color: var(--soft) }
.again { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }

/* your readings */
.past { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px dotted var(--ring) }
.past[hidden], .reading[hidden] { display: none }
.past h2, .how h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em }
.past p { margin: 0 0 12px; font-size: 14px }
.past ol { list-style: none; margin: 0 0 14px; padding: 0 }
.past a { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none }
.past a:hover b { text-decoration: underline; text-underline-offset: 3px }
.past .when { font: 500 12px/1.3 var(--mono); color: var(--soft) }
.past .q { flex-basis: 100%; font-size: 14px; color: var(--soft); overflow-wrap: anywhere }
.quiet { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer }
.quiet:hover { border-color: var(--ink) }

/* how this works */
.how { margin: 48px 0 0; padding: 32px 0 0; border-top: 1px dotted var(--ring); display: flex; flex-direction: column; gap: 14px }
.how p { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty }
.how p.soft { font-size: 14px }
.odds { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.odds th, .odds td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.odds thead th { font: 500 13px/1.3 var(--mono) }
.odds thead th span { display: block; margin-top: 2px; font-size: 11px; color: var(--soft) }
.odds tbody th { font-weight: 700 }
.notes { margin: 48px 0 0; padding: 24px 0 0; border-top: 1px dotted var(--ring); font-size: 14px; color: var(--soft) }
.notes nav { display: flex; flex-wrap: wrap; gap: 0 16px }
.notes nav a { display: inline-flex; align-items: center; min-height: 32px }
.notes nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: none }

/* tarot: one big card face down (hero), with One card and Three cards on it; then the deck below its places, fanning
   as you reach for it (draw); then the cards face up with their words beside them (done) */
.spread[hidden], .deck[hidden], .hint[hidden], .throw[hidden], .ghost[hidden] { display: none }
/* the tarot's one card or three, and beside it Options: a small pill that opens the drawer, with a dot once something's in it */
.setup { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 0 }
.setup[hidden] { display: none }
.opts { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--soft); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--duration-quick), color var(--duration-quick) }
.opts:hover, .opts[data-set] { border-color: var(--ink); color: var(--ink) }
.opts[data-set]::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor }
.opts:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
/* the drawer: up from the bottom of the screen, over a dimmed page */
.drawer { position: fixed; inset: auto 0 0; width: min(560px, 100%); max-width: none; max-height: 85dvh; margin: 0 auto; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink) }
.drawer::backdrop { background: rgb(0 0 0 / .6) }
.drawer[open] { animation: rise var(--duration-slow) var(--ease-smooth-out) }
.drawer form { display: flex; flex-direction: column; gap: 18px }
.drawer h2 { margin: 0; color: var(--soft); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase }
.drawer h2:focus { outline: none }
.drawer .ask { margin: 0 }
.drawer .quiet { align-self: flex-end }
@keyframes rise { from { transform: translateY(100%) } }

/* the pills, on the card and over the deck, and Draw another: chalk words on a see-through pill with a chalk border */
.spread { display: inline-flex; gap: 8px; margin: 0 }
.spread button { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--chalk); border-radius: 999px; background: color-mix(in srgb, var(--charcoal) 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--chalk); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-quick) }
.spread button::after { content: ''; position: absolute; inset: -8px -3px } /* a bigger target than it looks */
.spread button:hover, .ghost:hover { background: color-mix(in srgb, var(--chalk) 14%, var(--charcoal) 50%) }
.table:not([data-stage="hero"]) .spread button[aria-pressed="true"] { background: color-mix(in srgb, var(--chalk) 20%, transparent) }
.spread button:focus-visible, .ghost:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px }
.ghost { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border: 1px solid var(--chalk); border-radius: 999px; background: color-mix(in srgb, var(--charcoal) 40%, transparent); color: var(--chalk); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-quick) }

.table { --pl-w: 224px; --dk-w: 96px; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 6px 0 14px }
.table[data-spread="three"] { --pl-w: 188px }
/* as big as the screen allows, and never taller than about two thirds of it */
.table[data-stage="hero"] { --pl-w: min(340px, calc(min(64svh, 620px) * .578), 78vw); overflow-x: clip }
.lay { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100% }
.lay .status { margin: 0; text-align: center }
.lay .status:empty { display: none }
.spot { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100% }
.table[data-stage="draw"] .setup { order: -1 }
.table:not([data-stage="done"]) .side { display: none }
.slots { list-style: none; display: flex; justify-content: center; gap: 22px; width: 100%; margin: 0; padding: 0 }
.slot { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; width: var(--pl-w); min-width: 0 }
.slot .pos { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); text-align: center }
.place { position: relative; width: 100%; aspect-ratio: 960 / 1660; border-radius: calc(var(--pl-w) * .045); outline: 1px dashed var(--ring); outline-offset: -1px; perspective: 1600px }
.place:has(.card) { outline-color: transparent }

/* the big card: the card, a button over it that turns it, and the pills on it near the bottom, all in one cell.
   two more cards, backs up like it, lie under it just showing, and spread a little as you reach for it */
.take { display: none }
.table[data-stage="hero"] .spot { display: grid; place-items: end center }
.table[data-stage="hero"] .spot > * { grid-area: 1 / 1 }
.table[data-stage="hero"] .take { display: block; z-index: 1; align-self: stretch; width: var(--pl-w); padding: 0; border: 0; border-radius: calc(var(--pl-w) * .045); background: none; cursor: pointer; -webkit-tap-highlight-color: transparent }
.table[data-stage="hero"] .take:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.table[data-stage="hero"] .setup { z-index: 2; margin: 0 0 22px; pointer-events: none }
.table[data-stage="hero"] .setup > * { pointer-events: auto }
.table[data-stage="hero"] .opts { display: none }
.table[data-stage="hero"] .card { transition: translate var(--duration-fast) var(--ease-smooth-out) }
.spot:has(.take:hover) .card { translate: 0 -6px }
.table[data-stage="hero"] .place { isolation: isolate }
.under { position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform-origin: 50% 120%; rotate: -4deg; transition: rotate var(--duration-medium) var(--ease-smooth-out) }
.under + .under { rotate: 4deg }
.table:not([data-stage="hero"]) .under { display: none }
.spot:has(.take:hover) .under { rotate: -7deg }
.spot:has(.take:hover) .under + .under { rotate: 7deg }

/* each card keeps its name from stage to stage, so it glides from where it was to where it goes */
.slot:nth-child(1) .card { view-transition-name: tarot-c0 }
.slot:nth-child(2) .card { view-transition-name: tarot-c1 }
.slot:nth-child(3) .card { view-transition-name: tarot-c2 }
::view-transition-group(tarot-c0), ::view-transition-group(tarot-c1), ::view-transition-group(tarot-c2) { animation-duration: var(--duration-very-slow) }

/* a card: its back, a chalk mandala of mycelium on charcoal in either theme, and its face, Smith's lines in the
   theme's ink. the face is an SVG used as a mask, so it takes any colour and is fetched only when it's needed */
.card { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 50% }
.card.fly { transition: transform var(--duration-very-slow) var(--ease-smooth-out) }
.card .inner { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform var(--duration-very-slow) var(--ease-smooth-out) }
.card.up .inner { transform: rotateY(180deg) }
.card .back, .card .face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.card .back, .dk, .under { background: var(--charcoal); border: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent) }
.card .back::after, .dk::after, .under::after { content: ''; position: absolute; inset: 0; background: var(--chalk); -webkit-mask: var(--back, url(/cards/tarot/back.svg)) center / contain no-repeat; mask: var(--back, url(/cards/tarot/back.svg)) center / contain no-repeat; pointer-events: none }
.card .face { transform: rotateY(180deg); padding: 4%; background: var(--bg); border: 1px solid var(--ring) }
.card .face i { display: block; width: 100%; height: 100%; background: var(--ink); -webkit-mask: var(--face) center / contain no-repeat; mask: var(--face) center / contain no-repeat }
/* the oracle prints each card's name under its drawing, in the house type, scaled to the card */
.face .cap { position: absolute; left: 10%; right: 10%; top: 81.5%; bottom: 5%; display: flex; align-items: center; justify-content: center; font: 700 clamp(9px, calc(var(--pl-w) * .075), 17px)/1.15 var(--sans); letter-spacing: .01em; color: var(--ink); text-align: center; text-wrap: balance }
.card.fade { opacity: 0; transition: opacity var(--duration-slow) }
.card.fade.in { opacity: 1 }

/* the deck: each card a button, placed by transform alone so the fan stays smooth on a phone */
.deck { position: relative; width: 100%; height: 280px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.dk { position: absolute; top: var(--top, 26px); left: calc(50% - var(--dk-w) / 2); width: var(--dk-w); aspect-ratio: 960 / 1660; padding: 0; border-radius: calc(var(--dk-w) * .06); cursor: pointer; transition: transform var(--duration-fast) var(--ease-smooth-out); will-change: transform; -webkit-tap-highlight-color: transparent }
.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.hint { margin: -6px 0 0; font: 500 12px/1.5 var(--mono); color: var(--soft); text-align: center; text-wrap: balance; max-width: 560px }

/* done: the cards, and their words beside them on a wide screen, under them on a phone */
.table[data-stage="done"] { --pl-w: min(300px, 70vw) }
.table[data-stage="done"][data-spread="three"] { --pl-w: 170px }
.side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 560px }
@media (min-width: 901px) {
  .table[data-stage="done"] { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: center; align-items: center; gap: 56px; padding-top: 22px }
  .table[data-stage="done"][data-spread="three"] { align-items: start }
  .table[data-stage="done"] .lay, .table[data-stage="done"] .slots { width: auto }
}

/* the words: small, like the Earthlings page. a ringed number and the name, a paragraph, and Read more */
.table .reading { margin: 0; padding: 0; border: 0; gap: 18px }
.table .reading:focus { outline: none }
.table .reading .kicker { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
.table .reading .asked { font-size: 14px }
.table .reading .book { gap: 22px }
.no { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: 0; text-transform: none }
.tc { display: flex; flex-direction: column; gap: 8px }
.tc + .tc { padding: 22px 0 0; border-top: 1px solid var(--line) }
.tc h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance }
.reading .tc p { margin: 0; font-size: 13.5px; line-height: 1.55; text-wrap: pretty }
.reading .tc p.pos { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
.reading .tc p.sit { font-style: italic; color: var(--soft) }
.more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 500 12px/1.3 var(--mono); color: var(--soft); cursor: pointer; list-style: none; border-radius: 6px }
.more summary::-webkit-details-marker { display: none }
.more summary::before { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.4px 1.4px 0; transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-smooth-out) }
.more[open] summary::before { transform: rotate(45deg) translate(-2px, -1px) }
.more summary:hover { color: var(--ink) }
.more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.reading .tc .more p { margin: 2px 0 4px; padding: 0 0 0 14px; border-left: 1px dotted var(--ring); color: var(--soft) }
/* the sources pill under the cards and under each card: its words stay small, whatever the card's words are */
.reading .sources { margin: 0 }
.reading .sources p { margin: 10px 0 0; font: 400 11px/1.6 var(--mono); color: var(--soft) }
.tc .fam { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
.tc p.line { margin: 0; font-size: 17px; font-weight: 600; text-wrap: pretty }
.oracle .tc h4 { margin: 8px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink) }
.oracle .reading .tc > p:not(.fam, .line) { font-size: 16px }

/* phones: the hexagram sits above the cloth, small, with its lines in words beside it */
@media (max-width: 760px) {
  .cd-main { padding: 16px 16px 56px }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 12px }
  .build { order: -1; flex-direction: row; align-items: center; gap: 18px; padding: 12px 14px; border-radius: 16px }
  .drawn { flex: none; width: 64px }
  .rows { flex: 1; font-size: 11px; line-height: 1.4 }
  .cloth { border-radius: 16px }
  .throw { flex: 1 1 100%; justify-content: center }
  .reading p { font-size: 16px }
  .odds th, .odds td { padding: 8px 4px; font-size: 12px }
  .odds thead th span { font-size: 10px }
  .world .live { padding: 104px 16px 22px }
  .world .live:is(.fan, .ours) { padding-top: 124px }
  .world .live.fan { padding: 36px 12px 0 }
  .table { --pl-w: 168px; --dk-w: 56px; gap: 18px }
  .table[data-spread="three"], .table[data-stage="done"][data-spread="three"] { --pl-w: calc((100vw - 32px - 20px) / 3) }
  .slots { gap: 10px }
  .slot .pos { font-size: 10px; letter-spacing: .04em }
  .table[data-spread="three"] .slot .pos { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center }
  .table[data-stage="hero"] { --pl-w: min(72vw, calc(62svh * .578)) }
  .under { rotate: -3deg }
  .under + .under { rotate: 3deg }
  .tc h3 { font-size: 18px }
  .reading .tc p { font-size: 14px }
}
@media (prefers-reduced-motion: reduce) { .fan i, .throw, .switch .track span, .psg summary::before, .spread button, .ghost, .opts, .dk, .card.fly, .card .inner, .more summary::before, .table[data-stage="hero"] .card, .under { transition: none } .drawer[open] { animation: none } }