:root{
    --ink:        #1c1a15;
    --paper:      #f1ead9;
    --paper-dim:  #e7ddc7;
    --essex:      #27362e;
    --essex-deep: #182119;
    --walnut:     #3d2a1e;
    --brass:      #a37f3f;
    --brass-lt:   #cba86a;
    --rule:       rgba(28,26,21,0.16);

    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body:    'Source Serif 4', Georgia, serif;
    --mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--brass);
    outline-offset:3px;
  }

  /* ---------- slat motif, reused as a divider + footer texture ---------- */
  .slats{
    height:34px;
    background-image: repeating-linear-gradient(
      90deg,
      var(--walnut) 0px, var(--walnut) 6px,
      transparent 6px, transparent 17px
    );
    background-color: var(--essex-deep);
  }
  @media (max-width:640px){
    .slats{ height:22px; }
  }

  /* ---------------------------- header ---------------------------- */
  header.masthead{
    background:var(--essex);
    color:var(--paper);
    border-bottom:1px solid var(--brass);
  }
  .masthead-inner{
    max-width:920px;
    margin:0 auto;
    padding:22px 28px 20px;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .wordmark{
    font-family:var(--display);
    font-weight:500;
    font-size:1.5rem;
    letter-spacing:0.01em;
  }
  .wordmark small{
    display:block;
    font-family:var(--mono);
    font-size:0.62rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--brass-lt);
    margin-top:4px;
  }
  nav.masthead-nav{
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.04em;
    display:flex;
    gap:22px;
  }
  nav.masthead-nav a{
    text-decoration:none;
    color:var(--paper-dim);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:border-color .15s ease, color .15s ease;
  }
  nav.masthead-nav a:hover{
    color:var(--brass-lt);
    border-color:var(--brass-lt);
  }

  /* ---------------------------- hero / bookplate ---------------------------- */
  .hero{
    max-width:920px;
    margin:0 auto;
    padding:64px 28px 48px;
  }
  .hero-eyebrow{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--essex);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .hero-eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--brass);
    display:inline-block;
  }
  h1 {
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(1.5rem, 2vw, 3.6rem);
    line-height:1.04;
    margin:0 0 20px;
  }
  :is(h1, h2, h3, h4, h5) em{
    font-style:italic;
    font-weight:400;
    color:var(--essex);
  }
  .hero-deck{
    font-size:1.1rem;
    max-width:52ch;
    color:#3a362c;
    margin:0;
  }

  /* ---------------------------- catalog / post list ---------------------------- */
  .catalog{
    max-width:920px;
    margin:0 auto;
    padding:8px 28px 80px;
  }
  .catalog-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:1px solid var(--rule);
    padding-bottom:10px;
    margin:40px 0 6px;
  }
  .catalog-heading h2{
    font-family:var(--display);
    font-weight:500;
    font-size:1.05rem;
    letter-spacing:0.03em;
    margin:0;
  }
  .catalog-heading span{
    font-family:var(--mono);
    font-size:0.7rem;
    color:#6b6455;
  }

  .entry{
    display:grid;
    grid-template-columns:64px 1fr auto;
    gap:22px;
    align-items:start;
    padding:26px 0;
    border-bottom:1px solid var(--rule);
    text-decoration:none;
    color:inherit;
  }
  .entry:last-child{ border-bottom:none; }

  .entry-num{
    font-family:var(--mono);
    font-size:0.72rem;
    color:var(--brass);
    padding-top:5px;
    letter-spacing:0.02em;
  }
  .entry-num::after{
    content:"";
    display:block;
    width:16px; height:16px;
    margin-top:8px;
    border:1px solid var(--brass);
    border-radius:1px;
    background:
      linear-gradient(135deg, transparent 47%, var(--brass) 47%, var(--brass) 53%, transparent 53%);
    opacity:0.75;
  }

  .entry-title,
  .entry-title a{
    font-family:var(--display);
    font-weight:500;
    font-size:1.32rem;
    line-height:1.25;
    margin:0 0 8px;
    transition:color .15s ease;
  }
  .entry:hover .entry-title{ color:var(--essex); }
  .entry:hover .entry-title u{ border-color:var(--essex); }
  .entry-title u{
    text-decoration:none;
    border-bottom:1px solid var(--rule);
    transition:border-color .15s ease;
  }
  .entry-excerpt{
    margin:0;
    font-size:0.98rem;
    color:#4a4636;
    max-width:56ch;
  }
  p {
      font-size: 1rem;
      max-width: 70ch;
  }
  .entry-tags{
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:0.03em;
    color:#8a8371;
    margin-top:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .entry-tags span::before{ content:"·  "; color:var(--brass); }

  .entry-meta{
    text-align:right;
    font-family:var(--mono);
    font-size:0.72rem;
    color:#8a8371;
    white-space:nowrap;
    padding-top:6px;
  }
  .entry-meta .drawer{
    display:block;
    margin-top:6px;
    color:var(--brass);
    font-size:0.66rem;
    letter-spacing:0.06em;
  }

  @media (max-width:640px){
    .entry{
      grid-template-columns:40px 1fr;
    }
    .entry-meta{
      grid-column:2;
      text-align:left;
      padding-top:0;
      display:flex;
      gap:10px;
      align-items:baseline;
    }
    .entry-meta .drawer{ margin-top:0; }
  }

  /* ---------------------------- footer ---------------------------- */
  footer{
    background:var(--essex-deep);
    color:var(--paper-dim);
    border-top: 1px solid var(--brass);
  }
  .footer-inner{
    max-width:920px;
    margin:0 auto;
    padding:38px 28px 44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.03em;
  }
  .footer-inner a{
    color:var(--brass-lt);
    text-decoration:none;
  }
  .footer-inner a:hover{ text-decoration:underline; }

  /* ---------------------------- org-export scaffolding ---------------------------- */
  /* ox-html wraps every block in <p>.  The global `p` rule below matches those
     directly, which beats the font-size inherited from .entry-num/.entry-meta,
     so hand it back explicitly. */
  .entry-num p, .entry-meta p{
    margin:0;
    max-width:none;
    font-size:inherit;
    line-height:inherit;
  }

  /* When a paragraph contains nothing but a link, ox-html moves #+attr_html
     onto the <a>; otherwise it lands on the <p>.  Cover both shapes. */
  .entry-body > p{ margin:0; }
  .entry-body > p.entry-title,
  .entry-body > p:has(> .entry-title){ margin:0 0 8px; }
  .entry-body > p.entry-tags{ margin-top:10px; }

  /* ox-html renders #+TITLE into a <header> at the top of <main>. */
  main#content > header{
    max-width:920px;
    margin:0 auto;
    padding:64px 28px 4px;
  }
  main#content > header .subtitle{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:#6b6455;
  }

  /* body-text pages: contact, essay prose */
  .prose{
    max-width:920px;
    margin:0 auto;
    padding:24px 28px 80px;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ transition:none !important; }
  }