/* ── Reset ── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Several full-bleed divider lines below use width: 100vw to span past
   #content's own padding. On real mobile browsers (unlike this preview)
   100vw includes the scrollbar gutter even when no scrollbar is shown,
   so those elements end up a few px wider than the actual viewport —
   this is the safety net that stops that from becoming real horizontal
   scroll on the page. Set on both html and body since different mobile
   browsers treat either as the actual scrolling element.
   Scoped to mobile only — setting overflow-x without overflow-y here
   makes the browser implicitly add overflow-y: auto to html/body, which
   turns body into its own scroll container and breaks position: sticky
   for .project-hero__left on desktop. */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}

body {
  font-family: var(--font);
  font-size: var(--text-16);
  color: var(--color-foreground-primary);
  background-color: var(--color-background);
}

/* ── Shared gradient border (used on .btn, .toggle-slider__pill and .home-pill__pill) ── */

.btn::before,
.toggle-slider__pill::before,
.home-pill__pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 55%, rgba(0, 0, 0, 0.05) 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

#nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-16) var(--space-48);
  background-color: transparent;
  z-index: 10;
}


#content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-32) var(--space-48) var(--space-80);
  position: relative;
  transition: opacity 0.2s ease;
}

/* ── Vertical keyline ──
   Anchored to #content (not the viewport) so it tracks the row's 35%/1fr
   column boundary correctly whether #content is full-bleed or centered
   with a max-width. The + half-gap nudge centers it in the column gap. */

#content::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-48) + (100% - 2 * var(--space-48)) * 0.35 + var(--space-8));
  width: 1px;
  background: var(--color-border-subtle);
  pointer-events: none;
  z-index: 1;
}

/* ── Two-col layout ── */

.row {
  display: grid;
  grid-template-columns: 35% 1fr;
  column-gap: var(--space-16);
}


.about__portrait {
  display: block;
  margin-top: var(--space-24);
  width: 112px;
  height: 136px;
  object-fit: cover;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.contact-hint {
  font-size: var(--text-12);
  font-weight: var(--text-12-regular);
  color: var(--color-foreground-70);
  transition: opacity 0.1s ease;
}

.recognition-label {
  display: block;
  margin-top: var(--space-16);
}

.recognition-logo {
  width: 160px;
  height: auto;
  margin-top: var(--space-4);
}

.about {
  margin-top: var(--space-80);
}

.exp {
  margin-top: var(--space-144);
}

.project-hero {
  margin-top: var(--space-80);
}

.project-section {
  margin-top: var(--space-124);
  padding-top: var(--space-40);
  position: relative;
}

.project-section::before {
  content: '';
  position: absolute;
  top: 0;
  /* Full-bleed to the true viewport edge — accounts for #content's own
     padding plus the outer gutter once #content hits its max-width and
     centers. Same formula used by .exp__date::before below, so both
     dividers stay full-bleed regardless of which column they sit in. */
  left: calc(-1 * (max(0px, (100vw - var(--content-max-width)) / 2) + var(--space-48)));
  width: 100vw;
  height: 1px;
  background: var(--color-border-subtle);
}

.project-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-img.is-loaded {
  opacity: 1;
}

.project-figure {
  margin: 0;
  margin-bottom: var(--space-64);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.5s ease;
}

.project-figure.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: var(--space-80);
  row-gap: 0;
  margin-bottom: var(--space-64);
}

.project-figure-row .project-figure {
  margin-bottom: 0;
}

.project-figure-row__footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: var(--space-16);
}

.project-figure-row:has(.project-figure-row__footer) {
  margin-bottom: var(--space-48);
}

.project-figure--inset {
  max-width: 600px;
  margin-inline: auto;
}

.project-figure .project-img {
  background-color: rgba(0, 0, 0, 0.05);
}

.project-figure .project-img--no-bg {
  background-color: transparent;
}

/* Locks the box to the "to" image's ratio so the figure toggle doesn't reflow
   when swapped to a "from" image of a slightly different aspect ratio. */
.project-img[data-compare-to] {
  object-fit: cover;
}

.project-img-caption {
  margin-top: var(--space-8);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-70);
}

.project-figure__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--space-8);
}

.project-figure__footer .project-img-caption {
  margin-top: 0;
}

.project-hero__left {
  padding-right: var(--space-32);
  position: sticky;
  top: var(--space-112);
  align-self: start;
}

.project-hero__right {
  padding-left: var(--space-32);
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.project-info__title {
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
}

.project-info__description {
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-primary);
  line-height: 1.6;
}

.project-info__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-primary);
}

.project-info__meta li::before {
  content: '└ ';
}

.section-label {
  display: block;
  grid-column: 1 / -1;
  font-size: var(--text-12);
  font-weight: var(--text-12-regular);
  color: var(--color-foreground-70);
  margin-bottom: var(--space-16);
}

.about__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
}

.about__title {
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
  padding-bottom: var(--space-4);
}

.about__title + .about__title {
  font-size: var(--text-14);
  color: var(--color-foreground-primary);
}

.about__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
  line-height: 1.6;
  max-width: 748px;
  padding-left: var(--space-32);
}

.exp__date,
.exp__company {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.exp__date {
  position: relative;
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
}

.exp__date::before {
  content: '';
  position: absolute;
  top: 0;
  /* Full-bleed to the true viewport edge — see .project-section::before
     for why this can't use the "left: 50% - 50vw" self-centering trick:
     .exp__date is the 35% column, not the full centered row. */
  left: calc(-1 * (max(0px, (100vw - var(--content-max-width)) / 2) + var(--space-48)));
  width: 100vw;
  height: 1px;
  background: var(--color-border-subtle);
}

.exp__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-32);
  max-width: 748px;
}

.exp__name {
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-primary);
}

.exp__project {
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-secondary);
  line-height: 1.65;
}


.btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: var(--space-40);
  padding: 0 var(--space-16);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-primary);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.8;
}

/* ── Scroll Notch ── */

#scroll-notches {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  z-index: 20;
  transition: opacity 0.15s ease;
}

#scroll-notches.tooltip-open { opacity: 0; }

.scroll-notch {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-foreground-30);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.scroll-notch.active {
  background: var(--color-foreground-primary);
  width: 14px;
}

#notch-tooltip {
  position: fixed;
  left: var(--space-8);
  top: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-tooltip);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-10px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 21;
}

#notch-tooltip.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) translateX(0);
}

.notch-tooltip-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s ease;
  min-width: 160px;
}

.notch-tooltip-item:hover { background: rgba(22, 22, 32, 0.04); }

.notch-tooltip-dash {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-foreground-30);
  flex-shrink: 0;
  transition: width 0.15s ease, background 0.15s ease;
}

.notch-tooltip-item.active .notch-tooltip-dash {
  width: 14px;
  background: var(--color-foreground-primary);
}

.notch-tooltip-label {
  font-family: var(--font);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-70);
  white-space: nowrap;
  flex: 1;
}

.notch-tooltip-item.active .notch-tooltip-label {
  color: var(--color-foreground-primary);
}

/* ── Toggle Slider ── */

.toggle-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgba(212, 212, 212, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
}

.toggle-slider__pill {
  position: absolute;
  top: var(--space-4);
  height: var(--space-40);
  background: var(--color-red);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.toggle-slider__pill.no-transition {
  transition: none;
}

.toggle-slider button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: var(--space-40);
  padding: 0 var(--space-16);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-primary);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color 0.15s ease;
}

.toggle-slider button.active {
  color: var(--color-white);
}

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* ── Mobile nav (logo/home pill + Menu/Close text trigger + full-screen list overlay) ── */

.home-pill {
  display: none;
  position: relative;
  align-items: center;
  padding: var(--space-4);
  background: rgba(212, 212, 212, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
}

.home-pill__pill {
  position: absolute;
  inset: var(--space-4);
  background: var(--color-red);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 0;
}

.home-pill__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-40);
  padding: 0 var(--space-16);
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}

.mobile-nav-toggle-wrap {
  display: none;
  align-items: center;
  padding: var(--space-4);
  background: rgba(212, 212, 212, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
}

.mobile-nav-toggle {
  height: var(--space-40);
  padding: 0 var(--space-16);
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-14);
  font-weight: var(--text-14-regular);
  color: var(--color-foreground-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mobile-nav-overlay__footer {
  position: absolute;
  left: var(--space-24);
  bottom: var(--space-24);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mobile-nav-overlay__footer .contact-hint {
  display: inline;
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-background);
  z-index: 5;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--space-24);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-nav-overlay.is-open {
  display: flex;
  opacity: 1;
}

.mobile-nav-overlay__list {
  border-top: 1px solid var(--color-border-subtle);
}

.mobile-nav-overlay__list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  padding: var(--space-24) 0;
  color: var(--color-foreground-primary);
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
}

.mobile-nav-overlay__list button.active {
  color: var(--color-red);
}

.mobile-nav-overlay__num {
  font-size: var(--text-16);
  font-weight: var(--text-16-regular);
  color: var(--color-foreground-secondary);
}

/* ── Figure Toggle (before/after compare, scoped to a figure or figure row) ── */

.figure-toggle {
  flex-shrink: 0;
  gap: 0;
  transform: scale(0.85);
  transform-origin: right top;
}

.figure-toggle .toggle-slider__pill {
  background: rgba(255, 255, 255, 0.7);
}

.figure-toggle button {
  padding: 0 var(--space-12);
  font-size: var(--text-16);
}

.figure-toggle button.active {
  color: var(--color-foreground-primary);
}

/* ── Mobile (≤ 768px) ── */

@media (max-width: 768px) {

  nav {
    padding: var(--space-16) var(--space-24);
  }

  .contact-hint {
    display: none;
  }

  /* LinkedIn button drops out on mobile. */
  #nav-actions {
    display: none;
  }

  .exp {
    margin-top: var(--space-112);
  }

  #content {
    padding: var(--space-32) var(--space-24) var(--space-80);
  }

  /* Single col grid */
  .row {
    grid-template-columns: 1fr;
  }

  /* Hide vertical keyline */
  #content::after {
    display: none;
  }

  /* Horizontal keylines — match reduced padding */
  .exp__date::before,
  .project-section::before {
    left: calc(-1 * (max(0px, (100vw - var(--content-max-width)) / 2) + var(--space-24)));
  }

  /* Toggle slider is replaced by the Menu/Close text trigger + full-screen
     list overlay (see mobile-nav.js) — too many nav items to fit a pill. */
  .toggle-slider {
    display: none;
  }

  .home-pill {
    display: flex;
  }

  .mobile-nav-toggle-wrap {
    display: flex;
  }

  /* Hide scroll notches and tooltip */
  #scroll-notches,
  #notch-tooltip {
    display: none;
  }

  .exp__date {
    padding-top: var(--space-32);
    padding-bottom: 0;
  }

  .exp__company {
    padding-top: var(--space-8);
    padding-bottom: var(--space-32);
    padding-left: 0;
    gap: var(--space-8);
  }

  .exp__project {
    font-size: var(--text-16);
    font-weight: var(--text-16-regular);
  }

  /* Remove right-col padding in two-col components */
  .about__right {
    padding-left: 0;
    margin-top: var(--space-40);
    font-size: var(--text-16);
    font-weight: var(--text-16-regular);
  }

  .project-info__description,
  .project-info__meta {
    font-size: var(--text-14);
    font-weight: var(--text-14-regular);
  }

  .project-info__title {
    font-size: var(--text-16);
    font-weight: var(--text-16-regular);
  }

  .project-hero__left {
    padding-right: 0;
    position: static;
  }

  .project-hero__right {
    padding-left: 0;
    margin-top: var(--space-40);
  }

  .project-figure {
    margin-bottom: var(--space-40);
  }

  /* Stack side-by-side compare/pair figures into one column */
  .project-figure-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
    margin-bottom: var(--space-40);
  }

  .project-figure-row .project-figure {
    margin-bottom: 0;
  }

  .project-figure-row:has(.project-figure-row__footer) {
    margin-bottom: var(--space-40);
  }

  /* From/this-to/this compare toggle is a fiddly small tap target at phone
     widths — keep it for tablet/desktop only and just show the "to" image
     (the toggle's default state) on mobile. */
  .figure-toggle,
  .project-figure-row__footer {
    display: none;
  }

  .project-section {
    margin-top: var(--space-40);
  }

  /* h1 and subtitle match the rest of the mobile copy at 16px */
  .about__title,
  .about__title + .about__title {
    font-size: var(--text-16);
  }

}

/* ── Tablet (769px – 1024px) ──
   Keeps the two-column .row layout (35%/1fr) intact — only the outer
   padding and sticky offset tighten up, since the full desktop gutters feel
   cramped at this width. The vertical/horizontal keyline formulas are
   re-anchored to the smaller padding value used here. */
@media (min-width: 769px) and (max-width: 1024px) {

  nav,
  #content {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }

  #content::after {
    left: calc(var(--space-32) + (100% - 2 * var(--space-32)) * 0.35 + var(--space-8));
  }

  .exp__date::before,
  .project-section::before {
    left: calc(-1 * (max(0px, (100vw - var(--content-max-width)) / 2) + var(--space-32)));
  }

  .project-hero__left {
    padding-right: var(--space-24);
    top: var(--space-80);
  }

  .project-hero__right {
    padding-left: var(--space-24);
  }

  .about__right {
    padding-left: var(--space-24);
  }

  /* Notches sit at a fixed left:14px — too tight against the narrower
     tablet padding to be worth keeping, same call as on mobile. */
  #scroll-notches,
  #notch-tooltip {
    display: none;
  }

  /* One spacing step down between figures — the full desktop gap feels
     loose once the column is narrower. */
  .project-figure {
    margin-bottom: var(--space-48);
  }

  .project-figure-row {
    margin-bottom: var(--space-48);
  }
}