/* wayofyawara.com — one hand-written stylesheet. Light is washi paper, dark is sumi ink. Indigo (藍) is the functional accent. Vermilion (朱) appears once per reading, as the hanko seal. The material is type and space: system serif for reading, system sans for chrome, no web fonts. Theme is driven by [data-theme] on , set before first paint. */ /* ---- Tokens ---------------------------------------------------------------- */ :root { --bg: #f7f1e6; /* washi paper */ --surface: #fffaf0; --ink: #211b15; /* sumi on paper */ --ink-soft: #6b6257; --line: #ddd1bd; --accent: #254a7b; /* 藍 indigo */ --accent-ink:#1c3a61; --seal: #b23b2c; /* 朱 vermilion */ --seal-ink: #f6efe2; /* reversed kanji on the seal (constant) */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hiragino Mincho ProN", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* type scale (a touch more dramatic for editorial display) */ --step--1: 0.84rem; --step-0: 1.07rem; --step-1: 1.32rem; --step-2: 1.7rem; --step-3: 2.4rem; --step-4: 3.2rem; /* ma — spacing rhythm */ --s-1: 0.4rem; --s-2: 0.75rem; --s-3: 1.2rem; --s-4: 2rem; --s-5: 3.25rem; --s-6: 5.5rem; --measure: 64ch; /* reading column */ --masthead: 58rem; /* wider than the text: the masthead and footer rules */ --edge: 1.6rem; --radius: 4px; } [data-theme="dark"] { --bg: #11100e; /* sumi */ --surface: #191714; --ink: #f2eadc; --ink-soft: #b6aa9b; --line: #36302a; --accent: #7fa2d6; /* lifted indigo for contrast on dark */ --accent-ink:#a9c2e6; --seal: #cf4a37; /* brighter vermilion on sumi */ } /* ---- Reset ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, ul, figure { margin: 0; } img { max-width: 100%; height: auto; display: block; } /* ---- Base ------------------------------------------------------------------ */ body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: var(--step-0); line-height: 1.7; /* editorial micro-typography: ligatures, kerning, oldstyle proportional figures */ font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first last; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: calc(var(--measure) + var(--edge) * 2); margin-inline: auto; padding-inline: var(--edge); } .container--wide { max-width: var(--masthead); } main.container { flex: 1 0 auto; padding-block: var(--s-6) var(--s-6); } a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); z-index: 10; } .skip-link:focus { inset-inline-start: var(--edge); top: var(--s-2); } .kicker { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.16em; font-variant-caps: all-small-caps; color: var(--ink-soft); margin-bottom: var(--s-2); } /* ---- Masthead -------------------------------------------------------------- */ .site-header { border-top: 3px solid var(--accent); /* the masthead keyline */ border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, var(--bg)); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); } .brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); } .brand__seal { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--seal); color: var(--seal-ink); font-family: var(--serif); font-size: 1.15rem; line-height: 1; border-radius: 4px; transform: rotate(-2.5deg); } .brand__name { font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; font-size: var(--step-0); } .site-nav { display: flex; align-items: center; gap: var(--s-4); font-family: var(--sans); font-size: var(--step--1); } .site-nav__link { color: var(--ink-soft); text-decoration: none; letter-spacing: 0.03em; padding-block: 0.2rem; } .site-nav__link:hover { color: var(--ink); } .site-nav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .theme-toggle { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); width: 2.1rem; height: 2.1rem; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; font-size: 0.95rem; line-height: 1; } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); } .theme-toggle__moon { display: none; } .theme-toggle__sun { display: inline; } [data-theme="dark"] .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__moon { display: inline; } /* ---- Hero / page head ------------------------------------------------------ */ .hero { margin-bottom: var(--s-6); position: relative; } /* ghost 柔 watermark: brand presence at a whisper, same gesture as the OG image */ .hero::after { content: "柔"; position: absolute; top: -3.5rem; inset-inline-end: 0; font-family: var(--serif); font-size: 17rem; line-height: 1; color: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; user-select: none; z-index: -1; } .hero__title { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.02em; font-weight: 600; margin-bottom: var(--s-3); } .hero__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--s-4); } .page-head { margin-bottom: var(--s-5); } .tag-intro { margin-bottom: var(--s-5); max-width: var(--measure); } .page-head__title { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; } .page-head__lede { color: var(--ink-soft); margin-top: var(--s-2); max-width: 52ch; } .section-title { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.16em; font-variant-caps: all-small-caps; text-transform: lowercase; color: var(--ink-soft); font-weight: 600; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); } /* ---- The cover: Begin-here path + name doorway ------------------------------ */ .begin { margin-bottom: var(--s-6); } .begin__lede { color: var(--ink-soft); font-family: var(--sans); font-size: var(--step--1); margin-bottom: var(--s-3); } .begin__list { list-style: none; margin: 0; padding: 0; counter-reset: begin; } .begin__item { counter-increment: begin; } .begin__item + .begin__item { border-top: 1px solid var(--line); } .begin__link { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; column-gap: var(--s-2); padding-block: var(--s-3); text-decoration: none; color: inherit; } .begin__link::before { content: counter(begin, cjk-ideographic); grid-row: 1 / span 2; font-family: var(--serif); font-size: var(--step-1); color: var(--accent); line-height: 1.3; } .begin__link:hover .begin__title { color: var(--accent); } .begin__title { display: block; font-size: var(--step-1); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .begin__desc { grid-column: 2; display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.15rem; } .name-door { margin-bottom: var(--s-6); } .name-door__body { max-width: 54ch; margin-bottom: var(--s-2); } /* ---- Post list (editorial contents) ---------------------------------------- */ .post-list { list-style: none; padding: 0; } .post-list__item + .post-list__item { border-top: 1px solid var(--line); } .post-list__link { display: block; text-decoration: none; color: inherit; padding-block: var(--s-3); } .post-list__link:hover .post-list__title { color: var(--accent); } .post-list__title { display: block; font-size: var(--step-1); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .post-list__meta { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.2rem; } .post-list__desc { display: block; color: var(--ink-soft); margin-top: var(--s-1); } .dot { opacity: 0.55; padding-inline: 0.15em; } .empty { color: var(--ink-soft); font-style: italic; } /* ---- Post / prose ---------------------------------------------------------- */ .post__head { margin-bottom: var(--s-5); } /* Hero art: ink on its own washi ground, framed by a hairline so the paper reads as paper on both themes (the image is never recolored). */ .post-art { margin: 0 0 var(--s-5); border: 1px solid var(--line); } .post-art img { display: block; width: 100%; height: auto; } .post-art--notfound { max-width: 24rem; margin: var(--s-4) 0; } .post__title { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; margin-bottom: var(--s-2); } .post__meta { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ink-soft); } .prose { font-size: 1.13rem; line-height: 1.75; } .prose > * + * { margin-top: var(--s-3); } .prose h2 { font-size: var(--step-2); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin-top: var(--s-5); } .prose h3 { font-size: var(--step-1); font-weight: 600; margin-top: var(--s-4); } .prose p, .prose li { max-width: var(--measure); } .prose ul, .prose ol { padding-inline-start: 1.3em; } .prose li + li { margin-top: var(--s-1); } .prose strong { font-weight: 600; } .prose a { text-decoration: underline; } /* lead paragraph: the first paragraph opens larger, editorial */ .post .prose > p:first-of-type { font-size: var(--step-1); line-height: 1.55; color: var(--ink); } /* pull-quote */ .prose blockquote { border-inline-start: 2px solid var(--seal); padding-inline-start: var(--s-3); margin-block: var(--s-4); color: var(--ink-soft); font-style: italic; font-size: var(--step-1); line-height: 1.5; } .prose code { font-family: var(--mono); font-size: 0.9em; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 0.1em 0.35em; border-radius: var(--radius); font-variant-numeric: normal; } .prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-3); overflow-x: auto; } .prose pre code { background: none; padding: 0; } /* ---- The hanko seal (朱) — one warm mark, at the end of a reading ---------- */ .seal { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; background: var(--seal); color: var(--seal-ink); font-family: var(--serif); font-size: 1.25rem; line-height: 1; border-radius: 3px; transform: rotate(-2.5deg); box-shadow: 0 1px 0 color-mix(in srgb, var(--seal) 50%, #000 0%); user-select: none; } .post__end { text-align: center; margin-top: var(--s-6); } .post__foot { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); } /* ---- Glossary (the term atlas) ------------------------------------------------ */ .glossary__section { margin-top: var(--s-6); } .glossary__section-title { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.01em; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } .term { margin-top: var(--s-5); max-width: var(--measure); } .term__name { font-size: var(--step-1); font-weight: 600; } .term__name a { text-decoration: none; color: inherit; } .term__name a:hover { text-decoration: underline; } .term__def { margin-top: var(--s-1); } .term__variants { font-family: var(--sans); font-size: var(--step--1); line-height: 1.9; color: var(--ink-soft); margin-top: var(--s-2); } .term__variants .dot { margin-inline: 0.35em; opacity: 0.5; } .term__meta { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--s-1); display: flex; flex-wrap: wrap; gap: 0.35em 1.2em; } /* ---- Related reading --------------------------------------------------------- */ .related { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); } .related__title { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.1em; font-variant-caps: all-small-caps; color: var(--ink-soft); font-weight: 500; } [dir="rtl"] .related__title { letter-spacing: 0; } .related__list { list-style: none; padding: 0; margin-top: var(--s-2); display: grid; gap: var(--s-1); } .related__list a { font-family: var(--serif); font-size: var(--step-0); text-decoration: none; } .related__list a:hover { text-decoration: underline; } /* ---- Sources ------------------------------------------------------------------ */ .sources { margin-top: var(--s-4); } .sources__title { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.1em; font-variant-caps: all-small-caps; color: var(--ink-soft); font-weight: 500; } [dir="rtl"] .sources__title { letter-spacing: 0; } .sources__list { list-style: none; padding: 0; margin-top: var(--s-1); display: grid; gap: 0.3rem; } .sources__list a { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); } .sources__list a:hover { color: var(--accent); } /* ---- Author card + post notes ----------------------------------------------- */ .author-card { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .author-card__avatar { flex: none; position: relative; width: 3.5rem; height: 3.5rem; } .author-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); } .author-card__body { display: grid; gap: 0.1rem; font-family: var(--sans); } .author-card__label { font-size: var(--step--1); letter-spacing: 0.1em; font-variant-caps: all-small-caps; color: var(--ink-soft); } .author-card__name { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.2; } .author-card__bio { font-size: var(--step--1); color: var(--ink-soft); } .author-card__link { font-size: var(--step--1); margin-top: 0.2rem; } [dir="rtl"] .author-card__label { letter-spacing: 0; } /* journal-not-advice note and affiliate disclosure */ .post-note { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; margin-top: var(--s-3); } .post-note--affiliate { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-inline-start: 2px solid var(--accent); border-radius: var(--radius); } /* next/previous reading path at the end of a post */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); } .post-nav__link { display: block; text-decoration: none; color: inherit; } .post-nav__link--older { text-align: end; grid-column: 2; } .post-nav__link--newer { grid-column: 1; } .post-nav__label { display: block; font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.14em; font-variant-caps: all-small-caps; color: var(--ink-soft); } .post-nav__title { font-weight: 600; line-height: 1.3; } .post-nav__link:hover .post-nav__title { color: var(--accent); } /* ---- Links with motion ----------------------------------------------------- */ /* Arrows are pseudo-elements with [dir="rtl"] overrides: a "forward" arrow points inline-end, which is left in Arabic. Literal arrows in text would not mirror. */ .link-arrow { font-family: var(--sans); font-size: var(--step-0); text-decoration: none; font-weight: 600; } .link-arrow::after { content: " \2192"; } [dir="rtl"] .link-arrow::after { content: " \2190"; } .link-arrow--back { color: var(--ink-soft); } .link-arrow--back::after { content: none; } [dir="rtl"] .link-arrow--back::after { content: none; } .link-arrow--back::before { content: "\2190 "; } [dir="rtl"] .link-arrow--back::before { content: "\2192 "; } .post-nav__label--newer::before { content: "\2190 "; } [dir="rtl"] .post-nav__label--newer::before { content: "\2192 "; } .post-nav__label--older::after { content: " \2192"; } [dir="rtl"] .post-nav__label--older::after { content: " \2190"; } /* ---- Tags ------------------------------------------------------------------ */ .post__tags { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-1); } .tag { display: inline-block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.7rem; } .tag:hover { color: var(--accent); border-color: var(--accent); } /* ---- Search (no-JS fallback form) ------------------------------------------- */ .search { margin-block: var(--s-3) var(--s-4); } .search--inline { max-width: 28ch; margin-block: var(--s-3) 0; } .search__input { width: 100%; font-family: var(--sans); font-size: var(--step-0); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-2) var(--s-3); } .search__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .search__input::placeholder { color: var(--ink-soft); } /* ---- Search trigger (blog index) -------------------------------------------- */ .page-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .search-trigger { appearance: none; display: inline-flex; align-items: center; gap: 0.45rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0.4rem 0.75rem; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); } .search-trigger:hover { color: var(--ink); border-color: var(--accent); } .search-trigger__kbd { font-family: var(--mono); font-size: 0.72rem; border: 1px solid var(--line); border-radius: 3px; padding: 0.05rem 0.3rem; color: var(--ink-soft); background: var(--bg); } /* ---- Search modal (Cmd+K) ---------------------------------------------------- */ .search-modal { position: fixed; inset: 0; z-index: 50; display: none; } .search-modal.is-open { display: block; } .search-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(2px); } .search-modal__container { position: relative; max-width: 36rem; margin: 12vh auto 0; padding: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 25%, transparent); overflow: hidden; } .search-modal__header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); } /* dividers live on body/footer so the collapsed empty state shows one rule */ .search-modal__body { border-top: 1px solid var(--line); } .search-modal__icon { color: var(--ink-soft); flex: none; } .search-modal__input { flex: 1; min-width: 0; font-family: var(--sans); font-size: var(--step-1); color: var(--ink); background: none; border: none; outline: none; } .search-modal__input::placeholder { color: var(--ink-soft); } .search-modal__kbd, .search-modal__footer kbd { font-family: var(--mono); font-size: 0.72rem; border: 1px solid var(--line); border-radius: 3px; padding: 0.05rem 0.35rem; color: var(--ink-soft); background: var(--surface); cursor: pointer; } .search-modal__body { max-height: 50vh; overflow-y: auto; } /* Collapse the body entirely until there is something to show (results, status, or no-results) — no empty band between header and footer. */ .search-modal__body:not(:has(.search-result, .search-modal__status:not([hidden]), .search-modal__no-results:not([hidden]))) { display: none; } .search-modal__status, .search-modal__no-results { padding: var(--s-4) var(--s-3); color: var(--ink-soft); font-family: var(--sans); font-size: var(--step--1); text-align: center; } .search-modal__no-results p { margin: 0; } .search-modal__no-results-hint { margin-top: var(--s-1) !important; font-size: 0.8rem; opacity: 0.8; } .search-modal__results { list-style: none; margin: 0; padding: var(--s-1); } .search-result { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius); cursor: pointer; } .search-result.is-selected { background: color-mix(in srgb, var(--accent) 10%, transparent); } .search-result__title { display: block; font-weight: 600; line-height: 1.3; } .search-result__description { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.1rem; } .search-modal__footer { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); } .search-modal__footer kbd { cursor: default; } @media (max-width: 34rem) { .search-modal__container { margin: 6vh var(--s-2) 0; } .search-trigger__text { display: none; } } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); margin-top: var(--s-6); } .site-footer__inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-3) var(--s-4); font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); } .site-footer__legal { display: flex; gap: var(--s-3); flex-wrap: wrap; } .site-footer__legal a { color: var(--ink-soft); text-decoration: none; } .site-footer__legal a:hover { color: var(--ink); } .site-footer__mark { font-family: var(--serif); color: var(--accent); font-size: var(--step-0); letter-spacing: 0.04em; } /* ---- Language dropdown (header) --------------------------------------------- */ .lang-menu { position: relative; } .lang-menu__trigger { appearance: none; display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); padding-block: 0.2rem; } .lang-menu__trigger:hover { color: var(--ink); } .lang-menu__chevron { transition: transform 0.15s ease; } .lang-menu.is-open .lang-menu__chevron { transform: rotate(180deg); } .lang-menu__list { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); min-width: 11rem; max-height: 60vh; overflow-y: auto; margin: 0; padding: var(--s-1); list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 12%, transparent); display: none; z-index: 30; } .lang-menu.is-open .lang-menu__list { display: block; } .lang-menu__option { display: block; padding: 0.35rem 0.7rem; border-radius: 3px; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .lang-menu__option:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); } .lang-menu__option.is-current { color: var(--ink); font-weight: 600; } .lang-menu__option.is-current::after { content: " ·"; color: var(--accent); } /* ---- i18n / RTL ------------------------------------------------------------- */ /* Letter-spacing breaks Arabic cursive joining: zero it for RTL chrome. */ [dir="rtl"] .kicker, [dir="rtl"] .section-title, [dir="rtl"] .site-nav__link, [dir="rtl"] .post-nav__label, [dir="rtl"] .post__meta { letter-spacing: 0; } [dir="rtl"] .hero__title, [dir="rtl"] .page-head__title, [dir="rtl"] .post__title { letter-spacing: 0; } /* Code is always left-to-right, isolated from surrounding RTL text. */ .prose pre, .prose code { direction: ltr; unicode-bidi: isolate; text-align: start; } /* Oldstyle figures only exist in Latin faces; let CJK/RTL render naturally. */ :is([lang="ja"], [lang="ko"], [lang^="zh"], [lang="ar"]) body, html:is([lang="ja"], [lang="ko"], [lang^="zh"], [lang="ar"]) { font-variant-numeric: normal; hanging-punctuation: none; } /* ---- Responsive ------------------------------------------------------------ */ @media (max-width: 34rem) { :root { --edge: 1.15rem; } main.container { padding-block: var(--s-5); } .hero__title { font-size: var(--step-3); } .hero::after { display: none; } .brand__name { display: none; } .site-nav { gap: var(--s-3); } .site-footer__inner { flex-direction: column; gap: var(--s-1); } .post-nav { grid-template-columns: 1fr; } .post-nav__link--older { text-align: start; grid-column: 1; } } @media (prefers-reduced-motion: no-preference) { a, .post-list__title, .theme-toggle { transition: color 0.15s ease, border-color 0.15s ease; } } /* ---- OG gallery (internal design review) -------------------------------------- */ .og-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; } .og-fig { margin: 0; } .og-img { width: 100%; height: auto; border: 1px solid var(--line); } .og-cap { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); } .og-current { font-weight: 700; }