:root{--orange:#fa5c08;--ink:#292929;--gutter:clamp(16px,4vw,48px)}
html{scrollbar-gutter:stable}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:17px/1.7 'DIN Next',Arial,sans-serif;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-underline-offset:4px}a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
header{border-top:5px solid var(--orange);border-bottom:1px solid #eee;padding:8px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* The scene hides its scrollbar; keep the same viewport-relative right inset
   on standalone pages with a visible or reserved scrollbar. */
header{padding-right:max(12px,calc(var(--gutter) - (100vw - 100%)))}
.brand,.brand svg{display:block;width:162px;height:44px}nav{display:flex;gap:24px;flex-wrap:wrap}header a{text-decoration:none}header nav a:hover{color:var(--orange)}
main{flex:1;padding:0 var(--gutter) 64px;min-width:0}.titlebar{display:flex;gap:clamp(18px,3vw,36px);align-items:center;padding:20px 0 24px;border-bottom:1px solid #eee}.titlebar p{margin:0;color:#666}
.back{display:inline-flex;gap:10px;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:12px;min-height:44px;padding:8px 16px;text-decoration:none;font-size:15px}.back span{color:var(--orange);font-size:24px;font-weight:bold;line-height:1}
article{width:100%;max-width:none;margin:0;min-width:0;overflow-wrap:anywhere}.article-heading{padding:32px 0 28px}h1{font-size:clamp(1.75rem,5.6vw,4rem);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:12px 0 24px}
.lead{font-size:clamp(18px,2vw,24px);color:#555;max-width:70ch;margin:0}.meta{display:flex;gap:20px;flex-wrap:wrap;color:#666;font-size:14px}
.cover{display:block;width:100%;max-height:540px;object-fit:cover;border-radius:18px;margin-bottom:36px}.prose{max-width:80ch}.prose p{margin:0 0 20px}.prose h2{font-size:28px;margin:36px 0 14px}.prose a,.related a{color:#d94b00}.prose blockquote{border-left:3px solid var(--orange);margin:24px 0;padding-left:24px;color:#666}
.project-data{display:flex;flex-wrap:wrap;gap:24px 60px;margin:0 0 32px}.project-data dt{font-size:13px;color:#666}.project-data dd{margin:0}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.tags span{font-size:14px;border:1px solid #e5e5e5;border-radius:30px;padding:4px 14px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin:36px 0}.gallery figure{margin:0}.gallery img{width:100%;display:block;border-radius:12px}.gallery figcaption{font-size:14px;color:#666;padding:8px 0}
.related{margin-top:32px}footer{border-top:3px solid var(--orange);padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:14px;color:#555}footer p{margin:0}.heart{width:14px;height:14px;color:var(--orange);vertical-align:-1px}.preview{background:#303030;color:white;text-align:center;font-size:13px;padding:8px}
.titlebar h1{flex:1;min-width:0;margin:0;font-size:clamp(1.75rem,5.6vw,4rem);line-height:1.1;overflow-wrap:anywhere}
.titlebar~article>.article-heading{padding:32px 0 28px}.article-heading .meta:has(+.lead){margin-bottom:12px}
.titlebar~article>.cover:first-child,.titlebar~article>.prose:first-child{margin-top:24px}
@media(max-width:620px){.titlebar{gap:18px;padding-bottom:20px}header{padding-block:6px}.brand,.brand svg{width:147.27px;height:40px}}
@media(max-width:620px){header{gap:12px}header nav{gap:18px;font-size:15px}.article-heading{padding-top:28px}footer nav{gap:12px 18px}.project-data{gap:16px 28px}.cover{border-radius:12px}}
.blog-author{display:flex;align-items:center;gap:14px;margin-top:28px;padding:20px 0;border-top:1px solid #eee}.blog-author img,.blog-author-placeholder{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}.blog-author-placeholder{display:grid;place-items:center;background:#fff4ec;color:#fa5c08}.blog-author small,.blog-author strong{display:block}.blog-author small{font-size:14px;color:#555}.blog-author strong{font-size:18px;font-weight:500;color:#fa5c08}