/* ==========================================================
   Project detail pages — extends style.css
   ========================================================== */

.project-eyebrow{
  font-size: 12px; letter-spacing:.16em; color: var(--fg-dim);
  margin-bottom: 18px;
}
/* the eyebrow label sits in normal document flow above the gallery/facts
   split — it clears the fixed header on load, then simply scrolls away
   with the page like the header does, instead of staying pinned (unlike
   the title, which now lives inside .project-facts — see below). Scoped
   to a direct child of <main> so it doesn't affect the unrelated
   .eye-hero .project-eyebrow on the interactive-eye page. */
main > .project-eyebrow{
  padding: 160px clamp(20px,4vw,56px) 0;
}
.project-title{
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  /* the sidebar column is a fixed 340px, so this is sized for that —
     not viewport-relative like a hero headline would be. Wraps freely
     (no nowrap) since a title like "MKA — Interactive Storefront" needs
     two lines at this width regardless of font size. */
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
}

/* the title now lives permanently inside .project-facts (see the HTML —
   it's the first child of the <aside>), not as its own full-width bar
   above the gallery. .project-layout's align-items:start means it
   naturally lands level with the top of the first gallery image with no
   extra positioning needed. It scrolls and sticks as part of the same
   unit as the rest of the facts column (see .project-facts below);
   the flex column's own `gap` handles the spacing before Year/Role/Client. */

/* ---------- split layout: scrolling gallery (left) + a facts panel that
   stays pinned in place (right), inspired by jooeonpark.com/web/atopol —
   title, facts and body copy live together in their own sticky column so
   they stay on screen as one unit while only the gallery scrolls ---------- */
.project-layout{
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: start;
  gap: clamp(32px,5vw,72px);
  padding: 0 clamp(20px,4vw,56px) 120px;
}
.project-gallery-col{ min-width: 0; order: 1; }
.project-facts{
  position: sticky;
  /* sits right below the fixed header, which stays put (doesn't hide)
     on project pages — see .site-header in style.css */
  top: 90px;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.project-facts-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-facts-row{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: baseline;
}
.project-facts-row dt{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.project-facts-row dd{ font-size: 15px; }
.project-facts-body{
  max-width: 42ch;
  font-size: clamp(14px,1.1vw,16px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--fg-dim);
}
.project-facts-body strong{ color: var(--fg); font-weight: 500; }
.project-facts-next{
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.project-facts-next span{
  display: block;
  font-size: 11px; letter-spacing:.12em; color: var(--fg-dim);
  margin-bottom: 10px;
}
.project-facts-next a{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px,2vw,28px);
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.project-facts-next a:hover{ opacity: .6; }

@media (max-width: 900px){
  .project-layout{ grid-template-columns: 1fr; }
  /* .project-facts drops out of the layout entirely (display:contents)
     so its children — title, facts list, body, next-project link — join
     .project-gallery-col as direct items of .project-layout's single
     column and can be reordered independently. Without this, the title
     (now living inside .project-facts, see the HTML) would render after
     the entire gallery on mobile instead of before it. */
  .project-facts{
    position: static;
    display: contents;
  }
  .project-title-bar{ order: 0; }
  .project-gallery-col{ order: 1; }
  .project-facts-list,
  .project-facts-body,
  .project-facts-next{ order: 2; }
}

/* ---------- gallery: justified rows ----------
   A flex wrapper; js/gallery.js measures each item's real aspect ratio and
   writes an explicit width/height so every row shares one height and the
   widths fill the container exactly.

   This replaces a fixed 1fr 1fr grid. That grid gave every image the same
   cell, so portraits had to be either cropped or letterboxed inside a
   landscape-shaped box — the source of the ragged whitespace. Here a
   portrait is simply narrower than a landscape at the same height, which
   is why the two naturally end up side by side.

   Note there is no `aspect-ratio` on the items themselves: the inline one
   in the markup is the *input* the script reads, and the width/height it
   writes are what actually size the element. */
.project-gallery{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.project-gallery img,
.project-gallery video{
  display: block;
  object-fit: cover;
  background: var(--bg-soft);
  /* until the script runs (or if JS is off) items still lay out sensibly
     rather than collapsing */
  max-width: 100%;
}

/* Some images have to be seen whole: a map, a diagram, anything where a
   trimmed edge loses information. `contain` keeps the entire picture in
   frame, and the background is the page colour rather than the usual grey
   so the leftover space reads as margin instead of a visible letterbox.
   The row still fills its width; the frame simply gains space at the
   sides rather than the picture being cropped. Nothing is ever scaled
   past its natural size, since row heights sit well below these files'
   real dimensions. */
.project-gallery img.no-crop{
  object-fit: contain;
  background: var(--bg);
}
.project-gallery video{ cursor: pointer; }

/* No-JS / pre-layout fallback: honour each item's own inline aspect ratio
   at a readable width instead of stacking full-bleed. */
.project-gallery img:not([style*="width"]),
.project-gallery video:not([style*="width"]){
  width: min(100%, 460px);
  height: auto;
}

@media (max-width: 760px){
  /* tighter gutters on a phone; js/gallery.js reads this value back off the
     element so its row maths stays in step with whatever is set here */
  .project-gallery{ gap: 10px; }
}

/* ---------- interactive eye (MKA sub-page) ---------- */
.eye-hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 36px;
  padding: 160px clamp(20px,4vw,56px) 80px;
}
.eye-hero .project-eyebrow{ margin-bottom: 0; }
.eye-hero .project-title{ max-width: none; }
.eye-meta{
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  justify-content: center;
}

.eye{
  position: relative;
  width: min(420px, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--white), color-mix(in srgb, var(--grey) 18%, var(--white)) 55%, var(--grey) 100%);
  box-shadow: 0 50px 90px -30px color-mix(in srgb, var(--black) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--white) 5%, transparent);
  overflow: hidden;
}

.eye-iris-wrap{
  position: absolute;
  inset: 0;
  will-change: transform;
}

.eye-iris{
  position: absolute;
  top: 50%; left: 50%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 6%, transparent);
}

.eye-pupil{
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--black);
}

.eye-glint{
  position: absolute;
  top: 16%; left: 16%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}

.eye-caption{
  max-width: 420px;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* embedded Instagram posts — a curated selection using Instagram's own
   embed.js, which renders each blockquote into a live post card client-side.
   Sizing is left to Instagram (it reads the grid column's width on load and
   picks a size in its own supported 326–540px range), so the grid columns
   just need to land in that neighborhood on each breakpoint. */
.project-social{
  margin-top: 48px;
}
.project-social-intro{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 24px;
}
.project-social-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: stretch;
}
.project-social-grid blockquote.instagram-media{
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
@media (max-width: 900px){
  .project-social-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .project-social-grid{ grid-template-columns: 1fr; }
}
.project-social-link{
  display: inline-block;
  margin-top: 32px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--pink);
}
.project-social-link:hover{ opacity: .7; }