@charset "UTF-8";
/* ===========================================================
   SCENE — Design System
   骨格・トップ = 案C 静物 ／ 記事本文 = 案A 間 ／ 速度 = 案D 呼吸
   原則:
     01 余白は「空き」ではなく要素。端は1px単位で揃える
     02 動きは遅く少なく（1.2秒／1画面に動く要素は1つ）
     03 色は3色＋1。彩度を上げるのは購読・問い合わせだけ
     04 本文620px・行送り2.0以上・1行32〜38字
     05 トップに並ぶ記事は最大5本。空いた面は空けたまま
     06 写真は一段彩度を落として地の色に寄せる
   =========================================================== */

:root{
  /* --- 共通パレット（#FFF と #000 は使わない） --- */
  --nama:#F5F3ED;      /* 生成り  地 */
  --beige:#EFE7DA;     /* ベージュ 地（温） */
  --greige:#E9E6E0;    /* グレージュ 地（涼） */
  --khaki:#5F6152;     /* カーキ  構造 */
  --olive:#3D3E30;     /* オリーブ 見出し */
  --sumi:#26261F;      /* 墨    本文 */
  --terra:#B4735A;     /* テラコッタ 唯一の暖色 */

  --base:var(--nama);
  --ink:var(--sumi);
  --head:var(--olive);
  --struct:var(--khaki);
  --sub:#8A8A7C;
  --body-ink:#4E5046;
  --rule:rgba(38,38,31,.13);
  --field:#DCD9CC;               /* 写真の下地 */
  --grain:.2;
  /* 原則06：写真は一段落として地の色に寄せる。ここを触れば全写真に効く */
  --photo:saturate(.58) contrast(.95) brightness(1.03);
  --tone:rgba(239,231,218,.15);  /* ベージュを混ぜる */

  /* --- 書体 --- */
  --disp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;   /* 表示・見出し（案C） */
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; /* 記事本文（案A） */
  --sans:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;         /* UI・メタ */
  --lat:"Jost",system-ui,sans-serif;                                  /* 欧文ラベル */

  /* --- 速度・寸法 --- */
  --e:cubic-bezier(.16,.8,.24,1);
  --t:1.2s;                      /* 全ページ共通（案D） */
  --u:8px;
  --read:620px;                  /* 本文幅（案A） */
  --max:1320px;
}

/* 夜は地を落とす。ここでも真っ黒は使わない */
@media (prefers-color-scheme:dark){
  :root{
    --base:#1F201A;
    --ink:#DEDCD0;
    --head:#E6E4D6;
    --struct:#A9AB96;
    --sub:#8E8E80;
    --body-ink:#C6C5B8;
    --rule:rgba(222,220,208,.15);
    --field:#2C2D26;
    --grain:.11;
    --photo:saturate(.5) contrast(.94) brightness(.84);
    --tone:rgba(31,32,26,.26);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--base);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14.5px,.9vw + 12px,16px);
  line-height:2.05;letter-spacing:.045em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 紙の粒子。フラットを卒業する唯一の手段 */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(180,115,90,.22)}
:focus-visible{outline:1px solid var(--struct);outline-offset:4px}

/* ---------- 枠 ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3.4vw,52px)}
.read{max-width:var(--read);margin-inline:auto}
.hairline{height:1px;background:var(--rule);border:0}

/* ---------- 欧文ラベル ---------- */
.lbl{font-family:var(--lat);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sub)}
.lbl--terra{color:var(--terra)}

/* ---------- 現れかた（1.2秒・遅さで余裕を出す） ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity var(--t) var(--e),transform var(--t) var(--e)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- サイトヘッダー（固定しない＝画面を空ける） ---------- */
.site-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
  padding-block:calc(var(--u)*5);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:16px}
/* 欧文1語のロゴタイプ。表示面の h1（STILL）と同じ明朝で揃える */
.brand__mark{font-family:var(--disp);font-size:17px;letter-spacing:.3em;color:var(--head)}
.brand__en{font-family:var(--lat);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--sub)}
.gnav{display:flex;gap:clamp(14px,2vw,34px);flex-wrap:wrap;padding-top:4px}
.gnav a{font-family:var(--lat);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--struct);position:relative}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--struct);transition:right .7s var(--e)}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{right:0}

/* ---------- トップ：特大タイポ ---------- */
.display{padding-block:clamp(40px,10vh,120px) clamp(60px,14vh,180px)}
.display h1{font-family:var(--disp);font-weight:400;
  font-size:clamp(58px,15.5vw,230px);line-height:.9;letter-spacing:-.02em;color:var(--head)}
.display__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  flex-wrap:wrap;margin-top:clamp(20px,4vh,54px)}
.display__row p{font-family:var(--disp);font-size:clamp(15px,1.3vw,19px);
  line-height:2.4;letter-spacing:.1em;max-width:22em}
.display__meta{text-align:right;line-height:2.6}

/* ---------- 写真の下処理（原則06・全写真に共通で効く） ---------- */
.card__ph,.scenery__card .ph,.art-hero,.art-body figure .ph{position:relative;isolation:isolate}
.card__ph i,.scenery__card .ph i{filter:var(--photo)}
.art-hero,.art-body figure .ph{filter:var(--photo)}
.card__ph::after,.scenery__card .ph::after,.art-hero::after,.art-body figure .ph::after{
  content:"";position:absolute;inset:0;background:var(--tone);pointer-events:none}

/* ---------- 非対称グリッド（重なり） ---------- */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px);
  padding-bottom:clamp(70px,16vh,190px)}
.card{position:relative;display:block}
.card__ph{overflow:hidden;background:var(--field)}
.card__ph i{display:block;width:100%;height:100%;background-position:center;background-size:cover;
  transition:transform 1.6s var(--e)}
.card:hover .card__ph i{transform:scale(1.045)}
.card__no{font-family:var(--lat);font-size:10px;letter-spacing:.26em;color:var(--sub);margin-top:14px}
.card__ttl{font-family:var(--disp);font-weight:400;font-size:clamp(16px,1.35vw,21px);
  line-height:1.95;letter-spacing:.06em;margin-top:6px;max-width:18em;color:var(--head)}
.card__cat{font-family:var(--lat);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--struct);margin-top:10px}

.mosaic .card:nth-child(1){grid-column:1/8}
.mosaic .card:nth-child(1) .card__ph{aspect-ratio:4/3}
.mosaic .card:nth-child(1) .card__ttl{font-size:clamp(20px,2.1vw,32px);line-height:1.85;max-width:16em}
.mosaic .card:nth-child(2){grid-column:9/13;align-self:end;padding-bottom:clamp(20px,6vh,80px)}
.mosaic .card:nth-child(2) .card__ph{aspect-ratio:3/4}
.mosaic .card:nth-child(3){grid-column:2/6;margin-top:clamp(40px,10vh,130px)}
.mosaic .card:nth-child(3) .card__ph{aspect-ratio:1/1}
.mosaic .card:nth-child(4){grid-column:7/12;margin-top:clamp(70px,18vh,240px)}
.mosaic .card:nth-child(4) .card__ph{aspect-ratio:5/4}

/* ---------- 間の風景（sticky 横スクロール） ---------- */
.scenery{position:relative;height:320vh}
/* 見出しの高さぶんを上に空けて、写真と重ねない */
.scenery__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  padding-top:clamp(150px,28vh,260px);overflow:hidden}
.scenery__head{position:absolute;top:clamp(40px,10vh,110px);left:0;right:0;z-index:2}
.scenery__head h2{font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.4vw,34px);
  letter-spacing:.1em;line-height:1.9;margin-top:10px;color:var(--head)}
.scenery__track{display:flex;gap:clamp(20px,3vw,56px);padding:0 clamp(20px,8vw,140px);will-change:transform}
.scenery__card{flex:0 0 auto;width:clamp(200px,24vw,340px)}
.scenery__card .ph{aspect-ratio:3/4;overflow:hidden;background:var(--field)}
.scenery__card .ph i{display:block;width:100%;height:100%;background-position:center;background-size:cover}
.scenery__card p{font-family:var(--lat);font-size:10px;letter-spacing:.24em;color:var(--sub);margin-top:14px}

/* ---------- 意図的な空白 ---------- */
.void{height:clamp(140px,32vh,340px);display:flex;align-items:center;justify-content:center}
.void p{font-family:var(--disp);font-size:13px;letter-spacing:.36em;color:var(--sub);opacity:.7}

/* ---------- 記事リスト（日付・タイトル・カテゴリ） ---------- */
.list{padding-block:clamp(30px,7vh,80px) clamp(50px,12vh,140px)}
.list__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(20px,4vh,44px)}
.entry{display:grid;grid-template-columns:104px 1fr 130px;gap:24px;align-items:baseline;
  padding:calc(var(--u)*4) 0;border-top:1px solid var(--rule)}
.entry:last-child{border-bottom:1px solid var(--rule)}
.entry time{font-family:var(--lat);font-size:12px;letter-spacing:.16em;color:var(--sub)}
.entry__ttl{font-family:var(--disp);font-size:clamp(16px,1.2vw,19px);line-height:1.95;
  letter-spacing:.08em;transition:opacity .5s var(--e);color:var(--head)}
.entry:hover .entry__ttl{opacity:.55}
.entry__cat{font-family:var(--lat);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--struct);text-align:right}

/* ---------- 絞り込み（カテゴリ／年） ---------- */
.filters{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,4vh,40px) 0 clamp(24px,5vh,50px)}
.filter{display:flex;gap:clamp(10px,1.4vw,22px);align-items:baseline;flex-wrap:wrap}
.filter__lbl{min-width:82px}
.filter button{font-family:var(--lat);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sub);padding-bottom:4px;border-bottom:1px solid transparent;transition:color .5s var(--e),border-color .5s var(--e)}
.filter button:hover{color:var(--struct)}
.filter button[aria-pressed="true"]{color:var(--terra);border-color:var(--terra)}
.count{font-family:var(--lat);font-size:10px;letter-spacing:.24em;color:var(--sub)}
.empty{padding:clamp(40px,10vh,110px) 0;font-family:var(--disp);letter-spacing:.2em;color:var(--sub);text-align:center}

/* ---------- 記事ページ ---------- */
.art-head{padding-block:clamp(36px,9vh,110px) clamp(24px,5vh,56px)}
/* タイトルの左端を本文カラムに揃える（端を揃える＝原則01） */
.art-head>*{max-width:var(--read);margin-inline:auto}
.art-head__kicker{font-family:var(--lat);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terra)}
.art-head h1{font-family:var(--disp);font-weight:400;font-size:clamp(27px,3.6vw,50px);
  line-height:1.7;letter-spacing:.04em;color:var(--head);margin-top:18px;max-width:20em}
.art-head__byline{margin-top:clamp(18px,4vh,34px);display:flex;gap:22px;flex-wrap:wrap;
  font-family:var(--lat);font-size:11px;letter-spacing:.18em;color:var(--sub)}
.art-hero{width:100%;aspect-ratio:2/1;background-position:center;background-size:cover;
  background-repeat:no-repeat;background-color:var(--field)}
.art-hero + .cap{margin-top:14px}
.cap{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--sub);line-height:2}

/* 本文は明朝・620px・行送り2.1（案A） */
.art-body{padding-block:clamp(50px,10vh,120px);font-family:var(--serif);
  font-size:clamp(15.5px,.7vw + 13px,17px);line-height:2.1;letter-spacing:.06em;color:var(--ink)}
.art-body>*{max-width:var(--read);margin-inline:auto}
.art-body p{margin-bottom:calc(var(--u)*5)}
.art-body h2{font-family:var(--disp);font-weight:400;font-size:clamp(19px,1.7vw,24px);
  line-height:1.95;letter-spacing:.08em;color:var(--head);margin:clamp(40px,9vh,100px) 0 calc(var(--u)*4)}
/* 問いは一本罫だけで示す */
.art-body .q{margin:clamp(34px,8vh,90px) auto;padding-left:calc(var(--u)*4);
  border-left:1px solid var(--rule);font-size:clamp(17px,1.5vw,20px);line-height:2.5;
  letter-spacing:.1em;color:var(--struct)}
.art-body .q .speaker{font-family:var(--lat);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sub);margin-bottom:12px;display:block}
.art-body .spacer{height:clamp(50px,12vh,130px)}
.art-body figure{margin:clamp(28px,6vh,64px) auto}
.art-body figure .ph{aspect-ratio:3/2;background-position:center;background-size:cover;
  background-repeat:no-repeat;background-color:var(--field)}
.art-body figure figcaption{margin-top:12px}
/* 全幅の写真だけは読み幅を破る */
.art-body .bleed{max-width:none;margin:clamp(40px,9vh,100px) 0}
.art-body .bleed .ph{aspect-ratio:16/7}
.art-body .bleed figcaption{max-width:var(--read);margin:12px auto 0}
.art-body .pull{max-width:none;margin:clamp(40px,9vh,100px) 0}
.art-body .pull-in{max-width:var(--read);margin-inline:auto;font-family:var(--disp);
  font-size:clamp(19px,2vw,27px);line-height:2.15;letter-spacing:.08em;color:var(--head)}

.art-foot{padding-bottom:clamp(40px,9vh,100px)}
.profile{max-width:var(--read);margin-inline:auto;border-top:1px solid var(--rule);
  padding-top:calc(var(--u)*3);font-size:13px;line-height:2.2;color:var(--body-ink)}
.profile b{font-weight:400;font-family:var(--disp)}
.credits{max-width:var(--read);margin:calc(var(--u)*5) auto 0;display:flex;gap:26px;flex-wrap:wrap}

/* 次に読む */
.next{padding-block:clamp(50px,10vh,120px);border-top:1px solid var(--rule)}
.next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,2.4vw,36px);margin-top:clamp(20px,4vh,40px)}
.next__grid .card__ph{aspect-ratio:4/5}
.next__grid .card__ttl{font-size:clamp(15px,1.1vw,17px);max-width:none}

/* ---------- 購読（誘導は記事末とフッターだけ） ---------- */
.subscribe{padding-block:clamp(40px,9vh,100px);border-top:1px solid var(--rule)}
.subscribe__in{max-width:var(--read);margin-inline:auto}
.subscribe h2{font-family:var(--disp);font-weight:400;font-size:clamp(18px,1.7vw,24px);
  line-height:1.95;letter-spacing:.08em;color:var(--head);margin:10px 0 12px}
.subscribe p{font-size:.94em;color:var(--body-ink);max-width:34em}
.subscribe form{display:flex;gap:12px;margin-top:calc(var(--u)*4);flex-wrap:wrap}
.subscribe input{flex:1 1 220px;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:10px 2px;font-family:var(--sans);font-size:14px;letter-spacing:.06em;color:var(--ink)}
.subscribe input::placeholder{color:var(--sub)}
.subscribe input:focus{outline:0;border-color:var(--struct)}
/* 彩度を上げるのはここだけ（原則03） */
.subscribe .btn{background:var(--terra);color:#F7F3EE;font-family:var(--lat);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;padding:12px 28px;transition:opacity .5s var(--e)}
.subscribe .btn:hover{opacity:.82}
.subscribe .note{margin-top:14px;font-size:11px;letter-spacing:.1em;color:var(--sub)}

/* ---------- フッター ---------- */
.site-foot{padding-block:clamp(50px,10vh,120px) clamp(60px,10vh,120px);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.site-foot .lbl{line-height:2.4}
.site-foot a:hover{color:var(--struct)}
.disclaimer{max-width:var(--max);margin:0 auto;
  padding:0 clamp(20px,3.4vw,52px) clamp(50px,9vh,100px);
  font-family:var(--lat);font-size:11px;letter-spacing:.06em;color:var(--sub);line-height:2.2}

/* ---------- 静的ページ（About） ---------- */
.page-head{padding-block:clamp(40px,10vh,120px) clamp(24px,5vh,56px)}
.page-head h1{font-family:var(--disp);font-weight:400;font-size:clamp(34px,6vw,86px);
  line-height:1.15;letter-spacing:0;color:var(--head);margin-top:16px}
.prose{font-family:var(--serif);font-size:clamp(15.5px,.7vw + 13px,17px);line-height:2.1;
  letter-spacing:.06em;padding-bottom:clamp(40px,9vh,100px)}
.prose>*{max-width:var(--read);margin-inline:auto}
.prose p{margin-bottom:calc(var(--u)*5)}
.prose h2{font-family:var(--disp);font-weight:400;font-size:clamp(18px,1.7vw,23px);
  line-height:1.95;letter-spacing:.08em;color:var(--head);margin:clamp(40px,9vh,100px) 0 calc(var(--u)*4)}
.prose dl{display:grid;grid-template-columns:130px 1fr;gap:12px 24px;font-size:.94em}
.prose dt{font-family:var(--lat);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sub);padding-top:6px}
.prose dd{color:var(--body-ink)}

/* ---------- 狭い画面 ---------- */
@media (max-width:860px){
  .mosaic{grid-template-columns:repeat(6,1fr)}
  .mosaic .card:nth-child(n){grid-column:1/7;margin-top:clamp(30px,6vh,60px);padding-bottom:0;align-self:auto}
  .scenery{height:240vh}
  .entry{grid-template-columns:1fr;gap:6px}
  .entry__cat{text-align:left}
  .prose dl{grid-template-columns:1fr;gap:2px 0}
  .prose dd{margin-bottom:14px}
  .filter__lbl{min-width:0;width:100%}
  .display__meta{text-align:left}
}