/* Lone Star Tattoo theme stylesheet.
   Ported as-is from the Astro build's src/styles/global.css (website repo, main).
   WordPress-only additions live at the bottom under "WordPress core blocks". */
:root,body{
  --ink:#0E1519;
  --ink-2:#151F24;
  --ink-3:#1D282E;
  --hair:#2A363C;
  --text:#ECEAE5;
  --muted:#9FAAAE;
  --teal:#2FB8CC;
  --teal-hi:#5ED3E2;
  --teal-deep:#0C5E6B;
  --gold:#E8C33F;
  --star-off:#3C484E;
  --white:#ffffff;
  --body:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:22px;
  --max:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1}
h2{font-size:clamp(29px,3.2vw,42px);font-weight:800}
h3{font-size:22px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--teal-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--white)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:20px;line-height:1.6;max-width:62ch}
.muted{color:var(--muted)}
.btn{display:inline-block;padding:16px 28px;font-weight:800;font-size:17px;line-height:1.1;text-decoration:none;border:2px solid transparent;border-radius:2px}
.btn-teal{background:var(--teal);color:#08292F;border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-hi);border-color:var(--teal-hi);color:#08292F}
.actions{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.more{display:inline-block;font-weight:700}

/* rating */
.stars{position:relative;display:inline-block;white-space:nowrap;line-height:1;font-size:19px}
.stars i{font-style:normal;letter-spacing:2px;color:var(--star-off)}
.stars b{position:absolute;left:0;top:0;overflow:hidden;letter-spacing:2px;color:var(--gold);font-weight:400}
.rating{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rating .score{font-weight:800;font-size:19px}
.rating .count{color:var(--muted);font-size:17px}

/* top bar */
.bar{background:#0B1114;border-bottom:1px solid var(--hair);font-size:16px}
.bar .wrap{display:flex;flex-wrap:wrap;gap:6px 32px;align-items:center;padding-top:11px;padding-bottom:11px}
.bar a{color:var(--text);text-decoration:none}
.bar a:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:4px}
.bar .hours{margin-left:auto;color:var(--muted)}

/* header */
.top{background:var(--ink);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px}
.brand{display:block;flex:0 0 auto}
.brand img{height:88px;width:198px}
.nav{display:flex;gap:28px;margin-left:auto;font-weight:700;font-size:17px}
.nav a{color:var(--text);text-decoration:none}
.nav a:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.has-sub{position:relative}
.has-sub>ul{position:absolute;left:-14px;top:100%;padding:10px 0;margin:0;list-style:none;
  width:max-content;background:var(--ink);border:1px solid var(--hair);border-radius:3px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:9;opacity:0;visibility:hidden}
.has-sub:hover>ul,.has-sub:focus-within>ul{opacity:1;visibility:visible}
.has-sub>ul a{display:block;padding:10px 20px;font-weight:700;text-decoration:none;white-space:nowrap}
.has-sub>ul a:hover,.has-sub>ul a:focus-visible{background:var(--ink-3);color:var(--white)}
.top .btn{padding:13px 22px}
.top .tel{margin-left:4px;font-weight:800;font-size:19px;color:var(--text);text-decoration:none;white-space:nowrap}
.top .tel:hover{color:var(--teal-hi)}
.menu{display:none}

/* hero */
.hero{padding:72px 0 96px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center}
.hero .emblem{width:300px;height:auto;justify-self:end}
.hero h1{font-size:18px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-hi);line-height:1.4}
.say{font-size:clamp(33px,4.6vw,48px);font-weight:600;line-height:1.08;color:var(--text);max-width:30ch;margin:16px 0 26px}
.hero .lede{font-size:22px;margin:0 0 34px}
.hero .actions{gap:16px 28px}
.hero .rating{gap:10px}

/* work band */
.band{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--ink)}
.band a{display:block;aspect-ratio:3/4;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band-more{padding:50px 0 58px;text-align:center}
.band-more .more{font-size:19px}
.arw{vertical-align:-2px;margin-left:6px}

/* reviews */
.reviews{padding:88px 0}
.rev-top{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;margin-bottom:40px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.card-rev{background:var(--ink-2);border:1px solid var(--hair);border-radius:3px;padding:28px}
.who{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.who img{width:52px;height:52px;border-radius:50%;flex:0 0 auto}
.who .nm{font-weight:700;line-height:1.3}
.who .stars{font-size:16px;display:block;margin-top:3px}
.card-rev p{margin:0;color:#DAD8D3}
.reviews .more{margin-top:34px}

/* image + text rows */
.row.alt + .row.alt{padding-top:0}
.row{padding:88px 0}
.row .wrap{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:center}
.row.alt{background:var(--ink-2)}
.row.flip .wrap{grid-template-columns:7fr 5fr}
.row.flip .wrap>figure,.row.flip .wrap>img{order:2}
.row figure{margin:0}
.row figure img,.row>.wrap>img{width:100%;border-radius:2px}
.row figcaption{margin-top:12px;font-size:16px;color:var(--muted)}
.row h2+.lede,.row h2+p{margin-top:20px}
.row .more{margin-top:26px}
.row .role{font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-hi);line-height:1.4;margin:0 0 12px}
.row .links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-weight:700}

/* styles list */
.slist{margin:26px 0 0;border-top:1px solid var(--hair)}
.slist div{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair)}
.slist dt{font-weight:700;color:var(--white);margin:0}
.slist dd{margin:0;color:var(--muted)}

/* video */
.film{padding:88px 0}
.film h2{margin-bottom:8px}
.film .cap{color:var(--muted);margin-bottom:26px;max-width:62ch}
.film.alt{background:var(--ink-2)}
.vid{position:relative;width:100%;background:#000;border-radius:3px;overflow:hidden;border:0;padding:0;cursor:pointer;display:block}
.vid img{width:100%;height:auto;opacity:.92}
.vid:hover img{opacity:1}
.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:88px;height:88px;border-radius:50%;background:rgba(14,21,25,.72);border:2px solid var(--text);display:grid;place-items:center}
.vid .play svg{margin-left:5px}
.vid:hover .play span{background:var(--teal);border-color:var(--teal)}
.vid:hover .play svg path{fill:#08292F}
.filmtitle{margin:16px 0 0;font-weight:700;color:var(--white)}

/* consultation CTA */
.cta{background:#0B1114;padding:80px 0 0}
.cta .wrap{display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:center}
.cta h2{color:var(--white)}
.cta .lede{margin:20px 0 0}
.cta-act{display:grid;justify-items:end;gap:16px}
.cta .or{margin:0;color:var(--muted);text-align:right}
.cta .tel{font-size:19px;font-weight:800;color:var(--text);text-decoration:none;white-space:nowrap}
.cta .tel:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:4px}

/* footer */
.foot{background:#0B1114;padding:72px 0 40px}
.foot a{color:var(--text)}
.foot a:hover{color:var(--teal-hi)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.foot .badge{height:92px;width:auto;margin-bottom:22px}
.foot address{font-style:normal;margin-bottom:16px}
.foot .name{font-weight:800;color:var(--white);margin-bottom:6px}
.foot h3{font-size:17px;color:var(--white);margin-bottom:16px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot .fine{margin-top:60px;padding-top:24px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--muted);font-size:16px}

@media (max-width:1160px){
  .band{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1180px){
  .nav,.top .btn,.top .tel{display:none}
  .menu{display:block;position:relative;margin-left:auto}
  .menu summary{list-style:none;cursor:pointer;font-weight:800;color:var(--text);padding:12px 18px;border:2px solid #4A585F;border-radius:2px}
  .menu summary::-webkit-details-marker{display:none}
  .menu ul{position:absolute;right:0;top:calc(100% + 12px);background:var(--ink);border:1px solid var(--hair);border-radius:3px;min-width:250px;padding:10px 0;margin:0;list-style:none;box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:9}
  .menu li a{display:block;padding:12px 20px;color:var(--text);text-decoration:none;font-weight:700}
  .menu li a:hover{background:var(--ink-3);color:var(--white)}
  .menu li.sub a{padding-left:38px;font-weight:400;color:var(--muted)}
  .menu li.sub a:hover{color:var(--white)}
}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero .emblem{width:200px;justify-self:start}
  .row .wrap,.cta .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .cta-act{justify-items:start}
  .cta .or{text-align:left}
  .row.flip .wrap{grid-template-columns:minmax(0,1fr)}
  .row.flip .wrap>figure,.row.flip .wrap>img{order:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:1fr}
  .row,.reviews{padding:64px 0}
  .film{padding:64px 0}
  .foot .cols{grid-template-columns:1fr 1fr;gap:40px}
  .foot .cols>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  :root,body{--gutter:16px}
  .bar .wrap{gap:4px 20px}
  .bar .hours{margin-left:0}
  .brand img{height:68px;width:153px}
  .top .wrap{gap:14px}
  .hero{padding:52px 0 68px}
  .hero h1{font-size:17px}
  .say{margin:14px 0 22px}
  .hero .lede{font-size:20px;margin:0 0 28px}
  .hero .emblem{display:none}
  .band{grid-template-columns:repeat(2,1fr)}
  .cta{padding:60px 0 0}
  .slist div{grid-template-columns:minmax(0,1fr);gap:5px;padding:16px 0}
  .card-rev{padding:22px 20px}
  .vid .play span{width:68px;height:68px}
  .foot{padding-top:60px}
  .foot .cols{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
@media (prefers-reduced-motion:no-preference){ a,.btn,.vid img,.vid .play span{transition:color .14s,background-color .14s,border-color .14s,opacity .14s} }

/* page head — shared by every interior page (contact, privacy, and the rest) */
.phead{padding:64px 0 10px}
.phead h1{font-size:clamp(34px,4.4vw,48px);font-weight:800;line-height:1.1;color:var(--text)}
.phead .lede{margin-top:20px}
@media (max-width:980px){ .phead{padding-top:48px} }

/* Below-fold sections: free the main thread for the LCP paint.
   `contain-intrinsic-size: auto <fallback>` makes Chrome remember each section's
   real size after its first render, so the fallback only has to be roughly right
   and the scrollbar cannot jump on re-entry. Fallbacks are measured at 1440:
   .row 786-1274, .reviews 827, .film 1008-1080, .cta 224, .foot 556, .band 319. */
.row{content-visibility:auto;contain-intrinsic-size:auto 900px}
.reviews{content-visibility:auto;contain-intrinsic-size:auto 850px}
.film{content-visibility:auto;contain-intrinsic-size:auto 1050px}
.cta{content-visibility:auto;contain-intrinsic-size:auto 240px}
.foot{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* The first two sections are in view on load: rendering them with a placeholder height
   and then snapping to the real one shifted the page (CLS 0.075 on style pages, 2026-10-27). */
main>section:nth-child(-n+2){content-visibility:visible;contain-intrinsic-size:none}
.band{content-visibility:auto;contain-intrinsic-size:auto 330px}
@media (max-width:1160px){ .band{contain-intrinsic-size:auto 840px} }
@media (max-width:760px){ .band{contain-intrinsic-size:auto 760px} }

/* Skip link — first focusable element, hidden until focused. */
.skip-link{position:absolute;top:-100px;left:8px;z-index:100;background:var(--teal);color:#08292F;
  padding:10px 16px;font-weight:800;text-decoration:none;border-radius:2px}
.skip-link:focus{top:8px}

/* gallery */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gal{padding:8px 0 88px}
.gal-filter{border:0;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:10px}
.gal-filter input{position:absolute;opacity:0;width:1px;height:1px}
.gal-filter label{display:inline-block;padding:11px 20px;border:1px solid var(--hair);
  border-radius:2px;font-weight:700;cursor:pointer;color:var(--text);background:var(--ink-2)}
.gal-filter label span{color:var(--muted);font-weight:400;margin-left:7px}
.gal-filter label:hover{border-color:#51626A}
.gal-filter input:checked + label{background:var(--teal);border-color:var(--teal);color:#08292F}
.gal-filter input:checked + label span{color:#08292F;opacity:.75}
.gal-filter input:focus-visible + label{outline:3px solid var(--teal);outline-offset:3px}

.gal-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.gal-grid li{margin:0}
.gal-grid a{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--ink-2)}
.gal-grid img{width:100%;height:100%;object-fit:cover}
.gal-grid a:hover img{opacity:.86}

/* CSS-only filter: the checked radio drives which tiles stay in flow. */
.gal:has(#f-scott-cooksey:checked) .gal-grid li:not([data-artist="scott-cooksey"]),
.gal:has(#f-josefhine-cooksey:checked) .gal-grid li:not([data-artist="josefhine-cooksey"]){display:none}

/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.lb::backdrop{background:rgba(6,10,12,.97)}
.lb img{max-width:min(94vw,1400px);max-height:82vh;width:auto;height:auto;margin:auto;
  border-radius:3px;position:absolute;inset:0}
.lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--muted);
  margin:0;padding:0 70px;font-size:16px}
.lb button{position:absolute;background:rgba(14,21,25,.72);border:2px solid var(--text);
  color:var(--text);border-radius:50%;width:52px;height:52px;font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:var(--teal);border-color:var(--teal);color:#08292F}
.lb-x{top:20px;right:20px}
.lb-p{left:20px;top:50%;transform:translateY(-50%)}
.lb-n{right:20px;top:50%;transform:translateY(-50%)}

@media (max-width:1000px){ .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gal{padding-bottom:64px}
  .lb button{width:44px;height:44px}
  .lb-cap{padding:0 20px;bottom:14px}
}

/* article body — the post template and /walk-ins/ */
.prose{padding:6px 0 78px}
.prose>*{max-width:74ch}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:clamp(25px,2.4vw,31px);font-weight:800;margin:46px 0 0;color:var(--white)}
.prose h3{font-size:21px;margin:32px 0 0;color:var(--white)}
.prose p,.prose ul,.prose ol{margin:16px 0 0}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:7px 0}
.prose figure{margin:36px 0 0}
.prose figure img{width:auto;max-width:100%;max-height:620px;border-radius:2px}
.prose figcaption{margin-top:12px;font-size:16px;color:var(--muted)}
.prose strong{color:var(--white)}

.phead .stamp{margin-top:14px;font-size:16px;color:var(--muted)}
.posthero{margin:26px 0 34px;max-width:74ch}
.posthero img{width:min(100%,calc(620px * var(--ar,1.3333)));height:auto;aspect-ratio:var(--ar,auto);border-radius:2px}
.posthero figcaption{margin-top:12px;font-size:16px;color:var(--muted)}

/* post index + read-next */
.plist{list-style:none;margin:0;padding:8px 0 80px;display:grid;gap:26px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.plist li{margin:0;background:var(--ink-2);border:1px solid var(--hair);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column}
.plist img{width:100%;aspect-ratio:3/2;object-fit:cover}
.plist .pbody{padding:22px 24px 26px}
.plist h2{font-size:21px;line-height:1.28;font-weight:700}
.plist h2 a{color:var(--text);text-decoration:none}
.plist h2 a:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:4px}
.plist time{display:block;font-size:16px;color:var(--muted);margin-bottom:9px}
.plist p{margin:12px 0 0;color:var(--muted);font-size:16px}
.next{border-top:1px solid var(--hair);padding:34px 0 0;margin-bottom:78px}
.next h2{font-size:22px;font-weight:700;color:var(--white)}
.next ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.next .more{margin-top:22px}

/* post: body beside a sticky sidebar. The body keeps its own measure, so the
   column is sized off the prose, not the other way round. */
.postcols{display:grid;grid-template-columns:minmax(0,74ch) minmax(0,1fr);gap:56px;align-items:start}
.postmain{min-width:0}
.aside{position:sticky;top:24px}
.aside-in{display:grid;gap:18px}
.ab{background:var(--ink-2);border:1px solid var(--hair);border-radius:3px;padding:22px}
.ab h2{font-size:18px;font-weight:800;color:var(--white);margin:0 0 10px}
.ab p{font-size:16px;margin:0 0 16px}
.ab .btn{display:block;text-align:center}
.ab .or{margin:12px 0 0;font-size:16px;color:var(--muted);text-align:center}
.ab .hrs{font-weight:700;color:var(--text);margin-bottom:16px}
.ab .tel{font-weight:800;color:var(--text);text-decoration:none;white-space:nowrap}
.ab .tel:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:4px}
.ab-rate{display:grid;gap:12px;justify-items:start}
.ab-rate .rating{gap:8px}
.ab-social ul,.ab-browse ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ab-social a{display:flex;align-items:center;gap:12px;text-decoration:none}
.ab-social img{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
.ab-social span{display:grid;gap:2px;min-width:0}
.ab-social b{font-size:16px;font-weight:800;color:var(--text)}
.ab-social i{font-style:normal;font-size:15px;color:var(--muted)}
.ab-social a:hover b{color:var(--teal-hi);text-decoration:underline;text-underline-offset:3px}
.ab-browse li a{font-weight:700}

/* related posts, nearest in time, each with its own hero */
.next .pcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pcards li{display:grid;gap:8px}
.pcards a{display:grid;gap:10px;text-decoration:none}
.pcards img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block}
.pcards .pc-t{font-size:17px;font-weight:700;color:var(--text);line-height:1.35}
.pcards a:hover .pc-t{color:var(--teal-hi);text-decoration:underline;text-underline-offset:3px}
.pcards time{font-size:15px;color:var(--muted)}

/* These must live AFTER the rules above, not up in the shared media blocks near
   the top of this file: same specificity, so source order decides, and an
   override written earlier silently loses. */
@media (max-width:1100px){
  .postcols{grid-template-columns:minmax(0,1fr);gap:40px}
  .aside{position:static}
  .aside-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .aside-in{grid-template-columns:minmax(0,1fr)}
  .next .pcards{grid-template-columns:minmax(0,1fr);gap:30px}
}

@media (max-width:1000px){ .plist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .plist{grid-template-columns:minmax(0,1fr);padding-bottom:60px}
  .prose{padding-bottom:60px}
}

/* ---------- WordPress core blocks ----------
   Core block CSS is not loaded (functions.php), so these map core block markup onto the
   Astro primitives above. `:root,body` on the tokens keeps them alive in the editor,
   where add_editor_style() rewrites body to .editor-styles-wrapper. */
.wp-block-image{margin:0}
.wp-block-image img{height:auto}
.hero .emblem img{width:100%}
.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center}
.wp-block-button__link{display:inline-block;padding:16px 28px;font-weight:800;font-size:17px;line-height:1.1;
  text-decoration:none;border:2px solid var(--teal);border-radius:2px;background:var(--teal);color:#08292F}
.wp-block-button__link:hover{background:var(--teal-hi);border-color:var(--teal-hi);color:#08292F}
.row .links a{display:inline-block}
.row .links{margin-bottom:0}
/* work band: six linked image blocks */
.band .wp-block-image{margin:0}
.band .wp-block-image a{display:block;aspect-ratio:3/4;overflow:hidden}
.band .wp-block-image img{width:100%;height:100%;object-fit:cover}
/* "more" links written as paragraphs; the arrow is drawn here rather than stored in content */
p.more{margin:0}
p.more a{font-weight:700}
.band-more p.more a::after,.arrow-more a::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7h9.6M8.1 3.3 11.8 7l-3.7 3.7' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7h9.6M8.1 3.3 11.8 7l-3.7 3.7' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.band-more p.more{font-size:19px}
.row p.more{margin-top:26px}
/* styles list: core has no <dl>, so each row is a group of two paragraphs */
.slist>.wp-block-group{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair)}
.slist p{margin:0}
.slist .dt{font-weight:700;color:var(--white)}
.slist .dd{color:var(--muted)}
.row .note{margin:26px 0 14px}
@media (max-width:760px){ .slist>.wp-block-group{grid-template-columns:minmax(0,1fr);gap:5px;padding:16px 0} }
/* CTA band */
.cta p.or{text-align:right}
.cta .wp-block-buttons{justify-content:flex-end}
@media (max-width:980px){ .cta .wp-block-buttons{justify-content:flex-start} .cta p.or{text-align:left} }
.film .vid img{opacity:.92}
/* image-and-text row whose photo fills the full height of the text column (desktop) */
@media (min-width:981px){
  .row.stretch .wrap{align-items:stretch}
  .row.stretch .wrap>figure{height:100%}
  .row.stretch .wrap>figure img{width:100%;height:100%;object-fit:cover}
}

/* header phones: call number, and the text line under it (Scott, 2026-10-07) */
.top .phones{display:flex;flex-direction:column;align-items:center;line-height:1.15;margin-left:4px}
.top .phones .tel{margin-left:0}
.top .phones .txt{font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;margin-top:3px;white-space:nowrap}
.top .phones .txt:hover{color:var(--teal-hi)}
@media (max-width:1180px){ .top .phones{display:none} }

/* aside "Read the reviews" with the drawn arrow */
.ab-rate .more.arrow::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7h9.6M8.1 3.3 11.8 7l-3.7 3.7' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 7h9.6M8.1 3.3 11.8 7l-3.7 3.7' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* post-style pages (walk-ins, posts): hero figure as an image block */
.posthero.wp-block-image{margin:26px 0 34px;max-width:74ch}
.posthero.wp-block-image img{width:auto;max-width:100%;max-height:620px;border-radius:2px}
.posthero figcaption{margin-top:12px;font-size:16px;color:var(--muted)}

/* contact page, ported from contact.astro's page styles */
.reach{padding:44px 0 88px}
.reach>.wrap{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:stretch}
.deets{display:flex;flex-direction:column;gap:26px}
.deets .dl{display:grid;gap:22px}
.deets .dt{font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-hi);margin:0 0 6px}
.deets .dd{margin:0}
.deets .big{font-size:26px;font-weight:800;color:var(--white);text-decoration:none}
.deets .big:hover{color:var(--teal-hi)}
.deets .rooms{color:var(--muted);margin:6px 0 0}
.deets .addr+.rooms+.dd{margin-top:6px}
.notice{border-left:3px solid var(--teal);padding:2px 0 2px 18px;color:var(--muted);margin:0}
.notice strong{color:var(--text)}
.mapwrap{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-height:230px}
.mapwrap iframe{display:block;width:100%;flex:1 1 auto;min-height:200px;border:0;border-radius:3px}
.mapwrap .under{margin:0;color:var(--muted);font-size:16px}
.card{background:var(--ink-2);border:1px solid var(--hair);border-radius:6px;padding:34px}
.card h2{font-size:24px;margin-bottom:8px;font-weight:800;color:var(--white)}
.card>p{color:var(--muted);margin-bottom:26px}
.cform .fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px}
.cform .field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cform .field.full,.cform .actions{grid-column:1/-1}
.cform .wpcf7-form-control-wrap{display:block}
.cform label{font-weight:700;font-size:16px;color:var(--text)}
.cform .req{color:var(--muted);font-weight:400}
.cform input:not([type=submit]),.cform textarea{font:inherit;min-width:0;max-width:100%;width:100%;padding:13px 14px;border:1px solid #3C4A51;border-radius:3px;background:var(--ink);color:var(--text)}
.cform input:hover,.cform textarea:hover{border-color:#51626A}
.cform input:focus,.cform textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(47,184,204,.28)}
.cform textarea{min-height:150px;resize:vertical}
.cform input[type=file]{padding:11px;border-style:dashed;color:var(--muted)}
.cform input[type=file]::file-selector-button{font:inherit;font-weight:700;margin-right:12px;padding:8px 14px;border:1px solid #51626A;border-radius:2px;background:var(--ink-3);color:var(--text);cursor:pointer}
.cform .hint{font-size:16px;color:var(--muted)}
.cform .actions{margin-top:4px}
.cform input[type=submit].btn{font:inherit;font-weight:800;cursor:pointer}
.cform .wpcf7-not-valid-tip{color:#F28B82;font-size:15px;margin-top:6px}
.cform .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border:1px solid var(--hair);border-radius:3px;color:var(--text)}
.cform .wpcf7-spinner{vertical-align:middle}
.reviews .cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){
  .reach>.wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .mapwrap{min-height:320px}
  .reach{padding-bottom:64px}
  .reviews .cards.three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .card{padding:24px 20px}
  .cform .fgrid{grid-template-columns:minmax(0,1fr)}
}
/* phones: the form first, details and map after (Scott: the form is how he wants to be reached) */
@media (max-width:980px){ .reach>.wrap>.card{order:-1} }

/* page head followed straight by a shaded band needs its own bottom space (Artists page) */
.phead:has(+ .alt){padding-bottom:64px}
.phead .wp-block-buttons{margin-top:28px}

/* single-column text band: style pages' "why" and "process" sections */
.textband{padding:88px 0}
.textband.alt{background:var(--ink-2)}
.textband .role,.row .role{font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-hi);line-height:1.4;margin:0 0 12px}
.textband h2+p,.textband h2+ul{margin-top:20px}
.textband ul,.row ul{margin:20px 0 0;padding-left:22px}
.textband li,.row li{margin:10px 0}
.textband li strong,.row li strong{color:var(--white)}
.textband .gal-grid{max-width:none;margin-top:34px}
.row h3{font-size:22px;margin-bottom:14px;color:var(--white)}
@media (max-width:980px){ .textband{padding:64px 0} }

/* services: style cards */
.scards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.scards>.wp-block-group{background:var(--ink-2);border:1px solid var(--hair);border-radius:3px;padding:28px}
.scards h3{font-size:22px;margin-bottom:12px}
.scards h3 a{color:var(--white);text-decoration:none}
.scards h3 a:hover{color:var(--teal-hi);text-decoration:underline;text-underline-offset:4px}
.scards p{color:#DAD8D3;margin:0}
.scards p.more{margin-top:16px}
@media (max-width:1000px){ .scards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .scards{grid-template-columns:minmax(0,1fr)} }

/* style page hero video beside the heading (Japanese) */
.row .wrap>.wp-block-group:has(> .vid){align-self:center}
/* fixes: full-width cards and grids inside text bands; the general list rule must not indent them */
.textband .wrap>.scards,.textband .wrap>.gal-grid{max-width:none}
.textband .scards{margin-top:34px}
.textband ul.gal-grid{padding-left:0;margin:34px 0 0}
.textband .gal-grid li{margin:0}
/* an H1 inside an image-and-text row (Japanese page) */
.row h1{font-size:clamp(32px,3.6vw,44px);font-weight:800;line-height:1.1;margin:0 0 20px;color:var(--text)}
.row .wp-block-buttons{margin-top:26px}

/* services: the live page's style icons above each card title */
.scards .sicon{margin:0 0 16px}
.scards .sicon img{width:64px;height:64px}
/* Japanese hero: video column matches the text column's height on desktop */
@media (min-width:981px){
  .vidrow .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .vidrow .wrap>.wp-block-group:first-child{display:flex;align-self:stretch}
  .vidrow .vid{width:100%}
  .vidrow .vid{height:100%;min-height:300px}
  .vidrow .vid img{height:100%;object-fit:cover}
  .vidrow .vid iframe{height:100%;aspect-ratio:auto}
}

/* reviews page wall (reviews.astro) */
.phead .rating{margin-top:20px}
.revsec{padding-top:38px;padding-bottom:88px}
.revwall{columns:3;column-gap:26px}
.revwall .card-rev{break-inside:avoid;margin:0 0 26px}
@media (max-width:1000px){ .revwall{columns:2} }
@media (max-width:760px){ .revsec{padding-top:30px;padding-bottom:64px} .revwall{columns:1;column-gap:0} .revwall .card-rev{margin-bottom:20px} }
/* gallery page wrapper */
.galsec{padding-top:8px}
/* privacy (privacy-policy.astro) */
.legal{padding:10px 0 88px}
.legal h2{font-size:24px;font-weight:800;margin-top:44px;color:var(--white)}
.legal h2:first-child{margin-top:16px}
.legal p{max-width:74ch;margin-top:16px}
@media (max-width:980px){ .legal{padding-bottom:64px} }
/* post body: block image figures */
.prose .wp-block-image{margin:36px 0 0}
.prose .wp-block-image img{width:auto;max-width:100%;max-height:620px;border-radius:2px}
.prose .wp-block-image figcaption{margin-top:12px;font-size:16px;color:var(--muted)}
.next .more{display:inline-block;margin-top:22px;font-weight:700}

/* review cards: long reviews scroll inside a capped height */
.card-rev p{max-height:15.5em;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#3C4A51 transparent}
.card-rev p::-webkit-scrollbar{width:6px}
.card-rev p::-webkit-scrollbar-thumb{background:#3C4A51;border-radius:3px}
.revmore{text-align:center;margin:10px 0 0}
.revwall>[hidden]{display:none}

/* secondary button ("See Our Reviews") */
.wp-block-button.light .wp-block-button__link{background:transparent;color:var(--text);border-color:#4A585F}
.wp-block-button.light .wp-block-button__link:hover{border-color:var(--teal);color:var(--white);background:transparent}
.wp-block-buttons{gap:14px 18px}
/* two headed sub-sections inside one text column (city pages) */
.row .wrap>.wp-block-group>h2:not(:first-child){margin-top:40px}
.row p.cap{color:var(--muted);font-size:16px;margin:0 0 14px}
.film p.more{margin-top:26px}
.textband p.more{margin-top:30px}

/* aftercare: shop policies list and the two-up topic cards */
.textband ul.policies{list-style:none;padding:0;margin-top:18px;display:grid;gap:12px}
.textband ul.policies li{margin:0;padding:14px 18px 14px 22px;background:var(--ink);border:1px solid var(--hair);border-left:3px solid var(--teal);border-radius:3px}
.textband:not(.alt) ul.policies li{background:var(--ink-2)}
.scards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .scards.two{grid-template-columns:minmax(0,1fr)} }
/* post-style body straight under the page head (walk-ins, no hero image) */
.postsec{padding-top:40px}
@media (max-width:980px){ .postsec{padding-top:28px} }