/* ==========================================================================
   Team Ain't — Aint.gay
   "This is a normal website." Manila, ink, and exactly one accent: safety
   orange. Monospace everything, visible 1px borders, zero border-radius,
   zero animation, zero shadows. The restraint IS the design.
   Design source: mockups/glitter-war-designs.html §AINT.GAY
   ========================================================================== */

:root {
  --manila: #E8E0D0;
  --ink: #1C1B18;
  --orange: #FF5A1F;
  --orange-deep: #C2410C;  /* orange that passes AA as text on white (5.2:1) */
  --orange-deeper: #9A3412; /* passes AA as text on the manila page bg (6.1:1) */
  --mid: #B7AD9C;
  --dim: #5E574A;         /* quiet text — 5.4:1 on manila, 7.1:1 on white */
  --faded: #8C8471;       /* big monograms only (large text) */
  --rule: #D6CBB6;        /* soft interior hairlines (mockup invoice rows) */
  --pen-red: #DD2222;     /* the red pen */
  --red-text: #C0392B;    /* red that passes AA as text on white (5.4:1) */
  --font-mono: Consolas, "Courier New", monospace;
  accent-color: var(--orange-deep);
}

/* ---------- the covenant: no radius, no shadows, no motion ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--manila);
  color: var(--ink);
  font-family: var(--font-mono);
  line-height: 1.55;
}
img, video, svg { max-width: 100%; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
/* bare loading/error states (GiftAccept early returns render unwrapped) */
#root > p { padding: 1.5rem; }

h1, h2, h3, .display {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
h1 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
h2 { font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; }
a { color: var(--ink); text-decoration: underline; }
a:hover { color: var(--orange-deeper); } /* AA on manila page bg (6.1:1) */
p { margin: 0 0 1rem; }

.page { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
.wall-section, .buy-section, .gift-section { margin: 2.5rem 0; }

/* a normal website has no confetti. render nothing, on principle. */
.confetti-layer { display: none; }

/* ---------- nav — a baseline row with a border. that's it. ---------- */
.site-nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: 0.85rem;
}
.nav-logo { font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.nav-logo-tld { font-style: normal; color: var(--ink); }
.nav-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.nav-links a { text-decoration: underline; }
.nav-cta {
  margin-left: auto;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  font-weight: 700;
}
.nav-cta:hover { background: var(--orange); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  padding: 2rem 0 0.75rem;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
.hero-title { margin: 0 0 0.35rem; }
.hero-est, .hero-sub { color: var(--dim); font-size: 0.85rem; margin: 0 0 1.15rem; max-width: 46ch; }
.aint-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  border: 1px solid var(--ink);
  background: #fff;
  max-width: 420px;
}
.aint-list li { padding: 0.55rem 0.9rem; font-size: 0.9rem; }
.aint-list li + li { border-top: 1px solid var(--ink); }
.aint-list li b { color: var(--orange-deep); } /* the one (1) accent — AA on white (5.2:1) */

/* buttons: hover = orange fill. no transform. obviously no transform. */
.hero-cta, .btn {
  display: inline-block;
  border: 2px solid var(--ink);
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.15rem;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.hero-cta small, .btn small { display: block; font-weight: 400; font-size: 0.7rem; }
.hero-cta:hover, .btn:hover { background: #fff; color: var(--ink); }

/* ---------- KEVIN — two dots and a line. he's fine. ---------- */
.mascot { display: flex; gap: 0.9rem; align-items: flex-start; max-width: 560px; }
.mascot-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%; /* sanctioned exception: Kevin is legally a circle */
  border: 1px solid var(--ink);
  flex: none;
  background-color: #D6CBB6;
  /* face drawn with backgrounds (shadows are banned, even for eyes) */
  background-image:
    radial-gradient(circle 2.5px at 17px 23px, var(--ink) 98%, transparent),
    radial-gradient(circle 2.5px at 31px 23px, var(--ink) 98%, transparent),
    linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 16px 2px;
  background-position: 0 0, 0 0, 19px 36px;
}
.mascot-bubble {
  border: 1px solid var(--ink);
  background: #fff;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  margin: 0;
}
.mascot-bubble b {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- scoreboard — the official ledger ---------- */
.scoreboard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.75rem;
  margin: 1rem 0 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ink);
  background: #fff;
}
.score { display: grid; gap: 0.15rem; }
.score-team { font-size: 0.7rem; letter-spacing: 0.14em; }
.score-points { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs { font-weight: 700; color: var(--dim); }
.score-tiles { font-size: 0.7rem; color: var(--dim); }
.score-note {
  font-size: 0.6rem;
  color: var(--red-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* rival's number circled in red pen. we're not upset about it. */
.rival-circle { position: relative; display: inline-block; }
.rival-circle::after {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border: 2.5px solid var(--pen-red);
  border-radius: 55% 45% 60% 50% / 50% 60% 45% 55%;
  transform: rotate(2deg);
  pointer-events: none;
}

/* table variant (Agent B renders the same data as a ledger) */
.ledger { margin: 1rem 0 2rem; border: 1px solid var(--ink); background: #fff; }
.ledger table, table.ledger { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ledger caption, .ledger-cap {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  background: var(--manila);
  text-transform: uppercase;
}
.ledger th, .ledger td { padding: 0.6rem 0.85rem; text-align: left; border-top: 1px solid var(--ink); }
.ledger tr:first-child th, .ledger tr:first-child td { border-top: 0; }
.ledger th { font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700; }
.ledger th:last-child, .ledger td:last-child { text-align: right; }
.ledger td:last-child { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.ledger-note {
  font-size: 0.7rem;
  color: var(--dim);
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--ink);
  margin: 0;
}

/* defensive: if a meter ever renders here, it is a very boring meter */
.score-meter {
  flex-basis: 100%;
  height: 10px;
  border: 1px solid var(--ink);
  background: #fff;
  display: flex;
  overflow: hidden;
}
.score-meter i { display: block; background: var(--orange); }
.score-meter em { display: block; flex: 1; background: var(--mid); }
.score-cap {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

/* ---------- cheer ---------- */
.cheer { display: grid; gap: 0.6rem; justify-items: start; margin: 0 0 2rem; }

/* ---------- the wall — rendered like a utility bill ---------- */
.wallhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 1.25rem 0 0.5rem; }
.wallhead h2 { margin: 0; font-size: 1rem; }
.wallhead-meta, .wallhead span { font-size: 0.7rem; color: var(--dim); }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0;
  border: 1px solid var(--ink);
  background: #fff;
}
.tile {
  position: relative;
  margin: -1px 0 0 -1px; /* collapse shared 1px borders */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  background: #fff;
  font-size: 0.7rem;
}
.tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(0.9);
}
.tile-placeholder { display: block; width: 100%; aspect-ratio: 1 / 1; background: #E3DCCB; }
.tile-superfan { grid-column: span 2; grid-row: span 2; } /* large-print tile. why. */
.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: 1px solid var(--ink);
  border-top: 0;
  border-left: 0;
  background: #fff;
  color: var(--ink);
  font-size: 0.53rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  pointer-events: none;
}
.tile figcaption {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.3;
  border-top: 1px solid var(--rule);
  background: #fff;
}
.tile-no { color: var(--orange-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile .stamp, .tile-stamp { font-size: 0.53rem; letter-spacing: 0.06em; color: var(--dim); }
.tile .init { font-size: 1.6rem; font-weight: 700; color: var(--faded); }
.tile-report {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  border: 1px solid var(--ink);
  border-top: 0;
  border-right: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 6px 8px; /* ~24px tap target — it fires a takedown/consent action */
  cursor: pointer;
}
.tile-report:hover { background: var(--orange); color: var(--ink); }
.wall-status { border: 1px solid var(--ink); background: #fff; padding: 1rem; }

/* ---------- the invoice ---------- */
.invoice, .prices { margin: 1.25rem 0; border: 1px solid var(--ink); background: #fff; max-width: 560px; }
.invoice-cap {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  background: var(--manila);
  text-transform: uppercase;
}
.invoice-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--rule);
}
.invoice-row:first-of-type { border-top: 0; }
.invoice-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* if look-style price cards ever render here, flatten them into line items */
.price { padding: 0.55rem 0.75rem; border-top: 1px solid var(--rule); }
.price u { text-decoration: none; font-weight: 700; font-size: 0.8rem; display: block; }
.price b { font-variant-numeric: tabular-nums; }
.price span { display: block; font-size: 0.75rem; color: var(--dim); }
.price-hot { background: var(--manila); } /* "hot". sure. */

/* ---------- forms & flows ---------- */
button {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.5rem 1rem;
  cursor: pointer;
}
button:hover { background: var(--orange); color: var(--ink); }
button:disabled { background: var(--manila); color: var(--dim); border-color: var(--mid); cursor: not-allowed; }
input[type="email"], input[type="text"], select {
  width: 100%;
  max-width: 26rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
input::placeholder { color: var(--dim); }
input[type="file"] { max-width: 100%; font-family: var(--font-mono); font-size: 0.8rem; color: var(--dim); }
input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.4rem 0.9rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--orange); }
input[type="radio"], input[type="checkbox"] { width: 1rem; height: 1rem; }
fieldset { border: 1px solid var(--ink); padding: 1rem; margin: 0 0 1rem; min-inline-size: auto; background: #fff; }
legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 0.5rem;
  background: #fff;
  border: 1px solid var(--ink);
}
label { display: block; margin: 0.4rem 0; }
fieldset label { display: flex; align-items: center; gap: 0.55rem; }

.buyflow, .gift-flow { max-width: 34rem; }
.buyflow-step { border: 1px solid var(--ink); background: #fff; padding: 1.15rem; margin: 0 0 1rem; }
.buyflow-step fieldset { background: var(--manila); }
.buyflow-step fieldset legend { background: var(--manila); }
.buyflow-step button { margin-top: 0.6rem; margin-right: 0.6rem; }
.buyflow-errors, [role="alert"] {
  border: 1px solid var(--red-text);
  background: #fff;
  color: var(--red-text);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
}
.buyflow-errors p { margin: 0.25rem 0; }
.pack-banner { border: 1px solid var(--ink); background: #fff; padding: 0.8rem 1rem; margin: 0 0 1rem; }
.pack-banner p { margin: 0.25rem 0; }
.selfie-video, .buyflow video, .gift-accept video {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 1px solid var(--ink);
  margin: 0.5rem 0;
}
.selfie-step { border: 1px dashed var(--ink); background: #fff; padding: 0.9rem; margin: 0.75rem 0; }

.gift-flow { border: 1px solid var(--ink); background: #fff; padding: 1.15rem; }
.gift-consent-note {
  border: 1px solid var(--ink);
  background: var(--manila);
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
}
.purchase-success { max-width: 34rem; margin: 2rem auto; border: 1px solid var(--ink); background: #fff; padding: 1.5rem; }
.purchase-success img { border: 1px solid var(--ink); }
.gift-accept { max-width: 34rem; margin: 0 auto; padding: 1.5rem; }
.gift-accept form { border: 1px solid var(--ink); background: #fff; padding: 1.15rem; margin: 0 0 1rem; }

/* ---------- status banner ---------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  border: 1px solid var(--ink);
  border-left: 4px solid var(--orange);
  background: #fff;
  padding: 0.7rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}
.banner button { padding: 0.3rem 0.8rem; font-size: 0.75rem; }

/* ---------- report dialog — centered, bordered, undimmed. deadpan. ---------- */
.report-dialog,
[role="dialog"][aria-label="Report tile"],
[role="dialog"][aria-label="Confirm decline"] {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 26rem);
  border: 1px solid var(--ink);
  outline: 4px solid var(--manila); /* reads as a paper edge, not a shadow */
  background: #fff;
  color: var(--ink);
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: left;
}
.report-dialog h3,
[role="dialog"][aria-label="Report tile"] h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.report-dialog button,
[role="dialog"][aria-label="Report tile"] button,
[role="dialog"][aria-label="Confirm decline"] button {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  position: static;
  font-size: 0.8rem;
}

/* ---------- age gate ---------- */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--manila);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.agegate-card { text-align: center; padding: 2rem; border: 1px solid var(--ink); background: #fff; max-width: 26rem; }
.agegate-card .btn { display: block; width: 100%; margin: 1rem 0 0.9rem; text-align: center; }
.agegate-card a { font-size: 0.8rem; }

/* ---------- footer — home of the single tiny pride flag ---------- */
.footer {
  margin-top: 3rem;
  padding: 1.25rem 0 3rem;
  border-top: 1px solid var(--ink);
  font-size: 0.75rem;
  color: var(--dim);
}
.footer-promise { color: var(--ink); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0; }
.footer-links a { color: var(--ink); overflow-wrap: anywhere; }
.footer-fine { color: var(--dim); }
.footer-flag { font-size: 0.75rem; color: var(--dim); }
.flag-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
  background: linear-gradient(
    #E40303 0 16.6%,
    #FF8C00 0 33.3%,
    #FFED00 0 50%,
    #008026 0 66.6%,
    #24408E 0 83.3%,
    #732982 0
  );
}

/* ---------- legal pages ---------- */
.legal { max-width: 46rem; }
.legal h1 { font-size: 1.6rem; }
.legal h2 { font-size: 0.95rem; margin-top: 2rem; }
.legal p { line-height: 1.65; }
.legal-banner {
  border: 1px dashed var(--orange);
  background: #fff;
  color: var(--orange-deep);
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .page { padding: 1rem; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Motion: none, at any preference. Stated again for the record. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}