:root{
    --paper:#FAF6EE; --paper-2:#F3EDE1; --card:#FFFDF8;
    --ink:#201B15; --ink-soft:#5C5346; --ink-faint:#8A8071;
    --pine:#1F5E54; --pine-deep:#163F39; --pine-soft:#DEEAE6;
    --amber:#B5761E; --amber-deep:#6E4A12; --amber-soft:#F4E7CE;
    --coral:#B0503A; --coral-deep:#7A3322; --coral-soft:#F3DED7;
    --rule:#E2DACA;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  }
  *{box-sizing:border-box;}
  html{-webkit-font-smoothing:antialiased;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.72;
    background-image:radial-gradient(120% 80% at 100% 0%, rgba(31,94,84,.06), transparent 60%),
                     radial-gradient(120% 80% at 0% 100%, rgba(181,118,30,.06), transparent 55%);
    background-attachment:fixed;
  }
  .wrap{max-width:860px; margin:0 auto; padding:0 28px;}
  ::selection{background:var(--amber-soft);}

  /* ---------- Hero ---------- */
  /* Resets guard against styles.css's bare `header` rule (sticky site nav)
     now that both stylesheets load on journal pages. */
  header.hero{padding:88px 0 38px;position:static;background:none;border-bottom:0;backdrop-filter:none;z-index:auto;}
  .topline{height:3px;width:64px;background:var(--pine);border-radius:3px;margin-bottom:30px;}
  .eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    font-size:12.5px;color:var(--amber-deep);margin:0 0 18px;}
  h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6.6vw,62px);line-height:1.03;
    letter-spacing:-.01em;margin:0 0 22px;color:var(--ink);}
  h1 em{font-style:italic;color:var(--pine);}
  .lede{font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:64ch;margin:0;}
  .lede strong{color:var(--ink);font-weight:600;}
  .byline{margin:26px 0 0;font-size:14px;color:var(--ink-faint);letter-spacing:.02em;}
  .byline b{color:var(--ink-soft);font-weight:600;}

  /* ---------- Sections ---------- */
  section{padding:46px 0;border-top:1px solid var(--rule);}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:8px;}
  .sec-num{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--amber);
    font-feature-settings:"tnum";flex:none;width:2.2em;}
  h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,33px);line-height:1.12;
    letter-spacing:-.01em;margin:0;color:var(--ink);}
  .sec-body{padding-left:calc(2.2em + 18px);}
  @media(max-width:620px){.sec-body{padding-left:0;}}
  p{margin:0 0 18px;}
  p:last-child{margin-bottom:0;}
  .muted{color:var(--ink-soft);}
  strong{font-weight:600;}
  .kicker{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    font-size:11.5px;color:var(--pine);margin:22px 0 10px;}

  /* ---------- Pull quote ---------- */
  blockquote{margin:30px 0;padding:4px 0 4px 26px;border-left:3px solid var(--amber);
    font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.4;color:var(--ink);}
  blockquote.pine{border-left-color:var(--pine);}
  blockquote.coral{border-left-color:var(--coral);}

  /* ---------- Figure / diagram ---------- */
  figure{margin:32px 0 8px;background:var(--card);border:1px solid var(--rule);border-radius:18px;
    padding:26px 26px 18px;box-shadow:0 1px 0 rgba(32,27,21,.02),0 18px 40px -28px rgba(31,94,84,.22);}
  figcaption{font-size:13.5px;color:var(--ink-faint);margin-top:8px;text-align:center;line-height:1.5;}
  .dgm{width:100%;height:auto;display:block;}
  .dgm text{font-family:var(--sans);}
  .dgm .t-title{font-weight:600;font-size:15px;fill:var(--ink);}
  .dgm .t-sub{font-size:12px;fill:var(--ink-soft);}
  .dgm .lbl{fill:var(--ink-soft);font-size:12px;}
  .dgm .tier{fill:var(--amber-deep);font-weight:700;font-size:12.5px;letter-spacing:.04em;}
  .dgm .vs{fill:var(--ink-faint);font-family:var(--serif);font-style:italic;font-size:18px;}
  .dgm .lbl-coral{fill:var(--coral-deep);font-weight:600;font-size:12px;}
  .dgm .lbl-pine{fill:var(--pine-deep);font-weight:600;font-size:12px;}
  .box-fuel rect{fill:var(--amber-soft);stroke:var(--amber);}
  .box-fuel .t-title{fill:var(--amber-deep);}
  .box-fuel .t-sub{fill:#8A6320;}
  .box-sys rect{fill:var(--pine-soft);stroke:var(--pine);}
  .box-sys .t-title{fill:var(--pine-deep);}
  .box-sys .t-sub{fill:#2C5F57;}
  .box-coral rect{fill:var(--coral-soft);stroke:var(--coral);}
  .box-coral .t-title{fill:var(--coral-deep);}
  .box-coral .t-sub{fill:#984B38;}
  .box-neutral rect{fill:var(--card);stroke:var(--rule);}
  .chip rect{fill:var(--pine-soft);stroke:var(--pine);}
  .chip .t-title{fill:var(--pine-deep);}
  .chip .t-sub{fill:#2C5F57;}
  .dgm .ln{stroke:var(--ink-soft);stroke-width:1.5;fill:none;}
  .dgm .ln-soft{stroke:var(--ink-soft);stroke-width:1;fill:none;}
  .dgm .ln-dash{stroke:var(--ink-faint);stroke-width:1;fill:none;stroke-dasharray:4 4;}

  /* ---------- Principles ---------- */
  .principles{list-style:none;padding:0;margin:24px 0 6px;display:grid;gap:11px;}
  .principles li{background:var(--pine-soft);border-radius:12px;padding:14px 18px;font-size:15.5px;color:var(--pine-deep);
    display:flex;gap:13px;align-items:baseline;}
  .principles li b{font-weight:700;}
  .principles li .mark{color:var(--pine);font-weight:700;flex:none;}

  /* ---------- Role / contribution ---------- */
  .role{background:var(--pine);color:#F4F0E6;border-radius:18px;padding:28px 32px;margin:30px 0 6px;}
  .role .k{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:#BBD8D0;margin:0 0 12px;}
  .role p{font-family:var(--serif);font-size:20px;line-height:1.5;margin:0;color:#F6F2E8;}
  .role p b{color:#fff;font-weight:600;}

  /* ---------- Aside callout ---------- */
  .aside{background:var(--amber-soft);border-radius:14px;padding:18px 22px;margin:26px 0 6px;font-size:15.5px;color:var(--ink);line-height:1.55;}
  .aside b{color:var(--amber-deep);font-weight:700;}

  /* Article colophon — scoped to .wrap so the dark site footer
     (styles.css bare `footer`) keeps its own styling. */
  .wrap footer{background:transparent;padding:36px 0 72px;border-top:1px solid var(--rule);color:var(--ink-faint);font-size:13px;line-height:1.65;}
  .wrap footer b{color:var(--ink-soft);font-weight:600;}

  /* ---------- Motion ---------- */
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  header.hero,section{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  section:nth-of-type(1){animation-delay:.04s}
  section:nth-of-type(2){animation-delay:.08s}
  section:nth-of-type(3){animation-delay:.1s}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;}}

  @media print{
    body{background:#fff;}
    .wrap{max-width:100%;}
    figure,.role,.aside{box-shadow:none;}
    *{animation:none!important;opacity:1!important;}
    section,figure{break-inside:avoid;}
  }

/* ---------- Site chrome (added at integration) ---------- */
/* The journal pages share the site's Nav/Footer; this row only carries the
   "all field notes" back link on article pages. */
.journal-topbar{display:flex;justify-content:flex-end;align-items:center;
  padding:26px 0 0;font-size:13.5px;letter-spacing:.02em;}
.journal-topbar a{color:var(--ink-faint);text-decoration:none;transition:color .2s;}
.journal-topbar a:hover{color:var(--pine);}
.journal-topbar + header.hero{padding-top:56px;}

/* ---------- Notes (lighter register, MDX prose) ---------- */
.byline a{color:var(--pine);text-decoration:none;font-weight:600;}
.byline a:hover{text-decoration:underline;}
.note-body{padding:34px 0 46px;animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:.06s;}
.note-body h2{margin:42px 0 14px;}
.note-body h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;margin:30px 0 10px;color:var(--ink);}
.note-body ul,.note-body ol{margin:0 0 18px;padding-left:1.25em;}
.note-body li{margin:0 0 8px;}
.note-body li::marker{color:var(--amber);}
.note-body code{font-size:15px;background:var(--paper-2);padding:2px 6px;border-radius:6px;}
.note-body pre{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;overflow-x:auto;font-size:14.5px;line-height:1.6;margin:0 0 18px;}
.note-body pre code{background:none;padding:0;}

/* ---------- Writing index ---------- */
.note-list{list-style:none;margin:0;padding:0;}
.note-list li{border-top:1px solid var(--rule);padding:38px 0;animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.note-list li:nth-child(2){animation-delay:.06s}
.note-list li:nth-child(3){animation-delay:.1s}
.note-list li:nth-child(4){animation-delay:.14s}
.note-eyebrow{font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;color:var(--amber-deep);margin:0 0 10px;}
.note-title{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,34px);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px;}
.note-title a{color:var(--ink);text-decoration:none;transition:color .2s;}
.note-title a:hover{color:var(--pine);}
.note-title em{font-style:italic;color:var(--pine);}
.note-excerpt{color:var(--ink-soft);margin:0 0 14px;max-width:64ch;}
.note-meta{font-size:13.5px;color:var(--ink-faint);}
.note-meta b{color:var(--ink-soft);font-weight:600;}
.note-meta a{color:var(--pine);text-decoration:none;font-weight:600;}
.note-meta a:hover{text-decoration:underline;}