/*
Theme Name: Mini Ink Onsil
Theme URI: https://haesoltattoo.com/
Description: Mini Ink Seoul — casual tattoos by Onsil Ink. Premium onsil.ink-grade visual layer over the Tattoo Studio parent theme. CSS + hooks only; no template overrides (parent loop/wp_head/wp_footer preserved). Brownfield Phase-2.
Author: Onsil Ink (AEO)
Template: tattoo-studio
Version: 1.0.19
Requires at least: 6.0
Tested up to: 6.9.4
Text Domain: mini-ink-onsil
*/

/* ============================================================
   onsil.ink design tokens (§2.1 — ported verbatim, pure CSS)
   HARD LOCK: 7-color palette + ONE seal accent. #000 / #FFF forbidden.
   Amendment 2026-09-05 (run 138 R5, Tony approval): --accent-vermilion
   #C0392B is allowed for 낙관(seal) marks ONLY — never for text runs,
   CTA fills/borders, dividers or backgrounds. 5.09:1 on --base-primary.
   Amendment 2026-09-05 (run 140, Tony approval): the "no filled buttons"
   rule is amended — ONE filled primary button per screen is allowed
   (--text-primary #2B2724 fill, --base-primary #FAF7F2 label, radius 0,
   hover fill --accent-gold). Applies to `.mio-btn-primary` (home hero +
   after-works band) and the booking form submit only. #000/#FFF stay
   forbidden; every other CTA keeps the outline treatment.
   ============================================================ */
:root {
  --base-primary:#FAF7F2;      /* hanji off-white */
  --base-secondary:#F0EBE3;    /* beige */
  --text-primary:#2B2724;      /* sumi ink */
  --text-secondary:#6B6560;    /* warm grey */
  --accent-gold:#B5985A;       /* CTA / link-hover ONLY */
  --accent-vermilion:#C0392B;  /* seal (낙관) marks ONLY — run 138 R5 */
  --line-subtle:#DDD5C9;       /* dividers */
  --overlay-shadow:rgba(43,39,36,.06);

  --font-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-display-kr:"Noto Serif KR","본명조",serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-body-kr:"Pretendard","Apple SD Gothic Neo",sans-serif;

  --fs-hero:clamp(2.5rem,5vw + 1rem,5rem);
  --fs-h1:clamp(2.25rem,4vw + .5rem,4rem);
  --fs-h2:clamp(1.5rem,2.5vw + .25rem,2.75rem);
  --fs-body:1rem;
  --fs-micro:.75rem;

  --lh-display:1.15;
  --lh-body:1.7;
  --lh-prose:1.85;

  --ls-display:-0.02em;
  --ls-upper:.08em;
  --ls-button:.1em;

  --space-section:100px;
  --space-block:64px;
  --prose-max:70ch;
  --container:1280px;

  --radius:0;
  --motion-fade:600ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Bunny Fonts (FOIT-safe, font-display:swap via &display=swap)
   Loaded here as @import so it ships with the child stylesheet.
   ============================================================ */
@import url('https://fonts.bunny.net/css?family=cormorant-garamond:400,500,600|eb-garamond:400,500|inter:400,500,600&display=swap');

/* ============================================================
   Base / reset of Tattoo Studio dark chrome → hanji light
   Scope to the parent body class so we only touch this theme.
   ============================================================ */
body.wp-theme-tattoo-studio,
body.wp-theme-mini-ink-onsil {
  background:var(--base-primary) !important;
  color:var(--text-primary) !important;
  font-family:var(--font-body),var(--font-body-kr) !important;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* hanji paper grain — subtle, multiply, non-interactive */
body.wp-theme-tattoo-studio::before,
body.wp-theme-mini-ink-onsil::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('assets/hanji-grain.svg');
  background-size:280px 280px;
  opacity:.035;
  mix-blend-mode:multiply;
}
body.wp-theme-tattoo-studio > * { position:relative; z-index:1; }

/* neutralise dark backgrounds the parent paints on common shells */
.wp-theme-tattoo-studio .main-content,
.wp-theme-tattoo-studio #content,
.wp-theme-tattoo-studio .site-content,
.wp-theme-tattoo-studio .page-content,
.wp-theme-tattoo-studio section,
.wp-theme-tattoo-studio .container,
.wp-theme-tattoo-studio .row {
  background-color:transparent !important;
  color:var(--text-primary);
}

/* ============================================================
   Typography
   ============================================================ */
.wp-theme-tattoo-studio h1,
.wp-theme-tattoo-studio h2,
.wp-theme-tattoo-studio h3,
.wp-theme-tattoo-studio h4,
.wp-theme-tattoo-studio .wp-block-heading {
  font-family:var(--font-display),var(--font-display-kr) !important;
  color:var(--text-primary) !important;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
  font-weight:500;
}
.wp-theme-tattoo-studio h1,
.wp-theme-tattoo-studio h1.wp-block-heading { font-size:var(--fs-h1); }
.wp-theme-tattoo-studio h2 { font-size:var(--fs-h2); }
.wp-theme-tattoo-studio p,
.wp-theme-tattoo-studio li {
  font-family:var(--font-body),var(--font-body-kr);
  color:var(--text-secondary);
  line-height:var(--lh-prose);
}
.wp-theme-tattoo-studio a { color:var(--text-primary); text-decoration:none; transition:color var(--motion-fade); }
.wp-theme-tattoo-studio a:hover,
.wp-theme-tattoo-studio a:focus-visible { color:var(--accent-gold); }

/* uppercase micro labels */
.wp-theme-tattoo-studio .eyebrow,
.wp-theme-tattoo-studio .label,
.wp-theme-tattoo-studio .wp-block-heading.is-style-eyebrow {
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:var(--ls-upper);
  color:var(--text-secondary);
}

/* ============================================================
   §2.2 — Generic page-title banner removal
   Live structure: </header><div class="header-image-box ...">
   <h1>Home</h1></div>  — kill ONLY this banner.
   The content identity H1 (.wp-block-heading) is NEVER matched.
   ============================================================ */
.wp-theme-tattoo-studio:not(.single) .header-image-box {
  display:none !important;
}

/* ============================================================
   Header / nav  (#site-navigation .header, #main-menu)
   Restyle only — markup/JS untouched (parent toggle preserved).
   ============================================================ */
.wp-theme-tattoo-studio #site-navigation.header,
.wp-theme-tattoo-studio header.header {
  background:var(--base-primary) !important;
  border-bottom:1px solid var(--line-subtle);
  box-shadow:0 1px 0 var(--overlay-shadow);
}
.wp-theme-tattoo-studio #main-menu a,
.wp-theme-tattoo-studio .header a {
  color:var(--text-primary) !important;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:var(--ls-upper);
}
.wp-theme-tattoo-studio #main-menu a:hover { color:var(--accent-gold) !important; }
.wp-theme-tattoo-studio .header .logo,
.wp-theme-tattoo-studio .site-title,
.wp-theme-tattoo-studio .site-title a {
  font-family:var(--font-display) !important;
  letter-spacing:var(--ls-display);
  color:var(--text-primary) !important;
}

/* ============================================================
   Sections — onsil alternating background + breathing room
   ============================================================ */
.wp-theme-tattoo-studio main section,
.wp-theme-tattoo-studio .entry-content > .wp-block-group {
  padding-block:var(--space-section);
}
.wp-theme-tattoo-studio main section:nth-of-type(even),
.wp-theme-tattoo-studio .entry-content > .wp-block-group:nth-of-type(even) {
  background:var(--base-secondary) !important;
}
.wp-theme-tattoo-studio .container { max-width:var(--container); }

/* prose + AEO answer-capsule (onsil pattern) */
.wp-theme-tattoo-studio .entry-content p,
.wp-theme-tattoo-studio .prose p {
  max-width:var(--prose-max);
  line-height:var(--lh-prose);
}
.wp-theme-tattoo-studio .answer-capsule,
.wp-theme-tattoo-studio .is-style-answer-capsule {
  background:var(--base-secondary);
  border-left:2px solid var(--accent-gold);
  padding:1.5rem 1.75rem;
  margin-block:var(--space-block);
  max-width:var(--prose-max);
}

/* ============================================================
   Buttons — outline gold, zero radius, no fill pills
   ============================================================ */
.wp-theme-tattoo-studio .wp-block-button__link,
.wp-theme-tattoo-studio .btn,
.wp-theme-tattoo-studio button.book-now,
.wp-theme-tattoo-studio a.button {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--accent-gold) !important;
  border-radius:var(--radius) !important;
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  font-family:var(--font-body);
  padding:.85rem 2rem;
  transition:background var(--motion-fade),color var(--motion-fade);
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .wp-block-button__link:hover,
.wp-theme-tattoo-studio .btn:hover,
.wp-theme-tattoo-studio a.button:hover {
  background:var(--accent-gold) !important;
  color:var(--base-primary) !important;
}

/* ============================================================
   §2.2 — Modula gallery (id569) onsil "recent-works" restyle
   shortcode/items NEVER removed; container restyle only.
   ============================================================ */
.wp-theme-tattoo-studio .modula.modula-gallery {
  background:transparent !important;
  gap:2px;
}
.wp-theme-tattoo-studio .modula-items.grid-gallery { gap:2px !important; }
.wp-theme-tattoo-studio .modula-item {
  border-radius:var(--radius) !important;
  overflow:hidden;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .modula-item img {
  border-radius:var(--radius) !important;
  filter:saturate(.92);
  transition:transform var(--motion-fade),filter var(--motion-fade);
}
.wp-theme-tattoo-studio .modula-item:hover img {
  transform:scale(1.03);
  filter:saturate(1);
}
.wp-theme-tattoo-studio .modula-item-content .figc-title,
.wp-theme-tattoo-studio .modula-items .modula-item-title {
  font-family:var(--font-display) !important;
  color:var(--base-primary) !important;
  letter-spacing:var(--ls-display);
}
.wp-theme-tattoo-studio .modula-item:hover .modula-item-overlay {
  background:linear-gradient(to top,rgba(43,39,36,.55),transparent) !important;
}

/* ============================================================
   §2.2 — Footer minimal (onsil) + "Part of Onsil Ink" bridge
   Cruft widgets unregistered in functions.php; this restyles
   whatever remains + the injected bridge band.
   ============================================================ */
.wp-theme-tattoo-studio footer.footer-side,
.wp-theme-tattoo-studio .footer-side {
  background:var(--text-primary) !important;
  color:var(--base-primary) !important;
  padding-block:var(--space-block);
  border:0;
}
.wp-theme-tattoo-studio .footer-side a,
.wp-theme-tattoo-studio .footer-widget a { color:var(--base-secondary) !important; }
.wp-theme-tattoo-studio .footer-side a:hover { color:var(--accent-gold) !important; }
.wp-theme-tattoo-studio .footer-widget {
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  color:var(--base-secondary);
}
/* injected bridge band (functions.php wp_footer) */
.mio-bridge {
  background:var(--base-secondary);
  color:var(--text-secondary);
  text-align:center;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:var(--ls-display);
  padding:2.25rem 1rem;
  border-top:1px solid var(--line-subtle);
}
.mio-bridge a {
  color:var(--accent-gold);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}

/* ============================================================
   Motion — onsil restrained reveal; honour reduced-motion
   ============================================================ */
.mio-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
.mio-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .wp-theme-tattoo-studio *,
  .mio-reveal{transition:none !important;animation:none !important;transform:none !important;opacity:1 !important;}
}

/* ============================================================
   Responsive — onsil clamp scale is intrinsic; only spacing
   ============================================================ */
@media (max-width:768px){
  :root{ --space-section:60px; }
  .wp-theme-tattoo-studio .modula-items.grid-gallery{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
  .wp-theme-tattoo-studio .modula-items.grid-gallery{ grid-template-columns:1fr !important; }
}


/* STEP 6.3 — kill footer widget cruft (Search/Meta/RSS tattoo-studio fallback). .mio-bridge (wp_footer, outside footer.footer-side) = onsil minimal footer. */
.wp-theme-tattoo-studio footer.footer-side{display:none !important;}


/* ============================================================
   STEP 6.5 header polish — neutralise off-palette parent chrome
   (red fa icon, white nav, raw header search) → onsil-grade.
   ============================================================ */
.wp-theme-tattoo-studio .menu-toggle,
.wp-theme-tattoo-studio .menu-toggle i,
.wp-theme-tattoo-studio .menu-toggle .fa-solid,
.wp-theme-tattoo-studio #site-navigation .fa-solid,
.wp-theme-tattoo-studio #site-navigation .fa-bars,
.wp-theme-tattoo-studio header [class*="fa-"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .menu-toggle {
  border:1px solid var(--line-subtle) !important;
  border-radius:0 !important;
  padding:.5rem .7rem;
}
.wp-theme-tattoo-studio #main-menu,
.wp-theme-tattoo-studio #main-menu.close-panal,
.wp-theme-tattoo-studio .close-panal,
.wp-theme-tattoo-studio #main-menu .page_item,
.wp-theme-tattoo-studio #main-menu li {
  background:var(--base-primary) !important;
}
.wp-theme-tattoo-studio #main-menu a { color:var(--text-primary) !important; }
.wp-theme-tattoo-studio #main-menu a:hover { color:var(--accent-gold) !important; }

/* header search → minimal onsil (kept functional, de-emphasised) */
.wp-theme-tattoo-studio #searchform input[type="search"],
.wp-theme-tattoo-studio .searchform input[type="search"],
.wp-theme-tattoo-studio #search {
  background:var(--base-primary) !important;
  border:1px solid var(--line-subtle) !important;
  border-radius:0 !important;
  color:var(--text-primary) !important;
  font-family:var(--font-body);
}
.wp-theme-tattoo-studio .search-submit,
.wp-theme-tattoo-studio #searchform input[type="submit"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--accent-gold) !important;
  border-radius:0 !important;
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
}
/* any inline pure-red the parent injects */
.wp-theme-tattoo-studio [style*="rgb(255, 0, 0)"],
.wp-theme-tattoo-studio [style*="#f00"],
.wp-theme-tattoo-studio [style*="#ff0000"] {
  background-color:transparent !important;
  color:var(--text-primary) !important;
}


/* STEP 6.5 final — slide-out panel close button + any residual red */
.wp-theme-tattoo-studio .close-menu,
.wp-theme-tattoo-studio .closepop,
.wp-theme-tattoo-studio .close-panal .close-menu,
.wp-theme-tattoo-studio button[class*="close"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--line-subtle) !important;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio [style*="background:#ff0000"],
.wp-theme-tattoo-studio [style*="background-color:#ff0000"],
.wp-theme-tattoo-studio [style*="rgb(255,0,0)"] {
  background:transparent !important;
}


/* ============================================================
   STEP 6.3/6.5 ext — blog layout fix + sidebar de-cruft + prose
   Blog had col-lg-6 posts + col-lg-4 cruft sidebar (Search/
   Archives/Meta=admin·logout/TagCloud). Kill sidebar (Meta leak
   = §2.2 top priority), post column → full width onsil cards.
   ============================================================ */
.wp-theme-tattoo-studio.blog .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.archive .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.single .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.blog aside.sidebar-widget,
.wp-theme-tattoo-studio.single aside.sidebar-widget,
.wp-theme-tattoo-studio.archive aside.sidebar-widget {
  display:none !important;
}
.wp-theme-tattoo-studio.blog [class*="col-lg-8"],
.wp-theme-tattoo-studio.blog [class*="col-lg-6"],
.wp-theme-tattoo-studio.archive [class*="col-lg-8"],
.wp-theme-tattoo-studio.single [class*="col-lg-8"] {
  flex:0 0 100% !important;
  max-width:100% !important;
}
.wp-theme-tattoo-studio .post-box {
  background:var(--base-primary);
  border:1px solid var(--line-subtle);
  border-radius:0;
  padding:2.5rem;
  margin-bottom:var(--space-block);
  max-width:var(--prose-max);
  margin-inline:auto;
}
.wp-theme-tattoo-studio .post-box h2,
.wp-theme-tattoo-studio .post-box .entry-title,
.wp-theme-tattoo-studio .post-box .post-title {
  font-family:var(--font-display) !important;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
}
.wp-theme-tattoo-studio .post-box img { border-radius:0 !important; }

/* prose strengthen — home entity sections + single post body */
.wp-theme-tattoo-studio .entry-content,
.wp-theme-tattoo-studio .post-content,
.wp-theme-tattoo-studio .single-content {
  max-width:var(--prose-max);
  margin-inline:auto;
  line-height:var(--lh-prose);
  font-size:1.05rem;
}
.wp-theme-tattoo-studio .entry-content > h2,
.wp-theme-tattoo-studio .entry-content > h3,
.wp-theme-tattoo-studio .post-content h2,
.wp-theme-tattoo-studio .post-content h3 {
  margin-top:3rem;
  margin-bottom:1rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--line-subtle);
}
.wp-theme-tattoo-studio .entry-content > p,
.wp-theme-tattoo-studio .post-content p { margin-bottom:1.4rem; }
.wp-theme-tattoo-studio .entry-content a,
.wp-theme-tattoo-studio .post-content a {
  color:var(--accent-gold);
  border-bottom:1px solid currentColor;
}

/* ============================================================
   v1.0.6 (2026-05-19) — responsive media + mobile overflow kill
   Root cause: blog/post/gallery thumbnails (.attachment-post-
   thumbnail in .post-thumbnail>.box) had computed max-width:none
   → rendered at intrinsic 2560px → 2613px page → mobile broke +
   images appeared "inactive" (off-canvas). Append-only, scoped
   to .wp-theme-tattoo-studio. No parent template touched.
   ============================================================ */
.wp-theme-tattoo-studio img,
.wp-theme-tattoo-studio .post-thumbnail img,
.wp-theme-tattoo-studio .attachment-post-thumbnail,
.wp-theme-tattoo-studio .wp-post-image,
.wp-theme-tattoo-studio .entry-content img,
.wp-theme-tattoo-studio .post-content img,
.wp-theme-tattoo-studio .post-box img,
.wp-theme-tattoo-studio figure img,
.wp-theme-tattoo-studio .gallery img,
.wp-theme-tattoo-studio .gallery-item img,
.wp-theme-tattoo-studio .blocks-gallery-item img,
.wp-theme-tattoo-studio .wp-block-image img {
  max-width:100% !important;
  height:auto !important;
}
.wp-theme-tattoo-studio .post-thumbnail,
.wp-theme-tattoo-studio .post-thumbnail .box,
.wp-theme-tattoo-studio .box,
.wp-theme-tattoo-studio .post-box,
.wp-theme-tattoo-studio article,
.wp-theme-tattoo-studio .entry-content { max-width:100%; }
.wp-theme-tattoo-studio .entry-content,
.wp-theme-tattoo-studio .post-content {
  overflow-wrap:break-word; word-break:break-word;
}
html, body { overflow-x:hidden; }
/* hide empty/broken AI-placeholder gallery images (src="" / no src) */
.wp-theme-tattoo-studio img[src=""],
.wp-theme-tattoo-studio img:not([src]) { display:none !important; }
@media (max-width:640px){
  .wp-theme-tattoo-studio .post-box { padding:1.25rem; }
  .wp-theme-tattoo-studio .entry-content,
  .wp-theme-tattoo-studio .post-content { font-size:1rem; line-height:1.75; }
  .wp-theme-tattoo-studio .post-thumbnail img,
  .wp-theme-tattoo-studio .attachment-post-thumbnail {
    width:100%; object-fit:cover;
  }
}

/* ============================================================
   §C3 — Topic-post title band (2026-06-08, Tony-approved)
   §2.2 hides .header-image-box globally (kills generic page
   "Home"/"About" banners). On POSTS that banner carries the
   ONLY article H1 — hiding it left the AI-citation landing
   (/seoul-tattoo-for-tourists/) opening with no title/hero, on
   a raw thumbnail + Korean blog meta. Re-show + restyle the
   banner for single POSTS only as a clean onsil title band.
   Pages keep §2.2 display:none. CSS-only, reversible.
   ============================================================ */
.wp-theme-tattoo-studio.single .header-image-box {
  display:block !important;
  position:relative;
  height:auto !important;
  min-height:0 !important;
  background:#F0EBE3 !important;            /* onsil beige */
  border-bottom:1px solid #DDD5C9;
  padding:var(--space-block) 0 calc(var(--space-block) - 16px);
  text-align:center;
}
.wp-theme-tattoo-studio.single .header-image-box:before { display:none !important; } /* kill parent dark overlay */
.wp-theme-tattoo-studio.single .header-image-box .container { max-width:var(--container); }
.wp-theme-tattoo-studio.single .header-image-box h1 {
  position:relative; z-index:1;
  color:#2B2724 !important;                 /* charcoal — parent set #fff (invisible on beige) */
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-h1) !important;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 auto;
  max-width:26ch;
}
/* drop blog artifacts inside the band: Korean date, "tony-aeo" byline, "0 comments", breadcrumb */
.wp-theme-tattoo-studio.single .header-image-box .headerimgbox-meta,
.wp-theme-tattoo-studio.single .header-image-box .crumb-box { display:none !important; }
/* drop the duplicate in-content post meta (date/author/comments) on the main article only */
.wp-theme-tattoo-studio.single .post-single > .post-info { display:none !important; }


/* ============================================================
   §P2 — Inner-page restructure (2026-06-08, Tony "phase2 전부")
   Parent tattoo-studio ships a MOBILE-ONLY header at every width
   (.header position:absolute h554, hamburger always shown,
   vertical <ul>, open search) -> broke every inner page's
   above-the-fold on desktop (overlay covering the §C3 band).
   Restyle to a clean horizontal onsil nav >=861px; mobile keeps
   the hamburger. + nav priority (C4) + prose hierarchy (C5/C6).
   CSS-only, reversible. Home unaffected (own front-page.php).
   ============================================================ */
@media (min-width:861px){
  .wp-theme-tattoo-studio #site-navigation.header,
  .wp-theme-tattoo-studio header.header{
    position:static !important; height:auto !important; min-height:0 !important;
  }
  .wp-theme-tattoo-studio #bootom-header{ height:auto !important; min-height:0 !important; }
  .wp-theme-tattoo-studio .menu-toggle,
  .wp-theme-tattoo-studio .close-menu,
  .wp-theme-tattoo-studio .search-icon,
  .wp-theme-tattoo-studio .search-cont{ display:none !important; }
  .wp-theme-tattoo-studio #main-menu{
    display:block !important; position:static !important;
    height:auto !important; width:auto !important; opacity:1 !important; visibility:visible !important;
  }
  .wp-theme-tattoo-studio #main-menu .menu{ display:block !important; }
  .wp-theme-tattoo-studio #main-menu ul{
    display:flex !important; flex-flow:row wrap; justify-content:flex-end; align-items:center;
    gap:30px; margin:0 !important; padding:0 !important; list-style:none !important;
  }
  .wp-theme-tattoo-studio #main-menu li{
    display:inline-block !important; float:none !important; list-style:none !important;
    margin:0 !important; padding:0 !important; border:0 !important; width:auto !important;
  }
  .wp-theme-tattoo-studio #main-menu a{
    font-family:var(--font-display) !important; font-size:15px !important;
    text-transform:uppercase; letter-spacing:.08em; padding:6px 0 !important;
  }
  /* C4 — nav priority: Home, Gallery, About, Services, Booking, Contact, Blog */
  .wp-theme-tattoo-studio #main-menu li.page-item-639{ order:1; }
  .wp-theme-tattoo-studio #main-menu li.page-item-48 { order:2; }
  .wp-theme-tattoo-studio #main-menu li.page-item-45 { order:3; }
  .wp-theme-tattoo-studio #main-menu li.page-item-46 { order:4; }
  .wp-theme-tattoo-studio #main-menu li.page-item-49 { order:5; }
  .wp-theme-tattoo-studio #main-menu li.page-item-47 { order:6; }
  .wp-theme-tattoo-studio #main-menu li.page-item-640{ order:7; }
  .wp-theme-tattoo-studio #main-menu li.page-item-3  { display:none !important; } /* Privacy -> footer only */
}
/* C5/C6 — inner-page prose hierarchy + readable measure (all single posts) */
.wp-theme-tattoo-studio.single .post-content,
.wp-theme-tattoo-studio.single .entry-content{
  font-size:1.05rem; line-height:var(--lh-prose,1.85);
}
.wp-theme-tattoo-studio.single .post-content > p,
.wp-theme-tattoo-studio.single .post-content > ul,
.wp-theme-tattoo-studio.single .post-content > ol,
.wp-theme-tattoo-studio.single .post-content > h2,
.wp-theme-tattoo-studio.single .post-content > h3,
.wp-theme-tattoo-studio.single .entry-content > p{
  max-width:var(--prose-max,70ch);
}
.wp-theme-tattoo-studio.single .post-content > p:first-of-type{
  font-size:1.18rem; color:var(--text-primary);
}

/* search ships open-by-default in parent header — hide at ALL widths
   (non-essential on an 8-page site; removes mobile + desktop clutter) */
.wp-theme-tattoo-studio .search-icon,
.wp-theme-tattoo-studio .search-cont{ display:none !important; }

/* ============================================================
   §P2-CTA — booking CTA band appended to single posts (the_content
   hook in functions.php). onsil tokens, outline->gold-fill button
   matching front-page.php .mio-btn. Language-aware copy server-side.
   ============================================================ */
.wp-theme-tattoo-studio .mio-post-cta{
  margin:56px 0 8px; padding:48px 32px; text-align:center;
  background:#F0EBE3; border:1px solid #DDD5C9;
}
.wp-theme-tattoo-studio .mio-cta-ey{
  font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#6B6560; margin:0 0 10px;
}
.wp-theme-tattoo-studio .mio-cta-h{
  font-family:var(--font-display); font-size:1.7rem; color:#2B2724; margin:0 0 8px; letter-spacing:-.01em; line-height:1.2;
}
.wp-theme-tattoo-studio .mio-cta-sub{
  color:#6B6560; max-width:46ch; margin:0 auto 24px;
}
.wp-theme-tattoo-studio .mio-cta-btn{
  display:inline-block; border:1px solid #B5985A; background:transparent; color:#2B2724 !important;
  padding:14px 32px; font-family:var(--font-display); font-size:14px; text-transform:uppercase;
  letter-spacing:.1em; text-decoration:none; transition:background .2s,color .2s;
}
.wp-theme-tattoo-studio .mio-cta-btn:hover{ background:#B5985A; color:#FAF7F2 !important; }
/* §B021 (2026-06-12) — cross-link line inside the CTA band */
.wp-theme-tattoo-studio .mio-cta-onsil{
  margin:20px 0 0; font-size:13.5px; color:#6B6560;
}
.wp-theme-tattoo-studio .mio-cta-onsil a{
  color:#8A6D3B; text-decoration:underline; text-underline-offset:3px;
}
.wp-theme-tattoo-studio .mio-cta-onsil a:hover{ color:#B5985A; }


/* ============================================================
   §T2 (2026-06-08) — PAGE-type conversion-endpoint parity
   /booking/ (id49) + /gallery/ (id48) are PAGES, not posts, so
   the §6.3 sidebar de-cruft (scoped to .blog/.single/.archive)
   left their col-lg-4 "Archives / Meta / Categories" sidebar +
   narrow column intact -> visual whiplash from the new home.
   Extend de-cruft + full-width + onsil spacing to .page.
   CSS-only, reversible. Home unaffected (own front-page.php).
   ============================================================ */
.wp-theme-tattoo-studio.page .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.page aside.sidebar-widget,
.wp-theme-tattoo-studio.page .sidebar-widget {
  display:none !important;
}
.wp-theme-tattoo-studio.page [class*="col-lg-8"],
.wp-theme-tattoo-studio.page [class*="col-lg-6"] {
  flex:0 0 100% !important;
  max-width:100% !important;
}
.wp-theme-tattoo-studio.page .entry-content,
.wp-theme-tattoo-studio.page .page-content,
.wp-theme-tattoo-studio.page .post-content {
  max-width:var(--prose-max);
  margin-inline:auto;
}
/* gallery wants room to breathe (wider than prose); let the modula
   grid use the full container while keeping the intro/CTA centered. */
.wp-theme-tattoo-studio.page-id-48 .entry-content { max-width:var(--container); }
.wp-theme-tattoo-studio.page-id-48 .entry-content > h2,
.wp-theme-tattoo-studio.page-id-48 .entry-content > p,
.wp-theme-tattoo-studio.page-id-48 .contact-box { max-width:62ch; margin-inline:auto; }
/* leftover empty AI-placeholder gallery div */
.wp-theme-tattoo-studio .tattoo-gallery:empty { display:none !important; }

/* ------------------------------------------------------------
   §T2 — .cta-button (booking + gallery) was never in the button
   selector group -> rendered as a raw parent/blue link. Bring it
   to the onsil outline->gold-fill standard.
   ------------------------------------------------------------ */
.wp-theme-tattoo-studio .cta-button {
  display:inline-block;
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--accent-gold) !important;
  border-radius:var(--radius) !important;
  padding:.85rem 1.8rem;
  font-family:var(--font-display);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  text-decoration:none !important;
  transition:background var(--motion-fade),color var(--motion-fade);
}
.wp-theme-tattoo-studio .cta-button:hover {
  /* C140-1 (run 141): #B5985A under #FAF7F2 label = 2.58:1 on /gallery/ —
     unified to the primary-CTA hover #7A5F2B (5.62:1). */
  background:#7A5F2B !important;
  color:#FAF7F2 !important;
  border-color:#7A5F2B !important;
}
/* booking channel stack — vertical, even rhythm */
.wp-theme-tattoo-studio .booking-options {
  display:flex; flex-direction:column; gap:14px;
  max-width:var(--prose-max); margin:1.5rem auto 0; align-items:flex-start;
}
.wp-theme-tattoo-studio .booking-options .cta-button { width:auto; }
/* gallery "See Something You Like?" box -> onsil band */
.wp-theme-tattoo-studio .contact-box {
  text-align:center;
  background:var(--base-secondary);
  border:1px solid var(--line-subtle);
  padding:var(--space-block, 48px) 32px;
  margin-top:var(--space-block, 48px);
}
.wp-theme-tattoo-studio .contact-box h3 { margin-top:0; }

/* ------------------------------------------------------------
   §T1 — FormSubmit booking form on /booking/ (onsil parity).
   Primary intake; channel buttons remain as the alt path.
   ------------------------------------------------------------ */
.wp-theme-tattoo-studio .mio-book-form {
  max-width:var(--prose-max); margin:1rem auto 0;
  display:grid; gap:18px;
}
.wp-theme-tattoo-studio .mio-book-form label {
  display:block; font-family:var(--font-body);
  font-size:.85rem; letter-spacing:.04em; color:var(--text-secondary);
  text-transform:uppercase;
}
.wp-theme-tattoo-studio .mio-book-form input,
.wp-theme-tattoo-studio .mio-book-form select,
.wp-theme-tattoo-studio .mio-book-form textarea {
  width:100%; margin-top:8px;
  background:var(--base-primary);
  border:1px solid var(--line-subtle); border-radius:0;
  padding:13px 14px;
  font-family:var(--font-body); font-size:1rem; color:var(--text-primary);
  transition:border-color var(--motion-fade);
}
.wp-theme-tattoo-studio .mio-book-form input:focus,
.wp-theme-tattoo-studio .mio-book-form select:focus,
.wp-theme-tattoo-studio .mio-book-form textarea:focus {
  outline:none; border-color:var(--accent-gold);
}
.wp-theme-tattoo-studio .mio-book-form textarea { min-height:128px; resize:vertical; }
.wp-theme-tattoo-studio .mio-book-form .mio-honey { position:absolute; left:-9999px; }
.wp-theme-tattoo-studio .mio-book-form button[type="submit"] {
  justify-self:start;
  background:transparent; color:var(--text-primary);
  border:1px solid var(--accent-gold); border-radius:0;
  padding:14px 34px;
  font-family:var(--font-display); font-size:.95rem;
  text-transform:uppercase; letter-spacing:var(--ls-button);
  cursor:pointer; transition:background var(--motion-fade),color var(--motion-fade);
}
.wp-theme-tattoo-studio .mio-form-sent {
  background:var(--base-secondary); border:1px solid var(--accent-gold);
  padding:18px 22px; margin:0 auto 1.5rem; max-width:var(--prose-max);
  font-family:var(--font-display); color:var(--text-primary);
}
.wp-theme-tattoo-studio .mio-alt-head {
  margin-top:3rem; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-secondary); text-align:left;
  max-width:var(--prose-max); margin-inline:auto;
}


/* ============================================================
   §P3 (2026-06-08) — INNER-PAGE mobile nav fix (<861px)
   The parent tattoo-studio slide-out (#main-menu.close-panal) is
   position:fixed left:90px width:300px with NO backdrop -> on a
   390px phone it covers only the right 300px, leaving a 90px strip
   of page content showing beside it (reads as "broken/overlapping").
   Plus it lists pages alphabetically incl. Privacy. Make it a clean
   full-width onsil drawer with nav-priority order + Privacy hidden,
   matching the home (.mio-menu) hamburger. Parent JS still opens/
   closes (we never force display); CSS-only, reversible.
   ============================================================ */
@media (max-width:860px){
  /* line ~88 sets `body > * { z-index:1 }`, so the <header> (which holds the
     menu) and the page-content wrapper are BOTH z-index:1 siblings — the
     content, later in DOM, painted OVER the menu's 999999 (trapped inside the
     header's stacking context). The parent JS adds `.toggled` to the header
     while the drawer is open; raise that whole context above the content only
     then. (Same body>* z-index trap the home header fix addresses.) */
  .wp-theme-tattoo-studio header.header.toggled{ z-index:100000 !important; }
  .wp-theme-tattoo-studio #main-menu,
  .wp-theme-tattoo-studio #main-menu.close-panal{
    left:0 !important; right:0 !important; width:100% !important; max-width:100% !important;
    height:100% !important;
    background:var(--base-primary) !important; z-index:999999;
    padding:72px 32px 40px !important; overflow:auto;
    box-shadow:none !important; border:0 !important;
  }
  /* parent ships <false class="menu"> as display:inline (theme bug) — it can't
     contain the flex <ul>, so #main-menu's opaque bg box collapsed and page
     content bled between items. Force the wrapper to block (desktop §P2 already
     does this >=861px; mobile needs it too). */
  .wp-theme-tattoo-studio #main-menu .menu{ display:block !important; width:100% !important; }
  .wp-theme-tattoo-studio #main-menu ul{
    display:flex !important; flex-direction:column; gap:0;
    margin:0 !important; padding:0 !important; list-style:none !important;
    max-width:var(--container); margin-inline:auto !important;
  }
  .wp-theme-tattoo-studio #main-menu li{
    width:100% !important; float:none !important; margin:0 !important;
    border-bottom:1px solid var(--line-subtle) !important; list-style:none !important;
    background:transparent !important;
  }
  .wp-theme-tattoo-studio #main-menu li a{
    display:block !important; padding:16px 0 !important;
    font-family:var(--font-display) !important; font-size:18px !important;
    text-transform:uppercase; letter-spacing:.06em; color:var(--text-primary) !important;
  }
  .wp-theme-tattoo-studio #main-menu li a:hover{ color:var(--accent-gold) !important; }
  /* nav priority (mirror desktop C4): Home, Gallery, About, Services, Booking, Contact, Blog */
  .wp-theme-tattoo-studio #main-menu li.page-item-639{ order:1; }
  .wp-theme-tattoo-studio #main-menu li.page-item-48 { order:2; }
  .wp-theme-tattoo-studio #main-menu li.page-item-45 { order:3; }
  .wp-theme-tattoo-studio #main-menu li.page-item-46 { order:4; }
  .wp-theme-tattoo-studio #main-menu li.page-item-49 { order:5; }
  .wp-theme-tattoo-studio #main-menu li.page-item-47 { order:6; }
  .wp-theme-tattoo-studio #main-menu li.page-item-640{ order:7; }
  .wp-theme-tattoo-studio #main-menu li.page-item-3 { display:none !important; } /* Privacy -> footer only */
  /* close (X) button -> onsil, keep top-right tap target */
  .wp-theme-tattoo-studio #main-menu .close-menu,
  .wp-theme-tattoo-studio .close-menu{
    top:20px !important; right:24px !important; color:var(--text-primary) !important;
  }
}

/* =========================================================================
   JOURNAL INDEX (home.php) — 2026-06-09
   Self-contained posts-index template (mirrors front-page.php's .mio-home
   token system, scoped to .mio-journal). Groups posts by language and uses
   real thumbnails (IMG-1 fallback filter). Parent bootstrap is also enqueued
   on is_home(); child style.css loads at priority 9999 so this cascade wins.
   ========================================================================= */
.mio-journal{--bp:#FAF7F2;--bs:#F0EBE3;--tp:#2B2724;--ts:#6B6560;--gold:#B5985A;--line:#DDD5C9;
  --fd:'Cormorant Garamond','EB Garamond',Georgia,serif;--fb:'Inter',system-ui,sans-serif;
  margin:0;background:var(--bp);color:var(--tp);font-family:var(--fb);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}
.mio-journal *{box-sizing:border-box;}
.mio-journal img{display:block;max-width:100%;height:auto;}
.mio-journal a{color:inherit;text-decoration:none;}
.mio-journal p{margin:0 0 1em;color:var(--ts);}
.mio-journal .mio-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.mio-journal .mio-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ts);}
.mio-journal .mio-d{font-family:var(--fd);letter-spacing:-.02em;line-height:1.12;font-weight:400;}
.mio-journal h1.mio-d{font-size:clamp(2.2rem,4vw + 1rem,3.4rem);margin:.2em 0;}
.mio-journal h2.mio-d{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 .4em;}
.mio-journal .mio-tlink{color:var(--tp);border-bottom:1px solid var(--line);padding-bottom:2px;font-size:14px;letter-spacing:.04em;transition:border-color .2s,color .2s;}
.mio-journal .mio-tlink:hover{color:var(--gold);border-color:var(--gold);}
.mio-journal .mio-sec{padding:64px 0;}
.mio-journal .mio-sec.alt{background:var(--bs);}
/* header (identical to front-page.php) */
.mio-journal .mio-head{position:sticky !important;top:0;z-index:60 !important;background:rgba(250,247,242,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.mio-journal .mio-nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1200px;margin:0 auto;}
.mio-journal .mio-brand{font-family:var(--fd);font-size:20px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;}
.mio-journal .mio-brand small{display:block;font-family:var(--fb);font-size:9.5px;letter-spacing:.18em;color:var(--ts);margin-top:2px;}
.mio-journal .mio-menu{display:flex;gap:28px;align-items:center;}
.mio-journal .mio-menu a{font-family:var(--fd);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ts);transition:color .2s;}
.mio-journal .mio-menu a:hover,.mio-journal .mio-menu a.on{color:var(--gold);}
.mio-journal .mio-burger{display:none;background:none;border:0;cursor:pointer;font-size:24px;line-height:1;color:var(--tp);padding:4px 6px;}
/* journal hero */
.mio-journal .mio-jhero{padding:72px 0 36px;}
.mio-journal .mio-jlead{font-size:17px;line-height:1.75;max-width:60ch;}
/* language tab bar (1.0.19): pick a language up top instead of scrolling */
.mio-journal .mio-jlangbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.mio-journal .mio-jlang{font-family:var(--fd);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ts);border:1px solid var(--line);border-radius:999px;padding:8px 18px;line-height:1.4;transition:color .2s,border-color .2s,background .2s;}
.mio-journal .mio-jlang:hover{color:var(--gold);border-color:var(--gold);}
.mio-journal .mio-jlang.on{color:var(--bp);background:var(--tp);border-color:var(--tp);}
.mio-journal .mio-jsec.mio-jhide{display:none;}
/* language sections */
.mio-journal .mio-jheading{display:flex;align-items:baseline;gap:12px;margin-bottom:28px;}
.mio-journal .mio-jcount{font-family:var(--fb);font-size:12px;letter-spacing:.06em;color:var(--ts);border:1px solid var(--line);border-radius:999px;padding:2px 10px;line-height:1.6;}
.mio-journal .mio-jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.mio-journal .mio-jcard{display:flex;flex-direction:column;background:var(--bp);border:1px solid var(--line);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;height:100%;}
.mio-journal .mio-jcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(43,39,36,.10);border-color:var(--gold);}
.mio-journal .mio-jthumb{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--bs);}
.mio-journal .mio-jthumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.mio-journal .mio-jcard:hover .mio-jthumb img{transform:scale(1.04);}
.mio-journal .mio-jnoimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--bs),var(--line));}
.mio-journal .mio-jbody{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1;}
.mio-journal .mio-jdate{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ts);}
.mio-journal .mio-jtitle{font-family:var(--fd);font-size:1.32rem;line-height:1.22;color:var(--tp);}
.mio-journal .mio-jexc{font-size:13.5px;line-height:1.6;color:var(--ts);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mio-journal .mio-jmore{margin-top:auto;font-family:var(--fd);font-size:13px;letter-spacing:.06em;color:var(--gold);}
.mio-journal .mio-cross{text-align:center;}
@media(max-width:860px){
  .mio-journal .mio-jgrid{grid-template-columns:1fr;}
  .mio-journal .mio-burger{display:block;}
  .mio-journal .mio-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:61;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bp);border-bottom:1px solid var(--line);padding:6px 32px 18px;box-shadow:0 8px 16px rgba(43,39,36,.12);}
  .mio-journal .mio-menu.open{display:flex;}
  .mio-journal .mio-menu a{width:100%;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;}
}
@media(min-width:861px) and (max-width:1100px){
  .mio-journal .mio-jgrid{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   §M1-138 — run 138 lane M1 additions (additive only).
   Restores the focus ring §T1 removed with outline:none, gives
   the booking submit + gallery top CTA the landmark button
   spec, and styles the facts strips added above each form.
   No existing rule is edited or deleted.
   ============================================================ */
/* R2-3: every item carries the same leading bullet (was: bullet only on
   items 2+, which read as an inconsistent list). Stacked so each fact is
   one scannable line now that the strip carries 5 items. */
.wp-theme-tattoo-studio .mio-facts-strip {
  list-style:none;
  display:grid; gap:4px;                 /* R3-3: 6px -> 4px */
  max-width:var(--prose-max); margin:0 auto 1.25rem; padding:0;
  font-family:var(--font-body); font-size:.9rem; line-height:1.35;   /* R3-3: 1.5 -> 1.35 */
  color:var(--text-secondary); text-align:left;
}
.wp-theme-tattoo-studio .mio-facts-strip li { margin:0; padding:0 0 0 14px; position:relative; }
.wp-theme-tattoo-studio .mio-facts-strip li::before { content:"\00b7"; position:absolute; left:2px; }
.wp-theme-tattoo-studio .mio-facts-strip a { color:var(--accent-gold); text-decoration:underline; }

.wp-theme-tattoo-studio .mio-book-form input:focus-visible,
.wp-theme-tattoo-studio .mio-book-form select:focus-visible,
.wp-theme-tattoo-studio .mio-book-form textarea:focus-visible,
.wp-theme-tattoo-studio .mio-book-form button:focus-visible,
.wp-theme-tattoo-studio .cta-button:focus-visible,
.wp-theme-tattoo-studio .mio-anchor-cta a:focus-visible,
.wp-theme-tattoo-studio .menu-toggle:focus-visible {
  /* R1-03: --accent-gold measures 2.58:1 on --base-primary and fails the 3:1
     non-text contrast rule for focus indicators. --gold-text (#7A5F2B, the
     run-138 text-safe token from onsil tokens.css) measures 5.62:1. */
  outline:3px solid #7A5F2B;
  outline-offset:2px;
}

.wp-theme-tattoo-studio .mio-book-form button[type="submit"] {
  justify-self:stretch;
  width:100%;
  min-height:52px;
  font-size:1.05rem;
}

.wp-theme-tattoo-studio .mio-cta-top {
  max-width:var(--prose-max);
  margin:1.5rem auto 0;
  text-align:center;
}
.wp-theme-tattoo-studio .mio-cta-top .cta-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px;
}
@media (max-width:640px) {
  .wp-theme-tattoo-studio .mio-cta-top .cta-button { width:100%; }
}

/* ------------------------------------------------------------
   §M1-138b — compact title band on /booking/, /ko/booking/,
   /gallery/ (L0 판정 2026-09-05).
   §2.2 (line ~146) hides .header-image-box on every non-single
   page. On these three that also hid the run-136 intent: the
   H1, the "#mio-book-form" anchor button and the KO<->EN locale
   link, leaving no visible route between the two booking
   locales. Re-show ONLY these page ids, as a flat compact band
   (no background image, no dark overlay, crumb still hidden),
   total height <=120px so the first form input stays high.
   §2.2 is NOT edited — this override sits later in the sheet.
   ------------------------------------------------------------ */
.wp-theme-tattoo-studio.page-id-49 .header-image-box,
.wp-theme-tattoo-studio.page-id-48 .header-image-box {
  display:block !important;
  position:relative;
  height:auto !important;
  min-height:0 !important;
  background-image:none !important;
  background-color:var(--base-secondary) !important;
  border-bottom:1px solid var(--line-subtle);
  padding:12px 0 !important;           /* R3-2: 20px -> 12px */
  text-align:center;
}
.wp-theme-tattoo-studio.page-id-49 .header-image-box::before,
.wp-theme-tattoo-studio.page-id-48 .header-image-box::before {
  display:none !important;
}
.wp-theme-tattoo-studio.page-id-49 .header-image-box .container,
.wp-theme-tattoo-studio.page-id-48 .header-image-box .container {
  max-width:var(--container);
}
.wp-theme-tattoo-studio.page-id-49 .header-image-box h1,
.wp-theme-tattoo-studio.page-id-48 .header-image-box h1 {
  color:var(--text-primary) !important;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.4rem !important;         /* R3-2: 1.6rem -> 1.4rem */
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:0;
}
.wp-theme-tattoo-studio.page-id-49 .header-image-box .mio-anchor-cta,
.wp-theme-tattoo-studio.page-id-48 .header-image-box .mio-anchor-cta {
  margin:6px 0 0;
  font-size:1rem;
  line-height:1.4;
}
.wp-theme-tattoo-studio.page-id-49 .header-image-box .crumb-box,
.wp-theme-tattoo-studio.page-id-48 .header-image-box .crumb-box,
.wp-theme-tattoo-studio.page-id-49 .header-image-box .headerimgbox-meta,
.wp-theme-tattoo-studio.page-id-48 .header-image-box .headerimgbox-meta {
  display:none !important;
}


/* ============================================================
   §M1-140 — run 140 lane M ("human eye to booking") additions.
   Additive only; no rule above is edited or deleted.
   Sources: DESIGN_SPEC_140 §B (B1 filled primary CTA, B2 proof
   strip, B4 one-line channel row, B8 verbatim review block).
   ============================================================ */

/* B1 — filled primary CTA (HARD LOCK amendment 2026-09-05, Tony):
   ONE per screen. On the booking pages that one is the form submit;
   the channel row and the last-minute link stay text/outline. */
.wp-theme-tattoo-studio .mio-book-form button[type="submit"] {
  background:#2B2724;
  color:#FAF7F2;
  border:1px solid #2B2724;
  border-radius:0;
}
.wp-theme-tattoo-studio .mio-book-form button[type="submit"]:hover,
.wp-theme-tattoo-studio .mio-book-form button[type="submit"]:focus-visible {
  /* R140-02: --accent-gold #B5985A under #FAF7F2 label = 2.58:1 and fails the
     4.5:1 text rule in a directly reachable state. #7A5F2B (gold-text) = 5.62:1. */
  background:#7A5F2B;
  color:#FAF7F2;
  border-color:#7A5F2B;
}

/* B2 — proof strip: the first four tiles of the home gallery, reused
   verbatim (same src/alt), square-cropped, whole strip linked to
   /gallery/. Sits directly under the facts strip, above the form. */
.wp-theme-tattoo-studio .mio-proof-strip {
  display:block;
  max-width:var(--prose-max);
  margin:0 auto 1.25rem;
}
.wp-theme-tattoo-studio .mio-proof-strip .mio-proof-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.wp-theme-tattoo-studio .mio-proof-strip img {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--base-primary);
  border:1px solid var(--line-subtle);
  border-radius:0;
  transition:border-color var(--motion-fade);
}
.wp-theme-tattoo-studio .mio-proof-strip:hover img,
.wp-theme-tattoo-studio .mio-proof-strip:focus-visible img {
  border-color:var(--accent-gold);
}
.wp-theme-tattoo-studio .mio-proof-strip .mio-proof-cap {
  display:block;
  margin-top:6px;
  font-family:var(--font-body);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--text-secondary);
  text-align:right;
}

/* B8 — review block. Verbatim Google-review excerpts, no schema.
   The source label sits above the quotes and is part of the block. */
.wp-theme-tattoo-studio .mio-reviews {
  max-width:var(--prose-max);
  margin:0 auto 1.5rem;
}
.wp-theme-tattoo-studio .mio-quote {
  margin:0 0 1rem;
  padding:0 0 0 14px;
  border-left:1px solid var(--line-subtle);
  border-radius:0;
  font-family:var(--font-display);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--text-primary);
}
.wp-theme-tattoo-studio .mio-quote p {
  margin:0;
  white-space:pre-line;   /* the verbatim quotes carry real newlines */
}
.wp-theme-tattoo-studio .mio-quote cite {
  display:block;
  margin-top:.35rem;
  font-family:var(--font-body);
  font-style:normal;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--text-secondary);
}

/* B4 — post-submit channel block compressed to a single inline row.
   Same hrefs and data-booking-* attributes as the old button stack. */
.wp-theme-tattoo-studio .booking-options.mio-channel-row {
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  margin-top:.5rem;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-secondary);
}
.wp-theme-tattoo-studio .booking-options.mio-channel-row .mio-channel-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
  color:var(--text-primary);
  text-decoration:underline;
  text-underline-offset:3px;
}
.wp-theme-tattoo-studio .booking-options.mio-channel-row .mio-channel-link:hover {
  color:var(--accent-gold);
}
.wp-theme-tattoo-studio .booking-options.mio-channel-row .mio-channel-sep {
  color:var(--line-subtle);
}
/* keep the run-138 a11y focus ring (#7A5F2B, 5.62:1) on the new controls */
.wp-theme-tattoo-studio .mio-proof-strip:focus-visible,
.wp-theme-tattoo-studio .booking-options.mio-channel-row .mio-channel-link:focus-visible {
  outline:3px solid #7A5F2B;
  outline-offset:2px;
}

@media (max-width:640px) {
  .wp-theme-tattoo-studio .mio-proof-strip .mio-proof-grid { gap:6px; }
}

/* ============================================================
   §M1-140-R2 — run 140 round 2 (GAPS_R1 rows tagged M).
   Additive only; nothing above is edited or deleted.
   R2-1 compact lead review above the form + the rest below the
   submit button · R2-2 filled Book landmark on /gallery/ ·
   R2-6 proof strip 4 -> 3 tiles · R2-7 KO in-content h2 to label.
   ============================================================ */

/* R2-2 — the gallery top CTA is a "Book a session" landmark, so it
   takes the filled primary treatment too. .cta-button declares its
   colours with !important (§T2), so the override must match. */
.wp-theme-tattoo-studio .cta-button.mio-btn-primary {
  background:#2B2724 !important;
  color:#FAF7F2 !important;
  border:1px solid #2B2724 !important;
  border-radius:0 !important;
}
.wp-theme-tattoo-studio .cta-button.mio-btn-primary:hover,
.wp-theme-tattoo-studio .cta-button.mio-btn-primary:focus-visible {
  background:#7A5F2B !important;              /* R140-02: 5.62:1, was #B5985A 2.58:1 */
  color:#FAF7F2 !important;
  border-color:#7A5F2B !important;
}

/* R2-6 — three ~105px tiles at 390px instead of four ~80px ones.
   Same square ratio, so the strip height is unchanged. */
.wp-theme-tattoo-studio .mio-proof-strip .mio-proof-grid {
  grid-template-columns:repeat(3,1fr);
}
.wp-theme-tattoo-studio .mio-proof-strip { margin-bottom:1rem; }

/* R2-1 — the block that sits ABOVE the form carries one short quote
   and is typographically compact so the first form control stays
   inside the first screen-and-a-bit. The full-size block below the
   submit button keeps the reading size. */
.wp-theme-tattoo-studio .mio-reviews-lead { margin-bottom:1rem; }
.wp-theme-tattoo-studio .mio-reviews-lead .mio-quote {
  font-size:.95rem; line-height:1.45; margin-bottom:0;
}
/* Run 141 — one-line trust line above the short provenance label (booking)
   and the "Featured in" line in the home About block. Text links only. */
/* Specificity (0,3,1) on purpose: `.post-content p { margin-bottom:1.4rem }`
   (0,2,1) otherwise wins and adds 22.4px under the trust line (R1 y-measure:
   +38.5px instead of +21.7px on /booking/). */
.wp-theme-tattoo-studio .post-content p.mio-trust,
.wp-theme-tattoo-studio .mio-trust {
  font-size:.72rem; line-height:1.4; margin:0 0 .35rem; color:var(--text-secondary);
}
.wp-theme-tattoo-studio .mio-trust a,
.wp-theme-tattoo-studio .mio-featured a {
  color:var(--text-primary); text-decoration:underline; text-underline-offset:.15em;
}
.wp-theme-tattoo-studio .mio-featured { font-size:.95rem; color:var(--text-secondary); }

/* R2-1 — "How It Works" / "진행 방식" sits above the form now, so its
   default theme rhythm costs ~60px of fold. Text is untouched. */
.wp-theme-tattoo-studio .mio-how {
  max-width:var(--prose-max); margin:0 auto 1.1rem;
}
.wp-theme-tattoo-studio .mio-how h3 { margin:0 0 .35rem; }
.wp-theme-tattoo-studio .mio-how ol { margin:0; padding-left:1.25rem; }
.wp-theme-tattoo-studio .mio-how li { margin:0; line-height:1.5; }

/* R2-5 — the KO page repeats the channel row under the facts strip.
   Slightly tighter than the bottom row so it reads as a shortcut. */
.wp-theme-tattoo-studio .booking-options.mio-channel-row-top {
  margin:0 auto .9rem;
  max-width:var(--prose-max);
}

/* R2-7 — /ko/booking/ only: the compact header band already shows
   "예약 문의" as the H1, so the in-content H2 repeats it. Keep the
   element and its text (AEO surface); reduce it to label size.
   R140-01 lever 2 (2026-09-05): the lang="ko" scope is dropped — the EN
   band repeats "Booking" above "Book Your Appointment" the same way, and
   the 390x844 first-control gate needs the height on both locales. */
.wp-theme-tattoo-studio.page-id-49 .post-content > h2 {
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:400;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-secondary);
  max-width:var(--prose-max);
  margin:0 auto .5rem;
  text-align:left;
}


/* ============================================================
   §M1-140-R5 — run 140 ship-review fix R140-01 (BLOCK).
   Measured first-chip top was y=1078 (EN) / y=963 (KO) at 390x844,
   against a <=900 gate. Levers 3 and 4: vertical rhythm only —
   no text, no facts-strip item and no channel row is removed.
   ============================================================ */
/* the export carries an empty <p> holding only a tracking comment */
.wp-theme-tattoo-studio.page-id-49 .post-content > p:empty { display:none; }
.wp-theme-tattoo-studio.page-id-49 #content.mt-5 { margin-top:1rem !important; }
.wp-theme-tattoo-studio.page-id-49 .mio-facts-strip {
  font-size:.84rem; line-height:1.3; gap:2px; margin-bottom:.7rem;
}
.wp-theme-tattoo-studio.page-id-49 .booking-options.mio-channel-row-top {
  margin-bottom:.55rem;
}
.wp-theme-tattoo-studio.page-id-49 .mio-proof-strip { margin-bottom:.6rem; }
/* tile ~96px tall: the theme forces img{height:auto}, so the box is set by
   the ratio (column width 118px / 1.23 = 96px), not by a height declaration. */
.wp-theme-tattoo-studio.page-id-49 .mio-proof-strip img { aspect-ratio:1.23/1; }
.wp-theme-tattoo-studio.page-id-49 .mio-proof-strip .mio-proof-cap {
  margin-top:3px; font-size:.75rem;
}
.wp-theme-tattoo-studio.page-id-49 .mio-reviews-lead { margin-bottom:.6rem; }
.wp-theme-tattoo-studio.page-id-49 .mio-reviews-lead .mio-quote {
  font-size:.92rem; line-height:1.4;
}
.wp-theme-tattoo-studio.page-id-49 .mio-book-form { margin-top:.5rem; }
.wp-theme-tattoo-studio.page-id-49 .mio-style-chips { margin-bottom:.75rem; }
.wp-theme-tattoo-studio.page-id-49 .mio-style-chips legend { margin-bottom:.35rem; }