/* 21F shared styles (Paper & Garden) — CLEAN LATEST */
:root{
  --bg: #f6f5f1;         /* やさしい生成り */
  --paper: #fbfaf6;      /* カード紙色 */
  --ink: #1f2a2e;        /* 墨色（本文） */
  --moss: #3a5d3b;       /* モスグリーン（アクセント） */
  --orange: #d88431;     /* 温かみのあるオレンジ */
  --orange-soft: color-mix(in oklab, var(--orange) 70%, white 30%);
  --muted: #6c7a6a;      /* 補助テキスト */
  --border: #e6e3db;
  --shadow: 0 2px 16px rgba(28,37,32,.06);
  --radius: 16px;
  --maxw: 1080px;
  /* Header logo sizing (header height fixed; only logo overscales) */
  --brand-box: 34px;  /* ヘッダ実効高さ */
  --logo-scale: 1.8;  /* ロゴ見た目倍率 */
  /* Work pages spacing */
  --work-gap: 24px;
  --work-gap-lg: 32px;
  /* News list window */
  --news-max-rows: 5;
  --news-row: 2.2em; /* 1件あたりの概算高さ */
}

html,body{height:100%; overflow-x:hidden;}
body{
  margin:0; color:var(--ink);
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.7; background: var(--bg);
  background-image:
    radial-gradient(1000px 500px at 10% -20%, rgba(58,93,59,.06), transparent 60%),
    radial-gradient(800px 400px at 120% 10%, rgba(216,132,49,.05), transparent 60%);
  text-rendering: optimizeLegibility;
  touch-action: pan-y; overscroll-behavior-x: contain;
}

/* ベース文字サイズ：mainのみ控えめ（かわいらしく） */
main{ font-size: .9375rem; /* 15px相当 */ letter-spacing: .02em; }

a{ color: var(--moss); text-decoration: none; }
a:hover{ text-decoration: underline; }

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

/* ============= Header ============= */
header{
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(120%) blur(6px);
  background: color-mix(in oklab, var(--bg) 85%, white 15%);
  border-bottom: 1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; min-height: var(--brand-box); }
.brand img.logo{
  height: calc(var(--brand-box) * var(--logo-scale));
  width:auto; display:block;
  /* ヘッダ高さは固定のままロゴだけ拡大（上下にはみ出してよい） */
  margin-top:  calc((var(--brand-box) - calc(var(--brand-box) * var(--logo-scale))) / 2);
  margin-bottom: calc((var(--brand-box) - calc(var(--brand-box) * var(--logo-scale))) / 2);
}
nav ul{ display:flex; gap:14px; list-style:none; margin:0; padding:0; flex-wrap: wrap; }
nav a{ padding:10px 12px; border-radius:10px; }
nav a:hover{ background: color-mix(in oklab, var(--moss) 10%, white 90%); text-decoration:none; }

/* ============= Lead (hidden) ============= */
.lead{ display:none; }

/* ============= Sections ============= */
section{ scroll-margin-top: 80px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 26px 0 12px; }
.section-head h2{ font-size: clamp(.9rem, .85rem + .4vw, 1.1rem); margin:0; font-weight:700; letter-spacing:.02em; color: var(--orange-soft); }
#illustration .section-head{ margin-top:12px; }

/* ============= Cards / Thumbs ============= */
.art-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card{ background: var(--paper); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; }
.thumb{ width:100%; aspect-ratio: 4 / 3; object-fit: cover; display:block; background:#eee; transition: transform .18s ease, filter .18s ease; transform-origin:center; will-change:transform,filter; }

/* Hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .card:hover .thumb, .card:focus-within .thumb{ transform: scale(1.03); filter: brightness(1.06) saturate(98%); }
  .card:hover, .card:focus-within{ box-shadow: var(--shadow), 0 6px 22px rgba(31,42,46,.08); }
}
.card:focus-visible{ outline: 2px solid color-mix(in oklab, var(--moss) 55%, white 45%); outline-offset: 2px; }

/* ============= Games ============= */
.game-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.game .thumb{ aspect-ratio: 4/3; }
.cap{ padding: 10px 12px; }
.game .cap{ position:absolute; left:0; right:0; bottom:0; padding: 6px 12px 8px; background: rgba(255,255,255,.75); backdrop-filter: saturate(110%) blur(2px); -webkit-backdrop-filter: saturate(110%) blur(2px); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); pointer-events:none; }
.game-title{ font-weight:400; margin-top:2px; }
.btns{ display:flex; gap:8px; margin-top: 10px; }
.btn{ display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:white; font-weight:600; }
.btn.primary{ background: var(--moss); color:white; border-color: color-mix(in oklab, var(--moss) 80%, black 20%); }
.btn:hover{ text-decoration:none; filter: brightness(1.02); }

/* ============= Comics (same size as Games) ============= */
#comics .art-grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#comics .thumb{ aspect-ratio: 4/3; }
#comics .art-grid a.card{ position: relative; }
#comics .art-grid a.card::after{
  content: attr(data-title);
  position: absolute; left:0; right:0; bottom:0;
  padding: 6px 12px 8px; background: rgba(255,255,255,.75);
  backdrop-filter: saturate(110%) blur(2px); -webkit-backdrop-filter: saturate(110%) blur(2px);
  border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
  font-weight: 400; pointer-events: none;
}

/* ============= Old games (small banners) ============= */
.banner-row{ display:flex; gap:12px; margin-top:16px; flex-wrap: wrap; justify-content:flex-start; }
.banner-row a{ display:block; padding:0; background:none; border:none; box-shadow:none; border-radius:8px; }
.banner-row img{ height:40px; width:auto; max-width:100%; object-fit:contain; display:block; border-radius:8px; transition:none; filter:none; }
@media (hover:hover) and (pointer:fine){ .banner-row a:hover img, .banner-row a:focus-visible img{ transform:none; filter:none; } }

/* ============= News (UL) ============= */
.news{
  /* 背景は確実に白紙色（color-mix非対応でもOKに） */
  background-color: var(--paper);
  background: color-mix(in oklab, var(--paper) 90%, white 10%);

  border:1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;

  /* 左の余白を「物理」「論理」両方で明示、0指定は撤去 */
  padding: 8px 8px 12px 8px;  /* 上 右 下 左 */
  padding-inline-start: 8px;

  font-size: .95rem;
  list-style: none;
  margin: 0;

  /* ウィンドウ化（最新5件相当） */
  max-height: calc(var(--news-row) * var(--news-max-rows));
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
.news li{ margin:8px 0; padding:2px 0; display:flex; gap:8px; align-items:flex-start; }
.news time{ flex:0 0 auto; width:10ch; color: var(--muted); font-variant-numeric: tabular-nums; }
.news li > *:not(time){ flex:1 1 0; min-width:0; line-height:1.6; overflow-wrap:anywhere; }

/* ============= Footer / About ============= */
footer{ margin: 28px 0 40px; border-top:1px solid var(--border); padding-top: 18px; color: var(--muted); }
.about{ display:grid; grid-template-columns: 1fr; gap: 10px; align-items:start; }
.avatar{ width:64px; height:64px; border-radius:999px; object-fit:cover; background:none; border:0; box-shadow:none; }
.bio p{ margin: 0; }
.bio p + p{ margin-top: .45em; }
.sns{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 8px; }
.pill{ border:1px solid var(--border); background: white; border-radius: 999px; padding: 6px 12px; }
/* 中央寄せバリエーション */
.about.center{ justify-items: center; }
.about.center .bio{ text-align: center; }
.about.center .sns{ justify-content: center; }
/* Mailの前に余白 */
.bio .sns + p{ margin-top: 1em; }

/* Work footer link as text */
.footer-links{ margin: 18px 0 6px; text-align: center; }
.home{ background:none; border:none; border-radius:0; padding:0; text-decoration:none; font-weight:400; }
.home:hover{ text-decoration: underline; filter:none; }

/* ============= Work pages ============= */
.paper{ background: var(--paper); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.work-stack{ display:grid; gap: var(--work-gap); justify-items: center; }
@media (min-width: 720px){ .work-stack{ gap: var(--work-gap-lg); } }
.work-stack > *{ display:block; }
.work-img{ max-width:100%; width:auto; height:auto; display:block; border-radius:0; background:none; margin-inline:auto; }
.paper + .footer-links{ margin-top: 0; }

/* ============= Mobile fine-tune ============= */
@media (max-width: 520px){
  nav ul{ gap:8px; }
  nav a{ padding:8px 10px; }
  :root{ --brand-box: 28px; }
  .avatar{ width:54px; height:54px; }
}