/* Emberlune website (built by tools/build-site.mjs). Warm ivory and cream, ember and apricot, dusty rose, sage and a
   little gold; an editorial serif for headings and a readable sans-serif for text. The pixel art lives only in the
   pictures, which keep their crisp pixels. Fonts: Inter + Fraunces (SIL Open Font License), served from this site. */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #f1e7d8;          /* warm ivory parchment */
  --bg-alt: #e9dcc8;      /* a shade deeper, alternating sections */
  --surface: #faf5ec;     /* cards and panels: cream, never stark white */
  --ink: #312724;
  --ink-soft: #675c56;
  --line: #ddcdb6;
  --gold: #7a5718;        /* restrained gold: kickers, small accents */
  --gold-btn: #86601f;
  --gold-btn-hover: #6c4c15;
  --gold-soft: #f1dfbd;
  --lavender: #93401f;    /* links: ember (the name kept so old rules still work) */
  --lavender-soft: #f5dfcd;  /* soft apricot glow */
  --rose: #a5626c;
  --rose-soft: #f1dcdc;
  --sage: #5f7d5b;
  --sage-soft: #dfe8d8;
  --btn: #382c28;
  --btn-hover: #58453e;
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 .5h6M0 3.5h6' stroke='%23000' stroke-opacity='.025'/%3E%3Cpath d='M1.5 0v6M4.5 0v6' stroke='%23fff' stroke-opacity='.13'/%3E%3C/svg%3E"); /* the woven reading cloth: Emberlune's one texture, instead of soft glows */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(49, 39, 36, .06), 0 8px 24px rgba(49, 39, 36, .08);
  --gutter: 20px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; }
.face, .icon, .luna-face, .luna-note img, .logo img, .foot-name img, video, .lost img, .slot img, .author img, .app-note img { image-rendering: pixelated; }
p, li { text-wrap: pretty; }
a { color: var(--lavender); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--btn); color: #fff; padding: 8px 12px; z-index: 10; border-radius: 8px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }
.narrow-l { max-width: 860px; }
.center { text-align: center; }
.small { font-size: 14px; color: var(--ink-soft); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(36px, 5.4vw, 58px); line-height: 1.08; margin: 10px 0 16px; }
h2 { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 14px; }
h3 { font-size: 20px; line-height: 1.3; margin: 18px 0 6px; }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 42em; }
.kicker { font: 600 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin: 0 0 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #74462f; background: var(--lavender-soft); padding: 8px 13px; border-radius: 999px; margin: 0; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 0 4px #93401f2e; }
.more { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.more:hover { color: var(--rose); }
.tag { display: inline-block; font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 7px 10px; border-radius: 999px; background: var(--gold-soft); color: #765519; text-decoration: none; }
.tag-major-arcana { background: var(--lavender-soft); color: #74462f; }
.tag-wands { background: var(--rose-soft); color: #87454f; }
.tag-cups { background: #dfe6f1; color: #435c85; }
.tag-swords { background: var(--sage-soft); color: #445f41; }
.tag-pentacles { background: var(--gold-soft); color: #765519; }
.tag-rev { background: var(--rose-soft); color: #87454f; vertical-align: middle; margin-left: 6px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  font: 600 16px/1 var(--sans); color: #fff; background: var(--btn); border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; text-align: center;
}
.btn:hover, .btn:focus-visible { background: var(--btn-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold-btn); }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-btn-hover); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: #fff; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* header: logo, main links, app button. On phones the links become a scrollable row under the logo. */
.top { position: sticky; top: 0; z-index: 5; background: rgba(241, 231, 216, .94); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 22px/1 var(--serif); white-space: nowrap; }
.logo img { width: 21px; height: 21px; }
.logo:hover { color: var(--ink); }
.mainnav { display: flex; gap: 4px; margin-inline-start: auto; }
.mainnav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 12px; border-radius: 999px; white-space: nowrap; }
.mainnav a:hover { background: var(--bg-alt); color: var(--ink); }
.mainnav a[aria-current] { background: var(--lavender-soft); color: #7b523e; }
@media (max-width: 860px) {
  .top-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; }
  .top-cta { margin-left: auto; }
  .mainnav { order: 3; width: calc(100% + var(--gutter) * 2); margin: 8px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 10px; overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { padding: 8px 13px; font-size: 14px; background: var(--surface); border: 1px solid var(--line); }
}
@media (max-width: 400px) { .logo { font-size: 19px; } }

/* page heads */
.page-head { padding: 4px 0 28px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.crumbs ol { list-style: none; padding: 0; margin: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--ink-soft); }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: #b5a58e; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--rose); }

/* hero */
.hero { padding: 56px 0; background: var(--bg); border-bottom: 1.5px dashed var(--line); }
.hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-text h1 { margin-top: 18px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 16px; }
.quick { margin: 0; }
.quick a { color: var(--ink); font-weight: 500; }
.hero-art { margin: 0; justify-self: center; text-align: center; }
.screen { width: min(100%, 360px, calc((100svh - 210px) * 9 / 16)); min-width: 230px; border-radius: 22px; overflow: hidden; background: #201612; box-shadow: 0 30px 60px -20px rgba(49, 39, 36, .45), 0 0 0 8px var(--surface), 0 0 0 9px var(--line); }
.screen video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.hero-art figcaption { margin: 18px auto 0; max-width: 340px; }
@media (max-width: 860px) {
  .hero { padding: 28px 0 40px; }
  .hero-in { grid-template-columns: 1fr; gap: 36px; }
  .screen { width: min(100%, 320px); }
}
@media (max-width: 480px) { .hero-ctas .btn { width: 100%; } }

/* waitlist form */
.join { margin: 22px 0 0; }
.join-row { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.join input {
  flex: 1 1 230px; min-width: 0; min-height: 50px; padding: 0 18px; font: 400 16px var(--sans); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; transition: border-color .15s, box-shadow .15s;
}
.join input::placeholder { color: #7d7069; }
.join input:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px #93401f30; }
.join .btn { flex: 0 0 auto; min-height: 50px; }
.join-msg { margin: 10px 0 0; min-height: 1.4em; }
.join-msg.ok { color: #3f6b3c; font-weight: 600; font-size: 15px; }
.join-msg.err { color: #a3333a; font-size: 15px; }
.join.done .join-row { display: none; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.center .join-row, .cta .join-row { margin: 0 auto; justify-content: center; }

/* sections */
.band { padding: 72px 0; }
.band.alt { background: var(--bg-alt); }
.band.last { padding-bottom: 88px; }
.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.band-head h2 { margin-bottom: 0; }

.paths { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.paths li { margin: 0; }
.path { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-soft); transition: transform .2s, box-shadow .2s, border-color .2s; }
.path strong { font: 600 20px/1.25 var(--serif); color: var(--ink); margin-top: 8px; }
.path .more { margin-top: auto; padding-top: 8px; }
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cdb99c; color: var(--ink-soft); }
.paths li:nth-child(2) .icon-box { background: var(--lavender-soft); }
.paths li:nth-child(3) .icon-box { background: var(--sage-soft); }
.paths li:nth-child(4) .icon-box { background: var(--rose-soft); }
@media (max-width: 960px) { .paths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .paths { grid-template-columns: 1fr; } }

.icon-box { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--gold-soft); flex: 0 0 auto; }
.icon-box .icon { width: auto; height: 38px; }
.features { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { margin: 0; padding: 24px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.feature h3 { margin-top: 14px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.features li:nth-child(3n+2) .icon-box { background: var(--lavender-soft); }
.features li:nth-child(3n) .icon-box { background: var(--sage-soft); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .features { grid-template-columns: 1fr; } }

.app-band { background: linear-gradient(180deg, var(--bg) 0%, #ecdccb 100%); scroll-margin-top: 70px; }
.app-intro { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; max-width: 980px; }
.luna-face { width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 0 0 8px var(--surface), 0 0 0 9px var(--line), var(--shadow); }
.honest { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lavender); border-radius: 10px; padding: 12px 16px; }
@media (max-width: 700px) { .app-intro { grid-template-columns: 1fr; gap: 20px; } .luna-face { width: 132px; height: 132px; } }

/* card tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 18px 12px; margin: 24px 0; }
.tiles-6 { grid-template-columns: repeat(6, 1fr); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); text-align: center; font-weight: 500; font-size: 15px; line-height: 1.3; padding: 14px 6px 12px; border-radius: var(--radius); transition: background .15s; }
.tile .face { width: 128px; height: 192px; border-radius: 8px; box-shadow: 0 10px 20px -8px rgba(49, 39, 36, .45); transition: transform .2s; }
.tile:hover { background: var(--surface); color: var(--ink); }
.tile:hover .face, .tile:focus-visible .face { transform: translateY(-4px); }
@media (max-width: 900px) { .tiles-6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .tiles, .tiles-6 { grid-template-columns: repeat(3, 1fr); gap: 12px 4px; }
  .tile { font-size: 13px; padding: 8px 2px; }
  .tile .face { width: 64px; height: 96px; border-radius: 4px; }
}
@media (min-width: 400px) and (max-width: 560px) { .tile .face { width: 96px; height: 144px; border-radius: 6px; } }

/* encyclopedia: search + filter */
.finder { position: sticky; top: 66px; z-index: 3; background: var(--bg); padding: 18px 0 8px; margin-bottom: 4px; }
.search { width: 100%; max-width: 520px; min-height: 50px; padding: 0 18px 0 46px; font: 400 16px var(--sans); color: var(--ink); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5667' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px center / 20px no-repeat; border: 1.5px solid var(--line); border-radius: 999px; }
.search:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px #93401f30; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font: 500 14px/1 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 15px; min-height: 38px; cursor: pointer; }
.chip:hover { border-color: var(--lavender); }
.chip[aria-pressed="true"] { background: var(--btn); color: #fff; border-color: var(--btn); }
.finder-count { margin: 8px 0 0; min-height: 1.2em; }
.finder-empty { padding: 40px 0; text-align: center; color: var(--ink-soft); }
@media (max-width: 860px) { .finder { position: static; } }
.suit { padding: 26px 0 4px; scroll-margin-top: 200px; }
.suit + .suit { border-top: 1px solid var(--line); }
.suit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.suit-head h2 a { color: var(--ink); text-decoration: none; }
.suit-head h2 a:hover { color: var(--rose); }
.suit > p { color: var(--ink-soft); max-width: 46em; }
.card-list { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card-list a { display: flex; gap: 16px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.card-list a:hover { border-color: #cdb99c; box-shadow: var(--shadow); }
.card-list .face { width: 48px; height: 72px; border-radius: 4px; flex: 0 0 auto; }
.card-list a > span { display: flex; flex-direction: column; gap: 2px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.jump a { font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 0 16px; min-height: 38px; display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.jump a:hover { border-color: var(--lavender); }
.jump a[aria-current] { background: var(--btn); color: #fff; border-color: var(--btn); }

.cta { margin: 48px 0 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px 24px; }
.cta p { color: var(--ink-soft); }
.reading-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin: 40px 0 20px; padding: 28px 32px; border-radius: 20px; background: linear-gradient(120deg, var(--lavender-soft), var(--rose-soft)); }
.reading-cta h2 { margin: 0 0 4px; font-size: 26px; }
.reading-cta p { margin: 0; color: var(--ink-soft); }

/* card page */
.card-head { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; margin: 14px 0 0; }
.card-frame { --cloth: #efe0c4; --edge: #d9c19a; padding: 22px; border-radius: 20px; background: var(--weave), var(--cloth); box-shadow: inset 0 0 0 7px var(--cloth), inset 0 0 0 8.5px var(--edge); }
.card-frame.card-major-arcana { --cloth: #eedcc4; --edge: #d3b48f; }
.card-frame.card-wands { --cloth: #f0d6c8; --edge: #d6a68e; }
.card-frame.card-cups { --cloth: #dbe3e6; --edge: #a9bcc3; }
.card-frame.card-swords { --cloth: #dfe5d6; --edge: #b3c1a1; }
.face.big { width: 192px; height: 288px; display: block; border-radius: 10px; box-shadow: 0 20px 36px -14px rgba(49, 39, 36, .55); }
.card-intro h1 { margin: 12px 0 12px; }
.h1-sub { display: block; font: 500 .4em/1.3 var(--sans); color: var(--ink-soft); letter-spacing: 0; margin-top: 8px; }
.card-intro .lead { font-size: 18px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts div { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.facts div:nth-child(odd) { border-right: 1px solid var(--line); }
.facts dt { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.facts dd { margin: 2px 0 0; font-size: 15px; }
@media (max-width: 760px) {
  .card-head { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .card-intro { justify-self: stretch; }
  .face.big { width: 128px; height: 192px; }
}
@media (max-width: 440px) { .facts { grid-template-columns: 1fr; } .facts div:nth-child(odd) { border-right: 0; } }

.card-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 56px; align-items: start; margin-top: 22px; }
.card-main { order: 1; min-width: 0; }
.card-side { order: 2; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.toc { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.toc a { color: var(--ink); text-decoration: none; min-height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; font-size: 15px; }
.toc a:hover { background: var(--bg-alt); }
.toc-title { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin: 0 0 6px 10px; }
.side-cta { padding: 18px; background: var(--lavender-soft); border-radius: var(--radius); }
.side-title { font: 600 18px/1.3 var(--serif); margin: 0 0 4px; }
.side-cta .btn { width: 100%; margin-top: 8px; }
@media (max-width: 1000px) {
  .card-body { grid-template-columns: 1fr; gap: 0; }
  .card-side { order: 0; position: static; }
  .toc { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
  .toc a { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0 14px; min-height: 36px; font-size: 14px; }
  .toc-d > summary.toc-title, .side-cta { display: none; }
}
.sec { padding: 24px 0 4px; max-width: 760px; }
.sec h2 { font-size: clamp(25px, 3vw, 31px); }
.mini h3, .sec h3 { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 0 0 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two p { margin: 0; }
.mini { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.rev-row { display: flex; gap: 24px; align-items: flex-start; }
.face.flip { transform: rotate(180deg); width: 64px; height: 96px; flex: 0 0 auto; margin-top: 18px; border-radius: 4px; box-shadow: 0 -8px 16px -6px rgba(49, 39, 36, .4); }
@media (max-width: 480px) { .rev-row .face.flip { display: none; } }
.yn { display: flex; gap: 16px; align-items: baseline; }
.yn-badge { font: 700 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 9px 14px; border-radius: 999px; flex: 0 0 auto; }
.yn-yes { background: var(--sage-soft); color: #3f6b3c; } .yn-no { background: var(--rose-soft); color: #87454f; } .yn-maybe { background: var(--lavender-soft); color: #74462f; }
.advice { font: 500 20px/1.5 var(--serif); color: var(--ink); border-left: 4px solid var(--gold); padding-left: 18px; margin: 22px 0 0; }
.advice-label { display: block; font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 4px; }
.positions { display: grid; gap: 10px; margin: 0; }
.positions div { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.positions dt { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.positions dd { margin: 4px 0 0; }
.symbols, .questions { padding-left: 22px; }
.symbols li, .questions li { margin: 9px 0; }
.pairs, .spread-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pairs a, .spread-links a { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-soft); }
.pairs a { align-items: center; }
.spread-links a { flex-direction: column; gap: 2px; }
.pairs a:hover, .spread-links a:hover { border-color: #cdb99c; box-shadow: var(--shadow); color: var(--ink-soft); }
.pairs a > span { display: flex; flex-direction: column; gap: 2px; }
.pairs strong, .spread-links strong { color: var(--ink); }
.pairs .face { width: 32px; height: 48px; border-radius: 3px; flex: 0 0 auto; }
.luna-note { display: flex; gap: 18px; align-items: flex-start; margin: 30px 0 6px; max-width: 760px; padding: 20px 22px; background: var(--gold-soft); border-radius: var(--radius); }
.luna-note img { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--surface); flex: 0 0 auto; }
.luna-note p { margin: 4px 0; }
.note-title { font: 600 12px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #765519; }
.draft-note { font-style: italic; }
.disclaim { max-width: 760px; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0; }
.pager a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); font-weight: 600; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 48%; }
.pager a:hover { border-color: #cdb99c; color: var(--ink); }
.pager a[rel=next] { text-align: right; margin-left: auto; }
.pager small { display: block; font: 500 12px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.pager img { width: 32px; height: 48px; flex: 0 0 auto; border-radius: 3px; }
.related { max-width: none; }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 17px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 24px/1 var(--sans); color: var(--gold); flex: 0 0 auto; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--ink-soft); }

.final { background: var(--btn); color: #f1e7d8; border-radius: 24px; padding: 48px 28px; }
.final h2 { color: #fff; }
.band > .wrap.final > p, .final .join-msg { color: #e0d8cf; }
.final .btn { background: var(--gold-btn); }
.final .btn:hover { background: var(--gold-btn-hover); }
.final .join input { border-color: transparent; }
.final .join-msg a { color: #f0cf95; }
.final .join-msg.ok { color: #c5e5bd; }

/* spreads */
/* A spread is shown on a reading table: a soft cloth, its own color for each spread, lit by a candle in the lower corner, clear of the cards */
.diagram { --cloth: #efe0c4; --edge: #d9c19a; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--weave), var(--cloth);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .14), inset 0 0 0 7px var(--cloth), inset 0 0 0 8px var(--edge); }
.diagram::before { content: ''; position: absolute; inset: 14px; border: 1.5px dashed var(--edge); border-radius: 8px; pointer-events: none; opacity: .9; }
.diagram::after { content: ''; position: absolute; right: 5%; bottom: 9%; width: 10px; height: 22px; border-radius: 3px 3px 2px 2px; background: #fbf3e3; box-shadow: inset -3px 0 0 #e6d3b0, 0 -9px 0 -3px #e9a548; }
.diagram.small::after { width: 8px; height: 16px; }
.cloth-daily { --cloth: #f1dcae; --edge: #d8b475; }
.cloth-past-present-future { --cloth: #dfe3c6; --edge: #b8c093; }
.cloth-love { --cloth: #efd0c5; --edge: #d49f8f; }
.cloth-crossroads { --cloth: #d8e3e1; --edge: #a8c0bc; }
.cloth-deep-reflection { --cloth: #eed6c0; --edge: #d6ae8c; }
.diagram .slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.diagram .slot img { width: 34px; height: 51px; display: block; border-radius: 3px; filter: drop-shadow(0 4px 6px rgba(90, 50, 20, .28)); }
.diagram .slot b { position: absolute; top: -8px; right: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sans); background: var(--ink); color: #fff8ec; }
.diagram .slot em { font: italic 500 12px/1.2 var(--serif); color: #4a3a2c; margin-top: 6px; white-space: nowrap; }
.diagram.big { width: min(100%, 460px); justify-self: end; margin-bottom: 4px; }
.diagram.big .slot img { width: 56px; height: 84px; }
.diagram.big .slot em { font-size: 14px; }
.diagram.small.two-rows .slot em { display: none; }
.spread-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
@media (max-width: 860px) { .spread-head { grid-template-columns: 1fr; } .diagram.big { justify-self: stretch; width: 100%; } }
.spread-grid { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.spread-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .spread-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .spread-grid { grid-template-columns: 1fr; } }
.spread-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink-soft); transition: transform .2s, box-shadow .2s; }
.spread-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink-soft); }
.spread-card strong { font: 600 21px/1.25 var(--serif); color: var(--ink); padding: 0 6px; }
.spread-card .small { padding: 0 6px; }
.spread-meta { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); padding: 10px 6px 0; }
.pos-list { padding: 0; margin: 0; list-style: none; counter-reset: p; display: grid; gap: 10px; }
.pos-list li { counter-increment: p; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pos-list li::before { content: counter(p); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; font: 600 14px var(--sans); }
.pos-list span { color: var(--ink-soft); }
.steps-plain li { margin: 8px 0; }

/* free reading */
.reader { margin: 28px 0; display: grid; gap: 26px; }
.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick legend, .legend { font: 600 21px/1.3 var(--serif); padding: 0; margin-bottom: 12px; display: block; }
.pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 960px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pick-grid { grid-template-columns: 1fr; } }
.pick-card { position: relative; cursor: pointer; }
.pick-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.pick-in { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); }
.pick-card input:checked + .pick-in { border-color: var(--lavender); box-shadow: 0 0 0 3px #93401f33; background: #f6f3f0; }
.pick-card input:focus-visible + .pick-in { outline: 3px solid var(--lavender); outline-offset: 2px; }
.ask input { width: 100%; max-width: 640px; min-height: 52px; padding: 0 18px; font: 400 17px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
.ask input:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px #93401f30; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.reader > .btn { justify-self: start; }
@media (max-width: 480px) { .reader > .btn { justify-self: stretch; } }
.result { padding: 28px 0 8px; border-top: 1px solid var(--line); outline: none; }
.result-head h2 { margin-bottom: 4px; }
.drawn { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.drawn.n1 { grid-template-columns: minmax(0, 460px); }
.drawn-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.drawn-card p { margin: 6px 0; }
.drawn-card h3 { margin: 12px 0 2px; }
.drawn-card h3 a { color: var(--ink); text-decoration: none; }
.pos { font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pos .num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--btn); color: #fff; font-size: 13px; }
.drawn-face { display: inline-block; margin-top: 10px; }
.drawn-face img { width: 128px; height: 192px; display: block; border-radius: 8px; box-shadow: 0 14px 24px -10px rgba(49, 39, 36, .5); image-rendering: pixelated; }
.drawn-face.rev img { transform: rotate(180deg); }
.kw { color: var(--gold) !important; font-weight: 600; }
.dealt .drawn-card { animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .18s); }
@keyframes deal { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.advice-box { padding: 20px 24px; background: var(--gold-soft); border-radius: var(--radius); max-width: 760px; }
.advice-box .advice { border: 0; padding: 0; margin: 4px 0; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.app-note { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: var(--lavender-soft); border-radius: var(--radius); max-width: 760px; }
.app-note img { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.app-note p { margin: 0; }

/* blog */
.posts { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post a { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink-soft); transition: transform .2s, box-shadow .2s; }
.post a:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink-soft); }
.post img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.post-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.post-body .tag { align-self: flex-start; }
.post-body strong { font: 600 21px/1.25 var(--serif); color: var(--ink); }
.post-meta { margin-top: auto; }
.post-big { grid-column: 1 / -1; }
.post-big a { display: grid; grid-template-columns: 1.2fr 1fr; }
.post-big img { height: 100%; }
.post-big .post-body { justify-content: center; padding: 28px 32px; }
.post-big strong { font-size: 30px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr 1fr; } .post-big a { grid-template-columns: 1fr; } }
@media (max-width: 580px) { .posts { grid-template-columns: 1fr; } .post-big strong { font-size: 24px; } }
.cats { padding: 24px 0 56px; }
.cat-grid { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-grid a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-soft); }
.cat-grid a:hover { border-color: #cdb99c; color: var(--ink-soft); }
.cat-grid strong { font: 600 19px/1.3 var(--serif); color: var(--ink); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }
.empty { padding: 32px 0 64px; }
.article .page-head .tag { margin-top: 4px; }
.byline { margin: 0; }
.byline a { color: var(--ink-soft); }
.featured { display: block; width: 100%; height: auto; border-radius: 18px; margin: 28px 0 8px; }
.art-toc { padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 20px 0; }
.art-toc .toc-title { margin-left: 0; }
.art-toc ol { margin: 0; padding-left: 20px; }
.art-toc li { margin: 4px 0; }
.prose-body { font-size: 18px; line-height: 1.75; }
.prose-body h2 { margin: 40px 0 10px; font-size: clamp(25px, 3vw, 31px); }
.prose-body h3 { margin: 26px 0 6px; font-size: 21px; }
.prose-body li { margin: 6px 0; }
.in-article { margin: 36px 0 18px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.in-article .toc-title { margin-left: 0; }
.in-article ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.in-article a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.in-article .face { width: 32px; height: 48px; border-radius: 3px; }
.author { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--lavender-soft); border-radius: var(--radius); margin: 18px 0; }
.author img { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; }
.author p { margin: 2px 0; }

/* plain pages (About, Safety, Privacy) */
.prose { padding-top: 28px; padding-bottom: 64px; }
.prose h2 { margin-top: 36px; font-size: 28px; }
.prose .sub { color: var(--ink-soft); }
.prose .help { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.prose li { margin: 7px 0; }
.lost { padding: 72px var(--gutter); }
.lost img { width: 96px; height: 144px; border-radius: 6px; }
.lost .btn { margin: 4px; }

/* footer */
.foot { background: #312723; color: #d6cec6; padding: 52px 0 22px; }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot .small { color: #c0b7ae; }
.foot-name { font: 600 22px/1 var(--serif); color: #fff; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; }
.foot-name img { width: 21px; height: 21px; }
.foot nav { display: flex; flex-direction: column; gap: 9px; }
.foot-h { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #e3c98f; margin: 0 0 4px; }
.foot nav a { color: #f1ebe4; text-decoration: none; font-size: 15px; }
.foot nav a:hover { color: #f0cf95; text-decoration: underline; }
.copy { margin-top: 32px; padding-top: 18px; border-top: 1px solid #ffffff1a; }
@media (max-width: 860px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-in { grid-template-columns: 1fr; } }
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.facts div:last-child, .facts div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.suggest { min-height: 38px; }

/* "What Waite wrote in 1910": quotations from the public-domain Pictorial Key to the Tarot */
.waite .wq { margin: 14px 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lavender); border-radius: 10px; }
.waite .wq figcaption { font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 4px; }
.waite blockquote { margin: 0; }
.waite blockquote p { margin: 0; font: 400 18px/1.6 var(--serif); font-style: italic; color: var(--ink); }
.waite .source { margin-top: 10px; }

/* The Fool's Journey box on Major Arcana pages */
.jbox { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; background: linear-gradient(135deg, var(--lavender-soft), #efe6dd); border-radius: var(--radius); }
.jbox > img { width: 52px; height: 56px; image-rendering: pixelated; flex: 0 0 auto; margin-top: 4px; }
.jbox p { margin: 6px 0; }
.story { margin: 12px 0; padding: 14px 16px; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); }
.story .line { margin: 6px 0; }
.story .tell { font: italic 400 17px/1.6 var(--serif); color: var(--ink); }
.story .nox b { font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #74462f; margin-right: 6px; }
@media (max-width: 480px) { .jbox > img { display: none; } }

/* "Was this page helpful?" */
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 28px 0 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 760px; }
.helpful-q { margin: 0; font-weight: 600; }
.helpful-btns { display: flex; gap: 8px; }
.helpful-msg { margin: 0; }

/* small tools: yes or no, card of the day, birth cards, zodiac (tools/site/tools.mjs) */
.tool { margin-top: 20px; }
.yn-result { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; max-width: 820px; margin: 18px 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.yn-result .drawn-face { margin: 0; }
.yn-result h2, .yn-result h3 { margin: 4px 0; }
.yn-result h2 a, .yn-result h3 a { color: var(--ink); text-decoration: none; }
.dealt .yn-result { animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (max-width: 560px) { .yn-result { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.yn-big { margin: 0 0 6px; }
.yn-big .yn-badge { font-size: 20px; padding: 12px 22px; }
.yn-h { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.card-list-yn li a { align-items: flex-start; }
.card-list-yn .small { display: block; margin-top: 2px; }
.daily-card { border-top: 0; padding-top: 8px; min-height: 340px; }
.daily-card .yn-result { margin-top: 0; }
.day-q { padding: 12px 16px; background: var(--lavender-soft); border-radius: 12px; }
.date-row { display: flex; flex-wrap: wrap; gap: 14px; }
.date-row label { display: grid; gap: 6px; font-weight: 600; }
.date-row input, .date-row select { min-height: 52px; padding: 0 14px; font: 400 17px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
.date-row input { width: 110px; }
.date-row input:focus, .date-row select:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px #93401f30; }
.tool-msg:empty { display: none; }
.tool-msg { color: #87454f; margin: -10px 0 0; }
.sum { font-variant-numeric: tabular-nums; }
.example { padding: 14px 18px; background: var(--gold-soft); border-radius: 12px; }
.family { margin-top: 22px; }
.family h3 { margin-bottom: 8px; }
.sign-grid { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sign { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; height: 100%; }
.sign:hover { border-color: var(--lavender); }
.sign > span { display: grid; gap: 2px; }
.sign strong { font: 600 19px/1.2 var(--serif); }
.sign-main .rev-row { align-items: flex-start; }
.card-list-yn { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
@media (max-width: 560px) { .sign-main .rev-row { flex-direction: column; align-items: center; } }
.tools-row { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tools-row a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.tools-row a:hover { border-color: var(--lavender); }
.tools-row strong { font: 600 18px/1.25 var(--serif); }
.tools-h { margin: 32px 0 0; font-size: 20px; }

/* ---------------------------------------------------------------- the magazine (tools/site/blog.mjs) */
.mag-head { padding: 4px 0 26px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg) 0%, #f0eae3 140%); }
.mag-head h1 { font-size: clamp(40px, 6vw, 66px); font-weight: 500; letter-spacing: -.02em; }
.mag-topics { margin-top: 22px; }
.post-cat { font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); text-decoration: none; }
a.post-cat:hover { color: var(--gold-btn-hover); }
.tag-draft { background: var(--rose-soft); color: #87454f; padding: 3px 7px; margin-right: 4px; }
.mag-featured { margin: 32px 0 8px; }
.feat { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink-soft); text-decoration: none; }
.feat:hover { box-shadow: var(--shadow); color: var(--ink-soft); }
.feat img { width: 100%; height: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.feat-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 36px; }
.feat-body strong { font: 500 clamp(28px, 3.2vw, 38px)/1.12 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.feat-body > span:nth-child(3) { font-size: 17px; }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat-body { padding: 22px 22px 26px; } }
.mag-sec { margin: 44px 0 0; }
.mag-note { max-width: 46em; color: var(--ink-soft); margin-top: -4px; }
.mag-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 8px; align-items: start; }
@media (max-width: 860px) { .mag-split { grid-template-columns: 1fr; gap: 8px; } }
.mag-list { list-style: none; padding: 0; margin: 0; counter-reset: m; }
.mag-list li { counter-increment: m; border-top: 1px solid var(--line); }
.mag-list li:last-child { border-bottom: 1px solid var(--line); }
.mag-list a { display: grid; grid-template-columns: 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 0; color: var(--ink-soft); text-decoration: none; }

.mag-list strong { font: 600 21px/1.3 var(--serif); color: var(--ink); }
.mag-list a:hover strong { color: var(--lavender); }
.mag-side { margin-top: 44px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.mag-side h2 { font-size: 24px; }
.res-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.res-list a { display: grid; gap: 2px; padding: 10px 0; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--line); }
.res-list li:last-child a { border-bottom: 0; }
.res-list strong { color: var(--ink); }
.res-list a:hover strong { color: var(--lavender); }
.mag-cta { margin-bottom: 64px; }

/* article page */
.draft-banner { background: var(--rose-soft); color: #6d3640; padding: 12px 0; font-size: 15px; border-bottom: 1px solid #e3c4c4; }
.art-head { padding: 4px 0 26px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.tone-lavender .art-head { background: linear-gradient(180deg, var(--bg) 0%, #f0e7de 130%); }
.tone-sage .art-head { background: linear-gradient(180deg, var(--bg) 0%, #dfe8d8 130%); }
.tone-rose .art-head { background: linear-gradient(180deg, var(--bg) 0%, #f1dcdc 130%); }
.tone-night .art-head { background: linear-gradient(180deg, #efeae4 0%, #e7dbcf 130%); }
.art-head h1 { font-weight: 500; font-size: clamp(34px, 5vw, 54px); margin-top: 8px; }
.art-head-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; max-width: 1060px; }
.art-head-card { display: grid; justify-items: center; gap: 8px; text-decoration: none; color: var(--ink-soft); padding-bottom: 6px; }
.art-head-card .face { width: 176px; height: 264px; border-radius: 10px; box-shadow: 0 24px 40px -18px rgba(49, 39, 36, .55); }
@media (max-width: 760px) { .art-head-in { grid-template-columns: 1fr; gap: 18px; } .art-head-card { justify-items: start; } .art-head-card .face { width: 128px; height: 192px; } }
.hero-card .prose-body { margin-top: 30px; }
.prose-body > p:first-child { font-size: 20px; line-height: 1.7; color: var(--ink); }
.prose-body table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose-body th, .prose-body td { text-align: start; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose-body thead th { font: 600 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); background: var(--bg-alt); }
.prose-body tbody tr:last-child > * { border-bottom: 0; }
.prose-body tbody th { font-weight: 600; color: var(--ink); }
.pullquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid #ddc7b1; font: 500 clamp(23px, 2.6vw, 28px)/1.35 var(--serif); color: #67483d; }
.pullquote p { margin: 0; }
.quote { margin: 28px 0; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.quote blockquote { margin: 0; font: italic 400 19px/1.6 var(--serif); color: var(--ink); }
.quote blockquote p { margin: 0; }
.quote figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.quote figcaption::before { content: '\2014\00a0'; }
.box { margin: 28px 0; padding: 20px 24px 8px; border-radius: var(--radius); font-size: 17px; line-height: 1.65; }
.box-example { background: var(--gold-soft); }
.box-exercise { background: var(--sage-soft); }
.box-note { background: var(--surface); border: 1px solid var(--line); }
.box-title { font: 600 20px/1.3 var(--serif); margin: 0 0 8px; color: var(--ink); }
.box-kicker { display: block; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 4px; }
.box h3 { font-size: 18px; margin: 14px 0 4px; }
.cards-fig { margin: 30px 0; }
.cards-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.cards-row a { display: grid; justify-items: center; gap: 8px; font: 600 14px/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.cards-row .face { border-radius: 6px; box-shadow: 0 14px 24px -12px rgba(49, 39, 36, .5); }
.cards-fig.n1 .face { width: 128px; height: 192px; }
.cards-fig figcaption { text-align: center; font-size: 15px; color: var(--ink-soft); margin-top: 12px; }
.card-mag { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.card-mag a { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-soft); }
.card-mag a:hover { border-color: var(--lavender); }
.card-mag strong { font: 600 18px/1.3 var(--serif); color: var(--ink); }

.mag-sec .band-head { margin-bottom: 8px; }
.mag-note { margin-top: 0; }
@media (min-width: 1100px) { .cats .cat-grid { grid-template-columns: repeat(5, 1fr); } }

.saved-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.saved-list li { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.saved-head { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.saved-cards { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; }
.saved-cards a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.saved-cards img { width: 24px; height: 36px; border-radius: 2px; image-rendering: pixelated; }
.saved-cards img.rev { transform: rotate(180deg); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--lavender); text-decoration: underline; cursor: pointer; }
.art-toc .toc-title, .in-article .toc-title, .advice-box .toc-title, .hard-small .toc-title, .letter-card .toc-title { display: block; }
.hard-small .toc-title { margin: 0; }

.art-note { margin: 18px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); color: var(--ink-soft); }

.ex-cards { list-style: none; padding: 0; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 12px 18px; }
.ex-cards a { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.ex-cards .face { width: 48px; height: 72px; border-radius: 4px; }
.ex-cards small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- Hebrew (tools/site/he.mjs): right to left */
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-hebrew.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; src: url('/fonts/frank-ruhl-hebrew.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
html[lang="he"] { --serif: 'Frank Ruhl Libre', 'Fraunces', Georgia, serif; --sans: 'Heebo', 'Inter', system-ui, Arial, sans-serif; }
html[lang="he"] body { font-family: var(--sans); }
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3 { letter-spacing: 0; }
html[lang="he"] .kicker, html[lang="he"] .post-cat, html[lang="he"] .toc-title, html[lang="he"] .foot-h, html[lang="he"] .box-kicker { letter-spacing: 0; text-transform: none; font-size: 14px; }
[dir="rtl"] .toc-title { margin: 0 10px 6px 0; }
[dir="rtl"] .art-toc ol { padding: 0 20px 0 0; }
[dir="rtl"] .pullquote, [dir="rtl"] .art-note { border-left: 0; border-right: 3px solid #ddc7b1; padding: 4px 26px 4px 0; }
[dir="rtl"] .drawn-face.rev img, [dir="rtl"] .face.flip { transform: rotate(180deg); }
.lang-link { font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.lang-link:hover { background: var(--surface); }
[lang="en"].lang-link { font-family: 'Inter', system-ui, sans-serif; }
.he-index { columns: 2 320px; column-gap: 28px; }
.he-card { break-inside: avoid; display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.he-card .face { width: 56px; height: 84px; border-radius: 4px; }
.he-card h3 { margin: 0 0 4px; font-size: 21px; }
.he-card p { margin: 4px 0; }
.he-card .rev-line { color: var(--ink-soft); font-size: 15px; }
.he-card:target { background: var(--gold-soft); border-radius: 12px; padding-inline: 10px; }
[dir="rtl"] .tag-rev { margin: 0 6px 0 0; }
[dir="rtl"] .advice { border-left: 0; border-right: 4px solid var(--gold); padding: 0 18px 0 0; }
[dir="rtl"] .symbols, [dir="rtl"] .questions { padding: 0 22px 0 0; }
[dir="rtl"] .pager a[rel=next] { text-align: left; margin: 0 auto 0 0; }
[dir="rtl"] .art-toc .toc-title, [dir="rtl"] .in-article .toc-title { margin-right: 0; }
@media (max-width: 860px) { [dir="rtl"] .top-cta { margin: 0 auto 0 0; } .lang-link { margin-inline-start: auto; } .lang-link + .top-cta { margin: 0; } }
/* in right-to-left pages, things pushed off the left edge become scrollable: push them off the right edge instead */
[dir="rtl"] .skip { left: auto; right: -999px; }
[dir="rtl"] .skip:focus { right: 8px; }
[dir="rtl"] .hp { left: auto; right: -5000px; }

.contact-form { display: grid; gap: 18px; margin: 28px 0 18px; max-width: 640px; }
.field { display: grid; gap: 6px; font-weight: 600; }
.field select, .field input, .field textarea { font: 400 17px/1.5 var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.field select, .field input { min-height: 50px; }
.field textarea { resize: vertical; min-height: 160px; }
.field select:focus, .field input:focus, .field textarea:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px #93401f30; }
.contact-form > .btn { justify-self: start; }
.contact-msg.ok { color: #3f6b3c; } .contact-msg.err { color: #87454f; }

/* the home page letter: a quiet, centered pause between the hero and the tools */
.letter-band { padding: 64px 0; background: linear-gradient(180deg, var(--bg) 0%, #eee9e3 100%); }
.letter { text-align: center; }
.letter h2 { font-weight: 500; font-size: clamp(30px, 4vw, 42px); margin-bottom: 22px; }
.letter p:not(.kicker) { font: 400 clamp(19px, 2.2vw, 22px)/1.7 var(--serif); color: var(--ink); max-width: 34em; margin: 0 auto 18px; }
.letter p.letter-links { font: 500 16px/1.6 var(--sans); margin-top: 26px; }

/* a card for a hard day */
.hard { margin: 28px 0 8px; padding: 30px 26px; background: linear-gradient(180deg, #f7f3f0 0%, var(--surface) 100%); border: 1px solid var(--line); border-radius: 22px; text-align: center; outline: none; }
.hard-start p { font: 400 19px/1.65 var(--serif); max-width: 32em; margin: 0 auto 18px; }
.hard-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.breath { width: 180px; height: 180px; margin: 10px auto 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #f3e3c3 0%, #f0e3d7 60%, rgba(240, 227, 215, 0) 72%); }
.breath span { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8e8, #e9cf9a 70%); box-shadow: 0 0 40px 10px #f1dfbd; }
.breathing .breath span { animation: breathe 10s ease-in-out infinite; }
@keyframes breathe { 0% { transform: scale(.7); } 40% { transform: scale(1.55); } 100% { transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .breathing .breath span { animation: none; } }
.breath-word { font: 500 26px/1.3 var(--serif); margin: 0 0 4px; color: #67483d; }
.hard-card { outline: none; }
.hard-card h2 { margin: 14px 0 10px; }
.hard-card h2 a { color: var(--ink); text-decoration: none; }
.dealt.hard-card { animation: deal .6s cubic-bezier(.2, .8, .2, 1) both; }
.hard-note { font: 400 clamp(20px, 2.4vw, 24px)/1.6 var(--serif); color: var(--ink); max-width: 30em; margin: 0 auto 20px; }
.hard-small { max-width: 28em; margin: 18px auto; padding: 16px 20px; background: var(--sage-soft); border-radius: var(--radius); text-align: start; }
.hard-small ul { margin: 6px 0 0; padding-inline-start: 20px; }
.hard-help { margin: 22px 0; padding: 20px 24px; background: var(--rose-soft); border-radius: var(--radius); }
.hard-help h2 { font-size: 22px; }
.help-lines { margin: 8px 0; padding-inline-start: 20px; }
.hard-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.hard-list li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hard-list .face { width: 48px; height: 72px; border-radius: 4px; }
.hard-list h3 { margin: 0 0 4px; font-size: 19px; }
.hard-list h3 a { color: var(--ink); text-decoration: none; }
.hard-list p { margin: 0; }
.hard-aside { margin: 26px 0 8px; padding: 18px 22px; background: linear-gradient(180deg, #f7f3f0, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); max-width: 760px; } .hard-aside p { margin: 4px 0; } .hard-aside .note-title { font: 600 18px/1.3 var(--serif); }
/* the pause before a reading: three card backs shuffling */
.shuffling { text-align: center; padding: 30px 0 10px; }
.shuffling p { font: 400 21px/1.5 var(--serif); color: #67483d; margin: 18px 0 0; }
.shuffle-deck { position: relative; width: 64px; height: 96px; margin: 0 auto; }
.shuffle-deck img { position: absolute; inset: 0; width: 64px; height: 96px; border-radius: 6px; image-rendering: pixelated; box-shadow: 0 10px 20px -10px rgba(49, 39, 36, .5); animation: shuffle 1.3s ease-in-out infinite; }
.shuffle-deck img:nth-child(2) { animation-delay: .43s; }
.shuffle-deck img:nth-child(3) { animation-delay: .86s; }
@keyframes shuffle { 0%, 100% { transform: translateX(0) rotate(0); z-index: 1; } 25% { transform: translateX(-46px) rotate(-8deg); } 50% { transform: translateX(0) rotate(0); z-index: 3; } 75% { transform: translateX(46px) rotate(8deg); } }

.mag-row { padding: 30px 28px 6px; margin-top: 44px; background: linear-gradient(180deg, #f1ece6, var(--bg)); border-radius: 22px; }
@media (max-width: 580px) { .mag-row { padding: 22px 16px 4px; } }

.closing-line { font: italic 400 19px/1.6 var(--serif); color: #67483d; max-width: 34em; margin: 26px 0 6px; }
.late-note { font: italic 400 18px/1.5 var(--serif); color: #74462f; margin: -4px 0 12px; }
.evening-box { max-width: 820px; margin: 18px 0; padding: 18px 22px; background: linear-gradient(180deg, #f1eae2, var(--surface)); border-radius: var(--radius); } .evening-box p { margin: 4px 0; font: 400 19px/1.6 var(--serif); } .evening-box .toc-title { font: 600 12px/1.4 var(--sans); }

/* a letter to yourself */
.letter-tool { margin: 28px 0 8px; padding: 28px 26px; background: linear-gradient(180deg, #faf3e6, var(--surface)); border: 1px solid var(--line); border-radius: 22px; }
.letter-write { display: grid; gap: 18px; }
/* the example letter on the letter pages: a sheet of warm paper, in the handwriting-like serif */
.letter-example { margin: 14px 0 16px; padding: 20px 24px; background: #fffaf0; border: 1px solid var(--line); border-radius: 14px; font: 400 18px/1.7 var(--serif); color: var(--ink); }
.letter-example p { margin: 0 0 8px; }
.letter-example p:last-child { margin-bottom: 0; }
.letter-write textarea { font: 400 19px/1.7 var(--serif); min-height: 240px; background: #fffaf0; }
.letter-when { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.letter-when legend { font: 600 16px/1.3 var(--sans); margin-bottom: 8px; }
.letter-when label { display: inline-flex; gap: 8px; align-items: center; font-size: 17px; }
.letter-write > .btn { justify-self: start; }
.letter-sealed, .letter-open { text-align: center; outline: none; }
.envelope { width: 96px; height: 96px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #f3e3c3, #f1e4d8 70%); }
.envelope img { width: 48px; height: 72px; border-radius: 4px; image-rendering: pixelated; }
.letter-paper { text-align: start; max-width: 34em; margin: 14px auto; padding: 26px 28px; background: #fffaf0; border: 1px solid #e7d7bb; border-radius: 6px; box-shadow: 0 14px 30px -22px rgba(49, 39, 36, .5); font: 400 19px/1.75 var(--serif); }
.letter-paper p { margin: 0 0 12px; }
.letter-dear { font-style: italic; }
.letter-card { display: flex; gap: 16px; align-items: center; max-width: 34em; margin: 18px auto; text-align: start; }
.letter-card .drawn-face { margin: 0; flex: 0 0 auto; }
.letter-card h3 { margin: 2px 0; }
.letter-ready { margin: 0; padding: 12px 16px; text-align: center; background: var(--gold-soft); font: 500 16px/1.5 var(--sans); border-bottom: 1px solid var(--line); }
.he-hard { margin-top: 8px !important; padding: 10px 12px; background: #f6f2ed; border-radius: 10px; font-size: 15px; }
.mini-day-wrap { margin: 30px auto 0; max-width: 560px; }
.mini-day { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink-soft); text-align: start; }
.mini-day:hover { border-color: var(--lavender); box-shadow: var(--shadow); }
.mini-day img { width: 64px; height: 96px; border-radius: 6px; image-rendering: pixelated; box-shadow: 0 10px 20px -12px rgba(49, 39, 36, .5); }
.mini-day > span { display: grid; gap: 4px; }
.mini-day .kicker { margin: 0; }
.mini-day strong { font: 600 20px/1.25 var(--serif); color: var(--ink); }
.mini-day .small { font: 400 15px/1.5 var(--sans); }

/* ---------------------------------------------------------------- phones: swipe rows instead of tall stacks (UX pass) */
@media (max-width: 640px) {
  .paths, .features, .tools-row, .posts.posts-3, .mag-row .posts {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; gap: 14px; scrollbar-width: none;
  }
  .paths::-webkit-scrollbar, .features::-webkit-scrollbar, .tools-row::-webkit-scrollbar, .posts.posts-3::-webkit-scrollbar, .mag-row .posts::-webkit-scrollbar { display: none; }
  .paths > li, .features > li, .tools-row > li, .posts.posts-3 > li, .mag-row .posts > li { scroll-snap-align: start; }
  .tools-row { grid-auto-columns: 62%; }
  .mag-row { margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding-inline: var(--gutter); }
  .swipe-hint { display: block; }
}
.swipe-hint { font: 500 13px/1 var(--sans); color: var(--ink-soft); margin: 6px 0 0; }
.swipe-hint::after { content: ' \2192'; }
[dir="rtl"] .swipe-hint::after { content: ' \2190'; }

/* phones: a compact footer, two columns of links */
@media (max-width: 640px) {
  .foot { padding: 36px 0 18px; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .foot-about { grid-column: 1 / -1; }
  .foot nav { gap: 7px; font-size: 15px; }
  .foot nav:last-child { grid-column: 1 / -1; display: flex; flex-flow: row wrap; gap: 6px 16px; }
  .foot nav:last-child .foot-h { width: 100%; }
}

/* sections arrive gently as you scroll (site.js adds .reveal / .in; nothing moves with reduced motion) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* pick a card: a fan of seven backs; the chosen one flips (3D), the others step back */
.fan-band { background: var(--bg); padding-bottom: 54px; }
.fan-lead { margin: 0 auto 26px; }
.fan { position: relative; height: 230px; max-width: 520px; margin: 0 auto; perspective: 900px; }
.fan-card { position: absolute; left: 50%; bottom: 0; width: 96px; height: 144px; margin-left: -48px; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 140%; transform: rotate(calc(var(--i) * 9deg)) translateY(calc(var(--i) * var(--i) * 2px));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s; border-radius: 8px; }
.fan-card:hover, .fan-card:focus-visible { transform: rotate(calc(var(--i) * 9deg)) translateY(-18px); outline: none; }
.fan-card:focus-visible .fan-inner { box-shadow: 0 0 0 3px var(--lavender); }
.fan-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); border-radius: 8px; box-shadow: 0 14px 24px -12px rgba(49, 39, 36, .55); }
.fan-inner img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; image-rendering: pixelated; backface-visibility: hidden; }
.fan-front { transform: rotateY(180deg); }
.fan.chosen .fan-card:not(.picked) { opacity: .25; transform: rotate(calc(var(--i) * 11deg)) translateY(20px) scale(.92); }
.fan-card.picked { transform: translateY(-34px) scale(1.18); z-index: 5; }
.fan-card.flipped .fan-inner { transform: rotateY(180deg); }
.fan-result { max-width: 34em; margin: 26px auto 0; min-height: 10px; }
.fan-result h3 { margin: 4px 0; font-size: 26px; }
.fan-result h3 a { color: var(--ink); text-decoration: none; }
.fan-links { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; }
@media (max-width: 520px) { .fan { height: 200px; } .fan-card { width: 76px; height: 114px; margin-left: -38px; } }
@media (prefers-reduced-motion: reduce) { .fan-card, .fan-inner { transition: none; } }
.luna-letter { margin: 20px 0 18px; padding: 22px 24px; background: #fffaf0; border: 1px solid #e7d7bb; border-radius: 8px; box-shadow: 0 14px 30px -24px rgba(49, 39, 36, .5); }
.luna-letter blockquote { margin: 0; font: italic 400 19px/1.65 var(--serif); color: var(--ink); }
.luna-letter blockquote p { margin: 0 0 10px; }
.luna-letter figcaption { margin-top: 8px; color: var(--ink-soft); }
.fan-result { margin-top: 48px; } .fan.chosen + .fan-result { animation: deal .6s .25s cubic-bezier(.2, .8, .2, 1) both; }
/* the fan spreads wider, so each card is easy to see and tap */
.fan-card { transform: translateX(calc(var(--i) * 26px)) rotate(calc(var(--i) * 8deg)) translateY(calc(var(--i) * var(--i) * 2px)); }
.fan-card:hover, .fan-card:focus-visible { transform: translateX(calc(var(--i) * 26px)) rotate(calc(var(--i) * 8deg)) translateY(-18px); }
.fan.chosen .fan-card:not(.picked) { transform: translateX(calc(var(--i) * 30px)) rotate(calc(var(--i) * 10deg)) translateY(20px) scale(.92); }
.fan-card.picked { transform: translateY(-34px) scale(1.18); }
@media (max-width: 520px) {
  .fan-card { transform: translateX(calc(var(--i) * 30px)) rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 2px)); }
  .fan-card:hover, .fan-card:focus-visible { transform: translateX(calc(var(--i) * 30px)) rotate(calc(var(--i) * 7deg)) translateY(-14px); }
  .fan.chosen .fan-card:not(.picked) { transform: translateX(calc(var(--i) * 32px)) rotate(calc(var(--i) * 8deg)) translateY(18px) scale(.9); }
}
@media (max-width: 640px) {
  .spread-grid.spread-grid-3 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; gap: 14px; scrollbar-width: none; }
  .spread-grid.spread-grid-3::-webkit-scrollbar { display: none; }
  .spread-grid.spread-grid-3 > li { scroll-snap-align: start; }
}
@media (max-width: 520px) { .fan { height: 170px; } .fan-lead { margin-bottom: 8px; } }

/* UX pass 2 (Codex review) */
.hero-trust { margin: -6px 0 14px; color: var(--ink-soft); }
@media (max-width: 860px) {
  .hero { padding: 22px 0 30px; }
  .hero-in { gap: 22px; }
  .hero-art .screen { max-width: 220px; margin: 0 auto; }
  .hero-art figcaption { display: none; }
}
@media (max-width: 640px) {
  .band { padding-top: 44px; padding-bottom: 44px; }
  .tiles .tile:nth-child(n+7) { display: none; } /* six featured cards on phones */
  .jump a, .chip, .toc a, .mainnav a, .mag-topics a { min-height: 44px; }
  .tile span { font-size: 14px; line-height: 1.4; }
  .swipe-hint { display: block; }
}
/* card pictures show a card back while they load, never an empty box */
.face { background: url('/img/card-back.svg') center / cover no-repeat; }
.swipe-hint { display: none; } @media (max-width: 640px) { .swipe-hint { display: block; } }
/* the four main paths stay visible on phones: a compact 2x2 grid, not a carousel */
@media (max-width: 640px) {
  .paths { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: 10px; }
  .path { padding: 14px; gap: 4px; }
  .path > span:not(.more):not(.icon-box) { display: none; }
  .path strong { font-size: 17px; margin-top: 4px; }
  .path strong, .path .more { overflow-wrap: anywhere; white-space: normal; }
  .path .icon-box { width: 44px; height: 44px; }
  .path .icon { width: 30px; height: auto; }
}

/* card pages: the section list is a fold-out on phones, always open on wide screens (site.js) */
.toc-d > summary { cursor: pointer; list-style: none; }
.toc-d > summary::-webkit-details-marker { display: none; }
@media (max-width: 1000px) {
  .toc-d { margin: 0 0 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .toc-d > summary.toc-title { display: flex !important; justify-content: space-between; margin: 0; font-size: 13px; }
  .toc-d > summary::after { content: '+'; font: 600 18px/1 var(--sans); color: var(--gold); }
  .toc-d[open] > summary::after { content: '\2212'; }
  .toc-d[open] .toc { margin-top: 12px; }
}
.shuffling { cursor: pointer; }
.welcome-back { margin: 0 0 12px; font: italic 400 17px/1.5 var(--serif); color: #74462f; }

/* inside the app: real screens in phone frames, one row you can swipe */
.screens-head { margin: 40px 0 0; }
.screens-head h3 { font-size: 26px; margin: 0 0 4px; }
.screens { list-style: none; padding: 6px 4px 18px; margin: 18px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.screen-item { scroll-snap-align: start; }
.screen-item figure { margin: 0; }
.phone { border-radius: 30px; padding: 8px; background: #241a17; box-shadow: 0 26px 40px -24px rgba(49, 39, 36, .65), inset 0 0 0 1px #48362f; }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1169; border-radius: 22px; background: #412920; image-rendering: auto; }
.screen-item figcaption { display: grid; gap: 2px; margin-top: 12px; }
.screen-item figcaption strong { font: 600 18px/1.3 var(--serif); color: var(--ink); }
@media (max-width: 640px) { .screens { grid-auto-columns: 70%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } }

.app-top { max-width: 760px; }
.app-top .lead { margin-bottom: 4px; }
.screens-note { margin: 2px 0 34px; color: var(--ink-soft); }
.app-how { margin: 4px 0 12px; color: var(--ink-soft); }
@media (max-width: 640px) { .screens { scroll-padding-inline: var(--gutter); } .app-intro .luna-face { width: 88px; height: 88px; } }

/* free reading: cards land face down; you turn each one over */
.turn-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 6px 0 0; }
.turn-card { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; border-radius: 8px; }
.turn-card:focus-visible { outline: 3px solid var(--lavender); outline-offset: 4px; }
.turn-inner { position: relative; display: block; width: 128px; height: 192px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.turn-inner img { position: absolute; inset: 0; width: 128px; height: 192px; border-radius: 8px; backface-visibility: hidden; image-rendering: pixelated; box-shadow: 0 14px 24px -10px rgba(49, 39, 36, .5); }
.turn-front { transform: rotateY(180deg); }
.turn-card.rev .turn-front { transform: rotateY(180deg) rotate(180deg); }
.turn-card:not(.turned):hover .turn-inner { transform: translateY(-6px); }
.turn-card.turned { cursor: default; }
.turn-card.turned .turn-inner { transform: rotateY(180deg); }
.drawn-text:not([hidden]) { animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .turn-inner { transition: none; } .drawn-text:not([hidden]) { animation: none; } }
.card-prompt { margin: 4px 0 18px; padding: 12px 16px; background: var(--lavender-soft); border-radius: 12px; font: italic 400 18px/1.5 var(--serif); color: #67483d; max-width: 36em; } .card-prompt span { display: block; font: 600 12px/1.4 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 2px; }

.yn-result .turn-card { margin: 0; }
.yn-closed { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.yn-wait { margin: 10px 0 0; color: var(--ink-soft); }
.yn-text:not([hidden]) { animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; }
/* reveal: content is always visible; sections only drift up a little as they arrive */
.reveal { opacity: 1; transform: translateY(16px); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { transform: none; }
@media (max-width: 860px) { .hero-art figcaption { display: block; font-size: 13px; margin-top: 10px; } }

/* what would feel welcome today */
.welcome-band { padding-top: 10px; }
.moods { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 6px; }
.mood[aria-pressed="true"] { background: var(--btn); color: #fff; border-color: var(--btn); }
.mood-card { margin: 18px auto 0; max-width: 32em; padding: 18px 22px; background: var(--sage-soft); border-radius: var(--radius); animation: deal .45s cubic-bezier(.2, .8, .2, 1) both; }
.mood-practice { font: 400 20px/1.6 var(--serif); color: var(--ink); margin: 0 0 8px; }
/* a candle to light */
.candle-wrap { margin: 26px 0 0 !important; }
.candle { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font: 500 16px/1 var(--sans); color: var(--ink); cursor: pointer; min-height: 48px; }
.candle:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
.candle-body { position: relative; width: 12px; height: 26px; background: linear-gradient(#fff8ea, #ead9bd); border-radius: 3px; margin-top: 10px; }
.flame { position: absolute; left: 50%; top: -14px; width: 10px; height: 14px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff4c4 0%, #f7b84b 55%, #e2761b 100%); opacity: 0; transform: scale(.3); transition: opacity .25s, transform .35s; }
.candle.lit .flame { opacity: 1; transform: none; animation: flicker 2.4s ease-in-out infinite; box-shadow: 0 0 18px 6px rgba(247, 184, 75, .45); }
.candle.lit { background: #fff6e2; border-color: #ecd3a0; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(.92, 1.06) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .candle.lit .flame { animation: none; } }
.candle-note { min-height: 1.4em; font-style: italic; color: #74462f !important; }
/* a moment with Luna */
.luna-moment { max-width: 620px; margin: 22px 0 36px; padding: 20px 22px; background: #f6ead6; color: var(--ink); border: 1px solid #e6d3b3; border-radius: 22px; }
.luna-moment .kicker { color: #8a5a2b; }
.lm-thread { display: grid; gap: 10px; }
.lm-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.lm-msg img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; image-rendering: pixelated; }
.lm-msg span { padding: 10px 14px; border-radius: 16px; background: #fffaf2; border: 1px solid #ead9bd; font: 400 17px/1.55 var(--serif); animation: deal .4s cubic-bezier(.2, .8, .2, 1) both; }
.lm-you { justify-content: flex-end; }
.lm-you span { background: #9c4a2b; border-color: #9c4a2b; color: #fff8ec; font-family: var(--sans); font-size: 16px; }
.lm-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.lm-choices .chip { background: #fffaf2; color: var(--ink); border-color: #d9c19a; }
.lm-label { margin: 12px 0 0; color: #6d5e52 !important; }
.lm-end { margin: 6px 0 0; }
.lm-end .btn { background: #9c4a2b; color: #fff8ec; }
.candle-body { margin-top: 16px; } .candle { padding-top: 12px; }

.card-prompt p { margin: 0; }
.card-prompt .linkish { margin-top: 8px; font-style: normal; }
.thought-box { margin-top: 10px; }
.thought-box textarea { width: 100%; min-height: 84px; padding: 10px 12px; font: 400 17px/1.55 var(--serif); color: var(--ink); background: #fffaf0; border: 1px solid #e7d9ca; border-radius: 10px; }
.thought-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 8px 0 0; font-style: normal; }
.thought-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-style: normal; }
.thought-list li { padding: 10px 12px; background: #fffaf0; border-radius: 10px; }
.thought-list p { margin: 2px 0; font: italic 400 17px/1.5 var(--serif); color: var(--ink); }

/* a pause in an essay: one question, a small star, room to breathe */
.pause { margin: 56px auto; max-width: 30em; text-align: center; }
.pause-star { display: block; font-size: 18px; color: #c7a75e; margin-bottom: 12px; }
.pause p { margin: 0; font: italic 400 clamp(20px, 2.4vw, 23px)/1.55 var(--serif); color: #67483d; }
.share-line { display: block; margin: -22px 0 30px 29px; } [dir="rtl"] .share-line { margin: -22px 29px 30px 0; }

.keep-note { max-width: 560px; margin: 10px 0 4px; }
.keep-note label { display: block; font: 600 15px/1.4 var(--sans); margin-bottom: 6px; }
.keep-note textarea { width: 100%; padding: 10px 12px; font: 400 17px/1.5 var(--serif); color: var(--ink); background: #fffaf0; border: 1px solid #e7d9ca; border-radius: 10px; }
.saved-note { margin: 4px 0 8px; font: italic 400 16px/1.5 var(--serif); color: var(--ink); }
.share-card { display: block; margin: 10px auto 0; text-align: center; }

/* ---------------------------------------------------------------- the study corner (learn.mjs / learn.js) */
.learn-head h1 { font-weight: 500; }
.course-progress { max-width: 460px; margin: 10px 0 18px; }
.cp-bar { height: 10px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.cp-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c7a75e, #e9cf9a); border-radius: 999px; transition: width .6s; }
.course-progress p { margin: 6px 0 0; }
.lessons { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 10px; counter-reset: none; }
.lesson-item a { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; }
.lesson-item a:hover { border-color: var(--lavender); box-shadow: var(--shadow); }
.lesson-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lavender-soft); color: #67483d; font: 600 18px/1 var(--serif); }
.lesson-item.done .lesson-n { background: #3f6b3c; color: #fff; }
.lesson-txt { display: grid; gap: 2px; }
.lesson-txt strong { font: 600 19px/1.3 var(--serif); color: var(--ink); }
.lesson-min { color: var(--gold) !important; font-weight: 600; }
.lesson-face { width: 40px; height: 60px; border-radius: 4px; }
@media (max-width: 520px) { .lesson-face { display: none; } .lesson-item a { grid-template-columns: 40px 1fr; } }
.lesson-dots { display: flex; gap: 6px; margin-top: 14px; }
.lesson-dots a { width: 26px; height: 8px; border-radius: 999px; background: var(--line); }
.lesson-dots a.done { background: #8fb08a; }
.lesson-dots a[aria-current] { background: var(--lavender); }
.lesson-end { margin: 30px 0 10px; }
.lesson-pager a { max-width: 48%; }
.quiz { margin: 44px 0 10px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.quiz-title { font-size: 24px; margin: 0 0 12px; }
.quiz-q { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.quiz-q legend { font: 600 18px/1.45 var(--serif); color: var(--ink); margin-bottom: 8px; }
.quiz-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 17px; line-height: 1.45; background: #fffdf8; min-height: 44px; }
.quiz-opt input { margin-top: 4px; accent-color: var(--lavender); }
.quiz-opt.the-answer { border-color: #8fb08a; background: var(--sage-soft); }
.quiz-opt.chose-wrong { border-color: #d6a3a9; background: var(--rose-soft); }
.quiz-why { margin: 8px 0 0; padding: 10px 12px; background: var(--lavender-soft); border-radius: 10px; font-size: 16px; }
.quiz-score { font-weight: 600; }
/* glossary */
.gloss { margin: 0; display: grid; gap: 4px; }
.gloss > div { padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.gloss > div:target { background: var(--gold-soft); border-radius: 10px; padding-inline: 10px; }
.gloss dt { font: 600 19px/1.3 var(--serif); color: var(--ink); }
.gloss dd { margin: 4px 0 0; color: var(--ink-soft); }
/* flashcards */
.flash { margin: 26px 0; padding: 22px; background: linear-gradient(180deg, #f6f2ed, var(--surface)); border: 1px solid var(--line); border-radius: 22px; text-align: center; }
.flash-sets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.flash-sets [aria-pressed="true"] { background: var(--btn); color: #fff; border-color: var(--btn); }
.flash-card { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; border-radius: 12px; }
.flash-card:focus-visible { outline: 3px solid var(--lavender); outline-offset: 4px; }
.flash-inner { position: relative; display: block; width: 180px; height: 270px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.flash-front, .flash-back { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; display: grid; place-items: center; }
.flash-front img { width: 180px; height: 270px; border-radius: 12px; image-rendering: pixelated; box-shadow: 0 16px 28px -14px rgba(49, 39, 36, .55); }
.flash-back { transform: rotateY(180deg); background: #fffaf0; border: 1px solid #e7d7bb; padding: 18px; align-content: center; gap: 8px; box-shadow: 0 16px 28px -14px rgba(49, 39, 36, .45); }
.flash-back strong { font: 600 22px/1.2 var(--serif); color: var(--ink); }
.flash-back .kw { font-size: 14px; }
.flash-line { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.flash-card.flipped .flash-inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .flash-inner { transition: none; } }
.flash-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 14px; }
.flash-hint { margin: 12px 0 0; }
.study-box { margin: 26px 0; padding: 16px 20px; background: var(--sage-soft); border-radius: var(--radius); } .study-box p { margin: 4px 0; } .learn-note { margin: 0 0 8px; }

/* the card picture and its small buttons (Look closer, Share this card) share one column */
.card-pic { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.card-pic .share-card { margin-top: 4px; }
/* the header button never breaks onto two lines; a longer menu (Hebrew) tightens a little on mid-size screens */
.top-cta { white-space: nowrap; flex: 0 0 auto; }
@media (min-width: 861px) and (max-width: 1180px) { .mainnav a { padding: 9px 8px; font-size: 14px; } }
@media (min-width: 861px) and (max-width: 1000px) {
  [dir="rtl"] .top-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; }
  [dir="rtl"] .mainnav { order: 3; width: 100%; margin: 8px 0 0; padding: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
  [dir="rtl"] .lang-link { margin-inline-start: auto; }
}

/* wide tables on phones: one small card per row, the first cell as its title, the others labelled */
@media (max-width: 560px) {
  .table-stack { border: 0; background: none; overflow: visible; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; width: auto; }
  .table-stack tr { margin: 0 0 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .prose-body .table-stack tbody th { padding: 0 0 6px; border: 0; font: 600 18px/1.35 var(--serif); }
  .prose-body .table-stack td { padding: 6px 0; border: 0; border-top: 1px dashed var(--line); }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: 2px; }
  [dir="rtl"] .table-stack td[data-label]::before { text-transform: none; letter-spacing: 0; font-size: 13px; }
}
/* readability: small text people actually need is a little larger and darker */
.join input::placeholder { color: #7d7069; }
.facts dt, .post-cat { font-size: 13px; }
.lesson-txt .small, .screen-item figcaption .small { font-size: 15.5px; line-height: 1.5; }
.textarea::placeholder, textarea::placeholder, input::placeholder { color: #7d7069; }

/* the course hub: quick practice links under the start button; study tools stay a visible grid on phones (not a swipe row) */
.study-quick { margin: -4px 0 0; }
@media (max-width: 640px) {
  .tools-row.study-tools { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; gap: 10px; }
}

.art-cap { order: 9; max-width: 220px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-align: center; }
@media (max-width: 760px) {
  .card-pic { flex-flow: row wrap; justify-content: center; align-items: center; gap: 6px 16px; }
  .card-pic .card-frame { flex: 0 0 auto; margin-inline: calc(50% - 85px); }
  .card-pic .closer-trigger { margin: 6px 0 0; }
  .card-pic .share-card { margin: 6px 0 0; }
  .card-pic .art-cap { flex: 0 0 100%; max-width: none; margin-top: 4px; }
}

.mirror-note { padding: 10px 14px; border-inline-start: 3px solid var(--gold-soft); background: var(--surface); border-radius: 0 10px 10px 0; font-size: 15.5px; color: var(--ink-soft); }
[dir="rtl"] .mirror-note { border-radius: 10px 0 0 10px; }

/* the free reading: a small picture of the chosen spread under the choices */
.pick-preview { max-width: 380px; margin: 14px 0 0; }
.pick-preview .diagram { display: none; }
.reader:has(input[value="daily"]:checked) .pick-preview [data-for="daily"],
.reader:has(input[value="past-present-future"]:checked) .pick-preview [data-for="past-present-future"],
.reader:has(input[value="love"]:checked) .pick-preview [data-for="love"],
.reader:has(input[value="crossroads"]:checked) .pick-preview [data-for="crossroads"],
.reader:has(input[value="deep-reflection"]:checked) .pick-preview [data-for="deep-reflection"] { display: block; }
/* Hebrew reads right to left: the layout picture is mirrored so card 1 sits on the right; each card and its label are turned back */
[dir="rtl"] .pick-preview .diagram { transform: scaleX(-1); }
[dir="rtl"] .pick-preview .slot { transform: translate(-50%, -50%) scaleX(-1); }
/* phones: the menu row fades at its far edge, so it is clear there is more to swipe to */
@media (max-width: 860px) {
  .mainnav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  [dir="rtl"] .mainnav { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
  .mainnav.at-end { -webkit-mask-image: none; mask-image: none; }
}
/* stacked tables: each label sits beside its value, so long tables take less scrolling */
@media (max-width: 560px) {
  .prose-body .table-stack td { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 10px; align-items: baseline; padding: 5px 0; }
  .table-stack td[data-label]::before { margin: 0; font-size: 11.5px; }
  .table-stack tr { padding: 10px 14px; margin-bottom: 10px; }
}

/* the first-week plan */
.week { list-style: none; padding: 0; margin: 28px 0 14px; display: grid; gap: 16px; }
.week-day { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.week-num { display: grid; place-items: center; align-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--weave), #efe0c4; box-shadow: inset 0 0 0 4px #efe0c4, inset 0 0 0 5px #d9c19a; font: 600 24px/1 var(--serif); color: var(--ink); }
.week-num span { font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 2px; }
.week-body h2 { margin: 2px 0 8px; font-size: 22px; }
.week-min { font: 600 13px/1 var(--sans); color: var(--gold) !important; margin-inline-start: 6px; }
.week-body p { margin: 0 0 10px; }
.week-why { font-style: italic; }
.week-done { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 600 14px/1 var(--sans); cursor: pointer; background: #fffaf2; }
.week-done input { accent-color: #3f6b3c; width: 18px; height: 18px; margin: 0; }
.week-day.done { border-color: #a9c1a3; background: linear-gradient(0deg, #f3f6ef, var(--surface)); }
.week-day.done .week-num { background: #3f6b3c; box-shadow: none; color: #fff; }
.week-day.done .week-num span { color: #dfe8d8; }
@media (max-width: 520px) { .week-day { grid-template-columns: 1fr; gap: 10px; padding: 16px; } .week-num { width: 52px; height: 52px; font-size: 21px; } }

/* the printable cheat sheet */
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.cheatsheet { padding-top: 10px; }
.cs-group { margin: 30px 0; }
.cs-group h2 { margin: 0 0 4px; }
.cs-note { margin: 0 0 12px; }
.cs-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.cs-card { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.cs-card a { grid-row: span 2; display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font: 600 16px/1.3 var(--serif); }
.cs-card a:hover .cs-name { text-decoration: underline; }
.cs-face { width: 28px; height: 42px; border-radius: 3px; flex: 0 0 auto; }
.cs-num { color: var(--gold); font: 600 13px/1 var(--sans); }
.cs-up { font-size: 15px; line-height: 1.4; }
.cs-rev { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.cs-r { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; background: var(--rose-soft); color: #87454f; font: 700 10px/1 var(--sans); vertical-align: 1px; }
.cs-print-foot { display: none; }
@media (max-width: 760px) { .cs-list { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .cs-card { grid-template-columns: 1fr; } .cs-card a { grid-row: auto; } }
@media print {
  .top, .foot, .crumbs, .cs-actions, .jump, .no-print, .helpful, .cta { display: none !important; }
  body, html { background: #fff !important; }
  .page-head { background: none !important; border: 0; padding: 0; }
  .page-head h1 { font-size: 26px; margin: 0 0 4px; }
  .page-head .lead, .page-head .kicker { display: none; }
  .cheatsheet { padding: 0; }
  .cs-group { margin: 12px 0; break-inside: auto; }
  .cs-group h2 { font-size: 17px; }
  .cs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .cs-card { padding: 4px 0; grid-template-columns: 40% 1fr; }
  .cs-card a { font-size: 11.5px; }
  .cs-face { width: 16px; height: 24px; }
  .cs-up { font-size: 10.5px; } .cs-rev { font-size: 10px; }
  .cs-print-foot { display: block; margin-top: 10px; font-size: 10px; color: #555; }
  a { color: inherit !important; }
}
.waitlist-anchor { scroll-margin-top: 120px; }

.reading-cta .luna-line { margin-top: 8px; }

/* the end of the course: a warm "what next" */
.course-done { display: flex; gap: 18px; align-items: flex-start; margin: 26px 0 10px; padding: 22px 24px; background: var(--weave), #f3e4cc; border-radius: 20px; box-shadow: inset 0 0 0 1px #e2cba6; }
.course-done img { border-radius: 50%; flex: 0 0 auto; }
.course-done h2 { margin: 0 0 6px; font-size: 24px; }
.course-done p { margin: 0 0 12px; }
.course-done .btn { margin: 0 8px 8px 0; }
@media (max-width: 520px) { .course-done { flex-direction: column; } }

.next-step { display: flex; gap: 14px; align-items: center; margin: 28px 0 8px; padding: 14px 18px; background: var(--surface); border: 1px dashed #d9c19a; border-radius: 16px; }
.next-step img { border-radius: 50%; flex: 0 0 auto; }
.next-step p { margin: 0; font-size: 16px; }

/* on Hebrew pages, a link in running text that leads to an English-only page says so */
html[lang="he"] :is(.prose-body, .week-links) a[hreflang="en"]:not([lang])::after { content: " (באנגלית)"; font-size: .88em; color: var(--ink-soft); }

/* ::: layout in articles: a spread drawn on the reading cloth */
.layout-fig { margin: 22px 0; }
.layout-diagram { aspect-ratio: 4 / 3; max-width: 520px; }
.layout-diagram .slot img { width: 38px; height: 57px; }
.layout-diagram .slot em { font-size: 12px; max-width: 110px; white-space: normal; text-align: center; line-height: 1.15; }
.layout-diagram .slot.rot { z-index: 2; }
.layout-diagram .slot.rot img { transform: rotate(90deg); }
.layout-diagram .slot.rot b { top: auto; bottom: -6px; right: -18px; }
.layout-fig figcaption { margin-top: 6px; }
[dir="rtl"] .layout-diagram { transform: scaleX(-1); }
[dir="rtl"] .layout-diagram .slot { transform: translate(-50%, -50%) scaleX(-1); }
@media (max-width: 420px) { .layout-diagram .slot img { width: 30px; height: 45px; } .layout-diagram .slot em { font-size: 10.5px; max-width: 80px; } }

@media (max-width: 520px) { .layout-diagram.many .slot em { display: none; } }

/* directory pages: a short guide above the list */
.hub-intro { max-width: 760px; margin: 26px 0 8px; }
.hub-intro p { margin: 0 0 14px; }
.hub-start { max-width: 760px; margin: 10px 0 26px; padding: 18px 22px; background: var(--weave), #f3e4cc; border-radius: 18px; box-shadow: inset 0 0 0 1px #e2cba6; }
.hub-start h2 { margin: 0 0 8px; font-size: 22px; }
.hub-start ol { margin: 0; padding-inline-start: 22px; }
.hub-start li { margin: 6px 0; }
.hub-start li a { font-weight: 600; }
.hub-start li .small { display: block; }
.hub-patterns { max-width: 760px; margin: 6px 0 22px; }
.hub-patterns h2, .hub-list-h { font-size: 24px; margin: 18px 0 10px; }

/* printable journal templates */
.journal-templates { padding-top: 6px; }
.jt-sheet { max-width: 760px; margin: 22px 0 34px; padding: 26px 28px; background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.jt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1.5px dashed #d9c19a; padding-bottom: 8px; margin-bottom: 14px; }
.jt-head h2 { margin: 0; font-size: 26px; }
.jt-date { margin: 0; font: 500 14px/1 var(--sans); color: var(--ink-soft); }
.jt-grid { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }
.jt-cardbox { display: grid; place-items: center; width: 150px; height: 225px; border: 1.5px dashed #c9ad7f; border-radius: 10px; color: #7a6040; font: 500 13px/1.3 var(--sans); text-align: center; padding: 10px; }
.jt-cardbox.small { width: 90px; height: 135px; margin: 0 auto 8px; font: 600 22px/1 var(--serif); }
.jt-field { margin: 8px 0 12px; }
.jt-label { margin: 0 0 2px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.jt-mini { margin: 6px 0 0; font: 500 12px/1.2 var(--sans); color: var(--ink-soft); }
.jt-lines span { display: block; height: 28px; border-bottom: 1px solid #ddcdb6; }
.jt-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0; }
.jt-pos { text-align: center; }
.jt-pos .jt-label { font-size: 13px; min-height: 2.6em; }
.jt-hint { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.jt-month { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.jt-month li { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 8px; align-items: end; height: 27px; border-bottom: 1px solid #ddcdb6; }
.jt-day { font: 600 12px/1 var(--sans); color: var(--gold); }
.jt-foot { margin: 14px 0 0; font-size: 11px; color: #6a5d53; text-align: center; }
@media (max-width: 560px) { .jt-sheet { padding: 18px; } .jt-grid { grid-template-columns: 1fr; } .jt-cardbox { width: 120px; height: 180px; } .jt-three { grid-template-columns: 1fr; } .jt-month { grid-template-columns: 1fr; } }
@media print {
  .journal-templates .jt-sheet { box-shadow: none; border: 0; padding: 0; margin: 0; max-width: none; break-after: page; background: #fff; }
  .journal-templates .jt-sheet:last-of-type { break-after: auto; }
  .page-head h1 { display: none; }
  .jt-head h2 { font-size: 22px; }
  .jt-lines span { height: 30px; }
  .jt-month li { height: 23px; }
}

/* the Hebrew spread hub */
.he-spread { padding: 30px 0; border-bottom: 1px solid var(--line); }
.he-spread-in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.he-spread h2 { margin: 2px 0 6px; }
.he-positions { padding-inline-start: 22px; }
.he-positions li { margin: 6px 0; }
.he-q-title { margin: 14px 0 4px; font-weight: 600; }
.he-questions { margin: 0 0 16px; padding-inline-start: 22px; color: var(--ink-soft); }
.he-spread-pic { margin: 0; max-width: none; }
.he-spread-pic .diagram { display: block; }
@media (max-width: 860px) { .he-spread-in { grid-template-columns: 1fr; } .he-spread-pic { order: -1; max-width: 420px; } }

/* the widget page */
.widget-preview { max-width: 520px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.widget-preview iframe { display: block; width: 100%; height: 200px; border: 0; }
.code-box { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 16px; }
.code-box textarea { flex: 1; min-width: 0; padding: 10px 12px; font: 13px/1.5 ui-monospace, Consolas, monospace; color: var(--ink); background: #fffaf2; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
@media (max-width: 520px) { .code-box { flex-direction: column; } }

/* the "what tarot card are you?" quiz */
.quiz-play { margin: 26px 0; padding: 24px; background: var(--weave), #f3e4cc; border-radius: 22px; box-shadow: inset 0 0 0 1px #e2cba6; min-height: 320px; }
.quiz-count { margin: 0 0 6px; }
.quiz-bar { height: 6px; border-radius: 999px; background: #e7d6bb; overflow: hidden; margin-bottom: 18px; }
.quiz-bar span { display: block; height: 100%; background: var(--gold-btn); border-radius: 999px; transition: width .4s; }
.quiz-q-h { margin: 0 0 16px; font-size: clamp(22px, 3vw, 28px); }
.quiz-answers { display: grid; gap: 10px; }
.quiz-answer { text-align: start; padding: 14px 18px; font: 500 17px/1.4 var(--sans); color: var(--ink); background: #fffaf2; border: 1.5px solid #e2cba6; border-radius: 14px; cursor: pointer; transition: transform .15s, border-color .15s; }
.quiz-answer:hover, .quiz-answer:focus-visible { border-color: var(--gold-btn); transform: translateY(-1px); }
.quiz-result { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: start; animation: deal .5s cubic-bezier(.2, .8, .2, 1) both; }
.quiz-result .face { width: 160px; height: 240px; border-radius: 10px; box-shadow: 0 18px 30px -14px rgba(49, 39, 36, .55); }
.quiz-result h2 { margin: 2px 0 4px; font-size: 32px; }
@media (max-width: 560px) { .quiz-play { padding: 18px; } .quiz-result { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .quiz-result { animation: none; } }

/* tarot cards as feelings */
.feel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feel-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.feel-card:hover { border-color: #d9c19a; box-shadow: var(--shadow); }
.feel-face { width: 40px; height: 60px; border-radius: 4px; }
.feel-card strong { display: block; font: 600 18px/1.3 var(--serif); }
.feel-text { display: block; margin: 2px 0 4px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.feel-more { color: var(--lavender) !important; }
.page-head .mirror-note { max-width: 760px; }

/* the spread maker */
.sm { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 30px; align-items: start; margin: 26px 0; }
.sm-form { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.sm-l { display: block; margin: 10px 0 4px; font: 600 14px/1.3 var(--sans); }
.sm-in { width: 100%; padding: 9px 11px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fffaf2; border: 1px solid var(--line); border-radius: 10px; }
.sm-pos { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.sm-list { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.sm-list li { display: grid; grid-template-columns: 34% 1fr; gap: 6px; }
.sm-btns { margin: 10px 0 4px; }
.sm-sheet { padding: 20px; background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.sm-title { margin: 0 0 12px; font-size: 26px; }
.sm-diagram { aspect-ratio: 4 / 3; max-width: 100%; }
.sm-legend { margin: 14px 0 0; padding-inline-start: 22px; }
.sm-legend li { margin: 4px 0; }
.sm-foot { margin: 10px 0 0; text-align: center; }
.sm-actions { margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .sm { grid-template-columns: 1fr; } .sm-out { order: -1; } }
@media print {
  .sm-form, .sm-actions, .sm-msg, .page-head .lead, .page-head .kicker, .page-head h1 { display: none !important; }
  .sm { display: block; margin: 0; }
  .sm-sheet { border: 0; box-shadow: none; padding: 0; }
}

/* the card meanings quiz */
.cq-card { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.cq-card .face { width: 96px; height: 144px; border-radius: 8px; box-shadow: 0 12px 22px -12px rgba(49, 39, 36, .5); flex: 0 0 auto; }
.cq-card .quiz-q-h { margin: 0; }
.quiz-answer.cq-right { border-color: #6f9a68; background: var(--sage-soft); }
.quiz-answer.cq-wrong { border-color: #c98f97; background: var(--rose-soft); }
.quiz-answer:disabled { cursor: default; transform: none; }
.cq-feedback { margin: 14px 0 0; min-height: 2.4em; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cq-result h2 { margin: 2px 0 12px; }
.cq-review { list-style: none; padding: 0; margin: 8px 0 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.cq-review a { display: flex; gap: 8px; align-items: center; padding: 6px 12px 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.cq-review .face { width: 28px; height: 42px; border-radius: 3px; }

/* printable spread worksheets (/tarot-spread-worksheets), on the journal template sheets */
.ws-diagram { max-width: 480px; margin: 6px auto 16px; }
.ws-positions { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 22px; }
.ws-positions .jt-label b { color: var(--ink); }
.ws-role { display: block; font-weight: 400; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.ws-url { overflow-wrap: anywhere; }
.ws-one { margin: 12px 0 0; }
@media print {
  body.print-one .journal-templates .jt-sheet:not(.print-me), body.print-one .journal-templates > .sec { display: none !important; }
  body.print-one .page-head h1 { display: none; }
  .ws-diagram { max-width: 380px; margin: 4px auto 10px; }
  .ws-positions { gap: 6px 18px; }
  .ws-diagram .slot b { background: #fff !important; color: #312724 !important; border: 1.5px solid #312724; }
}
/* in Hebrew the cloth reads right to left, like the reading previews */
[dir="rtl"] .ws-diagram { transform: scaleX(-1); }
[dir="rtl"] .ws-diagram .slot { transform: translate(-50%, -50%) scaleX(-1); }

.card-list .hub-rev { display: block; margin-top: 2px; opacity: .85; font-style: italic; }

/* two language links (English + Hebrew/Spanish twins): only the first pushes right; tighter on phones so the app button stays on the line */
.lang-link + .lang-link { margin-inline-start: 0 !important; }
@media (max-width: 480px) {
  .top-in:has(.lang-link + .lang-link) { gap: 0 4px; }
  .top-in:has(.lang-link + .lang-link) .lang-link[data-short] { font-size: 0; padding: 8px 7px; }
  .top-in:has(.lang-link + .lang-link) .lang-link[data-short]::after { content: attr(data-short); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
}
@media (max-width: 480px) { .top-in:has(.lang-link) .top-cta { padding: 8px 12px; font-size: 13px; } .top-in:has(.lang-link) .logo { font-size: 20px; gap: 8px; } }
.mini-day > span { min-width: 0; } .mini-day .more { white-space: normal; }
.result .more, .fan-result .more { white-space: normal; }
/* very narrow phones: a single language link also shows its short form, so the app button stays on the logo line */
@media (max-width: 400px) {
  .top-in .lang-link[data-short] { font-size: 0; padding: 8px 7px; }
  .top-in .lang-link[data-short]::after { content: attr(data-short); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
}
/* the big spread diagram on phones: a taller cloth so two rows of cards and their labels never overlap or clip */
@media (max-width: 520px) {
  .diagram.big.two-rows { aspect-ratio: 4 / 3; }
  .diagram.big .slot img { width: 46px; height: 69px; }
  .diagram.big .slot em { font-size: 12.5px; }
}
/* Spanish articles: a link to a page that exists only in English says so */
html[lang="es"] .prose-body a[hreflang="en"]:not([lang])::after { content: " (en inglés)"; font-size: .88em; color: var(--ink-soft); }
/* four languages (three language links): the short forms (EN, ES, PT, עב) at every width, and on wide screens close
   together, so the row takes about the room one full language name took */
.top-in:has(.lang-link + .lang-link + .lang-link) .lang-link[data-short] { font-size: 0; padding: 8px 7px; }
.top-in:has(.lang-link + .lang-link + .lang-link) .lang-link[data-short]::after { content: attr(data-short); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 861px) {
  .top-in:has(.lang-link + .lang-link + .lang-link) { gap: 14px; }
  .top-in:has(.lang-link + .lang-link + .lang-link) .lang-link + .lang-link { margin-inline-start: -12px !important; }
}
/* ...and on narrow phones a little tighter still, so the app button stays on the logo line (up to 440px: the Hebrew
   app button is the widest) */
@media (max-width: 440px) {
  .top-in:has(.lang-link + .lang-link + .lang-link) { gap: 0 2px; }
  .top-in:has(.lang-link + .lang-link + .lang-link) .logo { font-size: 17px; gap: 6px; }
  .top-in:has(.lang-link + .lang-link + .lang-link) .lang-link[data-short] { padding: 8px 4px; }
  .top-in:has(.lang-link + .lang-link + .lang-link) .lang-link[data-short]::after { font-size: 12px; }
  .top-in:has(.lang-link + .lang-link + .lang-link) .top-cta { padding: 8px 10px; font-size: 12.5px; }
}

/* the reading, read together: a question under each card, the thread through the cards, what stands out */
.sit-q { margin: 10px 0 6px; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; font: italic 400 16px/1.5 var(--serif); color: #5b3f35; }
.sit-q span { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink, #8a6420); font-style: normal; margin-bottom: 2px; }
.thread-box { max-width: 760px; margin: 8px 0 18px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.thread-box .toc-title { display: block; }
.thread { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 0; padding: 0; margin: 8px 0 10px; }
.thread li { display: flex; flex-direction: column; padding: 6px 12px; background: var(--gold-soft); border-radius: 10px; }
.thread li + li { margin-inline-start: 26px; position: relative; }
.thread li + li::before { content: '\2192'; position: absolute; inset-inline-start: -20px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
[dir="rtl"] .thread li + li::before { content: '\2190'; }
.thread strong { font: 600 16px/1.3 var(--serif); }
.stand-out { margin: 6px 0 0; padding-inline-start: 20px; }
.stand-out li { margin: 6px 0; }
/* tonight's moon, under today's card on the home pages (site.js) */
.mini-moon { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; margin: 12px auto 0; max-width: 560px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink-soft); text-align: start; }
.mini-moon .moon-pic { justify-self: center; width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(49, 39, 36, .25)); }
.mini-moon > span { display: flex; flex-direction: column; gap: 2px; }
.mini-moon strong { font: 600 19px/1.3 var(--serif); color: var(--ink); }
/* "Your corner" on the home pages: shown only to people who have been here before (site.js) */
.corner { margin: 0 0 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; max-width: 34em; }
[dir="rtl"] .corner { border-left-width: 1px; border-right: 4px solid var(--gold); }
.corner-hi { margin: 0; font: italic 400 18px/1.45 var(--serif); color: #74462f; }
.corner-hi strong { font-style: normal; font-weight: 600; }
.corner-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-soft); }
.corner-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.corner-card img { width: 40px; height: 60px; border-radius: 4px; image-rendering: pixelated; }
.corner-days { margin: 8px 0 0; color: var(--ink-soft); }
/* Today on the home pages: the card game, then today's card and tonight's moon */
.today-row { display: grid; gap: 12px; max-width: 980px; margin: 22px auto 0; text-align: start; }
.today-row .mini-day-wrap, .today-row .mini-moon { margin: 0; max-width: none; }
.today-row .mini-day, .today-row .mini-moon { height: 100%; }
@media (min-width: 760px) { .today-row { grid-template-columns: 1fr 1fr; } }
.moods-h { margin: 34px 0 4px; text-align: center; font: 600 22px/1.3 var(--serif); }
/* phones: Luna's letter a touch smaller, and her face sits beside the first line instead of above it */
@media (max-width: 640px) {
  .app-intro { gap: 0; }
  .app-intro > .luna-face { display: none; }
  .luna-letter { margin-top: 4px; padding: 18px 18px 16px; }
  .luna-letter blockquote { font-size: 17px; line-height: 1.55; }
  .luna-letter blockquote p:first-child::before { content: ''; float: left; width: 52px; height: 52px; margin: 2px 12px 4px 0; border-radius: 50%; background: url(/img/luna-face.png) center / cover; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
  [dir="rtl"] .luna-letter blockquote p:first-child::before { float: right; margin: 2px 0 4px 12px; }
}
/* card guides: "This is your soul card", "You drew this card yesterday" (site.js, this browser only) */
.you-note { display: inline-block; margin: 0 0 12px; padding: 6px 12px; background: var(--gold-soft); border-radius: 999px; font: italic 400 15px/1.45 var(--serif); color: #74462f; }
.you-note a { color: inherit; }

/* licence texts and long links (/licenses) */
.prose li { overflow-wrap: anywhere; }
.prose pre.licence { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8em; line-height: 1.45; opacity: 0.85; }

.closer-trigger,
.closer-close {
  box-sizing: border-box;
  min-block-size: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line, #ddcdb6);
  border-radius: var(--radius, 14px);
  background: var(--surface, #faf5ec);
  color: var(--ink-soft, #675c56);
  font: 400 14px/1.4 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}

.closer-trigger {
  display: block;
  margin-block: 12px;
  margin-inline: auto;
}

.closer-trigger:hover,
.closer-close:hover {
  background: var(--gold-soft, #f1dfbd);
  color: var(--ink, #312724);
}

.closer-dialog {
  box-sizing: border-box;
  inline-size: min(440px, calc(100% - 24px));
  max-inline-size: none;
  max-block-size: calc(100% - 32px);
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line, #ddcdb6);
  border-radius: var(--radius, 14px);
  background: var(--surface, #faf5ec);
  color: var(--ink, #312724);
  font: 400 15px/1.5 var(--sans, system-ui, sans-serif);
  text-align: start;
}

.closer-dialog::backdrop {
  background: rgb(27 18 36 / 68%);
}

.closer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.closer-title {
  margin: 0;
  color: inherit;
  font: 500 24px/1.2 var(--serif, Georgia, serif);
}

.closer-close {
  flex-shrink: 0;
}

.closer-help {
  margin-block: 10px 14px;
  color: var(--ink-soft, #675c56);
}

.closer-art {
  position: relative;
  box-sizing: content-box;
  width: 64px;
  height: 96px;
  margin-inline: auto;
  flex-shrink: 0;
}

.closer-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
}

.closer-spot {
  position: absolute;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px dotted rgb(255 224 157 / 85%);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

/* Keep small pixel details easy to tap without changing their measured bounds. */
.closer-spot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 24px);
  height: max(100%, 24px);
  transform: translate(-50%, -50%);
}

.closer-spot:hover,
.closer-spot:focus,
.closer-spot[aria-pressed='true'] {
  border: 2px solid var(--gold-soft, #f1dfbd);
  background: rgb(255 220 140 / 12%);
  box-shadow: 0 0 12px 3px rgb(255 211 121 / 55%);
}

.closer-trigger:focus-visible,
.closer-close:focus-visible {
  outline: 3px solid var(--lavender, #91624a);
  outline-offset: 3px;
}

.closer-spot:focus-visible {
  outline: 2px solid var(--gold-soft, #f1dfbd);
  outline-offset: 3px;
}

.closer-reflection {
  margin-block-start: 16px;
}

.closer-note,
.closer-ask {
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
}

.closer-note {
  color: var(--ink-soft, #675c56);
}

.closer-ask {
  margin-block-start: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .closer-dialog,
  .closer-dialog *,
  .closer-trigger {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .closer-spot { border-color: ButtonText; }
  .closer-spot:focus,
  .closer-spot[aria-pressed='true'] { border-color: Highlight; outline: 2px solid Highlight; }
}