/* Barbix landing site — hand-written, no build step, no external requests.
   Palette mirrors apps/mobile/tailwind.config.js (cream #FAFAF8, gold #D4A15A, ink #1C1C1E). */

:root {
  --ink: #14110e;
  --ink-raised: #1b1712;
  --ink-line: rgba(255, 255, 255, 0.09);
  --text: #1c1c1e;
  --text-soft: #34343a;
  --muted: #6b7280;
  --cream: #fafaf8;
  --sand: #f3efe7;
  --paper: #ffffff;
  --line: #e5e1da;
  --gold: #d4a15a;
  --gold-bright: #e3b877;
  --gold-deep: #b8863f;
  --gold-ink: #8a6226; /* gold dark enough for small text on cream (AA) */
  --on-dark: #f4efe6;
  --on-dark-muted: #aaa293;

  --radius: 18px;
  --maxw: 1120px;
  --header-h: 68px;

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(100% - 48px, var(--maxw));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--gold);
  color: #1d1408;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Type helpers ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.on-dark .eyebrow,
.hero .eyebrow {
  color: var(--gold);
}

.serif {
  font-family: var(--font-serif);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: inherit;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.section-head h2 {
  margin-top: 16px;
}

.section-head p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.1rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.9rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.95rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-sm {
  padding: 0.62rem 1.2rem;
  font-size: 0.875rem;
}

.btn-gold {
  color: #1d1408;
  background: linear-gradient(180deg, var(--gold-bright), #c99447);
  box-shadow: 0 8px 24px -10px rgba(212, 161, 90, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(212, 161, 90, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-outline {
  color: var(--text);
  border-color: var(--line);
  background: var(--paper);
}

.btn-outline:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(20, 17, 14, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(20, 17, 14, 0.97);
  border-bottom-color: var(--ink-line);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--on-dark);
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(212, 161, 90, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 161, 90, 0.12);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: 8px;
}

.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--on-dark);
}

.nav a:hover::after {
  transform: scaleX(1);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(55% 60% at 24% 42%, rgba(212, 161, 90, 0.2), transparent 70%),
    radial-gradient(40% 45% at 96% 0%, rgba(212, 161, 90, 0.1), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #100d0a 100%);
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px;
  padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px);
}

.hero h1 {
  margin-top: 22px;
  font-size: clamp(3rem, 7.4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.hero .lead {
  max-width: 520px;
  margin-top: 28px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.store-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-width: 176px;
  padding: 0.8rem 1.4rem;
  border: 1px solid rgba(212, 161, 90, 0.38);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark);
  cursor: default;
}

.store-badge small {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.store-badge strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  order: -1; /* logo on the left; the text stays first in the HTML for reading order */
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 161, 90, 0.28), transparent);
  filter: blur(30px);
}

.emblem {
  position: relative;
  width: min(100%, 560px);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

.emblem > img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- The scissors ----------
   The logo's own scissors, cut into two halves by tools/extract-scissors.mjs, plus the part of each
   that the moustache hides in the artwork. At rest they sit exactly where they were drawn; main.js
   lifts them out as you scroll. The numbers are that script's output (bounding box and pivot, as a
   percentage of the full logo) — keep them in step with REST_* in main.js. */

.shears {
  position: absolute;
  left: 36.649%;
  top: 29.276%;
  width: 27.923%;
  aspect-ratio: 320 / 397;
  pointer-events: none;
}

.shears-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50.295% 52.143%; /* the pivot screw */
  will-change: transform;
}

/* Hidden behind the moustache in the logo, so invisible until the scissors have left it. */
.shears .bars-a,
.shears .bars-b {
  opacity: var(--bars, 0);
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding-block: 26px;
  border-top: 1px solid var(--ink-line);
  font-size: 0.92rem;
  color: var(--on-dark-muted);
}

.proof li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.proof li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Barber-pole accent along the base of the hero */
.pole {
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 12px, #f1e6d2 12px 24px, #2a241b 24px 36px);
  opacity: 0.9;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(72px, 10vw, 128px);
}

.section--sand {
  background: var(--sand);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 161, 90, 0.6);
  box-shadow: 0 24px 40px -28px rgba(80, 56, 20, 0.35);
}

.icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
  border-radius: 14px;
  color: var(--gold-ink);
  background: linear-gradient(180deg, #fbf3e4, #f3e3c3);
  border: 1px solid rgba(212, 161, 90, 0.45);
}

.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 1rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-top: 24px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.step::before {
  content: "0" counter(step);
  counter-increment: step;
  position: absolute;
  top: -1px;
  left: 0;
  padding-right: 16px;
  transform: translateY(-62%);
  background: var(--sand);
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  font-style: italic;
  color: var(--gold-deep);
}

.step h3 {
  margin: 22px 0 10px;
}

.step p {
  color: var(--muted);
}

.note {
  max-width: 640px;
  margin-top: 56px;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  color: var(--text-soft);
  font-size: 1rem;
}

/* ---------- Shops band ---------- */

.shops {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: 40px;
  padding: clamp(36px, 6vw, 72px);
  border-radius: 28px;
  color: var(--on-dark);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(212, 161, 90, 0.24), transparent 70%),
    linear-gradient(180deg, var(--ink-raised), var(--ink));
  border: 1px solid rgba(212, 161, 90, 0.3);
}

.shops h2 {
  margin-top: 16px;
}

.shops p {
  margin-top: 18px;
  max-width: 560px;
  color: var(--on-dark-muted);
}

.shops .btn {
  justify-self: end;
}

/* ---------- Footer ---------- */

.site-footer {
  color: var(--on-dark-muted);
  background: linear-gradient(180deg, #100d0a, var(--ink));
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.6fr));
  gap: 48px;
  padding-block: 72px 56px;
}

.footer-brand .brand {
  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 340px;
  font-size: 0.97rem;
}

.footer-col h2 {
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-col li + li {
  margin-top: 12px;
}

.footer-col a {
  font-size: 0.97rem;
  color: var(--on-dark);
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s ease, color 0.2s ease;
  padding-bottom: 2px;
}

.footer-col a:hover {
  background-size: 100% 1px;
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 24px 36px;
  border-top: 1px solid var(--ink-line);
  font-size: 0.86rem;
}

.footer-bottom .tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
}

/* ---------- Inner pages ---------- */

.page-hero {
  padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 56px);
  background:
    radial-gradient(50% 120% at 90% 0%, rgba(212, 161, 90, 0.16), transparent 70%),
    var(--cream);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  margin-top: 18px;
  max-width: 14ch;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.04;
}

.page-hero .lede {
  max-width: 620px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.15rem;
}

.updated {
  display: inline-block;
  margin-top: 28px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.82rem;
  color: var(--muted);
}

.legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  padding-block: clamp(48px, 7vw, 88px) clamp(72px, 10vw, 120px);
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 64px);
  overflow: auto;
  padding-right: 8px;
}

.toc-title {
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.toc ol {
  counter-reset: toc;
  border-left: 1px solid var(--line);
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 16px;
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.toc a::before {
  content: counter(toc) ". ";
  font-variant-numeric: tabular-nums;
}

.toc a:hover {
  color: var(--text);
}

.toc a.is-active {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--gold);
}

.prose {
  max-width: 720px;
  counter-reset: sec;
  color: var(--text-soft);
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose .summary {
  padding: 22px 26px;
  border: 1px solid rgba(212, 161, 90, 0.45);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffaf0, #fbf3e2);
  color: var(--text);
  font-size: 1.02rem;
}

.prose .summary strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.prose h2 {
  counter-increment: sec;
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  color: var(--text);
}

.prose h2:first-of-type {
  margin-top: 2em;
}

.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}

.prose h3 {
  margin-top: 1.8em;
  font-size: 1.12rem;
  color: var(--text);
}

.prose ul {
  display: grid;
  gap: 0.6em;
  padding-left: 0;
}

.prose li {
  position: relative;
  padding-left: 26px;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.prose a {
  color: var(--gold-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--text);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-block: clamp(48px, 7vw, 88px);
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
}

.contact-card p {
  margin-bottom: 28px;
}

.contact-card .btn {
  margin-top: auto;
}

.contact-foot {
  margin-bottom: clamp(72px, 10vw, 120px);
  padding: 28px 32px;
  border: 1px dashed rgba(212, 161, 90, 0.7);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.7);
  color: var(--text-soft);
  font-size: 0.98rem;
}

.contact-foot a {
  color: var(--gold-ink);
  font-weight: 600;
}

/* ---------- Scroll-linked scissors (driven by main.js; decorative only) ----------
   The scissors rest in the logo (see .shears above). As you scroll, the script moves them into this
   fixed layer and glides them to the page's left margin, where they snip along a dashed cut-line.
   Their position and size are set inline by the script. */

.snip {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.snip .shears {
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.34));
}

.snip-line {
  position: absolute;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, rgba(212, 161, 90, 0.75) 0 7px, transparent 7px 15px);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
  opacity: 0;
}

@media print {
  .snip {
    display: none;
  }
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-art {
    order: -1;
    max-width: 440px;
    margin-inline: auto;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .shops {
    grid-template-columns: 1fr;
  }

  .shops .btn {
    justify-self: start;
  }

  .legal {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .toc {
    position: static;
    max-height: none;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .nav {
    display: none;
  }

  .header-inner {
    justify-content: space-between;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .card,
  .contact-card {
    padding: 28px;
  }

  .store-badge {
    flex: 1 1 100%;
  }
}

@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }

  .legal {
    display: block;
  }
}