/* Hallmark · shape: kept · genre: playful · theme: hum (by request), recoloured to the brand · redesign: restyle · built: the project · hero: kept · nav: kept · footer: kept · signature: kept, the wall you slide open on three doors with Patch peeking
 * paper: oklch(97% 0.016 108), cut and grained · accent: var(--lime) · display: Chillax · body: Chillax · axes: light/roman-serif/cool · posture: full-palette (brand, lime, logo green, night) · job: subscribe · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S5 R3 V4 · weakest: H, four small caps labels sat over the heads; cut them, and the coming-soon fact now hangs on the wall as a sign */
/* Hallmark · Hum, recoloured: lime takes pear (the action), brand green the torn sheets, logo green the links and focus, night green the ink; blue and coral dropped so the logo stays the loudest colour */
/* Hallmark · waive 24b · the off-scale gaps and paddings (90px bands, 14px gaps, 10px pills) are the layout the user approved in v3 · a restyle changes the material and keeps that spacing */
/* Hallmark · dismissed 41 · --ink never sets text on --n-surface; on the night ledge the only ink is on lime buttons */
/* Hallmark · waive 12 · the overshoot sits only on .btn and the nav action, the card-stock primary that springs as it is pressed · Hum declares a spring posture for the primary control */
/* Hallmark · Hum, one exception: the hero headline is set in Gloock, the brand serif, by the user's choice; Hum's no-serif rule yields to the brand voice on that one line */
/* Hallmark · waive 80 · span.tilt, .walker, .hang, the shopfronts and the hero doors are Patch, the brand mascot, and his drawn street · the user chose this drawn world over a photographed one */
/* Hallmark · waive 81 · span.bricks is the wall's brick texture at 6% opacity, not a picture slot · the wall is the hero's control */
/* Hallmark · waive 39b · button.flip is the whole promise card the visitor taps to turn over, 260px tall · the whole card is the control, front and back */
/* Hallmark · answered F4 · the hero's second action is outlined (.btn.ghost); the checker reads its border as a fill */
/* Hallmark · answered F19 · Outfit carries buttons and labels at 500 and 600, Work Sans body at 400; 700 is only Caveat's handwritten notes */
/* Hallmark · dismissed 49 · the flip-card labels are whole cards, not one-line buttons, and wrap by design */
/* Hallmark · dismissed kept-headings · every heading is still on the page, set with typographic apostrophes */
html, body { margin: 0; overflow-x: clip }
img { max-width: 100% }
[hidden] { display: none !important }
/* Layout: hero (copy + a wall you slide open on three doors with offers), a scroll walk past local shops, "two sides" cards, three flip-card promises, and a dark waitlist band. Fixed light look on the app palette. */
:root {
  color-scheme: light;
  --page: #f7f8f2; --white: oklch(99.2% 0.004 120); --ink: #173e35; --sub: #58665f; --brand: #194b3e; --logo: #0a8a55; --lime: #d5f779; --soft: #edf2e8; --border: #dce3d7; --mint: #c9ddd2;
  --n-page: #101d18; --n-surface: #1b2c24; --n-ink: #f0f5e9; --n-sub: #b3c3b7; --n-border: #405646; --n-green: #5ed68c;
  --f-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --f-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Gloock", Georgia, serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;
  --f-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --shade: oklch(16% 0.02 170); --ink-deep: oklch(26.1% 0.037 172); --wm-green: oklch(50% 0.14 148); --tongue: oklch(74.0% 0.163 12); --glow-1: oklch(96.9% 0.059 98); --glow-2: oklch(91.1% 0.086 95); --glow-3: oklch(83.9% 0.106 93); --sky-1: oklch(90.7% 0.029 166); --sky-2: oklch(95.8% 0.013 160); --sky-3: oklch(93.5% 0.021 122); --road: oklch(91.4% 0.026 123); --road-edge: oklch(86.1% 0.025 132); --leg-far: oklch(92.1% 0.019 138); --leaf: oklch(80.6% 0.108 137); --gold: oklch(85.1% 0.107 81); --peach: oklch(91.1% 0.037 55); --rust: oklch(55.3% 0.174 38); --sky-blue: oklch(91.7% 0.026 264); --cobalt: oklch(48.8% 0.217 264); --blush: oklch(93.5% 0.025 30); --velvet: oklch(48% 0.17 25); --velvet-deep: oklch(40% 0.15 25); --mint-2: oklch(91.8% 0.036 137); --aqua: oklch(93.3% 0.026 179); --teal: oklch(51.1% 0.086 186); --cream: oklch(94.7% 0.052 104);

  --page: oklch(97% 0.016 108); --soft: oklch(94.2% 0.022 108); --border: oklch(86.5% 0.022 105); --white: oklch(98.8% 0.008 105);
  --ink: oklch(27% 0.04 170); --sub: oklch(44% 0.025 160); --mint: oklch(88% 0.03 160);
  --lime-deep: oklch(74% 0.15 120); --fringe: oklch(99.2% 0.006 105); --edge: oklch(82% 0.03 105);
  --f-display: "Chillax", ui-rounded, system-ui, sans-serif; --f-body: "Chillax", ui-rounded, system-ui, sans-serif; --f-serif: "Chillax", ui-rounded, system-ui, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .09 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='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 .16 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --shadow-paper: drop-shadow(0 0 .6px color-mix(in oklab, var(--ink) 30%, transparent)) drop-shadow(1.5px 2.5px 1.5px color-mix(in oklab, var(--ink) 10%, transparent)) drop-shadow(6px 14px 16px color-mix(in oklab, var(--ink) 13%, transparent));
  --tear-1: polygon(0% 0%, 100% 0%, 100.00% 5.5px, 98.32% 7.6px, 97.37% 7.6px, 96.19% 8.8px, 94.57% 5.5px, 93.91% 8.2px, 92.75% 10.3px, 92.12% 9.9px, 90.59% 7.7px, 88.79% 10.9px, 88.12% 7.1px, 86.82% 10.6px, 85.72% 8.4px, 84.57% 4.6px, 83.67% 4.1px, 82.42% 4.0px, 81.51% 4.0px, 80.31% 4.0px, 79.66% 6.7px, 78.34% 7.8px, 77.48% 11.8px, 75.78% 8.7px, 74.74% 10.5px, 73.22% 14.0px, 72.07% 15.0px, 70.61% 13.4px, 69.25% 15.0px, 67.57% 15.0px, 66.20% 11.3px, 65.28% 13.7px, 64.13% 11.0px, 62.82% 12.7px, 61.35% 11.7px, 60.18% 11.7px, 58.58% 11.9px, 57.47% 11.8px, 56.80% 8.2px, 55.30% 12.0px, 53.93% 11.2px, 53.09% 11.2px, 51.24% 13.4px, 49.94% 15.0px, 49.03% 15.0px, 47.21% 15.0px, 46.01% 13.2px, 44.70% 15.0px, 44.07% 15.0px, 42.42% 15.0px, 40.87% 15.0px, 39.60% 15.0px, 38.44% 11.4px, 36.73% 12.0px, 35.85% 12.0px, 34.62% 10.9px, 33.56% 11.2px, 32.16% 12.1px, 30.96% 8.3px, 30.05% 5.8px, 28.69% 8.6px, 27.07% 11.0px, 25.42% 9.1px, 23.75% 10.4px, 23.02% 6.6px, 22.37% 8.6px, 21.44% 5.5px, 20.03% 4.3px, 19.32% 4.0px, 18.04% 4.0px, 17.07% 5.7px, 15.88% 4.3px, 14.66% 4.0px, 13.55% 4.0px, 12.69% 4.0px, 10.94% 4.1px, 10.05% 4.9px, 8.41% 4.0px, 7.76% 4.0px, 6.24% 4.0px, 4.73% 5.4px, 3.43% 4.0px, 1.58% 6.4px, 0.31% 4.2px, 0% 10.3px); --tear-2: polygon(0% 0%, 100% 0%, 100.00% 14.5px, 98.19% 11.0px, 97.46% 13.7px, 95.91% 15.0px, 94.90% 15.0px, 93.52% 15.0px, 92.70% 14.4px, 91.58% 15.0px, 89.71% 15.0px, 88.41% 14.6px, 87.45% 10.8px, 86.79% 10.6px, 85.76% 9.6px, 84.02% 9.8px, 82.70% 7.7px, 82.04% 6.3px, 81.25% 6.4px, 79.37% 7.8px, 78.52% 10.9px, 76.90% 12.8px, 75.14% 14.9px, 73.53% 13.7px, 71.68% 15.0px, 70.85% 15.0px, 69.33% 14.7px, 68.05% 14.6px, 66.27% 14.6px, 64.60% 13.4px, 62.87% 15.0px, 61.67% 15.0px, 59.90% 15.0px, 58.66% 12.8px, 57.63% 14.4px, 56.80% 15.0px, 55.84% 15.0px, 54.83% 15.0px, 53.32% 15.0px, 52.05% 15.0px, 50.69% 13.5px, 49.80% 13.6px, 48.01% 14.6px, 47.29% 15.0px, 45.76% 15.0px, 44.89% 15.0px, 44.20% 15.0px, 43.23% 12.8px, 41.51% 9.7px, 40.23% 12.5px, 39.30% 10.2px, 37.57% 9.6px, 36.05% 5.8px, 34.98% 4.0px, 33.51% 4.0px, 31.69% 4.0px, 30.15% 4.0px, 29.21% 6.5px, 28.39% 4.0px, 26.90% 4.0px, 26.22% 7.9px, 25.41% 4.2px, 24.35% 5.1px, 22.80% 4.0px, 21.75% 4.0px, 20.57% 6.1px, 19.02% 9.3px, 17.45% 12.2px, 15.94% 12.0px, 15.03% 13.3px, 14.01% 10.1px, 12.83% 13.1px, 12.04% 13.8px, 10.93% 13.9px, 10.12% 15.0px, 9.17% 15.0px, 8.02% 11.1px, 6.70% 8.3px, 6.00% 4.5px, 5.18% 4.0px, 3.76% 4.1px, 1.91% 7.5px, 0.04% 5.4px, 0% 10.5px); --tear-3: polygon(0% 0%, 100% 0%, 100.00% 6.6px, 98.69% 5.6px, 97.31% 6.6px, 96.61% 4.0px, 94.94% 4.0px, 94.02% 8.0px, 92.81% 10.7px, 91.58% 11.8px, 90.77% 12.8px, 89.06% 13.0px, 87.51% 14.4px, 86.80% 15.0px, 85.44% 13.4px, 84.78% 15.0px, 83.56% 15.0px, 81.84% 15.0px, 80.06% 14.2px, 78.44% 13.7px, 76.64% 15.0px, 75.89% 12.1px, 75.00% 15.0px, 73.83% 15.0px, 72.83% 15.0px, 71.72% 13.8px, 70.36% 14.5px, 68.61% 15.0px, 66.82% 15.0px, 64.96% 15.0px, 64.13% 15.0px, 62.30% 15.0px, 60.96% 15.0px, 60.07% 15.0px, 58.73% 13.3px, 58.03% 15.0px, 56.16% 11.7px, 54.54% 11.0px, 53.72% 9.3px, 52.14% 12.3px, 51.46% 13.2px, 50.78% 15.0px, 49.74% 15.0px, 47.89% 15.0px, 46.01% 13.5px, 45.29% 14.3px, 44.63% 11.9px, 43.49% 12.7px, 42.67% 9.1px, 40.96% 7.6px, 39.14% 10.8px, 38.04% 10.4px, 36.77% 11.6px, 35.40% 12.1px, 34.00% 15.0px, 32.74% 14.4px, 31.21% 12.4px, 30.21% 15.0px, 28.94% 15.0px, 28.30% 14.3px, 26.95% 10.5px, 25.55% 11.5px, 24.85% 12.6px, 23.65% 14.0px, 22.58% 15.0px, 21.03% 11.2px, 20.33% 12.6px, 18.50% 10.6px, 17.31% 11.3px, 16.28% 10.2px, 15.27% 9.2px, 13.90% 7.6px, 12.80% 9.8px, 12.14% 10.3px, 10.60% 8.8px, 9.69% 11.2px, 8.77% 8.7px, 7.60% 10.3px, 6.85% 8.9px, 5.81% 11.6px, 4.63% 14.4px, 3.80% 13.1px, 2.36% 15.0px, 1.17% 12.8px, 0.39% 13.0px, 0% 13.2px); --tear-4: polygon(0% 0%, 100% 0%, 100.00% 6.6px, 99.25% 5.8px, 98.43% 4.0px, 97.30% 7.3px, 95.67% 9.5px, 94.77% 9.8px, 93.80% 7.1px, 93.04% 4.9px, 91.26% 7.5px, 89.63% 9.9px, 88.76% 8.4px, 87.35% 10.2px, 85.66% 13.3px, 84.92% 14.1px, 83.46% 14.2px, 82.61% 13.9px, 81.88% 15.0px, 80.17% 15.0px, 79.17% 15.0px, 77.83% 15.0px, 76.14% 15.0px, 75.00% 15.0px, 73.84% 12.3px, 72.83% 14.8px, 72.15% 11.2px, 70.74% 9.4px, 69.45% 9.2px, 68.40% 13.2px, 67.53% 12.5px, 66.65% 13.5px, 65.68% 12.4px, 64.12% 10.9px, 62.80% 14.2px, 62.04% 10.7px, 61.13% 12.8px, 59.74% 10.7px, 58.70% 8.1px, 57.50% 4.4px, 56.01% 7.6px, 54.19% 9.5px, 52.36% 5.6px, 51.38% 9.4px, 49.78% 8.6px, 47.98% 9.6px, 46.33% 8.0px, 45.47% 7.5px, 44.67% 6.6px, 42.84% 5.2px, 42.21% 4.0px, 41.37% 6.3px, 40.29% 4.6px, 39.54% 8.4px, 38.39% 6.1px, 37.69% 4.0px, 36.85% 5.4px, 36.04% 4.0px, 34.80% 4.0px, 32.93% 4.0px, 31.65% 6.2px, 30.51% 10.1px, 29.29% 8.0px, 28.15% 4.3px, 27.00% 4.0px, 25.26% 6.6px, 24.01% 4.0px, 23.07% 4.0px, 22.18% 4.0px, 20.47% 4.0px, 19.78% 7.4px, 18.45% 11.3px, 17.32% 14.6px, 15.88% 15.0px, 14.32% 15.0px, 13.58% 12.6px, 11.87% 15.0px, 10.09% 13.7px, 8.64% 15.0px, 7.21% 15.0px, 5.93% 15.0px, 4.44% 13.1px, 2.66% 15.0px, 1.95% 15.0px, 0.12% 15.0px, 0% 5.4px);
  --tear-left: polygon(7.5px 0.00%, 9.8px 2.48%, 11.8px 5.37%, 8.0px 8.21%, 11.5px 10.14%, 12.0px 12.44%, 11.8px 13.67%, 12.0px 15.16%, 8.1px 17.31%, 6.3px 18.74%, 8.5px 21.58%, 10.8px 22.90%, 11.8px 24.17%, 7.8px 25.43%, 5.5px 28.17%, 9.3px 29.60%, 7.6px 32.34%, 8.0px 35.27%, 5.6px 37.62%, 7.1px 40.51%, 10.3px 43.44%, 9.2px 45.04%, 6.3px 46.37%, 4.7px 47.50%, 0.8px 49.70%, 0.0px 52.06%, 2.5px 53.68%, 1.1px 55.64%, 2.7px 57.60%, 6.5px 58.72%, 8.5px 59.76%, 4.7px 62.45%, 3.6px 65.03%, 0.0px 67.19%, 0.0px 68.28%, 0.0px 71.19%, 3.4px 73.70%, 2.2px 76.59%, 2.4px 78.30%, 0.0px 80.85%, 2.4px 83.34%, 0.0px 86.06%, 0.0px 88.95%, 0.9px 90.64%, 0.0px 93.47%, 0.4px 96.32%, 0.0px 97.94%, 0.0px 99.30%, 12.0px 100%, 100% 100%, 100% 0%);
}
* { box-sizing: border-box }
body { background: var(--page); color: var(--ink); font: 16px/1.55 var(--f-body) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.join :focus-visible, .side-card.b :focus-visible, .flip.on:focus-visible { outline-color: var(--lime) }
.in { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.h-serif { margin: 0; font: 400 clamp(44px, 6.6vw, 88px)/.96 var(--f-serif); letter-spacing: -0.02em; text-wrap: balance }
.h2 { margin: 0; font: 400 clamp(32px, 4.4vw, 56px)/1.02 var(--f-serif); letter-spacing: -0.015em; text-wrap: balance }
mark { background: linear-gradient(transparent 62%, var(--lime) 62% 92%, transparent 92%); color: inherit; padding: 0 .06em }
.lede { margin: 0; font-size: 18px; color: var(--sub); max-width: 44ch }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 16px; border: 0; font: 600 15px var(--f-display); cursor: pointer; text-decoration: none; background: var(--brand); color: var(--white); transition: transform .15s }
.btn:active { transform: scale(.97) }
.btn:disabled { opacity: .55; cursor: not-allowed }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border) }
.btn svg { width: 18px; height: 18px }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px }
.brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: 12px }
.brand .brandmark { height: 48px; width: auto; display: block; position: relative; z-index: 2 }
.brand .pk { transform-box: fill-box; transform-origin: 80% 60%; transition: transform .45s cubic-bezier(.3,1.4,.5,1) }
.brand .wm-clip { display: inline-block; overflow: hidden; max-width: 0; margin-left: -10px; transition: max-width .6s cubic-bezier(.3,1.1,.4,1) }
.brand .wm { display: inline-block; padding-left: 14px; font: 600 26px/1.3 "Fredoka", var(--f-display); color: var(--ink-deep); white-space: nowrap; transform: translateX(-105%); transition: transform .6s cubic-bezier(.3,1.25,.45,1) }
.brand .wm b { font-weight: inherit; color: var(--wm-green) }
.brand:hover .wm-clip, .brand:focus-visible .wm-clip, .brand.demo .wm-clip { max-width: 240px }
.brand:hover .wm, .brand:focus-visible .wm, .brand.demo .wm { transform: none }
.brand:hover .pk, .brand:focus-visible .pk, .brand.demo .pk { transform: translateX(-3px) rotate(-10deg) }
@media (hover: none) { .brand .wm-clip { max-width: 240px } .brand .wm { transform: none } }
.nav .links { display: flex; gap: 6px; align-items: center }
.nav .links a { font: 500 14px var(--f-display); color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 10px }
.nav .links a:hover { background: var(--soft) }
.nav .links a.cta { background: var(--brand); color: var(--white); padding: 10px 16px }
@media (max-width: 720px) { .nav .links a:not(.cta) { display: none } }

/* puppy */
.pup { display: block; width: 100%; height: auto; overflow: visible }
.pup .face, .pup .paw { fill: var(--white); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round }
.pup .ear { fill: var(--ink); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 10% }
.pup .spot { fill: var(--ink); opacity: .5 }
.pup .eye, .pup .nose { fill: var(--ink) } .pup .shine { fill: var(--white) }
.pup .eye, .pup .shine { transform-box: fill-box; transform-origin: center }
.pup .tongue { fill: var(--tongue); stroke: var(--ink); stroke-width: 3 }
.pup .mouth, .pup .tuft, .pup .happy, .pup .toe { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round }
.pup .toe { stroke-width: 3.5 }
.pup .happy { opacity: 0 } .pup.is-happy .eyes { opacity: 0 } .pup.is-happy .happy { opacity: 1 }
.pup.no-paws .paws { display: none }
.paw-svg { display: block; width: 100%; overflow: visible }
.paw-svg .paw { fill: var(--white); stroke: var(--ink); stroke-width: 4.5 } .paw-svg .toe { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round }

/* shopfronts */
.shop { position: relative; width: var(--w, 120px); aspect-ratio: 150 / 230; background: var(--wall); border-radius: 14px 14px 0 0; flex: none; box-shadow: inset 0 -10px 0 color-mix(in oklab, var(--shade) 5%, transparent) }
.shop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7%; background: color-mix(in oklab, var(--shade) 8%, transparent); border-radius: 14px 14px 0 0 }
.shop .aw { position: absolute; left: -5%; right: -5%; top: 12%; height: 14%; border-radius: 0 0 14px 14px; background: repeating-linear-gradient(90deg, var(--aw) 0 14%, var(--white) 14% 28%); box-shadow: 0 4px 0 color-mix(in oklab, var(--shade) 8%, transparent) }
.shop .win { position: absolute; left: 9%; top: 34%; width: 50%; height: 40%; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 80%, var(--glow-1), var(--glow-2) 60%, var(--glow-3)); box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--white) 70%, transparent) }
.shop .win i { position: absolute; bottom: 12%; width: 22%; border-radius: 4px 4px 0 0; background: var(--aw); opacity: .75 }
.shop .door { position: absolute; right: 9%; bottom: 0; width: 26%; height: 44%; border-radius: 8px 8px 0 0; background: var(--ink) }
.shop .door::after { content: ""; position: absolute; right: 18%; top: 52%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--lime) }
.whisper { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; background: var(--white); color: var(--ink); font: 700 clamp(15px, 1.5vw, 20px)/1.1 var(--f-hand); padding: 8px 12px; border-radius: 14px; box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--ink) 45%, transparent); white-space: nowrap; opacity: 0; scale: .6; transition: opacity .3s, scale .35s cubic-bezier(.34,1.56,.64,1); pointer-events: none; z-index: 3 }
.whisper::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; rotate: 45deg; translate: -50% 0; border-radius: 0 0 3px 0 }
.whisper.on { opacity: 1; scale: 1 }
.tree { position: relative; flex: none; width: var(--tw, 44px); aspect-ratio: 1 / 2.2 }
.tree::before { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; background: var(--leaf); border: 3px solid var(--ink) }
.tree::after { content: ""; position: absolute; left: 44%; width: 12%; top: 40%; bottom: 0; background: var(--ink); border-radius: 3px; z-index: -1 }
.lamp { position: relative; flex: none; width: 16px; height: var(--lh, 200px) }
.lamp::before { content: ""; position: absolute; left: 6px; width: 4px; top: 10px; bottom: 0; background: var(--ink); border-radius: 2px }
.lamp::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); border: 3px solid var(--ink) }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 24px 60px }
.hero .copy { display: grid; gap: 22px; min-width: 0 }
.hero .actions { display: flex; gap: 10px; flex-wrap: wrap }
.hero .hand { font: 700 24px var(--f-hand); color: var(--logo); rotate: -3deg; display: inline-block }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr } }
.stage { position: relative; min-width: 0 }
.panel { position: relative; height: clamp(440px, 50vw, 540px); border-radius: 32px; overflow: hidden; background: linear-gradient(var(--sky-1), var(--sky-2) 62%, var(--sky-3) 62%); touch-action: pan-y; box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--ink) 45%, transparent) }
.panel .sun { position: absolute; left: 14%; top: 12%; width: 70px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 12px color-mix(in oklab, var(--lime) 35%, transparent) }
.panel .cloud { position: absolute; top: 20%; width: 80px; height: 24px; border-radius: 20px; background: var(--white); box-shadow: 30px -10px 0 4px var(--white) }
.panel .doors { position: absolute; z-index: 5; left: 0; right: 56px; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding: 0 8px 30px }
.panel .doors::after { content: ""; position: absolute; left: 0; right: -56px; bottom: 0; height: 30px; background: var(--road); border-top: 4px solid var(--road-edge); z-index: -1 }
.col { position: relative; display: flex; justify-content: center }
.hdoor { --dw: clamp(68px, 8.5vw, 110px); position: relative; width: var(--dw); height: calc(var(--dw) * 1.45); border: 0; padding: 0; background: none; cursor: pointer; font: inherit }
.hdoor:focus-visible { outline: 2px solid var(--logo); outline-offset: 5px; border-radius: 10px }
.hdoor .inside { position: absolute; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, var(--glow-1), var(--glow-2) 70%) }
.hdoor .inside svg { width: 46%; height: auto }
.hdoor.t-shop .frame { position: absolute; inset: 0; background: var(--peach); border-radius: 12px 12px 0 0 }
.hdoor.t-shop .frame::before { content: ""; position: absolute; left: -5px; right: -5px; top: 9%; height: 13%; border-radius: 0 0 10px 10px; background: repeating-linear-gradient(90deg, var(--rust) 0 14px, var(--white) 14px 28px) }
.hdoor.t-shop .inside { left: 24%; right: 24%; bottom: 0; height: 58%; border-radius: 40px 40px 0 0 }
.hdoor.t-shop .leaf { position: absolute; left: 24%; right: 24%; bottom: 0; height: 58%; border-radius: 40px 40px 0 0; background: var(--ink); transform-origin: left center; transition: transform .6s cubic-bezier(.3,1.3,.5,1) }
.hdoor.t-shop .leaf::after { content: ""; position: absolute; right: 14%; top: 52%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: var(--lime) }
.col.open .hdoor.t-shop .leaf { transform: perspective(400px) rotateY(-78deg) }
.hdoor.t-laptop .desk { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--sky-blue); border-radius: 8px 8px 0 0 }
.hdoor.t-laptop .desk::before { content: ""; position: absolute; left: 8%; right: 8%; top: -4px; height: 8px; background: var(--ink); border-radius: 4px }
.hdoor.t-laptop .lid { position: absolute; left: 10%; right: 10%; bottom: calc(30% + 4px); height: 46%; background: var(--ink); border-radius: 8px 8px 0 0; padding: 6%; transform-origin: bottom center; transform: perspective(500px) rotateX(-86deg); transition: transform .7s cubic-bezier(.3,1.25,.5,1) }
.hdoor.t-laptop .lid .inside { position: static; width: 100%; height: 100%; border-radius: 4px }
.col.open .hdoor.t-laptop .lid { transform: perspective(500px) rotateX(0) }
.hdoor.t-curtain .frame { position: absolute; inset: 0; background: var(--blush); border-radius: 10px 10px 0 0 }
.hdoor.t-curtain .frame::before { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 16%; border-radius: 8px; background: var(--ink); box-shadow: inset 0 0 0 3px var(--gold) }
.hdoor.t-curtain .inside { left: 12%; right: 12%; bottom: 0; height: 66% }
.hdoor.t-curtain .drape { position: absolute; left: 12%; right: 12%; bottom: 0; height: 66%; display: flex; overflow: hidden }
.hdoor.t-curtain .drape i { flex: 1; background: repeating-linear-gradient(90deg, var(--velvet) 0 8px, var(--velvet-deep) 8px 16px); transition: transform .7s cubic-bezier(.3,1.2,.5,1) }
.col.open .hdoor.t-curtain .drape i:first-child { transform: translateX(-88%) } .col.open .hdoor.t-curtain .drape i:last-child { transform: translateX(88%) }
.offer { position: absolute; left: 5px; right: 5px; bottom: calc(100% + 12px); background: var(--white); border-radius: 14px; border-top: 5px solid var(--c); padding: 9px 11px 11px; text-align: left; box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--ink) 45%, transparent); opacity: 0; scale: .6; transform-origin: 50% 100%; transition: opacity .25s, scale .45s cubic-bezier(.34,1.56,.64,1); pointer-events: none }
.col.open .offer { opacity: 1; scale: 1 }
.offer small { display: block; font: 600 12px/1.2 var(--f-display); color: var(--c) }
.offer b { display: block; margin-top: 4px; font: 400 clamp(14px, 1.35vw, 18px)/1.12 var(--f-serif); color: var(--ink) }
.peeked { margin: 12px 4px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 600 13px var(--f-display); color: var(--sub); font-variant-numeric: tabular-nums }
.peeked span:last-child { font-weight: 400 }
.heard { position: absolute; z-index: 5; left: 16px; top: 16px; background: var(--white); border-radius: 999px; padding: 6px 12px; font: 600 12px var(--f-display); font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--ink) 30%, transparent) }
.wall { position: absolute; top: 0; bottom: 0; left: var(--reveal, 0px); width: 130%; background: var(--brand); z-index: 6; border-radius: 40px 0 0 40px; cursor: grab; touch-action: none; box-shadow: -10px 0 30px -10px color-mix(in oklab, var(--shade) 35%, transparent) }
.wall:active { cursor: grabbing }
.wall .bricks { position: absolute; inset: 0; border-radius: inherit; opacity: .06; background-image: linear-gradient(var(--shade) 2px, transparent 2px), linear-gradient(90deg, var(--shade) 2px, transparent 2px); background-size: 100% 46px, 92px 46px; pointer-events: none }
.wall .pull { position: absolute; left: 34px; top: 50%; translate: 0 -50%; display: grid; gap: 6px; color: var(--mint); pointer-events: none; max-width: 200px }
.wall .pull b { font: 700 26px/1 var(--f-hand); color: var(--lime) }
.wall .pull span { font: 500 14px var(--f-display) }
.wall .pull svg { width: 46px; color: var(--lime) }
.wall .gb { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 6px; height: 64px; border-radius: 3px; background: color-mix(in oklab, var(--white) 25%, transparent) }
.puppy { position: absolute; z-index: 4; left: calc(var(--reveal, 0px) - 112px); top: 58px; width: 160px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50% }
.puppy .tilt { display: block; transform-origin: 70% 60% }
.paw-grip { position: absolute; z-index: 7; left: calc(var(--reveal, 0px) - 20px); top: 172px; width: 40px; rotate: -90deg; pointer-events: none }
.bubble { position: absolute; z-index: 8; left: max(12px, calc(var(--reveal, 0px) - 250px)); top: 12px; background: var(--white); padding: 10px 14px; border-radius: 16px 16px 4px 16px; font: 500 14px var(--f-display); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--ink) 40%, transparent); white-space: nowrap; pointer-events: none }

/* the opening-soon sign hung on the wall; it swings as the wall moves */
.wall .sign { position: absolute; left: 56%; top: 0; width: 132px; transform-origin: 50% 0; pointer-events: none }
.wall .sign .hook { display: block; width: 2px; height: 46px; margin: 0 auto; background: var(--mint) }
.wall .sign .board { display: block; margin-top: -2px; padding: 8px 10px 10px; border-radius: 10px; background: var(--lime); color: var(--ink); font: 700 26px/1 var(--f-hand); text-align: center; box-shadow: 0 6px 0 color-mix(in oklab, var(--shade) 25%, transparent) }
.wall .sign .board::before { content: ""; display: block; width: 10px; height: 10px; margin: -4px auto 6px; border-radius: 50%; background: var(--brand) }
@media (max-width: 560px) { .wall .sign { left: 60%; width: 108px } .wall .sign .board { font-size: 21px } }

/* paw prints Patch leaves on the walk */
.walk .print { position: absolute; bottom: -34px; width: 18px; height: 16px; color: var(--road-edge); pointer-events: none; animation: pfade 3.2s var(--ease-out, ease-out) forwards }
.walk .print svg { display: block; width: 100%; height: 100%; fill: currentColor }
@keyframes pfade { 0% { opacity: 0; transform: scale(.6) } 12% { opacity: 1; transform: none } 70% { opacity: 1 } 100% { opacity: 0 } }

/* walk */
.walk { position: relative; height: 340vh; background: linear-gradient(var(--sky-1), var(--sky-2)) }
.walk .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden }
.walk .caps { position: absolute; z-index: 4; left: 0; right: 0; top: 9vh; text-align: center; padding: 0 20px }
.walk .cap { position: absolute; left: 0; right: 0; padding: 0 20px; opacity: 0; translate: 0 16px; transition: opacity .5s, translate .5s }
.walk .cap.on { opacity: 1; translate: 0 0 }
.walk .track { position: absolute; left: 0; bottom: 70px; display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 40px); padding: 0 50vw; will-change: transform }
.walk .track .shop { --w: clamp(130px, min(17vw, 26vh), 220px) }
.walk .track .tree { --tw: clamp(40px, 5vw, 64px) }
.walk .track .lamp { --lh: clamp(160px, 30vh, 260px) }
.walk .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: var(--road); border-top: 5px solid var(--road-edge) }
.walk .ground::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 4px; background: repeating-linear-gradient(90deg, var(--white) 0 40px, transparent 40px 80px); background-position-x: var(--gx, 0) }
.walk .walker { position: absolute; z-index: 5; left: 50%; bottom: 44px; width: clamp(160px, 17vw, 230px); translate: -50% 0 }
.walk .walker .flip-x { display: block; transition: scale .25s }
.walk .walker.left .flip-x { scale: -1 1 }
.walk .sniff-txt { position: absolute; left: 70%; top: 0; font: 700 22px var(--f-hand); color: var(--logo); opacity: 0; pointer-events: none; white-space: nowrap }
.walk .progress { position: absolute; z-index: 5; left: 50%; bottom: 16px; translate: -50% 0; width: min(240px, 60%); height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--ink) 15%, transparent); overflow: hidden }
.walk .progress i { display: block; height: 100%; width: 0; background: var(--brand) }

/* the walking dog (side view) */
.dog { display: block; width: 100%; height: auto; overflow: visible }
.dog .body, .dog .skull, .dog .snout, .dog .leg rect { fill: var(--white); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round }
.dog .leg.far rect { fill: var(--leg-far) }
.dog .patch { fill: var(--ink); opacity: .85 }
.dog .ear { fill: var(--ink); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round }
.dog .nose, .dog .eye { fill: var(--ink) } .dog .shine { fill: var(--white) }
.dog .collar { fill: none; stroke: var(--lime); stroke-width: 8; stroke-linecap: round }
.dog .tag { fill: var(--lime); stroke: var(--ink); stroke-width: 2.5 }
.dog .mouth, .dog .tuft, .dog .happy { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round }
.dog .tongue { fill: var(--tongue); stroke: var(--ink); stroke-width: 2.5; opacity: 0; transition: opacity .2s }
.dog .happy { opacity: 0 }
.dog .shadow { fill: color-mix(in oklab, var(--ink) 12%, transparent) }
.dog .leg, .dog .tail, .dog .head, .dog .up, .dog .eye, .dog .shine { transform-box: fill-box }
.dog .leg { transform-origin: 50% 8% }
.dog .tail { transform-origin: 100% 100%; animation: dwag .7s ease-in-out infinite }
.dog .head { transform-origin: 15% 85%; transition: rotate .35s }
.dog .eye, .dog .shine { transform-origin: center; animation: dblink 4.2s infinite }
.dog.walking .lb, .dog.walking .rf { animation: dstepA .46s ease-in-out infinite }
.dog.walking .rb, .dog.walking .lf { animation: dstepB .46s ease-in-out infinite }
.dog.walking .up { animation: dbob .23s ease-in-out infinite alternate }
.dog.walking .tail { animation-duration: .32s }
.dog.walking .tongue, .dog.happy .tongue { opacity: 1 }
.dog.sniff .head { rotate: 18deg }
.dog.sniff .tail { animation-duration: .25s }
.dog.happy .eyes { opacity: 0 } .dog.happy .happy { opacity: 1 }
.dog.happy .tail { animation-duration: .2s }
@keyframes dstepA { 0%, 100% { rotate: 26deg } 50% { rotate: -26deg } }
@keyframes dstepB { 0%, 100% { rotate: -26deg } 50% { rotate: 26deg } }
@keyframes dbob { from { translate: 0 0 } to { translate: 0 -4px } }
@keyframes dwag { 0%, 100% { rotate: -14deg } 50% { rotate: 18deg } }
@keyframes dblink { 0%, 93%, 100% { scale: 1 1 } 96% { scale: 1 .1 } }
@media (prefers-reduced-motion: reduce) { .dog * { animation: none !important } }

/* two sides */
.sides { padding-block: 90px }
.sides .head { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 36px }
.split { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch }
.side-card { position: relative; border-radius: 30px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; min-width: 0; transform-style: preserve-3d; transition: box-shadow .3s; cursor: default }
.side-card.a { background: var(--white); border: 1px solid var(--border) }
.side-card.b { background: var(--brand); color: var(--white) }
.side-card .hand { font: 700 26px var(--f-hand); color: var(--logo) } .side-card.b .hand { color: var(--lime) }
.side-card h3 { text-wrap: balance; margin: 0; font: 400 clamp(28px, 3vw, 40px)/1.05 var(--f-serif) }
.side-card p { margin: 0; color: var(--sub) } .side-card.b p { color: var(--mint) }
.side-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.side-card li { display: flex; gap: 10px; align-items: baseline }
.side-card li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; translate: 0 -2px; box-shadow: 0 0 0 2px var(--ink) }
.side-card.b .btn { background: var(--lime); color: var(--ink) }
.side-card .btn { justify-self: start; margin-top: 6px }
.crossing { position: relative; display: grid; place-items: center }
.crossing::before { content: ""; position: absolute; top: 10%; bottom: 10%; left: 50%; width: 46px; translate: -50% 0; background: repeating-linear-gradient(var(--white) 0 18px, transparent 18px 34px); border-radius: 6px; opacity: .9 }
.crossing .cpup { position: relative; width: 116px; z-index: 2 }
.crossing .cpup .flip-x { display: block; transition: scale .3s }
.crossing .cpup.left .flip-x { scale: -1 1 }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 20px } .crossing { height: 110px } .crossing::before { top: 50%; bottom: auto; left: 10%; right: 10%; width: auto; height: 40px; translate: 0 -50%; background: repeating-linear-gradient(90deg, var(--white) 0 18px, transparent 18px 34px) } }

/* promises */
.promises { background: var(--white); border-block: 1px solid var(--border); padding-block: 80px }
.promises .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; perspective: 1200px }
.flip { all: unset; cursor: pointer; display: block; position: relative; height: 260px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1) }
.flip:focus-visible { outline: 2px solid var(--logo); outline-offset: 4px; border-radius: 26px }
.flip.on { transform: rotateY(180deg) }
.flip .f, .flip .bk { position: absolute; inset: 0; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px }
.flip .f { background: var(--soft) }
.flip .f b { font: 400 54px/1 var(--f-serif) }
.flip .f span { font: 700 20px var(--f-hand); color: var(--logo) }
.flip .bk { background: var(--ink); color: var(--n-ink); transform: rotateY(180deg); visibility: hidden; transition: visibility 0s .35s }
.flip.on .bk { visibility: visible; transition-delay: 0s }
.flip.on .f { visibility: hidden; transition: visibility 0s .35s }
.flip .bk p { margin: 0; font: 500 20px/1.35 var(--f-display); max-width: 28ch }
.flip .bk small { font: 700 20px var(--f-hand); color: var(--lime) }
@media (max-width: 900px) { .promises .grid { grid-template-columns: 1fr } }

/* join */
.join { background: var(--n-page); color: var(--n-ink); padding-block: 90px 80px; overflow: hidden }
.join .center { display: grid; justify-items: center; text-align: center; gap: 14px }
.join .h2 span { color: var(--n-green) }
.join .lede { color: var(--n-sub) }
.ledge-wrap { position: relative; width: min(580px, 100%); margin: 120px auto 0 }
.hang { position: absolute; left: 50%; bottom: calc(100% - 64px); width: 180px; margin-left: -90px; z-index: 0 }
.ledge { position: relative; z-index: 1; background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 28px; padding: 34px 26px 26px; display: grid; justify-items: center; gap: 14px }
.ledge .lp { position: absolute; top: -25px; width: 46px; z-index: 2 }
.ledge .lp.l { left: calc(50% - 68px) } .ledge .lp.r { left: calc(50% + 22px) }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--n-page); gap: 4px; flex-wrap: wrap; justify-content: center }
.seg button { all: unset; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 600 14px var(--f-display); color: var(--n-sub) }
.seg button[aria-selected="true"] { background: var(--n-green); color: var(--ink) }
.seg button:focus-visible { outline: 2px solid var(--n-green); outline-offset: 2px }
.form { display: flex; gap: 8px; width: min(440px, 100%); flex-wrap: wrap; justify-content: center }
.form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.form input { flex: 1 1 200px; min-width: 0; height: 50px; padding: 0 18px; border-radius: 16px; font: 15px var(--f-body); border: 1px solid var(--n-sub); background: var(--n-page); color: var(--n-ink) }
.form input::placeholder { color: var(--n-sub) }
.form .btn { background: var(--n-green); color: var(--ink) }
.form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.fine { margin: 6px 0 0; font-size: 13px; color: var(--n-sub) }
.msg { min-height: 20px; font-size: 13px; margin: 0; color: var(--n-green); font-weight: 500 }
footer.foot { background: var(--n-page); color: var(--n-sub); border-top: 1px solid var(--n-border); font-size: 13px }
footer.foot .in { display: flex; justify-content: space-between; gap: 12px; padding-block: 20px; flex-wrap: wrap }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } .whisper { opacity: 1; scale: 1 } }
@media (max-width: 560px) {
  .puppy { width: 116px; top: 44px; left: calc(var(--reveal, 0px) - 82px) }
  .paw-grip { top: 128px; width: 32px; left: calc(var(--reveal, 0px) - 16px) }
  .panel .doors { padding: 0 4px 30px }
  .offer { left: 2px; right: 2px; padding: 7px 8px 8px; border-top-width: 4px }
  .offer small { font-size: 9px }
  .offer b { font-size: 13px }
}

/* ===== Hum material: cut paper on the PeekAround palette ===== */
body { background: var(--grain), var(--fibre), var(--page); font-weight: 500 }
.h-serif, .h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.03 }
.side-card h3, .flip .f b, .offer b { font-weight: 600; letter-spacing: -0.02em }
mark { background: linear-gradient(transparent 58%, var(--lime) 58% 94%, transparent 94%) }

/* card-stock controls that press down */
.btn, .nav .links a.cta { --e: 5px; border: 0; border-radius: 16px; background: var(--grain), var(--lime); color: var(--ink); box-shadow: inset 0 1px 0 var(--fringe), 0 var(--e) 0 0 var(--lime-deep); transition: translate 120ms cubic-bezier(.34,1.56,.64,1), box-shadow 120ms cubic-bezier(.34,1.56,.64,1) }
.btn { height: 54px }
.btn:hover, .nav .links a.cta:hover { --e: 7px; translate: 0 -2px; background: var(--grain), var(--lime) }
.btn:active, .nav .links a.cta:active { --e: 1px; translate: 0 4px; transform: none }
.btn.ghost { background: var(--grain), var(--white); border: 0; box-shadow: inset 0 0 0 1px var(--border), 0 var(--e) 0 0 var(--edge); transition-timing-function: cubic-bezier(.22,1,.36,1) }
.side-card.b .btn, .join .form .btn { background: var(--grain), var(--lime); color: var(--ink) }
.form input { height: 54px; border-radius: 14px }
.seg button[aria-selected="true"] { background: var(--grain), var(--lime); color: var(--ink) }
.nav .links a:not(.cta):hover { background: var(--soft) }

/* torn sheets: each band starts on a torn edge of the band above, its pale core a pixel proud */
.walk, .sides, .promises, .join { position: relative }
.walk::before, .sides::before, .promises::before, .join::before,
.walk::after, .sides::after, .promises::after, .join::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none }
.walk::after, .sides::after, .promises::after, .join::after { z-index: 7; top: 3px; background: var(--fringe) }
.walk::before, .sides::before, .promises::before, .join::before { z-index: 8; filter: var(--shadow-paper) }
.walk::before { background: var(--grain), var(--page); clip-path: var(--tear-1) } .walk::after { clip-path: var(--tear-1) }
.sides::before { background: var(--grain), var(--sky-2); clip-path: var(--tear-2) } .sides::after { clip-path: var(--tear-2) }
.promises { border-block: 0; background: var(--grain), var(--fibre), var(--white) }
.promises::before { background: var(--grain), var(--page); clip-path: var(--tear-3) } .promises::after { clip-path: var(--tear-3) }
.join { background: var(--grain), var(--n-page) }
.join::before { background: var(--grain), var(--white); clip-path: var(--tear-4) } .join::after { clip-path: var(--tear-4); background: var(--edge) }
.walk { background: var(--grain), var(--fibre), linear-gradient(var(--sky-1), var(--sky-2)) }

/* every cut sheet lit from the top left */
.panel { box-shadow: none; filter: var(--shadow-paper); background: var(--grain), linear-gradient(var(--sky-1), var(--sky-2) 62%, var(--sky-3) 62%) }
.side-card, .ledge, .offer, .whisper, .bubble, .heard, .flip .f, .flip .bk, .shop, .hdoor, .wall .sign .board { filter: var(--shadow-paper) }
.side-card { box-shadow: none !important }
.side-card.a { border: 0; background: var(--grain), var(--fibre), var(--white) }
.side-card.b { background: var(--grain), var(--fibre), var(--brand) }
.flip .f { background: var(--grain), var(--fibre), var(--soft) }
.flip .bk { background: var(--grain), var(--ink) }
.ledge { border: 0; background: var(--grain), var(--n-surface) }
.offer, .whisper, .bubble, .heard { background: var(--grain), var(--white); box-shadow: none }
.shop { background: var(--grain), var(--wall); box-shadow: none }
.wall .sign .board { background: var(--grain), var(--lime); box-shadow: none }

/* Patch as a paper cut-out */
.pup, .dog { filter: var(--shadow-paper) }

/* the wall is a torn sheet of green card */
.wall { background: var(--grain), var(--fibre), var(--brand); border-radius: 0; box-shadow: none; clip-path: var(--tear-left) }
.wall .bricks { border-radius: 0 }

/* the hero headline keeps Gloock, the brand's serif voice; everything else stays Chillax */
:root { --f-headline: "Gloock", Georgia, serif }
.hero .h-serif { font-family: var(--f-headline); font-weight: 400; letter-spacing: -0.02em; line-height: .96 }

/* fonts, served from this site: Chillax (Fontshare, ITF Free Font License), Gloock, Caveat and Fredoka (Google Fonts, SIL OFL); latin only, and Fredoka cut to the letters of the wordmark */
@font-face { font-family: "Chillax"; src: url("assets/fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: "Chillax"; src: url("assets/fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: "Gloock"; src: url("assets/fonts/gloock.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Caveat"; src: url("assets/fonts/caveat-700.woff2") format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: "Fredoka"; src: url("assets/fonts/fredoka-wm.woff2") format("woff2"); font-weight: 600; font-display: swap }