/* The Living Vault™ — Story Publishing Engine: typography & layout. Shared by every work in the Vault; nothing here is specific to any one book. ONE RULE GOVERNS EVERY TYPEFACE DECISION HERE: the author's words are serif · the machine's words are sans Lora carries the book — cover, chapters, narration, dialogue, every line the Founder wrote. Inter carries everything that is not the book — the bar, the buttons, the contents, the labels. A reader should never be able to mistake the interface for the story. Body was Inter until it was measured against Lora side by side. Inter is a superb interface face, and that is exactly the problem: its evenness never stops feeling like a screen. The decisive evidence was the dialogue — with Inter narration, a Lora dialogue line read like a quote widget dropped into an interface, two typefaces talking past each other. In Lora the page speaks with one voice, and the dialogue is still unmistakably speech, carried by indent, rule and softer ink alone. That is how a printed memoir does it: dialogue is never set in a different face. The swap removed a typeface from the manuscript and kept every distinction. Sizes are matched optically, never nominally. Inter's x-height is 0.546em, Lora's is 0.500em, so Inter looks 1.09× larger at the same px: 21px Inter ≈ 23px Lora. Leading follows the same logic — the brief's 1.9 on Inter is 3.48× x-height, which on Lora is 1.75. Same rhythm, said correctly for a different face. No cards, boxes, panels or shadows anywhere in the manuscript body. Font paths resolve from public//styles.css, so `../fonts/` is the shared font dir. */ @font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/lora-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/lora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap; src:url('../fonts/inter-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ── Theme Engine ──────────────────────────────────────────── Light is the default and the intended reading experience. Sepia and dark exist because people read at night and on tired eyes — each keeps the same paper feeling, the same rare accent, the same calm. Reader choices below (size, leading, width) are set on . */ :root{ /* ── Global background system ── --bg is the ONE canonical page/app background, shared with the browse layer (letters.css) so the homepage, the collection pages and every reader render on the SAME page ground. It was #F2EEE7 here (deeper) vs #F8F6F1 on the outer pages — the tone jump the Founder saw between the outside and the inside. Unified to the outer value #F8F6F1; the reader now inherits it. The chapter card is a SURFACE derived from that page: only a hair lifted (#FBF8F2, ~1.02× over the page), warm, never a white box — the border carries most of the layering. */ --bg:#F8F6F1; /* canonical page background — same as the browse layer */ --paper:#FFFDF8; /* chrome overlays only (drawer, selection bar), never the card */ --chapter-card-bg:#FBF8F2; /* reader surface — a barely-there warm lift off --bg */ --card-border:#E9E3D9; --card-shadow:0 1px 2px rgba(70,55,35,.04); --ink:#25231F; --ink-strong:#1F1D19; /* pivot lines only */ /* The brief's muted tone is #777168, which lands at 4.47:1 on this paper — a hair under the 4.5:1 needed for small text. Nudged just far enough to pass; the difference is invisible. */ --ink-soft:#736D64; --ink-dialogue:#5F5A53; --accent:#CC6600; --accent-deep:#A65300; --border:#DDD7CE; --rule:rgba(204,102,0,.35); --highlight:rgba(204,102,0,.20); /* the reader's own ink on the page */ --scrim:rgba(37,35,31,.25); /* The measure is set by the text that exists, not by prose in general. This manuscript is written one breath per line: 2,641 of its 2,660 paragraphs are a single line, the median line is 197px of ink and only 10 ever reach a 736px edge. A 46rem column was therefore a page three-quarters empty, with the text hugging the left margin — the look of a web document, not a book. At 34rem the long lines (p90) land at ~55 characters, squarely in the comfortable range, and the short ones sit on a page that fits them. */ --measure:34rem; /* ~544px reading column */ /* Publication hero (cover) title measure. The display title is set at up to 5rem, so with no limit a long title ("Đừng Đánh Mất Cuộc Đời Trên Đường Xây Dựng Doanh Nghiệp") ran the full width of the cover — far past the subtitle's 30rem axis. Capped here so the title stays a contained, centred 2–3 line block on every screen, wide desktop included. One shared default; no per-work override is needed for the works in the Vault. ~34rem sits just off the subtitle's 30rem axis, so title and subtitle read as one column. */ --publication-title-max:34rem; --body-size:23px; /* Lora — optically ≈ 21px Inter */ --leading:1.75; /* ≡ 1.9 on Inter: 3.5× x-height */ /* Vertical rhythm — one scale for the whole reader. This manuscript is one breath per line and uses ~380 scene breaks, so every step here repeats hundreds of times: kept tight so the page reads as continuous prose, not a column of far-apart stanzas. Two steps only: · para — the ordinary gap between lines of narration · pause — the author's larger, deliberate breath: a scene break "·", a bolded pivot line, a "..." heading. Bigger than the paragraph step, never a cavernous band. */ /* ── Vertical rhythm — ONE spacing system for every reading surface ── Book, letter and story all read on these tokens; no route sets its own gaps. Tuned down from the original airy values (Founder: too much empty space, worst on mobile, especially the scene-break bands and the chapter head) while keeping the author's pauses legible — a scene break is still visibly larger than a paragraph step, just no longer a cavern. */ --prose-paragraph-gap:1.2rem; /* p → p */ --prose-section-gap:1rem; /* scene break (---), pivot line, source "…" — each-side margin */ --prose-quote-gap:1.5rem; /* dialogue · blockquote · pullquote · letter · poem */ --prose-heading-gap:2.5rem; /* chapter head → first line (was 4.5rem) */ --chapter-block-gap:1.5rem; /* card → card */ --part-transition-gap:1.5rem; /* the part title card → what follows */ --reflection-gap:2.5rem; /* the reflection card, off the closing line */ /* Back-compat aliases — old names still resolve to the new rhythm. */ --space-para:var(--prose-paragraph-gap); --space-pause:var(--prose-section-gap); --serif:'Lora',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } :root[data-theme="sepia"]{ --bg:#EFE3CF; --paper:#F8F0E2; --chapter-card-bg:#FBF5EA; --card-border:#E4D7BE; --card-shadow:0 1px 2px rgba(90,65,25,.05); --ink:#3B3227; --ink-strong:#2E271E; --ink-soft:#72664F; --ink-dialogue:#665A49; --border:#DCCDB4; --rule:rgba(166,83,0,.38); --highlight:rgba(166,83,0,.22); --scrim:rgba(59,50,39,.28); } :root[data-theme="dark"]{ --bg:#141311; --paper:#201F1C; --chapter-card-bg:#201F1C; --card-border:#33302B; --card-shadow:0 1px 3px rgba(0,0,0,.28); --ink:#E4DFD6; /* warm off-white: never pure #fff on black */ --ink-strong:#F3EEE5; --ink-soft:#9A9287; --ink-dialogue:#B3AB9F; --accent:#E8873A; /* lifted, so it still reads against a dark ground */ --accent-deep:#F0A162; --border:#37342F; --rule:rgba(232,135,58,.42); --highlight:rgba(232,135,58,.28); --scrim:rgba(0,0,0,.5); } /* Follow the reader's system preference until they choose for themselves. */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#141311; --paper:#201F1C; --chapter-card-bg:#201F1C; --card-border:#33302B; --card-shadow:0 1px 3px rgba(0,0,0,.28); --ink:#E4DFD6; --ink-strong:#F3EEE5; --ink-soft:#9A9287; --ink-dialogue:#B3AB9F; --accent:#E8873A; --accent-deep:#F0A162; --border:#37342F; --rule:rgba(232,135,58,.42); --highlight:rgba(232,135,58,.28); --scrim:rgba(0,0,0,.5); } } /* Reader preferences */ :root[data-size="-1"]{--body-size:21px} :root[data-size="1"]{--body-size:25px} :root[data-leading="tight"]{--leading:1.6} :root[data-leading="loose"]{--leading:1.95} :root[data-width="narrow"]{--measure:28rem} :root[data-width="wide"]{--measure:42rem} /* The reader's fixed reading measure (data-width="reader" on ). The narrow 28rem preset read too tight on a desktop screen — a wide card with a thin ribbon of text. This measure widens the text column to a comfortable ~40rem on desktop (card ~44.5rem — contained, never full width), and steps down on a tablet so the card keeps a healthy side margin. On a phone the card fills the viewport as before (the container caps at the screen, whatever the measure). Fixed rem on wide desktop: the column stops growing. */ :root[data-width="reader"]{--measure:40rem} @media (max-width:1024px){ :root[data-width="reader"]{--measure:33rem} } *{box-sizing:border-box} /* Must outrank the display set by .btn / layout rules below. */ [hidden]{display:none !important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); /* the book */ font-size:var(--body-size); line-height:var(--leading); font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .25s ease,color .25s ease; } /* ── Skip link ───────────────────────────────────────────── */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--paper);color:var(--ink); padding:.75rem 1.25rem;border:1px solid var(--border); font-family:var(--sans);font-size:1rem;text-decoration:none; } .skip-link:focus{left:1rem;top:1rem} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ── Reading progress ────────────────────────────────────── */ .progress{ position:fixed;top:0;left:0;right:0;height:2px; background:transparent;z-index:40;pointer-events:none; } .progress__bar{ height:100%;width:0; background:var(--accent); transform-origin:left center; transition:width .12s linear; } /* ── Top bar — discreet, appears once reading begins ─────── */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:30; display:flex;align-items:center;gap:.75rem; padding:.5rem max(1.25rem,env(safe-area-inset-left)); /* A running head, not a toolbar. This was frosted glass — blur(10px) saturate(180%) over a hairline border — which the brief banned by name, and which was the last thing on the page that could only be an app. A book has no frosted panel floating above the paper. So: the same paper, opaque, with no edge. Text passes under it the way it passes under the top margin of a page. */ background:var(--bg); border-bottom:1px solid transparent; opacity:0;visibility:hidden; transition:opacity .3s ease,visibility .3s ease; } .topbar.is-visible{opacity:1;visibility:visible} /* Return to the collection. A compact home control — icon + wordmark on wide screens, the icon alone on a phone — so there is always a one-tap way back to Những Lá Thư, never buried. */ .topbar__home{ display:inline-flex;align-items:center;gap:.45rem; min-height:44px;padding:0 .5rem;flex-shrink:0; font-family:var(--sans);font-size:.625rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft); text-decoration:none;white-space:nowrap;border-radius:8px; transition:color .2s ease; } .topbar__home:hover{color:var(--accent)} .topbar__home svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .topbar__current{ flex:1;min-width:0; font-family:var(--sans);font-size:.8125rem;color:var(--ink-soft); text-align:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .topbar__actions{display:flex;align-items:center;gap:.125rem} /* A quiet path onward to AI BOS — a restrained outline pill (accent by outline, not fill), the same rounded family as the reader. Never crowds the title; folds to "AI BOS" on a phone. */ .topbar__cta{ display:inline-flex;align-items:center;flex-shrink:0; min-height:32px;padding:.3rem .8rem;margin-right:.35rem; border-radius:999px;background:none;border:1px solid var(--accent); color:var(--accent);text-decoration:none; font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.04em;white-space:nowrap; transition:background .2s ease,color .2s ease; } .topbar__cta:hover{background:var(--accent);color:#fff} /* .iconbtn lives in the shared toc.css (drawer close + header controls) — linked by this page. */ /* ── Cover ───────────────────────────────────────────────── */ .cover{ min-height:100svh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; padding:5rem 1.5rem 4rem; } .cover__mark{ font-family:var(--sans);font-size:.6875rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft); margin:0 0 3.5rem; } .cover__title{ font-family:var(--serif); /* Cap eased from 5rem to 4rem: at 5rem a long title needed ~52rem of width for 2–3 lines, which is no longer "contained". 4rem is still a large display size, and within the measure below it wraps to 2–3 clean lines (four only for the single longest title in the Vault). Mobile floor unchanged. */ font-size:clamp(2.75rem,6.5vw,4rem); font-weight:400;line-height:1.12;letter-spacing:.01em; margin:0 auto;color:var(--ink); /* Contained and centred, on its own measure — not the full cover width. `balance` evens the line lengths (a supported browser only; the max-width alone already fixes the overrun). */ max-width:var(--publication-title-max); text-wrap:balance; } .cover__rule{ width:3rem;height:1px;background:var(--border); border:0;margin:2.5rem auto; } .cover__sub{ font-family:var(--serif); font-size:clamp(1.0625rem,2.4vw,1.25rem); line-height:1.75;color:var(--ink-soft); max-width:30rem;margin:0 auto;font-style:italic; } .cover__actions{ margin-top:3.5rem; display:flex;flex-direction:column;align-items:center;gap:1rem; } .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:.75rem 2rem; font-family:var(--sans);font-size:.9375rem;font-weight:500; letter-spacing:.02em;text-decoration:none;cursor:pointer; border-radius:14px;transition:background .2s ease,color .2s ease,border-color .2s ease; } .btn--primary{background:var(--accent);color:#fff;border:1px solid var(--accent)} .btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .btn--quiet{background:none;color:var(--ink-soft);border:1px solid var(--border)} .btn--quiet:hover{color:var(--accent);border-color:var(--accent)} /* Not-yet-configured destination: clearly inert, and not by colour alone — a dashed edge and the disabled state carry it too. */ .btn:disabled,.btn[disabled]{ background:none;color:var(--ink-soft);border:1px dashed var(--border); opacity:.6;cursor:not-allowed; } .btn:disabled:hover,.btn[disabled]:hover{color:var(--ink-soft);border-color:var(--border);background:none} .btn--text{background:none;border:none;color:var(--ink-soft);text-decoration:underline; text-underline-offset:4px;text-decoration-color:var(--border);padding:.5rem} .btn--text:hover{color:var(--accent);text-decoration-color:var(--accent)} /* ── Table of contents (static section) ──────────────────── */ .toc{ max-width:var(--measure); margin:0 auto;padding:6rem 1.5rem; } .toc__label{ font-family:var(--sans);font-size:.6875rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft); text-align:center;margin:0 0 3rem; } /* The rows (.toc__list/item/link/n/t/min and part variants) live in the shared toc.css. */ .toc__meta{ text-align:center;margin:3rem 0 0; font-family:var(--sans);font-size:.8125rem;color:var(--ink-soft); } /* ── Manuscript ──────────────────────────────────────────── */ /* Widened by exactly the chapter card's own padding, so the line of text inside a card still lands on the ~34rem measure — the card grows around the words, the words do not move. */ .manuscript{ /* The canonical content-card column (shared token in toc.css). Same value it always was — 40rem measure + 7rem gutter = 47rem — now named once so the homepage cards can match it. */ max-width:var(--content-card-max); margin:0 auto; padding:0 1.25rem; } /* Performance note — measured, not assumed. `content-visibility:auto` was tried here and removed. A book of this shape is ~3,800 plain text nodes, so deferring layout saved nothing measurable (FCP 76ms with it vs 60ms without; identical scroll cost) — and it made the document report 32,565px instead of its true 213,545px until every chapter had been rendered once. Resume reads an absolute offset, so a reader returning to 150,000px landed at 43,714px, in the wrong chapter. The cost was real and the benefit was not. Plain layout it is. */ /* Each chapter is a warm card lifted a shade off the page — soft large radius, a whisper of a border, the faintest shadow. Same words, same rhythm; only the surface beneath them is new. */ .chapter{ background:var(--chapter-card-bg); border:1px solid var(--card-border); border-radius:24px; box-shadow:var(--card-shadow); padding:3.5rem 2.25rem 3rem; margin:0 0 var(--chapter-block-gap); } .chapter__head{margin:0 0 var(--prose-heading-gap);text-align:center} .chapter__n{ display:block; font-family:var(--sans);font-size:.6875rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--accent); margin-bottom:1.25rem; } .chapter__title{ font-family:var(--serif); font-size:clamp(1.75rem,4.5vw,2.375rem); font-weight:400;line-height:1.3;color:var(--ink); margin:0; } /* Narration — paragraph rhythm follows the reader's leading choice */ .chapter p{margin:0 0 var(--space-para);font-size:1em;line-height:var(--leading)} /* The author's own "..." headings — kept as a pause, never removed */ .source-heading{ text-align:center;color:var(--ink-soft); letter-spacing:.3em;margin:var(--space-pause) 0 !important; } /* Key lines. A pivot line the author bolded in full (.key-moment) gets a little more size and air; bold used inside a mixed sentence stays plain bold so the narration keeps its flow — emphasising every bold would be the overuse the brief warns against. No box, no background, no quote card. */ .key-line{font-weight:700;color:var(--ink-strong)} /* Specificity must beat `.chapter p` above, or the size increase is silently dropped. */ .chapter p.key-moment{ margin:var(--space-pause) 0; /* the author's silence around the line, kept */ font-size:1.15em; line-height:1.65; } /* Dialogue — indented, with a thin rule. Never a bubble, never a card, never a background. */ .dialogue{ margin:var(--prose-quote-gap) 0 var(--prose-quote-gap) 2.5rem; padding-left:1.5rem; border-left:2px solid var(--rule); color:var(--ink-dialogue); /* No font-family: the narration is already Lora. Dialogue is the same hand — indent, rule and softer ink carry it, exactly as they do on paper. */ font-style:normal; } .dialogue p{ margin:0 0 .5rem; font-size:1em;line-height:var(--leading); } .dialogue p:last-child{margin-bottom:0} .dialogue .key-line{color:var(--ink)} /* Scene break — a breath, not a divider */ .scene-break{ border:0;height:0; margin:var(--space-pause) auto; width:100%; text-align:center; } .scene-break::after{ content:"·"; color:var(--border); font-size:1.5rem;line-height:0; letter-spacing:.75em; } /* The author's own end-of-section markers */ .section-end{ text-align:center;color:var(--ink-soft); font-style:italic;font-size:.9375em; margin:4rem 0 1rem !important; } /* One of the fourteen was typed **bold** where the rest are *italic*. Same element, same voice: normalise it so it stops shouting. Presentation only — the words are the author's. */ .section-end .key-line{font-weight:400;color:var(--ink-soft)} /* ── Typography Engine — opt-in blocks (::: name … :::) ──── Every one of these is set with type and space alone. No card, no panel, no shadow. */ /* Pull quote — a line lifted out of the flow and given air. Still no box. */ .pullquote{ margin:calc(var(--prose-quote-gap) + 1rem) 0;padding:0;border:0; font-family:var(--serif); font-size:1.5em;line-height:1.5; color:var(--ink-strong); text-align:center; } .pullquote p{margin:0 0 .5rem;font-size:1em;line-height:1.5} .pullquote p:last-child{margin-bottom:0} /* Letter — inset, quieter, as if laid on the page */ .letter{ margin:calc(var(--prose-quote-gap) + .5rem) 0;padding-left:2rem; border-left:1px solid var(--border); font-family:var(--serif); color:var(--ink-dialogue); } .letter p{margin:0 0 1.1rem;font-size:.98em;line-height:1.8} .letter p:last-child{margin-bottom:0} /* Poetry & scripture — a line break is meaning, never wrapping */ .poem,.scripture{ margin:calc(var(--prose-quote-gap) + .5rem) 0;padding:0;border:0; font-family:var(--serif); } .poem{padding-left:2rem;color:var(--ink)} .scripture{ padding-left:2rem; border-left:2px solid var(--rule); color:var(--ink-dialogue); font-style:italic; } .verse{display:block;line-height:1.75;text-indent:-1.25rem;padding-left:1.25rem} .verse-gap{display:block;height:1.1em} /* Epigraph — a quiet note under a title */ .epigraph{ margin:0 0 3.5rem; font-family:var(--serif);font-style:italic; color:var(--ink-soft);text-align:center; } .epigraph p{margin:0 0 .5rem;font-size:.95em;line-height:1.7} /* Footnotes — small, at the foot of their chapter */ .fn-ref{font-size:.62em;line-height:0;vertical-align:super} .fn-ref a{color:var(--accent);text-decoration:none;padding:0 .15em} .fn-ref a:hover{text-decoration:underline} .footnotes{ margin:4rem 0 0;padding-top:1.5rem; border-top:1px solid var(--border); } .footnotes ol{margin:0;padding:0;list-style:none} .fn{ display:flex;gap:.6rem; margin:0 0 .75rem; font-size:.8em;line-height:1.7;color:var(--ink-soft); } .fn__back{color:var(--accent);text-decoration:none;flex-shrink:0} .fn__back:hover{text-decoration:underline} /* ── Book Engine — dedication · about the author · copyright ─ */ .page{ max-width:var(--measure); margin:0 auto;padding:5rem 1.5rem; text-align:center; } .page--dedication{ font-family:var(--serif);font-style:italic; color:var(--ink-soft); padding:7rem 1.5rem; } .page--dedication p{margin:0 0 .75rem;font-size:1.05em;line-height:1.9} .page--about{ border-top:1px solid var(--border); text-align:left;padding-top:4rem; } .page--about p{margin:0 0 1.25rem;font-size:.95em;line-height:1.85;color:var(--ink-soft)} .page__label{ font-family:var(--sans);font-size:.6875rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft); margin:0 0 1.75rem;text-align:center; } .page--copyright{ padding:3rem 1.5rem; font-family:var(--sans);font-size:.75rem;line-height:1.9; color:var(--ink-soft); } .page--copyright p{margin:0 0 .35rem} /* Part divider — a title page between the parts of a book */ .chapter--part{ min-height:60svh; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; margin-bottom:var(--part-transition-gap); } .chapter--part .chapter__head{margin-bottom:0} .chapter--part .chapter__title{font-size:clamp(2rem,5.5vw,3rem)} /* The reading-preferences panel and its segmented controls were removed from the public reader (Founder decision): the reading configuration is now fixed on — light · A− · tight · narrow — so there is no panel, no segmented controls and no "Về mặc định". */ /* ── Screen reader only ───────────────────────────────────── */ .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; } /* ── Reading Experience — marks the reader made ───────────── */ /* A highlight is the reader's own ink on the page: a wash behind the words, never a box. */ .is-highlighted{ background:linear-gradient(transparent 62%, var(--highlight) 62%); } .chapter.is-bookmarked .chapter__head::after{ content:"";display:block;width:1.5rem;height:2px; background:var(--accent);margin:1.25rem auto 0; } .chapter.is-favorite .chapter__n::before{content:"★ ";color:var(--accent)} .toc__link.has-bookmark .toc__n::after{content:"·";color:var(--accent);margin-left:.2rem} .toc__link.has-favorite .toc__t::after{content:" ★";color:var(--accent);font-size:.7em} /* Selection bar — appears only when the reader has chosen a sentence */ .selbar{ position:absolute;z-index:70; display:flex;gap:.125rem; background:var(--paper); border:1px solid var(--border); border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.14); /* interface chrome, never the manuscript */ padding:.125rem; } .selbar button{ min-height:36px;padding:0 .7rem; background:none;border:0;cursor:pointer; font-family:var(--sans);font-size:.75rem;color:var(--ink-soft); border-radius:3px; } .selbar button:hover{background:var(--bg);color:var(--accent)} /* ── Vault Experience — the shelf around a work ───────────── */ .related{ max-width:var(--measure); margin:0 auto;padding:4rem 1.5rem 0; } .related__list{list-style:none;margin:0;padding:0} .related__list li{ padding:1.125rem 0; border-bottom:1px solid var(--border); display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem; } .related__list li:first-child{border-top:1px solid var(--border)} .related__rel{ font-family:var(--sans);font-size:.625rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft); } .related__list a{ font-family:var(--sans);font-size:.9375rem; color:var(--ink);text-decoration:none;flex:1; } .related__list a:hover{color:var(--accent)} .related__meta{font-family:var(--sans);font-size:.6875rem;color:var(--ink-soft)} /* Author timeline */ .tl{list-style:none;margin:0;padding:0;text-align:left} .tl__item{ display:flex;gap:1.25rem;padding:.75rem 0; border-bottom:1px solid var(--border); } .tl__when{ font-family:var(--sans);font-size:.75rem;color:var(--accent); flex-shrink:0;min-width:3.5rem;font-variant-numeric:tabular-nums; } .tl__what{font-family:var(--sans);font-size:.875rem;line-height:1.7;color:var(--ink-soft)} .cover__meta{ margin:1.5rem 0 0; font-family:var(--sans);font-size:.75rem;color:var(--ink-soft); } /* Opening quote / closing reflection — the quietest pages in the book */ .page--opening,.page--closing{ font-family:var(--serif);font-style:italic; color:var(--ink-soft);padding:6rem 1.5rem; } .page--opening p,.page--closing p{margin:0 0 .75rem;font-size:1.05em;line-height:1.9} .page--closing{border-top:1px solid var(--border);margin-top:4rem} /* ── Book Experience — chapter transition ─────────────────── */ /* A chapter arrives, it does not slam. Motion is small by design, and disabled entirely for anyone who asked for less of it (see prefers-reduced-motion). */ @keyframes chapter-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .chapter__head{animation:chapter-in .5s ease both} /* ── High contrast ────────────────────────────────────────── */ @media (prefers-contrast:more){ :root{ --ink:#000;--ink-strong:#000;--ink-soft:#4A453D;--ink-dialogue:#2B2721; --border:#8A8378;--rule:#A65300;--accent:#8F4800; } :root[data-theme="dark"]{ --ink:#FFF;--ink-strong:#FFF;--ink-soft:#D6D0C6;--ink-dialogue:#E4DFD6; --border:#7C766C;--rule:#FFB067;--accent:#FFB067; } .dialogue{border-left-width:3px} :focus-visible{outline-width:3px} } /* ── Ending / CTA — separated from the manuscript ────────── */ .after{ /* Same canonical column as the manuscript, so the reflection card lines up exactly with the chapter cards (same token, same 1.25rem gutter). */ max-width:var(--content-card-max); margin:0 auto; padding:0 1.25rem; } .after__gap{height:14rem} .after__rule{border:0;border-top:1px solid var(--border);margin:0} .cta{padding:6rem 0 7rem;text-align:center} .cta__line{ font-family:var(--serif); font-size:clamp(1.25rem,3vw,1.5rem); line-height:1.7;color:var(--ink); margin:0 auto 3.5rem;max-width:32rem; } .cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem} /* ── Reader Reflection — a quiet, private after-reading note ── A small panel on the same subtle surface as the reading card: thin border, no heavy shadow, lots of breathing room. Never looks like a marketing form. */ /* Same width as a chapter card: .reflect fills its container (.after, widened to the manuscript column below), so its outer edges line up with the book/letter/story chapter cards. */ .reflect{ max-width:none;margin:0 0 var(--reflection-gap);text-align:left; background:var(--chapter-card-bg);border:1px solid var(--card-border);border-radius:24px; padding:2rem 2.25rem; } .reflect__head{ font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-soft);margin:0 0 1rem;text-align:center; } .reflect__q{ font-family:var(--serif);font-size:1.0625rem;line-height:1.6;color:var(--ink); text-align:center;margin:0 auto 1.1rem;padding:0;max-width:34rem; } .reflect__note{margin-top:0} .reflect__text{ width:100%;box-sizing:border-box;resize:vertical;min-height:3.5rem; background:var(--paper);border:1px solid var(--border);border-radius:12px; padding:.75rem .9rem;font-family:var(--sans);font-size:.875rem;line-height:1.6;color:var(--ink); } .reflect__text::placeholder{color:var(--ink-soft)} .reflect__text:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .reflect__meta{display:flex;justify-content:space-between;align-items:center;margin-top:.4rem} .reflect__help,.reflect__count{font-family:var(--sans);font-size:.6875rem;color:var(--ink-soft)} .reflect__count{font-variant-numeric:tabular-nums} /* Two thin outline buttons on one row — white/surface, 1px border, no orange fill, no shadow, same height and radius. Hover lifts a brand-orange outline. */ .reflect__actions{display:flex;gap:.75rem;margin-top:1.25rem} .reflect__btn{ flex:1;min-width:0;min-height:44px;padding:.6rem 1rem; display:inline-flex;align-items:center;justify-content:center; background:var(--paper);border:1px solid var(--border);border-radius:12px; font-family:var(--sans);font-size:.875rem;font-weight:500;color:var(--ink); text-decoration:none;cursor:pointer;white-space:nowrap; transition:border-color .15s ease,color .15s ease; } .reflect__btn:hover{border-color:var(--accent);color:var(--accent)} .reflect__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Left button — the solid-orange Zalo consultation CTA: filled #cc6600, white text, no shadow. */ .reflect__zalo{background:var(--accent);border-color:var(--accent);color:#fff} .reflect__zalo:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff} /* Right button — the submit stays a thin outline; disabled reads clearly but not too faint. */ .reflect__submit:disabled{opacity:.55;cursor:not-allowed;border-color:var(--border);color:var(--ink-soft)} .reflect__submit:disabled:hover{border-color:var(--border);color:var(--ink-soft)} .reflect__status{margin:1rem 0 0;text-align:center;font-family:var(--sans);font-size:.8125rem} .reflect__status--ok{color:var(--ink)} .reflect__status--error{color:#B4462A} /* One row on desktop, tablet and a 390px phone; only stack on a very narrow screen. */ @media (max-width:360px){ .reflect__actions{flex-direction:column} } /* ── Anti-orphan typography (reader) ────────────────────────── Never leave a lone word (or a "…mình.") stranded on the last line. `balance` evens the line lengths of short display type (titles, headings, the closing line, chapter heads); `pretty` pulls up widows/orphans in flowing copy (the cover subtitle, the reflection prompt). Both are progressive — a browser without support just wraps normally, and the max-widths already keep the lines sane. No
, no , no wording changed to rescue a line. */ .cover__title,.chapter__title,.reflect__head,.cta__line,.page__label{ text-wrap:balance; } .cover__sub,.reflect__q,.page p{ text-wrap:pretty; /* opening quote · closing reflection · dedication · About the author */ } .footer{ border-top:1px solid var(--border); padding:2.5rem 1.5rem 3.5rem;text-align:center; } .footer p{ margin:0 0 .5rem; font-family:var(--sans);font-size:.75rem;color:var(--ink-soft); } .footer__label{letter-spacing:.12em} .footer a{color:var(--ink-soft)} .footer a:hover{color:var(--accent)} /* ── Publication variants ───────────────────────────────────── One reader shell, three variants, keyed on the type stamped on : letter — header chapter nav · single warm end CTA (the baseline above) book — parts · contents · chapter progress · foot-of-chapter navigation story — a single uninterrupted read: no contents, no chapter machinery */ /* A story hides the cover contents and the chapter-stepping controls — it is read straight through. The menu button STAYS: for a story it opens the list of stories (this one active), not a chapter table. The home control stays too. */ body[data-type="story"] .toc, body[data-type="story"] #prevBtn, body[data-type="story"] #nextBtn{display:none} /* The quiet "Cộng đồng AI BOS" pill sits in every reader's running head (letter · book · story) — small, orange-outlined, never louder than the reading. */ /* There is no foot-of-chapter navigation in any reader — chapter movement lives only in the header (prev · next · contents). */ /* ── Contents drawer ─────────────────────────────────────── */ /* The drawer (.drawer / .drawer__scrim / __panel / __head / __label / __body / __foot and the contextual .ctx__* menu) lives in the shared toc.css — one component, its contents chosen by publication type in engine.js (chapter table for book/letter, story list for story). */ /* ── Responsive ──────────────────────────────────────────── */ @media (max-width:640px){ /* Set the VARIABLES, never font-size directly: a hard-coded body{font-size} here silently overrode --body-size and killed the reader's own size control on phones — the one place people most need it. The scale simply shifts down a step; their choice still wins. */ :root{--body-size:21px;--leading:1.7} /* Lora — optically ≈ 19px Inter */ :root[data-size="-1"]{--body-size:19px} :root[data-size="1"]{--body-size:23px} /* Mobile is where the empty space hurt most — tighten the rhythm one more step here. Same tokens, smaller values; the pauses stay legible, the scrolling gets shorter. */ :root{ --prose-paragraph-gap:1.05rem; --prose-section-gap:.8rem; --prose-heading-gap:2rem; --chapter-block-gap:1rem; --part-transition-gap:1rem; --reflection-gap:2rem; } /* Cards carry their own padding, so the page gutter around them is small — the card, not the column, meets the screen edge. */ .manuscript{padding-left:.9rem;padding-right:.9rem} /* .after matches .manuscript so the reflection card lines up with the chapter cards. */ .after{padding-left:.9rem;padding-right:.9rem} .toc{padding-left:1.375rem;padding-right:1.375rem} .cover{padding-left:1.375rem;padding-right:1.375rem} .toc{padding-top:4rem;padding-bottom:4rem} /* Card padding trimmed a touch so the head + first line sit closer to the top edge; the card→card and head→body gaps come from the mobile tokens above. */ .chapter{padding:2.75rem 1.25rem 2.5rem;border-radius:18px} /* Dialogue must stay readable — never squeeze the column */ .dialogue{margin:var(--prose-quote-gap) 0 var(--prose-quote-gap) 1rem;padding-left:1rem} .after__gap{height:8rem} .cta{padding:4rem 0 5rem} .cta__actions{flex-direction:column} .cta__actions .btn{width:100%} .reflect{border-radius:18px;padding:1.6rem 1.25rem} /* match the chapter card on a phone */ .topbar__home-text{display:none} /* the home icon stays; the wordmark label folds away */ .topbar__cta-full{display:none} /* the CTA folds to just "AI BOS" so the header stays roomy */ .topbar__cta{padding:.28rem .6rem;font-size:.625rem;margin-right:.2rem} .topbar__current{text-align:left} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ── Print — read like a book ────────────────────────────── */ @media print{ @page{margin:20mm 18mm} html{scroll-behavior:auto} /* Ink on paper: the reader's screen theme never follows the book into print. */ :root,:root[data-theme]{ --bg:#fff;--paper:#fff;--ink:#000;--ink-strong:#000;--ink-soft:#444;--ink-dialogue:#333; --border:#ccc;--rule:#bbb;--accent:#000;--body-size:11.5pt;--leading:1.6;--measure:none; } body{background:#fff;color:#000;font-size:11.5pt;line-height:1.6} .progress,.topbar,.drawer,.cta__actions,.cover__actions,.skip-link{display:none !important} /* v2 blocks keep their shape on paper */ .pullquote{font-size:1.3em;margin:2rem 0;page-break-inside:avoid} .letter,.poem,.scripture{page-break-inside:avoid;margin:1.5rem 0} .footnotes{font-size:9pt;page-break-inside:avoid} .page--dedication{page-break-after:always;padding:4rem 0} .page--about,.page--copyright{page-break-before:always} .chapter--part{min-height:auto;page-break-before:always;padding:6rem 0} .cover{min-height:auto;padding:0 0 3rem;page-break-after:always} .toc{padding:0 0 2rem;page-break-after:always} .manuscript,.after,.toc,.cover{max-width:none;padding-left:0;padding-right:0} .chapter{page-break-before:always;padding:0 0 1rem} .chapter:first-child{page-break-before:avoid} .chapter__n{color:#000} .dialogue{border-left:1.5pt solid #bbb;color:#333;page-break-inside:avoid;margin:1.2rem 0 1.2rem 1.5rem;padding-left:1rem} .chapter p,.dialogue{orphans:3;widows:3} .chapter__title,.cover__title{page-break-after:avoid} .after__gap{height:2rem} .cta{padding:2rem 0} a{color:#000;text-decoration:none} .footer{border-top:1px solid #ccc} }