/*
Theme Name: Dead Frequency
Theme URI: https://www.instagram.com/deadfrequency.gla/
Author: Dead Frequency
Description: Brutalist black-and-white one-page theme for Dead Frequency, a Glasgow underground rap night. Pure monochrome, hard edges, no gradients or fades.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dead-frequency
Tags: one-column, custom-menu, black, full-width-template
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #000;
  color: #fff;
  font-family: "Space Mono", "Courier New", monospace;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: #fff; color: #000; }

h1, h2, h3, .df-d {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .85;
  margin: 0;
}
p { margin: 0; }

.df-nav { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:2px solid #fff; }
.df-nav-links { display:flex; gap:16px; font-size:12px; text-transform:uppercase; letter-spacing:.2em; }
.df-nav-links a:hover { text-decoration: underline; }
.df-nav-links ul { list-style:none; display:flex; gap:16px; margin:0; padding:0; }

.df-hero { padding:64px 20px; border-bottom:2px solid #fff; }
.df-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.4em; margin-bottom:24px; }
.df-hero h1 { font-size:16vw; }
.df-lede { margin-top:32px; max-width:620px; font-size:14px; text-transform:uppercase; letter-spacing:.15em; }

.df-btns { margin-top:40px; display:flex; flex-direction:column; gap:12px; }
.df-btn { display:inline-block; padding:16px 32px; text-align:center; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; border:2px solid #fff; }
.df-btn-solid { background:#fff; color:#000; }
.df-btn-solid:hover { background:#000; color:#fff; }
.df-btn-outline { background:#000; color:#fff; }
.df-btn-outline:hover { background:#fff; color:#000; }

.df-marquee { overflow:hidden; border-top:2px solid #fff; border-bottom:2px solid #fff; padding:12px 0; }
.df-marquee span { display:inline-block; white-space:nowrap; font-size:28px; animation: df-scroll 24s linear infinite; }
@keyframes df-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.df-grid2 { display:grid; border-bottom:2px solid #fff; }
.df-cell { padding:48px 20px; border-bottom:2px solid #fff; }
.df-cell:last-child { border-bottom:0; }
.df-rows { margin-top:40px; }
.df-row { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-top:2px solid #fff; font-size:13px; text-transform:uppercase; letter-spacing:.15em; }
.df-row b { text-align:right; }
.df-box { border:2px solid #fff; padding:32px; text-align:center; }
.df-box .df-d { font-size:80px; }
.df-doors { margin-top:24px; font-size:12px; text-transform:uppercase; letter-spacing:.3em; text-align:center; }

.df-follow { padding:80px 20px; text-align:center; }
.df-follow h2 { font-size:44px; }
.df-follow p { margin-top:24px; font-size:13px; text-transform:uppercase; letter-spacing:.2em; }

.df-content { padding:48px 20px; border-top:2px solid #fff; }
.df-content h2 { font-size:32px; margin-bottom:24px; }
.df-content img { max-width:100%; height:auto; display:block; border:2px solid #fff; }

.df-foot { border-top:2px solid #fff; padding:32px 20px; font-size:12px; text-transform:uppercase; letter-spacing:.2em; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.df-foot a:hover { text-decoration: underline; }

.screen-reader-text { position:absolute; left:-9999px; }

@media (min-width: 768px) {
  .df-hero { padding:112px 48px; }
  .df-hero h1 { font-size:11vw; }
  .df-btns { flex-direction: row; }
  .df-grid2 { grid-template-columns: 1fr 1fr; }
  .df-grid2 .df-cell { border-bottom:0; padding:48px; }
  .df-grid2 .df-cell:first-child { border-right:2px solid #fff; }
  .df-follow h2 { font-size:88px; }
  .df-content { padding:64px 48px; }
}

@media (prefers-reduced-motion: reduce) { .df-marquee span { animation: none; } }