/* home page panels */
@media(min-width:761px){.home-page .portal-grid{grid-template-columns:230px minmax(0,1fr) 230px;align-items:start}.home-page .updates-note{flex-grow:0}}
@media(min-width:761px) and (max-width:1040px){.home-page .portal-grid{grid-template-columns:205px minmax(0,1fr) 205px}}

/* text panels */
.home-note>.plate-title{margin:-4px -5px 9px;padding:5px 6px;border:1px solid var(--edge);font:11px/1.4 var(--mono)}
.home-page .portal-footer{display:flex;justify-content:space-between;gap:15px}
.home-page .to-top{text-decoration:none}.home-page .to-top:hover{text-decoration:underline}
@media(max-width:760px){.home-page .to-top{display:flex;align-items:center;min-height:44px}}

/* site.info */
.info-list{margin:0;padding:2px 4px 1px;font:11px/1.45 var(--mono)}
.info-list div{display:grid;gap:1px;padding:5px 2px;border-bottom:1px dotted var(--edge)}
.info-list div:last-child{border-bottom:0}
.info-list dt{color:var(--muted);font-size:10px}
.info-list dd{margin:0;color:var(--ink)}

/* downloads counter */
.hit-counter{display:flex;justify-content:center;gap:2px;padding:9px 4px 3px}
.hit-counter span{display:grid;place-items:center;width:18px;height:25px;font:bold 15px var(--mono);color:var(--accent);background:linear-gradient(#1b1b1b 50%,#101010 50%);border:1px solid var(--edge);box-shadow:inset 0 0 0 1px #000,0 1px #ffffff0d}
.counter-note{margin:5px 0 3px;text-align:center;font:10px var(--mono);color:var(--muted)}
.counter-split{list-style:none;margin:6px 0 2px;padding:5px 2px 0;border-top:1px dotted var(--edge);font:10px/1.7 var(--mono)}
.counter-split li{display:flex;justify-content:space-between;gap:6px}.counter-split span{color:var(--muted)}.counter-split b{font-weight:400;color:var(--ink)}

/* updates.log */
.home-page .updates-note{background:var(--plate);border-color:var(--edge);box-shadow:inset 1px 1px var(--bevel),1px 2px var(--shadow)}
.home-page .updates-note h2{background:var(--surface);border-bottom:1px solid var(--edge);color:var(--ink);text-shadow:none}
.home-page .updates-note h2::before{color:var(--accent)}
.home-page .updates-note h2::after{background:var(--accent);box-shadow:0 0 5px var(--accent)}
.home-page .updates-screen{min-height:0;padding:11px 10px 12px;background:var(--monitor);border-color:var(--edge);box-shadow:inset 0 0 22px #0007}
.home-page .updates-rain{opacity:.1}
.home-page .updates-rain span{color:var(--wall-code)}
.home-page .updates-cursor{background:var(--ink);box-shadow:none}
.updates-list{position:relative;z-index:1;list-style:none;margin:0 0 9px;padding:0;font:11px/1.55 var(--mono);color:var(--ink)}
.updates-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:7px;padding:3px 0}
.updates-list time{color:var(--accent)}
.updates-list a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--edge-strong)}
.updates-list a:hover,.updates-list a:focus-visible{border-bottom:1px solid var(--ink)}

/* readme link */
.welcome-copy a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--edge-strong)}
.welcome-copy a:hover{border-bottom-style:solid}
/* the intro reads as one solid block beside the avatar */
.welcome-copy p{text-align:justify}.welcome-body{align-items:center}

/* readme: notice across the top, rei under it, reach-me and the honeycomb beside her */
.readme-more{display:grid;grid-template-columns:184px minmax(0,1fr);gap:12px 14px;align-items:stretch;margin:0 9px 12px;padding-top:12px;border-top:1px dotted var(--edge-strong);font:12px/1.65 var(--mono);color:var(--ink)}
.readme-more a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--edge-strong)}.readme-more a:hover{border-bottom-style:solid}
.notice-box{grid-column:1/-1;position:relative;margin:0;padding:13px 10px 10px;border:1px solid var(--edge);background:var(--surface)}
.notice-box::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(-45deg,var(--accent) 0 5px,transparent 5px 10px);opacity:.75}
.notice-box b{color:var(--accent);font-weight:700}
.notice-art{align-self:start;margin:0;padding:3px;border:1px solid var(--edge);background:var(--surface)}
.notice-art img{width:100%;height:auto;filter:saturate(.62) contrast(1.06) brightness(.86);transition:filter .6s ease}
.notice-art:hover img{filter:none}
.readme-reach{container-type:inline-size;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.reach-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center}
.reach-row p{margin:0}.reach-portrait{margin:0;padding:3px;border:1px solid var(--edge);background:var(--surface)}
.reach-portrait img{display:block;width:104px;height:120px;filter:saturate(.62) contrast(1.06) brightness(.86);transition:filter .6s ease}
.reach-portrait:hover img{filter:none}

.hc-credit{font-size:10px;letter-spacing:.6px;color:var(--muted)}
.readme-reach .honeycomb{margin-top:12px}.hc-credit{margin:6px 0 0}
.readme-more .hc-credit a{color:var(--muted)}
/* honeycomb: keep the strip proportional to the space beside Rei */
.honeycomb{--cols:4;--stamp:64px;--step:calc(var(--stamp) * .75);--row:calc(var(--stamp) * .875);--drop:calc(var(--stamp) * .4375);display:grid;grid-template-columns:repeat(var(--cols),var(--step));grid-auto-rows:var(--row);width:calc(var(--step) * (var(--cols) - 1) + var(--stamp));margin:0;padding:0 0 var(--drop);list-style:none}
@container (min-width:320px){.honeycomb{--cols:8;--stamp:min(64px,16cqw)}}
@container (max-width:319px){.readme-reach .honeycomb{margin-inline:auto}.hc-credit{text-align:center}}
.honeycomb li:nth-child(even){transform:translateY(var(--drop))}
.honeycomb img{display:block;width:var(--stamp);max-width:none;height:var(--row);image-rendering:pixelated;transition:transform .15s ease}
.honeycomb li:hover img{transform:translateY(-2px)}
.calm .notice-art img,.calm .reach-portrait img,.calm .honeycomb img{transition:none}
@media(max-width:760px){.readme-more{grid-template-columns:minmax(0,1fr)}.notice-art{width:min(240px,100%);justify-self:center}}

/* todo.txt */
.todo-list{list-style:none;margin:8px 0 0;padding:0;font:11px/1.6 var(--mono);color:var(--ink)}
.todo-list li{display:grid;grid-template-columns:28px minmax(0,1fr);padding:2px 0}
.todo-list .box{color:var(--accent);white-space:pre}
.todo-list .done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--edge-strong)}
.todo-list .done .box{text-decoration:none}
.todo-list .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* last.fm */
.lastfm-track{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin-top:8px;color:var(--ink);text-decoration:none}
.lastfm-track img{width:40px;height:40px;object-fit:cover;border:1px solid var(--edge);filter:saturate(.8)}
.lastfm-text{display:grid;gap:2px;min-width:0;font:11px/1.45 var(--mono)}
.lastfm-text strong{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lastfm-artist{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lastfm-state{color:var(--accent);font-size:9px}
.lastfm-note.is-live .lastfm-state::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:updates-cursor 1.4s steps(1,end) infinite}
.lastfm-track:hover strong{text-decoration:underline}
.lastfm-note .lastfm-label{margin:12px 0 3px;padding-top:8px;border-top:1px dotted var(--edge);font:10px/1.5 var(--mono);color:var(--muted)}
.lastfm-recent{list-style:none;margin:0;padding:0}
.lastfm-recent li+li{border-top:1px dotted var(--edge)}
.lastfm-recent a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;padding:7px 0;color:var(--ink);text-decoration:none}
.lastfm-recent img{width:32px;height:32px;object-fit:cover;filter:saturate(.8)}
.lastfm-recent .lastfm-text{gap:0;font-size:10px}
.lastfm-recent time{font-size:9px;color:var(--muted)}
.lastfm-recent a:hover strong{text-decoration:underline}

@media(max-width:760px){
  .welcome-copy p{text-align:left}
  .lastfm-note{order:5;grid-column:1/-1}
  .todo-note{order:6;grid-column:1/-1}
  .info-panel{order:4;grid-column:1}
  .counter-panel{order:8;grid-column:1}
  .ring-panel{order:9;grid-column:2}
  .updates-list{font-size:12px}
}