/* Known & Loved: a calm, blush room (colours sampled from the Glossier Melrose store), liquid glass, handwriting. */
:root {
  --halo: #FFF1E8; --petal: #F4D2C7; --blush: #E8B7A4; --rosebeige: #D6AB97; --rose: #D99579;
  --terra: #C5634A; --terra-ink: #A94F38; --clay: #B67D69; --cocoa: #7A5345; --lilac: #C0BECF;
  --ink: #1C1614; --muted: #5E463D; --line: rgba(28, 22, 20, .12);
  --bg: var(--halo);
  --wall-top: #F1C9BA; --wall-mid: #F4D2C7; --wall-low: #F8E2D7;
  --glass: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.32));
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.6);
  --glass-shadow: 0 30px 60px -32px rgba(122, 83, 69, .5);
  --btn: var(--ink); --on-btn: var(--halo); --em: var(--terra);
  --light: rgba(255,255,255,.9); --light-2: rgba(255,247,240,.5);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
}

/* Always the blush room: no dark mode (owner, 3 Oct 2026) */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Every page opens in the room: blush wall, light falling from an oculus, fading to the floor colour */
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--sans); letter-spacing: -.01em;
  background:
    radial-gradient(70% 420px at 50% -60px, var(--light) 0%, var(--light-2) 40%, transparent 72%) no-repeat,
    linear-gradient(180deg, var(--wall-top) 0, var(--wall-mid) 360px, var(--wall-low) 620px, var(--bg) 860px) no-repeat,
    var(--bg); }
a { color: inherit; text-underline-offset: 3px; }
.wrap { max-width: 980px; margin: 0 auto; padding-inline: 16px; }
main.wrap { max-width: 760px; }

/* Header */
header.top .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; }
.brand { font: 700 1.1rem/1 var(--sans); letter-spacing: -.035em; text-decoration: none; color: var(--ink); }
.brand em, .brand .amp { font: italic 400 1.3em/1 var(--serif); letter-spacing: 0; padding: 0 .05em; }
nav.top a { font: 600 .88rem/1 var(--sans); text-decoration: none; color: var(--ink); padding: 11px 18px; border-radius: 999px; display: inline-block;
  background: var(--glass); box-shadow: var(--glass-edge), 0 6px 20px -12px rgba(122,83,69,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Type */
h1, h2, h3 { color: var(--ink); }
h1 { font: 400 clamp(2.6rem, 10vw, 4.6rem)/.95 var(--serif); letter-spacing: -.03em; margin: 26px 0 14px; }
h2 { font: 400 clamp(2rem, 7vw, 2.8rem)/1 var(--serif); letter-spacing: -.02em; margin: 44px 0 14px; }
h3 { font: 600 1.06rem/1.25 var(--sans); letter-spacing: -.015em; margin: 0 0 6px; }
h1 em, h2 em, .hl { font-style: italic; color: var(--em); }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 32em; }
.eyebrow, .kicker { font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 40px 0 14px; }
.small, .svc { font-size: .88rem; color: var(--muted); }
.mt { margin-top: 8px; }
.note { font-size: .9rem; color: var(--muted); border-left: 2px solid var(--rose); padding: 2px 0 2px 12px; margin: 18px 0; }
.hand { font: 500 1.25rem/1.2 var(--hand); color: var(--cocoa); }
.crumb { margin: 6px 0 0; font-size: .95rem; }
.crumb a { text-decoration: none; }

/* Home hero */
.hero { display: grid; justify-items: center; text-align: center; padding-top: 1vh; }
.hero h1 { max-width: 12em; }
.hero .lede { margin: 0 auto; }
svg.cells { width: min(300px, 70vw); height: auto; overflow: visible; margin: -10px 0 -24px; }
/* 1. a drop falls into the light and lands, 2. it divides 1 -> 2 -> 4 -> 8, 3. the cluster breathes and slowly turns */
.drop, .spin, .cell, .ripple, .shadow { transform-box: view-box; transform-origin: 200px 200px; }
.drop { animation: drop 1.7s cubic-bezier(.3, 0, .2, 1) .2s both; }
@keyframes drop {
  0% { transform: translateY(-190px) scale(.22); opacity: 0; }
  14% { opacity: 1; }
  52% { transform: translateY(0) scale(.62, .5); }
  68% { transform: translateY(0) scale(1.08, .9); }
  84% { transform: translateY(0) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.ripple { opacity: 0; animation: ripple 1.8s ease-out 1.05s both; }
@keyframes ripple { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }
.shadow { transform-origin: 200px 318px; animation: shadow-in 1.7s ease .2s both, shadow-breathe 6s ease-in-out 11.4s infinite; }
@keyframes shadow-in { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shadow-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.spin { animation: spin 90s linear 11.4s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cell { animation: divide 9s cubic-bezier(.45, 0, .2, 1) 2.2s both, breathe 6s ease-in-out 11.2s infinite; }
@keyframes divide {
  0%, 10% { transform: translate(0, 0) scale(1); }
  /* stretch, then pinch apart */
  20% { transform: translate(calc(var(--x2) * .45), calc(var(--y2) * .45)) scale(.92); }
  30%, 40% { transform: translate(var(--x2), var(--y2)) scale(.80); }
  48% { transform: translate(calc(var(--x2) + (var(--x3) - var(--x2)) * .45), calc(var(--y2) + (var(--y3) - var(--y2)) * .45)) scale(.74); }
  58%, 68% { transform: translate(var(--x3), var(--y3)) scale(.64); }
  77% { transform: translate(calc(var(--x3) + (var(--x4) - var(--x3)) * .45), calc(var(--y3) + (var(--y4) - var(--y3)) * .45)) scale(.58); }
  88%, 100% { transform: translate(var(--x4), var(--y4)) scale(.5); }
}
@keyframes breathe {
  0%, 100% { transform: translate(var(--x4), var(--y4)) scale(.5); }
  50% { transform: translate(calc(var(--x4) * 1.06), calc(var(--y4) * 1.06)) scale(.52); }
}
.c1 { --x2: -46px; --y2: 0px; --x3: -38px; --y3: -36px; --x4: -46px; --y4: -42px; }
.c2 { --x2: -46px; --y2: 0px; --x3: -38px; --y3: -36px; --x4: -4px;  --y4: -58px; }
.c3 { --x2: -46px; --y2: 0px; --x3: -38px; --y3:  36px; --x4: -60px; --y4:   8px; }
.c4 { --x2: -46px; --y2: 0px; --x3: -38px; --y3:  36px; --x4: -26px; --y4:  50px; }
.c5 { --x2:  46px; --y2: 0px; --x3:  38px; --y3: -36px; --x4:  40px; --y4: -48px; }
.c6 { --x2:  46px; --y2: 0px; --x3:  38px; --y3: -36px; --x4:  12px; --y4:  -6px; }
.c7 { --x2:  46px; --y2: 0px; --x3:  38px; --y3:  36px; --x4:  58px; --y4:  14px; }
.c8 { --x2:  46px; --y2: 0px; --x3:  38px; --y3:  36px; --x4:  22px; --y4:  56px; }
.verse { margin: 0 0 2px; font: 500 clamp(1.8rem, 7vw, 2.5rem)/1.12 var(--hand); color: var(--cocoa); max-width: 14em; }
.verse span { display: inline-block; padding: 0 .18em; clip-path: inset(-.2em 100% -.3em -.2em); animation: write 2.8s steps(36, end) 11s forwards; }
.verse span.l2 { animation-delay: 13.8s; }
@keyframes write { to { clip-path: inset(-.2em -.3em -.3em -.2em); } }
.ref { margin: 4px 0 0; font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  opacity: 0; animation: fade 1.5s ease 16.6s forwards; }
@keyframes fade { to { opacity: 1; } }

/* Liquid glass */
.glass, .card { background: var(--glass); box-shadow: var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 26px; padding: 22px 20px; margin: 12px 0; }
.glass.big { margin: 32px auto 48px; width: 100%; max-width: 580px; text-align: left; border-radius: 30px; padding: 24px 22px; }
.glass .k { font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.glass h2 { font-size: clamp(1.9rem, 7vw, 2.4rem); margin: 0 0 16px; }
.card h3 { margin-bottom: 4px; }
.card.calm { background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(244,210,199,.5)); }

.card.calm h2, .card.calm h3 { margin-top: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; margin: 10px 8px 0 0; border-radius: 999px;
  background: var(--btn); color: var(--on-btn); font: 600 .98rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; border: 0; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ZIP search */
.near { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
.near label { width: 100%; font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.near input { flex: 1 1 150px; min-width: 0; min-height: 52px; border: 0; border-radius: 999px; padding: 0 20px; font: 500 1.05rem var(--sans);
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(122,83,69,.2); color: #1C1614; }
.near .btn { margin: 0; min-height: 52px; }
#near-results:focus { outline: none; }
#near-results .card { background: rgba(255,255,255,.5); }

/* Arch tiles in sampled marble colours */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { border-radius: 999px 999px 0 0; padding: 64px 14px 20px; min-height: 210px; color: #1C1614; display: flex; flex-direction: column; justify-content: flex-end; }
.tile:nth-child(1) { background: #F4D2C7; } .tile:nth-child(2) { background: #E8B7A4; }
.tile:nth-child(3) { background: #D99579; } .tile:nth-child(4) { background: #B67D69; }
.tile h3 { font: 400 1.5rem/1 var(--serif); letter-spacing: -.01em; margin: 0 0 8px; color: #1C1614; }
.tile p { font-size: .86rem; margin: 0; }

/* State grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.grid a { display: block; padding: 12px 14px; border-radius: 18px; text-decoration: none; font-weight: 600; color: var(--ink);
  background: var(--glass); box-shadow: var(--glass-edge); }
.grid a span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }

.lines { list-style: none; padding: 0; margin: 0; }
.lines li { padding: 14px 0; border-top: 1px solid var(--line); }
.lines li:first-child { border-top: 0; }

/* Closing */
.welcome { text-align: center; padding: 56px 8px 10px; font: 400 clamp(1.9rem, 7vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.02em; }
.welcome .amp { font: italic 400 4.5rem/.8 var(--serif); color: var(--em); display: block; margin-bottom: 6px; }

footer { margin: 56px 0 0; border-top: 1px solid var(--line); }
footer .wrap { padding-block: 26px 40px; font-size: .88rem; color: var(--muted); }
footer a { color: var(--muted); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cell { animation: none; transform: translate(var(--x4), var(--y4)) scale(.5); }
  .drop, .spin, .shadow { animation: none; }
  .ripple { display: none; }
  .verse span { animation: none; clip-path: none; }
  .ref { animation: none; opacity: 1; }
}

/* State tile map: positions are generated (column / row in an 11 x 8 grid) */
.st-ak { grid-column: 1; grid-row: 1; }
.st-al { grid-column: 7; grid-row: 7; }
.st-ar { grid-column: 5; grid-row: 6; }
.st-az { grid-column: 2; grid-row: 6; }
.st-ca { grid-column: 1; grid-row: 5; }
.st-co { grid-column: 3; grid-row: 5; }
.st-ct { grid-column: 10; grid-row: 4; }
.st-dc { grid-column: 9; grid-row: 6; }
.st-de { grid-column: 10; grid-row: 5; }
.st-fl { grid-column: 9; grid-row: 8; }
.st-ga { grid-column: 8; grid-row: 7; }
.st-hi { grid-column: 1; grid-row: 8; }
.st-ia { grid-column: 5; grid-row: 4; }
.st-id { grid-column: 2; grid-row: 3; }
.st-il { grid-column: 6; grid-row: 3; }
.st-in { grid-column: 6; grid-row: 4; }
.st-ks { grid-column: 4; grid-row: 6; }
.st-ky { grid-column: 6; grid-row: 5; }
.st-la { grid-column: 5; grid-row: 7; }
.st-ma { grid-column: 11; grid-row: 3; }
.st-md { grid-column: 9; grid-row: 5; }
.st-me { grid-column: 11; grid-row: 1; }
.st-mi { grid-column: 8; grid-row: 3; }
.st-mn { grid-column: 5; grid-row: 3; }
.st-mo { grid-column: 5; grid-row: 5; }
.st-ms { grid-column: 6; grid-row: 7; }
.st-mt { grid-column: 3; grid-row: 3; }
.st-nc { grid-column: 7; grid-row: 6; }
.st-nd { grid-column: 4; grid-row: 3; }
.st-ne { grid-column: 4; grid-row: 5; }
.st-nh { grid-column: 11; grid-row: 2; }
.st-nj { grid-column: 9; grid-row: 4; }
.st-nm { grid-column: 3; grid-row: 6; }
.st-nv { grid-column: 2; grid-row: 4; }
.st-ny { grid-column: 9; grid-row: 3; }
.st-oh { grid-column: 7; grid-row: 4; }
.st-ok { grid-column: 4; grid-row: 7; }
.st-or { grid-column: 1; grid-row: 4; }
.st-pa { grid-column: 8; grid-row: 4; }
.st-ri { grid-column: 10; grid-row: 3; }
.st-sc { grid-column: 8; grid-row: 6; }
.st-sd { grid-column: 4; grid-row: 4; }
.st-tn { grid-column: 6; grid-row: 6; }
.st-tx { grid-column: 4; grid-row: 8; }
.st-ut { grid-column: 2; grid-row: 5; }
.st-va { grid-column: 8; grid-row: 5; }
.st-vt { grid-column: 10; grid-row: 2; }
.st-wa { grid-column: 1; grid-row: 3; }
.st-wi { grid-column: 7; grid-row: 3; }
.st-wv { grid-column: 7; grid-row: 5; }
.st-wy { grid-column: 3; grid-row: 4; }
.usmap { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; margin: 8px 0 10px; }
.usmap a { aspect-ratio: 1; border-radius: 30% 30% 14% 14%; display: grid; place-items: center; text-decoration: none;
  font: 700 clamp(.58rem, 2.4vw, .9rem)/1 var(--sans); letter-spacing: .02em; color: #1C1614; transition: transform .2s ease; }
.usmap a:hover, .usmap a:focus-visible { transform: translateY(-3px); }
.usmap a.t1 { background: #F4D2C7; } .usmap a.t2 { background: #E8B7A4; } .usmap a.t3 { background: #D99579; }
.usmap a.t4 { background: #B67D69; }
.maplegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.maplegend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.maplegend .t1 { background: #F4D2C7; } .maplegend .t2 { background: #E8B7A4; } .maplegend .t3 { background: #D99579; } .maplegend .t4 { background: #B67D69; }