right after a section; X = colour of the NEXT band */
.wave { line-height: 0; margin-top: -34px; position: relative; z-index: 2; pointer-events: none; }
.wave svg { width: 100%; height: 36px; display: block; }
.wave:nth-of-type(odd) svg { transform: scaleX(-1); }
@media (min-width: 720px) { .wave svg { height: 58px; } .wave { margin-top: -57px; } }
.wave--pale { color: var(--accent-pale); }
.wave--pale-green { color: var(--green-pale); }
.wave--pale-blue { color: var(--blue-pale); }
.wave--white { color: #fff; }
.wave--blue { color: var(--blue); }
.wave--green { color: var(--green-deep); }
.wave--navy { color: var(--blue-ink); }
/* moving river at the foot of a hero */
.river { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(36px, 5vw, 72px); overflow: hidden; color: #fff; z-index: 3; pointer-events: none; }
.river svg { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 100%; }
.river__back { opacity: 0.45; animation: river 24s linear infinite; }
.river__front { animation: river 36s linear infinite reverse; }
@keyframes river { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- home hero ---------- */
.hero {
position: relative; min-height: min(92svh, 880px); display: grid; align-items: end; padding: 0;
overflow: hidden; color: #fff; isolation: isolate; margin-top: calc(-1 * var(--header-h));
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg .photo { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); animation: kenburns 18s var(--ease-out) both; }
@keyframes kenburns { from { scale: 1.14; } to { scale: 1; } }
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(14,42,92,0.3) 0%, rgba(14,42,92,0.1) 26%, rgba(11,79,191,0.62) 62%, rgba(11,60,160,0.9) 100%);
}
@media (min-width: 900px) {
.hero::after {
background:
linear-gradient(90deg, rgba(9,40,110,0.78) 0%, rgba(9,40,110,0.42) 42%, rgba(9,40,110,0) 68%),
linear-gradient(180deg, rgba(14,42,92,0.3) 0%, rgba(14,42,92,0) 28%, rgba(14,42,92,0) 70%, rgba(11,79,191,0.5) 100%);
}
}
.hero__inner { position: relative; z-index: 2; padding: 150px 0 clamp(80px, 9vw, 130px); }
.hero h1 { max-width: 14ch; font-size: clamp(2.7rem, 1.5rem + 5vw, 5.2rem); font-weight: 800; text-shadow: 0 4px 30px rgba(0,0,0,0.35); }
.hero .lede { color: #fff; font-weight: 500; max-width: 34ch; font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* the three facts under the hero buttons: white paper chips with a green leaf, one row that wraps on phones */
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.hero__facts li {
display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: var(--pill);
background: rgba(255,255,255,0.94); color: var(--blue-ink); font-weight: 600; font-size: 0.92rem; line-height: 1.2; white-space: nowrap;
box-shadow: 0 6px 18px rgba(9,40,110,0.28); text-shadow: none;
}
.hero__facts li::before {
content: ""; flex: none; width: 15px; height: 15px; background: var(--green);
-webkit-mask: url("../img/frond.svg") center / contain no-repeat; mask: url("../img/frond.svg") center / contain no-repeat;
}
.hero__facts li:nth-child(2)::before { background: var(--blue); transform: scaleX(-1); }
.hero__facts li:nth-child(3)::before { background: var(--sun-deep); }
.hero .frond { --frond-1: #1F5C12; --frond-2: #48971D; --w: clamp(200px, 34vw, 400px); z-index: 1; }
.hero .frond--tr { right: calc(var(--w) * -0.36); }
.hero .frond--bl { left: -14%; bottom: -10%; --w: clamp(180px, 34vw, 420px); }
@media (min-width: 900px) { .hero .frond--tr { right: calc(var(--w) * -0.4); top: calc(var(--w) * -0.1); } .hero .frond--bl { display: none; } }
/* entrance for hero content */
.rise { animation: rise 0.8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 100ms); }
@keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
/* ---------- inner page hero ---------- */
.phero {
position: relative; overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--header-h));
padding: calc(var(--header-h) + clamp(28px, 5vw, 60px)) 0 clamp(84px, 10vw, 140px);
background: linear-gradient(125deg, var(--hero-a) 0%, var(--hero-a) 42%, var(--hero-b) 100%);
color: var(--on-hero);
}
.phero__dots {
position: absolute; inset: 0 40% 20% 0; z-index: -1;
background-image: radial-gradient(var(--dots) 1.6px, transparent 1.7px); background-size: 22px 22px;
-webkit-mask-image: linear-gradient(140deg, #000 10%, transparent 70%); mask-image: linear-gradient(140deg, #000 10%, transparent 70%);
}
.phero__grid { position: relative; z-index: 2; display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.phero__text { position: relative; z-index: 2; }
@media (min-width: 900px) { .phero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.phero h1 { color: inherit; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem); max-width: 15ch; }
.tone-light .phero h1 { color: var(--blue); }
.phero .lede { color: var(--on-hero-soft); max-width: 48ch; margin-bottom: 0; }
.phero__media { position: relative; justify-self: center; width: 100%; max-width: 540px; }
.phero .phero__photo { aspect-ratio: 5 / 4; border-radius: var(--r-lg); border: var(--frame); box-shadow: 0 26px 56px rgba(10, 30, 70, 0.3); transform: rotate(2deg); transition: transform 0.6s var(--bounce); }
.phero .phero__photo--tall { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
.phero__media:hover .phero__photo { transform: rotate(0deg) scale(1.02); }
/* the frond behind the framed photo, and a second one peeking in at the top right of the band */
.phero__media .frond { --frond-1: var(--hero-frond-1); --frond-2: var(--hero-frond-2); --w: 90%; z-index: -1; left: -28%; bottom: -18%; rotate: -12deg; transform-origin: 8% 92%; animation: sway 9s ease-in-out infinite alternate; }
.phero > .frond--tr { --frond-1: var(--hero-frond-1); --frond-2: var(--hero-frond-2); --w: clamp(160px, 28vw, 340px); opacity: 0.9; filter: none; }
@media (min-width: 900px) { .phero__media .frond { --w: 76%; left: -16%; bottom: -14%; } }
/* ---------- photos ---------- */
.photo {
position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r);
background: var(--accent-pale);
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease; }
.photo.is-loading { background: var(--accent-pale) linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
.photo.is-loading img { opacity: 0; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.photo--portrait { aspect-ratio: 3 / 4; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--square { aspect-ratio: 1; }
.photo--wide { aspect-ratio: 16 / 9; }
/* the framed photo: white border, soft shadow, a slight tilt. Same treatment as the hero photo. */
.photo--lg { border-radius: var(--r-lg); border: var(--frame); box-shadow: var(--shadow-pop); transition: transform 0.6s var(--bounce), box-shadow 0.4s ease; }
.photo--tilt { transform: rotate(-2deg); }
.photo--tilt-r { transform: rotate(2deg); }
.photo[data-caption]::after { content: attr(data-caption); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ink-soft); font-size: 0.85rem; }
/* a frond behind a framed photo */
.leaf-wrap { position: relative; isolation: isolate; }
.leaf-wrap::before {
content: ""; position: absolute; z-index: -1; width: 72%; aspect-ratio: 1; left: -16%; bottom: -16%; rotate: -10deg;
background: var(--leaf, var(--green-light)); opacity: 0.85;
-webkit-mask: url("../img/frond.svg") center / contain no-repeat; mask: url("../img/frond.svg") center / contain no-repeat;
animation: sway 9s ease-in-out infinite alternate;
}
.leaf-wrap--r::before { left: auto; right: -16%; transform: scaleX(-1); animation: sway-m 9s ease-in-out infinite alternate; }
.leaf-wrap--deep { --leaf: var(--green); }
.leaf-wrap--tint { --leaf: var(--green-tint); }
.leaf-wrap:hover .photo--lg { transform: rotate(0deg) scale(1.02); box-shadow: 0 30px 60px rgba(14, 42, 92, 0.24); }
/* ---------- two-up ---------- */
.two { display: grid; gap: clamp(44px, 6vw, 88px); align-items: center; }
.two > .leaf-wrap, .two > .photo, .two > .card { width: 100%; max-width: 560px; justify-self: center; }
@media (min-width: 900px) {
.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.two > .leaf-wrap, .two > .photo, .two > .card { max-width: none; }
}
.two--flip > :first-child { order: 2; }
@media (min-width: 900px) { .two--flip > :first-child { order: 0; } }
.two--top { align-items: start; }
/* ---------- yearbook film (home) ----------
A navy band with the student-made film in a white frame, like the site's photos. The poster shows until play;
a big play button sits on top and main.js hides it once the film starts. The file only loads on play. */
.film__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
.film__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); row-gap: 0; }
.film__player { grid-column: 2; grid-row: 1 / span 2; }
.film__text { align-self: end; }
.film__team { grid-column: 1; grid-row: 2; align-self: start; }
}
.film__text .lede { color: rgba(255,255,255,0.9); }
.film__meta { margin: 0; font-size: var(--t-small); color: var(--green-light); font-weight: 600; }
.film__player { position: relative; margin: 0; }
.film__video {
display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--blue-ink);
border: var(--frame); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); transform: rotate(-1.5deg);
transition: transform 0.6s var(--bounce);
}
.film__player.is-playing .film__video, .film__player:hover .film__video { transform: rotate(0deg); }
.film__play {
position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
background: var(--green-deep); color: #fff; box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 10px rgba(255,255,255,0.18);
transition: scale 0.35s var(--bounce), background-color 0.2s ease;
}
.film__play svg { width: 40px; height: 40px; translate: 3px 0; }
.film__play:hover { scale: 1.08; background: var(--green); }
.film__play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); animation: ping 3s ease-out infinite; }
.film__player.is-playing .film__play, .film__player .film__video:not([poster]) + .film__play { display: none; }
.film .sticker--tl { top: -14px; left: 6px; }
/* the team who made it: a taped polaroid under the text */
.film__team { position: relative; max-width: 300px; margin: 30px 0 8px; padding: 8px 8px 0; background: #fff; border-radius: 10px; rotate: -2.5deg; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.film__team::before { content: ""; position: absolute; z-index: 2; top: -9px; left: 50%; width: 64px; height: 20px; margin-left: -32px; rotate: 4deg; background: rgba(156, 198, 74, 0.8); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.film__team .photo { border-radius: 4px; }
.film__team figcaption { padding: 7px 4px 9px; text-align: center; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.film > .frond--tr { opacity: 0.9; }
@media (max-width: 899px) { .film > .frond--tr { display: none; } .film__grid { text-align: center; } .film__text .lede { margin-inline: auto; } .film__team { margin: 10px auto 0; max-width: 260px; } .film__play { width: 72px; height: 72px; } .film__play svg { width: 32px; height: 32px; } }
/* ---------- ribbons (subjects and values) ---------- */
.ribbons {
position: relative; display: grid; padding: clamp(40px, 6vw, 72px) 0;
background: linear-gradient(180deg, #fff 50%, var(--accent-pale) 50%); overflow: hidden;
}
.ribbon {
grid-area: 1 / 1; width: 110%; margin-left: -5%; padding: 12px 0; overflow: hidden;
font-weight: 800; font-size: clamp(1.35rem, 0.9rem + 2.2vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap;
box-shadow: 0 12px 30px rgba(14, 42, 92, 0.16);
}
.ribbon--green { background: var(--green); color: #fff; rotate: 3deg; font-size: clamp(1.1rem, 0.8rem + 1.5vw, 2rem); padding: 10px 0; }
.ribbon--blue { background: var(--blue); color: #fff; rotate: -2.6deg; z-index: 1; }
.ribbon__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ribbon__track--rev { animation-direction: reverse; animation-duration: 40s; }
.ribbons:hover .ribbon__track { animation-play-state: paused; }
.ribbon__track span::after { content: "✦"; display: inline-block; margin: 0 0.6em; font-size: 0.6em; vertical-align: 0.2em; }
.ribbon--blue span:nth-child(3n+2) { color: var(--sun); }
.ribbon--blue span:nth-child(3n) { color: var(--green-light); }
.ribbon--green span:nth-child(2n) { color: var(--green-tint); }
.ribbon span::after { color: rgba(255,255,255,0.5); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mascot { position: absolute; z-index: 2; left: 6%; top: 50%; width: clamp(64px, 8vw, 100px); margin-top: calc(clamp(64px, 8vw, 100px) * -1.1); rotate: -22deg; animation: peek 5s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(14,42,92,0.25)); }
.mascot .eye { fill: #fff; }
.mascot .pupil { fill: var(--ink); }
.mascot__eyes { transform-origin: 50px 40px; animation: blink 5s infinite; }
@keyframes peek { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.1); } }
/* ---------- noticeboard (home) ----------
A card each. Each card takes its colour from `stage-*`, and the two offers carry a small tilted
poster of the flyer in the corner. The headlines strip that used to sit above the cards is now
the reel under the nav bar (header section). */
/* `.hero + section` would give this the full section gap top and bottom, and the section after it
another one, so the band has to claim its own padding and hand the next section the tight gap. */
.hero + .notices-band { padding: clamp(26px, 3vw, 40px) 0 clamp(18px, 2vw, 28px); }
.notices-band + section { padding-top: var(--section-tight); }
.notices { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; }
/* Two up once a column is at least ~400px, which is where this much text stops towering.
Narrower than that, four stacked cards run to two screens, so they become a swipe strip
like the galleries; a strip card is 400px too, so nothing jumps at the breakpoint. */
@media (min-width: 900px) { .notices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.notices__hint { display: none; margin: 0; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 899px) {
.notices {
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
}
.notices::-webkit-scrollbar { display: none; }
.notice { flex: 0 0 min(84%, 400px); scroll-snap-align: center; }
.notices__hint { display: block; }
}
.notice {
position: relative; display: flex; flex-direction: column; overflow: hidden;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
box-shadow: var(--shadow-sm); scroll-margin-top: 24px; /* the reel links to a card: /#quarter-2 */
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease, border-color 0.3s ease;
}
.notice::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stage);
transform: scaleX(0.22); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.notice:hover { transform: translateY(-6px); box-shadow: 0 20px 40px color-mix(in srgb, var(--stage) 22%, rgba(14, 42, 92, 0.08)); border-color: color-mix(in srgb, var(--stage) 40%, #fff); }
.notice:hover::after { transform: scaleX(1); }
.notice__kind {
align-self: start; margin: 0 0 12px; padding: 4px 12px; border-radius: var(--pill);
background: color-mix(in srgb, var(--stage-tint) 70%, #fff); color: var(--stage-ink);
font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.notice h3 { margin-bottom: 0.25em; color: var(--stage-ink); font-size: 1.22rem; line-height: 1.25; }
.notice__when { margin: 0 0 0.7em; font-weight: 600; color: var(--ink); }
.notice__text { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.notice__note { margin: 0.7em 0 0; color: var(--ink-soft); font-size: 0.8rem; }
/* the row sits on the card's floor; `auto` collapses to nothing in a card with no slack,
so the gap above the rule comes from whatever the row follows. */
.notice__do {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}
.notice > :nth-last-child(2) { margin-bottom: 18px; }
.notice__do a, .notice__flyer {
font-family: var(--font); font-size: 0.92rem; font-weight: 600; color: var(--stage-ink);
background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--stage) 45%, transparent);
}
.notice__do a:hover, .notice__flyer:hover { color: var(--stage); text-decoration-color: currentColor; }
/* the flyer rides in its own button as a tilted thumbnail */
.notice__flyer { display: inline-flex; align-items: center; gap: 9px; text-align: left; }
.notice__poster { width: 46px; flex: none; rotate: -4deg; transition: rotate 0.4s var(--bounce), scale 0.4s var(--bounce); }
.notice__poster .photo {
aspect-ratio: 3 / 4; border-radius: 3px; border: 2px solid #fff; background: #fff;
box-shadow: 0 3px 8px rgba(14, 42, 92, 0.28);
}
.notice__poster .photo img { object-position: top; }
.notice:hover .notice__poster { rotate: 0deg; scale: 1.12; }
/* ---------- stage tiles ---------- */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); } }
.tile {
--tile: var(--blue); --tile-on: #fff;
position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4;
text-decoration: none; color: #fff; box-shadow: var(--shadow-sm); isolation: isolate;
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.tile:hover { color: #fff; transform: translateY(-8px) rotate(-1deg); box-shadow: 0 0 0 4px var(--tile), var(--shadow-pop); }
.tile:nth-child(even):hover { transform: translateY(-8px) rotate(1deg); }
.tile .photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: -2; }
.tile .photo img { transition: transform 0.7s var(--ease-out), opacity 0.6s ease; }
.tile:hover .photo img { transform: scale(1.08); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,42,92,0) 38%, rgba(14,42,92,0.88) 100%); }
.tile__go {
position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
background: var(--tile); color: var(--tile-on); rotate: -45deg; box-shadow: 0 6px 14px rgba(0,0,0,0.2);
transition: rotate 0.35s var(--bounce), scale 0.35s var(--bounce);
}
.tile__go svg { width: 18px; height: 18px; }
.tile:hover .tile__go { rotate: 0deg; scale: 1.12; }
.tile__label { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.tile__label strong { display: block; font-size: clamp(1.05rem, 0.75rem + 1.1vw, 1.6rem); font-weight: 700; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.tile__label small {
display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 10px; line-height: 1.35;
font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.8rem); font-weight: 600; background: var(--tile); color: var(--tile-on);
}
@media (max-width: 1023px) {
.tile__label strong::before { content: ""; display: block; width: 28px; height: 5px; margin-bottom: 7px; border-radius: 5px; background: var(--tile); }
.tile__label small { display: block; margin-top: 4px; padding: 0; background: none; color: rgba(255,255,255,0.92); font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
}
@media (min-width: 720px) { .tile__label { left: 16px; right: 16px; bottom: 16px; } .tile__go { width: 42px; height: 42px; top: 14px; right: 14px; } }
.tile--sun { --tile: var(--sun); --tile-on: var(--ink); }
.tile--green { --tile: var(--green-deep); }
.tile--blue { --tile: var(--blue); }
.tile--coral { --tile: var(--coral-deep); }
.tile--violet { --tile: var(--violet-deep); }
/* ---------- age picker and program cards (Academics) ---------- */
.picker__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px; }
.chip {
--c: var(--blue); --c-ink: var(--blue-deep); --c-on: #fff;
min-height: 46px; padding: 0.5em 1.15em; border-radius: var(--pill); border: 2px solid var(--c);
background: #fff; color: var(--c-ink); font-family: var(--font); font-weight: 600; font-size: 1rem; cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--bounce), box-shadow 0.2s ease;
}
.chip:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--c); color: var(--c-on); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.chip--sun { --c: var(--sun); --c-ink: var(--sun-ink); --c-on: var(--ink); }
.chip--green { --c: var(--green-deep); --c-ink: var(--green-deep); }
.chip--coral { --c: var(--coral-deep); --c-ink: var(--coral-ink); }
.chip--violet { --c: var(--violet-deep); --c-ink: var(--violet-ink); }
.programs { display: grid; gap: 20px; }
@media (min-width: 720px) { .programs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .programs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.programs.is-filtered { grid-template-columns: minmax(0, 1fr); max-width: 940px; }
.program {
--tile: var(--blue); --tile-ink: var(--blue-deep);
position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 24px 24px;
background: #fff; border-radius: var(--r); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden;
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.program:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--tile), var(--shadow); }
.program__photo { margin: 0 -24px 14px; aspect-ratio: 16 / 10; border-radius: 0; }
.program__ages { align-self: flex-start; margin: 0; padding: 3px 12px; border-radius: var(--pill); font-size: 0.82rem; font-weight: 600; background: color-mix(in srgb, var(--tile) 16%, #fff); color: var(--tile-ink); }
.program h3 { margin: 4px 0 0; color: var(--blue-ink); }
.program p { margin: 0; }
.program ul { margin: 6px 0 14px; padding-left: 0; list-style: none; color: var(--ink-soft); }
.program li { position: relative; padding-left: 22px; margin: 4px 0; }
.program li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 3px; rotate: 45deg; background: var(--tile); }
.program .btn { align-self: flex-start; margin-top: auto; }
.program--sun { --tile: var(--sun); --tile-ink: var(--sun-ink); }
.program--green { --tile: var(--green); --tile-ink: var(--green-deep); }
.program--blue { --tile: var(--blue); --tile-ink: var(--blue-deep); }
.program--coral { --tile: var(--coral); --tile-ink: var(--coral-ink); }
.program--violet { --tile: var(--violet); --tile-ink: var(--violet-ink); }
.program[hidden], .programs .program[hidden] { display: none; }
.programs .program.pop { animation: pop 0.45s var(--bounce) both; }
@media (min-width: 720px) {
.programs.is-filtered .program:not([hidden]) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; row-gap: 8px; align-content: start; padding: 0 32px 0 0; }
.programs.is-filtered .program > * { grid-column: 2; }
.programs.is-filtered .program__photo { grid-column: 1; grid-row: 1 / span 6; margin: 0; aspect-ratio: auto; height: 100%; min-height: 340px; }
.programs.is-filtered .program__ages { margin-top: 32px; justify-self: start; }
.programs.is-filtered .program .btn { justify-self: start; margin-bottom: 32px; }
}
/* ---------- stats (on a blue band) ---------- */
.stats { display: grid; gap: 36px; }
@media (min-width: 720px) { .stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 40px; } }
.stat { position: relative; padding-top: 22px; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 5px; border-radius: 5px; background: var(--green-light); }
.stat:nth-child(2)::before { background: var(--sun); }
.stat:nth-child(3)::before { background: var(--coral); }
.stat__num {
display: block; margin: 0 0 6px;
font-size: clamp(3.2rem, 2.2rem + 3.6vw, 5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
color: #fff;
}
.stat h3 { margin-bottom: 0.3em; color: #fff; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.stat p:not(.stat__num) { margin: 0; color: rgba(255,255,255,0.88); max-width: 30ch; font-size: 1em; }
/* ---------- cards and icons ---------- */
.method { display: grid; gap: 20px; margin-top: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.method__item, .card {
--tone: var(--accent);
position: relative; background: #fff; border-radius: var(--r); padding: 28px; overflow: hidden;
box-shadow: var(--shadow-sm); border: 1px solid var(--line);
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease, border-color 0.3s ease;
}
.method__item::after, .card::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--tone);
transform: scaleX(0.18); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.method__item:hover, .card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 20px 40px color-mix(in srgb, var(--tone) 22%, rgba(14,42,92,0.08)); border-color: color-mix(in srgb, var(--tone) 40%, #fff); }
.method__item:hover::after, .card:hover::after { transform: scaleX(1); }
.method__item:has(.icon--blue), .card:has(.icon--blue) { --tone: var(--blue); }
.method__item:has(.icon--sun), .card:has(.icon--sun) { --tone: var(--sun-deep); }
.method__item:has(.icon--green), .card:has(.icon--green) { --tone: var(--green); }
.method__item:has(.icon--coral), .card:has(.icon--coral) { --tone: var(--coral); }
.method__item:has(.icon--violet), .card:has(.icon--violet) { --tone: var(--violet); }
.method__item strong { display: block; color: var(--blue-ink); font-size: 1.3rem; line-height: 1.3; margin-bottom: 8px; }
.method__item p { margin: 0; color: var(--ink-soft); }
.icon {
--ic: var(--blue);
width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px;
background: var(--ic); color: #fff; rotate: -6deg; box-shadow: 5px 5px 0 color-mix(in srgb, var(--ic) 28%, transparent);
transition: rotate 0.45s var(--bounce), scale 0.45s var(--bounce);
}
.icon svg { width: 28px; height: 28px; }
.icon--sun { --ic: var(--sun); color: var(--ink); rotate: 5deg; }
.icon--green { --ic: var(--green-deep); }
.icon--coral { --ic: var(--coral-deep); rotate: 4deg; }
.icon--violet { --ic: var(--violet-deep); }
:hover > .icon { rotate: 8deg; scale: 1.1; }
:hover > .icon--sun, :hover > .icon--coral { rotate: -8deg; }
.cards { display: grid; gap: 20px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card h3 { margin-bottom: 0.35em; color: var(--blue); }
.card p:last-child { margin-bottom: 0; }
.card--green { background: var(--green-deep); color: #fff; border: 0; --tone: var(--green-light); }
.card--green h3 { color: #fff; }
.card--blue { background: var(--blue); color: #fff; border: 0; --tone: var(--green-light); }
.card--blue h3 { color: #fff; }
.card .photo { margin: -28px -28px 18px; border-radius: 0; }
.card__tag { display: inline-block; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stage-ink); background: color-mix(in srgb, var(--stage-tint) 70%, #fff); padding: 4px 12px; border-radius: var(--pill); margin-bottom: 12px; }
.card .icon { margin-bottom: 14px; }
.card-stack { display: grid; gap: 18px; align-content: start; }
/* ---------- gallery: polaroids with tape, a swipe strip on phones ---------- */
.gallery { display: grid; gap: 26px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery .photo {
aspect-ratio: 1; border-radius: 10px; border: 8px solid #fff; border-bottom-width: 30px; box-shadow: var(--shadow);
cursor: zoom-in; transition: rotate 0.4s var(--bounce), scale 0.4s var(--bounce), box-shadow 0.3s ease;
}
.gallery .photo::before { content: ""; position: absolute; z-index: 2; top: 6px; left: 50%; width: 64px; height: 20px; margin-left: -32px; rotate: -5deg; background: rgba(255, 200, 87, 0.75); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.gallery .photo:nth-child(4n+1) { rotate: -2.5deg; }
.gallery .photo:nth-child(4n+2) { rotate: 1.8deg; }
.gallery .photo:nth-child(4n+2)::before { background: rgba(156, 198, 74, 0.75); rotate: 4deg; }
.gallery .photo:nth-child(4n+3)::before { background: rgba(255, 111, 89, 0.65); }
.gallery .photo:nth-child(4n)::before { background: rgba(124, 92, 255, 0.5); rotate: 3deg; }
.gallery .photo:nth-child(4n+3) { rotate: -1deg; }
.gallery .photo:nth-child(4n) { rotate: 2.5deg; }
.gallery .photo:hover, .gallery .photo:focus-visible { rotate: 0deg; scale: 1.06; z-index: 3; box-shadow: var(--shadow-pop); }
.gallery__hint { margin: 20px 0 0; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
/* ---------- collage ---------- */
/* A handful of photos pinned up together rather than laid out in a grid: the
three internships, one experiment from three angles, the posters a class
made. Prints overlap and sit at different angles, so the group reads as one
thing. Under about 640px the third print wraps and centres itself, which
keeps the pinned-up look instead of shrinking everything to stamps. */
.collage {
--shot: 3 / 4;
display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
gap: 4px; margin-top: clamp(22px, 3vw, 34px);
}
.collage--wide { --shot: 4 / 3; }
/* four landscape prints read better as a block of two by two than as a thin
row of four, so this caps the cluster rather than the prints */
.collage--2up { max-width: 640px; margin-inline: auto; }
.collage--2up .photo { flex-basis: clamp(152px, 42vw, 300px); }
/* posters and other artwork keep their own proportions instead of being cropped
(two classes, so it outranks `.collage .photo` below) */
.collage.collage--art .photo { aspect-ratio: auto; }
.collage.collage--art .photo img { height: auto; object-fit: contain; }
.collage .photo {
flex: 0 1 clamp(152px, 26vw, 258px); aspect-ratio: var(--shot);
border: 7px solid #fff; border-bottom-width: 22px; border-radius: 8px;
box-shadow: var(--shadow); cursor: zoom-in;
transition: rotate 0.4s var(--bounce), scale 0.4s var(--bounce), box-shadow 0.3s ease;
}
.collage .photo::before {
/* the tape scales with the print, so a small one is not half covered by it */
content: ""; position: absolute; z-index: 2; top: 5px; left: 50%;
width: 24%; max-width: 58px; height: 16px; translate: -50% 0; rotate: -5deg;
background: rgba(255, 200, 87, 0.75); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.collage .photo:nth-child(3n+1) { rotate: -3.2deg; }
.collage .photo:nth-child(3n+2) { rotate: 1.6deg; margin-top: 18px; z-index: 2; }
.collage .photo:nth-child(3n+2)::before { background: rgba(156, 198, 74, 0.75); rotate: 4deg; }
.collage .photo:nth-child(3n) { rotate: 2.8deg; }
.collage .photo:nth-child(3n)::before { background: rgba(255, 111, 89, 0.65); rotate: 2deg; }
.collage .photo:hover, .collage .photo:focus-visible { rotate: 0deg; scale: 1.05; z-index: 5; box-shadow: var(--shadow-pop); }
.collage__credit { margin: 18px 0 0; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
.collage__credit strong { color: var(--blue-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.collage .photo { transition: none; }
.collage .photo:hover, .collage .photo:focus-visible { rotate: 0deg; scale: 1; }
}
@media (max-width: 719px) {
.gallery {
display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter) 26px; scroll-padding-inline: var(--gutter);
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .photo { flex: 0 0 min(72%, 300px); scroll-snap-align: center; }
.gallery__hint { margin-top: 4px; }
.gallery__hint::after { content: " Swipe for more."; }
}
/* lightbox (built by main.js) */
.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(94vw, 1100px); max-height: 94svh; overflow: visible; color: #fff; }
.lightbox::backdrop { background: rgba(9, 22, 50, 0.86); backdrop-filter: blur(4px); }
.lightbox[open] { animation: pop 0.35s var(--bounce) both; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox img { max-width: 100%; max-height: 78svh; width: auto; height: auto; border-radius: 14px; border: 8px solid #fff; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.lightbox figcaption { max-width: 60ch; text-align: center; font-size: 0.95rem; line-height: 1.45; color: rgba(255,255,255,0.9); padding: 0 56px; }
.lightbox button {
position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
background: #fff; color: var(--blue-ink); box-shadow: var(--shadow); transition: scale 0.25s var(--bounce), background-color 0.2s ease;
}
.lightbox button:hover { scale: 1.1; background: var(--green-tint); }
.lightbox button svg { width: 22px; height: 22px; }
.lightbox__close { top: -18px; right: -12px; }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next { display: none; }
.lightbox__prev { left: -16px; top: calc(50% - 40px); }
.lightbox__next { right: -16px; top: calc(50% - 40px); }
@media (max-width: 719px) { .lightbox__prev, .lightbox__next { top: auto; bottom: -6px; } .lightbox__prev { left: 0; } .lightbox__next { right: 0; } .lightbox__close { right: 0; } }
/* ---------- values list ---------- */
.values { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; counter-reset: v; }
@media (min-width: 720px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .values--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.values li {
--v: var(--green-tint); --v-ink: var(--green-deep);
display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: #fff; border-radius: var(--r); padding: 24px;
box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.values li:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.values li::before {
counter-increment: v; content: counter(v, decimal-leading-zero); width: 52px; height: 52px; display: grid; place-items: center;
border-radius: 16px; font-weight: 800; font-size: 1.1rem; color: var(--v-ink); background: var(--v); rotate: -5deg;
transition: rotate 0.4s var(--bounce);
}
.values li:hover::before { rotate: 6deg; }
.values li:nth-child(4n+2) { --v: var(--blue-tint); --v-ink: var(--blue-deep); }
.values li:nth-child(4n+3) { --v: var(--sun-tint); --v-ink: var(--sun-ink); }
.values li:nth-child(4n) { --v: var(--violet-tint); --v-ink: var(--violet-ink); }
.values li:nth-child(even)::before { rotate: 5deg; }
.values strong { font-size: 1.2rem; display: block; color: var(--blue-ink); }
.values p { margin: 4px 0 0; color: var(--ink-soft); }
/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: s; }
.steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; }
.steps li::before {
counter-increment: s; content: counter(s); width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
background: var(--blue); color: #fff; font-weight: 800; font-size: 1.5rem; rotate: -6deg; box-shadow: 5px 5px 0 rgba(17,109,255,0.2);
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 28px; top: 70px; bottom: -22px; border-left: 3px dashed var(--line); }
.steps li:nth-child(2)::before { background: var(--green-deep); rotate: 5deg; box-shadow: 5px 5px 0 rgba(72,151,29,0.2); }
.steps li:nth-child(3)::before { background: var(--sun); color: var(--ink); rotate: -4deg; box-shadow: 5px 5px 0 rgba(245,166,35,0.25); }
.steps li:nth-child(4)::before { background: var(--coral-deep); rotate: 6deg; box-shadow: 5px 5px 0 rgba(210,69,47,0.2); }
.steps strong { font-size: 1.3rem; display: block; color: var(--blue-ink); margin: 4px 0 4px; }
.steps p { margin: 0; }
/* ---------- FAQ ---------- */
.faq details {
background: #fff; border: 2px solid var(--line); border-radius: var(--r); margin-bottom: 12px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq details:hover { border-color: var(--accent-tint); }
.faq details[open] { border-color: var(--accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 16%, transparent); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 64px 18px 22px; position: relative; font-weight: 600; font-size: 1.12rem; line-height: 1.4; color: var(--blue-ink); border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; position: absolute; right: 16px; top: 50%; margin-top: -17px; width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 50%; background: var(--accent-pale); color: var(--accent-ink); font-size: 1.5rem; font-weight: 500; line-height: 1;
transition: rotate 0.35s var(--bounce), background-color 0.25s ease, color 0.25s ease;
}
.faq details[open] summary::after { rotate: 135deg; background: var(--accent); color: #fff; }
.faq details > *:not(summary) { margin: 0; padding: 0 22px 20px; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.95em; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; background: var(--accent-pale); color: var(--blue-ink); }
tbody tr { transition: background-color 0.15s ease; }
tbody tr:hover { background: #FAFCFF; }
tr:last-child td { border-bottom: 0; }
.fees-table { min-width: 640px; }
.fees-table th { vertical-align: bottom; }
.fees-table th.group { text-align: center; border-bottom: 2px solid var(--accent-tint); }
.fees-table th small, .fees-table td small { display: block; font-size: 0.8em; font-weight: 500; color: var(--ink-soft); }
.fees-table td:first-child { font-weight: 600; color: var(--blue-ink); }
.fees-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fees-table td.num { font-weight: 500; }
.fees-table .muted { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.fees-table__group td { background: var(--accent-pale); color: var(--accent-ink) !important; font-weight: 700; padding-top: 10px; padding-bottom: 8px; }
.fees-table__group td small { display: inline; margin-left: 8px; }
.table-note { font-size: 0.95em; color: var(--ink-soft); margin: 14px 0 0; max-width: 80ch; }
.table-note.center { margin-inline: auto; margin-top: 24px; }
.table-note--gap { margin-top: 24px; }
.swipe-hint { display: block; font-size: 0.82em; color: var(--ink-soft); margin: 8px 0 0; }
@media (min-width: 900px) { .swipe-hint { display: none; } }
/* quarterly price cards (fees page), top bar in the stage colour */
.prices { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.price {
--p: var(--blue); --p-ink: var(--blue-deep);
position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: var(--r);
background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden;
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.price::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--p); }
.price:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: 0 18px 36px color-mix(in srgb, var(--p) 25%, rgba(14,42,92,0.08)); }
.price__name { font-weight: 700; font-size: 1.2rem; color: var(--blue-ink); line-height: 1.2; }
.price__ages { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 14px; }
.price__amount { margin-top: auto; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.price__per { font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.price--sun { --p: var(--sun); --p-ink: var(--sun-ink); }
.price--green { --p: var(--green); --p-ink: var(--green-deep); }
.price--blue { --p: var(--blue); --p-ink: var(--blue-deep); }
.price--coral { --p: var(--coral); --p-ink: var(--coral-ink); }
/* fee tables stack into one card per row on phones */
@media (max-width: 719px) {
.table-wrap:has(.fees-table) { overflow: visible; background: none; box-shadow: none; border: 0; border-radius: 0; }
.table-wrap:has(.fees-table) + .swipe-hint { display: none; }
.fees-table { min-width: 0; }
.fees-table thead { display: none; }
.fees-table, .fees-table tbody, .fees-table tr, .fees-table td { display: block; width: 100%; }
.fees-table tr { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); margin-bottom: 12px; overflow: hidden; }
.fees-table td { border: 0; padding: 8px 16px; }
.fees-table td:first-child { padding: 14px 16px 10px; font-size: 1.05em; border-bottom: 1px solid var(--line); background: var(--accent-pale); }
.fees-table td.num { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
.fees-table td.num::before { content: attr(data-label); text-align: left; color: var(--ink-soft); font-weight: 500; }
.fees-table td.num:last-child { padding-bottom: 14px; }
.fees-table td[colspan]:not(:first-child) { padding: 12px 16px 14px; }
.fees-table tbody tr:hover { background: #fff; }
.fees-table tr.fees-table__group { background: none; border: 0; box-shadow: none; margin: 22px 0 8px; }
.fees-table tr.fees-table__group td { background: none; padding: 0 4px; border: 0; font-size: 1.1em; }
.fees-table__group td small { display: block; margin: 2px 0 0; }
}
.checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 40px; }
.checklist li::before {
content: ""; position: absolute; left: 0; top: 0.15em; width: 26px; height: 26px; border-radius: 9px; rotate: -6deg;
background: var(--green) url("data:image/svg+xml;utf8,
") center / 16px no-repeat;
}
.checklist li:nth-child(3n+2)::before { background-color: var(--blue); rotate: 5deg; }
.checklist li:nth-child(3n)::before { background-color: var(--sun-deep); rotate: -2deg; }
.checklist strong { color: var(--blue-ink); }
/* The Family Guidebook card (families/handbook): the PDF's cover as a small tilted booklet beside
its title and buttons, then what is inside, each line opening the PDF at its page. */
.guidebook { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px 26px; align-items: start; }
.guidebook__cover { display: block; margin-top: 4px; rotate: -3deg; transition: rotate 0.4s var(--bounce), scale 0.4s var(--bounce); }
.guidebook__cover:hover { rotate: 0deg; scale: 1.04; }
.card .guidebook__cover .photo { margin: 0; aspect-ratio: 1241 / 1755; border-radius: 6px; box-shadow: 0 14px 30px rgba(14, 42, 92, 0.22), 0 0 0 1px var(--line); }
.guidebook h3 { color: var(--green-deep); }
.guidebook__meta { font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); }
.guidebook__do { display: flex; flex-wrap: wrap; gap: 10px; }
.guidebook__inside { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); }
.guidebook__head { margin: 0 0 6px; font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
.guidebook__inside ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.guidebook__inside li { break-inside: avoid; }
.guidebook__inside a { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 0; color: var(--ink); font-size: 0.94rem; line-height: 1.3; text-decoration: none; }
.guidebook__inside a:hover { color: var(--blue); }
.guidebook__inside a span { flex: none; width: 2.6em; font-size: 0.8rem; font-weight: 700; color: var(--green-deep); }
@media (max-width: 479px) {
.guidebook { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.guidebook__cover { width: 124px; margin-left: 6px; }
.guidebook__inside ol { columns: 1; }
}
/* ---------- schedule: the day at a glance, and one card per stage ----------
Stage colours are the one place where all five colours sit together, because they name the stages. */
.dayplan__row, .sday { --s: var(--blue); --s-on: #fff; --s-ink: var(--blue-deep); --s-tint: var(--blue-tint); --s-pale: var(--blue-pale); }
.dayplan__row--sun, .sday--sun { --s: var(--sun); --s-on: var(--ink); --s-ink: var(--sun-ink); --s-tint: var(--sun-tint); --s-pale: var(--sun-pale); }
.dayplan__row--green, .sday--green { --s: var(--green-deep); --s-ink: var(--green-deep); --s-tint: var(--green-tint); --s-pale: var(--green-pale); }
.dayplan__row--coral, .sday--coral { --s: var(--coral-deep); --s-ink: var(--coral-ink); --s-tint: var(--coral-tint); --s-pale: var(--coral-pale); }
.dayplan { margin: var(--s-5) 0 0; }
.dayplan__key { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-small); color: var(--ink-soft); }
.dayplan__key li { display: inline-flex; align-items: center; gap: 10px; }
.key { flex: none; width: 34px; height: 14px; border-radius: 5px; }
.key--core { background: linear-gradient(90deg, var(--sun) 0 25%, var(--green-deep) 25% 50%, var(--blue) 50% 75%, var(--coral-deep) 75%); }
.key--spec {
background:
repeating-linear-gradient(135deg, rgba(27,42,65,0.28) 0 2px, transparent 2px 6px),
linear-gradient(90deg, var(--sun-tint) 0 25%, var(--green-tint) 25% 50%, var(--blue-tint) 50% 75%, var(--coral-tint) 75%);
}
.key--rest { background: #E9EEF4; box-shadow: inset 0 0 0 1px #D6DEE8; }
.dayplan__axis, .dayplan__row { display: grid; gap: 8px; }
.dayplan__axis > span { display: none; }
@media (min-width: 720px) {
.dayplan__axis, .dayplan__row { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: center; }
.dayplan__axis > span { display: block; }
}
.dayplan__ticks { position: relative; height: 24px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dayplan__ticks span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
.dayplan__ticks span:first-child { translate: 0 0; }
@media (max-width: 479px) { .dayplan__ticks span:nth-child(even) { display: none; } }
.dayplan__row { padding: 16px 0; border-top: 1px dashed var(--line); }
.dayplan__row:last-of-type { border-bottom: 1px dashed var(--line); }
.dayplan__who { display: flex; align-items: center; gap: 14px; min-height: 44px; color: var(--blue-ink); font-weight: 700; font-size: 1.05rem; line-height: 1.25; text-decoration: none; }
.dayplan__who:hover { color: var(--blue); }
.dayplan__who small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--ink-soft); }
.dayplan__who .dot { flex: none; width: 10px; height: 10px; }
.dayplan__bar {
position: relative; height: 48px; border-radius: 12px; container-type: inline-size;
background: #F7F9FC linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 7.5) 100%;
}
.seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); padding: 0 1px; }
.seg b {
display: flex; align-items: center; height: 100%; padding: 0 12px; border-radius: 11px; overflow: hidden;
font-weight: 600; font-size: 0.74rem; line-height: 1.15; white-space: nowrap;
}
.seg em { font-style: normal; }
.seg--core b { background: var(--s); color: var(--s-on); }
.seg--spec b { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--s) 30%, transparent) 0 3px, transparent 3px 9px), var(--s-tint); color: var(--ink); }
.seg--rest b { background: #E9EEF4; color: var(--ink-soft); }
.seg__long { display: none; }
@container (min-width: 760px) {
.seg b { font-size: 0.82rem; }
.seg__long { display: inline; }
.seg__short { display: none; }
}
.dayplan figcaption { margin-top: 14px; font-size: 0.88rem; color: var(--ink-soft); }
.dayplan__row.reveal.is-in .dayplan__bar { animation: wipe 0.9s 0.15s var(--ease-out) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.daynotes { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .daynotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.daynotes li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: var(--accent-pale); font-size: 0.95rem; line-height: 1.4; }
.daynotes .icon { flex: none; width: 42px; height: 42px; border-radius: 13px; margin: 0; box-shadow: none; }
.daynotes .icon svg { width: 22px; height: 22px; }
.daynotes strong { color: var(--blue-ink); }
.stages { display: grid; gap: clamp(24px, 3vw, 36px); }
.sday {
display: grid; overflow: hidden; scroll-margin-top: 24px;
background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
@media (min-width: 960px) { .sday { grid-template-columns: 300px minmax(0, 1fr); } }
.sday:target { box-shadow: 0 0 0 4px var(--s), var(--shadow); }
.sday__rail { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 26px; background: var(--s-pale); }
.sday__photo { width: 100%; aspect-ratio: 2 / 1; margin-bottom: 18px; border-radius: var(--r); border: 6px solid #fff; box-shadow: var(--shadow-sm); rotate: -1.5deg; }
@media (min-width: 960px) { .sday__photo { aspect-ratio: 4 / 3; } }
.sday__ages { margin: 0; padding: 3px 12px; border-radius: var(--pill); background: var(--s-tint); color: var(--s-ink); font-size: 0.82rem; font-weight: 600; }
.sday h3 { margin: 10px 0 2px; color: var(--blue-ink); font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.2rem); font-weight: 700; }
.sday__groups { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
.sday__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 3px; font-size: 0.95rem; font-weight: 500; }
.sday__facts li { position: relative; padding-left: 20px; }
.sday__facts li::before { content: ""; position: absolute; left: 1px; top: 0.6em; width: 8px; height: 8px; border-radius: 3px; rotate: 45deg; background: var(--s); }
.sday__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; font-weight: 600; font-size: 0.95rem; color: var(--blue-ink); text-decoration-color: var(--s); }
.sday__body { display: grid; align-content: start; gap: clamp(22px, 3vw, 30px); padding: clamp(22px, 3vw, 36px); }
.sday__when { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; color: var(--blue-ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.sday__when .icon { flex: none; width: 40px; height: 40px; border-radius: 12px; margin: 0; box-shadow: none; }
.sday__when .icon svg { width: 21px; height: 21px; }
.sday__item { padding-top: 14px; }
.sday__item + .sday__item { margin-top: 14px; border-top: 1px dashed var(--line); }
@media (min-width: 720px) { .sday__item.has-who { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 20px; } }
.sday__who { margin: 0 0 8px; padding-top: 4px; color: var(--s-ink); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.sday__item p:not(.sday__who) { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }
.core { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.core li { padding: 6px 16px; border-radius: var(--pill); background: var(--s); color: var(--s-on); font-weight: 700; font-size: 1.02rem; line-height: 1.3; rotate: -1.5deg; }
.core li:nth-child(even) { rotate: 1.5deg; }
.core .core__join { padding: 0 2px; background: none; color: var(--ink-soft); font-weight: 500; rotate: 0deg; }
.mix { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.mix li { padding: 6px 15px; border-radius: var(--pill); background: #fff; border: 2px solid var(--s-tint); font-weight: 500; font-size: 0.92rem; line-height: 1.3; }
/* one stage's day as a timeline (program pages): down the page when narrow, across when there is room */
.dayline { container-type: inline-size; }
.dayline ol { list-style: none; padding: 0; margin: 0; display: grid; }
.dayline li { position: relative; isolation: isolate; display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 18px; align-content: start; padding-bottom: 20px; }
.dayline li::before { content: ""; position: absolute; z-index: -1; left: 37px; top: 30px; bottom: 0; border-left: 3px dotted var(--accent-tint); }
.dayline li:last-child { padding-bottom: 0; }
.dayline li:last-child::before { display: none; }
.dayline time { grid-row: span 2; align-self: start; padding: 5px 0; border-radius: var(--pill); background: var(--accent-ink); color: #fff; text-align: center; font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.dayline strong { padding-top: 3px; color: var(--blue-ink); font-size: 1.06rem; line-height: 1.3; }
.dayline span { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.4; }
@container (min-width: 820px) {
.dayline ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.dayline li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; }
.dayline li::before { left: 0; right: -16px; top: 16px; bottom: auto; border-left: 0; border-top: 3px dotted var(--accent-tint); }
.dayline time { padding: 5px 14px; margin-bottom: 10px; }
}
/* ---------- calendar ---------- */
.cal { display: grid; gap: 20px; }
@media (min-width: 720px) { .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cal__month { --m: var(--blue); background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-top: 6px solid var(--m); }
.cal__month:nth-child(5n+2) { --m: var(--green); }
.cal__month:nth-child(5n+3) { --m: var(--sun); }
.cal__month:nth-child(5n+4) { --m: var(--coral); }
.cal__month:nth-child(5n) { --m: var(--violet); }
.cal__month h3 { color: var(--blue-ink); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.cal__month h3::before { content: ""; width: 12px; height: 12px; border-radius: 4px; rotate: 45deg; background: var(--m); }
.cal__month ul { list-style: none; padding: 0; margin: 0; }
.cal__month li { padding: 9px 0; border-top: 1px dashed var(--line); }
.cal__month time { display: block; font-weight: 600; font-size: 0.88em; color: var(--ink-soft); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--pill); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--blue-pale); color: var(--ink-soft); }
.tag--no-classes { background: var(--sun-pale); color: var(--sun-ink); }
.tag--fees { background: var(--blue-tint); color: var(--blue-deep); }
.tag--early-dismissal { background: var(--coral-pale); color: var(--coral-ink); }
.tag--make-up-days { background: var(--green-pale); color: var(--green-deep); }
/* The year month by month (partials/calgrid.njk), after the office's calendar PDF. Closed days are
solid sun, as in the PDF and the "no classes" tags in the list; make-up days are the same sun,
hatched; each quarter tints its weekdays; the first and last day are green; a navy dot marks
tuition due. The key reuses the day squares as swatches. */
.calgrid { margin: clamp(26px, 3vw, 36px) 0 0; }
.calgrid__key {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0 auto 26px; padding: 0; max-width: 980px;
list-style: none; font-size: var(--t-small); font-weight: 500; color: var(--ink);
}
.calgrid__key li { display: inline-flex; align-items: center; gap: 9px; }
.calgrid__key .cd { width: 22px; flex: none; }
.calgrid__months { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .calgrid__months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .calgrid__months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calgrid__month { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.calgrid__name { margin: 0 0 10px; font-weight: 700; font-size: 1.02rem; color: var(--blue-ink); }
.calgrid__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calgrid__dow { padding-bottom: 2px; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); }
.cd {
position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px;
font-size: 0.8rem; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.cd--weekend { color: #A6B2C2; font-weight: 500; }
.cd--off { color: var(--ink-soft); font-weight: 500; }
.cd--q1 { background: var(--blue-tint); }
.cd--q2 { background: var(--green-tint); }
.cd--q3 { background: var(--violet-tint); }
.cd--q4 { background: var(--coral-tint); }
.cd--closed { background: var(--sun); color: var(--sun-ink); font-weight: 700; }
.cd--makeup {
background: repeating-linear-gradient(135deg, var(--sun-tint) 0 3px, #fff 3px 6px);
color: var(--sun-ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--sun-deep);
}
.cd--firstlast { background: var(--green-deep); color: #fff; font-weight: 700; }
.cd--fee::after {
content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
background: var(--blue-ink); box-shadow: 0 0 0 1.5px #fff;
}
.calgrid__key .cd--fee { background: var(--line); }
.cd.is-today { box-shadow: 0 0 0 2.5px var(--blue-ink); z-index: 1; }
@media (max-width: 519px) {
.calgrid__month { padding: 10px 8px; }
.calgrid__days { gap: 2px; }
.calgrid__dow { font-size: 0.6rem; letter-spacing: 0; }
.cd { border-radius: 5px; font-size: 0.7rem; }
.cd--fee::after { top: 1px; right: 1px; width: 5px; height: 5px; }
.calgrid__key { justify-content: flex-start; gap: 8px 16px; }
}
/* ---------- student writing (/writing/) ----------
The blog's list is a card per post; a post is the student's words on a sheet of ruled paper,
with their own pictures taped beside it. The ruled lines and the text share one line height
(--line), so every line of writing sits on a rule. */
.posts { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card > a {
display: flex; flex-direction: column; height: 100%; overflow: hidden;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
color: inherit; text-decoration: none; transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.post-card > a:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.post-card .photo img { object-position: top; }
.post-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 22px; }
.post-card__kind {
align-self: start; padding: 4px 12px; border-radius: var(--pill); background: var(--blue-pale); color: var(--blue-deep);
font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.post-card h2 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.3; color: var(--blue-ink); }
.post-card__by { font-size: var(--t-small); font-weight: 500; color: var(--ink-soft); }
.post-card__sum { font-size: 0.96rem; color: var(--ink); }
.post-card__more { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--blue-deep); }
.post-card__more::after { content: " →"; }
.phero--post { padding-bottom: clamp(76px, 9vw, 120px); }
.post-head { position: relative; z-index: 1; max-width: 900px; }
.post-head h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.08; letter-spacing: 0.01em; white-space: pre-wrap; }
.post-head .eyebrow a { color: inherit; text-decoration: none; }
.post-head .eyebrow a:hover { text-decoration: underline; }
.post-head__by { margin: 18px 0 0; font-weight: 500; color: var(--on-hero-soft); }
.post-head__by strong { color: var(--on-hero); }
.phero--post + section { padding-top: var(--section-tight); }
.post__grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 960px) { .post__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; } }
.post__paper {
--line: 1.9rem; --margin: 52px;
position: relative; max-width: 720px; margin: 0; padding: var(--line) clamp(20px, 3vw, 36px) var(--line) calc(var(--margin) + 22px);
border-radius: 6px 18px 18px 6px; box-shadow: var(--shadow);
background:
linear-gradient(90deg, transparent calc(var(--margin) - 1px), var(--coral-tint) calc(var(--margin) - 1px) calc(var(--margin) + 1px), transparent calc(var(--margin) + 1px)),
repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--blue-tint) calc(var(--line) - 1px) var(--line))
#fff;
background-position: 0 0, 0 calc(var(--line) - 0.32rem);
font-size: 1.04rem; line-height: var(--line); letter-spacing: 0.03em; color: var(--ink);
}
.post__paper h2 { margin: var(--line) 0 0; font-size: 1em; line-height: var(--line); font-weight: 700; letter-spacing: 0.05em; color: var(--blue-deep); white-space: pre-wrap; }
.post__paper h2:first-child { margin-top: 0; }
.post__paper p { margin: 0; white-space: pre-wrap; }
@media (max-width: 559px) {
.post__paper { --line: 1.75rem; --margin: 30px; font-size: 0.95rem; letter-spacing: 0.02em; padding-left: calc(var(--margin) + 14px); }
}
.post__art { display: grid; gap: 30px; justify-items: center; }
@media (min-width: 960px) { .post__art { position: sticky; top: calc(var(--header-h) + 12px); } }
.post__fig { margin: 0; width: 100%; }
.post__fig .photo { border: 7px solid #fff; border-radius: 10px; box-shadow: var(--shadow); }
.post__project { aspect-ratio: 5 / 2; rotate: 1.5deg; }
.post__poster { aspect-ratio: 1080 / 1920; rotate: -2deg; }
.post__fig--poster { max-width: 290px; }
.post__fig figcaption { margin-top: 10px; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
.post-note .collage__credit { text-align: center; }
.post-note__back { font-weight: 600; }
.post-note__back::before { content: "← "; }
/* ---------- Google reviews ----------
Home: a compact carousel (partials/reviews-carousel.njk), one line from each review on a taped
white card that sits on a small stack of notes. About: every review in full
(partials/reviews.njk), each card led by the same line, with that line marked in the text like a
highlighter pen. Both show the listing's rating as a white badge (partials/rating.njk). Stars
are text with a sun overlay cut to --fill, so 4.6 shows as 4.6. */
.rating {
justify-self: start; display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px 14px 18px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
color: var(--ink); text-decoration: none; transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.rating:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }
.rating__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--blue-ink); }
.rating__side { display: grid; gap: 3px; }
.rating__count { font-size: var(--t-small); font-weight: 600; }
.rating__all { font-size: 0.82rem; font-weight: 600; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.stars { position: relative; display: inline-block; font-size: 1.25rem; line-height: 1; letter-spacing: 2px; color: var(--line); }
.stars::before { content: "★★★★★"; }
.stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--fill, 100%); overflow: hidden; white-space: nowrap; color: var(--sun-deep); }
.stars--small { font-size: 1rem; }
/* home: the carousel */
.quotes-band { overflow: hidden; }
.quotes { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
.quotes__stage { min-width: 0; }
@media (min-width: 900px) { .quotes { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 64px; } }
.quotes__intro h2 { margin-bottom: 20px; }
.quotes__all { margin: 18px 0 0; font-weight: 600; }
.quotes__all a::after { content: " →"; }
.quotes__deck { position: relative; margin: 14px 6px 0; }
/* two notes peeking out from under the card, and a strip of tape holding it up */
.quotes__deck::before, .quotes__deck::after { content: ""; position: absolute; border-radius: var(--r-lg); pointer-events: none; }
.quotes__deck::before { inset: 10px -12px -14px 16px; background: var(--green-tint); rotate: 2.6deg; }
.quotes__deck::after { inset: 6px 10px -8px -10px; background: #fff; border: 1px solid var(--line); rotate: -2deg; }
.quotes__track {
position: relative; z-index: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin: 0; padding: 0; list-style: none; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow);
overscroll-behavior-x: contain;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__tape {
position: absolute; z-index: 2; top: -13px; left: 50%; width: 112px; height: 28px; margin-left: -56px;
background: rgba(156, 198, 74, 0.78); rotate: -3deg; border-radius: 3px; box-shadow: 0 2px 6px rgba(14, 42, 92, 0.12);
}
.quote {
flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
padding: clamp(30px, 3.6vw, 44px) clamp(24px, 4vw, 50px) clamp(22px, 3vw, 32px);
}
.quote__text { margin: 0; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: 500; line-height: 1.45; color: var(--blue-ink); }
.quote__text::before { content: "“"; display: block; height: 0.5em; margin-bottom: 8px; font-family: Georgia, "Times New Roman", serif; font-size: 4em; font-weight: 700; line-height: 1; color: var(--green); }
.quote__text p { margin: 0; }
.quote__who { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: auto 0 0; padding-top: 6px; font-size: var(--t-small); }
.quote__who strong { color: var(--blue-ink); }
.quote__who span { color: var(--ink-soft); }
.quotes__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.quotes__arrow {
display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
background: #fff; color: var(--blue-deep); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-sm);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s var(--bounce);
}
.quotes__arrow:hover { background: var(--blue); color: #fff; transform: scale(1.06); }
.quotes__arrow svg { width: 20px; height: 20px; }
.quotes__dots { display: flex; margin: 0; }
.quotes__dots button { position: relative; width: 20px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.quotes__dots button::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--pill);
background: color-mix(in srgb, var(--blue) 28%, #fff); transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out), background-color 0.2s ease;
}
.quotes__dots button[aria-current]::before { width: 18px; margin-left: -9px; background: var(--blue); }
@media (max-width: 519px) { .quotes__dots button { width: 15px; } .quotes__dots button[aria-current]::before { width: 14px; margin-left: -7px; } }
/* About: every review in full */
.reviews-head { display: grid; gap: 22px 40px; align-items: end; margin-bottom: clamp(26px, 3vw, 38px); }
@media (min-width: 900px) { .reviews-head { grid-template-columns: minmax(0, 1fr) auto; } }
.reviews-head .lede { margin-bottom: 0; max-width: 46ch; }
.reviews { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 22px; }
@media (min-width: 720px) { .reviews { columns: 2; } }
@media (min-width: 1040px) { .reviews { columns: 3; } }
.review {
--bar: var(--blue);
position: relative; overflow: hidden; break-inside: avoid; margin: 0 0 22px; padding: 26px 24px 20px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
.review:nth-child(5n+2) { --bar: var(--green); }
.review:nth-child(5n+3) { --bar: var(--sun-deep); }
.review:nth-child(5n+4) { --bar: var(--coral); }
.review:nth-child(5n) { --bar: var(--violet); }
.review::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--bar); }
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review .stars { margin-bottom: 12px; }
.review__pull { margin: 0 0 14px; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--blue-ink); }
.review__text { font-size: 0.92rem; line-height: 1.62; color: var(--ink-soft); }
.review__text p { margin: 0 0 0.7em; }
.review__text p:last-child { margin-bottom: 0; }
.review__mark { padding: 0 2px; color: var(--ink); background: linear-gradient(transparent 52%, var(--sun-tint) 52%, var(--sun-tint) 92%, transparent 92%); }
.review.is-long:not(.is-open) .review__text {
max-height: calc(1.62em * 5); overflow: hidden;
-webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
}
.review__more {
margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--blue-deep);
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
.review__who { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--t-small); }
.review__who strong { color: var(--blue-ink); }
.review__who span { color: var(--ink-soft); }
.reviews__hint { display: none; margin: 0; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 719px) {
.reviews {
display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
}
.reviews::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(86%, 380px); margin: 0; scroll-snap-align: center; }
.reviews__hint { display: block; }
}
/* ---------- events: the year in order, month badges on a dashed line ---------- */
.months { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px; }
.months::-webkit-scrollbar { display: none; }
.months a {
flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0.35em 1.1em; border-radius: var(--pill);
border: 2px solid var(--m); background: #fff; color: var(--ink); font-weight: 600; text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--bounce);
}
.months a:hover { background: var(--m); color: var(--m-on); transform: translateY(-3px) rotate(-2deg); }
.events__hint { margin: 4px 0 clamp(36px, 5vw, 56px); text-align: left; color: var(--ink-soft); }
.year { list-style: none; padding: 0; margin: 0; position: relative; }
/* One section per academic year; the newest comes first */
.season + .season { margin-top: clamp(72px, 10vw, 128px); padding-top: clamp(40px, 6vw, 64px); border-top: 3px dashed var(--line); }
.season__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 clamp(20px, 3vw, 32px); }
.season__title span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
/* data-c (0 to 4) cycles blues and greens; a month chip carries the colour of the event it jumps to */
.event, .months a { --m: var(--blue-deep); --m-ink: var(--blue-deep); --m-on: #fff; }
.event[data-c="1"], .months a[data-c="1"] { --m: var(--green-deep); --m-ink: var(--green-deep); }
.event[data-c="2"], .months a[data-c="2"] { --m: var(--sun); --m-ink: var(--sun-ink); --m-on: var(--ink); }
.event[data-c="3"], .months a[data-c="3"] { --m: var(--coral-deep); --m-ink: var(--coral-ink); }
.event[data-c="4"], .months a[data-c="4"] { --m: var(--violet-deep); --m-ink: var(--violet-ink); }
.event { position: relative; padding-bottom: clamp(52px, 7vw, 92px); scroll-margin-top: 24px; }
.event:last-child { padding-bottom: 0; }
.event__when {
display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 14px; padding: 6px 15px; border-radius: var(--pill);
background: var(--m); color: var(--m-on); font-weight: 700; font-size: 0.8rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em;
}
.event__yr { font-weight: 500; opacity: 0.85; }
.event h2 { margin-bottom: 0.2em; }
.event__date { font-weight: 600; color: var(--m-ink); margin-bottom: 0.7em; }
.event__body > p { max-width: 62ch; }
.event__summary { font-size: 1.08em; font-weight: 500; }
.event__did-title { margin: 1.1em 0 0.6em; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--m-ink); }
.event__did { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 62ch; }
.event__did li { position: relative; padding-left: 28px; }
.event__did li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 12px; border-radius: 4px; rotate: 45deg; background: var(--m); }
.event .gallery { margin-top: 30px; }
.gallery--event { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
.gallery--event .photo { aspect-ratio: 4 / 3; }
.event__more { margin: 1.2em 0 0; }
/* An event's own page (src/events/
.njk): sections from the stage pages, a blue charity band with stats, button rows */
.charity__links, .event-page__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }
.event-page__links { justify-content: center; }
.band--blue .charity__links .btn--white { color: var(--blue-deep); }
.charity__text { max-width: 760px; }
.charity__text p:not(.lede) { color: rgba(255,255,255,0.9); max-width: 62ch; }
.band--pale .event__did { margin: 1.2em 0; --m: var(--blue-deep); }
@media (min-width: 720px) {
.year::before { content: ""; position: absolute; left: 52px; top: 30px; bottom: 30px; border-left: 3px dashed var(--line); }
.event { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 52px); }
.event__when {
position: sticky; top: 24px; flex-direction: column; align-items: center; justify-content: center; gap: 0;
width: 106px; height: 106px; padding: 0; border-radius: 50%; rotate: -5deg;
font-size: 1.6rem; letter-spacing: -0.01em; text-transform: none;
box-shadow: 0 12px 26px color-mix(in srgb, var(--m) 35%, transparent);
transition: rotate 0.4s var(--bounce);
}
.event:nth-child(even) .event__when { rotate: 4deg; }
.event:hover .event__when { rotate: 0deg; }
.event__yr { font-size: 0.8rem; letter-spacing: 0.06em; }
}
/* ---------- team ---------- */
/* Each member is a cutout portrait standing on a coloured card, the way the
staff photos were done in the Wix Studio draft. The portraits are cut out,
framed and graded by scripts/portraits.py so every face is the same size, the
eyes sit on the same line and the light matches from card to card.
A member with `shots` in team.json also carries a small set of photos of them
at work: on a mouse they fan up along the bottom of the card on hover, on a
touch screen the count badge is the cue, and either way the card opens a
lightbox of the full set. */
.team { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.tcard {
position: relative; background: #fff; border-radius: var(--r-lg); overflow: hidden;
border: 1px solid var(--line); box-shadow: var(--shadow-sm);
transition: transform 0.35s var(--bounce), box-shadow 0.3s ease;
}
/* Card colours are accents, so they may cycle the full palette. */
.tcard--t1 { --a: #116DFF; --b: #1F8F73; }
.tcard--t2 { --a: #48971D; --b: #FFC857; }
.tcard--t3 { --a: #7C5CFF; --b: #116DFF; }
.tcard--t4 { --a: #FF6F59; --b: #FFC857; }
.tcard--t5 { --a: #1F8F73; --b: #9CC64A; }
.tcard--t6 { --a: #0B4FBF; --b: #7C5CFF; }
.tcard__stage { position: relative; aspect-ratio: 20 / 23; overflow: hidden; background: linear-gradient(165deg, var(--a), var(--b)); }
/* a soft light behind the head, so the cutout sits in the card instead of on it */
.tcard__stage::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(64% 52% at 50% 26%, rgba(255, 255, 255, 0.3), transparent 72%);
}
/* Anchored to the top and cropped by the card, so a portrait that stops at the
chest is cut by the card's edge instead of ending in mid-air. */
.cutout {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 0;
transition: scale 0.45s var(--bounce); transform-origin: 50% 100%;
}
.cutout--none, .tcard__initial {
position: absolute; inset: 0; display: grid; place-items: center;
color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 3rem;
}
.tcard__plate { padding: 12px 12px 15px; text-align: center; }
.tcard__plate strong { display: block; color: var(--blue-ink); font-size: 1rem; line-height: 1.25; }
.tcard__plate em { display: block; font-style: normal; font-weight: 600; color: var(--green-deep); font-size: var(--t-small); line-height: 1.3; margin-top: 3px; text-wrap: balance; }
.tcard__plate small { display: block; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.4; margin-top: 6px; text-wrap: balance; }
@media (min-width: 640px) { .tcard__plate { padding: 14px 14px 18px; } .tcard__plate small { font-size: 0.82rem; } }
/* the photos of this person at work */
.tcard__count {
position: absolute; top: 10px; right: 10px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
color: var(--blue-ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
box-shadow: 0 4px 12px rgba(9, 22, 50, 0.22);
}
.tcard__count::before {
content: ""; width: 11px; height: 9px; border-radius: 2px;
border: 1.5px solid currentColor; box-shadow: 2.5px -2.5px 0 -1.5px #fff, 2.5px -2.5px 0 0 currentColor;
}
.tcard__shots {
position: absolute; inset: auto 0 0; z-index: 1; display: flex; justify-content: center; gap: 6px;
padding: 26px 8px 10px; background: linear-gradient(to top, rgba(10, 24, 48, 0.5), transparent);
translate: 0 102%; opacity: 0; transition: translate 0.4s var(--bounce), opacity 0.25s ease;
}
.tcard__shot { width: 30%; max-width: 62px; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(9, 22, 50, 0.35); }
.tcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard__shot:first-child { rotate: -5deg; }
.tcard__shot:last-child { rotate: 5deg; }
/* the rest of the set is still in the DOM for the lightbox, just not in the fan */
.tcard__shot:nth-child(n+4) { display: none; }
/* the whole card is the control; the label is for screen readers and the keyboard */
.tcard__open { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.tcard__open:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: var(--r-lg); }
@media (hover: hover) and (pointer: fine) {
.tcard--shots:hover, .tcard--shots:focus-within { transform: translateY(-5px); box-shadow: var(--shadow); }
.tcard--shots:hover .cutout, .tcard--shots:focus-within .cutout { scale: 1.05; }
.tcard--shots:hover .tcard__shots, .tcard--shots:focus-within .tcard__shots { translate: 0 0; opacity: 1; }
.tcard--shots:hover .tcard__count, .tcard--shots:focus-within .tcard__count { opacity: 0; }
.tcard__count { transition: opacity 0.25s ease; }
}
/* On a touch screen there is no hover, so the fan is never shown and the badge stays. */
@media (hover: none) {
.tcard__shots { display: none; }
}
.team__hint { margin: 18px 0 0; text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
.tcard, .cutout, .tcard__shots { transition: none; }
.tcard--shots:hover, .tcard--shots:focus-within { transform: none; }
.tcard--shots:hover .cutout, .tcard--shots:focus-within .cutout { scale: 1; }
}
/* ---------- forms ---------- */
.form {
display: grid; gap: 18px; background: #fff; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-lg);
box-shadow: var(--shadow); border: 1px solid var(--line); border-top: 6px solid var(--accent);
}
.form label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 0.95em; }
.form input, .form select, .form textarea {
width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: #FBFDFF;
font: inherit; color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--blue-tint); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: none; background: #fff; box-shadow: 0 0 0 4px var(--blue-tint); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 600px) { .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form .btn { justify-self: start; }
.form__note { font-size: 0.9em; color: var(--ink-soft); margin: 0; }
.form[hidden], .form [hidden] { display: none; }
.form__visit { display: grid; gap: 10px; }
.form__error { color: var(--coral-ink); font-weight: 600; padding: 12px 14px; background: var(--coral-pale); border-radius: 14px; }
.form__error a { color: inherit; }
/* A slip in an email address ("gmai.com"): a warning under the box, with a button that puts it right. */
.form__slip { color: var(--sun-ink); font-weight: 600; margin-top: 6px; }
.form__slip-fix { display: inline; width: auto; min-height: 0; text-align: left; font: inherit; color: var(--blue); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* A box for robots: off the page, and out of the way of keyboards and screen readers. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__done { border-top-color: var(--green); gap: 10px; }
.form__done:focus { outline: none; }
.form__done h2 { font-size: var(--t-h3); color: var(--green-dark); margin: 0; }
.form__done p { margin: 0; }
/* ---------- enrollment form (partials/enroll-form.njk) ---------- */
.page-enroll .float-cta { display: none; } /* it would sit on the form's own buttons */
.enroll { display: grid; gap: 24px; }
.enroll__form { scroll-margin-top: 96px; } /* a new step starts below the floating header */
.enroll__top { display: grid; gap: 8px; }
.enroll__count { margin: 0; font-weight: 700; color: var(--blue-ink); }
.enroll__bar { height: 8px; border-radius: 99px; background: var(--blue-tint); overflow: hidden; }
.enroll__bar span { display: block; height: 100%; width: 20%; background: var(--blue); border-radius: inherit; transition: width 0.3s ease; }
.enroll__step { display: grid; gap: 18px; padding: 0; } /* a , but not a page band */
.enroll__step > h2 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem); margin: 6px 0 0; }
.enroll__step > h2:focus { outline: none; }
.enroll__step > h3 { margin: 14px 0 0; }
.enroll__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.enroll__nav [data-next], .enroll__nav [data-send] { margin-left: auto; }
.enroll__status { font-weight: 600; color: var(--blue-ink); }
/* Ticks and dots are not text boxes. */
.form input[type="radio"], .form input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--blue); }
.form .pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 500; cursor: pointer; }
/* A set of boxes that belong together: a parent, an address, a contact. */
.group { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 14px 18px 18px; border: 1px solid var(--line); border-radius: 18px; }
.group > legend { padding: 0 8px; font-weight: 700; color: var(--blue-ink); }
.group__opt { font-weight: 400; color: var(--ink-soft); }
.group__more { display: grid; gap: 16px; }
@media (max-width: 599px) { .group { padding: 10px 12px 14px; } } /* a box inside a box leaves little room on a phone */
/* A question answered with one tap. */
.yn { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.yn > legend { padding: 0; margin-bottom: 2px; font-weight: 600; font-size: 0.95em; }
/* A choice that comes with a paragraph to read. */
.form .choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 14px; border: 2px solid var(--line); border-radius: 14px; font-weight: 400; cursor: pointer; }
.form .choice:has(input:checked) { border-color: var(--blue); background: var(--blue-pale); }
.choice strong { display: block; margin-bottom: 2px; color: var(--blue-ink); }
/* Words a parent agrees to by sending the form. */
.declare { padding: 14px 16px; border-radius: 14px; background: var(--blue-pale); font-size: 0.92em; }
.declare h3 { margin: 0 0 6px; font-size: 1em; }
.declare p { margin: 0; }
.contract { max-height: 320px; overflow: auto; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: #FBFDFF; font-size: 0.9em; }
.contract h4 { margin: 1.1em 0 0.3em; font-size: 1em; }
.contract p { margin: 0 0 0.6em; }
.contract:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* Documents and the signature. */
.doc { display: grid; gap: 8px; justify-items: start; padding-top: 14px; border-top: 1px solid var(--line); }
.doc__ask { margin: 0; font-weight: 600; }
.doc .files, .doc .files__error { justify-self: stretch; }
.form .files__add { position: relative; display: inline-flex; margin: 0; overflow: hidden; cursor: pointer; }
.form .files__input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.files__add:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.files:empty { display: none; }
.files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 4px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.92em; }
.files li span { min-width: 0; overflow-wrap: anywhere; }
.files button { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--coral-ink); font: inherit; font-weight: 600; cursor: pointer; }
.sign { width: 100%; max-width: 640px; aspect-ratio: 16 / 5; border: 2px dashed var(--blue-light); border-radius: 14px; background: #fff; touch-action: none; cursor: crosshair; }
/* ---------- CTA block ---------- */
.cta { background: var(--blue); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.cta__inner { text-align: center; max-width: 700px; position: relative; z-index: 2; }
.cta h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.cta p { color: rgba(255,255,255,0.92); font-size: 1.05em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.cta .frond { --frond-1: #1F5C12; --frond-2: #48971D; }
.cta .frond--bl { --w: clamp(200px, 32vw, 420px); left: -10%; bottom: -14%; }
.cta .frond--tr { --w: clamp(140px, 22vw, 300px); opacity: 0.9; }
@media (max-width: 719px) { .cta .frond--tr { display: none; } }
/* ---------- footer ---------- */
.site-footer { background: var(--blue-ink); color: #fff; padding: 0 0 24px; position: relative; overflow: hidden; isolation: isolate; }
.site-footer .tape { margin-bottom: clamp(44px, 6vw, 64px); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--green-light); }
.site-footer .frond { --frond-1: #2F7D14; --frond-2: #48971D; --w: clamp(220px, 30vw, 380px); right: -8%; bottom: -12%; opacity: 0.6; filter: none; z-index: -1; }
.site-footer__grid { display: grid; gap: 32px; position: relative; z-index: 1; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }
.site-footer__logo { width: 170px; background: #fff; padding: 10px 14px; border-radius: 16px; margin-bottom: 16px; rotate: -2deg; }
.site-footer__tag { color: rgba(255,255,255,0.88); max-width: 38ch; }
.site-footer__licence { font-size: 0.9em; color: rgba(255,255,255,0.7); }
.site-footer__h { font-weight: 600; font-size: 1.05rem; margin-bottom: 10px; color: var(--green-light); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 14px; border-radius: var(--pill); background: rgba(255,255,255,0.1); text-decoration: none; font-size: var(--t-small); transition: background-color 0.2s ease, color 0.2s ease; }
.site-footer__links a:hover { background: var(--green-light); color: var(--ink); }
.site-footer__small { position: relative; z-index: 1; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.85em; color: rgba(255,255,255,0.7); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.social { display: flex; gap: 10px; margin-top: 8px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.1); transition: background-color 0.2s ease, transform 0.3s var(--bounce); }
.social a:hover { background: var(--green-deep); transform: translateY(-3px) rotate(-8deg); }
.social svg { width: 20px; height: 20px; fill: #fff; }
/* ---------- 404 ---------- */
.lost { text-align: center; padding: 150px 0 90px; }
.lost svg { width: 150px; margin: 0 auto 20px; animation: peek 4s ease-in-out infinite; }
.lost h1 { color: var(--blue); }
.lost .lede { margin-inline: auto; }
.lost__vi { margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid var(--line); font-family: "Be Vietnam Pro", var(--font); }
/* ---------- the album (/album/) ----------
Our own index of every photo the site has built, so it is denser and plainer
than the rest: a working page, not a page for families. The site header
scrolls away here and the search bar takes the sticky spot instead, since at
the top of a long grid what you want is the filter, not the menu. */
.page-album .site-header { position: static; }
.page-album .float-cta { display: none; }
.album-head { padding: var(--section-tight) 0 var(--s-2); }
.album-head h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.album-head .lede, .album-head__note { max-width: 74ch; }
.album-head__note { font-size: var(--t-small); color: var(--ink-soft); }
.album-head code, .acopy code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.78em; background: var(--blue-pale); color: var(--blue-ink);
padding: 1px 6px; border-radius: 6px; word-break: break-all;
}
.abar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-block: 1px solid var(--line); }
.abar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; }
.abar__search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 2px solid transparent; border-radius: var(--pill); background: var(--blue-pale); }
.abar__search:focus-within { border-color: var(--blue); background: #fff; }
.abar__search svg { flex: none; width: 18px; height: 18px; color: var(--blue-deep); }
.abar__search input { flex: 1; min-width: 0; padding: 11px 0; border: 0; background: none; font: inherit; font-size: 0.95rem; }
.abar__search input:focus { outline: none; }
.abar__count { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.abar__sort { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.abar__sort select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; font-size: 0.85rem; }
.album-body { padding: var(--s-3) 0 var(--section-tight); }
.afilters { display: grid; gap: 8px; }
.afilters__row { display: grid; gap: 4px; }
.afilters__label { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.afilters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 760px) {
.afilters__row { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; }
.afilters__label { padding-top: 8px; text-align: right; }
}
/* the playful chip is too big and too bouncy by the dozen */
.chip--sm { min-height: 32px; padding: 0.24em 0.8em; border-width: 1.5px; font-size: 0.82rem; }
.chip--sm:hover { transform: translateY(-2px); }
.chip--sm small { margin-left: 3px; font-size: 0.78em; opacity: 0.6; }
.album { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: var(--s-4); }
.acard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.acard[hidden] { display: none; }
.acard:hover { box-shadow: var(--shadow); }
.acard__shot { aspect-ratio: 4 / 3; border-radius: 0; cursor: zoom-in; }
.acard__shot img { transition: scale 0.4s var(--ease-out); }
.acard:hover .acard__shot img { scale: 1.03; }
.acard__body { display: grid; gap: 9px; padding: 13px 15px 15px; }
.acard__caption { margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.4; color: var(--blue-ink); }
.acard__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.atag { padding: 2px 9px; border-radius: var(--pill); font-size: 0.71rem; font-weight: 600; background: var(--green-pale); color: var(--green-deep); }
.atag--year { background: var(--blue-pale); color: var(--blue-deep); }
.atag--event { background: var(--sun-pale); color: var(--sun-ink); }
.atag--who { background: var(--violet-pale); color: var(--violet-ink); }
.acard__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 0.76rem; }
.acard__facts dt { color: var(--ink-soft); }
.acard__facts dd { margin: 0; min-width: 0; }
.acard__folder { display: block; margin-top: 2px; color: var(--ink-soft); word-break: break-all; }
.acard__used { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.acard__used a::after, .acard__used span::after { content: ","; color: var(--ink-soft); }
.acard__used a:last-child::after, .acard__used span:last-child::after { content: ""; }
.acard__used em { font-style: normal; font-weight: 600; color: var(--coral-ink); }
/* every name is a copy button: the slug to paste into a page, the path to find the original */
.acopy { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: copy; }
.acopy:hover code { background: var(--blue-tint); }
.acopy.is-copied code { background: var(--green-tint); color: var(--green-dark); }
.acopy.is-copied code::after { content: " ✓"; }
.album__empty { margin: var(--s-4) 0 0; text-align: center; color: var(--ink-soft); }
.link { padding: 0; border: 0; background: none; font: inherit; color: var(--blue-deep); text-decoration: underline; cursor: pointer; }
/* the album gives the lightbox a second line: the file name behind the photo */
.lightbox__meta { display: block; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); word-break: break-all; }
/* ---------- scroll reveal (main.js adds .reveal only to things below the fold) ---------- */
.reveal:not(.is-in) { opacity: 0; }
.reveal.is-in { animation: rise 0.8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
@media print { .reveal { opacity: 1 !important; animation: none !important; } .site-header, .float-cta, .river, .ribbons, .frond { display: none; } }
/* smooth page-to-page fades in browsers that support them */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
/* ---------- small screens ---------- */
@media (max-width: 560px) {
.hero__inner { padding-top: 130px; }
.hero__actions .btn { flex: 1 1 auto; }
.sticker { font-size: 0.8rem; padding: 7px 13px; }
.sticker--tr, .sticker--br { right: 6px; }
.sticker--tl, .sticker--bl { left: 6px; }
}
@media (max-width: 380px) {
.tiles { gap: 10px; }
.tile__label { left: 10px; right: 10px; bottom: 10px; }
}
/* ---------- reduced motion: everything lands in its final place ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-duration: 0.01ms !important;
}
.ribbon__track { transform: none !important; }
@view-transition { navigation: none; }
}