/* Fadehouse Barber Co. , two inks on cream, set inside Reyna's poster system.
   Inks: #211915 (black), #6E1423 (oxblood). Paper: #F3EBDD. Card: #FFFDF6. */

:root {
  --paper: #F3EBDD;
  --card: #FFFDF6;
  --ink: #211915;
  --ox: #6E1423;
  --ox-deep: #57101C;
  /* Neutrals corrected against the photographs themselves. PIL medianCut on the
     Russell Lee master (7641x5804) returns a warm-shadow / cool-highlight silver
     print: #272523 10.8%, #2e2d2b 14.0%, #353432 12.9%, #5d5c59 10.4%,
     #85847f 10.8%, #b5b5b3 13.8%, #c7c6c8 13.4%. The two inks and the paper are
     Dre's (he matched the wall to Reyna's poster ink) and outrank all of it, so
     the sample is spent only on the greys and on the toning of the prints. */
  --ash: #5D5C59;    /* sampled mid-tone, secondary text */
  --stone: #85847F;  /* sampled, hairlines on the plate */
  --rule: rgba(33, 25, 21, 0.25);
  --display: "Big Shoulders Display", "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  --body: "Barlow", "Franklin Gothic Book", Arial, sans-serif;
  /* size ladder: 15 / 17 / 20 / 26 / 40 / 64 / clamp hero */
  /* Vertical rhythm (local trade, poster wall): tight packs the boards,
     base is the walking beat between posters, grand (1.7x) is spent twice:
     before the anniversary posters (the shop's founding trade) and before
     the booking ask. Printed rules + the oxblood band carry the alternation. */
  --beat-tight: 1.5rem;
  --beat-base: 7rem;
  --beat-grand: 12rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
[id] { scroll-margin-top: 5.5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ox); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ox-deep); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ox);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 99; text-decoration: none;
}
.skip:focus { left: 0; color: var(--paper); }

/* ---------- for-sale banner ---------- */
.forsale {
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  text-align: center;
  padding: 0.5rem 1rem;
}
.forsale a { color: var(--paper); }

/* ---------- frame ---------- */
.frame {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  max-width: 1440px;
  margin: 0 auto;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}

/* ---------- the board (rail) ---------- */
.board {
  background: var(--ink);
  color: var(--paper);
  border-right: 2px solid var(--ink);
}
.board-inner {
  position: sticky;
  top: 0;
  padding: 2rem 1.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-height: 100vh;
  overflow-y: auto;
}
.logo-block { border: 3px solid var(--paper); padding: 1rem 1.1rem 0.85rem; }
.logo-block .wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: 0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  display: block;
}
.logo-block .co {
  display: block;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 0.45rem;
  color: #D9CDBE;
}
.board h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.06em;
  border-bottom: 1px dashed rgba(243, 235, 221, 0.45);
  padding-bottom: 0.4rem;
  margin-bottom: 0.65rem;
}
.board dl { font-size: 15px; }
.board dt { color: #D9CDBE; text-transform: uppercase; font-size: 13px; letter-spacing: 0.14em; margin-top: 0.7rem; }
.board dd { margin: 0.1rem 0 0; }
.board .phone {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-decoration: none;
}
.board .phone:hover { text-decoration: underline; }
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  padding: 0.8rem 1.4rem;
  border: 3px solid var(--ox);
  background: var(--ox);
  color: #F3EBDD;
  transition: transform 80ms ease, background 120ms ease;
}
.btn:hover { color: #F3EBDD; }
.btn:active { transform: translateY(2px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.board .btn { display: block; }
.board-note { font-size: 15px; color: #D9CDBE; }

/* ---------- main column ---------- */
main { background: var(--paper); min-width: 0; }
.section { padding: calc(var(--beat-base) / 2) 4rem; border-bottom: 2px solid var(--ink); }
.section:last-of-type { border-bottom: 0; }
/* hero→prices glued at ~0.5x base: the sign, then the price board right under it */
.hero-section { padding-top: 4rem; padding-bottom: 1.75rem; }
.hero-section + .section { padding-top: 1.75rem; }
/* grand pauses, spent BEFORE the payoff */
.section.grand { padding-top: calc(var(--beat-grand) - var(--beat-base) / 2); }
/* the oxblood rules band is a ribbon: half-padding, it interrupts, it does not breathe */
.section.rules { padding-top: 3rem; padding-bottom: 3rem; }
/* pre-footer compresses to ~0.8x base; the dark footer does its own closing work */
.section.pullup { padding-bottom: 2.5rem; }

.kicker {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ox);
  font-weight: 600;
  margin-bottom: 0.8rem;
}
h1, .h-display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.005em;
}
h2.h-display { font-size: 64px; margin-bottom: 1rem; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; }
.hero h1 { font-size: clamp(56px, 7.2vw, 104px); margin: 0.2rem 0 1.4rem; }
.hero h1 .ox { color: var(--ox); }
.hero .lede { font-size: 20px; max-width: 34em; }
.hero .lede + .lede { margin-top: 0.9rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* framed prints */
.print { background: var(--card); border: 2px solid var(--ink); padding: 0.9rem; box-shadow: 6px 6px 0 var(--ox); }
.print figcaption { padding-top: 0.75rem; font-size: 15px; }
.print .credit { display: block; font-size: 13px; color: var(--ash); margin-top: 0.35rem; }
.tilt { transform: rotate(-1.2deg); transition: transform 150ms ease; }
.tilt:nth-child(even) { transform: rotate(1deg); }
.tilt:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .tilt, .tilt:nth-child(even) { transform: none; } }

/* price board */
.pricecard {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ox);
  padding: 2.5rem 2.75rem;
  max-width: 720px;
}
.pricecard h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 26px; letter-spacing: 0.05em; color: var(--ox);
  border-bottom: 2px solid var(--ink); padding-bottom: 0.6rem; margin-bottom: 1.1rem;
}
.pricerow { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.35rem 0; } /* density zone: the price board runs a micro-beat */
.pricerow .name { font-weight: 600; }
.pricerow .dots { flex: 1; border-bottom: 2px dotted var(--rule); }
.pricerow .amt { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: 0.03em; }
.pricerow .sub { font-size: 15px; color: var(--ash); display: block; font-weight: 400; }
.price-note { margin-top: 1.4rem; font-size: 15px; border-top: 1px dashed var(--rule); padding-top: 1rem; }
.price-flank { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; align-items: start; }

/* chairs */
.chairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 2px solid var(--ink); background: var(--card); }
.chair { padding: 2rem 2.25rem; border: 1px solid var(--ink); }
.chair .num {
  font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1;
  color: var(--ox);
}
.chair h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: 0.04em; margin: 0.4rem 0 0.1rem; }
.chair .role { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 0.7rem; }
.chair p { font-size: 15px; }

/* wall */
.wall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--beat-tight) 2rem; margin-top: 2rem; } /* density zone: prints hang close, like a real wall */
.wall-intro { max-width: 40em; font-size: 20px; }

/* posters strip */
.posters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.5rem; align-items: end; }
.poster svg { width: 100%; height: auto; display: block; border: 2px solid var(--ink); background: var(--card); }
.poster figcaption { font-size: 13px; margin-top: 0.5rem; color: var(--ash); }

/* rules band */
.rules { background: var(--ox); color: #F3EBDD; }
.rules .kicker { color: #F3EBDD; }
.rules h2 { color: #F3EBDD; }
.rules ol { list-style: none; counter-reset: rule; max-width: 46em; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px dashed rgba(255, 246, 236, 0.4); font-size: 20px; }
.rules li:last-child { border-bottom: 0; }
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1;
  color: #F3EBDD;
}
.rules a { color: #F3EBDD; }

/* pull up */
.pullup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.pullup h2 { margin-bottom: 1.5rem; }
.bigphone {
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: 0.02em;
  color: var(--ox); text-decoration: none;
  border-bottom: 4px solid var(--ox);
  line-height: 1.15;
  margin: 0.6rem 0 1rem;
}
.bigphone:hover { color: var(--ox-deep); border-color: var(--ox-deep); }
.hourslist { border: 2px solid var(--ink); background: var(--card); padding: 1.75rem 2rem; }
.hourslist h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: 0.05em; margin-bottom: 0.8rem; }
.hourslist table { width: 100%; border-collapse: collapse; font-size: 17px; }
.hourslist td { padding: 0.45rem 0; border-bottom: 1px dashed var(--rule); }
.hourslist tr:last-child td { border-bottom: 0; }
.hourslist td:last-child { text-align: right; font-weight: 600; }
.hourslist .closed { color: var(--ox); font-weight: 600; }

/* footer */
footer { background: var(--ink); color: #D9CDBE; padding: 3.5rem 4rem; font-size: 15px; }
.foot-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
footer h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; color: var(--paper); font-size: 20px; letter-spacing: 0.06em; margin-bottom: 0.7rem; }
footer a { color: var(--paper); }
.voicemail { border-left: 3px solid var(--ox); padding-left: 1.25rem; font-size: 17px; color: var(--paper); max-width: 30em; }
.credits li { margin-bottom: 0.4rem; list-style: none; }
.foot-bottom { max-width: 1440px; margin: 2.5rem auto 0; border-top: 1px dashed rgba(243, 235, 221, 0.35); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* mobile book bar */
.bookbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .section { padding-inline: 2.5rem; }
  h2.h-display { font-size: 48px; }
  .hero { grid-template-columns: 1fr; }
  .hero .print { max-width: 560px; }
  .price-flank { grid-template-columns: 1fr; }
  .price-flank .print { max-width: 420px; }
}

@media (max-width: 1023px) {
  .frame { grid-template-columns: 1fr; border-left: 0; border-right: 0; }
  main { order: 1; }
  .board { order: 2; border-right: 0; border-top: 2px solid var(--ox); }
  .board-inner { position: static; max-height: none; padding: 1.5rem 1.5rem 2rem; }
  .logo-block { align-self: flex-start; }
  .bookbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--paper);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--ox);
  }
  .bookbar .mark { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--paper); text-decoration: none; }
  .bookbar .btn { font-size: 17px; padding: 0.5rem 1rem; }
}

@media (max-width: 760px) {
  :root { --beat-tight: 1.25rem; --beat-base: 5rem; --beat-grand: 8.5rem; }
  .section { padding-inline: 1.25rem; }
  footer { padding: 3rem 1.25rem; }
  h2.h-display { font-size: 40px; }
  .hero h1 { font-size: clamp(44px, 12vw, 64px); }
  .hero .lede { font-size: 17px; }
  .chairs { grid-template-columns: 1fr; }
  .wall-grid { grid-template-columns: 1fr; }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posters .poster:last-child { grid-column: span 2; max-width: 55%; }
  .pullup-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .pricecard { padding: 1.75rem 1.25rem; }
  .pricerow .amt { font-size: 20px; }
  .rules li { font-size: 17px; grid-template-columns: 2.75rem 1fr; }
  .rules li::before { font-size: 26px; }
}


/* =========================================================================
   MOTION: two themes, repeated the whole way down. Nothing else moves.

   THEME 1 — "THE RECLINE."  A barber chair being let down: the element rises
   into place and settles, never bounces. translateY + a hair of rotation
   resolving to zero, one easing (cubic-bezier(.16,.72,.24,1)), one duration.
   Spent on: the hero print, the price board, the four chair cards, the plate
   copy, the four wall prints, Reyna's posters, the hours card.

   THEME 2 — "THE CLIPPER PASS."  A single oxblood line travelling left to
   right across a surface, the way a clipper takes one pass. Spent on: the rule
   above every section heading (on scroll), and the underline under every
   booking action (on hover/focus). Same direction every time, no exceptions.

   Both are scroll-driven where the browser supports it and inert where it does
   not, so the page is complete with JS dead. prefers-reduced-motion kills both
   and leaves every element at its resting state.
   ========================================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* THEME 1 — the recline */
    .hero .print, .pricecard, .price-flank .print, .chair,
    .plate-copy > *, .wall-grid .print, .poster, .hourslist {
      animation: recline linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    /* THEME 2 — the clipper pass */
    .kicker::after {
      animation: clipper-pass linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }
}

@keyframes recline {
  from { opacity: 0; transform: translateY(2.25rem) rotate(0.35deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes clipper-pass {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* the pass rule itself: present with motion off, just already drawn */
.kicker { position: relative; margin-bottom: 1.5rem; }
.kicker::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.55rem;
  width: 5.5rem; height: 3px;
  background: var(--ox);
  transform-origin: left center;
}
.rules .kicker::after { background: #F3EBDD; }
.plate .kicker::after { background: #F6EFE3; }

/* THEME 2, the hover half: the same pass under every booking action */
.phone, .bigphone { position: relative; }
.phone::after, .bigphone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms cubic-bezier(.16,.72,.24,1);
}
.phone:hover::after, .phone:focus-visible::after,
.bigphone:hover::after, .bigphone:focus-visible::after { transform: scaleX(1); }
.phone:hover { text-decoration: none; }
/* the button takes the same pass as a gradient sweep, so the label stays on top */
.btn {
  background-image: linear-gradient(to right, var(--ox-deep), var(--ox-deep));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 240ms cubic-bezier(.16,.72,.24,1), transform 80ms ease;
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; border-color: var(--ox-deep); }
.btn-ghost { background-image: linear-gradient(to right, var(--ink), var(--ink)); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--paper); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .kicker::after { transform: none; }
  .phone::after, .bigphone::after { display: none; }
  .phone:hover, .bigphone:hover { text-decoration: underline; }
  .btn { transition: none; }
}

/* =========================================================================
   THE PLATE — one photograph carrying a whole section, not a framed print.
   Russell Lee, Southside Chicago, 1941, from the master scan.
   ========================================================================= */
.plate {
  position: relative;
  isolation: isolate;
  border-bottom: 2px solid var(--ink);
  background-color: #17120F;
  background-image: url("../assets/room.jpg");
  background-size: cover;
  background-position: 64% 42%;
  min-height: clamp(560px, 78vh, 860px);
  display: flex;
  align-items: center;
  padding: 5rem 4rem;
  color: #F6EFE3;
}
/* scrim: the copy column sits on the darkest third and the scrim guarantees
   the rest. Vignette pulls the eye back to the two barbers. */
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(96deg,
      rgba(20,15,12,0.955) 0%,
      rgba(20,15,12,0.93) 30%,
      rgba(20,15,12,0.74) 46%,
      rgba(20,15,12,0.34) 66%,
      rgba(20,15,12,0.30) 100%),
    radial-gradient(125% 100% at 50% 50%,
      rgba(20,15,12,0) 38%, rgba(20,15,12,0.42) 78%, rgba(20,15,12,0.72) 100%);
}
/* noise, over the darks, so the scrim never reads as flat plastic */
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.plate-copy { max-width: 27rem; }          /* margin of safety around the text */
.plate .kicker { color: #E4D8C6; }
.plate h2.h-display { font-size: clamp(44px, 4.6vw, 68px); margin-bottom: 1.4rem; color: #F6EFE3; }
/* the two inks invert on the plate: cream is the ink, oxblood is the knockout
   block, which is exactly how Reyna prints a reversed line. */
.plate h2 .knock {
  display: inline-block;
  background: var(--ox);
  color: #F6EFE3;
  padding: 0.02em 0.3em 0.1em;
  margin-left: -0.3em;
}
.plate p { font-size: 19px; max-width: 25rem; }
.plate p + p { margin-top: 0.9rem; }
.plate-credit {
  font-size: 14px; color: #CFC6BA; margin-top: 1.6rem;
  border-top: 1px solid rgba(246, 239, 227, 0.3); padding-top: 0.8rem; max-width: 25rem;
}

@media (max-width: 1100px) {
  .plate { padding: 4rem 2.5rem; background-position: 68% 42%; }
}
@media (max-width: 760px) {
  .plate {
    padding: 3.5rem 1.25rem;
    min-height: clamp(520px, 82vh, 700px);
    background-position: 66% 40%;
  }
  /* narrow viewport: the crop gets busier, so the scrim gets heavier */
  .plate::before {
    background:
      linear-gradient(180deg,
        rgba(20,15,12,0.90) 0%, rgba(20,15,12,0.80) 40%,
        rgba(20,15,12,0.88) 72%, rgba(20,15,12,0.955) 100%),
      radial-gradient(120% 90% at 50% 45%,
        rgba(20,15,12,0.28) 30%, rgba(20,15,12,0.62) 80%, rgba(20,15,12,0.85) 100%);
  }
  .plate-copy, .plate p, .plate-credit { max-width: 100%; }
  .plate p { font-size: 17px; }
}