/* olwynmavelflux.com — a Czech marionette stage: painted indigo backdrop, canvas wings, gilt proscenium,
   a lime-wood puppet on flax strings, footlights from below (shadows fall up). Caprasimo + Brygada 1918. */
:root {
  --ink: #1A1633; --ink2: #48416F;
  --night: #1C2366; --night2: #121848;
  --wing1: #2A3388; --wing2: #36409A; --wing3: #4550AC;
  --paper: #F3EDE0; --paper2: #C9C6E6;
  --amber: #F2B33D; --amberHi: #FFD98A;
  --lime: #E9D6AE; --lime2: #C9AE7C;
  --gilt: #C9A04A; --giltD: #7A5516;
  --flax: #D8CCAE;
  --canvas: #E7E4F1; --canvas2: #D9D5EA;
  --disp: "Caprasimo", Georgia, serif;
  --text: "Brygada 1918", Georgia, serif;
  --pad: 16px;
  /* floating-objects: the footlight throws the shadow UP onto the backdrop */
  --up: 0 -14px 28px rgba(18, 24, 72, .38), 0 4px 10px rgba(18, 24, 72, .19);
  --up-s: 0 -8px 28px rgba(18, 24, 72, .3), 0 4px 10px rgba(18, 24, 72, .15);
  --up-plate: 0 -10px 28px rgba(18, 24, 72, .18), 0 4px 10px rgba(18, 24, 72, .09);
  --up-plate-on: 0 -22px 28px rgba(18, 24, 72, .5), 0 4px 10px rgba(18, 24, 72, .25);
}
@media (min-width: 1200px) { :root { --pad: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--wing2) var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.55 var(--text); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- shared bits ---------- */
.num { font: 400 22px/1 var(--disp); color: var(--giltD); }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1.2 var(--text); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; transition: background-color .25s, box-shadow .25s; }
.chip--dark { color: var(--paper2); }
.chip--ink { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink);
  font: 700 16px/1.2 var(--text); text-decoration: none; box-shadow: var(--up-s); transition: transform .25s, box-shadow .25s; }
.btn > i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime2); transition: background-color .25s; }
.btn:hover, .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 -12px 30px rgba(18, 24, 72, .4), 0 4px 10px rgba(18, 24, 72, .18); }
.btn:hover > i, .btn:focus-visible > i { background: var(--amber); }
.btn--s { padding: 11px 20px; font-size: 15px; }
.btn--canvas { background: var(--canvas); }
.more { font: 700 15px/1.3 var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.more:hover { text-decoration-thickness: 2px; }
.linkish { background: none; border: 0; padding: 0; text-decoration: none; }

/* footlights: lamp hoods on a wooden apron */
.lights { position: relative; height: 32px; }
.lights::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; bottom: 0; background: var(--lime); border-top: 3px solid var(--lime2); }
.lamps { position: absolute; inset: 0 0 auto; height: 20px; display: flex; }
.lamps i { flex: 1; position: relative; }
.lamps i::before { content: ""; position: absolute; left: 50%; top: 2px; width: 28px; height: 18px; margin-left: -14px; border-radius: 20px; background: var(--amber); }
.lamps i::after { content: ""; position: absolute; left: 50%; top: 12px; width: 36px; height: 8px; margin-left: -18px; border-radius: 3px; background: var(--night2); }
.lights .lamps i:nth-child(n+7) { display: none; }
.lights--f { height: 24px; background: var(--night2); }
.lights--f .lamps i:nth-child(n+7) { display: block; }
.lights--f .lamps i:nth-child(n+9) { display: none; }
@media (min-width: 1200px) {
  .lights { height: 40px; }
  .lamps i::before { width: 40px; margin-left: -20px; }
  .lamps i::after { width: 52px; margin-left: -26px; }
  .lights .lamps i:nth-child(n+7) { display: block; }
  .lights .lamps i:nth-child(n+16) { display: none; }
  .lights--f { height: 24px; }
  .lights--f .lamps i:nth-child(n+9) { display: block; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .lights .lamps i:nth-child(n+7) { display: block; }
  .lights .lamps i:nth-child(n+11) { display: none; }
  .lights--f .lamps i:nth-child(n+9) { display: block; }
  .lights--f .lamps i:nth-child(n+15) { display: none; }
}

/* paper-cutout-layers: stage wings with a scalloped painted edge, 10 px apart, thin shadow between */
.wings { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.wg { position: absolute; top: 0; height: 100%; background-repeat: repeat-y; will-change: transform; }
.wg-l { left: 0; filter: drop-shadow(4px 0 4px rgba(18, 24, 72, .45)); }
.wg-r { right: 0; transform: scaleX(-1); filter: drop-shadow(4px 0 4px rgba(18, 24, 72, .45)); }
.wings--hero .w0 { width: 74px; background-size: 74px 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='60'%3E%3Cpath d='M0,0 L34,0 Q45,10 34,20 Q47.5,30 34,40 Q50,50 34,60 L0,60 Z' fill='%234550AC'/%3E%3C/svg%3E"); }
.wings--hero .w1 { width: 64px; background-size: 64px 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='60'%3E%3Cpath d='M0,0 L24,0 Q35,10 24,20 Q37.5,30 24,40 Q40,50 24,60 L0,60 Z' fill='%2336409A'/%3E%3C/svg%3E"); }
.wings--hero .w2 { width: 54px; background-size: 54px 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='60'%3E%3Cpath d='M0,0 L14,0 Q25,10 14,20 Q27.5,30 14,40 Q30,50 14,60 L0,60 Z' fill='%232A3388'/%3E%3C/svg%3E"); }
.wings--band .w0 { width: 50px; background-size: 50px 45px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45'%3E%3Cpath d='M0,0 L20,0 Q28.2,7.5 20,15 Q30.1,22.5 20,30 Q32,37.5 20,45 L0,45 Z' fill='%2336409A'/%3E%3C/svg%3E"); }
.wings--band .w1 { width: 40px; background-size: 40px 45px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='45'%3E%3Cpath d='M0,0 L10,0 Q18.2,7.5 10,15 Q20.1,22.5 10,30 Q22,37.5 10,45 L0,45 Z' fill='%232A3388'/%3E%3C/svg%3E"); }
@media (min-width: 1200px) {
  .wings--hero .w0 { width: 162px; background-size: 162px 96px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='162' height='96'%3E%3Cpath d='M0,0 L98,0 Q115.6,16 98,32 Q119.6,48 98,64 Q123.6,80 98,96 L0,96 Z' fill='%234550AC'/%3E%3C/svg%3E"); }
  .wings--hero .w1 { width: 140px; background-size: 140px 96px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='96'%3E%3Cpath d='M0,0 L76,0 Q93.6,16 76,32 Q97.6,48 76,64 Q101.6,80 76,96 L0,96 Z' fill='%2336409A'/%3E%3C/svg%3E"); }
  .wings--hero .w2 { width: 118px; background-size: 118px 96px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='96'%3E%3Cpath d='M0,0 L54,0 Q71.6,16 54,32 Q75.6,48 54,64 Q79.6,80 54,96 L0,96 Z' fill='%232A3388'/%3E%3C/svg%3E"); }
  .wings--band .w0 { width: 118px; background-size: 118px 84px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='84'%3E%3Cpath d='M0,0 L62,0 Q77.4,14 62,28 Q80.9,42 62,56 Q84.4,70 62,84 L0,84 Z' fill='%2336409A'/%3E%3C/svg%3E"); }
  .wings--band .w1 { width: 96px; background-size: 96px 84px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84'%3E%3Cpath d='M0,0 L40,0 Q55.4,14 40,28 Q58.9,42 40,56 Q62.4,70 40,84 L0,84 Z' fill='%232A3388'/%3E%3C/svg%3E"); }
}
/* parallax-depth: JS sets --py on the wings (0.45 / 0.3 / 0.15 of the scroll) */
.wg-l { transform: translateY(var(--py, 0)); }
.wg-r { transform: translateY(var(--py, 0)) scaleX(-1); }

/* hanging props (moon / star) on one flax string */
.prop { position: absolute; z-index: 1; display: block; filter: drop-shadow(0 -12px 14px rgba(18, 24, 72, .35)); }
.prop::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 4px); width: 1.2px; margin-left: -.6px; height: var(--len, 100px); background: rgba(216, 204, 174, .9); }
.prop svg { width: 100%; height: auto; }
.prop--star::before { bottom: calc(100% - 6px); }

/* ---------- header + curtain menu ---------- */
.top { position: absolute; z-index: 20; left: 0; right: 0; top: 0; height: 0; }
.logo { position: absolute; left: var(--pad); top: 20px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); }
.mark { position: relative; width: 34px; height: 34px; flex: none; background: var(--amber); border-radius: 17px 17px 3px 3px; }
.mark .mk { position: absolute; left: 3.8px; top: 9px; width: 26.4px; }
.lg-t { font: 400 18px/1 var(--disp); white-space: nowrap; }
.menu-b { position: absolute; right: var(--pad); top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: var(--lime); box-shadow: 0 -10px 28px rgba(18, 24, 72, .35), 0 4px 10px rgba(18, 24, 72, .17); transition: transform .25s; }
.menu-b:hover { transform: translateY(-2px); }
.mi { width: 46px; height: 26px; display: grid; place-items: start center; padding-top: 1px; }
.mi-x { width: 44px; transition: transform .4s; }
.menu-b:hover .mi-x, .menu-b[aria-expanded="true"] .mi-x { transform: rotate(-8deg); }
.mb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1200px) {
  .logo { top: 30px; }
  .lg-t { font-size: 22px; }
  .menu-b { top: 26px; padding: 10px 18px 10px 12px; }
  .mb-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: 700 15px/1 var(--text); color: var(--ink); }
}
/* the curtain: a pleated drop that falls from the flies, three plates hung from the cross control */
.curtain { position: fixed; inset: 0; z-index: 50; background: rgba(18, 24, 72, .55); }
.curtain[hidden] { display: none; }
.cu-in { position: relative; min-height: min(560px, 100%); max-height: 100%; overflow: auto; padding: 24px var(--pad) 80px; color: var(--paper);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px, rgba(0, 0, 0, .14) 22px 34px, transparent 34px 46px), linear-gradient(180deg, var(--night2), var(--night) 70%, var(--wing1));
  -webkit-mask: radial-gradient(22px 16px at 50% 100%, transparent 98%, #000) 0 0 / 46px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 16px) no-repeat;
          mask: radial-gradient(22px 16px at 50% 100%, transparent 98%, #000) 0 0 / 46px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 16px) no-repeat;
  transform: translateY(-100%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.curtain.is-open .cu-in { transform: none; }
.cu-x { position: absolute; right: var(--pad); top: 18px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; box-shadow: var(--up-s); }
.cu-cross { width: 132px; margin: 42px auto 0; filter: drop-shadow(0 -8px 14px rgba(0, 0, 0, .3)); }
.cu-l { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: -36px; }
.cu-l li { position: relative; padding-top: calc(56px + var(--i) * 0px); }
.cu-l li::before, .cu-l li::after { content: ""; position: absolute; top: 0; height: 100%; width: 1.2px; background: rgba(216, 204, 174, .7); }
.cu-l li::before { left: 28%; } .cu-l li::after { right: 28%; }
.cu-l li + li { padding-top: 18px; }
.cu-l a { position: relative; z-index: 1; display: block; min-width: 240px; text-align: center; padding: 14px 32px; border-radius: 40px 40px 4px 4px; border: 2px solid var(--gilt); background: var(--lime); color: var(--ink);
  font: 400 28px/1.1 var(--disp); text-decoration: none; box-shadow: var(--up-s); transition: transform .25s, border-color .25s; }
.cu-l a:hover, .cu-l a:focus-visible { transform: translateY(-6px); border-color: var(--amber); }
.cu-l a[aria-current] { background: var(--amber); }
.curtain.is-open .cu-l li { animation: hang-in .6s both cubic-bezier(.3, 1.4, .5, 1); animation-delay: calc(.25s + var(--i) * .08s); }
@keyframes hang-in { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- hero (home) ---------- */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg i { position: absolute; inset: 0; }
.wash { background: radial-gradient(42% 42% at 50% 50%, rgba(242, 179, 61, .55), rgba(54, 64, 154, .25) 45%, rgba(28, 35, 102, 0) 100%) 0 0 / 100% 1250px no-repeat; }
/* painted backdrop: canvas widths sewn edge to edge, uneven paint */
.paint { background:
  radial-gradient(35% 30% at 25% 20%, rgba(54, 64, 154, .45), transparent 100%),
  radial-gradient(30% 25% at 85% 35%, rgba(18, 24, 72, .5), transparent 100%),
  repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1.5px), rgba(69, 80, 172, .22) calc(33.333% - 1.5px) 33.333%); }
.prosc { position: absolute; z-index: 1; pointer-events: none; }
.prosc--d { display: none; }
.prosc--m { left: 10px; right: 10px; top: 236px; width: calc(100% - 20px); height: 378px; }
.pr-hm { width: 38.5px; left: calc(50% + 120px - 19px); top: 470px; --len: 90px; }
.pr-hs { width: 24px; left: calc(50% - 124px - 12px); top: 470px; --len: 90px; }
.stage { position: relative; z-index: 2; height: 632px; }
.h1 { position: absolute; left: 24px; right: 24px; top: 92px; z-index: 3; text-align: center; font: 400 clamp(46px, 8vw, 64px)/.96 var(--disp); letter-spacing: -.015em; color: var(--paper); }
.rig { position: absolute; left: calc(50% - 81.5px); top: 188px; width: 163px; height: 422px; z-index: 2; }
.rig-x { position: absolute; left: 50%; top: 0; width: 132px; margin-left: -66px; z-index: 2; filter: drop-shadow(0 -8px 14px rgba(18, 24, 72, .3)) drop-shadow(0 4px 5px rgba(18, 24, 72, .15)); }
.swing { position: absolute; inset: 0; transform-origin: 50% 36px; }
.str { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.str--d { display: none; }
.puppet { position: absolute; left: 0; top: 92px; width: 163px; height: 330px; filter: drop-shadow(0 -34px 40px rgba(18, 24, 72, .55)) drop-shadow(0 -6px 30px rgba(242, 179, 61, .18)); }
.glow { position: absolute; left: 50%; top: 540px; width: 293px; height: 90px; margin-left: -146.5px; background: radial-gradient(50% 100% at 50% 100%, rgba(242, 179, 61, .45), rgba(242, 179, 61, 0)); }
.lights--hero { position: absolute; left: 0; right: 0; top: 600px; z-index: 3; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 20px 0; text-align: center; }
.sf { font-size: 16px; line-height: 1.5; max-width: 560px; }
.bill-w { position: relative; z-index: 2; width: min(360px, calc(100% - 72px)); margin: 0 auto; padding: 40px 0 56px; transform-origin: 50% 0; }
.bill-w::before, .bill-w::after { content: ""; position: absolute; top: 0; height: 40px; width: 1.2px; background: rgba(216, 204, 174, .9); }
.bill-w::before { left: 20%; } .bill-w::after { left: 80%; }
.bill { padding: 20px 22px 22px; border: 2px solid var(--gilt); border-radius: 26px 26px 3px 3px; color: var(--ink);
  background: linear-gradient(180deg, var(--lime), var(--lime) 60%, #F4C56A);
  box-shadow: 0 -26px 28px rgba(18, 24, 72, .5), 0 4px 10px rgba(18, 24, 72, .25), inset 0 -10px 24px rgba(242, 179, 61, .35), inset 0 0 0 1px rgba(201, 174, 124, .6); }
.bill-in { padding: 12px 14px; border: 1px solid rgba(201, 160, 74, .8); border-radius: 18px 18px 2px 2px; }
.bill-h { font: 400 22px/1.05 var(--disp); text-align: center; margin-bottom: 9px; }
.bill-l { display: grid; gap: 9px; }
.bill-l li { display: flex; gap: 10px; }
.bill-l .num { width: 26px; flex: none; font-size: 15px; padding-top: 2px; }
.bill-l a { display: block; font: 700 16px/1.3 var(--text); text-decoration: none; }
.bill-l a:hover { text-decoration: underline; }
.bill-l em { display: block; font-size: 14px; line-height: 1.3; color: var(--ink2); }
@media (min-width: 1200px) {
  .hero { height: 900px; }
  .wash { background: radial-gradient(62% 62% at 50% 102%, rgba(242, 179, 61, .55), rgba(54, 64, 154, .25) 45%, rgba(28, 35, 102, 0) 100%); }
  .paint { background:
    radial-gradient(35% 30% at 25% 20%, rgba(54, 64, 154, .45), transparent 100%),
    radial-gradient(30% 25% at 85% 35%, rgba(18, 24, 72, .5), transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1.5px), rgba(69, 80, 172, .22) calc(12.5% - 1.5px) 12.5%); }
  .prosc--m { display: none; }
  .prosc--d { display: block; left: 96px; top: 236px; width: calc(100% - 192px); height: 664px; }
  .pr-hm { width: 70px; left: auto; right: 173px; top: 330px; --len: 100px; }
  .pr-hs { width: 38.4px; left: 216.8px; top: 330px; --len: 100px; }
  .stage { position: absolute; inset: 0; height: auto; }
  .h1 { left: 50%; right: auto; width: 1220px; margin-left: -610px; top: 118px; font-size: 86px; letter-spacing: -.015em; }
  .rig { left: calc(50% - 158px); top: 18px; width: 316px; height: 852px; }
  .rig-x { width: 220px; margin-left: -110px; }
  .swing { transform-origin: 50% 60px; }
  .str--m { display: none; } .str--d { display: block; }
  .puppet { top: 212px; width: 316px; height: 640px; }
  .glow { top: 800px; width: 569px; margin-left: -284.5px; }
  .lights--hero { top: 860px; }
  .hero-copy { position: absolute; left: calc(50% + 228px); top: 470px; width: min(330px, calc(50% - 354px)); padding: 0; align-items: flex-start; gap: 24px; text-align: left; }
  .sf { font-size: 20px; }
  .bill-w { position: absolute; top: 92px; left: max(128px, calc(50% - 534px)); width: min(316px, calc(50% - 190px - max(128px, 50% - 534px))); margin: 0; padding: 308px 0 0; }
  .bill-w::before, .bill-w::after { height: 308px; }
}
/* hero motion: the puppet sways once on its strings (±2°, 4 s, ease-in-out); the programme follows a beat later */
@keyframes sway { 0% { transform: rotate(0); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.js .swing.go { animation: sway 4s ease-in-out both; }
.js .bill-w.go { animation: sway 4s ease-in-out .6s both; }

/* ---------- sections ---------- */
.sec { position: relative; overflow: hidden; }
.h2 { font: 400 34px/1 var(--disp); }
.lead { font-size: 15px; color: var(--ink2); }
.sec--rail { padding: 110px 0 64px; }
.rail-head { display: grid; gap: 12px; padding: 0 var(--pad); margin-bottom: 22px; }
.rail { position: relative; }
.dowel { display: block; height: 16px; border-radius: 8px; background: var(--lime); box-shadow: 0 -6px 28px rgba(18, 24, 72, .25), 0 4px 10px rgba(18, 24, 72, .12); position: relative; z-index: 1; }
.cards { display: flex; gap: 16px; padding: 0 var(--pad) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: thin; }
.cards li { flex: none; width: 150px; scroll-snap-align: start; }
.card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.cd-m { display: flex; align-items: center; gap: 8px; transition: transform .3s; }
.cd-m .num { font-size: 18px; }
.cd-t { font: 400 18px/1.1 var(--disp); text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: transform .3s, text-decoration-color .25s; }
.cd-p { font-size: 14px; line-height: 1.4; color: var(--ink2); transition: transform .3s; }
/* framed-plate: cover inside a gilt double-moulded arch, hung on two strings */
.plate { position: relative; display: block; --hang: 30px; }
.pl-hang { display: block; position: relative; height: var(--hang); }
.pl-hang::before, .pl-hang::after { content: ""; position: absolute; top: 0; height: 100%; width: 1.2px; background: rgba(216, 204, 174, .9); }
.pl-hang::before { left: 28%; } .pl-hang::after { left: 72%; }
.pl-frame { position: relative; display: block; padding: 5px; border: 2.5px solid var(--gilt); border-radius: 50% 50% 3px 3px / 50% 50% 3px 3px; background: var(--night); box-shadow: var(--up-plate); transition: transform .3s, border-color .25s, box-shadow .3s; }
.plate .pl-hang + .pl-frame::before, .plate .pl-hang + .pl-frame::after { content: ""; position: absolute; top: -8px; width: 6px; height: 6px; margin-left: -3px; border: 1.4px solid var(--gilt); border-radius: 50%; }
.plate .pl-hang + .pl-frame::before { left: 28%; } .plate .pl-hang + .pl-frame::after { left: 72%; }
.pl-in { display: block; padding: 7px; border: 1px solid rgba(201, 160, 74, .8); border-radius: 50% 50% 2px 2px / 50% 50% 2px 2px; }
.pl-in img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 1px 1px / 50% 50% 1px 1px; }
.card .chip > i { background: var(--canvas2); }
/* hover / focus: the card rises on its strings (−8 px), the cue light turns on, the moulding brightens */
.card:hover .pl-frame, .card:focus-visible .pl-frame, .row-a:hover .pl-frame, .row-a:focus-visible .pl-frame { transform: translateY(-8px); border-color: var(--amber); box-shadow: var(--up-plate-on); }
.card:hover .cd-m, .card:focus-visible .cd-m, .card:hover .cd-t, .card:focus-visible .cd-t, .card:hover .cd-p, .card:focus-visible .cd-p { transform: translateY(-8px); }
.card:hover .chip > i, .card:focus-visible .chip > i { background: var(--amber); box-shadow: 0 0 8px rgba(242, 179, 61, .8); }
.card:hover .cd-t, .card:focus-visible .cd-t, .card:hover .sim-t, .card:focus-visible .sim-t { text-decoration-color: var(--ink); }
.card:focus-visible { outline: none; }
.card:focus-visible .pl-frame { outline: 2px solid var(--amber); outline-offset: 4px; }

.sec--night { background: var(--night); color: var(--paper); }
.sec--method { padding: 72px 24px 160px; text-align: left; }
.sec--method .h2 { text-align: center; }
.sec--method .lead { color: var(--paper2); text-align: center; margin-top: 28px; }
.steps { display: grid; gap: 30px; margin-top: 28px; }
.disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); border: 2px solid var(--gilt); color: var(--ink); font: 400 26px/1 var(--disp); box-shadow: 0 -12px 28px rgba(18, 24, 72, .4), 0 4px 10px rgba(18, 24, 72, .2); }
.st-t { font: 400 22px/1.15 var(--disp); margin: 14px 0; }
.steps p { color: var(--paper2); font-size: 15px; }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 130px; }
.hills--d { display: none; }
.pr-ms { width: 21.6px; left: auto; right: 29px; top: 40px; --len: 40px; }
@media (min-width: 700px) {
  .cards li { width: 186px; }
}
@media (min-width: 1200px) {
  .h2 { font-size: 56px; }
  .lead { font-size: 18px; }
  .sec--rail { padding: 150px var(--pad) 96px; }
  .rail-head { grid-template-columns: 1fr 380px; align-items: start; padding: 0; margin-bottom: 34px; }
  .cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; padding: 0; overflow: visible; }
  .cards li { width: auto; }
  .plate { --hang: 46px; }
  .cd-t { font-size: 21px; }
  .cd-p { font-size: 15px; }
  .sec--method { padding: 110px 152px 170px; }
  .sec--method .lead { margin-top: 44px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; text-align: center; }
  .steps li { display: flex; flex-direction: column; align-items: center; }
  .st-t { font-size: 26px; }
  .steps p { font-size: 17px; }
  .hills--m { display: none; }
  .hills--d { display: block; height: 170px; }
  .pr-ms { width: 33.6px; left: 133px; right: auto; top: 90px; --len: 90px; }
}

/* ---------- inner head band ---------- */
.band { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 110%, rgba(242, 179, 61, .55), rgba(54, 64, 154, .25) 45%, rgba(28, 35, 102, 0) 100%); }
.band-in { position: relative; z-index: 2; padding: 96px 30px 20px; display: grid; gap: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 600 13px/1.4 var(--text); color: var(--paper2); }
.crumbs li + li::before { content: "›"; margin: 0 7px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.h1-band { font: 400 38px/1.02 var(--disp); }
.band-lead { font-size: 16px; color: var(--paper2); max-width: 640px; }
.lights--band { z-index: 2; }
@media (min-width: 1200px) {
  .band-in { padding: 126px 182px 40px; gap: 18px; }
  .h1-band { font-size: 68px; max-width: 820px; }
  .band--legal .h1-band { font-size: 60px; }
  .band-lead { font-size: 19px; }
}

/* ---------- games: rows ---------- */
.rows-w { padding: 36px var(--pad) 72px; }
.rows { max-width: 1144px; margin: 0 auto; }
.row { display: grid; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--gilt); }
.row:first-child { border-top: 1px solid var(--gilt); }
.row-a { display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.row-a > .num--row { display: none; }
.plate--row { width: 140px; }
.row-t { display: grid; gap: 8px; justify-items: start; }
.num--m { font-size: 22px; }
.row-h { font: 400 26px/1.1 var(--disp); }
.row-p { font-size: 16px; color: var(--ink2); }
.row-a:hover .more, .row-a:focus-visible .more { text-decoration-thickness: 2px; }
.row-a:focus-visible { outline: none; }
.row-a:focus-visible .pl-frame { outline: 2px solid var(--amber); outline-offset: 4px; }
.row-f { display: grid; gap: 6px; }
.row-f div, .ftable div, .krows div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.row-f dt, .ftable dt, .krows dt { font: 600 13px/1.6 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.row-f dd { font-size: 14px; }
@media (min-width: 1024px) {
  .rows-w { padding: 64px calc(var(--pad) + 40px) 110px; }
  .row { grid-template-columns: 1fr 380px; gap: 34px; align-items: center; padding: 26px 0; }
  .row-a { grid-template-columns: 46px 152px 1fr; gap: 34px; align-items: center; }
  .row-a > .num--row { display: block; font-size: 30px; }
  .num--m { display: none; }
  .plate--row { width: 152px; }
  .row-h { font-size: 32px; }
}

/* ---------- game page ---------- */
.ghead { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.ghead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 105%, rgba(242, 179, 61, .55), rgba(54, 64, 154, .25) 45%, rgba(28, 35, 102, 0) 100%); }
.gh-in { position: relative; z-index: 2; display: grid; gap: 0; padding: 96px 30px 24px; }
.gh-t { display: grid; gap: 16px; }
.gh-m { display: flex; align-items: center; gap: 14px; }
.num--gilt { color: var(--gilt); font-size: 26px; }
.h1-g { font: 400 40px/1 var(--disp); }
.gh-sum { font-size: 16px; color: var(--paper2); }
.meta { font: italic 400 13px/1.5 var(--text); color: var(--paper2); }
.gh-cv { display: flex; justify-content: center; }
.plate--guide { width: 200px; --hang: 70px; }
.plate--guide .pl-frame { box-shadow: 0 -10px 28px rgba(0, 0, 0, .25); }
.gbody { display: grid; gap: 28px; padding: 36px var(--pad) 64px; }
.toc { align-self: start; padding: 18px; border: 1px solid var(--gilt); border-radius: 20px 20px 2px 2px; }
.toc-h { font: 400 20px/1.1 var(--disp); margin-bottom: 12px; }
.toc ol { display: grid; gap: 12px; }
.toc li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; }
.toc .num { font-size: 14px; }
.toc a { font: 600 15px/1.4 var(--text); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.gmain { display: grid; gap: 40px; min-width: 0; }
.blk { display: grid; gap: 14px; scroll-margin-top: 24px; }
.h3 { font: 400 26px/1.1 var(--disp); }
.p { font-size: 16px; }
.p--l { font-size: 16px; }
.blk .p + .p { margin-top: 0; }
.ftable { padding: 6px; border: 2px solid var(--gilt); }
.ftable dl { padding: 6px 18px; border: 1px solid rgba(201, 160, 74, .7); }
.ftable div { grid-template-columns: 100px 1fr; gap: 16px; padding: 11px 0; }
.ftable div + div { border-top: 1px solid rgba(201, 160, 74, .4); }
.ftable dd { font-size: 15px; }
.keys { display: flex; flex-wrap: wrap; gap: 10px; }
.keys li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--lime); font-size: 14px; }
kbd { padding: 3px 10px; border-radius: 999px; background: var(--night); color: var(--paper); font: 700 13px/1.4 var(--text); }
.hints { display: grid; gap: 12px; }
.hints li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.hints .num { font-size: 16px; padding-top: 3px; }
.dots { display: grid; gap: 12px; }
.dots li { position: relative; padding-left: 18px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.gq + .gq { margin-top: 14px; }
.gq h3 { font: 700 17px/1.4 var(--text); }
.gq p { color: var(--ink2); margin-top: 4px; }
.sims { display: flex; flex-wrap: wrap; gap: 22px; }
.sims li { width: 200px; }
.card--sim { gap: 8px; }
.plate--sim { width: 96px; }
.plate--sim .pl-frame, .plate--row .pl-frame { box-shadow: none; }
.sim-t { font: 400 18px/1.15 var(--disp); text-decoration: underline 2px transparent; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.sim-p { font-size: 13px; line-height: 1.5; color: var(--ink2); }
.where { display: grid; gap: 10px; justify-items: start; padding: 22px 24px; border-radius: 22px 22px 2px 2px; background: var(--canvas2); scroll-margin-top: 24px; }
.where-h { font: 400 22px/1.1 var(--disp); }
.where p { font-size: 15px; color: var(--ink2); }
.where .more { font-weight: 600; }
.p a, .gq a, .dots a, .contact a, .lsum a { color: var(--ink); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .gbody { grid-template-columns: 250px minmax(0, 760px); justify-content: start; gap: 64px; padding: 72px var(--pad) 110px max(var(--pad), calc(50% - 522px)); }
  .toc--sticky { position: sticky; top: 24px; }
  .h3 { font-size: 34px; }
  .p--l { font-size: 18px; }
  .ftable div { grid-template-columns: 150px 1fr; }
  .gh-in { grid-template-columns: minmax(0, 600px) 420px; justify-content: space-between; min-height: 680px; padding: 0 calc(var(--pad) + 90px); }
  .gh-t { padding-top: 150px; align-self: start; }
  .gh-cv { justify-content: flex-end; }
  .plate--guide { width: 420px; --hang: 120px; }
  .h1-g { font-size: 76px; }
  .gh-sum { font-size: 19px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .gh-in { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding: 0 70px; }
  .plate--guide { width: 340px; }
}

/* ---------- about ---------- */
.about { position: relative; display: grid; gap: 44px; justify-items: center; padding: 40px var(--pad) 64px; overflow: hidden; }
.asec, .contact { width: 100%; max-width: 720px; }
.asec { display: grid; gap: 12px; }
.h2-a { display: flex; align-items: center; gap: 14px; font: 400 26px/1.05 var(--disp); }
.h2-a .num { font-size: 24px; flex: none; }
.pr-am, .pr-as { display: none; }
.contact { padding: 6px; border: 2px solid var(--gilt); border-radius: 40px 40px 3px 3px; background: var(--lime); }
.ct-in { display: grid; gap: 12px; padding: 26px 28px; border: 1px solid rgba(201, 160, 74, .8); border-radius: 34px 34px 2px 2px; }
.h2-c { font: 400 24px/1.05 var(--disp); }
.reasons { display: grid; gap: 12px; }
.krows { display: grid; gap: 14px; }
.krows div { grid-template-columns: 1fr; gap: 2px; }
.krows dd { font-size: 14px; overflow-wrap: anywhere; }
.krows a { font-weight: 700; text-decoration: none; }
.krows a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .about { padding: 72px 0 110px; }
  .h2-a { font-size: 36px; }
  .h2-c { font-size: 32px; }
  .krows div { grid-template-columns: 90px 1fr; gap: 14px; }
  .krows dd { font-size: 15px; }
}
@media (min-width: 1200px) {
  .pr-am { display: block; width: 70px; left: calc(50% + 464px - 35px); top: 160px; --len: 160px; z-index: 0; }
  .pr-as { display: block; width: 38.4px; left: calc(50% - 484px - 19.2px); top: 520px; --len: 300px; z-index: 0; }
  .about .prop { filter: drop-shadow(0 -10px 14px rgba(18, 24, 72, .22)); }
}

/* ---------- legal ---------- */
.lbody { display: grid; gap: 24px; padding: 36px var(--pad) 64px; }
.toc--legal { display: none; }
.lmain { display: grid; gap: 28px; min-width: 0; }
.lsum { font: italic 400 16px/1.55 var(--text); color: var(--ink2); }
.lsec { display: grid; gap: 10px; scroll-margin-top: 24px; }
.h3-l { font: 400 22px/1.1 var(--disp); }
.lsec .p { font-size: 15px; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .lbody { grid-template-columns: 250px minmax(0, 760px); justify-content: start; gap: 64px; padding: 64px var(--pad) 110px max(var(--pad), calc(50% - 522px)); }
  .toc--legal { display: block; position: sticky; top: 24px; }
  .toc--legal .toc-h { margin-bottom: 10px; }
  .toc--legal ol { gap: 10px; }
  .toc--legal li { grid-template-columns: 34px 1fr; }
  .toc--legal a { font-size: 14px; }
  .lsum { font-size: 19px; }
  .h3-l { font-size: 28px; }
  .lsec .p { font-size: 17px; }
}

/* ---------- footer ---------- */
.footer { background: var(--night2); color: var(--paper); }
.f-in { display: grid; gap: 16px; padding: 28px var(--pad) 28px; }
.f-l1 { display: grid; gap: 12px; }
.footer .logo { position: static; }
.f-line { font-size: 15px; color: var(--paper2); max-width: 420px; }
.f-links { display: flex; flex-wrap: wrap; gap: 14px 18px; font: 600 14px/1.4 var(--text); }
.f-links a, .f-links .linkish { color: var(--paper); text-decoration: none; }
.f-links a:hover, .f-links .linkish:hover { text-decoration: underline; }
.f-l2 { display: grid; gap: 8px; font-size: 13px; color: var(--paper2); }
.f-mail { font: 600 14px/1.4 var(--text); color: var(--amber); text-underline-offset: 3px; justify-self: start; }
@media (min-width: 1024px) {
  .f-in { gap: 14px; padding: 28px var(--pad) 34px; }
  .f-l1 { grid-template-columns: auto 420px; gap: 26px; align-items: center; justify-content: start; }
  .f-links { gap: 18px; }
  .f-l2 { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
}

/* ---------- cookie ---------- */
.cookie { position: fixed; z-index: 40; left: 16px; bottom: 16px; width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 6px; border: 2px solid var(--gilt); border-radius: 36px 36px 3px 3px; background: var(--lime); color: var(--ink);
  box-shadow: 0 -14px 28px rgba(18, 24, 72, .4), 0 4px 10px rgba(18, 24, 72, .2), 0 12px 40px rgba(18, 24, 72, .35); }
.cookie[hidden] { display: none; }
.cookie.is-open { animation: ck-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ck-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ck-in { display: grid; gap: 14px; padding: 20px 18px; border: 1px solid rgba(201, 160, 74, .8); border-radius: 30px 30px 2px 2px; }
.ck-h { font: 400 22px/1.05 var(--disp); }
.cookie p { font-size: 15px; }
.ck-acts { display: grid; gap: 12px; justify-items: start; }
.ck-link { justify-self: start; font: 600 14px/1.4 var(--text); text-underline-offset: 3px; }
.ck-manage { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .35); }
.ck-manage[hidden] { display: none; }
.ck-opt { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--night); }
@media (min-width: 560px) {
  .ck-in { padding: 24px 28px; }
  .ck-h { font-size: 28px; }
  .ck-acts { display: flex; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wg-l { transform: none; } .wg-r { transform: scaleX(-1); }
}
.soc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;vertical-align:middle;color:inherit;text-decoration:none}
.soc svg{width:100%;height:100%;fill:currentColor}
.soc:hover{opacity:.7}
.soc:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}