/* Self-hosted, because the site makes no third-party requests. Both are
   variable fonts, so a single file covers the whole weight range each. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/fraunces.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope.woff2') format('woff2');
}

/* ===========================================================
   Green Teacher Awards – Karnataka 2026
   Design system
=========================================================== */
:root{
  --forest-950:#0b2318;
  --forest-900:#0f2e1e;
  --forest-800:#123a26;
  --green-700:#1c6b42;
  --green-600:#1f8a52;
  --green-500:#2fa968;
  --lime-400:#a7e34f;
  --lime-300:#c7ee83;
  --gold-500:#e0b03d;
  --gold-400:#f0c866;
  --cream-50:#faf9f2;
  --cream-100:#f6f4ea;
  --cream-200:#efeddd;
  --ink-900:#12190f;
  --ink-700:#33402e;
  --ink-500:#5c6a55;
  --ink-300:#8b977f;
  --white:#ffffff;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-xl:40px;

  --shadow-sm:0 2px 10px rgba(15,46,30,.06);
  --shadow-md:0 12px 32px rgba(15,46,30,.10);
  --shadow-lg:0 24px 60px rgba(15,46,30,.16);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--cream-50);
  color:var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}

/* ---------- utility ---------- */
.text-accent{color:var(--lime-400)}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:14px;
}
.tag--light{color:var(--lime-300)}
.section{padding:120px 0}
.section--tint{background:var(--cream-100)}
.section--dark{background:linear-gradient(160deg,var(--forest-950),var(--forest-800));color:var(--cream-50)}
.section__head{max-width:680px;margin-bottom:56px}
.section__head--light .section__lead{color:rgba(250,249,242,.72)}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.2vw,2.9rem);
  font-weight:600;
  line-height:1.15;
  color:var(--forest-900);
  margin-bottom:18px;
}
.section__title--light{color:var(--cream-50)}
.section__lead{font-size:1.08rem;color:var(--ink-500);max-width:60ch}
.section__lead--light{color:rgba(250,249,242,.78)}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--forest-950);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-hidden{opacity:0;visibility:hidden}
.preloader__leaf{width:56px;height:56px;color:var(--lime-400);animation:leafSpin 1.1s ease-in-out infinite}
@keyframes leafSpin{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.15) rotate(8deg)}
}

.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.025;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn--primary{
  background:linear-gradient(135deg,var(--green-600),var(--green-700));
  color:#fff;box-shadow:var(--shadow-md);
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--ghost{border:1.5px solid rgba(18,25,15,.18);color:var(--forest-900)}
.btn--ghost:hover{background:var(--forest-900);color:#fff;border-color:var(--forest-900)}
.btn--nav{padding:11px 22px;background:var(--forest-900);color:#fff}
.btn--nav:hover{background:var(--green-600)}
.btn--block{width:100%}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(250,249,242,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
  box-shadow:0 2px 20px rgba(15,46,30,.06);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--green-500),var(--forest-800));
  color:var(--lime-300);display:flex;align-items:center;justify-content:center;
  padding:8px;flex-shrink:0;
}
.brand__mark svg{width:100%;height:100%}
.brand__text{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--forest-900);line-height:1.1;display:flex;flex-direction:column}
.brand__text em{font-style:normal;color:var(--green-600)}
.brand__text small{font-family:var(--font-body);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}

.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a:not(.btn){
  font-size:.92rem;font-weight:600;color:var(--ink-700);position:relative;padding-bottom:4px;
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green-600);
  transition:width .3s var(--ease);
}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--forest-900)}
.nav__toggle svg{width:24px;height:24px;position:absolute}
.nav__toggle .icon-x{opacity:0;transform:rotate(-90deg)}
.nav__toggle.is-open .icon-menu{opacity:0;transform:rotate(90deg)}
.nav__toggle.is-open .icon-x{opacity:1;transform:rotate(0)}
.nav__toggle svg{transition:opacity .3s var(--ease), transform .3s var(--ease)}

/* =========================================================
   HERO
========================================================= */
.hero{position:relative;padding-top:170px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.blob--1{width:520px;height:520px;background:radial-gradient(circle,var(--lime-300),transparent 70%);top:-180px;right:-120px;animation:float1 16s ease-in-out infinite}
.blob--2{width:420px;height:420px;background:radial-gradient(circle,var(--green-500),transparent 70%);top:120px;left:-160px;animation:float2 20s ease-in-out infinite}
.blob--3{width:340px;height:340px;background:radial-gradient(circle,var(--gold-400),transparent 70%);bottom:-140px;right:20%;opacity:.35;animation:float1 18s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.05)}}
.hero__topo{position:absolute;bottom:0;left:0;width:100%;height:60%;z-index:1}
.leaf-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.leaf-field span{
  position:absolute;top:-40px;color:var(--green-500);opacity:.35;
  animation:leafFall linear infinite;
}
.leaf-field svg{width:22px;height:22px}
@keyframes leafFall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.4}
  100%{transform:translateY(110vh) translateX(60px) rotate(340deg);opacity:0}
}

.hero__inner{position:relative;z-index:2;text-align:center;max-width:900px;margin-inline:auto;padding-bottom:70px}
.eyebrow{
  display:inline-block;padding:8px 18px;border-radius:999px;
  background:rgba(31,138,82,.1);color:var(--green-700);
  font-weight:700;font-size:.85rem;margin-bottom:22px;
}
.hero__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.08;
  color:var(--forest-900);margin-bottom:24px;letter-spacing:-.01em;
}
.hero__lead{font-size:1.15rem;color:var(--ink-500);max-width:60ch;margin-inline:auto;margin-bottom:38px}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px}

.countdown{
  display:inline-flex;flex-direction:column;align-items:center;gap:16px;
  background:rgba(255,255,255,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  padding:22px 32px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.countdown__label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--forest-800)}
.countdown__label svg{width:16px;height:16px;color:var(--green-600)}
.countdown__timer{display:flex;gap:14px}
.countdown__unit{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;background:var(--forest-900);color:#fff;border-radius:14px;
}
.countdown__unit span{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1}
.countdown__unit small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-300);margin-top:4px}

.hero__stats{position:relative;z-index:2;border-top:1px solid rgba(18,25,15,.08)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:36px}
.stat{text-align:center;border-right:1px solid rgba(18,25,15,.08)}
.stat:last-child{border-right:none}
.stat__num{display:block;font-family:var(--font-display);font-size:2.4rem;font-weight:600;color:var(--forest-900)}
.stat__label{font-size:.82rem;color:var(--ink-500);font-weight:600}

/* marquee */
.marquee{background:var(--forest-900);color:var(--lime-300);overflow:hidden;padding:16px 0;position:relative;z-index:2}
.marquee__track{display:flex;gap:14px;white-space:nowrap;width:max-content;animation:marquee 26s linear infinite;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}
.marquee__track span{opacity:.9}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   ABOUT
========================================================= */
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.checklist{margin:28px 0 34px;display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink-700)}
.checklist svg{width:20px;height:20px;color:var(--green-600);flex-shrink:0}

.about__art{position:relative;height:440px}
.art-glow{position:absolute;inset:10%;background:radial-gradient(circle,rgba(47,169,104,.25),transparent 70%);filter:blur(30px);z-index:0}
.art-card{
  position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:180px;height:180px;background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:20px;text-align:center;z-index:1;
  animation:cardFloat 7s ease-in-out infinite;
}
.art-card svg{width:36px;height:36px;color:var(--green-600)}
.art-card span{font-weight:700;font-size:.85rem;color:var(--forest-900)}
.art-card--1{top:0;left:10%;animation-delay:0s}
.art-card--2{top:38%;right:0;background:var(--forest-900);color:#fff;animation-delay:1.2s}
.art-card--2 svg{color:var(--gold-400)}
.art-card--2 span{color:#fff}
.art-card--3{bottom:0;left:22%;animation-delay:2.4s}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* =========================================================
   CATEGORIES
========================================================= */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-card{
  background:var(--white);border-radius:var(--radius-md);padding:30px 26px;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  border:1px solid rgba(18,25,15,.05);
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.cat-card__icon{
  width:52px;height:52px;border-radius:14px;background:rgba(31,138,82,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.cat-card__icon svg{width:26px;height:26px;color:var(--green-600)}
.cat-card h3{font-family:var(--font-display);font-size:1.08rem;font-weight:600;color:var(--forest-900);margin-bottom:8px}
.cat-card p{font-size:.88rem;color:var(--ink-500)}
.cat-card--more{background:linear-gradient(135deg,var(--forest-900),var(--forest-800));color:#fff}
.cat-card--more .cat-card__icon{background:rgba(255,255,255,.12)}
.cat-card--more .cat-card__icon svg{color:var(--lime-300)}
.cat-card--more h3{color:#fff}
.cat-card--more p{color:rgba(255,255,255,.7)}

/* =========================================================
   PROCESS TIMELINE
========================================================= */
.timeline{position:relative;max-width:820px;margin-inline:auto}
.timeline__line{position:absolute;left:29px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--green-500),var(--lime-300));opacity:.35}
.timeline__item{display:flex;gap:28px;position:relative;padding-bottom:52px}
.timeline__item:last-child{padding-bottom:0}
.timeline__num{
  flex-shrink:0;width:60px;height:60px;border-radius:50%;
  background:var(--white);border:2px solid var(--green-500);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;position:relative;z-index:1;box-shadow:var(--shadow-sm);
}
.timeline__content{padding-top:8px}
.timeline__content h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--forest-900);margin-bottom:8px}
.timeline__content p{color:var(--ink-500);max-width:56ch}
.timeline__content code{background:var(--cream-200);padding:2px 8px;border-radius:6px;font-size:.85em;color:var(--green-700)}

/* =========================================================
   DATES
========================================================= */
.dates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.date-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);padding:32px 24px;text-align:center;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.date-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)}
.date-card__day{display:block;font-family:var(--font-display);font-size:2.6rem;font-weight:600;color:var(--lime-300)}
.date-card__month{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,249,242,.55);margin-bottom:14px}
.date-card h3{font-size:.95rem;font-weight:600;color:#fff}
/* One colour per milestone, so the four dates read as four different moments
   rather than a row of identical tiles. They run warm as the deadline nears and
   land on gold for the finale. */
.date-card--d1,.date-card--d2,.date-card--d3,.date-card--d4{border-color:transparent}
.date-card--d1 .date-card__day,.date-card--d2 .date-card__day,
.date-card--d3 .date-card__day,.date-card--d4 .date-card__day{color:#fff}
.date-card--d1 .date-card__month,.date-card--d2 .date-card__month,
.date-card--d3 .date-card__month,.date-card--d4 .date-card__month{color:rgba(255,255,255,.8)}

.date-card--d1{background:linear-gradient(150deg,var(--green-700),var(--green-500))}   /* opens   */
.date-card--d2{background:linear-gradient(150deg,#a8461a,#e07a35)}                     /* closes  */
.date-card--d3{background:linear-gradient(150deg,#12615a,#1f9c8a)}                     /* voting  */
.date-card--d4{background:linear-gradient(150deg,#8a6a1c,var(--gold-400))}             /* finale  */

/* Hover lifts the tile; without this the translucent-card rule would wash the
   colour out on the way up. */
.date-card--d1:hover,.date-card--d2:hover,.date-card--d3:hover,.date-card--d4:hover{
  background-blend-mode:normal;filter:brightness(1.08);
}

/* =========================================================
   VOTING
========================================================= */
.voting__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.voting__steps{display:flex;flex-direction:column;gap:24px;margin-top:34px}
.voting__step{display:flex;gap:18px;align-items:flex-start}
.voting__step-icon{
  flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--cream-200);
  display:flex;align-items:center;justify-content:center;
}
.voting__step-icon svg{width:22px;height:22px;color:var(--green-600)}
.voting__step h4{font-size:1rem;font-weight:700;color:var(--forest-900);margin-bottom:4px}
.voting__step p{color:var(--ink-500);font-size:.92rem}

.voting__panel{
  background:var(--white);border-radius:var(--radius-xl);padding:48px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;gap:28px;
}
.presentation-clock{position:relative;width:200px;height:200px}
.presentation-clock__svg{width:100%;height:100%;transform:rotate(-90deg)}
.pc-track{fill:none;stroke:var(--cream-200);stroke-width:12}
.pc-seg{fill:none;stroke-width:12;stroke-linecap:round}
.pc-seg--presentation{stroke:var(--green-600)}
.pc-seg--qa{stroke:var(--gold-500)}
.presentation-clock__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.presentation-clock__center strong{font-family:var(--font-display);font-size:2.6rem;color:var(--forest-900);line-height:1}
.presentation-clock__center span{font-size:.75rem;color:var(--ink-500);font-weight:600}
.presentation-legend{display:flex;flex-direction:column;gap:10px}
.presentation-legend li{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:var(--ink-700)}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot--presentation{background:var(--green-600)}
.dot--qa{background:var(--gold-500)}

/* =========================================================
   CRITERIA
========================================================= */
.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.criteria-card{
  background:var(--white);border-radius:var(--radius-md);padding:28px;
  display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease);
}
.criteria-card:hover{transform:translateX(6px)}
.criteria-card span{font-family:var(--font-display);font-size:1.8rem;font-weight:600;color:var(--lime-400);-webkit-text-stroke:1px var(--green-600)}
.criteria-card h4{font-size:.98rem;font-weight:700;color:var(--forest-900)}

/* =========================================================
   ACCORDION (rules)
========================================================= */
.rules__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.accordion{display:flex;flex-direction:column;gap:14px}
.accordion__item{
  background:var(--white);border-radius:var(--radius-md);padding:22px 26px;
  box-shadow:var(--shadow-sm);border:1px solid rgba(18,25,15,.05);
}
.accordion__item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;font-weight:700;color:var(--forest-900);
}
.accordion__item summary::-webkit-details-marker{display:none}
.accordion__item summary svg{width:18px;height:18px;color:var(--green-600);transition:transform .3s var(--ease);flex-shrink:0}
.accordion__item[open] summary svg{transform:rotate(180deg)}
.accordion__item p{margin-top:14px;color:var(--ink-500);font-size:.94rem}

/* =========================================================
   REGISTER FORM
========================================================= */
.section--register{background:linear-gradient(170deg,var(--forest-900),var(--forest-950));color:#fff}
.register__wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.register__notes{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.register__notes li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;color:rgba(255,255,255,.85)}
.register__notes svg{width:18px;height:18px;color:var(--lime-300)}

.reg-form{
  background:var(--cream-50);color:var(--ink-900);border-radius:var(--radius-xl);
  padding:44px;box-shadow:var(--shadow-lg);
}
.reg-form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:20px}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--forest-800);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid rgba(18,25,15,.14);
  background:#fff;transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px rgba(47,169,104,.15);
}
.field textarea{resize:vertical}
.consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px;font-size:.85rem;color:var(--ink-500)}
.consent input{margin-top:3px;accent-color:var(--green-600)}
.reg-form__note{text-align:center;font-size:.78rem;color:var(--ink-300);margin-top:14px}

/* =========================================================
   MODAL
========================================================= */
.modal{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(11,35,24,.6);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s var(--ease);
  padding:20px;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__card{
  background:#fff;border-radius:var(--radius-xl);padding:48px;max-width:420px;text-align:center;
  transform:translateY(24px) scale(.96);transition:transform .4s var(--ease);
}
.modal.is-open .modal__card{transform:translateY(0) scale(1)}
.modal__icon{
  width:70px;height:70px;border-radius:50%;background:rgba(31,138,82,.12);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.modal__icon svg{width:34px;height:34px}
.modal__card h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:10px;color:var(--forest-900)}
.modal__card p{color:var(--ink-500);font-size:.92rem;margin-bottom:26px}

/* =========================================================
   FOOTER
========================================================= */
.footer{background:var(--forest-950);color:rgba(250,249,242,.8);padding-top:80px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px}
.footer__brand p{margin:18px 0 22px;font-size:.9rem;color:rgba(250,249,242,.55);max-width:34ch}
.brand--footer .brand__text{color:#fff}
.footer__social{display:flex;gap:12px}
.footer__social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease), transform .3s var(--ease);
}
.footer__social a:hover{background:var(--green-600);transform:translateY(-3px)}
.footer__social svg{width:17px;height:17px}
.footer__col h4{color:#fff;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col a,.footer__col span{font-size:.9rem;color:rgba(250,249,242,.6);display:flex;align-items:center;gap:8px}
.footer__col a:hover{color:var(--lime-300)}
.footer__col svg{width:15px;height:15px;flex-shrink:0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0}
.footer__bottom-inner{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(250,249,242,.45);flex-wrap:wrap;gap:8px}

/* =========================================================
   FLOATING ACTION BUTTON
========================================================= */
.fab{
  position:fixed;bottom:26px;right:26px;z-index:900;
  display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;
  background:var(--forest-900);color:#fff;font-weight:700;font-size:.88rem;
  box-shadow:var(--shadow-lg);transform:translateY(120px);transition:transform .5s var(--ease), background .3s var(--ease);
}
.fab.is-visible{transform:translateY(0)}
.fab svg{width:18px;height:18px;color:var(--lime-300)}
.fab:hover{background:var(--green-600)}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .dates-grid{grid-template-columns:repeat(2,1fr)}
  .criteria-grid{grid-template-columns:repeat(2,1fr)}
  .about__grid,.voting__grid,.rules__grid,.register__wrap{grid-template-columns:1fr;gap:44px}
  .about__art{height:360px;max-width:460px;margin-inline:auto;width:100%}
}

@media (max-width:860px){
  .nav__links{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);
    background:var(--cream-50);flex-direction:column;align-items:flex-start;
    padding:100px 32px 32px;gap:26px;box-shadow:-10px 0 40px rgba(0,0,0,.15);
    transform:translateX(100%);transition:transform .45s var(--ease);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-size:1.05rem}
  .nav__toggle{display:flex;position:relative;z-index:1001}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .stat{border-right:none;border-bottom:1px solid rgba(18,25,15,.08);padding-bottom:20px}
}

@media (max-width:640px){
  .section{padding:80px 0}
  .cat-grid,.dates-grid,.criteria-grid{grid-template-columns:1fr}
  .reg-form__row{grid-template-columns:1fr}
  .reg-form{padding:28px}
  .voting__panel{padding:32px 24px}
  .hero{padding-top:130px}
  .countdown__timer{gap:10px}
  .countdown__unit{width:54px;height:54px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer__bottom-inner{flex-direction:column;text-align:center}
  .fab span{display:none}
  .fab{padding:16px;border-radius:50%}
}

/* ---------------------------------------------------------------------------
   Parent-site bar. The page's own nav is fixed at top:0, so the bar takes that
   slot and the nav — and the hero's clearance — move down by its height. */
.gsn-bar{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 18px;
  background:var(--forest-900);color:var(--cream-100);
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.gsn-bar svg{width:14px;height:14px;flex:none;transition:transform .25s var(--ease)}
.gsn-bar:hover svg{transform:translateX(-3px)}
.gsn-bar strong{font-weight:700}
.gsn-bar__sep{opacity:.45}
.gsn-bar span:last-child{opacity:.72;font-weight:500}
.nav{top:34px}
.hero{padding-top:204px}
@media (max-width:640px){
  .gsn-bar{height:30px;padding:0 12px;font-size:.62rem;gap:6px}
  /* The crumb tail is the first thing to go when there is no room for it. */
  .gsn-bar__sep,.gsn-bar span:last-child{display:none}
  .nav{top:30px}
  .hero{padding-top:160px}
}

/* --------------------------------------------------------------- form states
   The register panel sits on the dark forest block, so validation messages and
   the file rows are toned for a dark ground rather than the cream page. */
.field-err{
  display:block;margin-top:6px;
  font-size:.78rem;font-weight:600;line-height:1.4;color:#ffd7c9;
}
.form-alert{
  margin-bottom:18px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(255,141,102,.14);border:1px solid rgba(255,141,102,.45);
  color:#ffd7c9;font-size:.86rem;font-weight:600;line-height:1.5;
}
.field label small{
  display:block;margin-top:2px;
  font-size:.7rem;font-weight:500;letter-spacing:.04em;text-transform:none;
  opacity:.62;
}
.reg-form__row--files{gap:14px}
.reg-form input[type=file]{
  width:100%;padding:11px 12px;
  border:1px dashed rgba(255,255,255,.3);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);color:inherit;
  font-family:var(--font-body);font-size:.82rem;cursor:pointer;
}
.reg-form input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;border:0;border-radius:999px;
  background:var(--lime-400);color:var(--forest-900);
  font-family:var(--font-body);font-weight:700;font-size:.76rem;cursor:pointer;
}
.reg-form input[type=file]:hover{border-color:var(--lime-400)}

.reg-closed h3{
  font-family:var(--font-display);font-size:1.4rem;font-weight:600;margin-bottom:10px;
}
.reg-closed p{line-height:1.6;margin-bottom:10px;opacity:.86}

.modal__ref{
  font-family:var(--font-display);letter-spacing:.08em;
  color:var(--green-700);white-space:nowrap;
}

/* ------------------------------------------------------------- voting page */
.vote-page{padding-top:110px}
.vote-alert{
  max-width:760px;margin:0 auto 26px;padding:16px 18px;border-radius:var(--radius-md);
  font-size:.95rem;line-height:1.6;
}
.vote-alert--ok{background:rgba(47,169,104,.12);border:1px solid rgba(47,169,104,.4);color:var(--forest-900)}
.vote-alert--warn{background:rgba(224,176,61,.14);border:1px solid rgba(224,176,61,.45);color:var(--forest-900)}
.vote-alert strong{display:block;font-family:var(--font-display);font-size:1.05rem;margin-bottom:2px}

.vote-grid{
  display:grid;gap:16px;margin-bottom:34px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.vote-card{position:relative;display:block;cursor:pointer}
/* The radio is the control; the whole card is its label, so the hit area is the
   card rather than a 16px dot. Kept in the layout, not display:none, so it
   still receives focus and reads correctly to a screen reader. */
.vote-card input{position:absolute;top:14px;right:14px;width:20px;height:20px;accent-color:var(--green-600)}
.vote-card__body{
  display:flex;flex-direction:column;gap:7px;height:100%;
  padding:20px 46px 20px 20px;
  background:var(--white);border:2px solid transparent;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.vote-card:hover .vote-card__body{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.vote-card input:checked + .vote-card__body{border-color:var(--green-600);box-shadow:var(--shadow-md)}
.vote-card input:focus-visible + .vote-card__body{outline:3px solid var(--lime-400);outline-offset:3px}
.vote-card__cat{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700);
}
.vote-card__title{font-family:var(--font-display);font-size:1.12rem;font-weight:600;color:var(--forest-900);line-height:1.25}
.vote-card__who{font-size:.82rem;font-weight:600;color:var(--ink-700)}
.vote-card__desc{font-size:.86rem;line-height:1.55;color:var(--ink-500)}
.vote-card__count{margin-top:auto;font-size:.78rem;font-weight:700;color:var(--green-700)}

.vote-submit{
  max-width:520px;margin:0 auto;padding:24px;
  background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:14px;
}
.vote-submit .field label{
  display:block;margin-bottom:6px;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-700);
}
.vote-submit input[type=email]{
  width:100%;padding:13px 15px;border:1px solid var(--cream-200);border-radius:var(--radius-sm);
  background:var(--cream-50);font-family:var(--font-body);font-size:.95rem;color:var(--ink-900);
}
.vote-submit input[type=email]:focus{outline:none;border-color:var(--green-500);background:var(--white)}
.vote-submit small{display:block;margin-top:6px;font-size:.76rem;color:var(--ink-500)}
@media (max-width:640px){ .vote-page{padding-top:86px} }

/* Sits under the hero buttons: the "or a colleague" point is easy to miss and
   does not belong inside the button label. */
.hero__cta-note{
  margin-top:14px;text-align:center;
  font-size:.86rem;font-weight:600;color:var(--ink-500);
}

/* Way into the ballot, under the presentation clock. */
.voting__cta{margin-top:26px;text-align:center}
.voting__cta-note{margin-top:10px;font-size:.82rem;font-weight:600;color:var(--ink-500)}

/* ---------------------------------------------------------------------------
   Interaction fixes, measured from the rendered page rather than guessed at.

   1. Anchor landings. Every nav link jumps to a section, but the bar and the
      nav are fixed over the top of the page, so the section heading landed
      underneath them and the reader arrived mid-paragraph. scroll-margin-top
      is what smooth scrolling honours; the value is the two bars plus air. */
#about, #categories, #process, #dates, #voting, #rules, #register,
.section[id]{scroll-margin-top:124px}

/* 2. Sideways scroll on phones. Grid items default to min-width:auto, so a
      long unbreakable string — the contact email — pushed its column wider
      than the track and the whole document scrolled 80px to the right. */
.footer__grid > *{min-width:0}
.footer__wrap{overflow-wrap:anywhere}

/* 3. Tap targets. Everything you can hit with a thumb should be around 44px;
      the nav links were 28 and the FAQ rows 26. Padding rather than height, so
      nothing moves visually on a desktop where the pointer is precise. */
@media (max-width:860px){
  .nav__links a:not(.btn){padding:9px 0;display:block}
  .accordion__item summary{padding-top:16px;padding-bottom:16px}
  .footer__social a{width:44px;height:44px}
  .footer__col a{padding:5px 0}
}

/* 4. Footer columns stack on the narrowest phones; two columns of contact
      details at 360px leave no room for either. */
@media (max-width:480px){
  .footer__grid{grid-template-columns:1fr;gap:32px}
}

/* 5. Respect a reader who has asked the system for less motion: the reveals
      and the marquee are decoration, and for some people they are worse. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important}
  .marquee__track{animation:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------------------------------------------------------------------------
   6. Validation messages were coloured for a dark ground (#ffd7c9), but the
      register card is cream — measured at 1.26:1, which is invisible. A teacher
      who mistyped their email got the form back with no visible reason why.
      These are the same messages in ink that can be read on the card. */
.reg-form .field-err{color:#9c2a12}
.reg-form .form-alert{
  background:rgba(156,42,18,.08);border-color:rgba(156,42,18,.35);color:#8a2510;
}

/* Attachment feedback: what was picked, or why it will not do. */
.file-note{
  margin:8px 0 0;font-size:.78rem;font-weight:600;line-height:1.45;
  color:var(--green-700);overflow-wrap:anywhere;
}
.file-note.is-bad{color:#9c2a12}

/* 7. The form is far taller than the copy beside it, leaving a long dead space
      on desktop. Sticking the intro keeps the file limits and the reassurance
      in view while someone works down the fields — which is exactly when they
      want them. Only where there are two columns to begin with. */
@media (min-width:1081px){
  .register__intro{position:sticky;top:132px}
}

/* The nav floats over the photograph until the page is scrolled, at which point
   it becomes a solid cream bar. Those are two different grounds, so it needs two
   sets of colours: light while it is on the picture, the original dark once it
   has its own background. Keyed off :not(.is-scrolled) so the scrolled state
   keeps everything it already had. */
.nav:not(.is-scrolled) .brand__text{color:#fff}
.nav:not(.is-scrolled) .brand__text em{color:var(--lime-300)}
.nav:not(.is-scrolled) .brand__text small{color:rgba(255,255,255,.70)}
.nav:not(.is-scrolled) .nav__links a:not(.btn){color:rgba(255,255,255,.92)}
.nav:not(.is-scrolled) .nav__links a:not(.btn)::after{background:var(--lime-300)}
.nav:not(.is-scrolled) .nav__toggle{color:#fff}

/* The pill loses the dark-on-dark problem by inverting: white plate, dark text,
   which also makes it the brightest thing in the bar — which it should be. */
.nav:not(.is-scrolled) .btn--nav{
  background:#fff;color:var(--forest-900);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.nav:not(.is-scrolled) .btn--nav:hover{background:var(--lime-300);color:var(--forest-900)}

/* The drawer on a phone is a cream panel of its own, so its links stay dark
   even though the bar behind it is not scrolled. */
@media (max-width:860px){
  .nav:not(.is-scrolled) .nav__links a:not(.btn){color:var(--ink-700)}
  .nav:not(.is-scrolled) .nav__links .btn--nav{
    background:var(--forest-900);color:#fff;box-shadow:none;
  }
}

/* ========================================================================
   HERO PHOTOGRAPH

   The picture is the background — there is no wash, tint or panel over it.
   Everything that makes the type readable is carried by the type itself.
   ===================================================================== */
.hero__photo{
  position:absolute;inset:0;z-index:0;
  display:block;
  /* <picture> is inline by default, which would leave a baseline gap. */
  line-height:0;
}
.hero__photo img{
  width:100%;height:100%;
  object-fit:cover;
  /* Bias right on wide screens: the teacher and the seedling are there, and a
     wide crop of a 3:2 frame loses the least by holding that side. */
  object-position:72% 45%;
  display:block;
}

/* A light veil over the photograph — just enough to stop the brightest patches
   of sari and sunlit leaf from swallowing white type. Deliberately gentle: the
   picture still reads as the background, not as a tinted panel. It leans a
   little darker at the bottom, where the lead line and the CTA note sit. */
.hero__photo::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,24,15,.30) 0%, rgba(8,24,15,.16) 42%, rgba(8,24,15,.42) 100%),
    rgba(8,24,15,.10);
  pointer-events:none;
}

/* Between the two: still the landscape frame, but centred on the group rather
   than on the teacher. */
@media (max-width:1080px){
  .hero__photo img{object-position:58% 46%}
}
/* At 820 and below the source itself changes to the portrait cut, which is
   already framed for this shape — so it only needs centring, not rescuing. */
@media (max-width:820px){
  .hero__photo img{object-position:50% 42%}
}

/* Text on film. Without a scrim the shadow is doing all the work, so it is
   built in layers: a tight one for edge definition against light pixels, and a
   wide soft one that darkens the whole area the glyphs sit in. */
.hero__inner{position:relative;z-index:2}

.hero__title{
  color:#fff;
  text-shadow:
    0 1px 1px rgba(0,0,0,.72),
    0 2px 10px rgba(0,0,0,.68),
    0 8px 54px rgba(0,0,0,.72);
}
.hero .text-accent{
  color:var(--lime-300);
  text-shadow:
    0 1px 1px rgba(0,0,0,.72),
    0 2px 10px rgba(0,0,0,.68),
    0 8px 54px rgba(0,0,0,.72);
}
.hero__lead{
  color:#fff;
  text-shadow:
    0 1px 1px rgba(0,0,0,.78),
    0 1px 8px rgba(0,0,0,.72),
    0 3px 26px rgba(0,0,0,.70);
}
/* This line sits over the brightest part of the frame — the sari — where white
   on white is simply unreadable. It gets a ground of its own, sized to the
   words rather than laid over the picture, which is the same move the eyebrow
   and the countdown already make. */
.hero__cta-note{
  display:inline-block;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(8,24,15,.46);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* The furniture keeps its own translucent ground — that is the element, not a
   layer over the photograph, and it is what makes these legible. */
.hero .eyebrow{
  background:rgba(10,28,18,.42);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 22px rgba(0,0,0,.28);
}
.hero .btn--ghost{
  border-color:rgba(255,255,255,.55);
  color:#fff;
  background:rgba(10,28,18,.34);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero .btn--ghost:hover{background:#fff;color:var(--forest-900);border-color:#fff}
.hero .btn--primary{box-shadow:0 12px 38px rgba(0,0,0,.42)}

.hero .countdown{
  background:rgba(10,28,18,.44);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 56px rgba(0,0,0,.36);
}
.hero .countdown__label{color:#fff}
.hero .countdown__label svg{color:var(--lime-300)}
.hero .countdown__unit{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.hero .countdown__unit small{color:var(--lime-300)}

/* The stats strip closes the hero. Its own ground, so the numbers are readable
   wherever the photograph happens to be bright. */
.hero__stats{
  border-top:1px solid rgba(255,255,255,.18);
  background:rgba(8,24,15,.52);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hero__stats .stat{border-right-color:rgba(255,255,255,.18)}
.hero__stats .stat__num{color:#fff}
.hero__stats .stat__label{color:rgba(255,255,255,.82)}

/* Decoration that belonged to the old cream hero. */
.hero .blob{display:none}
.hero__topo{display:none}
.hero .leaf-field span{color:rgba(255,255,255,.6);opacity:.24}

/* =====================================================================
   Share band
   Sits between the form and the footer, so it is a band rather than a
   section: no 120px padding, no section heading block, one row of content.
   ===================================================================== */
.share-band{
  padding:0 0 84px;
  background:var(--cream-50);
}
.share-band__inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2rem 2.6rem;
  background:linear-gradient(135deg, var(--forest-900), var(--green-700));
  border-radius:var(--radius-lg);
  padding:2rem 2.4rem;
  box-shadow:var(--shadow-lg);
}
/* Grid items default to min-width:auto, which lets long text push the track
   wider than the container instead of wrapping. */
.share-band__copy{min-width:0}
.share-band__tag{
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-300);margin:0 0 .45rem;
}
.share-band__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.15;
  color:#fff;margin:0 0 .6rem;
}
.share-band__text{
  color:rgba(255,255,255,.82);
  font-size:.99rem;line-height:1.6;margin:0;max-width:56ch;
}
.share-band__text strong{color:#fff}

.share-band__actions{display:flex;flex-direction:column;gap:.7rem}
.share-band__actions .btn{white-space:nowrap;justify-content:center}

.btn--whatsapp{
  background:#25d366;color:#fff;border:none;
  display:inline-flex;align-items:center;gap:.55rem;
}
.btn--whatsapp:hover{background:#1eb855;color:#fff}
.btn--whatsapp svg{width:20px;height:20px;flex:none}

.btn--copy{
  background:rgba(255,255,255,.1);color:#fff;
  border:1.5px solid rgba(255,255,255,.35);cursor:pointer;
}
.btn--copy:hover{background:rgba(255,255,255,.2);color:#fff}
/* Confirmation on the button itself: a copy that says nothing reads as one
   that failed, and people click it three times. */
.btn--copy.is-copied{
  background:var(--lime-400);border-color:var(--lime-400);color:var(--forest-950);
}

@media (max-width:860px){
  .share-band{padding-bottom:64px}
  .share-band__inner{grid-template-columns:1fr;padding:1.7rem 1.5rem;gap:1.4rem}
  .share-band__actions{flex-direction:row;flex-wrap:wrap}
  .share-band__actions .btn{flex:1 1 auto}
}
@media (max-width:460px){
  .share-band__actions{flex-direction:column}
}

/* The scope paragraph moved down from the hero. Set slightly back from the
   lead above it so the two read as headline and detail, not as two leads. */
.about__scope{
  color:var(--ink-500);
  font-size:.98rem;
  line-height:1.75;
  margin:-.4rem 0 1.6rem;
  padding-left:1rem;
  border-left:3px solid rgba(47,169,104,.28);
}

/* Both the CTA note and the countdown are inline-level inside a centred hero,
   so once the lead paragraph moved out they had room to share a line. The
   countdown becomes block-level — still shrink-wrapped and centred — so it
   always starts a row of its own. */
.countdown{
  display:flex;
  width:fit-content;
  margin-inline:auto;
}

/* ---------------------------------------------------------------------
   Page tail spacing.
   The nomination section, the share band and the footer are three dark
   blocks in a row. At the default 120px section padding the gaps between
   them read as dead space rather than as breathing room, so the tail is
   tightened and the band is pulled up to sit against the form above it.
   --------------------------------------------------------------------- */
.section--register{padding-bottom:56px}
.share-band{padding:0 0 44px}
.footer{padding-top:64px}

@media (max-width:860px){
  .section--register{padding-bottom:40px}
  .share-band{padding-bottom:32px}
  .footer{padding-top:48px}
}

/* "Optional" beside a label, and the one-line reason under the control. Both
   sit inside the dark nomination panel, so they lighten rather than darken. */
.field-opt{
  font-weight:600;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-300);margin-left:.4rem;
}
.field-hint{
  display:block;margin-top:.4rem;
  font-size:.8rem;color:var(--ink-500);
}

/* Footer sign-off, matching the network site: count left, credit right. */
.footer__sign {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1.2rem;
  margin-top:.8rem;padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.8rem;
}
.footer__visits{color:rgba(255,255,255,.55)}
.footer__visits b{color:rgba(255,255,255,.85);font-weight:700}
.footer__dev{
  color:#d4af5f;font-weight:600;letter-spacing:.01em;
  margin-left:auto;
}
@media (max-width:560px){
  .footer__sign{justify-content:flex-start}
  .footer__dev{margin-left:0}
}