/* Oak Cliff Barbers — "neighborhood record": forest green sleeve, mustard label, off-black vinyl.
   Signature: a record sliding out of its sleeve in the hero; services as a tracklist; back-cover footer. */
:root {
  --c-primary: #12372a;
  --c-primary-dark: #0b261c;
  --c-accent: #e0a526;
  --c-ink: #141414;
  --c-muted: #4b4b45;
  --c-bg: #f5efe3;
  --c-surface: #ebe2cf;
  --c-dark: #141414;
  --c-on-dark: #f5efe3;
  --c-border: #d4c8ae;
  --green: #12372a;
  --mustard: #e0a526;
  --vinyl: #141414;
  --f-head: "Big Shoulders Display", Impact, sans-serif;
  --f-body: "Libre Franklin", system-ui, sans-serif;
  --fw-head: 900;
  --radius: 0;
  --radius-sm: 0;
}
h1, h2, h3 { text-transform: uppercase; letter-spacing: .005em; line-height: .92; }
:focus-visible { outline-color: var(--mustard); }
a { color: var(--green); }

/* Buttons: square, thick black border, invert on hover */
.btn { border-radius: 0; box-shadow: none; border: 3px solid var(--vinyl); font-weight: 800; text-transform: uppercase; font-size: .92rem; letter-spacing: .03em; }
.btn:hover { transform: none; }
.btn--mustard { background: var(--mustard); color: var(--vinyl); }
.btn--mustard:hover { background: var(--vinyl); color: var(--mustard); }
.btn--outline { background: transparent; color: inherit; border-color: currentColor; }
.btn--outline:hover { background: var(--mustard); color: var(--vinyl); border-color: var(--vinyl); }

/* Header: green bar, lettered track links */

/* HERO: big stacked type left, sleeve + record right */
.oc-hero { background: var(--green); color: var(--c-bg); padding: clamp(36px, 6vw, 80px) 0 28px; overflow: hidden; }
.oc-hero-grid { display: grid; gap: 40px; align-items: center; }
.oc-hero-grid > * { min-width: 0; }
.oc-hero h1 { font-size: clamp(3.2rem, 12vw, 7.4rem); margin-bottom: .3em; }
.oc-hero h1 span { display: block; font-size: .34em; color: var(--mustard); line-height: 1.1; margin-top: .5em; }
.oc-lead { font-size: 1.08rem; max-width: 50ch; color: #e6e0d0; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.record { position: relative; width: min(64vw, 400px); aspect-ratio: 1; margin: 0; }
.sleeve { position: absolute; inset: 0; z-index: 2; background: #0b261c; border: 3px solid var(--vinyl); overflow: hidden; }
.sleeve img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .9; }
.vinyl { position: absolute; z-index: 1; top: 4%; left: 4%; width: 92%; height: 92%; border-radius: 50%; background: repeating-radial-gradient(circle, #1b1b1b 0 2px, #101010 2px 4px); box-shadow: 0 10px 30px rgba(0,0,0,.4); translate: 34% 0; display: grid; place-items: center; animation: spin 8s linear infinite; }
.vinyl-label { width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--mustard); color: var(--vinyl); display: grid; place-content: center; text-align: center; font-family: var(--f-head); line-height: 1; }
.vinyl-label b { font-size: 1.8rem; }
.vinyl-label small { font-family: var(--f-body); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
@keyframes spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (min-width: 900px) {
  .oc-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .record { margin: 0 12% 0 0; }
  .vinyl { translate: 28% 0; }
}
.oc-hero .photo-note { display: block; width: fit-content; margin-top: 20px; }

/* TRACKS */
.tracks { padding: clamp(56px, 8vw, 104px) 0; }
.tracks-grid { display: grid; gap: 28px; }
.tracks-grid > * { min-width: 0; }
.tracks h2 { font-size: clamp(3rem, 9vw, 5.5rem); }
.tracks h2 span { color: var(--green); }
.tracks-side p { max-width: 32ch; }
.tracklist { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--vinyl); }
.tracklist li { display: grid; grid-template-columns: 2.6em minmax(0,1fr) auto; gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--c-border); align-items: baseline; }
.tn { font-family: var(--f-head); font-weight: 900; font-size: 1.4rem; color: var(--green); }
.tt { grid-column: 2; grid-row: 1; font-family: var(--f-head); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.tp { font-weight: 800; font-size: .9rem; grid-column: 3; grid-row: 1; }
.td { grid-column: 2 / 4; color: var(--c-muted); font-size: .95rem; }
@media (min-width: 900px) { .tracks-grid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 72px; } .tracks-side { position: sticky; top: 100px; align-self: start; } }

/* LINER NOTES: dense two-column text, like the inside of a sleeve */
.notes { background: var(--mustard); color: var(--vinyl); padding: clamp(56px, 8vw, 100px) 0; }
.notes h2 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 24px; }
.notes-cols { columns: 1; column-gap: 40px; }
@media (min-width: 768px) { .notes-cols { columns: 2; } }
@media (min-width: 1100px) { .notes-cols { columns: 3; } }
.notes-cols p { break-inside: avoid; font-size: 1.05rem; margin: 0 0 18px; padding-top: 12px; border-top: 2px solid var(--vinyl); }
.notes-src { font-size: .85rem; margin-top: 12px; }
.notes-src a { color: var(--vinyl); }

/* CREW / credits */
.crew { padding: clamp(56px, 8vw, 104px) 0; }
.crew-grid { display: grid; gap: 32px; }
.crew-grid > * { min-width: 0; }
.crew-photo { position: relative; background: #ccc; border: 3px solid var(--vinyl); }
.crew-photo img { width: 100%; aspect-ratio: 10/7; object-fit: cover; }
.crew-photo .photo-note { position: absolute; left: 10px; bottom: 10px; margin: 0; }
.crew h2 { font-size: clamp(2.6rem, 7vw, 4.2rem); }
.credits { margin: 0; }
.credits div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.credits dt { font-size: .78rem; font-weight: 800; text-transform: uppercase; color: var(--green); }
.credits dd { margin: 0; font-size: 1.1rem; }
.crew-note { font-size: .85rem; color: var(--c-muted); margin-top: 10px; }
@media (min-width: 900px) { .crew-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 56px; align-items: center; } }

/* GALLERY */

/* LOCATION */
.davis { padding: clamp(56px, 8vw, 104px) 0; }
.davis-grid { display: grid; gap: 32px; }
.davis-grid > * { min-width: 0; }
.davis h2 { font-size: clamp(2.8rem, 9vw, 5rem); }
.park { background: var(--c-surface); border-left: 6px solid var(--mustard); padding: 10px 14px; }
.davis .hours { margin: 18px 0; }
.davis .hours caption { text-align: left; font-weight: 800; text-transform: uppercase; font-size: .8rem; padding-bottom: 4px; }
.davis .hours th { text-align: left; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--c-border); }

/* CONTACT */

/* FOOTER: record back cover */
.backcover { background: var(--c-bg); color: var(--vinyl); padding: 36px 0 28px; border-top: 3px solid var(--vinyl); }
.back-grid { display: grid; gap: 18px; align-items: end; }
.back-grid > * { min-width: 0; }
.cat { font-size: .78rem; font-weight: 800; text-transform: uppercase; margin: 0; }
.back-name { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 8vw, 4rem); line-height: .9; margin: 4px 0 10px; }
.backcover a { color: var(--green); }
.barcode { height: 56px; width: 160px; background: repeating-linear-gradient(90deg, var(--vinyl) 0 2px, transparent 2px 4px, var(--vinyl) 4px 7px, transparent 7px 9px, var(--vinyl) 9px 10px, transparent 10px 13px); }
.fine { font-size: .8rem; color: var(--c-muted); margin: 0; }
@media (min-width: 768px) { .back-grid { grid-template-columns: minmax(0,1fr) auto; } .fine { grid-column: 1 / -1; } }

.photo-note { border-radius: 0; }

/* HEADER: a turntable deck, black plinth with lettered side tabs (own markup) */
.deck { position: sticky; top: 0; z-index: 100; background: var(--vinyl); color: var(--c-bg); border-bottom: 3px solid var(--mustard); }
.deck-bar { position: relative; max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 16px; min-height: 62px; }
.deck-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-bg); }
.brand-disc { width: 40px; height: 40px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--mustard) 0 22%, #111 23% 30%, #2a2a2a 31% 33%, #111 34% 60%, #2a2a2a 61% 63%, #111 64%); animation: spin 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .brand-disc { animation: none; } }
.deck-name { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; line-height: .95; }
.deck-name small { display: block; font-family: var(--f-body); font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--mustard); margin-top: 3px; }
.deck-tabs { display: none; margin-left: auto; gap: 6px; }
.deck-tabs a { display: flex; align-items: center; gap: 8px; color: var(--c-bg); text-decoration: none; font-weight: 700; font-size: .9rem; padding: 6px 10px; border: 1.5px solid transparent; }
.deck-tabs a b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mustard); color: var(--vinyl); font-size: .75rem; }
.deck-tabs a:hover { border-color: var(--mustard); }
.deck-toggle { margin-left: auto; background: var(--mustard); border: 0; border-radius: 0; }
.deck-toggle span, .deck-toggle span::before, .deck-toggle span::after { background: var(--vinyl); }
.deck-toggle[aria-expanded="true"] span { background: transparent; }
.deck-demo { margin: 0; padding: 3px var(--gutter); text-align: center; background: var(--green); color: #e6e0d0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 960px) { .deck-tabs { display: flex; } }
/* Menu slides out from under the deck itself */
.deck-drawer { position: absolute; inset: auto 0 auto 0; top: 100%; max-height: calc(100dvh - 100px); overflow-y: auto; background: var(--vinyl); border-bottom: 3px solid var(--mustard); padding: 8px var(--gutter) 22px; }
.deck-drawer ol { list-style: none; margin: 0 0 16px; padding: 0; }
.deck-drawer a:not(.btn) { color: var(--c-bg); font-family: var(--f-head); font-size: 1.9rem; text-transform: uppercase; font-weight: 800; border-bottom: 1px solid rgba(245,239,227,.15); gap: 12px; }
.deck-drawer a b { color: var(--mustard); }

.notes-cols p b { display: block; font-family: var(--f-head); text-transform: uppercase; font-size: 1.35rem; }
.tracks-price { margin: 14px 0 0; font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; color: var(--green); }

/* LOCATION: map first, full-bleed */
.davis { padding: 0 0 clamp(48px, 7vw, 90px); background: var(--c-surface); }
.davis-map { border-bottom: 3px solid var(--vinyl); }
.davis-map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 460px); border: 0; filter: grayscale(.6) contrast(1.05); }
.davis-grid { padding-top: 36px; }
.davis .park { background: var(--c-bg); }
@media (min-width: 900px) { .davis-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; align-items: start; } }
.crew-chip { margin-top: 14px; }

/* Mobile action: "now playing" mini-player bar (the one bottom bar on our team's set) */
.now-playing { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 90; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; background: var(--vinyl); color: var(--c-bg); text-decoration: none; border: 2px solid var(--mustard); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.np-disc { width: 36px; height: 36px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--mustard) 0 24%, #111 25% 58%, #333 59% 61%, #111 62%); animation: spin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .np-disc { animation: none; } }
.np-text { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-text small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mustard); }
.np-btn { background: var(--mustard); color: var(--vinyl); font-weight: 800; text-transform: uppercase; font-size: .8rem; padding: 10px 12px; }
@media (min-width: 960px) { .now-playing { display: none; } }
.backcover { padding-bottom: 96px; }
@media (min-width: 960px) { .backcover { padding-bottom: 28px; } }