/* The Judean Almanac — editorial visual system (identity redesign).
 *
 * A contemporary Jerusalem field journal, published by The Judean Homestead.
 * A distinct publication within the same family: its own deep-ink masthead and
 * chrome, warm parchment reading surfaces, Jerusalem-stone neutrals, muted olive
 * for field notes and markers, terracotta as punctuation, and a sturdier
 * long-form reading face (Source Serif 4). Restraint over ornament: no gradients,
 * no fake aged paper, no glossy cards, no heavy shadows.
 *
 * Type: Cormorant Garamond (masthead / titles / section openings / pull quotes),
 * Jost (nav / labels / metadata / captions / buttons), Source Serif 4 (body). */

:root{
  /* paper + stone */
  --alm-paper:#F0E7D0;        /* primary reading surface (warm parchment) */
  --alm-paper-2:#E4D6B5;      /* secondary Jerusalem-stone panel */
  --alm-stone:#D8C7A0;        /* Jerusalem stone */
  --alm-stone-deep:#CBB78D;
  /* ink — olive-charcoal, not brown */
  --alm-ink:#26221A;          /* body text */
  --alm-ink-deep:#282A1C;     /* header / masthead band (olive-charcoal) */
  --alm-ink-deeper:#202215;   /* footer (a shade deeper) */
  --alm-ink-soft:#544a2f;
  --alm-cream:#F4ECD6;        /* text on olive-charcoal */
  --alm-cream-dim:#C7BC94;
  /* accents */
  --alm-olive:#5F6138;        /* field notes, markers, captions (meets contrast) */
  --alm-olive-soft:#6E7049;
  --alm-olive-band:#565A34;   /* the strong subscription field-journal band */
  --alm-olive-band-deep:#4A4E2C;
  --alm-terra:#B4472A;        /* family accent / actions / rules */
  --alm-terra-text:#9e3b21;   /* small label text — meets contrast on paper */
  --alm-ochre:#C08A2E;        /* small seasonal / sunlit accents */
  --alm-gold:#C99A3E;
  --alm-gold-bright:#DEB65C;  /* mark/label on the dark band */
  /* board palette additions — quiet supporting tones only (hierarchy unchanged) */
  --alm-sage:#8b9068;         /* muted grey-green supporting accent */
  --alm-clay:#a5583b;         /* warm clay — reserved supporting tone */
  /* rules */
  --alm-rule:rgba(52,50,24,.24);
  --alm-rule-soft:rgba(52,50,24,.13);
  --alm-rule-cream:rgba(244,236,214,.22);
  /* type */
  --alm-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --alm-sans:'Jost',system-ui,-apple-system,sans-serif;
  --alm-read:'Source Serif 4','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --alm-measure:38rem;
  --alm-col:1120px;
  /* Long-form reading rhythm — tuned for Source Serif 4. The reading column
     targets ~60–68 characters per line; spacing gives the body room to breathe. */
  --alm-read-measure:41rem;   /* ~656px → ~62–66 chars */
  --alm-read-size:20px;
  --alm-read-lh:1.8;
  --alm-para-gap:1.36em;
  --alm-read-color:var(--alm-ink);
}

*{box-sizing:border-box;}
.alm-body{margin:0;background:var(--alm-paper);color:var(--alm-ink);font-family:var(--alm-read);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}

/* Page materiality comes from a REAL supplied parchment photograph (not procedural
   noise). It sits BEHIND all content (z-index:0) as a single fixed sheet, so it is
   visibly tactile yet never dirties photographs or panels, and it never tiles/seams.
   Held low (.5) so the page reads FIRST as warm light parchment and only second as
   texture — beautiful uncoated paper, not visibly textured wallpaper. */
.alm-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:var(--alm-paper) url("/assets/almanac/parchment.png") center center / cover no-repeat;}

a{color:var(--alm-terra-text);}
.alm-body img{max-width:100%;height:auto;display:block;}
.alm-mark{display:block;flex:none;}
/* screen-reader-only (accessible page heading without altering the visual design) */
.alm-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

:where(a,button,summary):focus-visible{outline:2px solid var(--alm-terra);outline-offset:3px;border-radius:2px;}

/* ======================================================================== */
/* Almanac header — a dedicated editorial masthead bar (deep ink). Distinct   */
/* from the commercial homestead header; editorial nav + restrained exit.     */
/* ======================================================================== */
/* Compact editorial nav bar (~74–80px tall on wide desktop). The header lockup
   is a subordinate NAVIGATION identity — deliberately smaller than the masthead
   title so the two do not compete (§3). */
.alm-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--alm-ink-deep);color:var(--alm-cream);padding:16px 40px;border-bottom:1px solid #0f0905;}
.alm-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0;}
.alm-brand-text{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.alm-brand-name{font-family:var(--alm-serif);font-weight:600;font-size:19px;letter-spacing:.04em;color:var(--alm-cream);}
.alm-brand-sub{font-family:var(--alm-sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--alm-cream-dim);margin-top:3px;opacity:.85;}
.alm-nav{display:flex;align-items:center;gap:24px;}
.alm-nav-links{display:flex;align-items:center;gap:24px;}
.alm-nav-link{font-family:var(--alm-sans);font-size:14px;letter-spacing:.06em;color:var(--alm-cream);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease;}
.alm-nav-link:hover{border-bottom-color:var(--alm-gold);}
.alm-nav-link[aria-current="page"]{color:var(--alm-gold-bright);border-bottom-color:var(--alm-gold);}
/* Exit to the commercial site — the one strong warm accent in the olive header,
   using the Homestead terracotta button treatment (§4). */
.alm-exit{display:inline-flex;align-items:center;gap:7px;font-family:var(--alm-sans);font-weight:500;font-size:13px;
  letter-spacing:.04em;color:var(--alm-cream);background:var(--alm-terra);text-decoration:none;
  border:0;border-radius:3px;padding:10px 18px;white-space:nowrap;box-shadow:0 3px 0 #7c2717;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.alm-exit:hover{background:#a63f26;transform:translateY(-1px);box-shadow:0 4px 0 #7c2717;}
.alm-exit:focus-visible{outline:2px solid var(--alm-gold-bright);outline-offset:3px;}

/* header hamburger (mobile) */
.alm-burger{display:none;position:relative;}
.alm-burger>summary{list-style:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--alm-rule-cream);border-radius:3px;color:var(--alm-cream);font-size:19px;cursor:pointer;background:transparent;}
.alm-burger>summary::-webkit-details-marker{display:none;}
.alm-burger-menu{position:absolute;top:52px;right:0;min-width:230px;background:var(--alm-ink-deep);
  border:1px solid #0f0905;box-shadow:0 18px 34px -14px rgba(0,0,0,.6);padding:8px 0;display:flex;flex-direction:column;z-index:60;}
.alm-burger-menu a{padding:12px 20px;color:var(--alm-cream);text-decoration:none;font-family:var(--alm-sans);font-size:15px;letter-spacing:.03em;}
.alm-burger-menu a:hover{background:rgba(244,231,206,.06);color:var(--alm-gold-bright);}
.alm-burger-rule{height:1px;background:var(--alm-rule-cream);margin:6px 14px;}
.alm-burger-exit{color:var(--alm-gold-bright)!important;}

/* ======================================================================== */
/* Layout scaffold                                                            */
/* ======================================================================== */
.alm-wrap{position:relative;z-index:1;}
.alm-body-wrap{max-width:var(--alm-col);margin:0 auto;padding:44px 40px 76px;}

/* ======================================================================== */
/* Masthead                                                                   */
/*  - band: the decisive dark editorial opening on the homepage               */
/*  - compact: a slim publication line atop article/archive/about pages       */
/* ======================================================================== */
.alm-masthead-band{background:var(--alm-ink-deep);color:var(--alm-cream);position:relative;overflow:hidden;
  border-bottom:3px solid var(--alm-terra);}
.alm-masthead-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* A strong publication opening, ~25–35% shorter than before so the parchment
   featured story begins significantly sooner (§2). Title authority preserved. */
.alm-masthead-inner{position:relative;max-width:var(--alm-col);margin:0 auto;padding:34px 40px 32px;text-align:center;}
.alm-mast-emblem{margin:0 auto 6px;opacity:.95;}
.alm-mast-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(40px,5.2vw,64px);line-height:.98;
  letter-spacing:.01em;margin:0;color:var(--alm-cream);}
.alm-mast-descriptor{font-family:var(--alm-serif);font-style:italic;font-weight:500;font-size:clamp(18px,2.3vw,23px);
  line-height:1.36;color:#E6D4B2;max-width:36rem;margin:10px auto 0;}
.alm-mast-meta{font-family:var(--alm-sans);text-transform:uppercase;letter-spacing:.28em;font-size:11.5px;
  color:var(--alm-gold-bright);margin:10px 0 0;}

.alm-masthead-compact{max-width:var(--alm-col);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 40px;border-bottom:1px solid var(--alm-rule);}
.alm-mast-link{display:flex;align-items:center;gap:10px;text-decoration:none;}
.alm-mast-name{font-family:var(--alm-serif);font-weight:600;font-size:22px;letter-spacing:.02em;color:var(--alm-ink);}
.alm-mast-place{font-family:var(--alm-sans);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--alm-olive);}

/* ======================================================================== */
/* Meta line + small labels                                                   */
/* ======================================================================== */
.alm-meta{font-family:var(--alm-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--alm-ink-soft);display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.alm-meta .alm-cat{color:var(--alm-terra-text);font-weight:600;}
.alm-meta .alm-place{color:var(--alm-olive);}
.alm-meta .alm-dot{color:var(--alm-stone);}
.alm-meta time{font-variant-numeric:tabular-nums;}
.alm-eyebrow,.alm-kicker{font-family:var(--alm-sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--alm-terra-text);}
/* a short printed rule sets off the cover kicker — a printer/editor's mark (§6, §7) */
.alm-kicker{color:var(--alm-olive);margin-bottom:12px;display:inline-flex;align-items:center;gap:11px;}
.alm-kicker::before{content:"";width:28px;height:2px;flex:none;background:var(--alm-terra);opacity:.85;}

/* shared read-more affordance */
.alm-readmore{display:inline-block;margin-top:20px;font-family:var(--alm-sans);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--alm-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,59,33,.4);padding-bottom:2px;}
.alm-readmore:hover{border-bottom-color:var(--alm-terra);}

/* ======================================================================== */
/* Featured cover story — asymmetrical split (not a stacked image)            */
/* ======================================================================== */
.alm-featured{display:grid;grid-template-columns:1.12fr 1fr;gap:50px;align-items:center;
  padding:22px 0 58px;border-bottom:1px solid var(--alm-rule);}
/* documentary photograph set into the page: a single stone hairline and the
   faintest printed offset — placed on paper, not contained in a UI card (§3). */
.alm-feat-media{position:relative;display:block;overflow:hidden;background:var(--alm-ink-deep);
  border:1px solid var(--alm-stone-deep);box-shadow:3px 4px 0 rgba(120,86,44,.07);}
.alm-feat-media img{width:100%;aspect-ratio:5/4;object-fit:cover;}
.alm-feat-body .alm-meta{margin-bottom:14px;}
.alm-feat-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(37px,4.2vw,55px);line-height:1.04;
  margin:0;letter-spacing:.005em;text-wrap:balance;}
.alm-feat-title a{color:var(--alm-ink);text-decoration:none;}
.alm-feat-title a:hover{color:var(--alm-terra);}
.alm-feat-deck{font-family:var(--alm-serif);font-style:italic;font-size:24px;line-height:1.46;color:var(--alm-ink-soft);margin:18px 0 0;}

/* ======================================================================== */
/* Supporting — two intentionally different weights                           */
/* ======================================================================== */
.alm-supporting{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;padding:46px 0;
  border-bottom:1px solid var(--alm-rule);}
.alm-practical{display:grid;grid-template-columns:154px 1fr;gap:24px;align-items:start;}
.alm-practical-media{display:block;overflow:hidden;border:1px solid var(--alm-stone);}
.alm-practical-media img{width:154px;height:154px;object-fit:cover;}
.alm-practical-body .alm-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:8px;}
.alm-practical-body .alm-eyebrow::before{content:"";width:20px;height:2px;flex:none;background:var(--alm-olive);opacity:.75;}
.alm-practical .alm-meta{margin-bottom:8px;font-size:11px;}
.alm-practical-title{font-family:var(--alm-serif);font-weight:600;font-size:28px;line-height:1.1;margin:0;}
.alm-practical-title a{color:var(--alm-ink);text-decoration:none;}
.alm-practical-title a:hover{color:var(--alm-terra);}
.alm-practical-deck{font-family:var(--alm-serif);font-size:20px;line-height:1.5;color:var(--alm-ink-soft);margin:8px 0 0;}

/* field note — narrower, notebook-like, olive rule + marker, lighter weight */
.alm-fieldnote{border-left:2px solid var(--alm-sage);padding:2px 0 2px 22px;}
.alm-fieldnote-marker{font-family:var(--alm-sans);text-transform:uppercase;letter-spacing:.22em;font-size:11px;
  color:var(--alm-olive);margin-bottom:12px;}
.alm-fieldnote .alm-meta{margin-bottom:8px;font-size:11px;}
.alm-fieldnote-title{font-family:var(--alm-serif);font-weight:600;font-size:23px;line-height:1.12;margin:0;}
.alm-fieldnote-title a{color:var(--alm-ink);text-decoration:none;}
.alm-fieldnote-title a:hover{color:var(--alm-terra);}
.alm-fieldnote-deck{font-family:var(--alm-serif);font-style:italic;font-size:18.5px;line-height:1.5;color:var(--alm-ink-soft);margin:8px 0 0;}

/* ======================================================================== */
/* Section heads + archive access                                             */
/* ======================================================================== */
.alm-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--alm-rule);padding-bottom:10px;margin:46px 0 22px;}
.alm-section-title{font-family:var(--alm-serif);font-weight:600;font-size:27px;margin:0;color:var(--alm-ink);
  display:inline-flex;align-items:center;gap:12px;}
.alm-section-title::before{content:"";width:18px;height:2px;flex:none;background:var(--alm-terra);opacity:.7;}
.alm-archive-link{font-family:var(--alm-sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--alm-terra-text);text-decoration:none;white-space:nowrap;}
.alm-archive-cta{margin:46px 0 4px;text-align:center;font-family:var(--alm-sans);font-size:14px;letter-spacing:.06em;}
.alm-archive-cta a{color:var(--alm-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,59,33,.4);padding-bottom:3px;}
.alm-archive-cta a:hover{border-bottom-color:var(--alm-terra);}

/* ======================================================================== */
/* Editorial index — the archive / related / home-more contents list          */
/* (a publication index, not a card gallery)                                  */
/* ======================================================================== */
.alm-index{border-top:2px solid var(--alm-olive);}
.alm-index-row{display:grid;grid-template-columns:9.5rem 1fr auto;gap:26px;align-items:baseline;
  padding:22px 4px;border-bottom:1px solid var(--alm-rule);text-decoration:none;color:inherit;
  transition:background .16s ease,padding .16s ease;}
.alm-index-row:hover{background:rgba(94,97,56,.09);}
.alm-index-date{font-family:var(--alm-sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--alm-ink-soft);white-space:nowrap;padding-top:4px;position:relative;}
.alm-index-date::before{content:"";position:absolute;left:0;top:.15em;width:9px;height:2px;background:var(--alm-terra);}
.alm-index-date time{display:inline-block;padding-left:16px;}
.alm-index-main{display:block;min-width:0;}
.alm-index-cat{display:block;font-family:var(--alm-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--alm-terra-text);font-weight:600;}
.alm-index-title{display:block;font-family:var(--alm-serif);font-weight:600;font-size:27px;line-height:1.12;color:var(--alm-ink);margin-top:3px;}
.alm-index-row:hover .alm-index-title{color:var(--alm-terra);}
.alm-index-deck{display:block;font-family:var(--alm-serif);font-size:19px;line-height:1.45;color:var(--alm-ink-soft);margin-top:5px;}
.alm-index-arrow{font-family:var(--alm-sans);font-size:18px;color:var(--alm-stone);align-self:center;}
.alm-index-row:hover .alm-index-arrow{color:var(--alm-terra);}
/* field notes read lighter in the index, with a compact field-journal marker */
.alm-index-row.alm-format-field-note{border-left:2px solid var(--alm-olive);padding-left:18px;margin-left:-20px;}
.alm-index-row.alm-format-field-note .alm-index-cat::after{content:"· Field note";color:var(--alm-olive);font-weight:400;}
.alm-index-row.alm-format-field-note .alm-index-cat{color:var(--alm-olive);}
.alm-index-row.alm-format-field-note .alm-index-title{font-size:23px;}

/* archive + about heads */
.alm-archive-head,.alm-about-head{margin:8px 0 8px;}
.alm-archive-head .alm-eyebrow,.alm-about-head .alm-eyebrow{display:block;margin-bottom:8px;}
.alm-archive-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(34px,5vw,52px);margin:0;color:var(--alm-ink);line-height:1;}
.alm-archive-sub{font-family:var(--alm-serif);font-style:italic;font-size:21px;color:var(--alm-ink-soft);margin:8px 0 26px;}

/* ======================================================================== */
/* About page                                                                 */
/* ======================================================================== */
.alm-about{max-width:44rem;margin:0 auto;}
.alm-about-head{text-align:left;margin-bottom:8px;}
.alm-about-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(36px,5.2vw,56px);line-height:1;margin:0;color:var(--alm-ink);}
.alm-about-sub{font-family:var(--alm-sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--alm-olive);margin:12px 0 0;}

/* ======================================================================== */
/* Article                                                                    */
/* ======================================================================== */
.alm-article{max-width:47rem;margin:0 auto;}
/* Opening: metadata, title, deck, byline and lead image each get their own room
   so the deck never crowds the title and the first paragraph is not compressed. */
.alm-article-head{max-width:var(--alm-read-measure);margin:0 auto;text-align:left;}
.alm-article-head .alm-meta{margin-bottom:22px;}
.alm-article-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(36px,5.4vw,56px);line-height:1.04;
  margin:0;letter-spacing:.005em;color:var(--alm-ink);}
.alm-article-deck{font-family:var(--alm-serif);font-style:italic;font-size:clamp(21px,2.7vw,27px);line-height:1.4;
  color:var(--alm-ink-soft);margin:20px 0 0;}
.alm-byline{font-family:var(--alm-sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--alm-olive);margin:22px 0 0;}
.alm-lead-figure{margin:46px auto 0;max-width:52rem;}
.alm-lead-figure img{width:100%;aspect-ratio:var(--alm-lead-ratio,16/10);object-fit:cover;border:1px solid var(--alm-stone);}

/* prose — Source Serif 4, ~68–76 char measure, hospitable leading + spacing */
.alm-prose{max-width:var(--alm-read-measure);margin:44px auto 0;font-family:var(--alm-read);
  font-size:var(--alm-read-size);line-height:var(--alm-read-lh);color:var(--alm-read-color);}
/* Reset block margins on direct children FIRST, then add flow spacing — so the
   paragraph gap actually applies. (A later, higher-specificity `.alm-prose p
   {margin:0}` previously overrode this, collapsing the prose into one wall.) */
.alm-prose>*{margin:0;}
.alm-prose>*+*{margin-top:var(--alm-para-gap);}
.alm-prose a{color:var(--alm-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,59,33,.4);}
.alm-prose a:hover{border-bottom-color:var(--alm-terra);}
.alm-prose strong{font-weight:600;}
.alm-prose em{font-style:italic;}
.alm-prose code{font-family:var(--alm-sans);font-size:.82em;background:rgba(58,40,24,.08);padding:1px 5px;border-radius:2px;}
/* section rhythm: generous space BEFORE a heading, comfortable room after */
.alm-h2{font-family:var(--alm-serif);font-weight:600;font-size:31px;line-height:1.16;margin:2.9em 0 0;color:var(--alm-ink);}
.alm-h3{font-family:var(--alm-serif);font-weight:600;font-size:25px;line-height:1.22;margin:1.9em 0 0;color:var(--alm-ink);}
.alm-prose :is(.alm-h2,.alm-h3)+*{margin-top:.85em;}
.alm-list{margin:1.15em 0 0;padding-left:1.3em;}
.alm-list li{margin:.5em 0;}
.alm-list li::marker{color:var(--alm-olive);}
.alm-quote{margin:1.9em 0 0;padding-left:24px;border-left:2px solid var(--alm-stone);}
.alm-quote p{font-family:var(--alm-serif);font-style:italic;font-size:23px;line-height:1.5;color:var(--alm-ink-soft);margin:0;}

/* pull quote — a restrained framed panel: a quiet stone tint, hairline, and a
   terracotta left accent so it reads as a distinct pull quote without shouting. */
.alm-pull{margin:2.5em auto;max-width:42rem;padding:24px 32px;text-align:left;
  background:rgba(216,199,160,.24);border:1px solid var(--alm-rule-soft);
  border-left:3px solid var(--alm-terra);border-radius:3px;}
.alm-pull p{font-family:var(--alm-serif);font-style:italic;font-weight:500;font-size:clamp(23px,2.9vw,28px);
  line-height:1.36;color:var(--alm-ink-soft);margin:0;}

/* figures inside prose may extend slightly past the text measure, ~2.6em of air */
.alm-figure{margin:2.7em auto;max-width:46rem;}
.alm-figure img{width:100%;height:auto;border:1px solid var(--alm-stone);}
/* Contained portrait figure — a vertical photograph kept from overwhelming the
   reading column: centered, narrower than the prose measure, and height-limited
   on small screens so it never dominates the viewport. The 2:3 aspect-ratio
   reserves the box up front so the lazy-loaded image causes no layout shift,
   and matches the source ratio so nothing is cropped. */
.alm-figure-portrait{max-width:23rem;}
.alm-figure-portrait img{aspect-ratio:2/3;}
@media (max-width:600px){
  .alm-figure-portrait{max-width:min(20rem,78%);}
}
.alm-caption,.alm-lead-figure figcaption{font-family:var(--alm-sans);font-size:13px;font-style:normal;line-height:1.55;
  color:var(--alm-ink-soft);margin-top:12px;padding-left:15px;position:relative;}
.alm-caption::before,.alm-lead-figure figcaption::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--alm-terra);}

/* note / marginal aside (olive) */
.alm-note{margin:2.1em 0;padding:4px 0 4px 22px;border-left:2px solid var(--alm-olive);}
.alm-note p{font-family:var(--alm-serif);font-style:italic;font-size:19px;line-height:1.62;color:var(--alm-ink-soft);margin:0;}

.alm-rule-thin{border:0;height:1px;background:var(--alm-rule);margin:2.8em 0 0;}
.alm-article-foot{max-width:var(--alm-read-measure);margin:40px auto 0;}
.alm-colophon{font-family:var(--alm-sans);font-size:13px;line-height:1.7;color:var(--alm-ink-soft);margin:20px 0 0;text-align:center;letter-spacing:.02em;}
.alm-colophon a{color:var(--alm-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,59,33,.35);}

/* --- format variants ---------------------------------------------------- */
/* Essay: drop cap on the first substantial paragraph, generous measure. */
.alm-prose-essay>p:first-of-type::first-letter{float:left;font-family:var(--alm-serif);font-weight:600;
  font-size:4.1em;line-height:.72;padding:.04em .1em 0 0;color:var(--alm-terra);}
/* Practical: clearer step/list hierarchy, useful details up front. */
.alm-prose-practical{font-size:19.5px;}
.alm-prose-practical .alm-h2{font-size:27px;margin-top:1.9em;padding-top:.6em;border-top:1px solid var(--alm-rule-soft);}
.alm-prose-practical .alm-list{padding-left:1.2em;}
.alm-prose-practical .alm-list-ol li{margin:.6em 0;}
/* Field note: shorter, narrower, no oversized hero; olive marker up top. */
.alm-format-field-note .alm-article{max-width:34rem;}
.alm-format-field-note .alm-article-head::before{content:"Field note";display:block;font-family:var(--alm-sans);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--alm-olive);margin-bottom:12px;}
.alm-format-field-note .alm-lead-figure{max-width:34rem;}
.alm-format-field-note .alm-lead-figure img{aspect-ratio:3/2;}
.alm-prose-field-note{font-size:19px;max-width:34rem;}

/* --- Opening eyebrow + byline separators -------------------------------- */
.alm-article-eyebrow{margin:0 0 14px;display:block;}
.alm-byline-sep{color:var(--alm-stone);margin:0 3px;}
.alm-hebrew-date{opacity:.82;}

/* --- Cover story without a photograph: one centered editorial column ----- */
.alm-featured-textonly{grid-template-columns:1fr;max-width:52rem;margin:0 auto;}

/* --- Thematic break inside prose (the single authored ---) --------------- */
/* One restrained field-journal mark, distinct from the plain colophon rule.
   Kept a real <hr> so assistive tech still announces the section break. */
.alm-prose hr.alm-rule-thin{width:auto;height:auto;background:none;border:0;
  margin:2.9em 0 0;text-align:center;color:var(--alm-terra);}
.alm-prose hr.alm-rule-thin::before{content:"\25C6";display:block;font-size:11px;line-height:1;opacity:.5;}

/* ======================================================================== */
/* Inline authorial annotations (editorial thought bubbles)                   */
/* ======================================================================== */
/* The trigger is a quiet, deliberate mark — an ochre highlighter wash + a
   restrained terracotta underline — clearly NOT a blue link, a numbered
   citation, or a browser-default yellow highlight. Without scripting the aside
   reads inline in parentheses (below); with scripting it becomes a compact
   anchored popover opened on hover / focus / tap. */
.alm-annot{position:relative;}
.alm-annot-mark{font-style:inherit;}
/* No-JS baseline: the note reads inline, parenthetically, after the phrase. */
.alm-annot-pop{color:var(--alm-ink-soft);}
.alm-annot-pop::before{content:" (";}
.alm-annot-pop::after{content:")";}

/* Enhanced: the phrase becomes a button; the note becomes a positioned popover. */
.alm-annot-js .alm-annot-trigger{display:inline;font:inherit;color:inherit;margin:0;padding:0 .06em;
  background:transparent;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:1px;
  background-image:linear-gradient(to top, rgba(192,138,46,.34) .30em, transparent .30em);
  border-bottom:1px dashed rgba(158,59,33,.6);transition:background-image .15s ease;}
.alm-annot-js .alm-annot-trigger em{font-style:italic;}
.alm-annot-js .alm-annot-trigger:hover,
.alm-annot-js .alm-annot-trigger[aria-expanded="true"]{
  background-image:linear-gradient(to top, rgba(192,138,46,.55) .34em, transparent .34em);
  border-bottom-color:var(--alm-terra);}
.alm-annot-js .alm-annot-trigger:focus-visible{outline:2px solid var(--alm-terra);outline-offset:2px;}
.alm-annot-js .alm-annot-pop{display:none;position:absolute;left:0;top:calc(100% + 9px);z-index:30;
  width:max-content;max-width:min(340px,86vw);
  font-family:var(--alm-read);font-style:normal;font-weight:400;font-size:15px;line-height:1.52;
  letter-spacing:normal;text-transform:none;text-align:left;color:var(--alm-ink);
  background:var(--alm-paper-2);border:1px solid var(--alm-stone-deep);border-top:2px solid var(--alm-terra);
  border-radius:3px;padding:12px 15px 13px;box-shadow:0 12px 30px rgba(58,40,20,.24);}
.alm-annot-js .alm-annot-pop::before,.alm-annot-js .alm-annot-pop::after{content:none;}
.alm-annot-js .alm-annot.is-open .alm-annot-pop{display:block;}

/* ======================================================================== */
/* Subscribe + Write back                                                     */
/* ======================================================================== */
/* A quiet parchment invitation — part of the journal, not a conversion banner.
   Light-forward so dark olive is reserved for the nav and footer (§4, §8). */
/* Editorial matter printed directly onto the page — no tinted card, no box, no
   noise panel. The supplied hand rule is the element that organizes the note. */
.alm-subscribe{position:relative;margin:52px auto 10px;max-width:var(--alm-col);padding:12px 40px 4px;color:var(--alm-ink);}
.alm-subscribe-inner{position:relative;max-width:38rem;margin:0 auto;text-align:center;}
.alm-sub-eyebrow{font-family:var(--alm-sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--alm-terra-text);margin:0 0 12px;}
.alm-sub-mark{margin:0 auto 14px;}
.alm-sub-title{font-family:var(--alm-serif);font-weight:600;font-size:clamp(30px,4vw,42px);margin:0;color:var(--alm-ink);}
.alm-sub-copy{font-family:var(--alm-serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--alm-ink-soft);margin:12px 0 0;}
.alm-sub-action{display:inline-block;margin:24px 0 0;font-family:var(--alm-sans);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--alm-cream);background:var(--alm-terra);text-decoration:none;
  padding:14px 28px;border-radius:2px;box-shadow:0 3px 0 #7c2717;transition:transform .18s ease,box-shadow .18s ease;}
.alm-sub-action:hover{transform:translateY(-2px);box-shadow:0 5px 0 #7c2717;}
.alm-sub-fine{font-family:var(--alm-sans);font-size:12px;line-height:1.5;color:var(--alm-olive);margin:18px 0 0;}

.alm-writeback{max-width:36rem;margin:54px auto 0;text-align:center;}
.alm-wb-title{font-family:var(--alm-serif);font-weight:600;font-size:29px;margin:0;color:var(--alm-ink);}
.alm-wb-copy{font-family:var(--alm-serif);font-style:italic;font-size:21px;color:var(--alm-ink-soft);margin:10px 0 0;}
.alm-wb-email{font-family:var(--alm-sans);font-size:15px;letter-spacing:.04em;margin:12px 0 0;}
.alm-wb-email a{color:var(--alm-terra-text);text-decoration:none;border-bottom:1px solid rgba(158,59,33,.4);padding-bottom:2px;}

/* ======================================================================== */
/* Related                                                                    */
/* ======================================================================== */
.alm-related{max-width:46rem;margin:64px auto 0;border-top:1px solid var(--alm-rule);padding-top:8px;}
.alm-related-title{font-family:var(--alm-serif);font-weight:600;font-size:25px;margin:22px 0 6px;color:var(--alm-ink);}

/* ======================================================================== */
/* Placeholder flag (clear, not wireframe)                                    */
/* ======================================================================== */
.alm-placeholder-flag{font-family:var(--alm-sans);font-size:12px;letter-spacing:.04em;color:var(--alm-terra-text);
  background:rgba(180,71,42,.07);border:1px dashed rgba(180,71,42,.5);border-radius:2px;padding:7px 12px;margin:14px 0 0;display:inline-block;}
.alm-article-wrap>.alm-placeholder-flag{display:block;margin:20px auto 0;max-width:44rem;text-align:center;}

/* ======================================================================== */
/* Almanac footer — a dedicated editorial footer (deep ink)                   */
/* ======================================================================== */
.alm-footer{position:relative;z-index:1;background:var(--alm-ink-deeper);color:var(--alm-cream-dim);margin-top:24px;border-top:3px solid var(--alm-olive-band);overflow:hidden;}
/* faint printed tooth on the colophon ground — ties the footer to the paper (§12) */
.alm-footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.alm-footer>*{position:relative;z-index:1;}
.alm-footer-inner{max-width:var(--alm-col);margin:0 auto;padding:52px 40px 28px;display:grid;
  grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;}
/* Footer carries the one DISPLAY-mode emblem (~72px) — the artwork has room to
   read here, and its cream edge separates cleanly on the deep olive ground (§5). */
.alm-footer-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.alm-footer-name{font-family:var(--alm-serif);font-weight:600;font-size:22px;letter-spacing:.03em;color:var(--alm-cream);}
.alm-footer-descriptor{font-family:var(--alm-serif);font-style:italic;font-size:19px;line-height:1.45;color:#D8C3A0;margin:14px 0 0;max-width:26rem;}
.alm-footer-line{font-family:var(--alm-sans);font-size:12.5px;line-height:1.6;color:var(--alm-cream-dim);margin:14px 0 0;max-width:26rem;}
.alm-footer-cols{display:flex;gap:52px;flex-wrap:wrap;}
.alm-footer-col{display:flex;flex-direction:column;gap:10px;}
.alm-footer-head{font-family:var(--alm-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--alm-gold);margin-bottom:2px;}
.alm-footer-col a{font-family:var(--alm-sans);font-size:14px;color:var(--alm-cream-dim);text-decoration:none;}
.alm-footer-col a:hover{color:var(--alm-cream);}
.alm-footer-exit{color:var(--alm-gold-bright)!important;}
.alm-footer-base{max-width:var(--alm-col);margin:0 auto;padding:16px 40px 34px;border-top:1px solid var(--alm-rule-cream);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--alm-sans);font-size:12.5px;letter-spacing:.04em;color:var(--alm-cream-dim);}
.alm-footer-base a{color:var(--alm-cream-dim);text-decoration:none;border-bottom:1px solid var(--alm-rule-cream);padding-bottom:2px;}
.alm-footer-base a:hover{color:var(--alm-cream);}

/* ======================================================================== */
/* Responsive                                                                 */
/* ======================================================================== */
/* header: switch to hamburger before the editorial nav crowds the exit link */
@media (max-width:820px){
  .alm-nav-links{display:none;}
  .alm-exit{display:none;}
  .alm-burger{display:block;}
  .alm-header{padding:14px 20px;}
  .alm-brand-sub{display:none;}
}
@media (max-width:980px){
  .alm-featured{grid-template-columns:1fr;gap:26px;}
  .alm-feat-media img{aspect-ratio:16/10;}
  .alm-supporting{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:820px){
  /* The article page has no .alm-body-wrap around its reading content, so give
     that content comfortable side margins directly (the compact masthead keeps
     its own). Keeps the body off the screen edge on tablets and phones (§5). */
  .alm-article-wrap>*:not(.alm-masthead-compact){padding-left:26px;padding-right:26px;}
  .alm-body-wrap{padding:34px 26px 60px;}
  .alm-masthead-inner{padding:34px 26px 32px;}
  .alm-masthead-compact{padding:16px 26px;}
  .alm-subscribe,.alm-footer-inner,.alm-footer-base{padding-left:26px;padding-right:26px;}
  .alm-footer-inner{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:600px){
  .alm-article-wrap>*:not(.alm-masthead-compact){padding-left:22px;padding-right:22px;}
  .alm-body-wrap{padding:26px 22px 52px;}
  .alm-masthead-inner{padding:30px 22px 28px;}
  .alm-masthead-compact{padding:14px 22px;}
  .alm-practical{grid-template-columns:1fr;gap:16px;}
  .alm-practical-media img{width:100%;height:auto;aspect-ratio:3/2;}
  .alm-prose{font-size:19px;line-height:1.76;}
  .alm-pull p{font-size:25px;}
  .alm-index-row{grid-template-columns:1fr;gap:6px;padding:18px 2px;}
  .alm-index-arrow{display:none;}
  .alm-index-date{padding-top:0;}
  .alm-index-row.alm-format-field-note{margin-left:0;padding-left:16px;}
  .alm-subscribe,.alm-footer-inner,.alm-footer-base{padding-left:20px;padding-right:20px;}
  .alm-footer-cols{gap:32px;}
  .alm-prose-essay>p:first-of-type::first-letter{font-size:3.4em;}
}

@media (prefers-reduced-motion: reduce){
  .alm-body *{transition:none !important;animation:none !important;}
}

/* ======================================================================== */
/* Final pre-launch hardening additions                                       */
/* ======================================================================== */
/* §12 — the approved mark in the Almanac's own nav lockup. Height is set inline
   by almanacMark(); width follows the emblem ratio so it is never squashed. */
/* Fixed, modest height — specific enough to beat `.alm-body img{height:auto}`,
   which otherwise let the tall emblem render at intrinsic size and dominate the
   header. Width follows the emblem ratio; never stretched. */
.alm-header .alm-brand-mark{height:30px;width:auto;aspect-ratio:auto;flex:none;align-self:center;}
@media (max-width:640px){ .alm-header .alm-brand-mark{height:26px;} }

/* §13 — graceful lead-image fallback: holds the lead aspect ratio with the
   emblem over the title, so a real photograph drops in later with no layout
   change and nothing ever reads as broken or a dev placeholder. */
.alm-feat-media-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  aspect-ratio:5/4;padding:26px;text-align:center;text-decoration:none;
  background:radial-gradient(circle at 50% 34%, #34361f, #24261a 78%);border:1px solid var(--alm-stone);}
.alm-feat-fallback-title{font-family:var(--alm-serif);font-weight:600;font-size:26px;line-height:1.14;color:var(--alm-cream);max-width:20ch;}
/* CRITICAL: the emblem inside the fallback is an <img class="alm-mark">, and the
   cover rule `.alm-feat-media img{width:100%;aspect-ratio:5/4;object-fit:cover}`
   was stretching it to fill the whole well (the "giant logo"). Render it at a
   modest, natural-ratio size instead so the placeholder reads as balanced. */
.alm-feat-media-fallback img.alm-mark{width:auto;height:54px;aspect-ratio:auto;object-fit:contain;}
.alm-featured-secondary .alm-feat-media-fallback img.alm-mark{height:40px;}

/* §13 — non-cover essays as image-bearing "Next entry" blocks, reusing the
   cover split at a slightly quieter scale. Stacks on mobile via .alm-featured. */
.alm-secondaries{margin-top:4.4em;display:grid;gap:3.6em;}
.alm-featured-secondary{grid-template-columns:1fr 1.08fr;gap:44px;}
.alm-featured-secondary .alm-feat-title{font-size:clamp(29px,3.3vw,41px);}
.alm-featured-secondary .alm-feat-deck{font-size:21px;}
.alm-featured-secondary .alm-feat-media-fallback{aspect-ratio:5/4;}

/* §14 — with the duplicate publication line removed from article pages, give the
   article header deliberate room to breathe beneath the nav. */
.alm-article-wrap>.alm-article{padding-top:2.4rem;}
@media (max-width:640px){ .alm-article-wrap>.alm-article{padding-top:1.3rem;} }

/* Final polish — Almanac section breaks (§1).
   A short, left-aligned printer's hairline above section H2s: a subtle,
   deliberate transition. The heading's own 2.9em top margin supplies the air
   above; the rule sits ~14px above the heading text. Suppressed on the opening
   section heading and on any heading that already follows a thematic-break rule,
   so it never doubles an existing divider. No full-width rules, diamonds, or icons. */
.alm-prose .alm-h2::before{content:"";display:block;width:52px;height:1px;
  background:rgba(180,71,42,.55);margin:0 0 14px;}
.alm-prose>.alm-h2:first-child::before{display:none;}
.alm-prose hr.alm-rule-thin + .alm-h2::before{display:none;}

/* Final polish — Almanac photo plate (§2).
   A photograph mounted onto the field-journal page: a warm cream mat, a muted
   stone keyline, and a very subtle offset shadow — square corners, no literal
   frame. The photograph stays primary; captions remain below, associated. */
.alm-figure img, .alm-lead-figure img{
  background:var(--alm-paper);
  padding:7px;
  border:1px solid var(--alm-stone-deep);
  box-shadow:0 3px 9px -4px rgba(38,34,26,.22);
  border-radius:1px;
}
@media (max-width:600px){ .alm-figure img, .alm-lead-figure img{padding:4px;} }
