/* Naomi Saito channel site. Same skeleton as the Emily Hart site (sites/emily-hart), dressed in
   linen and honey wood like the book cover, indigo only for the title text. The big sections are light
   linen (the user did not want dark blue or the grid pattern, 2026-11-04); small dark parts (sale bar,
   footer, sticky bar) are warm sumi-ink charcoal. Readers are women over fifty: body text 20px. */
:root {
  --night: #2d2925;        /* sumi ink, warm charcoal */
  --night-deep: #24211e;
  --indigo: #1f2d4a;       /* the cover's title colour */
  --linen: #ece4d6;        /* the cover's backdrop */
  --linen-deep: #e2d7c4;
  --btn: #a6442a;          /* persimmon */
  --btn-dark: #85341f;
  --accent: #9a3f26;
  --sand: #c9b48a;
  --sand-light: #e9dcc0;
  --lilac: #b7a9d1;        /* June hydrangeas */
  --on-night-muted: #d9d1c4;

  --bg: #f6f1e7;           /* plaster and linen */
  --bg-alt: #fbf8f2;
  --card: #fffdf9;
  --wood: #b07a45;
  --ink: #1b1d24;
  --muted: #4d4a48;
  --line: #e3d8c6;
  --on-night: #f4efe4;
  --font-head: "Shippori Mincho", "Libre Caslon Text", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Klee One", "Segoe Script", cursive;
  --radius: 14px;
  /* running stitches (sashiko) in two colors */
  --stitch-sand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='4'%3E%3Crect x='0' y='1' width='12' height='2' rx='1' fill='%23e9dcc0'/%3E%3C/svg%3E");
  --stitch-taupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='4'%3E%3Crect x='0' y='1' width='12' height='2' rx='1' fill='%23a8956f'/%3E%3C/svg%3E");
  --stitch-indigo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='4'%3E%3Crect x='0' y='1' width='12' height='2' rx='1' fill='%231f2d4a'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 20px/1.62 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.18; margin: 0 0 .45em; letter-spacing: -.005em; }
h1 em, h2 em { font-style: normal; font-weight: 500; color: var(--accent); }
p { margin: 0 0 1em; }
.label { display: inline-block; font: 700 15px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 10px; top: 10px; }

/* sale bar: plain facts, no countdown */
.salebar { display: block; text-align: center; background: var(--night-deep); color: var(--on-night); font-size: 17px; line-height: 1.45; padding: 10px 16px; text-decoration: none; }
.salebar b { color: var(--sand-light); }
.salebar:hover .salebar-go { text-decoration: underline; }

/* header */
.site-head { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; }
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font: 700 26px/1.1 var(--font-head); }
.brand span { font-size: 16px; color: var(--muted); }
.nav { display: flex; gap: 26px; font-size: 19px; }
.brand b, .nav a { white-space: nowrap; }
.nav a { text-decoration: none; border-bottom: 2px solid transparent; padding: 6px 0; }
.nav a:hover, .nav a[aria-current] { border-color: var(--btn); }

/* a strip of indigo cloth with running stitches under the header */
.stitch { height: 18px; background: var(--stitch-taupe) repeat-x 6px 7px / 22px 4px, var(--linen); }

/* linen sections (class name kept from the Emily skeleton): hero, care, final, inner page heads */
.night { background: linear-gradient(180deg, var(--linen), var(--linen-deep)); color: var(--ink); position: relative; overflow: hidden; }
.night p { color: var(--muted); }
.night b, .night strong { color: var(--ink); }

/* hero */
.hero { padding: 64px 0 68px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.4vw, 66px); color: var(--indigo); margin-bottom: .2em; }
.stack-title { text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.stack-title span { display: block; }
.stack-title small { display: block; text-transform: none; letter-spacing: 0; font: 500 .44em/1.2 var(--font-head); color: var(--accent); margin-top: .4em; }
.hero .sub { font: 500 clamp(22px, 2.4vw, 28px)/1.35 var(--font-head); color: var(--ink); margin: 0 0 18px; }
.lead { font-size: 21px; max-width: 34em; }
.price { font: 700 52px/1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: lining-nums; margin: 24px 0 6px; color: var(--ink); }
.ebook-note { font-size: 18px; margin: 0 0 18px; }
.night .ebook-note { color: var(--muted); }
.ebook-note.center { text-align: center; margin-top: 12px; }
.guar-line { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 18px; }
.mini-seal { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--btn); color: var(--accent); display: grid; place-items: center; font: 700 17px var(--font-head); }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 18px; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 9px; border-left: 3px solid var(--btn); border-bottom: 3px solid var(--btn); transform: rotate(-45deg); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--btn); color: #fff; text-decoration: none; font: 700 21px/1.2 var(--font-body); padding: 18px 34px; border-radius: 999px; border: 0; cursor: pointer; min-height: 60px; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); text-align: center; }
.btn:hover { background: var(--btn-dark); }
.btn-big { font-size: 22px; padding: 20px 38px; }
.btn.small { font-size: 18px; padding: 12px 22px; min-height: 50px; }
.btn.is-placeholder { opacity: .78; cursor: not-allowed; }
.placeholder-note { display: block; font-size: 16px; margin-top: 8px; opacity: .8; }
.is-placeholder-text { font-style: italic; }

/* the book: a CSS 3D book (as on the Emily site). Until the real cover exists the face is a
   typeset placeholder cover (.cover-css); swap it for <img class="b3d-face" src="assets/img/covers/front.webp">. */
.bookwrap { display: flex; justify-content: center; }
.b3d { --t: 30px; position: relative; width: 100%; max-width: 350px; perspective: 1700px; }
.b3d.small { --t: 24px; max-width: 240px; margin: 40px auto 0; }
.b3d-book { display: block; position: relative; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(4deg); transition: transform .8s cubic-bezier(.2, .7, .2, 1); text-decoration: none; }
.b3d:hover .b3d-book { transform: rotateY(-14deg) rotateX(2deg); }
.b3d-book.follow { transition: transform .18s ease-out; }
.b3d-face { position: relative; display: block; width: 100%; height: auto; transform: translateZ(calc(var(--t) / 2)); border-radius: 2px 6px 6px 2px; backface-visibility: hidden; }
.b3d-book::after { content: ""; position: absolute; inset: 0; transform: translateZ(calc(var(--t) / 2 + .5px)); border-radius: 2px 6px 6px 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(255, 255, 255, .18) 1.2%, rgba(0, 0, 0, .1) 2.6%, rgba(0, 0, 0, 0) 5%),
    linear-gradient(115deg, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%); }
.b3d-pages { position: absolute; top: 1.2%; bottom: 1.2%; right: calc(var(--t) / -2 + 3px); width: var(--t); transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .22)), repeating-linear-gradient(90deg, #f7f2e7 0 2px, #ddd3c0 2px 3px); }
.b3d-back { position: absolute; inset: 0; transform: translateZ(calc(var(--t) / -2)); background: #101626; border-radius: 2px 6px 6px 2px; box-shadow: 34px 40px 60px -18px rgba(0, 0, 0, .6); }
.b3d::after { content: ""; position: absolute; left: 4%; right: -10%; bottom: -7%; height: 9%; background: radial-gradient(closest-side, rgba(60, 40, 20, .35), rgba(60, 40, 20, 0)); filter: blur(4px); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .b3d-book, .b3d-book.follow { transition: none; } }

/* placeholder cover: linen board, an indigo band with stitches, the title */
.cover-css { aspect-ratio: 2 / 3; background: #efe7d7; color: var(--night); display: flex; flex-direction: column; padding: 12% 10% 9%; overflow: hidden;
  background-image: repeating-linear-gradient(0deg, rgba(120, 100, 70, .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .05) 0 1px, transparent 1px 3px); }
.cover-css .c-kicker { font: 700 11px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.cover-css .c-title { font: 700 clamp(34px, 3.8vw, 46px)/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.cover-css .c-title span { display: block; }
.cover-css .c-sub { font: 500 19px/1.3 var(--font-head); color: var(--accent); }
.cover-css .c-band { margin: auto -12% 0; height: 34%; background: var(--stitch-sand) repeat-x 0 22% / 22px 4px, var(--stitch-sand) repeat-x 11px 78% / 22px 4px, linear-gradient(180deg, #24355a, #18233e); display: grid; place-items: center; }
.cover-css .c-band i { width: 46px; height: 46px; border-radius: 50%; background: var(--sand-light); box-shadow: 0 0 0 6px rgba(233, 220, 192, .25); }
.cover-css .c-name { font: 700 15px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin-top: 14px; text-align: center; }
.b3d.small .cover-css .c-title { font-size: 28px; }
.b3d.small .cover-css .c-sub { font-size: 15px; }
.b3d.small .cover-css .c-name { font-size: 12px; }

/* sections */
.block { padding: 84px 0; }
.block.alt { background: var(--bg-alt); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(32px, 3.8vw, 46px); }
.section-head p { color: var(--muted); }
.stitch-rule { height: 4px; width: 132px; background: var(--stitch-indigo) repeat-x 0 0 / 22px 4px; margin: 0 0 20px; opacity: .8; }

/* a note from Naomi */
.why { display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: center; }
.portrait { border-radius: var(--radius); box-shadow: 0 26px 50px -30px rgba(30, 25, 20, .6); width: 100%; }
.framed { padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: 0 26px 50px -34px rgba(30, 25, 20, .6); }
.framed .portrait { box-shadow: none; border-radius: var(--radius); }
.why h2 { font-size: clamp(32px, 3.8vw, 46px); }
.why p { color: var(--muted); }
.sign { font: 600 34px/1 var(--font-hand); color: var(--night) !important; margin-top: 14px; }
.sign small { display: block; font: 400 17px/1.4 var(--font-body); color: var(--muted); margin-top: 8px; }

/* one change: hem, collar, color */
.changes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.change { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.change-pic { background: #f1eadc; border-bottom: 1px solid var(--line); padding: 18px 18px 10px; }
.change-pic svg { width: 100%; height: auto; display: block; }
.block h2 { font-size: clamp(30px, 3.6vw, 42px); }
.one-change { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.one-change p { color: var(--muted); }
.change-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 26px 50px -34px rgba(30, 25, 20, .6); }
.change-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plist { list-style: none; counter-reset: p; padding: 0; margin: 26px 0 0; }
.plist li { counter-increment: p; position: relative; padding: 16px 0 16px 58px; border-top: 1px solid var(--line); font-size: 21px; }
.plist li:last-child { border-bottom: 1px solid var(--line); }
.plist li::before { content: counter(p); position: absolute; left: 0; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--linen); color: var(--indigo); font: 700 20px/40px var(--font-head); text-align: center; }
.plus { margin-top: 22px; color: var(--muted); }
.guide-note { margin: 24px 0 0; color: var(--muted); }
.change-photo .badge { position: absolute; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 18px/1 var(--font-body); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.change-photo .badge.no { left: 10px; background: var(--btn); }
.change-photo .badge.yes { left: calc(50% + 10px); background: #2e7d4f; }
.change-body { padding: 20px 22px 24px; }
.change h3 { font-size: 25px; margin-bottom: 10px; }
.change p { margin: 0 0 10px; color: var(--muted); font-size: 19px; }
.change .test { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink); font-size: 18px; }
.change .test b { color: var(--accent); }
.more-note { color: var(--muted); margin-top: 22px; }

/* look inside (pages to come) */
.swipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 250px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; -webkit-overflow-scrolling: touch; }
.swipe > * { scroll-snap-align: start; }
.swipe-hint { font-size: 17px; color: var(--muted); margin: 6px 0 0; }
.page-thumb { margin: 0; }
.page-ph { aspect-ratio: 8.5 / 11; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 28px -14px rgba(35, 28, 22, .55); display: flex; flex-direction: column; padding: 14% 12%; gap: 8px; }
.page-ph .ph-k { font: 700 11px/1.3 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.page-ph .ph-t { font: 700 22px/1.15 var(--font-head); color: var(--night); }
.page-ph .ph-l { height: 7px; border-radius: 4px; background: #ece5d8; }
.page-ph .ph-l.s { width: 70%; }
.page-ph .ph-img { flex: 1; border-radius: 4px; margin: 6px 0; background: repeating-linear-gradient(135deg, #f2ece0 0 10px, #ebe3d3 10px 20px); display: grid; place-items: center; font: 700 13px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #8a7f6e; text-align: center; padding: 8px; }
.page-thumb button { all: unset; cursor: zoom-in; display: block; }
.page-thumb img { border-radius: 3px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 28px -14px rgba(35, 28, 22, .55); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); max-height: 94vh; }
.lightbox::backdrop { background: rgba(10, 12, 20, .88); }
.lightbox img { max-height: 90vh; width: auto; margin: 0 auto; }
.lightbox button { position: fixed; top: 14px; right: 18px; font-size: 40px; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }
.page-thumb figcaption { font-size: 17px; color: var(--muted); margin-top: 10px; line-height: 1.35; }

/* five parts */
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.parts article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 22px; }
.parts .pn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night); color: var(--sand-light); font: 700 18px/1 var(--font-head); }
.parts h3 { font-size: 25px; margin: 14px 0 8px; }
.parts p { margin: 0; color: var(--muted); font-size: 19px; }
.parts article.extra { background: var(--night); border-color: var(--night); color: var(--on-night); }
.parts article.extra h3 { color: #fff; }
.parts article.extra p { color: var(--on-night-muted); }
.parts article.extra .pn { background: var(--sand-light); color: var(--night); }

/* care: grandmother's habits */
.care { padding: 80px 0; }
.care h2 { font-size: clamp(32px, 3.8vw, 46px); max-width: 20em; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.cards4 article { background: rgba(255, 255, 255, .6); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; }
.cards4 svg { width: 40px; height: 40px; fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.cards4 h3 { font-size: 23px; }
.cards4 p { margin: 0; font-size: 19px; }
.word { font: 500 22px/1.5 var(--font-head); margin: 32px 0 0; max-width: 36em; color: var(--ink) !important; }
.word b { color: var(--accent); }

/* quote */
.pq { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; max-width: 900px; }
.pq img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 6px solid var(--card); box-shadow: 0 0 0 2px var(--line), 0 20px 40px -24px rgba(30, 25, 20, .6); }
.pq blockquote { margin: 0; font: 500 clamp(24px, 2.8vw, 33px)/1.4 var(--font-head); }
.pq cite { display: block; font: 700 19px/1.4 var(--font-body); font-style: normal; margin-top: 16px; color: var(--accent); }

/* this book is for you if */
.fit { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.fit li { padding-left: 34px; position: relative; }
.fit li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 16px; height: 9px; border-left: 3px solid var(--btn); border-bottom: 3px solid var(--btn); transform: rotate(-45deg); }

/* buy box */
.buybox { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 44px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: start; box-shadow: 0 30px 60px -44px rgba(30, 25, 20, .7); }
.buybox h2 { font-size: clamp(30px, 3.4vw, 42px); }
.stack { list-style: none; padding: 0; margin: 0 0 22px; }
.stack li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 19px; }
.stack li span:last-child { color: var(--muted); white-space: nowrap; }
.pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.pay strong { font: 700 50px/1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.pay small { color: var(--muted); font-size: 18px; }
.was { font: 400 28px/1 var(--font-body); color: var(--muted); text-decoration-thickness: 2px; margin-right: 6px; }
.buybox .btn { width: 100%; }
.guarantee { display: flex; gap: 18px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.guarantee p { margin: 0; font-size: 19px; }
.seal { flex: none; width: 78px; height: 78px; border-radius: 50%; background: var(--night); color: var(--sand-light); display: grid; place-content: center; text-align: center; outline: 2px dashed var(--sand); outline-offset: -8px; }
.seal b { font: 700 28px/1 var(--font-head); color: var(--sand-light); }
.seal small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* how your book works */
.guide { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: guide; }
.guide li { counter-increment: guide; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; position: relative; }
.guide li::before { content: counter(guide); position: absolute; top: 18px; right: 20px; font: 700 32px/1 var(--font-head); color: var(--line); }
.guide svg { width: 44px; height: 44px; fill: none; stroke: var(--night); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.guide h3 { font-size: 23px; margin-bottom: 8px; }
.guide p { margin: 0; color: var(--muted); font-size: 19px; }
.guide-help { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.guide-help > div { background: var(--night); color: var(--on-night); border-radius: 16px; padding: 22px 24px; }
.guide-help h3 { font-size: 23px; color: #fff; margin-bottom: 8px; }
.guide-help p { margin: 0; color: var(--on-night-muted); font-size: 19px; }
.guide-help a { color: var(--sand-light); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font: 700 22px/1.35 var(--font-head); padding: 16px 40px 16px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 32px/1 var(--font-body); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); }

/* final */
.final { padding: 84px 0; }
.final .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.final h2 { font-size: clamp(32px, 4vw, 50px); }
.final .portrait { box-shadow: 0 30px 60px -30px rgba(40, 30, 20, .55); }
.under-btn { font-size: 17px; margin-top: 14px; }

/* sticky buy bar */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--night-deep); color: var(--on-night); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; transform: translateY(110%); transition: transform .25s ease; box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .6); }
.sticky.show { transform: none; }
.sticky b { display: block; font: 700 18px/1.2 var(--font-head); }
.sticky small { display: block; font-size: 15px; color: var(--on-night-muted); }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* footer */
.site-foot { background: var(--night-deep); color: var(--on-night-muted); padding: 54px 0 40px; font-size: 18px; }
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.site-foot b { display: block; color: #fff; font: 700 24px/1.2 var(--font-head); margin-bottom: 8px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 6px 0; }
.site-foot a { color: var(--on-night); }
.site-foot .legal { grid-column: 1 / -1; font-size: 16px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px; margin: 6px 0 0; }
body.has-sticky .site-foot { padding-bottom: 110px; }

/* inner pages */
.page-head { padding: 60px 0 48px; }
.page-head h1 { font-size: clamp(36px, 4.6vw, 54px); color: var(--indigo); }
.page-head p { font-size: 21px; margin: 0; }
.prose h2 { font-size: 30px; margin-top: 1.6em; }
.prose ul { padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose .portrait { margin: 0 0 30px; }
.facts { display: grid; grid-template-columns: 190px 1fr; gap: 10px 22px; margin: 28px 0; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--muted); }
.note { background: var(--card); border-left: 4px solid var(--btn); padding: 18px 22px; border-radius: 8px; margin-top: 30px; }
.credits { width: 100%; border-collapse: collapse; margin: 10px 0 24px; }
.credits th, .credits td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.credits th { font-size: 17px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 900px) {
  body { font-size: 19px; }
  .hero { padding: 34px 0 48px; }
  .hero .wrap, .why, .final .wrap, .buybox { grid-template-columns: 1fr; gap: 28px; }
  .hero .bookwrap { order: -1; }
  .hero .b3d { --t: 22px; max-width: 240px; }
  .hero .cover-css .c-title { font-size: 30px; }
  .b3d.small { --t: 20px; max-width: 220px; }
  .buybox { padding: 28px 22px; }
  .btn { width: 100%; }
  .ticks, .fit { grid-template-columns: 1fr; }
  .changes, .one-change { grid-template-columns: 1fr; gap: 28px; }
  .cards4 { grid-template-columns: 1fr 1fr; }
  .guide { grid-template-columns: 1fr 1fr; }
  .guide-help { grid-template-columns: 1fr; }
  .block, .care, .final { padding: 60px 0; }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .final .portrait { order: -1; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-head .wrap { min-height: 64px; }
  .site-head .wrap { gap: 12px; }
  .brand b { font-size: 19px; }
  .brand span { display: none; }
  .nav { gap: 14px; font-size: 17px; }
  .nav .hide-s { display: none; }
  .salebar { font-size: 16px; }
  .salebar .long, .salebar-go { display: none; }
  .cards4, .guide { grid-template-columns: 1fr; }
  .pq { grid-template-columns: 1fr; gap: 20px; }
  .pq img { width: 130px; height: 130px; }
  .stack li { flex-direction: column; gap: 2px; }
  .stack li span:last-child { white-space: normal; }
  .sticky small { display: none; }
}