@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #090908;
  --ink: #eee9de;
  --muted: #a59f93;
  --gold-300: #d7bc83;
  --line: rgb(215 188 131 / 18%);
  --safe-top: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: var(--link-clearance, calc(380px + var(--safe-top))); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-anchor: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 5px; }
[hidden] { display: none !important; }

.bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bg__pattern {
  position: absolute;
  inset: 0;
  background: url('../img/of-monogram.svg') center top / 80px 94px;
  opacity: var(--pattern-opacity, .14);
  mask-image: linear-gradient(#000, #0009 75%, #0004);
}
.bg__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 29%, rgb(177 140 73 / 9%), transparent 52%),
    linear-gradient(90deg, transparent, rgb(9 9 8 / 80%) 38% 62%, transparent);
}
.bg__noise {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.shell {
  position: relative;
  max-width: 488px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
}
.profile { text-align: center; }
.eyebrow {
  margin: 0 0 13px;
  color: var(--gold-300);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.profile__name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 500 clamp(30px, 8.5vw, 40px)/1.15 'Playfair Display', Georgia, serif;
  letter-spacing: -.045em;
}
.profile__badge { width: 18px; height: 18px; flex: none; }
.profile__tagline {
  max-width: 320px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  text-wrap: balance;
}

/* The seat is at 71% of the full image. Its legs hang over the gold card. */
.stage {
  --p: 0;
  --hero-h: clamp(260px, min(98vw, calc(100svh - 300px - var(--safe-top))), 425px);
  position: relative;
  margin-top: 27px;
  isolation: isolate;
  min-height: calc(100svh - 80px);
}
.portrait-layer {
  position: relative;
  height: 0;
  z-index: 4;
  pointer-events: none;
}
.hero {
  position: relative;
  margin: 0 auto;
  width: calc(var(--hero-h) * 1018 / 1545);
  height: var(--hero-h);
  pointer-events: none;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / 35%));
}
/* Postać należy do kartki CTA: punkt siedzenia (71% wysokości) zostaje na
   górnej krawędzi złotego przycisku, więc przy skalowaniu cały czas "siedzi",
   w pełni widoczna — bez przycinania nóg. */
.links > .is-cta > .hero {
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--hero-h) * (1 - var(--seat-overlap, .29)));
  z-index: 2;
  transform: translateX(-50%) scale(calc(1 - var(--p) * var(--shrink, .75)));
  transform-origin: 50% calc((1 - var(--seat-overlap, .29)) * 100%);
  will-change: transform;
}
.hero__halo {
  position: absolute;
  inset: 2% -24% 20%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(209 171 96 / 13%), transparent 67%);
  opacity: calc(1 - var(--p));
}
.hero-space { height: calc(var(--hero-h) * (1 - var(--seat-overlap, .29))); position: relative; }
.hero-note {
  position: absolute;
  left: 0;
  top: 10%;
  font: italic 400 clamp(19px, 5.4vw, 26px)/1.3 'Playfair Display', Georgia, serif;
  color: #c4b395;
  opacity: calc(1 - var(--p));
}
.hero-edition {
  position: absolute;
  right: -2px;
  top: 25%;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #a69b85;
  opacity: calc(1 - var(--p));
}

.links { margin: 0; padding: 0; list-style: none; scroll-margin-top: 16px; }
.links > li { position: relative; margin-top: 10px; }
.links > li:first-child { margin-top: 0; }
.links > .is-cta { z-index: 3; margin-bottom: 30px; }
.has-motion .links > .is-cta { position: sticky; top: calc(180px + var(--safe-top)); }
.has-motion.sticky-disabled .links > .is-cta { position: relative; top: auto; }
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px 19px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(115deg, #1b1a17, #11110f);
  box-shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 8px 24px -16px #000;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.tile::after, .quick__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--touch-x, 50%) var(--touch-y, 50%), rgb(244 219 166 / 16%), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}
.tile.is-touched::after, .quick__link.is-touched::after { opacity: 1; transition-duration: .12s; }
.tile:active { transform: scale(.988); }
.tile__icon { flex: none; width: 24px; color: #c7b68e; }
.tile__icon svg { width: 24px; height: 24px; fill: currentColor; }
.tile__body { flex: 1; min-width: 0; }
.tile__title { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tile__sub { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.tile__go { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: #b3a17e; transition: transform .3s var(--ease); }
.tile__badge { font-size: 9px; color: var(--gold-300); }
.tile--cta {
  flex-wrap: wrap;
  column-gap: 11px;
  row-gap: 0;
  min-height: calc(112px - var(--p) * 40px);
  /* top: stopy postaci (overlaps shrinks with --shrink) + luz 24px na starcie, 8px przy zwiniecie */
  padding: calc(8px + var(--hero-h) * var(--seat-overlap, .29) * (1 - var(--p) * var(--shrink, .75)) + 16px * (1 - var(--p))) 21px calc(22px - var(--p) * 14px);
  border: 1px solid #e3cca0;
  border-radius: 13px;
  color: #211b10;
  background: linear-gradient(112deg, #d6ba7d 0%, #f0dba8 34%, #d8bb7f 70%, #b79860 100%);
  box-shadow: 0 1px 0 #fff3ce inset, 0 5px 0 #715b36, 0 16px 42px -17px rgb(193 148 66 / 35%);
}
.tile--cta::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 18%;
  width: 64%;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #302418b3, transparent 70%);
  transform: scaleX(calc(1 - var(--p) * var(--shrink, .75)));
  pointer-events: none;
}
.tile--cta::after { background: radial-gradient(260px circle at var(--touch-x, 50%) var(--touch-y, 50%), #fff8dc8c, transparent 70%); }
.tile__edition {
  position: absolute;
  top: 17px;
  left: 18px;
  max-width: 65px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: min(clamp(0, calc((var(--seat-overlap, .29) - .14) * 20), .75), clamp(0, calc(.75 - var(--p) * 2.5), .75));
}
.tile--cta .tile__icon { display: none; }
.tile--cta .tile__title { font: 500 calc(30px - var(--p) * 6px)/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.035em; }
.tile--cta .tile__sub { color: #4d4029; font-size: calc(10px - var(--p) * 1px); margin-top: calc(7px - var(--p) * 3px); }
.tile--cta .tile__go { width: calc(42px - var(--p) * 9px); height: calc(42px - var(--p) * 9px); border: 1px solid #51402660; border-radius: 50%; color: #302616; }
.tile--cta .tile__badge {
  order: 3;
  flex-basis: 100%;
  margin-top: calc(13px - var(--p) * 9px);
  padding-top: calc(11px - var(--p) * 7px);
  border-top: 1px solid #64502c40;
  color: #3b2c16;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.links-note { margin: 17px 0 0; text-align: center; color: var(--muted); font-size: 9px; letter-spacing: .09em; }
.links-note span { margin: 0 6px; color: var(--gold-300); }
.elsewhere { margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--line); text-align: center; }
.elsewhere .eyebrow { font-size: 8px; color: var(--muted); }
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; list-style: none; margin: 0; padding: 0; }
.quick__link { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; color: #c8b489; border: 1px solid var(--line); transition: border-color .3s, transform .3s; }
.quick__link svg { width: 17px; height: 17px; fill: currentColor; }
.quick__link:active { transform: scale(.94); }
.foot { margin-top: 24px; text-align: center; color: #999184; font-size: 9px; letter-spacing: .06em; }
.foot a { display: inline-block; padding: 12px; }
.foot__dot { margin-left: 8px; }
.skip { position: fixed; top: -80px; left: 12px; z-index: 20; padding: 12px 20px; background: var(--gold-300); color: #211b10; }
.skip:focus { top: 12px; }
.reveal { animation: reveal .8s var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* A quiet light bloom, never a water ripple or a cursor-following particle trail. */
.touch-glow {
  position: fixed;
  z-index: 10;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #f0d39a26, #d4ab6412 30%, transparent 65%);
  animation: touch-glow .85s var(--ease) both;
}
@keyframes touch-glow { from { opacity: 0; transform: scale(.45); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.5); } }

.stage:not(.has-primary) .hero-space, .is-photo .hero-space { height: calc(var(--hero-h) + 22px); }
.is-photo .hero { width: min(100%, 300px); }
.hero--photo picture { border-radius: 16px; overflow: hidden; }
.is-photo .tile--cta { padding-top: 24px; }
.is-photo .tile__edition, .is-photo .hero-note, .is-photo .hero-edition { display: none; }

@media (hover: hover) {
  .tile:hover { border-color: #baa16a; box-shadow: 0 8px 28px -14px #9b794438; }
  .tile:hover::after, .quick__link:hover::after { opacity: 1; }
  .tile:hover .tile__go { transform: translateX(3px); }
  .tile--cta:hover { box-shadow: 0 1px 0 #fff3ce inset, 0 5px 0 #715b36, 0 20px 44px -15px #c194425c; }
  .quick__link:hover { border-color: #baa16a; transform: translateY(-2px); }
}
@media (min-width: 768px) {
  .shell { padding-top: 44px; padding-left: 30px; padding-right: 30px; }
  .shell::before, .shell::after { content: ''; position: absolute; top: 50px; bottom: 50px; width: 1px; background: linear-gradient(transparent, var(--line) 25% 75%, transparent); pointer-events: none; }
  .shell::before { left: -50px; }
  .shell::after { right: -50px; }
  .stage { margin-top: 32px; }
  .bg__pattern { background-size: 96px 112px; }
  .hero-note { left: 12px; }
  .hero-edition { right: 12px; }
}
@media (max-width: 359px) {
  .shell { padding-left: 16px; padding-right: 16px; padding-top: 22px; }
  .profile__tagline { max-width: 240px; font-size: 10px; }
  .eyebrow { font-size: 8px; letter-spacing: .16em; }
  .hero-note { font-size: 18px; }
  .tile--cta { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .has-motion .links > .is-cta { position: relative; top: auto; }
  .hero { will-change: auto; }
  .touch-glow { display: none; }
}