/* Kroje pisma z własnego serwera. Wygenerowane przez
   tools/fonty-lokalne.py, nie poprawiaj ręcznie.
   Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce,
   osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo
   miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu.  */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 87.33%;
  ascent-override: 105.81%;
  descent-override: 32.86%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Cormorant Garamond zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 82.69%;
  ascent-override: 111.75%;
  descent-override: 34.71%;
  line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Jost zapasowy';
  font-weight: 1 1000;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 93.22%;
  ascent-override: 114.78%;
  descent-override: 40.23%;
  line-gap-override: 0.0%;
}

/* ================================================================
   KUJAWSKA MANUFAKTURA SLODYCZY. Strona w przygotowaniu.
   Ciemne kakao, zloto i krem: jezyk pudelka czekoladek, nie szablonu
   firmowego. Barwy sa TYMCZASOWE, klient nie przyslal jeszcze logo.

   Kontrasty zmierzone wobec tla #21100A:
     krem 16,10   zloto 8,70   szept 8,98      (prog AA: 4,50)
   Granice miedzy polami robi kreska zlota, 8,70 wobec obu stron,
   bo dwa ciemne tla nie osiagna 1,5:1 bez zejscia w czern.
   ================================================================ */

:root {
    --kakao:       #21100A;
    --krem:        #F7EFE3;
    --zloto:       #E0A94A;
    --zloto-jasne: #F0C476;
    --szept:       #C7B29A;

    --kreska:      rgba(224, 169, 74, 0.26);
    --kreska-cien: rgba(224, 169, 74, 0.14);

    --space-1: 0.25rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    --w-tresc: clamp(18rem, 90vw, 62rem);

    --fs-nad:      0.75rem;
    --fs-etykieta: 0.6875rem;
    --fs-nazwa:    clamp(2.125rem, 1.30rem + 2.8vw, 3rem);
    --fs-lead:     clamp(1.125rem, 1.00rem + 0.5vw, 1.375rem);
    --fs-telefon:  clamp(1.75rem, 1.20rem + 1.8vw, 2.375rem);
    --fs-mail:     clamp(0.875rem, 0.74rem + 0.45vw, 1rem);

    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --dur:  240ms;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--kakao);
    color: var(--krem);
    font-family: "Jost", "Jost zapasowy", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- ekran ---------- */

.kms-ekran {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: var(--space-10) var(--space-6);
    isolation: isolate;
}

/* ---------- tlo: swiatlo, ziarno, zawijas ---------- */

.kms-tlo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
}

.kms-tlo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58rem 40rem at 14% 6%,  rgba(224, 169, 74, 0.17), transparent 62%),
        radial-gradient(46rem 34rem at 92% 88%, rgba(201, 123, 63, 0.16), transparent 58%);
}

.kms-tlo::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url(../img/ziarno.svg);
}

.kms-spirala {
    position: absolute;
    right: -7rem;
    bottom: -6rem;
    width: min(44vw, 32rem);
    height: auto;
    opacity: 0.22;
}

.kms-spirala__linia {
    stroke-dasharray: 2740;
    stroke-dashoffset: 2740;
    animation: kms-rysuj 2600ms var(--ease) 240ms both;
}

@keyframes kms-rysuj { to { stroke-dashoffset: 0; } }

/* ---------- ramka etykiety ---------- */

.kms-ramka {
    position: absolute;
    inset: 1.75rem;
    z-index: 0;
    border: 1px solid var(--kreska);
    pointer-events: none;
}

.kms-ramka::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--kreska-cien);
}

/* ---------- tresc ---------- */

.kms-tresc {
    position: relative;
    z-index: 1;
    width: var(--w-tresc);
    margin-inline: auto;
    align-self: center;
    padding-block: var(--space-8);
}

.kms-nad {
    margin: 0 0 var(--space-6);
    font-size: var(--fs-nad);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zloto);
}

.kms-nad__kropka { opacity: 0.55; padding-inline: 0.3em; }

.kms-nazwa {
    margin: 0;
    font-family: "Cormorant Garamond", "Cormorant Garamond zapasowy", Georgia, serif;
    font-size: var(--fs-nazwa);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.002em;
    color: var(--krem);
    text-wrap: balance;
}

.kms-zdobnik {
    margin: var(--space-6) 0 0;
    color: var(--zloto);
    line-height: 0;
}

.kms-zdobnik svg { width: 13.75rem; max-width: 70%; height: auto; }

.kms-lead {
    margin: var(--space-6) 0 0;
    font-family: "Cormorant Garamond", "Cormorant Garamond zapasowy", Georgia, serif;
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--szept);
    text-wrap: pretty;
}

/* ---------- kontakt ---------- */

.kms-etykieta {
    font-family: "Jost", "Jost zapasowy", system-ui, sans-serif;
    font-size: var(--fs-etykieta);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--szept);
}

.kms-kontakt {
    margin-top: var(--space-8);
    border-top: 1px solid var(--kreska);
}

.kms-telefon,
.kms-adres {
    display: grid;
    gap: var(--space-1);
    text-decoration: none;
    color: inherit;
}

.kms-telefon {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--kreska-cien);
}

.kms-telefon__numer {
    font-family: "Cormorant Garamond", "Cormorant Garamond zapasowy", Georgia, serif;
    font-size: var(--fs-telefon);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--zloto);
    transition: color var(--dur) var(--ease);
}

.kms-adres {
    min-height: 3.5rem;
    padding-block: var(--space-4);
}

.kms-adres__mail {
    font-size: var(--fs-mail);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--krem);
    overflow-wrap: anywhere;
    transition: color var(--dur) var(--ease);
}

@media (min-width: 64em) {
    .kms-adresy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kms-adresy .kms-adres + .kms-adres {
        border-left: 1px solid var(--kreska-cien);
        padding-left: var(--space-8);
    }
}

@media (max-width: 63.99em) {
    .kms-adresy .kms-adres + .kms-adres { border-top: 1px solid var(--kreska-cien); }
}

.kms-telefon:hover .kms-telefon__numer,
.kms-telefon:focus-visible .kms-telefon__numer,
.kms-adres:hover .kms-adres__mail,
.kms-adres:focus-visible .kms-adres__mail { color: var(--zloto-jasne); }

.kms-telefon:focus-visible,
.kms-adres:focus-visible {
    outline: 2px solid var(--zloto);
    outline-offset: 4px;
}

/* ---------- stopka ---------- */

.kms-stopka {
    position: relative;
    z-index: 1;
    width: var(--w-tresc);
    margin-inline: auto;
    padding-top: var(--space-6);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--szept);
}

.kms-stopka p { margin: 0; }

/* ---------- wejscie ----------
   Animujemy translate, nie transform: fill-mode both przypina animowana
   wlasciwosc na stale i przykrylby pozniejsze reguly najechania.        */

.kms-wejscie {
    opacity: 0;
    translate: 0 14px;
    animation: kms-wejscie 560ms var(--ease) var(--zwloka, 0ms) both;
}

@keyframes kms-wejscie {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kms-wejscie { animation: none; opacity: 1; translate: none; }
    .kms-spirala__linia { animation: none; stroke-dashoffset: 0; }
    .kms-telefon__numer, .kms-adres__mail { transition: none; }
}

/* ---------- male ekrany ---------- */

@media (max-width: 47.99em) {
    .kms-ekran { padding: var(--space-6) var(--space-4); }
    .kms-ramka { inset: 0.625rem; }
    .kms-spirala {
        right: -24vw;
        top: 2%;
        bottom: auto;
        width: min(72vw, 20rem);
        opacity: 0.18;
    }
    .kms-zdobnik svg { width: 11rem; }
}