/* css/pages/card.css : the digital card (card.html), round 8 (2026-09-30, feedback #50): "Nice to meet you." What people
   open when Ashton lets them scan his QR in person: a first impression, and a polished digital business card, not a
   website page. 1 the card (bone): a horizontal 3.5 x 2 in business card that rises off the page, turns into place,
   breathes, follows the pointer or a finger, and turns over on a tap; Save my contact and the actions beside it
   (under it on phones). 2 Where I've helped (bone: the mini map, a small porcelain plate of North Texas in SVG, home
   base glowing, the dots dropping in; the proof beside it, counted in). 3 Meet me (INK: a plate opens, the montage comes
   through an arched doorway and plays, one line lights word by word). 4 Follow along (bone; the big tiles
   are dealt in). 5 How I can help (bone; each photo opens with the scroll). 6 Share (bone; the card comes back small and
   Share sends it). 7 The text-me ending (INK, shared: css/site.css §14). No gold, bronze or foil anywhere. */

.page--card { background: var(--paper); }
/* the phone bar (Text, Call, Book, Save) arrives once the hero, which has the same actions, scrolls away; it never
   flashes over the card while the page boots (bottombar.js manages it from there) */
.page--card .bottombar:not(.is-managed) { visibility: hidden; }
.cd { position: relative; background: var(--paper); color: var(--ink); --cd-shadow: 36, 34, 31; } /* neutral ink shadows */
.cd > section { position: relative; }
.cd .cd-caps { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.cd .cd-h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(2.2rem, 7.6vw, 3.6rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; color: var(--ink); }
.cd .cd-h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.cd .cd-sub { color: var(--ink-2); font-size: 1.0625rem; }
.cd .cd-fine { font-size: 13px; line-height: 1.55; color: var(--muted); }
.cd-sec { padding: clamp(72px, 13vh, 150px) var(--gutter); }
.cd-sec__in { max-width: 560px; margin: 0 auto; }

/* ink sections: the night tokens (light type) over an ink plate (see "the ink plates" below) */
.cd .night { --ink: var(--on-night); --ink-2: var(--on-night-2); --muted: var(--on-night-2); --blue-text: var(--blue-on-night); --line: var(--night-line); --paper-2: var(--night-2); background: var(--night); color: var(--on-night); }

/* gentle arrival: a 20px rise, once (card.js fires it through motion.js onReveal), with staggered children */
.cd-armed :is([data-rise], [data-rise-one]) { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.cd-armed :is([data-rise], [data-rise-one]).is-in { opacity: 1; transform: none; }
.cd-armed [data-rise] .cd-stats li { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease-out), translate 1.2s var(--ease-out); transition-delay: calc(.18s + var(--i, 0) * .11s); }
.cd-armed [data-rise].is-in .cd-stats li { opacity: 1; translate: none; }
.cd-armed [data-rise] .cd-stats li:nth-child(2) { --i: 1; }
.cd-armed [data-rise] .cd-stats li:nth-child(3) { --i: 2; }
/* the fail-safe (cinematic-guide §13): if the motion system never starts, every hook shows its end state */
html.is-failsafe .cd-armed :is([data-rise], [data-rise-one], [data-rise] *, .cd-line__p) { opacity: 1; transform: none; translate: none; clip-path: none; }

/* ================================================================ 1 · THE CARD
   A 3.5 x 2 in card (1.75 : 1) in CSS 3D (js/scenes/cardv.js). Every size on it is in container units, so it is the
   same card at 288 px on a small phone and 700 px on a desktop, and the mini card in Share is the same markup, small.
     .cv            the box (an inline-size container: cqw = 1% of the card's width)
     .cv-stage      the perspective
     .cv-shadow     its shadow on the page: an ambient pool and a softer key shadow down and to the right
     .cv-rise       the arrival (html.cv-intro)          .cv-idle  the breath          .cv-pose  cardv.js
     .cv-face       the two printed faces (size containers: cqh = 1% of the card's height), .cv-edge the stock between
   TREC: "Coldwell Banker Apex, Realtors" is 5.6cqh against his name at 10.4cqh (54%), and larger than the phone, email
   and web lines (5cqh), so the rule holds at every size. */
.cv { --rest-x: 0; --rest-y: 0; --k: var(--cv-k, 1); position: relative; width: 100%; aspect-ratio: 1.75; margin: 0; container-type: inline-size; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y; /* a finger on the card tips it and a sideways drag turns it (cardv.js); a vertical swipe still scrolls the page */
  --flip-up: .035; --flip-z: .14; --flip-tip: 4; } /* the flip's lift (cardv.js reads them per flip): up and toward you, in card widths, and a tip back in degrees */
.cv-stage { position: absolute; inset: 0; perspective: 320cqw; perspective-origin: 50% 42%; }
/* where the greeting sits right above the card (phones and tablets), the turning card must never cross it: a longer lens
   with the eye near the card's top edge (so the near edge grows down, not up), no upward lift, a small lift toward you
   and a tip forward. Measured (cardv flip probe): the card's top stays below the H1's glyphs through the whole turn. */
@media (max-width: 999px) {
  .cv { --flip-up: 0; --flip-z: .04; --flip-tip: -3; }
  .cv-stage { perspective: 460cqw; perspective-origin: 50% 24%; }
}
/* sharp while it moves: Chrome rasterizes a layer whose 3D transform keeps changing at one pixel per CSS pixel, which is
   soft on a 2x or 3x screen. So in Chromium the card's faces are laid out --k times larger (the device pixel ratio, set in
   card.html's head; 1 elsewhere) and the whole card is scaled back down: the faces are rasterized at the screen's own density however the card
   turns. Everything in .cv-os is in its container units, so the scale-down is exact. The printed type itself is set at
   its true size in .cv-ink (1/k of the face, scaled up k), so every font size on the card is the size you see (the TREC
   size check reads computed font sizes). */
.cv-os { position: absolute; left: 0; top: 0; width: calc(100% * var(--k)); height: calc(100% * var(--k)); transform-origin: 0 0; transform: scale3d(calc(1 / var(--k)), calc(1 / var(--k)), calc(1 / var(--k))); transform-style: preserve-3d; container-type: inline-size; }
.cv-rise, .cv-idle, .cv-pose { position: absolute; inset: 0; transform-style: preserve-3d; }
/* only the printed faces take a tap: the empty 3D layers and the stock's edges are planes in the same 3D scene, and once
   the card leans they sit in front of parts of the face, where they would swallow a tap meant for a link on it (a tap
   that misses both faces still lands on .cv-stage, inside the card, so it still turns the card over) */
.cv-os, .cv-rise, .cv-idle, .cv-pose, .cv-edge { pointer-events: none; }
.cv-face { pointer-events: auto; }
.cv-pose { transform: rotateX(calc(var(--rest-x) * 1deg)) rotateY(calc(var(--rest-y) * 1deg)); }

/* the stock: bright white cotton (neutral white, 2026-09-30 white sweep: no ivory), heavy, crisp edges, a whisper of fiber; the back is printed in his blue */
.cv-face { position: absolute; inset: 0; overflow: hidden; border-radius: 1.5cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #161412; }
.cv-ink { position: absolute; left: 0; top: 0; width: calc(100% / var(--k)); height: calc(100% / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; container-type: size; }
.cv-face--front { transform: translateZ(.26cqw); background: linear-gradient(158deg, #FDFCFB 0%, #F8F7F6 55%, #F1F0EF 100%); box-shadow: inset 0 0 0 1px rgba(24, 22, 20, .07), inset 0 1px 0 rgba(255, 255, 255, .9); }
.cv-face--back { transform: rotateY(180deg) translateZ(.26cqw); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cv-face--back, .cv-face--back .cv-ink { background: linear-gradient(158deg, #2F59EA 0%, #2852E5 48%, #2249D9 100%); } /* (on the ink too: the reversed wordmark blends with it) */
.cv-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: var(--grain), var(--grain); background-size: 150px, 57px; background-position: 0 0, 23px 11px; opacity: .1; mix-blend-mode: multiply; }
.cv-face--back::after { opacity: .16; mix-blend-mode: soft-light; }
.cv-edge { position: absolute; inset: 0; border-radius: 1.5cqw; background: #E3E2E1; transform: translateZ(calc(var(--e) * .1cqw)); backface-visibility: visible; } /* two sheets of the stock's core between the faces: its edge when it turns */

/* front: the photo panel, full height on the left */
.cv-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 36.5%; overflow: hidden; background: #BBBAB9; }
.cv-photo::before { content: ""; position: absolute; inset: -6%; background: var(--lqip) 50% 50% / cover no-repeat; filter: blur(4px); }
.cv-photo picture, .cv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-photo img { object-fit: cover; object-position: 50% 0%; } /* card-portrait.jpg is cropped to the panel's shape (479 x 750, 0.639), from his hair to just above the pocket square, so nothing is cut at the panel's edge */
.cv-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset -1px 0 0 rgba(24, 22, 20, .08); pointer-events: none; }
/* front: the type */
.cv-type { position: absolute; left: 42.5%; right: 4.5%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 1cqh; }
.cv-type > * { margin: 0; white-space: nowrap; }
.cv-name { font-family: var(--serif); font-weight: 400; font-size: 10.4cqh; line-height: 1; letter-spacing: -.012em; color: #151311; font-variation-settings: "opsz" 22; } /* Bodoni's text cut, as it would be printed at this size (the oversampled layout would otherwise pick the display cut, whose hairlines vanish) */
.cv-title { margin-top: 2.6cqh; font-family: var(--sans); font-size: max(9px, 3.7cqh); font-weight: 600; line-height: 1; letter-spacing: .3em; color: #2852E5; }
.cd .cv-broker { margin-top: 3.9cqh; font-family: var(--sans); font-size: 5.6cqh; font-weight: 500; line-height: 1.1; letter-spacing: -.004em; color: #1E1D1B; }
.cv-rule { display: block; width: 13cqh; height: max(1px, .55cqh); margin: 4.6cqh 0 4.8cqh; background: #2852E5; }
.cv-lines { list-style: none; padding: 0; display: grid; gap: 2.9cqh; }
.cv-lines li { display: flex; align-items: center; gap: 2.4cqh; font-family: var(--sans); font-size: 5cqh; font-weight: 400; line-height: 1; letter-spacing: .005em; color: #2A2825; }
.cv-ic { width: 4.4cqh; height: 4.4cqh; flex: none; fill: none; stroke: #2852E5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* front: the brokerage's mark, small, in the top-right corner as it would be printed (the lockup from the header and
   footer, ink on the white stock). Decorative: the broker name is set in type below it, and the size rule reads that. */
.cv-cb { position: absolute; right: 4.5%; top: 7.5cqh; width: 25%; height: auto; opacity: .88; pointer-events: none; }
/* back: one line, his blue; his reviews and socials (three tappable marks: card.js never flips the card for them);
   the brokerage's wordmark */
.cv-line { position: absolute; left: 6%; right: 6%; top: 12%; margin: 0; text-align: center; font-family: var(--serif); font-weight: 400; font-size: 11cqh; line-height: 1.06; letter-spacing: -.01em; color: #fff; font-variation-settings: "opsz" 26; }
.cv-line em { display: block; font-style: italic; }
.cv-soc__h { position: absolute; left: 0; right: 0; top: 43%; margin: 0; text-align: center; font-family: var(--sans); font-size: max(8px, 2.7cqh); font-weight: 500; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
/* each mark: a thin white ring (10.5cqh) around a white glyph; the link itself is the tap target, never under 40 px, and
   the targets sit side by side so they never overlap */
.cv-soc { position: absolute; left: 50%; top: 57%; translate: -50% -50%; display: flex; margin: 0; padding: 0; list-style: none; }
.cv-soc__a { display: grid; place-items: center; width: max(40px, 18cqh); height: max(40px, 15cqh); color: #fff; text-decoration: none; cursor: pointer; -webkit-touch-callout: default; }
.cv-soc__ring { display: grid; place-items: center; width: 10.5cqh; height: 10.5cqh; border-radius: 50%; box-shadow: inset 0 0 0 max(1px, .28cqh) rgba(255, 255, 255, .6); transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.cv-soc__ring svg { width: 5cqh; height: 5cqh; fill: currentColor; }
.cv-soc__ig { fill: none !important; stroke: currentColor; stroke-width: 2.3; }
.cv-soc__dot { fill: currentColor; stroke: none; }
.cv-soc__a:hover .cv-soc__ring { background: #fff; color: #2852E5; box-shadow: none; }
.cv-soc__a:focus-visible { outline: none; }
.cv-soc__a:focus-visible .cv-soc__ring { background: #fff; color: #2852E5; box-shadow: 0 0 0 max(2px, .5cqh) #2852E5, 0 0 0 max(4px, 1cqh) #fff; }
.cv-mark { position: absolute; left: 50%; top: 70%; width: 52%; height: auto; translate: -50% 0; filter: invert(1); mix-blend-mode: screen; } /* the lockup reversed out of his blue: white type, the seal's CB in the card's own blue */
.cv-lic { position: absolute; left: 0; right: 0; bottom: 7.5%; margin: 0; text-align: center; font-family: var(--sans); font-size: max(8px, 2.7cqh); font-weight: 500; line-height: 1; letter-spacing: .2em; color: rgba(255, 255, 255, .88); } /* never below 8px (a 320 phone); .88 white on his blue is 5:1 */
/* without the card's script (it never turns), a keyboard landing on a back link still turns the card to show it */
.cv:not(.is-live):has(.cv-face--back :focus-visible) .cv-pose { transform: rotateY(180deg); }

/* light on the paper (cardv.js drives .cv-shade and .cv-sheen; the sweep is the arrival's and each flip's one beat) */
.cv-shade, .cv-sheen, .cv-sweep { position: absolute; pointer-events: none; z-index: 2; }
.cv-shade { inset: 0; opacity: 0; background: linear-gradient(128deg, rgba(22, 20, 18, .5), rgba(22, 20, 18, .85)); }
.cv-sheen { inset: -35%; opacity: .3; background: radial-gradient(38% 52% at 40% 36%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%); }
.cv-face--front .cv-sheen { mix-blend-mode: soft-light; }
.cv-sweep { top: 0; bottom: 0; left: -100%; width: 300%; opacity: 0;
  background: linear-gradient(100deg, rgba(22, 20, 18, .06) 0%, rgba(22, 20, 18, .06) 41%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .42) 49%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .42) 51%, rgba(255, 255, 255, 0) 55%, rgba(22, 20, 18, .06) 59%, rgba(22, 20, 18, .06) 100%); }

/* the shadow on the page */
.cv-shadow, .cv-shadow__rise, .cv-shadow__idle { position: absolute; inset: 0; pointer-events: none; }
.cv-shadow { transform-origin: 50% 60%; }
.cv-shadow__amb { position: absolute; inset: 5% 2% -4% 2%; border-radius: 4cqw; background: rgba(var(--cd-shadow), .2); filter: blur(4.6cqw); }
.cv-shadow__key { position: absolute; inset: 1% 1% 0 1%; border-radius: 2cqw; background: rgba(var(--cd-shadow), .3); filter: blur(2cqw); transform: translate(2.2cqw, 3.2cqw); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cv-shadow__amb { background: rgba(0, 0, 0, .55); } :root:not([data-theme="light"]) .cv-shadow__key { background: rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] .cv-shadow__amb { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .cv-shadow__key { background: rgba(0, 0, 0, .6); }

/* the breath: a slow, gentle tilt on its own layer (the shadow breathes with it); off screen, still or paused, none */
@media (prefers-reduced-motion: no-preference) {
  html:not(.cv-still):not([data-tier="0"]) .cv-idle { animation: cv-breathe 11s ease-in-out infinite; }
  html:not(.cv-still):not([data-tier="0"]) .cv-shadow__idle { animation: cv-breathe-sh 11s ease-in-out infinite; }
}
.cd-hero.is-off :is(.cv-idle, .cv-shadow__idle) { animation-play-state: paused; }
@keyframes cv-breathe {
  0%, 100% { transform: translate3d(0, -.3cqw, 0) rotateX(1.5deg) rotateY(-2.2deg); }
  25% { transform: translate3d(0, .1cqw, 0) rotateX(-.2deg) rotateY(.4deg); }
  50% { transform: translate3d(0, .45cqw, 0) rotateX(-1.3deg) rotateY(2.4deg); }
  75% { transform: translate3d(0, .05cqw, 0) rotateX(.6deg) rotateY(-.3deg); }
}
@keyframes cv-breathe-sh {
  0%, 100% { transform: translate3d(.35cqw, .4cqw, 0) scale(1.012); opacity: .94; }
  25% { transform: translate3d(-.05cqw, 0, 0) scale(1); opacity: 1; }
  50% { transform: translate3d(-.35cqw, -.3cqw, 0) scale(.992); opacity: 1; }
  75% { transform: translate3d(0, .05cqw, 0) scale(1); opacity: .98; }
}

/* the arrival (html.cv-intro, decided in card.html's head before the first paint): the card is on screen in the first
   frame, low and tipped back as if it were lying on the page, then it rises and turns to face you (2.1 s), its shadow
   pulling away and softening as it lifts, and one band of light crosses the paper as it settles. Transform and opacity
   only, so it runs on the compositor while the page is still loading. No fade on the 3D layers themselves (a fading
   preserve-3d layer flattens); the faces fade in on their own. */
html.cv-intro .cv-rise { animation: cv-rise 2.1s both; }
html.cv-intro :is(.cv-face, .cv-edge) { animation: cv-in .45s ease-out both; }
html.cv-intro .cv-shadow__rise { animation: cv-rise-sh 2.1s both; }
html.cv-intro .cd-hero .cv-shade { animation: cv-shade-in 1.6s cubic-bezier(.35, .4, .3, 1); }
html.cv-intro .cv-face--front .cv-sweep { animation: cv-sweep 1.4s 1.3s cubic-bezier(.45, .05, .3, 1) both; }
html.cv-intro .cd-under { animation: cv-under .8s 1.45s var(--ease-out) both; } /* "See the back" rises in as the card lands (opacity only: nothing moves) */
@keyframes cv-rise {
  0% { transform: translate3d(0, 30cqw, -42cqw) rotateX(70deg) rotateY(-10deg) rotateZ(6deg); animation-timing-function: cubic-bezier(.34, .22, .24, 1); }
  60% { transform: translate3d(0, -1cqw, 0) rotateX(-3.5deg) rotateY(3deg) rotateZ(-.4deg); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  100% { transform: none; }
}
@keyframes cv-rise-sh {
  0% { opacity: 0; transform: translate3d(-1cqw, 22cqw, 0) scale(.84, .36); animation-timing-function: cubic-bezier(.34, .22, .24, 1); }
  30% { opacity: .75; }
  60% { opacity: 1; transform: translate3d(.4cqw, 1.2cqw, 0) scale(1.03, 1.02); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes cv-in { from { opacity: 0; } }
@keyframes cv-under { from { opacity: 0; } }
@keyframes cv-shade-in { 0% { opacity: .4; } 100% { opacity: 0; } }
@keyframes cv-sweep { 0% { opacity: 0; transform: translate3d(-36%, 0, 0); } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translate3d(34%, 0, 0); } }

/* ---------------------------------------------------------------- the hero: the card, the greeting, Save and the actions
   Phones: the greeting, the card across the width, "See the back", then Save and the actions in the thumb's reach.
   Desktop: the card on the left, the greeting and the actions on the right. Nothing in it is laid out by the motion, so
   the actions never move while the card arrives. */
.cd-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - var(--header-h)); padding: clamp(20px, 3svh, 36px) var(--gutter) clamp(22px, 3.4svh, 36px); -webkit-tap-highlight-color: transparent; }
.cd-hello { margin: 0 0 clamp(28px, 4.4svh, 44px); text-align: center; font-family: var(--sans); font-weight: 300; font-size: clamp(2.5rem, 13vw, 4rem); line-height: .98; letter-spacing: -.05em; color: var(--ink); }
.cd-hello em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--blue-text); }
.cd-cardcol { position: relative; z-index: 2; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.cd-under { display: flex; justify-content: center; margin-top: clamp(16px, 2.6svh, 28px); min-height: 40px; }
.cd-flip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; position: relative; transition: border-color var(--dur-2), background-color var(--dur-2); }
.cd-flip::before { content: ""; position: absolute; inset: -4px; }
.cd-flip:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cd-flip .icon { transition: transform .6s var(--ease-out); }
.cd-flip:hover .icon { transform: rotate(180deg); }
html:not(.cine-js) .cd-flip { visibility: hidden; } /* (it needs the page script; its space is kept so nothing moves) */

/* save + reach me */
.cd-actions { position: relative; z-index: 2; width: 100%; max-width: 460px; margin-top: clamp(24px, 4svh, 40px); }
.cd-save {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 22px; border-radius: 999px;
  background: var(--blue-fill); color: #fff; text-decoration: none; font-size: 1.125rem; font-weight: 500; letter-spacing: .01em; overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(40, 82, 229, .9), inset 0 1px 0 rgba(255, 255, 255, .22); transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.cd-save::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .26) 48%, transparent 66%); transform: translateX(-120%); }
.cd-armed .cd-save::after { animation: cd-glint 1.4s 2.4s var(--ease-cine) 1 both; } /* one glint, after the card has landed */
@keyframes cd-glint { to { transform: translateX(120%); } }
.cd-save__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.cd-save__icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cd-save__check { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.cd-save.is-saved { background: #1a8f5a; box-shadow: 0 14px 34px -18px rgba(26, 143, 90, .9); transition: background-color .35s; }
.cd-save.is-saved .cd-save__plus { opacity: 0; transition: opacity .15s; }
.cd-save.is-saved .cd-save__check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s .1s var(--ease-out); }
.cd-save.is-saved .cd-save__icon { animation: cd-pop .45s var(--ease-out); }
@keyframes cd-pop { 40% { transform: scale(1.25); } }
.cd-saved { margin-top: 10px; font-size: 15px; text-align: center; color: var(--ink); }
.cd-inline { color: var(--blue-text); }
.cd-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.cd-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--paper-2) 60%, transparent); color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: background-color var(--dur-2), border-color var(--dur-2); }
.cd-act:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); background: var(--paper-2); }

/* ---------------------------------------------------------------- 2 · where I've helped (bone): the mini map
   A small porcelain plate of North Texas (feedback #49, #53), SVG and CSS only: faint US 75, SH 121 and Tollway lines,
   McKinney and Melissa glowing as home base in his blue, and small ink dots across the areas he's served
   (js/ui/card-minimap.js draws them from js/data/map-points.js). The plate is one link to the homepage map. Phones: the
   plate, its caption, then the proof under it (about 0.8 of a 390 x 844 screen, padding included). Desktop: a tidy block
   about the card's width, the plate on the left and the proof beside it.
   Motion (only when the page moves; card-minimap.js holds it back, then plays it as the plate comes into view): the roads
   draw, home base lands and glows, the dots drop in outward from it with a gentle stagger, the labels settle last. While
   the plate is on screen the pair's glow breathes and a soft ring leaves each home dot now and then (HTML layers, so the
   compositor does it and the SVG never repaints). Still mode and the fail-safe: the final state, nothing breathes.
   Label sizes are in the SVG's own units (the plate is 690 units wide): 19 units is about 10px on a 390 phone, 20 about 11.5px on desktop. */
.cd-mm {
  --mm-a: #FBFAF9; --mm-b: #EFEEED; --mm-c: #E5E4E3; --mm-rim: rgba(21, 19, 17, .07); --mm-road: rgba(21, 19, 17, .17); --mm-case: rgba(255, 255, 255, .9);
  --mm-dot: #1F2946; --mm-town: var(--muted); --mm-halo: #F3F2F1; --mm-blue: #2852E5; --mm-glow: 40, 82, 229;
  --mm-hi: rgba(255, 255, 255, .8); --mm-inset: rgba(255, 255, 255, .7); --mm-pill: rgba(255, 255, 255, .78); --mm-pill-ink: #151311;
  padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(56px, 8vh, 112px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cd-mm { --mm-a: #211F1D; --mm-b: #1A1917; --mm-c: #141312; --mm-rim: rgba(237, 231, 220, .08); --mm-road: rgba(237, 231, 220, .16); --mm-case: rgba(0, 0, 0, .3); --mm-dot: #D5DBE8; --mm-town: #A8A196; --mm-halo: #1C1B19; --mm-blue: #7D97FF; --mm-glow: 91, 123, 255; --mm-hi: rgba(255, 255, 255, .035); --mm-inset: rgba(255, 255, 255, .06); --mm-pill: rgba(33, 31, 29, .8); --mm-pill-ink: #EDE7DC; }
}
:root[data-theme="dark"] .cd-mm { --mm-a: #211F1D; --mm-b: #1A1917; --mm-c: #141312; --mm-rim: rgba(237, 231, 220, .08); --mm-road: rgba(237, 231, 220, .16); --mm-case: rgba(0, 0, 0, .3); --mm-dot: #D5DBE8; --mm-town: #A8A196; --mm-halo: #1C1B19; --mm-blue: #7D97FF; --mm-glow: 91, 123, 255; --mm-hi: rgba(255, 255, 255, .035); --mm-inset: rgba(255, 255, 255, .06); --mm-pill: rgba(33, 31, 29, .8); --mm-pill-ink: #EDE7DC; }
.cd-mm__in { display: grid; gap: 20px; max-width: 356px; margin: 0 auto; text-align: center; }
.cd-mm__fig { margin: 0; }
.cd-mm__plate {
  position: relative; display: block; isolation: isolate; overflow: hidden; border-radius: 22px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(90% 60% at 18% 4%, var(--mm-hi), transparent 60%), linear-gradient(162deg, var(--mm-a) 0%, var(--mm-b) 56%, var(--mm-c) 100%);
  box-shadow: inset 0 1px 0 var(--mm-inset), 0 0 0 1px var(--mm-rim), 0 2px 4px -2px rgba(var(--cd-shadow), .12), 0 22px 44px -26px rgba(var(--cd-shadow), .42), 0 48px 90px -60px rgba(var(--cd-shadow), .4);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.cd-mm__plate::after { content: ""; position: absolute; inset: 9px; z-index: 3; border: 1px solid var(--mm-rim); border-radius: 15px; pointer-events: none; } /* the printed mat */
.cd-mm__plate:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 4px; }
.mm-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 690 / 720; }
/* home base: one soft blue light over the pair (under the dots), breathing while it's on screen */
.mm-glow { position: absolute; z-index: 0; left: 63.04%; top: 35.69%; width: 48%; aspect-ratio: .9; translate: -50% -50%; pointer-events: none; }
.mm-glow i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--mm-glow), .34), rgba(var(--mm-glow), .13) 46%, rgba(var(--mm-glow), 0) 100%); }
.mm-ring { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 6.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(var(--mm-glow), .6); opacity: 0; pointer-events: none; }
/* the roads: a pale casing under a faint ink line (US 75 a touch stronger) */
.mm-roads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mm-case { stroke: var(--mm-case); stroke-width: 7; }
.mm-road { stroke: var(--mm-road); stroke-width: 2.1; }
.mm-road--75 { stroke-width: 2.8; }
.mm-dot { fill: var(--mm-dot); transform-box: fill-box; transform-origin: 50% 100%; }
.mm-pair { fill: none; stroke: var(--mm-blue); stroke-width: 4; stroke-linecap: round; opacity: .5; }
.mm-lead path { fill: none; stroke: var(--mm-blue); stroke-width: 1.6; opacity: .55; }
.mm-core { fill: var(--mm-blue); stroke: #fff; stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.mm-labels text { font-family: var(--sans); paint-order: stroke; stroke: var(--mm-halo); stroke-linejoin: round; }
.mm-t { font-size: 19px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; fill: var(--mm-town); stroke-width: 6px; }
.mm-hb { font-size: 16px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; fill: var(--mm-blue); stroke-width: 6px; }
.mm-ht { font-size: 28px; font-weight: 500; letter-spacing: -.01em; fill: var(--mm-blue); stroke-width: 7px; }
.cd-mm__go {
  position: absolute; z-index: 4; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 13px; border-radius: 999px;
  background: var(--mm-pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(21, 19, 17, .08), 0 8px 18px -12px rgba(var(--cd-shadow), .5);
  color: var(--mm-pill-ink); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--dur-2), color var(--dur-2);
}
.cd-mm__go .icon { width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
@media (max-width: 359px) {
  .mm-t { font-size: 22px; } .mm-hb { font-size: 18px; }
  .cd-mm__go { right: 12px; bottom: 12px; min-height: 30px; padding: 0 9px 0 11px; font-size: 9.5px; letter-spacing: .1em; }
}
@media (hover: hover) and (pointer: fine) {
  .cd-mm__plate:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--mm-inset), 0 0 0 1px var(--mm-rim), 0 4px 8px -4px rgba(var(--cd-shadow), .16), 0 30px 56px -28px rgba(var(--cd-shadow), .5), 0 60px 110px -64px rgba(var(--cd-shadow), .45); }
  .cd-mm__plate:hover .cd-mm__go { background: var(--blue-fill); color: #fff; }
  .cd-mm__plate:hover .cd-mm__go .icon { transform: translate(2px, -2px); }
}
.cd-mm__plate:active .cd-mm__go { background: var(--blue-fill); color: #fff; }
.cd-mm__cap { margin: 12px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.cd-mm__h { margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(1.45rem, 6.3vw, 2.4rem); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; color: var(--ink); }
.cd-mm__h em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--blue-text); }
/* the proof: three across under the plate (phones), stacked rows beside it (desktop) */
.cd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.cd-stats li { display: grid; align-content: start; justify-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.cd-stats a { display: contents; color: inherit; text-decoration: none; }
.cd-stats__n { font-weight: 300; font-size: clamp(1.75rem, 7.8vw, 2.6rem); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.cd-stats__n--word { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 4.4vw, 1.4rem); letter-spacing: -.02em; line-height: 1.1; padding-top: .3em; color: var(--blue-text); white-space: nowrap; }
.cd-stats__k { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.cd-stats a:hover .cd-stats__k { color: var(--ink); }
@media (min-width: 900px) {
  .cd-mm__in { max-width: 880px; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 80px); align-items: center; text-align: left; }
  .mm-t { font-size: 20px; } .mm-hb { font-size: 17px; }
  .cd-mm__cap { margin-left: 4px; max-width: none; }
  .cd-mm__h { font-size: clamp(2.2rem, 3vw, 2.75rem); max-width: 12ch; }
  .cd-stats { grid-template-columns: 1fr; gap: 0; margin-top: 26px; max-width: 360px; }
  .cd-stats li { grid-template-columns: 7rem 1fr; align-items: baseline; justify-items: start; gap: 12px; padding: 14px 0; }
  .cd-stats li:last-child { border-bottom: 1px solid var(--line); }
  .cd-stats__n { font-size: 2.4rem; }
  .cd-stats__n--word { font-size: 1.3rem; padding-top: 0; }
  .cd-stats__k { font-size: 14px; }
}
/* the arrival (only while the page moves; the end state is the markup's own). .is-armed holds the dots back; .is-staged
   holds the roads, home base and labels back too, and card-minimap.js sets it only while the plate is still below the fold,
   so nothing already on screen ever disappears to replay. */
.cd-mm.is-armed .mm-dot { opacity: 0; transform: translateY(-22px) scale(.55); }
.cd-mm.is-staged :is(.mm-roads path, .mm-pair, .mm-lead path) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cd-mm.is-staged .mm-core { transform: scale(0); }
.cd-mm.is-staged :is(.mm-labels, .mm-glow) { opacity: 0; }
.cd-mm.is-armed.dots-in .mm-dot { opacity: 1; transform: none; transition: opacity .5s ease-out var(--d, 0ms), transform .85s cubic-bezier(.22, 1.3, .4, 1) var(--d, 0ms); }
.cd-mm.is-staged.is-in .mm-roads path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, .05, .25, 1); }
.cd-mm.is-staged.is-in .mm-glow { opacity: 1; transition: opacity 1.4s ease-out .15s; }
.cd-mm.is-staged.is-in .mm-core { transform: none; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.cd-mm.is-staged.is-in .mm-core + .mm-core { transition-delay: .32s; }
.cd-mm.is-staged.is-in :is(.mm-pair, .mm-lead path) { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out) .55s; }
.cd-mm.is-staged.is-in .mm-labels { opacity: 1; transition: opacity 1s ease-out .9s; }
@media (prefers-reduced-motion: no-preference) {
  .cd-mm.is-on .mm-glow i { animation: mm-breathe 6.5s ease-in-out infinite; }
  .cd-mm.is-on .mm-ring { animation: mm-ring 5.2s cubic-bezier(.2, .6, .35, 1) 2.2s infinite; }
  .cd-mm.is-on .mm-ring--2 { animation-delay: 4.8s; }
}
html[data-motion="paused"] .cd-mm :is(.mm-glow i, .mm-ring) { animation: none; }
@keyframes mm-breathe { 0%, 100% { opacity: .78; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes mm-ring { 0% { opacity: 0; transform: scale(.4); } 8% { opacity: .85; } 60%, 100% { opacity: 0; transform: scale(3.4); } }
html.is-failsafe .cd-mm :is(.mm-dot, .mm-core, .mm-labels, .mm-glow) { opacity: 1; transform: none; }
html.is-failsafe .cd-mm :is(.mm-roads path, .mm-pair, .mm-lead path) { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- the ink plate (Meet me)
   Into the ink (playbook B4a): the ink is a plate behind the section (.cd-plate) that rises with rounded corners and
   inset sides and opens to full bleed as the section arrives, then rounds off again as it leaves (card.js initPlates
   scrubs --plx/--plt/--plb). T0 and no JS: full bleed. */
.cd [data-plate-sec] { background: transparent; }
.cd [data-plate-sec] > :not(.cd-plate) { position: relative; }
.cd-plate { position: absolute; inset: 0; background: var(--night); pointer-events: none; clip-path: inset(0 var(--plx, 0px) 0 var(--plx, 0px) round var(--plt, 0px) var(--plt, 0px) var(--plb, 0px) var(--plb, 0px)); }

/* ---------------------------------------------------------------- 3 · meet me (ink)
   The montage arrives through an arched doorway that opens into its rounded frame as it rises (--mo 1 to 0, card.js), the
   footage settling from a slow push-in; it plays muted on a loop while it's in view. One line lights word by word beside
   it (below it on phones). No words ever sit over the footage. */
.cd-meet { color: var(--on-night); padding-top: clamp(84px, 13vh, 150px); padding-bottom: clamp(136px, 18vh, 176px); } /* (phones: the line, then a breath of ink, so the moment reads, and measures, as ink around the bright film) */
.cd-meet__in { display: grid; justify-items: center; gap: 22px; max-width: 1100px; margin: 0 auto; text-align: center; }
.cd-meet__h { color: inherit; opacity: .8; margin: 0; }
.cd-meet__frame {
  --mo: 0; position: relative; width: min(100%, 340px, calc((100svh - var(--header-h) - 250px) * .5625)); min-width: min(100%, 220px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #111;
  clip-path: inset(calc(var(--mo) * 7%) calc(var(--mo) * 13%) calc(var(--mo) * 4%) calc(var(--mo) * 13%) round calc(20px + var(--mo) * 180px) calc(20px + var(--mo) * 180px) 20px 20px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(237, 231, 220, .1);
}
.cd-meet__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--mo) * .14)); transform-origin: 50% 40%; }
.cd-round { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); color: #fff; background: rgba(11, 11, 12, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; }
.cd-meet__frame .cd-meet__btn { position: absolute; right: 12px; bottom: 14px; z-index: 3; opacity: calc(1 - var(--mo) * 2); }
.cd-round::before { content: ""; position: absolute; inset: -3px; }
.cd-line__p { max-width: 14ch; margin: 14px auto 0; font-weight: 300; font-size: clamp(2.5rem, 12.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.cd-line__p em { display: block; margin-top: .12em; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--blue-text); }
.cd-reg { font-family: var(--sans); font-style: normal; font-size: .36em; vertical-align: 1.35em; margin-left: .06em; letter-spacing: 0; }
/* the scroll-lit statement (playbook B6): each word from 16% to full as the line travels up the screen; the blue accent
   lands last with a small letter-spacing settle (card.js initLit writes --lit on each word) */
.cd-lit-on .w { display: inline-block; }
.cd-lit-on .wi { display: inline-block; opacity: calc(.16 + var(--lit, 0) * .84); transform: translateY(calc((1 - var(--lit, 0)) * .12em)); }
.cd-lit-on em .wi { letter-spacing: calc((1 - var(--lit, 0)) * -.02em); }
@media (min-width: 1000px) {
  .cd-meet { padding-top: clamp(44px, 6.2vh, 76px); padding-bottom: clamp(44px, 6.2vh, 76px); }
  .cd-meet__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "film h" "film line"; column-gap: clamp(48px, 7vw, 120px); align-items: center; text-align: left; justify-items: start; }
  .cd-meet__frame { grid-area: film; justify-self: end; width: min(100%, 400px, calc((100svh - var(--header-h) - 150px) * .5625)); }
  .cd-meet__h { grid-area: h; align-self: end; }
  .cd-line__p { grid-area: line; align-self: start; margin: 0; max-width: 11ch; font-size: clamp(3.4rem, 5.2vw, 5.6rem); }
}

/* ---------------------------------------------------------------- 4 · follow along (bone): the tiles are dealt in by the scroll */
.cd-followsec { text-align: center; }
.cd-followsec .cd-h2 { margin-bottom: 26px; }
.cd-follow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.cd-soc { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: #d8d6d2; box-shadow: 0 22px 40px -26px rgba(var(--cd-shadow), .55); transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: box-shadow var(--dur-3); }
.cd-soc:hover { box-shadow: 0 28px 50px -24px rgba(var(--cd-shadow), .6); }
/* the deal (card.js initDeal writes --deal 1 to 0 as the pair rises into view): each tile turns in from its own side */
.cd-follow.is-dealt .cd-soc { translate: 0 calc(var(--deal, 0) * var(--dy, 60px)); rotate: calc(var(--deal, 0) * var(--dr, 0deg)); }
.cd-soc--ig { --dy: 70px; --dr: -5deg; transform-origin: 100% 100%; }
.cd-soc--fb { --dy: 120px; --dr: 6deg; transform-origin: 0 100%; }
.cd-soc__media { position: absolute; inset: 0; z-index: 0; }
.cd-soc__media picture, .cd-soc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-soc--ig .cd-soc__media img { object-position: 50% 22%; }
.cd-soc--fb .cd-soc__media img { object-position: 50% 30%; }
.cd-soc__alt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]) .cd-soc__media > picture:first-child img { animation: cd-kb 14s ease-in-out infinite alternate; }
  :root:not([data-motion="paused"]) .cd-soc__alt { animation: cd-xf 12s ease-in-out infinite; }
}
@keyframes cd-kb { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1.5%); } }
@keyframes cd-xf { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.cd-soc__body { position: relative; z-index: 2; margin-top: auto; display: grid; gap: 2px; padding: 48px 14px 14px; background: linear-gradient(transparent, rgba(12, 11, 10, .78) 58%); }
.cd-soc__body .icon { margin-bottom: 4px; }
.cd-soc__net { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.cd-soc__handle { font-size: 16px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.cd-soc__go { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: #fff; color: #151311; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: transform var(--dur-2) var(--ease-out); }
.cd-soc:hover .cd-soc__go { transform: translateX(3px); }
.cd-soc--ig .cd-soc__go { background: linear-gradient(90deg, #e7ebf6, #fff); } /* pearl, never gold */
@media (max-width: 599px) {
  /* phones (round 7): the big tiles Ashton asked to keep, one above the other at full width, each dealt in from its own
     side as it rises (card.js initDeal scrubs each tile) */
  .cd-follow { grid-template-columns: 1fr; gap: 16px; }
  .cd-soc { aspect-ratio: 4 / 4.6; border-radius: 20px; }
  .cd-soc--ig { --dy: 90px; --dr: -4deg; }
  .cd-soc--fb { --dy: 90px; --dr: 4deg; }
  .cd-soc__body { padding: 40px 16px 16px; }
}
.cd-followsec { padding-bottom: clamp(36px, 6vh, 64px); }

/* ---------------------------------------------------------------- 5 · how I can help (bone): three guides
   (round 7) Each photo opens from a sliver as its guide crosses the screen (a curtain from the middle, scrubbed and
   reversible), settling from a slow push-in, then drifts a little with the scroll while it's in view; the words rise beside
   it. card.js initGuides writes --g (0 closed to 1 open) and --gp (-1 to 1, the drift) on each guide. At rest (T0, no
   JS, the fail-safe) everything is open. */
.cd-help { padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(40px, 7vh, 84px); }
.cd-help .cd-sec__in { max-width: 1120px; }
.cd-help .cd-caps { text-align: center; }
.cd-guides { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.cd-guide { --g: 1; --gp: 0; }
.cd-guide a { position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; color: var(--ink); text-decoration: none; }
.cd-guide__pic { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--paper-2);
  clip-path: inset(calc((1 - var(--g)) * 4%) calc((1 - var(--g)) * 50%) calc((1 - var(--g)) * 4%) calc((1 - var(--g)) * 50%) round 16px); }
.cd-guide__pic img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: translateY(calc(var(--gp) * -4%)) scale(calc(1 + (1 - var(--g)) * .28)); transition: filter var(--dur-3); }
.cd-guide__txt { display: grid; gap: 6px; opacity: calc(var(--g) * 1.6 - .4); translate: calc((1 - var(--g)) * 26px) 0; }
.cd-guide__k { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--blue-text); }
.cd-guide__t { font-size: clamp(1.5rem, 6.4vw, 2.1rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.cd-guide__t em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.cd-guide__l { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.cd-guide__go { width: 22px; height: 22px; opacity: calc(var(--g) * 2 - 1); transition: transform var(--dur-3) var(--ease-out); }
.cd-guide a:hover .cd-guide__go, .cd-guide a:focus-visible .cd-guide__go { transform: translateX(6px); }
.cd-guide a:hover .cd-guide__pic img { filter: brightness(1.04) saturate(1.05); }
/* while it's in view each photo breathes (a slow push, time-based, so the moment is alive even when the scroll rests) */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]) .cd-guides.is-on .cd-guide__pic img { animation: cd-breathe 8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.7s); }
}
@keyframes cd-breathe { from { scale: 1; } to { scale: 1.06; } }
@media (min-width: 1000px) {
  .cd-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: 26px; }
  .cd-guide a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p p" "t i"; align-items: end; gap: 18px 12px; }
  .cd-guide__pic { grid-area: p; aspect-ratio: 4 / 5; border-radius: 18px; }
  .cd-guide__txt { grid-area: t; translate: 0 calc((1 - var(--g)) * 22px); }
  .cd-guide__go { grid-area: i; margin-bottom: 4px; }
  .cd-guide__t { font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
}
html.is-failsafe .cd-guide { --g: 1 !important; --gp: 0 !important; }

/* ---------------------------------------------------------------- 6 · share (bone): the card comes back, small */
.cd-share { padding-top: clamp(36px, 6vh, 90px); padding-bottom: clamp(64px, 10vh, 120px); }
.cd-share__in { display: grid; justify-items: center; gap: 34px; max-width: 980px; margin: 0 auto; text-align: center; }
.cd-share__words { display: grid; justify-items: center; gap: 12px; }
.cd-share__btn { min-height: 54px; padding: 0 28px; border-radius: 999px; margin-top: 6px; }
.cd-share__url { font-size: 15px; }
.cd-share__social a { color: var(--ink); }
.cd-vcf { max-width: 520px; width: 100%; text-align: left; margin-top: 6px; }
.cd-vcf summary { cursor: pointer; font-size: 14px; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.cd-vcf textarea { width: 100%; font-size: 13px; }
/* the mini card: the same printed front (the .cv-face markup, small), turned in by the scroll (--mt 1 to 0, card.js
   initMini); Share sends it off and it comes back (.is-sent) */
.cd-mini { --mt: 0; --k: var(--cv-k, 1); position: relative; width: min(86vw, 340px); aspect-ratio: 1.75; perspective: 1000px; container-type: inline-size; }
.cd-mini__card { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(calc(var(--mt) * 36px)) rotateY(calc(-12deg + var(--mt) * 38deg)) rotateX(calc(7deg + var(--mt) * 16deg)) rotateZ(calc(-2deg + var(--mt) * -5deg)); }
.cd-mini__face { transform: none; box-shadow: inset 0 0 0 1px rgba(24, 22, 20, .07), .5cqw .35cqw 0 #E0DFDE; }
.cd-mini__shadow { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 22%; border-radius: 50%; background: rgba(var(--cd-shadow), .3); filter: blur(12px); z-index: -1; transform: scaleX(calc(1 - var(--mt) * .3)); opacity: calc(1 - var(--mt) * .6); }
.cd-mini.is-sent .cd-mini__card { animation: cd-send 1.5s var(--ease-cine) 1; }
.cd-mini.is-sent .cd-mini__shadow { animation: cd-send-sh 1.5s var(--ease-cine) 1; }
@keyframes cd-send { 0% { transform: rotateY(-12deg) rotateX(7deg) rotateZ(-2deg); } 38% { transform: translate(60vw, -40vh) rotateY(40deg) rotateX(20deg) rotateZ(24deg) scale(.5); } 39%, 61% { transform: translate(60vw, -40vh) scale(.01); } 62% { transform: translateY(40px) rotateY(-30deg) scale(.9); } 100% { transform: rotateY(-12deg) rotateX(7deg) rotateZ(-2deg); } }
@keyframes cd-send-sh { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0; } }
@media (min-width: 1000px) {
  .cd-share__in { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(56px, 8vw, 120px); text-align: left; justify-items: start; align-items: center; }
  .cd-share__words { justify-items: start; }
  .cd-mini { width: clamp(340px, 30vw, 420px); }
  .cd-vcf summary { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- the text-me ending (shared, css/site.css §14): page spacing only */
.page--card .textme { margin-top: 0; }

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 600px) {
  .cd-hero { padding-top: clamp(28px, 5svh, 56px); }
}
@media (min-width: 1000px) {
  .cd-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "card ." "card hello" "card actions" "card ."; column-gap: clamp(48px, 6vw, 112px); align-items: center; padding: 32px clamp(48px, 6.4vw, 124px) 40px; }
  .cd-cardcol { grid-area: card; max-width: 720px; margin: 0; justify-self: end; }
  .cd-hello { grid-area: hello; align-self: end; margin: 0 0 34px; text-align: left; font-size: clamp(3.4rem, 5vw, 5.4rem); line-height: .96; letter-spacing: -.052em; }
  .cd-hello .cd-br { display: none; }
  html.cv-intro .cd-hello { clip-path: inset(0 0 100% 0); translate: 0 .35em; animation: cd-safe-mask 1.15s .45s var(--ease-cine) forwards; }
  @keyframes cd-safe-mask { to { clip-path: inset(-.2em -.2em -.3em -.2em); translate: none; } }
  .cd-actions { grid-area: actions; align-self: start; margin: 0; }
  .cd-follow { gap: 20px; }
  .cd-sec__in { max-width: 680px; }
  .cd-followsec .cd-sec__in { max-width: 900px; }
  .cd-help .cd-sec__in { max-width: min(1060px, 86vw); }
}

/* ---------------------------------------------------------------- still (reduced motion, the pause, Save-Data): designed rests */
html:is(.cv-still, [data-tier="0"]) :is(.cv-rise, .cv-idle, .cv-shadow__rise, .cv-shadow__idle, .cv-face, .cv-edge, .cv-sweep, .cv-shade, .cd-under) { animation: none !important; }
html:is(.cv-still, [data-tier="0"]) .cd-hello { clip-path: none !important; translate: none !important; animation: none !important; }
html[data-tier="0"] .cd-meet__frame, html.is-failsafe .cd-meet__frame { --mo: 0 !important; }
html[data-tier="0"] .cd-mini, html.is-failsafe .cd-mini { --mt: 0 !important; }
html[data-tier="0"] .cd-plate, html.is-failsafe .cd-plate { clip-path: none; }
html.is-failsafe .cd-lit-on .wi { opacity: 1; transform: none; }