/* Wildcard's site, in the app's house style (brand guidelines v7): the ink room, paper, two greys, no accent
   colour, no gradients, no shadows. The app's own OFL faces, served from here (no third-party font requests). */
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; src: url(/fonts/cormorant-italic.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; src: url(/fonts/instrument-sans.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Martian Mono"; font-weight: 100 800; src: url(/fonts/martian-mono.ttf) format("truetype"); font-display: swap; }

:root {
  --ink: #0a0a0a; --paper: #ffffff; --quiet: #8c8c8c; --line: #262626;
  --gutter: 20px; --measure: 640px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; }
body { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 17px; line-height: 1.8; min-height: 100vh; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.label { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 300; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); }
.headline { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; line-height: 1.08; }
.quiet { color: var(--quiet); }
.rule { height: 1px; background: var(--line); border: 0; }

/* The masthead: the wordmark, set as a card name is, every A upside down. */
.mast { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }
.wordmark { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 200; font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; }
.mast nav a { margin-left: 18px; text-decoration: none; }

/* Actions: lowercase, trailing arrow, one a row, a hairline between. */
.actions { list-style: none; border-top: 1px solid var(--line); }
.actions li { border-bottom: 1px solid var(--line); }
.actions a { display: flex; justify-content: space-between; padding: 16px 0; font-family: "Martian Mono", ui-monospace, monospace; font-weight: 300; font-size: 13px; text-decoration: none; }
.actions a::after { content: "→"; }

/* The card object: 11:19, corners 2/70, the photo matted in paper (sides 3.5/70, top 10.5/70, bottom 12/70). */
.cards { display: flex; gap: 16px; justify-content: center; margin: 56px 0 24px; }
.card { width: 30%; max-width: 190px; aspect-ratio: 11 / 19; background: var(--paper); border-radius: 2.857%; position: relative; color: var(--ink); }
.card img { position: absolute; left: 5%; right: 5%; top: 15%; bottom: 17.14%; width: 90%; height: 67.86%; object-fit: cover; }
.card .numeral, .card .name { position: absolute; left: 0; right: 0; text-align: center; font-family: "Martian Mono", ui-monospace, monospace; font-weight: 200; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(6px, 1.6vw, 10px); }
.card .numeral { top: 5.5%; }
.card .name { bottom: 7%; }
.card:nth-child(2) { transform: translateY(28px); }
.quip { text-align: center; font-size: 15px; color: var(--quiet); }

/* Reading pages: privacy, terms, support. */
.page { padding: 24px 0 96px; }
.page h1 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; font-size: 44px; line-height: 1.1; margin: 24px 0 8px; }
.page h2 { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 300; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.page p, .page li { color: #d9d9d9; margin-bottom: 14px; }
.page ul { padding-left: 20px; }
.page strong { color: var(--paper); font-weight: 600; }

footer { border-top: 1px solid var(--line); padding: 28px 0 48px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
footer a { text-decoration: none; }

@media (max-width: 480px) { .page h1 { font-size: 36px; } .mast nav a { margin-left: 12px; } }