/* The page is only a window onto the table: the canvas draws the room, the ink layer lays HTML on the papers. */
:root {
  --ink: #2b1d14;
  --ink-soft: #5d4634;
  --rubric: #8e1f1a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #040102;
  font: 19px/1.5 "Sorts Mill Goudy", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
html.ready #gl { opacity: 1; }

/* Invisible buttons laid exactly over the deck and the cards. */
.hits { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.hit {
  position: absolute;
  padding: 0; border: 0; background: transparent;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hit:focus-visible { outline: none; background: rgb(255 230 170 / .12); }

/* The ink: multiplied onto the paper the canvas has lit, so it darkens with the paper in the shadows. */
.ink { position: fixed; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity 1.4s ease; }
html.ready .ink { opacity: 1; }
.ink > div { pointer-events: none; }
.sheet {
  container-type: size;
  color: var(--ink);
  font-family: "IM Fell English", serif;
  -webkit-font-smoothing: antialiased;
}
.sheet-in { width: 100%; height: 100%; }
.sheet p { margin: 0; }
.sheet button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit;
}
.sheet button, .sheet a, .scroll-window { pointer-events: auto; }
.sheet :focus-visible { outline: 2px dashed var(--rubric); outline-offset: 3px; border-radius: 3px; }
.manicule { display: inline-block; width: 2.2em; height: 1em; flex: none; }
.manicule svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The invitation */
.slip .sheet-in {
  display: flex; flex-direction: column; justify-content: center; gap: 2.6cqw;
  padding: 8cqw 8.5cqw 6cqw;
  font-size: 5.2cqw;
  line-height: 1.36;
}
.slip .kicker { font-family: "IM Fell English SC", serif; color: var(--rubric); letter-spacing: .14em; font-size: 4.9cqw; }
.slip .lead { font-size: 6.4cqw; line-height: 1.24; }
.slip .quiet { font-style: italic; color: var(--ink-soft); }
.slip .cta button { display: inline-flex; align-items: center; gap: 2.6cqw; color: var(--rubric); font-size: 5.8cqw; text-align: left; line-height: 1.2; }
.slip .skip { color: var(--ink-soft); font-style: italic; font-size: 4.8cqw; text-underline-offset: .2em; pointer-events: auto; }

/* The note beside the hand: which place, which card, keep it */
.note .sheet-in {
  display: grid; grid-template-rows: 1fr auto; justify-items: center;
  padding: 5cqw 6cqw 4cqw;
  text-align: center;
}
.note-body { display: grid; align-content: center; justify-items: center; gap: .6cqw; }
.note .num { font-family: "IM Fell English SC", serif; letter-spacing: .2em; font-size: 3.7cqw; color: var(--ink-soft); }
.note .title { margin: 0; font-weight: 400; font-style: italic; font-size: 8.4cqw; line-height: 1.05; color: var(--rubric); }
.note .text, .note .help { font-style: italic; font-size: 4.3cqw; line-height: 1.32; color: var(--ink-soft); text-wrap: balance; max-width: 92cqw; }
.note .help b { font-style: normal; font-weight: 400; color: var(--rubric); }
.note-body:has(.choice:not([hidden])) .text { display: none; }
.note .choice { display: grid; justify-items: center; gap: .2cqw; margin-top: .8cqw; }
.note .name { font-size: 6.4cqw; line-height: 1.1; }
.note .tag { font-style: italic; font-size: 4cqw; color: var(--ink-soft); line-height: 1.25; max-width: 88cqw;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note .keep-btn {
  display: inline-flex; align-items: center; gap: 2.4cqw; margin-top: 1cqw;
  font-size: 6cqw; color: var(--rubric);
  text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .22em;
}
.note .tools { display: flex; align-items: center; gap: 2.4cqw; font-style: italic; font-size: 3.9cqw; color: var(--ink-soft); }
.note .tools button { font-style: italic; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(43 29 20 / .45); text-underline-offset: .2em; }
.note .tools button[disabled] { opacity: .45; cursor: default; text-decoration: none; }

/* A camera's falloff and a little film grain over the whole picture */
.vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 48%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .5) 100%);
}
.grain {
  position: fixed; inset: -12%; z-index: 5; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
.nojs { position: fixed; inset: 40% 10% auto; color: #e9d6ab; text-align: center; font-family: Georgia, serif; }
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  #gl { transition: none; }
}