/* =================================================================
   DIY / nerdy live-events AV site
   Fonts: Times New Roman (display), Archivo (UI/body), mono (code bits)
   Palette: paper + ink + one highlight
   ================================================================= */

:root {
  --paper:   #f3f1e9;   /* off-white photocopy paper */
  --paper-2: #e9e6db;   /* slightly darker panel */
  --ink:     #161616;   /* near-black */
  --ink-2:   #4a4a44;   /* muted ink */
  --hi:      #bd451b;    /* highlight — matches the rust/terracotta logo */
  --hi-2:    #1f7a4d;    /* terminal green (for mono accents) */
  --line:    #161616;
  --maxw:    1040px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  /* subtle photocopy grain */
  background-image:
    radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

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

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--hi); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- top terminal strip ---------- */
.ticker {
  background: var(--ink);
  color: var(--paper);
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
}
.ticker .wrap { display: flex; gap: 28px; }
.ticker b { color: var(--hi); font-weight: 700; }

/* ---------- header / nav ---------- */
.masthead {
  border-bottom: 3px solid var(--ink);
  background: var(--hi);   /* logo orange */
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 58px; width: auto; }
.brand .name {
  font-family: "Archivo", sans-serif;   /* match the nav below */
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;   /* white on orange header */
}
.brand .tag {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* nav bar — single bar, no dropdowns */
nav.bar { width: 100%; border-top: 1px dashed rgba(255,255,255,0.5); }
nav.bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
}
nav.bar a {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  padding: 12px 18px 12px 0;
  margin-right: 18px;
}
nav.bar a::before { content: "/ "; color: rgba(255,255,255,0.6); }
nav.bar a.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
nav.bar a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  border-bottom: 3px solid var(--line);
  padding: 46px 0 40px;
}
.hero h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(40px, 8vw, 78px);
  line-height: 0.98;
  margin: 0 0 18px;
  font-weight: 700;
}
.hero p.lede {
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 640px;
  margin: 0 0 26px;
}
.kicker {
  font-family: "Space Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi);
  margin: 0 0 14px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  text-decoration: none;
  background: var(--hi);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 12px 22px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { color: #fff; transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--ink); }
.btn.alt { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.btn.alt:hover { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- sections ---------- */
section { padding: 46px 0; border-bottom: 3px solid var(--line); }
section h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(28px, 5vw, 44px);
  margin: 0 0 8px;
}
/* a section heading sized + cased like the hero h1 (e.g. "The Setup") */
section h2.h2-display {
  font-size: clamp(40px, 8vw, 78px);
  line-height: 0.98;
  font-weight: 700;
}
.section-label {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.section-label::before { content: "// "; color: var(--hi); }

/* ---------- grid cards ---------- */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
/* fixed-column variants so cards stay even */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-5 { grid-template-columns: 1fr; }
}
.card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 22px;
}
/* square cards — keep content centered in the box.
   min-height keeps them square but lets a card grow if text needs more room
   (so nothing gets clipped). */
.grid-square .card {
  aspect-ratio: 1 / 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the 5-across "setup" row is narrow — tighten type so it fits the square */
.grid-5.grid-square .card { padding: 16px; }
.grid-5.grid-square .card h3 { font-size: 15px; margin-bottom: 6px; }
.grid-5.grid-square .card p  { font-size: 13px; line-height: 1.4; }
.grid-5.grid-square .card .num { font-size: 12px; margin-bottom: 8px; }

/* ---------- conveyor belt (auto-scroll + manual scroll) ---------- */
.belt-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.belt {
  flex: 1 1 auto;
  overflow-x: auto;            /* manual scroll / swipe / trackpad */
  scrollbar-width: none;        /* hide scrollbar (Firefox) */
  -ms-overflow-style: none;
  cursor: grab;
  /* fade edges so cards slide in/out softly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.belt::-webkit-scrollbar { display: none; }   /* hide scrollbar (WebKit) */
.belt.dragging { cursor: grabbing; }
.belt:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }

.belt-track {
  display: flex;
  width: max-content;
}
.belt-card {
  flex: 0 0 280px;     /* fixed card width on the belt */
  width: 280px;
  margin-right: 22px;  /* spacing as margin */
  aspect-ratio: 1 / 1; /* keep them square */
  background: var(--paper-2);     /* match the form panel color */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;    /* headers sit up top, less empty space */
  padding: 22px;
  user-select: none;              /* so dragging doesn't select text */
}
.belt .belt-card .num { font-size: 13px; margin-bottom: 6px; }
.belt .belt-card h3 { font-size: 24px; margin-bottom: 10px; }
.belt .belt-card p  { font-size: 15px; line-height: 1.5; }

/* bracket arrows on the sides */
.belt-arrow {
  flex: 0 0 auto;
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  padding: 8px 4px;
  transition: color .1s ease, transform .1s ease;
}
.belt-arrow:hover { color: var(--hi); transform: scale(1.15); }
.belt-arrow:active { transform: scale(0.95); }
.belt-arrow:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }

@media (max-width: 560px) {
  .belt-card { flex-basis: 230px; width: 230px; }
  .belt-arrow { font-size: 22px; }
}
/* on phones (single column) squares get too tall — let them size to content */
@media (max-width: 560px) {
  .grid-square .card { aspect-ratio: auto; }
}

/* horizontal rectangle cards (Services on home) — same look as the belt:
   form-panel background, header up top, bigger type, wide-not-tall shape */
.grid-rect .card {
  background: var(--paper-2);
  min-height: 190px;             /* wider than tall = horizontal rectangle */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* headers up top */
}
.grid-rect .card .num { font-size: 13px; margin-bottom: 6px; }
.grid-rect .card h3 { font-size: 26px; margin-bottom: 10px; }
.grid-rect .card p  { font-size: 16px; line-height: 1.5; }
@media (max-width: 560px) {
  .grid-rect .card { min-height: 0; }
}
.card h3 {
  font-family: "Archivo", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  margin: 0 0 10px;
}
.card .num {
  font-family: "Space Mono", monospace;
  color: var(--hi);
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

/* ---------- photo strip ---------- */
.photos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.photos figure { margin: 0; border: 2px solid var(--ink); overflow: hidden; }
.photos img { width: 100%; height: 220px; object-fit: cover; filter: grayscale(0.15) contrast(1.05); }

.feature-img { border: 3px solid var(--ink); margin-top: 24px; }
.feature-img img { width: 100%; height: clamp(240px, 42vw, 460px); object-fit: cover; }

/* ---------- forms ---------- */
.formwrap {
  border: 3px solid var(--ink);
  background: var(--paper-2);
  padding: 26px;
}
.formwrap .mono-note {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 22px;
}
form .field { margin-bottom: 20px; }
form label.lbl {
  display: block;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}
form label.lbl .req { color: var(--hi); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=url], select, textarea {
  width: 100%;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 11px 12px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--hi);
  outline-offset: 1px;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.two-col { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

/* check / radio groups */
.optgroup { border: 2px dashed var(--ink); padding: 14px 16px; }
.optgroup .opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.optgroup .opt input { width: 18px; height: 18px; accent-color: var(--hi); flex: 0 0 auto; }
.optgroup .opt label { margin: 0; font-family: "Archivo", sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; }
.opt-inline { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* honeypot */
.hp { position: absolute; left: -9999px; }

/* ---------- contact band at bottom of every page ---------- */
.contact-band { background: var(--ink); color: var(--paper); border-bottom: none; }
.contact-band h2 { color: var(--paper); }
.contact-band .section-label { color: #9c9c93; }
.contact-band .formwrap {
  background: #1f1f1f;
  border-color: var(--paper);
}
.contact-band .formwrap .mono-note { color: #b8b8ad; }
.contact-band form label.lbl { color: var(--paper); }
.contact-band input, .contact-band textarea, .contact-band select {
  background: #2a2a2a; color: var(--paper); border-color: var(--paper);
}
.contact-band a { color: var(--hi); }

/* ---------- footer ---------- */
footer {
  background: var(--ink);
  color: var(--paper);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  padding: 30px 0;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer a { color: var(--hi); }
.foot-name { color: var(--hi); font-weight: 700; }
footer .blink::after { content: "_"; animation: blink 1.1s steps(2,start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- artist directory ---------- */
.dir-controls {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 24px 0 8px;
}
.dir-search {
  flex: 1 1 280px;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 12px 14px;
}
.dir-genre {
  flex: 0 0 auto;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 12px 40px 12px 14px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none;
}
.dir-search:focus, .dir-genre:focus { outline: 3px solid var(--hi); outline-offset: 1px; }
.dir-status { margin: 0 0 18px; }

.dir-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dir-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 20px;
}
.dir-name {
  font-family: "Times New Roman", Times, serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 10px;
}
.dir-genres { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dir-genre-tag {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--hi);
  color: #fff;
  padding: 3px 8px;
}
/* type tag — outlined (not filled) so it reads as a different category */
.dir-type-tag {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: #fff;
  padding: 3px 8px;
}
.dir-row { display: flex; gap: 10px; padding: 5px 0; font-size: 14px; align-items: baseline; }
.dir-k {
  flex: 0 0 52px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.dir-v { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 3px 8px;
  text-decoration: none;
  color: var(--ink);
  word-break: break-all;
}
a.chip:hover { background: var(--ink); color: var(--paper); }
.dir-empty { font-family: "Space Mono", monospace; color: var(--ink-2); padding: 20px 0; }

/* ---------- thank-you ---------- */
.thanks { padding: 80px 0; }
.thanks h1 { font-family: "Times New Roman", serif; font-size: clamp(36px,7vw,64px); margin: 0 0 16px; }

/* ---------- responsive nav ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand img { height: 46px; }
  .brand .name { font-size: 21px; }
  nav.bar ul { flex-direction: column; }
  nav.bar a { padding: 10px 0; margin-right: 0; border-bottom: 1px dashed rgba(0,0,0,0.2); }
  .ticker .wrap { gap: 18px; }
}