/* Owner feedback 2026-10-16 override layer.
   Loaded by index.html AFTER v6-devpilot.css (which stays untouched).
   Only home-page concerns: nav/heading sizes, About two-column + headshot,
   blurred Harbor video backdrop, scroll reveal, same-page project overlay. */

/* AC1 - navigation readable (desktop >= 16px, phone stays on one row) */
.site-header nav { gap: 32px; }
.site-header nav a { font-size: 16px; }
.site-header nav .nav-resume { padding: 7px 16px; }
@media (max-width: 820px) {
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 14px; }
}
@media (max-width: 420px) {
  .site-header nav { gap: 14px; }
  .site-header nav a { font-size: 14px; }
  .site-header nav .nav-resume { padding: 6px 12px; }
}

/* AC1 - section titles promoted to H2-level visuals (>= 28px) */
h2.section-eyebrow {
  display: inline-block;
  padding-top: 16px;
  border-top: 2px solid var(--cyan);
  color: var(--paper);
  font: 600 clamp(28px, 3.2vw, 40px) / 1.1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.shipped-heading { margin-bottom: 8px; }
.vibe-projects .portfolio-studies__heading { grid-template-columns: 1fr; margin-bottom: 48px; }
.archive__heading p { font-size: 16px; }

/* AC1 - About: >= 17px / 1.7, two columns (copy left, round headshot right) */
.about-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: 1320px;
  margin-inline: auto;
}
.about-copy p { max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; color: rgba(245, 240, 231, .82); }
.about-links { font-size: 16px; }
.about-portrait { position: relative; justify-self: end; width: min(280px, 100%); aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; background: #11131b; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .45); }
.about-portrait::after { position: absolute; inset: 0; content: ""; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .about-section { grid-template-columns: 1fr; gap: 28px; }
  .about-portrait { order: -1; justify-self: start; width: 168px; }
}

/* AC2 - full-width blurred copy of the cover art behind the WHOLE hero (z -3), cover above it (z -2),
   wash on top (z -1). Same palette as the cover, so no colour blocks; a slow transform-only drift gives
   motion. The cover's left/bottom edges fade to TRANSPARENT via mask (v6 faded them to opaque #090a0f,
   which cut a hard vertical seam). harbor-01.webp is already loaded by the cover, so no extra download. */
.hero__backdrop { position: absolute; z-index: -3; inset: 0; overflow: hidden; pointer-events: none; }
.hero__backdrop::before {
  position: absolute; inset: -10%;
  content: "";
  background: url("media/harbor-01.webp") 55% 50% / cover no-repeat;
  filter: blur(24px) saturate(1.2);
  opacity: .5;
  transform: translate3d(0, 0, 0) scale(1.15);
  animation: hero-backdrop-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-backdrop-drift {
  from { transform: translate3d(-6%, -2%, 0) scale(1.15); }
  to { transform: translate3d(6%, 2.5%, 0) scale(1.24); }
}
.hero__visual {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%), linear-gradient(0deg, transparent 0, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 36%), linear-gradient(0deg, transparent 0, #000 30%);
  mask-composite: intersect;
}
.hero .hero__visual::after { background: rgba(6, 6, 11, .25); }
/* one full-width wash: uniform base + smooth extra darkening behind the copy + bottom fade into the next section */
.hero::before {
  background:
    radial-gradient(circle at 78% 30%, rgba(128, 92, 255, .2), transparent 35%),
    linear-gradient(0deg, #090a0f 0, rgba(9, 10, 15, 0) 22%),
    linear-gradient(90deg, rgba(9, 10, 15, .45) 0, rgba(9, 10, 15, .28) 30%, rgba(9, 10, 15, 0) 55%),
    rgba(9, 10, 15, .5);
}
@media (max-width: 820px) {
  .hero__visual {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 48%);
    mask-image: linear-gradient(0deg, transparent 0, #000 48%);
  }
  .hero .hero__visual::after { background: rgba(6, 6, 11, .25); }
  .hero::before {
    background:
      linear-gradient(0deg, #090a0f 0, rgba(9, 10, 15, 0) 10%),
      linear-gradient(0deg, rgba(9, 10, 15, .45) 0, rgba(9, 10, 15, .3) 40%, rgba(9, 10, 15, 0) 70%),
      rgba(9, 10, 15, .5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__backdrop::before { animation: none; transform: scale(1.15); }
}

/* AC2 - scroll reveal: visible by default; only hidden once JS opts in (html.js-reveal) */
.reveal { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .js-reveal .reveal:not(.is-visible) { opacity: 1; transform: none; }
}

/* AC2 - same-page project overlay (dialog + iframe of the existing project.html) */
.project-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); opacity: 0; transition: opacity .32s ease; }
.project-overlay[open] { display: block; }
.project-overlay.is-open { opacity: 1; }
.project-overlay::backdrop { background: rgba(5, 6, 10, .8); backdrop-filter: blur(6px); }
.project-overlay__panel { position: absolute; inset: 68px clamp(12px, 4vw, 72px) clamp(12px, 3vh, 36px); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #090a0f; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); transform: translateY(18px) scale(.985); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.project-overlay.is-open .project-overlay__panel { transform: none; }
.project-overlay__frame { display: block; width: 100%; height: 100%; border: 0; background: #090a0f; }
.project-overlay__back { position: absolute; z-index: 2; top: 12px; left: clamp(12px, 4vw, 72px); display: inline-flex; align-items: center; gap: 8px; min-width: 104px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(7, 7, 13, .9); color: #fff; font: 600 16px/1 var(--display, 'Chakra Petch', sans-serif); letter-spacing: .04em; cursor: pointer; transition: background .2s, border-color .2s; }
.project-overlay__back span { font-size: 20px; }
.project-overlay__back:hover, .project-overlay__back:focus-visible, .project-overlay__back.is-key-focus { border-color: var(--cyan); background: rgba(128, 92, 255, .9); }
.project-overlay__back:focus-visible, .project-overlay__back.is-key-focus { outline: 3px solid var(--cyan); outline-offset: 2px; }
body.overlay-open { overflow: hidden; }
@media (max-width: 820px) {
  .project-overlay__panel { inset: 60px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .project-overlay__back { top: 7px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-overlay, .project-overlay__panel { transition: none; }
}