/* Tender Years Academy. Shared styles for every page; tokens and comments are in order of the home page.
Bump ?v= on the in every page when this changes, assets are cached for a day. */
/* ------------------------------------------------------------
Tokens
The brand is the sign: deep navy lettering on a light field,
one golden bear. Three grounds give the page its rhythm: ivory,
a warm sand, and navy, each used full-bleed. Display type is
Young Serif, a soft serif that echoes the sign's lettering;
everything else is Hanken Grotesk. Type is navy or light, never
coral or gold. Coral is the link underline and one button.
Backgrounds are painted with flat gradients on purpose. Forced
dark modes in some in-app browsers invert plain colours but
leave gradients alone, so the page stays light. Keep it.
------------------------------------------------------------ */
:root{
--bg:#FAFAF7;
--sand:#F2ECE1;
--ink:#082B4C;
--ink-2:rgba(8,43,76,.72);
--line:rgba(8,43,76,.14);
--navy:#082B4C;
--navy-2:#0B355D;
--on-navy:#F7F7F3;
--on-navy-2:rgba(247,247,243,.74);
--line-on-navy:rgba(247,247,243,.12);
--coral:#EB4E4B;
--coral-2:#F0625F; /* hover goes lighter: 5.8:1 with --on-coral */
--on-coral:#041426; /* navy one shade deeper: 5.1:1 on coral */
--font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
--display:"Young Serif",Georgia,serif;
--r-s:6px; --r-m:10px;
--maxw:1200px; --gutter:clamp(20px,4vw,40px);
/* Motion. Strong ease-out for anything entering; symmetric curve for movement on screen. */
--ease-out:cubic-bezier(.23,1,.32,1);
--t-fast:140ms; --t-ui:220ms;
--z-header:10; --z-menu:20; --z-skip:100;
}
@property --btn-bg{syntax:"";inherits:false;initial-value:transparent}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:only light;background:linear-gradient(var(--bg),var(--bg)) no-repeat;scroll-behavior:smooth}
body{font-family:var(--font);font-weight:400;font-size:1.125rem;line-height:1.6;color:var(--ink);background:linear-gradient(var(--bg),var(--bg)) no-repeat;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a[href^="tel:"]{white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(8,43,76,.18)}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section[id],#main{scroll-margin-top:4.5rem}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.8rem + 2.9vw,4.1rem);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,1.3rem + 2.15vw,3rem);line-height:1.1}
h3{font-weight:500;font-size:1.25rem;letter-spacing:-.008em;line-height:1.3;text-wrap:balance}
p{text-wrap:pretty;max-width:62ch}
.muted{color:var(--ink-2)}
/* Text links: underline in coral, ink stays navy. */
.link{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:1.5px;text-underline-offset:.18em;font-weight:500}
@media (hover:hover) and (pointer:fine){.link:hover{text-decoration-color:var(--ink)}}
.link,.phone,.menu a,.foot nav a,.nav a,.brand{transition:opacity var(--t-fast) ease,color var(--t-fast) ease,text-decoration-color var(--t-fast) ease}
.link:active,.phone:active,.menu a:active,.foot nav a:active,.nav a:active,.brand:active,.menu-btn:active,.cal-nav button:active{opacity:.62;transition-duration:0s}
.faq summary:active .plus::before,.faq summary:active .plus::after{background:linear-gradient(var(--ink-2),var(--ink-2)) no-repeat}
/* Buttons: one shape, two colours. Press feedback on every pressable. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:0 1.25em;border-radius:var(--r-s);font-weight:600;font-size:.9375rem;white-space:nowrap;
border:1px solid transparent;transition:--btn-bg var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--ease-out);
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{transform:scale(.98);transition-duration:80ms}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-navy{--btn-bg:var(--navy);background:linear-gradient(var(--btn-bg),var(--btn-bg)) no-repeat;color:var(--on-navy)}
.btn-coral{--btn-bg:var(--coral);background:linear-gradient(var(--btn-bg),var(--btn-bg)) no-repeat;color:var(--on-coral);font-weight:600}
@media (hover:hover) and (pointer:fine){
.btn-navy:hover{--btn-bg:var(--navy-2)}
.btn-coral:hover{--btn-bg:var(--coral-2)}
}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:linear-gradient(var(--navy),var(--navy)) no-repeat;color:var(--on-navy);padding:12px 18px;font-weight:500}
.skip:focus{left:0}
/* ---------------- Header ---------------- */
.header{position:sticky;top:0;z-index:var(--z-header);background:linear-gradient(var(--bg),var(--bg)) no-repeat;border-bottom:1px solid transparent;transition:border-color var(--t-ui) ease}
.header.scrolled{border-bottom-color:var(--line)}
.header .bar .btn-navy{opacity:0;visibility:hidden;transition:opacity var(--t-ui) ease,visibility 0s linear var(--t-ui)}
.header.scrolled .bar .btn-navy{opacity:1;visibility:visible;transition-delay:0s}
.header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:12px;font-weight:500;font-size:1.125rem;letter-spacing:-.01em}
.brand img{width:34px;height:auto}
.nav{display:flex;gap:28px;font-size:.9375rem;font-weight:500}
.nav a{position:relative;padding:6px 0;color:var(--ink-2)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:linear-gradient(var(--coral),var(--coral)) no-repeat;transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1)}}
.header-actions{display:flex;align-items:center;gap:22px}
.phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:.9375rem;color:var(--ink)}
.phone .glyph{display:none}
/* 44px hit box; the negative margin keeps the glyph on the gutter line while the box overhangs it. */
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-s);margin-right:-10px}
.menu-btn path{transform-box:fill-box;transform-origin:center;transition:transform var(--t-ui) var(--ease-out)}
.menu-btn[aria-expanded="true"] .l1{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .l2{transform:translateY(-4px) rotate(-45deg)}
/* Mobile menu: a panel under the bar. Enters fast, exits faster. */
.menu{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - 4.25rem);overflow-y:auto;overscroll-behavior:contain;z-index:var(--z-menu);background:linear-gradient(var(--bg),var(--bg)) no-repeat;border-bottom:1px solid var(--line);
padding:8px var(--gutter) 22px;flex-direction:column;
opacity:0;transform:translateY(-6px);transition:opacity 150ms ease,transform 150ms var(--ease-out);pointer-events:none}
.menu.open{opacity:1;transform:none;pointer-events:auto;transition-duration:var(--t-ui)}
.menu a:not(.btn){padding:14px 0;font-size:1.15rem;font-weight:500}
.menu a:not(.btn)+a:not(.btn){border-top:1px solid var(--line)}
.menu .btn{margin-top:14px;align-self:flex-start}
/* ---------------- Hero ---------------- */
.hero{padding:clamp(40px,7vw,96px) 0 0}
.hero-grid{display:grid;grid-template-columns:8fr 4fr;gap:clamp(28px,5vw,72px);align-items:end;padding-bottom:clamp(36px,5vw,64px)}
.hero-side p{font-size:1.25rem;line-height:1.45;color:var(--ink);max-width:30ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
/* The photograph. Enters with a settle rather than a slide: nothing here appears from nowhere. */
.hero-photo{margin:0;position:relative}
.hero-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:0}
/* Load choreography: staggered rise for the hero copy, settle for the photo. The .pre class is set
on from only when JS runs and removed on the second frame (with a timer floor), so
no-JS, crawlers, print and hidden tabs never see the hidden state. Entrances use the ease-out. */
.still .rise,.still .settle,.still .reveal{transition:none}
.pre .rise{opacity:0;transform:translateY(10px)}
.rise{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:var(--d,0ms)}
.pre .settle{opacity:0;clip-path:inset(3% 0 3% 0);transform:scale(1.015)}
.settle{clip-path:inset(0 0 0 0);transition:opacity 500ms var(--ease-out),clip-path 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:120ms}
/* ---------------- Facts line ----------------
One sentence on navy, not a strip of pipe-separated facts: the same facts, said the way a person would. */
.facts-band{background:linear-gradient(var(--navy),var(--navy)) no-repeat;color:var(--on-navy);-webkit-font-smoothing:antialiased}
.facts{font-family:var(--display);font-size:clamp(1.25rem,1rem + .9vw,1.6rem);line-height:1.35;max-width:48ch;padding:clamp(28px,4vw,48px) 0;text-wrap:pretty}
/* ---------------- Sections ---------------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
#families{padding-bottom:clamp(88px,11vw,152px)}
.sec-head{max-width:36ch}
.wrap>.sec-head{max-width:46rem}
.sec-head p{margin-top:18px;font-size:1.125rem;color:var(--ink)}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:start}
.sticky{position:sticky;top:6rem}
/* Programs: a list, not cards. Age column reads as a system, like a stage-by-stage shelf. */
.rooms{list-style:none;border-top:1px solid var(--line)}
.room{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:16px 28px;padding:26px 0;border-bottom:1px solid var(--line)}
.room .age{font-size:1rem;font-weight:500;color:var(--ink-2);padding-top:6px}
.room p{margin-top:8px;color:var(--ink);max-width:52ch}
.rooms:not(.notice) .room h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,1.1rem + 1vw,1.75rem);letter-spacing:-.01em;line-height:1.15}
/* Story */
.story{background:linear-gradient(var(--sand),var(--sand)) no-repeat;padding:0}
.story-grid{display:grid;grid-template-columns:6fr 7fr;align-items:stretch}
.story-grid img{width:100%;height:100%;min-height:560px;object-fit:cover;border-radius:0}
.story-text{padding:clamp(56px,7vw,120px) clamp(24px,6vw,96px);align-self:center;justify-self:center;max-width:680px}
.story-text p{margin-top:18px;color:var(--ink)}
.story-text p.pull{font-family:var(--display);font-size:clamp(1.45rem,2vw,1.75rem);line-height:1.3;color:var(--ink);font-weight:400;letter-spacing:-.01em;margin:40px 0 34px;max-width:none;text-wrap:balance}
.story-text p.pull span{display:inline-block}
/* Scroll reveal for the two lower photographs only. One time, and only on the image.
clip-path is deliberate: it is the settle, not a slide. It repaints, but on two images, once each. */
.reveal{clip-path:inset(0 0 0 0);transition:clip-path 600ms var(--ease-out),opacity 450ms var(--ease-out)}
.reveal.wait{opacity:0;clip-path:inset(6% 0 6% 0);transition:none}
/* Rows without titles (the year): label left, sentence right. */
.notice .age{color:var(--ink);padding-top:0}
.notice .room p{margin-top:0;color:var(--ink)}
/* Prose chapters: running text under small heads at reading measure. What you will notice, how we teach, teachers. */
.prose h3{margin-top:28px}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:10px;color:var(--ink);max-width:56ch}
.prose p+p{margin-top:12px}
.sec-head+.prose,.wrap:not(.two)>.rooms{margin-top:clamp(36px,4vw,56px)}
.prose+.people{border-top:1px solid var(--line);padding-top:32px;margin-top:40px}
/* Meals: one table, days down, meals across. On phones each day stacks with its meal named. */
.week{width:100%;border-collapse:collapse;margin-top:clamp(36px,4vw,56px);text-align:left}
.week th,.week td{vertical-align:top;padding:16px 28px 16px 0;border-bottom:1px solid var(--line);font-weight:400}
.week th{font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.week thead th{padding-top:0;padding-bottom:12px}
.week tbody th{color:var(--ink);white-space:nowrap;width:1%}
.week td{font-size:1rem;color:var(--ink)}
.week th:last-child,.week td:last-child{padding-right:0}
/* Sand ground, used as chapters: the people chapter (story, teachers, families) and the paperwork chapter (forms, good to know). */
.sand{background:linear-gradient(var(--sand),var(--sand)) no-repeat}
.story+.sand{padding-top:clamp(48px,6vw,80px)}
.sand+.sand{padding-top:clamp(24px,3vw,40px)}
/* Leadership: two short bios side by side. The portrait slot is ready for the center's own photographs. */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-m);margin-bottom:18px}
.person h3 span{display:block;font-size:1rem;font-weight:500;color:var(--ink-2);margin-top:4px}
.person p{margin-top:12px;color:var(--ink);max-width:40ch}
/* Families: three quotes set plainly and attributed plainly. The display face is the founders' voice, not the parents'. */
.quotes{border-top:1px solid var(--line)}
.quotes blockquote{padding:32px 0;border-bottom:1px solid var(--line)}
.quotes blockquote p{font-size:1.25rem;line-height:1.5;text-wrap:pretty;max-width:46ch}
.quotes cite{display:block;margin-top:16px;font-style:normal;font-size:1rem;color:var(--ink-2)}
.sec-head p.quotes-more{margin-top:22px}
/* Photograph band between the year and meals, edge to edge */
.band img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:0}
/* Forms: rows with a title, a sentence or two, and one link on the right. */
.forms-note{margin-top:22px;max-width:56ch}
.forms{list-style:none;border-top:1px solid var(--line);margin-top:clamp(36px,4vw,56px)}
.form-row{display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.form-row p{margin-top:6px;color:var(--ink);max-width:56ch}
.form-row ul{list-style:disc;margin:10px 0 0;padding-left:1.15em;color:var(--ink);max-width:56ch}
.form-row li+li{margin-top:2px}
.form-row ul+p{margin-top:10px}
.form-row .act{padding-top:2px;white-space:nowrap}
/* FAQ: native disclosure, animated with grid rows, not max-height. grid-template-rows does
trigger layout, but on one small subtree, rarely, and it needs no measured height. Deliberate. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:1.25rem;font-weight:500;letter-spacing:-.008em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:-2px}
.faq summary .plus{flex:0 0 auto;width:28px;height:28px;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:linear-gradient(var(--ink),var(--ink)) no-repeat;transform:translate(-50%,-50%);transition:transform var(--t-ui) var(--ease-out)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open]:not(.closing) summary .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease-out)}
.faq details[open] .ans{grid-template-rows:1fr}
@starting-style{.faq details[open] .ans{grid-template-rows:0fr}}
.faq .ans>div{overflow:hidden}
.faq .ans p{padding:0 0 24px;color:var(--ink);max-width:60ch}
/* Visit: the navy band, and the one place the bear appears at size. */
.visit{padding:0}
.panel{background:linear-gradient(var(--navy),var(--navy)) no-repeat;color:var(--on-navy);-webkit-font-smoothing:antialiased}
.panel .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,96px);align-items:center;padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}
.panel img{width:clamp(200px,24vw,340px);height:auto}
.panel h2{color:var(--on-navy);line-height:1.14}
.panel p{margin-top:18px;color:var(--on-navy-2);font-size:1.25rem;max-width:40ch}
.panel .acts{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:28px}
.panel .link{color:var(--on-navy)}
.panel :focus-visible{outline-color:var(--on-navy)}
@media (hover:hover) and (pointer:fine){.panel .link:hover{text-decoration-color:var(--on-navy)}}
/* Contact */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:stretch;padding:clamp(64px,8vw,110px) 0 clamp(64px,9vw,120px)}
.contact h2{margin-bottom:22px}
.contact dl{border-top:1px solid var(--line)}
.contact dl>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact dt{font-size:.9375rem;font-weight:500;color:var(--ink-2);padding-top:2px}
.contact dd{font-size:1.125rem}
.contact dd .link{font-weight:400}
.map{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);height:100%;min-height:320px}
.map iframe{width:100%;height:100%;border:0;display:block}
/* Footer: on the ground, a hairline above. */
footer{border-top:1px solid var(--line);padding:40px 0 32px;font-size:.9375rem;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:center}
.foot .brand{color:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
@media (hover:hover) and (pointer:fine){.foot nav a:hover{color:var(--ink)}}
.legal{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.9375rem}
/* ---------------- Tour booking sheet ----------------
A native