/* ===========================================================================
   Founding Artists Program — shared styles for /founding-artists and
   /founding-artists/apply.

   ONE file for both pages on purpose. The landing page sells the program and the
   apply page collects the application; if they drifted apart visually, the moment
   an artist commits is the moment the product starts looking unfinished.

   Self-contained: no /_next/ chunk is referenced from either page. This repo's
   README documents that text living in both the static HTML and a hydrated chunk
   gets wiped when React mounts — that already erased the footer links once. These
   pages are plain HTML that React never touches, so they cannot lose that fight.
   The tokens below are copied verbatim from the real site stylesheet's :root, so
   the pages match the homepage rather than approximating it.
   =========================================================================== */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-weight:600;font-display:swap;src:url(/fonts/clash-display-600.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-weight:700;font-display:swap;src:url(/fonts/clash-display-700.woff2) format('woff2')}

:root{
  --ink:#0d0d0d;--charcoal:#171717;--graphite:#202020;--stone:#2c2c2c;
  --warm-white:#fafaf8;--light-stone:#f5f5f2;--line:#dcdcd6;--muted:#666661;
  --gold:#d6b78a;--gold-deep:#a66f2d;--success:#5e8e6d;
  /* --gold-ink is NOT a brand token; it is --gold-deep darkened just enough to be
     legible. --gold-deep on the warm-white background measures 4.07:1, under the
     4.5:1 WCAG AA floor for text this size, and 3.90:1 on the light-stone bar —
     so eyebrows, links, step numbers and the wizard's active step label were all
     failing. --gold-ink measures 4.78 / 4.57 / 4.99 on warm-white, light-stone and
     white cards, and is indistinguishable from --gold-deep to the eye.
     --gold-deep is still used for borders, focus rings and dots, where the bar is
     3:1 for non-text and it passes comfortably. */
  --gold-ink:#976528;
  /* Same problem, same shape, and it was missed when --gold-ink landed: --success
     as 11px text on the page background measures 3.61:1. --success-ink is 4.70 on
     warm-white and 4.91 on white. --success stays on the completed step DOT, where
     the 3:1 non-text bar applies and it passes. */
  --success-ink:#4f7a5d;
  /* --line (#dcdcd6) is right for section rules and card edges — decoration. It is
     NOT right for the edge of a text input: on the white form card it measures
     1.38:1, and the input's own fill differs from that card by only 1.05:1, so the
     boxes are very nearly invisible. WCAG 1.4.11 asks 3:1 for the boundary of a
     control you are meant to find and tap. --field-line is 3.06, and it matters
     most where this form actually gets filled in: a bright shop, on a phone. */
  --field-line:#94948c;
  --d:'Clash Display','Inter',-apple-system,sans-serif;
  --b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1120px;--pad:32px;--r:14px;
}
@media(max-width:860px){:root{--pad:24px}}
@media(max-width:560px){:root{--pad:20px}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--warm-white);color:var(--ink);font-family:var(--b);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--gold-ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Visible only to screen readers — used for the form's required-field legend and
   the step announcements. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Every interactive control keeps a visible focus ring. Removing these is the
   single most common way a page becomes unusable by keyboard. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:2px}

/* ── Header ───────────────────────────────────────────────────────────────── */
.hdr{border-bottom:1px solid var(--line);background:rgba(250,250,248,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.hdr-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:14px}
.hdr-in .mark{width:150px;height:auto;flex-shrink:0}
.hdr-right{display:flex;align-items:center;gap:18px}
.hdr-back{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hdr-back:hover{color:var(--ink);text-decoration:none}
@media(max-width:640px){.hdr-back{display:none}.hdr-in .mark{width:126px}}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--b);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#1a1508;background:linear-gradient(135deg,var(--gold),#c6a576);border:none;border-radius:11px;padding:13px 22px;
  cursor:pointer;box-shadow:0 4px 18px rgba(166,111,45,.2);transition:transform .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(166,111,45,.28);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:14px;padding:18px 40px;border-radius:var(--r);letter-spacing:.1em}
.btn-sm{padding:10px 16px;font-size:11.5px}
/* On the dark sections the gold button already reads; the outline variant is for
   the secondary action beside it. */
.btn-ghost{background:none;border:1px solid rgba(250,250,248,.28);color:var(--warm-white);box-shadow:none}
.btn-ghost:hover{border-color:var(--warm-white);background:rgba(250,250,248,.06);transform:none;box-shadow:none}

/* ── Type ─────────────────────────────────────────────────────────────────── */
.eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px;line-height:1.5}
h1{font-family:var(--d);font-weight:700;font-size:clamp(32px,5vw,52px);line-height:1.07;letter-spacing:-.02em}
h2{font-family:var(--d);font-weight:700;font-size:clamp(26px,3.6vw,38px);line-height:1.15;letter-spacing:-.018em}
h3{font-family:var(--b);font-size:16px;font-weight:700;letter-spacing:-.005em}
.lead{font-size:clamp(16.5px,1.7vw,19px);color:var(--muted);line-height:1.62}
.sec-sub{color:var(--muted);font-size:16.5px;line-height:1.62;margin-top:14px;max-width:640px}

section{padding:76px 0}
@media(max-width:640px){section{padding:52px 0}}
.divide{border-top:1px solid var(--line)}

/* ── Dark sections ────────────────────────────────────────────────────────── */
.dark{background:var(--ink);color:var(--warm-white)}
.dark h2,.dark h3{color:var(--warm-white)}
.dark .eyebrow{color:var(--gold)}
/* :not() on both of these is load-bearing, not tidiness.
   `.dark a` is (0,1,1) and `.btn` is only (0,1,0), so a plain `.dark a` rule WINS
   over the button's own colour and paints the Apply Now text gold — on a gold
   gradient. That is a 1:1 contrast ratio on the primary conversion button of the
   closing section: it looked blank. Same trap one level down, where `.dark p`
   would beat `.final-fine` and `.brandline`. Scoping to unclassed elements means
   every component keeps the colour it set for itself. */
.dark a:not(.btn){color:var(--gold)}
.dark .lead,.dark .sec-sub,.dark p:not([class]){color:#aaa9a3}

/* ── Hero: copy left, photo right ─────────────────────────────────────────── */
.hero{padding:64px 0 72px}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-copy .lead{margin-top:20px;max-width:520px}
.hero-cta{margin-top:34px}
.hero-fine{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:460px}
/* The photo is decorative-adjacent but load-bearing for tone, so it gets a real
   aspect ratio to stop it reflowing the hero as it decodes. */
.hero-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--light-stone);box-shadow:0 24px 60px rgba(13,13,13,.14)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .hero{padding:44px 0 52px}
  .hero-in{grid-template-columns:1fr;gap:36px}
  .hero-photo{max-width:380px;margin:0 auto}
}

/* ── Program overview bar: three equal columns ────────────────────────────── */
.bar{background:var(--light-stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.bar-in{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center}
/* min-height of two lines: "Five years of discounted pricing" wraps while the
   other two headings don't, which dropped its paragraph below its neighbours'
   and made the bar look misaligned rather than deliberate. */
.bar-item .n{font-family:var(--d);font-size:clamp(19px,2.1vw,23px);font-weight:700;letter-spacing:-.01em;
  line-height:1.25;min-height:2.5em;margin-bottom:6px}
@media(max-width:760px){.bar-item .n{min-height:0}}
.bar-item p{font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:760px){.bar-in{grid-template-columns:1fr;gap:26px;text-align:left}}

/* ── Split sections: copy one side, photo or list the other ───────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--light-stone);max-width:440px}
.split-photo img{width:100%;height:100%;object-fit:cover}
/* The dark "what we ask" block wants its heading pinned to the top, not centred
   against a long checklist. */
.split-top{align-items:start}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:34px}
  .split-photo{max-width:380px;margin:0 auto}
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
/* min(280px,100%) rather than a bare 280px: a grid track will NOT shrink below
   its stated minimum, so a bare minmax() pushes the track wider than a 320px
   phone and the whole page scrolls sideways. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-top:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.62}
.card p+p{margin-top:10px}
/* The pricing card carries a hedge paragraph that must not read as fine print
   nobody was shown. Same size as the body copy, just quieter. */
.card .hedge{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:12px}

/* ── Lists ────────────────────────────────────────────────────────────────── */
.checks{list-style:none;display:grid;gap:14px;margin-top:26px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--muted);line-height:1.6}
.checks li strong{color:var(--ink);font-weight:600}
.dark .checks li{color:#c9c8c2}
.dark .checks li strong{color:var(--warm-white)}
.checks li::before{content:"";position:absolute;left:3px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(214,183,138,.2)}
.dark .checks li::before{box-shadow:0 0 0 4px rgba(214,183,138,.14)}

/* ── Highlight / note ─────────────────────────────────────────────────────── */
.hilite{background:var(--light-stone);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  padding:22px 24px;margin-top:32px}
.hilite p{font-family:var(--d);font-weight:600;font-size:clamp(17px,1.9vw,20px);line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.dark .hilite{background:rgba(250,250,248,.05);border-color:rgba(250,250,248,.12);border-left-color:var(--gold)}
.dark .hilite p{color:var(--warm-white)}
.smallnote{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:22px}
.dark .smallnote{color:#8f8e88}

/* ── Numbered steps ───────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;margin-top:40px;counter-reset:s}
.step{border-top:2px solid var(--gold);padding-top:18px}
.step .num{font-family:var(--d);font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gold-ink);margin-bottom:8px}
.step h3{margin-bottom:7px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.62}

/* ── Final CTA ────────────────────────────────────────────────────────────── */
.final{text-align:center;padding:88px 0}
.final .lead{max-width:560px;margin:20px auto 0}
.final .btn{margin-top:34px}
.final-fine{margin-top:15px;font-size:13.5px;color:#8f8e88}
.brandline{margin-top:52px;padding-top:30px;border-top:1px solid rgba(250,250,248,.1);font-family:var(--d);
  font-weight:600;font-size:clamp(15px,1.7vw,18px);color:var(--gold);letter-spacing:-.005em}
@media(max-width:640px){.final{padding:60px 0}}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{background:var(--ink);color:#8f8e88;padding:46px 0 52px;border-top:1px solid rgba(250,250,248,.08)}
.ft-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.ft-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  padding-bottom:26px;border-bottom:1px solid rgba(250,250,248,.08)}
.ft-top img{width:168px;height:auto}
.ft-links{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px}
.ft-links a{color:#aaa9a3}
.ft-links a:hover{color:var(--warm-white)}
/* #6a6a66 measured 3.58:1 on the ink background, under the 4.5:1 floor. */
.ft-bottom{padding-top:22px;font-size:13px;color:#828179}

/* ===========================================================================
   Application wizard (apply page only)
   =========================================================================== */
.apply-hero{padding:56px 0 8px;text-align:center}
.apply-hero h1{font-size:clamp(28px,4.2vw,42px)}
.apply-hero .lead{max-width:620px;margin:18px auto 0}
.wiz-sec{padding:36px 0 84px}
.wiz{max-width:560px;margin:0 auto}

.wiz-steps{display:flex;justify-content:center;align-items:center;gap:6px;margin-bottom:28px}
.wiz-dot{display:flex;align-items:center;gap:7px}
.wiz-dot-circle{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .3s;flex-shrink:0}
.wiz-dot-circle.active{background:var(--gold-deep);width:10px;height:10px}
.wiz-dot-circle.done{background:var(--success)}
.wiz-dot-label{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}
.wiz-dot-label.active{color:var(--gold-ink);font-weight:600}
.wiz-dot-label.done{color:var(--success-ink)}
.wiz-line{width:16px;height:1px;background:var(--line);flex-shrink:0}
@media(max-width:680px){.wiz-dot-label{display:none}.wiz-line{width:24px}}

.wiz-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:0 2px 16px rgba(13,13,13,.04)}
@media(max-width:560px){.wiz-card{padding:22px 18px}}
.wiz-heading{font-family:var(--d);font-size:21px;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
.wiz-sub{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:24px}
.wiz-field{margin-bottom:20px}
.wiz-field:last-child{margin-bottom:0}
.wiz-label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px;line-height:1.45}
.req{color:var(--gold-ink)}
.opt{font-weight:500;color:var(--muted);font-size:12.5px}
/* 16px minimum: iOS Safari zooms the whole page when a focused input is smaller,
   which on a form this long is disorienting enough to lose people. */
.inp{width:100%;padding:13px 15px;border-radius:11px;background:var(--warm-white);border:1px solid var(--field-line);
  color:var(--ink);font-size:16px;font-family:var(--b);outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,183,138,.2)}
textarea.inp{resize:vertical;min-height:108px;line-height:1.55}
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666661' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.wiz-row{display:grid;grid-template-columns:1.6fr .9fr;gap:14px}
@media(max-width:460px){.wiz-row{grid-template-columns:1fr}}
.wiz-helper{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.wiz-err{background:rgba(201,91,91,.09);border:1px solid rgba(201,91,91,.3);color:#8f3a3a;font-size:14px;
  border-radius:10px;padding:12px 14px;margin-bottom:18px;line-height:1.5}
.wiz-btn{width:100%;padding:16px;border-radius:11px;border:none;background:linear-gradient(135deg,var(--gold),#c6a576);
  color:#1a1508;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-family:var(--b);
  cursor:pointer;box-shadow:0 4px 16px rgba(166,111,45,.2);margin-top:22px;transition:opacity .2s}
.wiz-btn:hover{opacity:.94}
.wiz-btn:disabled{opacity:.5;cursor:not-allowed}
.wiz-back{width:100%;padding:13px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:14px;font-weight:600;font-family:var(--b);cursor:pointer;margin-top:9px}
.wiz-back:hover{color:var(--ink);border-color:var(--muted)}

/* Radio / checkbox groups */
.opts{display:grid;gap:9px}
.opt-row{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--field-line);border-radius:11px;
  cursor:pointer;background:var(--warm-white);transition:border-color .15s,background .15s}
.opt-row:hover{border-color:var(--gold)}
.opt-row input{width:19px;height:19px;accent-color:var(--gold-deep);flex-shrink:0;margin-top:1px;cursor:pointer}
.opt-row span{font-size:15px;line-height:1.5}
.opt-row.sel{border-color:var(--gold-deep);background:rgba(214,183,138,.09)}
.ack{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin-top:4px}
.ack input{width:21px;height:21px;accent-color:var(--gold-deep);flex-shrink:0;margin-top:1px;cursor:pointer}
.ack span{font-size:14.5px;color:var(--muted);line-height:1.55}

/* Honeypot: off-screen rather than display:none, because some bots skip hidden
   fields but not positioned ones. tabindex -1 and aria-hidden keep it out of
   keyboard and screen-reader order, so no real person ever meets it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wiz-privacy{font-size:12.5px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.55}

/* Confirmation */
.done-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px 28px;text-align:center;
  box-shadow:0 2px 16px rgba(13,13,13,.04)}
.done-card .tick{width:54px;height:54px;border-radius:50%;background:rgba(94,142,109,.14);color:var(--success);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:27px;font-weight:700}
.done-card h1{font-family:var(--d);font-weight:700;font-size:clamp(24px,3vw,29px);line-height:1.15;letter-spacing:-.015em;margin-bottom:12px}
/* Once submitted, the page is a receipt. The hero's "Apply to become a Founding
   Artist" invitation is not just redundant above a confirmation — it reads as if
   the submission failed and they should fill it in again. The wizard adds .is-done
   to <body> on success. */
.is-done .apply-hero{display:none}
.is-done .wiz-sec{padding-top:76px}
@media(max-width:640px){.is-done .wiz-sec{padding-top:48px}}
.done-card p{color:var(--muted);font-size:15.5px;line-height:1.62;max-width:420px;margin:0 auto}
.done-card .back{display:inline-block;margin-top:26px;font-size:14.5px;font-weight:600}