/* card-flip — the closing: the last section folds into the client's business card. Scoped to .card-flip.
   Reads tokens: --ground --ink --muted --accent --light --paper --paper-ink --font-sign --font-display
   --font-text --motif --material (all with fallbacks). Needs design-taste-frontend's stage.css and the identity css (.material = the client's stone, veiled;
   used on .scene-stage and .cf-stone so the url() inside --material resolves in the identity file). */
.card-flip { color: var(--ink, #efe6d8); }
.card-flip .scene-stage { display: grid; place-items: center; padding: 88px 16px; gap: 40px; justify-items: center; align-content: center; background: var(--ground, #1b1410); }
.card-flip .cf-head, .card-flip .cf { position: relative; z-index: 2; }
.card-flip .cf-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; }
.card-flip .cf-head { text-align: center; }
.card-flip .cf-head h2 { font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: clamp(2.2rem, 6vw, 4.4rem); }
.card-flip .cf-head p { margin: 14px 0 0; color: var(--muted, #a89a86); }

/* the finished composition (no JS, reduced motion, failed CDN): both faces side by side, all links work */
.card-flip .cf { perspective: 1400px; width: 100%; }
.card-flip .cf-tilt { transform-style: preserve-3d; }
.card-flip .cf-card { --cw: min(88vw, 520px); display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; transform-style: preserve-3d; }
.card-flip .cf-face { box-sizing: border-box; position: relative; width: var(--cw); aspect-ratio: 85.6 / 54; container-type: size; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset; }

/* front: the stone, the awning, the sign */
.card-flip .cf-front { background: var(--ground, #1b1410); color: var(--ink, #efe6d8); display: grid; place-items: center; text-align: center; }
.card-flip .cf-front .cf-stone { position: absolute; inset: 0; --material-size: var(--card-stone-size, 420%); --material-pos: var(--card-stone-pos, 0% 66%); --veil: var(--card-veil, .58); }
.card-flip .cf-front .cf-glow { position: absolute; width: 70cqw; height: 70cqw; left: 15cqw; top: calc(50cqh - 35cqw); border-radius: 50%; background: var(--light, #ffb05a); opacity: .16; filter: blur(12cqw); mix-blend-mode: screen; }
.card-flip .cf-front .cf-awning { position: absolute; left: 0; right: 0; top: 0; height: 6.3cqw; background: var(--motif, none) repeat-x 0 0 / 10cqw 6.3cqw; }
.card-flip .cf-front .cf-frame { position: absolute; inset: 3.6cqw; top: 9cqw; border: 1px solid rgba(239,230,216,.28); border-radius: 6px; }
.card-flip .cf-front .cf-name { position: relative; font-family: var(--font-sign, cursive); font-size: 17cqw; line-height: .9; margin: 6cqw 0 0; padding: 0 8cqw; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.card-flip .cf-front .cf-tag { position: absolute; bottom: 7cqw; left: 0; right: 0; font: 500 2.6cqw/1 var(--font-text, sans-serif); letter-spacing: .28em; text-transform: uppercase; color: var(--light, #ffb05a); }
.card-flip .cf-sheen { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 18%; background: #fff; opacity: 0; transform: skewX(-18deg); filter: blur(14px); mix-blend-mode: soft-light; pointer-events: none; }

/* back: the paper */
.card-flip .cf-back { background: var(--paper, #efe4cf); color: var(--paper-ink, #2a1d16); display: grid; grid-template-columns: 1.3fr 1fr; gap: 3cqw 5cqw; align-content: center; padding: 5cqw 7cqw 10cqw; font: 400 2.8cqw/1.45 var(--font-text, sans-serif); }
.card-flip .cf-back .cf-awning { position: absolute; left: 0; right: 0; bottom: 0; height: 6.3cqw; background: var(--motif, none) repeat-x 0 0 / 10cqw 6.3cqw; transform: scaleY(-1); }
.card-flip .cf-back h3 { grid-column: 1 / -1; font-family: var(--font-sign, cursive); font-weight: 400; font-size: 9cqw; line-height: .9; margin: 0; color: var(--accent, #c4493b); }
.card-flip .cf-back address { font-style: normal; font-weight: 600; }
.card-flip .cf-back dl { margin: 1.4cqw 0 0; display: grid; grid-template-columns: auto 1fr; gap: .4cqw 3cqw; }
.card-flip .cf-back dt { opacity: .7; white-space: nowrap; }
.card-flip .cf-back dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-flip .cf-back [data-open-status] { display: inline-block; margin-top: 2cqw; padding: .7cqw 2.4cqw; border-radius: 99px; background: var(--paper-ink, #2a1d16); color: var(--paper, #efe4cf); font-weight: 600; font-size: 2.6cqw; }
.card-flip .cf-back [data-open-status]:empty { display: none; }
.card-flip .cf-acts { display: grid; gap: 2cqw; align-content: center; }
.card-flip .cf-acts a { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 3cqw; border-radius: 99px; border: 1.5px solid var(--paper-ink, #2a1d16); color: inherit; text-decoration: none; font-weight: 600; font-size: 3.1cqw; white-space: nowrap; }
.card-flip .cf-acts a:first-child { background: var(--accent, #c4493b); border-color: var(--accent, #c4493b); color: #fff; }
.card-flip .cf-acts a:hover, .card-flip .cf-acts a:focus-visible { background: var(--paper-ink, #2a1d16); color: var(--paper, #efe4cf); border-color: var(--paper-ink, #2a1d16); }
.card-flip a:focus-visible { outline: 2px solid var(--light, #ffb05a); outline-offset: 3px; }

/* phone: a portrait card (taller than wide) gives the back room to breathe */
@media (max-width: 767px) { .card-flip .cf-card { --cw: min(78vw, 360px); } .card-flip .cf-face { aspect-ratio: 54 / 85.6; } }
@media (max-width: 767px) {
  .card-flip { --card-stone-size: 700%; --card-stone-pos: 8% 70%; }
  .card-flip .cf-back { grid-template-columns: 1fr; align-content: start; gap: 3cqw; padding: 7cqw 8cqw 14cqw; font-size: 4.3cqw; }
  .card-flip .cf-back h3 { font-size: 15cqw; }
  .card-flip .cf-back [data-open-status] { font-size: 3.8cqw; }
  .card-flip .cf-acts a { font-size: 4.2cqw; }
  .card-flip .cf-front .cf-name { font-size: 24cqw; }
  .card-flip .cf-front .cf-tag { font-size: 3.6cqw; }
}

/* live: the faces stack, the card is one object that turns */
html.js .card-flip.is-live .scene-stage { padding: 0; gap: 0; }
html.js .card-flip.is-live .cf-head { position: absolute; top: 14svh; left: 0; right: 0; padding: 0 16px; }
html.js .card-flip.is-live .cf { position: absolute; inset: 0; display: grid; place-items: center; width: auto; }
html.js .card-flip.is-live .cf-card { --cw: min(88vw, 860px, 150svh); display: block; position: relative; width: var(--cw); aspect-ratio: 85.6 / 54; }
html.js .card-flip.is-live .cf-face { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.js .card-flip.is-live .cf-back { transform: rotateY(180deg); }
@media (max-width: 767px) { html.js .card-flip.is-live .cf-card { --cw: min(78vw, 360px, 62svh); aspect-ratio: 54 / 85.6; } }