/* ==========================================================================
   Harce — reportaż ślubny. Design system (tokens + base components).
   Light, quiet, editorial. Questrial for headings/labels, EB Garamond for body,
   the handwritten "harce" mark lives only in the SVG logo.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Questrial&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* Brand palette (from the logo package) */
  --ink:        #2F2A25;   /* text / word mark on light */
  --cream:      #F2EDE4;   /* mark on dark, dark-section text */
  --muted:      #8A7F72;   /* captions, tag line */
  --muted-dark: #B9AD9D;   /* captions on dark */
  --line:       #C3B8A8;   /* hairlines on light */
  --line-dark:  #6F6559;   /* hairlines on dark */

  --bg:      #FAF7F1;      /* page — warm near-white */
  --surface: #F2EDE4;      /* raised / alternating band */
  --dark:    #2F2A25;      /* dark band (footer) */

  --line-soft: color-mix(in srgb, var(--ink) 12%, transparent);

  --font-head: "Questrial", system-ui, sans-serif;
  --font-body: "EB Garamond", Georgia, serif;

  --wrap: 2280px;   /* effectively full-width on normal screens; the side margins
                       come from --pad, and this only caps on very wide displays */
  --pad: clamp(18px, 3vw, 56px);

  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(47,42,37,.08);
  --shadow-md: 0 8px 30px rgba(47,42,37,.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(34px, 4.4vw, 52px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }

p { margin: 0 0 1em; }

a { color: var(--ink); text-underline-offset: 3px; }

.kicker {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.text-muted { color: var(--muted); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--muted) 40%, transparent); }

/* — layout helpers — */
.wrap { max-width: 100%; overflow-x: hidden; }
.inner { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(56px, 8vw, 120px); }
.band { background: var(--surface); }

.rule { height: 1px; border: 0; background: var(--line-soft); margin: 0; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; cursor: pointer; text-decoration: none;
  padding: 15px 26px; border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
/* filled ink */
.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary:hover { background: #423b33; border-color: #423b33; }
/* ink outline */
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
/* cream, for use over photos */
.btn-light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-light:hover { background: #fff; border-color: #fff; }
/* transparent over photos */
.btn-on-photo { border-color: rgba(242,237,228,.75); color: #fff; }
.btn-on-photo:hover { background: rgba(242,237,228,.14); border-color: #fff; }

/* — nav links — */
.navlink {
  font-family: var(--font-head);
  font-size: 15px; letter-spacing: .04em; text-decoration: none;
  color: inherit; opacity: .85;
}
.navlink:hover, .navlink[aria-current="page"] { opacity: 1; }