/* portfolio.css — site-level additions for the personal portfolio.
 * The base files (components.css, tokens.css, site.js) are generated mirrors and
 * stay untouched; everything portfolio-specific that is reused across 2+ pages
 * is promoted HERE instead (same promotion rule as the base system).
 * Load order: tokens.contract.css → tokens.css → components.css → THIS FILE.
 * Only semantic tokens — no raw values except where noted (::backdrop, see note).
 */

/* ---------- Accessibility globals ---------- */

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse-strong);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  transition: top 160ms ease;
}
.skip-link:focus-visible { top: 12px; outline-offset: 0; }

/* ---------- Prose rhythm (base zeroes p margins) ---------- */

.max-prose p + p { margin-top: var(--spacing-md); }

/* ---------- Shared accent underline (used on every page) ---------- */

.hl {
  border-bottom: 0.12em solid var(--color-accent);
  padding-bottom: 0.02em;
  white-space: nowrap;
}

/* ---------- Cards with a thumbnail (work grid) ---------- */

.card.has-thumb { padding: 0; overflow: hidden; }
.card.has-thumb .card-body { padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl); }
.card-thumb { margin: 0; }
/* Thumbs are authored at exactly 800×500 (mounted product shots) — never re-crop them */
.card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.card-link:hover .card-thumb img { opacity: 0.94; }

.card-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-sm);
}
.card-foot {
  margin-top: var(--spacing-md);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* Work grid: five cards spaced evenly — three across the top, two across the bottom */
.work-grid { grid-template-columns: repeat(6, 1fr); }
.work-grid > .card { grid-column: span 2; }
.work-grid > .card:nth-child(n+4) { grid-column: span 3; }

/* Two columns on small screens, prose trimmed — titles do the work */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .work-grid > .card,
  .work-grid > .card:nth-child(n+4) { grid-column: span 1; }
  .work-grid > .card:nth-child(5) { grid-column: 1 / -1; }
  .work-grid .card.has-thumb .card-body,
  .work-grid .card { padding: var(--spacing-md); }
  .work-grid .card.has-thumb { padding: 0; }
  .work-grid .card p { display: none; }
  .work-grid .card-foot { margin-top: var(--spacing-sm); font-size: 13px; }
  .work-grid .h3 { font-size: 19px; }
  .work-grid .card-kicker { font-size: 10.5px; letter-spacing: 0.1em; }
}
@media (max-width: 380px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---------- Lineup rows as links (prototype index) ---------- */

a.lineup-item { color: inherit; }
.lineup-item.linked { grid-template-columns: 46px 1fr auto; }
.lineup-item .go {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-fg-muted);
  transform: translateX(0);
  transition: transform 200ms ease, color 200ms ease;
  align-self: center;
}
a.lineup-item:hover .lineup-title,
a.lineup-item:focus-visible .lineup-title { color: var(--color-accent); }
a.lineup-item:hover .go,
a.lineup-item:focus-visible .go { color: var(--color-accent); transform: translateX(4px); }
@media (max-width: 600px) {
  .lineup-item.linked { grid-template-columns: 36px 1fr auto; }
}

/* ---------- Case-study organisms (shared by all case pages) ---------- */

.crumb {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding: 10px 12px 10px 0;
  transition: color 160ms ease;
}
.crumb:hover { color: var(--color-accent); }

.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
@media (max-width: 860px) { .cs-meta { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } }
.cs-meta .cell { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); }
.cs-meta .n { font-family: var(--font-display); font-size: 22px; }
.cs-meta .l { color: var(--color-fg-muted); font-size: 13.5px; margin-top: 2px; }

.cs-h {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: var(--spacing-xl) 0 var(--spacing-sm);
  scroll-margin-top: 90px; /* land below the sticky header on jump */
}

/* On this page — jump chips */
.cs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--spacing-md);
}
.cs-jump a {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, color 160ms ease;
}
.cs-jump a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Figures — click to zoom */
.cs-fig { margin: var(--spacing-lg) 0; }
.cs-fig img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
}
.cs-fig a.fig-zoom { display: block; cursor: zoom-in; }
.cs-fig figcaption {
  font-size: 13.5px;
  color: var(--color-fg-muted);
  margin-top: var(--spacing-sm);
  line-height: 1.5;
}
/* tap-to-enlarge affordance — outline chip, same language as the nav chip */
.fig-hint {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-left: 4px;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}
.fig-zoom:hover .fig-hint {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

/* Design decisions — accordions (summary = the claim, body = the reasoning) */
.cs-acc { display: grid; gap: 10px; margin-top: var(--spacing-md); }
.cs-acc details {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  transition: border-color 160ms ease;
}
.cs-acc details:hover, .cs-acc details[open] { border-color: var(--color-border-strong); }
.cs-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-fg);
}
.cs-acc summary::-webkit-details-marker { display: none; }
.cs-acc summary:hover { color: var(--color-accent); }
.cs-acc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cs-acc .mark { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.cs-acc .mark::before, .cs-acc .mark::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  transition: transform 200ms ease;
}
.cs-acc .mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.cs-acc .mark::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.cs-acc details[open] .mark::after { transform: scaleY(0); }
.cs-acc .acc-body { padding: 0 18px 18px; }
.cs-acc .acc-body p { color: var(--color-fg-muted); font-size: 16px; line-height: 1.6; }

/* ---------- Lightbox (native dialog, opened by portfolio.js) ---------- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}
.lightbox::backdrop {
  /* raw rgba: ::backdrop cannot reliably read custom properties (deep-ocean @ 88%) */
  background: rgba(38, 70, 83, 0.88);
}
.lightbox img {
  display: block;
  max-width: min(1800px, 94vw);
  max-height: 86dvh;
  width: auto;
  height: auto;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--color-accent); color: var(--color-accent-fg); }

/* ---------- Mobile compaction (the scroll budget) ---------- */

@media (max-width: 640px) {
  .section { padding: var(--spacing-2xl) 0; }
  .section-sm { padding: var(--spacing-xl) 0; }
  .page-hero { padding: var(--spacing-2xl) 0 var(--spacing-xl); }
  .page-hero h1 { margin-bottom: 24px; }
  .hero-eyebrow { margin-bottom: 24px; }
  .hero-sub { margin-bottom: 28px; }
  .section-label { margin-bottom: var(--spacing-lg); }
  .grid { gap: var(--spacing-md); }
  .feature-headline { margin-bottom: var(--spacing-xl); }

  /* hero stats: side by side instead of stacked */
  .hero-side { flex-direction: row; gap: var(--spacing-lg); }
  .hero-stat { flex: 1; }
  .hero-stat .value { font-size: 24px; }
}

/* ---------- Nav emphasis: the system map is the exhibit ----------
   Styled as the amber twin of .nav-cta: same metrics, palettes swapped.
   Email me is dark and fills amber on hover; this is amber and fills dark. */

.nav-links a[href="/system-map.html"] {
  opacity: 1;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  padding: 9px 15px; /* 10px 16px minus the border, matching .nav-cta metrics */
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-links a[href="/system-map.html"]:hover {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
/* on the page itself, stand down: read like the rest of the nav (amber active underline) */
.nav-links a[href="/system-map.html"].active,
.nav-links a[href="/system-map.html"].active:hover {
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 6px 0;
}

/* mirror override: components.css pairs the accent fill with --color-fg on the
   nav CTA; text on an accent fill is --color-accent-fg (mint needs white) */
.nav-cta:hover,
.site-header.on-ocean .nav-cta { color: var(--color-accent-fg); }

/* ---------- Back to top (injected by portfolio.js) ---------- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  z-index: 40;
}
.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
.to-top:focus-visible { outline: 2px solid var(--color-border-strong); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
}
@media (max-width: 640px) {
  /* in the panel the chip becomes a full-width row: same gutter as the other
     links so the text lines up; the outline drops (the row dividers box it) */
  .nav-links a[href="/system-map.html"] {
    padding: 16px var(--gutter);
    font-size: 11px;
    letter-spacing: 0.12em;
    border: 0;
    border-radius: 0;
  }
  /* stood-down state on the page itself: keep the panel row metrics too */
  .nav-links a[href="/system-map.html"].active,
  .nav-links a[href="/system-map.html"].active:hover {
    padding: 16px var(--gutter);
  }
}