
/* Dev Log preview layer — scoped so the single-screen homepage layout stays intact. */
html:has(body.devlog-page),body.devlog-page{height:auto!important;min-height:100%!important;overflow-y:auto!important}
body.devlog-page{background:radial-gradient(ellipse 68% 60% at 78% 19%,rgba(114,48,16,.10),transparent 55%),linear-gradient(158deg,#050507,#0e1014 45%,#050507);color:#f4f2ef}
.devlog-page .site-header{position:relative;background:#000!important}
.devlog-page .site-nav a[aria-current="page"]{color:#ff8b36}
.devlog-page .site-nav{gap:clamp(13px,2vw,27px)}
.devlog-page .site-header .brand-artwork img{max-width:100%}
.devlog-main{padding-top:50px;padding-bottom:110px}
.dev-crumb{display:flex;gap:12px;align-items:center;color:#9f9ba0;font-size:12px;margin-bottom:42px}
.dev-crumb a:hover{color:#ff933e}
.dev-kicker,.dev-entry-code,.dev-entry-meta{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#ff923b;text-transform:uppercase}
.dev-entry-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:22px;color:#aea7a2}
.dev-entry-num{background:#e66e20;color:#1d1310;border-radius:3px;padding:9px 12px}
.dev-article-title,.dev-page-heading{font-size:clamp(48px,5.4vw,84px);line-height:1.04;letter-spacing:-.6px;margin:0 0 24px;max-width:1080px}
.dev-article-title span,.dev-page-heading span,.dev-article h2 span,.dev-feature-copy h2 span,.dev-endnote h2 span{color:#ff812a}
.dev-article-lead,.dev-deck{font-size:clamp(17px,1.55vw,21px);line-height:1.7;max-width:920px;color:#c9c4c0;margin:0 0 35px}
.dev-article-rule{height:1px;background:linear-gradient(to right,#ff8a2b,#43362f 36%,#27272b 100%);margin:36px 0 50px}
.dev-article h2{font-size:clamp(34px,4vw,55px);line-height:1.08;letter-spacing:.1px;margin:0 0 19px}
.dev-article h3{font-size:31px;line-height:1.13;letter-spacing:.4px;margin:25px 0 18px}
.dev-article p{font-size:16px;line-height:1.9;color:#c8c5c6;margin:0 0 21px}
.dev-article strong{color:#fff5ed}
.dev-video-float{float:left;width:min(56%,650px);margin:11px 35px 21px 0}
.dev-video-frame{position:relative;aspect-ratio:16/9;background:#11151b;overflow:hidden;border:1px solid #62503f;border-radius:8px;box-shadow:0 16px 35px rgba(0,0,0,.40)}
.dev-video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#0b1015}
.dev-video-float figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 15px;padding-top:12px;font-size:11px;line-height:1.5;color:#aaa5a7}
.dev-video-float figcaption strong{font-size:11px;letter-spacing:1.3px;color:#ff9341}
.dev-baseline-list{margin:0 0 23px;padding:0;list-style:none}
.dev-baseline-list li{position:relative;margin:0 0 12px;padding-left:23px;font-size:15px;line-height:1.65;color:#cbc6c1}
.dev-baseline-list li:before{content:'✓';position:absolute;left:0;color:#ff8d32;font-weight:800}
.dev-clear{clear:both}
.dev-challenges{margin-top:62px;padding-top:56px;border-top:1px solid #3b3838}
.dev-section-heading{margin-bottom:23px}
.dev-challenge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:35px 0 0}
.dev-challenge-grid section{background:linear-gradient(133deg,#1b1b20,#111218);padding:28px 30px 23px;border:1px solid #36363d;border-radius:7px}
.dev-challenge-index{display:block;margin-bottom:16px;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#ff8b37}
.dev-challenge-grid h3{font-size:27px;margin:0 0 12px}
.dev-challenge-grid p{font-size:14px;line-height:1.8;margin:0;color:#bcb8bb}
.dev-endnote{margin-top:67px;padding:40px 0 28px;border-top:1px solid #40372e}
.dev-endnote h2{max-width:800px}
.dev-endnote p:not(.dev-kicker){max-width:890px}
.dev-back,.dev-read{color:#ff9b4c;display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.7px}
.dev-back{margin-top:21px}
.dev-back:hover,.dev-read:hover{color:#ffd5a4}
.dev-footer{background:#030304;border-top:1px solid #323237;padding:28px 0}
.dev-footer .wrap{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;color:#89858e;font-size:11px;letter-spacing:.9px}
.dev-archive{min-height:75vh}
.dev-page-heading{margin-top:14px}
.dev-deck{max-width:770px}
.dev-archive-divider{border-top:1px solid #4b3930;border-bottom:1px solid #33353a;display:flex;justify-content:space-between;gap:20px;padding:17px 0;margin:55px 0 27px;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#aba6a5}
.dev-feature-link{display:grid;grid-template-columns:minmax(0,1fr) 1.25fr;background:linear-gradient(125deg,#242029,#15161b);border:1px solid #554136;border-radius:8px;overflow:hidden;min-height:340px}
.dev-feature-link:hover{border-color:#fb8435}
.dev-feature-photo{position:relative;background:#27282c;min-height:340px;overflow:hidden}
.dev-feature-photo img{width:100%;height:100%;object-fit:contain;padding:12px;position:absolute;inset:0}
.dev-feature-photo span{position:absolute;left:18px;top:18px;background:#e77724;color:#17100a;padding:10px 13px;font-size:11px;font-weight:800;letter-spacing:1.3px}
.dev-feature-copy{padding:42px 42px 35px;display:flex;flex-direction:column;align-items:start}
.dev-feature-copy h2{font-size:clamp(31px,3.4vw,50px);line-height:1.06;margin:21px 0}
.dev-feature-copy p:not(.dev-entry-code){line-height:1.8;color:#c5bfc0;font-size:15px}
.dev-feature-copy .dev-read{margin-top:auto}
.dev-archive-note{margin-top:50px;padding:24px 0 0;border-top:1px solid #282b30}
.dev-archive-note p{color:#ada7a9;line-height:1.7;max-width:680px}
.dev-index-card{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center;margin-top:55px;padding:30px;background:#171920;border:1px solid #59422e;border-radius:8px}
.dev-index-card h2{font-size:50px;line-height:1.07;margin:20px 0}
.dev-index-card p{line-height:1.85;color:#c5c0c2;max-width:570px}
.dev-index-card img{width:100%;max-height:370px;object-fit:contain}
@media(max-width:990px){.devlog-page .site-header .nav{gap:10px!important}.devlog-page .site-header .brand-artwork img{height:50px!important;max-height:50px!important}.devlog-page .site-nav{gap:12px;font-size:11px}}
@media(max-width:760px){.devlog-page .site-header .nav{height:72px!important}.devlog-page .menu-button{display:block}.devlog-page .site-nav{display:none;position:absolute;top:71px;left:0;right:0;padding:20px 24px;background:#121317;flex-direction:column;border-bottom:1px solid #444;z-index:20}.devlog-page .site-nav.open{display:flex}.dev-video-float{width:100%;max-width:100%;float:none;margin:20px 0 32px}.devlog-main{padding-top:35px;padding-bottom:70px}.dev-crumb{margin-bottom:33px}.dev-challenge-grid{grid-template-columns:1fr}.dev-feature-link,.dev-index-card{grid-template-columns:1fr}.dev-feature-photo{min-height:300px}.dev-feature-copy{padding:31px 26px}.dev-article-title{font-size:clamp(43px,9vw,65px)}}
@media(max-width:460px){.dev-entry-meta{gap:8px}.dev-article p{font-size:15px}.dev-baseline-list li{font-size:14px}.devlog-main{padding-top:25px}.dev-article h2{font-size:34px}.dev-challenge-grid section{padding:23px 19px}.dev-feature-photo{min-height:250px}}

/* Fix baseline bullet markers: force the list to establish a formatting context
 so each check stays to the RIGHT of the floated video rather than on its left. */
.dev-article .dev-baseline-list{display:flow-root;position:relative;list-style:none;padding:0;margin:0 0 23px}
.dev-article .dev-baseline-list li{display:block;padding-left:26px;position:relative;list-style:none;line-height:1.65}
.dev-article .dev-baseline-list li::before{left:0;right:auto;top:0}
.dev-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px}
.dev-topic-card{min-width:0;display:flex;flex-direction:column;background:linear-gradient(148deg,#171a20,#101114);border:1px solid #474048;border-radius:9px;overflow:hidden;transition:transform .2s,border-color .2s}
.dev-topic-card:hover,.dev-topic-card:focus-visible{transform:translateY(-3px);border-color:#ed8b43}
.topic-card-art{height:201px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at center,#343336,#10151c)}
.topic-card-art img{width:100%;height:100%;object-fit:contain;object-position:center 28%;padding:8px}
.topic-card-art:has(.topic-card-symbol){background:radial-gradient(ellipse at center,#2e2426,#171920 75%)}
.topic-card-symbol{font-size:104px;font-weight:800;line-height:1;color:#c97a3f}
.topic-card-art:after{content:"";position:absolute;inset:18px;border:1px solid rgba(242,144,73,.17);pointer-events:none}
.topic-visual-mark{position:absolute;bottom:27px;right:33px;color:#adabae;letter-spacing:1.1px;font-size:10px;font-weight:700}
.topic-card-info{padding:27px 30px 26px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.topic-card-metadata{display:flex;justify-content:space-between;gap:10px;width:100%;font-weight:800;letter-spacing:1.3px;font-size:10px;color:#ed995d}
.topic-card-metadata span:last-child{color:#a6a0a7}
.topic-card-info h2{font-size:clamp(27px,2.65vw,39px);line-height:1.12;margin:22px 0 14px}
.topic-card-info p{font-size:14px;line-height:1.75;color:#c2bcc0;margin:0 0 25px}
.topic-card-link{margin-top:auto;color:#f6a15f;letter-spacing:.65px;font-weight:800;font-size:12px}
.topic-card-games .topic-card-art{background:radial-gradient(ellipse at center,#312b27,#181d23)}
.topic-card-studio .topic-card-art{background:radial-gradient(ellipse at center,#26303a,#1d1921)}
.topic-card-experiments .topic-card-art{background:radial-gradient(ellipse at center,#322636,#14191f)}
.topic-latest{margin-top:78px}
.topic-latest .dev-archive-divider a{color:#e89c67}
.topic-post-card{display:grid;grid-template-columns:255px minmax(0,1fr);gap:25px;padding:21px;background:linear-gradient(120deg,#241c1c,#15161b);border:1px solid #4f403b;border-radius:9px}
.topic-post-card:hover{border-color:#f7a15c}
.topic-post-img{background:#292d31;min-height:245px}
.topic-post-img img{display:block;width:100%;height:100%;object-fit:contain}
.topic-post-copy{display:flex;align-items:flex-start;flex-direction:column;padding:19px 20px 9px 0}
.topic-post-copy h2{font-size:clamp(27px,3vw,44px);line-height:1.1;margin:13px 0}
.topic-post-copy h2 span{color:#ff812a}
.topic-post-copy p{font-size:14px;line-height:1.8;color:#c6c1c1}
.topic-post-copy .dev-read{margin-top:auto}
.topic-page-kicker{display:flex;align-items:center;gap:18px;letter-spacing:1.5px;font-size:11px;font-weight:700;color:#a9a4a8;margin-bottom:30px}
.topic-empty{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:51px 54px;margin:0 0 25px;border:1px dashed #5a4840;border-radius:9px;background:#18181f}
.topic-empty-icon{font-size:68px;color:#e48d52}
.topic-empty h2{font-size:33px;margin:0 0 13px}
.topic-empty p{max-width:690px;line-height:1.85;color:#bdb8bc}
@media(max-width:760px){
.dev-topics{grid-template-columns:1fr}
.topic-post-card{grid-template-columns:1fr}
.topic-post-img{height:240px}
.topic-post-copy{padding:6px}
.topic-empty{grid-template-columns:1fr;padding:27px}
.topic-empty-icon{font-size:47px}
}
