/* ==========================================================================
   Centrum Optyczne Michalowska - base
   Tokeny, reset, typografia. Nic tu nie jest specyficzne dla sekcji.
   ========================================================================== */

@import url('../fonts/fonts.css');

/* --- Tokeny ------------------------------------------------------------- */
:root {
  /* Powierzchnie */
  --paper:       #FDFBF6;
  --panel:       #EAE7E0;
  --panel-soft:  #F5F3EF;
  --hairline:    #E0DDD5;
  --ink:         #242422;
  --ink-soft:    #3A3A36;
  --muted:       #6B6B66;
  --lead-open:   #787368;  /* najjasniejszy odcien przechodzacy AA na papierze */

  /* Brand */
  --purple:      #602F81;
  --purple-deep: #4A2464;
  --purple-tint: #F1ECF5;

  /* Typografia */
  --sans:  'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Zodiak', Georgia, 'Times New Roman', serif;

  /* Rytm */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --measure: 1440px;
  --section: clamp(4.5rem, 9vw, 9rem);
  --pill:    999px;

  /* Ruch */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.6s;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem)/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--purple); color: #fff; }

/* --- Typografia --------------------------------------------------------- */
/* Waga 300 to sygnatura. Nigdzie nie pogrubiamy naglowkow. */
.display {
  font: 300 clamp(3.5rem, 13vw, 13rem)/0.92 var(--sans);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.h1 {
  font: 300 clamp(2rem, 1.1rem + 3.6vw, 3.6rem)/1.1 var(--sans);
  letter-spacing: -0.015em;
}
.h2 {
  font: 300 clamp(2.4rem, 1.2rem + 5vw, 5rem)/1.02 var(--sans);
  letter-spacing: -0.02em;
}
.h3 { font: 300 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.3 var(--sans); }

/* Mieszany naglowek sans + serif - najmocniejszy znak jezyka wizualnego */
.h2 .serif,
.h1 .serif,
.serif { font-family: var(--serif); font-weight: 300; }
.h2 .line { display: block; }

/* Two-tone lead: pierwsze zdanie wyszarzone, reszta w ink */
.lead {
  font: 300 clamp(1.35rem, 1rem + 1.7vw, 2.5rem)/1.3 var(--sans);
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.lead--wide { max-width: 34ch; }
/* Otwarcie dwutonowego leadu. Bylo #B9B5AC, czyli kontrast 1.98:1 na papierze -
   ladne, ale to jest TRESC, nie dekoracja, wiec bylo po prostu nieczytelne.
   #787368 to najjasniejszy odcien, ktory przechodzi WCAG AA (4.56:1) i nadal
   robi wyrazny skok wzgledem --ink (15:1). Gest zostaje, bariera znika. */
.lead .open { color: var(--lead-open); }

.body-lg { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.75; max-width: 62ch; }
.body    { max-width: 60ch; }
.muted   { color: var(--muted); }

/* Micro-label: rozstrzelone wersaliki, echo logotypu "CENTRUM OPTYCZNE" */
.label {
  font: 500 0.65rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--ink { color: var(--ink); }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }

/* Rytm miedzy sekcjami.
   Kazda sekcja wnosi wlasny padding gorny i dolny, wiec na kazdym styku powstawalo
   ~216px martwego powietrza i strona czytala sie jak stos blokow zamiast kompozycji.
   Scalamy oba paddingi w jeden oddech. Sekcje z wlasnym, nieprzezroczystym tlem
   sa wylaczone, zeby nie zamalowaly zamykajacego hairline'u poprzednika. */
main > section + section { margin-block-start: calc(var(--section) * -0.5); }
main > section + section[data-solid],
main > section[data-solid] + section { margin-block-start: 0; }
.bleed   { width: 100%; }
.rule    { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* Pionowa etykieta sekcji przy hairline (na mobile spada do poziomu) */
.marked { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.marked > .label { color: var(--muted); }
@media (min-width: 1024px) {
  .marked { grid-template-columns: 3.5rem 1fr; gap: 0; }
  .marked > .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: start;
    padding-right: 1.5rem;
    border-right: 1px solid var(--hairline);
    height: 100%;
  }
}

/* --- Utilities ---------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.on-dark { background: var(--ink); color: var(--paper); }
.on-dark .label, .on-dark .muted { color: #A5A199; }
.on-dark .rule, .on-dark .hairline-t { border-color: rgba(253,251,246,0.16); }
.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }