@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&display=swap");

:root{
  --background:oklch(0.16 0.025 215);
  --foreground:oklch(0.94 0.012 90);
  --muted-foreground:oklch(0.68 0.018 90);
  --primary:oklch(0.78 0.13 55);
  --primary-foreground:oklch(0.16 0.025 215);
  --border:oklch(0.28 0.03 215);
  --font-serif:"Fraunces",Georgia,serif;
  --font-sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none;transition:color .15s}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;letter-spacing:-0.02em;line-height:1.05;margin:0}
::selection{background:var(--primary);color:var(--background)}

.container{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.container-md{max-width:56rem;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:42rem;margin:0 auto;padding:0 1.5rem}
.container-prose{max-width:42rem;margin:0 auto;padding:0 1.5rem}

header.site{border-bottom:1px solid var(--border)}
header.site .inner{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;max-width:72rem;margin:0 auto}
header.site .brand{display:flex;align-items:baseline;gap:.5rem;color:var(--foreground)}
header.site .brand .name{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.02em}
header.site .brand .tag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground)}
header.site nav{display:flex;gap:1.75rem;font-size:.875rem}
header.site nav a{color:var(--muted-foreground)}
header.site nav a:hover, header.site nav a.active{color:var(--foreground)}
@media (max-width:640px){header.site .brand .tag{display:none}}

footer.site{margin-top:8rem;border-top:1px solid var(--border)}
footer.site .inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:2.5rem 1.5rem;max-width:72rem;margin:0 auto;font-size:.875rem;color:var(--muted-foreground)}
footer.site .brand-name{font-family:var(--font-serif);font-size:1.125rem;color:var(--foreground)}

.eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);font-weight:500}
.muted{color:var(--muted-foreground)}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:var(--primary-foreground);padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;transition:opacity .15s}
.btn:hover{opacity:.9}

/* Home */
.hero{border-bottom:1px solid var(--border)}
.hero-inner{padding:5rem 1.5rem;max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:end}
@media(min-width:1024px){.hero-inner{grid-template-columns:7fr 5fr}}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);color:var(--foreground)}
.hero p.lede{margin-top:2rem;font-size:1.125rem;color:var(--muted-foreground);max-width:36rem;line-height:1.65}
.hero .actions{margin-top:2.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hero .actions a.link{font-size:.875rem;color:var(--muted-foreground)}
.hero .actions a.link:hover{color:var(--foreground)}
.hero .figure img{width:100%;height:420px;object-fit:cover}
.hero .figure p{margin-top:.75rem;font-size:.75rem;color:var(--muted-foreground);font-style:italic}

section.block{padding:5rem 1.5rem;max-width:72rem;margin:0 auto}
section.block .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2.5rem}
section.block .head h2{font-size:1.875rem;color:var(--foreground)}
section.block .head a{font-size:.875rem;color:var(--muted-foreground)}
section.block .head a:hover{color:var(--foreground)}

.featured{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:768px){.featured{grid-template-columns:1fr 1fr}}
.featured img{width:100%;height:400px;object-fit:cover}
.featured h3{font-size:2.25rem;color:var(--foreground);line-height:1.1;transition:color .15s}
.featured a:hover h3{color:var(--primary)}
.featured .dek{margin-top:1.25rem;color:var(--muted-foreground);line-height:1.65}
.featured .date{margin-top:1.5rem;font-size:.875rem;color:var(--muted-foreground)}

.rule{border-top:1px solid var(--border);max-width:72rem;margin:0 auto}

.grid{display:grid;grid-template-columns:1fr;gap:2rem 2rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:1.25rem}
.card h3{font-size:1.5rem;color:var(--foreground);line-height:1.15;margin-top:.75rem;transition:color .15s}
.card a:hover h3{color:var(--primary)}
.card .dek{margin-top:.75rem;font-size:.875rem;color:var(--muted-foreground);line-height:1.6}

/* Archive list */
.archive{padding:5rem 1.5rem;max-width:56rem;margin:0 auto}
.archive h1{font-size:3rem;color:var(--foreground);margin-bottom:1rem}
.archive .intro{color:var(--muted-foreground);max-width:36rem;margin-bottom:4rem}
.archive ul{list-style:none;padding:0;margin:0}
.archive li{border-top:1px solid var(--border)}
.archive li:last-child{border-bottom:1px solid var(--border)}
.archive li a{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:2rem 0;align-items:baseline}
@media(min-width:640px){.archive li a{grid-template-columns:3fr 9fr}}
.archive .meta{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground)}
.archive .meta .cat{color:var(--primary)}
.archive h2{font-size:1.875rem;color:var(--foreground);line-height:1.15;transition:color .15s}
.archive li a:hover h2{color:var(--primary)}
.archive .dek{margin-top:.5rem;font-size:.875rem;color:var(--muted-foreground);max-width:42rem;line-height:1.6}
.archive .min{margin-top:.75rem;font-size:.75rem;color:var(--muted-foreground)}

/* Article */
article .head{padding:4rem 1.5rem 2.5rem;max-width:48rem;margin:0 auto;text-align:center}
article .head .meta{margin-bottom:1.5rem}
article .head h1{font-size:clamp(2.25rem,5vw,3.75rem);color:var(--foreground);line-height:1.05}
article .head .dek{margin-top:1.5rem;font-size:1.125rem;color:var(--muted-foreground);font-style:italic;max-width:36rem;margin-left:auto;margin-right:auto;line-height:1.6}
article .hero-img{max-width:64rem;margin:0 auto;padding:0 1.5rem}
article .hero-img img{width:100%;height:480px;object-fit:cover}
article .body{max-width:42rem;margin:0 auto;padding:4rem 1.5rem}
article .body p{font-size:1.0625rem;line-height:1.75;color:oklch(0.86 0.012 90);margin:0 0 1.25rem}
article .body h2{font-size:1.875rem;color:var(--foreground);margin:2.5rem 0 1rem;font-family:var(--font-serif)}
article .body h3{font-size:1.375rem;color:var(--foreground);margin:2rem 0 .75rem;font-family:var(--font-serif)}
article .body ul{margin:1rem 0 1.5rem 1.25rem;list-style:none;padding:0}
article .body li{position:relative;padding-left:1.25rem;margin-bottom:.5rem;line-height:1.7;color:oklch(0.86 0.012 90)}
article .body li::before{content:"—";position:absolute;left:0;color:var(--primary)}
article .body blockquote{border-left:2px solid var(--primary);padding-left:1.25rem;margin:1.75rem 0;font-family:var(--font-serif);font-style:italic;font-size:1.25rem;color:var(--foreground)}
article .body .nav-foot{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted-foreground)}
article .body .nav-foot a:hover{color:var(--foreground)}

/* About */
.about{padding:5rem 1.5rem;max-width:42rem;margin:0 auto}
.about h1{font-size:clamp(2.5rem,5vw,3.75rem);color:var(--foreground);line-height:1.05;margin-bottom:2.5rem}
.about p, .about li{font-size:1.0625rem;line-height:1.75;color:oklch(0.86 0.012 90)}
.about p{margin:0 0 1.25rem}
.about h2{font-size:1.5rem;color:var(--foreground);margin:2.5rem 0 1rem;font-family:var(--font-serif)}
.about ul{list-style:none;padding:0;margin:1rem 0 1.5rem 1.25rem}
.about li{position:relative;padding-left:1.25rem;margin-bottom:.5rem}
.about li::before{content:"—";position:absolute;left:0;color:var(--primary)}
.about blockquote{border-left:2px solid var(--primary);padding-left:1.25rem;margin:1.75rem 0;font-family:var(--font-serif);font-style:italic;font-size:1.25rem;color:var(--foreground)}