/* ================================================
SYNE — SELF-HOSTED WITH METRIC OVERRIDES
For plain PHP/HTML site on Hostinger
SETUP (one-time, ~3 minutes):
1. Go to: https://gwfh.mranftl.com/fonts/syne?subsets=latin
2. Select weights: 700 and 800
3. Click "Download files" → unzip
4. Upload these 4 files to your server at /assets/fonts/:
syne-v22-latin-700.woff2
syne-v22-latin-700.woff
syne-v22-latin-800.woff2
syne-v22-latin-800.woff
5. In your HTML , load THIS file before styles.css:
NO Google Fonts for Syne — delete it if it exists.
================================================ */
/* ── Weight 700 ── */
@font-face {
font-family: 'Syne';
src:
url('/assets/fonts/syne-v22-latin-700.woff2') format('woff2'),
url('/assets/fonts/syne-v22-latin-700.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: block; /* block = no FOUT reflow, no mid-load clip flash */
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;
/* ── The actual fix for descender clipping ── */
ascent-override: 88%; /* tighten cap-height room slightly */
descent-override: 22%; /* reserve space below baseline for g/y/p/q */
line-gap-override: 0%; /* line spacing handled by line-height, not this */
}
/* ── Weight 800 ── */
@font-face {
font-family: 'Syne';
src:
url('/assets/fonts/syne-v22-latin-800.woff2') format('woff2'),
url('/assets/fonts/syne-v22-latin-800.woff') format('woff');
font-weight: 800;
font-style: normal;
font-display: block;
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;
ascent-override: 88%;
descent-override: 22%;
line-gap-override: 0%;
}
/* ── Heading rules: live here, not in styles.css ──────────────────────
Keeping font + metric-dependent rules together in one file
avoids load-order bugs where styles.css races ahead.
──────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: 'Syne', Georgia, serif; /* Georgia = decent fallback if font fails */
font-weight: 800;
letter-spacing: -0.03em;
overflow: visible; /* belt — no container clips us */
padding-bottom: 0.25em; /* braces — physical space for descenders,
works even in browsers that ignore metric overrides
(Safari < 15.4, Firefox < 89) */
display: block; /* padding-bottom ignored on inline elements */
box-decoration-break: clone; /* padding on every wrapped line, not just last */
-webkit-box-decoration-break: clone;
}
/* Size scale */
h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1.25; }
h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.38; }
h3 { font-size: 1.25rem; line-height: 1.45; }
h4 { font-size: 1rem; letter-spacing: 0; line-height: 1.5; }
h5 { font-size: 0.9rem; line-height: 1.5; }
h6 { font-size: 0.8rem; line-height: 1.5; }
.syne-branding {
font-family: 'Syne', Georgia, serif;
letter-spacing: -0.07em;
overflow: visible;
padding-bottom: 0.25em;
display: block;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}