/* ============================================================
   REFERA: visual identity. Site-specific.

   WHO THIS IS FOR
   Everyday customers on the receiving end of "use my link": a
   friend's meal kit code, a bank's sign-up bonus, a ride app
   credit. Mostly 25 to 45, budget-minded, reading on a phone
   between other things. Two moments bring them here: someone sent
   them a link, or they want to share their own without annoying
   people or breaking the rules.

   WHAT THE DESIGN HAS TO SAY
   A referral is a two-part ticket. One half is yours, one half is
   your friend's, and a strip along the bottom holds what it costs
   to tear it off. The site shows every offer that way, so the
   catch always has its own labeled place.

   WHY IT DOESN'T LOOK LIKE A DEALS SITE
   Deal sites are red HOT badges, countdown timers and a wall of
   codes. This reader is already a little suspicious of that. Warm
   paper and printed tickets feel like a friend explaining the
   offer, not a site selling it.

   COLOR
   Warm paper, aubergine ink, raspberry for actions. Your half is
   apricot and your friend's half is sky blue, and each is always
   labeled in words, so the colors only help you find your side.
   Every pair is checked by the build script.

   TYPE
   Young Serif for headings, with the friendly weight of a printed
   ticket. Instrument Sans for reading, clear at phone sizes.
   ============================================================ */

:root {
  --paper:     #fbf7f0;
  --card:      #ffffff;
  --ink:       #221a2c;
  --ink-soft:  #564a63;
  --rasp:      #a3174f;
  --rasp-deep: #7f1040;
  --rasp-wash: #fbe6ee;
  --you:       #ffe3bf;   /* your half, background only */
  --them:      #d6e9fb;   /* your friend's half, background only */
  --strip:     #f1ebe2;
  --perf:      #8f819d;   /* perforations and control borders, 3:1 or better */
  --line:      #e3dacd;   /* decorative dividers only */

  --accent:     var(--rasp);
  --accent-ink: #ffffff;
  --focus:      #0b6e6e;  /* teal, so it never blends into raspberry controls */
  --measure:    64ch;

  --display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; background: var(--paper); color: var(--ink); }

.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 44rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.85rem; }
a { color: var(--rasp); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--rasp-deep); }

.eyebrow { font-weight: 600; font-size: 0.9375rem; color: var(--rasp); margin-bottom: 0.6rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 50ch; }

/* ---- Header ------------------------------------------------ */
.site-header { border-bottom: 2px dashed var(--perf); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 0.8rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.brand .glyph { position: relative; width: 32px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; background: linear-gradient(90deg, var(--you) 0 50%, var(--them) 50% 100%); }
.brand .glyph::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: calc(50% - 1px); border-left: 2px dashed var(--ink); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--perf); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--rasp); color: var(--rasp); }

main { padding-block: 3rem 4.5rem; }
.hero { padding-bottom: 2.5rem; }
.hero h1 { max-width: 18ch; margin-bottom: 1rem; }
.section { margin-top: 3.5rem; }

/* ---- THE TICKET --------------------------------------------
   Signature element. Two halves on top, split by a perforation
   with notches cut into both edges, and strips underneath for
   the cost and the catch. Every part is labeled in words. */
.ticket { margin: 1.5rem 0 0; max-width: 44rem; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; }
.ticket-top { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px dashed var(--perf); }
.ticket-top::before, .ticket-top::after { content: ""; position: absolute; bottom: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.ticket-top::before { left: -13px; clip-path: inset(0 0 0 50%); }
.ticket-top::after { right: -13px; clip-path: inset(0 50% 0 0); }
.half { padding: 1.1rem 1.4rem 1.3rem; }
.half--you { background: var(--you); border-top-left-radius: 12px; }
.half--them { background: var(--them); border-left: 2px dashed var(--perf); border-top-right-radius: 12px; }
.stub { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0; }
.stub-value { font-family: var(--display); font-size: 1.35rem; line-height: 1.22; margin-top: 0.3rem; }
.strip { padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--line); }
.strip .stub-value { font-family: var(--body); font-size: 1.05rem; line-height: 1.5; }
.strip--catch { background: var(--rasp-wash); }
.strip--catch .stub { color: var(--rasp-deep); }
.ticket figcaption { padding: 0.7rem 1.4rem; font-size: 0.875rem; color: var(--ink-soft); background: var(--strip); border-radius: 0 0 12px 12px; }

/* ---- Questions --------------------------------------------- */
.questions { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: q; }
.questions li { counter-increment: q; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; max-width: none; }
.questions li::before { content: counter(q); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; margin-bottom: 0.6rem; }

/* ---- Tables ------------------------------------------------ */
.table-scroll { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table.fine-print { width: 100%; min-width: 42rem; font-size: 0.975rem; }
table.fine-print th, table.fine-print td { padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--perf); }
table.fine-print tbody tr:last-child th, table.fine-print tbody tr:last-child td { border-bottom: 0; }
table.fine-print thead th { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--strip); border-bottom: 2px solid var(--ink); }
table.fine-print tbody th { font-family: var(--display); font-weight: 400; font-size: 1.1rem; min-width: 9rem; }
table.fine-print td.catch { color: var(--rasp-deep); font-weight: 600; }
table.fine-print caption { caption-side: bottom; text-align: left; padding: 0.7rem 0.95rem; font-size: 0.875rem; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* ---- Worksheet --------------------------------------------- */
.worksheet { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); margin-top: 1.5rem; align-items: start; }
.worksheet form { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem 1.1rem 1.1rem; }
.field { display: grid; grid-template-columns: 1fr 8.5rem; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px dashed var(--line); }
.field label { font-weight: 600; }
.field label small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); }
.field input { text-align: right; padding: 0.45rem 0.6rem; border: 2px solid var(--perf); border-radius: 8px; background: #ffffff; width: 100%; font-variant-numeric: tabular-nums; }
.admit { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.admit-head { background: var(--ink); color: var(--paper); padding: 0.6rem 1.1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; max-width: none; }
.admit dl { margin: 0; }
.admit .row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.1rem; border-bottom: 1px dashed var(--perf); }
.admit dt { font-weight: 600; }
.admit dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.admit .row.key { background: var(--you); }
.admit .row.key dd { font-weight: 700; }
.admit .verdict { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; padding: 1rem 1.1rem 1.2rem; margin: 0; max-width: none; }

/* ---- Do and don't ------------------------------------------ */
.dodont { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin-top: 1.25rem; }
.dodont .col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem; }
.dodont h3 { display: inline-block; font-family: var(--body); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; }
.dodont .col--do h3 { background: var(--them); color: var(--ink); }
.dodont .col--dont h3 { background: var(--rasp-wash); color: var(--rasp-deep); }
.dodont ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.dodont li { margin-bottom: 0.5rem; }
.sample { margin: 1rem 0 0; max-width: 44rem; background: var(--strip); border-left: 4px solid var(--ink); border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; font-size: 1.05rem; }

/* ---- Panels, buttons, forms -------------------------------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); }
.panel--strip { background: var(--strip); border-color: var(--line); }
.empty { border: 2px dashed var(--perf); border-radius: 14px; padding: 2rem; text-align: center; }
.empty p { margin-inline: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.35rem; background: var(--rasp); color: #ffffff; border: 2px solid var(--rasp); border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 1rem; }
.btn:hover { background: var(--rasp-deep); border-color: var(--rasp-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
.prose ul, .prose ol, ul.prose { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--perf); border-radius: 10px; background: #ffffff; }
.signup button { justify-self: start; }
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.75rem; }

/* ---- Footer: dark band, light focus ring ------------------- */
.site-footer { background: var(--ink); color: var(--paper); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--you); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--paper); display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--you); }
.site-footer .fine { color: #cfc5d8; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--you); }

@media (max-width: 52rem) {
  .worksheet { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .ticket-top { grid-template-columns: 1fr; }
  .half--you { border-top-right-radius: 12px; }
  .half--them { border-left: 0; border-top: 2px dashed var(--perf); border-top-right-radius: 0; }
}
@media (max-width: 30rem) {
  .field { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .ticket, .half, .strip, .panel, .btn, .admit, .questions li, .dodont .col { border: 1px solid; }
}