/* Each page keeps its own layout rule instead of sharing one template.
   home       one object in the middle, dot art beneath
   blog       a contents page: the title runs up the spine, posts are ruled rows
   radio      a record sleeve: the song is the headline, the details sit in the corners
   guestbook  a ruled sheet: globe and form side by side, the messages as a ledger
   gallery    a catalogue: each section a grid of hairline cells */

/* ---------- Blog: spine + contents ---------- */
.panel-blog{container-type:size;--spine:clamp(150px,16vw,250px)}
.panel-blog .log-main{display:grid;grid-template-columns:var(--spine) minmax(0,1fr);min-height:100%;padding:0}
/* laid out as a wide strip as tall as the panel, then turned to read bottom-to-top */
.panel-blog .log-title{position:sticky;top:0;left:auto;grid-column:1;grid-row:1;align-self:start;width:100cqh;height:var(--spine);transform:rotate(-90deg) translateX(-100%);transform-origin:0 0}
.panel-blog .blog-feed{grid-column:2;grid-row:1;width:auto;max-width:1100px;margin:0;padding:40px clamp(18px,4vw,64px) 80px clamp(12px,2vw,32px)}
.blog-index-head{display:flex;justify-content:flex-end;padding:0 0 10px;border-bottom:1px solid var(--hud-text);font:var(--meta);letter-spacing:.14em;text-transform:uppercase}
.blog-index-head a{padding:2px 4px;color:var(--hud-text);text-decoration:none}
.blog-index-head a:hover{background:var(--hud-text);color:var(--cut-bg)}
.panel-blog .blog-index .blog-post{margin:0;padding:0;border:0;border-bottom:1px solid var(--hud-edge);background:none;box-shadow:none;container-type:normal}
.panel-blog .blog-index .post-card-link{display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);column-gap:clamp(14px,2vw,28px);padding:30px 0 40px}
.panel-blog .blog-index .post-card-link time{grid-column:1;grid-row:1/span 2;padding-top:.5em}
.panel-blog .blog-index .post-card-link h2{grid-column:2;margin:0 0 22px;font-size:clamp(44px,6.4vw,112px);line-height:.96}
.panel-blog .blog-index .post-excerpt{grid-column:2;max-width:62ch}
.panel-blog .blog-index .post-card-link:hover{background:linear-gradient(90deg,var(--grid),transparent 70%)}
/* reading a post in place: the list steps aside, the spine stays */
.blog-feed.is-reading .blog-index{display:none}
.blog-reader .blog-index-head{justify-content:space-between}
.blog-reader time{display:block;margin-top:30px;color:var(--hud-text);font:var(--meta);letter-spacing:.14em;text-transform:uppercase}
.blog-reader h1{margin:14px 0 34px;color:#e8edf0;font:900 clamp(44px,6.4vw,112px)/.96 var(--wide);letter-spacing:-.075em;-webkit-text-stroke:.055em currentColor;text-wrap:balance}
html[data-theme=light] .blog-reader h1{color:#11171c}
.blog-reader .post-body{max-width:68ch;padding-bottom:40px}

/* ---------- Radio: the song across the rings, details in the corners ---------- */
.panel-radio .radio-main{height:100%;min-height:0;padding:0}
.one-page .panel-radio .radio-status{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;width:auto;padding:12svh 0 0;border:0;background:none;box-shadow:none;transform:none;text-align:center;pointer-events:none}
.panel-radio .radio-status :is(button,input,a,summary,label,progress){pointer-events:auto}
.panel-radio .radio-player-body{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(1100px,92%);padding:0}
.panel-radio .radio-display{width:100%;padding:0;border:0;background:none;box-shadow:none}
.one-page .panel-radio .radio-status #radio-track{margin:0 0 14px;color:#fff;font-size:clamp(30px,5vw,80px);line-height:.95;white-space:normal;overflow:visible;text-wrap:balance;text-shadow:0 0 22px #000,0 0 6px #000,5px 5px 0 #000}
/* small print sits on solid chips so it reads over the chrome */
.panel-radio :is(.radio-format,.radio-volume,.radio-history summary,.radio-player-footer>*){padding:4px 8px;background:var(--cut-bg);color:var(--hud-text)}
.panel-radio .radio-format{display:inline-flex;justify-content:center;gap:4px 28px}
.panel-radio #radio-time{color:inherit}
.panel-radio .radio-timeline{width:min(560px,100%)}
.panel-radio .radio-controls{gap:18px}
.panel-radio .radio-volume{flex-direction:row;align-items:center;gap:9px}
.panel-radio .radio-volume input{width:110px}
/* corners: what played on the left, listeners and the raw stream on the right */
.panel-radio .radio-history{position:absolute;left:10px;bottom:22px;max-width:min(440px,46%);margin:0;padding:0;border:0;text-align:left}
.panel-radio .radio-history ol{max-height:40svh;overflow:auto;padding:8px 10px 8px 34px;border:1px solid var(--hud-edge);background:#050506e6}
.panel-radio .radio-history[open]{display:flex;flex-direction:column-reverse}
.panel-radio .radio-history[open] summary{margin-top:8px}
.panel-radio .radio-player-footer{position:absolute;right:10px;bottom:22px;flex-direction:column;align-items:flex-end;gap:6px;width:auto;text-align:right}
.panel-radio .radio-stream-link{margin:0}
.panel-radio .radio-player-footer #radio-message{max-width:300px}
html[data-theme=light] .one-page .panel-radio .radio-status #radio-track{color:#050506;text-shadow:0 0 22px #fff,0 0 6px #fff,5px 5px 0 #fff}
html[data-theme=light] .panel-radio .radio-history ol{background:#ffffffe6}
html[data-theme=light] .one-page .panel-radio .radio-status,html[data-theme=light] .panel-radio .radio-display{border:0;background:none;box-shadow:none}

/* ---------- Guestbook: a ruled sheet, after the insektsafe.haus grid ----------
   the globe beside the form (label | field rows), the messages as a ledger below */
.guest-main.guestbook-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:none;padding:228px 0 60px;align-items:stretch}
.guest-main.guestbook-open::after{content:"";position:absolute;left:0;right:0;top:228px;border-top:1px solid var(--hud-text);pointer-events:none}
.guestbook-open .guest-globe{grid-column:1;grid-row:1;position:relative;top:auto;align-self:start;height:min(44vw,600px)}
.guestbook-open .guestbook-card{grid-column:2;grid-row:1;z-index:5;min-width:0;border-left:1px solid var(--hud-edge)}
.guestbook-card .guestbook-heading{margin:0;padding:22px 20px 18px;border-bottom:1px solid var(--hud-edge);font-size:clamp(26px,3vw,46px)}
.guestbook-open .guestbook-form{grid-template-columns:minmax(120px,30%) minmax(0,1fr);gap:0}
.guestbook-open .guestbook-form>label{grid-column:1;margin:0;padding:17px 20px;border-bottom:1px solid var(--hud-edge)}
.guestbook-open .guestbook-form label span{display:block;margin:6px 0 0}
.guestbook-open .guestbook-form>:not(label){grid-column:2}
.guestbook-open .guestbook-location-row{display:flex}
.guestbook-open .guestbook-location-row input{flex:1}
/* the fields are the cells: a rule under each, a rule down the left */
.guestbook-open .guestbook-form :is(input,textarea),.guestbook-open .pad{border:0;border-bottom:1px solid var(--hud-edge);border-left:1px solid var(--hud-edge);background:transparent}
.guestbook-open .guestbook-form :is(input,textarea){padding:16px 20px}
.guestbook-open .guestbook-form :is(input,textarea):focus-visible{outline-offset:-4px}
.guestbook-open .guestbook-form [type=submit]{justify-self:start;margin:18px 20px}
.guestbook-open #guestbook-status:not(:empty){padding:0 20px 14px}
.guestbook-open .guestbook-credit{margin:0;padding:14px 20px}
/* the ledger: date and place | name and message | drawing */
.guestbook-open #guestbook-entries{grid-column:1/-1;grid-row:2;margin:0;border-top:1px solid var(--hud-text);font:var(--meta);letter-spacing:.14em;text-transform:uppercase}
.guestbook-open #guestbook-entries:not(:has(.guestbook-entry)){padding:18px 20px}
.guestbook-open .guestbook-entry{display:grid;grid-template-columns:minmax(150px,22%) minmax(0,1fr) auto;grid-template-areas:"meta name draw" "meta msg draw";grid-template-rows:auto 1fr;align-items:start;column-gap:28px;padding:20px;border:0;border-bottom:1px solid var(--hud-edge);text-transform:none;letter-spacing:0}
.guestbook-open .guestbook-entry:hover{background:var(--grid)}
.guestbook-open .guestbook-entry h3{grid-area:name;font-size:clamp(24px,2.4vw,36px)}
.guestbook-open .guestbook-entry-meta{grid-area:meta;margin:0;padding-top:.5em}
.guestbook-open .guestbook-message{grid-area:msg;margin-top:10px}
.guestbook-open .guestbook-drawing{grid-area:draw;margin:0;font-size:clamp(7px,.6vw,10px)}
html[data-theme=light] .guestbook-open .guestbook-card{background:transparent;box-shadow:none}

/* ---------- Gallery: a catalogue of hairline cells ---------- */
.panel-gallery .gallery-main{position:relative;min-height:100%;padding:228px 0 60px}
.gallery-title{width:min(1100px,92%)}
.gallery-section{border-top:1px solid var(--hud-text)}
.gallery-section:not(:has(.gallery-item)){display:none}
.gallery-section+.gallery-section{margin-top:48px}
.gallery-head{margin:0;padding:12px 20px;border-bottom:1px solid var(--hud-edge);color:var(--hud-text);font:var(--meta);letter-spacing:.14em;text-transform:uppercase}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-left:1px solid var(--hud-edge)}
.gallery-grid>.gallery-item{display:flex;flex-direction:column;margin:0;border-right:1px solid var(--hud-edge);border-bottom:1px solid var(--hud-edge)}
/* room for the author's words: a section intro, and a note under any item; empty ones take no space */
.gallery-intro,.gallery-note{margin:0;color:var(--hud-text);font:19px/1.55 "Times New Roman",Times,serif;letter-spacing:.04em;word-spacing:.1em;-webkit-text-stroke:.3px currentColor}
.gallery-intro{max-width:70ch;padding:16px 20px}
.gallery-note{padding:12px 16px 16px;border-top:1px solid var(--hud-edge);font-size:17px}
.gallery-intro:empty,.gallery-note:empty{display:none}
/* dot art: square cells, every piece scaled to the same height; the large ones take four cells */
.gallery-dots pre{display:grid;place-items:center;aspect-ratio:1;margin:0;padding:20px;overflow:hidden;color:var(--hud-text);font:calc(var(--fit,170px) / var(--rows) / 1.1)/1.1 AdwaitaMono,monospace;letter-spacing:0;white-space:pre;cursor:zoom-in}
.gallery-dots .gallery-big{grid-column:span 2;grid-row:span 2}
.gallery-big pre{--fit:400px}
.gallery-dots pre:is(:hover,:focus-visible){background:var(--grid);outline:none;color:var(--cut-fg)}
/* sites: a dithered front page over the address */
.gallery-site{display:flex;flex-direction:column;color:var(--hud-text);text-decoration:none}
.gallery-site img{display:block;width:100%;height:auto;image-rendering:pixelated}
.gallery-site span{padding:10px 14px;border-top:1px solid var(--hud-edge);font:var(--meta);letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
.gallery-site:is(:hover,:focus-visible) span{background:var(--hud-text);color:var(--cut-bg)}
/* buttons sit at their own size, in a row */
.gallery-buttons .gallery-grid{display:flex;flex-wrap:wrap;gap:6px;padding:20px;border-left:0}
.gallery-buttons .gallery-grid>.gallery-item{border:0}
.gallery-buttons img{display:block;image-rendering:pixelated}
.gallery-pictures img{display:block;width:100%;height:auto}

@media(max-width:760px){
  .panel-blog .log-main{display:block}
  .panel-blog .log-title{position:relative;left:auto;width:94%;height:135px;margin:0 auto;transform:none}
  .panel-blog .blog-feed{padding:10px 4% 60px}
  .panel-blog .blog-index .post-card-link{grid-template-columns:minmax(0,1fr);padding:22px 0 30px}
  .panel-blog .blog-index .post-card-link :is(time,h2,.post-excerpt){grid-column:1;grid-row:auto}
  .panel-blog .blog-index .post-card-link time{padding:0 0 12px}

  .one-page .panel-radio .radio-status{padding-top:4svh}
  .panel-radio .radio-player-body{gap:12px}
  .panel-radio .radio-history,.panel-radio .radio-player-footer{bottom:14px;max-width:48%}
  /* opened, the list takes the bottom of the screen and the right corner steps aside */
  .panel-radio .radio-history[open]{right:10px;max-width:none}
  .panel-radio .radio-history ol{max-height:26svh}
  .panel-radio .radio-status:has(.radio-history[open]) .radio-player-footer{visibility:hidden}

  .panel-gallery .gallery-main{padding-top:146px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gallery-dots pre{--fit:120px;padding:12px}
  .gallery-big pre{--fit:300px}

  .guest-main.guestbook-open{padding:146px 0 35px}
  .guest-main.guestbook-open::after{content:none}
  .guestbook-open .guest-globe{order:0;height:min(85vw,380px)}
  .guestbook-open .guestbook-card{order:1;border-top:1px solid var(--hud-text);border-left:0}
  .guestbook-open #guestbook-entries{order:2}
  /* one column: each label sits over its field */
  .guestbook-open .guestbook-form{grid-template-columns:minmax(0,1fr)}
  .guestbook-open .guestbook-form>label{padding:16px 16px 8px;border-bottom:0}
  .guestbook-open .guestbook-form>:not(label){grid-column:1}
  .guestbook-open .guestbook-form :is(input,textarea),.guestbook-open .pad{border:1px solid var(--hud-edge);margin:0 16px;width:auto}
  .guestbook-open .guestbook-form [type=submit]{margin:18px 16px}
  .guestbook-open .guestbook-entry{grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "name" "msg" "draw";row-gap:8px;padding:18px 16px}
  .guestbook-open .guestbook-drawing{font-size:7px}
}