/* PHENOMENA — AMIX MOTION ARCHIVE 02
   夜の黒を土台に、差し色は金ひとつ。現象名は明朝の縦組み、数値や案内は Space Mono。
   Vol.1（web-motion）のグリッドと小さな英字ラベルの組み方を骨格として引き継ぐ。 */
:root{
  --night:#06070b;
  --night-2:#0c0e15;
  --paper:#ece6da;
  --paper-dim:rgba(236,230,218,.58);
  --paper-faint:rgba(236,230,218,.22);
  --gold:#d9a441;
  --line:rgba(236,230,218,.14);
  --mincho:'Shippori Mincho','Noto Serif JP',serif;
  --latin:'Cormorant Garamond','Noto Serif',serif;
  --mono:'Space Mono',monospace;
  --sans:'Outfit','Noto Sans JP',sans-serif;
}
[hidden]{display:none!important}
/* 一覧ページの窓に埋め込むとき（?embed=1）：作品だけを見せる */
html.is-embed,html.is-embed body{overflow:hidden;height:100%;background:transparent}
html.is-embed .ph-top,html.is-embed .ph-phases,html.is-embed .ph-title,html.is-embed .ph-bottom,html.is-embed .ph-result,html.is-embed .ph-article{display:none!important}
html.is-embed .ph-hero{height:100%}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--night);color:var(--paper);-webkit-text-size-adjust:100%}
/* 作品ページの READ は解説まで、するっと流れて着く（動きを減らす設定の人には一瞬で飛ぶまま） */
@media (prefers-reduced-motion:no-preference){html:has(#read){scroll-behavior:smooth}}
body{background:var(--night);font-family:var(--mincho);line-height:1.9;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
::selection{background:var(--gold);color:var(--night)}

/* ---------- 1画面目：作品 ---------- */
.ph-stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
/* 読み込み中：金の線が静かに伸び縮みするだけ。最初のコマが描けたら（html.ph-ready）フェードで消える */
.ph-loading{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--night);pointer-events:none;transition:opacity 1s ease,visibility 1s}
.ph-loading i{display:block;width:min(180px,40vw);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 10px rgba(217,164,65,.5);animation:phLoad 1.8s ease-in-out infinite}
@keyframes phLoad{0%,100%{transform:scaleX(.15);opacity:.35}50%{transform:scaleX(1);opacity:1}}
html.ph-ready .ph-loading{opacity:0;visibility:hidden}
html.is-embed .ph-loading{display:none}
@media (prefers-reduced-motion:reduce){.ph-loading i{animation:none;transform:none}}
.ph-hero{position:relative;height:100vh;height:100svh;z-index:1;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ph-hero.is-drag{cursor:grabbing}
.ph-hero{cursor:grab}

.ph-top{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--paper-dim);pointer-events:none}
.ph-top a,.ph-top button{pointer-events:auto}
.ph-back{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--paper-faint);border-radius:100px;padding:7px 14px 7px 12px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--paper);text-decoration:none;
  transition:background .25s,color .25s,border-color .25s}
.ph-back:hover{background:var(--paper);color:var(--night);border-color:var(--paper)}
.ph-back svg{width:13px;height:13px}
.ph-series{display:flex;align-items:center;gap:18px}
.ph-series b{font-family:var(--sans);font-weight:800;letter-spacing:.12em;color:var(--paper)}
.ph-no{text-align:right}
.ph-no b{color:var(--gold);font-weight:700}
/* 軽量モードのスイッチ（指で操作する端末と狭い画面だけ。js/lite.js が出す） */
.ph-lite,.ph-sound{margin-top:10px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--paper-faint);border-radius:100px;padding:6px 12px;
  font-family:var(--mincho);font-size:11px;letter-spacing:.12em;color:var(--paper-dim);pointer-events:auto;transition:color .3s,border-color .3s}
.ph-lite::before,.ph-sound::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--paper-faint);transition:background .3s}
.ph-lite[aria-pressed="true"],.ph-sound[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.ph-lite[aria-pressed="true"]::before,.ph-sound[aria-pressed="true"]::before{background:var(--gold)}
/* 音の ON/OFF（js/sound.js）。初めは OFF。番号の左に置く（下へ伸ばすと、長い縦書きの題とぶつかる） */
.ph-no{position:relative}
.ph-sound{position:absolute;top:0;right:calc(100% + 14px);margin:0;white-space:nowrap}
/* まだ音を選んでいない人へ：開いて少ししてから、金の波紋がゆっくり3回広がる（光らせて点滅はさせない） */
.ph-sound.is-call{border-color:rgba(217,164,65,.7);color:var(--paper)}
.ph-sound.is-call{animation:phCall 2.6s cubic-bezier(.2,.6,.3,1) 1.2s 3 both}
@keyframes phCall{0%{box-shadow:0 0 0 0 rgba(217,164,65,.55)}70%{box-shadow:0 0 0 12px rgba(217,164,65,0)}100%{box-shadow:0 0 0 12px rgba(217,164,65,0)}}
@media (prefers-reduced-motion:reduce){.ph-sound.is-call{animation-duration:.01s;animation-iteration-count:1}}
.ph-sound b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.06em}

/* 縦組みの題 */
.ph-title{position:absolute;right:30px;top:50%;transform:translateY(-54%);writing-mode:vertical-rl;pointer-events:none;
  display:flex;flex-direction:row;align-items:flex-start;gap:14px}
.ph-title h1{font-family:var(--mincho);font-weight:600;font-size:min(clamp(46px,6.4vw,96px),11vh);line-height:1;letter-spacing:.22em;color:var(--paper);white-space:nowrap}   /* 長い題でも1行（縦1列）に収める */
.ph-title .ph-roman{font-family:var(--latin);font-style:italic;font-weight:500;font-size:clamp(15px,1.5vw,20px);line-height:1;letter-spacing:.08em;color:var(--paper-dim);white-space:nowrap}   /* 短い英題なので折り返さず1列に（Bait Ball や Senkō-hanabi が2列に割れていた）。縦書きでは行間が列の幅になるので1に */

/* 移り変わる段階 */
.ph-phases{position:absolute;left:30px;top:50%;transform:translateY(-50%);list-style:none;display:flex;flex-direction:column;gap:18px;pointer-events:none}
.ph-phases li{display:flex;align-items:center;gap:12px;font-family:var(--mincho);font-size:15px;letter-spacing:.18em;color:var(--paper-faint);transition:color .8s}
.ph-phases li i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:transform .8s,opacity .8s}
.ph-phases li span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;opacity:.8}
.ph-phases li.is-past{color:var(--paper-dim)}
.ph-phases li.is-now{color:var(--gold)}
.ph-phases li.is-now i{opacity:1;transform:scale(1.5)}

.ph-bottom{position:absolute;left:28px;right:28px;bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--paper-dim);pointer-events:none}
.ph-hint{line-height:1.8}
.ph-hint b{color:var(--paper);font-weight:400;font-family:var(--mincho);font-size:13px;letter-spacing:.12em}
.ph-clock{font-variant-numeric:tabular-nums;text-align:right}
.ph-readmore{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--paper-faint);padding-bottom:3px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.ph-readmore:hover{border-color:var(--paper)}

/* 結果 */
.ph-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.ph-result.is-show{opacity:1}
.ph-result.is-show .ph-again{pointer-events:auto}
.ph-result p{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,4vw,44px);letter-spacing:.24em;color:var(--paper)}
.ph-result small{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--paper-dim)}
.ph-again{margin-top:26px;display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border:1px solid var(--gold);border-radius:100px;
  font-family:var(--mincho);font-size:15px;letter-spacing:.2em;color:var(--gold);transition:background .25s,color .25s}
.ph-again:hover,.ph-again:focus-visible{background:var(--gold);color:var(--night)}

/* ---------- 2画面目以降：読みもの ---------- */
.ph-article{position:relative;z-index:2;background:linear-gradient(to bottom,rgba(6,7,11,0),var(--night) 160px);padding:180px 28px 0}
.ph-article-inner{max-width:1080px;margin:0 auto}
.ph-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:22px}
.ph-lead span{display:inline-block}
.ph-lead{font-family:var(--mincho);font-weight:600;font-size:clamp(22px,2.6vw,32px);line-height:1.75;letter-spacing:.06em;max-width:30em}
.ph-body{margin-top:28px;max-width:38em;font-size:15.5px;line-height:2.15;color:rgba(236,230,218,.82);letter-spacing:.03em}
.ph-body p+p{margin-top:1.1em}

.ph-sec{border-top:1px solid var(--line);margin-top:110px;padding-top:44px;display:grid;grid-template-columns:220px 1fr;gap:40px}
.ph-sec h2{font-family:var(--mincho);font-weight:600;font-size:20px;letter-spacing:.14em;line-height:1.6}
.ph-sec h2 small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--paper-dim);margin-bottom:8px}

.ph-five{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-left:1px solid var(--line)}
.ph-five li{border-right:1px solid var(--line);padding:4px 18px 8px;min-height:250px;display:flex;flex-direction:column;gap:16px}
.ph-five li b{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:600;font-size:26px;letter-spacing:.2em;color:var(--paper)}
.ph-five li span{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.06em}
.ph-five li p{font-size:13.5px;line-height:1.95;color:rgba(236,230,218,.75)}

.ph-tech{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.ph-tech li h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--paper);margin-bottom:8px}
.ph-tech li p{font-size:14px;line-height:2;color:rgba(236,230,218,.75)}

.ph-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 32px}
.ph-ctl label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--paper-dim);margin-bottom:10px}
.ph-ctl label output{color:var(--paper)}
.ph-ctl input[type=range]{width:100%;accent-color:var(--gold);touch-action:pan-y}
.ph-seg{display:flex;gap:6px}
.ph-seg button{flex:1;border:1px solid var(--paper-faint);border-radius:100px;padding:7px 0;font-family:var(--mono);font-size:11px;color:var(--paper-dim);transition:.2s}
.ph-seg button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.ph-relight{grid-column:1/-1;justify-self:start;border:1px solid var(--paper-faint);border-radius:100px;padding:10px 22px;font-family:var(--mincho);font-size:14px;letter-spacing:.16em;transition:.2s}
.ph-relight:hover{border-color:var(--gold);color:var(--gold)}

.ph-footer{margin-top:140px;border-top:1px solid var(--line);padding:40px 0 48px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ph-footer-logo{font-family:var(--sans);font-weight:800;font-size:clamp(40px,7vw,88px);line-height:.9;letter-spacing:.02em}
.ph-footer-logo small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--paper-dim);margin-top:12px}
.ph-footer nav{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-align:right}
.ph-footer nav a{color:var(--paper-dim);text-decoration:none}
.ph-footer nav a:hover{color:var(--paper)}
.ph-copy{color:var(--paper-dim)}
.ph-c{font-family:var(--sans);font-size:1.05em;vertical-align:-.04em}   /* Space Mono の © は上に寄るので、英字見出しの書体で高さをそろえる */

@media (max-width:820px){
  .ph-sec{grid-template-columns:1fr;gap:24px;margin-top:80px}
  .ph-five{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--line)}
  .ph-five li{border-right:0;border-bottom:1px solid var(--line);min-height:0;flex-direction:row;padding:18px 0;gap:18px}
  .ph-five li b{font-size:22px}
  .ph-tech,.ph-controls{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ph-top{top:14px;left:16px;right:16px;font-size:10px}
  .ph-series span{display:none}
  .ph-title{right:14px;gap:8px;top:124px;transform:none}   /* 右上の番号と軽量モードのスイッチの下から */
  .ph-title h1{font-size:min(40px,9vh)}
  .ph-title .ph-roman{font-size:13px}
  .ph-phases{left:16px;gap:12px;top:92px;transform:none}
  .ph-phases li{font-size:12px;gap:8px}
  .ph-phases li span{display:none}
  .ph-bottom{left:16px;right:16px;bottom:18px;font-size:10px}
  .ph-article{padding:140px 18px 0}
  .ph-body{font-size:15px}
}