/* Hallmark · shape: Letter · genre: playful · theme: Hum (deal 1/3, seed developmental-audiologist-practice-children-cfdd·38795489·2026-11-04·r0) · job: book · draw: f2ed9b
 * hero: Banner · nav: edge-aligned (swap: search-led, a one-page site has nothing to search) · footer: statement · imagery: photographs, library 1, natural · signature: the age-7 myth on a torn sheet, stamped not true
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · brand: The Sensory Centre (spec 2026-11-04), cyan kept as theme-color only · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a clinic page could open on any service list; opened on the myth the practice argues against instead */
/* Hallmark · answered F4 · the secondary and the age tabs are Hum card stock, paper on paper; only the pear booking button is a filled colour */
/* Hallmark · dismissed 25 · .panel p is a one-sentence statement at section size, not running prose */
/* Hallmark · dismissed 58 · 84 words counts the sticky booking bar and the letter's first lines under the hero fold */
/* Hallmark · dismissed F17 · the plan head sits on four columns beside its rows by design, three lines at 1440 */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --torn-band: polygon(0.0% 1.0px,2.5% 10.2px,5.0% 3.9px,7.5% 3.1px,10.0% 8.3px,12.5% 6.3px,15.0% 4.3px,17.5% 8.5px,20.0% 8.6px,22.5% 6.4px,25.0% 7.8px,27.5% 7.4px,30.0% 9.2px,32.5% 3.4px,35.0% 4.7px,37.5% 8.1px,40.0% 8.0px,42.5% 1.5px,45.0% 7.8px,47.5% 5.7px,50.0% 10.2px,52.5% 9.1px,55.0% 2.2px,57.5% 6.1px,60.0% 10.2px,62.5% 7.9px,65.0% 7.4px,67.5% 6.8px,70.0% 10.1px,72.5% 10.1px,75.0% 4.7px,77.5% 4.4px,80.0% 9.4px,82.5% 4.3px,85.0% 2.5px,87.5% 4.0px,90.0% 5.3px,92.5% 3.9px,95.0% 10.4px,97.5% 6.6px,100.0% 8.3px,100.0% calc(100% - 9.8px),97.5% calc(100% - 1.6px),95.0% calc(100% - 3.7px),92.5% calc(100% - 6.6px),90.0% calc(100% - 6.1px),87.5% calc(100% - 5.2px),85.0% calc(100% - 2.9px),82.5% calc(100% - 10.1px),80.0% calc(100% - 1.5px),77.5% calc(100% - 4.7px),75.0% calc(100% - 4.4px),72.5% calc(100% - 7.6px),70.0% calc(100% - 10.2px),67.5% calc(100% - 6.1px),65.0% calc(100% - 2.7px),62.5% calc(100% - 5.1px),60.0% calc(100% - 3.8px),57.5% calc(100% - 4.6px),55.0% calc(100% - 5.2px),52.5% calc(100% - 4.3px),50.0% calc(100% - 6.3px),47.5% calc(100% - 7.1px),45.0% calc(100% - 3.3px),42.5% calc(100% - 10.1px),40.0% calc(100% - 5.6px),37.5% calc(100% - 9.6px),35.0% calc(100% - 7.4px),32.5% calc(100% - 7.3px),30.0% calc(100% - 6.2px),27.5% calc(100% - 6.0px),25.0% calc(100% - 7.9px),22.5% calc(100% - 10.4px),20.0% calc(100% - 5.0px),17.5% calc(100% - 8.1px),15.0% calc(100% - 3.5px),12.5% calc(100% - 6.9px),10.0% calc(100% - 4.5px),7.5% calc(100% - 4.3px),5.0% calc(100% - 4.9px),2.5% calc(100% - 8.9px),0.0% calc(100% - 9.8px));
  --torn-sheet: polygon(0.0% 0.34%,4.2% 1.90%,8.3% 0.27%,12.5% 0.99%,16.7% 0.44%,20.8% 0.27%,25.0% 2.29%,29.2% 0.58%,33.3% 1.49%,37.5% 0.42%,41.7% 1.11%,45.8% 1.40%,50.0% 0.40%,54.2% 2.13%,58.3% 2.05%,62.5% 2.06%,66.7% 2.05%,70.8% 2.10%,75.0% 1.77%,79.2% 0.71%,83.3% 0.12%,87.5% 0.65%,91.7% 0.27%,95.8% 0.10%,100.0% 1.46%,100% 100%,0% 100%);
}

body { background: var(--grain), var(--fibre), var(--color-paper); font-weight: 500; font-size: var(--text-lg); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.04; margin: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h1 { font-size: var(--text-display); max-width: 14ch; }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-title); line-height: 1.2; }
mark { background: color-mix(in oklab, var(--color-accent) 60%, transparent); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: var(--space-3xs); border-radius: var(--space-2xs); }
a { color: var(--color-accent-2); }
a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* Controls: card stock */
.btn { --edge: 5px; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 600 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn--primary { background: var(--grain), var(--fibre), var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 32%, transparent); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; translate: none; }
.btn--small { min-height: 44px; padding: 0 var(--space-md); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* Nav */
.nav__row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.wordmark { white-space: nowrap; font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.nav__tel { white-space: nowrap; color: var(--color-ink); font-weight: 600; text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); }
.nav__tel:hover { background: var(--color-paper-2); }
.wordmark:focus-visible, .nav__tel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Hero: Banner */
.hero { padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero .lead { margin-top: var(--space-lg); }
.myth { margin: 0; filter: var(--shadow-paper); rotate: -2deg; }
.myth__sheet { position: relative; padding: var(--space-2xl) var(--space-xl) var(--space-xl); background: var(--grain), var(--fibre), var(--color-card); border-radius: 0 0 var(--radius-card) var(--radius-card); clip-path: var(--torn-sheet); }
.myth__quote { margin: 0; font: 600 var(--text-3xl)/1.12 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink-2); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--color-accent-3); }
.myth__verdict { display: inline-block; margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); rotate: 3deg; background: var(--grain), var(--color-accent-3); color: var(--color-ink); font: 600 var(--text-xl)/1.1 var(--font-display); border-radius: var(--radius-stock); }

/* Letter */
.letter { padding-block: var(--space-2xl) var(--section-gap-s); }
.letter__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.letter__hello { font-size: var(--text-section); margin-bottom: var(--space-lg); }
.letter__body p { max-width: 50ch; line-height: 1.6; }
.letter__body p + p { margin-top: var(--space-md); }
.letter__sign { font-weight: 600; }
.card { padding: var(--space-xl); background: var(--grain), var(--fibre), var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.letter__name { font: 600 var(--text-title)/1.2 var(--font-display); margin-bottom: var(--space-md); }
.creds { margin: 0; }
.creds > div { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.creds dt { font-weight: 600; }
.creds dd { margin: 0; color: var(--color-muted); font-size: var(--text-md); }

/* Who: switcher */
.who { padding-block: var(--section-gap); background: var(--grain), var(--fibre), var(--color-paper-2); clip-path: var(--torn-band); }
.who__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.seg button { min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--grain), var(--color-card); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap); }
.seg button:hover { translate: 0 -1px; }
.seg button:active { translate: 0 2px; }
.seg button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.seg button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.panel { margin-top: var(--space-2xl); }
.panel p { font: 600 var(--text-section)/1.12 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; text-wrap: balance; }
html:not(.js) .panel[hidden] { display: block; }
html:not(.js) .seg { display: none; }

/* Plan: rows */
.plan { padding-block: var(--section-gap-l) var(--section-gap); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.plan h2 { max-width: 10ch; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.rows li:last-child { border-bottom: 1px solid var(--color-rule); }
.rows p { color: var(--color-ink-2); }

/* Before you book: torn ink band */
.before { padding-block: var(--section-gap-s); background: var(--grain), var(--color-ink); color: var(--color-paper); clip-path: var(--torn-band); }
.before a { color: var(--color-paper); }
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; }
.terms > div { padding-inline: var(--space-lg); border-left: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); }
.terms > div:first-child { padding-left: 0; border-left: 0; }
.terms dt { font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-accent); }
.terms dd { margin: var(--space-sm) 0 0; }

/* Visit: the close */
.visit { padding-block: var(--section-gap); }
.visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.photo { aspect-ratio: 4 / 5; min-height: 440px; margin: 0; border-radius: var(--radius-card); filter: var(--shadow-paper); }
.photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
.visit address { font-style: normal; font: 600 var(--text-2xl)/1.2 var(--font-display); margin-top: var(--space-lg); }
.visit__text > p { margin-top: var(--space-md); color: var(--color-ink-2); }
.visit__facts { margin: var(--space-lg) 0 0; }
.visit__facts > div { display: flex; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.visit__facts dt { min-width: 6rem; color: var(--color-muted); }
.visit__facts dd { margin: 0; font-weight: 600; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Sticky booking bar */
.bookbar { position: sticky; bottom: 0; z-index: var(--z-sticky); padding-block: var(--space-sm); background: var(--grain), var(--color-paper-3); box-shadow: 0 -1px 0 var(--color-rule); }
.bookbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.bookbar p { font-weight: 600; }

/* Footer: statement */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__line { font: 600 var(--text-section)/1.08 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; text-wrap: balance; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-block: var(--space-xl) var(--space-lg); }
.footer__links a { color: var(--color-ink); white-space: nowrap; }
.footer__small { font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }
.footer__small + .footer__small { margin-top: var(--space-2xs); }
.footer__small a { color: var(--color-muted); }

@media (max-width: 60rem) {
  .hero__grid, .letter__grid, .who__grid, .plan__grid, .visit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .terms > div { padding: var(--space-md) 0; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); }
  .terms > div:first-child { border-top: 0; }
  .photo { min-height: 0; }
  .bookbar p { font-size: var(--text-sm); }
}
@media (max-width: 30rem) { .nav__tel { display: none; } .wordmark { font-size: var(--text-lg); } }

@media (prefers-reduced-motion: reduce) {
  .btn, .seg button { transition: none; }
  .btn:hover, .btn:active, .seg button:hover, .seg button:active { translate: none; }
}