/* ファーストビュー */

.hero {
  padding: 48px 0 40px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "copy photo";
  align-items: center;
  gap: 56px;
  width: min(1120px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.hero-copy {
  grid-area: copy;
}

.hero h1 {
  margin: 14px 0 22px;
  font-size: clamp(32px, 3.1vw, 44px);
  line-height: 1.55;
}

.hero h1 span {
  display: block;
}

.lead {
  max-width: 32em;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.facts div {
  padding: 10px 20px 12px;
  border-radius: var(--radius);
  background: var(--cream);
}

.facts dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.facts dd {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.facts strong {
  margin-right: 3px;
  font-size: 32px;
}

.hero-photo {
  grid-area: photo;
}

.hero-photo img {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  object-position: 40% center;
}

.hero-photo figcaption,
.place-photo figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
}

/* 目的からさがす */

.paths ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: min(1120px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.paths a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.paths a:hover {
  background: var(--sage);
}

.paths .badge {
  font-size: 20px;
}

.path-text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.path-text strong {
  color: var(--ink);
  font-size: 17px;
}

.path-text small {
  color: var(--muted);
  font-size: 14px;
}

/* セクション共通 */

.section {
  padding: 96px 0;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.br-sp {
  display: none;
}

/* 民話 */

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.story {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.story:hover {
  box-shadow: 0 14px 32px rgb(92 70 48 / 0.14);
  transform: translateY(-3px);
}

.story img {
  aspect-ratio: 3 / 2;
}

.story-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.story-place {
  color: var(--lake);
  font-size: 14px;
  font-weight: 600;
}

.story-title {
  margin: 2px 0 2px;
  font-size: 24px;
}

.story-summary {
  font-size: 16px;
}

.story-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
}

/* 語りに出会える場所 */

.places {
  background: var(--sage);
}

.place-feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.place-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  object-position: 50% 22%;
}

.place-photo figcaption {
  text-align: left;
}

.place-feature-body {
  padding: 8px 16px 8px 0;
}

.place-type {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wood);
  font-size: 15px;
  font-weight: 700;
}

.place-type .badge {
  font-size: 15px;
}

.place h3,
.place-feature h3 {
  margin: 10px 0 6px;
  font-size: clamp(19px, 2vw, 22px);
}

.place-feature h3 {
  font-size: clamp(22px, 2.3vw, 28px);
}

.place-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

.place-feature .text-link,
.place .text-link {
  margin-top: 6px;
}

.place-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.place {
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--card);
}

.request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
  padding: 22px 28px;
  border-radius: var(--radius);
  background: var(--peach);
}

/* 活動記録 */

.record-list {
  display: grid;
  gap: 10px;
  margin-top: 32px;
}

.record-list a {
  display: grid;
  grid-template-columns: 150px 120px 1fr auto;
  align-items: center;
  gap: 4px 20px;
  padding: 18px 24px;
  border-radius: var(--radius);
  background: var(--card);
}

.record-list a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--green);
  border-right: 2px solid var(--green);
  border-radius: 1px;
  transform: none;
}

.record-list a:hover {
  background: var(--sage);
}

.record-list time {
  color: var(--muted);
  font-size: 15px;
}

.record-type {
  color: var(--lake);
  font-size: 14px;
  font-weight: 600;
}

.record-title {
  color: var(--ink);
  font-weight: 700;
  word-break: auto-phrase;
}

.record-title small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

/* もんぺの会のこと（語り手・作り手） */

.about {
  background: var(--cream);
}

.about-head {
  max-width: 44em;
}

.about-head h2 {
  margin-bottom: 4px;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.person {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.person-photo {
  overflow: hidden;
}

.person-photo img {
  aspect-ratio: 4 / 5;
}

.person-photo.is-storyteller img {
  object-position: 50% 20%;
}

.person-photo.is-maker img {
  object-position: 60% 38%;
}

.person-body {
  padding: 20px 24px 26px;
}

.person-role {
  color: var(--lake);
  font-size: 14px;
  font-weight: 600;
}

.person h3 {
  margin: 4px 0 8px;
  font-size: 21px;
}

.person-note {
  justify-content: center;
  background: var(--peach);
  box-shadow: none;
}

.person-note .person-body {
  padding: 32px 30px;
}

/* ご相談・ご参加 */

.join {
  padding: 88px 0;
  background: var(--peach);
}

.join-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px 64px;
}

.join h2 {
  margin-bottom: 16px;
}

.join-copy > p:not(.section-label) {
  max-width: 36em;
}

.join-list {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.join-list li {
  position: relative;
  padding-left: 28px;
}

.join-list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.55;
}

.join-actions {
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--card);
}

.join-actions .button {
  align-self: stretch;
}

.join-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
/* Existing translated copy follows the same soft, spacious layout. */
main.localized-home > .hero, main > .feature-links, main > .dashboard, main > .routine-section, main > .storytellers { width:min(1120px,calc(100% - var(--gutter)*2)); margin-inline:auto; }
main.localized-home > .hero { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:56px 0; }
.hero-paper h1 span { display:block; }.hero-stats { display:flex; gap:24px; }.hero-stats div { flex:1; }.hero-stats dt strong { font-size:28px; }.hero-stats dd { margin:0; }
.feature-links { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:72px; }.feature-card { display:flex; gap:16px; background:var(--card); padding:24px; border-radius:22px; box-shadow:var(--shadow); text-decoration:none; }.feature-card span:not(.card-icon) { display:grid; }.feature-card em { font-style:normal; }
.dashboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.dashboard > article { padding:32px; background:var(--card); border-radius:22px; box-shadow:var(--shadow); }.dashboard .message-card { grid-column:1/-1; background:var(--cream); }.activity-list a { display:block; padding:12px 0; border-bottom:1px solid var(--line); }.activity-meta { display:grid; }.player { display:none; }
.routine-section,.storytellers { padding-block:72px; }.routine-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }.hero-photo img { width:100%; object-fit:cover; border-radius:22px; }.photo-wash,.mountain-line,.card-art,.ink-mountain { display:none; }
@media(max-width:1100px) { .hero-inner, main.localized-home > .hero { grid-template-columns:1fr; } .hero-inner { grid-template-areas:"photo" "copy"; }.feature-links,.routine-grid,.people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.paths ul { grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px) { .section { padding:60px 0; }.story-grid,.place-feature,.place-list,.dashboard { grid-template-columns:1fr; }.feature-links,.routine-grid { gap:14px; }.feature-card { padding:16px; }.story-grid { gap:14px; }.hero { padding:24px 0; }.hero-photo img { aspect-ratio:3/2; }.story img { width:100%; }.dashboard .message-card { grid-column:auto; } }
main.localized-home > .hero .hero-copy, main.localized-home > .hero .hero-photo { grid-area:auto; }
main.localized-home > .hero .hero-photo { grid-column:2; grid-row:1; }
@media(max-width:1100px) { main.localized-home > .hero .hero-photo { grid-column:1; grid-row:1; } }
main ul, main ol { list-style:none; margin:0; padding:0; }
main .paths a, main .story, main .feature-card { color:var(--text); text-decoration:none; }
main .section-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:40px; }
main .text-link { display:inline-flex; min-height:44px; align-items:center; color:var(--green); font-weight:700; }
.localized-home .dashboard { grid-template-columns:1fr; margin-bottom:24px; }
.localized-home .dashboard > article { width:100%; }

/* Home content layouts, independent of the shared header. */
@media (max-width: 1100px) {
  .hero-inner { gap: 32px; }
  .place-list { grid-template-columns: 1fr; }
  .person-note { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .br-sp { display: inline; }
  .hero-inner { gap: 24px; }
  .hero h1 { margin: 10px 0 16px; font-size: clamp(24px, 7.2vw, 32px); }
  .facts div { padding: 8px 16px 10px; }
  .facts strong { font-size: 28px; }
  .paths ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .paths a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; }
  .path-text { min-width: 0; overflow-wrap: anywhere; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .section-lead { margin-top: 12px; }
  .story-grid { margin-top: 28px; }
  .story { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); border-radius: var(--radius); }
  .story img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .story-body { min-width: 0; padding: 14px 16px; }
  .story-title { font-size: 21px; }
  main .section-links { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 28px; }
  .section-links .text-link { justify-content: center; }
  .place-feature { gap: 16px; margin-top: 28px; padding: 14px 14px 20px; }
  .place-feature-body { padding: 0 6px; }
  .place-list { gap: 12px; margin-top: 12px; }
  .place { padding: 18px; }
  .request { padding: 20px; }
  .request .button { width: 100%; }
  .record-list { gap: 8px; }
  .record-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 14px 16px; }
  .record-list time { grid-column: 1; grid-row: 1; font-size: 14px; }
  .record-type { grid-column: 1; grid-row: 2; }
  .record-title { grid-column: 1; grid-row: 3; line-height: 1.7; overflow-wrap: anywhere; }
  .record-list a::after { grid-column: 2; grid-row: 1 / 4; }
  .people-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; }
  .person { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); border-radius: var(--radius); }
  .person-photo img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .person-body { min-width: 0; padding: 14px 16px; font-size: 15px; }
  .person h3 { font-size: 18px; }
  .person-note { display: block; }
  .person-note .person-body { padding: 20px; }
  .join { padding: 60px 0; }
  .join-inner { flex-direction: column; align-items: stretch; }
  .join-actions { flex-basis: auto; min-width: 0; padding: 20px; }
}
@media (max-width: 360px) {
  .paths ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .story { transition: none; }
  .story:hover { transform: none; }
}

/* Remove legacy decorative Japanese glyphs from translated statistics. */
.localized-home .stat-icon { display:none; }

/* Japanese home: a storybook opening built around the actual clay figures. */
body:lang(ja) .hero { padding:0; overflow:hidden; background:#f7eee0; }
body:lang(ja) .hero-inner { position:relative; display:block; width:100%; min-height:510px; }
body:lang(ja) .hero-photo { position:absolute; inset:0 0 0 38%; overflow:hidden; }
body:lang(ja) .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#f7eee0 0%,rgba(247,238,224,.92) 10%,rgba(247,238,224,.16) 48%,transparent 65%); pointer-events:none; }
body:lang(ja) .hero-photo img { width:100%; height:100%; aspect-ratio:auto; border-radius:0; object-fit:cover; object-position:55% 42%; }
body:lang(ja) .hero-photo figcaption { position:absolute; z-index:1; right:20px; bottom:10px; margin:0; padding:2px 9px; border-radius:4px; color:#fff; background:rgba(37,28,22,.72); font-size:12px; }
body:lang(ja) .hero-copy { position:relative; z-index:2; width:min(660px,56%); padding:48px 0 48px max(5vw,calc((100vw - 1320px)/2)); }
body:lang(ja) .hero h1 { margin:12px 0 18px; font-size:clamp(34px,3.6vw,55px); line-height:1.4; }
body:lang(ja) .hero .lead { max-width:31em; font-family:var(--serif); font-size:16px; line-height:1.9; }
body:lang(ja) .hero-action { min-width:200px; margin-top:6px; font-family:var(--serif); font-size:19px; }
body:lang(ja) .facts { gap:18px; margin-top:20px; }
body:lang(ja) .facts div { padding:3px 14px 3px 0; border-right:1px solid #cbbba5; border-radius:0; background:transparent; }
body:lang(ja) .facts div:last-child { border:0; }
body:lang(ja) .facts dd { margin:0; }
body:lang(ja) .facts strong { font-size:25px; }
body:lang(ja) .stories { padding:48px 0 42px; }
body:lang(ja) .stories .section-head { text-align:center; }
body:lang(ja) .stories .section-head h2 { margin:0 0 8px; }
body:lang(ja) .stories .section-lead { max-width:48em; margin-inline:auto; }
body:lang(ja) .story-grid { gap:18px; margin-top:28px; }
body:lang(ja) .story { display:grid; grid-template-columns:43% 1fr; min-height:176px; background:#f2e9d9; }
body:lang(ja) .story img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0; }
body:lang(ja) .story-body { padding:16px; }
body:lang(ja) .story-title { font-size:clamp(19px,1.8vw,25px); }
body:lang(ja) .story-more { color:var(--shu); }
body:lang(ja) .paths { padding:0 0 42px; }
body:lang(ja) .places { background:#ecebdc; }
body:lang(ja) .section-label,body:lang(ja) .eyebrow { color:var(--shu); }
@media(max-width:1100px) {
 body:lang(ja) .hero-inner { min-height:500px; }
 body:lang(ja) .hero-copy { width:62%; padding-left:var(--gutter); }
 body:lang(ja) .story-grid { grid-template-columns:1fr; }
 body:lang(ja) .story { min-height:160px; }
}
@media(max-width:700px) {
 body:lang(ja) .hero-inner { display:flex; flex-direction:column; min-height:0; }
 body:lang(ja) .hero-photo { position:relative; inset:auto; order:0; height:250px; }
 body:lang(ja) .hero-photo::after { background:linear-gradient(0deg,#f7eee0,transparent 35%); }
 body:lang(ja) .hero-photo img { max-height:none; object-fit:cover; object-position:55% 35%; }
 body:lang(ja) .hero-copy { order:1; width:100%; padding:10px var(--gutter) 32px; }
 body:lang(ja) .hero h1 { font-size:clamp(29px,7.5vw,38px); }
 body:lang(ja) .hero .lead { font-size:15px; }
 body:lang(ja) .hero-action { width:100%; }
 body:lang(ja) .stories { padding:44px 0 32px; }
 body:lang(ja) .story-grid { grid-template-columns:1fr; }
 body:lang(ja) .story { grid-template-columns:38% 1fr; min-height:150px; }
 body:lang(ja) .story img { max-height:none; }
 body:lang(ja) .paths { padding-bottom:36px; }
}