@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* The type cut for the Spanish Royal Academy's 1780 Don Quixote. */
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Sampled from the portrait and the card back. */
  --night: oklch(.15 .032 272);
  --dusk: oklch(.19 .045 272);
  --gown: oklch(.27 .088 272);
  --gown-lit: oklch(.36 .105 270);
  --gold: oklch(.79 .115 84);
  --gold-dim: oklch(.6 .085 78);
  --sky: oklch(.83 .058 69);
  --candle: oklch(.94 .035 88);
  --paper: oklch(.91 .04 85);
  --ink: oklch(.21 .05 272);
  --shadow: oklch(.09 .04 272 / .62);
  --shade: oklch(.13 .05 272 / .9);

  --display: "Ibarra Real Nova", "Iowan Old Style", Georgia, serif;
  --text: "Schibsted Grotesk", system-ui, sans-serif;

  /* Type scale: roughly a perfect fourth, fluid between phone and desktop. */
  --t-sm: .9375rem;
  --t-base: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --t-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --t-2xl: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);

  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.3, 1.4, .5, 1);
  --hairline: 1px solid color-mix(in oklch, var(--gold) 42%, transparent);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
  scroll-padding-top: 4.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--candle);
  font: 400 var(--t-base)/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-decoration-thickness: .06em;
  text-underline-offset: .2em;
  transition: text-decoration-color .2s, color .2s;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .5rem;
  padding: .7rem 1rem;
  background: var(--candle);
  color: var(--ink);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Engraved plate: concave corners, the same cut on every label on the page. */
.cartouche, .name-plate, .court-plate figcaption, .letter::before, .letter::after {
  --corner: #0000 calc(100% - .5px), #000;
  -webkit-mask:
    radial-gradient(circle var(--n) at 0 0, var(--corner)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 0, var(--corner)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 0 100%, var(--corner)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 100%, var(--corner)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle var(--n) at 0 0, var(--corner)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 0, var(--corner)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 0 100%, var(--corner)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle var(--n) at 100% 100%, var(--corner)) 100% 100% / 51% 51% no-repeat;
}

/* Header */
.bar {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding-inline: var(--pad);
  background: color-mix(in oklch, var(--dusk) 92%, transparent);
  border-bottom: var(--hairline);
  transform: translateY(-105%);
  transition: transform .45s var(--ease);
}
.bar.is-on, .bar:focus-within { transform: none; }
html:not(.js) .bar { position: sticky; transform: none; }
.bar-mark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font: 700 1.375rem/1 var(--display);
  text-decoration: none;
  white-space: nowrap;
}
.bar nav { display: flex; gap: clamp(.25rem, 2vw, 1.5rem); }
.bar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .5rem;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.bar nav a:hover { color: var(--gold); }
@media (max-width: 439.98px) {
  .bar { gap: .5rem; padding-inline: .75rem; }
  .bar-mark { font-size: 1.125rem; }
  .bar nav { gap: 0; }
  .bar nav a { padding-inline: .4rem; font-size: .875rem; }
}

/* Hero. The castle is the subject. --u is 1/1200 of the width and sets the name; --p is one
   portrait pixel of the cutout, drawn at --s of that. --v scales the plate, a palace 763 portrait
   pixels wide, so it covers the hero on its own terms. */
.hero {
  --hero-h: max(100svh, 34rem);
  --u: calc(100vw / 1200);
  --s: .46;
  --p: calc(var(--u) * var(--s));
  --v: max(100vw / 763, var(--hero-h) / 800);
  /* The photo stops at Lance's arm, so they stand at the right and it simply leaves the frame.
     The bottom edge of the photo stays off screen for the same reason. */
  --pleft: calc(100vw - 1180 * var(--p));
  --ptop: max(var(--hero-h) - 776 * var(--p), 10 * var(--u) - 18 * var(--p));
  position: relative;
  height: var(--hero-h);
  overflow: clip;
  isolation: isolate;
  background: var(--night);
}
.layer { position: absolute; }
.layer img { width: 100%; height: 100%; }
.plate {
  z-index: 0;
  top: 0;
  left: calc(50vw - 381.5 * var(--v));
  width: calc(763 * var(--v));
  height: calc(800 * var(--v));
}
.plate img { object-fit: cover; filter: brightness(1.3); transform-origin: 50% 30%; scale: 1.03; }
.people {
  z-index: 3;
  top: var(--ptop);
  left: var(--pleft);
  width: calc(1200 * var(--p));
  height: calc(800 * var(--p));
  pointer-events: none;
}

/* Candle warmth behind them, under the name; nothing is ever laid over their faces. */
.glow {
  position: absolute;
  z-index: 1;
  top: calc(var(--ptop) + 40 * var(--p));
  left: calc(var(--pleft) + 200 * var(--p));
  width: calc(980 * var(--p));
  height: calc(700 * var(--p));
  background: radial-gradient(closest-side, oklch(.62 .13 62 / .42), oklch(.62 .13 62 / .12) 60%, transparent);
}

.name {
  position: absolute;
  z-index: 2;
  top: calc(var(--hero-h) * .085);
  left: calc(110 * var(--u));
  color: var(--candle);
  font: 700 calc(140 * var(--u))/1 var(--display);
  letter-spacing: -.012em;
  white-space: nowrap;
}
.word { display: inline-block; }
.llc {
  position: absolute;
  top: calc(131 * var(--u));
  right: calc(3 * var(--u));
  font: 600 calc(19 * var(--u))/1 var(--text);
  letter-spacing: .02em;
}
/* Set letters by the intro; they must not change the name's width. */
.ch { display: inline-block; }

/* Glitter ink: Mortal Arcana's gold ink, in this palette, on the two big wordmarks only. The
   padding keeps the clip open for the descenders. Split letters carry their own copy. */
.word, .ch, .closing-mark span {
  padding-block: .14em .3em;
  margin-block: -.14em -.3em;
  background: linear-gradient(176deg, var(--candle), var(--gold) 58%, oklch(.75 .11 80));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.word.is-split { background: none; }
.drizzle {
  position: absolute;
  top: 58%;
  left: 0;
  right: 0;
  pointer-events: none;
}
.fleck {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--candle), var(--gold) 55%, transparent);
  box-shadow: 0 0 6px 1px oklch(.9 .07 86 / .55);
  opacity: 0;
  animation: ink-fall var(--d) linear var(--delay) infinite;
}
@keyframes ink-fall {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  12% { opacity: 1; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translateY(var(--fall)) translateX(var(--drift)) scale(1); }
}

.hero-foot {
  position: absolute;
  z-index: 4;
  left: var(--pad);
  bottom: clamp(1.5rem, 5svh, 3.5rem);
  width: min(28vw, 30rem);
  min-width: 15rem;
}
.statement {
  font: 600 min(clamp(1.5rem, 1.1rem + 1.25vw, 2.25rem), 5.4svh)/1.14 var(--display);
  text-wrap: pretty;
  text-shadow: 0 1px .9rem var(--shade);
}
.caption {
  margin-top: .6rem;
  color: var(--sky);
  font: italic 400 clamp(1.0625rem, .8rem + .6vw, 1.5rem)/1.25 var(--display);
  white-space: nowrap;
  text-shadow: 0 1px .7rem var(--shade);
}
.hero-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: .35rem;
  color: var(--gold);
  font-size: var(--t-sm);
  font-weight: 600;
}
/* Sink the bottom of the scene into the night. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--night), transparent 24%);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  /* Dusk deepening upward, behind the name; a corner of shade under the statement. */
  background:
    linear-gradient(to bottom, oklch(.15 .05 272 / .74), oklch(.15 .05 272 / .56) 30%, transparent 52%),
    radial-gradient(62% 66% at 0 100%, oklch(.13 .04 272 / .82), transparent);
}
.veil { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .veil {
    display: block;
    position: absolute;
    z-index: 5;
    inset: 0;
    background: var(--night);
    pointer-events: none;
  }
  html.js:not(.intro-done) .name,
  html.js:not(.intro-done) .people,
  html.js:not(.intro-done) .hero-foot { visibility: hidden; }
}

/* Stacked hero: the name in the sky over the castle, the two of them lower down, and the
   statement on its own dark ground below them so it never touches them. */
@media (max-aspect-ratio: 5/4) {
  .hero {
    --hero-h: max(100svh, 36rem);
    --band: clamp(11rem, 23svh, 14.5rem);
    --p: max(100vw * .46 / 1200, var(--hero-h) * .4 / 800);
    --pleft: max(50vw - 668 * var(--p), 100vw - 1180 * var(--p));
    --ptop: calc(var(--hero-h) - var(--band) * .7 - 776 * var(--p));
  }
  .name {
    top: clamp(3rem, 8svh, 6rem);
    left: var(--pad);
    font-size: min(19.5vw, 13svh);
    line-height: .92;
  }
  .word { display: block; }
  .llc {
    position: static;
    display: block;
    margin: .5em 0 0 .15em;
    font-size: .16em;
  }
  .word:nth-of-type(2) { display: inline-block; }
  .hero-foot {
    right: var(--pad);
    width: auto;
    min-width: 0;
    max-width: 34rem;
  }
  .statement { font-size: clamp(1.125rem, .65rem + 2.4vw, 1.875rem); }
  .caption { font-size: var(--t-base); }
  .hero::before {
    background: linear-gradient(to bottom, oklch(.15 .05 272 / .74), oklch(.15 .05 272 / .6) 34%, transparent 54%);
  }
  .hero::after {
    background: linear-gradient(to top, var(--night) calc(var(--band) * .66), oklch(.15 .032 272 / .84) calc(var(--band) * .86), transparent calc(var(--band) * 1.3));
  }
}

/* Hand of cards: Mortal Arcana's flipcard, printed on this deck's paper. */
.work {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
  overflow: clip;
  background:
    url("img/grain.webp"),
    linear-gradient(to top, var(--night), transparent 16%),
    radial-gradient(72% 62% at 50% 60%, oklch(.56 .11 66 / .34), transparent 72%),
    radial-gradient(120% 82% at 50% 104%, var(--gown-lit), var(--gown) 42%, transparent 78%),
    var(--night);
}
/* The same pool of light, breathing. */
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 42% at 50% 60%, oklch(.72 .13 72 / .2), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .work::before { animation: candle 6.5s ease-in-out infinite; }
}
@keyframes candle {
  0%, 100% { opacity: 1; }
  28% { opacity: .78; }
  41% { opacity: .95; }
  63% { opacity: .7; }
  82% { opacity: .92; }
}
.work-head {
  position: relative;
  padding-bottom: .9rem;
  border-bottom: var(--hairline);
}
h2 {
  font: 700 var(--t-2xl)/1 var(--display);
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* No JavaScript: every card reads as a painting with its words beneath. */
.hand {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.8vw, 1.5rem);
  /* Four cards and the heading fit on one screen. */
  max-width: max(40rem, (100svh - 12rem) * 2.46);
  margin: clamp(1.5rem, 3.5vw, 2.75rem) auto 0;
  perspective: 1400px;
}
@media (max-width: 719.98px) {
  .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.turn, .foil { display: none; }
.card-inner { position: relative; }
.front {
  position: relative;
  padding: 2.4%;
  background: var(--paper);
  border-radius: clamp(.6rem, 1.1vw, 1rem);
  box-shadow: 0 1.2rem 2.4rem var(--shadow);
}
.front img { width: 100%; height: auto; border-radius: .35rem; }
.name-plate {
  --n: .55rem;
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  padding: .4em .9em .35em;
  background: var(--paper);
  color: var(--ink);
  font: 700 clamp(1.125rem, 1.5vw, 1.5rem)/1 var(--display);
  white-space: nowrap;
  transform: translateX(-50%);
}
.back { margin-top: .9rem; }
.cartouche {
  --n: 1rem;
  padding: 1.1rem 1.2rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
}
.cartouche h3 { color: var(--ink); font: 700 var(--t-xl)/1.05 var(--display); }
.cartouche p { margin-top: .4rem; font-size: 1rem; line-height: 1.38; }
.cartouche p.line { margin-top: 0; font: italic 400 var(--t-xl)/1.1 var(--display); }
.cartouche a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: .15rem;
  font-size: 1rem;
  font-weight: 600;
}
.cartouche a:focus-visible { outline-color: var(--ink); }

/* With JavaScript: their .flipcard. A press mirrors the card and the faces swap at the midpoint,
   so it needs no 3D context; the card stays turned until pressed again. */
.js .card {
  position: relative;
  aspect-ratio: 832 / 1408;
  cursor: pointer;
  container-type: inline-size;
}
.js .card-inner {
  position: absolute;
  inset: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.js .is-flipped .card-inner { transform: scaleX(-1); }
.js .face {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 4.2cqw;
  box-shadow: 0 .1rem .2rem var(--shadow), 0 1.4rem 2.6rem var(--shadow);
  transition: opacity .16s linear .28s;
}
.js .front { background: var(--paper); }
.js .front picture {
  position: absolute;
  inset: 2.1%;
  overflow: hidden;
  border-radius: 2.2cqw;
}
.js .front img { height: 100%; object-fit: cover; border-radius: 0; }
.js .back {
  opacity: 0;
  pointer-events: none;
  transform: scaleX(-1);
  background: var(--paper) center / cover no-repeat;
  background-image: url("img/card-back-v2-720.webp");
  background-image: image-set(url("img/card-back-v2-720.avif") type("image/avif"), url("img/card-back-v2-720.webp") type("image/webp"));
}
.js .is-flipped .front { opacity: 0; pointer-events: none; }
.js .is-flipped .back { opacity: 1; pointer-events: auto; }
.js .name-plate { font-size: 8.2cqw; }

/* Their foil: follows the pointer across the card, gold and candle here. */
.js .foil {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background: linear-gradient(105deg, #0000 30%, oklch(.79 .115 84 / .5), oklch(.94 .05 88 / .6), oklch(.68 .13 62 / .5), #0000 70%) 0 0 / 250% 250%;
  background-position: var(--fx, 0%) var(--fy, 0%);
  transition: opacity .4s;
}
.js .card:hover .foil { opacity: .3; }

/* The turn button is for keys and screen readers; pointers press the card itself. Its corner
   glyph is their .fc-hint, and the only instruction a card needs. */
.js .turn {
  display: block;
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  border-radius: 4.2cqw;
  pointer-events: none;
}
.js .turn:focus-visible { outline-offset: 5px; }
.js .turn::after {
  content: "\21BB";
  position: absolute;
  top: 3.6cqw;
  right: 3.6cqw;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  background: oklch(.15 .032 272 / .72);
  border: 1px solid oklch(.79 .115 84 / .5);
  border-radius: 50%;
  color: var(--gold);
  font: 400 .9375rem/1 var(--text);
  opacity: .78;
  transition: opacity .25s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.js .card:hover .turn::after { opacity: 1; transform: rotate(-150deg); }

.js .cartouche {
  --n: 5cqw;
  position: absolute;
  inset: 13% 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5cqw 6.5cqw;
  text-align: center;
}
.js .cartouche::before {
  content: "";
  position: absolute;
  inset: .28rem;
  border: 1px solid color-mix(in oklch, var(--gold-dim) 80%, transparent);
  pointer-events: none;
}
.js .cartouche > * { position: relative; }
.js .cartouche h3 { font-size: clamp(1.125rem, 11.5cqw, 2.5rem); }
.js .cartouche p { margin-top: 2.2cqw; font-size: clamp(.8125rem, 6.1cqw, 1.1875rem); line-height: 1.32; }
.js .cartouche p.line { margin-top: 0; font-size: clamp(1.25rem, 11.5cqw, 2.5rem); line-height: 1.1; }
.js .cartouche a { font-size: clamp(.8125rem, 5.4cqw, 1.0625rem); }

@media (max-width: 359.98px) {
  .js .cartouche { inset: 7% 5%; padding: 3cqw 3.5cqw; }
  .js .cartouche a { min-height: 2.25rem; overflow-wrap: anywhere; line-height: 1.15; }
}

/* The fourth card's line waits for the turn, for everyone. */
.js .card--next .back { visibility: hidden; transition: opacity .16s linear .28s, visibility 0s .44s; }
.js .card--next.is-flipped .back { visibility: visible; transition: opacity .16s linear .28s, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .js .card-inner, .js .face, .js .card--next .back, .js .card--next.is-flipped .back { transition: none; }
  .js .foil { display: none; }
}

/* Their .dk-card entrance, armed by the script, so the cards can never be left hidden. */
.reveal-armed .card {
  opacity: 0;
  transform: translateY(44px) rotateY(46deg) scale(.95);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .95s cubic-bezier(.16, 1, .3, 1);
}
.reveal-armed .card[data-in] { opacity: 1; transform: none; }
.reveal-armed :is(.sign, .court-plate, .ledger) {
  opacity: 0;
  translate: 0 2.75rem;
  transition: opacity 1s var(--ease), translate 1.15s var(--ease);
}
.reveal-armed :is(.sign, .court-plate, .ledger)[data-in] { opacity: 1; translate: none; }

/* Wand: their comet cursor in gold and candle. The native cursor stays on top of it. */
.comet-trail {
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
}
.comet-dot {
  position: fixed;
  z-index: 10010;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--candle);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--gold), 0 0 4px 1px var(--candle);
  pointer-events: none;
  will-change: transform;
  transition: width .18s, height .18s, margin .18s, background .18s, box-shadow .18s;
}
.comet-dot.ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  background: none;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px 2px oklch(.79 .115 84 / .5);
}
.comet-dot.is-off { display: none; }

/* The crescent from the card back, marking each turn of the page. */
.turnpage {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  color: var(--gold-dim);
}
.turnpage::before, .turnpage::after {
  content: "";
  flex: 1;
  border-top: var(--hairline);
}
.turnpage svg { width: 2.25rem; height: 1.2rem; fill: currentColor; }

/* Banner */
.notice {
  position: relative;
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad) 2.75rem;
  background: url("img/grain.webp"), var(--night);
}
.sign {
  position: relative;
  max-width: 76rem;
  margin-inline: auto;
  aspect-ratio: 3 / 1;
  padding: clamp(.25rem, .7vw, .55rem);
  background: var(--paper);
  border-radius: clamp(.4rem, .9vw, .8rem);
  box-shadow: 0 1.6rem 3.4rem var(--shadow);
}
.sign video { width: 100%; height: 100%; object-fit: cover; }
.sign-toggle {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: .5rem;
  color: var(--sky);
  font-size: var(--t-sm);
  font-weight: 500;
}
.sign-toggle:hover { color: var(--candle); }

/* Developers */
.devs {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(4rem, 8vw, 7rem);
  background:
    url("img/grain.webp"),
    radial-gradient(64% 54% at 34% 64%, oklch(.52 .105 66 / .34), transparent 74%),
    var(--night);
}
.devs .turnpage { margin-bottom: clamp(3rem, 6vw, 5rem); }
.devs-lede {
  margin-top: .5rem;
  color: var(--sky);
  font: italic 400 var(--t-xl)/1.15 var(--display);
}
.court {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.court-plate--queen { grid-column: 1 / span 4; margin-top: clamp(2rem, 6vw, 5.5rem); }
.court-plate--king { grid-column: 5 / span 4; }
.ledger { grid-column: 9 / -1; align-self: end; padding-bottom: 2.1rem; }

.court-plate { position: relative; }
.court-plate--queen { rotate: -2.2deg; }
.court-plate--king { rotate: 1.6deg; }
.frame {
  padding: 2.4%;
  background: var(--paper);
  border-radius: clamp(.6rem, 1.1vw, 1rem);
  box-shadow: 0 1.4rem 2.8rem var(--shadow);
}
.frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 717;
  object-fit: cover;
  border-radius: clamp(.3rem, .6vw, .55rem);
}
.court-plate figcaption {
  --n: .6rem;
  position: absolute;
  left: 50%;
  bottom: -.2rem;
  padding: .45em 1.5em .4em;
  background: var(--paper);
  color: var(--ink);
  font: 700 var(--t-lg)/1 var(--display);
  transform: translateX(-50%);
}
.ledger p { color: var(--sky); font: italic 400 var(--t-lg)/1.25 var(--display); }
.ledger ul { margin-top: .85rem; border-top: var(--hairline); }
.ledger li { padding: .75rem 0 .8rem; border-bottom: var(--hairline); }
.ledger a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--gold);
  font: 700 var(--t-xl)/1 var(--display);
}
.ledger span { display: block; font-size: var(--t-sm); }

@media (max-width: 899.98px) {
  .court-plate--queen { grid-column: 1 / span 6; margin-top: 2.5rem; }
  .court-plate--king { grid-column: 7 / span 6; }
  .ledger { grid-column: 1 / -1; margin-top: 2.25rem; padding-bottom: 0; }
}

/* Contact: a letter on the same paper as the cards. */
.talk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad);
  background:
    url("img/grain.webp"),
    radial-gradient(58% 76% at 72% 50%, oklch(.56 .11 66 / .34), transparent 74%),
    var(--night);
}
.letter {
  --n: 1.4rem;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  color: var(--ink);
  filter: drop-shadow(0 1.4rem 1.8rem var(--shadow));
}
.letter::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("img/grain.webp"), var(--paper);
}
.letter::after {
  content: "";
  position: absolute;
  z-index: -1;
  --n: 1.05rem;
  inset: .5rem;
  border: 1px solid var(--gold-dim);
}
.field label {
  display: block;
  margin-bottom: .15rem;
  font: 600 var(--t-lg)/1.3 var(--display);
}
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .1rem;
  background: none;
  color: var(--ink);
  font: inherit;
  border: 0;
  border-bottom: 2px solid oklch(.46 .07 272);
  border-radius: 0;
  resize: vertical;
}
.field input:focus-visible, .field textarea:focus-visible,
.send button:focus-visible { outline-color: var(--gown-lit); outline-offset: 2px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.send button {
  min-height: 2.75rem;
  padding: .55rem 1.5rem;
  background: var(--gown);
  color: var(--candle);
  font-weight: 600;
  transition: background .2s;
}
.send button:hover { background: var(--gown-lit); }
.send button:disabled { background: oklch(.46 .07 272); cursor: progress; }
.send a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-sm);
}
.send a:focus-visible { outline-color: var(--gown-lit); }
.send-status { flex: 1 1 100%; font-weight: 500; }
.send-status:empty { display: none; }
.send-status.is-error { color: oklch(.42 .15 28); }
@media (max-width: 859.98px) {
  .talk { grid-template-columns: minmax(0, 1fr); }
}

/* Closing scene: the hero's trick once more, the name standing behind the castle. */
.closing {
  --w: max(118vw, 150svh);
  position: relative;
  min-height: max(84svh, calc(var(--w) / 3 + 12rem));
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--night), oklch(.215 .056 252) 70%);
}
.night {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: max(100vw - var(--w), min(0px, 46vw - var(--w) * .32));
  width: var(--w);
  height: auto;
  max-width: none;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 30%);
  mask: linear-gradient(to bottom, transparent, #000 30%);
}
.night--land { z-index: 2; -webkit-mask: none; mask: none; }
.closing-mark {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--w) / 3 * .4);
  color: var(--candle);
  font: 700 13.2vw/.86 var(--display);
  letter-spacing: -.012em;
  text-align: center;
  white-space: nowrap;
}
.closing-legal {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: .5rem;
  font-size: var(--t-sm);
  text-align: center;
}
.closing-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-left: .75rem;
  color: var(--gold);
}
/* On tall screens the castle is larger than the type; keep it to the spire's tip. */
@media (max-aspect-ratio: 1/1) {
  .closing-mark { bottom: calc(var(--w) / 3 * .56); }
}
@media (max-width: 719.98px) {
  .closing-mark { font-size: 20vw; }
  .closing-mark span { display: block; }
}

/* 404 */
.lost {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 32rem);
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 100svh;
  padding: var(--pad);
  background:
    url("/img/grain.webp"),
    radial-gradient(62% 62% at 34% 50%, oklch(.56 .11 66 / .32), transparent 74%),
    radial-gradient(120% 100% at 50% 120%, var(--gown), transparent 72%),
    var(--night);
}
.lost img {
  width: 100%;
  height: auto;
  border-radius: 4.2% / 2.5%;
  rotate: -5deg;
  box-shadow: 0 1.6rem 3rem var(--shadow);
}
.lost h1 { font: 700 var(--t-2xl)/1.02 var(--display); text-wrap: balance; }
.lost p { margin-top: 1rem; font-size: var(--t-lg); }
.lost a { color: var(--gold); font-weight: 600; }
@media (max-width: 640px) {
  .lost { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; }
  .lost img { max-width: 11rem; }
}

/* Painted rooms behind the sections: the tarot table, the throne hall, the writing desk. */
.backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; }
.backdrop::after { content: ""; position: absolute; inset: 0; }
.work > :not(.backdrop), .devs > :not(.backdrop), .talk > :not(.backdrop) { position: relative; }
.work { background: var(--night); }
.work .backdrop::after { background: linear-gradient(to bottom, var(--night) 8%, oklch(.15 .032 272 / .58) 34%, oklch(.15 .032 272 / .58) 80%, var(--night)); }
.devs { background: var(--night); }
.devs .backdrop img { object-position: 50% 62%; }
.devs .backdrop::after { background: linear-gradient(to left, oklch(.15 .032 272 / .72), transparent 42%), linear-gradient(to bottom, var(--night), oklch(.15 .032 272 / .28) 30%, oklch(.15 .032 272 / .28) 76%, var(--night)); }
.talk { grid-template-columns: minmax(0, 36rem); gap: clamp(1.5rem, 3vw, 2.5rem); background: var(--night); }
.talk .backdrop img { object-position: 100% 100%; }
.talk .backdrop::after { background: linear-gradient(to bottom, var(--night), transparent 22%); }
@media (max-width: 859.98px) {
  .talk .backdrop::after { background: oklch(.15 .032 272 / .55); }
}

/* Card backs: the product's scene over the plate, its emblem pressed on the seam. */
.scene img { display: block; width: 100%; height: auto; }
.seal { display: block; width: 4rem; height: auto; margin: 0 auto .5rem; border-radius: 50%; }
.js .scene { position: absolute; inset: 0 0 auto; }
.js .seal + .cartouche { inset: 37% 5% 4%; padding-top: 9cqw; padding-bottom: 2cqw; }
.js .seal {
  position: absolute;
  z-index: 1;
  top: 37%;
  left: 50%;
  width: 18cqw;
  margin: 0;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 .2rem var(--paper);
  transform: translate(-50%, -50%);
}
/* Small cards: a shorter scene, so the longest description still fits. */
@container (max-width: 260px) {
  .js .scene { height: 30%; }
  .js .scene img { height: 100%; object-fit: cover; }
  .js .seal { top: 30%; width: 15cqw; }
  .js .seal + .cartouche { inset: 30% 3% 2%; padding: 8cqw 3.5cqw 1cqw; }
}
@media (max-width: 359.98px) {
  .js .scene, .js .seal { display: none; }
  .js .seal + .cartouche { inset: 7% 5%; padding: 3cqw 3.5cqw; }
}
@media (max-width: 899.98px) {
  .devs .backdrop::after { background: linear-gradient(to bottom, var(--night), oklch(.15 .032 272 / .3) 30%, oklch(.15 .032 272 / .84) 62%, var(--night)); }
}