/* Read & Found, Edition 28 — an independent bookshop notebook.
   One idea, applied throughout: ink-blue type, a warm annotation red,
   ruled-paper surfaces, no fake covers, no generic gradient cards. */
:root {
  --paper:#f5f6f4;--paper-light:#fff;
  --ink:#1c304c;--ink-deep:#14253c;
  --secondary:#42546d;--line:#bcc8d5;
  --accent:#c34b36;--accent-pale:#f5dad0;
  --sage:#e6edf4;--cream:#f4e4ac;
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'IBM Plex Sans',Arial,sans-serif;
  --ui-font:'Source Serif 4',Georgia,serif;
  --book-font:'Source Serif 4',Georgia,serif;
}
html {background:var(--paper)}
body {background:var(--paper);font-family:var(--book-font);color:var(--ink)}
.grain {opacity:.028}
a,button { -webkit-tap-highlight-color:transparent }
button,input,textarea,select {font-family:var(--font-sans)}
button:focus-visible,a:focus-visible,textarea:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
em {font-style:normal}
.site-header {border-bottom:2px solid var(--ink);align-items:center}
.site-header .wordmark {font-family:var(--font-serif);font-variation-settings:'WONK' 1;font-weight:650;letter-spacing:-.08em;font-size:31px;color:var(--ink);gap:0}
.wordmark .wordmark-amp {font-style:normal;margin:0;color:inherit}
.wordmark .wordmark-dot {display:none}
.site-header .mark {display:none}
.header-middle {font:italic 16px/1.2 var(--book-font);color:var(--ink);letter-spacing:0;text-transform:none;opacity:.75}
.header-action,.site-header .header-action {font:500 16px/1.2 var(--ui-font);letter-spacing:0;text-transform:none;gap:0;color:var(--ink)}
.header-action .lucide {display:none}

/* Opening is a bold bookshop front, not a symmetric marketing hero. */
.intro-stage {padding-top:18px}
.intro-grid {display:block;position:relative;min-height:unset;overflow:hidden;margin:0 -18px;background:var(--ink);color:#f8f9f5;padding:clamp(40px,6vw,92px) clamp(28px,6.4vw,90px) clamp(58px,8vw,110px);border-bottom:11px solid #e4b857}
.intro-copy {padding:0;max-width:1080px}
.intro-copy h1 {font-family:var(--font-serif);font-style:normal;font-variation-settings:'WONK' 1;font-weight:600;letter-spacing:-.075em;font-size:clamp(68px,9.7vw,160px);line-height:.96;max-width:1000px;margin:0 0 34px;color:#fff}
.intro-copy h1 em {font-style:normal;color:inherit}
.intro-copy .hero-description {font:400 clamp(21px,2.35vw,31px)/1.27 var(--book-font);letter-spacing:-.015em;max-width:650px;color:#e7ecf2;margin:0 0 23px}
.hero-author-note {font:italic 400 17px/1.38 var(--book-font);color:#f3daa4;max-width:650px;margin:0}
.intro-grid .hero-art,.quiet-proof {display:none!important}
/* A real reading slip, not the default bordered SaaS card. */
.opening-form {position:relative;margin:-43px clamp(24px,5vw,84px) 76px 8vw;box-shadow:14px 14px 0 #d5dfe8;background:#eff3f7;border:0;color:var(--ink);z-index:1}
.form-section-heading {background:transparent;border:0;border-bottom:1px solid var(--ink);display:flex;align-items:baseline;gap:14px;padding:22px 32px 12px;font:500 17px/1.3 var(--ui-font);text-transform:none;letter-spacing:0;color:var(--ink)}
.form-section-heading>span:first-child {font-family:var(--font-serif);font-size:31px;letter-spacing:-.055em;color:var(--accent);font-weight:600}
.form-section-heading>span:nth-child(2) {font-weight:500}
.form-section-heading .section-rule,.form-section-heading .step-count {display:none}
.opening-form-body {border:0;padding:31px 32px 29px;gap:28px}
.opening-form-intro label {font-family:var(--font-serif);font-variation-settings:'WONK' 1;font-size:clamp(32px,4vw,53px);line-height:1.04;letter-spacing:-.055em;color:var(--ink);font-weight:500}
.opening-form-intro p {font:400 15px/1.55 var(--book-font);color:#53647b;margin-top:15px}
.opening-control textarea {background:transparent;border:0;border-bottom:2px solid var(--ink);padding:8px 4px 10px;color:var(--ink);font:400 17px/1.55 var(--book-font);box-shadow:none;border-radius:0}
.opening-control textarea::placeholder {color:#738094;font-style:italic;font-family:var(--book-font);opacity:1}
.control-bottom {margin-top:11px}
.example-button {display:inline-block;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;padding:3px 0;font:500 16px/1.3 var(--ui-font);text-decoration:none;color:var(--ink);min-height:unset;letter-spacing:0}
.example-button:hover {background:transparent;color:var(--accent)}
.example-button svg {display:none}
.character-hint {opacity:0;transition:opacity .2s;font:11px var(--font-sans);color:var(--secondary)}
.character-hint.is-visible {opacity:1}
.form-bottom-row {background:transparent;border-top:1px solid var(--line);padding:17px 32px 24px}
.form-promise {font:400 12px var(--book-font);text-transform:none;letter-spacing:0;color:var(--secondary)}
.primary-button {background:var(--accent);color:white;border:0;border-radius:0;box-shadow:5px 5px 0 var(--ink);font:600 18px/1.25 var(--ui-font);letter-spacing:-.012em;transition:transform .12s,box-shadow .12s,background .12s}
.primary-button:hover:not(:disabled) {transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink);background:#a93e2b}
.primary-button:disabled {background:#a9b3bf;color:#e5e8ec;box-shadow:5px 5px 0 #8193a7;opacity:.85}
.outline-button {border-radius:0;border:1px solid var(--ink);background:transparent;color:var(--ink);font:500 16px/1.3 var(--ui-font)}
.outline-button:hover {background:#e9edf2;color:var(--ink)}
.primary-button .lucide-arrow-up-right,.text-button .lucide-arrow-up-right,.example-button .lucide-arrow-up-right,.outline-button .lucide-arrow-up-right {display:none}

/* Question cards, written like marginal notes, no generic three-column typography. */
.conversation-stage {padding-top:56px}
.journey-grid {align-items:start}
.conversation-aside h2 {font-family:var(--font-serif);font-size:clamp(42px,5vw,80px);font-weight:600;letter-spacing:-.055em;line-height:.97;color:var(--ink)}
.conversation-aside h2 em {font-style:normal}
.conversation-aside .eyebrow {font:italic 17px var(--book-font);color:var(--accent);letter-spacing:0;text-transform:none}
.conversation-aside .eyebrow-dash {display:none}
.question-main {border-left:3px solid var(--ink)}
.question-topline {font:500 15px var(--ui-font);letter-spacing:0;text-transform:none;color:var(--ink)}
.question-topline span:last-child {opacity:.6}
.progress-track {background:#d3dbe3;height:4px}.progress-track span {background:var(--accent)}
.question-content h2 {font-family:var(--font-serif);font-variation-settings:'WONK' 1;font-weight:500;font-size:clamp(44px,5.6vw,76px);letter-spacing:-.055em;line-height:1.06;color:var(--ink)}
.question-lead {font:italic 20px/1.4 var(--book-font);color:var(--secondary)}
.answer-form {border-top:1px solid var(--ink)}
.input-caption {font:500 14px var(--ui-font);text-transform:none;letter-spacing:0;color:var(--ink)}
.answer-form textarea {border:0;border-bottom:2px solid var(--ink);background:transparent;font:400 18px/1.55 var(--book-font);border-radius:0;color:var(--ink)}
.answer-form textarea::placeholder {font-style:italic;color:#748498}
.answer-actions .text-button {font:500 16px var(--ui-font);text-decoration:underline;text-underline-offset:3px;color:var(--secondary)}
.timeline-heading,.conversation-ledger {font:14px var(--ui-font)}

/* Results should look like an edited reading list, with genuine cover imagery. */
.results-stage {padding-top:44px}
.results-lede {background:var(--ink);color:#fff;display:block;padding:clamp(30px,5vw,65px);margin:0 -18px 20px}
.results-lede .eyebrow {font:italic 18px var(--book-font);letter-spacing:0;text-transform:none;color:#e9c46e;margin-bottom:18px}
.results-lede .eyebrow-dash,.results-seal {display:none}
.results-lede h1 {font-family:var(--font-serif);font-weight:600;font-variation-settings:'WONK' 1;letter-spacing:-.065em;font-size:clamp(62px,8.5vw,130px);line-height:.93;margin:0 0 20px;color:#fff}
.results-lede h1 em {font-style:normal;color:inherit}
.results-subtitle {font:400 20px/1.35 var(--book-font);color:#dce4ef;max-width:600px}
.recommendations-heading {border-top:2px solid var(--ink);padding-top:22px;font:600 21px var(--ui-font);text-transform:none;letter-spacing:0;color:var(--ink)}
.recommendations-heading .heading-rule {background:var(--line)}
.books-list {display:grid;grid-template-columns:1fr;gap:0;margin-top:18px}
.book-row,.book-row.is-featured {grid-column:auto;grid-template-columns:50px 132px minmax(0,1fr);gap:27px;min-height:0;border-top:1px solid #aab9c8;border-bottom:0;padding:36px 0;align-items:start;background:transparent}
.book-row:last-child {border-bottom:2px solid var(--ink)}
.book-number {font:italic 500 19px var(--ui-font);color:var(--accent);letter-spacing:0;margin-top:8px}
.book-cover,.is-featured .book-cover {width:132px;aspect-ratio:2/3;height:auto;min-height:198px;border:0;box-shadow:4px 5px 0 rgba(24,43,74,.17);background:#e5e5db;color:var(--ink);padding:14px}
.book-cover:not(.has-cover-image) {background:#e2e7ec;border:1px solid #bac4cf;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.book-cover:not(.has-cover-image) .cover-top,.book-cover:not(.has-cover-image) .cover-ornament {display:none}
.book-cover:not(.has-cover-image) .cover-title {font:500 19px/1.04 var(--font-serif);letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--ink)}
.book-cover:not(.has-cover-image) .cover-author {font:12px/1.4 var(--book-font);color:var(--secondary)}
.book-cover.has-cover-image {padding:0}
.book-info,.is-featured .book-info {padding-top:2px}
.book-kicker {font:italic 15px var(--book-font);letter-spacing:0;text-transform:none;color:var(--accent)}
.book-row .book-title,.book-row.is-featured .book-title {font-family:var(--font-serif);font-weight:550;font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.05em;color:var(--ink)}
.book-row .book-author,.is-featured .book-author {font:400 17px var(--book-font);color:var(--secondary)}
.book-row .book-reason,.book-row.is-featured .book-reason {font:400 17px/1.5 var(--book-font);max-width:800px;color:#394e67}
.read-trigger,.book-buy,.book-source {font:500 16px var(--ui-font);color:var(--ink);letter-spacing:0}
.book-buy {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.book-feedback {margin-top:18px}
.read-trigger .lucide {display:none}
.cover-credit,.affiliate-disclosure p {font:400 13px/1.6 var(--book-font)}
.affiliate-disclosure {border-top:1px solid var(--ink)}
.affiliate-disclosure .lucide {display:none}

/* A pale-yellow, actual bookplate-like reading record. The PNG uses the same colours. */
.portrait-panel {background:#f3e1a0;color:var(--ink);box-shadow:9px 9px 0 #d8d4c5;border:0;padding:32px clamp(24px,4vw,58px) 26px}
.portrait-topline,.portrait-footer,.portrait-favourites {border-color:#8291a8}
.portrait-label,.portrait-topline-note,.portrait-overline,.portrait-favourites-head,.portrait-footer {font:500 14px var(--ui-font);letter-spacing:0;text-transform:none;color:#334d70}
.portrait-label .lucide {display:none}
.portrait-content {grid-template-columns: .87fr 1.13fr;padding:45px 0 47px;gap:36px}
.portrait-content h2 {font-family:var(--font-serif);font-variation-settings:'WONK' 1;font-style:normal;font-weight:600;color:var(--ink);font-size:clamp(48px,5.4vw,79px);letter-spacing:-.055em}
.portrait-story {border-left:2px solid #6b7c92}
.portrait-quote {color:var(--accent)}
.portrait-content .portrait-story p {font-family:var(--book-font);color:var(--ink);font-size:clamp(22px,2.3vw,29px);line-height:1.4}
.portrait-favourites-head {color:var(--ink)}
.portrait-book-caption {color:var(--ink);font:13px/1.4 var(--book-font)}
.portrait-book-cover {box-shadow:4px 5px 0 rgba(24,43,74,.17)}
.portrait-share-actions>div strong {font:500 24px var(--font-serif);color:var(--ink)}
.portrait-share-actions>div span {font:15px/1.4 var(--book-font);color:var(--secondary)}

/* About and footer: no faux editorial stickers; let the author speak. */
.settings-dialog {background:#f5f6f4;border:2px solid var(--ink);box-shadow:14px 14px 0 rgba(13,31,56,.32)}
.settings-dialog::backdrop {background:#0e1d30a6;backdrop-filter:blur(2px)}
.settings-inner h2 {font:600 clamp(48px,5vw,77px)/1.01 var(--font-serif);letter-spacing:-.06em;color:var(--ink)}
.settings-inner h2 em {font-style:normal;color:inherit}
.settings-top .eyebrow {font:italic 16px var(--book-font);color:var(--accent);letter-spacing:0;text-transform:none}
.settings-top {border-bottom:1px solid #b0bdcd;padding-bottom:13px}
.close-dialog {font:400 30px var(--ui-font);border:0;color:var(--ink)}
.settings-icon {display:none}
.settings-inner>p {font:400 16px/1.55 var(--book-font);color:var(--ink);max-width:100%;margin:0 0 17px}
.about-signoff {border-top:2px solid var(--ink);margin-top:23px;padding-top:17px}
.settings-inner .about-signoff p {font:italic 400 21px/1.32 var(--book-font);color:var(--ink)}
.site-footer {border-top:2px solid var(--ink);color:var(--ink)}
.compact-footer .footer-note {font:italic 15px var(--book-font);text-transform:none;letter-spacing:0;color:var(--ink)}
.compact-footer .footer-actions a,.compact-footer .footer-actions button {font:500 15px var(--ui-font);letter-spacing:0;text-transform:none;color:var(--ink)}
.compact-footer .footer-actions a .lucide {width:13px}
.endnote {border-top:2px solid var(--ink)}
.endnote h2 {font:600 clamp(46px,5vw,70px)/1.05 var(--font-serif);letter-spacing:-.05em;color:var(--ink)}
.endnote h2 em {font-style:normal}
.endnote-description {font:400 17px/1.5 var(--book-font);color:var(--secondary)}
.kofi-link {border:1px solid var(--ink);background:#f3e1a0;color:var(--ink);font:500 16px var(--ui-font)}
.kofi-link:hover {background:#e9d383}
.loading-overlay {background:rgba(18,36,62,.78)}
.loading-card {background:#f3e1a0;border:0;box-shadow:12px 12px 0 #1a3050;color:var(--ink)}
.loading-flower {display:none}
.loading-card::before {content:'A note from the shelves';display:block;margin-bottom:17px;font:italic 17px var(--book-font);color:var(--accent)}
.loading-title {font:600 33px/1.08 var(--font-serif)}
.loading-detail {font:16px/1.4 var(--book-font)}
.loading-rule {background:var(--ink)}

/* No template transitions. Respect reduced motion and UI affordances. */
.book-row,.book-row.is-new-pick {animation:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(max-width:900px) {
 .intro-grid {margin:0 -12px;padding:48px 42px 65px}
 .intro-copy h1 {font-size:clamp(66px,9.7vw,94px)}
 .opening-form {margin:-24px 24px 58px}
 .opening-form-body {display:grid;grid-template-columns:1fr;gap:18px}
 .book-row,.book-row.is-featured {grid-template-columns:40px 132px 1fr;gap:20px}
 .book-row .book-title,.book-row.is-featured .book-title {font-size:clamp(30px,5vw,43px)}
 .book-row .book-reason,.book-row.is-featured .book-reason {font-size:16px}
 .portrait-content {grid-template-columns:1fr}
 .portrait-story {margin:24px 0 0}
}
@media(max-width:600px){
 .page-shell {padding:0 17px}
 .site-header {height:61px}
 .site-header .wordmark {font-size:25px;letter-spacing:-.07em}
 .site-header .header-action {font-size:14px}
 .intro-stage {padding:13px 0 18px}
 .intro-grid {margin:0 -17px;padding:33px 23px 45px;border-bottom-width:7px}
 .intro-copy h1 {font-size:clamp(51px,13.4vw,68px);line-height:.99;letter-spacing:-.065em;margin:0 0 16px;max-width:530px}
 .intro-copy .hero-description {font-size:16px;line-height:1.36;margin-bottom:11px;max-width:360px}
 .hero-author-note {font-size:14px;line-height:1.33;margin:0;max-width:360px}
 .opening-form {margin:-13px 0 18px;box-shadow:5px 6px 0 #cbd6e1}
 .form-section-heading {padding:9px 13px 7px;gap:11px;font-size:14px}
 .form-section-heading>span:first-child {font-size:22px}
 .opening-form-body {padding:10px 14px 11px;gap:10px}
 .opening-form-intro label {font-size:clamp(25px,6.6vw,30px);line-height:1.08;letter-spacing:-.035em}
 .opening-form-intro p {font:400 11px/1.32 var(--book-font);margin:6px 0 0}
 .opening-control textarea {height:87px;min-height:87px;resize:none;font-size:16px;line-height:1.36;padding:7px 1px 8px;overflow-y:hidden}
 .opening-control textarea::placeholder {font-size:14px;line-height:1.36}
 .control-bottom {margin-top:5px}
 .example-button {font-size:14px;min-height:29px;padding:0 0 2px;border:0;border-radius:0;border-bottom:1px solid var(--ink)}
 .character-hint {font-size:10px}
 .form-bottom-row {padding:9px 14px 14px}
 .form-bottom-row .primary-button {width:100%;min-height:45px;font-size:16px;padding:10px 12px}
 .conversation-stage {padding:26px 0 50px}
 .conversation-aside {padding:0 0 18px}
 .conversation-aside h2 {font-size:44px;margin:12px 0 0}
 .question-main {border:0;padding:0;min-height:unset}
 .question-topline {font-size:14px}
 .question-content {margin-top:28px}
 .question-content h2 {font-size:clamp(36px,9.2vw,48px)}
 .answer-form textarea {font-size:16px;min-height:110px}
 .results-stage {padding-top:22px}
 .results-lede {margin:0 -17px 20px;padding:28px 22px 29px}
 .results-lede h1 {font-size:clamp(55px,12vw,69px);line-height:1.02}
 .results-subtitle {font-size:16px}
 .books-list {margin-top:0}
 .book-row,.book-row.is-featured {grid-template-columns:26px 96px minmax(0,1fr);gap:10px;padding:22px 0;min-height:0;align-items:start}
 .book-number {font-size:15px;margin-top:3px}
 .book-cover,.is-featured .book-cover {width:96px;min-height:144px;max-width:96px}
 .book-cover:not(.has-cover-image) .cover-title {font-size:16px}
 .book-kicker {font-size:11px}
 .book-info,.is-featured .book-info {padding-top:0}
 .book-row .book-title,.book-row.is-featured .book-title {font-size:clamp(25px,7vw,35px);line-height:1.05}
 .book-row .book-author,.is-featured .book-author {font-size:13px}
 .book-row .book-reason,.book-row.is-featured .book-reason {font-size:14px;line-height:1.5}
 .portrait-panel {margin:32px 0 30px;padding:20px 19px 22px;box-shadow:5px 6px 0 #d8d4c5}
 .portrait-content {padding:30px 0 28px}
 .portrait-content h2 {font-size:clamp(42px,10vw,60px);line-height:1.01}
 .portrait-story {border-left:2px solid #6b7c92;padding-left:16px;margin-top:25px}
 .portrait-content .portrait-story p {font-size:20px}
 .portrait-favourite {max-width:calc(33% - 12px)}
 .portrait-book-caption {font-size:11px}
 .portrait-share-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .portrait-share-actions>div {grid-column:span 2}
 .settings-dialog {max-height:calc(100dvh - 16px);width:calc(100% - 20px);background:var(--paper);box-shadow:5px 6px 0 #182d49}
 .settings-inner {padding:16px 19px 18px}
 .settings-top {position:sticky;top:0;background:var(--paper);z-index:2;min-height:35px;margin:0 0 8px;padding-bottom:8px}
 .settings-inner h2 {font-size:clamp(42px,11vw,51px);margin:4px 0 12px}
 .settings-inner>p {font-size:14px;line-height:1.47;margin:0 0 10px}
 .settings-inner .about-signoff p {font-size:17px;line-height:1.25}
 .about-signoff {margin-top:12px;padding-top:11px}
 .compact-footer {gap:9px;padding:15px 0 17px}
 .compact-footer .footer-note {font:italic 13px var(--book-font);letter-spacing:0}
 .compact-footer .footer-actions a,.compact-footer .footer-actions button {font-size:14px}
}
@media(max-width:380px) {
 .intro-copy h1 {font-size:51px}
 .opening-form-intro p {display:none}
 .book-row,.book-row.is-featured {grid-template-columns:22px 81px minmax(0,1fr);gap:10px}
 .book-cover,.is-featured .book-cover {width:81px;min-height:122px;max-width:81px}
 .book-row .book-title,.book-row.is-featured .book-title {font-size:25px}
}
@media(max-width:600px) and (max-height:720px){
 .intro-copy h1 {font-size:47px}
 .intro-grid {padding-top:24px;padding-bottom:34px}
 .opening-control textarea {height:80px;min-height:80px}
}
/* When an actual Open Library cover arrives, it replaces the plain-text fallback. */
.book-cover::before,.book-cover::after {display:none!important}
.book-cover:not(.has-real-cover) {background:#e2e7ec!important;color:var(--ink)!important;border:1px solid #bac4cf;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:14px!important}
.book-cover:not(.has-real-cover) .cover-top,.book-cover:not(.has-real-cover) .cover-ornament {display:none}
.book-cover:not(.has-real-cover) .cover-title {font:500 19px/1.04 var(--font-serif);letter-spacing:-.02em;overflow-wrap:anywhere;color:var(--ink)}
.book-cover:not(.has-real-cover) .cover-author {font:12px/1.4 var(--book-font);color:var(--secondary)}
.book-cover.has-real-cover {padding:0!important}
.book-cover .real-cover {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10}
@media(max-width:600px){.book-cover:not(.has-real-cover){padding:9px!important}.book-cover:not(.has-real-cover) .cover-title{font-size:15px}}
/* The footer no longer needs an additional author credit. */
.compact-footer{justify-content:flex-end}