/* ============================================================
   Room 03 ARCHIVE — CSS（WordPress本番版・2026-08-20再実装）
   LETTERS/手紙の「展示室」から、目録型の「静かな書庫」へ再構成。
   色・フォントは既存パレットを維持（--terraのみstyle.cssのグローバル値を利用）。
   @import は ftr-museum-letters.php の wp_enqueue_style() で管理
   ============================================================ */

:root{
    --ftr-wall:#f4f1e9;
    --ftr-paper:#faf8f2;
    --ftr-ink:#28251f;
    --ftr-soft:#777064;
    --ftr-line:#d9d1c2;
}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
    background:var(--ftr-wall) !important;
}


body.ftr-room03-page{

    margin:0;

    background:
    radial-gradient(
        circle at 80% 5%,
        rgba(255,255,250,.8),
        transparent 35%
    ),
    var(--ftr-wall) !important;

    color:var(--ftr-ink) !important;

    font-family:
    "Noto Serif JP",
    serif;

}


/* -----------------
   ROOM
------------------ */


.ftr-room{

    padding:70px 8% 100px;

    min-height:100vh;

}


/* -----------------
   ROOM SIGN
------------------ */


.ftr-room-sign{

    width:min(720px,100%);

    margin:0 auto 70px;

}


.ftr-corridor{

    display:inline-block;

    font-size:11px;

    letter-spacing:.45em;

    color:var(--ftr-soft);

    text-decoration:none;

    margin-bottom:50px;

    transition:color .3s;

}

.ftr-corridor:hover{

    color:var(--ftr-ink);

}


/* 「01」（トップ／Room 01）と同じ視覚ルール：Cormorant・赤茶色・短い下線 */
.ftr-room-number-big{

    font-family:
    "Cormorant Garamond",
    serif;

    font-weight:300;

    font-size:56px;

    color:var(--terra);

    line-height:1;

}

.ftr-room-number-big::after{

    content:"";

    display:block;

    width:56px;

    height:1px;

    background:var(--ftr-line);

    margin-top:14px;

}


.ftr-room-title{

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:46px;

    font-weight:300;

    letter-spacing:.2em;

    margin:20px 0 0;

    line-height:1;

}


.ftr-room-intro{

    font-size:14px;

    line-height:1.9;

    color:var(--ftr-soft);

    margin-top:22px;

    max-width:420px;

}


/* -----------------
   CATALOG（目録）
------------------ */


.ftr-catalog{

    width:min(720px,100%);

    margin:0 auto;

    border-top:1px solid var(--ftr-line);

}


.ftr-catalog-item{

    padding:32px 0;

    border-bottom:1px solid var(--ftr-line);

}


.ftr-catalog-date{

    font-size:11px;

    letter-spacing:.35em;

    color:var(--ftr-soft);

    line-height:1;

}


.ftr-catalog-from{

    font-size:11px;

    letter-spacing:.3em;

    color:var(--ftr-soft);

    margin-top:8px;

    line-height:1;

}


/* 独立記事型の種別表示（例：ESSAY）。FROMと同じ小さな視覚ルールを流用 */
.ftr-catalog-label{

    font-size:11px;

    letter-spacing:.3em;

    color:var(--ftr-soft);

    margin-top:8px;

    line-height:1;

    text-transform:uppercase;

}


.ftr-catalog-title{

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:20px;

    font-weight:400;

    letter-spacing:.08em;

    margin-top:16px;

    line-height:1.4;

}


/* 独立記事型の副題（例：日本語タイトル）。タイトル直下に表示 */
.ftr-catalog-subtitle{

    font-family:
    "Noto Serif JP",
    serif;

    font-size:14px;

    color:var(--ftr-soft);

    margin-top:8px;

    line-height:1.7;

}


/* 本文冒頭の短い抜粋。新規メタフィールドは追加せず、PHP側でpost_contentから都度算出 */
.ftr-catalog-excerpt{

    font-size:13px;

    line-height:1.8;

    color:var(--ftr-soft);

    margin-top:12px;

    max-width:480px;

}


/* READ → / Newsletterリンク共通：細い長方形枠のCTA。カード・角丸・影は使わない。
   線色は作品番号の下線（--ftr-line）と揃える */
.ftr-catalog-read,
.ftr-newsletter-link{

    display:inline-block;

    padding:12px 22px;

    background:none;

    border:1px solid var(--ftr-line);

    cursor:pointer;

    text-decoration:none;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:12px;

    letter-spacing:.3em;

    text-transform:uppercase;

    color:var(--ftr-soft);

    transition:color .3s, border-color .3s;

}

.ftr-catalog-read{

    margin-top:20px;

}

.ftr-catalog-read:hover,
.ftr-catalog-read[aria-expanded="true"],
.ftr-newsletter-link:hover{

    color:var(--ftr-ink);

    border-color:var(--ftr-soft);

}


/* grid-template-rows 0fr→1fr によるスムーズな高さトランジション（JS側での高さ計測は不要） */
.ftr-catalog-body{

    display:grid;

    grid-template-rows:0fr;

    opacity:0;

    transition:
    grid-template-rows .45s ease,
    opacity .35s ease;

}

.ftr-catalog-body.is-open{

    grid-template-rows:1fr;

    opacity:1;

}

.ftr-catalog-body-inner{

    overflow:hidden;

    min-height:0;

}

.ftr-catalog-body.is-open .ftr-catalog-body-inner{

    padding-top:32px;

}


/* -----------------
   BODY TEXT（展開後本文。旧exhibitの罫線囲み・角切り込み・大余白は使わない）
------------------ */


.ftr-catalog-body-text{

    font-size:15px;

    line-height:2.1;

    max-width:560px;

}


.ftr-catalog-body-text p{

    margin:0 0 1.6em;

}


.ftr-catalog-body-text p:last-child{

    margin-bottom:0;

}


.ftr-catalog-body-text p.ftr-after-break{

    margin-top:1.0em;

}


/* -----------------
   REREAD（二つの時間）
------------------ */


.ftr-catalog-reread{

    margin-top:48px;

}


.ftr-catalog-reread-date{

    font-size:11px;

    letter-spacing:.35em;

    color:var(--ftr-soft);

    line-height:1;

}


.ftr-catalog-reread-body{

    font-size:15px;

    line-height:2.3;

    margin-top:20px;

    max-width:560px;

}


.ftr-catalog-reread-body p{

    margin:0 0 1.6em;

}


.ftr-catalog-reread-body p:last-child{

    margin-bottom:0;

}


.ftr-catalog-reread-body p.ftr-after-break{

    margin-top:1.0em;

}


/* -----------------
   NEWSLETTER（ARCHIVEとの役割差を保つ、小さく静かな1行導線）
------------------ */


.ftr-newsletter-line{

    width:min(720px,100%);

    margin:80px auto 0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}


.ftr-newsletter-kicker{

    font-size:10px;

    letter-spacing:.4em;

    color:var(--ftr-soft);

}


.ftr-newsletter-title{

    font-size:15px;

    letter-spacing:.08em;

    color:var(--ftr-ink);

}


.ftr-newsletter-line .ftr-newsletter-link{

    margin-top:6px;

}


/* -----------------
   RESPONSIVE
------------------ */


@media(max-width:700px){

.ftr-room{

padding:56px 24px 72px;

}


.ftr-room-sign{

margin-bottom:48px;

}


.ftr-corridor{

margin-bottom:36px;

}


.ftr-room-number-big{

font-size:40px;

}


.ftr-room-number-big::after{

width:44px;

margin-top:10px;

}


.ftr-room-title{

font-size:32px;

margin-top:14px;

}


.ftr-room-intro{

font-size:13px;

margin-top:16px;

}


.ftr-catalog-item{

padding:24px 0;

}


.ftr-catalog-title{

font-size:17px;

margin-top:12px;

}


.ftr-catalog-read{

margin-top:16px;

}


.ftr-catalog-body.is-open .ftr-catalog-body-inner{

padding-top:24px;

}


.ftr-catalog-body-text,
.ftr-catalog-reread-body{

font-size:14px;

}


.ftr-newsletter-line{

margin-top:56px;

flex-direction:column;

align-items:flex-start;

gap:8px;

}


/* モバイルは現状維持（NEWSLETTER + READ ON SUBSTACK →の2行のみ）。
   「ここからの手紙」行はPC専用 */
.ftr-newsletter-title{

display:none;

}

.ftr-newsletter-line .ftr-newsletter-link{

margin-top:0;

}

}