/* ===========================================================================
   Blog layer. Rides on assets/theme.css: same six palettes, same picker.
   Each theme gets its own article shape, not just its own colours.
   =========================================================================== */

/* reading progress, the one interaction every theme shares */
#progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:40; transition:width .12s linear}
[data-theme="riso"] #progress{height:4px}
[data-theme="blueprint"] #progress{height:3px}

.post{width:100%; max-width:min(100%, 78ch); margin:0 auto; padding:clamp(38px,6vw,72px) 24px clamp(60px,8vw,110px)}
.post__kicker{font-size:12.5px; color:var(--muted); margin-bottom:16px}
.post__kicker a{color:var(--accent); text-decoration:none}
.post h1{font-size:clamp(32px,5.4vw,54px); text-transform:var(--display-transform); line-height:1.04}
.post__stand{margin-top:20px; font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--muted)}
.post__meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  margin-top:24px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.post__meta a{color:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.post__meta a:hover{color:var(--accent)}
.post__meta .sep{margin-left:auto}

.post__body{margin-top:clamp(30px,4vw,46px); font-size:16.5px; line-height:1.72}
.post__body>*+*{margin-top:22px}
.post__body h2{font-size:clamp(22px,3vw,30px); margin-top:clamp(40px,5vw,60px); text-transform:var(--display-transform)}
.post__body h3{font-size:18px; margin-top:34px}
.post__body p{color:var(--muted)}
.post__body strong{color:var(--fg); font-weight:600}
.post__body a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--accent)}
.post__body a:hover{color:var(--accent)}
.post__body ul,.post__body ol{margin-left:0; padding-left:0; list-style:none; display:grid; gap:11px}
.post__body li{position:relative; padding-left:22px; color:var(--muted)}
.post__body ul li::before{content:""; position:absolute; left:0; top:.72em; width:10px; height:1px; background:var(--accent)}
.post__body ol{counter-reset:step}
.post__body ol li{counter-increment:step}
.post__body ol li::before{content:counter(step); position:absolute; left:0; top:0; font-size:12.5px; color:var(--accent); font-family:var(--mono)}
.post__body blockquote{
  margin:0; padding:16px 20px; border-left:2px solid var(--accent);
  background:var(--panel); color:var(--fg); font-size:15.5px;
}
[data-theme="riso"] .post__body blockquote{border-left-width:4px; box-shadow:var(--shadow)}

/* figures */
.post figure{margin:0}
.post figure img{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  filter:var(--img-filter); background:var(--bg-2);
}
[data-theme="riso"] .post figure img{border-width:2px; box-shadow:var(--shadow)}
.post figcaption{margin-top:10px; font-size:12.5px; color:var(--muted)}

/* code */
.post pre{
  margin:0; padding:18px 20px; overflow-x:auto; position:relative;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--bg-2);
  font:400 13.5px/1.65 var(--mono); color:var(--fg);
}
[data-theme="riso"] .post pre{border-width:2px}
.post pre code{font:inherit}
.post code{background:var(--panel-2); padding:2px 6px; border-radius:3px; font-size:.9em}
.post pre code{background:none; padding:0}
.copy{
  position:absolute; top:8px; right:8px; padding:5px 10px; cursor:pointer;
  font:500 11.5px/1 var(--body); color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);
}
.copy:hover{color:var(--accent); border-color:var(--accent)}

/* key-value table for specs */
.post table{width:100%; border-collapse:collapse; font-size:14.5px}
.post th,.post td{text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted)}
.post th{color:var(--fg); font-weight:600; white-space:nowrap}

/* end of post */
.post__end{margin-top:clamp(46px,6vw,72px); padding-top:26px; border-top:1px solid var(--line); display:grid; gap:18px}
.post__end .acts{display:flex; flex-wrap:wrap; gap:12px}

/* ===================== the index of posts ===================== */
.list{width:100%; max-width:min(100%,880px); margin:0 auto; padding:clamp(38px,6vw,72px) 24px clamp(60px,8vw,110px)}
.list__lede{margin-top:18px; color:var(--muted); max-width:58ch}
.cards{display:grid; gap:18px; margin-top:clamp(30px,4vw,44px)}
.card{
  display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; overflow:hidden; position:relative;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--panel);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
[data-theme="riso"] .card{border-width:2px; box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--glow)}
.card__shot{overflow:hidden; border-right:1px solid var(--line); background:var(--bg-2)}
.card__shot img{width:100%; height:100%; object-fit:cover; object-position:top left; aspect-ratio:4/3; filter:var(--img-filter)}
.card__body{padding:22px; display:flex; flex-direction:column; gap:10px}
.card__body .tag{font-size:12.5px; color:var(--muted)}
.card__body h2{font-size:20px}
.card__body p{color:var(--muted); font-size:14.5px; flex:1; margin:0}
.card__body a.more{text-decoration:none; color:var(--accent); font-size:13.5px; font-weight:500}
.card::after{content:""; position:absolute; inset:0}          /* whole card is the link target */
.card a.more::after{content:""; position:absolute; inset:0; z-index:1}
@media (max-width:700px){.card{grid-template-columns:1fr} .card__shot{border-right:0; border-bottom:1px solid var(--line)}}

/* ===========================================================================
   per theme article shapes
   =========================================================================== */

/* neon: the post is a terminal transcript */
[data-theme="neon"] .post,[data-theme="neon"] .list{max-width:860px}
[data-theme="neon"] .post__kicker::before,[data-theme="neon"] .list__cmd::before{content:"$ "; color:var(--accent)}
[data-theme="neon"] .post__body{border-left:1px solid var(--line); padding-left:26px}
[data-theme="neon"] .post__body h2::before{content:"## "; color:var(--accent); opacity:.75}
[data-theme="neon"] .card{grid-template-columns:180px minmax(0,1fr); border-radius:0}

/* sakura: one calm centred column, hairline rules, nothing boxed */
[data-theme="sakura"] .post{max-width:68ch; text-align:center}
[data-theme="sakura"] .post__body{text-align:left}
[data-theme="sakura"] .post__meta{justify-content:center; border-top-style:solid}
[data-theme="sakura"] .post__meta .sep{margin-left:0}
[data-theme="sakura"] .post h1::after{content:""; display:block; width:44px; height:1px; background:var(--accent); margin:24px auto 0}
[data-theme="sakura"] .post__body h2{text-align:center}
[data-theme="sakura"] .post figure{margin-inline:-4vw}
[data-theme="sakura"] .post figcaption{text-align:center}
[data-theme="sakura"] .card{grid-template-columns:1fr; text-align:center}
[data-theme="sakura"] .card__shot{border-right:0; border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion: no-preference){
  [data-theme="sakura"] .post figure img{clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease)}
  [data-theme="sakura"] .post figure.in img{clip-path:inset(0 0 0 0)}
}
#rail{display:none}
[data-theme="sakura"] #rail{display:block; position:fixed; left:26px; top:calc(var(--navh) + 40px); bottom:40px; width:1px; background:var(--line); z-index:5}
#rail i{position:absolute; left:-1px; top:0; width:3px; background:var(--accent); height:0}
@media (max-width:1000px){[data-theme="sakura"] #rail{display:none}}

/* glass: a frosted sheet with the metadata parked in a sticky side rail */
@media (min-width:1040px){
  [data-theme="glass"] .post{
    max-width:1120px; display:grid; grid-template-columns:250px minmax(0,1fr);
    gap:44px; align-items:start;
  }
  [data-theme="glass"] .post__kicker,[data-theme="glass"] .post__meta{grid-column:1; margin:0}
  [data-theme="glass"] .post__meta{
    position:sticky; top:calc(var(--navh) + 28px); flex-direction:column; align-items:flex-start;
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; background:var(--panel);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); gap:12px;
  }
  [data-theme="glass"] .post__meta .sep{margin-left:0}
  [data-theme="glass"] .post h1,[data-theme="glass"] .post__stand,
  [data-theme="glass"] .post__body,[data-theme="glass"] .post__end{grid-column:2}
  [data-theme="glass"] .post h1{margin-top:0}
}
[data-theme="glass"] .post figure img{box-shadow:var(--shadow)}
[data-theme="glass"] .post figure{transition:transform .3s var(--ease)}
[data-theme="glass"] .post figure:hover{transform:scale(1.012)}
[data-theme="glass"] .card{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}

/* blueprint: the post is a drawing sheet with a title block */
[data-theme="blueprint"] .post,[data-theme="blueprint"] .list{
  max-width:900px; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--bg) 78%, transparent);
  margin-block:clamp(20px,3vw,40px); padding-inline:clamp(22px,4vw,44px); position:relative;
}
[data-theme="blueprint"] .post::before,[data-theme="blueprint"] .post::after{
  content:""; position:absolute; width:16px; height:16px; border:1px solid var(--accent);
}
[data-theme="blueprint"] .post::before{top:10px; left:10px; border-right:0; border-bottom:0}
[data-theme="blueprint"] .post::after{bottom:10px; right:10px; border-left:0; border-top:0}
[data-theme="blueprint"] .post__meta{border-top-style:dashed; border-bottom-style:dashed}
[data-theme="blueprint"] .post figure img{border-style:dashed}
[data-theme="blueprint"] .card{border-radius:0}

/* riso: a printed sheet, oversized headline, hard offset on every plate */
[data-theme="riso"] .post,[data-theme="riso"] .list{
  max-width:920px; border:2px solid var(--fg); background:var(--panel);
  box-shadow:16px 16px 0 var(--ink-2); margin-block:clamp(24px,4vw,52px);
  padding-inline:clamp(24px,4vw,52px);
}
[data-theme="riso"] .post h1{font-size:clamp(38px,7vw,74px); line-height:.9}
[data-theme="riso"] .post__body h2{line-height:.98}
[data-theme="riso"] .post figure img{box-shadow:8px 8px 0 var(--accent)}
#ticker{display:none}
[data-theme="riso"] #ticker{display:block; overflow:hidden; background:var(--accent); color:var(--on-accent); border-block:2px solid var(--fg); padding:9px 0}
#ticker .track{display:flex; gap:44px; width:max-content; font:900 15px/1 var(--sans); letter-spacing:-.02em; text-transform:uppercase}
@media (prefers-reduced-motion: no-preference){
  #ticker .track{animation:tick 34s linear infinite}
  @keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
}

/* orbit: wide measure, metadata rail on the right, deep space around it */
@media (min-width:1040px){
  [data-theme="orbit"] .post{
    max-width:1140px; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:52px; align-items:start;
  }
  [data-theme="orbit"] .post__kicker,[data-theme="orbit"] .post h1,
  [data-theme="orbit"] .post__stand,[data-theme="orbit"] .post__body,[data-theme="orbit"] .post__end{grid-column:1}
  [data-theme="orbit"] .post__meta{
    grid-column:2; grid-row:1 / span 3; position:sticky; top:calc(var(--navh) + 28px);
    flex-direction:column; align-items:flex-start; gap:12px; border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:18px; background:var(--panel);
  }
  [data-theme="orbit"] .post__meta .sep{margin-left:0}
}
[data-theme="orbit"] .card{grid-template-columns:260px minmax(0,1fr)}

/* the social block sits in the reading column of the two rail layouts */
@media (min-width:1040px){
  [data-theme="glass"] .post .social{grid-column:2}
  [data-theme="orbit"] .post .social{grid-column:1}
}

/* card counters: quiet, and each one only appears once it has something to say */
.card__stats{display:flex; flex-wrap:wrap; gap:6px 16px; margin:2px 0 0; font-size:12.5px; color:var(--muted)}
.card__stats[hidden]{display:none}
.card__stats span{font-variant-numeric:tabular-nums}
[data-theme="riso"] .card__stats,[data-theme="blueprint"] .card__stats{text-transform:uppercase; letter-spacing:.04em}