/* ==========================================================================
   KEMLO — site styles
   Hand written. No framework, no build step.
   Tokens live in :root. Change them here and the whole site follows.
   ========================================================================== */

:root {
  --ink: #080808;
  --coal: #101010;
  --bone: #ede9e2;
  --ash: #928d85;
  /* Lightened from #c8452c so small uppercase text clears 4.5:1 on --ink. */
  --ember: #e2604a;

  --line: rgba(237, 233, 226, 0.14);
  /* 0.42 keeps button borders above the 3:1 non-text contrast minimum. */
  --line-strong: rgba(237, 233, 226, 0.42);

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --gut: 1.25rem;
  --max: 1600px;
  --measure: 62ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --gut: 2.5rem;
  }
}

/* --------------------------------------------------------------- reset -- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

iframe {
  border: 0;
  max-width: 100%;
}

/* Baseline reset for every <button>, including the mobile nav toggle and the
   modal close button. Without this some browsers draw a default border/box
   around unstyled buttons. .btn overrides this again where a visible border
   is wanted, class specificity beats this element selector regardless of
   source order. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

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

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  background: var(--bone);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

.band {
  background: var(--coal);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 860px) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .c4 {
    grid-column: span 4;
  }
  .c5 {
    grid-column: span 5;
  }
  .c6 {
    grid-column: span 6;
  }
  .c7 {
    grid-column: span 7;
  }
  .c8 {
    grid-column: span 8;
  }
}

/* --------------------------------------------------------- typography -- */

.eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ash);
}

.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.8;
  font-size: clamp(4.5rem, 19vw, 15rem);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.01em;
}

.h1 {
  font-family: var(--font-display);
  line-height: 0.86;
  font-size: clamp(3.5rem, 15vw, 9rem);
  margin: 0;
}

.h2 {
  font-family: var(--font-display);
  line-height: 0.9;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  margin: 0;
}

.h3 {
  font-family: var(--font-display);
  line-height: 1;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
}

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.3;
  max-width: var(--measure);
}

.lead-italic {
  font-style: italic;
}

.body {
  max-width: var(--measure);
  color: rgba(237, 233, 226, 0.72);
  line-height: 1.75;
}

.body-lg {
  font-size: 1.05rem;
}

.muted {
  color: var(--ash);
  font-size: 0.9rem;
}

.ember {
  color: var(--ember);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.stack > * + * {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------- links --- */

.ulink {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.ulink:hover,
.ulink:focus-visible {
  background-size: 100% 1px;
}

.btn {
  display: inline-block;
  padding: 0.95rem 1.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background: var(--bone);
  color: var(--ink);
}

.btn-solid {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn-solid:hover,
.btn-solid:focus-visible {
  background: transparent;
  color: var(--bone);
}

.btn-sm {
  padding: 0.7rem 1.25rem;
  font-size: 0.64rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --------------------------------------------------------------- icons -- */

.icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.12em;
}

/* Marks that are solid silhouettes rather than line drawings, e.g. the Apple
   logo, which has no interior detail to draw as strokes. */
.icon-solid {
  fill: currentColor;
  stroke: none;
}

.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

/* ----------------------------------------------------- photo credit -- */
/* Photographer credit tucked into the bottom corner of an image. Small and
   low contrast so it sits on the photograph without competing with it, but
   still legible and clickable. */

.photo-credit {
  position: absolute;
  right: 0.9rem;
  bottom: 0.7rem;
  z-index: 3;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.photo-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 233, 226, 0.3);
}

.photo-credit a:hover,
.photo-credit a:focus-visible {
  color: var(--bone);
  border-bottom-color: var(--bone);
}

/* ------------------------------------------------------ version badge -- */
/* Small build marker pinned to the top right of every page. Sits above the
   header so it stays put, and is deliberately low contrast so it reads as a
   build stamp rather than as content. Its value comes from SITE_VERSION in
   _build/generate.py. */

.site-version {
  position: fixed;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 200;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.4);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .site-version {
    top: 0.65rem;
    right: 1rem;
  }
}

/* ---------------------------------------------------------- social bar -- */
/* Row of platform links under the hero headline. Deliberately a visible,
   tappable target rather than small print: bordered chips, generous hit area,
   and the platform name spelled out next to each logo. */

.social-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--bone);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(8, 8, 8, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}

.social-chip .icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 1.7;
}

/* The Apple mark is drawn on a tall, narrow viewBox rather than a square one,
   so match its aspect ratio instead of letterboxing it inside a square. */
.icon-apple {
  width: 0.94em;
}

.social-chip .icon-apple {
  width: 1.05em;
}

.social-chip:hover,
.social-chip:focus-visible {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Never let a platform name wrap or get cut in half. */
.social-chip span {
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Stack into a single column so every platform name stays readable in
     full, rather than hiding the labels to squeeze them onto one row. */
  .social-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .social-chip {
    width: 100%;
    justify-content: flex-start;
    padding: 0.7rem 1.1rem;
  }

  .social-chip .icon {
    width: 1.25em;
    height: 1.25em;
  }

  .social-chip .icon-apple {
    width: 1.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-chip {
    transition: none;
  }

  .social-chip:hover,
  .social-chip:focus-visible {
    transform: none;
  }
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

/* button element styled as .btn needs the reset */
button.btn {
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

button.btn.btn-solid {
  background: var(--bone);
  color: var(--ink);
}

/* ------------------------------------------------- listen popup ------- */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gut);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 4, 0.82);
  backdrop-filter: blur(6px);
  animation: fade 0.25s var(--ease);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 2.25rem;
  background: var(--coal);
  border: 1px solid var(--line-strong);
  animation: rise 0.35s var(--ease);
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 0;
  color: var(--ash);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.modal-close:hover,
.modal-close:focus-visible {
  color: var(--bone);
}

.listen-list {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.listen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: padding-left 0.3s var(--ease), color 0.3s var(--ease);
}

.listen-row .arrow {
  color: var(--ash);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.listen-row:hover,
.listen-row:focus-visible {
  padding-left: 0.9rem;
}

.listen-row:hover .arrow,
.listen-row:focus-visible .arrow {
  color: var(--bone);
  transform: translateX(4px);
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ------------------------------------------------------------ header --- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.75), transparent);
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}

.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 1.05rem;
  line-height: 1;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

.nav-desktop a {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.3s var(--ease);
}

.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] {
  color: var(--bone);
}

.nav-desktop .btn {
  color: var(--bone);
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}

.nav-toggle {
  position: relative;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--bone);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.site-header.is-open .nav-toggle span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.site-header.is-open .nav-toggle span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7rem var(--gut) 3rem;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-mobile a.big {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
}

.nav-mobile .socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.nav-mobile .socials a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (min-width: 900px) {
  .nav-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------ photos --- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--coal);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Film grain, sits over the photograph. */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.25rem 1rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.72);
  background: linear-gradient(to top, rgba(8, 8, 8, 0.92), transparent);
}

.ratio-45 {
  aspect-ratio: 4 / 5;
}
.ratio-34 {
  aspect-ratio: 3 / 4;
}

.fullbleed {
  position: relative;
}

.fullbleed .frame {
  height: 60vh;
}

@media (min-width: 768px) {
  .fullbleed .frame {
    height: 84vh;
  }
}

.fullbleed .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.9), transparent 55%, rgba(8, 8, 8, 0.35));
  pointer-events: none;
}

.fullbleed .caption {
  position: absolute;
  inset: auto 0 0 0;
  padding-bottom: 2.5rem;
}

/* -------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.hero .frame {
  position: absolute;
  inset: -18% 0 0 0;
  will-change: transform;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 2%, rgba(8, 8, 8, 0.45) 55%, rgba(8, 8, 8, 0.55));
}

.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4rem;
}

.hero-portrait {
  display: block;
}
.hero-landscape {
  display: none;
}

@media (min-width: 768px) {
  .hero-portrait {
    display: none;
  }
  .hero-landscape {
    display: block;
  }
}

/* page masthead, shorter than the home hero */
.masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .masthead {
    min-height: 72vh;
  }
}

.masthead .frame {
  position: absolute;
  inset: 0;
}

.masthead .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 3%, rgba(8, 8, 8, 0.55) 60%, rgba(8, 8, 8, 0.4));
}

.masthead-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 9rem;
  padding-bottom: 3.5rem;
}

/* -------------------------------------------------------------- lists -- */

.rows {
  border-top: 1px solid var(--line);
}

.row {
  border-bottom: 1px solid var(--line);
  padding: 2.25rem 0;
}

@media (min-width: 860px) {
  .row {
    padding: 3rem 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
}

.tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
}

.tile {
  background: var(--coal);
  padding: 2rem;
}

@media (min-width: 768px) {
  .tile {
    padding: 3rem;
  }
}

.tile-ink {
  background: var(--ink);
}

/* A standalone version of .tile with its own border, used for single panels
   that aren't inside a .tiles grid, like the Spotify panel on /music. */
.panel {
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 2rem;
}

@media (min-width: 768px) {
  .panel {
    padding: 2.5rem;
  }
}

/* -------------------------------------------------------- music hero --- */

/* Grid default alignment (stretch) makes both columns match the taller
   sibling's height automatically, so the photo naturally fills whatever
   height the Spotify panel ends up at. No fixed heights to keep in sync. */
.music-hero-photo {
  height: 100%;
  min-height: 22rem;
}

.spotify-frame iframe {
  border-radius: 12px;
}

/* Below the grid-12 breakpoint everything stacks in one column (see .grid),
   so the photo just needs a sensible height of its own rather than 100%. */
@media (max-width: 859px) {
  .music-hero-photo {
    height: auto;
    min-height: 20rem;
  }
}

.facts {
  border-top: 1px solid var(--line);
}

.fact {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.fact dd {
  font-size: 0.9rem;
  color: rgba(237, 233, 226, 0.85);
}

.gallery {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery a {
  display: block;
}

.gallery img {
  transition: transform 0.8s var(--ease);
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.04);
}

.gallery .meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

.gallery a:hover .meta .open {
  color: var(--bone);
}

/* ----------------------------------------------------------- marquee --- */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  user-select: none;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
  animation: slide 26s linear infinite;
}

.marquee span {
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: rgba(237, 233, 226, 0.22);
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------- contact form -- */

.contact-form {
  max-width: 34rem;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  margin-top: 1.25rem;
}

.form-row .field {
  margin-top: 0;
}

.field label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.6rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--coal);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--bone);
  outline: none;
}

.form-status {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--bone);
}

/* ------------------------------------------------------------ footer --- */

.site-footer {
  position: relative;
  margin-top: 6rem;
  background: var(--coal);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.site-footer .bg {
  position: absolute;
  inset: 0;
  opacity: 0.16;
}

.site-footer .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-inner {
  position: relative;
  z-index: 2;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.footer-word {
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: 0.82;
}

.footer-cols {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-cols li + li {
  margin-top: 0.4rem;
}

.footer-cols a {
  font-size: 0.9rem;
  color: rgba(237, 233, 226, 0.85);
}

.colophon {
  margin-top: 3.5rem;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ------------------------------------------------------------ motion --- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track {
    animation: none;
  }
  .gallery img {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}