:root{
  --bg: #FFFFFF;
  --ink: #111111;
  --ink-soft: #767672;
  --tile: #D9D9D9;
  --line: #E6E6E3;
  --accent: #0084CF;

  --font-ui: 'Archivo', sans-serif;
  --font-mono: 'Martian Mono', monospace;

  --max: 1440px;
  --edge: 16px;
  --gutter: 16px;
  --nav-h: 48px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }

/* ---------- NAV ---------- */
/* Outer bar is edge-to-edge so the white background always fills the viewport;
   the inner wrapper is capped at the same max-width + padding as .work and
   .footer, so all three share the identical left/right edge on any screen size. */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: var(--bg);
}
.nav__inner{
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--edge);
}
.nav__name, .nav__link, .nav__info{
  font-weight: 600; /* unified semibold per request */
  font-size: 12px;
  text-transform: uppercase;
  transition: color .2s ease;
}
.nav__name{ justify-self: start; }
.nav__center{
  justify-self: center;
  display:flex; align-items:center; gap: 16px;
}
.nav__info{ justify-self: end; }
.nav__name:hover, .nav__link:hover, .nav__info:hover{ color: var(--accent); }

/* ---------- HERO ---------- */
.hero{
  padding-top: 129px;
  padding-bottom: 96px;
  padding-inline: var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 696px;
  margin-inline: auto;
  text-align: center;
}
.hero__title{
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  margin: 0;
}
.hero__cta{
  font-family: var(--font-mono);
  font-size: 12px;
  padding-inline: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__arrow{
  display: inline-block;
  transition: transform .25s ease;
}
.hero__cta:hover .hero__arrow{ transform: translateX(6px); }

/* ---------- WORK GRID ---------- */
.work{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.tile{
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 60px; /* breathing space below each photo */
  transition: transform .35s cubic-bezier(.16,1,.3,1); /* slide only, no shadow */
  background: var(--tile);
}
.tile:hover{
  transform: translateY(-8px);
}
.tile__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.t--h1{ aspect-ratio: 340 / 424; }
.t--h2{ aspect-ratio: 340 / 208; }
.t--h4{ aspect-ratio: 335 / 325; }

/* ---------- SECONDARY WORK ROW (website covers, home-05 / home-06) ---------- */
.work-secondary{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--edge);
  margin-top: 68px;  /* 60px tile margin-bottom above + 68px = 128px total gap, per Figma */
  margin-bottom: 128px;
  display: flex;
  align-items: center; /* vertical center, not top/bottom aligned */
  justify-content: center;
  gap: var(--gutter);
}
.tile-wide{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: block;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  background: var(--tile);
}
.tile-wide:hover{ transform: translateY(-8px); }
.tile-wide .tile__img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.t--h5{ aspect-ratio: 696 / 531; }
.t--h6{ aspect-ratio: 696 / 426; }

/* ---------- FOOTER (no hover effects) ---------- */
.footer{
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--edge);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.footer__uxlink{
  justify-self: start;
  font-weight: 500;
  font-size: 10px;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.footer__uxlink:hover{ color: var(--accent); }
.footer__email{
  justify-self: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.copy-toast{
  justify-self: center;
  grid-column: 2;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  position: absolute;
  left: 50%;
  translate: -50% 0;
}
.copy-toast.show{ opacity: .6; transform: translateY(0); }
.footer{ position: relative; }
.footer__rights{
  justify-self: end;
  font-weight: 500;
  font-size: 10px;
  margin: 0;
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px){
  :root{ --nav-h: 44px; }
  .nav__inner{ padding: 12px 16px; }
  .nav__center{ gap: 12px; }
  .nav__name, .nav__link, .nav__info{ font-size: 11px; }

  .hero{ padding-top: 88px; padding-bottom: 56px; max-width: 100%; }
  .hero__title{ font-size: 16px; }
  .hero__cta{ flex-wrap: wrap; justify-content: center; text-align: center; }

  .work{ grid-template-columns: 1fr; gap: 24px; }
  .tile{ margin-bottom: 40px; }
  .tile:hover{ transform: translateY(-4px); }

  .work-secondary{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 64px;
  }
  .tile-wide{ width: 100%; }
  .t--h5, .t--h6{ aspect-ratio: 4 / 3; }
  .tile-wide:hover{ transform: translateY(-4px); }

  .footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer__uxlink, .footer__email, .footer__rights{
    justify-self: unset;
    width: 100%;
  }
  .footer__email{ margin-top: 22px; } /* 10px flex gap + 22px = 32px total from UI/UX Portfolio link */
  .copy-toast{ position: static; translate: none; margin-top: 4px; }
}

/* ================================================================
   PROJECT PAGE (e.g. projects/buttered-flour.html)

   Structure: .pin-scene reserves vertical scroll runway. .pin-sticky
   (banner + gallery clip together) pins to the top of the viewport for
   that whole runway — so the banner text stays visible on screen the
   entire time, not just the photos. Only .hgallery-track inside actually
   moves, via a horizontal transform driven by scroll position.
   ================================================================ */
.pin-scene{
  position: relative;
}
.pin-sticky{
  position: sticky;
  top: 48px; /* clears the fixed nav */
  background: var(--bg);
  z-index: 1;
}
.project__top{
  padding-top: 48px;
  padding-inline: var(--edge);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gutter);
}
.project__col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project__index,
.project__tag{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
.project__title,
.project__desc{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: normal;
  margin: 0;
  max-width: 486px;
}
.project__subtitle{
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  margin: 0;
  color: #8E8E93;
}

.hgallery-clip{
  margin-top: 52px;
  height: 518px;
  overflow: hidden;
}
.hgallery-track{
  display: flex;
  gap: var(--gutter);
  padding-inline: var(--edge);
  height: 518px;
  width: max-content;
  will-change: transform;
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
}
.hg-item{
  position: relative;
  flex-shrink: 0;
  height: 518px;
  margin: 0;
  overflow: hidden;
  background: var(--tile);
}
.hg-caption{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(17, 17, 17, 0.6);
  padding: 5px 12px;
  border-radius: 20px;
}

.project__badge{
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 4px 12px;
}
.hg-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hg-w1{ width: 760px; }
.hg-w2{ width: 380px; }

.scroll-spacer{ width: 100%; }
.scroll-spacer--cta{ position: relative; }
.scroll-spacer__cta{
  position: absolute;
  right: var(--edge);
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.scroll-spacer__cta .arrow{ display: inline-block; transition: transform .25s ease; }
.scroll-spacer__cta:hover .arrow{ transform: translateX(6px); }

.project .footer{ margin-top: 0; }

@media (max-width: 720px){
  .pin-sticky{ position: static !important; }
  .pin-scene{ height: auto !important; }
  .project__top{
    grid-template-columns: 1fr;
    padding-top: 32px;
    gap: 28px;
  }
  .project__title, .project__desc{ font-size: 16px; max-width: 100%; }

  /* Horizontal pinned-scroll doesn't translate well to touch — fall back
     to a plain vertical stack of full-width images on mobile. !important
     throughout this block guards against any stale/cached JS still
     applying desktop inline styles (fixed heights, transforms) — CSS
     always wins here regardless of what JS did or didn't reset. */
  .hgallery-clip{ margin-top: 32px !important; height: auto !important; overflow: visible !important; }
  .hgallery-track{
    display: flex;
    flex-direction: column;
    width: auto !important;
    height: auto !important;
    padding-inline: var(--edge);
    transform: none !important;
  }
  .hg-item{ width: 100% !important; height: auto !important; }
  /* No forced aspect-ratio here — each image keeps its own native ratio
     on mobile (landscape screenshots stay landscape, portrait stays
     portrait), same fix already applied to the homepage grid. */
  .scroll-spacer{ display: none !important; height: 0 !important; }
  .scroll-spacer--cta{
    display: block !important;
    height: auto !important;
    padding: 32px var(--edge) 0;
    text-align: center;
  }
  .scroll-spacer--cta .scroll-spacer__cta{ position: static; display: inline-flex; }
}

/* ================================================================
   ABOUT PAGE (about.html)
   ================================================================ */
.about-top{
  padding-top: 129px;
  padding-inline: var(--edge);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gutter);
}
.about-top .project__col{ gap: 16px; }
.about-bio{
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}

.about-photos{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--edge);
  margin-top: 24px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.about-photos__frame{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  overflow: hidden;
}
.about-photos__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-cta{
  padding: 0 var(--edge) 96px;
  max-width: var(--max);
  margin-inline: auto;
}
.about-cta a{
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.about-cta a span.arrow{ display:inline-block; transition: transform .25s ease; }
.about-cta a:hover span.arrow{ transform: translateX(6px); }

/* ================================================================
   INFO+ PAGE (info.html)
   ================================================================ */
.info-top{
  padding-top: 129px;
  padding-inline: var(--edge);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gutter);
  padding-bottom: 64px;
}
.info-top .project__col{ gap: 16px; }
.info-top .project__desc{ max-width: 640px; }

.info-list{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.info-row{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--gutter);
  padding-block: 32px;
  border-top: 1px solid var(--line);
}
.info-row:last-child{ border-bottom: 1px solid var(--line); }
.info-row__label{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}
.info-row__content{ max-width: 640px; }

.info-services{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.info-services li{ display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.info-services li span:first-child{ font-weight: 500; }
.info-services li span:last-child{ color: var(--ink-soft); font-size: 13px; text-align: right; }
.info-services--plain li{ display: block; font-size: 15px; font-weight: 500; }

.info-status{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 20px;
}

.info-clients{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.info-clients li{ display: flex; justify-content: space-between; gap: 16px; }
.info-clients li span:first-child{ font-weight: 500; }
.info-clients li span:last-child{ color: var(--ink-soft); font-size: 13px; text-align: right; }

.info-contact-btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--ink); padding: 10px 16px; border-radius: 30px;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.info-contact-btn:hover{ background: var(--ink); color: #fff; }

@media (max-width: 720px){
  .about-top, .info-top, .info-row{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-top{ padding-top: 88px; }
  .info-top{ padding-top: 88px; }
  .about-photos{ grid-template-columns: 1fr; }
  .info-services li{ flex-direction: column; gap: 4px; }
  .info-services li span:last-child{ text-align: left; }
  .info-clients li{ flex-direction: column; gap: 4px; }
  .info-clients li span:last-child{ text-align: left; }
}

/* ---------- ABOUT: Experience list ---------- */
.about-experience{
  max-width: var(--max);
  margin-inline: auto;
  margin-top: 56px;
  padding: 0 var(--edge) 64px;
}
.about-experience__label{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  margin: 0 0 24px;
}
.exp-row{
  display: grid;
  grid-template-columns: 150px 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-block: 18px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.exp-row:last-child{ border-bottom: 1px solid var(--line); }
.exp-row__years{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.exp-row__org{ font-size: 15px; font-weight: 600; }
.exp-row__role{ font-size: 15px; color: var(--ink); }
.exp-row__tags{ font-size: 13px; color: var(--ink-soft); text-align: right; }

@media (max-width: 720px){
  .exp-row{ grid-template-columns: 1fr; gap: 4px; }
  .exp-row__tags{ text-align: left; }
}