/* ============================================================
   FEEL THE LOCAL — ライターページ（/writers/）
   /articles/article.css の上に重ねて読む。
   見出しは記事一覧と同じ暗いスクリーン、カードも記事一覧と同じ見え方にそろえる。
   HTML は tools/build_writers.py が生成します。
   ============================================================ */

/* ── 見出し＝スクリーン ── */
/* 背景を黒（--dark）から紺に（9/26）。黒地だと重く沈んで見えるためです。
   色はサイトが持っている6色のうち HOTEL LIFE の紺（--c-hotel #33536E）の同系。
   色数を増やさずに済み、/articles/ と同じ「暗い帯のヒーロー」という構造も保てます。
   赤地も試しましたが、アイコン（.wr-av）の赤が消えてしまうため見送りました。
   紺ならアイコンは赤のままで映えるので、そこは触っていません。 */
.wr-head{position:relative;overflow:hidden;color:#fff;padding:56px 30px 64px;
  background:linear-gradient(155deg,#3D6182 0%,#2C475F 52%,#1E3245 100%)}
.wr-head .wr-eyebrow{color:rgba(255,255,255,.78)}
.wr-head .wr-note{background:rgba(0,0,0,.16)}
/* ライター一覧のファーストビューにだけ写真を敷く（2026-09-24）。各ライターのページは黒地のまま */
.wr-head--photo::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,10,12,.9) 0%,rgba(10,10,12,.72) 46%,rgba(10,10,12,.94) 100%),
    url('/img/hero/enoshima-sunset.webp') center/cover no-repeat}
.wr-head-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto}
.wr-crumb{display:flex;gap:10px;margin-bottom:34px;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.wr-crumb a{color:rgba(255,255,255,.7);transition:color .2s}
.wr-crumb a:hover{color:#fff}
.wr-eyebrow{font-family:var(--en);font-size:12px;letter-spacing:.28em;color:var(--sig);margin-bottom:14px}

/* 頭文字のアイコン */
.wr-av{display:grid;place-items:center;flex:0 0 auto;background:var(--red);color:#fff;font-family:var(--mc);font-weight:600;letter-spacing:0}
.wr-av--lg{width:132px;height:132px;font-size:54px}
.wr-av--md{width:84px;height:84px;font-size:34px;background:var(--ink)}
.wr-av--sm{width:40px;height:40px;font-size:17px;background:var(--ink)}

/* ライターページ：プロフィール */
.wr-profile{display:grid;grid-template-columns:132px minmax(0,760px);gap:0 44px;align-items:start}
.wr-name{font-family:var(--gt);font-weight:900;font-size:clamp(30px,4vw,46px);line-height:1.3;letter-spacing:.03em;margin-bottom:8px}
.wr-role{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.62);margin-bottom:22px}
.wr-text{font-size:14.5px;line-height:2.15;color:rgba(255,255,255,.86)}
.wr-text + .wr-text{margin-top:13px}
/* 「実在の人物ではありません」の断り（2026-09-24 岩下さん指示） */
.wr-note{margin-top:26px;padding:18px 20px;background:rgba(255,255,255,.07);max-width:min(760px,100%)}
.wr-note p{font-size:12.5px;line-height:1.95;color:rgba(255,255,255,.72)}
.wr-note p + p{margin-top:7px}
.wr-note-title{font-weight:500;color:#fff}
.wr-foot-note{max-width:1320px;margin:0 auto;padding:0 30px 96px}
.wr-foot-note .wr-note{margin-top:0;background:var(--paper2);max-width:none}
.wr-foot-note .wr-note p{color:#4A4A52}
.wr-foot-note .wr-note-title{color:var(--ink)}
@media(max-width:860px){.wr-foot-note{padding:0 20px 64px}}
.wr-list-lead{font-size:14px;line-height:2.05;color:rgba(255,255,255,.82);max-width:min(760px,100%)}
.wr-list-lead + .wr-list-lead{margin-top:10px}

/* ライター一覧：見出し */
.wr-list-title{font-family:var(--gt);font-weight:900;font-size:clamp(28px,4.4vw,52px);line-height:1.34;margin-bottom:18px}

/* ── 件数 ── */
.archive-results-bar{max-width:1320px;margin:0 auto;padding:28px 30px 18px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
.archive-count{font-family:var(--en);font-size:13px;letter-spacing:.16em}
.archive-count strong{font-size:26px;font-weight:400;color:var(--red);margin-right:5px}
.wr-results-note{font-size:12.5px;color:var(--smoke)}

/* ── 記事カード（記事一覧と同じ）── */
/* 罫線のグリッド（9/20・トップのコンテンツ欄と同じ作法）。
   gap で離して1枚ずつ枠を付けるのをやめ、コンテナとセルの border で1枚のグリッドにします。
   マスの中に余白（14px／下44px）を取ることで、線が構造として読めます。
   ホバーの浮き上がり（translateY＋影）は、グリッドが崩れるのでやめました。 */
.archive-grid{max-width:1320px;margin:0 auto;padding:22px 30px 88px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.archive-card{display:block;background:transparent;overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 14px 44px;transition:background .25s;color:inherit}
.archive-card:hover{background:var(--paper2)}
.archive-card-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#E9E7E2}
.archive-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.archive-card:hover .archive-card-thumb img{transform:scale(1.05)}
.archive-card-badge{position:absolute;top:9px;left:9px;z-index:2;border-radius:999px;font-family:var(--en);font-size:10.5px;
  letter-spacing:.16em;padding:4px 12px;color:#fff;line-height:1.35}
/* 今週足した記事の印（2026-09-30）。見た目はトップの .fr-new に合わせています。
   印の見た目は articles/article.css の .related-card-new と同じです */
/* 2026-10-19：ここだけ赤い点滅の古い印が残っていました。
   トップ・記事一覧・関連記事は10/13に小さめの黄色へ変えてあったので、そろえます。
   2026-10-19：文字の動きはやめました（読み込むたびに別のカードがずれて見えたため）。 */
.archive-card-new{position:absolute;top:9px;right:9px;z-index:4;border-radius:999px;overflow:hidden;
  font-family:var(--en);font-size:11px;letter-spacing:.14em;background:#FFD400;color:#141416;
  padding:4px 10px;line-height:1.3;box-shadow:0 2px 10px rgba(20,20,22,.28)}
.archive-card-new i{display:inline-block;font-style:normal;line-height:1}
@media(prefers-reduced-motion:reduce){}
.archive-card-badge.seasonal{background:#B08422}
.archive-card-badge.local-spots{background:var(--ink)}
.archive-card-badge.hotel-life{background:#33536E}
.archive-card-badge.business{background:#4C3E7A}
.archive-card-badge.walk-map{background:var(--sig)}
.archive-card-badge.interview{background:#3F6B55}
.archive-card-body{padding:18px 20px 22px}
.archive-card-hotel{font-family:var(--en);font-size:10.5px;letter-spacing:.16em;color:var(--red);margin-bottom:8px}
.archive-card-title{font-family:var(--mc);font-weight:600;font-size:15px;line-height:1.65;margin:0 0 11px;word-break:auto-phrase}
.archive-card-excerpt{font-size:12px;line-height:1.95;color:#5A5A62;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.archive-card-meta{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--en);font-size:11px;letter-spacing:.12em;color:var(--smoke)}
.archive-card-meta-dot{display:inline-block;width:4px;height:4px;background:var(--red);border-radius:50%;margin-right:6px;vertical-align:middle}
.archive-card:hover .archive-card-meta{color:var(--red)}

/* ── ほかのライター ── */
.wr-others{background:var(--paper2);padding:56px 30px 64px}
.wr-others-inner{max-width:1320px;margin:0 auto}
.wr-others-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.wr-others-head .wr-eyebrow{color:var(--red);margin:0}
.wr-others-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wr-other{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--paper);border-radius:10px;transition:background .2s,color .2s}
.wr-other:hover{background:var(--ink);color:#fff}
.wr-other:hover .wr-av{background:var(--red)}
.wr-other-name{font-family:var(--ja);font-weight:700;font-size:15px;letter-spacing:.04em}
.wr-other-n{margin-left:auto;font-family:var(--en);font-size:13px;letter-spacing:.1em;color:var(--smoke)}
.wr-other:hover .wr-other-n{color:rgba(255,255,255,.6)}

/* ── ライター一覧 ── */
/* ライター一覧も罫線のグリッドにそろえる（9/20）。文字だけのカードなので、
   下の余白は記事カード（44px）より控えめにしています */
.wr-list{max-width:1320px;margin:0 auto;padding:48px 30px 96px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wr-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:0 20px;padding:28px 26px 36px;background:transparent;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .25s}
.wr-card:hover{background:var(--paper2)}
.wr-card:hover .wr-av{background:var(--red)}
.wr-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.wr-card-name{font-family:var(--ja);font-weight:700;font-size:20px;letter-spacing:.04em}
.wr-card-n{font-family:var(--en);font-size:11px;letter-spacing:.14em;color:var(--smoke);white-space:nowrap}
.wr-card-n b{font-weight:400;font-size:18px;color:var(--red);margin-right:4px}
.wr-card .wr-role{color:var(--smoke);margin-bottom:12px;font-size:12px}
.wr-card-text{font-size:12.5px;line-height:1.95;color:#4A4A52;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ── レスポンシブ ── */
@media(max-width:1180px){
  .wr-list{grid-template-columns:1fr 1fr}
  .wr-others-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .wr-head{padding:36px 20px 44px}
  .wr-crumb{margin-bottom:26px}
  .wr-profile{grid-template-columns:1fr;gap:22px}
  .wr-av--lg{width:88px;height:88px;font-size:36px}
  .archive-results-bar{padding:20px 20px 12px}
  /* 1列にはしない。640px以下で「左に正方形・右に文字」の行に切り替えるため（記事下の
     「他のおすすめ記事」と同じ見せ方。iPad縦は2列のまま） */
  .archive-grid{padding:16px 20px 56px}
  .wr-others{padding:40px 20px 48px}
  .wr-others-list{grid-template-columns:1fr 1fr}
  .wr-list{grid-template-columns:1fr;padding:28px 20px 64px;border-top:0;border-left:0}
  .wr-card{grid-template-columns:64px minmax(0,1fr);gap:0 16px;padding:22px 20px;border-right:0}
  .wr-av--md{width:64px;height:64px;font-size:26px}
}
/* 記事一覧の列数は、記事下の「他のおすすめ記事」（.related-grid）と同じにそろえる。
   1001px以上＝3列／641〜1000px＝2列／640px以下＝行。
   以前は1180px以下で2列だったため、幅1100px前後のPCでも2列になっていました。 */
@media(max-width:1000px){
  .archive-grid{grid-template-columns:1fr 1fr}
}

/* ライターの記事一覧（640px以下）：記事下の「他のおすすめ記事」と同じ行に詰める。
   縦積みの大きい写真（1枚407px・13本で5328px）だと、その人の記事を見渡せないため。
   値は articles/article.css の .related-card（640px以下）と同じにそろえています。 */
@media(max-width:640px){
  .archive-grid{grid-template-columns:1fr;gap:0;padding:8px 20px 56px;border-top:0;border-left:0}
  .archive-card{display:grid;grid-template-columns:clamp(100px,28vw,120px) minmax(0,1fr);
    gap:0 12px;align-items:start;overflow:visible;
    background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 0}
  .archive-card:first-child{padding-top:4px}
  .archive-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .archive-card-thumb{aspect-ratio:1/1}
  .archive-card-badge{top:6px;left:6px;font-size:8.5px;letter-spacing:.1em;padding:2px 8px}
  .archive-card-body{padding:0}
  .archive-card-hotel{font-size:10px;margin-bottom:5px}
  .archive-card-title{font-size:13.5px;line-height:1.7;margin:0}
  /* 抜粋と日付の行は出さない（「他のおすすめ記事」と同じ。写真＋ホテル名＋タイトルだけ） */
  .archive-card-excerpt,.archive-card-meta{display:none}
}
@media(max-width:480px){
  .wr-others-list{grid-template-columns:1fr}
}