/* ============================================================
   case-study.css  ·  the case-study component set
   ============================================================

   WHAT THIS FILE IS
   The reusable building blocks that make up a case-study page:
   the two-column layout, headings, metadata strip, metric cards,
   before/after, timeline, and so on. Only the case-study pages
   (Sideline, Simple Record Count) link this file.

   HOW TO READ IT
   Each block below is one "component". You use a component in the
   HTML by putting its class name on an element, e.g.
       <div class="metric-card"> ... </div>
   Some components have variants (extra classes that tweak them),
   e.g. <div class="metric-card featured"> makes the highlighted
   version. The variant rules sit right under the base rule.

   These same components are mirrored as cards in the "Portfolio
   Component Library" Claude Design project, so keep the two in
   sync if you change one.

   LOAD ORDER
   Link AFTER tokens.css and base.css.
   ============================================================ */

/* ============================================================
   CASE STUDY LAYOUT
   ============================================================ */
/* The page is a 2-column grid: a fixed 200px sidebar (section nav)
   on the left, and "1fr" (all remaining space) for content. */
.cs-layout { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }

/* Sidebar */
.cs-sidebar {
  background: var(--color-bg-sidebar);
  padding: 40px 24px 40px 48px;
  border-right: 0.5px solid var(--color-border-sidebar);
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.sidebar-title { font-family: 'Instrument Serif', serif; color: var(--color-text-primary); font-size: 22px; line-height: 1.1; margin-bottom: 24px; }

.cs-nav { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cs-nav a { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--color-text-muted); padding-left: 8px; text-decoration: none; transition: color 0.15s ease; }
.cs-nav a:hover { color: var(--color-text-primary); }
.cs-nav a.active { color: var(--color-text-primary); border-left: 2px solid var(--color-accent); padding-left: 8px; margin-left: -10px; }

/* Content */
.cs-content { padding: 64px 80px; background: var(--color-bg-page); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow.accent { color: var(--color-accent); }

h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin-bottom: 20px;
  text-wrap: pretty;
}

h2 {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-wrap: pretty;
}

.subhead {
  font-size: 16px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ============================================================
   METADATA STRIP
   The "Timeline / Tools / Team" row under the title.
   ============================================================ */
.metadata {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 16px;
  padding: 20px 0;
  border-top: 0.5px solid var(--color-border-hairline);
  border-bottom: 0.5px solid var(--color-border-hairline);
  margin-bottom: 48px;
}
.meta-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 8px; }
.meta-value { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 16px; color: var(--color-text-primary); }

/* ============================================================
   HERO IMAGE
   ============================================================ */
.hero-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin-bottom: 80px;
  border: 0.5px solid var(--color-border-hairline);
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
.hero-img:hover { opacity: 0.9; }

/* ============================================================
   SECTIONS
   ============================================================ */
/* scroll-margin-top stops the sticky nav from covering a heading
   when you jump to it via an anchor link (#section). It leaves a
   60px+ gap at the top so the target lands below the nav bar. */
.section { margin-bottom: 80px; scroll-margin-top: 80px; }
[id] { scroll-margin-top: 80px; }

/* Section body: narrow left column for the heading, wider right
   column (1.5x) for the copy. "fr" units share the space by ratio. */
.section-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 32px;
}

.body-stack p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
.body-stack p:last-child { margin-bottom: 0; }
.role-tags { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; }

/* ============================================================
   NUMBERED ROWS
   ============================================================ */
.row-list { border-top: 0.5px solid var(--color-border-hairline); }

.row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 0.5px solid var(--color-border-hairline);
  align-items: baseline;
}

.row-num { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--color-text-faint); }
.row-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 16px; color: var(--color-text-primary); margin-bottom: 6px; }
.row-desc { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--color-text-tertiary); }

/* ============================================================
   METRIC CARDS
   Big-number impact stats. Wrap cards in a -grid-3 or -grid-2 to
   lay them out; add "featured" to a card for the highlighted look.
   ============================================================ */
.metric-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* 3 across */
.metric-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; } /* 2 across */

.metric-card {
  background: var(--color-bg-card);
  padding: 28px;
  border-radius: 4px;
  border: 0.5px solid var(--color-border-card);
}

.metric-card.featured {
  background: var(--color-bg-card-featured);
  border: 0.5px solid var(--color-border-accent);
  padding: 32px;
}


.metric-eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 14px; }
.metric-num-lg { font-family: 'Instrument Serif', serif; font-size: 56px; color: var(--color-text-primary); line-height: 1; }
.metric-num-md { font-family: 'Instrument Serif', serif; font-size: 44px; color: var(--color-text-primary); line-height: 1; }
.metric-num-sm { font-family: 'Instrument Serif', serif; font-size: 36px; color: var(--color-text-primary); line-height: 1; }
.metric-label { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--color-text-tertiary); margin-top: 14px; }

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; color: var(--color-text-muted); }
.ba-label.after { color: var(--color-accent); }
.ba-img { width: 100%; height: auto; border-radius: 4px; display: block; border: 0.5px solid var(--color-border-hairline); cursor: zoom-in; transition: opacity 0.15s ease; }
.ba-img:hover { opacity: 0.9; }

/* ============================================================
   FIELD PHOTO
   ============================================================ */
.field-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  border: 0.5px solid var(--color-border-hairline);
  margin-top: 16px;
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}
.field-img:hover { opacity: 0.9; }

/* ============================================================
   OUTCOME CALLOUT
   ============================================================ */
.callout {
  background: var(--color-bg-callout);
  border-left: 2px solid var(--color-accent);
  padding: 24px 28px;
  border-radius: 0 6px 6px 0;
}
.callout-eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 10px; }
.callout p { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--color-text-primary); }

/* ============================================================
   TIMELINE
   A horizontal track with 5 evenly-spaced "stops". The dots are
   positioned ON the track, and the labels sit below each column.
   (On mobile this flips to a vertical list; see the @media block.)
   ============================================================ */
.timeline { position: relative; padding: 16px 0 8px; }
.timeline-track { position: relative; height: 2px; background: var(--color-timeline-track); border-radius: 1px; margin-bottom: 40px; }
.timeline-fill { position: absolute; inset: 0; background: linear-gradient(to right, rgba(87,184,232,0.3), #57B8E8); border-radius: 1px; }
/* negative margin-top pulls the 5-column label grid back up so the
   dots land on the track above it */
.timeline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: -60px; }
.tl-stop { position: relative; padding-top: 32px; text-align: center; }
.tl-dot { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--color-timeline-dot-bg); border: 2px solid var(--color-accent); }
.tl-dot.filled { background: var(--color-accent); }
.tl-dot.final { width: 16px; height: 16px; background: var(--color-text-primary); box-shadow: 0 0 0 3px var(--color-bg-page), 0 0 0 5px var(--color-accent); border: none; }
.tl-num   { font-family: 'Instrument Serif', serif; font-size: 14px; color: var(--color-text-faint); margin-top: 8px; margin-bottom: 8px; }
.tl-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--color-text-primary); line-height: 1.4; margin-bottom: 4px; }
.tl-date  { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 12px; color: var(--color-text-muted); }

/* ============================================================
   PAGE FOOTER
   ============================================================ */
.page-footer { border-top: 0.5px solid var(--color-border-hairline); padding-top: 24px; display: flex; justify-content: space-between; align-items: baseline; margin-top: 40px; }
.footer-label { font-size: 12px; color: var(--color-text-faint); }
.footer-next  { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--color-accent); text-decoration: none; transition: opacity 0.15s ease, transform 0.15s ease; display: inline-block; }
.footer-next:hover { opacity: 0.7; transform: translateX(3px); }

/* Floating circle, bottom-right. Starts hidden (opacity 0 +
   pointer-events: none); a script adds the "visible" class once
   you have scrolled down. position: fixed pins it to the viewport. */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-card-featured);
  border: 0.5px solid var(--color-border-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 50;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--color-accent); border-color: var(--color-accent); }
.back-to-top svg { stroke: var(--color-accent); display: block; transition: stroke 0.2s ease; }
.back-to-top:hover svg { stroke: #fff; }
@media (max-width: 640px) { .back-to-top { bottom: 20px; right: 12px; width: 36px; height: 36px; } }

/* ============================================================
   RESPONSIVE
   These @media blocks restyle the page at narrower widths. They
   are cumulative as the screen shrinks: 960px narrows the sidebar,
   768px drops it entirely, 640px is the phone layout. Each only
   overrides what needs to change at that size.
   ============================================================ */

/* Tablet — narrow sidebar */
@media (max-width: 960px) {
  .cs-layout { grid-template-columns: 160px 1fr; }
  .cs-content { padding: 48px 40px; }
  .cs-sidebar { padding: 40px 16px 40px 24px; }
  .metric-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Small tablet — hide sidebar */
@media (max-width: 768px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-sidebar { display: none; }
  .cs-content { padding: 40px 32px 64px; }
  .section-grid { grid-template-columns: 1fr; }
  .metadata { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 640px) {
  .site-nav { padding: 0 20px; }
  .nav-link, .nav-divider { display: none; }
  .cs-content { padding: 32px 20px 64px; }
  h1 { font-size: 28px; }
  .metadata { grid-template-columns: 1fr; }
  .metric-grid-3, .metric-grid-2 { grid-template-columns: 1fr; }
  .before-after { grid-template-columns: 1fr; }
  /* Timeline goes vertical on mobile: horizontal track breaks when stops wrap */
  .timeline-track { display: none; }
  .timeline-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .tl-stop { text-align: left; padding: 0 0 28px 30px; }
  .tl-stop::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 0; width: 2px; background: var(--color-timeline-track); z-index: 0; }
  .tl-stop:last-child { padding-bottom: 0; }
  .tl-stop:last-child::before { display: none; }
  .tl-dot { top: 4px; left: 0; transform: none; z-index: 1; }
  .tl-num { margin-top: 0; }
  .page-footer { flex-direction: column; gap: 8px; }
}

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.img-placeholder {
  width: 100%;
  border: 1.5px dashed var(--color-border-accent);
  border-radius: 4px;
  background: var(--color-bg-after);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  gap: 10px;
}
.img-placeholder-tag { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.img-placeholder-label { font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1.55; color: var(--color-text-tertiary); max-width: 320px; }

/* ============================================================
   INFO TILES
   ============================================================ */
.info-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-tile { background: var(--color-bg-card); border: 0.5px solid var(--color-border-card); border-radius: 4px; padding: 24px 28px; }
.info-tile-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; }
.info-tile-body { font-family: 'Instrument Sans', sans-serif; font-size: 14px; line-height: 1.65; color: var(--color-text-secondary); }

/* ============================================================
   FEATURE TILES (Solution overview)
   ============================================================ */
.feature-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature-tile { display: block; padding: 28px; border: 0.5px solid var(--color-border-card); border-radius: 4px; background: var(--color-bg-card); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.feature-tile:hover { border-color: var(--color-accent); background: var(--color-bg-card-featured); }
.feature-tile-num { font-family: 'Instrument Serif', serif; font-size: 20px; color: var(--color-text-faint); margin-bottom: 10px; }
.feature-tile-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-text-primary); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 0.5px solid var(--color-border-hairline); }
.feature-tile-gap { font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--color-text-muted); margin-bottom: 6px; }
.feature-tile-fix { font-family: 'Instrument Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--color-accent); }

/* ============================================================
   JOURNEY / FLOW
   ============================================================ */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.journey-card { display: flex; flex-direction: column; }
.journey-action { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.journey-action.after { color: var(--color-accent); }
.journey-screen { width: 100%; height: auto; border-radius: 4px; display: block; border: 0.5px solid var(--color-border-hairline); cursor: zoom-in; transition: opacity 0.15s ease; }
.journey-screen:hover { opacity: 0.9; }
.journey-caption { font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--color-border-hairline); }

/* Diagram card: stays light in both themes so dark diagram text/arrows stay legible */
.diagram { background: #ffffff; border: 1px solid rgba(35, 39, 66, 0.12); border-radius: 8px; padding: 28px 32px; cursor: zoom-in; transition: opacity 0.15s ease; }
.diagram:hover { opacity: 0.92; }
.diagram img { width: 100%; height: auto; display: block; }
.diagram-caption { font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--color-border-hairline); }

/* ============================================================
   FEEDBACK CARDS
   ============================================================ */
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feedback-card { background: var(--color-bg-card); border: 0.5px solid var(--color-border-card); border-radius: 4px; padding: 28px; }
.feedback-quote { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--color-text-primary); margin-bottom: 16px; }
.feedback-attr { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }

@media (max-width: 768px) {
  .info-tile-grid, .feature-tile-grid, .feedback-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .journey { grid-template-columns: 1fr; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(14, 17, 38, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; backdrop-filter: blur(4px); }
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-inner { position: relative; max-width: 90vw; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-inner img { max-width: 100%; max-height: 85vh; width: auto; height: auto; border-radius: 6px; display: block; box-shadow: 0 24px 64px rgba(0,0,0,0.5); background: #ffffff; }
.lightbox-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.lightbox-close { position: fixed; top: 16px; right: 16px; background: rgba(14, 17, 38, 0.6); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: rgba(255,255,255,0.7); padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease, background 0.15s ease; }
.lightbox-close:hover { color: #fff; background: rgba(14, 17, 38, 0.9); }

/* Prev/next: same fixed-circle treatment as close, pinned to the
   left/right edges of the viewport, vertically centered. */
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(14, 17, 38, 0.6); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; color: rgba(255,255,255,0.7); padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease, background 0.15s ease; z-index: 501; }
.lightbox-nav:hover { color: #fff; background: rgba(14, 17, 38, 0.9); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 640px) {
  .lightbox-nav { width: 36px; height: 36px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ============================================================
   GAME CASE STUDY COMPONENTS
   Extra building blocks used only by the game case studies
   (starweave, wind-and-the-wisp, drenched): game/role cards, the
   signature-mechanic card, the Steam link, the alternating screen
   rows, the screenshot grid, the trailer, the finding "design
   point", the status pill, and the in-progress note. The Amazon
   case studies simply do not use these classes. Kept here (rather
   than in a separate file) so every case-study page loads the same
   tokens -> base -> case-study chain.
   ============================================================ */

/* ---- Status pill ---- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0.5px solid var(--color-border-card);
  background: var(--color-bg-card);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-yellow) 18%, transparent); }

/* ---- Two-card block (game + role) ---- */
.card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.info-card { background: var(--color-bg-card); border-radius: 4px; padding: 20px 22px; border: 0.5px solid var(--color-border-card); }
.info-card .eyebrow { margin-bottom: 10px; }
.info-card p { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.65; color: var(--color-text-secondary); margin: 0; }

/* ---- Signature-mechanic highlight card (default teal edge; add "green") ---- */
.mechanic-card {
  background: var(--color-bg-card);
  border-radius: 4px;
  padding: 20px 24px;
  border: 0.5px solid var(--color-border-card);
  border-left: 3px solid var(--color-accent-teal);
  margin-bottom: 24px;
}
.mechanic-card.green { border-left-color: var(--color-accent-green); }
.mechanic-card .eyebrow { margin-bottom: 8px; color: var(--color-text-muted); }
.mechanic-card p { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--color-text-primary); margin: 0; }

/* ---- Steam link card ---- */
.steam-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-radius: 4px; border: 0.5px solid var(--color-border-card); background: var(--color-bg-card); text-decoration: none; margin-bottom: 48px; }
.steam-card:hover { border-color: var(--color-accent); }
.steam-card-left { display: flex; flex-direction: column; gap: 4px; }
.steam-card-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }
.steam-card-sub { font-size: 12px; color: var(--color-text-muted); font-weight: 500; }
.steam-card-arrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--color-accent); white-space: nowrap; }

/* ---- Trailer ---- */
.trailer-card { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 0.5px solid var(--color-border-card); margin-bottom: 12px; cursor: pointer; }
.trailer-card img { width: 100%; height: auto; display: block; transition: transform 0.3s ease, opacity 0.2s ease; }
.trailer-card:hover img { transform: scale(1.02); opacity: 0.92; }
.trailer-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(20,23,42,0.05), rgba(20,23,42,0.35)); }
.trailer-play span { width: 62px; height: 62px; border-radius: 50%; background: rgba(252,252,252,0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0,0,0,0.35); transition: transform 0.2s ease, background 0.2s ease; }
.trailer-card:hover .trailer-play span { transform: scale(1.08); background: #fff; }
.trailer-play i { margin-left: 3px; }
.trailer-caption { font-family: 'Instrument Sans', sans-serif; font-size: 12px; color: var(--color-text-muted); font-weight: 500; margin-bottom: 0; }
.trailer-caption a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.trailer-caption a:hover { opacity: 0.8; }

/* ---- Screenshot grid (uniform tiles) ---- */
.screenshot-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.screenshot-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.screenshot-wide { width: 100%; margin-bottom: 10px; }
.screenshot { aspect-ratio: 16 / 9; background: var(--color-bg-placeholder); border-radius: 4px; border: 0.5px solid var(--color-border-card); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.screenshot img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.screenshot-wrap { cursor: zoom-in; }
.screenshot-wrap .screenshot { transition: opacity 0.15s ease; }
.screenshot-wrap:hover .screenshot { opacity: 0.85; }
.screenshot-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }

/* ---- Before/after compare slider (drag to reveal) ---- */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.compare-card { display: flex; flex-direction: column; }
.compare-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 0.5px solid var(--color-border-card); cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.compare-before { clip-path: inset(0 50% 0 0); }
.compare-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(0,0,0,0.3); pointer-events: none; transform: translateX(-1px); }
.compare-handle { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.35); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; color: #23263a; }
.compare-handle i { font-size: 18px; }
.compare-tag { position: absolute; top: 12px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(14,17,38,0.55); padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.compare-tag-before { left: 12px; }
.compare-tag-after { right: 12px; }
/* Kept for keyboard/screen-reader access only (Tab to focus, arrow keys to
   adjust). Dragging is handled by pointer events on .compare-frame in
   compare-slider.js, so this stays out of the way of the mouse/touch. */
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.compare-range:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.compare-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 1px; }
.compare-range::-moz-range-thumb { width: 1px; height: 1px; border: none; background: transparent; }
.compare-range::-moz-range-track { background: transparent; }
.compare-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 13px; color: var(--color-text-primary); margin-top: 12px; }

/* ---- Alternating screen rows (image + explanation) ---- */
.screen-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: 32px 0; }
.screen-row-img { border-radius: 6px; overflow: hidden; cursor: zoom-in; transition: opacity 0.15s ease; }
.screen-row-img:hover { opacity: 0.9; }
.screen-row-img img { width: 100%; height: auto; display: block; border-radius: 6px; }
.screen-row-placeholder { aspect-ratio: 16/9; background: var(--color-bg-placeholder); border-radius: 6px; border: 0.5px solid var(--color-border-card); display: flex; align-items: center; justify-content: center; }
.screen-row-placeholder span { font-size: 11px; color: var(--color-text-muted); }
.screen-row-text .screenshot-label { margin-bottom: 10px; }
.screen-row-text p { font-family: 'Instrument Sans', sans-serif; font-size: 14px; line-height: 1.65; color: var(--color-text-tertiary); }

/* ---- Finding "design point" (usability finding -> design decision) ---- */
.design-point { margin-top: 12px; padding: 12px 16px; border-left: 2px solid var(--color-accent); background: var(--color-bg-card); border-radius: 0 4px 4px 0; font-family: 'Instrument Sans', sans-serif; font-size: 14px; line-height: 1.65; color: var(--color-text-secondary); }
.dp-label { display: block; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 5px; }

/* ---- In-progress note ---- */
.note-card { background: var(--color-bg-card); border: 0.5px solid var(--color-border-card); border-radius: 4px; padding: 24px 26px; }
.note-card p { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }

/* ---- Responsive overrides for the components defined above.
   These must come after the base rules in this section (same
   specificity, so source order decides), not up in the RESPONSIVE
   section near the top of this file, or the base rule below would
   win instead and silently cancel the override. ---- */
@media (max-width: 960px) {
  .screenshot-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .card-pair { grid-template-columns: 1fr; }
  .screen-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .screenshot-grid-3, .screenshot-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Shared site footer (used by every page) ---- */
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; border-top: 0.5px solid var(--color-border-hairline); }
.footer-copy { font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--color-text-muted); }
.footer-links { display: flex; }
.footer-link { font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--color-text-muted); text-decoration: none; margin-left: 20px; }
.footer-link:hover { color: var(--color-text-primary); }
@media (max-width: 640px) { .site-footer { padding: 20px; align-items: center; } }

/* ---- Intro overlay (the animated splash that fades to the page) ---- */
@font-face { font-family: 'Aretha Bridge'; src: url('../assets/fonts/Aretha Bridge.otf') format('opentype'); }
#intro-overlay { position: fixed; inset: 0; z-index: 1000; background: #14172A; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#intro-content { position: relative; z-index: 3; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
#intro-name { display: block; font-family: 'Aretha Bridge', 'Instrument Serif', serif; font-size: clamp(24px, 3.5vw, 52px); color: #f5f5f0; line-height: 1; letter-spacing: 0.01em; }
#intro-sub { display: block; font-family: 'Instrument Sans', sans-serif; font-size: 13px; font-weight: 400; color: rgba(245,245,240,0.38); margin-top: 14px; letter-spacing: 0.08em; }
#page-wrap { opacity: 0; }