to hold its own floor. It hangs off rather than on purpose: body is `display:flex`, and a fixed pseudo-element there is one `position` typo away from becoming a flex item and shoving the header down. */ [data-paper]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url('/static/hanji.jpg') center / cover no-repeat; } /* The document speaks in 명조 THROUGHOUT: display, colophon, footnote and field label alike. The first cut set only the headings in serif and left Pretendard on the chrome and the small print, reasoning that a serif slows a reader down at 12px. On a sheet of hanji that read as a web page wearing a costume, and the user named it on sight ("갑자기 너무 모던해"). A 감정서's footnote is printed by the same press as its title; the seam is the tell. Pretendard stays only inside the fields the visitor types into, where the glyphs must be unmistakable. ponytail: this is Noto Serif KR (already loaded, subsetted) where cinema.py uses Nanum Myeongjo. A deliberate split: NM ships as two 3MB TTFs that cinema.py base64-inlines because an issued page must be self-contained. 6MB in front of a landing page's first paint, to match a font the visitor meets minutes later, is the wrong trade. Both are 명조. Subset NM here if they ever read apart. The tight tracking is not a preference: letter-spacing on Hangul scatters the syllables. */ [data-paper] :where(h1, h2) { font-family: var(--hanja); font-weight: 700; letter-spacing: -.01em; } [data-paper] :where(.ftr, .small, .lead, .mark .n) { font-family: var(--hanja); } /* Smaller than the dark sheet's h1 (clamp(34px,4.4vw,60px)), and that is not timidity. Those numbers were measured off Linear for Pretendard 550; 명조 700 carries far more ink at the same size, so 60px here lands as a poster where 60px there landed as a headline. The calibration the old sheet teaches is a RATIO, not a pixel: restrained type, dominant product. Setting the display huge and shrinking the artifact is the move that reads as an ad banner. */ [data-paper] h1 { font-size: clamp(27px, 3.3vw, 45px); line-height: 1.45; } /* the sitter's element. Set on once a face has been read. */ [data-elem="木"] { --el: #11A388; --el-lift: #83CBB8; } [data-elem="火"] { --el: #D56651; --el-lift: #F1A494; } [data-elem="土"] { --el: #AE8523; --el-lift: #D3B77F; } [data-elem="金"] { --el: #8DA1A9; --el-lift: #AFBDC4; } [data-elem="水"] { --el: #7186DB; --el-lift: #A7B8F2; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; /* the footer sits at the bottom of a short page */ background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Korean breaks at word boundaries only. `anywhere` collapses min-content width and crushes grid columns to one glyph, a bug this repo has already shipped once. */ word-break: keep-all; overflow-wrap: break-word; /* `clip`, never `hidden`: `overflow-x:hidden` silently forces overflow-y:auto and creates a nested scroll container that kills momentum scrolling on Mac. */ overflow-x: clip; } html[lang="en"] body { word-break: normal; } ::selection { background: var(--fg); color: var(--bg); } main { flex: 1 0 auto; } a { color: inherit; text-decoration: none; } :where(a, button, input, label, [tabindex]):focus-visible { outline: 2px solid var(--fg-2); outline-offset: 2px; border-radius: 4px; } /* ── type ─────────────────────────────────────────────────────────────────── */ h1, h2, h3 { margin: 0; font-weight: 550; letter-spacing: -.035em; text-wrap: balance; } h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; } h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; } h3 { font-size: 16px; line-height: 1.5; letter-spacing: -.02em; } /* Latin carries this weight more heavily than Hangul at the same size */ html[lang="en"] :where(h1, h2) { font-weight: 500; letter-spacing: -.025em; } .hanja { font-family: var(--hanja); font-weight: 400; } .lead { font-size: 16px; line-height: 1.65; color: var(--fg-2); } .small { font-size: 12.5px; line-height: 1.7; color: var(--fg-3); } .num { font-variant-numeric: tabular-nums; } b, strong { font-weight: 600; color: var(--fg); } /* ── layout ───────────────────────────────────────────────────────────────── */ .page { width: min(var(--page), 100%); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } /* ── header ───────────────────────────────────────────────────────────────── */ .hdr .in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; } .mark { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.015em; } .mark .g { font-family: var(--hanja); font-size: 17px; font-weight: 400; letter-spacing: .08em; } .mark .n { color: var(--fg-2); font-weight: 500; } /* a language switcher is a two-cell segmented control, not a dropdown */ .lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; } .lang a { min-width: 34px; padding: 4px 8px; border-radius: 5px; text-align: center; font-size: 12px; font-weight: 500; color: var(--fg-3); transition: color .14s var(--ease); } .lang a:hover { color: var(--fg-2); } .lang a[aria-current="true"] { background: var(--surface-2); color: var(--fg); } /* ── controls ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 22px; border: 0; border-radius: 8px; background: var(--fg); color: var(--bg); font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: opacity .14s var(--ease); } .btn:hover:not(:disabled) { opacity: .88; } .btn:disabled { opacity: .34; cursor: default; } .btn.block { width: 100%; } .btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); height: 40px; font-size: 13.5px; } .btn.ghost:hover { border-color: var(--fg-3); opacity: 1; } /* a header control is small: 32px, 13px type. Anything bigger shouts. */ .btn.sm { height: 32px; padding-inline: 13px; font-size: 13px; border-radius: 999px; } .link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--fg-2); } .link:hover { color: var(--fg); } .link svg { transition: transform .18s var(--ease); } .link:hover svg { transform: translateX(3px); } /* ── one reveal, and nothing else ─────────────────────────────────────────── */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rise { animation: rise .55s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } * { transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── footer ───────────────────────────────────────────────────────────────── */ .ftr { border-top: 1px solid var(--line-2); margin-top: clamp(56px, 7vw, 88px); padding-block: 26px 30px; } .ftr .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .ftr .mark { font-size: 15px; } .ftr .mark .g { font-size: 19px; } .ftr nav { display: flex; gap: 16px; font-size: 13.5px; } .ftr nav a { color: var(--fg-2); } .ftr nav a:hover { color: var(--fg); } .ftr .bottom { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; } .ftr .bottom a:hover { color: var(--fg); } /* a required value that is not set must be loud, never quietly someone else's */ .ftr .unset { color: var(--chop); }