/* Johnny Shoots. Layout, grid, and spacing from tylerstableford.com; skin is "Night Game" (2026-10-05). See DESIGN.md. */
/* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/LICENSE.txt). No third-party requests. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); }

:root {
  /* Night Game: warm charcoal ground, film grain, bone type, one accent (brass, from the stadium lights in his night frames). */
  --ground: #161412;      /* page background, never pure black */
  --surface: #1f1c19;     /* inputs, placeholders, image loading */
  --panel: #0f0e0c;       /* video slots and hero backing */
  --line: rgba(239,232,220,.12);
  --bone: #efe8dc;        /* headings, nav, lead, labels */
  --text: #cfc7ba;        /* body copy */
  --muted: #a59c8e;       /* crumbs, notes, copyright */
  --brass: #d9b47c;       /* the one accent */
  --brass-hi: #ecd1a4;    /* hover, focus ring, links in long text */
  --error: #f0a08a;
  --field-line: #7b7264;  /* input outline, 3:1 on the ground */
  --on-brass: #161412;
  --wrap: 1140px;
  --edge: 24px;
  --gap: 19px;
  --section: 120px;
  --font: "Roboto", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Roboto", sans-serif;
  /* Film grain: static SVG noise, textures the ground only (photos and the BRMM bar stay clean). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .82 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--ground); overflow-x: clip; }
body {
  margin: 0; color: var(--text); font: 400 16px/1.7 var(--font); overflow-x: clip;
  background-color: var(--ground);
  /* grain plus a faint warm spill from the top, like light towers over the field */
  background-image: var(--grain), radial-gradient(120% 50% at 50% 0, rgba(217,180,124,.08), transparent 65%);
  background-repeat: repeat, no-repeat;
}
::selection { background: var(--brass); color: var(--on-brass); }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass-hi); outline-offset: 3px;
}
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.wrap { width: min(var(--wrap), 100% - var(--edge) * 2); margin-inline: auto; }
.narrow { max-width: 640px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--brass); color: var(--on-brass); font-weight: 500; padding: 10px 16px; z-index: 50; }
.skip:focus { top: 12px; }

/* Header: 117px, logo left, nav right */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--grain), var(--ground); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 117px; transition: height .25s ease; }
.scrolled .header-row { height: 80px; }
.logo { font: 500 26px/1.1 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; }
.logo a { display: inline-block; padding: 6px 0; text-decoration: none; white-space: nowrap; }
.logo-name { color: var(--bone); font-weight: 600; }
.logo-role { color: var(--brass); }
.site-nav ul { display: flex; gap: 30px; }
.site-nav a { display: block; padding: 12px 0; font: 500 17px/1.2 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--muted); }
.site-nav a[aria-current] { border-bottom-color: var(--brass); }
.nav-toggle { display: none; }

/* Hero: full width, 40vw tall like the reference video band. The photo melts into the ground at the bottom. */
.hero { position: relative; height: clamp(420px, 40vw, 800px); overflow: hidden; background: var(--panel); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: var(--grain), var(--ground);
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.6) 55%, #000); mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.6) 55%, #000); }
.hero-media { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Highlight reel (comment block in index.html until clips arrive). Sits over the still and fades in only once it plays. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-tag { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  background: rgba(15,14,12,.72); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(217,180,124,.55); padding: 8px 16px 8px 10px; border-radius: 999px;
  font: 500 16px/1 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; }
.hero-tag .play { width: 26px; height: 26px; color: var(--brass); }

/* Home intro under the hero: the tagline is the H1, services in tracked condensed caps under it, then a small brass tick */
.home-intro { padding-top: 44px; text-align: center; max-width: 900px; }
.home-h1 { font: 600 clamp(44px, 6.2vw, 84px)/.95 var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--bone); margin-bottom: 20px; }
.home-h1 .by { color: var(--brass); white-space: nowrap; }
.services { max-width: 700px; margin-inline: auto; font: 500 19px/1.5 var(--font-display); letter-spacing: 2.2px; text-transform: uppercase; color: var(--text); }
.home-intro::after { content: ""; display: block; width: 1px; height: 44px; margin: 32px auto 0; background: linear-gradient(var(--brass), rgba(217,180,124,0)); }
.home-intro + .section { padding-top: 88px; }

/* Sections and titles: condensed bone caps over a short brass rule */
.section { padding-top: var(--section); }
.page-top { padding-top: 72px; }
.section-title { font: 600 40px/1 var(--font-display); letter-spacing: 4px; text-transform: uppercase; color: var(--bone); text-align: center;
  padding-bottom: 20px; margin-bottom: 60px; position: relative; }
.section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 2px; background: var(--brass); transform: translateX(-50%); }
.intro { text-align: center; max-width: 620px; margin: -28px auto 48px; color: var(--text); }
.crumb { text-align: center; margin-bottom: 14px; font: 500 16px/1.7 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; }
.crumb a { color: var(--brass); text-decoration: none; }
.crumb a:hover { color: var(--brass-hi); text-decoration: underline; }
.more { text-align: center; margin-top: 44px; }
.more a:not(.btn), .text-link { display: inline-block; white-space: nowrap; padding: 4px 0; font: 500 17px/1.7 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; color: var(--bone);
  text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.more a:not(.btn):hover, .text-link:hover { color: var(--brass-hi); }

/* Photo backdrop behind an inner page header. One of Johnny's own frames per page (bd-* class set in build_site.py),
   blurred and dimmed under a dark scrim, fading to the plain ground before the grid starts. */
.has-bd { position: relative; isolation: isolate; }
.has-bd::before, .has-bd::after { content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); width: 100vw;
  height: calc(72px + var(--bd-extra, 300px)); pointer-events: none; }
.has-bd::before {
  background: var(--bd) var(--bd-pos, center 50%) / cover no-repeat;
  filter: blur(2px) saturate(.8) sepia(.15) brightness(.72);
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 50%, transparent 100%); }
.has-bd::after {
  background:
    radial-gradient(ellipse 50% 42% at 50% 44%, rgba(18,16,14,.6), rgba(18,16,14,0) 100%),
    linear-gradient(to bottom, rgba(22,20,18,.5) 0%, rgba(22,20,18,.38) 40%, rgba(22,20,18,.7) 75%, rgba(22,20,18,0) 100%); }
.has-bd > .section-title, .has-bd > .crumb a, .has-bd > .intro { text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.has-bd > .intro { color: var(--bone); }
.has-bd > .crumb a { color: var(--brass-hi); }
.bd-sports { --bd: url("../assets/img/razorback-99-pregame-1200.webp"); --bd-pos: center 35%; }
.bd-hunting { --bd: url("../assets/img/hunter-walking-with-geese-1200.webp"); --bd-pos: center 40%; }
.bd-brands { --bd: url("../assets/img/shirts-hung-on-a-plane-wing-1200.webp"); --bd-pos: center 55%; }
.bd-travel { --bd: url("../assets/img/coastline-cliffs-1200.webp"); }
.bd-about { --bd: url("../assets/img/combine-pulls-wakeboarder-1200.webp"); --bd-pos: center 45%; }
.bd-contact { --bd: url("../assets/img/field-crew-on-atvs-1200.webp"); --bd-pos: center 40%; }

/* 3-column 16:9 grid with centered captions. Tiles are prints on a dark wall: dimmed a little at rest, full light on hover. */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); }
.grid-center { display: flex; flex-wrap: wrap; justify-content: center; }
.grid-center > .tile { width: calc((100% - var(--gap) * 2) / 3); }
.tile-link { display: block; text-decoration: none; }
.tile-img, .slot { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0,0,0,.8); transition: box-shadow .4s ease; }
.tile-img img, .slot-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); transition: transform .5s ease, filter .4s ease; }
.tile-img img { filter: brightness(.9) saturate(.95); }
.tile-link:hover .tile-img img { transform: scale(1.04); }
.tile-link:hover .tile-img img, .tile-link:focus-visible .tile-img img { filter: none; }
.tile-link:hover .tile-img, .tile-link:focus-visible .tile-img { box-shadow: 0 0 0 1px rgba(217,180,124,.45), 0 24px 60px -16px rgba(217,180,124,.22); }
.tile-cap { margin-top: 16px; font: 500 19px/1.1 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; text-align: center; color: var(--bone); }
.tile-link:hover .tile-cap { color: var(--brass-hi); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }

/* Video slots: his photo, toned down, behind a brass play mark and a note. A soft dark pool keeps the note readable. */
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--panel-text, var(--bone)); }
.slot-bg { position: absolute; inset: 0; }
.slot-bg img { filter: grayscale(.55) sepia(.2) brightness(.58); }
.slot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(15,14,12,.62), rgba(15,14,12,0) 100%); }
.slot .play { position: relative; z-index: 1; width: 48px; height: 48px; color: var(--brass); }
.slot-note { position: relative; z-index: 1; padding: 6px 10px; background: rgba(15,14,12,.76); font: 500 16px/1 var(--font-display); letter-spacing: 2.5px; text-transform: uppercase; color: var(--bone); }
.reel-slot { aspect-ratio: 16 / 9; margin-bottom: 56px; }
.reel-slot .play { width: 72px; height: 72px; }

/* About band */
.about-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(0,0,0,.9); }
.about-copy p + p { margin-top: 18px; }
.lead { font: 600 32px/1.08 var(--font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--bone); }
.placeholder-panel { aspect-ratio: 3 / 2; background: var(--surface); border: 1px dashed rgba(217,180,124,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--muted); font: 500 17px/1.4 var(--font-display); letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 20px; }
.placeholder-panel svg { width: 56px; height: 56px; color: var(--brass); }
.placeholder-text { border-left: 2px solid var(--brass); padding-left: 14px; color: var(--muted); font-style: italic; }

/* Full-bleed photo band (home About, class "photo-band" set in build_site.py): his night soccer goal celebration,
   dimmed, with the copy card over the darkest side of the frame. */
.photo-band { position: relative; isolation: isolate; padding-bottom: var(--section); margin-top: var(--section); }
.photo-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background:
    linear-gradient(to right, rgba(22,20,18,.9) 0%, rgba(22,20,18,.45) 55%, rgba(22,20,18,.6) 100%),
    url("../assets/img/razorback-soccer-goal-celebration-1600.webp") center 45% / cover no-repeat;
  filter: saturate(.8) brightness(.95);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.about-band.solo { grid-template-columns: minmax(0, 560px); justify-content: start; }
.photo-band .about-copy { background: linear-gradient(to right, rgba(22,20,18,.92), rgba(22,20,18,.8)); padding: 36px 38px; border-left: 2px solid var(--brass); }
.photo-band .section-title { text-shadow: 0 1px 14px rgba(0,0,0,.6); }

/* Buttons: brass fill, dark type */
.btn { display: inline-block; background: var(--brass); color: var(--on-brass); border: 1px solid var(--brass); padding: 14px 28px; font: 600 17px/1 var(--font-display);
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; margin-right: 18px; }
.btn:hover { background: transparent; color: var(--brass-hi); border-color: var(--brass-hi); }

/* Gallery: justified rows in catalog order, never cropped. Each item grows by its aspect ratio (--r, set per item
   by build_site.py), so every photo in a row has the same height. */
.gallery { display: flex; flex-direction: column; gap: var(--gap); }
.g-row { display: flex; gap: var(--gap); }
.g-cell { flex: var(--r) 1 0; min-width: 0; }
.g-cell img { width: 100%; height: auto; }
.g-item { display: block; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: zoom-in; }
.g-item img { width: 100%; transition: filter .2s ease; }
.g-item:hover img { filter: brightness(1.06); }
.g-item:focus-visible { outline-offset: 4px; }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(14,13,11,.97); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: calc(100vw - 160px); }
.lightbox img { max-height: calc(100vh - 110px); width: auto; margin: 0 auto; }
.lightbox figcaption { color: var(--text); text-align: center; font-size: 14px; margin-top: 12px; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--bone); cursor: pointer; font-size: 44px; line-height: 1; width: 56px; height: 56px; }
.lightbox button:hover { color: var(--brass-hi); }
.lightbox button:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -4px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 16px; top: calc(50% - 28px); }
.lb-next { right: 16px; top: calc(50% - 28px); }

/* Contact */
.contact-direct { text-align: center; line-height: 2.6; margin-bottom: 20px; }
.contact-direct .btn { margin-right: 0; }
#instagram { margin: 0 auto 48px; max-width: 420px; }
.contact-form { display: grid; gap: 20px; }
.field label { display: block; font: 500 16px/1.4 var(--font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--bone); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--bone); background: var(--surface); border: 1px solid var(--field-line); padding: 12px 14px; border-radius: 0; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brass); outline-offset: 2px; }
.contact-form .btn { justify-self: start; }
.form-status { color: var(--bone); }
.form-status:empty { display: none; }
.field-error { margin-top: 6px; font-size: 14px; color: var(--error); }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; padding: 11px 13px; }
.field [aria-invalid="true"]:focus-visible { border-color: var(--error); }
.form-note { font-size: 14px; color: var(--muted); }
.form-note a { color: var(--brass-hi); }

/* Text pages: accessibility, privacy */
.prose h2 { font: 600 24px/1.2 var(--font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--bone); margin: 40px 0 12px; }
.prose p + p { margin-top: 14px; }
.prose a { color: var(--brass-hi); }
.prose strong { color: var(--bone); }
.prose .list { list-style: disc; padding-left: 22px; }
.prose .list li::marker { color: var(--brass); }
.prose .list li + li { margin-top: 8px; }
.prose .list + p, .prose p + .list { margin-top: 14px; }
.muted-note { margin-top: 32px !important; font-size: 14px; color: var(--muted); }
.link-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }

/* Footer: centered round icons, page links, copyright, then the BRMM signature bar */
.site-footer { margin-top: 140px; padding: 64px var(--edge) 56px; text-align: center; border-top: 1px solid var(--line); }
.social { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.social a:hover { background: var(--brass); color: var(--on-brass); }
.social svg { width: 18px; height: 18px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-bottom: 16px; }
.footer-nav a { font: 500 16px/1.7 var(--font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 4px 0; }
.footer-nav a:hover { color: var(--brass-hi); text-decoration: underline; text-decoration-color: var(--brass); }
.copy { font-size: 14px; color: var(--muted); }

/* 900 and down: hamburger */
@media (max-width: 900px) {
  :root { --section: 88px; }
  html { scroll-padding-top: 84px; }
  .header-row, .scrolled .header-row { height: 72px; }
  .logo { font-size: 22px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--bone); }
  .bars, .bars::before, .bars::after { display: block; width: 24px; height: 2px; background: currentColor; position: relative; transition: transform .2s ease; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -7px; } .bars::after { top: 7px; }
  .nav-open .bars { background: transparent; }
  .nav-open .bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-open .bars::after { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: 72px; background: var(--grain), var(--ground); border-top: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0,0,0,.5); display: none; }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px var(--edge) 16px; }
  .site-nav a { padding: 14px 0; font-size: 19px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .grid-center > .tile { width: calc((100% - var(--gap)) / 2); }
  .about-band { grid-template-columns: 1fr; gap: 32px; }
  .about-band.solo { grid-template-columns: 1fr; }
}

/* 600 and down */
@media (max-width: 600px) {
  :root { --edge: 16px; --section: 72px; }
  .logo { font-size: 19px; letter-spacing: 1.5px; }
  .logo-role { letter-spacing: 0; }
  .hero { height: 62vh; min-height: 380px; }
  .hero-media { object-position: 50% center; }
  .hero-tag { font-size: 14px; bottom: 18px; }
  .grid { grid-template-columns: 1fr; gap: 32px; }
  .grid-center > .tile { width: 100%; }
  .g-row { flex-direction: column; }
  .home-intro { padding-top: 28px; }
  .home-h1 { font-size: 46px; letter-spacing: 2px; }
  .services { font-size: 17px; letter-spacing: 1.6px; }
  .home-intro + .section { padding-top: 64px; }
  .section-title { font-size: 34px; letter-spacing: 3px; margin-bottom: 44px; }
  .intro { margin-top: -16px; }
  .lead { font-size: 28px; }
  .photo-band .about-copy { padding: 24px 20px; }
  .has-bd { --bd-extra: 260px; }
  .bd-sports { --bd: url("../assets/img/razorback-99-pregame-800.webp"); }
  .bd-hunting { --bd: url("../assets/img/hunter-walking-with-geese-800.webp"); }
  .bd-brands { --bd: url("../assets/img/shirts-hung-on-a-plane-wing-800.webp"); }
  .bd-travel { --bd: url("../assets/img/coastline-cliffs-800.webp"); }
  .bd-about { --bd: url("../assets/img/combine-pulls-wakeboarder-800.webp"); }
  .bd-contact { --bd: url("../assets/img/field-crew-on-atvs-800.webp"); }
  .has-bd::after { background:
    radial-gradient(ellipse 80% 42% at 50% 44%, rgba(18,16,14,.66), rgba(18,16,14,0) 100%),
    linear-gradient(to bottom, rgba(22,20,18,.56) 0%, rgba(22,20,18,.44) 40%, rgba(22,20,18,.72) 75%, rgba(22,20,18,0) 100%); }
  .photo-band::before { background:
    linear-gradient(rgba(22,20,18,.38), rgba(22,20,18,.38)),
    url("../assets/img/razorback-soccer-goal-celebration-800.webp") 62% 45% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent); }
  .lightbox figure { max-width: 100vw; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; }
  .btn { margin-right: 12px; }
}

@media (max-width: 400px) {
  .logo { font-size: 17px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .tile-link:hover .tile-img img { transform: none; }
}