:root {
  --section-space: clamp(3.25rem, 7vw, 6rem);
  --inner-space: clamp(1.25rem, 3.4vw, 2.75rem);
  --card-gap: clamp(.85rem, 2vw, 1.5rem);
  --card-radius: 22px;
}
main > section:not(#home) {
  margin-block: 0;
  padding-block: var(--section-space);
}
main > section.wrap:not(#home) { margin-inline: auto; }
main > section:not(#home) .section-top { margin-bottom: var(--inner-space); }
main > section:not(#home) .section-top > :last-child { margin-bottom: 0; }
main > .inspiration.wrap,
main > .about.wrap {
  padding-inline: var(--inner-space);
  border: 1px solid #20374c19;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, #eaf5ee, #f7efe3 70%, #eee5f3);
}
main > .about.wrap { gap: var(--inner-space); }
.reading-progress {
  height: 4px;
  background: linear-gradient(90deg, #407c6b, #64b895 55%, #cc72a0);
}
header nav a {
  position: relative;
  text-decoration-thickness: 2px;
  text-underline-offset: .42rem;
}
header nav a[aria-current="location"] {
  color: #276550;
  text-decoration-line: underline;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}
.audience-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2.7vw, 2rem);
  border: 1px solid #284f3d20;
  border-radius: var(--card-radius);
  background: linear-gradient(145deg, #fffdf9, #edf5ed);
  box-shadow: 0 12px 38px #172f2510;
  transition: transform .22s ease, box-shadow .22s ease;
}
.audience-card:nth-child(3n + 2) { background: linear-gradient(145deg, #fffdf9, #f5e9ef); }
.audience-card:nth-child(3n + 3) { background: linear-gradient(145deg, #fffdf9, #eef0fb); }
.audience-tag, .gallery-card .gallery-tag {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 .85rem;
  padding: .3rem .65rem;
  border: 1px solid #355a4733;
  border-radius: 99px;
  background: #ffffffb8;
  color: #285444;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.audience-card h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: .65rem; }
.audience-card .outcome {
  margin: auto 0 0;
  padding: .75rem .85rem;
  border: 1px solid #ffffffc9;
  border-radius: 13px;
  background: #ffffff9c;
  font-size: .89rem;
}
.outcome strong { display: block; margin-bottom: .2rem; color: #20374c; }
.audience-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--inner-space);
  padding: 1rem 1.3rem;
  border: 1px solid #20374c1f;
  border-radius: 16px;
  background: #e9f1e7;
}
.audience-action p { margin: 0; }
.real-gallery { gap: var(--card-gap); }
.real-gallery .gallery-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: linear-gradient(140deg, #fff, #f7f9f4);
  box-shadow: 0 14px 40px #20374c12;
}
.gallery-card .gallery-media { display: block; position: relative; overflow: hidden; width: 100%; padding: 0; background: #eeefe9; }
.gallery-media img { display: block; width: 100%; aspect-ratio: 970 / 600; object-fit: contain; border-radius: 0; }
.gallery-card .gallery-expand {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 1px solid #ffffffab;
  border-radius: 50%;
  color: #20374c;
  background: #ffffffe0;
  backdrop-filter: blur(9px);
  transition: transform .2s ease;
}
.gallery-card .gallery-caption { display: flex; flex-direction: column; padding: 1rem 1.15rem 1.25rem; }
.gallery-caption strong { font-size: 1.08rem; color: #20374c; }
.gallery-card .gallery-detail { padding: 0; margin: .35rem 0 0; color: #405263; font-size: .88rem; }
.gallery-card:focus-visible, .audience-action a:focus-visible {
  outline: 3px solid #376f65;
  outline-offset: 4px;
}
.gallery-card:active, .audience-action a:active { transform: translateY(1px); }
.entrance-ready.entered { animation: planner-enter .55s cubic-bezier(.19,.72,.29,1) backwards; }
@keyframes planner-enter {
  from { opacity: .25; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) {
  .audience-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px #172f2522; }
  .gallery-card:hover .gallery-expand { transform: rotate(8deg) scale(1.08); }
}
@media (max-width: 940px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  :root { --section-space: 3.25rem; --inner-space: 1.35rem; }
  .audience-grid, .real-gallery { grid-template-columns: 1fr; }
  .audience-card { border-radius: 16px; }
  .audience-action > a { width: 100%; text-align: center; }
  .real-gallery .gallery-card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance-ready.entered { animation: none; }
}


.printable-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: linear-gradient(125deg, #e7f4ed, #f0e8f8);
}

.printable-panel p {
  max-width: 50ch;
}

.printable-formats {
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid #fff;
  border-radius: 1.3rem;
  background: #ffffffa6;
}

.printable-formats .tags {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.printable-formats .tags li {
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
}

@media (max-width: 700px) {
  .printable-panel {
    grid-template-columns: 1fr;
  }
}