/* ============================================================
   Joe's Daily V5 — "The Red Rail"
   Token contract: no raw colour, size, or duration values
   appear anywhere below :root. Change the brand here, once.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
/* Newsreader is enqueued only on single posts — see inc/enqueue.php */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* --- Colour ------------------------------------------------
     One dominant hue (the logo red) with two working variants.
     --jd-red      brand surface, large areas only
     --jd-red-ink  anything carrying small text (AA-safe: 5.5:1)
     --jd-red-deep pressed / hover state
     ---------------------------------------------------------- */
  --jd-red:#F30000;
  --jd-red-ink:#D40000;
  --jd-red-deep:#A80000;
  --jd-red-wash:#FDECEA;

  --jd-ink:#141414;
  --jd-ink-2:#4A4A4A;
  --jd-ink-3:#696969;          /* AA on paper (5.4) and on surface (4.9) */
  --jd-ink-3-inv:#A8A8A8;      /* muted text on --jd-night (7.7:1) */
  --jd-paper:#FFFFFF;
  --jd-surface:#F2F0ED;
  --jd-surface-2:#E7E3DE;
  --jd-rule:#DCD7D0;
  --jd-night:#141414;
  --jd-night-2:#242424;

  --jd-focus:#0B5FFF;
  --jd-success:#136F3F;
  --jd-warning:#8A5A00;
  --jd-danger:#B3261E;

  --jd-scrim:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.15) 42%,rgba(20,20,20,.82) 100%);
  --jd-scrim-flat:rgba(20,20,20,.55);

  /* --- Type -------------------------------------------------- */
  --jd-font-display:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --jd-font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --jd-font-ui:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --jd-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --jd-text-2xs:.6875rem; --jd-leading-2xs:1.2;
  --jd-text-xs:.75rem;    --jd-leading-xs:1.3;
  --jd-text-sm:.8125rem;  --jd-leading-sm:1.45;
  --jd-text-base:1rem;    --jd-leading-base:1.6;
  --jd-text-md:1.1875rem; --jd-leading-md:1.68;
  --jd-text-lg:1.5rem;    --jd-leading-lg:1.25;
  --jd-text-xl:1.875rem;  --jd-leading-xl:1.15;
  --jd-text-2xl:2.5rem;   --jd-leading-2xl:1.06;
  --jd-text-3xl:3.5rem;   --jd-leading-3xl:.98;
  --jd-text-4xl:4.5rem;   --jd-leading-4xl:.94;

  --jd-track-tight:-.03em;
  --jd-track-snug:-.015em;
  --jd-track-wide:.08em;
  --jd-track-wider:.14em;

  /* --- Space ------------------------------------------------- */
  --jd-space-1:.25rem; --jd-space-2:.5rem;  --jd-space-3:.75rem;
  --jd-space-4:1rem;   --jd-space-5:1.25rem;--jd-space-6:1.5rem;
  --jd-space-8:2rem;   --jd-space-10:2.5rem;--jd-space-12:3rem;
  --jd-space-16:4rem;  --jd-space-20:5rem;  --jd-space-24:6rem;

  /* --- Measure ----------------------------------------------- */
  --jd-feed-w:1024px;      /* the index column            */
  --jd-read-w:760px;       /* standard post reading column */
  --jd-read-w-wide:880px;  /* travel guide reading column  */
  --jd-card-media:674px;   /* card image track            */
  --jd-card-text:350px;    /* card text track             */
  --jd-card-h:420px;
  --jd-rail-w:34px;        /* the Red Rail                */
  --jd-topbar-h:88px;      /* masthead at rest            */
  --jd-topbar-h-compact:60px;
  --jd-gutter:clamp(1rem,4vw,2.5rem);

  /* --- Depth (square by decree — the logo is a stamp) -------- */
  --jd-radius:0px;
  --jd-shadow-sm:0 1px 2px rgba(20,20,20,.06);
  --jd-shadow-md:0 6px 18px rgba(20,20,20,.10);
  --jd-shadow-lg:0 18px 48px rgba(20,20,20,.16);
  --jd-border:1px solid var(--jd-rule);

  /* --- Motion ------------------------------------------------ */
  --jd-duration-fast:120ms;
  --jd-duration-base:220ms;
  --jd-duration-slow:420ms;
  --jd-ease-out:cubic-bezier(.2,.7,.3,1);
  --jd-ease-in-out:cubic-bezier(.6,0,.3,1);

  --jd-z-rail:20; --jd-z-header:60; --jd-z-drawer:80; --jd-z-skip:100;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--jd-topbar-h) + var(--jd-space-4))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  background:var(--jd-paper);
  color:var(--jd-ink);
  font-family:var(--jd-font-ui);
  font-size:var(--jd-text-base);
  line-height:var(--jd-leading-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,video,svg,canvas{max-width:100%;display:block}
img,video{height:auto}
/* Classic-editor posts paste raw <iframe width="560">. Nothing in the reset
   was containing those, and they are the single biggest source of a page
   that scrolls sideways on a phone. */
iframe,embed,object{max-width:100%;border:0}
a{color:var(--jd-red-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--jd-red-deep)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--jd-font-display);font-weight:900;letter-spacing:var(--jd-track-tight);line-height:var(--jd-leading-xl)}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
hr{border:0;border-top:var(--jd-border);margin:var(--jd-space-10) 0}

/* ---------- Focus: designed, never a default outline ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--jd-focus);
  outline-offset:2px;
}
.jd-card:focus-within{outline:3px solid var(--jd-focus);outline-offset:3px}

::selection{background:var(--jd-red);color:var(--jd-paper)}

/* ---------- Utilities ---------- */
.jd-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.jd-skip{
  position:absolute;left:var(--jd-space-4);top:var(--jd-space-4);
  z-index:var(--jd-z-skip);
  transform:translateY(-200%);
  background:var(--jd-ink);color:var(--jd-paper);
  padding:var(--jd-space-3) var(--jd-space-5);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);text-decoration:none;
  transition:transform var(--jd-duration-base) var(--jd-ease-out);
}
.jd-skip:focus{transform:translateY(0);color:var(--jd-paper)}

.jd-shell{
  width:min(var(--jd-feed-w),100% - var(--jd-gutter) * 2);
  margin-inline:auto;
}
.jd-shell--read{width:min(var(--jd-read-w),100% - var(--jd-gutter) * 2)}
.jd-shell--wide{width:min(var(--jd-read-w-wide),100% - var(--jd-gutter) * 2)}

/* ---------- The eyebrow: category / kicker ---------- */
.jd-kicker{
  min-height:24px;
  font-family:var(--jd-font-ui);
  font-size:var(--jd-text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--jd-track-wider);
  color:var(--jd-red-ink);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--jd-space-2);
}
.jd-kicker:hover{color:var(--jd-red-deep);text-decoration:underline}

/* ---------- Buttons ---------- */
.jd-btn{
  --_bg:var(--jd-ink); --_fg:var(--jd-paper); --_bd:var(--jd-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--jd-space-2);
  min-height:44px;
  padding:var(--jd-space-3) var(--jd-space-6);
  background:var(--_bg);color:var(--_fg);
  border:2px solid var(--_bd);border-radius:var(--jd-radius);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--jd-duration-fast) var(--jd-ease-out),
             color var(--jd-duration-fast) var(--jd-ease-out),
             border-color var(--jd-duration-fast) var(--jd-ease-out),
             transform var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-btn:hover{--_bg:var(--jd-red-ink);--_bd:var(--jd-red-ink);--_fg:var(--jd-paper)}
.jd-btn:active{--_bg:var(--jd-red-deep);--_bd:var(--jd-red-deep);transform:translateY(1px)}
.jd-btn[disabled],.jd-btn[aria-disabled="true"]{
  --_bg:var(--jd-surface-2);--_fg:var(--jd-ink-3);--_bd:var(--jd-surface-2);
  cursor:not-allowed;pointer-events:none;
}
.jd-btn--ghost{--_bg:transparent;--_fg:var(--jd-ink);--_bd:var(--jd-ink)}
.jd-btn--ghost:hover{--_bg:var(--jd-ink);--_fg:var(--jd-paper)}
.jd-btn--red{--_bg:var(--jd-red-ink);--_fg:var(--jd-paper);--_bd:var(--jd-red-ink)}
.jd-btn--red:hover{--_bg:var(--jd-red-deep);--_bd:var(--jd-red-deep)}
.jd-btn--wide{width:100%}
.jd-btn.is-loading{pointer-events:none;position:relative;color:transparent}
.jd-btn.is-loading::after{
  content:"";position:absolute;inset:50% auto auto 50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid var(--jd-paper);border-top-color:transparent;border-radius:50%;
  animation:jd-spin var(--jd-duration-slow) linear infinite;
}
@keyframes jd-spin{to{transform:rotate(360deg)}}

/* ============================================================
   MASTHEAD — sticky, and it earns the space it takes
   ------------------------------------------------------------
   Pinned to the top, but it shrinks once you are past the lead
   and gets out of the way entirely when you scroll down. Scroll
   up even slightly and it is back. On a phone that means the
   nav is always one flick away without ever costing you a strip
   of screen while you are actually reading.
   ============================================================ */
.jd-topbar{
  position:sticky;top:0;z-index:var(--jd-z-header);
  background:var(--jd-paper);
  transition:transform var(--jd-duration-base) var(--jd-ease-out),
             box-shadow var(--jd-duration-base) var(--jd-ease-out);
}
.jd-topbar[data-hidden="true"]{transform:translateY(-100%)}
.jd-topbar[data-compact="true"]{box-shadow:var(--jd-shadow-md)}
.jd-topbar[data-compact="true"] .jd-masthead__inner{min-height:var(--jd-topbar-h-compact)}
.jd-topbar[data-compact="true"] .jd-stamp img{max-height:32px}
.jd-stamp{max-height:100%}
.jd-topbar[data-compact="true"] .jd-stamp__text{font-size:var(--jd-text-base)}
/* The bar is held visible while a panel is open by initStickyHeader(),
   which sets data-hidden="false" — no :has() needed. */

.jd-masthead{
  border-bottom:var(--jd-border);
  background:var(--jd-paper);
}
.jd-masthead__inner{
  width:min(1360px,100% - var(--jd-gutter) * 2);
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--jd-space-6);
  min-height:var(--jd-topbar-h);
  transition:min-height var(--jd-duration-base) var(--jd-ease-out);
}
/* The stamp: the logo is a solid red block with knocked-out type. */
.jd-stamp{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--jd-red);
  padding:var(--jd-space-3) var(--jd-space-5);
  text-decoration:none;
  transition:background var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-stamp:hover{background:var(--jd-red-deep)}
.jd-stamp__text{
  font-family:var(--jd-font-display);
  font-weight:900;
  font-size:var(--jd-text-lg);
  line-height:1;
  letter-spacing:var(--jd-track-snug);
  text-transform:uppercase;
  color:var(--jd-paper);
  white-space:nowrap;
}
.jd-stamp img{max-height:44px;width:auto}
/* The custom logo is already a red block with knocked-out type, so the
   stamp must not paint a second one behind it. This class is set in
   header.php — NOT with :has() — because a rule whose selector the
   browser does not understand is dropped whole, and on an older iOS
   that left a red box padded around an already-red logo. */
.jd-stamp--image{padding:0;background:none}
.jd-stamp--image:hover{background:none;opacity:.85}

/* --- Primary nav --- */
.jd-nav{justify-self:center}
.jd-nav__list{list-style:none;display:flex;align-items:center;gap:var(--jd-space-6)}
.jd-nav__item{position:relative}
.jd-nav__link{
  display:inline-block;
  padding:var(--jd-space-3) 0;
  font-family:var(--jd-font-ui);
  font-size:var(--jd-text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--jd-track-wide);
  color:var(--jd-ink);
  text-decoration:none;
  position:relative;
}
/* the red underscore — the rail motif at nav scale */
.jd-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--jd-space-1);
  height:3px;background:var(--jd-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--jd-duration-base) var(--jd-ease-out);
}
.jd-nav__link:hover{color:var(--jd-ink)}
.jd-nav__link:hover::after,
.jd-nav__item.current-menu-item > .jd-nav__link::after,
.jd-nav__item.current-menu-parent > .jd-nav__link::after{transform:scaleX(1)}

/* --- Submenu --- */
.jd-nav .sub-menu{
  list-style:none;position:absolute;top:100%;left:calc(var(--jd-space-4) * -1);
  min-width:220px;
  background:var(--jd-ink);
  padding:var(--jd-space-2) 0;
  opacity:0;visibility:hidden;transform:translateY(var(--jd-space-2));
  transition:opacity var(--jd-duration-base) var(--jd-ease-out),
             transform var(--jd-duration-base) var(--jd-ease-out),
             visibility 0s linear var(--jd-duration-base);
  z-index:var(--jd-z-header);
}
.jd-nav__item:hover > .sub-menu,
.jd-nav__item:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;
}
.jd-nav .sub-menu a{
  display:block;padding:var(--jd-space-3) var(--jd-space-4);
  color:var(--jd-paper);text-decoration:none;
  font-size:var(--jd-text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  border-left:3px solid transparent;
  transition:background var(--jd-duration-fast) var(--jd-ease-out),
             border-color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-nav .sub-menu a:hover{background:var(--jd-night-2);border-left-color:var(--jd-red)}

/* --- Masthead tools --- */
.jd-tools{display:flex;align-items:center;gap:var(--jd-space-2);justify-self:end}
.jd-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:none;border:0;border-radius:var(--jd-radius);
  color:var(--jd-ink);cursor:pointer;
  transition:background var(--jd-duration-fast) var(--jd-ease-out),
             color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-iconbtn:hover{background:var(--jd-surface);color:var(--jd-red-ink)}
.jd-iconbtn:active{background:var(--jd-surface-2)}
.jd-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jd-burger{display:none}

/* --- Search drawer --- */
.jd-search{
  display:grid;grid-template-rows:0fr;
  border-bottom:0 solid var(--jd-rule);
  background:var(--jd-surface);
  transition:grid-template-rows var(--jd-duration-base) var(--jd-ease-out);
}
.jd-search[data-open="true"]{grid-template-rows:1fr;border-bottom-width:1px}
.jd-search__clip{overflow:hidden}
.jd-search__form{
  width:min(var(--jd-feed-w),100% - var(--jd-gutter) * 2);
  margin-inline:auto;
  display:flex;gap:var(--jd-space-3);
  padding:var(--jd-space-6) 0;
}
.jd-field{
  flex:1;min-width:0;min-height:52px;
  padding:var(--jd-space-3) var(--jd-space-4);
  background:var(--jd-paper);
  border:2px solid var(--jd-ink);border-radius:var(--jd-radius);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-base);
  transition:border-color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-field::placeholder{color:var(--jd-ink-3)}
.jd-field:hover{border-color:var(--jd-red-ink)}
.jd-field:focus-visible{border-color:var(--jd-red-ink);outline:3px solid var(--jd-focus);outline-offset:2px}
.jd-field[aria-invalid="true"]{border-color:var(--jd-danger);background:var(--jd-red-wash)}

/* --- Mobile drawer --- */
.jd-drawer{
  position:fixed;inset:0;z-index:var(--jd-z-drawer);
  background:var(--jd-paper);
  padding:var(--jd-space-6) var(--jd-gutter) var(--jd-space-12);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--jd-duration-slow) var(--jd-ease-in-out),
             visibility 0s linear var(--jd-duration-slow);
}
.jd-drawer[data-open="true"]{transform:translateX(0);visibility:visible;transition-delay:0s}
.jd-drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--jd-space-8)}
.jd-drawer__list{list-style:none}
.jd-drawer__list a{
  display:block;padding:var(--jd-space-4) 0;
  border-bottom:var(--jd-border);
  font-family:var(--jd-font-display);font-size:var(--jd-text-lg);font-weight:900;
  letter-spacing:var(--jd-track-tight);
  color:var(--jd-ink);text-decoration:none;
}
.jd-drawer__list a:hover{color:var(--jd-red-ink)}
.jd-drawer .sub-menu{list-style:none;padding-left:var(--jd-space-4)}
.jd-drawer .sub-menu a{font-size:var(--jd-text-base);font-weight:700;font-family:var(--jd-font-ui);text-transform:uppercase;letter-spacing:var(--jd-track-wide)}
body.jd-locked{overflow:hidden}

/* ============================================================
   LEAD — the full-bleed featured story
   ============================================================ */
.jd-lead{
  display:grid;grid-template-columns:minmax(0,1fr);
  width:min(1360px,100% - var(--jd-gutter) * 2);
  margin:var(--jd-space-8) auto 0;
  background:var(--jd-night);
  overflow:hidden;
}
.jd-lead__media{
  grid-area:1/1;position:relative;width:100%;
  height:100%;                     /* fill the cell, however tall it ends up */
  min-height:min(56vw,600px);      /* min-height alone cannot force a width  */
}
.jd-lead__media img{width:100%;height:100%;object-fit:cover}
.jd-lead__media::after{content:"";position:absolute;inset:0;background:var(--jd-scrim)}
.jd-lead__body{
  grid-area:1/1;align-self:end;position:relative;z-index:1;
  padding:var(--jd-space-10) clamp(var(--jd-space-6),5vw,var(--jd-space-16));
  display:grid;gap:var(--jd-space-5);justify-items:start;
  max-width:min(100%,720px);
}
.jd-lead__kicker{color:var(--jd-paper)}
.jd-lead__kicker::before{
  content:"";width:var(--jd-space-8);height:3px;background:var(--jd-red);display:block;
}
.jd-lead__title{
  font-size:clamp(var(--jd-text-xl),5.2vw,var(--jd-text-3xl));
  overflow-wrap:anywhere;
  line-height:var(--jd-leading-3xl);
  color:var(--jd-paper);
  text-wrap:balance;
}
.jd-lead__title a{color:inherit;text-decoration:none}
.jd-lead__title a:hover{text-decoration:underline;text-decoration-color:var(--jd-red);text-decoration-thickness:3px}
.jd-lead .jd-btn{--_bg:var(--jd-paper);--_fg:var(--jd-ink);--_bd:var(--jd-paper);justify-self:start}
.jd-lead .jd-btn:hover{--_bg:var(--jd-red-ink);--_fg:var(--jd-paper);--_bd:var(--jd-red-ink)}

/* ============================================================
   THE INDEX — feed of cards
   ============================================================ */
.jd-index{
  display:grid;
  gap:var(--jd-space-5);
  margin:var(--jd-space-12) auto var(--jd-space-16);
}
.jd-index__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--jd-space-4);
  padding-bottom:var(--jd-space-4);
  border-bottom:3px solid var(--jd-ink);
  margin-bottom:var(--jd-space-2);
}
.jd-index__title{font-size:var(--jd-text-lg);text-transform:uppercase;letter-spacing:var(--jd-track-snug)}
.jd-index__count{font-size:var(--jd-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--jd-track-wide);color:var(--jd-ink-3)}

/* ---------- THE CARD ---------- */
.jd-card{
  position:relative;
  display:grid;
  grid-template-columns:var(--jd-card-media) var(--jd-card-text);
  min-height:var(--jd-card-h);
  background:var(--jd-surface);
  border-radius:var(--jd-radius);
  overflow:hidden;
  transition:background var(--jd-duration-base) var(--jd-ease-out);
}
.jd-card:hover{background:var(--jd-surface-2)}

.jd-card__media{position:relative;overflow:hidden;background:var(--jd-surface-2)}
.jd-card__media a{display:block;width:100%;height:100%}
.jd-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--jd-duration-slow) var(--jd-ease-out);
}
.jd-card:hover .jd-card__media img{transform:scale(1.035)}

/* ---------- ★ THE RED RAIL — signature element ----------
   A vertical index tab clamped to the left edge of every card.
   Reading down the feed, the tabs form a thumb-index of the
   issue: you can find the Travel run or the Gear run without
   reading a single headline. It also carries the read state.
   -------------------------------------------------------- */
.jd-rail{
  position:absolute;top:0;left:0;bottom:0;
  width:var(--jd-rail-w);
  background:var(--jd-red-ink);
  display:flex;align-items:center;justify-content:center;
  z-index:var(--jd-z-rail);
  text-decoration:none;
  transition:width var(--jd-duration-base) var(--jd-ease-out),
             background var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-rail__label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--jd-font-ui);
  font-size:var(--jd-text-2xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--jd-track-wider);
  color:var(--jd-paper);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:calc(100% - var(--jd-space-8));
}
.jd-rail:hover,.jd-rail:focus-visible{width:calc(var(--jd-rail-w) + var(--jd-space-2));background:var(--jd-red-deep)}
/* a card already read gets a hollow tab — quiet, not a badge */
.jd-card[data-read="true"] .jd-rail{background:var(--jd-ink)}

.jd-card__body{
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--jd-space-4);
  padding:var(--jd-space-8);
}
.jd-card__title{
  font-size:var(--jd-text-lg);
  overflow-wrap:anywhere;
  line-height:var(--jd-leading-lg);
  text-wrap:balance;
}
.jd-card__title a{
  color:var(--jd-ink);text-decoration:none;
  background-image:linear-gradient(var(--jd-red),var(--jd-red));
  background-size:0% 3px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--jd-duration-base) var(--jd-ease-out);
}
.jd-card__title a:hover{background-size:100% 3px}
/* the whole card is clickable, but the title stays the real link */
.jd-card__title a::before{content:"";position:absolute;inset:0;z-index:calc(var(--jd-z-rail) - 1)}
.jd-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--jd-space-2);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  color:var(--jd-ink-3);
}
.jd-card__meta span + span::before{content:"·";margin-right:var(--jd-space-2);color:var(--jd-rule)}
.jd-card__excerpt{
  font-family:var(--jd-font-body);
  font-size:var(--jd-text-sm);
  line-height:var(--jd-leading-base);
  color:var(--jd-ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.jd-card__more{
  align-self:start;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wider);
  color:var(--jd-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--jd-space-2);
  padding-bottom:var(--jd-space-1);
  border-bottom:2px solid var(--jd-red);
  transition:gap var(--jd-duration-fast) var(--jd-ease-out),color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-card:hover .jd-card__more{gap:var(--jd-space-3);color:var(--jd-red-ink)}

/* ---------- The deliberate grid break ----------
   Every 5th entry is a Field Note: full-bleed, text over
   image. It marks an editor's pick and stops the feed from
   metronoming. Content-justified, not decoration.
   ---------------------------------------------- */
.jd-card--note{
  grid-template-columns:minmax(0,1fr);
  min-height:min(520px,70vh);
  background:var(--jd-night);
}
.jd-card--note .jd-card__media{grid-area:1/1;height:100%}
.jd-card--note .jd-card__media::after{content:"";position:absolute;inset:0;background:var(--jd-scrim)}
.jd-card--note .jd-card__body{
  grid-area:1/1;position:relative;z-index:calc(var(--jd-z-rail) - 2);
  justify-content:flex-end;
  padding:var(--jd-space-10) clamp(var(--jd-space-8),6vw,var(--jd-space-16));
  max-width:52ch;
}
.jd-card--note .jd-card__title{font-size:clamp(var(--jd-text-lg),3.4vw,var(--jd-text-2xl))}
.jd-card--note .jd-card__title a{color:var(--jd-paper)}
.jd-card--note .jd-card__excerpt{color:var(--jd-surface-2)}
.jd-card--note .jd-card__meta{color:var(--jd-surface-2)}
.jd-card--note .jd-card__more{color:var(--jd-paper)}
.jd-card--note:hover{background:var(--jd-night)}
.jd-card--note .jd-rail{background:var(--jd-paper)}
.jd-card--note .jd-rail__label{color:var(--jd-ink)}
.jd-card--note .jd-rail:hover{background:var(--jd-red-ink)}
.jd-card--note .jd-rail:hover .jd-rail__label{color:var(--jd-paper)}

/* ---------- Compact card (related / search / archive rows) ---------- */
.jd-minicard{position:relative;display:grid;gap:var(--jd-space-3)}
.jd-minicard__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--jd-surface)}
.jd-minicard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--jd-duration-slow) var(--jd-ease-out)}
.jd-minicard:hover .jd-minicard__media img{transform:scale(1.04)}
.jd-minicard__rail{
  position:absolute;top:0;left:0;
  background:var(--jd-red-ink);color:var(--jd-paper);
  padding:var(--jd-space-2) var(--jd-space-3);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  text-decoration:none;z-index:var(--jd-z-rail);
}
.jd-minicard__rail:hover{background:var(--jd-red-deep);color:var(--jd-paper)}
.jd-minicard__title{font-size:var(--jd-text-base);line-height:var(--jd-leading-lg);text-wrap:balance}
.jd-minicard__title a{color:var(--jd-ink);text-decoration:none}
.jd-minicard__title a::before{content:"";position:absolute;inset:0}
.jd-minicard:hover .jd-minicard__title a{color:var(--jd-red-ink)}

/* ============================================================
   SINGLE POST
   ============================================================ */
.jd-post{padding:var(--jd-space-12) 0 var(--jd-space-16)}
.jd-post__head{display:grid;gap:var(--jd-space-5);margin-bottom:var(--jd-space-10)}
.jd-post__cats{list-style:none;display:flex;flex-wrap:wrap;gap:var(--jd-space-4);row-gap:var(--jd-space-2)}
.jd-post__title{
  font-size:clamp(var(--jd-text-xl),4.6vw,var(--jd-text-2xl));
  overflow-wrap:anywhere;
  line-height:var(--jd-leading-2xl);
  text-wrap:balance;
}
.jd-post__standfirst{
  font-family:var(--jd-font-body);
  font-size:var(--jd-text-md);
  line-height:var(--jd-leading-md);
  color:var(--jd-ink-2);
  max-width:60ch;
}
.jd-post__lead{
  /* the lead image breaks the measure slightly — it is a photograph,
     not a paragraph, and it should feel like one. The bleed can never
     exceed the page gutter, or it pushes past the viewport edge. */
  --_bleed:min(var(--jd-space-8),var(--jd-gutter));
  margin-block:var(--jd-space-10);
  width:calc(100% + var(--_bleed) * 2);
  margin-inline:calc(var(--_bleed) * -1);
}
.jd-post__lead img{width:100%}

.jd-post__byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--jd-space-3);
  padding:var(--jd-space-4) 0;
  border-top:var(--jd-border);border-bottom:var(--jd-border);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  color:var(--jd-ink-3);
}
.jd-post__byline a{color:var(--jd-ink);text-decoration:none}
.jd-post__byline a:hover{color:var(--jd-red-ink);text-decoration:underline}
.jd-post__byline .jd-sep{color:var(--jd-rule)}

/* --- Share --- */
.jd-share{display:flex;align-items:center;gap:var(--jd-space-2);margin-left:auto}
.jd-share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:var(--jd-border);background:var(--jd-paper);color:var(--jd-ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--jd-duration-fast) var(--jd-ease-out),
             border-color var(--jd-duration-fast) var(--jd-ease-out),
             color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-share__btn:hover{background:var(--jd-ink);border-color:var(--jd-ink);color:var(--jd-paper)}
.jd-share__btn svg{width:16px;height:16px;fill:currentColor}
.jd-share__btn.is-copied{background:var(--jd-success);border-color:var(--jd-success);color:var(--jd-paper)}

/* ---------- ★ THE RED RAIL, part two ----------
   On a post the tab becomes a fixed reading gauge pinned to the
   left margin: the category rides the top, the bar fills red as
   you read. Same object as the feed tab, doing a second job —
   you always know which section you're in and how far in you are.
   --------------------------------------------- */
.jd-gauge{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--jd-rail-w);
  background:var(--jd-ink);
  border-right:var(--jd-border);
  z-index:var(--jd-z-rail);
  display:none;
  --_progress:0;
}
.jd-gauge__fill{
  position:absolute;left:0;right:0;top:0;
  height:calc(var(--_progress) * 100%);
  background:var(--jd-red-ink);
  transition:height var(--jd-duration-fast) linear;
}
.jd-gauge__label{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  rotate:180deg;
  margin-inline:auto;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wider);
  color:var(--jd-paper);
  text-align:center;
  text-decoration:none;
}
.jd-gauge__pct{
  position:absolute;left:0;right:0;bottom:var(--jd-space-4);
  text-align:center;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-weight:700;
  color:var(--jd-surface-2);
  font-variant-numeric:tabular-nums;
}
@media (min-width:1180px){.jd-gauge{display:block}}
@media (prefers-reduced-motion:reduce){.jd-gauge__fill{transition:none}}

/* ---------- Prose ---------- */
.jd-prose{
  font-family:var(--jd-font-body);
  font-size:var(--jd-text-md);
  line-height:var(--jd-leading-md);
  color:var(--jd-ink);
}
.jd-prose > * + *{margin-top:var(--jd-space-6)}
.jd-prose p{max-width:68ch}
.jd-prose a{color:var(--jd-red-ink);text-decoration:underline;text-decoration-thickness:1px}
.jd-prose a:hover{color:var(--jd-red-deep);text-decoration-thickness:2px}
.jd-prose strong{font-weight:600}
.jd-prose h2,.jd-prose h3,.jd-prose h4{
  font-family:var(--jd-font-display);
  margin-top:var(--jd-space-12);
  text-wrap:balance;
}
.jd-prose h2{font-size:var(--jd-text-xl);padding-bottom:var(--jd-space-3);border-bottom:3px solid var(--jd-ink)}
.jd-prose h3{font-size:var(--jd-text-lg)}
.jd-prose h4{font-size:var(--jd-text-base);text-transform:uppercase;letter-spacing:var(--jd-track-wide)}
.jd-prose ul,.jd-prose ol{padding-left:var(--jd-space-6);max-width:66ch}
.jd-prose li + li{margin-top:var(--jd-space-2)}
.jd-prose ul{list-style:none;padding-left:var(--jd-space-5)}
.jd-prose ul li{position:relative}
.jd-prose ul li::before{
  content:"";position:absolute;left:calc(var(--jd-space-5) * -1);top:.62em;
  width:var(--jd-space-3);height:2px;background:var(--jd-red);
}
.jd-prose blockquote{
  margin-inline:0;
  padding:var(--jd-space-2) 0 var(--jd-space-2) var(--jd-space-6);
  border-left:4px solid var(--jd-red);
  font-size:var(--jd-text-lg);line-height:var(--jd-leading-md);
  font-style:italic;color:var(--jd-ink-2);
}
.jd-prose blockquote cite{
  display:block;margin-top:var(--jd-space-3);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);color:var(--jd-ink-3);
}
.jd-prose figure,.jd-prose .wp-block-image{margin-top:var(--jd-space-10)}
.jd-prose figcaption,.jd-prose .wp-element-caption{
  margin-top:var(--jd-space-3);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);
  color:var(--jd-ink-3);
  padding-left:var(--jd-space-3);border-left:2px solid var(--jd-red);
}
.jd-prose code{
  font-family:var(--jd-font-mono);font-size:.85em;
  background:var(--jd-surface);padding:.15em .4em;
}
.jd-prose pre{background:var(--jd-night);color:var(--jd-paper);padding:var(--jd-space-5);overflow-x:auto}
.jd-prose pre code{background:none;color:inherit;padding:0}
/* images breathe past the measure — the reading column stays 760 */
.jd-prose .alignwide,.jd-prose .wp-block-image.alignwide{
  --_bleed:min(var(--jd-space-8),var(--jd-gutter));
  width:calc(100% + var(--_bleed) * 2);
  margin-left:calc(var(--_bleed) * -1);
  max-width:none;
}
.jd-prose .alignfull,.jd-prose .wp-block-image.alignfull{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
}
.jd-prose .alignfull img{width:100%}

/* ---------- Third-party injected content ----------
   Ad platforms (Mediavine, AdThrive), embeds and related-post widgets drop
   their own markup straight into the content flow. None of it knows about
   this theme's measure, and a 336px ad unit inside a ~288px phone column
   will push the page sideways. Contain anything we did not author.
   -------------------------------------------------- */
.jd-prose iframe,
.jd-prose object,
.jd-prose embed,
.jd-prose video,
.jd-prose ins,
.jd-prose table{max-width:100%}
.jd-prose iframe{border:0}
.jd-prose > div[id*="mediavine"],
.jd-prose > div[class*="mediavine"],
.jd-prose > div[id*="adthrive"],
.jd-prose > div[class*="adthrive"],
.jd-prose > div[id*="-ad-"],
.jd-prose > ins{
  max-width:100%;
  overflow:hidden;      /* an oversized unit clips instead of scrolling the page */
  margin-inline:auto;
}
/* Wide media that genuinely wants the room may scroll inside itself,
   but the page itself must never scroll sideways. */
.jd-prose pre,
.jd-prose .wp-block-table{overflow-x:auto;max-width:100%}

/* A sticky footer ad unit would otherwise sit on top of the last paragraph. */
body{overflow-x:clip}

/* ---------- Legacy content from the old theme ----------
   1,400+ posts were written in the classic editor against a theme that
   styled these. None of it is generated by this theme, but all of it has
   to land inside the measure.
   ------------------------------------------------------- */

/* WordPress alignment classes — never styled here before. */
.jd-prose .alignnone{margin-block:var(--jd-space-6)}
.jd-prose .aligncenter{display:block;margin-inline:auto}
.jd-prose .alignleft{float:left;margin:var(--jd-space-2) var(--jd-space-6) var(--jd-space-4) 0;max-width:48%}
.jd-prose .alignright{float:right;margin:var(--jd-space-2) 0 var(--jd-space-4) var(--jd-space-6);max-width:48%}
.jd-prose .wp-caption{max-width:100%}
.jd-prose [style*="width"]{max-width:100%}
.jd-prose .wp-caption img{width:100%}
.jd-prose .wp-caption-text{
  margin-top:var(--jd-space-2);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);color:var(--jd-ink-3);
  padding-left:var(--jd-space-3);border-left:2px solid var(--jd-red);
}
@media (max-width:640px){
  /* A floated image at 48% is unreadable on a phone. */
  .jd-prose .alignleft,.jd-prose .alignright{float:none;margin-inline:0;max-width:100%}
}

/* Video embeds pasted as raw iframes get a real aspect ratio instead of
   a fixed 560×315 that cannot shrink. Only known video hosts — a map or a
   form iframe must keep its own height. */
.jd-prose iframe[src*="youtube"],
.jd-prose iframe[src*="youtu.be"],
.jd-prose iframe[src*="vimeo"],
.jd-prose iframe[src*="dailymotion"],
.jd-prose iframe[src*="tiktok"]{
  width:100%;height:auto;aspect-ratio:16/9;display:block;
  margin-block:var(--jd-space-8);
}

/* Wide tables scroll inside their own box (wrapper added in inc/compat.php)
   rather than dragging the page sideways. */
.jd-scroller{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-block:var(--jd-space-8);
}
.jd-scroller table{margin:0;min-width:min(100%,520px)}

/* The [button] shortcode, rebuilt. Legacy classes kept for any stray CSS. */
.jd-shortcode-btn{margin-block:var(--jd-space-4) var(--jd-space-6)}
.jd-prose .jd-shortcode-btn{color:var(--jd-paper);text-decoration:none}
.jd-prose .jd-shortcode-btn:hover{color:var(--jd-paper);text-decoration:none}
@media (max-width:520px){
  .jd-shortcode-btn{display:flex;width:100%}
}

/* --- Spec table (gear posts) --- */
.jd-specs{margin-top:var(--jd-space-10);border-top:3px solid var(--jd-ink)}
.jd-specs__title{
  font-size:var(--jd-text-xs);text-transform:uppercase;letter-spacing:var(--jd-track-wider);
  padding:var(--jd-space-4) 0;
}
.jd-specs__table{width:100%;border-collapse:collapse;font-family:var(--jd-font-ui);font-size:var(--jd-text-sm)}
.jd-specs__table th,.jd-specs__table td{
  text-align:left;padding:var(--jd-space-3) 0;border-bottom:var(--jd-border);vertical-align:top;
}
.jd-specs__table th{
  width:38%;font-weight:700;text-transform:uppercase;letter-spacing:var(--jd-track-wide);
  font-size:var(--jd-text-2xs);color:var(--jd-ink-3);
}
.jd-specs__table td{font-variant-numeric:tabular-nums}
.jd-specs__table tr:hover td,.jd-specs__table tr:hover th{background:var(--jd-surface)}

/* --- Affiliate CTA + disclosure --- */
.jd-cta{
  margin-top:var(--jd-space-10);padding:var(--jd-space-8);
  background:var(--jd-surface);border-left:4px solid var(--jd-red);
  display:grid;gap:var(--jd-space-4);justify-items:start;
}
.jd-cta__title{font-size:var(--jd-text-lg)}
.jd-disclosure{
  margin-top:var(--jd-space-6);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);line-height:var(--jd-leading-sm);
  color:var(--jd-ink-3);
}

/* ---------- Travel guide variant ---------- */
.jd-post--travel .jd-post__title{font-size:clamp(var(--jd-text-xl),5.4vw,var(--jd-text-3xl))}
.jd-hero{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:var(--jd-space-10);background:var(--jd-night)}
.jd-hero__media{
  grid-area:1/1;position:relative;width:100%;
  height:100%;min-height:min(52vw,560px);
}
.jd-hero__media img{width:100%;height:100%;object-fit:cover}
.jd-hero__media::after{content:"";position:absolute;inset:0;background:var(--jd-scrim);pointer-events:none}
.jd-hero__body{
  grid-area:1/1;align-self:end;position:relative;z-index:1;
  padding:var(--jd-space-10) clamp(var(--jd-space-6),5vw,var(--jd-space-12));
  display:grid;gap:var(--jd-space-4);justify-items:start;max-width:min(100%,780px);
}
.jd-hero__body .jd-post__title{color:var(--jd-paper)}
.jd-hero__body .jd-kicker{color:var(--jd-paper)}
.jd-hero__loc{
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wider);color:var(--jd-surface-2);
  display:flex;align-items:center;gap:var(--jd-space-2);
}
.jd-hero__loc svg{width:14px;height:14px;stroke:var(--jd-red);fill:none;stroke-width:2}

/* --- Table of contents (travel long-form) --- */
.jd-toc{
  margin-bottom:var(--jd-space-10);
  padding:var(--jd-space-6);
  background:var(--jd-surface);
  border-top:3px solid var(--jd-red);
}
.jd-toc__title{
  font-size:var(--jd-text-xs);text-transform:uppercase;letter-spacing:var(--jd-track-wider);
  margin-bottom:var(--jd-space-4);
}
.jd-toc__list{list-style:none;counter-reset:jd-toc;display:grid;gap:var(--jd-space-1)}
.jd-toc__list a{
  counter-increment:jd-toc;
  display:flex;gap:var(--jd-space-3);align-items:baseline;
  padding:var(--jd-space-2) 0;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);font-weight:700;
  color:var(--jd-ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--jd-duration-fast) var(--jd-ease-out),
             border-color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-toc__list a::before{
  content:counter(jd-toc,decimal-leading-zero);
  color:var(--jd-red-ink);font-variant-numeric:tabular-nums;
  font-size:var(--jd-text-2xs);
}
.jd-toc__list a:hover{color:var(--jd-red-ink);border-bottom-color:var(--jd-rule)}
.jd-toc__list a[aria-current="true"]{color:var(--jd-red-ink)}
.jd-toc__list a[aria-current="true"]::after{content:"";flex:1;border-bottom:2px solid var(--jd-red);margin-bottom:.25em}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.jd-signup{
  background:var(--jd-night);color:var(--jd-paper);
  padding:var(--jd-space-12) var(--jd-space-8);
  display:grid;gap:var(--jd-space-5);
  border-top:6px solid var(--jd-red);
}
.jd-signup__title{font-size:var(--jd-text-xl);color:var(--jd-paper)}
.jd-signup__sub{font-family:var(--jd-font-body);font-size:var(--jd-text-base);color:var(--jd-surface-2);max-width:46ch}
/* ---------- The Find: native subscribe form ----------
   Full width of the panel, no third-party iframe, and it stacks on a phone
   instead of crushing the input to nothing.
   ---------------------------------------------------- */
.jd-find{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--jd-space-3);
  width:100%;
  max-width:640px;
}
.jd-find__field{
  min-width:0;                 /* let it shrink inside the grid track */
  min-height:56px;
  padding:var(--jd-space-3) var(--jd-space-5);
  background:var(--jd-paper);
  color:var(--jd-ink);
  border:2px solid var(--jd-paper);
  border-radius:var(--jd-radius);
  font-family:var(--jd-font-ui);
  font-size:var(--jd-text-base);
  transition:border-color var(--jd-duration-fast) var(--jd-ease-out),
             box-shadow var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-find__field::placeholder{color:var(--jd-ink-3)}
.jd-find__field:hover{border-color:var(--jd-red)}
.jd-find__field:focus-visible{
  border-color:var(--jd-red);
  outline:3px solid var(--jd-focus);
  outline-offset:2px;
}
.jd-find__field[aria-invalid="true"]{
  border-color:var(--jd-danger);
  box-shadow:inset 0 0 0 1px var(--jd-danger);
}
.jd-find__submit{
  --_bg:var(--jd-red-ink);--_fg:var(--jd-paper);--_bd:var(--jd-red-ink);
  min-height:56px;
  padding-inline:var(--jd-space-8);
}
.jd-find__submit:hover{--_bg:var(--jd-paper);--_fg:var(--jd-ink);--_bd:var(--jd-paper)}
.jd-find__submit:active{--_bg:var(--jd-surface-2);--_bd:var(--jd-surface-2)}
.jd-find__submit[disabled]{--_bg:var(--jd-night-2);--_fg:var(--jd-ink-3-inv);--_bd:var(--jd-night-2)}

/* The honeypot must be unreachable by people but present for bots — so it is
   moved off-screen rather than display:none, which some bots detect. */
.jd-find__trap{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}

.jd-find__msg{
  display:none;
  margin-top:var(--jd-space-4);
  padding:var(--jd-space-3) var(--jd-space-4);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);font-weight:700;
  max-width:640px;
}
.jd-find__msg[data-state="success"]{display:block;background:var(--jd-success);color:var(--jd-paper)}
.jd-find__msg[data-state="error"]{display:block;background:var(--jd-danger);color:var(--jd-paper)}
.jd-find__note{
  margin-top:var(--jd-space-4);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);
  color:var(--jd-ink-3-inv);
}

@media (max-width:560px){
  /* Stack, so the field always gets the full width. This is the exact case
     the old embedded form got wrong. */
  .jd-find{grid-template-columns:minmax(0,1fr)}
  .jd-find__submit{width:100%}
}

/* ============================================================
   RELATED + PAGINATION
   ============================================================ */
.jd-related{margin-top:var(--jd-space-16)}
.jd-related__head{
  font-size:var(--jd-text-lg);text-transform:uppercase;letter-spacing:var(--jd-track-snug);
  padding-bottom:var(--jd-space-4);border-bottom:3px solid var(--jd-ink);margin-bottom:var(--jd-space-8);
}
.jd-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--jd-space-8)}

.jd-more{display:grid;justify-items:center;gap:var(--jd-space-4);margin:var(--jd-space-12) 0}
.jd-pager{display:flex;flex-wrap:wrap;gap:var(--jd-space-2);justify-content:center;margin:var(--jd-space-12) 0}
.jd-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--jd-space-3);
  border:var(--jd-border);color:var(--jd-ink);text-decoration:none;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background var(--jd-duration-fast) var(--jd-ease-out),
             border-color var(--jd-duration-fast) var(--jd-ease-out),
             color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-pager .page-numbers:hover{background:var(--jd-surface);border-color:var(--jd-ink)}
.jd-pager .page-numbers.current{background:var(--jd-red-ink);border-color:var(--jd-red-ink);color:var(--jd-paper)}
.jd-pager .page-numbers.dots{border-color:transparent;pointer-events:none;color:var(--jd-ink-3)}

/* ============================================================
   STATES — empty, error, 404. Designed, on-voice.
   ============================================================ */
.jd-state{
  display:grid;gap:var(--jd-space-5);justify-items:start;
  max-width:56ch;
  padding:var(--jd-space-16) 0;
}
.jd-state__code{
  font-family:var(--jd-font-display);font-size:var(--jd-text-4xl);font-weight:900;
  line-height:1;letter-spacing:var(--jd-track-tight);
  color:var(--jd-paper);background:var(--jd-red-ink);
  padding:var(--jd-space-3) var(--jd-space-5);
}
.jd-state__title{font-size:var(--jd-text-xl)}
.jd-state__body{font-family:var(--jd-font-body);font-size:var(--jd-text-md);line-height:var(--jd-leading-md);color:var(--jd-ink-2)}
.jd-state__actions{display:flex;flex-wrap:wrap;gap:var(--jd-space-3)}

/* skeleton for async loads (More button) */
.jd-skeleton{
  min-height:var(--jd-card-h);
  background:linear-gradient(100deg,var(--jd-surface) 30%,var(--jd-surface-2) 50%,var(--jd-surface) 70%);
  background-size:220% 100%;
  animation:jd-shimmer var(--jd-duration-slow) linear infinite;
}
@keyframes jd-shimmer{to{background-position:-220% 0}}

/* ============================================================
   COMMENTS
   ============================================================ */
.jd-comments{margin-top:var(--jd-space-16)}
.jd-comments__head{font-size:var(--jd-text-lg);padding-bottom:var(--jd-space-4);border-bottom:3px solid var(--jd-ink);margin-bottom:var(--jd-space-8)}
.jd-comments ol{list-style:none}
.jd-comments .comment-body{padding:var(--jd-space-5) 0;border-bottom:var(--jd-border)}
.jd-comments .children{padding-left:var(--jd-space-6);border-left:2px solid var(--jd-rule)}
.jd-comments .comment-author{font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);font-weight:700}
.jd-comments .comment-metadata{font-family:var(--jd-font-ui);font-size:var(--jd-text-2xs);text-transform:uppercase;letter-spacing:var(--jd-track-wide);color:var(--jd-ink-3)}
.jd-comments p{font-family:var(--jd-font-body);margin-top:var(--jd-space-3)}
.jd-comments textarea{width:100%;min-height:140px;resize:vertical}
.jd-comments .form-submit{margin-top:var(--jd-space-4)}
.jd-comments .submit{
  min-height:44px;padding:var(--jd-space-3) var(--jd-space-6);
  background:var(--jd-ink);color:var(--jd-paper);border:2px solid var(--jd-ink);
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--jd-track-wide);cursor:pointer;
}
.jd-comments .submit:hover{background:var(--jd-red-ink);border-color:var(--jd-red-ink)}

/* ============================================================
   COLOPHON
   ============================================================ */
.jd-colophon{background:var(--jd-night);color:var(--jd-surface-2);margin-top:var(--jd-space-20);padding:var(--jd-space-16) 0 var(--jd-space-8)}
.jd-colophon__grid{
  width:min(1360px,100% - var(--jd-gutter) * 2);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--jd-space-12);
}
.jd-colophon__title{
  font-size:var(--jd-text-xs);text-transform:uppercase;letter-spacing:var(--jd-track-wider);
  color:var(--jd-paper);margin-bottom:var(--jd-space-5);
  padding-bottom:var(--jd-space-3);border-bottom:2px solid var(--jd-red);
}
.jd-colophon__list{list-style:none;display:grid;gap:var(--jd-space-3)}
.jd-colophon__list a{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--jd-surface-2);text-decoration:none;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-sm);
}
.jd-colophon__list a:hover{color:var(--jd-paper);text-decoration:underline;text-decoration-color:var(--jd-red)}
.jd-colophon__blurb{font-family:var(--jd-font-body);font-size:var(--jd-text-sm);line-height:var(--jd-leading-base);max-width:44ch}
.jd-social{display:flex;gap:var(--jd-space-2);margin-top:var(--jd-space-5)}
.jd-social a{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--jd-night-2);color:var(--jd-surface-2);
  transition:background var(--jd-duration-fast) var(--jd-ease-out),color var(--jd-duration-fast) var(--jd-ease-out),border-color var(--jd-duration-fast) var(--jd-ease-out);
}
.jd-social a:hover{background:var(--jd-red-ink);border-color:var(--jd-red-ink);color:var(--jd-paper)}
.jd-social svg{width:18px;height:18px;fill:currentColor}
.jd-colophon__base{
  width:min(1360px,100% - var(--jd-gutter) * 2);margin:var(--jd-space-12) auto 0;
  padding-top:var(--jd-space-6);border-top:1px solid var(--jd-night-2);
  display:flex;flex-wrap:wrap;gap:var(--jd-space-4);justify-content:space-between;
  font-family:var(--jd-font-ui);font-size:var(--jd-text-xs);color:var(--jd-ink-3-inv);
}

/* ============================================================
   RESPONSIVE — the narrative holds at every width
   ============================================================ */
@media (max-width:1120px){
  .jd-card{grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr)}
  .jd-nav__list{gap:var(--jd-space-4)}
}
@media (max-width:900px){
  .jd-nav,.jd-tools .jd-search-toggle{display:none}
  .jd-burger{display:inline-flex}
  :root{--jd-topbar-h:64px;--jd-topbar-h-compact:56px}
  .jd-masthead__inner{grid-template-columns:auto 1fr;min-height:var(--jd-topbar-h)}
  .jd-lead__media{min-height:min(70vw,460px)}
  .jd-hero__media{min-height:min(64vw,440px)}
  .jd-colophon__grid{grid-template-columns:1fr 1fr;gap:var(--jd-space-8)}
}
@media (max-width:760px){
  /* The card stacks. The rail flips from a spine to a flag —
     same object, same job, rotated for a thumb-reachable width. */
  .jd-card{grid-template-columns:minmax(0,1fr);min-height:0}
  .jd-card__media{aspect-ratio:3/2}
  .jd-card--note{min-height:min(440px,80vh)}
  .jd-card--note .jd-card__media{aspect-ratio:auto;height:100%}
  .jd-card__body{padding:var(--jd-space-6)}
  .jd-rail{
    top:0;bottom:auto;width:auto;height:auto;
    padding:var(--jd-space-2) var(--jd-space-4);
  }
  .jd-rail:hover,.jd-rail:focus-visible{width:auto;padding-right:var(--jd-space-6)}
  .jd-rail__label{writing-mode:horizontal-tb;transform:none;max-height:none}
  .jd-card--note{min-height:0}
  .jd-card--note .jd-card__body{padding:var(--jd-space-8) var(--jd-space-6)}
  .jd-post__lead{width:100%;margin-inline:0}
  .jd-post__byline{flex-wrap:wrap;align-items:center;row-gap:var(--jd-space-2)}
  .jd-post__byline .jd-sep{display:none}
  .jd-post__byline > span,.jd-post__byline > time{margin-right:var(--jd-space-4)}
  .jd-share{margin-left:0;width:100%;margin-top:var(--jd-space-2)}
  .jd-prose .alignwide,.jd-prose .wp-block-image.alignwide{width:100%;margin-left:0}
  .jd-colophon__grid{grid-template-columns:1fr}
  .jd-signup{padding:var(--jd-space-8) var(--jd-space-4)}
  .jd-lead__media{min-height:min(86vw,380px)}
  .jd-hero__media{min-height:min(96vw,420px)}
}
@media (max-width:520px){
  .jd-prose{font-size:var(--jd-text-base)}
  :root{--jd-topbar-h:64px;--jd-topbar-h-compact:52px}
  .jd-btn{max-width:100%;padding-inline:var(--jd-space-4)}
  .jd-cta .jd-btn{width:100%}
  .jd-cta{padding:var(--jd-space-5)}
  .jd-state{padding:var(--jd-space-10) 0}
  .jd-state__code{font-size:var(--jd-text-2xl)}
  .jd-specs__table th{width:45%}
  .jd-search__form{flex-wrap:wrap}
}

/* ---------- Reduced motion: nothing degrades, it just stops ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .jd-card:hover .jd-card__media img,
  .jd-minicard:hover .jd-minicard__media img{transform:none}
  .jd-card__title a{background-size:100% 3px;background-image:none}
  .jd-topbar{transition:none}
  .jd-topbar[data-hidden="true"]{transform:none}
  .jd-skeleton{animation:none;background:var(--jd-surface)}
}

/* ---------- Print ---------- */
@media print{
  .jd-topbar,.jd-masthead,.jd-colophon,.jd-gauge,.jd-share,.jd-signup,.jd-related,.jd-drawer,.jd-search{display:none!important}
  body{background:#fff;color:#000}
  .jd-prose{font-size:11pt}
  .jd-prose a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}