/* ============================================================================
   JOURNAL PAGE — the ten ways of thinking, set as the house pattern turned
   VERTICAL. journal.html only; extends site.css / pages.css.

   The grammar (canon: journal-strip.css, rotated to the reading axis): one
   OPEN spread — a cream card washed with the entry's ink, an ink header band
   carrying the Hebrew term large in Rashi — and the rest collapsed to
   horizontal SPINES (№ + tag + title in cream over the entry's ink, the
   Hebrew term ghosted at the right end). On advance the ink curtain slides
   down over the card, the copy melts to heading-only, the spread's height is
   sucked closed while the next expands — everything on the suck curve
   cubic-bezier(.87,0,.13,1) ~1050ms. Melt-out fast (450ms); melt-in delayed
   ~560ms. Heights are deterministic px, measured at rest by journal-page.js.

   Fail-open: without JS (no .jsv on the stack) every entry renders fully
   open and readable — the collapse mechanics live under .jsv only.
   ========================================================================== */

/* ---- edition masthead: thick-thin press rules around a mono dateline ---- */
.jmast{max-width:820px;margin:0 auto;padding:0 var(--gutter);opacity:0;animation:pgin .9s var(--e-expo) .85s forwards;}
.jmast .jm-rule{display:block;}
.jmast .jm-top{height:6px;border-top:2px solid rgba(20,18,31,0.82);border-bottom:1px solid rgba(20,18,31,0.5);transform-origin:left;animation:jmdraw .8s var(--e-expo) 1s both;}
.jmast .jm-bot{height:6px;border-top:1px solid rgba(20,18,31,0.5);border-bottom:2px solid rgba(20,18,31,0.82);transform-origin:right;animation:jmdraw .8s var(--e-expo) 1.08s both;}
.jmast .jm-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px 26px;flex-wrap:wrap;padding:11px 2px;
  font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm-gray);}
.jmast .jm-mid{color:var(--zone);}
@keyframes jmdraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
html:not(.js-ready) .jmast{animation:none;opacity:1;}
html:not(.js-ready) .jmast .jm-top,html:not(.js-ready) .jmast .jm-bot{animation:none;transform:none;}

/* ============================ THE STACK ==================================
   Default styles are the OPEN spread (also the no-JS rendering). The spine
   state and every transition live under .jsv, added by journal-page.js.  */
.jstack{
  --e-suck:cubic-bezier(.87,0,.13,1);   /* slow in, sucked through, soft release */
  --jv-spine:96px;                       /* collapsed spine height */
  --jv-band:clamp(150px,20vh,188px);     /* open ink header band */
  --jv-px:clamp(20px,3.4vw,36px);        /* card horizontal padding */
  --jv-to:clamp(2.05rem,4.8vw,3.35rem);  /* title, open */
  --jv-tc:clamp(1.02rem,1.4vw,1.18rem);  /* title, spine */
  --jv-hebo:clamp(2.1rem,4.4vw,3.3rem);  /* Hebrew term, open band */
  --jv-hebc:clamp(1.35rem,2.6vw,1.9rem); /* Hebrew term, ghosted on spine */
  display:flex;flex-direction:column;gap:clamp(10px,1.5vh,16px);
  margin-bottom:clamp(36px,6vh,58px);
}
html.js-loading .jstack{opacity:0;}     /* no flash while JS re-renders; the
                                           2.5s head timer fails this open */

/* ---- a spread ---- */
.jv{position:relative;overflow:hidden;
  border-radius:clamp(12px,1.2vw,16px);
  border:1px solid rgba(var(--jn-rgb),.18);
  background:
    linear-gradient(168deg, rgba(var(--jn-rgb),.12) 0%, rgba(var(--jn-rgb),.035) 38%, rgba(251,248,243,0) 75%),
    #FFFDF9;
  scroll-margin-top:110px;
}

/* the ink curtain: slides down over the card as a spread is sucked closed,
   up and away as it opens (the canon's "panel slides over the card") */
.jv-wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,18,31,.95) 0%, rgba(20,18,31,.6) 45%, rgba(var(--jn-rgb),.5) 100%),
    #14121F;
  transform:translateY(-101%);
}

/* the ink panel: header band when open; the whole spine when collapsed */
.jv-term{position:absolute;top:0;left:0;right:0;z-index:2;height:var(--jv-band);pointer-events:none;
  background:
    radial-gradient(130% 130% at 26% 10%, rgba(var(--jn-rgb),.94) 0%, rgba(var(--jn-rgb),.7) 55%, rgba(20,18,31,.93) 100%),
    #14121F;
}
.jv-heb{position:absolute;top:50%;right:clamp(22px,4vw,46px);transform:translateY(-50%);
  font-family:var(--ff-heb);font-weight:500;font-style:normal;color:#F3EAD8;
  direction:rtl;white-space:nowrap;
  font-size:var(--jv-hebo);line-height:1.25;
  text-shadow:0 2px 20px rgba(20,18,31,.35);
}
.jv-no{position:absolute;top:clamp(12px,1.8vh,18px);left:var(--jv-px);
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;color:rgba(243,234,216,.55);
}

/* ---- the text layer: rides above the ink (canon z-order) ---- */
.jv-card{position:relative;z-index:3;
  padding:calc(var(--jv-band) + clamp(28px,4.5vh,46px)) var(--jv-px) clamp(46px,7vh,66px);
}
.jv-h{margin:0;}
.jv-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;
  color:inherit;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:2px;}
.jv-btn:focus{outline:none;}
.jv-btn:focus-visible{outline:2px solid var(--jn);outline-offset:5px;}

.jv-kick{display:flex;align-items:center;gap:12px;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 clamp(10px,1.6vh,16px);}
.jv-kno{color:var(--jn);letter-spacing:.16em;}
.jv-tag{color:var(--warm-gray);}

.jv-title{display:block;font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;
  font-variation-settings:var(--fx-d);
  font-size:var(--jv-to);line-height:1.04;letter-spacing:-.025em;color:var(--ink);max-width:19ch;}
.jv-title em{font-style:italic;color:var(--jn);font-variation-settings:var(--fx-i);padding-right:.05em;}

/* the kicker + body + source melt away on the spine */
.jv-lede{margin:clamp(12px,2vh,18px) 0 0;
  font-family:var(--ff-display);font-optical-sizing:auto;font-style:italic;font-weight:400;
  font-variation-settings:var(--fx-i);font-size:clamp(1.22rem,2.3vw,1.6rem);line-height:1.38;
  color:var(--soft-ink);max-width:40ch;text-wrap:balance;}

/* the body: a large Fraunces opening, then Garamond at reading size,
   one underlined phrase per note, the occasional stand-alone pull line */
.jn-body{margin-top:clamp(16px,2.6vh,26px);}
.jn-body p{font-size:clamp(1.08rem,1rem + 0.35vw,1.17rem);line-height:1.66;color:var(--soft-ink);max-width:64ch;}
.jn-body p + p{margin-top:1.35em;}
.jn-body p.jn-open{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:340;font-variation-settings:var(--fx-d);
  font-size:clamp(1.42rem,2.5vw,1.9rem);line-height:1.42;letter-spacing:-0.012em;color:var(--ink);max-width:44ch;}
.jn-body p.jn-pull{font-family:var(--ff-display);font-optical-sizing:auto;font-style:italic;font-weight:400;
  font-variation-settings:var(--fx-i);font-size:clamp(1.32rem,2.4vw,1.72rem);line-height:1.36;color:var(--ink);max-width:38ch;
  margin-top:1.6em;padding:0.15em 0 0.15em clamp(18px,3vw,30px);border-left:2px solid rgba(var(--jn-rgb),0.55);}
.jn-body p.jn-pull + p{margin-top:1.6em;}
.jn-body strong{font-weight:600;color:var(--ink);text-decoration:underline;
  text-decoration-color:rgba(var(--jn-rgb),0.5);text-decoration-thickness:2px;text-underline-offset:3.5px;}
.jn-body .heb,.jv-title .heb{font-family:var(--ff-heb);font-weight:500;font-style:normal;}
.jn-foot{margin-top:clamp(30px,5vh,46px);display:flex;align-items:center;gap:14px;}
.jn-fleuron{color:var(--jn);font-size:0.8rem;}
.jn-srcline{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--warm-gray);}

/* == the flip: the emphasised title word turns over to its Hebrew, Rashi == */
.jflip{display:inline-block;position:relative;perspective:640px;}
/* a steady hit-pad as wide as the wider face, so the hover survives the
   width morph instead of flickering when the word narrows under the pointer */
.jflip::after{content:'';position:absolute;top:-6px;bottom:-6px;left:50%;transform:translateX(-50%);
  width:max(var(--wen,0px),var(--whe,0px),100%);}
.jf-in{display:inline-block;position:relative;white-space:nowrap;text-align:center;vertical-align:baseline;
  width:var(--wen,auto);transform-style:preserve-3d;
  transition:transform .58s var(--e-expo),width .58s var(--e-expo);}
.jf-en{display:inline-block;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.jf-he{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) rotateX(180deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:nowrap;
  font-family:var(--ff-heb);font-style:normal;font-weight:500;font-size:0.88em;line-height:1;color:var(--jn);padding:0;}
.jflip:hover .jf-in,.jflip.on .jf-in,.jv-btn:focus-visible .jflip .jf-in{transform:rotateX(-180deg);width:var(--whe,auto);}
.jflip.measure .jf-in{width:auto !important;transition:none !important;}

/* == the small marks: one per entry, drawn in the entry's ink ==
   Hairline strokes; at rest they hold their settled state; .play runs the
   figure once (scroll-into-view, or hovering the spine). */
.jn-glyph{flex:none;display:block;color:var(--jn);overflow:visible;}
.jn-glyph :is(path,rect,circle,ellipse,line){stroke:currentColor;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;}
.jn-glyph .f{fill:currentColor;stroke:none;}
/* 01 · eyes — the pupils dart left, right, then settle */
.g-eyes .pu{transform:translateX(0);}
.g-eyes.play .pu{animation:gDart 1.5s var(--e-quart) 1;}
@keyframes gDart{0%,12%{transform:translateX(0);}24%,42%{transform:translateX(-2.3px);}56%,74%{transform:translateX(2.3px);}88%,100%{transform:translateX(0);}}
/* 02 · frames — two frames slide past each other into a second shape */
.g-frames.play .fA{animation:gFrA .95s var(--e-expo) 1;}
.g-frames.play .fB{animation:gFrB .95s var(--e-expo) 1;}
@keyframes gFrA{from{transform:translateX(3.3px);}to{transform:none;}}
@keyframes gFrB{from{transform:translateX(-3.3px);}to{transform:none;}}
/* 03 · bracket — the hakdama draws itself before the word arrives */
.g-bracket.play .bK{stroke-dasharray:22;animation:gDrawB .8s var(--e-expo) 1;}
.g-bracket.play .bD{animation:gArrive 1.15s var(--e-quart) 1;}
@keyframes gDrawB{from{stroke-dashoffset:22;}to{stroke-dashoffset:0;}}
@keyframes gArrive{0%,58%{opacity:0;}100%{opacity:1;}}
/* 04 · pulse — dam settles into dom: the beat crosses once and goes quiet */
.g-pulse .pz{opacity:0.26;}
.g-pulse.play .pz{stroke-dasharray:24;animation:gBeat 1.4s var(--e-quart) 1;}
.g-pulse.play .pf{animation:gStill 1.4s var(--e-quart) 1;}
@keyframes gBeat{0%{stroke-dashoffset:24;opacity:1;}52%{stroke-dashoffset:0;opacity:1;}80%,100%{stroke-dashoffset:0;opacity:0.26;}}
@keyframes gStill{0%,48%{opacity:0;}82%,100%{opacity:1;}}
/* 05 · vessel — one drop falls in; the cup stays open, expecting */
.g-vessel .vD{opacity:0;}
.g-vessel.play .vD{animation:gDrop 1.15s var(--e-quart) 1;}
@keyframes gDrop{0%{transform:translateY(-1.5px);opacity:0;}18%{opacity:1;}70%{transform:translateY(6.2px);opacity:1;}100%{transform:translateY(6.6px);opacity:0;}}
/* 06 · parcel — the lid lifts a crack and the spark gets out */
.g-parcel .qL{transform-box:fill-box;transform-origin:left center;transform:rotate(-13deg);}
.g-parcel.play .qL{animation:gLid .85s var(--e-expo) 1;}
.g-parcel.play .qS{animation:gSpark 1.2s var(--e-quart) 1;}
@keyframes gLid{from{transform:rotate(0deg);}to{transform:rotate(-13deg);}}
@keyframes gSpark{0%,45%{transform:translateY(2.8px);opacity:0;}100%{transform:none;opacity:1;}}
/* 07 · gem — the dirt falls away; the diamond was inside the whole time */
.g-gem .dG{opacity:0.32;}
.g-gem.play .dK{animation:gGem 1.05s var(--e-quart) 1;}
.g-gem.play .dG.d1{animation:gDirt1 1.05s var(--e-expo) 1;}
.g-gem.play .dG.d2{animation:gDirt2 1.05s var(--e-expo) 1;}
.g-gem.play .dG.d3{animation:gDirt3 1.05s var(--e-expo) 1;}
@keyframes gGem{from{opacity:0.3;}to{opacity:1;}}
@keyframes gDirt1{from{opacity:0.9;transform:translate(1.6px,0.9px);}to{opacity:0.32;transform:none;}}
@keyframes gDirt2{from{opacity:0.9;transform:translate(-1.6px,0.9px);}to{opacity:0.32;transform:none;}}
@keyframes gDirt3{from{opacity:0.9;transform:translate(1.4px,-1.1px);}to{opacity:0.32;transform:none;}}
/* 08 · door — it swings open once and is left ajar */
.g-door .rF{transform-box:fill-box;transform-origin:left center;transform:scaleX(0.42);}
.g-door.play .rF{animation:gDoor .9s var(--e-expo) 1;}
@keyframes gDoor{from{transform:scaleX(1);}to{transform:scaleX(0.42);}}
/* 09 · house — the walls write themselves down */
.g-house.play .hW{stroke-dasharray:38;animation:gWalls 1.05s var(--e-expo) 1;}
.g-house.play .hD{animation:gHearth 1.35s var(--e-quart) 1;}
@keyframes gWalls{from{stroke-dashoffset:38;}to{stroke-dashoffset:0;}}
@keyframes gHearth{0%,68%{opacity:0;}100%{opacity:1;}}
/* 10 · crown — the crown settles lower; the point above it kindles */
.g-crown .cB{transform:translateY(1.1px);}
.g-crown.play .cB{animation:gSink 1s var(--e-expo) 1;}
.g-crown.play .cP{animation:gKindle 1.3s var(--e-quart) 1;}
@keyframes gSink{from{transform:translateY(0);}to{transform:translateY(1.1px);}}
@keyframes gKindle{0%,55%{opacity:0;}100%{opacity:1;}}

/* ======================= THE MECHANICS (.jsv only) =======================
   journal-page.js sets .jsv on the stack once it owns the choreography.   */
.jsv .jv{height:var(--jv-spine);cursor:pointer;
  transition:height 1050ms var(--e-suck);}
.jsv .jv.open{cursor:auto;}

.jsv .jv-wash{transform:none;transition:transform 1050ms var(--e-suck);}
.jsv .jv.open .jv-wash{transform:translateY(-101%);}

.jsv .jv-term{height:var(--jv-spine);transition:height 1050ms var(--e-suck);}
.jsv .jv.open .jv-term{height:var(--jv-band);}

.jsv .jv-heb{opacity:.32;font-size:var(--jv-hebc);
  transition:font-size 1050ms var(--e-suck),opacity 500ms var(--e-quart) 250ms;}
.jsv .jv:hover:not(.open) .jv-heb{opacity:.5;}
.jsv .jv.open .jv-heb{opacity:1;font-size:var(--jv-hebo);}

.jsv .jv-no{opacity:0;transform:translateY(5px);transition:opacity 450ms var(--e-quart),transform 450ms var(--e-quart);}
.jsv .jv.open .jv-no{opacity:1;transform:none;transition:opacity .55s var(--e-quart) 550ms,transform .7s var(--e-expo) 550ms;}

.jsv .jv-card{transition:padding 1050ms var(--e-suck);}
.jsv .jv:not(.open) .jv-card{padding-top:29px;padding-bottom:29px;}

/* text colors: on OPEN the ink curtain clears the heading zone late, so the
   cream→ink morph waits for it; on CLOSE the curtain covers it almost at
   once, so ink→cream is quick */
.jsv .jv-kick{transition:margin 1050ms var(--e-suck);}
.jsv .jv:not(.open) .jv-kick{margin-bottom:7px;}
.jsv :is(.jv-kno,.jv-tag,.jn-glyph){transition:color 480ms var(--e-quart) 430ms;}
.jsv .jv:not(.open) :is(.jv-kno,.jv-tag){color:rgba(243,234,216,.8);transition:color 320ms var(--e-quart);}
.jsv .jv:not(.open) .jn-glyph{color:rgba(243,234,216,.85);transition:color 320ms var(--e-quart);}

.jsv .jv-title{transition:color 480ms var(--e-quart) 430ms,font-size 1050ms var(--e-suck),padding 1050ms var(--e-suck);}
.jsv :is(.jv-title em,.jf-he){transition:color 480ms var(--e-quart) 430ms;}
.jsv .jv:not(.open) .jv-title{color:#F3EAD8;font-size:var(--jv-tc);line-height:1.15;letter-spacing:-.01em;
  max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:clamp(110px,16vw,180px);   /* clear the ghosted Hebrew */
  transition:color 320ms var(--e-quart),font-size 1050ms var(--e-suck),padding 1050ms var(--e-suck);}
.jsv .jv:not(.open) :is(.jv-title em,.jf-he){color:#F3EAD8;transition:color 320ms var(--e-quart);}

/* melt: out fast at the start of the suck; back in as a stagger once the
   band has landed — № in the band, then the kicker, the body, the sign-off,
   each a small rise on the melt-in timing. (The eyebrow and heading never
   melt: they ARE the spine, and ride the continuous morph instead.) */
.jsv .jv:not(.open) .jv-rest{pointer-events:none;}
.jsv :is(.jv-lede,.jn-body,.jn-foot){transition:opacity 450ms var(--e-quart),transform 450ms var(--e-quart);}
.jsv .jv:not(.open) :is(.jv-lede,.jn-body,.jn-foot){opacity:0;transform:translateY(14px);}
.jsv .jv.open .jv-lede{transition:opacity .6s var(--e-quart) 620ms,transform .8s var(--e-expo) 620ms;}
.jsv .jv.open .jn-body{transition:opacity .6s var(--e-quart) 690ms,transform .8s var(--e-expo) 690ms;}
.jsv .jv.open .jn-foot{transition:opacity .6s var(--e-quart) 760ms,transform .8s var(--e-expo) 760ms;}

.jsv .jv:not(.open) .jv-btn{cursor:pointer;}
.jsv .jv:not(.open) .jv-btn:focus-visible{outline-color:rgba(243,234,216,.9);}

/* ---- the fore-edge: cream page-ends along the closed spine's bottom lip —
   the physical cue that there are pages beneath. Two hairlines at rest;
   hovering cracks the bar a few px: the stack slides up and the paper block
   itself shows. Pure transform, clipped by the spread's own overflow. ---- */
.jsv .jv::after{content:'';position:absolute;left:0;right:0;bottom:0;height:13px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0 1px,
    rgba(243,234,216,.34) 1px 2px,
    transparent 2px 4px,
    rgba(243,234,216,.55) 4px 5px,
    transparent 5px 7px,
    rgba(243,234,216,.85) 7px 8px,
    rgba(20,18,31,.5) 8px 9px,
    #FBF8F3 9px 13px);
  opacity:1;transform:translateY(7px);
  transition:transform .55s var(--e-expo),opacity 450ms var(--e-quart) 400ms;}
.jsv .jv:not(.open):is(:hover,:focus-within)::after{transform:translateY(0);}
.jsv .jv.open::after{opacity:0;transform:translateY(13px);
  transition:transform 300ms var(--e-quart),opacity 250ms var(--e-quart);}

/* ---- the small mono cue, fading in beside the ghosted Hebrew ---- */
.jsv .jv-term::after{content:'OPEN';position:absolute;right:clamp(22px,4vw,46px);bottom:16px;
  font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.3em;color:rgba(243,234,216,.6);
  opacity:0;transform:translateY(3px);
  transition:opacity .4s var(--e-quart),transform .5s var(--e-expo);}
.jsv .jv:not(.open):is(:hover,:focus-within) .jv-term::after{opacity:1;transform:none;}

/* ---- close from the top: the whole ink band is a real button (injected by
   journal-page.js, so the static page never ships dead chrome). Invisible
   chrome over the band; its quiet cue sits in the band's lower-left corner
   and fades in on hover / keyboard focus. ---- */
.jsv .jv-fold{position:absolute;top:0;left:0;right:0;height:var(--jv-band);z-index:4;display:block;
  background:transparent;border:0;margin:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  visibility:visible;transition:height 1050ms var(--e-suck),visibility 0s;}
.jsv .jv:not(.open) .jv-fold{height:var(--jv-spine);visibility:hidden;pointer-events:none;
  transition:height 1050ms var(--e-suck),visibility 0s linear 450ms;}
.jsv .jv-fold:focus-visible{outline:2px solid rgba(243,234,216,.9);outline-offset:-6px;border-radius:2px;}
.jsv .jv-fold::after{content:'FOLD AWAY ↑';position:absolute;left:var(--jv-px);bottom:14px;
  font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.3em;color:rgba(243,234,216,.72);
  opacity:0;transform:translateY(3px);
  transition:opacity .4s var(--e-quart),transform .5s var(--e-expo);}
.jsv .jv-fold:is(:hover,:focus-visible)::after{opacity:1;transform:none;}

/* measuring pass (at rest, synchronous — no paint in between) and the
   motion-off snap: no transitions while either class is on the stack */
.jstack.measuring .jv{height:auto !important;}
.jstack.measuring .jv,.jstack.measuring .jv *,
.jstack.measuring .jv::after,.jstack.measuring .jv *::after,
.jstack.snap .jv,.jstack.snap .jv *,
.jstack.snap .jv::after,.jstack.snap .jv *::after{transition:none !important;}

/* ---- the desk signs off once, after the tenth ---- */
.jsign{display:flex;align-items:center;gap:18px;padding:clamp(34px,6vh,56px) 0 6px;border-top:1px solid rgba(20,18,31,0.12);}
.jsign i{flex:1;height:1px;background:rgba(20,18,31,0.14);display:block;}
.jsign .js-in{display:flex;align-items:baseline;gap:12px;white-space:nowrap;}
.jsign .js-fleuron{color:var(--zone);font-size:0.8rem;}
.jsign .js-hand{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:1.08rem;color:var(--ink);}

/* ---- correspondence — write to the desk ---- */
.jwrite{margin-top:clamp(44px,8vh,76px);text-align:center;}
.jw-cap{display:block;font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--zone);margin-bottom:18px;}
.jw-lede{font-family:var(--ff-display);font-optical-sizing:auto;font-variation-settings:var(--fx-d);
  font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.35;color:var(--ink);max-width:32ch;margin:0 auto;text-wrap:balance;}
.jw-lede a{color:var(--zone);font-style:italic;font-variation-settings:var(--fx-i);text-decoration:none;
  border-bottom:1.5px solid rgba(var(--zone-rgb),0.35);transition:border-color .35s var(--e-quart);}
.jw-lede a:hover{border-color:var(--zone);}
.jw-note{margin-top:16px;font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--warm-gray);}

/* ---- narrow screens ---- */
@media (max-width:600px){
  .jstack{--jv-spine:86px;--jv-band:clamp(118px,17vh,150px);--jv-px:18px;
    --jv-to:clamp(1.9rem,8.6vw,2.2rem);--jv-tc:0.95rem;
    --jv-hebo:clamp(1.9rem,7vw,2.4rem);--jv-hebc:1.16rem;}
  .jv{scroll-margin-top:88px;}
  .jv-heb{right:16px;}
  .jsv .jv:not(.open) .jv-card{padding-top:25px;padding-bottom:25px;}
  .jsv .jv:not(.open) .jv-title{padding-right:92px;}
  .jsv .jv-term::after{right:16px;bottom:9px;}
  .jsv .jv-fold::after{bottom:11px;}
}

/* motion off (site toggle or OS preference): everything lands settled —
   heights snap, the curtain jumps, the word swaps without turning, the
   marks hold their pose */
body.calm .jv,body.calm .jv *,
body.calm .jv::after,body.calm .jv *::after{transition:none !important;}
body.calm .jn-glyph *{animation:none !important;}
@media (prefers-reduced-motion: reduce){
  .jmast{animation:none;opacity:1;}
  .jmast .jm-top,.jmast .jm-bot{animation:none;transform:none;}
  .jv,.jv *,.jv::after,.jv *::after{transition:none !important;}
  .jn-glyph *{animation:none !important;}
}