/* ============ New to the Wall — UAW Matcher ============ */
/* Palette: cream paper, sage/eucalyptus accent, warm ink. */

:root, [data-theme="light"] {
  --paper:        #f4efe4;   /* cream paper background */
  --paper-2:      #efe9dc;
  --card:         #fbf8f1;
  --card-2:       #f7f2e7;
  --ink:          #2b2a26;
  --ink-soft:     #5b594f;
  --ink-faint:    #908d80;
  --sage:         #5e6b54;   /* primary accent */
  --sage-deep:    #45503d;
  --sage-soft:    #d9ddcb;
  --line:         #ddd6c5;
  --line-strong:  #c9bfa6;
  --gold:         #a8884e;   /* tier-1 marker / blue-chip */
  --shadow-sm: 0 1px 2px rgba(58,52,38,.06);
  --shadow-md: 0 6px 22px rgba(58,52,38,.09);
  --shadow-lg: 0 18px 48px rgba(58,52,38,.14);

  --font-display: 'Boska', 'Georgia', serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  --text-xs: clamp(.75rem,.7rem + .2vw,.82rem);
  --text-sm: clamp(.85rem,.8rem + .25vw,.95rem);
  --text-base: clamp(1rem,.96rem + .25vw,1.08rem);
  --text-lg: clamp(1.15rem,1rem + .6vw,1.45rem);
  --text-xl: clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  --text-2xl: clamp(2.4rem,1.4rem + 3.6vw,4.6rem);

  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --r-sm:.4rem; --r-md:.65rem; --r-lg:1rem; --r-full:9999px;
  --wrap: 1080px;
  --ease: cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --paper:        #1b1a16;
  --paper-2:      #201e19;
  --card:         #232118;
  --card-2:       #28261c;
  --ink:          #ece7d8;
  --ink-soft:     #b3ae9d;
  --ink-faint:    #807c6e;
  --sage:         #9aa886;
  --sage-deep:    #b3c09c;
  --sage-soft:    #343a2b;
  --line:         #36332a;
  --line-strong:  #46422f;
  --gold:         #cda765;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 22px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);background:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(94,107,84,.05) 1px, transparent 0);background-size:22px 22px;}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3{text-wrap:balance;line-height:1.08;font-family:var(--font-display);font-weight:500}
p{text-wrap:pretty}
em{font-style:italic}
::selection{background:rgba(94,107,84,.22)}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,4vw,2.5rem)}
a{color:inherit}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{color:var(--sage)}
.brand-text{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.01em}
.head-right{display:flex;align-items:center;gap:1rem}
.head-tag{font-size:var(--text-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.theme-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-full);color:var(--ink-soft);transition:border-color .2s,color .2s,background .2s}
.theme-btn:hover{border-color:var(--sage);color:var(--sage)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(2.5rem,6vw,4.5rem);max-width:880px}
.eyebrow{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:1.1rem}
.hero h1{font-size:var(--text-2xl);letter-spacing:-.01em}
.hero h1 em{color:var(--sage)}
.lede{font-size:var(--text-lg);color:var(--ink-soft);max-width:60ch;margin:1.5rem 0 2rem;line-height:1.5}
.hero-credit{margin-top:2rem;font-size:var(--text-sm);color:var(--ink-faint)}
.hero-credit strong{color:var(--ink-soft);font-weight:600}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:var(--r-full);font-size:var(--text-sm);font-weight:600;text-decoration:none;border:1px solid transparent;transition:all .2s var(--ease)}
.btn-primary{background:var(--sage);color:#fbf8f1}
.btn-primary:hover{background:var(--sage-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
[data-theme="dark"] .btn-primary{color:#1b1a16}
.btn-ghost{border-color:var(--line-strong);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage)}

/* ---------- Step heading ---------- */
.step-head{display:flex;align-items:baseline;gap:1rem;border-top:1px solid var(--line);padding-top:1.6rem;margin-bottom:2rem}
.step-num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--sage);font-style:italic}
.step-head h2{font-size:var(--text-xl)}

/* ---------- Matcher form ---------- */
.matcher{padding-block:clamp(1rem,3vw,2rem) clamp(3rem,7vw,5rem)}
.field{border:none;margin-bottom:2.6rem}
.field legend{font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink);margin-bottom:1rem;display:block;width:100%}
.field .hint{font-family:var(--font-body);font-size:var(--text-xs);color:var(--ink-faint);font-weight:400;letter-spacing:.01em;margin-left:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{padding:.55rem 1.05rem;border:1px solid var(--line-strong);border-radius:var(--r-full);background:var(--card);color:var(--ink-soft);font-size:var(--text-sm);font-weight:500;transition:all .18s var(--ease);user-select:none}
.chip:hover{border-color:var(--sage);color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--sage);color:#fbf8f1;border-color:var(--sage)}
[data-theme="dark"] .chip[aria-pressed="true"]{color:#1b1a16}

.form-actions{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}

/* ---------- Results ---------- */
.results{padding-block:1rem 6rem}
.results-summary{font-size:var(--text-base);color:var(--ink-soft);margin-bottom:1.4rem;max-width:62ch}
.results-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.4rem}
.results-summary strong{color:var(--ink);font-weight:600}

.tier{margin-bottom:3.2rem}
.tier-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.4rem}
.tier-badge{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.3rem .7rem;border-radius:var(--r-full)}
.tier-1 .tier-badge{background:var(--sage);color:#fbf8f1}
[data-theme="dark"] .tier-1 .tier-badge{color:#1b1a16}
.tier-2 .tier-badge{background:var(--sage-soft);color:var(--sage-deep)}
.tier-3 .tier-badge{background:transparent;border:1px solid var(--line-strong);color:var(--ink-faint)}
.tier-head h3{font-size:var(--text-lg)}
.tier-sub{font-size:var(--text-sm);color:var(--ink-faint);margin-bottom:1.4rem}
.tier-maps-link{font-size:var(--text-xs);color:var(--sage);font-weight:600;text-decoration:none;white-space:nowrap}
.tier-maps-link:hover{text-decoration:underline}
.results-nudge{font-size:var(--text-xs);color:var(--ink-faint);font-style:italic;display:block;margin-top:.5rem}
.results-nudge a{color:var(--sage);text-decoration:none;font-weight:600}
.results-nudge a:hover{text-decoration:underline}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.1rem}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.4rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card.is-notable{border-color:var(--gold)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.5rem}
.card h4{font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.15;color:var(--ink)}
.card-name-link{color:inherit;text-decoration:none}
.card-name-link:hover{text-decoration:underline;text-underline-offset:3px}
.card-link{color:var(--ink-soft);text-decoration:none;font-style:italic}
.card-link:hover{color:var(--sage);text-decoration:underline;text-underline-offset:2px}
.card-loc{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.7rem}
.notable-dot{flex:none;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;color:var(--gold);white-space:nowrap;padding-top:.2rem}
.card-show{font-style:italic;color:var(--ink-soft);font-size:var(--text-sm);margin-bottom:.55rem}
.card-blurb{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.55;margin-bottom:.9rem}
.card-why{font-size:var(--text-xs);color:var(--ink);background:var(--card-2);border-left:2px solid var(--sage);padding:.55rem .75rem;border-radius:0 var(--r-sm) var(--r-sm) 0;line-height:1.5}
.card-why b{color:var(--sage-deep);font-weight:600}
[data-theme="dark"] .card-why b{color:var(--sage)}
.card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.tag{font-size:var(--text-xs);padding:.2rem .55rem;border-radius:var(--r-sm);background:var(--sage-soft);color:var(--sage-deep);font-weight:500}
[data-theme="dark"] .tag{color:var(--sage-deep)}

.empty{padding:2.5rem;text-align:center;color:var(--ink-faint);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.results-foot{margin-top:1rem;font-size:var(--text-sm);color:var(--ink-faint);font-style:italic;max-width:60ch}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--paper-2);padding-block:3rem}
.foot-inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-inner svg{color:var(--sage)}
.foot-name{font-family:var(--font-display);font-size:1.1rem;margin-top:.5rem}
.foot-note{max-width:48ch;font-size:var(--text-sm);color:var(--ink-faint)}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);animation:rise .5s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:560px){
  .head-tag{display:none}
  .cards{grid-template-columns:1fr}
  .artist-input-row{flex-direction:column}
}