/* The Children's Nest Daycare and Preschool: "nest-rings" preset (2026-09-25).
   Identity: eight loosely woven concentric rings, one per age group in their own list,
   youngest at the centre, each carrying its group's name on wide screens. Pale sage surface
   (deliberately not cream), forest ink, twig-brown strokes, a deep egg-yolk for actions.
   No photographs, no animals, no pastel cards. One light theme, locked (plan §5 palette).
   Type: Archivo (variable 400-600, SIL OFL 1.1), vendored in assets/fonts with its licence and
   a provenance note. No CDN, no JavaScript, no third-party request.

   Contrast (WCAG 2.x relative luminance, computed for this file):
     ink #1e2b20 on nest #edf4e7 .......... 13.2:1    egg-deep #8c5e14 on nest .... 5.0:1
     white on egg-deep (buttons) ........... 5.6:1    bark #4b5a4c on nest ........ 6.5:1
     white on egg-dark #6f4a0f (hover) ..... 7.9:1    ink on nest (ring labels) .. 13.2:1
     nest on ink-deep #16231a (footer) .... 14.8:1    haze #c5d2c1 on ink-deep .... 10.9:1
     twig #8a6a43 and egg #b9862a are ring strokes only: never text, never a control. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); }

:root {
  --nest: #edf4e7;
  --ink: #1e2b20;
  --bark: #4b5a4c;
  --twig: #8a6a43;
  --egg-deep: #8c5e14;
  --egg-dark: #6f4a0f;
  --egg: #b9862a;
  --ink-deep: #16231a;
  --haze: #c5d2c1;
  --rule: #cbd8c3;
  --face: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --wrap: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--nest); color: var(--ink);
  font: 400 1.125rem/1.55 var(--face);
  font-variant-numeric: lining-nums tabular-nums;
}
p, h1, h2, ol { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: var(--egg-deep); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--egg-dark); }
:focus-visible { outline: 3px solid var(--egg-deep); outline-offset: 3px; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: .5rem; z-index: 60; background: var(--ink); color: var(--nest); padding: .75rem 1rem; font-weight: 600; }
.skip:focus { left: .5rem; color: var(--nest); }

/* -------------------------------------------------------------- the rings */
.rings { display: block; fill: none; overflow: visible; }
.ring { stroke: var(--twig); stroke-width: 2; stroke-linecap: round; }
.ring--egg { stroke: var(--egg); }
.ring__dot { fill: var(--egg-deep); }

.mark { width: 30px; height: 30px; flex: none; }
.mark .ring { stroke-width: 2.2; }

/* The hero nest. Rings grow outward once on load, centre first. */
@keyframes grow { from { opacity: 0; transform: scale(.82); } }
.rings--hero { width: 100%; height: auto; }
.rings--hero .ring { stroke-width: 3; }
.rings--hero .nest__ring:nth-child(odd) .ring { stroke-width: 4; }
.rings--hero .ring--egg { stroke-width: 5; }
.nest__ring { transform-box: view-box; transform-origin: 50% 50%; animation: grow .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 90ms); }
/* Labels sit on their ring; the nest-coloured halo parts the strand around the name, as if the
   name were woven in. Shown only where the figure is wide enough for them to be read. */
.nest__label { display: none; fill: var(--ink); font: 600 19px var(--face); letter-spacing: .01em; stroke: var(--nest); stroke-width: 9px; stroke-linejoin: round; paint-order: stroke; }

/* One ring per row picked out; the rest stay quiet so the growth outward reads down the list. */
.rings--row { width: 56px; height: 56px; flex: none; }
.rings--row .ring { stroke-width: 1.2; opacity: .5; }
.rings--row .ring--on { stroke: var(--egg-deep); stroke-width: 3.4; opacity: 1; }

.divider { display: flex; align-items: center; gap: 1rem; padding-block: .5rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--twig); opacity: .45; }
.mark--div { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ header */
.head { position: sticky; top: 0; z-index: 40; background: var(--nest); border-bottom: 1px solid var(--rule); }
.head__in { display: flex; align-items: center; gap: .75rem; min-height: 66px; padding-block: .5rem; }
.brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; min-width: 0; flex: 1; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__name { display: block; line-height: 1.15; }
.brand__lead { display: block; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand__rest { display: block; font-size: .875rem; color: var(--bark); }
.head__nav { display: none; }

.act { display: inline-flex; align-items: center; justify-content: center; gap: .45em; background: var(--egg-deep); color: #fff; text-decoration: none; font-weight: 600; border-radius: 4px; transition: background-color .15s ease, transform .1s ease; }
.act:hover { background: var(--egg-dark); color: #fff; }
.act:active, .btn-line:active { transform: translateY(1px); }
.act__detail { font-weight: 400; overflow-wrap: anywhere; }
.act--head { flex: none; flex-direction: column; gap: 0; min-height: 48px; padding: .35rem .8rem; line-height: 1.15; }
.act--head .act__verb { font-size: .8125rem; }
.act--head .act__detail { font-size: .95rem; font-weight: 600; }
.act--big { min-height: 56px; padding: .75rem 1.25rem; font-size: 1.125rem; flex-wrap: wrap; text-align: center; }

.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .75rem 1.25rem; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); font-weight: 600; text-decoration: none; font-size: 1.125rem; transition: background-color .15s ease, color .15s ease, transform .1s ease; }
.btn-line:hover { background: var(--ink); color: var(--nest); }

/* -------------------------------------------------------------------- hero */
.hero { padding-block: 1.5rem 2.25rem; overflow: hidden; }
.hero__in { display: grid; gap: 2rem; }
.hero__text { max-width: 38rem; }
.hero__place { font-size: 1.0625rem; line-height: 1.4; color: var(--bark); margin-bottom: 1rem; }
.hero__street, .hero__town { display: block; }
.hero__street { color: var(--ink); font-weight: 600; }
.hero__h1 { font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.hero__welcome { margin-top: .9rem; font-weight: 600; color: var(--egg-deep); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.2; }
.hero__acts { display: grid; gap: .7rem; margin-top: 1.5rem; }
.hero__fig { justify-self: center; width: min(76vw, 300px); }

/* ---------------------------------------------------------------- programs */
.progs { padding-block: 2rem 2.75rem; }
.sec-h { font-weight: 600; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.progs__lead { margin-top: .4rem; color: var(--bark); }
.ladder { margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.grp { display: flex; align-items: center; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); }
.grp__text { line-height: 1.25; }
.grp__name { display: block; font-weight: 600; font-size: 1.3125rem; letter-spacing: -.01em; }
.grp__ages { display: block; margin-top: .15rem; color: var(--bark); font-size: 1.0625rem; }

/* ------------------------------------------------------------------ visit */
.visit { padding-block: 2rem 3rem; }
.visit__in { display: grid; gap: 2rem; }
.visit__addr { font-style: normal; margin-block: 1rem 1.25rem; font-size: 1.3125rem; line-height: 1.4; }
/* Direct children only: a descendant rule would split "1155 Draper Rd SW" if digits ever get
   their own span (seen in two builds, 2026-09-25). */
.visit__addr > span { display: block; }
.visit__name { font-weight: 600; }
.visit__hours { padding-left: .9rem; border-left: 4px solid var(--egg-deep); font-weight: 600; max-width: 32ch; }
.visit__acts { display: grid; gap: .7rem; margin-top: 1.25rem; }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--ink-deep); color: var(--nest); padding-block: 2.25rem 2.5rem; }
.foot__in { display: grid; gap: .35rem; }
.foot__name { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.1875rem; margin-bottom: .4rem; }
.mark--foot .ring { stroke: var(--egg); }
.mark--foot .ring__dot { fill: var(--egg); }
.foot a { color: var(--nest); display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.foot a:hover { color: var(--haze); }
.foot :focus-visible { outline-color: var(--egg); }
.foot__contact { margin-top: .25rem; }
.foot__disc { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #34453a; color: var(--haze); font-size: 1rem; max-width: 60ch; }

/* ---------------------------------------------------------------- tablets */
@media (min-width: 640px) {
  .ladder { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 2.5rem; border-top: 0; }
  .grp:nth-child(4n+1) { border-top: 1px solid var(--rule); }
  .visit__in { grid-template-columns: 1fr 1fr; align-items: start; }
  .visit__talk { padding-top: 4.25rem; }
}

@media (min-width: 720px) {
  .head__nav { display: flex; gap: 1.25rem; }
  .head__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
  .head__nav a:hover { border-bottom-color: var(--egg-deep); }

  .hero { padding-block: 2.5rem 3rem; }
  .hero__in { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .hero__fig { width: 100%; max-width: 420px; justify-self: end; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 960px) {
  .head__in { min-height: 76px; gap: 2rem; }
  .head__nav { gap: 1.75rem; }
  .mark { width: 34px; height: 34px; }
  .brand__name { display: flex; gap: .35em; align-items: baseline; }
  .brand__lead, .brand__rest { font-size: 1.1875rem; }
  .act--head { flex-direction: row; gap: .4em; padding: .6rem 1.1rem; }
  .act--head .act__verb, .act--head .act__detail { font-size: 1.0625rem; }

  .hero { padding-block: 3.5rem 4rem; }
  .hero__in { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .hero__fig { max-width: 540px; }
  .hero__place { display: flex; gap: .5em; font-size: 1.1875rem; margin-bottom: 1.4rem; }
  .hero__acts { display: flex; flex-wrap: wrap; }
  .nest__label { display: inline; }

  .progs { padding-block: 3.5rem 4rem; }
  .progs__in { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; align-items: start; }
  .ladder { margin-top: 0; }

  .visit { padding-block: 3.5rem 4.5rem; }
  .visit__in { gap: 5rem; }
  .visit__acts { display: flex; flex-wrap: wrap; }

  .foot__in { grid-template-columns: 1fr 1fr; column-gap: 5rem; align-items: start; }
  .foot__contact { margin-top: 0; }
  .foot__disc { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nest__ring { animation: none; }
  .act, .btn-line { transition: none; }
  .act:active, .btn-line:active { transform: none; }
}