/* ============================================================
   Project pages
   ------------------------------------------------------------
   Each page is a 1512px-wide canvas reproduced from Figma.
   Elements carry their Figma geometry in custom properties
   (--x/--y/--w/--h) and are placed absolutely; --u scales the
   whole canvas so the art direction survives any width.

   Below 768px the canvas collapses into a single-column
   reading flow: elements are written in reading order in the
   HTML, decoration is dropped, and images go full-bleed.
   ============================================================ */

.project { background: var(--paper); position: relative; }

/* In Figma the nav component sits *inside* each project frame, over the
   black hero band, and scrolls away with it — so the canvas starts at y=0.
   The design's black-on-black nav would be invisible there; the only change
   made is the ink colour. */
.project .nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  background: transparent;
}
.project .nav__inner { box-shadow: none; }
.project .nav__link { color: rgba(255, 255, 255, .55); }
.project .nav__link:hover,
.project .nav__link:focus-visible { color: #fff; }

.canvas {
  position: relative;
  width: 100%;
  max-width: min(100%, calc(1512 * var(--u)));
  height: calc(var(--H) * var(--u));
  margin-inline: auto;
  overflow: hidden;
}

.el {
  position: absolute;
  left:   calc(var(--x) * var(--u));
  top:    calc(var(--y) * var(--u));
  width:  calc(var(--w) * var(--u));
  margin: 0;
}
.el[style*='--h'] { height: calc(var(--h) * var(--u)); }

/* images ---------------------------------------------------- */
.ph {                       /* image frame */
  overflow: hidden;
  background: #ededed;
}
.ph picture { display: block; width: 100%; height: 100%; }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph--contain img { object-fit: contain; }
.r14 { border-radius: calc(14 * var(--u)); }
.r20 { border-radius: calc(20 * var(--u)); }

/* solid blocks ---------------------------------------------- */
.band-black { background: var(--ink); }

.note {                     /* dashed callout box */
  border: calc(1 * var(--u)) dashed #fff;
  border-radius: calc(20 * var(--u));
  background: transparent;
}
.note--red { border: calc(3 * var(--u)) dashed #ff0004; background: var(--paper); border-radius: 0; }

/* type ------------------------------------------------------ */
.t-tangerine {
  font-family: 'Tangerine', 'Apple Chancery', cursive;
  font-weight: 400;
  line-height: normal;
}
.t-serif {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: normal;
}
.t-sub {                    /* Inter Medium Italic 40 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: calc(40 * var(--u));
  line-height: normal;
  color: #fff;
}
.t-section {                /* the big pastel section headings */
  font-size: calc(82 * var(--u));
  font-weight: 700;
  line-height: normal;
}
.t-body {
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: normal;
}
.t-body-20 { font-size: calc(20 * var(--u)); font-weight: 400; line-height: normal; }
.t-cap {                    /* small grey captions */
  font-size: calc(24 * var(--u));
  font-weight: 600;
  color: #b3b3b3;
  line-height: normal;
}
.t-white  { color: #fff; }
.t-center { text-align: center; }
.t-body b, .t-body-20 b { font-weight: 700; }

.el ul { margin: 0; padding-inline-start: calc(36 * var(--u)); }

/* scroll reveal --------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(calc(18 * var(--u)));
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* hover polish on photography */
.ph--hover { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.ph--hover img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.ph--hover:hover img { transform: scale(1.035); }

/* back-to-projects footer ----------------------------------- */
.project-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(24 * var(--u));
  padding: calc(70 * var(--u)) var(--pad) calc(80 * var(--u));
  max-width: min(100%, calc(1512 * var(--u)));
  margin-inline: auto;
  font-size: calc(24 * var(--u));
  letter-spacing: var(--track-card);
}
.project-foot a { transition: color .18s ease; color: rgba(0,0,0,.5); }
.project-foot a:hover { color: var(--ink); }

/* ============================================================
   Mobile — the canvas becomes a reading flow
   ============================================================ */
@media (max-width: 767px) {
  .canvas {
    height: auto !important;
    max-width: 100%;
    padding: 0 0 calc(32 * var(--u));
    overflow: visible;
  }

  /* every positioned element becomes a block in reading order */
  .canvas .el {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .canvas > .el { margin: 0 0 calc(22 * var(--u)); }

  .d-only { display: none !important; }         /* pure decoration */

  /* --wm/--hm trim a slice on mobile, where a baked-in overlap would
     otherwise repeat text that now renders as its own block */
  .ph { aspect-ratio: var(--wm, var(--w)) / var(--hm, var(--h)); background: #ededed; min-height: 0; }
  .ph--top   img { object-position: center top; }
  .ph--left  img { object-position: left center; }
  .ph--right img { object-position: right center; }
  .ph picture,
  .ph img { height: 100%; min-height: 0; }

  /* the black hero band becomes a real block */
  .hero-band {
    background: var(--ink);
    padding: calc(76 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u)) !important;
    margin-bottom: calc(28 * var(--u)) !important;
  }
  .hero-band > .el { margin: 0 0 calc(18 * var(--u)); }
  .hero-band > .el:last-child { margin-bottom: 0; }

  .canvas > .el:not(.hero-band):not(.ph) { padding-inline: calc(24 * var(--u)); }
  .hero-band > .el:not(.ph) { padding-inline: 0; }

  .t-tangerine { font-size: calc(96 * var(--u)) !important; }
  .t-serif     { font-size: calc(52 * var(--u)) !important; }
  .t-hero-sans { font-size: calc(52 * var(--u)) !important; }
  .t-sub       { font-size: calc(20 * var(--u)); }
  .t-section   { font-size: calc(34 * var(--u)) !important; text-align: left; }
  .t-body,
  .t-body-20   { font-size: calc(15 * var(--u)); line-height: 1.5; }
  .t-cap       { font-size: calc(13 * var(--u)); margin-bottom: calc(6 * var(--u)) !important; }
  .t-center    { text-align: left; }
  .hero-band .t-center { text-align: left; }

  .note {
    padding: calc(18 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  .note--red { padding: calc(14 * var(--u)); }

  .project-foot { padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)); font-size: calc(14 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}