@charset "utf-8";
/* target-amami.jp ─ 奄美・与路島
   意匠の方針
     ・写真を主役にする。背景をCSSのグラデーションで作らない
     ・本文まで明朝で組む。ゴシックはナビと極小の注記だけ
     ・色数を絞る。地は生成り、文字は墨、差し色は泥染の赤茶ひとつ
     ・カードを使わない。罫は髪の毛一本、面で仕切らない
     ・節ごとに余白の量を変える。同じリズムで刻まない
*/

:root{
  --paper:#FAF8F3;      /* 生成り */
  --paper-2:#F2EDE3;    /* 一段沈めた地 */
  --ink:#1F1C17;        /* 墨 */
  --ink-2:#413B32;
  --mute:#6E675C;
  --rule:#DED7C9;
  --rule-2:#C9C0AE;
  --dorozome:#7A4A32;   /* 車輪梅・泥染の赤茶。差し色はこれ一色 */
  --dark:#241F19;       /* 濃い帯 */

  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;

  --measure:34rem;      /* 本文の行長 */
  --gut:clamp(1.5rem,5vw,5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--mincho);font-size:17px;line-height:2.05;
  letter-spacing:.04em;font-feature-settings:"palt" 1;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.5em}
::selection{background:#E8DCCB}

/* ───────── 版面 ───────── */
.sheet{width:min(76rem,100% - var(--gut)*2);margin-inline:auto}
.column{max-width:var(--measure)}
.column.wide{max-width:44rem}

/* ───────── ヘッダー ───────── */
.masthead{
  position:sticky;top:0;z-index:60;background:rgba(250,248,243,.94);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--rule);
}
.masthead .sheet{display:flex;align-items:baseline;gap:2rem;height:4.4rem}
.wordmark{font-family:var(--mincho);font-size:1.02rem;letter-spacing:.18em;white-space:nowrap}
.wordmark small{
  display:block;font-family:var(--gothic);font-size:.58rem;letter-spacing:.24em;
  color:var(--mute);margin-top:.15em;font-weight:400;
}
.masthead nav{margin-left:auto}
.masthead nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0}
.masthead nav a{
  font-family:var(--gothic);font-size:.74rem;letter-spacing:.14em;color:var(--ink-2);
  padding-bottom:.35em;border-bottom:1px solid transparent;
}
.masthead nav a:hover{border-bottom-color:var(--rule-2)}
.masthead nav a[aria-current]{border-bottom-color:var(--dorozome);color:var(--ink)}
.burger{display:none;margin-left:auto;border:0;background:none;padding:.4rem;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0}

/* ───────── 扉（写真は帯、見出しは紙の上） ───────── */
.opening figure{margin:0;position:relative;overflow:hidden}
.opening img{width:100%;height:clamp(20rem,52vh,32rem);object-fit:cover}
.opening figcaption{
  position:absolute;right:1rem;bottom:.7rem;
  font-family:var(--gothic);font-size:.6rem;letter-spacing:.16em;
  color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.opening .plate{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2rem,4vw,3.2rem)}
.eyebrow{
  font-family:var(--gothic);font-size:.62rem;letter-spacing:.3em;color:var(--dorozome);
  margin:0 0 1.4em;
}
.opening h1{
  font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:500;line-height:1.75;
  letter-spacing:.09em;margin:0 0 .9em;
}
.opening .lead{max-width:38rem;color:var(--ink-2);margin:0}

/* ───────── 節 ───────── */
.band{padding:clamp(3.2rem,7vw,6rem) 0}
.band.airy{padding:clamp(5rem,11vw,9rem) 0}
.band.tight{padding:clamp(2.2rem,4vw,3.4rem) 0}
.band.sunk{background:var(--paper-2)}
.band.night{background:var(--dark);color:#EDE7DC}
.band.night .h,.band.night a{color:#EDE7DC}
.band.night .mute{color:#A79E90}
.band + .band.sunk,.band.sunk + .band{border-top:1px solid var(--rule)}

.h{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:500;letter-spacing:.08em;
  line-height:1.8;margin:0 0 1.1em}
.h-sm{font-size:1.06rem;font-weight:500;letter-spacing:.06em;margin:0 0 .7em}
.mute{color:var(--mute)}
.note{font-family:var(--gothic);font-size:.74rem;line-height:1.95;color:var(--mute);letter-spacing:.06em}

/* 節の頭を細い罫と小さな見出しで示す（番号ラベルは使わない） */
.rule-head{border-top:1px solid var(--rule-2);padding-top:1.4rem;margin-bottom:2.4rem}
.rule-head .h{margin-bottom:.2em}

/* ───────── 写真と文章を組む（左右を入れ替えて単調さを避ける） ───────── */
.set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:start}
.set.tilt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.set.tilt-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.set.flip > figure{order:2}
.set figure{margin:0}
.set figure img{width:100%}
.set figcaption{font-family:var(--gothic);font-size:.68rem;letter-spacing:.1em;
  color:var(--mute);margin-top:.7rem;line-height:1.8}

/* 全幅の写真（本文の流れを一度断ち切るための間） */
.plate-wide{margin:clamp(2.4rem,6vw,5rem) 0}
.plate-wide img{width:100%;height:clamp(14rem,38vh,24rem);object-fit:cover}
.plate-wide figcaption{font-family:var(--gothic);font-size:.68rem;letter-spacing:.1em;
  color:var(--mute);margin-top:.7rem}
/* 写真の全体を見せる帯。既定の plate-wide は高さを決めて object-fit:cover で切り抜くため、
   人が写っている写真では寄りすぎて見えることがある。その場合はこちらを使う */
.plate-wide.full img{height:auto;object-fit:initial}

/* ───────── 一覧（カードにしない。罫で区切るだけ） ───────── */
.entries{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.entries > li{border-bottom:1px solid var(--rule);padding:1.9rem 0}
.entries .h-sm{margin-bottom:.45em}
.entries p:last-child{margin-bottom:0}
.entries .meta{font-family:var(--gothic);font-size:.7rem;letter-spacing:.12em;
  color:var(--dorozome);margin-bottom:.7em}

/* ───────── 年表 ───────── */
.chrono{width:100%;border-collapse:collapse;margin:0}
.chrono th,.chrono td{text-align:left;vertical-align:top;padding:1.15rem 0;
  border-bottom:1px solid var(--rule)}
.chrono tr:first-child th,.chrono tr:first-child td{border-top:1px solid var(--rule-2)}
.chrono th{
  width:8.5rem;font-weight:500;white-space:nowrap;padding-right:1.6rem;
  font-family:var(--gothic);font-size:.78rem;letter-spacing:.1em;color:var(--dorozome);
  padding-top:1.45rem;
}
.chrono td{line-height:1.95}

/* ───────── 諸元（島のデータなど） ───────── */
.spec{margin:0;display:grid;grid-template-columns:7.5rem 1fr;gap:0}
.spec dt,.spec dd{padding:.85rem 0;border-bottom:1px solid var(--rule);margin:0}
.spec dt{font-family:var(--gothic);font-size:.74rem;letter-spacing:.1em;color:var(--mute);
  padding-top:1.1rem}
.spec dd{padding-left:1.2rem}

/* ───────── 引用・添え書き ───────── */
.pull{margin:clamp(2rem,5vw,3.4rem) 0;padding-left:1.4rem;
  border-left:2px solid var(--dorozome);font-size:1.12rem;line-height:2;color:var(--ink-2)}

/* ───────── 次ページへの導線（矢印だけの控えめなもの） ───────── */
.onward{display:flex;flex-wrap:wrap;gap:2.4rem;border-top:1px solid var(--rule-2);padding-top:1.6rem}
.onward a{font-size:1.02rem;letter-spacing:.06em;border-bottom:1px solid transparent;padding-bottom:.2em}
.onward a:hover{border-bottom-color:var(--dorozome)}
.onward a::after{content:"　→";color:var(--dorozome)}

/* ───────── 脚 ───────── */
footer{border-top:1px solid var(--rule);padding:3.2rem 0 4rem;margin-top:clamp(3rem,8vw,6rem)}
footer .sheet{display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between;align-items:flex-start}
footer nav ul{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;margin:0;padding:0}
footer nav a{font-family:var(--gothic);font-size:.74rem;letter-spacing:.12em;color:var(--ink-2)}
footer nav a:hover{color:var(--dorozome)}
footer .copy{font-family:var(--gothic);font-size:.66rem;letter-spacing:.1em;color:var(--mute)}

/* ───────── 狭い画面 ───────── */
@media (max-width:820px){
  body{font-size:16px;line-height:1.98}
  .masthead nav{display:none}
  .masthead nav.open{display:block;position:absolute;top:4.4rem;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:1.2rem var(--gut) 1.6rem}
  .masthead nav.open ul{flex-direction:column;gap:1.1rem}
  .burger{display:block}
  .set,.set.tilt,.set.tilt-r{grid-template-columns:1fr}
  .set.flip > figure{order:0}
  .chrono th{width:auto;display:block;border-bottom:0;padding-bottom:.2rem}
  .chrono td{display:block;padding-top:0}
  .chrono tr:first-child td{border-top:0}
  .spec{grid-template-columns:1fr}
  .spec dt{border-bottom:0;padding-bottom:0}
  .spec dd{padding-left:0;padding-top:.2rem}
}

/* ───────── 表示の演出は控えめに一度だけ ───────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
  .rise.seen{opacity:1;transform:none}
}