/* ==========================================================================
   saera.ai — home.css（トップ専用。site.css の後に読む）
   正本: DESIGN-SPEC §5.1（＋ADDENDUM A-7・D）
   構成: 1 表紙 / 2 ティッカー / 3 部屋 / 4 パネル / 5 ペット / 6 Now / 7 Works / 8 About / 9 Follow / 10 モーション
   ルール: 色・書体はトークン経由だけ。動かす指定は 10 の no-preference の中だけ。
           浮かせるもの（#pet-wrap）は var(--z-float) 以下。パネルはモーダルなのでヘッダーより上（--z-modal）。
   ========================================================================== */

.home{--z-modal:100;--section:clamp(48px,4.5vw,64px)}
/* トップは節の間を詰める（全長の上限 モバイル 6,500px・デスクトップ 5,500px に収めるため。§5.1.1）。
   body に置くのでフッターの上の空き（.site-footer の margin-top）も同じだけ詰まる */
.home main .section:last-child{padding-bottom:var(--s-2)}
@media (max-width:760px){.home{--section:40px}}
/* フッターのタイムカプセルは、トップでは Now の1行と同じことを言うので出さない（T10 で T1 と確認） */
.home .site-footer .capsule{display:none}
/* パネルを開いている間は背景をスクロールさせない（main.js が html に付け外し） */
html.is-panel-open{overflow:hidden;scrollbar-gutter:stable}

/* ---------- 1. 表紙（§5.1.2） ---------- */
.cover{position:relative;isolation:isolate;overflow:hidden;background:var(--paper)}
.cover__aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cover__aurora i{position:absolute;width:60vmax;aspect-ratio:1;border-radius:50%}
.cover__aurora i:nth-child(1){left:-18vmax;top:-24vmax;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lav) 55%,transparent),transparent)}
.cover__aurora i:nth-child(2){right:-20vmax;top:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pink) 60%,transparent),transparent)}

.cover__in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;
  min-height:min(86svh,820px);padding-block:var(--s-2) var(--s-7)}

/* 題字（前）と立ち絵（後ろ）。題字は z-index 2 で、どの幅でも era が読める */
.cover__mast{grid-column:1/-1;grid-row:1;position:relative;z-index:2;margin:-.1em 0 0 -.04em;
  font:900 var(--t-mast)/.86 var(--f-jp);letter-spacing:-.035em;white-space:nowrap;
  -webkit-user-select:none;user-select:none}
.cover__mast .sa,.cover__mast .era{background:var(--grad-brand);background-size:calc(100% * 5 / 2) 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cover__mast .sa{background-position:0 0}
.cover__mast .era{position:relative;display:inline-block;background-position:100% 0;background-size:calc(100% * 5 / 3) 100%}
/* グリッチの帯（ずれ色）。静止時は見えない */
.cover__mast .era::before,.cover__mast .era::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;
  -webkit-background-clip:border-box;background:none}
.cover__mast .era::before{-webkit-text-fill-color:var(--pink-ink);transform:translateX(-.03em);clip-path:inset(0 0 100% 0)}
.cover__mast .era::after{-webkit-text-fill-color:var(--glitch);transform:translateX(.03em);clip-path:inset(100% 0 0 0)}
/* 題字をもとのロゴ画像に（9/27）。箱の高さは文字版と同じ .86em のままにして、日付・立ち絵の潜り込みの位置を変えない。
   画像は箱の下端にそろえ、幅は 2.5em（文字版の x ハイトとほぼ同じ高さになる）。はみ出さないよう 100% で頭打ち */
.cover__mast--logo{display:flex;align-items:flex-end;height:.86em;margin-left:0;line-height:0;white-space:normal}
.cover__mast--logo img{display:block;width:min(2.5em,100%);max-width:100%;height:auto;
  /* 淡い色のロゴが立ち絵の髪に重なっても字の形が読めるよう、地の色でごく薄く縁取る */
  filter:drop-shadow(0 0 .012em var(--paper)) drop-shadow(0 0 .04em color-mix(in srgb,var(--paper) 70%,transparent))}

.cover__issue{grid-column:1;grid-row:2;position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .7em;
  margin-top:var(--s-2);font-size:var(--t-s);font-weight:700;color:var(--ink-2)}
.cover__issue .num{color:var(--lav-ink);font-size:1.15em}
.cover__dot{color:var(--ink-3)}

.cover__figure{position:absolute;z-index:1;right:calc(var(--gutter) * .5);bottom:0;top:0;margin:0;aspect-ratio:2/3;pointer-events:none;
  /* 切り抜き無し: 左と下を強めに、上と右を少しだけフェードさせて白地になじませる */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 24%,black 93%,transparent 100%),linear-gradient(180deg,transparent 0%,black 9%,black 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,black 24%,black 93%,transparent 100%),linear-gradient(180deg,transparent 0%,black 9%,black 80%,transparent 100%);
  mask-composite:intersect}
.cover__figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

.cover__copy{grid-column:1/-1;grid-row:3;align-self:end;position:relative;z-index:3;max-inline-size:min(46rem,62%);padding-top:var(--s-6)}
.cover__copy h1{font-size:var(--t-3xl);line-height:1.3}
.cover__copy .lead{margin-top:var(--s-4);color:var(--ink-2)}
.cover__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.cover__links{display:flex;flex-wrap:wrap;gap:0 var(--s-5);margin-top:var(--s-2)}

.cover__tate{position:absolute;z-index:3;right:calc(var(--gutter) * .35);top:50%;translate:0 -50%;margin:0;
  writing-mode:vertical-rl;font-size:var(--t-l);letter-spacing:.3em;color:var(--ink-2)}

@media (max-width:1100px){
  .cover__tate{display:none}
}
@media (max-width:760px){
  .cover__in{display:block;min-height:0;padding-block:var(--s-2) var(--s-4)}
  .cover__mast{font-size:max(6rem,24vw)}
  .cover__mast{margin-top:0}
  .cover__issue{position:absolute;left:var(--gutter);top:calc(var(--s-2) + max(6rem,24vw) * .9);margin:0;
    flex-direction:column;gap:0;font-size:var(--t-xs);line-height:1.6}
  .cover__dot{display:none}
  /* 立ち絵は右寄せ・高さ 300px・題字の下半分の後ろに潜る。左の空いた所に日数を置く */
  .cover__figure{position:relative;inset:auto;height:300px;width:auto;aspect-ratio:auto;
    margin:calc(max(6rem,24vw) * -.43) calc(var(--gutter) * -1) 0}
  /* 差し伸べた手（原画の x 280〜490・y 890〜1060）を枠に入れる: 原画の y 270〜1150 を高さ 300px に収め、右寄せで置く。
     左のフェードは弱く、下のフェードは手より下だけ */
  .cover__figure{overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 6%,black 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,black 6%,black 88%,transparent 100%)}
  .cover__figure img{position:absolute;right:0;top:-92px;width:auto;height:522px;max-width:none;object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 24%,black 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,black 24%,black 94%,transparent 100%)}
  .cover__copy{max-inline-size:none;padding-top:0;margin-top:calc(var(--s-5) * -1)}
  .cover__copy h1{font-size:clamp(1.75rem,1.1rem + 3.2vw,2.25rem)}
  .cover__copy .lead{font-size:var(--t-m);margin-top:var(--s-3)}
  .cover__cta{flex-direction:column;margin-top:var(--s-4);gap:var(--s-2)}
  .cover__cta .btn{width:100%}
  .cover__links{gap:0 var(--s-4);margin-top:0}
}
/* 立ち絵 v2（9/27、手を振るポーズ・透過 PNG 由来の WebP）。地が透明なので、左・上・右のフェードは外して下だけ残す。
   上げた手（原画の x 230〜440・y 40〜240）が題字の方へ伸びるのをフェードで消さないため */
.cover__figure--v2{
  -webkit-mask-image:linear-gradient(180deg,black 0%,black 84%,transparent 100%);
  -webkit-mask-composite:source-over;
  mask-image:linear-gradient(180deg,black 0%,black 84%,transparent 100%);
  mask-composite:add}
/* 縦長のタブレット（761〜1100px）では表紙が縦に伸びて立ち絵も大きくなり、上げた手が題字に重なる。
   高さを 71vw までにして下にそろえる（手が題字の右端＝約 59vw より右に来る）。横長の画面では 100% のまま */
@media (min-width:761px) and (max-width:1100px){
  .cover__figure--v2{top:auto;height:min(100%,71vw)}
}
@media (max-width:760px){
  /* 題字の下・日数の右に上げた手が来るように置く。キャラの幅（原画の x 230〜1005）が「画面幅 − 138px」に収まる大きさ
     （390 幅で 0.325 倍、上限 0.36 倍）にして右に寄せ、手（原画 y 40〜）の上端を枠の上から約 48px に。胸から下は下のフェードで消す */
  .cover__figure--v2{
    -webkit-mask-image:linear-gradient(180deg,black 0%,black 82%,transparent 100%);
    mask-image:linear-gradient(180deg,black 0%,black 82%,transparent 100%)}
  .cover__figure--v2 img{top:35px;right:-8px;height:min(calc((100vw - 138px) * 1.982),553px);
    -webkit-mask-image:none;mask-image:none}
}

/* ---------- 2. ティッカー（§5.1.3。帯の部品は site.css） ---------- */
.ticker{position:relative;z-index:2}
.ticker__label{margin:0}
.ticker__track a{gap:.7em}
.ticker__track>li{gap:.9em}

/* ---------- 3. 部屋（§5.1.4。アスペクト比は幅で決まる箱に入れるだけ） ---------- */
.room .sec-head{margin-bottom:var(--s-5)}
/* 狭い幅（360 など）で「の／ぞける」「夕／方」と語の途中で割れないように。auto-phrase が効かないブラウザは HTML の .nw で守る */
.room .sec-head p{word-break:auto-phrase}
.room-frame{position:relative;max-width:var(--max);margin-inline:auto;padding:6px;background:var(--wood-dk);box-shadow:var(--px-frame-wood)}
.room-bg-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.room-bg-wrap>img.room-bg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;image-rendering:pixelated;
  -webkit-user-select:none;user-select:none}

/* 時間帯（JST。main.js が .time-* を付ける） */
.time-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.time-morning{background:linear-gradient(180deg,color-mix(in srgb,var(--cat-voice-bg) 34%,transparent),color-mix(in srgb,var(--cat-voice-bg) 10%,transparent))}
.time-afternoon{background:transparent}
.time-evening{background:linear-gradient(180deg,color-mix(in srgb,var(--wood) 18%,transparent),color-mix(in srgb,var(--wood) 8%,transparent))}
.time-night{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 38%,transparent),color-mix(in srgb,var(--ink) 26%,transparent))}

/* ホットスポット（room-bg.png 960×540 の絵に合わせて測り直した値。座標は CSS だけの契約） */
.room-bg-wrap .room-object{position:absolute;z-index:2;display:block;padding:0;margin:0;border:0;border-radius:6px;
  background:transparent;cursor:pointer;text-decoration:none;color:var(--ink)}
.room-bg-wrap .room-object:hover,.room-bg-wrap .room-object:focus-visible{outline:2px dashed var(--paper);outline-offset:-2px;
  background:color-mix(in srgb,var(--paper) 12%,transparent)}
#obj-window{left:4%;top:5%;width:20%;height:55%}
#obj-shelf{left:29.5%;top:17%;width:14.5%;height:27%;--ty:-4%}   /* 仕様の 28/17/13/25 だと下の段の本と棚の右端が外れるので、絵に合わせて広げた */
#obj-corkboard{left:47.5%;top:23%;width:17.5%;height:23%;--ty:-22%}
#obj-pc{left:43%;top:46%;width:26%;height:42%;--ty:4%}
#obj-bookshelf{left:69.5%;top:12%;width:20%;height:72%;--ty:2%}
#obj-door{left:91%;top:19%;width:6%;height:67%;--ty:40%}

/* タグ（デスクトップは常時表示。白いピル＋またたく点。扉だけ墨色） */
.room-object .tag{position:absolute;left:50%;top:var(--ty,6%);translate:-50% 0;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 9px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;
  background:var(--paper);color:var(--ink);font:700 var(--t-xs)/1.2 var(--f-jp);letter-spacing:.04em;
  box-shadow:0 0 0 1.5px var(--ink),0 4px 12px -6px color-mix(in srgb,var(--ink) 60%,transparent)}
.room-object .tag::before{content:"";width:7px;height:7px;flex:none;background:var(--pink-ink)}
.room-object--door .tag{background:var(--ink);color:var(--paper)}
.room-object--door .tag::before{background:var(--pink)}
.room-bg-wrap .room-object:hover .tag,.room-bg-wrap .room-object:focus-visible .tag{background:var(--ink);color:var(--paper)}

/* 番号付きの点（モバイルだけ。ホットスポットの中央） */
.room-object .dot{display:none}

/* 案内のピル（モバイルだけ。白50%の旧案内はコントラスト不足で廃止） */
.room-guide{display:none}

/* 部屋の下のボタンの列（モバイルだけ。同じ data-panel を持つので main.js が拾う） */
.room-list{display:none}

@media (max-width:760px){
  .room .sec-head{margin-bottom:var(--s-4)}
  .room-frame{padding:4px;box-shadow:0 -4px 0 var(--wood),0 4px 0 var(--wood)}
  .room-object .tag{display:none}
  .room-object .dot{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:20px;height:20px;
    background:var(--ink);color:var(--paper);font-size:.75rem;line-height:1;box-shadow:0 0 0 2px var(--paper)}
  .room-object--door .dot{background:var(--pink-ink)}
  .room-object .dot::after{content:"";position:absolute;inset:-6px;border:2px solid var(--paper);opacity:0}
  .room-guide{display:block;position:absolute;z-index:3;left:50%;top:6px;translate:-50% 0;margin:0;padding:3px 12px;border-radius:var(--r-pill);
    background:var(--ink);color:var(--paper);font:700 .75rem/1.5 var(--f-jp);letter-spacing:.04em;white-space:nowrap;pointer-events:none}
  .room-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:var(--s-4) auto 0;padding-top:0;list-style:none}
  .room-list .room-object{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:4px 6px;
    border:1.5px solid var(--ink);border-radius:var(--r-s);background:var(--paper);color:var(--ink);cursor:pointer;
    font:700 .875rem/1.25 var(--f-jp);letter-spacing:.02em;text-align:center;text-decoration:none;word-break:keep-all}
  .room-list .room-object .px{display:grid;place-items:center;flex:none;width:18px;height:18px;background:var(--ink);color:var(--paper);font-size:.75rem;line-height:1}
  .room-list .room-object--door{background:var(--ink);color:var(--paper)}
  .room-list .room-object--door .px{background:var(--pink-ink)}
  .room-list .room-object:active{background:var(--mist)}
}
@media (max-width:380px){
  .room-list .room-object{gap:3px;padding-inline:2px;font-size:.75rem;letter-spacing:-.04em}
  .room-list .room-object .px{width:14px;height:16px}
}

/* ---------- 4. パネル（role=dialog。#panel-overlay は既存の ID・構造のまま） ---------- */
.panel-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:var(--s-4);
  background:color-mix(in srgb,var(--ink) 55%,transparent)}
.panel-overlay.active{display:flex}
.panel{display:none;position:relative;width:min(100%,440px);max-height:calc(100svh - 32px);overflow:auto;
  padding:var(--s-6) var(--s-6) var(--s-5);border-radius:var(--r-l);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2)}
.panel.active{display:block}
.panel:focus{outline:none}
.panel-close{position:absolute;top:var(--s-3);right:var(--s-3);display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:var(--mist);color:var(--ink);cursor:pointer}
.panel-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.panel-close:hover{background:var(--lav-200)}
.panel__h{display:flex;align-items:center;gap:.45em;padding-right:48px;margin-bottom:var(--s-3);font-size:var(--t-l)}
.panel__h .ph{color:var(--pink-ink)}
.panel p+p{margin-top:var(--s-2)}
.panel__big{font-size:var(--t-xl);font-weight:700;line-height:1.4}
.panel__big.num{font-size:var(--t-2xl);color:var(--lav-ink)}
.panel__big.num.is-neg{color:var(--ng)}
.panel__num{font-size:1.25em;font-weight:400;color:var(--lav-ink)}
.panel__sub{font-size:var(--t-s);color:var(--ink-2)}
.panel__go{margin-top:var(--s-2)}
.panel__tweet{padding:var(--s-3) var(--s-4);border-radius:var(--r-s);background:var(--mist);line-height:1.75;overflow-wrap:anywhere}
.panel__cats{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s-3) 0}
.panel__cats .chip .num{color:var(--lav-ink)}
.panel__sns{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.panel__sns li{border-bottom:1px solid var(--rule)}
.panel__sns a{display:flex;align-items:center;gap:var(--s-3);min-height:48px;color:var(--ink);text-decoration:none;font-weight:700}
.panel__sns a:hover{background:var(--mist)}
.panel__sns svg{width:18px;height:18px;fill:currentColor}
.panel__sns .num{margin-left:auto;color:var(--lav-ink);font-size:var(--t-s)}

/* ---------- 5. ペット（#pet-wrap[data-mode=room|fixed]・#pet-canvas。z-index は --z-float 以下） ---------- */
.pixel-pet-wrap{opacity:0;transition:opacity .5s var(--ease-out)}
.pixel-pet-wrap.visible:not(.is-hidden-by-footer){opacity:1}
.pixel-pet-wrap[data-mode="room"]{position:absolute;z-index:2;left:27%;bottom:9%;width:14%}
.pixel-pet-wrap[data-mode="fixed"]{position:fixed;z-index:var(--z-float);left:16px;bottom:16px;width:64px;pointer-events:none}
.pixel-pet{display:block;width:100%;height:auto;aspect-ratio:192/208;image-rendering:pixelated;cursor:pointer;pointer-events:auto}
/* 見えていない間（スプライトの読み込み前・フッターに隠れている間）は押せない */
.pixel-pet-wrap:not(.visible) .pixel-pet,#pet-wrap.is-hidden-by-footer .pixel-pet{pointer-events:none}
/* 760px 以下は隅に出さない（どこに置いても行頭・行末の文字とボタンにかぶる。フッターのちびが代わりに手をふる）。部屋の中には出る */
@media (max-width:760px){.pixel-pet-wrap[data-mode="fixed"]{display:none}}
.pixel-pet-shadow{display:none}
.pixel-pet-wrap[data-mode="fixed"] .pixel-pet-shadow{display:block;width:70%;height:8px;margin:-6px auto 0;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--lav-ink) 25%,transparent),transparent 70%)}

/* ---------- 6. Now（§5.1.5） ---------- */
.now__prose{font-size:var(--t-l);font-weight:700;line-height:2;letter-spacing:.03em;text-wrap:pretty}
.now__prose .num{padding:0 .12em;font-size:1.2em;color:var(--lav-ink);white-space:nowrap;
  background:linear-gradient(transparent 68%,var(--blush) 68%)}
.now__prose .num.is-neg{color:var(--ng)}
.now__capsule{margin-top:var(--s-4);font-weight:700;color:var(--ink-2);word-break:auto-phrase;text-wrap:balance}
.now__capsule .num{font-size:1.2em;color:var(--pink-ink)}
.now__foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-5);margin-top:var(--s-3)}
@media (min-width:901px){
  .now>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s-8);align-items:start}
  .now .sec-head{grid-column:1;grid-row:1/span 3;margin:0;padding-top:.35em}
  .now__prose,.now__capsule,.now__foot{grid-column:2}
}
@media (max-width:760px){
  .now__prose{font-size:1.0625rem;line-height:1.9}
}

/* ---------- 7. Works（§5.1.6） ---------- */
.works .display-word{margin-bottom:var(--s-3)}
.works__row+.works__row{margin-top:var(--s-5)}
/* ゲーム枠は伸ばさない（Eye の見解が長い日に主役の面が間延びしないように）。Eye 枠は伸びて「窓辺の新聞を読む」を下にそろえる */
.works__row--a{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-5);align-items:stretch}
.works__row--a .w-game{align-self:start}

/* ゲーム（夜の主役カード） */
.w-game{display:flex;flex-direction:column;gap:var(--s-4)}
.w-game>*+*{margin-top:0}
.w-game .card__label{color:var(--pink-ink)}
.w-game__h{font-size:var(--t-2xl)}
.w-game__arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.w-game__art{position:relative;display:block;overflow:hidden;border-radius:var(--r-m);aspect-ratio:16/10;color:var(--ink);text-decoration:none;
  box-shadow:0 0 0 1px var(--rule)}
.w-game__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.w-game__name{position:absolute;inset:auto 0 0 0;display:block;padding:var(--s-7) var(--s-4) var(--s-3);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--paper) 94%,transparent) 55%);
  font-weight:900;font-size:var(--t-l);line-height:1.3}
.w-game__name small{display:block;margin-top:2px;font-weight:500;font-size:var(--t-xs);color:var(--ink-2);word-break:auto-phrase;text-wrap:balance}
.w-game__art:hover .w-game__name{color:var(--pink-ink)}
.w-game__desc{color:var(--ink-2)}
.w-game__stats{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);color:var(--ink-2);font-size:var(--t-s)}
.w-game__stats .num{margin-right:.15em;font-size:var(--t-xl);color:var(--gold)}
.w-game .btn{align-self:flex-start}

/* Eye（けさの見解） */
.w-eye{display:flex;flex-direction:column;gap:var(--s-3)}
.w-eye>*+*{margin-top:0}
.w-eye__body{display:flex;flex-direction:column;gap:var(--s-3);min-height:12rem}
.w-eye__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.w-eye__meta .num{font-size:var(--t-l);color:var(--ink)}
.w-eye__title{font-size:var(--t-l);line-height:1.5}
.w-eye__title a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--ink);text-decoration:none}   /* タップ領域 44px（§9.3） */
.w-eye__title a:hover{color:var(--pink-ink);text-decoration:underline}
.w-eye__fallback{color:var(--ink-2)}
/* 読み込めないとき・読み込む前だけ出る窓辺の切り抜き。枠の残りを埋める大きさにして、空白を残さない */
.w-eye__window{width:100%;max-inline-size:340px;margin-top:var(--s-2)}
.w-eye .voice .bubble{font-size:var(--t-s);line-height:1.85;
  /* 見解は長い日（400字前後）もあるので行数で切る。切れたときだけ main.js が「続きは窓辺の新聞で」を出す */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;
  /* 下の余白は padding ではなく透明な border で取る（padding だと切った次の行が余白に覗く） */
  padding-bottom:0;border-bottom-width:var(--s-3)}
.w-eye__cont{margin-top:2px;font-size:var(--t-s)}
.w-eye .voice .w-eye__cont{grid-column:1/-1;justify-self:start}
.w-eye__cont[hidden]{display:none}
.w-eye__prev{list-style:none;margin:0;padding:0;font-size:var(--t-s)}
.w-eye__prev li{border-top:1px solid var(--rule)}
.w-eye__prev a{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:var(--s-2);align-items:baseline;min-height:44px;padding:var(--s-2) 0;
  color:var(--ink);font-weight:700;text-decoration:none}
.w-eye__prev a:hover{color:var(--pink-ink)}
.w-eye__prev .num{color:var(--lav-ink)}
.w-eye__more{margin-top:auto}

/* ラジオ／ショート／週報（罫区切りの3列） */
.works__trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--ink)}
.trio{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);align-items:start;align-content:start;padding:var(--s-4);
  color:var(--ink);text-decoration:none}
.trio+.trio{border-left:1px solid var(--rule)}
a.trio:hover,.trio--multi:hover{background:color-mix(in srgb,var(--mist) 70%,transparent)}
.trio__thumb{display:block;width:96px;height:96px;object-fit:cover;border-radius:var(--r-s);box-shadow:0 0 0 1px var(--rule)}
.trio__thumb--tall{height:112px;object-position:50% 40%}   /* short-dance.webp: 頭が上から13%・足が80% */
.trio__thumb-frame{display:block;width:96px;height:112px;border-radius:var(--r-s);background:var(--lav-100);box-shadow:0 0 0 1px var(--rule);overflow:hidden}
.trio__thumb-frame .trio__thumb--tall{width:100%;height:100%;box-shadow:none;mix-blend-mode:multiply}
.trio__when{font-size:var(--t-xs);font-weight:700;color:var(--pink-ink);letter-spacing:.04em;word-break:auto-phrase;text-wrap:balance}
.trio__when .lat{font-weight:800}
.trio__h{margin:2px 0 4px;font-size:var(--t-l)}
.trio__body>p:not(.trio__when){font-size:var(--t-s);color:var(--ink-2);line-height:1.75}
.trio__links{display:flex;flex-wrap:wrap;gap:0 var(--s-4)}
.trio__links .more{font-size:var(--t-s)}

/* 年表（面・広い方）＋実験室 */
.works__row--c{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5);align-items:stretch}
.w-tl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-5);align-items:center;padding:var(--s-5) var(--s-6)}
.w-tl>*+*{margin-top:0}
.w-tl__polas{position:relative;height:200px}
.w-tl__polas .pola{position:absolute;width:48%;padding:6px 6px 16px}
.w-tl__polas .pola img{aspect-ratio:1;object-position:50% 50%}
.w-tl__polas .pola:nth-child(1){left:0;top:20px;--tilt:-6deg}
.w-tl__polas .pola:nth-child(2){left:26%;top:0;z-index:1;--tilt:3deg}
.w-tl__polas .pola:nth-child(3){left:52%;top:28px;--tilt:-2deg}
.w-tl__h{margin:var(--s-2) 0;font-size:var(--t-2xl)}
.w-tl__text>p:not(.card__label){color:var(--ink-2);word-break:auto-phrase;text-wrap:balance}
.w-tl__text .btn{margin-top:var(--s-4)}
.card--link.w-tl:hover .btn{transform:translateY(-2px)}
.w-lab{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-m)}
.w-lab img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--rule)}
.w-lab .card__label{margin-top:var(--s-2)}
.w-lab__h{font-size:var(--t-xl);word-break:auto-phrase;text-wrap:balance}
.w-lab p:not(.card__label){font-size:var(--t-s);color:var(--ink-2)}

@media (min-width:1101px){
  .w-game__art{aspect-ratio:16/9}
  .about__profile{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}   /* プロフィールは2組ずつ並べて縦を詰める */
}
@media (min-width:901px){
  .w-eye .voice .bubble{-webkit-line-clamp:6;line-clamp:6}
  .w-eye__prev span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}   /* 前の日の見出しは1行（全文は Eye で） */
  .room .sec-head{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-7);align-items:end}
  .room .sec-head p{padding-bottom:.3em}
  .w-game{gap:var(--s-3)}
  .about__pic{max-inline-size:360px}
  .works>.wrap,.follow>.wrap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-7);align-items:end}
  .works>.wrap>*,.follow>.wrap>*{grid-column:1/-1}
  .works>.wrap>.display-word,.follow>.wrap>.display-word{grid-column:1;margin:0}
  .works>.wrap>.sec-head,.follow>.wrap>.sec-head{grid-column:2;margin:0;padding-bottom:.4em}
  .works>.wrap>.works__row--a{margin-top:var(--s-6)}
  .follow__list{margin-top:var(--s-6)}
}
/* 901〜1100px は3列のまま列が細くなるので、左のサムネを 72px に縮めて本文の幅を取る
   （16:9 に切り抜くとラジオの題字が切れ、ショートの縦長サムネが浮くため、切り抜きはしない） */
@media (max-width:1100px){
  .trio{grid-template-columns:72px minmax(0,1fr);gap:var(--s-3);padding-inline:var(--s-3)}
  .trio__thumb{width:72px;height:72px}
  .trio__thumb-frame{width:72px;height:96px}
  .trio__thumb--tall{height:96px}
}
@media (max-width:900px){
  .works__row--a,.works__row--c{grid-template-columns:minmax(0,1fr)}
  .works__trio{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:96px minmax(0,1fr);padding-inline:var(--s-4)}
  .trio__thumb{width:96px;height:96px;aspect-ratio:auto}
  .trio__thumb-frame{width:96px;height:128px;aspect-ratio:auto}
  .trio__thumb--tall{height:128px;object-position:50% 40%}
  .trio+.trio{border-left:0;border-top:1px solid var(--rule)}
  .w-lab{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--s-5);align-items:start}
  .w-lab img{grid-row:1/4}
  .w-lab .card__label{margin-top:0}
}
@media (max-width:760px){
  .works__row+.works__row{margin-top:var(--s-5)}
  .w-game{gap:var(--s-3)}
  .w-game__h{font-size:var(--t-l)}
  .w-game__desc{font-size:var(--t-s)}
  .w-game__stats{gap:var(--s-1) var(--s-3)}
  .w-game__stats .num{font-size:var(--t-l)}
  .w-game__arts{gap:var(--s-2)}
  .w-game__name{padding:var(--s-6) var(--s-3) var(--s-2);font-size:var(--t-s)}
  .w-game__name small{display:none}
  .w-eye{padding:var(--s-4)}
  .w-eye__body{min-height:0}
  .w-eye .voice .bubble{-webkit-line-clamp:6;line-clamp:6}
  .w-eye__window{max-inline-size:220px}
  .w-eye .voice{grid-template-columns:32px minmax(0,1fr);row-gap:var(--s-2)}
  .w-eye .voice>img{width:32px;height:32px}
  .w-eye .voice>div{display:contents}
  .w-eye .voice__label{align-self:center;margin:0}
  .w-eye .voice .bubble{grid-column:1/-1;border-radius:var(--r-m)}
  .trio{grid-template-columns:64px minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0 var(--s-3)}
  .trio__thumb{width:64px;height:64px}
  .trio__thumb-frame{width:64px;height:88px}
  .trio__thumb--tall{height:88px}
  .trio__h{margin:0 0 2px;font-size:var(--t-m)}
  .trio__body>p:not(.trio__when){line-height:1.65}
  .w-tl{grid-template-columns:minmax(0,1fr);padding:var(--s-5)}
  .w-tl{gap:var(--s-3)}
  .w-tl{grid-template-columns:minmax(0,1fr) 128px;align-items:start}
  .w-tl__polas{grid-column:2;grid-row:1;height:120px;max-width:none}
  .w-tl__polas .pola{width:100%;padding:4px 4px 10px;top:4px}
  .w-tl__polas .pola:nth-child(n+2){display:none}
  .w-tl__text{grid-column:1/-1;grid-row:1}
  .w-tl__text>p:not(.card__label):not(:last-child){padding-right:120px}
  .w-tl__h{font-size:var(--t-xl)}
  .w-tl__text .btn{margin-top:var(--s-2)}
  .w-lab{grid-template-columns:120px minmax(0,1fr);padding:0;column-gap:var(--s-4)}
  .w-lab__h{font-size:var(--t-l)}
}
@media (max-width:380px){
  .w-tl{grid-template-columns:minmax(0,1fr) 88px}
  .w-tl__polas{height:88px}
  .w-tl__text>p:not(.card__label):not(:last-child){padding-right:80px}
}

/* ---------- 8. About（§5.1.7） ---------- */
.about__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.about__pic{margin:0}
.about__pic img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-l);box-shadow:var(--sh-2)}
.about__text h2{font-size:var(--t-2xl)}
.about__body{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.about__profile{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-s);row-gap:var(--s-2);column-gap:var(--s-5)}
.about__profile dd{font-weight:700}
@media (max-width:760px){
  .about__grid{grid-template-columns:112px minmax(0,1fr);gap:var(--s-4);align-items:start}
  .about__pic img{border-radius:50%;box-shadow:var(--sh-1)}
  .about__text{display:contents}
  .about__text h2{align-self:center;font-size:var(--t-xl)}
  .about__body,.about__profile{grid-column:1/-1}
  .about__body{margin-top:0}
  .about__profile{margin-top:var(--s-2);padding-top:var(--s-3);row-gap:0;column-gap:var(--s-4);font-size:var(--t-xs);line-height:1.9}
  .about__body p{font-size:var(--t-s);line-height:1.8}
}

/* ---------- 9. Follow（§5.1.8） ---------- */
.follow .display-word{margin-bottom:var(--s-3)}
.follow__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.follow__list li{border-bottom:1px solid var(--ink)}
.follow__list a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr) 48px;align-items:center;gap:var(--s-5);
  min-height:44px;padding:var(--s-3) var(--s-2);color:var(--ink);text-decoration:none}
.follow__name{font:800 var(--t-2xl)/1 var(--f-latin);letter-spacing:-.02em}
.follow__handle{font-family:var(--f-pixel);color:var(--lav-ink)}
.follow__desc{font-size:var(--t-s);color:var(--ink-2);word-break:auto-phrase;text-wrap:balance}
.follow__go{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--ink);border-radius:50%}
.follow__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.follow__list a:hover{background:color-mix(in srgb,var(--mist) 70%,transparent)}
.follow__list a:hover .follow__name{text-shadow:-1px 0 var(--pink),1px 0 var(--glitch)}
.follow__list a:hover .follow__go{background:var(--ink);color:var(--paper)}
@media (max-width:760px){
  .follow__list a{grid-template-columns:auto minmax(0,1fr) 44px;gap:0 var(--s-3);padding:var(--s-2) 0}
  .follow__name{font-size:var(--t-xl)}
  .follow__handle{font-size:var(--t-s)}
  .follow__desc{grid-column:1/3;font-size:var(--t-xs)}
  .follow__go{grid-row:1/3;grid-column:3;width:44px;height:44px}
}

/* ---------- 10. モーション（opt-in。常時動くのはペット・ティッカー・オーロラの3つだけ） ---------- */
@media (prefers-reduced-motion:no-preference){
  /* 題字の era（8秒に約0.25秒、ヘッダーのロゴと 2.5 秒ずらす。崩す帯は高さ 6〜9%） */
  .cover__mast .era::before{animation:mast-g1 8s steps(1) 3.5s infinite}
  .cover__mast .era::after{animation:mast-g2 8s steps(1) 3.5s infinite}
  .cover.is-away .cover__mast .era::before,.cover.is-away .cover__mast .era::after{animation-play-state:paused}

  /* 部屋が画面外なら、タグのまたたき・点の脈動も止める（main.js が #room-hero に .is-away） */
  .ticker.is-away .ticker__track{animation-play-state:paused}
  .room.is-away .room-object .tag::before,.room.is-away .room-object .dot::after{animation-play-state:paused}

  .panel.active{animation:panel-in var(--dur-2) var(--ease-out)}
  .follow__list a .follow__name{transition:text-shadow var(--dur-1) var(--ease-out)}
  .follow__list a .follow__go,.panel-close,.room-list .room-object{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1)}
}
@keyframes mast-g1{0%,96.8%,100%{clip-path:inset(0 0 100% 0)}97%{clip-path:inset(44% 0 48% 0)}98%{clip-path:inset(68% 0 25% 0)}99%{clip-path:inset(0 0 100% 0)}}
@keyframes mast-g2{0%,97.4%,100%{clip-path:inset(100% 0 0 0)}97.6%{clip-path:inset(28% 0 64% 0)}98.6%{clip-path:inset(57% 0 36% 0)}99.6%{clip-path:inset(100% 0 0 0)}}
@keyframes panel-in{from{opacity:0;transform:translateY(12px) scale(.98)}}