/* ============================================================================
   AMADO — reset, osnovna tipografija, pomoćne klase
   ==========================================================================*/

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: only light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--forest);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
/* figure nosi podrazumijevanih 40px bočne margine — bez ovoga su sve slike
   uže nego što grid nalaže. */
p, figure, figcaption, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--bone); color: var(--forest); }
.u-on-light ::selection { background: var(--forest); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.u-on-light :focus-visible { outline-color: var(--forest); }

/* --- Tipografske uloge ---------------------------------------------------- */

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.t-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  text-wrap: balance;
}

.t-title--lg { font-size: var(--step-4); letter-spacing: calc(var(--track-title) - .015em); }

.t-label {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.t-body { max-width: var(--measure); }
.t-body + .t-body { margin-top: 1.15em; }

.t-lead { font-size: var(--step-1); line-height: 1.65; font-weight: 300; }

/* --- Pomoćne -------------------------------------------------------------- */

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

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--bone); color: var(--forest);
  font-size: var(--step--1); font-weight: 500; letter-spacing: .04em;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* Zrnatost — sloj preko tamnih sekcija, nikad ne hvata pointer. */
.u-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.u-hair { border: 0; height: 1px; background: var(--hair-dark); margin: 0; }
.u-on-light .u-hair { background: var(--hair-light); }