/* Life Lessons from Pickleball — site styles
   Colors and fonts match the book cover. */
:root{
  --purple:#6F3B91;      /* brand purple */
  --plum:#6F3B91;        /* same as brand purple: nothing darker */
  --purple-light:#8853AB; /* hover color, lighter than the brand purple */
  --green:#A2D95A;       /* brand green */
  --green-ink:#4F7A12;   /* green dark enough for text on light backgrounds */
  --lavender:#F6F0F9;    /* page surface */
  --ink:#2B1A33;
  --muted:#5E4A68;
  --white:#fff;
  --serif:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-underline-offset:3px}
a:hover{color:var(--plum)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:720px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.25;color:var(--plum);margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}
.lede{font-size:1.2rem;color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}

/* Header */
.site-header{background:var(--white);border-bottom:1px solid #EADCF0;position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.wordmark{font-family:var(--serif);font-size:1.15rem;color:var(--plum);text-decoration:none;line-height:1.1;white-space:nowrap}
.wordmark em{color:var(--purple)}
.wordmark sup{font-size:.55em}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--purple)}
.nav a[aria-current="page"]{border-bottom-color:var(--green);color:var(--plum)}
.nav .btn{padding:.6rem 1.1rem;border-bottom:0}
.menu-toggle{display:none;font-family:var(--sans);font-weight:600;font-size:.9rem;background:none;border:2px solid var(--plum);color:var(--plum);border-radius:999px;padding:.45rem 1rem;cursor:pointer}

/* Buttons */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;border-radius:999px;padding:.85rem 1.5rem;border:2px solid transparent;line-height:1.2;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-green{background:var(--green);color:var(--plum)}
.btn-green:hover{background:#B8E47E;color:var(--plum)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-light);color:#fff}
.btn-outline{border-color:currentColor;color:var(--purple);background:transparent}
.btn-outline:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.on-purple .btn-outline{color:#fff}
.on-purple .btn-outline:hover{background:#fff;color:var(--purple);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* Sections */
.section{padding:5.5rem 0}
.section.tight{padding:3.5rem 0}
.bg-lavender{background:var(--lavender)}
.on-purple{background:var(--purple);color:#fff}
.on-purple h1,.on-purple h2,.on-purple h3{color:#fff}
.on-purple a:not(.btn){color:#fff}
.on-purple .lede{color:#F1E4F7}

/* Hero */
.hero{padding:5rem 0 5.5rem}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:4rem;align-items:center}
.hero h1{font-style:italic}
.hero .rule{width:96px;height:3px;background:var(--green);margin:1.6rem 0}
.hero-cover{justify-self:center;width:min(340px,80%);box-shadow:18px 26px 50px rgba(60,10,80,.35)}
.page-hero{padding:4rem 0 3.5rem}
.page-hero h1{margin-bottom:.4em}
.page-hero .lede{max-width:44rem;margin:0}

/* The lesson page — echoes the life-lesson pages in the book */
.lesson-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.book-page{background:#fff;aspect-ratio:5.5/7;max-width:430px;width:100%;justify-self:center;display:flex;flex-direction:column;align-items:center;padding:2.4rem 2.2rem;box-shadow:0 1px 0 #E3D3EA, 10px 18px 40px rgba(78,16,99,.14);text-align:center}
.book-page .running{font-size:.78rem;color:var(--muted)}
.book-page blockquote{margin:auto 0;font-style:italic;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.45;color:var(--plum)}
.book-page .from{font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.book-page .from::before{content:"";display:block;width:56px;height:2px;background:var(--green);margin:0 auto .9rem}
.book-page.turning blockquote,.book-page.turning .from{opacity:0;transform:translateX(-14px)}
.book-page blockquote,.book-page .from{transition:opacity .35s ease,transform .35s ease}

/* Themes */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:2.5rem}
.theme h3{color:var(--purple);font-style:italic;font-size:1.6rem;padding-top:1rem;border-top:3px solid var(--green);display:inline-block}
.theme .sample{font-style:italic;color:var(--plum)}

/* Two column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.split.center{align-items:center}

/* Lists */
.ways{list-style:none;padding:0;margin:0}
.ways li{padding:.9rem 0 .9rem 2rem;border-bottom:1px solid #E6D7EE;position:relative}
.ways li::before{content:"";position:absolute;left:0;top:1.55rem;width:12px;height:12px;border-radius:50%;border:2px solid var(--green)}
.ways li:last-child{border-bottom:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding-left:3rem;position:relative;margin-bottom:1.4rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--purple);color:#fff;font-family:var(--sans);font-weight:600;font-size:.9rem;display:grid;place-items:center}

/* Details table */
.details{width:100%;border-collapse:collapse;font-size:1rem}
.details th,.details td{text-align:left;padding:.8rem 0;border-bottom:1px solid #E6D7EE;vertical-align:top}
.details th{font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--muted);width:38%}

/* Buy options */
.buy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2rem}
.buy-option{background:#fff;padding:2rem;border-top:4px solid var(--purple)}
.buy-option h2{font-size:1.5rem}

/* Voices */
.voices{columns:4 200px;column-gap:2.5rem;list-style:none;padding:0;margin:2rem 0 0;font-size:1rem}
.voices li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid #EBDDF1}

/* Authors */
.author{display:grid;grid-template-columns:220px 1fr;gap:3rem;align-items:start;padding:3rem 0;border-bottom:1px solid #E6D7EE}
.author:last-child{border-bottom:0}
.portrait{position:relative;width:220px;aspect-ratio:4/5;background:var(--purple);display:grid;place-items:center;overflow:hidden}
.portrait span{font-family:var(--serif);font-style:italic;font-size:3.6rem;color:var(--green)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.author .role{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:-.4rem}

/* Forms */
.form{display:grid;gap:1.2rem;max-width:640px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field label{display:block;font-family:var(--sans);font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--plum)}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #CDB6D8;border-radius:6px;padding:.75rem .9rem}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(111,59,145,.2)}
.hidden{position:absolute;left:-9999px}

/* Callout band */
.band{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.band p{margin:0;max-width:40rem}

/* Footer */
.site-footer{background:var(--purple);border-top:4px solid var(--green);color:#F6EEFA;padding:3.5rem 0 2.5rem;font-family:var(--sans);font-size:.9rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer-grid h2{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--green);margin-bottom:.8rem}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:.45rem}
.footer-word{font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:.6rem}
.copyright{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.3);color:#F1E4F7;font-size:.82rem}

/* Responsive */
@media (max-width:900px){
  .hero .wrap,.lesson-stage,.split{grid-template-columns:1fr;gap:2.5rem}
  .hero-cover{width:min(260px,70%)}
  .themes{grid-template-columns:1fr;gap:1.5rem}
  .buy-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  .author{grid-template-columns:1fr;gap:1.5rem}
  .portrait{width:180px}
}
@media (max-width:1120px){
  .menu-toggle{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 1.5rem 1.5rem;border-bottom:1px solid #EADCF0}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0;width:100%}
  .nav .btn{margin-top:.8rem;width:auto}
}
@media (max-width:560px){
  .section{padding:4rem 0}
  .form .row{grid-template-columns:1fr}
  .wordmark{font-size:1rem}
  .book-page{padding:1.8rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
.nav a.btn-purple,.nav a.btn-purple:hover{color:#fff}
.nav a.btn-purple[aria-current="page"]{background:var(--purple-light)}

/* Light hero (home page): lets the cover stand out */
.hero-light h1{font-size:clamp(1.7rem,3.1vw,2.45rem);line-height:1.3;color:var(--purple)}
.hero-light .lede{color:var(--muted)}
.hero-light .hero-cover{box-shadow:14px 22px 44px rgba(111,59,145,.28)}
/* Keep narrow text columns aligned with the page's left edge */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow > *{max-width:720px}
@media (max-width:900px){.hero-light .hero-cover{order:-1;width:min(220px,60%)}}

/* Home page: shorter hero plus a cue that the page continues */
html{scroll-behavior:smooth}
.hero.hero-light{padding:3.5rem 0 1.25rem}
.hero-light .hero-cover{width:min(300px,78%)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:max-content;margin:2.25rem auto 0;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--purple);text-decoration:none}
.scroll-cue:hover{color:var(--purple-light)}
.scroll-cue svg{animation:cue-bounce 1.6s ease-in-out 3}
@keyframes cue-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
#more{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-cue svg{animation:none}}
@media (max-width:900px){.hero.hero-light{padding-top:2.5rem}.scroll-cue{margin-top:1.75rem}}
#more.section{padding-top:3.5rem}

/* Wordmark: larger, upright */
.wordmark{font-size:1.4rem}
@media (max-width:1180px){.wordmark{font-size:1.2rem}}
@media (max-width:560px){.wordmark{font-size:1.05rem}}
/* Author photos */
.portrait{width:240px}
@media (max-width:900px){.portrait{width:200px}}
.nav a{white-space:nowrap}

/* Bolder wordmark */
.wordmark{font-weight:700;letter-spacing:-.01em}
/* Green accents */
.page-hero h1::after{content:"";display:block;width:96px;height:3px;background:var(--green);margin-top:1.3rem}
.page-hero .lede{margin-top:1.2rem}
.buy-option{border-top-color:var(--green)}
.portrait{border-bottom:5px solid var(--green)}
.ws-box{background:var(--lavender);padding:2rem 2.2rem;border-top:4px solid var(--green)}
.ws-box h2{font-size:1.6rem}
.price{font-family:var(--sans);font-weight:600;color:var(--purple);display:inline-block;padding-bottom:.3rem;border-bottom:3px solid var(--green)}
.isbn{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--purple)}
/* Longer menu: switch to the Menu button a bit sooner */
@media (max-width:1240px){
  .menu-toggle{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:.5rem 1.5rem 1.5rem;border-bottom:1px solid #EADCF0}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0;width:100%}
  .nav .btn{margin-top:.8rem;width:auto}
}
.form-status{font-family:var(--sans);font-weight:600;color:#9B2C2C;margin:0}
.btn[disabled]{opacity:.7;cursor:wait}