/* ========================================
   SITE.CSS — kwmedia.io

   One 576px column on warm paper with grain. Serif body, sans UI.
   Photographs stack edge to edge, 5px apart, rounded as one group.
   The nav pill and theme toggle live in css/glass.css and read the
   tokens below.
   ======================================== */

:root {
  --paper: #f7f2ed;
  --paper-deep: #e7e3de;
  --ink: #1c1917;
  --title: #44403c;
  --text: rgba(87, 83, 78, .9);
  --muted: rgba(120, 113, 108, .75);
  --muted-solid: #78716c;
  --faint: #a8a29e;
  --chip-bg: rgba(168, 160, 134, .18);
  --chip-bg-hover: rgba(168, 160, 134, .3);
  --link: #57534e;
  --link-line: rgba(168, 162, 158, .3);
  --link-line-hover: rgba(168, 162, 158, .7);
  --selection: #ecdace;
  --grain-opacity: 1;

  --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-ui: 'Figtree', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;

  --col: 1200px;      /* landscape column: photos run wide, text is capped by .prose */
  --gutter: 24px;
  --radius: 12px;
  --gap: 5px;

  /* Nav geometry (shared with glass.css). */
  --nav-top: 20px;
  --nav-h: 54px;
  --page-top: 142px;   /* where the title sits, measured from the top edge */

  color-scheme: light;
}

html[data-theme="dark"] {
  --paper: #1b1917;
  --paper-deep: #2a2724;
  --ink: #f5f0ea;
  --title: #e7e2dc;
  --text: rgba(214, 208, 200, .88);
  --muted: rgba(168, 160, 150, .8);
  --muted-solid: #a8a29e;
  --faint: #78716c;
  --chip-bg: rgba(168, 160, 134, .16);
  --chip-bg-hover: rgba(168, 160, 134, .26);
  --link: #d6d0c8;
  --link-line: rgba(168, 162, 158, .3);
  --link-line-hover: rgba(168, 162, 158, .7);
  --selection: #3a332c;
  --grain-opacity: .6;

  color-scheme: dark;
}

/* Boreck Display is used in exactly one place: the name on the homepage
   hero. Everything else stays in Source Serif 4 and Figtree. */
@font-face {
  font-family: 'Boreck Display';
  src: url("../assets/fonts/boreck-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + env(safe-area-inset-top, 0px) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}

/* Grain: a static tile over the paper, under the content. Never animated.
   Photographs sit above it, so it never lands on the work. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/grain-alpha.png");
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: var(--grain-opacity);
}
main, footer, .site-nav, .lightbox { position: relative; z-index: 1; }

::selection { background: var(--selection); color: var(--ink); }

img, video { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--title);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 3000;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font: 500 15px/1 var(--font-ui);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---- Page column ---- */
.page {
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(var(--page-top) + env(safe-area-inset-top, 0px)) var(--gutter) 0;
}
.page--after-hero { padding-top: 40px; }

/* ---- Homepage hero: full viewport, the name huge over the reel ----
   The video plays muted behind, a gradient grounds the bottom edge, and the
   name sits bottom-left in Boreck Display. Visible at frame 0 via the
   poster. js/hero.js sets --hero-p from 0 to 1 as the hero scrolls out; the
   video zooms and sinks (moving slower than the page), the text drifts and
   fades. Without the script, or under Reduce Motion, nothing moves. */
.hero {
  --hero-p: 0;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: #000;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 45%;
  transform: translateY(calc(var(--hero-p) * 32%)) scale(calc(1 + var(--hero-p) * .3));
  will-change: transform;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .28) 34%,
    rgba(0, 0, 0, 0) 62%
  );
}

.hero-text {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(32px, 7vh, 88px);
  color: #fff;
  transform: translateY(calc(var(--hero-p) * 38vh));
  opacity: calc(1 - var(--hero-p) * 1.5);
  will-change: transform, opacity;
}

.hero-title {
  margin: 0;
  font-family: 'Boreck Display', var(--font-serif);
  font-weight: 700;
  font-size: clamp(3.4rem, 11.5vw, 12rem);
  line-height: .88;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 32px rgba(0, 0, 0, .45);
}

.hero-subtitle {
  margin: 18px 0 0 4px;
  font: 500 clamp(12px, 1.1vw, 15px)/1.3 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .76);
}

.hero-chip { margin: 0; }

/* ---- Header: title + chip ---- */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 8px;
}

.title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28.8px;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--title);
}

.chip {
  display: inline-block;
  padding: 4px 12px 5px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
  font: 500 16px/1.25 var(--font-ui);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
a.chip:hover { color: var(--title); background: var(--chip-bg-hover); }

/* ---- Photographs: stacked, 5px apart, rounded as one group ---- */
.photos {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 48px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.photos + .photos,
.caption + .photos { margin-top: 32px; }

.photos figure { margin: 0; min-width: 0; }

/* Per-photo caption (Drive photos carry their file name). */
.photos figcaption {
  padding: 10px 2px 8px;
  font: 500 15.2px/1.4 var(--font-ui);
  color: var(--muted);
}

.photos-row {
  display: flex;
  gap: var(--gap);
}
.photos-row figure { flex: 1 1 0; }

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-deep);
  cursor: zoom-in;
}
.photo--square  { aspect-ratio: 1 / 1; }
/* At landscape widths a full-column square would be taller than the
   viewport; let it breathe as a wide frame instead. */
@media (min-width: 900px) {
  .photo--square { aspect-ratio: 16 / 10; }
}
.photo--wide    { aspect-ratio: 16 / 9; }
.photo--tall    { aspect-ratio: 3 / 4; }
.photo--contain { object-fit: contain; cursor: default; }

.caption {
  margin: 12px 0 0;
  font: 500 15.2px/1.4 var(--font-ui);
  color: var(--muted);
}

/* ---- Prose ---- */
.prose { margin-top: 48px; max-width: 68ch; }
.prose p { margin: 0 0 24px; }
.prose p:last-child { margin-bottom: 0; }
.prose a {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2.4px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 2px;
  transition: text-decoration-color .2s ease;
}
.prose a:hover { text-decoration-color: var(--link-line-hover); }

/* ---- Albums: one cover tile per Drive subfolder, title bottom-left ---- */
.albums { margin-top: 40px; }
.albums-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  border-radius: var(--radius);
  overflow: hidden;
}
.album-cover {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--paper-deep);
  color: #fff;
  text-decoration: none;
}
.album-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.album-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, 0) 70%);
}
.album-cover__text {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(18px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.album-cover__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.album-cover__count {
  font: 600 13px/1.3 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
@media (hover: hover) {
  .album-cover:hover .album-cover__img { transform: scale(1.03); }
}
.album-cover:focus-visible { outline-offset: -3px; }

/* ---- Back pill (album page) ---- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 48px;
  padding: 12px 32px 12px 22px;
  border: 2px solid var(--rule, rgba(214, 211, 209, .45));
  border-radius: 999px;
  color: var(--muted-solid);
  font: 600 16px/1.5 var(--font-ui);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.back svg {
  width: 18px;
  height: 18px;
  opacity: .7;
  transition: transform .3s ease-out;
}
.back:hover { color: var(--title); border-color: var(--rule-hover, rgba(168, 162, 158, .7)); }
.back:hover svg { transform: translateX(-4px); }

/* ---- Section heading (About: Equipment, Home: Albums) ---- */
.more { margin-top: 64px; }
.more h2 {
  margin: 0 0 24px;
  font: 500 20px/1.5 var(--font-ui);
  letter-spacing: -.03em;
  color: var(--muted-solid);
}

.equip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
}
.equip-name {
  display: block;
  font: 500 16px/1.3 var(--font-ui);
  color: var(--title);
}
.equip-note {
  display: block;
  margin-top: 4px;
  font: 400 15.2px/1.4 var(--font-ui);
  color: var(--muted);
}

/* ---- Footer ---- */
.site-footer {
  max-width: var(--col);
  margin: 96px auto 48px;
  padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
  text-align: center;
  font: 400 15px/1.6 var(--font-ui);
  color: var(--faint);
}
.site-footer a {
  color: var(--muted-solid);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.site-footer a:hover { color: var(--title); text-decoration-color: rgba(120, 113, 108, .5); }
.site-footer .dot { margin: 0 8px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.active { display: flex; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, .94);
}
.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(100%, 1400px);
  max-height: 100%;
}
.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  width: auto;
  height: auto;
  border-radius: 8px;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 242, 237, .14);
  color: #f7f2ed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 26px/1 var(--font-ui);
  transition: background-color .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(247, 242, 237, .28); }
.lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-counter {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font: 500 13px/1 var(--font-ui);
  color: rgba(247, 242, 237, .6);
}
body.lightbox-open { overflow: hidden; }

/* ---- Tablet: the column gets a gutter once the viewport is tighter than
   column + 2 gutters ---- */
@media (max-width: 639px) {
  :root { --page-top: 122px; --nav-top: 12px; }
  .photos {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
  }
  .hero { min-height: 480px; }
  .albums-grid { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
  .album-cover { aspect-ratio: 4 / 3; }
  .equip { grid-template-columns: 1fr; gap: 24px; }
  .site-footer { margin-top: 72px; }
  .lightbox { padding: 12px; }
}

/* Short landscape phones: pull the title up so it is on the first screen. */
@media (max-height: 460px) {
  :root { --page-top: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .hero-video, .hero-text { transform: none !important; opacity: 1 !important; }
}