:root { --ink:#17223b; --muted:#5d6678; --paper:#f8f7f3; --line:#dfe3ea; --accent:#e95b3c; --accent-dark:#c9442a; --navy:#111d35; --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:17px; line-height:1.7; }
a { color:inherit; text-decoration-color:color-mix(in srgb,var(--accent),transparent 45%); text-underline-offset:.16em; }
a:hover { color:var(--accent-dark); }
img { display:block; max-width:100%; }
.shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; top:8px; left:8px; z-index:10; padding:8px 12px; color:#fff; background:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { border-bottom:1px solid var(--line); background:rgba(248,247,243,.92); backdrop-filter:blur(12px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; }
.brand { color:var(--navy); font-size:1.3rem; font-weight:800; letter-spacing:-.055em; text-decoration:none; }
.brand span { color:var(--accent); }
nav { display:flex; gap:24px; align-items:center; font-size:.88rem; font-weight:650; }
nav a { color:var(--muted); text-decoration:none; }
nav a[aria-current="page"] { color:var(--ink); }
.hero { padding:clamp(76px,12vw,150px) 0 clamp(68px,9vw,110px); }
.eyebrow { margin:0 0 13px; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero h1,.article h1 { max-width:850px; margin:0; color:var(--navy); font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:.98; }
.hero h1 { font-size:clamp(3.4rem,8vw,7.1rem); }
.intro { max-width:610px; margin:32px 0 0; color:var(--muted); font-size:clamp(1.08rem,2vw,1.34rem); line-height:1.6; }
.posts { padding:0 0 100px; }
.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:24px; }
.section-heading .eyebrow { margin:0 0 6px; }
.section-heading h2 { margin:0; font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:400; letter-spacing:-.04em; line-height:1.1; }
.post-list { border-top:1px solid var(--line); }
.post-card { display:grid; grid-template-columns:minmax(160px,.62fr) minmax(0,1.5fr) minmax(100px,.35fr); gap:32px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line); }
.post-card.featured { padding:42px 0; }
.post-meta { margin:0; color:var(--muted); font-size:.78rem; font-weight:650; line-height:1.5; }
.post-meta span { padding:0 4px; color:#a8aeb9; }
.post-card h3 { margin:0 0 9px; font-family:var(--serif); font-size:clamp(1.55rem,3vw,2.35rem); font-weight:400; letter-spacing:-.035em; line-height:1.1; }
.post-card h3 a { text-decoration:none; }
.post-card div p { margin:0; color:var(--muted); font-size:.94rem; line-height:1.55; }
.text-link { justify-self:end; color:var(--accent-dark); font-size:.83rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.text-link span { display:inline-block; transition:transform .2s ease; }
.text-link:hover span { transform:translateX(4px); }
.article { width:min(860px,calc(100% - 48px)); padding:66px 0 110px; }
.article-header { max-width:780px; margin-bottom:55px; }
.back-link { display:inline-block; margin-bottom:46px; color:var(--muted); font-size:.85rem; font-weight:700; text-decoration:none; }
.article h1 { font-size:clamp(3rem,7vw,5.9rem); }
.article-description { max-width:625px; margin:24px 0 0; color:var(--muted); font-family:var(--serif); font-size:clamp(1.2rem,2.5vw,1.55rem); line-height:1.45; }
.article-body { max-width:700px; font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.24rem); line-height:1.75; }
.article-body p { margin:0 0 1.55em; }
.article-body a { color:var(--accent-dark); }
.article-body code { padding:.08em .3em; color:#a63724; background:#f3e7e2; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.86em; }
blockquote { margin:2.4em 0; padding:4px 0 4px 26px; border-left:3px solid var(--accent); color:var(--navy); font-size:1.24em; }
blockquote p { margin-bottom:0 !important; }
.article-image { width:min(850px,100vw - 48px); margin:2.5em 0; }
.article-image img { border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 35px rgba(23,34,59,.10); }
figcaption { margin-top:11px; color:var(--muted); font-family:var(--sans); font-size:.77rem; line-height:1.45; }
.callout { margin:2.25em 0; padding:22px 25px; border-radius:4px; background:#fff0eb; color:#6b3024; font-family:var(--sans); font-size:.92em; line-height:1.6; }
.callout p { margin:0; }
.video-frame { position:relative; width:100%; margin:2.25em 0; padding-top:56.25%; background:var(--navy); }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.site-footer { padding:37px 0; color:#c5cbd6; background:var(--navy); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-inner p { margin:0; font-size:.78rem; }
.footer-inner .brand { color:#fff; }
@media (max-width:720px) { .shell { width:min(100% - 32px,1120px); } .header-inner { min-height:64px; } nav { gap:16px; font-size:.78rem; } .post-card,.post-card.featured { display:block; padding:28px 0; } .post-card h3 { margin-top:12px; } .post-card div p { margin-top:10px; } .text-link { display:inline-block; margin-top:15px; } .article { width:min(100% - 32px,860px); padding-top:44px; } .back-link { margin-bottom:34px; } .footer-inner { display:block; } .footer-inner p + p { margin-top:8px; } }