/* ==========================================================================
   Krignal — surrealism edition
   Magritte's sky: clear cerulean blue and painted cumulus clouds, not a
   midnight dream. Flat cut-paper collage, not frosted glass: solid
   ink-bordered shapes, hard offset shadows, hand-drawn surreal
   illustrations (a door onto a starfield, a key and a keyhole) standing
   in for photography, and a red thread running through the page as the
   thing that ties two strangers together. A watching eye recurs for
   "Krignal keeps looking." Navy and gold read as a professional network,
   not a fairground — the surrealism is in the imagery, not the palette.
   ========================================================================== */

.theme-surreal {
  --void:       #0a3157;
  --void-2:     #0e3d69;
  --dusk:       #12497c;
  --dusk-2:     #1c5f9a;
  --horizon-a:  #2f7fbe;
  --horizon-b:  #bfe3ff;
  --coral:      #ff7a59;
  --coral-lt:   #ffb199;
  --cyan:       #7fe0d6;
  --cyan-dk:    #3fae9e;
  --violet:     #3f8dcf;
  --violet-lt:  #cfe8ff;
  --thread:     #e0483a;

  /* A brighter, clearer daytime blue for the sky sections (hero, the
     problem) — distinct from the deeper navy --void/--dusk used for the
     other dark sections, so the page reads as day and dusk, not one flat
     colour repeated. */
  --sky-a: #1668b0;
  --sky-b: #3d8dd4;
  --sky-c: #7fc4f2;

  --gold:       #dfbf73;
  --gold-lt:    #f0dcab;
  --gold-dk:    #9c7a26;

  --paper:      #eef6fc;
  --paper-2:    #dcebf8;
  --paper-3:    #c7ddf0;
  --ink:        #0d2136;
  --ink-2:      #33526b;
  --ink-3:      #6d8aa3;
  --ink-inv:    #eef6fc;
  --night:      var(--void);
  --night-2:    var(--dusk);
  --line:       rgba(238, 246, 252, .22);
  --line-inv:   rgba(238, 246, 252, .22);

  --hill-0: var(--cyan-dk);
  --hill-1: var(--cyan);
  --hill-2: var(--coral);

  /* Hard, flat, offset shadows — no blur radius, no translucency. */
  --hard-lt: 7px 7px 0 rgba(13, 33, 54, .9);
  --hard-dk: 7px 7px 0 rgba(0, 0, 0, .55);

  /* One painted cumulus cloud, reused everywhere at different sizes —
     Magritte's sky, not a dream haze. */
  --cloud-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cellipse cx='60' cy='65' rx='55' ry='32' fill='%23fff'/%3E%3Cellipse cx='115' cy='55' rx='45' ry='38' fill='%23fff'/%3E%3Cellipse cx='150' cy='68' rx='40' ry='28' fill='%23fff'/%3E%3Cellipse cx='90' cy='75' rx='60' ry='25' fill='%23fff'/%3E%3C/svg%3E");

  --r: 10px; --r-lg: 14px; --r-sm: 6px;
  background: var(--void);
}

.theme-surreal body { background: var(--void); }

/* ---------- Dream texture --------------------------------------------- */
.theme-surreal body {
  background-image:
    radial-gradient(52% 38% at 12% 6%, rgba(63, 141, 207, .32), transparent 68%),
    radial-gradient(46% 34% at 92% 14%, rgba(255, 122, 89, .16), transparent 66%),
    radial-gradient(60% 46% at 50% 100%, rgba(63, 174, 158, .12), transparent 70%);
  background-attachment: fixed, fixed, fixed;
}
.theme-surreal .grain-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ---------- Eye motif ---------------------------------------------------
   Krignal "keeps looking" — a recurring flat-painted almond eye. The pupil
   drifts toward the pointer via surreal.js; otherwise it just blinks.    */
.eye { --eye-w: 64px; width: var(--eye-w); aspect-ratio: 1.9; position: relative; }
.eye svg { width: 100%; height: 100%; overflow: visible; }
.eye__lid { transform-origin: center; animation: blink-slow 7s ease-in-out infinite; }
.eye__pupil { transition: transform .5s var(--ease); }
@keyframes blink-slow {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.06); }
}

/* ---------- Illustrated scenes (replace photography) ---------------------
   Shared flat-fill tokens for the hand-drawn hero door and privacy key.  */
.theme-surreal .scene__shadow { fill: rgba(0, 0, 0, .4); }
.theme-surreal .scene__frame { fill: var(--dusk-2); stroke: var(--gold-lt); stroke-width: 3; }
.theme-surreal .scene__stars circle { fill: #fff; }
.theme-surreal .scene__knob { fill: var(--gold); }
.theme-surreal .scene__thread { fill: none; stroke: var(--thread); stroke-width: 2.4; stroke-linecap: round; }
.theme-surreal .scene__orb { fill: var(--cyan); opacity: .9; }
.theme-surreal .scene__orb--sm { fill: var(--coral-lt); opacity: .85; }
/* the other end of the thread — where the door's opportunity is waiting
   to be tied to someone. Same device as the "YOU" node further down the
   page, so the two read as one idea. */
.theme-surreal .scene__node { fill: var(--gold-lt); }
.theme-surreal .scene__node-ring { fill: none; stroke: var(--gold-lt); stroke-width: 2.2; opacity: .8; animation: node-pulse 2.6s ease-in-out infinite; transform-origin: 48px 436px; }
@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.35); opacity: .15; }
}
.theme-surreal .scene__panel { fill: var(--dusk-2); stroke: var(--gold-lt); stroke-width: 3; }
.theme-surreal .scene__hole { fill: var(--void); }
.theme-surreal .scene__keyring { fill: none; stroke: var(--gold); stroke-width: 7; }
.theme-surreal .scene__keyshaft,
.theme-surreal .scene__keytooth { fill: var(--gold); }

/* ---------- Header -------------------------------------------------------
   Same mechanics as main.css, recoloured — opaque, no frosting.          */
.theme-surreal .hdr.is-stuck {
  background: var(--void);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: var(--line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}
.theme-surreal .hdr.is-stuck .logo__word,
.theme-surreal .hdr.is-stuck .nav a,
.theme-surreal .hdr.is-stuck .hdr__login { color: var(--ink-inv); }
.theme-surreal .hdr.is-stuck .nav a:hover,
.theme-surreal .hdr.is-stuck .hdr__login:hover { color: var(--gold-lt); }
.theme-surreal .hdr.is-stuck .burger { border-color: var(--line-inv); }
.theme-surreal .hdr.is-stuck .burger span,
.theme-surreal .hdr.is-stuck .burger span::before,
.theme-surreal .hdr.is-stuck .burger span::after { background: var(--ink-inv); }
.theme-surreal .mnav { background: var(--void); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); }
.theme-surreal .mnav a { color: var(--ink-inv); border-bottom-color: var(--line); }
.theme-surreal .verswitch {
  display: inline-flex; align-items: center; margin-left: auto; flex: none;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 3px;
  border: 2px solid rgba(238, 246, 252, .3); color: rgba(238, 246, 252, .75);
  transition: border-color .25s, color .25s;
}
.theme-surreal .verswitch:hover { border-color: var(--gold-lt); color: var(--gold-lt); }
.theme-surreal .hdr__cta { margin-left: 14px; }

/* The extra "Versions" link makes the header nav wider than the base
   design accounted for, so give this theme its own — slightly earlier —
   point to collapse to the burger, and stop individual nav words from
   wrapping onto their own lines in the gap before that breakpoint hits. */
.theme-surreal .nav a,
.theme-surreal .hdr__login,
.theme-surreal .verswitch,
.theme-surreal .logo__word { white-space: nowrap; }
@media (max-width: 1040px) {
  .theme-surreal .nav,
  .theme-surreal .hdr__cta,
  .theme-surreal .verswitch { display: none; }
  .theme-surreal .burger { display: flex; }
}

.theme-surreal .btn--ghost {
  background: transparent; border: 2px solid rgba(238, 246, 252, .4); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.theme-surreal .btn--ghost:hover { background: rgba(238, 246, 252, .08); border-color: var(--gold-lt); }
.theme-surreal .btn--gold {
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(10, 49, 87, .55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-surreal .btn--gold:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(10, 49, 87, .55); }
.theme-surreal .btn--ghost-inv { border: 2px solid rgba(238, 246, 252, .4); }
.theme-surreal .btn--ghost-inv:hover { border-color: var(--gold-lt); background: rgba(238, 246, 252, .08); }

/* ---------- Hero -----------------------------------------------------
   No photograph: a single door standing open on a starfield, a red thread
   trailing from its handle — "the right match may already be out there." */
.theme-surreal .hero {
  background: linear-gradient(195deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%);
  overflow: visible;
}
.theme-surreal .hero::before,
.theme-surreal .hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-image: var(--cloud-svg); background-size: contain; background-repeat: no-repeat;
}
.theme-surreal .hero::before {
  width: 200px; height: 100px; right: 1%; top: 3%;
  animation: drift-a 18s ease-in-out infinite;
}
.theme-surreal .hero::after {
  width: 130px; height: 65px; right: 8%; bottom: 3%; opacity: .9;
  animation: drift-b 14s ease-in-out infinite;
}
@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 8px); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -6px); } }

.theme-surreal .hero__scene {
  position: absolute; inset: auto 4% auto auto; top: 8%; z-index: 0;
  width: min(40vw, 360px);
}
.theme-surreal .hero__scene svg { width: 100%; height: auto; filter: drop-shadow(14px 18px 0 rgba(0, 0, 0, .35)); }
.theme-surreal .hero__in { max-width: min(600px, 54%); }

@media (max-width: 900px) {
  .theme-surreal .hero__scene { position: relative; inset: auto; width: min(58vw, 280px); margin: 0 auto 28px; top: auto; }
  .theme-surreal .hero__in { max-width: 100%; }
  /* the stacked mobile layout leaves no safe margin for side clouds */
  .theme-surreal .hero::before,
  .theme-surreal .hero::after { display: none; }
}

.theme-surreal .hero__eye { position: absolute; left: 6%; top: 20%; z-index: 1; opacity: .85; }
.theme-surreal .hero__eye .eye { --eye-w: 84px; }

.theme-surreal .hero__badge {
  background: var(--void-2); border: 2px solid rgba(207, 232, 255, .4); color: var(--violet-lt);
  backdrop-filter: none;
}
.theme-surreal .rot__line em { color: var(--coral-lt); font-style: italic; }
.theme-surreal .hero__word {
  /* "Krignal" cannot wrap, so the box must shrink-to-fit the glyphs
     (max-width:none + width:max-content) — otherwise the max-width the
     base stylesheet puts on this element clips the gradient fill (the
     background-clip:text paint never extends past the box) and the tail
     of the word goes invisible instead of just overflowing. */
  max-width: none; width: max-content;
  background: linear-gradient(100deg, #fff 20%, var(--gold-lt) 50%, var(--violet-lt) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-surreal .hero__tag em { color: var(--cyan); }
.theme-surreal .dots button[aria-current="true"] { background: var(--coral-lt); }
.theme-surreal .cyc {
  background: var(--dusk-2); border: 2px solid rgba(207, 232, 255, .3);
  backdrop-filter: none; border-radius: var(--r-sm);
}
.theme-surreal .cyc__k svg { color: var(--cyan); }

/* ---------- Section rhythm ---------------------------------------------
   Day sky, deep dusk, cloud-white paper — the page cycles through the
   sky rather than repeating one dream-purple everywhere.                */
.theme-surreal .problem   { background: linear-gradient(200deg, var(--sky-b) 0%, var(--sky-c) 100%); position: relative; overflow: hidden; }
.theme-surreal .benefits  { background: linear-gradient(180deg, var(--paper), var(--paper-3)); }
.theme-surreal .how       { background: var(--dusk); color: var(--ink-inv); }
.theme-surreal .how .h-sec,
.theme-surreal .how .step__txt h3 { color: #fff; }
.theme-surreal .how .step__txt p,
.theme-surreal .how .lede { color: rgba(238, 246, 252, .74); }
.theme-surreal .how .step__num { color: var(--coral-lt); opacity: .8; }
.theme-surreal .how .step__txt p .accent { color: #fff; }
.theme-surreal .how .eyebrow { color: rgba(238, 246, 252, .55); }
.theme-surreal .how .eyebrow::before { background: var(--gold-lt); }
.theme-surreal .seg--ind { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.theme-surreal .seg--org { background: linear-gradient(165deg, var(--void) 0%, var(--dusk) 100%); }
.theme-surreal .events   { background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.theme-surreal .faq      { background: var(--paper); }
.theme-surreal .closer   { background: radial-gradient(80% 60% at 50% 20%, var(--dusk) 0%, var(--void) 68%); }
.theme-surreal .ftr      { background: var(--void); }
.theme-surreal .tv       { background: linear-gradient(165deg, var(--void), #081c30); }
.theme-surreal .privacy  { background: var(--void); }

/* clouds low in the margin, clear of both the centred heading above and
   the note cards below — mostly off-canvas so they never collide with
   either regardless of how tall the card row runs. */
.theme-surreal .problem::before,
.theme-surreal .problem::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-image: var(--cloud-svg); background-size: contain; background-repeat: no-repeat;
}
.theme-surreal .problem::before { width: 170px; height: 85px; left: -6%; bottom: 4%; animation: drift-a 20s ease-in-out infinite; }
.theme-surreal .problem::after  { width: 130px; height: 65px; right: -4%; bottom: 2%; opacity: .85; animation: drift-b 16s ease-in-out infinite; }
.theme-surreal .problem .wrap { position: relative; z-index: 1; }

.theme-surreal .problem__head .h-sec,
.theme-surreal .problem .eyebrow--plain { color: #fff; }
.theme-surreal .problem__head .h-sec { max-width: 26ch; text-shadow: 0 2px 18px rgba(10, 49, 87, .3); }
.theme-surreal .problem__head .h-sec .mark,
.theme-surreal .seg .h-sec .mark,
.theme-surreal .faq .h-sec .mark { white-space: normal; }
.theme-surreal .mark::after { display: none; }
.theme-surreal .mark { color: var(--gold-lt); }
.theme-surreal .faq .mark { color: var(--coral); }
.theme-surreal .problem .lede { color: rgba(255, 255, 255, .82); }
.theme-surreal .problem .eyebrow--plain::before { display: inline-block; background: var(--gold-lt); }

/* ---------- Reverie (replaces the quote marquee) ------------------------
   Five notes, not twelve — since they no longer scroll, a short, well-
   chosen set reads better than a wall of static cards. Pinned to the sky,
   flat colour, thick ink border, hard offset shadow, each tilted.       */
.reverie {
  margin-top: clamp(40px, 6vw, 72px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 26px 22px;
}
.reverie__card {
  position: relative;
  flex: 1 1 260px; max-width: 320px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 26px 24px 22px;
  box-shadow: var(--hard-lt);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.reverie__card:nth-child(5n+1) { transform: rotate(-1.6deg); }
.reverie__card:nth-child(5n+2) { transform: rotate(1.2deg); margin-top: 22px; }
.reverie__card:nth-child(5n+3) { transform: rotate(-1deg); }
.reverie__card:nth-child(5n+4) { transform: rotate(1.8deg); margin-top: -10px; }
.reverie__card:nth-child(5n+5) { transform: rotate(-1.3deg); }
.reverie__card:hover { transform: translate(-3px, -3px) rotate(0deg); box-shadow: 10px 10px 0 rgba(13, 33, 54, .9); }
.reverie__who { display: flex; align-items: center; gap: 10px; }
.reverie__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--serif); font-size: .82rem; font-weight: 600; color: var(--ink);
  background: var(--gold); border: 2px solid var(--ink);
}
.reverie__card:nth-child(3n+2) .reverie__av { background: var(--cyan); }
.reverie__card:nth-child(3n) .reverie__av { background: var(--coral-lt); }
.reverie__role { font-size: .64rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); }
.reverie__q { margin-top: 14px; font-family: var(--serif); font-size: 1.03rem; line-height: 1.48; color: var(--ink); }

@media (max-width: 560px) {
  .reverie__card { flex-basis: 100%; max-width: 380px; margin-top: 0 !important; }
}

/* ---------- Benefits: pinned specimen cards ------------------------------ */
.theme-surreal .bgrid { position: relative; gap: 26px 18px; }
.theme-surreal .bcard {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: var(--hard-lt);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-surreal .bcard:nth-child(odd) { transform: rotate(-1.2deg); }
.theme-surreal .bcard:nth-child(even) { transform: rotate(1.3deg); }
.theme-surreal .bcard:hover { transform: translate(-3px, -3px) rotate(0deg); box-shadow: 10px 10px 0 rgba(13, 33, 54, .9); }
.theme-surreal .bcard::after { display: none; }
.theme-surreal .bcard__ico {
  border-radius: 50%; background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink);
}

/* ---------- How it works: blueprint panels + a pinboard of red thread --- */
.theme-surreal .panel {
  background: var(--dusk-2);
  border: 2px dashed rgba(238, 246, 252, .4);
  border-radius: 12px;
  box-shadow: none;
}
.theme-surreal .panel::before { display: none; }
.theme-surreal .panel__cap { color: rgba(238, 246, 252, .5); }
.theme-surreal .map__h { color: rgba(238, 246, 252, .5); }
.theme-surreal .chip {
  position: relative;
  background: var(--void-2); border: 2px solid rgba(238, 246, 252, .3); color: var(--ink-inv);
  box-shadow: none; border-radius: 6px;
}
.theme-surreal .chip--gold { border-color: var(--gold); }
.theme-surreal .chip__tag { background: rgba(238, 246, 252, .12); color: rgba(238, 246, 252, .6); }
.theme-surreal .chip__d { background: var(--cyan); }
.theme-surreal .chip--gold .chip__d { background: var(--gold); }
/* a thread stub reaching from each chip toward YOU, like pins on a board */
.theme-surreal .map__col .chip::after {
  content: ""; position: absolute; top: 50%; right: -18px; width: 16px; height: 2px;
  background: var(--thread); z-index: 1;
}
.theme-surreal .map__col--r .chip::after { right: auto; left: -18px; }
@media (max-width: 620px) { .theme-surreal .map__col .chip::after { display: none; } }

.theme-surreal .you {
  background: var(--gold); border: 3px solid var(--ink); color: var(--ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .45);
  border-radius: 50%;
}
.theme-surreal .you::after { display: none; }

.theme-surreal .mini {
  background: var(--void-2); border: 2px solid rgba(238, 246, 252, .3);
  border-radius: 10px; box-shadow: none; color: var(--ink-inv);
}
.theme-surreal .mini:nth-child(1) { transform: rotate(-1deg); }
.theme-surreal .mini:nth-child(2) { transform: rotate(1deg); }
.theme-surreal .mini__k,
.theme-surreal .map__h { color: rgba(238, 246, 252, .55); }
.theme-surreal .mini__badge { background: rgba(238, 246, 252, .12); color: var(--cyan); }
.theme-surreal .mini__badge .d { background: var(--cyan); }
.theme-surreal .mini__title { color: #fff; }
.theme-surreal .mini__body { color: rgba(238, 246, 252, .78); }
.theme-surreal .mini__foot { border-top-color: rgba(238, 246, 252, .25); color: rgba(238, 246, 252, .5); }
.theme-surreal .step-a { background: var(--gold); color: var(--ink); }
.theme-surreal .caret { background: var(--coral-lt); }

/* Step 3: the dial becomes a flat-painted iris, pips are stars in orbit */
.theme-surreal .radar__dial {
  background:
    radial-gradient(circle at 46% 42%, var(--void) 0 14%, transparent 15%),
    conic-gradient(from 0deg, var(--dusk-2), var(--horizon-b), var(--cyan-dk), var(--dusk-2));
  border: 2px solid rgba(238, 246, 252, .35);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .4);
}
.theme-surreal .radar__dial::before,
.theme-surreal .radar__dial::after { border-color: rgba(238, 246, 252, .22); }
.theme-surreal .radar__sweep { background: conic-gradient(from 0deg, rgba(255, 122, 89, .65), rgba(255, 122, 89, 0) 42%); }
.theme-surreal .radar__pip { background: var(--gold-lt); box-shadow: 0 0 8px rgba(240, 220, 171, .9); }
.theme-surreal .radar__list .map__h { color: rgba(238, 246, 252, .55); }
.theme-surreal .pill { background: var(--void-2); border: 2px solid rgba(238, 246, 252, .28); color: var(--ink-inv); box-shadow: none; border-radius: 6px; }
.theme-surreal .pill .k { color: rgba(238, 246, 252, .5); }
.theme-surreal .pill--found { border-color: var(--gold); background: rgba(223, 191, 115, .14); }

/* ---------- Privacy: a key, and the keyhole it opens ---------------------- */
.theme-surreal .privacy {
  margin-top: clamp(52px, 7vw, 92px);
  background: var(--dusk-2); border-radius: 16px;
  padding: clamp(30px, 4.5vw, 56px);
}
.theme-surreal .privacy::before,
.theme-surreal .privacy::after { display: none; }
.theme-surreal .privacy__grid { grid-template-columns: 1.15fr .85fr; }
.theme-surreal .pchip {
  background: var(--void-2); border: 2px solid rgba(238, 246, 252, .28); color: var(--ink-inv);
  backdrop-filter: none; border-radius: 8px;
}
.theme-surreal .pchip svg { color: var(--gold-lt); }
.theme-surreal .privacy .h-sec { color: #fff; }
.theme-surreal .privacy p { color: rgba(238, 246, 252, .72); }
.theme-surreal .privacy__chips { margin-top: 22px; }
.theme-surreal .privacy__scene { align-self: center; }
.theme-surreal .privacy__scene svg { width: 100%; height: auto; filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .3)); }
@media (max-width: 900px) { .theme-surreal .privacy__scene { max-width: 240px; margin: 0 auto; } }

/* ---------- Segments: giant ghost numerals + torn specimen labels ------- */
.theme-surreal .seg { overflow: hidden; }
.theme-surreal .seg__grid { position: relative; z-index: 1; }
.theme-surreal .seg::before {
  content: attr(data-ghost); position: absolute; top: -8%; right: -2%; z-index: 0;
  font-family: var(--serif); font-size: clamp(9rem, 22vw, 20rem); font-weight: 600; line-height: 1;
  color: rgba(13, 33, 54, .06); pointer-events: none;
}
.theme-surreal .seg--org::before { color: rgba(238, 246, 252, .07); }
.theme-surreal .seg__idx { color: var(--gold-dk); }
.theme-surreal .seg--org .seg__idx { color: var(--gold-lt); }
.theme-surreal .tagbox {
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--hard-lt);
  backdrop-filter: none; border-radius: 10px;
}
.theme-surreal .seg--org .tagbox { background: var(--void-2); border-color: rgba(238, 246, 252, .3); box-shadow: var(--hard-dk); }
.theme-surreal .tag {
  border: 2px solid var(--ink); border-radius: 4px; background: var(--paper);
  transform: rotate(var(--tilt, 0deg));
}
.theme-surreal .seg--org .tag { background: var(--void-2); border-color: rgba(238, 246, 252, .3); color: var(--ink-inv); }
.theme-surreal .tags .tag:nth-child(3n) { --tilt: -3deg; }
.theme-surreal .tags .tag:nth-child(3n+1) { --tilt: 2deg; }
.theme-surreal .tags .tag:nth-child(3n+2) { --tilt: -1.4deg; }
.theme-surreal .tag:hover { transform: rotate(0deg) translateY(-2px); }

/* ---------- TV: painting within a painting ------------------------------- */
.theme-surreal .tv__word {
  background: linear-gradient(100deg, #fff, var(--violet-lt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-surreal .tv__mission h3 span { color: var(--coral-lt); }
.theme-surreal .tvframe {
  border: 2px solid rgba(238, 246, 252, .22);
  background: var(--dusk-2);
  transform: rotate(-1.2deg);
  box-shadow: var(--hard-dk);
}
.theme-surreal .tvframe::before {
  content: ""; position: absolute; inset: -14px -14px auto auto; width: 60%; height: 60%;
  border: 2px dashed rgba(238, 246, 252, .3); border-radius: 12px; z-index: -1;
  transform: rotate(5deg);
}
.theme-surreal .tvframe img { filter: grayscale(1) contrast(1.1); }
.theme-surreal .tvframe__rec .d { background: var(--coral); }

/* ---------- Events: corkboard polaroids ---------------------------------- */
.theme-surreal .events__word {
  background: linear-gradient(100deg, var(--ink), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-surreal .events__sub span { color: var(--coral); }
.theme-surreal .ecard {
  border-radius: 3px; border: 2px solid var(--ink);
  background: var(--paper); padding: 10px 10px 0;
  box-shadow: var(--hard-lt);
}
.theme-surreal .ecard::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 26px; height: 14px; z-index: 3;
  transform: translateX(-50%) rotate(-3deg); border-radius: 2px;
  background: var(--coral); border: 2px solid var(--ink);
}
.theme-surreal .ecard:nth-child(1) { transform: rotate(-2deg); }
.theme-surreal .ecard:nth-child(2) { transform: rotate(1.4deg); }
.theme-surreal .ecard:nth-child(3) { transform: rotate(-1deg); }
.theme-surreal .ecard:nth-child(4) { transform: rotate(2.2deg); }
.theme-surreal .ecard:hover { transform: translate(-3px, -3px) rotate(0deg); box-shadow: 10px 10px 0 rgba(13, 33, 54, .9); }
.theme-surreal .ecard__art { border-radius: 1px; filter: grayscale(.7) contrast(1.08) sepia(.15); }
.theme-surreal .ecard__tag { background: var(--ink); color: var(--paper); backdrop-filter: none; border-radius: 3px; }
.theme-surreal .ecard__body { padding: 14px 6px 20px; }

/* ---------- FAQ: parchment, stitched rule --------------------------------- */
.theme-surreal .qa { border-bottom-style: dashed; border-bottom-width: 2px; }
.theme-surreal .qa summary:hover { color: var(--coral); }
.theme-surreal .qa[open] summary::after { border-color: var(--coral); }
.theme-surreal .faq__aside a { color: var(--coral) !important; }

/* ---------- Closer: the biggest eye of all, a thread trailing to the door -- */
.theme-surreal .closer { min-height: clamp(480px, 56vw, 680px); }
.theme-surreal .closer__art { display: none; }
.theme-surreal .closer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 50% 8%, rgba(255, 122, 89, .16), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(127, 224, 214, .12), transparent 70%);
}
.theme-surreal .closer::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  width: 200px; height: 100px; left: 3%; top: 14%;
  background-image: var(--cloud-svg); background-size: contain; background-repeat: no-repeat;
  animation: drift-b 17s ease-in-out infinite;
}
.theme-surreal .closer__eye { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; opacity: .92; }
.theme-surreal .closer__eye .eye { --eye-w: 120px; }
.theme-surreal .closer__eye svg.thread { width: 26px; height: 64px; margin-top: -4px; overflow: visible; }
.theme-surreal .closer__eye .thread path { fill: none; stroke: var(--thread); stroke-width: 2.4; stroke-linecap: round; }
.theme-surreal .closer .h-sec { color: #fff; }
.theme-surreal .closer p { color: rgba(238, 246, 252, .74); }

/* ---------- Footer --------------------------------------------------------- */
.theme-surreal .ftr { color: rgba(238, 246, 252, .68); border-top: 1px solid rgba(238, 246, 252, .1); }
.theme-surreal .ftr__brand p { color: rgba(238, 246, 252, .58); }
.theme-surreal .ftr__k { color: rgba(238, 246, 252, .4); }
.theme-surreal .ftr__col a { color: rgba(238, 246, 252, .68); }
.theme-surreal .ftr__col a:hover { color: var(--coral-lt); }
.theme-surreal .ftr__bot { border-top-color: rgba(238, 246, 252, .12); color: rgba(238, 246, 252, .4); }

.theme-surreal .totop {
  background: var(--gold); border: 2px solid var(--ink); backdrop-filter: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .4);
}
.theme-surreal .totop svg { color: var(--ink); }
.theme-surreal .totop:hover { transform: translate(-2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .theme-surreal .hero::before,
  .theme-surreal .hero::after,
  .theme-surreal .problem::before,
  .theme-surreal .problem::after,
  .theme-surreal .closer::after,
  .theme-surreal .scene__node-ring,
  .theme-surreal .eye__lid { animation: none; }
}