/* ==========================================================================
   Homepage — SUPERSEDIA-style viewport, selected works, information
   ========================================================================== */

@font-face {
  font-family: "ABC Diatype Ultra";
  src: url("../fonts/ABCDiatype-Ultra-Trial.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "ABC Diatype Bold";
  src: url("../fonts/ABCDiatype-Bold-Trial.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: url("../fonts/NeueHaasUnica-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: url("../Neue/Linotype%20-%20Neue%20Haas%20Unica%20Pro%20Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root,
html[data-theme="light"] {
  --bg: #f7f7f5;
  --ink: #111111;
  --muted: #8a8a8a;
  --plus: #1a1a1a;
  --rule: #d4d4d4;
  --mark-bg: #111111;
  --mark-ink: #f7f7f5;
  --theme-fill: #111111;
  --theme-empty: transparent;
  --theme-ring: #111111;
  --live: #150df7;
}

html[data-theme="dark"] {
  --bg: #111111;
  --ink: #fafafa;
  --muted: #8a8a8a;
  --plus: #fafafa;
  --rule: #2e2e2e;
  --mark-bg: #fafafa;
  --mark-ink: #111111;
  --theme-fill: #fafafa;
  --theme-empty: transparent;
  --theme-ring: #fafafa;
  --live: #150df7;
}

html[data-theme="bsod"] {
  --bg: #150df7;
  --ink: #DAD2D8;
  --muted: rgba(240, 235, 216, 0.62);
  --plus: #DAD2D8;
  --rule: rgba(240, 235, 216, 0.28);
  --mark-bg: #DAD2D8;
  --mark-ink: #150df7;
  --theme-fill: #DAD2D8;
  --theme-empty: transparent;
  --theme-ring: #DAD2D8;
  --live: #DAD2D8;
  --mast-ink: #DAD2D8;
}

:root {
  --plus-size: 6px;
  --plus-bar: 0.65px;
  --inset: 8px;
  --gutter: 18px;
  --side: 6.5vw;
  --bar-h: 42px;

  /* Logo margins — adjust these independently */
  --logo-margin-top: 1px;
  --logo-margin-x: 5px;
  --logo-margin-bottom: 0;
  /* Top inset */
  --mast-pad: 15px;
  /* Left + right inset — change this to open or tighten the sides */
  --mast-pad-x: 5px;
  /* Artwork box: viewBox 0 95.28 2720.87 264.48 (C/G overshoot + J hook) */
  --mast-w: 2720.87;
  --mast-h: 264.48;
  --mast-scale-max: 3.75;
  /* Space from the wordmark’s bottom edge to the menu / slideshow */
  --mast-gap: 35px;

  /* WORK / INFORMATION / CONTACT — adjust these */
  --nav-kerning: -0.05em;   /* letter-spacing inside each word */
  --nav-gap: 0.4em;         /* space between nav words */
  --nav-font-size: 18px;    /* menu bar */

  /*
    Information column lengths — desktop only.
    Left edges stay put: About starts on the J, Experience starts on the I.
    100% is the full run from that letter (About: J to I, Experience: I to the
    right edge of the logo). Lower either value to shorten that column.
  */
  --about-col-width: 100%;
  --exp-col-width: 100%;
  /* Space between About and Experience; Experience still starts on the I (51.274%). */
  --info-col-gap: 28px;
  /* Inset © from the right edge — matches theme buttons (bar 5px + 10px) */
  --info-copy-right-adjust: 10px;

  --diatype: "ABC Diatype Ultra", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --diatype-bold: "ABC Diatype Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --unica: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Animate shared color tokens on <html> so bar + page bg stay locked */
@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f7f5;
}
@property --ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}
@property --mark-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}
@property --mark-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f7f5;
}

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

html {
  overflow-x: clip;
  transition:
    --bg .7s var(--ease),
    --ink .7s var(--ease),
    --mark-bg .7s var(--ease),
    --mark-ink .7s var(--ease);
}
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--unica);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bar,
.viewport,
.manifesto,
.index,
.info,
.masthead,
.info-foot {
  background-color: var(--bg);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
mark {
  background: var(--mark-bg);
  color: var(--mark-ink);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- sticky / pinned bar ------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 var(--logo-margin-x);
  background: var(--bg);
}
.bar-spacer {
  display: none;
  flex-shrink: 0;
  pointer-events: none;
}
.bar.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
}
.bar-nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--nav-gap);
  font-family: var(--diatype-bold);
  font-weight: 700;
  font-size: var(--nav-font-size);
  line-height: 1;
  letter-spacing: var(--nav-kerning);
  padding-left: 10px;
}

/* sensitive.work-style cubic / roller hover */
.bar-link {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
  color: inherit;
}
.bar-link__track {
  display: block;
  transition: transform .45s cubic-bezier(.77, 0, .175, 1);
  will-change: transform;
}
.bar-link:hover .bar-link__track,
.bar-link:focus-visible .bar-link__track {
  transform: translateY(-50%);
}
.bar-link__face {
  display: block;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
}

.themes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}
.theme-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 1;
}
.theme-btn:hover,
.theme-btn:focus,
.theme-btn:focus-visible,
.theme-btn[aria-pressed="true"] {
  background: none;
  opacity: 1;
  outline: none;
}
.theme-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 0;
  pointer-events: none;
  background: none;
  line-height: 0;
}
.theme-dot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(0deg);
  transition: transform 0.35s var(--ease);
}
.theme-btn:hover .theme-dot img,
.theme-btn:focus-visible .theme-dot img {
  transform: rotate(35deg);
}

/* ---- viewport: masthead + slideshow -------------------------------------- */
.viewport {
  position: relative;
  background: var(--bg);
}
.masthead {
  margin: 0;
  padding: var(--mast-pad) var(--mast-pad-x) 0;
  color: var(--ink);
}
html[data-theme="bsod"] .masthead {
  color: var(--mast-ink, #DAD2D8);
}
.masthead__band,
.masthead__shell,
.masthead a {
  display: block;
  width: 100%;
}
.masthead a {
  color: inherit;
}
.masthead img,
.masthead__mark {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  overflow: visible;
  transform-origin: 50% 0;
  transition: filter .7s var(--ease), fill .7s var(--ease), color .7s var(--ease);
}
html.mast-stretch .masthead__band {
  aspect-ratio: var(--mast-w) / calc(var(--mast-h) * var(--mast-scale-max));
}
html.mast-stretch .masthead__shell {
  position: sticky;
  top: var(--mast-pad);
  aspect-ratio: var(--mast-w) / var(--mast-h);
  overflow: visible;
}
html.mast-stretch .masthead__mark {
  transform: scaleY(var(--mast-scale-max));
}
html[data-theme="dark"] .masthead img,
html[data-theme="dark"] .info-logo img {
  filter: invert(1);
}

.bar {
  margin-top: var(--mast-gap);
}

.rail {
  position: relative;
  width: 100%;
  height: 78vh;
  margin-top: 8px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.rail.is-dragging { cursor: grabbing; }
.rail-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.rail-item {
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
}
.rail-item img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ---- scroll reveal (opacity only — no Y translate, so the page doesn't jump) */
html.home-reveal .masthead,
html.home-reveal .rail,
html.home-reveal .manifesto,
html.home-reveal .index-title,
html.home-reveal .work,
html.home-reveal .info-about,
html.home-reveal .info-exp,
html.home-reveal .info-logo,
html.home-reveal .info-status,
.reveal {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
html.home-reveal .masthead.is-revealed,
html.home-reveal .rail.is-revealed,
html.home-reveal .manifesto.is-revealed,
html.home-reveal .index-title.is-revealed,
html.home-reveal .work.is-revealed,
html.home-reveal .info-about.is-revealed,
html.home-reveal .info-exp.is-revealed,
html.home-reveal .info-logo.is-revealed,
html.home-reveal .info-status.is-revealed,
.reveal.is-revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html.home-reveal .masthead,
  html.home-reveal .rail,
  html.home-reveal .manifesto,
  html.home-reveal .index-title,
  html.home-reveal .work,
  html.home-reveal .info-about,
  html.home-reveal .info-exp,
  html.home-reveal .info-logo,
  html.home-reveal .info-status,
  .reveal {
    opacity: 1;
    transition: none;
  }
}

/* ---- manifesto paragraph ------------------------------------------------- */
.manifesto {
  padding: 48px 18px 80px;
  background: var(--bg);
}
.manifesto p {
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: clamp(22px, 2.55vw, 36px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 500;
}
@media (min-width: 821px) {
  .manifesto p {
    /* Wide enough that “world.” stays on the second line of paragraph 2 */
    max-width: 25em;
  }
}
.manifesto p + p {
  margin-top: 1.05em;
}


/* ---- selected works ------------------------------------------------------ */
.index {
  position: relative;
  z-index: 8;
  padding: 28px 14px 22vh;
  background: var(--bg);
}
.index-title {
  margin: 0 0 22px;
  font-family: var(--unica);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 22px;
}
.work {
  display: block;
  min-width: 0;
  color: inherit;
}
.work__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #bdbdbd;
  overflow: hidden;
}
.work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.work__ttl {
  min-width: 0;
}
.work__tags {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  color: #8a8a8a;
}

/* ---- information --------------------------------------------------------- */
/* Columns track the logo: J starts at 0.472% of the wordmark, I at 51.274%. */
.info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 0 12px;
  background: var(--bg);
}
.info-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.info-copy {
  padding-left: var(--logo-margin-x);
  padding-right: var(--logo-margin-x);
}
.info-wordmark {
  padding-left: var(--logo-margin-x);
  padding-right: var(--logo-margin-x);
}
.info-copy,
.info-status {
  display: grid;
  grid-template-columns:
    0.472%
    calc(51.274% - 0.472% - var(--info-col-gap))
    var(--info-col-gap)
    minmax(0, 1fr);
}
.info-about {
  grid-column: 2;
  justify-self: start;
  width: var(--about-col-width);
  max-width: 100%;
}
.info-exp {
  grid-column: 4;
  justify-self: start;
  width: var(--exp-col-width);
  max-width: 100%;
}
.info-about p.info-k,
.info-exp p.info-k {
  font-weight: 900;
}
.info-about,
.info-exp {
  font-size: 13.5px;
  line-height: 1.28;
  letter-spacing: -0.011em;
}
.info-about p,
.info-exp p,
.job,
.edu { margin: 0; }
.info-about p.info-k,
.info-exp p.info-k { margin: 0 0 0.9em; }
.info-about p + p { margin-top: 0.9em; }
.info-about .info-cv {
  margin-top: 0.15em;
  font-weight: 650;
}
.info-about .info-read { margin-top: 1.15em; }
.info-read a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.info-exp .info-credit {
  margin-top: 1.28em;
  padding-left: 0;
  color: var(--muted);
  font-size: inherit;
  line-height: 1.28;
  letter-spacing: inherit;
}
.jobs {
  width: max-content;
  max-width: 100%;
}
.job { width: 100%; margin-top: 0; }
.job .when,
.edu .when {
  text-align: left;
  padding-left: 3.6em;
}
.edu { margin-top: 1.15em; width: fit-content; max-width: 100%; }
.info-logo {
  margin-top: 22px;
  padding: 0;
  width: 100%;
  /* Same box as assets/logo.svg so the status line does not move */
  aspect-ratio: 2720.87 / 455.03;
}
.info-status {
  margin-top: 6px;
  padding: 0;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--live);
}
.info-status__left {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 1.45em;
}
.info-status__listen {
  grid-column: 4;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  padding-right: 0.5em;
}
.info-status__copy {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  margin-right: var(--info-copy-right-adjust);
  text-align: right;
  pointer-events: auto;
}
.info-status a { color: inherit; }
.info-status a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 820px) {
  :root {
    --logo-margin-top: 20px;
    --logo-margin-x: 10px;
    --logo-margin-bottom: 10px;
    --nav-font-size: 15px;
    /* Same top gap when stretched and when shrunk */
    --mast-pad: var(--logo-margin-top);
    --mast-scale-max: 6.2;
    --mast-gap: 45px;
    --menu-masthead-gap: 20px;
    /* Keep © lined up with the floating bar’s 12px side inset */
    --info-copy-right-adjust: 2px;
  }

  .viewport {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-bottom: 0;
  }

  .masthead {
    flex-shrink: 0;
    padding: var(--mast-pad) var(--logo-margin-x) var(--logo-margin-bottom);
  }
  html.mast-stretch .masthead__shell {
    position: sticky;
    top: var(--mast-pad);
  }

  /* Floating bottom menu — matches screenshot, slightly rounded */
  .bar {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 12px;
    right: 12px;
    z-index: 60;
    margin-top: 0;
    height: auto;
    min-height: 0;
    padding: 14px 16px;
    background: var(--bg);
    border: 0;
    border-radius: 10px;
  }
  .bar-nav {
    padding-left: 0;
  }
  .themes {
    padding-right: 0;
  }

  /* Slideshow: full bleed under logo — allow vertical page scroll */
  .rail {
    margin: 0;
    width: 100%;
    flex: 0 0 auto;
    height: 90vh;
    height: 90svh;
    min-height: 0;
    touch-action: pan-y;
    cursor: default;
  }
  .rail-item img {
    height: 100%;
  }

  .manifesto { padding: 36px var(--gutter) 56px; }
  .manifesto p { font-size: clamp(17.5px, 5.2vw, 20px); }
  .index {
    padding: 28px 12px 64px;
  }
  .works {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .work__meta {
    font-size: 11px;
  }
  .work__tags {
    white-space: normal;
    text-align: right;
  }
  /*
    Menu bar: bottom 16px + ~52px tall.
    --menu-masthead-gap is the space between the bottom wordmark and the bar.
  */
  .info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding: 64px 0 calc(16px + 52px + var(--menu-masthead-gap) + env(safe-area-inset-bottom, 0px));
  }
  .info-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.7em;
    margin-top: -25px;
    margin-bottom: 55px;
    flex: 0 0 auto;
  }
  .info-logo {
    margin-top: 0;
    padding-top: 0;
  }
  .info-about,
  .info-exp {
    grid-column: auto;
    width: 100%;
    max-width: none;
    padding-right: 0;
    /* Shrinks with the screen; 13.5px on desktop, ~11–12px on a phone */
    font-size: clamp(10.5px, 2.15vw, 12.5px);
    line-height: 1.28;
  }
  .jobs { width: 100%; }
  .info-status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.7em;
    margin-top: 4px;
    font-size: clamp(7px, 1.7vw, 10px);
    white-space: nowrap;
  }
  .info-status__left {
    grid-column: auto;
    flex: 0 0 auto;
    gap: 0.85em;
  }
  .info-status__listen {
    grid-column: auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding-right: 0;
  }
  .info-status__copy {
    grid-column: auto;
    flex: 0 0 auto;
    justify-self: auto;
    margin-left: auto;
    margin-right: var(--info-copy-right-adjust);
    text-align: right;
  }
}

.email-copied {
  position: fixed;
  z-index: 130;
  transform: translate(-50%, -100%);
  margin-top: -6px;
  padding: 5px 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--diatype-bold);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--nav-kerning);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.email-copied.is-on { opacity: 1; }
.email-copied.is-below {
  transform: translate(-50%, 0);
  margin-top: 6px;
}
.email-copied.is-beside {
  transform: translate(0, -50%);
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rail-track { transform: none !important; }
  .email-copied { transition: none; }
}