/* ============================================================
   ap-skin.css — DS overlay for legacy pages.

   Loaded AFTER legacy CSS (grid, nav, components, hero, projects,
   form-explainer, lightbox, breadcrumb) and AFTER ap-tokens +
   ap-components, so everything here wins the cascade.

   Pages using this file should NOT load base.css, theme.css, or
   banner.css — those contain the p/body/a/ul global defaults that
   leak into .ap-foot + other DS surfaces no matter how many
   overrides we stack. The reset block below replaces
   everything base.css provided.

   Intent: a page keeps its original HTML structure (hero-card,
   content-section, grid-col-*, media-grid, bullet-card, ap-quote,
   etc.) but reads as Monolith. Single source of truth for skinned
   pages is tokens + components + this file.
   ============================================================ */


/* ---- Global reset (replaces base.css) ------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;  /* hard safety — no horizontal scroll ever */
  max-width: 100vw;
  width: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ol, ul, li {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ---- Body + typography base --------------------------------------- */

body {
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

body,
p, li, dd, dt, span, small, a, em, strong, blockquote, button,
input, textarea, select, label, figure, figcaption {
  font-family: var(--font-display);
}

/* Code / mono hooks */
code, pre, kbd, samp,
.role-tag, .tech-badge, .cs-roleline, .media-caption,
.breadcrumb-container, .hero-card-badge,
.metric-card h3, .impact-metrics .metric-card p,
.next-project-card .btn-secondary,
.blog-kind-badge {
  font-family: var(--font-mono);
}

/* Headings — Archivo Black weight, tight tracking, DS primary */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--color-text-primary);
}
h1 { letter-spacing: -.04em; }
h2 { letter-spacing: -.03em; }

/* Muted italics per DS display rules */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-body);
}


/* ---- Hero-card (case study top block) ----------------------------- */

.hero-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 0;
  margin: var(--sp-10, 40px) 0 var(--sp-12, 48px);
}

.hero-card-image {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.hero-card-content {
  background: var(--color-bg);
  border-top: 0;
  padding: var(--sp-10, 40px) var(--sp-10, 40px);
}

.hero-card-content h1 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  margin: 0 0 var(--sp-4, 16px);
  color: var(--color-text-primary);
}

.hero-card-description {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text-body);
  opacity: .82;
  max-width: 60ch;
  margin: 0 0 var(--sp-5, 20px);
}

.hero-card-badge {
  display: inline-block;
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: none;
  margin-bottom: var(--sp-4, 16px);
}

.cs-roleline {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-top: var(--sp-4, 16px);
}


/* ---- Tech badges (tag pills) -------------------------------------- */

.tech-badges { gap: var(--sp-2, 8px); }

.tech-badge {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: none;
}
.tech-badge:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.tech-badge i { color: var(--color-text-tertiary); }


/* ---- Role tags (hero-card project-tags variant) ------------------- */

.role-tag {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: none;
}


/* ---- Content sections --------------------------------------------- */

.content-section,
.project-section {
  background: transparent;
}

.content-section h2,
.project-section h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--color-text-primary);
  margin-bottom: var(--sp-4, 16px);
}
.content-section h2 i,
.project-section h2 i {
  color: var(--color-text-tertiary);
  margin-right: 8px;
}

.content-section h3,
.project-section h3 {
  color: var(--color-text-primary);
  font-size: 18px;
}

.content-section p,
.project-section p {
  font-family: var(--font-display);
  color: var(--color-text-body);
  line-height: 1.55;
  max-width: 70ch;
}

.section-divider {
  border-top: 1px solid var(--color-border);
  background: none;
  height: 0;
  margin: var(--sp-15, 60px) 0;
}


/* ---- Bullet / info cards (ninja-theory bullet-cards, SoM cards) --- */

.bullet-cards { gap: var(--sp-4, 16px); }
.bullet-card {
  background: var(--color-surface-soft);
  border-left: 2px solid var(--color-text-tertiary);
  border-radius: 0;
  box-shadow: none;
}
.bullet-card strong { color: var(--color-text-primary); font-weight: 900; }
.bullet-card p { color: var(--color-text-body); }
.bullet-icon {
  background: transparent;
  color: var(--color-text-tertiary);
  box-shadow: none;
}


/* ---- Media grid + gallery ----------------------------------------- */

.media-grid { gap: var(--sp-3, 12px); }

.media-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}
.media-item img { border-radius: 0; }
.media-item a:hover { opacity: .85; }

.media-caption {
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--color-text-tertiary);
  padding: var(--sp-3, 12px);
  margin: 0;
  background: transparent;
}

.inline-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 0;
  margin: var(--sp-6, 24px) 0;
}

/* ---- Unified gallery style (.media-grid + .image-row) ---------------
   One canonical pattern for every image gallery on the site. .media-grid
   is the legacy class (used on most project pages); .image-row was added
   later for case-study image groups. Both render identically here.

   Replaces:
   - projects.css :3183-3245 .media-grid/.media-item heavy chrome
   - projects.css :3326-3358 .media-item img + hover-revealed caption
   - missing .image-row/.image-item styles entirely

   Style: 3+ column responsive grid, hairline-bordered tiles, 4:3 cropped
   images with brightness+scale hover, always-visible mono caption strip
   below the image (NOT a hover-revealed overlay). */

.media-grid,
.image-row {
  display: grid;
  /* auto-fit collapses empty column tracks so a 3-item row fills the
     container width; auto-fill would leave a 4th empty slot. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3, 12px);
  margin: var(--sp-6, 24px) 0;
  padding: 0;
}

.media-item,
.image-item {
  position: relative;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;  /* override projects.css `height: 100%` which assumed a
                    fixed-height grid; we use intrinsic content height now */
  margin: 0;
  padding: 0;
}

.media-item a,
.image-item a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.media-item img,
.image-item img {
  width: 100%;
  height: auto;       /* override projects.css `height: 300px` rigid sizing */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-med, .3s), filter var(--dur-med, .3s);
  border-radius: 0;
}

.media-item a:hover img,
.media-item:hover img,
.image-item a:hover img,
.image-item:hover img {
  filter: brightness(1.08);
  transform: scale(1.04);
}

/* Caption — always visible mono strip below image. Override projects.css
   :3339 which made it a hidden absolute-positioned overlay revealed on
   hover; the new pattern keeps captions readable at all times. */
.media-item .media-caption,
.image-item .image-caption,
.media-item .image-caption,
.image-item .media-caption {
  position: static;
  opacity: 1;
  transform: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs, 11px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: var(--sp-3, 12px);
  margin: 0;
  text-align: left;
  text-shadow: none;
  font-weight: normal;
}
.media-item:hover .media-caption,
.image-item:hover .image-caption {
  opacity: 1;
  transform: none;
  background: transparent;
}

/* .mini-hero — many legacy pages use this hero pattern but don't load
   /css/hero.css. Provide DS-correct fallback: constrained-height banner
   with a darkened cover image and centered text overlay. If hero.css
   IS loaded later, those rules win source-order; this just keeps the
   pattern from breaking on pages that omit hero.css. */
.mini-hero {
  position: relative;
  width: 100%;
  min-height: 220px;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.mini-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(.5);
}
.mini-hero h1,
.mini-hero .subtitle,
.mini-hero .mini-hero-content-wrapper {
  position: relative;
  z-index: 2;
  color: var(--color-text-primary);
}
.mini-hero h1 {
  font-family: var(--font-heavy);
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: var(--tracking-display, -.04em);
  line-height: 1;
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-6);
}
.mini-hero .subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: var(--mono-opacity-boost, .8);
  padding: 0 var(--sp-6);
}


/* ---- Metric cards (impact-metrics) -------------------------------- */

.impact-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4, 16px);
  margin: var(--sp-6, 24px) 0 var(--sp-8, 32px);
}

.metric-card {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-6, 24px);
  text-align: center;
}
.metric-card i {
  color: var(--color-text-tertiary);
  font-size: 18px;
  margin-bottom: var(--sp-3, 12px);
}
.metric-card h3 {
  font-family: var(--font-heavy, 'Archivo Black', sans-serif);
  font-size: clamp(36px, 3.5vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2, 8px);
}
.metric-card p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}

.impact-highlights h3 {
  font-size: 18px;
  margin: var(--sp-6, 24px) 0 var(--sp-3, 12px);
  color: var(--color-text-primary);
}
.impact-highlights ul { padding-left: 1.4em; }
.impact-highlights li {
  color: var(--color-text-body);
  margin: var(--sp-2, 8px) 0;
  line-height: 1.55;
}


/* ---- Pull quote (gears has one) ----------------------------------- */

.ap-quote,
.ap-quote--featured {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-text-tertiary);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-6, 24px);
}
.ap-quote__text {
  color: var(--color-text-body);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
}
.ap-quote__author { color: var(--color-text-primary); font-weight: 900; }
.ap-quote__role {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ap-quote__icon i { color: var(--color-text-tertiary); }


/* ---- FAQ accordion (gears has one) -------------------------------- */

.ap-faq .faq-category { margin-bottom: var(--sp-4, 16px); }
.ap-faq .faq-category h3 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-weight: 500;
}
.details-toggle {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--sp-4, 16px) 0;
  box-shadow: none;
}
.details-toggle summary {
  color: var(--color-text-primary);
  font-weight: 900;
  cursor: pointer;
}
.details-toggle[open] > div p {
  color: var(--color-text-body);
  line-height: 1.55;
  margin-top: var(--sp-3, 12px);
}


/* ---- Buttons — square + teal (DS §3.12 teal palette) ---------------
   CEO override of §3.12: on skinned legacy pages, buttons use the
   teal palette (surface + primary + border) with square corners
   instead of white pill. Cleaner contrast on case-study surfaces
   than pure grayscale without introducing hue on hover. */

.btn,
.btn-primary,
.btn-secondary,
a.btn,
a.btn-primary,
a.btn-secondary,
button.btn,
button.btn-primary,
button.btn-secondary {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-mono-md, .12em);
  text-transform: uppercase;
  padding: var(--sp-3, 12px) var(--sp-5, 20px);
  border-radius: 0;
  box-shadow: none;
  background-image: none;   /* kill any gradient bg */
  filter: none;             /* kill glow filters */
  text-shadow: none;
  transition: all var(--dur-fast, .2s);
  display: inline-flex;
  gap: var(--sp-2, 8px);
  align-items: center;
  text-decoration: none;
}
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--color-teal-surface);
  background-color: var(--color-teal-surface);
  color: var(--color-teal-primary);
  border: 1px solid var(--color-teal-primary);
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--color-teal-primary);
  background-color: var(--color-teal-primary);
  color: var(--color-bg);
  transform: none;
  box-shadow: none;
}
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background: transparent;
  background-color: transparent;
  color: var(--color-teal-primary);
  border: 1px solid var(--color-teal-secondary);
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--color-teal-surface);
  background-color: var(--color-teal-surface);
  border-color: var(--color-teal-primary);
  color: var(--color-teal-primary);
}
.btn i,
.btn-primary i,
.btn-secondary i { color: inherit; }

/* Fallbacks for scoped legacy rules (.hero-resume-link .btn, etc.) */
.hero-resume-link .btn,
.hero-resume-link .btn:hover,
.project-buttons .btn,
.project-buttons .btn:hover,
.content-section .btn,
.project-section .btn {
  background: var(--color-teal-surface);
  background-image: none;
  color: var(--color-teal-primary);
  border: 1px solid var(--color-teal-primary);
  border-radius: 0;
}

.project-buttons {
  display: flex;
  gap: var(--sp-3, 12px);
  margin-top: var(--sp-4, 16px);
  flex-wrap: wrap;
}


/* ---- Breadcrumbs — square + teal current ------------------------- */

.breadcrumb-list { gap: 10px; }

.breadcrumb-item:not(:last-child)::after {
  background: var(--color-border);
  opacity: 1;
  width: 8px;
}

.breadcrumb-link,
.breadcrumb-current {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono-md, .12em);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 500;
  transition: all var(--dur-fast, .2s);
  box-shadow: none;
  transform: none;
}
.breadcrumb-link {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  text-decoration: none;
}
.breadcrumb-link:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
  transform: none;
}
.breadcrumb-current {
  background: var(--color-teal-surface);
  color: var(--color-teal-primary);
  border: 1px solid var(--color-teal-primary);
  font-weight: 500;
}
.breadcrumb-link i { color: inherit; }


/* ---- Badges that should pop teal (hero badges, kind tags) ---------- */
.hero-card-badge,
.blog-kind-badge {
  background: var(--color-teal-surface);
  color: var(--color-teal-primary);
  border: 1px solid var(--color-teal-primary);
}


/* ---- Overflow / clipping fixes -----------------------------------
   Legacy pages inline `overflow: hidden` + fixed heights on cards +
   quote boxes (e.g. gears-of-war-support has a grid-col-6 with a
   400px media-item + a height:100% overflow:hidden pull quote). Any
   text that exceeds that fixed height gets clipped. Forcing overflow
   visible + height auto on the entire quote + grid chain, including
   attribute selectors that match the specific inline styles. */

.ap-quote,
.ap-quote--featured,
.ap-quote-content,
.ap-quote__text,
.ap-quote__footer,
.ap-quote[style],
.ap-quote--featured[style] {
  overflow: visible;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Keep images cropped in .media-item but not their captions. */
.media-item {
  overflow: hidden;
}
/* Fixed-height .media-item inside a 2-col quote grid keeps its crop */

/* Inner containers allow content to show but never overflow horizontally
   past their parent. The outer .grid-container keeps overflow-x hidden
   as the viewport-level safety. */
.content-section,
.project-section,
.bullet-card,
.bullet-content,
.metric-card,
.related-project-card,
.next-project-card,
.ap-card {
  overflow: visible;
  min-width: 0;
  max-width: 100%;
}
.grid-col-6,
.grid-col-4,
.grid-col-3,
.grid-col-12,
.grid-col-6[style],
.grid-col-12[style] {
  min-width: 0;
  max-width: 100%;
  /* No overflow override — default is `visible`, but explicit `visible` here
     was overriding `.card-section { overflow: hidden }` from components.css
     since both are single-class specificity and this loads later. That broke
     badge clipping + image-scale clipping on every card-grid layout. */
}

/* Reaffirm overflow:hidden on .card-section (was being overridden by the
   .grid-col-X rule above). element+class specificity beats single-class
   selectors that might otherwise loosen this. */
section.card-section {
  overflow: hidden;
}

/* Let text wrap at word boundaries only — NOT mid-word.
   Previous rule had overflow-wrap: anywhere + hyphens: auto, which was
   breaking words mid-character ("delicate" → "delicat", "Content" →
   "Conter"). That was the "clipping" the CEO was seeing — the text
   wasn't cut off by a container, it was being wrapped at arbitrary
   character positions. overflow-wrap: break-word only breaks words
   that WON'T FIT on a line at all (long URLs, unbreakable strings);
   regular English prose wraps at spaces. */
.ap-quote__text,
.ap-quote p,
.ap-quote__author,
.ap-quote__role,
.bullet-content p,
.metric-card p,
.related-project-card p,
.next-project-card p,
.impact-highlights li,
.content-section p,
.project-section p {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  max-width: 100%;
  width: auto;
  white-space: normal;
}

/* Grid system — owned by legacy grid.css (.grid-container + .grid-col-*).
   Legacy uses grid-template-columns: repeat(12, 1fr) which CAN overflow
   the content-box when items have explicit widths + box-sizing:
   border-box (items ignore padding of grid-container). Fix: switch the
   track sizing to minmax(0, 1fr) — still 12 equal tracks, but the
   min-size is 0 so they'll shrink to fit the content-box instead of
   blowing out. No; more specific selector wins. */
main.grid-container,
section.grid-container,
.grid-container {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-col-6,
.grid-col-4,
.grid-col-3,
.grid-col-12 {
  min-width: 0;    /* let grid items shrink inside tracks */
}

/* Producer Role & Impact specifically — the grid-col-6 there uses an
   inline grid with 400px media-item + 100%-height quote. Drop the
   explicit 100% height so the quote expands naturally to fit text. */
.grid-col-6 > .ap-quote,
.grid-col-6 > .ap-quote--featured,
.grid-col-6 .ap-quote[style*="height"],
.grid-col-6 .ap-quote--featured[style*="height"] {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* If the inline grid inside grid-col-6 forces 1fr row on the quote,
   collapse to auto so the quote sizes to content (not the gap-filled
   remaining space). */
.grid-col-6[style*="grid-template-rows"] {
  grid-template-rows: auto auto;
}


/* ---- Related projects + next project ----------------------------- */

.related-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4, 16px);
}

/* Entire card is the link — <a class="related-project-card">. Higher
   specificity via the tag+class combo so we beat legacy without
  . */
a.related-project-card,
.related-project-card {
  display: block;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-5, 20px);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--dur-med, .3s), border-color var(--dur-fast, .2s);
}
a.related-project-card:hover,
.related-project-card:hover {
  background: var(--color-surface);
  border-color: var(--color-text-tertiary);
}

.related-project-card-title {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.01em;
}
.related-project-card-title i {
  color: var(--color-text-tertiary);
  font-size: 14px;
}
.related-project-card p {
  color: var(--color-text-body);
  opacity: .72;
  margin: var(--sp-2, 8px) 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.next-project-card {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-6, 24px);
}
.next-project-card h3 {
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-text-primary);
}
.next-project-card p { color: var(--color-text-body); }


/* ---- Lightbox (keep behavior; theme surfaces) --------------------- */

.lightbox,
.lightbox-overlay,
.lightbox-backdrop {
  background: rgba(12, 12, 12, .92);
}
.lightbox-content,
.lightbox-container {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}
.lightbox-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---- Links (plain body links) ------------------------------------- */

main a:not(.btn):not(.tech-badge):not(.role-tag):not(.lightbox-trigger):not(.related-project-card a):not(.ap-link-mono):not(.ap-btn) {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---- Hover overrides — kill every legacy colored hover --------------
   Legacy CSS (projects.css, components.css, hero.css, theme.css) sprays
   cyan/purple/aura-glow hover treatments across almost every surface
   via specific selectors. The flags here are intentional —
   we're overriding very specific legacy rules that otherwise bleed
   through the skin and break the "neutral elevation only" principle
   of DS §3.4. Anything that needs a real hover gets the DS treatment:
   surface → --color-surface, text → --color-text-primary, no hue. */

.content-section:hover,
.project-section:hover,
.card-section:hover,
.xbox-section:hover,
.xbox-section-header:hover,
.xbox-section-title:hover,
.featured-card:hover,
.video-project-page section:hover {
  background: transparent;
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
  color: inherit;
}

/* Override projects.css:3016 — that rule uses .content-section:not(.hero-intro):hover
   which has higher specificity (0,2,1) than the grouped rule above (0,2,0),
   so it wins and re-applies the cyan glow + lift. Match the specificity here
   to win it back via source order. */
.content-section:not(.hero-intro):hover,
.project-section:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
  background: transparent;
}

/* Card-level hovers — neutral elevation only */
.card-section:hover,
.card-image-link:hover,
.card-image-container:hover,
.card-content:hover,
.media-item:hover,
.bullet-card:hover,
.metric-card:hover,
.related-project-card:hover,
.next-project-card:hover,
.ap-card:hover,
.ap-quote:hover,
.ap-quote--featured:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
  outline: none;
  color: inherit;
  transform: none;
}

/* Hover states for h3/h4 inside cards — keep neutral */
.card-section:hover h3,
.card-content:hover h3,
.related-project-card:hover a,
.bullet-card:hover strong,
.bullet-card:hover p,
.metric-card:hover h3,
.metric-card:hover p {
  color: var(--color-text-primary);
}

/* Inline text-links shouldn't flash cyan on hover */
main a:not(.btn):not(.ap-btn):not(.ap-link-mono):not(.ap-nav-cta):hover {
  color: var(--color-hover-text);
  text-decoration: underline;
}

/* Section header hover flash (xbox-section-header has cyan glow) */
.xbox-section-header {
  background: transparent;
  border: none;
  box-shadow: none;
}
.xbox-section-header h2 {
  color: var(--color-text-primary);
  border: none;
  background: transparent;
}
.xbox-section-header i {
  color: var(--color-text-tertiary);
  filter: none;
  text-shadow: none;
}

/* Role-tag hover (legacy cyan border + glow) */
.role-tag:hover,
.tech-badge:hover {
  background: var(--color-surface);
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
  box-shadow: none;
  transform: none;
}

/* Lightbox trigger hover — subtle opacity only */
/* Lightbox triggers — opacity lift only, no scale (keeps the click target stable) */
.lightbox-trigger:hover img {
  opacity: .9;
  transform: none;
  filter: none;
}

/* Card image hover — subtle brightness + scale lift. Triggers on the image-link
   wrapper or on parent card hover. Replaces the previous "kill all hovers" rule
   which was over-aggressive — legacy cyan glows are still killed via the
   .card-section:hover background/box-shadow resets above. */
.card-image-link:hover img,
.card-section:hover img.card-image {
  filter: brightness(1.08);
  transform: scale(1.04);
}

/* Image cropping — works around projects.css selector conflict where
   .card-image is defined twice (once for <img>, once for <div> containers).
   This img-element-specific selector wins regardless of source order. */
img.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: filter var(--dur-med, .3s), transform var(--dur-med, .3s);
}

/* Card-image link wrapper — invisible at rest, hosts the hover effect above */
.card-image-link {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

/* Breadcrumb link hover */
.breadcrumb-container a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}


/* ---- Kill every legacy background gradient + drop-shadow ------------
   Aggressive but necessary. Legacy components lean on linear-gradient
   backgrounds (hero-card-content, card-image, button fills) + aura
   box-shadows. The DS is grayscale + hairline only. */

.hero-card-content,
.hero-card-image,
.card-image,
.card-image-container,
.featured-card,
.card-section,
.content-section,
.project-section,
.xbox-section,
.xbox-section-header,
.bullet-card,
.metric-card,
.ap-card,
.ap-quote,
.ap-quote--featured,
.related-project-card,
.next-project-card,
.media-item,
.tech-badge,
.role-tag {
  background-image: none;
}

.hero-card,
.hero-card-content,
.hero-card-image,
.card-section,
.card-image-link,
.card-image,
.card-image-container,
.featured-card,
.content-section,
.project-section,
.xbox-section,
.bullet-card,
.metric-card,
.ap-card,
.ap-quote,
.ap-quote--featured,
.related-project-card,
.next-project-card,
.media-item,
.media-caption {
  box-shadow: none;
  text-shadow: none;
  filter: none;
}

/* Kill legacy rounded corners everywhere except pill buttons + dots.
   Per DS §3.11: "Rounded corners outside --r-pill buttons and --r-dot
   status dots [are not allowed]." This list is intentionally broad —
   every legacy card, box, badge, pill, tag, caption, and overlay class
   gets squared. RPG avatar cards on /projects/xbox-support-team.html
   are intentionally excluded (.rpg-*) — they're a deliberate team-tribute
   aesthetic with their own visual language.

   Use element+class selectors (e.g. details.details-toggle,
   img.lightbox-img) where a higher-specificity legacy rule was winning. */
.hero-card,
.hero-card-content,
.hero-card-image,
.card-section,
.card-image,
.card-image-container,
.featured-card,
.content-section,
.project-section,
.xbox-section,
.xbox-section-header,
.bullet-card,
.metric-card,
.ap-card,
.ap-quote,
.ap-quote--featured,
.related-project-card,
.next-project-card,
.media-item,
.image-item,
.tech-badge,
.role-tag,
.project-tag,
.coming-soon-overlay,
.service-card,
.feature-card,
.tool-card,
.learning-card,
.achievement-card,
.tech-category,
.faq-category,
.timeline-content,
.note-box,
.impact-item,
.card,
.lightbox-caption,
.lightbox-img,
.xbox-nav-link,
details,
details.details-toggle,
details.details-toggle[open],
details.details-toggle summary,
details.details-toggle > div,
.details-toggle,
blockquote {
  border-radius: 0;
}

/* Naked <img> elements pick up a 4px radius from legacy <img>{} resets
   in components.css. Force square. RPG avatar cards on the Xbox team
   page intentionally keep their own border-radius (excluded). */
main img:not(.rpg-avatar-img) {
  border-radius: 0;
}

/* Lightbox modal elements — appended to <body> not inside <main>, so my
   `main img` rule above doesn't catch them. The lightbox modal has id
   #lightbox so target via that for high specificity. */
#lightbox img,
#lightbox .lightbox-caption,
#lightbox .lightbox-content,
#lightbox .lightbox-content img {
  border-radius: 0;
}

/* Final 1-off legacy chrome bits surfaced by the rounded-corner scan. */
footer.footer-disclaimer,
.video-embed,
.tech-highlights,
.callout,
.callout.technical-details,
.card-gradient-icon,
.team-trading-card .stat-row,
.badge.badge-impact-lg {
  border-radius: 0;
}

/* Image comparison slider chrome — used on case-study pages with
   before/after slider (e.g. microsoft-casual-games-support). The legacy
   CSS uses 999px pill shape on side buttons, slider labels, and whisper
   quote. Per DS §3.11 only .ap-btn / .ap-nav-cta keep pill shape — these
   go square. .img-compare-container also drops its 8px radius. */
.compare-pill,
.compare-label,
.compare-label-before,
.compare-label-after,
.compare-quote-whisper,
.windsurf-callout,
.compare-3col .compare-pill,
.compare-3col .compare-label,
.img-compare-container,
#comparison-slider {
  border-radius: 0;
}

/* Kill the cyan vignette halo at slider edges — violates DS §3.4
   (neutral elevation only, no hue glow). The .compare-aura-ring + the
   .compare-quote-whisper "active" state both fire a 32-64px cyan box
   shadow that lights up the entire slider in teal at extreme positions.
   The slider drag itself is the affordance — we don't need a halo. */
.compare-aura-ring,
.compare-aura-ring.active,
.compare-quote-whisper.active {
  display: none;
}

/* Wrapper-child tag/badge patterns — these single-class wrappers contain
   <span> children that pick up rounded corners via descendant selectors
   like `.project-tags span` (0,1,1) which beats my flat `.tech-badge`
   (0,1,0). Match the descendant-combinator specificity here so ap-skin
   wins via later source order. */
.project-tags span,
.project-tags > *,
.tech-badges span,
.tech-badges > *,
.role-tags span,
.role-tags > *,
.badge-row span,
.badge-row > *,
.badge-row .badge,
.team-trading-card,
.team-trading-card .card-icon,
.team-trading-card .card-stats,
.team-trading-card .stat-row,
.tech-showcase,
.code-snippet,
.footer-disclaimer,
.nav-container,
.xbox-nav-container,
.hero-card-badge,
.hero-card-badge.badge-solid-blue,
.badge-solid-purple,
.badge-solid-blue,
.badge-solid-green,
.badge-solid-orange,
.badge-solid-pink,
.badge-solid-gold,
.badge-solid-teal,
body .lightbox-caption,
body .lightbox-img {
  border-radius: 0;
}


/* ---- Nav header + footer (shared partials) ------------------------
   Legacy pages using /modules/header.html + /modules/footer.html
   (injected via init-header-footer.js) keep their old nav. If the
   page instead inlines .ap-nav / .ap-foot-wrap and loads
   /css/ap-components.css, it gets the DS nav. Mixed state is
   acceptable during migration — each page's HTML decides.
   -------------------------------------------------------------------- */


/* ---- DS footer alignment overrides --------------------------------
   Defeat legacy base.css rules that leak into .ap-foot on skinned
   pages and make the footer feel taller/looser than on the
   fully-migrated pages:
     base.css:  p  { margin: 0 0 1.25rem 0; }    // +20px under about
     base.css:  body { line-height: 1.6; }        // taller leading
     base.css:  ul { list-style: disc; }          // shouldn't apply
                                                  //   because .ap-foot
                                                  //   ul sets list-style
                                                  //   none, but hold it
                                                  //   here defensively.

   Force .ap-foot* to match the home page exactly. */

.ap-foot,
.ap-foot * {
  line-height: 1.45;
}
.ap-foot p,
.ap-foot-about,
.ap-foot ul,
.ap-foot ul li {
  margin: 0;
  padding: 0;
}
.ap-foot-about {
  margin-top: var(--sp-3);
}
.ap-foot h5 {
  margin: 0 0 14px;
  padding: 0;
}
.ap-foot ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ap-foot ul a {
  text-decoration: none;
  color: var(--color-text-primary);
}
.ap-foot-about em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-body);
}

/* Legal strip + colophon alignment */
.ap-legal,
.ap-colophon {
  line-height: 1.6; /* mono is OK at 1.6 */
}
.ap-legal {
  padding: var(--sp-6) var(--sp-10);
}
.ap-colophon {
  padding: 0 var(--sp-10) var(--sp-6);
  margin: 0;
}


/* ---- Remove noisy decorations ------------------------------------- */

/* Drop the Xbox/hero particle canvas if any page embeds one */
.hero-particles,
.particle,
#hero-particles { display: none; }

/* Breadcrumb container — mono */
.breadcrumb-container {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}


/* ---- Nova-page hero rescue ----------------------------------------- */
/* Every page under /nova/ uses the legacy .hero-base / .nv-* markup
   that lost its dedicated stylesheet during the DS migration. Re-style
   those classes with DS tokens so the hero reads with proper Monolith
   presence: big bold display headline, mono breadcrumb + chips, no
   blue legacy gradient. Targets shared by /nova/*.html, /nova/lore/*. */
.hero-base {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--sp-15) var(--sec-pad-x) var(--sp-12);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.hero-base-layer { display: none; }
.hero-base-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.hero-base .nv-breadcrumb,
.hero-base .nv-title,
.hero-base h1,
.hero-base .nv-subtitle,
.hero-base > .hero-base-content > p,
.hero-base .nv-chip-row {
  margin: 0;
}
.hero-base .nv-breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tracking-mono-md);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  opacity: .65;
}
.hero-base .nv-breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.hero-base .nv-breadcrumb a:hover {
  color: var(--color-text-primary);
}
.hero-base .nv-title,
.hero-base h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: clamp(48px, 7vw, 112px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hero-base .nv-title .cf-ico,
.hero-base h1 .cf-ico {
  width: 0.7em;
  height: 0.7em;
  opacity: .55;
  flex-shrink: 0;
}
.hero-base .nv-subtitle,
.hero-base > .hero-base-content > p {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  opacity: .72;
  max-width: var(--max-prose);
}
.hero-base .nv-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.hero-base .nv-chip,
.hero-base .aw-fresh-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tracking-mono-md);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  background: transparent;
  border-radius: 0;
}