@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/cormorant-garamond-400-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/cormorant-garamond-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/cormorant-garamond-500-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./fonts/cormorant-garamond-600.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/source-serif-4-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/source-serif-4-400-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/ibm-plex-mono-400.woff2') format('woff2');
  }

  :root{
    color-scheme: light;
    --bg: #f7f8fa;
    --bg-soft: #eceff3;
    --ink: #1b2026;
    --ink-2: #343b44;
    --muted: #646c77;
    --muted-2: #9aa1ab;
    --rule: #dde1e7;
    --rule-soft: #e9ecf1;
    --accent: #3a6ea5;
    --tag-bg: #e8ebf0;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{ scroll-behavior:smooth }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering: optimizeLegibility;
  }
  .display, h1, h2, h3{
    font-family:'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .mono, .meta, .tag, .date{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }

  /* ===== layout shell ===== */
  .shell{max-width: 1040px; margin: 0 auto; padding: 0 32px}
  .header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--rule);
  }
  .brand{
    font-family:'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
  }
  .brand:hover{color:var(--accent)}
  nav.primary{ display:flex; gap: 28px }
  nav.primary a{
    font-family:'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration:none;
    padding-bottom: 4px;
    border-bottom: 1.5px solid transparent;
    transition: color .15s, border-color .15s;
  }
  nav.primary a:hover{ color: var(--accent); }
  nav.primary a.active{ color: var(--accent); border-bottom-color: var(--accent); }

  main{ padding: 80px 0 120px }
  .reading{ max-width: 760px; margin: 0 auto }
  .narrow{ max-width: 640px; margin: 0 auto }

  /* page title */
  .page-title{
    font-family:'Cormorant Garamond', serif;
    font-size: 56px;
    line-height: 1.05;
    margin: 0 0 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .page-title em{ font-style: italic; font-weight: 500 }
  .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
  }
  .kicker.back{ text-align: center; margin-bottom: 28px }
  .kicker.back a{ color: var(--muted); text-decoration: none }
  .lede{
    color: var(--ink-2);
    font-size: 18.5px;
    line-height: 1.55;
    margin: 0 0 56px;
    max-width: 580px;
  }

  /* section labels (small caps mono with rule) */
  .section-label{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 24px;
    display:flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .section-label .right{ color: var(--muted-2); font-size: 11px }
  .section-label a{ color: var(--muted); text-decoration:none }
  .section-label a:hover{ color: var(--accent) }

  /* writing list */
  .writing-list{ list-style: none; padding:0; margin: 0 0 32px }
  .writing-list li{
    display:grid;
    grid-template-columns: 110px 1fr auto;
    gap: 28px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .writing-list li:last-child{ border-bottom: none }
  .writing-list .date{
    color: var(--muted);
    font-size: 12px;
  }
  .writing-list .title{
    font-family: 'Source Serif 4', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.4;
  }
  .writing-list .title:hover{ color: var(--accent) }
  .tag{
    display:inline-block;
    padding: 3px 9px;
    background: var(--tag-bg);
    color: var(--muted);
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tag.accent{ background: #f7e5e0; color: var(--accent) }

  /* series cards (shared across energy-access and projects listings) */
  .series{
    display:grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: start;
  }
  .series:last-child{ border-bottom: none }
  .series h2{
    font-family:'Cormorant Garamond', serif;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 8px;
  }
  .series h2 a{ color: var(--ink); text-decoration: none }
  .series h2 a:hover{ color: var(--accent) }
  .series p{ margin: 0 0 14px; color: var(--ink-2); font-size: 16px; line-height: 1.6 }
  .series .essays{ list-style: none; padding:0; margin: 14px 0 0 }
  .series .essays li{ padding: 6px 0; border-top: 1px solid var(--rule-soft); display:flex; justify-content: space-between; gap: 16px }
  .series .essays li:first-child{ border-top: 1px solid var(--rule) }
  .series .essays a{ color: var(--ink-2); text-decoration: none; font-size: 15px }
  .series .essays a:hover{ color: var(--accent) }
  .series .essays .date{ color: var(--muted-2); font-size: 11px }

  /* about */
  .about-body p{
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 22px;
    max-width: 640px;
  }
  .about-body p:first-of-type::first-letter{
    font-family:'Cormorant Garamond', serif;
    font-size: 56px;
    line-height: 0.9;
    float: left;
    margin: 6px 10px -4px 0;
    color: var(--ink);
    font-weight: 500;
  }

  .keyvals{ margin-top: 64px }
  .keyvals .row{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap: 32px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .keyvals .row:first-child{ border-top: 1px solid var(--rule) }
  .keyvals .row .k{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .keyvals .row .v{ font-size: 16.5px; color: var(--ink-2) }
  .keyvals .row .v a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent) }

  /* article */
  .article-meta{
    display:flex; gap: 20px; flex-wrap: wrap;
    margin: 0 0 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
  }
  .article-meta span, .article-meta time{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .article-meta span.topic{ color: var(--accent) }
  .article-meta a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule) }
  .article-meta a:hover{ color: var(--accent); border-color: var(--accent) }

  article.essay{ max-width: 680px; margin: 0 auto }
  article.essay h1{
    font-family:'Cormorant Garamond', serif;
    font-size: 48px;
    line-height: 1.08;
    font-weight: 500;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
  }
  article.essay .deck{
    font-family:'Source Serif 4', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 40px;
    max-width: 580px;
  }
  article.essay p{ font-size: 18px; line-height: 1.75; color: var(--ink-2); margin: 0 0 22px }
  article.essay h2{
    font-family:'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 500;
    margin: 56px 0 18px;
    font-style: italic;
    color: var(--ink);
  }
  article.essay h2::before{
    content: "§";
    color: var(--accent);
    font-style: normal;
    margin-right: 10px;
    font-size: 22px;
    vertical-align: 4px;
  }
  article.essay h3{
    font-family:'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    margin: 36px 0 12px;
  }
  article.essay blockquote{
    margin: 32px 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--accent);
    font-family:'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink);
  }
  article.essay pre{
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 18px 22px;
    font-family:'IBM Plex Mono', monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
    overflow-x: auto;
    margin: 24px 0;
  }
  article.essay pre .c{ color: var(--muted-2) }
  article.essay pre .k{ color: var(--accent) }
  article.essay code{
    font-family:'IBM Plex Mono', monospace;
    font-size: 0.88em;
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 2px;
  }
  article.essay .figure{
    margin: 36px 0;
  }
  /* Responsive sizing for shortcode-generated images. Inline styles are
     disallowed by the CSP (style-src 'self'), so this lives here. [SEO-008] */
  article.essay .figure img{ display: block; max-width: 100%; height: auto; }
  article.essay .figure .frame{
    border: 1px solid var(--rule);
    background:
      repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,0.025) 10px 11px),
      var(--bg);
    aspect-ratio: 16/9;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted-2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  article.essay .figure .cap{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 10px;
    letter-spacing: 0.04em;
  }
  article.essay .callout{
    border: 1px solid var(--rule);
    background: var(--bg-soft);
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 2px;
  }
  article.essay .callout .lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    display:block;
    margin-bottom: 6px;
  }
  article.essay .callout p{ font-size: 16px; line-height: 1.55; margin: 0; font-style: italic; color: var(--ink-2) }

  .article-nav{
    max-width: 680px; margin: 80px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .article-nav a{
    text-decoration:none; color: var(--ink-2);
    display:block;
  }
  .article-nav .dir{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .article-nav .ttl{
    font-family:'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
  }
  .article-nav a:hover .ttl{ color: var(--accent) }
  .article-nav .right{ text-align: right }

  /* home featured paths block */
  .home-intro{
    margin-bottom: 64px;
  }
  .home-intro .greeting{
    font-family:'Cormorant Garamond', serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 22px;
    max-width: 620px;
    letter-spacing: -0.01em;
  }
  .home-intro p{
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 18px;
    max-width: 580px;
  }
  .home-intro p .accent-link{
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    text-decoration: none;
  }

  /* footer */
  footer.site{
    border-top: 1px solid var(--rule);
    padding: 28px 0 40px;
    margin-top: 80px;
    display:flex;
    justify-content: space-between;
    align-items: baseline;
  }
  footer.site .copy{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  footer.site .links{
    display:flex; gap: 24px;
  }
  footer.site .links a{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--ink-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-2);
    padding-bottom: 2px;
  }
  footer.site .links a:hover{ color: var(--accent); border-color: var(--accent) }

  /* page switching */

  /* small device */
  @media (max-width: 720px){
    .header{ flex-direction: column; align-items:flex-start; gap: 14px }
    nav.primary{ gap: 18px; flex-wrap: wrap }
    .page-title{ font-size: 42px }
    .series{ grid-template-columns: 1fr; gap: 8px }
    .writing-list li{ grid-template-columns: 90px 1fr; }
    .writing-list .tag{ grid-column: 2 }
    article.essay h1{ font-size: 36px }
    .home-intro .greeting{ font-size: 28px }
  }