@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Special Elite';src:url(/fonts/special-elite-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Courier Prime';src:url(/fonts/courier-prime-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/fonts/inter-tight-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ground:#F4EEE6;
  --raise:#FBF8F3;
  --ink:#2A231D;
  --ink-soft:#51463C;
  --muted:#857868;
  --hair:#E2D8CB;
  --hair-soft:#EAE1D5;
  --accent-ink:#8C4A2F;
  --clay:#8C4A2F;
  --clay-soft:#D9A27E;
  --sage:#A9B48A;
  --olive:#5F6D42;
  --honey:#F0C98E;
  --t-clay:#EBD6C6;
  --t-sage:#DCE0CE;
  --t-honey:#F3E3C6;
  --t-sand:#E9E1D5;
  --night:#241F1A;
  --on-night:#F4EDE3;
  --glass:rgba(255,255,255,.5);
  --glass-line:rgba(255,255,255,.72);
  --orb-o:.5;
  --accent:var(--clay);
  --focus:#8C4A2F;
  --shadow:0 24px 60px rgba(80,50,30,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1B1815; --raise:#24201B; --ink:#F2EBE0; --ink-soft:#D2C7B8; --muted:#A89A89; --hair:#3A332B; --hair-soft:#2E2821; --accent-ink:#E6A77C;
    --clay:#E6A77C; --t-clay:#3A2A21; --t-sage:#2A2E22; --t-honey:#372E1E; --t-sand:#2C2721;
    --night:#F2EBE0; --on-night:#1B1815; --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.12);
    --orb-o:.35; --focus:#E6A77C; --shadow:0 24px 60px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#1B1815; --raise:#24201B; --ink:#F2EBE0; --ink-soft:#D2C7B8; --muted:#A89A89; --hair:#3A332B; --hair-soft:#2E2821; --accent-ink:#E6A77C;
  --clay:#E6A77C; --t-clay:#3A2A21; --t-sage:#2A2E22; --t-honey:#372E1E; --t-sand:#2C2721;
  --night:#F2EBE0; --on-night:#1B1815; --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.12);
  --orb-o:.35; --focus:#E6A77C; --shadow:0 24px 60px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400; font-size:17px; line-height:1.6; letter-spacing:-.005em;
  padding-inline:20px; padding-block:0 64px; position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:40rem;margin:0 auto;position:relative}
.wrap.wide{max-width:72rem}
img{max-width:100%;height:auto;display:block}

/* the glow behind the top of every page */
.aura{position:absolute; inset:0 0 auto 0; height:900px; overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent); mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.aura i{position:absolute; border-radius:50%; filter:blur(120px); opacity:var(--orb-o)}
.aura i:nth-child(1){width:620px;height:620px;background:#EBCBB6;right:-80px;top:-160px}
.aura i:nth-child(2){width:480px;height:480px;background:var(--sage);right:-160px;top:320px}
.aura i:nth-child(3){width:420px;height:420px;background:var(--honey);left:-200px;top:380px;opacity:calc(var(--orb-o)*.8)}
.aura::after{content:"";position:absolute;inset:0;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.aura.small{height:560px}
.aura.small i:nth-child(2),.aura.small i:nth-child(3){display:none}
.wrap > *{position:relative; z-index:1}

/* masthead */
.masthead{padding-block:26px 0; display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap}
.wordmark{font-weight:620; font-size:18px; letter-spacing:-.025em; color:var(--ink); text-decoration:none; text-transform:lowercase}
.masthead nav{display:flex; gap:4px; padding:5px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.masthead nav a{font-size:14.5px; color:var(--ink); text-decoration:none; padding:8px 16px; border-radius:999px; transition:background .18s ease}
.masthead nav a:hover{background:var(--glass-line)}
.masthead nav a[aria-current="page"]{background:var(--night); color:var(--on-night)}

/* type */
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif; font-weight:400; color:var(--ink)}
h1{font-size:clamp(52px,10vw,112px); line-height:.94; letter-spacing:-.025em; text-wrap:balance; margin:56px 0 0}
h1 em, h2 em{font-style:italic; color:var(--clay)}
h2{font-size:clamp(36px,5.6vw,56px); line-height:1; letter-spacing:-.018em; text-wrap:balance; margin:0 0 16px}
h3{font-size:28px; line-height:1.05; letter-spacing:-.01em; margin:0 0 8px}
p{margin:0 0 16px; max-width:38rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}
.lede{font-size:19px; color:var(--ink-soft); margin-top:22px}
.fine{font-size:14px; color:var(--muted); margin-top:14px}
.kicker{font-size:14px; color:var(--ink-soft); font-weight:500; margin-top:48px}
.kicker + h1{margin-top:14px}
.section{padding-block:56px}

/* buttons, links */
a.cta{display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:15.5px; font-weight:500; text-decoration:none;
  background:var(--night); color:var(--on-night); padding:15px 26px; border-radius:999px; margin-top:8px; transition:transform .18s ease,opacity .18s ease}
a.cta:hover{transform:translateY(-1px); opacity:.92}
a.cta.light{background:var(--clay-soft); color:#2A231D}
a.cta.quiet{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
a.inline{color:var(--ink); text-decoration:underline; text-decoration-color:var(--clay-soft); text-decoration-thickness:1.5px; text-underline-offset:3px}
a.inline:hover{color:var(--clay)}

/* hero */
.hero{display:grid; grid-template-columns:1fr; gap:44px; align-items:center; padding-block:0 40px}
.hero .sub{font-size:19px; color:var(--ink-soft); margin-top:28px; max-width:28rem}
.hero-art{position:relative; width:min(340px,78%); margin-inline:auto}
.hero-art .pin{border-radius:26px; overflow:hidden; box-shadow:var(--shadow); transform:rotate(3deg)}
.hero-art .pin .qcard{border-radius:26px}
.glass-card{position:absolute; left:-18%; bottom:-7%; width:62%; padding:16px 18px; border-radius:22px; font-size:14px; line-height:1.4; color:var(--ink);
  background:var(--glass); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.glass-card b{display:block; font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:28px; line-height:1; margin-bottom:6px}
@media (min-width:880px){.hero{grid-template-columns:1.35fr 1fr; gap:48px} .hero h1{margin-top:88px}}

/* bento */
.bento{display:grid; grid-template-columns:1fr; gap:14px; margin-top:26px}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.bento{grid-template-columns:repeat(4,1fr)} .bento .span2{grid-column:span 2}}
.tile{border-radius:26px; padding:24px; display:flex; flex-direction:column; gap:14px; min-height:220px; background:var(--t-sand)}
.tile .k{font-size:13px; font-weight:500; color:var(--ink-soft)}
.tile h3{margin:0}
.tile ul{list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.tile ul a{color:var(--ink); text-decoration:none; font-size:15.5px; display:flex; justify-content:space-between; gap:10px; padding-block:3px; border-bottom:1px solid rgba(42,35,29,.1)}
.tile ul a::after{content:"→"; opacity:.4; transition:transform .18s ease,opacity .18s ease}
.tile ul a:hover::after{opacity:1; transform:translateX(3px)}
.tile.night{background:var(--night); color:var(--on-night)}
.tile.night h3{color:var(--on-night); font-size:clamp(34px,4vw,46px)}
.tile.night .k, .tile.night p{color:var(--on-night); opacity:.75}
.tile.night .cta{margin-top:auto; align-self:flex-start}
.tile.clay{background:var(--t-clay)} .tile.sage{background:var(--t-sage)} .tile.honey{background:var(--t-honey)}
.tile.photo{padding:0; overflow:hidden}
@media (max-width:979px){.tile.photo{display:none}}
.tile.photo img{width:100%; height:100%; object-fit:cover}

/* posts */
.posts{display:grid; grid-template-columns:1fr; gap:32px 20px; margin-top:28px}
@media (min-width:560px){.posts{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.posts.three{grid-template-columns:1fr 1fr 1fr}}
.post-card{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit}
.post-card .frame{border-radius:24px; overflow:hidden; background:var(--raise); transition:transform .25s ease,box-shadow .25s ease}
.post-card .frame .qcard{border-radius:24px}
.post-card:hover .frame{transform:translateY(-4px); box-shadow:var(--shadow)}
.post-card h2, .post-card h3{font-size:28px; line-height:1.05; margin:0}
.post-card:hover h2, .post-card:hover h3{color:var(--clay)}
.post-card .by{font-size:14px; color:var(--muted); margin:0}

/* single post */
.post-hero{display:grid; grid-template-columns:1fr; gap:28px; margin-top:32px; align-items:end}
.post-hero .frame{max-width:min(300px,80%); border-radius:24px; overflow:hidden; box-shadow:var(--shadow)}
@media (min-width:640px){.post-hero{grid-template-columns:300px 1fr; gap:34px} .post-hero .frame{max-width:none; width:300px}}
.attrib{font-family:'Instrument Serif',Georgia,serif; font-size:28px; line-height:1.1; color:var(--ink); margin:0}
.attrib span{display:block; font-family:'Inter Tight',sans-serif; color:var(--muted); font-size:14px; margin-top:6px}
.source{font-size:14px; color:var(--muted)}
.next{background:var(--night); color:var(--on-night); border-radius:26px; padding:28px}
.next p{max-width:none; color:var(--on-night)}
.next .cta{background:var(--clay-soft); color:#2A231D}

/* role pages keep their old class names */
.section h2 + p, .section p{color:var(--ink)}
.origin summary::after{color:var(--clay)!important}

footer{margin-top:56px; padding-top:24px; border-top:1px solid var(--hair); font-size:14px; color:var(--muted)}
footer .row{display:flex; justify-content:space-between; gap:12px 20px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--ink)}
footer nav{display:flex; gap:18px; flex-wrap:wrap}

.bio{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:clamp(26px,3.4vw,34px); line-height:1.2; color:var(--ink); max-width:40rem}

@media (prefers-reduced-motion:reduce){*,*::after{transition:none!important;animation:none!important}}

/* quote cards: the pins, drawn in type instead of images */
.qcard{position:relative; aspect-ratio:4/5; border-radius:24px; padding:11% 10% 9%; display:flex; flex-direction:column; justify-content:center;
  background:#F8F5F0; color:#2E2B27; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(60,50,40,.05)}
.qcard.oat{background:#F1EBE3} .qcard.sage{background:#EAEDE6}
.qcard .q{font-family:'Special Elite','Courier New',monospace; font-size:clamp(17px,1.9vw,22px); line-height:1.42; margin:0; max-width:none}
.qcard.long .q{font-size:clamp(15px,1.6vw,19px)}
.qcard .who{font-family:'Courier Prime','Courier New',monospace; font-size:13px; color:#5B7760; margin:18px 0 0}
.qcard .who span{display:block; color:#8A8378; font-size:11.5px; margin-top:2px}
.qcard .foot{position:absolute; left:10%; right:10%; bottom:6%; font-family:'Courier Prime','Courier New',monospace; font-size:10.5px; color:#8A8378; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero-art .qcard .q{font-size:clamp(19px,2.2vw,24px)}
.post-hero .qcard .q{font-size:19px}
.post-hero .qcard.long .q{font-size:16.5px}
.tile.photo .qcard{height:100%; aspect-ratio:auto; border-radius:26px}