/* Visual Heights / visual.nyc — rebuilt from the Squarespace York template look.
   Colors + type sizes were measured on the live site (Sept 2026). Europa (Adobe font) -> Jost. */
:root {
  --bg: #606162;
  --fg: #ffffff;
  --accent: #f2ff80;       /* links, project titles, captions */
  --accent-soft: #ffffa8;  /* large H1 */
  --muted: rgba(255,255,255,.72);
  --font: 'Jost', 'Europa', 'Helvetica Neue', Arial, sans-serif;
  --max: 1180px;
  --gap: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: 300; font-size: 13px; line-height: 1.55; letter-spacing: .03em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }
img, video { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header { padding: 38px 0 28px; }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header nav a { font-size: 11px; text-transform: uppercase; letter-spacing: .24em; color: var(--accent); font-weight: 500; }
.site-header nav.right { text-align: right; }
/* Logo: the original York header scales it with the window (about 300px on a desktop screen). */
.site-header .logo img { width: clamp(110px, 21vw, 260px); height: auto; margin: 0 auto; }
@media (max-width: 640px) {
  .site-header .wrap { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .site-header nav.right { text-align: center; }
  .site-header .logo { order: -1; }
  .site-header .logo img { width: 130px; }
}

/* ---------- footer ---------- */
.site-footer { padding: 80px 0 40px; text-align: center; }
.site-footer .links a { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 3px; }
.site-footer .links span { color: var(--accent); font-size: 10px; }
.site-footer .social { margin: 26px 0 40px; display: flex; justify-content: center; gap: 8px; }
.site-footer .social a { width: 26px; height: 26px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.site-footer .social svg { width: 15px; height: 15px; fill: #2b2b2b; }
.site-footer .copy { font-size: 10px; color: #fff; letter-spacing: .04em; }

/* ---------- shared blocks ---------- */
.label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: #fff; margin: 0 0 8px; }
.label.center { text-align: center; }
h1.big { font-size: 20px; font-weight: 300; color: var(--accent); margin: 0 0 10px; line-height: 1.3; white-space: pre-line; }
h1.big.soft { color: var(--accent-soft); }
.center { text-align: center; }
.section-heading { text-align: center; margin: 56px 0 24px; }
.section-heading h1 { font-size: 20px; font-weight: 300; color: var(--accent); margin: 0; }
.section-heading .sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-top: 6px; }
.small-label { text-align: center; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin: 56px 0 26px; }
p { margin: 0 0 12px; }
.text { font-size: 12px; line-height: 1.65; white-space: pre-line; }

/* video */
.video { margin: 0; }
.video .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video.portrait .frame { aspect-ratio: 9 / 16; }
.video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-top: 10px; line-height: 1.5; }
.video-full { margin: 36px 0; }

/* grids */
.grid { display: grid; gap: var(--gap); margin: 24px 0; }
.grid.c1 { grid-template-columns: 1fr; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.grid.g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 600px) { .grid.g12 > * { grid-column: 1 / -1 !important; } }
@media (max-width: 900px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

  .stack { display: flex; flex-direction: column; gap: var(--gap); }

/* gallery thumbnails (4:3 crops like the original grid gallery, open full image).
   Tight 10px gutters match Squarespace, and the grid keeps 4 columns as long as each cell can stay
   at least 170px wide, so it only drops to 2 columns on phones instead of on zoomed or narrow windows. */
.gallery { gap: 10px; }
.gallery.c4 { grid-template-columns: repeat(auto-fill, minmax(max(170px, calc(25% - 7.5px)), 1fr)); }
.gallery.c3 { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc(33.333% - 6.7px)), 1fr)); }
@media (max-width: 420px) { .gallery.c4, .gallery.c3 { grid-template-columns: repeat(2, 1fr); } }
.gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #4d4e4f; }
.gallery img, .gallery video { width: 100%; height: 100%; object-fit: cover; }
.gallery.r-1x1 a { aspect-ratio: 1 / 1; }
.gallery.r-3x2 a { aspect-ratio: 3 / 2; }
.gallery.tall a { aspect-ratio: 3 / 4; }
.pages-index h1 { font-size: 20px; font-weight: 300; color: var(--accent); }
.pages-index table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 16px; }
.pages-index th, .pages-index td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.15); vertical-align: top; }
.pages-index .off { color: rgba(255,255,255,.4); }
.pages-index code { font-size: 11px; background: rgba(0,0,0,.2); padding: 1px 4px; }

/* ---------- home ---------- */
.home-tagline { max-width: 480px; margin: 20px auto 54px; font-size: 20px; font-weight: 400; line-height: 1.35; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 44px; margin-top: 26px; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card a { display: block; }
.card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #4d4e4f; }
.card .thumb img, .card .thumb video { width: 100%; height: 100%; object-fit: cover; }
.card .cap { text-align: center; margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--accent); text-transform: uppercase; letter-spacing: .01em; }
.card .sub { text-align: center; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-top: 4px; }

/* ---------- project pages ---------- */
.project-head { display: grid; gap: 40px; margin: 40px 0 34px; }
.project-head.cols2 { grid-template-columns: 1fr 1fr; }
.project-head.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.project-head.cols2 > div { text-align: center; }
.project-head.cols2 .text { text-align: left; }
@media (max-width: 760px) { .project-head.cols2, .project-head.cols3 { grid-template-columns: 1fr; gap: 26px; } }
.credits { text-align: center; margin: 70px auto 0; }
.credits .lines { display: inline-block; text-align: left; font-size: 11px; line-height: 1.75; margin-top: 12px; }
.narrow-img { max-width: 684px; margin: 36px auto; }

/* ---------- pitch pages ---------- */
.pitch-top { text-align: center; margin: 10px 0 40px; }
.pitch-top .email { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.pitch-top .email a { color: var(--accent); }
.pitch-top h1 { font-size: 20px; font-weight: 300; color: var(--accent); margin: 8px 0 0; line-height: 1.35; }
.pitch-top .tools { margin-top: 18px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; line-height: 1.9; }
.pitch-top .note { max-width: 560px; margin: 16px auto 0; font-size: 12px; line-height: 1.65; }
.pitch-top .top-heading { font-size: 12px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 20px; }
.welcome { max-width: 760px; margin: 30px auto 10px; text-align: left; }
.welcome h3 { font-size: 20px; font-weight: 300; color: var(--accent); margin: 0 0 12px; }
.welcome p { font-size: 12px; line-height: 1.7; }
.welcome .btn { display: inline-block; margin-top: 8px; padding: 10px 18px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.welcome .btn:hover { background: var(--accent); color: #333; }
.press-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 700px; margin: 30px auto; font-size: 12px; line-height: 2; }
@media (max-width: 600px) { .press-cols { grid-template-columns: 1fr; } }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 3fr 4fr 5fr; gap: 34px; margin: 26px 0 40px; align-items: start; /* white photo card ends at its caption instead of stretching to the tallest column */ }
/* Narrow windows / phones: stack the three columns, but keep the portrait card at a sensible size
   instead of letting it fill the whole screen width. */
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 30px; } .about .photo { width: 100%; max-width: 260px; } }
.about .photo { background: #fff; color: #222; }
.about .lines a { color: var(--accent); }
.about .lines a:hover { color: #fff; }
.about .photo img { width: 100%; filter: grayscale(1); }
.about .photo .cap { padding: 16px 18px; font-size: 13px; font-weight: 400; line-height: 1.4; }
.about h1 { font-size: 20px; font-weight: 300; color: var(--accent); margin: 0 0 12px; }
.about p { font-size: 12px; line-height: 1.7; }
.about .email { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 18px; display: block; }
.about .social { display: flex; gap: 8px; margin-bottom: 26px; }
.about .social a { width: 26px; height: 26px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.about .social svg { width: 15px; height: 15px; fill: #2b2b2b; }
.about .label { margin-top: 22px; }
.about .lines { font-size: 12px; line-height: 1.7; white-space: pre-line; }
.about .lines.accent { color: var(--accent); }

/* ---------- ai art ---------- */
.ai-intro { text-align: center; margin: 26px 0 40px; }
.ai-intro p { color: var(--accent); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.ai-section { text-align: center; margin: 60px 0 30px; }
.ai-section h1 { font-size: 20px; font-weight: 300; color: var(--accent); margin: 0 0 14px; }
.ai-section hr { border: 0; border-top: 1px solid rgba(255,255,255,.35); margin: 0; }
.ai-video { max-width: 320px; margin: 40px auto; }
.ai-video video { width: 100%; display: block; }

/* ---------- password gate (mirrors the Squarespace lock screen) ---------- */
body.gate { background: #fff; color: #222; }
.gate-box { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px 24px; }
.gate-box .lock { width: 44px; height: 44px; border: 1px solid #bbb; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gate-box .lock svg { width: 16px; height: 16px; fill: #666; }
.gate-box .logo img { width: 68px; filter: invert(1) brightness(.35); }
.gate-box form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
.gate-box input { border: 0; outline: 0; font: inherit; font-size: 12px; letter-spacing: .1em; width: 170px; color: #222; }
.gate-box button { border: 0; background: none; cursor: pointer; color: #999; font-size: 16px; }
.gate-box .msg { font-size: 11px; color: #b44; letter-spacing: .05em; min-height: 14px; }

/* 404 */
.notfound { text-align: center; padding: 80px 0; }
.notfound h1 { font-size: 20px; font-weight: 300; color: var(--accent); }