/* ============================================================
   glow.css — shared layer, loaded after each page's inline CSS.
   Everything here is additive. Nothing in the original design
   was deleted; this constrains, colours and decorates it.

   RULE CARRIED OVER FROM THE PRINTED JOURNAL:
   decoration where nothing is written, clean paper where
   something is. Botanicals live in margins, dividers and
   corners — never behind a line of reading text.
   ============================================================ */

:root{
  --shell:      1240px;   /* the widest any content block may get */
  --shell-wide: 1440px;   /* full-bleed bands with inner padding  */
  --bot:        #8A5734;
}

/* ---------- 1. LARGE-SCREEN CONTAINMENT ------------------- */
/* The original build let five bands run edge to edge with no
   max-width. Above ~1500px they tore apart. Each is capped. */

.intro{
  max-width:var(--shell); margin:0 auto;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  box-shadow:0 18px 46px rgba(32,28,24,0.07);
}
.intro-copy{ padding:64px clamp(32px,4vw,64px); }
.intro-copy h2,
.intro-copy p{ max-width:34ch; }

.cta-band{ max-width:var(--shell); margin:0 auto; }

.footer-top{ max-width:var(--shell); margin:0 auto; }

.journey-grid,
.journal-grid,
.ways-grid,
.book-feature-inner,
.about-inner,
.book-teaser-inner,
.home-booking-embed{ width:100%; }

/* Stop grid children collapsing to min-content — the trap that
   bit three times on this project. */
.intro > *, .cta-band > *, .footer-top > *,
.journey-item, .journal-card, .way-card{ min-width:0; }

@media(min-width:1500px){
  .journey{ padding:96px 40px; }
  .about, .book-feature{ padding:110px 40px; }
}

/* ---------- 2. THE NAV GETS ITS OWN BAND ------------------ */
/* It used to sit on the same cream as the page, so it read as
   part of the hero rather than as navigation. */

.navbar{
  background:var(--cream-deep);
  border-bottom:1px solid rgba(32,28,24,0.10);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px rgba(32,28,24,0.05);
  position:sticky; top:0; z-index:50;
}
.navbar .nav{ padding:18px 40px; }
.navbar .nav-links a{ color:var(--ink); }
.navbar .nav-links a[aria-current="page"]{ color:var(--clay-deep); }
.navbar .nav-links a[aria-current="page"]::after{ width:100%; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  width:46px; height:46px; border-radius:3px; color:var(--ink);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ display:block; }

@media(max-width:900px){
  .navbar .nav{ padding:14px 20px; }
  .nav-toggle{ display:flex; }
  .navbar .nav > .btn{ display:none; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--cream-deep); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 20px 18px;
    box-shadow:0 18px 30px rgba(32,28,24,0.12);
  }
  .navbar.open .nav-links{ display:flex; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:15px 2px; }
  .nav-links .nav-book{ margin-top:12px; }
  .nav-links .nav-book a{
    background:#A8683F; color:#fff; text-align:center; border-radius:2px; padding:15px;
  }
}

/* ---------- 3. BOTANICAL DECORATION ----------------------- */

.bot-rule{
  display:block; width:190px; height:auto; margin:26px auto;
  color:var(--bot); opacity:0.55;
}
.bot-rule--tight{ margin:18px auto; width:150px; }

/* Margin sprays for the reading pages. Hidden below 1180px so
   they can never crowd the text column. */
.botmargin{ position:relative; }
.botmargin::before,
.botmargin::after{
  content:""; position:absolute; top:60px; width:200px; height:780px;
  background:url("bot-margin.svg") no-repeat top center / contain;
  opacity:0.12; pointer-events:none; display:none;
}
.botmargin::before{ left:max(10px, calc(50% - 690px)); }
.botmargin::after{ right:max(10px, calc(50% - 690px)); transform:scaleX(-1); }
@media(min-width:1180px){
  .botmargin::before, .botmargin::after{ display:block; }
}
@media(min-width:1700px){
  .botmargin::before, .botmargin::after{ opacity:0.16; width:250px; }
}

.botcorner{ position:relative; overflow:hidden; }
.botcorner > .botcorner-art{
  position:absolute; top:-30px; right:-40px; width:260px; height:260px;
  background:url("bot-corner.svg") no-repeat center / contain;
  opacity:0.10; pointer-events:none;
}

/* ---------- 4. THE READING PAGE (articles) ---------------- */

.paper{
  background:var(--cream);
  border:1px solid rgba(32,28,24,0.10);
  border-radius:3px;
  box-shadow:0 24px 60px rgba(32,28,24,0.08);
}

body.reading{ background-color:#EFE6D6; }
body.reading .article{
  max-width:760px; margin:0 auto; padding:64px clamp(24px,5vw,68px);
  border-top:none;
}
body.reading .articles-stack{
  max-width:860px; margin:0 auto 70px; padding:0 clamp(16px,4vw,40px);
}
body.reading .article + .article{ margin-top:34px; }
body.reading .article p{ font-size:1.06rem; line-height:1.9; color:#3B342D; }
body.reading .article h2{ font-size:clamp(1.7rem,3.4vw,2.25rem); }
body.reading .article h3{ font-size:1.28rem; margin:36px 0 14px; }
body.reading .article .meta{ font-size:0.84rem; }
body.reading .article .tag{ font-size:0.8rem; }
body.reading .sources{ font-size:0.86rem; line-height:1.7; }

/* Opening flourish: a raised first letter, engraved rule under
   the title. No texture behind the words themselves. */
.article > p.meta + p::first-letter{
  font-family:'Playfair Display',serif; font-size:3.1rem; line-height:0.86;
  float:left; margin:6px 12px 0 0; color:var(--clay-deep);
}
.article-head{ text-align:center; margin-bottom:34px; }
.article-head h2{ margin:12px 0 8px; }

.toc.paper{ padding:40px clamp(22px,4vw,48px); }
body.reading .toc{ max-width:860px; }
.toc-item{ transition:background .2s ease, padding .2s ease; }
.toc-item:hover{ background:rgba(138,87,52,0.05); }

/* ---------- 5. CARDS: JOURNAL + WAYS ---------------------- */

.journal-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(32,28,24,0.10);
  padding:34px 30px 30px !important;
  display:flex; flex-direction:column;
  box-shadow:0 10px 26px rgba(32,28,24,0.05);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.journal-card::before{
  content:""; position:absolute; top:-14px; right:-18px; width:104px; height:114px;
  background:url("bot-sprig.svg") no-repeat center / contain;
  color:var(--bot); opacity:0.14; pointer-events:none;
  transition:opacity .28s ease;
}
.journal-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--clay),var(--aqua));
  opacity:0; transition:opacity .28s ease;
}
.journal-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(32,28,24,0.13);
  border-color:rgba(138,87,52,0.35);
}
.journal-card:hover::before{ opacity:0.26; }
.journal-card:hover::after{ opacity:1; }
.journal-card p{ flex:1; font-size:0.92rem !important; }
.journal-card .rd{ align-self:flex-start; }
.journal-teaser h2{
  font-size:clamp(1.6rem,3vw,2.1rem) !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
  color:var(--ink) !important;
  font-weight:600 !important;
  font-family:'Playfair Display',serif;
}

/* "Ways to glow" — the heading was 13.6px uppercase. */
.ways h2{
  font-size:clamp(1.9rem,3.6vw,2.6rem) !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
  color:var(--ink) !important;
  font-weight:600 !important;
  margin-bottom:14px !important;
}
.ways-sub{
  text-align:center; color:var(--charcoal); font-weight:300;
  max-width:520px; margin:0 auto 50px; line-height:1.7;
}
.ways-grid{
  max-width:1120px !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:30px !important;
}
.way-card{
  background:var(--cream); border:1px solid rgba(32,28,24,0.10);
  padding:0 0 30px; border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column; text-align:center;
  box-shadow:0 10px 26px rgba(32,28,24,0.06);
  transition:transform .28s ease, box-shadow .28s ease;
}
.way-card:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(32,28,24,0.14); }
.way-card .way-img{ aspect-ratio:4/3; overflow:hidden; background:var(--taupe); }
.way-card .way-img img{ width:100%; height:100%; object-fit:cover; }
.way-card .way-img--cover{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#E7DAC6,#F4ECDF); padding:18px; }
.way-card .way-img--cover img{ width:auto; height:100%; object-fit:contain;
  box-shadow:0 10px 24px rgba(32,28,24,0.28); border-radius:2px; }
.way-card h3{ font-size:1.35rem; margin:24px 26px 10px; }
.way-card p{ color:var(--charcoal); font-weight:300; line-height:1.65;
  font-size:0.94rem; margin:0 26px 20px; flex:1; }
.way-card .learn{
  font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  color:var(--clay-deep); border-bottom:1px solid var(--clay-deep);
  padding-bottom:2px; align-self:center;
}
@media(max-width:900px){ .ways-grid{ grid-template-columns:1fr !important; } }

/* ---------- 6. THE CTA BAND, REBUILT ---------------------- */
/* The old band used flowers.jpg — a 255x95 thumbnail — stretched
   into a full-height panel, which is why it looked cropped. It is
   replaced with engraved art that scales to any width. */

.cta-band{
  display:block !important; text-align:center;
  padding:clamp(46px,6vw,72px) clamp(24px,5vw,60px) !important;
  background-color:#EADCC9 !important;
  background-image:linear-gradient(160deg,#EFE3D0,#E5D8C7) !important;
  border-top:1px solid rgba(32,28,24,0.08);
  border-bottom:1px solid rgba(32,28,24,0.08);
  position:relative; overflow:hidden;
}
.cta-inner{ max-width:640px; margin:0 auto; position:relative; z-index:1; }
.cta-band h2{
  font-size:clamp(1.7rem,3.4vw,2.4rem) !important;
  line-height:1.2; margin-bottom:14px !important; max-width:none !important;
}
.cta-band p{
  color:var(--charcoal); font-weight:300; line-height:1.7;
  max-width:460px !important; margin:0 auto 26px !important; font-size:1rem !important;
}
.cta-band .note{ display:block; margin-top:14px; font-size:0.84rem;
  color:var(--charcoal); font-style:italic; }
.cta-band .cta-wreath{
  position:absolute; width:min(420px,55vw); aspect-ratio:1;
  background:url("bot-wreath.svg") no-repeat center / contain;
  opacity:0.10; pointer-events:none; top:50%; left:50%;
  transform:translate(-50%,-50%);
}

/* ---------- 7. THE DIARY ---------------------------------- */

.diary-band{
  background-color:#2A241E;
  background-image:linear-gradient(165deg,#26211C 0%,#332B23 55%,#241F1A 100%);
  color:#F3EADB; padding:clamp(60px,7vw,100px) clamp(24px,5vw,40px);
  position:relative; overflow:hidden;
}
.diary-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 25% 40%, rgba(200,169,106,0.20), transparent 62%);
  pointer-events:none;
}
.diary-inner{
  max-width:1080px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:0.8fr 1fr; gap:clamp(34px,5vw,68px);
  align-items:center;
}
.diary-cover{ display:flex; justify-content:center; }
.diary-cover img{
  width:100%; max-width:330px; height:auto; border-radius:2px;
  box-shadow:0 3px 8px rgba(0,0,0,0.4), 0 28px 60px rgba(0,0,0,0.5);
}
.diary-copy .eyebrow{ color:#C8A96A !important; display:block; margin-bottom:14px; }
.diary-copy h2{ font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; margin-bottom:10px; color:#F3EADB; }
.diary-copy h2 em{ font-style:italic; color:#C8A96A; }
.diary-copy .byline{ color:#C8BCA6; font-style:italic; font-size:0.95rem; margin-bottom:20px; }
.diary-copy > p{ color:#DCD0BC; font-weight:300; line-height:1.85; margin-bottom:22px; }
.diary-list{ list-style:none; margin:0 0 28px; padding:0; }
.diary-list li{
  color:#DCD0BC; font-weight:300; font-size:0.97rem; line-height:1.6;
  padding:7px 0 7px 26px; position:relative;
}
.diary-list li::before{ content:"✦"; position:absolute; left:0; color:#C8A96A; font-size:0.78rem; top:11px; }
.diary-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.diary-price .amt{ font-family:'Playfair Display',serif; font-size:2.3rem; color:#C8A96A; line-height:1; }
.diary-price .unit{ font-size:0.86rem; color:#C8BCA6; letter-spacing:0.06em; }
.diary-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.diary-actions .btn-gold{ background:#C8A96A; color:#241F1A; font-weight:600; }
.diary-actions .btn-gold:hover{ background:#D8BC80; }
.diary-actions .btn-ghost{
  background:transparent; color:#F3EADB; border:1px solid rgba(243,234,219,0.45);
  padding:13px 29px;
}
.diary-actions .btn-ghost:hover{ background:rgba(243,234,219,0.12); }
.diary-note{ font-size:0.84rem; color:#B9AC97; margin-top:16px; font-style:italic; }
@media(max-width:860px){
  .diary-inner{ grid-template-columns:1fr; text-align:center; }
  .diary-price{ justify-content:center; }
  .diary-actions{ justify-content:center; }
  .diary-list{ text-align:left; max-width:340px; margin-inline:auto; }
}

/* the two-step pairing: learn it / live it */
.pair{ max-width:960px; margin:0 auto; display:grid;
  grid-template-columns:1fr auto 1fr; gap:26px; align-items:center; }
.pair-step{ text-align:center; }
.pair-step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--clay);
  color:var(--clay-deep); font-family:'Playfair Display',serif; margin-bottom:14px;
}
.pair-step h3{ font-size:1.2rem; margin-bottom:8px; }
.pair-step p{ color:var(--charcoal); font-weight:300; font-size:0.94rem; line-height:1.65; }
.pair-arrow{ color:var(--clay); font-size:1.4rem; }
@media(max-width:760px){
  .pair{ grid-template-columns:1fr; }
  .pair-arrow{ transform:rotate(90deg); }
}

/* ---------- 8. BOOKING — kills the empty white box -------- */

.bookband{
  background-color:#2A241E;
  background-image:linear-gradient(165deg,#26211C,#332B23);
  color:#F3EADB; padding:clamp(56px,6vw,92px) clamp(24px,5vw,40px);
  position:relative; overflow:hidden;
}
.bookband::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(200,169,106,0.20), transparent 60%);
}
.bookband-inner{ max-width:820px; margin:0 auto; position:relative; z-index:1; text-align:center; }
.bookband .eyebrow{ color:#C8A96A !important; display:block; margin-bottom:14px; }
.bookband h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); color:#F3EADB; line-height:1.2; margin-bottom:14px; }
.bookband > .bookband-inner > p{ color:#DCD0BC; font-weight:300; line-height:1.75; max-width:520px; margin:0 auto 30px; }
.bookband-price{
  border-top:1px solid rgba(200,169,106,0.4); border-bottom:1px solid rgba(200,169,106,0.4);
  padding:24px 0; margin:0 auto 30px; max-width:460px;
}
.bookband-price .amt{ font-family:'Playfair Display',serif; font-size:clamp(2.4rem,7vw,3.2rem);
  color:#C8A96A; line-height:1; display:block; }
.bookband-price .unit{ font-size:0.88rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#C8BCA6; margin-top:10px; display:block; }
.bookband-reassure{ list-style:none; padding:0; margin:0 auto 32px; max-width:560px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; text-align:left; }
.bookband-reassure li{ color:#D8CCB6; font-size:0.92rem; font-weight:300;
  padding-left:24px; position:relative; line-height:1.5; }
.bookband-reassure li::before{ content:"✓"; position:absolute; left:0; color:#C8A96A; }
@media(max-width:620px){ .bookband-reassure{ grid-template-columns:1fr; } }
.bookband .btn-gold{ background:#C8A96A; color:#241F1A; font-weight:600; padding:17px 40px; font-size:0.86rem; }
.bookband .btn-gold:hover{ background:#D8BC80; }
.bookband-alt{ margin-top:20px; font-size:0.88rem; color:#B9AC97; }
.bookband-alt a{ color:#C8A96A; border-bottom:1px solid rgba(200,169,106,0.6); }

/* the framed booking modal — an iframe given a frame it is meant
   to fill, so there is no dead space by construction */
.sq{ position:fixed; inset:0; z-index:120; display:none;
  background:rgba(26,22,18,0.72); overflow-y:auto; }
.sq.open{ display:flex; align-items:stretch; justify-content:center; padding:0; }
.sq__card{ background:#fff; width:100%; max-width:980px; display:flex; flex-direction:column;
  min-height:100%; }
.sq__bar{ background:#26211C; color:#F3EADB; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  position:sticky; top:0; z-index:2; }
.sq__bar strong{ font-family:'Playfair Display',serif; font-weight:500; font-size:1.05rem; }
.sq__bar span{ display:block; font-size:0.8rem; color:#C8BCA6; letter-spacing:0.06em; }
.sq__close{ background:none; color:#F3EADB; font-size:1.1rem; line-height:1;
  width:44px; height:44px; border-radius:50%; flex:none; }
.sq__close:hover{ background:rgba(243,234,219,0.14); }
.sq__stage{ flex:1; display:flex; min-height:min(70vh,560px); }
.sq__stage iframe{ width:100%; height:100%; min-height:inherit; border:0; display:block; }
.sq__foot{ background:#F1E9DA; padding:12px 18px; font-size:0.84rem;
  color:var(--charcoal); text-align:center; margin:0 !important; }
.sq__foot a{ color:var(--clay-deep); border-bottom:1px solid var(--clay-deep); }
body.sq-open{ overflow:hidden; }

/* ---------- 9. FOOTER ------------------------------------- */

.footer-top{
  grid-template-columns:1.15fr 1fr !important;
  gap:clamp(30px,4vw,56px) !important;
  padding:clamp(46px,5vw,64px) clamp(24px,5vw,40px) !important;
  align-items:start !important;
}
@media(max-width:860px){ .footer-top{ grid-template-columns:1fr !important; } }

.quote-block blockquote{
  font-family:'Playfair Display',serif; font-size:1.25rem; line-height:1.5;
  font-style:italic; color:var(--ink);
}
.quote-block cite{ display:block; margin-top:12px; font-style:normal;
  font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--charcoal); }

.foot-signup{ }
.foot-signup .eyebrow{ display:block; margin-bottom:10px; }
.foot-signup h4, .foot-signup .fs-h{ font-family:'Playfair Display',serif; font-size:1.2rem;
  font-weight:500; line-height:1.35; margin-bottom:8px; }
.foot-signup p{ color:var(--charcoal); font-weight:300; font-size:0.9rem;
  line-height:1.6; margin-bottom:16px; }
.signup-row{ display:flex; gap:8px; flex-wrap:wrap; }
.signup-row input{
  flex:1 1 200px; min-width:0; border:1px solid rgba(32,28,24,0.22);
  padding:14px 16px; font-family:inherit; font-size:0.9rem;
  background:#fff; color:var(--ink); border-radius:2px;
}
.signup-row input::placeholder{ color:#8f857d; }
.signup-row button{ padding:14px 26px; border-radius:2px; flex:0 0 auto; }
.signup-msg{ display:none; margin-top:12px; font-size:0.88rem; color:var(--clay-deep); }
.signup-msg.show{ display:block; }
.signup-msg.err{ color:#9B3B2E; }
.signup-fine{ margin-top:10px; font-size:0.78rem; color:var(--charcoal); opacity:0.85; }

.footer-bottom{ flex-wrap:wrap; gap:12px; }
.footer-bottom .links a{ border-bottom:1px solid transparent; }
.footer-bottom .links a:hover{ border-bottom-color:currentColor; }

/* ---------- 10. CONTACT ----------------------------------- */

.contact-band{
  background:var(--cream-deep); padding:clamp(56px,6vw,86px) clamp(24px,5vw,40px);
  text-align:center; border-top:1px solid var(--line);
}
.contact-inner{ max-width:620px; margin:0 auto; }
.contact-inner h2{ font-size:clamp(1.7rem,3.2vw,2.2rem); margin-bottom:14px; }
.contact-inner p{ color:var(--charcoal); font-weight:300; line-height:1.75; margin-bottom:24px; }
.contact-mail{
  display:inline-block; font-family:'Playfair Display',serif; font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:var(--clay-deep); border-bottom:1px solid var(--clay-deep); padding-bottom:3px;
  word-break:break-word;
}
.contact-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* ---------- 11. THE OFFER POPUP --------------------------- */

.pop{ position:fixed; inset:0; z-index:140; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(26,22,18,0.6); }
.pop.open{ display:flex; }
.pop__card{
  background:var(--cream); max-width:470px; width:100%; position:relative;
  padding:clamp(30px,5vw,44px) clamp(24px,5vw,40px);
  border:1px solid var(--clay); outline:1px solid var(--clay);
  outline-offset:6px; border-radius:2px;
  max-height:calc(100dvh - 2.5rem); overflow-y:auto;
  box-shadow:0 30px 70px rgba(26,22,18,0.4); text-align:center;
}
.pop__close{
  position:absolute; top:6px; right:6px; width:44px; height:44px;
  background:none; color:var(--charcoal); font-size:1rem; border-radius:50%;
}
.pop__close:hover{ background:rgba(32,28,24,0.07); color:var(--ink); }
.pop__art{ width:96px; height:96px; margin:0 auto 6px;
  background:url("bot-wreath.svg") no-repeat center / contain;
  color:var(--bot); opacity:0.55; }
.pop__card .eyebrow{ display:block; margin-bottom:10px; }
.pop__card h3{ font-size:clamp(1.4rem,3.4vw,1.75rem); line-height:1.25; margin-bottom:12px; }
.pop__card > p{ color:var(--charcoal); font-weight:300; line-height:1.7;
  font-size:0.95rem; margin-bottom:22px; }
.pop__card .signup-row{ justify-content:center; }
.pop__card .signup-row input{ flex:1 1 100%; }
.pop__card .signup-row button{ flex:1 1 100%; }
.pop__no{
  display:block; width:100%; margin-top:14px; background:none;
  font-size:0.82rem; color:var(--charcoal); text-decoration:underline;
  padding:10px; min-height:44px;
}

/* ---------- 12. SMALL FIXES ------------------------------- */

.amazon-note{ display:none; }          /* "placeholder for now" was visible to buyers */
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 18px; z-index:200; }
.skip:focus{ left:0; }

@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .journal-card, .way-card{ transition:none; }
  .journal-card:hover, .way-card:hover{ transform:none; }
}

/* ---------- 13. UNIFY THE PROMO BAR ----------------------- */
/* index used clay, articles used near-black. Same bar, one colour,
   and dark so the new cream nav band reads as a separate layer. */
.glow-banner{
  background-color:#211D19 !important;
  background-image:linear-gradient(90deg,#211D19 0%,#33291F 100%) !important;
  border-bottom:1px solid rgba(200,169,106,0.5) !important;
  box-shadow:none !important;
}
.glow-banner-inner{ max-width:var(--shell); }
.glow-banner-lead{ color:#C8A96A !important; }
.glow-banner-sub{ color:#DCD0BC !important; }
.glow-banner .signup-msg{
  width:100%; text-align:center; color:#E9DEC9; font-size:0.86rem;
  margin-top:8px; line-height:1.5;
}
.glow-banner .signup-msg.err{ color:#F0C0B4; }
.glow-banner .signup-msg strong{ color:#fff; }

/* ---------- 14. THE TINY UPPERCASE SECTION HEADINGS ------- */
/* Several sections labelled themselves at 13.6px. They are titles,
   so they are now sized like titles. */
.benefits > h2,
.whats-inside > h2,
.testimonials > h2{
  font-size:clamp(1.6rem,3vw,2.15rem) !important;
  letter-spacing:0.01em !important;
  text-transform:none !important;
  color:var(--ink) !important;
  font-weight:600 !important;
  font-family:'Playfair Display',serif !important;
  margin-bottom:16px !important;
}
.benefits > .sub{ margin-top:0 !important; }
.benefit h3{ letter-spacing:0.1em !important; text-transform:uppercase; font-size:0.82rem !important; color:var(--clay-deep); }
.benefit-icon{ font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--clay-deep); }

/* ---------- 15. WIDE-SCREEN CAPS ON THE OTHER PAGES ------- */
.book-hero, .buy-card, .chapters, .benefits-grid,
.t-grid, .apply-wrap, .booking-steps{ margin-left:auto; margin-right:auto; }
@media(min-width:1500px){
  .book-hero{ padding-left:0; padding-right:0; }
}

/* ---------- 16. PROMO BAR STYLES ------------------------- */
/* These lived in an inline <style> inside the banner markup on every
   page, which is why they had drifted apart. They now live here once. */
.glow-banner{ background-color:#211D19; color:#fff; position:relative; z-index:60; }
.glow-banner-inner{
  margin:0 auto; padding:12px 58px 12px 40px;
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
}
.glow-banner-text{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0; }
.glow-banner-lead{
  font-family:'Playfair Display',serif; font-size:1.02rem; font-weight:500; white-space:nowrap;
}
.glow-banner-sub{ font-size:0.88rem; font-weight:300; }
.glow-banner-form{ display:flex; gap:8px; }
.glow-banner-form input{
  border:1px solid transparent; padding:13px 14px; font-family:inherit; font-size:0.88rem;
  background:#fff; color:#201C18; border-radius:2px; width:220px; min-height:44px;
}
.glow-banner-form input::placeholder{ color:#6d645d; }
.glow-banner-btn{
  background:#C8A96A; color:#241F1A; border:none; cursor:pointer; min-height:44px;
  padding:12px 22px; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:600; border-radius:2px; white-space:nowrap; font-family:inherit;
}
.glow-banner-btn:hover{ background:#D8BC80; }
.glow-banner-btn[disabled]{ opacity:0.7; cursor:default; }
.glow-banner-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#DCD0BC; font-size:0.95rem; cursor:pointer;
  width:44px; height:44px; border-radius:50%; line-height:1;
}
.glow-banner-close:hover{ color:#fff; background:rgba(255,255,255,0.12); }
.glow-banner.dismissed{ display:none; }
@media(max-width:900px){
  .glow-banner-inner{ padding:12px 50px 12px 20px; gap:12px; }
  .glow-banner-text{ justify-content:center; text-align:center; width:100%; gap:4px; flex-direction:column; }
  .glow-banner-form{ width:100%; flex-wrap:wrap; }
  .glow-banner-form input{ flex:1 1 160px; width:auto; min-width:0; }
  .glow-banner-btn{ flex:1 1 100%; }
}

/* ---------- 17. TAP TARGETS ------------------------------ */
.navbar .nav-links a{ display:inline-block; padding:12px 2px; }
.footer-bottom .links a{ display:inline-block; padding:12px 0; }
.footer-bottom{ padding-top:10px; padding-bottom:10px; }
.back-to-top{ display:inline-block !important; padding:12px 0; }
.toc-item{ min-height:48px; }
.pop__close, .sq__close{ min-width:44px; min-height:44px; }
.signup-row input{ min-height:48px; }
.signup-row button{ min-height:48px; }
.quiz-close, .quiz-back{ min-width:44px; min-height:44px; }
.contact-mail{ padding:10px 0; }

/* nav collapses earlier — at 1024 the links plus the button overran */
@media(max-width:1080px){
  .navbar .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--cream-deep); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 20px 18px;
    box-shadow:0 18px 30px rgba(32,28,24,0.12);
  }
  .navbar.open .nav-links{ display:flex; }
  .nav-toggle{ display:flex; }
  .navbar .nav > .btn{ display:none; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:15px 2px; }
  .nav-links .nav-book a{
    background:#A8683F; color:#fff; text-align:center; border-radius:2px; padding:15px; margin-top:12px;
  }
}
@media(min-width:1081px){ .nav-links .nav-book{ display:none; } }

/* ---------- 18. SMALL-SCREEN GRID HARDENING -------------- */
/* The grid min-content trap: a fixed-width image inside a 1fr column
   refuses to shrink and pushes the row wider than the viewport. */
.book-hero, .buy-card, .diary-inner, .pair, .chapters, .benefits-grid{ }
.book-hero > *, .buy-card > *, .diary-inner > *,
.pair > *, .chapter > *, .benefit > *{ min-width:0; }
@media(max-width:820px){
  .book-hero img, .buy-card img, .diary-cover img{ max-width:100%; }
}
@media(max-width:820px){
  .book-hero{ grid-template-columns:1fr !important; gap:32px !important; }
  .buy-card{ grid-template-columns:1fr !important; }
  .buy-card-img{ padding:28px !important; }
  .buy-card-body{ padding:32px 26px !important; }
}
@media(max-width:600px){
  .book-hero{ padding-left:20px !important; padding-right:20px !important; }
  .benefits-grid{ grid-template-columns:1fr !important; }
  .chapter{ grid-template-columns:44px 1fr !important; gap:14px !important; }
}

/* decorative corner must never push the page wide */
@media(max-width:1000px){ .botcorner > .botcorner-art{ display:none; } }
.botcorner{ overflow:hidden; }

/* ---------- 19. CONTRAST + LEGIBILITY -------------------- */
/* Audience is women 40-65. Presbyopia is about stroke weight and
   x-height as much as colour, so the small type goes up and the
   Light weights go away. */
.btn-clay{ background:#96562F !important; }      /* was #A8683F = 4.45:1 on white */
.btn-clay:hover{ background:#7E4726 !important; }
.eyebrow{ font-size:0.86rem !important; }
.btn{ font-size:0.86rem !important; }
.trust-note, .buy-guarantee, .amazon-note, .diary-note,
.signup-fine, .breadcrumb, .footer-bottom{ font-size:0.86rem !important; }
.footer-bottom .links{ font-size:0.82rem !important; }
.book-hero-copy .byline, .book-feature-copy .byline{ font-size:0.98rem !important; }
.journal-card .tag, .article .tag, .toc-item .tag{ font-size:0.82rem !important; }
.way-card .learn, .journal-card .rd, .journal-teaser .head a{ font-size:0.84rem !important; }
body{ font-weight:400; }
p, li{ font-weight:400 !important; }

/* breadcrumb + odd small controls */
.breadcrumb a{ display:inline-block; padding:10px 0; }
.quiz-close{ width:44px !important; height:44px !important; }
.quiz-back{ min-height:44px; padding:10px 4px; }
button[class*="another"], .noticing button, .another{ min-height:44px; padding:10px 14px; }

/* gradient fallbacks for panels that only had a gradient */
.intro-panel{ background-color:#D9C6AA; }
.intro-panel.right{ background-color:#BCA791; }
.hero-image{ background-color:#E3D3BC; }
.way-card .way-img--cover{ background-color:#EDE1CE; }

.faq-q{ min-height:48px; }
button{ min-height:44px; }
.glow-banner-close{ min-height:44px; }

/* ---------- 20. Z-INDEX ORDER ---------------------------- */
/* The floating gua-sha widget sits at 200/201. The new modals must
   be above it, and it must get out of the way while one is open. */
.sq{ z-index:400 !important; }
.pop{ z-index:420 !important; }

/* ---------- 21. FINAL LEGIBILITY PASS -------------------- */
/* Nothing carrying a sentence sits under 14px. The only exception is
   the brand lockup under the monogram, which is a wordmark. */
.eyebrow{ font-size:0.9rem !important; color:#7A4A2C !important; }   /* was 4.29:1 */
.btn, .btn-clay, .btn-ink, .btn-outline, .btn-gold, .btn-ghost,
.glow-banner-btn, .quiz-back, .quiz-error, .pop__no,
.signup-fine, .diary-note, .amazon-note, .trust-note, .buy-guarantee,
.breadcrumb, .footer-bottom, .footer-bottom .links,
.journal-card .rd, .way-card .learn, .intro-copy .more,
.cta-band .note, .bookband-price .unit, .diary-price .unit,
.journal-teaser .head a, .back-to-top, .toc-item .rt{
  font-size:0.9rem !important;
}
.brand-text .sub{ font-size:0.72rem !important; letter-spacing:0.18em !important; }

/* inline text links that act as buttons get a real target */
.intro-copy .more, .way-card .learn, .journal-card .rd,
.journal-teaser .head a, .back-to-top, .bookband-alt a{
  display:inline-block; padding:11px 0;
}

/* ---------- 22. 320px HARDENING -------------------------- */
/* .btn had white-space:nowrap plus 30px of side padding, which is
   wider than a 320px screen once the label is long. */
@media(max-width:430px){
  .btn{ white-space:normal !important; padding:15px 18px !important; text-align:center; }
  .book-actions .btn, .diary-actions .btn, .contact-actions .btn,
  .hero-actions .btn, .book-teaser-actions .btn, .book-feature-actions .btn{
    width:100%; display:block;
  }
  .footer-bottom{ padding:14px 20px !important; }
}
.footer-bottom > *{ min-width:0; }
.footer-bottom span{ overflow-wrap:anywhere; }
.footer-bottom .links{ flex-wrap:wrap; gap:8px 18px; }

/* ---------- 23. IMAGE SIZE CAPS RESTORED ----------------- */
/* Section 18's max-width:100% had overridden the design caps, so the
   covers rendered ~35% larger than the sizes attribute promised. */
.diary-cover img{ max-width:330px; }
@media(min-width:821px){
  .book-hero-img img{ max-width:380px; }
}

/* ============================================================
   ROUND TWO — Aug 3
   ============================================================ */

/* ---------- 24. THE THREE FEATURE BANDS ------------------ */
/* Replaces the small card grid. Same treatment Henry liked on the
   diary band, alternating light / dark / light so the page breathes. */

.ways-head{ padding:clamp(52px,5vw,74px) 40px; text-align:center; }
.ways-head h2{
  font-family:'Playfair Display',serif; font-weight:600;
  font-size:clamp(1.9rem,4vw,2.8rem); color:var(--ink); margin-bottom:14px;
}
.ways-head .ways-sub{
  color:var(--charcoal); max-width:540px; margin:0 auto; line-height:1.7; font-size:1.02rem;
}

.feature{
  background-color:var(--cream-deep);
  padding:clamp(48px,6vw,84px) clamp(24px,5vw,40px);
  position:relative; overflow:hidden;
}
.feature + .feature{ border-top:1px solid rgba(32,28,24,0.08); }
.feature-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:0.78fr 1fr; gap:clamp(32px,5vw,64px);
  align-items:center; position:relative; z-index:1;
}
.feature-inner > *{ min-width:0; }
.feature:nth-of-type(even) .feature-inner{ direction:rtl; }
.feature:nth-of-type(even) .feature-inner > *{ direction:ltr; }

.feature-art{ display:flex; justify-content:center; }
.feature-art img{
  width:100%; max-width:360px; height:auto; border-radius:3px;
  box-shadow:0 3px 8px rgba(32,28,24,0.16), 0 24px 54px rgba(32,28,24,0.28);
}
.feature-art--photo img{ max-width:420px; border-radius:3px; }

.feature-copy .eyebrow{ display:block; margin-bottom:12px; }
.feature-copy h2{
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; margin-bottom:8px; color:var(--ink);
}
.feature-copy .byline{
  font-style:italic; color:var(--clay-deep); font-size:1rem; margin-bottom:20px;
}
.feature-copy .byline em{ font-style:italic; }
.feature-copy > p{ color:var(--charcoal); line-height:1.85; margin-bottom:22px; }
.feature-list{ list-style:none; margin:0 0 26px; padding:0; }
.feature-list li{
  color:var(--charcoal); font-size:0.98rem; line-height:1.6;
  padding:7px 0 7px 26px; position:relative;
}
.feature-list li::before{
  content:"\2726"; position:absolute; left:0; color:var(--clay); font-size:0.8rem; top:10px;
}
.feature-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.feature-price .amt{ font-family:'Playfair Display',serif; font-size:2.3rem; line-height:1; color:var(--clay-deep); }
.feature-price .unit{ font-size:0.9rem; color:var(--charcoal); letter-spacing:0.04em; }
.feature-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* dark variant — the treatment he liked */
.feature--dark{
  background-color:#2A241E;
  background-image:linear-gradient(165deg,#26211C 0%,#332B23 55%,#241F1A 100%);
  color:#F3EADB;
}
.feature--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 28% 42%, rgba(200,169,106,0.20), transparent 62%);
}
.feature--dark .eyebrow{ color:#C8A96A !important; }
.feature--dark h2{ color:#F3EADB; }
.feature--dark .byline{ color:#C8BCA6; }
.feature--dark .byline em{ color:#C8A96A; }
.feature--dark > .feature-inner > .feature-copy > p{ color:#DCD0BC; }
.feature--dark .feature-list li{ color:#DCD0BC; }
.feature--dark .feature-list li::before{ color:#C8A96A; }
.feature--dark .feature-price .amt{ color:#C8A96A; }
.feature--dark .feature-price .unit{ color:#C8BCA6; }
.feature--dark .feature-art img{ box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 28px 62px rgba(0,0,0,0.55); }
.btn-gold{ background:#C8A96A; color:#241F1A; font-weight:600; }
.btn-gold:hover{ background:#D8BC80; }
.btn-ghost{ background:transparent; color:#F3EADB; border:1px solid rgba(243,234,219,0.5); padding:13px 29px; }
.btn-ghost:hover{ background:rgba(243,234,219,0.14); }

@media(max-width:860px){
  .feature-inner{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .feature:nth-of-type(even) .feature-inner{ direction:ltr; }
  .feature-list{ text-align:left; max-width:360px; margin-inline:auto; }
  .feature-price, .feature-actions{ justify-content:center; }
  .feature-art img{ max-width:260px; }
}

/* ---------- 25. THE JOURNEY ROW BECOMES A ROUTER --------- */
/* It had no colour and, more to the point, nothing to click. Each
   card now goes somewhere. */

.journey-sub{
  color:var(--charcoal); max-width:520px; margin:-34px auto 46px;
  line-height:1.7; font-size:1.02rem;
}
.journey-grid{ gap:20px; }
.journey-item{
  padding:34px 24px 28px !important; border-radius:3px;
  border:1px solid rgba(32,28,24,0.10);
  display:flex !important; flex-direction:column; align-items:center; text-align:center;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow:0 8px 22px rgba(32,28,24,0.05);
}
.journey-item::after{ display:none !important; }
.journey-item:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(32,28,24,0.14);
}
.journey-item h3{ margin-bottom:10px !important; }
.journey-item p{ flex:1; max-width:none !important; font-size:0.96rem !important; }
.journey-go{
  margin-top:16px; font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:600; padding-bottom:3px; border-bottom:1px solid currentColor;
}
.journey-icon{ margin-bottom:18px !important; }

.journey-item.j1{ background:#F6EDE2; border-color:rgba(189,131,88,0.28); }
.journey-item.j1 .journey-icon{ border-color:rgba(189,131,88,0.5); color:#8A5734; }
.journey-item.j1 .journey-go{ color:#7A4A2C; }
.journey-item.j2{ background:#EAF2F0; border-color:rgba(60,122,117,0.24); }
.journey-item.j2 .journey-icon{ border-color:rgba(60,122,117,0.45); color:#2F625E; }
.journey-item.j2 .journey-go{ color:#2F625E; }
.journey-item.j3{ background:#F5EAEA; border-color:rgba(150,86,47,0.24); }
.journey-item.j3 .journey-icon{ border-color:rgba(150,86,47,0.45); color:#8C4A38; }
.journey-item.j3 .journey-go{ color:#8C4A38; }
.journey-item.j4{ background:#F1EFE6; border-color:rgba(69,62,55,0.20); }
.journey-item.j4 .journey-icon{ border-color:rgba(69,62,55,0.4); color:#57503F; }
.journey-item.j4 .journey-go{ color:#4B4437; }

@media(max-width:860px){ .journey-sub{ margin-top:-24px; } }

/* ---------- 26. HERO + QUIZ COPY ------------------------- */
.hero-actions{ margin-top:34px; }
.btn-quiz{ padding:17px 34px !important; }
.hero-note{
  margin-top:14px !important; font-size:0.95rem !important; color:var(--charcoal);
  font-style:italic; max-width:400px;
}
@media(max-width:860px){ .hero-note{ margin-inline:auto; } }

/* ---------- 27. THE POPUP LETTER ------------------------- */
.pop__quote{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.22rem; line-height:1.45; color:var(--clay-deep);
  margin:0 0 18px; padding:16px 0; position:relative;
}
.pop__quote::before, .pop__quote::after{
  content:""; display:block; width:56px; height:1px;
  background:var(--clay); opacity:0.5; margin:0 auto;
}
.pop__quote::before{ margin-bottom:16px; }
.pop__quote::after{ margin-top:16px; }
.pop__ps{
  font-size:0.92rem !important; color:var(--charcoal); font-style:italic;
  margin-bottom:22px !important; line-height:1.65;
}
.pop__card > p{ margin-bottom:14px; }

/* ---------- 28. THE COACHING PHOTO ----------------------- */
/* odette-coaching.jpg is only 300x208. At feature size it was being
   upscaled 1.4x. Capped to stay sharp, and framed so the smaller
   photo reads as deliberate. Replace the source and raise this. */
.feature-art--photo img{ max-width:340px; }
.feature-art--photo{ position:relative; padding:12px; }
.feature-art--photo::before{
  content:""; position:absolute; left:0; top:24px; bottom:24px; right:24px;
  border:1px solid rgba(189,131,88,0.55); pointer-events:none;
}
@media(max-width:860px){ .feature-art--photo::before{ display:none; } }

/* ---------- 29. QUIZ EMAIL STEP -------------------------- */
.quiz-email-note{
  color:var(--charcoal); font-weight:400; line-height:1.7;
  font-size:0.95rem; max-width:400px; margin:-12px 0 20px;
}
.quiz-skip{
  display:block; background:none; margin-top:16px; padding:11px 0;
  font-size:0.9rem; color:var(--clay-deep); text-decoration:underline;
  text-underline-offset:3px; min-height:44px;
}
.quiz-skip:hover{ color:var(--ink); }

/* ============================================================
   ROUND FOUR — Aug 3
   Full-bleed bands with capped inner content (the bands were
   stopping short on desktop because the SECTION was capped, not
   its contents), colour throughout, and no plain white anywhere.
   ============================================================ */

:root{
  --rose:#F3E4E2; --rose-ink:#8C4A45;
  --lilac:#ECE6F1; --lilac-ink:#5D4B72;
  --sage:#E6EFE7; --sage-ink:#3F6A4C;
  --sand:#F5EADA; --sand-ink:#8A5734;
  --sky:#E4EEF2; --sky-ink:#2F6076;
  --gold:#C8A96A;
}

/* ---------- 30. FULL-BLEED BANDS ------------------------- */
.footer-top{ max-width:none !important; margin:0 !important; }
.footer-top-inner{
  max-width:var(--shell); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,4vw,60px); align-items:center;
}
.footer-top-inner > *{ min-width:0; }
@media(max-width:860px){ .footer-top-inner{ grid-template-columns:1fr; } }

/* the free-gift band gets its own colour so it stands apart */
.footer-top{
  background-color:#2E2A3A;
  background-image:linear-gradient(135deg,#332C3F 0%,#2A2733 45%,#3A2E33 100%);
  padding:clamp(52px,6vw,80px) clamp(24px,5vw,40px) !important;
  border-top:1px solid rgba(200,169,106,0.35);
  position:relative; overflow:hidden;
}
.footer-top::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 78% 30%, rgba(200,169,106,0.20), transparent 60%);
}
.footer-top-inner{ position:relative; z-index:1; }
.footer-top .quote-block blockquote{
  color:#F3EADB; font-size:clamp(1.3rem,2.6vw,1.65rem); line-height:1.45;
}
.footer-top .quote-block cite{ color:#C8BCA6; }
.footer-top .foot-signup .eyebrow{ color:var(--gold) !important; }
.footer-top .foot-signup h4,
.footer-top .foot-signup .fs-h{ color:#F3EADB; font-size:1.35rem; }
.footer-top .foot-signup p{ color:#DCD0BC; }
.footer-top .signup-fine{ color:#B3A894; }
.footer-top .signup-msg{ color:#E9DEC9; }
.footer-top .signup-msg.err{ color:#F0C0B4; }
.footer-top .signup-row input{ border-color:transparent; }

/* ---------- 31. THE QUIZ STRIP --------------------------- */
/* Was a tall band at the bottom of the page. Now a slim strip high
   up, heading left and the button right. */
.strip{
  background-color:#8A5734;
  background-image:linear-gradient(100deg,#8A5734 0%,#A2683C 55%,#BD8358 100%);
  padding:20px clamp(20px,5vw,40px);
  border-bottom:1px solid rgba(32,28,24,0.12);
}
.strip-inner{
  max-width:var(--shell); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px 28px; flex-wrap:wrap;
}
.strip-copy{ min-width:0; }
.strip-copy h2{
  font-family:'Playfair Display',serif; font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.45rem); color:#FFF7EA; line-height:1.25; margin:0;
}
.strip-copy p{ margin:4px 0 0; color:#F2DFC8; font-size:0.95rem; line-height:1.5; }
.strip .btn-gold{ flex:0 0 auto; }
@media(max-width:640px){
  .strip-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .strip .btn-gold{ width:100%; }
}

/* ---------- 32. THE PROMO BAR, IN COLOUR ----------------- */
/* Black read as browser chrome and got ignored. Capturing the email
   is the most valuable thing on arrival, so it looks like it. */
.glow-banner{
  background-color:#DCD3EC !important;
  background-image:linear-gradient(100deg,#E7E0F2 0%,#DBD0EC 52%,#CDBEE4 100%) !important;
  border-bottom:1px solid rgba(93,75,114,0.38) !important;
}
.glow-banner-lead{ color:#332147 !important; }
.glow-banner-sub{ color:#453660 !important; }
.glow-banner-btn{ background:#5D4B72 !important; color:#FAF6EE !important; }
.glow-banner-btn:hover{ background:#4A3A5E !important; }
.glow-banner-close{ color:#4E3E68 !important; }
.glow-banner-close:hover{ color:#332147 !important; background:rgba(51,33,71,0.10) !important; }
.glow-banner .signup-msg{ color:#3A2C50 !important; }

/* ---------- 33. NO PLAIN WHITE --------------------------- */
/* White reads as unfinished. Every input, card and panel sits on
   warm paper instead. */
input, textarea, select,
.cta-input-row input, .quiz-email-row input, .signup-row input,
.glow-banner-form input{
  background:#FCF8F0 !important;
}
.square-booking, .home-square-booking{ background:var(--cream-deep) !important; }
.quiz-overlay .quiz-card, .quiz-card{ background:var(--cream) !important; }
.paper{ background:var(--cream); }
.sq__card{ background:var(--cream); }

/* ---------- 34. THE FOUR PRINCIPLES ---------------------- */
.tenets{
  background-color:#EFE6D6;
  padding:clamp(56px,6vw,90px) clamp(24px,5vw,40px);
  border-top:1px solid rgba(32,28,24,0.07);
}
.tenets-inner{ max-width:1080px; margin:0 auto; }
.tenets-inner > h2{
  font-family:'Playfair Display',serif; font-weight:600; text-align:center;
  font-size:clamp(1.6rem,3.2vw,2.2rem); color:var(--ink); margin-bottom:40px;
}
.tenets-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tenets-grid > *{ min-width:0; }
.tenet{
  padding:30px 24px 28px; border-radius:3px; border:1px solid rgba(32,28,24,0.10);
  box-shadow:0 8px 22px rgba(32,28,24,0.05);
}
.tenet .n{
  display:block; font-family:'Playfair Display',serif; font-size:1.5rem;
  margin-bottom:10px; opacity:0.85;
}
.tenet h3{ font-size:1.08rem; line-height:1.3; margin-bottom:10px; }
.tenet p{ font-size:0.95rem; line-height:1.65; color:var(--charcoal); }
.tenet.t1{ background:var(--sand); border-color:rgba(138,87,52,0.28); }
.tenet.t1 .n, .tenet.t1 h3{ color:var(--sand-ink); }
.tenet.t2{ background:var(--sage); border-color:rgba(63,106,76,0.26); }
.tenet.t2 .n, .tenet.t2 h3{ color:var(--sage-ink); }
.tenet.t3{ background:var(--rose); border-color:rgba(140,74,69,0.24); }
.tenet.t3 .n, .tenet.t3 h3{ color:var(--rose-ink); }
.tenet.t4{ background:var(--lilac); border-color:rgba(93,75,114,0.26); }
.tenet.t4 .n, .tenet.t4 h3{ color:var(--lilac-ink); }
@media(max-width:900px){ .tenets-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .tenets-grid{ grid-template-columns:1fr; } }

.about{ background-color:var(--cream-deep) !important; }
.about-more{ margin-top:20px; }
.about-more a{
  font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  color:var(--clay-deep); border-bottom:1px solid var(--clay-deep);
  display:inline-block; padding:11px 0 3px;
}

/* ---------- 35. THE FAQ, BEAUTIFIED ---------------------- */
.faq{
  background-color:#EAF0EC;
  background-image:linear-gradient(170deg,#EDF2EE 0%,#E7EDE9 60%,#EFE9E0 100%);
  position:relative; overflow:hidden;
  padding:clamp(60px,7vw,96px) clamp(20px,5vw,40px) !important;
}
.faq::before{
  content:""; position:absolute; top:-40px; left:-50px; width:300px; height:300px;
  background:url("bot-corner.svg") no-repeat center / contain;
  color:var(--bot); opacity:0.10; pointer-events:none; transform:scaleX(-1);
}
.faq > h2{
  font-family:'Playfair Display',serif !important; font-weight:600 !important;
  font-size:clamp(1.7rem,3.4vw,2.3rem) !important; letter-spacing:0.01em !important;
  text-transform:none !important; color:var(--ink) !important; margin-bottom:12px !important;
}
.faq .faq-sub{ position:relative; z-index:1; font-size:1.02rem; }
.faq-list{ position:relative; z-index:1; border-top:none !important; max-width:820px !important; }
.faq-item{
  border-bottom:none !important; border:1px solid rgba(32,28,24,0.10);
  border-radius:3px; margin-bottom:12px; overflow:hidden;
  background:var(--cream);
  box-shadow:0 6px 18px rgba(32,28,24,0.05);
  transition:box-shadow .25s ease, transform .25s ease;
}
.faq-item:hover{ box-shadow:0 14px 30px rgba(32,28,24,0.10); }
.faq-q{ padding:22px 22px !important; }
.faq-a-inner{ padding:0 22px 22px !important; font-size:1rem !important; }
.faq-item.open{ box-shadow:0 16px 34px rgba(32,28,24,0.12); }
.faq-item::before{
  content:""; display:block; height:3px;
}
.faq-item.faqn1::before{ background:var(--sand-ink); }
.faq-item.faqn2::before{ background:var(--sage-ink); }
.faq-item.faqn3::before{ background:var(--rose-ink); }
.faq-item.faqn4::before{ background:var(--lilac-ink); }
.faq-item.faqn5::before{ background:var(--sky-ink); }
.faq-item.faqn6::before{ background:var(--clay-deep); }
.faq-item::before{ opacity:0; transition:opacity .25s ease; }
.faq-item:hover::before, .faq-item.open::before{ opacity:1; }

/* ---------- 36. THE CONTACT BAND ------------------------- */
.contact-band{
  background-color:#F1E4E2;
  background-image:linear-gradient(160deg,#F5E9E5 0%,#EFE2E0 55%,#EFE6D6 100%);
  text-align:left !important;
  padding:clamp(56px,6vw,88px) clamp(24px,5vw,40px) !important;
}
.contact-inner{
  max-width:1020px !important; margin:0 auto;
  display:grid; grid-template-columns:0.72fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.contact-inner > *{ min-width:0; }
.contact-photo img{
  width:100%; height:auto; border-radius:3px; display:block;
  box-shadow:0 3px 10px rgba(32,28,24,0.16), 0 22px 48px rgba(32,28,24,0.20);
}
.contact-photo{ position:relative; padding:0 0 14px 14px; }
/* A true offset frame: it peeks out at the lower-left and tucks BEHIND the
   photograph on the other two sides, so no line is ever drawn across her. */
.contact-photo::before{
  content:""; position:absolute; left:0; bottom:0; top:14px; right:14px;
  border:1px solid rgba(140,74,69,0.45); pointer-events:none; z-index:0;
}
.contact-photo img{ position:relative; z-index:1; }
.contact-copy h2{ font-size:clamp(1.7rem,3.2vw,2.2rem); margin-bottom:14px; }
.contact-copy > p{ color:var(--charcoal); line-height:1.8; margin-bottom:24px; }
.contact-form{ display:block; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field{ display:block; margin-bottom:14px; min-width:0; }
.cf-field span{
  display:block; font-size:0.86rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--charcoal); margin-bottom:6px; font-weight:600;
}
.cf-field input, .cf-field textarea{
  width:100%; border:1px solid rgba(32,28,24,0.22); border-radius:2px;
  padding:14px 16px; font-family:inherit; font-size:0.98rem; color:var(--ink);
  min-height:48px; resize:vertical;
}
.cf-field input:focus, .cf-field textarea:focus{
  outline:2px solid var(--clay-deep); outline-offset:1px; border-color:transparent;
}
.contact-form .btn{ margin-top:4px; }
.contact-alt{ margin-top:16px; font-size:0.92rem; color:var(--charcoal); }
.contact-alt a{ color:var(--clay-deep); border-bottom:1px solid var(--clay-deep); }
.hp{ position:absolute; left:-9999px; }
@media(max-width:860px){
  .contact-inner{ grid-template-columns:1fr; }
  .contact-photo{ max-width:320px; margin-inline:auto; }
  .cf-row{ grid-template-columns:1fr; }
}

/* ---------- 37. THE READING ROOM, IN COLOUR -------------- */
.hue{ position:relative; }
.hue::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
}
.hue1::after{ background:var(--sand-ink); }
.hue2::after{ background:var(--rose-ink); }
.hue3::after{ background:var(--lilac-ink); }
.hue4::after{ background:var(--sky-ink); }
.hue5::after{ background:var(--sage-ink); }
.hue1{ background:linear-gradient(180deg,#FBF3E7 0%,var(--cream) 190px); }
.hue2{ background:linear-gradient(180deg,#FBEFEE 0%,var(--cream) 190px); }
.hue3{ background:linear-gradient(180deg,#F6F2F8 0%,var(--cream) 190px); }
.hue4{ background:linear-gradient(180deg,#EEF5F8 0%,var(--cream) 190px); }
.hue5{ background:linear-gradient(180deg,#EFF6F0 0%,var(--cream) 190px); }
.hue1 .tag{ color:var(--sand-ink) !important; }
.hue2 .tag{ color:var(--rose-ink) !important; }
.hue3 .tag{ color:var(--lilac-ink) !important; }
.hue4 .tag{ color:var(--sky-ink) !important; }
.hue5 .tag{ color:var(--sage-ink) !important; }
.hue1 > p.meta + p::first-letter{ color:var(--sand-ink); }
.hue2 > p.meta + p::first-letter{ color:var(--rose-ink); }
.hue3 > p.meta + p::first-letter{ color:var(--lilac-ink); }
.hue4 > p.meta + p::first-letter{ color:var(--sky-ink); }
.hue5 > p.meta + p::first-letter{ color:var(--sage-ink); }

.toc-item{ border-left:4px solid transparent; padding-left:14px !important; border-radius:2px; }
.toc1{ border-left-color:var(--sand-ink); } .toc1 .tag{ color:var(--sand-ink) !important; }
.toc2{ border-left-color:var(--rose-ink); } .toc2 .tag{ color:var(--rose-ink) !important; }
.toc3{ border-left-color:var(--lilac-ink); } .toc3 .tag{ color:var(--lilac-ink) !important; }
.toc4{ border-left-color:var(--sky-ink); }  .toc4 .tag{ color:var(--sky-ink) !important; }
.toc5{ border-left-color:var(--sage-ink); } .toc5 .tag{ color:var(--sage-ink) !important; }
.toc1:hover{ background:#FBF3E7; } .toc2:hover{ background:#FBEFEE; }
.toc3:hover{ background:#F6F2F8; } .toc4:hover{ background:#EEF5F8; }
.toc5:hover{ background:#EFF6F0; }

/* homepage teaser cards get the same hues */
.journal-grid .journal-card:nth-child(1){ background:#FBF3E7; }
.journal-grid .journal-card:nth-child(2){ background:#FBEFEE; }
.journal-grid .journal-card:nth-child(3){ background:#F6F2F8; }

/* ---------- 38. COACHING PAGE COLOUR --------------------- */
.how{ background-color:#EFE6D6; }
.how-note{ text-align:center; margin-top:28px; color:var(--charcoal); font-size:0.95rem; }
.how-note a{ color:var(--clay-deep); border-bottom:1px solid var(--clay-deep); }
.included{ background-color:var(--cream); }
.who{ background-color:#EAF0EC; }
.coach-hero{ background-color:var(--cream-deep); }

/* ---------- 39. TAG CONTRAST ----------------------------- */
/* aqua-deep #3C7A75 measured 4.41:1 at 13px — just under AA. */
.tag, .toc-item .tag, .article .tag, .journal-card .tag{
  color:#2F625E !important; font-size:0.86rem !important;
}

/* ---------- 40. FOOTER IS A BLOCK, NOT A GRID ------------ */
/* The original .footer-top was itself a grid; wrapping its contents
   left the wrapper sitting in column one with an empty column beside
   it — so the content read left-aligned instead of centred. */
.footer-top{ display:block !important; grid-template-columns:none !important; }

/* ---------- 41. THE REAL COACHING PHOTO ------------------ */
/* The 300x208 file is replaced by a 985px source, so the cap and the
   apologetic frame both come off — it now matches the two covers
   beside it instead of hiding behind a border. */
.feature-art--photo img{ max-width:460px !important; }
.feature-art--photo{ padding:0 !important; }
.feature-art--photo::before{
  left:auto; right:-14px; top:auto; bottom:-14px;
  width:58%; height:58%; border:1px solid rgba(189,131,88,0.5);
  border-top:none; border-left:none; z-index:-1;
}
.feature-art--photo img{
  box-shadow:0 3px 10px rgba(32,28,24,0.18), 0 26px 56px rgba(32,28,24,0.26);
}

/* ---------- 42. BAND RHYTHM ------------------------------ */
/* No two full-width bands may sit back to back on the same flat
   colour — that is what makes a page read as one long undifferentiated
   scroll. Alternating cream / cream-deep / tinted keeps the sections
   legible as sections. */
.journal-teaser{ background-color:#EFE9E0 !important; }
.diary .promise, .promise{ background-color:var(--cream-deep) !important; }
.buy{ background-color:#EFE6D6 !important; }
.benefits{ background-color:var(--cream) !important; }
.whats-inside{ background-color:#EDE9E1 !important; }
.book-hero{ background-color:var(--cream) !important; }
.testimonials{ background-color:#EAF0EC !important; }
/* .booking on coaching.html is a LIGHT section with dark text — do not
   darken it without restyling every child. Tinted instead. */
.booking{ background-color:#EDE9E1 !important; }
.footer-bottom{ background-color:#241F1A !important; color:#C8BCA6 !important; }
.footer-bottom a{ color:#DCD0BC !important; }
.footer-bottom a:hover{ color:#F3EADB !important; }
.included{ background-color:var(--cream) !important; }
.who{ background-color:#EAF0EC !important; }
.how{ background-color:#EFE6D6 !important; }
.coach-hero{ background-color:var(--cream-deep) !important; }
body.reading .journal-hero{ background-color:var(--cream-deep) !important; }

/* diary page rhythm: hero cream -> promise deep -> inside tint ->
   benefits cream -> permission deep -> buy sand */
#buy{ background-color:#EFE6D6 !important; }

/* ---------- 43. ONE PHOTO TREATMENT ---------------------- */
/* Every content photograph: same 3px radius, same two-stage shadow.
   Decorative SVG art and cover images inside dark bands keep their
   own deeper shadow, but nothing is left flat and unframed. */
.feature-art img, .about-img img, .contact-photo img,
.book-hero-img img, .buy-card-img img, .intro-panel img,
.book-feature-cover img, .way-card img{
  border-radius:3px;
  box-shadow:0 3px 10px rgba(32,28,24,0.16), 0 24px 52px rgba(32,28,24,0.22);
}
.hero-image img{ border-radius:0; box-shadow:none; }
.feature--dark .feature-art img{
  box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 28px 62px rgba(0,0,0,0.55);
}

/* ---------- 44. TABLET IMAGE CAPS ------------------------ */
/* Several source photographs top out at 900-1200px. Rather than
   upscale them (which invents nothing), the display size is capped on
   tablet so the browser never has to stretch them. */
@media(min-width:601px) and (max-width:1024px){
  .intro-panel{ max-height:520px; }
  .about-img img, .contact-photo img{ max-width:420px; margin-inline:auto; }
  .book-hero-img img, .feature-art img{ max-width:340px; }
}

/* ---------- 45. TABLET PANEL CAPS ------------------------ */
/* The intro panel and the buy-card cover both ran the full stacked
   width on tablet, asking for more pixels than the source photographs
   hold. Capped so the browser never stretches them. */
@media(max-width:1024px){
  .intro-panel{ max-width:560px; margin-inline:auto; }
  .buy-card-img img{ max-width:400px; margin-inline:auto; display:block; }
}

/* ---------- 46. THE 14px FLOOR --------------------------- */
/* Presbyopia starts around 40. This audience is 40-65, so nothing
   carrying a sentence sits below 14px anywhere on the site. The only
   exception is the wordmark line under the monogram, which is a logo. */
.footer-bottom a, .footer-bottom span,
.breadcrumb, .breadcrumb a,
.meta, .lbl, .was, .updated, .booking-note,
.sources, .rt, .cf-field span,
.benefit h3, .booking-step h3, .how-step h3,
.faq h2, .included h2, .who h2, .how h2, .promise h2,
.buy-list li, .quiz-option, .quiz-result-badge,
.legal .updated, .article .meta, .toc-item .rt{
  font-size:0.9rem !important;
}
.benefit h3, .booking-step h3, .how-step h3{ font-size:0.92rem !important; }
.faq h2, .included h2, .who h2, .how h2, .promise h2,
.benefits h2, .whats-inside h2, .book-feature h2{
  font-size:clamp(1.6rem,3.2vw,2.2rem) !important;
  letter-spacing:0.01em !important; text-transform:none !important;
  font-family:'Playfair Display',serif !important; font-weight:600 !important;
  color:var(--ink) !important;
}
.promise .script{ font-size:clamp(1.3rem,3vw,1.8rem) !important; }
em, .feature-copy .byline em{ font-size:inherit; }
a{ font-size:inherit; }
.nav-links a, .footer-bottom .links a{ font-size:0.9rem !important; }
/* the brand lockup is a wordmark, not copy — it stays small on purpose */
.brand-text .sub{ font-size:0.72rem !important; }
.sq__bar span, .sq__foot, .sq__foot a{ font-size:0.9rem !important; }
.footer-top cite em, cite em, .quote-block cite{ font-size:0.9rem !important; }
.included .inc-item h3, .inc-item h3, .who h3{ font-size:0.95rem !important; }
.booking-step p, .how-step p, .inc-item p, .benefit p{ font-size:0.94rem !important; }
.article .tag, .toc-item .tag, .journal-card .tag{ font-size:0.88rem !important; }
.included-sub{ text-align:center; color:var(--charcoal); max-width:540px;
  margin:-24px auto 44px; line-height:1.7; font-size:1.02rem; }
.included-item h3{ font-size:1.02rem !important; margin-bottom:6px; }

/* ---------- SECTION TINTS (Aug 6) — gentle warm→cool rhythm so no long
   cream stretch reads as a flat white box. Dark bands still anchor. ---------- */
.intro{ background-color:#F7EDE9 !important; }   /* soft blush — the 'I help women glow' welcome */
#the-book{ background-color:#F5EADA !important; } /* warm sand-gold under the book (was plain cream-deep) */
#coaching{ background-color:#EAF4F2 !important; } /* soft aqua — cool ground that plays off the two warm bands + the coaching photo */

/* ---------- LAYOUT / ALIGNMENT PASS (Aug 6, V15) ---------- */
/* Coffee-cup photo removed → story is now text-only; give the copy a
   comfortable centred reading column instead of a lopsided half-grid. */
.about-inner{ display:block !important; max-width:760px; margin-left:auto; margin-right:auto; }

/* Product bands stay centred for eyebrow/title/price/buttons, but the
   multi-line description reads better left-aligned (esp. for older eyes).
   Byline stays centred. */
.feature-copy > p:not(.byline){ text-align:left; }

/* "The Reading Room" heading + "Read them all" now centre as a unit,
   matching the other centred section intros. */
.journal-teaser .head{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }

/* Price: render the leading $ as a proper superior currency mark so it
   no longer sits high and tight against the numerals. */
.feature-price .amt .cur{ font-size:0.58em; vertical-align:0.36em; margin-right:0.06em; font-weight:inherit; letter-spacing:0; }

/* ---------- BANNER TEXT SIZE (Aug 6, V16) — audience is 40-65 and the
   free gift is the most important capture on arrival, so it reads BIG.
   clamp() keeps it from overflowing the 320px bar. ---------- */
.glow-banner-lead{ font-size:clamp(1.5rem,5.6vw,1.95rem) !important; line-height:1.12; }
.glow-banner-sub{ font-size:clamp(1rem,4vw,1.14rem) !important; font-weight:400 !important; line-height:1.42; }
.glow-banner-form input{ font-size:1rem !important; }        /* +readability, and 16px stops iOS zoom-on-focus */
.glow-banner-btn{ font-size:0.92rem !important; }
@media(max-width:900px){ .glow-banner-text{ gap:8px !important; } }

/* ---------- V17 — book price markdown + book.html promise CTA ---------- */
.feature-price .was{ font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--charcoal); text-decoration:line-through; opacity:0.6; align-self:baseline; }
.promise .btn.promise-cta{ display:inline-block; margin-top:30px; }

/* ---------- V18 — diary.html price label + text legibility for 40-65 ---------- */
.price-row .opt{ font-size:1rem; color:var(--charcoal); letter-spacing:0.02em; align-self:baseline; }
/* Hero body was thin 300 at ~16px — lift weight + size so older eyes read it easily */
.book-hero-copy p{ font-size:1.05rem !important; font-weight:400 !important; }
/* Product-page microcopy + benefit body nudged up from ~13-15px */
.trust-note, .buy-guarantee{ font-size:0.95rem !important; }
.benefit p{ font-size:1rem !important; }

/* diary.html book cross-sell band: warm sand so it does not blend into the promise section above (matches homepage book band) */
#get-the-book{ background-color:#F5EADA !important; }

/* ---------- V19 — coaching.html legibility (40-65) ---------- */
.inc-item p, .booking-step p{ font-size:1rem !important; }
.booking-step p{ font-weight:400 !important; }
.booking-note{ font-size:0.92rem !important; }

/* ---------- V22 — FAQ legibility + clearer toggles (outside-review feedback) ---------- */
.faq-q{ font-weight:500 !important; }              /* slightly bolder question titles */
.faq-q .icon{ font-size:1.6rem !important; }       /* bigger, clearer +/× toggle */
.faq-a-inner{ font-weight:400 !important; }         /* answers were thin 300 — heavier for 40-65 */

/* ================= TESTIMONIALS (V24) =================
   Dark espresso band so real social proof STOPS the scroll, with warm
   cream cards for maximum readability (audience 40-65). Sits right
   after the three offers on index, and just before booking on coaching. */
.tms{
  background-color:#2B2420 !important;
  background-image:linear-gradient(160deg,#332B25 0%,#2B2420 55%,#231D19 100%);
  padding:96px 40px;
}
.tms-inner{ max-width:1240px; margin:0 auto; text-align:center; }
.tms .tm-eyebrow{ color:#C8A96A !important; display:block; margin-bottom:14px; }
.tms h2{
  font-family:'Playfair Display',serif; color:#FAF6EE;
  font-size:clamp(1.7rem,4.4vw,2.5rem); line-height:1.18; margin:0 0 14px;
}
.tms-sub{ color:#D8CCBC; font-size:1.02rem; margin:0 auto 52px; max-width:560px; }
.tms h2 + .tm-grid{ margin-top:46px; }

.tm-grid{ display:grid; grid-template-columns:1fr; gap:22px; text-align:left; }
@media(min-width:760px){ .tm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; } }
@media(min-width:1100px){ .tm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.tm-card{
  position:relative; margin:0; min-width:0;
  background:#FAF6EE; border-radius:3px;
  padding:44px 30px 30px;
  box-shadow:0 14px 38px rgba(0,0,0,0.24);
  display:flex; flex-direction:column;
}
.tm-mark{
  position:absolute; top:10px; left:24px;
  font-family:'Playfair Display',serif; font-size:3.4rem; line-height:1;
  color:#8A5734; opacity:0.78;
}
.tm-card blockquote{
  margin:0 0 22px; border:none; padding:0;
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:1.08rem; line-height:1.62; color:#201C18;
}
.tm-card figcaption{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(138,87,52,0.24);
  display:flex; flex-direction:column; gap:3px;
}
.tm-name{ font-weight:600; font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; color:#8A5734; }
.tm-loc{ font-size:0.92rem; color:#5C5148; }
@media(max-width:600px){
  .tms{ padding:64px 20px; }
  .tm-card{ padding:40px 24px 26px; }
}

/* ---------- V25 — testimonial legibility + colour (40-65 audience) ---------- */
/* Italic serif is the least legible pairing for older eyes: size up and open
   the line-height so the elegance stays but the reading gets easy. */
.tm-card blockquote{ font-size:1.2rem !important; line-height:1.7 !important; }
.tm-name{ font-size:1rem !important; }
.tm-loc{ font-size:0.95rem !important; }
@media(min-width:1100px){ .tm-card blockquote{ font-size:1.14rem !important; } }

/* Cards were plain cream — give each a coloured top edge drawn from the
   site's existing hue family (same system as the Reading Room articles). */
.tm-card{ border-top:4px solid var(--tm-accent,#8A5734); }
.tm-grid .tm-card:nth-child(1){ --tm-accent:#8A5734; }  /* clay   */
.tm-grid .tm-card:nth-child(2){ --tm-accent:#8C4A45; }  /* rose   */
.tm-grid .tm-card:nth-child(3){ --tm-accent:#3F6A4C; }  /* sage   */
.tm-grid .tm-card:nth-child(4){ --tm-accent:#5D4B72; }  /* lilac  */
.tm-grid .tm-card:nth-child(5){ --tm-accent:#2F6076; }  /* sky    */
.tm-grid .tm-card:nth-child(6){ --tm-accent:#7A5C1F; }  /* bronze */
.tm-card .tm-mark{ color:var(--tm-accent,#8A5734); opacity:0.72; }
.tm-card .tm-name{ color:var(--tm-accent,#8A5734); }

/* ---------- V27 (Aug 7) — DESKTOP BANNER TIDY + MONOGRAM CENTERING ---------- */
/* The V16 size bump was for mobile legibility (audience 40-65) and should
   stay big on phones. On desktop those sizes made the top strip oversized
   and the row wrapped awkwardly. Desktop gets a slim, single-line strip;
   mobile keeps the big text. */
@media(min-width:901px){
  .glow-banner-inner{ padding:10px 60px 10px 40px !important; gap:22px !important; }
  .glow-banner-text{ gap:10px !important; }
  .glow-banner-lead{ font-size:1.08rem !important; line-height:1.2 !important; white-space:nowrap; }
  .glow-banner-sub{ font-size:0.95rem !important; font-weight:400 !important; line-height:1.4 !important; }
  .glow-banner-form input{ font-size:0.95rem !important; padding:11px 13px !important; width:210px !important; min-height:42px; }
  .glow-banner-btn{ font-size:0.82rem !important; padding:11px 20px !important; min-height:42px; }
}
/* The confirmation span is empty until submit — don't let it reserve a full
   row (that was leaving a blank gap that made the strip look broken on desktop). */
.glow-banner .signup-msg{ display:none !important; }
.glow-banner .signup-msg.show{ display:block !important; }

/* Monogram "GM" sat slightly off-centre inside its circle: the negative
   letter-spacing pulled the glyph run leftward. Zero the tracking and let
   flex-centring place it true. */
.monogram{ letter-spacing:0 !important; line-height:1 !important; }

/* ---------- V29 (Aug 7) — COACHING BAND: bigger photo, tighter paragraph, no corner line ---------- */
/* Henry: narrow the paragraph so its right edge lands at the "How it works"
   button, give the reclaimed width to Odette's photo so it sits closer in
   height to the text, and remove the faint offset corner line. Desktop only;
   tablet/mobile stack and are unaffected. */
@media(min-width:1025px){
  #coaching .feature-inner{ grid-template-columns:1fr 500px; gap:clamp(36px,4vw,52px); }
  #coaching .feature-art--photo img{ max-width:100% !important; }
  #coaching .feature-copy > p:not(.byline){ max-width:480px; }
}
/* the faint bronze offset corner on the coaching photo */
#coaching .feature-art--photo::before{ display:none !important; }

/* ---------- V30 (Aug 7) — POPUP LEGIBILITY + BANNER TIGHTEN ---------- */
/* Popup body was thin 300-weight soft charcoal at 0.95rem — hard for 40-65
   on desktop. Bigger, heavier, near-black. */
.pop__card > p{ font-size:1.1rem !important; font-weight:400 !important; color:#2A2621 !important; line-height:1.72; }
.pop__ps{ font-size:1.02rem !important; color:#3A352F !important; }

/* Banner: keep the text + form as one tight centred cluster on desktop. */
@media(min-width:901px){
  .glow-banner-inner{ gap:16px !important; }
  .glow-banner-text{ gap:8px !important; }
  .glow-banner-lead{ font-size:1.12rem !important; }
  .glow-banner-sub{ font-size:0.96rem !important; }
}

/* ---------- V31 (Aug 7) — NAV LINKS ON ONE LINE ---------- */
/* The header links were wrapping mid-label ("THE / BOOK", "THE READING / ROOM")
   because the row ran ~10px short of space. Keep every label on one line, tighten
   the gap + letter-spacing so the whole set fits, and only wrap WHOLE items (never
   mid-word) if a narrower window truly forces it. Applies on every page. */
.nav-links{ gap:22px !important; letter-spacing:0.06em !important; flex-wrap:wrap; row-gap:8px; justify-content:flex-end; }
.nav-links a{ white-space:nowrap; }
.nav-links li{ white-space:nowrap; }


/* ---------- 33. POPUP, AFTER THE PULL QUOTE CAME OUT ------
   The two italic lines are gone, so the freed height goes into type.
   Audience is 40-65 and reads this on a phone: bigger and darker wins.
   .pop__quote's rule is left in place in case the lines ever return. */
.pop__card h3{ font-size:clamp(1.62rem,4.6vw,2.05rem) !important; margin-bottom:16px;
  text-wrap:balance; }
.pop__card .eyebrow{ font-size:1rem !important; margin-bottom:12px; }
.pop__card > p{ font-size:1.22rem !important; line-height:1.66; margin-bottom:16px; }
.pop__card .pop__ps{ font-size:1.12rem !important; color:#3A352F !important;
  margin-bottom:24px !important; }
.pop__card .signup-row input{ font-size:1.05rem; padding:15px 16px; }
.pop__card .signup-row button{ font-size:1rem; padding:15px 26px; }
.pop__no{ font-size:0.98rem; }
.pop__card{ max-width:500px; }

/* ---------- V35 (Aug 10) — BATCHED FIX ROUND ---------- */
/* 1) Popup/booking close button showed the browser's default BLUE focus ring
   on open. Keep a visible focus indicator (accessibility) but in brand clay. */
.pop__close:focus, .sq__close:focus{
  outline:none; box-shadow:0 0 0 3px rgba(138,87,52,0.45); border-radius:50%;
}
.pop__close:focus:not(:focus-visible), .sq__close:focus:not(:focus-visible){ box-shadow:none; }

/* 2) Mobile footer links wrapped ragged-left with CONTACT orphaned under the
   centred copyright. Centre them and let whole items wrap. */
@media(max-width:600px){
  .footer-bottom .links{
    flex-wrap:wrap; justify-content:center; row-gap:2px; column-gap:22px;
  }
}

/* 3) The contact portrait is now a TALL photograph, not a square. Cap its
   height so it sits in proportion with the form beside it and never towers. */
.contact-photo img{ max-height:560px; max-width:100%; width:auto; height:auto; margin-inline:auto; }
/* The 320px cap was set when this was a small SQUARE photo. The portrait
   is the warmest thing on the page — let it fill the column on phones. */
@media(max-width:860px){
  .contact-photo{ width:100%; max-width:min(440px, 100%) !important; margin-inline:auto; }
  .contact-photo img{ max-height:none !important; width:100% !important; height:auto !important; }
}

/* 4) diary.html cross-sell band: PIN the artwork to the right explicitly.
   `.feature:nth-of-type(even)` counts SECTIONS, so deleting the section above
   it silently flipped the book cover to the left (recurring bug class 8).
   An id-scoped rule makes the orientation independent of page order. */
#get-the-book .feature-inner{ direction:rtl; }
#get-the-book .feature-inner > *{ direction:ltr; }
@media(max-width:860px){
  #get-the-book .feature-inner{ direction:ltr; }
}

/* 5) The nav label is now "The Glow Method Book" — 20 characters, which is
   long for a bar that also carries the brand lockup, five more links and a
   button. Scale the gap and type fluidly so the row stays on ONE line across
   desktop widths instead of breaking into three rows. */
@media(min-width:861px){
  .nav-links{ gap:clamp(12px, 1.1vw, 20px) !important; }
  .nav-links a{
    font-size:clamp(0.86rem, 0.9vw, 0.9rem) !important;
    letter-spacing:clamp(0.02em, 0.05vw, 0.055em) !important;
  }
}
/* The 1240px nav shell was the real constraint — on wide screens there is
   plenty of unused margin, so let the bar breathe rather than shrink type. */
@media(min-width:1360px){ .nav{ max-width:1360px !important; } }
@media(min-width:1600px){ .nav{ max-width:1440px !important; } }

/* ══════════════════════════════════════════════════════════════
   BUSINESS & SOCIAL MEDIA COACHING (new service, added Aug 2026)
   Reuses the site's existing tokens. Hex values are hardcoded
   here rather than var(--aqua...) because those three variables
   are only declared in index.html's and articles.html's inline
   :root — coaching.html has no --aqua tokens of its own, and this
   stylesheet must render correctly on both pages.
   ══════════════════════════════════════════════════════════════ */

/* ---- homepage teaser (index.html, between Glow Session and testimonials) ---- */
.business-coaching-teaser{
  background-color:#F1E9DA;
  background-image:linear-gradient(160deg,#F1E9DA 0%,#EAF4F2 100%);
  padding:clamp(56px,7vw,96px) clamp(24px,5vw,40px);
}
.business-coaching-teaser-inner{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(40px,5vw,72px);
  align-items:center;
}
.business-coaching-teaser-inner > *{ min-width:0; }
.business-teaser-copy p{ color:#2A2621; line-height:1.75; margin-bottom:16px; font-size:1.05rem; }
.business-teaser-copy h2{ font-size:clamp(1.9rem,3vw,2.35rem); line-height:1.2; margin:10px 0 20px; }
.business-teaser-note{ font-style:italic; color:var(--charcoal); }
.business-proof{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,0.55);
  padding:18px 22px; margin:6px 0 22px; max-width:460px;
}
.business-proof dt{ font-family:'Playfair Display',serif; font-size:1.7rem; color:#3C7A75; font-weight:600; margin:0; }
.business-proof dd{ margin:0; color:var(--charcoal); font-size:0.95rem; line-height:1.4; }
.business-teaser-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.business-teaser-art{ position:relative; padding:0 0 14px 14px; }
.business-teaser-art::before{
  content:""; position:absolute; left:0; bottom:0; top:14px; right:14px;
  border:1px solid rgba(60,122,117,0.4); pointer-events:none; z-index:0;
}
.business-teaser-art img{
  position:relative; z-index:1; width:100%; height:auto; display:block; border-radius:3px;
  box-shadow:0 3px 10px rgba(32,28,24,0.16), 0 24px 52px rgba(32,28,24,0.22);
}
@media(max-width:860px){
  .business-coaching-teaser-inner{ grid-template-columns:1fr; text-align:left; }
  .business-teaser-art{ order:2; max-width:340px; margin:28px auto 0; }
  .business-teaser-copy{ order:1; }
  .business-teaser-actions .btn{ width:100%; text-align:center; }
}

/* ---- quiet secondary link on the coaching.html hero ---- */
.coach-secondary-link{ margin-top:14px; font-size:0.92rem; color:var(--charcoal); }
.coach-secondary-link a{ color:var(--clay-deep); border-bottom:1px solid var(--clay-deep); }

/* ---- full business-coaching section (coaching.html) ---- */
.business-coaching{
  background-color:#F1E9DA;
  background-image:linear-gradient(165deg,#F1E9DA 0%,#EAF4F2 100%);
  padding:clamp(60px,7vw,100px) clamp(24px,5vw,40px);
  scroll-margin-top:100px;
}
.business-coaching-inner{
  max-width:1140px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,5vw,64px);
  align-items:start;
}
.business-coaching-inner > *{ min-width:0; }
.business-coaching-intro h2{ font-size:clamp(1.7rem,2.7vw,2.15rem); line-height:1.3; margin:10px 0 20px; }
.business-coaching-intro > p{ color:#2A2621; line-height:1.75; margin-bottom:14px; font-size:1.02rem; }


/* ---- application card ---- */
/* photo in the left intro column of the business-coaching section —
   same offset-frame language as the homepage teaser art. */
.business-intro-art{ position:relative; padding:0 0 14px 14px; margin-top:30px; max-width:420px; }
.business-intro-art::before{
  content:""; position:absolute; left:0; bottom:0; top:14px; right:14px;
  border:1px solid rgba(60,122,117,0.4); pointer-events:none; z-index:0;
}
.business-intro-art img{
  position:relative; z-index:1; width:100%; height:auto; display:block; border-radius:3px;
  box-shadow:0 3px 10px rgba(32,28,24,0.16), 0 24px 52px rgba(32,28,24,0.20);
}
@media(max-width:900px){
  .business-intro-art{ margin:26px auto 0; }
}

.business-application{
  background:#FBF7EF; border:1px solid var(--line); border-radius:4px;
  padding:clamp(28px,4vw,40px); box-shadow:0 12px 32px rgba(32,28,24,0.08);
  position:sticky; top:100px;
}
.business-application h3{ font-size:1.4rem; margin-bottom:14px; }
.business-application > p{ color:#2A2621; line-height:1.7; font-size:0.98rem; margin-bottom:14px; }
.app-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.application-field{ display:block; margin-bottom:14px; min-width:0; }
/* :first-child, not just ">span" — a field can also contain a later
   .app-help / .app-error span (the phone field does), and those must NOT
   inherit the label's uppercase/bold/forced-block styling, or that
   unconditional display:block silently overrides the hidden attribute
   on .app-error regardless of what .app-error's own rule says. */
.application-field > span:first-child{
  display:block; font-size:0.94rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--charcoal); margin-bottom:6px; font-weight:600;
}
.application-field input, .application-field textarea{
  width:100%; border:1px solid rgba(32,28,24,0.22); border-radius:2px;
  padding:13px 15px; font-family:inherit; font-size:0.96rem; color:var(--ink);
  min-height:46px; resize:vertical; background:#fff;
}
/* rows="2" renders too short to be comfortable — floor it at a real height,
   and let it grow if someone writes more (resize:vertical, already set above). */
.application-field textarea{ min-height:96px; }
.application-field input:focus, .application-field textarea:focus{
  outline:2px solid var(--clay-deep); outline-offset:1px; border-color:transparent;
}
.application-field input[aria-invalid="true"]{ border-color:#a34a3d; }
/* both are direct children of the same <label class="application-field">
   as the field's own name span, so they need to explicitly opt back OUT of
   its uppercase/letterspaced/bold styling — being a later, equally-specific
   rule only overrides the properties actually named here. */
.app-help{
  display:block; margin-top:6px; font-size:0.92rem; color:var(--charcoal); font-style:italic;
  text-transform:none; letter-spacing:normal; font-weight:400;
}
.app-error:not([hidden]){
  display:block; margin-top:6px; font-size:0.92rem; color:#a34a3d; font-weight:500;
  text-transform:none; letter-spacing:normal;
}

.application-fieldset{ border:none; padding:0; margin:0 0 14px; }
.application-fieldset legend{
  font-size:0.94rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--charcoal); margin-bottom:10px; font-weight:600; padding:0;
}
.app-radio{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
  font-size:0.96rem; color:#2A2621; cursor:pointer; min-height:24px;
}
.app-radio input{ margin-top:1px; width:24px; height:24px; flex-shrink:0; accent-color:var(--clay-deep); }

.app-consent{
  display:flex; align-items:flex-start; gap:10px; margin:18px 0 6px;
  font-size:0.9rem; color:var(--charcoal); line-height:1.55; cursor:pointer;
}
.app-consent input{ margin-top:1px; width:24px; height:24px; flex-shrink:0; accent-color:var(--clay-deep); }
.app-consent-note{
  font-size:0.86rem; color:var(--charcoal); line-height:1.5; margin:0 0 18px 34px;
}
.app-consent-note a{
  color:var(--clay-deep); border-bottom:1px solid var(--clay-deep);
  display:inline-block; padding:4px 0;
}
.app-submit{ width:100%; text-align:center; margin-top:4px; }
.app-reassure{ margin-top:14px; font-size:0.88rem; color:var(--charcoal); text-align:center; line-height:1.5; }

@media(max-width:900px){
  .business-coaching-inner{ grid-template-columns:1fr; }
  .business-application{ position:static; }
}
@media(max-width:700px){
  .app-row{ grid-template-columns:1fr; }
}


/* ---- skip link: hidden until keyboard-focused ---- */
/* Clip-based hiding, NOT left:-9999px — an off-canvas element still counts
   toward document width and pushed the horizontal scroll boundary out on
   every page. Clipping keeps it screen-reader reachable at zero size. */
.skip-link{
  position:absolute; top:0; left:0; z-index:1000;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  background:#8A5734; color:#fff; padding:0;
  font-size:0.95rem; letter-spacing:0.04em; border-radius:0 0 3px 0;
}
.skip-link:focus{
  width:auto; height:auto; overflow:visible;
  clip:auto; clip-path:none; padding:12px 20px;
  outline:2px solid #201C18; outline-offset:2px;
}

/* ---- footer social links ---- */
.footer-social{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.footer-social a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--charcoal); font-size:0.8rem; letter-spacing:0.08em;
  text-transform:uppercase; padding:8px 0; transition:color .2s ease;
}
.footer-social a:hover{ color:var(--clay-deep); }
.footer-social a:focus-visible{ outline:2px solid var(--clay-deep); outline-offset:3px; }
.footer-social svg{ flex-shrink:0; }
@media(max-width:600px){
  .footer-social{ justify-content:center; }
}


/* ============================================================
   §46  THE GLOW METHOD IS NOT PUBLISHED YET
   Removing the homepage #the-book band changes every later
   section's nth-of-type parity (bug class 8), so the two
   surviving bands are pinned by id and can never flip again.
   ============================================================ */
#diary .feature-inner{ direction:ltr; }
#diary .feature-inner > *{ direction:ltr; }
#coaching .feature-inner{ direction:rtl; }
#coaching .feature-inner > *{ direction:ltr; }
@media(max-width:860px){
  #diary .feature-inner, #coaching .feature-inner{ direction:ltr; }
}

/* the line that replaces a price while a book is unfinished */
.soon-note{
  margin:18px 0 20px;
  font-family:'Jost',system-ui,sans-serif;
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:0.02em;
  color:#8A5734;
}
.feature--dark .soon-note{ color:#E4C79A; }

/* four apparel shots in the homepage band: a 2x2 that stays square-ish at every
   width, rather than one hero garment standing in for the whole collection */
.tee-band-art--four{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0;
}
.tee-band-art--four img{
  width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 10px 26px rgba(42,36,30,0.16);
}
@media(max-width:520px){ .tee-band-art--four{ gap:10px; } }

/* the heart in Odette's own sign-off line - darkened to clear 4.5:1 on both the
   cream and the greige panels it sits on */
.hrt{ color:#9C4B33; font-size:0.92em; }