@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-italic.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --cream: #F1E9D8; --ivory: #F7F2E7; --sky: #EEE0C0;
  --kraft: #B98A58; --kraft-d: #8A6440;
  --sage: #A9B89A; --sage-d: #93A870;
  --leaf: #3A8A2E; --forest: #24452A; --forest-d: #1C3322;
  --char: #2A2A28; --ink: #1F211D; --ink-2: #4A4940;
  --accent: #D65A2C; --accent-d: #B4461D;
  --sx: .55; --sy: .8;           /* shadow direction per unit of lift, driven by the sun */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 5vw, 72px);
  --max: 1240px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--sky); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: hidden; }
html, body { overflow-x: clip; }
.sheet { overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ivory); padding: 10px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; font-weight: 560; letter-spacing: -.02em; line-height: .98; }
.display em { font-style: italic; font-weight: 420; color: var(--forest); }
.kicker { font: 700 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--forest); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 9px; background: var(--accent); clip-path: polygon(0 12%, 100% 0, 96% 100%, 4% 88%); }

/* ---------- buttons: little cut paper tabs that lift toward the light ---------- */
.btn { --lift: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 24px; font: 700 16px/1.1 var(--sans); text-decoration: none; border: 0; cursor: pointer; color: var(--ink);
  border-radius: 2px 3px 2px 4px; box-shadow: calc(var(--sx) * 3px) calc(var(--sy) * 3px) 3px rgba(40, 28, 16, .32); transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s; }
.btn--accent { background: var(--accent); color: #FFF8EE; }
.btn--paper { background: var(--ivory); }
.btn:hover { transform: translate(calc(var(--sx) * -2px), calc(var(--sy) * -2px)) rotate(-.6deg); }
.btn:active { transform: none; box-shadow: calc(var(--sx) * 1px) calc(var(--sy) * 1px) 1px rgba(40, 28, 16, .4); }

/* ---------- the 3D world behind the paper ---------- */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; background: var(--sky); }
#poster { position: fixed; inset: 0; width: 100vw; height: 100lvh; object-fit: cover; object-position: 64% 50%; z-index: 0; display: none; }
.no-gl #poster { display: block; }
.no-gl #stage { display: none; }
main { position: relative; z-index: 1; }

/* ---------- header, persistent phone tag, mobile bar ---------- */
.top { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 18px var(--gut); padding-right: 280px; }
.brand { display: block; width: 132px; }
.logo { width: 100%; height: auto; aspect-ratio: 600 / 380; }
.lg-ink { fill: #151613; } .lg-snow { fill: #F7F2E7; } .lg-paper { fill: #F7F2E7; }
.lg-word { font: 900 70px/1 var(--sans); letter-spacing: 3px; fill: #151613; }
.nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .3s; }
.nav a:hover { background-size: 100% 2px; }

.phonetag { position: fixed; z-index: 40; top: 0; right: clamp(16px, 3vw, 44px); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: sway 7s ease-in-out infinite; }
.phonetag__string { width: 2px; height: 26px; background: linear-gradient(#6a5a45, #8a7558); }
.phonetag__card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 22px 14px; background: var(--kraft) url(../img/kraft.webp) center / 380px; color: #1d1a14;
  clip-path: polygon(22% 0, 78% 0, 100% 18%, 99% 100%, 1% 99%, 0 18%); filter: none; }
.phonetag::after { content: ""; position: absolute; inset: 26px 0 0; z-index: -1; background: rgba(35, 24, 12, .5); filter: blur(6px); clip-path: polygon(22% 0, 78% 0, 100% 18%, 99% 100%, 1% 99%, 0 18%); transform: translate(calc(var(--sx) * 7px), calc(var(--sy) * 7px)); }
.phonetag__hole { position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #3b3024; box-shadow: inset 0 1px 1px #000; }
.phonetag small { font: 700 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; opacity: .82; }
.phonetag b { font: 600 22px/1.1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 40; margin-top: 5px; letter-spacing: -.01em; }
.phonetag:hover .phonetag__card { background-color: #c79764; }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.6deg); } }
.mobilebar { display: none; }

/* ---------- transparent windows onto the paper world ---------- */
.window { position: relative; }
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(120px, 17vh, 170px) var(--gut) 80px; }
.hero__copy { max-width: 620px; }
.eyebrow { font: 700 13px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--forest); margin-bottom: 22px; }
.hero h1 { font-size: clamp(50px, 6.6vw, 104px); color: var(--ink); text-wrap: balance; }
.hero h1 em { color: var(--forest); }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 34em; margin: 24px 0 28px; color: #2d2b25; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 600 13.5px/1 var(--sans); padding: 8px 12px 9px; background: rgba(247, 242, 231, .82); clip-path: polygon(0 6%, 100% 0, 98% 100%, 2% 94%); }
.scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #F7F2E7; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.scrollcue span::after { content: ""; display: block; width: 1px; height: 30px; margin: 10px auto 0; background: currentColor; animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- paper sheets: torn edges, pale fiber fringe, a shadow cast by the sun ---------- */
.sheet { --paper: var(--cream); --fringe: #FBF7EE; --edge: 40px; position: relative; margin: -34px 0; padding: calc(var(--edge) + 90px) 0; isolation: isolate; }
.sheet__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sheet__bg > i { position: absolute; inset: 0; display: block; }
.sheet__bg .sh { inset: 6px -20px; filter: blur(12px); transform: translate(calc(var(--sx) * 12px), calc(var(--sy) * 12px)); will-change: transform; }
.sheet__bg .sh b { position: absolute; inset: 0; background: rgba(38, 26, 14, .5); }
.sheet__bg .sh b, .sheet__bg .fr {
  -webkit-mask: url(../img/tear-top.png) 0 0 / 1200px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat, url(../img/tear-bot.png) 0 100% / 1200px var(--edge) repeat-x;
          mask: url(../img/tear-top.png) 0 0 / 1200px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat, url(../img/tear-bot.png) 0 100% / 1200px var(--edge) repeat-x; }
.sheet__bg .fr { background: var(--fringe); }
.sheet__bg .fc { background: url(../img/grain-512.webp) 0 0 / 512px, var(--paper); background-blend-mode: soft-light;
  -webkit-mask: url(../img/tear-top-b.png) 0 0 / 1200px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat, url(../img/tear-bot-b.png) 0 100% / 1200px var(--edge) repeat-x;
          mask: url(../img/tear-top-b.png) 0 0 / 1200px var(--edge) repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat, url(../img/tear-bot-b.png) 0 100% / 1200px var(--edge) repeat-x; }
.sheet--cream { --paper: var(--cream); z-index: 2; }
.sheet--sage { --paper: #B5C19F; --fringe: #EEF0DF; z-index: 3; }
.sheet--forest { --paper: var(--forest); --fringe: #CFD8C0; z-index: 5; color: var(--ivory); }
.sheet--kraft { --paper: #C9A274; --fringe: #F4E6CF; z-index: 6; }
.sheet--kraft .fc { background: url(../img/kraft.webp) 0 0 / 520px, #C9A274; background-blend-mode: multiply; }
.sheet--char { --paper: #262624; --fringe: #8E8B80; z-index: 8; color: #EDE6D6; margin-bottom: 0; }
.sheet--char .sheet__bg .fr, .sheet--char .sheet__bg .fc, .sheet--char .sheet__bg .sh b { -webkit-mask-size: 1200px var(--edge), 100% calc(100% - var(--edge) + 1px), 0 0; mask-size: 1200px var(--edge), 100% calc(100% - var(--edge) + 1px), 0 0; -webkit-mask-position: 0 0, 0 100%, 0 100%; mask-position: 0 0, 0 100%, 0 100%; }
.sheet__in { position: relative; width: min(var(--max), 100% - var(--gut) * 2); margin: 0 auto; }
.sheet h2 { font-size: clamp(40px, 5.2vw, 78px); margin-bottom: 28px; max-width: 14em; }
.sheet .intro { max-width: 36em; font-size: 18px; color: #2c3326; }

/* why */
.rules { list-style: none; padding: 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); counter-reset: r; }
.rule { position: relative; padding-top: 22px; border-top: 2px solid rgba(36, 69, 42, .25); }
.rule__n { position: absolute; top: -22px; right: 0; font: italic 400 64px/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--accent); opacity: .9; text-shadow: calc(var(--sx) * 2px) calc(var(--sy) * 2px) 0 rgba(60, 30, 10, .18); }
.rule h3 { font: 600 28px/1.1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 48; margin: 0 0 12px; color: var(--forest); }
.rule p { color: #3a3a33; }
.facts { list-style: none; padding: 0; margin: 56px 0 0; display: flex; flex-wrap: wrap; gap: 10px; filter: drop-shadow(calc(var(--sx) * 2px) calc(var(--sy) * 2px) 1.5px rgba(40,28,16,.3)); }
.facts li { --r: -.6deg; font: 600 15px/1 var(--sans); padding: 12px 16px; background: var(--ivory); transform: rotate(var(--r)); clip-path: polygon(0 3%, 100% 0, 99% 100%, 1% 96%); }
.facts li:nth-child(2n) { --r: .7deg; background: #E8EEDD; }
.facts li:nth-child(3n) { --r: -.2deg; background: #F3E3C8; }
.facts li b { font: 700 18px/1 var(--serif); color: var(--accent-d); }

/* services */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); margin-top: 46px; perspective: 1400px; }
.card-w { filter: drop-shadow(calc(var(--sx) * 7px) calc(var(--sy) * 7px) 6px rgba(30, 38, 20, .38)); }
.card { background: url(../img/grain-512.webp) 0 0 / 512px, var(--ivory); background-blend-mode: soft-light; padding: 22px 24px 26px; transform-origin: 50% 0; transform: rotateX(-88deg); opacity: 0; transition: transform 1s cubic-bezier(.2, 1.3, .35, 1), opacity .35s; }
.card-w.in .card { transform: none; opacity: 1; }
.card h3 { font: 600 25px/1.1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 36; color: var(--forest); margin: 16px 0 10px; }
.card p { margin: 0; color: #3a3a33; font-size: 16px; }
.art { position: relative; aspect-ratio: 200 / 120; background: #EDE4D0; overflow: hidden; }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.art svg:nth-child(1) { filter: drop-shadow(calc(var(--sx) * 1.5px) calc(var(--sy) * 1.5px) 1.5px rgba(30,20,10,.3)); }
.art svg:nth-child(2) { filter: drop-shadow(calc(var(--sx) * 3px) calc(var(--sy) * 3px) 2.5px rgba(30,20,10,.34)); }
.art svg:nth-child(3) { filter: drop-shadow(calc(var(--sx) * 4.5px) calc(var(--sy) * 4.5px) 3px rgba(30,20,10,.38)); }
.card-w:hover .art svg:nth-child(2) { transform: translate(calc(var(--sx) * -1.5px), calc(var(--sy) * -1.5px)); }
.card-w:hover .art svg:nth-child(3) { transform: translate(calc(var(--sx) * -3px), calc(var(--sy) * -3px)); }

/* storm window */
.storm { height: 230vh; z-index: 4; }
.storm__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 60px var(--gut); }
.note { position: relative; max-width: 560px; padding: 36px 36px 34px; background: url(../img/grain-512.webp) 0 0 / 512px, var(--ivory); background-blend-mode: soft-light; transform: rotate(-1.2deg);
  box-shadow: calc(var(--sx) * 12px) calc(var(--sy) * 12px) 16px rgba(10, 14, 12, .42), calc(var(--sx) * 2px) calc(var(--sy) * 2px) 2px rgba(10, 14, 12, .25); }
.note h2 { font-size: clamp(32px, 3.4vw, 50px); margin-bottom: 18px; }
.steps { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.steps li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.steps b { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--forest); color: var(--ivory); font: 600 15px/1 var(--serif); clip-path: polygon(6% 0, 100% 6%, 94% 100%, 0 94%); }

/* process: the pop-up book */
.book-track { height: 560vh; position: relative; }
.book-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: clamp(64px, 11vh, 110px); overflow: hidden; }
.book-head { text-align: center; position: relative; z-index: 2; transition: opacity .25s; }
.book { z-index: 1; }
.book-head .kicker { color: #CFE0B5; }
.book-head h2 { color: var(--ivory); margin: 0 auto 0; font-size: clamp(36px, 4.4vw, 64px); }
.book-head h2 em { color: #BFD49A; }
.book { --bw: min(1040px, 86vw); --bh: min(calc(var(--bw) * .5), 52vh); position: relative; width: var(--bw); height: var(--bh); margin-top: auto; margin-bottom: clamp(70px, 14vh, 150px); transform-style: preserve-3d; transform: perspective(1800px) rotateX(32deg); transform-origin: 50% 70%; }
.book__cover { position: absolute; inset: -12px -14px; background: #5d4027 url(../img/kraft.webp) center / 500px; background-blend-mode: multiply; transform: translateZ(-3px); box-shadow: calc(var(--sx) * 30px) calc(var(--sy) * 30px) 40px rgba(0,0,0,.45); }
.page { position: absolute; top: 0; width: 50%; height: 100%; background: url(../img/grain-512.webp) 0 0 / 512px, #F4EEDF; background-blend-mode: soft-light; transform-style: preserve-3d; }
.page--left { left: 0; box-shadow: inset -26px 0 30px -18px rgba(60, 40, 20, .35); }
.page--right { left: 50%; box-shadow: inset 26px 0 30px -18px rgba(60, 40, 20, .35); }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.leaf .face { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face--back { transform: rotateY(180deg); }
.title-page { position: absolute; inset: 0; padding: 7% 9%; color: var(--ink); display: flex; flex-direction: column; justify-content: center; }
.title-page .num { font: italic 300 clamp(90px, 11vw, 170px)/.8 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; color: var(--accent); text-shadow: calc(var(--sx) * 3px) calc(var(--sy) * 3px) 0 rgba(80, 40, 10, .2); }
.title-page h3 { font: 600 clamp(26px, 2.8vw, 42px)/1.02 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; color: var(--forest); margin: 14px 0 12px; }
.title-page p { font-size: clamp(15px, 1.2vw, 18px); max-width: 24em; color: #3b3a33; margin: 0; }
.pops { position: absolute; inset: 0; transform-style: preserve-3d; }
.pop { --open: 1; position: absolute; left: var(--x); width: var(--w); bottom: var(--f); height: calc(var(--h) * 1.35); transform-origin: 50% 100%; transform-style: preserve-3d; transform: rotateX(calc(var(--open) * -82deg)); }
.pop svg { width: 100%; height: 100%; overflow: visible; }
.pop .pop-sh { position: absolute; inset: 0; transform-origin: 50% 100%; opacity: calc(var(--open) * .42); filter: brightness(0) blur(3px); transform: translateZ(-1px) rotateX(calc(var(--open) * 82deg)) scaleY(calc(.08 + var(--open) * .5)) skewX(calc(var(--sx) * -28deg)); pointer-events: none; }
.svgt { font: 600 28px/1 var(--serif); fill: var(--forest); }
.svgt--s { font: 700 17px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; fill: #4a4940; }
.svgt--light { fill: #EFE6D2; } .svgt--ink { fill: #4a2f18; }
.final-cta { position: absolute; left: 0; right: 0; bottom: -74px; text-align: center; transform: rotateX(-32deg); transform-origin: 50% 0; opacity: 0; transition: opacity .4s; }
.book.done .final-cta { opacity: 1; }
.book-caption { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(560px, 90vw); text-align: center; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #CFE0B5; margin: 0; }

/* area */
.area { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.area__text h2 em { color: #2A4A22; }
.area__text p { max-width: 30em; color: #2b261c; }
.area .kicker { color: #2A3E22; }
.towns { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { font: 600 15px/1 var(--sans); padding: 10px 14px; background: var(--ivory); clip-path: polygon(0 4%, 100% 0, 98% 100%, 2% 96%); }
.towns li.home { background: var(--forest); color: var(--ivory); }
.towns li:last-child { background: transparent; font-style: italic; font-family: var(--serif); font-size: 18px; }
.map { margin: 0; }
.map__frame { position: relative; aspect-ratio: 720 / 877; width: 100%; filter: drop-shadow(calc(var(--sx) * 14px) calc(var(--sy) * 14px) 12px rgba(40, 24, 10, .45)); }
#mapstage, .map__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__fallback { display: none; object-fit: cover; }
.no-gl .map__fallback { display: block; }
.no-gl #mapstage { display: none; }
.map figcaption { font: italic 400 15px/1.3 var(--serif); margin-top: 14px; color: #3a2e1c; }
.pins { position: absolute; inset: 0; pointer-events: none; }
.lbl, .pin { position: absolute; left: calc(var(--u) * 100%); top: calc(var(--v) * 100%); transform: translate(-50%, -50%); white-space: nowrap; }
.lbl { font: italic 500 12.5px/1 var(--serif); color: rgba(24, 40, 20, .78); letter-spacing: .02em; }
.lbl--l { transform: translate(calc(-100% - 12px), -50%); }
.lbl--lake { color: rgba(20, 50, 60, .8); }
.pin { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; transform: translate(-8px, -50%); font: 700 14px/1 var(--sans); color: var(--ink); text-shadow: 0 0 3px #F4EEDF, 0 0 6px #F4EEDF, 0 0 10px rgba(244,238,223,.8); }
.pin--home { font-size: 16px; }
.pin i { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ivory); box-shadow: calc(var(--sx) * 2px) calc(var(--sy) * 2px) 2px rgba(0,0,0,.4); }
.pin--home i { width: 16px; height: 16px; background: var(--forest); }
.pin--home { transform: translate(-10px, -50%); }
.pin > small { grid-column: 2; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; opacity: .85; }

/* contact at dusk */
.contact { z-index: 7; padding: clamp(120px, 18vh, 200px) var(--gut) clamp(110px, 16vh, 180px); }
.contact__in { width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 60px); align-items: end; }
.letter { position: relative; padding: clamp(26px, 4vw, 52px); background: url(../img/grain-512.webp) 0 0 / 512px, repeating-linear-gradient(transparent 0 33px, rgba(80, 110, 140, .14) 33px 34px), #F8F1E2; background-blend-mode: soft-light, normal, normal;
  transform: rotate(-.8deg);
  box-shadow: calc(var(--sx) * 14px) calc(var(--sy) * 14px) 20px rgba(20, 10, 20, .45), calc(var(--sx) * 2px) calc(var(--sy) * 2px) 2px rgba(20, 10, 20, .25); }
.letter h2 { font-size: clamp(34px, 4vw, 58px); margin-bottom: 12px; }
.letter__hint { color: #4a4940; max-width: 36em; }
.letter label { display: block; font: 700 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); margin-top: 18px; }
.letter input, .letter select, .letter textarea { display: block; width: 100%; margin-top: 8px; font: 400 19px/1.4 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 24; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid rgba(36, 69, 42, .45); border-radius: 0; padding: 6px 2px 8px; }
.letter select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--forest) 50%) calc(100% - 14px) 55% / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--forest) 50%) calc(100% - 7px) 55% / 7px 7px no-repeat; }
.letter textarea { resize: vertical; }
.letter input:focus, .letter select:focus, .letter textarea:focus { outline: none; border-bottom-color: var(--accent); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.letter__go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.formnote { margin: 0; font-size: 15px; color: var(--accent-d); font-weight: 600; }
.direct { color: #FBF3E3; align-self: start; margin-top: clamp(40px, 8vh, 90px); padding: 34px 32px 30px; background: url(../img/grain-512.webp) 0 0 / 512px, var(--forest); background-blend-mode: soft-light; transform: rotate(1.4deg);
  box-shadow: calc(var(--sx) * 14px) calc(var(--sy) * 14px) 18px rgba(20, 10, 10, .45), calc(var(--sx) * 2px) calc(var(--sy) * 2px) 2px rgba(20, 10, 10, .3); }
.direct .mail, .direct a { color: #FBF3E3; overflow-wrap: anywhere; }
.direct .kicker { color: #FBD9A8; }
.bigphone { display: block; white-space: nowrap; font: 500 clamp(36px, 3.3vw, 52px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; text-decoration: none; letter-spacing: -.02em; margin-bottom: 18px; }
.bigphone:hover { color: #FFD2A8; }
.mail, .fb { display: block; font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; }
.es { margin-top: 18px; font-size: 16px; }

/* footer */
.foot { padding: 90px 0 70px; margin-top: -30px; }
.foot .logo--foot { width: 260px; margin-bottom: 18px; }
.foot .logo--foot { box-sizing: content-box; padding: 16px 22px; background: url(../img/grain-512.webp) 0 0 / 512px, var(--cream); background-blend-mode: soft-light; transform: rotate(-1.5deg); box-shadow: calc(var(--sx) * 8px) calc(var(--sy) * 8px) 10px rgba(0,0,0,.45); }
.motto { font: italic 400 22px/1.3 var(--serif); font-variation-settings: "SOFT" 100; color: #C9D7B4; margin-bottom: 36px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; font-size: 15px; color: #CFC8B8; }
.foot__cols a { color: #F1E9D8; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .top { padding: 14px 16px; padding-right: 16px; }
  .brand { width: 104px; }
  .nav { display: none; }
  .phonetag { display: none; }
  .mobilebar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: url(../img/kraft.webp) center / 420px, #B98A58; background-blend-mode: multiply;
    -webkit-mask: url(../img/tear-top.png) 0 0 / 700px 18px repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 17px) no-repeat; mask: url(../img/tear-top.png) 0 0 / 700px 18px repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 17px) no-repeat; padding-top: 20px; }
  .mobilebar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font: 700 15.5px/1 var(--sans); text-decoration: none; clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 96%); }
  .mobilebar svg { width: 18px; height: 18px; fill: currentColor; }
  .mb-call { background: var(--accent); color: #FFF8EE; }
  .mb-est { background: var(--ivory); color: var(--ink); }
  body { padding-bottom: 78px; }
  .hero { padding: 112px 16px 90px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 60px); }
  .lede { font-size: 16.5px; margin: 18px 0 22px; }
  .ctas .btn { flex: 1 1 auto; }
  .scrollcue { display: none; }
  .sheet { --edge: 26px; padding: calc(var(--edge) + 58px) 0; }
  .sheet__in { width: calc(100% - 32px); }
  .rules { grid-template-columns: 1fr; gap: 34px; margin-top: 30px; }
  .cards { grid-template-columns: 1fr; }
  .storm { height: 190vh; }
  .storm__sticky { align-items: flex-end; padding: 16px 16px 110px; }
  .note { padding: 26px 22px; }
  .area { grid-template-columns: 1fr; }
  .contact { padding: 110px 16px 120px; }
  .contact__in { grid-template-columns: 1fr; }
  .f2 { grid-template-columns: 1fr; gap: 0; }
  .foot__cols { grid-template-columns: 1fr; }
  .foot { padding-bottom: 110px; }
  /* the book becomes a stack of pop-up cards */
  .book-track { height: auto; }
  .book-stage { position: relative; height: auto; overflow: visible; padding: 0 16px; }
  .book-head { text-align: left; align-self: stretch; margin-bottom: 20px; }
  .book { --bw: 100%; width: 100%; height: auto; transform: none; margin: 0; display: flex; flex-direction: column; gap: 0; }
  .book__cover { display: none; }
  .leaf { display: contents; }
  .page { position: relative; left: auto !important; width: 100%; height: auto; transform: none !important; box-shadow: none; backface-visibility: visible !important; }
  .page--left { order: var(--o); padding: 0; background: none; color: var(--ivory); }
  .title-page { position: relative; inset: auto; padding: 36px 0 16px; }
  .title-page .num { font-size: 96px; }
  .title-page h3 { color: var(--ivory); }
  .title-page p { color: #DCE3CF; }
  .pop-page { order: var(--o); aspect-ratio: 1 / .78; transform: perspective(900px) rotateX(34deg) !important; transform-origin: 50% 100%; margin: 20px 0 12px; }
  .final-cta { display: none; }
  .book-caption { display: none; }
}
@media (max-width: 420px) {
  .lbl:not(.lbl--lake) { display: none; }
  .lbl--lake { display: none; }
  .hero h1 { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .phonetag, .scrollcue span::after { animation: none; }
  .card { transition: none; transform: none; opacity: 1; }
}