@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Archivo:wght@400;500;700&display=swap");
:root{--paper:#efece6;--ink:#111;--red:#d62718;--rule:#111;--mute:#5d5a55}
*{box-sizing:border-box;margin:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono,.label{font:500 11px/1.3 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.display{font-family:"Instrument Serif",serif;font-weight:400;letter-spacing:-.02em;line-height:.86}
.wrap{max-width:1600px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
header.top{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--rule)}
header.top>*{padding:14px 16px;border-right:1px solid var(--rule)}
header.top>*:last-child{border-right:0}
header.top a:hover{color:var(--red)}
header.top small{display:block;color:var(--mute);font-family:Archivo;text-transform:none;letter-spacing:0;font-size:12px;margin-top:2px}
.hero{display:grid;grid-template-columns:1fr 3fr;border-bottom:1px solid var(--rule)}
.hero>*{padding:20px 16px 28px}
.hero .id{border-right:1px solid var(--rule)}
.hero h1{font-size:clamp(34px,3.6vw,56px);color:var(--red);font-style:italic;line-height:.95}
.hero p{max-width:760px;font-size:clamp(20px,2.3vw,34px);line-height:1.2;font-family:"Instrument Serif",serif;letter-spacing:-.01em}
.hero .by{margin-top:18px;color:var(--mute)}
@media(max-width:700px){.hero{grid-template-columns:1fr}.hero .id{border-right:0;border-bottom:1px solid var(--rule)}}
.grid{display:grid;grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:520px;background:var(--paper);transition:background .15s}
.card:nth-child(4n){border-right:0}
.card .meta{display:flex;justify-content:space-between;padding:12px 16px}
.card .plate{margin:0 16px;aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.card .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);transition:filter .2s}
.card:hover .plate img{filter:none}
.plate.red{background:var(--red);color:var(--paper)}.plate.ink{background:var(--ink);color:var(--paper)}.plate.paper{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.plate .t{position:relative;font-size:clamp(34px,3.7vw,68px);font-style:italic;overflow-wrap:break-word;hyphens:none}
.plate .band{background:var(--red);color:var(--paper);padding:8px 12px 6px;margin:-14px;width:calc(100% + 28px)}
.card .plate img{object-position:top left}
.plate .no{position:absolute;top:10px;right:14px;font:500 11px "IBM Plex Mono"}
.card h2{font-size:30px;padding:16px 16px 4px;font-weight:400}
.card p.tag{padding:0 16px 20px;color:var(--mute);font-size:14px;flex:1}
.card .go{padding:12px 16px;border-top:1px solid var(--rule)}
.card:hover{background:var(--ink);color:var(--paper)}.card:hover .go{color:var(--red)}.card:hover p.tag{color:#bbb}
footer{display:grid;grid-template-columns:repeat(4,1fr)}
footer>*{padding:24px 16px;border-right:1px solid var(--rule)}footer>*:last-child{border-right:0}
footer a:hover{color:var(--red)}
.back{padding:14px 16px;border-bottom:1px solid var(--rule);display:block}.back:hover{color:var(--red)}
.p-head{display:grid;grid-template-columns:3fr 1fr;border-bottom:1px solid var(--rule)}
.p-head h1{font-size:clamp(60px,11vw,200px);font-style:italic;padding:28px 16px 20px;color:var(--red);overflow-wrap:anywhere}
.p-head .side{border-left:1px solid var(--rule);padding:16px;display:flex;flex-direction:column;gap:14px}
.p-body{display:grid;grid-template-columns:repeat(4,1fr)}
.p-body>section{padding:20px 16px 32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.p-body>section:last-child{border-right:0}
.p-body .lead{grid-column:span 2;font-size:clamp(18px,1.8vw,24px);line-height:1.35}
.p-body .lead .display{font-size:clamp(40px,4.5vw,72px);line-height:.95;display:block;margin-bottom:20px}
.shot{aspect-ratio:16/10;margin-top:24px}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.btn{display:block;border:1px solid var(--ink);padding:12px 14px;margin-top:10px}.btn:hover{background:var(--ink);color:var(--paper)}.btn.red{background:var(--red);border-color:var(--red);color:var(--paper)}.btn.red:hover{background:var(--ink);border-color:var(--ink)}
.posts li{list-style:none;border-top:1px solid var(--rule);padding:12px 0}.posts li:last-child{border-bottom:1px solid var(--rule)}
.posts a{font:400 21px/1.15 "Instrument Serif",serif;display:block;margin-bottom:4px}.posts a:hover{color:var(--red)}
.posts li.feat{background:var(--red);color:var(--paper);margin:0 -16px;padding:12px 16px;border-color:var(--red)}
.posts li.feat a:hover,.posts li.feat .label{color:var(--paper)}
.posts li.feat a:hover{text-decoration:underline}
.tagf{display:inline-block;background:var(--paper);color:var(--red);padding:2px 6px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{border:1px solid var(--ink);padding:3px 8px}
.empty{color:var(--mute)}
.pipeline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--rule)}
.pipeline span{padding:14px 16px;border-right:1px solid var(--rule)}.pipeline span:last-child{border-right:0;background:var(--red);color:var(--paper)}
.details{display:grid;grid-template-columns:repeat(2,1fr)}
.details section{padding:24px 16px 36px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.details section:nth-child(2n){border-right:0}
.details .label{color:var(--red);margin-bottom:14px}
.details p{font-size:17px;line-height:1.55;max-width:60ch}
@media(max-width:1000px){.pipeline{grid-auto-flow:row}.pipeline span{border-right:0;border-bottom:1px solid var(--rule)}}
@media(max-width:700px){.details{grid-template-columns:1fr}.details section{border-right:0}}
@media(max-width:1000px){.grid,footer,header.top,.p-body{grid-template-columns:repeat(2,1fr)}
.card:nth-child(4n){border-right:1px solid var(--rule)}.card:nth-child(2n){border-right:0}
.p-body>section:nth-child(2n){border-right:0}.p-body .lead{grid-column:span 2}
header.top>*:nth-child(2),header.top>*:nth-child(4){border-right:0}header.top>*{border-bottom:1px solid var(--rule)}header.top>*:nth-child(5){grid-column:span 2}}
@media(max-width:560px){.grid,footer,header.top,.p-body,.p-head{grid-template-columns:1fr}
.card,.card:nth-child(n){border-right:0;min-height:0}header.top>*,footer>*,.p-body>section{border-right:0}
.p-head .side{border-left:0;border-top:1px solid var(--rule)}.p-body .lead{grid-column:auto}}