/* Paper Lane Books — calm literary theme: ivory paper, ink black, one deep forest green */
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-opsz-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f1e6; --bg-2: #eee6d5; --surface: #fcfaf4; --surface-2: #f3ede0;
  --text: #1c1b17; --text-2: #4b483f; --text-3: #6b675c;
  --border: #e2d9c6; --border-strong: #cbbfa6;
  --primary: #1f3b2d; --primary-ink: #f8f4ea; --primary-soft: #e3eadf;
  --accent: #1f3b2d; --accent-ink: #f8f4ea;
  --green-2: #2c5440;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-weight: 500; --display-tracking: -0.018em;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --btn-radius: 8px;
  --shadow-sm: 0 1px 2px rgb(28 27 23 / 7%);
  --shadow: 0 14px 30px -18px rgb(28 27 23 / 34%);
  --shadow-lg: 0 30px 60px -28px rgb(28 27 23 / 42%);
  --book-shadow: 0 1px 1px rgb(28 27 23 / 12%), 0 10px 16px -8px rgb(28 27 23 / 34%), 0 24px 40px -24px rgb(28 27 23 / 40%);
  --media-ratio: 2 / 3; --media-bg: #e6ddc9;
  --header-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --footer-bg: #17271f; --footer-ink: #eee8da; --footer-muted: #a7b2a6;
  --focus: 0 0 0 3px rgb(31 59 45 / 32%);
}
::selection { background: rgb(31 59 45 / 18%); }
h1, h2, h3 { font-optical-sizing: auto; }
h1 em, h2 em { font-style: italic; color: var(--primary); font-weight: 450; }
.eyebrow { color: var(--green-2); letter-spacing: .16em; font-size: .74rem; }
.lead { color: var(--text-2); }
.section-alt { background: var(--bg-2); }

/* ---------- Header & buttons ---------- */
.site-header { border-bottom-color: var(--border); }
.brand { font-weight: 600; font-size: 1.36rem; letter-spacing: -.012em; }
.nav a { border-radius: 6px; font-weight: 500; white-space: nowrap; }
.nav a[aria-current='page'] { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); }
.header-search input { width: 210px; border-radius: 8px; background: var(--surface); }
.btn { font-weight: 600; }
.btn-primary:hover, .btn-accent:hover { --btn-bg: var(--green-2); }
.btn-outline { --btn-border: color-mix(in srgb, var(--text) 26%, transparent); }
.btn-outline:hover { --btn-bg: var(--surface); }
.chip.active { background: var(--primary); border-color: var(--primary); }
.cookie { border-radius: 12px; }

/* ---------- Book cards (site/views/partials/product-card.ejs) ---------- */
.grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
@media (min-width: 640px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; } }
@media (min-width: 1140px) { .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.book-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.book-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.book-card .pcard-media { border-radius: 3px 6px 6px 3px; box-shadow: var(--book-shadow); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.book-card .pcard-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 22%) 0, rgb(255 255 255 / 16%) 1.4%, rgb(0 0 0 / 7%) 3%, transparent 7%); }
.book-card:hover .pcard-media { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 2px 2px rgb(28 27 23 / 10%), 0 22px 30px -14px rgb(28 27 23 / 45%); }
.book-card:hover .pcard-media img { transform: none; }
.book-card .pcard-badges { top: 10px; left: 12px; z-index: 1; }
.book-card .pcard-badges { right: 12px; }
.book-card .pcard-badges .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: rgb(252 250 244 / 94%); color: var(--text); border-color: transparent; box-shadow: var(--shadow-sm); }
.book-card .pcard-body { padding: 16px 2px 0; gap: 3px; }
.book-card .pcard-title { font-family: var(--font-display); font-size: 1.14rem; font-weight: 560; line-height: 1.18; letter-spacing: -.005em; }
.book-author { margin: 0; color: var(--text-2); font-size: .88rem; }
.book-card .pcard-foot { padding-top: 6px; align-items: center; }
.book-card .price { font-size: 1rem; font-weight: 700; }
.book-len { font-size: .78rem; color: var(--text-3); white-space: nowrap; }

/* ---------- Shop ---------- */
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.toolbar select { border-radius: 8px; }

/* ---------- Product page ---------- */
.pdp { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 6vw, 84px); }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } }
.pdp-media { background: var(--media-bg); border-radius: 3px 7px 7px 3px; box-shadow: var(--book-shadow); }
.pdp-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / 22%) 0, rgb(255 255 255 / 16%) 1.2%, rgb(0 0 0 / 7%) 2.6%, transparent 6%); }
@media (max-width: 860px) { .pdp-media { width: min(260px, 70vw); margin: 0 auto; } }
.pdp h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.05; }
.pdp .lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.32rem); line-height: 1.45; }
.pdp-price { font-size: 2rem; letter-spacing: -.01em; }
.variant span { background: var(--surface); }
.pdp .variant-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* Core app.js clears the inline two-column grid on wide screens; restore it here (mobile still collapses via inline 1fr). */
.pdp-page [data-collapse-mobile] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 860px) { .pdp-page [data-collapse-mobile] { grid-template-columns: 1fr; } }
.pdp a.btn-ghost[href^='/read/'] { --btn-bg: var(--primary-soft); --btn-ink: var(--primary); --btn-border: color-mix(in srgb, var(--primary) 30%, transparent); min-height: 48px; padding: .7em 1.4em; }
.pdp a.btn-ghost[href^='/read/']:hover { --btn-bg: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.assurances { background: var(--surface); }
.assurances .icon { color: var(--primary); }
.specs dd { font-weight: 550; }
.prose h3 { font-size: 1rem; }
.prose strong { color: var(--text); }
.line-thumb { border-radius: 3px; box-shadow: var(--shadow-sm); }

/* Core .account-layout padding shorthand removes the .container gutters — restore them. */
.container.account-layout { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Library (site/views/pages/library.ejs) ---------- */
.lib-list { display: grid; gap: 14px; }
.lib-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.lib-cover img { width: 96px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 2px 5px 5px 2px; box-shadow: var(--book-shadow); }
.lib-title { font-size: 1.35rem; margin: 2px 0 2px; }
.lib-title a { text-decoration: none; }
.lib-title a:hover { text-decoration: underline; }
.lib-author { margin: 0; color: var(--text-2); font-size: .92rem; }
.lib-actions { margin-top: 14px; gap: 8px; }
.lib-file { margin: 10px 0 0; font-size: .8rem; color: var(--text-3); }
@media (max-width: 520px) { .lib-item { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; } .lib-cover img { width: 72px; } .lib-title { font-size: 1.15rem; } }

/* ---------- Online reader page (site/views/pages/read.ejs) ---------- */
body.read-page { height: 100vh; height: 100dvh; overflow: hidden; }
body.read-page main { display: flex; flex-direction: column; min-height: 0; }
.read-page .reader-shell { flex: 1; height: auto; min-height: 0; display: flex; flex-direction: column; }
.read-page .reader-frame { flex: 1; height: auto; min-height: 0; background: #fbf8f1; }
.reader-bar { gap: 12px; padding: 8px var(--gutter); background: var(--surface); }
.reader-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.reader-title img { width: 28px; height: 42px; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.reader-title div { display: grid; min-width: 0; line-height: 1.25; }
.reader-title strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-title span { font-size: .8rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-title .badge { margin-left: 4px; }
.reader-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reader-tools .tabs button { padding: 6px 12px; font-size: .84rem; }
.reader-size { display: inline-flex; gap: 4px; }
.reader-size .btn { min-width: 40px; padding: .4em .6em; }
@media (max-width: 640px) {
  .reader-bar { padding: 8px 12px; gap: 8px; }
  .reader-title { flex-basis: calc(100% - 64px); }
  .reader-tools { width: 100%; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
  .reader-tools .tabs { padding: 3px; gap: 2px; }
  .reader-tools .tabs button { padding: 6px 8px; font-size: .8rem; }
  .reader-size .btn { min-width: 34px; padding: .35em .4em; }
  .reader-tools > .btn { padding: .4em .7em; font-size: .8rem; }
}

/* =========================== Home =========================== */
.fl-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 88px) 0 clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--border); background: radial-gradient(90% 120% at 85% 30%, #fffdf7 0, transparent 60%); }
.fl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 920px) { .fl-hero-grid { grid-template-columns: 1fr; } }
.fl-hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: .98; letter-spacing: -.028em; margin-bottom: .32em; }
.fl-hero .lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); max-width: 52ch; }
.fl-hero-cta { margin-top: 28px; }
.fl-facts { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-2); font-size: .9rem; }
.fl-facts li { display: inline-flex; gap: 8px; align-items: center; }
.fl-facts .icon { color: var(--primary); }

.fl-visual { position: relative; height: clamp(380px, 37vw, 500px); }
.fl-stack { position: absolute; inset: 0; }
.fl-stack img { position: absolute; top: 2%; left: 57%; width: 33%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: var(--book-shadow); transform-origin: 50% 110%; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fl-stack img:nth-child(1) { transform: translateX(-50%) translateX(-78%) rotate(-14deg); z-index: 0; }
.fl-stack img:nth-child(2) { transform: translateX(-50%) translateX(-40%) rotate(-7deg); z-index: 1; }
.fl-stack img:nth-child(3) { transform: translateX(-50%) translateY(-3%); z-index: 3; }
.fl-stack img:nth-child(4) { transform: translateX(-50%) translateX(40%) rotate(7deg); z-index: 1; }
.fl-stack img:nth-child(5) { transform: translateX(-50%) translateX(78%) rotate(14deg); z-index: 0; }
.fl-visual:hover .fl-stack img:nth-child(1) { transform: translateX(-50%) translateX(-90%) rotate(-17deg); }
.fl-visual:hover .fl-stack img:nth-child(2) { transform: translateX(-50%) translateX(-46%) rotate(-8.5deg); }
.fl-visual:hover .fl-stack img:nth-child(4) { transform: translateX(-50%) translateX(46%) rotate(8.5deg); }
.fl-visual:hover .fl-stack img:nth-child(5) { transform: translateX(-50%) translateX(90%) rotate(17deg); }
.fl-page { position: absolute; z-index: 4; left: 4%; bottom: 0; width: min(300px, 60%); padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); text-decoration: none; color: var(--text); transform: rotate(-1.5deg); transition: transform .3s; }
.fl-page:hover { transform: rotate(0) translateY(-3px); }
.fl-page-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); margin-bottom: 8px; }
.fl-page p { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.42; margin: 0 0 12px; }
.fl-page-go { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 650; color: var(--primary); }
@media (max-width: 920px) {
  .fl-visual { height: 330px; margin-top: 10px; }
  .fl-stack img { width: 34%; top: 2%; }
  .fl-page { left: 50%; transform: translateX(-50%) rotate(-1.5deg); width: min(330px, 92%); }
  .fl-page:hover { transform: translateX(-50%) translateY(-3px); }
}
@media (max-width: 520px) {
  .fl-visual { height: 318px; }
  .fl-stack img { width: 30%; left: 50%; }
  .fl-stack img:nth-child(1) { transform: translateX(-50%) translateX(-66%) rotate(-12deg); }
  .fl-stack img:nth-child(2) { transform: translateX(-50%) translateX(-34%) rotate(-6deg); }
  .fl-stack img:nth-child(4) { transform: translateX(-50%) translateX(34%) rotate(6deg); }
  .fl-stack img:nth-child(5) { transform: translateX(-50%) translateX(66%) rotate(12deg); }
  .fl-page p { font-size: 1.02rem; }
}

/* Collections */
.fl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.fl-col { display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fl-col:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.fl-col-covers { position: relative; height: 128px; margin-bottom: 20px; }
.fl-col-covers img { position: absolute; bottom: 0; width: 70px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: 0 8px 14px -8px rgb(28 27 23 / 50%); }
.fl-col-covers img:nth-child(1) { left: 0; z-index: 3; }
.fl-col-covers img:nth-child(2) { left: 46px; z-index: 2; transform: rotate(5deg) translateY(-2px); }
.fl-col-covers img:nth-child(3) { left: 92px; z-index: 1; transform: rotate(10deg) translateY(-4px); }
.fl-col strong { font-family: var(--font-display); font-size: 1.28rem; font-weight: 560; letter-spacing: -.01em; line-height: 1.15; }
.fl-col small { color: var(--text-3); font-size: .8rem; font-weight: 600; letter-spacing: .04em; margin-top: 2px; }
.fl-col p { margin: 10px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
@media (max-width: 560px) {
  .fl-cols { gap: 12px; }
  .fl-col { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; padding: 16px; }
  .fl-col-covers { grid-row: 1 / 4; height: 96px; margin: 0; align-self: center; }
  .fl-col-covers img { width: 50px; }
  .fl-col-covers img:nth-child(2) { left: 26px; }
  .fl-col-covers img:nth-child(3) { left: 52px; }
  .fl-col p { margin-top: 6px; font-size: .86rem; }
}

/* Read anywhere */
.fl-formats { background: var(--bg-2); border-block: 1px solid var(--border); }
.fl-formats-head { max-width: 640px; margin-bottom: 34px; }
.fl-format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.fl-format { position: relative; padding: 24px 22px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.fl-format .fi { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); margin-bottom: 16px; }
.fl-format .tag { position: absolute; top: 22px; right: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.fl-format h3 { font-family: var(--font-body); font-size: 1.04rem; font-weight: 650; letter-spacing: 0; margin-bottom: .4em; }
.fl-format p { margin: 0; color: var(--text-2); font-size: .92rem; }

/* Quote band */
.fl-quote { background: var(--primary); color: var(--primary-ink); text-align: center; padding: clamp(56px, 9vw, 108px) 0; position: relative; overflow: hidden; }
.fl-quote::before, .fl-quote::after { content: '“'; position: absolute; font-family: var(--font-display); font-size: clamp(14rem, 30vw, 26rem); line-height: 1; color: rgb(255 255 255 / 5%); top: -.12em; left: 4%; pointer-events: none; }
.fl-quote::after { content: '”'; top: auto; bottom: -.52em; left: auto; right: 4%; }
.fl-quote .orn { display: block; margin: 0 auto 26px; color: #c9d6c9; }
.fl-quote blockquote { margin: 0; }
.fl-quote blockquote p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 3.1vw, 2.3rem); line-height: 1.32; letter-spacing: -.01em; margin: 0 auto; max-width: 30ch; color: #fbf8f0; text-wrap: balance; }
.fl-quote-by { margin: 26px 0 0; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: #c9d6c9; }
.fl-quote-by cite { font-style: italic; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 1.1rem; }
.fl-quote .row { justify-content: center; margin-top: 30px; }
.fl-quote .btn-light { --btn-bg: #f8f4ea; --btn-ink: var(--primary); --btn-border: #f8f4ea; }
.fl-quote .btn-light:hover { --btn-bg: #fff; }
.fl-quote .btn-line { --btn-bg: transparent; --btn-ink: #f8f4ea; --btn-border: rgb(248 244 234 / 40%); }
.fl-quote .btn-line:hover { --btn-bg: rgb(255 255 255 / 8%); box-shadow: none; }

/* Plain words */
.fl-honest { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .fl-honest { grid-template-columns: 1fr; } }
.fl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--border); }
.fl-checks li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: .95rem; }
.fl-checks li .icon { color: var(--primary); margin-top: 2px; }
.fl-checks b { color: var(--text); font-weight: 650; }

/* KPay band */
.fl-kpay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
@media (max-width: 880px) { .fl-kpay { grid-template-columns: 1fr; } }
.fl-kpay p { color: var(--text-2); }
.fl-pay-methods { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.fl-pay-methods span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .84rem; font-weight: 650; }
.fl-steps { list-style: none; margin: 0; padding: 0; counter-reset: fs; display: grid; gap: 14px; }
.fl-steps li { counter-increment: fs; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.fl-steps li::before { content: counter(fs); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--primary-ink); background: var(--primary); }
.fl-steps strong { display: block; font-size: 1rem; }
.fl-steps span { color: var(--text-2); font-size: .9rem; }

/* FAQ teaser */
.fl-faq .faq summary { font-family: var(--font-display); font-size: 1.16rem; font-weight: 550; }
.fl-orn { display: block; margin: 0 auto 22px; opacity: .9; }

/* Phones: scale the wordmark so the full brand name fits beside the header actions (measured at 320–414px). */
@media (max-width: 480px) { .site-header .brand { font-size: clamp(1rem, 5.4vw, 1.36rem); } }