:root {
  --bg-angle: 176deg;
  --tone-hue: 270;
  --tone-sat: 5%;
  --lift: 0%;
  --glow-x: 78%;
  --glow-y: 4%;
  --glow-size: 120%;
  --grain-base: 1;
  --grain-jitter: 1;

  --bone:     #f8efe0;
  --bone-dim: #d9cbe8;
  --accent:        #cdc6d2;
  --accent-bright: #efeaf2;
  --hello-color: rgba(232, 228, 236, 0.78);
  --rule:        rgba(246, 238, 224, 0.32);

  --glow-layer: radial-gradient(var(--glow-size) 80% at var(--glow-x) var(--glow-y),
      hsl(270 10% 5% / 0.5) 0%, hsl(270 10% 5% / 0) 60%);
  --field-layer: linear-gradient(
      var(--bg-angle),
      hsl(var(--tone-hue) var(--tone-sat) calc(7%  + var(--lift)))  0%,
      hsl(var(--tone-hue) var(--tone-sat) calc(13% + var(--lift))) 22%,
      hsl(var(--tone-hue) var(--tone-sat) calc(21% + var(--lift))) 44%,
      hsl(var(--tone-hue) var(--tone-sat) calc(30% + var(--lift))) 64%,
      hsl(var(--tone-hue) var(--tone-sat) calc(41% + var(--lift))) 84%,
      hsl(var(--tone-hue) var(--tone-sat) calc(50% + var(--lift))) 100%);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono:  "Space Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --edge: clamp(1.25rem, 4.5vw, 3.5rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--bone);
  font-family: var(--mono);
  background: var(--glow-layer), var(--field-layer);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(var(--grain-base) * var(--grain-jitter));
  mix-blend-mode: overlay;
  background-size: 110px 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.place {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.mark {
  --mark-size: clamp(3.75rem, 17.5vw, 16rem);
  margin: 0;
  position: relative;
  line-height: 0.9;
  white-space: nowrap;
}

.mark__word {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "wght" 360, "opsz" 144, "SOFT" 64, "WONK" 1;
  font-size: var(--mark-size);
  letter-spacing: -0.022em;
  color: var(--bone);
}

.mark__ae {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-variation-settings: normal;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--bone);
}

.mark__caret {
  display: inline-block;
  width: 0.05em;
  height: 0.7em;
  margin-left: 0.08em;
  vertical-align: -0.03em;
  background: var(--accent);
  border-radius: 1px;
  font-size: var(--mark-size);
  animation: caret 1.7s ease-in-out infinite;
  transition: background 0.09s ease, box-shadow 0.09s ease, transform 0.09s ease;
}

@keyframes caret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.16; }
}

.mark__caret.is-disturbed {
  background: var(--accent-bright);
  transform: translateX(var(--cursor-shift, 0px));
  box-shadow:
    0 0 7px rgba(205, 177, 242, 0.45),
    1px 0 0 rgba(236, 224, 255, 0.30);
}

.portal {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
}

.portal__door {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--bone);
}

.portal__name {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.25em;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.portal__arrow {
  color: var(--accent);
  transition: transform 0.2s ease;
}

.portal__door:hover .portal__name,
.portal__door:focus-visible .portal__name {
  color: var(--bone);
  border-color: var(--accent);
}

.portal__door:hover .portal__arrow,
.portal__door:focus-visible .portal__arrow {
  transform: translate(0.18em, -0.18em);
}

.hello {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  margin: 0;
  max-width: calc(100% - 2 * var(--edge));
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--hello-color);
}

.hello a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hello a:hover,
.hello a:focus-visible {
  color: var(--bone);
  border-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 5px;
  border-radius: 2px;
}

@media (max-width: 34rem) {
  .place { justify-content: flex-end; padding-bottom: clamp(4.5rem, 24vh, 9rem); }
  .mark { --mark-size: clamp(2.75rem, 13.5vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .mark__caret { animation: none; }
  * { transition: none !important; }
}

.evt-negative {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(266 34% 90%) 0%, hsl(268 30% 85%) 22%, hsl(270 27% 79%) 44%,
    hsl(272 24% 73%) 64%, hsl(274 22% 67%) 84%, hsl(276 20% 60%) 100%);
  --glow-layer: none;
  --bone: #241433; --bone-dim: #4d3a63;
  --accent: #5a2f9a; --accent-bright: #3a1f6e;
  --hello-color: rgba(36, 20, 51, 0.82); --rule: rgba(36, 20, 51, 0.30);
}

.evt-outline-mark .mark__word {
  color: transparent;
  -webkit-text-stroke: 0.018em var(--bone);
}
.evt-outline-mark .mark__ae {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

.evt-green-room {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(155 46% 6%) 0%, hsl(153 43% 11%) 22%, hsl(151 40% 17%) 44%,
    hsl(150 37% 24%) 64%, hsl(148 33% 33%) 84%, hsl(146 29% 43%) 100%);
  --accent: #bfe9cf; --accent-bright: #e8fff1;
  --hello-color: rgba(206, 240, 218, 0.82);
}

.evt-blue-hour {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(230 56% 7%) 0%, hsl(228 52% 13%) 22%, hsl(226 48% 20%) 44%,
    hsl(224 44% 28%) 64%, hsl(222 40% 37%) 84%, hsl(220 36% 47%) 100%);
  --accent: #bcd2ff; --accent-bright: #e6efff;
  --hello-color: rgba(200, 214, 245, 0.82);
}

.evt-bruise {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(285 52% 8%) 0%, hsl(322 44% 14%) 22%, hsl(300 40% 20%) 44%,
    hsl(262 46% 25%) 64%, hsl(242 46% 31%) 84%, hsl(292 40% 40%) 100%);
}

.evt-paper-fade {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(280 12% 30%) 0%, hsl(285 11% 41%) 24%, hsl(34 10% 56%) 52%,
    hsl(40 12% 68%) 78%, hsl(43 12% 78%) 100%);
  --glow-layer: none;
  --grain-base: 0.5;
  --bone: #3a2f42; --bone-dim: #5b4f63;
  --accent: #6b5a86; --accent-bright: #463a5e;
  --hello-color: rgba(58, 47, 66, 0.80); --rule: rgba(58, 47, 66, 0.28);
}

.evt-wet-ink {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(268 72% 5%) 0%, hsl(270 68% 10%) 22%, hsl(272 64% 15%) 44%,
    hsl(274 60% 21%) 64%, hsl(276 56% 29%) 84%, hsl(278 52% 37%) 100%);
  --grain-base: 0.45;
  --accent: #d8c2ff; --accent-bright: #f1e8ff;
}

.evt-low-toner {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(272 16% 15%) 0%, hsl(272 14% 23%) 22%, hsl(273 12% 31%) 44%,
    hsl(273 10% 39%) 64%, hsl(274 9% 48%) 84%, hsl(274 8% 57%) 100%);
  --grain-base: 0.85;
  --bone-dim: #c9bcd6;
}
.evt-low-toner body::before {
  mix-blend-mode: overlay;
  background-size: 90px 150px;
}

.evt-velvet {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(282 36% 7%) 0%, hsl(283 33% 10%) 22%, hsl(285 30% 13%) 44%,
    hsl(286 27% 17%) 64%, hsl(288 25% 21%) 84%, hsl(290 23% 26%) 100%);
  --glow-layer: radial-gradient(var(--glow-size) 80% at var(--glow-x) var(--glow-y),
    hsl(290 40% 30% / 0.25) 0%, hsl(290 40% 30% / 0) 60%);
  --grain-base: 0.4;
  --bone: #f3ece0; --accent: #d9c4f0;
}

.evt-oxidized {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(186 44% 6%) 0%, hsl(198 34% 12%) 20%, hsl(265 40% 20%) 42%,
    hsl(276 42% 26%) 62%, hsl(165 30% 33%) 82%, hsl(282 38% 41%) 100%);
  --accent: #9fe6d8; --accent-bright: #dffff6;
}

.evt-ultraviolet {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(258 72% 6%) 0%, hsl(256 70% 11%) 22%, hsl(254 68% 17%) 44%,
    hsl(256 65% 24%) 64%, hsl(260 63% 32%) 84%, hsl(264 60% 40%) 100%);
  --accent: #c9b3ff; --accent-bright: #efe6ff;
}

.evt-blackout {
  --field-layer: linear-gradient(var(--bg-angle),
    hsl(270 28% 3%) 0%, hsl(270 24% 4%) 30%, hsl(272 20% 5%) 60%,
    hsl(274 16% 7%) 85%, hsl(276 14% 9%) 100%);
  --glow-layer: none;
  --grain-base: 0.25;
  --bone: #ddd2e8; --bone-dim: #8d8099;
  --hello-color: rgba(221, 210, 232, 0.72); --rule: rgba(221, 210, 232, 0.22);
}

#whv-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  max-height: 100vh;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  background: #f4f4f6;
  color: #111;
  font: 12px/1.7 ui-monospace, Menlo, Consolas, monospace;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#whv-preview b { display: block; margin-bottom: 6px; font-weight: 700; }
#whv-preview a { display: block; color: #1a3acc; text-decoration: none; }
#whv-preview a:hover,
#whv-preview a:focus-visible { text-decoration: underline; }