/* KinoStudio — 国家建設中テーマ */
:root{
  --bg:#f7fbff;           /* 明るい空色の下地 */
  --fg:#1e2a3a;           /* 濃紺に近い文字色 */
  --muted:#5b6b7c;
  --accent:#1b88f4;       /* 冒険の空と水の青 */
  --warn:#e6b800;         /* ゴールド系注意色 */
  --card:#ffffff;
  --line:rgba(0,0,0,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* マップ風の淡いグリッド */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 0 0;
}

/* Background animation layer */
.bg-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
main, footer{position:relative; z-index:1}

a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}

.container{width:min(1100px,90%); margin-inline:auto}

/* Header & Nav */
header.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:.6rem; padding:.8rem 0}
.brand svg{width:26px; height:26px}
.brand .title{font-weight:700; letter-spacing:.3px}
nav.primary{display:flex; align-items:center; gap:1rem}
nav.primary a{display:inline-block; padding:.5rem .9rem; border:1px solid currentColor; border-radius:.6rem; text-decoration:none; transition:transform .2s}
nav.primary a:hover{transform:translateY(-1px)}
nav.primary a.active{font-weight:600; background:rgba(27,136,244,.12);}
.spacer{flex:1}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--fg); padding:.4rem .6rem; border-radius:6px}

@media (max-width: 760px){
  nav.primary{display:none}
  nav.primary.open{display:flex; flex-direction:column; align-items:flex-start; padding-bottom:.8rem}
  .nav-toggle{display:inline-block}
}

/* Hero */
.hero{padding:clamp(2rem,6vw,4rem) 0}
.hero h1{font-size: clamp(28px, 4.6vw, 56px); line-height:1.1; margin:.2rem 0}
.hero .lede{color:var(--muted)}

/* Progress */
.progress{margin:1.2rem 0; background:rgba(0,0,0,.04); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.progress .bar{height:12px; width:0; background: linear-gradient(90deg, var(--accent), #6fd0ff)}
.progress .meter{display:flex; justify-content:space-between; color:var(--muted); font-size:.9rem; margin-top:.4rem}

/* Caution stripe */
.caution{position:relative; background:repeating-linear-gradient(135deg, transparent 0 10px, rgba(230,184,0,.22) 10px 20px); border:1px dashed rgba(230,184,0,.55); padding:.75rem 1rem; border-radius:10px}
.caution:before{content:"CONSTRUCTION ZONE"; position:absolute; top:-10px; left:10px; font-size:.7rem; color:#ffffff; background:var(--warn); padding:.15rem .4rem; border-radius:4px; font-weight:700}

/* Cards / Grids */
.grid{display:grid; gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid.cols-3{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .6rem}
.muted{color:var(--muted)}

/* Footer */
footer.site-footer{margin-top:3rem; padding:2rem 0; border-top:1px solid var(--line); color:var(--muted)}

/* Blog */
.toolbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0}
.toolbar input[type="search"]{flex:1; min-width:180px; background:#ffffff; border:1px solid var(--line); color:var(--fg); padding:.5rem .7rem; border-radius:8px}
.tag{border:1px solid var(--line); color:var(--fg); padding:.25rem .5rem; border-radius:999px; font-size:.85rem; cursor:pointer; background:rgba(255,255,255,.04)}
.post-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; box-shadow:var(--shadow)}
.post-card h3{margin:.2rem 0 .4rem}
.post-meta{color:var(--muted); font-size:.9rem}

/* Teaser tiles (construction vibe) */
.teasers{margin: 1rem 0 1.5rem}
.t-card{position:relative; background:
  repeating-linear-gradient(135deg, rgba(230,184,0,.18) 0 10px, rgba(255,255,255,.0) 10px 20px),
  linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55));
  border:1px solid var(--line); border-radius:12px; padding:.8rem .9rem; box-shadow:var(--shadow); min-height:90px}
.t-card a{display:block; color:inherit}
.t-card h4{margin:0 0 .35rem; font-size:1rem}
.t-meta{color:var(--muted); font-size:.85rem}
.status{position:absolute; top:.6rem; right:.6rem; font-size:.75rem; padding:.1rem .45rem; border-radius:999px; border:1px solid var(--line); color:#334; background:rgba(255,255,255,.75)}

/* Bulletin (home latest posts) */
.bulletin{margin-top:1.5rem}
.bulletin h2{margin:0 0 .6rem}
.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem}
@media(max-width:900px){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mini-grid{grid-template-columns:1fr}}
.mini-card{display:block; padding:.6rem .7rem; background:linear-gradient(180deg, rgba(27,136,244,.06), rgba(255,255,255,.92)); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; box-shadow:var(--shadow); transition:transform .2s}
.mini-card{position:relative; padding-right:2.2rem}
.mini-card:hover{transform:translateY(-1px)}
.mini-card::before{content:"完了"; position:absolute; top:.45rem; right:.45rem; font-size:.72rem; line-height:1; padding:.18rem .45rem; border-radius:999px; background:var(--accent); color:#fff; border:1px solid rgba(0,0,0,.08)}
.mini-title{display:block}
.mini-meta{display:block; color:var(--muted); font-size:.85rem; margin-top:.15rem}
.mini-badge{position:absolute; top:.45rem; right:.45rem; font-size:.72rem; line-height:1; padding:.18rem .45rem; border-radius:999px; background:var(--accent); color:#fff; border:1px solid rgba(0,0,0,.08)}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}
.thumb{aspect-ratio:4/3; background:linear-gradient(135deg, rgba(27,136,244,.10), rgba(255,255,255,.8)); border:1px solid var(--line); border-radius:10px; display:flex; align-items:flex-end; justify-content:flex-start; padding:.5rem; color:var(--muted)}

/* Utilities */
.row{display:flex; gap:1rem; align-items:center}
.pill{display:inline-block; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.8rem}
.btn{display:inline-flex; gap:.4rem; align-items:center; background:rgba(27,136,244,.08); color:var(--fg); border:1px solid var(--accent); padding:.5rem .8rem; border-radius:10px}
.btn:hover{transform:translateY(-1px)}