/*
Theme Name: Vesper
Theme URI: https://joshua.doodnauth.com/
Author: Joshua Doodnauth
Author URI: https://joshua.doodnauth.com/
Description: A midnight-blue editorial theme for engineers who write. Instrument Serif display, Geist body, warm amber accents.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: MIT
Text Domain: vesper
Tags: blog, editorial, dark, custom-colors, custom-menu, featured-images, threaded-comments
*/

:root{
  --bg:#0B1426; --bg-2:#101D34; --bg-3:#172841;
  --ink:#F4ECD8; --ink-2:#A6B0C0;
  --rule:#F4ECD814;
  --accent:#E8A87C; --accent-2:#C97B5B;
  --display:"Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-weight:400}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 50% at 70% -10%, #E8A87C18, transparent 60%),radial-gradient(ellipse 60% 40% at 10% 100%, #3A5A8A22, transparent 60%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.shell{max-width:1440px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
@media(max-width:720px){.shell{padding:0 20px}}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:50}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* ============ HEADER ============ */
header.top{position:sticky;top:0;z-index:20;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);background:#0B1426BB;border-bottom:1px solid var(--rule)}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:18px 0}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand .glyph{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #FFE0C2, var(--accent) 45%, var(--accent-2) 100%);box-shadow:0 0 16px #E8A87C66}
.brand .name{font-family:var(--display);font-style:italic;font-size:18px;letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.brand small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase;font-style:normal}
nav.primary{display:flex;justify-content:center;gap:36px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
nav.primary ul{list-style:none;padding:0;margin:0;display:flex;gap:36px}
nav.primary a{position:relative;padding:6px 0;color:var(--ink-2);transition:color .3s}
nav.primary a:hover,nav.primary .current-menu-item > a,nav.primary .current-menu-parent > a{color:var(--ink)}
nav.primary a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--accent);transition:left .35s ease, right .35s ease}
nav.primary a:hover::after,nav.primary .current-menu-item > a::after{left:0;right:0}
.cta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--ink);border-radius:999px;transition:all .3s;color:var(--ink)}
.cta:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ============ HERO ============ */
.hero{position:relative;min-height:56vh;display:flex;flex-direction:column;justify-content:flex-start;padding:0 40px 56px;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.9) brightness(.55);will-change:transform}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, #0B1426CC 0%, #0B142666 35%, #0B142699 75%, var(--bg) 100%)}
.hero .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 100% 70% at 50% 100%, #0B142600 0%, #0B1426 90%);z-index:1;pointer-events:none}
.hero .inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding-top:48px;display:flex;flex-direction:column;flex:1}
.hero h1{margin-top:auto}
.hero .scroll-cue{margin-bottom:auto}
.hero .kicker-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:36px;border-bottom:1px solid #F4ECD833;padding-bottom:16px;flex-wrap:wrap;gap:12px}
.hero .kicker-row .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);margin-right:10px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,7.5vw,132px);line-height:1.05;letter-spacing:-.025em;margin:0 0 20px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line span{display:inline-block;transform:translateY(110%);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .l2 span{animation-delay:.12s}
.hero h1 .it{font-style:italic;color:var(--accent)}
@keyframes rise{to{transform:translateY(0)}}
.hero .sub{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(18px,1.8vw,26px);line-height:1.35;color:var(--ink);max-width:720px;margin:0 0 24px;opacity:0;animation:fade 1s ease .4s forwards}
@keyframes fade{to{opacity:1}}
.hero .scroll-cue{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;opacity:0;animation:fade 1s ease .8s forwards}
.hero .scroll-cue .line{display:inline-block;width:32px;height:1px;background:var(--ink-2)}

/* ============ CALLOUTS ============ */
.callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:0;margin-bottom:64px;position:relative;z-index:3;background:#0B142680;backdrop-filter:blur(8px)}
.callouts .c{padding:22px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.callouts .c:last-child{border-right:0}
.callouts .c .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.callouts .c .lbl::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}
.callouts .c b{font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;letter-spacing:-.005em;color:var(--ink);line-height:1.2}
.callouts .c small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-style:normal}

/* ============ SECTIONS ============ */
section.s{padding:8px 0 60px;position:relative}
.k{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);padding-bottom:16px;border-bottom:1px solid var(--rule);flex-wrap:wrap;gap:8px}
.k .num{color:var(--accent)}
.k .mid{color:var(--ink)}
.s h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.5vw,88px);line-height:.95;letter-spacing:-.025em;margin:0 0 32px;max-width:18ch}
.s h2 em{font-style:italic;color:var(--accent)}

/* ABOUT */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.about .lead{font-family:var(--display);font-size:28px;line-height:1.4;color:var(--ink);font-weight:400}
.about .lead p+p{margin-top:.7em}
.about .lead p:first-child::first-letter{font-style:italic;color:var(--accent);font-size:1.3em}
.about aside{display:flex;flex-direction:column}
.about aside .row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.about aside .row:first-child{border-top:1px solid var(--rule)}
.about aside .row span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.about aside .row b{font-family:var(--display);font-style:italic;font-weight:400;font-size:20px;color:var(--ink)}

/* NOTES (article cards) */
.notes{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 32px}
article.note{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1);grid-column:span 4}
article.note:hover{transform:translateY(-4px)}
article.note .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);margin-bottom:18px;position:relative}
article.note .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s;filter:saturate(.85) brightness(.92)}
article.note:hover .thumb img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}
article.note .pin{position:absolute;top:12px;left:12px;background:#0B1426CC;backdrop-filter:blur(6px);font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--rule);border-radius:999px;color:var(--accent)}
article.note .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
article.note h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.01em;margin:10px 0 12px;color:var(--ink)}
article.note h3 a{color:inherit}
article.note p{margin:0 0 14px;color:var(--ink-2);max-width:46ch}
article.note .by{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;padding-top:8px}
article.note .by .arrow{color:var(--accent);transition:transform .3s}
article.note:hover .by .arrow{transform:translateX(6px)}
.note.feature{grid-column:span 8;flex-direction:row;gap:32px;align-items:stretch}
.note.feature .thumb{flex:1.2;aspect-ratio:5/4;margin-bottom:0}
.note.feature .meta{flex:1;display:flex;flex-direction:column}
.note.feature h3{font-size:44px;line-height:1.02}

/* PROJECTS (condensed rows) */
.projects{display:flex;flex-direction:column}
.proj{display:grid;grid-template-columns:60px 1.2fr 1.6fr;gap:32px;padding:32px 0 32px 24px;margin-left:-24px;border-top:1px solid var(--ink);align-items:start;transition:background .4s ease;position:relative}
.proj:last-child{border-bottom:1px solid var(--ink)}
.proj::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--accent);transform:translateY(-50%);transition:height .4s cubic-bezier(.2,.7,.2,1)}
.proj:hover::before{height:64%}
.proj:hover{background:linear-gradient(to right, transparent, #172841AA 40%, transparent 100%)}
.proj:hover .name{color:var(--accent);transform:translateX(6px)}
.proj .name{transition:transform .4s cubic-bezier(.2,.7,.2,1), color .4s}
.proj .num{font-family:var(--display);font-style:italic;font-size:30px;color:var(--accent);line-height:1}
.proj .name{font-family:var(--display);font-size:36px;font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.proj .name em{font-style:italic;color:var(--accent)}
.proj .name small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:12px;font-style:normal}
.proj .desc{color:var(--ink-2);max-width:54ch;font-size:16px}
.proj .desc .stack{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.proj .desc .stack span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)}
.proj .desc .arrow{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px}

/* GALLERY */
.gallery{column-count:3;column-gap:18px}
.gallery figure{break-inside:avoid;margin:0 0 18px;position:relative;overflow:hidden;border-radius:4px;background:var(--bg-2)}
.gallery figure img{width:100%;height:auto;display:block;transition:transform 1.6s cubic-bezier(.2,.7,.2,1), filter .8s ease;filter:saturate(.9) brightness(.9)}
.gallery figure:hover img{transform:scale(1.04);filter:saturate(1.05) brightness(1)}
.gallery figcaption{position:absolute;left:14px;bottom:14px;right:14px;color:#FFFEF8;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:all .4s ease;display:flex;justify-content:space-between}
.gallery figure:hover figcaption{opacity:1;transform:none}
.gallery figcaption::before{content:"";position:absolute;left:-14px;right:-14px;bottom:-14px;top:-40px;background:linear-gradient(180deg,transparent, #00000099);z-index:-1;border-radius:0 0 4px 4px}

/* CONTACT */
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}
.contact .big{font-family:var(--display);font-weight:400;font-size:clamp(60px,9vw,160px);line-height:.92;letter-spacing:-.035em;margin:0;color:var(--ink)}
.contact .big em{font-style:italic;color:var(--accent)}
.contact .right{display:flex;flex-direction:column;gap:0;font-family:var(--display);font-style:italic;font-size:22px}
.contact .right a{padding:18px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;color:var(--ink);transition:padding .3s ease, color .3s}
.contact .right a:first-child{border-top:1px solid var(--rule)}
.contact .right a:hover{padding-left:8px;color:var(--accent)}
.contact .right a span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-style:normal}

/* ============ ARTICLE / SINGLE ============ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:30;transition:width .1s linear;box-shadow:0 0 12px var(--accent)}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding:28px 0 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:#F4ECD844}
.art-head{padding:8px 0 48px;border-bottom:1px solid var(--rule);position:relative}
.art-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.art-kicker .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.art-head h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.2vw,82px);line-height:1.02;letter-spacing:-.02em;margin:0 0 22px;max-width:22ch}
.art-head h1 em{font-style:italic;color:var(--accent)}
.art-dek{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.4;color:var(--ink);max-width:60ch;margin:0 0 36px}
.art-meta{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.art-meta .by{display:flex;align-items:center;gap:12px}
.art-meta .by img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.art-meta .by b{font-family:var(--display);font-style:italic;font-weight:400;font-size:17px;letter-spacing:-.005em;color:var(--ink);text-transform:none;display:block}
.art-meta .by span{color:var(--ink-2);font-size:10px;display:block}
.art-meta .facts{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.art-meta .facts span b{color:var(--ink);font-family:var(--sans);font-weight:500;letter-spacing:.05em}
.art-meta .share{display:flex;gap:8px;justify-content:flex-end}
.art-meta .share a{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-2);transition:all .3s}
.art-meta .share a:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.art-hero-img{margin:32px 0 0;aspect-ratio:21/9;overflow:hidden;border-radius:4px;position:relative}
.art-hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.05)}
.art-hero-img figcaption{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#FFFEF8;text-shadow:0 1px 6px #00000099}

.body-wrap{display:grid;grid-template-columns:240px 1fr;gap:80px;padding:60px 0}
.body-wrap.no-toc{grid-template-columns:1fr;max-width:75ch;margin:0 auto;padding:60px 0}
.toc{position:sticky;top:96px;align-self:start;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.toc h4{font-family:var(--display);font-style:italic;font-weight:400;font-size:16px;letter-spacing:-.005em;color:var(--ink);text-transform:none;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:n}
.toc li{counter-increment:n;padding:8px 0;border-bottom:1px solid var(--rule);display:flex;gap:10px;align-items:baseline}
.toc li::before{content:"0" counter(n);color:var(--accent);font-size:10px;letter-spacing:.16em}
.toc a{color:var(--ink-2);transition:color .3s;line-height:1.3;letter-spacing:.06em}
.toc a:hover,.toc a.active{color:var(--ink)}

/* PROSE — also catches Gutenberg block output */
.prose{max-width:68ch;font-size:19px;line-height:1.72;color:#E8E0CC}
.prose > p:first-of-type::first-letter{font-family:var(--display);font-style:italic;font-weight:400;font-size:88px;line-height:.82;float:left;padding:14px 14px 0 0;color:var(--accent)}
.prose p{margin:0 0 1.4em}
.prose a{color:var(--accent);border-bottom:1px solid #E8A87C66;transition:border-color .3s}
.prose a:hover{border-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-family:var(--display);font-style:italic;font-size:1.05em;color:var(--ink)}
.prose h2{font-family:var(--display);font-weight:400;font-size:48px;line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:2.4em 0 .6em;scroll-margin-top:96px}
.prose h2 em{font-style:italic;color:var(--accent);font-size:1em}
.prose h3{font-family:var(--display);font-style:italic;font-weight:400;font-size:30px;line-height:1.15;color:var(--ink);margin:2em 0 .4em;letter-spacing:-.01em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:32px;margin-bottom:.6em}
.prose ul li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:1px;background:var(--accent)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.08em;padding-top:.25em}
.prose blockquote,.prose .wp-block-quote{margin:2.2em 0;padding:0 0 0 28px;border-left:2px solid var(--accent);font-family:var(--display);font-style:italic;font-weight:400;font-size:30px;line-height:1.4;color:var(--ink)}
.prose blockquote cite,.prose .wp-block-quote cite{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-style:normal}
.prose pre,.prose .wp-block-code{margin:2em 0;padding:24px 26px;background:var(--bg-2);border:1px solid var(--rule);border-radius:6px;font-family:var(--mono);font-size:14px;line-height:1.6;color:#D4DAE6;overflow-x:auto;position:relative}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-2);padding:2px 7px;border-radius:3px;color:var(--accent);border:1px solid var(--rule)}
.prose pre code{background:transparent;padding:0;color:inherit;border:0;font-size:14px}
.prose figure,.prose .wp-block-image{margin:2.4em 0}
.prose figure img{width:100%;height:auto;border-radius:4px;filter:saturate(.92)}
.prose figure figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:12px;display:flex;justify-content:space-between;gap:18px}
.prose hr,.prose .wp-block-separator{border:0;height:1px;background:var(--rule);margin:3em 0;position:relative}
.prose hr::after,.prose .wp-block-separator::after{content:"§";position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:var(--bg);padding:0 18px;color:var(--accent);font-family:var(--display);font-style:italic;font-size:22px}
.prose .callout,.prose .wp-block-group.is-style-callout{margin:2.2em 0;padding:24px 28px;background:linear-gradient(135deg, #172841AA, #101D3488);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:4px;font-family:var(--display);font-size:20px;line-height:1.45;color:var(--ink);font-style:italic}
.prose .callout .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-style:normal}
.prose .wp-block-image figcaption,.prose figcaption.wp-element-caption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:12px;text-align:left}
.prose{overflow-wrap:break-word}
.prose iframe,.prose video,.prose embed,.prose object{max-width:100%;display:block}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.prose figure[style*="width"]{max-width:100%!important;height:auto}
.prose figure img{max-width:100%;height:auto}
.prose .wp-caption{max-width:100%!important}
.prose .wp-block-embed{margin:2.4em 0}
.prose .wp-block-embed__wrapper{position:relative;width:100%}
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%}
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper::before{content:"";display:block;padding-top:56.25%}
.prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before{padding-top:75%}
.prose .wp-embed-aspect-1-1 .wp-block-embed__wrapper::before{padding-top:100%}
.prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper::before{padding-top:177.78%}
.prose .wp-embed-aspect-1-2 .wp-block-embed__wrapper::before{padding-top:200%}

.eof{padding:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.eof .tags{display:flex;gap:8px;flex-wrap:wrap}
.eof .tags a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);transition:all .3s}
.eof .tags a:hover{border-color:var(--accent);color:var(--accent)}
.eof .share2{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.eof .share2 a{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);transition:all .3s}
.eof .share2 a:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}

.author{margin:48px 0;padding:32px;background:linear-gradient(135deg, #172841AA, #101D3488);border:1px solid var(--rule);border-radius:6px;display:grid;grid-template-columns:88px 1fr auto;gap:24px;align-items:center}
.author > img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.author .meta b{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:26px;color:var(--ink);letter-spacing:-.005em;margin-bottom:6px}
.author .meta p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5;max-width:60ch}
.author .meta .sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.author .links{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.author .links a{color:var(--ink-2)}.author .links a:hover{color:var(--accent)}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0}
.pn a{display:flex;flex-direction:column;padding:24px;border:1px solid var(--rule);border-radius:6px;transition:all .3s;min-height:130px;justify-content:space-between}
.pn a:hover{border-color:var(--accent);background:#17284155}
.pn a span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.pn a b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15;color:var(--ink);letter-spacing:-.005em;margin-top:10px}
.pn a.next{text-align:right;align-items:flex-end}

.related{padding:32px 0 0;border-top:1px solid var(--rule);margin-top:24px}
.related h3{font-family:var(--display);font-weight:400;font-size:36px;line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0 0 32px}
.related h3 em{font-style:italic;color:var(--accent)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* ============ CATEGORY / ARCHIVE ============ */
.cat-hero{padding:24px 0 40px;border-bottom:1px solid var(--rule);position:relative}
.cat-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cat-kicker .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cat-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,11vw,180px);line-height:.95;letter-spacing:-.03em;margin:0 0 24px;display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.cat-hero h1 em{font-style:italic;color:var(--accent)}
.cat-hero h1 .ampn{font-family:var(--mono);font-size:14px;letter-spacing:.22em;color:var(--ink-2);font-weight:500;align-self:flex-start;padding-top:1.4em;text-transform:uppercase}
.cat-dek{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.4;color:var(--ink);max-width:62ch;margin:0 0 32px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#0B142680}
.stats .c{padding:18px 22px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.stats .c:last-child{border-right:0}
.stats .c span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.stats .c b{font-family:var(--display);font-style:italic;font-weight:400;font-size:22px;letter-spacing:-.005em;color:var(--ink)}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:32px 0 24px;border-bottom:1px solid var(--rule);gap:24px;flex-wrap:wrap;margin-top:40px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);transition:all .3s}
.chips a:hover,.chips a.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.pager{display:flex;justify-content:space-between;align-items:center;padding:32px 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:24px;flex-wrap:wrap;gap:16px}
.pager .pages{display:flex;gap:6px;align-items:center}
.pager .pages a,.pager .pages span{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:50%;color:var(--ink-2);transition:all .3s;text-decoration:none}
.pager .pages a:hover{border-color:var(--accent);color:var(--accent)}
.pager .pages .current{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.pager .pages .dots{border:0;width:auto;color:var(--ink-2)}
.pager .step{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);transition:all .3s}
.pager .step:hover{border-color:var(--accent);color:var(--accent)}
.siblings{padding:48px 0;border-top:1px solid var(--rule)}
.siblings h3{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:-.02em;color:var(--ink);margin:0 0 24px}
.siblings h3 em{font-style:italic;color:var(--accent)}
.sib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sib{display:flex;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid var(--rule);border-radius:6px;min-height:140px;transition:all .3s}
.sib:hover{border-color:var(--accent);background:#17284155}
.sib b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink);letter-spacing:-.005em}
.sib b em{font-style:italic;color:var(--accent)}
.sib span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ============ NEWSLETTER & FOOTER ============ */
.news{margin:48px 0;padding:48px;background:linear-gradient(135deg, #172841, #101D34);border:1px solid var(--rule);border-radius:6px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.news h3{font-family:var(--display);font-weight:400;font-size:38px;line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px}
.news h3 em{font-style:italic;color:var(--accent)}
.news p{margin:0;color:var(--ink-2);max-width:42ch;font-size:15px}
.news form{display:flex;gap:0;border-bottom:1px solid var(--ink)}
.news input{flex:1;background:transparent;border:0;padding:14px 0;font-family:var(--display);font-style:italic;font-size:20px;color:var(--ink);outline:none}
.news input::placeholder{color:var(--ink-2)}
.news button{background:var(--accent);color:var(--bg);border:0;padding:0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:3px;transition:background .3s}
.news button:hover{background:var(--ink)}

footer.site{padding:60px 40px 36px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;max-width:1440px;margin:0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--rule)}
@media(max-width:720px){footer.site{padding:60px 20px 36px}}
footer.site h4{font-family:var(--display);font-style:italic;font-weight:400;font-size:18px;text-transform:none;letter-spacing:-.005em;color:var(--ink);margin:0 0 14px}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
footer.site .desc{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-2);max-width:36ch;text-transform:none;letter-spacing:0;line-height:1.5}
footer.site a:hover{color:var(--accent)}
.copyright{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:20px;margin-top:16px;flex-wrap:wrap;gap:8px}

/* Reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1s ease, transform 1s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}

/* Mobile menu toggle */
.menu-toggle{display:none;background:transparent;border:0;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px 0}

@media (max-width: 980px){
  nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--rule);padding:20px 40px}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;gap:18px}
  .bar{grid-template-columns:auto 1fr auto}
  .menu-toggle{display:inline-block}
  .callouts,.stats{grid-template-columns:repeat(2,1fr)}
  .callouts .c,.stats .c{border-right:0;border-bottom:1px solid var(--rule)}
  .callouts .c:nth-child(odd),.stats .c:nth-child(odd){border-right:1px solid var(--rule)}
  .about{grid-template-columns:1fr;gap:48px}
  .gallery{column-count:2}
  .notes{grid-template-columns:1fr}
  article.note,.note.feature{grid-column:1/-1;flex-direction:column}
  .note.feature .thumb{aspect-ratio:4/3}
  .proj{grid-template-columns:40px 1fr;gap:18px}
  .proj .desc{grid-column:1/3}
  .contact{grid-template-columns:1fr}
  footer.site{grid-template-columns:1fr 1fr}
  .body-wrap{grid-template-columns:1fr;gap:40px}
  .toc{position:static;border-bottom:1px solid var(--rule);padding-bottom:24px}
  .art-meta{grid-template-columns:1fr;gap:16px}
  .art-meta .facts,.art-meta .share{justify-content:flex-start}
  .author{grid-template-columns:1fr;text-align:left}
  .author .links{flex-direction:row;flex-wrap:wrap}
  .pn{grid-template-columns:1fr}
  .pn a.next{text-align:left;align-items:flex-start}
  .related-grid{grid-template-columns:1fr}
  .sib-grid{grid-template-columns:1fr 1fr}
  .news{grid-template-columns:1fr;padding:32px}
  .toolbar{flex-direction:column;align-items:flex-start}
  .hero{padding:0 20px 40px}
  .hero .inner{padding-top:32px}
  .hero .kicker-row{margin-bottom:24px;gap:8px}
}
@media (max-width: 540px){
  .gallery{column-count:1}
  .sib-grid{grid-template-columns:1fr}
  footer.site{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero h1 .line span{transform:none}
}

/* ============ TOOLS ARCHIVE ============ */
.tools-seg{display:inline-flex;gap:0;margin:24px 0 0;padding:4px;border:1px solid var(--rule);border-radius:999px;background:#0B142680}
.tools-seg .seg{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s}
.tools-seg .seg em{font-style:normal;opacity:.6}
.tools-seg .seg:hover{color:var(--ink)}
.tools-seg .seg.on{background:var(--ink);color:var(--bg)}
.tools-seg .seg.on em{opacity:.7}
.tools-seg .seg .gh,.tools-seg .seg .vesper-gh-icon{display:inline-flex;align-items:center}

.tools-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 32px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.tools-bar .chips{display:flex;gap:8px;flex-wrap:wrap}
.tools-bar .chip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:all .2s}
.tools-bar .chip em{font-style:normal;opacity:.6;margin-left:4px}
.tools-bar .chip:hover{color:var(--ink);border-color:var(--ink-2)}
.tools-bar .chip.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.tools-bar .chip.on em{opacity:.8}
.tools-search input{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 14px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink);min-width:200px;transition:border-color .2s}
.tools-search input:focus{outline:none;border-color:var(--accent)}
.tools-search input::placeholder{color:var(--ink-2);text-transform:uppercase;letter-spacing:.14em;font-size:11px}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:24px 0 64px}
.tool-card{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--rule);border-radius:6px;background:#0B142680;transition:border-color .2s,transform .2s,background .2s;min-height:160px}
.tool-card:hover{border-color:var(--accent);background:#172841A8;transform:translateY(-2px)}
.tool-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tool-head h3{font-family:var(--display);font-style:italic;font-size:24px;line-height:1.15;margin:0;color:var(--ink);font-weight:400;display:flex;align-items:baseline;gap:8px}
.tool-gh{display:inline-flex;align-items:center;color:var(--ink-2);transition:color .2s;transform:translateY(2px)}
.tool-card.is-repo:hover .tool-gh{color:var(--accent)}
.tool-ext{font-family:var(--mono);font-size:14px;color:var(--ink-2);transition:color .2s,transform .2s}
.tool-card:hover .tool-ext{color:var(--accent);transform:translate(2px,-2px)}
.tool-tag{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0;flex:1}
.tool-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--rule)}
.tool-cats{display:flex;gap:6px;flex-wrap:wrap}
.tool-cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:3px 8px;border:1px solid var(--rule);border-radius:999px}
.tool-host{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
.tools-empty{font-family:var(--display);font-style:italic;font-size:24px;color:var(--ink-2);text-align:center;padding:48px 0}
@media(max-width:540px){
  .tools-bar{flex-direction:column;align-items:stretch}
  .tools-search input{width:100%}
  .tools-grid{grid-template-columns:1fr}
}

/* WP core utility classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin:0 auto 1em}
.alignwide{margin-left:-80px;margin-right:-80px;max-width:none;width:auto}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;width:100vw}
.sticky{}
.gallery-caption,.bypostauthor{}
.wp-caption{max-width:100%}
.wp-caption-text{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
@media(max-width:980px){.alignwide{margin-left:0;margin-right:0}}

/* ============ PHOTOGRAPH SINGLE / SERIES / ARCHIVE ============ */
.lead-wrap{margin:0 -40px;position:relative;overflow:hidden}
@media(max-width:720px){.lead-wrap{margin:0 -20px}}
.lead{position:relative;display:flex;justify-content:center;align-items:center;min-height:60vh;max-height:90vh;overflow:hidden;background:#070D1C}
.lead > img,.lead .wp-post-image{max-width:100%;max-height:90vh;width:auto;height:auto;object-fit:contain;filter:contrast(1.05) saturate(.92);will-change:transform}
.lead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B142666 0%,transparent 28%,transparent 58%,#0B1426EE 100%);pointer-events:none}
.frame-mark{position:absolute;top:30px;left:60px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:10px;text-shadow:0 1px 6px #00000099}
.frame-mark .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media(max-width:720px){.frame-mark{left:20px;top:20px}}
.lead-title{position:absolute;left:0;right:0;bottom:60px;z-index:3;padding:0 60px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;color:#fff;flex-wrap:wrap}
@media(max-width:720px){.lead-title{padding:0 20px;bottom:32px}}
.lead-title h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.5vw,96px);line-height:.98;letter-spacing:-.025em;margin:0;color:#fff;text-shadow:0 2px 20px #00000080;max-width:18ch}
.lead-title h1 em{font-style:italic;color:var(--accent)}
.lead-title .exif{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#FFFEF8CC;display:flex;flex-direction:column;gap:6px;text-align:right;text-shadow:0 1px 6px #00000099}
.lead-title .exif b{font-family:var(--display);font-style:italic;font-weight:400;font-size:20px;color:#fff;letter-spacing:-.005em;text-transform:none}

.cap-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#0B142680;margin-top:32px}
.cap-strip .c{padding:18px 22px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;min-width:0}
.cap-strip .c:last-child{border-right:0}
.cap-strip .c span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.cap-strip .c b{font-family:var(--display);font-style:italic;font-weight:400;font-size:18px;letter-spacing:-.005em;color:var(--ink);overflow-wrap:break-word}

.essay{display:grid;grid-template-columns:1fr 280px;gap:80px;padding:60px 0 32px;align-items:start}
.essay > *{min-width:0}
.essay .prose{max-width:64ch}
.essay-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:24px}
.essay-side .block{padding:20px 22px;border:1px solid var(--rule);border-radius:6px;background:linear-gradient(135deg,#172841AA,#101D3466)}
.essay-side .block h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.essay-side .block > a{display:block;font-family:var(--display);font-style:italic;font-size:20px;color:var(--ink);letter-spacing:-.005em;padding:6px 0;border:0;background:transparent;text-decoration:none;transition:color .25s}
.essay-side .block > a:hover{color:var(--accent)}
.essay-side .block > a.cta{padding:6px 0;border:0!important;background:transparent!important;color:var(--ink)!important;border-radius:0;text-transform:none;font-family:var(--display);font-style:italic;font-size:20px;letter-spacing:-.005em}
.essay-side .block > a.cta:hover{color:var(--accent)!important;background:transparent!important}
.essay-side .row{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:8px 0;align-items:baseline}
.essay-side .row + .row{border-top:1px solid var(--rule)}
.essay-side .row span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.essay-side .row b{font-family:var(--display);font-style:italic;font-weight:400;font-size:17px;color:var(--ink);letter-spacing:-.005em;line-height:1.25;overflow-wrap:break-word;min-width:0}
.essay-side .tags{display:flex;flex-wrap:wrap;gap:6px}
.essay-side .tags span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)}
.essay-side .map{aspect-ratio:1/1;background:linear-gradient(135deg,#172841,#0B1426);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden}
.essay-side .map::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 50% 50%,var(--accent) 2px,transparent 3px),repeating-linear-gradient(90deg,#F4ECD80A 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,#F4ECD80A 0 1px,transparent 1px 40px);opacity:.7}
.essay-side .map span{position:relative;z-index:2;background:#0B1426CC;padding:4px 10px;border-radius:999px;border:1px solid var(--rule)}

.frame-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0 80px}
.frame-nav > a{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px;border:1px solid var(--rule);border-radius:6px;transition:border-color .3s,background .3s;align-items:center}
.frame-nav > a:hover{border-color:var(--accent);background:#17284155}
.frame-nav > a img{width:120px;height:90px;object-fit:cover;border-radius:3px;filter:saturate(.9) brightness(.92)}
.frame-nav .meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.frame-nav .meta span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.frame-nav .meta b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;color:var(--ink);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis}
.frame-nav .meta b em{font-style:italic;color:var(--accent)}
.frame-nav > a.next{grid-template-columns:1fr 120px;text-align:right}
.frame-nav > a.next .meta{order:-1;align-items:flex-end}

/* Contact sheet + plate styles (series essay template) */
.frames{padding:32px 0;margin:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.frames .k{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);padding-bottom:14px;border-bottom:1px solid var(--rule);flex-wrap:wrap;gap:8px}
.frames .k .num{color:var(--accent)}
.frames .k .mid{color:var(--ink)}
.contact-sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.contact-sheet figure{margin:0;position:relative;overflow:hidden;border-radius:3px;aspect-ratio:1/1;background:var(--bg-2)}
.contact-sheet figure a{display:block;width:100%;height:100%}
.contact-sheet figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.85) brightness(.85)}
.contact-sheet figure:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}
.contact-sheet figure .num{position:absolute;top:6px;left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#0B142699;padding:2px 6px;border-radius:2px;z-index:2}
.plate-wide{margin:64px -40px;position:relative}
@media(max-width:720px){.plate-wide{margin:48px -20px}}
.plate-wide img{width:100%;height:auto;display:block;filter:saturate(.92)}
.plate-wide figcaption{display:flex;justify-content:space-between;padding:14px 60px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);gap:18px;flex-wrap:wrap}
@media(max-width:720px){.plate-wide figcaption{padding:14px 20px 0}}
.plate-wide figcaption em{font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink);letter-spacing:0;text-transform:none}
.plate-inline{margin:2.4em 0;display:grid;grid-template-columns:1fr;gap:14px}
.plate-inline figure{margin:0;position:relative;overflow:hidden;border-radius:4px}
.plate-inline img{width:100%;height:auto;display:block;filter:saturate(.9) brightness(.92)}
.plate-inline figcaption{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);gap:18px;padding-top:4px}
.plate-inline figcaption em{font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink);letter-spacing:0;text-transform:none}
.prints{margin:48px 0;padding:48px;background:linear-gradient(135deg,#172841,#101D34);border:1px solid var(--rule);border-radius:6px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.prints h3{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px}
.prints h3 em{font-style:italic;color:var(--accent)}
.prints p{margin:0;color:var(--ink-2);max-width:42ch;font-size:15px}
.prints .cta-lg{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:18px 26px;background:var(--accent);color:var(--bg)!important;border-radius:3px;border:0;cursor:pointer;display:inline-block;transition:background .3s;justify-self:start}
.prints .cta-lg:hover{background:var(--ink)}

@media(max-width:980px){
  .cap-strip{grid-template-columns:repeat(2,1fr)}
  .cap-strip .c{border-bottom:1px solid var(--rule)}
  .cap-strip .c:nth-child(odd){border-right:1px solid var(--rule)}
  .cap-strip .c:nth-child(even){border-right:0}
  .cap-strip .c:nth-last-child(-n+2){border-bottom:0}
  .essay{grid-template-columns:1fr;gap:40px;padding:48px 0 24px}
  .essay-side{position:static}
  .contact-sheet{grid-template-columns:repeat(4,1fr)}
  .prints{grid-template-columns:1fr;padding:32px;gap:24px}
  .frame-nav{grid-template-columns:1fr;gap:12px}
  .frame-nav > a,.frame-nav > a.next{grid-template-columns:80px 1fr;text-align:left}
  .frame-nav > a.next .meta{order:0;align-items:flex-start}
  .frame-nav > a img{width:80px;height:60px}
}
@media(max-width:540px){
  .lead{min-height:50vh}
  .lead-title{flex-direction:column;align-items:flex-start}
  .lead-title h1{font-size:40px}
  .lead-title .exif{text-align:left}
  .frame-mark{left:20px;top:20px;font-size:10px}
  .cap-strip{grid-template-columns:1fr}
  .cap-strip .c{border-right:0!important;border-bottom:1px solid var(--rule)}
  .cap-strip .c:last-child{border-bottom:0}
  .contact-sheet{grid-template-columns:repeat(3,1fr)}
}