/* ==========================================================================
   WUATEVAR GAMES — supplement.css
   Only what the base stylesheet left uncoded: brand-logo sizing, the one
   orchestrated hero entrance, form validation states, portfolio filtering,
   and a couple of small layout helpers. Nothing here redefines base classes.
   ========================================================================== */

/* Brand lockup uses the full hand-lettered logo (text + bloom), sized to read
   in the slim sticky header. Overrides the base 34px which suits a 1-line mark. */
.brand-logo{ display:block; height:46px; width:auto; }
.site-footer .brand-logo{ height:64px; }
@media (max-width:520px){ .brand-logo{ height:40px; } }

/* The header carries the flower on its own; the footer keeps the full lockup.
   Specificity has to match the base `.brand img` rule to beat it. */
.brand .brand-mark{ display:block; height:46px; width:auto; }
@media (max-width:520px){ .brand .brand-mark{ height:40px; } }

/* ---- One orchestrated hero entrance (staged, on load) ---- */
.hero-stage,
.hero h1,
.hero .lede,
.hero .btn-row,
.hero .hero-note{
  opacity:0;
  transform:translateY(16px);
  animation:hero-rise .7s var(--ease-out) forwards;
}
.hero-stage{ animation-delay:.05s; transform:none; }
.hero h1{ animation-delay:.28s; }
.hero .lede{ animation-delay:.42s; }
.hero .btn-row{ animation-delay:.54s; }
.hero .hero-note{ animation-delay:.64s; }
@keyframes hero-rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-stage,.hero h1,.hero .lede,.hero .btn-row,.hero .hero-note{
    opacity:1; transform:none; animation:none;
  }
}

.hero-note{
  font-size:.92rem;
  color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:8px;
}
.hero-note .petal-dot{ width:8px; height:8px; border-radius:50%; background:var(--poppy); }

/* ---- Form layout + validation ---- */
.form-layout{
  display:grid;
  grid-template-columns:1.35fr .8fr;
  gap:clamp(24px,4vw,48px);
  align-items:start;
}
@media (max-width:900px){ .form-layout{ grid-template-columns:1fr; } }
.form-layout .info-card{ position:sticky; top:92px; }
@media (max-width:900px){ .form-layout .info-card{ position:static; } }

.field .field-error{
  display:none;
  color:var(--poppy-dark);
  font-size:.85rem;
  font-weight:600;
  margin-top:6px;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select{ border-color:var(--poppy-dark); background:var(--poppy-wash); }
.field.has-error .field-error{ display:block; }
.field.has-error .radio-group ~ .field-error{ display:block; }

/* ---- Portfolio filtering ---- */
.game-card.is-hidden{ display:none; }

/* Real key art fills the art panel; the poppy placeholder stays small and centred. */
/* 2:1 sits between Steam's 16:9 key art and its wide 460x215 header capsule;
   anchoring to the bottom keeps title lettering in frame for both shapes. */
.game-card-art.has-cover{ aspect-ratio:2 / 1; overflow:hidden; }
.game-card-art.has-cover img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; opacity:1; }

/* Small helper: constrained lead paragraph centered under a hero */
.stack-sm > * + *{ margin-top:14px; }
.mt-band{ margin-top:0; }

/* Prefill confirmation chip on the contact form */
.prefill-flag{
  display:none;
  align-items:center; gap:8px;
  font-size:.86rem; font-weight:600;
  color:var(--poppy-dark);
  background:var(--poppy-wash);
  border:1.6px solid var(--poppy-soft);
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:14px;
}
.prefill-flag.is-visible{ display:inline-flex; }

/* The 3-step flow renders 5 children (step, arrow, step, arrow, step); give the
   arrows their own auto tracks on desktop so the row lays out cleanly.
   Below 821px the base rule stacks it to one column. */
@media (min-width:821px){
  .flow{ grid-template-columns: 1fr auto 1fr auto 1fr; }
}
.eyebrow-line{ margin-bottom:2px; }

/* ---- Screen-reader-only text (used for "opens in a new tab" hints) ---- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---- Newsletter band (bottom of every page, above the footer) ---- */
.newsletter{
  background:var(--poppy-wash);
  border-top:3px solid var(--ink);
  padding-block:clamp(38px,5vw,58px);
}
.newsletter-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,54px);
  align-items:center;
}
.newsletter-copy h2{ max-width:18ch; }
.newsletter-copy p{ color:var(--ink-soft); max-width:46ch; margin-top:12px; font-size:.98rem; }
.newsletter-form{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.newsletter-form .field{ margin-bottom:0; flex:1 1 220px; }
.newsletter-form .btn{ flex:0 0 auto; }
.newsletter-form input[type=email]{ background:var(--paper); }
.newsletter-note{ font-size:.85rem; color:var(--ink-faint); margin-top:12px; }
.newsletter-success{
  display:none;
  margin-top:14px; font-weight:600; color:var(--poppy-dark);
}
.newsletter-success.is-visible{ display:block; }
.newsletter-form.is-submitted{ display:none; }
@media (max-width:820px){
  .newsletter-inner{ grid-template-columns:1fr; }
  .newsletter-copy h2, .newsletter-copy p{ max-width:none; }
}

/* ---- Slimmer rhythm ------------------------------------------------------
   The site reads top to bottom in one column; tightening the vertical scale
   keeps it short to browse without crowding anything. */
section{ padding-block: clamp(44px, 6vw, 78px); }
.section-tight{ padding-block: clamp(38px, 5vw, 62px); }
.page-hero{ padding-block: clamp(40px, 5.5vw, 72px) clamp(30px, 4vw, 46px); }
.section-head{ margin-bottom: 28px; }

/* ---- Hero video runs edge to edge as the top of the page ---- */
.hero-stage video{ display:block; width:100%; height:auto; max-height:78vh; object-fit:cover; }

/* ---- Three-up card row (home) ---- */
.trio-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 26px);
}
@media (max-width:860px){ .trio-grid{ grid-template-columns:1fr; } }
.feature-card .btn-ghost{
  margin-top:auto; padding-top:14px;
  align-self:flex-start;
  font-weight:600; text-decoration:none;
  border-bottom:2.5px solid var(--poppy);
  color:var(--ink);
}
.feature-card .btn-ghost:hover{ color:var(--poppy); }

/* An arrow that nudges forward when its card is hovered. The "/ """ form keeps
   screen readers from announcing it. */
.feature-card .btn-ghost::after,
.channel-btn::after{
  content:"\2192";
  content:"\2192" / "";
  display:inline-block;
  margin-left:8px;
  transition:transform .25s var(--ease-out);
}
.feature-card:hover .btn-ghost::after,
.channel-pane:hover .channel-btn::after{ transform:translateX(5px); }

/* ---- Service cards (What we do) — grid grows with the list ---- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:clamp(18px, 2.2vw, 28px);
  align-items:start;
}
.service-card{
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  background:var(--paper-soft);
  padding:clamp(22px, 2.6vw, 34px);
  box-shadow:6px 8px 0 rgba(0,0,0,0.10);
  display:flex; flex-direction:column;
}
.service-card h3{ margin-top:4px; }
.service-status{
  display:inline-flex; align-self:flex-start; align-items:center;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--poppy-dark); background:var(--poppy-wash);
  border:2px solid var(--poppy); border-radius:999px;
  padding:5px 12px; margin-bottom:12px;
}
.service-summary{ color:var(--ink-soft); margin-top:10px; }
.service-audience{
  font-size:.92rem; color:var(--ink-faint);
  border-top:2px dashed var(--paper-edge);
  padding-top:14px; margin-bottom:20px;
}
.service-card .btn{ align-self:flex-start; margin-top:auto; }
.services-note{
  margin-top:26px; color:var(--ink-soft);
  font-size:.95rem; max-width:60ch;
}

/* ---- Tick lists ---- */
.check-list, .perk-list{ display:flex; flex-direction:column; gap:11px; margin:18px 0 22px; }
.check-list li, .perk-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.96rem; color:var(--ink-soft);
}
.check-list li::before, .perk-list li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--poppy); margin-top:8px; flex:0 0 auto;
}
.info-card .perk-list li{ color:color-mix(in srgb, var(--paper) 78%, transparent); }

/* ---- Show / creators splits ---- */
.show-split, .creators-split{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(24px, 3.6vw, 52px);
  align-items:center;
}
/* Stretch, not start, so the illustration plate ends level with the copy
   column instead of stopping short of it. */
.creators-split{ grid-template-columns:1.05fr .95fr; align-items:stretch; }
.show-split .btn-row, .creators-split .btn-row{ margin-top:22px; }
.creators-aside{ display:flex; }
.creators-aside .art-plate{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:0;
}
.creators-aside .art-plate img{ max-height:100%; object-fit:contain; }

/* A clickable illustration gets the stream card's look: black outline, red offset
   shadow, a slight tilt that straightens on hover. The cream ring keeps the outline
   visible on the black band. */
.creators-aside .art-plate-link{ flex:1; }
.art-plate-link{ display:flex; color:inherit; text-decoration:none; }
.art-plate-link .art-plate{
  flex:1;
  border-color:#000000;
  box-shadow:0 0 0 3px #FAF3E6, 12px 14px 0 3px var(--poppy);
  transform:rotate(1.4deg);
  transition:transform .3s var(--ease-out);
}
.art-plate-link:hover .art-plate{ transform:rotate(0deg); }
.art-plate-link:focus-visible{ outline:3px solid var(--poppy); outline-offset:10px; border-radius:var(--radius-lg); }
/* The Mehssive mark is a wide 2:1 lockup — giving it a narrower column keeps
   the section from claiming height it does not need. */
.show-split{ grid-template-columns:.72fr 1.28fr; }
.show-split .logo-plate{ padding:clamp(16px, 1.8vw, 26px); }
@media (max-width:880px){
  .show-split, .creators-split{ grid-template-columns:1fr; }
}
.band .show-split p, .band .creators-split p{ color:color-mix(in srgb, var(--paper) 76%, transparent); }
.show-split h2, .creators-split h2{ margin-top:6px; }

/* the Mehssive mark is black-on-transparent, so it needs a light plate */
.logo-plate{
  background:#FFF8F1;
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:clamp(22px, 3vw, 40px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:6px 8px 0 rgba(0,0,0,0.22);
}
.logo-plate img{ width:100%; height:auto; display:block; }
.logo-plate-light{ box-shadow:6px 8px 0 rgba(0,0,0,0.12); }

/* ---- CTA band split ---- */
.cta-split{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 3vw, 48px); flex-wrap:wrap;
}
.cta-split p{ margin-top:10px; color:color-mix(in srgb, var(--paper) 76%, transparent); }

/* ---- Publisher points row ---- */
.pub-points{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.4vw, 34px);
}
/* Selected -> Improved -> Publisher-ready is a real sequence, so it earns numbers. */
.pub-points{ counter-reset:pub; }
.pub-points > div{ counter-increment:pub; position:relative; padding-top:48px; }
.pub-points > div::before{
  content:counter(pub, decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--font-display); font-size:1.05rem; line-height:1.4;
  color:#FFFFFF; background:var(--poppy);
  border:2.5px solid var(--ink); border-radius:999px;
  padding:1px 13px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
}
.pub-points h3{ font-size:clamp(1.65rem, 1.2vw + 1.25rem, 2.25rem); line-height:1.05; }
.pub-points h3::after{
  content:""; display:block;
  width:58px; height:6px; margin-top:12px;
  border-radius:6px; background:var(--poppy);
  transform:rotate(-2deg);
}
.pub-points p{ color:var(--ink-soft); font-size:1rem; margin-top:12px; }
@media (max-width:780px){ .pub-points{ grid-template-columns:1fr; gap:20px; } }

/* ---- About: readable measure ---- */
.prose-narrow{ max-width:70ch; }

/* ---- Legal pages (Terms of Use, Privacy Notice): long reading, so a calm measure ---- */
.legal-doc{ max-width:72ch; }
.legal-doc h2{
  font-size:clamp(1.3rem, 0.8vw + 1.05rem, 1.65rem);
  margin-top:44px; margin-bottom:12px;
}
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc h3{
  font-family:var(--font-body); font-weight:700;
  font-size:1.02rem; line-height:1.4;
  margin-top:22px; margin-bottom:4px;
}
.legal-doc p{ color:var(--ink-soft); font-size:1rem; margin-top:8px; max-width:none; }
.legal-doc ul{ list-style:disc; padding-left:1.3em; margin-top:8px; }
.legal-doc li{ color:var(--ink-soft); margin-top:4px; }
.legal-doc li::marker{ color:var(--poppy); }
.legal-doc a{ color:var(--poppy-dark); text-underline-offset:2px; }

/* Footer legal links and the privacy line under the sign-up box */
.footer-legal{ display:inline-flex; gap:14px; flex-wrap:wrap; }
.footer-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-legal a:hover{ color:var(--poppy); }
.newsletter-privacy{ font-size:.82rem; color:var(--ink-faint); margin-top:6px; }
.newsletter-privacy a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---- About: founder portrait beside the intro ---- */
.prose-intro{
  display:grid;
  grid-template-columns:minmax(220px, 340px) 1fr;
  gap:clamp(28px, 4.5vw, 64px);
  align-items:start;
}
.founder-photo{
  margin:0;
  background:#FFFFFF;
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:12px;
  box-shadow:8px 10px 0 var(--poppy);
  transform:rotate(-2deg);
  transition:transform .3s var(--ease-out);
}
.founder-photo:hover{ transform:rotate(0deg); }
.founder-photo img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border-radius:calc(var(--radius-lg) - 10px);
}
@media (max-width:820px){
  .prose-intro{ grid-template-columns:1fr; }
  .founder-photo{ max-width:300px; }
}
.prose-narrow p{ margin-bottom:18px; font-size:1.02rem; }
.prose-signoff{
  font-family:var(--font-display);
  color:var(--ink); font-size:1.1rem;
  margin-top:26px;
}

/* ---- Fixes from layout review ---- */
/* one service card should not stretch the full width; the grid still fills
   out as more cards are added */
/* Cards share the row evenly; a lone card is capped so it does not stretch the full width.
   (A capped max in the repeat itself makes the browser count columns at that cap, which
   squeezed three cards into two.) */
.service-grid{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); align-items:stretch; }
.service-grid:has(> .service-card:only-child){ grid-template-columns:minmax(300px, 460px); }
@media (max-width:700px){ .service-grid{ grid-template-columns:1fr; } }

/* stacked paragraphs need air; the base sheet leaves p unmargined */
.show-split p + p,
.creators-split p + p,
.cta-split p + p,
.prose-narrow p + p{ margin-top:14px; }

/* .info-card is ink-on-ink, so it vanishes inside a dark band */
.band .info-card{
  background:color-mix(in srgb, var(--paper) 7%, transparent);
  border:3px solid color-mix(in srgb, var(--paper) 26%, transparent);
  border-radius:var(--radius-lg);
  padding:clamp(22px, 2.6vw, 34px);
}
.band .info-card h3{ color:var(--paper); }

/* ---- Launch fund: game capsule up front, live counters and a meter ---- */
.fund{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
}
@media (max-width:900px){ .fund{ grid-template-columns:1fr; } }
.fund-art{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.fund-capsule-link{ display:block; width:100%; border-radius:var(--radius-lg); }
.fund-capsule{
  display:block; width:100%; height:auto;
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow:8px 10px 0 var(--poppy);
  transform:rotate(-1.2deg);
  transition:transform .35s var(--ease-out);
}
.fund-capsule-link:hover .fund-capsule{ transform:rotate(0deg) scale(1.015); }
.fund-body h2{ margin:10px 0 14px; }
.fund-lede{ color:var(--ink-soft); }

.fund-counters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:24px;
}
@media (max-width:520px){ .fund-counters{ grid-template-columns:1fr; gap:20px; } }
.fund-counter{
  display:flex; flex-direction:column; gap:2px;
  padding:16px 18px;
  border:3px solid var(--ink);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.fund-counter:hover{ transform:translateY(-3px); box-shadow:5px 6px 0 var(--ink); }
.fund-counter-icon{ width:26px; height:26px; margin-bottom:6px; color:var(--poppy); }
.fund-counter.is-creators .fund-counter-icon{ color:#5865F2; }
.fund-counter-icon svg{ width:100%; height:100%; fill:currentColor; }
.fund-counter-num{ font-family:var(--font-display); font-size:2rem; line-height:1.05; }
.fund-counter-label{ font-weight:600; font-size:.95rem; }
.fund-counter-rate{ font-size:.85rem; color:var(--ink-faint); }

.fund-meter{ margin-top:22px; }
.fund-meter-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.fund-total{ font-family:var(--font-display); font-size:2.2rem; line-height:1; color:var(--poppy); }
.fund-cap{ font-weight:600; color:var(--ink-soft); }
.fund-track{
  height:22px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--paper-soft);
  overflow:hidden;
}
.fund-fill{
  display:block; height:100%;
  min-width:0;
  background:repeating-linear-gradient(-45deg, var(--poppy) 0 12px, var(--poppy-dark) 12px 24px);
  border-radius:999px;
  transition:width .8s var(--ease-out);
}
.fund-when{ margin-top:10px; font-weight:600; font-size:.95rem; }
.fund-fine{ margin-top:14px; font-size:.85rem; color:var(--ink-faint); }

/* Each counter carries the button that moves it, directly underneath. Labels may
   wrap in a narrow column. White text needs the darker end of each brand's colour
   to stay readable. */
.fund-col{ display:flex; flex-direction:column; gap:12px; }
.fund-col .fund-counter{ flex:1; }
.fund-col .btn{ white-space:normal; text-align:center; padding-inline:16px; }
.btn-primary.is-instagram{ --btn-bg:#C13584; --btn-fg:#FFFFFF; }
.btn-primary.is-instagram:hover{ background:#A12C6E; }
.btn-primary.is-kofi{ --btn-bg:#0F76A8; --btn-fg:#FFFFFF; }
.btn-primary.is-kofi:hover{ background:#0B5E87; }

/* Ko-fi: a quieter, separate ask under the campaign */
.fund-kofi{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px 22px;
  align-items:center;
  margin-top:clamp(32px, 4vw, 48px);
  padding:clamp(18px, 2.4vw, 26px);
  border:3px dashed var(--ink);
  border-radius:var(--radius-lg);
}
@media (max-width:720px){
  .fund-kofi{ grid-template-columns:auto 1fr; align-items:start; }
  .fund-kofi .btn{ grid-column:1 / -1; justify-self:start; }
}
.fund-kofi-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#0F76A8; color:#FFFFFF;
}
.fund-kofi-icon svg{ width:28px; height:28px; fill:currentColor; }
.fund-kofi-text h3{ font-size:1.15rem; margin-bottom:4px; }
.fund-kofi-text p{ color:var(--ink-soft); font-size:.97rem; }