/* Home page. Self-hosted Overpass, flat surface, hairline rules. */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Overpass-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Overpass-Variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-brand: #9E3B23;
  --color-ink: #1A1A1A;
  --color-surface: #EAE5DB;
  --color-mute: #55524C;
  --color-rule: #D0CBC0;
  --font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ls-caps: 0.22em;
  --side: 108px;
  --gutter: 24px;
  --fs-h1: 56px;
  --lh-h1: 64px;
  --fs-lead: 20px;
  --lh-lead: 28px;
  --fs-small: 14px;
  --fs-caption: 12px;
}

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

html, body { background: var(--color-surface); }

body {
  font-family: var(--font);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 48px var(--side) 32px;
}

/* header: wordmark left, brandmark right */
.top { display: flex; justify-content: space-between; align-items: flex-start; }
.wordmark {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 4px;
}
.mark { display: block; width: 40px; height: auto; }

/* body */
.main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; }
h1 {
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin-top: 48px;
}
.ledes { grid-column: 1 / span 6; }
.ledes p { max-width: 46ch; color: var(--color-mute); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 200; }
.ledes p + p { margin-top: 24px; }
.ledes .lede-2 { min-height: calc(var(--lh-lead) * 4); }

.rot { color: var(--color-brand); font-weight: 500; }
.rot__phrase { display: none; opacity: 0; transition: opacity 1s ease-in-out; }
.rot__phrase.is-active { display: inline; }
.rot__phrase.is-visible { opacity: 1; transition: opacity 1.2s ease-in-out; }

.side { grid-column: 8 / span 5; }
.label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 12px;
}
.services { list-style: none; }
.services li {
  border-top: 0.75pt solid var(--color-rule);
  padding: 10px 0;
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), border-color 0.3s ease;
}
@media (hover: hover) {
  .services li:hover { transform: translateY(-3px); border-top-color: var(--color-ink); }
}
.contact { border-top: 0.75pt solid var(--color-rule); padding-top: 24px; }
.contact a {
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--fs-lead);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-brand);
  padding-bottom: 2px;
}

/* footer under a thin divider */
.foot {
  border-top: 0.75pt solid var(--color-rule);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-mute);
}
.foot a { color: inherit; text-decoration: none; font-size: 9px; }
.foot a:hover, .foot a:focus-visible { color: var(--color-ink); text-decoration: underline; }
.foot .sep { display: inline-block; width: 2px; height: 2px; border-radius: 50%; background: currentColor; margin: 0 10px; font-size: 0; vertical-align: middle; }

/* entrance motion */
.rise { animation: rise 0.8s cubic-bezier(.33, 0, .2, 1) both; }
.d1 { animation-delay: 90ms; }
.d2 { animation-delay: 180ms; }
.d3 { animation-delay: 270ms; }
.d4 { animation-delay: 360ms; }
.d5 { animation-delay: 450ms; }
.d6 { animation-delay: 540ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* cookie consent banner (built by home.js): same surface, hairline and caps as the page */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px var(--side);
  background: var(--color-surface);
  color: var(--color-ink);
  border-top: 0.75pt solid var(--color-rule);
  font-size: var(--fs-small);
  line-height: 20px;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 20;
}
.consent-banner.visible { transform: translateY(0); }
.consent-banner__text { max-width: 64ch; color: var(--color-mute); }
.consent-banner a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 3px; }
.consent-banner__actions { display: flex; gap: 12px; }
.consent-banner__btn {
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}
.consent-banner__btn--accept { background: var(--color-ink); color: var(--color-surface); }

/* long-form pages: privacy, terms, cookies, 404 */
a.wordmark { color: inherit; text-decoration: none; }
.mark-link { display: block; }
.doc { flex: 1; padding: 48px 0 32px; }
.doc__sub { margin-top: 16px; color: var(--color-mute); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.doc__body { margin-top: 48px; max-width: 72ch; }
.doc__body section { border-top: 0.75pt solid var(--color-rule); padding: 24px 0 8px; }
.doc__body h2 { font-size: 24px; line-height: 32px; font-weight: 800; margin-bottom: 12px; }
.doc__body h3 { font-size: 16px; line-height: 24px; font-weight: 800; margin: 16px 0 8px; }
.doc__body p { margin: 0 0 16px; line-height: 26px; }
.doc__body ul { margin: 0 0 16px 20px; }
.doc__body li { margin-bottom: 6px; line-height: 26px; }
.doc__body a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 3px; }
.doc__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(26, 26, 26, 0.06); padding: 1px 5px; border-radius: 3px; }

@media (max-width: 1023px) {
  :root { --side: 48px; }
  .ledes { grid-column: 1 / span 12; }
  .side { grid-column: 1 / span 12; margin-top: 48px; }
}

@media (max-width: 767px) {
  :root { --side: 20px; --fs-h1: 34px; --lh-h1: 40px; --fs-lead: 17px; --lh-lead: 25px; }
  .page { padding-top: 24px; padding-bottom: 24px; }
  .ledes .lede-2 { min-height: calc(var(--lh-lead) * 5); }
  .mark { width: 28px; }
  .main { padding: 32px 0; }
  .cols { margin-top: 32px; }
  .side { margin-top: 32px; }
  .foot { align-items: baseline; gap: 4px 8px; letter-spacing: 0.06em; flex-wrap: wrap; }
  .foot > span { white-space: nowrap; }
  .foot .sep { margin: 0 7px; }
  .consent-banner { padding: 16px var(--side); gap: 12px; }
  .doc { padding-top: 32px; }
  .doc__body { margin-top: 32px; }
}

@media (max-width: 359px) {
  .ledes .lede-2 { min-height: calc(var(--lh-lead) * 6); }
}

@media (max-width: 399px) {
  .foot { letter-spacing: 0.02em; }
  .foot .sep { margin: 0 5px; }
}


/* tablet and phone: the policy links are 10% smaller than the footer text */
@media (max-width: 1023px) {
  .foot > span:last-child { font-size: 10.8px; }
}


@media (prefers-reduced-motion: reduce) {
  .rise { animation: fade 0.8s linear both; }
  .rot__phrase, .rot__phrase.is-visible { transition: none; }
  .services li { transition: none; }
  .services li:hover { transform: none; }
  .consent-banner { transition: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}


/* home page: looping video behind the copy, all type white */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-ink) url("./img/reel-16x9.webp") center / cover no-repeat;
  overflow: hidden;
}
@media (max-aspect-ratio: 1/1) {
  .bg { background-image: url("./img/reel-9x16.webp"); }
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 12, 10, 0.78) 0%, rgba(14, 12, 10, 0.58) 45%, rgba(14, 12, 10, 0.5) 100%);
}
.bg__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.bg__video.video-ready { opacity: 1; }

.home, .home h1, .home .ledes p, .home .rot, .home .label, .home .services li,
.home .contact a, .home .foot, .home .foot a:hover, .home .foot a:focus-visible { color: #fff; }
.home { background: transparent; }
html:has(.home) { background: var(--color-ink); }

.home .foot { font-weight: 100; border-top: 0; }
.home .mark { filter: brightness(0) invert(1); }
.home .services li, .home .contact, .home .foot { border-top-color: rgba(255, 255, 255, 0.4); }
.home .services li:hover { border-top-color: #fff; }
.home .contact a { border-bottom-color: #fff; }
.home a:focus-visible { outline-color: #fff; }
.home .skip-link { background: #fff; color: var(--color-ink); }
.home h1, .home .ledes p, .home .services li, .home .contact a { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .bg__video { display: none; }
}