/* Restrained additions to the supplied Claude design. All original sections,
   content, palette and generous editorial spacing remain in base.css. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --font-a:'Fraunces','Source Serif 4',Georgia,serif;
  --font-b:'Libre Baskerville','Newsreader',Georgia,serif;
}

/* The Global Village dotted print texture, without diagonal stripes. */
.intro,.solve,.excite{
  background-color:var(--dark);
  background-image:radial-gradient(circle,rgba(255,255,255,.17) 1.15px,transparent 1.3px);
  background-size:17px 17px;
}
.exploring{
  background-color:var(--dark-green);
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1.1px,transparent 1.3px);
  background-size:17px 17px;
}
.ideas,.timeline{
  background-color:var(--cream);
  background-image:radial-gradient(circle,rgba(37,63,59,.13) 1px,transparent 1.25px);
  background-size:18px 18px;
}
/* A quiet square grid on the same sage-blue paper as the previous version. */
.pedagogy{
  background-color:#edf6f3;
  background-image:
    linear-gradient(to right,rgba(56,118,134,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(56,118,134,.075) 1px,transparent 1px);
  background-size:42px 42px;
}

/* The only rebuilt composition: a responsive, art-led hero with no overlays. */
.hero.hero-refined{
  padding:clamp(3.7rem,7.5vw,8.5rem) var(--gutter) clamp(3.8rem,7vw,7.8rem);
  background:#fffdfa;
  overflow:hidden;
}
.hero-refined .hero-inner{
  max-width:1310px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.8rem,5vw,6rem);
  align-items:center;
}
.hero-refined .hero-copy{text-align:left;position:relative;z-index:1}
.hero-refined h1{
  margin:0;
  max-width:9.7em;
  font-size:clamp(3.2rem,5.75vw,6.5rem);
  line-height:1.06;
  letter-spacing:-.057em;
  text-wrap:balance;
  font-weight:550;
}
.hero-refined h1 em{font-weight:520}
.hero-refined .rebuild-underline{
  display:inline-block;
  position:relative;
  isolation:isolate;
  white-space:nowrap;
}
.hero-refined .rebuild-underline::after{
  content:'';
  position:absolute;
  left:-.012em;
  right:.005em;
  bottom:.005em;
  height:.065em;
  border-radius:52% 46% 41% 57%;
  background:#e7bf56;
  opacity:.84;
  transform:rotate(-1.2deg);
  z-index:-1;
}
.hero-refined .marker-phrase{
  padding:0 .03em .02em;
  margin:0 -.03em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(177deg,
    transparent 0 5%,
    rgba(244,214,132,.15) 10%,
    rgba(241,204,104,.27) 22%,
    rgba(246,216,135,.27) 82%,
    rgba(246,216,135,.14) 94%,
    transparent 99%);
  background-position:0 0;
  background-size:0% 100%;
  background-repeat:no-repeat;
  animation:draw-marker 2.35s cubic-bezier(.23,.7,.22,1) .7s both;
}
@keyframes draw-marker{
  from{background-size:0% 100%}
  to{background-size:100% 100%}
}
.hero-refined .hero-cta{
  position:static;
  transform:none;
  display:block;
  margin-top:clamp(2rem,4vw,3.6rem);
}
.hero-refined .hero-cta .pill{
  background:#d81e2a;
  min-width:min(290px,100%);
  height:66px;
  font-size:1.18rem;
  box-shadow:0 7px 20px rgba(58,15,16,.12);
}
.hero-refined .hero-cta .pill:hover{background:#b5121d;transform:translateY(-3px)}
.hero-refined .paper-art{
  width:100%;
  max-width:550px;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  justify-self:center;
  transform-origin:50% 50%;
  animation:paper-float 9s ease-in-out infinite;
}
@keyframes paper-float{
  0%,100%{transform:translate3d(0,2px,0) rotate(-.65deg)}
  50%{transform:translate3d(0,-8px,0) rotate(.65deg)}
}

/* Living crayon marks. Slightly different offsets make the movement organic. */
.mark{
  will-change:transform;
  transform-origin:50% 55%;
  animation:scribble-drift 7.5s ease-in-out infinite;
}
.pedagogy .mark,.questions .mark{animation-duration:9s;animation-delay:-2.4s}
.exploring .mark{animation-duration:6.8s;animation-delay:-1.3s}
@keyframes scribble-drift{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  48%{transform:translate3d(3px,-7px,0) rotate(3deg)}
}

/* Warm highlight boxes from the Global Village version, refined to sit within
   Claude's original cream/forest palette. */
.acc-dark .acc-item,.acc-light .acc-item{
  transition:background-color .32s ease,box-shadow .32s ease;
}
.acc-dark .acc-item.open{
  background:rgba(57,77,45,.54);
  box-shadow:inset 5px 0 0 #e3bc5e,0 11px 32px rgba(0,0,0,.13);
  border-radius:3px;
}
.acc-light .acc-item.open{
  background:#fff0cd;
  box-shadow:inset 5px 0 0 #e0ac46,0 12px 28px rgba(22,62,52,.08);
  border-radius:3px;
}
.acc-dark .acc-btn,.acc-light .acc-btn{
  transition:background-color .28s ease,color .28s ease;
}
.acc-dark .acc-btn:hover,.acc-dark .acc-btn:focus-visible{background:rgba(228,190,95,.12)}
.acc-dark .acc-btn[aria-expanded='true']{background:rgba(228,190,95,.16);color:#ffe0a2}
.acc-light .acc-btn:hover,.acc-light .acc-btn:focus-visible{background:#fff4dd}
.acc-light .acc-btn[aria-expanded='true']{background:#ffedc0;color:#174e49}
.acc-btn .acc-title{transition:transform .26s ease}
.acc-light .acc-btn:hover .acc-title{transform:translateY(-1px)}
.acc-inner{opacity:0;transform:translateY(-5px);transition:opacity .31s ease,transform .31s ease}
.acc-item.open .acc-inner{opacity:1;transform:translateY(0)}
.rowlink:hover{letter-spacing:.012em}

/* Connected timeline with the original school sketch reinstated above it. */
.timeline{padding-top:clamp(5rem,8.5vw,8rem)}
.timeline .col{max-width:820px}
.timeline .timeline-school{
  display:block;
  width:clamp(250px,30vw,440px);
  max-width:80%;
  height:auto;
  margin:0 auto clamp(1.8rem,3.5vw,3rem);
  object-fit:contain;
}
.timeline h2{max-width:13em;margin-bottom:1.6rem}
.timeline-steps{
  position:relative;
  margin:clamp(2rem,4.5vw,3.6rem) 0 0;
  padding-left:clamp(46px,6vw,73px);
}
.timeline-steps::before{
  content:'';
  position:absolute;
  left:clamp(16px,2.7vw,27px);
  top:1.1rem;
  bottom:3rem;
  width:2px;
  background:linear-gradient(#d59a35,#ca5e4e 53%,#557d89);
  opacity:.72;
}
.timeline-step{position:relative;padding:0 0 clamp(2.2rem,4vw,3.3rem)}
.timeline-step:last-child{padding-bottom:0}
.timeline-step .step-index{
  position:absolute;
  top:.15em;
  left:calc(-1 * clamp(46px,6vw,73px));
  display:grid;
  place-items:center;
  width:clamp(34px,4vw,55px);
  aspect-ratio:1;
  border:2px solid #b76d2e;
  border-radius:50%;
  background:#fff8ea;
  color:#8e351e;
  font:600 clamp(.94rem,1.4vw,1.2rem)/1 var(--font-a);
  box-shadow:0 0 0 8px var(--cream);
}
.timeline-step:nth-child(2) .step-index{border-color:#c65d44;color:#873d37}
.timeline-step:nth-child(3) .step-index{border-color:#34737b;color:#235e69}
.timeline-step:nth-child(4) .step-index{border-color:#b78e28;color:#765918}
.timeline-step h3{margin:0 0 1rem}
.timeline-step p:last-child{margin-bottom:0}

/* The transparent LEGO crane now anchors the invitation chapter. */
.excite .excite-crane{
  width:min(100%,335px);
  max-height:300px;
  object-fit:contain;
  margin:0 auto clamp(1.4rem,2.5vw,2.2rem);
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.16));
}
.excite .rows{position:relative}

@media(max-width:900px){
  .hero-refined .hero-inner{grid-template-columns:1fr;gap:1.25rem}
  .hero-refined .hero-copy{display:contents}
  .hero-refined h1{font-size:clamp(2.8rem,7vw,5rem);max-width:11em;margin:auto;text-align:center;order:1}
  .hero-refined .paper-art{width:min(72vw,430px);order:2}
  .hero-refined .hero-cta{margin-top:0;order:3;text-align:center}
}
@media(max-width:600px){
  .hero.hero-refined{padding:3rem 1.25rem 4.1rem}
  .hero-refined h1{font-size:clamp(2.45rem,10vw,3.7rem);letter-spacing:-.05em}
  .hero-refined .paper-art{width:min(79vw,320px)}
  .hero-refined .hero-cta .pill{width:min(270px,100%);height:54px;font-size:1.06rem}
  .timeline-steps{padding-left:48px}
  .timeline-steps::before{left:17px}
  .timeline-step .step-index{left:-48px;width:36px}
  .excite .excite-crane{width:min(62vw,250px);max-height:230px}
  .acc-dark .acc-btn{
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 22px;
    align-items:center;
    text-align:center;
    padding:1.45rem .25rem;
  }
  .acc-dark .acc-btn .chev{grid-column:1}
  .acc-dark .acc-btn .acc-title{grid-column:2}
  .acc-light .acc-btn{padding-left:1.95rem;padding-right:1.95rem}
  .acc-light .chev{left:.25rem}
}
@media(prefers-reduced-motion:reduce){
  .mark{animation:none!important}
  .hero-refined .paper-art{animation:none!important}
  .hero-refined .marker-phrase{animation:none!important;background-size:100% 100%}
  .acc-btn,.acc-btn .acc-title,.acc-item,.acc-inner,.rowlink{transition:none!important}
}