/* GRAVITISM LOCK — STABLE BUILD
 * DO NOT modify, refactor, replace, or improve existing styles unless the user
 * explicitly requests that exact part. Preserve all approved layout, sizing,
 * positioning, typography, transitions, animations, and responsive behavior.
 */

* { box-sizing: border-box; }

/* WHO AM I is a real document page: it must be allowed to grow and scroll. */
html {
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background: #11100f;
  scroll-behavior: smooth;
}

html body.who-page {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  height: auto !important;
  background: #11100f;
  color: rgba(240,238,234,.90);
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  font-family: 'Avant Garde', 'AvantGarde', 'Century Gothic', 'Avenir Next', Avenir, Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.who-page {
  position: relative;
  min-height: 100svh;
  background: #11100f;
  overflow: visible !important;
}

.who-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('assets/who-am-i-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(.86);
}

.who-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10,9,9,.72) 0%, rgba(10,9,9,.42) 31%, rgba(10,9,9,.10) 58%, rgba(10,9,9,0) 78%);
}

/* Header: 20px lower than the original placement, centered. */
.site-header {
  position: fixed;
  z-index: 10;
  top: calc(4.15% + 5px);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .22em;
}

.site-header a {
  color: #f0eeea;
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}

.site-header a:hover,
.site-header a:focus-visible { opacity: .48; letter-spacing: .28em; }

.site-header a.active,
.site-header a[aria-current="page"] {
  color: #777674;
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

.site-header span {
  color: #f0eeea;
  opacity: .48;
  font-size: 13px;
  letter-spacing: 0;
}

/* Main content is intentionally taller than the viewport when needed. */
.who-content {
  position: relative;
  z-index: 5;
  width: min(100%, 760px);
  min-height: 100vh;
  padding: 17vh 0 14vh clamp(32px, 8vw, 150px);
  display: block;
}

.who-text {
  width: min(100%, 625px);
  padding-bottom: 40px;
  font-size: 12.5px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: .012em;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
  opacity: .90;
}

.who-text h1 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .22em;
}

/* Tight, deliberate paragraph rhythm. */
.who-text p {
  margin: 0 0 8px;
  font-weight: 400;
}

.who-text strong,
.who-text em {
  font-weight: 400;
}

.who-text em { font-style: italic; }

/* Home mark: centered directly below the header, 30% larger than before. */
.header-home-logo {
  position: fixed;
  z-index: 20;
  top: calc(4.15% + 43px);
  left: 50%;
  width: 34px;
  height: auto;
  line-height: 0;
  display: block;
  transform: translateX(-50%);
}

.header-home-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
  opacity: .9;
  transition: opacity .25s ease, letter-spacing 1200ms cubic-bezier(.2,.75,.25,1);
}

.header-home-logo:hover img,
.header-home-logo:focus-visible img { opacity: .58; }

.theme-light .header-home-logo img { filter: none; }
.theme-dark .header-home-logo img { filter: invert(1); }

.signature-wrap {
  margin-top: 2px;
  margin-left: 0;
  width: 162px;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.signature {
  display: block;
  width: 100%;
  height: auto;
  opacity: .9;
  mix-blend-mode: screen;
}

@media (max-width: 1000px) {
  .who-page::before { background-position: 68% center; }
  .who-page::after {
    background: linear-gradient(90deg, rgba(10,9,9,.80) 0%, rgba(10,9,9,.60) 43%, rgba(10,9,9,.18) 76%, rgba(10,9,9,0) 100%);
  }

  .site-header { top: 33px; }
  .site-header nav { gap: 24px; font-size: 12px; letter-spacing: .19em; }
  .site-header a:hover, .site-header a:focus-visible { letter-spacing: .24em; }

  .who-content {
    min-height: 100vh;
    padding: 125px 7vw 100px;
  }

  .who-text {
    max-width: 625px;
    font-size: 14px;
    line-height: 1.76;
  }

  .who-text p { margin-bottom: 15px; }

  .header-home-logo {
    top: 63px;
    width: 30px;
  }
}

@media (max-width: 600px) {
  html { overflow-y: auto !important; }
  html body.who-page { overflow-y: auto !important; }
  .who-page { overflow: visible !important; }
  .who-page::before {
    position: fixed;
    height: 100vh;
    background-position: 74% top;
    background-size: auto 100vh;
  }
  .who-page::after {
    position: fixed;
    height: 100vh;
    background: linear-gradient(90deg, rgba(10,9,9,.86) 0%, rgba(10,9,9,.64) 55%, rgba(10,9,9,.20) 100%);
  }

  .site-header { top: 27px; }
  .site-header nav { gap: 13px; font-size: 9px; letter-spacing: .13em; }
  .site-header a:hover, .site-header a:focus-visible { letter-spacing: .17em; }

  .who-content {
    min-height: 100vh;
    padding: 105px 7vw 90px;
  }

  .who-text {
    width: 100%;
    max-width: none;
    font-size: 15px;
    line-height: 1.82;
  }

  .who-text p { margin-bottom: 17px; }

  .header-home-logo {
    top: 52px;
    width: 26px;
  }

  .signature-wrap { width: 140px; }
}


/* Home -> WHO AM I: keep the destination hidden behind black, then reveal the
   actual destination content smoothly at the same time the black cover fades. */
html.grav-incoming-who body.who-page::before,
html.grav-incoming-who body.who-page::after,
html.grav-incoming-who body.who-page .site-header,
html.grav-incoming-who body.who-page .header-home-logo,
html.grav-incoming-who body.who-page .who-content {
  opacity: 0;
  animation: gravWhoDestinationReveal 1000ms cubic-bezier(.22,.72,.22,1) forwards;
}

html.grav-incoming-who body.who-page::before { animation-delay: 40ms; }
html.grav-incoming-who body.who-page::after { animation-delay: 20ms; }
html.grav-incoming-who body.who-page .site-header,
html.grav-incoming-who body.who-page .header-home-logo { animation-delay: 70ms; }
html.grav-incoming-who body.who-page .who-content { animation-delay: 90ms; }

html.grav-incoming-who body.who-page .page-transition {
  opacity: 1;
  visibility: visible;
  background: #000;
}

@keyframes gravWhoDestinationReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Returning to WHO AM I from another dark page still uses the black cover. */
html.grav-incoming-who body.who-page .page-transition {
  opacity: 1;
  visibility: visible;
  background: #000;
}


/* V159 — the wordmark replaces the centered feather mark on standard internal pages. */
body:has(.internal-wordmark) .header-home-logo { display:none; }

/* Career Summary toggle (personal text <-> career timeline). */
.who-panel {
  transition: opacity 450ms ease, transform 450ms ease;
}
.who-panel.is-fading {
  opacity: 0;
  transform: translateY(6px);
}
.who-panel[hidden] { display: none; }

.who-cv-title {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.who-cv-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.who-cv-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 0 0 11px;
}
.who-cv-years {
  color: rgba(240,238,234,.62);
  letter-spacing: .06em;
  white-space: nowrap;
}

.who-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.who-cv-toggle {
  appearance: none;
  margin: -2px 0 0;
  padding: 9px 16px 8px;
  border: 1px solid rgba(240,238,234,.38);
  background: rgba(10,9,9,.18);
  color: #f0eeea;
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 300ms ease, border-color .25s ease, background .25s ease, letter-spacing .25s ease;
}
.who-cv-toggle:hover,
.who-cv-toggle:focus-visible {
  border-color: rgba(240,238,234,.75);
  background: rgba(10,9,9,.35);
  letter-spacing: .24em;
  outline: none;
}
.who-cv-toggle.is-fading { opacity: .35; }

@media (max-width: 1000px) {
  .who-cv-list li { gap: 14px; padding-bottom: 14px; }
}
@media (max-width: 600px) {
  .who-cv-list li { grid-template-columns: 1fr; gap: 2px; padding-bottom: 16px; }
  .who-cv-title { font-size: 12px; }
  .who-footer { align-items: center; }
  .who-cv-toggle { font-size: 9px; padding: 8px 12px 7px; letter-spacing: .16em; }
}

/* V201 — WHO AM I on phones.
   - A dark band behind the header; text fades out softly beneath it.
   - The portrait is pulled left so both eyes stay in frame.
   - Smaller default text with A− / A+ controls (fixed under the header).
   - Signature 50% larger, centred, Career Summary button centred below it. */
.who-topfade, .who-fontsize { display: none; }

@media (max-width: 600px) {
  .who-page::before { background-position: 97% top; }

  .who-topfade {
    display: block;
    position: fixed;
    z-index: 9;
    top: 0; left: 0; right: 0;
    height: 104px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14,13,12,.97) 0%, rgba(14,13,12,.97) 58%, rgba(14,13,12,.70) 72%, rgba(14,13,12,0) 100%);
  }

  .who-fontsize {
    display: flex;
    position: fixed;
    z-index: 12;
    top: 66px;
    right: 7vw;
    gap: 6px;
  }
  .who-fs-btn {
    appearance: none;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(240,238,234,.38);
    border-radius: 6px;
    background: rgba(10,9,9,.35);
    color: #f0eeea;
    font: inherit;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    transition: opacity .25s ease, border-color .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .who-fs-btn:focus-visible { outline: none; border-color: rgba(240,238,234,.8); }
  .who-fs-btn:disabled { opacity: .3; cursor: default; }

  .who-content { padding-top: 112px; }

  .who-text {
    font-size: var(--who-fs, 11px);
    line-height: 1.8;
  }
  .who-text p { margin-bottom: calc(var(--who-fs, 11px) * 1.1); }
  .who-cv-list li { padding-bottom: calc(var(--who-fs, 11px) * 1.05); }

  .who-footer {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 18px;
  }
  .signature-wrap {
    width: 210px;
    max-width: 78vw;
    margin: 0 auto;
    transform-origin: center center;
  }
  .who-cv-toggle { margin: 0; }
}

/* V202 — phone portrait: face sits further right and shows more clearly. */
@media (max-width: 600px) {
  .who-page::before { background-position: 86% top; filter: brightness(1); }
  .who-page::after {
    background: linear-gradient(90deg, rgba(10,9,9,.80) 0%, rgba(10,9,9,.52) 42%, rgba(10,9,9,.14) 78%, rgba(10,9,9,.04) 100%);
  }
}

/* V203 — WHO AM I scrolls whenever its text is taller than the screen
   (laptops, landscape phones, the Career Summary), with the text fading out
   softly under the header. No scrollbar is drawn when everything fits. */
html { overflow-y:auto !important; scrollbar-width:thin; scrollbar-color:rgba(240,238,234,.22) transparent; }
html body.who-page { overflow-y:visible !important; }
@media (min-width:601px) {
  .who-topfade {
    display:block; position:fixed; z-index:9; top:0; left:0; right:0; height:min(17vh,120px); pointer-events:none;
    background:linear-gradient(180deg, rgba(13,12,11,1) 0%, rgba(13,12,11,1) 55%, rgba(13,12,11,.65) 75%, rgba(14,13,12,0) 100%);
  }
}
@media (max-height:560px) and (orientation:landscape) and (min-width:601px) {
  .who-topfade { height:96px; }
  .who-content { padding-top:104px; padding-bottom:60px; }
  .who-text { font-size:13px; line-height:1.7; }
  .who-text p { margin-bottom:12px; }
}