/*
Theme Name: Wędliny z Godziszki
Author: Rodzina Bożek
Description: Strona historyczna rodzinnej masarni „Wędliny z Godziszki" — historia Adolfa Bożka. Elegancki motyw w stylu starych dokumentów.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: wedliny-godziszka
*/

:root {
      --parchment:    oklch(94% 0.025 80);
      --parchment-dk: oklch(88% 0.032 75);
      --parchment-md: oklch(91% 0.028 78);
      --ink:          oklch(22% 0.020 55);
      --ink-light:    oklch(38% 0.022 58);
      --sepia:        oklch(42% 0.060 60);
      --red-accent:   oklch(40% 0.100 25);
      --gold:         oklch(58% 0.090 72);
      --rule:         oklch(65% 0.045 68);
    }

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

    html { scroll-behavior: smooth; }

    body {
      background-color: oklch(82% 0.030 72);
      background-image:
        url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
      font-family: 'EB Garamond', Georgia, serif;
      color: var(--ink);
      min-height: 100vh;
    }

    /* ── HEADER ── */
    header {
      background-color: var(--parchment-dk);
      background-image:
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
      border-bottom: 3px double var(--rule);
      text-align: center;
      padding: 64px 24px 52px;
      position: relative;
    }

    header::before, header::after {
      content: '';
      display: block;
      height: 1px;
      background: var(--rule);
      margin: 0 auto;
      width: 60%;
    }
    header::before { margin-bottom: 28px; }
    header::after  { margin-top: 28px; }

    .header-eyebrow {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: var(--sepia);
      margin-bottom: 16px;
      text-align: center;
    }

    h1 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(38px, 7vw, 78px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--ink);
      letter-spacing: 0.02em;
    }

    h1 em {
      font-style: italic;
      color: var(--red-accent);
    }

    .header-sub {
      font-size: 18px;
      font-style: italic;
      color: var(--ink-light);
      margin-top: 14px;
      font-weight: 400;
      text-align: center;
    }

    .header-ornament {
      display: block;
      color: var(--gold);
      font-size: 28px;
      margin: 16px 0 0;
      letter-spacing: 0.4em;
    }

    /* ── NAV ── */
    nav {
      background: var(--ink);
      display: flex;
      justify-content: center;
      gap: 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav a {
      color: var(--parchment);
      text-decoration: none;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 13px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      padding: 14px 28px;
      border-right: 1px solid oklch(32% 0.010 55);
      transition: background 0.2s, color 0.2s;
    }
    nav a:first-child { border-left: 1px solid oklch(32% 0.010 55); }
    nav a:hover { background: var(--sepia); color: var(--parchment); }

    /* ── MAIN CONTENT ── */
    main {
      max-width: 820px;
      margin: 0 auto;
      padding: 0 24px 80px;
    }

    /* ── INTRO QUOTE ── */
    .intro-quote {
      background: var(--parchment);
      border-left: 4px solid var(--red-accent);
      margin: 56px 0 0;
      padding: 32px 40px;
      font-size: 22px;
      font-style: italic;
      line-height: 1.6;
      color: var(--sepia);
      position: relative;
    }
    .intro-quote::before {
      content: '\201C';
      font-size: 80px;
      color: var(--red-accent);
      opacity: 0.3;
      position: absolute;
      top: -10px;
      left: 12px;
      font-family: Georgia, serif;
      line-height: 1;
    }

    /* ── SECTIONS ── */
    section {
      margin-top: 72px;
    }

    .section-label {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 11px;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: 8px;
    }

    h2 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(26px, 4vw, 38px);
      font-weight: 500;
      color: var(--ink);
      line-height: 1.2;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule);
      position: relative;
    }

    h2::after {
      content: '';
      display: block;
      height: 3px;
      width: 48px;
      background: var(--red-accent);
      position: absolute;
      bottom: -2px;
      left: 0;
    }

    p {
      font-size: 18px;
      line-height: 1.80;
      color: var(--ink-light);
      text-align: justify;
      text-wrap: pretty;
      margin-top: 18px;
    }

    p:first-of-type { margin-top: 0; }

    strong {
      color: var(--ink);
      font-weight: 600;
    }

    /* ── DOCUMENT IMAGES ── */
    .doc-figure {
      margin: 40px 0;
      text-align: center;
    }

    .doc-figure img {
      max-width: 100%;
      width: 480px;
      box-shadow: 4px 6px 28px oklch(30% 0.030 60 / 0.35);
      filter: sepia(18%) contrast(1.04) brightness(1.01);
      display: block;
      margin: 0 auto;
    }

    .doc-figure img.doc-png {
      box-shadow: none;
      filter: sepia(18%) contrast(1.04) brightness(1.01) drop-shadow(4px 6px 18px oklch(30% 0.030 60 / 0.45));
    }



    .doc-figure figcaption {
      font-size: 13px;
      font-style: italic;
      color: var(--sepia);
      margin-top: 12px;
      letter-spacing: 0.04em;
    }

    /* ── WIDE PHOTO ── */
    .photo-figure {
      margin: 44px -48px;
    }

    @media (max-width: 900px) {
      .photo-figure { margin: 40px 0; }
    }

    .photo-figure img {
      width: 100%;
      display: block;
      filter: sepia(20%) contrast(1.05) brightness(0.98);
      box-shadow: 0 8px 40px oklch(20% 0.020 60 / 0.30);
    }

    .photo-figure figcaption {
      font-size: 13px;
      font-style: italic;
      color: var(--sepia);
      margin-top: 12px;
      text-align: center;
      letter-spacing: 0.04em;
    }

    /* ── TWO-UP DOCS ── */
    .doc-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin: 40px 0;
    }

    @media (max-width: 620px) {
      .doc-pair { grid-template-columns: 1fr; }
    }

    .doc-pair .doc-figure { margin: 0; }

    /* ── HIGHLIGHT BOX ── */
    .highlight {
      background: var(--parchment-dk);
      border: 1px solid var(--rule);
      padding: 28px 36px;
      margin: 36px 0;
      font-size: 17px;
      line-height: 1.7;
      color: var(--ink-light);
      font-style: italic;
      position: relative;
    }

    .highlight strong {
      display: block;
      font-style: normal;
      font-size: 13px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--sepia);
      margin-bottom: 8px;
    }

    /* ── DIVIDER ── */
    .ornament-divider {
      text-align: center;
      color: var(--gold);
      font-size: 20px;
      letter-spacing: 0.5em;
      margin: 60px 0;
      opacity: 0.7;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--ink);
      color: var(--parchment-md);
      text-align: center;
      padding: 40px 24px;
      font-size: 14px;
      letter-spacing: 0.08em;
      font-style: italic;
    }

    footer .footer-brand {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: var(--gold);
      display: block;
      margin-bottom: 8px;
    }

    /* ── TIMELINE BADGE ── */
    .year-badge {
      display: inline-block;
      background: var(--red-accent);
      color: oklch(96% 0.010 80);
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.15em;
      padding: 3px 12px;
      margin-bottom: 6px;
    }