/* ============================================================================
   world-ui.css — naru.blog「生きている世界」共通のデザイン言語
   署名はヒーロー（生き物の世界）。UIはその手漉きの質感に静かに合わせる。
   本物の書体・紙の切り抜きカード・墨のヘアライン・時刻に負けない可読性。
   各ページの <style> の後に読み込むこと（設計プロパティはこちらが勝つ）。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@400;500;600;700&family=Zen+Old+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --w-serif: 'Newsreader', 'Zen Old Mincho', Georgia, 'Times New Roman', serif;
  --w-body:  'Hanken Grotesk', 'Zen Kaku Gothic New', ui-sans-serif, system-ui, sans-serif;
  --w-mono:  'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --coral: #E0402A;
  --hair: color-mix(in srgb, var(--card-ink) 26%, transparent);
  /* カード面＝読める紙。JSが時刻で --card / --card-ink を差し替える（朝の“薄すぎ”対策） */
  --card: #FBF6EC;
  --card-ink: #2A2331;
  --card-soft: color-mix(in srgb, var(--card-ink) 62%, transparent);
  --card-faint: color-mix(in srgb, var(--card-ink) 40%, transparent);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- 地の文字 ---- */
body { font-family: var(--w-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- ナビ・ブランド ---- */
#brand, .brand { font-family: var(--w-serif); font-weight: 500; letter-spacing: .005em; }
nav.gnav a, nav.links a { font-family: var(--w-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
nav.gnav, nav.links { flex-wrap: nowrap; }
/* スマホ：4項目が1行に収まるよう詰める（各項目は改行しない） */
@media (max-width: 560px) {
  header.nav { padding: 12px 12px; gap: 6px; }
  #brand, .brand { font-size: 19px; }
  nav.gnav, nav.links { gap: 1px; }
  nav.gnav a, nav.links a { font-size: 9.5px; letter-spacing: .04em; padding: 6px 6px; }
}
@media (max-width: 380px) {
  nav.gnav a, nav.links a { font-size: 8.5px; letter-spacing: .01em; padding: 6px 4px; }
}
#lbl, #hline, #cog, #wline, #shint { font-family: var(--w-mono); }

/* ---- 調整パネル：ガラスをやめて“紙のメモ” ---- */
#panel, #devp {
  font-family: var(--w-mono);
  background: var(--card);
  color: var(--card-ink);
  border: 1.5px solid var(--hair);
  border-radius: 16px 13px 17px 14px / 14px 17px 13px 16px;
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 8%, transparent),
              0 16px 34px -20px color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ============================================================================
   紙の切り抜き（カード・読み物面）。均一シャドウ・完璧な角丸をやめる。
   ========================================================================== */
.door, .work, .soc, .notecard, .cell, .sheet, .cat-h, .lead {
  background: var(--card);
  color: var(--card-ink);
  border: 1.5px solid var(--hair);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 8%, transparent),
              0 18px 38px -22px color-mix(in srgb, var(--ink) 42%, transparent);
  position: relative;
}
/* 角丸は1枚ごとに少しずつ歪ませる（手で切った紙のように） */
.door, .work, .soc, .notecard, .cell, .sheet {
  border-radius: 20px 15px 22px 17px / 17px 22px 15px 20px;
}
.door:nth-of-type(2n), .work:nth-of-type(2n), .soc:nth-of-type(2n), .cell:nth-of-type(2n) {
  border-radius: 16px 21px 15px 23px / 22px 16px 21px 15px;
}
.door:nth-of-type(3n), .work:nth-of-type(3n), .soc:nth-of-type(3n), .cell:nth-of-type(3n) {
  border-radius: 22px 18px 16px 20px / 15px 21px 18px 22px;
}
.cat-h, .lead { border-radius: 15px 12px 16px 13px / 13px 16px 12px 15px; }
/* 微粒子（世界と同じ手ざわり） */
.door::after, .work::after, .soc::after, .notecard::after, .cell::after, .sheet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply; background-image: var(--grain);
}
/* カードのリンクは下線を出さない（紙面の一部として振る舞う） */
a.door, a.work, a.soc, a.notecard { text-decoration: none; color: var(--card-ink); }
a.door *, a.work *, a.soc *, a.notecard * { text-decoration: none; }
/* ふれると、そっと持ち上がってわずかに傾く（紙をつまむ感じ・控えめ） */
.door, .work, .soc, .notecard, .cell {
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
a.door:hover, a.work:hover, a.soc:hover, a.notecard:hover {
  transform: translateY(-4px) rotate(-.5deg);
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--ink) 10%, transparent),
              0 26px 46px -22px color-mix(in srgb, var(--ink) 50%, transparent);
}
/* 準備中カードは“下描き”。破線は手描き寄りに薄く */
.work.soon, .soc.soon { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 30%, transparent); }

/* ---- 内側の文字組み ---- */
.door b, .work b, .soc b, .notecard b {
  font-family: var(--w-serif); font-weight: 600; letter-spacing: .01em; line-height: 1.35;
}
.door span, .work span, .soc span, .notecard span, .cell .desc {
  font-family: var(--w-body); color: var(--card-soft);
}
.door i, .work i, .soc i, .notecard i, .cell .name {
  font-family: var(--w-mono); letter-spacing: .12em; color: var(--card-faint);
}
.cat-h { font-family: var(--w-mono); color: var(--card-faint); letter-spacing: .18em; }

/* ============================================================================
   見出し — 世界の上に直接置くと朝夕に沈むので、“紙のタグ”に乗せて必ず読める。
   アイブロウ（mono・珊瑚）＋セリフ表題＋末尾に署名の珊瑚の点。
   ========================================================================== */
main h1, main h2 {
  display: inline-block; margin: 0 0 clamp(11px, 1.3vw, 15px);
  background: var(--card); color: var(--card-ink);
  border: 1.5px solid var(--hair);
  border-radius: 17px 13px 18px 14px / 14px 18px 13px 17px;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 8%, transparent),
              0 18px 34px -22px color-mix(in srgb, var(--ink) 40%, transparent);
  padding: clamp(12px, 1.4vw, 16px) clamp(18px, 2vw, 24px);
  font-family: var(--w-serif); font-weight: 500; letter-spacing: .01em; line-height: 1.12;
}
main h1 { font-size: clamp(28px, 4.6vw, 44px); }
main h2 { font-size: clamp(24px, 3.1vw, 33px); }
main h1 .no, main h2 .no {
  display: block; margin-bottom: 9px;
  font: 700 11px/1 var(--w-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--coral);
}
main h1::after, main h2::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .26em;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;  /* 真円にしない */
  background: var(--coral); vertical-align: baseline;
}

/* ---- リード文・本文 ---- */
.lead {
  font-family: var(--w-serif); font-weight: 400; font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.68; color: var(--card-ink); letter-spacing: .01em;
  padding: clamp(12px, 1.5vw, 18px) clamp(18px, 2vw, 24px);
}
/* ヒーロー下の“軽い一行”（気候・時間の種明かし）。控えめに、でも読める */
.hero-note {
  display: inline-block; margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-family: var(--w-body); font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.75;
  color: var(--card-soft); background: var(--card);
  border: 1.5px solid var(--hair); border-radius: 14px 11px 15px 12px / 12px 15px 11px 14px;
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  padding: clamp(10px, 1.1vw, 13px) clamp(15px, 1.6vw, 19px);
}
/* About の本文も紙に乗せて読める（生き物はこの上を歩く） */
.bio {
  font-family: var(--w-body); font-size: 15px; line-height: 1.95; letter-spacing: .006em;
  background: var(--card); color: var(--card-ink);
  border: 1.5px solid var(--hair);
  border-radius: 18px 14px 19px 15px / 15px 19px 14px 18px;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 7%, transparent),
              0 18px 36px -22px color-mix(in srgb, var(--ink) 38%, transparent);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
}

/* ---- About の年表・事実：紙に乗せる＋書体を整える ---- */
.facts, .tl {
  background: var(--card); color: var(--card-ink);
  border: 1.5px solid var(--hair);
  border-radius: 18px 14px 19px 15px / 15px 19px 14px 18px;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 7%, transparent),
              0 18px 36px -22px color-mix(in srgb, var(--ink) 38%, transparent);
  padding: clamp(6px, 1vw, 12px) clamp(20px, 2.4vw, 28px) clamp(14px, 1.6vw, 20px);
}
.tl { padding-top: clamp(20px, 2.4vw, 28px); }
.fact { border-color: var(--hair) !important; }
.fact dt, .tl .yr, .tlnote { font-family: var(--w-mono); }
.fact dd, .tl p { font-family: var(--w-body); color: var(--card-soft); }
.tl b { font-family: var(--w-serif); font-weight: 600; color: var(--card-ink); }
.tl .rail::before { background: color-mix(in srgb, var(--card-ink) 22%, transparent) !important; }

/* ---- フッター ---- */
main footer, main footer span { font-family: var(--w-mono); letter-spacing: .06em; }
main footer span {
  background: var(--card); color: var(--card-faint); border: 1.5px solid var(--hair);
  border-radius: 12px 9px 13px 10px / 10px 13px 9px 12px;
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
main footer a { color: var(--card-soft); text-underline-offset: 2px; text-decoration-color: var(--coral); }

/* ============================================================================
   フォーム（お問い合わせ用・先に土台だけ）。同じ紙とヘアライン。
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label { font: 700 10.5px/1 var(--w-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--card-faint); }
.field input, .field textarea, .field select {
  font-family: var(--w-body); font-size: 15px; color: var(--card-ink);
  background: color-mix(in srgb, var(--card) 88%, #fff); border: 1.5px solid var(--hair);
  border-radius: 12px 9px 13px 10px / 10px 13px 9px 12px; padding: 12px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent);
}
.btn {
  font-family: var(--w-serif); font-weight: 600; font-size: 16px; color: var(--card);
  background: var(--ink); border: 1.5px solid var(--ink); cursor: pointer;
  border-radius: 999px 14px 999px 16px / 16px 999px 14px 999px; padding: 12px 26px;
  transition: transform .2s, box-shadow .2s; box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.btn:hover { transform: translateY(-2px) rotate(-.5deg); box-shadow: 2px 5px 0 color-mix(in srgb, var(--ink) 22%, transparent); }
.cform { max-width: 560px; pointer-events: auto; }
.formnote { margin: 15px 0 0; font-family: var(--w-mono); font-size: 11px; letter-spacing: .05em; line-height: 1.6; color: var(--card-faint); }

/* ============================================================================
   状態カタログ（この生き物のこと）— 小さな標本箱。均一グリッドを少しだけ崩す。
   ========================================================================== */
.catalog { margin-top: clamp(30px, 4.5vw, 56px); }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.9vw, 26px); }
@media (max-width: 680px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 4vw, 20px); } }
.cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 10px 15px; }
.cell canvas { width: 100%; height: 86px; display: block; }
.cell .name { font-family: var(--w-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--card-ink); text-align: center; }
.cell .desc { font-family: var(--w-body); font-size: 11px; line-height: 1.55; color: var(--card-soft); text-align: center; }

/* ============================================================================
   note 棚 — サムネ＋タイトルのカード。実データは後で renderNotes() で流し込む。
   ========================================================================== */
.notefeed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(14px, 1.7vw, 22px); }
.notefeed .notecard { display: flex; flex-direction: column; gap: 0; padding: 0; max-width: none; overflow: hidden; }
.nthumb {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--card-ink) 9%, var(--card));
  border-bottom: 1.5px solid var(--hair);
}
.nthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nthumb::after { /* サムネにも世界と同じ粒子 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply; background-image: var(--grain);
}
.nthumb .dot { /* 空サムネの署名（真円にしない珊瑚の点） */
  position: absolute; left: 14px; bottom: 12px; width: 9px; height: 9px;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; background: var(--coral); opacity: .9;
}
.nbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.nbody b { font-family: var(--w-serif); font-weight: 600; font-size: 15.5px; line-height: 1.45; color: var(--card-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nbody .meta { font-family: var(--w-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--card-faint); }
/* note「ぜんぶ読む」リンク */
.notemore { display: inline-block; margin-top: clamp(16px, 2vw, 22px); pointer-events: auto;
  font-family: var(--w-mono); font-size: 12px; letter-spacing: .1em; color: var(--card-ink);
  text-decoration: none; border-bottom: 1.5px solid var(--coral); padding-bottom: 2px; transition: opacity .2s; }
.notemore:hover { opacity: .62; }
.notecard.soon .nbody .bar { height: 11px; border-radius: 6px; background: color-mix(in srgb, var(--card-ink) 14%, transparent); }
.notecard.soon .nbody .bar.short { width: 58%; }
.notecard .meta { margin-top: auto; }

/* ---- 作品カード（works）を note 記事カードと同じ体裁に統一 ---- */
.work { padding: 0; gap: 0; overflow: hidden; }
.work .cover { aspect-ratio: 16 / 10; border-radius: 0; margin: 0; border-bottom: 1.5px solid var(--hair); }
.work .nbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.work .nbody i { margin-top: 2px; }
/* カバー／サムネにも世界と同じ粒子（両カード共通） */
.work .cover { position: relative; }
.work .cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply; background-image: var(--grain);
}

/* ---- ソーシャル一覧（About の「つながる」） ---- */
.slist { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 13px); }
.soc { display: flex; align-items: baseline; gap: 14px; padding: clamp(15px, 1.7vw, 19px) clamp(17px, 1.9vw, 22px); }
.soc b { min-width: 7.5em; }
.soc span { flex: 1; }
.soc i { white-space: nowrap; }
@media (max-width: 560px) { .soc { flex-direction: column; gap: 5px; } .soc b { min-width: 0; } }

/* ---- セクションの呼吸（余白のリズム）。詰めすぎない ---- */
main section + section { margin-top: clamp(34px, 5vw, 60px); }

/* ---- 品質の床：フォーカスと省モーション ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .door, .work, .soc, .notecard, .btn { transition: none !important; }
  a.door:hover, a.work:hover, a.soc:hover, a.notecard:hover, .btn:hover { transform: none; }
}