/*
Theme Name: Linda Ball
Theme URI: https://lindaball.com
Author: AJ Hoffmann Digital
Description: Custom block theme for author Linda Ball. Built from the approved
  mockup - not a page builder rebuild, so the design is exactly what was signed off.
Version: 1.10.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: linda-ball
*/

@font-face{font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/figtree-400.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:500;font-style:normal;font-display:swap;src:url('assets/fonts/figtree-500.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;src:url('assets/fonts/figtree-600.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-style:normal;font-display:swap;src:url('assets/fonts/figtree-700.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:400;font-style:italic;font-display:swap;src:url('assets/fonts/fraunces-400i.woff2') format('woff2')}

:root{
  --ink:#14110F; --body:#4A4441; --mute:#6E6A66; --hair:#E4E0DB; --hair-2:#F0EDE9;
  --red:#DA3A40; --red-dk:#C2242A; --red-soft:#FCEEEE; --red-display:#FB5A59;
  --paper:#FFFFFF; --paper-2:#FBF8F5; --paper-3:#F5F1EC;
  --dark:#16130F; --dark-2:#211D19; --dark-3:#2C2721;
  --sun:#FBEEDC; --sand:#F7EFE4;
  --r:14px; --r-sm:8px;
  --text:Figtree,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --disp:Figtree,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --acc:Fraunces,Georgia,'Times New Roman',serif;
  --fs:18px; --hw:700; --htrk:-.032em;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--body);
  font-family:var(--text);font-size:var(--fs);line-height:1.64;
  text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;color:transparent}
a{color:inherit;text-decoration:none}
/* Anyone navigating by keyboard could not see where they were: 23 of the 40
   links and buttons had no visible focus state at all. :focus-visible keeps
   this off mouse clicks, so it only shows when it is actually needed. */
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.reviews :focus-visible,.rough :focus-visible{outline-color:#F0A99B}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

h1{font-family:var(--disp);font-weight:var(--hw);color:var(--ink);line-height:1.05;letter-spacing:var(--htrk)}
h2{font-family:var(--disp);font-weight:var(--hw);color:var(--ink);line-height:1.02;
  letter-spacing:-.036em;font-size:clamp(34px,4.6vw,64px)}
em.acc{
  font-family:var(--acc);font-style:italic;font-weight:400;color:var(--red-display);
  letter-spacing:-.012em;font-size:.88em;display:block;margin-top:.30em;line-height:1.14;
}
.label{
  font-family:var(--text);font-weight:600;font-size:13.5px;color:var(--red);line-height:1;
  display:inline-flex;align-items:center;gap:9px;letter-spacing:-.005em;
}
.label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.label.on-dark{color:#F0A99B}
.lead{font-size:calc(var(--fs) * 1.16);line-height:1.52;color:var(--body)}
.fine{font-size:calc(var(--fs) * .82);color:var(--mute);letter-spacing:-.005em}
.btn{
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;
  font-size:calc(var(--fs) * .92);letter-spacing:-.01em;padding:16px 30px;border-radius:var(--r-sm);
  background:var(--red);color:#fff;border:1px solid var(--red);line-height:1.1;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s;
}
.btn:hover{background:var(--red-dk);transform:translateY(-2px)}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.tlink{font-weight:600;font-size:calc(var(--fs) * .92);letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.tlink::after{content:'\2192';transition:transform .2s}
.tlink:hover{color:var(--red)}
.tlink:hover::after{transform:translateX(4px)}
.tlink.on-dark{color:#fff}
.lede{font-family:var(--acc);font-style:italic;font-weight:400;color:var(--ink);
  font-size:calc(var(--fs) * 1.62);line-height:1.32;letter-spacing:-.012em}
.body p{margin-bottom:18px;max-width:56ch}
/* numbers as a line of type, not three identical boxes */
.run{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 18px;font-size:15.5px;color:var(--mute)}
.run em{font-style:normal;display:inline-flex;align-items:baseline;gap:7px}
.run b{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--ink);letter-spacing:-.04em;line-height:1}
.run i{font-style:normal;width:4px;height:4px;border-radius:50%;background:var(--hair);align-self:center}
/* ME means YOU, typographic rather than a callout box */
.menote p{font-family:var(--acc);font-style:italic;font-size:calc(var(--fs) * 1.5);
  line-height:1.32;color:var(--ink);letter-spacing:-.014em}
.menote p b{font-style:normal;font-family:var(--disp);font-weight:800;color:var(--red-display);
  letter-spacing:-.035em;font-size:1.22em;line-height:.8}
.menote cite{display:block;font-style:normal;font-size:13px;color:var(--mute);font-weight:600;margin-top:14px}
.cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

.badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
  padding:9px 16px;box-shadow:0 10px 26px -8px rgba(20,17,15,.3);
}
.badge b{font-weight:700;font-size:calc(var(--fs) * .86);color:var(--ink);letter-spacing:-.02em}
.badge span{color:var(--red);font-size:calc(var(--fs) * .62);letter-spacing:.08em;line-height:1}
.badge i{font-style:normal;font-size:calc(var(--fs) * .74);color:var(--mute)}

/* ---------- shared header ---------- */
.topbar{background:var(--dark);color:#C3BBB4;font-size:13.5px;letter-spacing:-.005em}
.topbar .wrap{display:flex;justify-content:center;align-items:center;height:44px}
.topbar b{color:#fff;font-weight:600}
header{border-bottom:1px solid var(--hair-2);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  position:sticky;top:0;z-index:60}
.head{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:24px;padding:12px 0}
/* ---------- wordmark, five treatments ---------- */
.mark{display:inline-flex;align-items:center;flex:none;white-space:nowrap;color:var(--ink);line-height:1;min-height:44px}
.mark .mono{
  display:none;width:38px;height:38px;border-radius:9px;background:var(--red);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:-.03em;align-items:center;justify-content:center;flex:none;
}
.mark .nm{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.04em}
.mark .tag{font-weight:600;font-size:11px;color:var(--mute);letter-spacing:.02em}

/* W3 — heavy name, hairline, tagline beside */
.mark{gap:13px}
.mark .nm{font-size:26px;font-weight:800;letter-spacing:-.045em}
.mark .tag{
  padding-left:13px;border-left:1px solid var(--hair);letter-spacing:.13em;
  text-transform:uppercase;font-size:10px;
}

/* Facebook in the header. Icon only, because the wordmark, five nav items and
   the buy button already fill the bar. 44px box so it is a real tap target
   even though the glyph inside is 21px. */
.fbtop{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  flex:none;color:var(--body);transition:color .16s;margin-left:-8px}
.fbtop svg{width:21px;height:21px;fill:currentColor}
.fbtop:hover{color:var(--red)}

nav{display:flex;gap:34px;font-weight:500;font-size:calc(var(--fs) * .92);letter-spacing:-.01em}
nav a{color:var(--body);padding:4px 0;position:relative}
nav a::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--red);transition:right .24s}
nav a:hover{color:var(--ink)}
nav a:hover::after{right:0}

/* ---------- nav dropdown ---------- */
nav{align-items:center}
.hasmenu{position:relative}
.navbtn{
  min-height:44px;font:inherit;font-weight:500;font-size:calc(var(--fs) * .92);letter-spacing:-.01em;
  color:var(--body);background:none;border:0;padding:4px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;position:relative;
}
.navbtn::after{content:'';width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s}
.navbtn:hover{color:var(--ink)}
.hasmenu[data-open="true"] .navbtn{color:var(--ink)}
.hasmenu[data-open="true"] .navbtn::after{transform:rotate(-135deg) translateY(-1px)}
.menu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:330px;background:#fff;border-radius:var(--r);padding:8px;
  box-shadow:0 24px 60px -18px rgba(20,17,15,.32),0 0 0 1px var(--hair-2);
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:80;
}
.hasmenu[data-open="true"] .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.menu a{display:block;padding:13px 14px;border-radius:var(--r-sm);transition:background .16s;min-height:44px}
.menu a:hover{background:var(--paper-3)}
.menu a::after{display:none}
.menu b{display:block;font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
.menu b::after{content:'\2197';font-weight:500;color:var(--mute);margin-left:6px;font-size:13px}
.menu span{display:block;font-weight:400;font-size:13.5px;color:var(--body);line-height:1.4;margin-top:3px}
.menu i{display:block;font-style:normal;font-size:11.5px;color:var(--mute);margin-top:6px}
.head .btn{padding:12px 22px;flex:none}
.mobtoggle{display:none}

/* ======================================================
   HERO 1 — split card, covers hanging off
   ====================================================== */
.h1{background:var(--paper);padding:72px 0 108px;position:relative}
.h1::before{content:'';position:absolute;right:0;top:0;width:46%;height:100%;background:var(--paper-3);border-bottom-left-radius:120px;z-index:0}
.h1 .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center;position:relative;z-index:2}
.h1 h1{font-size:clamp(40px,5.4vw,76px);max-width:13ch;margin:0 0 24px}
.h1 .lead{max-width:52ch;margin-bottom:32px}
.lb{display:inline}
.h1 .fine{margin-top:20px}
.h1 .stage{position:relative}
.h1 .shot{border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -34px rgba(20,17,15,.45)}
.h1 .shot img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}
.h1 .badge{position:absolute;top:20px;right:-16px;z-index:4}
.h1 .covers{position:absolute;left:-52px;bottom:-42px;display:flex;align-items:flex-end;z-index:3}
.h1 .covers figure{width:132px;border-radius:3px;overflow:hidden;box-shadow:0 22px 44px -14px rgba(20,17,15,.5)}
.h1 .covers figure:first-child{transform:rotate(-5deg);z-index:2}
.h1 .covers figure:last-child{width:120px;margin-left:-30px;transform:rotate(4.5deg)}

/* ======================================================
   HERO 2 — portrait bleeds to the right edge, text on warm ground
   ====================================================== */
/* ======================================================
   HERO 3 — centred type, arched portrait, covers flanking
   ====================================================== */
/* ======================================================
   HERO 4 — portrait bleeds off the left edge, text right
   ====================================================== */
/* ======================================================
   HERO 5 — type first, three-up gallery strip
   ====================================================== */
/* ======================================================
   B — arch and sun
   an arched portrait rising out of a warm disc
   ====================================================== */
.vb{padding:96px 0 104px;position:relative;overflow:hidden;background:var(--paper)}
.vb .grid{display:grid;grid-template-columns:.78fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.vb .stage{position:relative;display:flex;justify-content:center}
.vb .stage::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-56px;
  width:132%;aspect-ratio:1/1;border-radius:50%;background:var(--sun);z-index:0;
}
.vb .pic{position:relative;z-index:2;width:100%}
.vb .pic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;
  border-radius:230px 230px 18px 18px;box-shadow:0 44px 80px -44px rgba(20,17,15,.45)}
.vb h2{margin:22px 0 22px;max-width:13ch}
.vb .lede{margin-bottom:26px;max-width:28ch}
/* Linda's own saying. Set in the display face rather than the Fraunces italic
   used by .lede and .menote, so three pull-quotes in one column read as three
   different voices instead of one repeated device. The dots are what make the
   joke, so the initials get a little tracking to keep them legible. */
.vb .saying{margin:36px 0 38px}
.vb .saying p{font-family:var(--disp);font-weight:800;font-size:38px;line-height:1.14;
  letter-spacing:-.042em;color:var(--ink);max-width:none;margin:0}
/* the two little words stay small so the eye lands on the two acronyms and
   catches the rhyme between them, which is the whole joke */
.vb .saying .w{font-weight:600;font-size:.56em;color:var(--mute);letter-spacing:-.01em}
.vb .saying b{font-weight:800;letter-spacing:-.01em}
.vb .saying .atm{color:var(--red-display)}
.vb .saying figcaption{font-size:13px;color:var(--mute);font-weight:600;margin-top:16px}

.vb .menote{margin:32px 0 30px}
.vb .menote p{font-size:calc(var(--fs) * 1.72)}
.vb .run{margin-bottom:0}
.vb .rule{height:1px;background:var(--hair);margin:0 0 30px}

@media(max-width:1024px){
  .vb{padding:56px 0 64px}
  .vb .grid{grid-template-columns:1fr;gap:34px}
  .vb .stage::before{width:150%;bottom:-30px}
  .vb .pic img{aspect-ratio:4/5;border-radius:150px 150px 14px 14px}
  .vb .lede,.body p{max-width:none}
  .run b{font-size:26px}
  .wrap{padding:0 22px}
  .head .btn{display:none}
  .lb{display:none}

  /* ---- mobile menu ----------------------------------------------------
     The panel IS the desktop nav, not a second copy of it, so the two can
     never drift apart and Linda only ever edits one list.
     Without JS the nav simply shows as a stacked list and the toggle stays
     hidden, so navigation never depends on a script loading. */
  .mobtoggle{display:none}
  .has-js .mobtoggle{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;
    background:none;border:1px solid var(--hair);border-radius:var(--r-sm);
    padding:0 16px;min-height:44px;
  }
  /* three bars that fold into a cross. the middle bar is the span's own
     background, the outer two are its pseudo elements, so one element does
     the whole transition without any extra markup */
  .mobtoggle .bars{
    position:relative;width:15px;height:11px;flex:none;
    background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;
  }
  .mobtoggle .bars::before,.mobtoggle .bars::after{
    content:'';position:absolute;left:0;right:0;height:2px;background:currentColor;
    transition:transform .2s ease,top .2s ease,bottom .2s ease;
  }
  .mobtoggle .bars::before{top:0}
  .mobtoggle .bars::after{bottom:0}
  .mobtoggle[aria-expanded="true"]{border-color:var(--ink)}
  .mobtoggle[aria-expanded="true"] .bars{background:none}
  .mobtoggle[aria-expanded="true"] .bars::before{top:50%;transform:translateY(-50%) rotate(45deg)}
  .mobtoggle[aria-expanded="true"] .bars::after{bottom:50%;transform:translateY(50%) rotate(-45deg)}

  nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 22px 20px;font-size:17px;
  }
  .has-js nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--hair);
    box-shadow:0 24px 40px -28px rgba(20,17,15,.4);max-height:calc(100dvh - 82px);overflow:auto;
  }
  .has-js header.nav-open nav{display:flex}
  nav a{padding:14px 0;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid var(--hair-2);color:var(--ink);font-weight:600}
  nav a::before,nav a::after{display:none}

  /* Articles stays a real disclosure on a phone: the label sits in the list
     like every other item, and the two pieces appear underneath it only once
     it is tapped. Same button and same data-open as the desktop dropdown, so
     there is one mechanism to maintain rather than two.
     Without JS the button is hidden and the two links simply show as normal
     rows, so they are never unreachable. */
  .hasmenu{position:static}
  .navbtn{display:none}
  .has-js .navbtn{
    display:flex;width:100%;justify-content:space-between;align-items:center;
    padding:14px 0;min-height:48px;font-size:17px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--hair-2);
  }
  .menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:none;padding:0;width:auto;min-width:0;
  }
  .has-js .menu{display:none}
  .has-js .hasmenu[data-open="true"] .menu{display:block;transform:none}
  .menu a{padding:14px 0 14px 18px;border-radius:0;border-bottom:1px solid var(--hair-2)}
  .menu a:hover{background:none}
  .menu span{display:none}
  .h1{padding:26px 0 84px}
  .h1::before{width:100%;height:44%;border-bottom-left-radius:60px}
  .h1 .grid{grid-template-columns:1fr;gap:38px}
  .h1 .txt{order:2}.h1 .stage{order:1}
  .h1 .shot img{aspect-ratio:5/4;object-position:50% 34%}
  .h1 .covers{left:auto;right:6px;bottom:-44px}
  .h1 .covers figure{width:96px}.h1 .covers figure:last-child{width:88px;margin-left:-22px}

  /* The header is sticky, so at the top of the page it sits directly over the
     hero photo. Keeping the badge at top-right buried it behind the wordmark.
     Bottom-left is clear of both the header and the covers. */
  .h1 .badge{top:auto;bottom:16px;left:14px;right:auto}
                                            }

@media print{}

@media(max-width:1024px){}

/* added at stitch: present in folds 3-6, missing from folds 1-2 */
button{font:inherit}
.s{display:block}
.s + .s{margin-top:5px}


/* ===== fold3 ===== */
.bk h2{font-family:var(--disp);font-weight:var(--hw);color:var(--ink);line-height:1.02;
  letter-spacing:-.036em;font-size:clamp(34px,4.4vw,60px)}
.bk h3{font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-size:clamp(22px,2.1vw,29px);line-height:1.12}
.bk .label{font-weight:600;font-size:13.5px;color:var(--red);line-height:1;display:inline-flex;
  align-items:center;gap:9px;letter-spacing:-.005em}
.bk .label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.bk .lede{font-family:var(--acc);font-style:italic;font-weight:400;color:var(--ink);
  font-size:calc(var(--fs) * 1.5);line-height:1.34;letter-spacing:-.012em}
.bk .btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;
  font-size:calc(var(--fs) * .92);letter-spacing:-.01em;padding:16px 30px;border-radius:var(--r-sm);
  background:var(--red);color:#fff;border:1px solid var(--red);line-height:1.1;min-height:44px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s}
.bk .btn:hover{background:var(--red-dk);transform:translateY(-2px)}
.bk .btn.dark{background:var(--ink);border-color:var(--ink)}
.bk .btn.dark:hover{background:var(--red);border-color:var(--red)}
.bk .tlink::after{content:'\2192';transition:transform .2s}
.bk .tlink:hover{color:var(--red)}
.bk .tlink:hover::after{transform:translateX(4px)}
.bk .facts{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;font-size:14.5px;color:var(--mute)}
.bk .facts i{font-style:normal;width:4px;height:4px;border-radius:50%;background:var(--hair)}
.bk .price{font-family:var(--disp);font-weight:800;font-size:calc(var(--fs) * 1.9);color:var(--ink);
  letter-spacing:-.045em;line-height:1}
.bk .price small{font-weight:600;font-size:calc(var(--fs) * .62);color:var(--mute);letter-spacing:0}
.bk .cov{border-radius:4px;box-shadow:0 26px 52px -22px rgba(20,17,15,.46)}
.bk .s + .s{margin-top:5px}
.bk .chead{margin-bottom:52px}
.bk .chead.mid{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.bk .chead h2{margin:20px 0 18px}
.bk .buyrow{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.bk .bundle{background:var(--dark);border-radius:var(--r);padding:52px 56px;color:#C3BBB4;
  display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;margin-bottom:26px}
.bk .bundle h3{color:#fff;font-size:clamp(28px,3vw,42px);margin-bottom:14px}
.bk .bundle p{max-width:44ch;margin-bottom:6px}
.bk .bundle .save{display:inline-flex;align-items:center;gap:8px;background:#2A2420;border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:600;color:#F0A99B;margin-bottom:18px}
.bk .bundle .covs{display:flex;align-items:flex-end}
.bk .bundle .covs figure{width:132px}
.bk .bundle .covs figure:last-child{width:122px;margin-left:-28px;transform:rotate(5deg)}
.bk .bundle .covs figure:first-child{transform:rotate(-5deg);z-index:2}
.bk .bundle .price{color:#fff}
.bk .bundle .price small{color:#8B8480}
.bk .bundle{margin-top:34px}
.bk.b1{padding:96px 0 104px;background:var(--paper)}
.bk.b1 .pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bk.b1 .card{background:#fff;border-radius:var(--r);padding:38px 38px 40px;display:flex;flex-direction:column}
.bk.b1 .card img{width:172px;margin-bottom:26px}
.bk.b1 .no{font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.bk.b1 h3{margin:12px 0 14px}
.bk.b1 .card p{font-size:16.5px;margin-bottom:20px;flex:1}
.bk.b1 .facts{margin-bottom:22px}
.bk.b1 .buyrow{margin-top:auto;padding-top:22px;border-top:1px solid var(--hair-2)}






@media(max-width:1024px){.bk .bundle{grid-template-columns:1fr;gap:32px;padding:34px 26px}
.bk .bundle .covs{justify-content:flex-start}
.bk.b1,.bk.b1 .pair{grid-template-columns:1fr;gap:28px;padding:36px 0}





                        .b2 .row p,}
.bk{display:block}

/* ===== reviews ===== */
.reviews .s + .s{margin-top:4px}
.reviews h2{font-family:var(--disp);font-weight:700;color:var(--ink);line-height:1.02;
  letter-spacing:-.036em;font-size:clamp(34px,4.4vw,60px)}
.reviews .label{font-weight:600;font-size:13.5px;color:var(--red);line-height:1;display:inline-flex;
  align-items:center;gap:9px;letter-spacing:-.005em}
.reviews .label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.reviews{padding:76px 0;background:var(--dark);overflow:hidden}
.reviews .chead{text-align:center;max-width:640px;margin:0 auto 44px;padding:0 22px}
.reviews .chead h2{color:#fff;margin-top:18px}
.reviews .chead .label{color:#F0A99B}
.reviews .rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.reviews .grp{display:flex;gap:26px;padding-right:26px}
.reviews .track{display:flex;gap:0;width:max-content}
/* One pass is one group. Narrower cards mean a shorter group, so the duration
   comes down with it to keep the same unhurried pace of roughly 30px a second. */
.reviews .track.is-running{animation:slide 42s linear infinite}
/* Pause only where a real pointer can hover, so a tap on a phone cannot leave
   the strip stuck. Keyboard focus pauses it too, so it can be read. */
@media(hover:hover){
  .reviews:hover .track,.reviews .track:focus-within{animation-play-state:paused}
}








/* Keyframe selectors are "from" and "to" and cannot be scoped to a class.
   These were written as ".reviews from" / ".reviews to", which is invalid, so
   the animation was registered and "running" but never moved a pixel. */
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reviews .c{width:380px;flex:none;background:var(--dark-2);border:1px solid var(--dark-3);
  border-radius:16px;padding:30px 30px;display:flex;flex-direction:column}
.reviews .c p{font-family:var(--text);font-style:normal;font-size:calc(var(--fs) * .94);line-height:1.58;
  letter-spacing:-.006em;color:#F6F3F0;flex:1}
.reviews .c .who{margin-top:20px;padding-top:18px;border-top:1px solid var(--dark-3);
  font-size:13.5px;color:#8B8480;line-height:1.42;font-family:var(--text);font-style:normal;letter-spacing:0}
.reviews .c .who b{display:block;font-family:var(--disp);font-weight:700;font-size:15.5px;color:#fff;
  letter-spacing:-.028em;margin-bottom:2px}








/* Must match .reviews .track.is-running (0,3,0) or it never wins, which is why
   this was silently doing nothing. Anyone with Reduce Motion switched on was
   still getting a moving strip. */
@media(prefers-reduced-motion:reduce){
  .reviews .track.is-running{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
}









@media(max-width:1024px){.reviews{padding:48px 0}
.reviews .chead{margin-bottom:34px}
.reviews .c{width:74vw;max-width:330px;padding:22px 22px;border-radius:14px}
.reviews .grp{gap:16px;padding-right:16px}}

/* ===== fold4 ===== */
.rough h2{font-family:var(--disp);font-weight:var(--hw);color:var(--ink);line-height:1.02;
  letter-spacing:-.036em;font-size:clamp(34px,4.4vw,60px)}
.rough .label{font-weight:600;font-size:13.5px;color:var(--red);line-height:1;display:inline-flex;
  align-items:center;gap:9px;letter-spacing:-.005em}
.rough .label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.rough .lede{font-family:var(--acc);font-style:italic;font-weight:400;
  font-size:calc(var(--fs) * 1.44);line-height:1.34;letter-spacing:-.012em}
.rough .s + .s{margin-top:5px}
.rough .chip{
  font-weight:500;font-size:calc(var(--fs) * .94);letter-spacing:-.01em;padding:13px 22px;
  border-radius:999px;border:1px solid var(--hair);color:var(--ink);cursor:pointer;background:none;
  transition:.18s;line-height:1.2;min-height:44px;
}
.rough .chip:hover{border-color:var(--red);color:var(--red)}
.rough .chip[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
.rough.onDark .chip{border-color:#443D37;color:#E2DCD6}
.rough.onDark .chip:hover{border-color:#7A716A;color:#fff}
.rough.onDark .chip[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
.rough .q{color:var(--ink)}
.rough.onDark .q{color:#F6F3F0}
.rough .src{font-size:calc(var(--fs) * .84);color:var(--red);font-weight:600;margin-top:16px}
.rough.onDark .src{color:#E8705F}
.rough.onDark h2{color:#fff}
.rough.onDark .lede{color:#C3BBB4}
.rough.onDark .label{color:#F0A99B}
.rough{padding:96px 0 104px;background:var(--dark)}
.rough .lede{color:#C3BBB4}
.rough .chip{background:#231F1A;border-color:#332D27;color:#E2DCD6}
.rough .chip:hover{background:#2E2822;border-color:#4A423B;color:#fff}
.rough .chip[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
.rough .panel{background:var(--dark-2)}
.rough .q{font-family:var(--text);font-style:normal;font-weight:500;
  font-size:calc(var(--fs) * 1.5);line-height:1.5;letter-spacing:-.021em}
.rough .q .s + .s{margin-top:7px}
.rough .inner{max-width:940px;margin:0 auto;text-align:center}
.rough h2{margin:20px 0 18px;font-size:clamp(36px,5vw,66px)}
.rough .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:32px}
.rough .panel{margin-top:44px;text-align:left;background:var(--dark-2);border-radius:var(--r);padding:44px 48px;display:grid}
.rough .panel .qa{grid-area:1 / 1;align-self:center;visibility:hidden}
.rough .panel .qa.on{visibility:visible}














@media(max-width:1024px){.rough{padding:56px 0 64px}
.rough .panel{padding:30px 24px}}

/* ===== fold6 ===== */
.buy h2{font-family:var(--disp);font-weight:var(--hw);color:var(--ink);line-height:1.02;
  letter-spacing:-.036em;font-size:clamp(34px,4.4vw,60px)}
.buy h3{font-family:var(--disp);font-weight:700;color:var(--ink);line-height:1.12;letter-spacing:-.03em;
  font-size:clamp(19px,2vw,23px)}
.buy .label{font-weight:600;font-size:13.5px;color:var(--red);line-height:1;display:inline-flex;
  align-items:center;gap:9px;letter-spacing:-.005em}
.buy .label::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.buy .lede{font-family:var(--acc);font-style:italic;font-weight:400;
  font-size:calc(var(--fs) * 1.44);line-height:1.34;letter-spacing:-.012em;color:var(--body)}
.buy .s + .s{margin-top:5px}
.buy .store{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid #E6DCCB;
  min-height:60px;transition:.16s}
.buy .store:hover .nm{color:var(--red)}
.buy .store .nm{font-family:var(--disp);font-weight:700;font-size:17.5px;letter-spacing:-.028em;
  color:var(--ink);flex:none;transition:.16s}
.buy .store .fmt{font-size:14.5px;color:var(--mute);flex:1}
.buy .store .go{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);
  display:grid;place-items:center;color:var(--mute);font-size:13px;transition:.16s}
.buy .store:hover .go{background:var(--red);border-color:var(--red);color:#fff}
/* Shops that carry the book but that we cannot link to directly, usually
   because the storefront is geo-restricted. Deliberately NOT a .store row:
   a row that looks identical to the others but does nothing when tapped is
   worse than a plain sentence. */
.buy .also{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--mute);max-width:44ch}
.buy .also b{font-weight:600;color:var(--body)}
.buy{padding:104px 0;background:var(--sand)}
.buy .chead{max-width:700px;margin-bottom:48px}
.buy .chead h2{margin:20px 0 16px}
.buy .pair{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.buy .bkhd{display:flex;gap:20px;align-items:flex-end;margin-bottom:26px;
  padding-bottom:26px;border-bottom:2px solid var(--ink)}
.buy .bkhd img{width:78px;flex:none;border-radius:3px;box-shadow:0 16px 32px -16px rgba(20,17,15,.5)}
.buy .bkhd .m{font-size:14.5px;color:var(--mute);margin-top:6px}
footer{background:var(--paper-3);color:var(--body);padding:78px 0 40px;font-size:15.5px;
  border-top:1px solid var(--hair)}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;
  padding-bottom:52px;border-bottom:1px solid var(--hair)}
footer .mark{color:var(--ink);margin-bottom:16px}
footer .mark .tag{color:var(--mute);border-left-color:var(--hair)}
footer .blurb{line-height:1.6;max-width:30ch;color:var(--body);font-size:15px}
/* Facebook. Monochrome rather than brand blue: #1877F2 is a cold saturated
   colour that appears nowhere else in this warm palette. The "f" mark carries
   the recognition on its own. 44px min-height for thumbs. */
footer .fb{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;
  font-weight:600;font-size:15px;color:var(--ink);transition:color .16s}
footer .fb svg{width:20px;height:20px;fill:currentColor;flex:none}
footer .fb:hover{color:var(--red-dk)}
footer h3{font-weight:700;font-size:12.5px;color:var(--ink);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer ul a{color:var(--body);transition:.16s;display:inline-block;padding:3px 0}
footer ul a:hover{color:var(--red-dk)}
footer .art{color:var(--body);font-size:14.5px;line-height:1.5;display:block}
footer .art b{display:block;color:var(--ink);font-weight:600;font-size:15.5px}
footer .art:hover b{color:var(--red-dk)}
footer .base{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-top:30px;font-size:14px;color:var(--body)}
footer .base .cat{font-family:var(--acc);font-style:italic;font-size:15px;color:var(--body)}















@media(max-width:1024px){.buy{padding:60px 0}
.buy .pair{grid-template-columns:1fr;gap:44px}
footer{padding:56px 0 34px}
footer .cols{grid-template-columns:1fr 1fr;gap:38px}}














/* Narrow phones. The wordmark, the Facebook icon and the Menu button together
   came to 382px, which overflowed a 320 or 375 wide screen. overflow-x:hidden
   on <html> hid the sideways scroll but the header was still cut off.
   Dropping the AUTHOR tag and tightening the spacing buys back ~90px. */
@media(max-width:430px){
  .head{gap:14px}
  .mark .tag{display:none}
  .has-js .mobtoggle{padding:0 12px}
  .fbtop{margin-left:-4px}
}

@media(max-width:600px){footer .cols{grid-template-columns:1fr;gap:34px}
.buy .store{gap:12px;padding:15px 0}

/* The three family numbers wrapped two-then-one on a phone, which left a
   separator dot dangling at the end of the first line. One fact per line
   instead, and the dots come out because a stacked list does not need them. */
.vb .run{flex-direction:column;align-items:flex-start;gap:11px}
.vb .run i{display:none}

/* On a phone this wrapped as "Every time I write ME, I" / "mean YOU.", which
   split the phrase in the wrong place. Break it at the comma instead. */
.menote .brk{display:block}}

/* Thumb targets. The footer links were 31px tall, under the 44px a finger
   needs. Padding rather than height so the text stays where it sits. */
@media(max-width:1024px){
  footer ul{gap:2px}
  footer ul a{padding:12px 0}
  footer .art{padding:8px 0}
}

/* ===== preview control ===== */


/* ===========================================================================
   Added for WordPress. The mockup generated its content from JS arrays; here
   every word is a block in the editor, so these rules cover the moment before
   JS runs and the case where it never does.
   =========================================================================== */

/* the chip label lives inside each answer so the two can't drift apart.
   read by JS and by screen readers, never shown. */
.chiptext{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* no JS, or JS not run yet: show every answer stacked and readable rather
   than one visible answer and no way to reach the other five */
.rough:not(.is-ready) .panel{display:block}
.rough:not(.is-ready) .panel .qa{visibility:visible;align-self:auto}
.rough:not(.is-ready) .panel .qa + .qa{margin-top:26px;padding-top:26px;
  border-top:1px solid var(--dark-3)}
.rough:not(.is-ready) .chips{display:none}

/* ===== the last word =====
   Grace Harper's email, given its own quiet fold instead of a card in the
   reviews strip. It is five times the length of the other endorsements, so
   inside the strip it either set the height of every card or scrolled past
   too fast to finish. Here it is the closing beat: light after the dark
   Rough Day fold, and the last thing read before the footer. */
.note{padding:80px 0 88px;background:var(--paper)}
.note .inner{max-width:1090px;position:relative}
.note .q{position:relative;padding-left:62px}
.note .q::before{content:'\201C';position:absolute;left:-4px;top:-14px;
  font-family:var(--acc);font-style:italic;font-size:104px;line-height:1;
  color:var(--red);opacity:.22;pointer-events:none}
/* Figtree, not the Fraunces italic used for the short quotes elsewhere. Five
   paragraphs of italic serif is a workout to read. The quote marks, the rule
   and her name carry the "this is a quote" signal without the italic. */
.note .q p{font-family:var(--text);font-style:normal;color:var(--ink);
  font-size:clamp(17.5px,1.62vw,19.5px);line-height:1.62;letter-spacing:-.006em;max-width:none}
.note .q p + p{margin-top:16px}
.note .q .s + .s{margin-top:4px}
/* The opening mark is decorative and hangs in the left margin, so the quote
   needs a closing mark or it reads as an unfinished sentence. This one is
   punctuation: it sits inline after the final word rather than floating. */
.note .meet p:last-child::after{content:'\201D';font-family:var(--acc);
  font-style:italic;color:var(--red);opacity:.22;font-size:5.3em;line-height:0;
  vertical-align:-.62em;margin-left:.07em}

/* Her four "it can meet someone" lines. They are a list in everything but
   markup, so they get list spacing and a rule down the side rather than being
   four more paragraphs lost in the run of prose. */
.note .meet{margin-top:26px;margin-left:62px;padding-left:26px;border-left:2px solid var(--red-soft)}
.note .meet p{font-family:var(--text);color:var(--ink);
  font-size:clamp(17.5px,1.62vw,19.5px);line-height:1.62;letter-spacing:-.006em;max-width:none}
.note .meet p + p{margin-top:10px}
/* A reading measure. Without this the column ran the full 1028px and the
   longest lines hit 112 characters, well past the 65-75 where the eye stops
   reliably finding the start of the next line. Phones are already narrower
   than this, so the cap only bites from 768 up. */
@media(min-width:768px){
  .note .q p,.note .meet p{max-width:660px}
}
.note .q .s + .s{margin-top:5px}
.note .by{margin-top:34px;margin-left:62px;padding-top:20px;border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--mute);line-height:1.42}
.note .by b{display:block;font-family:var(--disp);font-weight:700;font-size:16.5px;
  color:var(--ink);letter-spacing:-.028em}
@media(max-width:1024px){
  .note{padding:64px 0 72px}
  .note .q{padding-left:0}
  .note .q::before{position:static;display:block;font-size:76px;height:.52em;
    margin-bottom:2px;opacity:.26}
  .note .q p + p{margin-top:11px}
  .note .meet{margin-left:0;padding-left:18px;margin-top:22px}
  .note .meet p + p{margin-top:9px}
  .note .by{margin-left:0;margin-top:28px;padding-top:16px}
}
@media(max-width:600px){
  .note{padding:52px 0 58px}
  .note .q::before{font-size:66px}
  .note .q p{font-size:17.5px;line-height:1.38}
  .note .q p + p{margin-top:10px}
  .note .meet p{font-size:17.5px;line-height:1.38}
}

/* WordPress wraps blocks in its own classes. Stop its layout helpers from
   adding margins on top of the spacing this design already sets. */
/* WordPress adds vertical margins between blocks. Kill those, but NOT the
   horizontal ones: every .wrap on this site centres itself with margin:0 auto,
   and a blanket margin:0 here jams every fold against the left edge. */
.wp-block-group{margin-top:0;margin-bottom:0}
.reviews .grp > .wp-block-group,
.rough .panel > .wp-block-group{margin:0}

/* The small red labels and the "Save $3" tag are <p> in WordPress rather than
   <span>, so they are editable in the block editor. That makes them a target
   for the paragraph rules in About and in the bundle card, which set a reading
   measure and a bottom margin. They are components, not body copy. */
p.label{max-width:none;margin-bottom:0}
.bk .bundle p.save{max-width:none}