:root { --paper:#f4f0e7; --ink:#17221f; --muted:#5f665f; --ember:#b9442f; --line:rgba(23,34,31,.18); --serif:"Iowan Old Style",Palatino,Georgia,serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,sans-serif; line-height:1.75; }
a { color:var(--ember); text-underline-offset:4px; } a:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
header, main, footer { width:min(760px,calc(100% - 40px)); margin:auto; } header { padding:28px 0; border-bottom:1px solid var(--line); } header a { color:var(--ink); }
article { padding:44px 0 60px; } .eyebrow, .draft-status, .writing-label { font-family:ui-monospace,monospace; font-size:.8rem; }
.eyebrow { color:var(--muted); } h1,h2 { font-family:var(--serif); font-weight:500; line-height:1.15; letter-spacing:-.025em; } h1 { font-size:clamp(2.3rem,6vw,3.7rem); margin:16px 0 24px; } h2 { font-size:1.9rem; margin:0 0 20px; }
.article-date { color:var(--muted); font-size:.85rem; margin:0 0 24px; }
.chapo { font-family:var(--serif); font-size:1.35rem; line-height:1.5; } .draft-status { padding:14px 18px; background:#ebe5d8; border-radius:12px; }
section { margin-top:44px; padding-top:30px; border-top:1px solid var(--line); } .writing-note { padding:18px 22px; border-left:3px solid var(--ember); background:#fffdf8; border-radius:0 16px 16px 0; } .writing-label { color:var(--ember); font-weight:700; } .writing-note p { margin:8px 0 0; }
figure { margin:26px 0; } .cover { display:block; width:100%; max-height:340px; object-fit:contain; background:#ebe5d8; border-radius:24px; } .cover.monsters { background:#251040; } figcaption { color:var(--muted); font-size:.85rem; margin-top:10px; }
.article-image { display:block; width:100%; height:auto; border-radius:16px; }
.article-image.sprites { max-width:560px; margin:auto; }
.article-image.level-workshop { max-width:440px; margin:auto; }
.article-contents { margin:30px 0; padding:20px 24px; background:#fffdf8; border:1px solid var(--line); border-radius:18px; }
.article-contents ol { margin:10px 0 0; padding-left:22px; }
.article-contents li + li, .method-list li + li { margin-top:8px; }
.method-list { padding-left:24px; }
section[id] { scroll-margin-top:24px; }
blockquote { margin:24px 0; padding:4px 0 4px 22px; border-left:3px solid var(--ember); font-family:var(--serif); font-size:1.25rem; }
blockquote p { margin:0; }
.image-link { display:block; border-radius:16px; }
.image-placeholder { display:grid; place-items:center; padding:30px 20px; min-height:140px; border:1px dashed var(--muted); border-radius:16px; color:var(--muted); text-align:center; }
footer { border-top:1px solid var(--line); padding:24px 0 40px; font-size:.85rem; color:var(--muted); } @media(max-width:480px) { header,main,footer { width:calc(100% - 28px); } article { padding-top:30px; } .writing-note { padding:16px; } }