@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

:root{
  --ink:#1a1714; --ink-soft:#4a423b; --body:#2e2a24;
  --paper:#f4efe7; --paper-2:#ece4d7; --line:#d8cdba;
  --ochre:#a8642e; --ochre-deep:#8a4d22; --ochre-lite:#c9863f; --accent:#2f6b5e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,sans-serif;
  line-height:1.9;font-feature-settings:"palt" 1;letter-spacing:.02em;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block}
.serif{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;}
.script{font-family:"Parisienne","Snell Roundhand","Apple Chancery",cursive;letter-spacing:.01em;}
.mal{font-family:"Malayalam Sangam MN","Nirmala UI","Noto Sans Malayalam",sans-serif;}

/* ===== 上部バー ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(244,239,231,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.topbar .in{max-width:1080px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand-lockup{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.brand-lockup img{width:30px;height:30px;flex-shrink:0;}
.brand-lockup .b{font-weight:700;letter-spacing:.1em;font-size:15px;line-height:1;}
.brand-lockup .b span{font-weight:400;letter-spacing:.14em;}
.brand-lockup small{display:block;font-family:"Parisienne","Snell Roundhand",cursive;
  font-size:15px;color:var(--ochre-deep);margin-top:2px;line-height:1;}
.topbar .home{font-size:13px;color:var(--ink-soft);text-decoration:none;letter-spacing:.04em;white-space:nowrap;}
.topbar .home:hover{color:var(--ochre);}

/* ===== コンテナ ===== */
.container{max-width:760px;margin:0 auto;padding:0 24px;}

/* ===== 一覧ページ ===== */
.notes-head{padding:64px 24px 40px;text-align:center;}
.sec-label{font-size:12px;letter-spacing:.3em;color:var(--ochre);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;gap:12px;}
.sec-label::before,.sec-label::after{content:"";width:30px;height:1px;background:var(--ochre);}
.notes-head h1{font-size:clamp(26px,4vw,38px);margin-bottom:14px;letter-spacing:.04em;}
.notes-head p{color:var(--ink-soft);max-width:36em;margin:0 auto;font-size:15px;}
.notes-grid{max-width:1080px;margin:8px auto 90px;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ncard{display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;}
.ncard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,23,20,.10);}
.ncard.soon{opacity:.55;pointer-events:none;}
.thumb{aspect-ratio:16/10;position:relative;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;letter-spacing:.14em;}
.thumb.t1{background:linear-gradient(135deg,#8a6a3e,#c9863f);}
.thumb.t2{background:linear-gradient(135deg,#3a4a3d,#7a6b45);}
.thumb.t3{background:linear-gradient(135deg,#b9743a,#e0a45a);}
.thumb .tag{position:absolute;top:10px;left:10px;background:rgba(26,23,20,.45);
  padding:3px 9px;border-radius:3px;font-size:10px;letter-spacing:.12em;}
.ncard .body{padding:20px 20px 24px;}
.chip{display:inline-block;font-size:10.5px;letter-spacing:.1em;padding:2px 10px;border-radius:20px;border:1px solid;}
.chip.full{color:var(--ochre-deep);background:#f6ead9;border-color:#e6d4bb;}
.chip.short{color:var(--accent);background:#e6efe9;border-color:#cfe0d8;}
.ncard .date{font-size:11px;letter-spacing:.16em;color:var(--ochre);margin-left:8px;}
.ncard h3{font-size:17px;margin:11px 0 8px;line-height:1.6;font-weight:600;}
.ncard .ex{font-size:13.5px;color:var(--ink-soft);line-height:1.8;}
@media(max-width:860px){.notes-grid{grid-template-columns:1fr}}

/* ===== 記事ページ ===== */
.article{padding:52px 0 20px;}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.article-meta .date{font-size:12px;letter-spacing:.16em;color:var(--ochre);}
.article h1{font-size:clamp(25px,4.2vw,38px);line-height:1.55;margin-bottom:24px;letter-spacing:.02em;}
.article .lead{font-size:17px;color:var(--ink-soft);line-height:2.05;margin-bottom:34px;}
.article h2{font-size:22px;margin:46px 0 16px;letter-spacing:.03em;}
.article p{margin-bottom:20px;font-size:16px;line-height:2.05;color:var(--body);}
.article ul,.article ol{margin:0 0 20px 1.3em;color:var(--body);}
.article li{margin-bottom:8px;line-height:1.95;}
figure{margin:32px 0;}
figure img,.imgph{width:100%;border-radius:5px;border:1px solid var(--line);}
figcaption{font-size:12.5px;color:#9a8f7d;margin-top:10px;text-align:center;}
.imgph{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#e4daca 0 14px,#e9e0d1 14px 28px);
  display:flex;align-items:center;justify-content:center;color:#a99d88;
  font-size:12px;letter-spacing:.12em;text-align:center;padding:20px;}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:32px 0;}
.photo-grid figure{margin:0;}
.video{position:relative;aspect-ratio:16/9;margin:32px 0;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:#161310;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video .vph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(244,239,231,.6);font-size:12px;letter-spacing:.12em;text-align:center;padding:20px;}
blockquote{border-left:3px solid var(--ochre);padding:4px 0 4px 20px;margin:28px 0;
  color:var(--ink-soft);font-size:17px;line-height:1.9;}
.backlink{display:inline-block;margin-top:44px;font-size:13px;color:var(--ochre-deep);
  text-decoration:none;letter-spacing:.04em;}
.backlink:hover{color:var(--ochre);}

/* ===== フッター ===== */
.foot{background:var(--ink);color:rgba(244,239,231,.6);padding:36px 0;font-size:12px;
  letter-spacing:.06em;margin-top:56px;}
.foot .in{max-width:1080px;margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
