/* ニャンニャンの里 — 小値賀島の保護猫活動
   木のぬくもり／島の光／余白広め／写真が主役。かわいいだけにしない。 */

:root{
  --ground:#faf7f1;
  --surface:#fffdf8;
  --ink:#332f28;
  --ink-soft:#6d675c;
  --line:#e9e1d3;
  --sea:#3f7d77;        /* 島の海・空。落ち着いた主アクセント */
  --sea-deep:#2f605b;
  --sea-tint:#e7f0ee;
  --sun:#b98a35;        /* 陽だまり。ごく控えめに */
  --shadow:0 1px 2px rgba(51,47,40,.05), 0 14px 40px rgba(51,47,40,.07);
  --radius:16px;
  --wrap:640px;
  --wide:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#201d19;
    --surface:#2a2621;
    --ink:#ece6db;
    --ink-soft:#a89f8f;
    --line:#3b342b;
    --sea:#79b3ad;
    --sea-deep:#8fc4be;
    --sea-tint:#26332f;
    --sun:#d8ab5b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#201d19; --surface:#2a2621; --ink:#ece6db; --ink-soft:#a89f8f;
  --line:#3b342b; --sea:#79b3ad; --sea-deep:#8fc4be; --sea-tint:#26332f; --sun:#d8ab5b;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:16.5px;
  line-height:1.9;
  letter-spacing:.012em;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--sea-deep);text-underline-offset:3px;text-decoration-thickness:1px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 22px}

h1,h2,h3{
  font-family:"Zen Maru Gothic","Noto Sans JP",serif;
  font-weight:700;line-height:1.5;text-wrap:balance;
  letter-spacing:.02em;margin:0;
}

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap-wide{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:1.02rem;color:var(--ink);text-decoration:none}
.brand .paw{width:22px;height:22px;flex:none;color:var(--sea)}
.head-right{display:flex;align-items:center;gap:10px;flex:none}
.head-cta{
  font-size:.82rem;font-weight:700;white-space:nowrap;
  background:var(--sea);color:#fff;text-decoration:none;
  padding:8px 15px;border-radius:999px;
}
.head-cta:hover{background:var(--sea-deep)}
.lang-switch{
  font-size:.8rem;font-weight:700;white-space:nowrap;color:var(--sea-deep);
  text-decoration:none;padding:6px 10px;border:1.5px solid var(--line);border-radius:999px;
}
.lang-switch:hover{border-color:var(--sea);color:var(--sea)}
.brand{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:430px){
  .head-cta{font-size:.74rem;padding:7px 11px}
  .lang-switch{font-size:.72rem;padding:5px 8px}
  .brand{font-size:.9rem;gap:6px}
  .site-head .wrap-wide{padding:0 14px;gap:8px}
}

/* ---------- HERO ---------- */
.hero{position:relative;margin-top:0}
.hero-photo{
  position:relative;width:100%;aspect-ratio:4/5;max-height:78vh;overflow:hidden;
  background:var(--sea-tint);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.05) 0%, rgba(20,18,15,.0) 30%, rgba(20,18,15,.42) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 30px;color:#fff;
  max-width:var(--wrap);margin:0 auto;
}
.hero-copy .eyebrow{
  font-size:.74rem;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;opacity:.92;margin:0 0 10px;
}
.hero-copy h1{font-size:clamp(1.7rem,1.25rem+2.4vw,2.5rem);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-copy p{margin:.5rem 0 0;font-size:1rem;line-height:1.85;text-shadow:0 1px 12px rgba(0,0,0,.4);max-width:26em}
@media(min-width:760px){
  .hero-photo{aspect-ratio:16/9}
  .hero-photo img{object-position:center 38%}
}

/* ---------- セクション共通 ---------- */
.section{padding:64px 0}
.section + .section{padding-top:52px}
.section-eyebrow{
  font-size:.74rem;letter-spacing:.15em;font-weight:700;text-transform:uppercase;
  color:var(--sea);margin:0 0 12px;
}
.section h2{font-size:clamp(1.35rem,1.1rem+1.4vw,1.7rem);margin:0 0 14px}
.section p{margin:0 0 16px;color:var(--ink)}
.lead{font-size:1.05rem;color:var(--ink-soft)}
.muted{color:var(--ink-soft);font-size:.9rem}

.section--tint{background:var(--sea-tint)}
.section--surface{background:var(--surface);border-block:1px solid var(--line)}

/* 大きな写真ブロック */
.figure{margin:22px 0 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.figure figcaption{font-size:.8rem;color:var(--ink-soft);padding:9px 4px 0}
.figrow{display:grid;gap:14px;margin-top:22px}
@media(min-width:620px){.figrow{grid-template-columns:1fr 1fr}}
.figrow .figure{margin:0}
.figrow .figure img{aspect-ratio:1/1}

/* 「猫たちの暮らし」= リード1文にまとめ、上下の余白を詰める（間延び対策） */
.life-lead{
  font-family:"Zen Maru Gothic",serif;font-weight:700;
  font-size:clamp(1.05rem,1rem+.5vw,1.2rem);line-height:1.9;color:var(--sea-deep);
  margin:0 0 10px;
}
#life{padding-top:46px;padding-bottom:44px}
#life .life-lead + p{margin-bottom:0}
#life .figrow{margin-top:16px}
#life + .section{padding-top:40px}
@media(max-width:560px){
  #life{padding-top:34px;padding-bottom:32px}
  #life .figrow{margin-top:13px;gap:12px}
  #life .figrow .figure img{aspect-ratio:3/2}   /* 縦積みでも間延びさせない・庭写真の実比率で切れも減る */
  #life + .section{padding-top:30px}
}

/* 活動リスト */
.acts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.acts li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line);
}
.acts li:first-child{border-top:0}
.acts .dot{width:9px;height:9px;border-radius:50%;background:var(--sea);margin-top:11px}
.acts b{font-family:"Zen Maru Gothic",serif;display:block;margin-bottom:1px}
.acts p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ボランティア */
.vols{display:grid;gap:12px;margin:24px 0 8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.vols{gap:18px;grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.vols{grid-template-columns:repeat(4,1fr)}}
.vol{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.vol-photo{aspect-ratio:4/5;overflow:hidden;background:var(--sea-tint)}
.vol-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.vol-body{padding:12px 12px 14px;text-align:center}
.vol-body b{font-family:"Zen Maru Gothic",serif;display:block;font-size:.98rem}
.vol-meta{display:block;font-size:.8rem;color:var(--sea-deep);font-weight:700;margin-top:3px}
.vol-body p{margin:6px 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.75}

/* 猫カード */
.cats{display:grid;gap:18px;margin-top:24px}
@media(min-width:560px){.cats{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.cat-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sea-tint)}
.cat-photo img{width:100%;height:100%;object-fit:cover}
.cat-noimg{display:flex;align-items:center;justify-content:center;height:100%;padding:16px;text-align:center;color:var(--ink-soft);font-size:.85rem}
.cat-status{
  position:absolute;left:10px;top:10px;font-size:.72rem;font-weight:700;
  color:#fff;background:var(--ink-soft);padding:3px 10px;border-radius:999px;
}
.cat--seeking .cat-status{background:var(--sea)}
.cat--decided .cat-status{background:var(--sun)}
.cat--decided .cat-photo img{filter:grayscale(.45) opacity(.9)}
.cat-body{padding:15px 16px 18px}
.cat-body h3{font-size:1.08rem;margin:0 0 4px}
.cat-meta{margin:0 0 6px;font-size:.82rem;color:var(--sea-deep);font-weight:700}
.cat-body>p{margin:0 0 6px;font-size:.93rem;color:var(--ink-soft);line-height:1.75}
.cat-body>p:last-child{margin-bottom:0}
.cat-intro{margin-top:8px}
.cat-line{font-size:.86rem;color:var(--ink-soft);margin:10px 0 0}
.cat-line b{display:block;font-size:.74rem;color:var(--sea-deep);font-family:"Zen Maru Gothic",serif;font-weight:700}
.cat-gallery{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cat-thumb{width:calc(33.333% - 4px);aspect-ratio:1/1;border-radius:8px;overflow:hidden;display:block}
.cat-thumb img{width:100%;height:100%;object-fit:cover}

/* 写真＋名前だけの「ニャンニャンの里で暮らす猫たち」— あたたかいコンパクト表示 */
.cats--compact{grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:560px){.cats--compact{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cats--compact{grid-template-columns:repeat(4,1fr)}}
.cat--compact{display:flex;flex-direction:column}
.cat--compact .cat-photo{aspect-ratio:1/1}
.cat--compact .cat-name{
  margin:0;padding:10px 12px 12px;text-align:center;
  font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:.98rem;color:var(--ink);
  line-height:1.4;word-break:keep-all;
}
.cats-sub{margin:44px 0 4px;font-family:"Zen Maru Gothic",serif;font-weight:700;font-size:1.08rem;color:var(--ink)}
.cats-note{
  margin:22px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--sea-tint);color:var(--ink);font-size:.94rem;line-height:1.85;
}

/* 活動レポート */
.updates{display:grid;gap:18px;margin-top:24px}
.update{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);
}
.update-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.update-head time{font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.update-cat{font-size:.72rem;font-weight:700;color:var(--sea-deep);background:var(--sea-tint);padding:2px 10px;border-radius:999px}
.update h3{font-size:1.06rem;margin:0 0 8px}
.update p{margin:0 0 10px;font-size:.94rem;color:var(--ink)}
.update p:last-child{margin-bottom:0}
.update-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.update-photos a{width:calc(33.333% - 6px);aspect-ratio:4/3;border-radius:8px;overflow:hidden;display:block}
.update-photos img{width:100%;height:100%;object-fit:cover}

/* スキップリンク */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sea);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.skip-link:focus{left:0}

/* ===== アルバム（ギャラリー） ===== */
.ga-grid{
  display:grid;gap:8px;margin-top:24px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:560px){.ga-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(min-width:900px){.ga-grid{grid-template-columns:repeat(4,1fr);gap:12px}}
.ga-item{
  display:block;padding:0;border:0;margin:0;cursor:pointer;
  background:var(--sea-tint);border-radius:12px;overflow:hidden;
  aspect-ratio:1/1;position:relative;
}
.ga-item img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transition:transform .25s ease}
@media(hover:hover){.ga-item:hover img{transform:scale(1.05)}}
.ga-item:focus-visible{outline:3px solid var(--sea);outline-offset:2px}

/* ライトボックス */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(18,16,13,.94);
  align-items:center;justify-content:center;
}
.lb.is-open{display:flex}
.lb-fig{margin:0;max-width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lb-img{
  max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:8px;background:#000;box-shadow:0 10px 60px rgba(0,0,0,.5);
}
.lb-cap{color:#f3efe6;font-size:.9rem;margin-top:12px;text-align:center;padding:0 16px;font-family:"Zen Maru Gothic",sans-serif}
.lb-count{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.7);font-size:.8rem;font-variant-numeric:tabular-nums}
.lb-close,.lb-nav{
  position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.lb-close{top:14px;right:14px;width:44px;height:44px;font-size:1.6rem}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2.5px solid #fff;outline-offset:2px}
@media(min-width:700px){.lb-prev{left:24px}.lb-next{right:24px}}
@media (prefers-reduced-motion:reduce){.ga-item img{transition:none}}

/* 支援 */
.support{display:grid;gap:16px;margin-top:24px}
@media(min-width:640px){.support{grid-template-columns:1fr 1fr}}
.support-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.support-card h3{font-size:1.1rem;margin:0 0 6px}
.support-card p{margin:0 0 14px;color:var(--ink-soft);font-size:.94rem;flex:1}
.btn{
  display:inline-block;text-align:center;text-decoration:none;font-weight:700;font-size:.95rem;
  background:var(--sea);color:#fff;padding:12px 20px;border-radius:12px;min-height:46px;line-height:1.5;
}
.btn:hover{background:var(--sea-deep)}
.btn--ghost{background:transparent;color:var(--sea-deep);border:1.5px solid var(--sea)}
.btn--wide{display:block;width:100%}
.badge-soon{
  display:inline-block;align-self:flex-start;font-size:.8rem;font-weight:700;
  color:var(--sun);background:color-mix(in srgb,var(--sun) 14%,transparent);
  padding:8px 14px;border-radius:10px;
}
/* PayPay QR */
.support-qr{
  display:block;align-self:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px;text-decoration:none;width:100%;max-width:320px;margin-top:4px;
}
.support-qr img{width:100%;height:auto;display:block;border-radius:4px}
.support-qr-cap{display:block;margin-top:6px;font-size:.78rem;color:var(--ink-soft);font-weight:700;text-align:center}

/* LIVE */
.lives{display:grid;gap:18px;margin-top:24px}
@media(min-width:720px){.lives{grid-template-columns:1fr 1fr}}
.live{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.live-frame{
  position:relative;aspect-ratio:16/9;background:#14120f;cursor:pointer;border:0;padding:0;width:100%;display:block;
}
.live-frame img{width:100%;height:100%;object-fit:cover;opacity:.9;display:block}
.live-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(20,18,15,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:56% center;pointer-events:none;
}
.live-frame .live-dot{
  position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  color:#fff;background:#c0392b;padding:3px 8px;border-radius:6px;pointer-events:none;
}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-frame.is-playing{cursor:default}
.live-frame.is-playing .live-play,.live-frame.is-playing .live-dot,.live-frame.is-playing img{display:none}
.live-cap{padding:12px 14px 14px}
.live-cap b{font-family:"Zen Maru Gothic",serif;display:block;font-size:.98rem}
.live-cap span{font-size:.82rem;color:var(--ink-soft)}
.live-yt-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;min-height:44px;padding:8px 16px;
  border:1.5px solid var(--sea);border-radius:10px;
  color:var(--sea-deep);background:transparent;
  font-size:.86rem;font-weight:700;text-decoration:none;text-align:center;
}
.live-yt-link::before{content:"▶";font-size:.72em;line-height:1}
.live-yt-link:hover{background:var(--sea-tint)}
.live-yt-link:focus-visible{outline:3px solid var(--sea);outline-offset:2px}

/* 問い合わせ / フッター */
.contact-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;margin-top:22px;box-shadow:var(--shadow);
}
.contact-box dl{margin:0;display:grid;gap:4px 14px}
.contact-box dt{font-weight:700;font-size:.86rem;color:var(--sea-deep);font-family:"Zen Maru Gothic",serif}
.contact-box dd{margin:0 0 10px;font-size:.95rem}
.site-foot{
  background:var(--surface);border-top:1px solid var(--line);
  padding:40px 0 56px;color:var(--ink-soft);font-size:.85rem;line-height:1.9;
}
.site-foot .sns-row{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.site-foot .sns-row a{font-weight:700;color:var(--sea-deep);text-decoration:none}
.site-foot .fine{font-size:.78rem;opacity:.8;margin-top:14px}

/* アンカー位置補正（sticky header分） */
:target{scroll-margin-top:74px}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--sea);outline-offset:2px;border-radius:4px}