/* ==========================================================================
   Pavoni1975 — Mainsite-specific composition styles
   Anything that's not a token. Component primitives extended for the home
   page only. Subdomains pull tokens.css; this file does not travel with them.
   ========================================================================== */

/* Wordmark scale — driven by Tweaks slider --------------------------------- */
:root { --wordmark-scale: 1; }

/* ---- Wordmark sizing -----------------------------------------------------
   The wordmark is now an <img> (assets/logo/pavoni1975-*.png). We size it
   by width on a fluid clamp() — the PNG keeps its aspect ratio via
   `height: auto` declared on .brand-wordmark. Values mirror the previous
   font-size clamps so the optical scale is unchanged. */

/* Hero — fluid: 360 → 1100px, scaled by --wordmark-scale */
.brand-wordmark--hero {
  width: calc(clamp(18rem, 50vw, 68.75rem) * var(--wordmark-scale));
  max-width: 100%;
}

/* Footer — discreet, fluid 140 → 220px */
.brand-wordmark--footer {
  width: clamp(8.75rem, 14vw, 13.75rem);
}

/* Display (design-system / brand-book demos) */
.brand-wordmark--display {
  width: clamp(14rem, 36vw, 32rem);
}

/* ==========================================================================
   Hero
   Single full-viewport composition. Wordmark centered, two buttons below,
   four meta marks at the corners. Nothing else above the fold.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-6), 6vh, var(--space-8));
  text-align: center;
  padding-block: var(--space-9);
}

.hero__mark-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Meta marks at the four corners ----------------------------------------- */

.hero__meta {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
}

.hero__meta--tl { top: var(--space-6); left:  var(--gutter); }
.hero__meta--tr { top: var(--space-6); right: var(--gutter); }
.hero__meta--bl { bottom: var(--space-6); left:  var(--gutter); }
.hero__meta--br { bottom: var(--space-6); right: var(--gutter); }

.hero__meta-num,
.hero__meta-arrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Meta marks color matrix — split needs separate left/right colors        */
.hero__meta--cream  { color: var(--color-ash); }
.hero__meta--forest { color: color-mix(in oklab, var(--color-cream) 70%, transparent); }
.hero__meta--forest .eyebrow,
.hero__meta--forest .hero__meta-num,
.hero__meta--forest .hero__meta-arrow { color: inherit; }

.hero--split .hero__meta--tl,
.hero--split .hero__meta--bl { color: color-mix(in oklab, var(--color-cream) 70%, transparent); }
.hero--split .hero__meta--tr,
.hero--split .hero__meta--br { color: var(--color-ash); }

/* Language switch — sits inside the top-right meta corner. Two pill buttons
   separated by a hairline slash; active language is solid, inactive is
   muted. Inherits color from the parent .hero__meta--{tone} block. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--w-regular);
  line-height: 1;
}

.lang-switch__btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 160ms ease, color 160ms ease;
}

.lang-switch__btn:hover,
.lang-switch__btn:focus-visible { opacity: 1; outline: none; }

.lang-switch__btn.is-active {
  opacity: 1;
  font-weight: var(--w-medium);
}

.lang-switch__sep {
  opacity: 0.4;
  user-select: none;
  font-weight: var(--w-light);
}

/* ---- Night (Blu Notte) surface retired --------------------------------
   Surface removed from the Hero variants on 2026-05-23. The PNG wordmark
   suite (light / dark / mono / accent) doesn't include a cream-on-
   transparent cut, so on Blu Notte the dark.png exposed its baked-in
   forest field. The corresponding `.hero.on-night` and `.hero__meta--night`
   blocks have been removed. --color-night is preserved in tokens.css as
   an unused brand token in case a future cream-on-transparent asset is
   added and the surface is reinstated. */

/* ---- Split composition -------------------------------------------------
   The wordmark is now a single PNG (the dark variant — cream wordmark on
   the forest field of the split). The previous CSS background-clip text
   knock-out is no longer applicable to an <img> and has been removed.   */

.hero--split { background: var(--color-cream); }

.hero__field {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__field--left  { right: 50%; background: var(--color-forest); }
.hero__field--right { left:  50%; background: var(--color-cream);  }

/* In split, buttons get a mixed treatment — outline in cream-on-forest    */
.hero--split .nav-primary { background: transparent; }
.hero--split .nav-primary .btn {
  --btn-fg: var(--color-ink);
  --btn-bd: var(--color-ink);
  background: var(--color-cream);
}
.hero--split .nav-primary .btn:hover {
  --btn-fg: var(--color-cream);
  --btn-bg: var(--color-ink);
}

/* ==========================================================================
   Primary nav buttons — generous, two-up, stack on mobile
   ========================================================================== */

.nav-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  width: min(720px, 100%);
}

@media (max-width: 640px) {
  .nav-primary {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.btn {
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  padding-inline: 2rem;
  min-height: 76px;
  letter-spacing: var(--tracking-wider);
}

.btn__face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.1;
}

.btn__label {
  font-size: 1rem; /* +18% from --text-sm to balance wordmark dominance */
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.btn__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.btn__claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-light);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

.btn__arrow {
  flex: 0 0 auto;
  transition: transform var(--duration-2) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { padding-block: 0; }

.footer .hairline {
  background: var(--rule);
}
.footer.on-forest .hairline { background: var(--color-tan); opacity: 0.6; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-block: var(--space-9) var(--space-8);
}

@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }
  .footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__col--brand { gap: var(--space-5); max-width: 38ch; }

.footer__about {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: inherit;
  /* About / project narrative \u2014 Inter 300 at full opacity per brief.
     Reduced opacity removed: on cream and forest both, the text reads cleaner. */
  font-weight: var(--w-light);
  opacity: 1;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.footer__list > li { display: flex; flex-direction: column; gap: var(--space-1); }

.footer__sublabel {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.footer__addr {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  opacity: 0.85;
}

.footer__muted {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.on-forest .footer__muted { color: color-mix(in oklab, var(--color-cream) 60%, transparent); }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-7);
  border-top: var(--hairline) solid var(--rule-faint);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.on-forest .footer__base { border-top-color: var(--rule-faint-inverse); }

.footer__base-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}