/* LT Creative — rebuilt from the Squarespace site as plain HTML/CSS.
   Layout mirrors Squarespace's "fluid engine": a 26-column grid
   (1 gutter + 24 content columns + 1 gutter). Each block is placed with
   an inline style="grid-area: rowStart / colStart / rowEnd / colEnd". */

:root {
  --yellow: #ffc700;
  --charcoal: #383838;
  --offwhite: #f4f4f3;
  --ink: #000;

  --display: "Archivo", "Arial Black", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  --row: 1.98vw;
  --gap: 12px;
  --header-h: 56px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg, var(--yellow));
  color: var(--page-fg, var(--ink));
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* Page themes */
body.theme-yellow { --page-bg: var(--yellow); --page-fg: var(--ink); }
body.theme-dark   { --page-bg: var(--charcoal); --page-fg: #fff; }
body.theme-light  { --page-bg: var(--offwhite); --page-fg: var(--ink); }

img { display: block; max-width: 100%; }

a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 4vw;
  background: var(--page-bg);
  border-bottom: 1px solid currentColor;
  font-family: var(--ui);
  font-size: 14.4px;
  text-transform: uppercase;
}
.site-title { text-decoration: none; letter-spacing: 0.05em; }
.site-nav { display: flex; gap: 1.6em; }
.site-nav a { text-decoration: none; letter-spacing: 0.02em; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Typography ---------- */

h1, h2, h3, h4, .footer-word {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: -0.06em;
}
h1 { font-size: 11.7vw; line-height: 1; }
h2 { font-size: max(32px, 4.25vw); line-height: 1.17; }
h3 { font-size: max(22px, 2.21vw); line-height: 1.25; }
h4 { font-size: 16px; line-height: 1.3; }

p { margin: 0 0 1em; font-size: 15.36px; line-height: 1.33; }
p:last-child { margin-bottom: 0; }
p.large { font-size: max(18px, 1.85vw); line-height: 1.33; }

.text-link { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fluid grid sections ---------- */

.section {
  position: relative;
  padding: 3.3vw 0;
}
.section + .section { border-top: 1px solid rgba(0, 0, 0, 0.55); }
.no-dividers .section + .section { border-top: 0; }

.grid {
  display: grid;
  grid-template-columns: calc(4vw - var(--gap)) repeat(24, minmax(0, 1fr)) calc(4vw - var(--gap));
  grid-auto-rows: minmax(var(--row), auto);
  gap: var(--gap);
}
.grid > * { min-width: 0; }

.block-img { position: relative; overflow: hidden; }
.block-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.block-img.contain img { object-fit: contain; }
.block-img.top img { object-position: top; }
.block-img.left img { object-position: left; }

.rule { align-self: center; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.5); margin: 0; }

/* Clickable photos open in the lightbox */
.zoomable { cursor: zoom-in; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--yellow);
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.55);
}
.footer-cols {
  display: flex; justify-content: flex-end; gap: 6vw;
  padding: 5vw 8vw 0 4vw;
}
.footer-cols h4 { color: var(--yellow); margin-bottom: 10px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 14px; }
.footer-cols a {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  text-underline-offset: 3px;
}
.footer-word {
  margin: 4vw 0 -0.12em -0.04em;
  font-size: 19vw;
  line-height: 1;
  color: var(--yellow);
  white-space: nowrap;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lightbox button {
  position: absolute; top: 14px; right: 18px;
  background: none; border: 0; color: #fff;
  font: 32px/1 var(--ui); cursor: pointer;
}

/* ---------- Mobile: stack blocks in source order ---------- */

@media (max-width: 767px) {
  :root { --header-h: 52px; }
  .site-header { padding: 0 16px; font-size: 12px; }
  .site-nav { gap: 1em; }

  .section { padding: 32px 16px; }
  .grid { display: flex; flex-direction: column; gap: 16px; }
  .grid > * { grid-area: auto !important; }
  .block-img img { height: auto; }
  .grid .gap-before { margin-top: 16px; }

  h1 { font-size: 15vw; }

  .footer-cols { justify-content: flex-start; padding: 48px 16px 0; gap: 48px; }
  .footer-word { font-size: 19vw; margin-top: 48px; }
}