/* ============================================================
   site.css — wspólne style (paleta Elementor, kanciasta)
============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: 'Inter', system-ui, sans-serif; background: #F9F9F9; color: #161718; }
.font-serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
.caps { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 500; }
.num { font-feature-settings: "tnum","ss01"; }

/* WSZYSTKO KANCIASTE */
*, *::before, *::after { border-radius: 0 !important; }

/* editorial section number */
.sect-num { display: inline-flex; align-items: center; gap: 0.75rem; color: #7A7A7A; }
.sect-num::before { content: ''; width: 56px; height: 1px; background: #161718; opacity: .55; }

/* underline link */
.ulink {
  background-image: linear-gradient(#C58703,#C58703);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s ease;
}
.ulink:hover { background-size: 100% 2px; }

/* drop-quote */
.dropquote::before {
  content: "\201C";
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 9rem; line-height: 0.6; color: #C58703;
  float: left; margin: 0.55rem 0.5rem -0.5rem -0.25rem;
}

:focus-visible { outline: 2px solid #C58703; outline-offset: 3px; }

/* Pudrowy róż jako primary jest zbyt jasny dla białego tekstu —
   wymuszamy ciemny tekst na CTA z bg-sage / hover bg-sageDeep */
.bg-sage, .hover\:bg-sageDeep:hover { color: #161718 !important; }
.bg-sage svg, .hover\:bg-sageDeep:hover svg { color: #161718; }

.grain { position: relative; }
.grain::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(22,23,24,0.025) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: multiply; opacity:.6;
}

.photo-frame { box-shadow: 0 1px 0 #E5E5E5, 0 30px 60px -30px rgba(22,23,24,0.25); }

.placeholder {
  background:
    repeating-linear-gradient(135deg, #EFEFEF 0 14px, #E5E5E5 14px 28px);
  color: #7A7A7A;
}
.placeholder .cap {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.04em;
  background: #F9F9F9; padding: 6px 10px; border: 1px solid #E5E5E5;
}

/* hex shape */
.hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .acc-plus { transform: rotate(45deg); }
.acc-plus { transition: transform .25s ease; }

.page-hero {
  padding-top: 4rem; padding-bottom: 4rem;
  border-bottom: 1px solid #E5E5E5;
}
@media (min-width: 1024px) {
  .page-hero { padding-top: 6rem; padding-bottom: 5rem; }
}

.nav-active { color: #161718; background-image: linear-gradient(#161718,#161718); background-size: 100% 1.5px; background-repeat: no-repeat; background-position: 0 100%; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}
[x-cloak] { display: none !important; }

/* arbitrary utilities used dynamicznie w site.js (Tailwind ich nie skanuje w JS template strings) */
.backdrop-blur-\[2px\] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.shadow-\[0_1px_0_\#E8DFD3\] { --tw-shadow: 0 1px 0 #E8DFD3; box-shadow: 0 1px 0 #E8DFD3; }