/* ==========================================================================
   Betty | Nutrition education for real life
   Built to the Betty Brand Identity Deck (Rogue Coach Teams).
   Forest / Clay / Sage / Oat. Lora + Inter. 60 / 25 / 15.

   September 2026 humanization pass. What left this file, and why:

     .shapes / .shape     floating animated circles, six sections deep. Generic
                          decorative geometry doing the work photography and
                          typography should be doing.
     .rail                fixed desktop scroll-progress rail with section ticks.
     .arc-*               the drawn five-phase SVG arc.
     .clarity / .stage    49 dots scrubbing from chaos into a grid.
     .marq-*              the infinite marquee of brand slogans.
     .tript               three connected rounded panels with drawn connectors.
     .quote               three identical testimonial cards, two of which were
                          dashed placeholders reading "Client testimonial here".
     .todo                internal draft notes, rendered on the live site.
     .cards / .card       the default answer to "there are three of these".
     .steps / .persona    two more grids of equal boxes.
     .hero-strip .badge   a floating white UI card over the hero photograph.
     parallax + clip wipe on every image, scale settle on every image.

   A second pass on 7 Sep also removed .posts / .post and .products / .product,
   the last two three-across grids, along with every licensed stock photograph
   they held. Resources is now a feature plus a list of entries, and the Journal
   is a contents page. Every image on the site is one of Betty's own photographs.

   The rule that replaces all of it: containment has to be earned. The pricing
   tiers and the contact aside keep their boxes because that content really is
   modular. Everything else is type, rules and whitespace.

   22 Sep 2026, "the website is very busy with information" (Betty). Removed
   with their markup: .announce (the bar above the header), .strip (the three
   words under the hero), .ladder / .rung and .seq / .st (two more tellings of
   the confusion-to-clarity idea), .incl (the included list, which The Method
   page carries), .plate (the full-bleed coast photograph), .big / .sig (the
   two slogan bands). .rows is the one addition.

   Order of this file still matters. Component rules sit ABOVE the media-query
   stack at the bottom, so the responsive tiers always win.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root{
  /* deck palette, unchanged */
  --forest:#1F3D33;
  --forest-deep:#16302A;
  --forest-soft:#2A4E42;
  --clay:#C9694A;          /* graphics, fills, large display type          */
  --clay-ink:#A9502F;      /* small clay text on light  (5.4:1 on white)   */
  --clay-btn:#B4573A;      /* clay behind white text    (4.8:1)            */
  --clay-btn-hi:#9C4830;
  --clay-on-dark:#E59473;  /* small clay text on forest (5.0:1)            */
  --sage:#8FA99B;          /* shapes, rules, and text on forest only       */
  --sage-ink:#5A6E63;      /* sage-family text on light (5.5:1 on white)   */
  --sage-line:#D3DED7;
  --sage-soft:#E7EDE9;
  --oat:#F4F0E8;
  --oat-deep:#EAE3D6;
  --white:#FFFFFF;

  --ink:#14231E;           /* headings on light                            */
  --body:#4A5A54;          /* body on light (7.3:1 on white)               */
  --body-dark:#B9CBC0;     /* body on forest (6.9:1)                       */

  /* type */
  --display:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* motion. one curve, and far fewer things using it. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-fast:.28s;
  --t:.4s;

  /* metrics */
  --wrap:1240px;
  --wrap-wide:1360px;
  --wrap-narrow:760px;
  --gutter:clamp(20px,5vw,64px);
  --pad-s:clamp(60px,7.4vw,116px);   /* default section                     */
  --pad-xs:clamp(40px,4.6vw,68px);   /* .s.tight, deliberately compact      */
  --pad-l:clamp(84px,10.5vw,168px);  /* .s.airy, deliberately expansive     */

  /* Radius. Was 22px on every container and a full pill on every button,
     which is what gives a page the component-library look. */
  --r:8px;                 /* inputs, small blocks                          */
  --r-lg:10px;             /* the few containers that keep a box            */
  --r-img:3px;             /* photography sits essentially square           */
  --r-btn:6px;
  --hdr:76px;
}

/* ----------------------------------------------------------------- 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--clay-ink);text-decoration:none}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.2em;padding-left:1.15em}
li{margin-bottom:.45em}
figure{margin:0}
blockquote{margin:0}
hr{border:0;border-top:1px solid var(--sage-line);margin:0}
::selection{background:var(--clay);color:#fff}
:focus-visible{outline:2px solid var(--clay-ink);outline-offset:3px;border-radius:4px}

/* ----------------------------------------------------------- 3. typography */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.021em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,1.3rem + 4.3vw,4.35rem);line-height:1.045}
h2{font-size:clamp(1.8rem,1.1rem + 2.2vw,2.75rem);line-height:1.13}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);line-height:1.28;letter-spacing:-.014em}
h4{font-size:1.06rem;line-height:1.35;letter-spacing:-.01em}
.ln,.ln>span{display:block}

.lede{
  font-size:clamp(1.06rem,.99rem + .38vw,1.29rem);
  line-height:1.62;
  color:var(--body);
  max-width:60ch;
  text-wrap:pretty;
}
/* Three of these exist on the whole site: the hero, the free guide band, and
   nothing else. The clay point is now rare enough to mean something. */
.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--clay-ink);
  margin:0 0 1.15em;
  display:flex;
  align-items:center;
  gap:.7em;
  line-height:1.4;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--clay);
  flex:0 0 auto;
}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}

.big-p{font-size:1.24rem;margin-top:1.6em}
.narrow-p{max-width:64ch;margin-top:clamp(30px,3.4vw,48px)}
.mb-l{margin-bottom:clamp(34px,4vw,58px)}

/* --------------------------------------------------------------- 4. layout */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap.wide{max-width:var(--wrap-wide)}
.wrap.narrow{max-width:var(--wrap-narrow)}
/* Three paddings, applied by hand. Every section used to get the same one. */
.s{padding:var(--pad-s) 0;position:relative}
.s.tight{padding:var(--pad-xs) 0}
.s.airy{padding:var(--pad-l) 0}
.center{text-align:center}
.bg-oat{background:var(--oat)}
.bg-forest{background:var(--forest);color:var(--body-dark)}
.bg-forest h1,.bg-forest h2,.bg-forest h3,.bg-forest h4{color:#fff}
.bg-forest .lede{color:var(--body-dark)}
.bg-forest .eyebrow{color:var(--clay-on-dark)}
.bg-forest a{color:#fff}

/* The editorial frame that replaced the head + card-grid pattern. The heading
   holds one column, the reading matter holds the other, and neither is boxed. */
.ed{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4.6vw,84px);align-items:start}
.ed-head h2{margin-bottom:.42em}
.ed-head .lede{font-size:1.06rem;max-width:34ch}
.ed-head .actions{margin-top:26px}
.ed-body>.lede{margin-bottom:clamp(26px,3vw,44px)}
.ed-body>.lede:last-child{margin-bottom:0}

/* Hanging subheads with a hairline above. Copy lengths under these are
   deliberately uneven: one long, one very short, one in between. */
.ed-row{border-top:1px solid var(--sage-line);padding:clamp(20px,2.4vw,30px) 0}
.ed-row:last-child{border-bottom:1px solid var(--sage-line)}
.ed-row h3{margin-bottom:.32em}
.ed-row p{margin:0;font-size:1rem}

/* -------------------------------------------------------------- 5. motion */
/* One reveal, on block-level containers only. There is no stagger system and
   no per-element delay chain: those are what make a page scroll like a demo. */
.js [data-rv]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);
}
.js [data-rv].is-in{opacity:1;transform:none}

/* The single masked reveal left on the site: the h1 of each page, once. The
   per-line delay is hand-set here rather than generated, because this is the
   only place on the site that still staggers anything. */
.js [data-rv="lines"]{opacity:1;transform:none;transition:none}
.js [data-rv="lines"] .ln{overflow:hidden;padding:.09em 0 .17em;margin:-.09em 0 -.17em}
.js [data-rv="lines"] .ln>span{
  transform:translate3d(0,106%,0);
  transition:transform 1.05s var(--ease);
}
.js [data-rv="lines"].is-in .ln>span{transform:none}
.js [data-rv="lines"] .ln:nth-child(2)>span{transition-delay:70ms}
.js [data-rv="lines"] .ln:nth-child(3)>span{transition-delay:140ms}
.js [data-rv="lines"] .ln:nth-child(4)>span{transition-delay:210ms}

/* --------------------------------------------------------------- 6. images */
.imgwrap{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-img);
  aspect-ratio:var(--ar,4/5);
  background:var(--oat-deep);
}
.imgwrap img{width:100%;height:100%;object-fit:cover}
.imgwrap.sq{--ar:1/1}
.imgwrap.wide{--ar:4/3}
.imgwrap.tall{--ar:4/5}
.imgwrap.up img{object-position:50% 26%}
.imgwrap.dn img{object-position:50% 68%}

/* A photograph that says where it was taken. */
.fig figcaption{
  margin-top:12px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--sage-ink);
  max-width:42ch;
  font-style:italic;
  font-family:var(--display);
}
.bg-forest .fig figcaption{color:var(--sage)}

/* ------------------------------------------------- 7. the one Betty device */
/* A note in the margin, in Lora italic, with a drawn tick. It only ever quotes
   a line that is already in the approved copy. Three on the whole site. */
.note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:clamp(26px,3vw,40px) 0 0;
  padding-left:clamp(0px,2vw,34px);
  color:var(--clay-ink);
  max-width:34ch;
}
.note .tick{width:22px;height:32px;flex:0 0 auto;margin-top:-2px;opacity:.85}
.note span{
  font-family:var(--display);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.45;
  letter-spacing:-.012em;
}
.bg-forest .note{color:var(--clay-on-dark)}

/* -------------------------------------------------------------- 8. buttons */
/* No pill, and no scaling fill sweeping up from the bottom edge. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:52px;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-family:var(--sans);
  font-size:.795rem;
  font-weight:700;
  letter-spacing:.115em;
  text-transform:uppercase;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background var(--t) var(--ease-soft),color var(--t) var(--ease-soft),
             border-color var(--t) var(--ease-soft);
}
.btn:active{transform:translateY(1px)}
.btn-clay{background:var(--clay-btn);color:#fff}
.btn-clay:hover,.btn-clay:focus-visible{background:var(--clay-btn-hi)}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--sage)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--forest);color:#fff;border-color:var(--forest)}
.bg-forest .btn-ghost,.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.bg-forest .btn-ghost:hover,.cta .btn-ghost:hover,
.bg-forest .btn-ghost:focus-visible,.cta .btn-ghost:focus-visible{background:#fff;color:var(--forest);border-color:#fff}
.btn-sm{min-height:44px;padding:11px 20px;font-size:.79rem;letter-spacing:.1em}

.tlink{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:44px;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--forest);
  border-bottom:1px solid rgba(31,61,51,.28);
  transition:border-color var(--t) var(--ease-soft);
}
.bg-forest .tlink,.cta .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.tlink:hover,.tlink:focus-visible{border-bottom-color:currentColor}
.tlink .ar{width:19px;height:9px;flex:0 0 auto;transition:transform var(--t) var(--ease)}
.tlink:hover .ar{transform:translateX(5px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}

/* ------------------------------------------------------------------ 9. nav */
.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease),transform .45s var(--ease);
}
.site-header.stuck{border-bottom-color:var(--sage-line)}
.site-header.hide{transform:translateY(-101%)}
.header-inner{
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:0 var(--gutter);
  min-height:var(--hdr);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  transition:min-height var(--t) var(--ease);
}
.site-header.stuck .header-inner{min-height:64px}

.logo{display:inline-flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink)}
.logo-name{
  font-family:var(--display);
  font-size:1.66rem;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1;
  color:var(--forest);
  white-space:nowrap;
}
.logo-name .pt{
  display:inline-block;
  width:.185em;height:.185em;
  border-radius:50%;
  background:var(--clay);
  margin-left:.11em;
  vertical-align:baseline;
}
.logo-sub{
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.185em;
  text-transform:uppercase;
  color:var(--sage-ink);
  line-height:1.3;
  white-space:nowrap;
}
.footer-logo .logo-name{color:#fff}
.footer-logo .logo-sub{color:var(--sage)}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.nav a:not(.btn){
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--forest);
  white-space:nowrap;
  border-bottom:1.5px solid transparent;
  transition:border-color var(--t) var(--ease-soft),color var(--t) var(--ease-soft);
}
.nav a:not(.btn):hover,.nav a:not(.btn):focus-visible{border-bottom-color:var(--clay)}
.nav a.active{color:var(--clay-ink);border-bottom-color:var(--clay)}
.nav-toggle{
  display:none;
  width:46px;height:46px;
  border:0;background:transparent;padding:0;cursor:pointer;
  position:relative;
}
.nav-toggle span{
  position:absolute;left:11px;width:24px;height:1.5px;background:var(--forest);
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1){top:17px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:29px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-open{overflow:hidden}
.nav-scrim{display:none}

/* ---------------------------------------------------------------- 10. hero */
.hero{position:relative;background:var(--oat)}
.hero-grid{
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:clamp(40px,4.4vw,72px) var(--gutter) 0;
  display:grid;
  grid-template-columns:1fr minmax(300px,40%);
  gap:clamp(30px,4.5vw,72px);
  align-items:end;
}
.hero-copy{padding-bottom:clamp(48px,5.4vw,86px)}
.hero h1{font-size:clamp(1.95rem,.4rem + 4vw,3.2rem);margin-bottom:.42em}
.hero .lede{max-width:44ch}
.hero-art{align-self:end}
.hero-art .imgwrap{--ar:1/1.14;border-radius:var(--r-img) var(--r-img) 0 0;max-width:482px;margin-left:auto}
/* Was a floating white card with a drop shadow hovering over the photograph.
   Now it is a caption, ruled off the bottom of the image, the way a caption
   sits under a picture in print. */
.hero-art figcaption{
  max-width:482px;
  margin-left:auto;
  border-top:2px solid var(--clay);
  padding-top:10px;
  padding-bottom:clamp(20px,2.4vw,30px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
}
.hero-art figcaption b{
  font-family:var(--display);font-size:1.24rem;font-weight:600;
  color:var(--forest);letter-spacing:-.02em;
}
.hero-art figcaption span{
  font-size:.76rem;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  color:var(--sage-ink);
}

/* page hero, the smaller variant used on inner pages */
.phero{position:relative;background:var(--oat);padding:clamp(52px,6.5vw,104px) 0 clamp(56px,6.5vw,104px)}
.phero-grid{display:grid;grid-template-columns:1fr minmax(280px,38%);gap:clamp(30px,4.5vw,66px);align-items:center}
.phero h1{font-size:clamp(2rem,1.1rem + 3vw,3.4rem)}

/* The Method and the Journal open on type. Both used to open on a licensed
   stock photograph, and her library has no food or kitchen photography to put
   there instead, so the pages open on their own words. */
.phero.type{padding-bottom:clamp(44px,5vw,76px)}
.type-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,4vw,72px);
  align-items:end;
}
.type-hero h1{margin-bottom:0}
.type-hero .lede{max-width:46ch}

/* ----------------------------------------------------- 11. quote statement */
.statement .q{
  font-family:var(--display);
  font-size:clamp(1.72rem,1rem + 3.1vw,3.5rem);
  line-height:1.22;
  letter-spacing:-.024em;
  color:var(--forest);
  font-weight:500;
  max-width:19ch;
  margin:0;
}
.statement .q em{color:var(--clay);font-style:italic}
.statement-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:end}
.statement .after{max-width:44ch}

/* ------------------------------------------------------------ 12. splits */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center}
.split.reverse .split-media{order:2}
.split.lean{grid-template-columns:1.08fr .92fr}
.split-copy{max-width:54ch}

/* Two photographs at two sizes, the smaller one overlapping. Asymmetry is the
   point: a grid of two equal images is the thing being avoided. */
.stack-media{position:relative}
.stack-media .inset-fig{
  position:absolute;
  right:-4%;bottom:-9%;
  width:38%;max-width:210px;
  z-index:2;
}
.stack-media .inset-fig .imgwrap{border:5px solid var(--white)}
.stack-media .inset-fig figcaption{font-size:.79rem;margin-top:8px}

/* A photograph pushed out of alignment with its own column, on purpose. */
.fig.drop{margin-top:clamp(18px,3.4vw,56px)}

/* ------------------------------------------ 13. you are not new to trying */
/* The three rows of "You are not new to trying", beside the trail photograph.
   .ed-row does the rules; this only sets the gap under the lede. */
.rows{margin-top:clamp(26px,3.2vw,40px)}

/* ------------------------------------------------ 15. the method, 5 phases */
/* The only numbered sequence left on the site, because here the order is the
   content. No drawn arc, no scroll-scrubbed progress line. */
.phases{list-style:none;margin:0;padding:0 0 0 clamp(30px,3.6vw,50px);position:relative}
.phases::before{
  content:'';position:absolute;left:5px;top:.7em;bottom:.7em;width:1px;
  background:var(--sage-line);
}
.bg-forest .phases::before{background:rgba(255,255,255,.24)}
.phase{position:relative;padding:0 0 clamp(26px,3vw,42px);margin:0}
.phase:last-child{padding-bottom:0}
.phase::before{
  content:'';position:absolute;
  left:calc(-1 * clamp(30px,3.6vw,50px) + 2px);top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--clay);
}
.phase .p{
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-ink);margin:0 0 5px;
}
.phase h3{margin-bottom:.28em}
.phase p.d{margin:0;font-size:.965rem;max-width:56ch}
.bg-forest .phase h3{color:#fff}
.bg-forest .phase .p{color:var(--sage)}
.bg-forest .phase p.d{color:var(--body-dark)}

/* -------------------------------------------------------------- 16. results */
/* Two stories, two shapes. Neither is a card. */
.figure-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,52px);align-items:start}
.stat{margin:0;display:flex;flex-direction:column;line-height:1}
.stat b{
  font-family:var(--display);
  font-size:clamp(3.6rem,2rem + 6.4vw,7.2rem);
  font-weight:600;letter-spacing:-.045em;color:var(--clay);
  line-height:.86;
}
.stat span{
  margin-top:.8em;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-ink);
}
.figure-row p{font-size:1.02rem}
.who{
  margin-top:1.4em;font-size:.78rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--sage-ink);
}

/* The second story is a full-width band, not a box beside the first. */
.band{
  background:var(--forest);
  color:var(--body-dark);
  margin-top:clamp(48px,6vw,92px);
  padding:clamp(40px,5vw,76px) 0;
}
.band .pull{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.05rem + 2.1vw,2.7rem);
  line-height:1.2;letter-spacing:-.024em;color:#fff;font-weight:500;
  max-width:20ch;margin-bottom:.6em;
}
.band .wrap>p:not(.pull){max-width:58ch;font-size:1.02rem}
.band footer{
  margin-top:1.6em;font-size:.78rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--sage);
}

/* ----------------------------------------------- 17. beliefs and def lists */
/* Was five numbered rows in a three column grid. The numbers are gone; the copy
   lengths under each heading are now deliberately unequal. */
.beliefs{border-top:1px solid var(--sage-line)}
.belief{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(10px,2.4vw,40px);
  align-items:baseline;
  padding:clamp(20px,2.4vw,32px) 0;
  border-bottom:1px solid var(--sage-line);
}
.belief h3{margin:0;font-size:clamp(1.22rem,1.02rem + .85vw,1.7rem)}
.belief p{margin:0;font-size:.985rem}

/* Four short traits as four short sentences, because a second definition list
   directly under the first would put the kit straight back. */
.run{
  font-family:var(--display);
  font-size:clamp(1.16rem,1rem + .78vw,1.62rem);
  line-height:1.5;
  letter-spacing:-.014em;
  color:var(--ink);
  font-weight:400;
}
.run b{font-weight:600;color:var(--clay-ink)}
.run-after{
  margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--sage-line);
  max-width:44ch;
  font-size:.985rem;
}

.deflist{margin:0}
.deflist dt{
  font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .6vw,1.42rem);
  font-weight:600;letter-spacing:-.014em;color:var(--ink);
  border-top:1px solid var(--sage-line);
  padding-top:clamp(16px,1.8vw,24px);
}
.deflist dd{margin:.34em 0 clamp(18px,2vw,28px);font-size:.985rem;max-width:56ch}
.deflist dd:last-child{margin-bottom:0}
.wide-dl dd{max-width:64ch}

/* Three photographs at three widths and three crops. */
.uneven{
  display:grid;
  grid-template-columns:1.25fr .92fr 1.08fr;
  gap:clamp(10px,1.6vw,22px);
  align-items:start;
  margin-top:clamp(30px,3.6vw,52px);
}
.uneven .u2{margin-top:clamp(22px,3.4vw,54px)}
.uneven .u3{margin-top:clamp(8px,1.2vw,18px)}

/* --------------------------------------------------------------- 18. tiers */
/* Pricing genuinely needs containment, so this keeps its box. It loses the
   hover lift and the 22px radius. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);align-items:start;margin-top:clamp(30px,3.6vw,52px)}
.tier{
  border:1px solid var(--sage-line);
  border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,38px);
  background:var(--white);
  min-width:0;
  display:flex;flex-direction:column;
  transition:border-color var(--t) var(--ease-soft);
}
.tier:hover{border-color:var(--sage)}
.tier.featured{background:var(--forest);border-color:transparent;color:var(--body-dark)}
.tier.featured h3{color:#fff}
.tier.featured .price{color:var(--clay-on-dark)}
.tier.featured li{color:var(--body-dark)}
.tier.featured li::before{background:var(--clay-on-dark)}
.tier.featured:hover{border-color:transparent}
.flag{
  display:inline-block;align-self:flex-start;
  font-size:.76rem;font-weight:700;letter-spacing:.155em;text-transform:uppercase;
  color:var(--clay-ink);background:var(--oat);
  padding:6px 12px;border-radius:var(--r-btn);margin-bottom:20px;line-height:1.4;
}
.tier.featured .flag{background:var(--clay-btn);color:#fff}
.tier h3{margin-bottom:.42em}
.price{font-size:.83rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--clay-ink);margin:0 0 1.5em}
.tier ul{list-style:none;padding:0;margin:0 0 30px}
.tier li{position:relative;padding-left:22px;font-size:.955rem;margin-bottom:.72em}
.tier li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--clay)}
.tier .btn{margin-top:auto;width:100%}

/* ----------------------------------------------------------------- 19. faq */
.faq{border-top:1px solid var(--sage-line)}
.faq .q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:transparent;border:0;border-bottom:1px solid var(--sage-line);
  padding:22px 0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:clamp(1.06rem,.98rem + .4vw,1.28rem);font-weight:600;
  color:var(--ink);letter-spacing:-.014em;line-height:1.35;
  transition:color var(--t) var(--ease);
}
.faq .q:hover{color:var(--clay-ink)}
.faq .ic{position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:.2em}
.faq .ic::before,.faq .ic::after{
  content:'';position:absolute;left:0;top:8px;width:18px;height:1.5px;background:var(--clay);
  transition:transform .4s var(--ease);
}
.faq .ic::after{transform:rotate(90deg)}
.faq .q[aria-expanded="true"] .ic::after{transform:rotate(0)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq .q[aria-expanded="true"]+.a{grid-template-rows:1fr}
.faq .a>div{overflow:hidden;min-height:0}
.faq .a p{padding:6px 0 26px;margin:0;max-width:66ch;font-size:.985rem}
.faq .a{border-bottom:1px solid var(--sage-line);margin-top:-1px}

/* ------------------------------------------------------------- 20. journal */

/* ---------------------------------------------- 21. the library and entries */
/* Resources and the Journal were both a three-across grid of image + title +
   description + button. One of those pages has a single real product and the
   other had six licensed stock thumbnails of women who are not Betty. Both are
   now a feature plus a list of entries, which is what a small library is. */
.k-head{
  font-size:.78rem;font-weight:700;letter-spacing:.155em;text-transform:uppercase;
  color:var(--sage-ink);
  margin:0 0 clamp(14px,1.8vw,24px);
}
.library{border-top:1px solid var(--sage-line)}
.entry{
  display:grid;
  grid-template-columns:minmax(120px,.26fr) 1fr;
  gap:clamp(12px,2.4vw,40px);
  padding:clamp(22px,2.8vw,36px) 0;
  border-bottom:1px solid var(--sage-line);
  align-items:start;
}
.entry .e-k{display:flex;flex-direction:column;gap:.5em}
.entry h3{margin:0 0 .3em;font-size:clamp(1.24rem,1.05rem + .8vw,1.66rem)}
.entry p{margin:0;font-size:.985rem;max-width:56ch}
.entry .cat{
  margin:0;font-size:.76rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--clay-ink);
}
.more{
  font-size:.76rem;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  color:var(--sage-ink);
}

/* the Journal's lead story, carrying the weight the six thumbnails used to */
.lead-story{
  padding-bottom:clamp(38px,4.6vw,68px);
  margin-bottom:clamp(38px,4.6vw,68px);
  border-bottom:2px solid var(--clay);
  /* Not a ch measure. `ch` here would resolve against the 17px body font, not
     against the 57px headline inside, and broke the lead to one word a line. */
  max-width:820px;
}
.lead-story .cat{
  margin:0 0 1em;font-size:.78rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--clay-ink);
}
.lead-story h2{
  font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);
  line-height:1.08;margin-bottom:.3em;
}
.lead-story .lede{max-width:52ch}
.lead-story .more{display:block;margin-top:1.6em}

/* The ebook's cover, rendered from the PDF itself, with the terracotta block
   the cover uses set behind it. No perspective transform and no page curl: it
   is the cover, not a mockup of one. The block is the book's own device, so it
   appears only with the book. */
.book-slot{display:flex;justify-content:flex-end}
.book{position:relative;width:100%;max-width:330px}
.book.lg{max-width:440px}
.book::before{
  content:"";position:absolute;
  top:9%;right:8%;bottom:-6%;left:-7%;
  background:var(--clay);
}
.book img{
  position:relative;width:100%;height:auto;
  border:1px solid var(--sage-line);
  background:var(--white);
}
.book-side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(30px,3.4vw,44px)}
.book-side .note{align-self:flex-start;max-width:36ch}

/* About: the half marathon sits beside the line that says the program is not this */
.pair{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,54px);
  align-items:center;
  margin-top:clamp(30px,3.6vw,52px);
}
.pair .narrow-p{margin-top:0}

/* ------------------------------------------------------- 22. the free guide */
.guide{background:var(--oat)}
/* The ebook form: first name, email, one button. On the forest band the
   inputs stay white and the note lightens. */
.optin{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;max-width:520px}
.optin input{flex:1 1 190px;min-width:0}
.optin .btn{flex:0 0 auto}
.form-note{font-size:.82rem;color:var(--sage-ink);margin-top:14px;letter-spacing:.02em}
.bg-forest .form-note{color:var(--sage)}
.bg-forest .optin{margin-inline:auto;justify-content:center}
.bg-forest .form-note{text-align:center}
#get h2{text-align:center;max-width:none}
#get .lede{text-align:center;max-width:none}
/* FormSubmit's honeypot. Off canvas rather than display:none, so a bot that
   skips hidden fields still sees it and fills it in. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* What replaces a form once it has been sent. role=status, so a screen reader
   hears it. The link inside is the PDF, in case the automatic download did
   not start. */
.sent{
  margin-top:30px;max-width:520px;
  padding:20px 22px;
  border-left:3px solid var(--clay);
  background:var(--white);
  color:var(--body);font-size:.985rem;line-height:1.65;
}
.sent b{color:var(--ink)}
.sent a{color:var(--clay-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(169,80,47,.4)}
.sent a:hover,.sent a:focus-visible{text-decoration-color:currentColor}
.bg-forest .sent{margin-inline:auto;background:var(--forest-deep);color:var(--body-dark)}
.bg-forest .sent b{color:#fff}
.bg-forest .sent a{color:var(--clay-on-dark);text-decoration-color:rgba(229,148,115,.45)}
.optin.busy{opacity:.6;pointer-events:none}

/* The table of contents, as the book prints it: title, dotted leader, page
   number, then one line on what the chapter does. */
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--sage-line)}
.toc li{margin:0;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--sage-line)}
.toc .row{display:flex;align-items:baseline;gap:14px}
.toc .t{
  font-family:var(--display);
  font-size:clamp(1.22rem,1rem + 1vw,1.7rem);
  line-height:1.2;letter-spacing:-.018em;
  color:var(--forest);font-weight:600;
}
.toc .row i{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--sage);transform:translateY(-.28em)}
.toc .pg{
  flex:0 0 auto;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-ink);white-space:nowrap;
}
.toc .d{margin:.4em 0 0;font-size:.985rem;max-width:56ch}

input,select,textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--sage-line);
  border-radius:var(--r);
  padding:14px 16px;
  min-height:52px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
textarea{min-height:132px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--sage-ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--clay);box-shadow:0 0 0 3px rgba(201,105,74,.15)}
.field{margin-bottom:18px}
.field label{
  display:block;margin-bottom:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.115em;text-transform:uppercase;color:var(--forest);
}

/* -------------------------------------------------------------- 23. contact */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4.5vw,68px);align-items:start}
.info-block{background:var(--forest);color:var(--body-dark);border-radius:var(--r-lg);padding:clamp(28px,3vw,42px);min-width:0}
.info-block h3{color:#fff;margin-bottom:1.1em}
.info-block dl{margin:0}
.info-block dt{
  font-size:.76rem;font-weight:700;letter-spacing:.155em;text-transform:uppercase;color:var(--sage);
  margin-top:22px;
}
.info-block dt:first-child{margin-top:0}
.info-block dd{margin:5px 0 0;color:#fff;font-size:.985rem;word-break:break-word}
.info-block dd a{display:inline-block;padding:3px 0}
.info-block a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.info-block a:hover{text-decoration-color:#fff}

/* --------------------------------------------------------------- 24. reels */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.reel{min-width:0}
.reel video{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--r-img);background:var(--forest-deep);display:block;
}
.reel figcaption{
  margin-top:14px;font-size:.78rem;font-weight:700;letter-spacing:.145em;text-transform:uppercase;color:var(--sage-ink);
}

/* ------------------------------------------------------------ 25. CTA band */
.cta{background:var(--forest);color:var(--body-dark);padding:var(--pad-s) 0}
.cta h2{color:#fff;max-width:15ch;margin:0}
.cta .lede{color:var(--body-dark);max-width:52ch}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,64px);align-items:center}

/* -------------------------------------------------------------- 26. footer */
.site-footer{background:var(--forest-deep);color:var(--body-dark);padding:clamp(56px,6vw,88px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr .8fr .8fr 1.1fr;gap:clamp(26px,3.4vw,52px)}
.site-footer h4{
  color:#fff;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.5em;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.35em}
.site-footer li a{display:inline-block;padding:5px 0}
.site-footer a{color:var(--body-dark);font-size:.945rem;transition:color var(--t) var(--ease)}
.site-footer a:hover{color:#fff}
.site-footer p{font-size:.945rem}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.socials a:hover{background:var(--clay-btn);border-color:var(--clay-btn)}
.socials svg{width:17px;height:17px;fill:#fff}
.footer-bottom{
  margin-top:clamp(40px,4.4vw,64px);
  border-top:1px solid rgba(255,255,255,.14);
  padding:24px 0;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:.82rem;color:var(--sage);
}
.footer-bottom a{font-size:.82rem;color:var(--sage);display:inline-block;padding:4px 0}
.disclaimer{background:var(--forest-deep);color:#8CA396;font-size:.78rem;line-height:1.7;padding:0 0 40px}
.disclaimer .wrap{max-width:960px}

/* ------------------------------------------------------------- 27. utility */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;
  font-size:.8rem;font-weight:600;
}
.skip:focus{left:0}
.js body{transition:opacity .28s var(--ease-soft)}
.js body.leaving{opacity:0}
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:30px;margin-bottom:1.05em;font-size:1.02rem}
.checks li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--clay)}


.bg-forest .k-head{color:var(--sage)}

/* Two tiers, not three. A pair stretched across the full 1240px wrap reads as a
   layout with a hole in it, so the pair gets its own measure. */
.tiers.two{grid-template-columns:repeat(2,1fr);max-width:900px}

/* --------------------------------------------------------- 27c. the article */
/* One column of type. The measure is set on the children, never on the wrapper:
   an em or ch on .prose resolves against .prose's own font size, which is not
   the font size of the paragraph inside it. */
.art-head{padding-top:clamp(30px,3.6vw,56px)}
.art-head .cat{
  margin:0 0 1.1em;font-size:.78rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--clay-ink);
}
.art-head h1{font-size:clamp(2rem,1.2rem + 3.3vw,3.4rem);line-height:1.09;max-width:18ch}
.art-head .lede{margin-top:.8em;max-width:54ch}
.art-meta{
  margin-top:clamp(24px,2.6vw,36px);padding-top:16px;
  border-top:1px solid var(--sage-line);
  font-size:.83rem;letter-spacing:.05em;color:var(--sage-ink);
}
.art-meta b{font-weight:600;color:var(--body)}
.prose>*{max-width:34em}
.prose h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.018em;color:var(--ink);
  font-size:clamp(1.45rem,1.14rem + 1.25vw,2.05rem);
  line-height:1.18;margin:clamp(38px,4vw,62px) 0 .5em;
}
.prose h3{
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(1.14rem,1.03rem + .5vw,1.34rem);
  margin:clamp(26px,2.8vw,38px) 0 .4em;
}
.prose p{margin:0 0 1.15em;font-size:1.045rem}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin-bottom:.7em;font-size:1.045rem;max-width:34em}
.prose ul>li::before{
  content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--clay);
}
.prose ol{counter-reset:pl}
.prose ol>li{counter-increment:pl}
.prose ol>li::before{
  content:counter(pl);position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:600;color:var(--clay-ink);
}
.prose .pull{
  font-family:var(--display);font-style:italic;font-weight:500;color:var(--ink);
  font-size:clamp(1.3rem,1.08rem + 1vw,1.8rem);line-height:1.3;
  border-left:3px solid var(--clay);padding-left:clamp(18px,2vw,28px);
  margin:clamp(32px,3.6vw,52px) 0;max-width:24em;
}
.art-end{
  margin-top:clamp(44px,5vw,74px);padding-top:clamp(22px,2.4vw,32px);
  border-top:2px solid var(--clay);max-width:34em;
}
.art-end p{font-size:1.02rem;margin:0 0 1.1em}
.art-more{margin-top:clamp(40px,4.4vw,66px)}
.entry h3 a,.lead-story h2 a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.entry h3 a:hover,.entry h3 a:focus-visible,
.lead-story h2 a:hover,.lead-story h2 a:focus-visible{color:var(--clay-ink);border-bottom-color:var(--sage-line)}

/* Inline links inside running copy. Colour on its own is neither an
   affordance nor an accessible indicator, and clay on oat is quiet. */
.big-p a,.prose p a,.prose li a,.art-end p a{
  border-bottom:1px solid rgba(169,80,47,.38);
  transition:border-color var(--t-fast) var(--ease);
}
.big-p a:hover,.prose p a:hover,.prose li a:hover,.art-end p a:hover,
.big-p a:focus-visible,.prose p a:focus-visible,.prose li a:focus-visible,
.art-end p a:focus-visible{border-bottom-color:var(--clay-ink)}

/* ==========================================================================
   28. responsive tiers. Everything above can be overridden from here, and
   nothing component-level may be added below this line.
   ========================================================================== */
@media (max-width:1180px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:38px}
  .footer-grid>div:last-child{grid-column:1/-1;max-width:520px}
}
@media (max-width:1080px){
  :root{--hdr:70px}
  .ed{grid-template-columns:1fr;gap:clamp(24px,3.4vw,40px)}
  .ed-head .lede{max-width:60ch}
  .belief{grid-template-columns:1fr;gap:.3em}
}
@media (max-width:980px){
  /* backdrop-filter makes an element the containing block for its fixed
     descendants, which pinned the slide-out panel to the 65px header box.
     The blur is a nicety; a solid bar reads better on a phone anyway. */
  .site-header{background:var(--white);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.nav-open .site-header{transform:none}
  .nav-toggle{display:block;position:relative;z-index:1}
  .logo{position:relative;z-index:1}
  /* Scrim and panel both sit at negative z inside the header's stacking
     context, so they cover the page while the header's
     own logo and burger stay painted on top of them. */
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:-2;
    background:rgba(20,35,30,.45);
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  body.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s linear 0s}
  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(420px,100%);
    background:var(--oat);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:calc(var(--hdr) + 26px) clamp(24px,6vw,40px) 40px;
    transform:translateX(101%);
    transition:transform .5s var(--ease);
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:-1;
  }
  .nav.open{transform:translateX(0)}
  .nav a:not(.btn){
    min-height:60px;
    font-size:1.42rem;
    font-family:var(--display);
    font-weight:600;
    text-transform:none;
    letter-spacing:-.02em;
    border-bottom:1px solid var(--sage-line);
  }
  .nav a:not(.btn):hover,.nav a.active{border-bottom-color:var(--sage-line)}
  .nav .btn{margin-top:26px}

  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:clamp(36px,5vw,60px)}
  .hero-copy{padding-bottom:clamp(34px,4.5vw,52px);max-width:none}
  .hero-art .imgwrap{--ar:1/1;max-width:none;margin-left:0}
  .hero-art .imgwrap img{object-position:50% 16%}
  .hero-art figcaption{max-width:none}
  .phero-grid{grid-template-columns:1fr;gap:34px}
  .phero-grid .imgwrap{--ar:16/10;max-width:520px}

  /* .split.lean is two classes, so it has to be named here or its desktop
     1.08fr/.92fr outranks the single-column rule and the band stays two
     columns on a phone. It did, until 15 Sep 2026. */
  .split,.split.lean,.statement-grid,.contact-grid,.cta-grid,.figure-row,
  .type-hero,.pair{grid-template-columns:1fr;gap:34px}
  .type-hero{gap:22px}
  .book-slot{justify-content:flex-start}
  .book{max-width:300px}
  .book.lg{max-width:340px}
  .book-side{align-items:flex-start}
  .lead-story{max-width:none}
  .split.reverse .split-media{order:0}
  .split-copy{max-width:none}
  .statement .q{max-width:none}
  .statement .after{max-width:none}
  .cta h2{max-width:none}
  .figure-row{gap:20px}
  /* the overlapping inset photograph goes back into the flow on a narrow
     screen, where there is no room beside its parent to overlap into */
  .stack-media .inset-fig{position:static;width:56%;max-width:260px;margin-top:16px}
  .stack-media .inset-fig .imgwrap{border-width:0}
  .fig.drop{margin-top:0}
  .uneven .u2,.uneven .u3{margin-top:0}
}
@media (max-width:960px){
  .eyebrow{font-size:.84rem;letter-spacing:.13em}
  .who,.reel figcaption,.more,.site-footer h4,.stat span,
  .band footer,.k-head{font-size:.83rem;letter-spacing:.12em}
  .phase .p,.cat,.flag,.info-block dt,.hero-art figcaption span,
  .lead-story .cat,.toc .pg{font-size:.81rem;letter-spacing:.12em}
  .disclaimer{font-size:.8rem}
  .form-note{font-size:.84rem}
  .field label{font-size:.8rem}
  .footer-bottom,.footer-bottom a{font-size:.83rem}
  .btn-sm{font-size:.76rem}
  .logo-sub{font-size:.7rem;letter-spacing:.14em}
  .fig figcaption{font-size:.9rem}
}
@media (max-width:860px){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tiers .featured{grid-column:1/-1}
  .tiers.two{max-width:none}
  .tiers.two .featured{grid-column:auto}
  .reels{grid-template-columns:repeat(3,1fr);gap:10px}
  .reel figcaption{font-size:.8rem;letter-spacing:.1em}
}
@media (max-width:700px){
  body{font-size:16.5px}
  :root{--hdr:64px}
  .tiers{grid-template-columns:1fr}
  .tiers.two{grid-template-columns:1fr}
  .art-head h1{max-width:none}
  .tiers .featured{grid-column:auto}
  .entry{grid-template-columns:1fr;gap:.7em}
  .entry .e-k{flex-direction:row;align-items:baseline;gap:1.2em}
  .reels{grid-template-columns:1fr;gap:24px;max-width:420px;margin-inline:auto}
  .reel video{aspect-ratio:9/14}
  .uneven{grid-template-columns:1fr 1fr;gap:10px}
  .uneven .u3{grid-column:1/-1;max-width:60%}
  .logo-name{font-size:1.44rem}
  .logo-sub{font-size:.7rem;letter-spacing:.13em;white-space:normal}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:8px}
  /* the 190px flex-basis that shares a row on desktop would become the
     input's HEIGHT once the container stacks, so it goes back to auto here */
  .optin{flex-direction:column}
  .optin input{flex:0 0 auto}
  .optin .btn{width:100%}
  .note{padding-left:0}
}
@media (max-width:480px){
  :root{--gutter:18px}
  .btn{width:100%;padding:15px 20px}
  .btn.auto,.nav .btn{width:auto}
  .actions{gap:12px}
  .actions .tlink{justify-content:center;width:100%}
  .tier,.info-block{padding:24px 22px}
  .uneven{grid-template-columns:1fr}
  .uneven .u3{grid-column:auto;max-width:none}
  .footer-grid{grid-template-columns:1fr}
  .stat b{font-size:4.4rem}
}
@media (max-width:640px){
  /* keep the authored line breaks, drop the mask. overflow:visible lets a
     long line wrap inside its own block instead of being clipped away. */
  .js [data-rv="lines"] .ln{overflow:visible;padding:0;margin:0}
  .js [data-rv="lines"]{
    opacity:0;transform:translate3d(0,18px,0);
    transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft);
  }
  .js [data-rv="lines"].is-in{opacity:1;transform:none}
}
@media (max-height:520px) and (orientation:landscape){
  .nav{padding-top:calc(var(--hdr) + 14px)}
  .nav a:not(.btn){min-height:48px;font-size:1.16rem}
}

/* Motion off. Everything lands in its finished state. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-rv]{opacity:1;transform:none}
  .js [data-rv="lines"] .ln{overflow:visible}
}