/* Reading pages extend the existing site typography and colors. */
.reading-page {
  background:#faf9f5
}
.reading-intro {
  padding:76px 0 40px
}
.reading-intro h1,.story-header h1 {
  font-family:var(--site-font);
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.6
}
.reading-intro h1 {
  font-size:clamp(34px,5vw,56px);
  margin:14px 0
}
.reading-intro p,.story-header>p {
  line-height:2.2;
  color:#486071
}
.reading-series {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px
}
.reading-series a {
  border:1px solid var(--line);
  border-radius:30px;
  text-decoration:none;
  padding:8px 24px;
  font-size:14px
}
.reading-series a:hover {
  background:var(--deep);
  color:white
}
.reading-section {
  padding:36px 0 64px;
  scroll-margin-top:24px
}
.reading-heading {
  margin-bottom:26px
}
.reading-heading h2 {
  font-family:var(--site-font);
  font-size:clamp(23px,3vw,30px);
  line-height:1.6;
  margin:10px 0
}
.reading-label {
  font-size:13px;
  letter-spacing:.12em;
  color:#476678
}
.reading-card {
  background:#fff;
  border:1px solid #e1e5e5;
  overflow:hidden;
  border-radius:5px
}
.reading-card>a {
  display:block;
  text-decoration:none;
  height:100%
}
.reading-card img {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  display:block
}
.reading-card-copy {
  padding:28px
}
.reading-card h3 {
  font-family:var(--site-font);
  font-size:24px;
  line-height:1.65;
  margin:12px 0
}
.reading-card p {
  font-size:15px
}
.reading-more {
  display:inline-block;
  color:#176381;
  border-bottom:1px solid #a7c6ce;
  font-size:14px;
  margin-top:12px
}
.reading-card:hover {
  border-color:#739aa8
}
.featured-story>a {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  align-items:center
}
.featured-story img {
  height:100%;
  aspect-ratio:4/3
}
.featured-story h3 {
  font-size:clamp(25px,3vw,34px)
}
.reading-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.reading-visit {
  background:#eaf0ef;
  padding:40px;
  border-radius:5px;
  margin:20px auto 72px
}
.reading-visit h2 {
  font-family:var(--site-font);
  font-size:26px
}
.reading-visit p {
  font-size:15px
}
.reading-visit-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px 30px
}
.story-header {
  max-width:780px;
  padding:52px 0 24px
}
.story-header h1 {
  font-size:clamp(32px,5vw,52px);
  margin:18px 0
}
.story-header > .story-byline {
  margin:0 0 12px;
  font-size:14px;
  font-weight:600
}
.story-illustration {
  width:min(780px,calc(100% - 40px));
  margin:12px auto 44px
}
.story-illustration img {
  display:block;
  width:100%;
  height:auto;
  border-radius:5px
}
.story-illustration figcaption {
  font-size:12px;
  color:#546977;
  margin-top:10px
}
.story-body {
  width:min(680px,calc(100% - 40px));
  margin:0 auto 72px;
  font-size:17px;
  line-height:2.3
}
.story-lead {
  font-size:18px
}
.story-body section {
  margin-top:64px;
  scroll-margin-top:30px
}
.story-body h2 {
  font-family:var(--site-font);
  font-size:26px;
  line-height:1.65;
  margin-bottom:28px
}
.story-body p {
  margin:0 0 26px
}
.story-contents {
  border-block:1px solid var(--line);
  padding:24px 0;
  margin:36px 0;
  display:grid;
  gap:8px;
  font-size:14px
}
.story-contents span {
  font-weight:700
}
.story-body .story-memory {
  margin-top:32px
}
.story-author {
  padding:20px 0;
  border-block:1px solid var(--line);
  font-size:14px;
  line-height:1.9
}
.story-author h2 {
  font-family:inherit;
  font-size:16px;
  margin:0 0 8px
}
.story-author p {
  margin:0;
  overflow-wrap:anywhere
}
.story-source {
  margin-top:60px;
  background:#f0f1ed;
  padding:26px;
  font-size:13px;
  line-height:1.9
}
.story-source h2 {
  font-family:inherit;
  font-size:16px;
  margin:0 0 16px
}
.story-source p:last-child {
  margin-bottom:0
}
.story-back {
  margin-bottom:64px
}
.reading-page .nav {
  gap:19px;
  font-size:14px
}
.reading-page .brand {
  flex-shrink:0
}
a:focus-visible {
  outline:3px solid #168fba;
  outline-offset:5px
}
@media(max-width:760px) {
  .reading-intro {
  padding:44px 0 20px
}
.reading-section {
  padding:26px 0 40px
}
.featured-story>a,.reading-grid {
  grid-template-columns:1fr
}
.featured-story img {
  aspect-ratio:16/9
}
.reading-card-copy {
  padding:24px
}
.reading-visit {
  padding:26px;
  margin-bottom:48px
}
.story-header {
  padding-top:32px
}
.story-illustration {
  margin-bottom:36px
}
.story-body {
  font-size:16px;
  line-height:2.2
}
.story-body h2 {
  font-size:23px
}
.story-body section {
  margin-top:44px
}
.story-source {
  padding:20px
}

}


.featured-story + .featured-story { margin-top: 28px; }

/* Keep the complete three-scene illustration visible on the story card. */
.featured-story:has(img[src="/hitomokko-landscape-v2.png"]) > a { display: block; }
.featured-story img[src="/hitomokko-landscape-v2.png"] { height: auto; aspect-ratio: 3 / 1; }

.featured-story.wide-story > a { display: block; }
.featured-story.wide-story img { height: auto; aspect-ratio: 3 / 1; }

.story-photo { max-width:400px; margin:32px auto; }
.story-photo img { display:block; width:auto; max-width:100%; height:auto; max-height:420px; margin:auto; border-radius:5px; }
.story-photo figcaption { margin-top: 10px; font-size: 13px; color: #546977; }

.story-videos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:28px 0; }
.story-videos figure { min-width:0; margin:0; }
.story-videos video { display:block; width:100%; height:340px; object-fit:contain; background:var(--deep); border-radius:5px; }
.story-videos figcaption { margin-top:8px; color:#546977; font-size:13px; line-height:1.7; }
@media (max-width:560px) {
  .story-videos { grid-template-columns:1fr; max-width:360px; margin:24px auto; }
  .story-videos video { height:320px; }
  .story-photo img { max-height:360px; }
}

.reading-card-caption {
  margin:0;
  padding:0 24px 20px;
  font-size:12px;
  color:#546977;
}