/* ==========================================================================
   RYUHEIDOU / Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通パーツ：テープ・スタンプ・タグ・ボタン
   -------------------------------------------------------------------------- */

/* マスキングテープ（要素の角に貼る） */
.tape {
    position: absolute;
    width: 78px;
    height: 24px;
    /* 半透明のアルファだけでテープの透け感を出す（mix-blend-mode は使わない） */
    background: rgba(232, 234, 0, 0.55);
    border-left: 1px dashed rgba(22, 18, 15, 0.28);
    border-right: 1px dashed rgba(22, 18, 15, 0.28);
    pointer-events: none;
    z-index: 3;
}

.tape--tl {
    top: -11px;
    left: -18px;
    transform: rotate(-28deg);
}

/* 手押しスタンプ風ラベル */
.stamp {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    border: var(--bw) solid var(--red);
    padding: 2px 6px;
    transform: rotate(var(--tilt-d));
    opacity: 0.86;
}

/* 切り貼りタグ */
.tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    background: var(--ink);
    color: var(--paper-2);
    padding: 1px var(--sp-2);
}

.tag--acid {
    background: var(--acid);
    color: var(--ink);
}

.tag--red {
    background: var(--red);
    color: var(--paper-2);
}

.tag--blue {
    background: var(--blue);
    color: var(--paper-2);
}

.tag--outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}

/* ツール・アプリ系のカテゴリー（news.json の CATEGORY_STYLE から使う） */
.tag--cyan {
    background: var(--paper-3);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* ボタン：ハードシャドウが押し込まれる */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-4);
    background: var(--paper-2);
    /* 色は継承させない：.cta のような濃い面の中では
       親の文字色（--blue-ink）を引き継いで紙色の上に紙色の文字＝不可視になる */
    color: var(--ink);
    border: var(--border-thick);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.btn::after {
    content: "→";
    font-family: var(--font-mono);
}

.btn:hover,
.btn:focus-visible {
    background: var(--acid);
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 0 var(--ink);
}

.btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. ヘッダー / ドロワーメニュー
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--header-h);
    padding: 0 var(--col-pad);
    background: var(--paper-2);
    border-bottom: var(--border-thick);
}

.site-header__logo {
    display: flex;
    align-items: center;
}

.site-header__logo img {
    height: 34px;
    width: auto;
}

/* ハンバーガー：3本線を手描き風にずらす */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 34px;
    padding: 0 5px;
    border: var(--border);
    background: var(--paper-2);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease);
}

.menu-toggle:hover {
    background: var(--acid);
}

.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.menu-toggle span:nth-child(1) {
    width: 100%;
}

.menu-toggle span:nth-child(2) {
    width: 78%;
}

.menu-toggle span:nth-child(3) {
    width: 92%;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    width: 100%;
    transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   ドロワー：サイト本体（500pxカラム）の中だけを右からスライドで覆う
   ・.drawer は画面全体に敷くが、中に「カラム幅のトラック」を中央配置し、
     パネルをその右端に寄せる。これで .shell の中央寄せと位置が一致する。
   ・パネル幅はカラムより狭くして、本体が左側に少し覗くようにする。
   -------------------------------------------------------------------------- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    /* カラムと同じ幅で覆う（--col は .column と同じ実効幅を持っている） */
    grid-template-columns: min(var(--col), 100%);
    justify-content: center;
    /* 閉じている間はクリックを一切拾わない */
    visibility: hidden;
    pointer-events: none;
}

.drawer[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
}

/* 画面全体を軽く落とす。クリックで閉じる。 */
.drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(22, 18, 15, 0.55);
    opacity: 0;
    transition: opacity 0.26s var(--ease);
}

.drawer[data-open="true"] .drawer__backdrop {
    opacity: 1;
}

/* カラム幅の舞台。overflow:hidden で、スライド中のパネルが
   カラムの外（左右のレール側）へはみ出して見えるのを防ぐ。 */
.drawer__stage {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}

.drawer__panel {
    position: relative;
    /* 本体が左に覗く幅 */
    width: 84%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    background: var(--ink);
    color: var(--paper-2);
    border-left: var(--bw-thick) solid var(--blue);
    box-shadow: -6px 0 0 0 rgba(22, 18, 15, 0.35);
    overflow-y: auto;
    transform: translateX(101%);
    transition: transform 0.26s var(--ease);
}

.drawer[data-open="true"] .drawer__panel {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .drawer__panel,
    .drawer__backdrop {
        transition: none;
    }
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--ink-faint);
}

.drawer__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.drawer__close {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    line-height: 1;
    color: var(--paper-2);
    background: transparent;
    border: var(--bw) solid var(--paper-2);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.drawer__close:hover {
    background: var(--red);
}

/* 2列のメニュー */
.drawer__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-3);
}

.drawer__link {
    display: grid;
    gap: 1px;
    align-content: start;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 6.2vw, 1.6rem);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: var(--sp-2);
    border: var(--bw) solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.drawer__link:nth-child(4n+1),
.drawer__link:nth-child(4n+4) {
    transform: rotate(var(--tilt-c));
}

.drawer__link:nth-child(4n+2),
.drawer__link:nth-child(4n+3) {
    transform: rotate(var(--tilt-b));
}

.drawer__link:hover,
.drawer__link:focus-visible {
    background: var(--acid);
    color: var(--ink);
    border-color: var(--ink);
}

.drawer__link small {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.drawer__link:hover small,
.drawer__link:focus-visible small {
    color: var(--ink);
}

/* SNS アイコン列。コピーライトと一緒に下端へ寄せる。 */
.drawer__sns {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--ink-faint);
}

.drawer__sns a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: var(--bw) solid var(--paper-2);
    color: var(--paper-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.drawer__sns a:hover,
.drawer__sns a:focus-visible {
    background: var(--acid);
    color: var(--ink);
    transform: rotate(var(--tilt-b));
}

/* 下端のコピーライト */
.drawer__copy {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   3. ヒーロー：画像が前面を占める1画面ぶんのフライヤー
   ヘッダーは sticky で上にあるので、その高さを引いて「開いた瞬間に1画面」にする。
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    height: calc(100dvh - var(--header-h));
    min-height: 460px;
    overflow: hidden;
    border-bottom: var(--border-thick);
    background: var(--paper-3);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 元画像は 16:9。縦長に切り抜くと横が大きく削れるので、
       キャラクターのいる右寄りに焦点を置く。 */
    object-position: 70% center;
}

/* 文字まわり：左下から積む。右下のSNS列とぶつからないよう右側を空ける。 */
.hero__body {
    position: absolute;
    left: var(--col-pad);
    right: 72px;
    bottom: var(--sp-6);
    display: grid;
    justify-items: start;
    gap: var(--sp-3);
}

.hero__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper-2);
    padding: 3px var(--sp-2);
    transform: rotate(var(--tilt-a));
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 9vw, 2.75rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--acid);
    border: var(--border-thick);
    box-shadow: var(--shadow);
    padding: 0.14em 0.3em 0.2em;
    transform: rotate(var(--tilt-b));
}

.hero__lead {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    max-width: 32ch;
    background: var(--paper-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: var(--bw-thick) solid var(--blue);
    box-shadow: var(--shadow-sm);
}

/* 右下を起点に縦積み（DOM先頭が一番下） */
.hero__sns {
    position: absolute;
    right: var(--col-pad);
    bottom: var(--sp-6);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-2);
}

.hero__sns a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: var(--paper-2);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.hero__sns a:hover,
.hero__sns a:focus-visible {
    background: var(--acid);
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. マーキー（流れる帯）
   -------------------------------------------------------------------------- */

.marquee {
    display: flex;
    overflow: hidden;
    /* サイトで一番目立つ帯なのでブランドカラーを置く */
    background: var(--blue);
    color: var(--blue-ink);
    border-block: var(--border-thick);
    padding: var(--sp-2) 0;
    user-select: none;
}

.marquee__track {
    display: flex;
    flex: none;
    gap: var(--sp-5);
    padding-right: var(--sp-5);
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    animation: marquee 24s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__track span::before {
    content: "✱ ";
    color: var(--acid);
}

@keyframes marquee {
    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }

    .marquee {
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   5. NEWS リスト
   -------------------------------------------------------------------------- */

.news {
    max-height: 340px;
    overflow-y: auto;
    border: var(--border);
    background: var(--paper);
    padding: var(--sp-3);
    /* スクロールの端をぼかさず、罫線で切る */
    scrollbar-width: thin;
}

.news__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px dashed var(--ink-faint);
}

.news__item:last-child {
    border-bottom: none;
}

.news__date {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    white-space: nowrap;
}

.news__cat {
    justify-self: start;
}

.news__title {
    grid-column: 1 / -1;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.news__title a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--blue);
}

.news__title a:hover {
    background: var(--acid);
}

.news__empty {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    padding: var(--sp-3);
}

/* --------------------------------------------------------------------------
   6. 作品カード
   -------------------------------------------------------------------------- */

.card {
    position: relative;
    background: var(--paper-2);
    border: var(--border-thick);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:nth-child(odd) {
    transform: rotate(var(--tilt-c));
}

.card:nth-child(even) {
    transform: rotate(var(--tilt-b));
}

.card:hover,
.card:focus-within {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
}

.card__media {
    position: relative;
    border-bottom: var(--border);
    background: var(--paper-3);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
}

.card:hover .card__media img {
    transform: scale(1.03);
}

.card__media iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* YouTube ファサード：クリックされるまで iframe を作らない。
   埋め込みを6本そのまま置くとメインスレッドが詰まり、
   ページが描画されなくなるため必須。 */
.ytlite {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
}

.ytlite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
}

.ytlite__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--tilt-b));
    display: grid;
    place-items: center;
    width: 56px;
    height: 40px;
    background: var(--red);
    color: var(--paper-2);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-base);
    line-height: 1;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ytlite:hover img,
.ytlite:focus-visible img {
    transform: scale(1.03);
}

.ytlite:hover .ytlite__play,
.ytlite:focus-visible .ytlite__play {
    background: var(--acid);
    color: var(--ink);
    transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
}

/* 通し番号のスタンプ */
.card__no {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    background: var(--blue);
    color: var(--blue-ink);
    padding: 2px var(--sp-2);
}

.card__body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin-bottom: var(--sp-2);
}

:lang(ja) .card__title {
    font-family: var(--font-body);
    font-weight: 900;
    letter-spacing: 0;
}

.card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--ink-soft);
}

/* カード全体をリンクにする（見出しの疑似要素で覆う） */
.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

/* --------------------------------------------------------------------------
   7. 外部リンクバナー
   -------------------------------------------------------------------------- */

.banner {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--sp-3);
    align-items: center;
    position: relative;
    padding: var(--sp-3);
    background: var(--paper-2);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.banner:hover {
    background: var(--acid);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
}

.banner img {
    width: 100%;
    border: var(--bw) solid var(--ink);
}

.banner__title {
    /* マークアップは span なので block 化しないと本文と同じ行に流れる */
    display: block;
    font-family: var(--font-body);
    font-weight: 900;
    font-size: var(--fs-sm);
    line-height: 1.3;
    margin-bottom: 2px;
}

.banner__text {
    display: block;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. ABOUT
   -------------------------------------------------------------------------- */

.about {
    display: grid;
    gap: var(--sp-4);
}

.about__head {
    display: grid;
    grid-template-columns: 136px 1fr;
    gap: var(--sp-4);
    align-items: center;
}

.about__avatar {
    position: relative;
    border: var(--border-thick);
    box-shadow: var(--shadow);
    transform: rotate(var(--tilt-a));
    /* 線画なので地は白めにして、紙に描いたスケッチとして見せる */
    background: var(--paper-2);
}

.about__avatar img {
    width: 100%;
}

.about__name {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: var(--fs-lg);
    line-height: 1.3;
    margin-bottom: var(--sp-2);
}

.about__role {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-soft);
}

.about__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* 引用のような強調ブロック */
.pullquote {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--sp-3) var(--sp-4);
    background: var(--blue);
    color: var(--acid);
    border: var(--border-thick);
    transform: rotate(var(--tilt-c));
    box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   9. CONTACT
   -------------------------------------------------------------------------- */

.contact {
    display: grid;
    gap: var(--sp-4);
}

.contact__note {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.contact__card {
    position: relative;
    display: block;
    padding: var(--sp-4);
    background: var(--paper);
    border: var(--border-thick);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.contact__card:hover {
    background: var(--acid);
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 0 var(--ink);
}

.contact__card h3 {
    font-family: var(--font-body);
    font-weight: 900;
    font-size: var(--fs-base);
    margin-bottom: var(--sp-2);
}

.contact__card p {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: var(--paper-2);
    padding: var(--sp-6) var(--col-pad) var(--sp-5);
    /* 本文とフッターの境目にブランドカラーの線を入れる */
    border-top: 5px solid var(--blue);
}

.site-footer h2 {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--sp-3);
}

.footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.footer__links {
    display: grid;
    gap: var(--sp-2);
}

.footer__links a {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.footer__links a:hover,
.footer__links a:focus-visible {
    color: var(--acid);
    padding-left: var(--sp-2);
}

.footer__bottom {
    display: grid;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--ink-faint);
}

/* フッターのSNSはアイコン */
.footer__sns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.footer__sns a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--paper-2);
    border: var(--bw) solid var(--paper-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.footer__sns a:hover,
.footer__sns a:focus-visible {
    background: var(--acid);
    color: var(--ink);
    transform: rotate(var(--tilt-b));
}

.footer__copy {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. レール内のウィジェット（PC専用・自由に足せる枠）
   -------------------------------------------------------------------------- */

/* 共通の枠 */
.widget {
    border: var(--border);
    background: var(--paper-2);
    padding: var(--sp-3);
    box-shadow: var(--shadow-sm);
}

.widget__title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    border-bottom: 1px dashed var(--ink-faint);
}

/* 縦組みのワードマーク。左右どちらのレールでもサイト本体側に置く。 */
.rail-wordmark {
    flex: none;
    align-self: start;
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 0.95;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    opacity: 0.45;
}

/* レール内ナビ：番号つきの索引 */
.rail-nav {
    display: grid;
    gap: 2px;
}

.rail-nav a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px var(--sp-2);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail-nav a::before {
    content: attr(data-no);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--blue);
}

/* サイト外へ出るものは矢印を斜めにする（.btn--ext と同じ約束） */
.rail-nav a[target="_blank"]::after {
    content: "↗";
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

.rail-nav a:hover,
.rail-nav a:focus-visible,
.rail-nav a[aria-current="page"] {
    background: var(--acid);
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   13. 左レール：ロゴ ＋ GAME / ART / MUSIC の紹介カード
   -------------------------------------------------------------------------- */

.rail-logo {
    display: block;
    flex: none;
    margin-bottom: var(--sp-1);
}

.rail-logo img {
    width: 100%;
    height: auto;
}

.rail-card {
    display: block;
    flex: none;
    background: var(--paper-2);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.rail-card:nth-of-type(odd) {
    transform: rotate(var(--tilt-c));
}

.rail-card:nth-of-type(even) {
    transform: rotate(var(--tilt-b));
}

.rail-card:hover,
.rail-card:focus-visible {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: var(--shadow);
}

.rail-card__media {
    position: relative;
    display: block;
    /* 3枚＋ロゴが1画面に収まるよう、カードの図版は横長で浅くとる */
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-bottom: var(--border);
    background: var(--paper-3);
}

.rail-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rail-card__label {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--blue);
    color: var(--blue-ink);
    padding: 1px var(--sp-2);
}

.rail-card__body {
    display: block;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.rail-card__title {
    display: block;
    font-weight: 900;
    font-size: var(--fs-sm);
    line-height: 1.3;
    margin-bottom: 2px;
}

.rail-card__text {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   14. 右レール：Now / Follow / ブログバナー
   -------------------------------------------------------------------------- */

/* Now：状態を色で示す一覧 */
.status {
    display: grid;
    gap: var(--sp-2);
}

.status__item {
    display: grid;
    grid-template-columns: 10px 1fr;
    align-items: center;
    gap: 2px var(--sp-2);
    padding: 6px var(--sp-2);
    background: var(--paper);
    border: var(--bw) solid var(--ink);
}

.status__dot {
    width: 10px;
    height: 10px;
    background: var(--ink-faint);
}

.status__dot--sale {
    background: var(--red);
}

.status__dot--dev {
    background: var(--blue);
}

.status__dot--live {
    background: var(--acid);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.status__name {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.status__meta {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* Follow：アイコンを横1列に均等配置 */
.rail-sns {
    display: flex;
    gap: var(--sp-1);
}

.rail-sns a {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--paper);
    border: var(--bw) solid var(--ink);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.rail-sns a:hover,
.rail-sns a:focus-visible {
    background: var(--blue);
    color: var(--blue-ink);
    transform: translateY(-2px);
}

.rail-sns .icon {
    width: 17px;
    height: 17px;
}

/* ブログへの導線 */
.blog-card {
    display: block;
    flex: none;
    padding: var(--sp-3);
    background: var(--blue);
    color: var(--blue-ink);
    border: var(--border-thick);
    box-shadow: var(--shadow);
    transform: rotate(var(--tilt-b));
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.blog-card__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--acid);
    color: var(--ink);
    padding: 1px 6px;
    margin-bottom: var(--sp-2);
}

.blog-card__title {
    display: block;
    font-weight: 900;
    font-size: var(--fs-base);
    line-height: 1.3;
    margin-bottom: 3px;
}

.blog-card__text {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.blog-card__cta {
    display: block;
    margin-top: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-card:hover,
.blog-card:focus-visible {
    background: var(--acid);
    color: var(--ink);
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
}

.blog-card:hover .blog-card__label,
.blog-card:focus-visible .blog-card__label {
    background: var(--blue);
    color: var(--blue-ink);
}