/* The lighthouse sends its light across the water; the light carries letters to the book. One painted scene. */
.lh{position:relative;background:#dfe8e8}
.lh-stage{position:relative;width:100%;aspect-ratio:1376/768;overflow:hidden;max-height:calc(100svh - 72px);min-height:560px;background:#dfe8e8}
.lh-stage>img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.lh-copy{position:absolute;z-index:6;left:24%;right:29%;top:clamp(20px,5%,56px);text-align:center}
.lh-copy .kick{justify-content:center}
.lh-copy .kick::before{display:none}
.lh-copy h1{font-size:clamp(38px,4.6vw,70px)}
.lh-copy .lead{margin:14px auto 20px;font-size:clamp(17px,1.35vw,20px);max-width:30em;color:#3c5553}
.lh-copy .acts{justify-content:center}
.lh-since{position:absolute;z-index:6;left:clamp(16px,2.4vw,36px);top:clamp(16px,3%,30px);margin:0;font-size:14.5px;line-height:1.35;color:#3c5553}
.lh-since b{display:block;font:500 22px/1.1 var(--display);color:var(--pine);margin-top:8px}
/* the beam, pinned to the lamp */
.beam{position:absolute;z-index:2;left:12.2%;top:var(--lamp-y,31.3%);width:82%;height:0;transform-origin:0 0;transform:rotate(19deg);pointer-events:none;animation:sweep 11s ease-in-out infinite alternate}
.beam::before{content:"";position:absolute;left:0;top:-90px;width:100%;height:180px;background:linear-gradient(90deg,rgba(255,221,150,.72),rgba(255,226,165,.34) 45%,rgba(255,232,180,0) 96%);clip-path:polygon(0 49%,100% 0,100% 100%,0 51%);filter:blur(5px)}
@keyframes sweep{from{transform:rotate(9deg)}to{transform:rotate(25deg)}}
.lamp{position:absolute;z-index:3;left:12.2%;top:var(--lamp-y,31.3%);width:clamp(50px,6vw,92px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,240,190,.95),rgba(255,214,130,.35) 45%,transparent 70%);animation:lamp 4s ease-in-out infinite}
@keyframes lamp{50%{opacity:.72}}
.bookglow{position:absolute;z-index:3;left:84%;top:78%;width:34%;aspect-ratio:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,232,170,.7),transparent 68%);opacity:.25;transition:opacity 1.1s ease;pointer-events:none}
.bookglow.on{opacity:.95}
.lt{position:absolute;z-index:5;left:0;top:0;font:500 clamp(30px,5vw,76px)/1 var(--display);color:#c98d3c;text-shadow:0 0 16px rgba(255,226,150,.95),0 0 3px #fff6d8;will-change:transform,opacity;pointer-events:none}
.dust{position:absolute;z-index:4;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#ffe9ad;box-shadow:0 0 8px #ffd98a;pointer-events:none;will-change:transform,opacity}
.snd{position:absolute;z-index:5;left:83%;top:52%;transform:translateX(-50%);font:700 clamp(14px,1.35vw,19px)/1 var(--body);letter-spacing:.14em;color:var(--fjord);opacity:0;transition:opacity .6s ease;white-space:nowrap}
.snd.on{opacity:1}
.lh-pic{position:absolute;inset:0;overflow:hidden}
.lh-pic img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
@media (max-width:860px){
  .beam::before{top:-44px;height:88px}
  .lh-copy{order:1}
  .lh-stage{aspect-ratio:auto;max-height:none;min-height:0;overflow:visible;display:flex;flex-direction:column;background:linear-gradient(#f3f3ee,#dfe8e8)}
  .lh-copy{position:static;padding:26px var(--gut) 10px}
  .lh-since{position:static;order:3;display:flex;gap:26px;padding:14px var(--gut) 18px;background:var(--snow)}.lh-since span{display:block}.lh-since b{margin:0}
  .lh-pic{position:relative;width:100%;aspect-ratio:1376/768;order:2;overflow:hidden}
  .lh-stage>img{display:none}
  .lh-pic img{display:block!important}
}
html.calm .beam{transform:rotate(19deg)}html.calm .lamp{animation:none}html.calm .snd{opacity:1}html.calm .bookglow{opacity:.95}
@media (prefers-reduced-motion:reduce){.beam{transform:rotate(19deg)}.snd{opacity:1}.bookglow{opacity:.95}}

/* teacher and child under the tree */
.tree{position:relative;background:#e4edf0}
.tree-stage{position:relative;width:100%;aspect-ratio:1376/768;overflow:hidden}
.tree-stage img{width:100%;height:100%;object-fit:cover}
.tree-copy{position:absolute;z-index:4;right:clamp(16px,3.4vw,60px);top:30%;width:min(32%,430px)}
.tree-copy h2{font-size:clamp(28px,3.3vw,44px)}.tree-copy .sub{font-size:clamp(16px,1.3vw,19px)}
.tchip{position:absolute;z-index:3;left:0;top:0;padding:.28em .7em;border-radius:999px;background:rgba(255,253,246,.92);box-shadow:0 2px 12px rgba(255,214,130,.8);font:700 clamp(11px,1.15vw,16px)/1.2 var(--body);color:var(--pine);white-space:nowrap;will-change:transform,opacity;pointer-events:none}
@media (max-width:760px){.tree-copy{position:static;width:auto;padding:36px var(--gut) 18px}.tree{display:flex;flex-direction:column}.tree-stage{order:2}}