@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --forest: #243a2b;
  --forest-deep: #1d3124;
  --ink: #26342b;
  --muted: #4d5c51;
  --quiet: #59695d;
  --canvas: #f1f3ec;
  --sage: #e2e9df;
  --sage-strong: #d4dfd2;
  --paper: #fbfaf4;
  --gold: #806026;
  --rule: #c8d3c6;
  --art-ground: #e6ebe2;
  --focus: #8a672a;
  font-family: 'DM Sans', Arial, sans-serif;
  background: var(--canvas);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: var(--forest);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 50;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-160%);
  background: var(--forest-deep);
  color: #fffdf4;
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

.topbar {
  min-height: 76px;
  padding: 0 clamp(1.25rem, 6vw, 5.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--canvas);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  color: var(--forest);
  text-decoration: none;
  font: 700 1.35rem/1 'Playfair Display', Georgia, serif;
}

.brand svg {
  width: 1.6rem;
  height: 1.6rem;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 1.25rem);
}

.topbar nav button,
.plain {
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--forest);
  font-weight: 600;
}

.topbar nav button:hover,
.plain:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.welcome {
  min-height: 610px;
  padding: 76px max(1.5rem, calc((100vw - 1180px) / 2)) 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  background: var(--sage);
}

.welcome-copy {
  max-width: 590px;
}

.hero-label,
.reader-label,
.section-label {
  margin: 0;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.welcome h1,
.reader h1,
.section-heading h2,
.about-panel h2,
#about-dialog h2 {
  color: var(--forest);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.welcome h1 {
  max-width: 19ch;
  margin: 1rem 0 1.25rem;
  font-size: clamp(2.45rem, 4.65vw, 4.25rem);
  line-height: 1.09;
}

.welcome h1 span,
.welcome h1 em {
  display: block;
}

.welcome h1 em {
  color: var(--gold);
  font-style: normal;
}

.intro {
  max-width: 48ch;
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.primary {
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  border: 0;
  background: var(--forest);
  color: #fffdf4;
  font-weight: 700;
}

.primary:hover {
  background: var(--forest-deep);
}

.note {
  max-width: 42ch;
  margin: 1rem 0 0;
  color: var(--quiet);
  font-size: 0.9rem;
}

.cover-stage {
  width: 100%;
  min-height: 420px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cover-stage img {
  width: min(100%, 350px);
  height: auto;
  filter: drop-shadow(14px 18px 10px rgb(27 45 32 / 15%));
  transform: rotate(1.5deg);
  transition: transform 280ms ease;
}

.cover-stage:hover img {
  transform: translateY(-4px) rotate(0deg);
}

.cover-hint {
  color: var(--forest);
  font-size: 0.9rem;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.reader {
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 4vw, 3.25rem) 4rem;
}

.reader-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.reader-label {
  margin-bottom: 0.25rem;
}

.reader h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.plain {
  white-space: nowrap;
}

.book-area {
  perspective: 1600px;
}

.book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 980px;
  min-height: 510px;
  margin: 0 auto 1.5rem;
  box-shadow: 0 18px 30px rgb(29 49 36 / 12%);
}

.book::before {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule);
  content: '';
}

.paper {
  position: relative;
  min-width: 0;
  min-height: 510px;
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  background: var(--paper);
}

.paper:first-child {
  padding-right: clamp(2rem, 4vw, 3.25rem);
}

.paper:nth-child(2) {
  padding-left: clamp(2rem, 4vw, 3.25rem);
}

.page-label {
  margin-bottom: 1rem;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
}

.reader-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
}

.reader-metadata-filter {
  min-height: 44px;
  max-width: 100%;
  padding: 0.25rem 0.2rem;
  border: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.22em;
  vertical-align: middle;
}

.reader-metadata-filter:hover,
.reader-metadata-filter:focus-visible,
.reader-metadata-filter[aria-pressed="true"] {
  text-decoration-style: solid;
}

.page-title {
  margin: 0 0 1rem;
  color: var(--forest);
  font: 500 clamp(1.65rem, 3vw, 2.4rem)/1.12 'Playfair Display', Georgia, serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page-meta {
  margin: 0 0 1.15rem;
  color: var(--quiet);
  font-size: 0.9rem;
}

.page-text {
  color: var(--ink);
  font: 1.05rem/1.82 'Playfair Display', Georgia, serif;
}

.page-text p {
  margin: 0 0 1rem;
}

.page-artwork {
  max-width: 340px;
  margin: 1.2rem auto 1.4rem;
}

.page-artwork img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  background: var(--art-ground);
}

.lesson {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--gold);
  background: var(--sage);
}

.lesson strong {
  color: var(--forest);
  font-size: 0.9rem;
}

.lesson p {
  margin: 0.25rem 0 0;
  color: var(--ink);
  font: italic 1rem/1.55 'Playfair Display', Georgia, serif;
}

.folio {
  position: absolute;
  bottom: 1rem;
  color: var(--quiet);
  font-size: 0.85rem;
}

.paper:first-child .folio {
  left: clamp(1.5rem, 3.4vw, 2.75rem);
}

.paper:nth-child(2) .folio {
  right: clamp(1.5rem, 3.4vw, 2.75rem);
}

#page-turn {
  position: absolute;
  z-index: 3;
  inset: 0 0 0 50%;
  border-left: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: -14px 0 22px rgb(29 49 36 / 8%);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
}

#page-turn.turning {
  opacity: 1;
  animation: page-flip 620ms ease-in-out;
}

@keyframes page-flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(-180deg); }
}

.contents-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.contents-list button {
  width: 100%;
  min-height: 56px;
  padding: 0.55rem 0.45rem;
  border: 0;
  background: transparent;
  color: var(--forest);
  text-align: left;
  font: 500 1rem/1.35 'Playfair Display', Georgia, serif;
}

.contents-list button:hover {
  background: var(--sage);
}

.contents-list small {
  display: block;
  margin-top: 0.12rem;
  color: var(--quiet);
  font: 0.84rem/1.4 'DM Sans', Arial, sans-serif;
}

.reader-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
}

.reader-nav {
  min-width: 126px;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--forest);
  background: transparent;
  color: var(--forest);
  font-weight: 700;
}

.reader-nav:hover:not(:disabled) {
  background: var(--forest);
  color: #fffdf4;
}

.reader-nav:disabled {
  border-color: var(--rule);
  color: var(--quiet);
  cursor: not-allowed;
}

#page-counter {
  color: var(--quiet);
  font-size: 0.9rem;
  text-align: center;
}

.keyboard-hint {
  margin: 0.85rem 0 0;
  color: var(--quiet);
  font-size: 0.9rem;
  text-align: center;
}

.collection {
  max-width: 1240px;
  margin: 0 auto;
  padding: 5.25rem clamp(1.25rem, 4vw, 3.25rem) 5.5rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.section-label {
  margin-bottom: 0.35rem;
}

.section-heading h2,
.about-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}

.story-count {
  min-width: 100px;
  padding: 0.4rem 0.8rem;
  background: var(--sage-strong);
  color: var(--forest-deep);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.section-intro {
  max-width: 65ch;
  margin: 1rem 0 2rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.active-filters {
  margin: -1.5rem 0 2rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--sage-strong);
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.active-filters[hidden] {
  display: none;
}

.active-filters p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

#clear-filters {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--forest);
  font-weight: 700;
}

#clear-filters:hover {
  border-color: var(--sage-strong);
  background: var(--sage);
}

.filter-field {
  display: grid;
  gap: 0.45rem;
}

.filter-field label {
  color: var(--forest);
  font-size: 0.9rem;
  font-weight: 700;
}

.search-control,
.region-field select {
  min-height: 50px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

.search-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.85rem;
}

.search-control:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.search-control svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  color: var(--forest);
}

.search-control input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.55rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.search-control input:focus-visible {
  outline: none;
}

.search-control input::placeholder {
  color: var(--quiet);
  opacity: 1;
}

.region-field select {
  width: 100%;
  padding: 0.6rem 0.8rem;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.25rem 2.75rem;
}

.story-card {
  min-width: 0;
  min-height: 190px;
  padding: 0.75rem 0 1.25rem 1.1rem;
  border-left: 3px solid var(--sage-strong);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.story-card:hover,
.story-card:focus-within {
  border-left-color: var(--gold);
}

.story-card--illustrated {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 1rem;
}

.story-art {
  min-width: 0;
  margin: 0;
}

.story-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--art-ground);
}

.story-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.25rem;
  margin-bottom: 0.15rem;
}

.metadata-filter {
  min-height: 44px;
  padding: 0.3rem 0.35rem;
  border: 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--forest);
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: color 180ms ease, background-color 180ms ease, text-decoration-color 180ms ease;
}

.metadata-filter:hover,
.metadata-filter[aria-pressed="true"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.story-region {
  margin: 0;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
}

.story-country {
  color: var(--quiet);
  font-size: 0.85rem;
  font-weight: 600;
}

.story-copy h3 {
  margin: 0.1rem 0 0.55rem;
  color: var(--forest);
  font: 500 clamp(1.35rem, 2.2vw, 1.7rem)/1.2 'Playfair Display', Georgia, serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.story-summary {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.card-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
}

.metadata-filter--theme {
  padding: 0.25rem 0.55rem;
  background: var(--sage);
  color: var(--forest-deep);
  font-size: 0.85rem;
  font-weight: 600;
}

.metadata-filter--theme:hover,
.metadata-filter--theme[aria-pressed="true"] {
  background: var(--sage-strong);
}

.read-link {
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--forest);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
}

.read-link:hover {
  text-decoration-color: currentColor;
}

.empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.25rem 0;
  color: var(--muted);
  font-size: 1rem;
}

.about-panel {
  padding: 4rem max(1.5rem, calc((100vw - 1180px) / 2));
  background: var(--sage);
}

.about-copy {
  max-width: 780px;
}

.about-panel h2 {
  margin-bottom: 0.8rem;
}

.about-panel p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.site-footer {
  min-height: 92px;
  padding: 1.25rem clamp(1.25rem, 6vw, 5.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  background: var(--forest);
  color: #f2f3ec;
}

.footer-brand {
  color: #f2f3ec;
  font: 600 1.15rem/1.2 'Playfair Display', Georgia, serif;
  text-decoration: none;
}

.site-footer p {
  margin: 0;
  color: #f2f3ec;
  font-size: 0.9rem;
}

dialog {
  width: min(520px, calc(100vw - 2rem));
  max-height: min(84vh, 680px);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 55px rgb(29 49 36 / 24%);
}

dialog::backdrop {
  background: rgb(29 49 36 / 62%);
}

#about-dialog h2 {
  max-width: 16ch;
  margin: 0 2rem 1rem 0;
  font-size: 2rem;
  line-height: 1.15;
}

#about-dialog p:not(.section-label) {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.dialog-close {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--forest);
  font-size: 1.7rem;
}

@media (max-width: 900px) {
  .welcome {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr);
    gap: 1.5rem;
  }

  .cover-stage {
    min-height: 350px;
  }

  .cover-stage img {
    width: min(100%, 300px);
  }

  .story-grid {
    gap: 1.25rem 1.75rem;
  }

  .story-card--illustrated {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: 0.85rem;
  }
}

@media (max-width: 700px) {
  .welcome {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  .welcome-copy {
    max-width: 620px;
  }

  .welcome h1 {
    max-width: 19ch;
    font-size: clamp(2.45rem, 8vw, 3.65rem);
  }

  .cover-stage {
    min-height: 0;
  }

  .cover-stage img {
    width: min(74vw, 285px);
  }

  .reader {
    padding-top: 2.25rem;
  }

  .book {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .book::before {
    display: none;
  }

  .paper,
  .paper:first-child,
  .paper:nth-child(2) {
    min-height: 0;
    padding: 1.5rem 1.5rem 3rem;
  }

  .paper + .paper {
    border-top: 1px solid var(--rule);
  }

  .contents-list {
    grid-template-columns: 1fr;
  }

  .contents-list button {
    min-height: 52px;
  }

  #page-turn {
    display: none;
  }

  .collection {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .story-card {
    min-height: 0;
    padding-top: 0.5rem;
  }

  .story-card--illustrated {
    grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1.45fr);
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }
}

@media (max-width: 480px) {
  .topbar {
    min-height: 68px;
    padding-inline: 1rem;
  }

  .brand {
    font-size: 1.2rem;
  }

  .topbar nav {
    gap: 0.15rem;
  }

  .topbar nav button {
    padding-inline: 0.55rem;
    font-size: 0.95rem;
  }

  .welcome {
    padding-inline: 1.2rem;
  }

  .welcome h1 {
    font-size: clamp(2.35rem, 10vw, 2.8rem);
  }

  .reader {
    padding-inline: 1rem;
  }

  .reader-heading {
    align-items: flex-start;
  }

  .reader-controls {
    gap: 0.5rem;
  }

  .reader-nav {
    min-width: 0;
    flex: 1;
    padding-inline: 0.6rem;
  }

  #page-counter {
    max-width: 7rem;
    font-size: 0.82rem;
  }

  .collection {
    padding-inline: 1.2rem;
  }

  .story-card--illustrated {
    grid-template-columns: 1fr;
  }

  .story-art img {
    height: 190px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: 1.2rem;
  }

  .about-panel {
    padding: 3rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* TaleAtlas editorial redesign */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
  --forest:#293b2e; --forest-deep:#1f3025; --ink:#302f28; --muted:#716b5e;
  --quiet:#817a6d; --canvas:#f5f0e5; --sage:#e9e4d7; --sage-strong:#d9d0bd;
  --paper:#fffdf7; --gold:#a45e3d; --rule:#d8cdb9; --art-ground:#eee5d4; --focus:#a45e3d;
}
body { background:var(--canvas); color:var(--ink); }
.topbar { min-height:84px; max-width:1440px; margin:auto; padding:0 clamp(1.25rem,6vw,6rem); border-bottom:1px solid var(--rule); background:var(--canvas); }
.brand { font-size:1.55rem; letter-spacing:-.04em; }
.brand svg { display:none; }
.brand::before { content:"✳"; color:var(--gold); font:1rem Georgia,serif; margin-right:.2rem; }
.topbar nav { gap:clamp(.7rem,2.4vw,2rem); }
.topbar nav a,.topbar nav button { color:var(--forest); text-decoration:none; font-size:.9rem; font-weight:600; letter-spacing:.015em; }
.topbar nav a:hover,.topbar nav button:hover { color:var(--gold); text-decoration:underline; text-underline-offset:.35em; }
.topbar nav .nav-search { border:1px solid var(--rule); padding:.55rem .9rem; min-height:40px; }
.welcome { position:relative; overflow:hidden; min-height:610px; max-width:1440px; margin:auto; padding:clamp(4rem,8vw,7.2rem) clamp(1.5rem,8vw,7.5rem); grid-template-columns:minmax(0,1fr) minmax(18rem,.9fr); gap:clamp(2rem,6vw,6rem); background:var(--canvas); }
.welcome::before { content:""; position:absolute; width:480px; height:480px; border:1px solid #d9cbb4; border-radius:50%; right:8%; top:8%; opacity:.55; pointer-events:none; }
.welcome::after { content:""; position:absolute; width:390px; height:390px; border:1px solid #d9cbb4; border-radius:50%; right:11%; top:13%; opacity:.45; pointer-events:none; }
.welcome-copy { position:relative; z-index:1; max-width:620px; }
.hero-label,.section-label,.reader-label { color:var(--gold); font-size:.72rem; letter-spacing:.17em; font-weight:700; }
.ornament { display:inline-block; margin-right:.55rem; font-size:.9rem; }
.welcome h1 { max-width:12ch; margin:1.35rem 0 1.45rem; font-size:clamp(3.25rem,6.4vw,6.2rem); line-height:.99; letter-spacing:-.055em; }
.welcome h1 span,.welcome h1 em { display:block; }
.welcome h1 em { color:var(--gold); font-style:italic; }
.intro { max-width:43ch; color:#655f54; font-size:1.08rem; line-height:1.85; }
.primary { min-height:50px; padding:.9rem 1.4rem; background:var(--forest); border-radius:2px; letter-spacing:.02em; font-size:.9rem; }
.primary:hover { background:var(--gold); }
.note { margin-top:1.2rem; color:var(--quiet); font-size:.8rem; letter-spacing:.025em; }
.cover-stage { position:relative; z-index:1; min-height:430px; }
.cover-stage img { width:min(100%,390px); filter:drop-shadow(12px 18px 15px rgb(60 45 28 / 18%)); transform:rotate(1deg); }
.cover-hint { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.regions-section { max-width:1440px; margin:auto; padding:4.8rem clamp(1.5rem,8vw,7.5rem) 5rem; background:#eee8da; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.regions-heading { text-align:center; margin:0 auto 2.6rem; }
.regions-heading h2 { margin:.55rem 0 .45rem; color:var(--forest); font:500 clamp(2rem,3.5vw,3rem)/1.12 'Playfair Display',Georgia,serif; letter-spacing:-.04em; }
.regions-heading p:last-child { margin:0; color:var(--muted); font-size:.92rem; }
.region-index { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid #cfc2ad; border-bottom:1px solid #cfc2ad; }
.region-index button { min-height:120px; padding:1.1rem .9rem; border:0; border-right:1px solid #cfc2ad; background:transparent; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; transition:background .2s ease; }
.region-index button:last-child { border-right:0; }
.region-index button:hover,.region-index button:focus-visible { background:#e3dac9; }
.region-number { color:var(--gold); font-size:.68rem; letter-spacing:.12em; }
.region-name { color:var(--forest); font:500 clamp(1rem,1.7vw,1.4rem)/1.2 'Playfair Display',Georgia,serif; }
.region-arrow { align-self:flex-end; color:var(--gold); font-size:1.1rem; }
.collection { max-width:1440px; padding:6rem clamp(1.5rem,8vw,7.5rem) 6rem; }
.section-heading h2,.about-panel h2 { font-size:clamp(2.3rem,4vw,3.6rem); letter-spacing:-.045em; }
.story-count { padding:.35rem 0; background:transparent; color:var(--gold); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.section-intro { max-width:55ch; margin:1rem 0 2.2rem; color:var(--muted); }
.filters { grid-template-columns:minmax(0,1fr) minmax(220px,.36fr); gap:1.2rem; margin-bottom:2.6rem; }
.filter-field label { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.search-control,.region-field select { min-height:54px; border:1px solid #d5c9b5; background:var(--paper); border-radius:0; }
.search-control input { min-height:52px; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2rem 1.6rem; }
.story-card { min-width:0; padding:0 0 1.25rem; border:0; border-bottom:1px solid var(--rule); background:transparent; box-shadow:none; display:flex; flex-direction:column; }
.story-art { height:220px; margin:0 0 1.1rem; overflow:hidden; background:#e8dfce; }
.story-art img { width:100%; height:100%; max-height:none; object-fit:cover; transition:transform .5s ease; }
.story-card:hover .story-art img { transform:scale(1.035); }
.story-card:not(.story-card--illustrated)::before { content:"TALEATLAS  /  A STORY FROM THE COLLECTION"; min-height:220px; padding:1.5rem; margin-bottom:1.1rem; display:flex; align-items:center; justify-content:center; text-align:center; color:#8b6b4c; background:linear-gradient(135deg,#e8dfce,#eee7d9); font:italic 1rem 'Playfair Display',Georgia,serif; letter-spacing:.07em; }
.story-copy { padding:0 .1rem; display:flex; flex:1; flex-direction:column; }
.story-tags { gap:.25rem .8rem; }
.story-region,.story-country,.metadata-filter--theme { padding:0; color:var(--gold); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; }
.story-copy h3 { margin:.7rem 0 .5rem; color:var(--forest); font:500 1.55rem/1.16 'Playfair Display',Georgia,serif; letter-spacing:-.025em; }
.story-summary { color:#6b655a; font-size:.88rem; line-height:1.7; }
.card-bottom { margin-top:auto; padding-top:1rem; border-top:1px solid #e0d7c8; }
.read-link { color:var(--forest); font-size:.82rem; font-weight:700; letter-spacing:.03em; }
.read-link::after { color:var(--gold); }
.about-panel { max-width:1440px; margin:auto; padding:5.5rem clamp(1.5rem,8vw,7.5rem); background:#e9e2d4; border-top:1px solid var(--rule); }
.about-copy { max-width:760px; margin:auto; text-align:center; }
.about-panel h2 { margin:.55rem 0 1rem; }
.about-panel p:last-child { max-width:68ch; margin:0 auto; color:#625c51; line-height:1.85; }
.site-footer { max-width:1440px; margin:auto; padding:2rem clamp(1.5rem,8vw,7.5rem); border-top:1px solid var(--rule); background:var(--canvas); }
.footer-brand { color:var(--forest); font:500 1.3rem 'Playfair Display',Georgia,serif; }
.site-footer p { color:var(--quiet); font-size:.8rem; }
.reader { max-width:1280px; }
.book { background:var(--paper); box-shadow:0 18px 38px rgb(54 42 27 / 10%); }
.paper { background:var(--paper); }
.page-title { color:var(--forest); }
.lesson { background:#f0eadf; border-color:var(--gold); }
#about-dialog { border:1px solid var(--rule); border-radius:0; background:var(--paper); color:var(--ink); box-shadow:0 25px 80px rgb(30 25 18 / 25%); }
#about-dialog::backdrop { background:rgb(35 39 31 / 55%); }
@media (max-width:850px) {
 .welcome { min-height:auto; grid-template-columns:1fr .8fr; gap:1.2rem; padding-top:4rem; padding-bottom:4rem; }
 .welcome h1 { font-size:clamp(2.8rem,6vw,4.3rem); }
 .region-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .region-index button:nth-child(3) { border-right:0; }
 .region-index button:nth-child(n+4) { border-top:1px solid #cfc2ad; }
 .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 .topbar { min-height:70px; padding:0 1.1rem; }
 .brand { font-size:1.3rem; }
 .topbar nav { gap:.25rem; }
 .topbar nav a,.topbar nav button { padding:.5rem .45rem; font-size:.78rem; }
 .topbar nav .nav-search { display:none; }
 .welcome { grid-template-columns:1fr; padding:3.4rem 1.35rem 2.8rem; gap:1.4rem; }
 .welcome::before { width:290px; height:290px; right:-12%; top:38%; }
 .welcome::after { width:240px; height:240px; right:-5%; top:42%; }
 .welcome h1 { max-width:11ch; font-size:clamp(3.2rem,13vw,4.5rem); }
 .intro { font-size:1rem; }
 .cover-stage { min-height:0; }
 .cover-stage img { width:min(70%,260px); }
 .regions-section { padding:3.5rem 1.3rem; }
 .region-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .region-index button { min-height:95px; border-top:1px solid #cfc2ad; }
 .region-index button:nth-child(odd) { border-right:1px solid #cfc2ad; }
 .region-index button:nth-child(even) { border-right:0; }
 .region-index button:last-child { grid-column:1/-1; border-right:0; }
 .collection { padding:4rem 1.3rem; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:.5rem; }
 .filters { grid-template-columns:1fr; gap:.9rem; }
 .story-grid { grid-template-columns:1fr; gap:1.8rem; }
 .story-art,.story-card:not(.story-card--illustrated)::before { height:220px; min-height:220px; }
 .about-panel { padding:4rem 1.3rem; }
}
@media (prefers-reduced-motion:reduce) {
 .cover-stage img,.story-art img { transition:none; }
 .story-card:hover .story-art img { transform:none; }
}


/* Editorial folktale atlas — full composition */
:root {
 --canvas:#f5f0e5; --paper:#fffaf0; --sage:#eee7d9; --sage-strong:#e1d6c3;
 --forest:#263d30; --forest-deep:#1c3025; --ink:#302d26; --muted:#665e51;
 --quiet:#817767; --gold:#a35e42; --rule:#d8cbb7; --art-ground:#eee3d1;
}
body { background:var(--canvas); color:var(--ink); }
.topbar { min-height:82px; max-width:none; padding:0 max(1.5rem,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--rule); background:var(--canvas); }
.brand { font-size:1.55rem; letter-spacing:-.045em; }
.brand svg { display:none; }
.brand::before { content:"✳"; color:var(--gold); font:1rem Georgia,serif; margin-right:.25rem; }
.topbar nav { gap:clamp(.5rem,2vw,1.7rem); }
.topbar nav a,.topbar nav button { color:var(--forest); text-decoration:none; font-size:.87rem; font-weight:600; }
.topbar nav a:hover,.topbar nav button:hover { color:var(--gold); text-decoration:underline; text-underline-offset:.35em; }
.topbar nav .nav-search { border:1px solid var(--rule); padding:.5rem .9rem; min-height:40px; }
.welcome { position:relative; overflow:hidden; min-height:640px; max-width:none; padding:5.5rem max(1.5rem,calc((100vw - 1180px)/2)) 5rem; grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr); gap:clamp(2.5rem,6vw,6rem); background:var(--canvas); }
.welcome::before { content:""; position:absolute; width:570px; height:570px; border:1px solid #d9cbb7; border-radius:50%; right:5%; top:3%; opacity:.65; pointer-events:none; }
.welcome::after { content:""; position:absolute; width:460px; height:460px; border:1px solid #d9cbb7; border-radius:50%; right:9%; top:10%; opacity:.45; pointer-events:none; }
.welcome-copy { position:relative; z-index:1; max-width:620px; }
.hero-label,.section-label,.reader-label { color:var(--gold); font-size:.7rem; letter-spacing:.16em; font-weight:700; }
.ornament { margin-right:.55rem; }
.welcome h1 { max-width:12ch; margin:1.4rem 0 1.35rem; font-size:clamp(3.4rem,6.1vw,6rem); line-height:.98; letter-spacing:-.06em; }
.welcome h1 em { color:var(--gold); font-style:italic; }
.intro { max-width:43ch; color:#625c51; font-size:1.04rem; line-height:1.85; }
.primary { min-height:50px; padding:.85rem 1.4rem; background:var(--forest); border-radius:1px; letter-spacing:.02em; font-size:.88rem; }
.primary:hover { background:var(--gold); }
.note { margin-top:1.1rem; color:var(--quiet); font-size:.78rem; letter-spacing:.02em; }
.hero-art { position:relative; z-index:1; width:100%; max-width:550px; justify-self:center; }
.hero-art img { width:100%; height:auto; filter:drop-shadow(0 15px 16px rgb(64 49 31 / 12%)); }
.art-caption { display:block; margin-top:-.3rem; color:var(--quiet); font-size:.7rem; letter-spacing:.11em; text-align:center; text-transform:uppercase; }
.featured-story { position:relative; max-width:1180px; min-height:380px; margin:0 auto; padding:4.8rem 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,6vw,5.5rem); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.featured-art { position:relative; min-height:300px; background:#e8ddca; overflow:hidden; }
.featured-art img { width:100%; height:100%; min-height:300px; max-height:390px; object-fit:cover; }
.image-folio { position:absolute; left:1rem; bottom:1rem; padding:.4rem .65rem; background:var(--paper); color:var(--gold); font-size:.62rem; letter-spacing:.13em; }
.featured-copy { max-width:490px; padding:1rem 2rem 1rem 0; }
.feature-kicker { margin:1.5rem 0 .55rem; color:var(--quiet); font-size:.68rem; letter-spacing:.13em; font-weight:700; }
.featured-copy h2 { margin:.3rem 0 1rem; color:var(--forest); font:500 clamp(2.5rem,4.4vw,4.1rem)/1.05 'Playfair Display',Georgia,serif; letter-spacing:-.045em; }
.featured-copy>p:not(.section-label):not(.feature-kicker) { max-width:43ch; color:var(--muted); line-height:1.85; }
.feature-link { margin-top:1.1rem; padding:.7rem 0; border:0; border-bottom:1px solid var(--gold); background:none; color:var(--forest); font-weight:700; }
.feature-link span { padding-left:1rem; color:var(--gold); }
.feature-side-note { position:absolute; right:-3.4rem; top:50%; color:#a79b87; font-size:.6rem; letter-spacing:.2em; writing-mode:vertical-rl; transform:translateY(-50%); }
.regions-section { max-width:none; padding:5rem max(1.5rem,calc((100vw - 1180px)/2)) 5.5rem; background:#eee7d9; border-top:0; border-bottom:1px solid var(--rule); }
.regions-heading { text-align:left; max-width:1180px; margin:0 auto 2.3rem; }
.regions-heading h2 { margin:.55rem 0 .5rem; color:var(--forest); font:500 clamp(2.4rem,4vw,3.6rem)/1.1 'Playfair Display',Georgia,serif; letter-spacing:-.045em; }
.regions-heading p:last-child { color:var(--muted); font-size:.92rem; }
.region-index { max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.region-card { min-width:0; padding:0; border:1px solid #cdbda4; background:#f7f0e2; text-align:left; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.region-card:hover { transform:translateY(-5px); box-shadow:0 12px 22px rgb(63 48 28 / 12%); }
.region-card-art { display:block; height:130px; overflow:hidden; background:#e8ddca; }
.region-card-art img { width:100%; height:100%; object-fit:cover; }
.region-card-meta { min-height:65px; padding:.65rem .75rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; }
.region-number { color:var(--gold); font-size:.63rem; letter-spacing:.12em; }
.region-name { color:var(--forest); font:500 clamp(.9rem,1.35vw,1.18rem)/1.2 'Playfair Display',Georgia,serif; }
.region-arrow { color:var(--gold); font-size:1.05rem; }
.hero-art--collage { max-width:560px; display:grid; grid-template-columns:1fr .48fr; grid-template-rows:1fr auto; align-items:center; gap:12px; }
.hero-art--collage .hero-main-art { width:100%; aspect-ratio:1.15; object-fit:cover; border:8px solid #fff9ed; box-shadow:0 12px 24px rgb(60 45 28 / 16%); transform:rotate(-1.5deg); }
.hero-detail-art { width:100%; aspect-ratio: .72; object-fit:cover; border:6px solid #fff9ed; box-shadow:0 10px 20px rgb(60 45 28 / 13%); transform:rotate(2deg); }
.hero-art-seal { grid-column:2; grid-row:1; align-self:end; justify-self:center; margin-bottom:10px; width:94px; height:94px; border:1px solid #a35e42; border-radius:50%; display:grid; place-content:center; color:#8c4e36; text-align:center; font:700 .62rem/1.45 Georgia,serif; letter-spacing:.12em; background:#f4e9d5; }
.hero-art--collage .art-caption { grid-column:1/-1; }
@media (max-width:850px) { .region-index { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px) { .region-index { grid-template-columns:repeat(2,minmax(0,1fr)); } .region-card:last-child { grid-column:1/-1; } .region-card-art { height:145px; } .hero-art--collage { max-width:440px; } }
.collection { max-width:1180px; padding:6rem 0 6.5rem; }
.section-heading h2,.about-panel h2 { font-size:clamp(2.5rem,4vw,3.7rem); letter-spacing:-.05em; }
.section-intro { max-width:52ch; margin:1rem 0 2.2rem; color:var(--muted); }
.story-count { min-width:0; padding:0; background:none; color:var(--gold); font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; }
.filters { grid-template-columns:minmax(0,1fr) minmax(220px,.35fr); gap:1.2rem; margin-bottom:2.5rem; }
.filter-field label { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--quiet); }
.search-control,.region-field select { min-height:54px; border:1px solid #d5c8b4; background:var(--paper); border-radius:0; }
.search-control input { min-height:52px; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.8rem 1.7rem; }
.story-card { min-width:0; padding:0 0 1.25rem; border:0; border-bottom:1px solid var(--rule); background:transparent; box-shadow:none; display:flex; flex-direction:column; }
.story-art { height:220px; margin:0 0 1.1rem; overflow:hidden; background:#e8dfce; }
.story-art img { width:100%; height:100%; max-height:none; object-fit:cover; transition:transform .5s ease; }
.story-card:hover .story-art img { transform:scale(1.035); }
.story-card:not(.story-card--illustrated)::before { content:"A TALE FROM THE COLLECTION"; min-height:220px; padding:1.5rem; margin-bottom:1.1rem; display:flex; align-items:center; justify-content:center; text-align:center; color:#8b6b4c; background:repeating-linear-gradient(135deg,#e9dfcf 0,#e9dfcf 1px,#eee6d8 1px,#eee6d8 8px); font:italic 1rem 'Playfair Display',Georgia,serif; letter-spacing:.09em; }
.story-copy { padding:0 .1rem; display:flex; flex:1; flex-direction:column; }
.story-tags { gap:.25rem .8rem; }
.story-region,.story-country,.metadata-filter--theme { padding:0; color:var(--gold); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; }
.story-copy h3 { margin:.7rem 0 .5rem; color:var(--forest); font:500 1.6rem/1.16 'Playfair Display',Georgia,serif; letter-spacing:-.03em; }
.story-summary { color:#6b655a; font-size:.88rem; line-height:1.75; }
.card-bottom { margin-top:auto; padding-top:1rem; border-top:1px solid #e0d7c8; }
.read-link { color:var(--forest); font-size:.82rem; font-weight:700; letter-spacing:.03em; }
.read-link::after { color:var(--gold); }
.about-panel { max-width:none; margin:0; padding:5.5rem max(1.5rem,calc((100vw - 850px)/2)); background:#e9e2d4; border-top:1px solid var(--rule); }
.about-copy { max-width:760px; margin:auto; text-align:center; }
.about-panel h2 { margin:.55rem 0 1rem; }
.about-panel p:last-child { max-width:68ch; margin:0 auto; color:#625c51; line-height:1.9; }
.site-footer { max-width:none; margin:0; padding:2rem max(1.5rem,calc((100vw - 1180px)/2)); border-top:1px solid var(--rule); background:var(--canvas); }
.footer-brand { color:var(--forest); font:500 1.35rem 'Playfair Display',Georgia,serif; }
.site-footer p { color:var(--quiet); font-size:.8rem; }
#about-dialog { border:1px solid var(--rule); border-radius:0; background:var(--paper); color:var(--ink); box-shadow:0 25px 80px rgb(30 25 18 / 25%); }
#about-dialog::backdrop { background:rgb(35 39 31 / 55%); }
@media (max-width:1240px) { .featured-story,.collection { margin-left:1.5rem; margin-right:1.5rem; } }
@media (max-width:850px) {
 .welcome { min-height:auto; grid-template-columns:1fr .85fr; padding-top:4.5rem; padding-bottom:4rem; gap:1.5rem; }
 .welcome h1 { font-size:clamp(3rem,6.5vw,4.5rem); }
 .featured-story { gap:2rem; }
 .region-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .region-index button:nth-child(3) { border-right:0; }
 .region-index button:nth-child(n+4) { border-top:1px solid #cfc1ab; }
 .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 .topbar { min-height:70px; padding:0 1.1rem; }
 .brand { font-size:1.3rem; }
 .topbar nav { gap:.15rem; }
 .topbar nav a,.topbar nav button { padding:.45rem .38rem; font-size:.76rem; }
 .topbar nav .nav-search { display:none; }
 .welcome { grid-template-columns:1fr; padding:3.4rem 1.35rem 2.8rem; gap:1.2rem; }
 .welcome::before { width:320px;height:320px;right:-16%;top:42%; }
 .welcome::after { width:260px;height:260px;right:-7%;top:47%; }
 .welcome h1 { max-width:11ch; font-size:clamp(3.25rem,13vw,4.5rem); }
 .intro { font-size:.98rem; }
 .hero-art { max-width:420px; margin:.5rem auto 0; }
 .art-caption { font-size:.62rem; }
 .featured-story { margin:0 1.25rem; padding:3rem 0; grid-template-columns:1fr; gap:1.4rem; }
 .featured-art,.featured-art img { min-height:230px; max-height:280px; }
 .featured-copy { padding:0; }
 .featured-copy h2 { font-size:2.7rem; }
 .feature-side-note { display:none; }
 .regions-section { padding:3.5rem 1.25rem; }
 .region-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .region-index button { min-height:110px; border-top:1px solid #cfc1ab; }
 .region-index button:nth-child(odd) { border-right:1px solid #cfc1ab; }
 .region-index button:nth-child(even) { border-right:0; }
 .region-index button:last-child { grid-column:1/-1; border-right:0; }
 .collection { margin:0 1.25rem; padding:4rem 0; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:.6rem; }
 .filters { grid-template-columns:1fr; gap:.9rem; }
 .story-grid { grid-template-columns:1fr; gap:2rem; }
 .story-art,.story-card:not(.story-card--illustrated)::before { height:230px; min-height:230px; }
 .about-panel { padding:4rem 1.3rem; }
}
@media (prefers-reduced-motion:reduce) {
 .cover-stage img,.story-art img { transition:none; }
 .story-card:hover .story-art img { transform:none; }
}

/* TaleAtlas — art-directed storybook edition */
:root{
 --canvas:#f5e9d1;--paper:#fbf2df;--paper-deep:#efe0c2;--sage:#e9ddc5;
 --forest:#18382d;--forest-deep:#102a22;--ink:#211f19;--muted:#554c3e;--quiet:#766b59;
 --gold:#a75a39;--rule:#bda27c;--focus:#a34e31;
 font-family:'Crimson Pro',Georgia,serif;background:var(--canvas);color:var(--ink);
}
html{background:var(--canvas);scroll-padding-top:1rem}
body{background:var(--canvas);color:var(--ink);font-family:'Crimson Pro',Georgia,serif;font-size:18px;line-height:1.45}
button,input,select{font-family:inherit}
.topbar{position:relative;min-height:76px;padding:0 max(1.4rem,calc((100vw - 1320px)/2));display:flex;gap:1.4rem;justify-content:space-between;align-items:center;background:var(--paper);border-bottom:1px solid var(--rule)}
.topbar:before,.topbar:after{content:"❧";position:absolute;top:2px;color:#8b633d;font-size:32px;line-height:1}
.topbar:before{left:1rem}.topbar:after{right:1rem;transform:scaleX(-1)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--forest);font:700 clamp(1.6rem,2.4vw,2.25rem)/1 'Crimson Pro',Georgia,serif;letter-spacing:-.04em}
.brand svg{display:none}.brand:after{content:"";height:32px;width:1px;margin-left:.8rem;background:var(--rule)}
.topbar nav{gap:clamp(.8rem,2.6vw,2.5rem)}
.topbar nav a,.topbar nav button{padding:.45rem 0;color:var(--ink);font:600 1.12rem 'Crimson Pro',Georgia,serif;text-decoration:none}
.topbar nav a:first-child{color:#9d321f;border-bottom:2px solid #9d321f}
.topbar nav button:hover,.topbar nav a:hover{color:#9d321f}
.topbar nav .nav-search{width:42px;height:42px;min-height:42px;border:0;font-size:0}
.topbar nav .nav-search span{font-size:1.4rem}
.welcome{position:relative;isolation:isolate;max-width:1440px;min-height:420px;margin:auto;padding:3.3rem max(1.5rem,calc((100vw - 1250px)/2)) 2rem;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:1.2rem;background:var(--canvas);overflow:hidden}
.welcome:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#a8794b22 .7px,transparent .7px);background-size:5px 5px;opacity:.45}
.welcome:after{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:13px;background:linear-gradient(90deg,#c6a77d66,transparent)}
.welcome-copy{max-width:500px;align-self:center}
.hero-label,.section-label,.reader-label{margin:0;color:#8d3d29;font:700 .77rem 'DM Sans',sans-serif;letter-spacing:.17em}
.ornament{display:none}
.welcome h1{max-width:10ch;margin:.9rem 0 .8rem;color:var(--forest);font:600 clamp(3.25rem,5.2vw,5.6rem)/.86 'Crimson Pro',Georgia,serif;letter-spacing:-.055em}
.welcome h1 span{display:block}.welcome h1 em{display:block;color:#9e3e2b;font-style:italic}
.intro{max-width:36ch;margin:1rem 0 1.2rem;color:#393328;font:italic 1.28rem/1.18 'Crimson Pro',Georgia,serif}
.primary{min-height:43px;padding:.55rem 1.25rem;border:1px solid #9d321f;border-radius:5px;background:#a33420;color:#fff5e4;font:600 1.12rem 'Crimson Pro',Georgia,serif;box-shadow:inset 0 1px #ffffff55}
.primary:hover{background:#7f291b}
.note{display:flex;gap:1.3rem;align-items:center;margin:.8rem 0 0;color:#302a21;font-size:1.02rem}
.hero-art{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:none;margin:0}
.hero-main-art{width:100%;height:330px;object-fit:cover;object-position:center 46%;border:0;border-radius:0;box-shadow:none;mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%)}
.art-caption{position:absolute;right:1.2rem;bottom:.2rem;color:#5d4c36;font:italic .82rem 'Crimson Pro',serif;letter-spacing:.04em}
.featured-story{position:relative;max-width:1320px;min-height:230px;margin:0 auto;padding:1rem 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;border:1px solid #967a54;background:#f6ecd8}
.featured-story:before{content:"";position:absolute;inset:5px;border:1px solid #c9ad83;pointer-events:none}
.featured-art{position:relative;min-height:185px;background:#e1cfad;overflow:hidden}
.featured-art img{width:100%;height:185px;min-height:185px;object-fit:cover}
.image-folio{display:none}
.featured-copy{position:relative;z-index:1;padding:0 1rem 0 0}
.featured-copy h2{max-width:15ch;margin:.25rem 0 .55rem;color:var(--forest);font:600 clamp(2.15rem,3vw,3.2rem)/.88 'Crimson Pro',Georgia,serif;letter-spacing:-.035em}
.feature-kicker{margin:.7rem 0 .2rem;color:#554637;font:600 .95rem 'DM Sans',sans-serif}
.featured-copy>p:not(.section-label):not(.feature-kicker){max-width:55ch;margin:.4rem 0;color:#332c23;font:1.08rem/1.15 'Crimson Pro',Georgia,serif}
.feature-link{margin-top:.5rem;padding:.4rem .9rem;border:1px solid #9c402a;border-radius:4px;background:transparent;color:#913a26;font:600 1.1rem 'Crimson Pro',serif}
.feature-link:hover{background:#9c402a;color:#fff4df}
.feature-side-note{display:none}
.regions-section{max-width:1440px;margin:auto;padding:1.2rem max(1.4rem,calc((100vw - 1320px)/2)) 1.5rem;background:var(--canvas);border:0}
.regions-heading{max-width:none;margin:0 0 .65rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.regions-heading .section-label{display:none}
.regions-heading h2{margin:0;color:var(--forest);font:600 clamp(2rem,3vw,3rem)/1 'Crimson Pro',Georgia,serif;letter-spacing:-.04em}
.regions-heading p:last-child{margin:0;color:#40382d;font:italic 1.1rem 'Crimson Pro',serif}
.region-index{max-width:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;border:0}
.region-card{min-width:0;padding:0;border:1px solid #b59a73;border-radius:12px;background:#f8eedb;overflow:hidden;box-shadow:0 2px 4px #6d4d2618;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.region-card:hover{transform:translateY(-3px);box-shadow:0 8px 16px #6d4d2622}
.region-card-art{display:block;height:105px;overflow:hidden;background:#e6d4b4}
.region-card-art img{width:100%;height:100%;object-fit:cover}
.region-card-meta{position:relative;min-height:49px;padding:.15rem .65rem .3rem;display:grid;grid-template-columns:1fr auto;align-items:center}
.region-number{display:none}
.region-name{grid-column:1/-1;grid-row:1;color:var(--ink);font:600 1.3rem/1.05 'Crimson Pro',Georgia,serif;text-align:center}
.region-arrow{display:none}
.collection{max-width:1320px;margin:0 auto;padding:1.3rem max(1.4rem,calc((100vw - 1320px)/2)) 4rem}
.section-heading{margin-bottom:.2rem;align-items:end}
.section-heading h2{margin:0;color:var(--forest);font:600 clamp(2.3rem,3.5vw,3.3rem)/1 'Crimson Pro',Georgia,serif;letter-spacing:-.045em}
.section-heading .section-label{display:none}
.section-intro{margin:.25rem 0 .75rem;color:#514737;font:italic 1.1rem 'Crimson Pro',serif}
.story-count{padding:0;background:none;color:#5b4a35;font:1rem 'Crimson Pro',serif}
.filters{display:grid;grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(130px,.6fr));gap:.55rem;margin:.7rem 0 1rem}
.filter-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.search-control,.region-field select{min-height:42px;border:1px solid #a98e67;border-radius:7px;background:#fff7e8;color:#29251e}
.search-control input{min-height:40px;color:#29251e;font:1rem 'Crimson Pro',serif}
.search-control svg{width:20px}
.region-field select{width:100%;padding:.45rem .7rem;font:1rem 'Crimson Pro',serif}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.3rem}
.story-card{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center;padding:.8rem 0;border:0;border-bottom:1px solid #cbb18b;border-radius:0;background:transparent;box-shadow:none}
.story-art{height:80px;margin:0;overflow:hidden;background:#e6d7bc;border-radius:5px}
.story-art img{width:100%;height:100%;object-fit:cover}
.story-card:not(.story-card--illustrated):before{min-height:80px;height:80px;margin:0;padding:.5rem;font-size:.8rem}
.story-copy{min-width:0;padding:0;display:flex;flex-direction:column}
.story-copy h3{margin:.1rem 0 .2rem;color:var(--forest);font:600 1.42rem/1 'Crimson Pro',Georgia,serif}
.story-tags{gap:.15rem .6rem}
.story-region,.story-country,.metadata-filter--theme{color:#8d3d29;font:600 .85rem 'DM Sans',sans-serif;letter-spacing:0}
.story-summary{display:none}
.card-bottom{margin-top:.25rem;padding:0;border:0}
.read-link{color:#913a26;font:600 .9rem 'DM Sans',sans-serif}
.about-panel{max-width:none;margin:0;padding:3.5rem 1.5rem;background:#eee0c6;border-top:1px solid #c2a47b}
.about-copy{max-width:740px;margin:auto;text-align:center}
.about-panel h2{color:var(--forest);font:600 2.5rem 'Crimson Pro',serif}
.about-panel p:last-child{color:#514737;font:1.1rem/1.5 'Crimson Pro',serif}
.site-footer{max-width:none;padding:1.2rem max(1.4rem,calc((100vw - 1320px)/2));background:#e8d9bc;border-top:1px solid #bca17a}
.footer-brand{color:var(--forest);font:700 1.6rem 'Crimson Pro',serif}
.site-footer p{color:#65543d;font:1rem 'Crimson Pro',serif}
#about-dialog{border:1px solid #a98e67;border-radius:8px;background:var(--paper);color:var(--ink)}
@media(max-width:900px){
 .welcome{min-height:0;grid-template-columns:.85fr 1.15fr;padding-top:2.2rem;padding-bottom:1.3rem}
 .welcome h1{font-size:clamp(2.8rem,6vw,4.3rem)}
 .hero-main-art{height:270px}
 .featured-story{margin:0 1rem}
 .region-index{grid-template-columns:repeat(3,minmax(0,1fr))}
 .region-card:nth-child(4),.region-card:nth-child(5){grid-column:span 1}
 .filters{grid-template-columns:1fr 1fr}
 .story-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
 .topbar{min-height:64px;padding:0 .85rem}
 .topbar:before,.topbar:after{display:none}
 .brand{font-size:1.45rem}
 .brand:after{display:none}
 .topbar nav{gap:.55rem}
 .topbar nav a,.topbar nav button{font-size:.95rem}
 .topbar nav .nav-search{display:none}
 .welcome{grid-template-columns:1fr;padding:2.2rem 1rem 1rem;gap:.4rem}
 .welcome h1{max-width:11ch;font-size:clamp(3.2rem,13vw,4.4rem)}
 .intro{max-width:34ch;font-size:1.12rem}
 .hero-main-art{height:220px;mask-image:none}
 .art-caption{right:.2rem;bottom:-.8rem;font-size:.72rem}
 .featured-story{margin:.7rem .75rem;padding:.8rem;grid-template-columns:1fr;gap:.8rem}
 .featured-art,.featured-art img{min-height:175px;height:175px}
 .featured-copy h2{font-size:2.35rem}
 .regions-section{padding:1.4rem .8rem}
 .regions-heading{display:block}
 .regions-heading p:last-child{margin:.35rem 0 .8rem}
 .region-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
 .region-card-art{height:95px}
 .collection{padding:1.8rem .85rem 3rem}
 .section-heading{display:flex;flex-direction:row;gap:.5rem}
 .section-heading h2{font-size:2.3rem}
 .filters{grid-template-columns:1fr 1fr;gap:.45rem}
 .search-field{grid-column:1/-1}
 .story-card{grid-template-columns:112px 1fr;gap:.7rem}
 .story-art{height:78px}
 .story-copy h3{font-size:1.25rem}
 .story-region,.story-country{font-size:.74rem}
 .about-panel{padding:3rem 1rem}
}
@media(prefers-reduced-motion:reduce){.region-card{transition:none}.region-card:hover{transform:none}}

.region-card-meta{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;gap:0;padding:.05rem .4rem .35rem}
.region-name{grid-column:1;grid-row:1}
.region-count{grid-column:1;grid-row:2;color:#65543e;font: .9rem 'Crimson Pro',Georgia,serif}


/* Collection pagination */
.collection-pagination{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:2rem auto .5rem;padding:1rem 0;border-top:1px solid #cbb18b;color:#514737;font:1rem 'Crimson Pro',Georgia,serif}
.collection-pagination[hidden]{display:none}
.collection-pagination button{min-width:104px;padding:.55rem 1rem;border:1px solid #9c402a;border-radius:4px;background:#a33420;color:#fff5e4;font:600 1rem 'Crimson Pro',Georgia,serif;cursor:pointer}
.collection-pagination button:hover:not(:disabled){background:#7f291b}
.collection-pagination button:disabled{border-color:#c9b99f;background:#e9dfcf;color:#8c806e;cursor:not-allowed}
#collection-page-status{font-variant-numeric:tabular-nums;text-align:center}
@media(max-width:420px){.collection-pagination{gap:.55rem;font-size:.9rem}.collection-pagination button{min-width:82px;padding:.5rem .65rem}}