/* SALTA — reset, typography, shared primitives. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--deep);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* <picture> generates no box of its own: without this the wrapper keeps an
   auto height and every `img { height: 100% }` inside a sized frame resolves
   to auto instead of filling it. */
picture { display: contents; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--lime); color: var(--dark); }

/* --- layout ----------------------------------------------------------- */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--sect-y);
}
.container {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
}
.container--wide { width: min(100% - var(--gutter), 1760px); }

/* --- type primitives -------------------------------------------------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.label::before {
  content: '';
  width: 1.9em;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.label--lime { color: var(--lime); }
.label--bare::before { display: none; }

.display {
  font-size: var(--t-huge);
  line-height: .88;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
}
.display--mega {
  font-size: var(--t-mega);
  line-height: .84;
  letter-spacing: var(--track-mega);
}
.display--mid { font-size: var(--t-big); line-height: .92; }
/* Headlines that sit in a narrow grid column: sized so the brief's own line
   breaks survive instead of wrapping inside a mask. */
.display--col { font-size: clamp(2rem, 4.8vw, 4.4rem); line-height: .9; }
/* Once those grids collapse to one column the headline has the full width
   back, so it returns to the section scale. */
@media (max-width: 900px) {
  .display--col { font-size: var(--t-huge); line-height: .88; }
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--maxw-text);
}

.num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* --- buttons ---------------------------------------------------------- */
.btn {
  --btn-bg: var(--deep);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1.05em 1.75em;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}
.btn .arrow {
  transition: translate var(--dur-fast) var(--ease-out);
  will-change: translate;
}
.btn--blue  { --btn-bg: var(--blue); --btn-fg: var(--white); }
.btn--lime  { --btn-bg: var(--lime); --btn-fg: var(--dark); }
.btn--orange{ --btn-bg: var(--orange); --btn-fg: var(--dark); }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--deep); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border: 1px solid currentColor;
  opacity: .9;
}

/* Text link that slides, per the micro-interaction brief. */
.link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  transition: translate var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link .arrow { transition: translate var(--dur-fast) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 -2px; }
  .btn:hover .arrow { translate: 5px 0; }
  .btn--blue:hover  { --btn-bg: var(--deep); }
  .btn--lime:hover  { --btn-bg: var(--turq); }
  .btn--white:hover { --btn-bg: var(--lime); --btn-fg: var(--dark); }
  .btn--orange:hover{ --btn-bg: var(--lime); }
  .btn--ghost:hover { --btn-bg: currentColor; opacity: 1; }
  .btn--ghost:hover span { color: var(--bg); }
  .link:hover { translate: 3px 0; }
  .link:hover .arrow { translate: 5px 0; }
}

/* --- rounded photography ---------------------------------------------
   Every photograph on the site lives in a .frame: a rounded, clipped box
   that owns the aspect ratio so nothing shifts while the image loads.
   Hover belongs to the frame, never to the raw <img>. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--deep-12);
  isolation: isolate;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: scale var(--dur-image) var(--ease-out),
              filter var(--dur-image) var(--ease-out);
  will-change: scale;
}
.frame--sm { border-radius: var(--r-sm); }
.frame--md { border-radius: var(--r-md); }
.frame--xl { border-radius: var(--r-xl); }

/* A hairline that only appears on hover — keeps the resting state clean. */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease-out);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .frame { transition: translate var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
  .frame:hover, a:hover > .frame, .hover-target:hover .frame {
    translate: 0 var(--img-lift);
    box-shadow: var(--img-shadow);
  }
  .frame:hover img, a:hover > .frame img, .hover-target:hover .frame img {
    scale: var(--img-zoom);
    filter: saturate(1.08) contrast(1.03);
  }
  .frame:hover::after, a:hover > .frame::after, .hover-target:hover .frame::after {
    border-color: rgba(217, 255, 67, .55);
  }
  /* On dark chapters the drop shadow is invisible, so the hairline carries it. */
  .is-dark .frame:hover, .is-sunset .frame:hover,
  .is-dark .hover-target:hover .frame, .is-sunset .hover-target:hover .frame {
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  }
}

/* --- accessibility ---------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 100;
  padding: .85em 1.4em;
  background: var(--lime);
  color: var(--dark);
  border-radius: var(--r-btn);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--t-small);
  translate: 0 -160%;
  transition: translate var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { translate: 0 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}