/* ══════════════════════════════════════════════════════════════
   Single post. Also carries the 404 rules, which were in this
   sheet before and are unchanged.

   The header sits on evergreen partly for design and partly
   because the fixed navigation is transparent until the page
   scrolls, with ivory links. On an ivory article page those
   links were invisible on arrival.

   This sheet declares its own background classes and
   placeholder system. homepage.css loads sitewide and supplies
   neither.
   ══════════════════════════════════════════════════════════════ */

.on-deep{background:var(--green-deep);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent)}
.on-ivory{background:var(--ivory)}
.on-stone{background:var(--stone)}

.ph{position:relative;background:repeating-linear-gradient(45deg,rgba(31,91,71,.10) 0 14px,rgba(31,91,71,.03) 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.ph span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A6224;
  background:rgba(242,239,230,.9);border:1px dashed rgba(201,162,74,.7);padding:9px 12px}
img.ph{display:block;width:100%;height:100%;object-fit:cover;padding:0;background:none;border:0}
.ph.dark{background:repeating-linear-gradient(45deg,#20463a 0 14px,#1c4034 14px 28px)}
.ph.dark span{color:var(--brand-accent);background:rgba(23,63,50,.85);border-color:rgba(201,162,74,.6)}

.jmi-single{background:var(--ivory)}


/* ══ 01 HEADER. The featured image carries the title, so the page does not
   repeat it as type. Image left at its native 16:10, description and details
   right. A visually hidden h1 keeps the title in the document for search
   engines and screen readers, and the image alt carries it as well. ══ */
.ahead{background:var(--green-deep);padding:calc(var(--nav-h) + 48px) 0 52px}
.ahead .back{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--brand-accent);margin-bottom:30px}
.ahead .back .ar{transition:transform .35s var(--ease)}
.ahead .back:hover .ar{transform:translateX(-6px)}
.ahead-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.ahead-img{margin:0}
.ahead-img img,.ahead-img .ph{display:block;width:100%;aspect-ratio:16/10;height:auto;
  border:1px solid rgba(201,162,74,.55)}
.ahead-img img{object-fit:cover}
.ahead-copy .dek{font-size:19px;color:var(--ivory);line-height:1.6}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ameta{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(242,239,230,.24)}
.ameta div{padding-right:30px}
.ameta div + div{padding-left:30px;border-left:1px solid rgba(242,239,230,.24)}
.ameta .k{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(242,239,230,.5)}
.ameta .v{display:block;font-size:14px;color:var(--ivory);margin-top:6px}

/* ══ 03 BODY ══ */
.abody{padding:64px 0 84px}
.agrid{display:grid;grid-template-columns:1fr 230px;gap:70px;align-items:start}

.prose{max-width:68ch}
.prose > p{font-size:17.5px;color:var(--muted);line-height:1.8;margin-top:20px}
.prose > p:first-child{margin-top:0}
.prose .lede{font-size:20px;color:var(--ink);line-height:1.68}
.prose h2{font-size:clamp(23px,2.4vw,30px);color:var(--green);margin-top:46px;padding-top:22px;
  border-top:1px solid rgba(31,91,71,.2)}
.prose h3{font-size:20px;color:var(--ink);margin-top:32px}
.prose ul,.prose ol{margin:20px 0 0;padding:0 0 0 4px;list-style:none}
.prose ol{counter-reset:n}
.prose li{position:relative;padding:7px 0 7px 26px;font-size:17px;color:var(--muted);line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  background:var(--brand-accent)}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:7px;
  font-family:var(--font-display);font-size:13px;color:var(--brand-accent)}
.prose a{color:var(--green);font-weight:700;border-bottom:1px solid rgba(201,162,74,.7)}
.prose a:hover{color:#7A6224}
.prose strong{color:var(--ink)}
.prose blockquote{margin:34px 0 0;padding:6px 0 6px 28px;border-left:2px solid var(--brand-accent)}
.prose blockquote p{font-family:var(--font-display);font-size:22px;line-height:1.5;color:var(--green)}
.prose figure{margin:38px 0 0}
.prose figure .ph{aspect-ratio:16/9}
.prose figcaption{font-size:12px;color:var(--quiet);margin-top:10px}
.prose hr{border:0;border-top:1px solid rgba(31,91,71,.2);margin:44px 0 0}

/* pull out box for facts and addresses */
.factbox{background:#fff;border:1px solid rgba(31,91,71,.2);border-left:3px solid var(--brand-accent);
  padding:22px 26px;margin-top:34px}
.factbox h3{font-family:var(--font-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--quiet);margin:0}
.factbox p{font-size:16px;color:var(--ink);margin-top:10px;line-height:1.65}

/* ══ RAIL ══ */
.rail{position:sticky;top:calc(var(--nav-h) + 26px)}
.rail-block + .rail-block{margin-top:30px;padding-top:26px;border-top:1px solid rgba(31,91,71,.2)}
.rail h4{font-family:var(--font-body);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--quiet);margin:0 0 14px}
.railtxt{font-size:14px;color:var(--muted);line-height:1.6}
.raillink{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--green)}
.raillink .ar{transition:transform .35s var(--ease)}
.raillink:hover .ar{transform:translateX(6px)}
.share{display:flex;gap:9px;flex-wrap:wrap}

/* ══ 04 CTA IN FLOW ══ */
.acta{background:var(--green-deep);padding:44px 46px;margin-top:52px}
.acta .eyebrow{color:var(--brand-accent)}
.acta h2{font-size:clamp(22px,2.4vw,30px);color:var(--ivory);max-width:22ch;margin-top:14px}
.acta p{font-size:16px;color:rgba(242,239,230,.82);max-width:52ch;margin-top:14px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:15px 30px;border:1px solid currentColor;transition:background .35s var(--ease),color .35s var(--ease)}
.btn-solid{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--green-deep)}
.btn-solid:hover{background:var(--ivory);border-color:var(--ivory)}
.btn-ghost{color:var(--ivory)}
.btn-ghost:hover{background:var(--ivory);color:var(--green-deep)}

/* ══ 05 PREV NEXT ══ */
.pn{border-top:1px solid rgba(31,91,71,.22);display:grid;grid-template-columns:1fr 1fr}
.pn a{padding:30px 34px;display:block;transition:background .35s var(--ease)}
.pn a:hover{background:#fff}
.pn a + a{border-left:1px solid rgba(31,91,71,.22)}
.pn .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.pn h3{font-size:19px;color:var(--green);margin-top:10px;max-width:26ch}
.pn .nx{text-align:right}

/* ══ 06 KEEP READING. An index on evergreen, not another card grid. The article
   already carries its own imagery, and the news page is where cards belong. ══ */
.kr{background:var(--green-deep);padding:62px 0 68px}
.kr-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid rgba(242,239,230,.24)}
.kr-head .eyebrow{color:var(--brand-accent)}
.kr-all{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:rgba(242,239,230,.72)}
.kr-all .ar{transition:transform .35s var(--ease)}
.kr-all:hover{color:var(--brand-accent)}
.kr-all:hover .ar{transform:translateX(6px)}
.kr-list{list-style:none;margin:0;padding:0;counter-reset:none}
.kr-list li{border-bottom:1px solid rgba(242,239,230,.16)}
.kr-list a{display:grid;grid-template-columns:52px 1fr auto 30px;gap:22px;align-items:baseline;
  padding:24px 0 24px 0;transition:padding .4s var(--ease)}
.kr-list a:hover{padding-left:16px}
.kr-list .n{font-family:var(--font-display);font-size:14px;color:var(--brand-accent)}
.kr-list .t{font-family:var(--font-display);font-size:clamp(19px,2.1vw,26px);color:var(--ivory);
  line-height:1.25;transition:color .35s var(--ease)}
.kr-list a:hover .t{color:var(--brand-accent)}
.kr-list .d{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:rgba(242,239,230,.5);white-space:nowrap}
.kr-list .ar{color:var(--brand-accent);text-align:right;transition:transform .35s var(--ease)}
.kr-list a:hover .ar{transform:translateX(7px)}


@media(max-width:1024px){
  :root{--pad:24px}
  .ahead-grid{grid-template-columns:1fr;gap:30px}
  .agrid{grid-template-columns:1fr;gap:44px}
  .rail{position:static;display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .rail-block + .rail-block{margin-top:0;padding-top:0;border-top:0}
  .kr-list a{grid-template-columns:38px 1fr;gap:14px}
  .kr-list .d{grid-column:2}
  .kr-list .ar{display:none}
  .pn{grid-template-columns:1fr}
  .pn a + a{border-left:0;border-top:1px solid rgba(31,91,71,.22)}
  .pn .nx{text-align:left}
}
@media(max-width:640px){
  .rail{grid-template-columns:1fr}
  .acta{padding:32px 26px}
}

/* Share controls are anchors now, apart from copy link. */
.share a,.share button{width:38px;height:38px;border:1px solid rgba(31,91,71,.3);background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--green);padding:0;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.share a:hover,.share button:hover{background:var(--green);color:var(--ivory);border-color:var(--green)}
.share svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.copied{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--green);margin-top:10px}
.copied[hidden]{display:none}
.railphone{color:var(--green);font-weight:700}

/* The editor emits plain markup, so the prose rules have to reach it. */
.prose img{max-width:100%;height:auto;display:block;margin-top:34px}
.prose > ul,.prose > ol{max-width:66ch}
.prose table{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid rgba(31,91,71,.16)}
.prose th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
  background:var(--stone)}

/* ══ 404, unchanged ══ */
.jmi-404 .err{padding:calc(var(--nav-h) + 120px) 0 130px;background:var(--green-deep);color:var(--ivory)}
.jmi-404 h1{font-size:clamp(32px,4vw,56px);color:var(--ivory);margin-top:18px}
.jmi-404 p{color:rgba(242,239,230,.85);font-size:17px;max-width:48ch;margin-top:20px}
.jmi-404 .err-links{display:flex;flex-wrap:wrap;gap:26px;margin-top:40px}
.jmi-404 .alink{color:var(--brand-accent)}