@font-face{font-family:'Archivo';src:url(/assets/fonts/ak-archivo-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Archivo';src:url(/assets/fonts/ak-archivo-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/ak-source-serif-4-wght-normal.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/ak-source-serif-4-wght-italic.woff2) format('woff2');font-weight:200 900;font-style:italic;font-display:swap}
:root{
 --sea:#ffffff;--shoal:#d4e7f0;--shoal-2:#e9f3f8;--contour:#86aec4;--ink:#13222d;--ink-2:#34495a;--ink-3:#4d6273;
 --orange:#f26b0f;--link:#b4400a;--focus:#e0600c;
 --f-ui:'Archivo',system-ui,sans-serif;--f-read:'Source Serif 4',Georgia,serif;
 --wrap:1160px;--gut:clamp(18px,4vw,40px);--col:43rem
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--contour) var(--shoal-2)}
body{margin:0;background:var(--sea);color:var(--ink);font:400 1.125rem/1.65 var(--f-read);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--shoal);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:30;font:600 .95rem var(--f-ui)}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- the chart: masthead */
.chart{position:relative;height:var(--band,150px);overflow:hidden;background:var(--sea);border-bottom:1px solid var(--ink)}
.chart > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--chart-pos,62% 38%)}
.chart .wrap{position:relative;height:100%}
.cartouche{position:absolute;left:var(--gut);bottom:22px;background:var(--sea);border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:12px 16px 12px 14px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.logo{display:block;width:calc(337px * var(--ls,.62));height:calc(88px * var(--ls,.62));overflow:hidden}
.logo img{display:block;width:calc(730px * var(--ls,.62));max-width:none;height:auto}
.motto{font:italic 500 1rem/1.25 var(--f-ui);color:var(--ink-2);margin:0;padding-left:2px}
.nav{position:absolute;right:var(--gut);top:16px;display:flex;background:var(--sea);border:1px solid var(--ink)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:600 .95rem var(--f-ui);color:var(--ink);text-decoration:none}
.nav a + a{border-left:1px solid var(--ink)}
.nav a:hover{background:var(--shoal-2)}
.nav a[aria-current]{background:var(--ink);color:#fff}
.neatline{height:13px;background:repeating-linear-gradient(90deg,var(--ink) 0 60px,var(--sea) 60px 120px) 0 0/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 12px) 0 100%/100% 5px no-repeat,var(--sea);border-bottom:1px solid var(--ink);box-shadow:inset 0 -6px 0 -5px var(--ink)}
.home .chart{--band:clamp(250px,32vw,400px);--ls:.8}
.home .chart > img{--chart-pos:60% 62%}
.post .chart > img,.page .chart > img,.archive .chart > img{--chart-pos:40% 90%}

/* ---------- lists (home, archives) */
main{display:block}
.lead{max-width:var(--col);padding-top:clamp(36px,5vw,60px)}
.sec-h{font:700 1.4rem/1.2 var(--f-ui);letter-spacing:-.01em;margin:0 0 6px}
.list{list-style:none;margin:0;padding:0;max-width:var(--col)}
.item{padding:24px 0 26px;border-bottom:1px solid var(--shoal)}
.item:last-child{border-bottom:0}
.item .t{font:650 clamp(1.35rem,2.6vw,1.6rem)/1.2 var(--f-ui);letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
.item .t a{color:var(--ink);text-decoration:none}
.item .t a:hover{color:var(--link);text-decoration:underline;text-decoration-thickness:2px}
.item .dek{margin:0 0 10px;color:var(--ink-2);font-size:1.06rem;line-height:1.6;max-width:62ch}
.item .dek p{margin:0}
.meta{font:italic 450 .95rem/1.4 var(--f-ui);color:var(--ink-3);margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;font-variant-numeric:tabular-nums}
.meta a{color:var(--ink-3);text-decoration:none;padding-block:.35em}
.meta a:hover{color:var(--link);text-decoration:underline}
.more{margin:22px 0 0;font:600 1rem var(--f-ui)}
.more a{display:inline-flex;align-items:center;min-height:44px}

/* layout: reading column + chart-legend rail */
.layout{display:grid;grid-template-columns:minmax(0,var(--col)) minmax(250px,310px);justify-content:space-between;gap:0 64px;padding-bottom:clamp(48px,7vw,80px)}
.rail{padding-top:clamp(36px,5vw,60px);font-family:var(--f-ui)}
.rail section{padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--shoal)}
.rail section:last-child{border-bottom:0}
.rail .legend{border-top:3px double var(--ink);padding-top:16px}
.rail .legend .lbl{font-size:1.3rem;letter-spacing:-.01em;margin-bottom:14px}
.feat{list-style:none;margin:0;padding:0}
.feat li{padding:0 0 16px}
.feat .ft{font:600 1rem/1.3 var(--f-ui);color:var(--ink);text-decoration:none;padding-block:.25em}
.feat .ft:hover{color:var(--link);text-decoration:underline}
.feat .fx{font:400 .95rem/1.5 var(--f-read);color:var(--ink-2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feat .fx p{margin:0}

/* ---------- article */
.art{max-width:var(--col);padding-top:clamp(32px,5vw,56px);padding-bottom:16px}
.art h1,.arch-title{font:750 clamp(2rem,4.6vw,3.1rem)/1.06 var(--f-ui);letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--ink)}
.art .meta{margin:16px 0 0;font-size:1rem}
.art .meta a{color:var(--link)}
.entry{margin-top:clamp(26px,4vw,40px);font-size:1.1875rem;line-height:1.7;overflow-wrap:break-word}
.entry p{margin:0 0 1.15em}
.entry p:has(> strong:only-child){font:700 1.3rem/1.25 var(--f-ui);letter-spacing:-.01em;margin:1.9em 0 .55em;color:var(--ink)}
.entry p:has(> strong:only-child) > strong,.entry h2 strong,.entry h3 strong,.entry h4 strong{font-weight:inherit}
.entry h2,.entry h3,.entry h4{font:700 1.3rem/1.25 var(--f-ui);margin:1.9em 0 .55em}
.entry [style*="justify"]{text-align:left!important}
.entry ul,.entry ol{padding-left:1.3em;margin:0 0 1.2em}
.entry blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.1em;border-left:1px solid var(--contour);color:var(--ink-2)}
.entry table{border-collapse:collapse;margin:1.6em auto!important;max-width:100%}
.entry table:not([style*="float"]):not([style*="width: 440px"]){display:block;overflow-x:auto}
.entry table[style*="float: right"],.entry table[style*="float:right"]{float:right;margin:.3em 0 1em 1.6em!important}
.entry table[style*="float: left"],.entry table[style*="float:left"]{float:left;margin:.3em 1.6em 1em 0!important}
.entry table[style*="width: 440px"]{width:100%!important}
.entry td{padding:0}
.entry td img{display:block;border:1px solid var(--contour)}
.entry table[style*="width: 440px"] img{width:100%}
.entry .photocaption{font:italic 450 .86rem/1.45 var(--f-ui);color:var(--ink-3);padding-top:.6em;text-align:left!important}
.entry::after{content:"";display:table;clear:both}
.entry a{word-break:break-word}
.comments{margin-top:48px;padding-top:28px;border-top:1px solid var(--ink)}
#precomments{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.c-h{font:700 1.4rem/1.2 var(--f-ui);margin:0}
.comright a{font:italic 500 .92rem var(--f-ui);display:inline-flex;align-items:center;min-height:44px}
.commentlist{list-style:none;margin:8px 0 0;padding:0}
.commentlist li{padding:20px 0;border-top:1px solid var(--shoal)}
.commentlist a[name]{display:none}
.cauthor{display:block;font:650 1rem/1.3 var(--f-ui);color:var(--ink);margin-bottom:6px}
.cauthor a{color:inherit}
.commentlist p{margin:0 0 .8em;font-size:1.03rem;line-height:1.62}
.commentlist li.authorcomment{background:var(--shoal-2);border-top:1px solid var(--contour);padding:20px 18px}
.commentlist li.authorcomment .cauthor::after{content:" (author)";font-style:italic;font-weight:450;color:var(--ink-3)}

/* ---------- archives */
.arch-head{max-width:var(--col);padding-top:clamp(32px,5vw,56px)}
.arch-head .sub{font:italic 500 1rem var(--f-ui);color:var(--ink-3);margin:12px 0 0}

/* ---------- rail lists + footer */
.lbl{font:700 1.05rem/1.2 var(--f-ui);margin:0 0 10px}
.topics,.months,.ext{list-style:none;margin:0;padding:0}
.topics{display:flex;flex-wrap:wrap;gap:0 16px}
.topics a,.months a,.ext a{display:inline-flex;align-items:center;min-height:34px;font:500 .97rem var(--f-ui);color:var(--ink-2);text-decoration:none}
.topics a:hover,.months a:hover,.ext a:hover{color:var(--link);text-decoration:underline}
.months{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 20px;font-variant-numeric:tabular-nums}
.months a{font-style:italic}
.site-foot{background:var(--shoal);border-top:1px solid var(--ink)}
.site-foot .neatline{border-bottom:1px solid var(--ink);border-top:0}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:26px 30px;font:500 .95rem/1.5 var(--f-ui);color:var(--ink-2)}
.foot p{margin:0}
.foot a{color:var(--ink);padding-block:.5em}
@media (pointer:coarse){.topics a,.months a,.ext a{min-height:44px}}
@media (max-width:960px){.layout{grid-template-columns:minmax(0,1fr)}.rail{border-top:1px solid var(--ink);margin-top:40px;padding-top:32px}}
@media (max-width:600px){
 .chart{--band:150px}.home .chart{--band:230px;--ls:.62}
 .cartouche{bottom:16px;padding:9px 11px}
 .nav{top:10px}.nav a{padding:0 12px;font-size:.9rem}
 .post .cartouche,.page .cartouche,.archive .cartouche{--ls:.5;bottom:12px;padding:7px 9px;gap:3px}
 .post .motto,.page .motto,.archive .motto{display:none}
 .post .chart > img,.page .chart > img,.archive .chart > img{inset:auto;left:-45%;bottom:0;width:230%;max-width:none;height:auto;object-fit:fill}
 .entry{font-size:1.125rem}
 .entry table[style*="float"]{float:none!important;margin:1.4em 0!important;width:100%!important}
 .entry table[style*="float"] img{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
