.article-home-section{padding-top:0}.article-index{padding:70px 0 100px}.page-heading{max-width:800px;margin-bottom:38px}.page-heading h1{margin:0;color:var(--ink, #2e2924);font-size:clamp(2.5rem,7vw,5.8rem);line-height:1.02;letter-spacing:-.055em}.page-heading>p:last-child{max-width:650px;margin:18px 0 0;color:var(--muted, #6f685f);font-size:1.05rem}.article-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px}.article-filters a{padding:8px 13px;color:#7f7064;background:#ffffff80;border:1px solid rgba(46,41,36,.14);border-radius:999px;font-size:.78rem;text-decoration:none}.article-filters a:hover,.article-filters a.active,.article-filters a[aria-current=page]{color:#fffdf9;background:#2e2924;border-color:#2e2924}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.article-card{min-width:0;overflow:hidden;background:#fffdf9;border:1px solid rgba(46,41,36,.14);border-radius:18px;box-shadow:0 14px 35px #4130220f;transition:transform .2s ease,box-shadow .2s ease}.article-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px #4130221f}.article-card>a{display:block;aspect-ratio:16 / 9;overflow:hidden;background:#efe3d3}.article-card>a img{width:100%;height:100%;object-fit:cover}.article-card-body{padding:22px}.article-card-meta{margin:0 0 12px;color:#8d7968;font-size:.74rem;letter-spacing:.02em}.article-card-meta a{color:inherit;text-decoration:none}.article-card h2{margin:0;color:var(--ink, #2e2924);font-size:1.35rem;line-height:1.25}.article-card h2 a{text-decoration:none}.article-card h2 a:hover{color:#b75536}.article-card-body>p:not(.article-card-meta){min-height:3.2em;margin:12px 0 16px;color:#6f685f;font-size:.9rem}.article-tags{display:flex;flex-wrap:wrap;gap:6px}.article-tags a{padding:4px 8px;color:#a35a3a;background:#f9eadf;border-radius:999px;font-size:.7rem;text-decoration:none}.article-source{display:inline-block;margin-top:12px;color:#a35a3a;font-size:.82rem;text-decoration:none}.article-source:hover{color:#b75536;text-decoration:underline;text-underline-offset:.18em}.draft-badge{margin-left:8px;padding:3px 7px;color:#77540e;background:#fff0c8;border-radius:999px;font-size:.68rem}.empty-articles{padding:26px 28px;color:#7b7168;background:#ffffff9e;border:1px dashed rgba(46,41,36,.2);border-radius:14px}.pagination{display:flex;gap:8px;margin-top:34px}.pagination a{min-width:36px;padding:7px 11px;color:#6f685f;border:1px solid rgba(46,41,36,.16);border-radius:999px;text-align:center;text-decoration:none}.pagination a:hover,.pagination a.active,.pagination a[aria-current=page]{color:#fffdf9;background:#2e2924}.article-header{padding-top:64px;padding-bottom:34px}.article-back{display:inline-block;margin-bottom:34px;color:#9a634d;font-size:.84rem;text-decoration:none}.article-category{color:inherit;text-decoration:none}.article-category:hover{color:#b75536;text-decoration:underline;text-underline-offset:.16em}.article-header h1{max-width:920px;margin:0;color:var(--ink, #2e2924);font-size:clamp(2.5rem,7vw,6rem);line-height:1.04;letter-spacing:-.06em}.article-lead{max-width:760px;margin:22px 0 18px;color:#716860;font-size:1.14rem;line-height:1.8}.article-cover{width:min(100%,980px);max-height:520px;margin-top:28px;object-fit:cover;border-radius:18px}.article-layout{display:grid;grid-template-columns:190px minmax(0,720px);justify-content:center;gap:44px;padding-bottom:100px}.article-toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow:auto;padding:14px 0}.article-toc p{margin:0 0 10px;color:#9a634d;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.article-toc nav{display:grid;gap:6px}.article-toc a{color:#8c8176;font-size:.76rem;line-height:1.4;text-decoration:none}.article-toc a:hover{color:#b75536}.article-toc .toc-depth-3{padding-left:10px;font-size:.72rem}.prose{color:#413a34;font-size:1.04rem;line-height:1.95}.prose>:first-child{margin-top:0}.prose h2,.prose h3{color:#2e2924;line-height:1.3;letter-spacing:-.025em;scroll-margin-top:28px}.prose h2{margin:2.2em 0 .7em;font-size:1.65rem}.prose h3{margin:1.8em 0 .5em;font-size:1.25rem}.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose table{margin:1em 0}.prose a{color:#b75536;text-decoration-thickness:.08em;text-underline-offset:.16em}.prose ul,.prose ol{padding-left:1.4em}.prose li+li{margin-top:.35em}.prose blockquote{margin-left:0;padding:8px 22px;color:#756a60;background:#f8ecdf;border-left:4px solid #ef9c6c;border-radius:0 10px 10px 0}.prose code{padding:.12em .35em;color:#93492f;background:#f8ecdf;border-radius:5px;font-size:.88em}.prose pre{overflow-x:auto;padding:18px;color:#f8f0e5;background:#2e2924;border-radius:12px;font-size:.85rem;line-height:1.65}.prose pre code{padding:0;color:inherit;background:transparent}.prose img{max-width:100%;height:auto;border-radius:12px}.prose table{width:100%;border-collapse:collapse;font-size:.9rem}.prose th,.prose td{padding:9px 10px;border-bottom:1px solid rgba(46,41,36,.16);text-align:left}.prose th{color:#6f5c4e}.pagefind-search{max-width:780px;padding:24px;background:#ffffffb3;border:1px solid rgba(46,41,36,.12);border-radius:16px}.pagefind-search label{display:block;margin-bottom:8px;color:#665c53;font-size:.82rem;font-weight:700}.search-row{display:flex;gap:10px}.search-row input{flex:1;min-width:0;padding:12px 14px;background:#fffdf9;border:1px solid rgba(46,41,36,.2);border-radius:10px}.search-result{padding:18px 0;border-bottom:1px solid rgba(46,41,36,.14)}.search-result h2{margin:0;font-size:1.2rem}.search-result h2 a{color:#2e2924;text-decoration:none}.search-result p{margin:7px 0 0;color:#716860;font-size:.9rem}@media(max-width:900px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:minmax(0,720px)}.article-toc{position:static;order:2;max-height:none;padding:0}.article-toc nav{display:flex;flex-wrap:wrap;gap:8px 14px}}@media(max-width:600px){.article-index{padding-top:42px}.article-grid{grid-template-columns:1fr}.article-card-body{padding:18px}.article-header{padding-top:38px}.article-layout{padding-bottom:70px}.prose{font-size:.98rem}.search-row{align-items:stretch;flex-direction:column}}.project-card{color:inherit;text-decoration:none}.project-card .project-note{transition:background .2s ease,color .2s ease,border-color .2s ease}.project-card:hover .project-note{color:var(--paper-light);background:var(--ink);border-color:var(--ink)}.car-visual,.game-visual{position:relative;isolation:isolate}.car-visual:before{content:"";position:absolute;inset:-18px;z-index:-1;background:url(/assets/images/projects/car-fuel-log/overview.jpg) 50% 12% / cover;filter:blur(16px) saturate(.78);opacity:.28;transform:scale(1.08)}.car-visual img,.game-visual img{position:absolute;left:50%;bottom:-30%;width:auto;max-width:none;height:160%;display:block;object-fit:contain;aspect-ratio:auto;border-radius:20px;box-shadow:0 18px 28px #2e292429;transform:translate(-50%);transition:transform .45s ease,filter .3s ease}.car-visual img{bottom:-48%;height:230%;object-position:50% 12%;filter:saturate(.88) contrast(1.02);transform:translate(-50%) scale(1.22)}.project-car:hover .car-visual img{transform:translate(-50%) scale(1.27);filter:saturate(1) contrast(1.03)}.car-visual:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#2e292405,#2e292447);pointer-events:none}.visual-label{position:absolute;z-index:2;right:16px;bottom:14px;padding:5px 9px;color:var(--paper-light);background:#2e292494;border:1px solid rgba(255,250,242,.45);border-radius:999px;font-size:.68rem;font-weight:750;backdrop-filter:blur(8px)}.project-game .game-visual{margin-top:0;background:#f7c8d8}.project-game .game-visual img{object-position:50% 20%;bottom:-52%;height:185%;filter:saturate(.9) contrast(.98)}.project-game:hover .game-visual img{transform:translate(-50%) scale(1.04);filter:saturate(1) contrast(1.02)}.project-detail{padding-bottom:110px}.project-detail-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.72fr);gap:clamp(40px,8vw,110px);align-items:center;padding-top:74px;padding-bottom:88px}.project-back{display:inline-block;margin-bottom:34px;color:var(--terracotta-deep);font-size:.84rem;font-weight:700;text-decoration:none}.project-detail-status{margin:0 0 24px;color:var(--muted);font-size:.78rem;font-weight:750}.project-detail-status span{display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--terracotta-deep);border-radius:50%}.project-detail-copy h1{max-width:680px;margin:0;font-family:var(--serif);font-size:clamp(3.2rem,8vw,7.4rem);line-height:.98;letter-spacing:-.065em}.project-detail-lead{max-width:620px;margin:28px 0 0;color:var(--muted);font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.8}.project-detail-cover{justify-self:center;width:min(100%,400px);margin:0;overflow:hidden;background:var(--paper-light);border:1px solid rgba(46,41,36,.12);border-radius:30px;box-shadow:20px 24px #a84d2e26,0 28px 60px #2e292424}.project-detail-cover img{display:block;width:100%;max-height:640px;object-fit:cover;object-position:50% 12%}.project-detail-body{display:grid;gap:110px}.project-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:clamp(44px,9vw,140px);align-items:start;padding-top:70px;border-top:1px solid var(--line)}.project-story-grid h2,.project-section-heading h2,.project-qr-panel h2,.project-next-step h2{margin:0;font-family:var(--serif);font-size:clamp(2.1rem,4.7vw,4.6rem);line-height:1.08;letter-spacing:-.045em}.project-story-grid p:not(.eyebrow){max-width:620px;color:var(--muted);font-size:1.08rem;line-height:1.9}.project-fact-list{border-top:1px solid var(--line)}.project-fact-list div{display:grid;gap:5px;padding:18px 4px;border-bottom:1px solid var(--line)}.project-fact-list span{color:var(--terracotta-deep);font-size:.72rem;font-weight:800;letter-spacing:.1em}.project-fact-list strong{font-family:var(--serif);font-size:1.15rem}.project-screenshots{display:grid;gap:28px}.project-section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px}.project-section-heading .eyebrow{margin-bottom:8px}.screenshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.screenshot-grid figure,.pingdou-cover-section figure{margin:0}.screenshot-grid figure{padding:16px;background:var(--paper-light);border:1px solid var(--line);border-radius:24px}.screenshot-grid img{width:100%;max-height:780px;object-fit:cover;object-position:top;border-radius:15px}.screenshot-grid figcaption,.pingdou-cover-section figcaption{margin:12px 4px 2px;color:var(--muted);font-size:.8rem}.project-qr-panel{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:46px;background:#e7f0e8;border-radius:28px}.project-qr-panel>div>p:not(.eyebrow){color:var(--muted)}.project-qr-panel figure{width:190px;margin:0;padding:12px;background:var(--paper-light);border-radius:18px;box-shadow:0 14px 28px #2e29241a}.project-qr-panel img{width:100%;border-radius:10px}.project-qr-panel figcaption{margin:8px 0 0;text-align:center;color:var(--muted);font-size:.7rem}.pingdou-cover-section{display:grid;gap:28px}.pingdou-cover-section figure{width:min(100%,720px);justify-self:center;padding:16px;background:#f6d8e2;border-radius:28px}.pingdou-cover-section img{width:100%;max-height:980px;object-fit:cover;object-position:top;border-radius:18px}.project-next-step{padding:58px;color:var(--paper-light);background:var(--ink);border-radius:28px}.project-next-step .eyebrow{color:var(--terracotta)}.project-next-step p:not(.eyebrow){max-width:600px;color:#cfc3b6;font-size:1.05rem}.project-next-step .button{margin-top:14px}@media(max-width:900px){.project-detail-hero,.project-story-grid{grid-template-columns:1fr}.project-detail-cover{justify-self:start;width:min(100%,430px)}.screenshot-grid{grid-template-columns:1fr}}@media(max-width:640px){.project-detail{padding-bottom:70px}.project-detail-hero{padding-top:38px;padding-bottom:58px}.project-detail-cover{border-radius:22px;box-shadow:10px 14px #a84d2e26,0 20px 40px #2e29241f}.project-detail-body{gap:70px}.project-story-grid{padding-top:44px}.project-section-heading{display:block}.project-qr-panel{grid-template-columns:1fr;padding:28px}.project-qr-panel figure{width:180px}.project-next-step{padding:30px 24px}}