/* Formula Lab Gallery v3.1.2 — public gallery components. */
@import url("./lab-tokens.css");

:root {
  --v3-paper: #fff;
  --v3-panel: #fff;
  --v3-stage: #fff;
  --v3-ink: #000;
  --v3-muted: #5c5c5c;
  --v3-line: #dedede;
  --v3-line-strong: #a8a8a8;
  --v3-accent: #000;
  --v3-accent-deep: #000;
  --v3-font: "Segoe UI Variable", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  --v3-font-data: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--v3-stage); }
body {
  min-width: 320px;
  margin: 0;
  background-color: var(--v3-stage);
  background-image:
    linear-gradient(to right, rgb(0 0 0 / .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 0 0 / .055) 1px, transparent 1px),
    linear-gradient(to right, rgb(0 0 0 / .13) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 0 0 / .13) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  color: var(--v3-ink);
  font-family: var(--v3-font);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--v3-accent-deep); outline-offset: 3px; }

.lab-site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 clamp(18px, 3.5vw, 52px);
  border-bottom: 1px solid var(--v3-line);
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(14px);
}

.lab-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.lab-site-brand i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v3-accent-deep);
}

.lab-site-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  color: var(--v3-muted);
  font: 600 11.5px/1 var(--v3-font-data);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lab-site-links a { text-decoration: none; transition: color var(--lab-duration-feedback) var(--lab-ease-out); }

main {
  width: min(1380px, calc(100% - clamp(28px, 5vw, 76px)));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) 0 clamp(84px, 10vw, 144px);
}

.lab-gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
  gap: clamp(56px, 9vw, 136px);
  align-items: end;
  min-height: min(660px, calc(100vh - 60px));
  padding: 0 clamp(0px, 3vw, 44px) clamp(88px, 10vw, 144px);
}

.lab-eyebrow {
  margin: 0 0 clamp(30px, 4vw, 54px);
  color: var(--v3-accent-deep);
  font: 650 10px/1 var(--v3-font-data);
  letter-spacing: .14em;
}

.lab-gallery-intro h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.2rem, 5.2vw, 6.5rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.lab-gallery-lead {
  max-width: 34em;
  margin: clamp(28px, 3vw, 42px) 0 0;
  color: var(--v3-muted);
  font-size: clamp(.95rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.75;
}

.lab-gallery-start {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-width: 214px;
  min-height: 48px;
  margin-top: 36px;
  padding: 0 16px;
  border: 1px solid var(--v3-ink);
  border-radius: 4px;
  background: var(--v3-ink);
  color: var(--v3-panel);
  font-size: 12px;
  font-weight: 640;
  text-decoration: none;
  transition: background var(--lab-duration-feedback) var(--lab-ease-out), color var(--lab-duration-feedback) var(--lab-ease-out);
}

.lab-gallery-start span { font: 500 16px/1 var(--v3-font); transition: transform var(--lab-duration-feedback) var(--lab-ease-out); }

.lab-gallery-projects { scroll-margin-top: 28px; }
.lab-gallery-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--v3-ink);
}

.lab-gallery-section-head > div { display: flex; align-items: baseline; gap: 20px; }
.lab-gallery-section-head span { color: var(--v3-accent-deep); font: 650 10px/1 var(--v3-font-data); letter-spacing: .08em; }
.lab-gallery-section-head h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 650; line-height: 1; letter-spacing: -.035em; }
.lab-gallery-section-head p { margin: 0; color: var(--v3-muted); font-size: 11px; font-weight: 500; }

.lab-gallery-list {
  margin-top: 28px;
  border-top: 1px solid var(--v3-ink);
  border-right: 1px solid var(--v3-ink);
  border-left: 1px solid var(--v3-ink);
}

.lab-gallery-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .94fr) minmax(440px, 1.06fr);
  min-width: 0;
  border-bottom: 1px solid var(--v3-ink);
  background: rgb(255 255 255 / .96);
}

.lab-gallery-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-left: 1px solid var(--v3-line);
  background: var(--v3-ink);
}

.lab-gallery-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 8px solid transparent;
  pointer-events: none;
  transition: border-color var(--lab-duration-feedback) var(--lab-ease-out);
}

.lab-gallery-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lab-duration-drawer) var(--lab-ease-out), filter var(--lab-duration-feedback) var(--lab-ease-out);
}

.lab-gallery-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--v3-line);
  color: var(--v3-muted);
  font: 600 9px/1 var(--v3-font-data);
  letter-spacing: .07em;
}

.lab-gallery-card__meta > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.lab-gallery-card__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--v3-ink); }

.lab-gallery-card__copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(34px, 4.8vw, 68px); }
.lab-gallery-card h3 { max-width: 13ch; margin: clamp(42px, 5vw, 72px) 0 0; font-size: clamp(2rem, 3.7vw, 3.8rem); font-weight: 650; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.lab-gallery-card p { max-width: 38em; min-height: 3em; margin: 18px 0 0; color: var(--v3-muted); font-size: 12px; font-weight: 500; line-height: 1.65; }

.lab-gallery-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 34px; }
.lab-gallery-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--v3-line);
  border-radius: 4px;
  background: transparent;
  color: var(--v3-ink);
  font-size: 11px;
  font-weight: 640;
  text-decoration: none;
  transition: border-color var(--lab-duration-feedback) var(--lab-ease-out), background var(--lab-duration-feedback) var(--lab-ease-out), color var(--lab-duration-feedback) var(--lab-ease-out);
}

.lab-gallery-action--primary { border-color: var(--v3-ink); background: var(--v3-ink); color: var(--v3-panel); }
.lab-gallery-card__key { margin-left: auto; color: var(--v3-muted); font: 600 9px/1 var(--v3-font-data); white-space: nowrap; }

.lab-gallery-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(18px, 3.5vw, 52px);
  border-top: 1px solid var(--v3-line);
  background: rgb(255 255 255 / .94);
  color: var(--v3-muted);
  font: 600 9px/1.5 var(--v3-font-data);
  letter-spacing: .06em;
}

@media (hover: hover) and (pointer: fine) {
  .lab-site-links a:hover { color: var(--v3-ink); }
  .lab-gallery-start:hover { background: var(--v3-accent-deep); color: var(--v3-panel); }
  .lab-gallery-start:hover span { transform: translateY(3px); }
  .lab-gallery-card__media:hover::after { border-color: rgb(0 0 0 / .72); }
  .lab-gallery-card__media:hover img { transform: scale(1.018); filter: saturate(1.04); }
  .lab-gallery-action:not(.lab-gallery-action--primary):hover { border-color: var(--v3-ink); background: var(--v3-paper); }
  .lab-gallery-action--primary:hover { background: var(--v3-ink); border-color: var(--v3-ink); }
}

@media (max-width: 860px) {
  .lab-gallery-intro { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-bottom: 96px; }
  .lab-gallery-intro__copy { max-width: 720px; }
  .lab-gallery-card { grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); }
  .lab-gallery-card__copy { padding: clamp(28px, 4vw, 42px); }
}

@media (max-width: 680px) {
  body { background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px; }
  .lab-site-header { min-height: 56px; padding-inline: 14px; }
  .lab-site-brand { gap: 10px; }
  .lab-site-links { gap: 14px; }
  .lab-site-links a:first-child, .lab-site-links a:last-child { display: none; }
  main { width: calc(100% - 28px); padding-top: 60px; padding-bottom: 76px; }
  .lab-gallery-intro { gap: 58px; padding: 0 0 76px; }
  .lab-gallery-intro h1 { font-size: clamp(2.7rem, 11.5vw, 4.25rem); line-height: 1.01; }
  .lab-gallery-lead { line-height: 1.65; }
  .lab-gallery-section-head { align-items: start; flex-direction: column; gap: 14px; }
  .lab-gallery-section-head p { line-height: 1.5; }
  .lab-gallery-list { margin-top: 18px; }
  .lab-gallery-card { grid-template-columns: 1fr; }
  .lab-gallery-card__copy { min-height: 330px; padding: 28px 20px 24px; }
  .lab-gallery-card__media { border-top: 1px solid var(--v3-line); border-left: 0; }
  .lab-gallery-card h3 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
  .lab-gallery-card p { min-height: 0; }
  .lab-gallery-card__actions { margin-top: 24px; }
  .lab-gallery-card__key { font-size: 8px; }
  .lab-gallery-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lab-site-links a,
  .lab-gallery-start,
  .lab-gallery-start span,
  .lab-gallery-card__media::after,
  .lab-gallery-card__media img,
  .lab-gallery-action { transition: none; }
}