/* Write Your Heart Out 2026 - public pages. Colours come ONLY from theme.css. */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--wyho-bg); color:var(--wyho-ink); font-family:var(--wyho-font-display); font-size:17px; line-height:1.65; }
img{ max-width:100%; display:block; }
a{ color:var(--wyho-cta-hover); text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--wyho-font-display); color:var(--wyho-primary); line-height:1.15; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.2rem,6vw,3.8rem); font-weight:800; }
h2{ font-size:clamp(1.6rem,4vw,2.3rem); font-weight:800; }
h3{ font-size:1.25rem; font-weight:700; }
p{ margin:0 0 1em; }
.ui{ font-family:var(--wyho-font-ui); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-999px; top:8px; background:var(--wyho-primary); color:#fff; padding:.7rem 1rem; border-radius:8px; z-index:200; font-family:var(--wyho-font-ui); font-weight:600; }
.skip-link:focus{ left:8px; }
:focus-visible{ outline:3px solid var(--wyho-focus); outline-offset:3px; border-radius:6px; }
.boot{ padding:4rem 1.5rem; text-align:center; color:var(--wyho-ink-soft); font-family:var(--wyho-font-ui); }
.wrap{ width:min(1120px,100% - 2.4rem); margin-inline:auto; }
.narrow{ width:min(760px,100% - 2.4rem); margin-inline:auto; }

/* ---------- header / footer ---------- */
.site-header{ background:var(--wyho-surface); border-bottom:1px solid var(--wyho-line); position:sticky; top:0; z-index:50; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--wyho-primary); }
.brand img{ height:44px; width:auto; }
.brand span{ font-family:var(--wyho-font-ui); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }
.nav{ display:flex; gap:.35rem; flex-wrap:wrap; font-family:var(--wyho-font-ui); }
.nav a{ padding:.5rem .9rem; border-radius:999px; text-decoration:none; color:var(--wyho-ink); font-weight:600; font-size:.86rem; }
.nav a:hover{ background:var(--wyho-accent-soft); }
.nav a[aria-current="page"]{ background:var(--wyho-primary); color:#fff; }
.nav a.nav-cta{ background:var(--wyho-cta); color:#fff; }
.nav a.nav-cta:hover{ background:var(--wyho-cta-hover); }
.site-footer{ background:var(--wyho-primary-deep); color:#F3DCE6; margin-top:4rem; padding:2.4rem 0; font-family:var(--wyho-font-ui); font-size:.85rem; }
.site-footer a{ color:#fff; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--wyho-font-ui); font-weight:700; font-size:.95rem; padding:.9rem 1.5rem; border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s, background .15s; min-height:48px; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--wyho-cta); color:#fff; }
.btn-primary:hover{ background:var(--wyho-cta-hover); }
.btn-ghost{ background:transparent; color:var(--wyho-primary); border-color:var(--wyho-primary); }
.btn-ghost:hover{ background:var(--wyho-accent-soft); }
.btn-light{ background:#fff; color:var(--wyho-primary); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-lg{ font-size:1.05rem; padding:1.05rem 1.9rem; }

/* ---------- hero ---------- */
.hero{ background:radial-gradient(1200px 500px at 85% -10%, var(--wyho-accent) 0%, transparent 60%), linear-gradient(160deg, var(--wyho-primary) 0%, var(--wyho-primary-deep) 100%); color:#fff; padding:clamp(3rem,8vw,6rem) 0; position:relative; overflow:hidden; }
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero .kicker{ font-family:var(--wyho-font-ui); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wyho-accent-soft); margin-bottom:1rem; }
.hero .lede{ font-size:clamp(1.1rem,2.4vw,1.4rem); max-width:36rem; color:#F8E7EF; }
.prize-chip{ display:inline-flex; align-items:center; gap:.6rem; background:var(--wyho-gold); color:#3B1027; font-family:var(--wyho-font-ui); font-weight:700; padding:.55rem 1.1rem; border-radius:999px; margin:.4rem 0 1.6rem; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-deco{ position:absolute; right:-40px; top:-40px; width:340px; opacity:.18; pointer-events:none; }

/* ---------- status card ---------- */
.status{ background:var(--wyho-surface); border-radius:var(--wyho-radius); box-shadow:var(--wyho-shadow); padding:1.6rem 1.8rem; margin-top:-2.6rem; position:relative; z-index:2; border:1px solid var(--wyho-line); }
.status .badge{ font-family:var(--wyho-font-ui); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; background:var(--wyho-accent-soft); color:var(--wyho-primary); display:inline-block; margin-bottom:.6rem; }
.status .badge.live{ background:#DDF0D6; color:var(--wyho-success); }
.status h2{ font-size:1.6rem; margin-bottom:.3rem; }
.status p{ margin-bottom:.8rem; color:var(--wyho-ink-soft); }
.status .row{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.cd{ font-family:var(--wyho-font-ui); font-weight:700; font-size:1.35rem; color:var(--wyho-primary); font-variant-numeric:tabular-nums; }
.cd small{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wyho-ink-soft); }

/* ---------- sections ---------- */
.section{ padding:clamp(2.4rem,6vw,4.2rem) 0; }
.section.alt{ background:var(--wyho-bg-alt); }
.eyebrow{ font-family:var(--wyho-font-ui); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wyho-cta-hover); margin-bottom:.6rem; }
.grid{ display:grid; gap:1.2rem; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.g4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.card{ background:var(--wyho-surface); border:1px solid var(--wyho-line); border-radius:var(--wyho-radius); padding:1.5rem; }
.card h3{ margin-bottom:.35rem; }
.card p:last-child{ margin-bottom:0; }
.step-num{ font-family:var(--wyho-font-ui); font-weight:800; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--wyho-accent-soft); color:var(--wyho-primary); display:grid; place-items:center; margin-bottom:.8rem; }
.fact{ text-align:center; }
.fact b{ display:block; font-family:var(--wyho-font-display); font-size:2.2rem; color:var(--wyho-cta-hover); }
.fact span{ font-family:var(--wyho-font-ui); font-size:.85rem; color:var(--wyho-ink-soft); }

/* ---------- timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.timeline li{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; align-items:center; background:var(--wyho-surface); border:1px solid var(--wyho-line); border-radius:var(--wyho-radius-sm); padding:.9rem 1.1rem; }
.timeline .dot{ width:14px; height:14px; border-radius:50%; background:var(--wyho-line); grid-row:span 2; }
.timeline li.done .dot{ background:var(--wyho-fresh-deep); }
.timeline li.now{ border-color:var(--wyho-cta); box-shadow:0 0 0 3px var(--wyho-accent-soft); }
.timeline li.now .dot{ background:var(--wyho-cta); }
.timeline strong{ font-family:var(--wyho-font-ui); font-size:.95rem; }
.timeline .when{ font-family:var(--wyho-font-ui); font-size:.84rem; color:var(--wyho-ink-soft); }

/* ---------- forms ---------- */
.form-card{ background:var(--wyho-surface); border:1px solid var(--wyho-line); border-radius:var(--wyho-radius); padding:clamp(1.3rem,4vw,2.2rem); box-shadow:var(--wyho-shadow); }
.fieldset{ border:0; padding:0; margin:0 0 1.8rem; }
.fieldset legend{ font-family:var(--wyho-font-display); font-weight:800; font-size:1.3rem; color:var(--wyho-primary); padding:0; margin-bottom:.9rem; }
.field{ margin-bottom:1.15rem; }
.field label,.label{ display:block; font-family:var(--wyho-font-ui); font-weight:600; font-size:.88rem; margin-bottom:.4rem; color:var(--wyho-ink); }
.req{ color:var(--wyho-danger); }
.hint{ font-family:var(--wyho-font-ui); font-size:.8rem; color:var(--wyho-ink-soft); margin:.3rem 0 0; }
input[type=text],input[type=email],input[type=date],textarea,select{ width:100%; font:inherit; font-family:var(--wyho-font-ui); font-size:1rem; padding:.85rem 1rem; border:2px solid var(--wyho-line); border-radius:var(--wyho-radius-sm); background:#fff; color:var(--wyho-ink); min-height:48px; }
textarea{ min-height:14rem; line-height:1.6; resize:vertical; }
input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid var(--wyho-focus); outline-offset:1px; border-color:var(--wyho-focus); }
.prefix{ display:flex; align-items:stretch; }
.prefix span{ display:grid; place-items:center; padding:0 .9rem; background:var(--wyho-accent-soft); border:2px solid var(--wyho-line); border-right:0; border-radius:var(--wyho-radius-sm) 0 0 var(--wyho-radius-sm); font-family:var(--wyho-font-ui); font-weight:700; color:var(--wyho-primary); }
.prefix input{ border-radius:0 var(--wyho-radius-sm) var(--wyho-radius-sm) 0; }
.field.error input,.field.error textarea{ border-color:var(--wyho-danger); }
.err{ font-family:var(--wyho-font-ui); font-size:.84rem; color:var(--wyho-danger); font-weight:600; margin:.4rem 0 0; display:none; }
.field.error .err,.err.show{ display:block; }
.alert{ font-family:var(--wyho-font-ui); border-radius:var(--wyho-radius-sm); padding:1rem 1.2rem; margin-bottom:1.4rem; font-size:.92rem; }
.alert-error{ background:#FBE3E7; color:#7C1D31; border:1px solid #E9AEB9; }
.alert-info{ background:var(--wyho-accent-soft); color:var(--wyho-primary-deep); border:1px solid var(--wyho-accent); }
.alert-ok{ background:#DDF0D6; color:#1F4D29; border:1px solid #A7D49A; }
.choice{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:1rem; }
.choice label{ display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; border:2px solid var(--wyho-line); border-radius:var(--wyho-radius-sm); cursor:pointer; background:#fff; margin:0; }
.choice input{ margin-top:.25rem; width:1.15rem; height:1.15rem; accent-color:var(--wyho-cta); flex:none; }
.choice label:has(input:checked){ border-color:var(--wyho-cta); background:var(--wyho-accent-soft); }
.choice strong{ display:block; }
.choice small{ display:block; font-weight:500; color:var(--wyho-ink-soft); }
.checkline{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; font-family:var(--wyho-font-ui); font-size:.9rem; }
.checkline input{ width:1.3rem; height:1.3rem; accent-color:var(--wyho-cta); flex:none; margin-top:.15rem; }
.checkline label{ margin:0; font-weight:500; }
.filebox{ border:2px dashed var(--wyho-accent); border-radius:var(--wyho-radius-sm); padding:1.2rem; background:#fff; }
.counter{ font-family:var(--wyho-font-ui); font-size:.8rem; color:var(--wyho-ink-soft); text-align:right; margin-top:.3rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.success{ text-align:center; padding:2.5rem 1.5rem; }
.success .tick{ width:72px; height:72px; border-radius:50%; background:var(--wyho-fresh); color:#1F4D29; display:grid; place-items:center; margin:0 auto 1rem; font-size:2.2rem; }
.ref{ display:inline-block; font-family:var(--wyho-font-ui); font-weight:700; letter-spacing:.08em; background:var(--wyho-accent-soft); color:var(--wyho-primary); padding:.5rem 1rem; border-radius:999px; margin:.4rem 0 1rem; }

/* ---------- finalists / voting ---------- */
.finalists{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.fin{ background:var(--wyho-surface); border:2px solid var(--wyho-line); border-radius:var(--wyho-radius); padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; text-align:center; position:relative; }
.fin.mine{ border-color:var(--wyho-cta); box-shadow:0 0 0 4px var(--wyho-accent-soft); }
.fin .ph{ width:132px; height:132px; border-radius:50%; margin:0 auto .3rem; object-fit:cover; background:var(--wyho-accent-soft); border:4px solid var(--wyho-surface); box-shadow:0 0 0 3px var(--wyho-accent); display:grid; place-items:center; font-family:var(--wyho-font-ui); font-weight:700; font-size:2rem; color:var(--wyho-primary); }
.fin h3{ margin:0; font-size:1.35rem; }
.fin .title{ font-style:italic; color:var(--wyho-cta-hover); margin:0; }
.fin .bio{ font-size:.92rem; color:var(--wyho-ink-soft); margin:0; }
.fin .pct{ font-family:var(--wyho-font-ui); font-weight:700; font-size:2.1rem; color:var(--wyho-primary); font-variant-numeric:tabular-nums; line-height:1; }
.bar{ height:12px; border-radius:999px; background:var(--wyho-bg-alt); overflow:hidden; }
.bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--wyho-cta),var(--wyho-accent)); border-radius:999px; transition:width .6s ease; }
.fin .btn{ margin-top:auto; width:100%; }
.mine-tag{ position:absolute; top:12px; right:12px; background:var(--wyho-cta); color:#fff; font-family:var(--wyho-font-ui); font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.livebar{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:center; justify-content:space-between; font-family:var(--wyho-font-ui); font-size:.88rem; margin-bottom:1.4rem; }
.livedot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--wyho-success); margin-right:.4rem; animation:pulse 1.8s infinite; }
.livedot.off{ background:var(--wyho-ink-soft); animation:none; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,107,58,.5);} 70%{ box-shadow:0 0 0 9px rgba(47,107,58,0);} 100%{ box-shadow:0 0 0 0 rgba(47,107,58,0);} }
dialog{ border:0; border-radius:var(--wyho-radius); padding:1.8rem; max-width:min(92vw,460px); box-shadow:0 20px 60px rgba(0,0,0,.35); font-family:var(--wyho-font-ui); }
dialog::backdrop{ background:rgba(43,20,32,.6); }
dialog h3{ font-family:var(--wyho-font-display); }
dialog .actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ---------- winner ---------- */
.winner-hero{ background:radial-gradient(900px 500px at 50% 0%, #7A2A52 0%, var(--wyho-primary-deep) 70%); color:#fff; text-align:center; padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,7vw,5rem); position:relative; overflow:hidden; }
.winner-hero h1,.winner-hero h2{ color:#fff; }
.winner-hero .ribbon{ display:inline-block; font-family:var(--wyho-font-ui); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; background:var(--wyho-gold); color:#3B1027; padding:.55rem 1.4rem; border-radius:999px; }
.winner-photo-wrap{ position:relative; width:min(280px,66vw); aspect-ratio:1; margin:3.2rem auto 3.4rem; }
.winner-hero .ribbon,.winner-name,.winner-title,.winner-hero .lede,.prize-big,.winner-hero .btn{ position:relative; z-index:5; }
.winner-photo{ position:relative; z-index:2; width:100%; height:100%; border-radius:50%; object-fit:cover; border:8px solid var(--wyho-gold); box-shadow:0 0 0 8px rgba(242,184,75,.25), 0 20px 50px rgba(0,0,0,.45); background:var(--wyho-accent-soft); display:grid; place-items:center; font-family:var(--wyho-font-ui); font-size:4rem; font-weight:700; color:var(--wyho-primary); }
.burst{ position:absolute; inset:-32%; z-index:1; animation:spin 40s linear infinite; }
.star{ position:absolute; color:var(--wyho-gold); z-index:3; animation:twinkle 2.6s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:1;} 50%{ transform:scale(.65) rotate(18deg); opacity:.6;} }
.winner-name{ font-size:clamp(2.2rem,7vw,4rem); font-weight:800; margin:.2rem 0; }
.winner-title{ font-style:italic; font-size:1.3rem; color:#F8E7EF; }
.prize-big{ display:inline-block; margin-top:1.4rem; font-family:var(--wyho-font-ui); font-weight:700; font-size:1.2rem; background:rgba(255,255,255,.12); border:2px solid var(--wyho-gold); padding:.8rem 1.6rem; border-radius:var(--wyho-radius); }
.prize-big b{ color:var(--wyho-gold); font-size:1.5rem; }
.story{ background:var(--wyho-surface); border:1px solid var(--wyho-line); border-radius:var(--wyho-radius); padding:clamp(1.4rem,4vw,2.4rem); margin-bottom:2rem; }
.story .place{ display:inline-block; font-family:var(--wyho-font-ui); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .9rem; border-radius:999px; background:var(--wyho-accent-soft); color:var(--wyho-primary); margin-bottom:.8rem; }
.story.first .place{ background:var(--wyho-gold); color:#3B1027; }
.story .by{ font-family:var(--wyho-font-ui); color:var(--wyho-ink-soft); margin-bottom:1.2rem; }
.story .body{ max-width:66ch; font-size:1.1rem; line-height:1.85; }

.toasts{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); display:grid; gap:.5rem; z-index:300; width:min(92vw,420px); }
.toast{ font-family:var(--wyho-font-ui); padding:.85rem 1.1rem; border-radius:12px; background:var(--wyho-primary-deep); color:#fff; box-shadow:var(--wyho-shadow); font-size:.9rem; }
.toast-error{ background:var(--wyho-danger); }
.toast-ok{ background:var(--wyho-success); }

@media (max-width:640px){
  body{ font-size:16.5px; }
  .site-header .wrap{ justify-content:center; }
  .nav{ justify-content:center; }
  .status{ margin-top:-1.6rem; padding:1.3rem; }
  .hero-deco{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}