/* Home page only.  Loaded AFTER theme.css and scene.css.
   The shared look (buttons, .card, .facts, .checks, FAQ, header, footer, scene) lives in theme.css / scene.css;
   this file is the home page's layout, the house and mailbox, and the pinned "card up close" stage.

   Defaults below are what you get with reduced motion or no JS: finished, nothing hidden, nothing pinned.
   js/skin/home.js adds .is-3d (card turns by itself on small screens) or .is-3d.is-pinned (wide, tall windows). */

/* a reload / back / #link (see the head script): nothing is drawn until the fonts are in, so a restored position never moves under the reader */
html.fonts-wait body { visibility: hidden; }

/* the pigeon flies BEHIND the cards: main must not be its own stacking context here (base.css gives it z-index 1) */
body.home main { z-index: auto; }
body.home .site-footer { z-index: 3; }
.page { position: relative; }
/* cards sit above the flying pigeon (z 2) */
body.home .card { position: relative; z-index: 3; }

/* the pigeon in flight (shown by JS only) */
.flyer { position: fixed; left: 0; top: 0; z-index: 2; width: clamp(120px, 13vw, 190px); pointer-events: none; display: none; will-change: transform; contain: layout style; }
/* while it is up close with the card (js/skin/home.js sets .fx-near) it flies in FRONT of the card, and it is drawn
   afresh at its big size instead of being a small picture stretched up */
.fx-near .flyer { z-index: 4; will-change: auto; }
.flyer__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* real photos: an <img> laid over the drawing's own box once its file is listed in assets/real/manifest.json */
.real-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; border-radius: inherit; pointer-events: none; }
.hcard .real-photo { z-index: 0; }
html.real-back .fx-back .fx-note, html.real-back .fx-back .fx-stamp, html.real-back .fx-back .fx-mark, html.real-back .fx-back .fx-shock { display: none !important; }

/* ---------- section scaffolding ---------- */
.card--left { margin-right: auto; width: min(620px, 54vw); }
.card--right { margin-left: auto; width: min(660px, 56vw); }
.card--wide { width: min(840px, 66vw); }
.card > p, .card p { font-size: 1.1875rem; }
.card h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; margin-bottom: 1rem; text-wrap: balance; }
.sec { position: relative; padding: clamp(28px, 5vh, 64px) clamp(16px, 5vw, 88px); display: flex; align-items: center; }
.sec > .card { flex: none; }

/* ---------- hero ---------- */
/* --hl / --hw / --hb: where the house stands (left edge, width, height of ground under it). The sample card flies from its chimney,
   so it is placed from the same three numbers. */
.hero { --hl: clamp(8px, 6vw, 100px); --hw: clamp(230px, 26vw, 380px); --hb: calc(7vh - 12px);
  --hpt: clamp(36px, 8vh, 96px); --hpx: clamp(16px, 5vw, 88px);
  position: relative; min-height: calc(100svh - var(--hdr-h, 66px)); padding: var(--hpt) var(--hpx) 0; display: flex; }
.hero__text { margin-left: auto; width: min(660px, 50vw); position: relative; z-index: 3; align-self: flex-start; }
.hero h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: 1.02; text-wrap: balance; }
.lede { margin-top: 1.4rem; max-width: 29em; font-size: 1.3rem; line-height: 1.5; }
.cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 14px; }
.hero .hand { margin-top: 1.1rem; }

.house { position: absolute; left: var(--hl); bottom: var(--hb); width: var(--hw); z-index: 1; }
.house svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-ridge { fill: #5b2f28; }
.hs-chimney { fill: #8a4a3c; } .hs-roof { fill: #7a3f34; } .hs-wall { fill: #d98a62; } .hs-door { fill: #5b3a3a; }
.hs-glow { opacity: max(.45, var(--win-op, .15)); }

/* the sample card, front above back, hung from a flagpole that stands on the chimney (the house is 280 wide, the chimney's
   middle is at .75 of that and its top .829 of the house's width above the ground). --hc is the card width: as big as the
   free sky between the pole and the headline allows, and no taller than the window leaves room for. */
.hero__flag { --hc: clamp(120px, min(16vw, calc((93vh - 140px - .829 * var(--hw)) / 1.321), calc(95vw - min(660px, 50vw) - var(--hl) - .75 * var(--hw) - 44px)), 250px);
  position: absolute; z-index: 1; left: calc(var(--hl) + .75 * var(--hw) - 4px); bottom: calc(var(--hb) + .829 * var(--hw) - 4px);
  width: calc(var(--hc) + 20px); height: calc(var(--hc) * 1.321 + 78px); pointer-events: none; }
.hf-pole { position: absolute; left: 0; top: 12px; bottom: 0; width: 7px; border-radius: 3px; background: #6f523a; }
.hf-ball { position: absolute; left: -2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #f4d9a6; box-shadow: 1px 1px 0 rgb(var(--shade-rgb) / .3); }
.hcard { position: absolute; left: 10px; width: var(--hc); aspect-ratio: 112 / 74; background: #f5e8cb; border-radius: 3px;
  box-shadow: 4px 4px 0 rgb(var(--shade-rgb) / .24); transform-origin: 0 0; animation: hf-wave 5.5s ease-in-out infinite; }
.hcard svg { display: block; width: 100%; height: 100%; }
.hcard--front { top: 34px; }
.hcard--back { top: calc(34px + var(--hc) * .6607 + 14px); animation-delay: -2.4s; }
/* two little rings on the pole */
.hcard::before, .hcard::after { content: ""; position: absolute; left: -9px; width: 9px; height: 9px; border: 2px solid var(--card-text); border-radius: 50%; }
.hcard::before { top: 12%; } .hcard::after { top: 76%; }
.hf-note path { stroke-width: 9; }
.hf-bush { display: none; }
@keyframes hf-wave { 0%, 100% { transform: rotate(-.7deg) skewY(0deg); } 50% { transform: rotate(1.5deg) skewY(-1.1deg); } }
@media (prefers-reduced-motion: reduce) { .hcard { animation: none; } }

/* ---------- card up close (the focus stage) ----------
   Default, and what you get with reduced motion or no JS: a plain section. Both sides of the finished
   card sit flat, side by side, and the four tags are a short list. */
.focus { position: relative; z-index: 3; --gut: clamp(16px, 5vw, 88px); --cw: min(88vw, 520px, calc(115svh - 80px));
  padding: clamp(48px, 9vh, 104px) var(--gut) clamp(40px, 8vh, 90px); }
.fx-stage { max-width: 1080px; margin: 0 auto; display: grid; gap: clamp(22px, 3.4vw, 36px); justify-items: center; }
.fx-head { background: var(--cream); border-radius: var(--panel-radius); padding: clamp(18px, 2.4vw, 28px) clamp(24px, 3vw, 44px); text-align: center;
  box-shadow: var(--panel-shadow); outline: 2px dashed var(--panel-edge); outline-offset: -9px; }
.fx-head h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; text-wrap: balance; }

.fx-obj { width: 100%; display: grid; justify-items: center; gap: 16px; }
/* the pigeon holding the card (reduced motion, no JS): it hangs the card on a cord, or the two faces on a pair of cords.
   With motion the page's own flying pigeon does this job, so .is-3d hides it. */
.fx-hold { width: 100%; display: grid; justify-items: center; margin-bottom: -16px; }
.fx-hold { --hb: clamp(110px, 14vw, 160px); }
.fx-hold__bird { width: var(--hb); height: auto; display: block; position: relative; z-index: 1; }
.fx-hold__cord { display: block; width: 100%; height: clamp(40px, 6vw, 72px); margin-top: calc(var(--hb) * -.12); }
.fx-hold__cord--i { height: 46px; }
.fx-hold__cord--i { display: none; }
.is-3d .fx-hold { display: none; }
.fx-zoom, .fx-lift, .fx-tilt, .fx-float { display: block; width: 100%; }
.fx-edge, .fx-sheen, .fx-shade, .fx-shock, .fx-anchor, .fx-leads, .fx-ctl { display: none; }
.fx-top { display: contents; }   /* plain section: the heading is just the first thing in the grid */
.fx-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); width: 100%; }
.fx-face { position: relative; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #f5e8cb; box-shadow: 6px 6px 0 rgb(var(--shade-rgb) / .22); }
.fx-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.fx-note { position: absolute; left: 5%; top: 31%; width: 45%; height: auto; color: var(--blue); overflow: visible; }
.fx-pen { fill: var(--terra); stroke: var(--card-paper); stroke-width: 2.5; opacity: 0; }
.fx-stamp { position: absolute; left: 80.4%; top: 8%; width: 14.3%; aspect-ratio: 100 / 120; filter: drop-shadow(1px 1px 0 rgb(var(--ink-rgb) / .3)); }
.fx-stamp svg { display: block; width: 100%; height: 100%; }
.fx-mark { position: absolute; left: 55.4%; top: 9.5%; width: 33.9%; color: var(--terra); transform: rotate(-6deg); }
.fx-mark svg { display: block; width: 100%; height: auto; opacity: .78; }
.fx-caption { margin: 0; font: 700 1rem/1.35 var(--font-ui); color: var(--ink); background: var(--cream); padding: 7px 12px; border-radius: var(--chip-radius); box-shadow: var(--chip-shadow); text-align: center; }

/* the four tags are drawn by the wide pinned stage only; the how-it-works steps and the price list say the same things for everyone else */
.fx-callouts { list-style: none; margin: 0; padding: 0; display: none; }   /* (drawn by the wide pinned stage only; a phone's stage shows the card and nothing else) */
.fx-callout { display: grid; gap: 4px; background: var(--cream); border-radius: var(--chip-radius); padding: 12px 16px 13px; box-shadow: var(--chip-shadow);
  outline: 1.5px dashed rgb(var(--ink-rgb) / .22); outline-offset: -6px; text-wrap: pretty; }
.fx-callout strong { font: 400 1.3rem/1.15 var(--font-heading); }
.fx-callout span { font: 500 1rem/1.4 var(--font-ui); color: var(--ink-dim); }
@media (max-width: 760px) {
  .fx-hold__cord--v { display: none; }
  .fx-hold__cord--i { display: block; }
  .fx-pc { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* the card as an object: faces back to back, edges for thickness, a flat shadow that stays on the "table" */
.is-3d .fx-obj { position: relative; display: block; width: var(--cw); height: calc(var(--cw) * 2 / 3); margin-inline: auto; margin-bottom: 52px; }
.is-3d .fx-zoom { position: absolute; inset: 0; width: auto; isolation: isolate; }
.is-3d .fx-lift { position: absolute; inset: 0; width: auto; perspective: 1700px; }
/* the flat shadow on the "table": a plain rounded rectangle behind the card (a drop-shadow filter would re-draw the whole turning card every frame).
   js/skin/home.js sets its transform every frame so it is as wide as the card looks from the side: it narrows to nothing when the card is edge-on */
.fx-shadow { display: none; }
.is-3d .fx-shadow { display: block; position: absolute; inset: 0; z-index: -1; border-radius: calc(var(--cw) * .014); background: rgb(var(--ink-rgb) / .26);
  transform: translate(calc(var(--cw) * .014), calc(var(--cw) * .017)); transform-origin: 50% 50%; }
.is-3d .fx-tilt, .is-3d .fx-float, .is-3d .fx-pc { position: absolute; inset: 0; width: auto; display: block; transform-style: preserve-3d; }
.is-3d .fx-pc { --t: calc(var(--cw) * .0085); --cr: calc(var(--cw) * .014); max-width: none; margin: 0; }
.is-3d .fx-face { position: absolute; inset: 0; aspect-ratio: auto; box-shadow: none; border-radius: var(--cr); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.is-3d .fx-front { transform: translateZ(calc(var(--t) / 2)); }
.is-3d .fx-back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.is-3d .fx-edge { display: block; position: absolute; }
.is-3d .fx-edge--r, .is-3d .fx-edge--l { top: var(--cr); height: calc(100% - var(--cr) * 2); width: var(--t); background: repeating-linear-gradient(90deg, #efe3c6 0 1px, #d8c9a3 1px 2px); }
.is-3d .fx-edge--r { left: calc(100% - var(--t) / 2); transform: rotateY(90deg); }
.is-3d .fx-edge--l { left: calc(var(--t) / -2); transform: rotateY(90deg); filter: brightness(.92); }
.is-3d .fx-edge--t, .is-3d .fx-edge--b { left: var(--cr); width: calc(100% - var(--cr) * 2); height: var(--t); background: repeating-linear-gradient(0deg, #efe3c6 0 1px, #d8c9a3 1px 2px); }
.is-3d .fx-edge--t { top: calc(var(--t) / -2); transform: rotateX(90deg); }
.is-3d .fx-edge--b { top: calc(100% - var(--t) / 2); transform: rotateX(90deg); filter: brightness(.88); }
/* two hard-edged glints that slide across as the card turns, and a flat tint as it turns away */
.is-3d .fx-sheen { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-sheen i { position: absolute; top: -30%; bottom: -30%; left: -25%; width: 50%; transform: skewX(-20deg); opacity: .3;
  background: linear-gradient(90deg, transparent 0 38%, rgb(255 255 255 / .2) 38% 52%, transparent 52% 58%, rgb(255 255 255 / .3) 58% 62%, transparent 62%); }
.is-3d .fx-shade { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: rgb(var(--ink-rgb) / .3); }
.is-3d .fx-anchor { display: block; position: absolute; width: 1px; height: 1px; pointer-events: none; }
.is-3d .fx-shock { display: block; position: absolute; width: 18%; aspect-ratio: 1; left: 77.4%; top: 5%; border-radius: 50%; border: 2px solid var(--terra); opacity: 0; pointer-events: none; }
.is-3d .fx-caption { position: absolute; left: 0; right: 0; top: calc(100% + 16px); width: max-content; max-width: 100%; margin-inline: auto; text-wrap: balance; }

/* the world dims and softens while the card is in focus */
.fx-veil { display: none; }
/* a warm sepia dimming, not a grey one: it pulls the sky toward the colour of old paper and darkens it a little, so the card stands
   out and the countryside still reads as the same place (a dark brown wash turned the blue sky to mud) */
.fx-on .fx-veil { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: rgb(112 66 26 / .3); }   /* a flat tint: a backdrop blur over a moving scene was the page's heaviest paint */

/* the pinned stage */
/* The pin is plain CSS: the section is a tall track (the stage plus --pin screens of scrolling) and the stage sticks to the top of it.
   Nothing is moved by script to pin it, so it cannot shift at refresh or when the pin starts and ends.
   .is-desk: wide, tall windows (2.2 screens, four tags beside the card). .is-phone: everything else with room for a stage (1.6 screens: the card
   bigger, no tags, and a beat of holding on the finished back before the stage lets go). Windows shorter than 440px get the plain section. */
.focus.is-pinned { --pin: 1.3; --cw: min(56vw, calc(64vw - 130px), 860px, calc(150svh - 160px)); height: calc(100svh * (1 + var(--pin))); padding: 0; }
.focus.is-phone { --pin: 1.5; --cw: min(92vw, 560px, calc((100svh - var(--hdr-h, 66px) - 340px) * 1.5)); }
/* (clipped sideways only: while the pigeon brings the card in, the card hangs above the stage's own top edge) */
.is-pinned .fx-stage { position: sticky; top: 0; height: 100svh; overflow-x: clip; overflow-y: visible; max-width: none; margin: 0; display: block; }
/* wide stage: the heading, the progress cue and the skip link are one little stack in the top left corner (the pigeon and the card own the middle) */
.is-desk .fx-top { display: grid; gap: 12px; position: absolute; z-index: 3; top: calc(var(--hdr-h, 66px) + 16px); left: var(--gut); width: clamp(210px, 17vw, 270px); }
.is-desk .fx-head { text-align: left; padding: 14px 18px; outline-offset: -7px; }
.is-desk .fx-head h2 { font-size: clamp(1.4rem, 1.8vw, 1.75rem); }
.is-pinned .fx-obj { position: absolute; left: 50%; top: calc(50% + 33px); margin: calc(var(--cw) * -.3333) 0 0 calc(var(--cw) * -.5); }
.is-pinned .fx-caption { top: calc(100% + var(--cw) * .075); }   /* js/skin/home.js moves it under the card, which is smaller while the pigeon holds it */
/* a phone: heading, card, label and sample line are one pinned group, centred in what the header leaves. The card is the widest the screen
   allows from the first frame to the last (the pigeon sits this stage out), so no frame of the pin is a bare sky. */
.fx-phase { display: none; }
.is-phone .fx-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; box-sizing: border-box; padding: calc(var(--hdr-h, 66px) + 8px) var(--gut) 76px; }
.is-phone .fx-top { display: contents; }
.is-phone .fx-ctl { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100% - 2 * var(--gut))); margin-inline: auto; padding-bottom: 0; }
.is-phone .fx-skip { justify-content: center; }
.is-phone .fx-head { position: relative; top: auto; left: auto; right: auto; width: auto; max-width: 100%; margin: 0; padding: 12px 18px; flex: none; }
.is-phone .fx-head h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
.is-phone .fx-obj { position: relative; left: auto; top: auto; flex: none; margin: 0 0 104px; }
.is-phone .fx-phase { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 18px); margin: 0 auto; width: max-content; min-width: 13em; text-align: center; box-sizing: border-box; padding: 8px 16px; border-radius: 6px;
  background: var(--cream); color: var(--ink); font: 700 1.125rem/1.2 var(--font-ui); box-shadow: 3px 3px 0 rgb(var(--shade-rgb) / .22); }
.is-phone .fx-caption { top: calc(100% + 66px); padding: 4px 10px; font: 500 .9375rem/1.3 var(--font-ui); max-width: 94vw; }
.is-desk .fx-leads { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; z-index: 2; }
.is-desk .fx-leads path { stroke-dasharray: 1 3; stroke-dashoffset: 2; }
.is-desk .fx-leads circle { opacity: 0; }
.is-desk .fx-callouts { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 2; }
.is-desk .fx-callout { position: absolute; width: clamp(180px, 18vw, 260px); opacity: 0; visibility: hidden; }
.focus.is-pinned { --wz: var(--cw); --ctop: 36vh; --ch: 40vh; }   /* the card as shown (width, top, height); js/skin/home.js measures them */
.is-desk .fx-callout--r { left: calc(50% + var(--wz) / 2 + 48px); }
.is-desk .fx-callout--l { right: calc(50% + var(--wz) / 2 + 48px); }
.is-desk .fx-callout--print { top: calc(var(--ctop) + var(--ch) * .16); }
.is-desk .fx-callout--postage { top: calc(var(--ctop) - var(--ch) * .1); }
.is-desk .fx-callout--stamped { top: calc(var(--ctop) + var(--ch) * .5); }
.is-desk .fx-callout--ink { top: calc(var(--ctop) + var(--ch) * .56); }
/* the progress cue: three stamps that light up with the phase (the words stay), a thin rule that fills with the scroll, and the way out.
   It is a small cream plate; js/skin/home.js writes data-phase and the rule's scaleX (no layout). */
.is-pinned .fx-ctl { display: grid; gap: 8px; justify-items: stretch; background: var(--cream); border-radius: var(--radius-sm); padding: 10px 14px 2px; box-shadow: var(--chip-shadow); }
.fx-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 10px; font: 700 .9375rem/1 var(--font-ui); color: var(--ink); }
.fx-steps li { display: inline-flex; align-items: center; gap: 6px; opacity: .7; }   /* steps still to come: dimmer, but still 4.5:1 */
.fx-steps li::before { content: ""; flex: none; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.fx-ctl[data-phase="0"] .fx-steps li:nth-child(1), .fx-ctl[data-phase="1"] .fx-steps li:nth-child(-n+2), .fx-ctl[data-phase="2"] .fx-steps li { opacity: 1; }
.fx-ctl[data-phase="0"] .fx-steps li:nth-child(1)::before, .fx-ctl[data-phase="1"] .fx-steps li:nth-child(-n+2)::before, .fx-ctl[data-phase="2"] .fx-steps li::before { background: var(--terra); border-color: var(--terra); }
.fx-rule { display: block; height: 4px; border-radius: 2px; background: rgb(var(--ink-rgb) / .18); overflow: hidden; }
.fx-rule i { display: block; height: 100%; background: var(--terra); transform-origin: 0 50%; transform: scaleX(0); }
.is-pinned .fx-skip { display: inline-flex; align-items: center; min-height: 44px; margin: 0 -14px; padding: 0 14px; color: var(--ink) !important; font: 700 1rem var(--font-ui); text-decoration: underline; text-underline-offset: 4px; }
.is-pinned .fx-skip:hover { color: var(--terra-deep) !important; }
/* reaching it by keyboard shows the stack even before the card has arrived */
.is-pinned .fx-top:focus-within { opacity: 1 !important; pointer-events: auto !important; }

/* with the wide pinned stage, the next section rises over the last bit of it, so the card is never followed by bare sky */
.focus.is-desk + .sec { margin-top: -16vh; }
#how:focus { outline: none; }

/* the nav says where you are on this page */
.site-nav a[aria-current="location"] { text-decoration: underline 3px var(--terra); text-underline-offset: 8px; }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: clamp(110px, 17vw, 180px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; padding: 18px 0; border-top: 2px dotted rgb(var(--ink-rgb) / .28); }
.step:first-child { border-top: 0; padding-top: 4px; }
.step h3 { font-size: 1.55rem; line-height: 1.15; margin-bottom: .25rem; }
.step p { font-size: 1.125rem; color: var(--ink-dim); }
.step__art { width: 100%; height: auto; display: block; overflow: hidden; }
.s3-note path { stroke-width: 7; }
/* the step pictures are printed cards and paper, so they stay cream; a dark mat and a hard outline keep them from glaring in the dark theme */
.step__art { padding: 6px; box-sizing: border-box; border-radius: 8px; background: var(--paper-sunken); outline: 2px solid var(--edge); outline-offset: -2px; }
.s3-typed text { letter-spacing: .01em; }

/* ---------- own handwriting ----------
   The words on the left, the proof on the right: a line of ordinary writing, then the same line the way the pen writes it on a card. */
.own { display: grid; grid-template-columns: min(620px, 54vw) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.own .card > p + p { margin-top: .9rem; }
.own .btn { margin-top: 1.5rem; }
.ba { position: relative; z-index: 2; margin: 0; width: 100%; max-width: 580px; justify-self: center; display: grid; gap: 14px; justify-items: stretch; }
.ba__side { display: grid; gap: 12px; align-content: start; justify-items: start; }
.ba figcaption { font: 700 1rem/1.35 var(--font-ui); color: var(--ink); background: var(--cream); display: inline-block; padding: 7px 12px; border-radius: var(--chip-radius); box-shadow: var(--chip-shadow); }
.ba__paper, .ba__card { position: relative; width: 100%; aspect-ratio: 8 / 3; box-sizing: border-box; border-radius: 4px; }
.ba__paper { overflow: hidden; color: var(--card-ink); background-color: #fffaf0; box-shadow: 6px 6px 0 rgb(var(--shade-rgb) / .2); transform: rotate(-1.4deg); }
.ba__card { padding: 22px 26px; background: var(--card-paper); color: var(--card-ink); box-shadow: 6px 6px 0 rgb(var(--shade-rgb) / .2); transform: rotate(1.2deg); }
.ba__paper svg, .ba__card svg { display: block; width: 100%; height: 100%; }

/* the paper side: an everyday ballpoint hand. A loose script, each letter a little off the line (the offsets are in the markup), blue-black
   ink that is darker where the pen pressed. The card side next to it is the clean pen-drawn note. */
.ba__hand { font-family: "Homemade Apple", "Bradley Hand", "Segoe Script", cursive; fill: #2a4a94; stroke: #2a4a94; stroke-width: .35; stroke-linejoin: round; }
.ba__side--card { justify-items: end; }
.ba__arrow { width: 40px; height: 26px; justify-self: center; fill: none; stroke: var(--terra); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }

/* ---------- pricing ----------
   The $4 card is the main thing: a wide ticket, stub (price + button) and tear-off body (what you get) split by a dashed
   perforation. The monthly plan is optional, so it sits beside it as a small flat card with no button. */
.price { justify-content: center; }
.price__row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; width: min(1160px, 100%); position: relative; z-index: 3; }
.price__row .card { width: auto; }
.price .ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
.ticket__stub { padding: clamp(24px, 3vw, 38px); border-right: 2px dashed rgb(var(--ink-rgb) / .38); }
.ticket__body { padding: clamp(24px, 3vw, 38px); align-self: center; }
.price .ticket h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.card .ticket__big { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--font-heading); margin-top: .4rem; }
.ticket__big span { font-size: clamp(4.6rem, 8vw, 7rem); line-height: .95; color: var(--terra); letter-spacing: -.02em; }
.ticket__sub { margin: .6rem 0 1.3rem; color: var(--ink-dim); }
.ticket__more { margin-top: 1.3rem; font: 700 1rem/1.3 var(--font-ui); }
.price .plan { --card-bg: var(--paper-sunken); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); }
.plan .plan__kicker { font: 700 .9375rem/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 .35rem; }
.plan h3 { font-size: 1.4rem; line-height: 1.15; }
.plan .plan__price { font: 400 1.9rem/1.15 var(--font-heading); margin: .25rem 0 .8rem; }
.plan .plan__price span { font: 500 1rem var(--font-body); color: var(--ink-dim); }
.card .plan__math { font: 700 1rem/1.35 var(--font-ui); margin: -.4rem 0 .9rem; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.plan .plan__list li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--ink-dim); }

/* inline links in running text: the hit area is at least 44px tall (padding on an inline link never moves the lines around it) */
.card p a, .about__card a, .faq-item p a { padding-block: 13px; }

/* ---------- about ----------
   Wide card split in two: a drawn wall with a framed postcard on it, and the letter. */
.about__card { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: stretch; padding: 0; overflow: hidden; }
.room-dim { fill: #1b130d; opacity: var(--room-dim); }
.about__wall { position: relative; min-height: 300px; overflow: hidden; }
.about__art { display: block; width: 100%; height: 100%; min-height: 300px; }
.about__text { padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 46px); align-self: center; }
.about__text p + p { margin-top: .9rem; }
.about__card a { color: var(--terra); }
.about__card .about__sig { font: 400 clamp(2.6rem, 4vw, 3.4rem)/1 var(--font-hand); color: var(--hand-ink); margin-top: .6rem; transform: rotate(-3deg); transform-origin: 0 50%; }

/* ---------- questions: a ledger sheet ----------
   Narrower than the other cards and centred, on lighter paper, with a red margin rule down the left. */
.faq { justify-content: center; }
.card.ledger { --card-bg: var(--cream-2); --gut: clamp(44px, 6vw, 64px); position: relative; width: min(800px, 100%); margin-inline: auto; padding-left: var(--gut); }
.ledger::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: calc(var(--gut) - 22px); width: 2px; background: rgb(190 70 60 / .5); }
.ledger .q-text { flex: 1; min-width: 0; }

/* ---------- closing + mailbox ---------- */
.closer { position: relative; min-height: min(76svh, 620px); padding: clamp(24px, 4vh, 48px) clamp(16px, 5vw, 88px) 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.6vw, 28px); }
.closer .closer__card { margin: 0 0 clamp(40px, 9vh, 110px); width: min(560px, 50vw); }
.closer__card p { margin: .2rem 0 1.6rem; max-width: 28em; }
.closer__card h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.mailbox { position: relative; flex: none; width: clamp(220px, 27vw, 420px); z-index: 1; }
.mailbox svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-post { fill: #8a6a4a; } .mb-body { fill: #2f4d7c; } .mb-shade { fill: #243d65; } .mb-door { fill: #3b5d92; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__text { width: min(660px, 48vw); }
}
/* the hero's words sit straight on the sky, and the town starts about three quarters of the way down the window. On a wide window
   that is not very tall, pull the spacing in so the last line still ends above the roofs. */
@media (min-width: 961px) and (max-height: 860px) {
  .hero { --hpt: clamp(22px, 4vh, 40px); }
  .hero h1 { font-size: clamp(2.6rem, min(5.4vw, 8.6vh), 5rem); }
  .lede { margin-top: 1rem; }
  .cta { margin-top: 1.3rem; }
  .hero .hand { margin-top: .6rem; }
}
@media (max-width: 960px) {
  .card--left, .card--right, .card--wide { width: 100%; }
  .hero { --hw: clamp(190px, 46vw, 280px); flex-direction: column; padding-bottom: calc(.893 * var(--hw) + var(--hb) + 20px); }
  .hero__text { width: 100%; margin-left: 0; }
  /* no flagpole here: the two sides of the card lean against a bush by the house, photo behind, note in front */
  .hero__flag { --hc: clamp(116px, min(38vw, 21vh), 250px); z-index: 2; left: auto; right: clamp(10px, 4vw, 48px); bottom: calc(var(--hb) + 2px);
    width: calc(var(--hc) * 1.6); height: calc(var(--hc) * .66 * 1.5); }
  .hf-pole, .hf-ball, .hcard::before, .hcard::after { display: none; }
  .hcard { top: auto; animation: none; transform-origin: 50% 100%; }
  .hcard--front { left: 0; bottom: 6px; transform: rotate(-6deg); }
  .hcard--back { left: calc(var(--hc) * .6); bottom: calc(var(--hc) * .07 + 6px); transform: rotate(5deg); }
  .hf-bush { display: block; position: absolute; left: -4%; bottom: -10px; width: 108%; height: clamp(34px, calc(var(--hc) * .3), 60px); z-index: 3; }
  .own { grid-template-columns: 1fr; }
  .price__row { grid-template-columns: 1fr; align-items: stretch; }
  .about__card { grid-template-columns: 1fr; }
  .about__wall { min-height: 0; aspect-ratio: 4 / 3; max-height: 270px; }
  .about__art { min-height: 0; height: 100%; }
  .sec { min-height: 0; }
  .closer { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding-bottom: 0; min-height: 0; }
  .closer .closer__card { width: 100%; margin: 0; }
  .mailbox { align-self: center; margin-top: 8px; width: clamp(200px, 56vw, 300px); }
}
@media (max-width: 760px) {
  /* a phone has to fit the words, the buttons and the house with the card by it in one window: tighten the hero's rhythm */
  .hero { --hpt: 28px; min-height: calc(100svh - var(--hdr-h, 66px)); }
  .hero h1 { font-size: 2.55rem; }
  .lede { margin-top: 1rem; font-size: 1.15rem; line-height: 1.45; }
  /* reserve the lines the text can take, so the web font arriving (it wraps a little differently) never moves the buttons */
  .lede { min-height: 5lh; }
  .cta { margin-top: 1.2rem; }
  .hero .hand { margin-top: .35rem; font-size: 1.7rem; }
  .step { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .price .ticket { grid-template-columns: 1fr; }
  .ticket__stub { border-right: 0; border-bottom: 2px dashed rgb(var(--ink-rgb) / .38); }
}

/* a window so short that the words run down over the town (small phones, landscape phones): the words go on a cream sheet along
   the top, so they stay readable wherever they land */
@media (max-width: 960px) and (max-height: 740px) {
  .hero__text { align-self: stretch; width: auto; margin: calc(-1 * var(--hpt)) calc(-1 * var(--hpx)) 0; padding: var(--hpt) var(--hpx) 20px; background: var(--cream); border-radius: 0 0 14px 14px; box-shadow: 0 8px 0 var(--edge); }
}

/* the same short windows, tighter: the first screen holds the headline, the free-to-build line, the button AND the sample card by the house.
   The little chips and the handwritten line are dropped here (they are in the page again from the next screen down). */
@media (max-width: 960px) and (max-height: 740px) {
  .hero { --hw: clamp(110px, min(46vw, 28vh), 280px); --hpt: 16px; }
  .hero h1 { font-size: clamp(1.85rem, min(9vw, 7vh), 2.55rem); }
  .lede { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.4; }
  .lede { min-height: 0; }
  .cta { margin-top: .85rem; gap: 10px; }
  .hero .hand { display: none; }
  .hero__flag { --hc: clamp(90px, min(33vw, 28vh), 250px); }
}
@media (max-width: 359px) { .hero .cta .btn { padding-inline: 12px; } .hero .cta { gap: 8px; } .lede { min-height: 6lh; } }
/* a phone on its side: the words only need the top of the window, so the house and card stay in view beside the button row */
@media (max-width: 960px) and (max-height: 480px) {
  .hero { --hw: clamp(100px, 26vh, 200px); --hb: calc(5vh - 8px); }
  .hero h1 { font-size: clamp(1.7rem, 8vh, 2.2rem); }
  .lede { max-width: none; }
  .hero h1 br { display: none; }
  .hero__flag { --hc: clamp(80px, 26vh, 160px); }
}
@media (max-width: 960px) and (max-height: 400px) {
  .hero { --hw: clamp(90px, 24vh, 140px); --hpt: 12px; }
  .lede { font-size: 1rem; }
  .hero__text { padding-bottom: 14px; }
}
/* the smallest landscape phones (568 x 320): headline, the one line that says what it is and costs, the buttons, and the card in view.
   (the one lede is the same text in every window; only its size and spacing change) */
@media (max-width: 960px) and (max-height: 340px) {
  .hero h1 { font-size: 1.5rem; }
  .lede { margin-top: .35rem; line-height: 1.3; }
  .cta { margin-top: .55rem; }
  .hero__text { padding-bottom: 10px; }
}

/* ---------- scroll hint: a small "scroll down" tag at the bottom of the window ---------- */
.scroll-hint { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 20px 5px;
  background: var(--cream); color: var(--ink); border: 0; border-radius: 6px; box-shadow: 3px 3px 0 rgb(var(--shade-rgb) / .22); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.scroll-hint.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.scroll-hint:hover { background: var(--cream-hi); }
.scroll-hint__label { font: 400 1.95rem/1 var(--font-hand); }
.scroll-hint__arrow { width: 16px; height: 20px; margin-top: -2px; fill: none; stroke: var(--terra); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: scroll-hint-bob 1.6s ease-in-out infinite; }
@keyframes scroll-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { transition: opacity .2s ease, visibility 0s .2s; transform: translate(-50%, 0); }
  .scroll-hint__arrow { animation: none; }
}