/* Whereabouts: the one style sheet for the whole site.
   The brand the cover, the pins and the Etsy shop share: midnight navy and ink, amber lamplight, cream and brass type;
   Limelight for the wordmark, Josefin Sans capitals for bands and buttons, Georgia for reading.
   Fonts come from /fonts/ on this site, never from another host (the Datenschutzerklärung promises it). */

@font-face {
  font-family: "Limelight";
  src: url("/fonts/limelight.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/josefin-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  /* The night: the house in shadow (pins.ts INK, the mark). */
  --night: #0d1524;
  --deep: #08101d;
  --navy: #1a2843;
  --glow: #1b2b4d;
  /* The lamplight and the type on the dark. */
  --amber: #f2b84b;
  --amber-hi: #ffd77f;
  --brass: #c9a45c;
  --cream: #f3e9d2;
  --soft: #e4dac3;
  --dim: #aab0bf;
  /* The paper the cases are printed on, and the ink on it: for anything set on paper (the player, printable pages). */
  --paper: #fbf7ee;
  --paper-2: #f2e9d6;
  --ink: #1d2433;
  --ink-soft: #4b5262;
  --oxblood: #8b2e2a;
  --brass-ink: #6f5219;
  --line: #d9ccae;

  --serif: Georgia, "Iowan Old Style", Charter, "Noto Serif", serif;
  --caps: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --deco: "Limelight", Georgia, serif;

  --gutter: 1.25rem;
  --measure: 34rem;
  --wide: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 1.0625rem/1.6 var(--serif);
  color: var(--soft);
  background: var(--night);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--amber); text-underline-offset: 0.18em; }
a:hover { color: var(--amber-hi); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1em; }

.skip {
  position: absolute; left: -999px; top: 0.5rem;
  padding: 0.5rem 1rem; background: var(--amber); color: var(--night); font: 700 0.9rem var(--caps);
}
.skip:focus { left: 0.5rem; z-index: 10; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 3.5rem 0; }

/* ---- Type ---------------------------------------------------------------- */

.wordmark {
  margin: 0;
  font: 400 clamp(2.1rem, 10.4vw, 4.4rem)/1 var(--deco);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.band {
  display: inline-block;
  padding: 0.5em 1.1em 0.32em;
  background: var(--amber);
  color: var(--night);
  font: 700 clamp(0.95rem, 4vw, 1.2rem)/1 var(--caps);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* The letter-spacing trails after the last letter; pull it back so the band looks centred. */
  padding-right: calc(1.1em - 0.32em);
}
.kicker {
  margin: 0 0 0.75rem;
  font: 700 0.8rem/1.3 var(--caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
}
h2 {
  margin: 0 0 1.25rem;
  font: 400 clamp(1.6rem, 6vw, 2.1rem)/1.2 var(--serif);
  color: var(--cream);
  text-wrap: balance;
}
h3 {
  margin: 0 0 0.4rem;
  font: 700 0.95rem/1.3 var(--caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}
.lede { font-size: 1.15rem; max-width: var(--measure); }

/* ---- Buttons --------------------------------------------------------------- */

.actions { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 22rem; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.9rem 1.4rem 0.7rem;
  border: 2px solid var(--amber);
  background: var(--amber);
  color: var(--night);
  font: 700 0.95rem/1.2 var(--caps);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--amber-hi); border-color: var(--amber-hi); color: var(--night); }
.btn .arrow { font-family: var(--serif); letter-spacing: 0; }
.btn .nw { white-space: nowrap; }
/* Not a link yet: says where the paperback will be, and that it is not there today. */
.btn-soon {
  background: transparent;
  border: 2px solid rgba(201, 164, 92, 0.55);
  color: var(--soft);
  box-shadow: none;
  cursor: default;
  flex-direction: column;
  gap: 0.15rem;
}
.btn-soon small { font: italic 0.85rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--dim); }

/* ---- The mark, the frame and the sunburst (used sparingly) ------------------- */

.mark { width: 3.5rem; height: 3.5rem; }
.mark svg { width: 100%; height: 100%; display: block; }

/* The cover's stepped frame: two brass hairlines with the corners cut in. */
.frame {
  position: relative;
  padding: 0.6rem;
  border: 1px solid var(--brass);
}
.frame::before {
  content: "";
  position: absolute; inset: 0.3rem;
  border: 1px solid rgba(201, 164, 92, 0.55);
  pointer-events: none;
}

/* The cover's tapered brass rays, as a quiet glow behind one thing on the page. */
.sunburst { position: relative; isolation: isolate; }
.sunburst::before {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(242, 184, 75, 0.22), rgba(13, 21, 36, 0) 70%),
    repeating-conic-gradient(from 0deg, rgba(201, 164, 92, 0.16) 0deg 5deg, rgba(201, 164, 92, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask: radial-gradient(closest-side, #000 35%, transparent 100%);
  pointer-events: none;
}

/* A page of the book, on paper, so the case reads. */
.sheet {
  margin: 0;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.sheet img { width: 100%; }
.sheet a { display: block; }

/* ---- Footer (every page: the Impressum and the Datenschutzerklärung) ---------- */

.site-foot {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid rgba(201, 164, 92, 0.3);
  background: var(--deep);
  color: var(--dim);
  font-size: 0.9rem;
}
.site-foot .wrap { display: grid; gap: 1.25rem; }
.site-foot .brand { display: flex; align-items: center; gap: 0.75rem; color: var(--cream); font: 400 1.25rem/1 var(--deco); letter-spacing: 0.04em; text-transform: uppercase; }
.site-foot .brand .mark { width: 2rem; height: 2rem; }
.site-foot .made { max-width: 44rem; margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.site-foot nav a {
  display: inline-block; padding: 0.4rem 0;
  font: 700 0.8rem/1.2 var(--caps); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
}
.site-foot nav a:hover { color: var(--amber); }
.site-foot .legal { margin: 0; font-size: 0.82rem; }

/* ---- The legal pages: /impressum/ and /datenschutz/ (AL-055) ------------------- */
/* Their words are the law's and Recht & Geld's: this only dresses them. Kept apart from the rules below, with its own
   wider-screen rules, so it merges beside other pages' additions. */

/* The slim bar back to the home page, the same as on /week/NN/ and /sample/ (AL-018). When both have reached main,
   the second copy of these four rules can go. */
.topbar { padding: 0.9rem 0; border-bottom: 1px solid rgba(201, 164, 92, 0.25); background: var(--deep); }
.topbar a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--cream); text-decoration: none;
  font: 400 1.15rem/1 var(--deco); letter-spacing: 0.04em; text-transform: uppercase;
}
.topbar a:hover { color: var(--amber-hi); }
.topbar .mark { width: 1.75rem; height: 1.75rem; }

.legal-page {
  padding: 2.5rem 0 4rem;
  background: radial-gradient(ellipse 110% 40rem at 50% 0%, var(--glow) 0%, var(--night) 70%);
  overflow-wrap: break-word;
}
.legal-page .legal-part, .legal-page hr { max-width: 44rem; }
/* German compounds (Datenschutz-Aufsichtsbehörde) break at a syllable on a phone rather than run off it. */
.legal-page p, .legal-page li { hyphens: auto; -webkit-hyphens: auto; }
.legal-page h1 {
  margin: 0 0 1rem;
  font: 400 clamp(1.8rem, 7.5vw, 2.75rem)/1.15 var(--serif);
  color: var(--cream);
  text-wrap: balance;
}
.legal-page h2 {
  margin: 2.25rem 0 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 164, 92, 0.3);
  font: 400 clamp(1.25rem, 4.8vw, 1.45rem)/1.3 var(--serif);
  color: var(--cream);
  text-wrap: balance;
  scroll-margin-top: 1rem;
}
.legal-page .n { color: var(--amber); }
.legal-page p { color: var(--soft); }
.legal-page code {
  padding: 0.05em 0.35em;
  background: rgba(26, 40, 67, 0.85);
  border: 1px solid rgba(201, 164, 92, 0.3);
  font: 0.88em/1 ui-monospace, Consolas, "Courier New", monospace;
  color: var(--cream);
}
.legal-page ul { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.8rem; }
.legal-page ul li { position: relative; padding-left: 1.6rem; color: var(--soft); }
.legal-page ul li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  background: var(--amber);
  transform: rotate(45deg);
}
.legal-page hr {
  height: 1px; margin: 4rem 0 3rem; border: 0;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0), var(--brass) 20%, var(--brass) 80%, rgba(201, 164, 92, 0));
}
.legal-page .stand { margin-top: 2.5rem; font-style: italic; color: var(--dim); }

/* "English below": a small outlined button to the other half of the page. */
.legal-page .lang { margin: 0 0 2rem; }
.legal-page .lang a {
  display: inline-block;
  padding: 0.7rem 1rem 0.55rem;
  border: 1px solid rgba(201, 164, 92, 0.7);
  color: var(--cream);
  font: 700 0.78rem/1.2 var(--caps); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
}
.legal-page .lang a:hover { border-color: var(--amber); color: var(--amber-hi); background: rgba(242, 184, 75, 0.1); }

/* The Datenschutzerklärung's sections, listed under its title: the headings themselves, as links. */
.legal-page .toc {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(201, 164, 92, 0.45);
  background: rgba(26, 40, 67, 0.55);
}
.legal-page .toc ol { list-style: none; margin: 0; padding: 0; }
.legal-page .toc li + li { border-top: 1px solid rgba(201, 164, 92, 0.18); }
.legal-page .toc a {
  display: grid; grid-template-columns: 2rem 1fr; align-items: baseline;
  padding: 0.45rem 0;
  color: var(--soft); text-decoration: none; line-height: 1.4;
}
.legal-page .toc a:hover { color: var(--amber-hi); }
.legal-page .toc a:hover .n { color: var(--amber-hi); }

/* The Impressum: each entry on a card, like the editions on the home page. */
.legal-page .entries { display: grid; gap: 1rem; }
.legal-page .entry { padding: 1.25rem 1.25rem 0.35rem; border: 1px solid rgba(201, 164, 92, 0.45); background: rgba(26, 40, 67, 0.55); }
.legal-page .entry h2 {
  margin: 0 0 0.6rem; padding: 0; border: 0;
  /* In the case it is written in: capitals would show "gemäß" as "GEMÄSS". */
  font: 700 0.95rem/1.4 var(--caps); letter-spacing: 0.05em;
  color: var(--amber);
}
.legal-page .entry p { color: var(--cream); font-size: 1.05rem; }

@media (min-width: 48rem) {
  .legal-page { padding: 4rem 0 5rem; }
  .legal-page .toc { padding: 1.25rem 1.75rem; }
  .legal-page .entries { grid-template-columns: 1fr 1fr; }
  .legal-page .entry:first-child { grid-row: span 2; }
}
/* Wide enough for both: the text on the left at a reading width, its sections beside it, staying in view. */
@media (min-width: 64rem) {
  .legal-page .with-toc { display: grid; grid-template-columns: minmax(0, 44rem) 17rem; column-gap: 3rem; max-width: none; }
  .legal-page .with-toc > * { grid-column: 1; }
  .legal-page .with-toc > .toc {
    grid-column: 2; grid-row: 1 / span 80; align-self: start;
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow-y: auto;
    margin: 0.4rem 0 0; padding: 0.75rem 1.25rem;
  }
  .legal-page .with-toc + hr { max-width: none; }
  .legal-page .with-toc > .toc a { grid-template-columns: 1.75rem 1fr; padding: 0.45rem 0; font-size: 0.92rem; }
}

/* ---- A plain page (404 and the pages to come) --------------------------------- */

.plain { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 4rem 0; }
.plain .mark { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; }
.plain .actions { margin: 2rem auto 0; }
.plain .wordmark { font-size: clamp(1.8rem, 8vw, 3rem); }
.plain .strap { margin: 1rem auto 0; max-width: 28rem; font: italic 1.15rem/1.5 var(--serif); text-wrap: balance; }

/* ---- The free cases: /week/NN/ and /sample/ (AL-018) ----------------------------- */

/* The slim bar back to the home page (.topbar) is in the legal pages' section above (AL-055), shared by all. */

.case-head { padding-bottom: 2rem; background: radial-gradient(ellipse 110% 90% at 50% 0%, var(--glow) 0%, var(--night) 70%); }
.case-head h1 {
  margin: 0 0 1rem;
  font: 400 clamp(2rem, 8vw, 3rem)/1.1 var(--serif);
  color: var(--cream);
  text-wrap: balance;
}
.case-head .facts {
  margin: 0 0 1.5rem;
  font: 700 0.78rem/1.4 var(--caps); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass);
}
.case-head .lede { color: var(--cream); }
.case-head .actions { margin-top: 1.75rem; }
.btn-line { background: transparent; color: var(--cream); box-shadow: none; border-color: rgba(201, 164, 92, 0.7); }
.btn-line:hover { background: rgba(242, 184, 75, 0.12); color: var(--amber-hi); border-color: var(--amber); }
.btn-line small { font: 400 0.8rem/1 var(--caps); letter-spacing: 0.08em; color: var(--dim); }

.answer-note { background: linear-gradient(var(--night), var(--deep)); }
.answer-note p { max-width: var(--measure); }

/* The email signup: an address and one button; the reply shows in .status (signup.js). */
.signup-form { max-width: 36rem; margin-top: 1.5rem; }
.signup-form label {
  display: block; margin-bottom: 0.5rem;
  font: 700 0.78rem/1.3 var(--caps); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream);
}
.signup-form .row { display: flex; flex-direction: column; gap: 0.75rem; }
.signup-form .row[hidden] { display: none; }
.signup-form input[type="email"] {
  width: 100%; min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--brass); border-radius: 0;
  background: var(--paper); color: var(--ink);
  font: 1.05rem/1.2 var(--serif);
}
.signup-form input[type="email"]:focus-visible { outline-offset: 2px; }
.signup-form button { cursor: pointer; }
.signup-form button:disabled { opacity: 0.6; cursor: wait; }
.signup-form .status { margin: 0.9rem 0 0; color: var(--amber-hi); }
.signup-form .status:empty { display: none; }
.signup-form.done .status { font-size: 1.15rem; color: var(--cream); }
.signup-form .fine { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--dim); }

/* The answer, step by step: one picture per deduction. */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 2rem; counter-reset: step; }
.steps li { display: grid; gap: 0.75rem; max-width: 30rem; }
.steps li p { margin: 0; color: var(--cream); }
.steps .sheet { max-width: 22rem; }
.answer-steps { background: var(--night); }
.steps-solved { max-width: 22rem; margin-bottom: 0.5rem; }
.answer-note .actions { margin-top: 1.5rem; }

/* ---- Wider screens --------------------------------------------------------------- */

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
  section { padding: 4.5rem 0; }
  .actions { flex-direction: row; max-width: none; }
  .actions .btn { flex: 0 1 auto; padding-inline: 1.75rem; white-space: nowrap; }
  .site-foot .wrap { grid-template-columns: auto 1fr; align-items: start; column-gap: 3rem; }
  .site-foot .brand { grid-row: span 3; }
  .signup-form .row { flex-direction: row; }
  .signup-form input[type="email"] { flex: 1; }
  .signup-form .btn { flex: 0 0 auto; white-space: nowrap; }
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- The case files, the shelf and the letter (AL-072) ------------------------------ */
/* One look per job (Alexander, Oct 17: "everything looks the same"): the free cases are case files (kraft folders,
   the day they came out on a typed tab, the case page peeking out, a stamp on the newest); the shop is a shelf of
   covers (the packs drawn as their Etsy photo 1 draws them); the email signup is a letter. The rest stays the dark
   house. Kept apart from the rules above, with its own wider-screen rules, so it merges beside other pages' additions. */

:root {
  --typed: "Courier New", Courier, ui-monospace, monospace;
  --kraft: #d7b677;
  --kraft-hi: #e4c78f;
  --kraft-lo: #c49f5b;
  --kraft-back: #b98f4c;
  --kraft-ink: #4a3412;
  --stamp: #a3241c;
}

/* The Halloween line at the very top (AL-069), until the date in its data-until. */
.season-line {
  margin: 0; padding: 0.7rem 1rem; text-align: center;
  background: #e8762b; color: #120c08;
  font: 700 0.9rem/1.35 var(--caps); letter-spacing: 0.06em; text-transform: uppercase;
}
.season-line a { color: inherit; text-decoration: none; }
.season-line a span { text-decoration: underline; text-underline-offset: 0.18em; }

/* The home page's top: the brand, small, then the question. */
.lead { padding: 1.4rem 0 2.75rem; background: radial-gradient(ellipse 110% 70% at 50% 0%, var(--glow) 0%, var(--night) 70%); }
.lead .brand { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.4rem; }
.lead .brand .mark { width: 2.6rem; height: 2.6rem; flex: none; }
.lead .brand .names { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.lead .wordmark { font-size: clamp(1.6rem, 7.6vw, 2.8rem); }
.lead .band { font-size: 0.72rem; letter-spacing: 0.3em; padding: 0.42em 0.8em 0.26em; padding-right: calc(0.8em - 0.3em); }
.lead .ask { text-align: center; margin: 0 auto 1.1rem; max-width: 34rem; }
.lead .ask h2 { margin: 0 0 0.3rem; font-size: clamp(1.6rem, 6.6vw, 2.5rem); }
.lead .ask p { margin: 0; color: var(--soft); text-wrap: balance; }
.lead .all { margin: 1.4rem auto 0; max-width: 34rem; text-align: center; }
.lead .all p { margin: 0; }
.lead .how { color: var(--dim); font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.4rem; text-wrap: balance; }
.more-link {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6rem 0.2rem;
  color: var(--amber); text-decoration: none;
  font: 700 0.85rem/1.2 var(--caps); letter-spacing: 0.16em; text-transform: uppercase;
}
.more-link:hover { color: var(--amber-hi); }
.more-link .arrow { font-family: var(--serif); letter-spacing: 0; }

/* A case file: the folder's back with its tab, the case page clipped in, the front with the words. The whole file is
   one link to the case's player. */
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.file { position: relative; display: block; max-width: 34rem; padding-top: 4.6rem; color: var(--ink); text-decoration: none; }
.file:hover { color: var(--ink); }
.file::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.55rem; bottom: 0.5rem;
  background: var(--kraft-back); border-radius: 0 0.6rem 0.6rem 0.6rem;
}
.file-tab {
  position: absolute; left: 0; top: 0; z-index: 2;
  padding: 0.35rem 0.7rem 0.55rem; background: var(--kraft-back); border-radius: 0.6rem 0.6rem 0 0;
}
.file-tab span {
  display: block; padding: 0.22rem 0.5rem 0.16rem; background: var(--paper);
  font: 700 0.8rem/1.2 var(--typed); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.file-paper {
  position: absolute; z-index: 1; top: 0.6rem; left: 47%; right: 0.85rem; height: 6rem; overflow: hidden;
  background: #fff; transform: rotate(1.6deg); transform-origin: 0 100%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}
.file-paper img { width: 100%; }
.file-clip { position: absolute; z-index: 3; top: 0.05rem; right: 1.8rem; width: 0.85rem; height: 2.8rem; }
.file-front {
  position: relative; z-index: 2; display: block;
  padding: 1.3rem 1.2rem 1.35rem; border-radius: 0.2rem 0.2rem 0.6rem 0.6rem;
  background: linear-gradient(172deg, var(--kraft-hi), var(--kraft) 45%, var(--kraft-lo));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 40px rgba(0, 0, 0, 0.5);
}
.file-kicker {
  display: block; margin: 0 0 0.35rem;
  font: 700 0.74rem/1.35 var(--caps); letter-spacing: 0.18em; text-transform: uppercase; color: var(--kraft-ink);
}
/* A seasonal case wears its pack's colour (case-files.json `dress`): the Halloween weeks, Murder in the Dark's
   pumpkin, so the file and the pack's Etsy photo 1 look alike. */
.file.dress-halloween {
  --kraft: #e2914a; --kraft-hi: #eca462; --kraft-lo: #cd7834; --kraft-back: #b05a1c; --kraft-ink: #3a1804;
}
/* The stamp sits in the corner: the words beside it keep clear of it. */
.stamp ~ .file-kicker { padding-right: 5.2rem; }
.file-title {
  display: block; margin: 0 0 0.45rem; padding-right: 4.2rem;
  font: 400 clamp(1.55rem, 6.4vw, 2rem)/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink);
}
.file-line { display: block; margin: 0 0 0.7rem; font: italic 1rem/1.5 var(--serif); color: #3b301f; }
.file-facts {
  display: block; margin: 0 0 1.05rem;
  font: 700 0.72rem/1.4 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kraft-ink);
}
.file-go {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 3.1rem; padding: 0.85rem 1.3rem 0.65rem;
  background: var(--night); color: var(--cream);
  font: 700 0.9rem/1.2 var(--caps); letter-spacing: 0.13em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: background-color 0.15s;
}
.file-go .arrow { font-family: var(--serif); letter-spacing: 0; }
.file:hover .file-go, .file:focus-visible .file-go { background: var(--oxblood); }
.file:focus-visible { outline-offset: 6px; }
/* The newest case's stamp, in red ink across the corner. */
.stamp {
  position: absolute; z-index: 3; top: 0.95rem; right: 0.8rem;
  padding: 0.32rem 0.5rem 0.14rem; border: 3px solid var(--stamp); border-radius: 0.25rem;
  color: var(--stamp); font: 700 1.05rem/1 var(--caps); letter-spacing: 0.16em; text-transform: uppercase;
  transform: rotate(-9deg); opacity: 0.88;
}

/* The subscribers' case: an envelope, sealed with the mark, opened by signing up. */
.envelope {
  position: relative; max-width: 34rem; padding: 5.1rem 1.2rem 1.4rem;
  background: var(--paper-2); color: var(--ink); border-radius: 0.3rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); scroll-margin-top: 1rem;
}
.envelope::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3.6rem;
  background: #e6d9bd; clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 0.3rem 0.3rem 0 0;
}
.envelope .seal {
  position: absolute; left: 50%; top: 2.1rem; width: 3rem; height: 3rem; margin-left: -1.5rem;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c0392f, #7a1914 75%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.envelope .seal svg { width: 1.35rem; height: 1.35rem; display: block; }
.envelope .file-tab { position: static; display: inline-block; padding: 0; margin: 0.4rem 0 0.9rem; background: none; }
.envelope .file-tab span { background: #fff; border: 1px solid var(--line); }
.envelope .file-title { padding-right: 0; }
.envelope p { color: var(--ink-soft); }

/* A form on paper (the envelope, the letter): the signup form's colours for the light ground. */
.on-paper .signup-form label { color: var(--ink); }
.on-paper .signup-form .status { color: var(--oxblood); }
.on-paper .signup-form.done .status { color: var(--ink); }
.on-paper .signup-form .fine { color: var(--ink-soft); }
.on-paper .signup-form .fine a { color: var(--oxblood); }
.on-paper .signup-form input[type="email"] { background: #fff; }
.on-paper .btn { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }

/* The Friday letter: cream paper with an airmail edge and a stamp. */
.letter { background: var(--deep); }
.letter-card {
  position: relative; max-width: 42rem; padding: 2rem 1.3rem 1.6rem;
  background: var(--paper); color: var(--ink);
  border-top: 7px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--oxblood) 0 14px, var(--paper) 14px 22px, var(--navy) 22px 36px, var(--paper) 36px 44px) 7;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.letter-card .kicker { color: var(--oxblood); }
.letter-card h2 { color: var(--ink); padding-right: 4.5rem; }
.letter-card p { color: var(--ink-soft); }
.letter-stamp {
  position: absolute; top: 1.4rem; right: 1.2rem; width: 3.6rem; height: 4.2rem; padding: 0.35rem;
  background: var(--paper); border: 2px dashed var(--brass); transform: rotate(4deg);
}
.letter-stamp svg { width: 100%; height: 100%; display: block; }

/* The shelf: what to buy once one case is not enough. Each item is its photos (its approved Etsy listing photos,
   Alexander, Oct 18) and its buttons, one tap to the store (through /go/, so the counter sees the tap). */
.shelf { background: linear-gradient(var(--night), var(--deep)); }
.shelf .intro { max-width: var(--measure); }
.products { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.product {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(26, 40, 67, 0.6); border: 1px solid rgba(201, 164, 92, 0.3);
}
.product .info { display: flex; flex-direction: column; flex-grow: 1; padding: 0.9rem 1.1rem 1.15rem; }
.product .info .buy { margin-top: auto; }
.product h3 { margin: 0 0 0.3rem; font: 400 1.22rem/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--cream); }
.product .what { margin: 0 0 0.45rem; font-size: 0.95rem; line-height: 1.5; color: var(--soft); }
.product .facts { margin: 0 0 0.85rem; font: 700 0.7rem/1.4 var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.product .buy { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn-small {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.75rem; padding: 0.65rem 0.9rem 0.5rem;
  background: var(--amber); color: var(--night); text-decoration: none;
  font: 700 0.76rem/1.2 var(--caps); letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-small:hover { background: var(--amber-hi); color: var(--night); }
.btn-small .arrow { font-family: var(--serif); letter-spacing: 0; }
.ribbon {
  align-self: flex-start; display: inline-block; margin: 0 0 0.45rem; padding: 0.32rem 0.5rem 0.2rem;
  background: #e8762b; color: #120c08;
  font: 700 0.66rem/1 var(--caps); letter-spacing: 0.14em; text-transform: uppercase;
}

/* A product's photos: one at a time, swiped on a phone (each snaps into place), stepped with arrows where there is a
   mouse, a dot for each (case-files.ts writes it, its few lines of script move the dot and the arrows). */
.gallery { position: relative; }
.gallery .slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; background: var(--night);
}
.gallery .slides::-webkit-scrollbar { display: none; }
.gallery .slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
.gallery .slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery .slide { position: relative; }
.gallery .tag {
  position: absolute; left: 0.6rem; bottom: 0.6rem; padding: 0.3rem 0.5rem 0.18rem;
  background: rgba(13, 21, 36, 0.85); border: 1px solid rgba(201, 164, 92, 0.7); color: var(--cream);
  font: 700 0.66rem/1 var(--caps); letter-spacing: 0.14em; text-transform: uppercase;
}
.gallery .dots { position: absolute; left: 0; right: 0; bottom: 0.55rem; display: flex; justify-content: center; gap: 0.4rem; pointer-events: none; }
.gallery .dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(243, 233, 210, 0.45); box-shadow: 0 0 0 1px rgba(13, 21, 36, 0.5); }
.gallery .dots i.on { background: var(--amber); }
.gallery .step {
  position: absolute; top: calc(50% - 1.25rem); width: 2.5rem; height: 2.5rem; padding: 0 0 0.15rem; border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.7); background: rgba(13, 21, 36, 0.78); color: var(--cream);
  font: 400 1.7rem/1 var(--serif); cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.gallery .step.prev { left: 0.6rem; }
.gallery .step.next { right: 0.6rem; }
.gallery:hover .step, .gallery .step:focus-visible { opacity: 1; }
.gallery .step:hover { border-color: var(--amber); color: var(--amber-hi); }
@media (hover: none) { .gallery .step { display: none; } }

/* The case files page. */
.files-head { padding: 2.25rem 0 1.5rem; background: radial-gradient(ellipse 110% 90% at 50% 0%, var(--glow) 0%, var(--night) 70%); }
.files-head h1 { margin: 0 0 0.9rem; font: 400 clamp(2rem, 8vw, 3rem)/1.1 var(--serif); color: var(--cream); }
.files-head .lede { color: var(--soft); }
.files-list { padding: 1.5rem 0 3.5rem; background: var(--night); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar a.topbar-link { font: 700 0.78rem/1.2 var(--caps); letter-spacing: 0.16em; color: var(--amber); }

@media (min-width: 48rem) {
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; align-items: start; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter-card { padding: 2.5rem 2.5rem 2rem; }
}
@media (min-width: 60rem) {
  .lead { padding: 3rem 0 4rem; }
  .lead .wrap { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 3.5rem; align-items: center; }
  .lead .brand { justify-content: flex-start; margin-bottom: 2rem; }
  .lead .brand .mark { width: 3.4rem; height: 3.4rem; }
  .lead .band { font-size: 0.9rem; }
  .lead .ask { text-align: left; margin: 0; }
  .lead .ask h2 { font-size: 2.6rem; }
  .lead .ask p { font-size: 1.2rem; }
  .lead .all { text-align: left; margin: 1.5rem 0 0; }
  .lead .newest { grid-column: 2; grid-row: 1 / span 3; }
}