/*
Theme Name: Radio Control Diary — kazsh.com archive plate
Note: rc.kazsh.com（ラジコン日和 2010–2012・静的アーカイブ）を
      kazsh.com の白マット系デザイン（paper/ink/stone/line/pine）に統一するCSS。
      旧テーマ Equilibrium の style.css を置き換え。マークアップは無変更前提
      （ヘッダーのロゴテキスト化・hub-link追加のみHTML側で実施）。
      2026-07-06
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root{
  --paper:#F7F6F2;
  --ink:#17181A;
  --stone:#8B887E;
  --line:#E3E1D9;
  --pine:#3F5A4C;
  --en:"Outfit",sans-serif;
  --enjp:"Outfit","Noto Sans JP",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--jp);
  font-weight:300;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .25s,border-color .25s}
a:hover{color:var(--pine)}
a:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
img{max-width:100%;height:auto}
.clear{clear:both}
.push{clear:both}

#page-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ===== header ===== */
#top{position:relative;padding:24px 0 34px;border-bottom:1px solid var(--line);margin-bottom:48px}
.hub-link{font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:38px}
.hub-link a{color:var(--stone)}
.hub-link a::before{content:"\2190\00a0\00a0"}
.hub-link a:hover{color:var(--pine)}
h1.logo{font-weight:400}
h1.logo a{display:block;font-size:clamp(24px,3.4vw,34px);letter-spacing:.16em;line-height:1.3;font-weight:400}
h1.logo a:hover{color:var(--ink)}
h1.logo .eyebrow{display:block;font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--pine);margin-bottom:10px}
#nav{position:absolute;top:24px;right:0;display:flex;gap:26px;list-style:none}
#nav a{font-family:var(--en);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);border-bottom:1px solid transparent;padding-bottom:3px}
#nav a:hover{color:var(--pine);border-color:var(--pine)}

/* ===== featured (top page) ===== */
#featured{display:grid;grid-template-columns:repeat(3,1fr);gap:44px clamp(20px,3vw,36px);margin-bottom:64px}
.front-post{display:flex;flex-direction:column}
.featured-post{display:flex;flex-direction:column}
.featured-image{order:1;margin-bottom:16px}
.featured-image a{display:block}
.featured-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.featured-title{order:2}
.featured-title h2{font-size:15px;font-weight:500;line-height:1.65;letter-spacing:.02em}
.postMeta-featured,.postMeta-front{font-family:var(--en);font-weight:400;font-size:11.5px;letter-spacing:.12em;color:var(--stone);margin-top:8px}
.postMeta-featured .comments,.postMeta-front .comments{margin-left:14px}
.postMeta-featured .comments a,.postMeta-front .comments a{color:var(--stone)}
.postMeta-featured .comments a::after,.postMeta-front .comments a::after{content:" comments"}
.featured-content{margin-top:10px;font-size:13.5px}
.featured-content p{margin:0 0 8px}
.moretext a{font-family:var(--en);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pine);border-bottom:1px solid var(--line);padding-bottom:2px}
.moretext a:hover{border-color:var(--pine)}

/* ===== latest posts (top page) ===== */
/* #sidebar は #front-bottom の内側にネストされているため、floatは #latest-wrap に掛ける */
#front-bottom{width:100%}
#latest-wrap{float:left;width:66%}
#latest-wrap h2{font-family:var(--enjp);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);border-top:1px solid var(--line);padding-top:18px;margin-bottom:28px}
#latest-wrap .content{float:none;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:38px 24px}
.latest-post{display:flex;flex-direction:column}
.latest-image{order:1;margin-bottom:12px}
.latest-image a{display:block}
.latest-image img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--line)}
.latest-title{order:2}
.latest-title h2{font-size:13.5px;font-weight:500;line-height:1.6;letter-spacing:.02em}
.latest-content{font-size:12.5px}
.latest-content .postMeta-front{margin:6px 0 4px}
.latest-content p{margin:0 0 6px}

/* ===== single post / category list ===== */
.content{float:left;width:66%}
/* カテゴリ/アーカイブ一覧は2カラムグリッド（サムネM=303pxをほぼ等倍で表示するため） */
.content:has(> .latest-post-wrap){display:grid;grid-template-columns:repeat(2,1fr);gap:38px 24px;align-content:start}
.content:has(> .latest-post-wrap) > h2,
.content:has(> .latest-post-wrap) > .navigation,
.content:has(> .latest-post-wrap) > .clear{grid-column:1/-1}
.content:has(> .latest-post-wrap) > h2{font-size:16px;font-weight:500;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px}
.post{margin-bottom:56px}
.post h3{font-size:clamp(20px,2.6vw,27px);font-weight:500;line-height:1.55;letter-spacing:.04em;margin-bottom:12px}
.postMeta-post{font-family:var(--en);font-weight:400;font-size:11.5px;letter-spacing:.1em;color:var(--stone);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:28px}
.postMeta-post span{margin-right:16px}
.postMeta-post a{color:var(--stone)}
.postMeta-post .comments a::after{content:" comments"}
.post p{margin:0 0 1.5em}
.post img{border:1px solid var(--line);margin:6px 0}
.post ul,.post ol{margin:0 0 1.5em 1.4em}
.post blockquote{border-left:2px solid var(--line);padding-left:18px;color:var(--stone);margin:0 0 1.5em}

/* prev / next */
.navigation{display:flex;justify-content:space-between;gap:20px;font-size:13px;margin:44px 0}
.navigation .alignleft{text-align:left}
.navigation .alignright{text-align:right}

/* ===== comments (表示のみ・投稿フォームは静的化のため非表示) ===== */
#comments{margin-top:60px}
.comment-heading{font-family:var(--enjp);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);border-top:1px solid var(--line);padding-top:16px;margin-bottom:20px}
.commentlist{list-style:none}
.commentlist li.comment{padding:18px 0;border-bottom:1px solid var(--line)}
.commentwrap{overflow:hidden}
ul.commentmetadata{list-style:none;font-size:12px;color:var(--stone);margin-bottom:8px}
ul.commentmetadata li{display:inline-block;margin-right:14px}
.commentpost p{margin:0 0 .8em;font-size:14px}
.commentlist img.avatar{border:1px solid var(--line);border-radius:50%;float:left;margin:0 14px 6px 0;width:36px;height:36px}
#respond{display:none}

/* ===== sidebar ===== */
#sidebar{float:right;width:27%}
#sidebar ul{list-style:none}
#sidebar .widget{margin-bottom:42px}
.widgettitle{font-family:var(--enjp);font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);border-top:1px solid var(--line);padding-top:16px;margin-bottom:14px}
#sidebar .widget ul li{font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
#sidebar .widget ul li:last-child{border-bottom:none}
.current-cat>a{color:var(--pine)}
.tagcloud a{font-size:12px !important;color:var(--stone);margin-right:10px;line-height:2.2;display:inline-block}
.tagcloud a:hover{color:var(--pine)}
li#search-3{display:none} /* 静的アーカイブのため検索は無効 */

/* ===== footer ===== */
#footer{clear:both;border-top:1px solid var(--line);margin-top:80px;padding:22px 0 48px;font-size:12px;color:var(--stone);overflow:hidden}
#footer a{color:var(--stone);border-bottom:1px solid var(--line);padding-bottom:1px}
#footer a:hover{color:var(--pine);border-color:var(--pine)}
.floatLeft{float:left}
.floatRight{float:right}

/* ===== responsive ===== */
@media(max-width:880px){
  #featured{grid-template-columns:1fr 1fr}
  .content,#latest-wrap,#sidebar{float:none;width:100%}
  #sidebar{margin-top:64px}
}
@media(max-width:560px){
  #featured{grid-template-columns:1fr}
  #latest-wrap .content{grid-template-columns:1fr 1fr;gap:28px 16px}
  .content:has(> .latest-post-wrap){grid-template-columns:1fr}
  #nav{gap:16px}
  h1.logo a{letter-spacing:.1em}
  .navigation{flex-direction:column}
  .floatLeft,.floatRight{float:none}
}