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

/* ══════════════════════════════════════════════════════════
   TOKENS — true neutral black, one warm accent
   ══════════════════════════════════════════════════════════ */
:root {
  --bg:      #000000;
  --bg-soft: #050505;
  --card:    #0a0a0a;
  --card2:   #101010;
  --card3:   #171717;
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --line:    rgba(255,255,255,0.08);

  --gold:      #d9a441;
  --gold-lt:   #e8bf76;
  --gold-hi:   #f3d9a5;
  --gold-deep: #8a6524;
  --gold-dim:  rgba(217,164,65,0.09);
  --gold-line: rgba(217,164,65,0.25);

  /* second glow colour — warm ember, blends with gold on black */
  --ember:     #d65a2c;
  --ember-lt:  #e8804f;

  --text:  #a3a3a3;
  --muted: #737373;
  --white: #fafafa;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --sh-1: 0 1px 2px rgba(0,0,0,.6);
  --sh-2: 0 16px 44px rgba(0,0,0,.55);
  --sh-3: 0 32px 80px rgba(0,0,0,.7);

  --pad: 48px;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
  /* The pages start hidden and only go active once the API call in INIT
     resolves, so the first paint has nothing to scroll and therefore no
     scrollbar. When the scrollbar then arrives it takes 10px off the
     viewport and every centred thing — the intro lockup above all —
     slid 5px to the left a second into the load. Reserving the gutter
     up front keeps the lockup still. */
  scrollbar-gutter: stable;
  background: var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: padding-box; border: 3px solid transparent; }
::selection { background: rgba(217,164,65,0.28); color: #fff; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════
   ATMOSPHERE — one soft warm glow on black. Nothing else.
   ══════════════════════════════════════════════════════════ */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 76% -10%, rgba(217,164,65,0.05), transparent 66%),
    radial-gradient(760px 480px at 10% 102%, rgba(214,90,44,0.03),  transparent 68%);
}

/* brand pattern — gives the black some texture without any glow */
.hm-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/uploads/1775428848_dls1.jpg');
  background-size: 900px auto;
  background-position: center top;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* fine grain — keeps large flat blacks from banding */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nav-wrap, .page, #scroll-progress { position: relative; z-index: 1; }

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 0;
  z-index: 1000;
  background: linear-gradient(90deg, transparent, var(--gold));
  transition: width 0.15s linear;
  pointer-events: none;
}

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--white); border-radius: 2px; transition: all 0.3s var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  padding: 17px 28px;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, background 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--white); background: rgba(255,255,255,0.03); }

/* ══════════════════════════════════════════════════════════
   LAYOUT + PRIMITIVES
   ══════════════════════════════════════════════════════════ */
.page { display: none; padding-top: 0; }
.page.active { display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 96px 0; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.022em; color: var(--white); }

/* small uppercase label */
.eyebrow, .hm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before, .hm-eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(217,164,65,0.7);
  flex-shrink: 0;
}

.hm-title, .section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--white);
}
.hm-lede {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 540px;
  margin-top: 16px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  color: var(--gold-lt);
  background: var(--gold-dim);
  align-self: flex-start;
  line-height: normal;
}
.tag-dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex-shrink: 0; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-transform: none;
  padding: 13px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #1a1408; }
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--white); border: 1px solid var(--border2); }
.btn-outline:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); transform: translateY(-2px); }

/* quiet text link with arrow */
.hm-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  transition: color 0.25s, gap 0.25s var(--ease);
}
.hm-link i { font-size: 0.72rem; color: var(--gold); }
.hm-link:hover { color: var(--gold-lt); gap: 14px; }

.pill { font-size: 0.78rem; font-weight: 400; color: var(--muted); padding: 0; background: none; border: none; }
.email-link {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--gold-lt);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s, gap 0.25s var(--ease);
}
.email-link:hover { color: var(--gold-hi); gap: 11px; }

/* ══════════════════════════════════════════════════════════
   MOTION — hero uses keyframes (never blank), rest observes
   ══════════════════════════════════════════════════════════ */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowIn { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 0; animation: riseIn 0.9s var(--ease) forwards; }
.r1 { animation-delay: 0.10s; }
.r2 { animation-delay: 0.20s; }
.r3 { animation-delay: 0.30s; }
.r4 { animation-delay: 0.40s; }
.r5 { animation-delay: 0.50s; }
.r6 { animation-delay: 0.60s; }

.fade { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade.in { opacity: 1; transform: none; }
.fade.d1 { transition-delay: 0.08s; }
.fade.d2 { transition-delay: 0.16s; }
.fade.d3 { transition-delay: 0.24s; }
.fade.d4 { transition-delay: 0.32s; }
.hero-word { display: inline-block; overflow: hidden; }
.hero-word-inner { display: inline-block; }
.count-num { display: inline-block; }

/* ══════════════════════════════════════════════════════════
   HOME — HERO
   ══════════════════════════════════════════════════════════ */
.hm-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 140px 0 0;
  overflow: hidden;
}
/* featured key art fills the hero */
.hm-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* ── HERO BACKGROUND — swap this one line to change it ── */
  background-image: url('/img/backdrop-1920.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  animation: artIn 2.4s var(--ease) 0.1s forwards;
}
@keyframes artIn { to { opacity: 1; transform: scale(1); } }
.hm-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.4) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0.55) 100%);
}
/* art + scrim dissolve together, so the page background carries straight through */
.hm-hero-bg {
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 99%);
  pointer-events: none;
}
.hm-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hm-hero .hm-eyebrow { margin-bottom: 26px; }

.hm-hero-title {
  font-size: clamp(2.8rem, 6.6vw, 5.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
  margin-bottom: 24px;
}
.hm-hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 42%, var(--ember-lt) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hm-hero-sub {
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.75;
  color: #9a9a9a;
  max-width: 480px;
  margin-bottom: 38px;
}
.hm-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   HOME — SECTION SHELL
   ══════════════════════════════════════════════════════════ */
.hm-section { padding: 104px 0; position: relative; }
.hm-section--first { padding-top: 120px; }
.hm-section--tight { padding-top: 0; }

/* hairline between the two content blocks */
.hm-sep {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.09) 18%, rgba(255,255,255,0.09) 82%, transparent);
}

.hm-head { margin-bottom: 52px; max-width: 720px; }
.hm-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.hm-head-row .hm-head { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   HOME — FEATURED PROJECT BANNER
   ══════════════════════════════════════════════════════════ */
.hm-featured {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  min-height: 540px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.5s, transform 0.5s var(--ease), box-shadow 0.5s;
}
/* lit top edge */
.hm-featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.5) 35%, rgba(214,90,44,0.4) 65%, transparent);
  opacity: 0;
  transition: opacity 0.5s;
}
.hm-featured:hover::after { opacity: 1; }
.hm-featured:hover { border-color: rgba(217,164,65,0.28); transform: translateY(-4px); box-shadow: var(--sh-3); }
.hm-featured-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.3s var(--ease);
}
.hm-featured:hover .hm-featured-media { transform: scale(1.05); }
.hm-featured-media--empty {
  background:
    radial-gradient(ellipse 62% 66% at 78% 22%, rgba(217,164,65,0.24), transparent 62%),
    radial-gradient(ellipse 58% 60% at 52% 78%, rgba(214,90,44,0.16), transparent 64%),
    linear-gradient(150deg, #141414 0%, #0d0d0d 55%, #070707 100%);
}
.hm-featured-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.6) 44%, rgba(0,0,0,0.15) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 56%);
}
.hm-featured-body {
  position: relative;
  z-index: 2;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 58px 60px;
  max-width: 620px;
}
.hm-featured-label {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.hm-featured-logo { max-height: 56px; max-width: 240px; object-fit: contain; margin-bottom: 20px; display: block; }
.hm-featured-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: #fff;
  margin-bottom: 16px;
}
.hm-featured-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
  max-width: 460px;
}
.hm-featured-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hm-featured-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.42);
}
.hm-featured-meta span { position: relative; }
.hm-featured-meta span + span::before {
  content: '';
  position: absolute;
  left: -9px; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.26);
  transform: translateY(-50%);
}

/* ══════════════════════════════════════════════════════════
   HOME — JOURNAL
   ══════════════════════════════════════════════════════════ */
#home-news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.jr {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.4s, transform 0.45s var(--ease), box-shadow 0.45s;
}
.jr::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.45), rgba(214,90,44,0.35), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.jr:hover::after { opacity: 1; }
.jr:hover { border-color: rgba(217,164,65,0.26); transform: translateY(-4px); box-shadow: var(--sh-2); }
.jr-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card2); }
.jr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.jr:hover .jr-media img { transform: scale(1.05); }
.jr-media--empty {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 70% at 40% 30%, rgba(217,164,65,0.1), transparent 64%), linear-gradient(150deg, #141414, #0a0a0a);
}
.jr-media--empty i { font-size: 1.7rem; color: rgba(255,255,255,0.09); }
.jr-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.jr-meta {
  display: flex; align-items: center; gap: 13px; margin-bottom: 13px;
  font-size: 0.73rem; letter-spacing: 0.07em; text-transform: uppercase; color: #6e6e6e;
}
.jr-cat { color: var(--gold); }
.jr-title {
  font-size: 1.22rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.028em;
  color: var(--white); margin-bottom: 11px; transition: color 0.3s;
}
.jr:hover .jr-title { color: var(--gold-lt); }
.jr-excerpt { font-size: 0.91rem; line-height: 1.72; color: var(--muted); margin-bottom: 18px; flex: 1; }
.jr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jr-author { font-size: 0.8rem; color: #6e6e6e; }

.page-header p { color: var(--muted); max-width: 470px; font-size: 0.98rem; line-height: 1.8; }

/* generic card surface */
.info-card, .team-card, .role-card,
.cs-card, .join-cta, .apply-form-card, .project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
}
.info-card:hover, .team-card:hover, .role-card:hover,
.project-card:hover {
  border-color: rgba(217,164,65,0.24);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.info-card { padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.info-card h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.025em; color: var(--white); }
.info-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.8; flex: 1; }

.stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--line);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin-top: 16px;
}
.stat-item { background: var(--card); padding: 26px 16px; text-align: center; }
.stat-num { font-size: 1.8rem; font-weight: 600; color: var(--white); line-height: 1; letter-spacing: -0.03em; }
.stat-label { font-size: 0.73rem; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 72px; }
.team-card { padding: 32px 28px; position: relative; overflow: hidden; }
.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.team-num { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.16); }
.avatar {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(217,164,65,0.1);
  border: 1px solid rgba(217,164,65,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 600; color: var(--gold-lt);
  margin-bottom: 20px; overflow: hidden;
  transition: transform 0.35s var(--ease);
}
.team-card:hover .avatar { transform: scale(1.05); }
.avatar-lg { width: 76px; height: 76px; border-radius: 16px; font-size: 1.45rem; }
.team-role { font-size: 0.73rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.team-name { font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: 2px; letter-spacing: -0.028em; }
.team-last { font-size: 0.88rem; color: var(--muted); margin-bottom: 14px; }
.team-divider { width: 30px; height: 1px; background: var(--border2); margin: 14px 0; }
.team-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.75; }

.join-cta {
  padding: 60px 44px; text-align: center; margin-bottom: 88px; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 50% 0%, rgba(217,164,65,0.06), transparent 70%), var(--card);
}
.join-cta .eyebrow { justify-content: center; }
.join-cta h2 { font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 600; color: var(--white); margin-bottom: 14px; letter-spacing: -0.035em; }
.join-cta p { color: var(--muted); max-width: 430px; margin: 0 auto 30px; font-size: 0.96rem; line-height: 1.8; }
.join-cta small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 16px; opacity: .65; }

.social-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 88px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 400; color: var(--muted); text-decoration: none;
  padding: 10px 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--card);
  transition: all 0.25s var(--ease);
}
.social-btn:hover { color: var(--white); border-color: rgba(217,164,65,0.35); transform: translateY(-2px); }

/* apply */
.cs-card { padding: 48px 32px; text-align: center; position: relative; overflow: hidden; }
.cs-icon {
  width: 50px; height: 50px; background: rgba(217,164,65,0.1); border: 1px solid rgba(217,164,65,0.2);
  border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin: 0 auto 18px; color: var(--gold-lt);
}
.cs-card h3 { font-size: 1.18rem; font-weight: 600; color: var(--white); margin-bottom: 9px; letter-spacing: -0.025em; }
.cs-card p { color: var(--muted); font-size: 0.89rem; line-height: 1.75; max-width: 240px; margin: 0 auto 24px; }
.roles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 88px; }
.role-card { padding: 30px 26px; position: relative; overflow: hidden; }
.role-icon { font-size: 1.4rem; margin-bottom: 15px; display: inline-block; }
.role-card h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 8px; letter-spacing: -0.02em; }
.role-card p { color: var(--muted); font-size: 0.87rem; line-height: 1.75; }

/* news page cards */

/* post body */
.post-content-body { max-width: 760px; margin: 0 auto; }
.post-content-body p { margin-bottom: 20px; }
.post-content-body ul { margin-bottom: 20px; }
.post-content-body figure { margin: 34px 0; }
.post-content-body figure img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; display: block; }
.post-content-body h2 { margin: 44px 0 15px; }
.post-content-body h3 { margin: 32px 0 11px; }
.post-content-body blockquote { margin: 30px 0; }
.post-content-body hr { margin: 38px 0; }


/* project card fallback (dashboard preview / pre-JS state) */
.project-card { display: grid; grid-template-columns: 300px 1fr; overflow: hidden; min-height: 220px; }
.project-visual { position: relative; overflow: hidden; min-height: 200px; background-size: cover; background-position: center;
  background-image: radial-gradient(ellipse 60% 70% at 30% 26%, rgba(217,164,65,0.16), transparent 62%), linear-gradient(150deg,#141414,#080808); }
.project-info { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.project-info h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; color: var(--white); }
.project-info p { color: var(--muted); font-size: 0.92rem; line-height: 1.8; max-width: 430px; }
.platforms { display: flex; gap: 14px; flex-wrap: wrap; }
.project-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.project-logo img { max-width: 150px; max-height: 86px; object-fit: contain; }
.project-visual-name, .project-visual-label { display: none; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer { border-top: 1px solid var(--line); background: var(--bg); padding: 72px 0 32px; position: relative; }
.footer-wordmark { display: none; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.1fr; gap: 48px; margin-bottom: 52px; }
.footer-brand p { color: var(--muted); font-size: 0.88rem; line-height: 1.8; margin-top: 16px; max-width: 280px; }
.footer-col h4 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a { font-size: 0.89rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--white); }
.footer-social { display: flex; gap: 9px; margin-top: 16px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; font-size: 0.88rem;
  transition: all 0.25s var(--ease);
}
.footer-social a:hover { color: var(--gold-lt); border-color: rgba(217,164,65,0.35); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-bottom p { font-size: 0.8rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   HERO — scroll cue
   ══════════════════════════════════════════════════════════ */
.hm-scroll {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 64px;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d7d7d;
  text-decoration: none;
  transition: color 0.3s;
}
.hm-scroll span { transition: color 0.3s; }
.hm-scroll i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  font-size: 0.72rem;
  color: var(--gold);
  background: rgba(255,255,255,0.03);
  animation: cueBob 2.4s ease-in-out infinite;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hm-scroll:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════
   JOURNAL — empty state
   ══════════════════════════════════════════════════════════ */
/* oversized brand mark bleeding off the bottom */
.footer-mark {
  position: absolute;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 130%);
  opacity: 0.028;
  pointer-events: none;
  user-select: none;
}
.footer-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 76px var(--pad) 34px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 52px; margin-bottom: 56px; }
.footer-brand img { height: 54px; width: auto; object-fit: contain; display: block; }
.footer-brand p { color: var(--muted); font-size: 0.88rem; line-height: 1.8; margin-top: 20px; max-width: 290px; }
.footer-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e6e6e;
}
.footer-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5fbf82;
  box-shadow: 0 0 10px rgba(95,191,130,0.7);
}
.footer-col h4 {
  font-size: 0.73rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col ul a {
  font-size: 0.89rem; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.22s, gap 0.25s var(--ease);
}
.footer-col ul a::before {
  content: '';
  width: 0; height: 1px; background: var(--gold);
  transition: width 0.25s var(--ease);
}
.footer-col ul a:hover { color: var(--white); }
.footer-col ul a:hover::before { width: 12px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; font-size: 0.92rem;
  transition: all 0.25s var(--ease);
}
.footer-social a:hover {
  color: var(--gold-lt);
  border-color: rgba(217,164,65,0.4);
  background: rgba(217,164,65,0.08);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.81rem; color: #6e6e6e; }
.footer-bottom p b { color: var(--muted); font-weight: 400; }

/* ══════════════════════════════════════════════════════════
   HERO — scroll cue, centred at the base
   ══════════════════════════════════════════════════════════ */
.hm-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d7d7d;
  text-decoration: none;
  transition: color 0.3s;
}
.hm-scroll i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  font-size: 0.72rem;
  color: var(--gold);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  animation: cueBob 2.4s ease-in-out infinite;
  transition: border-color 0.3s, background 0.3s;
}
.hm-scroll:hover { color: var(--white); }

/* rail controls live in the section header */

/* ══════════════════════════════════════════════════════════
   JOURNAL — empty state
   ══════════════════════════════════════════════════════════ */
.hm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(217,164,65,0.055), transparent 72%),
    var(--card);
  padding: 70px 40px;
}
.hm-empty > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.hm-empty b { font-size: 1.1rem; font-weight: 600; color: var(--white); letter-spacing: -0.025em; }
.hm-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 340px at 26% 8%, rgba(217,164,65,0.07), transparent 70%),
    radial-gradient(700px 340px at 78% 92%, rgba(214,90,44,0.055), transparent 70%);
  pointer-events: none;
}
.hm-close::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.09) 22%, rgba(255,255,255,0.09) 78%, transparent);
}
.hm-close-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hm-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.hm-panel:hover { border-color: rgba(217,164,65,0.26); transform: translateY(-3px); }
.hm-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.hm-panel-eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgba(217,164,65,0.7);
}
.hm-panel h3 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 15px;
}
.hm-panel p {
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 26px;
  flex: 1;
}
.hm-panel-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* the join panel carries the accent */
.hm-panel--join {
  background:
    radial-gradient(600px 300px at 82% 0%, rgba(217,164,65,0.11), transparent 68%),
    radial-gradient(500px 280px at 10% 100%, rgba(214,90,44,0.07), transparent 70%),
    var(--card);
  border-color: rgba(217,164,65,0.2);
}
.hm-panel--join:hover { border-color: rgba(217,164,65,0.4); }
.hm-panel--join::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.55) 40%, rgba(214,90,44,0.4) 72%, transparent);
}
.hm-panel-note { font-size: 0.8rem; color: #6e6e6e; margin-top: 18px; }

/* ══════════════════════════════════════════════════════════
   FOOTER — quieter background
   ══════════════════════════════════════════════════════════ */
footer {
  position: relative;
  border-top: none;
  background: #020202;
  padding: 0;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.09) 25%, rgba(255,255,255,0.09) 75%, transparent);
}
footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 260px at 50% 100%, rgba(217,164,65,0.045), transparent 72%);
  pointer-events: none;
}
.footer-mark { display: none; }

/* ══════════════════════════════════════════════════════════
   WIDER CANVAS
   ══════════════════════════════════════════════════════════ */
.container { max-width: 1340px; }
.footer-inner { max-width: 1340px; }
.hm-hero-inner { max-width: 1340px; }

/* ══════════════════════════════════════════════════════════
   HERO — optically centred, hard edge instead of a fade
   ══════════════════════════════════════════════════════════ */
.hm-hero { padding: 170px 0 140px; }
/* the art stops on a designed line rather than dissolving */
.hm-hero-bg {
  mask-image: none;
  -webkit-mask-image: none;
}
.hm-hero-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0.07) 12%,
    rgba(217,164,65,0.55) 38%,
    rgba(214,90,44,0.45) 62%,
    rgba(255,255,255,0.07) 88%,
    transparent 100%);
}
.hm-hero-edge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(217,164,65,0.07), transparent);
  pointer-events: none;
}
.hm-scroll { bottom: 54px; }

/* ══════════════════════════════════════════════════════════
   CLOSING — open band, one accent card
   ══════════════════════════════════════════════════════════ */
.hm-close { padding: 112px 0 124px; }
.hm-close-grid {
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
}
/* left side sits directly on the page — no box */
.hm-open { display: flex; flex-direction: column; align-items: flex-start; }
.hm-open h3 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.038em;
  color: var(--white);
  margin-bottom: 18px;
}
.hm-open p {
  font-size: 1.01rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 30px;
  max-width: 520px;
}
.hm-open-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* right side is the single, deliberate card */
.hm-join {
  position: relative;
  border: 1px solid rgba(217,164,65,0.22);
  border-radius: 20px;
  padding: 42px 40px;
  overflow: hidden;
  background:
    radial-gradient(520px 300px at 88% 0%, rgba(217,164,65,0.14), transparent 68%),
    radial-gradient(420px 260px at 6% 100%, rgba(214,90,44,0.1), transparent 70%),
    #0c0c0c;
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.hm-join:hover { border-color: rgba(217,164,65,0.45); transform: translateY(-4px); }
.hm-join::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.6) 42%, rgba(214,90,44,0.45) 72%, transparent);
}
.hm-join h3 {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 14px;
}
.hm-join p { font-size: 0.95rem; line-height: 1.78; color: var(--muted); margin-bottom: 26px; }
.hm-join-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hm-join-note { font-size: 0.79rem; color: #6e6e6e; }

/* ══════════════════════════════════════════════════════════
   HERO EDGE — dark, no colour
   ══════════════════════════════════════════════════════════ */
.hm-hero-edge {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0.05) 16%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.05) 84%,
    transparent 100%);
}
.hm-hero-edge::after {
  height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}

/* ══════════════════════════════════════════════════════════
   JOIN CARD
   ══════════════════════════════════════════════════════════ */
.hm-join {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  background: #0b0b0b;
}
.hm-join:hover { border-color: rgba(217,164,65,0.34); transform: translateY(-4px); }
.hm-join::before {
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.7) 40%, rgba(214,90,44,0.5) 74%, transparent);
}
.hm-join-inner {
  position: relative;
  padding: 40px 38px 38px;
  background:
    radial-gradient(460px 260px at 88% -6%, rgba(217,164,65,0.13), transparent 66%),
    radial-gradient(380px 240px at 4% 106%, rgba(214,90,44,0.09), transparent 68%);
}
.hm-join-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--gold-lt);
  background: rgba(217,164,65,0.1);
  border: 1px solid rgba(217,164,65,0.24);
  margin-bottom: 22px;
}
.hm-join h3 { font-size: 1.5rem; margin-bottom: 13px; }
.hm-join p { font-size: 0.94rem; line-height: 1.78; color: var(--muted); margin-bottom: 0; }
.hm-join-foot {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hm-join-foot .btn { width: 100%; }
.hm-join-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.hm-join-note { font-size: 0.78rem; color: #636363; }

/* ══════════════════════════════════════════════════════════
   SCROLL PROGRESS — removed
   ══════════════════════════════════════════════════════════ */
#scroll-progress { display: none; }

/* ══════════════════════════════════════════════════════════
   HERO — plain "scroll down" cue, no circle
   ══════════════════════════════════════════════════════════ */
.hm-scroll {
  bottom: 46px;
  gap: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: #6e6e6e;
}
.hm-scroll i {
  width: auto; height: auto;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  font-size: 0.7rem;
  color: var(--gold);
  opacity: 0.9;
  animation: cueBob 2.2s ease-in-out infinite;
}
/* a thin line that travels downward, instead of a bobbing circle */
.hm-scroll::after { content: none; }
@keyframes scrollLine {
  0%   { transform: scaleY(0); opacity: 0; }
  22%  { opacity: 1; }
  72%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.hm-scroll:hover { color: var(--white); }
@media(max-width:760px){
  .nav-logo-mark { height: 36px; }
  .nav-logo-text b { font-size: 0.84rem; }
  .nav-logo-text > span { font-size: 0.57rem; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER LOCKUP — same construction as the nav, scaled up
   ══════════════════════════════════════════════════════════ */
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: opacity 0.3s;
}
.footer-lockup:hover { opacity: 0.82; }
.footer-logo-mark {
  height: 54px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-logo-text { display: flex; flex-direction: column; line-height: 1; }
.footer-logo-text b {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.footer-logo-text > span {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.394em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-top: 6px;
  margin-right: -0.394em;
}
@media(max-width:760px){
  .footer-logo-mark { height: 46px; }
  .footer-logo-text b { font-size: 1.05rem; }
  .footer-logo-text > span { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════
   WIDER PAGE
   ══════════════════════════════════════════════════════════ */
/* One width for everything, so the hero headline, the section headings and
   the tiles all share a left edge. 1800 made the tiles big but stranded the
   hero text at the screen edge; 1600 keeps both workable. */
.container { max-width: 1600px; }
.hm-hero-inner { max-width: 1600px; }
.footer-inner { max-width: 1600px; }

@media(max-width:760px){
  .gcard-mark { top: 42%; }
}

/* ══════════════════════════════════════════════════════════
   PROJECT TILES
   Steam library-capsule proportions (2:3 — export art at 600x900).
   Frameless poster, logo centred, frosted caption bar at the base.
   ══════════════════════════════════════════════════════════ */
.projects-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.gcard {
  position: relative;
  flex: 0 0 calc((100% - 66px) / 4);
  display: block;
  cursor: pointer;
  transition: transform 0.5s var(--ease);
}
.gcard:hover { transform: none; }
.gcard:focus-visible { outline: none; }
.gcard:focus-visible .gcard-media { box-shadow: inset 0 0 0 2px var(--gold); }

/* ── the poster ── */
.gcard-media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b0c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.055);
  transition: box-shadow 0.45s;
}
.gcard:hover .gcard-media { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }

.gcard-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease);
}
.gcard:hover .gcard-art { transform: scale(1.03); }

/* no artwork: brand pattern with a warm wash, alternating tint */
.gcard-art--empty {
  background-color: #0b0b0c;
  background-image:
    radial-gradient(ellipse 80% 54% at 50% 30%, rgba(217,164,65,0.17), transparent 68%),
    url('/uploads/1775428848_dls1.jpg');
  background-size: auto, 360px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
.gcard:nth-child(2n) .gcard-art--empty {
  background-image:
    radial-gradient(ellipse 80% 54% at 50% 30%, rgba(214,90,44,0.16), transparent 68%),
    url('/uploads/1775428848_dls1.jpg');
}

.gcard-media-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.28) 0%, transparent 42%);
}

/* ── logo / name, centred in the poster ── */
.gcard-mark {
  position: absolute;
  left: 0; right: 0;
  top: 41%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}
.gcard-logo {
  max-width: 84%;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.85));
}
.gcard-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,0.8);
}

/* ── frosted caption bar ── */
.gcard-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 58px 20px 20px;
  background: linear-gradient(0deg,
    rgba(6,6,7,0.96) 0%,
    rgba(6,6,7,0.9) 34%,
    rgba(6,6,7,0.62) 62%,
    rgba(6,6,7,0.24) 82%,
    transparent 100%);
}


/* the project name, set large in the middle of the poster */
.gcard-postertitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.5rem, 1.7vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 26px rgba(0,0,0,0.9);
}
.gcard-postertitle::after {
  content: '';
  width: 52px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gold), var(--ember-lt));
  box-shadow: 0 0 14px rgba(217,164,65,0.5);
}

.gcard-name {
  font-size: 1.16rem;
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gcard-meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.gcard-meta .gcard-dot { color: rgba(255,255,255,0.24); margin: 0 7px; }
.gcard-meta .st-dev    { color: var(--gold-lt); }
.gcard-meta .st-live   { color: #6fd096; }
.gcard-meta .st-beta   { color: var(--ember-lt); }
.gcard-meta .st-paused { color: rgba(255,255,255,0.55); }

.gcard-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font-size: 0.87rem;
  font-weight: 500;
  color: #fff;
  padding: 13px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.14);
  transition: all 0.28s var(--ease);
}
.gcard-cta i { font-size: 0.64rem; transition: transform 0.28s var(--ease); }
.gcard:hover .gcard-cta { background: #fff; color: #0a0a0a; }
.gcard:hover .gcard-cta i { transform: translateX(3px); }
.gcard-cta--soon,
.gcard:hover .gcard-cta--soon {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.42);
  cursor: default;
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
   Transparent at the top; contracts into a glass island on scroll.
   ══════════════════════════════════════════════════════════ */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  width: 100%;
  transition: padding 0.45s var(--ease);
}
.nav-wrap.scrolled { padding: 14px 0; }

/* the site header, and only it: a bare `nav` selector also caught the
   contents rail on the legal pages and laid its three parts out in a row */
.nav-wrap > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px var(--pad);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    padding 0.45s var(--ease),
    max-width 0.45s var(--ease),
    background 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.nav-wrap.scrolled nav {
  max-width: 880px;
  padding: 9px 9px 9px 20px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  /* border-color left at the transparent the base nav rule sets */
  border-radius: 90px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 10px 34px rgba(0,0,0,0.5);
}

/* ── logo lockup ── */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.logo-dot { display: none; }
.nav-logo-mark {
  height: 42px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: height 0.45s var(--ease);
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; transition: opacity 0.3s; }
.nav-logo-text b {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.nav-logo-text > span {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.394em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-top: 5px;
  margin-right: -0.394em;
}
.logo:hover .nav-logo-text { opacity: 0.78; }
.nav-wrap.scrolled .nav-logo-mark { height: 34px; }
.nav-wrap.scrolled .nav-logo-text b { font-size: 0.84rem; }
.nav-wrap.scrolled .nav-logo-text > span { font-size: 0.58rem; }

/* ── links ── */
.nav-links { list-style: none; display: flex; align-items: center; gap: 3px; }
.nav-links a {
  position: relative;
  display: block;
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.56);
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.22s, background 0.22s;
}
.nav-links a:hover { color: #fff; background: transparent; }
.nav-links a.active { color: #fff; background: transparent; }
/* the active page is marked with a short gold rule instead of a pill */
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold), var(--ember-lt));
  box-shadow: 0 0 10px rgba(217,164,65,0.55);
}
.nl-staff-link { color: rgba(255,255,255,0.3) !important; font-size: 0.82rem !important; }
.nl-staff-link:hover { color: rgba(255,255,255,0.7) !important; }
.nl-staff-link.active { color: #fff !important; }
.nav-wrap.scrolled .nav-links a { padding: 7px 13px; font-size: 0.85rem; }

/* ── call to action — matches the buttons on the project tiles ── */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.87rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.13);
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.28s, color 0.28s;
}
.nav-cta::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.62rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease), color 0.28s;
}
.nav-cta:hover { background: #fff; color: #0a0a0a; }
.nav-cta:hover::after { color: #0a0a0a; transform: translateX(3px); }
.nav-wrap.scrolled .nav-cta { padding: 9px 18px; font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════════
   HERO — centred composition
   The art now reads behind the text rather than beside it, so
   the scrim becomes a vignette and everything stacks on the
   centre line. Type is bigger, the buttons are pills.
   ══════════════════════════════════════════════════════════ */
.hm-hero { padding: 146px 0 138px; }

/* darken from the frame inwards instead of left-to-right */
.hm-hero-scrim {
  background:
    radial-gradient(ellipse 74% 62% at 50% 46%, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.92) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.86) 14%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.62) 100%);
}
/* a slow drift keeps the key art alive without asking for attention */
.hm-hero-art { animation: artIn 2.6s var(--ease) 0.1s forwards, heroDrift 34s ease-in-out 2.6s infinite; }
@keyframes heroDrift {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.hm-hero-inner {
  max-width: 1080px;
  align-items: center;
  text-align: center;
}

/* eyebrow becomes a glass chip */
.hm-hero .hm-eyebrow {
  padding: 8px 17px 8px 14px;
  margin-bottom: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.84);
  letter-spacing: 0.16em;
}
.hm-hero .hm-eyebrow::before {
  box-shadow: 0 0 12px rgba(217,164,65,0.9);
  animation: heroDot 2.6s var(--ease) infinite;
}
@keyframes heroDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

.hm-hero-title {
  font-size: clamp(3rem, 7.4vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin-bottom: 26px;
  text-shadow: 0 6px 40px rgba(0,0,0,0.5);
}
.hm-hero-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #b4b4b4;
  max-width: 570px;
  margin: 0 auto 40px;
}
.hm-hero-actions { justify-content: center; gap: 14px; }

/* pills, with the brand gradient on the primary */
.hm-hero-actions .btn {
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
}
.hm-hero-actions .btn-gold {
  font-weight: 600;
  color: #1a1206;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 46%, var(--ember-lt) 100%);
  box-shadow: 0 12px 32px rgba(217,164,65,0.24);
}
.hm-hero-actions .btn-gold:hover {
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold-lt) 46%, var(--ember-lt) 100%);
  box-shadow: 0 18px 44px rgba(217,164,65,0.34);
}
.hm-hero-actions .btn-outline {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hm-hero-actions .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

/* a quiet line of facts under the buttons, on the same centre line */
.hm-hero-facts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
  max-width: 620px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.hm-hero-facts b { color: #fff; font-weight: 600; margin-right: 7px; }
.hm-hero-facts span { display: inline-flex; align-items: center; }
.hm-hero-facts .hm-hero-sep { color: rgba(255,255,255,0.16); }

@media(max-width:760px){
  .hm-hero { padding: 116px 0 92px; }
  .hm-hero .hm-eyebrow { margin-bottom: 22px; font-size: 0.68rem; }
  .hm-hero-title { margin-bottom: 20px; }
  .hm-hero-sub { font-size: 1rem; margin-bottom: 30px; }
  .hm-hero-actions { width: 100%; }
  .hm-hero-actions .btn { flex: 1 1 auto; }
  .hm-hero-facts { margin-top: 34px; padding-top: 20px; gap: 10px 20px; font-size: 0.66rem; }
  .hm-hero-facts .hm-hero-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-art { animation: none; opacity: 1; transform: none; }
  .hm-hero .hm-eyebrow::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   HERO — SHOWCASE
   The front page leads with the work, not with a pitch: one
   project fills the screen at a time and the reel advances on
   its own. Content sits along the bottom-left, controls on the
   bottom-right. Built from the live project list.
   ══════════════════════════════════════════════════════════ */
.hs {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #08080a;
}

/* ── slides ── */
.hs-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease);
}
.hs-slide.is-on {
  opacity: 1;
  animation: hsDrift 16s linear forwards;
}
@keyframes hsDrift { from { transform: scale(1.06); } to { transform: scale(1.13); } }

.hs-slide--empty {
  background-color: #0a0a0b;
  background-image:
    radial-gradient(ellipse 60% 76% at 28% 44%, rgba(217,164,65,0.55), transparent 74%),
    radial-gradient(ellipse 70% 60% at 88% 96%, rgba(214,90,44,0.42), transparent 72%),
    linear-gradient(rgba(217,164,65,0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.075) 1px, transparent 1px),
    url('/uploads/1775428848_dls1.jpg');
  background-size: auto, auto, 84px 84px, 84px 84px, 400px auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
}

.hs-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.86) 13%, rgba(0,0,0,0.34) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.28) 38%, transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 18%);
}

/* ── content ── */
.hs-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad) 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.hs-body {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}
.hs-logo {
  flex-shrink: 0;
  width: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-logo img {
  max-width: 100%;
  max-height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,0.9));
}
.hs-text { min-width: 0; }

.hs-kicker {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.hs-kicker i {
  font-style: normal;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(217,164,65,0.9);
}
.hs-kicker s { text-decoration: none; color: rgba(255,255,255,0.28); }

.hs-title {
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  max-width: 820px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 28px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.hs-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.hs-btn i { font-size: 0.72rem; transition: transform 0.3s var(--ease); }
.hs-btn:hover { transform: translateY(-2px); }
.hs-btn--gold {
  font-weight: 600;
  color: #1a1206;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 46%, var(--ember-lt) 100%);
  box-shadow: 0 12px 32px rgba(217,164,65,0.24);
}
.hs-btn--gold:hover { box-shadow: 0 18px 44px rgba(217,164,65,0.36); }
.hs-btn--gold:hover i { transform: translateX(3px); }
.hs-btn--ghost {
  color: #fff;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hs-btn--ghost:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.34); }

/* ── reel controls ── */
.hs-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  padding-bottom: 6px;
}
.hs-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.84);
  font-size: 0.66rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.hs-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.34); }

.hs-dots { display: flex; align-items: center; gap: 9px; }
.hs-dot {
  position: relative;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  overflow: hidden;
  transition: width 0.45s var(--ease), background 0.3s;
}
.hs-dot:hover { background: rgba(255,255,255,0.4); }
.hs-dot.is-on { width: 62px; background: rgba(255,255,255,0.24); }
.hs-dot.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--ember-lt));
  animation: hsFill var(--hs-dur, 7s) linear forwards;
}
.hs-dot.is-on.is-held::after { animation-play-state: paused; }
@keyframes hsFill { to { transform: scaleX(1); } }

/* ── a quiet scroll hint, aligned to the content edge ── */
.hs-hint {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  text-decoration: none;
  transition: color 0.3s;
}
.hs-hint i { color: var(--gold); font-size: 0.68rem; animation: cueBob 2.2s ease-in-out infinite; }
.hs-hint:hover { color: #fff; }

@media(max-width:1080px){
  .hs-logo { width: 160px; }
  .hs-logo img { max-height: 128px; }
  .hs-body { gap: 28px; }
}
@media(max-width:860px){
  .hs-inner { flex-direction: column; align-items: flex-start; gap: 30px; padding-bottom: 56px; }
  .hs-body { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hs-logo { width: auto; justify-content: flex-start; }
  .hs-logo img { max-height: 96px; max-width: 260px; }
  .hs-title { max-width: none; font-size: 1.9rem; margin-bottom: 22px; }
  .hs-kicker { font-size: 0.66rem; letter-spacing: 0.15em; gap: 9px; margin-bottom: 14px; }
  .hs-controls { width: 100%; justify-content: flex-start; }
  .hs-hint { display: none; }
  .hs-cta { width: 100%; }
  .hs-cta .hs-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide.is-on { animation: none; transform: none; }
  .hs-dot.is-on::after { animation: none; transform: scaleX(1); }
  .hs-hint i { animation: none; }
}



/* ══════════════════════════════════════════════════════════
   HERO
   Type on black at the top, the key art in a wide frame below
   it that runs off the bottom of the screen. The art is given
   room to be looked at instead of being used as wallpaper the
   text has to fight.
   ══════════════════════════════════════════════════════════ */
.hr {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #000;
  overflow: hidden;
}

/* ── the words ── */
.hr-top {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 168px var(--pad) 52px;
}
.hr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}
.hr-eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.hr-title {
  font-size: clamp(2.4rem, 5.8vw, 5.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.048em;
  color: var(--white);
  max-width: 17ch;
  margin-bottom: 30px;
}
.hr-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 44%, var(--ember-lt) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hr-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  max-width: 400px;
  margin: 0;
}
.hr-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hr-btn i { font-size: 0.7rem; transition: transform 0.3s var(--ease); }
.hr-btn:hover { transform: translateY(-2px); }
.hr-btn:hover i { transform: translateX(3px); }
.hr-btn--gold {
  font-weight: 600;
  color: #1a1206;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 46%, var(--ember-lt) 100%);
  box-shadow: 0 12px 32px rgba(217,164,65,0.22);
}
.hr-btn--gold:hover { box-shadow: 0 18px 44px rgba(217,164,65,0.34); }
.hr-btn--ghost {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.hr-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }

/* ── the frame ── */
.hr-frame {
  position: relative;
  flex: 1;
  min-height: 300px;
  width: calc(100% - var(--pad) * 2);
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 -20px 90px rgba(217,164,65,0.07);
}
.hr-art {
  position: absolute;
  inset: 0;
  background-image: url('/img/backdrop-1920.jpg');
  background-size: cover;
  background-position: center 56%;
  opacity: 0;
  transform: scale(1.04);
  animation: hrIn 2.2s var(--ease) 0.15s forwards, hrBreathe 46s ease-in-out 2.4s infinite alternate;
}
@keyframes hrIn { to { opacity: 1; transform: scale(1); } }
@keyframes hrBreathe { to { transform: scale(1.08); } }

/* the art dissolves into the page instead of stopping on a line */
.hr-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.7) 12%, rgba(0,0,0,0.15) 30%, transparent 48%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 22%);
}

/* a quiet note on what you are looking at */
.hr-note {
  position: absolute;
  z-index: 2;
  left: 26px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hr-note i {
  font-style: normal;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(217,164,65,0.9);
}
.hr-note s { text-decoration: none; color: rgba(255,255,255,0.22); }

@media(max-width:900px){
  .hr-top { padding: 138px var(--pad) 40px; }
  .hr-title { max-width: none; margin-bottom: 26px; }
  .hr-row { align-items: flex-start; gap: 22px; }
  .hr-frame { border-radius: 20px 20px 0 0; min-height: 240px; }
}
@media(max-width:640px){
  .hr-top { padding: 122px var(--pad) 34px; }
  .hr-sub { font-size: 0.96rem; }
  .hr-cta { width: 100%; }
  .hr-cta .hr-btn { flex: 1 1 auto; }
  .hr-note { left: 18px; bottom: 16px; font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-art { animation: none; opacity: 1; transform: none; }
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  :root { --pad: 40px; }
  .work { gap: 44px; }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-top > div:last-child { grid-column: 1 / -1; }
}

@media(max-width:900px){
  .gcard { flex: 0 0 calc((100% - 44px) / 3); }
  .hm-close-grid { grid-template-columns: 1fr; gap: 42px; }
  .hm-join-inner { padding: 34px 30px; }
  .two-col { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  #home-news-list { grid-template-columns: 1fr; }
  .hm-featured-body { padding: 40px 36px; }
}

@media(max-width:760px){
  :root { --pad: 22px; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-wrap::after { opacity: 1; border-bottom-color: var(--line); }

  .hm-hero { min-height: 88vh; padding: 120px 0 0; }
  .hm-hero-title { font-size: 2.4rem; }
  .hm-hero-sub { font-size: 0.98rem; margin-bottom: 32px; }
  .hm-hero-actions { margin-bottom: 52px; width: 100%; }
  .hm-hero-actions .btn { flex: 1; min-width: 140px; }
  .hm-scroll { margin-top: 44px; }
  .hm-scroll { display: none; }

  .hm-section { padding: 64px 0; }
  .hm-section--first { padding-top: 72px; }
  .hm-empty { padding: 48px 26px; }
  .hm-hero::after { height: 120px; }

  .hm-featured, .hm-featured-body { min-height: 420px; }
  .hm-featured-body { padding: 32px 26px; }
  .section { padding: 64px 0; }

  .page-header { padding: 120px 0 32px; margin-bottom: 36px; }
  .roles-grid { grid-template-columns: 1fr 1fr; }
  .project-card { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-top > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .join-cta { padding: 44px 24px; }
}


@media(max-width:480px){
  .hm-hero-title { font-size: 2.05rem; }
  .team-grid, .roles-grid { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .gcard-media { aspect-ratio: 2 / 3; }
  .gcard-logo { max-height: 60px; }
  .gcard-title { font-size: 1.15rem; }
  .gcard { aspect-ratio: auto; }
  .gcard-title { font-size: 1.22rem; }
  .gcard-desc { -webkit-line-clamp: 2; }
  .gcard-body { margin: -48px 12px 0; padding: 20px 20px 20px; }
  .gcard-foot { margin-top: 16px; padding-top: 15px; }
  .hm-join-inner { padding: 30px 26px 28px; }
  .hm-close { padding: 68px 0 78px; }
  .hm-join h3, .hm-open h3 { font-size: 1.5rem; }
  .hm-scroll { bottom: 26px; }
  .hm-hero { padding: 104px 0 130px; }
  .nav-wrap.scrolled nav { max-width: none; border-radius: 13px; margin: 0 14px; }
  .work-title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; }
  .hm-hero-art { animation: none; opacity: 1; transform: none; }
  .hm-scroll::after { animation: none; }
  .fade { transition-duration: 0.001s; }
  html { scroll-behavior: auto; }
}

/* ── APPLICATION FORM ── */
.apply-form-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(28px, 2.4vw, 40px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.apply-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,148,58,0.45), transparent);
}
.form-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}
.form-title::before {
  content: '';
  width: 3px; height: 17px;
  background: linear-gradient(to bottom, var(--gold-hi), var(--gold));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(201,148,58,0.5);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-upload-label {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card2);
  border: 1px dashed var(--border2);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
  font-size: 0.82rem;
  color: var(--muted);
}
.cv-upload-label:hover { border-color: var(--gold); background: rgba(201,148,58,0.05); color: var(--text); }
.cv-upload-label.has-file { border-color: rgba(201,148,58,0.45); background: rgba(201,148,58,0.07); color: var(--gold-lt); }
.cv-upload-icon { font-size: 1.2rem; flex-shrink: 0; }
.cv-upload-input { display: none; }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-group label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.87rem;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  width: 100%;
  resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #55555e; }
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: rgba(255,255,255,0.2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  background-color: rgba(201,148,58,0.04);
  box-shadow: 0 0 0 3px rgba(201,148,58,0.12);
}
.form-group select {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5 6 6.5 11 1.5%27 fill=%27none%27 stroke=%27%23888888%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-group select option { background: #16161c; }
.form-error {
  background-color: rgba(220,38,38,0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%277%27 fill=%27none%27 stroke=%27%23f87171%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M8 4.4v4.2%27 stroke=%27%23f87171%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%278%27 cy=%2711.2%27 r=%270.9%27 fill=%27%23f87171%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  border: 1px solid rgba(220,38,38,0.24);
  color: #f87171;
  border-radius: 10px;
  padding: 13px 16px 13px 44px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
/* the send button lines up with the fields above it */
.apply-form-card .btn { border-radius: 10px; }
.apply-success {
  text-align: center;
  padding: 24px 0;
}
.success-icon {
  width: 62px; height: 62px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
  color: #4ade80;
  box-shadow: 0 0 30px rgba(34,197,94,0.15);
  animation: popIn 0.4s cubic-bezier(.22,1,.36,1);
}
@keyframes popIn { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
.apply-success h3 { font-family: var(--font-body); font-size: 1.3rem; color: var(--white); margin-bottom: 9px; }
.apply-success p { color: var(--muted); font-size: 0.88rem; line-height: 1.75; }

/* ── DASHBOARD ── */
.dash-filter {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.dash-filter:hover { color: var(--white); border-color: rgba(255,255,255,0.25); }
.dash-filter.active { background: var(--gold); color: #0e0e0e; border-color: var(--gold); }

.app-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
}
.app-card:hover { border-color: rgba(201,148,58,0.25); transform: translateY(-1px); }
.app-card-avatar {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(201,148,58,0.1);
  border: 1px solid rgba(201,148,58,0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; color: var(--gold);
  flex-shrink: 0;
}
.app-card-name { font-weight: 600; font-size: 0.95rem; color: var(--white); margin-bottom: 3px; }
.app-card-meta { font-size: 0.78rem; color: var(--muted); }
.app-card-date { font-size: 0.72rem; color: var(--muted); text-align: right; white-space: nowrap; }
.app-status {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: normal;
}
.status-new      { background:rgba(59,130,246,0.12); color:#60a5fa; border:1px solid rgba(59,130,246,0.25); }
.status-reviewed { background:rgba(168,85,247,0.12); color:#c084fc; border:1px solid rgba(168,85,247,0.25); }
.status-shortlisted { background:rgba(34,197,94,0.12); color:#4ade80; border:1px solid rgba(34,197,94,0.25); }
.status-rejected { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); }

.modal-label { font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.modal-value { font-size:0.9rem; color:var(--text); margin-bottom:18px; line-height:1.7; word-break:break-word; overflow-wrap:break-word; }
.modal-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.modal-btn {
  font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:8px; border:1px solid var(--border2);
  background:transparent; color:var(--muted); cursor:pointer; transition:all 0.2s;
}
.modal-btn:hover { color:var(--white); border-color:rgba(255,255,255,0.25); }
.modal-btn.active-status { border-color:var(--gold); color:var(--gold); background:rgba(201,148,58,0.08); }

.dash-stat-chip {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 14px;
  font-size:0.78rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.dash-stat-chip strong { color:var(--white); font-weight:700; }

@media(max-width:760px){
  .form-row { grid-template-columns:1fr; }
  .app-card { grid-template-columns:auto 1fr; }
  .app-card-date { display:none; }
}

/* ── VIDEO MODAL ── */
#video-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:9100;
  background:
    radial-gradient(120% 100% at 50% 42%, rgba(24,14,4,0.82), rgba(3,3,5,0.95) 78%);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 4vw, 48px);
}
#video-modal.open { display:flex; animation: modalFade 0.3s var(--ease); }
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
#video-modal-inner {
  width:100%;
  max-width:1060px;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#07070a;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 50px 130px rgba(0,0,0,0.9),
    0 0 80px rgba(242,148,29,0.09);
  animation: modalPop 0.4s var(--ease);
}
@keyframes modalPop { from { transform: scale(0.96) translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
#video-modal-body { position:relative; line-height:0; }

/* the title and the close float over the picture on a scrim rather
   than sitting in a strip above it, so the video owns the whole card.
   The bar itself lets clicks through — only the button takes them. */
#video-modal-chrome {
  position:absolute;
  top:0; left:0; right:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 14px 44px;
  background:linear-gradient(180deg, rgba(4,3,2,0.72), rgba(4,3,2,0));
  pointer-events:none;
}
#video-modal-title {
  font-family: var(--font-body);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.2em;
  line-height:1;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
  text-shadow:0 2px 12px rgba(0,0,0,0.7);
  padding-left:6px;
}
#video-modal-close {
  pointer-events:auto;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  flex-shrink:0;
  border-radius:50%;
  background:rgba(10,8,6,0.5);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.85);
  font-size:0.9rem;
  cursor:pointer;
  transition:background 0.22s, border-color 0.22s, color 0.22s;
}
#video-modal-close:hover { color:#fff; background:rgba(10,8,6,0.82); border-color:#fff; }
#video-modal-close:focus-visible { outline:2px solid #f2941d; outline-offset:3px; }

.btn-trailer {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-size:0.73rem;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--white);
  background:rgba(201,148,58,0.1);
  border:1px solid rgba(201,148,58,0.3);
  padding:6px 16px 6px 6px;
  border-radius:999px;
  cursor:pointer;
  transition:all 0.25s var(--ease);
  text-decoration:none;
  line-height:1;
}
.btn-trailer:hover {
  background:rgba(201,148,58,0.2);
  border-color:rgba(201,148,58,0.55);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(201,148,58,0.18);
}
.btn-trailer-icon {
  width:26px; height:26px;
  background:linear-gradient(160deg, var(--gold-hi), var(--gold));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.55rem;
  color:#120d04;
  flex-shrink:0;
  transition:transform 0.25s var(--ease);
}
.btn-trailer:hover .btn-trailer-icon { transform:scale(1.12); }

/* ── DASHBOARD TABS ── */
.dash-tabs {
  display:flex;
  gap:4px;
  margin-bottom:28px;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
}
.dash-tab {
  font-size:0.82rem;
  font-weight:600;
  padding:10px 18px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  cursor:pointer;
  transition:all 0.2s;
  margin-bottom:-1px;
}
.dash-tab:hover { color:var(--text); }
.dash-tab.active { color:var(--white); border-bottom-color:var(--gold); }

.dash-section { display:none; }
.dash-section.active { display:block; }

/* ── PROJECT EDITOR CARDS ── */
.proj-edit-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}
.proj-edit-icon {
  width:44px; height:44px;
  background:rgba(201,148,58,0.1);
  border:1px solid rgba(201,148,58,0.2);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.proj-edit-name { font-weight:700; font-size:0.95rem; color:var(--white); margin-bottom:3px; }
.proj-edit-meta { font-size:0.78rem; color:var(--muted); }
.proj-edit-actions { display:flex; gap:8px; }

/* ── MEMBER EDITOR CARDS ── */
.member-edit-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 22px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  margin-bottom:10px;
}
.member-edit-avatar {
  width:40px; height:40px;
  border-radius:10px;
  background:rgba(201,148,58,0.1);
  border:1px solid rgba(201,148,58,0.2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.95rem; color:var(--gold);
  flex-shrink:0;
}

/* ── EDITOR MODAL ── */
.editor-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
  padding:24px 16px;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
}
.editor-modal.open {
  display:flex;
}
.editor-modal-box {
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:16px;
  width:100%;
  max-width:820px;
  max-height:calc(100vh - 48px);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.editor-modal-head {
  padding:18px 24px 14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:var(--card2);
  border-radius:16px 16px 0 0;
  z-index:2;
}
.editor-modal-title {
  font-size:1.05rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:-0.01em;
  margin:0;
}
.editor-close {
  background:none; border:none;
  color:var(--muted); font-size:1.1rem;
  cursor:pointer; transition:color 0.2s;
  flex-shrink:0;
  padding:4px;
}
.editor-close:hover { color:var(--white); }
#editor-body {
  padding:12px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
  overflow-y:auto;
  flex:1;
}
#editor-body .form-group,
#editor-body .form-row {
  grid-column: span 2;
  margin-bottom: 6px;
}
#editor-body .form-group p,
#editor-body .form-group > p {
  margin-top: 2px;
  margin-bottom: 0;
}
#editor-body .form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#editor-body .form-row .form-group {
  grid-column: span 1;
}
.editor-footer {
  padding:14px 24px 18px;
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  position:sticky;
  bottom:0;
  background:var(--card2);
  border-radius:0 0 16px 16px;
  z-index:2;
}

/* status badges for projects */
.proj-status-live       { background:rgba(34,197,94,0.12); color:#4ade80; border:1px solid rgba(34,197,94,0.25); }
.proj-status-dev        { background:rgba(201,148,58,0.12); color:var(--gold-lt); border:1px solid rgba(201,148,58,0.25); }
.proj-status-paused     { background:rgba(100,100,100,0.12); color:#888; border:1px solid rgba(100,100,100,0.25); }
.proj-status-announced  { background:rgba(59,130,246,0.12); color:#60a5fa; border:1px solid rgba(59,130,246,0.25); }
.proj-status-beta       { background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.25); }

@media(max-width:760px){
  /* dash tabs - scrollable row */
  .dash-tabs { gap:2px; flex-wrap:wrap; }
  .dash-tab { font-size:0.72rem; padding:8px 12px; white-space:nowrap; flex-shrink:0; }

  /* proj/member cards - stack icon+info, actions below */
  .proj-edit-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap:10px 12px; padding:16px 16px; }
  .proj-edit-card .proj-edit-actions { grid-column: 1 / -1; border-top:1px solid var(--border); padding-top:10px; margin-top:2px; }
  .member-edit-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap:10px 12px; padding:14px 16px; }
  .member-edit-card .proj-edit-actions { grid-column: 1 / -1; border-top:1px solid var(--border); padding-top:10px; margin-top:2px; }

  /* dash section add buttons row */
  .dash-section > div:first-child { flex-direction:column; align-items:flex-start; gap:10px; }
  .dash-section > div:first-child button { width:100%; justify-content:center; }
}



/* ── TOAST NOTIFICATION ── */
#dls-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999999;
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--card2);
  border: 1px solid rgba(201,148,58,0.3);
  border-radius: 12px;
  padding: 13px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.22,1,.36,1);
}
#dls-toast.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
#dls-toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--gold);
}

/* ── EDITOR MODAL SCROLLBAR ── */
#editor-body::-webkit-scrollbar { width: 6px; }
#editor-body::-webkit-scrollbar-track { background: transparent; }
#editor-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
#editor-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── CUSTOM DIALOG ── */
#dls-dialog-overlay {
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px);
  align-items:center;
  justify-content:center;
}
#dls-dialog-overlay.open { display:flex; }
#dls-dialog-box {
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:32px 28px 24px;
  width:100%;
  max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  animation:dialogIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dialogIn {
  from { opacity:0; transform:scale(0.92) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
#dls-dialog-icon {
  font-size:1.8rem;
  margin-bottom:14px;
  line-height:1;
}
#dls-dialog-title {
  font-size:1rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:8px;
  letter-spacing:-0.01em;
}
#dls-dialog-msg {
  font-size:0.86rem;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:24px;
}
#dls-dialog-btns {
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ── ANALYTICS & CHANGELOG ── */
/* custom scrollbar for activity/changelog panels */
#analytics-activity::-webkit-scrollbar,
#changelog-list::-webkit-scrollbar { width:5px; }
#analytics-activity::-webkit-scrollbar-track,
#changelog-list::-webkit-scrollbar-track { background:transparent; }
#analytics-activity::-webkit-scrollbar-thumb,
#changelog-list::-webkit-scrollbar-thumb { background:rgba(201,148,58,0.2); border-radius:999px; }
#analytics-activity::-webkit-scrollbar-thumb:hover,
#changelog-list::-webkit-scrollbar-thumb:hover { background:rgba(201,148,58,0.4); }
/* the shared dashboard scrollbar owns these now — see the sixth pass */

.analytics-stat-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.analytics-stat-card .asc-num {
  font-size:1.6rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:-0.02em;
  line-height:1;
}
.analytics-stat-card .asc-label {
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2px;
}
.analytics-stat-card .asc-change {
  font-size:0.72rem;
  font-weight:600;
  margin-top:4px;
}

@media(max-width:760px) {
  #analytics-overview { grid-template-columns:1fr 1fr !important; }
  #tab-analytics > div:nth-child(3) { grid-template-columns:1fr !important; }
}

/* ── CUSTOM GOLD CURSOR ── */
*, *::before, *::after { cursor: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2725%27 height=%2725%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 2 L4 18 L8 14 L11 20 L13 19 L10 13 L16 13 Z%27 fill=%27%23C9943A%27 stroke=%27%230e0e0e%27 stroke-width=%271.2%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E') 4 2, auto !important; }
a, button, [onclick], [role="button"], select, label, input[type="checkbox"], input[type="radio"], input[type="file"], input[type="submit"], input[type="button"], .hamburger, .dash-tab, .modal-btn, .btn, .pap-btn, .btn-trailer, .nav-link, .proj-edit-card, .nwr, .hero-game-card, .team-card, .app-card, .role-card, .info-card, [style*="cursor:pointer"], [style*="cursor: pointer"] { cursor: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2725%27 height=%2725%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 2 L4 18 L8 14 L11 20 L13 19 L10 13 L16 13 Z%27 fill=%27%23E8A830%27 stroke=%27%230e0e0e%27 stroke-width=%271.2%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E') 4 2, pointer !important; }

/* ══════════════════════════════════════════════════════════
   DASHBOARD — aligned with the new palette
   ══════════════════════════════════════════════════════════ */
.dash-tab { font-size: 0.88rem; font-weight: 500; letter-spacing: -0.005em; text-transform: none; }
.dash-tab.active { border-bottom-color: var(--gold); }
.dash-filter { font-size: 0.78rem; font-weight: 450; letter-spacing: 0.02em; text-transform: none; }
.dash-filter.active { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.app-card, .proj-edit-card, .member-edit-card { background: var(--card); border-radius: 12px; }
.dash-stat-chip { background: var(--card); }
.app-card-name, .proj-edit-name { letter-spacing: -0.02em; }
.proj-edit-icon, .member-edit-avatar, .app-card-avatar {
  background: rgba(217,164,65,0.1);
  border-color: rgba(217,164,65,0.2);
  color: var(--gold-lt);
}

/* ── INTRO OVERLAY ── */
#dls-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(217,164,65,0.055), rgba(217,164,65,0) 62%),
    radial-gradient(100% 70% at 50% 118%, rgba(217,164,65,0.028), rgba(0,0,0,0) 70%),
    #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
/* fine grain — the overlay outranks body::after, so it carries its own */
#dls-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* vignette — keeps the centre lit and the edges deep */
#dls-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(72% 62% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.55) 100%);
}
#dls-intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#dls-intro-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* lockup — the same mark + wordmark the nav and footer use */
#dls-intro-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
  margin-bottom: 30px;
}
#dls-intro-logo.in { opacity: 1; transform: none; }
#dls-intro-mark {
  height: 78px;
  width: auto;
  /* logod.png is 3023x2663; declaring the ratio reserves the box before
     the file arrives, so the centred lockup no longer jumps sideways */
  aspect-ratio: 3023 / 2663;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 26px rgba(217,164,65,0.18));
}
#dls-intro-word { display: flex; flex-direction: column; line-height: 1; }
#dls-intro-word b {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
#dls-intro-word > span {
  font-size: 1.12rem;
  font-weight: 300;
  letter-spacing: 0.394em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-top: 9px;
  margin-right: -0.394em;
}

/* tagline — the site's eyebrow treatment, on its own */
#dls-intro-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
#dls-intro-tagline.in { opacity: 1; }
#dls-intro-tagline > span { margin-right: -0.2em; }

#dls-intro-bar {
  width: 210px;
  height: 1px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
}
#dls-intro-bar.in { opacity: 1; }
#dls-intro-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-hi));
  box-shadow: 0 0 12px rgba(217,164,65,0.5);
  transition: width 0.95s cubic-bezier(.4,0,.2,1);
}
#dls-intro-bar-fill.go { width: 100%; }
@media(max-width:760px){
  #dls-intro-logo { gap: 14px; margin-bottom: 24px; }
  #dls-intro-mark { height: 58px; }
  #dls-intro-word b { font-size: 1.28rem; }
  #dls-intro-word > span { font-size: 0.85rem; margin-top: 7px; }
  #dls-intro-tagline { font-size: 0.64rem; gap: 10px; margin-bottom: 26px; }
  #dls-intro-bar { width: 170px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — "STUDIO REEL"
   The front page leads with the work. The hero is a reel of
   the key art on a timer, with a launcher-style dock naming
   what is on screen, and every project below gets a full row
   instead of a thumbnail. Namespaced .dp- so it sits clear of
   the older .hm-/.hr-/.hs- rules above.
   ══════════════════════════════════════════════════════════ */

.dp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════
   THE HERO KEY — the whole button, in one block

   This is the only button on the site using this class, and
   this is now the only rule that styles it. It used to be
   assembled from eleven: a base, a gold variant, four
   box-shadow overrides that each undid the one before, two
   passes at height and padding, and three media queries — so
   every change meant first working out which one had won.
   Nothing below this point touches it.
   ══════════════════════════════════════════════════════════ */
.dp-btn--gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 50px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  /* the 1px of overshoot keeps the first stop from wrapping the
     rounded end as a pale sliver when the width lands on a fraction */
  background: linear-gradient(100deg, #eec983, #dcaa4a 54%, #cd8b3c)
              0 0 / calc(100% + 1px) 100% no-repeat;
  color: #1a1206;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(217,164,65,0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dp-btn--gold > i {
  display: block;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}
.dp-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(217,164,65,0.66);
}
.dp-btn--gold:hover > i { transform: translateX(3px); }
.dp-btn--gold:active { transform: translateY(0); }
.dp-btn--gold:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* Before the project has a page the button carries aria-disabled rather than the
   disabled attribute: Chrome makes a disabled control inert to the pointer, so
   :hover never fires on it and the page’s main CTA sits dead under the mouse.
   With aria it still announces as unavailable and still does nothing on click,
   but it answers the pointer. Only the cursor says it has nowhere to go yet. */
.dp-btn--gold[aria-disabled="true"] { cursor: default; }

@media (max-width: 640px) {
  .dp-btn--gold { height: 46px; padding: 0 26px; }
}

/* status colours, shared by the dock and the project rows */
.dp-st-dev      { color: var(--gold-lt); }
.dp-st-live     { color: #6fd096; }
.dp-st-beta     { color: var(--ember-lt); }
.dp-st-paused   { color: rgba(255,255,255,0.55); }
.dp-st-announced{ color: var(--gold-lt); }

/* ══════════════════════════ HERO ══════════════════════════ */
.dp-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000;
}

/* ── the key art ── */
.dp-feat-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  animation: dpBreathe 34s ease-in-out infinite alternate;
}
@keyframes dpBreathe { to { transform: scale(1.09); } }

/* Until a project has its own key art this stands in: brand pattern under a
   warm bloom, so the panel reads as a designed backdrop and not as a gap. */
.dp-feat-art--empty {
  background-color: #060607;
  background-image:
    radial-gradient(ellipse 58% 74% at 74% 22%, rgba(217,164,65,0.34), transparent 64%),
    radial-gradient(ellipse 72% 64% at 98% 88%, rgba(214,90,44,0.28), transparent 66%),
    radial-gradient(ellipse 90% 80% at 20% 100%, rgba(214,90,44,0.1), transparent 68%),
    linear-gradient(rgba(217,164,65,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.05) 1px, transparent 1px),
    url('/uploads/1775428848_dls1.jpg');
  background-size: auto, auto, auto, 104px 104px, 104px 104px, 680px auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-position: center, center, center, center, center, center;
  animation: none;
  transform: none;
}
/* the mark, large and ghosted, so the panel has something to look at */
.dp-feat-art--empty::after {
  content: '';
  position: absolute;
  right: -5%;
  top: 46%;
  transform: translateY(-50%);
  width: min(56vw, 720px);
  aspect-ratio: 1.135;
  background: url('/img/logod-800.png') center / contain no-repeat;
  opacity: 0.15;
}
/* a slow light sweep across it */
.dp-feat-art--empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 34%, rgba(255,214,150,0.06) 50%, transparent 66%);
  animation: dpSweep 14s ease-in-out infinite alternate;
}
@keyframes dpSweep { from { transform: translateX(-16%); } to { transform: translateX(16%); } }

/* black pooled where the type sits, art left lit everywhere else */
.dp-feat-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.12) 14%, transparent 30%),
    radial-gradient(118% 94% at 4% 104%,
      rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.88) 30%, rgba(0,0,0,0.54) 54%,
      rgba(0,0,0,0.16) 72%, transparent 88%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.56) 11%, rgba(0,0,0,0.08) 30%, transparent 46%);
}

/* faint column rules — a little instrument-panel texture, no glow */
.dp-hero-rules {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.3;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 12.5% 100%;
  -webkit-mask-image: linear-gradient(0deg, transparent 4%, #000 26%, #000 72%, transparent 96%);
  mask-image: linear-gradient(0deg, transparent 4%, #000 26%, #000 72%, transparent 96%);
}

.dp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad) 92px;
}
.dp-feat-body { max-width: 680px; }

.dp-feat-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.dp-feat-label::before {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.dp-feat-logo { margin-bottom: 26px; }
.dp-feat-logo img {
  max-width: min(74%, 470px);
  max-height: 130px;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: drop-shadow(0 14px 46px rgba(0,0,0,0.85));
}
.dp-feat-name {
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,0.7);
}

.dp-feat-desc {
  font-size: 1.05rem;
  line-height: 1.72;
  color: rgba(255,255,255,0.72);
  max-width: 52ch;
  margin-bottom: 26px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-feat-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
/* ══════════════════════════════════════════════════════════
   THE STATUS CHIP — the whole thing, in one block

   It was assembled from six rules and wore a cold white ring
   (rgba(255,255,255,0.16)) over a flat black scrim, which on a
   warm hero read as a UI part cut from a different sheet and
   pasted on. The ring is gold now and barely there, the fill is
   a warm near-black, and the glass behind it saturates rather
   than only blurring, so the hero’s light comes through it.

   No inset highlight: on a pill an inset offset shadow wraps the
   end caps and outlines the whole shape.

   The dot breathes on a 3.2s cycle — one slow signal that the
   status is live, off entirely under reduced motion.
   ══════════════════════════════════════════════════════════ */
.dp-feat-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* uppercase tracking leaves a trailing space after the last
     letter; the right pad takes it back so the ends look even */
  padding: 10px calc(15px - 0.15em) 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(217,164,65,0.18);
  background: rgba(24,17,8,0.62);
  /* The ring and the ground follow the status colour, not the studio's amber —
     a green Released label was sitting in an amber pill. The two lines above
     stay as the fallback for browsers without color-mix. */
  border-color: color-mix(in srgb, currentColor 24%, transparent);
  background: color-mix(in srgb, currentColor 8%, rgba(10,10,10,0.62));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  font: 700 0.72rem/1 var(--font-body);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dp-feat-status > i {
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  font-style: normal;
  /* Inter’s caps sit above the line box centre, so a dot centred
     on the box hangs low off the end of the words. One px up. */
  transform: translateY(-1px);
  animation: dp-status-breathe 3.2s var(--ease) infinite;
}
@keyframes dp-status-breathe {
  0%, 100% { box-shadow: 0 0 9px currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 3px currentColor; opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-feat-status > i { animation: none; box-shadow: 0 0 9px currentColor; }
}
.dp-feat-plat { color: rgba(255,255,255,0.58); }
.dp-feat-plat s { text-decoration: none; color: rgba(255,255,255,0.26); margin: 0 8px; }

.dp-feat-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.dp-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  text-decoration: none;
  transition: color 0.3s;
}
.dp-scroll i { color: var(--gold); font-size: 0.66rem; animation: cueBob 2.2s ease-in-out infinite; }
.dp-scroll:hover { color: #fff; }

/* ══════════════════════════ WORK ══════════════════════════ */
.dp-work { position: relative; padding: 124px 0 108px; }
.dp-wrap { max-width: 1600px; margin: 0 auto; padding: 0 var(--pad); }

.dp-head { max-width: 820px; margin-bottom: 84px; }
.dp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.dp-eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(217,164,65,0.7);
  flex-shrink: 0;
}
.dp-h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--white);
}
.dp-lede {
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 560px;
}
.dp-tally {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 28px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: var(--gold-dim);
}
.dp-tally b {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-lt);
  letter-spacing: -0.02em;
}
.dp-tally span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ── one row per project, art and copy trading sides ── */
.projects-stack { display: flex; flex-direction: column; gap: 108px; }

.dp-proj {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 72px;
}
.dp-proj:nth-child(even) .dp-proj-media { order: 2; }

.dp-proj-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card2);
  box-shadow: var(--sh-2);
  transition: border-color 0.5s, box-shadow 0.5s, transform 0.6s var(--ease);
}
.dp-proj:hover .dp-proj-media {
  border-color: rgba(217,164,65,0.3);
  box-shadow: var(--sh-3);
  transform: translateY(-4px);
}
.dp-proj-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.3s var(--ease);
}
.dp-proj:hover .dp-proj-art { transform: scale(1.05); }
.dp-proj-art--empty {
  background-color: #0b0b0c;
  background-image:
    radial-gradient(ellipse 62% 74% at 30% 40%, rgba(217,164,65,0.4), transparent 72%),
    radial-gradient(ellipse 66% 60% at 86% 94%, rgba(214,90,44,0.32), transparent 70%),
    linear-gradient(rgba(217,164,65,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.06) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
.dp-proj-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 42%, transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%);
}
.dp-proj-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10% 12%;
  pointer-events: none;
}
.dp-proj-poster img {
  max-width: 76%;
  max-height: 48%;
  object-fit: contain;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.75));
}
.dp-proj-poster span {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
  text-shadow: 0 6px 30px rgba(0,0,0,0.8);
}

.dp-proj-index {
  position: absolute;
  z-index: 2;
  top: 18px; left: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.62);
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.dp-proj-status {
  position: absolute;
  z-index: 2;
  top: 15px; right: 17px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dp-proj-status i {
  font-style: normal;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}
.dp-proj-play {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 68px; height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: 0.92rem;
  cursor: pointer;
  padding-left: 4px;
  transition: background 0.3s, transform 0.35s var(--ease), border-color 0.3s;
}
.dp-proj-play:hover {
  background: rgba(217,164,65,0.9);
  border-color: transparent;
  color: #1a1206;
  transform: translate(-50%,-50%) scale(1.08);
}

.dp-proj-body { min-width: 0; }
.dp-proj-logo {
  max-height: 62px;
  max-width: 268px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 22px;
}
.dp-proj-name {
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 18px;
}
.dp-proj-desc {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--text);
  max-width: 48ch;
}
.dp-proj-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  margin: 30px 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.dp-proj-specs dt {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 7px;
}
.dp-proj-specs dd {
  font-size: 0.87rem;
  font-weight: 500;
  color: #e8e8e8;
  letter-spacing: 0.01em;
}
.dp-proj-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.dp-proj-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.18);
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media(max-width:1180px){
  .dp-proj { grid-template-columns: 1fr; gap: 34px; }
  .dp-proj:nth-child(even) .dp-proj-media { order: 0; }
  .projects-stack { gap: 88px; }
  .dp-proj-desc { max-width: none; }
}
@media(max-width:980px){
  .dp-hero { min-height: 88vh; min-height: 88svh; }
  .dp-hero-inner { padding: 0 var(--pad) 64px; }
  .dp-feat-logo img { max-width: 88%; max-height: 96px; }
  .dp-feat-desc { font-size: 0.99rem; }
  .dp-scroll { display: none; }
  .dp-work { padding: 96px 0 104px; }
  .dp-head { margin-bottom: 56px; }
}
@media(max-width:640px){
  .dp-hero-inner { padding-bottom: 48px; }
  .dp-feat-logo img { max-height: 74px; }
  .dp-feat-desc { -webkit-line-clamp: 3; line-clamp: 3; margin-bottom: 22px; }
  .dp-feat-meta { margin-bottom: 26px; gap: 12px; }
  .dp-feat-cta { width: 100%; }
  .dp-proj-media { aspect-ratio: 4 / 3; border-radius: 16px; }
  .dp-proj-cta { width: 100%; }
  .projects-stack { gap: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-feat-art { animation: none; transform: none; }
  .dp-feat-art--empty::before { animation: none; }
  .dp-scroll i { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE STAGE
   The hero is one full-bleed picture, graded down to the
   studio's palette so white type reads over it, with three
   slow effects on top: the plate drifts under the pointer,
   the picture breathes, and dust lifts through the light.

   To change the picture, change --hero-img below — or give
   the featured project key art in the dashboard, which
   overrides this automatically.
   ══════════════════════════════════════════════════════════ */

.dp-hero {
  --hero-img: url('/img/backdrop-1920.jpg');
  /* Transparent on purpose. An opaque colour here covers the fixed texture,
     glow and particle layers the rest of the page sits on, and then stops
     dead at the section edge - which is exactly the straight line the
     handover was trying to hide. The stage inside paints the scene. */
  background: transparent;
  min-height: 100vh;
  min-height: 100svh;
  /* pointer, -1 … 1, and how far the hero has scrolled away, 0 … 1 */
  --px: 0;
  --py: 0;
  --sy: 0;
}

.dp-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050506;
}

/* the plate carries the drift, so the picture keeps its own slow zoom */
.dp-plate {
  position: absolute;
  inset: -3%;
  transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -11px + var(--sy) * 76px), 0);
}

.dp-feat-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 46%;
  filter: saturate(1.05) brightness(0.44) contrast(1.55);
  transform: scale(1.03);
  animation: dpBreathe 38s ease-in-out infinite alternate;
}
@keyframes dpBreathe { to { transform: scale(1.11); } }

/* no key art on the featured project — fall back to the studio picture */
.dp-feat-art--empty { background-image: var(--hero-img); }
.dp-feat-art--empty::before,
.dp-feat-art--empty::after { content: none; }

/* Duotone. The art is a bright green daylight scene and the brand is black
   and gold, so the picture is recoloured to the brand rather than dimmed
   towards it — amber in the light, cold near-black in the shadows. */
.dp-duo {
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, #e88f28 0%, #8a4f14 30%, #22201f 60%, #08202e 100%);
  mix-blend-mode: color;
  opacity: 0.82;
}
/* a second pass that deepens the shadows without touching the highlights */
.dp-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(166deg, rgba(150,80,20,0.18) 0%, rgba(6,9,13,0.55) 52%, rgba(1,3,6,0.9) 100%);
  mix-blend-mode: multiply;
}

/* the grade: dark where the type sits and at the frame edges, open in between */
.dp-tint {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2,2,4,0.9) 0%, rgba(3,3,4,0.4) 13%, transparent 30%),
    linear-gradient(0deg, #020202 0%, rgba(2,2,2,0.6) 13%, rgba(2,2,2,0.1) 33%, transparent 50%),
    radial-gradient(112% 96% at 62% 42%, transparent 18%, rgba(0,0,0,0.8) 100%);
}
/* the light source, laid back over the top so the frame has somewhere to look */
.dp-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 34% at 67% 33%, rgba(255,212,150,0.5), rgba(255,158,72,0.14) 40%, transparent 72%);
  mix-blend-mode: screen;
}
/* one slow pass of light across the frame */
.dp-tint::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(102deg, transparent 36%, rgba(255,220,164,0.06) 50%, transparent 64%);
  animation: dpPass 18s ease-in-out infinite alternate;
}
@keyframes dpPass { from { transform: translateX(-14%); } to { transform: translateX(14%); } }

/* dust lifting through the light */
.dp-dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,   rgba(255,212,158,0.55), transparent 62%),
    radial-gradient(1.1px 1.1px at 128px 96px,  rgba(255,192,136,0.42), transparent 62%),
    radial-gradient(1.3px 1.3px at 214px 44px,  rgba(255,228,186,0.36), transparent 62%),
    radial-gradient(1px 1px     at 74px 178px,  rgba(255,202,146,0.44), transparent 62%),
    radial-gradient(1.5px 1.5px at 262px 158px, rgba(255,218,166,0.30), transparent 62%),
    radial-gradient(1px 1px     at 176px 208px, rgba(255,206,152,0.34), transparent 62%);
  background-size: 300px 240px;
  -webkit-mask-image: radial-gradient(118% 86% at 58% 46%, #000 6%, rgba(0,0,0,0.45) 46%, transparent 84%);
          mask-image: radial-gradient(118% 86% at 58% 46%, #000 6%, rgba(0,0,0,0.45) 46%, transparent 84%);
  animation: dpDustRise 34s linear infinite;
}
@keyframes dpDustRise { to { background-position: 46px -240px; } }

/* the column rules fought the picture */
.dp-hero-rules { display: none; }

/* black pooled under the copy, picture left lit everywhere else */
.dp-feat-scrim {
  z-index: 2;
  background:
    radial-gradient(104% 84% at 0% 108%,
      rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.84) 26%, rgba(0,0,0,0.48) 50%,
      rgba(0,0,0,0.15) 70%, transparent 88%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.5) 12%, rgba(0,0,0,0.06) 30%, transparent 46%);
}

.dp-hero-inner { z-index: 3; }
.dp-scroll     { z-index: 3; }

/* clearance for the nav, so a short window never runs the copy under it */
.dp-hero-inner { padding-top: 128px; }

/* the copy lifts and clears as the hero scrolls away */
.dp-hero-inner { opacity: calc(1 - var(--sy) * 1.7); transform: translate3d(0, calc(var(--sy) * -36px), 0); }
.dp-scroll { opacity: calc(1 - var(--sy) * 5); }

@media(max-width:980px){
  .dp-hero { min-height: 92vh; min-height: 92svh; }
  .dp-feat-art { background-position: 62% 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-feat-art, .dp-dust, .dp-tint::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE COPY
   The block was sized for a panel and it is sitting in a
   full frame, so everything in it was reading small and
   grey. Scaled up, opened out, and pushed to real contrast
   against the picture.
   ══════════════════════════════════════════════════════════ */

.dp-hero-inner { padding-bottom: 122px; }
.dp-feat-body { max-width: 760px; }

.dp-feat-label {
  margin-bottom: 30px;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}
.dp-feat-label::before { width: 40px; }

.dp-feat-logo { margin-bottom: 32px; }
.dp-feat-logo img {
  max-width: min(82%, 545px);
  max-height: 168px;
  filter: drop-shadow(0 18px 54px rgba(0,0,0,0.9));
}
.dp-feat-name { font-size: clamp(3rem, 6.4vw, 5.6rem); }

.dp-feat-desc {
  font-size: 1.2rem;
  line-height: 1.66;
  color: rgba(255,255,255,0.88);
  max-width: 54ch;
  margin-bottom: 34px;
  text-shadow: 0 2px 22px rgba(0,0,0,0.85);
}

.dp-feat-meta {
  margin-bottom: 40px;
  gap: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.19em;
}
.dp-feat-plat { color: rgba(255,255,255,0.72); }

/* ── the sections below were quiet for the same reason ── */
.dp-h2 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.dp-lede { font-size: 1.1rem; color: rgba(255,255,255,0.6); max-width: 600px; }
.dp-eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; }

.dp-proj-name { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
.dp-proj-logo { max-height: 74px; max-width: 300px; }
.dp-proj-desc { font-size: 1.06rem; color: rgba(255,255,255,0.68); }

.hm-title { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.hm-open h3, .hm-join h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }

@media(max-width:980px){
  .dp-feat-body { max-width: none; }
  .dp-feat-logo img { max-width: 90%; max-height: 122px; }
  .dp-feat-desc { font-size: 1.08rem; margin-bottom: 28px; }
  .dp-hero-inner { padding-bottom: 82px; }
}
@media(max-width:640px){
  .dp-feat-logo img { max-height: 92px; }
  .dp-feat-desc { font-size: 1rem; }
  .dp-hero-inner { padding-bottom: 60px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE SCROLL CUE
   It was sitting flat in the black band at the base of the
   hero, dim enough to read as a stray label. Stacked and
   lit so it reads as a control.
   ══════════════════════════════════════════════════════════ */
.dp-scroll {
  bottom: 42px;
  flex-direction: column;
  gap: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s var(--ease);
}
.dp-scroll span { margin-right: -0.3em; }
.dp-scroll i {
  font-size: 0.6rem;
  color: var(--gold);
  animation: cueBob 2.4s ease-in-out infinite;
}
.dp-scroll:hover { color: #fff; }
.dp-scroll:hover i { color: var(--gold-hi); }

/* the base of the hero was ramping to flat black too early, which put a
   hard bar under the cue — ease it out instead */
.dp-tint {
  background:
    linear-gradient(180deg, rgba(2,2,4,0.9) 0%, rgba(3,3,4,0.4) 13%, transparent 30%),
    linear-gradient(0deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.54) 11%, rgba(0,0,0,0.1) 32%, transparent 50%),
    radial-gradient(112% 96% at 62% 42%, transparent 18%, rgba(0,0,0,0.8) 100%);
}

@media(max-width:640px){
  .dp-scroll { display: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE HERO'S ACTIONS
   Three pills of the same weight meant nothing was primary,
   and the two ghosts were near-black glass on near-black
   art. Now: one solid button, one quiet play link.
   ══════════════════════════════════════════════════════════ */

.dp-feat-cta { gap: 22px; align-items: center; }

.dp-play-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 8px 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
  transition: color 0.25s;
}
.dp-play-link i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.64rem;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.35s var(--ease);
}
.dp-play-link:hover { color: #fff; }
.dp-play-link:hover i {
  border-color: var(--gold);
  background: rgba(217,164,65,0.18);
  color: var(--gold-hi);
  transform: scale(1.08);
}

/* ── the meta row reads as one row, not two systems ── */
.dp-feat-meta { gap: 20px; margin-bottom: 46px; }
.dp-feat-desc { margin-bottom: 28px; }
.dp-feat-plat {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}

@media(max-width:640px){
  .dp-feat-cta { gap: 16px; width: 100%; }
  .dp-feat-meta { margin-bottom: 32px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK
   The rows read like a product page: a bordered card, two
   label/value pairs, and a paragraph that ran to five lines.
   Now the art carries the row, the platforms are icons, and
   the copy is held to a pitch rather than a description.
   ══════════════════════════════════════════════════════════ */

/* the art is the row — less card chrome, more weight under it */
.dp-proj-media {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.055);
  box-shadow: 0 30px 70px rgba(0,0,0,0.62);
}
.dp-proj:hover .dp-proj-media {
  transform: translateY(-6px);
  box-shadow: 0 42px 96px rgba(0,0,0,0.72);
}
/* vignette, so the plate has edges instead of just stopping */
.dp-proj-glass {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.08) 40%, transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, transparent 28%),
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,0.5) 100%);
}

/* a title card for a project with no key art yet — dark and lit, not a
   flat orange wash */
.dp-proj-art--empty {
  background-color: #08070a;
  background-image:
    radial-gradient(ellipse 76% 84% at 76% 92%, rgba(214,90,44,0.34), transparent 68%),
    radial-gradient(ellipse 60% 68% at 24% 14%, rgba(217,164,65,0.2), transparent 70%),
    linear-gradient(rgba(217,164,65,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.045) 1px, transparent 1px),
    url('/uploads/1775428848_dls1.jpg');
  background-size: auto, auto, 64px 64px, 64px 64px, 540px auto;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
}

/* ── the copy column ── */
.dp-proj-no {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.dp-proj-no::after {
  content: '';
  flex: 1;
  max-width: 78px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

/* held to a pitch — the full write-up belongs on the project's own page */
.dp-proj-desc {
  max-width: 44ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* platforms as icons — the one cue that says "games" without a word of copy */
.dp-proj-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.dp-proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 0.78rem;
  font-weight: 500;
  color: #e4e4e4;
  transition: border-color 0.35s, background 0.35s;
}
.dp-proj-chip i {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.44);
  transition: color 0.35s;
}
.dp-proj:hover .dp-proj-chip { border-color: rgba(217,164,65,0.24); background: rgba(217,164,65,0.05); }
.dp-proj:hover .dp-proj-chip i { color: var(--gold-lt); }

/* the section's own copy was doing the same thing at the top */
.dp-lede { max-width: 46ch; }

@media(max-width:640px){
  .dp-proj-bar { margin: 22px 0 24px; padding-top: 20px; }
  .dp-proj-chip { padding: 8px 14px; font-size: 0.74rem; }
}

/* the hero's platform pill carries the same icons as the rows below —
   the pill itself stays, the names just gain their marks */
.dp-feat-plat b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: inherit;
}
.dp-feat-plat b i {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.52);
  transition: color 0.3s;
}
.dp-feat-plat:hover b i { color: var(--gold-lt); }
.dp-feat-plat s { margin: 0 11px; }

/* ══════════════════════════════════════════════════════════
   ICON + LABEL ALIGNMENT
   Everything that pairs an icon with a word was centring by
   box, not by glyph: the label carried the body's 1.6 line
   height while the icon carried its own, so the two boxes
   were different heights and align-items had nothing true to
   centre on. Collapsing both to line-height 1 lines the
   glyphs up instead of the boxes around them.
   ══════════════════════════════════════════════════════════ */

.dp-play-link,
.dp-feat-plat,
.dp-feat-plat b,
.dp-feat-label,
.dp-proj-chip,
.dp-proj-status,
.dp-proj-soon,
.dp-proj-no,
.dp-scroll,
.dp-eyebrow,
.eyebrow,
.hm-eyebrow,
.hm-panel-eyebrow,
.hm-link,
.email-link,
.btn {
  line-height: 1;
  align-items: center;
}

.dp-play-link > i,
.dp-feat-plat b > i,
.dp-proj-chip > i,
.dp-proj-status > i,
.dp-proj-soon > i,
.dp-scroll > i,
.hm-link > i,
.email-link > i,
.btn > i {
  display: block;
  line-height: 1;
  flex-shrink: 0;
}

/* the play link's ring is a box of its own — the glyph centres inside it,
   so it keeps its own grid rather than the block display used above */
.dp-play-link > i {
  display: grid;
  place-items: center;
  line-height: 1;
}

/* uppercase tracking adds a trailing space after the last letter, which
   throws a pill's padding out by a few pixels — take it back */
.dp-proj-status,
.dp-feat-plat b:last-child { padding-right: calc(15px - 0.15em); }
.dp-feat-plat b:last-child { padding-right: 0; margin-right: -0.15em; }
.dp-feat-label { margin-right: -0.3em; }

/* the separator sits on the same line as the names */
.dp-feat-plat s { line-height: 1; align-self: center; }

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK
   Quiet and editorial: the art sits in its own frame at full
   colour, the copy sits beside it on the page's own black,
   and a hairline separates one project from the next. No
   scrims over the pictures, no glows under the buttons.

   The columns are equal, so alternating the frame's side
   cannot change its size — the old 1.1fr / 0.9fr grid made
   every second project's art smaller than its neighbours.
   ══════════════════════════════════════════════════════════ */

.projects-stack {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  grid-template-columns: none;
}

.dp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 76px;
  padding: 76px 0;
  border-top: 1px solid var(--line);
}
.dp-row:first-child { padding-top: 0; }
.dp-row:last-child { padding-bottom: 0; }
.dp-row--flip .dp-row-media { order: 2; }

/* ── the frame ── */
.dp-row-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b0b0d;
  transition: border-color 0.4s;
}
.dp-row:hover .dp-row-media { border-color: var(--border2); }
.dp-row-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s var(--ease);
}
.dp-row:hover .dp-row-art { transform: scale(1.035); }
/* no key art yet — a plain ruled plate, not a coloured wash */
.dp-row-art--empty {
  background-color: #0d0d10;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
}
.dp-row-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  pointer-events: none;
}
.dp-row-poster img { max-width: 72%; max-height: 50%; object-fit: contain; }
.dp-row-poster span {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.9);
  text-align: center;
}

/* ── the column beside it ── */
.dp-row-body { min-width: 0; }
.dp-row-no {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.dp-row-no s { text-decoration: none; color: rgba(255,255,255,0.26); }

.dp-row-name {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 16px;
}
.dp-row-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 46ch;
}

.dp-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.dp-row-status {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dp-row-status > i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dp-row-plat {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}
.dp-row-plat > i {
  display: block;
  line-height: 1;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.34);
  transition: color 0.35s;
}
.dp-row:hover .dp-row-plat > i { color: rgba(255,255,255,0.6); }

.dp-row-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
}
.dp-row-go,
.dp-row-play,
.dp-row-soon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}
.dp-row-go > i,
.dp-row-play > i,
.dp-row-soon > i { display: block; line-height: 1; font-size: 0.72rem; }

.dp-row-go {
  color: var(--gold-lt);
  cursor: pointer;
  transition: gap 0.3s var(--ease), color 0.3s;
}
.dp-row-go:hover { color: var(--gold-hi); gap: 14px; }

.dp-row-play {
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: color 0.3s;
}
.dp-row-play:hover { color: #fff; }
.dp-row-soon { color: rgba(255,255,255,0.34); }

@media(max-width:1080px){
  .dp-row { grid-template-columns: 1fr; gap: 30px; padding: 56px 0; }
  .dp-row--flip .dp-row-media { order: 0; }
  .dp-row-desc { max-width: none; }
}
@media(max-width:640px){
  .dp-row { padding: 44px 0; gap: 24px; }
  .dp-row-meta { gap: 14px; margin-top: 22px; padding-top: 18px; }
  .dp-row-cta { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-row-art, .dp-row:hover .dp-row-art { transition: none; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK, FINISHED
   No rules between the projects — space separates them
   instead. The frames sit on the page rather than floating
   flat on it, the number carries a small rule of its own,
   and the primary action gets an outline so it reads as a
   control without lighting anything up.
   ══════════════════════════════════════════════════════════ */

/* ── nothing drawn between one project and the next ── */
.dp-row {
  border-top: 0;
  padding: 0;
  margin-bottom: 104px;
}
.dp-row:last-child { margin-bottom: 0; }

/* ── frames ── */
.dp-row-media {
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.44);
  transition: border-color 0.45s, transform 0.5s var(--ease), box-shadow 0.5s;
}
.dp-row:hover .dp-row-media {
  border-color: rgba(217,164,65,0.26);
  transform: translateY(-4px);
  box-shadow: 0 30px 68px rgba(0,0,0,0.56);
}

/* a plate with no key art should still look composed */
.dp-row-art--empty {
  background-color: #0c0c0f;
  background-image:
    radial-gradient(68% 88% at 50% 46%, rgba(217,164,65,0.1), transparent 72%),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.dp-row-poster img {
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
  transition: transform 0.6s var(--ease);
}
.dp-row:hover .dp-row-poster img { transform: translateY(-3px); }

/* ── the number gets its own rule ── */
.dp-row-no::after {
  content: '';
  width: 36px;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

/* ── the name reacts, quietly ── */
.dp-row-name { transition: transform 0.5s var(--ease); }
.dp-row:hover .dp-row-name { transform: translateX(3px); }

/* ── the meta row keeps a hairline, but a graded one ── */
.dp-row-meta { border-top: 0; position: relative; }
.dp-row-meta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(217,164,65,0.28), rgba(255,255,255,0.06) 38%, transparent);
}

/* ── the primary action reads as a control, without a glow ── */
.dp-row-go {
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--gold-line);
  background: rgba(217,164,65,0.05);
  transition: background 0.3s, border-color 0.3s, color 0.3s, gap 0.3s var(--ease);
}
.dp-row-go:hover {
  background: rgba(217,164,65,0.13);
  border-color: rgba(217,164,65,0.55);
  color: var(--gold-hi);
  gap: 13px;
}
.dp-row-cta { gap: 22px; margin-top: 28px; }
.dp-row-play { padding: 12px 4px; }

@media(max-width:1080px){
  .dp-row { margin-bottom: 76px; }
}
@media(max-width:640px){
  .dp-row { margin-bottom: 58px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK, WITH SOME CHARACTER
   Two moves, both quiet enough to keep the section clean:
   an outlined numeral set large behind each project's name,
   and a hard offset rule behind the frame — the way a
   printed sheet shows its registration. The offset follows
   whichever side the frame is on.
   ══════════════════════════════════════════════════════════ */

.dp-row-body { position: relative; }
.dp-row-body > *:not(.dp-row-ghost) { position: relative; z-index: 1; }

.dp-row-ghost {
  position: absolute;
  z-index: 0;
  top: -46px;
  left: -14px;
  font-size: clamp(5.5rem, 9vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217,164,65,0.2);
  user-select: none;
  pointer-events: none;
  transition: transform 0.7s var(--ease), -webkit-text-stroke-color 0.5s;
}
.dp-row:hover .dp-row-ghost {
  transform: translateY(-5px);
  -webkit-text-stroke-color: rgba(217,164,65,0.34);
}

/* the frame's offset rule, thrown to the outer edge of the row */
.dp-row-media {
  box-shadow:
    0 18px 46px rgba(0,0,0,0.44),
    -16px 16px 0 -1px rgba(217,164,65,0.16);
}
.dp-row--flip .dp-row-media {
  box-shadow:
    0 18px 46px rgba(0,0,0,0.44),
    16px 16px 0 -1px rgba(217,164,65,0.16);
}
.dp-row:hover .dp-row-media {
  box-shadow:
    0 30px 68px rgba(0,0,0,0.56),
    -22px 22px 0 -1px rgba(217,164,65,0.26);
}
.dp-row--flip:hover .dp-row-media {
  box-shadow:
    0 30px 68px rgba(0,0,0,0.56),
    22px 22px 0 -1px rgba(217,164,65,0.26);
}

@media(max-width:1080px){
  .dp-row-ghost { top: -38px; left: -8px; font-size: clamp(4.5rem, 16vw, 7rem); }
  .dp-row-media,
  .dp-row--flip .dp-row-media,
  .dp-row:hover .dp-row-media,
  .dp-row--flip:hover .dp-row-media {
    box-shadow: 0 18px 46px rgba(0,0,0,0.44), -12px 12px 0 -1px rgba(217,164,65,0.16);
  }
}

/* the outlined numeral now carries the count on its own — the small
   "01 / 03" line underneath it was the same information twice */
.dp-row-ghost { top: -40px; left: -12px; }
.dp-row-name { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK, SPACED AND SOFTENED
   The hard offset rule behind each frame read as a second
   box sitting under the picture. It is replaced by a warm
   gradient bloom that has no edge of its own — the frame
   sits in light rather than on a slab. And the projects get
   real air between them.
   ══════════════════════════════════════════════════════════ */

.dp-row { margin-bottom: 156px; }
.dp-row:last-child { margin-bottom: 0; }

/* no offset slab — a soft warm gradient under the frame instead */
.dp-row-media,
.dp-row--flip .dp-row-media {
  box-shadow:
    0 26px 64px rgba(0,0,0,0.5),
    0 6px 66px -14px rgba(217,164,65,0.2);
}
.dp-row:hover .dp-row-media,
.dp-row--flip:hover .dp-row-media {
  box-shadow:
    0 36px 84px rgba(0,0,0,0.6),
    0 8px 80px -12px rgba(217,164,65,0.32);
}

@media(max-width:1080px){
  .dp-row { margin-bottom: 108px; }
  .dp-row-media,
  .dp-row--flip .dp-row-media,
  .dp-row:hover .dp-row-media,
  .dp-row--flip:hover .dp-row-media {
    box-shadow:
      0 22px 52px rgba(0,0,0,0.5),
      0 6px 52px -14px rgba(217,164,65,0.18);
  }
}
@media(max-width:640px){
  .dp-row { margin-bottom: 84px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE TRAILER CONTROL, AND THE ARROWS
   The trailer is a play button now, no label. And the icons
   that follow a word were centring on their box rather than
   on the word: uppercase and sentence text sit high in their
   line box (the box carries descender space the letters do
   not use), so a glyph centred on the box lands low. The
   nudge below is that difference.
   ══════════════════════════════════════════════════════════ */

/* Sized off the button beside it: stretching to the row's height and then
   holding a 1:1 ratio keeps the circle exactly as tall as the pill without
   either of them carrying a hard-coded number. Same border and fill as the
   pill too, so the two read as one pair rather than two controls. */
/* aspect-ratio cannot square a stretched flex item — the main size is
   resolved from content before the cross size is known, so the circle
   collapsed to the glyph width. Both dimensions come from the pill s own
   tokens instead: its text plus its 12px padding and 1px border, twice. */
.dp-row-play {
  --dp-ctl: calc(0.92rem + 26px);
  width: var(--dp-ctl);
  height: var(--dp-ctl);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  /* a triangle's visual centre sits left of its bounding box */
  padding-left: 2px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(217,164,65,0.05);
  color: var(--gold-lt);
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.dp-row-play:hover {
  border-color: rgba(217,164,65,0.55);
  background: rgba(217,164,65,0.13);
  color: var(--gold-hi);
}
.dp-row-cta { align-items: center; gap: 12px; }

/* No vertical nudge on the icons. Rendered at 6x against the labels, the
   arrows already land on the x-height centre — an earlier correction here
   was lifting them off it. */

/* ══════════════════════════════════════════════════════════
   CONTROLS — WHOLE PIXELS
   Every one of these buttons computed identically (the icon
   centred to within 0.008px) and still drew its arrow a pixel
   apart from the next. The cause was fractional geometry: a
   40.719px button holding an 11.516px glyph, landing on a
   different fractional y in each row (.656, .250, .844), so
   the glyph rounded to a different pixel row each time.

   Sizing the boxes in whole pixels means the label and the
   icon carry the same offset and round together, wherever
   the button happens to sit on the page.
   ══════════════════════════════════════════════════════════ */

.dp-row-go,
.dp-row-soon {
  height: 42px;
  font-size: 15px;
  line-height: 16px;
}
.dp-row-go { padding: 0 24px; }
.dp-row-go > i,
.dp-row-soon > i {
  font-size: 12px;
  line-height: 12px;
}

.dp-row-play {
  --dp-ctl: 42px;
  width: 42px;
  height: 42px;
  font-size: 12px;
}
.dp-row-play > i { font-size: 12px; line-height: 12px; }

/* the hero's pair, for the same reason */
.dp-play-link { font-size: 15px; line-height: 16px; }
.dp-play-link > i { width: 38px; height: 38px; font-size: 10px; line-height: 10px; }

/* and the arrow links */
.hm-link { font-size: 15px; line-height: 16px; }
.hm-link > i { font-size: 11px; line-height: 11px; }

/* ══════════════════════════════════════════════════════════
   HOME — THE HANDOVER
   One idea, one mechanism: the hero's layers release over
   the bottom of the section and stop before its edge.

   That is all it needs, because .dp-hero itself is
   transparent — the fixed texture, glow and particle layers
   run continuously behind both sections, so there is no
   second background for the fade to mismatch against. The
   earlier attempts kept adding layers to hide a step that
   came from the hero painting its own opaque colour.

   Percentages, not pixels, so the ramp scales with whatever
   height the hero ends up at.
   ══════════════════════════════════════════════════════════ */

/* Fading the picture out *inside* the hero only swapped one
   problem for another: the line went, and a dead black band took
   its place. So the picture does not stop at the section edge at
   all. The stage runs on past it and dissolves inside the top of
   the work — the join has nothing left to draw a line with, and
   the band above "Our projects" is lit instead of empty.

   The dissolve is measured in pixels up from the bottom of the
   stage rather than in percentages of the hero, so it keeps the
   same length whatever height the window hands the hero. */

/* the stage has to be allowed to leave the section */
.dp-hero { overflow: visible; }

.dp-stage {
  bottom: -320px;
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 calc(100% - 620px),
    rgba(0,0,0,0.94) calc(100% - 540px), rgba(0,0,0,0.82) calc(100% - 470px),
    rgba(0,0,0,0.64) calc(100% - 400px), rgba(0,0,0,0.45) calc(100% - 330px),
    rgba(0,0,0,0.28) calc(100% - 260px), rgba(0,0,0,0.15) calc(100% - 195px),
    rgba(0,0,0,0.07) calc(100% - 135px), rgba(0,0,0,0.025) calc(100% - 80px),
    rgba(0,0,0,0.006) calc(100% - 35px), transparent 100%);
          mask-image: linear-gradient(180deg,
    #000 0%, #000 calc(100% - 620px),
    rgba(0,0,0,0.94) calc(100% - 540px), rgba(0,0,0,0.82) calc(100% - 470px),
    rgba(0,0,0,0.64) calc(100% - 400px), rgba(0,0,0,0.45) calc(100% - 330px),
    rgba(0,0,0,0.28) calc(100% - 260px), rgba(0,0,0,0.15) calc(100% - 195px),
    rgba(0,0,0,0.07) calc(100% - 135px), rgba(0,0,0,0.025) calc(100% - 80px),
    rgba(0,0,0,0.006) calc(100% - 35px), transparent 100%);
}

/* a phone gets a shorter run-on and a shorter dissolve, or the
   picture would spend its whole height dissolving */
@media (max-width: 640px) {
  .dp-stage {
    bottom: -190px;
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 calc(100% - 400px),
      rgba(0,0,0,0.92) calc(100% - 350px), rgba(0,0,0,0.76) calc(100% - 300px),
      rgba(0,0,0,0.55) calc(100% - 250px), rgba(0,0,0,0.35) calc(100% - 200px),
      rgba(0,0,0,0.19) calc(100% - 150px), rgba(0,0,0,0.08) calc(100% - 105px),
      rgba(0,0,0,0.025) calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(180deg,
      #000 0%, #000 calc(100% - 400px),
      rgba(0,0,0,0.92) calc(100% - 350px), rgba(0,0,0,0.76) calc(100% - 300px),
      rgba(0,0,0,0.55) calc(100% - 250px), rgba(0,0,0,0.35) calc(100% - 200px),
      rgba(0,0,0,0.19) calc(100% - 150px), rgba(0,0,0,0.08) calc(100% - 105px),
      rgba(0,0,0,0.025) calc(100% - 60px), transparent 100%);
  }
}

/* the copy's pool has to let go too — left opaque it would cover the shared
   background and draw the very edge it is meant to remove */
.dp-feat-scrim {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 44%,
    rgba(0,0,0,0.92) 55%, rgba(0,0,0,0.76) 64%, rgba(0,0,0,0.52) 72%,
    rgba(0,0,0,0.30) 80%, rgba(0,0,0,0.13) 86%, rgba(0,0,0,0.05) 91%,
    rgba(0,0,0,0.015) 95%, transparent 99%);
          mask-image: linear-gradient(180deg,
    #000 0%, #000 44%,
    rgba(0,0,0,0.92) 55%, rgba(0,0,0,0.76) 64%, rgba(0,0,0,0.52) 72%,
    rgba(0,0,0,0.30) 80%, rgba(0,0,0,0.13) 86%, rgba(0,0,0,0.05) 91%,
    rgba(0,0,0,0.015) 95%, transparent 99%);
}

/* ══════════════════════════════════════════════════════════
   HOME — a little more life in the work below
   ══════════════════════════════════════════════════════════ */
.dp-work { padding-top: 108px; }
.dp-proj-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(217,164,65,0);
  transition: box-shadow 0.5s;
}
.dp-proj:hover .dp-proj-media::after { box-shadow: inset 0 0 0 1px rgba(217,164,65,0.22); }
.dp-proj-logo, .dp-proj-name { transition: transform 0.5s var(--ease); }
.dp-proj:hover .dp-proj-logo,
.dp-proj:hover .dp-proj-name { transform: translateX(4px); }

/* the journal's empty state should read as a placeholder, not a hole */
.hm-empty {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(217,164,65,0.045), transparent 70%),
    var(--card);
}

/* ══════════════════════════════════════════════════════════
   HOME — THE REST OF THE PAGE
   The scene stops at the fold, but the light it casts should
   not: every band below keeps a trace of the same warm
   source, so the page reads as one room rather than a hero
   followed by a black sheet.
   ══════════════════════════════════════════════════════════ */
.dp-work, .hm-section, .hm-close { position: relative; }
.dp-work > *, .hm-section > *, .hm-close > * { position: relative; }

.dp-work::before,
.hm-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The work's own light starts 300px above the section, so the warm
   band sits *across* the join rather than switching on at it. Its
   stops are in pixels for that reason — the crest has to land on
   the edge itself, whatever height the hero happens to be. */
.dp-work::before {
  top: -300px;
  background:
    linear-gradient(180deg,
      rgba(217,164,65,0)     0px,
      rgba(217,164,65,0.030) 300px,
      rgba(217,164,65,0.012) 470px,
      rgba(217,164,65,0)     640px),
    radial-gradient(64% 40% at 82% 4%, rgba(217,164,65,0.06), transparent 68%),
    radial-gradient(52% 38% at 4% 44%, rgba(214,90,44,0.035), transparent 72%),
    radial-gradient(60% 34% at 70% 100%, rgba(217,164,65,0.03), transparent 70%);
}
.hm-close::before {
  background: radial-gradient(58% 62% at 84% 8%, rgba(217,164,65,0.05), transparent 70%);
}

/* a hairline where the work ends, lit from the middle */
.hm-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,164,65,0.22) 50%, transparent);
  opacity: 0.7;
}

/* ── the journal's placeholder, tightened up ── */
.hm-empty {
  padding: 52px 40px;
  gap: 14px;
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(217,164,65,0.05), transparent 70%),
    url('/uploads/1775428848_dls1.jpg') center / 520px auto repeat,
    var(--card);
}
.hm-empty i {
  font-size: 1.35rem;
  color: rgba(217,164,65,0.55);
}

/* ── one button treatment across the public pages ── */
.btn-gold {
  color: #1a1206;
  font-weight: 600;
  /* same pale-cap correction as .dp-btn--gold */
  background: linear-gradient(96deg, var(--gold-lt) 0%, var(--gold) 46%, var(--ember-lt) 100%);
  box-shadow: 0 10px 26px rgba(217,164,65,0.2);
}
.btn-gold:hover {
  background: linear-gradient(96deg, var(--gold-lt) 0%, var(--gold-lt) 50%, var(--ember-lt) 100%);
  box-shadow: 0 16px 40px rgba(217,164,65,0.32);
}
.hm-close .btn,
.hm-open .btn,
.hm-join .btn {
  border-radius: 999px;
  padding: 15px 28px;
}

/* the bands were drifting apart; pull the page back together */
.hm-section { padding: 92px 0 96px; }
.hm-close { padding: 100px 0 116px; }

@media(max-width:640px){
  .hm-empty { padding: 42px 22px; }
  .dp-mark { opacity: 0.12; }
  .hm-section { padding: 68px 0 72px; }
  .hm-close { padding: 76px 0 88px; }
}

/* ══════════════════════════════════════════════════════════
   EVERY OTHER PAGE — clearance under the fixed nav
   .page-header only ever got a top padding inside the mobile
   query, so on a desktop the eyebrow and the h1 started
   underneath the nav on About, Team, Apply, News and the
   legal pages.
   ══════════════════════════════════════════════════════════ */
.page-header { padding: 138px 0 34px; margin-bottom: 44px; }
@media(max-width:900px){ .page-header { padding: 116px 0 30px; margin-bottom: 34px; } }

@media(max-width:1180px){
  .dp-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .dp-fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .dp-fact { padding-top: 24px; padding-bottom: 24px; }
}
@media(max-width:980px){
  .dp-hero { min-height: 92vh; min-height: 92svh; }
  .dp-mark { width: min(42vw, 300px); right: 4%; top: 13%; opacity: 0.14; }
  .dp-sun { left: 66%; width: min(120vw, 900px); }
  .dp-work { padding-top: 84px; }
}
@media(max-width:640px){
  .dp-strip-inner { grid-template-columns: 1fr 1fr; }
  .dp-fact { padding: 20px 14px 20px 18px; }
  .dp-fact b { font-size: 0.92rem; }
  .dp-sky { background-size: 320px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-sky, .dp-sun, .dp-floor::before, .dp-dust, .dp-haze::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE WORK, AS A SHELF OF GAMES
   The alternating art/copy rows read as a feature list and
   ran the section on for three screens. The projects are a
   grid of poster cards now — art full bleed, the copy standing
   on it — the way a store shelf reads. One grade over every
   card, so key art from different hands still looks like it
   came out of one studio.
   ══════════════════════════════════════════════════════════ */

/* the shelf. Cards keep their poster shape and wrap once there
   are more of them than a row can take. The wrap is left at its
   full width so the shelf lines up with the hero's copy. */
.projects-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 24px;
}
/* Above this width four across is the most the shelf should ever
   run — the raised minimum is what stops a fifth card from
   squeezing the row instead of starting a new one. */
@media (min-width: 1500px) {
  .projects-stack { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
}

.dp-row {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  aspect-ratio: 2 / 3;   /* a Steam library capsule, 600 × 900 */
  border-radius: 16px;
  overflow: hidden;
  /* Two grounds rather than a flat rule: the card's own colour is clipped to
     the padding box while a gradient fills the border box, so the hairline
     catches light along the top and warms to gold at the foot. A flat 8% white
     rule read as a sticker edge against this much black. */
  border: 2px solid #00000063;
  background:
    linear-gradient(180deg, #101014 0%, #08080a 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 26%,
      rgba(255,255,255,0.02) 62%, rgba(217,164,65,0.16) 100%) border-box;
  box-shadow:
    0 26px 60px rgba(0,0,0,0.55),
    0 2px 34px -12px rgba(217,164,65,0.10);
  transition: transform 0.5s var(--ease), box-shadow 0.5s, background 0.4s;
}
/* the old row rules stripped the first card's top edge */
.dp-row:first-child { padding-top: 0; }
.dp-row:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, #131317 0%, #0a0a0c 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.26) 0%, rgba(217,164,65,0.24) 45%,
      rgba(217,164,65,0.38) 100%) border-box;
  box-shadow:
    0 38px 80px rgba(0,0,0,0.62),
    0 6px 60px -14px rgba(217,164,65,0.32);
}

/* the frame is the card's whole ground now, not a panel in it */
.dp-row-media,
.dp-row:hover .dp-row-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* One grade across every card. Hover hands the picture back
   its own colour, so nothing is hidden — only settled. */
.dp-row-art {
  background-position: center 42%;
  filter: saturate(0.84) contrast(1.05) brightness(0.92);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.dp-row:hover .dp-row-art { filter: none; }

/* corners closed … */
.dp-row-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(128% 108% at 50% 34%, transparent 26%, rgba(3,3,5,0.6) 100%);
}
/* … and the floor the copy stands on. Pulled in once the pitch came off the
   card: a shorter block of copy needs a shorter floor, and the picture keeps
   the height the text gave back. */
.dp-row-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgba(4,4,6,0.96) 0%, rgba(4,4,6,0.88) 15%,
    rgba(4,4,6,0.56) 32%, rgba(4,4,6,0.16) 52%, transparent 70%);
}

/* the logotype centres in the picture, clear of the copy below, and carries
   its own light so it sits in the card rather than on it */
.dp-row-poster { z-index: 2; align-items: center; padding: 14% 11% 24%; }
.dp-row-poster img {
  max-width: 88%;
  max-height: 38%;
  filter:
    drop-shadow(0 0 30px rgba(244,186,110,0.20))
    drop-shadow(0 14px 34px rgba(0,0,0,0.65));
}

.dp-row-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 0 24px 24px;
}
.dp-row-ghost { display: none; }   /* the outlined numeral has no room on a card */
.dp-row-name {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* Status and platforms as a spec line rather than a sentence,
   sized to hold "IN DEVELOPMENT · PC · STEAM" on one line at the
   narrowest card the shelf produces. */
.dp-row-meta { gap: 0; row-gap: 8px; margin: 14px 0 0; padding-top: 0; border-top: 0; }
.dp-row-meta::before { display: none; }
/* One rule, between the status and the platforms. Rules between
   every item cost the width that made the line wrap on a narrow
   card, and a wrapped line starting with a hairline reads as a
   mistake — spacing carries the rest. */
.dp-row-status {
  padding-right: 12px;
  border-right: 1px solid var(--line);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
}
.dp-row-plat {
  gap: 6px;
  padding: 0;
  margin-left: 14px;
  border-left: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
}
.dp-row-plat > i { font-size: 0.74rem; }

.dp-row-cta { margin-top: 18px; gap: 12px; }
.dp-row-go  { padding: 0 20px; }   /* whole pixels, like the pair it belongs to */

/* A project whose page is not up yet keeps its button at full strength, so the
   shelf holds one shape and one rhythm and the card does not look half-built.
   It simply does not answer: no lift, no arrow slide, no pointer. The moment
   the record carries a URL it becomes a real link with nothing else to change. */
.dp-row-go[disabled] { cursor: default; }
.dp-row-go[disabled]:hover {
  transform: none;
  background: rgba(217,164,65,0.05);
  border-color: var(--gold-line);
  color: var(--gold-lt);
}
.dp-row-go[disabled]:hover > i { transform: none; }

/* A project with no key art yet gets a title card rather than a
   hole: the studio's own pattern for stock, one warm light from
   above, and the logotype set where the picture would be. */
/* The plate a project with no key art stands on. The warm pool sits behind
   where the logotype lands rather than up at the top edge, so the lockup
   reads as lit by the card instead of pasted onto it. */
.dp-row-art--empty {
  filter: none;
  background-color: transparent;   /* the card's own ground shows through */
  background-image:
    radial-gradient(44% 22% at 50% 40%,   rgba(246,190,118,0.17), transparent 72%),
    radial-gradient(130% 56% at 50% 110%, rgba(217,164,65,0.11),  transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%),
    url('/uploads/1775428848_dls1.jpg');
  background-size: auto, auto, auto, 240px auto;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.dp-row-art--empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 88% at 50% 32%, transparent 24%, rgba(4,4,6,0.62) 100%);
}

@media (max-width: 640px) {
  .projects-stack { gap: 18px; }
  .dp-row-body { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-row, .dp-row:hover { transition: none; transform: none; }
  .dp-row-art, .dp-row:hover .dp-row-art { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — LATEST NEWS
   The band was a fixed two-up grid, so the one published post
   sat at half width with a hole beside it, and the cards were
   on the flat 8%-white rule the project capsules have since
   grown out of. The grid follows the post count now, a post on
   its own runs wide with its cover beside the copy, and the
   cards carry the same lit hairline as the shelf above them.
   ══════════════════════════════════════════════════════════ */

#home-news-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.jr {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #101014 0%, #08080a 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 30%,
      rgba(255,255,255,0.02) 66%, rgba(217,164,65,0.14) 100%) border-box;
  box-shadow:
    0 22px 52px rgba(0,0,0,0.5),
    0 2px 30px -12px rgba(217,164,65,0.09);
  transition: transform 0.45s var(--ease), box-shadow 0.45s, background 0.4s;
}
.jr:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(180deg, #131317 0%, #0a0a0c 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.24) 0%, rgba(217,164,65,0.22) 45%,
      rgba(217,164,65,0.34) 100%) border-box;
  box-shadow:
    0 34px 74px rgba(0,0,0,0.6),
    0 6px 56px -14px rgba(217,164,65,0.28);
}

/* the cover gets the same grade as the project shelf, so a screenshot
   pulled from anywhere still belongs to this page */
.jr-media img { filter: saturate(0.88) contrast(1.04) brightness(0.94); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.jr:hover .jr-media img { filter: none; }
.jr-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4,4,6,0.5) 0%, transparent 42%);
}

/* one post: cover beside the copy, the full width of the band */
#home-news-list.jr-solo { grid-template-columns: 1fr; }
#home-news-list.jr-solo .jr {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}
#home-news-list.jr-solo .jr-media { aspect-ratio: auto; min-height: 320px; }
#home-news-list.jr-solo .jr-body { padding: 44px 48px; justify-content: center; }
#home-news-list.jr-solo .jr-title { font-size: 1.72rem; margin-bottom: 14px; }
#home-news-list.jr-solo .jr-excerpt { font-size: 0.98rem; max-width: 46ch; flex: 0 1 auto; margin-bottom: 26px; }

@media (max-width: 860px) {
  #home-news-list.jr-solo .jr { grid-template-columns: 1fr; }
  #home-news-list.jr-solo .jr-media { aspect-ratio: 16 / 9; min-height: 0; }
  #home-news-list.jr-solo .jr-body { padding: 26px 26px 30px; }
  #home-news-list.jr-solo .jr-title { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE STUDIO BAND
   Two columns, and only one of them had anything in it: the
   left was a paragraph and two links against a lot of black
   while the join card carried all the weight. Three facts the
   page already knows give that side something to stand on,
   and the card is brought onto the same hairline as the rest.
   ══════════════════════════════════════════════════════════ */


/* the join card, on the same lit hairline as the capsules and the news */
.hm-join {
  border: 1px solid transparent;
  background:
    radial-gradient(520px 300px at 88% 0%,  rgba(217,164,65,0.14), transparent 68%) padding-box,
    radial-gradient(420px 260px at 6% 100%, rgba(214,90,44,0.10),  transparent 70%) padding-box,
    linear-gradient(#0c0c0c, #0c0c0c) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%, rgba(217,164,65,0.26) 40%,
      rgba(214,90,44,0.22) 100%) border-box;
  box-shadow: 0 26px 64px rgba(0,0,0,0.5), 0 4px 40px -16px rgba(217,164,65,0.14);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, background 0.4s;
}
.hm-join:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 84px rgba(0,0,0,0.58), 0 8px 60px -14px rgba(217,164,65,0.3);
}
/* the card's own top light line is doing the hairline's job twice now */
.hm-join::before { display: none; }

@media (max-width: 640px) {
}


/* ══════════════════════════════════════════════════════════
   HOME — CAPSULE EDGE AND REST STATE
   The shelf keeps its size, its ratio and its grid. What
   changes is the edge and how a card looks before anyone
   touches it. The single bright rule read as a sticker cut
   out of the black; it is two lines now — an outer hairline
   that warms to gold at the foot, and an inner one a shade
   inside it — so the card has a wall rather than an outline.
   The grade at rest was also doing too much: art sat dulled
   until hover, which made the default state the worse one.
   ══════════════════════════════════════════════════════════ */

.dp-row {
  /* Same 16px capsule. The outer gradient is quieter at the top and
     carries its warmth lower, and an inset hairline gives the edge
     depth instead of a single lit line. */
  background:
    linear-gradient(180deg, #121216 0%, #0a0a0d 52%, #07070a 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.055) 22%,
      rgba(255,255,255,0.03) 58%, rgba(217,164,65,0.22) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.018),
    0 24px 58px rgba(0,0,0,0.55),
    0 2px 30px -12px rgba(217,164,65,0.10);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    background 0.45s var(--ease);
}
.dp-row:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, #16161b 0%, #0c0c0f 52%, #08080b 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.24) 0%, rgba(217,164,65,0.30) 46%,
      rgba(217,164,65,0.46) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(217,164,65,0.05),
    0 38px 82px rgba(0,0,0,0.62),
    0 6px 58px -14px rgba(217,164,65,0.30);
}

/* The picture at rest. Held back just enough to keep four cards
   looking like one shelf, not so far that the card only comes
   good under a cursor. Hover still hands the colour back whole. */
.dp-row-art {
  filter: saturate(0.93) contrast(1.06) brightness(0.99);
}

/* One light across the top of the glass, and a soft closing of the
   corners underneath it. Both are on the media layer so the art
   moves under them rather than with them. */
.dp-row-media::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, transparent 16%),
    radial-gradient(126% 104% at 50% 30%, transparent 30%, rgba(3,3,5,0.58) 100%);
}

/* The floor the copy stands on, rebuilt as a smooth ramp. The old
   one stepped from 0.96 to 0.88 inside the first 15% and showed a
   band across the bottom of every card. */
.dp-row-media::after {
  background: linear-gradient(0deg,
    rgba(4,4,6,0.97)  0%,
    rgba(4,4,6,0.90) 12%,
    rgba(4,4,6,0.74) 24%,
    rgba(4,4,6,0.44) 38%,
    rgba(4,4,6,0.17) 52%,
    rgba(4,4,6,0.04) 64%,
    transparent      74%);
}

/* the lockup sits a little deeper in the light it carries */
.dp-row-poster img {
  filter:
    drop-shadow(0 0 26px rgba(244,186,110,0.24))
    drop-shadow(0 0 62px rgba(217,164,65,0.10))
    drop-shadow(0 14px 32px rgba(0,0,0,0.7));
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

/* A hairline above the copy, lit from the left and fading out before
   the card edge, so the name has a shelf to sit on at rest instead of
   floating on the gradient. */
.dp-row-body::before {
  content: '';
  position: absolute;
  left: 24px; right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(217,164,65,0.30) 0%, rgba(255,255,255,0.10) 34%, transparent 88%);
  opacity: 0.7;
  transition: opacity 0.45s var(--ease);
}
.dp-row:hover .dp-row-body::before { opacity: 1; }
.dp-row-body { padding-top: 20px; }

/* the name reads a touch brighter at rest, the spec line a touch quieter,
   so the card has a hierarchy before the cursor arrives */
.dp-row-name { color: var(--white); }
.dp-row-status { color: rgba(255,255,255,0.62); }

/* The button at rest was a flat wash. A little more ground under it and
   a lit top edge give the card a finished control instead of a shape. */
.dp-row-go {
  background:
    linear-gradient(180deg, rgba(217,164,65,0.13) 0%, rgba(217,164,65,0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.dp-row-go:hover {
  background:
    linear-gradient(180deg, rgba(217,164,65,0.22) 0%, rgba(217,164,65,0.10) 100%);
}
.dp-row-go[disabled]:hover {
  background:
    linear-gradient(180deg, rgba(217,164,65,0.13) 0%, rgba(217,164,65,0.05) 100%);
}

/* A project with no key art: the warm pool is wider and lands behind the
   lockup, the studio pattern reads instead of hiding, and a low ember
   keeps the foot of the card from going flat black. */
.dp-row-art--empty {
  background-color: transparent;   /* the capsule's own ground carries the card */
  background-image:
    radial-gradient(60% 36% at 50% 40%,   rgba(246,190,118,0.17), transparent 74%),
    radial-gradient(150% 64% at 50% 118%, rgba(214,90,44,0.12),   transparent 72%),
    radial-gradient(120% 54% at 50% 112%, rgba(217,164,65,0.10),  transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, transparent 26%);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}
/* The studio pattern as grain rather than as scenery. Tiled large and at full
   strength it read as blotches through the warm pool — small and at 5% it is
   the tooth of the card, which is all it was ever meant to be. */
.dp-row-art--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/uploads/1775428848_dls1.jpg') center / 130px auto repeat;
  opacity: 0.05;
  pointer-events: none;
}
.dp-row-art--empty::before {
  background: radial-gradient(116% 86% at 50% 30%, transparent 28%, rgba(4,4,6,0.66) 100%);
}

@media (max-width: 640px) {
  .dp-row-body::before { left: 20px; right: 20px; }
}

/* ── two or more posts: the newest leads, the rest are a list beside it ──
   This replaced a three-post-only layout that stretched the other two cards
   to half the lead's height each, which left posts with no cover or excerpt
   as big empty frames. The side list is as tall as its rows; the panel runs
   the height of the lead and closes on the link to the rest. */
#home-news-list.jr-split {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
#home-news-list.jr-split .jr-lead .jr-media { aspect-ratio: 2 / 1; }
#home-news-list.jr-split .jr-lead .jr-body { padding: 26px 30px 28px; }
#home-news-list.jr-split .jr-lead .jr-title { font-size: 1.4rem; line-height: 1.22; margin-bottom: 10px; }

.jr-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--card);
}
.jr-side-head {
  margin: 0 8px 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.jr-side-list { display: flex; flex-direction: column; gap: 2px; }
.jr-side-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: auto 8px 0;
  padding: 16px 0 6px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  transition: color 0.25s;
}
.jr-side-list + .jr-side-all { margin-top: auto; }
.jr-side-all i { font-size: 0.72rem; color: var(--gold); transition: transform 0.35s var(--ease); }
.jr-side-all:hover { color: var(--gold-lt); }
.jr-side-all:hover i { transform: translateX(4px); }
/* the list and the link never touch, however short the lead is; when the lead
   is taller than the rows, they share the height rather than bunching at the
   top over an empty panel */
.jr-side-list { margin-bottom: 14px; flex: 1 1 auto; gap: 6px; }
/* The rows share the panel's height between them rather than spreading out
   with gaps: two posts are two half-height tiles, three are thirds, and each
   thumbnail grows to fill its row. Spaced out evenly, two short rows floated
   in the middle of a tall empty panel. */
.jr-side-list .nl-row {
  flex: 1 1 0;
  min-height: 92px;
  grid-template-columns: minmax(104px, 40%) minmax(0, 1fr) auto;
  align-items: stretch;
}
.jr-side-list .nl-row .nl-thumb { aspect-ratio: auto; height: 100%; min-height: 70px; }
.jr-side-list .nl-row .nl-body,
.jr-side-list .nl-row .nl-go { align-self: center; }
/* with only one or two, there is room for a bigger title and two lines of copy */
.jr-side--few .nl-row .nl-title { font-size: 1.12rem; }
.jr-side--few .nl-row .nl-excerpt { -webkit-line-clamp: 2; font-size: 0.84rem; }
.jr-side--few .nl-row .nl-meta { margin-bottom: 8px; }
.jr-side-list .nl-row + .nl-row::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; top: -2px;
  height: 1px;
  background: rgba(255,255,255,0.05);
}

/* a post with no cover: the same faint studio mark the News page rows use */
.jr-media--mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/logod-800.png') center / auto 30% no-repeat;
  opacity: 0.12;
  filter: grayscale(1);
}
/* "Read" sits on the card's floor whether or not there is an excerpt above it,
   so two cards side by side keep their links level */
#home-news-list .jr-foot { margin-top: auto; min-height: 24px; align-items: center; }

/* exactly two posts: two equal cards, same height, copy lined up */
#home-news-list.jr-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
#home-news-list.jr-pair .jr-body { padding: 24px 28px 26px; }
#home-news-list.jr-pair .jr-title { font-size: 1.3rem; line-height: 1.24; margin-bottom: 10px; }

@media (max-width: 900px) {
  #home-news-list.jr-split,
  #home-news-list.jr-pair { grid-template-columns: minmax(0, 1fr); }
  /* stacked under the lead there is no height to share: rows go back to their own size */
  .jr-side-list .nl-row { flex: none; align-items: center; grid-template-columns: 120px minmax(0, 1fr) auto; }
  .jr-side-list .nl-row .nl-thumb { aspect-ratio: 16 / 11; height: auto; }
}
@media (max-width: 760px) {
  .jr-side-list .nl-row { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 620px) {
  #home-news-list.jr-split .jr-lead .jr-body { padding: 22px 22px 24px; }
  #home-news-list.jr-split .jr-lead .jr-title { font-size: 1.2rem; }
  .jr-side { padding: 14px 8px 8px; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE CLOSING BAND, REMADE
   It was two columns that never balanced: a paragraph and a
   stat line on the left against a boxed CTA on the right, so
   the page ended on a panel rather than on the studio. The
   band is one centred statement now — who we are, then the
   invitation, split by a single lit rule — with the monogram
   far back for depth. No boxes, no facts, nothing said twice.
   The page ends on a sentence and one gold button.
   ══════════════════════════════════════════════════════════ */

.hm-close { overflow: hidden; }
.hm-close > .container { position: relative; z-index: 1; }

/* Depth without a shape. A monogram sat here first and read as a smudge
   behind the paragraph however far it was turned down — a logo is an edge,
   and an edge at 4% is still an edge. Two soft pools instead: one under the
   statement, one at the foot, so the band has somewhere to sit and nothing
   to read. */
.hm-close::before {
  background:
    radial-gradient(46% 44% at 50% 30%,  rgba(217,164,65,0.075), transparent 72%),
    radial-gradient(62% 52% at 50% 106%, rgba(214,90,44,0.055),  transparent 74%);
}

.hm-closer {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hm-closer .hm-panel-eyebrow { margin-bottom: 22px; }
.hm-closer h3 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.042em;
  color: var(--white);
  margin: 0 0 20px;
}
.hm-closer h3 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--gold-lt) 0%, var(--gold) 52%, var(--ember-lt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.hm-closer > p {
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 auto 34px;
  max-width: 62ch;
}
.hm-closer-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* the rule between the two halves, lit in the middle and carrying a
   single mark where the light is strongest */
.hm-closer-rule {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: 1px;
  margin: 58px auto;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.10) 26%,
    rgba(217,164,65,0.34) 50%,
    rgba(255,255,255,0.10) 74%, transparent);
}
.hm-closer-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px; height: 5px;
  margin: -3px 0 0 -3px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 12px rgba(217,164,65,0.7);
}

.hm-closer-invite h4 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.034em;
  color: var(--white);
  margin: 0 0 16px;
}
.hm-closer-invite p {
  font-size: 0.99rem;
  line-height: 1.82;
  color: var(--muted);
  margin: 0 auto 32px;
  max-width: 56ch;
}
.hm-closer-invite .btn-gold { padding: 16px 38px; font-size: 0.97rem; }
.hm-closer-note {
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #5f5f5f;
}
.hm-closer-note .email-link { color: rgba(255,255,255,0.5); }
.hm-closer-note .email-link:hover { color: var(--gold-lt); }
.hm-closer-note .hm-dot {
  display: inline-block;
  margin: 0 10px;
  color: rgba(255,255,255,0.2);
}

@media (max-width: 860px) {
  .hm-closer-rule { margin: 46px auto; }
}
@media (max-width: 640px) {
  .hm-closer > p { font-size: 0.97rem; margin-bottom: 28px; }
  .hm-closer-acts { gap: 18px; }
  .hm-closer-rule { margin: 40px auto; }
  .hm-closer-invite p { font-size: 0.94rem; margin-bottom: 26px; }
  /* the email and the note split across a line break at this width; give
     them a line each and drop the separator that was joining them */
  .hm-closer-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  .hm-closer-note .hm-dot { display: none; }
}


/* ══════════════════════════════════════════════════════════
   HOME — CAPSULE GROUND, EDGE AND FLOOR
   Three things the shelf still got wrong. A project with no
   key art was lit by one small pool at its middle, which read
   as a dot on black rather than a card with a ground. The
   hairline above the copy drew a second edge inside the first.
   And the capsule's outline sat on the page like a sticker cut
   out of the black instead of a plate the black closes around.
   ══════════════════════════════════════════════════════════ */

/* ── the edge ──
   A wall, not a drawn outline. The light is strongest along the
   top where a raised surface would catch it, almost gone down
   the sides, and warms to gold only at the foot. The depth is
   carried by the shadow stack instead: a tight contact line, a
   close shadow that seats the card, a wide soft one that lets
   the page close around it, and the faintest warm halo. */
.dp-row {
  border-radius: 18px;
  background:
    linear-gradient(180deg, #17171e 0%, #101015 30%, #0b0b10 62%, #08080c 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.10)  0%,
      rgba(255,255,255,0.038) 20%,
      rgba(255,255,255,0.020) 52%,
      rgba(178,134,72,0.11)   82%,
      rgba(217,164,65,0.22)  100%) border-box;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.60),
    0 14px 30px -16px rgba(0,0,0,0.75),
    0 44px 88px -34px rgba(0,0,0,0.92),
    0 0 60px -14px rgba(217,164,65,0.055),
    0 0 26px 6px  rgba(0,0,0,0.30);
}
.dp-row:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, #1a1a21 0%, #121218 32%, #0c0c11 66%, #09090c 100%) padding-box,
    linear-gradient(180deg,
      rgba(255,255,255,0.17)  0%,
      rgba(240,214,170,0.11)  20%,
      rgba(217,164,65,0.15)   52%,
      rgba(217,164,65,0.19)   82%,
      rgba(217,164,65,0.24)  100%) border-box;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.60),
    0 18px 36px -18px rgba(0,0,0,0.75),
    0 56px 104px -36px rgba(0,0,0,0.94),
    0 0 78px -18px rgba(217,164,65,0.22),
    0 0 26px 6px  rgba(0,0,0,0.30);
}

/* ── the hairline above the copy ──
   It was a rule inside a card that already has an edge, and on a
   dark capsule two lines that close read as a mistake. The floor
   gradient is what the name stands on now. */
.dp-row-body::before { display: none; }

/* ── the floor, on every card ──
   The ramp stays as it was; a low ember sits over it so the base
   of the card holds a colour instead of going dead black, and the
   shelf reads as one lit row. */
.dp-row-media::after {
  background:
    radial-gradient(130% 38% at 50% 102%, rgba(217,164,65,0.10), transparent 74%),
    linear-gradient(0deg,
      rgba(4,4,6,0.97)  0%,
      rgba(4,4,6,0.90) 12%,
      rgba(4,4,6,0.74) 24%,
      rgba(4,4,6,0.44) 38%,
      rgba(4,4,6,0.17) 52%,
      rgba(4,4,6,0.04) 64%,
      transparent      74%);
}

/* ── the ground under a project with no key art ──
   Four lights instead of one dot: a wide key behind where the
   lockup lands, a cool counter off one shoulder so the warmth has
   something to sit against, and two low embers that give the card
   a floor. All of them translucent, so the capsule's own top-to-
   bottom tone still reads through as the ground. */
.dp-row-art--empty {
  background-color: transparent;
  background-image:
    radial-gradient(86% 52% at var(--cap-key, 50%) 34%,
      rgba(252,210,152,0.22)  0%,
      rgba(240,176,98,0.125) 30%,
      rgba(184,122,56,0.050) 58%,
      transparent            82%),
    radial-gradient(76% 50% at var(--cap-cool, 8%) 0%,
      rgba(var(--plate-cool, 126,148,196), var(--plate-cool-a, 0.11)), transparent 68%),
    radial-gradient(155% 48% at 50% 104%, rgba(219,116,56,0.17), transparent 74%),
    radial-gradient(100% 36% at 50% 100%, rgba(217,164,65,0.12), transparent 70%),
    linear-gradient(180deg,
      rgba(255,255,255,0.075)  0%,
      rgba(255,255,255,0.026) 13%,
      rgba(255,255,255,0.008) 30%,
      transparent             48%,
      rgba(0,0,0,0.16)        80%,
      rgba(0,0,0,0.34)       100%);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}
/* Three plates in a row lit identically read as one image repeated.
   The key light and its counter change shoulder down the shelf —
   small enough that no card looks different, enough that the row
   does not look printed. */
.dp-row:nth-of-type(3n+2) .dp-row-art--empty { --cap-key: 43%; --cap-cool: 92%; }
.dp-row:nth-of-type(3n)   .dp-row-art--empty { --cap-key: 57%; --cap-cool:  6%; }

/* The dashboard's "Fallback Colour Theme": which way the plate's cool counter
   light leans. Only the counter changes — the amber key stays the studio's —
   so the choice reads on the card without putting a second brand colour on
   the shelf. */
.plate-blue  { --plate-cool: 120,146,204; --plate-cool-a: 0.17; }
.plate-green { --plate-cool: 112,184,150; --plate-cool-a: 0.17; }

/* The vignettes were the reason the light read as a dot: two of
   them stacked, closing at 0.66 and 0.58, crushed everything but
   the middle. One soft close is enough on a plate with no picture
   to hold in. */
.dp-row-art--empty::before {
  background: radial-gradient(138% 106% at 50% 34%, transparent 56%, rgba(4,4,6,0.30) 100%);
}
.dp-row-media:has(.dp-row-art--empty)::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 18%),
    radial-gradient(142% 114% at 50% 32%, transparent 48%, rgba(3,3,5,0.40) 100%);
}
/* and the floor can come down too — there is no picture under it,
   only the ground it is darkening for no reason */
.dp-row-media:has(.dp-row-art--empty)::after {
  background:
    radial-gradient(130% 40% at 50% 102%, rgba(217,164,65,0.11), transparent 74%),
    linear-gradient(0deg,
      rgba(4,4,6,0.88)  0%,
      rgba(4,4,6,0.74) 14%,
      rgba(4,4,6,0.50) 28%,
      rgba(4,4,6,0.26) 42%,
      rgba(4,4,6,0.08) 56%,
      transparent      68%);
}


/* ══════════════════════════════════════════════════════════
   HOME — STATUS COLOUR ON THE CAPSULES
   The status classes have carried a colour each since the dock
   was built, but the rest-state pass set `.dp-row-status` to a
   flat 62% white, which is the same specificity and lands later
   — so every card said IN DEVELOPMENT in the same grey and the
   shelf gave no reading at a glance. The colour comes back here,
   scoped to the capsule so nothing else moves.

   Two strengths rather than one: the dot takes the hue whole and
   carries a small light, the label takes it a step softer. That
   way four cards in a row read as a status line, not as four
   different accents shouting over the project names.
   ══════════════════════════════════════════════════════════ */

.dp-row .dp-row-status              { color: rgba(255,255,255,0.55); }
.dp-row .dp-row-status.dp-st-dev,
.dp-row .dp-row-status.dp-st-announced { color: #d6b077; }
.dp-row .dp-row-status.dp-st-live      { color: #7ecb99; }
.dp-row .dp-row-status.dp-st-beta      { color: #dd8a60; }
.dp-row .dp-row-status.dp-st-paused    { color: rgba(255,255,255,0.44); }

/* the dot is the signal — full hue and a light behind it, so it
   reads across the shelf even where the label is quiet */
.dp-row .dp-row-status > i {
  width: 6px; height: 6px;
  background: var(--st-dot, currentColor);
  box-shadow: 0 0 8px -1px var(--st-glow, transparent);
}
.dp-row .dp-row-status.dp-st-dev,
.dp-row .dp-row-status.dp-st-announced { --st-dot: #edc684; --st-glow: rgba(237,198,132,0.85); }
.dp-row .dp-row-status.dp-st-live      { --st-dot: #6fd096; --st-glow: rgba(111,208,150,0.80); }
.dp-row .dp-row-status.dp-st-beta      { --st-dot: #ec8752; --st-glow: rgba(236,135,82,0.80); }
.dp-row .dp-row-status.dp-st-paused    { --st-dot: rgba(255,255,255,0.42); --st-glow: transparent; }

/* the rule between status and platforms stays neutral — it belongs
   to the line, not to whichever state the project happens to be in */
.dp-row .dp-row-status { border-right-color: rgba(255,255,255,0.14); }

/* hover brings the label the rest of the way up to the dot's hue */
.dp-row:hover .dp-row-status.dp-st-dev,
.dp-row:hover .dp-row-status.dp-st-announced { color: #edc684; }
.dp-row:hover .dp-row-status.dp-st-live      { color: #8fdcaa; }
.dp-row:hover .dp-row-status.dp-st-beta      { color: #ec8752; }
.dp-row .dp-row-status { transition: color 0.4s var(--ease); }


/* ══════════════════════════════════════════════════════════
   HOME — THE CLOSING BAND, ON ONE STATEMENT
   The invitation came off the page, so the band is no longer
   two halves either side of a rule — it is one thing said once
   and then closed. That changes what everything in it is for:
   the rule is a full stop rather than a divider, the light has
   to sit under the statement instead of between two blocks,
   and the pair of actions is the last thing on the page before
   the footer, so it has to hold its own.
   ══════════════════════════════════════════════════════════ */

/* the band was padded to carry two blocks; one needs less room
   under it than over it, so the statement sits high and the rule
   has air to close into */
.hm-close { padding: 116px 0 96px; }

/* Light under the words, not beside them. The old pools were set
   off to the shoulders because a rule ran through the middle of
   the band — with one block centred, the warmth belongs behind
   it, with a second low bloom for the mark to sit in. */
.hm-close::before {
  background:
    radial-gradient(58% 46% at 50% 22%, rgba(217,164,65,0.085), transparent 72%),
    radial-gradient(40% 26% at 50% 76%, rgba(217,164,65,0.055), transparent 74%),
    radial-gradient(78% 46% at 50% 112%, rgba(214,90,44,0.05),  transparent 76%);
}

.hm-closer { max-width: 720px; }
.hm-closer .hm-panel-eyebrow { margin-bottom: 26px; }

/* the statement carries the band now, so it is set a size up and
   tracked a shade tighter — three short lines, not a paragraph */
.hm-closer h3 {
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  letter-spacing: -0.046em;
  line-height: 1.05;
  margin: 0 0 22px;
}
.hm-closer > p {
  font-size: 1.05rem;
  line-height: 1.9;
  /* one short sentence wraps with a single word on the second line at this
     measure; balance splits it evenly instead of leaving an orphan */
  text-wrap: balance;
  max-width: 56ch;
  color: rgba(255,255,255,0.62);
  margin: 0 auto 38px;
}

/* The pair at the foot of the page. "Our story" was a flat outline
   on black and read as unfinished next to the capsules above it —
   it gets the same lit ground and warms to gold on hover, and the
   text link beside it keeps its arrow. */
.hm-closer-acts { gap: 28px; }
.hm-closer-acts .btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.014) 100%);
  border-color: rgba(255,255,255,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 12px 28px -16px rgba(0,0,0,0.85);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), transform 0.4s var(--ease);
}
.hm-closer-acts .btn-outline:hover {
  background: linear-gradient(180deg, rgba(217,164,65,0.16) 0%, rgba(217,164,65,0.05) 100%);
  border-color: rgba(217,164,65,0.44);
  color: var(--gold-hi);
  transform: translateY(-2px);
}

/* ── the mark that ends the page ──
   It used to hold two halves apart. Nothing follows it now, so it
   is shorter, sits closer under the actions, and fades out well
   before the column edge — a full stop, not a seam. The diamond
   keeps its light and gains a soft pool so it reads as the last
   lit thing before the footer. */
.hm-closer-rule {
  max-width: 440px;
  margin: 62px auto 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.09) 20%,
    rgba(217,164,65,0.42) 50%,
    rgba(255,255,255,0.09) 80%, transparent 100%);
}
.hm-closer-rule::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 190px; height: 60px;
  margin: -30px 0 0 -95px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217,164,65,0.16), transparent 72%);
  pointer-events: none;
}
.hm-closer-rule::after {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold-lt);
  box-shadow:
    0 0 10px rgba(217,164,65,0.9),
    0 0 26px rgba(217,164,65,0.45);
}

@media (max-width: 860px) {
  .hm-close { padding: 96px 0 82px; }
  .hm-closer-rule { margin: 52px auto 0; max-width: 320px; }
}
@media (max-width: 640px) {
  .hm-close { padding: 78px 0 68px; }
  .hm-closer > p { margin-bottom: 30px; }
  .hm-closer-acts { gap: 20px; }
  .hm-closer-rule { margin: 44px auto 0; max-width: 260px; }
}


/* ══════════════════════════════════════════════════════════
   FOOTER
   Kept simple. There is one structural idea in it — the brand
   on the left, the three link groups together on the right so
   they read as one block instead of drifting to the corners on
   a wide screen — and after that it is only type, spacing and
   a single soft light off the floor. The ghost wordmark, the
   pills and the glows all came back off: a footer is the last
   thing on a page, not the loudest.
   ══════════════════════════════════════════════════════════ */

/* both were switched off again — the badge is gone from the markup,
   the wordmark goes back to the default the sheet already sets */
.footer-wordmark { display: none; }
.footer-tag      { display: none; }

/* a plain hairline at the join */
footer::before {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.075) 24%,
    rgba(255,255,255,0.075) 76%, transparent);
}

/* ── the ground ──
   The first pass used the studio pattern JPEG. It is a dark, heavily
   compressed image, and dark JPEGs block and band badly — at footer size
   the marks came out soft and blotchy. The pattern is built from the logo
   PNG instead: 3023px of artwork the page has already loaded for the two
   lockups, tiled small, so every mark is drawn at whatever the screen's
   density is rather than resampled from mush.

   A gradient carries the slab on its own now that no image is behind it. */
footer {
  background: linear-gradient(180deg, #0a0a0c 0%, #070708 58%, #050506 100%);
}
footer::after {
  background: radial-gradient(940px 280px at 50% 106%, rgba(217,164,65,0.075), transparent 74%);
}

/* The empty div that ships in every footer becomes the pattern layer: its
   text is set to nothing, it is oversized so the rotation cannot expose a
   corner, and the footer's own overflow crops it. Turned a few degrees off
   square so the field reads as texture rather than as wallpaper, and masked
   at the top so it fades in below the seam instead of butting against it. */
.footer-wordmark {
  display: block;
  position: absolute;
  inset: -25%;
  z-index: 0;
  font-size: 0;
  pointer-events: none;
  user-select: none;
  background-image: url('/img/logod-256.png');
  background-repeat: repeat;
  background-size: 78px auto;
  transform: rotate(-10deg);
  filter: grayscale(1) brightness(1.35);
  opacity: 0.013;
  /* Centre-weighted rather than a straight top fade. A linear mask left the
     marks at full strength right up to the left and right edges, where they
     ran into the footer's own boundary and read as a pattern that had been
     cut off. An ellipse puts the field where the eye lands and lets it fall
     away into the sides and corners, so it ends without an edge. */
  -webkit-mask-image: radial-gradient(44% 60% at 50% 50%,
    #000 0%, rgba(0,0,0,0.80) 44%, rgba(0,0,0,0.30) 74%, transparent 100%);
  mask-image: radial-gradient(44% 60% at 50% 50%,
    #000 0%, rgba(0,0,0,0.80) 44%, rgba(0,0,0,0.30) 74%, transparent 100%);
}

.footer-inner { padding: 82px var(--pad) 34px; }

/* the one idea: brand left, links kept together on the right */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 46px 80px;
  margin-bottom: 56px;
}
.footer-brand { flex: 0 1 320px; margin-right: auto; }
.footer-col   { flex: 0 0 auto; }
.footer-brand p {
  margin-top: 20px;
  max-width: 290px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.46);
}

.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.88);
  margin-bottom: 20px;
}

/* links answer by getting brighter, and that is all */
.footer-col ul { gap: 13px; }
.footer-col ul a {
  font-size: 0.89rem;
  color: rgba(255,255,255,0.46);
  gap: 0;
  transition: color 0.25s;
}
.footer-col ul a::before { content: none; }
.footer-col ul a:hover { color: #fff; gap: 0; }

/* the address stays a link — the base style is already right */
.footer-col .email-link { font-size: 0.89rem; }

.footer-social { gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.46);
  box-shadow: none;
  transition: color 0.25s, border-color 0.25s;
}
.footer-social a:hover {
  color: var(--gold-lt);
  border-color: rgba(217,164,65,0.34);
  background: none;
  box-shadow: none;
  transform: none;
}
/* six channels do not fit one line in the narrowest footer column */
.footer-social { flex-wrap: wrap; }
.ap-social { margin-top: 18px; flex-wrap: wrap; }

/* ── ICON TILES, ACTUALLY CENTRED ──────────────────────────
   Font Awesome paints on the text baseline, and its glyphs sit
   in a band centred 0.3775em above it — while the baseline of a
   line-height:1 box lands 0.8152em down from the box top. That
   leaves the ink 0.0623em high in every tile on the site,
   whatever size the tile is, which reads as "not centred" the
   moment you look closely at one.

   The correction goes on the glyph rather than the box, as a
   fraction of an em, so it holds at 34px and at 42px and no
   tile's own geometry has to be tweaked to absorb it.
   ══════════════════════════════════════════════════════════ */
.footer-social a > i,
.sp-social a > i,
.dp-row-play > i,
[class*="-icon"] > i:only-child {
  display: block;
  line-height: 1;
  transform: translateY(0.0625em);
}

.footer-bottom { padding-top: 26px; }
.footer-bottom p { font-size: 0.79rem; color: rgba(255,255,255,0.32); }
.footer-bottom p b { color: rgba(255,255,255,0.46); font-weight: 400; }
.footer-bottom a {
  color: rgba(255,255,255,0.46) !important;
  text-decoration: none;
  transition: color 0.25s;
}
.footer-bottom a:hover { color: var(--gold-lt) !important; }

@media (max-width: 1180px) {
  .footer-top { gap: 44px 58px; }
}
@media (max-width: 760px) {
  .footer-inner { padding: 64px var(--pad) 30px; }
  .footer-top { gap: 34px; margin-bottom: 42px; }
  .footer-brand { flex: 1 1 100%; margin-right: 0; }
  .footer-col   { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════════════════════════
   STATUS DOT — OPTICAL CENTRING
   `align-items: center` centres the dot on the text's line box,
   and a line box is not where uppercase letters sit: Inter's
   caps occupy the band from the baseline up, leaving the
   descender space empty underneath. Measured on the hero chip,
   the cap band's centre is 0.8px above the box centre, which is
   enough to read as a dot hung low off the end of the words.
   One pixel up puts it back on the letters.
   ══════════════════════════════════════════════════════════ */
.dp-row .dp-row-status > i { transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════
   NAV CTA
   The link is the work now rather than a hiring pitch, so it
   points at the shelf. Its hover was `background: #fff` — a
   solid white pill over a warm hero, which is the only pure
   white on the page and flashes as the mouse crosses it. Gold
   instead, the same warm the rest of the site answers with.
   ══════════════════════════════════════════════════════════ */
/* One flat colour, no gradient: the hero's CTA is the gradient pill, and
   two of those on one screen fight. Gold with dark type on it. */
.nav-cta {
  border: 1px solid transparent;
  background: var(--gold);
  color: #1a1206;
  font-weight: 600;
  transition: background 0.28s, color 0.28s;
}
.nav-cta:hover {
  background: var(--gold-lt);
  color: #1a1206;
}
.nav-cta:hover::after { color: var(--gold-hi); }
/* no arrow on this one — it scrolls to a section on the page it is already
   on, and an arrow reads as a link off to somewhere else */
.nav-cta::after { content: none; }


/* ══════════════════════════════════════════════════════════
   GOLD PILLS — THE PALE SLIVER AT THE RIGHT END
   The hero CTA measures 180.4375px wide. A linear-gradient is a
   background *image*, `background-size` is `auto` and
   `background-repeat` is `repeat`, so the browser rasterises one
   tile at 180px and then tiles it — and the 0.44px column left
   over at the right edge is filled by the *start* of the next
   tile, which is the palest stop in the ramp. That is the cream
   sliver on the rounded end: not a shadow, not antialiasing, the
   first colour of the gradient wrapping around.

   Any pill whose width lands on a fraction can show it, and with
   flex and grid tracks most of them eventually do. One tile, and
   a pixel of overshoot so the last stop owns the final column.
   ══════════════════════════════════════════════════════════ */
.btn-gold,
.hs-btn--gold,
.hr-btn--gold,
.nav-cta,
.hm-closer-acts .btn-gold {
  background-repeat: no-repeat;
  background-size: calc(100% + 1px) 100%;
}


/* ══════════════════════════════════════════════════════════
   HOME — THE CLOSING BAND AS A TITLE CARD
   The page opens on the world and then ended on a sentence in
   an empty black field, which is why all that width read as
   nothing. It ends on the world now: the same key art, seen
   further off and much further down, put through the hero's
   own grade so the two frames are plainly the same place.

   The picture has no edges. It is masked out on all four
   sides, so what sits behind the statement is a pool of image
   dissolving into the page rather than a photograph in a box —
   the section still has no card in it, and the black around
   the type is now the picture going dark rather than nothing.
   ══════════════════════════════════════════════════════════ */

.hm-close {
  padding: 186px 0 168px;
  min-height: 720px;
  display: flex;
  align-items: center;
}
.hm-close > .container { width: 100%; }

/* ── the frame ──
   Every layer lives in here, and the mask on it is what keeps
   the picture from drawing a rectangle: full strength under the
   statement, gone well before any edge. Because the mask makes
   this a stacking context, the blend modes inside only ever see
   each other and never reach the page behind. */
.hm-close-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.5) 7%, #000 17%,
    #000 79%, rgba(0,0,0,0.45) 93%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,0.5) 7%, #000 17%,
    #000 79%, rgba(0,0,0,0.45) 93%, transparent 100%);
}

/* The art, cropped to the far half of the scene — sky, the ridge
   and the mountain — so the busy stonework in the foreground stays
   out of the type. Held much darker than the hero: this is the
   same view at the end of the day. */
.hm-close-art {
  position: absolute;
  /* pulled well outside the frame so the blur has real pixels to
     sample at every edge instead of smearing the last row */
  inset: -9%;
  /* The same crop and grade the hero uses, held a good deal darker —
     this is the same view at the end of the day. Softened with a 10px
     blur so the ridge sits behind the closing type as ground rather
     than a second picture competing with it; the -9% inset above is
     what keeps that blur from smearing along the edges. */
  background: url('/img/backdrop-1920.jpg') center 46% / cover no-repeat;
  filter: saturate(1.05) brightness(0.4) contrast(1.5) blur(10px);
  transform: scale(1.03);
  animation: hmCloseBreathe 52s ease-in-out infinite alternate;
}
@keyframes hmCloseBreathe { to { transform: scale(1.1); } }

/* the hero's duotone, one notch warmer, so a green daylight scene
   comes back as brand amber and near-black */
.hm-close-duo {
  position: absolute;
  inset: 0;
  background: linear-gradient(162deg, #e88f28 0%, #8a4f14 30%, #221f1e 62%, #07202e 100%);
  mix-blend-mode: color;
  opacity: 0.88;
}
.hm-close-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg,
    rgba(150,80,20,0.16) 0%, rgba(6,9,13,0.58) 48%, rgba(1,3,6,0.92) 100%);
  mix-blend-mode: multiply;
}

/* the grade: open in the middle where the light is, closed down
   hard everywhere the type or the footer has to go */
.hm-close-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,2,4,0.9) 0%, rgba(2,2,4,0.34) 14%, transparent 32%),
    linear-gradient(0deg,   rgba(2,2,4,0.95) 0%, rgba(2,2,4,0.6) 12%, rgba(2,2,4,0.18) 28%, transparent 46%),
    radial-gradient(108% 96% at 50% 44%, transparent 16%, rgba(0,0,0,0.62) 76%, rgba(0,0,0,0.9) 100%);
}
/* the light the frame looks at, laid back over the top */
.hm-close-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 36% at 50% 28%,
    rgba(255,212,150,0.46), rgba(255,156,70,0.13) 44%, transparent 74%);
  mix-blend-mode: screen;
}
/* one slow pass of light, the same one the hero makes */
.hm-close-tint::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(102deg, transparent 38%, rgba(255,220,164,0.05) 50%, transparent 62%);
  animation: hmClosePass 24s ease-in-out infinite alternate;
}
@keyframes hmClosePass { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* dust lifting through the light — fewer motes than the hero and
   held to the middle, because there is type standing in it */
.hm-close-dust {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    radial-gradient(1.5px 1.5px at 34px 46px,   rgba(255,212,158,0.5),  transparent 62%),
    radial-gradient(1.1px 1.1px at 168px 122px, rgba(255,192,136,0.38), transparent 62%),
    radial-gradient(1.2px 1.2px at 268px 58px,  rgba(255,228,186,0.32), transparent 62%),
    radial-gradient(1px 1px     at 96px 214px,  rgba(255,202,146,0.4),  transparent 62%),
    radial-gradient(1.4px 1.4px at 322px 192px, rgba(255,218,166,0.26), transparent 62%);
  background-size: 380px 300px;
  -webkit-mask-image: radial-gradient(96% 78% at 50% 44%, #000 4%, rgba(0,0,0,0.4) 44%, transparent 80%);
          mask-image: radial-gradient(96% 78% at 50% 44%, #000 4%, rgba(0,0,0,0.4) 44%, transparent 80%);
  animation: hmCloseDust 46s linear infinite;
}
@keyframes hmCloseDust { to { background-position: 58px -300px; } }

/* the section's own glow sits outside the picture now, lighting the
   black the picture dissolves into rather than competing with it */
.hm-close::before {
  background:
    radial-gradient(72% 54% at 50% 8%,   rgba(217,164,65,0.05), transparent 72%),
    radial-gradient(86% 50% at 50% 112%, rgba(214,90,44,0.045), transparent 76%);
}

/* ── the statement, standing in the frame ──
   A picture under type needs a floor, so one soft pool of black
   sits directly behind the copy. It is inside the container, which
   the frame is not, so it lands on top of the art and under the
   words without touching the rest of the scene. */
.hm-closer { position: relative; max-width: 760px; }
.hm-closer::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  /* Wider than the page on purpose. A round pool behind centred type
     reads as a smudge on the picture; stretched past both edges it
     reads as the frame going dark across the middle, which is what a
     title card does — the scene stays lit top, bottom and corners, and
     the sentence gets clean black to stand on. */
  width: 2400px; height: 660px;
  margin: -330px 0 0 -1200px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 46%,
    rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.88) 26%, rgba(0,0,0,0.66) 46%,
    rgba(0,0,0,0.32) 64%, rgba(0,0,0,0.08) 82%, transparent 94%);
}

.hm-closer .hm-panel-eyebrow {
  margin-bottom: 24px;
  letter-spacing: 0.2em;
  color: var(--gold-lt);
  text-shadow: 0 1px 18px rgba(0,0,0,0.8);
}
.hm-closer h3 {
  font-size: clamp(2.2rem, 4.5vw, 3.9rem);
  letter-spacing: -0.048em;
  line-height: 1.03;
  margin: 0 0 22px;
  text-shadow: 0 2px 34px rgba(0,0,0,0.72);
}
.hm-closer h3 em { filter: drop-shadow(0 0 34px rgba(217,164,65,0.34)); }
.hm-closer > p {
  max-width: 50ch;
  color: rgba(255,255,255,0.84);
  margin: 0 auto 40px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 30px rgba(0,0,0,0.95);
}

/* ── the actions ──
   Standing on a picture rather than on black, so the button gets a
   real ground of its own instead of an outline, and fills with gold
   on hover the way the page's primary buttons do. */
.hm-closer-acts { gap: 30px; }
.hm-closer-acts .btn-outline {
  padding: 16px 36px;
  font-size: 0.95rem;
  color: var(--gold-hi);
  border-color: rgba(232,191,118,0.34);
  background: rgba(10,8,6,0.5);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
          backdrop-filter: blur(9px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,241,214,0.12),
    0 16px 40px -20px rgba(0,0,0,0.95);
}
.hm-closer-acts .btn-outline:hover {
  color: #23180a;
  border-color: rgba(232,191,118,0.75);
  background: linear-gradient(96deg, var(--gold-lt) 0%, var(--gold) 52%, var(--ember-lt) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 18px 44px -18px rgba(0,0,0,0.95),
    0 0 48px -14px rgba(217,164,65,0.55);
}
.hm-closer-acts .hm-link {
  position: relative;
  padding-bottom: 5px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 16px rgba(0,0,0,0.9);
}
.hm-closer-acts .hm-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-lt), rgba(217,164,65,0.15));
  transition: right 0.5s var(--ease);
}
.hm-closer-acts .hm-link > i { transition: transform 0.35s var(--ease); }
.hm-closer-acts .hm-link:hover { color: var(--gold-hi); }
.hm-closer-acts .hm-link:hover::after { right: 0; }
.hm-closer-acts .hm-link:hover > i { transform: translateX(4px); }

/* the closing mark, brought up close under the actions so it reads
   as the bottom of the frame rather than a second idea */
.hm-closer-rule {
  max-width: 380px;
  margin: 54px auto 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.10) 22%,
    rgba(232,191,118,0.5) 50%,
    rgba(255,255,255,0.10) 78%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hm-close-art, .hm-close-dust, .hm-close-tint::after { animation: none; }
}

@media (max-width: 980px) {
  .hm-close { padding: 128px 0 116px; min-height: 0; }
  .hm-close-art { background-position: center 40%; }
  .hm-closer::before { width: 760px; margin-left: -380px; }
}
@media (max-width: 640px) {
  .hm-close { padding: 96px 0 86px; }
  .hm-close-frame {
    -webkit-mask-image: radial-gradient(94% 74% at 50% 48%,
      #000 0%, rgba(0,0,0,0.9) 34%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0.14) 80%, transparent 96%);
            mask-image: radial-gradient(94% 74% at 50% 48%,
      #000 0%, rgba(0,0,0,0.9) 34%, rgba(0,0,0,0.5) 58%, rgba(0,0,0,0.14) 80%, transparent 96%);
  }
  .hm-close-dust { display: none; }
  .hm-closer > p { margin-bottom: 32px; }
  .hm-closer-acts { gap: 22px; }
  .hm-closer-acts .btn-outline { padding: 15px 30px; }
  .hm-closer-rule { margin: 44px auto 0; max-width: 240px; }
}

/* ══════════════════════════════════════════════════════════
   CAPSULES — THE LOCKUP SITS HIGHER, THE CONTROLS SIT QUIETER
   Two adjustments to the project cards, nothing structural.

   1. The logotype was centred at 45% of the picture and read as
      floating just above the copy. Taking 6% off the top pad and
      giving it to the bottom lifts the lockup into the open part
      of the art without changing its size — the box it centres
      in keeps the same 62% height, so only its position moves.

   2. The button had grown three layers: a vertical gradient, an
      inset top light and a hover that widened the gap under the
      cursor. On a pill the inset light wraps the end caps and
      outlines the whole perimeter. One flat wash inside a
      hairline reads as the same control with less on it, and
      hover just deepens the wash.
   ══════════════════════════════════════════════════════════ */

.dp-row-poster { padding: 8% 11% 30%; }

.dp-row-go {
  background: rgba(217,164,65,0.06);
  box-shadow: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.dp-row-go:hover {
  background: rgba(217,164,65,0.14);
  border-color: rgba(217,164,65,0.48);
  color: var(--gold-hi);
  gap: 10px;               /* the label holds still under the cursor */
}
.dp-row-go[disabled]:hover { background: rgba(217,164,65,0.06); }

/* the trailer circle is half of a pair — it takes the same fill */
.dp-row-play { background: rgba(217,164,65,0.06); box-shadow: none; }
.dp-row-play:hover {
  background: rgba(217,164,65,0.14);
  border-color: rgba(217,164,65,0.48);
}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL — the page assembles itself as it is read
   ══════════════════════════════════════════════════════════ */

/* A touch further to travel and a touch longer to get there than the
   base .fade, so a section arrives rather than blinks on. */
.fade { transform: translateY(28px); transition-duration: 0.95s; }

@keyframes dlsRise { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }

/* The cards each declare their own transition for the hover lift, and that
   declaration beats .fade's, so a card revealed by transition loses its
   opacity ramp and borrows the hover timing — the flat pop this replaces.
   A keyframe sidesteps the clash: it drives the entrance on its own, and
   'backwards' fill releases transform the moment it ends, leaving the hover
   lift exactly as it was. */
.projects-stack .dp-row.fade,
#home-news-list .jr.fade,
.sp-route.fade,
.sp-pick-card.fade,
.ap-pick-card.fade { opacity: 0; transform: none; }
.projects-stack .dp-row.fade.in,
#home-news-list .jr.fade.in,
.sp-route.fade.in,
.sp-pick-card.fade.in,
.ap-pick-card.fade.in { opacity: 1; animation: dlsRise 1s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  .fade { transform: none; transition-duration: 0.001s; }
  .projects-stack .dp-row.fade.in,
  #home-news-list .jr.fade.in,
  .sp-route.fade.in,
  .sp-pick-card.fade.in,
  .ap-pick-card.fade.in { animation: none; }
  .projects-stack .dp-row.fade,
  #home-news-list .jr.fade,
  .sp-route.fade,
  .sp-pick-card.fade,
  .ap-pick-card.fade { opacity: 1; }
}
/* ══════════════════════════════════════════════════════════
   TEAM — THE ROSTER  (rebuilt)
   The page used to open on a full-bleed crop of the key art
   that swamped its own headline, then set two people in a grid
   built for six, so the widest part of the screen stayed empty
   and the closing panel floated in it. This is the studio's
   ordinary page language instead — the left-aligned header
   About and News already use — with the crew set as one
   register rather than loose cards, so a roster of two reads
   as deliberate rather than unfinished.
   Nothing here states a fact the dashboard doesn't hold: the
   count on the section label is read off the roster.
   ══════════════════════════════════════════════════════════ */

/* the site container runs to 1600 for the picture-led pages; this
   one is a list of prose, so it takes a reading measure instead */
#page-team .container { max-width: 1180px; }

/* news is the exception: its rows are cover-led, and the covers want
   the room, so it takes the Projects/Support measure instead */
#page-news .container { max-width: 1440px; }

/* ── ATMOSPHERE ────────────────────────────────────────────
   One warm source over the top of the page and nothing else —
   what the crop was really there for, at a strength the type
   can still be read against. It is masked out well before the
   roster so no band ever ends on a visible line. */
.pg-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 660px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(880px 400px at 20% -4%, rgba(217,164,65,0.17), transparent 68%),
    radial-gradient(720px 340px at 82% 2%, rgba(214,90,44,0.08), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%);
}
#page-team > .container,
#page-news > .container { position: relative; z-index: 1; }

/* ── HEADER ────────────────────────────────────────────────
   Title left, lede right, sharing a baseline: the same top
   clearance under the fixed nav that .page-header gives the
   other pages, and no empty half at desktop widths. */
.pg-head { padding: 138px 0 0; }
.pg-head-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 430px);
  gap: 48px;
  align-items: end;
}
.pg-title {
  font-size: clamp(2.1rem, 4.2vw, 3.15rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--white);
}
.pg-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold-lt) 42%, var(--gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pg-lede {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  padding-bottom: 6px;
}

/* the header hands off to the page on a rule that starts warm
   and runs out, rather than a hard border across the width */
.pg-rule {
  height: 1px;
  margin-top: clamp(38px, 4.6vw, 56px);
  background: linear-gradient(90deg,
    rgba(217,164,65,0.45) 0%,
    rgba(255,255,255,0.08) 24%,
    rgba(255,255,255,0.045) 68%,
    transparent 100%);
}

/* ── SECTION LABEL ─────────────────────────────────────────
   The headcount is read off the roster in renderTeamPage, so
   the page cannot claim a crew the dashboard has not got. */
.pg-section { margin-top: clamp(50px, 6vw, 74px); }
.pg-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.pg-label-text {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.pg-label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 62%, transparent);
}

/* ── THE REGISTER ──────────────────────────────────────────
   One panel of hairline-separated rows. Two people fill it the
   same way six would, which is the whole reason the crew is a
   register and not a card grid. */
.team-roster {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0) 46%),
    var(--card);
}

.tmr {
  position: relative;
  display: grid;
  grid-template-columns: 38px 78px minmax(190px, 250px) 1fr;
  align-items: center;
  gap: 0 30px;
  padding: 30px 34px;
  transition: background-color 0.4s var(--ease);
}
.tmr + .tmr { border-top: 1px solid var(--border); }
.tmr:hover { background-color: rgba(255,255,255,0.014); }
.tmr > * { position: relative; z-index: 1; }

/* warm light pooled where the pointer is — attachCardGlow feeds
   --mx/--my, so the row has a source rather than an even wash */
.tmr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(360px 170px at var(--mx, 50%) var(--my, 50%), rgba(217,164,65,0.06), transparent 70%);
}
.tmr:hover::before { opacity: 1; }

/* the marker on the leading edge — the one piece of motion the
   row has, and it only runs under the pointer */
.tmr::after {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-deep));
  transform: scaleY(0);
  transition: transform 0.45s var(--ease);
}
.tmr:hover::after { transform: scaleY(1); }

.tmr-id {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #4b4b4b;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
.tmr:hover .tmr-id { color: var(--gold); }

/* a portrait fills the plate when there is one; otherwise the
   monogram is the portrait, given the same plate rather than a
   placeholder box */
.tmr-plate {
  position: relative;
  width: 78px; height: 78px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(217,164,65,0.22);
  background: linear-gradient(150deg, rgba(217,164,65,0.17), rgba(214,90,44,0.07) 58%, rgba(255,255,255,0.02));
  color: var(--gold-lt);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.tmr-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tmr:hover .tmr-plate { border-color: rgba(217,164,65,0.44); transform: translateY(-2px); }

.tmr-role {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.tmr-name {
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--white);
}
.tmr-name span { font-weight: 400; color: var(--text); }

/* the hairline is what makes the row read as a register entry
   rather than a card: identity one side of it, account the other */
.tmr-desc {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 32px;
  border-left: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted);
}

.tmr-empty {
  padding: 54px 34px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* the roster arrives as it is read — the panel is what the
   observer watches, and the rows come in behind it */
@keyframes tmr-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.team-roster.in .tmr {
  animation: tmr-in 0.7s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* ── THE INVITATION ────────────────────────────────────────
   An open band rather than a panel — the same way the home
   page closes. A box here drew a second edge directly under
   the register and fenced in the one part of the page that
   should read as opening out. What is left is a hairline
   across the measure, one warm pool with no edge to hold it,
   and the type sitting on the page. */
.tp-join {
  position: relative;
  text-align: center;
  margin-top: clamp(58px, 7vw, 92px);
  padding: clamp(74px, 8.5vw, 112px) 0 clamp(84px, 10vw, 124px);
}

/* the only line the band needs: what separates it from the register */
.tp-join::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 24%, rgba(255,255,255,0.1) 76%, transparent);
}

/* the warm source, unbounded — atmosphere without a container */
/* THE EDGE IS THE LAYER, NOT THE LIGHT. With inset:0 and gradients
   wider than the measure, this layer was still mid-value where its
   own box stopped — so it clipped into a hard vertical seam down
   both sides of the container and a brightness step across the
   hairline. Sizing the gradients to land inside the box is not
   enough on its own, because the box changes height with the copy.
   Masking the layer's own alpha is: the mask ellipse is 50%/50%
   centred, so it is zero at every edge midpoint and at the corners
   whatever the box turns out to be, and there is nothing left to
   draw by the time the light reaches a side. */
.tp-join::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 58% at 50% 34%, rgba(217,164,65,0.11), transparent 72%),
    radial-gradient(42% 42% at 50% 92%, rgba(214,90,44,0.055), transparent 74%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 22%, transparent 100%);
          mask-image: radial-gradient(50% 50% at 50% 50%, #000 22%, transparent 100%);
}
.tp-join > * { position: relative; z-index: 1; }

/* off the leash of the panel the heading can carry the page's close */
.tp-join h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.55rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.038em;
  margin-bottom: 18px;
}
.tp-join p {
  font-size: 1.01rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}
.tp-join-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.tp-join-side .btn { border-radius: 999px; padding: 16px 30px; }

/* ── NARROWER SCREENS ──────────────────────────────────────
   The account drops under the identity first, then the plate
   goes on top of it; the numeral moves to the corner it can
   keep at any width. */
@media (max-width: 1020px) {
  .pg-head-grid { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .pg-lede { max-width: 62ch; padding-bottom: 0; }
  .tmr { grid-template-columns: 38px 78px 1fr; }
  .tmr-desc {
    grid-column: 1 / -1;
    align-self: auto;
    display: block;
    margin-top: 20px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 620px) {
  .pg-head { padding-top: 116px; }
  .tmr { grid-template-columns: 1fr; gap: 0; padding: 26px 22px; }
  .tmr-id { position: absolute; top: 26px; right: 22px; }
  .tmr-plate { width: 62px; height: 62px; border-radius: 14px; font-size: 1.05rem; margin-bottom: 18px; }
  .tmr-desc { margin-top: 16px; padding-top: 16px; }
  .tp-join { padding: 56px 0 68px; }
  .tp-join p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team-roster.in .tmr { animation: none; }
  .tmr, .tmr::before, .tmr::after, .tmr-id, .tmr-plate { transition: none; }
  .tmr:hover .tmr-plate { transform: none; }
  .tmr::after { transform: scaleY(1); opacity: 0; }
  .tmr:hover::after { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   NEWS — THE LIST
   The archive used to alternate half-width covers down the page
   with a big numeral on each. It looked editorial with three good
   covers and fell apart with anything else: a post with no cover
   became a large empty frame, and a run of short posts read as a
   wall of blank boxes. It is a list of rows now — thumbnail,
   category and date, title, two lines of the post — each as tall
   as what is in it. The same row, compact, is the home page's
   side list, so a post looks like itself wherever it appears.
   ══════════════════════════════════════════════════════════ */

.nl-filters { margin: 0 0 22px; }
.nl-filters[hidden] { display: none; }

.nl-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(80px, 10vw, 130px);
}

.nl-row {
  --cat: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 14px 28px 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--card);
  transition: border-color 0.3s, background 0.3s, transform 0.35s var(--ease), box-shadow 0.35s;
}
.nl-list .nl-row {
  animation: tmr-in 0.6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.nl-row:hover {
  border-color: var(--gold-line);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
/* the whole row opens the post; the title's link is stretched over it, so
   there is one real link per post for keyboards and screen readers */
.nl-row:focus-within { outline: 2px solid rgba(217,164,65,0.7); outline-offset: 3px; }
.nl-row.is-pinned {
  border-color: rgba(217,164,65,0.24);
  background:
    linear-gradient(90deg, rgba(217,164,65,0.06), rgba(217,164,65,0) 38%),
    linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--card);
}

.nl-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0e;
}
.nl-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(0.95);
  transition: transform 1s var(--ease), filter 0.5s;
}
.nl-row:hover .nl-thumb img { transform: scale(1.04); filter: none; }
/* no cover: the studio mark, faint, lit in the post's category colour */
.nl-thumb--empty {
  background:
    radial-gradient(90% 100% at 22% 12%, rgba(217,164,65,0.14), transparent 68%),
    linear-gradient(150deg, #151515, #08080a);
  background:
    radial-gradient(90% 100% at 22% 12%, color-mix(in srgb, var(--cat) 20%, transparent), transparent 68%),
    linear-gradient(150deg, #151515, #08080a);
}
.nl-thumb--empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/logod-800.png') center / auto 36% no-repeat;
  opacity: 0.14;
  filter: grayscale(1);
}

.nl-body { min-width: 0; }
.nl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.nl-cat { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--cat); }
.nl-cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nl-dot { opacity: 0.5; }
.nl-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold-lt);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.nl-pin i { font-size: 0.56rem; }

.nl-title {
  margin: 0 0 7px;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.nl-title a { color: var(--white); text-decoration: none; transition: color 0.25s; outline: none; }
.nl-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.nl-row:hover .nl-title a { color: var(--gold-lt); }
.nl-excerpt {
  margin: 0;
  max-width: 72ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-author { display: block; margin-top: 9px; font-size: 0.76rem; color: rgba(255,255,255,0.42); }

.nl-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}
.nl-go i { font-size: 0.72rem; color: var(--gold); transition: transform 0.35s var(--ease); }
.nl-row:hover .nl-go i { transform: translateX(4px); }

.nl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--muted);
}
.nl-empty i { font-size: 1.4rem; color: var(--gold); margin-bottom: 8px; }
.nl-empty b { color: var(--white); font-weight: 600; }
.nl-empty span { font-size: 0.86rem; }

/* ── the compact row: the home page's side list ── */
.nl-row--compact {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 12px 16px 12px 12px;
  border-radius: 12px;
  border-color: transparent;
  background: transparent;
}
.nl-row--compact:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
}
.nl-row--compact.is-pinned { background: transparent; border-color: transparent; }
.nl-row--compact .nl-thumb { border-radius: 8px; aspect-ratio: 16 / 11; }
.nl-row--compact .nl-meta { margin-bottom: 5px; font-size: 0.64rem; }
.nl-row--compact .nl-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-row--compact .nl-go { gap: 0; }
.nl-row--compact .nl-excerpt { margin-top: 4px; font-size: 0.8rem; line-height: 1.5; -webkit-line-clamp: 1; }

@media (max-width: 760px) {
  .nl-row { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; align-items: start; }
  /* the separator dangled at the end of a line once the date wrapped */
  .nl-dot { display: none; }
  .nl-meta { column-gap: 10px; row-gap: 4px; }
  /* the category chips as one row you swipe, not a wrapped block */
  .pj-filters.nl-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding: 0 var(--pad) 2px;
  }
  .nl-filters::-webkit-scrollbar { display: none; }
  .nl-filters .pj-filter { flex: none; }
  .nl-go { display: none; }
  .nl-title { font-size: 1.02rem; margin-bottom: 5px; }
  .nl-excerpt { font-size: 0.84rem; line-height: 1.55; }
  .nl-author { display: none; }
  .nl-row--compact { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .nl-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .nl-row .nl-excerpt { -webkit-line-clamp: 2; font-size: 0.8rem; }
  .nl-meta { font-size: 0.64rem; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-list .nl-row { animation: none; }
  .nl-row, .nl-thumb img, .nl-go i { transition: none; }
  .nl-row:hover, .nl-row:hover .nl-thumb img, .nl-row:hover .nl-go i { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   POST — THE ARTICLE
   The page was built entirely out of inline styles on a 70vh
   still, which meant the picture took most of the first screen,
   the billing sat wherever the crop happened to be brightest,
   and the page simply stopped at the end of the copy with no
   footer under it. It reads as an article now: a shorter plate
   with the billing on a scrim that is dark where the type is,
   the copy on one measure, and the same footer every other page
   closes on.
   ══════════════════════════════════════════════════════════ */

#page-post .container { max-width: 1180px; }

/* ── THE PLATE ─────────────────────────────────────────────
   Pulled up under the fixed nav the way it always was, but at
   a height that leaves room for the article to start above the
   fold. */
.pp-hero {
  position: relative;
  isolation: isolate;
  margin-top: -82px;
  height: clamp(320px, 50vh, 480px);
  overflow: hidden;
  background: var(--card2);
}
.pp-hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* dark at the top so the nav keeps its contrast, dark again from
   the middle down so the billing never lands on a bright crop —
   the old single ramp left the type to fend for itself */
.pp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.18) 24%,
    rgba(0,0,0,0.58) 62%,
    rgba(0,0,0,0.93) 88%,
    #000 100%);
}
.pp-hero-inner {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

/* the same plate for a post with no cover: the billing gets the
   page's own warm ground rather than a collapsed hero */
.pp-plain {
  position: relative;
  padding: 150px 0 0;
}
.pp-plain::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(820px 380px at 24% -6%, rgba(217,164,65,0.15), transparent 68%),
    radial-gradient(680px 320px at 80% 2%, rgba(214,90,44,0.07), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
}
.pp-plain .pp-title { color: var(--white); text-shadow: none; }

/* ── THE BILLING ───────────────────────────────────────────*/
.pp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pp-cat {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: normal;
}
.pp-date {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.62);
}
.pp-title {
  font-size: clamp(1.95rem, 4.4vw, 3.3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.038em;
  color: #fff;
  max-width: 900px;
  text-shadow: 0 3px 34px rgba(0,0,0,0.62);
}
.pp-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.pp-avatar {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(217,164,65,0.16);
  border: 1px solid rgba(217,164,65,0.3);
}
.pp-byline span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
}

/* ── THE ARTICLE ───────────────────────────────────────────
   One measure for the back link, the copy and the closer, so
   nothing in the column starts on a different left edge. */
.pp-body { padding: clamp(38px, 4.6vw, 62px) 0 clamp(72px, 8vw, 108px); }
.pp-measure { max-width: 760px; margin: 0 auto; }

.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px);
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.pp-back i { font-size: 0.68rem; transition: transform 0.35s var(--ease); }
.pp-back:hover { color: var(--gold-lt); }
.pp-back:hover i { transform: translateX(-4px); }

/* the closer repeats the way out, given an edge this time so it
   reads as the end of the piece rather than another stray link */
.pp-close {
  margin-top: clamp(46px, 5vw, 66px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--border);
}
.pp-close .pp-back {
  margin-bottom: 0;
  padding: 11px 20px;
  border: 1px solid var(--border2);
  border-radius: 999px;
}
.pp-close .pp-back:hover { border-color: rgba(217,164,65,0.4); }

/* On a phone there is not enough plate for the billing to sit on it:
   the chip and a two-line title fill the whole crop and ride up into
   the nav. The picture goes above the billing instead of under it,
   which also means the type no longer needs a shadow to survive. */
@media (max-width: 620px) {
  .pp-hero {
    margin-top: 0;
    height: auto;
    padding-top: 96px;
  }
  .pp-hero img {
    position: relative;
    height: clamp(196px, 46vw, 268px);
  }
  .pp-hero::after { display: none; }
  .pp-hero-inner {
    position: static;
    padding: 26px 0 0;
  }
  .pp-title { max-width: none; text-shadow: none; }
  .pp-date, .pp-byline span { color: var(--muted); }
  .pp-plain { padding-top: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-back, .pp-back i { transition: none; }
  .pp-back:hover i { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   SUPPORT + THE STUDIO STORY
   Onto the shared .pg-* furniture, like Team and News. Two
   things beyond that: the concept art loses the card it was
   sitting in — line work on black needs no box, and the panel
   only drew a second edge around a drawing that already has
   one — and the three milestones become a track rather than
   three tiles, since they are a sequence and were being set as
   a grid of unrelated facts.
   ══════════════════════════════════════════════════════════ */

#page-support .container { max-width: 1440px; }
#page-support > .container { position: relative; z-index: 1; }

/* ── THE STORY ─────────────────────────────────────────────*/
.st-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 4.4vw, 62px);
  align-items: center;
}
.st-text p {
  font-size: 0.99rem;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 58ch;
}
.st-text p:last-child { margin-bottom: 0; }

/* no frame: the art sits on the page. The drop shadow is the only
   thing holding it off the black, and it is the picture's own
   shape that casts it rather than a box around it. */
.st-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-art img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
}
.st-art-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 32px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.st-art-missing i { font-size: 2.4rem; color: var(--border2); }
.st-art-missing strong { color: var(--text); }

/* ── THE TRACK ─────────────────────────────────────────────
   Stations on one continuous line rather than three segments
   stitched between nodes: the rule belongs to the track, so it
   cannot leave gaps at the stops or need a fraction hard-coded
   to however many milestones there happen to be. The last node
   is lit because it is where the studio actually is. */
.st-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(217,164,65,0.2);
}
.st-stop {
  position: relative;
  padding: 38px 34px 0 0;
}
/* the node rides the line: half its own height above the top edge */
.st-stop::before {
  content: '';
  position: absolute;
  top: -8px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid var(--gold-line);
  box-shadow: 0 0 0 5px rgba(10,10,10,1);
}
.st-stop--now::before {
  background: var(--gold);
  border-color: var(--gold-lt);
  box-shadow: 0 0 0 5px rgba(10,10,10,1), 0 0 18px rgba(217,164,65,0.5);
}
.st-year {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.st-what {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* ── GET IN TOUCH ──────────────────────────────────────────*/

.sp-social { display: flex; gap: 10px; }
.sp-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--gold);
  font-size: 0.9rem;
  background: rgba(217,164,65,0.07);
  border: 1px solid rgba(217,164,65,0.2);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sp-social a:hover {
  background: rgba(217,164,65,0.16);
  border-color: rgba(217,164,65,0.4);
  transform: translateY(-2px);
}

/* ── NARROWER SCREENS ──────────────────────────────────────*/
@media (max-width: 1020px) {
  .st-story { grid-template-columns: 1fr; gap: 34px; }
  .st-art { order: -1; }
  .st-art img { max-height: 320px; }
}
@media (max-width: 760px) {
  /* the track turns on its side: the line runs down the left and
     the stops read as a list, which is what a timeline is anyway */
  .st-track {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
    border-left: 1px solid rgba(217,164,65,0.2);
    padding-left: 26px;
  }
  .st-stop { padding: 0 0 26px 0; }
  .st-stop:last-child { padding-bottom: 0; }
  .st-stop::before { top: 3px; left: -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-social a, .sp-fact-value a { transition: none; }
  .sp-social a:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   SUPPORT — PICK FIRST, THEN WRITE
   A blank form asks you to describe your problem before it has
   said it can help with it, and it asks everyone the same four
   questions whether they found a crash or want review keys. So
   the page opens on the six things people actually write in
   about; the form arrives after one is chosen, already knowing
   what to call the message and what to ask for.
   ══════════════════════════════════════════════════════════ */
.sp-pick { transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.sp-pick.is-out { opacity: 0; transform: translateY(-10px); }
.sp-pick-head { text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.sp-pick-head h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 12px;
}
.sp-pick-head p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto;
}
.sp-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sp-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 26px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 60%),
    var(--card);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.sp-pick-card:hover { border-color: rgba(217,164,65,0.32); transform: translateY(-3px); }
.sp-pick-card:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 3px; }
.sp-pick-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.98rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.22);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.sp-pick-card:hover .sp-pick-icon {
  background: rgba(217,164,65,0.16);
  border-color: rgba(217,164,65,0.42);
}
.sp-pick-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sp-pick-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.sp-pick-card:hover .sp-pick-title { color: var(--gold-lt); }
.sp-pick-desc { font-size: 0.83rem; line-height: 1.65; color: var(--muted); }
.sp-pick-go {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 0.72rem;
  color: #4b4b4b;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.sp-pick-card:hover .sp-pick-go { color: var(--gold); transform: translateX(4px); }

/* the catch-all is not one of the six, so it does not get a tile
   the same size as them — it lies down across the bottom instead */
.sp-pick-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
}
.sp-pick-card--wide .sp-pick-icon { width: 36px; height: 36px; font-size: 0.86rem; border-radius: 10px; }
.sp-pick-card--wide .sp-pick-copy { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.sp-pick-card--wide .sp-pick-go { position: static; margin-left: auto; }

@media (max-width: 1020px) { .sp-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .sp-pick-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .sp-pick, .sp-pick-card, .sp-pick-icon, .sp-pick-title, .sp-pick-go { transition: none; }
  .sp-pick-card:hover { transform: none; }
  .sp-pick-card:hover .sp-pick-go { transform: none; }
}

/* ── THE TOPIC, ONCE CHOSEN ────────────────────────────────
   It heads the form instead of a generic "Send a Message":
   the card says what this message is, and Change is the way
   back out without losing the page.
   ══════════════════════════════════════════════════════════ */
.sp-chosen {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(22px, 2.4vw, 30px);
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
}
.sp-chosen-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.88rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.28);
}
.sp-chosen-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-chosen-label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-chosen-value {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--white);
}
.sp-chosen-change {
  margin-left: auto;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sp-chosen-change:hover { color: var(--gold-lt); border-color: rgba(217,164,65,0.4); }
.sp-chosen-change:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 2px; }

/* the band arrives in the order you read it rather than all at once */
.sp-message.is-in > * { animation: spStageIn 0.5s var(--ease) both; }
.sp-message.is-in > .sp-form-intro   { animation-delay: 0.02s; }
.sp-message.is-in > .apply-form-card { animation-delay: 0.09s; }
.sp-message.is-in > .sp-aside        { animation-delay: 0.17s; }
@keyframes spStageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-message.is-in > * { animation: none; }
  .sp-chosen-change { transition: none; }
}

/* ── THE MESSAGE ───────────────────────────────────────────
   Centred on its own 900px measure, the form read as a small
   card adrift in a 1440 page — too much black either side of
   it for the one thing the page is for. So it takes the wider
   half of a two-column band instead, and the column beside it
   answers the two questions you have before you write: what
   to say, and who you are writing to.

   The intro and the facts share that column but not a box:
   the form is the only card here, and a second one opposite
   would set up a fight between them.
   ══════════════════════════════════════════════════════════ */
.sp-message[hidden] { display: none; }
.sp-message {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "intro form"
    "facts form";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 4.6vw, 72px);
  row-gap: clamp(26px, 2.8vw, 34px);
  align-items: start;
}
.sp-form-intro { grid-area: intro; }
.sp-aside { grid-area: facts; }
#page-support .apply-form-card { grid-area: form; }

.sp-form-intro h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 12px;
}
.sp-form-intro p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 42ch;
  margin: 0;
}

/* ── WHO YOU ARE WRITING TO ────────────────────────────────
   A ruled list, not five tiles: these are five small facts of
   the same kind, and the rules are the cheapest way to say so
   without drawing five boxes next to the form.
   ══════════════════════════════════════════════════════════ */
.sp-facts { border-top: 1px solid var(--border); }
.sp-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.sp-fact-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.8rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.22);
}
.sp-fact-body { min-width: 0; }
.sp-fact-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.sp-fact-value {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--white);
  overflow-wrap: anywhere;
}
.sp-fact-value a { color: var(--gold); text-decoration: none; transition: color 0.25s var(--ease); }
.sp-fact-value a:hover { color: var(--gold-lt); }

/* the other two ways in, under the list rather than in it: they
   are a sign-off, not a sixth fact */
.sp-aside .sp-social { margin-top: clamp(20px, 2.2vw, 26px); }

@media (max-width: 1020px) {
  /* one column, and the facts go under the form — on a phone the
     form is what you came for, and five facts above it would be
     five screens of scrolling before the first field */
  .sp-message {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "form" "facts";
  }
  .sp-form-intro p { max-width: 60ch; }
  .sp-aside .sp-social { justify-content: center; }
}

/* the page needs air before the footer the way the others have it */
.sp-tail { height: clamp(80px, 10vw, 130px); }

/* ══════════════════════════════════════════════════════════
   SUPPORT — START HERE
   Most of what reaches a studio inbox is already answered
   somewhere on the site, so the three places it usually lives
   go above the form rather than under it. Routes, not cards:
   each one is a whole-row link to a page that already exists.
   ══════════════════════════════════════════════════════════ */
.sp-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sp-route {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 60%),
    var(--card);
  text-decoration: none;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.sp-route:hover {
  border-color: rgba(217,164,65,0.32);
  transform: translateY(-3px);
}
.sp-route-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.92rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.22);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.sp-route:hover .sp-route-icon {
  background: rgba(217,164,65,0.16);
  border-color: rgba(217,164,65,0.42);
}
.sp-route-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sp-route-title {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.sp-route:hover .sp-route-title { color: var(--gold-lt); }
.sp-route-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.sp-route-go {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #4b4b4b;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.sp-route:hover .sp-route-go { color: var(--gold); transform: translateX(4px); }

/* the send button sits on its own row now the form has two select
   columns above it, so it stops being a stretched input */
.sp-send { width: 100%; margin-top: 6px; padding: 14px; }

/* the required mark, out of the inline styles it used to carry */
.form-group label .req { color: #f87171; }

@media (max-width: 900px) {
  .sp-routes { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-route, .sp-route-icon, .sp-route-title, .sp-route-go { transition: none; }
  .sp-route:hover { transform: none; }
  .sp-route:hover .sp-route-go { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   ON MY DUTY — THE GAME PAGE

   The game's amber key-art field opens the page and closes it,
   with the honeycomb over both; the middle is a warm near-black
   so the screenshots have something quiet to sit on. Inter
   throughout like the rest of the site, plain rectangles, and
   one accent — the honeycomb is a texture, not a shape, and it
   is the only thing on the page that is not a rectangle.
   ══════════════════════════════════════════════════════════ */
#page-onmyduty {
  --o-amber: #f2941d;
  --o-lt:    #ffb85c;
  --o-hi:    #ffddb0;
  --o-dark:  #241305;   /* type and buttons on the amber */

  --o-ink:   #0d0b09;   /* the ground — warm, not the site's #000 */
  --o-ink2:  #131010;
  --o-head:  #ffffff;
  --o-body:  #aba298;
  --o-mute:  #7b736b;
  --o-hair:  rgba(255,255,255,0.09);

  --o-ease:  cubic-bezier(.22,1,.36,1);
  --o-pad:   clamp(20px, 5vw, 48px);

  background: var(--o-ink);
  color: var(--o-body);
  overflow-x: clip;
}
#page-onmyduty ::selection { background: rgba(242,148,29,0.3); color: #fff; }

/* the studio's canvas glow and brand texture sit under every other page;
   under the amber field they only muddy it */
body.omd-mode { background: #0d0b09; }
body.omd-mode #bg-canvas,
body.omd-mode .hm-texture { display: none; }
body.omd-mode::before { background: none; }
body.omd-mode #scroll-progress { background: linear-gradient(90deg, transparent, #f2941d); }
/* the nav is the studio's, not the game's — it stays exactly as it is
   on every other page, gold and all */
body.omd-mode footer { border-top: 1px solid rgba(242,148,29,0.14); }

#page-onmyduty .omd-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--o-pad);
  position: relative;
  z-index: 2;
}

/* the honeycomb — the game's own pattern, used over both amber grounds
   and, at a whisper, over the dark middle between them */
.omd-comb,
.omd-about::before,
.omd-shots::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58.89' height='102' viewBox='0 0 58.89 102'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='0.5' stroke-width='1'%3E%3Cpath d='M29.44 -34L58.89 -17L58.89 17L29.44 34L0 17L0 -17Z'/%3E%3Cpath d='M0 17L29.44 34L29.44 68L0 85L-29.44 68L-29.44 34Z'/%3E%3Cpath d='M58.89 17L88.33 34L88.33 68L58.89 85L29.44 68L29.44 34Z'/%3E%3Cpath d='M29.44 68L58.89 85L58.89 119L29.44 136L0 119L0 85Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 222px;
}

/* ── type ─────────────────────────────────────────────────── */
.omd-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-lt);
  margin: 0 0 clamp(14px, 2vw, 18px);
}
#page-onmyduty h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--o-head);
  margin: 0;
}
#page-onmyduty h2 b { font-weight: 700; color: var(--o-lt); }
.omd-body p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.88;
  color: var(--o-body);
}
.omd-body p + p { margin-top: 20px; }

/* ── buttons ──────────────────────────────────────────────── */
.omd-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.omd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--o-amber);
  color: #1c1004;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--o-ease);
}
.omd-btn:hover { background: var(--o-lt); transform: translateY(-2px); }
.omd-btn:focus-visible { outline: 2px solid var(--o-lt); outline-offset: 3px; }
.omd-btn i { font-size: 0.88rem; }
.omd-btn--quiet {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  color: #f0ece7;
}
.omd-btn--quiet:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.44); color: #fff; }

/* on the amber grounds the accent button would vanish, so it inverts */
.omd-on-amber .omd-btn {
  background: #fff6e9;
  color: #1c0f02;
  box-shadow: 0 14px 34px rgba(46,22,4,0.26);
}
.omd-on-amber .omd-btn:hover { background: #fff; color: #140a01; }
/* the second one stays behind it: a thin cream rule over a little
   smoke, so it is legible without competing */
.omd-on-amber .omd-btn--quiet {
  background: rgba(28,13,3,0.18);
  border-color: rgba(255,240,220,0.5);
  color: #fff6ea;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.omd-on-amber .omd-btn--quiet:hover { background: rgba(28,13,3,0.36); border-color: #fff; color: #fff; }
.omd-on-amber .omd-btn:focus-visible { outline-color: var(--o-dark); }
.omd-on-amber .omd-btn--quiet:focus-visible { outline-color: #fff; }


/* ══ THE COVER ═════════════════════════════════════════════
   The game's key-art field with the honeycomb drifting over it
   and the mark sunk in behind the logo, centred. */
.omd-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(130px, 16vh, 190px) var(--o-pad) clamp(100px, 13vh, 150px);
  overflow: hidden;
  isolation: isolate;
  background: #b3630f;
  text-align: center;
}
.omd-cover-field,
.omd-cover-comb,
.omd-cover-mark,
.omd-cover-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.omd-cover-field {
  background: url('/img/onmyduty-assets/web/field-wide.jpg') center / cover no-repeat;
  filter: saturate(1.1);
  transform: scale(1.06);
  animation: omdField 52s ease-in-out infinite alternate;
}
@keyframes omdField {
  from { transform: scale(1.06) translate3d(-1.2%, -0.7%, 0); }
  to   { transform: scale(1.14) translate3d(1.2%, 0.7%, 0); }
}
.omd-cover-comb {
  opacity: 0.16;
  mix-blend-mode: overlay;
  animation: omdComb 70s linear infinite;
}
@keyframes omdComb {
  from { background-position: 0 0; }
  to   { background-position: 256px 444px; }
}
/* the mark behind the logo, big and faint — depth, not decoration */
.omd-cover-mark {
  left: 50%;
  top: 48%;
  width: min(760px, 108vw);
  height: min(760px, 108vw);
  inset: auto;
  transform: translate(-50%, -50%);
  background: url('/img/onmyduty-assets/web/mark-white.png') center / contain no-repeat;
  opacity: 0.1;
  animation: omdTurn 180s linear infinite;
}
@keyframes omdTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.omd-cover-veil {
  background:
    radial-gradient(56% 46% at 50% 44%, rgba(62,25,3,0.38), rgba(62,25,3,0) 72%),
    radial-gradient(114% 92% at 50% 48%, transparent 24%, rgba(74,30,3,0.45) 70%, rgba(38,15,2,0.82) 100%),
    linear-gradient(180deg, rgba(38,15,2,0.47) 0%, transparent 24% 54%, rgba(14,9,5,0.78) 86%, var(--o-ink) 100%);
}

.omd-cover-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
}
.omd-cover-eyebrow {
  font-size: clamp(0.72rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,238,214,0.72);
  text-shadow: 0 2px 10px rgba(48,22,4,0.5);
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.omd-cover-logo { margin: 0; line-height: 0; }
.omd-cover-logo img {
  display: block;
  width: min(600px, 80vw);
  height: auto;
  filter: drop-shadow(0 14px 38px rgba(42,18,2,0.6));
}
@keyframes omdBeat { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* nothing between the wordmark and the buttons now, so the gap has to
   do the work the pitch and the chips used to */
.omd-cover-in .omd-acts { justify-content: center; margin-top: clamp(38px, 5vw, 62px); }

.omd-cover-down {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(24px, 4.5vh, 46px);
  transform: translateX(-50%);
  padding: 10px 18px;
  color: rgba(255,246,236,0.86);
  font-size: 1rem;
  text-decoration: none;
  filter: drop-shadow(0 2px 8px rgba(40,18,3,0.7));
  animation: omdNudge 2.8s ease-in-out infinite;
  transition: color 0.25s;
}
.omd-cover-down:hover { color: #fff; }
@keyframes omdNudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ══ ABOUT ═════════════════════════════════════════════════ */
.omd-about {
  position: relative;
  padding: clamp(76px, 10vw, 130px) 0 clamp(64px, 8vw, 104px);
  background:
    linear-gradient(180deg, var(--o-ink), rgba(13,11,9,0) 190px),
    radial-gradient(130% 62% at 50% -8%, rgba(242,148,29,0.16), rgba(242,148,29,0) 64%),
    var(--o-ink);
}
/* the texture carries on out of the cover and dies away as the page
   gets further from it */
.omd-about::before,
.omd-shots::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
}
.omd-about::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 150px, transparent 62%);
          mask-image: linear-gradient(180deg, transparent, #000 150px, transparent 62%);
}
.omd-shots::before {
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 58%);
          mask-image: linear-gradient(0deg, #000, transparent 58%);
}
.omd-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.omd-about-grid h2 { max-width: 16ch; }
/* the pitch, down off the cover where it was competing with the
   wordmark — here it is the deck the rest of the section reads from */
.omd-about-deck {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 40ch;
  font-size: 1.04rem;
  line-height: 1.78;
  color: #c2b9af;
}

/* ── the loop ──
   The game is one loop, so the page states it once, in order,
   on a hairline rail: four steps with a marker each and the
   round-off underneath. Not cards — the page has enough
   rectangles, and a rail reads as a sequence where a row of
   boxes reads as a menu. */
.omd-loop { margin-top: clamp(48px, 6.5vw, 82px); }
.omd-loop-head { margin-bottom: clamp(30px, 4vw, 46px); }
.omd-loop-head h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--o-head);
  margin: 0;
  max-width: 42ch;
}
.omd-loop-head h3 b { font-weight: 700; color: var(--o-lt); }

.omd-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.omd-step {
  position: relative;
  padding-top: clamp(22px, 2.4vw, 28px);
  border-top: 1px solid var(--o-hair);
  transition: border-color 0.35s;
}
/* the marker sitting on the rail — the only round thing in the
   section, so the eye reads the row left to right */
.omd-step::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--o-amber);
  box-shadow: 0 0 0 4px rgba(242,148,29,0.13);
  transition: box-shadow 0.35s, background 0.35s;
}
.omd-step:hover { border-color: rgba(242,148,29,0.34); }
.omd-step:hover::before { background: var(--o-lt); box-shadow: 0 0 0 6px rgba(242,148,29,0.18); }
.omd-step-no {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: rgba(242,148,29,0.82);
  margin-bottom: 11px;
}
.omd-step h4 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--o-head);
  margin: 0 0 9px;
}
.omd-step p { font-size: 0.93rem; line-height: 1.75; color: var(--o-body); margin: 0; }

/* and then it goes round — said once, at the end of the rail */
.omd-loop-round {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: clamp(26px, 3.2vw, 36px) 0 0;
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--o-hair);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--o-mute);
}
.omd-loop-round i { color: var(--o-lt); font-size: 0.95rem; margin-top: 3px; }
.omd-loop-round b { color: #ddd6ce; font-weight: 500; }

/* ══ SCREENSHOTS ═══════════════════════════════════════════ */
.omd-shots {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0 clamp(80px, 11vw, 130px);
  background:
    radial-gradient(130% 60% at 50% 108%, rgba(242,148,29,0.15), rgba(242,148,29,0) 62%),
    linear-gradient(180deg, var(--o-ink), var(--o-ink2) 45%, var(--o-ink));
}
.omd-shots-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.omd-shots-head .omd-label { margin-bottom: clamp(12px, 1.6vw, 16px); }
.omd-count {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--o-mute);
}
.omd-count b { color: var(--o-lt); font-weight: 600; }
.omd-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--o-hair);
  border-radius: 12px;
  background: #17130f;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.omd-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}
.omd-stage.swap img { opacity: 0; }
/* a video in the strip plays in the frame itself. contain, not cover: a clip
   that is not exactly 16:9 should be shown whole rather than cropped. */
.omd-stage video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.omd-stage img[hidden], .omd-stage video[hidden] { display: none; }
/* was a hard 5 columns, which only ever fitted the five shots written into
   the page. The strip is the dashboard's list now and can be any length. */
.omd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(88px, 13vw, 150px), 1fr));
  gap: clamp(8px, 1.1vw, 13px);
  margin-top: clamp(9px, 1.2vw, 13px);
}
.omd-thumb {
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 7px;
  opacity: 0.5;
  transition: opacity 0.25s, border-color 0.25s;
}
.omd-thumb { position: relative; }
.omd-thumb img,
.omd-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* a video tile says so: the same triangle the trailer buttons use, over its
   own first frame, so it reads as "plays" rather than "another screenshot" */
.omd-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.omd-thumb-play i {
  display: grid;
  place-items: center;
  width: clamp(22px, 3vw, 30px);
  aspect-ratio: 1;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: clamp(0.5rem, 0.9vw, 0.66rem);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.omd-thumb:hover { opacity: 0.85; }
.omd-thumb.is-on { opacity: 1; border-color: var(--o-amber); }
.omd-thumb:focus-visible { outline: 2px solid var(--o-lt); outline-offset: 3px; }

/* step through the shots without going back to the strip — quiet
   until the pointer is on the frame, and always there on touch */
.omd-stage-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(12,9,6,0.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s, background 0.25s, border-color 0.25s;
}
.omd-stage-btn--prev { left: clamp(10px, 1.4vw, 16px); }
.omd-stage-btn--next { right: clamp(10px, 1.4vw, 16px); }
.omd-stage:hover .omd-stage-btn { opacity: 1; }
.omd-stage-btn:hover { background: rgba(12,9,6,0.8); border-color: rgba(255,255,255,0.52); }
.omd-stage-btn:focus-visible { opacity: 1; outline: 2px solid var(--o-lt); outline-offset: 3px; }
@media (hover: none) { .omd-stage-btn { opacity: 1; } }

/* ══ THE CLOSE ═════════════════════════════════════════════
   Back onto the amber the page opened on, so it does not end
   on a flat black wall. */
.omd-close {
  position: relative;
  padding: clamp(74px, 9.5vw, 122px) 0 clamp(82px, 10.5vw, 134px);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(96% 128% at 16% 4%, #ffc264 0%, #f59d22 32%, #d4770f 62%, #94500a 100%);
  color: var(--o-dark);
}
.omd-close-comb { position: absolute; inset: 0; z-index: 0; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; }
/* the mark is the game's own loop glyph, so it turns — slowly
   enough that you only catch it if you sit on the page */
.omd-close-mark {
  position: absolute;
  z-index: 0;
  right: -7%;
  top: 50%;
  width: min(560px, 66vw);
  height: auto;
  opacity: 0.13;
  pointer-events: none;
  animation: omdCloseTurn 200s linear infinite;
}
@keyframes omdCloseTurn {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
.omd-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}
.omd-close .omd-label { color: rgba(42,21,4,0.82); }
/* the id selector on the base h2 rule outranks a bare class, so this one
   has to carry the id too or the heading stays white on the amber */
#page-onmyduty .omd-close h2 { color: var(--o-dark); max-width: 15ch; }
#page-onmyduty .omd-close h2 b { color: #150b01; }
.omd-close p {
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.86;
  color: rgba(36,19,5,0.84);
}
.omd-close .omd-acts { margin-top: clamp(26px, 3.4vw, 36px); }

/* the facts, squared off — they used to sit up in the about
   section repeating the cover chips, where nobody was asking */
.omd-plate {
  border: 1px solid rgba(58,29,6,0.26);
  border-radius: 12px;
  background: rgba(38,19,4,0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 clamp(18px, 2.2vw, 26px);
}
.omd-plate dl { margin: 0; }
.omd-plate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(13px, 1.5vw, 17px) 0;
  border-top: 1px solid rgba(58,29,6,0.18);
}
.omd-plate-row:first-child { border-top: 0; }
.omd-plate dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(42,21,4,0.85);
}
.omd-plate dd {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--o-dark);
  text-align: right;
}
.omd-plate dd i { font-size: 0.86rem; opacity: 0.66; }
/* between two platforms or two stores in one row */
.omd-plate-sep { margin: 0 2px; opacity: 0.45; }
/* the parts the dashboard can switch off (no trailer, no store in Platforms) —
   .omd-btn and .omd-plate-row set their own display, which would beat [hidden] */
#page-onmyduty [data-omd][hidden] { display: none !important; }
.omd-plate .omd-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b3a06;
  box-shadow: 0 0 0 3px rgba(107,58,6,0.2);
  animation: omdBeat 2.6s ease-in-out infinite;
}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .omd-about-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .omd-about-grid h2 { max-width: 20ch; }
  .omd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 30px); }
  .omd-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .omd-close-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 42px); }
  #page-onmyduty .omd-close h2 { max-width: 18ch; }
  .omd-close-mark { right: -22%; opacity: 0.1; }
}
@media (max-width: 560px) {
  .omd-cover { min-height: 92svh; }
  .omd-steps { grid-template-columns: minmax(0, 1fr); }
  .omd-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omd-acts { width: 100%; }
  .omd-acts .omd-btn { flex: 1 1 190px; justify-content: center; }
  /* no hover to reveal them on a phone, so they stay put */
  .omd-stage-btn { width: 38px; height: 38px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .omd-cover-field, .omd-cover-comb, .omd-cover-mark, .omd-close-mark,
  .omd-cover-down, .omd-plate .omd-live { animation: none; }
  .omd-cover-field { transform: scale(1.04); }
  .omd-cover-mark { transform: translate(-50%, -50%); }
  .omd-close-mark { transform: translateY(-50%); }
  .omd-btn, .omd-step, .omd-step::before, .omd-thumb,
  .omd-stage img, .omd-stage-btn { transition: none; }
  .omd-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   PROJECTS — THE CATALOGUE
   The home shelf shows posters with no prose on them, because
   four covers competing for one glance is the job there. This
   is where the pitch belongs instead: every project in
   whatever state it is in, with the description the shelf
   leaves off, what it runs on, and where to go. The states
   filter, because a catalogue meant to grow past one screen
   needs a way to be asked a question.
   ══════════════════════════════════════════════════════════ */
#page-projects .container { max-width: 1440px; }
#page-projects > .container { position: relative; z-index: 1; }

/* ── THE BAR ───────────────────────────────────────────────
   Filters left, the tally right. Both are built from the data
   in renderProjectsPage, so a state with nothing in it is
   never offered and the count cannot contradict the shelf. */
.pj-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  /* the entries carry their own rules now, so the bar does not need one
     under it as well — three stacked lines in the first screen was two
     too many */
  margin-bottom: clamp(44px, 5vw, 60px);
}
.pj-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-filter {
  display: inline-flex;
  /* the count is set smaller than the label, so centring each one in the
     line drops its baseline below the word next to it. They share a
     baseline instead. */
  align-items: baseline;
  gap: 9px;
  /* with the items on a shared baseline the line box sits where it should,
     so the padding is symmetric again — the earlier 10/8 bias was
     correcting for the centred alignment and now overshoots */
  padding: 9px 15px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pj-filter:hover { color: var(--white); border-color: rgba(255,255,255,0.24); }
.pj-filter:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 2px; }
.pj-filter.is-on {
  color: var(--gold-lt);
  background: var(--gold-dim);
  border-color: rgba(217,164,65,0.42);
}
.pj-filter-n {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* letter-spacing also pads after the last digit — take it back off so the
     count sits the same distance from the edge as the label does */
  margin-right: -0.06em;
  color: #6e6e6e;
  transition: color 0.25s var(--ease);
}
.pj-filter.is-on .pj-filter-n { color: var(--gold); }
.pj-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pj-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  color: var(--gold-lt);
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.26);
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.pj-go:hover { background: rgba(217,164,65,0.17); border-color: rgba(217,164,65,0.45); transform: translateX(2px); }
.pj-go--ghost { color: var(--text); background: transparent; border-color: var(--border2); }
.pj-go--ghost:hover { color: var(--white); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.26); }
.pj-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #6e6e6e; }
/* ── THE REEL ──────────────────────────────────────────────
   Not the home shelf again. Four posters in a row is right for
   a page that is mostly about something else; a page that is
   only about the projects can afford to give each one a whole
   band — key art at a size you can actually read, the pitch
   beside it, and the side it sits on alternating so the page
   scrolls as a reel rather than a column of identical rows.
   ══════════════════════════════════════════════════════════ */
.pj-shelf { display: flex; flex-direction: column; gap: clamp(46px, 5.4vw, 82px); }

.pj-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 34px) clamp(28px, 4vw, 64px);
  align-items: center;
}
.pj-feature:nth-child(even) .pj-feat-art  { order: 2; }
.pj-feature:nth-child(even) .pj-feat-copy { order: 1; }

/* the numeral rides the rule rather than hanging off it, and the rule
   turns around with the row so the number is always over the art */
.pj-feat-rule {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
}
.pj-feature:nth-child(even) .pj-feat-rule { flex-direction: row-reverse; }
.pj-feat-hair {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 26%, rgba(255,255,255,0.015) 100%);
  transition: background 0.5s var(--ease);
}
.pj-feature:nth-child(even) .pj-feat-hair {
  background: linear-gradient(270deg, var(--border) 0%, var(--border) 26%, rgba(255,255,255,0.015) 100%);
}
.pj-feature:hover .pj-feat-hair {
  background: linear-gradient(90deg, rgba(217,164,65,0.4) 0%, rgba(217,164,65,0.22) 26%, rgba(255,255,255,0.015) 100%);
}
.pj-feature:nth-child(even):hover .pj-feat-hair {
  background: linear-gradient(270deg, rgba(217,164,65,0.4) 0%, rgba(217,164,65,0.22) 26%, rgba(255,255,255,0.015) 100%);
}

/* ── THE PANEL ─────────────────────────────────────────────
   Key art where there is any, and a composed plate where there
   is not, so a project with nothing uploaded yet still looks
   intended. The wash is what keeps a pale lockup legible over
   whatever the dashboard happens to hold. */
.pj-feat-art {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.pj-feature:hover .pj-feat-art {
  transform: translateY(-5px);
  border-color: rgba(217,164,65,0.3);
}
.pj-feat-art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.34) 0%, rgba(8,8,8,0.02) 42%, rgba(8,8,8,0.5) 100%),
    radial-gradient(124% 96% at 50% 45%, transparent 48%, rgba(0,0,0,0.38) 100%);
}
.pj-feat-art--empty {
  background-image:
    radial-gradient(ellipse 70% 80% at 26% 20%, rgba(217,164,65,0.17), transparent 62%),
    radial-gradient(ellipse 64% 72% at 92% 96%, rgba(var(--plate-cool, 120,146,204), var(--plate-cool-a, 0.12)), transparent 66%),
    linear-gradient(150deg, #151515, #070707);
}
.pj-feat-art--empty::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/img/logod-800.png') center / auto 40% no-repeat;
  opacity: 0.07;
  filter: grayscale(1);
}
.pj-feat-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
}
.pj-feat-logo img {
  max-width: 62%;
  max-height: 54%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.65));
}
.pj-feat-play {
  position: absolute;
  right: 20px; bottom: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0e0e0e;
  background: var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.pj-feat-play:hover { transform: scale(1.04); background: var(--gold-lt); }
.pj-feat-play:focus-visible { outline: 2px solid rgba(217,164,65,0.85); outline-offset: 3px; }

/* ── THE COPY ──────────────────────────────────────────────
   The numeral is drawn rather than filled: at this size a solid
   one would outweigh the title standing under it. */
.pj-feat-copy { min-width: 0; }
.pj-feat-no {
  display: block;
  flex-shrink: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(217,164,65,0.14);
  -webkit-text-stroke: 1px rgba(217,164,65,0.4);
  transition: color 0.5s var(--ease);
}
.pj-feature:hover .pj-feat-no { color: rgba(217,164,65,0.3); }
.pj-feat-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  margin-bottom: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pj-feat-status > i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pj-feat-name {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 16px;
  transition: color 0.35s var(--ease);
}
.pj-feature:hover .pj-feat-name { color: var(--gold-lt); }
.pj-feat-desc {
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 46ch;
}
.pj-feat-plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pj-feat-plat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.76rem;
  color: #9a9a9a;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
}
.pj-feat-plat > i { font-size: 0.74rem; color: #6e6e6e; }
.pj-feat-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1020px) {
  /* one column, art first every time — the alternation is a wide-screen
     idea, and mirrored rows on a phone just read as inconsistent */
  .pj-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pj-feature:nth-child(even) .pj-feat-art,
  .pj-feature:nth-child(even) .pj-feat-copy { order: 0; }
  .pj-feature:nth-child(even) .pj-feat-rule { flex-direction: row; }
  .pj-feature:nth-child(even) .pj-feat-hair,
  .pj-feature:nth-child(even):hover .pj-feat-hair { background: linear-gradient(90deg, var(--border), rgba(255,255,255,0.02)); }
  .pj-feat-desc { max-width: none; }
}

/* ── NOTHING TO SHOW ───────────────────────────────────────*/
.pj-empty[hidden] { display: none; }
.pj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(50px, 6vw, 80px) 24px;
  text-align: center;
  border: 1px dashed var(--border2);
  border-radius: 18px;
}
.pj-empty-icon { font-size: 1.6rem; color: var(--border2); }
.pj-empty p { font-size: 0.9rem; color: var(--muted); }

.pj-tail { height: clamp(80px, 10vw, 130px); }

/* the shelf on the home page is a selection, so it says so rather than
   letting the reader assume four is all there is */
.dp-work-more { display: flex; justify-content: center; margin-top: clamp(30px, 3.4vw, 44px); }

@media (max-width: 560px) {
  .pj-bar { flex-direction: column; align-items: flex-start; }
  .pj-filter { padding: 8px 13px; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-go, .pj-filter, .pj-filter-n, .pj-feat-art, .pj-feat-name,
  .pj-feat-play, .pj-feat-no, .pj-feat-hair { transition: none; }
  .pj-go:hover, .pj-feature:hover .pj-feat-art, .pj-feat-play:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   LEGAL
   A policy is a document, not a dashboard. The old pages put
   every clause in its own card, so six paragraphs read as six
   unrelated tiles and nothing told you how long the thing was.
   Here the clauses are numbered sections on one measure with a
   hairline between them, and the contents stand beside them and
   follow the reader down — which is how anything of this length
   is actually read.
   ══════════════════════════════════════════════════════════ */
#page-privacy > .container,
#page-terms > .container { position: relative; z-index: 1; }

.lg-body {
  display: grid;
  grid-template-columns: minmax(0, 216px) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 88px);
  align-items: start;
}

/* the rail stays with you: a policy is skimmed for one clause far
   more often than it is read start to finish */
.lg-toc { position: sticky; top: 104px; }
.lg-toc-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.lg-toc-list { list-style: none; border-left: 1px solid var(--border); }
.lg-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lg-toc-list a:hover { color: var(--text); }
.lg-toc-list a.is-on { color: var(--gold-lt); border-left-color: var(--gold); }
.lg-toc-no {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #5c5c5c;
  transition: color 0.25s var(--ease);
}
.lg-toc-list a.is-on .lg-toc-no { color: var(--gold); }

/* the dateline belongs next to the contents, not buried in the lede */
.lg-stamp {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.lg-stamp b {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--white);
}

.lg-doc { max-width: 68ch; }
.lg-sec {
  padding-bottom: clamp(28px, 3.2vw, 40px);
  margin-bottom: clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.lg-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.lg-sec-no {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 9px;
}
.lg-sec h2 {
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 14px;
}
.lg-sec p { font-size: 0.93rem; line-height: 1.9; color: var(--text); }
.lg-sec p + p, .lg-sec ul + p { margin-top: 14px; }
.lg-sec ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.lg-sec li {
  position: relative;
  padding-left: 20px;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text);
}
.lg-sec li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
/* an address in a policy is something you act on, so it is underlined
   rather than only recoloured */
.lg-sec a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(217,164,65,0.3);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lg-sec a:hover { color: var(--gold-lt); border-bottom-color: rgba(217,164,65,0.65); }

.lg-tail { height: clamp(80px, 10vw, 130px); }

@media (max-width: 1020px) {
  /* no room to stand a rail beside the text, so the contents lie
     across the top as a two-up index */
  .lg-body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lg-toc {
    position: static;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
  }
  .lg-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    border-left: 0;
  }
  .lg-toc-list a, .lg-toc-list a.is-on { padding-left: 0; margin-left: 0; border-left: 0; }
  .lg-stamp { margin-top: 22px; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) { .lg-toc-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lg-toc-list a, .lg-toc-no, .lg-sec a { transition: none; } }

/* ══════════════════════════════════════════════════════════
   CAREERS
   The page was still on the old opening — eyebrow, h1 and lede
   stacked in one column with a ghost word behind them — while
   Team, News and Support had moved to the shared one. So it
   takes the same furniture: title left and lede right off a
   single baseline, the warm rule under it, and every section
   announced on a labelled rail rather than just appearing.
   ══════════════════════════════════════════════════════════ */
#page-apply > .container { position: relative; z-index: 1; }

/* three statements about the work, on the surface the other
   pages use for a row of three. Static: they are things to
   read, not somewhere to click, so they do not lift. */
.ap-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ap-perk {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 60%),
    var(--card);
}
.ap-perk-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.92rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.22);
}
.ap-perk-title {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 6px;
}
.ap-perk-desc { font-size: 0.83rem; line-height: 1.65; color: var(--muted); }

/* the same band the Support form sits in: the copy on its own
   measure, the form on the wider half */
.ap-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "rail  rail"
    "aside form"
    "alt   form";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(36px, 4.6vw, 72px);
  row-gap: clamp(26px, 2.8vw, 34px);
  align-items: start;
}
.ap-aside h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 12px;
}
.ap-aside > p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 42ch;
  margin: 0;
}

/* the four disciplines as a ruled list rather than four bulleted
   lines: they are the same kind of thing, and the rules say so
   without a dot in front of each one */
.ap-roles {
  list-style: none;
  margin-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--border);
}
.ap-role {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.ap-role-name {
  flex: 0 0 104px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ap-role-what { font-size: 0.88rem; line-height: 1.55; color: var(--white); }

/* ══════════════════════════════════════════════════════════
   CAREERS — PICK A DISCIPLINE, THEN APPLY
   Support gates on a topic and hides the choice once made; the
   application should not, because a designer who half-fills the
   form and then realises they are really applying as an artist
   has to be able to say so. So the disciplines come first as
   cards, and then stay on as a rail above the form: the panel
   beside it rewrites itself, and nothing you have typed moves.
   ══════════════════════════════════════════════════════════ */
.ap-pick { transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.ap-pick.is-out { opacity: 0; transform: translateY(-10px); }
.ap-pick-head { text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.ap-pick-head h2 {
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--white);
  margin-bottom: 12px;
}
.ap-pick-head p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}
.ap-pick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ap-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 24px 22px 22px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 60%),
    var(--card);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ap-pick-card:hover { border-color: rgba(217,164,65,0.32); transform: translateY(-3px); }
.ap-pick-card:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 3px; }
.ap-pick-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.98rem;
  background: var(--gold-dim);
  border: 1px solid rgba(217,164,65,0.22);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ap-pick-card:hover .ap-pick-icon {
  background: rgba(217,164,65,0.16);
  border-color: rgba(217,164,65,0.42);
}
.ap-pick-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.ap-pick-card:hover .ap-pick-name { color: var(--gold-lt); }
.ap-pick-blurb { font-size: 0.82rem; line-height: 1.65; color: var(--muted); }

/* the tools each discipline actually works in — the quickest way
   to recognise your own job in a card */
.ap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ap-tag {
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  color: #8a8a8a;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
}
.ap-pick-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
}
.ap-pick-card--wide .ap-pick-icon { width: 36px; height: 36px; font-size: 0.86rem; border-radius: 10px; }
.ap-pick-card--wide .ap-pick-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ap-pick-card--wide .ap-tags { margin: 0 0 0 auto; padding: 0; }

@media (max-width: 1080px) { .ap-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ap-pick-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .ap-pick, .ap-pick-card, .ap-pick-icon, .ap-pick-name { transition: none; }
  .ap-pick-card:hover { transform: none; }
}

/* ── THE RAIL ──────────────────────────────────────────────
   The cards compressed to one line, so switching discipline is
   one click from anywhere in the form rather than a trip back.
   ══════════════════════════════════════════════════════════ */
.ap-rail {
  grid-area: rail;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(20px, 2.2vw, 26px);
  border-bottom: 1px solid var(--border);
}
.ap-rail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.ap-rail-btn i { font-size: 0.76rem; color: #6e6e6e; transition: color 0.25s var(--ease); }
.ap-rail-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.24); }
.ap-rail-btn:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 2px; }
.ap-rail-btn.is-on {
  color: var(--gold-lt);
  background: var(--gold-dim);
  border-color: rgba(217,164,65,0.42);
}
.ap-rail-btn.is-on i { color: var(--gold); }

/* the panel rewrites itself on a switch; the form must not move,
   so only this half dips */
.ap-aside {
  grid-area: aside;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.ap-aside.is-swap { opacity: 0; transform: translateY(6px); }
.ap-aside-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(26px, 2.8vw, 34px);
  margin-bottom: 10px;
}
#page-apply .apply-form-card { grid-area: form; }
/* the label belongs to the list under it, not halfway between */
.ap-aside-label + .ap-roles { margin-top: 0; }

.ap-band[hidden] { display: none; }
.ap-band.is-in > .ap-rail { animation: apRailIn 0.42s var(--ease) both; }
.ap-band.is-in > .ap-aside,
.ap-band.is-in > .apply-form-card,
.ap-band.is-in > .ap-alt { animation: apPanelIn 0.5s var(--ease) 0.1s both; }
@keyframes apRailIn  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes apPanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ap-band.is-in > * { animation: none; }
  .ap-aside, .ap-rail-btn { transition: none; }
}

/* the way in that is not the form, under the list the way the
   Support column signs off under its facts */
.ap-alt {
  grid-area: alt;
  margin-top: clamp(22px, 2.4vw, 28px);
}
.ap-alt-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}

/* the page needs air before the footer the way the others have it */
.ap-tail { height: clamp(80px, 10vw, 130px); }

@media (max-width: 1020px) {
  /* the sign-off drops under the form: on a phone the fields are
     what you came for, not the studio's Instagram */
  .ap-band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "aside" "form" "alt";
  }
  .ap-aside > p { max-width: 60ch; }
}
@media (max-width: 900px) {
  .ap-perks { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 520px) {
  .ap-role { flex-direction: column; gap: 5px; }
  .ap-role-name { flex: none; }
}

/* ══════════════════════════════════════════════════════════
   HOME — THE STUDIO STORY
   The story keeps its own layout but takes the home page's
   section rhythm, so it reads as part of that page rather than
   a transplant from the one it came off.
   ══════════════════════════════════════════════════════════ */
.hm-story .st-track { margin-top: clamp(40px, 4.6vw, 62px); }
.hm-story .st-story { margin-top: clamp(24px, 2.6vw, 34px); }

/* ══════════════════════════════════════════════════════════
   SUPPORT — THE FORM AS STEPS
   Two selects asked people to open a menu, read it, and close
   it again before they knew what the options even were. The
   choices are on the page now, as chips, and the form is
   numbered the way the crew register and the archive are — so
   it reads as four short steps rather than one long stack of
   fields.
   ══════════════════════════════════════════════════════════ */
.sp-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 22px;
}
.sp-step + .sp-step {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.sp-step-no {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: #4b4b4b;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
/* the numeral lights once the step has something in it — the only
   moving part, and it reports progress rather than decorating */
.sp-step.is-done .sp-step-no { color: var(--gold); }
.sp-step-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 13px;
}
.sp-step-opt {
  margin-left: 8px;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 500;
  color: #5a5a5a;
}
/* the fields inside a step carry their own label in the placeholder */
.sp-step .form-group { margin-bottom: 0; }
.sp-step .form-row { margin-bottom: 0; }
/* zeroing the group margin above also closed the gap between the message
   and the verify bar, which are two separate controls */
.sp-step #contact-slide-verify { margin-top: 14px; }

/* ── THE CHIPS ─────────────────────────────────────────────*/
.sp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.022);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.sp-chip i { font-size: 0.78rem; color: #6e6e6e; transition: color 0.25s var(--ease); }
.sp-chip:hover { border-color: rgba(255,255,255,0.24); color: var(--white); }
.sp-chip:hover i { color: var(--text); }
.sp-chip:focus-visible { outline: 2px solid rgba(217,164,65,0.6); outline-offset: 2px; }
.sp-chip.is-on {
  border-color: rgba(217,164,65,0.5);
  background-color: rgba(217,164,65,0.1);
  color: var(--gold-lt);
}
.sp-chip.is-on i { color: var(--gold); }

.sp-send { width: 100%; margin-top: 4px; padding: 14px; }

@media (max-width: 620px) {
  .sp-step { grid-template-columns: 1fr; gap: 0; }
  .sp-step-no { margin-bottom: 8px; }
  .sp-chip { padding: 9px 13px; font-size: 0.79rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-chip, .sp-chip i, .sp-step-no { transition: none; }
}

/* ── START HERE, QUIETER ───────────────────────────────────
   The icon sat in a filled gold tile with its own border, which
   made three small marks the loudest thing in the band. The
   icon carries the colour on its own now, and the card is one
   flat surface instead of a gradient over one. */
.sp-route {
  background: var(--card);
}
.sp-route-icon {
  width: 34px; height: 34px;
  border: 0;
  background: none;
  font-size: 1.02rem;
  color: var(--gold);
}
.sp-route:hover .sp-route-icon {
  background: none;
  border: 0;
  color: var(--gold-lt);
}

/* ══════════════════════════════════════════════════════════
   HOME — THE SHOWCASE
   The hero led on one still, which said the studio has art
   but not that the game moves. It now runs a short reel of
   in-game shots behind the copy. Each shot keeps its own slow
   push-in and holds the end of it while the next one fades
   up, so a cut never snaps the frame back to where it started.

   The shots take the same grade the key art carries, so they
   land under the duotone and the light exactly as the still
   did — the copy is still read against black, not against
   whatever colour the screenshot happened to be.
   ══════════════════════════════════════════════════════════ */

.dp-shots { position: absolute; inset: 0; z-index: 1; }

/* The duotone's second pass multiplies towards near-black over the lower two
   thirds. Under one still that just seats the picture; under five it was the
   main reason the darker shots read as a black rectangle. Eased back only
   while a reel is running — the scrim under the copy is untouched, so the
   headline is still reading against black either way. */
.dp-hero.has-shots .dp-duo { opacity: 0.72; }
.dp-hero.has-shots .dp-duo::after {
  background: linear-gradient(166deg, rgba(150,80,20,0.12) 0%, rgba(6,9,13,0.34) 52%, rgba(1,3,6,0.66) 100%);
}

.dp-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.dp-shot.is-live { opacity: 1; }

/* The push-in is driven from JS off the same clock as the progress bar. A CSS
   animation would keep running while the reel is paused or the tab is in the
   background — where rAF is not — and the shot would be fully zoomed with the
   bar barely started. */
/* The still key art was graded to brightness 0.44 / contrast 1.55, which is
   right for one picture chosen to sit behind type and wrong for a reel — the
   darker shots went to mud and you could not read what was in them. Opened up,
   with each shot able to set its own exposure, because a sunlit meadow and a
   shaded canopy do not want the same number. */
.dp-shot-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  filter: saturate(1.08) brightness(var(--shot-exp, 0.66)) contrast(1.24);
  transform: scale(1.04);
}

/* ── the transport ────────────────────────────────────────
   Bottom-right, out of the copy's column and clear of the
   GO DEEPER cue. One play/pause, then a lane per shot: the
   live one stretches into its own progress bar and the rest
   stay marks you can jump to. */

/* No plate under it. A capsule here reads as a second UI sitting on top of
   the picture; the controls are small and light enough to live directly on
   the frame, and one soft shadow keeps them legible when a shot goes bright. */
.dp-shotbar {
  position: absolute;
  z-index: 4;
  right: var(--pad);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,0.65));
  /* leaves with the rest of the hero furniture */
  opacity: calc(1 - var(--sy) * 3);
}
.dp-shotbar[hidden] { display: none; }

.dp-shotbar-play {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.62rem;
  transition: color 0.28s var(--ease), transform 0.28s var(--ease);
}
.dp-shotbar-play:hover { color: var(--gold-hi); transform: scale(1.12); }
.dp-shotbar-play i { pointer-events: none; }

.dp-shotbar-dots { display: flex; align-items: center; gap: 9px; }

.dp-shotbar-dot {
  flex: none;
  position: relative;
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  overflow: hidden;
  transition: width 0.7s var(--ease), background 0.4s var(--ease);
}
.dp-shotbar-dot:hover { background: rgba(255,255,255,0.7); }
.dp-shotbar-dot.is-live {
  width: 64px;
  background: rgba(255,255,255,0.26);
}
/* the fill — JS drives scaleX, so the bar tracks the real dwell
   and stops dead where it was when the reel is paused */
.dp-shotbar-dot i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 980px) {
  .dp-shotbar { bottom: 26px; }
}
@media (max-width: 640px) {
  .dp-shotbar { bottom: 20px; gap: 11px; padding: 7px 14px 7px 7px; }
  .dp-shotbar-play { width: 26px; height: 26px; font-size: 0.52rem; }
  .dp-shotbar-dot.is-live { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-shot { transition: none; }
  .dp-shotbar-dot { transition: none; }
  .dp-shotbar-play { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD LOGIN — the staff door
   It was a 400px form pinned 80px below the header on an
   otherwise empty page, so on a desktop screen it read as a
   fragment floating in black with a fold of dead space under
   it. One composed panel now, centred in the viewport: the
   lock mark and the title sit inside the card with the
   fields, so there is nothing left on screen to be empty
   around it.
   ══════════════════════════════════════════════════════════ */
.dl-center {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: 126px 0 56px;   /* clear the fixed header first, centre in what is left */
}
.dl-card {
  width: 100%;
  max-width: 428px;
  /* auto margins rather than align-items:center — a card taller than the
     viewport (a phone with the keyboard up) then scrolls instead of having
     its head cut off above the top of the scroll area */
  margin: auto;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(26px, 2.4vw, 38px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
/* the same lit top edge the careers form carries */
.dl-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(217,164,65,0.45), transparent);
}
.dl-head { display: flex; align-items: center; gap: 14px; }
.dl-mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
}
.dl-eyebrow {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.dl-title {
  font-family: var(--font-body);
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--white);
}
.dl-sub {
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 18px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.dl-error { margin-bottom: 20px; }

/* the eye lives inside the field, so the text stops short of it */
.dl-pw { position: relative; display: flex; }
.dl-pw input { padding-right: 46px; }
.dl-pw-eye {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: #55555e;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.22s, background 0.22s;
}
.dl-pw-eye:hover { color: var(--gold-lt); background: rgba(255,255,255,0.05); }
.dl-pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; color: var(--gold-lt); }
.dl-pw-group { margin-bottom: 22px; }
.dl-caps {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--gold-lt);
  margin-top: 2px;
}
.dl-caps[hidden] { display: none; }

.dl-submit { width: 100%; padding: 13px; border-radius: 10px; }
.dl-submit:disabled { cursor: default; opacity: 0.72; }
.dl-submit:disabled:hover { background: var(--gold); transform: none; }
.dl-spin {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border: 2px solid rgba(26,20,8,0.32);
  border-top-color: #1a1408;
  border-radius: 50%;
  display: none;
  animation: dlSpin 0.7s linear infinite;
}
.dl-submit.is-busy .dl-spin { display: block; }
@keyframes dlSpin { to { transform: rotate(360deg); } }

.dl-foot {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;   /* two even lines rather than one and a stray word */
  margin-top: 16px;
}
.dl-foot a { color: var(--gold); text-decoration: none; }
.dl-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .dl-center { padding: 92px 0 46px; }
  .dl-title { font-size: 1.28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-spin { animation-duration: 1.8s; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — the staff side
   Every box through here was written inline, one ad-hoc
   background/border/radius per panel, on an older amber
   (rgba(201,148,58)) that no longer matches the token the
   rest of the site uses. It read flat: near-black cards on
   black with nothing to separate them, headings at 0.88rem
   with no mark, and a bar chart in solid gold that was the
   loudest thing on screen. This gives the dashboard the
   site's own surface language — one sheen, hairline edges,
   the amber spent only where a value is — and puts the
   repeated inline rules onto classes.
   ══════════════════════════════════════════════════════════ */

/* ── panels ── */
.dash-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}
.dash-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.015em;
}
.dash-panel-note { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.dash-panel-body { padding: 18px 20px; }
.dash-panel-body--flush { padding: 6px 8px 8px; }
.dash-btn-sm { font-size: 0.72rem; padding: 6px 13px; border-radius: 8px; }

.dash-grid-2 { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 1020px) { .dash-grid-2 { grid-template-columns: 1fr; } }

.dash-lede { color: var(--muted); font-size: 0.85rem; line-height: 1.7; margin-bottom: 20px; }
.dash-empty-note { color: var(--muted); font-size: 0.82rem; }

/* ── tabs ── */
.dash-tabs {
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  padding: 11px 15px;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dash-tab:hover { color: var(--white); background: rgba(255,255,255,0.03); }
.dash-tab.active { background: rgba(217,164,65,0.055); }

/* ── the four counters ── */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 1020px) { .dash-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .dash-stat-grid { grid-template-columns: 1fr; } }

.analytics-stat-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  padding: 16px 18px 17px;
  gap: 0;
}
/* the label names the number before you read it, so it goes above */
.analytics-stat-card .asc-label {
  order: -1;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.analytics-stat-card .asc-num {
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.analytics-stat-card .asc-change {
  align-self: flex-start;
  margin-top: 11px;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.5;
}
.asc-change.asc-up   { color: #4ade80; background: rgba(34,197,94,0.09);  border: 1px solid rgba(34,197,94,0.22); }
.asc-change.asc-down { color: #f87171; background: rgba(239,68,68,0.09);  border: 1px solid rgba(239,68,68,0.22); }

/* ── popular pages ── */
.dash-pp { display: flex; flex-direction: column; gap: 13px; }
.dash-pp-row { display: flex; align-items: center; gap: 11px; }
.dash-pp-icon { color: var(--gold); font-size: 0.78rem; width: 16px; text-align: center; flex-shrink: 0; }
.dash-pp-main { flex: 1; min-width: 0; }
.dash-pp-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.dash-pp-name { font-size: 0.8rem; font-weight: 600; color: var(--white); }
.dash-pp-count { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-pp-track { width: 100%; height: 4px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
.dash-pp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold-deep), var(--gold));
  transition: width 0.5s var(--ease);
}

/* ── recent activity ── */
.dash-act { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.dash-act-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  transition: background 0.18s;
}
.dash-act-row:hover { background: rgba(255,255,255,0.025); }
.dash-act-row + .dash-act-row { box-shadow: 0 -1px 0 rgba(255,255,255,0.05); }
.dash-act-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.62rem;
}
.dash-act-main { flex: 1; min-width: 0; }
.dash-act-title { font-size: 0.8rem; color: var(--muted); }
.dash-act-title strong { color: var(--white); font-weight: 600; }
.dash-act-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; flex-wrap: wrap; }
.dash-act-country { font-size: 0.7rem; color: var(--muted); }
.dash-act-ip {
  font-size: 0.66rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 5px;
}
.dash-act-lookup {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.58rem;
  transition: color 0.18s, background 0.18s;
}
.dash-act-lookup:hover { color: var(--gold); background: var(--gold-dim); }
.dash-act-when { text-align: right; flex-shrink: 0; }
.dash-act-ago { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.dash-act-stamp { font-size: 0.6rem; color: var(--muted); opacity: 0.5; white-space: nowrap; margin-top: 1px; }

/* ── search ── */
.dash-search {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 12px 10px 34px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.dash-search::placeholder { color: #55555e; }
.dash-search:hover { border-color: rgba(255,255,255,0.2); }
.dash-search:focus {
  border-color: var(--gold);
  background-color: rgba(217,164,65,0.04);
  box-shadow: 0 0 0 3px rgba(217,164,65,0.12);
}

/* ── the record cards on the other tabs, brought onto the same surface ── */
.app-card, .proj-edit-card, .member-edit-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--card);
  border-radius: 14px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.app-card:hover, .proj-edit-card:hover, .member-edit-card:hover {
  border-color: var(--gold-line);
  transform: translateY(-1px);
}
/* the old amber, matched to the site's token */
.proj-edit-icon, .member-edit-avatar {
  background: var(--gold-dim);
  border-color: var(--gold-line);
  color: var(--gold);
}
#dash-user-badge > div:first-child {
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
}

/* ── filter chips ── */
.dash-filter { border-radius: 999px; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.dash-filter:hover { background: rgba(255,255,255,0.04); }
.dash-filter.active { box-shadow: 0 4px 14px rgba(217,164,65,0.18); }

@media (max-width: 760px) {
  .dash-panel-head { padding: 13px 15px; }
  .dash-panel-body { padding: 15px; }
  .analytics-stat-card .asc-num { font-size: 1.7rem; }
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD — second pass
   The panels were already on the site's surface language; what
   was still missing was the furniture around them. The tab row
   was a bare underline, the pagination was inline-styled on the
   retired amber, the activity log was a 300px scroll box, and
   every empty state was an emoji. This makes the chrome match
   the panels: one segmented rail for the menu, one pagination
   component shared by all five lists, and a real empty state.
   ══════════════════════════════════════════════════════════ */

/* ── the account rail across the top ───────────────────────── */
#dashContent .page-header { padding-bottom: 26px; }

#dash-user-badge {
  gap: 8px !important;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
}
#dash-user-badge > div:first-child {
  width: 24px !important; height: 24px !important;
  border-radius: 7px !important;
}
#dash-notif-bell {
  border-radius: 999px !important;
  width: 36px !important; height: 36px !important;
  background: var(--card) !important;
  transition: border-color 0.22s, background 0.22s, transform 0.22s var(--ease) !important;
}
#dash-notif-bell:hover {
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
  transform: translateY(-1px);
}
#dash-notif-bell:hover i { color: var(--gold) !important; }

.dash-stat-chip {
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.75rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%), var(--card);
}

/* ── the tab rail — a segmented menu, not an underline ─────── */
.dash-tabs {
  gap: 3px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 55%), var(--card);
  box-shadow: var(--sh-1);
}
.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border-bottom: none;
  margin-bottom: 0;
  color: var(--muted);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dash-tab i { font-size: 0.78rem; opacity: 0.55; transition: color 0.2s, opacity 0.2s; }
.dash-tab:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.dash-tab:hover i { opacity: 0.9; }
.dash-tab.active {
  color: var(--white);
  background: var(--gold-dim);
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.dash-tab.active i { color: var(--gold); opacity: 1; }

/* ── panels: a footer rail for pagination ─────────────────── */
.dash-panel-foot {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.012);
}

/* ── pagination — one component, shared by every list ──────── */
.dash-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-pag-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.dash-pag-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border-color: var(--border2);
  transform: translateY(-1px);
}
.dash-pag-btn.is-active {
  color: #1a1408;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold));
  border-color: var(--gold);
  cursor: default;
  box-shadow: 0 4px 14px rgba(217,164,65,0.22);
}
.dash-pag-btn.is-active:hover { transform: none; }
.dash-pag-btn[disabled] { opacity: 0.3; pointer-events: none; }
.dash-pag-btn i { font-size: 0.62rem; }
.dash-pag-gap { color: var(--muted); font-size: 0.76rem; padding: 0 2px; user-select: none; }
.dash-pag-count {
  margin-left: 6px;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── activity log — paginated, so it no longer traps rows ──── */
.dash-act { max-height: none; overflow: visible; gap: 1px; }
.dash-act-row { padding: 10px 12px; }
.dash-act-row + .dash-act-row { box-shadow: 0 -1px 0 rgba(255,255,255,0.045); }
.dash-act-icon { width: 28px; height: 28px; font-size: 0.66rem; }
.dash-act-title { font-size: 0.82rem; }

/* ── empty states ─────────────────────────────────────────── */
.dash-empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--muted);
}
.dash-empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 1.1rem;
}
.dash-empty-state b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.dash-empty-state span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.7;
  max-width: 340px;
  margin: 0 auto;
}

/* ── the counters get the same lift the cards have ────────── */
.analytics-stat-card {
  position: relative;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.analytics-stat-card::after {
  content: '';
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-line), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.analytics-stat-card:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.analytics-stat-card:hover::after { opacity: 1; }

/* ── popular pages: a full list now, so it needs breathing room ── */
.dash-pp { gap: 12px; }
.dash-pp-row { padding: 1px 0; }


/* ── panel heads: a heading block, and a tools cluster on the right ─────── */
.dash-panel-title { gap: 0; font-size: 0.95rem; }
.dash-panel-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-panel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── segmented control (the chart's date ranges) ───────────────────────── */
.dash-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
}
.dash-seg-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 9px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.dash-seg-btn:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.dash-seg-btn.is-active {
  color: #1a1408;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold));
  box-shadow: 0 2px 8px rgba(217,164,65,0.2);
}

/* ── the chart fills its panel ─────────────────────────────────────────────
   Popular Pages lists every page now, which makes the right-hand panel taller
   than a fixed 180px canvas; the chart was leaving a growing block of dead
   black under it. The canvas takes whatever height the row gives it instead,
   and the draw reads that height back. */
.dash-chart-body { display: flex; flex-direction: column; min-height: 210px; }
#analytics-chart { flex: 1 1 auto; width: 100%; min-height: 180px; display: block; }

@media (max-width: 760px) {
  .dash-panel-head { flex-wrap: wrap; }
  .dash-panel-tools { width: 100%; justify-content: flex-start; }
  .dash-seg { width: 100%; justify-content: space-between; }
}

@media (max-width: 760px) {
  .dash-tabs { border-radius: 12px; padding: 4px; }
  .dash-tab { padding: 8px 11px; gap: 6px; }
  .dash-tab i { font-size: 0.72rem; }
  .dash-pag-btn { min-width: 30px; height: 30px; padding: 0 8px; }
  .dash-pag-count { width: 100%; text-align: center; margin: 4px 0 0; }
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD — third pass
   Smaller: the chart had grown to fill a panel sized by a long
   Popular Pages list, so both sides are compact now and the
   canvas is capped. Plus the two menus the OS used to draw for
   us — the country select and the notification dialog — are
   real popovers with flags, counts and search.
   ══════════════════════════════════════════════════════════ */

/* ── the tab rail hugs its tabs instead of stretching ─────── */
.dash-tabs {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 13px;
}
.dash-tab { padding: 8px 13px; gap: 7px; font-size: 0.82rem; }
.dash-tab i { font-size: 0.74rem; }

/* ── the account rail ─────────────────────────────────────── */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 0;
}
.dash-account { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.dash-account-row { display: flex; align-items: center; gap: 8px; }
.dash-stats { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.dash-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 4px;
  font-size: 0.75rem;
  color: var(--muted);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%), var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dash-user-av {
  width: 25px; height: 25px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem; font-weight: 700;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  flex-shrink: 0;
}
.dash-user-text strong { color: var(--white); font-weight: 600; }

.dash-icon-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.dash-icon-btn:hover { color: var(--gold); background: var(--gold-dim); border-color: var(--gold-line); transform: translateY(-1px); }
.dash-icon-btn[aria-expanded="true"] { color: var(--gold); background: var(--gold-dim); border-color: var(--gold-line); }
.dash-icon-btn.has-unread { color: var(--gold); }
.dash-notif-dot {
  display: none;
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  /* Digits carry no descender, so centring the line box still leaves the
     numeral itself sitting ~0.5px high in the circle. The 1px of top padding
     shrinks the centred area by 1 and moves it down 1, netting the half pixel
     back and putting the number on the circle's actual centre. */
  padding: 1px 4px 0;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid var(--bg);
  color: #fff;
  font-size: 0.56rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  align-items: center; justify-content: center;
}

.dash-logout {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dash-logout:hover { color: var(--white); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.24); }
.dash-logout i { font-size: 0.72rem; opacity: 0.7; }

/* ── popovers: one surface for the country menu and the bell ── */
.dash-pop {
  position: fixed;
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 38%), var(--card2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(0,0,0,0.4);
  animation: dashPopIn 0.16s var(--ease);
}
.dash-pop[hidden] { display: none; }
@keyframes dashPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash-pop { animation: none; } }

.dash-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-pop-heading { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.dash-pop-mark {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  color: var(--muted); background: none; border: none; cursor: pointer;
  transition: color 0.18s;
}
.dash-pop-mark:hover { color: var(--gold); }
.dash-pop-body { overflow-y: auto; padding: 6px; flex: 1 1 auto; min-height: 0; }
.dash-pop-foot { padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; }
.dash-pop-foot:empty { display: none; }

.dash-pop-group {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.61rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold);
  padding: 9px 8px 6px;
}
.dash-pop-group span {
  font-size: 0.6rem; letter-spacing: 0;
  padding: 1px 6px; border-radius: 999px;
  background: var(--gold-dim); border: 1px solid var(--gold-line);
}
.dash-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: none; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.16s;
}
.dash-pop-item:hover { background: rgba(255,255,255,0.05); }
.dash-pop-av {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; flex-shrink: 0;
}
.dash-pop-av--app { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.22); color: #60a5fa; }
.dash-pop-av--msg { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.22); color: #4ade80; }
.dash-pop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-pop-title {
  font-size: 0.79rem; font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-pop-sub {
  font-size: 0.68rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-pop-more { font-size: 0.68rem; color: var(--muted); padding: 4px 10px 8px; }
.dash-pop-action {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 9px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  color: #1a1408;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold));
  border: none; border-radius: 9px; cursor: pointer;
  transition: filter 0.18s;
}
.dash-pop-action:hover { filter: brightness(1.07); }
.dash-pop-action i { font-size: 0.7rem; }
.dash-pop-empty { text-align: center; padding: 26px 18px; color: var(--muted); }
.dash-pop-empty .dash-empty-icon { width: 42px; height: 42px; margin-bottom: 12px; font-size: 0.95rem; }
.dash-pop-empty b { display: block; font-size: 0.85rem; color: var(--white); margin-bottom: 4px; }
.dash-pop-empty span { display: block; font-size: 0.76rem; line-height: 1.6; }

/* ── the country dropdown ─────────────────────────────────── */
.dash-dd { position: relative; display: inline-flex; }
.dash-dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 178px;
  padding: 6px 11px 6px 9px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dash-dd-btn:hover { color: var(--white); border-color: var(--border2); background: rgba(255,255,255,0.05); }
.dash-dd-btn[aria-expanded="true"] { border-color: var(--gold-line); background: var(--gold-dim); color: var(--white); }
.dash-dd-current { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dash-dd-caret { font-size: 0.58rem; color: var(--muted); flex-shrink: 0; }
.dash-dd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-dd-count { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.dash-dd-flag {
  width: 21px; height: 16px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09);
}
i.dash-dd-flag--none {
  width: 21px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.76rem; color: var(--muted);
  box-shadow: none;
}

.dash-dd-menu { padding: 0; }
.dash-dd-search {
  position: relative;
  padding: 9px 9px 7px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dash-dd-search i {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; color: var(--muted); pointer-events: none;
}
.dash-dd-search input {
  width: 100%;
  padding: 7px 10px 7px 29px;
  font-family: var(--font-body); font-size: 0.76rem;
  color: var(--white);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.dash-dd-search input::placeholder { color: #55555e; }
.dash-dd-search input:focus { border-color: var(--gold-line); background: rgba(217,164,65,0.05); }

.dash-dd-list { overflow-y: auto; padding: 5px; min-height: 0; flex: 1 1 auto; }
.dash-dd-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px;
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--text);
  background: transparent; border: none; border-radius: 8px;
  text-align: left; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-dd-opt:hover, .dash-dd-opt:focus-visible {
  background: rgba(255,255,255,0.06); color: var(--white); outline: none;
}
.dash-dd-opt.is-active { background: var(--gold-dim); color: var(--white); }
.dash-dd-opt .dash-dd-name { flex: 1; }
.dash-dd-check { font-size: 0.64rem; color: var(--gold); opacity: 0; flex-shrink: 0; }
.dash-dd-opt.is-active .dash-dd-check { opacity: 1; }
.dash-dd-empty { padding: 16px 12px; text-align: center; font-size: 0.75rem; color: var(--muted); }

/* ── smaller: the chart no longer stretches to a tall neighbour ── */
.dash-panel-head { padding: 13px 16px; }
.dash-panel-body { padding: 15px 16px; }
.dash-chart-body { min-height: 0; padding-bottom: 10px; }
/* The grid stretches both panels to the taller of the two, but a block body
   does not grow with its panel — so the chart sat at its minimum height with
   the slack left empty below it. Column flex hands the leftover to the body. */
.dash-grid-2 .dash-panel { display: flex; flex-direction: column; }
.dash-grid-2 .dash-panel > .dash-panel-body { flex: 1 1 auto; min-height: 0; }

/* flex-basis 0, not auto: a <canvas> carries an intrinsic aspect ratio from
   its width/height attributes, and with basis:auto that ratio was setting the
   grid row's height — 767px wide meant a 384px tall row, which left a block of
   dead space under the shorter Popular Pages list beside it. At basis 0 the
   canvas contributes nothing to the row and simply fills what the row gives. */
#analytics-chart { flex: 1 1 0; height: 0; min-height: 172px; }
.dash-seg-btn { padding: 4px 8px; font-size: 0.67rem; }
.dash-seg { padding: 2px; border-radius: 9px; }
.dash-seg--sm .dash-seg-btn { padding: 4px 7px; font-size: 0.64rem; }

/* the counters, trimmed */
.analytics-stat-card { padding: 13px 15px 14px; }
.analytics-stat-card .asc-num { font-size: 1.62rem; }
.analytics-stat-card .asc-label { font-size: 0.6rem; margin-bottom: 7px; }
.analytics-stat-card .asc-change { margin-top: 9px; font-size: 0.64rem; }
.dash-stat-grid { gap: 10px; margin-bottom: 18px; }
.dash-grid-2 { gap: 12px; margin-bottom: 16px; }
.dash-lede { margin-bottom: 16px; }

/* ── popular pages: one compact line per page, bar behind it ─── */
.dash-pp { gap: 2px; }
.dash-pp-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  overflow: hidden;
}
.dash-pp-bg {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, rgba(217,164,65,0.16), rgba(217,164,65,0.05));
  /* no border-right: it drew a hard gold line down every row at the end of the
     fill, which is the line that stood out beside the counts */
  border-radius: 8px 0 0 8px;
  transition: width 0.5s var(--ease);
}
.dash-pp-row > :not(.dash-pp-bg) { position: relative; }
.dash-pp-icon { color: var(--gold); font-size: 0.76rem; width: 15px; text-align: center; flex-shrink: 0; }
.dash-pp-name { flex: 1; font-size: 0.79rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pp-count { font-size: 0.73rem; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── activity rows, a shade tighter ───────────────────────── */
.dash-act-row { padding: 8px 11px; }
.dash-act-icon { width: 26px; height: 26px; }

@media (max-width: 760px) {
  .dash-account { align-items: stretch; width: 100%; }
  .dash-account-row { flex-wrap: wrap; }
  .dash-user { flex: 1; }
  .dash-stats { justify-content: flex-start; }
  .dash-dd, .dash-dd-btn { width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   ON MY DUTY — THE ARRIVAL

   How the page comes in. The site's shared .fade reveal is a
   20px nudge that reads the same everywhere; this page opens on
   a full-bleed cover and closes on amber, so it earns something
   with a bit more air. Three things, in order of how much they
   carry:

   1. The cover LEAVES. Its content lifts and dissolves as you
      scroll past it and the key art parks slower than the page,
      so the first scroll feels like a camera move rather than a
      jump cut.
   2. Sections ARRIVE out of focus and settle — rise, blur off,
      opacity up. One gesture, slow, on the same expo easing the
      rest of the page already uses.
   3. The loop rail DRAWS. Each hairline runs left to right and
      the marker lands on it, so the four steps read as a
      sequence being laid down rather than four boxes fading on.

   Everything scroll-linked sits behind @supports and
   prefers-reduced-motion; where either says no the page falls
   back to the site's own reveal and nothing is missing.
   ══════════════════════════════════════════════════════════ */

/* ── 1. the cover comes in ──
   It used to be simply there on the first frame. The wordmark is
   the whole point of this screen, so it gets a focus pull and the
   rest stacks up behind it. Keyframes rather than .fade, because
   the cover is above the fold on every load and an
   IntersectionObserver has nothing to wait for. */
@keyframes omdCoverRise {
  from { opacity: 0; transform: translateY(24px); filter: blur(10px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
@keyframes omdCoverLogo {
  from { opacity: 0; transform: translateY(20px) scale(1.05); filter: blur(18px); }
  to   { opacity: 1; transform: none;                         filter: blur(0); }
}
@keyframes omdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.omd-cover-eyebrow      { animation: omdCoverRise 1.15s var(--o-ease) 0.10s backwards; }
.omd-cover-logo         { animation: omdCoverLogo 1.60s var(--o-ease) 0.24s backwards; }
.omd-cover-in .omd-acts { animation: omdCoverRise 1.15s var(--o-ease) 0.80s backwards; }
/* the art eases out of a push-in, so the screen settles rather than
   simply being there — never through a transparent frame */
@keyframes omdFieldSettle { from { scale: 1.05; } to { scale: 1; } }
.omd-cover-field {
  animation:
    omdFieldSettle 2.2s var(--o-ease) backwards,
    omdField 52s ease-in-out infinite alternate;
}
/* the nudge already owns transform here, so the entrance only
   touches opacity */
.omd-cover-down {
  animation:
    omdNudge 2.8s ease-in-out infinite,
    omdFadeIn 0.9s ease-out 1.5s backwards;
}

/* ── 2. sections arrive ──
   The same class the whole site reveals with, given this page's
   longer travel: further, slower, and out of focus on the way in.
   The blur is what makes it read as arriving from somewhere
   rather than switching on. */
#page-onmyduty .fade {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(9px);
  transition:
    opacity   1.05s var(--o-ease),
    transform 1.05s var(--o-ease),
    filter    1.05s var(--o-ease);
}
#page-onmyduty .fade.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── 3. the loop rail draws ──
   The step is itself the .fade, so left alone it would rise and
   blur as one block and bury its own rail. It travels less and
   skips the blur instead, and the line and the marker do the
   work. */
#page-onmyduty .omd-step.fade { transform: translateY(14px); filter: none; }
#page-onmyduty .omd-step { border-top-color: transparent; }
/* sits exactly on the now-transparent 1px border, so nothing moves */
#page-onmyduty .omd-step::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--o-hair);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--o-ease) 0.1s, background 0.35s;
}
#page-onmyduty .omd-step.in::after { transform: scaleX(1); }
#page-onmyduty .omd-step:hover::after { background: rgba(242,148,29,0.34); }
/* the marker lands once the line is most of the way there */
#page-onmyduty .omd-step::before {
  transform: scale(0);
  transition: transform 0.5s var(--o-ease) 0.62s, background 0.35s, box-shadow 0.35s;
}
#page-onmyduty .omd-step.in::before { transform: scale(1); }

/* the round-off under the rail gets the same line, drawn last */
#page-onmyduty .omd-loop-round { position: relative; border-top-color: transparent; }
#page-onmyduty .omd-loop-round::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--o-hair);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--o-ease) 0.15s;
}
#page-onmyduty .omd-loop-round.in::after { transform: scaleX(1); }

/* ── the screenshot settles ──
   The big shot comes in a touch wide and eases back to its
   resting crop. It rests at 1.06 rather than 1 so the drift
   further down has somewhere to move without showing an edge. */
.omd-stage img {
  scale: 1.06;
  transition: opacity 0.35s ease, scale 1.6s var(--o-ease);
}
.omd-stage.fade:not(.in) img { scale: 1.16; }

/* the thumbnails deal themselves out under it */
@keyframes omdThumbIn { from { opacity: 0; transform: translateY(18px); } }
.omd-thumbs.fade.in .omd-thumb { animation: omdThumbIn 0.8s var(--o-ease) backwards; }
.omd-thumbs.fade.in .omd-thumb:nth-child(1) { animation-delay: 0.06s; }
.omd-thumbs.fade.in .omd-thumb:nth-child(2) { animation-delay: 0.14s; }
.omd-thumbs.fade.in .omd-thumb:nth-child(3) { animation-delay: 0.22s; }
.omd-thumbs.fade.in .omd-thumb:nth-child(4) { animation-delay: 0.30s; }
.omd-thumbs.fade.in .omd-thumb:nth-child(5) { animation-delay: 0.38s; }

/* ── the facts fill in a row at a time ──
   The plate is one .fade, so without this its four rows land
   together and the ruled lines read as a single block. */
@keyframes omdRowIn { from { opacity: 0; transform: translateY(14px); } }
.omd-plate.fade.in .omd-plate-row { animation: omdRowIn 0.8s var(--o-ease) backwards; }
.omd-plate.fade.in .omd-plate-row:nth-child(1) { animation-delay: 0.10s; }
.omd-plate.fade.in .omd-plate-row:nth-child(2) { animation-delay: 0.20s; }
.omd-plate.fade.in .omd-plate-row:nth-child(3) { animation-delay: 0.30s; }
.omd-plate.fade.in .omd-plate-row:nth-child(4) { animation-delay: 0.40s; }

/* ── scroll-linked motion ──
   Tied to scroll position rather than to a clock, so it tracks
   the wheel exactly and runs off the main thread. Only browsers
   that have scroll-driven animations get any of it; the rest keep
   everything above, which stands on its own. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* the cover lifts away as you leave it */
    @keyframes omdCoverLeave {
      to { opacity: 0; transform: translateY(-70px) scale(0.965); }
    }
    .omd-cover-in {
      animation: omdCoverLeave linear both;
      animation-timeline: scroll(root);
      animation-range: 0 78vh;
    }

    /* and the key art parks slower than the page, so the two
       separate instead of sliding up as one plate. translate is
       its own property, so this composes with the slow drift
       already running on transform instead of fighting it. */
    @keyframes omdFieldPark { to { translate: 0 10%; } }
    .omd-cover-field {
      animation:
        omdFieldSettle 2.2s var(--o-ease) backwards,
        omdField 52s ease-in-out infinite alternate,
        omdFieldPark 1s linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 100vh;
    }

    /* the chevron has done its job the moment you scroll */
    @keyframes omdChevGo { to { opacity: 0; } }
    .omd-cover-down {
      animation:
        omdNudge 2.8s ease-in-out infinite,
        omdFadeIn 0.9s ease-out 1.5s backwards,
        omdChevGo 1s linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 26vh;
    }

    /* the screenshot drifts inside its frame as it crosses the
       viewport — under 5% of its height end to end, so it reads
       as depth rather than as a moving picture */
    @keyframes omdShotDrift {
      from { translate: 0 -2.4%; }
      to   { translate: 0  2.4%; }
    }
    .omd-stage { view-timeline-name: --omd-shot; }
    .omd-stage img {
      animation: omdShotDrift linear both;
      animation-timeline: --omd-shot;
      animation-range: cover 0% cover 100%;
    }

    /* the honeycomb over the closing amber does the same, a
       little further, so the band has some depth to it */
    @keyframes omdCombDrift {
      from { background-position: 0 -70px; }
      to   { background-position: 0  70px; }
    }
    .omd-close { view-timeline-name: --omd-close; }
    .omd-close-comb {
      animation: omdCombDrift linear both;
      animation-timeline: --omd-close;
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ── and none of it when the machine has been asked for stillness ── */
@media (prefers-reduced-motion: reduce) {
  .omd-cover-eyebrow,
  .omd-cover-logo,
  .omd-cover-in .omd-acts,
  .omd-cover-in,
  .omd-thumbs.fade.in .omd-thumb,
  .omd-plate.fade.in .omd-plate-row { animation: none; opacity: 1; transform: none; filter: none; }
  .omd-cover-field { animation: none; transform: scale(1.04); scale: 1; }
  #page-onmyduty .fade { transition-duration: 0.001s; transform: none; filter: none; }
  #page-onmyduty .omd-step::after,
  #page-onmyduty .omd-loop-round::after { transform: scaleX(1); transition: none; }
  #page-onmyduty .omd-step::before { transform: scale(1); transition: none; }
  .omd-stage img,
  .omd-stage.fade:not(.in) img { scale: 1; transition: none; animation: none; }
  .omd-close-comb { animation: none; }
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD — fourth pass
   The search in the country menu did nothing: .dash-dd-opt is
   display:flex, and an author display beats the UA rule behind
   the hidden attribute, so filtered-out rows kept painting.
   Plus a smaller range control, a Popular Pages list that reads
   as a chart rather than stray slivers, and a Clear Data button
   that matches the filter beside it.
   ══════════════════════════════════════════════════════════ */

/* the hidden attribute has to win over the layout display */
.dash-dd-opt[hidden],
.dash-pop[hidden],
.dash-pop-mark[hidden],
.dash-dd-search[hidden],
.clear-confirm-error[hidden],
.clear-confirm-spin[hidden] { display: none; }

/* ── the range controls, a size down ─────────────────────── */
.dash-seg { padding: 2px; border-radius: 8px; }
.dash-seg-btn { padding: 3px 7px; font-size: 0.64rem; border-radius: 6px; }
.dash-seg--sm .dash-seg-btn { padding: 3px 6px; font-size: 0.62rem; }

/* ── popular pages ──────────────────────────────────────────
   The fill used to be the only thing drawn, so a small share
   showed up as a bright sliver floating in the dark and read as
   a rendering fault. Every row now carries the track as well, so
   a short bar reads as a short bar. */
.dash-pp {
  gap: 3px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 3px;
}
.dash-pp-row {
  position: relative;
  display: flex;
  align-items: center;
  /* the list is a flex column with a max-height, so without this the rows
     squeeze to fit instead of letting the list scroll */
  flex-shrink: 0;
  gap: 10px;
  padding: 6px 11px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.022);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.032);
  transition: background 0.2s;
}
.dash-pp-row:hover { background: rgba(255,255,255,0.045); }
.dash-pp-bg {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  min-width: 5px;
  border-radius: 8px 0 0 8px;
  /* Fading the last stop to transparent is the point: a short bar used to end
     in a hard bright edge, and on the smallest values that edge landed on the
     row icon and read as a stray line slicing through it. Now it dissolves. */
  background: linear-gradient(to right,
    rgba(217,164,65,0.22) 0%,
    rgba(217,164,65,0.15) 55%,
    rgba(217,164,65,0) 100%);
  transition: width 0.5s var(--ease);
}
/* the leader gets a touch more light, so the ranking reads at a glance */
.dash-pp-row:first-child .dash-pp-bg {
  background: linear-gradient(to right,
    rgba(217,164,65,0.3) 0%,
    rgba(217,164,65,0.19) 55%,
    rgba(217,164,65,0) 100%);
}
/* a page with no views in this range still gets a row, just a quiet one */
.dash-pp-row.is-zero { background: rgba(255,255,255,0.012); }
.dash-pp-bg { border-right: 0; }
.dash-pp-row.is-zero .dash-pp-bg { display: none; }
.dash-pp-row.is-zero .dash-pp-icon { color: var(--muted); opacity: 0.5; }
.dash-pp-row.is-zero .dash-pp-name { color: var(--muted); font-weight: 500; }
.dash-pp-row.is-zero .dash-pp-count { color: var(--muted); }
.dash-pp-row.is-zero .dash-pp-pct { opacity: 0.6; }
.dash-pp-row > :not(.dash-pp-bg) { position: relative; }
.dash-pp-icon { color: var(--gold); font-size: 0.74rem; width: 15px; text-align: center; flex-shrink: 0; }
.dash-pp-name {
  flex: 1; min-width: 0;
  font-size: 0.78rem; font-weight: 600; color: var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-pp-pct {
  font-size: 0.66rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-pp-count {
  min-width: 38px; text-align: right;
  font-size: 0.75rem; font-weight: 600; color: var(--white);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── recent activity: a page at a time, and that page scrolls ── */
.dash-act { max-height: 430px; overflow-y: auto; }

/* ── Clear Data, sized to the filter beside it ────────────── */
.dash-dd-btn { min-height: 33px; }
.dash-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #f87171;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dash-clear-btn:hover { color: #fca5a5; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.42); }
.dash-clear-btn i { font-size: 0.7rem; }

/* ── the clear-data confirmation ──────────────────────────── */
.clear-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
}
.clear-overlay.open { display: flex; }
.clear-confirm {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%), var(--card2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: var(--sh-3);
  animation: dashPopIn 0.18s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .clear-confirm { animation: none; } }
.clear-confirm-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.clear-confirm-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.24);
  color: #f87171;
  font-size: 1rem;
  flex-shrink: 0;
}
.clear-confirm h3 { font-size: 1.02rem; color: var(--white); margin-bottom: 4px; letter-spacing: -0.015em; }
.clear-confirm-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.clear-confirm-sub strong { color: #f87171; font-weight: 600; }
.clear-confirm-note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.16);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text);
}
.clear-confirm-note i { color: #4ade80; font-size: 0.76rem; margin-top: 2px; flex-shrink: 0; }
.clear-confirm-label {
  display: block;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.clear-confirm-field { position: relative; }
.clear-confirm-field i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 0.74rem; color: var(--muted); pointer-events: none;
}
.clear-confirm-field input {
  width: 100%;
  padding: 11px 13px 11px 34px;
  font-family: var(--font-body); font-size: 0.85rem;
  color: var(--white);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.clear-confirm-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,0.12); }
.clear-confirm-error {
  margin-top: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(239,68,68,0.09);
  border: 1px solid rgba(239,68,68,0.2);
  color: #f87171;
  font-size: 0.77rem;
  line-height: 1.55;
}
.clear-confirm-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.clear-confirm-cancel, .clear-confirm-go {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
}
.clear-confirm-cancel { background: transparent; border: 1px solid var(--border2); color: var(--muted); }
.clear-confirm-cancel:hover { color: var(--white); border-color: rgba(255,255,255,0.26); }
.clear-confirm-go { background: #dc2626; border: 1px solid #ef4444; color: #fff; }
.clear-confirm-go:hover:not(:disabled) { background: #ef4444; }
.clear-confirm-go:disabled { opacity: 0.65; cursor: default; }
.clear-confirm-spin {
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dashSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .clear-confirm { padding: 20px; }
  .clear-confirm-actions { flex-direction: column-reverse; }
  .clear-confirm-cancel, .clear-confirm-go { justify-content: center; width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD — fifth pass: the other tabs and the editors
   The image controls in the project editor referenced four
   classes that were never written — .img-upload-row,
   .img-preview, .img-upload-btn, .img-clear-btn — so the
   preview <img> rendered at its natural size and burst out of
   the modal (hence the horizontal scrollbar), and the buttons
   fell back to the browser's default grey chrome. That is the
   bulk of what follows; the rest brings the record cards,
   action buttons and empty states onto the same surface the
   Analytics tab now uses.
   ══════════════════════════════════════════════════════════ */

/* ── image upload controls ────────────────────────────────── */
.img-upload-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.img-preview {
  width: 104px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%) 6px 6px / 12px 12px,
    rgba(255,255,255,0.025);
  overflow: hidden;
}
/* the whole point: never let an upload set its own size */
.img-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
}
.img-upload-row > div:last-child { min-width: 0; }
.img-upload-btn,
.img-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  margin: 0 6px 6px 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.img-upload-btn {
  color: var(--gold-lt);
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
}
.img-upload-btn:hover { color: var(--gold-hi); background: rgba(217,164,65,0.16); border-color: rgba(217,164,65,0.42); }
.img-clear-btn {
  color: #f87171;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
}
.img-clear-btn:hover { color: #fca5a5; background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.38); }
/* a slot the live server cannot store yet: visible, but plainly not usable */
.img-upload-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── the editor modal ─────────────────────────────────────── */
.editor-modal-box { max-height: calc(100vh - 40px); }
#editor-body {
  padding: 16px 24px;
  /* a grid item's default min-width is auto, so one oversized child (an image,
     a long URL) pushes the whole modal sideways instead of being contained */
  overflow-x: hidden;
}
#editor-body > *,
#editor-body .form-group,
#editor-body .form-row,
#editor-body .form-row > * { min-width: 0; }
#editor-body img { max-width: 100%; }
#editor-body input,
#editor-body textarea,
#editor-body select { max-width: 100%; }
.editor-modal-head { padding: 16px 22px 13px; }
.editor-footer { padding: 13px 22px 16px; }
.editor-close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.editor-close:hover { background: rgba(255,255,255,0.06); }

/* ── action buttons on the record cards ───────────────────────
   These were uppercase with wide tracking — "EDIT" / "DELETE"
   shouting from every row. Sentence case, on the same pill the
   rest of the dashboard uses. */
.modal-btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.modal-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,0.07);
  border-color: var(--border2);
}
.modal-btn.active-status {
  border-color: var(--gold-line);
  color: var(--gold-lt);
  background: var(--gold-dim);
}
/* the delete buttons carry an inline colour, so only the ground is set here */
.proj-edit-actions .modal-btn[style*="f87171"]:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.32);
}

/* ── the record cards ─────────────────────────────────────── */
.proj-edit-card, .member-edit-card {
  padding: 14px 18px;
  margin-bottom: 9px;
  gap: 13px;
}
.proj-edit-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  font-size: 1.05rem;
  overflow: hidden;
}
.proj-edit-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.member-edit-avatar { width: 37px; height: 37px; border-radius: 9px; }
.proj-edit-name { font-size: 0.9rem; margin-bottom: 4px; }
.proj-edit-meta { font-size: 0.75rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.proj-edit-actions { display: flex; gap: 7px; flex-shrink: 0; }

/* whether a project sits on the home page shelf — quiet when it does, dimmer when not */
.proj-home-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  font-size: 0.7rem;
  color: var(--text);
}
.proj-home-flag i { font-size: 0.6rem; color: var(--gold); }
.proj-home-flag--off { color: var(--muted); }
.proj-home-flag--off i { color: var(--muted); }

/* ── the project editor, in sections ──────────────────────────
   It was one long column of fields in no particular order — the trailer's
   button text sat above the trailer, the no-image tint between them. Each
   section now holds only what belongs to it, headed by what it is. */
#editor-body .ep-section {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 18px 0 16px;
  border-top: 1px solid var(--border);
}
#editor-body .ep-section:first-child { border-top: 0; padding-top: 4px; }
.ep-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ep-section-head h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}
.ep-section-head p { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }
#editor-body .ep-section .form-group { margin-bottom: 14px; }
#editor-body .ep-section .form-group:last-child,
#editor-body .ep-section .form-row:last-child .form-group { margin-bottom: 0; }
#editor-body .ep-section .form-row { gap: 16px; margin-bottom: 14px; }
#editor-body .ep-section .form-row:last-child { margin-bottom: 0; }
#editor-body .ep-hint { margin: 6px 0 0; font-size: 0.7rem; line-height: 1.5; color: var(--muted); }
.ep-req { color: #f87171; }
.ep-label-note { margin-left: 6px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; opacity: 0.6; }
.ep-lock-note {
  margin: -4px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  background: rgba(251,191,36,0.05);
  font-size: 0.74rem;
  line-height: 1.55;
  color: #fbbf24;
}
.ep-lock-note i { margin-right: 7px; font-size: 0.68rem; }
.ep-lock-note code { padding: 1px 5px; border-radius: 4px; background: rgba(251,191,36,0.1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; }
.img-upload-btn[disabled] { opacity: 0.4; pointer-events: none; }
/* Remove only shows when there is something to remove — the button's own
   display:inline-flex was beating the hidden attribute, so every empty slot
   offered to remove a picture it did not have */
.img-clear-btn[hidden] { display: none !important; }
/* a locked slot says why, right where the button is */
.ep-locked-why {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  font-size: 0.7rem;
  color: #fbbf24;
}
.ep-locked-why i { font-size: 0.64rem; }
.ep-shots.is-locked { opacity: 1; pointer-events: none; }
.ep-shots.is-locked .ep-shot:not(.ep-shot--add) { opacity: 0.55; }
.ep-shots.is-locked .ep-shot-tools { display: none; }
.ep-shots.is-locked .ep-shot--add {
  border-color: rgba(251,191,36,0.35);
  color: #fbbf24;
  background: rgba(251,191,36,0.04);
  text-align: center;
  padding: 0 10px;
  line-height: 1.35;
}

/* ── dashboard: Home page tab ── */
.home-panel + .home-panel { margin-top: 16px; }
#tab-home .ep-hint { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--muted); }
.dash-section .btn[disabled] { opacity: 0.45; pointer-events: none; filter: saturate(0.6); }
#tab-home .ep-lock-note { margin: 0 0 16px; }
/* previews in the shape each spot crops to */
.img-preview.img-preview--tall { width: 72px; height: 108px; }
.img-preview.img-preview--wide { width: 128px; height: 72px; }

/* the home hero slideshow: a strip of 16:9 thumbnails, in play order */
.ep-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 2px; }
.ep-shots.is-locked { opacity: 0.55; pointer-events: none; }
.ep-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0e;
  border: 1px solid var(--border);
}
.ep-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a video in the strip previews itself from its own first frame, so there is
   no separate poster image to upload and keep in step */
.ep-shot video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.ep-shot-kind {
  position: absolute;
  left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0,0,0,0.72);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.86);
  pointer-events: none;
}
.ep-shot-kind i { font-size: 0.55rem; }
/* the list is still the page's built-in one, not a saved one — worth saying
   plainly, because editing it is what makes it the real one */
#ep-shots-note.is-seeded { color: var(--gold-lt); }
/* the gallery field sits under the image row, full width of the section */
.ep-shots-field { margin-top: 4px; }
.ep-shots-field > label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.ep-shot-no {
  position: absolute;
  left: 6px; top: 6px;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
}
.ep-shot-tools {
  position: absolute;
  right: 5px; bottom: 5px;
  display: flex;
  gap: 4px;
}
.ep-shot-tools button {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  background: rgba(0,0,0,0.7);
  color: var(--white);
  font-size: 0.64rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ep-shot-tools button:hover { background: rgba(0,0,0,0.9); border-color: var(--gold-line); color: var(--gold-lt); }
.ep-shot-tools button.is-danger:hover { border-color: rgba(239,68,68,0.5); color: #f87171; }
.ep-shot-tools button[disabled] { opacity: 0.3; pointer-events: none; }
.ep-shot--add, .ep-shot--busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  border-color: var(--border2);
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  font-size: 0.74rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ep-shot--add:hover { border-color: var(--gold-line); color: var(--gold-lt); background: var(--gold-dim); }
.ep-shot--add i { font-size: 0.9rem; }
.ep-shot--add[hidden] { display: none; }
@media (pointer: coarse) {
  .ep-shot-tools button { width: 34px; height: 32px; }
}
.ep-section .ep-switch-row { margin: 4px 0 0; }
/* the server cannot store the switch yet (old api.php): locked, with the reason */
.ep-switch-row.is-unavailable { cursor: default; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.04); }
.ep-switch-row.is-unavailable .ep-switch { opacity: 0.45; cursor: not-allowed; }
.ep-switch-warn {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem !important;
  line-height: 1.55;
  color: #fbbf24 !important;
}
.ep-switch-warn i { margin-right: 6px; font-size: 0.66rem; }
.ep-switch-warn code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(251,191,36,0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
}

/* numbered steps inside a section, so "the video, then its button" reads in order */
.ep-step {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1px;
}

/* the video source switch */
.ep-src { margin-bottom: 10px; align-self: flex-start; width: auto; }
.ep-src .dash-seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 0.74rem; }
.ep-src .dash-seg-btn i { font-size: 0.68rem; }

/* button text + a preview of the button it makes */
.ep-label-row { display: flex; align-items: center; gap: 16px; }
.ep-label-row input { flex: 1 1 auto; min-width: 0; }
.ep-preview { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ep-preview-cap { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ep-play-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  max-width: 220px;
  transition: opacity 0.2s;
}
.ep-play-pill > span { overflow: hidden; text-overflow: ellipsis; }
.ep-play-pill i {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
}
/* An SVG, not the icon font's play glyph: that sat on a half pixel and was
   centred by its box, and a triangle centred by its box looks pushed left —
   its weight is on the flat side. The path is drawn with its centroid on the
   middle of a 10px square (x 5.07), which lands 8px in from each side of the
   26px inside of the ring. */
.ep-play-pill svg { display: block; width: 10px; height: 10px; fill: currentColor; }
.ep-play-pill.is-off { opacity: 0.4; }
.ep-play-pill.is-soon { color: var(--muted); }
.ep-play-clock { font-size: 0.72rem; font-weight: 400; }

/* the trailer's "Coming soon" choice */
.ep-soon-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
}
.ep-soon-note i { margin-top: 3px; color: var(--gold); }
.ep-soon-note b { color: var(--white); font-weight: 600; }
#editor-body .ep-soon-warn { color: #fbbf24; }
.ep-soon-warn i { margin-right: 5px; font-size: 0.64rem; }

/* ── a trailer marked "Coming soon" on the site ──
   Same place and shape as the play control it stands in for, a clock instead
   of the triangle, dimmed, and nothing happens on hover because there is
   nothing to play yet. */
.dp-play-link.is-soon,
.dp-row-play.is-soon,
.pj-feat-play.is-soon,
.omd-btn.is-soon {
  cursor: default;
  pointer-events: none;
}
.dp-play-link.is-soon { color: rgba(255,255,255,0.56); }
.dp-play-link.is-soon i { border-style: dashed; background: rgba(0,0,0,0.2); }
.dp-row-play.is-soon { opacity: 0.55; }
.pj-feat-play.is-soon { opacity: 0.72; filter: grayscale(0.6); }
/* 0.72 rather than 0.6: on the amber cover the store button's "Coming to
   Steam" sat below comfortable reading at 0.6. Still plainly not clickable. */
.omd-btn.is-soon { opacity: 0.72; }

/* the no-image tint, as the two swatches it chooses between */
.ep-tint { margin-top: 12px; }
.ep-tint-label { display: block; margin-bottom: 7px; font-size: 0.7rem; color: var(--muted); }
.ep-tint-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-tint-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 6px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.ep-tint-opt:hover { color: var(--white); border-color: rgba(255,255,255,0.2); }
.ep-tint-opt[aria-checked="true"] { color: var(--white); border-color: var(--gold-line); background: var(--gold-dim); }
.ep-tint-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); }
.ep-tint-sw--blue  { background: radial-gradient(90% 90% at 20% 10%, rgb(120,146,204), transparent 75%), radial-gradient(80% 80% at 60% 70%, rgba(240,176,98,0.5), transparent 70%), #121316; }
.ep-tint-sw--green { background: radial-gradient(90% 90% at 20% 10%, rgb(112,184,150), transparent 75%), radial-gradient(80% 80% at 60% 70%, rgba(240,176,98,0.5), transparent 70%), #121513; }

/* ── the platform picker ── */
.plat-pick { display: flex; flex-direction: column; gap: 12px; }
.plat-group { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: start; gap: 12px; }
.plat-group-label {
  padding-top: 8px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.plat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.plat-chip i { font-size: 0.74rem; opacity: 0.7; }
.plat-chip:hover { color: var(--white); border-color: rgba(255,255,255,0.2); }
.plat-chip[aria-pressed="true"] { color: var(--white); background: var(--gold-dim); border-color: var(--gold-line); }
.plat-chip[aria-pressed="true"] i { color: var(--gold); opacity: 1; }
.plat-chip--custom { cursor: default; padding-right: 5px; }
.plat-chip-x {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  cursor: pointer;
}
.plat-chip-x:hover { color: #f87171; background: rgba(239,68,68,0.12); }
.plat-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  color: var(--muted);
}
.plat-add i { font-size: 0.62rem; }
.plat-add:focus-within { border-color: var(--gold-line); border-style: solid; }
#editor-body .plat-add input {
  width: 110px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--white);
  font-size: 0.78rem;
}
.plat-summary { margin: 2px 0 0; font-size: 0.7rem; color: var(--muted); }
.plat-summary b { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .plat-group { grid-template-columns: 1fr; gap: 6px; }
  .plat-group-label { padding-top: 0; }
  .ep-label-row { flex-direction: column; align-items: stretch; }
}

/* ── the project editor's on/off rows ─────────────────────── */
.ep-switch-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 2px 0 18px;
  padding: 13px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ep-switch-row:hover { border-color: var(--border2); }
.ep-switch-row:has(.ep-switch:checked) { border-color: var(--gold-line); background: var(--gold-dim); }
.ep-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ep-switch-text b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--white);
}
.ep-switch-text b i { font-size: 0.72rem; color: var(--gold); }
.ep-switch-text span { font-size: 0.72rem; line-height: 1.5; color: var(--muted); }

.ep-switch-row .ep-switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 38px !important;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--border2);
  transition: background 0.2s, border-color 0.2s;
}
.ep-switch-row .ep-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #8a8a90;
  transition: transform 0.22s var(--ease), background 0.2s;
}
.ep-switch-row .ep-switch:checked { background: var(--gold); border-color: var(--gold); }
.ep-switch-row .ep-switch:checked::after { transform: translateX(16px); background: #1a1408; }
.ep-switch-row .ep-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the reorder chevrons, as one small stacked control */
.proj-edit-card .modal-btn[title="Move up"],
.proj-edit-card .modal-btn[title="Move down"] {
  width: 26px;
  height: 19px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem !important;
  border-radius: 6px;
}

/* ── application cards ────────────────────────────────────── */
.app-card { padding: 15px 18px; gap: 14px; }
.app-card-avatar { width: 37px; height: 37px; border-radius: 9px; font-size: 0.85rem; }
.app-card-name { font-size: 0.9rem; }
.app-card-meta { font-size: 0.75rem; }
.app-status { font-size: 0.61rem; padding: 4px 10px; }

/* ── the tab toolbars ─────────────────────────────────────── */
.dash-section > div:first-child p { font-size: 0.83rem; }
.dash-section .btn-gold {
  font-size: 0.76rem;
  padding: 8px 16px;
  border-radius: 9px;
}

/* ── changelog ────────────────────────────────────────────────
   Was a stack of tall cards, each with a coloured pill and a red
   ✕ box, so a run of sign-ins filled the screen with badges. It
   is one panel now: filter and tools in the head, entries as
   compact rows grouped under their day, a hairline joining the
   marks within a day, and the colour kept to the glyph. */
.cl-head { flex-wrap: wrap; }
.cl-filter { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.cl-filter::-webkit-scrollbar { display: none; }
.cl-filter .dash-seg-btn { display: inline-flex; align-items: center; white-space: nowrap; }
.cl-filter-n {
  margin-left: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.cl-filter .is-active .cl-filter-n { opacity: 0.7; }

.cl-search { position: relative; width: 230px; }
.cl-search i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.72rem;
  pointer-events: none;
}
.cl-search .dash-search { padding-top: 7px; padding-bottom: 7px; font-size: 0.78rem; }

.cl-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.cl-tool:hover { color: var(--white); background: rgba(255,255,255,0.07); border-color: var(--border2); }
.cl-tool i { font-size: 0.7rem; color: var(--muted); }

.cl-list { padding: 4px 10px 10px; }

.cl-day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 10px 8px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cl-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.cl-row {
  --cl-tint: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 64px 26px;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background 0.18s;
}
.cl-row:hover { background: rgba(255,255,255,0.025); }

/* the thread through a day's marks — it starts at the first mark and stops at the last */
.cl-row::before {
  content: '';
  position: absolute;
  left: 23.5px;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.07);
}
.cl-day + .cl-row::before { top: 50%; }
.cl-row:last-child::before,
.cl-row:has(+ .cl-day)::before { bottom: 50%; }

.cl-ico {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: #141414;
  border: 1px solid var(--border);
  color: var(--cl-tint);
  font-size: 0.64rem;
}
.cl-k-feature  { --cl-tint: #4ade80; }
.cl-k-update   { --cl-tint: var(--gold); }
.cl-k-fix      { --cl-tint: #fbbf24; }
.cl-k-remove   { --cl-tint: #f87171; }
.cl-k-security { --cl-tint: #60a5fa; }

.cl-main { min-width: 0; }
.cl-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-desc {
  margin-top: 2px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cl-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cl-kind::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cl-tint);
  opacity: 0.85;
}

.cl-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cl-time { font-size: 0.74rem; color: var(--text); font-variant-numeric: tabular-nums; }
.cl-by { font-size: 0.64rem; color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-del {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, opacity 0.18s;
}
/* An SVG, not the icon font: the font's X is 0.75em wide, which left it on a
   half pixel inside the box, and the glyph and the border rounded to different
   pixels, so it sat visibly off-centre at 1x. 10px in a 24px inside is 7px each way. */
.cl-del svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.cl-del:hover { color: #f87171; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.28); }
/* out of the way until the row is pointed at; always there on touch */
@media (hover: hover) {
  .cl-del { opacity: 0; }
  .cl-row:hover .cl-del,
  .cl-del:focus-visible { opacity: 1; }
}

@media (max-width: 760px) {
  .cl-head .dash-panel-tools { width: 100%; justify-content: flex-start; }
  .cl-search { flex: 1 1 100%; width: auto; }
  .cl-list { padding: 2px 6px 8px; }
  .cl-row { grid-template-columns: 28px minmax(0, 1fr) auto 26px; gap: 11px; padding: 9px 6px; }
  .cl-row::before { left: 19.5px; }
  .cl-kind { display: none; }
  .cl-title { white-space: normal; }
}

/* ── shared empty state for the record tabs ───────────────── */
.dash-empty-state--sm { padding: 40px 20px; }


/* ══════════════════════════════════════════════════════════
   DASHBOARD — sixth pass: the boxes and their scrollbars
   Popular Pages was capped at a fixed 300px inside a panel the
   grid stretches to its neighbour, so whatever the row was
   taller than that showed as empty space under the last entry.
   The list fills the panel instead. And the scroll areas were
   each getting a different bar — the native Windows one with
   arrows in some, the site's own in others — so they are all
   one bar now.
   ══════════════════════════════════════════════════════════ */

/* ── the popular pages box fills its panel, no dead space ── */
.dash-grid-2 .dash-panel > .dash-panel-body {
  display: flex;
  flex-direction: column;
}
#analytics-pages {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;   /* the panel is the limit now, not a fixed 300px */
}
/* and the panel itself is capped, so a long list scrolls instead of dragging
   the row — and the chart beside it — taller */
.dash-grid-2 .dash-panel { max-height: 420px; }

/* ── one scrollbar for every scrolling area on the dashboard ── */
.dash-pp,
.dash-act,
#analytics-activity,
#changelog-list,
.dash-dd-list,
.dash-pop-body,
#editor-body,
.editor-modal-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.dash-pp::-webkit-scrollbar,
.dash-act::-webkit-scrollbar,
.dash-dd-list::-webkit-scrollbar,
.dash-pop-body::-webkit-scrollbar,
#editor-body::-webkit-scrollbar,
.editor-modal-box::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.dash-pp::-webkit-scrollbar-track,
.dash-act::-webkit-scrollbar-track,
.dash-dd-list::-webkit-scrollbar-track,
.dash-pop-body::-webkit-scrollbar-track,
#editor-body::-webkit-scrollbar-track,
.editor-modal-box::-webkit-scrollbar-track {
  background: transparent;
}
.dash-pp::-webkit-scrollbar-thumb,
.dash-act::-webkit-scrollbar-thumb,
.dash-dd-list::-webkit-scrollbar-thumb,
.dash-pop-body::-webkit-scrollbar-thumb,
#editor-body::-webkit-scrollbar-thumb,
.editor-modal-box::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.dash-pp::-webkit-scrollbar-thumb:hover,
.dash-act::-webkit-scrollbar-thumb:hover,
.dash-dd-list::-webkit-scrollbar-thumb:hover,
.dash-pop-body::-webkit-scrollbar-thumb:hover,
#editor-body::-webkit-scrollbar-thumb:hover,
.editor-modal-box::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.26);
  background-clip: padding-box;
}
/* the stepper arrows are what made one bar look like the OS default */
.dash-pp::-webkit-scrollbar-button,
.dash-act::-webkit-scrollbar-button,
.dash-dd-list::-webkit-scrollbar-button,
.dash-pop-body::-webkit-scrollbar-button,
#editor-body::-webkit-scrollbar-button,
.editor-modal-box::-webkit-scrollbar-button {
  display: none;
  width: 0; height: 0;
}
.dash-pp::-webkit-scrollbar-corner,
.dash-act::-webkit-scrollbar-corner,
#editor-body::-webkit-scrollbar-corner {
  background: transparent;
}

/* ══════════════════════════════════════════════════════════
   CUSTOM SELECT — .nsel
   A native <select> drops its menu through the operating
   system: none of the page's type, colour, radius or spacing
   reaches it, so a black form opened a bright grey list in a
   different font. This is a listbox of our own. The real
   <select> stays in the DOM as the value — everything that
   reads `.value` keeps working untouched, and with scripting
   off the native field is still the one you get.
   ══════════════════════════════════════════════════════════ */
.nsel { position: relative; width: 100%; min-width: 0; }

/* the real field: still the value, no longer the surface */
.nsel > select.nsel-native {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0;
  min-height: 0; padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
}

.nsel-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.87rem;
  /* `normal`, not a number: the inputs beside it in the same row use the
     browser default, and 1.25 stood the trigger a pixel taller than them */
  line-height: normal;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.nsel-btn:hover { border-color: rgba(255,255,255,0.2); }
.nsel-btn:focus-visible,
.nsel-btn.is-open {
  border-color: var(--gold);
  background-color: rgba(201,148,58,0.04);
  box-shadow: 0 0 0 3px rgba(201,148,58,0.12);
}
.nsel-btn[disabled] { opacity: 0.5; pointer-events: none; }

.nsel-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* nothing chosen yet reads as a placeholder, like the inputs beside it */
.nsel-btn.is-empty .nsel-value { color: #55555e; }

.nsel-caret {
  flex: 0 0 auto;
  width: 12px; height: 8px;
  color: #888;
  transition: transform 0.26s var(--ease), color 0.22s;
}
.nsel-btn:hover .nsel-caret { color: var(--text); }
.nsel-btn.is-open .nsel-caret { color: var(--gold); transform: rotate(180deg); }

/* ── the menu ──
   Fixed and measured against the trigger rather than nested
   inside it: the form card, the dashboard panels and the editor
   modal all clip their overflow, and a menu in the normal flow
   would simply be cut off at the nearest edge. */
.nsel-menu {
  position: fixed;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px;
  background:
    linear-gradient(162deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 42%),
    var(--card2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(0,0,0,0.45);
  transform-origin: top center;
  animation: nselIn 0.17s var(--ease);
}
.nsel-menu[hidden] { display: none; }
.nsel-menu.is-up { transform-origin: bottom center; animation-name: nselInUp; }
@keyframes nselIn   { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes nselInUp { from { opacity: 0; transform: translateY(6px)  scale(0.985); } to { opacity: 1; transform: none; } }

/* No `scrollbar-width` here on purpose: setting it opts Chrome into its own
   thin scrollbar, which ignores every ::-webkit-scrollbar rule below and
   draws stepper arrows at both ends of the track. The rest of the site
   styles its lists the webkit way; this one matches. */
.nsel-list {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.nsel-list::-webkit-scrollbar { width: 8px; }
.nsel-list::-webkit-scrollbar-track { background: transparent; }
.nsel-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.nsel-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.nsel-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.nsel-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px 9px 12px;
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.3;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 0.15s, color 0.15s;
}
.nsel-opt + .nsel-opt { margin-top: 1px; }
.nsel-opt:hover,
.nsel-opt.is-cursor { background: rgba(255,255,255,0.055); color: var(--white); }
/* keyboard focus reads differently from a hover, quietly */
.nsel-opt.is-cursor { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.nsel-opt.is-active { color: var(--white); background: var(--gold-dim); }
.nsel-opt.is-active::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 15px;
  border-radius: 2px;
  background: var(--gold);
}
.nsel-opt[disabled] { opacity: 0.4; pointer-events: none; }
/* "Select..." is the absence of an answer, so it never wears the gold of
   one — it stays the quiet row at the top, even while it is the value */
.nsel-opt.is-placeholder .nsel-label { color: var(--muted); }
.nsel-opt.is-placeholder.is-active { background: transparent; color: var(--text); }
.nsel-opt.is-placeholder.is-active:hover,
.nsel-opt.is-placeholder.is-cursor { background: rgba(255,255,255,0.055); }
.nsel-opt.is-placeholder.is-active::before { display: none; }
.nsel-opt.is-placeholder .nsel-check { display: none; }

.nsel-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nsel-check {
  flex: 0 0 auto;
  width: 11px; height: 9px;
  color: var(--gold);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s, transform 0.22s var(--ease);
}
.nsel-opt.is-active .nsel-check { opacity: 1; transform: none; }

/* a group of options keeps its <optgroup> heading */
.nsel-group {
  padding: 9px 10px 5px 12px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nsel-opt + .nsel-group { margin-top: 4px; }

/* a finger needs more row than a cursor does */
@media (pointer: coarse) {
  .nsel-opt { padding-top: 11px; padding-bottom: 11px; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nsel-menu { animation: none; }
  .nsel-caret, .nsel-check { transition: none; }
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD — reading a record in place
   Applications and messages used to open a centre-screen
   overlay. They are a view inside their own tab now: the list
   steps aside, the record takes the width, and Back returns.
   ══════════════════════════════════════════════════════════ */
.dash-detail { display: none; }
.dash-section.is-detail > *:not(.dash-detail) { display: none !important; }
.dash-section.is-detail > .dash-detail { display: block; }

.dash-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dash-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.dash-back:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.24);
  transform: translateX(-2px);
}
.dash-back i { font-size: 0.72rem; }
.dash-detail-date { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.dash-detail-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  padding: 22px 24px;
}
.dash-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.dash-detail-avatar {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 0.95rem; font-weight: 700;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
}
.dash-detail-avatar--msg {
  color: #4ade80;
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.22);
  font-size: 0.9rem;
}
.dash-detail-id { min-width: 0; }
.dash-detail-id h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dash-detail-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 0.79rem;
  color: var(--muted);
}

.dash-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 22px;
  margin-bottom: 20px;
}
.dash-field { min-width: 0; }
.dash-field--full { margin-top: 4px; }
.dash-field-label {
  display: block;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.dash-field-value {
  font-size: 0.87rem;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
}
.dash-field-value a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(217,164,65,0.3); }
.dash-field-value a:hover { color: var(--gold-lt); border-bottom-color: var(--gold); }

.dash-detail-prose {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px 18px;
  border-radius: 11px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  max-height: 420px;
  overflow-y: auto;
}

.dash-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 0.8rem;
  color: var(--gold) !important;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line) !important;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.dash-file:hover { background: rgba(217,164,65,0.16); }
.dash-file--missing { color: var(--muted) !important; background: rgba(255,255,255,0.03); border-color: var(--border) !important; }
.dash-file--missing em { font-style: normal; opacity: 0.6; }

.dash-detail-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 60px;
}
.dash-detail-status { display: flex; flex-direction: column; gap: 7px; }
.dash-detail-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-detail-buttons .modal-btn,
.dash-detail-buttons .dash-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

@media (max-width: 700px) {
  .dash-detail-card { padding: 18px 16px; }
  .dash-detail-grid { grid-template-columns: 1fr; }
  .dash-detail-foot { flex-direction: column; align-items: stretch; }
  .dash-detail-buttons { justify-content: flex-start; }
  .dash-detail-id h2 { font-size: 1.1rem; }
}


/* ── the application status picker ──
   It was borrowing the chart's date-range pills, so all four states looked
   the same and the only signal was which one was gold. Each option carries
   its own status colour now — the same four the badges use — so the current
   state is readable without reading the labels. */
.dash-status-set {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 11px;
}
.dash-status-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.dash-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s);
  opacity: 0.38;
  flex-shrink: 0;
  transition: opacity 0.18s, box-shadow 0.18s;
}
.dash-status-opt:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.dash-status-opt:hover .dash-status-dot { opacity: 0.85; }
.dash-status-opt.is-active {
  color: var(--s);
  background: var(--s-bg);
  border-color: var(--s-line);
  cursor: default;
}
.dash-status-opt.is-active .dash-status-dot { opacity: 1; box-shadow: 0 0 9px var(--s); }
.dash-status-opt:focus-visible { outline: 2px solid var(--s); outline-offset: 1px; }

/* the same four colours the status badges carry */
.dash-status-opt.is-new         { --s: #60a5fa; --s-bg: rgba(59,130,246,0.13);  --s-line: rgba(59,130,246,0.34); }
.dash-status-opt.is-reviewed    { --s: #c084fc; --s-bg: rgba(168,85,247,0.13);  --s-line: rgba(168,85,247,0.34); }
.dash-status-opt.is-shortlisted { --s: #4ade80; --s-bg: rgba(34,197,94,0.13);   --s-line: rgba(34,197,94,0.34); }
.dash-status-opt.is-rejected    { --s: #f87171; --s-bg: rgba(239,68,68,0.12);   --s-line: rgba(239,68,68,0.32); }

@media (max-width: 700px) {
  .dash-status-set { width: 100%; }
  .dash-status-opt { flex: 1 1 auto; justify-content: center; }
}


/* ── the CV on an application ─────────────────────────────── */
.dash-cv-file {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-bottom: 9px;
}
.dash-cv-icon { color: var(--gold); font-size: 0.85rem; flex-shrink: 0; }
.dash-cv-name {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-cv-size {
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.dash-cv-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.dash-cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-lt) !important;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dash-cv-btn:hover {
  color: var(--gold-hi) !important;
  background: rgba(217,164,65,0.17);
  border-color: rgba(217,164,65,0.44);
}
.dash-cv-btn i { font-size: 0.72rem; }

.dash-cv-viewer { display: none; margin: 4px 0 20px; }
.dash-cv-viewer.is-open {
  display: block;
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
.dash-cv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.dash-cv-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--white);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-cv-title i { color: var(--gold); font-size: 0.76rem; flex-shrink: 0; }
.dash-cv-close {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.dash-cv-close:hover { color: var(--white); background: rgba(255,255,255,0.07); }

.dash-cv-frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: #1a1a1a;
}
.dash-cv-imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  max-height: 620px;
  overflow: auto;
}
.dash-cv-imgwrap img { max-width: 100%; height: auto; border-radius: 8px; }
.dash-cv-text {
  margin: 0;
  padding: 16px 18px;
  max-height: 520px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.dash-cv-note {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 18px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text);
}
.dash-cv-note i { color: var(--gold); font-size: 0.9rem; flex-shrink: 0; }
.dash-cv-note strong { color: var(--white); font-weight: 600; }
.dash-cv-note span { flex: 1; min-width: 200px; }

@media (max-width: 700px) {
  .dash-cv-frame { height: 440px; }
}


/* ══ dashboard: visible before the network answers ══
   The panel used to be display:none until showDashboard() ran, which meant
   waiting on check-auth and then seven data calls before anything correct was
   on screen. The inline guard in dashboard.php sets .dash-authed from
   sessionStorage before the panel is even parsed, so the right tab paints
   immediately and the data fills into it. */
#dashContent { display: none; }
html.dash-authed #dashContent { display: block; }

/* ══ the space under every tab ══
   Each tab used to set its own: 60px on whichever list or pagination it ended
   on, 20px under Analytics' last panel, and nothing under Changelog until it
   was added by hand. One rule on the section now, so every tab ends the same
   distance above the bottom of the page. */
.dash-section { padding-bottom: 60px; }
.dash-section > :last-child,
.dash-section .dash-pag:last-of-type { margin-bottom: 0; }
#tab-analytics > .dash-panel:last-of-type { margin-bottom: 0; }
/* the record cards carry a margin under each one; the last one's would sit on
   top of the 60px instead of collapsing into it */
#projects-list > :last-child,
#members-list > :last-child { margin-bottom: 0; }

/* ══ a tab that is still fetching ══
   A refresh draws from the session's last copy (see dashCacheWrite), so most
   of the time there is nothing to wait for. A first visit shows placeholders
   the shape of the rows coming — it used to fade the whole tab in and out over
   an empty state, which read as "you have no data" rather than "loading".
   One band of light crosses every placeholder at once: the gradient is fixed
   to the viewport, so the shapes read as one surface instead of a dozen
   separate flickers. */
.sk {
  display: block;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.045);
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0) 65%);
  background-size: 200vw 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: skSweep 1.9s linear infinite;
}
@keyframes skSweep {
  from { background-position: 100vw 0; }
  to   { background-position: -100vw 0; }
}

.sk-line { height: 9px; border-radius: 999px; }
.sk-line--title { height: 11px; }
.sk-line--label { height: 8px; margin-bottom: 12px; }
.sk-line--num   { height: 22px; border-radius: 7px; }
.sk-line--chip  { height: 16px; margin-top: 11px; }
.sk-line--when  { width: 44px; }

/* record cards: the same surface and height as .proj-edit-card / .app-card */
.sk-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76.2px;
  padding: 14px 18px;
  margin-bottom: 9px;
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
#dash-list .sk-card,
#messages-list .sk-card { margin-bottom: 0; }
/* measured off the real cards at 1280px, so the swap does not move the page */
.sk-card--app    { min-height: 77.2px; }
.sk-card--post   { min-height: 78.9px; }
.sk-card--member { min-height: 100.2px; }
.sk-thumb { width: 40px; height: 40px; border-radius: 9px; }
.sk-thumb--round { width: 37px; height: 37px; }
.sk-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.sk-btn { width: 56px; height: 30px; border-radius: 8px; }
.sk-chip { width: 64px; height: 18px; border-radius: 999px; }

/* activity and changelog rows */
.sk-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; min-height: 59px; }
#analytics-activity .sk-row { min-height: 60.9px; }
.sk-ico { width: 28px; height: 28px; border-radius: 8px; }
.sk-row .sk-card-main { gap: 7px; }
.cl-day.sk-day { min-height: 39.9px; }

/* the counters */
.analytics-stat-card.sk-stat { min-height: 109.6px; }

/* popular pages */
.sk-pp { display: flex; flex-direction: column; gap: 8px; padding: 5.5px 4px; }
.sk-bar { width: 100%; height: 4px; border-radius: 999px; }

/* the chart box: no bars to fake, so the panel body itself carries the band */
.dash-chart-body.is-sk { position: relative; }
.dash-chart-body.is-sk::after {
  content: '';
  position: absolute;
  inset: 18px 20px;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.025);
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 65%);
  background-size: 200vw 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: skSweep 1.9s linear infinite;
}

/* an application clicked before the full list (with CVs) has arrived */
.dash-section.is-waiting .app-card { cursor: progress !important; opacity: 0.7; transition: opacity 0.2s; }

/* the range switches are filled by the render; empty, they were a stray dot */
.dash-seg:empty { visibility: hidden; }

/* placeholders giving way to the rows: a short settle, once */
.dash-section.dash-reveal > * { animation: dashReveal 0.34s var(--ease) both; }
@keyframes dashReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sk, .dash-chart-body.is-sk::after { animation: none; background-image: none; }
  .dash-section.dash-reveal > * { animation: none; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE PASS — every page and the dashboard, phone to desktop
   Measured at 320, 375, 768, 1024 and 1440 wide. Nothing scrolled
   sideways; what was wrong was fit and reach: the full nav bar ran
   into the edge on a tablet, taps landed on 7px dots and 23px-tall
   footer links, labels sat at 10px, and the phone menu could not
   scroll in landscape. Rules here only apply at the sizes named.
   ══════════════════════════════════════════════════════════ */

/* ── the nav: the full bar only from 900px, where it fits with air ── */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}
/* a finger-sized menu button (was 36x31) */
.hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.hamburger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
/* the menu scrolls when a phone on its side is shorter than the list */
.mobile-menu.open {
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ── the phone and tablet menu, as a panel under the island ──
   It was a black block the full width of the screen, square-cornered and
   ruled into strips, hanging off a bar that — once you scrolled — had become
   a rounded glass island with margins. The two never matched. Now the bar
   always takes its island shape while the menu is open, and the menu is a
   glass panel on the same side margins directly beneath it, so the pair
   reads as one control at the top of the page or halfway down it. */
@media (max-width: 900px) {
  .nav-wrap.scrolled nav,
  .nav-wrap.menu-open nav {
    max-width: none;
    margin: 0 12px;
    padding: 8px 8px 8px 16px;
    border-radius: 18px;
    background: rgba(18,18,20,0.72);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border-color: rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 34px rgba(0,0,0,0.45);
  }
  .nav-wrap.menu-open { padding: 12px 0; }
  .nav-wrap.menu-open .nav-logo-mark { height: 34px; }

  /* the page behind dims; a tap on it closes the menu (see closeMobileMenu) */
  .nav-wrap::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(4,4,6,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .nav-wrap.menu-open::before { opacity: 1; pointer-events: auto; }

  .mobile-menu {
    margin: 8px 12px 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(14,14,16,0.9);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.55);
  }
  .mobile-menu.open {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    animation: menuDrop 0.32s var(--ease) both;
  }
  @keyframes menuDrop {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }

  .mobile-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 16px 0 28px;
    border: 0;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.66);
    transition: color 0.2s, background 0.2s;
  }
  /* a quiet arrow on each row, brighter on the one you are pointing at */
  .mobile-menu a:not(.ml-login)::after {
    content: '';
    width: 7px; height: 7px;
    margin-left: auto;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.35;
    transition: opacity 0.2s, transform 0.25s var(--ease);
  }
  .mobile-menu a:hover,
  .mobile-menu a:active { color: var(--white); background: rgba(255,255,255,0.05); }
  .mobile-menu a:hover::after { opacity: 0.8; transform: translateX(2px) rotate(45deg); }
  /* the page you are on: white, with the gold dot the desktop bar underlines with */
  .mobile-menu a.active { color: var(--white); background: rgba(255,255,255,0.06); }
  /* the dot sits in the row's left margin, so every label starts at the same x */
  .mobile-menu a.active::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(217,164,65,0.7);
  }

  /* staff sign-in stands apart at the foot, smaller and quieter */
  .mobile-menu a.ml-login {
    min-height: 46px;
    margin-top: 6px;
    padding-left: 28px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
  }
  .mobile-menu a.ml-login::before {
    content: '';
    position: absolute;
    left: 10px; right: 10px; top: -4px;
    height: 1px;
    background: rgba(255,255,255,0.07);
  }
  .mobile-menu a.ml-login i { font-size: 0.72rem; color: var(--gold); opacity: 0.8; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mobile-menu.open { animation: none; }
  .nav-wrap::before { transition: none; }
}

/* ── touch: controls get a finger-sized hit area without changing how they look ── */
@media (pointer: coarse) {
  /* the showcase dots stay 7px dots; a transparent border carries the tap
     (overflow: hidden clips painting at the padding box, not the border) */
  .dp-shotbar-dot {
    box-sizing: content-box;
    border: 12px solid transparent;
    margin: -12px -8px;
  }
  /* every state repeats the clip: .is-live and :hover set `background`
     as a shorthand, which resets it and painted the tap border grey */
  .dp-shotbar-dot,
  .dp-shotbar-dot:hover,
  .dp-shotbar-dot.is-live { background-clip: padding-box; }
  .dp-shotbar-play { width: 40px; height: 40px; margin: -9px; }
  .hm-link { padding: 12px 0; margin: -12px 0; }
  .footer-col ul { gap: 2px; }
  .footer-col ul a { padding: 9px 0; }
  .footer-bottom a { display: inline-block; padding: 8px 0; }
  .footer-col .email-link { padding: 8px 0; }
  /* iOS zooms the whole page in when a focused field's text is under 16px —
     the sign-in form and the dashboard searches were 13–14px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,
  textarea { font-size: 16px !important; }
}

/* ── phones ── */
@media (max-width: 640px) {
  /* labels never below 11px */
  .dp-row-status, .dp-row-plat, .pj-feat-status, .ap-tag, .nl-meta,
  .tmr-role, .lg-toc-label, .lg-stamp { font-size: 11px; }

  /* the footer's two link columns side by side, the contact row under them */
  .footer-top { display: flex; flex-wrap: wrap; }
  .footer-col { flex: 1 1 calc(50% - 17px); min-width: 0; }
  .footer-col:last-child { flex-basis: 100%; }
  /* the company line holds together, so the legal links wrap as a pair
     instead of leaving "Terms" alone on a line */
  .footer-bottom b,
  .footer-legal { white-space: nowrap; }

  /* the ON MY DUTY thumbnails as one row you swipe, not 2 + 2 + 1 */
  .omd-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .omd-thumbs::-webkit-scrollbar { display: none; }
  .omd-thumb { flex: 0 0 38%; scroll-snap-align: start; }
}

/* ── the dashboard on a phone or tablet ── */
@media (pointer: coarse) {
  .dash-tab { min-height: 42px; }
  .dash-seg-btn { min-height: 32px; min-width: 36px; }
  .dash-section .btn-outline,
  .dash-section .btn-gold,
  .modal-btn,
  .dash-clear-btn,
  .cl-tool { min-height: 38px; }
  .proj-edit-card .modal-btn[title="Move up"],
  .proj-edit-card .modal-btn[title="Move down"] { width: 36px; height: 28px; }
  .dash-pag-btn { min-width: 38px; height: 38px; }
  .dash-icon-btn, .dash-logout { min-height: 40px; }
  .cl-del { width: 36px; height: 36px; }
  .plat-chip, .ep-tint-opt { min-height: 38px; }
}
@media (max-width: 760px) {
  /* Applications' status filters: one row you swipe. An older phone rule made
     every button in a tab's first toolbar full width, which stacked all five
     into a column taller than the screen. */
  #dash-filters {
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #dash-filters::-webkit-scrollbar { display: none; }
  #dash-filters .dash-filter { width: auto !important; flex: none; }

  /* Application and message cards: the status stays in the first row on the
     right. Wrapped under the avatar it widened that column, so names on cards
     with a longer status started further in than their neighbours. */
  .app-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .app-card-name, .app-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 600px) {
  /* the editor takes the whole screen on a phone: a floating box inside 16px
     margins left a sliver of page around a form that already needs every pixel */
  .editor-modal { padding: 0; align-items: stretch; }
  .editor-modal-box {
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .editor-modal-head { padding-top: max(14px, env(safe-area-inset-top)); }
  .editor-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .editor-footer .btn { flex: 1 1 0; justify-content: center; min-height: 46px; }
  #editor-body { padding: 12px 18px 20px; }
  /* one field per row — two up, the status select truncated to "In Develop…"
     and the image buttons ran past the edge */
  #editor-body .form-row { grid-template-columns: minmax(0, 1fr); }
  /* the trailer's three sources as equal thirds on one line each */
  .ep-src { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; align-self: stretch; }
  .ep-src .dash-seg-btn { justify-content: center; white-space: nowrap; padding: 8px 4px; gap: 6px; font-size: 0.72rem; }
  .img-upload-row > div { min-width: 0; }
  .img-upload-row .img-upload-btn,
  .img-upload-row .img-clear-btn { min-height: 38px; }
}
@media (pointer: coarse) {
  .editor-close { width: 42px; height: 42px; font-size: 1.2rem; }
}
@media (max-width: 1100px) {
  /* The tab rail wraps instead of scrolling. On a tablet it scrolled with the
     last tab cut in half at the edge and nothing to say there was more; wrapped,
     every tab is always in view. */
  .dash-tabs { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 520px) {
  /* four statuses as two by two — wrapped, "Rejected" sat alone on a row */
  .dash-status-set { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; }
  .dash-status-opt { min-height: 40px; }
}
@media (max-width: 640px) {
  .analytics-stat-card .asc-label,
  .app-status,
  .proj-edit-meta .app-status { font-size: 10.5px; }
}


/* ══════════════════════════════════════════════════════════
   SMOOTHNESS PASS
   Measured in headless Edge with the CPU slowed 4x to stand in for a
   mid-range phone: the home page kept ~73% of the main thread busy while
   nobody touched it, ON MY DUTY ~49%. Part of that was three ambient
   animations moving `background-position` or `box-shadow`, which repaint
   their whole layer every frame. The same motion now moves a layer with
   `transform` or fades with `opacity`, which the GPU does without
   repainting — the pictures do not change.
   ══════════════════════════════════════════════════════════ */

/* hero dust: the drifting specks move as a layer; the mask stays on the
   parent so the soft edge does not travel with them */
.dp-dust { background-image: none; animation: none; overflow: hidden; }
.dp-dust::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: -240px; left: -46px;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px,   rgba(255,212,158,0.55), transparent 62%),
    radial-gradient(1.1px 1.1px at 128px 96px,  rgba(255,192,136,0.42), transparent 62%),
    radial-gradient(1.3px 1.3px at 214px 44px,  rgba(255,228,186,0.36), transparent 62%),
    radial-gradient(1px 1px     at 74px 178px,  rgba(255,202,146,0.44), transparent 62%),
    radial-gradient(1.5px 1.5px at 262px 158px, rgba(255,218,166,0.30), transparent 62%),
    radial-gradient(1px 1px     at 176px 208px, rgba(255,206,152,0.34), transparent 62%);
  background-size: 300px 240px;
  will-change: transform;
  animation: dpDustRiseT 34s linear infinite;
}
/* one tile of the pattern, so the loop is seamless */
@keyframes dpDustRiseT { to { transform: translate3d(46px, -240px, 0); } }

/* the status dot breathes by opacity only; the glow is fixed */
.dp-feat-status > i { box-shadow: 0 0 7px currentColor; }
@keyframes dp-status-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.62; }
}

/* ON MY DUTY's honeycomb: the tile slides as a layer instead of the
   background being repainted under it (two tiles, as before) */
.omd-cover-comb {
  inset: -444px 0 0 -256px;
  will-change: transform;
  animation: omdCombT 70s linear infinite;
}
@keyframes omdCombT { to { transform: translate3d(256px, 444px, 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .omd-close-comb {
      inset: -70px 0;
      animation-name: omdCombDriftT;
    }
    @keyframes omdCombDriftT {
      from { transform: translate3d(0, -70px, 0); }
      to   { transform: translate3d(0,  70px, 0); }
    }
  }
}

/* the background glow's own canvas, under the embers; same place, same fade */
#bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; }
body.omd-mode #bg-orbs { display: none; }

/* hero showcase: the push-in and the progress bar run on one duration and
   pause together (see mountHeroShowcase). The outgoing shot holds where its
   push ended while it fades, so a cut never snaps the frame back. */
.dp-shot-img { will-change: transform; }
.dp-shot.is-live .dp-shot-img { animation: dpShotPush var(--shot-hold, 6.6s) linear forwards; }
.dp-shot.was-live .dp-shot-img { transform: scale(1.10); }
@keyframes dpShotPush { from { transform: scale(1.04); } to { transform: scale(1.10); } }
.dp-shotbar-dot.is-live i { animation: dpShotFill var(--shot-hold, 6.6s) linear forwards; }
@keyframes dpShotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dp-hero.shots-paused .dp-shot.is-live .dp-shot-img,
.dp-hero.shots-paused .dp-shotbar-dot.is-live i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .dp-dust::before, .omd-cover-comb { animation: none; }
  /* no push-in; the bar still runs if the reel is played, since it is what advances it */
  .dp-shot.is-live .dp-shot-img { animation: none; transform: scale(1.04); }
  .dp-shot.was-live .dp-shot-img { transform: scale(1.04); }
}