/* ABOUTME: Fjord design system for ruizrica.io — blue-slate dark, Schibsted Grotesk + JetBrains Mono,
ABOUTME: hairline grid, muted Nordic accent chips. Shared by the homepage, tool pages, and inner pages. */
:root{
--bg:#171b22; --surface:#1c212a; --surface-lift:#212733;
--line:#2a303c; --line-soft:#242a35;
--ink:#f2f5f9; --ink-dim:#c3ccd8; --ink-faint:#8b95a4;
--blue:#4e9be6; --cyan:#38c6e8; --sage:#8fbf9a; --ochre:#d8a752; --clay:#d08466; --lilac:#a293d6;
--sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* ---------- Photo hero (homepage) ---------- */
.hero{position:relative;min-height:82vh;display:flex;flex-direction:column;background-size:cover;background-position:center 42%}
/* Two scrims: a vertical one that lands the photo in the page background, and a
horizontal one that darkens the text column so copy stays legible over bright sky. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(100deg,rgba(16,20,26,.80) 0%,rgba(16,20,26,.62) 34%,rgba(16,20,26,.22) 62%,rgba(16,20,26,0) 88%),
linear-gradient(180deg,rgba(16,20,26,.20) 0%,rgba(16,20,26,.22) 34%,rgba(16,20,26,.56) 62%,rgba(16,20,26,.86) 82%,var(--bg) 100%)}
.hero > *{position:relative;z-index:2}
.hero nav{display:flex;justify-content:space-between;align-items:center;height:76px;max-width:1080px;margin:0 auto;padding:0 40px;width:100%}
.hero .brand{color:rgba(255,255,255,.95)}
.hero .brand span{opacity:.7}
.hero .nav-links{color:rgba(255,255,255,.88);font-weight:500}
.hero .nav-links a:hover{color:#fff}
.hero .headline{margin-top:auto;padding-bottom:72px;width:100%}
.hero h1{color:#fff}
.hero p.sub{margin-top:28px;font-size:17.5px;line-height:1.68;color:rgba(255,255,255,.94);max-width:52ch}
.hero p.sub b{color:#fff;font-weight:600}
.hero .meta-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:28px;font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.78)}
.hero .meta-row i{font-style:normal;color:var(--sage)}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,240,245,.45)}
@supports (animation-timeline: scroll()){
.hero{animation:heroDim linear both;animation-timeline:scroll();animation-range:0 90vh}
@keyframes heroDim{to{background-position:center 38%}}
}
/* ---------- Photo pages: coastal image behind the top (and bottom) of any inner page ---------- */
/* Per page: +
+ right after (and optionally