/* ------------------------------------------------------------------
   A11 — styles
   Desktop first for now; layout is fluid so mobile is a media query
   away rather than a rewrite.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "TWK Continental";
  src: url("assets/fonts/TWKContinental-Regular.woff2") format("woff2"),
       url("assets/fonts/TWKContinental-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "TWK Continental", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #7a8c8e;
  --color-muted-2: #989190;
  --color-card: #f9f9f9;
  --color-panel: #d2d2d2;

  --page-pad: 16px;
  --gap: 10px;

  /* Layout caps at the MacBook Pro 16" width (= the Figma frame) and
     centres on anything wider. */
  --page-max: 1728px;

  --aside-w: 318px;
  --card-h: 280px;
  --card-pad: 24px;
  --card-radius: 8px;
  --panel-radius: 10px;

  /* Offset from the top of the viewport at which a card sticks. */
  --stick-top: var(--gap);

  /* Spring easings as CSS linear() curves (generated from a damped
     spring: stiffness/damping → snappy 420/32, gentle 220/28,
     bouncy 320/16). Use the matching *-dur with each. */
  --spring-snappy-dur: 408ms;
  --spring-snappy: linear(0.0000, 0.0139, 0.0505, 0.1036, 0.1679, 0.2388, 0.3131, 0.3879, 0.4610, 0.5311, 0.5969, 0.6577, 0.7131, 0.7629, 0.8071, 0.8459, 0.8796, 0.9084, 0.9328, 0.9531, 0.9699, 0.9835, 0.9942, 1.0026, 1.0089, 1.0135, 1.0166, 1.0185, 1.0195, 1.0197, 1.0194, 1.0186, 1.0175, 1.0162, 1.0148, 1.0134, 1.0119, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009);
  --spring-gentle-dur: 500ms;
  --spring-gentle: linear(0.0000, 0.0108, 0.0394, 0.0805, 0.1303, 0.1854, 0.2434, 0.3024, 0.3609, 0.4178, 0.4723, 0.5239, 0.5724, 0.6174, 0.6589, 0.6969, 0.7316, 0.7631, 0.7915, 0.8170, 0.8399, 0.8603, 0.8784, 0.8944, 0.9086, 0.9210, 0.9320, 0.9416, 0.9499, 0.9572, 0.9636, 0.9690, 0.9738, 0.9778, 0.9813, 0.9843, 0.9869, 0.9891, 0.9910, 0.9925, 0.9939, 0.9950, 0.9959, 0.9967, 0.9974, 0.9979, 0.9984, 0.9987, 0.9990);
  --spring-bouncy-dur: 856ms;
  --spring-bouncy: linear(0.0000, 0.0460, 0.1643, 0.3266, 0.5078, 0.6872, 0.8495, 0.9847, 1.0877, 1.1575, 1.1961, 1.2079, 1.1985, 1.1740, 1.1404, 1.1027, 1.0654, 1.0316, 1.0034, 0.9819, 0.9674, 0.9593, 0.9568, 0.9587, 0.9638, 0.9707, 0.9786, 0.9863, 0.9934, 0.9992, 1.0037, 1.0068, 1.0085, 1.0090, 1.0086, 1.0075, 1.0061, 1.0045, 1.0029, 1.0014, 1.0002, 0.9992, 0.9986, 0.9982, 0.9981, 0.9982, 0.9984, 0.9987, 0.9991);
}

/* Registered so Motion can spring it (see press feedback in script.js). */
@property --press { syntax: "<number>"; inherits: false; initial-value: 1; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

/* ---------- Header ---------- */

.site-header,
.work {
  max-width: var(--page-max);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  padding: 40px var(--page-pad) 0;
  margin-bottom: 28px;
}

/* Nav at the top, tagline pushed to the bottom edge of the header, so
   the tagline always sits on the logo's baseline no matter how many
   lines it wraps to, and the 28px gap to the cards stays constant. */
.site-header__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  max-width: 811px;
}

.nav {
  display: flex;
  gap: 34px;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.nav__link { color: var(--color-muted); transition: color .15s ease; }
.nav__link:hover,
.nav__link.is-active { color: var(--color-text); }

.tagline {
  font-size: clamp(24px, 2.1vw, 36px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.tagline__muted { color: var(--color-muted-2); }

.logo { flex: 0 0 auto; margin-top: 4px; margin-bottom: 4px; }
.logo img { width: 182px; height: 199px; }
.logo__fallback {
  display: block;
  width: 182px;
  font-size: 160px;
  line-height: 199px;
  font-weight: 500;
  letter-spacing: -0.06em;
  text-align: right;
}

/* ---------- Work: aside + content ---------- */

.work {
  display: grid;
  grid-template-columns: var(--aside-w) minmax(0, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--page-pad);
  align-items: start;
}

.aside   { grid-column: 1; align-self: stretch; }
.content { grid-column: 2; display: flex; flex-direction: column; gap: var(--gap); }

/* --- Aside cards ---
   The track is sticky and only one card tall, so it stays pinned until
   the very end of the section; the cards overflow below it. script.js
   sets --shift (px) as panels pass, sliding the whole stack up. */
.aside__track {
  position: sticky;
  top: var(--stick-top);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transform: translate3d(0, calc(var(--shift, 0) * -1px), 0);
  will-change: transform;
}

.card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--card-h);
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--color-card);
  transition: background-color .25s ease, transform var(--spring-snappy-dur) var(--spring-snappy);
  transform-origin: center;
}
.card:hover { background: #f2f2f2; }
/* Press feedback is driven by Motion (script.js) via --press. */
.card, .stepper__dot { transform: scale(var(--press, 1)); }
.card:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.card__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
}
.card__icon img { width: 40px; height: 40px; }

.card__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 270px;
  overflow-wrap: anywhere;
}
.card__title { font-size: 16px; color: var(--color-text); }
.card__desc  { font-size: 15px; color: var(--color-muted); }

/* --- Content panels --- */
/* 16:9, but never taller than the viewport (minus the pin gap top and
   bottom) so one full panel always fits on screen; the image crops a
   few pixels top/bottom on short screens instead of the panel being
   cut by the browser. */
.panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 2 * var(--gap));
  max-height: calc(100dvh - 2 * var(--gap));
  border-radius: var(--panel-radius);
  background: var(--color-panel);
  overflow: hidden;
  scroll-margin-top: var(--gap);
}
.panel__media,
.panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.panel__media img { object-fit: cover; object-position: center; }
/* Reveal target for Motion's inView (script.js); no-JS = visible. */
.js .panel > .carousel,
.js .panel > .panel__media { opacity: 0; }
/* Panels with an image take the image's own background so any
   letterboxing (mobile) is seamless. */
.panel:has(.panel__media) { background: var(--panel-bg, #d1d3d3); }

/* --- Carousel (Embla) --- */
.carousel { position: absolute; inset: 0; }
.carousel__track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  outline: none;
  touch-action: pan-y pinch-zoom;
}
.carousel__track:active { cursor: grabbing; }
.carousel__track:focus-visible { box-shadow: inset 0 0 0 2px var(--color-text); }
.carousel__container {
  display: flex;
  height: 100%;
  backface-visibility: hidden;
}
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Stepper (from Figma: 66x21 pill, 40% #181818 + 24px backdrop blur,
   32px from the bottom-right corner) --- */
.stepper {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 21px;
  padding: 0 8px;
  border-radius: 10.5px;
  background: rgba(24, 24, 24, .4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.stepper__dot {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: width var(--spring-bouncy-dur) var(--spring-bouncy), background-color .25s ease;
}
.stepper__dot.is-active { width: 24px; background: #fff; }
.stepper__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Mobile-only card inside the panel (see media query). */
.panel__card { display: none; }


/* ---------- Footer ----------
   Figma: 1696 wide (= aside + panels), 96 tall, #161414, 8px radius,
   26/40 padding; logo left, social links centred, copyright right.
   10px above and below, same side padding as the content. */
.site-footer {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--gap) var(--page-pad);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 26px 40px;
  border-radius: 8px;
  background: #161414;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
}
/* Figma: mark · wordmark · copyright with equal 594px gaps, centred.
   Expressed as a 1424px row spread with space-between so it matches at
   full width and simply tightens on narrower screens. */
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1424px;
}
.site-footer__logo { display: block; }
.site-footer__logo img { width: 40px; height: 42px; }
.site-footer__wordmark { width: 108px; height: 42px; }
.site-footer__copy { display: flex; gap: 6px; white-space: nowrap; }
.site-footer__c { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ---------- Toast ----------
   Pill that springs up from the bottom centre when the contact email is
   copied. Shown/hidden by script.js via .is-visible; [hidden] keeps it
   out of the tab order and away from screen readers when idle. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px 12px 14px;
  border-radius: 12px;
  background: #161414;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translate(-50%, 24px) scale(.96);
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .32s cubic-bezier(.4, 0, .8, .4);
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity .18s ease,
    transform var(--spring-bouncy-dur) var(--spring-bouncy);
}
.toast__icon { flex: 0 0 auto; color: #7a8c8e; }
.toast__text { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Mobile ----------
   Figma "Mobile" frame (393 wide): pill nav pinned at the top, centred
   logo and tagline, then one panel per project with its card sitting
   inside the panel. The desktop aside is not used. */
@media (max-width: 900px) {
  :root {
    --page-pad: 8px;
    --gap: 8px;
    --panel-radius: 16px;
  }

  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* room for the fixed nav (8 + 36) */
    padding: calc(var(--page-pad) + 36px) var(--page-pad) 0;
    margin-bottom: 40px;
  }
  .site-header__left { display: contents; }

  /* Pill nav, sticky, with a soft white fade underneath so content
     scrolling past it dissolves rather than cuts. */
  .nav {
    order: 1;
    position: fixed;
    top: var(--page-pad);
    left: var(--page-pad);
    right: var(--page-pad);
    z-index: 10;
    height: 36px;
    padding: 0 15px;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    font-size: 14px;
    background: var(--color-card);
    border-radius: 10px;
  }
  .nav::before,
  .nav::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--page-pad));
    right: calc(-1 * var(--page-pad));
    pointer-events: none;
    z-index: -1;
  }
  .nav::before { top: calc(-1 * var(--page-pad)); height: calc(100% + var(--page-pad)); background: var(--color-bg); }
  .nav::after  { top: 100%; height: 57px; background: linear-gradient(var(--color-bg), rgba(255, 255, 255, 0)); }

  .logo { order: 2; margin-top: 40px; }
  .logo img { width: 50px; height: 55px; }

  .tagline {
    order: 3;
    margin-top: 44px;
    max-width: 361px;
    font-size: 20px;
    line-height: 1;
    text-align: center;
  }

  .work { display: block; padding: 0 var(--page-pad) var(--page-pad); }
  .aside { display: none; }
  .content { gap: var(--gap); }

  .panel {
    aspect-ratio: 377 / 624;
    max-height: none;
    padding: 8px;
  }
  .panel__card { position: relative; z-index: 1; }

  /* Panels without a portrait crop yet show the landscape image whole,
     sitting in the lower part of the panel under the card. Panels that
     have one (data-mobile) fill edge to edge. */
  .panel__media img {
    object-fit: contain;
    object-position: center 62%;
  }
  .panel[data-mobile] .panel__media img {
    object-fit: cover;
    object-position: center;
  }
  .stepper { right: 16px; bottom: 16px; }
  .toast { bottom: 16px; font-size: 13px; }

  .panel__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f5f5f5;
  }
  .panel__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
  }
  .panel__icon img { width: 56px; height: 56px; }
  .panel__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .panel__title { font-size: 14px; color: var(--color-text); }
  .panel__desc  { font-size: 13px; color: var(--color-muted); }

  .site-footer { padding: 0 var(--page-pad) var(--page-pad); }
  .site-footer__inner { padding: 32px 24px; font-size: 14px; }
  .site-footer__row { flex-direction: column; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .js .panel > .carousel,
  .js .panel > .panel__media { opacity: 1; }
}