/* ------------------------------------------------------------
   追熟 — 額縁と吊るす感じ（2026-10-06 に復活）と、その日に足した部品。
   site.css のあとに読む。site.css の索引（番号・題・矢印）はそのまま使い、
   厚塗りのころの「絵の具の額」「紐と結び目で吊るす」を上から戻している。
   写真そのものには手を入れない（比率を変えない・切り抜かない・フィルターを掛けない）。
   ------------------------------------------------------------ */
:root{
  --hang-string:linear-gradient(90deg,#8a6c1f,#dcbc4e);
  --hang-rail:rgba(155,148,111,.6);
  --hang-shadow:0 18px 26px -10px rgba(0,0,0,.8);
  --fw:clamp(4px,1.3vw,6px);            /* 額の太さ */
}

/* ---------------- 紐と結び目（吊るしたもの全部） ---------------- */
.swing::before{width:2px;margin-left:-1px;background:var(--hang-string);opacity:.85}
.swing::after{display:block;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:.9}

/* ---------------- 額 ----------------
   額は絵の具の素材（p-frame.webp）。写真の箱は中身だけで測る（content-box）ので、額の太さで写真の比率は変わらない */
.h-poster .work{border:var(--fw) solid #5d4a1c;border-image:var(--frame) var(--frame-slice) stretch;background:#0b0d09;box-shadow:var(--hang-shadow)}
.lb img{background:#0b0d09;border:clamp(6px,1.4vw,10px) solid #5d4a1c;border-image:var(--frame) var(--frame-slice) stretch}

/* ---------------- 作品を吊るす（スマホ・タブレット幅） ----------------
   行を区切る線がレール。そこから紐で下がり、紐の長さは交互に変わる（site.js が --len を入れる） */
@media(max-width:999px){
  [data-works] .line .hang{border-top-color:var(--hang-rail);padding-top:0}
  .index-row::before{padding-top:var(--space-3)}
  .index-row>.swing{padding-top:var(--len,60px)}
  .index-row>.swing::before,.index-row>.swing::after{display:block}
  .index-row .work img{
    box-sizing:content-box;
    width:min(calc(100% - 2 * var(--fw)),calc(420px * var(--ar)));
    border:var(--fw) solid #5d4a1c;border-image:var(--frame) var(--frame-slice) stretch;
    background:#0b0d09;box-shadow:var(--hang-shadow);
  }
}
/* PC幅。左は小さな索引のまま、右の大きな1枚をレールから吊るす */
@media(min-width:1000px){
  :root[data-preview="true"] .index-preview{padding-top:0;gap:var(--space-4);border-top:var(--rule) solid var(--hang-rail)}
  :root[data-preview="true"] .index-preview .preview-link{position:relative;flex-direction:column;justify-content:flex-start;min-height:0}
  .index-preview .preview-link::before{content:"";flex:none;width:2px;height:clamp(48px,6vw,84px);background:var(--hang-string);opacity:.85}
  .index-preview .preview-link::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;background:url(../img/p-dot-1.webp) center/contain no-repeat}
  :root[data-preview="true"] .index-preview img{
    box-sizing:content-box;max-width:calc(100% - 16px);
    border:8px solid #5d4a1c;border-image:var(--frame) var(--frame-slice) stretch;
    background:#0b0d09;box-shadow:var(--hang-shadow);
  }
  .index-row .work img{outline:1px solid rgba(93,74,28,.9);outline-offset:-1px}
}

/* ---------------- 作者とジャンルの札 ---------------- */
.w-spec{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:var(--space-2) 0 0}
.w-spec>div{display:flex;align-items:baseline;gap:var(--space-2)}
.w-spec dt{font-size:10px;letter-spacing:.14em;margin:0;padding:0 5px;line-height:1.7;color:var(--ochre);border:var(--rule) solid var(--line)}
.w-spec dd{margin:0;font-size:var(--size-note);letter-spacing:.06em;line-height:1.7;color:var(--soft)}

/* ---------------- 拡大表示の前後の作品名 ---------------- */
.lb-around{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3);margin-top:calc(-1 * var(--space-2));padding-top:var(--space-3);border-top:var(--rule) solid var(--line)}
.lb-around[hidden]{display:none}
.lb-around button{display:flex;align-items:center;gap:var(--space-2);min-height:44px;min-width:0;padding:0;border:0;background:none;cursor:pointer;font-size:var(--size-note);letter-spacing:var(--tracking-credit);line-height:1.5;color:var(--soft);text-align:left}
.lb-around button+button{justify-content:flex-end;text-align:right}
.lb-around b{font-family:var(--mincho);font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-around span{flex:none;color:var(--ochre)}
.lb-around button:hover{color:var(--yellow)}

/* ---------------- トップの件数と入口（PC幅だけ） ---------------- */
.hero-go{display:none}
@media(min-width:900px){
  .hero-go{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:grid;justify-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
    text-decoration:none;color:var(--cream);
    border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
  }
  .js .hero-go{animation:appear .6s .5s ease both}
  .hg-n{display:flex;gap:var(--space-6)}
  .hg-n>span{display:grid;justify-items:center;gap:var(--space-2)}
  .hg-n .m-n{font-size:clamp(34px,3.4vw,48px);font-weight:400;color:var(--cream)}
  .hg-n .cap{font-size:var(--size-label);margin-right:0;color:var(--ochre)}
  .hg-a{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;font-family:var(--mincho);font-size:var(--size-work);letter-spacing:var(--tracking-title);color:var(--yellow)}
  .hg-a i{font-style:normal;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .hero-go:hover .hg-a i,.hero-go:focus-visible .hg-a i{transform:translateY(5px)}
}
.shot .hero-go{display:none}   /* サムネイルと見本には出さない */

/* ============================================================
   文字を減らし、見出しを縦に立てる（2026-10-06 に本人が B 案を採用）。
   節の説明文・各回と各作品の一言・ことばの2段落目・注意書きは出さない。
   HTML には残してある（並行で編集が入っていたため CSS で隠している）。落ち着いたら HTML から削る
   ============================================================ */
.lede,.hint,.t-desc,.w-note,.side>p+p,.mascot-guide .guide-copy>p,.fine{display:none}
.days{margin-bottom:var(--space-3)}
.tt li{padding-top:var(--space-3);padding-bottom:var(--space-3)}

/* 節の見出しは縦書きで左端に立てる。節の頭に置くだけで、スクロールには付いてこない（2026-10-06 本人の指定）。
   大きさは --vhead。縦長の画面では控えめにする（下の @media） */
:root{--vhead:clamp(26px,2.8vw,40px);--vhead-gap:clamp(28px,4.5vw,56px)}
.sec:not(.hung) .in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--vhead-gap);align-items:start}
.sec:not(.hung) .in>*{grid-column:2}
.sec:not(.hung) .head{
  grid-column:1;grid-row:1 / span 12;
  -webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;text-align:left;margin:0;white-space:nowrap;
}
/* 「すべて見る」は幅が要るので、見出しの列をまたいで端から端まで使う */
.sec:not(.hung) .in>.more{grid-column:1/-1}
.sec:not(.hung) .head .cap{margin:0}
.sec:not(.hung) .head h2,.sec:not(.hung) .head h1{display:block;margin:0 .5em 0 0;line-height:1.2;font-size:var(--vhead)}
.venue .no{margin-left:0}
.venue .fl{text-align:left}
.info{margin-left:0;margin-top:var(--space-6)}

/* ことばの節。題は縦、本文は横（本人の指定）。スマホ幅は 写真｜題 の下に本文、PC幅は 写真｜本文｜題 と並べる */
.words .in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,4.5vw,56px);align-items:start}
.words .h-poster{position:relative;left:auto;top:auto;grid-column:1;grid-row:1;width:min(100%,260px);margin:0}
.words h2{
  grid-column:2;grid-row:1;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;
  text-align:left;margin:var(--space-5) 0 0;line-height:1.35;white-space:nowrap;
}
.words .side{grid-column:1/-1;max-width:none;margin:var(--space-6) 0 0}
@media(min-width:900px){
  .words .in{grid-template-columns:260px minmax(0,1fr) auto;column-gap:clamp(40px,6vw,96px)}
  .words .side{grid-column:2;grid-row:1;max-width:31em;margin:var(--space-5) 0 0 auto}
  .words h2{grid-column:3;margin-top:0}
}

/* 縦長の画面（スマホなど）では、見出しを控えめに。2026-10-06 本人「少し邪魔に感じられるサイズ感」 */
@media(max-aspect-ratio:1/1){
  :root{--vhead:clamp(15px,4.2vw,20px);--vhead-gap:clamp(14px,4vw,28px)}
  .sec:not(.hung) .head .cap{font-size:10px}
  .sec:not(.hung) .head h2,.sec:not(.hung) .head h1{margin-right:.35em;letter-spacing:.16em}
  .words h2{font-size:clamp(22px,6.2vw,34px)}
}