/* ============================================================
   IRON ROOTS COLLECTIVE — design system
   Matte black / warm ivory / deep forest / oxidized bronze
   Mobile-first. No frameworks. No paid dependencies.
   ============================================================ */

:root{
  --black:        #0d0c0a;
  --ink:          #141210;
  --ink-2:        #1b1815;
  --ivory:        #f3ede0;
  --ivory-dim:    #d9cfb8;
  --ivory-faint:  #a89d85;
  --forest:       #1c3a2a;
  --forest-deep:  #10231a;
  --bronze:       #b98a4b;
  --bronze-deep:  #7a5a2e;
  --accent:       #ffb02e;   /* vivid amber — event announcements only */
  --line:         rgba(243,237,224,.14);
  --line-soft:    rgba(243,237,224,.08);
  --shadow:       0 24px 60px rgba(0,0,0,.45);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap: min(1200px, 92vw);
  --radius: 4px;
  --header-h: 72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--bronze); color:var(--black); }

/* film grain over everything */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:2000; pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; left:-999px; top:0; z-index:3000;
  background:var(--ivory); color:var(--black);
  padding:.6rem 1rem; font-weight:700;
}
.skip:focus{ left:0; }

.wrap{ width:var(--wrap); margin-inline:auto; }

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.94;
  font-weight:400;
}
.kicker{
  font-size:.78rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.1rem;
  display:flex; align-items:center; gap:.8rem;
}
.kicker::before{ content:""; width:2.4rem; height:2px; background:var(--bronze); }
.serif-accent{ font-family:var(--font-serif); font-style:italic; font-weight:500; }
.lede{ font-size:clamp(1.1rem, 2.4vw, 1.35rem); color:var(--ivory-dim); max-width:44rem; }

h1.display{ font-size:clamp(3.2rem, 11.5vw, 8.75rem); }
h2.display{ font-size:clamp(2.4rem, 7vw, 4.75rem); }

section{ padding:clamp(4.5rem, 10vw, 8rem) 0; position:relative; }
.section-head{ margin-bottom:clamp(2rem, 5vw, 3.5rem); max-width:60rem; }
.section-head p{ margin-top:1rem; color:var(--ivory-dim); max-width:42rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem;
  font-weight:700; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-bronze{ background:var(--bronze); color:var(--black); }
.btn-bronze:hover{ background:var(--ivory); }
.btn-ghost{ border-color:rgba(243,237,224,.45); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--ivory); background:rgba(243,237,224,.06); }
.btn-ivory{ background:var(--ivory); color:var(--black); }
.btn-ivory:hover{ background:var(--bronze); }
.btn-sm{ padding:.65rem 1.2rem; font-size:.8rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  background:rgba(13,12,10,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; margin-right:auto; }
.monogram{
  font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:.06em;
  border:2px solid var(--bronze); color:var(--ivory);
  width:2.9rem; height:2.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:2px;
  flex:none;
}
.brand-text{ font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; line-height:1.3; }
.brand-text em{ display:block; font-style:normal; color:var(--ivory-faint); font-weight:500; font-size:.68rem; }

.site-nav ul{ display:flex; gap:1.4rem; list-style:none; padding:0; }
.site-nav a{
  text-decoration:none; font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim);
  padding:.4rem 0; border-bottom:2px solid transparent;
}
.site-nav a:hover{ color:var(--ivory); }
.site-nav a[aria-current="page"]{ color:var(--ivory); border-bottom-color:var(--bronze); }
.nav-toggle{ display:none; }

@media (max-width: 1020px){
  .site-nav ul{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(13,12,10,.98);
    border-bottom:1px solid var(--line);
    padding:1rem 4vw 2rem;
    transform:translateY(-120%); transition:transform .28s ease;
  }
  .site-nav.open ul{ transform:translateY(0); }
  .site-nav a{ display:block; padding:1rem 0; font-size:1rem; border-bottom:1px solid var(--line-soft); }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:6px;
    padding:.6rem; margin-left:auto;
  }
  .nav-toggle span{ width:26px; height:2px; background:var(--ivory); transition:.25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .site-header .btn{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  min-height:96svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 3rem) 0 4.5rem;
  position:relative; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(13,12,10,.55) 0%, rgba(13,12,10,.15) 40%, rgba(13,12,10,.88) 100%),
    linear-gradient(100deg, rgba(13,12,10,.75) 0%, rgba(13,12,10,0) 60%);
}
.hero h1{ max-width:12ch; margin:.4rem 0 1.4rem; }
.hero h1 .stroke{
  color:transparent;
  -webkit-text-stroke:2px var(--ivory);
}
.hero .lede{ margin-bottom:0; }
.hero-meta{
  display:flex; gap:2rem; flex-wrap:wrap;
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory-dim);
}
.page-hero{
  min-height:62svh; padding-top:calc(var(--header-h) + 4rem);
}
.page-hero h1{ max-width:14ch; }

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink);
  padding:1.1rem 0;
}
.marquee-track{ display:inline-flex; gap:3rem; animation:scroll 28s linear infinite; }
.marquee span{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:1.4rem; letter-spacing:.06em; color:var(--ivory-dim);
}
.marquee span i{ font-style:normal; color:var(--bronze); margin-right:3rem; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- editorial panels ---------- */
.panels{ display:grid; gap:1.25rem; }
@media (min-width:760px){ .panels{ grid-template-columns:1fr 1fr; } }
.panel{
  position:relative; display:block; text-decoration:none;
  min-height:22rem; overflow:hidden; border-radius:var(--radius);
  isolation:isolate;
}
.panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  filter:saturate(.85) contrast(1.05);
}
.panel::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(185deg, rgba(13,12,10,0) 30%, rgba(13,12,10,.9) 100%);
}
.panel:hover img, .panel:focus-visible img{ transform:scale(1.05); }
.panel-body{ position:absolute; inset:auto 0 0 0; padding:2rem; }
.panel-body .kicker{ margin-bottom:.5rem; }
.panel-body h3{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2rem, 4.5vw, 3rem); line-height:1;
}
.panel-body p{ color:var(--ivory-dim); margin-top:.6rem; max-width:26rem; }
.panel-link{
  display:inline-block; margin-top:1rem;
  font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); border-bottom:1px solid var(--bronze); padding-bottom:.2rem;
}

/* ---------- stats ---------- */
.stats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--ink); padding:2.2rem 1.8rem; }
.stat b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 5vw, 3.6rem); line-height:1; color:var(--ivory);
}
.stat b em{ font-style:normal; color:var(--bronze); }
.stat span{ display:block; margin-top:.7rem; color:var(--ivory-dim); font-size:.95rem; }

/* ---------- event posters ---------- */
.events{ display:grid; gap:1.25rem; }
@media (min-width:820px){ .events{ grid-template-columns:repeat(3,1fr); } }
.event-card{
  background:var(--ink-2); border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:1.8rem;
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .2s ease, border-color .2s ease;
}
.event-card:hover{ transform:translateY(-4px); border-color:rgba(255,176,46,.5); }
.event-date{ font-family:var(--font-display); font-size:1.6rem; text-transform:uppercase; letter-spacing:.04em; }
.event-date small{ display:block; font-family:var(--font-body); font-size:.75rem; letter-spacing:.28em; color:var(--accent); font-weight:700; margin-bottom:.3rem; }
.event-card h3{ font-size:1.25rem; line-height:1.3; }
.event-meta{ color:var(--ivory-dim); font-size:.92rem; display:grid; gap:.25rem; }
.event-meta strong{ color:var(--ivory); font-weight:600; }
.status{
  align-self:flex-start; font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.45rem .9rem; border-radius:99px;
}
.status.open{ background:rgba(255,176,46,.14); color:var(--accent); border:1px solid rgba(255,176,46,.5); }
.status.waitlist{ background:rgba(185,138,75,.14); color:var(--bronze); border:1px solid rgba(185,138,75,.5); }
.status.soldout{ background:rgba(243,237,224,.08); color:var(--ivory-faint); border:1px solid var(--line); }
.event-card .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- split feature ---------- */
.split{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:4rem; } }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.split-media.frame::before{
  content:""; position:absolute; inset:1.2rem -1.2rem -1.2rem 1.2rem;
  border:1px solid var(--bronze); border-radius:var(--radius); z-index:-1;
}
.photo-placeholder{
  aspect-ratio:4/5; border:1px dashed rgba(185,138,75,.6); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  text-align:center; padding:2rem; color:var(--ivory-dim); background:rgba(185,138,75,.05);
}
.photo-placeholder .monogram{ width:4rem; height:4rem; font-size:1.4rem; }

/* ---------- steps ---------- */
.steps{ display:grid; gap:1.25rem; counter-reset:step; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; background:var(--ink);
  counter-increment:step; position:relative;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--font-display); font-size:3rem; color:var(--bronze); opacity:.85;
  display:block; margin-bottom:1rem;
}
.step h3{ font-size:1.3rem; margin-bottom:.6rem; text-transform:uppercase; letter-spacing:.04em; }
.step p{ color:var(--ivory-dim); }

/* ---------- experience list ---------- */
.xp-grid{ display:grid; gap:1.25rem; }
@media (min-width:760px){ .xp-grid{ grid-template-columns:1fr 1fr; } }
.xp{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  display:flex; flex-direction:column; gap:.7rem;
}
.xp .tag{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
}
.xp h3{ font-family:var(--font-display); font-size:1.9rem; text-transform:uppercase; letter-spacing:.02em; }
.xp p{ color:var(--ivory-dim); }
.callout{
  border:1px solid rgba(185,138,75,.55); background:rgba(185,138,75,.07);
  border-radius:var(--radius); padding:2.2rem; margin-top:1.5rem;
  display:grid; gap:1rem;
}
@media (min-width:820px){ .callout{ grid-template-columns:1fr auto; align-items:center; } }
.callout h3{ font-family:var(--font-display); font-size:1.8rem; text-transform:uppercase; }
.callout p{ color:var(--ivory-dim); }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (min-width:900px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-grid figure{ position:relative; overflow:hidden; border-radius:var(--radius); margin:0; }
.gallery-grid img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .7s ease; filter:saturate(.88); }
.gallery-grid figure:hover img{ transform:scale(1.04); }
.gallery-grid figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.4rem 1.2rem .9rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim);
  background:linear-gradient(180deg, transparent, rgba(13,12,10,.85));
}
.gallery-slot{
  aspect-ratio:4/5; border:1px dashed rgba(185,138,75,.55); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.5rem; color:var(--ivory-faint); font-size:.85rem; letter-spacing:.08em;
  background:rgba(185,138,75,.04);
}

/* ---------- forms ---------- */
.tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.tab{
  padding:.85rem 1.4rem; border:1px solid var(--line); border-radius:99px;
  font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-dim);
}
.tab[aria-selected="true"]{ background:var(--bronze); border-color:var(--bronze); color:var(--black); }
.tab:hover{ border-color:var(--bronze); color:var(--ivory); }
.tab[aria-selected="true"]:hover{ color:var(--black); }

.form-panel{ display:none; }
.form-panel.active{ display:block; }
form.inquiry{
  display:grid; gap:1.2rem; max-width:46rem;
  background:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.5rem, 4vw, 2.75rem);
}
.field{ display:grid; gap:.45rem; }
.field-row{ display:grid; gap:1.2rem; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
label{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-dim); }
input, select, textarea{
  font:inherit; color:var(--ivory);
  background:var(--black); border:1px solid var(--line);
  border-radius:var(--radius); padding:.9rem 1rem; width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--bronze); outline-offset:2px; border-color:var(--bronze);
}
textarea{ min-height:7rem; resize:vertical; }
.hp{ position:absolute !important; left:-9999px !important; opacity:0; height:0; width:0; }
.form-note{ font-size:.85rem; color:var(--ivory-faint); }
.form-success{
  border:1px solid rgba(185,138,75,.6); background:rgba(185,138,75,.08);
  border-radius:var(--radius); padding:2.5rem; max-width:46rem;
}
.form-success h3{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; margin-bottom:.8rem; }
.direct-contact{
  display:grid; gap:1rem; margin-top:2.5rem; max-width:46rem;
}
.direct-contact a{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem;
  background:var(--ink);
}
.direct-contact a:hover{ border-color:var(--bronze); }
.direct-contact small{ display:block; color:var(--ivory-faint); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; }
.direct-contact strong{ font-size:1.1rem; }

/* ---------- band / final CTA ---------- */
.band{ background:var(--forest-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band h2 .serif-accent{ color:var(--bronze); }
.final-cta{ text-align:center; }
.final-cta h2{ font-size:clamp(2.6rem, 8vw, 5.5rem); max-width:16ch; margin-inline:auto; }
.final-cta .btn-row{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:#0a0908; padding:4.5rem 0 2rem; }
.footer-grid{ display:grid; gap:2.5rem; margin-bottom:3rem; }
@media (min-width:900px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-brand p{ color:var(--ivory-dim); max-width:26rem; margin-top:1rem; }
.footer-brand .tagline{ font-family:var(--font-serif); font-style:italic; color:var(--bronze); font-size:1.15rem; }
.footer-nav h4, .footer-contact h4{
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-faint); margin-bottom:1.1rem;
}
.footer-nav ul{ list-style:none; padding:0; display:grid; gap:.55rem; }
.footer-nav a{ text-decoration:none; color:var(--ivory-dim); font-size:.95rem; }
.footer-nav a:hover{ color:var(--ivory); }
.footer-contact a.mail{ color:var(--ivory); text-decoration:none; font-weight:600; border-bottom:1px solid var(--bronze); }
.socials{ display:flex; gap:.7rem; margin-top:1.2rem; flex-wrap:wrap; }
.socials a{
  width:2.6rem; height:2.6rem; border:1px solid var(--line); border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--ivory-dim);
}
.socials a:hover{ border-color:var(--bronze); color:var(--ivory); }
.socials-note{ font-size:.8rem; color:var(--ivory-faint); margin-top:.8rem; }
.footer-legal{
  border-top:1px solid var(--line-soft); padding-top:1.8rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  font-size:.82rem; color:var(--ivory-faint);
}
.footer-legal nav{ display:flex; gap:1.5rem; }
.footer-legal a{ color:var(--ivory-faint); text-decoration:none; }
.footer-legal a:hover{ color:var(--ivory); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- prose pages ---------- */
.prose{ max-width:46rem; }
.prose h2{ font-family:var(--font-display); text-transform:uppercase; font-size:1.8rem; margin:2.2rem 0 .8rem; }
.prose p{ color:var(--ivory-dim); margin-bottom:1.1rem; }
.prose ul{ color:var(--ivory-dim); padding-left:1.2rem; display:grid; gap:.5rem; }
.founder-card{
  display:grid; gap:2rem; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.75rem); background:var(--ink); margin-top:2.5rem;
}
@media (min-width:820px){ .founder-card{ grid-template-columns:280px 1fr; } }
.founder-card h3{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; }
.founder-card .role{ color:var(--bronze); font-size:.8rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; margin:.4rem 0 1rem; }
.founder-card p{ color:var(--ivory-dim); }
.values{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem; }
@media (min-width:760px){ .values{ grid-template-columns:repeat(4,1fr); } }
.value{ background:var(--ink); padding:1.8rem 1.5rem; }
.value h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.3rem; margin-bottom:.5rem; color:var(--bronze); }
.value p{ color:var(--ivory-dim); font-size:.92rem; }