/* LIBRARY (#/library and #/stage/<slug>) — stage cards and stage page layout. */

.library-hero {
  background:linear-gradient(180deg,#FFDEA4,#FCE9C8);
  border-radius:0 0 34px 34px;
  padding:34px 34px 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,330px);
  gap:22px;
  align-items:end;
  margin-bottom:18px;
  overflow:hidden
}

.library-hero h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.1rem;
  line-height:.95;
  margin:0 0 9px
}

.library-hero p {
  max-width:420px;
  margin:0;
  line-height:1.45
}

.library-hero img {
  width:100%;
  height:220px;
  object-fit:contain;
  object-position:center bottom;
  image-rendering:auto;
  display:block
}

.filters {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0 14px;
  scrollbar-width:none
}

.filters button {
  flex:0 0 auto;
  border:0;
  background:#FFF8EF;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700
}

.filters button.active {
  background:var(--navy);
  color:white
}

.library-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.library-card {
  min-height:215px;
  border:1px solid var(--line);
  background:white;
  border-radius:18px;
  padding:14px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--shadow-soft)
}

.library-card:last-child {
  grid-column:span 3;
  min-height:145px;
  display:grid;
  grid-template-columns:1fr 210px;
  align-items:center
}

.library-card h3 {
  font-size:1.22rem;
  line-height:1;
  margin:0 0 5px
}

.library-card p {
  font-size:.78rem;
  line-height:1.35;
  margin:0;
  color:#415a75;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.library-card .age {
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:700;
  line-height:.9;
  display:block;
  margin-bottom:8px
}

.library-illustration {
  height:92px;
  margin-bottom:7px
}

.library-illustration img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  image-rendering:auto
}

.library-card:last-child .library-illustration {
  grid-column:2;
  grid-row:1/span 2;
  height:115px
}

.library-card:last-child>span:first-child {
  display:grid;
  grid-template-columns:1fr 210px
}

.library-card:last-child>span:first-child>.library-illustration {
  grid-column:2;
  grid-row:1/span 4
}

.library-card:last-child>span:first-child>.age,.library-card:last-child>span:first-child>h3,.library-card:last-child>span:first-child>p {
  grid-column:1
}

.library-card>span:last-child {
  font-size:.8rem;
  font-weight:800;
  margin-top:10px
}

.stage-layout {
  display:grid;
  grid-template-columns:.85fr 1.45fr;
  gap:24px;
  align-items:start
}

.stage-aside {
  position:sticky;
  top:90px
}

.stage-section h2 {
  font-size:1.4rem;
  letter-spacing:-.02em;
  margin:0 0 8px
}

.stage-section p,.stage-section li {
  color:#425a75;
  line-height:1.58
}

.illustration-media {
  overflow:hidden
}

.section-illustration {
  height:180px
}

.section-illustration img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  image-rendering:auto
}


/* The stage summary card bleeds its illustration off the right-hand edge and
   fades it out, so the title can sit on top without fighting for contrast. */
.stage-summary-card {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:380px
}

.stage-summary-copy {
  position:relative;
  z-index:3;
  width:82%;
  max-width:350px
}

/* !important because the old inline font-size on this heading is gone but the
   shared .page-title rule still applies. */
.stage-title {
  font-size:clamp(2.2rem,4.4vw,3.25rem)!important;
  line-height:.94;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  position:relative;
  z-index:3
}

/* Added by the view when a stage title is longer than 20 characters. */
.stage-title-long {
  font-size:clamp(2rem,3.6vw,2.35rem)!important;
  line-height:.96
}

.stage-summary-card .stage-age-art {
  position:absolute;
  z-index:1;
  top:-2%;
  right:-10%;
  width:72%;
  height:auto;
  max-height:97%;
  object-fit:contain;
  object-position:top right;
  pointer-events:none;
  user-select:none;
  image-rendering:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 16%,rgba(0,0,0,.10) 28%,rgba(0,0,0,.64) 54%,#000 76%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 16%,rgba(0,0,0,.10) 28%,rgba(0,0,0,.64) 54%,#000 76%)
}

/* The illustration at the foot of the About page. */
.about-illustration {
  margin-top:18px
}

.about-illustration img {
  width:100%;
  max-height:260px;
  object-fit:contain;
  object-position:center;
  display:block
}



.stage-section {
  scroll-margin-top:92px
}

.age-guide-share {display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}
.age-guide-share .share-status {margin:0}