/* ============================================================
   Judges & Partners — standalone page.
   Self-contained: shares the Voice of Youth palette + fonts with
   the About page, but renders a simple static layout (no canvas /
   wireframe JS). Placeholder cards are filled in once names land.
   ============================================================ */
:root {
    --ink: #f5f3ee;
    --ink-soft: rgba(245, 243, 238, 0.62);
    --ink-faint: rgba(245, 243, 238, 0.34);
    --amber: #c98b4d;
    --amber-soft: rgba(201, 139, 77, 0.5);
    --bg: #080a12;
    --panel: rgba(255, 255, 255, 0.025);
    --line: rgba(255, 255, 255, 0.09);
    --serif: "Lora", Georgia, "Times New Roman", serif;
    --type: "Special Elite", "Courier New", monospace;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}
/* Layered radial glows — the same warm-amber / cool-navy depth as the rest
   of the site, done in pure CSS so this page needs no canvas. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 80% -10%, rgba(201, 139, 77, 0.10), transparent 60%),
        radial-gradient(900px 720px at 10% 110%, rgba(24, 40, 84, 0.42), transparent 62%),
        radial-gradient(720px 520px at 50% 45%, rgba(20, 26, 54, 0.22), transparent 72%);
}
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 1.6rem 5rem; }

/* ---- top nav / back ---- */
.top-nav { position: sticky; top: 0; z-index: 5; padding: 1.2rem 0 1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.back-link {
    display: inline-flex; align-items: center; gap: 0.6em;
    color: var(--ink-soft); text-decoration: none;
    font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
    transition: color 0.2s;
}
.back-link:hover { color: var(--amber); }
.back-link svg { width: 16px; height: 16px; }

/* ---- hero ---- */
.hero { padding: 3rem 0 2.4rem; border-bottom: 1px solid var(--line); }
.hero-eyebrow { font-family: var(--type); font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--amber); margin: 0 0 1rem; }
.hero h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.5rem, 6.4vw, 4.4rem);
    line-height: 1.03; margin: 0 0 1.1rem; letter-spacing: -0.01em;
}
.hero h1 em { font-style: italic; color: var(--amber); }
.hero-sub { max-width: 58ch; margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }

/* ---- group ---- */
.group { padding: 2.8rem 0 0.4rem; }
.group-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.group-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; }
.group-head h2 em { font-style: italic; color: var(--amber); }
.group-head .count { font-family: var(--type); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.group-note { font-size: 0.84rem; color: var(--ink-faint); margin: 0 0 1.5rem; letter-spacing: 0.02em; }

/* ---- supported by / patron ---- */
.patron {
    display: flex; gap: 1.7rem; align-items: stretch;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 1.6rem;
}
.patron-photo { flex: 0 0 168px; }
.patron-photo img {
    width: 168px; height: 100%; min-height: 200px; max-height: 280px;
    object-fit: cover; object-position: center 22%;
    border-radius: 5px; display: block;
    border: 1px solid var(--line); filter: grayscale(0.12);
}
.patron-body { flex: 1; min-width: 0; align-self: center; }
.patron-name { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.2; }
.patron-role {
    font-family: var(--type); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--amber); margin: 0.4rem 0 1rem;
}
.patron-bio { font-family: var(--serif); font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 0.75rem; }
.patron-fireside {
    margin-top: 0.5rem; display: flex; align-items: center; gap: 0.7rem;
    font-family: var(--serif); font-size: 0.92rem; color: var(--ink);
    border-left: 2px solid var(--amber); padding: 0.55rem 0.95rem; background: rgba(201, 139, 77, 0.05);
}
.patron-fireside-mark {
    flex: 0 0 auto; font-family: var(--type); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--amber); border: 1px solid var(--amber-soft); border-radius: 999px; padding: 0.22rem 0.6rem;
}
@media (max-width: 560px) {
    .patron { flex-direction: column; gap: 1.1rem; }
    .patron-photo { flex: 0 0 auto; }
    .patron-photo img { width: 100%; height: 320px; max-height: none; object-position: center 18%; }
}

/* ---- judges ---- */
.judge-domain-group { margin-bottom: 2.2rem; }
.judge-domain {
    font-family: var(--type); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line);
}
.judge-domain em { font-style: normal; color: var(--amber); }
.judges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.judge-card {
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
    padding: 1.3rem; display: flex; flex-direction: column; gap: 0.85rem;
    transition: border-color 0.25s, transform 0.25s;
}
.judge-card:hover { border-color: var(--amber-soft); transform: translateY(-3px); }
.judge-portrait {
    aspect-ratio: 4 / 3; border-radius: 4px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 9px, transparent 9px 18px),
        rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.13);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint); font-family: var(--type); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
    overflow: hidden;
}
.judge-portrait.has-photo { border-style: solid; border-color: var(--line); background: none; }
.judge-portrait.has-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block;
}
.judge-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.judge-role { font-family: var(--type); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.judge-bio { font-family: var(--serif); font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.judge-tag {
    align-self: flex-start; font-family: var(--type); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.6rem;
}
.judge-name.judge-tba { color: var(--ink-faint); font-style: italic; }

/* ---- partner tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile {
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
    aspect-ratio: 3 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
    text-align: center; padding: 1rem; transition: border-color 0.25s;
}
.tile:hover { border-color: var(--amber-soft); }
.tile-logo {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 0.9rem;
}
.tile-label { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- announce + footer ---- */
.announce {
    margin-top: 3.2rem; border: 1px solid var(--amber-soft); border-radius: 6px;
    padding: 1.5rem 1.8rem; background: rgba(201, 139, 77, 0.05);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.announce p { margin: 0; font-family: var(--serif); font-size: 0.98rem; color: var(--ink-soft); }
.announce p b { color: var(--ink); font-weight: 600; }
.announce a { color: var(--amber); text-decoration: none; font-weight: 600; white-space: nowrap; }
.announce a:hover { text-decoration: underline; }
.foot { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.05em; }

@media (max-width: 820px) {
    .judges { grid-template-columns: repeat(2, 1fr); }
    .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .judges { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .hero { padding: 2.2rem 0 1.8rem; }
    .announce { flex-direction: column; align-items: flex-start; }
}

/* ---- /why page: manifesto prose + pull-quotes ---- */
.manifesto { padding: 2.6rem 0 0.4rem; }
.manifesto.closing { padding-top: 2.8rem; }
.prose { max-width: 70ch; }
.prose p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.72; color: var(--ink-soft); margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; color: var(--amber); }
.prose b { color: var(--ink); font-weight: 600; }
.pull-quote {
    margin: 0 0 1.6rem;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.2;
    color: var(--ink);
}
.pull-quote cite {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--type);
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
}
.manifesto.closing .pull-quote { margin: 1.4rem 0 0; }

/* ---- /guidelines page: spec strip + rule lists ---- */
.specs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
    margin: 2.4rem 0 0.6rem;
}
.spec {
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
    padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.spec-k { font-family: var(--type); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.spec-v { font-family: var(--serif); font-size: 0.98rem; color: var(--ink); }
.glist, .gsteps { margin: 0; padding: 0; list-style: none; max-width: 72ch; }
.glist li, .gsteps li {
    position: relative; padding: 0 0 0 1.5rem; margin: 0 0 0.85rem;
    font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft);
}
.glist li:last-child, .gsteps li:last-child { margin-bottom: 0; }
.glist li b, .gsteps li b { color: var(--ink); font-weight: 600; }
.glist li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.gsteps { counter-reset: gstep; margin-bottom: 1.4rem; }
.gsteps li { counter-increment: gstep; padding-left: 2.1rem; }
.gsteps li::before {
    content: counter(gstep); position: absolute; left: 0; top: 0.05em;
    width: 1.4rem; height: 1.4rem; border: 1px solid var(--amber-soft); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--type); font-size: 0.7rem; color: var(--amber);
}
@media (max-width: 560px) {
    .specs { grid-template-columns: repeat(2, 1fr); }
}

/* ---- real sponsor / partner logos ---- */
.logos { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.logo-tile { display: flex; flex-direction: column; gap: 0.6rem; width: 210px; margin: 0; }
.logo-chip {
    border: 1px solid var(--line); border-radius: 6px;
    aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
    padding: 1.1rem 1.2rem; overflow: hidden;
}
.logo-chip img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-tile figcaption {
    font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); text-align: center;
}
@media (max-width: 560px) {
    .logo-tile { width: calc(50% - 0.55rem); }
}