:root{--gold:#E8A33D;--gold-d:#C4801E;--ink:#161616;--grey:#61666d;--line:#e6e2da;--bg:#ffffff;--soft:#faf7f1}
*{box-sizing:border-box;margin:0}
body{font-family:'Work Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;font-weight:700}
h1{font-size:clamp(30px,5vw,52px)}
h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
h3{font-size:18px;margin-bottom:6px}
p{margin-bottom:12px}
.muted{color:var(--grey)}
.gold{color:var(--gold-d)}
/* header */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fffdfa;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;flex-wrap:wrap}
.brand{font-size:15px;letter-spacing:.02em}
.brand b{font-weight:700}
.waves{color:var(--gold);font-size:20px}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:14.5px}
nav a:hover{color:var(--gold-d)}
.btn{background:var(--gold);color:#161616;font-weight:600;padding:9px 18px;border-radius:3px;border:none;cursor:pointer;font-size:14.5px;display:inline-block}
.btn:hover{background:var(--gold-d);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--ink)}
/* sections */
.hero{padding:90px 0 70px;border-bottom:1px solid var(--line)}
.hero .kicker{letter-spacing:.22em;font-size:12px;text-transform:uppercase;color:var(--gold-d);margin-bottom:18px}
.hero p.lead{font-size:19px;max-width:620px;margin:18px 0 8px}
.hero .date{font-weight:600;margin-bottom:26px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-bottom:1px solid var(--line)}
.proof div{padding:26px 22px;border-left:1px solid var(--line);font-size:14.5px}
.proof b{display:block;font-size:24px;color:var(--gold-d)}
section.block{padding:64px 0;border-bottom:1px solid var(--line)}
section.soft{background:var(--soft)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.card{border:1px solid var(--line);padding:22px;background:#fff;border-radius:3px}
.card .rule{width:34px;height:3px;background:var(--gold);margin-bottom:14px}
.card ul{margin:8px 0 0 18px;font-size:14.5px;color:var(--grey)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:20px}
.steps div{border-top:3px solid var(--gold);padding-top:12px;font-size:14.5px}
.steps b{display:block;font-size:22px;color:var(--gold-d)}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{background:var(--soft);font-weight:600}
.wbar{display:flex;height:14px;margin:16px 0 6px;border-radius:2px;overflow:hidden}
.wlbl{display:flex;font-size:12px;color:var(--grey)}
.wlbl span{padding-right:6px}
/* forms */
form.entry{max-width:720px}
label{display:block;font-weight:600;font-size:14px;margin:16px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cfc9bd;border-radius:3px;font:inherit;background:#fff}
textarea{min-height:140px}
.hint{font-size:13px;color:var(--grey);margin-top:4px}
.notice{background:var(--soft);border:1px solid var(--line);padding:16px 18px;border-radius:3px;margin:18px 0}
.error{background:#fdf0ef;border:1px solid #e6b3ad;color:#7a1f14;padding:12px 16px;border-radius:3px;margin:14px 0}
.ok{background:#f0f7ef;border:1px solid #b9d6b4;color:#1e5c17;padding:12px 16px;border-radius:3px;margin:14px 0}
/* winners */
.seg{margin-top:30px}
.wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:12px}
.win{border:1px solid var(--line);padding:14px 16px;background:#fff;border-radius:3px;font-size:14.5px}
.win b{display:block}
.win span{color:var(--grey);font-size:13px}
/* jury */
.jury{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:20px}
.juror{border-top:3px solid var(--gold);padding-top:12px}
.juror span{color:var(--grey);font-size:14px}
/* footer */
footer{background:#161616;color:#d8d4cc;padding:50px 0 24px;font-size:14px}
footer h4{color:#fff;margin-bottom:10px;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
footer a{display:block;padding:3px 0;color:#d8d4cc}
footer a:hover{color:var(--gold)}
.fbrand{color:#fff;font-weight:600;margin-bottom:10px}
.grid4{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:26px}
.tiny{margin-top:34px;font-size:12px;color:#8b877f;border-top:1px solid #2c2c2c;padding-top:16px}
@media(max-width:760px){.grid4{grid-template-columns:1fr 1fr}.hero{padding:56px 0 44px}}

/* ---------- portal / jury shell ---------- */
.abar{background:var(--ink);color:#fff}
.abar .wrap{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;flex-wrap:wrap;gap:10px}
.abar b{color:var(--gold)}
.abar .who{color:#8b877f;font-size:13px;margin-left:8px}
.abar a{color:#d8d4cc;margin-left:18px;font-size:14px}
.abar a:hover{color:var(--gold)}
main{padding:34px 0}
main.narrow .wrap{max-width:720px}
.crumb{font-size:13px;color:var(--grey);margin-bottom:14px}
.crumb a{color:var(--gold-d)}
.pill{display:inline-block;padding:2px 9px;border-radius:2px;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.p-draft{background:#efece6;color:#5f5a51}
.p-unpaid{background:#fdf0ef;color:#8a2b1e}
.p-paid{background:#eaf4e8;color:#1e5c17}
.p-submitted{background:#fdf3e3;color:#8a5a12}
.p-scored{background:#e8f0f7;color:#194a70}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.box{border:1px solid var(--line);padding:20px;border-radius:3px;background:#fff}
.box h3{margin-bottom:8px}
.kv{font-size:14px}
.kv b{display:inline-block;min-width:150px;color:var(--grey);font-weight:500}
.qblock{border-left:3px solid var(--gold);padding:2px 0 2px 16px;margin:24px 0 8px}
.qblock .q{font-weight:600;font-size:15px}
.qblock .h{font-size:13px;color:var(--grey);margin-top:3px}
.answer{white-space:pre-wrap;font-size:14.6px;margin:8px 0 0}
.scorerow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.scorerow .nm{flex:1 1 200px}
.scorerow .nm b{display:block}
.scorerow .nm span{font-size:13px;color:var(--grey)}
.scorerow select{width:90px}
.scorerow .wt{font-family:monospace;color:var(--gold-d);width:44px;text-align:right}
.filelist a{display:block;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.filelist a:hover{color:var(--gold-d)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:20px}
.gal figure{margin:0}
.gal img{width:100%;height:170px;object-fit:cover;display:block;border:1px solid var(--line)}
.gal figcaption{font-size:12.5px;color:var(--grey);padding:6px 2px}
.steps-bar{display:flex;gap:0;margin:22px 0 30px;flex-wrap:wrap}
.steps-bar div{flex:1 1 120px;border-top:3px solid var(--line);padding:10px 12px 0 0;font-size:13px;color:var(--grey)}
.steps-bar div.on{border-top-color:var(--gold);color:var(--ink);font-weight:600}
.total{font-size:30px;font-weight:700;color:var(--gold-d)}
.warn{background:#fdf7e8;border:1px solid #e8d3a0;color:#6b4e12;padding:12px 16px;border-radius:3px;margin:14px 0;font-size:14.5px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}.kv b{min-width:110px}}

/* ---------- hero banner: the launch-hoarding creative ---------- */
.hero-banner{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hb-slides{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
.hb-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 1.1s ease-in-out}
.hb-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hb-slide.on{opacity:1}
.hero-banner.has-img .hb-slides::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(95deg,rgba(14,14,14,.93) 0%,rgba(14,14,14,.86) 30%,rgba(14,14,14,.62) 58%,rgba(14,14,14,.28) 100%)}
.hb-ripple{position:absolute;right:-4%;top:0;height:100%;width:70%;z-index:1;pointer-events:none}
.hero-banner.has-img .hb-ripple{opacity:.55}
.hb-inner{position:relative;z-index:2;padding:58px 22px 44px}
.hb-mark{width:64px;height:55px;display:block;margin-bottom:20px}
.hb-kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.hb-h1{font-size:clamp(30px,5.4vw,58px);line-height:1.06;font-weight:700;color:#fff;letter-spacing:-.01em}
.hb-h1 span{color:var(--gold)}
.hb-rule{width:190px;height:4px;background:var(--gold);margin:22px 0 20px}
.hb-lead{font-size:clamp(15px,1.5vw,19px);color:#D8D4CC;max-width:520px;margin-bottom:10px}
.hb-date{font-weight:600;color:#fff;margin-bottom:26px;font-size:15px}
.hb-cta{display:flex;gap:12px;flex-wrap:wrap}
.hb-ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}
.hb-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hb-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14)}
.hb-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:20px 22px}
.hb-statrow div{padding-right:16px}
.hb-statrow b{display:block;font-size:26px;color:var(--gold);line-height:1.2}
.hb-statrow span{font-size:12.5px;color:#B9B5AD}
.hb-dots{position:absolute;right:22px;bottom:104px;z-index:3;display:flex;gap:8px}
.hb-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:transparent;cursor:pointer;transition:background .2s}
.hb-dot.on{background:var(--gold);border-color:var(--gold)}
.hb-credit{position:absolute;left:22px;bottom:8px;z-index:3;font-size:10.5px;color:rgba(255,255,255,.4)}
@media(max-width:760px){
  .hb-inner{padding:40px 22px 32px}
  .hb-ripple{width:120%;right:-30%;opacity:.7}
  .hero-banner.has-img .hb-slides::after{background:linear-gradient(180deg,rgba(14,14,14,.86) 0%,rgba(14,14,14,.78) 60%,rgba(14,14,14,.62) 100%)}
  .hb-dots{bottom:auto;top:14px;right:14px}
  .hb-statrow b{font-size:21px}
}

/* =====================================================================
   BRAND / LOGO SYSTEM
   Every size below is proportional. Nothing is expressed in fixed px,
   so the lockup scales with the user's root font size and the viewport.
   --nav-h and --logo-scale are the only two numbers to tune.
   ===================================================================== */
:root{
  --nav-h: 4.75rem;          /* navbar height */
  --logo-scale: .62;         /* header logo height as a share of --nav-h */
  --logo-ratio: 3.2;         /* the lockup is 3.2 : 1 */
  --logo-safe: .5em;         /* clear space, expressed against the logo's own height */
}
.top .bar{ min-height: var(--nav-h); }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand-img{ display:block; width:auto; }

/* header: height is a share of the navbar, so the two can never disagree */
.brand-header .brand-img{
  height: calc(var(--nav-h) * var(--logo-scale));
  max-height: 3.25rem;
  padding-block: var(--logo-safe);
}
.brand-header .brand-mark{ display:none; }

/* footer: width is a share of the footer column, capped so it never dominates */
.brand-footer .brand-img{ width: clamp(9rem, 62%, 15rem); height:auto; }

/* portal and jury bars: small, sits beside the section label */
.abar-brand{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.brand-bar .brand-img{ height: 1.9rem; }

/* hero: larger, with clear space equal to its own height, per brand safe-area rule */

.brand-fallback{ font-size:.95rem; letter-spacing:.01em; white-space:nowrap; }
.brand-footer .brand-fallback, .brand-bar .brand-fallback{ color:#fff; }

/* ---- responsive behaviour ---- */
@media (max-width: 900px){ :root{ --nav-h: 4.25rem; } }

/* below this width a 3.2:1 lockup crowds the menu, so the mark stands alone */
@media (max-width: 560px){
  :root{ --nav-h: 3.9rem; --logo-scale: .68; }
  .brand-header .brand-full{ display:none; }
  .brand-header .brand-mark{ display:block; height: calc(var(--nav-h) * var(--logo-scale)); }
  .brand-footer .brand-img{ width: clamp(8rem, 54%, 12rem); }
}
/* ultra-wide: hold the lockup to a sensible optical size */
@media (min-width: 1800px){ :root{ --nav-h: 5.25rem; } .brand-header .brand-img{ max-height: 3.75rem; } }

/* retina and high-DPI are handled by the srcset @2x files, no CSS needed */

/* respect an explicit dark preference on the light pages */
@media (prefers-color-scheme: dark){
  .top{ background:#12100e; border-bottom-color:#2b2723; }
  .top nav a{ color:#e9e5dd; }
  .brand-header .brand-img{ filter: none; }
}

/* ---- print: the lockup leads every printed page ---- */
@media print{
  .top, footer, .abar, .hb-slides, .hb-ripple, .hb-dots, .hb-cta, .btn{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .print-brand{ display:block !important; width:52mm; margin-bottom:8mm; }
  .wrap{ max-width:none; padding:0; }
  a[href]:after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .hero-banner{ background:#fff !important; color:#000 !important; }
  .hb-h1, .hb-lead, .hb-date{ color:#000 !important; }
}
.print-brand{ display:none; }

/* ---- watermark, used sparingly on long content pages ---- */
.brand-watermark{ position:relative; }
.brand-watermark::before{
  content:""; position:absolute; top:0; right:0; width:34%; padding-top:34%;
  background:url("logo-watermark.png") no-repeat center/contain;
  pointer-events:none; z-index:0;
}
.brand-watermark > *{ position:relative; z-index:1; }


/* =====================================================================
   HERO LOCKUP
   The logo is the headline here. It is sized by WIDTH because the
   lockup is 3.2 : 1, so width is what governs how it reads. The H1 is
   kept in the markup for search engines and screen readers but steps
   back visually, because the logo already states the name and printing
   it twice in one screenful looks like a mistake.
   ===================================================================== */
.hb-logo{
  display:block; height:auto;
  width: clamp(15rem, 34%, 27rem);      /* never smaller than legible, never dominant */
  margin: 0 0 1.35rem;                  /* clear space below, per the safe-area rule */
}
.hb-h1-quiet{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* with the H1 hidden the rule would sit tight under the kicker, so give it room */
.hero-banner .hb-h1-quiet + .hb-rule{ margin-top:1.5rem; }

/* the kicker reads better under the lockup than above it */
.hb-inner .hb-kicker{ margin-bottom:0; }

@media (max-width: 900px){
  .hb-logo{ width: clamp(14rem, 46%, 22rem); }
}
@media (max-width: 560px){
  .hb-logo{ width: min(78%, 17rem); margin-bottom:1.1rem; }
  .hero-banner .hb-h1-quiet + .hb-rule{ margin-top:1.15rem; }
}
@media (min-width: 1800px){
  .hb-logo{ width: clamp(20rem, 30%, 32rem); }
}