/* Vanity Ink: header, footer, shared components (v2 flow). Home sections live in home.css. */

/* keyboard users: jump past the header */
.skip{position:fixed;left:16px;top:-60px;z-index:70;padding:10px 16px;background:var(--black);color:var(--text);border:1px solid var(--purple-light);font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:16px}
/* phones and tablets: booking always in reach, on every page (Tannis 10-13): Book a Consultation on half the bar, then
   Call and Text a quarter each, an icon over a short word (Book's own bar jumps to its form). Elementor: a container,
   position fixed bottom, hidden on desktop; a Button (50%) and two Icon Box links (tel:, sms:). */
.book-bar{display:none}
@media (max-width:1023px){
  .book-bar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,6,7,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line-soft)}
  .book-bar .btn{flex:2 1 0;min-width:0;padding:14px 8px;font-size:11px;letter-spacing:.06em;background:var(--purple);border-color:var(--purple);color:#fff}
  .bar-ico{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(200,200,204,.45);color:var(--text);font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
  .bar-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
  .bar-ico:hover{color:var(--purple-light);border-color:var(--purple-light)}
  /* room for the bar under the footer (on the footer, not the body, so no marble shows below it) */
  .site-footer:has(+ .book-bar){padding-bottom:76px}
  /* an inner hero's booking button: on phones and tablets the fixed bar is the call to action, so no second, identical
     button in the same screen (Book's included, since its bar now jumps to the form) */
  .hero-book{display:none}
}

/* ===== Header ===== */
/* Smoked glass from the top on every page (Carlos, 10-01: the menu needs a dark ground over Home's hero, "like when
   you scroll down and it gets darker"). Home's header used to start clear and turn to glass after 60px of scroll;
   inner pages already started as glass. Elementor: header container background rgba(6,6,7,.72), bottom border
   1px rgba(255,255,255,.08); the blur is optional custom CSS (7.4). */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid var(--line-soft);
  background:rgba(6,6,7,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  transition:background .4s var(--ease),border-color .4s}
/* logo left, the links centred between the logo and the actions, the actions right: the phone, then the booking
   button (Carlos, 09-29: more room between the logo and the links; 10-02 late: the phone number in the header, "to the
   left of the Book a Consultation CTA, or wherever it would fit best"). The links used to sit on the page's centre
   line, which left 147px between them and the button at the 1240 container: too little for the number and its glyph
   (about 117px) with air on both sides. So the links now centre between the logo and the actions, with equal room on
   both sides (about 80px from 1280 up); that puts them about 75px left of the page's centre line.
   Elementor: header container as a 3-column grid (auto 1fr auto): Site Logo, Nav Menu (centred), a row container
   with the phone and the Button. */
.hdr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:32px;min-height:84px}
@media (min-width:1024px){.nav{justify-self:center}}  /* desktop only: it would also shrink the phone menu's panel */
/* the client's chrome lockup (references/logos/drive-2026-09-18, keyed onto transparency). Elementor: Site Logo widget. */
.wordmark{justify-self:start;display:block;flex:none;line-height:0}
.wordmark img{height:58px;width:auto}
.nav ul{display:flex;gap:34px}
.nav a{position:relative;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding:6px 0}
/* a plain underline that simply appears on hover and stays under the current page (Carlos, 09-29: no animated streak).
   Elementor: Nav Menu > Pointer: Underline, Animation: Fade, 1px, color #A98AD6. */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--purple-light);opacity:0;transition:opacity .15s}
.nav a:hover::after,.nav a[aria-current]::after{opacity:1}
/* the actions, right: the phone, the booking button (and on phones and tablets the menu button, see Responsive) */
.hdr-actions{display:flex;align-items:center;gap:24px}
/* The phone, quietly (Carlos 10-02 late): the glyph in the accent, the number in the nav's 12px and weight but muted
   and barely tracked, on the nav's line; it reads as a utility beside the button, not a seventh link. No "Call" on
   screen (the glyph says it); the link's name for screen readers is "Call 720-659-0663" (#55's words). It shows from
   1280 up. From 1024 to 1279 the header keeps today's look without it: there the number (or even the glyph alone)
   would squeeze the links against the logo, and a bare glyph tells a laptop visitor nothing. Phones and tablets get a
   44px call button beside the menu button (Responsive). Elementor: Icon List, one item (phone icon 16px #A98AD6; text
   12px, weight 500, .06em, #A9A9B1; hover #A98AD6), link tel:+17206590663, Responsive: shown on Desktop only, with
   the Laptop breakpoint activated at 1279 (Site Settings > Layout > Breakpoints). */
.hdr-call{position:relative;top:1px;display:inline-flex;align-items:center;gap:9px;padding:6px 0;color:var(--text-muted);font:500 12px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;transition:color .2s,border-color .2s}  /* top: on the links' text line */
.hdr-call svg{width:16px;height:16px;flex:none;color:var(--purple-light);transition:color .2s}
/* "Call or text" over the number (Tannis 10-14), header and footer alike: a small label line, then the number */
.hdr-num{display:flex;flex-direction:column;gap:5px}
.hdr-lbl,.ft-lbl{display:block;font:500 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--purple-light)}
.ft-lbl{margin-bottom:6px}
.hdr-call:hover{color:var(--purple-light)}.hdr-call:hover svg{color:var(--purple-pale)}
/* Artists dropdown (Carlos, 09-30: Jeremy and Kain under Artists; Kain links to his card until he has a page).
   Opens on hover or keyboard focus, a dark glass panel under the link; a clear strip bridges the gap so the pointer
   can travel into it. Elementor: Nav Menu with the WordPress menu's child items; Dropdown: background rgba(6,6,7,.92),
   the same 12px caps, the same underline pointer. No custom CSS. */
.nav .has-sub{position:relative}
.nav .has-sub::before{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:26px}
.nav .sub{position:absolute;left:-24px;top:calc(100% + 26px);z-index:5;display:flex;flex-direction:column;gap:2px;min-width:210px;
  padding:14px 24px 16px;background:rgba(6,6,7,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-soft);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:inline-block;padding:10px 0;white-space:nowrap}
.nav .m-cta{display:none}
.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line)}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--text);transition:transform .2s,opacity .2s}

/* ===== Shared: section heads ===== */
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;margin-bottom:56px}
.sec-head .lead{max-width:440px;margin:0;text-wrap:pretty}
/* stacked: heading, then a long lead under it (no heading floating beside a tall paragraph); cards line up left */
.sec-head.stack{flex-direction:column;align-items:flex-start;gap:0}
.sec-head.stack .lead{max-width:700px}
.sec-head.stack+.cards{justify-content:start}
.center-head{text-align:center;margin-bottom:64px}
.center-head h2{max-width:760px;margin-left:auto;margin-right:auto}
.lead{font-size:var(--body);color:var(--text-muted);text-wrap:pretty}

/* ===== Shared: artist cards (Artists page), unboxed: portrait, then text on the canvas ===== */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;max-width:900px}
.sec-head+.cards{max-width:none;grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:64px}
.artist{display:flex;flex-direction:column;scroll-margin-top:110px}
.artist .ph,.artist .shot{aspect-ratio:4/5;border:0}
.artist .body{padding:28px 0 0;display:flex;flex-direction:column;gap:12px;flex:1}
.artist .eyebrow{margin:0;font-size:11px}
.artist h3{font-size:28px}
.artist p{font-size:var(--body-sm)}
/* actions like Home's artists: the button, then the Instagram handle under it, for both artists. No rule above them
   and not pinned to the card's foot (Carlos 09-30: the rule wasn't needed, and pinning left a gap under Kain's
   shorter bio): each bio runs straight into its button with Home's spacing, even when the two buttons don't line up. */
.artist .meta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:14px}
/* Instagram: the glyph + "INSTAGRAM" as one link, set like the button beside it (Carlos, 09-30: the glyph with the
   @handle looked funky next to the uppercase button; this also keeps Jeremy's profane handle off the page). The
   handle stays in the link for screen readers (with "Instagram:" from the copy), and site.js still fills it in.
   Opens in a new tab. 09-30: the label a touch smaller (11px, .16em; Carlos: it read big next to the icon), the icon
   unchanged. Elementor: Icon List item (Instagram icon 18px, 11px caps, .16em) linking out, new window. */
/* The phone link (10-02, Carlos: "more of the phone number" on the site, the quiet version): the phone glyph + "Call
   720-659-0663" set exactly like the Instagram link, a tel: link under the button at the end of every page (Home's
   final call, home.css; the inner strips, pages.css) and of Contact's hero. "Call" is new wording (double-check #55).
   Elementor: Icon List item (phone icon 18px, 11px caps, .16em) linking to tel:+17206590663. */
.ig-link,.call-link{display:inline-flex;align-items:center;gap:11px;color:var(--text);font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 0;border:0;transition:color .2s}
.ig-link svg,.call-link svg{width:18px;height:18px;flex:none;color:var(--text);transition:color .2s}
.ig-link:hover,.ig-link:hover svg,.call-link:hover,.call-link:hover svg{color:var(--purple-light)}
.ig-row{margin:14px 0 26px}

/* the end of every page: the button, then the phone link under it, centred on each other (Home's final call; the
   right-hand cell of every inner strip). Elementor: a column container, align center, gap 14: Button, Icon List. */
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px}

/* ===== Shared: the studio (Home, About), 10-02 (late): a registered bleed =====
   The full-width band (crisp edges, hairlines, darkened behind the words) "broke" the flow of a site that is one
   continuous background (the client, via Carlos 10-02); the soft-faded band before it read as a "blurry window"
   (09-29). So the room is a framed photo in the flow like every other photo (.framed: hairline + soft shadow, clean
   edges, never faded into the marble), large, and bleeding off the viewport edge on its side on purpose.
   Registered (Carlos, 10-02 late: the photo "offset to the right like that... just looks weird"): the first version
   dropped the photo 140px below the words and hung it into the next section, and with the edge crop that read as
   misregistration. Now the photo's top edge sits on the H2's cap line (the eyebrow stands above it, like a kicker),
   and the photo ends inside its own section: no drop, no hang. Home flips it (.flip: the photo left, the words right),
   so its Studio and Visit alternate instead of reading as twins on one grid; About keeps the words left, after Time for
   the Drawing's photo-left row.
   The river: the section carries its own cut (--mimg, set per page). It starts --s-up above the section (or lower, with
   a negative value), eases in over --s-in, runs on --s-down under the next section's top and eases out over --s-out,
   so something crosses both seams. A radial shade (--s-shade) calms it where it matters: around the photo (About) or
   behind the words (Home, where the photo's free edges are already on dark marble). The section has no
   isolation on purpose: its ::before (z-index -1) lands in the page's stacking context, beneath the neighbouring
   sections and their rivers, so it never covers their words, and a previous river's tail can run on over it.
   Desktop (1024 and up) only for the side-by-side; tablets and phones stack (the words, then the photo bleeding off
   its side). Elementor: build spec 4.7 (a full-width container with the river, a boxed 5fr/7fr grid, a radial pool,
   an Image widget with Border, Box Shadow, one negative margin for the bleed and Z-Index). */
.studio{position:relative;padding:var(--s-pt,120px) 0 var(--s-pb,0px);
  --edge:max(var(--gutter),calc((100vw - var(--container)) / 2));  /* from the content edge out to the viewport edge */
  --s-h2:var(--h2);  /* the heading's size (the site's H2); the photo finds the heading's cap line from it */
  --s-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.12) calc(var(--s-in,300px)*.26),rgba(0,0,0,.5) calc(var(--s-in,300px)*.52),rgba(0,0,0,.88) calc(var(--s-in,300px)*.78),#000 var(--s-in,300px),#000 calc(100% - var(--s-out,300px)),rgba(0,0,0,.88) calc(100% - var(--s-out,300px)*.78),rgba(0,0,0,.5) calc(100% - var(--s-out,300px)*.52),rgba(0,0,0,.12) calc(100% - var(--s-out,300px)*.26),transparent 100%)}
.studio::before{content:"";position:absolute;left:0;right:0;top:calc(0px - var(--s-up,0px));bottom:calc(0px - var(--s-down,0px));z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 42% 40% at var(--s-shade,74% 50%),rgba(6,6,7,.6) 50%,rgba(6,6,7,0)),var(--mimg) no-repeat center top/100% auto;
  -webkit-mask-image:var(--s-mask);mask-image:var(--s-mask)}
.studio-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.studio .txt{max-width:500px}
.studio .txt p{text-wrap:pretty}
/* the heading steps down a little on narrow desktops, so About's stays on two lines in the 5fr column (36px at 1024) */
@media (min-width:1024px){.studio h2{font-size:var(--s-h2)}}
/* the photo: 3:2, its top edge on the H2's cap line: the eyebrow (12px + 20px), then the H2's half-leading and cap
   offset, .18em in Cinzel at line-height 1.15 (40px at 44px, 38.5 at 36); out to the viewport edge on its side */
.studio-shot{aspect-ratio:3/2;margin:calc(32px + var(--s-h2) * .18) calc(0px - var(--edge)) 0 0;z-index:1}
/* Home (.flip): the photo left, out to the left edge, the words right (desktop; the stack keeps the words first) */
@media (min-width:1024px){
  .studio.flip .studio-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .studio.flip .studio-shot{order:-1;margin-left:calc(0px - var(--edge));margin-right:0}
}
/* the room as photographed (10-13, Tannis: no darkening; the 85 / 86 / 105 grade is gone) */
.studio .studio-shot img{object-position:var(--s-pos,50% 50%)}

/* ===== Shared: accordions (FAQ) ===== */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{display:grid;grid-template-columns:48px 1fr 30px;align-items:center;gap:16px;width:100%;padding:22px 0;text-align:left}
.acc-btn .num{font:400 26px/1 var(--display);color:var(--purple-light)}
.acc-btn h3{font-size:var(--h3-sm)}
.acc-ico{width:30px;height:30px;border:1px solid var(--line);position:relative;transition:background .2s,border-color .2s}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--text);transform:translate(-50%,-50%)}
.acc-ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.is-open .acc-ico{background:var(--purple);border-color:var(--purple)}
.is-open .acc-ico::after{transform:translate(-50%,-50%) rotate(0)}
.acc-panel{display:none;padding:0 46px 26px 64px}
.acc-panel p{font-size:var(--body-sm);text-wrap:pretty}
.is-open .acc-panel{display:block}

/* ===== Shared: the visit details (Home's Visit, Contact's details) and the map =====
   One block on both pages (Carlos 10-02 late, on Home's: "It's the middle that just feels weird"; then "make this
   section on both here and the contact page"). Home mixed three label styles in eight lines ("Phone:" inline, a violet
   HOURS kicker over a sentence that broke before its last word, an Instagram glyph link) and Contact had its own
   table. Now one order and one grammar on both: who and where (the name in Cinzel, the address as two postal lines),
   then a small table where every label is the same violet caps and every value starts on one left edge (Phone and
   Hours, the copy's own labels; each hours sentence on its own line), the area line, the button. Instagram left the
   block (Carlos: the footer has it; double-check #59). Phones stack each label over its value.
   Elementor: one saved container template on both pages (only the H2 differs): Heading (tag p, Cinzel 18) for the
   name; Text Editor for the address (a line break after "B-11,"); a column container of two row containers, each a
   Heading as the label (tag span, Montserrat 600 11px .22em #A98AD6, width 96px) and a Text Editor as the value,
   Border Top 1px rgba(255,255,255,.08), the last row also Border Bottom, Mobile: direction Column; Text Editor (the
   area line); Button. Native. */
.visit-details{max-width:460px;margin-top:30px}
.nap-lines{font-style:normal;display:flex;flex-direction:column;font-size:16px;line-height:1.5;color:var(--text)}
.nap-lines .name{font-family:var(--display);font-size:18px;letter-spacing:.04em;line-height:1.3;margin-bottom:10px}
.nap-lines .ln,.contact-table .ln{display:block}
.contact-table{width:100%;margin-top:28px;border-collapse:collapse}
.contact-table th,.contact-table td{padding:14px 0;border-top:1px solid var(--line-soft);vertical-align:baseline;text-align:left}
.contact-table tr:last-child>*{border-bottom:1px solid var(--line-soft)}
.contact-table th{width:96px;font:600 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--purple-light)}
.contact-table td{color:var(--text);font-size:16px;line-height:1.5}
.contact-table a{color:var(--text)}.contact-table a:hover{color:var(--purple-light)}
.serving{margin:24px 0 0;font-size:var(--body-sm);color:var(--text-muted);text-wrap:pretty}
.visit-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
/* a quiet text link beside a button (10-19: Book's cost link, Home's "Send us a message"); was Book-only */
.tlink{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}
.tlink:hover{color:var(--purple-light)}
/* contextual links under a story's words (10-19: Artists > About, Book > Aftercare) */
#choose .link-row,#prepare .link-row{margin-top:20px}
/* The map (Home Visit, Contact): Google's regular embed for the studio address, fully interactive (drag, zoom, the
   address card and "View larger map" all Google's own). A light violet wash and a hairline tie it to the dark page;
   no invert (inverted, Google's hover and scroll overlays flashed white). Swap the address embed for the Business
   Profile embed once it exists (references/double-check-later.md).
   Elementor: Google Maps widget (the address, zoom 15) + CSS Filters (saturation 70, brightness 92); the wash and the
   hairline as custom CSS on the widget (::after, pointer-events none). */
.map-frame{position:relative;isolation:isolate;aspect-ratio:4/3;overflow:hidden;background:#101013;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.7) brightness(.92)}
/* ::before washes violet, ::after draws the hairline; both let every click through to the map */
.map-frame::before,.map-frame::after{content:"";position:absolute;inset:0;pointer-events:none}
.map-frame::before{z-index:1;background:#8858B8;mix-blend-mode:color;opacity:.14}
.map-frame::after{z-index:2;border:1px solid rgba(200,200,204,.22)}
.hrs{display:flex;flex-direction:column;gap:4px}
.hrs>span{white-space:nowrap}
.dir{display:inline-flex;align-items:center;gap:10px;color:var(--text);font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.dir:hover{color:var(--purple-pale)}

/* ===== Footer: the marble fades into solid black above it, then one clear chrome hairline =====
   The fade overlaps the end of the last section (negative margin), so it adds no extra gap.
   10-02 late (Carlos: "move the logo to the left"; in Contact the centred text beside left-hand icons was "a weird
   look"): the crescent badge and the socials stand at the left, and the four columns follow on one grid, every heading,
   link and line starting on its own left edge. Contact's icons sit in a 16px column of their own, each on the first
   line of its text, and the address wraps under its first line, not under the pin (two postal lines). The brand column
   takes the spare width; the four columns share the rest evenly but never narrower than their longest line, so Hours
   and Contact never wrap. The rows share one 36px rhythm (24px lines, 12px apart). Replaces the centred five columns
   around the badge (09-29).
   Elementor: footer container background gradient (transparent → #060607 over 120px) + a Divider widget, 1px, silver;
   then a row container: the brand (a column container, align start, gap 24: Image, Social Icons) and four column
   containers (Heading + Icon List for Pages and Artists; Heading + Text Editor for Hours; Heading + Icon List for
   Contact, icons 16px #A98AD6, Icon Vertical Alignment: Start with a 4px offset, text indent 12px). Native. */
.site-footer{position:relative;margin-top:-120px;padding-top:120px;background:linear-gradient(180deg,rgba(6,6,7,0),var(--black) 120px)}
.ft-top{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(max-content,1fr));align-items:start;gap:48px;padding:72px 0 64px}
.ft-top::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(200,200,204,.2),rgba(236,235,240,.7) 50%,rgba(200,200,204,.2))}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
/* the badge alone: the honeycomb halo behind it was removed 09-30 (Carlos: "I'd rather just have the logo") */
.ft-badge{display:block;width:140px;border:0}  /* 128 -> 140 (Carlos 10-06: "a tiny hair bigger") */
.ft-badge img{width:100%;height:auto}
/* Contact: the icon in its own column, on the text's first line (a 24px line, so 4px down) */
.ft-nap{display:flex;flex-direction:column;gap:12px}
.ft-nap li{display:grid;grid-template-columns:16px auto;justify-content:start;align-items:start;column-gap:12px}
.ft-nap svg{width:16px;height:16px;color:var(--purple-light);margin-top:4px}
.ft-nap a{color:var(--text-muted)}.ft-nap a:hover{color:var(--purple-light)}
.ft-nap .ln{display:block}
.ft-top h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--text);margin-bottom:22px}
.ft-top .col{min-width:0;font-size:15px;line-height:1.6}
.ft-top .col ul{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ft-top .col a{color:var(--text-muted)}
.ft-top .col a:hover{color:var(--purple-light)}
.ft-top address{font-style:normal}
.ft-top .hrs{margin:0;gap:12px}
.ft-top .hrs .tok{color:var(--text)}
.socials{display:flex;gap:12px}
.socials a{color:var(--text);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.socials a:hover{border-color:var(--purple);color:var(--purple-light)}
.socials svg{width:15px;height:15px}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding:24px 0 28px;border-top:1px solid rgba(255,255,255,.1);font:500 11px/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.ft-bot .rt{text-align:right}
.ft-bot a{color:var(--text-muted)}.ft-bot a:hover{color:var(--purple-light)}
.ft-bot .legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.ft-bot i{font-style:normal;color:var(--line);margin:0 10px}


/* ===== Responsive ===== */
/* from 1024 to 1279 the header goes without the phone (the number would crowd the links; phones and tablets get the
   call button below) */
@media (max-width:1279px){
  .hdr-call{display:none}
}
@media (max-width:1180px){
  .nav ul{gap:22px}
  .nav a{letter-spacing:.1em}
  .ft-top{column-gap:40px}
  /* the visit details a size down, so each hours sentence keeps one line in Home's narrow column (376px at 1024) */
  .nap-lines,.contact-table td{font-size:15px}
  .contact-table th{width:80px}
}
@media (max-width:1023px){
  .hdr{display:flex;justify-content:space-between}
  .nav,.hdr-cta{display:none}
  .nav-toggle{display:flex}
  /* phones and tablets: a call button beside the menu button, its twin (44px, the same hairline frame), so the number
     is one tap away on the screens most visitors use. Elementor: an Icon widget (phone, View: Framed, Shape: Square,
     44px, border 1px #26242B), link tel:+17206590663, ordered just before the Nav Menu's toggle on Tablet and Mobile. */
  .hdr-actions{gap:10px}
  .hdr-num{display:none}
  .hdr-call{top:0;display:inline-flex;width:44px;height:44px;justify-content:center;padding:0;border:1px solid var(--line);color:var(--text)}
  .hdr-call svg{width:18px;height:18px;color:var(--text)}
  .hdr-call:hover{border-color:var(--purple)}.hdr-call:hover svg{color:var(--purple-light)}
  .site-header.menu-open{background:var(--black);border-bottom-color:var(--line)}
  .menu-open .nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--black);border-bottom:1px solid var(--line);padding:24px var(--gutter) 32px}
  .menu-open .nav ul{flex-direction:column;gap:0}
  .menu-open .nav li{border-bottom:1px solid var(--line)}
  .menu-open .nav li:not(.m-cta) a{display:block;padding:16px 0;font-size:14px}
  .menu-open .nav a::after{display:none}
  /* phones and tablets: Jeremy and Kain listed under Artists, indented */
  .menu-open .nav .has-sub::before{display:none}
  .menu-open .nav .sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:0 0 12px 18px;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
  .menu-open .nav .sub li{border-bottom:0}
  .menu-open .nav .sub li a{padding:10px 0;font-size:13px;color:var(--text-muted)}
  .menu-open .nav .m-cta{display:block;margin-top:24px;border:0}
  .menu-open .nav .m-cta .btn{display:inline-flex;padding:14px 28px}
  .menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .nav-toggle span:nth-child(2){opacity:0}
  .menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* tablets: the badge keeps the left column, beside two rows of two (Pages | Artists, Hours | Contact) */
  .ft-top{grid-template-columns:minmax(0,1fr) repeat(2,minmax(max-content,1.3fr));row-gap:48px}
  .ft-brand{grid-row:span 2}
  .sec-head{flex-direction:column;align-items:flex-start;gap:24px}
  .cards,.sec-head+.cards{gap:40px}
  /* the studio on tablets and phones: stacked, the words then the photo, still bleeding off its side (the right; the
     left on Home), 12% in from the other; the river is full behind the words, fainter down where the photo sits, and
     ends with the section (the pages' rise, tail and shade are desktop knobs) */
  .studio{--s-pb:var(--section-y)}
  .studio::before{background:linear-gradient(180deg,rgba(6,6,7,0) 40%,rgba(6,6,7,.6) 70%),var(--mimg) no-repeat center top/100% auto}
  .studio-grid{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .studio .txt{max-width:600px}
  .studio-shot{margin:0 calc(0px - var(--edge)) 0 12%}
  .studio.flip .studio-shot{margin:0 12% 0 calc(0px - var(--edge))}
}
@media (max-width:767px){
  .wordmark img{height:46px}
  .cards,.sec-head+.cards{grid-template-columns:1fr}
  .acc-panel{padding-left:0;padding-right:0}
  /* the studio on phones: the river at the phone scale (the middle 40% of the cut), the photo 4:3 from the gutter
     out to its edge */
  .studio{--s-pt:72px;--s-in:200px;--s-out:200px;--s-up:0px}
  .studio::before{background-size:auto,var(--msize-m,250% auto)}  /* the phone river scale (180% since 10-02, vanity.css) */
  .studio-grid{row-gap:40px}
  .studio-shot{aspect-ratio:4/3;margin-left:0}
  .studio.flip .studio-shot{margin-right:0}
  .map-frame{aspect-ratio:1/1}
  /* the visit details on phones: each label over its value, so each hours sentence keeps a whole line */
  .contact-table,.contact-table tbody,.contact-table tr,.contact-table th,.contact-table td{display:block}
  .contact-table th{width:auto;padding:16px 0 6px}
  .contact-table td{padding:0 0 16px;border-top:0}
  .contact-table tr:last-child>th{border-bottom:0}
  .nap-lines,.contact-table td{font-size:16px}  /* back to the phone body size: the stack has the room */
  /* phones, a tidy stack on one left edge: the badge and socials, Pages | Artists, then Hours, then Contact; the
     bottom row stacks on the same edge */
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 16px;padding:56px 0 44px}
  .ft-brand,.ft-hours,.ft-contact{grid-column:1/-1}
  .ft-brand{grid-row:auto;gap:20px}
  .ft-badge{width:120px}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:10px}
  .ft-bot .legal{gap:6px 16px}
  .ft-bot i{display:none}
  .ft-bot .rt{text-align:left}
}

/* Studio, option C (Carlos 10-02: "C just felt a lot cleaner, although I will say empty"): no photo until the finished
   studio is photographed; the words sit in a measured column on the river, which becomes the section's picture. Home:
   the column left, the river right; About: the column right, the river left. Next to try (Carlos): the logo in the
   empty side, or later the honeycomb. Elementor: one text container, max 600px, aligned per page, on the marble. */
.studio.opt-c .studio-grid{grid-template-columns:minmax(0,1fr)}
.studio.opt-c .txt{max-width:600px}
.studio.opt-c .txt p{color:#C4C4CB}
@media (min-width:768px){
}
@media (min-width:1024px){
  .studio.opt-c{--s-pt:160px}
  .studio.flip.opt-c .studio-grid{grid-template-columns:minmax(0,1fr)}
  .home-studio.opt-c{--s-pb:40px}
  .about-studio.opt-c{--s-pb:120px}
  .studio.opt-c.c-left .txt,.studio.flip.opt-c.c-left .txt{margin-left:0}
  .home-studio.opt-c.c-left{--s-shade:24% 45%}
  .studio.opt-c.c-right .txt{margin-left:auto;margin-right:0}
  .about-studio.opt-c.c-right{--s-shade:76% 45%}
}

/* Hours as a table (10-07): the footer and Home's visit details. Elementor: a Text Editor table or the Price Table-free
   route, a 2-column inner container per day; plain HTML table is fine in a Text Editor widget. */
.hours{border-collapse:collapse;width:100%}
.hours th,.hours td{padding:3px 0;border:0;text-align:left;vertical-align:baseline;font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.hours th{color:var(--text-muted);padding-right:18px;white-space:nowrap;width:1%}
.hours td{color:var(--text);white-space:nowrap}
.contact-table .hours th,.contact-table .hours td{padding:3px 0;border:0;width:auto;font:400 15px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.contact-table .hours th{color:var(--text-muted);padding-right:22px;width:1%}
.contact-table .hours tr:last-child>*{border:0}
@media (max-width:767px){   /* the phone stack above sets every .contact-table cell to block; the nested hours table keeps its rows */
  .contact-table .hours{display:table;width:100%}
  .contact-table .hours tbody{display:table-row-group}
  .contact-table .hours tr{display:table-row}
  .contact-table .hours th,.contact-table .hours td{display:table-cell;padding:3px 0}
  .contact-table .hours th{padding-right:22px}
}

/* ===== Shared: small carousels and the lightbox (10-13, site.js) ===== */
/* A row of photos that scrolls sideways (scroll-snap; swipe, or drag with a mouse), three across (two on phones), the
   arrows over its far left and right edges (hidden on touch screens, where the row swipes).
   Elementor: Image Carousel (slides 3 / 2, arrows, no dots, Link: Media File for the lightbox). */
.car{position:relative;margin-top:12px}
/* any row being dragged with a mouse (site.js dragScroll): no snap until it settles, a grabbing hand, no text selection */
.dragging{scroll-snap-type:none!important;cursor:grabbing}
.dragging *{user-select:none;cursor:grabbing!important}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 3);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:0;list-style:none}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{scroll-snap-align:start;margin:0}
.car-track .shot{aspect-ratio:4/5}
.car-track,.reel{cursor:grab}
.car-nav{position:absolute;left:0;right:0;top:50%;translate:0 -50%;display:flex;justify-content:space-between;padding:0 10px;pointer-events:none}
.car-nav .car-btn{pointer-events:auto}
@media (hover:none){.car-nav{display:none}}
.car-btn,.lb-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(200,200,204,.55);background:rgba(6,6,7,.62);color:var(--text);cursor:pointer;transition:background .3s var(--ease),border-color .3s,color .3s}
.car-btn:hover,.lb-btn:hover{background:var(--chrome-fill);border-color:#EDECF1;color:#0B0B0D}
.car-btn svg,.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
@media (max-width:767px){.car-track{grid-auto-columns:calc((100% - 8px) / 2);gap:8px}}
/* photos that open the lightbox show it */
[data-lightbox] .shot{cursor:zoom-in}
[data-lightbox] figure.shot:focus-visible{outline:1px solid var(--purple-light);outline-offset:3px}
/* The lightbox: the photo whole (never cropped) on near-black, its alt text under it, the count top left, close top
   right, arrows at the sides (under the photo on phones). Elementor: Site Settings > Lightbox (background #060607 at
   96%, UI colour #E4E4E8, image captions on). */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(6 6 7/.96);color:var(--text);overflow:hidden}
.lightbox::backdrop{background:transparent}
html:has(.lightbox[open]){overflow:hidden}
.lightbox figure{position:absolute;inset:64px 84px 40px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lightbox img{max-width:100%;max-height:calc(100% - 44px);object-fit:contain;display:block}
.lightbox figcaption{max-width:64ch;font:400 13px/1.5 var(--sans);color:var(--text-muted);text-align:center}
.lb-count{position:absolute;left:24px;top:28px;font:500 11px/1 var(--sans);letter-spacing:.22em;color:var(--text-muted)}
.lb-btn{position:absolute}
.lb-close{right:16px;top:14px}
.lb-prev,.lb-next{top:50%;translate:0 -50%}
.lb-prev{left:20px}.lb-next{right:20px}
@media (max-width:767px){
  .lightbox figure{inset:64px 12px 84px}
  .lb-prev,.lb-next{top:auto;bottom:20px;translate:none}
  .lb-prev{left:calc(50% - 52px)}.lb-next{right:calc(50% - 52px)}
}