/* Hallmark · amami.aignmet.com · theme: Hum
 *
 * amami_pages.py が吐く HTML は、移設前のサイトの style.css を前提にしたクラス名を
 * 使っている（.card / .section-title / .post-summary / .badge …）。
 * 生成器側を1つずつ書き換えると事故るので、クラス名はそのままにして
 * ここで Hum の見た目へ対応づける。生成器が変わってもここだけ直せばよい。
 *
 * 部品は site.css と共有する（.page / .nav / .colophon / .prose / .section-title）。
 * このファイルは「生成物のための追加分」だけを持つ。
 */

/* ══ ナビの副題 ═══════════════════════════
   ワードマークに amami を添えて、どの資産かを示す */
.nav__sub{
  margin-left:var(--space-sm);padding-left:var(--space-sm);
  border-left:1px solid var(--color-line);
  font-weight:600;color:var(--color-neutral);
}
/* 狭い画面では行き先3つで枠に入らない。site.css のピル側と揃えて詰める */
@media (max-width:520px){
  .nav__sub{margin-left:var(--space-3xs);padding-left:var(--space-3xs)}
}

/* ══ 見出し ═══════════════════════════════
   見た目の規則（墨色・text-lg・下の罫）は site.css の .section-title が持つ。
   ここでは節と節の間隔だけを足す。 */
.section-title{margin-top:var(--space-xl)}
.section-title:first-child{margin-top:0}

/* <small> の既定は 0.8em で、本文脇では 12.75px まで落ちる。
   曜日の「（金）」や単位の km/h は読ませたいので、副文の下限に揃える */
.page small{font-size:var(--text-sm)}

/* ══ 面 ═══════════════════════════════════
   地から1段沈めるだけでは境目が見えなかったので、縁を引く */
.card{
  margin:0 0 var(--space-md);border-radius:var(--r-lg);
  background:var(--color-paper-2);border:1px solid var(--color-line);
}
.card > .post{padding:var(--space-lg)}
.card:last-child{margin-bottom:0}

.post-summary{margin:0 0 var(--space-sm);line-height:1.7;color:var(--color-ink)}
.post-summary:last-child{margin-bottom:0}
.post-summary strong{font-weight:700}
.post-meta{
  margin:var(--space-sm) 0 0;font-size:var(--text-sm);
  color:var(--color-neutral);line-height:1.7;
}
.post-meta a,.post-summary a,.events a{
  color:var(--color-cyan-t);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--color-line);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.post-meta a:hover,.post-summary a:hover,.events a:hover,
.post-meta a:focus-visible,.post-summary a:focus-visible,.events a:focus-visible{
  border-bottom-color:var(--color-cyan-t);
}
.post-meta a:active,.post-summary a:active,.events a:active{color:var(--color-coral-t)}
.post-meta a:focus-visible,.post-summary a:focus-visible,.events a:focus-visible{
  outline:2px solid var(--color-cyan-t);outline-offset:2px;border-radius:2px;
}

/* ══ 更新時刻 ═════════════════════════════ */
.timestamp{
  margin:0 0 var(--space-lg);font-family:var(--font-mono);
  font-size:var(--text-sm);color:var(--color-neutral);letter-spacing:.04em;
}
/* 見出しの直下は更新時刻の1行だけなので、節の間隔（2xl）を2回積むと画面の半分が空白になる。
   見出し→本文は lg、更新時刻→最初の節見出しは md に詰める */
header.section + .section{margin-top:var(--space-lg)}
.timestamp + .section-title{margin-top:var(--space-md)}

/* ══ 便の一覧 ═════════════════════════════
   会社・船名・状態を横一列に固定する。折り返しに任せると、船名が長い便だけ
   状態が下の行へ落ちて、便を1つ確かめるのに2行読むことになる。
   伸び縮みするのは船名だけ（両端の2つは中身の幅のまま）。 */
.ferry-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3xs) var(--space-sm);align-items:center;
  padding:var(--space-md) var(--space-lg);
  border-bottom:1px solid var(--color-line);
}
.ferry-item:last-child{border-bottom:0}
/* ピルの左右の余白は狭い画面では贅沢。船名に回す */
.ferry-item .badge{padding-left:var(--space-sm);padding-right:var(--space-sm)}
.ferry-item .badge-ship{padding:0;min-width:0;white-space:normal}
/* 理由は行の下に回して幅いっぱいに使う */
.ferry-item .post-meta{grid-column:1/-1;margin:var(--space-3xs) 0 0}



/* ══ 1週間の海と空 ════════════════════════
   表をやめて1日1行にした。8列の表は 390px で波・風・降水が枠の外に落ち、
   横に振らないと読めない列は無いのと同じだった。
   日付・記号・気温までを1行に固め、波と風と降水はまとめて右へ流す。
   狭い画面ではその1かたまりだけが2行目に回る。 */
.week{list-style:none;margin:0;padding:0}
.week li{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3xs) var(--space-sm);
  padding:var(--space-sm) 0 var(--space-sm) var(--space-sm);
  border-bottom:1px solid var(--color-line);line-height:1.5;
}
.week li:first-child{padding-top:0}
.week li:last-child{border-bottom:0}
/* 今日は表と同じ印（左の洋梨の縦線）。行を塗ると数字が読みにくい */
.week li.today{box-shadow:inset 3px 0 0 0 var(--color-pear)}
.week time{
  flex:0 0 5.4em;font-family:var(--font-mono);font-size:var(--text-sm);
  color:var(--color-neutral);letter-spacing:.02em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.week .ico{flex:0 0 22px}
.week .wk-t{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.week .wk-sea{
  flex:1 0 100%;
  font-size:var(--text-sm);color:var(--color-neutral);
  font-variant-numeric:tabular-nums;
}
/* 枠に余裕がある画面では、波・風・降水も同じ行の右端に置く */
@media (min-width:721px){
  .week .wk-sea{flex:0 1 auto;margin-left:auto;text-align:right}
}
.week + .legend-row{margin-top:var(--space-md)}

/* ══ 行き先のカード ═══════════════════════
   「A ｜ B ｜ C」の1行では、狭い画面でリンクが折り返して境目が消え、
   親指で狙う的も小さい。カード全面をリンクにして、見出しで行き先を、
   一言でそこに何があるかを見せる。 */
.page-grid{
  display:grid;gap:var(--space-md);margin:0 0 var(--space-md);
  /* 3枚が枠に並ぶ下限（≈11.5em × 3 ＋ 間隔）で折り返す。390px では1列、
     720px 以上で3列になる。枚数が2枚のページでは自然に2列で埋まる */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5em),1fr));
}
.page-card{
  display:flex;flex-direction:column;gap:var(--space-3xs);
  padding:var(--space-lg);border-radius:var(--r-md);
  background:var(--color-paper-2);border:1px solid var(--color-line);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.page-card .pg-h{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em}
.page-card .post-meta{margin:0}
.page-card:hover,.page-card:focus-visible{
  transform:translateY(-2px);background:var(--color-paper-3);
  border-color:var(--color-ink);
}
.page-card:active{transform:translateY(0);background:var(--color-paper-3)}
.page-card:focus-visible{outline:2px solid var(--color-cyan-t);outline-offset:3px}

/* ══ 今日の潮 ═════════════════════════════
   満潮の行・干潮の行に分けると、次に来るのがどちらかを読む人が組み立て直す。
   時刻順のチップにすれば、いまの時刻と見比べるだけで済む。 */
.tide-today{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--space-sm);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:721px){
  .tide-today{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.tide-today li{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-3xs) var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--r-md);background:var(--color-paper-3);line-height:1.5;
}
.tide-today .tt-k{font-size:var(--text-sm);color:var(--color-neutral)}
.tide-today .tt-t{
  font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;
}
.tide-today .tt-v{
  font-size:var(--text-sm);color:var(--color-neutral);font-variant-numeric:tabular-nums;
}
.tide-today + .post-meta{margin-top:var(--space-md)}

/* ══ アイコン ═════════════════════════════
   文字を並べると読み疲れるので、天気と状態は形で見分けられるようにする。
   絵文字は使わない（端末ごとに形が変わるうえ、AI の指紋になる）。
   細い線は面より高いコントラストが要るので、色は専用の暗い変種を使う。 */
.ico{
  width:22px;height:22px;display:inline-block;vertical-align:-5px;
  color:var(--color-neutral);
}
.ico-calm{color:var(--color-neutral)}
.ico-watch{color:var(--color-pear-t)}
.ico-watch path{fill:var(--color-pear)}
.ico-rough{color:var(--color-coral-t)}
.ico-typhoon{color:var(--color-neutral)}   /* 渦は線だけ。ico-watch の塗りが乗ると団子になる */
/* ピルの中に置くときは文字の前に少し間を空ける */
.badge .ico{width:16px;height:16px;vertical-align:-3px;margin-right:var(--space-3xs)}

/* ══ 凡例 ═════════════════════════════════
   形だけでは初見で意味が分からない。表の直後に必ず置く */
.legend-row{
  display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg);
  margin:var(--space-sm) 0 var(--space-md);
}
.legend-item{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  font-size:var(--text-sm);color:var(--color-ink);
}
/* カードの中で凡例が末尾に来るときは、下の余白を二重に積まない */
.post > .legend-row:last-child{margin-bottom:0}

/* ══ これからの見通し ═════════════════════
   文章をやめて1行1項目にする。記号（表と同じ SVG）→ 短い語 → 日付の順で、
   どの行も同じ位置に日付が来るので、縦に目を走らせれば「いつ」が拾える。
   ラベル列は全角3文字幅で固定し、値は mono の日付で揃える */
.outlook{list-style:none;margin:0;padding:0}
.outlook li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3xs) var(--space-sm);
  padding:var(--space-sm) 0;border-bottom:1px solid var(--color-line);line-height:1.5;
}
.outlook li:first-child{padding-top:0}
.outlook li:last-child{border-bottom:0}
.outlook .ico{width:22px;height:22px;flex:0 0 22px;align-self:center}
.outlook .ol-k{flex:0 0 5em;color:var(--color-neutral);font-size:var(--text-sm)}
.outlook .ol-v{font-weight:700;color:var(--color-ink);white-space:nowrap}
.outlook .ol-v time{font-family:var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.outlook .ol-sub{color:var(--color-neutral);font-size:var(--text-sm)}
/* 台風名は長い（「台風24号（クロヴァン）」）のでラベル列を広げる。警報は一言だけの行 */
.outlook .ol-k--wide{flex:0 0 auto;min-width:5em;color:var(--color-ink);font-size:inherit;font-weight:600}
.outlook .ol-warn{color:var(--color-ink);font-size:inherit}
/* 方向は「上り 鹿児島ゆき」で 7 文字。見通しの 5em では値の位置が揃わない */
.outlook--dir .ol-k{flex:0 0 7.4em}
/* 月の見出しは「8月」で足りる。固定幅にすると年をまたいだ「2025年12月」が
   入らず、そのぶんを空けておくと件数が2行に割れる。下限だけ決める */
.outlook--months .ol-k{flex:0 0 auto;min-width:4.5em}
/* 今日の行は結論。少し大きくして、荒れなら記号の色をそのまま語に移す */
.outlook .ol-today .ol-v{font-size:var(--text-lg)}
.outlook .ol-today .ico-rough + .ol-k + .ol-v{color:var(--color-coral-t)}

/* ══ 近いうちの催し ═══════════════════════
   表にしない。場所の有無で列が揃わず、空欄だらけの表になる。
   日付・名前・場所の3つを1行に流し、区切りは1週間表と同じ 1px の罫にする。
   日付は折り返させない（「9/6〜9/」で改行すると読めない）。
   名前は折り返してよいので、残りの幅を全部渡す。 */
.events{list-style:none;margin:0;padding:0}
/* 日付と名前は同じ行に、場所は名前の下に置く。流し込みだと、名前が長い行だけ
   場所が日付の下へ回り込み、日付の列だけが浮いて見えた */
.events li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-3xs) var(--space-md);
  align-items:baseline;line-height:1.5;
  padding:var(--space-md) 0;border-bottom:1px solid var(--color-line);
}
.events li > .post-meta{grid-column:2}
.events li:first-child{padding-top:0}
.events li:last-child{border-bottom:0}
.events time{
  font-family:var(--font-mono);font-size:var(--text-sm);
  color:var(--color-neutral);letter-spacing:.04em;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* 名前は伸ばさない。リンクの下線は要素の幅そのままなので、
   余白まで伸ばすと文字の無いところに線が残る */
.events .ev-name{flex:0 1 auto;min-width:0}
/* 場所は補足。行の中では上下の余白を持たせない */
.events .post-meta{margin:0;flex:0 1 auto}
/* 「この時期の島の行事」。日付を書かない代わりに、行事名を主・時期の言葉を従にする。
   時期の言葉は日付の位置（mono・neutral）に置いて、上の催しの一覧と目線の流れを揃える */
/* 行事の節は日付を持たないので、3つを流し込むほうが素直に収まる */
.traditions li{display:flex;flex-wrap:wrap}
.traditions .ev-name{font-weight:600}
.traditions .ev-phase{
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-neutral);
  letter-spacing:.04em;white-space:nowrap;
}
.events + .post-meta{margin-top:var(--space-md)}

/* ══ 上り・下りの見出し ═══════════════════
   利用者が探しているのは船名ではなく方向。結論のピルを左に置き、
   方向名・経路の順に太さを落として、視線が結論から入るようにする */
.dir-head{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);
  align-items:baseline;margin:var(--space-lg) 0 var(--space-sm);
}
.dir-head:first-child{margin-top:0}
.dir-name{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em}
.dir-sub{
  font-family:var(--font-mono);font-size:var(--text-sm);
  color:var(--color-neutral);letter-spacing:.04em;white-space:nowrap;
}

/* ══ 状態のピル ═══════════════════════════
   Hum の規則: 差し色は面ごとに1つ。珊瑚は「1ページに1度の山場」なので
   欠航にだけ使う。通常運航は色を持たせない。 */
.badge{
  display:inline-block;padding:var(--space-3xs) var(--space-md);
  border-radius:var(--r-pill);white-space:nowrap;
  font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;
}
.badge-normal{background:var(--color-paper-3);color:var(--color-neutral)}
.badge-warn{background:var(--color-pear);color:var(--color-ink)}
.badge-cancelled{background:var(--color-coral-t);color:var(--color-paper)}
.badge-marix,.badge-aline{
  background:transparent;color:var(--color-neutral);
  box-shadow:inset 0 0 0 1px var(--color-line);
}
.badge-ship{background:transparent;color:var(--color-ink);font-weight:700;padding-left:0}

/* ══ 表（1週間・潮見表・配船）══════════════
   横に長いので、枠の中だけで横スクロールさせる。
   ページ全体が横に動くと読めなくなる。
   右端は薄くぼかして、まだ列が続くことを示す。ぼかしが無いと
   枠でちょうど切れているように見えて、誰も横に振らない。 */
.table-scroll{
  margin:0 0 var(--space-lg);overflow-x:auto;
  border-radius:var(--r-lg);background:var(--color-paper-2);
  border:1px solid var(--color-line);
}
/* ぼかしは「必ず溢れている」幅にだけ出す。溢れていないのに端が薄れると、
   まだ続くという嘘の合図になる。実測（2026-09-03・1週間表）:
   表の実寸 489px / 枠の内寸 = min(画面,694) - 48。520px 以下なら内寸は
   472px までなので必ず溢れる。CSS に「溢れているか」を問う手段が無いため、
   偽陽性を出さない側に倒して閾値を決めている。 */
@media (max-width:520px){
  .table-scroll{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
}
/* 枠に収まると分かっている表は、端をぼかさない（横へ続くという嘘の合図になる） */
.table-fit{-webkit-mask-image:none !important;mask-image:none !important}

table{
  border-collapse:collapse;width:100%;
  font-size:var(--text-sm);line-height:1.5;font-variant-numeric:tabular-nums;
}
th,td{
  padding:var(--space-sm) var(--space-md);text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--color-line);
}
th{
  font-weight:700;font-size:var(--text-sm);letter-spacing:.04em;
  color:var(--color-ink);
  position:sticky;top:0;background:var(--color-paper-2);
}
tr:last-child td{border-bottom:0}
/* ピルの上下の余白は、行が60本並ぶ表では高さがそのまま全長になる。
   セルの余白が上下を持っているので、ピル側は持たなくてよい */
td .badge{padding-top:0;padding-bottom:0}
td small{color:var(--color-neutral)}
/* 今日の行だけ洋梨色の帯を左に置く。行全体を塗ると数字が読みにくい。
   太字にすると数字が潰れるので 500 で止める */
tr.today td{background:var(--color-paper-3);font-weight:500}
tr.today td:first-child{box-shadow:inset 3px 0 0 0 var(--color-pear)}
/* 配船は30日が一続きになる。月曜の上に太めの罫を引いて週で区切る */
tr.week-start td{border-top:2px solid var(--color-line)}

/* 2週間の潮見表。日の出・日の入を落とした4列版を 390px に収める。
   日付と潮回りの幅を決め、残りを満潮・干潮で等分する。
   セルの左右の余白を詰めているのは、その2文字ぶんで枠を超えるため */
/* 幅を決め打つのは、自動の列割りでは 390px に 1px 足りないため。
   枠に余裕のある画面では自動に任せる（決め打つと満潮・干潮だけが間延びし、
   「潮回り」の見出しが要らぬところで折り返す） */
@media (max-width:520px){
  .tide-2w{table-layout:fixed}
  .tide-2w th,.tide-2w td{padding:var(--space-sm) var(--space-3xs)}
  .tide-2w th:first-child,.tide-2w td:first-child{width:6.5em;padding-left:var(--space-sm)}
  .tide-2w th:nth-child(2),.tide-2w td:nth-child(2){width:2.8em}
  .tide-2w th:nth-child(n+3),.tide-2w td:nth-child(n+3){padding-left:0}
  /* 見出しの「潮回り」だけが列より広い。本文を折り返すと 14 行ぶんの高さになるが、
     見出しの折り返しは1回で済む */
  .tide-2w th{white-space:normal}
}

/* ══ 月別ページへの導線 ═══════════════════ */
.months{
  list-style:none;margin:0 0 var(--space-lg);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
}

@media (max-width:640px){
  .ferry-item{padding:var(--space-md) var(--space-md)}
  .card > .post{padding:var(--space-md)}
  th,td{padding:var(--space-sm)}
}

/* 「各社の発表」の日付。日付が見出し側に来る一覧なので、
   ol-v の time と同じように桁を揃える（並べたときに縦が揃わないと日付を追えない） */
.outlook .ol-k time{font-family:var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}