/* Spudkins' holding page, in the look Micah picked on 2026-11-13 ("C": the art book and the counter in calmer,
   plain lettering on everything but the cards). Identity sheet spudkins.md §5.
   Paper and ink tokens: art/book/m.html :root (the paprika accent is left out: Spudkins moved off it, 2026-11-13).
   Kalam only on the card labels; Fraunces 600 for the name; Instrument Sans for the rest.
   The card: square, white, a hand-inked edge, the name on the top band (m.html .c).
   Drawing: art/d3/small/calm/potato.jpg, the game's own, with its near-white paper levelled to pure white so no box shows on the card. Board: art/book/small/block-edge.jpg.
   Fonts are served from this folder; nothing loads from elsewhere. */

@font-face { font-family: Fraunces; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/fraunces-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Kalam; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/kalam-latin-700.woff2) format("woff2"); }

:root {
  --paper: #fbf8f2;
  --card: #ffffff;
  --ink: #26211d;
  --soft: #6b6158;
  --label: #4d5a43;
  --head: Fraunces, Georgia, serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: Kalam, "Comic Sans MS", cursive;
  --c: 200px;                          /* card size; the label band and drawing scale from it */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--body);
  padding-block: 24px;
  -webkit-font-smoothing: antialiased;
}

header, footer { padding: 0 16px; text-align: center; }

h1 {
  margin: 0;
  font: 600 56px/1 var(--head);
  letter-spacing: -.01em;
}

.line { margin: 14px 0 0; font-size: 19px; }

/* the board: the drawn butcher block, long pale planks */
.block {
  position: relative;
  margin: 40px 0;
  height: calc(var(--c) * 1.5);
  background: url(block-edge.jpg) center / cover;
  box-shadow: inset 0 1px 0 rgba(38, 33, 29, .18), inset 0 -1px 0 rgba(38, 33, 29, .18);
}

/* one card on the block */
.c {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--c);
  height: var(--c);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--c) * .035) calc(var(--c) * .035) 0;
  background: var(--card);
  border-radius: 4px 7px 5px 6px;
  box-shadow: 0 0 0 1.5px var(--ink), 2px 3px 0 rgba(38, 33, 29, .16);
  rotate: -2deg;
}

.c b {
  font: 700 calc(var(--c) * .15)/1 var(--hand);
  color: var(--label);
  white-space: nowrap;
  padding: 1px 0 2px;
}

.c img {
  width: calc(var(--c) * .75);
  height: calc(var(--c) * .75);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.by { margin: 0; font-size: 14px; }
.by a {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 97, 88, .4);
  padding-bottom: 1px;
}
.by a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.by a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

@media (min-width: 720px) {
  :root { --c: 260px; }
  h1 { font-size: 64px; }
  .line { font-size: 21px; margin-top: 18px; }
  .block { margin: 52px 0; }
}

/* a phone on its side */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  :root { --c: 150px; }
  h1 { font-size: 44px; }
  .line { font-size: 18px; margin-top: 8px; }
  .block { margin: 20px 0; height: calc(var(--c) * 1.3); }
}

/* the email box (letterpress-house SIGNUPS.md; the list is letterpresslabs.dev/api/list): under the block, above the maker line, calm.
   The field is a white card with the hand-inked edge (.c above); the button is the art book's plain outlined button (art/book/m.html .btn),
   in plain lettering as Micah's "C" asks. */
.signup { max-width: 360px; margin: 0 auto 28px; }
.signup-row { display: flex; gap: 8px; }
.signup input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px 7px 5px 6px;
  background: var(--card);
  box-shadow: 0 0 0 1.5px var(--ink), 2px 3px 0 rgba(38, 33, 29, .12);
  color: var(--ink);
  font: 400 16px/1 var(--body);
}
.signup input[type="email"]::placeholder { color: var(--soft); }
.signup input[type="email"]:focus { outline: 3px solid rgba(77, 90, 67, .45); outline-offset: 2px; }
.signup input[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--ink), 2px 3px 0 rgba(38, 33, 29, .12); }   /* a heavier ink edge: the paprika accent is retired (2026-11-13) */
.signup button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 15px/1 var(--body);
  cursor: pointer;
}
.signup button:hover { background: var(--ink); color: var(--paper); }
.signup button:focus-visible { outline: 3px solid rgba(77, 90, 67, .55); outline-offset: 2px; }
.signup button:disabled { opacity: .55; cursor: default; }
.signup-note, .signup-say { margin: 10px 0 0; font-size: 14px; color: var(--soft); }
.signup-say { color: var(--ink); }
.signup-done { margin: 0 auto 28px; font-size: 16px; outline: none; }
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .signup, .signup-done { margin-bottom: 16px; }
  .signup input[type="email"], .signup button { height: 38px; }
}