/* ==========================================================================
   Lito Lab — design tokens
   ========================================================================== */
:root {
  --color-bg: #F7F5F1;
  --color-ink: #221d18;
  --color-ink-soft: #3a332c;
  --color-ink-muted: #4a4038;
  --color-taupe: #8a7c68;
  --color-numeral: #cfc7ba;
  --color-rule: rgba(34, 29, 24, 0.22);
  --color-cta-rule: rgba(34, 29, 24, 0.4);
  --color-hero-text: #fdfdfc;

  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  margin: 0;
  background: var(--color-bg);
}

a {
  color: var(--color-ink);
  text-decoration: none;
}

a:hover {
  color: var(--color-taupe);
}

.page {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Reveal-on-load animation, used across sections */
.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 1.2s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Reusable label components (shared across every section)
   ========================================================================== */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.eyebrow--sub {
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Section intro rail: eyebrow label + sub-label, divided by a rule.
   Reused by Work, Material, and Trade section heads. */
.section-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 4.2fr);
  gap: 4vw;
  border-top: 1px solid var(--color-rule);
  padding-top: 22px;
}

/* Generic content row: label rail + one or two content columns.
   Reused by the Statement, Material, and Trade sections. */
.content-row {
  display: grid;
  gap: 4vw;
}

.content-row--statement {
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3.2fr) minmax(0, 1fr);
  border-top: 1px solid var(--color-rule);
  padding-top: 22px;
}

.content-row--spec {
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) minmax(0, 1.8fr);
  margin-top: 8vh;
  align-items: start;
}

/* .content-row__spacer: layout placeholder for the label column, hidden
   on mobile (see the mobile media query below). No desktop rules of its
   own — the grid column width is all it needs. */

/* Cropped photo component: fills its box at a fixed aspect ratio, sides/top
   cropped via object-fit. Reused by all three plates and the material detail
   shot. */
.u-image {
  display: block;
  width: 100%;
  object-fit: cover;
}

.u-image--4-5 {
  aspect-ratio: 4 / 5;
}

.u-image--3-4 {
  aspect-ratio: 3 / 4;
}

.u-image--16-9 {
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  padding: 22px;
  box-sizing: border-box;
}

.hero__media {
  position: absolute;
  inset: 22px;
}

/* Vignette so the hero text stays legible over the photo: darkening the
   top/bottom edges gives the near-white text a dark backdrop to contrast
   against. z-index:1 here, .hero__frame is z-index:2 so text stays above it. */
.hero__media::before,
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__media::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 20%);
}

.hero__media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 14%);
}

.hero__media-slot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__frame {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: 34px 34px 30px 34px;
  box-sizing: border-box;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.hero__brand {
  pointer-events: auto;
}

/* Shared "printed on the photo" label style */
.hero__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-hero-text);
}

.hero__brand-name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.24em;
  color: var(--color-hero-text);
}

.hero__brand-tag {
  margin-top: 9px;
}

.hero__meta {
  text-align: right;
}

.hero__plate-tag {
  white-space: nowrap;
}

.hero__tagline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.35;
  color: var(--color-hero-text);
  margin: 0;
  max-width: 19ch;
  text-wrap: pretty;
}

/* ==========================================================================
   Statement
   ========================================================================== */
.statement {
  padding: 16vh 6vw 14vh 6vw;
}

.statement__lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
  max-width: 26ch;
}

.statement__body {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.75;
  margin: 36px 0 0 0;
  max-width: 52ch;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* ==========================================================================
   Work / Plate
   ========================================================================== */
.work {
  padding: 0 6vw 12vh 6vw;
}

.work__list {
  display: flex;
  flex-direction: column;
  gap: 16vh;
  margin-top: 9vh;
}

.plate {
  margin: 0;
  display: grid;
  gap: 4vw;
}

.plate--lead {
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.6fr) minmax(0, 1.6fr);
  align-items: end;
}

.plate--reverse {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 3.4fr) minmax(90px, 0.6fr);
  align-items: start;
}

.plate--full {
  grid-template-columns: minmax(120px, 1fr) minmax(0, 4.2fr);
}

.plate__numeral {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--color-numeral);
}

.plate__numeral--inline {
  font-size: 44px;
  letter-spacing: 0;
  display: block;
  margin-top: 18px;
}

.plate__caption {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-rule);
  padding-top: 14px;
}

.plate__caption--right {
  text-align: right;
}

.plate__caption--split {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.plate__meta {
  color: var(--color-taupe);
}

/* ==========================================================================
   Interlude
   ========================================================================== */
.interlude {
  padding: 0 0 14vh 0;
}

.interlude__image {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  object-fit: cover;
}

.interlude__caption {
  padding: 14px 6vw 0 6vw;
}

/* ==========================================================================
   Material & Method
   ========================================================================== */
.material {
  padding: 0 6vw 14vh 6vw;
}

.material__detail-caption {
  margin-top: 14px;
}

/* Spec table, reused wherever a key/value spec list appears */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--color-ink);
}

.spec-table__row {
  border-top: 1px solid var(--color-rule);
}

.spec-table__row:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.spec-table__key {
  padding: 15px 0;
  color: var(--color-taupe);
  width: 42%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.spec-table__value {
  padding: 15px 0;
}

/* ==========================================================================
   For the Trade
   ========================================================================== */
.trade {
  padding: 0 6vw 14vh 6vw;
}

.trade__copy {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-ink-muted);
  margin: 0 0 24px 0;
  max-width: 38ch;
}

.trade__cta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-cta-rule);
  padding-bottom: 4px;
}

/* Terms list, could be reused anywhere a divided list of short claims is needed */
.terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 23px);
  color: var(--color-ink);
}

.terms-list__item {
  border-top: 1px solid var(--color-rule);
  padding: 18px 0;
}

.terms-list__item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

/* ==========================================================================
   Colophon
   ========================================================================== */
.colophon {
  border-top: 1px solid var(--color-rule);
  padding: 8vh 6vw 5vh 6vw;
}

.colophon__wordmark {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: clamp(44px, 11vw, 170px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  margin-bottom: 8vh;
}

.colophon__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.colophon__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.colophon__link {
  color: var(--color-taupe);
}

/* ==========================================================================
   Mobile (<=760px)
   ========================================================================== */
@media (max-width: 760px) {
  .section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .content-row {
    display: block;
  }

  .content-row > * + * {
    margin-top: 22px;
  }

  .content-row--statement .eyebrow {
    margin-bottom: 6px;
  }

  .content-row__spacer {
    display: none;
  }

  .plate {
    display: block;
  }

  .plate > * + * {
    margin-top: 22px;
  }

  .plate__caption--right {
    text-align: left;
  }

  .colophon__wordmark {
    font-size: 54px;
    letter-spacing: 0.01em;
  }
}