/* ══════════════════════════════════════════════════════════════════════════
   Design option 2: "Notebook". Cream school-notebook paper, charcoal ink
   outlines, marker-orange captions, and peel-and-stick stickers you can move.
   Everything here only applies when <html data-look="nb">; the original look
   is untouched. Switch with the "Design" button in the bottom-left.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the switcher (shows in both looks) ── */
.lc-look { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 800 14px Nunito, system-ui, sans-serif; transition: bottom .25s; }
body.lc-reading .lc-look { bottom: 104px; }
.lc-look > button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 8px 14px 8px 8px; background: #fff; color: #24312a; box-shadow: 0 0 0 1.5px rgba(0,0,0,.12), 0 8px 20px -10px rgba(0,0,0,.4); cursor: pointer; }
.lc-look .dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0,0,0,.2) inset; }
.lc-look .menu { display: none; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.12), 0 16px 30px -14px rgba(0,0,0,.45); }
.lc-look.open .menu { display: grid; gap: 2px; }
.lc-look .menu button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 10px; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer; color: #24312a; font: inherit; }
.lc-look .menu button:hover { background: #f4efe6; }
.lc-look .menu button[aria-checked="true"] { background: #24312a; color: #fff; }
.lc-look .menu small { display: block; font-weight: 600; opacity: .7; }

/* ── tokens ── */
:root[data-look="nb"] {
  --paper: #fdfbf9; --paper-2: #f7efe9; --card: #fdfbf9;
  --ink: #171717; --ink-2: #4b3d30; --muted: #85786a;
  --grass: #ff6f1e; --grass-d: #ce500a; --sun: #ffd23f; --coral: #ff6f1e; --lilac: #ff66cf;
  --brand: #2b1a07; --gold: #ff6f1e; --line: #e5dbd1;
  --nb-cocoa: #2b1a07; --nb-orange: #ff6f1e; --nb-blue: #3b82f6; --nb-pink: #ff66cf; --nb-green: #22c55e;
  --nb-head: "Fraunces", Georgia, serif; --nb-ui: "Geist", Nunito, system-ui, sans-serif;
  --nb-lift: 0 2px 4px rgba(43,26,7,.04), 0 14px 34px -18px rgba(43,26,7,.28);
  --nb-edge: rgba(43,26,7,.12); --nb-edge-strong: rgba(43,26,7,.28); --nb-press: rgba(0,0,0,.25) 0 1px 2px 0;
}
:root[data-look="nb"] body { font-family: var(--nb-ui); background-color: var(--paper); }
:root[data-look="nb"] .proto { background: var(--nb-cocoa); }
:root[data-look="nb"] .proto b { color: #ffb37f; }
:root[data-look="nb"] h1, :root[data-look="nb"] h2, :root[data-look="nb"] h3, :root[data-look="nb"] .logo, :root[data-look="nb"] .plan .price {
  font-family: var(--nb-head); font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 600; color: var(--nb-cocoa); letter-spacing: 0;
}
:root[data-look="nb"] .plan.best h3, :root[data-look="nb"] .plan.best .price { color: #fdfbf9; }
:root[data-look="nb"] .hand, :root[data-look="nb"] .note, :root[data-look="nb"] .polaroid .cap { color: var(--nb-orange); }
:root[data-look="nb"] .note { font-size: 24px; }

/* headlines: big, lowercase, left-aligned, like a notebook scrawl */
:root[data-look="nb"] .hero h1 { font-size: clamp(44px, 6.6vw, 84px); line-height: 1.04; text-transform: lowercase; }
:root[data-look="nb"] .section h2, :root[data-look="nb"] .dmain h1 { text-transform: lowercase; font-size: clamp(32px, 4.4vw, 46px); }
:root[data-look="nb"] .scribble svg path { stroke: var(--nb-orange); stroke-width: 4; }
:root[data-look="nb"] .scribble svg { animation: nbWipe .9s .45s cubic-bezier(.6,0,.3,1) both; }
@keyframes nbWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nbDraw { to { stroke-dashoffset: 0; } }

/* ── header: a quiet row, the Join pill top-right ── */
:root[data-look="nb"] .logo-mark { background: #fff; box-shadow: 0 0 0 1.5px var(--ink), var(--nb-press); border-radius: 12px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .logo:hover .logo-mark { transform: rotate(14deg) scale(1.08); }
:root[data-look="nb"] .logo { font-size: 22px; }
:root[data-look="nb"] .logo small { color: var(--nb-orange); }
:root[data-look="nb"] .navlinks a { font-family: var(--nb-ui); font-weight: 500; color: var(--ink); text-transform: lowercase; font-size: 17px; }
:root[data-look="nb"] .navlinks a.on, :root[data-look="nb"] .navlinks a:hover { background: transparent; box-shadow: none; text-decoration: underline wavy var(--nb-orange) 2px; text-underline-offset: 7px; }
:root[data-look="nb"] .navlinks a[href="#/join"] { border-radius: 20px; box-shadow: 0 0 0 1.5px var(--ink), var(--nb-press); background: var(--paper); padding: 9px 22px; margin-left: 6px; text-decoration: none; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .navlinks a[href="#/join"]:hover { transform: translateY(-2px) rotate(-2deg); }

/* ── buttons: cream pill, dark ink outline, never a solid fill ── */
:root[data-look="nb"] .btn { font-family: var(--nb-ui); font-weight: 500; border-radius: 20px; padding: 12px 28px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), var(--nb-press); transition: transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
:root[data-look="nb"] .btn:hover { transform: translateY(-3px) rotate(-1.2deg); box-shadow: 0 0 0 1.5px var(--ink), 0 6px 0 -1px var(--nb-orange); }
:root[data-look="nb"] .btn:active { transform: translateY(1px) scale(.96); box-shadow: 0 0 0 1.5px var(--ink) !important; }
:root[data-look="nb"] .btn-go { box-shadow: 0 0 0 2px var(--ink), 0 4px 0 -1px var(--nb-orange); }
:root[data-look="nb"] .btn-go svg { transition: transform .25s; }
:root[data-look="nb"] .btn-go:hover svg { transform: translateX(4px); }
:root[data-look="nb"] .plan.best .btn-sun { background: #fdfbf9; color: var(--ink); box-shadow: 0 0 0 2px #fdfbf9; }
:root[data-look="nb"] .read { font-family: var(--nb-ui); font-weight: 500; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink), var(--nb-press); border-radius: 20px; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .read:hover { transform: rotate(-2deg) scale(1.04); }

/* ── stickers on chips: die-cut, slightly crooked ── */
:root[data-look="nb"] .sticker { background: #fff !important; color: var(--ink) !important; font-family: var(--nb-ui); font-weight: 600; box-shadow: 0 0 0 1.5px var(--nb-edge-strong), 0 0 0 5px #fff, 0 6px 14px -6px rgba(43,26,7,.35); transform: rotate(6deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .book:hover .sticker { transform: rotate(-4deg) scale(1.08); }
:root[data-look="nb"] .chip { font-family: var(--nb-ui); font-weight: 500; background: var(--paper-2); color: var(--ink-2); border-radius: 20px; }
:root[data-look="nb"] .chip.free { background: #ffe6d6; color: var(--nb-cocoa); }
:root[data-look="nb"] .chip.member { background: #ffe1f4; color: #8a1f63; }

/* ── cards: cream, thin ink outline, whisper shadow, 12px corners ── */
:root[data-look="nb"] .book, :root[data-look="nb"] .get, :root[data-look="nb"] .step, :root[data-look="nb"] .plan,
:root[data-look="nb"] .dcard, :root[data-look="nb"] details.faq, :root[data-look="nb"] .side {
  border-radius: 22px; box-shadow: 0 0 0 1.5px var(--nb-edge), var(--nb-lift); background: var(--card);
}
:root[data-look="nb"] .book { transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
:root[data-look="nb"] .books .book:nth-child(odd):hover { transform: translateY(-6px) rotate(-1.4deg); }
:root[data-look="nb"] .books .book:nth-child(even):hover { transform: translateY(-6px) rotate(1.4deg); }
:root[data-look="nb"] .book:hover { box-shadow: 0 0 0 2px rgba(255,111,30,.45), 0 24px 44px -20px rgba(206,80,10,.45); }
:root[data-look="nb"] .book .art { border-bottom: 0; }
:root[data-look="nb"] .book h3 { font-size: 28px; }
:root[data-look="nb"] .get .ic { border-radius: 12px; box-shadow: 0 0 0 1.5px var(--nb-edge); }
:root[data-look="nb"] .get.wide { background: #fff8e8 !important; transform: none !important; }
:root[data-look="nb"] .get .ic { width: 58px; height: 58px; }
:root[data-look="nb"] .step::before { background: #fff; box-shadow: 0 0 0 1.5px var(--nb-edge); color: var(--ink); font-family: var(--nb-head); }
:root[data-look="nb"] .step:nth-child(2)::before { background: #ffe1f4; } :root[data-look="nb"] .step:nth-child(3)::before { background: #dbeafe; }
:root[data-look="nb"] .plan.best { background: var(--nb-cocoa); box-shadow: 0 24px 44px -20px rgba(43,26,7,.6); }
:root[data-look="nb"] .plan .sticker { top: -16px; }
:root[data-look="nb"] .promise, :root[data-look="nb"] .dash-hello, :root[data-look="nb"] .epilogue { background: var(--paper-2); box-shadow: 0 0 0 1.5px var(--nb-edge); border-radius: 12px; }
:root[data-look="nb"] details.faq summary::after { color: var(--nb-orange); transition: transform .3s; }
:root[data-look="nb"] details.faq[open] summary::after { transform: rotate(180deg); }
:root[data-look="nb"] .polaroid { box-shadow: 0 0 0 1.5px var(--nb-edge), var(--nb-lift); transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
:root[data-look="nb"] .hero .photos .polaroid:hover { transform: rotate(0deg) translateY(-8px) scale(1.04); z-index: 2; }
:root[data-look="nb"] .tape { background: rgba(255,111,30,.35); }


/* ── stickers you can peel and move ── */
.nb-layer { display: none; }
:root[data-look="nb"] .nb-layer { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
:root[data-look="nb"] .hero, :root[data-look="nb"] .section, :root[data-look="nb"] .dmain, :root[data-look="nb"] footer { position: relative; }
.nb-stk { position: absolute; width: var(--s, 64px); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform: rotate(var(--r, 8deg)); transition: transform .4s cubic-bezier(.3,1.6,.5,1), filter .3s; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); animation: nbStick .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, .3s); }
.nb-stk svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.nb-stk:hover { transform: rotate(calc(var(--r, 8deg) * -1)) scale(1.1); animation: nbWiggle .5s ease; }
.nb-stk.peel { cursor: grabbing; transform: rotate(calc(var(--r, 8deg) + 6deg)) scale(1.18); filter: drop-shadow(0 14px 14px rgba(0,0,0,.22)); transition: transform .2s, filter .2s; animation: none; z-index: 5; }
.nb-stk.boing { animation: nbBoing .7s cubic-bezier(.3,1.6,.5,1); }
.nb-stk.idle { animation: nbFloat 4.5s ease-in-out infinite; animation-delay: var(--f, 0s); }
@keyframes nbStick { from { opacity: 0; transform: rotate(calc(var(--r, 8deg) - 30deg)) scale(.2); } to { opacity: 1; transform: rotate(var(--r, 8deg)); } }
@keyframes nbWiggle { 25% { transform: rotate(calc(var(--r, 8deg) - 10deg)) scale(1.1); } 60% { transform: rotate(calc(var(--r, 8deg) + 8deg)) scale(1.1); } }
@keyframes nbBoing { 0% { transform: rotate(var(--r)) scale(1); } 30% { transform: rotate(calc(var(--r) - 20deg)) scale(1.35, .8); } 55% { transform: rotate(calc(var(--r) + 12deg)) scale(.9, 1.2); } 100% { transform: rotate(var(--r)) scale(1); } }
@keyframes nbFloat { 50% { translate: 0 -6px; } }
@media (max-width: 640px) { .nb-stk { width: calc(var(--s, 64px) * .72); } .nb-stk.desk { display: none; } }

/* sparkles that pop out of a tap */
.nb-spark { position: fixed; z-index: 70; width: 14px; height: 14px; pointer-events: none; margin: -7px 0 0 -7px; animation: nbSpark .65s cubic-bezier(.2,.7,.3,1) forwards; }
.nb-spark svg { width: 100%; height: 100%; display: block; }
@keyframes nbSpark { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1) rotate(160deg); opacity: 0; } }

/* hand-written captions with an arrow that draws itself */
.nb-callout { display: none; }
:root[data-look="nb"] .nb-callout { display: flex; align-items: flex-start; gap: 4px; margin: 12px 0 0 34px; color: var(--nb-orange); font: 24px "Patrick Hand", cursive; transform: rotate(-3deg); transform-origin: left; }
:root[data-look="nb"] .nb-callout svg { width: 62px; height: 46px; margin-top: -26px; flex: none; }
:root[data-look="nb"] .nb-callout span { animation: nbFade .5s 1.2s both; }
:root[data-look="nb"] .nb-tag { display: inline-flex; align-items: flex-end; gap: 2px; position: relative; top: -6px; margin-left: 14px; color: var(--nb-orange); font: 400 22px "Patrick Hand", cursive; text-transform: none; transform: rotate(-5deg); vertical-align: middle; }
:root[data-look="nb"] .nb-tag svg { width: 46px; height: 40px; margin-bottom: -22px; }
.nb-tag { display: none; }
.nb-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nb-arrow.go path { animation: nbDraw .7s cubic-bezier(.6,0,.3,1) forwards; }
.nb-arrow.go path + path { animation-delay: .6s; animation-duration: .25s; }
@keyframes nbFade { from { opacity: 0; transform: translateY(6px); } }

/* things arrive on the page like they're being placed by hand */
:root[data-look="nb"] .nb-rise { opacity: 0; transform: translateY(26px) rotate(var(--tilt, -1.5deg)); transition: opacity .55s ease, transform .7s cubic-bezier(.3,1.4,.5,1); transition-delay: var(--delay, 0s); }
:root[data-look="nb"] .nb-rise.nb-shown { opacity: 1; transform: none; }
:root[data-look="nb"] .get, :root[data-look="nb"] .get.nb-rise.nb-shown { transform: none; }
:root[data-look="nb"] .plan.best.nb-rise.nb-shown { transform: translateY(-8px); }
:root[data-look="nb"] #app > main, :root[data-look="nb"] #app > .wrap > .dash { animation: nbFade .5s ease both; }

/* ── footer: the orange band ── */
:root[data-look="nb"] footer { margin-top: 56px; background: var(--nb-orange); color: var(--ink); border-radius: 56px 56px 0 0; padding: 64px 24px 80px; font: 500 17px var(--nb-ui); overflow: hidden; }
:root[data-look="nb"] footer::before { content: "see you on the field!"; display: block; font: 600 clamp(30px, 5vw, 52px)/1.1 var(--nb-head); font-variation-settings: "SOFT" 100; color: var(--nb-cocoa); margin-bottom: 14px; }

/* ── storybook reader: a notebook page ── */
:root[data-look="nb"] .bk-page { border-radius: 26px; box-shadow: 0 0 0 1.5px var(--nb-edge), 6px 8px 0 var(--paper-2), var(--nb-lift); }
:root[data-look="nb"] .bk-art { border-radius: 18px; box-shadow: 0 0 0 1.5px var(--nb-edge); }
:root[data-look="nb"] .bk-text { position: relative; }
:root[data-look="nb"] .bk-text::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 0; width: 1.5px; background: #ffb38a; }
@media (min-width: 700px) { :root[data-look="nb"] .bk-text::before { left: 14px; } }
:root[data-look="nb"] .bk-text h2 { font-size: clamp(28px, 3.8vw, 40px); }
:root[data-look="nb"] .beat p { font-family: var(--nb-head); font-variation-settings: "SOFT" 100; font-weight: 400; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.6; }
:root[data-look="nb"] .beat p.said { font-family: "Patrick Hand", cursive; color: var(--nb-orange); }
:root[data-look="nb"] .w.on { background: linear-gradient(transparent 52%, #ffc9a3 52%, #ffc9a3 92%, transparent 92%); box-shadow: none; }
:root[data-look="nb"] .bk-top .pgn, :root[data-look="nb"] .pg { color: var(--nb-orange); }
:root[data-look="nb"] .track { background: var(--paper-2); box-shadow: 0 0 0 1.5px var(--nb-edge) inset; }
:root[data-look="nb"] .bk .track .notch { box-shadow: 0 0 0 1.5px var(--nb-edge); }
:root[data-look="nb"] .bk .track .notch.done { background: var(--nb-orange); box-shadow: 0 0 0 1.5px var(--nb-edge); }
:root[data-look="nb"] .bk-nav { border-radius: 20px; background: rgba(253,251,249,.95); box-shadow: 0 0 0 1.5px var(--nb-edge), var(--nb-lift); }
:root[data-look="nb"] .bk-nav .btn:disabled { opacity: .3; }
:root[data-look="nb"] .turn { background: #eef4ff; box-shadow: 0 0 0 1.5px var(--nb-edge); border-radius: 12px; }
:root[data-look="nb"] .turn .turn-tag { background: var(--nb-blue); }
:root[data-look="nb"] .opt { border-radius: 16px; box-shadow: 0 0 0 1.5px var(--nb-edge); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .opt:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 0 0 1.5px var(--nb-edge), 3px 4px 0 var(--nb-blue); }
:root[data-look="nb"] .opt.good { box-shadow: 0 0 0 2px var(--nb-edge-strong), 4px 5px 0 var(--nb-green); background: #e8fbef; animation: nbBoingCard .5s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .opt.gentle { box-shadow: 0 0 0 2px var(--nb-edge-strong), 4px 5px 0 var(--sun); }
@keyframes nbBoingCard { 40% { transform: scale(1.04) rotate(-1deg); } }
:root[data-look="nb"] textarea { border-radius: 8px; box-shadow: 0 0 0 1.5px var(--nb-edge); font-family: var(--nb-ui); background-image: repeating-linear-gradient(transparent 0 31px, #efe4d8 31px 32px); line-height: 32px; }
:root[data-look="nb"] .callout.safety { border-radius: 12px; box-shadow: 0 0 0 1.5px var(--nb-edge); }

/* members area */
:root[data-look="nb"] .side button.on { background: var(--ink); }
:root[data-look="nb"] .side button { font-family: var(--nb-ui); font-weight: 500; }
:root[data-look="nb"] .dcard { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
:root[data-look="nb"] .dcard:not(.wide):hover { transform: translateY(-4px) rotate(-.6deg); }
:root[data-look="nb"] .bar { background: var(--paper-2); box-shadow: 0 0 0 1.5px var(--nb-edge) inset; }
:root[data-look="nb"] .bar i { background: var(--nb-orange); }
:root[data-look="nb"] .bdg .c { box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--ink); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
:root[data-look="nb"] .bdg:not(.locked):hover .c { transform: rotate(-12deg) scale(1.08); }
:root[data-look="nb"] .verse { background: #fff6d6; }
:root[data-look="nb"] .dhint { background: var(--paper-2); box-shadow: 0 0 0 1px var(--line) inset; }

@media (prefers-reduced-motion: reduce) {
  .nb-stk, .nb-stk.idle, .nb-stk:hover { animation: none !important; }
  :root[data-look="nb"] .nb-rise { opacity: 1; transform: none; }
  .nb-arrow path { stroke-dashoffset: 0; }
  .nb-spark { display: none; }
}
@media print { .lc-look, .nb-layer { display: none !important; } }

/* phones: keep the menu on one line, and drop the arrow note once the buttons stack */
@media (max-width: 640px) {
  :root[data-look="nb"] .navlinks a { font-size: 15px; padding: 7px 6px; white-space: nowrap; }
  :root[data-look="nb"] .navlinks a[href="#/join"] { padding: 6px 14px; margin-left: 0; }
  :root[data-look="nb"] .nb-callout { display: none; }
  :root[data-look="nb"] .btn { padding: 12px 22px; }
  :root[data-look="nb"] footer { border-radius: 36px 36px 0 0; padding: 48px 20px 90px; }
}

/* ── story shelf: smaller cards, each cover shown as a real book on soft paper ── */
:root[data-look="nb"] .books { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; }
:root[data-look="nb"] .book .art { aspect-ratio: 1 / 1; padding: 26px 24px 22px; background: var(--tint, #f5ece3); display: flex; }
:root[data-look="nb"] .books > :nth-child(4n+2) .art { --tint: #eef0f6; }
:root[data-look="nb"] .books > :nth-child(4n+3) .art { --tint: #f1efe4; }
:root[data-look="nb"] .books > :nth-child(4n) .art { --tint: #eef3ee; }
:root[data-look="nb"] .book .art > div { background: none !important; overflow: visible !important; display: flex; align-items: center; justify-content: center; }
:root[data-look="nb"] .book .art > div > img:first-child { display: none; }
:root[data-look="nb"] .book .art > div > img:last-child { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; border-radius: 3px 10px 10px 3px; filter: saturate(.88); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(43,26,7,.1), 0 14px 22px -12px rgba(43,26,7,.55); transform: rotate(-2deg); transition: transform .45s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; }
:root[data-look="nb"] .books > :nth-child(even) .art > div > img:last-child { transform: rotate(2deg); }
:root[data-look="nb"] .book:hover .art > div > img:last-child { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 24px 30px -14px rgba(43,26,7,.5); }
:root[data-look="nb"] .books .book:nth-child(n):hover { transform: translateY(-3px); }
:root[data-look="nb"] .book.soon .art > div > img:last-child { filter: saturate(.6) opacity(.85); }
:root[data-look="nb"] .book .body { padding: 16px 18px 20px; }
:root[data-look="nb"] .book h3 { font-size: 21px; line-height: 1.15; }
:root[data-look="nb"] .book .body > p { font-size: 15px; line-height: 1.4; }
:root[data-look="nb"] .book .meta { gap: 6px; margin-top: 10px; }
:root[data-look="nb"] .book .chip { font-size: 13px; padding: 4px 10px; }
:root[data-look="nb"] .book .sticker { top: 12px; right: 12px; font-size: 13px; padding: 5px 11px; }
@media (max-width: 560px) {
  :root[data-look="nb"] .books { grid-template-columns: 1fr 1fr; gap: 14px; }
  :root[data-look="nb"] .book .art { padding: 16px 14px 14px; }
  :root[data-look="nb"] .book .body { padding: 12px 12px 14px; }
  :root[data-look="nb"] .book h3 { font-size: 17px; }
  :root[data-look="nb"] .book .body > p { font-size: 13.5px; }
  :root[data-look="nb"] .book .chip { font-size: 12px; padding: 3px 8px; }
  :root[data-look="nb"] .book .sticker { top: 8px; right: 8px; font-size: 11.5px; padding: 4px 9px; }
}

/* ── spacing rhythm: heading, then intro line, then a clear gap before the content ── */
:root[data-look="nb"] .section > h2 + .sub { margin-top: 12px; max-width: 46em; }
:root[data-look="nb"] .books, :root[data-look="nb"] .gets, :root[data-look="nb"] .steps, :root[data-look="nb"] .plans { margin-top: 56px; }
:root[data-look="nb"] .section > h2 + .books, :root[data-look="nb"] .section > h2 + .gets, :root[data-look="nb"] .section > h2 + .steps { margin-top: 40px; }
:root[data-look="nb"] .book .body { padding: 20px 22px 24px; }
:root[data-look="nb"] .book .meta { margin-top: 14px; }
@media (max-width: 560px) {
  :root[data-look="nb"] .books, :root[data-look="nb"] .gets, :root[data-look="nb"] .steps, :root[data-look="nb"] .plans { margin-top: 36px; }
  :root[data-look="nb"] .book .body { padding: 12px 12px 16px; }
}