/* =============================================================
   HÜRREM — Landing
   Paleta: écru i piaskowy beż, jasny trawertyn, ciepłe drewno,
   stare złoto / mosiądz. Jasno, kobieco, hotelowo-lifestyle'owo.
   ============================================================= */

:root{
  /* tło — écru i trawertyn */
  --ecru:        #faf7f1;
  --ecru-2:      #f4ede1;
  --sand:        #ead9c2;   /* piaskowy beż */
  --travertine:  #efe6d7;
  --wood:        #b78e68;   /* ciepłe drewno — akcent */

  /* stare złoto / mosiądz */
  --brass-deep:  #6e5722;   /* do tekstu na jasnym tle */
  --brass:       #a8873e;
  --brass-mid:   #bd9c56;
  --brass-light: #e0cb9c;
  --brass-glow:  #f3e6c4;

  /* typografia */
  --text:        #322e27;
  --text-dim:    #5c554a;
  --muted:       #6e675c;

  --serif:   "Cormorant Garamond", "Didot", "Bodoni MT", Garamond, Georgia, serif;
  --sans:    "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif; /* monogram */

  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  min-height:100svh;
  background:var(--ecru);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.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;
}

/* ---------- Tło: światło, faktura kamienia, ramka ---------- */

.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(66% 50% at 50% 24%, rgba(255,253,249,.96), transparent 74%),
    radial-gradient(58% 48% at 8% 6%,   rgba(232,214,188,.62), transparent 78%),
    radial-gradient(70% 52% at 92% 104%, rgba(183,142,104,.3),  transparent 74%),
    linear-gradient(180deg, #fbf8f3 0%, var(--ecru-2) 56%, #eadfcb 100%);
}

/* Kratownica gwiazd seldżuckich — na jasnym tle działa jak nadruk na papierze
   (multiply), nie jak świecąca nakładka. Maska trzyma środek czysty. */
.lattice{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23a8873e' stroke-width='.8'%3E%3Crect x='22' y='22' width='44' height='44'/%3E%3Cpath d='M44 13 L75 44 L44 75 L13 44 Z'/%3E%3Cpath d='M0 0 L22 22 M88 0 L66 22 M0 88 L22 66 M88 88 L66 66'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:radial-gradient(78% 68% at 50% 42%, transparent 34%, #000 98%);
  -webkit-mask-image:radial-gradient(78% 68% at 50% 42%, transparent 34%, #000 98%);
}

/* delikatna faktura trawertynu — nieruchoma, żeby nie migotała */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .68 0 0 0 0 .60 0 0 0 0 .48 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame{
  position:fixed; z-index:4; pointer-events:none;
  inset:clamp(.75rem, 2vw, 1.6rem);
  border:1px solid rgba(168,135,62,.38);
}
.frame::before,.frame::after{
  content:""; position:absolute; width:10px; height:10px;
  border:1px solid rgba(168,135,62,.55);
}
.frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ---------- Szkielet ---------- */

.shell{
  position:relative; z-index:5;
  display:flex; flex-direction:column;
  min-height:100svh;
  padding:clamp(2rem,5vh,3.5rem) var(--gutter) clamp(1.6rem,4vh,2.6rem);
  text-align:center;
}

.masthead{ flex:0 0 auto; }

.wordmark{
  display:inline-block;
  font-family:var(--sans);
  font-weight:300;
  font-size:.72rem;
  letter-spacing:.62em;
  text-indent:.62em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .5s var(--ease);
}
.wordmark:hover,
.wordmark:focus{ color:var(--brass-deep); }

.stage{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(1.5rem,6vh,4rem) 0;
}

/* ---------- Monogram H ---------- */

.monogram{
  position:relative;
  line-height:.82;
  margin-bottom:clamp(1.2rem,3.5vh,2.4rem);
}

.monogram__letter{
  display:block;
  font-family:var(--display);
  font-weight:400;
  /* Rozmiar zależy od krótszego wymiaru okna — inaczej na niskich ekranach
     (laptop 1280×800) monogram wypycha formularz poza ekran. */
  font-size:clamp(7rem, min(24vw, 27vh), 18.5rem);
  letter-spacing:.02em;
  user-select:none;
}

.monogram__letter{
  position:relative;
  /* --mx / --my ustawia skrypt: refleks wędruje za kursorem */
  --mx:50%;
  --my:34%;
  background-image:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255,252,240,.95)  0%,
      rgba(243,230,196,.72)  9%,
      rgba(224,203,156,.3)  22%,
      rgba(168,135,62,0)    42%
    ),
    linear-gradient(
      118deg,
      var(--brass-deep)  0%,
      var(--brass)      17%,
      var(--brass-light) 31%,
      #8e7130           47%,
      var(--brass-mid)  63%,
      var(--brass-light) 79%,
      #77602a          100%
    );
  background-size:100% 100%, 190% 100%;
  background-position:0 0, 28% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* Miękki cień odkłada się po przeciwnej stronie niż refleks — stąd wrażenie
     jednego źródła światła. Idzie za kształtem litery, nie za jej prostokątem. */
  filter:drop-shadow(
    calc(var(--hx,0px) * -.6)
    calc(9px - var(--hy,0px) * .4)
    18px
    rgba(122,92,52,.22)
  );
}

/* ---------- Ornament ---------- */

.rule{
  display:flex; align-items:center; justify-content:center;
  gap:.9rem;
  width:min(320px, 62vw);
  margin-bottom:clamp(1rem,2.5vh,1.6rem);
}
.rule i{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(168,135,62,.6));
}
.rule i:last-of-type{
  background:linear-gradient(90deg, rgba(168,135,62,.6), transparent);
}
/* romb w pionie — konturowy, w tej samej wadze co linie włosowe obok */
.rule .mark{
  flex:0 0 auto;
  width:8px; height:auto;
  fill:none;
  stroke:var(--brass);
  stroke-width:1.3;
  stroke-linejoin:round;
}

/* ---------- Typografia treści ---------- */

.tagline{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(2.1rem, 6.2vw, 3.9rem);
  letter-spacing:.06em;
  color:var(--text);
}

.lede{
  margin:clamp(.9rem,2.4vh,1.5rem) 0 0;
  /* Miara szersza niż najdłuższe zdanie, więc każde mieści się w jednej linii;
     zawijanie włącza się samo dopiero na wąskich ekranach. */
  max-width:min(100%, 64ch);
  font-size:clamp(.82rem,1.5vw,.95rem);
  font-weight:300;
  letter-spacing:.11em;
  line-height:1.9;
  color:var(--text-dim);
}
.lede span{ display:block; }
.lede span + span{ margin-top:.9em; }

/* ---------- Newsletter ---------- */

.signup{
  width:min(520px, 100%);
  margin-top:clamp(2rem,5vh,3.2rem);
}

.signup__row{
  display:flex; align-items:stretch;
  border-bottom:1px solid rgba(168,135,62,.45);
  transition:border-color .5s var(--ease);
}
.signup__row:focus-within{ border-color:var(--brass); }

.signup__input{
  flex:1 1 auto; min-width:0;
  padding:.95rem .4rem;
  background:transparent;
  border:0; outline:0;
  color:var(--text);
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:300;
  letter-spacing:.13em;
  text-align:left;
}
.signup__input::placeholder{ color:var(--muted); letter-spacing:.13em; }

.signup__btn{
  flex:0 0 auto;
  position:relative; overflow:hidden;
  padding:.95rem 1.6rem;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--brass-deep);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  transition:color .5s var(--ease);
}
.signup__btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--brass-deep), var(--brass) 45%, var(--brass-mid) 60%, var(--brass-deep));
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.signup__btn span{ position:relative; z-index:1; }
.signup__btn:hover{ color:var(--ecru); }
.signup__btn:hover::before{ transform:translateY(0); }
.signup__btn:focus-visible{ outline:1px solid var(--brass); outline-offset:3px; }

.signup__note{
  margin:1.1rem 0 0;
  font-size:.7rem;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.07em;
  color:var(--text-dim);
}
.signup__note label{
  display:flex; align-items:flex-start; gap:.6rem;
  text-align:left; cursor:pointer;
}
.signup__note input{
  flex:0 0 auto;
  appearance:none; -webkit-appearance:none;
  width:12px; height:12px; margin-top:.28rem;
  border:1px solid rgba(168,135,62,.6);
  background:transparent; cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.signup__note input:checked{
  background:var(--brass);
  border-color:var(--brass);
  box-shadow:inset 0 0 0 2px var(--ecru);
}
.signup__note input:focus-visible{ outline:1px solid var(--brass); outline-offset:2px; }

.signup__msg{
  margin:.9rem 0 0; min-height:1.2em;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-deep);
  opacity:0; transform:translateY(4px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.signup__msg.is-visible{ opacity:1; transform:none; }
.signup__msg.is-error{ color:#9a4b32; }

.signup.is-sent .signup__row,
.signup.is-sent .signup__note{
  opacity:.3; pointer-events:none;
  transition:opacity .6s var(--ease);
}

/* ---------- Stopka ---------- */

.colophon{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.social{
  display:flex; align-items:center; gap:.75rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.social a{
  color:var(--text-dim); text-decoration:none;
  transition:color .5s var(--ease);
}
.social a:hover{ color:var(--brass-deep); }
.copy{
  margin:0;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Wejście ---------- */

/* Stan startowy tylko przy działającym JS — bez niego treść jest po prostu widoczna. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
}
.is-ready .reveal{
  opacity:1; transform:none; filter:none;
  transition:opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease);
}
.is-ready .reveal[data-delay="0"]{ transition-delay:.15s }
.is-ready .reveal[data-delay="1"]{ transition-delay:.75s }
.is-ready .reveal[data-delay="2"]{ transition-delay:.95s }
.is-ready .reveal[data-delay="3"]{ transition-delay:1.15s }
.is-ready .reveal[data-delay="4"]{ transition-delay:1.4s }

/* ---------- Małe ekrany ---------- */

/* Niskie okna (laptopy 1280×800, tryb poziomy) — zamiast zmniejszać monogram
   ścieśniamy oddechy wokół sceny, żeby całość mieściła się bez przewijania. */
@media (max-height:860px){
  .stage{ padding:clamp(.5rem,2.5vh,2rem) 0; }
  .signup{ margin-top:clamp(1.2rem,3vh,2.4rem); }
}

@media (max-width:520px){
  .signup__row{ flex-direction:column; border-bottom:0; }
  .signup__input{
    text-align:center;
    border-bottom:1px solid rgba(168,135,62,.45);
    padding:.85rem .4rem;
  }
  .signup__row:focus-within .signup__input{ border-color:var(--brass); }
  .signup__btn{
    margin-top:.6rem;
    border:1px solid rgba(168,135,62,.5);
  }
  .social{ gap:.55rem; font-size:.58rem; letter-spacing:.18em; }
}

/* ---------- Dostępność ruchu ---------- */

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; filter:none }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------- Wydruk ---------- */

@media print{
  .grain,.glow,.frame,.lattice{ display:none }
  body{ background:#fff; color:#111 }
  .monogram__letter{ color:#7d6326; background:none; -webkit-text-fill-color:#7d6326 }
}