:root {
  color-scheme: light;
  --ink: #213c33;
  --sub: #43574b;
  --paper: #faf7ee;
  --green: #254a3b;
  --rust: #9c432e;
  --rule: #cfceba;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, sans-serif;
  font: 100%/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; }
img,svg { display: block; }
a { color: inherit; text-underline-offset: .26em; }
a:hover { text-decoration-thickness: .12em; }
:focus-visible { outline: 3px solid #b65331; outline-offset: 5px; }
::selection { color: #173529; background: #f6d18e; }
.wrap { width: min(1180px, 88%); margin-inline: auto; }
.mast { border-bottom: 1px solid var(--rule); }
.mast-inner,.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.mast-inner { min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .72rem; font: 700 1.35rem/1.15 var(--serif); text-decoration: none; letter-spacing: -.035em; }
.brand img { width: 37px; height: 37px; }
nav { display: flex; gap: clamp(18px, 3vw, 40px); }
nav a { font-size: .91rem; font-weight: 600; padding-block: .7rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(36px, 6vw, 95px); padding-block: clamp(48px, 5.4vw, 84px); }
h1,h2,h3,p { margin: 0; }
.kicker { color: #74513c; font-size: .78rem; font-weight: 700; letter-spacing: .105em; text-transform: uppercase; display: flex; align-items: center; gap: .65rem; }
.kicker span { width: 22px; height: 2px; background: #b36747; }
h1,h2,h3,.foot-brand { font-family: var(--serif); }
h1,h2,h3 { font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(3.6rem, 6.2vw, 6.15rem); line-height: .97; letter-spacing: -.065em; margin-block: .24em .24em; }
h1 em,h2 em { font-weight: 400; }
h1 em { color: #527049; }
.lede { font: 400 clamp(1.13rem,1.5vw,1.35rem)/1.45 var(--sans); letter-spacing: -.016em; max-width: 39ch; }
.pitch { font-size: 1rem; color: var(--sub); margin-top: .82rem; max-width: 48ch; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; align-items: center; margin-top: 1.55rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; max-width: 100%; border-radius: 7px; min-height: 48px; padding: .82rem 1.2rem; line-height: 1.25; color: #fffaf0; background: var(--green); font-weight: 700; text-decoration: none; box-shadow: 0 2px 0 #173427; }
.button:hover { background: #173e2d; }
.button span,.text-link span { flex-shrink: 0; }
.quiet,.text-link { font-weight: 650; font-size: .96rem; }
.quiet { display: inline-flex; align-items: center; min-height: 44px; gap: .4em; }
.disclosure { font-size: .81rem; color: var(--sub); line-height: 1.5; margin-top: .8rem; }
.card-frame { position: relative; padding: clamp(14px,2.3vw,36px); background: #d8e0cc; border: 1px solid #c4cbb9; border-radius: 14px; isolation: isolate; }
.card-frame::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; opacity: .36; background-image: radial-gradient(#829476 1px,transparent 1px); background-size: 7px 7px; }
.picture-card { position: relative; background: #fffaf0; color: #244334; margin: 0; padding: clamp(11px,1.35vw,19px); border: 1px solid #a9b69e; border-radius: 9px; box-shadow: 0 4px 0 -1px #eae8d9, 0 5px 0 0 #a7af9b, 0 10px 18px -12px #324e36; min-inline-size: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin: 0 .2rem .65rem; font-size: .71rem; font-weight: 700; line-height: 1.25; letter-spacing: .075em; text-transform: uppercase; }
.card-head span:last-child { font-weight: 600; text-transform: none; letter-spacing: 0; }
.garden { width: 100%; height: auto; border-radius: 8px; background: #f2d6a0; }
.card-body { text-align: center; }
.letters { display:flex; justify-content:center; align-items:baseline; padding-top: .38rem; }
.letters span { font: 500 clamp(3.05rem,5.1vw,5.1rem)/1.08 var(--serif); text-align: center; width: 1.06em; position:relative; }
#sounds:checked ~ .card-body .letters span::after { content:""; display:block; margin: 0 auto; width: .085em; height: .085em; border-radius:50%; background:#9b5739; }
#word:checked ~ .card-body .letters span { width:auto; }
#word:checked ~ .card-body .letters { padding-bottom: .43rem; }
.prompt { min-height: 3em; max-width: 37ch; color: var(--sub); margin: .45rem auto .7rem; font-size: .97rem; line-height: 1.42; }
.prompt-word,#word:checked ~ .card-body .prompt-sounds { display:none; }
#word:checked ~ .card-body .prompt-word { display:block; }
.switch { background: #eeeee0; border-radius: 7px; border: 1px solid #d2d7c6; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.switch label { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 4px; cursor: pointer; font-size: .86rem; font-weight: 650; line-height: 1.26; min-height: 42px; padding: .25em; }
.switch label:hover { background: #dce4cf; }
#sounds:checked ~ .switch [for="sounds"],#word:checked ~ .switch [for="word"] { background: var(--green); color: #fffaf0; }
#sounds:focus-visible ~ .switch [for="sounds"],#word:focus-visible ~ .switch [for="word"] { outline: 3px solid #aa542c; outline-offset: 2px; }
.pick,.visually-hidden,.skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; }
.skip:focus { position: absolute; z-index: 10; top: 10px; left: 10px; padding: .5rem 1rem; background: white; }
.program { background: #eaf0e3; border-block: 1px solid #c9d5c2; }
.program-layout,.closing { display:grid; grid-template-columns: .88fr 1.12fr; gap: clamp(40px,10vw,150px); padding-block: clamp(48px,7vw,96px); }
h2 { font-size: clamp(2.5rem,4vw,4.1rem); line-height:1.04; letter-spacing:-.057em; margin-block:.32em .3em; }
.program-intro p:not(.kicker),.closing p:not(.kicker):not(.disclosure) { font-size:1.05rem; line-height:1.62; color:var(--sub); }
.text-link { display: inline-block; margin-top: 1.16rem; padding-block: .25rem; }
.features { list-style:none; padding:0; margin:0; }
.features li { display:grid; grid-template-columns: 40px 1fr; gap:1.05rem; padding: 1.12rem 0; border-top:1px solid #bdcbb6; }
.features li:first-child { padding-top: .25rem; border: 0; }
.features li:last-child { padding-bottom: 0; }
.features svg { width: 31px; height:31px; stroke:var(--green); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-top:.15rem; }
h3 { font-size:1.56rem; line-height:1.18; letter-spacing:-.032em; }
.features p { margin-top:.35rem; color:var(--sub); max-width:46ch; }
.closing { grid-template-columns: 1.3fr .7fr; align-items: center; }
.closing p+p { margin-top:.6rem; }
.closing-action { border-left: 1px solid var(--rule); padding-left: clamp(18px,2.9vw,44px); }
.closing-action .disclosure { max-width:34ch; }
footer { border-top:1px solid var(--rule); padding-block:1.9rem 2.1rem; }
.foot-brand { font-weight:700; font-size:1.1rem; }
footer p { margin-top:.35rem; color:var(--sub); font-size:.87rem; }
footer nav a { font-size:.86rem; }
@media (max-width: 850px) {
  .wrap { width:90%; }
  .hero { grid-template-columns: 1fr 1fr; gap:25px; }
  h1 { font-size:clamp(3.2rem,6.7vw,4.3rem); }
  .program-layout,.closing { gap:clamp(28px,6vw,60px); }
  .closing { grid-template-columns: 1.1fr .9fr; }
}
@media (max-width: 700px) {
  .mast-inner { min-height: 63px; gap: .8rem; }
  .brand { font-size:1.075rem; gap:.48rem; }
  .brand img { width:30px; height:30px; }
  .mast nav a:first-child { display:none; }
  .mast nav a { font-size:.8rem; text-align:right; }
  .hero { grid-template-columns:1fr; gap:1.85rem; padding-block:2.35rem 2.65rem; }
  .intro { max-width: 480px; }
  h1 { font-size:clamp(3.3rem,11vw,4.7rem); line-height:1; }
  .card-frame { max-width: 530px; }
  .picture-card { padding:13px; }
  .letters span { font-size:3.8rem; }
  .program-layout,.closing { grid-template-columns:1fr; gap:1.75rem; }
  .closing-action { border:0; padding:0; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:.8rem; }
  .disclosure { max-width:48ch; }
}
@media (max-width: 365px) {
  .brand { font-size: .95rem; }
  .mast nav a { font-size: .72rem; }
  .actions { gap: .4rem 1rem; }
  h1 { font-size: 3rem; }
  .prompt { min-height: 4em; }
}
@media (prefers-reduced-motion: no-preference) {
  .letters span { transition: width .24s ease; }
  .button { transition: background-color .18s; }
}