@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

:root { --ink:#24352f; --muted:#6b7972; --line:#d9e1dc; --paper:#fbfcf9; --mint:#e9f2ed; --mint-deep:#cfe5d9; --peach:#f6e4d8; --peach-deep:#dfaa90; --blue:#e7eff4; --accent:#4f9274; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans JP',sans-serif; line-height:1.8; word-break:normal; overflow-wrap:break-word; line-break:strict; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; }
.shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:absolute; left:-9999px; top:8px; z-index:5; background:var(--ink); color:#fff; padding:8px 14px; }
.skip-link:focus { left:8px; }
.site-header { border-bottom:1px solid var(--line); background:rgba(251,252,249,.92); position:sticky; top:0; z-index:4; backdrop-filter:blur(12px); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:36px; }
.brand { display:flex; align-items:center; gap:12px; line-height:1.2; }
.brand strong { display:block; font-family:'Noto Serif JP',serif; font-size:1.02rem; letter-spacing:.08em; }
.brand small { display:block; color:var(--muted); font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.03em; margin-top:5px; }
.brand-mark { width:35px; height:35px; border-radius:50%; background:var(--mint-deep); display:grid; place-items:center; position:relative; }
.brand-mark:before,.brand-mark:after,.brand-mark span { content:""; position:absolute; border:1.5px solid var(--accent); border-radius:50%; }
.brand-mark:before { width:20px; height:10px; transform:rotate(-35deg); }
.brand-mark:after { width:10px; height:20px; transform:rotate(35deg); }
.brand-mark span { width:5px; height:5px; background:var(--accent); border:0; }
.site-nav { display:flex; align-items:center; gap:30px; font-size:.82rem; color:var(--muted); }
.site-nav a:hover,.text-link:hover { color:var(--accent); }
.nav-note { border:1px solid var(--line); border-radius:99px; padding:7px 15px; color:var(--ink); }
.menu-toggle { display:none; border:1px solid var(--line); border-radius:99px; background:transparent; padding:6px 12px; font-size:.76rem; }
.hero { min-height:500px; display:grid; grid-template-columns:1fr 380px; align-items:center; gap:100px; padding:76px 0 78px; }
.eyebrow { margin:0 0 13px; color:var(--accent); font-family:'DM Mono',monospace; font-size:.69rem; letter-spacing:.15em; }
.eyebrow-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--peach-deep); margin-right:7px; vertical-align:1px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Noto Serif JP',serif; font-weight:600; letter-spacing:.04em; line-height:1.45; }
h1 { font-size:clamp(2.6rem,4.2vw,3.7rem); margin-bottom:22px; }
h1 em,h2 em { color:var(--accent); font-style:normal; }
.hero-lead { color:var(--muted); font-size:.98rem; line-height:2; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }
.button { display:inline-flex; gap:16px; align-items:center; border-radius:99px; padding:13px 21px; font-size:.8rem; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(36,53,47,.1); }
.button-primary { color:#fff; background:var(--ink); }
.text-link { display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid currentColor; padding-bottom:2px; font-size:.82rem; color:var(--muted); }
.hero-note { min-height:316px; padding:28px 31px; position:relative; overflow:hidden; background:var(--peach); border-radius:13px; box-shadow:14px 14px 0 var(--mint-deep); transform:rotate(2deg); }
.hero-note:after { content:""; width:170px; height:170px; border:1px solid rgba(176,119,86,.25); border-radius:50%; position:absolute; right:-63px; bottom:-80px; }
.note-topline,.post-meta,.post-footer,.archive-date { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.note-topline { color:#a37058; font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.12em; }
.note-spark { color:#b3795e; font-size:2.5rem; line-height:1; margin:35px 0 13px; }
.note-label { color:#a37058; font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.12em; }
.note-message { font-family:'Noto Serif JP',serif; font-size:1.43rem; line-height:1.8; }
.note-line { height:1px; background:rgba(163,112,79,.3); margin:22px 0 17px; }
.note-foot { color:#a37058; font-size:.72rem; line-height:1.6; }
.section { padding:76px 0; }
.section-tint { background:var(--mint); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:30px; }
.section-heading h2 { font-size:clamp(1.65rem,3vw,2.3rem); margin:0; }
.section-intro { color:var(--muted); font-size:.79rem; line-height:1.9; margin:0; text-align:right; }
.compact-heading { margin-bottom:24px; }
.latest-card { min-height:250px; }
.featured-post { background:#fff; border:1px solid var(--line); border-radius:14px; padding:31px 36px; }
.featured-post,.archive-item { cursor:pointer; }
.featured-post:hover,.archive-item:hover { border-color:var(--mint-deep); }
.featured-post h3 { font-family:'Noto Serif JP',serif; font-size:1.55rem; line-height:1.6; margin:25px 0 12px; }
.featured-post p { color:var(--muted); max-width:700px; margin-bottom:30px; }
.post-meta { color:var(--muted); font-size:.72rem; }
.category-chip { display:inline-block; padding:3px 10px; border-radius:99px; background:var(--mint); color:var(--accent); font-size:.68rem; }
.source-chip { display:inline-block; padding:3px 9px; border-radius:99px; background:#f4eadb; color:#9b7652; font-size:.63rem; }
.source-note { color:#8a9791!important; font-size:.67rem!important; margin:0 0 9px!important; }
.source-links { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 11px; }
.source-links a { color:var(--accent); font-size:.68rem; text-decoration:underline; text-underline-offset:3px; }
.post-footer { border-top:1px solid var(--line); padding-top:17px; color:var(--muted); font-size:.74rem; }
.post-footer a { color:var(--accent); }
.card-read { border:0; border-bottom:1px solid currentColor; padding:0 0 2px; background:transparent; color:var(--accent); font-size:.74rem; cursor:pointer; }
.card-read:hover { color:var(--ink); }
.archive-actions { display:flex; flex-wrap:wrap; align-items:center; gap:15px; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.category-card { border:0; border-radius:12px; min-height:148px; padding:23px; text-align:left; display:grid; grid-template-columns:auto 1fr; gap:7px 15px; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.category-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(36,53,47,.08); }
.category-card.peach { background:var(--peach); }.category-card.sage { background:#dcebe1; }.category-card.blue { background:var(--blue); }
.category-symbol { font-size:1.65rem; line-height:1.3; color:var(--accent); }
.category-card strong { display:block; font-family:'Noto Serif JP',serif; font-size:1rem; }
.category-card small { color:var(--muted); font-size:.73rem; }
.category-card b { grid-column:2; color:var(--muted); font-family:'DM Mono',monospace; font-size:.63rem; font-weight:400; }
.archive-heading { margin-bottom:21px; }
.search-field { display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--ink); padding:4px 0; color:var(--muted); }
.search-field input { width:210px; border:0; background:transparent; outline:0; color:var(--ink); font-size:.8rem; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:27px; }
.filter-button { background:transparent; border:1px solid var(--line); border-radius:99px; padding:6px 15px; font-size:.72rem; cursor:pointer; }
.filter-button.is-active { border-color:var(--accent); color:var(--accent); background:var(--mint); }
.archive-list { border-top:1px solid var(--line); }
.archive-item { display:grid; grid-template-columns:170px 1fr; gap:35px; padding:24px 0; border-bottom:1px solid var(--line); }
.archive-date { justify-content:flex-start; align-items:flex-start; flex-direction:column; color:var(--muted); font-family:'DM Mono',monospace; font-size:.65rem; }
.archive-item h3 { font-family:'Noto Serif JP',serif; font-size:1.05rem; margin:0 0 6px; }
.archive-item p { color:var(--muted); font-size:.77rem; margin:0 0 10px; }
.empty-state { border:1px dashed #c8d5ce; background:#fff; border-radius:14px; text-align:center; padding:44px 20px; }
.empty-icon { color:var(--peach-deep); font-size:1.7rem; }
.empty-state h3 { font-family:'Noto Serif JP',serif; font-size:1.05rem; margin:8px 0 6px; }
.empty-state p { color:var(--muted); font-size:.76rem; margin:0; }
.small-note { font-size:.68rem!important; color:#8a9791!important; }
.article-modal { width:min(680px,calc(100% - 32px)); max-height:min(760px,calc(100dvh - 32px)); padding:0; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--paper); box-shadow:0 24px 80px rgba(36,53,47,.25); }
.article-modal::backdrop { background:rgba(24,37,31,.56); backdrop-filter:blur(4px); }
.modal-inner { padding:29px 34px 34px; overflow:auto; max-height:min(760px,calc(100dvh - 32px)); }
.modal-header { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.modal-header .eyebrow { margin-bottom:0; }
.modal-close { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; }
.modal-close:hover { border-color:var(--accent); color:var(--accent); }
.modal-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:27px 0 18px; color:var(--muted); font-size:.72rem; }
.modal-meta time { margin-left:auto; font-family:'DM Mono',monospace; }
.article-modal h2 { margin:0 0 16px; font-size:clamp(1.45rem,4vw,2rem); line-height:1.55; }
.modal-origin { padding:12px 14px; border-left:3px solid var(--peach-deep); background:#fffaf5; color:var(--muted); font-size:.73rem; }
.modal-body { margin:27px 0 18px; font-size:.91rem; line-height:2; }
.modal-body p { margin:0; white-space:pre-line; }
.modal-body p + p { margin-top:1.05em; }
.modal-body ul { margin:0 0 1.05em; padding-left:1.35em; }
.modal-body li { padding-left:.18em; }
.article-body-heading { margin:0 0 10px; color:var(--ink); font-family:'Noto Serif JP',serif; font-size:1.02rem; line-height:1.7; }
.modal-body h4.article-body-heading { margin-top:1.3em; font-size:.94rem; }
.article-body-pending { padding:15px; border:1px dashed var(--line); border-radius:10px; background:#fffaf5; color:var(--muted); }
.modal-source-note { padding-top:16px; border-top:1px solid var(--line); color:#8a9791; font-size:.72rem; }
.modal-sources { margin-top:25px; }
.modal-label { margin:0 0 9px; color:var(--muted); font-size:.72rem; font-weight:700; }
.modal-sources .source-links { margin:0; }
body.modal-open { overflow:hidden; }
.about-section { background:var(--ink); color:#f6faf7; padding:75px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
.about-section .eyebrow { color:var(--mint-deep); }.about-section h2 { font-size:clamp(1.6rem,3vw,2.35rem); margin:0; }.about-section h2 em { color:#a9d8ba; }
.about-copy { color:#c5d4ca; font-size:.86rem; line-height:2; padding-top:22px; }.about-copy .small-note { color:#91a69a!important; margin-top:24px; }
.site-footer { background:#1b2925; color:#97aaa0; font-size:.69rem; }.footer-inner { display:flex; align-items:center; gap:20px; min-height:74px; }.brand-footer { color:#eff8f1; font-family:'Noto Serif JP',serif; font-size:.85rem; margin:0; }.copyright { margin-left:auto; font-family:'DM Mono',monospace; font-size:.6rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .shell { width:min(100% - 34px,680px); }.header-inner { min-height:70px; }.menu-toggle { display:block; }.site-nav { display:none; position:absolute; left:17px; right:17px; top:63px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:0 12px 24px rgba(36,53,47,.1); }.site-nav.is-open { display:grid; gap:0; }.site-nav a { padding:10px 8px; }.nav-note { border-radius:8px; }.hero { grid-template-columns:1fr; gap:53px; padding:56px 0 66px; }.hero-note { width:min(100%,370px); justify-self:center; }.section { padding:60px 0; }.section-heading { align-items:start; flex-direction:column; gap:12px; }.section-intro { text-align:left; }.category-grid { grid-template-columns:1fr; }.category-card { min-height:110px; }.archive-heading { flex-direction:row; align-items:end; }.archive-item { grid-template-columns:1fr; gap:9px; }.archive-date { flex-direction:row; align-items:center; }.about-grid { grid-template-columns:1fr; gap:17px; }.about-copy { padding-top:0; }.footer-inner { flex-wrap:wrap; gap:8px 16px; padding:17px 0; }.copyright { margin-left:0; width:100%; }.desktop-break { display:none; } }
@media (max-width:480px) { h1 { font-size:2.5rem; }.hero-lead { font-size:.88rem; }.hero-actions { align-items:flex-start; flex-direction:column; gap:17px; }.featured-post { padding:24px 21px; }.featured-post h3 { font-size:1.25rem; }.post-footer { align-items:flex-start; flex-direction:column; gap:12px; }.archive-heading { align-items:flex-start; flex-direction:column; }.search-field { width:100%; }.search-field input { flex:1; width:auto; }.hero-note { transform:none; box-shadow:9px 9px 0 var(--mint-deep); }.modal-inner { padding:23px 20px 25px; }.modal-meta time { width:100%; margin-left:0; }.modal-body { font-size:.86rem; }.article-modal { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }.modal-inner { max-height:calc(100dvh - 20px); } }