/* ChairSesh design system - "vintage barbershop, modern edit"
   Rye (display, decorative headlines only) + Instrument Sans (everything else).
   Warm cream/charcoal base, oxblood accent, mustard secondary. No purple gradients,
   no centered-hero-card-grid default. Built for chairsesh.com, first metro: Tulsa. */

@import url('https://fonts.googleapis.com/css2?family=Rye&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root{
  --cream:      #f6ede0;
  --cream-2:    #efe2ca;
  --paper:      #fffaf1;
  --ink:        #241c14;
  --ink-soft:   #5b4d3c;
  --line:       #ddccab;
  --oxblood:    #7c2a24;
  --oxblood-ink:#fff3ea;
  --oxblood-2:  #9c3b2f;
  --mustard:    #c9922f;
  --mustard-ink:#241c14;
  --pine:       #2f4a3c;
  --radius:     4px;
  --radius-lg:  10px;
  --shadow-card: 0 1px 0 var(--line), 0 14px 30px -18px rgba(36,28,20,.45);
  --stripe-w:   14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --cream:      #1c1712;
    --cream-2:    #251e17;
    --paper:      #221b15;
    --ink:        #f3e8d6;
    --ink-soft:   #c9b79c;
    --line:       #3c3024;
    --oxblood:    #e2685a;
    --oxblood-ink:#241c14;
    --oxblood-2:  #c94f3f;
    --mustard:    #e6b354;
    --mustard-ink:#241c14;
    --pine:       #7fae96;
    --shadow-card: 0 1px 0 var(--line), 0 18px 34px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --cream:#1c1712; --cream-2:#251e17; --paper:#221b15; --ink:#f3e8d6; --ink-soft:#c9b79c;
  --line:#3c3024; --oxblood:#e2685a; --oxblood-ink:#241c14; --oxblood-2:#c94f3f;
  --mustard:#e6b354; --mustard-ink:#241c14; --pine:#7fae96;
  --shadow-card: 0 1px 0 var(--line), 0 18px 34px -18px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --cream:#f6ede0; --cream-2:#efe2ca; --paper:#fffaf1; --ink:#241c14; --ink-soft:#5b4d3c;
  --line:#ddccab; --oxblood:#7c2a24; --oxblood-ink:#fff3ea; --oxblood-2:#9c3b2f;
  --mustard:#c9922f; --mustard-ink:#241c14; --pine:#2f4a3c;
  --shadow-card: 0 1px 0 var(--line), 0 14px 30px -18px rgba(36,28,20,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 17px/1.6 "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(36,28,20,.05) 1px, transparent 0);
  background-size: 22px 22px;
}
:root[data-theme="dark"] body, @media (prefers-color-scheme: dark){ body{
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
}}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;letter-spacing:-.01em}
a{color:inherit}
.serif{font-family:"Rye",ui-serif,serif; font-weight:400; letter-spacing:.01em}

/* ---------- barber-pole stripe, the recurring signature motif ---------- */
.stripe{
  height:var(--stripe-w);
  background:repeating-linear-gradient(-45deg,
    var(--oxblood) 0 var(--stripe-w), var(--cream) var(--stripe-w) calc(var(--stripe-w) * 2),
    var(--mustard) calc(var(--stripe-w) * 2) calc(var(--stripe-w) * 3), var(--cream) calc(var(--stripe-w) * 3) calc(var(--stripe-w) * 4));
  background-size: 56px 56px;
}

/* ---------- header ---------- */
header.top{padding:22px 0; position:relative; z-index:3}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.brand span{font-family:"Rye",serif; font-size:26px; color:var(--ink)}
.brand .dot{color:var(--oxblood)}

/* ---------- hero: asymmetric, illustrated, not centered ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;
  padding:36px 0 56px; position:relative; z-index:2;
}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; padding-bottom:28px} }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:"Rye",serif; font-size:14px;
  letter-spacing:.06em; color:var(--oxblood-ink); background:var(--oxblood);
  padding:7px 14px 6px; border-radius:999px; transform:rotate(-1.5deg);
  box-shadow:0 6px 0 -3px rgba(0,0,0,.15);
}
.hero h1{
  font-size:clamp(40px,6.4vw,74px); line-height:.98; margin:20px 0 18px; max-width:11ch;
}
.hero h1 em{font-style:normal; color:var(--oxblood); position:relative; display:inline-block}
.hero h1 em svg.scribble{position:absolute; left:0; bottom:-.14em; width:100%; height:.28em; color:var(--mustard)}
.hero .lede{font-size:19px; color:var(--ink-soft); max-width:46ch; margin:0 0 28px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; font:600 16px/1 "Instrument Sans",sans-serif;
  padding:15px 26px; border-radius:999px; text-decoration:none; cursor:pointer; border:2px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--oxblood); color:var(--oxblood-ink); border-color:var(--oxblood)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--cream)}
.hero-note{font-size:13px; color:var(--ink-soft); margin-top:10px}

.hero-art{position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto}
.hero-art svg{width:100%; height:100%}
.hero-scatter{position:absolute; inset:-40px -10% auto auto; width:60%; opacity:.5; color:var(--ink-soft); z-index:1; pointer-events:none}

.stat-row{
  display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--line);
}
.stat{
  flex:1; min-width:150px; padding:16px 24px; border-right:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
.stat:last-child{border-right:0}
.stat svg{width:22px;height:22px; color:var(--oxblood); flex:none}
.stat b{display:block; font-family:"Rye",serif; font-size:15px}
.stat span{display:block; font-size:12.5px; color:var(--ink-soft)}

/* ---------- section shells ---------- */
section{position:relative}
.section-head{max-width:56ch; margin:0 auto 34px; text-align:center}
.section-head .tag{
  font-family:"Rye",serif; color:var(--oxblood); font-size:14px; letter-spacing:.08em;
}
.section-head h2{font-size:clamp(28px,3.6vw,42px); margin:8px 0 10px}
.section-head p{color:var(--ink-soft); font-size:16px}

/* ---------- shop cards: offset, ticket-stub styling, icon-led ---------- */
.shops{padding:64px 0}
.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px;
}
.shop-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 22px 20px; box-shadow:var(--shadow-card); position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.shop-grid .shop-card:nth-child(2n){transform:rotate(.4deg)}
.shop-grid .shop-card:nth-child(3n){transform:rotate(-.5deg)}
.shop-card:hover{transform:translateY(-4px) rotate(0deg); box-shadow:0 1px 0 var(--line), 0 22px 40px -18px rgba(36,28,20,.55)}
.shop-card .perf{
  position:absolute; top:0; left:22px; right:22px; height:1px;
  background-image:linear-gradient(90deg, var(--line) 60%, transparent 0);
  background-size:8px 1px; opacity:.9;
}
.shop-icon{
  width:44px;height:44px; border-radius:50%; background:var(--cream-2); display:flex;
  align-items:center; justify-content:center; margin-bottom:12px; color:var(--oxblood);
}
.shop-icon svg{width:24px;height:24px}
.shop-card h3{font-family:"Rye",serif; font-size:21px; margin-bottom:2px}
.shop-card .hood{font-size:13.5px; color:var(--ink-soft); margin-bottom:12px}
.tag-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:999px; background:var(--cream-2); color:var(--ink-soft);
  border:1px solid var(--line);
}
.tag svg{width:12px;height:12px}
.soon{
  font-size:13px; color:var(--pine); font-weight:600; display:flex; align-items:center; gap:6px;
}
.soon svg{width:14px;height:14px}

/* ---------- explainer, editorial two-col ---------- */
.explainer{padding:20px 0 70px}
.explainer .inner{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px; position:relative;
}
@media (max-width:760px){ .explainer .inner{grid-template-columns:1fr} }
.explainer .big-num{font-family:"Rye",serif; font-size:clamp(48px,8vw,88px); color:var(--oxblood); line-height:.8}
.explainer h2{font-size:26px; margin:6px 0 0}
.explainer p{color:var(--ink-soft); font-size:16px}

/* ---------- waitlist: full-bleed color block ---------- */
.waitlist{
  background:var(--ink); color:var(--cream); padding:70px 0; text-align:center; position:relative;
  overflow:hidden;
}
:root[data-theme="dark"] .waitlist, @media (prefers-color-scheme:dark){ .waitlist{background:var(--paper)} }
.waitlist .ring{
  position:absolute; border:1.5px solid rgba(246,237,224,.14); border-radius:50%;
}
.waitlist h2{font-family:"Rye",serif; font-size:clamp(30px,4.5vw,50px); color:var(--mustard); margin-bottom:10px}
.waitlist p{color:rgba(246,237,224,.75); max-width:50ch; margin:0 auto 28px; font-size:16.5px}
form.wl{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:0 auto; position:relative; z-index:2}
form.wl input[type=email]{
  flex:1; min-width:220px; padding:15px 18px; border-radius:999px; border:2px solid rgba(246,237,224,.25);
  background:rgba(246,237,224,.06); color:var(--cream); font-size:15px; font-family:inherit;
}
form.wl input[type=email]::placeholder{color:rgba(246,237,224,.45)}
form.wl input[type=email]:focus{outline:none; border-color:var(--mustard)}
.waitlist .btn-primary{background:var(--mustard); border-color:var(--mustard); color:var(--mustard-ink)}
.waitlist .btn-primary:hover{box-shadow:4px 4px 0 var(--cream)}
.fineprint{font-size:12.5px; color:rgba(246,237,224,.5); margin-top:14px}
.thanks{display:none; font-weight:700; color:var(--mustard); position:relative; z-index:2}

/* ---------- footer ---------- */
footer{padding:34px 0 60px; font-size:13.5px; color:var(--ink-soft)}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ---------- reveal-on-load motion ---------- */
[data-reveal]{opacity:0; transform:translateY(14px); animation:reveal .7s cubic-bezier(.16,1,.3,1) forwards; animation-play-state:paused}
[data-reveal].go{animation-play-state:running}
@keyframes reveal{to{opacity:1; transform:translateY(0)}}

@media (max-width:520px){
  .wrap{padding:0 18px}
  .explainer .inner{padding:26px}
  .cta-row{flex-direction:column; align-items:stretch}
  .btn{justify-content:center}
}