/* Ironwood Tattoo & Piercing skin — tattoo-studio-website-design.html
   This page argues for one kind of room, so it wears that room's clothes.
   Palette and faces are lifted from portfolio-tattoo/, the portfolio site this
   page links to. Nothing here touches assets/yeti.css: the brand isolation
   rule holds, every studio stays its own world, and the shared stylesheet
   is still the shared stylesheet. Contrast was measured, not eyeballed;
   ink on paper and accent-2 on paper both clear WCAG AA. */

:root{
  --paper:#e6dfd0;
  --paper-2:#ebe5d8;
  --paper-3:#dcd3c0;
  --surface:#f5f0e8;
  --ink:#060606;
  --ink-2:rgba(6,6,6,.80);
  --ink-3:rgba(6,6,6,.70);
  --ink-4:rgba(6,6,6,.22);
  --rule:rgba(6,6,6,.20);
  --rule-soft:rgba(6,6,6,.10);
  --accent:#8a1a1a;
  --accent-2:#7a1616;
  --accent-3:#d05151;
  --accent-soft:rgba(138,26,26,.14);
  --serif:'Old Standard TT', 'Times New Roman', serif;
  --sans:'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Cinzel', 'Times New Roman', serif;
}

/* Top bar, in full. yeti.css hard-codes the Yeti plum in four places
   (base, scrolled, nav links, and the CTA pill), so a background swap alone
   leaves dark-on-dark links the moment the bar goes sticky. */
.topbar{background:linear-gradient(180deg,#0e0e0e 0%,#060606 100%);color:#f5f0e8;border-bottom-color:rgba(245,240,232,.18);}
.topbar.is-scrolled{background:#060606 !important;backdrop-filter:none;}
.topbar .crumb,.topbar .crumb *{color:rgba(245,240,232,.72);}
.topbar .brand-mark{color:#f5f0e8;}
.topbar .nav a{color:rgba(245,240,232,.78);}
.topbar .nav a:hover,.topbar .nav a.is-active{color:#f5f0e8;}
.topbar .nav-toggle,.topbar .menu-btn,.topbar .menu-toggle{color:#f5f0e8;border-color:rgba(245,240,232,.32);}
.topbar .right .btn{background:#f5f0e8;border-color:#f5f0e8;color:#060606;}
.topbar .right .btn:hover{background:transparent;border-color:#f5f0e8;color:#f5f0e8;}
.topbar .brand svg{color:#f5f0e8;}
.topbar :focus-visible{outline-color:#f5f0e8;}

/* Display type only. Several of these faces are caps-only or display-only,
   so running text, leads, pull-quotes and FAQ summaries stay on --serif. */
.h-display,.h-section,.h-card,.page-hero h1,.cta-bleed-h,.bleed-hero-headline,.price-num,.spec-price,.approach-pin h2,.approach-step .step-h,.footer-mark,.brand-mark,.folio,.metrics .num,.bleed-hero-stats .num,.renew-price,.incl-row dt{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Cinzel is wide and all caps, so yeti.css's phone sizes turned the hero
   into a seven-line block and several section heads into six. */
@media (max-width:560px){
  .page-hero h1{font-size:36px;letter-spacing:.02em}
  .h-section{font-size:30px;letter-spacing:.02em}
}