/* ============================================================================
   STYLE 24 — COMMUNITY HOUSE
   Sleek / modern direction. Strictly monochrome, big photography, clean grids.

   You usually don't need to touch this file. For text, hours, links and photos,
   see config.js + index.html.
   ============================================================================ */

:root{
  --ink:    #0A0A0A;
  --paper:  #FFFFFF;
  --void:   #000000;
  --gallery:#F5F5F5;
  --stone:  #9A9A9A;   /* muted text */
  --marble: #C9C9C9;
  --smoke:  #3A3A3A;   /* dividers */
  --line:   rgba(255,255,255,.12);   /* hairlines on dark */

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 72px);
  --bar-h: 40px;
  --nav-h: 70px;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --black: "UnifrakturCook", "Times New Roman", serif;  /* brand accent only */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
*, *::before, *::after{ border-radius:0 !important; }   /* brand: sharp corners */

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--void); color:var(--paper);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; width:100%; height:100%; object-fit:cover;
     filter:grayscale(1) contrast(1.04); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* --- Type helpers --------------------------------------------------------- */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--stone);
}
.h2{
  font-family:var(--sans); font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2.4rem, 5.5vw, 4.4rem);
}
.h3{ font-weight:700; letter-spacing:-.01em; font-size:clamp(1.4rem,3vw,2rem); line-height:1.1; }
.lead{ font-size:clamp(1.05rem, 1.5vw, 1.25rem); color:var(--marble); line-height:1.55; }
.lead--sm{ font-size:1rem; }
.muted{ color:var(--stone); }
.link{ border-bottom:1px solid var(--smoke); padding-bottom:2px; transition:border-color .25s var(--ease); }
.link:hover{ border-color:var(--paper); }

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; white-space:nowrap;
  font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1em 1.7em; border:1px solid var(--paper);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn--solid{ background:var(--paper); color:var(--ink); }
.btn--solid:hover{ background:transparent; color:var(--paper); }
.btn--line{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.4); }
.btn--line:hover{ border-color:var(--paper); background:var(--paper); color:var(--ink); }
.btn--lg{ padding:1.15em 2.1em; font-size:.82rem; }
.btn:hover{ transform:translateY(-2px); }

/* On light sections */
.on-light .btn--solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.on-light .btn--solid:hover{ background:transparent; color:var(--ink); }
.on-light .btn--line{ color:var(--ink); border-color:rgba(0,0,0,.35); }
.on-light .btn--line:hover{ background:var(--ink); color:var(--paper); }

/* =====================================================================
   ANNOUNCEMENT BAR
   ===================================================================== */
.bar{ position:relative; z-index:1001; background:var(--ink); border-bottom:1px solid var(--line); }
.bar.is-hidden{ display:none; }
.bar__inner{
  max-width:var(--maxw); margin-inline:auto; min-height:var(--bar-h);
  padding:7px var(--pad); display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.bar__dot{ width:7px; height:7px; background:var(--paper); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
.bar__count{ color:var(--stone); font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.bar__count [data-cd]{ color:var(--paper); }
.bar__cta{ text-decoration:underline; text-underline-offset:3px; }
.bar__cta:hover{ color:var(--stone); }
.bar__close{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:1.25rem; width:26px; height:26px; color:var(--stone); }
.bar__close:hover{ color:var(--paper); }
@media (max-width:640px){ .bar__cta{ display:none; } .bar__inner{ font-size:.6rem; gap:.7rem; padding-right:34px; } }
@media (prefers-reduced-motion: reduce){ .bar__dot{ animation:none; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ max-width:var(--maxw); margin-inline:auto; height:var(--nav-h);
  padding-inline:var(--pad); display:flex; align-items:center; gap:2rem; }
.nav__logo{ height:46px; width:auto; filter:none; }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{ font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marble); position:relative; padding:6px 0; transition:color .2s var(--ease); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--paper); transition:width .3s var(--ease); }
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }
.nav__book{ font-size:.72rem; padding:.75em 1.3em; }
.nav__toggle{ display:none; flex-direction:column; gap:6px; width:28px; margin-left:auto; padding:6px 0; }
.nav__toggle span{ height:1.5px; width:100%; background:var(--paper); transition:.3s var(--ease); }
@media (max-width:900px){
  .nav__links, .nav__book{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }
}

.drawer{ position:fixed; inset:0; z-index:999; background:var(--void);
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:var(--pad);
  transform:translateY(-100%); transition:transform .45s var(--ease); visibility:hidden; }
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer__links{ display:flex; flex-direction:column; gap:.4rem; }
.drawer__links a{ font-size:2.4rem; font-weight:800; letter-spacing:-.02em; }
.drawer__links a:hover{ color:var(--stone); }
.drawer__book{ align-self:flex-start; margin-top:1rem; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; min-height:calc(100svh - var(--nav-h)); display:flex; align-items:flex-end;
  overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ filter:grayscale(1) contrast(1.1) brightness(.78); }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%); }
.hero__inner{ position:relative; z-index:2; padding-bottom:clamp(56px, 10vh, 120px); padding-top:14vh; }
.hero__title{ font-family:"Bricolage Grotesque", "Archivo", sans-serif; font-weight:800; letter-spacing:-.02em; line-height:.92;
  font-size:clamp(3rem, 9vw, 7.5rem); margin:.24em 0 .35em; }
.hero__lead{ max-width:48ch; font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--marble); }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin:2.2rem 0 1.4rem; }
.hero__meta{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.hero__meta strong{ color:var(--paper); }
.hero__scroll{ position:absolute; z-index:2; left:50%; bottom:24px; transform:translateX(-50%);
  width:24px; height:38px; border:1px solid rgba(255,255,255,.4); border-radius:14px !important; }
.hero__scroll span{ position:absolute; left:50%; top:8px; width:2px; height:7px; background:var(--paper);
  transform:translateX(-50%); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 80%{ opacity:0; transform:translate(-50%,12px); } 100%{ opacity:0; } }
@media (max-width:900px){ .hero__scroll{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll span{ animation:none; } }
@media (max-width:700px){
  /* reveal the statue on narrow screens + lighten the dimming */
  .hero__media img{ object-position:72% 32%; filter:grayscale(1) contrast(1.1) brightness(.9); }
  .hero::after{ background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.45) 100%); }
  .hero__inner{ padding-top:10vh; }
  /* the two hero buttons fill the width, 50 / 50 */
  .hero__actions{ gap:.7rem; }
  .hero__actions .btn{ flex:1 1 0; min-width:0; padding-inline:0; justify-content:center; font-size:.74rem; }
}

/* =====================================================================
   INTRO STATEMENT
   ===================================================================== */
.intro{ padding:clamp(80px,14vh,160px) 0; border-bottom:1px solid var(--line); }
.intro__inner{ max-width:1040px; }
.intro__statement{ font-weight:600; letter-spacing:-.015em; line-height:1.18;
  font-size:clamp(1.7rem, 4vw, 3rem); margin:1.2rem 0 2.6rem; }
.intro__statement em{ font-style:italic; color:var(--stone); }
.intro__cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:820px; }
.intro__cols p{ color:var(--marble); font-size:1.02rem; }
@media (max-width:680px){ .intro__cols{ grid-template-columns:1fr; gap:1.4rem; } }

/* =====================================================================
   FOUR CRAFTS GRID
   ===================================================================== */
.crafts{ padding:clamp(64px,9vh,110px) 0; }
.crafts__head{ margin-bottom:2.6rem; display:flex; flex-direction:column; gap:.8rem; }
.crafts__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); }
.card{ position:relative; overflow:hidden; aspect-ratio:3/4.2; display:block; }
.card__media{ position:absolute; inset:0; }
.card__media img{ transition:transform .8s var(--ease); filter:grayscale(1) contrast(1.08) brightness(.82); }
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9), transparent 55%); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ position:absolute; left:0; bottom:0; z-index:1; padding:1.5rem 1.4rem; width:100%; }
.card__no{ font-size:.72rem; letter-spacing:.2em; color:var(--stone); }
.card__body h3{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:.15rem 0 .25rem; }
.card__body p{ font-size:.85rem; color:var(--marble); opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.card:hover .card__body p{ opacity:1; transform:none; }
@media (hover:none){ .card__body p{ opacity:1; transform:none; } }
@media (max-width:860px){ .crafts__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .crafts__grid{ grid-template-columns:1fr; } .card{ aspect-ratio:16/11; } }

/* =====================================================================
   FEATURE ROWS
   ===================================================================== */
.feature{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  border-top:1px solid var(--line); }
.feature--rev .feature__media{ order:2; }
.feature__media{ overflow:hidden; min-height:520px; }
.feature__media img{ transition:transform 1s var(--ease); filter:grayscale(1) contrast(1.06) brightness(.92); }
.feature:hover .feature__media img{ transform:scale(1.04); }
.feature__body{ display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(40px,6vw,88px); justify-content:center; }
.feature__no{ font-family:var(--sans); font-weight:800; font-size:.85rem; letter-spacing:.2em; color:var(--stone); margin-bottom:1.2rem; }
.feature__body .eyebrow{ margin-bottom:.5rem; }
.feature__body .h2{ margin-bottom:1.4rem; }
.feature__body .lead{ margin-bottom:1.8rem; max-width:46ch; }
.feature__body .muted{ margin:-.8rem 0 1.8rem; font-size:.95rem; }
.feature--compact .feature__media{ min-height:420px; }

/* price list */
.price{ list-style:none; width:100%; max-width:440px; margin-bottom:2rem; }
.price li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--line); }
.price li span{ font-size:.98rem; }
.price li b{ font-weight:700; font-size:1.05rem; white-space:nowrap; }

/* tags */
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.tags li{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); padding:.5em .85em; color:var(--marble); }

@media (max-width:860px){
  .feature{ grid-template-columns:1fr; }
  .feature--rev .feature__media{ order:0; }
  .feature__media{ min-height:0; aspect-ratio:16/11; }
  .feature--compact .feature__media{ aspect-ratio:16/11; min-height:0; }
}

/* Blackletter accent — used for the four craft names + menu headers (matches
   the client's printed menus). Body/UI stays crisp Archivo. */
.bl{ font-family:var(--black); font-weight:700; letter-spacing:.01em; line-height:.96; }
.card__body h3{ font-family:var(--black); font-weight:700; letter-spacing:.01em; }

/* =====================================================================
   OPENING-WEEK PROMO STRIP
   ===================================================================== */
.promo{ background:var(--paper); color:var(--ink); }
.promo.is-hidden{ display:none; }
.promo__inner{ display:flex; align-items:center; justify-content:center; gap:1.3rem; flex-wrap:wrap;
  padding:.85rem var(--pad); text-align:center; }
.promo__pct{ font-family:var(--black); font-size:1.7rem; line-height:1; }
.promo__text{ font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }
.promo__cta{ font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); padding-bottom:2px; }
.promo__cta:hover{ opacity:.55; }
.promo__cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media (max-width:560px){ .promo__pct{ display:none; } .promo__inner{ gap:.8rem; } .promo__text{ font-size:.7rem; } }

/* =====================================================================
   BARBER MENU
   ===================================================================== */
.craftsec{ }
.menu{ padding-block:clamp(40px,7vh,80px) clamp(56px,9vh,104px); }
.menu__head{ display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap; justify-content:space-between;
  margin-bottom:2.4rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line); }
.menu__note{ font-size:.82rem; color:var(--stone); }
.menu__grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3rem) clamp(2.4rem,5vw,5rem); }
.menu__group h3{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1rem; }
.menu__group ul{ list-style:none; }
.menu__group li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.menu__group li span{ color:var(--marble); }
.menu__group li b{ font-weight:700; white-space:nowrap; }
@media (max-width:760px){ .menu__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .menu__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   STATEMENT BAND (blackletter moment)
   ===================================================================== */
.statement{ position:relative; padding:clamp(96px,20vh,220px) 0; text-align:center; overflow:hidden;
  border-top:1px solid var(--line); }
.statement__media{ position:absolute; inset:0; z-index:0; }
.statement__media img{ filter:grayscale(1) contrast(1.12) brightness(.5); }
.statement::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 80% at 50% 50%, rgba(0,0,0,.3), rgba(0,0,0,.82)); }
.statement__inner{ position:relative; z-index:1; }
.statement__text{ font-family:var(--black); font-weight:700; line-height:.95;
  font-size:clamp(3rem, 9vw, 7rem); letter-spacing:.01em; }
.statement__sub{ margin-top:1.4rem; font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--marble); }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{ padding:clamp(64px,9vh,110px) 0; border-top:1px solid var(--line); }
.gallery__head{ margin-bottom:2.4rem; display:flex; flex-direction:column; gap:.8rem; }
.gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
.gallery__grid figure{ overflow:hidden; aspect-ratio:4/5; }
.gallery__grid img{ transition:transform .9s var(--ease), filter .4s var(--ease);
  filter:grayscale(1) contrast(1.06) brightness(.85); }
.gallery__grid figure:hover img{ transform:scale(1.06); filter:grayscale(1) contrast(1.12) brightness(1); }
@media (max-width:760px){ .gallery__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .gallery__grid{ grid-template-columns:1fr; } .gallery__grid figure{ aspect-ratio:4/3; } }

/* =====================================================================
   VISIT / BOOK
   ===================================================================== */
.visit{ padding:clamp(72px,11vh,130px) 0; border-top:1px solid var(--line); }
.visit__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,6vw,6rem); }
.visit__lead .h2{ margin:1rem 0 1.6rem; }
.visit__open{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:2rem; }
.visit__date{ font-size:2rem; font-weight:800; letter-spacing:-.02em; }
.visit__note{ margin-top:1.1rem; font-size:.88rem; max-width:38ch; }
.visit__details{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem 2.6rem; align-content:start; }
.visit__h{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone);
  padding-bottom:.8rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line); font-weight:700; }
.hours{ list-style:none; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.92rem; color:var(--marble); }
.hours li.is-today{ color:var(--paper); font-weight:700; }
.hours .hours__day{ color:var(--stone); }
.hours li.is-today .hours__day{ color:var(--paper); }
.visit__addr{ font-style:normal; line-height:1.7; color:var(--marble); margin-bottom:.8rem; }
.visit__social{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.visit__social a{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.visit__social a:hover{ color:var(--paper); }
.visit__social a[hidden]{ display:none; }
@media (max-width:860px){ .visit__grid{ grid-template-columns:1fr; } }
@media (max-width:440px){ .visit__details{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ margin-top:clamp(3rem,7vh,6rem); }
.faq__title{ margin-bottom:1.4rem; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.3rem 0; font-weight:600; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--stone); transition:transform .25s var(--ease); }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ padding:0 0 1.5rem; color:var(--marble); max-width:64ch; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ border-top:1px solid var(--line); padding:clamp(56px,8vh,90px) 0 2rem; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer__logo{ height:72px; width:auto; filter:none; }
.footer__tag{ margin-top:1rem; color:var(--stone); font-size:1rem; }
.footer__nav h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem; font-weight:700; }
.footer__nav a{ display:block; font-size:.92rem; color:var(--marble); padding:.32rem 0; }
.footer__nav a:hover{ color:var(--paper); }
.footer__social a{ display:block; font-size:.92rem; color:var(--marble); padding:.32rem 0; }
.footer__social a:hover{ color:var(--paper); }
.footer__social a[hidden]{ display:none; }
.footer__base{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-top:1.8rem; border-top:1px solid var(--line); font-size:.74rem; letter-spacing:.06em; color:var(--stone); }
.footer__top:hover{ color:var(--paper); }
@media (max-width:720px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .footer__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   MULTI-PAGE ADDITIONS  (subpages + active nav)
   ===================================================================== */
.nav__links a.is-active{ color:var(--paper); }
.nav__links a.is-active::after{ width:100%; }

/* Subpage hero */
.phero{ position:relative; min-height:clamp(420px,70svh,660px); display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line); }
.phero__media{ position:absolute; inset:0; z-index:0; }
.phero__media img{ filter:grayscale(1) contrast(1.1) brightness(.7); }
.phero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.3) 55%, rgba(0,0,0,.5)); }
.phero__inner{ position:relative; z-index:1; padding-bottom:clamp(40px,7vh,80px); padding-top:13vh; }
.phero__title{ font-size:clamp(3rem,10vw,7rem); line-height:.95; margin:.18em 0 .3em; }
.phero__lead{ max-width:44ch; color:var(--marble); font-size:clamp(1.05rem,1.6vw,1.3rem); margin-bottom:1.9rem; }

/* Homepage crafts header */
.crafts__top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.4rem; margin-bottom:2.6rem; }
.crafts__intro{ max-width:34ch; color:var(--stone); font-size:1rem; }

/* Tattoo: styles + process + price band */
.styles{ padding-block:clamp(56px,9vh,100px) clamp(20px,4vh,36px); }
.styles__head{ margin-bottom:1.8rem; }
.tags--lg li{ font-size:.84rem; padding:.7em 1.1em; }
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);
  padding-block:clamp(24px,5vh,56px) clamp(40px,7vh,80px); }
.process__step{ border-top:2px solid var(--paper); padding-top:1.2rem; }
.process__no{ font-size:.78rem; letter-spacing:.2em; color:var(--stone); }
.process__step h3{ font-family:var(--black); font-size:clamp(1.6rem,4vw,2.4rem); margin:.35rem 0 .4rem; }
.process__step p{ color:var(--marble); font-size:.95rem; }
@media (max-width:680px){ .process{ grid-template-columns:1fr; gap:1.2rem; } }
.priceband{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  padding-block:clamp(20px,3.5vh,34px); border-block:1px solid var(--line);
  margin-bottom:clamp(48px,8vh,90px); font-size:1.05rem; }
.priceband b{ font-weight:700; }
.priceband__div{ width:1px; height:20px; background:var(--line); }
@media (max-width:560px){ .priceband{ flex-direction:column; align-items:flex-start; gap:.6rem; } .priceband__div{ display:none; } }

/* 3-up gallery strip on subpages */
.gallery__grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:700px){ .gallery__grid--3{ grid-template-columns:1fr; } }
.gallery--page{ border-top:0; padding-top:clamp(24px,4vh,40px); }

/* Simple content page (grill / patio) */
.simple{ padding-block:clamp(72px,13vh,150px); max-width:920px; }
.simple .h2{ margin:1rem 0 1.4rem; }
.simple__lead{ color:var(--marble); font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:50ch; }

/* =====================================================================
   SCROLL REVEAL + a11y
   ===================================================================== */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ animation:none !important; }
  .card:hover .card__media img, .feature:hover .feature__media img, .gallery__grid figure:hover img{ transform:none !important; }
}
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }