/* Shared stylesheet for the Resources section (index + posts).
   Tokens and components are ported from index.html and must stay in sync
   with it: same fonts, same radius law (architecture square, interaction
   round), same 4px spacing grid, same dark-mode palette. index.html keeps
   its own inline <style>; only Resources pages load this file. */
:root{
  --bg:#FBFAF8;
  --ease:cubic-bezier(.22,.7,.25,1); --dur-fast:120ms; --dur:200ms;
  --bg-alt:#F4F4F2;
  --bg-kraft:#F5F0E4;
  --ink:#111213;
  --ink-soft:#55565A;
  --hairline:#DBDBD6;
  --green:#016738;
  --green-dark:#014A28;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
  --font-sans:'IBM Plex Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  color-scheme:light dark;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--green);color:#fff}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (max-width:680px){html{scroll-padding-bottom:96px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s3)}

#progress{position:fixed;top:0;left:0;height:3px;background:var(--green);z-index:100;width:0}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.06;letter-spacing:-.015em;font-weight:700}
h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}
h3{font-size:1.05rem;letter-spacing:-.005em}
.lede{color:var(--ink-soft);font-size:1.08rem;line-height:1.65;max-width:58ch}
.section{padding:clamp(64px,8vw,104px) 0}
.kicker{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s2)}

/* ---------- signage bar ---------- */
.bar{
  background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 16px 8px 12px;
  margin-bottom:var(--s5);
}
.bar-title{font-weight:700;font-size:.95rem;letter-spacing:.01em}
.bar-note{margin-left:8px;padding-left:12px;border-left:1px solid rgba(154,155,158,.45);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:#A8A9AC;text-transform:uppercase;white-space:nowrap}
@media (max-width:560px){.bar-note{display:none}}
.bullet{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;line-height:1;
}
.bullet.sm{width:22px;height:22px;font-size:.72rem}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  font-family:var(--font-sans);font-weight:700;font-size:.92rem;
  padding:12px 28px;border:1px solid var(--ink);border-radius:999px;
  cursor:pointer;white-space:nowrap;
}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn{transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:active{transform:scale(.985)}
.link-quiet{font-weight:600;font-size:.92rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}
.link-quiet::after{content:"\2197";color:var(--green);font-weight:700}
.link-quiet:hover{color:var(--ink)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.cta-band :focus-visible,.callbar :focus-visible,footer :focus-visible{outline-color:#fff}
main:focus{outline:none}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:101;
  background:var(--ink);color:var(--bg);font-weight:600;font-size:.92rem;
  padding:12px 24px;border-radius:999px;
  transform:translateY(-200%);
}
.skip-link:focus{transform:none}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:30px;width:auto;display:block}
.logo-white{display:none}
.brand-div{
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
  border-left:1px solid var(--hairline);padding-left:12px;
}
.nav-links{display:flex;align-items:center;gap:var(--s3);list-style:none}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:8px 16px;font-size:.84rem}
.menu-btn{
  display:none;background:var(--ink);color:#fff;border:none;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  padding:8px 16px;cursor:pointer;border-radius:999px;
}
@media (max-width:1100px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:64px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--ink);
  }
  .nav-links.open li{border-top:1px solid var(--hairline)}
  .nav-links.open a{display:block;padding:var(--s2) var(--s3);font-size:1rem}
}

/* ---------- post page ---------- */
.post-col{max-width:780px}
.crumb{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:var(--s3);
}
.crumb::before{content:"\2190";color:var(--green);font-weight:700;margin-right:8px}
.crumb:hover{color:var(--ink)}
.post h1{font-size:clamp(2.1rem,4.5vw,3.1rem);margin-bottom:var(--s2)}
.post-meta{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:var(--s3);border-bottom:1px solid var(--ink);margin-bottom:var(--s4);
}
/* Archival record notice. Kraft, square, never green: green means "send Edge
   the request", and this is a disclaimer, not an action. */
.archive-note{
  border:1px solid var(--ink);background:var(--bg-kraft);
  padding:var(--s2) var(--s3);margin-bottom:var(--s4);
  font-size:.92rem;line-height:1.6;color:var(--ink);
}
.archive-note b{
  display:block;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;
}
.archive-note a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.archive-note a:hover{color:var(--green-dark)}

.post-body{font-size:1.02rem;line-height:1.7}
.post-body p{margin-bottom:var(--s2)}
.post-body h2{font-size:1.45rem;margin:var(--s4) 0 var(--s2);line-height:1.2}
.post-body ul{margin:0 0 var(--s2) 0;padding-left:var(--s3)}
.post-body li{margin-bottom:var(--s1)}
.post-body a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--green-dark)}
.post-body img{max-width:100%;height:auto;display:block}
/* Figures are plates: square, bordered, white ground. */
.post-fig{border:1px solid var(--hairline);background:#fff;margin:0 0 var(--s2)}
.post-fig.pad{padding:var(--s2)}
.fig-l,.fig-r{width:min(45%,320px)}
.fig-l{float:left;margin:4px var(--s3) var(--s2) 0}
.fig-r{float:right;margin:4px 0 var(--s2) var(--s3)}
@media (max-width:560px){
  .fig-l,.fig-r{float:none;width:100%;margin:0 0 var(--s2)}
}
.post-banner{border:1px solid var(--hairline);margin-top:var(--s4)}
.post-banner img{width:100%}
.post-body::after{content:"";display:block;clear:both}
.video-embed{position:relative;max-width:640px;aspect-ratio:16/9;margin:0 0 var(--s2)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- resources index ---------- */
.post-list{list-style:none;border-top:1px solid var(--ink)}
.post-list a{
  display:flex;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap;
  padding:16px var(--s1);border-bottom:1px solid var(--hairline);
  transition:background var(--dur-fast) var(--ease);
}
.post-list li:last-child a{border-bottom:1px solid var(--ink)}
.post-list a:hover{background:var(--bg-alt)}
.post-list h3{font-size:.98rem;font-weight:600}
.post-list .meta{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}
.post-list .arrow{margin-left:auto;color:var(--green);font-weight:700}
.archive-block{background:var(--bg-kraft);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.archive-block .post-list a:hover{background:#fff}
.section-intro{margin-bottom:var(--s5)}
@media (max-width:680px){.section-intro{margin-bottom:var(--s3)}}

/* ---------- cta band ---------- */
.cta-band{background:var(--green);color:#fff}
.cta-band .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding-top:var(--s5);padding-bottom:var(--s5);flex-wrap:wrap;
}
.cta-band h2{display:flex;align-items:center;gap:var(--s2)}
.cta-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9A9B9E;font-size:.86rem}
.foot-grid{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding:var(--s5) 0 var(--s4)}
.foot-brand p{margin-top:var(--s2);max-width:30ch}
.foot-tag{margin-top:var(--s2)}
.foot-tag a{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
}
.foot-tag a:hover{color:#5BCB93}
.foot-col h4{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--s2);
}
.foot-col ul{list-style:none;display:grid;gap:var(--s1)}
.foot-col a{color:#C9CACB}
.foot-col a:hover{color:#fff}
.foot-base{
  border-top:1px solid #35363A;padding:var(--s3) 0;
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
}

/* ---------- mobile polish ---------- */
@media (max-width:680px){
  .section{padding:48px 0}
  .bar{margin-bottom:var(--s4)}
}
@media (max-width:480px){
  .wrap{padding:0 20px}
  .brand-div{display:none}
  .nav .btn{padding:8px 12px;font-size:.78rem}
  .menu-btn{padding:8px 12px}
}

/* ---------- mobile call bar ---------- */
.callbar{display:none}
@media (max-width:680px){
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:12px;align-items:center;justify-content:space-between;
  }
  .callbar a.call{color:#fff;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;white-space:nowrap}
  .callbar .btn{padding:8px 16px;font-size:.8rem;flex-shrink:0}
  body{padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- dark theme ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141518; --bg-alt:#1B1C1F;
    --bg-kraft:#201E19;
    --ink:#E9E9E7; --ink-soft:#A2A3A6;
    --hairline:#34353A;
    --green:#34A66A; --green-dark:#46BD7C;
  }
  body{line-height:1.7}
  /* signage inverts: light bars on dark ground, like night signage */
  .bar{color:#141518}
  .bar-note{color:#55565A}
  .menu-btn{color:#141518}
  footer{background:#0B0C0E}
  header,.nav-links.open{background:#141518}
  .post-fig,.post-banner{background:#1E1F23;border-color:#45464A}
  .archive-note{background:var(--bg-kraft);border-color:#45464A;color:var(--ink)}
  .archive-block .post-list a:hover{background:#1E1F23}
  .post-list a:hover{background:#1E1F23}
  .btn-ghost:hover{color:#141518}
  .btn-white{color:#141518}
  .btn-white:hover{background:#141518;color:#fff;border-color:#141518}
  /* deep greens behind white text, bright green for accents */
  .btn-green{background:#17834A;border-color:#17834A}
  .btn-green:hover{background:#146F3F;border-color:#146F3F;color:#fff}
  .cta-band{background:#0F6B3C}
  .bullet{background:#17834A}
  .callbar a.call{color:#141518}
  .brand .logo-color{display:none}
  .brand .logo-white{display:block}
}