/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* A dark room, lit from the upper left. The magazine is the object standing
     in it and the pages keep their own colour — nothing here touches the
     artwork. The mauve and oxblood are drawn from Fall of Man.

     Everything is a step or two off the floor compared with the first version:
     the ground is lifted away from pure black so it reads as a room rather
     than a void, and every text tone is brighter, which is where the
     legibility comes from. No overlays, no boxes behind anything. */
  --ink:        #f2eae9;
  --ink-soft:   #c8b9b8;
  --ink-faint:  #a2908f;
  --room:       #1e1519;
  --room-deep:  #120d10;
  --room-lift:  #35242d;
  --card:       #241a20;
  --line:       rgba(242,234,233,.18);
  --line-soft:  rgba(242,234,233,.10);

  /* the current section tints exactly one thing */
  --accent:     #d9b7b8;
  --accent-ink: #e6cbcb;
  --blood:      #6d1f33;

  --font-slab:   "Zilla Slab", Rockwell, "Bitter", "Roboto Slab", Georgia, serif;
  --font-script: "Parisienne", "Snell Roundhand", cursive;
  --font-orn:    "Pinyon Script", "Apple Chancery", cursive;
  --font-marker: "Caveat", "Bradley Hand", cursive;
  --font-didone: "Playfair Display", "Didot", Georgia, serif;
  --font-geo:    "Montserrat", "Avenir Next", system-ui, sans-serif;
  --font-punk:   "Anton", "Haettenschweiler", "Impact", sans-serif;

  /* page geometry: 1545 × 2000 */
  --page-ratio: 0.7725;
  --spread-ratio: 1.545;

  --turn: 900ms;
  --turn-ease: cubic-bezier(.42, 0, .2, 1);

  --chrome-h: 3.25rem;
}

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

html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-slab);
  font-size: clamp(15px, .48vw + 13.4px, 17px);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--room-deep);
  background-image:
    /* Depth without a void: a rose rake of light from the upper left, a warmer
       pool behind where the magazine stands so it is not floating on flat
       black, and the ground falling off to the corners. */
    radial-gradient(92% 66% at 20% 0%, var(--room-lift) 0%, rgba(53,36,45,0) 64%),
    radial-gradient(64% 52% at 74% 30%, #2e1f28 0%, rgba(46,31,40,0) 72%),
    radial-gradient(124% 98% at 46% 10%, var(--room) 0%, var(--room-deep) 86%);
  background-attachment: fixed;
  overflow: hidden;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

/* ── focus ──────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed; top: .5rem; left: 50%; translate: -50% -200%;
  z-index: 200; padding: .55rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--room-deep); text-decoration: none;
  font-size: .82rem; letter-spacing: .02em;
  transition: translate 160ms ease;
}
.skip-link:focus-visible { translate: -50% 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .78rem 1.5rem;
  border: 1px solid rgba(242,234,233,.85);
  border-radius: 999px;
  background: #f2eae9;
  color: #1a1216;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .015em;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, transform 220ms cubic-bezier(.2,.8,.3,1), box-shadow 220ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 14px 30px -16px rgba(217,183,184,.42);
}
.btn:hover {
  transform: translateY(-1px);
  background: #fffaf9;
  border-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), 0 22px 42px -18px rgba(217,183,184,.6);
}
.btn:active { transform: translateY(0); }
.btn svg { opacity: .7; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(48,33,42,.72);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .035em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.chip:hover { color: var(--ink); border-color: rgba(242,234,233,.4); background: rgba(66,46,58,.9); }
.chip--icon { padding: .42rem; }

.navbtn {
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(48,33,42,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}
.navbtn:hover:not(:disabled) { color: var(--ink); border-color: rgba(242,234,233,.4); background: rgba(66,46,58,.9); }
/* A dimmed arrow still reads as a control. At the two covers there is no page
   in that direction at all, so it goes rather than greys out. */
.navbtn:disabled { opacity: 0; visibility: hidden; cursor: default; }

/* ── the landing scrolls, the reader does not ───────────────────────── */
body[data-state="landing"] { overflow-y: auto; overflow-x: hidden; }
/* Deliberately NOT `html { scroll-behavior: smooth }`: that animates every
   programmatic scroll in the document — anchor jumps, focus moves, find-in-page
   — and an element that is still travelling is an element you cannot click.
   The one link that wants an eased scroll asks for it itself, in main.js. */

/* a hairline scrollbar that belongs to the dark room */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--room-deep); }
body::-webkit-scrollbar-thumb {
  background: rgba(217,183,184,.30);
  border-radius: 999px;
  border: 3px solid var(--room-deep);
}
body::-webkit-scrollbar-thumb:hover { background: rgba(217,183,184,.5); }
body { scrollbar-color: rgba(217,183,184,.34) var(--room-deep); scrollbar-width: thin; }


/* ── without JavaScript ───────────────────────────────────────────── */
/* The bio and the Q & A are plain markup and read fine on their own; only the
   book needs scripting. This says so rather than leaving a dead button. */
.noscript {
  margin: 0;
  padding: .85rem 1.2rem;
  background: var(--room-lift);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .86rem; text-align: center;
}