*{box-sizing:border-box}body{margin:0;background:#faf9f5;color:#232323;font:17px/1.55 system-ui,sans-serif}a{color:inherit}a:hover{color:#9b3026}a:focus-visible,button:focus-visible{outline:3px solid #b93a2d;outline-offset:4px}.skip{position:absolute;left:-10000px}.skip:focus{left:12px;top:12px;background:white;padding:10px}.shell{max-width:1060px;margin:auto;padding:30px 18px}header{text-align:center;margin-bottom:35px}.brand{font:700 clamp(42px,8vw,70px)/1.1 Georgia,serif;letter-spacing:-3px;text-decoration:none}header p{color:#666;margin:10px 0}.top-links{display:flex;justify-content:center;gap:20px;font-size:14px}h1{text-align:center;font:700 clamp(22px,4vw,30px)/1.3 Georgia,serif}.number{font:14px system-ui,sans-serif;color:#666;display:block;margin-bottom:6px}.navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:22px 0}.navigation a,.navigation span,.support,button{border:1px solid #333;background:#fff;padding:8px 13px;border-radius:4px;text-decoration:none;font:inherit}.navigation span{color:#999;border-color:#ccc}.comic{display:block;width:100%;height:auto;margin:auto}.caption{text-align:center;color:#666;font-size:14px}.support{display:inline-block;background:#f0d583}.support-row{text-align:center;margin:30px 0}footer{text-align:center;font-size:13px;color:#666;border-top:1px solid #ddd;padding-top:20px}footer a,footer button{margin:0 8px}footer button{font-size:13px;padding:3px 7px}.prose{max-width:720px;margin:30px auto}.consent{position:fixed;bottom:12px;left:12px;right:12px;max-width:720px;margin:auto;background:white;box-shadow:0 3px 25px #0003;border:1px solid #ccc;padding:18px;z-index:10}.consent p{margin:0 0 12px}.consent button{margin-right:8px;cursor:pointer}[hidden]{display:none!important}@media(max-width:500px){.shell{padding:22px 10px}.navigation a,.navigation span{padding:7px 9px;font-size:14px}}
.support-row .support{margin:5px}
label{display:block;margin:12px 0}select,input,textarea{font:inherit;max-width:100%;padding:7px;border:1px solid #aaa;border-radius:3px}textarea{width:100%;resize:vertical}.import-label{margin:0;padding:7px;font-size:14px}.import-label input{max-width:200px}#panel-editor{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:16px}#panel-editor h2{font-size:18px;margin:0 0 10px}.panel-control{background:#fff;border:1px solid #ddd;padding:14px}.panel-control a{font-size:13px}.move-buttons{display:flex;gap:5px;margin-top:10px}.move-buttons button{font-size:12px;padding:5px}#comic-canvas{display:block;width:100%;height:auto;background:white;margin:24px auto}#comic-title{width:100%}@media(max-width:650px){#panel-editor{grid-template-columns:1fr}.top-links{flex-wrap:wrap}}

.brand img{display:block;margin:auto;width:min(100%,440px);height:auto}.brand:has(img){letter-spacing:0}
.feed{display:flex;align-items:center;gap:22px;max-width:620px;margin:34px auto;padding:20px;background:#fff;border:1px solid #ddd;border-radius:8px}.feed>img{flex:none;width:160px;height:auto}.feed h2{font:700 24px Georgia,serif;margin:0}.feed p{margin:4px 0}.feed-month,.feed-note{color:#666;font-size:14px}.meter{height:14px;background:#e6e1d6;border-radius:7px;overflow:hidden;margin:12px 0 6px}.meter span{display:block;height:100%;background:#b93a2d}.feed-total{font-weight:600}.feed .support{margin-top:10px}@media(max-width:520px){.feed{flex-direction:column;text-align:center}}

/* Layout: tinted page, white rounded cards, compact header so the comic starts above the fold */
body{background:#ece3d8}
.shell{max-width:860px;padding:14px 14px 28px}
header{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center;text-align:left;margin-bottom:14px}
.brand{grid-row:1/3;line-height:0}.brand img{width:220px}
header p{margin:0;align-self:end;color:#5f574e}.top-links{justify-content:flex-start;align-self:start;margin-top:4px}
.card,.prose,.feed{background:#fff;border:1px solid #d9cfc2;border-radius:16px;box-shadow:0 2px 10px #3a2a1a14}
.card{padding:10px 18px 8px}
.card h1{margin:2px 0 0;font-size:clamp(20px,3.5vw,26px)}
.card .navigation{margin:10px 0}.card .comic{border-radius:6px}.card .caption{margin:4px 0}
.prose{max-width:none;margin:0;padding:6px 28px 22px}
.feed{max-width:none;margin:16px 0;padding:16px 20px}.feed>img{width:130px}
.support-row{margin:16px 0}
footer{border-top-color:#cfc4b6;color:#5f574e}
@media(max-width:560px){header{grid-template-columns:1fr;text-align:center;row-gap:6px}.brand{grid-row:auto}.brand img{width:180px;margin:auto}header p{align-self:auto}.top-links{justify-content:center}.card{padding:8px 10px 6px}.prose{padding:4px 16px 18px}}

/* Navigation icons (originals in assets-src/nav) */
.navigation [data-nav]{display:inline-flex;align-items:center;gap:7px}
.navigation [data-nav]::before,.navigation [data-nav]::after{content:none;width:18px;height:18px;background:center/contain no-repeat}
.navigation [data-nav=first]::before,.navigation [data-nav=previous]::before,.navigation [data-nav=random]::before,.navigation [data-nav=next]::after,.navigation [data-nav=latest]::after{content:""}
.navigation [data-nav=first]::before{background-image:url(/site/nav/left-double-chevron.png)}
.navigation [data-nav=previous]::before{background-image:url(/site/nav/left-single-chevron.png)}
.navigation [data-nav=random]::before{background-image:url(/site/nav/random.png);width:26px;height:26px;margin:-6px -2px -6px -4px}
.navigation [data-nav=next]::after{background-image:url(/site/nav/right-single-chevron.png)}
.navigation [data-nav=latest]::after{background-image:url(/site/nav/right-double-chevron.png)}
.navigation span[data-nav]::before,.navigation span[data-nav]::after{opacity:.3}

.missing{text-align:center}.missing img{display:block;width:100%;max-width:640px;height:auto;margin:14px auto}

/* Archive: calendar-style rows (date tile, title, issue tag) */
.archive{list-style:none;padding:0;margin:6px 0 26px}
.archive li+li{border-top:1px solid #eee7dc}
.archive a{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:9px 10px;margin:0 -10px;border-radius:10px;text-decoration:none}
.archive a:hover{background:#faf5ec;color:inherit}.archive a:hover .title{color:#9b3026}
.archive time{display:flex;flex-direction:column;align-items:center;line-height:1}
.archive .day{font:700 24px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#232323}
.archive .weekday{font:600 11px/1 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a8076;margin-top:4px}
.archive .title{font-size:17px}
.archive .num{font:600 12px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#8a8076;background:#f4efe6;padding:5px 8px;border-radius:999px}
.archive .num.special{color:#9b3026;background:#fbe9e4;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.year h2{font:700 30px/1.2 Georgia,serif;margin:36px 0 0;padding-bottom:6px;border-bottom:2px solid #232323}
.year:first-of-type h2{margin-top:14px}
.year h3{font:700 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#9b3026;margin:24px 0 4px}
@media(max-width:560px){.archive a{grid-template-columns:48px 1fr auto;gap:10px}.archive .day{font-size:22px}.archive .title{font-size:16px}}


/* Waiting page (shown until the first release date) */
.waiting{min-height:100vh;display:flex}
.waiting-main{margin:auto;padding:32px 20px;text-align:center;width:100%;max-width:760px}
.waiting-logo{display:block;width:min(100%,640px);height:auto;margin:0 auto}
.waiting-title{font:700 clamp(48px,12vw,96px)/1 Georgia,serif;letter-spacing:-3px;margin:0}
.waiting-tagline{margin:14px 0 30px;font-size:19px;color:#5f574e}
.countdown{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.countdown>div{min-width:86px;padding:14px 10px 10px;background:#fff;border:1px solid #d9cfc2;border-radius:16px;box-shadow:0 2px 10px #3a2a1a14}
.countdown .num{display:block;font:700 clamp(32px,7vw,46px)/1 Georgia,serif;font-variant-numeric:tabular-nums}
.countdown .unit{display:block;margin-top:6px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a8076}
.waiting-note{margin:26px 0 0;color:#5f574e}
@media(max-width:480px){.countdown{gap:8px}.countdown>div{min-width:70px;padding:12px 6px 8px}}

/* Not-found card: dark, to suit the transparent artwork */
.prose.missing{background:#241c19;border-color:#3d312b;box-shadow:0 4px 18px #1a100a40;color:#e4d6c7;padding:10px 28px 24px}
.prose.missing h1{color:#f6e9da}
.prose.missing a{color:#ff9d57;text-decoration-color:#ff9d5780;text-underline-offset:3px}
.prose.missing a:hover{color:#ffc08a}
.prose.missing a:focus-visible{outline-color:#ff9d57}
.prose.missing img{filter:drop-shadow(0 6px 14px #0008)}

.build{display:block;margin-top:6px;font:500 11px/1 system-ui,sans-serif;letter-spacing:.06em;color:#9a8f83}

/* Feed Tom button: ember red pill with an icon on each side (paw, flame or trident, chosen by public/icons.js) */
.feed .support{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='4.6' cy='11.4' rx='2.2' ry='2.9' transform='rotate%28-22 4.6 11.4%29'/%3E%3Cellipse cx='9.3' cy='5.9' rx='2.4' ry='3.2' transform='rotate%28-8 9.3 5.9%29'/%3E%3Cellipse cx='14.7' cy='5.9' rx='2.4' ry='3.2' transform='rotate%288 14.7 5.9%29'/%3E%3Cellipse cx='19.4' cy='11.4' rx='2.2' ry='2.9' transform='rotate%2822 19.4 11.4%29'/%3E%3Cpath d='M12 11.4c-3.7 0-6.6 3.2-6.6 6.1 0 2.1 1.7 3.1 3.3 3.1 1.2 0 2.1-.6 3.3-.6s2.1.6 3.3.6c1.6 0 3.3-1 3.3-3.1 0-2.9-2.9-6.1-6.6-6.1z'/%3E%3C/svg%3E");display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:11px 22px;background:#b93a2d;color:#fff;border:0;border-radius:999px;font:700 16px/1.1 system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;box-shadow:0 3px 0 #86271d,0 6px 14px #86271d40;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.feed .support[data-icon=flame]{--icon-size:21px;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.5 1.5c.4 3-1 4.8-2.6 6.6C8.3 9.9 6.2 12 6.2 15.3 6.2 19.2 8.7 22.5 12 22.5s5.8-3.3 5.8-7.1c0-2.6-1.1-4.4-2.3-5.8-.3 1.4-.9 2.5-1.9 3.1.5-3.4-.2-7.9-1.1-9.7zM12 20.4c-1.5 0-2.7-1.3-2.7-3 0-1.6 1.3-2.5 2-3.9.4.9 1.1 1.4 1.7 2 .8.7 1.7 1.5 1.7 2.7 0 1.5-1.2 2.2-2.7 2.2z'/%3E%3C/svg%3E")}
.feed .support[data-icon=trident]{--icon-size:21px;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .8l3 3.9h-2.1v14.6H11.1V4.7H9z'/%3E%3Cpath d='M4.2 1.2l2.6 3.7H5.3v3.6a6.7 6.7 0 0 0 13.4 0V4.9h-1.5l2.6-3.7 2.6 3.7h-1.5v3.6a8.5 8.5 0 0 1-7.3 8.4v-1.8a6.7 6.7 0 0 0 5.5-6.6' fill='none'/%3E%3Cpath d='M5 4.7V8.5a7 7 0 0 0 14 0V4.7' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M4.6 .9L7.4 5H1.8zM19.4 .9L22.2 5H16.6z'/%3E%3Cpath d='M9.6 20.2h4.8v1.9H9.6z'/%3E%3C/svg%3E")}
.feed .support::before,.feed .support::after{content:"";width:var(--icon-size,18px);height:var(--icon-size,18px);flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;opacity:.92}
.feed .support::after{transform:scaleX(-1)}
.feed .support:hover{background:#a8321f;color:#fff;transform:translateY(-1px);box-shadow:0 4px 0 #86271d,0 9px 18px #86271d50}
.feed .support:active{transform:translateY(2px);box-shadow:0 1px 0 #86271d}
.feed .support:focus-visible{outline:3px solid #232323;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.feed .support:hover::before{animation:icon-left .5s ease-in-out}.feed .support:hover::after{animation:icon-right .5s ease-in-out .12s}}
@keyframes icon-left{0%,100%{transform:rotate(0)}40%{transform:rotate(-18deg) translateY(-1px)}}
@keyframes icon-right{0%,100%{transform:scaleX(-1) rotate(0)}40%{transform:scaleX(-1) rotate(-18deg) translateY(-1px)}}
@media(max-width:520px){.feed .support{font-size:15px;padding:11px 18px}}

/* About page: Tom's personnel file */
.about{padding:22px 28px 26px}
.about-hero{display:flex;align-items:center;gap:26px;margin-bottom:8px}
.about-hero h1{text-align:left;margin:0;font-size:clamp(30px,5vw,44px);line-height:1.1}
.about .subtitle{margin:6px 0 0;font:600 15px/1.35 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#9b3026}
.avatar-wrap{position:relative;flex:none}
.avatar{display:block;width:170px;height:170px;border-radius:50%;box-shadow:0 6px 18px #3a2a1a30}
.stamp{position:absolute;right:-26px;bottom:6px;transform:rotate(-12deg);padding:4px 11px;border:3px solid #b93a2d;border-radius:6px;color:#b93a2d;background:#fff9;font:800 15px/1.1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.file{margin:20px 0 24px;padding:6px 20px;background:#fbf6ec;border:1px dashed #cdbfaa;border-radius:12px}
.file>div{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;padding:10px 0;border-top:1px solid #eadfcc}
.file>div:first-child{border-top:0}
.file dt{font:700 12px/1.6 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a7f70}
.file dd{margin:0}
.about p{max-width:62ch}.about-feed{padding:10px 14px;background:#fff1ee;border-left:4px solid #b93a2d;border-radius:0 8px 8px 0}
.about-go{margin-top:18px}
@media(max-width:560px){.about{padding:18px 16px 22px}.about-hero{flex-direction:column;text-align:center;gap:14px}.about-hero h1{text-align:center}.avatar{width:140px;height:140px}.stamp{right:-30px}.file>div{grid-template-columns:1fr;gap:0}}

/* About page: the household */
.cast{margin:28px 0 8px}.cast h2{font:700 26px/1.2 Georgia,serif;margin:0 0 6px}.cast-intro{margin:0 0 16px;color:#5f574e}
.cast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.person{background:#fbf6ec;border:1px dashed #cdbfaa;border-radius:12px;padding:16px 18px 8px}
.person-head{display:flex;align-items:center;gap:14px}
.person h3{margin:0;font:700 22px/1.15 Georgia,serif}.person .role{margin:3px 0 0;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9b3026}
.avatar-sm{width:84px;height:84px;border-radius:50%;flex:none;box-shadow:0 4px 12px #3a2a1a2e}
.file.compact{margin:12px 0 4px;padding:0;background:none;border:0;border-radius:0}
.file.compact>div{grid-template-columns:1fr;gap:1px;padding:9px 0}
.file.compact dd{font-size:15.5px}
@media(max-width:700px){.cast-grid{grid-template-columns:1fr}}

/* Instagram link */
a.social{display:inline-flex;align-items:center;gap:7px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
a.social::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.35'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.35'/%3E%3C/svg%3E") center/contain no-repeat}
footer a.social{margin:6px 0 0}
.waiting-social{margin-top:10px}
.about-social{margin:18px 0 0}