/* ===================================================================
   LOCKUP WORLD — post-ENTER world (welcome, studio, store, about, project pages)
   Structural reference: site/_geekfiles_study/REFERENCE.md
   - Geekfiles structure: 4-col flush 245x184 grid, hover scrim + 33px label,
     hard-cut MPA, monospace, generous white project rooms.
   - Lockup chrome: Courier mono, baby-blue #89CFF0 accent, #0A0A0A black canvas
     (welcome/studio/store), #FFFFFF white canvas (about/project pages).
   =================================================================== */

:root {
  --bg-dark:        #0A0A0A;
  --bg-light:       #FFFFFF;
  --ink-on-dark:    #F4F0E6;
  --ink-on-light:   #0A0A0A;
  --accent:         #89CFF0;
  --pink:           #F4B6C2;
  --mute:           #6B6660;
  --mute-on-light:  #6B6660;
  --scrim:          rgba(0,0,0,0.6);
  --label-shadow:   rgba(33,33,33,0.36);
  --mono:           "Courier New", Courier, "Courier Prime", monospace;
}

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

html, body {
  min-height: 100%;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

body.page-light { background: var(--bg-light); color: var(--ink-on-light); }

/* ── Film grain (fixed) ──────────────────────────────────────────── */
.lk-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025; }
.lk-grain::after { content: ''; position: absolute; inset: 0; filter: url(#svgGrain); background: #6a6a6a; }
body.page-light .lk-grain { opacity: 0.018; }
body.page-light .lk-grain::after { background: #cccccc; }

/* ── Top chrome (logo + clock + nav) ─────────────────────────────── */
.lk-chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 22px 40px 12px;
  text-align: center;
  pointer-events: none;
  /* Stack: logo dead centre, nav directly underneath. No bg scrim —
     text-shadow on the children carries legibility over busy images. */
}
.lk-chrome > * { pointer-events: auto; }
/* Brightened logo + heavy halo stack so it pops over any tile image */
.lk-chrome .lk-mark img {
  filter:
    brightness(1.25) saturate(1.05)
    drop-shadow(0 0 20px rgba(0,0,0,0.95))
    drop-shadow(0 0 8px  rgba(0,0,0,1))
    drop-shadow(0 0 2px  rgba(0,0,0,1));
}
.lk-chrome .lk-mark { display: inline-block; }
.lk-chrome .lk-mark img {
  display: block; margin: 0 auto;
  width: 80px; height: 80px; object-fit: contain;
}
body.page-light .lk-chrome .lk-mark img { filter: brightness(0) saturate(100%); animation: none; }

.lk-clock {
  margin-top: 14px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mute);
}
.lk-clock .ink { color: var(--accent); }
body.page-light .lk-clock .ink { color: var(--ink-on-light); }

.lk-nav {
  display: block;
  margin-top: 14px;
  font-size: 14px; letter-spacing: 0.40em; text-transform: uppercase;
  line-height: 1;
  text-align: center;
}
.lk-nav a {
  margin: 0 16px;
  padding: 10px 6px;
  display: inline-block;
  font-weight: 600;
  /* Same chrome/mercury gradient as the ENTER button on the gate page —
     bright top highlight + darker mid + bright lower edge for chrome feel. */
  background: linear-gradient(180deg,
    #E8ECF0 0%,
    #FFFFFF 22%,
    #B8BDC2 48%,
    #777E85 70%,
    #D5DADF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* drop-shadow stack instead of text-shadow (text-shadow doesn't render on
     background-clip:text). Keeps the heavy legibility halo over photos. */
  filter:
    drop-shadow(0 0 14px rgba(0,0,0,1))
    drop-shadow(0 0 6px  rgba(0,0,0,1))
    drop-shadow(0 1px 2px rgba(0,0,0,1));
  transition: filter .12s linear;
}
.lk-nav a:hover, .lk-nav a.active {
  filter:
    drop-shadow(0 0 14px rgba(0,0,0,1))
    drop-shadow(0 0 8px  rgba(137,207,240,0.45))
    drop-shadow(0 1px 2px rgba(0,0,0,1));
}
body.page-light .lk-nav a { color: var(--mute-on-light); }
body.page-light .lk-nav a:hover, body.page-light .lk-nav a.active {
  color: var(--accent);
  text-shadow: 3px 3px 19px rgba(0,0,0,0.06);
}

/* Shimmer removed — Fraser wanted a static logo. */

/* ── Eyebrow ──────────────────────────────────────────────────── */
.lk-eyebrow {
  margin: 56px 0 18px;
  text-align: center;
  font-size: 10.5px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--mute);
}
body.page-light .lk-eyebrow { color: var(--mute-on-light); }

/* ── 4-column flush gallery (welcome, studio, store) ─────────── */
.lk-grid {
  width: 100vw; max-width: 100vw;
  height: 100vh; min-height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  /* Explicit equal-size cells: every column = exactly 20vw, every row = exactly
     33.333vh. Eliminates any 1fr-distribution mismatch where one column ends
     up 1px wider than the others on odd viewport widths. */
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(3, calc(100vh / 3));
  gap: 0;
  row-gap: 0;
  column-gap: 0;
  line-height: 0;
  background: #000;
  justify-content: stretch;
}
.lk-tile {
  position: relative; display: block;
  /* Explicit dimensions match the grid track exactly — no inheritance/fallback
     so every tile is truly the same size. */
  width: 20vw;
  height: calc(100vh / 3);
  overflow: hidden;
  cursor: pointer;
  background: #0F0F12;
}
.lk-tile-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition:
    transform .4s cubic-bezier(0.3, 0.13, 0.12, 1),
    filter   .5s ease,
    opacity  .5s ease;
}
.lk-tile-scrim {
  position: absolute; inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.lk-tile-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 33px; line-height: 0.88em; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 1px 0 6px var(--label-shadow);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .4s ease,
    transform .4s cubic-bezier(0.3, 0.13, 0.12, 1);
  pointer-events: none;
}
/* Hover-reveal title stays hidden (Fraser doesn't want the label burst).
   The scrim and hover effect are removed — images show full-bright at all times,
   no overlay, no tap-state flicker on mobile. */
.lk-tile-label { display: none !important; }
.lk-tile-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* Placeholder tile (no image; subtle brand glow) */
.lk-tile.lk-tile-placeholder .lk-tile-img {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(137,207,240,0.12), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(244,182,194,0.10), transparent 55%),
    #0E0E12;
}
.lk-tile.lk-tile-placeholder .lk-tile-img::after {
  content: '';
  position: absolute; inset: 50% 50% auto auto;
  width: 36px; height: 36px;
  transform: translate(50%, -50%);
  border: 1px solid rgba(137,207,240,0.35);
  border-radius: 50%;
}


/* ── Mobile reflow ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .lk-grid {
    grid-template-columns: repeat(3, calc(100vw / 3));
    grid-template-rows: repeat(5, calc(100vh / 5));
    width: 100vw;
  }
  .lk-tile { width: calc(100vw / 3); height: calc(100vh / 5); }
  .lk-tile-label { font-size: 24px; }
  .lk-chrome { padding: calc(24px + env(safe-area-inset-top)) 20px 6px; }
  /* On mobile, swap visual positions of tiles 2 and 3 so the chrome
     (logo + nav) sits over a tile that's friendlier for the brushed-steel
     legibility halo. Source order stays the same; only the grid placement
     is reordered. */
  .lk-tile:nth-child(2) { grid-column: 3; grid-row: 1; }
  .lk-tile:nth-child(3) { grid-column: 2; grid-row: 1; }
}
@media (max-width: 480px) {
  .lk-grid {
    grid-template-columns: repeat(3, calc(100vw / 3));
    grid-template-rows: repeat(5, calc(100vh / 5));
  }
  .lk-tile { width: calc(100vw / 3); height: calc(100vh / 5); }
  .lk-tile-label { font-size: 18px; }
  /* .lk-mark forced to block so the logo gets its own line. Hamburger sits
     directly below the logo, dropdown menu hidden until hamburger is tapped. */
  .lk-chrome .lk-mark { display: block; }

  .lk-nav { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; font-size: 13px; }
  .lk-nav a { margin: 0; padding: 8px 6px; }
  /* Same swap on phone — tile 3 takes col 2 row 1, tile 2 takes col 3 row 1 */
  .lk-tile:nth-child(2) { grid-column: 3; grid-row: 1; }
  .lk-tile:nth-child(3) { grid-column: 2; grid-row: 1; }
}

/* ── Footer ────────────────────────────────────────────────────── */
.lk-foot {
  margin-top: 80px; padding: 24px 32px;
  text-align: center;
  font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mute);
}
.lk-foot a { color: inherit; transition: color .08s linear; }
.lk-foot a:hover { color: var(--accent); }
body.page-light .lk-foot { color: var(--mute-on-light); }

/* =================================================================
   PROJECT PAGES — white canvas, < BACK, title + credit, media body
   ================================================================= */
.lk-project { background: var(--bg-light); color: var(--ink-on-light); min-height: 100vh; padding-bottom: 80px; }

.lk-project .lk-mark-top { padding: 28px 40px 0; text-align: center; }
.lk-project .lk-mark-top img {
  display: inline-block;
  width: 80px; height: 80px; object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.lk-project .lk-back {
  display: block;
  width: 980px; max-width: calc(100% - 80px);
  margin: 32px auto 0;
  font-size: 18px; letter-spacing: 0.05em; line-height: normal;
  color: var(--ink-on-light);
  text-decoration: none;
  transition: color .08s linear;
}
.lk-project .lk-back:hover { color: var(--accent); }

.lk-project .lk-head {
  width: 980px; max-width: calc(100% - 80px);
  margin: 64px auto 0;
  text-align: center;
}
.lk-project .lk-head h1 {
  font-size: 22px; letter-spacing: 0.05em;
  font-weight: 400; line-height: normal;
  text-transform: uppercase;
}
.lk-project .lk-head .lk-credit {
  display: block;
  margin-top: 0;
  font-size: 22px; letter-spacing: 0.05em;
  font-weight: 400; line-height: normal;
  text-transform: uppercase;
}

/* Photo wall: 2-col flush 488x325 */
.lk-project .lk-photos {
  width: 976px; max-width: 100%;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 488px);
  gap: 0;
  justify-content: center;
}
.lk-project .lk-photo {
  position: relative;
  display: block;
  width: 488px; height: 325px;
  overflow: hidden;
  background: #f4f4f4 center/cover no-repeat;
  cursor: zoom-in;
}
.lk-project .lk-photo .lk-photo-scrim {
  position: absolute; inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.lk-project .lk-photo:hover .lk-photo-scrim { opacity: 1; }

/* Video stage: 16:9 black on white */
.lk-project .lk-video {
  width: 980px; max-width: 100%;
  margin: 64px auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
}
.lk-project .lk-video video,
.lk-project .lk-video iframe {
  width: 100%; height: 100%; display: block; border: 0;
}
.lk-project .lk-video.lk-video-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(244,240,230,0.45);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
}

@media (max-width: 980px) {
  .lk-project .lk-mark-top { padding: 24px 20px 0; }
  .lk-project .lk-back { max-width: calc(100% - 40px); margin-top: 24px; }
  .lk-project .lk-head { max-width: calc(100% - 40px); margin-top: 48px; }
  .lk-project .lk-photos { grid-template-columns: 1fr; width: 100%; }
  .lk-project .lk-photo { width: 100%; height: auto; aspect-ratio: 488 / 325; }
}

/* =================================================================
   ABOUT PAGE — white canvas, two-column body
   ================================================================= */
.lk-about-body {
  width: 980px; max-width: calc(100% - 80px);
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.lk-about-body .lk-bio { font-size: 14px; line-height: 1.55; letter-spacing: 0.05em; }
.lk-about-body .lk-bio h2 { font-size: 14px; letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; text-align: center; margin-bottom: 14px; }
.lk-about-body .lk-bio .lk-bio-tbd { color: var(--mute-on-light); }
.lk-about-body .lk-bio p { margin-bottom: 1.1em; }
.lk-about-body .lk-bio .lk-bio-clients h3 { margin-top: 28px; font-size: 14px; letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; text-align: center; }
.lk-about-body .lk-bio .lk-bio-clients p { text-align: center; }
.lk-about-body .lk-portrait {
  width: 100%; aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(137,207,240,0.12), transparent 60%),
    radial-gradient(80% 80% at 80% 30%, rgba(244,182,194,0.10), transparent 60%),
    #f6f6f6;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.lk-about-body .lk-portrait img {
  width: 60%; height: auto; max-height: 60%;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
}
@media (max-width: 720px) {
  .lk-about-body { grid-template-columns: 1fr; max-width: calc(100% - 40px); margin-top: 48px; }
  .lk-about-body .lk-portrait { order: -1; max-width: 280px; margin: 0 auto; }
}