/* The Science of Electric Cars — site styles. Built from the design system (tokens + components) and the canvas layout. */

/* ---- design tokens ---- */
/* Science of Electric Cars — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #ffffff;
  --mist: #f3f6fa;
  --line: #dce3ec;
  --ink: #14213d;
  --ink-2: #3b4660;
  --ink-3: #5b6884;
  --blue: #3070b8;
  --navy: #183c90;
  --sky: #78ccf0;
  --yellow: #f0e484;
  --orange: #f0900c;
  --coral: #f09090;
  --teal: #309ca8;
  --purple: #906cc0;
  --purple-deep: #7a55b0;
  --green: #3cb460;
  --on-dark: #ffffff;
  --on-dark-muted: #d7e2f5;
  --safety-bg: #fff4e2;
  --offset-ink: 4px 4px 0 #14213D;
  --offset-ink-sm: 3px 3px 0 #14213D;
  --offset-sky: 5px 5px 0 #78CCF0;
  --book: 0 30px 50px -18px rgba(20,33,61,0.45), 0 10px 18px -8px rgba(20,33,61,0.3);
}
:root {
  --gutter-phone: 16px;
  --gutter-desktop: 28px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --section: 72px;
  --section-lg: 88px;
  --container: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --stroke-outline: 3px;
  --stroke-doodle: 2.6px;
  --font-hand: "Amatic SC", "Comic Sans MS", cursive;
  --font-title: "Optima Pro", Optima, "Optima nova LT Pro", Cabin, sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display-hand { font-family: var(--font-hand); font-size: 70px; line-height: 0.95; font-weight: 700; letter-spacing: 0.03em; }
.section-hand { font-family: var(--font-hand); font-size: 67px; line-height: 1.05; font-weight: 700; letter-spacing: 0.02em; }
.subtitle-hand { font-family: var(--font-hand); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: 0.03em; }
.title-hero { font-family: var(--font-title); font-size: 115px; line-height: 0.88; font-weight: 700; }
.section-heavy { font-family: var(--font-cond); font-size: 58px; line-height: 1.05; font-weight: 800; }
.price { font-family: var(--font-cond); font-size: 42px; line-height: 1; font-weight: 800; }
.card-title { font-family: var(--font-cond); font-size: 25px; line-height: 1; font-weight: 800; }
.item-title { font-family: var(--font-cond); font-size: 19px; line-height: 1.1; font-weight: 800; }
.overline { font-family: var(--font-cond); font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: 0.06em; }
.lede { font-family: var(--font-body); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 15px; line-height: 1.5; font-weight: 400; }
.button { font-family: var(--font-body); font-size: 17px; line-height: 1.1; font-weight: 700; }
.tab { font-family: var(--font-body); font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0.02em; }

/* ---- components ---- */
/* Optima Pro Bold: licensed by the publisher, the weight that matches the cover's title strokes. Add the web font file's url() first in src once it is installed; until then local copies are used. */
@font-face{font-family:"Optima Pro";font-weight:700;font-style:normal;src:local("Optima Pro Bold"),local("OptimaPro-Bold"),local("Optima Bold"),local("Optima-Bold")}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}
.soec-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:16px}
.soec-dark{background:var(--navy);color:var(--on-dark)}

/* ChapterTab */
.soec-tab-wrap{display:inline-flex;align-items:stretch}
.soec-tab{display:inline-flex;align-items:center;gap:.45em;padding:.32em 1.5em .32em .75em;margin-right:46px;background:var(--c,var(--sky));color:var(--t,var(--ink));font:600 13px/1.2 var(--font-body);letter-spacing:.02em;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.soec-tab-wrap::after{content:"";width:34px;margin-left:-40px;background:var(--c,var(--sky));opacity:.45;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.soec-tab img{width:1em;height:1em}
.c-sky{--c:var(--sky)} .c-yellow{--c:var(--yellow)} .c-orange{--c:var(--orange)} .c-coral{--c:var(--coral)}
.c-teal{--c:var(--teal)} .c-green{--c:var(--green)} .c-blue{--c:var(--blue);--t:var(--on-dark)} .c-navy{--c:var(--navy);--t:var(--on-dark)}
.c-purple{--c:var(--purple)} .c-purple .soec-tab{background:var(--purple-deep);--t:var(--on-dark)}

/* Button */
.soec-btn{display:inline-flex;align-items:center;gap:.55em;min-height:52px;padding:.7em 1.4em;border-radius:var(--radius-pill);border:var(--stroke-outline) solid var(--ink);font:700 17px/1.1 var(--font-body);text-decoration:none;cursor:pointer;background:var(--paper);color:var(--ink)}
.soec-btn--primary{background:var(--blue);color:var(--on-dark);border-width:1.5px;border-color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.soec-btn--primary:hover{background:var(--navy)}
.soec-btn--ghost:hover{background:var(--yellow)}
.soec-btn--yellow{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 #0b1530}
.soec-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 7px var(--yellow)}
.soec-dark .soec-btn:focus-visible{outline-color:var(--yellow)}

/* OffsetCard */
.soec-card{border:var(--stroke-outline) solid var(--ink);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--paper);box-shadow:5px 5px 0 var(--c,var(--sky));max-width:320px}
.soec-card h3{margin:12px 0 8px;font:800 25px/1 var(--font-cond);text-transform:uppercase}
.soec-card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}

/* ChapterCard */
.soec-chapter{background:var(--paper);border-radius:var(--radius-lg);padding:16px 16px 18px;border-top:6px solid var(--c,var(--sky));box-shadow:0 1px 0 var(--line);width:240px}
.soec-chapter h3{margin:12px 0 8px;font:800 21px/1.05 var(--font-cond);text-transform:uppercase}
.soec-chapter ul{margin:0;padding-left:1.1em;color:var(--ink-2);font-size:15px;line-height:1.55}
.soec-chapter .pg{display:block;margin-top:8px;font:600 13px var(--font-body);color:var(--ink-3)}

/* AwardBadge — the official Mom's Choice Awards seal, never redrawn, recolored, rotated or cropped */
.soec-seal{display:block;width:128px;height:128px;filter:drop-shadow(3px 4px 0 rgba(20,33,61,.35))}
.soec-chip{display:inline-flex;align-items:center;gap:.5em;background:var(--navy);color:var(--on-dark);border-radius:var(--radius-pill);padding:.35em .95em .35em .35em;font:700 14px/1.2 var(--font-body)}
.soec-chip img{width:28px;height:28px}
.soec-cred{background:var(--yellow);border:var(--stroke-outline) solid var(--ink);border-radius:var(--radius-lg);padding:16px 16px 18px;box-shadow:4px 4px 0 rgba(0,0,0,.3);width:300px}
.soec-cred .k{display:flex;gap:.4em;align-items:center;font:800 12px/1 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.soec-cred .k img{width:22px;height:22px}
.soec-cred strong{display:block;margin-top:8px;font:800 23px/1.05 var(--font-cond);text-transform:uppercase}
.soec-cred small{display:block;margin-top:4px;color:var(--ink-2);font-size:14px}

/* SpreadTile */
.soec-spread{width:320px}
.soec-spread .frame{border:var(--stroke-outline) solid var(--ink);border-radius:var(--radius-md);overflow:hidden;box-shadow:5px 5px 0 var(--c,var(--sky));aspect-ratio:2400/1553;background:var(--mist)}
.soec-spread img{width:100%;height:100%;object-fit:cover;display:block}
.soec-spread .cap{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.soec-spread h3{margin:0;font:800 18px/1.1 var(--font-cond);text-transform:uppercase}
.soec-spread .pg{font:600 13px var(--font-body);color:var(--ink-3)}

/* SectionHeading */
.soec-heading{padding:16px}
.soec-heading h2{margin:14px 0 0;font:700 67px/1.05 var(--font-hand);text-transform:uppercase;letter-spacing:.02em}
.soec-heading h2 b{font:800 .86em/1 var(--font-cond);letter-spacing:.005em}
.soec-heading p{margin:12px 0 0;max-width:60ch;font-size:18px;line-height:1.6;color:var(--ink-2)}

/* ---- page layout ---- */
/* Shared layout for every page of the site. Colors, fonts and sizes live inline on each element so they can be edited in the properties panel. */

/* Title font: Optima Pro Bold, the weight whose stroke thickness matches the printed cover. Once the licensed web font file is installed, add its url() first in src. Until then, local copies are used (Macs ship Optima Bold), then Cabin. */
@font-face{font-family:"Optima Pro";font-weight:700;font-style:normal;src:local("Optima Pro Bold"),local("OptimaPro-Bold"),local("Optima Bold"),local("Optima-Bold")}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.nav{display:none;gap:4px;align-items:center}
.nav-phone{display:flex;gap:4px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.nav-link{color:#14213D;text-decoration:none;font-weight:600;font-size:15px;padding:8px 11px;border-radius:8px;white-space:nowrap}
.nav-link:hover{background:#F3F6FA;color:#183C90}
.nav-link.is-current{background:#F0E484;color:#14213D}
.hero-grid{display:grid;gap:28px;align-items:center}
/* The hero text column is a size container, so the one-line subtitle can scale with the column's width (cqi units) instead of the window's. */
.hero-text{container-type:inline-size;min-width:0}
.band-grid{display:grid;gap:36px;align-items:center}
.buy-grid{display:grid;gap:32px;align-items:center}
.review-grid{display:grid;gap:34px;align-items:center}
.more-split{display:grid;gap:18px}
.feature{grid-column:1/-1}

@media (min-width:700px){.wrap{padding:0 28px}}
@media (min-width:880px){
  .nav{display:flex}
  .nav-phone{display:none}
  .buy-grid{grid-template-columns:300px 1fr;gap:56px}
  .more-split{grid-template-columns:1.25fr 1fr}
}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:48px}
  .band-grid{grid-template-columns:260px 1fr;gap:56px}
  .review-grid{grid-template-columns:1.1fr .9fr;gap:56px}
}

/* ---- site extras ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#FFFFFF}
img{max-width:100%}
a{color:#3070B8;text-underline-offset:.18em}
a:hover{color:#183C90}
:focus-visible{outline:3px solid #183C90;outline-offset:3px;box-shadow:0 0 0 7px #F0E484;border-radius:6px}
section[style*="#3070B8"] :focus-visible,footer :focus-visible{outline-color:#F0E484;box-shadow:0 0 0 7px rgba(240,228,132,.25)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#183C90;color:#fff;padding:.6em 1em;border-radius:8px;font-weight:700;font-family:Barlow,system-ui,sans-serif}
.skip:focus{top:12px;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-link.is-current{text-decoration:none}
.soec-btn--primary:hover{color:#fff}
.soec-btn--yellow:hover{background:#fff;color:#14213D}

/* gallery spreads: the image is a button that opens the full-size viewer */
.spread-btn{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:10px}
.spread-btn picture{display:block}
.spread-btn img{transition:transform .18s ease}
.spread-btn:hover img{transform:translate(-2px,-2px)}
.spread-btn:focus-visible{outline:3px solid #183C90;outline-offset:6px}

dialog.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0}
dialog.lightbox::backdrop{background:rgba(10,18,40,.92)}
.lb-inner{display:flex;flex-direction:column;height:100%;padding:12px 16px 16px;color:#fff;font-family:Barlow,system-ui,sans-serif}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px}
.lb-title{margin:0;font:800 1.2rem/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.lb-stage picture{display:contents}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lb-nav{display:flex;justify-content:center;gap:12px;margin-top:12px}
.icon-btn{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#14213D;cursor:pointer;border:3px solid #14213D}
.icon-btn:hover{background:#F0E484}
.icon-btn:focus-visible{outline:3px solid #F0E484;outline-offset:3px}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lb-count{align-self:center;font:600 .95rem Barlow,sans-serif;min-width:5em;text-align:center}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* keep spread images at the book's proportions (the width/height attributes are only for layout reservation) */
.spread-btn img{height:auto}

/* On narrow screens, pull the award seal inside the screen edge so it is never clipped. */
@media (max-width:600px){
  .hero-grid img[alt="Mom's Choice Awards Gold seal"]{left:-12px!important;top:-28px!important;width:104px!important;height:104px!important}
  .buy-grid img[alt="Mom's Choice Awards Gold seal"]{right:-12px!important}
}

/* Animated stick figures: each GIF has 15% clear space on every side so the figure
   can move without being clipped. Scaling by 1.3 brings the drawing back to its old size. */
.fig-anim{transform:scale(1.3);transform-origin:50% 50%}

/* Phones: the cover sits below the text, so keep the two cover figures beside the cover and on screen. */
@media (max-width:899px){
  .hero-grid img[src*="figures/megaphone"]{display:none!important}
  .hero-grid img[src*="figures/think"]{width:40px!important;right:-40px!important;bottom:40px!important}
}
/* Narrow desktops: keep the thinking figure on screen. */
@media (min-width:900px) and (max-width:1119px){.hero-grid img[src*="figures/think"]{right:-26px!important}}

/* Phones: show the book cover first, above the title and text. */
@media (max-width:899px){.hero-grid > div:last-child{order:-1}}