@font-face{font-family:Besley;src:url(assets/fonts/besley.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(assets/fonts/atkinson-next.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --night:#04283A;
  --navy:#073C56;
  --gold:#FFC727;
  --thread:#E8B21E;
  --ivory:#FFF8E8;
  --page:#F6ECD2;
  --ember:#F0832B;
  --on-night-soft:#C4D6DD;
  --on-ivory-soft:#2B556B;
  --display:Besley,Clarendon,Georgia,serif;
  --text:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --section:clamp(4.5rem,9vw,8rem);
  --ease:cubic-bezier(.16,1,.3,1);
  /* the thread: the only rule or divider the site uses */
  --stitch:repeating-linear-gradient(90deg,var(--thread) 0 20px,transparent 20px 32px);
  --stitch-navy:repeating-linear-gradient(90deg,var(--navy) 0 20px,transparent 20px 32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--thread) var(--night)}
body{margin:0;background:var(--night);color:var(--ivory);font:1.0625rem/1.55 var(--text);overflow-x:hidden}
::selection{background:var(--gold);color:var(--night)}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,dl,dd{margin:0}
p,li,dd{text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(2.25rem,4.3vw,4.25rem)}
h2{font-size:clamp(2rem,3.5vw,3.25rem)}
h3{font-size:1.45rem;line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:.09em}
:focus-visible{outline:3px solid var(--focus,var(--gold));outline-offset:3px;border-radius:4px}
.wrap{max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.lead{font-size:clamp(1.125rem,1.5vw,1.3rem);line-height:1.45;max-width:34em}
.skip{position:absolute;left:-999rem;top:1rem;z-index:10;padding:.6rem 1rem;border-radius:999px;background:var(--ivory);color:var(--navy);font-weight:700}
.skip:focus{left:1rem}

/* buttons */
.nb,.btn{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1.6rem;border:0;border-radius:999px;font:800 1.125rem/1.1 var(--display);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,transform .25s var(--ease)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-gold:hover{background:#FFD95E}
.btn-ivory{background:var(--ivory);color:var(--navy)}
.btn-ivory:hover{background:var(--gold)}
.btn-navy{background:var(--navy);color:var(--ivory);--focus:var(--navy)}
.btn-navy:hover{background:var(--night)}
.quiet{font-weight:700;text-decoration:underline dashed var(--thread)}
.quiet:hover{color:var(--gold)}

/* header */
.site-head{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem var(--gutter)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand-mark{width:3.1rem;height:auto}
.brand-words{display:grid;gap:.26rem;justify-items:center}
.brand-words img:first-child{height:1.5rem;width:auto}
.brand-words img:last-child{height:.6rem;width:auto}
.site-head nav,.site-foot nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.4rem)}
.site-head nav a:not(.btn),.site-foot nav a{font-weight:700;text-decoration:none}
.site-head nav a:not(.btn):hover,.site-foot nav a:hover,nav a[aria-current]:not(.btn){text-decoration:underline dashed var(--thread)}
.site-head .btn{min-height:2.6rem;padding:.45rem 1.25rem;font-size:1rem}

/* hero: the book lies open */
.hero{position:relative;min-height:max(100svh,calc(54.17vw + 4rem));overflow:hidden}
.hero-copy{position:relative;z-index:2;max-width:60rem;padding:clamp(6.5rem,13vh,8.5rem) var(--gutter) 0}
.hero h1{white-space:nowrap}
.hero .lead{margin-top:1.1rem;max-width:26em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;margin-top:1.7rem}
.scene{position:absolute;inset:auto 0 0}
.grove{width:100%;height:auto}
.grove-narrow{display:none}
.grove-names{position:absolute;inset:0;pointer-events:none}
.grove-names ul{list-style:none;padding:0}
.grove-names li{position:absolute;transform:translate(-50%,-50%);text-align:center}
.grove-names a{pointer-events:auto;display:block;max-width:8em;padding:.2em .6em;border-radius:999px;font:800 clamp(.8rem,1.15vw,1.35rem)/1.1 var(--display);color:var(--navy);text-decoration:none;transition:background-color .2s;--focus:var(--navy)}
.grove-names a:hover,.grove-names a:focus-visible{background:var(--gold)}
.pulse,.fall{opacity:0}
.hero-list{display:none;margin-top:.8rem;max-width:30em;color:var(--on-night-soft)}
.motion-toggle{position:absolute;right:var(--gutter);bottom:1rem;z-index:3;padding:.35rem .9rem;border:2px solid var(--on-night-soft);border-radius:999px;background:var(--night);color:var(--ivory);font:700 .85rem/1.2 var(--text);cursor:pointer}
.motion-toggle:hover{border-color:var(--gold)}
/* The idle motion runs through registered custom properties on purpose: it stays on the main
   thread, so a hundred quaking leaves never become a hundred compositor layers. */
@property --turn{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --lean{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --drop{syntax:"<number>";inherits:false;initial-value:0}
@property --show{syntax:"<number>";inherits:false;initial-value:0}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .btn:hover{transform:translateY(-2px)}
  .btn:active,.btn[disabled]{transform:none}
  .card:hover .band{transform:rotate(-1.2deg) translateY(-3px)}
  .sew{stroke-dasharray:1;animation:sew 2.3s linear .3s both}
  .trunk{transform-origin:0 0;animation:rise .8s var(--ease) var(--d) both}
  .bark,.knot{animation:fade .5s calc(var(--d) + .45s) both}
  .lobe{transform-box:fill-box;transform-origin:50% 100%;animation:bloom .7s var(--ease) calc(var(--d) + .5s + var(--k)*.09s) both}
  .fork{stroke-dasharray:1;animation:sew .7s var(--ease) calc(var(--d) + .8s) both}
  .lf{transform-origin:0 0;rotate:var(--turn);animation:leaf-in .5s var(--ease) calc(var(--d) + 1.05s) both,quake 5.6s ease-in-out calc(var(--q) + 3.6s) infinite}
  .sway{transform-origin:0 0;rotate:var(--lean);animation:sway 6s ease-in-out var(--sway) infinite alternate}
  .pulse{stroke-dasharray:.05 .95;opacity:var(--show);animation:pulse 7s linear 4.5s infinite}
  .fall{transform-box:fill-box;transform-origin:center;opacity:var(--show);translate:calc(var(--fx)*var(--drop)) calc(var(--fy)*var(--drop));rotate:calc(var(--drop)*330deg);animation:fall var(--t) linear var(--w) infinite}
  .is-resting .grove *,.is-paused .grove *{animation-play-state:paused}
  /* pointing at a name in the book rustles its tree */
  .hero:has([data-tree="act"]:is(:hover,:focus-visible)) .t-act .lf,
  .hero:has([data-tree="college"]:is(:hover,:focus-visible)) .t-college .lf,
  .hero:has([data-tree="regents"]:is(:hover,:focus-visible)) .t-regents .lf,
  .hero:has([data-tree="parent-university"]:is(:hover,:focus-visible)) .t-parent-university .lf,
  .hero:has([data-tree="sat"]:is(:hover,:focus-visible)) .t-sat .lf,
  .hero:has([data-tree="homework-helper"]:is(:hover,:focus-visible)) .t-homework-helper .lf{animation:leaf-in .5s var(--ease) calc(var(--d) + 1.05s) both,quake 5.6s ease-in-out calc(var(--q) + 3.6s) infinite,rustle .5s ease-in-out infinite alternate}
}
@keyframes sew{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes fade{from{opacity:0}}
@keyframes bloom{from{transform:scale(0)}}
@keyframes leaf-in{from{opacity:0;scale:0}}
@keyframes quake{0%,52%,100%{--turn:0deg}57%{--turn:15deg}61%{--turn:-12deg}65%{--turn:13deg}69%{--turn:-10deg}74%{--turn:8deg}80%{--turn:-5deg}88%{--turn:2deg}}
@keyframes rustle{from{--turn:-15deg}to{--turn:17deg}}
@keyframes sway{from{--lean:-.7deg}to{--lean:.9deg}}
@keyframes pulse{0%{stroke-dashoffset:.05;--show:0}5%{--show:1}52%{--show:1}58%,100%{stroke-dashoffset:-.95;--show:0}}
@keyframes fall{0%{--drop:0;--show:0}6%{--show:1}90%{--show:1}100%{--drop:1;--show:0}}

/* philosophy */
.roots{background:var(--gold);color:var(--navy);padding-block:var(--section);--focus:var(--navy)}
.roots-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.roots-lede{position:sticky;top:2.5rem}
.roots-lede h2{margin-bottom:1.5rem}
.roots-lede .lead+.lead{margin-top:1rem;font-family:var(--display);font-weight:800}
.principles>div{padding-block:1.7rem;background:var(--stitch-navy) top/100% 4px no-repeat}
.principles>div:first-child{padding-top:0;background:none}
.principles>div:last-child{padding-bottom:0}
.principles h3{margin-bottom:.55rem}
.principles p{max-width:36em}

/* products: sewn pages */
.products{background:var(--navy);padding-block:var(--section)}
.products .lead{margin-top:1.1rem}
.shelf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(2.25rem,4vw,3.5rem)}
.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:var(--ivory);color:var(--navy);scroll-margin-top:1.5rem;--focus:var(--navy)}
.card:target{outline:4px solid var(--gold);outline-offset:4px}
.plate{position:relative;height:clamp(15rem,22vw,19rem);overflow:hidden;background:var(--plate)}
.plate svg{width:100%;height:calc(100% - 5rem);margin-top:.6rem}
/* the one mark for "not open yet": a paper band wrapped across the image */
.band{position:absolute;inset:auto -4% 1rem;padding:.75rem 0;transform:rotate(-2.5deg);text-align:center;font:800 1.05rem/1 var(--display);color:var(--navy);background:var(--stitch) 0 5px/100% 3px no-repeat,var(--stitch) 0 calc(100% - 5px)/100% 3px no-repeat,var(--ivory);box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .35s var(--ease)}
.card-body{display:grid;gap:.95rem;align-content:start;padding:clamp(1.3rem,2.2vw,1.9rem)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.status{padding:.18rem .7rem;border:2px solid var(--navy);border-radius:999px;font-size:.9rem;font-weight:700;line-height:1.3}
.card-body>p{max-width:38em}
.leafed{list-style:none;padding:0;display:grid;gap:.45rem}
.leafed li{padding-left:1.6rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 0 22 22'%3E%3Cpath d='M0 0C8 2 11 9 8 14C6 18 2 20 0 22C-2 20-6 18-8 14C-11 9-8 2 0 0Z' fill='%23DE9F00'/%3E%3C/svg%3E") 0 .32em/.9rem no-repeat}
.card-row{flex-direction:row}
.card-row .plate{flex:0 0 44%;height:auto;min-height:15rem}
.card-row .card-body{align-content:center}
.card-row h3{font-size:1.25rem}

/* who is behind it */
.people{background:var(--ivory);color:var(--navy);padding-block:var(--section);--focus:var(--navy)}
.people-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.mascot{width:min(100%,21rem);height:auto;justify-self:center}
.people h2{margin-bottom:1.3rem}
.people .lead{margin-bottom:1.8rem}

.close{padding-block:var(--section)}
.close h2{margin-bottom:1.2rem}
.close .lead{margin-bottom:1.8rem}

/* footer */
.site-foot{padding-bottom:3rem;color:var(--on-night-soft);font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:1.4rem 3rem;align-items:center}
.foot-grid::before{content:"";grid-column:1/-1;height:4px;margin-bottom:1rem;background:var(--stitch)}
.site-foot nav{justify-content:flex-end;color:var(--ivory)}
.foot-grid p:last-child{text-align:right}
.foot-parent{display:flex;align-items:center;gap:.8rem}
.foot-parent img{width:2.75rem;height:2.75rem;flex:none}

/* about and contact */
.page-head{padding:clamp(8rem,17vh,11rem) 0 var(--section)}
.page-head h1{max-width:16em}
.page-head .lead{margin-top:1.4rem}
.founders{background:var(--ivory);color:var(--navy);padding-block:var(--section);--focus:var(--navy)}
.founders>.wrap>h2{margin-bottom:clamp(2rem,4vw,3.25rem)}
.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem)}
.founders .leafed{margin:0;gap:1rem;padding-top:1.7rem;font-weight:700;background:var(--stitch-navy) top/100% 4px no-repeat}
.story{background:var(--gold);color:var(--navy);padding-block:var(--section);--focus:var(--navy)}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.story-grid>div{display:grid;gap:1.1rem}
.story-grid p{max-width:36em}
.parent{background:var(--navy);padding-block:var(--section)}
.parent .wrap{display:grid;gap:1.4rem;justify-items:start}
.parent p{max-width:38em}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem clamp(1.5rem,4vw,3rem);width:100%;margin-block:1rem;padding-block:1.7rem;background:var(--stitch) top/100% 4px no-repeat,var(--stitch) bottom/100% 4px no-repeat}
.facts dt{font:800 1.3rem/1.15 var(--display);margin-bottom:.35rem}
.facts dd{color:var(--on-night-soft)}

.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.contact-grid .leafed{margin-top:2rem;color:var(--on-night-soft)}
.form{display:grid;gap:1.15rem;padding:clamp(1.9rem,3.2vw,2.6rem) clamp(1.25rem,3vw,2.25rem) clamp(1.4rem,3vw,2.25rem);border-radius:14px;background:var(--stitch) 0 .8rem/100% 4px no-repeat,var(--ivory);color:var(--navy);--focus:var(--navy)}
.form label{display:grid;gap:.4rem;font-weight:700}
.opt{font-weight:400;color:var(--on-ivory-soft)}
.form input,.form textarea{width:100%;padding:.7rem .85rem;border:2px solid var(--navy);border-radius:10px;background:#FFFDF8;color:var(--navy);font:inherit;font-weight:400;caret-color:var(--ember)}
.form textarea{min-height:9.5rem;resize:vertical}
.form ::placeholder{color:var(--on-ivory-soft);opacity:1}
.form input:focus-visible,.form textarea:focus-visible{outline-offset:2px;border-radius:10px}
.form input:user-invalid,.form textarea:user-invalid{border-color:#A8440B;background:#FFF1E4}
.hp{position:absolute;left:-999rem}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.form-note{font-weight:700}
.form-note.is-err{color:#8F3A08}
.form-privacy{max-width:52ch;font-size:.9rem;color:var(--on-ivory-soft)}

@media (max-width:900px){
  .grove-names{display:none}
  .hero-list{display:block}
  .roots-grid,.people-grid,.story-grid,.contact-grid,.founder-grid{grid-template-columns:minmax(0,1fr)}
  .roots-lede{position:static}
  .shelf>*{grid-column:1/-1}
  .mascot{width:13rem;justify-self:start}
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .hero{min-height:0}
  .hero h1{white-space:normal}
  .hero-copy{padding-top:6.25rem}
  .scene{position:relative;inset:auto;margin-top:1.5rem}
  .motion-toggle{bottom:.5rem}
  .grove-wide{display:none}
  .grove-narrow{display:block}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .site-foot nav{justify-content:flex-start}
  .foot-grid p:last-child{text-align:left}
}
@media (max-width:560px){
  .card-row{flex-direction:column}
  .card-row .plate{flex:none;height:15rem;min-height:0}
  .form-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:440px){
  .nav-products{display:none}
  .site-head{gap:.6rem}
  .site-head nav{gap:.8rem}
  .site-head .btn{padding:.45rem .85rem;font-size:.92rem}
  .brand-mark{width:2.6rem}
  .brand-words img:first-child{height:1.3rem}
  .brand-words img:last-child{height:.52rem}
}
@media (max-width:350px){
  .brand-words{display:none}
}