:root{
  --bg:#faf7f2; --card:#ffffff; --ink:#2b2620; --sub:#6f6455;
  --accent:#b4762a; --accent-soft:#f3e7d3; --line:#e5dccb;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  line-height:1.75; font-size:16px;
}
html[lang="en"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:780px; margin:0 auto; padding:0 18px 56px}

/* header */
header.site{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 0 10px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
header.site .brand{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink)}
header.site .brand img{width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--line)}
header.site nav{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:.88rem}
header.site nav a{color:var(--sub)}
header.site nav a.here{color:var(--ink); font-weight:700}
header.site .lang{font-size:.88rem; border:1px solid var(--line); border-radius:999px; padding:2px 10px; background:var(--card)}

/* hero */
.hero{text-align:center; padding:34px 0 8px}
.hero img{width:132px; height:132px; border-radius:50%; object-fit:cover; border:2px solid var(--line); background:#fff}
.hero h1{font-size:1.65rem; line-height:1.4; margin:16px 0 8px}
.hero p.lead{color:var(--sub); margin:0 auto; max-width:600px}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.chips span{background:var(--accent-soft); border-radius:999px; padding:3px 12px; font-size:.85rem}

/* content */
h1.page{font-size:1.5rem; line-height:1.45; margin:22px 0 4px}
p.pagedesc{color:var(--sub); margin:0 0 20px}
h2{font-size:1.18rem; margin:30px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--accent-soft)}
h3{font-size:1.02rem; margin:20px 0 4px}
p{margin:8px 0}
ul,ol{margin:8px 0 8px 1.2em; padding:0}
li{margin:4px 0}
.cards{display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.card h3{margin:0 0 4px}
.card p{margin:0; color:var(--sub); font-size:.94rem}
.card a{font-weight:700}
.entry-meta{display:flex; gap:8px; align-items:center; margin-bottom:2px}
.entry-date{color:var(--sub); font-size:.82rem}
.new-badge{background:var(--accent); color:#fff; border-radius:999px; padding:0 8px; font-size:.72rem; font-weight:700; line-height:1.7}
.entry-source{font-size:.85rem; margin-top:6px}
.news-list{list-style:none; margin:10px 0 4px; padding:0}
.news-list li{display:flex; gap:10px; align-items:baseline; padding:8px 2px; border-bottom:1px dashed var(--line)}
.news-list li:last-child{border-bottom:none}
.news-date{color:var(--sub); font-size:.86rem; white-space:nowrap}
.note{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:10px 14px; margin:16px 0}
.note p{margin:2px 0}
.small{font-size:.88rem; color:var(--sub)}
code{background:var(--accent-soft); border-radius:4px; padding:0 5px; font-size:.9em}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding-top:14px; font-size:.85rem; color:var(--sub)}
footer.site nav{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px}
footer.site nav a{color:var(--sub)}

/* ===== Page themes (v1.3.0) =====
   everyday = theme-screen (after the screenshot edition of the showcase site)
   unusual  = theme-rich   (after the rich edition: motion, gradients, glow)
   advanced = theme-bold   (after the bold edition: huge type, contrast)
   Deliberately NOT carried over from those editions: sticky bars that stay
   on screen while scrolling, and layouts that squeeze titles on phones. */

/* shared reveal (rich & bold & screen) */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* --- theme-screen: visual panel on every card, calm editorial frame --- */
.theme-screen{--accent:#b3402a; --accent-soft:#f6e7e1}
.theme-screen h1.page{font-size:1.7rem; letter-spacing:.01em}
.theme-screen .entry{padding:0; overflow:hidden}
.theme-screen .entry-visual{
  height:104px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent-soft), #fbf3ec);
  color:var(--accent); border-bottom:1px solid var(--line);
}
.theme-screen .entry-visual svg{width:52px; height:52px}
.theme-screen .entry-meta, .theme-screen .entry h3, .theme-screen .entry p{margin-left:16px; margin-right:16px}
.theme-screen .entry-meta{margin-top:12px}
.theme-screen .entry p:last-child{margin-bottom:14px}
.theme-screen .new-badge{background:#b3402a}

/* --- theme-rich: gradients, soft shadows, gentle motion --- */
.theme-rich{--accent:#8a5aa8; --accent-soft:#efe6f7}
.theme-rich body{background:linear-gradient(180deg, #f7f2fa 0, var(--bg) 340px)}
.theme-rich h1.page{
  font-size:1.85rem;
  background:linear-gradient(92deg, #7a3f9e, #b4762a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.theme-rich .entry{
  border-radius:18px; border-color:#e2d4ee;
  box-shadow:0 6px 22px rgba(122,63,158,.10);
  transition:transform .35s ease, box-shadow .35s ease;
}
.theme-rich .entry:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(122,63,158,.16)}
.theme-rich .new-badge{background:linear-gradient(92deg, #7a3f9e, #b4762a)}
.theme-rich h2{border-bottom-color:#e8dcf3}

/* --- theme-bold: dark ground, oversized type, hard contrast --- */
.theme-bold{--bg:#171512; --card:#211e1a; --ink:#f3efe6; --sub:#b8b0a0; --line:#3a352c; --accent:#e0a458; --accent-soft:#332c1c}
.theme-bold body{background:var(--bg); color:var(--ink)}
.theme-bold header.site{border-bottom-color:var(--line)}
.theme-bold header.site .brand{color:var(--ink)}
.theme-bold header.site nav a{color:var(--sub)}
.theme-bold header.site nav a.here{color:var(--ink)}
.theme-bold header.site .lang{background:var(--card); color:var(--ink)}
.theme-bold .hero img{border-color:var(--line); background:var(--card)}
.theme-bold h1.page{font-size:clamp(2rem, 8.5vw, 3.2rem); line-height:1.2; font-weight:800; letter-spacing:.01em; text-transform:none}
.theme-bold h2{border-bottom:3px solid var(--accent); font-size:1.35rem}
.theme-bold .entry{border-radius:6px; border:1px solid var(--line); border-left:6px solid var(--accent); background:var(--card)}
.theme-bold .entry h3{font-size:1.2rem}
.theme-bold .entry-date{color:var(--accent); font-weight:700; letter-spacing:.06em}
.theme-bold .new-badge{background:var(--accent); color:#171512}
.theme-bold a{color:var(--accent)}
.theme-bold code{background:var(--accent-soft); color:var(--ink)}
.theme-bold .note{background:var(--card); border-color:var(--line)}
.theme-bold footer.site{border-top-color:var(--line); color:var(--sub)}
.theme-bold footer.site nav a{color:var(--sub)}
.theme-bold .card p{color:var(--sub)}
.theme-bold .small{color:var(--sub)}