/* ============================================================
   トークン — 全部ジャケット cover1 から引いている
   地は純白 #FFFFFF、墨は #101010（実測。色味はゼロ）。
   表紙が「白地・黒の粒・縁も影もなし」と決めている以上、
   サイト側に差し色を足すと表紙だけが浮く。だから無彩色で通す。
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --ink:#101010;          /* 表紙の文字の実測値 */
  --g2:#4A4A4A;           /* 副次テキスト   9.0:1 */
  --g3:#6E6E6E;           /* 微小ラベル     5.3:1 */
  --g4:#767676;           /* 下限。これ以上薄くしない 4.5:1 */
  --g5:#D8D8D8;           /* 罫 */
  --g6:#EDEDED;           /* 面 */
  --g7:#F7F7F7;           /* 節の地 */

  --f-display:"Didot","Bodoni Moda","Bodoni 72","Hoefler Text",Garamond,"Times New Roman",serif;
  --f-mincho:"Hiragino Mincho ProN","Shippori Mincho B1","Yu Mincho",serif;
  --f-gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 余白は 4/8/16/24/48 の段だけ。中間値を作らない */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px; --s7:144px;

  --d-1:120ms; --d-2:220ms; --d-3:420ms; --d-4:900ms;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.5,0,.75,0);
  --stagger:45ms;

  --wrap:1120px;
  --nav:52px;
}

*,*::before,*::after{box-sizing:border-box}
/* 🚩 hidden 属性は display の指定に負ける。.menu は display:flex なので、
   これが無いとメニューが開きっぱなしになる。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-gothic);font-size:16px;line-height:1.7;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)}
@media(min-width:768px){.wrap{padding-inline:var(--s5)}}

/* 和文の折り返し。句で折る */
.jp{word-break:auto-phrase;line-break:strict}

/* 微小ラベル — 天測表の声。数字は必ず等幅・桁揃え */
.mono{
  font-family:var(--f-mono);font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.18em;text-transform:uppercase;
}
.lbl{font-size:11px;color:var(--g3);}
.lbl.mono{letter-spacing:.22em}

/* ============================================================ 上帯 */
.nav{
  position:sticky;top:0;z-index:70;height:var(--nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--g5);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
/* 上帯は道具。ディスプレイ書体はジャケットの中の1つだけにして、
   同じ名義が2つの声で並ぶのを避ける。小文字は名義そのものなので大文字化しない。 */
.nav-name{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-decoration:none;
}
.nav-name{display:flex;align-items:center;height:var(--nav)}

/* ============================================================ 表紙 */
/* 左揃え。ジャケットの中の「tenqboy」が上帯の「tenqboy」と同じ縦線に乗る。
   中央揃えだと、3行に折れたとき本文が読みにくくなる（3行以上の中央揃えは禁止）。 */
.hero{padding-block:var(--s6)}
/* 表紙の地は紙と同じ純白。枠も影も置かない＝紙に直接刷ってあるように見せる */
.hero-fig img{width:100%}
.hero-meta{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}

/* ============================================================ 節 */
.sec{padding-block:var(--s6)}
.sec--tint{background:var(--g7)}
.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}
.sec-head::after{content:"";flex:1;height:1px;background:var(--g5)}
.sec-h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:.005em;margin:0;
}

/* ============================================================ 聴く */
.player{max-width:640px;margin-inline:auto}
/* 表紙が兼ねるヒーロー。左に寄せて、以降の節と同じ縦線に乗せる */
.player--hero{max-width:560px;margin-inline:0}
.facade{
  position:relative;aspect-ratio:1/1;width:100%;
  border:0;padding:0;background:none;cursor:pointer;display:block;
  font:inherit;color:inherit;
}
.facade img{width:100%;height:100%;object-fit:cover}
.facade-ring{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
  border:1px solid var(--ink);background:rgba(255,255,255,.72);
  display:grid;place-items:center;
  transition:background var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
}
.facade-ring::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid var(--ink);
  border-block:11px solid transparent;
  transition:border-left-color var(--d-2) var(--e-out);
}
.facade:hover .facade-ring,.facade:focus-visible .facade-ring{background:var(--ink);transform:scale(1.04)}
.facade:hover .facade-ring::after,.facade:focus-visible .facade-ring::after{border-left-color:var(--paper)}
.player-foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  justify-content:space-between;align-items:center;margin-top:var(--s3)}
.player-foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.frame{position:relative;aspect-ratio:1/1;width:100%;background:var(--g6)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame--dead{display:grid;place-items:center}

/* ============================================================ 収録曲（署名要素）
   アルバムは「ひと晩の Aubade」。だから5本の罫は5本の棒グラフではなく、
   11:57 という1本の夜を5つに割ったもの。黒い区間の位置も長さも実測値で、
   上から下へ読むと黒が左から右へ歩いていく＝夜が明けていく。 */
.tracks{list-style:none;margin:var(--s5) 0 0;padding:0}
.track{padding-block:var(--s4)}
.track-top{display:flex;align-items:baseline;gap:var(--s3)}
.track-no{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--g3);letter-spacing:.1em}
.track-name{font-family:var(--f-display);font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin:0;flex:1}
.track-time{font-family:var(--f-mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--g2)}
.track-rule{position:relative;height:1px;background:var(--g5);margin-top:var(--s3)}
.track-rule i{
  position:absolute;top:-1px;left:var(--x);width:var(--w);height:3px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
}
/* 各曲の位置と長さ。11:57 を1本の夜として割った実測値 */
.track:nth-child(1) .track-rule i{--x:0.00%;--w:20.51%}
.track:nth-child(2) .track-rule i{--x:20.51%;--w:17.05%}
.track:nth-child(3) .track-rule i{--x:37.56%;--w:20.48%}
.track:nth-child(4) .track-rule i{--x:58.05%;--w:17.63%}
.track:nth-child(5) .track-rule i{--x:75.68%;--w:24.32%}
.tracks-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);
  border-top:1px solid var(--ink);padding-top:var(--s3);margin-top:var(--s3);
}

/* ============================================================ ライブ */
.date{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(46px,12vw,132px);line-height:.92;letter-spacing:.01em;
  margin:0;
}
.date small{display:block;font-size:.24em;letter-spacing:.3em;margin-top:var(--s3);font-family:var(--f-mono);color:var(--g2)}
.facts{margin:var(--s5) 0 0;display:grid;gap:0}
.fact{
  display:grid;grid-template-columns:7.5em 1fr;gap:var(--s3);
  padding-block:var(--s3);border-top:1px solid var(--g5);align-items:baseline;
}
.fact:last-child{border-bottom:1px solid var(--g5)}
.fact dd{margin:0;font-size:16px}
.fact .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500}

.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:52px;padding:0 var(--s4);
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity var(--d-1) var(--e-out),transform var(--d-1) var(--e-out);
}
.btn:hover{opacity:.82}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ============================================================ グッズ */
.goods{display:grid;gap:var(--s5)}
@media(min-width:720px){.goods{grid-template-columns:1fr 1fr;gap:var(--s5)}}
/* 画像の比率が2枚で違う。下端で揃え、説明文の開始位置を一致させる */
.good{display:flex;flex-direction:column}
.good figure{margin:0;flex:1;display:flex;align-items:flex-end}
.good img{width:100%;border:1px solid var(--g5)}
.good-name{font-family:var(--f-display);font-size:26px;margin:var(--s4) 0 var(--s1);line-height:1.2}
.good-spec{font-size:14px;color:var(--g2);margin:0}
.good-price{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;font-size:19px;margin-top:var(--s3)}
.good-price span{font-size:12px;color:var(--g3);margin-left:var(--s2);letter-spacing:.1em}

/* ============================================================ tenqboy */
.about{display:grid;gap:var(--s5)}
/* 紹介文は短い。写真と上端で揃えると下が大きく空くので、中央で揃える */
@media(min-width:860px){.about{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s6);align-items:center}}
/* ページで唯一、事実ではなく言葉が主役になる場所 */
.lead{font-family:var(--f-mincho);font-size:clamp(20px,2.8vw,28px);line-height:1.7;
      margin:var(--s4) 0 0;max-width:22em}
.copy{margin-top:var(--s4);max-width:34em}
.copy p{font-family:var(--f-mincho);font-size:16px;line-height:2.05;margin:0 0 var(--s3);color:var(--g2)}
.copy p:last-child{margin-bottom:0}

.about p{font-family:var(--f-mincho);font-size:16px;line-height:2.05;margin:0 0 var(--s4)}
.about p:last-child{margin-bottom:0}
.about-first{font-size:clamp(19px,2.6vw,24px) !important;line-height:1.75 !important}

/* ============================================================ 脚 */
.foot{border-top:1px solid var(--g5);padding-block:var(--s5) var(--s6)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-bottom:var(--s4)}
.foot-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  transition:opacity var(--d-1) var(--e-out);
}
.foot-links a span{border-bottom:1px solid var(--g5);padding-bottom:3px;transition:border-color var(--d-1) var(--e-out)}
.foot-links a:hover span{border-color:var(--ink)}
.sub{color:var(--g2);font-size:14px}
.ink{color:var(--ink)}
.ul{border-bottom:1px solid var(--g5);padding-bottom:3px}
.flush{margin:0}
.foot-fine{font-size:12px;color:var(--g4);line-height:1.8;margin:0}


/* ============================================================ 焦点 */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ============================================================ 登場
   スクロール駆動。対応環境ではコンポジタで走る。 */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
@supports (animation-timeline:view()){
  .rv{opacity:1;transform:none;animation:rise linear both;
      animation-timeline:view();animation-range:entry 0% cover 26%}
  .rv.in{transition:none}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 罫が伸びるのは「時間が流れる」の意味を持つときだけ。1回だけ */
.track-rule i{transition:transform var(--d-4) var(--e-out)}
.track.in .track-rule i{transform:scaleX(1)}
@supports (animation-timeline:view()){
  .track-rule i{animation:grow var(--d-4) var(--e-out) both;
                animation-timeline:view();animation-range:entry 0% cover 22%}
  .track.in .track-rule i{transition:none}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .track-rule i{transform:scaleX(1)}
}

/* ============================================================ ハンバーガー
   3本の罫。ページ全体が罫でできているので、メニューも罫で作る。 */
.burger{
  display:grid;place-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;padding:0;cursor:pointer;
}
.burger span{
  display:block;width:20px;height:1px;background:var(--ink);
  transition:transform var(--d-2) var(--e-out),opacity var(--d-1) var(--e-out);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================ メニュー */
.menu{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;align-items:center;
  animation:fade var(--d-2) var(--e-out) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.menu-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.menu-list a{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(40px,9vw,76px);line-height:1.12;
  text-decoration:none;display:inline-block;
  transition:opacity var(--d-1) var(--e-out);
  animation:rise var(--d-3) var(--e-out) both;
}
.menu-list a:hover{opacity:.5}
.menu-list li:nth-child(1) a{animation-delay:calc(var(--stagger) * 1)}
.menu-list li:nth-child(2) a{animation-delay:calc(var(--stagger) * 2)}
.menu-list li:nth-child(3) a{animation-delay:calc(var(--stagger) * 3)}
/* いま見ているページ。色を足さず、罫で示す */
.menu-list a[aria-current="page"]{border-bottom:1px solid var(--ink)}
.menu-foot{
  margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  align-items:center;
}
.menu-foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* ============================================================ 入口（Home から各ページへ） */
.door{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--g5);padding-block:var(--s4);
  text-decoration:none;transition:opacity var(--d-1) var(--e-out);
}
.door:last-of-type{border-bottom:1px solid var(--g5)}
.door:hover{opacity:.55}
.door-t{font-family:var(--f-display);font-size:clamp(26px,4vw,40px);line-height:1.1}
.door-s{font-size:14px;color:var(--g2)}
.door-a{font-family:var(--f-mono);font-size:13px;font-weight:500}

/* ============================================================ 作品 */
.release{display:grid;gap:var(--s5)}
@media(min-width:820px){
  .release{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s6);align-items:start}
}
.release-h{font-family:var(--f-display);font-size:clamp(32px,5vw,48px);line-height:1.05;margin:0}
.release-meta{margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}