/*
  Zellawood
  BRAND ARCHETYPE:    Innovator
  LAYOUT PARADIGM:    12-column magazine chaos + editorial Z reading
  SECTION ORDER:      Hero → Mappa → Banane → Uova → Succhi → Yoga → Latte → Tesi → Macchina → Voci → Protocollo CTA → Footer
  DISPLAY FONT:       Cormorant Garamond — https://fonts.google.com/specimen/Cormorant+Garamond
  BODY FONT:          IBM Plex Sans — https://fonts.google.com/specimen/IBM+Plex+Sans
  PRIMARY COLOR:      #c98495 dusty pink — the single saturated break on a sage field
  SHAPE LANGUAGE:     sharp / rectangular, zero radius, diagonal stripe as the only ornament
  SIGNATURE MOMENT:   type overlaps the hero photograph while the photo breaks the page edge; a fixed bottom dock is the only navigation
  TONE OF VOICE:      forward, systematic, spare
*/

:root {
  --brand-primary: #c98495;
  --brand-primary-deep: #a85d70;
  --brand-secondary: #1b201c;
  --brand-accent: #f0d0d7;

  --surface-base: #8fa888;
  --surface-raised: #e4eee0;
  --surface-sunken: #7d9876;
  --surface-inverse: #1b201c;

  --text-primary: #141816;
  --text-secondary: #243028;
  --text-inverse: #e7efe4;
  --text-inverse-dim: #c5d0c2;
  --text-on-primary: #141816;

  --border-subtle: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --border-strong: var(--text-primary);

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;

  --text-hero: clamp(3.5rem, 10vw, 9rem);
  --text-h1: clamp(2.5rem, 6vw, 5rem);
  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
  --text-sm: clamp(0.75rem, 1vw, 0.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3.25rem;
  --space-8: 5rem;
  --space-9: 7.5rem;

  --page: 1640px;
  --gutter: clamp(1rem, 2.4vw, 2.75rem);
  --dock-h: 4.75rem;
  --bleed: max(var(--gutter), calc((100vw - min(var(--page), 100vw)) / 2));

  --stripe: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    color-mix(in srgb, var(--brand-primary) 78%, transparent) 8px 10px
  );
  --stripe-field: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--brand-primary) 28%, var(--surface-base)) 0 12px,
    color-mix(in srgb, var(--surface-raised) 55%, var(--surface-base)) 12px 24px
  );
  --stripe-button: repeating-linear-gradient(
    -45deg,
    var(--brand-primary) 0 9px,
    color-mix(in srgb, var(--brand-secondary) 30%, var(--brand-primary)) 9px 11px
  );
  --stripe-on-primary: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    color-mix(in srgb, var(--brand-primary-deep) 28%, transparent) 14px 15px
  );
  --stripe-inverse: repeating-linear-gradient(
    -45deg,
    transparent 0 9px,
    color-mix(in srgb, var(--text-inverse) 16%, transparent) 9px 10px
  );

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 200ms;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--surface-base);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 18px,
    color-mix(in srgb, var(--text-primary) 4.5%, transparent) 18px 19px
  );
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--brand-primary);
  color: var(--text-on-primary);
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  background: var(--brand-primary);
  color: var(--text-on-primary);
  padding: var(--space-3) var(--space-4);
  z-index: 80;
  text-decoration: none;
  font-size: var(--text-sm);
}

.skip:focus {
  transform: none;
}