/* Hallmark · shape: personal journal · genre: editorial · theme: custom · job: visit · idea: "A Vietnamese personal notebook designed around calm reading" · vibe: "quiet, flat, open, personal, readable" · hero: compact journal opening · nav: wordmark and reading tools · footer: quiet colophon · signature: reading choices follow local time · modes: light+dark · v2.0.0 */
/* Hallmark · waive 49b · article titles and attribution are reading links · This personal journal lets long article names and legal author names wrap naturally to keep Vietnamese text readable on phones. */
/* Hallmark · waive 59 · dense personal journal separated with rules and surface changes · The introduction and featured article form one compact reading entry rather than separate marketing panels. */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R5 V4 · weakest: S, sample subjects reflect the owner's technology and language-learning interests. No invented personal achievements. */
@font-face{font-family:BeVietnam;src:url('./assets/be-vietnam-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BeVietnam;src:url('./assets/be-vietnam-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('./assets/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --color-paper:#fafaf6;--color-paper-2:#f0f1e9;--color-paper-3:#e5e9df;--color-ink:#242c27;--color-ink-2:#454e47;--color-muted:#656e65;--color-rule:#dce0d6;--color-strong-rule:#98a496;--color-accent:#286047;--color-accent-ink:#fafaf6;--color-focus:#286047;--color-transparent:transparent;
  --font-body:BeVietnam,Arial,sans-serif;--font-display:Newsreader,Georgia,serif;--space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:144px;--container:1216px;--gutter:40px;--radius:4px;--radius-pill:999px;--duration:160ms;--ease:cubic-bezier(.2,.7,.2,1);--reader-size:19px;
  color-scheme:light;
}
[data-mode=dark]{--color-paper:#181e1b;--color-paper-2:#222b25;--color-paper-3:#2b352e;--color-ink:#e7ece2;--color-ink-2:#c9d0c6;--color-muted:#a2aea0;--color-rule:#364239;--color-strong-rule:#71816f;--color-accent:#a5cfad;--color-accent-ink:#18271c;--color-focus:#b5dcb8;color-scheme:dark}
*{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font:400 16px/1.7 var(--font-body);font-synthesis:none;-webkit-font-smoothing:antialiased}::selection{background:var(--color-paper-3);color:var(--color-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--color-strong-rule) var(--color-paper)}
button,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:var(--color-transparent)}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.45}button:active{transform:translateY(1px)}a:hover{color:var(--color-accent)}button:hover{color:var(--color-accent)}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}button,a,summary{touch-action:manipulation}button{border:0;background:none;padding:0}img{display:block;max-width:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--color-ink);font-optical-sizing:auto;overflow-wrap:break-word;min-width:0;text-wrap:balance}p{text-wrap:pretty}h1{font-size:clamp(48px,5.4vw,76px);line-height:1.1;letter-spacing:-.035em}h2{font-size:42px;line-height:1.18;letter-spacing:-.025em}h3{font-size:29px;line-height:1.28;letter-spacing:-.018em}.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}.icon{display:block;width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.small-icon{width:14px;height:14px}.icon-definitions{position:absolute;width:0;height:0;overflow:clip}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:clip;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;inset-block-start:var(--space-md);inset-inline-start:var(--space-md);transform:translateY(-200%);z-index:1000;padding:var(--space-sm) var(--space-lg);background:var(--color-ink);color:var(--color-paper)}.skip-link:focus{transform:none}.wordmark{font-family:var(--font-display);font-size:43px;line-height:1;font-weight:600;letter-spacing:-.055em}.wordmark-period{color:var(--color-accent)}
.masthead{position:sticky;top:0;z-index:300;background:var(--color-paper);border-bottom:1px solid var(--color-rule)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);height:92px}.navigation{display:flex;align-items:center;gap:var(--space-xl);margin-inline-start:var(--space-xl);font-size:14px}.navigation a{padding-block:var(--space-sm);position:relative}.navigation .nav-current{color:var(--color-accent);font-weight:600}.navigation .nav-current:after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--color-accent)}.header-tools{display:flex;align-items:center;gap:var(--space-sm)}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius)}.icon-button:hover{background:var(--color-paper-2)}.tool-divider{width:1px;height:22px;background:var(--color-rule)}.theme-picker{position:relative;font-size:13px}.theme-picker summary{list-style:none;display:flex;align-items:center;gap:var(--space-xs);min-height:44px;padding-inline:var(--space-sm);border-radius:var(--radius);cursor:pointer}.theme-picker summary::-webkit-details-marker{display:none}.theme-picker summary:hover{background:var(--color-paper-2)}.theme-panel{color:var(--color-ink);position:absolute;top:calc(100% + var(--space-sm));right:0;width:254px;background:var(--color-paper-2);padding:var(--space-sm);border:1px solid var(--color-strong-rule);border-radius:var(--radius)}.panel-label{font-size:13px;font-weight:600;padding:var(--space-xs) var(--space-sm)}.theme-panel button{display:flex;align-items:center;gap:var(--space-sm);min-height:44px;width:100%;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius);font-size:14px}.theme-panel button:hover{background:var(--color-paper-3)}.theme-panel button[aria-pressed=true]{color:var(--color-accent)}.choice-check{margin-inline-start:auto;visibility:hidden}.theme-panel [aria-pressed=true] .choice-check{visibility:visible}.timezone-note{border-top:1px solid var(--color-rule);margin-top:var(--space-xs);padding:var(--space-sm);font-size:12px;line-height:1.7;color:var(--color-muted)}.mobile-menu{display:none}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-xl);padding-block:var(--space-2xl) var(--space-xl)}.intro-copy p{font-size:16px;color:var(--color-muted);margin-top:var(--space-lg);max-width:52ch}.intro-note{font-size:13px;color:var(--color-muted);line-height:1.9;padding-bottom:var(--space-xs);text-align:right}.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:48px;background:var(--color-accent);color:var(--color-accent-ink);padding:var(--space-sm) var(--space-lg);margin-top:var(--space-lg);border-radius:var(--radius);font-size:13px;font-weight:600}.primary-link:hover{background:var(--color-ink);color:var(--color-paper)}
.featured{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;margin-bottom:var(--space-3xl)}.featured-image{min-width:0;overflow:clip;border-radius:var(--radius) 0 0 var(--radius)}.featured-image img{width:100%;height:100%;min-height:360px;max-height:430px;object-position:center 55%}.featured-copy{background:var(--color-paper-2);padding:var(--space-xl);position:relative;display:flex;flex-direction:column;justify-content:center;border-radius:0 var(--radius) var(--radius) 0}.featured-copy h2{font-size:42px;max-width:18ch}.title-link{font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit;text-align:left;text-wrap:balance}.title-link:hover{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px}.featured-copy>p{color:var(--color-muted);font-size:14px;margin-top:var(--space-lg);max-width:40ch}.article-meta{display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--space-sm);row-gap:var(--space-2xs);font-size:12px;color:var(--color-muted)}.article-meta>span+span{border-left:1px solid var(--color-strong-rule);padding-left:var(--space-sm)}.featured-copy>.article-meta{margin-top:var(--space-lg)}.text-link{display:inline-flex;align-items:center;gap:var(--space-md);min-height:44px;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--color-strong-rule);text-decoration-thickness:1px}.text-link:hover{text-decoration-color:var(--color-accent)}.featured-copy>.text-link{align-self:flex-start;margin-top:var(--space-md)}.save-button{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;color:var(--color-muted);border-radius:var(--radius)}.save-button:hover{background:var(--color-paper-3)}.save-button[aria-pressed=true]{color:var(--color-accent)}.save-button[aria-pressed=true] .icon{fill:var(--color-accent);stroke:var(--color-paper)}.featured-save{position:absolute;right:var(--space-lg);bottom:var(--space-lg)}
.journal{margin-bottom:var(--space-3xl);scroll-margin-top:var(--space-lg)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-lg);padding-bottom:var(--space-lg)}.section-heading h2{font-size:42px}.section-heading p{font-size:12px;color:var(--color-muted)}.filter-bar{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;border-block:1px solid var(--color-rule);padding-block:var(--space-xs);margin-bottom:var(--space-xl)}.filter{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;font-size:13px;color:var(--color-muted);padding-inline:var(--space-xs)}.filter.active{color:var(--color-accent);font-weight:600;text-decoration:underline;text-underline-offset:8px}.filter.active:hover{color:var(--color-ink)}.saved-filter{margin-inline-start:auto}.filter .icon{width:17px;height:17px}.journal-layout{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);gap:var(--space-xl)}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-lg);row-gap:var(--space-xl)}.article{min-width:0;display:flex;flex-direction:column;align-items:stretch}.article-image{display:block;width:100%;overflow:clip;border-radius:var(--radius);margin-bottom:var(--space-lg);cursor:pointer}.article-image img{width:100%;height:auto;aspect-ratio:1.55;object-fit:cover}.article h3{font-size:29px}.article>p{font-size:13px;color:var(--color-muted);margin-top:var(--space-sm);line-height:1.8;max-width:60ch}.article-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);margin-top:auto;padding-top:var(--space-md)}.text-article{border-top:1px solid var(--color-rule);padding-top:var(--space-lg)}.empty-state{padding-block:var(--space-xl);font-size:16px;color:var(--color-muted);max-width:65ch}.sidebar{border-left:1px solid var(--color-rule);padding-left:var(--space-xl);scroll-margin-top:var(--space-lg)}.author-monogram{width:68px;height:68px;display:grid;place-items:center;background:var(--color-paper-2);color:var(--color-accent);border-radius:var(--radius-pill);font:400 43px/1 var(--font-display);letter-spacing:-.06em;margin-bottom:var(--space-lg)}.sidebar h2{font-size:33px;line-height:1.22}.sidebar>p{font-size:13px;color:var(--color-muted);margin-top:var(--space-md);line-height:1.9;max-width:60ch}.sidebar .author-note{font-size:12px}.sidebar>.text-link{margin-top:var(--space-sm);font-size:12px}.reading-note{border-top:1px solid var(--color-rule);margin-top:var(--space-xl);padding-top:var(--space-lg)}.reading-note h3{font-size:25px}.reading-note p{font-size:13px;color:var(--color-muted);line-height:1.9;margin-top:var(--space-sm);max-width:60ch}.reading-note .text-link{font-size:12px;margin-top:var(--space-xs)}
.closing-band{color:var(--color-ink);background:var(--color-paper-2);padding-block:var(--space-2xl)}.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl)}.closing-inner h2{font-size:40px}.closing-inner p{font-size:13px;color:var(--color-muted);margin-top:var(--space-sm);max-width:65ch}.rss-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);white-space:nowrap;border:1px solid var(--color-strong-rule);min-height:48px;border-radius:var(--radius);padding:var(--space-sm) var(--space-lg);font-size:13px}.rss-link:hover{background:var(--color-paper-3)}.footer{padding-block:var(--space-xl) var(--space-lg)}.footer-top{display:flex;align-items:center;gap:var(--space-lg);padding-bottom:var(--space-lg)}.footer-top .wordmark{font-size:35px}.footer-top p{font-size:12px;color:var(--color-muted)}.footer-top>.text-link{margin-inline-start:auto;font-size:12px}.footer-bottom{border-top:1px solid var(--color-rule);padding-top:var(--space-lg);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);font-size:12px;color:var(--color-muted)}.credits{max-width:65ch;text-align:right}.credits summary{cursor:pointer;min-height:30px}.credits p{line-height:1.8;text-align:left;margin-top:var(--space-md)}.credits a{text-decoration:underline;text-underline-offset:3px}
dialog{padding:0;border:1px solid var(--color-strong-rule);border-radius:var(--radius);background:var(--color-paper);color:var(--color-ink);max-width:calc(100% - 32px);max-height:calc(100dvh - 48px)}dialog::backdrop{background:color-mix(in srgb,var(--color-ink) 35%,var(--color-transparent))}.search-dialog{width:640px;padding:var(--space-lg)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg)}.dialog-heading h2{font-size:34px}.search-input-wrap{display:flex;align-items:center;gap:var(--space-sm);border:1px solid var(--color-strong-rule);padding:var(--space-sm) var(--space-md);border-radius:var(--radius);background:var(--color-paper-2)}.search-input-wrap input{border:0;background:var(--color-transparent);color:var(--color-ink);width:100%;min-width:0;font-size:15px;min-height:26px}.search-input-wrap:focus-within{outline:2px solid var(--color-focus);outline-offset:3px}.search-input-wrap input:focus-visible{outline:0}.search-results{padding-top:var(--space-sm)}.search-result{display:block;text-align:left;width:100%;border-bottom:1px solid var(--color-rule);padding:var(--space-md) var(--space-xs);font-size:15px}.search-result small{display:block;color:var(--color-muted);font-size:12px;margin-top:var(--space-2xs)}.dialog-hint{font-size:12px;color:var(--color-muted);margin-top:var(--space-lg)}.reading-dialog{width:900px;overscroll-behavior:contain}.reader-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) var(--space-lg);background:var(--color-paper);border-bottom:1px solid var(--color-rule);z-index:10;font-size:13px}.reader-controls{display:flex;align-items:center;gap:var(--space-xs)}.type-button{width:44px;height:44px;border-radius:var(--radius)}.type-button:hover{background:var(--color-paper-2)}.reader-content{padding:var(--space-xl) var(--space-2xl) var(--space-2xl)}.sample-note{color:var(--color-muted);font-size:12px;margin-bottom:var(--space-lg)}.reader-content h2{font-size:clamp(34px,4vw,52px);line-height:1.2;max-width:24ch}.reader-meta{font-size:13px;color:var(--color-muted);margin-block:var(--space-lg) var(--space-xl)}.reading-prose{font-size:var(--reader-size);line-height:1.95;color:var(--color-ink-2);max-width:65ch}.reading-prose p+p{margin-top:var(--space-lg)}.reading-prose h3{margin-block:var(--space-xl) var(--space-md);font-size:32px}.reader-end{border-top:1px solid var(--color-rule);margin-top:var(--space-xl);padding-top:var(--space-lg);font-size:14px;color:var(--color-muted)}body:has(dialog[open]){overflow-y:hidden}[hidden]{display:none!important}
@media(max-width:1000px){:root{--gutter:24px}.navigation{gap:var(--space-lg);margin-inline-start:0}.header-inner{gap:var(--space-lg)}.intro{padding-top:var(--space-xl)}.featured-copy{padding:var(--space-lg)}.featured-copy h2{font-size:36px}.journal-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-lg)}.sidebar{padding-left:var(--space-lg)}.section-heading{align-items:flex-start;flex-direction:column;gap:var(--space-xs)}.article h3{font-size:26px}.closing-inner h2{font-size:34px}}
@media(max-width:700px){:root{--gutter:20px}.header-inner{height:74px;gap:var(--space-md)}.wordmark{font-size:37px}.navigation{display:none;position:absolute;top:74px;inset-inline:0;padding:var(--space-md) var(--space-lg);background:var(--color-paper);border-bottom:1px solid var(--color-rule);gap:var(--space-lg)}.navigation.is-open{display:flex}.mobile-menu{display:inline-flex}.theme-picker summary{padding-inline:var(--space-xs)}.header-tools{gap:var(--space-2xs)}.theme-picker summary #theme-label{font-size:12px}.tool-divider{display:none}.intro{padding-block:var(--space-xl);display:block}.intro-note{display:none}h1{font-size:clamp(46px,9vw,64px);line-height:1.13}.intro-copy p{font-size:14px;max-width:40ch;line-height:1.9;margin-top:var(--space-md)}.primary-link{margin-top:var(--space-lg)}.featured{grid-template-columns:minmax(0,1fr);margin-bottom:var(--space-2xl)}.featured-image{border-radius:var(--radius) var(--radius) 0 0}.featured-image img{min-height:0;max-height:none;height:auto;aspect-ratio:1.65}.featured-copy{border-radius:0 0 var(--radius) var(--radius);padding:var(--space-lg)}.featured-copy h2{font-size:36px;max-width:25ch}.featured-copy>p{margin-top:var(--space-md)}.section-heading h2{font-size:36px}.journal-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.filter-bar{gap:var(--space-xs);padding-block:var(--space-2xs);margin-bottom:var(--space-lg)}.filter{font-size:12px;padding-inline:var(--space-xs)}.saved-filter{margin-inline-start:0}.article-grid{column-gap:var(--space-md);row-gap:var(--space-lg)}.article h3{font-size:25px}.article>p{font-size:12px}.article-image{margin-bottom:var(--space-md)}.article-image img{aspect-ratio:1.25}.article-bottom{align-items:flex-end}.article-bottom .article-meta{font-size:12px;flex-direction:column;align-items:flex-start;gap:0}.article-bottom .article-meta>span+span{border:0;padding-left:0}.article-bottom .save-button{min-width:36px}.sidebar{border-left:0;border-top:1px solid var(--color-rule);padding-left:0;padding-top:var(--space-xl);max-width:65ch}.sidebar h2 br{display:none}.sidebar>p{max-width:55ch}.author-monogram{margin-bottom:var(--space-md)}.reading-note{margin-top:var(--space-lg);padding-top:var(--space-lg)}.journal{margin-bottom:var(--space-2xl)}.closing-band{padding-block:var(--space-xl)}.closing-inner{align-items:flex-start;flex-direction:column;gap:var(--space-lg)}.closing-inner h2{font-size:34px}.footer-top{flex-wrap:wrap;gap:var(--space-md)}.footer-top p{font-size:12px}.footer-top>.text-link{margin-inline-start:0}.footer-bottom{flex-direction:column;gap:var(--space-md)}.credits{text-align:left}.reader-content{padding:var(--space-lg)}.reading-prose{font-size:max(17px,var(--reader-size))}.reader-toolbar{padding-inline:var(--space-md)}.theme-panel{right:0}.dialog-heading h2{font-size:30px}}
@media(max-width:360px){:root{--gutter:16px}.header-tools{gap:0}.theme-picker #theme-label{display:none}.article-grid{grid-template-columns:minmax(0,1fr)}.article-image img{aspect-ratio:1.65}.filter-bar{column-gap:var(--space-2xs)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

body{caret-color:var(--color-accent)}.theme-panel,.closing-band{color:var(--color-ink)}

@media(max-width:700px){.article-grid{grid-template-columns:minmax(0,1fr)}.article-image img{aspect-ratio:1.65}.article h3{font-size:30px}.article-bottom .article-meta{flex-direction:row;gap:var(--space-sm)}}