*, *::before, *::after { box-sizing: border-box; }

/* display を指定した要素でも hidden 属性で確実に隠す（JS が終わったイベントに付ける） */
[hidden] { display: none !important; }

/* 欧文は EB Garamond。和文より小さく見えるので size-adjust で合わせる */
@font-face {
    font-family: "EB Garamond";
    font-weight: 400 800;
    font-display: swap;
    src: url("../assets/fonts/eb-garamond-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
    size-adjust: 105%;
}

:root {
    /* 輪の直径。リンクの分だけ高さを空ける */
    --d: min(100vw - 32px, 600px, 100svh - 140px);
}

body {
    margin: 0;
    background: #e9e8e3;
    color: #22211f;
    font-family: "EB Garamond", "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
    /* EB Garamond の数字は既定でオールドスタイル。和文の中では小さく沈むのでライニングにそろえる */
    font-variant-numeric: lining-nums;
}

/* 輪の文字は寸法を測るまで隠す。ページ全体は書体を待たずに出す */
.js.ring:not(.measured) .line-top,
.js.ring:not(.measured) .line-bottom,
.js.ring:not(.measured) .ghost {
    visibility: hidden;
}
.js.ring:not(.measured) .ghost { transition: none; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 既定（JS なし・動きを減らす設定）は、1 画面目のあとに見出しの画面を並べるだけ */
.scroller {
    display: flex;
    flex-direction: column;
    font-size: max(11px, calc(var(--d) * 0.0317));
    letter-spacing: 0.1em;
}

.pin {
    position: relative;
    order: 2;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* 見出しと続きの文章をひとまとまりにして、画面の中央に置く */
.below {
    width: min(32em, 100% - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.lead {
    margin: 0;
    text-align: center;
    line-height: 1.9;
    word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す */
}

.work {
    padding: 14px 12px; /* 押せる範囲を 44px 以上にする */
    color: inherit;
    text-underline-offset: 0.3em;
}

.work:hover { text-decoration-thickness: 2px; }

.page2 { display: none; }

/* 輪を使うとき: 見出しの層を 1 画面目に重ねて固定し、1 画面分のスクロールで中央に並べる */
.ring .scroller { display: block; }
.ring .pin {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: -100svh;
    pointer-events: none;
}
.ring .work, .ring .lead, .ring .credits { opacity: 0; }

/* 背景をエンドロールのように流れる Works のタイトル（輪を使うときだけ）。スマホは 1 列で、中央の文章の後ろでは消す */
.credits { display: none; }
.ring .credits {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    line-height: 4.5; /* 1 件ずつの間を広く取り、滑っていく感じを出す */
    white-space: nowrap;
    color: #22211f;
    -webkit-mask-image: linear-gradient(transparent, #000 15%, transparent 38% 62%, #000 85%, transparent);
    mask-image: linear-gradient(transparent, #000 15%, transparent 38% 62%, #000 85%, transparent);
}
.credits-list { animation: credits var(--t, 300s) linear infinite; }
.credits-list + .credits-list { display: none; }
@keyframes credits { to { transform: translateY(-50%); } }
/* PC: 中央の文章をよけて左右の 2 列に分け、左は上へ、右は下へ流す */
@media (min-width: 900px) {
    .ring .credits {
        display: flex;
        justify-content: space-between;
        padding: 0 4vw;
        -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
        mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
    }
    .credits-list { width: calc(50% - 20em); }
    .credits-list span { overflow: hidden; text-overflow: ellipsis; } /* 長いタイトルは列の幅で切る */
    .credits-list + .credits-list { display: block; animation-direction: reverse; }
}
.ring .work:focus-visible { opacity: 1 !important; transform: none !important; }
/* 1 画面目（輪）を固定したまま、2 ページ目（ジャケットの上下に一列）→ 3 ページ目（見出しと説明文）と移る。
   各段階のスクロール量は ring.js の frame と組 */
.ring .hero { position: sticky; top: 0; }
.ring .page2 { display: block; height: 290svh; }

.hero {
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.disc {
    position: relative;
    width: var(--d);
    height: var(--d);
    display: grid;
    place-items: center;
}

/* ジャケットは輪の直径 600 に対して 380。横に送ると他の曲のジャケットが出る */
.jackets {
    width: 63.33%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 5px;
}
.jackets::-webkit-scrollbar { display: none; }
/* ジャケットを押すと曲のリンクへ */
.jacket {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: 5px;
}
.jacket img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 5px;
}

/* ジャケットの左右の送りボタン（輪がほどけた 2 ページ目だけ JS が出す） */
.jackets-nav { display: none; }
.ring .jackets-nav {
    display: block;
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.ring .jackets-nav:disabled { cursor: default; }
.jackets-nav.prev { left: calc(18.33% - 52px); }
.jackets-nav.next { right: calc(18.33% - 52px); }

video {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 5px;
    transition: opacity 0.8s ease;
}

.line {
    text-align: center;
    white-space: pre;
}

/* 新曲の案内は太字で強調する。他の曲に送ったときは同じ位置の .caption に差し替える */
.line-bottom, .caption, .ghost .strong { font-weight: 700; }

/* 曲を送ったときの差し替えは、重ねてフェードする */
.ring .line-bottom, .ring .caption, .ring .release { transition: opacity 0.3s ease; }

/* 新曲のリリース日。新曲の案内のすぐ下に小さく添える（2 ページ目で先頭の曲を出している間だけ JS が出す） */
.release {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + var(--d) * 0.3167 + 12px + 2em);
    text-align: center;
    font-size: 0.8em;
    color: #5f5d58;
}

.line-bottom, .caption {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + var(--d) * 0.3167 + 12px);
}

.line span, .ghost span {
    display: inline-block;
    transform-origin: center;
    will-change: transform;
}

.ghost {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ghost span {
    position: absolute;
    top: 0;
    left: 0;
}

/* 右下の隅に小さく置く。押すと回る文字が直線にほどける（輪を使うときだけ） */
.hero { position: relative; }
.dizzy { display: none; }
.ring .dizzy {
    display: block;
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 0.3em;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.ring .dizzy:hover, .ring .dizzy:focus-visible { opacity: 1; }

/* ほどけた帯。画面いっぱいに 6 本並べて左右に流す */
.unroll {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease 0.3s;
}
.ring .unroll { display: flex; }
.tidy .unroll { opacity: 1; }
.unroll div {
    white-space: nowrap;
    line-height: 1;
    width: max-content;
    animation: unroll var(--s) linear infinite var(--dir);
}
@keyframes unroll { to { transform: translateX(-50%); } }
.disc { z-index: 1; }

/* ほどけている間は輪の文字を隠す（見出しと新曲の案内の文字はスクロールで並ぶにつれて JS が戻す） */
.outer, .ghost { transition: opacity 0.8s ease, visibility 0.8s; }
.tidy .outer, .tidy .ghost { opacity: 0 !important; visibility: hidden; }

/* 画面幅いっぱいの大きな名前で締める */
.footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px 24px;
    /* 上は写真が重なる分（写真の幅の 20%）を足して空ける */
    padding: calc(min(800px, 100vw - 32px) * 0.2 + 48px) 16px 0;
    background: #22211f;
    color: #e9e8e3;
    font-size: 13px;
    letter-spacing: 0.1em;
    overflow: hidden;
}

/* 写真の下に、1 ページ目の見出しと同じ一文を添える */
.footer-lead {
    grid-column: 1 / -1;
    margin: 0 0 32px;
    text-align: center;
    font-size: min(15px, (100vw - 32px) / 27); /* スマホでも一行に収める（字間込みで約 27 文字分） */
    white-space: nowrap;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.footer-copy {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: #a8a59d;
}

/* 書体の比率のまま、横幅いっぱいになる大きさにする。8.3 は「SOZEN OTSUBO」の幅（文字の大きさ 1 に対する比） */
.footer-mark {
    grid-column: 1 / -1;
    margin: 0;
    padding-bottom: 0.2em; /* 文字の下端が見切れないよう、少し空ける */
    font-size: calc((100vw - 32px) / 8.3);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

/* マウスを重ねると、ボタン以外の要素がふわっと浮く。輪の文字は JS が transform を使うので translate で重ねる */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .line span, .ghost span, .lead, .footer-mark {
        transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    video { transition: opacity 0.8s ease, scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .jacket img { transition: scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .jacket img:hover { scale: 1.02; }
    .ring .line-top span, .ghost span { pointer-events: auto; }
    .line span:hover, .ghost span:hover { translate: 0 -0.5em; transition-duration: 0.25s; }
    video:hover { scale: 1.02; }
    .lead:hover { translate: 0 -4px; }
    .footer-mark:hover { translate: 0 -3%; }
    /* 写真はわずかに寄る（滑り込みで translate を使うので scale にする） */
    .photo { transition: scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .photo:hover { scale: 1.015; }
}

/* 輪の外側を回るプロフィール文。読ませるより模様として見せる（輪を使うときだけ） */
.hero { overflow-x: clip; }
.outer { display: none; }
.ring .outer {
    display: block;
    position: absolute;
    /* 輪の直径 600 に対して 2200 の広さ。画面の外まで溢れさせる */
    inset: -133.33%;
    width: 366.67%;
    height: 366.67%;
    pointer-events: none;
    fill: currentColor;
}
.orbit {
    transform-origin: 0 0;
    animation: orbit var(--s) linear infinite var(--dir);
}
@keyframes orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .orbit { animation: none; }
}

/* 4 ページ目: 次のイベントの日付を画面いっぱいに置き、詳細はその下に（正本は sozenium-com の Events）。
   スクロールで下から滑り込み、固定された見出しの層を覆う */
.events {
    position: relative;
    z-index: 2;
    background: #e9e8e3;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 16px;
    letter-spacing: 0.1em;
}
.next-date {
    margin: 0 0 24px;
    font-size: clamp(96px, 42.5vw, 760px); /* 「10.18」が画面幅いっぱいになる大きさ */
    line-height: 0.85;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.next-days::before { content: "\3000\2014\3000"; } /* 全角スペース・ダッシュ・全角スペース（文字コードの指定がない配信でも化けないようエスケープ） */
.events { overflow: hidden; }
.next-days:empty { display: none; }
.events-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
}
.events-list { margin: 0; padding: 0; list-style: none; }
.events-list li {
    display: grid;
    grid-template-columns: 9em 1fr 14em; /* 右の列は幅を固定して行ごとに揃える */
    gap: 4px 32px;
    align-items: baseline;
    padding: 20px 0;
    border-top: 1px solid rgb(34 33 31 / 0.2);
    font-size: 16px;
    line-height: 1.7;
}
.events-list a { color: inherit; text-underline-offset: 0.3em; }
.events-date, .events-meta { color: #5f5d58; font-size: 13px; }
.events-meta span { display: block; }

@media (max-width: 640px) {
    .events-list li { grid-template-columns: 1fr; font-size: 15px; }
    .footer-copy { grid-column: 1 / -1; } /* 権利表記が長いので、スマホではリンクの下に回す */
    /* 名前は SOZEN と OTSUBO の 2 行にして大きく見せる。4.48 は「OTSUBO」の幅 */
    .footer-mark { font-size: calc((100vw - 32px) / 4.48); }
    .footer-mark span { display: block; }
}

/* 最後にプロフィール写真を滑り込ませ、下半分をフッターに重ねる */
.photo-page {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 0 16px;
}
.photo {
    display: block;
    width: min(800px, 100%);
    height: auto;
    border-radius: 5px;
    margin-bottom: calc(min(800px, 100vw - 32px) * -0.2);
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .photo {
            animation: slide-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        .next-date, .events-list li {
            animation: rise-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 45%;
        }
    }
}
@keyframes slide-in {
    from { opacity: 0; translate: 0 80px; }
}
/* イベントの文字は薄くせず、移動だけにする。途中の半透明がコントラスト不足になる */
@keyframes rise-in {
    from { translate: 0 80px; }
}

/* 404.html */
.notfound {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 0 16px;
    text-align: center;
    letter-spacing: 0.1em;
}
.notfound h1 {
    margin: 0;
    font-size: clamp(64px, 20vw, 160px);
    font-weight: 400;
    line-height: 1;
}
.notfound p { margin: 0; }
.notfound a { color: inherit; }