/*
  Portfolio visual refresh
  One shared layer for colour, type, spacing, and responsive refinements.
  It intentionally changes presentation only; page structure and interactions remain intact.
*/

:root {
  --refresh-paper: #fbf8f3;
  --refresh-surface: #f3ede4;
  --refresh-border: #d9cec0;
  --refresh-ink: #1f1b16;
  --refresh-body: #403a32;
  --refresh-muted: #6a6055;
  --refresh-accent: #805718;
  --refresh-accent-soft: #ae7a2f;
  --refresh-dark: #181511;
  --refresh-dark-surface: #211d18;
  --refresh-dark-text: #fdfaf5;
  --refresh-dark-muted: #d2c8bb;
}

/* ── Main, multi-view portfolio ─────────────────────────────── */
.portfolio-main {
  --bg: var(--refresh-paper);
  --surface: var(--refresh-surface);
  --surface-2: #ebe2d7;
  --border: var(--refresh-border);
  --border-strong: #c9b9a7;
  --text: var(--refresh-ink);
  --body: var(--refresh-body);
  --muted: var(--refresh-muted);
  --gold: var(--refresh-accent);
  --gold-soft: var(--refresh-accent-soft);
  --dark: var(--refresh-dark);
  --dark-text: var(--refresh-dark-text);
  --dark-muted: var(--refresh-dark-muted);
  background: var(--refresh-paper);
  color: var(--refresh-body);
}

.portfolio-main .nav {
  background: rgba(251, 248, 243, .96);
  border-color: var(--refresh-border);
}
.portfolio-main .nav-links button,
.portfolio-main .hero-sub,
.portfolio-main .sec-intro,
.portfolio-main .small,
.portfolio-main .work-row-desc,
.portfolio-main .ui-card-desc,
.portfolio-main .about-prose p,
.portfolio-main .about-side-card p,
.portfolio-main .about-side-card li,
.portfolio-main .skill-cell li { color: var(--refresh-body); }
.portfolio-main .label-gold,
.portfolio-main .work-section-label,
.portfolio-main .feature-meta .label-gold,
.portfolio-main .sec-head .label-gold,
.portfolio-main .about-side-card h4,
.portfolio-main .skill-cell h4 { color: var(--refresh-accent); }
.portfolio-main .h1,
.portfolio-main .h2,
.portfolio-main .h3,
.portfolio-main .hero-name,
.portfolio-main .page-head h1,
.portfolio-main .feature-title,
.portfolio-main .work-row-title,
.portfolio-main .ui-card-title,
.portfolio-main .about-prose p strong { color: var(--refresh-ink); }
.portfolio-main .hero-name .g,
.portfolio-main em.g,
.portfolio-main .feature:hover .feature-title,
.portfolio-main .work-row:hover .work-row-title { color: var(--refresh-accent); }

.portfolio-main .hero { padding-top: clamp(72px, 9vw, 116px); padding-bottom: clamp(80px, 10vw, 120px); }
.portfolio-main .hero-name { margin-bottom: 24px; }
.portfolio-main .hero-stmt { color: var(--refresh-body); margin-bottom: 20px; }
.portfolio-main .hero-sub { font-size: 18px; line-height: 1.72; margin-bottom: 36px; }
.portfolio-main .btn-primary { background: var(--refresh-ink); border-radius: 4px; }
.portfolio-main .btn-primary:hover { background: var(--refresh-accent); }
.portfolio-main .btn-ghost { border-color: var(--refresh-border); color: var(--refresh-ink); border-radius: 4px; }
.portfolio-main .btn-ghost:hover { background: var(--refresh-surface); border-color: var(--refresh-accent); }
.portfolio-main .section { padding-top: clamp(72px, 9vw, 104px); padding-bottom: clamp(72px, 9vw, 104px); }
.portfolio-main .feature,
.portfolio-main .work-row { border-color: var(--refresh-border); }
.portfolio-main .tag {
  color: #58452b;
  background: var(--refresh-surface);
  border-color: transparent;
  border-radius: 999px;
  font-size: 11px;
  padding: 6px 11px;
}
.portfolio-main .work-row { padding: 36px 0; }
.portfolio-main .work-row-domain,
.portfolio-main .work-num { color: var(--refresh-muted); }
.portfolio-main .ui-grid,
.portfolio-main .skills-grid { background: var(--refresh-border); border-color: var(--refresh-border); border-radius: 6px; }
.portfolio-main .ui-card,
.portfolio-main .skill-cell { background: var(--refresh-paper); }
.portfolio-main .ui-card:hover { background: var(--refresh-surface); }
.portfolio-main .axis-banner { background: var(--refresh-dark); border-radius: 8px; }
.portfolio-main .axis-banner-desc { color: var(--refresh-dark-muted); }
.portfolio-main .axis-banner-cta { background: #e2bc79; color: var(--refresh-ink); border-radius: 4px; }
.portfolio-main .footer { background: var(--refresh-dark); }
.portfolio-main .footer-link { color: var(--refresh-dark-muted); }
.portfolio-main .footer-link:hover { color: #f1cf91; }

/* Embedded case studies: correct the former white-on-white failure and lift contrast. */
.portfolio-main #view-ipj {
  --bg: var(--refresh-dark);
  --bg2: #211d18;
  --bg3: #29231d;
  --bg4: #332b22;
  --gold: #e0b76f;
  --gold-dim: #9d7740;
  --white: var(--refresh-dark-text);
  --off: #e6ddd1;
  --muted: #c9bfb2;
  --dim: #6d6256;
  --border: #40372d;
}
.portfolio-main #view-ipj nav { background: rgba(24, 21, 17, .96); }
.portfolio-main #view-ipj #hero { min-height: 84vh; padding-top: 132px; padding-bottom: 68px; }
.portfolio-main #view-ipj .hero-headline { font-size: clamp(42px, 5.8vw, 72px); line-height: 1.05; }
.portfolio-main #view-ipj .hero-sub,
.portfolio-main #view-ipj .body-text { color: var(--off); }
.portfolio-main #view-ipj .tag { background: transparent; color: var(--off); border-color: var(--dim); border-radius: 999px; }

.portfolio-main #view-340b {
  --bg: var(--refresh-paper);
  --s1: var(--refresh-surface);
  --s2: #ebe2d7;
  --bd: var(--refresh-border);
  --bd2: #c9b9a7;
  --gold: var(--refresh-accent);
  --gold2: var(--refresh-accent-soft);
  --gbg: rgba(128, 87, 24, .09);
  --text: var(--refresh-ink);
  --body: var(--refresh-body);
  --dim: var(--refresh-muted);
  --muted: #756b60;
}
.portfolio-main #view-340b .hero { padding-top: 128px; }
.portfolio-main #view-340b .lede { color: var(--refresh-body); }

.portfolio-main #view-resume { background: var(--refresh-paper); }
.portfolio-main #view-resume .resume-nav { background: var(--refresh-dark); }
.portfolio-main #view-resume .res-title,
.portfolio-main #view-resume .res-role-company,
.portfolio-main #view-resume .res-section-label { color: var(--refresh-accent); }
.portfolio-main #view-resume .res-about p,
.portfolio-main #view-resume .res-role-desc,
.portfolio-main #view-resume .res-fw-desc { color: var(--refresh-body); }
.portfolio-main #view-resume .res-role-period,
.portfolio-main #view-resume .res-contact a,
.portfolio-main #view-resume .res-contact span { color: var(--refresh-muted); }

/* ── Standalone About and Work pages ────────────────────────── */
.portfolio-about,
.portfolio-work {
  --cream: var(--refresh-paper);
  --cream-mid: var(--refresh-surface);
  --cream-dark: #ebe2d7;
  --ink: var(--refresh-ink);
  --ink-mid: var(--refresh-body);
  --ink-light: var(--refresh-muted);
  --ink-faint: #84796d;
  --gold: #d8ae64;
  --gold-dark: var(--refresh-accent);
  --dark: var(--refresh-dark);
  --border: var(--refresh-border);
  background: var(--refresh-paper);
}
.portfolio-about .nav,
.portfolio-work .nav { background: var(--refresh-dark); border-color: #322b23; }
.portfolio-about .nav-links a,
.portfolio-work .nav-links a { color: #d5ccbf; }
.portfolio-about .about-hero { background: var(--refresh-dark); border-color: #322b23; }
.portfolio-about .about-hero h1 { color: var(--refresh-dark-text); }
.portfolio-about .about-main p,
.portfolio-work .page-hero p,
.portfolio-work .cs-row-desc { color: var(--refresh-body); }
.portfolio-about .sb,
.portfolio-about .sc { border-color: var(--refresh-border); }
.portfolio-work .cs-row { border-color: var(--refresh-border); padding: 36px 0; }
.portfolio-work .tag { border-radius: 999px; background: var(--refresh-surface); border-color: transparent; }

/* ── Standalone AXIS and IPJ pages ──────────────────────────── */
.portfolio-axis,
.portfolio-ipj {
  --bg: var(--refresh-dark);
  --bg2: #211d18;
  --bg3: #29231d;
  --bg4: #332b22;
  --white: var(--refresh-dark-text);
  --off: #e6ddd1;
  --muted: #c9bfb2;
  --dim: #6d6256;
  --faint: #40372d;
  --gold: #e0b76f;
  --gold-dim: #a77d42;
  --border: #40372d;
  background: var(--refresh-dark);
}
.portfolio-axis .nav,
.portfolio-ipj nav { background: rgba(24, 21, 17, .96); border-color: var(--border); }
.portfolio-axis .hero-sub,
.portfolio-axis .hero-body,
.portfolio-ipj .hero-sub,
.portfolio-ipj .body-text { color: var(--off); }
.portfolio-axis .hero { padding-top: 72px; }
.portfolio-axis .hero-title { font-size: clamp(68px, 12vw, 136px); }
.portfolio-axis .stat-l { color: var(--muted); }
.portfolio-ipj #hero { min-height: 84vh; padding-top: 132px; padding-bottom: 68px; }
.portfolio-ipj .hero-headline { font-size: clamp(42px, 5.8vw, 72px); line-height: 1.05; }
.portfolio-ipj .tag { border-color: var(--dim); color: var(--off); border-radius: 999px; }

@media (max-width: 680px) {
  .portfolio-main .nav-inner { height: 60px; }
  .portfolio-main .hero { padding-top: 56px; }
  .portfolio-main .hero-name { font-size: clamp(48px, 15vw, 68px); }
  .portfolio-main .page-head { padding-top: 52px; }
  .portfolio-main .page-head h1 { font-size: clamp(38px, 12vw, 54px); }
  .portfolio-main .work-row { padding: 28px 0; }
  .portfolio-main .work-row-action { display: none; }
  .portfolio-main #view-ipj #hero,
  .portfolio-ipj #hero { min-height: auto; padding-top: 112px; }
}