/* FM_ARCHIVE internal page system */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0,0,0,.42);
  --line: rgba(0,0,0,.18);
  --hard-line: rgba(0,0,0,.88);
  --mono: "IBM Plex Mono", "SFMono-Regular", "Roboto Mono", monospace;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg) !important; color: var(--fg) !important; font-family: var(--sans) !important; cursor: none !important; overflow-x: hidden; }
body.fm-internal { min-height: 100vh; padding: 18px; }
a, button, input, textarea { cursor: none !important; }
a { color: inherit !important; text-decoration: none !important; }
img { max-width: 100%; display: block; filter: grayscale(1); }

body.fm-internal::before {
  content: "FM_ARCHIVE / INTERNAL";
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 999;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

body.fm-internal::after {
  content: "A archive / Esc back";
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  text-align: right;
}

body.archive-mode *:not(#fm-cursor):not(#fm-cursor *) { opacity: 0 !important; }
body.archive-mode::before { opacity: 1 !important; content: "FM_ARCHIVE"; font-family: var(--sans); font-size: clamp(60px, 13vw, 200px); line-height: .75; letter-spacing: -.095em; color: var(--fg); top: 50%; transform: translateY(-50%); }

.project-container, .works-container, .contact-form, main, section { position: relative; z-index: 2; }

.project-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 15vh 0 22vh !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw) !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  align-items: start !important;
}

.project-title, h1.project-title, .archive-heading {
  grid-column: 1 / -1 !important;
  position: static !important;
  font-family: var(--sans) !important;
  font-size: clamp(58px, 11.2vw, 170px) !important;
  line-height: .78 !important;
  letter-spacing: -.09em !important;
  text-transform: uppercase !important;
  font-weight: 620 !important;
  color: var(--fg) !important;
  margin: 0 0 11vh !important;
  max-width: 11ch !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.project-image {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-height: 220px !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-top: 1px solid var(--hard-line) !important;
  border-bottom: 1px solid var(--hard-line) !important;
  padding: 18px 0 !important;
  margin: 0 0 10vh !important;
  background: transparent !important;
}

.project-description, .info-text, p, figcaption, label {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: var(--fg) !important;
  text-transform: uppercase;
}

.project-description {
  grid-column: 2 !important;
  grid-row: 2 !important;
  white-space: pre-line !important;
  max-width: 74ch !important;
  margin: 0 0 12vh !important;
  border-top: 1px solid var(--hard-line) !important;
  padding-top: 18px !important;
}

.project-description strong, .info-text strong {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: clamp(34px, 5vw, 72px) !important;
  line-height: .84 !important;
  letter-spacing: -.065em !important;
  text-transform: uppercase !important;
  font-weight: 620 !important;
  margin: 36px 0 12px !important;
}
.project-description strong:first-child { margin-top: 0 !important; }

.additional-images {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 2vh 0 12vh !important;
}

.additional-image { margin: 0 !important; border-top: 1px solid var(--hard-line) !important; padding-top: 8px !important; align-items: stretch !important; text-align: left !important; }
.image-frame { width: 100% !important; height: auto !important; aspect-ratio: auto !important; background: transparent !important; border: 0 !important; overflow: visible !important; display: block !important; }
.additional-image img { width: 100% !important; height: auto !important; object-fit: contain !important; border: 0 !important; }
figcaption { margin-top: 8px !important; color: var(--muted) !important; }

.image-archive {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34vw) !important;
  gap: 18px !important;
  margin: 2vh 0 12vh !important;
  border-top: 1px solid var(--hard-line) !important;
  padding-top: 18px !important;
}
.image-stage { min-height: 60vh; display: flex; flex-direction: column; justify-content: flex-start; }
#archive-preview, .archive-preview { width: 100% !important; max-height: 78vh !important; object-fit: contain !important; object-position: top left !important; transition: opacity .12s linear; }
#archive-caption, .archive-caption { margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; }
.image-index { border-top: 1px solid var(--hard-line); }
.image-index-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  align-items: baseline !important;
  gap: 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  text-align: left !important;
}
.image-index-row span { font-family: var(--mono); font-size: 10px; }
.image-index-row strong { font-family: var(--sans); font-size: clamp(22px, 2.6vw, 44px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; font-weight: 620; }
.image-index-row.is-active, .image-index-row:hover { color: var(--fg) !important; }

#back-link, .cv-button {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 1000 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.cv-button {
  top: 48px !important;
  color: var(--fg) !important;
  border: 1px solid var(--hard-line) !important;
  padding: 8px 10px !important;
  background: var(--bg) !important;
}
#back-link:hover, .cv-button:hover { color: var(--fg) !important; opacity: .64; }

#layout-footer, #custom-cursor, .date-time, #layout-text, #cursor-position { display: none !important; }

#fm-cursor {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transform: translate(12px, 12px);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  color: var(--fg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  padding: 6px 7px;
  white-space: nowrap;
}
#fm-cursor::before { content: ""; position: absolute; left: -14px; top: -14px; width: 8px; height: 8px; border: 1px solid var(--fg); border-radius: 50%; background: var(--fg); }

.works-container {
  width: 100% !important;
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 18vh 0 20vh !important;
  border-top: 1px solid var(--hard-line);
}

.project-square {
  width: 100% !important;
  height: auto !important;
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline !important;
  gap: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hard-line) !important;
  padding: 12px 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.project-square img { display: none !important; }
.project-overlay { order: 1; position: static !important; background: transparent !important; display: block !important; color: var(--fg) !important; pointer-events: none !important; }
.project-overlay a, .project-overlay span { color: var(--fg) !important; font-family: var(--sans) !important; font-size: clamp(34px, 7vw, 110px) !important; line-height: .8 !important; letter-spacing: -.075em !important; text-transform: uppercase !important; font-weight: 600 !important; }
.archive-row-meta { order: 2; font-family: var(--mono) !important; font-size: 10px !important; color: var(--muted) !important; text-transform: uppercase; }
.project-square:hover { opacity: .64; }

.contact-form { max-width: 760px; border-top: 1px solid var(--hard-line); padding-top: 18px; }
input, textarea, button { width: 100%; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hard-line) !important; color: var(--fg) !important; font-family: var(--mono) !important; font-size: 12px !important; padding: 10px 0 !important; border-radius: 0 !important; outline: none !important; }
button { text-align: left; text-transform: uppercase; }
#gotcha-overlay { background: var(--bg) !important; color: var(--fg) !important; font-family: var(--sans) !important; }

@media (max-width: 860px) {
  body.fm-internal { padding: 12px !important; }
  body.fm-internal::before { top: 12px; left: 12px; font-size: 9px; }
  body.fm-internal::after { display: none !important; }
  .project-container { display: block !important; padding: 15vh 0 18vh !important; }
  .project-title { font-size: clamp(48px, 23vw, 112px) !important; line-height: .78 !important; letter-spacing: -.085em !important; max-width: 7.5ch !important; margin-bottom: 8vh !important; }
  .project-image { width: 100% !important; max-height: none !important; min-height: 0 !important; margin: 0 0 8vh !important; padding: 12px 0 !important; }
  .project-description { margin: 0 0 9vh !important; max-width: none !important; }
  .project-description strong { font-size: clamp(38px, 15vw, 76px) !important; }
  .additional-images { grid-template-columns: 1fr !important; gap: 14px !important; }
  .image-archive { display: block !important; margin-top: 8vh !important; }
  .image-stage { min-height: 0; margin-bottom: 18px; }
  #archive-preview, .archive-preview { max-height: none !important; }
  .image-index-row { grid-template-columns: 34px 1fr !important; }
  .image-index-row strong { font-size: clamp(28px, 11vw, 52px); }
  .project-square { grid-template-columns: 1fr !important; min-height: 70px !important; }
  .project-overlay span { font-size: clamp(38px, 15vw, 84px) !important; }
  .archive-row-meta { display: none !important; }
  #back-link { top: 12px !important; right: 12px !important; font-size: 9px !important; }
  .cv-button { position: static !important; display: inline-block !important; margin: 16px 0 40px !important; }
  #fm-cursor { display: none !important; }
}