/* ============================================================
   CONCEPT SITE — Salón Tinta y Cobre, salón y barbería (invented business)
   Priced as: single page + both languages + booking embed + photo gallery.
   Its own identity: warm plaster, ink, brass; serif display; soft, roomy layout.
   ============================================================ */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/playfair-var.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/jost-var.woff2') format('woff2')}

:root{
  --plaster:#F3EDE7;
  --plaster-2:#E7DDD3;
  --ink:#1F1B19;
  --ink-soft:#6B615B;
  --brass:#8A5F2B;         /* dark enough for text on plaster */
  --brass-soft:#C9A26B;    /* only on the dark footer and banner */
  --rose:#C08B86;
  --r:2px;
  --shadow:0 20px 44px -28px rgba(31,27,25,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{font-family:Jost,system-ui,sans-serif;font-size:17px;line-height:1.7;color:var(--ink);background:var(--plaster);font-weight:300}
img{max-width:100%;display:block}
a{color:var(--brass)}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:-.01em}
.wrap{width:min(1040px,100% - 40px);margin-inline:auto}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Keyboard users land here first and can jump past the banner and the header. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#1C1A19;color:var(--brass);padding:12px 18px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

.concept-bar{
  position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:10px 20px;background:var(--ink);color:#EDE4DC;font-size:.86rem;font-weight:300;
}
.concept-bar b{color:var(--brass-soft);font-weight:500}
.concept-bar a{color:var(--brass-soft);margin-left:auto;text-decoration:none;border-bottom:1px solid rgba(201,162,107,.45);padding-block:2px}
.concept-bar a:hover{color:#fff;border-color:#fff}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px}
.monogram{
  width:44px;height:44px;border:1px solid var(--brass);border-radius:50%;flex:none;
  display:grid;place-items:center;font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--ink);
}
.brand-name{display:block;font-family:'Playfair Display',serif;font-size:1.35rem;line-height:1.1}
.brand-sub{display:block;font-size:0.69rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.top-right{display:flex;align-items:center;gap:10px}
.lang{
  text-decoration:none;color:var(--ink-soft);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--plaster-2);min-height:44px;display:inline-flex;align-items:center;padding-inline:6px;
}
.lang:hover{color:var(--brass);border-color:var(--brass)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--plaster);
  font-family:Jost,sans-serif;font-weight:400;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:transparent;color:var(--ink)}

/* narrowest phones: the salon name is long, so the header row gives a little back
   on every side rather than pushing the booking button off the screen. */
@media (max-width:399px){
  .top{gap:10px}
  .brand{gap:9px}
  .monogram{width:38px;height:38px;font-size:.95rem}
  .brand-name{font-size:1.12rem}
  .brand-sub{font-size:0.69rem;letter-spacing:.18em}
  .top-right{gap:7px}
  .top-right .lang{padding-inline:3px;font-size:.7rem}
  .top-right .btn{padding:0 14px;font-size:.85rem;letter-spacing:.05em}
}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--plaster)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-brass:hover{background:transparent;color:var(--brass)}

/* ---------- hero ---------- */
.hero{padding-block:40px 60px;display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media (min-width:880px){ .hero{grid-template-columns:1.05fr .95fr;gap:52px;padding-block:56px 76px} }
.hero h1{font-size:clamp(2.5rem,6.6vw,4rem)}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero p{margin-top:20px;color:var(--ink-soft);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-aside{
  border:1px solid var(--plaster-2);background:#fff;padding:28px;box-shadow:var(--shadow);
}
.hero-aside h2{font-size:1.2rem}
.rule{height:1px;background:var(--plaster-2);margin-block:18px}
.list{list-style:none;display:flex;flex-direction:column;gap:12px}
.list li{display:flex;justify-content:space-between;gap:18px;font-size:.96rem}
.list .price{color:var(--brass);white-space:nowrap}

section{padding-block:56px}
.sec-head{max-width:52ch}
.sec-head .eyebrow{font-size:0.69rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,2.7rem);margin-top:12px}
.sec-head p{margin-top:14px;color:var(--ink-soft)}

/* ---------- services ---------- */
.svc-grid{display:grid;gap:22px;grid-template-columns:1fr;margin-top:32px}
@media (min-width:760px){ .svc-grid{grid-template-columns:1fr 1fr} }
.svc-card{border-top:1px solid var(--plaster-2);padding-top:20px}
.svc-card h3{font-size:1.25rem}
.svc-card p{color:var(--ink-soft);font-size:.95rem;margin-top:8px}
.svc-card .meta{margin-top:12px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}

/* ---------- gallery ---------- */
/* The gallery is stock photography. The label says so, in the open. */
.gal-note{
  font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px;
}
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.gal-filter{
  background:transparent;border:1px solid var(--plaster-2);border-radius:100px;min-height:44px;padding:0 18px;
  font:inherit;font-size:.9rem;letter-spacing:.06em;cursor:pointer;color:var(--ink-soft);
}
.gal-filter[aria-selected="true"]{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.gal[hidden]{display:none}   /* display:grid would otherwise beat the hidden attribute */
.gal{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:24px}
@media (min-width:760px){ .gal{grid-template-columns:repeat(3,1fr)} }
.gal figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--plaster-2)}
.gal .tile{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;
  font-size:.8rem;color:#fff;letter-spacing:.06em;
}
.tile-1{background:linear-gradient(150deg,#8C6A4F,#5E4536)}
.tile-2{background:linear-gradient(150deg,#C08B86,#8A5B57)}
.tile-3{background:linear-gradient(150deg,#6B615B,#3A3330)}
.tile-4{background:linear-gradient(150deg,#A9793F,#7A5227)}
.tile-5{background:linear-gradient(150deg,#9AA39B,#5F6A62)}
.tile-6{background:linear-gradient(150deg,#C9A26B,#8C6A3E)}
.gal picture,.gal img{display:block;width:100%;height:100%;object-fit:cover}
.gal figure img{position:absolute;inset:0}
.studio-shot{margin-top:20px;overflow:hidden}
.studio-shot img{display:block;width:100%;height:auto}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:.78rem;
  background:linear-gradient(180deg,transparent,rgba(31,27,25,.75));color:#fff;
}

/* ---------- booking ---------- */
.booking{background:#fff;border:1px solid var(--plaster-2);box-shadow:var(--shadow);padding:0;overflow:hidden}
.booking-head{padding:26px 28px;border-bottom:1px solid var(--plaster-2)}
.booking-head h2{font-size:1.5rem}
.booking-head p{color:var(--ink-soft);font-size:.95rem;margin-top:8px}
.booking-body{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:820px){ .booking-body{grid-template-columns:1.1fr .9fr} }
.booking-col{padding:26px 28px}
.booking-col + .booking-col{border-top:1px solid var(--plaster-2)}
@media (min-width:820px){ .booking-col + .booking-col{border-top:0;border-left:1px solid var(--plaster-2)} }
.field{margin-bottom:16px}
label{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
input,select{
  width:100%;font:inherit;padding:12px 14px;border:1px solid var(--plaster-2);background:var(--plaster);
  color:var(--ink);min-height:48px;border-radius:var(--r);
}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.slot{
  border:1px solid var(--plaster-2);background:var(--plaster);min-height:46px;border-radius:var(--r);
  font:inherit;font-size:.92rem;cursor:pointer;color:var(--ink);
}
.slot[aria-pressed="true"]{background:var(--ink);color:var(--plaster);border-color:var(--ink)}
.slot:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.demo-note{
  margin-top:14px;border:1px solid var(--brass);background:#FBF4EA;color:#7A5227;
  padding:10px 14px;font-size:.9rem;display:inline-block;
}

/* ---------- visit ---------- */
.visit{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:820px){ .visit{grid-template-columns:1fr 1fr} }
.hours{list-style:none;margin-top:14px}
.hours li{display:flex;justify-content:space-between;gap:16px;padding-block:9px;border-bottom:1px solid var(--plaster-2)}
.hours li:last-child{border-bottom:0}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#D8CEC6;padding-block:38px;margin-top:20px}
.foot a{color:var(--brass-soft)}
.foot .btn-brass{color:#fff}          /* the footer link color would fail on the brass fill */
.foot .btn-brass:hover{color:var(--brass-soft)}
.foot-grid{display:flex;flex-wrap:wrap;gap:22px 48px;justify-content:space-between}
.foot small{display:block;margin-top:14px;color:#9A8E86;font-size:.82rem;line-height:1.6;max-width:46ch}

/* ---------- optional photo slots ---------- */
.photo-slot{
  border:1px dashed var(--brass-soft);background:#fff;min-height:170px;display:grid;place-items:center;
  text-align:center;padding:18px;color:var(--ink-soft);font-size:.86rem;
}

/* narrow phones: keep the footer button on one line */
@media (max-width:420px){
  .foot .btn-brass{font-size:.82rem;padding:0 16px;letter-spacing:.04em}
}


/* header on phones */
@media (max-width:600px){
  .brand-sub{letter-spacing:.06em}
}
@media (max-width:419px){
  /* Two rows rather than a sub-line broken across lines. */
  .top{flex-wrap:wrap;row-gap:12px}
  .brand{flex:1 1 100%}
  .top-right{margin-left:auto}
}