/* Vanity Ink v2 (2026-10-07): the 10-06 copy (content/website-copy/pages/) on the existing design system.
   Loaded after the page's own stylesheets. Only what the new copy needs that the system didn't already have:
   1. the copy's bold display line as a lead under each hero's H1 (Home keeps its own hero: the H1 as the small violet
      line, the logo tagline as the headline; inner pages keep their big chrome H1, 10-07);
   2. Home's on-page FAQ (the FAQ page's accordion, which Home didn't load);
   3. small helpers (inline link rows, placeholder photo slots, list labels).
   Page-specific additions live in v2-<page>.css. Elementor notes follow each block, as in the other files. */

/* ===== 1 · Hero lead line (and the tagline helpers, unused on inner pages since 10-07: Home's tagline is home.css .hero-tag) =====
   Home (home.css) already sets .hero h1 small and violet and .hero-tag as the chrome line. Inner heroes get the same:
   the copy's H1 word for word as the small violet line (SEO keeps it as the H1), the tagline as the big chrome line
   (left-aligned, as inner heroes are), then the copy's display line as a lead, then the subhead.
   Elementor: Heading (H1) styled small; a row container of three Heading widgets + two gem Images; Heading (tag p) for
   the lead; Text Editor for the subhead. Phones: the row stacks. */
.page-hero h1.kicker,.profile-hero h1.kicker{background:none;-webkit-text-fill-color:currentColor;filter:none;color:var(--purple-light);
  font-size:clamp(13px,1.2vw,17px);line-height:1.5;letter-spacing:.3em;margin:0 0 18px;max-width:none}
.v2-tag{display:flex;align-items:center;gap:.4em;margin:0 0 28px;font:500 clamp(30px,3.9vw,60px)/1.08 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  background-image:var(--chrome),var(--brushed);background-size:100% 1lh,auto;background-repeat:repeat-y,repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#DADAE0;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.v2-tag .gem{flex:none;width:auto;height:.6em;transform:translateY(-.04em)}
.hero .v2-tag{justify-content:center}
/* the copy's display line: Cinzel, sentence case, solid (not chrome), so it reads as the page's own claim under the tagline */
.hero-lead{margin:0 0 18px;font:400 clamp(20px,1.9vw,28px)/1.3 var(--display);letter-spacing:.02em;color:var(--text);text-wrap:balance}
.hero .hero-lead{max-width:760px;margin:0 auto 18px}
.page-hero .hero-lead{max-width:700px}
.page-hero .sub+.sub{margin-top:-6px}
@media (forced-colors:active){.v2-tag{background:none!important;-webkit-text-fill-color:currentColor!important;filter:none!important}}
@media (max-width:767px){
  .v2-tag{flex-direction:column;align-items:flex-start;gap:.16em;white-space:normal}
  .hero .v2-tag{align-items:center}
  .v2-tag .gem{height:.46em;transform:none}
}
/* the hero's secondary text link (Book: "Or email ...") */
.hero-alt{display:inline-block;margin-top:18px;font-size:15px}

/* ===== 2 · FAQ accordion on Home (same look as the FAQ page; pages.css "FAQ") ===== */
.faq .acc-btn{grid-template-columns:1fr 30px;padding:24px 0}
.faq .acc-h{margin:0;font:500 19px/1.4 var(--sans);text-transform:none;letter-spacing:0;color:var(--text);background:none;-webkit-text-fill-color:currentColor;filter:none}
.faq .acc-panel{padding:0 46px 28px 0}
.faq .acc-panel p{font-size:var(--body-sm);text-wrap:pretty}
.faq .acc-item,.faq .acc{border-color:var(--line-soft)}
.faq .acc-item{scroll-margin-top:120px}

/* ===== 3 · Helpers ===== */
/* a row of quiet text links under a block (the copy's [Link] lines) */
.link-row{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px}
.link-row a{font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--purple);padding-bottom:4px}
.link-row a:hover{color:var(--purple-light)}
.link-row.center{justify-content:center}
/* a labeled placeholder where the copy asks for a photo that doesn't exist yet ([Image: ...]) */
.ph.slot{aspect-ratio:4/5}
.ph.slot.wide{aspect-ratio:3/2}
/* list with bold labels (Book's pricing) */
.label-list{display:flex;flex-direction:column;margin:8px 0 0}
.label-list li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line-soft);color:var(--text-muted)}
.label-list li:first-child{border-top:1px solid var(--line-soft)}
.label-list b{font:600 11px/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--purple-light)}
@media (max-width:767px){.label-list li{grid-template-columns:1fr;gap:4px}}
/* a plain dash list over the river (prep, what's normal) */
.dash-list{display:flex;flex-direction:column;margin:8px 0 20px}
.dash-list li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--text)}
.dash-list li:first-child{border-top:1px solid var(--line-soft)}
.dash-list li::before{content:"";width:10px;height:1px;margin-top:calc((1lh - 1px)/2);background:var(--purple-light)}
.dash-list b{font-weight:600;color:var(--text)}

/* ===== 4 · Google map, dark (10-07): the embed inverted to a dark map. Elementor: Google Maps widget + the same CSS
   filter on the iframe (Custom CSS), or a styled map from the Maps API if a key is added later. ===== */
iframe[src*="google.com/maps"]{filter:invert(.92) hue-rotate(180deg) saturate(.35) brightness(.95) contrast(.92)}

/* ===== 5 · Inner heroes, shorter (10-07, Tannis: too much space between the hero and the content). The full-screen
   height (pages.css: min(100svh,1000px)) drops to about three quarters of the screen, and the bottom padding with it.
   Elementor: hero container min-height 75vh instead of 100vh. ===== */
.page-hero{padding-bottom:96px}
.page-hero.tall{min-height:min(74svh,740px)}
@media (max-width:767px){.page-hero{padding-bottom:64px}.page-hero.tall{min-height:0}}