/* ---------- nav ---------- */
/* Three tiers, the way a maison does it: utility row, centred mark, categories. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
     background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
     border-bottom:1px solid transparent;
     transition:border-color 300ms var(--ease-out), background 300ms var(--ease-out);}
.nav[data-scrolled]{border-bottom-color:var(--border);background:rgba(255,255,255,.96);}

.nav-utility{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.75rem .15rem;}
.nav-util-left{display:flex;gap:1.6rem;}
.nav-util-left span,.nav-util-left a{font-size:0.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;
  font-weight:400;color:var(--green-mid);}
.nav-util-right{display:flex;gap:1.15rem;align-items:center;color:var(--green);}
.nav-util-right a{position:relative;}
.basket-count{position:absolute;top:-.1rem;right:-.35rem;min-width:1.05rem;height:1.05rem;padding:0 .18rem;
  border-radius:999px;background:var(--green);color:#fff;font-size:0.6875rem;line-height:1.05rem;text-align:center;}
.nav[data-over-dark] .basket-count{background:#fff;color:var(--green);}
.nav-util-right svg{width:17px;height:17px;}
@media (hover:hover) and (pointer:fine){
  .nav-util-left a:hover,.nav-util-right a:hover{color:var(--gold-ink);}
}

.nav-logo{display:block;position:relative;width:max-content;margin:0 auto;padding:.1rem 0 .45rem;}
.nav-logo img{height:34px;width:auto;transition:opacity 350ms var(--ease-out);}
.nav-logo .logo-cream{position:absolute;top:.1rem;left:0;}

.nav-cats{display:flex;justify-content:center;gap:2.4rem;padding:0 1.75rem .8rem;flex-wrap:wrap;}
.nav-cats a{position:relative;font-size:0.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;
  font-weight:400;color:var(--green);padding-bottom:.25rem;}
.nav-cats a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;transition:transform 260ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .nav-cats a:hover::after{transform:scaleX(1);} }

/* Over the dark hero footage the whole bar inverts. */
.nav[data-over-dark]{background:transparent;backdrop-filter:none;border-bottom-color:transparent;}
.nav[data-over-dark] .logo-dark{opacity:0;}
.nav:not([data-over-dark]) .logo-cream{opacity:0;}
.nav[data-over-dark] .nav-cats a,
.nav[data-over-dark] .nav-util-right{color:#FFFFFF;}
.nav[data-over-dark] .nav-util-left span,
.nav[data-over-dark] .nav-util-left a{color:rgba(255,255,255,.72);}

/* A little less space between the category links just above 900px, and from 900px down the gap phones use,
   so the row stays on one line wherever it can. Under 900px the utility row hides Book an Appointment (the
   longest item), as before, and keeps Trade. */
@media (min-width:901px) and (max-width:1000px){ .nav-cats{gap:2rem;} }
@media (max-width:900px){ .nav-cats{gap:1.05rem;padding-left:1rem;padding-right:1rem;} .nav-util-left a:nth-of-type(2){display:none;} }
@media (max-width:700px){
  .nav-utility{padding:.5rem 1.1rem .1rem;}
  .nav-util-left{gap:1.1rem;}
  .nav-cats{gap:1.05rem;padding:0 1.75rem .6rem;}
  .nav-cats a{font-size:0.875rem;}
  /* phones show the five categories; Bespoke, House of VIBHINI and Stories wait for wider screens */
  .nav-cats a:nth-last-child(-n+3){display:none;}
  .nav-logo img{height:26px;}
}
/* ---------- footer — continues the dark, one shade deeper ---------- */
.foot{border-top:1px solid rgba(255,255,255,.14);background:var(--green-deep);color:var(--cream);}
.foot-top{max-width:1240px;margin:0 auto;padding:4.5rem 1.75rem 3rem;
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem;}
.foot-brand img{height:46px;width:auto;opacity:.9;}
.foot-brand p{margin-top:1.2rem;font-size:0.9375rem;line-height:1.8;color:rgba(255,255,255,.6);max-width:26ch;}
.foot-col h4{font-family:var(--font-body);font-size:0.875rem;font-weight:400;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--gold-leaf);margin-bottom:1.1rem;}
.foot-col a,.foot-col span{display:block;font-size:0.9375rem;color:rgba(255,255,255,.72);padding:.32rem 0;line-height:1.6;}
@media (hover:hover) and (pointer:fine){ .foot-col a:hover{color:var(--cream);} }
.foot-note{max-width:1240px;margin:0 auto;padding:1.5rem 1.75rem 2.5rem;
  border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.foot-note p{font-size:0.875rem;letter-spacing:.06em;color:rgba(255,255,255,.45);text-wrap:balance;}
.foot-note a{position:relative;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;}
.foot-note a::after{content:"";position:absolute;inset:-.8rem -.25rem;}  /* a finger-sized target around the small text */
@media (hover:hover) and (pointer:fine){ .foot-note a:hover{color:var(--cream);} }
@media (max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem;padding:3rem 1.5rem 2rem;}
  .foot-brand{grid-column:1 / -1;}
  .foot-note{flex-direction:column;text-align:center;}
}
/* =====================================================================
   VIBHINI Stories: the one stylesheet for every Stories page
   The frame (trail, Stories bar, story head, closing components), then the
   front page and the four formats, each scoped by its body class
   (.stories-front, .format-cover, .format-piece, .format-lesson,
   .format-almanac).
   The house menu and footer are not in this file: the build cuts their rules
   out of templates/page.html and writes them in front of it, so a Stories page
   always shows the house's own menu and footer. Those rules read the tokens
   and base resets below, which keep the house's values
   (scripts/lib/stories/assets.test.mjs).
   Sections keep the preview's numbers, which FRAME.md and the inline guard in
   each page's head refer to (section 17); 3 (the review strip) and 13 (the
   preview's own footer) are gone.
   Every animation here is an enhancement: with no JS, no support or
   reduced motion, every word and picture is visible and still.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --green:#0B4532; --green-deep:#07301F; --green-mid:#4E5E56;
  --gold:#0B4532; --gold-ink:#4E5E56; --gold-leaf:#E9E1CF;   /* names kept from the live site: no gold */
  --cream:#FFFFFF; --cream-deep:#F7F3EA;
  --border:rgba(11,69,50,.16); --border-strong:rgba(11,69,50,.32);
  --on-green:rgba(255,255,255,.86); --on-green-soft:rgba(255,255,255,.74); --on-green-line:rgba(233,225,207,.3);

  --font-display:"Marcellus",Georgia,"Times New Roman",serif;
  --font-body:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
  --track-nav:.05em; --track-label:.06em;

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ui:180ms; --dur-press:140ms;

  --wrap:1240px; --gutter:1.75rem; --measure:41rem;
  /* stories.js measures these. The defaults are the house menu's own height with Karla loaded (measured 10 and 14 Oct
     2026: 121 px above 740 px wide, 106.6 px from 468 to 700 px, and where its links take two lines, 151.2 px below
     468 px and 165.5 px from 701 to 740 px), so a page read before or without the script starts clear of the fixed
     menu. A fallback font takes two lines at wider widths too; the script measures those */
  --nav-h:7.5rem; --sbar-h:2.875rem;
  --sticky-top:calc(var(--nav-h) + var(--sbar-h));

  --guilloche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%230B4532' stroke-width='0.5'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='43'/%3E%3Ccircle cx='60' cy='60' r='28'/%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='120' cy='0' r='28'/%3E%3Ccircle cx='0' cy='120' r='28'/%3E%3Ccircle cx='120' cy='120' r='28'/%3E%3C/g%3E%3C/svg%3E");
  --guilloche-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23F7F0DE' stroke-width='0.5'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='43'/%3E%3Ccircle cx='60' cy='60' r='28'/%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='120' cy='0' r='28'/%3E%3Ccircle cx='0' cy='120' r='28'/%3E%3Ccircle cx='120' cy='120' r='28'/%3E%3C/g%3E%3C/svg%3E");
  --graph:linear-gradient(rgba(11,69,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,69,50,.06) 1px,transparent 1px);
}
@media (max-width:700px){ :root{ --gutter:1rem; --nav-h:6.625rem; } }
@media (max-width:467px){ :root{ --nav-h:9.4375rem; } }
@media (min-width:701px) and (max-width:740px){ :root{ --nav-h:10.3125rem; } }

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;}
*::before,*::after{box-sizing:border-box;}
html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--sticky-top) + 1rem);}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{margin:0;background:#FFFFFF;color:var(--green);font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;overflow-x:hidden;}
main{display:block;overflow-x:clip;}
/* colour: inherit, not the house's var(--green), so headings take the white of a green band; the house footer sets its own */
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;font-weight:400;color:inherit;overflow-wrap:break-word;}
p,figure,blockquote,dl,dd{margin:0;}
main p{text-wrap:pretty;}   /* no single word left alone on a last line (main only: the house footer keeps its own wrapping) */
a{color:inherit;text-decoration:none;}
img,svg,canvas{max-width:100%;display:block;}
img{height:auto;}
em,i,cite,address,dfn{font-style:normal;}     /* the house sets no italics */
strong,b{font-weight:500;}
button{font:inherit;color:inherit;}
::selection{background:var(--green);color:#fff;}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:3px;}
[hidden]{display:none!important;}
.st-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.st-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.st-measure{max-width:calc(var(--measure) + 2 * var(--gutter));}
.st-eyebrow{font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.st-skip{position:absolute;left:var(--gutter);top:-4rem;z-index:200;padding:.7rem 1rem;background:var(--green);color:#fff;font-size:.9375rem;}
.st-skip:focus{top:.6rem;}

/* bands: the tonal rhythm (white, green, cream) */
.st-band-cream{background:var(--cream-deep);}
.st-on-green{position:relative;background:var(--green);color:#fff;isolation:isolate;}
.st-on-green::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--guilloche-cream);background-size:150px 150px;opacity:.05;}
.st-on-green .st-eyebrow{color:var(--gold-leaf);}
.st-on-green p{color:var(--on-green);}
.st-on-green a:not(.btn){color:#fff;text-decoration:underline;text-decoration-color:rgba(233,225,207,.5);text-underline-offset:3px;}

/* ---------- 4. The house menu: what Stories adds to it ---------- */
/* the menu moves as one piece while the page cross-fades (section 17) */
.stories .nav{view-transition-name:site-nav;}

/* ---------- 5. The green trail band ---------- */
/* the house menu is fixed, so the band starts below it */
.st-trail{position:relative;margin-top:var(--nav-h);background:var(--green);isolation:isolate;}
.st-trail::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--guilloche-cream);background-size:150px 150px;opacity:.05;}
.st-trail ol{max-width:64rem;margin:0 auto;padding:.25rem var(--gutter);list-style:none;display:flex;justify-content:center;justify-content:safe center;column-gap:1rem;overflow-x:auto;scrollbar-width:none;}
.st-trail ol::-webkit-scrollbar{display:none;}
.st-trail li{flex:none;display:flex;align-items:center;gap:1rem;min-height:44px;font-size:.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--on-green-soft);white-space:nowrap;}
.st-trail li + li::before{content:"/";opacity:.55;}
.st-trail a{color:var(--on-green-soft);}
.st-trail [aria-current]{color:var(--gold-leaf);border-bottom:1px solid var(--gold-leaf);}
@media (hover:hover) and (pointer:fine){ .st-trail a:hover{color:#fff;} }
@media (max-width:700px){ .st-trail ol{justify-content:flex-start;} }

/* ---------- 6. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.85rem 1.6rem;font-family:var(--font-body);font-size:.875rem;line-height:1.3;letter-spacing:var(--track-nav);text-transform:uppercase;text-align:center;text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out);}
.btn:active{transform:scale(.97);}
.btn-green{background:var(--green);border-color:var(--green);color:#fff;}
.btn-line{background:transparent;border-color:var(--border-strong);color:var(--green);}
.btn-leaf,.btn-gold{background:var(--gold-leaf);border-color:var(--gold-leaf);color:var(--green-deep);}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
@media (hover:hover) and (pointer:fine){
  .btn-green:hover{background:var(--green-deep);border-color:var(--green-deep);}
  .btn-line:hover{border-color:var(--green);background:var(--cream-deep);}
  .btn-leaf:hover,.btn-gold:hover{background:#fff;border-color:#fff;}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
}
.st-actions{display:flex;flex-wrap:wrap;gap:.7rem;}
@media (max-width:420px){ .st-actions > .btn{flex:1 1 100%;} }

/* ---------- 7. Format marks: one small shape per format, used in badges, the bar and calendars ---------- */
.st-fmt{display:inline-flex;align-items:center;gap:.55rem;}
.st-fmt::before{content:"";flex:none;width:.7rem;height:.7rem;border:1.5px solid currentColor;}
[data-format="cover"] .st-fmt::before,.st-fmt[data-format="cover"]::before{background:currentColor;}              /* a filled square: the cover */
[data-format="piece"] .st-fmt::before,.st-fmt[data-format="piece"]::before{border-radius:50%;}                      /* a ring */
[data-format="lesson"] .st-fmt::before,.st-fmt[data-format="lesson"]::before{transform:rotate(45deg) scale(.86);}  /* a facet on a path */
[data-format="almanac"] .st-fmt::before,.st-fmt[data-format="almanac"]::before{border-top-width:4px;}             /* a calendar leaf */
[data-format="note"] .st-fmt::before,.st-fmt[data-format="note"]::before{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;}

/* ---------- 8. The Stories bar: sticks under the menu ---------- */
.st-bar{position:sticky;top:var(--nav-h);z-index:90;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.st-bar ul{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);list-style:none;display:flex;align-items:stretch;justify-content:center;justify-content:safe center;gap:1.5rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.st-bar ul::-webkit-scrollbar{display:none;}
.st-bar li{flex:none;display:flex;}
.st-bar a{position:relative;display:inline-flex;align-items:center;min-height:2.875rem;font-size:.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--green-mid);white-space:nowrap;}
.st-bar a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);clip-path:inset(0 100% 0 0);transition:clip-path 260ms var(--ease-out);}
.st-bar a[aria-current]{color:var(--green);}
.st-bar a[aria-current]::after{clip-path:inset(0);}
@media (hover:hover) and (pointer:fine){ .st-bar a:hover{color:var(--green);} .st-bar a:hover::after{clip-path:inset(0);} }
.st-bar li.st-bar-journal{padding-left:1.5rem;border-left:1px solid var(--border-strong);margin-block:.7rem;}
.st-bar-journal a{min-height:1.475rem;}
.st-bar-journal a > span::after{content:" \2192";}
@media (max-width:1180px){ .st-bar ul{justify-content:flex-start;gap:1.25rem;} }
/* very short screens (a phone on its side): the bar scrolls away instead of sticking */
@media (max-height:520px){ .st-bar{position:relative;top:auto;} }
/* reading progress, on article pages: the bar's bottom edge fills as you read */
.st-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;}
.st-progress i{display:block;height:100%;background:var(--green);clip-path:inset(0 100% 0 0);}

/* ---------- 9. Mastheads ---------- */
/* the front page: a title you open, not a page you land on */
.st-mast{padding-top:2.4rem;text-align:center;}
.st-mast-kicker{display:block;}
.st-mast-title{margin-top:.8rem;font-size:clamp(4rem,12vw,9rem);line-height:.86;letter-spacing:-.015em;}
.st-mast-dek{max-width:44rem;margin:1.3rem auto 0;font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.65;color:var(--green-mid);}
.st-rule{height:5px;border-top:1px solid var(--green);border-bottom:1px solid var(--green);}
.st-mast .st-rule{margin-top:2rem;}
.st-mast .st-mast-meta + .st-rule{margin-top:0;}
.st-mast-meta{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1.5rem;flex-wrap:wrap;padding:.8rem 0;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
.st-mast-meta span:nth-child(2){color:var(--green-mid);}
@media (max-width:700px){ .st-mast-meta{justify-content:center;} }
/* article pages: the same masthead as a running head */
.st-runninghead{padding:1.4rem var(--gutter) 0;text-align:center;}
.st-runninghead a{display:inline-block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.6rem);line-height:1;letter-spacing:-.01em;}
.st-runninghead .st-rule{max-width:var(--wrap);margin:1rem auto 0;}

/* ---------- 10. The story head: the same on every format ---------- */
.st-head{max-width:64rem;margin:0 auto;padding:3rem var(--gutter) 0;text-align:center;}
.st-badge{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .9rem;font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.st-badge .st-fmt{color:var(--green);}
.st-badge > * + *::before{content:"\00B7";margin-right:.9rem;color:var(--green-mid);}
/* sized for long story titles: three lines at most on a laptop, so the hero picture starts near the first screen */
.st-head h1{margin-top:1.2rem;font-size:clamp(2.25rem,5.2vw,4.125rem);line-height:1.04;letter-spacing:-.01em;}
.st-standfirst{max-width:44rem;margin:1.5rem auto 0;font-size:clamp(1.125rem,2.1vw,1.3125rem);line-height:1.6;color:var(--green-mid);}
.st-byline{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.5rem;max-width:46rem;margin:1.9rem auto 0;padding:.95rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.st-byline span{white-space:nowrap;}
.st-byline a{color:var(--green);border-bottom:1px solid var(--border-strong);}
@media (max-width:560px){ .st-head{padding-top:2.2rem;} .st-byline span{white-space:normal;} }
/* narrow screens: a badge stacks its parts instead of wrapping with a stray dot at the start of a line */
@media (max-width:560px){ .st-badge{flex-direction:column;gap:.15rem;} .st-badge > * + *::before{content:none;} }

/* ---------- 11. Closing components, in this order on every story ---------- */
.st-close-title{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.1;}
.st-close-lede{margin-top:.6rem;max-width:36rem;color:var(--green-mid);}

/* 11a. Quick answers (cream band) */
.st-qa{padding-block:4rem 4.2rem;background:var(--cream-deep);}
.st-qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem;}
.st-qa-list > div{background:#fff;padding:1.4rem 1.5rem 1.35rem;border-top:3px solid var(--green);}
.st-qa-list dt{font-family:var(--font-display);font-size:1.25rem;line-height:1.3;}
.st-qa-list dd{margin-top:.55rem;font-size:1.0625rem;line-height:1.75;}
.st-qa-list a{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
@media (max-width:760px){ .st-qa-list{grid-template-columns:minmax(0,1fr);} }

/* 11b. Ask us (green band) */
.st-ask{padding-block:4.2rem 4.4rem;}
.st-ask-inner{max-width:52rem;margin:0 auto;text-align:center;}
.st-ask h2{margin-top:.6rem;font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;}
.st-ask p.st-ask-lede{max-width:38rem;margin:1rem auto 0;line-height:1.75;}
.st-ask .st-actions{justify-content:center;margin-top:1.7rem;}
.st-ask-small{margin-top:1.2rem;font-size:.9375rem;}
.st-ask p.st-ask-small{color:var(--on-green-soft);}

/* 11c. Sources (white) */
.st-sources{padding-block:3.6rem 3.8rem;}
.st-sources-inner{max-width:calc(46rem + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);}
.st-sources h2{font-size:1.6rem;}
.st-sources ol{margin:1.1rem 0 0;padding-left:1.35rem;}
.st-sources li{padding-left:.3rem;font-size:.9375rem;line-height:1.65;color:var(--green-mid);}
.st-sources li + li{margin-top:.7rem;}
.st-sources li::marker{color:var(--green);}
.st-sources a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;}
.st-sources-note{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.9375rem;line-height:1.65;color:var(--green-mid);}

/* 11d. Next in the rotation (cream band) */
.st-next{padding-block:4rem 4.4rem;background:var(--cream-deep);}
.st-next-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:start;}
.st-next-card{display:block;margin-top:1rem;padding:1.6rem 1.6rem 1.7rem;background:#fff;border:1px solid var(--border-strong);}
.st-next-card .st-badge{justify-content:flex-start;align-items:flex-start;}
.st-next-card h2{margin-top:.8rem;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;}
.st-next-card p{margin-top:.7rem;color:var(--green-mid);}
.st-next-go{display:inline-block;margin-top:1.1rem;font-size:.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:.1rem;}
.st-next-go::after{content:" \2192";}
.st-next-card.is-coming{border-style:dashed;background:transparent;}
.st-next-card.is-coming .st-next-go{border-bottom-style:dotted;color:var(--green-mid);}
.st-next-card.is-coming .st-next-go::after{content:none;}
@media (hover:hover) and (pointer:fine){
  a.st-next-card h2{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color 220ms var(--ease-out);}
  a.st-next-card:hover h2{text-decoration-color:currentColor;}
}
.st-rotation ol{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.6rem;counter-reset:rot;}
.st-rotation li{display:flex;}
.st-rotation li > *{position:relative;flex:1;display:flex;flex-direction:column;gap:.35rem;min-height:100%;padding:1rem .9rem 1.05rem;background:#fff;border:1px solid var(--border);}
.st-rotation .st-rot-n{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--green);}
.st-rotation .st-rot-name{font-size:.9375rem;line-height:1.35;color:var(--green);}
.st-rotation .st-rot-when{margin-top:auto;font-size:.875rem;color:var(--green-mid);}
.st-rotation [aria-current]{background:var(--green);border-color:var(--green);}
.st-rotation [aria-current] .st-rot-n,.st-rotation [aria-current] .st-rot-name{color:#fff;}
.st-rotation [aria-current] .st-rot-when{color:var(--gold-leaf);}
@media (hover:hover) and (pointer:fine){ .st-rotation a:hover{border-color:var(--green);} }
.st-rotation-note{margin-top:1rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
@media (max-width:900px){ .st-next-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:560px){ .st-rotation ol{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));} .st-next-card{padding:1.3rem 1.2rem 1.4rem;} }

/* ---------- 12. Shared picture frames ---------- */
.st-frame{position:relative;background:var(--cream-deep);overflow:hidden;overflow:clip;}
.st-frame > img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;}
.st-frame.is-white{background:#fff;}
.st-frame.is-white > img,.st-frame.is-plain > img{mix-blend-mode:normal;}   /* .is-plain: drawings that bring their own colours */
.st-caption{margin-top:.75rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
@media (hover:hover) and (pointer:fine){
  .st-zoom .st-frame > img{transition:scale 280ms var(--ease-out);}
  .st-zoom:hover .st-frame > img{scale:1.03;}
}

/* ---------- 14. The swipeable row and the pinned timeline ([data-hscroll]) ---------- */
/* everywhere: an ordinary row that swipes sideways inside the page, with buttons */
.st-hs{position:relative;}
.st-hs-pin{position:relative;}
.st-hs-track{position:relative;display:flex;gap:1.25rem;margin:0;padding:0 max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter))) 1rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--green) var(--cream-deep);}
.st-hs-track > *{flex:0 0 min(19rem,82%);scroll-snap-align:start;}
.st-hs-btns{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.6rem;}
.st-hs-btns button{display:grid;place-items:center;width:48px;height:48px;padding:0;background:#fff;border:1px solid var(--border-strong);color:var(--green);cursor:pointer;transition:border-color var(--dur-ui) var(--ease-out),opacity var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out);}
.st-hs-btns button:active{transform:scale(.97);}
.st-hs-btns button:disabled{opacity:.4;cursor:default;}
.st-hs-btns svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){ .st-hs-btns button:not(:disabled):hover{border-color:var(--green);} }
html:not(.js) .st-hs-btns{display:none;}
/* wide screens with scroll timelines: the section pins and the row travels sideways as you scroll down */
@supports (animation-timeline: view()){
  @media (min-width:900px) and (prefers-reduced-motion:no-preference){
    .st-hs{height:calc(100svh - var(--sticky-top) + var(--hs-len,120vw));view-timeline:--st-hs block;view-timeline-inset:var(--sticky-top) 0px;}
    .st-hs-pin{position:sticky;top:var(--sticky-top);height:calc(100svh - var(--sticky-top));overflow:hidden;overflow:clip;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;}
    .st-hs-track{width:max-content;overflow:visible;scroll-snap-type:none;padding-inline:max(var(--gutter),calc((100cqi - var(--wrap)) / 2 + var(--gutter)));
      animation:st-hs linear both;animation-timeline:--st-hs;animation-range:contain 0% contain 100%;}
    .st-hs-track > *{flex-basis:19rem;}
    .st-hs-btns{display:none;}
    /* a hairline at the foot of the band fills as the row travels, so the reader can see how far is left */
    .st-hs-pin::before,.st-hs-pin::after{content:"";position:absolute;left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));bottom:.9rem;height:2px;pointer-events:none;}
    .st-hs-pin::before{background:var(--border);}
    .st-hs-pin::after{background:var(--green);clip-path:inset(0 100% 0 0);animation:st-hs-bar linear both;animation-timeline:--st-hs;animation-range:contain 0% contain 100%;}
  }
}
@keyframes st-hs{ from{transform:translateX(0);} to{transform:translateX(calc(-100% + 100cqi));} }
@keyframes st-hs-bar{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0);} }

/* ---------- 15. Count-up figures ([data-count]) ---------- */
[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- 16. Motion: scroll-driven reveals, settling pictures, reading progress ---------- */
/* Nothing is ever hidden at rest: the start state keeps opacity .3. A view() timeline puts
   everything already on the first screen straight into its end state. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    [data-reveal],[data-reveal-group] > *{animation:st-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%;}
    [data-reveal-group] > :nth-child(4n+2){animation-range:entry 6% entry 76%;}
    [data-reveal-group] > :nth-child(4n+3){animation-range:entry 12% entry 82%;}
    [data-reveal-group] > :nth-child(4n+4){animation-range:entry 18% entry 88%;}
    [data-settle] > img,[data-settle] > svg,[data-settle] > picture{animation:st-settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%;}
    [data-parallax]{animation:st-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
  }
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .st-progress i{animation:st-progress linear both;animation-timeline:scroll(root);}
  }
}
@keyframes st-rise{ from{opacity:.3;transform:translate3d(0,28px,0);} to{opacity:1;transform:none;} }
@keyframes st-settle{ from{transform:scale(1.06);} to{transform:none;} }
@keyframes st-drift{ from{transform:translate3d(0,var(--drift,20px),0);} to{transform:translate3d(0,calc(var(--drift,20px) * -1),0);} }
@keyframes st-progress{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }

/* ---------- 17. Page to page: cross-document view transitions ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:var(--ease-out);}
/* a story's picture and its front-page card share a name, so one grows into the other. The build writes each page's
   .vt-hero-<slug>{view-transition-name:hero-<slug>;view-transition-class:st-hero} in that page's head, and a small inline
   script there (pageswap / pagereveal) drops the name from any picture that is not on screen at that end, so a picture
   never flies in from, or off to, outside the window: then the page just cross-fades. */
::view-transition-group(*.st-hero){animation-duration:280ms;animation-timing-function:var(--ease-out);overflow:clip;}
::view-transition-old(*.st-hero),::view-transition-new(*.st-hero){height:100%;object-fit:cover;animation-duration:280ms;}

/* ---------- 18. Reduced motion: everything still ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
  .btn:active,.st-hs-btns button:active{transform:none;}
  .st-zoom:hover .st-frame > img{scale:none;}
  .st-progress{display:none;}
}

/* ---------- 19. Print: no motion, everything visible ---------- */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .nav,.st-bar{position:static;backdrop-filter:none;}
  .nav-utility,.nav-cats,.st-bar,.st-skip,.st-progress,.st-hs-btns{display:none!important;}
  .st-trail{margin-top:0;}
  .st-hs,.st-hs-pin{height:auto!important;position:static!important;}
  .st-hs-track{width:auto!important;overflow:visible!important;flex-wrap:wrap;transform:none!important;}
  .st-hs-pin::before,.st-hs-pin::after{content:none!important;}
  .st-on-green,.st-trail,.foot{background:#fff!important;color:var(--green)!important;}
  .st-on-green p,.st-on-green .st-eyebrow,.foot-col h4,.foot-col a,.foot-col span,.foot-note p{color:var(--green)!important;}
  .btn-ghost{color:var(--green)!important;border-color:var(--green)!important;}
  [data-reveal],[data-reveal-group] > *,[data-settle] > *{opacity:1!important;transform:none!important;}
}

/* =====================================================================
   The front page, /stories/. Every selector is scoped to .stories-front
   ===================================================================== */
.stories-front .fp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:end;margin-bottom:2.2rem;}
.stories-front .fp-head h2{margin-top:.6rem;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;}
.stories-front .fp-head > p{max-width:36rem;color:var(--green-mid);line-height:1.75;}
.stories-front .st-on-green .fp-head > p{color:var(--on-green);}
@media (max-width:860px){ .stories-front .fp-head{grid-template-columns:minmax(0,1fr);} }
.stories-front .fp-label-rule{display:flex;align-items:center;gap:1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);font-family:var(--font-body);}
.stories-front .fp-label-rule::after{content:"";flex:1;height:1px;background:var(--border);}
.stories-front .fp-flag{position:absolute;left:1rem;top:1rem;z-index:1;padding:.35rem .7rem;background:var(--green);color:#fff;font-size:.875rem;line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;}
.stories-front .fp-mediawrap{position:relative;}

/* --- the masthead's rotation strip: the answer to "does every story look the same?", in the first screen --- */
.stories-front .fp-turns{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem 2rem;padding:1rem 0 1.15rem;text-align:left;}
.stories-front .fp-turns-lede{font-size:1.0625rem;line-height:1.5;color:var(--green);}
.stories-front .fp-turns-lede b{font-weight:500;}
.stories-front .fp-turns-next{font-size:.9375rem;line-height:1.5;color:var(--green-mid);}
.stories-front .fp-turns-next{text-align:right;}
.stories-front .fp-turns-next a{color:var(--green);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
.stories-front .fp-turns ol{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.75rem;}
.stories-front .fp-turns li{position:relative;display:flex;}
/* a hairline joins each turn to the next */
.stories-front .fp-turns li + li::before{content:"";position:absolute;right:100%;top:50%;width:.75rem;height:1px;background:var(--border-strong);}
.stories-front .fp-turns ol a{flex:1;display:flex;align-items:center;gap:.85rem;min-height:3.75rem;padding:.6rem 1rem;background:#fff;border:1px solid var(--border-strong);color:var(--green);
  transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out);}
.stories-front .fp-turns ol a:active{transform:scale(.97);}
/* a turn whose story is still to come: the same box, dashed, not a link */
.stories-front .fp-turns ol li > span{flex:1;display:flex;align-items:center;gap:.85rem;min-height:3.75rem;padding:.6rem 1rem;border:1px dashed var(--border-strong);color:var(--green);}
.stories-front .fp-turns-n{flex:none;font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--green-mid);}
.stories-front .fp-turns-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.stories-front .fp-turns .st-fmt{font-size:1rem;line-height:1.35;}
.stories-front .fp-turns-when{font-size:.875rem;line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
/* stories.js marks today after the page has drawn, so today's turn turns green at once instead of fading its white text in on white */
.stories-front .fp-turns .is-today a,.stories-front .fp-turns a.is-today{background:var(--green);border-color:var(--green);color:#fff;transition:transform var(--dur-press) var(--ease-out);}
.stories-front .fp-turns .is-today > span,.stories-front .fp-turns span.is-today{border-style:solid;border-color:var(--green);}
.stories-front .fp-turns .is-today .fp-turns-n{color:var(--gold-leaf);}
.stories-front .fp-turns .is-today .fp-turns-when{color:var(--gold-leaf);}
.stories-front .fp-turns + .st-rule{margin-top:0;}
@media (hover:hover) and (pointer:fine){
  .stories-front .fp-turns li:not(.is-today) a:not(.is-today):hover{border-color:var(--green);background:var(--cream-deep);}
  .stories-front .fp-turns .is-today a:hover,.stories-front .fp-turns a.is-today:hover{background:var(--green-deep);}
}
@media (prefers-reduced-motion:reduce){ .stories-front .fp-turns ol a:active{transform:none;} }
@media (max-width:900px){
  .stories-front .fp-turns{grid-template-columns:minmax(0,1fr);text-align:center;gap:.6rem;}
  .stories-front .fp-turns-next{text-align:center;grid-row:3;}
  .stories-front .fp-turns ol{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
  .stories-front .fp-turns li + li::before{content:none;}
  .stories-front .fp-turns ol a,.stories-front .fp-turns ol li > span{text-align:left;padding:.55rem .75rem;gap:.65rem;}
}
@media (max-width:420px){
  .stories-front .fp-turns-n{font-size:1.5rem;}
  .stories-front .fp-turns .st-fmt::before{display:none;}
  .stories-front .fp-turns-when{text-transform:none;letter-spacing:0;}
}
.stories-front .st-mast-kicker time{white-space:nowrap;}

/* --- the cover: always the newest story, whatever its format --- */
.stories-front .fp-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center;padding-block:3.4rem 4.2rem;}
.stories-front .fp-cover-frame{display:block;aspect-ratio:1;}
.stories-front .fp-cover-frame.is-plain img{padding:6%;}
.stories-front .fp-cover-frame.is-wide{aspect-ratio:16/9;background:var(--green-deep);}
.stories-front .fp-cover-frame.is-wide img{padding:0;}
.stories-front .fp-cover-copy h2{margin-top:1.1rem;font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.02;letter-spacing:-.01em;}
.stories-front .fp-cover-dek{margin-top:1.2rem;font-size:1.1875rem;line-height:1.65;color:var(--green-mid);}
.stories-front .fp-cover-copy .st-badge{justify-content:flex-start;align-items:flex-start;}
.stories-front .fp-label{margin-top:1.6rem;border-top:3px solid var(--green);}
.stories-front .fp-label-title{padding:.8rem 0 .7rem;border-bottom:1px solid var(--border-strong);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-label dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border);}
.stories-front .fp-label dt{padding-top:.1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-label dd{font-size:1rem;line-height:1.55;}
.stories-front .fp-cover-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.8rem;}
.stories-front .fp-cover-foot p{font-size:.9375rem;color:var(--green-mid);}
@media (hover:hover) and (pointer:fine){
  .stories-front .fp-cover-copy h2 a,.stories-front .fp-c h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color 220ms var(--ease-out);}
  .stories-front .fp-cover-copy h2 a:hover,.stories-front a:hover > h3,.stories-front a:hover .fp-tile-txt h3,.stories-front .fp-leaf a:hover h3{text-decoration-color:currentColor;}
}
@media (max-width:900px){ .stories-front .fp-cover{grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:2.2rem 3.2rem;} .stories-front .fp-cover-fig{max-width:34rem;} }
@media (max-width:560px){ .stories-front .fp-label dl div{grid-template-columns:minmax(0,1fr);gap:.1rem;} }

/* --- the calendar's band: a fortnight, day by day --- */
.stories-front .fp-how{padding-block:4.4rem 4.6rem;}
/* Since 13 Oct 2026 the calendar opens its band: How Stories works, which stood above it (its frame and four format
   tiles), is shown to the owner in the admin only, so its rules left this file and the calendar has no gap above it. */
.stories-front .fp-cal{margin-top:0;}
.stories-front .fp-week{margin-top:1.1rem;}
.stories-front .fp-week-label{margin-bottom:.55rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;}
.stories-front .fp-day{display:flex;flex-direction:column;gap:.55rem;min-height:9.6rem;padding:.75rem .75rem .7rem;background:#fff;border:1px solid var(--border);}
.stories-front .fp-date{display:flex;align-items:baseline;gap:.45rem;}
.stories-front .fp-date span{font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-date b{font-family:var(--font-display);font-weight:400;font-size:1.75rem;line-height:1;}
.stories-front .fp-date .fp-today{color:#fff;letter-spacing:var(--track-label);text-transform:uppercase;margin-left:auto;padding:.05rem .45rem;background:var(--green);color:#fff;font-size:.875rem;line-height:1.5;}
.stories-front .fp-day.is-today{border:2px solid var(--green);padding:calc(.75rem - 1px) calc(.75rem - 1px) calc(.7rem - 1px);}
.stories-front .fp-slot{display:flex;flex-direction:column;gap:.2rem;padding:.5rem .6rem .55rem;font-size:.875rem;line-height:1.35;color:var(--green);}
.stories-front .fp-slot .st-fmt{font-size:.875rem;}
.stories-front .fp-slot-t{font-family:var(--font-display);font-size:1rem;line-height:1.25;}
.stories-front .fp-slot[data-format="cover"]{background:var(--green);color:#fff;}
.stories-front .fp-slot[data-format="piece"]{background:var(--cream-deep);border-left:3px solid var(--green);}
.stories-front .fp-slot[data-format="lesson"]{background:#fff;border:1px solid var(--green);}
.stories-front .fp-slot[data-format="almanac"]{background:var(--cream-deep);border-top:4px solid var(--green);}
.stories-front .fp-slot.is-taken{background:transparent;border:1px dashed var(--border-strong);color:var(--green-mid);}
.stories-front a.fp-slot{transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .stories-front a.fp-slot:hover .fp-slot-t{text-decoration:underline;text-underline-offset:3px;} }
.stories-front .fp-day .fp-n{margin-top:auto;font-size:.875rem;color:var(--green-mid);}
.stories-front .fp-day.is-future{background:transparent;border-style:dashed;}
.stories-front .fp-week-notes{display:none;}
.stories-front .fp-rules{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 2.5rem;}
.stories-front .fp-rules li{position:relative;padding:.6rem 0 .6rem 1.5rem;border-top:1px solid var(--border);font-size:1rem;line-height:1.6;}
.stories-front .fp-rules li::before{content:"";position:absolute;left:.15rem;top:1.15rem;width:.45rem;height:.45rem;border:1px solid var(--green);transform:rotate(45deg);}
.stories-front .fp-then{margin-top:1.2rem;font-size:1rem;line-height:1.6;color:var(--green-mid);}
.stories-front .fp-then a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:1020px){ .stories-front .fp-days{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){
  .stories-front .fp-date .fp-today{margin-left:0;}
  .stories-front .fp-days{grid-template-columns:minmax(0,1fr);gap:.4rem;}
  .stories-front .fp-day{min-height:0;display:grid;grid-template-columns:4.4rem minmax(0,1fr);align-items:center;gap:.4rem .8rem;padding:.6rem .75rem;}
  .stories-front .fp-day.is-today{padding:calc(.6rem - 1px) calc(.75rem - 1px);}
  .stories-front .fp-date{grid-column:1;grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:.1rem;}
  .stories-front .fp-today{margin-left:0;}
  .stories-front .fp-slot,.stories-front .fp-day .fp-n{grid-column:2;margin-top:0;}
  .stories-front .fp-rules{grid-template-columns:minmax(0,1fr);}
  /* phones: days with only a note fold into the week's label, so the calendar stays short */
  .stories-front .fp-day.is-note{display:none;}
  .stories-front .fp-week-notes{display:inline;}
}

/* --- this fortnight: one card per format, each in its own look --- */
.stories-front .fp-fortnight{padding-block:4.6rem 4.8rem;}
.stories-front .fp-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem 1.6rem;align-items:start;}
.stories-front .fp-c > .st-badge{display:flex;justify-content:flex-start;align-items:flex-start;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--green);}
.stories-front .fp-c h3{font-size:1.45rem;line-height:1.22;}
.stories-front .fp-c-media{display:block;aspect-ratio:1;}
.stories-front .fp-kick,.stories-front .fp-meta{display:block;margin-top:1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-kick b{font-weight:400;color:var(--green);}
.stories-front .fp-c-cover h3,.stories-front .fp-c-lesson h3{margin-top:.45rem;}
.stories-front .fp-dek{display:block;margin-top:.55rem;font-size:1rem;line-height:1.65;color:var(--green-mid);}
.stories-front .fp-meta{margin-top:.8rem;}
/* A Piece's Life: design D's mosaic tile */
.stories-front .fp-tile{display:block;background:#fff;border:1px solid var(--border);}
.stories-front .fp-tile-txt{display:block;padding:1rem 1.1rem 1.2rem;}
.stories-front .fp-tile-label{display:inline-block;margin-bottom:.5rem;padding:.12rem .55rem;background:var(--green);color:#fff;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
.stories-front .fp-tile-meta{display:block;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-tile h3{margin-top:.4rem;}
.stories-front .fp-figs{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px dashed var(--border-strong);list-style:none;font-size:.875rem;color:var(--green-mid);}
.stories-front .fp-figs b{font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--green);margin-right:.2rem;}
/* The Lesson: design C's card, with its doors */
.stories-front .fp-c-media.is-wide{aspect-ratio:16/9;}
.stories-front .fp-c-lesson .st-eyebrow{display:block;margin-top:1rem;}
.stories-front .fp-doors{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border);}
.stories-front .fp-doors p{font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-doors ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.45rem;}
.stories-front .fp-doors a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;padding:.45rem .85rem;border:1px solid var(--border-strong);font-size:1rem;line-height:1.35;transition:background-color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);}
.stories-front .fp-doors a span{color:var(--green-mid);}
@media (hover:hover) and (pointer:fine){ .stories-front .fp-doors a:hover{background:var(--cream-deep);border-color:var(--green);} }
/* The Almanac: design B's calendar leaf */
.stories-front .fp-leaf{position:relative;padding:1.6rem 1.4rem 1.5rem;background:var(--cream-deep);border:1px solid var(--border);isolation:isolate;}
.stories-front .fp-leaf::before{content:"";position:absolute;inset:.45rem;border:1px solid var(--border);pointer-events:none;}
.stories-front .fp-leaf::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--guilloche);background-size:150px 150px;opacity:.05;pointer-events:none;}
.stories-front .fp-leaf-label{text-align:center;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-mid);}
.stories-front .fp-leaf-date{display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin-top:.8rem;font-family:var(--font-display);}
.stories-front .fp-leaf-day{font-size:4.2rem;line-height:.9;}
.stories-front .fp-leaf-month{font-size:1.45rem;}
.stories-front .fp-leaf-year{text-align:center;margin-top:.45rem;font-size:.9375rem;letter-spacing:.2em;color:var(--green-mid);}
.stories-front .fp-leaf a{display:block;position:relative;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border-strong);}
.stories-front .fp-leaf h3{font-size:1.3rem;}
.stories-front .fp-leaf-text{display:block;margin-top:.5rem;font-size:1rem;line-height:1.65;}
.stories-front .fp-leaf-src{margin-top:.6rem;font-size:.875rem;color:var(--green-mid);}
.stories-front .fp-leaf-go{display:inline-block;margin-top:.8rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;border-bottom:1px solid currentColor;}
.stories-front .fp-leaf-next{position:relative;margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--border);font-size:.9375rem;line-height:1.55;}
.stories-front .fp-leaf-next b{display:block;font-weight:400;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
@media (max-width:1180px){ .stories-front .fp-four{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .stories-front .fp-four{grid-template-columns:minmax(0,1fr);gap:2.6rem;} }

/* --- note from the bench: the reason to come back every morning --- */
.stories-front .fp-notes{padding-block:4.6rem 4.8rem;}
.stories-front .fp-note-grid{display:grid;grid-template-columns:11.5rem minmax(0,1fr);gap:2.6rem;max-width:62rem;margin:0 auto;align-items:start;}
.stories-front .fp-stamp{width:10rem;height:10rem;margin:5px;border-radius:50%;border:1px solid rgba(233,225,207,.75);outline:1px solid rgba(233,225,207,.35);outline-offset:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--gold-leaf);}
.stories-front .fp-stamp .w,.stories-front .fp-stamp .m{font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;}
.stories-front .fp-stamp .d{font-family:var(--font-display);font-size:3.4rem;line-height:1;}
.stories-front .fp-note h2{margin-top:.6rem;font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.1;}
.stories-front .fp-note-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:1.3rem;}
.stories-front .fp-note-fig{display:flex;align-items:baseline;justify-content:center;min-width:6.5rem;padding:.9rem 1rem;border:1px solid var(--on-green-line);font-family:var(--font-display);color:var(--gold-leaf);}
.stories-front .fp-note-fig b{font-weight:400;font-size:3rem;line-height:1;}
.stories-front .fp-note-fig small{font-size:1.25rem;margin-left:.15rem;}
.stories-front .fp-note-text{font-size:1.1875rem;line-height:1.8;max-width:38rem;}
.stories-front .fp-note-sign{margin-top:1.1rem;font-family:var(--font-display);font-size:1.1875rem;}
.stories-front .st-on-green .fp-note-sign{color:var(--gold-leaf);}
.stories-front .fp-note .st-actions{margin-top:1.7rem;}
.stories-front .fp-archive{max-width:62rem;margin:3.6rem auto 0;}
.stories-front .fp-archive .fp-label-rule{color:var(--gold-leaf);}
.stories-front .fp-archive .fp-label-rule::after{background:var(--on-green-line);}
.stories-front .fp-note-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1.8rem;}
.stories-front .fp-note-list li{padding-top:1rem;border-top:1px solid var(--on-green-line);}
.stories-front .fp-note-list li:last-child:nth-child(3n+1){grid-column:1 / -1;}
.stories-front .fp-note-list li:last-child p{max-width:46rem;}
.stories-front .fp-nday{display:block;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-leaf);}
.stories-front .fp-note-list h3{margin-top:.35rem;font-size:1.3rem;line-height:1.25;}
.stories-front .fp-note-list p{margin-top:.4rem;font-size:.9375rem;line-height:1.6;}
.stories-front .fp-note-list .fp-nfig{margin-top:.4rem;font-family:var(--font-display);font-size:1.6rem;line-height:1.1;color:var(--gold-leaf);}
.stories-front .fp-note-list .fp-nfig small{font-size:.8em;}
@media (max-width:860px){
  .stories-front .fp-note-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stories-front .fp-note-list li:last-child:nth-child(3n+1){grid-column:auto;}
  .stories-front .fp-note-list li:last-child:nth-child(2n+1){grid-column:1 / -1;}
}
@media (max-width:700px){
  .stories-front .fp-note-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem;}
  .stories-front .fp-stamp{width:7.5rem;height:7.5rem;}
  .stories-front .fp-stamp .d{font-size:2.5rem;}
}
@media (max-width:560px){
  .stories-front .fp-note-list{grid-template-columns:minmax(0,1fr);gap:0;}
  .stories-front .fp-note-list li{padding:1rem 0 1.1rem;}
  .stories-front .fp-note-body{grid-template-columns:minmax(0,1fr);}
  .stories-front .fp-note-fig{justify-self:start;}
}

/* --- coming next: typographic tiles, never links --- */
.stories-front .fp-coming{padding-block:4.6rem 4.8rem;}
.stories-front .fp-coming-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;}
.stories-front .fp-cc{display:flex;flex-direction:column;border:1px dashed var(--border-strong);}
.stories-front .fp-cc-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--cream-deep);}
.stories-front .fp-cc-tile b{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--green);}
.stories-front .fp-cc-tile.is-green{background:var(--green);}
.stories-front .fp-cc-tile.is-green b{color:var(--gold-leaf);}
.stories-front .fp-cc-txt{padding:1rem 1.1rem 1.2rem;}
.stories-front .fp-cc .st-badge{flex-direction:column;align-items:flex-start;gap:.15rem;}
.stories-front .fp-cc .st-badge > * + *::before{content:none;}
.stories-front .fp-cc h3{margin-top:.5rem;font-size:1.25rem;line-height:1.28;}
.stories-front .fp-cc p.fp-cc-dek{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.stories-front .fp-cc-tag{display:inline-block;margin-top:.8rem;padding:.12rem .5rem;border:1px solid var(--border-strong);font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
@media (max-width:1100px){ .stories-front .fp-coming-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){
  .stories-front .fp-coming-list{grid-template-columns:minmax(0,1fr);gap:1rem;}
  .stories-front .fp-cc{display:grid;grid-template-columns:6.5rem minmax(0,1fr);}
  .stories-front .fp-cc-tile{aspect-ratio:auto;min-height:100%;}
  .stories-front .fp-cc-tile b{font-size:1.6rem;}
  .stories-front .fp-cc-txt{padding:.85rem .9rem 1rem;}
}

/* --- Stories in Stone: the Cover Story's series --- */
.stories-front .fp-series{padding-block:4.8rem 5rem;}
.stories-front .fp-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.6rem;counter-reset:part;}
.stories-front .fp-parts li{position:relative;padding:1.2rem 0 1.4rem 3.4rem;border-top:1px solid var(--on-green-line);counter-increment:part;}
.stories-front .fp-parts li::before{content:counter(part);position:absolute;left:0;top:1.15rem;width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid rgba(233,225,207,.6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.0625rem;color:var(--gold-leaf);}
.stories-front .fp-parts li.is-done::before{background:var(--gold-leaf);border-color:var(--gold-leaf);color:var(--green);}
.stories-front .fp-parts li.is-next::before{background:#fff;border-color:#fff;color:var(--green);}
.stories-front .fp-parts .st{display:block;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--gold-leaf);}
.stories-front .fp-parts .t{display:block;margin-top:.3rem;font-family:var(--font-display);font-size:1.1875rem;line-height:1.3;color:#fff;}
.stories-front .st-on-green .fp-parts a{text-decoration:none;}
.stories-front .fp-parts a .t{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;text-decoration-thickness:1px;}
.stories-front .fp-series-note{margin-top:1.4rem;font-size:1rem;line-height:1.6;}
.stories-front .fp-series .st-actions{margin-top:1.8rem;}
@media (max-width:1000px){ .stories-front .fp-parts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .stories-front .fp-parts{grid-template-columns:minmax(0,1fr);} }

/* --- for brands, the colophon --- */
.stories-front .fp-trade{padding-block:4.2rem;}
.stories-front .fp-trade-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:1.5rem 3rem;align-items:center;padding:2.2rem 0;border-top:1px solid var(--green);border-bottom:1px solid var(--green);}
.stories-front .fp-trade-grid h2{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.1;}
.stories-front .fp-trade-grid p{line-height:1.75;color:var(--green-mid);}
.stories-front .fp-trade-grid p a{color:var(--green);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
.stories-front .fp-trade .st-actions{flex-direction:column;}
@media (max-width:900px){ .stories-front .fp-trade-grid{grid-template-columns:minmax(0,1fr);} .stories-front .fp-trade .st-actions{flex-direction:row;} }
.stories-front .fp-colophon{padding-block:4.4rem;text-align:center;}
.stories-front .fp-colophon img{height:clamp(7.5rem,24vw,11.5rem);width:auto;margin:0 auto;}
.stories-front .fp-colophon p{max-width:38rem;margin:1.6rem auto 0;line-height:1.8;color:var(--green-mid);}
.stories-front .fp-colophon .fp-house{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;margin:1.3rem 0 0;padding:0;list-style:none;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green);}

/* =====================================================================
   The Cover Story (from design A, The Magazine). Every selector is scoped to .format-cover
   ===================================================================== */

/* the series pill, inside the format badge */
.format-cover .cv-pill{display:inline-block;padding:.2rem .75rem;border:1px solid var(--border-strong);}
.format-cover .cv-pill b{font-weight:400;color:var(--green);}

/* the diptych: a two-stone story opens on two pictures */
.format-cover .cv-diptych{max-width:calc(1180px + 2 * var(--gutter));margin:2.6rem auto 0;padding-inline:var(--gutter);}
.format-cover .cv-diptych-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.format-cover .cv-diptych .st-frame{aspect-ratio:1;}
.format-cover .cv-diptych figcaption{margin-top:.9rem;}
@media (max-width:560px){ .format-cover .cv-diptych-grid{gap:.6rem;} }

/* body copy, in one reading column */
.format-cover .cv-body{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:3.4rem var(--gutter) 0;}
.format-cover .cv-body.is-tight{padding-top:2.2rem;}
@media (max-width:700px){ .format-cover .cv-body{padding-top:2.6rem;} .format-cover .cv-body.is-tight{padding-top:1.8rem;} }
.format-cover .cv-body p{line-height:1.85;}
.format-cover .cv-body p + p{margin-top:1.15rem;}
.format-cover .cv-body a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:text-decoration-color 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-cover .cv-body a:hover{text-decoration-color:var(--green);} }
.format-cover .cv-dropcap::first-letter{float:left;font-family:var(--font-display);font-size:4.6rem;line-height:.82;padding:.35rem .6rem 0 0;color:var(--green);}

.format-cover .cv-in-short{margin:0 0 2.6rem;padding:1.5rem 1.6rem 1.6rem;background:var(--cream-deep);border-left:3px solid var(--green);}
.format-cover .cv-in-short .st-eyebrow{color:var(--green);}
.format-cover .cv-in-short p{line-height:1.75;}
.format-cover .cv-in-short p + p{margin-top:.6rem;}

.format-cover .cv-chapter{margin-top:3.4rem;}
.format-cover .cv-in-short + .cv-chapter,.format-cover .cv-body > .cv-chapter:first-child{margin-top:0;}
.format-cover .cv-place{display:block;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-cover .cv-chapter h2{margin-top:.5rem;margin-bottom:1rem;font-size:clamp(1.65rem,3.4vw,2.2rem);line-height:1.15;}

/* the pull quote, on a green band so the opening pages don't run on in flat white */
.format-cover .cv-pull{margin:3.6rem 0 0;padding:4.2rem var(--gutter) 4.4rem;text-align:center;}
.format-cover .cv-pull-inner{position:relative;max-width:52rem;margin:0 auto;padding:2.2rem 0;}
.format-cover .cv-pull-inner::before,.format-cover .cv-pull-inner::after{content:"";position:absolute;left:50%;width:min(14rem,50%);height:1px;background:var(--on-green-line);transform:translateX(-50%);}
.format-cover .cv-pull-inner::before{top:0;}
.format-cover .cv-pull-inner::after{bottom:0;}
.format-cover .cv-mark{display:block;font-family:var(--font-display);font-size:4.5rem;line-height:.6;color:var(--gold-leaf);opacity:.55;}
.format-cover .cv-pull p{margin-top:.6rem;font-family:var(--font-display);font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.3;color:#fff;text-wrap:balance;}

/* the pairing diagrams */
.format-cover .cv-pairings{max-width:calc(52rem + 2 * var(--gutter));margin:2.6rem auto 0;padding-inline:var(--gutter);}
.format-cover .cv-pairings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.format-cover .cv-pairing{background:var(--cream-deep);padding:1.4rem 1.2rem 1.3rem;text-align:center;}
.format-cover .cv-pairing svg{width:100%;max-width:11rem;height:auto;margin:0 auto;}
.format-cover .cv-pairing h3{margin-top:.9rem;font-size:1.375rem;}
.format-cover .cv-pairing p{margin-top:.35rem;font-size:.9375rem;line-height:1.55;color:var(--green-mid);}
.format-cover .cv-pairings figcaption{margin-top:.9rem;}
@media (max-width:640px){
  .format-cover .cv-pairings-grid{grid-template-columns:minmax(0,1fr);}
  .format-cover .cv-pairing{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:center;text-align:left;}
  .format-cover .cv-pairing h3{margin-top:0;}
}

/* the three choices */
.format-cover .cv-choices{margin:1.2rem 0 0;padding:0;list-style:none;counter-reset:cv;}
.format-cover .cv-choices li{position:relative;padding:1rem 0 1rem 3.2rem;border-top:1px solid var(--border);line-height:1.8;counter-increment:cv;}
.format-cover .cv-choices li:last-child{border-bottom:1px solid var(--border);}
.format-cover .cv-choices li::before{content:counter(cv, upper-roman);position:absolute;left:0;top:1rem;width:2.4rem;font-family:var(--font-display);font-size:1.375rem;line-height:1.3;color:var(--green);}
.format-cover .cv-choices + p{margin-top:1.6rem;}

/* three pairs from the bench (cream band) */
.format-cover .cv-bench{margin-top:4.4rem;padding:4.2rem 0 4.6rem;background:var(--cream-deep);}
.format-cover .cv-bench-head{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);}
.format-cover .cv-bench-head h2{margin-top:.5rem;font-size:clamp(1.65rem,3.4vw,2.2rem);line-height:1.15;}
.format-cover .cv-bench-head p:not(.st-eyebrow){margin-top:1rem;line-height:1.85;}
.format-cover .cv-bench-head a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
.format-cover .cv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;max-width:calc(1180px + 2 * var(--gutter));margin:2.8rem auto 0;padding-inline:var(--gutter);}
@media (max-width:960px){ .format-cover .cv-cards{grid-template-columns:minmax(0,1fr);max-width:calc(34rem + 2 * var(--gutter));} }
.format-cover .cv-card{display:flex;flex-direction:column;background:#fff;}
.format-cover .cv-card-media{aspect-ratio:1;}
.format-cover .cv-card-body{display:flex;flex:1;flex-direction:column;padding:1.3rem 1.3rem 1.5rem;}
.format-cover .cv-card-tag{font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-cover .cv-card h3{margin-top:.5rem;font-size:1.3rem;line-height:1.3;}
.format-cover .cv-why{margin-top:.6rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-cover .cv-facts{margin:1rem 0 0;border-top:1px solid var(--border);}
.format-cover .cv-facts div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--border);}
.format-cover .cv-facts dt{padding-top:.1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-cover .cv-facts dd{font-size:.9375rem;line-height:1.55;}
.format-cover .cv-go{margin-top:auto;padding-top:1.2rem;font-size:.875rem;letter-spacing:var(--track-nav);text-transform:uppercase;}
.format-cover .cv-go span{padding-bottom:.15rem;border-bottom:1px solid var(--border-strong);transition:border-color 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-cover .cv-card:hover .cv-go span{border-bottom-color:var(--green);} }
.format-cover .cv-bench-note{max-width:calc(var(--measure) + 2 * var(--gutter));margin:1.8rem auto 0;padding-inline:var(--gutter);font-size:.9375rem;line-height:1.65;color:var(--green-mid);}

/* after the story: the series, the Journal, back to Stories */
.format-cover .cv-after{max-width:var(--wrap);margin:4.4rem auto 0;padding-inline:var(--gutter);}
.format-cover .cv-after-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:2.4rem;padding-block:3.2rem 4.4rem;border-top:1px solid var(--border);}
@media (max-width:900px){ .format-cover .cv-after-grid{grid-template-columns:minmax(0,1fr);gap:2rem;} }
.format-cover .cv-after h2{font-family:var(--font-body);font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-cover .cv-next-part{margin-top:.9rem;padding:1.2rem 1.3rem 1.3rem;border:1px dashed var(--border-strong);}
.format-cover .cv-when{display:block;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-cover .cv-next-part h3{margin-top:.4rem;font-size:1.6rem;line-height:1.2;}
.format-cover .cv-next-part p{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-cover .cv-series-link{display:inline-block;margin-top:.9rem;font-size:.9375rem;line-height:1.5;border-bottom:1px solid var(--border-strong);transition:border-color 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-cover .cv-series-link:hover{border-bottom-color:var(--green);} }
.format-cover .cv-links{list-style:none;margin:.9rem 0 0;padding:0;}
.format-cover .cv-links li{border-top:1px solid var(--border);}
.format-cover .cv-links li:last-child{border-bottom:1px solid var(--border);}
.format-cover .cv-links a{display:block;padding:.85rem 0;font-family:var(--font-display);font-size:1.1875rem;line-height:1.35;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 200ms var(--ease-out);}
.format-cover .cv-links small{display:block;margin-top:.2rem;font-family:var(--font-body);font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
@media (hover:hover) and (pointer:fine){ .format-cover .cv-links a:hover{text-decoration-color:currentColor;} }

/* =====================================================================
   A Piece's Life (from design D, Stories from the Bench). Every selector is scoped to .format-piece
   ===================================================================== */

/* the hero: the band on its cream ground, square, the same picture as the front-page card */
.format-piece .pl-hero{max-width:calc(600px + 2 * var(--gutter));margin:2.6rem auto 0;padding-inline:var(--gutter);}
.format-piece .pl-hero .st-frame{aspect-ratio:1;}
.format-piece .pl-hero .st-caption{text-align:center;}

/* the story beside its ledger */
.format-piece .pl-grid{max-width:1140px;margin:0 auto;padding:3.25rem var(--gutter) 4.5rem;display:grid;grid-template-columns:minmax(0,1fr) 19.5rem;gap:4rem;align-items:start;}
.format-piece .pl-body{max-width:var(--measure);min-width:0;}
.format-piece .pl-body section > p{line-height:1.85;}
.format-piece .pl-body section > p + p{margin-top:1.05rem;}
.format-piece .pl-body section > p a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:text-decoration-color var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-piece .pl-body section > p a:hover{text-decoration-color:currentColor;} }

/* In short */
.format-piece .pl-short{padding:1.25rem 1.4rem;background:var(--cream-deep);border-left:3px solid var(--green);}
.format-piece .pl-short .st-eyebrow{display:block;margin-bottom:.4rem;}
.format-piece .pl-short p{font-size:1.125rem;line-height:1.75;}

/* chapter heads: a roman numeral and a rule */
.format-piece .pl-ch{display:flex;align-items:baseline;gap:1rem;margin:3.2rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--border);}
.format-piece .pl-ch > span{flex:none;min-width:2.2rem;font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--green-mid);}
.format-piece .pl-ch h2{font-size:clamp(1.5rem,3.2vw,1.95rem);line-height:1.2;}

/* a line from the bench */
.format-piece .pl-note{margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:2px solid var(--green);}
.format-piece .pl-note p{font-family:var(--font-display);font-size:1.4rem;line-height:1.4;}
.format-piece .pl-note small{display:block;margin-top:.5rem;font-family:var(--font-body);font-size:.9375rem;line-height:1.6;color:var(--green-mid);}

/* line drawings on the drawing-board grid */
.format-piece .pl-fig{margin:2rem 0;padding:1.4rem 1.4rem 1.1rem;border:1px solid var(--border);background-color:var(--cream-deep);background-image:var(--graph);background-size:18px 18px;}
.format-piece .pl-fig-svg{width:100%;max-width:21rem;height:auto;margin:0 auto;}
.format-piece .pl-legend{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-piece .pl-legend i{display:inline-block;width:.9rem;height:.9rem;margin-right:.45rem;vertical-align:-.12rem;border:1.2px solid var(--green);}
.format-piece .pl-legend i.is-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--green);vertical-align:.05rem;}
.format-piece .pl-legend i.is-fill{background:rgba(11,69,50,.12);}
.format-piece .pl-fig .st-caption{text-align:center;}

/* two renders side by side */
.format-piece .pl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0;}
.format-piece .pl-pair .st-frame{aspect-ratio:1;border:1px solid var(--border);}

/* the job card: the piece in figures */
.format-piece .pl-ledger{min-width:0;border:1px solid var(--border-strong);background:#fff;}
.format-piece .pl-ledger-head{padding:1rem 1.2rem 1.1rem;background:var(--green);color:#fff;}
.format-piece .pl-ledger-head .st-eyebrow{display:block;color:var(--gold-leaf);}
.format-piece .pl-ledger-head h2{margin-top:.3rem;font-size:1.3rem;line-height:1.3;}
.format-piece .pl-ledger dl{padding:.4rem 1.2rem 1rem;}
.format-piece .pl-ledger dt{margin-top:.85rem;font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-piece .pl-ledger dd{margin:.15rem 0 0;font-size:1rem;line-height:1.55;font-variant-numeric:tabular-nums;}
.format-piece .pl-ledger table{width:100%;border-collapse:collapse;margin-top:.3rem;font-size:1rem;font-variant-numeric:tabular-nums;}
.format-piece .pl-ledger td{padding:.2rem 0;border-bottom:1px dashed var(--border);}
.format-piece .pl-ledger td + td{text-align:right;}
.format-piece .pl-ledger-src{padding:0 1.2rem 1.1rem;font-size:.875rem;line-height:1.55;color:var(--green-mid);}
.format-piece .pl-ledger .btn{display:flex;margin:0 1.2rem 1.2rem;}
/* wide screens: the ledger keeps the reader company. It is taller than most laptop screens, so it travels with the
   story until its foot reaches the bottom of the screen and then stays there; on tall screens it sticks at the top. */
@media (min-width:1061px){
  .format-piece .pl-ledger{position:sticky;bottom:1.5rem;align-self:end;}
}
@media (min-width:1061px) and (min-height:1140px){
  .format-piece .pl-ledger{top:calc(var(--sticky-top) + 1.5rem);bottom:auto;align-self:start;}
}

/* Read next (a green band, so the long white story is followed by a change of tone) */
.format-piece .pl-readnext{padding-block:3.6rem 4rem;}
.format-piece .pl-readnext h2{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.1;}
.format-piece .pl-rn-grid{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
.format-piece .pl-rn-grid > li{display:flex;}
.format-piece .pl-readnext a.pl-rn{display:block;flex:1;background:#fff;color:var(--green);text-decoration:none;}
.format-piece .pl-rn .st-frame{aspect-ratio:1;}
.format-piece .pl-rn-type{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--cream-deep);}
.format-piece .pl-rn-type b{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--green);}
.format-piece .pl-rn-txt{display:block;padding:.9rem 1rem 1.1rem;}
.format-piece .pl-rn-kicker{display:block;font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-piece .pl-rn h3{margin-top:.35rem;font-size:1.15rem;line-height:1.35;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-piece .pl-readnext a.pl-rn:hover h3{text-decoration-color:currentColor;} }
.format-piece .pl-readnext a.pl-rn:focus-visible{outline-color:#fff;}

@media (max-width:1060px){
  .format-piece .pl-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem;}
  .format-piece .pl-body{margin:0 auto;width:100%;}
  .format-piece .pl-ledger{max-width:var(--measure);margin:0 auto;width:100%;}
  .format-piece .pl-rn-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .format-piece .pl-hero{margin-top:2rem;}
  .format-piece .pl-grid{padding-top:2.5rem;}
  .format-piece .pl-pair{grid-template-columns:minmax(0,1fr);}
  .format-piece .pl-fig{padding:1.1rem 1rem 1rem;}
  .format-piece .pl-rn-grid{gap:.8rem;}
  .format-piece .pl-rn-txt{padding:.8rem .8rem 1rem;}
  .format-piece .pl-rn h3{font-size:1.05rem;}
  .format-piece .pl-ledger .btn{margin-inline:1rem;}
}

/* motion, this format only: in the drawing of the circle, the stones are set one after another as the
   drawing comes up the screen (opacity only: the stones keep their own SVG rotation). This drawing has no data-reveal of
   its own, so the stones never fade twice; nothing starts below .3, and
   with reduced motion, without scroll timelines or in print every stone is simply there. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* up to nineteen stones keep the approved pace. Given the count as --stones on the figure, a larger circle is set
       faster, so its last stone is set before the drawing leaves the screen; without it every circle keeps the pace */
    .format-piece .pl-ring{view-timeline:--pl-ring block;--pl-step:calc(28.5% / max(19, var(--stones, 19)));}
    .format-piece .pl-ring .pl-s{animation:pl-set linear both;animation-timeline:--pl-ring;animation-range:cover calc(12% + var(--i) * var(--pl-step)) cover calc(16% + var(--i) * var(--pl-step));}
    .format-piece .pl-ring .pl-c{animation:pl-set linear both;animation-timeline:--pl-ring;animation-range:cover calc(13.5% + var(--i) * var(--pl-step)) cover calc(17.5% + var(--i) * var(--pl-step));}
  }
}
@keyframes pl-set{ from{opacity:.3;} to{opacity:1;} }
@media print{
  .format-piece .pl-ledger{position:static;}
  .format-piece .pl-grid{grid-template-columns:minmax(0,1fr);}
}

/* =====================================================================
   The Lesson (from design C, The Study). Every selector is scoped to .format-lesson
   ===================================================================== */

/* --- the lead drawing: shares hero-1954 with the front-page card, so one grows into the other --- */
.format-lesson .ls-hero{max-width:calc(60rem + 2 * var(--gutter));margin:2.6rem auto 0;padding-inline:var(--gutter);}
.format-lesson .ls-hero .st-frame{aspect-ratio:16/9;background:var(--green-deep);}
.format-lesson .ls-hero .st-frame > img{width:100%;height:100%;object-fit:cover;}
.format-lesson .ls-hero .st-caption{text-align:center;}

/* --- the start of the lesson: where it sits on the path, in short, what you will know (cream band) --- */
.format-lesson .ls-start{margin-top:3rem;padding:3rem var(--gutter) 3.2rem;background:var(--cream-deep);}
.format-lesson .ls-start > *{max-width:42rem;margin-inline:auto;}

/* path stepper */
.format-lesson .ls-stepper{--step:44px;}
.format-lesson .ls-steps{position:relative;display:flex;justify-content:space-between;margin:0;padding:0;list-style:none;}
.format-lesson .ls-steps::before{content:"";position:absolute;left:calc(var(--step) / 2);right:calc(var(--step) / 2);top:50%;height:1px;background:var(--border-strong);}
/* how far along the path this lesson is: a green line from lesson 1 to this one. The renderer sets --n (lessons on the
   path) and --k (this lesson's place) from the path file; without them the line is not drawn */
.format-lesson .ls-steps::after{content:"";position:absolute;left:calc(var(--step) / 2);top:50%;width:calc((100% - var(--step)) * (var(--k, 1) - 1) / max(var(--n, 2) - 1, 1));height:2px;margin-top:-.5px;background:var(--green);}
.format-lesson .ls-steps li{position:relative;z-index:1;}
.format-lesson .ls-steps a,.format-lesson .ls-steps span.n{position:relative;display:flex;align-items:center;justify-content:center;width:var(--step);height:var(--step);border-radius:50%;background:#fff;border:1px solid var(--border-strong);font-family:var(--font-display);font-size:1.1rem;color:var(--green);
  transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out),transform var(--dur-press) var(--ease-out);}
.format-lesson .ls-steps a:active{transform:scale(.97);}
.format-lesson .ls-steps .soon span.n{color:var(--green-mid);border-style:dashed;background:var(--cream-deep);}
.format-lesson .ls-steps span.n[aria-current]{background:var(--green);color:#fff;border-color:var(--green);}
/* a lesson the reader marked as read in this browser */
.format-lesson .ls-steps .done a{border-color:var(--green);}
.format-lesson .ls-steps .done a::after{content:"";position:absolute;right:-1px;top:-1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--cream-deep);}
.format-lesson .ls-step-caption{margin-top:.9rem;text-align:center;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-lesson .ls-step-caption a{color:var(--green);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .format-lesson .ls-steps a:hover{border-color:var(--green);}
  .format-lesson .ls-step-caption a:hover{text-decoration-color:currentColor;}
}

/* in short, and what you'll know */
.format-lesson .ls-short{position:relative;margin-top:2.2rem;padding:1.6rem 1.8rem 1.7rem;background:#fff;text-align:left;}
.format-lesson .ls-short::before{content:"";position:absolute;left:1.8rem;top:0;width:2.5rem;height:3px;background:var(--green);}
.format-lesson .ls-label{margin-bottom:.4rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-lesson .ls-short p:not(.ls-label){font-size:1.125rem;line-height:1.75;}
.format-lesson .ls-learn{margin-top:1rem;padding:1.3rem 1.8rem;border:1px solid var(--border-strong);text-align:left;}
.format-lesson .ls-learn ul{margin:.6rem 0 0;padding-left:1.2rem;}
.format-lesson .ls-learn li{padding-left:.3rem;font-size:1.0625rem;line-height:1.65;}
.format-lesson .ls-learn li + li{margin-top:.35rem;}
.format-lesson .ls-learn li::marker{color:var(--green);}
.format-lesson .ls-outline-sm{display:none;}

/* --- the lesson and its side rail --- */
.format-lesson .ls-lesson{display:grid;grid-template-columns:minmax(0,40rem) 15.5rem;gap:4.5rem;justify-content:center;padding:4rem var(--gutter) 4.6rem;}

.format-lesson .ls-body{counter-reset:sec;}
.format-lesson .ls-body p,.format-lesson .ls-body li{font-size:1.1875rem;line-height:1.85;}
.format-lesson .ls-body p + p{margin-top:1.1rem;}
.format-lesson .ls-body > p:first-of-type::first-letter{float:left;margin:.1em .12em 0 0;font-family:var(--font-display);font-size:5.1em;line-height:.82;color:var(--green);}
.format-lesson .ls-body > h2{counter-increment:sec;margin-top:3.8rem;padding-top:1.4rem;border-top:1px solid var(--border-strong);font-size:clamp(1.7rem,3.6vw,2.35rem);line-height:1.12;}
.format-lesson .ls-body > h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.8rem;font-family:var(--font-body);font-size:.875rem;letter-spacing:.22em;color:var(--green-mid);}
.format-lesson .ls-body > h2:first-child{margin-top:0;}
/* the title rises inside a still heading, so a link to the heading lands where it should */
.format-lesson .ls-body > h2 > .ls-h{display:block;}
.format-lesson .ls-body > h2.kit{counter-increment:none;}
.format-lesson .ls-body > h2.kit::before{content:none;}
.format-lesson .ls-body h2 + p{margin-top:1.1rem;}
.format-lesson .ls-body a:not(.btn){color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:text-decoration-color var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-lesson .ls-body a:not(.btn):hover{text-decoration-color:currentColor;} }

.format-lesson .ls-body blockquote{margin:2rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--green);}
.format-lesson .ls-body blockquote p{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.35;}
.format-lesson .ls-body blockquote cite{display:block;margin-top:.6rem;font-size:.9375rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-lesson .ls-note{margin:1.8rem 0;padding:1.1rem 1.3rem;background:var(--cream-deep);border-left:3px solid var(--green-mid);}
.format-lesson .ls-body .ls-note p{font-size:1.0625rem;line-height:1.7;}
.format-lesson .ls-note .ls-label{display:block;margin-bottom:.3rem;}

/* timeline: a green panel inside the lesson */
.format-lesson .ls-timeline{margin:2.4rem 0 .5rem;padding:1.6rem 1.6rem .6rem;}
.format-lesson .ls-timeline::before{opacity:.06;}
.format-lesson .ls-timeline h3{color:#fff;font-size:1.5rem;line-height:1.25;}
.format-lesson .ls-timeline ol{margin:1.2rem 0 0;padding:0;list-style:none;}
.format-lesson .ls-timeline li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-top:1px solid var(--on-green-line);}
.format-lesson .ls-timeline .y{font-family:var(--font-display);font-size:1.35rem;line-height:1.3;color:var(--gold-leaf);}
.format-lesson .ls-body .ls-timeline li p{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.88);}
.format-lesson .ls-timeline li.key .y,.format-lesson .ls-body .ls-timeline li.key p{color:#fff;}
.format-lesson .ls-timeline li.key .y{text-decoration:underline;text-decoration-color:var(--gold-leaf);text-decoration-thickness:1px;text-underline-offset:6px;}

/* comparison table */
.format-lesson .ls-compare{width:100%;margin:1.8rem 0 1.4rem;border-collapse:collapse;font-size:1rem;}
.format-lesson .ls-compare caption{padding-bottom:.6rem;text-align:left;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-lesson .ls-compare th,.format-lesson .ls-compare td{padding:.75rem .8rem;text-align:left;vertical-align:top;line-height:1.55;border-bottom:1px solid var(--border);}
.format-lesson .ls-compare thead th{background:var(--cream-deep);border-bottom:1px solid var(--border-strong);font-family:var(--font-display);font-weight:400;font-size:1.15rem;}
.format-lesson .ls-compare tbody th{width:9rem;font-weight:500;font-size:.9375rem;letter-spacing:.02em;color:var(--green-mid);}

/* pieces: the lesson ends at three rings from the shop */
.format-lesson .ls-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:1.6rem;}
.format-lesson .ls-body a.ls-piece{display:block;text-decoration:none;}
.format-lesson .ls-piece .st-frame{aspect-ratio:1/1;}
.format-lesson .ls-piece-name{margin-top:.8rem;font-family:var(--font-display);font-size:1.15rem;line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 220ms var(--ease-out);}
.format-lesson .ls-body p.ls-piece-name{font-size:1.15rem;line-height:1.3;}
.format-lesson .ls-body .ls-piece-why{margin-top:.4rem;font-size:1rem;line-height:1.6;color:var(--green-mid);}
@media (hover:hover) and (pointer:fine){ .format-lesson a.ls-piece:hover .ls-piece-name{text-decoration-color:currentColor;} }

/* check yourself: the answer opens with a short fade, the plus turns into a minus */
.format-lesson .ls-check{margin-top:1.4rem;border-top:1px solid var(--border-strong);}
.format-lesson .ls-check details{border-bottom:1px solid var(--border-strong);}
.format-lesson .ls-check summary{display:grid;grid-template-columns:2.2rem minmax(0,1fr) 1.5rem;gap:.6rem;align-items:start;padding:1.05rem 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:1.25rem;line-height:1.35;}
.format-lesson .ls-check summary::-webkit-details-marker{display:none;}
.format-lesson .ls-check summary .q{padding-top:.3rem;font-family:var(--font-body);font-size:.875rem;letter-spacing:.14em;color:var(--green-mid);}
.format-lesson .ls-pm{position:relative;justify-self:end;width:14px;height:14px;margin-top:.45rem;color:var(--green-mid);}
.format-lesson .ls-pm::before,.format-lesson .ls-pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:currentColor;}
.format-lesson .ls-pm::after{transform:rotate(90deg);transition:transform 200ms var(--ease-out);}
.format-lesson .ls-check details[open] .ls-pm::after{transform:rotate(0deg);}
@media (hover:hover) and (pointer:fine){ .format-lesson .ls-check summary:hover .ls-pm{color:var(--green);} }
.format-lesson .ls-body .ls-check details p{padding:0 0 1.2rem 2.8rem;font-size:1.0625rem;line-height:1.7;}

/* mark as read */
.format-lesson .ls-read-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--border);}
.format-lesson .ls-body .ls-read-row p{font-size:1rem;line-height:1.6;color:var(--green-mid);}

/* next in this path: a green panel at the end of the lesson */
.format-lesson .ls-path{margin-top:3rem;padding:2rem 2rem 1.8rem;}
.format-lesson .ls-path h2{margin-top:.7rem;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;color:#fff;}
.format-lesson .ls-body .ls-path p.ls-path-lede{margin-top:.9rem;font-size:1.0625rem;line-height:1.7;}
.format-lesson .ls-path .btn{margin-top:1.4rem;}
.format-lesson .ls-path ol{margin:1.8rem 0 0;padding:0;list-style:none;counter-reset:n;}
.format-lesson .ls-body .ls-path li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem;padding:.8rem 0;border-top:1px solid var(--on-green-line);counter-increment:n;font-size:1rem;line-height:1.5;color:var(--on-green);}
.format-lesson .ls-path li:last-child{border-bottom:1px solid var(--on-green-line);}
.format-lesson .ls-path li::before{content:counter(n,decimal-leading-zero);padding-top:.15rem;font-size:.875rem;letter-spacing:.12em;color:var(--gold-leaf);}
.format-lesson .ls-body .ls-path li a{color:#fff;text-decoration-color:rgba(233,225,207,.5);}
.format-lesson .ls-body .ls-path li.here{color:#fff;}
.format-lesson .ls-path li small{grid-column:2;display:block;margin-top:-.3rem;font-size:.875rem;color:var(--on-green-soft);}

/* the side rail: sticks beside the lesson on wide screens and marks the part you are reading */
.format-lesson .ls-rail{position:relative;}
.format-lesson .ls-rail-inner{position:sticky;top:calc(var(--sticky-top) + 1.5rem);max-height:calc(100vh - var(--sticky-top) - 3rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
.format-lesson .ls-rail h2{font-family:var(--font-body);font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-lesson .ls-rail ol{margin:.8rem 0 0;padding:0;list-style:none;border-left:1px solid var(--border-strong);}
.format-lesson .ls-rail ol a{position:relative;display:block;padding:.38rem 0 .38rem 1rem;font-size:.9375rem;line-height:1.45;color:var(--green-mid);transition:color var(--dur-ui) var(--ease-out);}
.format-lesson .ls-rail ol a::before{content:"";position:absolute;left:-1px;top:.35rem;bottom:.35rem;width:2px;background:var(--green);transform:scaleY(.2);opacity:0;transition:opacity var(--dur-ui) var(--ease-out),transform 240ms var(--ease-out);}
.format-lesson .ls-rail ol a.is-here{color:var(--green);}
.format-lesson .ls-rail ol a.is-here::before{opacity:1;transform:none;}
html:not(.js) .format-lesson .ls-rail ol a{color:var(--green);}
@media (hover:hover) and (pointer:fine){ .format-lesson .ls-rail ol a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px;} }
.format-lesson .ls-words{margin-top:1.6rem;}
.format-lesson .ls-words ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0;padding:0;list-style:none;}
.format-lesson .ls-words li{display:inline-flex;align-items:center;min-height:36px;padding:.25rem .7rem;background:var(--cream-deep);font-size:.9375rem;line-height:1.4;}
.format-lesson .ls-rail .btn{width:100%;margin-top:1.6rem;}

/* --- motion that belongs to this format (the shared reveals come from stories.css) --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* the green line along the path draws in as the stepper comes into view */
    .format-lesson .ls-steps::after{animation:ls-draw linear both;animation-timeline:view();animation-range:entry 30% cover 40%;}
  }
}
@keyframes ls-draw{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0);} }
@media (prefers-reduced-motion:no-preference){
  .format-lesson .ls-check details[open] > p{animation:ls-answer 220ms var(--ease-out);}
}
@keyframes ls-answer{ from{opacity:0;transform:translate3d(0,-6px,0);} to{opacity:1;transform:none;} }

/* --- smaller screens --- */
@media (max-width:1100px){
  .format-lesson .ls-lesson{grid-template-columns:minmax(0,40rem);gap:0;}
  .format-lesson .ls-rail{display:none;}
  .format-lesson .ls-outline-sm{display:block;margin-top:1rem;background:#fff;border:1px solid var(--border);text-align:left;}
  .format-lesson .ls-outline-sm summary{display:flex;align-items:center;min-height:48px;padding:0 1.3rem;cursor:pointer;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
  .format-lesson .ls-outline-sm ol{margin:0;padding:0 1.3rem 1rem 2.6rem;}
  .format-lesson .ls-outline-sm li{padding:.25rem 0;font-size:1rem;}
  .format-lesson .ls-outline-sm a{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
}
@media (max-width:760px){
  .format-lesson .ls-pieces{grid-template-columns:minmax(0,1fr);}
  .format-lesson .ls-body a.ls-piece{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:start;}
  .format-lesson .ls-piece-name{margin-top:0;}
  .format-lesson .ls-path{padding:1.6rem 1.25rem 1.4rem;}
}
@media (max-width:600px){
  .format-lesson .ls-hero{margin-top:2rem;}
  .format-lesson .ls-start{margin-top:2.2rem;padding:2.4rem var(--gutter) 2.6rem;}
  .format-lesson .ls-stepper{--step:40px;}
  .format-lesson .ls-steps a,.format-lesson .ls-steps span.n{font-size:1rem;}
  .format-lesson .ls-short{padding:1.4rem 1.3rem;}
  .format-lesson .ls-short::before{left:1.3rem;}
  .format-lesson .ls-learn{padding:1.2rem 1.3rem;}
  .format-lesson .ls-lesson{padding:2.8rem var(--gutter) 3.6rem;}
  .format-lesson .ls-body p,.format-lesson .ls-body li{font-size:1.125rem;}
  .format-lesson .ls-body > p:first-of-type::first-letter{font-size:4.2em;}
  .format-lesson .ls-timeline{padding:1.3rem 1.2rem .4rem;}
  .format-lesson .ls-timeline li{grid-template-columns:3.6rem minmax(0,1fr);gap:.7rem;}
  .format-lesson .ls-body .ls-check details p{padding-left:0;}
}
@media (max-width:560px){
  .format-lesson .ls-compare thead{display:none;}
  .format-lesson .ls-compare,.format-lesson .ls-compare caption,.format-lesson .ls-compare tbody,.format-lesson .ls-compare tr,.format-lesson .ls-compare th,.format-lesson .ls-compare td{display:block;width:100%;}
  .format-lesson .ls-compare tr{padding:.8rem 0;border-bottom:1px solid var(--border-strong);}
  .format-lesson .ls-compare th,.format-lesson .ls-compare td{padding:.2rem 0;border:0;}
  .format-lesson .ls-compare tbody th{width:auto;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
  .format-lesson .ls-compare td::before{content:attr(data-label) ": ";font-weight:500;}
}

/* --- reduced motion and print --- */
@media (prefers-reduced-motion:reduce){
  .format-lesson .ls-steps a,.format-lesson .ls-pm::after,.format-lesson .ls-rail ol a::before{transition:none;}
  .format-lesson .ls-steps a:active{transform:none;}
}
@media print{
  .format-lesson .ls-rail,.format-lesson .ls-read-row,.format-lesson .ls-outline-sm{display:none!important;}
  .format-lesson .ls-lesson{grid-template-columns:minmax(0,1fr);}
  .format-lesson .ls-timeline,.format-lesson .ls-path{background:#fff!important;color:var(--green)!important;border:1px solid var(--green);}
  .format-lesson .ls-timeline h3,.format-lesson .ls-timeline .y,.format-lesson .ls-body .ls-timeline li p,.format-lesson .ls-path h2,.format-lesson .ls-body .ls-path li,.format-lesson .ls-path li small,.format-lesson .ls-path li::before{color:var(--green)!important;}
  .format-lesson .ls-path .btn{display:none;}
}

/* =====================================================================
   The Almanac. Every selector is scoped to .format-almanac
   ===================================================================== */

/* --- the exhibit: the drawing beside its museum label (first screen: no motion) --- */
.format-almanac .alm-exhibit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.4rem 3.5rem;align-items:start;max-width:calc(66rem + 2 * var(--gutter));margin-top:3rem;}
.format-almanac .alm-hero-frame{aspect-ratio:1;}
.format-almanac .alm-hero-frame img{padding:6%;}
.format-almanac .alm-label{border-top:3px solid var(--green);}
.format-almanac .alm-label-title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;padding:.85rem 0 .75rem;border-bottom:1px solid var(--border-strong);font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-label dl div{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border);}
.format-almanac .alm-label dt{padding-top:.12rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-label dd{font-size:1rem;line-height:1.55;}
@media (max-width:900px){
  .format-almanac .alm-exhibit{grid-template-columns:minmax(0,1fr);max-width:calc(34rem + 2 * var(--gutter));gap:2rem;}
}
@media (max-width:560px){
  .format-almanac .alm-exhibit{margin-top:2.2rem;}
  .format-almanac .alm-label dl div{grid-template-columns:minmax(0,1fr);gap:.1rem;}
}

/* --- In short, and the contents of the entry --- */
.format-almanac .alm-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:2rem 3rem;align-items:start;max-width:calc(66rem + 2 * var(--gutter));margin-top:3.5rem;}
.format-almanac .alm-intro h2{font-family:var(--font-body);font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-short{position:relative;padding:1.6rem 1.8rem 1.7rem;background:var(--cream-deep);}
.format-almanac .alm-short::before{content:"";position:absolute;left:1.8rem;top:0;width:2.5rem;height:3px;background:var(--green);}
.format-almanac .alm-short p{margin-top:.5rem;font-size:1.125rem;line-height:1.75;}
.format-almanac .alm-toc ol{list-style:none;margin:.6rem 0 0;padding:0;border-top:1px solid var(--border-strong);}
.format-almanac .alm-toc li{border-bottom:1px solid var(--border);}
.format-almanac .alm-toc a{display:flex;align-items:baseline;gap:.9rem;min-height:44px;padding:.6rem 0;font-size:1rem;line-height:1.4;}
.format-almanac .alm-toc a > span{flex:none;width:1.9rem;font-size:.875rem;letter-spacing:var(--track-label);color:var(--green-mid);}
.format-almanac .alm-toc a > b{font-weight:400;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-almanac .alm-toc a:hover > b{text-decoration-color:currentColor;} }
.format-almanac .alm-today{margin-top:1rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-almanac .alm-today .st-fmt{color:var(--green);}
.format-almanac .alm-today a{color:var(--green);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
@media (max-width:860px){ .format-almanac .alm-intro{grid-template-columns:minmax(0,1fr);max-width:calc(var(--measure) + 2 * var(--gutter));} }
@media (max-width:560px){ .format-almanac .alm-short{padding:1.4rem 1.3rem;} .format-almanac .alm-short::before{left:1.3rem;} }

/* --- the chapters: the text in a reading column, the years held in the margin --- */
.format-almanac .alm-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) minmax(0,1fr);column-gap:3rem;max-width:var(--wrap);margin:0 auto;padding:4.2rem var(--gutter) 0;}
.format-almanac .alm-ch-when{grid-column:1;grid-row:1;justify-self:end;align-self:start;position:sticky;top:calc(var(--sticky-top) + 1.5rem);margin-top:1.4rem;text-align:right;font-family:var(--font-display);font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1;color:var(--green);}
.format-almanac .alm-ch-when small{display:block;margin-top:.45rem;font-family:var(--font-body);font-size:.875rem;line-height:1.4;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-ch-text{grid-column:2;grid-row:1;}
.format-almanac .alm-ch h2{padding-top:1.4rem;border-top:1px solid var(--border-strong);font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12;}
.format-almanac .alm-n{display:block;margin-bottom:.8rem;font-family:var(--font-body);font-size:.875rem;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-ch p{font-size:1.1875rem;line-height:1.85;}
.format-almanac .alm-ch h2 + p,.format-almanac .alm-ch p + p{margin-top:1.1rem;}
.format-almanac .alm-ch a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);}
@media (hover:hover) and (pointer:fine){ .format-almanac .alm-ch a:hover{text-decoration-color:var(--green);} }
.format-almanac .alm-dropcap::first-letter{float:left;margin:.1em .12em 0 0;font-family:var(--font-display);font-size:5.2em;line-height:.82;color:var(--green);}
.format-almanac .alm-ch p.alm-pull{margin:2.6rem 0 0;padding:1.6rem 0;border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);font-family:var(--font-display);font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.3;text-align:center;}
@media (max-width:1100px){
  .format-almanac .alm-ch{grid-template-columns:minmax(0,1fr);max-width:calc(var(--measure) + 2 * var(--gutter));padding-top:3.6rem;}
  .format-almanac .alm-ch-when{position:static;grid-column:1;grid-row:auto;justify-self:start;margin:0 0 .7rem;text-align:left;display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem;font-size:1.5rem;}
  .format-almanac .alm-ch-when small{margin-top:0;}
  .format-almanac .alm-ch-text{grid-column:1;grid-row:auto;}
}
@media (max-width:560px){ .format-almanac .alm-dropcap::first-letter{font-size:4.2em;} .format-almanac .alm-ch p{font-size:1.125rem;line-height:1.8;} }

/* the grading card in chapter 05 */
.format-almanac .alm-grade{margin-top:2rem;padding:1.3rem 1.4rem 1.2rem;background:var(--cream-deep);border-top:3px solid var(--green);}
.format-almanac .alm-grade h3{font-family:var(--font-body);font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-grade dl{margin-top:.6rem;}
.format-almanac .alm-grade dl div{display:grid;grid-template-columns:7.6rem minmax(0,1fr);gap:1rem;padding:.55rem 0;border-top:1px solid var(--border);}
.format-almanac .alm-grade dt{padding-top:.1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-grade dd{font-size:1rem;line-height:1.55;}
.format-almanac .alm-ch p.alm-grade-src{margin-top:.7rem;font-size:.9375rem;line-height:1.55;color:var(--green-mid);}
@media (max-width:560px){ .format-almanac .alm-grade dl div{grid-template-columns:minmax(0,1fr);gap:.1rem;} }

/* --- the parcel in figures (green band, between chapters 01 and 02) --- */
.format-almanac .alm-figs{margin-top:4.6rem;padding-block:3.8rem 4rem;}
.format-almanac .alm-figs h2{margin-top:.55rem;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.1;color:#fff;}
.format-almanac .alm-figs-list{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 2rem;}
.format-almanac .alm-figs-list li{padding-top:1rem;border-top:1px solid var(--on-green-line);}
.format-almanac .alm-fig-n{display:block;font-family:var(--font-display);font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:1;color:var(--gold-leaf);white-space:nowrap;}
.format-almanac .alm-fig-n small{font-size:.5em;margin-left:.15em;}
.format-almanac .alm-fig-l{display:block;margin-top:.65rem;font-size:.9375rem;line-height:1.55;color:var(--on-green);}
.format-almanac .alm-figs p.alm-figs-note{max-width:46rem;margin-top:2rem;font-size:1rem;line-height:1.7;}
@media (max-width:900px){ .format-almanac .alm-figs-list{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* --- the timeline: pinned and travelling sideways on wide screens, a swipeable row elsewhere --- */
.format-almanac .alm-tl{margin-top:5rem;background:var(--cream-deep);}
.format-almanac .alm-tl .st-hs-pin{padding-block:3.4rem 2.4rem;}
.format-almanac .alm-tl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem 3rem;align-items:end;margin-bottom:1.9rem;}
.format-almanac .alm-tl-head h2{margin-top:.5rem;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.08;}
.format-almanac .alm-tl-head p.alm-tl-lede{max-width:30rem;font-size:1rem;line-height:1.7;color:var(--green-mid);}
.format-almanac .st-hs-track li{position:relative;padding:2.3rem 1.1rem .6rem 0;}
.format-almanac .st-hs-track li::before{content:"";position:absolute;left:0;right:-1.25rem;top:.55rem;height:1px;background:var(--border-strong);}
.format-almanac .st-hs-track li:last-child::before{right:0;}
.format-almanac .st-hs-track li::after{content:"";position:absolute;left:0;top:calc(.55rem - 6px);width:13px;height:13px;border-radius:50%;border:1px solid var(--green);background:radial-gradient(circle,var(--green) 0 3px,var(--cream-deep) 3.6px);}
.format-almanac .st-hs-track li.is-entry::after{background:var(--green);box-shadow:0 0 0 4px var(--cream-deep),0 0 0 5px var(--green);}
.format-almanac .alm-tl-flag{display:inline-block;margin-bottom:.5rem;padding:.05rem .5rem;background:var(--green);color:#fff;font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;}
.format-almanac .alm-tl-date{display:block;font-family:var(--font-display);font-size:1.85rem;line-height:1.1;}
.format-almanac .alm-tl-place{margin-top:.55rem;font-size:.875rem;line-height:1.45;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-tl-text{margin-top:.45rem;font-size:1rem;line-height:1.6;}
.format-almanac .alm-tl-src{margin-top:.5rem;font-size:.875rem;line-height:1.5;color:var(--green-mid);}
.format-almanac .alm-tl-go{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
.format-almanac .alm-tl-go span{border-bottom:1px solid currentColor;padding-bottom:.1rem;}
@media (hover:hover) and (pointer:fine){ .format-almanac .alm-tl-go:hover span{border-bottom-width:2px;} }
@media (max-width:860px){ .format-almanac .alm-tl-head{grid-template-columns:minmax(0,1fr);} }
@media (max-width:560px){ .format-almanac .alm-tl{margin-top:3.8rem;} .format-almanac .alm-tl .st-hs-pin{padding-block:2.8rem 2rem;} }
/* a wide but short screen: keep every pinned entry inside the band */
@media (min-width:900px) and (max-height:760px){
  .format-almanac .alm-tl .st-hs-pin{padding-block:1.6rem 1.2rem;}
  .format-almanac .alm-tl-head{margin-bottom:1rem;}
  .format-almanac .alm-tl-head h2{font-size:2rem;}
  .format-almanac .alm-tl-date{font-size:1.5rem;}
  .format-almanac .alm-tl-text{line-height:1.5;}
}

/* --- three halos, made for you --- */
.format-almanac .alm-pieces{padding-block:4.6rem 4.8rem;}
.format-almanac .alm-pieces-head{max-width:var(--measure);margin:0 auto;}
.format-almanac .alm-pieces-head h2{margin-top:.55rem;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.08;}
.format-almanac .alm-pieces-head p,.format-almanac .alm-after p{font-size:1.125rem;line-height:1.8;}
.format-almanac .alm-pieces-head p{margin-top:1.1rem;}
.format-almanac .alm-pieces-head a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--border-strong);}
.format-almanac .alm-cards{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;}
.format-almanac .alm-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--border-strong);}
.format-almanac .alm-card-img{display:block;border-bottom:1px solid var(--border);}
.format-almanac .alm-card-img .st-frame{aspect-ratio:1;}
.format-almanac .alm-card-body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.25rem 1.2rem;}
.format-almanac .alm-card-tag{font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-card h3{margin-top:.5rem;font-size:1.25rem;line-height:1.3;}
.format-almanac .alm-card h3 a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .format-almanac .alm-card:hover h3 a{text-decoration-color:currentColor;} }
.format-almanac .alm-card-why{margin-top:.6rem;font-size:1rem;line-height:1.6;color:var(--green-mid);}
.format-almanac .alm-spec{margin-top:1rem;}
.format-almanac .alm-spec div{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.8rem;padding:.5rem 0;border-top:1px solid var(--border);}
.format-almanac .alm-spec dt{padding-top:.1rem;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .alm-spec dd{font-size:.9375rem;line-height:1.5;}
.format-almanac .alm-card-see{margin-top:auto;padding-top:.8rem;}
.format-almanac .alm-card-see a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
.format-almanac .alm-card-see a span{border-bottom:1px solid currentColor;padding-bottom:.1rem;}
.format-almanac .alm-card-see a span::after{content:" \2192";}
.format-almanac .alm-after{max-width:var(--measure);margin:2.8rem auto 0;padding-top:1.6rem;border-top:1px solid var(--border-strong);}
.format-almanac .alm-after p + p{margin-top:1rem;}
@media (max-width:980px){ .format-almanac .alm-cards{grid-template-columns:minmax(0,1fr);max-width:30rem;margin-inline:auto;} }
@media (max-width:560px){ .format-almanac .alm-pieces{padding-block:3.6rem 3.8rem;} }

@media print{
  .format-almanac .alm-ch-when{position:static;}
  .format-almanac .alm-figs{background:#fff;}
  .format-almanac .alm-fig-n,.format-almanac .alm-fig-l,.format-almanac .alm-figs h2{color:var(--green)!important;}
}

/* =====================================================================
   Additions to the approved design
   ===================================================================== */

/* ---------- a. Parts the renderers write that the preview didn't have ---------- */

/* the source under a quotation: the preview's <cite>, written as <span class="st-cite"> (formats.mjs) so nothing is
   italic */
.stories blockquote .st-cite{display:block;margin-top:.6rem;font-size:.9375rem;line-height:1.6;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}

/* a line from the bench may carry a label of its own (the Lesson's notes have .ls-label) */
.stories .pl-note .pl-note-label{display:block;margin-bottom:.4rem;font-family:var(--font-body);font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}

/* the delivery terms under the Cover Story's pieces, from the site's own policy figures (formats.mjs): set like the
   bench note beside them */
.format-cover .cv-bench-recap{max-width:calc(var(--measure) + 2 * var(--gutter));margin:1.8rem auto 0;padding-inline:var(--gutter);font-size:.9375rem;line-height:1.65;color:var(--green-mid);}
.format-cover .cv-bench-recap + .cv-bench-note{margin-top:.8rem;}

/* the next part of a series once it is live: a solid card that opens it (the part still to come stays dashed) */
.format-cover .cv-next-part.is-live{display:block;border-style:solid;background:#fff;transition:border-color 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .format-cover .cv-next-part.is-live h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color 220ms var(--ease-out);}
  .format-cover .cv-next-part.is-live:hover{border-color:var(--green);}
  .format-cover .cv-next-part.is-live:hover h3{text-decoration-color:currentColor;}
}

/* the author's short bio, at the top of Sources (page.mjs writes <p class="st-bio" id="author"> and links the byline's
   name to it), only once the owner has approved the role and bio in authors.json */
.st-sources .st-bio{margin:1.1rem 0 0;padding:1rem 1.2rem 1.05rem;background:var(--cream-deep);border-left:3px solid var(--green);font-size:.9375rem;line-height:1.65;color:var(--green-mid);}
.st-sources .st-bio strong{font-weight:500;color:var(--green);}

/* today's price on a piece card and in the ledger, with the offer sentence under it while an offer runs (formats.mjs
   priceLine), only once the owner switches prices on (STORY_CARD_PRICES, off). The currency script adds its own
   approximate foreign price under it */
.stories .st-price{margin-top:.6rem;font-size:.9375rem;line-height:1.55;color:var(--green);font-variant-numeric:tabular-nums;}
.stories .st-price-note{margin-top:.2rem;font-size:.9375rem;line-height:1.55;color:var(--green-mid);}
.stories .st-price-note strong{font-weight:500;color:var(--green);}
/* the Lesson sizes and spaces its own paragraphs, and the ledger pads its own rows */
.format-lesson .ls-body p.st-price,.format-lesson .ls-body p.st-price-note{font-size:.9375rem;line-height:1.55;}
.format-lesson .ls-body p.st-price{margin-top:.5rem;}
.format-lesson .ls-body p.st-price-note{margin-top:.2rem;}
.format-piece .pl-ledger .st-price,.format-piece .pl-ledger .st-price-note{padding-inline:1.2rem;}
.format-piece .pl-ledger .st-price{margin-top:0;}
.format-piece .pl-ledger .st-price + .btn,.format-piece .pl-ledger .st-price-note + .btn{margin-top:1rem;}

/* the week's bench photos, under the Note from the Bench on its green band (front.mjs benchPhotos; BENCH_ON_FRONT, off
   until the owner has seen it): one to three real photographs, each in its own colours, with its note */
.stories-front .fp-bench{max-width:62rem;margin:3.2rem auto 0;}
.stories-front .fp-bench .fp-label-rule{color:var(--gold-leaf);}
.stories-front .fp-bench .fp-label-rule::after{background:var(--on-green-line);}
.stories-front .fp-bench-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1.8rem;}
.stories-front .fp-bench-list .st-frame{aspect-ratio:1;background:#fff;}
.stories-front .fp-bench-list figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.6;color:var(--on-green);}
@media (max-width:860px){ .stories-front .fp-bench-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .stories-front .fp-bench-list{grid-template-columns:minmax(0,1fr);gap:1.2rem;} }

/* ---------- b. Blocks a format may use that its approved page didn't show ----------
   model.mjs (BLOCK_FORMATS) lets a story use a note, a quotation, a list, a drawing or a pair of renders in any format,
   figures in a Cover Story, a comparison in an Almanac and Read next in a Cover Story or an Almanac. Each keeps the look
   of the format the approved design showed it in (its rules above), with selectors strong enough to beat the other
   formats' own paragraph rules. */

/* a line from the bench, as in A Piece's Life */
.format-cover .cv-body .pl-note,.format-almanac .alm-ch-text .pl-note{margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;border-left:2px solid var(--green);}
.format-cover .cv-body .pl-note p,.format-almanac .alm-ch-text .pl-note p{font-family:var(--font-display);font-size:1.4rem;line-height:1.4;}
.format-cover .cv-body .pl-note small,.format-almanac .alm-ch-text .pl-note small{display:block;margin-top:.5rem;font-family:var(--font-body);font-size:.9375rem;line-height:1.6;color:var(--green-mid);}

/* a quotation, as in the Lesson */
.format-cover .cv-body blockquote,.format-piece .pl-body blockquote,.format-almanac .alm-ch-text blockquote{margin:2rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--green);}
.format-cover .cv-body blockquote p,.format-piece .pl-body blockquote p,.format-almanac .alm-ch-text blockquote p{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.35;}

/* a list, in every format (the approved pages show only the Lesson's own "you will know" list). Only the list block's
   <ul> has no class */
.format-cover .cv-body ul:not([class]),.format-piece .pl-body ul:not([class]),.format-lesson .ls-body ul:not([class]),.format-almanac .alm-ch-text ul:not([class]){margin:1.1rem 0 0;padding-left:1.25rem;}
.format-cover .cv-body ul:not([class]) > li,.format-piece .pl-body ul:not([class]) > li,.format-lesson .ls-body ul:not([class]) > li,.format-almanac .alm-ch-text ul:not([class]) > li{padding-left:.3rem;line-height:1.85;}
.format-cover .cv-body ul:not([class]) > li + li,.format-piece .pl-body ul:not([class]) > li + li,.format-lesson .ls-body ul:not([class]) > li + li,.format-almanac .alm-ch-text ul:not([class]) > li + li{margin-top:.45rem;}
.format-cover .cv-body ul:not([class]) > li::marker,.format-piece .pl-body ul:not([class]) > li::marker,.format-lesson .ls-body ul:not([class]) > li::marker,.format-almanac .alm-ch-text ul:not([class]) > li::marker{color:var(--green);}
.format-cover .cv-body ul:not([class]) + p,.format-piece .pl-body ul:not([class]) + p,.format-lesson .ls-body ul:not([class]) + p,.format-almanac .alm-ch-text ul:not([class]) + p{margin-top:1.1rem;}
.format-almanac .alm-ch-text ul:not([class]) > li{font-size:1.1875rem;}
@media (max-width:560px){ .format-almanac .alm-ch-text ul:not([class]) > li{font-size:1.125rem;line-height:1.8;} }

/* a drawing on the drawing-board grid, and a pair of renders, as in A Piece's Life */
:is(.format-cover,.format-lesson,.format-almanac) .pl-fig{margin:2rem 0;padding:1.4rem 1.4rem 1.1rem;border:1px solid var(--border);background-color:var(--cream-deep);background-image:var(--graph);background-size:18px 18px;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-fig-svg{width:100%;max-width:21rem;height:auto;margin:0 auto;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-legend{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;font-size:.9375rem;line-height:1.6;color:var(--green-mid);}
.format-lesson .ls-body .pl-legend li{font-size:inherit;line-height:inherit;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-legend i{display:inline-block;width:.9rem;height:.9rem;margin-right:.45rem;vertical-align:-.12rem;border:1.2px solid var(--green);}
:is(.format-cover,.format-lesson,.format-almanac) .pl-legend i.is-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--green);vertical-align:.05rem;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-legend i.is-fill{background:rgba(11,69,50,.12);}
:is(.format-cover,.format-lesson,.format-almanac) .pl-fig .st-caption{text-align:center;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0;}
:is(.format-cover,.format-lesson,.format-almanac) .pl-pair .st-frame{aspect-ratio:1;border:1px solid var(--border);}
@media (max-width:560px){
  :is(.format-cover,.format-lesson,.format-almanac) .pl-pair{grid-template-columns:minmax(0,1fr);}
  :is(.format-cover,.format-lesson,.format-almanac) .pl-fig{padding:1.1rem 1rem 1rem;}
}

/* a comparison in an Almanac, as in the Lesson */
.format-almanac .ls-compare{width:100%;margin:1.8rem 0 1.4rem;border-collapse:collapse;font-size:1rem;}
.format-almanac .ls-compare caption{padding-bottom:.6rem;text-align:left;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
.format-almanac .ls-compare th,.format-almanac .ls-compare td{padding:.75rem .8rem;text-align:left;vertical-align:top;line-height:1.55;border-bottom:1px solid var(--border);}
.format-almanac .ls-compare thead th{background:var(--cream-deep);border-bottom:1px solid var(--border-strong);font-family:var(--font-display);font-weight:400;font-size:1.15rem;}
.format-almanac .ls-compare tbody th{width:9rem;font-weight:500;font-size:.9375rem;letter-spacing:.02em;color:var(--green-mid);}
@media (max-width:560px){
  .format-almanac .ls-compare thead{display:none;}
  .format-almanac .ls-compare,.format-almanac .ls-compare caption,.format-almanac .ls-compare tbody,.format-almanac .ls-compare tr,.format-almanac .ls-compare th,.format-almanac .ls-compare td{display:block;width:100%;}
  .format-almanac .ls-compare tr{padding:.8rem 0;border-bottom:1px solid var(--border-strong);}
  .format-almanac .ls-compare th,.format-almanac .ls-compare td{padding:.2rem 0;border:0;}
  .format-almanac .ls-compare tbody th{width:auto;font-size:.875rem;letter-spacing:var(--track-label);text-transform:uppercase;}
  .format-almanac .ls-compare td::before{content:attr(data-label) ": ";font-weight:500;}
}

/* figures on a green band in a Cover Story, as in the Almanac */
.format-cover .alm-figs{margin-top:4.6rem;padding-block:3.8rem 4rem;}
.format-cover .alm-figs h2{margin-top:.55rem;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.1;color:#fff;}
.format-cover .alm-figs-list{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 2rem;}
.format-cover .alm-figs-list li{padding-top:1rem;border-top:1px solid var(--on-green-line);}
.format-cover .alm-fig-n{display:block;font-family:var(--font-display);font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:1;color:var(--gold-leaf);white-space:nowrap;}
.format-cover .alm-fig-n small{font-size:.5em;margin-left:.15em;}
.format-cover .alm-fig-l{display:block;margin-top:.65rem;font-size:.9375rem;line-height:1.55;color:var(--on-green);}
.format-cover .alm-figs p.alm-figs-note{max-width:46rem;margin-top:2rem;font-size:1rem;line-height:1.7;}
@media (max-width:900px){ .format-cover .alm-figs-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media print{ .format-cover .alm-fig-n,.format-cover .alm-fig-l,.format-cover .alm-figs h2{color:var(--green)!important;} }

/* Read next on a green band in a Cover Story or an Almanac, as in A Piece's Life (where it follows the ledger's grid,
   which ends in its own space) */
:is(.format-cover,.format-almanac) .pl-readnext{margin-top:4.4rem;padding-block:3.6rem 4rem;}
:is(.format-cover,.format-almanac) .pl-readnext h2{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.1;}
:is(.format-cover,.format-almanac) .pl-rn-grid{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;}
:is(.format-cover,.format-almanac) .pl-rn-grid > li{display:flex;}
:is(.format-cover,.format-almanac) .pl-readnext a.pl-rn{display:block;flex:1;background:#fff;color:var(--green);text-decoration:none;}
:is(.format-cover,.format-almanac) .pl-rn .st-frame{aspect-ratio:1;}
:is(.format-cover,.format-almanac) .pl-rn-type{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--cream-deep);}
:is(.format-cover,.format-almanac) .pl-rn-type b{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--green);}
:is(.format-cover,.format-almanac) .pl-rn-txt{display:block;padding:.9rem 1rem 1.1rem;}
:is(.format-cover,.format-almanac) .pl-rn-kicker{display:block;font-size:.875rem;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green-mid);}
:is(.format-cover,.format-almanac) .pl-rn h3{margin-top:.35rem;font-size:1.15rem;line-height:1.35;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ :is(.format-cover,.format-almanac) .pl-readnext a.pl-rn:hover h3{text-decoration-color:currentColor;} }
:is(.format-cover,.format-almanac) .pl-readnext a.pl-rn:focus-visible{outline-color:#fff;}
@media (max-width:1060px){ :is(.format-cover,.format-almanac) .pl-rn-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){
  :is(.format-cover,.format-almanac) .pl-readnext{margin-top:3.6rem;}
  :is(.format-cover,.format-almanac) .pl-rn-grid{gap:.8rem;}
  :is(.format-cover,.format-almanac) .pl-rn-txt{padding:.8rem .8rem 1rem;}
  :is(.format-cover,.format-almanac) .pl-rn h3{font-size:1.05rem;}
}