/* =====================================================================
 * Layout for KH Portfolio landing page.
 * Reference viewport: 1440px. Matches Figma node 2:2 at this width.
 *
 * All values reference tokens from tokens.css. Never hard-code a
 * color, size, or spacing here.
 *
 * No motion, transitions, or interactive states in this file.
 * Motion belongs in motion.css.
 * ===================================================================== */


/* -------------------- Reset -------------------- */

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

html,
body {
  margin: 0;
  padding: 0;
}

/* Hash jumps land clear of the fixed nav rather than under it. */
html { scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  color: var(--ink-title);
  background: var(--surface-night-bottom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Damage control: pin the layout to the 1440 design width. Below 1440  */
  /* the browser scrolls horizontally rather than collapsing. Not a       */
  /* mobile layout — nothing rearranges, nothing clips.                    */
  min-width: var(--layout-max);
}

img,
video {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}


/* -------------------- Page shell -------------------- */
/* .ocean is a full-bleed environment layer that carries the page  */
/* gradient across the entire viewport width. .page caps the       */
/* content column at the Figma reference width (1440) and centers  */
/* it. Anything above 1440 shows gradient, not a solid backdrop.   */

.ocean {
  width: 100%;
  background: var(--gradient-page);
}

.page {
  max-width: var(--layout-max);
  margin: 0 auto;
  /* `clip` (not `hidden`) so this element does NOT become a scroll        */
  /* container. That keeps CSS scroll-snap targets inside .page bound to   */
  /* the document scroller (html) rather than to this fixed-height box.   */
  overflow: clip;
  /* Reserve space for the fixed nav so hero geometry matches the pre-      */
  /* sticky layout (hero content ends up at the same y as before).          */
  padding-top: var(--nav-h);
}


/* -------------------- Nav -------------------- */
/* Sits fixed to the viewport, spans the full width. The inner cap keeps   */
/* logo + links inside the 1440 content column. Background is transparent  */
/* throughout — the ocean gradient reads through at every scroll position, */
/* and the backdrop blur (added in motion.css once scrolled) keeps labels  */
/* legible against whatever's underneath.                                  */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  color: var(--ink-title);
  background-color: transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--fs-title-l);
  letter-spacing: var(--track-kh-logo);
  line-height: var(--lh-tight);
}

.nav__links {
  display: flex;
  gap: var(--nav-gap);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-nav);
  letter-spacing: var(--track-nav);
}

.nav__link { opacity: var(--opacity-nav-link); }


/* -------------------- Hero -------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-stack-gap);
  width: 100%;
  padding: var(--hero-pad-y) var(--hero-pad-x);
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-hero);
  letter-spacing: var(--track-wordmark);
  line-height: var(--lh-tight);
  color: var(--ink-title);
  white-space: nowrap;
}

.hero__tagline {
  display: flex;
  align-items: center;
  gap: var(--tagline-gap);
  color: var(--ink-tagline);
  white-space: nowrap;
}

.tagline__part {
  font-family: var(--font-line);
  font-weight: 400;
  font-size: var(--fs-title-l);
  line-height: var(--lh-tight);
}

.tagline__chip {
  display: inline-flex;
  align-items: flex-start;
  padding: var(--tagline-chip-pad);
  border-radius: var(--radius-chip-sm);
  background: var(--surface-chip-glass);
  font-family: var(--font-rotator);
  font-weight: 400;
  font-size: var(--fs-title-l);
  line-height: var(--lh-tight);
  color: var(--ink-tagline);
}

.hero__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-hero-italic);
  letter-spacing: var(--track-hero-italic);
  color: var(--ink-hero-italic);
  opacity: var(--opacity-hero-italic);
  text-align: center;
  white-space: nowrap;
}


/* -------------------- Cases -------------------- */

.cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cards-stack-gap);
  width: 100%;
  padding: var(--cards-pad-top) 0 var(--cards-pad-bottom);
}

.card {
  --media-h:  var(--card-media-h-std);
  --chip-bg:  transparent;
  --chip-fg:  currentColor;
  --status-bg: var(--surface-status-translucent);
  --letterbox: transparent;

  width: var(--card-w);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.card {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.card:has(> .card__link:hover) {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px rgba(6, 40, 52, 0.4);
}

.card:has(> .card__link:focus-visible) {
  outline: 2px solid var(--ink-card-title);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:has(> .card__link:hover) { transform: none; }
}

.card__media {
  position: relative;
  width: 100%;
  height: var(--media-h);
  overflow: hidden;
}

.card__poster,
.card__video {
  width: 100%;
  height: 100%;
  background: var(--letterbox);
  display: block;
}

.card__status {
  position: absolute;
  top: var(--status-inset);
  right: var(--status-inset);
  padding: var(--status-pad);
  border-radius: var(--radius-status);
  background: var(--status-bg);
  color: var(--chip-fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-chip);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.card__body {
  position: relative;
  height: var(--card-body-h);
}

.card__title {
  position: absolute;
  left: var(--card-body-inset);
  top: var(--card-title-y);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-card-title);
  line-height: var(--lh-tight);
  color: var(--ink-card-title);
  white-space: nowrap;
}

.card__sub {
  position: absolute;
  left: var(--card-body-inset);
  top: var(--card-sub-y);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-card-sub);
  line-height: var(--lh-tight);
  color: var(--ink-card-sub);
  white-space: nowrap;
}

.card__desc {
  position: absolute;
  left: var(--card-body-inset);
  right: var(--card-body-inset);
  top: var(--card-desc-y);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-card-body);
  line-height: var(--lh-card-body);
  color: var(--ink-card-body);
}

.card__tags {
  position: absolute;
  left: var(--card-body-inset);
  right: var(--card-body-inset);
  top: var(--card-tags-y);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
}

.card__tag {
  padding: var(--tag-pad);
  border-radius: var(--radius-chip);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-chip);
  line-height: var(--lh-tight);
  white-space: nowrap;
}


/* -------------------- Cards: per-card palettes + media -------------------- */

.card--pm {
  --media-h:   var(--card-media-h-pm);
  --chip-bg:   var(--card-pm-chip);
  --chip-fg:   var(--card-pm-accent);
  --status-bg: var(--surface-status);
}

.card--watchlight {
  --chip-bg:   var(--card-watchlight-chip);
  --chip-fg:   var(--card-watchlight-accent);
}

.card--romans {
  --chip-bg:   var(--card-romans-chip);
  --chip-fg:   var(--card-romans-accent);
}

.card--iwish {
  --chip-bg:   var(--card-iwish-chip);
  --chip-fg:   var(--card-iwish-accent);
  --status-bg: var(--card-iwish-chip);
  --letterbox: var(--letterbox-iwish);
}

.card--illi {
  --chip-bg:   var(--card-illi-chip);
  --chip-fg:   var(--card-illi-accent);
  --letterbox: var(--letterbox-illi);
}


/* -------------------- Cards: per-card media fit -------------------- */
/* Fit modes read from Figma per Image node (2026-08-24).            */
/* Rules apply to both the poster <img> and any future <video>.      */

.card--pm         .card__poster,
.card--pm         .card__video    { object-fit: cover; }
.card--watchlight .card__poster,
.card--watchlight .card__video    { object-fit: cover; object-position: 29% 50%; }
.card--romans     .card__poster,
.card--romans     .card__video    { object-fit: cover; }
.card--iwish      .card__poster,
.card--iwish      .card__video    { object-fit: contain; }
.card--illi       .card__poster,
.card--illi       .card__video    { object-fit: contain; }


/* -------------------- Seabed -------------------- */

.seabed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--seabed-stack-gap);
  width: 100%;
  min-height: var(--seabed-h);
  padding: var(--seabed-pad-top) var(--seabed-pad-x) var(--seabed-pad-bottom);
  text-align: center;
}

.seabed__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--seabed-eyebrow-w);
  height: var(--seabed-eyebrow-h);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: var(--track-eyebrow);
  line-height: var(--lh-tight);
  color: var(--ink-invert-muted);
  opacity: var(--opacity-eyebrow);
}

.seabed__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--seabed-title-h);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-title-m);
  line-height: var(--lh-tight);
  color: var(--ink-invert-strong);
}

.seabed__body {
  width: var(--seabed-body-w);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-s);
  line-height: var(--lh-seabed-body);
  color: var(--ink-invert);
  opacity: var(--opacity-seabed-body);
}


/* -------------------- Footer -------------------- */
/* .footer is full-viewport-width so the gradient and sand strip    */
/* bleed. .footer__inner caps the positioning context at 1440 so    */
/* the content block and back-to-surface link stay at Figma coords. */

.footer {
  position: relative;
  width: 100%;
  height: var(--footer-h);
  /* No background here — the wave asset (399:11, injected via <img         */
  /* class="footer__wave"> in .ocean) carries the footer's gradient fill    */
  /* per Figma. Body's --surface-night-bottom stays as the fallback.        */
  overflow: hidden;
}

.footer__inner {
  position: relative;
  max-width: var(--layout-max);
  height: 100%;
  margin: 0 auto;
}

.footer__content {
  position: absolute;
  left: var(--footer-content-x);
  top: var(--footer-content-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--footer-content-gap);
}

.footer__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-display-footer);
  line-height: var(--lh-tight);
  color: var(--ink-invert-strong);
  white-space: nowrap;
}

.footer__buttons {
  display: flex;
  gap: var(--footer-btn-gap);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--footer-btn-pad);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.btn--outline {
  background: var(--surface-linkedin);
  border: 1px solid var(--border-linkedin);
  color: var(--ink-invert-btn);
}

.btn--solid {
  background: var(--surface-email);
  color: var(--ink-title);
}

.footer__signoff {
  display: flex;
  align-items: baseline;
  gap: var(--footer-signoff-gap);
  color: var(--ink-invert-signature);
  white-space: nowrap;
}

.footer__monogram {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-monogram-footer);
  line-height: var(--lh-tight);
}

.footer__tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-bubble);
  line-height: var(--lh-tight);
}

.footer__sand {
  position: absolute;
  left: 0;
  top: var(--footer-sand-top);
  width: 100%;
  height: var(--footer-sand-h);
  background: var(--surface-sand-night);
}

.footer__back {
  position: absolute;
  left: var(--footer-back-x);
  top: var(--footer-back-y);
  /* .footer__sand comes after .footer__inner in DOM and stacks above  */
  /* it. Without an explicit z-index the sand would cover this link.   */
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-title-s);
  line-height: var(--lh-tight);
  color: var(--ink-back-surface);
  white-space: nowrap;
}