/* The crest pages (server/crests.js): the home page, the quiz at /quiz, the result at /crest and /types.
   Dark like the rest of the front of the site; carved capitals (Cinzel) for titles and anything engraved. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/cinzel.woff2) format("woff2"); }
:root { --carve: "Cinzel", "Instrument Serif", Georgia, serif; --card: rgba(246, 239, 226, .045); }

/* ---------- home: a wall of symbols, and one big crest at a time ---------- */
.hero-crest { overflow: hidden; isolation: isolate; align-items: stretch; text-align: left; padding: calc(92px + env(safe-area-inset-top, 0px)) var(--pad-r) 56px var(--pad); }
/* the wall: rows of small seals drifting sideways, each on the silhouette of some house, dim, so the words stay readable */
.wall { position: absolute; left: 0; right: 0; top: -2%; bottom: -2%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; pointer-events: none; opacity: .3; }
.wall-row { --sz: 80px; flex: none; height: var(--sz); overflow: hidden; }
.wall-track { display: flex; width: max-content; animation: wall var(--d) linear var(--dl) infinite; }
.wall-row.rev .wall-track { animation-direction: reverse; }
@keyframes wall { to { transform: translateX(-50%); } }
.w { flex: none; width: var(--sz); height: var(--sz); margin-right: 20px; opacity: .5; }
.w svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w circle { fill: var(--a); stroke: var(--m); stroke-width: 2.6; }
.w.t { animation: twinkle 6s ease-in-out var(--dl) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.hero-crest::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 72% at 25% 52%, rgba(15, 16, 32, .94) 0%, rgba(15, 16, 32, .74) 52%, rgba(15, 16, 32, 0) 100%),
    radial-gradient(46% 62% at 76% 52%, rgba(15, 16, 32, .8) 0%, rgba(15, 16, 32, 0) 100%),
    linear-gradient(180deg, rgba(15, 16, 32, .85) 0, rgba(15, 16, 32, 0) 20%, rgba(15, 16, 32, 0) 80%, rgba(15, 16, 32, .9) 100%);
}
.drift { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.embers i {
  position: absolute; left: var(--x); bottom: -10px; width: var(--z); height: var(--z); border-radius: 50%;
  background: #ffd98a; box-shadow: 0 0 8px 2px rgba(255, 190, 90, .8); opacity: 0;
  animation: ember var(--d) ease-in var(--dl) infinite;
}
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 60% { opacity: .6; } 100% { transform: translate(40px, -90vh); opacity: 0; } }

/* the words on the left, the big crest on the right; one column on a phone */
.hero-in {
  position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "h show" "rest show";
  grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: clamp(24px, 5vw, 72px);
}
.hero-k { grid-area: k; align-self: end; margin: 0 0 18px; max-width: 34ch; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: var(--on-dark-soft); text-wrap: balance; }
.hero-crest h1 { grid-area: h; align-self: end; margin: 0 0 22px; max-width: none; font-size: clamp(52px, min(7.6vw, 12.5vh), 108px); line-height: .98; text-shadow: 0 0 40px rgba(15, 16, 32, .9); }
.hero-crest h1 em {
  background: linear-gradient(100deg, #e9c46a 0%, #fff3cf 40%, #e9c46a 55%, #b88a2a 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em;
  animation: shimmer 6s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(233, 196, 106, .45));
}
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hero-rest { grid-area: rest; align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
.hero-count { margin: 0 0 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.hero-count b { font-family: var(--carve); font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; letter-spacing: .04em; color: var(--glow-2); text-shadow: 0 0 28px rgba(233, 196, 106, .45); }
.hero-count span { font-size: clamp(16px, 2vw, 19px); color: var(--on-dark); }
.hero-sub { margin: 0 0 26px; max-width: 44ch; font-size: clamp(16px, 2vw, 18px); color: var(--on-dark-soft); text-wrap: pretty; }
.hero-crest .go { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(255, 220, 140, .5), 0 0 40px rgba(233, 196, 106, .55), 0 18px 50px -12px rgba(233, 196, 106, .6); }
.hero-note { margin: 16px 0 0; font-size: 13.5px; letter-spacing: .04em; color: var(--on-dark-soft); opacity: .85; }

/* the big crest: a window that one crest slides out of while the next slides in (public/show.js) */
.hero-show { grid-area: show; position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 400 / 440; }
.arcane-wrap { position: absolute; left: 50%; top: 50%; width: 124%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.arcane { width: 100%; height: 100%; display: block; opacity: .3; filter: drop-shadow(0 0 12px rgba(233, 196, 106, .35)); animation: breathe 6s ease-in-out infinite; }
.arcane g { transform-origin: 300px 300px; }
.ar-outer { animation: spin 140s linear infinite; }
.ar-mid { animation: spin 90s linear infinite reverse; }
.ar-inner { animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the crest itself (public/crest.js) ----------
   Each house's frame is its own shape. A point of light runs round its outline, a glint crosses its enamel now and
   then, the figure on the enamel turns, and the glow behind it rises and falls. Some frames turn whole (the wheel,
   the spiral), some only what lies behind them (a glory of rays, a ring of fires, the orbits). When a crest first
   appears its layers arrive one after another. Nothing here uses a filter. */
.crest .cr-spin, .crest .cr-in { transform-origin: 200px 220px; }
.crest .cr-cw { animation: spin 110s linear infinite; }
.crest .cr-ccw { animation: spin 170s linear infinite reverse; }
.crest .cr-turn { animation: spin 150s linear infinite; }
.crest .cr-run { animation: cr-run 9s linear infinite; }
.crest .cr-shine { animation: cr-shine 7s ease-in-out 1.6s infinite; }
.crest .cr-halo { animation: cr-glow 5.5s ease-in-out infinite; }
.crest .cr-lit { animation: cr-glow 5.5s ease-in-out -2.7s infinite; }
.crest .cr-pulse { animation: cr-glow 3.6s ease-in-out infinite; }
.crest .cr-drift { animation: cr-drift 9s ease-in-out infinite alternate; }
.crest .cr-drift.cr-rev { animation-direction: alternate-reverse; animation-duration: 12s; }
.crest .cr-in { animation: cr-in 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.crest .cr-in1 { --r: -50deg; --s: 1.14; }
.crest .cr-in2 { --r: 0deg; --s: .86; animation-delay: .1s; }
.crest .cr-in3 { --r: 100deg; --s: .7; animation-delay: .3s; }
.crest .cr-in4 { --r: 0deg; --s: .4; animation-delay: .5s; }
.crest .cr-in5 { --r: 0deg; --s: 1; animation-delay: .75s; animation-duration: .9s; }
@keyframes cr-in { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(var(--s, .8)); } }
@keyframes cr-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cr-run { to { stroke-dashoffset: -1; } }
@keyframes cr-shine { 0% { transform: translateX(0); } 34%, 100% { transform: translateX(760px); } }
@keyframes cr-drift { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .crest .cr-spin, .crest .cr-in, .crest .cr-halo, .crest .cr-lit, .crest .cr-pulse, .crest .cr-drift { animation: none; } .crest .cr-run, .crest .cr-shine { display: none; } }
@keyframes breathe { 0%, 100% { opacity: .26; } 50% { opacity: .4; } }
.show {
  position: absolute; inset: -4% -22%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.show-c { position: absolute; left: 15.3%; right: 15.3%; top: 4%; bottom: 4%; display: grid; place-items: center; }
.show-c .crest { width: 100%; height: auto; display: block; max-height: 100%; }
.show-c.first .crest { animation: forge 1.4s cubic-bezier(.2, .9, .3, 1) both; }

@media (max-width: 899px) {
  .hero-crest { padding-top: calc(84px + env(safe-area-inset-top, 0px)); text-align: center; }
  .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "show" "rest"; justify-items: center; }
  .hero-k { align-self: auto; margin-bottom: 12px; max-width: 30ch; }
  .hero-crest h1 { max-width: 12ch; font-size: clamp(46px, 12.5vw, 84px); margin-bottom: 14px; }
  .hero-show { width: min(66vw, 300px); margin: 0 0 24px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-show { width: 360px; }
  .hero-rest { align-items: center; }
  .hero-count { justify-content: center; }
  .hero-crest::before { background: radial-gradient(70% 80% at 50% 50%, rgba(15, 16, 32, .9) 0%, rgba(15, 16, 32, .6) 60%, rgba(15, 16, 32, .1) 100%), linear-gradient(180deg, rgba(15, 16, 32, .85) 0, rgba(15, 16, 32, 0) 16%, rgba(15, 16, 32, 0) 84%, rgba(15, 16, 32, .9) 100%); }
  .wall-row { --sz: 56px; }
  .wall { gap: 12px; }
  .w { margin-right: 14px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero-crest { padding-top: calc(78px + env(safe-area-inset-top, 0px)); padding-bottom: 32px; }
  .hero-crest h1 { font-size: clamp(46px, min(6.6vw, 11.5vh), 92px); margin-bottom: 14px; }
  .hero-sub { margin-bottom: 18px; }
  .hero-show { width: min(100%, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .wall-track, .w.t, .embers i { animation: none; }
  .embers { display: none; }
}

/* ---------- the quiz ---------- */
.quest { position: relative; z-index: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--pad-r) 72px var(--pad); }
.qs-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 35; height: 4px; background: rgba(246, 239, 226, .08); }
.qs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--glow), var(--glow-2)); transition: width .5s ease; }
.qs-card, .qs-forge { animation: qs-in .45s ease both; }
.qs-card.from-left { animation-name: qs-back; }
@keyframes qs-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes qs-back { from { opacity: 0; transform: translateX(-24px); } }
.qs-k { margin: 0 0 12px; display: flex; align-items: baseline; gap: 14px; font-family: var(--carve); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); }
.qs-k b { font-size: 12px; color: var(--on-dark-soft); letter-spacing: .1em; }
.qs-opt.soft { border-style: dashed; background: transparent; }
.qs-opt.soft b { font-weight: 500; color: var(--on-dark-soft); }
.qs-q { margin: 0 0 28px; font-family: var(--disp); font-weight: 400; font-size: clamp(32px, 5.4vw, 54px); line-height: 1.05; text-wrap: balance; }
.qs-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.qs-opts li { animation: qs-pop .4s ease calc(var(--k) * .03s) both; }
@keyframes qs-pop { from { opacity: 0; transform: translateY(8px); } }
.qs-opt {
  width: 100%; height: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line-dark); background: var(--card); color: var(--on-dark);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.qs-opt { -webkit-tap-highlight-color: transparent; }
.qs-opt:focus:not(:focus-visible) { outline: none; }
.qs-q:focus { outline: none; }
@media (hover: hover) { .qs-opt:hover { border-color: rgba(233, 196, 106, .45); background: rgba(233, 196, 106, .08); transform: translateY(-2px); } }
.qs-opt.picked { border-color: var(--glow); background: rgba(233, 196, 106, .2); }
.qs-opt b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.qs-opt small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--on-dark-soft); }
.qs-ic { flex: 0 0 auto; width: 46px; height: 46px; color: var(--glow); }
.qs-ic svg { width: 100%; height: 100%; display: block; }
.qs-hint { margin: -16px 0 18px; font-size: 15px; color: var(--on-dark-soft); }
.is-multi .qs-opt { padding-right: 48px; position: relative; }
.qs-tick { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1.5px solid var(--line-dark); transition: background .2s ease, border-color .2s ease; }
.qs-tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #1a1530; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); opacity: 0; }
.qs-opt.picked .qs-tick { background: var(--glow); border-color: var(--glow); }
.qs-opt.picked .qs-tick::after { opacity: 1; }
.qs-next { margin-top: 22px; cursor: pointer; border: 0; }
.qs-next:disabled { opacity: .4; cursor: default; box-shadow: none; }
.qs-back { margin-top: 24px; display: block; padding: 10px 4px; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--on-dark-soft); }
.qs-back:hover { color: var(--glow-2); }
.qs-forge { display: grid; justify-items: center; text-align: center; gap: 6px; }
.qs-crest { width: min(100%, 380px); }
.qs-crest svg { width: 100%; height: auto; display: block; animation: forge 1.6s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes forge { 0% { opacity: 0; transform: scale(.7) rotate(-4deg); filter: brightness(2.2) blur(6px); } 60% { opacity: 1; filter: brightness(1.4) blur(0); } 100% { transform: none; filter: none; } }
.qs-title { margin: 8px 0 22px; font-family: var(--carve); font-weight: 700; font-size: clamp(26px, 4.6vw, 44px); letter-spacing: .04em; color: var(--glow-2); animation: qs-in .6s ease 1s both; }
.qs-forge .go { animation: qs-in .6s ease 1.4s both; }
/* the drawing above each question (public/quest-art.js): an engraved plate that draws itself in.
   Background lines first, then the subject, then its details; then stars twinkle, flames flicker, clouds drift
   and the light breathes. Every line has pathLength="1", so a dash of 1 is the whole line. */
.qs-art { position: relative; margin: 0 0 22px; aspect-ratio: 640 / 220; border-radius: 18px; overflow: hidden; background: #0f1020; border: 1px solid rgba(233, 196, 106, .34); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.qs-art::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(233, 196, 106, .16); border-radius: 13px; pointer-events: none; }
@media (max-width: 599px) { .qs-art { aspect-ratio: 2 / 1; margin-bottom: 18px; border-radius: 14px; } .qs-art::after { inset: 5px; border-radius: 10px; } }
.qa { width: 100%; height: 100%; display: block; fill: none; stroke: var(--glow); stroke-linecap: round; stroke-linejoin: round; }
.qa .qa-sky { fill: url(#qa-sky); stroke: none; }
.qa .b, .qa .l1, .qa .l2, .qa .sf, .qa .gf, .qa .gfline { stroke-dasharray: 1 1; }
.qa .b { stroke-width: .9; stroke-opacity: .42; animation: qa-draw 1.6s ease both; }
.qa .l1 { stroke-width: 1.7; animation: qa-draw 1.7s cubic-bezier(.5, 0, .2, 1) .3s both; }
.qa .l2 { stroke-width: 1.15; stroke-opacity: .85; animation: qa-draw 1.5s ease .7s both; }
.qa .k { fill: #121331; }
.qa .h { fill: url(#qa-hh); stroke: none; animation: qa-fade 1.4s ease .5s both; }
.qa .hd { fill: url(#qa-hd); stroke: none; animation: qa-fade 1.4s ease .8s both; }
.qa .sf { fill: rgba(233, 196, 106, .18); }
.qa .gf { fill: url(#qa-gold); stroke: #f4d58d; }
.qa .sf, .qa .gf { animation: qa-draw 1.5s ease .4s both, qa-fill 1.2s ease 1.2s both; }
.qa .gfline { stroke: #f8dc96; stroke-width: 2.2; animation: qa-draw 1.2s ease 1s both; }
.qa .thick { stroke-width: 3.4; }
.qa .dash { stroke-dasharray: .008 .014; animation: qa-fade 1.5s ease .6s both; }
.qa .st { fill: #f4d58d; stroke: none; animation: qa-fade 1s ease both, qa-tw 4.5s ease-in-out var(--d, 0s) infinite; }
.qa .beam { fill: url(#qa-beam); stroke: none; animation: qa-fade 2s ease .9s both, qa-breathe 6s ease-in-out 3s infinite; }
.qa .bx { fill: url(#qa-beamx); }
.qa .glow { stroke: none; animation: qa-fade 1.6s ease .4s both, qa-breathe 5s ease-in-out 2s infinite; }
.qa .flk { animation: qa-fade 1s ease .8s both, qa-flk 2.4s ease-in-out 1.8s infinite; }
.qa .flick { transform-box: fill-box; transform-origin: 50% 100%; animation: qa-fill 1s ease 1s both, qa-flick 1.7s ease-in-out 2s infinite; }
.qa .rot { transform-box: fill-box; transform-origin: center; animation: qa-draw 1.6s ease both, spin 120s linear infinite; }
.qa .drift { animation: qa-draw 1.5s ease .6s both, qa-drift 18s ease-in-out 2s infinite alternate; }
.qa .rain { animation: qa-fade 1s ease .8s both, qa-rain 1.1s linear 1.8s infinite; }
.qa .smoke { animation: qa-fade 1.4s ease 1s both, qa-smoke 6s ease-in-out 2.4s infinite; }
.qa .flash { animation: qa-draw .6s ease 1.2s both, qa-flash 7s ease-in-out 2s infinite; }
@keyframes qa-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes qa-fade { from { opacity: 0; } }
@keyframes qa-fill { from { fill-opacity: 0; } }
@keyframes qa-tw { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes qa-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes qa-flk { 0%, 100% { opacity: 1; } 30% { opacity: .78; } 55% { opacity: .95; } 75% { opacity: .7; } }
@keyframes qa-flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.94, 1.08) skewX(2deg); } 60% { transform: scale(1.04, .95) skewX(-2deg); } }
@keyframes qa-drift { to { transform: translateX(14px); } }
@keyframes qa-rain { from { transform: translateY(-4px); opacity: .2; } 50% { opacity: 1; } to { transform: translateY(6px); opacity: .2; } }
@keyframes qa-smoke { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50% { transform: translate(4px, -5px); opacity: .4; } }
@keyframes qa-flash { 0%, 86%, 100% { opacity: .85; } 88% { opacity: .2; } 90% { opacity: 1; } 92% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .qa * { animation: none !important; } }
/* reading the answers: a figure draws itself while symbols flicker at its heart and settle (public/quest.js) */
.qs-calc { padding-top: 6px; }
.calc { position: relative; width: min(80vw, 340px); aspect-ratio: 1; margin: 6px 0 16px; }
.calc::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(233, 196, 106, .26), rgba(233, 196, 106, 0) 70%); animation: calc-glow 1.8s ease-in-out infinite; }
@keyframes calc-glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.calc-geo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--glow); stroke-width: 1.2; }
.cg-ticks { stroke-opacity: .5; stroke-width: 1; }
.cg-d { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: cg-draw 1.2s cubic-bezier(.6, 0, .3, 1) var(--dl, 0s) forwards; }
.cg-petal { stroke-opacity: .6; }
@keyframes cg-draw { to { stroke-dashoffset: 0; } }
.cg-spin { animation: spin 16s linear infinite; }
.cg-turn { animation: spin 22s linear infinite; }
.cg-back { animation: spin 14s linear infinite reverse; }
.cg-sweep { fill: rgba(233, 196, 106, .2); stroke: none; animation: spin 1.4s linear infinite; }
.cg-nodes circle { fill: var(--glow-2); stroke: none; opacity: .15; animation: cg-node 1.2s ease-in-out calc(var(--i) * .1s) infinite; }
@keyframes cg-node { 0%, 100% { opacity: .15; } 25% { opacity: 1; } }
.calc-core { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; }
.calc-core svg { width: 100%; height: 100%; display: block; }
.calc-core.lock { animation: calc-lock .8s cubic-bezier(.2, .9, .3, 1); }
@keyframes calc-lock { 0% { transform: scale(1.5); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
.qs-calc.done .calc { animation: calc-out .55s ease-in forwards; }
@keyframes calc-out { 40% { transform: scale(1.05); filter: brightness(1.8); } 100% { transform: scale(1.12); opacity: 0; filter: brightness(2.4); } }
.calc-step { margin: 0; min-height: 1.3em; font-family: var(--disp); font-size: clamp(22px, 3.6vw, 30px); line-height: 1.2; color: var(--on-dark); text-wrap: balance; }
.calc-step.in { animation: qs-pop .35s ease both; }
.calc-pct { margin: 8px 0 0; font-family: var(--carve); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--glow); }
.calc-pct b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .cg-d { stroke-dashoffset: 0; animation: none; }
  .cg-spin, .cg-turn, .cg-back, .cg-nodes circle, .calc::before, .calc-core.lock, .qs-calc.done .calc { animation: none; }
  .cg-sweep { display: none; }
}
/* the plain form, for when the script doesn't run */
.qs-form[hidden] { display: none; }
.qs-form { display: grid; gap: 18px; max-width: 640px; }
.qs-form h1 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: clamp(36px, 6vw, 56px); }
.qs-form label { display: grid; gap: 8px; font-size: 16px; font-weight: 600; }
.qs-form select { font: inherit; font-weight: 400; color: var(--on-dark); background: #1b1d3e; border: 1.5px solid var(--line-dark); border-radius: 12px; padding: 12px; }
.qs-form .go { justify-self: start; margin-top: 8px; }

/* ---------- the result ---------- */
.res { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--pad-r) 72px var(--pad); }
.res-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 760px) { .res-top { grid-template-columns: 1fr; text-align: center; } .res-act { justify-content: center; } }
.res-crest { width: 100%; max-width: 480px; justify-self: center; }
.res-crest svg { width: 100%; height: auto; display: block; animation: forge 1.4s cubic-bezier(.2, .9, .3, 1) both; }
.res-k { margin: 0 0 6px; font-family: var(--carve); font-size: 14px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark-soft); }
.res-title { margin: 0; font-family: var(--carve); font-weight: 700; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.04; letter-spacing: .02em; color: var(--glow-2); text-wrap: balance; }
.res-code { margin: 12px 0 0; font-family: var(--carve); font-size: 22px; letter-spacing: .34em; color: var(--on-dark); }
.res-house { margin: 18px 0 0; display: grid; gap: 2px; }
.res-house b { font-family: var(--disp); font-weight: 400; font-size: clamp(24px, 3.4vw, 32px); }
.res-house span { color: var(--on-dark-soft); }
.res-act { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.res-act .go { cursor: pointer; border: 0; }
.res-again { font-weight: 600; color: var(--glow-2); text-underline-offset: 4px; }
.res-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--on-dark-soft); word-break: break-all; }
.wings { margin-top: clamp(40px, 7vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.wing { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-dark); }
.wing-ic { width: 64px; height: 64px; display: block; }
.wing-ic svg { width: 100%; height: 100%; display: block; }
.crown-ic { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 14px; }
.crown-ic b { width: 11px; height: 24px; background: linear-gradient(180deg, var(--glow-2), #9a7424); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wing-k { margin: 0 0 4px; font-family: var(--carve); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); }
.wing h3 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1.1; }
.wing p { margin: 0; color: var(--on-dark-soft); }
.wing p + p { margin-top: 8px; }
.wing .wing-s { font-size: 14px; color: var(--glow-2); }
.wing-t { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.wing-t b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--glow); }
.types h2 { margin: 0 0 14px; font-family: var(--disp); font-weight: 400; font-size: clamp(30px, 4.4vw, 40px); }
.res .xgrid a, .types .xgrid a { background: var(--card); border: 1px solid var(--line-dark); }
.res-all { margin-top: 34px; text-align: center; }
.res-all a { font-weight: 600; color: var(--glow-2); text-underline-offset: 4px; }

/* ---------- the result: your house ---------- */
.sec-k { margin: 0 0 8px; font-family: var(--carve); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--glow); }
.house, .map { margin-top: clamp(48px, 8vw, 88px); }
.house { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .house { grid-template-columns: minmax(0, 1fr); } }
.house h2, .map h2 { margin: 0 0 16px; font-family: var(--disp); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1; }
.house-lede { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(19px, 2.3vw, 22px); line-height: 1.5; color: var(--on-dark); text-wrap: pretty; }
.house-kind { margin: 0 0 8px; color: var(--glow-2); }
.house-kind b { font-weight: 700; }
.house h3, .nb h3 { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.hold { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hold li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--line-dark); color: var(--on-dark); }
.hold li:last-child { border-bottom: 1px solid var(--line-dark); }
.hold li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 9px; height: 9px; background: var(--glow); transform: rotate(45deg); opacity: .85; }
.house-side { display: grid; gap: 14px; align-content: start; }
.sign { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid rgba(233, 196, 106, .3); }
.sign-ic svg { width: 88px; height: 88px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.sign p { margin: 0; color: var(--on-dark-soft); }
.sign .sec-k { margin-bottom: 6px; }
.facts { margin: 0; display: grid; gap: 0; border-radius: 22px; background: var(--card); border: 1px solid var(--line-dark); }
.facts div { padding: 16px 18px; }
.facts div + div { border-top: 1px solid var(--line-dark); }
.facts dt { margin: 0 0 4px; font-family: var(--carve); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); }
.facts dd { margin: 0; color: var(--on-dark-soft); font-size: 16px; }
.house-names, .house-alt { margin: 0; font-size: 15px; color: var(--on-dark-soft); }
.house-names span { display: block; font-family: var(--carve); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); margin-bottom: 2px; }
.house-alt { color: var(--glow-2); }

/* ---------- the result: the map ---------- */
.map-lede { margin: 0 0 22px; max-width: 70ch; color: var(--on-dark-soft); }
.map-fig { margin: 0; border-radius: 26px; border: 1px solid var(--line-dark); background: radial-gradient(120% 100% at 50% 0%, #1b1e46 0%, #12142b 70%); padding: 10px; }
.map-tall { display: none; }
@media (max-width: 640px) { .map-wide { display: none; } .map-tall { display: block; } .map-fig { padding: 4px; border-radius: 20px; } }
.m-svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-reg { font-family: var(--carve); font-size: 26px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .17; pointer-events: none; }
.m-mini-bg { fill: rgba(10, 11, 26, .78); stroke: rgba(246, 239, 226, .22); }
.m-mini-view { fill: rgba(246, 239, 226, .08); stroke: rgba(246, 239, 226, .7); stroke-width: 1; }
.m-mini-you { fill: var(--glow); stroke: #fff; stroke-width: 1; }
.map-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--on-dark-soft); }
.map-key li { display: inline-flex; align-items: center; gap: 7px; }
.map-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.m-line { stroke: var(--glow); stroke-opacity: .38; stroke-dasharray: 3 5; }
.m-lead { stroke: var(--on-dark); stroke-opacity: .35; stroke-width: 1; }
.m-dot { stroke: transparent; stroke-width: 12px; cursor: pointer; transition: opacity .5s ease calc(var(--i, 0) * 28ms); }
.m-dot.on { stroke: var(--ink); stroke-width: 2px; }
.m-dot:hover { stroke: #fff; stroke-width: 2px; }
.m-lab { font-family: var(--ui); font-weight: 600; fill: var(--on-dark); paint-order: stroke; stroke: #101226; stroke-width: 4.5px; stroke-linejoin: round; transition: opacity .6s ease .3s; }
.m-me { font-family: var(--carve); font-weight: 700; letter-spacing: .06em; fill: var(--glow-2); }
.m-pulse { fill: none; stroke: var(--glow); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: m-pulse 2.8s ease-out infinite; }
@keyframes m-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.map.pre .m-dot, .map.pre .m-lab, .map.pre .m-line { opacity: 0; }
.m-line { transition: opacity .6s ease .5s; }
.map-cap { min-height: 1.5em; margin: 8px 14px 6px; font-size: 14.5px; color: var(--on-dark-soft); }
.map-cap.on { color: var(--glow-2); }
.nb { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .nb { grid-template-columns: minmax(0, 1fr); } }
.nb h3 { margin-top: 0; }
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: nb; }
.nb-list li { counter-increment: nb; position: relative; padding: 14px 16px 14px 52px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-dark); }
.nb-list li::before { content: counter(nb); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--carve); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--glow); }
.nb-list.far li::before { background: rgba(246, 239, 226, .22); color: var(--on-dark); }
.nb-n { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.nb-n b { font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1.15; }
.nb-n span { font-size: 14px; color: var(--on-dark-soft); }
.nb-w { margin: 6px 0 0; display: grid; gap: 2px; font-size: 14.5px; color: var(--on-dark-soft); }
.nb-w em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); margin-right: 6px; }
.map-how { margin-top: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-dark); }
.map-how summary { cursor: pointer; padding: 14px 18px; font-weight: 600; }
.map-how p { margin: 0; padding: 0 18px 12px; max-width: 76ch; color: var(--on-dark-soft); font-size: 15.5px; }
.map-dims { width: calc(100% - 36px); margin: 4px 18px 18px; border-collapse: collapse; font-size: 14px; }
.map-dims th, .map-dims td { padding: 7px 10px 7px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line-dark); }
.map-dims thead th { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); border-top: 0; }
.map-dims tbody th { font-weight: 600; white-space: nowrap; }
.map-dims td { color: var(--on-dark-soft); }
@media (max-width: 640px) { .map-dims thead { display: none; } .map-dims tr { display: block; padding: 8px 0; border-top: 1px solid var(--line-dark); } .map-dims th, .map-dims td { display: block; padding: 0; border: 0; } .map-dims td + td::before { content: "to "; } }
@media (prefers-reduced-motion: reduce) { .m-pulse { animation: none; } .map.pre .m-dot, .map.pre .m-lab, .map.pre .m-line { opacity: 1; } }

/* ---------- /types ---------- */
.types { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--pad-r) 72px var(--pad); }
.types > h1 { margin: 0 0 18px; font-family: var(--disp); font-weight: 400; font-size: clamp(48px, 9vw, 96px); line-height: .98; }
.types > h1 em { font-style: italic; color: var(--glow-2); }
.types-lede { margin: 0 0 28px; max-width: 60ch; font-size: 18px; color: var(--on-dark-soft); }
.types > h2 { margin-top: 64px; }
.types-sub { margin: -6px 0 18px; color: var(--on-dark-soft); }
.type-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.type { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-dark); }
.type-ic { display: flex; gap: 6px; margin-bottom: 8px; }
.type-ic svg { width: 64px; height: 64px; display: block; }
.type b { font-family: var(--carve); font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--glow-2); }
.type-n { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); }
.type-d { margin-top: 6px; font-size: 14.5px; color: var(--on-dark-soft); }
.houses .type-ic svg { width: 56px; height: 56px; }

/* ---------- /how ---------- */
.how-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 28px; margin: 8px 0 12px; }
.how-rules p { margin: 0; color: var(--on-dark-soft); }
.how-rules b { color: var(--glow-2); }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.how-q { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-dark); min-width: 0; }
.how-when { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.how-text { margin: 0 0 4px; font-family: var(--disp); font-size: 22px; line-height: 1.2; }
.how-text span { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.how-opts { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.how-opts th { width: 38%; padding: 8px 12px 8px 0; text-align: left; font-weight: 600; vertical-align: top; border-top: 1px solid var(--line-dark); }
.how-opts td { padding: 8px 0; vertical-align: top; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.how-opts td span { padding: 2px 8px; border-radius: 999px; font-size: 12.5px; background: rgba(246, 239, 226, .07); }
.how-opts .e-g { color: #c8b8ff; } .how-opts .e-t { color: var(--glow-2); } .how-opts .e-f { color: #8fe0d6; } .how-opts .e-p { color: #f4a8bf; } .how-opts .e-d { color: var(--on-dark-soft); }
@media (max-width: 640px) { .how-opts th, .how-opts td { display: block; width: auto; } .how-opts td { border-top: 0; padding-top: 0; } }
.how-sample { margin-bottom: 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-dark); }
.how-sample summary { cursor: pointer; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.how-sample summary b { font-weight: 600; }
.how-sample summary span { grid-column: 1; font-size: 14px; color: var(--glow-2); }
.how-sample summary em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 13px; color: var(--on-dark-soft); }
.how-sample ol { margin: 0; padding: 0 18px 16px 40px; display: grid; gap: 6px; font-size: 14px; }
.how-sample li span { color: var(--on-dark-soft); }
.how-sample li b { display: block; font-weight: 600; }

/* ---------- the email step before the results ---------- */
.qs-gate { max-width: 640px; margin: 0 auto; }
.qs-gate .qs-crest { width: min(70%, 260px); }
.qs-gate .go { animation: none; }
.qs-crest.locked svg { animation: none; filter: blur(12px) saturate(.7) brightness(.75); }
.qs-crest.locked svg * { animation: none; }
.qs-gate .qs-q { text-align: center; margin: 18px 0 18px; }
.qs-mail { width: 100%; display: grid; gap: 10px; }
.qs-row { display: flex; gap: 10px; flex-wrap: wrap; }
.qs-row input { flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--line-dark); background: rgba(0, 0, 0, .3); color: var(--on-dark); font: inherit; font-size: 17px; }
.qs-row input:focus { outline: none; border-color: var(--glow); }
.qs-row .go { cursor: pointer; border: 0; }
.qs-row .go:disabled { opacity: .6; cursor: wait; }
.qs-consent { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--on-dark-soft); text-align: left; }
.qs-msg { min-height: 1.4em; margin: 0; font-size: 14.5px; color: var(--glow-2); }
.qs-test { position: fixed; left: max(14px, env(safe-area-inset-left, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 36; margin: 0; padding: 8px 14px; border-radius: 999px; background: #3a2a10; border: 1px solid var(--glow); font-size: 13px; color: var(--glow-2); }
.qs-test a { color: var(--on-dark); margin-left: 6px; }
.qs-form .qs-consent { font-weight: 400; }
.qs-form input[type=email] { font: inherit; color: var(--on-dark); background: #1b1d3e; border: 1.5px solid var(--line-dark); border-radius: 12px; padding: 12px; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The example map on the home page */
.home-map { position: relative; padding: clamp(48px, 8vw, 96px) 0; background: #0f1020; }
.hm-in { width: min(100% - 32px, 1000px); margin: 0 auto; }
.home-map h2 { margin: 0 0 14px; font-family: var(--disp); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
.home-map h2 em { font-style: italic; color: var(--glow-2); }
.hm-near { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.home-map .go { margin-top: 28px; }