/* ==========================================================================
   Detail page styles (work + insights)
   Used alongside style.css. Variables, fonts, nav, and footer come from there.
   ========================================================================== */

/* Hero band sits below the nav and gives each detail page a moment to breathe
   before the body content starts. */
.detail-hero {
  padding: 140px 0 60px;
  border-bottom: 1px solid var(--line);
}
.detail-hero .back-link {
  display: inline-block;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.detail-hero .back-link:hover { color: var(--ink); }
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.detail-meta .badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  font-weight: 600;
}
.detail-meta .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
}
.detail-title {
  font-family: var(--eng);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
}
.detail-subtitle {
  margin-top: 18px;
  font-family: var(--eng);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--muted);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.detail-subtitle em { font-style: normal; color: var(--ink); font-weight: 500; }

/* Hero visual: project image (cover) or fallback gradient block tied to brand
   accent. Aspect ratio holds the frame while images are still loading.
   Constrained to 960px on desktop so the hero feels considered, not banner-wide
   — full-bleed reads as a stock photo, the boxed frame reads as design. */
.detail-hero-img {
  padding: 40px 0 80px;
}
.detail-hero-img .hero-visual {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #131319;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.detail-hero-img .hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.detail-hero-img .hero-visual.is-placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,72,16,0.22), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(60,90,255,0.20), transparent 55%),
    #131319;
}
.detail-hero-img .hero-visual .glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(120px, 24vw, 320px);
  color: rgba(246,244,239,0.18);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Body grid: sidebar (sticky meta) + main content column. */
.detail-body { padding: 60px 0 100px; }
.detail-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 40px; }
}
.detail-side {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.side-block h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.side-block p {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.side-scope {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-scope li {
  font-size: 13px;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.side-scope li:last-child { border-bottom: 0; }
.detail-content .content-h {
  font-family: var(--eng);
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.detail-content .content-h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
.detail-content .content-lead {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 24px;
  color: var(--ink);
}
.detail-content .content-th {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Gallery — 2-col grid on desktop so a 28-image project (e.g. Webull) doesn't
   require pages of scrolling, single column under 720px so phones still get the
   full read. Lazy-loaded; rounded corners match the hero. */
.detail-gallery { padding: 0 0 100px; }
.detail-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .detail-gallery .gallery-grid { grid-template-columns: 1fr; }
}
.detail-gallery .gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #131319;
}

/* Previous / Next teaser at the bottom — two side-by-side links so people can
   step through the archive in either direction. Stacks under 720px. */
.detail-next {
  padding: 60px 0 100px;
  border-top: 1px solid var(--line);
}
.detail-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 720px) {
  .detail-pn { grid-template-columns: 1fr; gap: 8px; }
}
.pn-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 24px 0;
  transition: transform 0.25s;
}
.pn-link.pn-prev:hover { transform: translateX(-8px); }
.pn-link.pn-next:hover { transform: translateX(8px); }
.pn-link.pn-next { text-align: right; }
.pn-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pn-name {
  display: block;
  font-family: var(--eng);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(24px, 3.4vw, 38px);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ============================== BLOG / INSIGHTS DETAIL ============================== */

.blog-hero {
  padding: 140px 0 60px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.blog-hero .back-link {
  display: inline-block;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-hero .back-link:hover { color: var(--ink); }
.blog-hero .blog-cat {
  display: inline-block;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  font-weight: 600;
  margin-bottom: 28px;
}
.blog-hero h1 {
  font-family: var(--eng);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.blog-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.blog-hero .blog-meta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.blog-hero .blog-meta .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
}

/* Optional cover image — contained banner between the hero text and the body.
   Mirrors the work detail hero so the two page types feel consistent. */
.blog-hero-img { padding: 48px 0 0; }
.blog-hero-img img {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #131319;
}

.blog-body { padding: 80px 0 100px; }
.blog-content {
  max-width: 720px;
  margin: 0 auto;
}
.blog-content .lead {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.blog-content h2 {
  font-family: var(--eng);
  font-size: 26px;
  font-weight: 600;
  margin: 56px 0 20px;
  letter-spacing: -0.01em;
}
.blog-content p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: var(--ink);
}
.blog-content p.th { color: var(--muted); font-size: 16px; }
.blog-content ul {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.blog-content ul li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: var(--ink);
}
.blog-content ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.blog-content ul li strong { color: var(--ink); font-weight: 600; }

/* Stats block — used by insights articles to highlight result numbers. */
.blog-content .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 32px;
  background: #131319;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.blog-content .stat-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.blog-content .stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-related {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  background: #131319;
}
.blog-related .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.blog-related .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}
.blog-related .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
}
.blog-related .arrow {
  font-size: 28px;
  color: var(--accent);
}
.blog-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
}

/* ============================== ARCHIVE GRID ============================== */
/* Used by /work/index.html — lists every project from data/work.json. */

.archive-hero {
  padding: 140px 0 80px;
}

/* Padding around the insights archive grid so the cards don't sit flush with
   the hero divider — the work archive has its own .archive-grid wrapper that
   handles spacing, but the insights archive reuses .blog-grid from the landing
   which has none of its own. */
.archive-blog-section {
  padding: 48px 0 120px;
}
.archive-hero h1 {
  font-family: var(--eng);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
.archive-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.archive-hero p {
  margin-top: 28px;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
}
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.archive-filter button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.archive-filter button:hover { color: var(--ink); border-color: var(--ink); }
.archive-filter button.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 48px 0 120px;
}
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .archive-grid { grid-template-columns: 1fr; } }
.archive-card {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s;
}
.archive-card:hover { transform: translateY(-4px); }
.archive-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #131319;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.archive-thumb.is-placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,72,16,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(60,90,255,0.16), transparent 60%),
    #131319;
}
.archive-thumb .glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  color: rgba(246,244,239,0.20);
}
.archive-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.archive-brand {
  font-size: 19px;
  font-weight: 600;
}
.archive-proj {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}