/* ==========================================================================
   DERRKIO shared theme — makes every page match the homepage:
   black background, warm off-white type, Inter/Helvetica, thin rules.
   Linked last in each page's <head> so it overrides the page's own styles.
   ========================================================================== */

:root {
  --fg: #e9e4da;
  --dimfg: rgba(233, 228, 218, 0.45);
  --faint: rgba(233, 228, 218, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* remap the old paper/ink palette onto the dark theme */
  --white: #000;
  --paper: #000;
  --bone: rgba(233, 228, 218, 0.14);
  --mid: rgba(233, 228, 218, 0.45);
  --dark: rgba(233, 228, 218, 0.82);
  --ink: #e9e4da;
  --stamp: #e9e4da;
}

html, body {
  background: #000 !important;
  color: var(--fg);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* no paper grain, no per-page loader — pages open straight onto the work */
body::after { display: none !important; }
#loader { display: none !important; }

::selection { background: var(--fg); color: #000; }

/* ── media frames & grids: dark fills, hairline gaps ─────────────────── */
.cinematic-reel-frame,
.reel-frame,
.img-tile,
.placeholder-media,
.photo-cell,
.lightbox-container {
  background: #0b0b0b !important;
}
.project-matrix,
.artwork-grid,
.universe-strip {
  background: var(--faint) !important;
}

/* ── rules & borders: thin and faint instead of thick ink ────────────── */
.site-footer,
.label-bar,
.project-matrix,
.cinematic-reel-frame,
.reel-frame,
.collage-header,
.contact,
.contact-left,
.stat-bar,
.stat-item,
.stat-item:nth-child(odd),
.artwork-grid,
.press-block,
.universe-strip,
.feature-badge,
.sport-badge,
.form-input,
.form-textarea,
.info-matrix,
.matrix-col,
.brand-hero,
.archive-row,
.sub-nav {
  border-width: 1px !important;
  border-color: var(--faint) !important;
}
.section-rule {
  height: 1px !important;
  background: var(--faint) !important;
}
.form-input:focus,
.form-textarea:focus { border-color: var(--fg) !important; }

/* tags: flat outlined labels like the homepage */
.hang-tag {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid var(--dimfg) !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--fg) !important;
  letter-spacing: 0.3em !important;
}
.hero-tag {
  letter-spacing: 0.35em !important;
}
.sub-nav { background: transparent !important; }
.sub-nav-btn { color: var(--dimfg) !important; }
.sub-nav-btn.active-brand, .sub-nav-btn:hover { color: var(--fg) !important; }

/* ── shared header ───────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 28px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
}
.site-head a { color: var(--fg); text-decoration: none; }
.site-back {
  justify-self: start;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dimfg) !important;
  transition: color 0.3s;
}
.site-back:hover { color: var(--fg) !important; }
.site-name {
  justify-self: center;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  line-height: 1;
}
.site-name span {
  display: block;
  margin-top: 6px;
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dimfg);
}
.site-nav { justify-self: end; display: flex; gap: 26px; }
.site-nav a {
  position: relative;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dimfg) !important;
  transition: color 0.3s;
}
.site-nav a:hover, .site-nav a.on { color: var(--fg) !important; }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0.32em; bottom: -5px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.site-nav a:hover::after, .site-nav a.on::after { transform: scaleX(1); }

/* ── shared footer ───────────────────────────────────────────────────── */
.site-foot {
  margin-top: 80px;
  padding: 40px 20px calc(36px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--faint);
}
.foot-nav { line-height: 2.1; }
.foot-nav span {
  margin: 0 0.6em;
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dimfg);
}
.foot-nav a {
  position: relative;
  font-size: 0.85rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.foot-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0.38em; bottom: -2px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.foot-nav a:hover::after { transform: scaleX(1); }
.site-foot p {
  margin-top: 22px;
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dimfg);
}

@media (max-width: 700px) {
  .site-head { grid-template-columns: auto 1fr; padding: 16px 16px; row-gap: 12px; }
  .site-back { display: none; }
  .site-name { justify-self: start; text-align: left; font-size: 0.95rem; padding-left: 0; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 0.55rem; letter-spacing: 0.22em; }
  .foot-nav a { font-size: 0.72rem; letter-spacing: 0.3em; }
  .foot-nav span { margin: 0 0.3em; font-size: 0.42rem; }
}