/*
Theme Name: WAI
Theme URI:
Author: WAI
Description: 写真とことばのための、静かで余白のあるブログテーマ。淡いブルーグレーと生成り色、明朝系フォントを基調にしたデザイン（参考デザイン再現用スケルトン）。
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: wai
*/

:root{
  /* テーマ色（2026-10-25 AIさん指定）：「作り込んでいないセンス」インディー・カルチャー基調 */
  --wai-paper:#F3F0E8;        /* ペーパーアイボリー */
  --wai-olive:#879078;        /* ソフトオリーブ */
  --wai-smoky:#536B83;        /* スモーキーブルー */
  --wai-bordeaux:#81565A;     /* ダスティボルドー */
  --wai-camel:#C4A67B;        /* サンドキャメル */
  --wai-blue:var(--wai-smoky);
  --wai-blue-dark:var(--wai-bordeaux);
  --wai-bg:var(--wai-paper);
  --wai-surface:#ece8dc;
  --wai-text:#2f3433;
  --wai-muted:#7c7a72;
  --wai-line:#ddd6c6;
  --wai-serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --wai-sans:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wai-bg);color:var(--wai-text);font-family:var(--wai-serif);line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:0 auto}

/* Header */
.site-header{background:var(--wai-blue);color:var(--wai-paper)}
.site-header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.site-title{font-size:24px;letter-spacing:.18em;font-family:Georgia,serif}
.menu-button{font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:none;border:0;color:inherit;cursor:pointer}
.site-nav{display:none}
.site-nav.is-open{display:block;padding:0 0 18px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap;font-size:13px;letter-spacing:.12em}

/* Hero */
.hero{display:grid;grid-template-columns:1.45fr 1fr;background:var(--wai-bg)}
.hero-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:56px 8%}
.hero-eyebrow{color:var(--wai-blue-dark);letter-spacing:.28em;font-size:12px;margin:0 0 22px}
.hero-title{font-size:clamp(34px,4.6vw,58px);line-height:1.45;font-weight:500;margin:0 0 28px}
.hero-lead{font-size:15px;color:#55534d;margin:0}
.hero-lead + .hero-lead{margin-top:14px}

/* Category cards */
.categories{padding:34px 0 10px}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.category-card{position:relative;overflow:hidden;aspect-ratio:21/10;background:#ddd}
.category-card img{width:100%;height:100%;object-fit:cover}
.category-card-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.category-card-label .en{font-family:Georgia,serif;font-size:20px;letter-spacing:.04em;line-height:1.2}
.category-card-label .ja{font-size:12px;letter-spacing:.28em}

/* Main layout */
.main-layout{display:grid;grid-template-columns:1fr 260px;gap:44px;padding:28px 0 64px}
.section-head{display:flex;align-items:center;gap:22px;margin:18px 0 26px}
.section-head h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:0;white-space:nowrap}
.section-head .line{height:1px;background:var(--wai-line);flex:1}
.view-all{font-size:11px;letter-spacing:.22em;color:var(--wai-muted);white-space:nowrap}

/* Posts */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;background:#e6e0d2}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-meta{display:flex;gap:16px;color:var(--wai-muted);font-size:12px;margin:12px 0 4px}
.post-meta .cat{font-family:Georgia,serif}
.post-title{font-size:17px;line-height:1.6;margin:0 0 8px;font-weight:600}
.post-excerpt{font-size:13px;color:#5b5952;margin:0;line-height:1.85}

/* Sidebar */
.sidebar{background:var(--wai-surface);padding:18px 20px 26px;height:fit-content}
.sidebar h3{font-family:Georgia,serif;font-weight:400;font-size:16px;margin:22px 0 10px}
.sidebar h3:first-of-type{margin-top:16px}
.sidebar p{font-size:13px;color:#55534d}
.about-button{display:inline-block;border:1px solid #b9b2a2;border-radius:999px;padding:6px 18px;font-size:12px;margin-top:8px}
.category-list{list-style:none;margin:0;padding:0;font-size:14px}
.category-list li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid transparent}
.follow{font-size:13px}

/* Article */
.article{max-width:760px;margin:0 auto;padding:48px 0 72px}
.article h1{font-size:32px;line-height:1.6}
.article-content{font-size:16px}
.pagination{margin:28px 0;text-align:center;letter-spacing:.15em;font-size:13px}

/* Footer */
.site-footer{background:var(--wai-blue);color:var(--wai-paper);padding:26px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-logo{font-family:Georgia,serif;font-size:22px;letter-spacing:.18em}
.footer-nav{font-size:11px;letter-spacing:.18em;display:flex;gap:14px;flex-wrap:wrap}
.copyright{font-size:11px;letter-spacing:.12em}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .main-layout{grid-template-columns:1fr}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .post-grid{grid-template-columns:1fr}
  .category-grid{grid-template-columns:1fr}
}

/* Blog head / filters */
.blog-head{padding:52px 0 8px;max-width:720px}
.blog-head h1{font-family:Georgia,serif;font-weight:400;font-size:44px;margin:0 0 14px}
.blog-lead{color:#55534d;font-size:15px}
.filter-links{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 6px;padding:14px 0;border-top:1px solid var(--wai-line);border-bottom:1px solid var(--wai-line);font-family:Georgia,serif;font-size:14px;letter-spacing:.06em}
.camera-note{font-size:12px;letter-spacing:.14em;color:var(--wai-muted)}
.post-grid-blog .post-card-featured{grid-column:1/-1}
.post-grid-blog .post-card-featured .thumb{aspect-ratio:21/9}

/* Photography strip (top page) */
.photo-strip{padding:18px 0 6px}
.photo-strip-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.photo-strip-grid a{position:relative;display:block;overflow:hidden}
.photo-strip-grid img{width:100%;height:100%;object-fit:cover}
.photo-strip-main{aspect-ratio:16/10}
.photo-strip-side{display:grid;gap:18px}
.photo-strip-side a{aspect-ratio:16/9.2}
.photo-caption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:11px;letter-spacing:.16em;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.photo-strip-lead{color:#55534d;font-size:14px;margin:16px 0 0}

/* Photography page */
.photography{padding-bottom:70px}
.photography-intro{max-width:760px;color:#55534d}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 22px;margin-top:26px}
.photo-item{margin:0}
.photo-item img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-item-wide{grid-column:1/-1}
.photo-item-wide img{aspect-ratio:21/10}
.photo-item figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px}
.photo-title{font-size:15px}
.photo-meta{font-size:11px;letter-spacing:.14em;color:var(--wai-muted)}
@media (max-width:700px){.photo-grid{grid-template-columns:1fr}.photo-strip-grid{grid-template-columns:1fr}}

/* Photography: Visual Archive layout (v0.3, 参考画像1枚目) */
.photography-head{text-align:center;padding:56px 0 34px}
.photography-head .hero-eyebrow{color:var(--wai-muted);letter-spacing:.34em}
.photography-head h1{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-weight:700;font-size:clamp(30px,4vw,42px);letter-spacing:.02em;margin:0 0 12px;color:#111}
.photography-head .blog-lead{text-align:center;margin:0}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px}
.photo-item{margin:0;overflow:hidden}
.photo-item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.photo-item-wide{grid-column:auto}
.photo-item-wide img{aspect-ratio:4/5}
.photo-item figcaption{display:none}
@media (max-width:560px){.photo-grid{grid-template-columns:repeat(2,1fr);gap:8px}}