@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f6f1e7;
  --paper-2: #efe6d6;
  --card: #fffdf8;
  --ink: #1b211c;
  --ink-2: #474c45;
  --ink-3: #757466;
  --line: #e0d6c3;
  --green: #22432f;
  --green-2: #2e5a40;
  --ember: #c4542b;
  --mustard: #e5a93f;
  --sky: #dfe7e3;
  --blue: #0a7cff;
  --gray-bubble: #e9e9eb;
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --body: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --imsg: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17.5px/1.55 var(--body); font-variation-settings: "opsz" 14; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
::selection { background: #f3cdb6; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.hand { font-family: var(--hand); font-weight: 600; color: var(--ember); letter-spacing: .005em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
h1, h2 { font-family: var(--display); font-variation-settings: "opsz" 96; text-wrap: balance; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--green); color: #fbf6ec; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -.01em; box-shadow: 0 3px 0 #13281b; transition: transform .12s ease, box-shadow .12s ease, background .15s; }
.btn:hover { background: var(--green-2); transform: translateY(-1px); box-shadow: 0 4px 0 #13281b; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #13281b; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; box-shadow: 0 2px 0 #13281b; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .2s; }
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.top-inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { border-radius: 8px; }
.brand span { font: 700 25px/1 var(--display); letter-spacing: -.045em; font-variation-settings: "opsz" 60; }
.top-links { display: none; gap: 28px; margin-left: auto; font-size: 15.5px; }
.top-links a { text-decoration: none; color: var(--ink-2); }
.top-links a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.top .btn-sm { margin-left: auto; }

/* Hero */
.hero { display: grid; gap: 34px; padding-top: 20px; padding-bottom: 8px; }
.hello { display: flex; align-items: flex-end; gap: 4px; font-size: 28px; line-height: 1; transform: rotate(-3deg); transform-origin: left; margin-bottom: 8px; }
.hello-arrow { width: 54px; height: 28px; fill: none; stroke: var(--ember); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(80deg) translate(10px, -6px); }
h1 { font-weight: 750; font-size: clamp(46px, 12.4vw, 104px); line-height: .95; letter-spacing: -.042em; }
.tabs { position: relative; white-space: nowrap; }
.tabs::after { content: ""; position: absolute; left: -2%; right: -3%; top: 52%; height: .09em; background: var(--ember); border-radius: 4px; transform: rotate(-2.5deg); }
.lede { margin-top: 22px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.hero-actions .btn { flex: 1 1 100%; }
.number { border: 0; background: none; padding: 6px 0; font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.number span { font-family: var(--hand); font-weight: 600; font-size: 22px; color: var(--ember); margin-left: 6px; }
.fine { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }

/* Phone + lock screen */
.hero-phone { position: relative; justify-self: center; width: min(330px, 86vw); }
.phone { position: relative; aspect-ratio: 9 / 19.2; border-radius: 52px; padding: 11px; background: #1b1d1f; box-shadow: inset 0 0 0 2px #3b3f43, 0 40px 80px -30px rgba(27, 33, 28, .5), 0 12px 24px -12px rgba(27, 33, 28, .35); transform: rotate(2.5deg); }
.screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #1d2833; }
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.island { position: absolute; top: 11px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 3; }
.lock { position: relative; z-index: 2; text-align: center; color: #f4eee2; padding-top: 52px; }
.lock-date { font: 600 14.5px/1.2 var(--imsg); opacity: .92; }
.lock-time { font: 700 76px/1 var(--imsg); letter-spacing: -.02em; margin-top: 2px; }
.notes { position: absolute; z-index: 2; left: 9px; right: 9px; top: 47%; display: grid; gap: 7px; }
.note { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 11px 12px; border-radius: 22px; background: rgba(245, 241, 233, .74); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); color: #141414; font: 13.4px/1.3 var(--imsg); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35); }
.note img { border-radius: 10px; }
.note-top { display: flex; justify-content: space-between; margin-bottom: 1px; }
.note-top b { font-weight: 600; }
.note-top span { color: #5b5b5b; font-size: 12.5px; }
.js .note[data-note] { opacity: 0; transform: translateY(-14px) scale(.96); }
.js .note.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.phone-note { margin-top: 18px; text-align: center; font-size: 26px; transform: rotate(-4deg); }

.street { margin-top: 30px; height: 150px; overflow: hidden; }
.street img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* Annotated listing */
.listing-sec { background: #55684a; color: #f6f1e7; padding: 34px 0 72px; margin-top: -1px; }
.listing-grid { display: grid; gap: 34px; }
.listing-sec h2, .sec-head h2, .faq h2, .cta h2, .rules h2 { font-weight: 720; font-size: clamp(34px, 8.4vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.listing-copy > p { margin-top: 18px; font-size: 18px; color: #e3e6d8; max-width: 30em; }
.margin-notes { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 12px; }
.margin-notes li { display: flex; gap: 12px; align-items: baseline; }
.margin-notes .hand { color: #ffe0b0; font-size: 25px; line-height: 1.15; }
.pin { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: #fff; font: 700 14px/1 var(--body); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); transform: translateY(-2px); }
.listing-card { background: var(--card); color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); transform: rotate(-1.2deg); max-width: 520px; width: 100%; justify-self: center; }
.listing-photo { position: relative; aspect-ratio: 16 / 11; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo .p4 { position: absolute; right: 18%; top: 14%; }
.listing-body { padding: 18px 20px 6px; }
.price { font: 750 34px/1 var(--display); letter-spacing: -.035em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price s { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.addr { margin-top: 8px; font-weight: 600; }
.facts { margin-top: 2px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.blurb { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); font-style: italic; }
.listing-card figcaption { padding: 10px 20px 16px; font-size: 13px; color: var(--ink-3); }

/* Week planner */
.week { padding: 80px 0 72px; }
.sec-head { max-width: 760px; }
.sec-head p { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 34em; }
.planner { list-style: none; padding: 0; margin-top: 40px; background: var(--card); border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(60, 40, 10, .35); }
.day { display: grid; grid-template-columns: 52px 1fr; gap: 10px 14px; padding: 18px 18px; border-top: 1.5px solid var(--line); }
.day:first-child { border-top: 0; }
.dname { grid-row: 1 / span 3; font: 800 15px/1.6 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.entry { padding: 10px 13px 11px; border-radius: 14px; font-size: 15.5px; line-height: 1.4; }
.entry .who { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .01em; margin-bottom: 3px; }
.entry.you { background: #e6efff; }
.entry.you .who { color: #1f5cc4; }
.entry.hearth { background: #e3ece1; }
.entry.hearth .who { color: var(--green); }
.entry.auto { background: #fae1d3; }
.entry.auto .who { color: #a33f1b; }

/* Text it anything */
.anything { padding-top: 24px; padding-bottom: 90px; }
.wall { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 10px; justify-content: center; }
.b { font: 15px/1.3 var(--imsg); background: var(--blue); color: #fff; padding: 10px 15px 11px; border-radius: 20px; border-bottom-right-radius: 6px; max-width: 100%; }
.b:nth-child(3n+1) { transform: rotate(-1.6deg); }
.b:nth-child(3n+2) { transform: rotate(1.2deg) translateY(4px); }
.b:nth-child(4n) { transform: rotate(-.6deg) translateY(-3px); }
.b.file, .b.shot { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #111; border: 1px solid #dcdce0; }
.b.file svg { width: 30px; height: 30px; fill: #f2f2f4; stroke: #b4342a; stroke-width: 1.3; stroke-linejoin: round; }
.b span { display: flex; flex-direction: column; font-weight: 600; font-size: 15px; }
.b small { font-weight: 400; color: #6e6e73; font-size: 13.5px; }
.mini-house { width: 34px; height: 44px; border-radius: 6px; background: linear-gradient(#dfe7e3 0 40%, #2e5a40 40% 85%, #55684a 85%); position: relative; }
.mini-house::before { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 12px; background: #2b2420; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* House rules */
.rules { padding-bottom: 96px; }
.card-note { position: relative; background: #fffdf6; border-radius: 6px; padding: 40px 22px 30px; box-shadow: 0 2px 0 var(--line), 0 30px 60px -36px rgba(60, 40, 10, .45); transform: rotate(-.6deg); background-image: linear-gradient(90deg, transparent 0 46px, #f2c9b6 46px 47.5px, transparent 47.5px), repeating-linear-gradient(transparent 0 35px, #e9eef3 35px 36px); }
.tape { position: absolute; top: -14px; width: 110px; height: 30px; background: rgba(229, 169, 63, .55); border-left: 1px dashed rgba(0, 0, 0, .06); border-right: 1px dashed rgba(0, 0, 0, .06); }
.t1 { left: 14%; transform: rotate(-5deg); }
.t2 { right: 12%; transform: rotate(4deg); }
.card-note h2 { padding-left: 34px; }
.rules-sub { padding-left: 38px; font-size: 24px; margin-top: 4px; }
.rules-cols { display: grid; gap: 4px; margin-top: 24px; padding-left: 34px; }
.rules-cols ul { list-style: none; padding: 0; }
.rules-cols li { position: relative; padding: 7px 0 7px 32px; font-size: 17px; line-height: 1.45; }
.rules-cols li::before { position: absolute; left: 0; top: 2px; font: 700 26px/1 var(--hand); }
.yes li::before { content: "✓"; color: var(--green-2); }
.no li::before { content: "✗"; color: var(--ember); }

/* FAQ */
.faq { padding-bottom: 96px; }
.faq-list { margin-top: 26px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 46px 20px 0; font: 650 20px/1.3 var(--display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font: 500 22px/1 var(--display); transition: transform .2s, background .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--mustard); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 40em; }

/* CTA with yard sign */
.cta { position: relative; background: var(--sky); padding-top: 72px; overflow: hidden; }
.cta-inner { position: relative; z-index: 2; display: grid; gap: 30px; }
.cta-copy p { margin-top: 14px; font-size: 18px; color: var(--ink-2); max-width: 26em; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.text-link { font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; }
.qr { display: none; }
.yard { position: relative; z-index: 3; display: block; width: 300px; height: 330px; justify-self: center; text-decoration: none; color: inherit; margin-bottom: -100px; }
.post { position: absolute; left: 34px; top: 0; bottom: 0; width: 14px; background: #f4efe4; border-radius: 3px 3px 0 0; box-shadow: inset -3px 0 0 #ddd3c0; }
.arm { position: absolute; left: 34px; top: 18px; width: 240px; height: 12px; background: #f4efe4; border-radius: 0 3px 3px 0; box-shadow: inset 0 -3px 0 #ddd3c0; }
.sign { position: absolute; left: 70px; top: 30px; width: 200px; transform-origin: 50% 0; animation: swing 4.5s ease-in-out infinite; }
.sign::before, .sign::after { content: ""; position: absolute; top: -10px; width: 2px; height: 14px; background: #8a8170; }
.sign::before { left: 30px; } .sign::after { right: 30px; }
.rider { display: block; margin: 4px auto 6px; width: 170px; text-align: center; background: var(--mustard); color: var(--ink); font: 700 12.5px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 7px 0; border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.board { display: grid; justify-items: center; padding: 18px 10px 20px; background: var(--green); color: #fbf6ec; border-radius: 6px; box-shadow: inset 0 0 0 5px #fbf6ec, inset 0 0 0 7px var(--green), 0 16px 26px -14px rgba(0, 0, 0, .5); }
.board-kicker { font: 700 13px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: #ffe0b0; }
.board-name { font: 800 52px/1 var(--display); letter-spacing: -.05em; margin-top: 6px; }
.board-num { font: 600 17px/1 var(--display); margin-top: 10px; font-variant-numeric: tabular-nums; }
.yard:hover .board { background: var(--green-2); }
@keyframes swing { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.street-bottom { position: relative; z-index: 1; margin-top: -40px; height: 140px; }

/* Footer */
.foot { background: #55684a; color: #e8ead9; padding: 26px 0 calc(110px + env(safe-area-inset-bottom)); }
.foot-inner { display: grid; gap: 12px; font-size: 14px; }
.foot .brand span { color: #fff; font-size: 22px; }
.foot p { max-width: 50em; color: #d6dacb; }

/* Mobile dock + toast */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--line); transform: translateY(115%); transition: transform .25s ease; }
.dock.on { transform: none; }
.dock .btn { width: 100%; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 50; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 15px; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ≥ 640 */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .hero-actions .btn { flex: 0 0 auto; }
  .street { height: 220px; }
  .day { grid-template-columns: 70px 1fr; padding: 20px 26px; }
  .card-note { padding: 48px 40px 36px; }
  .rules-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .wall { gap: 14px; }
  .b { font-size: 16.5px; }
}

/* ≥ 960 */
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .top-inner { height: 76px; }
  .top-links { display: flex; }
  .top .btn-sm { margin-left: 8px; }
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 40px; align-items: center; padding-top: 36px; }
  h1 { font-size: clamp(64px, 6.9vw, 98px); }
  .hero-phone { width: 340px; justify-self: end; margin-right: 30px; }
  .phone-note { position: absolute; left: -250px; bottom: 64px; margin: 0; font-size: 29px; transform: rotate(-8deg); }
  .street { height: 300px; margin-top: -40px; }
  .listing-sec { padding: 40px 0 110px; }
  .listing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .listing-card { justify-self: end; }
  .week { padding: 120px 0 100px; }
  .planner { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .day { display: flex; flex-direction: column; gap: 10px; padding: 18px 12px 22px; border-top: 0; border-left: 1.5px solid var(--line); }
  .day:first-child { border-left: 0; }
  .dname { margin-bottom: 2px; }
  .entry { font-size: 14.5px; }
  .anything { padding-bottom: 120px; }
  .sec-head { text-align: left; }
  .wall { max-width: 980px; margin-inline: auto; gap: 16px 14px; }
  .rules { padding-bottom: 120px; }
  .card-note { max-width: 1040px; margin-inline: auto; padding: 56px 56px 44px; }
  .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; padding-bottom: 130px; }
  .faq-list { margin-top: 8px; }
  .cta { padding-top: 110px; }
  .cta-inner { grid-template-columns: 1fr auto; align-items: end; gap: 60px; }
  .qr { display: flex; align-items: center; gap: 14px; margin-top: 34px; max-width: 330px; font-size: 14px; color: var(--ink-2); }
  .qr img { width: 92px; height: 92px; background: #fff; padding: 8px; border-radius: 12px; }
  .yard { width: 380px; height: 470px; margin-right: 40px; margin-bottom: -190px; }
  .cta-copy { padding-bottom: 120px; }
  .arm { width: 300px; }
  .sign { left: 80px; width: 250px; }
  .rider { width: 210px; font-size: 14px; }
  .board-name { font-size: 66px; }
  .board-num { font-size: 20px; }
  .street-bottom { height: 220px; margin-top: -20px; }
  .foot { padding-bottom: 40px; }
  .foot-inner { grid-template-columns: auto 1fr auto; gap: 40px; align-items: start; }
  .dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .note[data-note] { opacity: 1; transform: none; }
}

/* The whole purchase: clipboard */
.purchase { padding: 20px 0 90px; }
.purchase-grid { display: grid; gap: 40px; }
.purchase-copy > p:not(.hand) { margin-top: 18px; font-size: 18px; color: var(--ink-2); max-width: 32em; }
.purchase h2 { font-weight: 720; font-size: clamp(32px, 7.4vw, 52px); line-height: 1.03; letter-spacing: -.035em; }
.purchase-hand { margin-top: 20px; font-size: 27px; line-height: 1.15; transform: rotate(-1.5deg); }
.clipboard { position: relative; justify-self: center; width: min(460px, 100%); padding: 34px 16px 18px; background: #b98b5a; border-radius: 20px; box-shadow: inset 0 0 0 3px #a67a4c, 0 30px 60px -32px rgba(60, 35, 10, .55); transform: rotate(1.5deg); }
.clip { position: absolute; top: -14px; left: 50%; width: 120px; height: 38px; margin-left: -60px; border-radius: 10px 10px 6px 6px; background: linear-gradient(#c9ccc6, #9ea29b); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.clip::after { content: ""; position: absolute; left: 50%; top: 8px; width: 30px; height: 10px; margin-left: -15px; border-radius: 6px; background: #b98b5a; }
.sheet { background: #fffdf8; border-radius: 6px; padding: 22px 20px 12px; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; font: 750 22px/1 var(--display); letter-spacing: -.03em; }
.tag { font: 600 11.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }
.sheet-list { list-style: none; padding: 0; margin-top: 14px; }
.sheet-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1.5px dashed var(--line); }
.sheet-list b { display: block; font-weight: 650; font-size: 16px; }
.sheet-list small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.sheet-list em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.sheet-list em.warm { color: var(--ember); }
.box { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 5px; position: relative; }
.done .box::after { content: "✓"; position: absolute; left: 1px; top: -12px; font: 700 30px/1 var(--hand); color: var(--green-2); }
.done b { text-decoration: line-through; text-decoration-color: var(--ember); text-decoration-thickness: 2px; }

/* Roadmap: blueprint */
.blueprint { background-color: #2c4f73; color: #e8f0f8; padding: 76px 0 84px; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
.blueprint h2 { font-weight: 720; font-size: clamp(34px, 8.4vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.blueprint .sec-head p:not(.bp-label) { color: #c9d8e8; }
.blueprint .sec-head .bp-label { margin-top: 0; font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #a9c4e0; margin-bottom: 16px; }
.bp-grid { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 14px; }
.bp-grid li { border: 1.5px dashed rgba(232, 240, 248, .55); border-radius: 4px; padding: 20px 20px 22px; }
.bp-grid span { font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; color: #a9c4e0; }
.bp-grid h3 { font: 700 23px/1.15 var(--display); letter-spacing: -.025em; margin: 10px 0 8px; color: #fff; }
.bp-grid p { font-size: 15.5px; color: #d3e0ec; }
.rules { padding-top: 96px; }

@media (min-width: 960px) {
  .purchase { padding: 30px 0 130px; }
  .purchase-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
  .clipboard { justify-self: end; }
  .blueprint { padding: 110px 0 120px; }
  .bp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .rules { padding-top: 130px; }
}

/* Visual preferences, learned through the conversation */
.taste-section {padding-top:105px;padding-bottom:105px;scroll-margin-top:100px}.taste-heading {max-width:780px;margin-bottom:42px}.taste-heading>.hand {font-size:29px;color:var(--ember);margin-bottom:12px}.taste-heading h2 {font:750 clamp(34px,5vw,57px)/1.04 var(--display);letter-spacing:-.04em;margin-bottom:23px}.taste-heading>p:last-child{max-width:670px;font-size:18px;line-height:1.7;color:var(--ink-2)}.taste-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:42px;align-items:center}.taste-picture{margin:0;position:relative}.taste-picture>img{width:100%;height:360px;object-fit:cover;border-radius:12px;display:block}.taste-picture blockquote{position:absolute;bottom:43px;left:24px;background:#fff2bc;padding:18px 23px;box-shadow:2px 5px 0 #19281e22;transform:rotate(-3deg);font:27px/1.2 var(--hand);color:#2b3027}.taste-picture figcaption{font-size:12px;color:var(--ink-3);margin-top:12px}.taste-notebook{background:#fffdf8;border:1px solid var(--line);padding:30px;border-radius:7px;transform:rotate(1deg);box-shadow:7px 7px 0 #dfded3}.taste-kicker{text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin-bottom:19px;color:var(--ink-3)}.taste-notebook>div{display:flex;justify-content:space-between;gap:16px;border-top:1px dashed var(--line);padding:19px 0}.taste-notebook strong{font-size:13px;color:var(--green-2)}.taste-reply{font-size:18px;line-height:1.6;background:#eeeede;padding:20px;border-radius:12px;margin:12px 0}.taste-caption{font:23px/1.2 var(--hand);color:var(--ember)}.taste-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:50px}.taste-steps b{font:700 23px/1.2 var(--display)}.taste-steps p{font-size:16px;line-height:1.65;margin-top:12px;color:var(--ink-2)}.taste-footnote{max-width:740px;font-size:13px;color:var(--ink-3);margin-top:30px;line-height:1.7}
@media(max-width:760px){.taste-section{padding-top:70px;padding-bottom:70px}.taste-story,.taste-steps{grid-template-columns:1fr}.taste-story{gap:26px}.taste-picture>img{height:290px}.taste-notebook{padding:24px;transform:none}.taste-steps{gap:24px;margin-top:40px}.taste-picture blockquote{font-size:24px;left:15px}.taste-heading>p:last-child{font-size:17px}}

/* A thorough search, in Hattie's existing paper-and-notes visual language. */
.hero-intro{margin-top:22px;font-size:15px;font-weight:650;color:var(--green)}
.hero-intro+.lede{margin-top:10px}.keys{color:var(--green)}
.search-section{padding:82px 0;background:var(--paper-2);border-block:1px solid var(--line);scroll-margin-top:88px}
.search-heading{max-width:760px}.search-heading>.hand{font-size:29px;margin-bottom:12px}.search-heading h2{font-size:clamp(38px,6vw,66px);font-weight:740;line-height:1.03;letter-spacing:-.04em}.search-heading>p:last-child{max-width:640px;font-size:18px;color:var(--ink-2);margin-top:22px}
.search-work{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:45px}.search-work>li{padding:0 30px;border-left:1px solid #c9bda8}.search-work>li:first-child{padding-left:0;border:0}.search-work>li:last-child{padding-right:0}.search-number{font:32px/1 var(--hand);color:var(--ember)}.search-work h3{font-size:25px;font-weight:680;line-height:1.15;letter-spacing:-.025em;margin:12px 0}.search-work>li>p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.brief-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.brief-chips span{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px;transform:rotate(-1deg)}.brief-chips span:nth-child(2){transform:rotate(2deg)}
.search-checks{padding:0;list-style:none;margin-top:22px}.search-checks li{padding:8px 0;border-bottom:1px dashed #c9bda8;font-size:15px}.search-checks li::before{content:'✓';color:var(--green);font-weight:750;margin-right:10px}
.search-text{margin-top:22px;padding:17px 18px;background:var(--card);border-radius:15px 15px 15px 3px;box-shadow:2px 3px 0 #cfbea444;font-family:var(--imsg);font-size:15px}.search-text b{font-size:13px;color:var(--green)}.search-text p{margin:5px 0 9px;line-height:1.5}.search-text small{font-size:11px;color:var(--ink-3)}
.search-receipt{display:flex;gap:35px;align-items:center;border-block:1px solid #c9bda8;margin-top:48px;padding:25px 0}.search-receipt>div{flex-shrink:0}.search-receipt strong{display:block;font-size:43px;line-height:1.1;font-weight:650;letter-spacing:-.04em;color:var(--green)}.search-receipt span{font-size:14px;color:var(--ink-2)}.search-receipt p{max-width:440px;margin-left:auto;font-size:13px;line-height:1.65;color:var(--ink-3)}.search-follow{font-size:18px;margin-top:26px}.search-follow .hand{display:inline-block;font-size:25px;margin-left:10px}
.purchase-path{display:flex;flex-wrap:wrap;gap:10px 15px;list-style:none;padding:0;margin-top:22px;font-size:13px;color:var(--green);font-weight:600}.purchase-path li:not(:last-child)::after{content:'→';margin-left:15px;color:var(--ink-3)}
@media(min-width:960px){.hero h1{font-size:clamp(64px,6.2vw,89px)}.hero .lede{max-width:31em}.search-section{padding:108px 0}}
@media(max-width:760px){.search-section{padding:65px 0}.search-work{grid-template-columns:1fr;gap:28px;margin-top:35px}.search-work>li,.search-work>li:first-child,.search-work>li:last-child{padding:0 0 28px;border-left:0;border-bottom:1px solid #c9bda8}.search-work>li:last-child{border:0;padding-bottom:0}.search-receipt{gap:25px;flex-wrap:wrap;margin-top:30px}.search-receipt p{flex-basis:100%;margin:0}.search-follow .hand{margin:8px 0 0;display:block}}

.search-scale{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding:32px 0;margin-top:48px;border-block:1px solid #c9bda8}.search-scale strong{display:block;font:650 clamp(36px,4vw,54px)/1.1 var(--display);letter-spacing:-.04em;color:var(--green)}.search-scale span{display:block;margin-top:9px;font-size:16px;color:var(--ink-2)}.search-source{margin-top:15px;max-width:780px;font-size:12px;line-height:1.6;color:var(--ink-3)}.search-source a{text-underline-offset:3px}@media(max-width:760px){.search-scale{grid-template-columns:1fr;gap:24px;margin-top:30px;padding:26px 0}.search-scale strong{font-size:42px}.search-scale span{margin-top:5px}}