/* ARCANA: cathedral night. Lapis darkness, gold leaf, ivory type.
   Gold is a deliberate brand choice here: the deck is gilded Baroque ceiling painting.
   Shape rule: cards 14px, panels 6px with gilt corner brackets, interactive controls full pill. */
@font-face { font-family: "Serif"; src: url(../fonts/NotoSerifSC-sub.woff) format("woff"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Corm"; src: url(../fonts/Cormorant-sub.woff) format("woff"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "CormI"; src: url(../fonts/CormorantItalic-sub.woff) format("woff"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "NS"; src: url(../fonts/NotoSansSC-sub.woff) format("woff"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #06080f; --lapis: #0a1128; --lapis-2: #101a3a; --lapis-3: #172350;
  --gold: #d8b46a; --gold-hi: #f4e1a6; --gold-lo: #8c6b2e; --line: rgba(216,180,106,0.22); --line-2: rgba(216,180,106,0.42);
  --ivory: #efe7d4; --muted: #b0a892; --dim: #7d7766; --vermilion: #d65a3f;
  --gilt: linear-gradient(180deg, #f6e4ad 0%, #dcb766 42%, #a47c35 100%);
  --r-card: 14px; --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Serif", "Songti SC", "SimSun", serif; --latin: "Corm", "Serif", serif;
  --sans: "NS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --cw: 92px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* fixed backdrop on its own composited layer (background-attachment: fixed repaints the page on every scroll) */
body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, var(--lapis-2) 0%, var(--lapis) 40%, var(--ink) 100%); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.kicker { font-family: var(--latin); font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin: 0; }
.gilt-text { background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
#altar, .reading, #meanings, #history, #guide { scroll-margin-top: 70px; }

.dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.035; will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ornaments */
.orn { display: block; width: 180px; height: 12px; margin: 0 auto 18px; position: relative; }
.orn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); }
.orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--gilt); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-lo); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent;
  font: 600 16px/1 var(--sans); letter-spacing: 0.12em; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .35s var(--ease), border-color .25s, background .25s; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible, input:focus-visible, .seg input:focus-visible + span, .gcard:focus-visible, .mode:focus-visible, .today-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.btn-gold { background: var(--gilt); color: #1c1407; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(90,60,15,0.35), 0 8px 24px rgba(0,0,0,0.35); }
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(90,60,15,0.35), 0 0 0 4px rgba(216,180,106,0.18), 0 12px 34px rgba(216,180,106,0.25); }
.btn-ghost { background: rgba(10,17,40,0.4); color: var(--ivory); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--gold); }
.btn-lg { height: 58px; padding: 0 52px; font-size: 17px; }
.link-btn { background: none; border: 0; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; padding: 8px 4px; }
.link-btn:hover { color: var(--gold); }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(6,8,15,0.8), rgba(6,8,15,0)); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 20px; height: 20px; border: 1.5px solid var(--gold); transform: rotate(45deg); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 4px; background: var(--gilt); }
.brand-word { font-family: var(--latin); font-weight: 600; letter-spacing: 0.3em; font-size: 18px; color: var(--ivory); }
.brand-sub { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; }
.nav-links { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 14px; letter-spacing: 0.1em; }
.nav-links a { color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--gold-hi); }
@media (max-width: 480px) { .brand-sub { display: none; } }

/* ================= altar ================= */
.altar { position: relative; min-height: 100dvh; padding: 92px clamp(16px, 4vw, 48px) 80px; }
body { position: relative; }
.page-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* one rule for every screen: the box is the page's full height at the painting's proportions, but never narrower than
   the screen. Tall/narrow screens (phones, portrait tablets) show the whole painting, cropped only at the sides; wide screens
   stretch it to full width, its middle runs past the page, and the night-sky ending is pinned to the page bottom. */
.page-bg-in { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 2560 / 17130; min-width: 100%; transform: translateX(-50%); opacity: 0.6; filter: saturate(0.9); overflow: hidden; }
/* the painting is 7 stacked slices (lazy-loaded, 1600px wide on phones, 2560px on large screens) so it never has to be decoded whole */
/* a 20KB blurred copy of the whole painting sits underneath, so nothing is ever blank; each sharp slice fades in once loaded */
.page-bg-in { background: url(../assets/bg/lq.webp) top center / 100% auto no-repeat; }
.page-bg-in img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 1.2s var(--ease); }
.page-bg-in img.on { opacity: 1; }
.page-bg-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 2560 / 3250; background: url(../assets/bg/night_2560.webp) bottom center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
@media (max-width: 760px) { .page-bg-in::after { background-image: url(../assets/bg/night_1600.webp); } }
.page-vignette { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 45%, rgba(10,17,40,0.1) 0%, rgba(10,17,40,0.5) 70%, rgba(6,8,15,0.82) 100%), linear-gradient(to bottom, rgba(6,8,15,0.45) 0%, rgba(6,8,15,0) 18%, rgba(6,8,15,0) 72%, rgba(6,8,15,0.6) 100%); }
.altar-inner { max-width: 1100px; margin: 0 auto; }
.altar-head { text-align: center; padding-top: clamp(10px, 4vh, 48px); }
.altar-title { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 9vw, 112px); line-height: 1.1; letter-spacing: 0.12em; padding-left: 0.12em; margin: 14px 0 0;
  background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 30px rgba(0,0,0,0.6)); }
.altar-sub { margin: 14px auto 0; color: var(--ivory); opacity: 0.86; font-size: clamp(16px, 1.6vw, 19px); max-width: 40ch; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.altar[data-phase="draw"] .altar-title { font-size: clamp(38px, 5vw, 60px); }
.altar[data-phase="draw"] .altar-sub, .altar[data-phase="read"] .altar-sub { display: none; }

.modes { display: flex; justify-content: center; gap: 4px; margin: 34px auto 26px; padding: 5px; width: max-content; max-width: 100%; border-radius: 999px; background: rgba(6,8,15,0.72); border: 1px solid var(--line); }
.mode { height: 42px; padding: 0 22px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 500 15px var(--sans); letter-spacing: 0.12em; cursor: pointer; transition: color .25s, background .35s var(--ease); }
.mode:hover { color: var(--ivory); }
.mode.on { background: var(--gilt); color: #1c1407; font-weight: 700; }
@media (max-width: 420px) { .mode { padding: 0 14px; font-size: 14px; letter-spacing: 0.06em; } }

/* gilt-cornered panel */
.panel { position: relative; padding: clamp(24px, 4vw, 44px); border-radius: 6px; background: linear-gradient(180deg, rgba(16,26,58,0.62), rgba(8,12,28,0.72));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(244,225,166,0.08), 0 30px 80px rgba(0,0,0,0.45); }
.panel::before, .panel::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold); pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.altar[data-phase="draw"] [data-panel="ask"], .altar[data-phase="read"] [data-panel="ask"] { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.altar[data-phase="draw"] [data-panel="ask"]::before, .altar[data-phase="draw"] [data-panel="ask"]::after, .altar[data-phase="read"] [data-panel="ask"]::before, .altar[data-phase="read"] [data-panel="ask"]::after { display: none; }

/* form */
.ask { max-width: 640px; margin: 0 auto; display: grid; gap: 26px; justify-items: center; text-align: center; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; text-align: left; }
.field label, .seg-legend { font-size: 14px; color: var(--gold); letter-spacing: 0.14em; }
.field input { width: 100%; min-width: 0; box-sizing: border-box; height: 60px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(6,8,15,0.6); color: var(--ivory); font: 400 19px var(--display); padding: 0 26px; transition: border-color .2s, box-shadow .3s; }
.field input::placeholder { color: #8d8673; }
.field input:hover { border-color: var(--gold-lo); }
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(216,180,106,0.14); outline: none; }
.field input[type=date] { color-scheme: dark; font-family: var(--sans); font-size: 17px; }
.help { margin: 0; font-size: 13px; color: var(--muted); padding-left: 26px; }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.seg-legend { width: 100%; text-align: center; margin-bottom: 10px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 15px; letter-spacing: 0.06em; background: rgba(6,8,15,0.35); transition: all .25s var(--ease); }
.seg span:hover { color: var(--ivory); border-color: var(--gold-lo); }
.seg input:checked + span { color: #1c1407; background: var(--gilt); border-color: transparent; font-weight: 700; }

/* table */
.table { display: none; position: relative; min-height: 70vh; }
.stage:not([data-state="ask"]) .ask { display: none; }
.stage:not([data-state="ask"]) .table { display: block; }
.stage[data-state="reveal"] .table { min-height: 0; }
.slots { display: flex; justify-content: center; gap: clamp(14px, 3vw, 44px); min-height: calc(var(--sw, 150px) * 1.778 + 56px); }
.slot { width: var(--sw, 150px); display: grid; gap: 12px; justify-items: center; }
.slot-frame { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-card); border: 1px dashed var(--line-2); background: rgba(6,8,15,0.3); }
.stage[data-state="reveal"] .slot-frame { border-color: transparent; background: none; }
.slot-label { font-family: var(--display); font-size: 16px; color: var(--gold); letter-spacing: 0.2em; }
.hint { text-align: center; color: var(--ivory); opacity: 0.85; font-size: 15px; letter-spacing: 0.1em; margin: 18px 0 0; min-height: 24px; }
.hint b { color: var(--gold-hi); }
.deck { position: relative; height: calc(var(--cw) * 1.778 + 120px); margin-top: 20px; }
.card { position: absolute; left: 50%; top: 40px; width: var(--cw); aspect-ratio: 9 / 16; margin-left: calc(var(--cw) / -2); perspective: 1200px; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
.card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.card.flipped .inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face .tc { width: 100%; height: 100%; }
.face.front { transform: rotateY(180deg); }
.card .tc-label { display: none; }
.card.flipped .tc-label { display: flex; }
.card.picked { cursor: default; }
@media (hover: hover) { .deck .card.selectable:hover { z-index: 30 !important; } .deck .card.selectable:hover .inner { transform: translateY(-22px); } .deck .card.selectable:hover .tc { box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(216,180,106,0.35); } }

/* ================= painted card ================= */
.tc { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; isolation: isolate; container-type: inline-size; background: #0b0f20;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,180,106,0.35); --mx: 50%; --my: 50%; --ga: 0; }
.tc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc.rv .tc-art { transform: rotate(180deg); }
.tc-label { position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 2.6cqw; white-space: nowrap; line-height: 1;
  padding: 2.4cqw 5.4cqw; border-radius: 1.2cqw; color: var(--gold-hi); background: linear-gradient(180deg, rgba(14,20,44,0.92), rgba(8,11,26,0.92));
  border: 1px solid rgba(216,180,106,0.75); box-shadow: inset 0 0 0 0.8cqw rgba(8,11,26,0.9), inset 0 0 0 calc(0.8cqw + 1px) rgba(216,180,106,0.45), 0 4px 14px rgba(0,0,0,0.5); }
.tc-num { font-family: var(--latin); font-size: 4.4cqw; letter-spacing: 0.16em; color: var(--gold); }
.tc-zh { font-family: var(--display); font-size: 6.6cqw; font-weight: 800; letter-spacing: 0.18em; }
/* gold-leaf sheen that follows the pointer */
.tc-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: calc(0.35 + var(--ga) * 0.65);
  display: var(--glare-on, block);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,236,190,0.75) 0%, rgba(255,220,150,0.25) 25%, transparent 55%); }
.tc-sweep { position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,232,180,0.45) 50%, transparent 58%); }
.tc.live .tc-sweep { animation: sweep 7s ease-in-out infinite; }
@keyframes sweep { 0%, 62% { opacity: 0; transform: translateX(-30%); } 70% { opacity: 1; } 86%, 100% { opacity: 0; transform: translateX(30%); } }
.tilt { transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .tc.live .tc-sweep { animation: none; } }

/* ================= today ================= */
.today { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.today-card { position: relative; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px; }
.today-card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.today-card.flipped .inner { transform: rotateY(180deg); }
.today-card .face { position: absolute; inset: 0; }
.today-card:not(.flipped):hover .inner { transform: translateY(-8px) rotateZ(-1deg); }
.today-card:not(.flipped)::after { content: attr(data-tap); position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.3em; color: var(--gold); white-space: nowrap; }
.today-text { display: grid; gap: 16px; align-content: center; }
.today-name { font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.3; margin: 0; font-weight: 800; }
.today-advice { margin: 0; font-size: 18px; color: var(--ivory); opacity: 0.9; max-width: 30ch; }
.almanac { display: flex; flex-wrap: wrap; gap: 12px; }
.alm { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 7px; border-radius: 999px; background: rgba(6,8,15,0.45); border: 1px solid var(--line-2); }
.alm-k { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 18px; background: var(--gilt); color: #1c1407; }
.alm-k.alm-ji { background: transparent; color: var(--vermilion); border: 1px solid var(--vermilion); }
.alm-v { font-size: 16px; font-weight: 600; }
.today-meta { margin: 0; color: var(--muted); font-size: 14px; }
.reveal-in { animation: fadeUp .9s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 720px) { .today { grid-template-columns: 1fr; justify-items: center; text-align: center; } .today-card { max-width: 220px; margin-bottom: 30px; } .almanac { justify-content: center; } .today-advice { margin: 0 auto; } .row-actions { justify-content: center; } }

/* ================= birth ================= */
.birth-form { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 18px; max-width: 640px; margin: 0 auto; }
.birth-form .field { flex: 1 1 300px; }
.birth-form .btn { margin-top: 32px; }
.birth-result { margin-top: 44px; }
.birth-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 36px); }
.bcard { display: grid; gap: 14px; align-content: start; justify-items: center; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.bcard.in { opacity: 1; transform: none; }
.bcard-art { perspective: 1000px; width: 100%; max-width: 250px; cursor: pointer; }
.bcard-role { font-family: var(--display); font-size: 15px; letter-spacing: 0.3em; color: var(--gold); margin: 6px 0 0; }
.bcard-name { font-family: var(--display); font-size: 26px; font-weight: 800; margin: 0; }
.bcard-text { margin: 0; color: #d9d2bf; font-size: 15px; max-width: 30ch; }
.birth-note { margin: 34px auto 0; color: var(--ivory); font-family: var(--display); font-size: 19px; text-align: center; max-width: 40ch; }
.method { margin: 30px auto 0; color: var(--dim); font-size: 12.5px; text-align: center; max-width: 68ch; }
.birth-result .row-actions { justify-content: center; }
@media (max-width: 760px) { .birth-cards { grid-template-columns: 1fr; } .bcard { grid-template-columns: 110px 1fr; text-align: left; justify-items: start; align-items: center; } .bcard-art { max-width: 110px; } }

/* ================= reading ================= */
.reading { max-width: 860px; margin: 18px auto 0; }
.verdict { text-align: center; margin: 4px 0 26px; }
.verdict-word { font-family: var(--display); font-size: clamp(76px, 13vw, 140px); font-weight: 800; line-height: 1; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verdict-sub { color: var(--muted); margin: 12px 0 0; }
.reading-list { display: grid; gap: 14px; }
.ritem { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 22px 24px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,26,58,0.6), rgba(8,12,28,0.7)); opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ritem.in { opacity: 1; transform: none; }
.ritem .tc { width: 96px; border-radius: 8px; }
.ritem .tc .tc-label, .hcards .tc .tc-label { display: none; }
.rpos { font-family: var(--display); font-size: 14px; letter-spacing: 0.3em; color: var(--gold); margin: 0; }
.rname { font-family: var(--display); font-size: 26px; font-weight: 800; margin: 4px 0 8px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rname small { font-family: var(--latin); font-size: 17px; font-weight: 500; color: var(--muted); font-style: italic; }
.tag { display: inline-flex; height: 26px; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; margin: 0; font-family: var(--sans); }
.tag-up { background: rgba(216,180,106,0.16); color: var(--gold-hi); border: 1px solid rgba(216,180,106,0.4); }
.tag-rv { background: rgba(214,90,63,0.14); color: #f0a08b; border: 1px solid rgba(214,90,63,0.45); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.chip { height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: #e2d9c2; }
.rtext { margin: 0; color: #d9d2bf; }
.summary { position: relative; margin-top: 18px; padding: 30px 32px; border-radius: 6px; border: 1px solid var(--line-2); background: radial-gradient(120% 140% at 0% 0%, rgba(216,180,106,0.12), transparent 60%), linear-gradient(180deg, rgba(16,26,58,0.7), rgba(8,12,28,0.8));
  opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.summary.in { opacity: 1; transform: none; }
.summary h3 { margin: 0 0 12px; font-family: var(--display); font-size: 21px; letter-spacing: 0.2em; color: var(--gold-hi); }
.summary p { margin: 0; color: var(--ivory); font-size: 17px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.reading .row-actions { justify-content: center; }
.burst { position: absolute; inset: -30%; pointer-events: none; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255,232,180,0.6) 0%, rgba(216,180,106,0.25) 28%, transparent 62%); animation: burst 1.4s var(--ease) forwards; }
@keyframes burst { from { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.4); } }
@media (max-width: 600px) { .ritem { grid-template-columns: 72px 1fr; gap: 16px; padding: 18px; } .ritem .tc { width: 72px; } .rname { font-size: 22px; } }

/* ================= sections ================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
.section-title { text-align: center; display: grid; gap: 12px; justify-items: center; margin-bottom: 52px; }
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 50px); line-height: 1.2; letter-spacing: 0.08em; margin: 0; }
.h3 { font-family: var(--display); font-size: 34px; line-height: 1.2; margin: 4px 0 0; font-weight: 800; }
.lead { margin: 0; color: var(--muted); font-size: 16px; max-width: 44ch; text-wrap: balance; }

.history { max-width: 1000px; margin: 0 auto; padding: 70px clamp(16px, 4vw, 48px) 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.history .h2 { font-size: clamp(24px, 2.6vw, 32px); }
.history-list { display: grid; gap: 10px; margin-bottom: 12px; }
.hitem { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 14px 18px; border-radius: 6px; border: 1px solid var(--line); background: rgba(10,17,40,0.5); }
.hcards { display: flex; gap: 6px; }
.hcards .tc { width: 40px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(216,180,106,0.35); }
.hq { margin: 0; font-family: var(--display); font-weight: 700; }
.hmeta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.meanings { max-width: 1320px; margin: 0 auto; padding: 120px clamp(16px, 4vw, 64px) 40px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 22px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 22px 12px; } }
.gcard { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; perspective: 900px; display: grid; gap: 12px; text-align: center; }
.gcard .tc { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gcard:hover .tc { box-shadow: 0 34px 70px rgba(0,0,0,0.65), 0 0 0 1px var(--gold), 0 0 50px rgba(216,180,106,0.18); }
.gcard .tc-label { display: none; }
.gname { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; }
.gnum { font-family: var(--latin); color: var(--gold); font-size: 15px; letter-spacing: 0.12em; margin-right: 6px; }

.guide { max-width: 1000px; margin: 0 auto; padding: 110px clamp(20px, 5vw, 64px) 40px; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.guide-list li { padding: 24px 0; border-top: 1px solid var(--line); color: #cfc8b4; font-size: 16px; }
.guide-list b { display: block; color: var(--ivory); font-family: var(--display); font-size: 20px; margin-bottom: 6px; }
@media (max-width: 700px) { .guide-list { grid-template-columns: 1fr; } }

.foot { text-align: center; padding: 90px clamp(20px, 5vw, 64px) 50px; margin-top: 60px; border-top: 1px solid var(--line); }
.foot-quote { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; max-width: 32ch; margin: 0 auto; text-wrap: balance; }
.foot-small { color: var(--dim); font-size: 13px; max-width: 60ch; margin: 22px auto 0; }
.foot-brand { font-family: var(--latin); letter-spacing: 0.3em; color: var(--gold); margin: 26px 0 0; font-size: 15px; }

/* modal */
.modal { border: 0; padding: 0; background: transparent; color: var(--ivory); max-width: min(960px, 94vw); width: 100%; }
.modal::backdrop { background: rgba(4,5,10,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-body { position: relative; display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 44px; padding: 38px; border-radius: 6px; border: 1px solid var(--line-2);
  background: radial-gradient(100% 80% at 0% 0%, rgba(216,180,106,0.10), transparent 60%), linear-gradient(180deg, #121b3c, #0a0f24); box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.modal-art { perspective: 1000px; }
.modal-text { display: grid; align-content: start; gap: 6px; }
.pos-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pos-block p:last-child { margin: 0; color: #d9d2bf; }
.facets { display: grid; gap: 12px; }
.facet-k { margin: 0 0 2px; font-family: var(--display); font-size: 13px; letter-spacing: 0.3em; color: var(--gold); }
.modal-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(6,8,15,0.5); cursor: pointer; z-index: 2; }
.modal-close::before, .modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--gold-hi); transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal[open] .modal-body { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@media (max-width: 680px) { .modal-body { grid-template-columns: 1fr; padding: 26px; gap: 20px; } .modal-art { max-width: 220px; } }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } }

/* suit filter in the gallery */
.modes-sm { margin: -20px auto 44px; flex-wrap: wrap; justify-content: center; }
.modes-sm .mode { height: 38px; padding: 0 18px; font-size: 14px; }
.gcard.off { display: none; }
.gsuit { display: block; font-size: 12px; color: var(--dim); letter-spacing: 0.2em; margin-top: 2px; }

/* thumbnails: no blend layer until hovered, and skip rendering off-screen gallery cards */
.gcard .tc { --glare-on: none; }
.gcard:hover .tc { --glare-on: block; }
.gcard { content-visibility: auto; contain-intrinsic-size: 1px 360px; }  /* height estimate only; width stays grid-driven */
@media (max-width: 640px) { .gcard { contain-intrinsic-size: 1px 230px; } .modes-sm { border-radius: 22px; } }
.panel { background: linear-gradient(180deg, rgba(16,26,58,0.78), rgba(8,12,28,0.86)); }

/* draw phase: everything (slots, hint, fan) must fit one screen */
.altar[data-phase="draw"] { padding-top: 72px; }
.altar[data-phase="draw"] .kicker, .altar[data-phase="draw"] .modes { display: none; }
.altar[data-phase="draw"] .altar-head { padding-top: 0; }
.altar[data-phase="draw"] .altar-title { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 18px; }
/* the hover lift is visual only: hit-testing stays on the card's resting box, so dense 78-card fans don't swallow clicks or flicker */
.deck .card .inner { pointer-events: none; }

/* the fan: 78 stacked cards must not each cast a big shadow (they merge into a grey cloud) */
.deck .card .tc { box-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(216,180,106,0.28); }
@media (hover: hover) { .deck .card.selectable:hover .tc { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(216,180,106,0.4); } }
.deck .card.landed .tc { box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(216,180,106,0.45); }
.deck .card.landed { will-change: auto; }

/* ---------- language toggle ---------- */
.lang { display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 999px; padding: 1px; margin-left: 4px; }   /* same height as the nav text line (14px / 1.7) */
.lang button { height: 20px; min-width: 28px; padding: 0 7px; line-height: 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 11.5px var(--latin); letter-spacing: 0.08em; cursor: pointer; transition: color .2s, background .25s var(--ease); }
.lang button:hover { color: var(--ivory); }
.lang button.on { background: var(--gilt); color: #1c1407; }
.lang button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- spread tiles: each shows its own miniature layout ---------- */
.spreads { border: 0; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.spreads .seg-legend { grid-column: 1 / -1; width: 100%; text-align: center; margin-bottom: 4px; padding: 0; }
.sp { cursor: pointer; position: relative; display: block; }
.sp input { position: absolute; opacity: 0; pointer-events: none; }
.sp-box { display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; padding: 16px 6px 13px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,26,58,0.55), rgba(6,8,15,0.55)); transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.sp:hover .sp-box { border-color: var(--gold-lo); transform: translateY(-2px); }
.sp input:checked + .sp-box { border-color: var(--gold); background: linear-gradient(180deg, rgba(40,44,70,0.75), rgba(14,16,30,0.75)); box-shadow: inset 0 1px 0 rgba(244,225,166,0.25), 0 0 0 3px rgba(216,180,106,0.14), 0 10px 30px rgba(216,180,106,0.12); }
.sp input:focus-visible + .sp-box { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.sp:active .sp-box { transform: translateY(0) scale(0.98); }
.sp-art { position: relative; height: 44px; width: 64px; margin-bottom: 6px; display: block; }
.sp-art i { position: absolute; top: 6px; left: 50%; width: 18px; height: 32px; margin-left: -9px; border-radius: 3px; border: 1px solid var(--gold-lo); background: rgba(6,8,15,0.7); transition: background .3s, border-color .3s, transform .45s var(--ease); }
.sp-art i:nth-child(1) { transform: translateX(-21px); } .sp-art i:nth-child(3) { transform: translateX(21px); }
.sp-art.love i:nth-child(1) { transform: translate(-12px, 4px) rotate(-14deg); } .sp-art.love i:nth-child(2) { transform: translateY(-5px) scale(0.86); } .sp-art.love i:nth-child(3) { transform: translate(12px, 4px) rotate(14deg); }
.sp-art.work i:nth-child(1) { transform: translate(-21px, 7px); } .sp-art.work i:nth-child(2) { transform: translateY(1px); } .sp-art.work i:nth-child(3) { transform: translate(21px, -5px); }
.sp-art.yesno i::after, .sp-art.one i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; transform: rotate(45deg); background: var(--gold-lo); transition: background .3s; }
.sp-art.yesno i::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--gold-lo); opacity: 0.6; }
.sp input:checked + .sp-box .sp-art i { background: var(--gilt); border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.sp input:checked + .sp-box .sp-art i::after, .sp input:checked + .sp-box .sp-art i::before { background: #3a2a0e; }
.sp:hover .sp-art.three i:nth-child(1), .sp input:checked + .sp-box .sp-art.three i:nth-child(1) { transform: translateX(-23px) rotate(-6deg); }
.sp:hover .sp-art.three i:nth-child(3), .sp input:checked + .sp-box .sp-art.three i:nth-child(3) { transform: translateX(23px) rotate(6deg); }
.sp-name { white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ivory); letter-spacing: 0.06em; line-height: 1.3; text-align: center; }
.sp-n { text-wrap: balance; font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; line-height: 1.35; text-align: center; }
.sp input:checked + .sp-box .sp-name { color: var(--gold-hi); }
@media (max-width: 640px) {
  .spreads { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 2px 2px 8px; margin: 0 -4px; scrollbar-width: none; flex-wrap: nowrap; }
  .spreads::-webkit-scrollbar { display: none; }
  .spreads .seg-legend { float: none; }
  .sp { flex: 0 0 31%; scroll-snap-align: start; }
}

/* ---------- ornamented primary button ---------- */
.btn-orn { gap: 16px; letter-spacing: 0.3em; }
.btn-orn::before, .btn-orn::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid rgba(58,40,10,0.7); flex: none; transition: transform .45s var(--ease); }
.btn-orn:hover::before { transform: translateX(-3px) rotate(45deg); } .btn-orn:hover::after { transform: translateX(3px) rotate(225deg); }

/* ---------- English typography: Cormorant for display, quieter tracking ---------- */
html[lang=en] { --display: "Corm", "Serif", serif; }
html[lang=en] .altar-title { font-weight: 600; letter-spacing: 0.02em; padding-left: 0; font-size: clamp(46px, 7.4vw, 96px); }
html[lang=en] .h2 { font-weight: 600; letter-spacing: 0.02em; }
html[lang=en] .h3, html[lang=en] .rname, html[lang=en] .bcard-name, html[lang=en] .today-name { font-weight: 600; letter-spacing: 0.01em; }
html[lang=en] .tc-zh { font-family: var(--latin); font-weight: 600; font-size: 5.4cqw; letter-spacing: 0.1em; text-transform: uppercase; }
html[lang=en] .gname { font-family: var(--latin); font-weight: 600; letter-spacing: 0.04em; font-size: 18px; }
html[lang=en] .rpos, html[lang=en] .bcard-role, html[lang=en] .facet-k, html[lang=en] .slot-label, html[lang=en] .summary h3 { letter-spacing: 0.14em; text-transform: uppercase; }
html[lang=en] .alm-k { font-size: 11px; font-family: var(--sans); font-weight: 700; width: 46px; border-radius: 999px; }
html[lang=en] .field input { font-family: var(--latin); font-size: 20px; }
html[lang=en] .btn-orn { letter-spacing: 0.16em; text-transform: uppercase; font-size: 15px; }
html[lang=en] .sp-name { font-size: 16px; letter-spacing: 0.02em; }
html[lang=en] .verdict-word { font-weight: 600; }
/* fieldsets default to min-inline-size: min-content, which let the scrolling tile row widen the whole form on phones */
.spreads { min-inline-size: 0; max-width: 100%; }
.ask { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) {
  .hide-sm { display: none; }
  .nav-links { gap: 14px; align-items: center; }
  .modes .mode { white-space: nowrap; }
  html[lang=en] .modes:not(.modes-sm) .mode { padding: 0 11px; font-size: 13px; letter-spacing: 0.02em; }
  html[lang=en] .brand-word { letter-spacing: 0.22em; }
}
/* the nav floats over the scrolling page; a soft dark fade keeps content from showing through its labels */
.nav::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.7) 60%, rgba(6,8,15,0) 100%); }

/* ---------- text over the painted ceiling: gilt instead of white, each block with a soft dark halo so it reads on light passages ---------- */
:root { --halo: 0 1px 2px rgba(6,8,15,0.95), 0 0 14px rgba(6,8,15,0.85), 0 0 28px rgba(6,8,15,0.6); }
.gname { color: var(--gold-hi); text-shadow: var(--halo); }
.gnum { color: var(--gold); text-shadow: var(--halo); }
.section-title .h2, .section-head .h2 { color: var(--gold-hi); text-shadow: var(--halo); }
.section-title .lead, .history .help { color: #e3d6b4; text-shadow: var(--halo); }
.guide-list b { color: var(--gold-hi); text-shadow: var(--halo); }
.guide-list li { color: #e8dcbc; text-shadow: var(--halo); border-top-color: rgba(216,180,106,0.4); }
.foot { position: relative; isolation: isolate; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 75% at 50% 45%, rgba(6,8,15,0.55), rgba(6,8,15,0) 75%); }
.foot-quote { background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 2px rgba(6,8,15,0.95)) drop-shadow(0 0 12px rgba(6,8,15,0.7)); }
.foot-small { color: #cbbf9f; text-shadow: var(--halo); }
.foot-brand { text-shadow: var(--halo); }
/* gallery names sit on a small plaque matching the one painted on each card, so they read on any part of the ceiling */
.gcard > span:last-child { justify-self: center; display: inline-flex; align-items: baseline; padding: 4px 14px 5px; border-radius: 6px; line-height: 1.4;
  background: linear-gradient(180deg, rgba(14,20,44,0.88), rgba(8,11,26,0.88)); border: 1px solid rgba(216,180,106,0.4); box-shadow: 0 4px 14px rgba(6,8,15,0.45); }
.gcard > span:last-child .gname, .gcard > span:last-child .gnum { text-shadow: none; }
@media (max-width: 640px) { .gcard > span:last-child { padding: 3px 9px 4px; } .gname { font-size: 14px; letter-spacing: 0.08em; } }
.gcard > span:last-child { white-space: nowrap; max-width: 100%; }
html[lang=en] .gname { font-size: 16px; letter-spacing: 0.02em; }
@media (max-width: 1100px) { html[lang=en] .gname { font-size: 14px; } html[lang=en] .gnum { font-size: 12px; } }
@media (max-width: 640px) { html[lang=en] .gname { font-size: 12px; letter-spacing: 0; } html[lang=en] .gnum { display: none; } html[lang=en] .gcard > span:last-child { padding: 3px 6px 4px; } }

/* ---------- tarot master reading (streamed) ---------- */
.summary.ai .ai-body { display: grid; gap: 0; }
.summary.ai h4 { margin: 26px 0 8px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-hi); }
.summary.ai h4:first-child { margin-top: 4px; }
.summary.ai .ai-body p { margin: 0 0 10px; font-size: 17px; line-height: 1.85; color: var(--ivory); }
.summary.ai ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.summary.ai li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.75; }
.summary.ai li::before { content: ""; position: absolute; left: 3px; top: 0.72em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gilt); }
/* the closing one-liner reads as the reading's signature */
.summary.ai h4:last-of-type + p { font-family: var(--display); font-size: 21px; color: var(--gold-hi); text-align: center; padding: 14px 0 4px; }
.ai-wait { color: var(--gold); font-size: 15px !important; letter-spacing: 0.12em; }
.ai-sk { display: block; height: 14px; margin: 10px 0; border-radius: 7px; background: linear-gradient(90deg, rgba(216,180,106,0.08), rgba(216,180,106,0.22), rgba(216,180,106,0.08)); background-size: 200% 100%; animation: ai-sk 1.6s linear infinite; }
.ai-sk.short { width: 60%; }
@keyframes ai-sk { to { background-position: -200% 0; } }
.ai-caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--gold); animation: ai-blink 1s steps(2) infinite; }
@keyframes ai-blink { 50% { opacity: 0; } }
.ai-note { margin: 22px 0 0; font-size: 12.5px; color: var(--muted); }
/* model output can contain any character, so body text uses the system CJK fonts instead of the subset webfonts */
.summary.ai .ai-body p, .summary.ai li { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
html[lang=en] .summary.ai .ai-body p, html[lang=en] .summary.ai li { font-family: var(--sans); }
.summary.ai h4:last-of-type + p { font-weight: 600; letter-spacing: 0.04em; }
html[lang=en] .summary.ai h4:last-of-type + p { font-family: var(--latin); font-size: 23px; font-style: italic; font-weight: 500; }

/* ================= mode title/subtitle stack =================
   every mode's text sits in the same grid cell; the box takes the tallest one, so switching
   ask / today / birth never moves the tabs and panel below (English 'ask' subtitle wraps to 2 lines) */
.mode-stack { display: grid; }
.mode-stack > [data-m] { grid-area: 1 / 1; visibility: hidden; }
.altar[data-mode="ask"] .mode-stack > [data-m="ask"],
.altar[data-mode="today"] .mode-stack > [data-m="today"],
.altar[data-mode="birth"] .mode-stack > [data-m="birth"] { visibility: visible; }
/* the toggle is drawn at text height; keep a comfortable invisible tap area around each button */
.lang button { position: relative; }
.lang button::after { content: ""; position: absolute; inset: -8px -3px; }
/* smallest phones: brand + "Meanings" + language toggle needed 327px at 320px wide (English) */
@media (max-width: 360px) {
  .nav { padding: 0 14px; }
  .brand-word { letter-spacing: 0.22em; }
  .nav-links { gap: 10px; }
}
/* smallest phones, English: the three mode tabs ("Ask the Cards / Card of the Day / Birth Cards") are ~250px of
   text and pushed the page 7px wider at 320px; tighten them and let them shrink instead of widening the page */
@media (max-width: 360px) {
  .modes:not(.modes-sm) .mode { flex: 0 1 auto; min-width: 0; }
  html[lang=en] .modes:not(.modes-sm) .mode { padding: 0 7px; font-size: 11.5px; letter-spacing: 0; }
  html[lang=en] .modes:not(.modes-sm) { gap: 2px; padding: 4px; }
}
/* smallest phones: keep the whole placeholder visible (16px is the floor: iOS zooms into inputs below it) */
@media (max-width: 360px) {
  .field input, html[lang=en] .field input { font-size: 16px; padding: 0 18px; height: 54px; }
}