/* Watercolor treatment shared by the home page and its design reference. */
body.watercolor-home {
  --study-paper: #f0f5f7;
  --study-ink: #173454;
  background: #edf3f6;
}

body.watercolor-home .hero {
  background: #14294f url('/graphics/watercolor-grain.svg') repeat;
}
body.watercolor-home .hero-shade {
  background:
    radial-gradient(ellipse 42% 38% at 80% 35%, rgba(99, 147, 184, .18), transparent 78%),
    radial-gradient(ellipse 54% 60% at 2% 100%, rgba(69, 120, 165, .21), transparent 76%),
    linear-gradient(90deg, rgba(20, 41, 79, .96) 0%, rgba(20, 41, 79, .82) 34%, rgba(20, 41, 79, .27) 72%, rgba(20, 41, 79, .13) 100%);
}
body.watercolor-home .hero h1 em {
  color: #d8e6f3;
}

body.watercolor-home .current-note {
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 34% 45% at 9% 19%, rgba(121, 164, 195, .24), transparent 80%),
    radial-gradient(ellipse 42% 65% at 93% 98%, rgba(152, 186, 208, .17), transparent 79%),
    #eef3f5;
}
body.watercolor-home .current-note-heading h2::after {
  content: '';
  display: block;
  width: min(100%, 270px);
  height: 43px;
  margin-top: 7px;
  background: url('/graphics/current-crest-long-2026.webp') left center / contain no-repeat;
  opacity: .78;
}
body.watercolor-home .current-note-sheet {
  padding: 26px clamp(28px, 3vw, 46px) 34px;
  border: 1px solid rgba(89, 129, 158, .35);
  border-radius: 3px 58px 3px 27px;
  background: rgba(248, 250, 249, .7);
  box-shadow: 0 18px 42px rgba(35, 72, 109, .06);
}
body.watercolor-home .highlights {
  background: #e5edf2 url('/graphics/watercolor-grain.svg') repeat;
}

body.watercolor-home .intro,
body.watercolor-home .lexicon,
body.watercolor-home .events,
body.watercolor-home .archive {
  isolation: isolate;
}
body.watercolor-home .intro {
  position: relative;
  overflow: hidden;
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 37% 42% at 98% 19%, rgba(123, 171, 205, .22), transparent 82%),
    radial-gradient(ellipse 44% 50% at 8% 92%, rgba(128, 178, 209, .16), transparent 83%),
    #f0f5f7;
}
body.watercolor-home .intro::before {
  content: '';
  position: absolute;
  width: min(51vw, 690px);
  height: 520px;
  top: 19%;
  right: -7%;
  background: url('/graphics/blue-current-wash-2026.webp') center / contain no-repeat;
  opacity: .16;
  transform: rotate(-9deg);
  pointer-events: none;
}
body.watercolor-home .intro-wave-flow {
  width: min(100%, 690px);
  margin-top: 18px;
}
body.watercolor-home .intro-copy {
  border-left: 1px solid rgba(71, 111, 148, .34);
  padding-left: clamp(22px, 3vw, 40px);
}
body.watercolor-home .intro-scholar { z-index: 2; }

body.watercolor-home .lexicon {
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 32% 36% at 4% 31%, rgba(149, 184, 211, .26), transparent 83%),
    radial-gradient(ellipse 34% 38% at 97% 86%, rgba(118, 165, 197, .2), transparent 85%),
    #e6f0f5;
}
body.watercolor-home .lexicon-intro {
  border-bottom: 0;
}
body.watercolor-home .lexicon-chapter {
  position: relative;
  border-top: 0;
}
body.watercolor-home .lexicon-chapter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(57, 104, 145, .73), rgba(101, 146, 180, .34) 55%, transparent);
  clip-path: polygon(0 0, 100% 27%, 100% 45%, 0 100%);
}
body.watercolor-home .lexicon-chapter-heading::before {
  content: '';
  position: absolute;
  inset: -14px 6% 1% -15px;
  border-radius: 31% 66% 37% 57% / 40% 35% 64% 61%;
  background: radial-gradient(ellipse at 32% 50%, rgba(175, 205, 224, .47), rgba(205, 226, 237, .19) 55%, transparent 76%);
  transform: rotate(-3deg);
  pointer-events: none;
}
body.watercolor-home .lexicon-chapter-autumn .lexicon-chapter-heading::before {
  background: radial-gradient(ellipse at 32% 50%, rgba(191, 181, 163, .21), rgba(205, 226, 237, .2) 55%, transparent 76%);
}
body.watercolor-home .lexicon-chapter-heading img {
  filter: saturate(.87) drop-shadow(0 10px 16px rgba(35, 76, 112, .08));
}
body.watercolor-home .lexicon-entry,
body.watercolor-home .lexicon-entry:first-child { border-color: rgba(86, 130, 163, .38); }

body.watercolor-home .events {
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 37% 24% at 89% 9%, rgba(123, 165, 195, .16), transparent 84%),
    #eef3f5;
}
body.watercolor-home .year-story-masthead-top,
body.watercolor-home .year-story-spring-copy,
body.watercolor-home .year-story-winter-content {
  border-color: rgba(80, 121, 152, .47);
}
body.watercolor-home .year-story-spring-art,
body.watercolor-home .year-story-winter-picture {
  background: transparent;
  border-radius: 50% 4px 8px 3px / 29% 4px 8px 3px;
}
body.watercolor-home .year-story-spring-art img,
body.watercolor-home .year-story-winter-picture img {
  -webkit-mask-image: radial-gradient(ellipse 115% 115% at 50% 45%, #000 70%, rgba(0, 0, 0, .84) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 115% 115% at 50% 45%, #000 70%, rgba(0, 0, 0, .84) 82%, transparent 100%);
  filter: saturate(.88) contrast(1.02);
}
body.watercolor-home .year-story-autumn {
  border-radius: 4px 78px 4px 34px;
  background: #14294f url('/graphics/watercolor-grain.svg') repeat;
}
body.watercolor-home .year-story-autumn-art img { filter: saturate(.83); }
body.watercolor-home .year-story-autumn-art::after {
  background: linear-gradient(90deg, #142b4c 0%, rgba(20, 43, 76, .85) 19%, rgba(20, 43, 76, .06) 73%);
}
body.watercolor-home .year-story-interlude::before,
body.watercolor-home .year-story-interlude::after {
  background: linear-gradient(90deg, transparent, #7d9fba, transparent);
}

body.watercolor-home .archive {
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 36% 34% at 6% 5%, rgba(149, 186, 213, .25), transparent 85%),
    radial-gradient(ellipse 38% 39% at 97% 72%, rgba(140, 179, 206, .2), transparent 83%),
    #eaf2f6;
}
body.watercolor-home .people-index {
  overflow: hidden;
  border-top: 0;
  border-radius: 5px 76px 5px 52px;
  background: rgba(249, 251, 250, .75);
  box-shadow: inset 0 0 0 1px rgba(78, 120, 152, .25), 0 16px 38px rgba(41, 82, 116, .06);
}
body.watercolor-home .people-index-intro {
  background: radial-gradient(ellipse 90% 95% at 12% 18%, rgba(181, 208, 225, .36), transparent 80%);
}
body.watercolor-home .chuseok-story {
  border-top: 0;
  border-radius: 76px 5px 54px 5px;
  background:
    url('/graphics/watercolor-grain.svg') repeat,
    radial-gradient(ellipse 58% 67% at 95% 35%, rgba(151, 189, 213, .43), transparent 80%),
    #dce9f1;
  box-shadow: inset 0 0 0 1px rgba(78, 120, 152, .22);
}
body.watercolor-home .archive-photo-feature {
  border: 0;
  border-radius: 5px 55px 5px 31px;
  background: rgba(231, 242, 247, .85);
  box-shadow: inset 0 0 0 1px rgba(78, 120, 152, .25);
}
body.watercolor-home .archive-photo-feature-image img {
  -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
}
body.watercolor-home .archive-links a:hover {
  background: rgba(247, 250, 250, .52);
}

@media (max-width: 900px) {
  body.watercolor-home .intro::before { width: 85vw; right: -34%; opacity: .12; }
}
@media (max-width: 680px) {
  body.watercolor-home .current-note-sheet { padding: 22px 22px 26px; border-radius: 3px 32px 3px 20px; }
  body.watercolor-home .intro-copy { border-left: 0; padding-left: 0; }
  body.watercolor-home .lexicon-chapter-heading::before { inset: -10px -3% 8% -10px; }
  body.watercolor-home .year-story-spring-art,
  body.watercolor-home .year-story-winter-picture { border-radius: 35% 4px 5px 3px / 18% 4px 5px 3px; }
  body.watercolor-home .year-story-autumn { border-radius: 3px 42px 3px 25px; }
  body.watercolor-home .people-index { border-radius: 4px 39px 4px 28px; }
  body.watercolor-home .chuseok-story { border-radius: 39px 4px 31px 4px; }
  body.watercolor-home .archive-photo-feature { border-radius: 4px 34px 4px 24px; }
  body.watercolor-home .archive-photo-feature-image img {
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.watercolor-home .year-story-art-link img { transition: none; }
}