@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root { --ink:#102933; --deep:#063646; --sea:#0e6c78; --sand:#f5f0e9; --paper:#fffdf9; --line:#dfe7e6; --muted:#68777a; --accent:#e28751; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Zen Kaku Gothic New",system-ui,sans-serif; line-height:1.9; }
a { color:inherit; text-decoration:none; }
a:hover { opacity:.72; }
.site-header { height:76px; padding:0 clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,253,249,.96); position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(16,41,51,.07); backdrop-filter:blur(14px); }
.brand { font-weight:900; font-size:1.2rem; letter-spacing:.05em; white-space:nowrap; }.brand span { color:var(--sea); }
.main-nav { display:flex; align-items:center; gap:clamp(10px,1.7vw,26px); font-size:.78rem; font-weight:700; }.main-nav a:first-child { color:var(--sea); }.menu-toggle { display:none; background:none; border:0; font-size:1.4rem; color:var(--ink); }
.hero { position:relative; min-height:650px; background-position:center; background-size:cover; color:#fff; display:flex; align-items:center; padding:clamp(48px,8vw,110px); }.hero-content { max-width:720px; }.hero h1 { margin:0 0 26px; font-size:clamp(3rem,8vw,7rem); line-height:1.04; letter-spacing:.06em; }.hero h1 em { font-style:normal; color:#e0f7f6; }.hero p:not(.hero-kicker) { font-size:clamp(.92rem,1.5vw,1.1rem); line-height:2; margin-bottom:34px; }.hero-kicker,.eyebrow { color:#60aeb5; font-family:"DM Mono",monospace; letter-spacing:.15em; font-size:.72rem; font-weight:500; }.hero .hero-kicker { color:#c6f1ee; }.photo-credit { position:absolute; bottom:17px; right:25px; margin:0; font-size:.67rem; opacity:.76; }
.button { display:inline-block; background:var(--sea); color:white; padding:12px 22px; font-weight:700; font-size:.85rem; border:1px solid var(--sea); transition:.2s; }.button.light { background:transparent; border-color:rgba(255,255,255,.8); }.button span { padding-left:12px; }.button:hover { opacity:1; background:#0b4f5a; }
.section { max-width:1180px; margin:0 auto; padding:86px clamp(20px,5vw,60px); }.intro { max-width:850px; text-align:center; }.intro h2,.editorial-note h2,.section-heading h2,.archive h2,.related h2 { line-height:1.32; font-size:clamp(1.7rem,3vw,2.6rem); margin:8px 0 20px; }.intro>p:last-child { color:var(--muted); max-width:650px; margin:0 auto; font-size:.94rem; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; }.section-heading>a,.text-link { color:var(--sea); font-size:.83rem; font-weight:700; }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; }.article-card { background:white; border:1px solid var(--line); transition:transform .2s, box-shadow .2s; }.article-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,36,47,.09); }.card-image { display:block; min-height:180px; background-size:cover; background-position:center; }.card-body { padding:20px 20px 23px; }.card-body .eyebrow { margin:0 0 8px; font-size:.62rem; }.eyebrow span { color:#8a989b; padding-left:10px; }.card-body h3 { font-size:1.06rem; line-height:1.65; margin:0 0 7px; }.card-body>p:not(.eyebrow) { color:var(--muted); font-size:.79rem; line-height:1.75; margin:0 0 12px; }.draft-badge { display:inline-block; color:#a4572d; background:#fff0e8; padding:2px 8px; font-size:.65rem; font-weight:700; line-height:1.5; }
.category-section { background:var(--sand); }.category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:27px; }.category-tile { min-height:260px; padding:19px; color:white; background-position:center; background-size:cover; display:flex; flex-direction:column; justify-content:end; transition:transform .2s; }.category-tile:hover { opacity:1; transform:translateY(-5px); }.category-tile span { font: .58rem "DM Mono",monospace; letter-spacing:.12em; opacity:.8; }.category-tile strong { font-size:1.13rem; margin:5px 0; }.category-tile em { font-size:.7rem; line-height:1.6; font-style:normal; opacity:.9; }.editorial-note { max-width:880px; text-align:center; }.editorial-note>p:not(.eyebrow) { color:var(--muted); max-width:620px; margin:0 auto 20px; font-size:.9rem; }
.category-hero { min-height:340px; padding:60px clamp(25px,10vw,150px); color:white; background-position:center; background-size:cover; display:flex; align-items:end; }.category-hero p { font: .75rem "DM Mono",monospace; letter-spacing:.16em; margin:0; color:#c7f5f0; }.category-hero h1 { font-size:clamp(2.4rem,6vw,4.5rem); margin:6px 0; line-height:1.2; }.category-hero span { font-size:.95rem; }.archive { min-height:430px; }
.article { max-width:1000px; margin:0 auto; }.article-cover { height:300px; margin:40px 20px 0; background-size:cover; background-position:center; }.article-header { max-width:780px; margin:-65px auto 0; position:relative; background:var(--paper); padding:38px clamp(24px,5vw,70px) 28px; }.article-header h1 { font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.42; margin:12px 0 16px; }.lead { font-size:1.03rem; color:var(--muted); margin:0; }.article-content { max-width:780px; margin:0 auto; padding:20px clamp(24px,5vw,70px) 70px; }.toc { background:#eff6f5; padding:20px 24px; margin:8px 0 38px; font-size:.84rem; }.toc ol { margin:9px 0 0; padding-left:22px; }.prose h2 { font-size:1.4rem; line-height:1.55; margin:45px 0 12px; }.prose p { font-size:.97rem; }.article-notice { border-left:3px solid var(--accent); padding:10px 16px; background:#fff6ef; color:#75492f; font-size:.82rem!important; }.share { margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.76rem; }.share span { font-weight:700; margin-right:4px; }.share a,.share button { appearance:none; background:white; border:1px solid var(--line); padding:7px 10px; font:inherit; cursor:pointer; color:var(--ink); }.share a:hover,.share button:hover { color:var(--sea); border-color:var(--sea); opacity:1; }
.page-title { background:var(--deep); color:#fff; padding:75px max(20px,calc((100% - 1060px)/2)); }.page-title .eyebrow { color:#a5e2df; }.page-title h1 { margin:5px 0 0; font-size:clamp(2rem,4vw,3.4rem); }.static-content { max-width:840px; padding-top:65px; min-height:430px; }.static-content h2 { margin:34px 0 8px; font-size:1.25rem; }.static-content p,.static-content li,.static-content dd { font-size:.93rem; color:#415257; }.static-content a { color:var(--sea); text-decoration:underline; }.static-content dl { border-top:1px solid var(--line); }.static-content dt,.static-content dd { margin:0; padding:12px; border-bottom:1px solid var(--line); }.static-content dt { font-weight:700; background:#f4f8f7; }.static-content dd { padding-top:8px; }.empty-state { min-height:60vh; padding:120px 25px; text-align:center; }.empty-state h1 { font-size:2rem; }.empty-state p { color:var(--muted); margin-bottom:25px; }
.site-footer { background:#062d39; color:#e3f0ef; padding:55px clamp(22px,6vw,80px) 27px; display:grid; grid-template-columns:1.3fr 2fr 1fr; gap:30px; align-items:start; }.site-footer .brand { color:white; }.site-footer p { font-size:.78rem; color:#a9c3c2; margin:6px 0; }.footer-links { display:grid; grid-template-columns:repeat(2,max-content); gap:4px 25px; font-size:.74rem; }.footer-links a:hover { opacity:1; color:#91d6d0; }.social-links { display:flex; gap:12px; flex-wrap:wrap; font-size:.72rem; }.social-links a { text-decoration:underline; }.social-wait { color:#a4bab9; }.social-wait small { font-size:.55rem; padding-left:3px; }.site-footer>small { grid-column:1/-1; font-size:.65rem; color:#86a4a3; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); }
@media (max-width:800px) { .site-header { height:64px; }.menu-toggle { display:block; }.main-nav { display:none; position:absolute; top:64px; left:0; right:0; padding:16px 24px 21px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:10px; }.main-nav.open { display:flex; }.hero { min-height:560px; }.article-grid { grid-template-columns:1fr 1fr; }.category-grid { grid-template-columns:repeat(2,1fr); }.category-tile { min-height:190px; }.category-tile:last-child { grid-column:1/-1; }.site-footer { grid-template-columns:1fr; }.article-cover { height:240px; margin:25px 0 0; }.article-header { margin:0; }.toc { display:none; } }
@media (max-width:500px) { .hero h1 { font-size:3.4rem; }.section { padding-top:58px; padding-bottom:58px; }.article-grid { grid-template-columns:1fr; }.category-hero { min-height:260px; }.share { align-items:flex-start; }.footer-links { grid-template-columns:1fr; } }