/* ============================================================
   JevBag . Annual Impact Report
   DESIGN TOKENS (locked). Palette sampled straight out of
   assets/avatar.png with a pixel histogram, not eyeballed:
     cream  #FDF6DA  (14342 px, the sheet the art sits on)
     green  #61A84A  (5638 px, the tote body)
     tan    #CE994C  (237 px, the handle strap)
     ink    #000000  (2050 px, the drawn line)
   Deeper green + deeper tan below are darkened from those two
   for 4.5:1 text contrast on cream. Nothing else enters.
   Type: Quicksand 500/700 (rounded headline face), Nunito 400/600
   (body), Space Mono 400/700 (registry number + all chrome).
   Spacing scale: 8 / 16 / 24 / 40 / 64 / 96 / 128 px. Radius 4 / 14 / 999.
   Motion idiom: one slow 6s breathing sway on the cover tote,
   everything else is a 180ms ease settle.
   ============================================================ */

@font-face{font-family:'Quicksand';src:url('assets/fonts/quicksand-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Quicksand';src:url('assets/fonts/quicksand-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('assets/fonts/nunito-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url('assets/fonts/nunito-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('assets/fonts/space-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#FDF6DA;
  --sheet:#FFFBEC;
  --green:#61A84A;
  --green-deep:#3C6B2C;
  --green-soft:#DCEBCF;
  --tan:#CE994C;
  --tan-deep:#8C6524;
  --ink:#171512;
  --ink-soft:#57534A;
  --rule:#E0D6B4;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --r-sm:4px; --r-md:14px; --r-pill:999px;

  --disp:'Quicksand',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--cream);
  background-image:url('assets/paper.png');
  background-size:420px 420px;
  color:var(--ink);
  font:400 17px/1.66 var(--body);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--green-deep)}
button{font:inherit}

.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:12px 16px;z-index:60;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:where(a,button):focus-visible{outline:3px solid var(--tan-deep);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(253,246,218,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{display:flex;align-items:center;gap:var(--s3);min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand-mark{
  width:26px;height:24px;flex:0 0 auto;
  background:var(--green);
  border:2px solid var(--ink);
  border-radius:2px 2px 9px 9px;
  position:relative;
}
.brand-mark::before{
  content:"";position:absolute;left:50%;top:-9px;translate:-50% 0;
  width:14px;height:12px;border:2px solid var(--tan-deep);border-bottom:0;
  border-radius:8px 8px 0 0;
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font:700 19px/1 var(--disp);letter-spacing:-.01em}
.brand-sub{font:400 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}

.mast-nav{display:flex;gap:var(--s3);margin-left:auto}
.mast-nav a{
  font:600 14px/1 var(--body);color:var(--ink-soft);text-decoration:none;
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease);
}
.mast-nav a:hover{color:var(--green-deep);border-bottom-color:var(--green)}
.mast-cta{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.mast-nav + .mast-cta{margin-left:var(--s4)}

.chain{
  font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--green-deep);background:var(--green-soft);
  border:1px solid var(--green);border-radius:var(--r-pill);padding:7px 12px;white-space:nowrap;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border-radius:var(--r-pill);
  padding:13px 22px;border:2px solid var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.btn-solid{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--ink)}
.btn-solid:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.btn-solid:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--tan);border-color:var(--ink);color:var(--ink)}
.btn-wide{width:100%}
.ico{width:17px;height:17px;flex:0 0 auto}

/* ---------- cover ---------- */
.cover{padding:var(--s6) 0 var(--s5)}
.cover-in{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s5);align-items:center}

.eyebrow{
  font:400 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.17em;
  color:var(--tan-deep);margin:0 0 var(--s3)
}
.dot{opacity:.5;padding:0 3px}

.h1{
  font:700 clamp(46px,6.4vw,82px)/1.02 var(--disp);
  letter-spacing:-.028em;margin:0 0 var(--s3);color:var(--ink)
}
.deck{font-size:19px;line-height:1.62;color:var(--ink-soft);max-width:34em;margin:0 0 var(--s4)}

.live{
  border-left:3px solid var(--green);padding-left:var(--s3);margin:0 0 var(--s4);
  display:flex;flex-direction:column;gap:6px
}
.live-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.live-num{
  font:700 26px/1 var(--mono);color:var(--green-deep);
  font-variant-numeric:tabular-nums;min-width:2.2ch
}
.live-row-alt .live-num{color:var(--tan-deep)}
.live-lab{font-size:14px;color:var(--ink-soft)}

.chips{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s3)}
.ca-chip{
  display:inline-flex;align-items:stretch;
  border:2px solid var(--ink);border-radius:var(--r-pill);overflow:hidden;background:var(--sheet);max-width:100%
}
.ca-key{
  display:flex;align-items:center;padding:9px 13px;background:var(--ink);color:var(--cream);
  font:400 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap
}
.ca-val{
  border:0;background:transparent;cursor:pointer;color:var(--ink);
  font:700 12px/1 var(--mono);letter-spacing:.02em;padding:9px 15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(58vw,330px);
  transition:background-color .18s var(--ease)
}
.ca-val:hover{background:var(--green-soft)}
.ca-val.copied{background:var(--green);color:#fff}
.status{
  font:400 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--tan-deep);border:1px dashed var(--tan);border-radius:var(--r-sm);padding:8px 11px
}
.cover-links{display:flex;gap:var(--s2);flex-wrap:wrap}

/* cover art . the one signature motion */
.cover-art{margin:0}
.art-frame{
  background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-md);
  padding:var(--s3);box-shadow:10px 10px 0 rgba(61,107,44,.16);overflow:hidden
}
.tote{
  width:100%;border-radius:6px;cursor:pointer;
  transform-origin:50% 100%;
  animation:sway 6s var(--ease) infinite
}
@keyframes sway{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1,1)}
  28%    {transform:translateY(-7px) rotate(-.7deg) scale(.995,1.008)}
  62%    {transform:translateY(3px) rotate(.55deg) scale(1.006,.994)}
}
.tote.press{animation:none;transform:scale(1.035,.93);transition:transform .16s var(--ease)}
.cover-art figcaption{
  font:400 12px/1.6 var(--mono);color:var(--ink-soft);
  margin-top:var(--s2);padding-left:2px;max-width:42ch
}

/* ---------- mission ---------- */
.kicker{
  font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.17em;
  color:var(--tan-deep);margin:0 0 var(--s2)
}
.h2{font:700 clamp(30px,3.6vw,46px)/1.12 var(--disp);letter-spacing:-.02em;margin:0 0 var(--s3)}
.h3{font:700 22px/1.3 var(--disp);letter-spacing:-.01em;margin:0 0 var(--s2)}
.lede{font-size:18px;color:var(--ink-soft);max-width:60ch;margin:0 0 var(--s4)}

.mission{
  background:var(--green-deep);color:var(--green-soft);
  padding:var(--s6) 0;border-block:2px solid var(--ink)
}
.mission .kicker{color:#C9DDB8}
/* absolute px, not ch: `ch` on the blockquote resolves against ITS font-size
   (17px body), not the 56px display face inside, which squeezed the pull
   quote to 224px and broke it to one word per line. */
.quote{margin:0 0 var(--s4);max-width:min(760px,100%)}
.quote p{
  font:700 clamp(32px,4.4vw,56px)/1.14 var(--disp);
  letter-spacing:-.024em;color:#fff;margin:0 0 var(--s2)
}
.quote cite{
  font:400 12px/1.6 var(--mono);font-style:normal;color:#B6CFA2;
  display:block;max-width:40ch
}
.mission-body{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s4);border-top:1px solid rgba(255,255,255,.22);padding-top:var(--s4)
}
.mission-body p{margin:0;font-size:17px;line-height:1.7}
.mission-body p:last-child{font:700 24px/1.4 var(--disp);color:#fff;align-self:center}

/* ---------- impact ---------- */
.impact{padding:var(--s6) 0}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--sheet)
}
.stat{
  padding:var(--s4) var(--s3);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px
}
.stat:nth-child(3n){border-right:0}
.stat:nth-child(n+4){border-bottom:0}
.stat-num{
  font:700 clamp(38px,4vw,54px)/1 var(--mono);color:var(--green-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em
}
.stat:nth-child(2) .stat-num,
.stat:nth-child(3) .stat-num{color:var(--tan-deep)}
.stat-lab{font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* ---------- field plate ---------- */
.plate{
  margin:0;padding:0 0 var(--s6);
  background:linear-gradient(180deg,transparent 0 62px,var(--green-soft) 62px 100%)
}
.plate img{
  width:min(1180px,100% - 48px);margin-inline:auto;
  border:2px solid var(--ink);border-radius:var(--r-md);background:var(--sheet)
}
.plate figcaption{
  font:400 12px/1.7 var(--mono);color:var(--ink-soft);
  margin-top:var(--s2);max-width:70ch
}

/* ---------- story ---------- */
.story{padding:var(--s6) 0}
.beats{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.beat{
  display:grid;grid-template-columns:150px 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule)
}
.beat-year{
  font:700 15px/1 var(--mono);letter-spacing:.06em;color:var(--tan-deep);padding-top:6px
}
.beat-body h3{font:700 23px/1.28 var(--disp);letter-spacing:-.012em;margin:0 0 10px}
.beat-body p{margin:0;color:var(--ink-soft);max-width:62ch}

/* ---------- pledges ---------- */
.pledges{padding:0 0 var(--s6)}
.pledges-in{
  display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s5);align-items:start;
  background:var(--sheet);border:2px solid var(--ink);border-radius:var(--r-md);
  padding:var(--s5);width:min(1180px,100% - 48px)
}
.pledge-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.pledge-list li{
  position:relative;padding-left:40px;font-size:17px;line-height:1.6;
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule)
}
.pledge-list li:last-child{border-bottom:0;padding-bottom:0}
.pledge-list li::before{
  content:"";position:absolute;left:0;top:2px;width:22px;height:22px;
  border:2px solid var(--green-deep);border-radius:var(--r-sm);background:var(--green-soft)
}
.pledge-list li::after{
  content:"";position:absolute;left:7px;top:7px;width:8px;height:13px;
  border:solid var(--green-deep);border-width:0 2.5px 2.5px 0;rotate:42deg
}

.enrol{
  background:var(--green-soft);border:2px solid var(--ink);border-radius:var(--r-md);
  padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2)
}
.enrol-kick{
  font:400 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;
  color:var(--green-deep);margin:0
}
.enrol-copy{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.enrol-count{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:var(--s1)}
.enrol-num{
  font:700 46px/1 var(--mono);color:var(--green-deep);font-variant-numeric:tabular-nums
}
.enrol-lab{font-size:14px;color:var(--ink-soft);max-width:14ch;line-height:1.4}
.enrol-say{
  margin:0;font:400 13px/1.55 var(--mono);color:var(--tan-deep);min-height:2.4em
}

/* ---------- method ---------- */
.method{padding:0 0 var(--s6)}
/* narrow measure for the fine print, but still hung on the same left grid
   line as every other section rather than centred in the page */
.method .wrap > *{max-width:74ch}
.method p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin:0 0 var(--s2)}
.method-sign{font-family:var(--mono);font-size:12px;padding-top:var(--s2);border-top:1px solid var(--rule)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:var(--s4) 0}
.foot-in{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-name{margin:0;font:700 18px/1.2 var(--disp)}
.tick{font:700 12px/1 var(--mono);color:var(--green);letter-spacing:.05em;margin-left:6px}
.foot-chain{margin:0;font:400 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#9A9287}
.foot-links{display:flex;gap:var(--s3);margin-left:auto;flex-wrap:wrap}
.foot-links a{color:var(--cream);font:600 14px/1 var(--body);text-decoration:none;border-bottom:1px solid rgba(253,246,218,.35);padding-bottom:3px}
.foot-links a:hover{color:var(--green);border-bottom-color:var(--green)}
.foot-note{margin:0;font:400 11px/1 var(--mono);color:#9A9287;letter-spacing:.06em}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .mast-nav{display:none}
  .cover-in{grid-template-columns:1fr;gap:var(--s4)}
  .cover-art{order:-1;max-width:430px}
  .pledges-in{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3n){border-right:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+4){border-bottom:1px solid var(--rule)}
  .stat:nth-child(n+5){border-bottom:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:min(1180px,100% - 32px)}
  .cover{padding:var(--s4) 0 var(--s4)}
  .mission,.impact,.story{padding:var(--s5) 0}
  .masthead-in{min-height:58px;gap:var(--s2)}
  .brand-sub{display:none}
  .chain{display:none}
  .btn{padding:11px 16px;font-size:12px}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0}
  .stat:nth-child(3n),.stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+4),.stat:nth-child(n+5){border-bottom:1px solid var(--rule)}
  .stat:last-child{border-bottom:0}
  .beat{grid-template-columns:1fr;gap:var(--s1)}
  .plate{padding-bottom:var(--s5)}
  .plate img,.pledges-in{width:min(1180px,100% - 32px)}
  .cover-art{max-width:none}
  .ca-val{max-width:calc(100vw - 190px)}
}
@media (max-width:380px){
  .h1{font-size:38px}
  .cover-links{flex-direction:column;align-items:stretch}
  .cover-links .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tote{animation:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}