/* Vintervägen 24 - page styles on the scroll-craft engine (scrollcraft.css is the untouched engine floor). */

@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/Gloock-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/Gloock-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/HankenGrotesk-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/HankenGrotesk-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/HankenGrotesk-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --sc-canvas:     #0C1524;
  --sc-surface:    #16233A;
  --sc-ink:        #F2EEE6;
  --sc-ink-soft:   #AEB8C8;
  --sc-accent:     #F1B34B;
  --sc-accent-ink: #1B1306;
  --sc-font-display: "Gloock", "Georgia", serif;
  --sc-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --sc-shadow-color: 220 60% 4%;
  --warm: #1E1A17;
  --warm-ink: #F1E9DD;
  --warm-soft: #CDBFAC;
}
/* the engine sets smooth scroll globally; it stalls scripted scrollTo in the screenshot tools (lessons.md) */
html { scroll-behavior: auto; overflow-x: clip; }
body { font-weight: 400; letter-spacing: 0.005em; }
.sc-display { font-weight: 400; }
a { text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: color var(--sc-d-fast) var(--sc-ease-out), text-decoration-color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }

.skip { position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 100; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 0.6em 1em; border-radius: var(--sc-r-sm); }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------ chrome -- */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; justify-content: space-between;
  align-items: baseline; padding: var(--sc-4) var(--sc-gutter) var(--sc-6); pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, #0B0F17 94%, transparent) 0%, color-mix(in oklab, #0B0F17 88%, transparent) 58%, transparent 100%); }
.chrome a { pointer-events: auto; color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); }
.chrome__mark { font-family: var(--sc-font-display); font-size: var(--sc-t-lg) !important; letter-spacing: -0.01em; }
.chrome__buy { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.35em 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.chrome__buy::before, .cta::before { content: ""; width: 6px; height: 9px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .chrome__buy:hover { color: var(--sc-accent); border-color: var(--sc-accent); } }
.chrome__buy:active { transform: translateY(1px); }

/* ------------------------------------------------------------- the CTA -- */
.cta { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.35em 0.85em 1.1em; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none; font-size: var(--sc-t-base); white-space: nowrap;
  box-shadow: 0 1px 0 hsl(38 90% 78% / 0.55) inset, 0 6px 18px -6px hsl(30 80% 8% / 0.7);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.cta::before { background: var(--sc-accent-ink); opacity: 0.8; width: 7px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #F6C46A; } }
.cta:active { transform: scale(0.97); }
.cta:focus-visible { outline-color: var(--sc-ink); }
.cta-alt { margin-left: var(--sc-5); color: var(--sc-ink); font-size: var(--sc-t-sm); }

/* --------------------------------------------- the scene box (3:2 plates) --
   Every plate is 3:2. The box is sized like object-fit: cover, so anything
   positioned inside it in % lands on the same spot of the photograph at any
   viewport. On a phone the 2:3 plates take over (see the end of the file). */
.scene { position: absolute; left: 50%; top: 50%; width: max(100vw, 150svh); height: max(100svh, 66.667vw); translate: -50% -50%; }
.scene img.plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }

/* ------------------------------------------------------------- 1 hero -- */
.hero { position: relative; height: 100svh; min-height: 36rem; overflow: clip; }
.hero__planes { position: absolute; inset: -9% 0; }
.hero .scene { width: max(122vw, 177svh); height: max(118svh, 81.4vw); left: 59%; }
.pl { position: absolute; inset: 0; pointer-events: none; }
.pl > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pl--snowfar > img { mix-blend-mode: screen; opacity: 0.38; transform: scale(0.8); }
.pl--snownear > img { mix-blend-mode: screen; opacity: 0.3; transform: scale(1.9); transform-origin: 90% 10%; filter: blur(3px); }
.pl--fg > img { object-position: 70% 100%; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 50%, transparent) 26%, transparent 42%); }
.hero__copy { position: absolute; z-index: 4; left: var(--sc-gutter); top: 50%; translate: 0 -44%; max-width: 40rem; }
.hero h1 { font-size: clamp(3.6rem, 2rem + 6.2vw, 8.2rem); line-height: 0.9; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.hero__by { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.15; margin: var(--sc-4) 0 0; color: var(--sc-ink); letter-spacing: -0.01em; }
.hero__lede { font-size: var(--sc-t-lg); line-height: 1.45; max-width: 27ch; margin: var(--sc-4) 0 0; color: #DCE2EA; text-wrap: pretty; }
.hero__act { margin: var(--sc-6) 0 0; display: flex; align-items: center; flex-wrap: wrap; row-gap: var(--sc-3); }

/* the book: the real cover as a physical object (front, spine, contact shadow) */
.book { position: absolute; height: var(--h); aspect-ratio: 1200 / 1911; perspective: 1500px; --t: calc(var(--h) * 0.046); }
.book__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(34deg) rotateX(1deg); transform-origin: 50% 100%; }
.book__front { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--t) / 2)); border-radius: 1px 3px 3px 1px;
  box-shadow: inset 3px 0 5px -2px hsl(200 70% 12% / 0.55), inset -1px 0 0 hsl(0 0% 100% / 0.12); backface-visibility: hidden; }
.book__spine { position: absolute; top: 0; bottom: 0; left: 0; width: var(--t); transform-origin: 0 50%;
  transform: translateZ(calc(var(--t) / 2)) rotateY(90deg);
  background: linear-gradient(90deg, #005f86 0%, #0a86b8 45%, #0479a8 70%, #006791 100%); }
.book__shadow { position: absolute; left: -16%; right: -34%; bottom: -4.5%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(222 70% 4% / 0.78), transparent); filter: blur(5px); }
.pl--book { z-index: 3; overflow: clip; }
.book--hero { --h: min(52svh, 33vw); right: 8%; bottom: 15%; }

/* ---------------------------------------------------- 2 dörr i dörr -- */
.street__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%, transparent 30%); }
.street__side { position: absolute; inset: 0; pointer-events: none; }
.street__side--a { background: linear-gradient(270deg, color-mix(in oklab, #0A1220 94%, transparent) 0%, color-mix(in oklab, #0A1220 84%, transparent) 34%, color-mix(in oklab, #0A1220 40%, transparent) 50%, transparent 64%);
  opacity: calc(clamp(0, (var(--sc-p) - 0.15) * 14, 1) * clamp(0, (0.51 - var(--sc-p)) * 14, 1)); }
.street__side--b { background: linear-gradient(90deg, color-mix(in oklab, #0A1220 94%, transparent) 0%, color-mix(in oklab, #0A1220 84%, transparent) 34%, color-mix(in oklab, #0A1220 40%, transparent) 50%, transparent 64%);
  opacity: calc(clamp(0, (var(--sc-p) - 0.40) * 14, 1) * clamp(0, (0.73 - var(--sc-p)) * 14, 1)); }
.street__side--c { background: linear-gradient(90deg, color-mix(in oklab, #0A1220 94%, transparent) 0%, color-mix(in oklab, #0A1220 84%, transparent) 34%, color-mix(in oklab, #0A1220 40%, transparent) 50%, transparent 64%);
  opacity: calc(clamp(0, (var(--sc-p) - 0.64) * 14, 1) * clamp(0, (0.95 - var(--sc-p)) * 14, 1)); }
.street__dusk { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #0A1222 0%, #0A1222 12%, color-mix(in oklab, #0A1222 55%, transparent) 30%, transparent 48%);
  opacity: clamp(0, (var(--sc-p) - 0.86) * 8, 1); }
.street__head { position: absolute; z-index: 5; left: var(--sc-gutter); top: clamp(5rem, 13vh, 8rem); max-width: 54rem; }
.street__head h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); line-height: 0.98; letter-spacing: -0.025em; }
.home { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: min(30rem, 36vw); }
.home--a { right: var(--sc-gutter); }
.home--b, .home--c { left: var(--sc-gutter); }
.home__no { font-family: var(--sc-font-display); font-size: clamp(3.4rem, 2rem + 4.4vw, 6.2rem); line-height: 0.9; letter-spacing: -0.03em; margin: 0; }
.home__who { font-family: var(--sc-font-text); font-weight: 600; margin: var(--sc-4) 0 var(--sc-2); font-size: var(--sc-t-xl); letter-spacing: -0.01em; line-height: 1.15; }
.home__line { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 30ch; text-wrap: pretty; }

/* ---------------------------------------------------- 3 silence -- */
.hush { position: relative; min-height: 92svh; display: grid; align-items: start; padding-top: 24svh; background: #0A1222; overflow: clip; }
.hush::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(38vw, 50svh);
  background: url(assets/treeline.webp) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent); mask-image: linear-gradient(0deg, #000 55%, transparent); opacity: 0.85; }
.hush .sc-wrap { position: relative; z-index: 1; }
.hush p { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1.04; letter-spacing: -0.02em; max-width: 15ch; margin: 0 0 0 auto; text-align: right; text-wrap: balance; }

/* ---------------------------------------------------- 4 the light (peak) -- */
.light .scene { top: 58%; width: max(100vw, 177svh); height: max(118svh, 66.667vw); }
.light .plate--lit { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--x, 0%) - 3%), transparent calc(var(--x, 0%) + 1.5%));
  mask-image: linear-gradient(90deg, #000 calc(var(--x, 0%) - 3%), transparent calc(var(--x, 0%) + 1.5%)); }
.light__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in oklab, #0A101C 80%, transparent) 0%, color-mix(in oklab, #0A101C 34%, transparent) 26%, transparent 42%); }
.procession { position: absolute; inset: 0; pointer-events: none; }
.flame { position: absolute; left: 0; top: 0; width: 3%; aspect-ratio: 1 / 1.6; margin-left: -1.5%; transform-origin: 50% 100%; mix-blend-mode: screen; }
.flame > img { width: 100%; height: 100%; object-fit: cover; translate: 0 -100%; }
.flame::after { content: ""; position: absolute; left: -220%; right: -220%; top: 10%; height: 55%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(36 90% 62% / 0.35), transparent); }
.light__q { position: absolute; z-index: 5; left: var(--sc-gutter); top: clamp(4.5rem, 10vh, 7rem); max-width: 46rem; margin: 0; }
.light__q p { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.4rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.light__q .q2 { position: absolute; top: 0; left: 0; }
.light__end { position: absolute; z-index: 5; right: var(--sc-gutter); top: clamp(4.5rem, 10vh, 7rem); max-width: 30rem; text-align: right; }
.light__end p { margin: 0; font-family: var(--sc-font-display); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.02em; }
.light__end small { display: block; margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: 0.01em; }

/* ---------------------------------------------------- 5 the book, as a page -- */
.book-page { --sc-ink: var(--warm-ink); --sc-ink-soft: var(--warm-soft); color: var(--sc-ink); background: var(--warm);
  padding-block: clamp(6rem, 12vw, 11rem) clamp(5rem, 9vw, 9rem); position: relative; }
.book-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 18rem; pointer-events: none;
  background: linear-gradient(180deg, #121722, transparent); }
.bp-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; position: relative; }
.bp-cover { margin: 0; position: relative; height: min(76svh, 44vw); display: grid; place-items: center; overflow: clip; padding-inline: 6%; }
.book--page { --h: min(64svh, 38vw); position: relative; }
.book--page .book__body { transform: rotateY(30deg) rotateX(2deg); }
.book--page .book__shadow { background: radial-gradient(closest-side, hsl(25 40% 3% / 0.8), transparent); }
.bp-text h2, .bp-more h2 { font-size: var(--sc-t-3xl); letter-spacing: -0.025em; }
.bp-text p { max-width: 58ch; color: var(--warm-soft); }
.bp-text .bp-lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--warm-ink); }
.facts { margin: var(--sc-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-6); max-width: 40rem; }
.facts div { padding: var(--sc-3) 0; border-top: 1px solid color-mix(in oklab, var(--warm-ink) 16%, transparent); display: flex; justify-content: space-between; gap: var(--sc-4); }
.facts dt { color: var(--warm-soft); font-size: var(--sc-t-sm); }
.facts dd { margin: 0; text-align: right; font-size: var(--sc-t-sm); color: var(--warm-ink); }
.bp-act { margin-top: var(--sc-7) !important; }
.blurb { margin: clamp(5rem, 10vw, 9rem) 0 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); }
.blurb blockquote { grid-column: 2; margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.42; letter-spacing: -0.005em; color: var(--warm-ink); }
.blurb blockquote p { margin: 0 0 0.85em; max-width: 48ch; text-wrap: pretty; }
.blurb blockquote p:first-child { font-size: 1.5em; line-height: 1.16; letter-spacing: -0.015em; max-width: 26ch; margin-bottom: 0.9em; }
.blurb figcaption { grid-column: 2; font-size: var(--sc-t-sm); color: var(--warm-soft); margin-top: var(--sc-3); }
.bp-more { margin-top: clamp(5rem, 10vw, 9rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); }
.bp-more p { color: var(--warm-soft); max-width: 50ch; }
.shelf { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.shelf li { padding: var(--sc-3) 0; border-top: 1px solid color-mix(in oklab, var(--warm-ink) 16%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--sc-5); }
.shelf a { color: var(--warm-ink); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .shelf a:hover { color: var(--sc-accent); } }
.shelf span { color: var(--warm-soft); font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; }
.note { font-size: var(--sc-t-sm); }

/* ---------------------------------------------------- 6 close -- */
.close__plate { position: absolute; inset: -6% 0; }
.close__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; max-width: none; }
.close__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, color-mix(in oklab, #120E0B 86%, transparent) 0%, color-mix(in oklab, #120E0B 60%, transparent) 34%, transparent 58%),
  linear-gradient(0deg, color-mix(in oklab, #120E0B 70%, transparent) 0%, transparent 22%); }
.close__inner { position: absolute; z-index: 5; left: var(--sc-gutter); top: 50%; translate: 0 -54%; max-width: 36rem; }
.close h2 { font-size: clamp(2.6rem, 1.5rem + 3.8vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 12ch; }
.close__sub { margin: var(--sc-5) 0 var(--sc-6); font-size: var(--sc-t-lg); color: #E9DFD2; max-width: 32ch; }
.shops { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.shops a { color: #F2EADF; }
.close__isbn { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); color: #CDBFAC; max-width: 46ch; }
.foot { position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5); display: flex; justify-content: space-between; gap: var(--sc-6);
  font-size: var(--sc-t-xs); color: #BDAF9C; }
.foot p { margin: 0; max-width: 70ch; }

/* ---------------------------------------------------- phone -- */
@media (max-width: 760px) {
  /* the whole house at full width, anchored low, the sky continued above it in the plate's own colour */
  .scene, .hero .scene, .light .scene { width: 100vw; height: 150vw; left: 0; top: auto; bottom: 0; translate: none; }
  .hero .scene { bottom: 4%; }
  .cam::before, .light .scene::before, .hero .scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 99.5%; height: 140svh; background: linear-gradient(0deg, #0d203d, #0B1730 70%); }
  .hero__copy { top: 9svh; translate: none; right: var(--sc-gutter); }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.3rem); }
  .hero__by { font-size: var(--sc-t-lg); margin-top: var(--sc-3); }
  .hero__lede { font-size: var(--sc-t-base); max-width: 30ch; margin-top: var(--sc-3); }
  .hero__shade { background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 46%, transparent 62%); }
  .hero__act { margin-top: var(--sc-5); }
  .cta-alt { margin-left: var(--sc-4); }
  .book--hero { --h: 27svh; right: 8%; bottom: 7%; }
  .pl--fg > img { object-position: 80% 100%; }
  .street__head { top: 5.2rem; right: var(--sc-gutter); }
  .street__head h2 { font-size: 2.3rem; }
  .home, .home--a, .home--b, .home--c { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 7svh; translate: none; }
  .home__no { font-size: 3.2rem; }
  .home__who { font-size: var(--sc-t-lg); margin-top: var(--sc-3); }
  .home__line { font-size: var(--sc-t-base); }
  .street__side--a, .street__side--b, .street__side--c { background: linear-gradient(0deg, color-mix(in oklab, #0A1220 92%, transparent) 0%, color-mix(in oklab, #0A1220 70%, transparent) 30%, transparent 50%); }
  .hush { min-height: 80svh; padding-top: 18svh; }
  .hush p { font-size: 2.3rem; }
  .light__q, .light__end { top: 5.2rem; left: var(--sc-gutter); right: var(--sc-gutter); text-align: left; }
  .light__q p, .light__end p { font-size: 2.05rem; }
  .flame { width: 4.2%; margin-left: -2.1%; }
  .bp-intro, .bp-more { grid-template-columns: 1fr; }
  .bp-cover { height: 62svh; }
  .book--page { --h: 50svh; }
  .facts { grid-template-columns: 1fr; }
  .blurb { grid-template-columns: 1fr; }
  .blurb blockquote, .blurb figcaption { grid-column: 1; }
  .close__plate img { object-position: 50% 0%; }
  .close__shade { background: linear-gradient(0deg, color-mix(in oklab, #120E0B 94%, transparent) 0%, color-mix(in oklab, #120E0B 80%, transparent) 45%, transparent 66%); }
  .close__inner { top: auto; bottom: 8.5rem; translate: none; right: var(--sc-gutter); }
  .close h2 { font-size: 2.5rem; }
  .close__sub { font-size: var(--sc-t-base); margin: var(--sc-3) 0 var(--sc-4); }
  .shops { margin-top: var(--sc-4); flex-direction: column; gap: var(--sc-2); }
  .close__isbn { display: none; }
  .foot { flex-direction: column; gap: var(--sc-1); bottom: var(--sc-4); }
}
@media (prefers-reduced-motion: reduce) {
  .procession { display: none; }
  .light .plate--lit { -webkit-mask-image: none; mask-image: none; opacity: var(--lit, 0); }
  .cam { transform: none !important; }
}