/* ==========================================================
   DR. CHARLEY GRANNIS — single page, v3
   Built to the Sept 25 flow doc.
   Extenda 40 Hecta / IBM Plex Mono / Biro Script Plus
   ========================================================== */

:root{
  --butter:#FFEDBD;
  --butter-2:#F3E2B5;
  --red:#E1473B;
  --red-dark:#C0392E;
  --olive:#3E5A1E;
  --sage:#C9D5CF;
  --sage-2:#DCE4E0;
  --blue:#D0D8E0;   /* pale blue sampled from Kelly's deck */
  --ink:#151627;
  --ink-60:rgba(21,22,39,.62);
  --ink-25:rgba(21,22,39,.25);
  --ink-12:rgba(21,22,39,.12);

  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --script:'Nothing You Could Do',cursive;

  --wrap:1180px;
  --gut:28px;

  /* Anton's caps fill most of the em box, so stacked lines need roughly .9.
     Below about .85 line two climbs into line one and descenders collide.
     v2 shipped a hand-tuned negative margin here that looked correct against
     a shorter fallback font and collided once Anton actually loaded, so:
     no negative margins between display lines, ever. This value alone sets
     the stack, and verify.py measures the painted gap rather than the boxes. */
  --lh-display:.96;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--butter);scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background-color:var(--butter);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

:focus-visible{outline:3px solid var(--olive);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--butter);padding:14px 22px;font-weight:700;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.skip:focus{left:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:var(--lh-display);
  letter-spacing:.005em;
  text-wrap:balance;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
section{padding:84px 0;position:relative}

.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:18px}
.sec-h{font-size:clamp(34px,5.4vw,62px);margin-bottom:22px}
.sec-h .line2{display:block}
.lede{font-size:clamp(15px,1.5vw,17.5px);max-width:62ch;color:var(--ink-60);margin-bottom:32px}
.closing{margin-top:26px;font-weight:500}
/* Held to one line, measured against its column rather than guessed. It sits
   at the normal body size: shrinking it was only needed while the line read
   "Charley writes", and in first person it fits without that. Wraps again on
   narrow screens where there is no width to hold it. */
.closing-one span{display:inline-block}
@media (min-width:820px){
  .closing-one span{white-space:nowrap}
}

/* handwritten accents */
.scrawl{
  font-family:var(--script);
  color:var(--olive);
  font-size:clamp(21px,2.7vw,32px);
  line-height:1.2;
  text-transform:none;
  letter-spacing:0;
}

/* a "sticker": the handwritten inline link */
.sticker{
  display:inline-block;
  font-family:var(--script);
  font-size:clamp(18px,2vw,23px);
  color:var(--olive);
  text-decoration:none;
  text-transform:none;
  line-height:1.2;
  transform:rotate(-2.2deg);
  transform-origin:left center;
  transition:transform .18s ease,color .18s ease;
}
.sticker:hover{transform:rotate(-2.2deg) translateX(4px);color:var(--red)}

/* ---------------------------------------------- buttons */
.btn{
  display:inline-block;
  background:var(--red);color:var(--butter);
  font-family:var(--body);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:15px 28px;border:1.5px solid var(--red);cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--butter);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:11px}
.btn-lg{padding:19px 38px;font-size:14px}
.btn:disabled{opacity:.55;cursor:default;transform:none}

/* ---------------------------------------------- nav */
/* Scoped to the top-level bar. An unscoped `nav` selector also captured the
   in-page jump list on the services page and pinned it to the viewport. */
body>nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(255,237,189,.92);
  backdrop-filter:blur(9px);
  border-bottom:1.5px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
body>nav.scrolled{border-bottom-color:var(--ink);box-shadow:0 2px 20px rgba(21,22,39,.07)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:15px}
.wordmark{
  font-family:var(--display);font-size:18px;letter-spacing:.05em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--ink);text-decoration:none;position:relative;white-space:nowrap;
}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;
  background:var(--red);transition:right .22s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active:not(.btn)::after{right:0}
.nav-links a.active:not(.btn){color:var(--red)}
.has-sub{position:relative;display:flex;align-items:center;gap:4px}
.sub-toggle{
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:10px;line-height:1;padding:4px;
  transition:transform .2s ease,color .2s ease;
}
.has-sub:hover .sub-toggle,.has-sub:focus-within .sub-toggle{color:var(--red);transform:rotate(180deg)}
.sub{
  position:absolute;top:calc(100% + 14px);left:-18px;
  background:var(--butter);border:1.5px solid var(--ink);
  padding:8px 0;min-width:230px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:5px 5px 0 rgba(21,22,39,.14);
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.has-sub::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub.open{opacity:1;visibility:visible;transform:none}
.sub a{padding:9px 18px;width:100%}
.sub a:not(.btn)::after{display:none}
.sub a:hover{background:var(--butter-2);color:var(--red)}

/* the Let's Talk button is handwritten, not the usual mono caps.
   Selector has to out-rank `.nav-links a`, which sets uppercase mono on every
   link in the bar, so it is qualified rather than a bare class. */
.nav-links a.btn-scrawl{
  font-family:var(--script);text-transform:none;letter-spacing:.01em;
  font-size:19px;font-weight:400;padding:7px 20px 9px;
}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------- 1. hero */
.hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding:108px 0 56px;
  position:relative;
  overflow:hidden;          /* the photo bleeds past the right edge */
}

/* The photo is pinned to the right edge of the VIEWPORT, not the content
   column, and dissolves leftward into the butter ground with a mask instead
   of sitting in a bordered box. The text sits above it on z-index, so the
   overlap where the mask is still faint reads as type printed over a
   photograph rather than a collision. */
.hero-photo{
  /* Height is pinned to the hero and the WIDTH is derived from the photo's
     own aspect, not the other way round. That guarantees the cover crop is
     never vertical, which is what was lopping her head off on a short, wide
     window: a fixed width plus a bottom anchor meant a shallow viewport ate
     the top of the frame. Any crop now comes off the sides, which is sofa. */
  position:absolute;right:0;bottom:0;
  height:100%;
  aspect-ratio:1400/1867;
  max-width:min(64vw,1060px);
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.06) 12%,rgba(0,0,0,.45) 24%,rgba(0,0,0,.86) 35%,#000 44%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.06) 12%,rgba(0,0,0,.45) 24%,rgba(0,0,0,.86) 35%,#000 44%);
}
/* The line in the bottom-right corner of the hero.
   No box, cream type straight on the photograph. The catch is that Nothing
   You Could Do is a thin, light hand, and the first attempt at this was
   butter with a soft glow, which dissolved wherever it crossed her skin or
   the pale blouse. So: pure white rather than butter, a size up so the
   strokes carry, and a tight dark shadow doubled with a wider soft one. The
   tight shadow draws the edge, the soft one darkens whatever is behind. */
.hero-quip{
  position:absolute;
  right:clamp(14px,2.4vw,42px);
  bottom:clamp(18px,2.8vw,38px);
  z-index:2;
  margin:0;
  color:#fff;
  text-shadow:
    0 1px 1px rgba(10,10,18,.95),
    0 0 3px rgba(10,10,18,.9),
    0 2px 14px rgba(10,10,18,.75);
  transform:rotate(-3deg);
  transform-origin:100% 100%;
  white-space:nowrap;
  font-size:clamp(14px,1.45vw,21px);
  line-height:1.3;
  pointer-events:none;
}

/* Below 980px the hero stacks and the photo no longer fills the corner, so
   the sticker comes out of the corner and sits under the photo on its own
   row, still right-aligned. The patch keeps it readable on the butter. */
@media (max-width:980px){
  .hero{flex-wrap:wrap}
  .hero>.wrap{flex:1 1 100%}
  /* Below the photo it sits on the butter ground, where white would be
     invisible, so it flips to ink with no shadow. */
  .hero-quip{
    position:static;
    order:3;
    align-self:flex-end;
    margin:18px var(--gut) 14px auto;
    transform:rotate(-2deg);
    transform-origin:center;
    color:var(--ink);
    text-shadow:none;
    font-size:clamp(14px,3vw,19px);
  }
}

/* Bottom-anchored on purpose. The source is cropped to end just above the
   table in the original frame, so aligning the image's bottom edge with the
   container's puts her legs flush against the credibility strip and the table
   never appears. Any cover-crop is taken off the top, which is ceiling. */
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}

.hero-grid{position:relative;z-index:1;width:100%}
.hero-type{max-width:min(780px,64%)}

.hi{
  /* Sized so 'I'm Dr. Charley.', the longer line, fits the column on one
     line in Anton. Anton is very narrow (~.45em average cap advance); a
     wider face will wrap instead, which is why the preview here shows more
     lines than the live site will. */
  font-size:clamp(44px,7.6vw,96px);
  /* Looser than the other headings on purpose: line one ends in a comma,
     whose descender hangs below the baseline straight into line two's caps.
     verify.py measures painted pixels, so re-run it if you change this. */
  line-height:1.04;
  margin-bottom:24px;
}
.hi .l1,.hi .l2{display:block}

.hero-blurb{
  font-size:clamp(15px,1.55vw,18px);
  /* 64ch, measured rather than guessed. The wind-up "Because now more than
     ever," is a nowrap run of 27 characters and has to land on the SAME line
     as the end of the sentence, not orphaned above the payoff. At 56-62ch it
     orphans; at 64ch it shares the line, and it does so identically at 1280,
     1440 and 1920 because the column caps at 719px before the measure does.
     Re-probe this if the copy changes, don't eyeball it. */
  max-width:64ch;margin-bottom:26px;color:var(--ink);
}
/* Charley's emphasis. Plain italic rather than a colour shift, so it reads as
   her voice leaning on a word rather than as a link. */
.hero-blurb em{font-style:italic}
/* The wind-up runs on after "lasts." and must not break across lines, so it
   is a nowrap inline. The paragraph measure below is sized to hold that whole
   final line; see the note on max-width. */
.hero-blurb .because{white-space:nowrap}
/* the payoff line gets its own line, always */
.hero-blurb .wins{
  display:block;margin-top:.5em;
  font-weight:700;text-transform:uppercase;letter-spacing:.015em;
  color:var(--red);white-space:nowrap;
  font-size:clamp(15px,1.75vw,21px);
}

/* the hero sticker sits on a faint paper patch with a hard little drop
   shadow, so it reads as something stuck on rather than as text that happens
   to be handwritten. */
.sticker-hero{
  font-size:clamp(20px,2.3vw,28px);
  /* Deep olive patch. The script flips to butter on it: butter on olive is
     6.7:1, olive-on-olive would vanish, and the brand rule is that the
     handwriting is never red, so the usual red hover is overridden below. */
  background:var(--olive);
  color:var(--butter);
  padding:8px 18px 10px;
  box-shadow:3px 4px 0 rgba(21,22,39,.22);
  transform:rotate(-2.4deg);
}
/* Hover turns the script navy. Navy on the deep olive is only 2.3:1, which is
   unreadable for handwriting, so the patch lightens to sage at the same time
   and the pair lands at 11.8:1. The sticker still reads as a sticker because
   sage is a brand ground, not the page background. */
.sticker-hero:hover,.sticker-hero:focus-visible{
  transform:rotate(-2.4deg) translateX(4px);
  background:var(--sage);
  color:var(--ink);
}

/* ---------------------------------------------- credibility strip */
/* One line, always, sitting directly under the hero photo.

   The full string is ~135 characters of monospace with wide tracking. Below
   roughly 1150px a single static line would have to drop under 9px to fit,
   which is unreadable, so the strip becomes a marquee at that point: still
   one line, it just travels. The track is one plain text run rather than
   flex children, so the duplicate is exactly the same width and a -50%
   translate lands precisely on the seam. The clone is aria-hidden, so the
   credentials are announced once. */
.cred{
  background:var(--red);color:var(--butter);
  border-block:1.5px solid var(--ink);
  overflow:hidden;
}
.cred-inner{
  display:flex;justify-content:center;
  padding-block:13px;
  white-space:nowrap;
  font-size:clamp(9.5px,1.12vw,12.5px);
  letter-spacing:.17em;text-transform:uppercase;font-weight:700;
}
.cred-track{padding-inline:14px}
.cred-clone{display:none}

@media (max-width:1150px){
  .cred-inner{
    justify-content:flex-start;
    width:max-content;
    font-size:11px;
    animation:cred-run 30s linear infinite;
  }
  .cred-clone{display:inline}
  /* A separator at the seam, so the loop reads
     "... international keynotes \00B7 doctorate in ..." rather than running the
     two copies together. Both tracks get it, so they stay equal width and the
     -50% translate still lands exactly on the join. Spacing is nbsp either
     side to match the dots inside the sentence; the static desktop strip has
     no seam, so it never gets a dangling dot. */
  .cred-track{padding-inline:0}
  .cred-track::after{content:'\00A0\00B7\00A0'}
  .cred:hover .cred-inner,.cred:focus-within .cred-inner{animation-play-state:paused}
}
@media (max-width:1150px) and (prefers-reduced-motion:reduce){
  /* no travel: let the reader swipe it instead */
  .cred{overflow-x:auto}
  .cred-inner{animation:none;width:auto}
  .cred-clone{display:none}
}

/* One copy is exactly half the duplicated track, so -50% is the seam. */
@keyframes cred-run{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------------------------------------------- bands */
.band-sage{background:var(--sage-2);border-block:1.5px solid var(--ink)}
.band-blue{background:var(--blue);border-block:1.5px solid var(--ink)}

/* The red-orange band. Body copy is ink rather than butter: on this red, ink
   reaches 4.44:1 and butter only 3.49:1, so ink is the legible one. The
   handwriting stays butter, which clears AA at its size and keeps some warmth
   in the band. The usual red eyebrow and red links would vanish here, so both
   are overridden. */
.band-red{background:var(--red);border-block:1.5px solid var(--ink);color:var(--ink)}
.band-red .eyebrow{color:var(--ink)}
.band-red .lede{color:rgba(21,22,39,.78)}
.band-red .scrawl{color:var(--butter)}
.band-red a{color:var(--ink);text-decoration-thickness:1.5px}
.band-red a:hover{color:var(--butter)}
.band-red .about-photo{background:var(--sage)}

/* Two dark grounds, navy and deep olive. The type treatment is identical on
   both, so it lives on .band-dark and each band only sets its background. */
.band-dark{color:var(--butter);border-block:1.5px solid var(--ink)}
.band-ink{background:var(--ink)}
.band-olive{background:var(--olive)}
.band-dark .eyebrow{color:var(--butter)}
.band-dark .lede{color:rgba(255,237,189,.74)}
.band-dark .scrawl{color:var(--sage)}
.band-dark a{color:var(--butter)}

/* ---------------------------------------------- 2. services */
/* Four across on a wide screen, two up in the middle, stacked on a phone.
   Four columns of the old 24px gap left each card too narrow for a two-word
   Anton heading, so the gap tightens as the count goes up. */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.card{
  background:var(--butter);border:1.5px solid var(--ink);
  padding:28px 22px 22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:7px 7px 0 var(--ink)}
.card h3{font-size:clamp(19px,1.85vw,23px)}
.card p{color:var(--ink-60);flex:1}
.card .sticker{align-self:flex-start;margin-top:4px}
.cards-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:8px}
.cards-note{margin:0}

/* rotating testimonials */
.quotes{
  margin-top:64px;border-top:1.5px solid var(--ink-25);padding-top:40px;
  position:relative;min-height:190px;
}
/* All six quotes share one grid cell, so the row is always as tall as the
   LONGEST quote and the navy band never changes height as they rotate.
   The hidden ones still occupy the cell, which is the point: an absolutely
   positioned stack would collapse the row and let the band jump. */
.quote{
  grid-area:1/1;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
}
.quote.is-on{opacity:1;visibility:visible;transform:none}
/* Fixed-height quote box. The band is sized once, here, and site.js shrinks
   any quote whose text will not fit rather than letting it grow the box. The
   measure is wider than it used to be (40ch, not 26ch) so a long quote needs
   fewer lines and therefore less shrinking to fit.

   The base size is deliberately chosen so that even the LONGEST quote in the
   set fits the box untouched at every width. That keeps all six the same size
   as they rotate, which a per-quote shrink would not. The fitter in site.js
   is the safety net for a longer quote added later, not the normal path, and
   overflow:hidden is the net below that. */
.quote blockquote{
  --quote-size:clamp(16px,1.85vw,24px);
  font-size:var(--quote-size);
  line-height:1.4;max-width:46ch;
  height:var(--quote-box);
  overflow:hidden;
  /* Deliberately NOT a flex or grid container: the curly quotes are ::before
     and ::after, and in a flex box each becomes its own flex item and lands
     on a line of its own. As a plain block they stay inline with the text,
     which is the whole point of them. Quotes are top-aligned so every one
     starts on the same line as it rotates. */
  display:block;
  font-weight:500;text-wrap:pretty;
}
.quote blockquote::before{content:'\201C'}
.quote blockquote::after{content:'\201D'}
.quote figcaption{
  margin-top:14px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  display:flex;gap:10px;flex-wrap:wrap;color:var(--ink-60);
}
.quote .who{font-weight:700;color:var(--red)}
.quote-dots{position:absolute;right:0;top:4px;display:flex;gap:9px}
.quote-dots button{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  border:1.5px solid var(--ink);background:transparent;transition:background .2s ease;
}
.quote-dots button[aria-selected="true"]{background:var(--red);border-color:var(--red)}

/* ---------------------------------------------- 3. keynotes */
.talks{display:grid;gap:20px;margin-bottom:34px}
.talk{background:var(--butter);border:1.5px solid var(--ink);padding:34px 30px}
.talk-flag{border-width:2.5px;box-shadow:7px 7px 0 var(--red)}
.talk-tag{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:700;margin-bottom:10px;
}
.talk h3{font-size:clamp(24px,3.1vw,38px);margin-bottom:14px}
.talk p{color:var(--ink-60);max-width:62ch}
.talk-for{margin-top:16px;font-size:13px}
.talk-for b{color:var(--ink);text-transform:uppercase;letter-spacing:.09em;font-size:11px}


.planner{
  background:var(--ink);color:var(--butter);
  padding:34px 32px;max-width:560px;
}
.planner h3{font-size:clamp(17px,1.9vw,22px);margin-bottom:16px;color:var(--butter)}
.planner ul{list-style:none;display:grid;gap:9px;margin-bottom:24px}
.planner li{padding-left:22px;position:relative;font-size:14px;color:rgba(255,237,189,.82)}
.planner li::before{content:'\2733';position:absolute;left:0;color:var(--red);font-size:11px;top:3px}

/* ---------------------------------------------- 4. workshops & coaching */

/* ---------------------------------------------- 5. about */
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,66px);align-items:start}
.about-photo{border:1.5px solid var(--ink);background:var(--sage);aspect-ratio:2/3;overflow:hidden;position:sticky;top:100px}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.about-copy p{margin-bottom:22px;max-width:60ch}

/* ---------------------------------------------- 6. heart at work */
/* The signup block is a cream Post-it stuck on the olive ground: the warmest
   thing on the page, and the only element that leans. Text flips to ink
   because the tile is light, unlike the rest of this section. */
.postit{
  background:var(--butter);color:var(--ink);
  padding:34px 34px 30px;margin-top:8px;
  max-width:520px;
  --tilt:-1.4deg;
  box-shadow:10px 12px 0 rgba(21,22,39,.22);
}
.postit h3{font-size:clamp(21px,2.5vw,30px);margin-bottom:20px;color:var(--ink)}
/* Says plainly that the newsletter has not launched, so the button below it
   is not read as a broken signup. */
.postit-note{
  font-size:clamp(13px,1.35vw,15px);line-height:1.55;
  color:var(--ink-60);margin:-8px 0 20px;
}
.postit .sub-link{font-size:clamp(15px,1.6vw,18px);padding:15px 26px}
.postit .sub-link:hover,.postit .sub-link:focus-visible{
  background:var(--olive);border-color:var(--olive);color:var(--butter);
}
/* Asked for as a red link. Red type directly on the deep olive is 1.9:1 and
   simply cannot be read, so the red is the block and the type sits on it:
   butter on red at this size is 3.5:1, which clears AA for large text. */

/* Coming-soon chip. The eyebrow sits on the deep olive band, so the chip is
   butter-filled with ink type rather than another red run, which would be
   2:1 on olive and unreadable at 11px. */
.soon-tag{
  display:inline-block;
  background:var(--butter);color:var(--ink);
  padding:3px 9px 2px;margin-right:9px;
  border-radius:2px;
  letter-spacing:.18em;
}
.sub-link{
  display:inline-block;
  background:var(--red);color:var(--butter);
  font-family:var(--body);font-weight:700;
  font-size:clamp(17px,1.9vw,22px);letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;
  padding:17px 30px;border:1.5px solid var(--red);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.sub-link:hover,.sub-link:focus-visible{
  background:var(--butter);border-color:var(--butter);color:var(--olive);
  transform:translateY(-2px);
}
.posts{display:grid;gap:2px;margin-top:40px}
.post{display:flex;gap:18px;padding:16px 0;border-top:1px solid rgba(255,237,189,.2);text-decoration:none;color:var(--butter)}
.posts{margin-top:44px}
.post-soon{align-items:baseline}
.post-soon .post-title{font-size:clamp(15px,1.6vw,18px)}
.post-date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;min-width:96px}
.post-title{font-weight:500}

/* ---------------------------------------------- 7. let's talk */
.talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px);align-items:start}
/* An afterthought scrawled across the bottom of the headline rather than a
   second line under it. The h2 is inline-block so the absolute child anchors
   to the text, not the column. */
.talk-h{position:relative;display:inline-block;padding-bottom:.58em}
/* Two things make this fiddly. The scrawl's offsets are in ITS own em (it is
   the positioned element), not the headline's, so a nudge moves it less than
   it looks like it should, and raising the headline's padding to compensate
   just drags it back down. And Anton's ink sits high in its line box with
   almost no descender, so the PAINTED gap under the headline is far larger
   than the box geometry suggests: roughly an em of the scrawl. Hence the
   large-looking bottom offset. Clearance to the paragraph is set here,
   independently, so the scrawl can move without collapsing it. */
.talk-copy .lede{margin-top:10px}
.talk-h .talk-sub{
  position:absolute;right:-.78em;bottom:1.12em;
  font-family:var(--script);color:var(--olive);
  font-size:clamp(17px,1.8vw,23px);
  text-transform:none;letter-spacing:0;line-height:1;
  white-space:nowrap;transform:rotate(-9deg);transform-origin:right bottom;
}
.talk-copy .btn-lg{margin-bottom:30px}
.talk-copy .scrawl{transform:rotate(-2deg);display:inline-block}

.talk-form{width:100%;background:var(--butter);border:1.5px solid var(--ink);padding:34px 32px}
.form-h{font-size:clamp(17px,1.9vw,22px);margin-bottom:22px}
form label{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
form input,form select,form textarea{
  width:100%;background:#FFFDF7;border:1.5px solid var(--ink-25);
  font-family:var(--body);font-size:14px;color:var(--ink);padding:12px 14px;
}
form input:focus,form select:focus,form textarea:focus{border-color:var(--red);outline:none}
form textarea{resize:vertical}
#bookingForm>div{margin-bottom:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row2>div{margin-bottom:0}
.opt{opacity:.55;font-weight:400;letter-spacing:.06em}
.form-msg{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--olive);font-weight:500}
.form-msg.error{color:var(--red-dark)}

/* ---------------------------------------------- 8. footer */
footer{background:var(--ink);color:var(--butter);padding:46px 0 24px;border-top:1.5px solid var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:34px;align-items:start}
.foot-sign{color:var(--sage);font-size:clamp(22px,2.6vw,30px)}
.foot-links{display:grid;gap:11px}
.foot-links a{color:var(--butter);font-size:13px;text-decoration:none;opacity:.82;width:fit-content}
.foot-links a:hover{color:var(--red);opacity:1}
.foot-sub p{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;opacity:.75}
.btn-foot{padding:14px 24px;font-size:12.5px}
.btn-foot:hover,.btn-foot:focus-visible{background:var(--olive);border-color:var(--olive);color:var(--butter)}
.smallprint{text-align:center;margin-top:34px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;opacity:.45}

/* ---------------------------------------------- reveals */
/* Reveals compose with an element's own tilt. The old rule ended on
   transform:none, which silently flattened anything rotated (the Post-it, the
   handwritten notes) the moment it animated in. Tilt is declared as --tilt so
   both states can carry it. */
.reveal{opacity:0;transform:translateY(16px) rotate(var(--tilt,0deg));transition:opacity .6s ease,transform .6s ease;transition-delay:var(--stagger,0s)}
.reveal.visible{opacity:1;transform:rotate(var(--tilt,0deg))}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.btn:hover{transform:none}
}

/* ---------------------------------------------- hero stacking
   Earlier than the nav breakpoint on purpose. Between roughly 820 and 980
   the photo and the type column each want more than half the width, and side
   by side they squeeze the photo into a sliver, so they stack first and the
   nav collapses later. */
@media (max-width:980px){
  /* The photo comes FIRST in the markup so it can sit behind the type on
     desktop. Stacked, it belongs under the text, so the order is flipped
     here rather than duplicating the image in the HTML. */
  .hero{min-height:auto;padding:100px 0 0;display:flex;flex-direction:column;overflow:visible}
  .hero-grid{order:1}
  .hero-type{max-width:none}
  .hero-blurb{max-width:none}
  .hero-photo{
    order:2;
    position:static;
    /* Height is capped so a portrait photo does not eat a full screen of
       scrolling on a tablet, and the WIDTH follows from it, so the cap can
       never crop the top of the frame. 120.4vw is the photo's own height at
       full viewport width (the photo is 3:4), so on a phone it stays edge to
       edge and on anything wider it shrinks and centres instead of being cut. */
    width:auto;max-width:none;
    height:min(64svh,133.4vw);
    margin:40px auto 0;
    aspect-ratio:1400/1867;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
  }
}

/* ---------------------------------------------- responsive */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr);gap:18px}
  .talk-grid,.about-grid{grid-template-columns:1fr}
  /* The photo is 1400x2100, a 2:3 portrait. This box used to be 3:2, a
     LANDSCAPE window onto a portrait frame, so object-fit:cover threw away
     the top and bottom and chopped her body. Same mistake the hero photo
     made, same fix: hold the box at the image's own ratio and derive the
     width from a capped height, so any crop comes off the sides and never
     off her. */
  .about-photo{
    position:static;
    aspect-ratio:1400/2100;
    height:min(62svh,520px);
    width:auto;max-width:100%;
    margin:0 auto 26px;
  }
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  section{padding:58px 0}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--butter);border-bottom:1.5px solid var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px var(--gut) 20px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;font-size:13px;width:100%}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin-top:10px;width:auto}

  /* In the mobile sheet the submenu is just an indented list, opened by the
     caret. No hover state exists on touch, so it is click-only here. */
  .has-sub{flex-direction:row;flex-wrap:wrap;width:100%}
  .has-sub>a{width:auto;flex:1}
  .sub-toggle{padding:13px 8px;font-size:12px}
  .has-sub::after{display:none}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:none;padding:0 0 6px 18px;
    min-width:0;width:100%;display:none;
  }
  .sub.open{display:flex}
  .has-sub:hover .sub,.has-sub:focus-within .sub{display:none}
  .has-sub:hover .sub.open,.has-sub:focus-within .sub.open{display:flex}
  .sub a{padding:10px 0;font-size:12.5px;opacity:.82}

  /* Below the fold the photo stops bleeding and simply follows the text, so
     nothing is masked out on a narrow screen where there is no room to fade. */

  /* dots drop to their own grid row rather than sharing the quote's cell */
  .quote-dots{position:static;grid-area:2/1;margin-top:24px}

  .foot-grid{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr}
  .cards-foot{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .row2{grid-template-columns:1fr}
  /* no room to hang it off the headline at this width */
  .talk-h{display:block;padding-bottom:0}
  .talk-h .talk-sub{position:static;display:block;margin-top:8px;transform:rotate(-2deg);
    transform-origin:left center;white-space:normal}
  .talk-form,.sub-card,.planner{padding:26px 20px}
  .hero-blurb .wins{white-space:normal}
}


/* ---------------------------------------------- testimonial band */
/* Full-bleed navy inside the services section. body has overflow-x:hidden,
   and verify.py checks for a horizontal scrollbar at every width, because
   this 100vw technique is the usual way to introduce one. */
/* The band is the last thing in Services, so the section drops its bottom
   padding and the navy runs flush into the sage band below it rather than
   floating with a strip of butter underneath. */
#services{padding-bottom:0}
.quotes{
  --quote-box:clamp(122px,13.6vw,174px);
  width:100vw;position:relative;left:50%;margin-left:-50vw;
  background:var(--ink);color:var(--butter);
  border-block:1.5px solid var(--ink);
  margin-top:58px;padding:50px 0 46px;
  border-top:0;
}
.quotes-inner{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  position:relative;
  display:grid;grid-template-columns:1fr;
}
.quotes .quote blockquote{color:var(--butter)}
.quotes .quote figcaption{color:rgba(255,237,189,.66)}
.quotes .quote .who{color:var(--red)}
.quote-dots button{border-color:rgba(255,237,189,.55)}
.quote-dots button[aria-selected="true"]{background:var(--red);border-color:var(--red)}

@media (max-width:820px){
  .quotes{margin-top:42px;padding:38px 0 34px;--quote-box:clamp(136px,34vw,168px)}
}

/* ---------------------------------------------- service blocks */
/* List on the left, who it's for plus the handwritten note on the right. */
.block-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:start}
/* lists need air after the callout above them */
.svc .list-h{margin-top:40px}
.list-h{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--red);margin-bottom:16px;
}
.howlist{list-style:none;display:grid;gap:12px}
.howlist li{
  position:relative;padding-left:26px;
  font-size:clamp(14px,1.45vw,16px);line-height:1.6;
}
.howlist li::before{
  content:'\2733';position:absolute;left:0;top:2px;
  color:var(--red);font-size:11px;
}
.ideal{
  max-width:58ch;
  font-size:clamp(14px,1.45vw,16px);line-height:1.65;color:var(--ink-60);
  border-left:3px solid var(--olive);padding-left:18px;
}
.ideal b{
  display:block;color:var(--ink);text-transform:uppercase;
  letter-spacing:.16em;font-size:10.5px;margin-bottom:6px;
}
.block-note{margin-top:26px;--tilt:-1.6deg;transform:rotate(-1.6deg);display:inline-block}

/* pinned topic tags */
.topics-h{margin-top:42px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.tags li{
  border:1.5px solid var(--ink);background:var(--butter);
  padding:9px 16px;font-size:13px;line-height:1.3;
  box-shadow:3px 3px 0 rgba(21,22,39,.14);
}

.planner-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;margin-top:44px}
.planner-note{margin-top:0;margin-bottom:6px}

.section-closing{
  margin-top:56px;text-align:center;
  font-size:clamp(15px,1.6vw,18px);font-weight:500;
}

@media (max-width:820px){
  .block-grid{grid-template-columns:1fr;gap:30px}
  .postit{--tilt:-1deg;max-width:none;box-shadow:7px 8px 0 rgba(21,22,39,.22)}
  .planner-row{flex-direction:column;align-items:flex-start;gap:18px}
  .planner-note{margin-bottom:0}
  .section-closing{margin-top:40px;text-align:left}
}

/* ==========================================================
   SERVICES PAGE
   Four blocks, four deliberately different shapes, so scrolling
   the page does not feel like reading the same card four times.
   A: copy + portrait, list full width underneath in numbered columns
   B: mirrored, photo left, list as a vertical stepper
   C: full-width dark band, no photo, 2x2 tiles
   D: card-led, pinned tags, planner box
   ========================================================== */

.page-head{padding:132px 0 56px;border-bottom:1.5px solid var(--ink)}
.page-h{
  font-size:clamp(64px,14vw,190px);
  line-height:.92;margin:6px 0 18px;
}
.page-sub{
  font-family:var(--script);color:var(--olive);
  font-size:clamp(20px,2.6vw,32px);line-height:1.2;margin-bottom:38px;
}
.jump{display:flex;flex-wrap:wrap;gap:10px}
.jump a{
  display:flex;align-items:baseline;gap:9px;
  border:1.5px solid var(--ink);background:var(--butter);
  padding:11px 17px;text-decoration:none;color:var(--ink);
  font-size:12.5px;letter-spacing:.05em;
  transition:background .18s ease,transform .18s ease;
}
.jump a span{font-weight:700;color:var(--red);font-size:11px}
.jump a:hover{background:var(--sage);transform:translateY(-2px)}

.svc{padding:88px 0}
.svc-num{
  font-family:var(--display);font-size:clamp(46px,7vw,96px);
  line-height:.9;color:var(--red);opacity:.28;margin-bottom:10px;
}
.band-dark .svc-num{color:var(--butter);opacity:.22}

.svc-photo{border:1.5px solid var(--ink);background:var(--sage);overflow:hidden;position:relative}
.svc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 26%;display:block}
.svc-stamp{
  position:absolute;left:-10px;bottom:16px;
  background:var(--olive);color:var(--butter);
  padding:7px 16px 9px;--tilt:-2.4deg;
  box-shadow:3px 4px 0 rgba(21,22,39,.22);
  font-size:clamp(16px,1.7vw,20px);
}

/* --- A --- */
.svc-a .svc-photo{aspect-ratio:4/5}
.numgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:6px}
.numgrid li{
  border-top:2.5px solid var(--red);padding-top:14px;
  font-size:clamp(14px,1.4vw,15.5px);line-height:1.55;
}
.numgrid .n{
  display:block;font-family:var(--display);font-size:22px;
  color:var(--red);margin-bottom:8px;
}

/* Two-column body for blocks 01 and 02. Both lost their photo, and a single
   column left the right half of each block empty. The photo can come back
   into either column later without changing the surrounding structure. */
.svc-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.svc-cols .lede{margin-bottom:0}
.svc-cols-b{grid-template-columns:1fr 1fr}
.svc-cols-b .lede{margin-bottom:26px}
.svc-cols-b .list-h{margin-top:0}
.svc-a .list-h{margin-top:46px}

/* --- B --- */
.svc-photo.tall{aspect-ratio:2/3;position:sticky;top:100px}
.stepper{list-style:none;display:grid;gap:0;margin-bottom:30px;counter-reset:step}
.stepper li{
  counter-increment:step;position:relative;
  padding:0 0 22px 46px;
  font-size:clamp(14px,1.45vw,16px);line-height:1.6;
}
.stepper li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-2px;
  width:29px;height:29px;border-radius:50%;
  border:1.5px solid var(--ink);background:var(--butter);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--red);
}
/* the rule that makes it read as a sequence, not a list */
.stepper li::after{
  content:'';position:absolute;left:14px;top:29px;bottom:0;
  width:1.5px;background:var(--ink-25);
}
.stepper li:last-child{padding-bottom:0}
.stepper li:last-child::after{display:none}

/* --- C --- */
.cohort-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:44px}
.tiles{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px}
.tiles li{
  display:flex;gap:16px;align-items:flex-start;
  border:1.5px solid rgba(255,237,189,.32);
  padding:24px 22px;
  font-size:clamp(14px,1.45vw,16px);line-height:1.55;
}
.tiles .n{font-family:var(--display);font-size:24px;color:var(--red);line-height:1}
.cohort-foot{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.band-dark .ideal{border-left-color:var(--red);color:rgba(255,237,189,.78);max-width:60ch}
.band-dark .ideal b{color:var(--butter)}
.band-dark .list-h{color:var(--butter)}

/* One call to action at the foot of each service block. Same olive patch as
   the hero sticker; on the dark band it flips to butter, because olive on
   navy is two dark colours and the patch would disappear. */
.sticker-cta{
  margin-top:34px;
  font-size:clamp(18px,1.95vw,24px);
  background:var(--olive);color:var(--butter);
  padding:9px 20px 11px;
  box-shadow:3px 4px 0 rgba(21,22,39,.2);
  --tilt:-1.8deg;transform:rotate(-1.8deg);
}
.sticker-cta:hover,.sticker-cta:focus-visible{
  transform:rotate(-1.8deg) translateX(4px);
  background:var(--sage);color:var(--ink);
}
.band-dark .sticker-cta{background:var(--butter);color:var(--ink)}
.band-dark .sticker-cta:hover,.band-dark .sticker-cta:focus-visible{
  background:var(--red);color:var(--butter);
}

/* --- D --- */
.svc-d .talk-flag{margin-bottom:8px}

@media (max-width:980px){
  .svc-cols,.svc-cols-b,.cohort-top{grid-template-columns:1fr}
  .numgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .page-head{padding:104px 0 40px}
  .svc{padding:62px 0}
  .numgrid,.tiles{grid-template-columns:1fr}
  .jump a{width:100%}
  .cohort-foot{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------- Heart at Work
   Set like a newsletter front page. Masthead, dateline, two-column prose
   with a rule between, and the signup Post-it stuck over the edge of it. */
.haw{max-width:1060px}

.haw-masthead{border-bottom:2.5px solid var(--butter);padding-bottom:20px;margin-bottom:38px}
.haw-title{
  font-size:clamp(50px,9.6vw,132px);line-height:.94;
  margin:2px 0 0;color:var(--butter);
}

/* Sits inside the masthead, so the masthead's own rule closes it. Handwritten
   and held to a single line on desktop. The size is tuned by measuring the
   rendered text against its box in a stand-in font WIDER than Nothing You
   Could Do, so the real face has room to spare. Measuring the span mattered:
   as a block it always reported the full box width and hid the overflow.
   Below the breakpoint there is no width to hold it, so it wraps. */
.haw-standfirst{
  margin-top:16px;
  font-family:var(--script);
  font-size:clamp(17px,2vw,22px);line-height:1.25;
  color:var(--sage);font-weight:400;letter-spacing:0;
}
.haw-standfirst span{display:inline-block}
@media (min-width:900px){
  .haw-standfirst span{white-space:nowrap}
}

.haw-body{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,54px);align-items:center}

/* The one piece of prose left, so it is set as a statement rather than body
   copy: large, short measure, with a red rule marking it as a pull quote. */
.haw-statement{
  font-size:clamp(20px,2.5vw,31px);line-height:1.38;
  color:var(--butter);max-width:22ch;font-weight:500;
  border-left:3px solid var(--red);padding-left:22px;
}

/* What each issue holds, as a strip. This replaced a paragraph that said the
   same thing at four times the length. */
/* The rule and the mini title belong to the heading, so the list below it
   carries neither. */
.haw-inside-h{
  margin-top:46px;padding-top:22px;margin-bottom:22px;
  border-top:2.5px solid var(--butter);
}
.haw-inside{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto;
  gap:26px;
}
/* Subgrid so the number, the heading and the subline each sit on a shared
   row. Without it, item 3's two-line heading pushes its subline below the
   other two and the strip reads ragged. Browsers without subgrid ignore the
   rule and fall back to the per-item grid, which still works. */
.haw-inside li{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;
  gap:5px;align-content:start;
}
.haw-inside .n{
  font-family:var(--display);font-size:20px;color:var(--red);line-height:1;
}
.haw-inside b{
  font-size:clamp(14px,1.5vw,16px);color:var(--butter);font-weight:700;
  letter-spacing:.01em;
}
.haw-inside li>span:last-child{
  font-size:13px;line-height:1.6;color:rgba(255,237,189,.66);
}

/* the Post-it leans over the edge of the type block */
.postit{
  background:var(--butter);color:var(--ink);
  padding:44px 38px 40px;
  --tilt:-1.8deg;
  margin-left:-26px;
  box-shadow:10px 12px 0 rgba(21,22,39,.24);
}
.postit h3{font-size:clamp(24px,3vw,38px);margin-bottom:26px;color:var(--ink);line-height:1}
/* Handwritten, not the usual mono caps. Butter on red at this size is 3.5:1,
   which clears AA for large text. */
.postit .sub-link{
  font-family:var(--script);text-transform:none;letter-spacing:.01em;
  font-weight:400;font-size:clamp(20px,2.6vw,34px);
  padding:14px 20px 18px;width:100%;text-align:center;
  white-space:nowrap;   /* one line, whatever the width */
}
.postit .sub-link:hover,.postit .sub-link:focus-visible{
  background:var(--olive);border-color:var(--olive);color:var(--butter);
}

/* Post strip, set like a masthead footer. Unused until Heart at Work
   has published issues to list. */
.issue{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  margin-top:46px;padding-top:20px;
  border-top:2.5px solid var(--butter);
}
.issue-tag{
  background:var(--red);color:var(--butter);
  padding:5px 12px 6px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.issue-title{font-size:clamp(16px,1.8vw,21px);color:var(--butter);font-weight:500}
.issue-meta{
  font-family:var(--script);color:var(--sage);
  font-size:clamp(16px,1.7vw,20px);margin-left:auto;
}

@media (max-width:900px){
  .haw-body{grid-template-columns:1fr;gap:30px}
      .postit{margin-left:0;--tilt:-1.2deg;padding:34px 26px 30px;box-shadow:7px 8px 0 rgba(21,22,39,.24)}
  .haw-standfirst{max-width:none}
  .haw-statement{max-width:none}
  .haw-inside{grid-template-columns:1fr;gap:20px}
  .haw-inside-h{margin-top:34px}
  .issue-meta{margin-left:0}
}