/* =====================================================================
Shiatsu Glarmin — typography.css
---------------------------------------------------------------------
Single source of truth for all typography on the website.
Load BEFORE site.css:
What lives here: font families, type scale tokens, headings, body text,
labels, captions, navigation text, buttons, links, text behaviour
(hyphenation, wrapping) and responsive typography.
What does NOT live here: colours, layout, spacing, images, carousel and
component styling (see site.css and the HD homepage stylesheets).
Rules:
- Only four sizes. --fs-body (20px) is ALL content text, including buttons,
text links, card titles/subtitles and form input. --fs-ui (16px) is only
for UI: navigation, uppercase labels, form labels, footer.
- Manrope everywhere (joinmastodon.org scale). Shippori Mincho only as a
decorative accent: hero h1, .quote and the HD kanji.
===================================================================== */
/* ---------- 1. Font families + type scale tokens ---------- */
:root {
--sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--serif: "Shippori Mincho", Georgia, serif;
--fs-ui: 1rem; --lh-ui: 1.5; /* b2 · UI only */
--fs-body: 1.25rem; --lh-body: 1.5; /* b1 · all content */
--fs-title: 1.75rem; --lh-title: calc(38 / 28); /* h4 · section titles */
--fs-display: 2.375rem; --lh-display: calc(50 / 38); /* h3 · serif display */
}
/* ---------- 9. Responsive typography ---------- */
@media (min-width: 768px) {
:root {
--fs-title: 2.375rem; --lh-title: calc(50 / 38);
--fs-display: 2.625rem; --lh-display: calc(55 / 42);
}
}
/* ---------- 3. Body text ---------- */
body {
font-family: var(--sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 450;
letter-spacing: .01em;
-webkit-font-smoothing: antialiased;
}
address { font-style: normal; }
/* ---------- 2. Headings (h1 = decorative serif, hero only) ---------- */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h1 {
font-family: var(--serif); font-weight: 500; letter-spacing: 0;
font-size: var(--fs-display); line-height: var(--lh-display);
}
h2 { font-weight: 700; font-size: var(--fs-title); line-height: var(--lh-title); }
h3 { font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-body); }
.nowrap { white-space: nowrap; }
.skip-link { font-size: var(--fs-ui); text-decoration: none; }
/* ---------- 4. Labels ---------- */
.eyebrow {
font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
}
/* ---------- 8. Links ---------- */
.text-link {
font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; text-decoration: none;
}
/* ---------- 7. Buttons ---------- */
.button {
font: 600 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing: .01em;
text-decoration: none;
}
/* ---------- 6. Navigation text ---------- */
.site-nav { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.site-nav a { font-weight: 600; text-decoration: none; }
@media (max-width: 900px) {
.site-nav__meta a { font-weight: 450; }
}
/* ---------- Hero meta ---------- */
.hero__person strong { font-weight: 600; }
.hero__person span, .hero__person a { text-decoration: none; }
/* ---------- 4. Labels (section label column) ---------- */
.section-label {
font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
}
/* ---------- Teaser / card text ---------- */
.teaser { text-decoration: none; }
.teaser__body > :first-child { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.teaser__title { font-weight: 600; }
.teaser__sub { font-size: var(--fs-body); line-height: var(--lh-body); }
/* ---------- 5. Captions / signatures ---------- */
.intro__sign { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
/* ---------- Content blocks ---------- */
.box__value { font-weight: 600; }
.timeline__year { font-weight: 600; white-space: nowrap; }
/* Quote — decorative serif line inside content */
.quote { font-family: var(--serif); font-weight: 500; letter-spacing: 0; font-size: var(--fs-title); line-height: var(--lh-title); }
.banner__links a { font-weight: 600; text-decoration: none; }
/* ---------- Form ---------- */
.field label { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; }
.field input, .field textarea { font: inherit; }
.consent { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.form__foot p { font-size: var(--fs-ui); line-height: var(--lh-ui); }
/* ---------- Footer ---------- */
.site-footer__info, .site-footer__nav { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.site-footer__nav a { text-decoration: none; }
/* =====================================================================
10. HD homepage proposals (_Style Guide/HD-Versions)
---------------------------------------------------------------------
Class-scoped only (.hd-…) — no element selectors, so nothing here can
override the live pages or the locked second section.
Same four sizes as above; the only extra size is the decorative kanji.
===================================================================== */
:root {
--fs-kanji: clamp(5.5rem, 12vw, 11rem); /* 指圧 · decorative glyph */
--fs-kanji-s: clamp(3.5rem, 6vw, 5.5rem); /* single glyph tiles / numerals */
--fs-hero: clamp(3rem, 7vw, 6.25rem); /* exception: very big sections only (≈ 5em at 1440) */
--lh-hero: 1.04;
}
/* Exception to the four sizes — only for the homepage hero / very big sections */
.hd-display-xl { font-size: var(--fs-hero); line-height: var(--lh-hero); }
/* Kanji — Shippori Mincho carries the Japanese glyphs */
.hd-kanji { font-family: var(--serif); font-weight: 500; font-size: var(--fs-kanji); line-height: 1; letter-spacing: 0; }
.hd-kanji--s { font-size: var(--fs-kanji-s); }
.hd-kanji--xs { font-size: var(--fs-title); line-height: 1; } /* numerals / glyphs inside pebbles */
.hd-step > div { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.hd-kanji--vertical { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .06em; }
/* Display quote (serif, display size) */
.hd-quote { font-family: var(--serif); font-weight: 500; letter-spacing: 0; font-size: var(--fs-display); line-height: var(--lh-display); }
/* Stat / key figure (title size, bold) */
.hd-stat { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; }
/* Vertical label (UI size) */
.hd-vlabel { writing-mode: vertical-rl; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
/* Caption (UI size) */
.hd-caption { font-size: var(--fs-ui); line-height: var(--lh-ui); }
/* Footer — UI size; the contact block above it stays content size */
.hd-footer__main, .hd-footer__legal { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hd-footer__title { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hd-footer a, .hd-contact__direct a { text-decoration: none; }
.hd-contact__direct a { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; overflow-wrap: break-word; }
.hd-hours dt { font-weight: 600; }
/* Exception — A-Final "06 / Kontakt" takes the heading and phone/email sizes of index_HD – V1 (#kontakt):
h2 up to 76 px (never smaller than --fs-title, so "Kontaktaufnahme." does not break) · phone/email 24 px.
Label and address keep the sizes above (--fs-ui, --fs-body). */
.hd--final .hd-footer__cta h2 { font-size: clamp(var(--fs-title), 5vw, 4.75rem); line-height: .98; font-weight: 600; letter-spacing: 0; }
.hd--final .hd-contact__direct a { font-size: 1.5rem; line-height: normal; font-weight: 600; letter-spacing: 0; }
/* Review switcher on the proposal pages (UI size) */
.hd-review a { font-size: var(--fs-ui); line-height: var(--lh-ui); text-decoration: none; }
/* Style guide annotations (UI size, monospace token names) */
.hd-sg-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-ui); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.hd-sg-nav, .hd-sg-spec, .hd-sg-table { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hd-sg-nav a { text-decoration: none; }
.hd-sg-table th { font-weight: 600; }