/* ═══════════════════════════════════════════════════════════════════════════
AUTARK ADVISORY — INSIGHTS ("Quiet")
---------------------------------------------------------------------------
The blog's copy of the main site's Quiet system. Tokens, type, nav, links
and footer are taken from the main site's styles.v3.css so /pricing and
/insights/ read as one site; everything below "BLOG" is the blog's own.
⚠ DEPLOYMENT NOTES
1. This file must live under /css/ — the main site's worker.js proxies
autarkadvisory.com/css/* to this Pages project, and nothing else.
2. Pages serves /css/* with max-age=31536000, so a returning visitor keeps
whatever they loaded for a year. When the contents change, CHANGE THE
FILENAME (quiet.v2.css …) and update the in partials/head.html.
DESIGN RULES (same as the main site)
· No cards, no boxes, no badges. Posts sit on hairlines, not in tiles.
· Sans display over serif body. No italics in display type.
· Exactly one filled element: the nav phone number. Links carry a rule.
═══════════════════════════════════════════════════════════════════════════ */
/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
--paper:#F4F2ED;
--paper-warm:#EFEBE4;
--ink:#16181A;
--ink-soft:#3E4244;
--muted:#83837E;
--hairline:#DFDAD1;
--accent:#3F6E6B;
--gutter:clamp(1.5rem,6vw,6rem);
--container:78rem;
--breath:clamp(8rem,16vh,12rem);
--measure:34rem;
--prose:40rem; /* article reading column */
}
/* ── BASE ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:"Newsreader",Georgia,serif;font-weight:300;
font-size:clamp(1.02rem,.35vw + .95rem,1.16rem);line-height:1.8;
-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
/* ── TYPE ───────────────────────────────────────────────────────────────── */
h1,h2,h3,.ui{font-family:"Inter Tight",system-ui,sans-serif;font-weight:300}
h1 em,h2 em{
font-style:normal;font-family:inherit;font-weight:inherit;
background:var(--ink);color:var(--paper);
padding:.04em .26em .1em;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
h1{font-size:clamp(2.05rem,5.25vw,4.45rem);line-height:1.24;letter-spacing:-.042em;margin:0;max-width:19ch}
h2{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.3;letter-spacing:-.032em;margin:0 0 1.75rem;max-width:24ch}
h3 em{background:none;color:inherit;padding:0;font-style:normal}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.022em;font-weight:400;margin:0 0 1rem}
p{margin:0 0 1.6rem}
p:last-child{margin-bottom:0}
b,strong{font-weight:400;color:var(--ink)}
.lead{font-size:1.18em;line-height:1.7;color:var(--ink-soft)}
.small{font-size:.86rem;line-height:1.7;color:var(--muted)}
.cap-label{
font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.68rem;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
margin:2.75rem 0 1.25rem;
}
.mark{
font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.68rem;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;
}
/* ── LINKS — the only call-to-action style ──────────────────────────────── */
.link{
position:relative;
display:inline-block;font-family:"Inter Tight",sans-serif;font-weight:400;
font-size:1rem;letter-spacing:-.01em;text-decoration:none;
padding-bottom:.4rem;border-bottom:1px solid var(--ink);
transition:border-color .4s ease,color .4s ease;
}
.link::after{
content:"";position:absolute;left:100%;bottom:-1px;
width:0;height:1px;background:currentColor;
transition:width .4s ease;
}
.link:hover{color:var(--accent);border-color:var(--accent)}
.link:hover::after{width:.6rem}
/* ── NAV ────────────────────────────────────────────────────────────────── */
.site-nav{
position:sticky;top:0;z-index:30;
background:color-mix(in srgb,var(--paper) 90%,transparent);
backdrop-filter:blur(14px);
display:flex;align-items:center;justify-content:space-between;gap:2rem;
width:100%;
padding:1.35rem max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.site-nav .logo{display:block;flex-shrink:0}
.site-nav .logo img{width:auto;height:2.25rem}
.logo-fallback{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:2.2rem}
.nav-links{list-style:none;display:flex;align-items:center;gap:2.1rem;margin:0;padding:0}
.nav-links a{
font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.92rem;
color:var(--muted);text-decoration:none;letter-spacing:-.005em;
transition:color .3s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-phone{
font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.88rem;
letter-spacing:.01em;white-space:nowrap;text-decoration:none;
background:var(--ink);color:var(--paper);padding:.62rem 1rem;
transition:background .3s ease,color .3s ease;
}
.nav-phone:hover{background:var(--accent);color:var(--paper)}
.nav-toggle{
display:none;background:none;border:0;padding:.4rem 0;cursor:pointer;
font-family:"Inter Tight",sans-serif;font-size:.92rem;color:var(--ink);
}
@media(max-width:1080px){
.nav-links{gap:1.5rem}
.nav-links a{font-size:.87rem}
.nav-right{gap:1.5rem}
}
@media(max-width:900px){
.nav-toggle{display:block}
.nav-links{
position:absolute;top:100%;left:0;right:0;
flex-direction:column;align-items:flex-start;gap:1.4rem;
background:var(--paper);border-top:1px solid var(--hairline);
padding:2rem max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 2.5rem;
display:none;
}
.nav-links.open{display:flex}
.nav-links a{font-size:1.05rem;color:var(--ink)}
}
@media(max-width:520px){
.site-nav .logo img{height:1.9rem}
.nav-phone{font-size:.8rem;padding:.5rem .7rem}
.nav-right{gap:1rem}
}
/* ── FOOTER ─────────────────────────────────────────────────────────────── */
/* Scoped to the page footer: an article's own