/* St TERRA — architecture d'intérieur
   Kept from the editorial scaffolding: flat surfaces, hairlines instead of boxes, zero radius.
   Everything else is the brand's own world: cream paper (#FCF8F0), clay hairlines (#C6BCA6),
   walnut ink (#71502C), geometric system faces, full-bleed photography.
   Signature: letterspaced small-caps labels, clay hairlines, no shadows anywhere. */
:root {
  --color-bg: #fcf8f0;
  --color-surface: #f6f0e4;
  --color-text: #665443;
  --color-heading: #71502c;
  --color-muted: #7d6b55;
  --color-border: #c6bca6;
  --color-primary: #c6bca6;
  --color-accent: #71502c;
  --color-accent-hover: #5a3f22;
  --color-accent-contrast: #fcf8f0;

  /* Geometric system stack: the mockup's wide, round letterforms without a webfont. */
  --font-sans: "Avenir Next", Avenir, "Century Gothic", "URW Gothic", "Trebuchet MS", system-ui,
    sans-serif;
  --font-display: var(--font-sans);

  --body-size: 1rem;
  --step-h1: clamp(2.15rem, 4.4vw, 3.35rem);
  --step-h2: clamp(1.45rem, 2.2vw, 2rem);
  --step-h3: 1rem;
  --step-lead: 1.05rem;
  --heading-tracking: 0.005em;
  --heading-transform: none;
  --heading-weight: 500;
  --heading-gap: var(--space-4);

  --container: 54rem;
  --container-narrow: 43rem;
  --container-wide: 84rem;
  /* Navbar gutters track page width: 51px at 1024px in the reference. */
  --header-pad-inline: clamp(1.25rem, 5vw, 3.25rem);

  --section-space: clamp(4rem, 9vw, 7rem);
  --hero-space: clamp(3rem, 7vw, 5rem);
  --card-gap: var(--space-5);
  --card-columns: repeat(3, 1fr);
  --hero-columns: 1.15fr 0.85fr;
  --hero-media-max: none;

  --radius: 0;
  --radius-card: 0;
  --radius-button: 0;
  --shadow: none;
  --border: 1px solid var(--color-border);

  --header-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --header-blur: blur(12px);
  /* Reference bar is 151px tall with an 83px mark — air around the logo, not a tight ribbon. */
  --header-height: 9.45rem;
  --logo-size: 5.2rem;
  --card-bg: transparent;
  --panel-bg: transparent;

  /* Photograph holds the header; cream only returns at the fold into the page. */
  --hero-min-height: min(46rem, 92vh);
  --hero-overlay: linear-gradient(
    to bottom,
    rgb(40 30 22 / 0.32) 0%,
    rgb(40 30 22 / 0.1) 14%,
    transparent 28%,
    color-mix(in srgb, var(--color-bg) 12%, transparent) 68%,
    color-mix(in srgb, var(--color-bg) 62%, transparent) 88%,
    var(--color-bg) 100%
  );
  --hero-ink: #fcf8f0;
  --gallery-tile: 1fr;
  --gallery-gap: 0.85rem;
  --gallery-ratio: 4 / 3;
  --about-columns: 1.35fr 1fr;
  --contact-columns: 1fr 1.05fr;
}

/* On a phone the ribbon needs far fewer, larger tiles, and the wash has to work
   without the right-hand vignette because the copy runs full width. */
@media (max-width: 860px) {
  :root {
    --header-height: 5.75rem;
    --logo-size: 3.85rem;
    --header-pad-inline: 1.25rem;
    --gallery-gap: 0.65rem;
    --hero-min-height: min(38rem, 92vh);
    --hero-overlay: linear-gradient(
      to bottom,
      rgb(40 30 22 / 0.36) 0%,
      rgb(40 30 22 / 0.12) 16%,
      transparent 32%,
      color-mix(in srgb, var(--color-bg) 22%, transparent) 70%,
      color-mix(in srgb, var(--color-bg) 70%, transparent) 88%,
      var(--color-bg) 100%
    );
  }
}

/* The promise is set hairline-thin; section titles stay a notch heavier so they hold the page. */
h1 {
  font-weight: 300;
  line-height: 1.12;
}

h2 {
  line-height: 1.18;
}

h3 {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--color-muted);
}

/* Buttons read as engraved labels, never as chunky UI.
   Hover inks the plaque from the baseline, like a walnut stain. */
.button {
  padding: 0.95rem 1.6rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform var(--duration-ui) var(--ease-out);
}

.button-primary::before {
  background: var(--color-accent-hover);
}

.button-secondary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button-secondary::before {
  background: var(--color-accent);
}

.button:focus-visible::before,
.button:active::before {
  transform: scaleY(1);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--color-accent);
}

.button-secondary:hover {
  background: transparent;
}

.button-secondary:focus-visible,
.button-secondary:active {
  background: transparent;
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover::before {
    transform: scaleY(1);
  }

  .button-secondary:hover {
    color: var(--color-accent-contrast);
    border-color: var(--color-accent);
  }
}

.checklist li,
.benefit-list li {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.benefit-list {
  gap: var(--space-4);
}

.benefit-list strong {
  font-weight: 500;
  color: var(--color-heading);
}