:root {
  color-scheme: light;
  --pink: #ec168d;
  --paper: #fffafd;
  --ink: #630b3c;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

.rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .68;
  pointer-events: none;
}

.page-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  isolation: isolate;
}

.page-panel {
  width: min(100%, 54rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: 0 0 4.5rem 3rem rgb(255 250 253 / 72%);
}

.page-heading {
  margin: 0;
  color: #ed1385;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-size: clamp(1.7rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: clamp(.055em, .7vw, .12em);
  line-height: 1.15;
  text-shadow: 0 0 .035em rgb(255 255 255 / 95%), 0 0 .09em rgb(255 0 130 / 42%), 0 0 .42em rgb(236 22 141 / 26%);
  text-transform: uppercase;
}

.page-label {
  margin: clamp(1.5rem, 5vh, 3.25rem) 0 0;
  color: rgb(99 11 60 / 72%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.text-slot {
  min-height: clamp(7rem, 22vh, 15rem);
  margin: 0 auto;
}

.home-link {
  display: inline-block;
  color: #c90070;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.home-link:hover {
  color: #ed1385;
  text-shadow: 0 0 .65em rgb(236 22 141 / 42%);
}

.home-link:focus-visible {
  border-radius: 2px;
  outline: 1px solid rgb(236 22 141 / 62%);
  outline-offset: .4em;
}

@media (max-width: 520px) {
  .page-stage { padding: 1rem; }
  .page-panel { padding: 1.25rem .5rem; }
  .rain { opacity: .54; }
}

@media (prefers-reduced-motion: reduce) {
  .rain { display: none; }
  body {
    background-image: repeating-linear-gradient(180deg, transparent 0 1.4rem, rgb(236 22 141 / 4%) 1.4rem 1.48rem);
  }
}

/* The blurb page is a separate, full-bleed horror treatment. */
.blurb-experience {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #100809;
}

.blurb-experience::before {
  position: fixed;
  z-index: -1;
  inset: -2rem;
  content: "";
  background: url("blurb-body-horror-wide.jpg?v=landscape-jpeg-q64-v1") center / cover no-repeat;
  filter: blur(1.5rem) brightness(.36) saturate(.8);
  transform: scale(1.04);
}

.blurb-poster {
  position: relative;
  width: min(100vw, 177.78svh);
  height: min(100svh, 56.25vw);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background: #190b0a url("blurb-body-horror-wide.jpg?v=landscape-jpeg-q64-v1") center / 100% 100% no-repeat;
  box-shadow: 0 0 5rem rgb(0 0 0 / 72%);
}

.blurb-poster .page-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.surveillance-screen {
  position: absolute;
  top: 34.3%;
  left: 26.5%;
  width: 47%;
  height: 36.8%;
  overflow: hidden;
  padding: 0;
  border-radius: 8% / 12%;
  background: transparent;
  color: #d8ded8;
  box-shadow: none;
  z-index: 6;
}

.surveillance-copy {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 2.4% 5.5%;
  color: #00c84c;
  font-family: "Courier New", monospace;
  font-size: clamp(.62rem, .95vw, .82rem);
  line-height: 1.2;
  text-shadow: 0 0 1px rgb(0 10 3 / 98%), 0 0 .28em currentColor, 0 0 .7em rgb(0 184 70 / 52%);
}

#book-blurb {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}

.terminal-paragraph {
  display: block;
  margin: 0 0 .36em;
}

.terminal-paragraph:last-child { margin-bottom: 0; }

.terminal-cursor {
  display: inline-block;
  width: 1px;
  min-width: 1px;
  height: .9em;
  margin-left: .08em;
  vertical-align: -.1em;
  animation: terminal-cursor-blink 1s steps(2, start) infinite;
  background: currentColor;
  box-shadow: 0 0 .22em currentColor;
}

@keyframes terminal-cursor-blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-cursor { animation: none; }
}

.author-signature {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.author-hitbox {
  position: absolute;
  z-index: 2;
  top: 81.5%;
  left: 14%;
  width: 72%;
  height: 8%;
  border-radius: .25rem;
}

.blood-rain {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.author-book-hitbox {
  position: absolute;
  z-index: 2;
  top: 79.5%;
  left: 26%;
  width: 48%;
  height: 8%;
  border-radius: .25rem;
}

.author-book-hitbox:focus-visible {
  outline: 1px solid rgb(239 230 222 / 78%);
  outline-offset: -2px;
}

.author-hitbox:focus-visible {
  outline: 1px solid rgb(239 230 222 / 78%);
  outline-offset: -2px;
}

.author-experience {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #170a08;
}

.author-experience::before {
  position: fixed;
  z-index: -1;
  inset: -2rem;
  content: "";
  background: url("author-skin-wide-v7.jpg?v=raised-name-author-skin-v7-20261004") center / cover no-repeat;
  filter: blur(1.5rem) brightness(.36) saturate(.78);
  transform: scale(1.04);
}

.author-poster {
  position: relative;
  width: min(100vw, 177.78svh);
  height: min(100svh, 56.25vw);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background: #351710 url("author-skin-wide-v7.jpg?v=raised-name-author-skin-v7-20261004") center / 100% 100% no-repeat;
  box-shadow: 0 0 5rem rgb(0 0 0 / 72%);
}

.author-scar-reveals {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.author-poster .page-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.carved-biography {
  position: absolute;
  top: 30%;
  left: 25.5%;
  width: 49%;
  height: 44%;
  overflow: hidden;
  z-index: 3;
  color: #090605;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.94rem, 1.72cqw, 1.2rem);
  font-weight: 500;
  line-height: 1.27;
  letter-spacing: .004em;
  text-align: center;
  transition: none;
  mix-blend-mode: multiply;
  opacity: .985;
  filter: drop-shadow(0 .22px .16px rgb(101 13 12 / 28%));
  -webkit-text-stroke: .12px rgb(5 3 3 / 96%);
  -webkit-font-smoothing: antialiased;
  text-shadow:
    0 .16px .12px rgb(18 5 4 / 64%),
    0 -.16px .1px rgb(170 40 31 / 25%);
}

.filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.carved-biography p {
  margin: 0 0 .8em;
}

.carved-biography p:last-child {
  margin-bottom: 0;
}

.carved-biography em {
  font-style: italic;
  padding-inline: .07em;
}

.author-tech-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

.tech-glint {
  fill: none;
  stroke: #ff44b1;
  stroke-width: .58;
  stroke-linecap: round;
  stroke-dasharray: 88 912;
  stroke-dashoffset: 1000;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 .55px #fff8fc) drop-shadow(0 0 1.8px #ed1385) drop-shadow(0 0 3px rgb(237 19 133 / 42%));
  opacity: 0;
  animation: none;
}

.portrait-glint { display: none; }
.portrait-glow { display: none; }

.tech-shimmer {
  fill: #ff49b8;
  opacity: .045;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#embedded-glow-soften) drop-shadow(0 0 1.2px #ed168d);
}

.tech-glint-core {
  fill: none;
  stroke: #ffd4ed;
  stroke-width: .24;
  stroke-linecap: round;
  stroke-dasharray: 88 912;
  stroke-dashoffset: 1000;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: none;
}

@keyframes tech-line-travel {
  0%, 89% { stroke-dashoffset: 1000; opacity: 0; }
  90% { stroke-dashoffset: 1000; opacity: .96; }
  98.5% { stroke-dashoffset: 0; opacity: .96; }
  100% { stroke-dashoffset: -180; opacity: 0; }
}

.author-poster .home-link::before,
.blurb-poster .home-link::before {
  position: absolute;
  inset: 0;
  content: attr(data-engraving);
  color: rgb(89 0 8 / 48%);
  -webkit-text-stroke: 0;
  text-shadow: 0 -.35px 0 rgb(133 19 23 / 50%);
  transform: translateY(-.3px);
  mix-blend-mode: darken;
  pointer-events: none;
}

.blurb-poster .home-link,
.author-poster .home-link {
  position: absolute;
  z-index: 6;
  top: 93%;
  left: 50%;
  transform: translateX(-50%);
  color: #670008;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(.78rem, 1.05vw, .98rem);
  font-weight: 500;
  letter-spacing: .16em;
  mix-blend-mode: darken;
  -webkit-text-stroke: .16px rgb(73 7 10 / 78%);
  text-shadow: 0 -.4px 0 rgb(150 28 27 / 60%), 0 .65px 0 rgb(58 0 6 / 88%), 0 1.2px 1px rgb(59 0 7 / 70%), 0 -.85px 1.4px rgb(116 8 15 / 58%), 0 0 1.8px rgb(99 0 8 / 42%);
  text-transform: uppercase;
}

.blurb-poster .home-link:hover,
.blurb-poster .home-link:focus-visible,
.author-poster .home-link:hover,
.author-poster .home-link:focus-visible {
  color: #790810;
  text-shadow: 0 -.4px 0 rgb(150 28 27 / 65%), 0 .65px 0 rgb(50 0 5 / 90%), 0 1.2px 1.6px rgb(98 0 9 / 78%);
}

@media (orientation: landscape) {
  .author-poster { box-shadow: 0 0 5rem rgb(0 0 0 / 72%); }
}

@media (orientation: portrait) {
  .blurb-experience::before {
    background-image: url("blurb-body-horror.jpg?v=mobile-jpeg-q60-v1");
  }

  .blurb-poster {
    width: min(100vw, 66.6667svh);
    height: min(100svh, 150vw);
    aspect-ratio: 2 / 3;
    background-image: url("blurb-body-horror.jpg?v=mobile-jpeg-q60-v1");
  }

  .surveillance-screen {
    top: 40.3%;
    left: 14%;
    width: 72%;
    height: 31.3%;
  }

  .surveillance-copy {
    padding: 2.4% 5.5%;
    line-height: 1.12;
  }

  .blurb-poster .home-link { top: 96%; font-size: clamp(.76rem, 2.8vw, .95rem); }

  .author-experience::before {
    background-image: url("author-skin-v6.jpg?v=raised-name-author-skin-v6-20261004");
  }

  .author-poster {
    width: min(100vw, 66.6667svh);
    height: min(100svh, 150vw);
    aspect-ratio: 2 / 3;
    background-image: url("author-skin-v6.jpg?v=raised-name-author-skin-v6-20261004");
  }

  .author-book-hitbox {
    top: 82%;
    left: 12%;
    width: 76%;
    height: 7%;
  }

  .carved-biography {
    top: 29%;
    left: 12%;
    width: 76%;
    height: 51%;
    font-size: clamp(.78rem, 3.4cqw, .9rem);
    line-height: 1.17;
    letter-spacing: 0;
  }

  .author-poster .home-link { top: 96%; font-size: clamp(.76rem, 2.8vw, .95rem); }

  .wide-glint { display: none; }
  .portrait-glint { display: block; }
  .wide-glow { display: none; }
  .portrait-glow { display: block; }
}

@media (max-width: 350px) and (orientation: portrait) {
  .carved-biography {
    top: 28%;
    left: 8%;
    width: 84%;
    height: 52%;
    font-size: .72rem;
    line-height: 1.13;
  }
}

@media (orientation: portrait), (max-width: 650px) {
  .author-poster .home-link { font-size: clamp(.78rem, 2.3vw, .95rem); }
}


@media (max-aspect-ratio: 4 / 5) {
  .blurb-poster {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blurb-experience::before { filter: blur(1rem) brightness(.36); }
  .tech-glint,
  .tech-glint-core { display: none; }
}