@charset "utf-8";
/* ==========================================================================
   IMPROVE MY WORLD — "Modern Editorial Wisdom"
   Ariana CMS theme · design system
   Order: 1 fonts · 2 tokens · 3 reset · 4 typography · 5 layout · 6 motion
          7 components · 8 sections · 9 editorial · 10 responsive · 11 print
   ========================================================================== */

/* 1 ─ FONTS ─────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/newsreader.woff2") format("woff2");
  ascent-override:96%;descent-override:26%;line-gap-override:0%;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;
  src:url("../fonts/newsreader-italic.woff2") format("woff2");
  ascent-override:96%;descent-override:26%;line-gap-override:0%;
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/instrument-sans.woff2") format("woff2");
  ascent-override:97%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:"Instrument Sans";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("../fonts/instrument-sans-italic.woff2") format("woff2");
  ascent-override:97%;descent-override:24%;line-gap-override:0%;
}

/* 2 ─ TOKENS ────────────────────────────────────────────────────────────── */
:root{
  /* — palette (brandbook) — */
  --ivory:#faf7f1;          /* warm ivory page ground            */
  --ivory-deep:#f2ede3;     /* recessed band                      */
  --paper:#fffdf9;          /* raised card                        */
  --ink:#1a1d1b;            /* charcoal / near-black text         */
  --ink-2:#4a5150;          /* secondary text  (7.2:1 on ivory)   */
  --ink-3:#5c6361;          /* metadata — >=5.0:1 on every ground */
  --forest:#1f3d31;         /* deep forest green — primary        */
  --forest-deep:#16291f;    /* darkest ground                     */
  --forest-soft:#2c5343;    /* hover                              */
  --sage:#8fa394;           /* muted sage — decorative only       */
  --sage-tint:#e7ece6;      /* sage wash                          */
  --sage-ink:#4b6153;       /* sage that is safe for small text   */
  --sand:#b2955f;           /* antique gold — RULES/DECOR ONLY    */
  --sand-ink:#7a6335;       /* gold safe for text >=4.7:1 anywhere*/
  --sand-lift:#d0b681;      /* gold on dark grounds (6.0:1)       */
  --sage-lift:#a8bbad;      /* sage on dark grounds (5.9:1)       */
  --sand-tint:#f0e8d8;
  --line:#e1dacd;           /* hairline                           */
  --line-soft:#ece6da;
  --line-strong:#cdc3b1;

  /* semantic */
  --bg:var(--ivory);
  --fg:var(--ink);
  --muted:var(--ink-2);
  --meta:var(--ink-3);
  --rule:var(--line);
  --accent:var(--forest);
  --focus:#1f3d31;

  /* — type families — */
  --font-serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --font-sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* — fluid type scale — 360px → 1680px viewport
       every step: clamp(min, calc(base + vw), max)  */
  --step--2:clamp(.75rem,.735rem + .075vw,.8125rem);     /* 12 → 13  labels  */
  --step--1:clamp(.8125rem,.784rem + .143vw,.9375rem);   /* 13 → 15  meta    */
  --step-0 :clamp(1.0625rem,1.03rem + .16vw,1.1875rem);  /* 17 → 19  body    */
  --step-1 :clamp(1.1875rem,1.13rem + .29vw,1.375rem);   /* 19 → 22  lead    */
  --step-2 :clamp(1.375rem,1.27rem + .52vw,1.75rem);     /* 22 → 28          */
  --step-3 :clamp(1.625rem,1.44rem + .91vw,2.25rem);     /* 26 → 36          */
  --step-4 :clamp(1.9375rem,1.62rem + 1.58vw,3rem);      /* 31 → 48          */
  --step-5 :clamp(2.25rem,1.75rem + 2.5vw,4rem);         /* 36 → 64          */
  --step-6 :clamp(2.625rem,1.83rem + 3.97vw,5.5rem);     /* 42 → 88          */

  /* — spacing (spacious editorial rhythm) — */
  --sp-3xs:clamp(.25rem,.24rem + .05vw,.3125rem);
  --sp-2xs:clamp(.5rem,.48rem + .1vw,.625rem);
  --sp-xs :clamp(.75rem,.72rem + .15vw,.9375rem);
  --sp-s  :clamp(1rem,.96rem + .2vw,1.25rem);
  --sp-m  :clamp(1.5rem,1.44rem + .3vw,1.875rem);
  --sp-l  :clamp(2rem,1.8rem + 1vw,3rem);
  --sp-xl :clamp(3rem,2.5rem + 2.5vw,5rem);
  --sp-2xl:clamp(4rem,3rem + 5vw,8rem);
  --sp-3xl:clamp(5.5rem,4rem + 7.5vw,11rem);

  /* — measure & containers — */
  --measure:66ch;           /* long-form reading                 */
  --measure-tight:52ch;     /* intro / standfirst                */
  --measure-wide:78ch;
  --w-prose:min(100% - var(--gutter)*2, 46rem);
  --w-page:min(100% - var(--gutter)*2, 78rem);
  --w-wide:min(100% - var(--gutter)*2, 96rem);
  --w-full:min(100% - var(--gutter)*2, 116rem);
  --gutter:clamp(1.25rem,1rem + 2vw,3.5rem);

  /* — shape & depth — */
  --r-xs:2px; --r-s:4px; --r-m:8px; --r-l:16px; --r-pill:999px;
  --shadow-1:0 1px 2px rgb(26 29 27 / .04),0 2px 8px rgb(26 29 27 / .04);
  --shadow-2:0 2px 4px rgb(26 29 27 / .04),0 12px 32px -8px rgb(26 29 27 / .10);
  --shadow-3:0 4px 8px rgb(26 29 27 / .05),0 24px 60px -12px rgb(26 29 27 / .16);

  /* — motion (calm: slow enough to feel considered, fast enough not to delay) — */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* expo-out, for entries      */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.33,.1,.25,1);
  --t-fast:160ms; --t-base:280ms; --t-slow:520ms; --t-veil:900ms;

  --header-h:clamp(4rem,3.4rem + 1.6vw,5.25rem);
  --scroll-pad:calc(var(--header-h) + 1.5rem);
}

/* 3 ─ RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:var(--scroll-pad);
  -moz-tab-size:2;tab-size:2;
}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-size:var(--step-0);font-weight:400;
  line-height:1.6;letter-spacing:-.006em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100svh;overflow-x:clip;
}
img,picture,svg,video,canvas{display:block;max-width:100%}
img,video{height:auto}
svg{fill:currentColor}
input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:from-font}
p,h1,h2,h3,h4,h5,li,figcaption,blockquote,dd{overflow-wrap:break-word}
hr{border:0;border-top:1px solid var(--rule)}
:target{scroll-margin-top:var(--scroll-pad)}
[hidden]{display:none!important}
::selection{background:var(--sage-tint);color:var(--forest-deep)}

/* focus — never removed, always visible on both grounds */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
  border-radius:var(--r-s);
}
/* headings are focused only to move a screen reader's place — they are not
   controls, so they take the ring off again */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.on-dark :focus-visible,.is-dark :focus-visible{outline-color:var(--sand-lift)}

.skip-link{
  position:absolute;left:var(--gutter);top:.5rem;z-index:200;
  transform:translateY(-160%);
  background:var(--forest);color:var(--ivory);
  padding:.75rem 1.25rem;border-radius:var(--r-s);
  font-size:var(--step--1);font-weight:600;text-decoration:none;
  transition:transform var(--t-base) var(--ease-out);
}
.skip-link:focus-visible{transform:translateY(0)}

.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* 4 ─ TYPOGRAPHY ────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.serif,.display{
  font-family:var(--font-serif);
  font-weight:400;line-height:1.1;letter-spacing:-.021em;
  text-wrap:balance;
  font-variant-numeric:oldstyle-nums;
}
h1,.t-display{font-size:var(--step-5);line-height:1.03;letter-spacing:-.028em}
h2,.t-h2{font-size:var(--step-4);line-height:1.08;letter-spacing:-.024em}
h3,.t-h3{font-size:var(--step-3);line-height:1.14}
h4,.t-h4{font-size:var(--step-2);line-height:1.2}
.t-hero{font-size:var(--step-6);line-height:1;letter-spacing:-.032em}

p{text-wrap:pretty}
.lead{
  font-size:var(--step-1);line-height:1.5;color:var(--muted);
  letter-spacing:-.012em;max-width:var(--measure-tight);
}
.lead-serif{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.42;
  font-weight:300;letter-spacing:-.018em;color:var(--ink);
  max-width:26ch;
}

/* the small uppercase label that structures every section */
.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink);
  margin-bottom:var(--sp-s);
}
.eyebrow::before{
  content:"";flex:0 0 auto;width:1.75rem;height:1px;background:currentColor;opacity:.5;
}
.eyebrow--plain::before{display:none}
.eyebrow__n{
  font-family:var(--font-serif);font-size:1.12em;font-weight:300;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:0;
  color:var(--sand-ink);
}
.band-dark .eyebrow__n,.band-forest .eyebrow__n,.band-photo .eyebrow__n{color:var(--sand-lift)}
.eyebrow__n+span::before{content:"";display:inline-block;width:1px;height:.85em;
  background:currentColor;opacity:.35;margin-inline:.15em .55em;vertical-align:-.05em}
.eyebrow--center{justify-content:center}

.num{
  font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums;
  font-weight:300;color:var(--sand-ink);letter-spacing:0;
}

.meta{
  font-size:var(--step--1);color:var(--meta);letter-spacing:.005em;
}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.meta-row>*+*::before{content:"·";margin-right:.75rem;color:var(--line-strong)}

blockquote{quotes:none}
.pullquote{
  font-family:var(--font-serif);font-size:var(--step-3);line-height:1.3;
  font-weight:300;letter-spacing:-.02em;color:var(--forest);
  max-width:24ch;
}

em,i{font-style:italic}
strong,b{font-weight:600}
.italic-serif{font-family:var(--font-serif);font-style:italic;font-weight:300}

/* link styles */
.link{
  color:var(--forest);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--forest) 28%,transparent);
  transition:text-decoration-color var(--t-fast) var(--ease-soft),color var(--t-fast);
}
.link:hover{text-decoration-color:currentColor}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:.01em;color:var(--forest);text-decoration:none;
  padding-block:.15em;
}
.link-arrow>span{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-base) var(--ease-out);
}
.link-arrow:hover>span,.link-arrow:focus-visible>span{background-size:100% 1px}
.link-arrow svg{
  width:.85em;height:.85em;flex:0 0 auto;align-self:center;
  transition:transform var(--t-base) var(--ease-out);
}
.link-arrow:hover svg{transform:translateX(.28em)}

/* 5 ─ LAYOUT ────────────────────────────────────────────────────────────── */
.wrap{width:var(--w-page);margin-inline:auto}
.wrap-wide{width:var(--w-wide);margin-inline:auto}
.wrap-full{width:var(--w-full);margin-inline:auto}
.wrap-prose{width:var(--w-prose);margin-inline:auto}

.section{padding-block:var(--sp-2xl);position:relative}
.section--tight{padding-block:var(--sp-xl)}
.section--tall{padding-block:var(--sp-3xl)}
.section--flush-top{padding-top:0}

.band{background:var(--ivory-deep)}
.band-sage{background:var(--sage-tint)}
.band-dark{background:var(--forest-deep)}
.band-forest{background:var(--forest)}

/* Dark grounds re-point the SEMANTIC tokens rather than patching component
   selectors, so every component that lands on a dark band adapts on its own.
   The raw brand values (--forest, --ivory, --sand) are deliberately NOT
   redefined — the bands paint their own background from them.            */
.band-dark,.band-forest,.on-dark,.site-footer{
  color:var(--ivory);
  --fg:var(--ivory);
  --muted:color-mix(in srgb,var(--ivory) 82%,var(--forest-deep));
  --meta:color-mix(in srgb,var(--ivory) 70%,var(--forest-deep));
  --ink:var(--ivory);
  --ink-2:color-mix(in srgb,var(--ivory) 82%,var(--forest-deep));
  --ink-3:color-mix(in srgb,var(--ivory) 70%,var(--forest-deep));
  --sage-ink:var(--sage-lift);
  --sand-ink:var(--sand-lift);
  --rule:color-mix(in srgb,var(--ivory) 20%,transparent);
  --line:color-mix(in srgb,var(--ivory) 17%,transparent);
  --line-soft:color-mix(in srgb,var(--ivory) 13%,transparent);
  --line-strong:color-mix(in srgb,var(--ivory) 32%,transparent);
  --paper:color-mix(in srgb,var(--ivory) 7%,transparent);
  --ivory-deep:color-mix(in srgb,var(--ivory) 5%,transparent);
  --sage-tint:color-mix(in srgb,var(--ivory) 11%,transparent);
  --sand-tint:color-mix(in srgb,var(--sand-lift) 13%,transparent);
  --focus:var(--sand-lift);
}
/* the few places that name a brand colour directly for TEXT */
.band-dark .link-arrow,.band-forest .link-arrow,.on-dark .link-arrow{color:var(--sand-lift)}
.band-dark .link,.band-forest .link,.on-dark .link{color:var(--ivory)}
.band-dark .pullquote,.band-forest .pullquote,.on-dark .pullquote{color:var(--sand-lift)}
.band-dark .practice__verb,.band-forest .practice__verb{color:var(--sand-lift)}
.band-dark .lens__q,.band-forest .lens__q{color:var(--sand-lift)}
.band-dark .lens__opt[aria-selected="true"],.band-forest .lens__opt[aria-selected="true"]{color:var(--forest-deep)}
.band-dark .lens__switch::before,.band-forest .lens__switch::before{background:var(--ivory)}
.band-dark .prose a,.band-forest .prose a{
  color:var(--sand-lift);
  text-decoration-color:color-mix(in srgb,var(--sand-lift) 40%,transparent);
}
.band-dark .prose blockquote,.band-forest .prose blockquote{color:var(--sand-lift)}
.band-dark .toc-wrap a[aria-current="true"],.band-forest .toc-wrap a[aria-current="true"]{color:var(--sand-lift);border-color:var(--sand-lift)}

/* the hairline that separates every major movement of the page */
.rule{height:1px;background:var(--rule);border:0}
.rule--soft{background:var(--line-soft)}

/* generic grids */
.grid{display:grid;gap:var(--sp-l)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(13.5rem,100%),1fr))}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--sp-s)}
.stack-l>*+*{margin-top:var(--sp-l)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-s);align-items:center}

/* editorial two-column: sticky heading beside flowing content */
.split{
  display:grid;gap:var(--sp-l) var(--sp-xl);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:62rem){
  .split{grid-template-columns:minmax(16rem,26fr) minmax(0,58fr)}
  .split__aside{position:sticky;top:var(--scroll-pad);align-self:start}
  .split--reverse .split__aside{order:2}
}

/* 6 ─ MOTION ────────────────────────────────────────────────────────────── */
/* Content is visible by default. Motion is layered on only when JS confirms
   it can animate — so crawlers, no-JS visitors and reduced-motion users
   always receive the finished state.                                        */

.js [data-reveal]{
  opacity:0;
  will-change:opacity,transform;
}
.js [data-reveal="up"]     {transform:translate3d(0,var(--rv-y,18px),0)}
.js [data-reveal="up-lg"]  {transform:translate3d(0,32px,0)}
.js [data-reveal="fade"]   {transform:none}
.js [data-reveal="right"]  {transform:translate3d(-16px,0,0)}
.js [data-reveal="left"]   {transform:translate3d(16px,0,0)}
.js [data-reveal="scale"]  {transform:scale(.965)}
.js [data-reveal="mask"]   {opacity:1;clip-path:inset(0 0 102% 0)}
.js [data-reveal="rule"]   {opacity:1;transform:scaleX(0);transform-origin:left center}

.js [data-reveal].is-in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:
    opacity var(--t-veil) var(--ease-out) var(--rv-d,0ms),
    transform var(--t-veil) var(--ease-out) var(--rv-d,0ms),
    clip-path var(--t-veil) var(--ease-out) var(--rv-d,0ms);
}
.js [data-reveal="rule"].is-in{transform:scaleX(1);transition-duration:1100ms}
.js [data-reveal].is-in{will-change:auto}

/* staggered children — index set by the engine as --i */
.js [data-stagger]>*{
  opacity:0;transform:translate3d(0,16px,0);
}
.js [data-stagger].is-in>*{
  opacity:1;transform:none;
  transition:opacity 720ms var(--ease-out),transform 720ms var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger-step,70ms));
}

/* scrub: the engine writes --p (0 → 1) as the element crosses the viewport  */
[data-scrub]{--p:0}

/* line-by-line editorial reveal — each .ln is a masked line of a statement  */
.lines{display:block}
.ln{display:block;overflow:hidden}
.ln>span{display:block}
.js .ln>span{transform:translate3d(0,105%,0);opacity:.001}
.js .lines.is-in .ln>span{
  transform:none;opacity:1;
  transition:transform 1000ms var(--ease-out),opacity 700ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 110ms);
}

/* "clarity emerging" — variable-font weight resolves as the line is read.
   Only ever applied to a short display statement, never to body copy.      */
.js .weigh{
  font-variation-settings:"wght" calc(300 + var(--p) * 340);
  opacity:calc(.42 + var(--p) * .58);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-stagger]>*,.js .ln>span{
    opacity:1!important;transform:none!important;clip-path:none!important;
    transition:none!important;
  }
  .js .shot{clip-path:none!important}
  .js .shot>img{transform:none!important;transition:none!important}
  .js .shot::after{transform:scaleY(0)!important;transition:none!important}
  [data-scrub] .shot--par>img,[data-scrub] img.par{transform:none!important}
  .js .weigh{font-variation-settings:"wght" 400;opacity:1}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .breath,.ripple-ring{animation:none!important}
}

/* 7 ─ COMPONENTS ────────────────────────────────────────────────────────── */

/* — buttons ————————————————————————————————————————————————————— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:3rem;padding:.9em 1.6em;
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:.01em;line-height:1.2;text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:var(--r-pill);
  cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  transition:color var(--t-base) var(--ease-soft),
             background-color var(--t-base) var(--ease-soft),
             border-color var(--t-base) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--forest-soft);
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform var(--t-slow) var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:active{transform:translateY(1px)}
.btn svg{width:1em;height:1em;flex:0 0 auto;transition:transform var(--t-base) var(--ease-out)}
.btn:hover svg{transform:translateX(.22em)}

.btn--primary{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.btn--primary:hover,.btn--primary:focus-visible{border-color:var(--forest-soft)}

.btn--ghost{background:transparent;color:var(--forest);border-color:var(--line-strong)}
.btn--ghost::before{background:var(--forest)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ivory);border-color:var(--forest)}

.btn--quiet{
  background:transparent;color:var(--forest);border-color:transparent;
  padding-inline:.35em;min-height:2.5rem;
}
.btn--quiet::before{display:none}
.btn--quiet{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--forest) 26%,transparent)}
.btn--quiet:hover{text-decoration-color:currentColor}

.on-dark .btn--primary,.band-dark .btn--primary,.band-forest .btn--primary,.site-footer .btn--primary{
  background:var(--ivory);color:var(--forest-deep);border-color:var(--ivory);
}
.on-dark .btn--primary::before,.band-dark .btn--primary::before,.band-forest .btn--primary::before,.site-footer .btn--primary::before{background:var(--sand-lift)}
.on-dark .btn--ghost,.band-dark .btn--ghost,.band-forest .btn--ghost,.site-footer .btn--ghost{
  color:var(--ivory);border-color:color-mix(in srgb,var(--ivory) 34%,transparent);
}
.on-dark .btn--ghost::before,.band-dark .btn--ghost::before,.band-forest .btn--ghost::before,.site-footer .btn--ghost::before{background:var(--ivory)}
.on-dark .btn--ghost:hover,.band-dark .btn--ghost:hover,.band-forest .btn--ghost:hover,.site-footer .btn--ghost:hover{color:var(--forest-deep)}
.band-dark .btn--quiet,.band-forest .btn--quiet,.site-footer .btn--quiet{color:var(--sand-lift)}

.btn--lg{min-height:3.5rem;padding:1.05em 2em;font-size:var(--step-0)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-s);align-items:center}

/* — cards ——————————————————————————————————————————————————————— */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:var(--sp-m);
  transition:border-color var(--t-base) var(--ease-soft),
             box-shadow var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out);
}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card--flat{background:transparent;border:0;padding:0}
.card--flat:hover{box-shadow:none;transform:none}
.card__title{font-size:var(--step-2);margin-bottom:var(--sp-2xs)}
.card__text{color:var(--muted);font-size:var(--step--1);line-height:1.65}
.card__foot{margin-top:auto;padding-top:var(--sp-m)}

/* whole-card link that keeps real text selectable and one tab stop */
.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card:has(a.stretch:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.card a.stretch:focus-visible{outline:none}

/* — the "need" tile: a human sentence, not a product ——————————————— */
.need-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  /* fixed column counts, not auto-fit: the sets here are 4 or 8 tiles, and an
     auto-fit remainder leaves a dead cell of bare grid colour */
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:30rem){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.need-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.need{
  position:relative;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-m);
  min-height:11rem;padding:var(--sp-m);
  text-decoration:none;isolation:isolate;overflow:hidden;
  transition:color var(--t-base) var(--ease-soft);
}
.need::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);
  transform:translateY(101%);
  transition:transform var(--t-slow) var(--ease-out);
}
.need:hover,.need:focus-visible{color:var(--ivory)}
.need:hover::before,.need:focus-visible::before{transform:translateY(0)}
.need__label{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.18;
  letter-spacing:-.02em;
}
.need__n{
  position:absolute;top:var(--sp-m);right:var(--sp-m);
  font-family:var(--font-serif);font-size:var(--step--1);font-weight:300;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--meta);opacity:.75;
  transition:color var(--t-base) var(--ease-soft),opacity var(--t-base);
}
.need:hover .need__n,.need:focus-visible .need__n{
  color:color-mix(in srgb,var(--ivory) 72%,transparent);opacity:1;
}
.need__hint{
  font-size:var(--step--1);color:var(--meta);
  transition:color var(--t-base) var(--ease-soft),transform var(--t-slow) var(--ease-out);
  display:flex;align-items:center;gap:.5em;
}
.need:hover .need__hint,.need:focus-visible .need__hint{
  color:color-mix(in srgb,var(--ivory) 80%,var(--forest));transform:translateX(.3rem);
}
.need__hint svg{width:.9em;height:.9em}

/* — tags / pills ————————————————————————————————————————————————— */
.pill{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.42em .95em;min-height:2.25rem;
  font-size:var(--step--2);font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--sage-ink);background:var(--sage-tint);
  border:1px solid transparent;border-radius:var(--r-pill);text-decoration:none;
  transition:background-color var(--t-base),color var(--t-base),border-color var(--t-base);
}
a.pill:hover{background:var(--forest);color:var(--ivory)}
.pill--gold{color:var(--sand-ink);background:var(--sand-tint)}
.pill--outline{background:transparent;border-color:var(--line-strong);color:var(--ink-2)}
.band-dark .pill,.band-forest .pill{
  background:color-mix(in srgb,var(--ivory) 12%,transparent);color:var(--sage-lift);
}

/* — media ———————————————————————————————————————————————————————— */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--ivory-deep);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--3x4{aspect-ratio:3/4}
.media--4x5{aspect-ratio:4/5}
.media--1x1{aspect-ratio:1/1}
.media--3x2{aspect-ratio:3/2}
.media--16x9{aspect-ratio:16/9}
.media--21x9{aspect-ratio:21/9}
.media__zoom img{transition:transform 1.4s var(--ease-out),filter 1.4s var(--ease-out)}
a:hover .media__zoom img,.card:hover .media__zoom img{transform:scale(1.035)}

/* photographic placeholder — an honest, calm stand-in, never fake imagery */
.plate{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 8%, var(--sand-tint) 0%, transparent 58%),
    radial-gradient(110% 80% at 84% 96%, var(--sage-tint) 0%, transparent 55%),
    var(--ivory-deep);
  border-radius:var(--r-m);
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 3px,rgb(26 29 27 / .022) 3px 4px);
}
.plate__note{
  position:relative;z-index:1;max-width:26ch;text-align:center;
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--sage-ink);padding:var(--sp-s);
}

/* — site header ——————————————————————————————————————————————————— */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--ivory) 86%,transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base),background-color var(--t-base),transform 420ms var(--ease-out);
}
@supports not (backdrop-filter:blur(4px)){.site-header{background:var(--ivory)}}
.site-header[data-stuck="true"]{border-bottom-color:var(--line);background:color-mix(in srgb,var(--ivory) 94%,transparent)}
.site-header[data-hidden="true"]{transform:translateY(-100%)}
.site-header:focus-within{transform:none}

.header__inner{
  width:var(--w-full);margin-inline:auto;
  min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--sp-m);
}
/* — the Improve My World logo ————————————————————————————————————
   Their own artwork, reproduced path-for-path. These three colours are the
   LOGO's, scoped to the mark only: they never enter the theme palette. */
:root{
  --logo-teal:#28bdc7;
  --logo-gold:#ffc300;
  --logo-ink:#212529;
}
.brand{
  display:inline-flex;align-items:center;gap:.7rem;
  text-decoration:none;flex:0 0 auto;
}
.imw-logo{
  height:clamp(1.9rem,1.55rem + .95vw,2.55rem);width:auto;
  overflow:visible;flex:0 0 auto;
}
.imw-logo__ray{fill:var(--logo-teal);transition:fill .45s var(--ease-soft)}
.imw-logo__mygroup path{fill:var(--logo-gold);transition:fill .45s var(--ease-soft)}
.imw-logo__word path{fill:var(--logo-ink);transition:fill .45s var(--ease-soft)}

/* the rays open outward a touch on hover — the same idea as the ripple */
.imw-logo__rays{
  transform-box:fill-box;transform-origin:50% 62%;
  transition:transform .85s var(--ease-out);
}
.brand:hover .imw-logo__rays,
.brand:focus-visible .imw-logo__rays{transform:scale(1.07) rotate(-4deg)}

/* on dark grounds the wordmark reverses out; the rays and "my" stay brand */
.band-dark .imw-logo__word path,.band-forest .imw-logo__word path,
.site-footer .imw-logo__word path,.on-dark .imw-logo__word path{fill:var(--ivory)}

.imw-mark{height:2.25rem;width:auto;overflow:visible}
.imw-mark .imw-logo__ray{fill:var(--logo-teal)}

.brand__tag{display:none}

.site-nav{margin-inline-start:auto;display:none}
.nav-list{display:flex;align-items:center;gap:clamp(.5rem,.1rem + .9vw,1.35rem)}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.6rem .25rem;min-height:2.75rem;
  font-size:var(--step--1);font-weight:500;letter-spacing:-.002em;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:color var(--t-base) var(--ease-soft);
}
.nav-link::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.5rem;height:1px;
  background:var(--forest);transform:scaleX(0);transform-origin:right center;
  transition:transform 420ms var(--ease-out);
}
.nav-link:hover,.nav-item.is-current>.nav-link{color:var(--forest)}
.nav-link:hover::after,.nav-item.is-current>.nav-link::after{transform:scaleX(1);transform-origin:left center}
.nav-link .chev{width:.6em;height:.6em;transition:transform var(--t-base) var(--ease-soft);opacity:.6}
.nav-item.has-dropdown:hover .chev,.nav-item.has-dropdown:focus-within .chev{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + .35rem);left:50%;translate:-50% 0;
  min-width:16.5rem;padding:var(--sp-xs);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),
             visibility 0s linear var(--t-base);
}
.nav-item.has-dropdown:hover>.dropdown,
.nav-item.has-dropdown:focus-within>.dropdown{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s;
}
.dropdown a{
  display:block;padding:.62rem .8rem;border-radius:var(--r-s);
  font-size:var(--step--1);color:var(--ink-2);text-decoration:none;
  transition:background-color var(--t-fast),color var(--t-fast),padding-left var(--t-base) var(--ease-out);
}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--sage-tint);color:var(--forest);padding-left:1.05rem}

.header__cta{display:none;flex:0 0 auto}

.nav-toggle{
  margin-inline-start:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:2.75rem;min-width:2.75rem;padding:.5rem .9rem .5rem .75rem;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:var(--step--2);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--forest);background:transparent;
  transition:background-color var(--t-base),color var(--t-base),border-color var(--t-base);
}
.nav-toggle:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.nav-toggle__bars{display:grid;gap:4px;width:1rem}
.nav-toggle__bars span{
  display:block;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast);
}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* — mobile drawer: quiet, one-handed, one idea per row ——————————————— */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--ivory);
  display:flex;flex-direction:column;
  padding:var(--sp-l) var(--gutter) calc(var(--sp-xl) + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-1.25rem);
  /* visibility flips instantly on open (so the first link is focusable in the
     same tick) and only after the fade on close */
  transition:opacity var(--t-base) var(--ease-out),transform 420ms var(--ease-out),
             visibility 0s linear 420ms;
}
.drawer[data-open="true"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-base) var(--ease-out),transform 420ms var(--ease-out),visibility 0s;
}
.drawer__list{display:flex;flex-direction:column}
.drawer__list>li{border-bottom:1px solid var(--line-soft)}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s);
  padding:1.05rem .25rem;min-height:3.25rem;
  font-family:var(--font-serif);font-size:var(--step-2);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.drawer__link:hover,.drawer__link:focus-visible{color:var(--forest)}
.drawer__link svg{width:.75em;height:.75em;color:var(--sage);flex:0 0 auto}
.drawer__sub{padding:0 .25rem 1.15rem;display:flex;flex-wrap:wrap;gap:.5rem}
.drawer__sub a{
  padding:.5rem .95rem;min-height:2.75rem;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--step--1);color:var(--ink-2);text-decoration:none;
}
.drawer__sub a:hover,.drawer__sub a:focus-visible{border-color:var(--forest);color:var(--forest)}
.drawer__foot{margin-top:var(--sp-l);display:grid;gap:var(--sp-s)}
body[data-locked="true"]{overflow:hidden}

@media (min-width:64rem){
  .site-nav{display:block}
  .nav-toggle{display:none}
  .header__cta{display:inline-flex}
  .drawer{display:none}
}

/* the reading-progress hairline — the page's own "thread" */
.progress-rail{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;pointer-events:none;
}
.progress-rail i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--sage),var(--forest));
  transform:scaleX(var(--doc-p,0));transform-origin:left center;
}

/* — site footer ———————————————————————————————————————————————————— */
.site-footer{
  background:var(--forest-deep);color:color-mix(in srgb,var(--ivory) 80%,var(--forest));
  padding-block:var(--sp-2xl) calc(var(--sp-l) + env(safe-area-inset-bottom));
  position:relative;overflow:hidden;
}
.footer__top{
  display:grid;gap:var(--sp-xl);
  grid-template-columns:minmax(0,1fr);
  padding-bottom:var(--sp-xl);
  border-bottom:1px solid color-mix(in srgb,var(--ivory) 14%,transparent);
}
@media (min-width:52rem){.footer__top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.footer__word{
  font-family:var(--font-serif);font-size:var(--step-3);line-height:1.22;
  font-weight:300;letter-spacing:-.022em;color:var(--ivory);max-width:19ch;
}
.footer__nav{display:grid;gap:var(--sp-l);grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr))}
.footer__h{
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage-lift);
  margin-bottom:var(--sp-s);
}
.footer__list{display:grid;gap:.1rem}
.footer__list a{
  display:inline-block;padding:.42rem 0;min-height:2.5rem;
  font-size:var(--step--1);color:color-mix(in srgb,var(--ivory) 80%,var(--forest));
  text-decoration:none;
  transition:color var(--t-fast),transform var(--t-base) var(--ease-out);
}
.footer__list a:hover,.footer__list a:focus-visible{color:var(--ivory);transform:translateX(.28rem)}
.footer__bottom{
  padding-top:var(--sp-l);
  display:flex;flex-wrap:wrap;gap:var(--sp-s) var(--sp-l);
  align-items:center;justify-content:space-between;
  font-size:var(--step--1);color:color-mix(in srgb,var(--ivory) 62%,var(--forest));
}
.footer__bottom a{color:inherit}
.footer__bottom a:hover{color:var(--ivory)}
.footer__legal{max-width:62ch;font-size:var(--step--1);line-height:1.6}

/* 8 ─ SIGNATURE SECTIONS ────────────────────────────────────────────────── */

/* — hero: an idea before a service ——————————————————————————————————— */
.hero{
  position:relative;overflow:clip;
  padding-block:clamp(3rem,1rem + 9vw,7.5rem) clamp(3.5rem,1.5rem + 9vw,8rem);
}
.hero__grid{
  display:grid;gap:var(--sp-xl) var(--sp-l);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
@media (min-width:60rem){
  .hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--sp-2xl)}
}
.hero__title{
  font-size:var(--step-6);line-height:1;letter-spacing:-.034em;font-weight:400;
  max-width:15ch;
}
.hero__title .soft{color:var(--sage-ink);font-style:italic;font-weight:300}
.hero__lead{margin-top:var(--sp-m);max-width:44ch}
.hero__actions{margin-top:var(--sp-l)}
.hero__foot{
  margin-top:var(--sp-xl);padding-top:var(--sp-m);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--sp-s) var(--sp-l);align-items:baseline;
}
.hero__foot p{font-size:var(--step--1);color:var(--meta);max-width:34ch}

/* the ripple: one still centre, rings widening outward — the brand idea */
.ripple{
  position:relative;width:100%;aspect-ratio:1;
  max-width:min(34rem,80vw);margin-inline:auto;
  display:grid;place-items:center;
}
.ripple svg{width:100%;height:100%;overflow:visible}
.ripple-ring{
  fill:none;stroke:var(--sage);stroke-width:.55;
  transform-origin:50% 50%;
  opacity:calc(.5 - var(--n) * .045);
}
.js .ripple-ring{
  animation:ripple-out 9s var(--ease-in-out) infinite;
  animation-delay:calc(var(--n) * -1.1s);
}
@keyframes ripple-out{
  0%  {transform:scale(.82);opacity:0}
  18% {opacity:.55}
  100%{transform:scale(1.14);opacity:0}
}
.ripple__core{fill:var(--forest);opacity:.92}
.ripple__arc{
  fill:none;stroke:var(--sand);stroke-width:1;stroke-linecap:round;
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:calc(var(--len,600) * (1 - var(--p,0)));
}
.ripple__word{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:var(--step-1);color:var(--forest);
  text-align:center;max-width:10ch;line-height:1.3;
  text-wrap:balance;pointer-events:none;
}

/* — the Way: eight principles as one evolving circle ————————————————— */
.way{position:relative}
.way__stage{
  position:relative;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-l);
}
.way__dial{display:none}
.way__ring{width:100%;height:auto;overflow:visible}
.way__path{
  fill:none;stroke:var(--line-strong);stroke-width:.6;
}
/* on a dark ground the drawn circle carries the light, not the green */
.band-dark .way__path,.band-photo .way__path{stroke:color-mix(in srgb,var(--ivory) 30%,transparent)}
.band-dark .way__draw,.band-photo .way__draw{stroke:var(--sage-lift);stroke-width:1.3}
.band-dark .way__spoke,.band-photo .way__spoke{stroke:color-mix(in srgb,var(--ivory) 16%,transparent)}
.band-dark .way__node circle,.band-photo .way__node circle{
  fill:var(--ivory);stroke:color-mix(in srgb,var(--ivory) 55%,transparent);
}
.band-dark .way__node text,.band-photo .way__node text{fill:var(--forest-deep)}
.band-dark .way__node:hover circle,.band-dark .way__node[aria-current="true"] circle,
.band-photo .way__node:hover circle,.band-photo .way__node[aria-current="true"] circle{
  fill:var(--sand-lift);stroke:var(--sand-lift);
}
.band-dark .way__node:hover text,.band-dark .way__node[aria-current="true"] text,
.band-photo .way__node:hover text,.band-photo .way__node[aria-current="true"] text{fill:var(--forest-deep)}
.band-dark .way__halo,.band-photo .way__halo{fill:var(--sand-lift);opacity:.22}
.way__draw{
  fill:none;stroke:var(--forest);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:var(--len,880);
  stroke-dashoffset:calc(var(--len,880) * (1 - var(--p,0)));
}
.way__spoke{stroke:var(--line);stroke-width:.4}

/* the arc that travels round to the open learning */
.way__sweep{
  fill:none;stroke:var(--sand);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:360;
  stroke-dashoffset:calc(360 - var(--deg,0));
  transform:rotate(-90deg);transform-origin:60px 60px;
  transition:stroke-dashoffset 820ms var(--ease-out);
}
/* a soft halo behind whichever node is open */
.way__halo{
  fill:var(--sand);opacity:.16;
  transition:cx 700ms var(--ease-out),cy 700ms var(--ease-out),opacity 500ms;
}
/* the open learning's numeral, very quietly, at the centre of the circle */
.way__ghost{
  font-family:var(--font-serif);font-size:26px;font-weight:300;
  fill:currentColor;opacity:.10;text-anchor:middle;dominant-baseline:middle;
  font-variant-numeric:lining-nums;
}
.way__node{cursor:pointer}
.way__node circle{
  fill:var(--ivory);stroke:var(--line-strong);stroke-width:.7;
  transition:fill var(--t-base) var(--ease-soft),stroke var(--t-base),r var(--t-base) var(--ease-out);
}
.way__node text{
  font-family:var(--font-serif);font-size:4px;fill:var(--ink-2);
  text-anchor:middle;dominant-baseline:central;
  transition:fill var(--t-base);
}
.way__node:hover circle,.way__node:focus-visible circle,.way__node[aria-current="true"] circle{
  fill:var(--forest);stroke:var(--forest);r:4.6;
}
.way__node:hover text,.way__node:focus-visible text,.way__node[aria-current="true"] text{fill:var(--ivory)}
.way__node:focus-visible{outline:none}
.way__node:focus-visible circle{stroke:var(--sand-ink);stroke-width:1.6}

/* the panel belongs to the dial; below the dial's breakpoint the vertical
   journey IS the experience, so the panel must not duplicate it */
.way__panel{
  display:none;
  min-height:14rem;flex-direction:column;justify-content:center;
  padding:var(--sp-m) 0;
}
.way__panel h3{font-size:var(--step-3);letter-spacing:-.024em;margin-block:.35em .5em}
.way__panel .plain{
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:.02em;color:var(--sage-ink);
}
.way__panel p{color:var(--muted);max-width:48ch}
.way__panel[data-swap]{
  animation:panel-in 620ms var(--ease-out);
}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* mobile / no-JS: the same eight as a vertical journey */
.way__list{display:grid;gap:0;border-top:1px solid var(--line)}
.way-step{
  position:relative;display:grid;
  grid-template-columns:2.75rem minmax(0,1fr);gap:var(--sp-s);
  padding:var(--sp-m) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.way-step__n{
  font-family:var(--font-serif);font-size:var(--step-0);color:var(--sand-ink);
  font-variant-numeric:lining-nums tabular-nums;padding-top:.15em;
}
.way-step__n::after{
  content:"";position:absolute;left:1.05rem;top:3rem;bottom:0;width:1px;
  background:var(--line);
}
.way-step:last-child .way-step__n::after{display:none}
.way-step h3{font-size:var(--step-2);letter-spacing:-.02em}
.way-step p{margin-top:.4em;font-size:var(--step--1);color:var(--muted);max-width:52ch}
.way-step:hover h3{color:var(--forest)}

@media (min-width:62rem){
  .way__stage{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sp-2xl);align-items:center}
  .way__dial{display:block}
  .way__panel{display:flex}
  .way__list{display:none}
}


/* — the lens: one wisdom, two readings ————————————————————————————— */
.lens{
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--paper);overflow:hidden;
}
.lens__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s);
  padding:var(--sp-s) var(--sp-m);
  border-bottom:1px solid var(--line-soft);background:var(--ivory-deep);
}
.lens__label{
  font-size:var(--step--2);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sage-ink);
}
.lens__switch{
  position:relative;display:inline-flex;padding:3px;
  background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-pill);
  margin-inline-start:auto;
}
.lens__switch::before{
  content:"";position:absolute;z-index:0;top:3px;bottom:3px;
  left:3px;width:var(--thumb-w,50%);
  background:var(--forest);border-radius:var(--r-pill);
  transform:translateX(var(--thumb-x,0));
  transition:transform 480ms var(--ease-out),width 480ms var(--ease-out);
}
.lens__opt{
  position:relative;z-index:1;
  min-height:2.5rem;padding:.5rem 1.05rem;
  font-size:var(--step--2);font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-2);border-radius:var(--r-pill);white-space:nowrap;
  transition:color 300ms var(--ease-soft);
}
.lens__opt[aria-selected="true"]{color:var(--ivory)}
.lens__body{position:relative;padding:var(--sp-m)}
.lens__view[hidden]{display:none!important}
.lens__view{animation:lens-wipe 620ms var(--ease-out)}
@keyframes lens-wipe{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-6px)}
  to  {opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
.lens__view h3{font-size:var(--step-2);margin-bottom:.45em}
.lens__view p{color:var(--muted);max-width:56ch}
.lens__q{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:var(--step-1);color:var(--forest);margin-top:var(--sp-s);max-width:40ch;
}

/* — today's practice ——————————————————————————————————————————————— */
.practice{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-l);
  background:
    radial-gradient(90% 130% at 100% 0%,var(--sage-tint) 0%,transparent 62%),
    var(--paper);
  padding:var(--sp-l);
  display:grid;gap:var(--sp-m);
}
@media (min-width:48rem){
  .practice{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--sp-xl)}
}
.practice__verb{
  font-family:var(--font-serif);font-size:var(--step-5);line-height:1;
  letter-spacing:-.03em;font-weight:300;color:var(--forest);
}
.practice__instruction{
  font-size:var(--step-1);line-height:1.5;color:var(--ink);max-width:38ch;margin-top:var(--sp-s);
}
.practice__meta{
  margin-top:var(--sp-m);display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-m);align-items:center;
}
.practice__time{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--step--1);font-weight:600;color:var(--sand-ink);
}
.practice__time svg{width:1em;height:1em}

/* breathing guide — 4 in · 6 out, calm and honest */
.breath{
  --d:10s;
  position:relative;display:grid;place-items:center;
  width:clamp(8rem,26vw,11.5rem);aspect-ratio:1;margin-inline:auto;
}
.breath__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--sage);
  animation:breath var(--d) var(--ease-in-out) infinite;
}
.breath__ring:nth-child(2){animation-delay:calc(var(--d) / -3);opacity:.5}
.breath__ring:nth-child(3){animation-delay:calc(var(--d) / -1.5);opacity:.3}
.breath__word{
  font-family:var(--font-serif);font-style:italic;font-size:var(--step-1);
  color:var(--sage-ink);z-index:1;
}
@keyframes breath{
  0%,100%{transform:scale(.62);opacity:.15}
  40%    {transform:scale(1);opacity:.55}
  46%    {transform:scale(1);opacity:.55}
}
.breath[data-static="true"] .breath__ring{animation:none;transform:scale(.85)}

/* — pause & reflect ————————————————————————————————————————————————— */
.reflect{
  border-left:2px solid var(--sand);
  background:var(--sand-tint);
  padding:var(--sp-m) var(--sp-m) var(--sp-m) var(--sp-l);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.reflect__q{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.32;
  font-weight:300;letter-spacing:-.018em;color:var(--ink);max-width:38ch;
}
.reflect__q+.reflect__q{margin-top:.55em;color:var(--forest)}
.reflect textarea{
  display:block;width:100%;margin-top:var(--sp-m);
  min-height:7.5rem;resize:vertical;
  padding:.9rem 1rem;font-size:var(--step--1);line-height:1.6;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-s);
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.reflect textarea::placeholder{color:var(--meta)}
.reflect textarea:focus-visible{
  border-color:var(--forest);box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 14%,transparent);
  outline:none;
}
.reflect__foot{
  margin-top:var(--sp-s);display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-m);
  align-items:center;justify-content:space-between;
}
.reflect__privacy{
  display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--step--1);color:var(--sand-ink);font-weight:500;
}
.reflect__privacy svg{width:1em;height:1em;flex:0 0 auto}
.reflect__tools{display:flex;flex-wrap:wrap;gap:.5rem}
.reflect__tools button{
  min-height:2.5rem;padding:.45rem 1rem;
  font-size:var(--step--2);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:transparent;
  transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast);
}
.reflect__tools button:hover{border-color:var(--forest);color:var(--forest);background:var(--paper)}
.reflect__said{
  font-size:var(--step--1);color:var(--sage-ink);font-weight:600;
  opacity:0;transition:opacity var(--t-base);
}
.reflect__said[data-on="true"]{opacity:1}

/* — find your path ————————————————————————————————————————————————— */
.path{
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--paper);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.path__head{
  padding:var(--sp-m) var(--sp-l);border-bottom:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-s);align-items:center;justify-content:space-between;
  background:var(--ivory-deep);
}
.path__steps{display:flex;align-items:center;gap:.5rem}
.path__dot{
  width:1.75rem;height:.25rem;border-radius:var(--r-pill);
  background:var(--line-strong);
  transition:background-color 420ms var(--ease-out),width 420ms var(--ease-out);
}
.path__dot[data-state="done"]{background:var(--sage)}
.path__dot[data-state="now"]{background:var(--forest);width:3rem}
.path__count{font-size:var(--step--2);letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--meta)}

.path__body{position:relative;padding:var(--sp-l)}
@media (min-width:48rem){.path__body{padding:var(--sp-xl)}}
.path__q{
  font-family:var(--font-serif);font-size:var(--step-3);line-height:1.16;
  letter-spacing:-.024em;max-width:20ch;
}
.path__hint{margin-top:var(--sp-2xs);font-size:var(--step--1);color:var(--meta)}
.path__opts{
  margin-top:var(--sp-l);
  display:grid;gap:.65rem;
  grid-template-columns:repeat(auto-fill,minmax(min(13rem,100%),1fr));
}
.path__opt{
  position:relative;text-align:left;
  min-height:3.25rem;padding:.85rem 1.1rem;
  font-size:var(--step--1);font-weight:500;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);border-radius:var(--r-m);
  transition:border-color var(--t-base),background-color var(--t-base),
             color var(--t-base),transform var(--t-fast) var(--ease-soft);
}
.path__opt:hover{border-color:var(--sage);background:var(--sage-tint)}
.path__opt[aria-pressed="true"]{
  background:var(--forest);border-color:var(--forest);color:var(--ivory);
}
.path__opt[aria-pressed="true"]::after{
  content:"";position:absolute;top:.85rem;right:.9rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--sand-lift);
}
.path__panel[hidden]{display:none!important}
.path__panel{animation:panel-in 520ms var(--ease-out)}
.path__foot{
  margin-top:var(--sp-l);padding-top:var(--sp-m);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-s);align-items:center;justify-content:space-between;
}

/* the result: exactly three, with one sentence of reasoning */
.path__why{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:var(--sp-s) var(--sp-m);margin-bottom:var(--sp-l);
  background:var(--sage-tint);border-radius:var(--r-m);
  font-size:var(--step--1);color:var(--sage-ink);line-height:1.6;
}
.path__why svg{width:1.1em;height:1.1em;flex:0 0 auto;margin-top:.25em}
.result-grid{display:grid;gap:var(--sp-m);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.result{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-2xs);
  padding:var(--sp-m);border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--ivory);
  transition:border-color var(--t-base),transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.result:hover{border-color:var(--sage);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.result__kicker{
  font-size:var(--step--2);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sand-ink);
}
.result__title{font-family:var(--font-serif);font-size:var(--step-2);line-height:1.2;letter-spacing:-.02em}
.result__text{font-size:var(--step--1);color:var(--muted);line-height:1.6}
.result__foot{margin-top:auto;padding-top:var(--sp-s)}

/* — respond, don't react ————————————————————————————————————————— */
.respond{position:relative}
.respond__triggers{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--sp-m);
}
.respond__trigger{
  min-height:2.75rem;padding:.6rem 1.15rem;
  font-size:var(--step--1);font-weight:500;
  color:var(--ivory);background:transparent;
  border:1px solid color-mix(in srgb,var(--ivory) 30%,transparent);
  border-radius:var(--r-pill);
  transition:background-color var(--t-base),color var(--t-base),border-color var(--t-base);
}
.respond__trigger:hover{border-color:var(--sand-lift);color:var(--sand-lift)}
.respond__trigger[aria-pressed="true"]{background:var(--ivory);color:var(--forest-deep);border-color:var(--ivory)}

.steps{
  display:grid;gap:0;margin-top:var(--sp-xl);
  grid-template-columns:minmax(0,1fr);
  counter-reset:step;
}
@media (min-width:56rem){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
.step{
  position:relative;padding:var(--sp-m) var(--sp-m) var(--sp-m) 0;
  border-top:1px solid color-mix(in srgb,var(--ivory) 16%,transparent);
  opacity:.5;
  transition:opacity 700ms var(--ease-out);
}
@media (min-width:56rem){.step{padding:var(--sp-m) var(--sp-s) var(--sp-l) 0}}
.step[data-on="true"]{opacity:1}
.step::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;
  background:var(--sand-lift);transform:scaleX(0);transform-origin:left center;
  transition:transform 900ms var(--ease-out);
}
.step[data-on="true"]::before{transform:scaleX(1)}
.step__verb{
  font-family:var(--font-serif);font-size:var(--step-2);letter-spacing:-.02em;
  color:var(--ivory);margin-bottom:.35em;
}
.step__text{font-size:var(--step--1);line-height:1.6;color:color-mix(in srgb,var(--ivory) 74%,var(--forest))}
.respond__out{
  margin-top:var(--sp-l);padding-top:var(--sp-m);
  border-top:1px solid color-mix(in srgb,var(--ivory) 16%,transparent);
}
.respond__note{
  font-size:var(--step--1);color:color-mix(in srgb,var(--ivory) 62%,var(--forest));
  max-width:60ch;line-height:1.6;
}

/* — two paths: the segmentation cards ——————————————————————————————— */
.paths{display:grid;gap:var(--sp-m);grid-template-columns:minmax(0,1fr)}
@media (min-width:52rem){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path-card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(20rem,42vw,27rem);
  padding:var(--sp-l);overflow:hidden;isolation:isolate;
  border-radius:var(--r-l);text-decoration:none;color:var(--ivory);
  background:var(--forest);
}
.path-card__bg{position:absolute;inset:0;z-index:-2}
.path-card__bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.path-card:hover .path-card__bg img{transform:scale(1.045)}
.path-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgb(22 41 31 / .30) 0%, rgb(22 41 31 / .62) 34%,
    rgb(22 41 31 / .90) 62%, rgb(22 41 31 / .97) 100%);
  transition:opacity var(--t-slow);
}
.path-card__eyebrow{
  font-size:var(--step--2);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sage-lift) 45%,var(--ivory));
  margin-bottom:var(--sp-s);
}
.path-card__title{
  font-family:var(--font-serif);font-size:var(--step-4);line-height:1.05;
  letter-spacing:-.026em;max-width:12ch;
}
.path-card__text{
  margin-top:var(--sp-s);font-size:var(--step--1);line-height:1.6;max-width:40ch;
  color:color-mix(in srgb,var(--ivory) 84%,var(--forest));
}
.path-card__cta{
  margin-top:var(--sp-m);display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--step--1);font-weight:600;
}
.path-card__cta svg{width:.9em;height:.9em;transition:transform var(--t-base) var(--ease-out)}
.path-card:hover .path-card__cta svg{transform:translateX(.3em)}

/* — no dead ends: exactly one of each ————————————————————————————— */
.next{
  display:grid;gap:var(--sp-m);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
}
.next__item{
  display:flex;flex-direction:column;gap:.5rem;
  padding-top:var(--sp-s);border-top:2px solid var(--forest);
  text-decoration:none;color:inherit;
  transition:border-color var(--t-base);
}
.next__item:nth-child(2){border-color:var(--sage)}
.next__item:nth-child(3){border-color:var(--sand)}
.next__kicker{
  font-size:var(--step--2);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--meta);
}
.next__title{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.2;letter-spacing:-.02em;
  transition:color var(--t-base);
}
.next__item:hover .next__title{color:var(--forest)}
.next__text{font-size:var(--step--1);color:var(--muted);line-height:1.6}

/* 9 ─ EDITORIAL ─────────────────────────────────────────────────────────── */

.breadcrumb{font-size:var(--step--1);color:var(--meta)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.35rem;color:var(--line-strong)}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--forest);text-decoration:underline}

/* article head */
.article-head{padding-block:var(--sp-xl) var(--sp-l)}
.article-head__title{font-size:var(--step-5);letter-spacing:-.03em;max-width:20ch;margin-top:var(--sp-s)}
.article-head__stand{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.4;font-weight:300;
  color:var(--ink-2);max-width:44ch;margin-top:var(--sp-m);letter-spacing:-.014em;
}
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s) var(--sp-m);
  margin-top:var(--sp-l);padding-top:var(--sp-m);border-top:1px solid var(--line);
}
.byline__who{display:flex;align-items:center;gap:.7rem}
.byline__avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;
  background:var(--sage-tint);flex:0 0 auto;
}
.byline__name{font-size:var(--step--1);font-weight:600;color:var(--ink)}
.byline__name a{text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem}
.byline__name a:hover{color:var(--forest);text-decoration:underline}
.byline__role{font-size:var(--step--2);color:var(--meta)}

/* article layout: content + sidebar that becomes a footer on small screens */
.article-grid{display:grid;gap:var(--sp-xl);grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  .article-grid{grid-template-columns:minmax(0,1fr) minmax(15rem,18.5rem);gap:var(--sp-2xl)}
  .article-side{position:sticky;top:var(--scroll-pad);align-self:start;max-height:calc(100svh - var(--scroll-pad) - 2rem);overflow-y:auto}
}
.side-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:var(--sp-m);
}
.side-card+.side-card{margin-top:var(--sp-m)}
.side-card__h{
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sage-ink);
  margin-bottom:var(--sp-s);
}

/* the prose engine — everything Ariana injects into {{{ post.content }}} */
.prose{
  font-size:var(--step-0);line-height:1.72;color:var(--ink);
  max-width:var(--measure);
  hanging-punctuation:first last;
}
.prose>*+*{margin-top:1.15em}
.prose p{letter-spacing:-.004em}
.prose h2{
  font-size:var(--step-3);line-height:1.16;letter-spacing:-.024em;
  margin-top:2em;margin-bottom:.1em;max-width:24ch;
}
.prose h3{font-size:var(--step-2);line-height:1.24;margin-top:1.75em;margin-bottom:.05em;max-width:30ch}
.prose h4{font-size:var(--step-1);font-family:var(--font-sans);font-weight:600;letter-spacing:-.006em;margin-top:1.6em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.6em}
.prose a{
  color:var(--forest);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--forest) 30%,transparent);
  transition:text-decoration-color var(--t-fast);
}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.45em}
.prose ul>li::marker{color:var(--sage);content:"— "}
.prose ol>li::marker{color:var(--sand-ink);font-family:var(--font-serif)}
.prose blockquote{
  margin-block:1.8em;padding-left:var(--sp-m);
  border-left:2px solid var(--sand);
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.36;
  font-weight:300;letter-spacing:-.018em;color:var(--forest);max-width:34ch;
}
.prose blockquote p+p{margin-top:.5em}
.prose blockquote cite{
  display:block;margin-top:.7em;font:600 var(--step--1)/1.5 var(--font-sans);
  font-style:normal;color:var(--meta);letter-spacing:.01em;
}
.prose figure{margin-block:2em}
.prose figure img{border-radius:var(--r-m);width:100%}
.prose figcaption{
  margin-top:.7em;font-size:var(--step--1);color:var(--meta);line-height:1.55;
  max-width:52ch;
}
.prose hr{margin-block:2.5em;border-top:1px solid var(--line);width:5rem}
.prose img{border-radius:var(--r-m)}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--ivory-deep);padding:.15em .4em;border-radius:var(--r-xs);
}
.prose pre{
  background:var(--forest-deep);color:var(--ivory);padding:var(--sp-m);
  border-radius:var(--r-m);overflow-x:auto;font-size:var(--step--1);line-height:1.6;
}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.prose :is(th,td){padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-weight:600;color:var(--ink);border-bottom-color:var(--line-strong)}
.prose .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* first paragraph reads as a proper opening */
.prose>p:first-of-type{font-size:var(--step-1);line-height:1.6;color:var(--ink-2);letter-spacing:-.01em}

/* pull quote used inside long reads */
.prose .pull{
  float:none;margin-block:2em;padding-block:var(--sp-s);
  border-block:1px solid var(--line);
  font-family:var(--font-serif);font-size:var(--step-3);line-height:1.28;
  font-weight:300;color:var(--forest);letter-spacing:-.022em;max-width:100%;
}
@media (min-width:75rem){
  .prose .pull--side{
    float:right;width:16rem;margin:.4em -18rem .9em 2rem;
    border:0;border-left:2px solid var(--sand);padding:0 0 0 var(--sp-s);
    font-size:var(--step-2);
  }
}

/* post cards */
.post-card{
  display:flex;flex-direction:column;gap:var(--sp-s);
  position:relative;text-decoration:none;color:inherit;
}
.post-card__media{overflow:hidden;border-radius:var(--r-m);background:var(--ivory-deep)}
.post-card__media img{aspect-ratio:3/2;width:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card__title{
  font-family:var(--font-serif);font-size:var(--step-2);line-height:1.2;letter-spacing:-.021em;
  transition:color var(--t-base);
}
.post-card:hover .post-card__title{color:var(--forest)}
.post-card__excerpt{font-size:var(--step--1);line-height:1.62;color:var(--muted);max-width:48ch}
.post-card__meta{
  display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center;
  font-size:var(--step--2);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--meta);
}
.post-card--lead{gap:var(--sp-m)}
@media (min-width:56rem){
  .post-card--lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:center;gap:var(--sp-xl)}
  .post-card--lead .post-card__title{font-size:var(--step-4);letter-spacing:-.026em}
  .post-card--lead .post-card__excerpt{font-size:var(--step-0)}
  .post-card--lead .post-card__media img{aspect-ratio:4/3}
}
.post-card--row{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--sp-s);align-items:start;
}
.post-card--row .post-card__media img{aspect-ratio:1}
/* The first item of an archive reads as the featured lead, at any post count.
   It only becomes two columns when the article actually has an image — an
   image-less lead stays a single wide column instead of scattering its own
   text across an empty picture slot. */
@media (min-width:56rem){
  .grid--lead{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--lead>:first-child{
    grid-column:1/-1;
    padding-bottom:var(--sp-l);margin-bottom:var(--sp-s);
    border-bottom:1px solid var(--line);
  }
  .grid--lead>:first-child .post-card__title{font-size:var(--step-4);letter-spacing:-.026em;max-width:22ch}
  .grid--lead>:first-child .post-card__excerpt{font-size:var(--step-0);max-width:54ch}
  .grid--lead>:first-child:has(.post-card__media){
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:var(--sp-s) var(--sp-xl);align-items:center;
  }
  .grid--lead>:first-child:has(.post-card__media)>*{grid-column:1}
  .grid--lead>:first-child:has(.post-card__media) .post-card__media{
    grid-column:2;grid-row:1/span 4;align-self:center;
  }
  .grid--lead>:first-child .post-card__media img{aspect-ratio:4/3}
}
.post-card--row .post-card__title{font-size:var(--step-0);font-family:var(--font-sans);font-weight:600;line-height:1.35;letter-spacing:-.008em}

.badge-audio{
  display:inline-flex;align-items:center;gap:.35em;
  font-size:var(--step--2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sand-ink);
}
.badge-audio svg{width:.9em;height:.9em}

/* river of posts, separated by hairlines rather than boxes */
.river{display:grid;gap:0}
.river>li{border-top:1px solid var(--line);padding-block:var(--sp-l)}
.river>li:first-child{border-top:0;padding-top:0}

/* filters */
.filters{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
}
.filters--scroll{
  flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.filters--scroll>*{scroll-snap-align:start;flex:0 0 auto}
@media (min-width:48rem){.filters--scroll{flex-wrap:wrap;overflow:visible}}

/* pagination */
.pager{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;
  margin-top:var(--sp-xl);padding-top:var(--sp-l);border-top:1px solid var(--line);
}
.pager a,.pager span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;min-height:2.75rem;padding:.5rem .8rem;
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  border:1px solid transparent;border-radius:var(--r-pill);text-decoration:none;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.pager a:hover{border-color:var(--line-strong);color:var(--forest)}
.pager [aria-current="page"]{background:var(--forest);color:var(--ivory)}
.pager .is-gap{color:var(--line-strong);min-width:1.5rem}

/* prev / next article */
.adjacent{
  display:grid;gap:var(--sp-m);grid-template-columns:minmax(0,1fr);
  margin-top:var(--sp-xl);padding-top:var(--sp-l);border-top:1px solid var(--line);
}
@media (min-width:48rem){.adjacent{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adjacent a{
  display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit;
  padding:var(--sp-s) 0;
}
.adjacent a:last-child{text-align:right}
.adjacent__dir{font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--meta)}
.adjacent__t{font-family:var(--font-serif);font-size:var(--step-1);line-height:1.25;letter-spacing:-.018em}
.adjacent a:hover .adjacent__t{color:var(--forest)}

/* author box */
.authorbox{
  display:grid;gap:var(--sp-m);grid-template-columns:minmax(0,1fr);
  padding:var(--sp-l);background:var(--ivory-deep);border-radius:var(--r-m);
  margin-top:var(--sp-xl);
}
@media (min-width:40rem){.authorbox{grid-template-columns:5.5rem minmax(0,1fr);align-items:start;gap:var(--sp-l)}}
.authorbox img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;background:var(--sage-tint)}
.authorbox__name{font-family:var(--font-serif);font-size:var(--step-2);letter-spacing:-.02em}
.authorbox__role{font-size:var(--step--1);color:var(--sage-ink);font-weight:600;margin-top:.15em}
.authorbox__bio{margin-top:var(--sp-s);font-size:var(--step--1);line-height:1.65;color:var(--muted);max-width:60ch}
.authorbox__links{margin-top:var(--sp-s);display:flex;flex-wrap:wrap;gap:.75rem}
.authorbox__links a{
  font-size:var(--step--1);color:var(--forest);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--forest) 28%,transparent);
  min-height:2.5rem;display:inline-flex;align-items:center;
}
.authorbox__links a:hover{text-decoration-color:currentColor}

/* 10 ─ ARIANA WIDGETS ───────────────────────────────────────────────────── */
/* Ariana's own rules use :where() (zero specificity), so a single class wins. */

.ariana-summary{
  margin-block:var(--sp-l);padding:var(--sp-m) var(--sp-m) var(--sp-m) var(--sp-l);
  background:var(--sage-tint);border-left:2px solid var(--sage);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.ariana-summary__title{
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sage-ink);
  margin-bottom:var(--sp-s);
}
.ariana-summary__text{
  font-family:var(--font-serif);font-size:var(--step-1);line-height:1.5;
  font-weight:300;color:var(--ink);letter-spacing:-.012em;max-width:54ch;
}
.ariana-summary__list{
  margin-top:var(--sp-s);padding-left:1.2em;font-size:var(--step--1);
  line-height:1.65;color:var(--ink-2);
}
.ariana-summary__list li+li{margin-top:.4em}
.ariana-summary__list li::marker{color:var(--sage)}

.ariana-podcast-player{
  margin-block:var(--sp-l);padding:var(--sp-m);
  background:var(--forest-deep);color:var(--ivory);border-radius:var(--r-m);
}
.ariana-podcast-player__label{
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sage-lift);
}
.ariana-podcast-player__duration{font-size:var(--step--1);color:color-mix(in srgb,var(--ivory) 70%,var(--forest))}
.ariana-podcast-player audio{width:100%;margin-top:var(--sp-s)}

.ariana-preferred-sources{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:var(--sp-m);
}
.ariana-preferred-sources__title{
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sage-ink);
  margin-bottom:var(--sp-2xs);
}
.ariana-preferred-sources__text{
  font-size:var(--step--1);line-height:1.6;color:var(--muted);margin-bottom:var(--sp-s);
}

/* Ariana's own table of contents */
.toc-wrap{font-size:var(--step--1)}
.toc-wrap ol,.toc-wrap ul{list-style:none;padding:0;margin:0}
.toc-wrap li{margin:0}
.toc-wrap a{
  display:block;padding:.42rem 0 .42rem .8rem;
  border-left:2px solid var(--line);
  color:var(--ink-2);text-decoration:none;line-height:1.45;
  transition:border-color var(--t-fast),color var(--t-fast),padding-left var(--t-base) var(--ease-out);
}
.toc-wrap a:hover,.toc-wrap a:focus-visible{border-color:var(--forest);color:var(--forest);padding-left:1.05rem}
.toc-wrap a[aria-current="true"],.toc-wrap .is-current>a{border-color:var(--forest);color:var(--forest);font-weight:600}
.toc-wrap ol ol a,.toc-wrap ul ul a{padding-left:1.6rem;font-size:.94em}
.toc-wrap ol ol a:hover{padding-left:1.85rem}

/* 11 ─ FORMS ────────────────────────────────────────────────────────────── */
.field{display:grid;gap:.4rem;margin-bottom:var(--sp-m)}
.field label,.ariana-contact label{
  font-size:var(--step--1);font-weight:600;color:var(--ink);letter-spacing:-.004em;
}
.field .req{color:var(--sand-ink);font-weight:400}
.field__help{font-size:var(--step--1);color:var(--meta);line-height:1.5}
.input,
.ariana-contact input,.ariana-contact textarea,.ariana-contact select{
  width:100%;min-height:3rem;padding:.75rem .95rem;
  font-size:var(--step-0);line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-s);
  transition:border-color var(--t-base),box-shadow var(--t-base);
  appearance:none;
}
textarea.input,.ariana-contact textarea{min-height:9rem;resize:vertical;line-height:1.65}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5150' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:.75rem;
  padding-right:2.75rem;cursor:pointer;
}
.input::placeholder{color:var(--meta)}
.input:hover,.ariana-contact input:hover{border-color:var(--ink-3)}
.input:focus-visible,
.ariana-contact input:focus-visible,.ariana-contact textarea:focus-visible,.ariana-contact select:focus-visible{
  outline:none;border-color:var(--forest);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 15%,transparent);
}
.field--invalid .input,.ariana-contact__field--invalid input,.ariana-contact__field--invalid textarea{
  border-color:#a8352b;
}
.field__error,.ariana-contact__error{
  font-size:var(--step--1);font-weight:600;color:#8c2b22;line-height:1.5;
  display:flex;gap:.4em;align-items:flex-start;
}
.ariana-contact__error--summary{
  padding:var(--sp-s) var(--sp-m);background:#fbeceb;
  border:1px solid #e6b8b3;border-radius:var(--r-s);margin-bottom:var(--sp-m);
}
.ariana-contact__sent,.form__sent{
  padding:var(--sp-s) var(--sp-m);margin-bottom:var(--sp-m);
  background:var(--sage-tint);border:1px solid var(--sage);border-radius:var(--r-s);
  font-size:var(--step--1);font-weight:600;color:var(--sage-ink);line-height:1.55;
}
.ariana-contact__row{display:grid;gap:.4rem;margin-bottom:var(--sp-m)}
.ariana-contact__submit,.btn[type="submit"]{
  min-height:3.25rem;padding:.95em 2em;
  background:var(--forest);color:var(--ivory);
  border:1px solid var(--forest);border-radius:var(--r-pill);
  font-size:var(--step--1);font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background-color var(--t-base) var(--ease-soft);
}
.ariana-contact__submit:hover{background:var(--forest-soft)}
.form-grid{display:grid;gap:0 var(--sp-m);grid-template-columns:minmax(0,1fr)}
@media (min-width:44rem){.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-note{font-size:var(--step--1);color:var(--meta);line-height:1.6;max-width:56ch}

/* checkbox / radio built from real inputs */
.choice{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;min-height:2.75rem;cursor:pointer}
.choice input{
  width:1.15rem;height:1.15rem;margin-top:.28rem;flex:0 0 auto;accent-color:var(--forest);cursor:pointer;
}
.choice span{font-size:var(--step--1);line-height:1.6;color:var(--ink-2)}

/* 12 ─ UTILITIES ────────────────────────────────────────────────────────── */
.u-center{text-align:center}
.u-center .eyebrow,.u-center .lead{margin-inline:auto}
.u-center .lead{text-align:center}
.measure{max-width:var(--measure)}
.measure-tight{max-width:var(--measure-tight)}
.mt-0{margin-top:0}
.mt-s{margin-top:var(--sp-s)}
.mt-m{margin-top:var(--sp-m)}
.mt-l{margin-top:var(--sp-l)}
.mt-xl{margin-top:var(--sp-xl)}
.mb-m{margin-bottom:var(--sp-m)}
.mb-l{margin-bottom:var(--sp-l)}
.mb-xl{margin-bottom:var(--sp-xl)}
.section-head{margin-bottom:var(--sp-xl);max-width:var(--measure-wide)}
.section-head h2{max-width:18ch}
.section-head .lead{margin-top:var(--sp-s)}
.section-head--split{
  display:grid;gap:var(--sp-m) var(--sp-xl);align-items:end;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:56rem){
  .section-head--split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .section-head--split>:last-child{justify-self:end;text-align:right}
}
.hide-sm{display:none}
@media (min-width:48rem){.hide-sm{display:revert}.only-sm{display:none}}

/* the quiet return-visitor nudge — privacy-respecting, dismissible */
.resume{
  position:fixed;left:var(--gutter);bottom:calc(1rem + env(safe-area-inset-bottom));z-index:90;
  max-width:min(22rem,calc(100vw - var(--gutter)*2));
  display:flex;gap:.75rem;align-items:center;
  padding:.7rem .8rem .7rem 1rem;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  box-shadow:var(--shadow-2);
  font-size:var(--step--1);
  transform:translateY(140%);opacity:0;
  transition:transform 620ms var(--ease-out),opacity 420ms var(--ease-out);
}
.resume[data-on="true"]{transform:none;opacity:1}
.resume a{
  color:var(--forest);font-weight:600;text-decoration:none;flex:1 1 auto;
  display:flex;align-items:center;min-height:2.75rem;
}
.resume a:hover{text-decoration:underline}
.resume button{
  flex:0 0 auto;width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border-radius:50%;color:var(--meta);
}
.resume button:hover{background:var(--ivory-deep);color:var(--ink)}
.resume svg{width:.85rem;height:.85rem}

/* 404 */
.notfound{min-height:60svh;display:grid;place-items:center;text-align:center;padding-block:var(--sp-2xl)}
.notfound__code{
  font-family:var(--font-serif);font-size:var(--step-6);line-height:1;color:var(--sand-ink);
  font-variant-numeric:lining-nums;
}

/* 13 ─ RESPONSIVE FINE-TUNING ───────────────────────────────────────────── */
/* short laptop screens (13" 1280×800 etc.) — protect vertical rhythm       */
@media (min-width:64rem) and (max-height:52rem){
  :root{--sp-2xl:clamp(3rem,2rem + 4vw,5rem);--sp-3xl:clamp(4rem,3rem + 5vw,7rem)}
  .hero{padding-block:clamp(2rem,1rem + 4vw,3.5rem) clamp(2.5rem,1rem + 4vw,4rem)}
  .hero__title{font-size:var(--step-5)}
}
/* very large displays (27"+) — cap measure, let whitespace do the work     */
@media (min-width:100rem){
  :root{--gutter:clamp(3.5rem,2rem + 3vw,6rem)}
  .prose{font-size:1.1875rem}
}
@media (min-width:120rem){
  :root{--w-page:min(100% - var(--gutter)*2,84rem);--w-full:min(100% - var(--gutter)*2,124rem)}
}
/* coarse pointers: no hover-only affordances, bigger targets              */
@media (hover:none){
  .card:hover{transform:none;box-shadow:none}
  .need:hover::before{transform:translateY(101%)}
  .need:active::before{transform:translateY(0)}
  .need:active{color:var(--ivory)}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0}
}
/* forced colours (Windows High Contrast) */
@media (forced-colors:active){
  .btn,.card,.need,.result,.path__opt{border:1px solid CanvasText}
  .lens__switch::before{background:Highlight}
  .progress-rail i{background:Highlight}
  .way__draw,.way__path{stroke:CanvasText}
}

/* 14 ─ PRINT ────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.site-footer,.drawer,.resume,.path,.respond,.reflect__tools,
  .nav-toggle,.progress-rail,.breath{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .prose{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .section{padding-block:1rem}
  .band-dark,.band-forest{background:#fff!important;color:#000!important}
}

/* 15 ─ PHOTOGRAPHY ──────────────────────────────────────────────────────── */
/* Images arrive the way a page turns: a soft wipe upward while the picture
   itself settles out of a slight over-scale. Never a bounce, never a spin. */

.shot{
  position:relative;overflow:hidden;
  border-radius:var(--r-m);background:var(--ivory-deep);
  isolation:isolate;
}
.shot>img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.6s var(--ease-out),filter 1.6s var(--ease-out);
}
.js .shot{clip-path:inset(0 0 100% 0)}
.js .shot.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1250ms var(--ease-out) var(--rv-d,0ms);
}
.js .shot.is-in>img{
  transform:scale(1);
  transition:transform 1900ms var(--ease-out) var(--rv-d,0ms);
}
/* a second wipe layer: a warm veil that lifts off the picture */
.shot::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ivory);transform-origin:bottom center;
  transform:scaleY(0);
}
.js .shot::after{transform:scaleY(1)}
.js .shot.is-in::after{
  transform:scaleY(0);
  transition:transform 1100ms var(--ease-out) calc(var(--rv-d,0ms) + 60ms);
}
.band-dark .shot::after,.band-forest .shot::after{background:var(--forest-deep)}

/* aspect helpers */
.shot--3x2{aspect-ratio:3/2}
.shot--4x5{aspect-ratio:4/5}
.shot--3x4{aspect-ratio:3/4}
.shot--1x1{aspect-ratio:1/1}
.shot--16x9{aspect-ratio:16/9}
.shot--21x9{aspect-ratio:21/9}
.shot--book{aspect-ratio:733/1000;background:transparent;border-radius:var(--r-s)}
.shot--book>img{object-fit:contain;transform:none}
.js .shot--book.is-in>img{transform:none}

/* gentle scrub parallax — decorative layers only, never text */
[data-scrub] .shot--par>img,
[data-scrub] img.par{
  transform:translate3d(0,calc((var(--p,.5) - .5) * var(--par,52px)),0) scale(1.14);
  transition:none;
}
.band-photo__bg img.par{width:100%;height:100%;object-fit:cover}

/* the atmosphere images sit slightly back from the reading: a whisper of the
   brand green over them, lifted on hover so the photograph comes forward */
.shot--calm>img{filter:saturate(.82) contrast(1.02)}
.shot--calm::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgb(31 61 49 / .10),rgb(31 61 49 / .22));
  mix-blend-mode:multiply;opacity:1;
  transition:opacity 1s var(--ease-out);
}
a:hover>.shot--calm::before,.card:hover .shot--calm::before{opacity:.45}
a:hover>.shot--calm>img,.card:hover .shot--calm>img{filter:saturate(1) contrast(1.02)}

/* the fine print under a photograph */
.shot-credit{
  margin-top:.65rem;font-size:var(--step--2);letter-spacing:.02em;
  color:var(--meta);text-transform:none;
}
.shot-credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong)}
.shot-credit a:hover{color:var(--forest)}

/* a whole section carried on a photograph */
.band-photo{position:relative;isolation:isolate;overflow:clip}
.band-photo>.band-photo__bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
}
.band-photo__bg img{width:100%;height:100%;object-fit:cover}
.band-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgb(22 41 31 / .80) 0%,rgb(22 41 31 / .66) 42%,rgb(22 41 31 / .90) 100%),
    linear-gradient(90deg,rgb(22 41 31 / .58) 0%,rgb(22 41 31 / .10) 70%);
}
/* the paper grain that keeps a flat dark band from looking like plastic */
.grain::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 2px,rgb(255 255 255 / .012) 2px 3px),
    repeating-linear-gradient(90deg,transparent 0 2px,rgb(0 0 0 / .012) 2px 3px);
}
.grain>*{position:relative;z-index:1}

/* 16 ─ EDITORIAL DETAIL ─────────────────────────────────────────────────── */
/* a magazine folio in the margin of each movement of the page */
.folio{
  display:flex;align-items:baseline;gap:.6em;
  font-family:var(--font-serif);font-size:var(--step--1);
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--sand-ink);letter-spacing:.02em;margin-bottom:var(--sp-s);
}
.folio::after{content:"";flex:1 1 auto;height:1px;background:var(--rule);max-width:5rem}
.band-dark .folio,.band-forest .folio,.band-photo .folio{color:var(--sand-lift)}

/* an oversized quiet numeral behind a heading */
.ghost-num{
  position:absolute;right:0;top:-.25em;z-index:-1;
  font-family:var(--font-serif);font-size:clamp(6rem,18vw,15rem);
  line-height:1;font-weight:300;color:var(--forest);opacity:.045;
  font-variant-numeric:lining-nums;pointer-events:none;user-select:none;
}
.band-dark .ghost-num,.band-photo .ghost-num{color:var(--ivory);opacity:.06}

/* a caption that runs up the side of a tall image */
.side-caption{
  position:absolute;left:0;bottom:0;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg) translateX(.25rem);
  font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ivory);
  padding:1.25rem .75rem;
  background:rgb(22 41 31 / .80);
  border-radius:0 var(--r-s) 0 var(--r-m);
}
@media (max-width:48rem){.side-caption{display:none}}

/* portrait plate: the photograph with a hairline offset frame behind it */
.portrait{position:relative}
.portrait::before{
  content:"";position:absolute;inset:1.25rem -1.25rem -1.25rem 1.25rem;z-index:-1;
  border:1px solid var(--line-strong);border-radius:var(--r-m);
}
.band-dark .portrait::before{border-color:color-mix(in srgb,var(--ivory) 24%,transparent)}
@media (max-width:40rem){.portrait::before{inset:.75rem -.75rem -.75rem .75rem}}

/* an inset caption card that overlaps the bottom of a photograph */
.overlap{
  position:relative;z-index:2;margin-top:-3.5rem;margin-inline:1.25rem;
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-m);padding:var(--sp-m);box-shadow:var(--shadow-2);
}
@media (min-width:48rem){.overlap{margin-top:-4.5rem;margin-inline:2rem var(--sp-l)}}

/* 17 ─ THE HERO RIPPLE ──────────────────────────────────────────────────── */
/* A photograph of a real ripple, whose rings are then continued outward in
   drawn ellipses on the same centre and the same perspective. The brand idea
   — change one thing and the circle widens — stated once, literally.       */
.hero__media{position:relative;isolation:isolate}
.hero__media>.shot{position:relative;z-index:1}
/* the drawn rings live inside the photograph's frame, never outside it */
.hero__ring-clip{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:var(--r-m);pointer-events:none}
.ripple-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
.ripple-overlay ellipse{
  fill:none;stroke:var(--sage);stroke-width:.6;
  transform-box:view-box;transform-origin:144px 94px;
  opacity:0;
}
.js .ripple-overlay ellipse{
  animation:ripple-widen 11s var(--ease-in-out) infinite;
  animation-delay:calc(var(--n) * -1.6s);
}
@keyframes ripple-widen{
  0%   {transform:scale(1);   opacity:0}
  12%  {opacity:.62}
  100% {transform:scale(2.5); opacity:0}
}
.ripple-overlay__arc{
  fill:none;stroke:var(--sand);stroke-width:.9;stroke-linecap:round;
  stroke-dasharray:var(--len,400);
  stroke-dashoffset:calc(var(--len,400) * (1 - var(--p,0)));
  opacity:.9;
}
.hero__caption{
  margin-top:var(--sp-s);display:flex;flex-wrap:wrap;gap:.5rem 1rem;
  align-items:baseline;justify-content:space-between;
}
.hero__caption em{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:var(--step-0);color:var(--forest);letter-spacing:-.008em;
}
@media (prefers-reduced-motion:reduce){
  .js .ripple-overlay ellipse{animation:none;opacity:.35;transform:scale(1.5)}
}