/* userpoker.com — "The Fitting" design system
   Poker rooms fitted to the player, like a tailor fits a suit.
   Pattern-paper kraft ground with a stitch-dot texture, ink, one rust
   thread accent, tape-measure yellow reserved for the tape motif.
   Bodoni Moda display, typewriter mono for ticket labels, quiet body.
   Signature system: the FIT TICKET, the measurement card every verdict
   page is written on. Buttons are ink; the yellow never competes. */

:root {
  --paper: #efe7d8;
  --paper-deep: #e6dbc5;
  --ticket: #fbf6ea;
  --ink: #2a2320;
  --ink-soft: #55493f;
  --ink-faint: #8a7a68;
  --thread: #a3562c;
  --thread-deep: #86431f;
  --tape: #e8b93c;
  --stitch: #c9bda9;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;

  --display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --wrap: 66rem;
  --prose: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

html { overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--ink); background: var(--paper);
  background-image: radial-gradient(circle, rgba(42, 35, 32, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.8vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.35rem; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
a { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--thread); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.prose { max-width: var(--prose); }
.eyebrow {
  font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--thread); font-weight: 600;
}

/* Header — atelier masthead */
.site-header { background: var(--paper); border-bottom: 2px solid var(--ink); }
.site-header .bar { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-4); }
.logo {
  font-family: var(--display); font-weight: 700; font-size: 1.45rem; color: var(--ink);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.logo em { font-style: italic; font-weight: 400; color: var(--thread); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.site-nav a { font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.nav-cta {
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: 4px; white-space: nowrap; font-weight: 700;
}
.site-nav a.nav-cta:hover { background: #453a33; }
.age-chip {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  border: 2px solid var(--ink-soft); border-radius: 999px; padding: 2px 9px;
  color: var(--ink-soft); flex: none;
}
@media (max-width: 720px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .site-header .bar, .site-nav { gap: var(--s-3); }
  .logo { font-size: 1.15rem; }
}

/* The measuring tape (motif, used once per page at most) */
.tape { height: 32px; max-width: 420px; border: 2px solid var(--ink); border-radius: 3px; position: relative;
  background: repeating-linear-gradient(90deg, var(--tape) 0 78px, var(--ink) 78px 80px); }
.tape::after { content: "10  20  30  40  50"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-around; font: 600 12px var(--mono); color: var(--ink); letter-spacing: 0.3em; }

/* Hero */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero .grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .hero .grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero h1 { max-width: 14ch; margin-top: var(--s-4); }
.hero .sub { margin-top: var(--s-4); font-size: 1.13rem; color: var(--ink-soft); max-width: 48ch; }
.hero .btn { margin-top: var(--s-5); }
.hero .micro { display: block; margin-top: var(--s-3); font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }
.hero .tape { margin-top: var(--s-6); }

/* The fit ticket (signature) */
.ticket {
  background: var(--ticket); border: 2px solid var(--ink); border-radius: 4px;
  padding: var(--s-5) var(--s-6); box-shadow: 8px 8px 0 rgba(42, 35, 32, 0.18);
}
.ticket.tilt { transform: rotate(1.4deg); }
.ticket .t-head {
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s-2); margin-bottom: var(--s-4);
}
.ticket h3, .ticket .t-name { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin-bottom: var(--s-3); line-height: 1.1; }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 0.92rem; }
.ticket dt { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--thread); padding-top: 3px; }
.ticket dd { border-bottom: 1px dashed var(--stitch); padding-bottom: 4px; }
.ticket .fit { margin-top: var(--s-4); font-family: var(--display); font-style: italic; font-size: 1.18rem; color: var(--thread); line-height: 1.35; }
.ticket .btn { margin-top: var(--s-4); }

/* Buttons — ink only */
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 13px 30px; border-radius: 4px; border: none; cursor: pointer; min-height: 44px;
  font-family: inherit;
}
.btn:hover { background: #453a33; }

/* Sections */
.section { padding-block: var(--s-8); }
.section.deep { background: var(--paper-deep); border-block: 2px solid var(--ink); }
.section-head { max-width: var(--prose); margin-bottom: var(--s-6); }
.section-head h2 { margin-top: var(--s-2); }
.section-head p { margin-top: var(--s-3); color: var(--ink-soft); }

/* The fitting book — ledger of profiles, stitched rows */
.book { border: 2px solid var(--ink); background: var(--ticket); border-radius: 4px; }
.book a, .book .row {
  display: grid; grid-template-columns: 5.2rem 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: var(--s-4) var(--s-5); text-decoration: none; border-bottom: 1px dashed var(--stitch);
}
.book > *:last-child { border-bottom: none; }
.book .no { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.1em; }
.book .name { font-family: var(--display); font-weight: 700; font-size: 1.18rem; }
.book .status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.book a:hover { background: rgba(163, 86, 44, 0.07); }
.book a .status.ready { color: var(--thread); font-weight: 600; }
@media (max-width: 560px) {
  .book a, .book .row { grid-template-columns: 1fr auto; }
  .book .no { display: none; }
}

/* The measuring room (the fitter) */
.fitter { border: 2px solid var(--ink); background: var(--ticket); border-radius: 4px; padding: var(--s-6); }
.fitter fieldset { border: none; padding: 0; margin: 0 0 var(--s-5); }
.fitter legend { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--thread); margin-bottom: var(--s-3); }
.fitter .opts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fitter label { position: relative; cursor: pointer; }
.fitter input { position: absolute; opacity: 0; inset: 0; }
.fitter .pill {
  display: inline-block; border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 18px; font-size: 0.92rem; font-weight: 600; background: var(--ticket); color: var(--ink);
}
.fitter input:checked + .pill { background: var(--ink); color: var(--paper); }
.fitter input:focus-visible + .pill { outline: 3px solid var(--thread); outline-offset: 2px; }
.fitter .result { margin-top: var(--s-5); }
.fitter .result[hidden] { display: none; }

/* The measurements list (how we measure) */
.measures { display: grid; gap: var(--s-4); padding: 0; margin: 0; list-style: none; counter-reset: m; }
.measures li { counter-increment: m; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4); align-items: start; }
.measures li::before {
  content: counter(m, upper-roman); font-family: var(--display); font-style: italic;
  font-size: 1.5rem; color: var(--thread); line-height: 1.2;
}
.measures h3 { font-size: 1.15rem; }
.measures p { color: var(--ink-soft); font-size: 0.97rem; max-width: 58ch; }

/* Article pages (the fittings) */
.article { padding-block: var(--s-7) var(--s-8); }
.article .prose > * + * { margin-top: var(--s-4); }
.article .prose h2 { margin-top: var(--s-7); }
.article .prose h3 { margin-top: var(--s-5); color: var(--thread-deep); }
.article .lede { font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--ink-soft); line-height: 1.45; }
.article .updated { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-faint); }
.article .ticket { margin-block: var(--s-6); }
.callout { background: var(--ticket); border: 2px solid var(--ink); border-radius: 4px; padding: var(--s-4) var(--s-5); }

.disclosure { font-size: 0.85rem; color: var(--ink-faint); font-style: italic; }
.rg-band { background: var(--ink); color: #cfc4b4; }
.rg-band .wrap { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; padding-block: var(--s-5); font-size: 0.9rem; }
.rg-band a { color: var(--paper); }
.rg-band .age-chip { border-color: #cfc4b4; color: #cfc4b4; }

.site-footer { background: var(--ink); color: #a5988a; font-size: 0.9rem; }
.site-footer .wrap { padding-block: var(--s-6); display: grid; gap: var(--s-4); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.site-footer a { color: #cfc4b4; font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer p a { font-weight: 400; text-decoration: underline; font-size: inherit; }

/* Motion moment: the sample ticket settles on load */
@media (prefers-reduced-motion: no-preference) {
  .ticket.tilt { animation: settle 700ms 200ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
  @keyframes settle { from { transform: rotate(-1deg) translateY(-14px); opacity: 0; } to { transform: rotate(1.4deg) translateY(0); opacity: 1; } }
  a.btn, .site-nav a.nav-cta { transition: background-color 180ms ease-out; }
  .fitter .pill { transition: background-color 140ms ease-out, color 140ms ease-out; }
}