/* ==========================================================================
   KiribatiGov.com v9 — site styles. Built on /css/tokens.css (Maneaba Grid 1).
   Colour law: brass only on navy. Terracotta only on limestone.
   Timber on limestone for small text; on navy only for large text or graphics.
   ========================================================================== */

:root{--nav-h:73px} /* 68px bar + 5px terracotta rule */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],#hero{scroll-margin-top:var(--nav-h)}
body{
  margin:0;
  background:var(--navy);
  color:var(--limestone);
  font:400 var(--fs-body) var(--font-text);
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em}
h2{font:600 var(--fs-h2) var(--font-display)}
h3{font:600 20px/26px var(--font-display)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
[role="list"]{list-style:none}

/* ---------- utilities ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--brass);color:var(--navy);
  padding:12px 18px;border-radius:var(--radius);
  font:500 16px/1 var(--font-display);text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:8px}

.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.eyebrow{
  font:500 var(--fs-eyebrow) var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;
}
.rule{width:64px;height:4px;background:var(--terracotta);border-radius:2px;margin:14px 0}
.lede{max-width:52ch;opacity:.92}
/* captions sit on navy or on photography here, so timber is lifted to clear 4.5:1 */
.caption{font:400 var(--fs-caption) var(--font-text);color:#9FB0B8;margin:10px 0 0}
.panel .caption,.post .caption,.fact .caption{color:var(--timber)}
.caption--section{
  width:min(1200px,calc(100% - 48px));margin:28px auto 0;position:relative;z-index:2;
  color:#9fb0b8; /* timber lightened for large-enough contrast on navy photos */
}
.todo{
  font:600 11px/1.6 var(--font-display);
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--terracotta);
  background:rgba(158,71,42,.12);
  border:1px dashed rgba(158,71,42,.55);
  border-radius:4px;padding:1px 7px;
  display:inline-block;vertical-align:middle;
  justify-self:start;max-width:max-content;
}
h2 .todo,h3 .todo{margin-right:8px;position:relative;top:-2px}
/* on navy, terracotta is never legible: the TODO chip switches to a lifted tint */
.panel--dark .todo,.product .todo,
.credits .todo,.store__intro .todo{
  color:#E9A98D;background:rgba(233,169,141,.10);border-color:rgba(233,169,141,.5);
}

/* ---------- focus ---------- */
:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:3px;
  border-radius:4px;
}
.panel--light :focus-visible,.post :focus-visible,.fact :focus-visible,
.proposal :focus-visible{outline-color:var(--terracotta)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:11px 22px;
  border-radius:var(--radius);border:2px solid transparent;
  font:600 16px/1.2 var(--font-display);
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,transform .08s ease;
}
.btn:active{transform:translateY(1px)}
/* brass on navy, navy label */
.btn--brass{background:var(--brass);color:var(--navy);border-color:var(--brass)}
.btn--brass:hover{background:#B07F10;border-color:#B07F10}
/* outline on navy */
.btn--outline{background:transparent;color:var(--limestone);border-color:var(--limestone)}
.btn--outline:hover{background:rgba(242,239,233,.12)}
/* terracotta on limestone, limestone label */
.btn--terracotta{background:var(--terracotta);color:var(--limestone);border-color:var(--terracotta)}
.btn--terracotta:hover{background:#86381F;border-color:#86381F}
.btn.is-todo{
  cursor:default;opacity:.75;border-style:dashed;
  font-size:14px;letter-spacing:.03em;text-transform:uppercase;
}

/* ---------- starfield ---------- */
.starfield{
  position:absolute;inset:0;pointer-events:none;
  background-color:var(--navy);
  background-image:
    radial-gradient(1.7px 1.7px at 6% 12%,rgba(242,239,233,.95),transparent 62%),
    radial-gradient(1.3px 1.3px at 14% 26%,rgba(242,239,233,.70),transparent 62%),
    radial-gradient(1.5px 1.5px at 22% 6%,rgba(242,239,233,.85),transparent 62%),
    radial-gradient(1.2px 1.2px at 29% 19%,rgba(242,239,233,.60),transparent 62%),
    radial-gradient(1.9px 1.9px at 37% 31%,rgba(242,239,233,.90),transparent 62%),
    radial-gradient(1.2px 1.2px at 44% 9%,rgba(242,239,233,.65),transparent 62%),
    radial-gradient(1.5px 1.5px at 52% 22%,rgba(242,239,233,.80),transparent 62%),
    radial-gradient(1.1px 1.1px at 59% 38%,rgba(242,239,233,.55),transparent 62%),
    radial-gradient(1.7px 1.7px at 66% 14%,rgba(242,239,233,.88),transparent 62%),
    radial-gradient(1.2px 1.2px at 73% 29%,rgba(242,239,233,.60),transparent 62%),
    radial-gradient(1.4px 1.4px at 81% 7%,rgba(242,239,233,.78),transparent 62%),
    radial-gradient(1.3px 1.3px at 88% 24%,rgba(242,239,233,.70),transparent 62%),
    radial-gradient(1.6px 1.6px at 95% 16%,rgba(242,239,233,.85),transparent 62%),
    radial-gradient(1.1px 1.1px at 11% 41%,rgba(242,239,233,.50),transparent 62%),
    radial-gradient(1.2px 1.2px at 48% 47%,rgba(242,239,233,.45),transparent 62%),
    radial-gradient(1.1px 1.1px at 85% 44%,rgba(242,239,233,.50),transparent 62%);
  background-repeat:no-repeat;
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.7}to{opacity:1}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--navy);
  border-bottom:5px solid var(--terracotta);
}
.nav__inner{
  width:min(1200px,calc(100% - 48px));margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  min-height:68px;
}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.lockup__mark{width:34px;height:34px;flex:none}
.lockup__type{font:700 24px/1 var(--font-display);white-space:nowrap}
.lockup__name{color:var(--limestone)}
.lockup__tld{color:var(--brass);font-weight:500}
.lockup--lg .lockup__mark{width:56px;height:56px}
.lockup--lg .lockup__type{font-size:36px}

.nav__links{display:flex;gap:28px}
.nav__links a{
  font:500 17px/1 var(--font-display);
  color:var(--limestone);text-decoration:none;
  padding:12px 2px;display:inline-block;
  border-bottom:2px solid transparent;
}
.nav__links a:hover{border-bottom-color:var(--brass)}

.nav__cart{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 16px;
  background:transparent;color:var(--limestone);
  border:2px solid var(--limestone);border-radius:var(--radius);
  font:600 15px/1 var(--font-display);cursor:pointer;
}
.nav__cart:hover{background:rgba(242,239,233,.12)}
.nav__count{
  min-width:24px;height:24px;display:inline-grid;place-items:center;
  background:var(--brass);color:var(--navy);
  border-radius:12px;font-size:13px;padding:0 6px;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero{position:relative;background:var(--navy)}
.hero__track{height:400vh;position:relative}
/* the bar is sticky and opaque, so the stage is pinned below it — otherwise the
   corner chip and the scroll cue sit behind the nav and off the bottom edge */
.hero__stage{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;
  background:var(--navy);
}
.hero__screen{
  position:relative;flex:1 1 auto;min-height:0;
  background:url("/video/kiribatigov_hero_v9_poster.jpg") center/cover no-repeat var(--navy);
  overflow:hidden;
}
.hero__canvas{width:100%;height:100%;object-fit:cover}

/* soft scanlines while the camera is still in front of the CRT */
.hero__scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(17,28,36,.00) 0px,
    rgba(17,28,36,.00) 2px,
    rgba(17,28,36,.22) 3px,
    rgba(17,28,36,.22) 4px);
  mix-blend-mode:multiply;
  opacity:1;
}
/* lens-flare sweep timed to the push through the screen */
.hero__flare{
  position:absolute;top:-20%;left:0;width:60%;height:140%;
  pointer-events:none;opacity:0;
  background:
    radial-gradient(closest-side,rgba(242,239,233,.55),rgba(198,146,20,.22) 45%,transparent 72%),
    linear-gradient(105deg,transparent 42%,rgba(242,239,233,.30) 50%,transparent 58%);
  filter:blur(2px);
  transform:translateX(-60%);
}
/* light twinkling stars in the final stretch, only above the far horizon */
.hero__stars{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 12%,rgba(242,239,233,.9),transparent 60%),
    radial-gradient(1.1px 1.1px at 31% 19%,rgba(242,239,233,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 9%,rgba(242,239,233,.85),transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 22%,rgba(242,239,233,.65),transparent 60%),
    radial-gradient(1.3px 1.3px at 79% 14%,rgba(242,239,233,.8),transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 25%,rgba(242,239,233,.6),transparent 60%),
    radial-gradient(1.1px 1.1px at 23% 29%,rgba(242,239,233,.5),transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 31%,rgba(242,239,233,.5),transparent 60%);
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 46%);
  mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 46%);
  animation:twinkle 5s ease-in-out infinite alternate;
}

.hero__chip{
  position:absolute;top:18px;left:18px;margin:0;z-index:3;
  background:rgba(17,28,36,.82);
  border:1px solid rgba(242,239,233,.28);
  border-radius:var(--radius);
  padding:8px 14px;
  font:500 var(--fs-eyebrow) var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--limestone);
}
.hero__cue{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--limestone);
  font:500 var(--fs-eyebrow) var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;
  text-shadow:0 1px 10px rgba(17,28,36,.9);
  transition:opacity .3s ease;
}
.hero__cue svg{width:22px;height:33px}
.hero__cue-dot{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(9px);opacity:.3}}

/* phone-only lockup band under the canvas (the film's own end card crops at the sides) */
.hero__band{display:none;background:var(--navy);padding:14px 20px;flex:none}
.hero__band img{width:min(420px,88%);margin-inline:auto;height:auto}

/* reduced-motion replacement */
.hero__stills{display:none}
.hero__stills figure{margin:0 0 4px}
.hero__stills figcaption{
  font:400 var(--fs-caption) var(--font-text);
  color:#9fb0b8;padding:10px 24px 24px;
}

/* ==========================================================================
   4. STORE
   ========================================================================== */
.store{position:relative;padding:104px 0;overflow:hidden}
.store__bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(17,28,36,.35) 0%,rgba(17,28,36,.80) 42%,rgba(17,28,36,.92) 100%),
    url("/img/bg_tarawa_atoll_iss_real_parallax_2112.webp") center/cover no-repeat;
  background-attachment:scroll,fixed;
}
.store__grid{position:relative;z-index:2;display:grid;gap:40px}
.store__intro{max-width:46ch}
.store__intro .eyebrow{color:var(--brass)}

.products{
  display:grid;gap:22px;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.product{
  background:rgba(17,28,36,.90);
  border:1px solid rgba(242,239,233,.18);
  border-radius:var(--radius);
  padding:14px 14px 18px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.product__shot{
  aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  background:rgba(242,239,233,.05);
  border:1px solid rgba(242,239,233,.14);
  display:grid;place-items:center;padding:10px;
}
.product__shot img{width:100%;height:100%;object-fit:contain}
.product h3{font:600 20px/26px var(--font-display);color:var(--limestone)}
.product__price{
  margin:0;font:400 var(--fs-body) var(--font-text);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.product .btn{margin-top:auto;width:100%}
.status{
  width:min(1200px,calc(100% - 48px));margin:22px auto 0;position:relative;z-index:2;
  min-height:1.4em;font:400 var(--fs-caption) var(--font-text);color:#cfd6da;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.footer{position:relative;padding:88px 0 64px;background:var(--navy);overflow:hidden}
.footer__grid{
  position:relative;z-index:2;
  display:grid;gap:40px 36px;
  grid-template-columns:1.5fr 1fr 1.3fr 1fr;
  align-items:start;
}
.footer .eyebrow{color:var(--brass)}
.tagline{font:400 italic var(--fs-quote) var(--font-text);margin:16px 0 0;max-width:24ch}
.footer__clock dl{margin:0;display:grid;gap:12px}
.clock dt{font:500 var(--fs-caption) var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:#9fb0b8}
.clock dd{margin:0;font:600 24px/1.2 var(--font-display);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{
  background:var(--brass);color:var(--navy);
  border-radius:12px;padding:3px 10px;
  font:600 13px/1 var(--font-display);
}
.news label{display:block;font:500 var(--fs-caption) var(--font-display);
  text-transform:uppercase;letter-spacing:.06em;color:#9fb0b8;margin-bottom:8px}
.news__row{display:flex;gap:10px;flex-wrap:wrap}
.news input{
  flex:1 1 180px;min-height:44px;padding:10px 14px;
  background:rgba(242,239,233,.08);
  border:2px solid rgba(242,239,233,.42);
  border-radius:var(--radius);
  color:var(--limestone);
  font:400 16px/1.4 var(--font-text);
}
.news input::placeholder{color:#8e9aa1}
.news input[aria-invalid="true"]{border-color:#E9A98D}
.news__error{
  margin:10px 0 0;font:400 var(--fs-caption) var(--font-text);color:#E9A98D;
}
.news__ok{
  margin:12px 0 0;font:400 var(--fs-body) var(--font-text);
  color:var(--limestone);
  border-left:4px solid var(--brass);padding-left:12px;
}
.footer__nav ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.footer__nav a,.credits a{color:var(--limestone);text-underline-offset:3px}
.footer__credits{grid-column:1/-1;border-top:1px solid rgba(242,239,233,.18);padding-top:28px}
.credits{display:grid;gap:8px;list-style:none;margin:0;padding:0;max-width:92ch}
.credits li{font:400 var(--fs-caption) var(--font-text);color:#b9c2c7}

/* ==========================================================================
   CART + DIALOGS
   ========================================================================== */
.dialog{
  border:0;padding:0;background:transparent;
  max-width:min(560px,calc(100% - 32px));width:100%;
  color:var(--navy);
}
.dialog::backdrop{background:rgba(9,15,20,.72)}
.dialog__panel{
  background:var(--limestone);border-radius:var(--radius);
  padding:24px 26px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.dialog__panel--sm{max-width:460px}
.dialog__head{display:flex;align-items:flex-start;gap:16px}
.dialog__head h2{flex:1 1 auto;color:var(--navy)}
.dialog__close{
  flex:none;width:36px;height:36px;
  background:transparent;border:2px solid var(--terracotta);
  color:var(--terracotta);border-radius:var(--radius);
  font:400 22px/1 var(--font-display);cursor:pointer;
}
.dialog__close:hover{background:var(--terracotta);color:var(--limestone)}
.dialog p{font:400 var(--fs-body) var(--font-text)}
.dialog__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.dialog .btn--brass{background:var(--terracotta);color:var(--limestone);border-color:var(--terracotta)}
.dialog .btn--brass:hover{background:#86381F;border-color:#86381F}
.dialog .btn--outline{color:var(--navy);border-color:var(--navy)}
.dialog .btn--outline:hover{background:rgba(17,28,36,.08)}

.cart__items{display:grid;gap:14px;list-style:none;margin:18px 0 0;padding:0}
.cart__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cart__name{flex:1 1 140px;font:600 16px/1.3 var(--font-display)}
.cart__price{font:400 15px/1.3 var(--font-text);color:var(--timber)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{
  width:32px;height:32px;
  background:transparent;border:2px solid var(--navy);color:var(--navy);
  border-radius:6px;font:600 16px/1 var(--font-display);cursor:pointer;
}
.qty button:hover{background:rgba(17,28,36,.10)}
.qty output{min-width:28px;text-align:center;font:600 16px/1 var(--font-display)}
.cart__remove{
  min-height:32px;padding:5px 12px;
  background:transparent;border:2px solid var(--terracotta);color:var(--terracotta);
  border-radius:6px;font:600 14px/1 var(--font-display);cursor:pointer;
}
.cart__remove:hover{background:var(--terracotta);color:var(--limestone)}
.cart__subtotal{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin:22px 0 0;padding-top:16px;border-top:2px solid rgba(17,28,36,.18);
  font:600 18px/1.3 var(--font-display);
}
.cart__note{font:400 var(--fs-caption) var(--font-text);color:var(--timber);margin:10px 0 0}
.cart__empty{margin:18px 0 0;color:var(--timber)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:860px){
  .nav__links{display:none}
}

@media (max-width:767px){
  .wrap{width:calc(100% - 32px)}
  :root{--fs-h2:24px/30px}
  /* the film's end card crops at the sides on phones: the lockup goes in a band */
  .hero__track{height:300vh}
  .hero__band{display:block}
  .hero__chip{font-size:12px;padding:6px 10px;top:12px;left:12px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store__bg{background-attachment:scroll,scroll}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .store{padding:72px 0}
}

/* ==========================================================================
   REDUCED MOTION — stills replace the scrub; flares, spin, curl and
   twinkles are all off.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero__track{display:none}
  .hero__stills{display:block}
  .starfield{animation:none}
  .hero__flare{display:none}
  .store__bg{background-attachment:scroll,scroll}
}