/* ══════════════════════════════════════════════════════════════════════════
   Sudrabu muiža — showcase demo.

   Everything is scoped under .mz so this file can never touch the real site,
   and the real site's stylesheet is never loaded here. There are no images:
   every "photograph" is a stack of gradients plus one shared SVG treeline,
   which means the page carries no requests beyond this file and its script,
   and the layers can move independently on scroll the way a photograph
   cannot.
   ══════════════════════════════════════════════════════════════════════ */

.mz{
  /* palette — deep green ground, cream paper, one gold */
  --ink:#141C18;
  --deep:#1C2721;
  --deep-2:#22302A;
  --cream:#F3EBE1;
  --cream-2:#E9DED1;
  --gold:#C4A265;
  --gold-lit:#E0C48D;
  --line-dark:rgba(243,235,225,.16);
  --line-light:rgba(20,28,24,.16);

  /* Display face. Falls to Didot on macOS and Bodoni MT on Windows — the two
     places his prospects actually open a link from — and to a plain serif
     elsewhere. Nothing is fetched. */
  --disp:"Didot","Bodoni MT","Playfair Display","Iowan Old Style",
         "Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --bay:clamp(4.5rem,11vw,10rem);

  margin:0;
  background:var(--deep);
  color:var(--cream);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mz *{box-sizing:border-box}
.mz img,.mz svg{max-width:100%}

/* ── shared scene layers ─────────────────────────────────────────────────
   A treeline drawn once as a data URI and reused at several scales. Keeping
   it in CSS rather than the markup means six galleries cost six class names
   instead of six copies of a path. */
.mz{
  --trees:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 120V72l14-16 9 13 12-24 11 18 10-9 13 21 12-31 14 25 9-14 12 20 13-27 11 22 12-10 10 16 14-30 12 26 11-17 13 23 9-12 14 19 12-28 11 24 13-15 10 20 12-26 14 30 9-18 13 22 11-24 12 19 10-13 14 27 12-21 11 16 13-25 9 20 14-15 12 24 11-19 13 22 10-27 12 23 14-13 9 18 13-24 11 20 12-16 10 22 14-26 12 21 11-14 13 24 9-19 14 23 12-25 11 18 13-13 10 21 12-24 14 27 9-16 13 20 11-22 12 17 10-11 14 25 12-20 11 15 13-23 9 19 14-14 12 22 11-18 13 21 10-25 12 22 14-12 9 17 13-23 11 19 12-15 10 21 14-25 12 20 11-13 13 23 9-18 14 22 12-24 11 17 13-12 10 20V120Z'/%3E%3C/svg%3E");
}

.mz-scene{position:absolute;inset:0;overflow:hidden;z-index:0;contain:paint}
.mz-scene>*{position:absolute;left:-6%;right:-6%}
/* Only the layers that actually move are promoted. Promoting all ten cost
   ten viewport-sized textures for no gain. */
.mz-scene>[data-par]{will-change:transform}

.mz-sky{
  inset:0;
  background:
    linear-gradient(180deg,#0D1512 0%,#16211C 26%,#22322A 48%,#3A4436 66%,
                    #6E6A4C 80%,#A88C5C 90%,#C9A469 100%);
}
.mz-sun{
  top:52%;left:38%;right:auto;width:min(62vw,52rem);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(233,201,142,.55) 0%,rgba(214,168,105,.22) 38%,transparent 68%);
}
.mz-ridge{height:46%;bottom:0;background-repeat:repeat-x;background-size:1400px 100%}
.mz-ridge-far{
  bottom:27%;height:11%;
  background-image:var(--trees);
  opacity:.26;
  /* the mask makes the distant treeline dissolve into haze at its base */
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);
          mask-image:linear-gradient(180deg,#000 40%,transparent);
}
.mz-ridge-mid{
  bottom:17%;height:15%;background-image:var(--trees);opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
          mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.mz-ridge-near{
  bottom:7%;height:20%;background-image:var(--trees);opacity:.92;
  background-size:1800px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);
          mask-image:linear-gradient(180deg,#000 72%,transparent);
}

.mz-mist{
  height:22%;
  /* softness comes from the gradient's own stops. A filter:blur() here
     looked marginally better and re-rasterised a viewport-wide layer on
     every frame of the parallax, which is not a trade worth making. */
  background:linear-gradient(180deg,transparent 0%,rgba(226,222,206,.10) 22%,
             rgba(226,222,206,.26) 48%,rgba(226,222,206,.09) 74%,transparent 100%);
}
.mz-mist-1{bottom:22%;animation:mz-drift 34s ease-in-out infinite alternate}
.mz-mist-2{bottom:9%;height:16%;opacity:.7;animation:mz-drift 46s ease-in-out infinite alternate-reverse}
@keyframes mz-drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

.mz-manor{bottom:19%;height:15%;display:flex;justify-content:center;align-items:flex-end}
.mz-manor svg{height:100%;width:auto;fill:#0F1714}
.mz-manor .mz-lit rect{fill:var(--gold-lit);opacity:.9;animation:mz-flicker 7s ease-in-out infinite}
.mz-manor .mz-lit rect:nth-child(2n){animation-duration:9s;animation-delay:-2s}
.mz-manor .mz-lit rect:nth-child(3n){animation-duration:11s;animation-delay:-4s}
@keyframes mz-flicker{0%,100%{opacity:.9}45%{opacity:.62}}

.mz-water{
  bottom:0;height:22%;
  background:linear-gradient(180deg,transparent,rgba(176,148,100,.26) 26%,rgba(20,28,24,.94) 100%);
}
.mz-vignette{
  inset:0;left:0;right:0;
  background:
    radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(12,18,15,.62) 100%),
    linear-gradient(180deg,rgba(12,18,15,.72) 0%,transparent 26%,transparent 62%,rgba(12,18,15,.86) 100%);
}
.mz-grain{
  /* Was an feTurbulence noise tile. It cost more to rasterise than every
     other layer combined and, at the opacity it needed to look right, was
     close to invisible. A flat warm wash does the same job for free. */
  inset:0;left:0;right:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(196,162,101,.05),transparent 45%);
}

/* ── floating header ─────────────────────────────────────────────────── */
.mz-bar{
  position:fixed;inset:1rem var(--gut) auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.mz-bar.is-hidden{transform:translateY(calc(-100% - 1.5rem))}

.mz-burger,.mz-join{
  border:0;cursor:pointer;font:inherit;
  background:rgba(243,235,225,.13);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--cream);
  transition:background .3s,color .3s,transform .3s;
}
.mz-burger{
  width:2.9rem;height:2.9rem;border-radius:50%;
  display:grid;place-content:center;gap:5px;
}
.mz-burger span{display:block;width:15px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.mz-burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.mz-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.mz-burger:hover,.mz-join:hover{background:rgba(243,235,225,.24)}

.mz-join{
  padding:.85rem 1.9rem;border-radius:2rem;text-decoration:none;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.mz-mark{
  text-decoration:none;color:inherit;text-align:center;line-height:1;
  display:grid;gap:.28rem;
}
.mz-mark em{font-style:normal;font-size:.5rem;letter-spacing:.32em;opacity:.7;text-transform:uppercase}
.mz-mark b{font-family:var(--disp);font-weight:400;font-size:1.5rem;font-style:italic;letter-spacing:.01em}
.mz-mark span{font-size:.5rem;letter-spacing:.42em;text-transform:uppercase;opacity:.85}

/* over a cream section the bar has to invert or it disappears */
.mz-bar.on-light{color:var(--ink)}
.mz-bar.on-light .mz-burger,.mz-bar.on-light .mz-join{background:rgba(20,28,24,.10);color:var(--ink)}
.mz-bar.on-light .mz-burger:hover,.mz-bar.on-light .mz-join:hover{background:rgba(20,28,24,.18)}

/* ── full-screen menu ────────────────────────────────────────────────── */
.mz-menu{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 3rem;
  clip-path:circle(0% at 2.4rem 2.4rem);
  transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.mz-menu[hidden]{display:none}
.mz-menu.is-open{clip-path:circle(150% at 2.4rem 2.4rem)}
.mz-menu-in{display:grid;gap:.2rem}
.mz-menu-in a{
  font-family:var(--disp);font-size:clamp(2rem,7vw,4.4rem);line-height:1.15;
  color:var(--cream);text-decoration:none;width:max-content;max-width:100%;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s,transform .5s,color .3s;
}
.mz-menu.is-open .mz-menu-in a{opacity:1;transform:none}
.mz-menu-in a:nth-child(1){transition-delay:.12s}
.mz-menu-in a:nth-child(2){transition-delay:.17s}
.mz-menu-in a:nth-child(3){transition-delay:.22s}
.mz-menu-in a:nth-child(4){transition-delay:.27s}
.mz-menu-in a:nth-child(5){transition-delay:.32s}
.mz-menu-in a:nth-child(6){transition-delay:.37s}
.mz-menu-in a:hover{color:var(--gold-lit);font-style:italic}
.mz-menu-foot{
  margin-top:auto;padding-top:2.5rem;display:flex;gap:2rem;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);
  font-size:.8rem;letter-spacing:.06em;opacity:.66;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.mz-hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.mz-hero-in{position:relative;z-index:2;text-align:center;padding:8rem var(--gut) 7rem;max-width:60rem}

.mz-eyebrow{
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  margin:0 0 1.6rem;font-weight:600;
}
.mz-gold{color:var(--gold-lit)}
.mz-rule{display:flex;align-items:center;gap:.9rem}
.mz-rule::before{content:"";width:2.6rem;height:1px;background:currentColor;opacity:.65;flex:none}

.mz-display{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;margin:0}
.mz-hero .mz-display{font-size:clamp(2.7rem,9.2vw,7rem);line-height:1.02}
.mz-it{font-style:italic}
.mz-line{display:block;overflow:hidden}
.mz-line>span{display:block;transform:translateY(105%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.mz-line.is-in>span{transform:none}

.mz-hero-sub{
  margin:1.9rem auto 0;max-width:34rem;color:rgba(243,235,225,.82);
  font-size:clamp(.95rem,1.4vw,1.08rem);
}
.mz-cta{
  display:inline-block;margin-top:2.4rem;padding:1.05rem 2.6rem;border-radius:2.4rem;
  background:var(--gold);color:#1A1409;text-decoration:none;border:1px solid transparent;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:background .3s,transform .3s,box-shadow .3s,color .3s;
}
.mz-cta:hover{background:var(--gold-lit);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(196,162,101,.75)}
.mz-cta.mz-ghost{background:transparent;border-color:currentColor;color:inherit}
.mz-cta.mz-ghost:hover{background:currentColor;color:var(--deep);box-shadow:none}
.mz-cta.mz-full{display:block;width:100%;text-align:center;margin-top:1.6rem}

.mz-cue,.mz-avail{
  position:absolute;bottom:2.2rem;z-index:3;color:var(--cream);text-decoration:none;
  background:rgba(243,235,225,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s,transform .3s;
}
.mz-cue{left:var(--gut);width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center}
.mz-cue svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mz-cue:hover{background:rgba(243,235,225,.24);transform:translateY(3px)}
.mz-avail{
  right:var(--gut);display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:2rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.mz-avail svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.mz-avail:hover{background:rgba(243,235,225,.24)}

/* ── bands ───────────────────────────────────────────────────────────── */
.mz-band{position:relative;padding:var(--bay) 0}
.mz-tight{padding-top:0}
.mz-quiet{padding-bottom:calc(var(--bay) * .6)}
.mz-dark{background:var(--deep);color:var(--cream)}
.mz-cream{background:var(--cream);color:var(--ink)}
.mz-wrap{width:min(84rem,100% - var(--gut) * 2);margin-inline:auto}
.mz-center{text-align:center;margin:3rem 0 0}

.mz-h2{font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.06}
.mz-h2 span{display:block}
.mz-on-dark{color:var(--cream)}
.mz-lede-grid{display:grid;gap:2rem 4rem;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
.mz-body{margin:0;max-width:38ch;font-size:1rem;opacity:.82}
.mz-dark .mz-body{color:rgba(243,235,225,.78)}

.mz-quote{font-size:clamp(1.9rem,5.4vw,4.2rem);line-height:1.12;text-align:center;margin:0}
.mz-quote span{display:block}

/* ── reveal engine ───────────────────────────────────────────────────── */
.mz [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.mz [data-rv].is-in{opacity:1;transform:none}
.mz [data-rv="line"]{opacity:1;transform:none}
.mz [data-rv="words"]{opacity:1;transform:none;transition:none}
.mz .mz-word{
  display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(7px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;
}
.mz .is-in .mz-word,.mz .mz-word.is-in{opacity:1;transform:none;filter:none}

/* ── image accordion (stats and events) ──────────────────────────────── */
.mz-accordion{display:flex;gap:.6rem;height:min(66vh,30rem)}
.mz-tile{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:3px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;cursor:pointer;color:var(--cream);
  transition:flex-grow .7s cubic-bezier(.16,1,.3,1),filter .5s;
}
.mz-tile::after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.82;
  background:linear-gradient(180deg,transparent 30%,rgba(12,18,15,.92) 100%);
  transition:opacity .5s;
}
.mz-tile>*{position:relative;z-index:2}
.mz-accordion:hover .mz-tile::after,.mz-accordion:focus-within .mz-tile::after{opacity:1}
.mz-tile:hover,.mz-tile:focus-visible{flex-grow:2.4;outline:none}
.mz-tile:hover::after,.mz-tile:focus-visible::after{opacity:.6}
.mz-tile:focus-visible{box-shadow:inset 0 0 0 2px var(--gold-lit)}

.mz-num{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.02em;
}
.mz-tile span{font-size:.82rem;letter-spacing:.04em;opacity:.86;margin-top:.5rem;display:block}
.mz-event b{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.15;display:block}
.mz-events{height:min(52vh,24rem)}

/* scene palettes — each tile and panel gets one of eight grounds */
.mz [data-scene]{background-color:#26332B}
.mz [data-scene]::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--trees);
  background-repeat:repeat-x;background-size:520px 92px;background-position:bottom;
  opacity:.5;
}
.mz [data-scene="1"]{background-image:linear-gradient(170deg,#3C4A3A,#1B2620 72%)}
.mz [data-scene="2"]{background-image:linear-gradient(160deg,#5E6448,#20291F 70%)}
.mz [data-scene="3"]{background-image:linear-gradient(175deg,#2C3B41,#141D1B 74%)}
.mz [data-scene="4"]{background-image:linear-gradient(165deg,#6E5B3C,#221B12 72%)}
.mz [data-scene="5"]{background-image:linear-gradient(160deg,#7A6440,#2A2418 76%)}
.mz [data-scene="6"]{background-image:linear-gradient(175deg,#33474A,#131C1E 72%)}
.mz [data-scene="7"]{background-image:linear-gradient(168deg,#4A3B2E,#1B1611 74%)}
.mz [data-scene="8"]{background-image:linear-gradient(172deg,#5A5F4A,#1D2119 72%)}

/* ── coverflow rail ──────────────────────────────────────────────────── */
.mz-rail{overflow:hidden;padding:1rem 0}
.mz-rail-track{display:flex;gap:1rem;padding-inline:var(--gut);will-change:transform}
.mz-panel{
  position:relative;flex:none;width:min(34vw,26rem);aspect-ratio:4/5;margin:0;
  border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;padding:1.4rem;
}
.mz-panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 45%,rgba(12,18,15,.8) 100%);
}
.mz-panel figcaption{
  position:relative;z-index:2;font-family:var(--disp);font-style:italic;
  font-size:1.25rem;color:var(--cream);
}

/* ── sticky "why" list ───────────────────────────────────────────────── */
.mz-sticky-grid{display:grid;gap:3rem 5rem;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.mz-sticky-head{position:sticky;top:8rem}
.mz-progress{margin-top:2.6rem;height:2px;background:var(--line-light);overflow:hidden;max-width:16rem}
.mz-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}

.mz-steps{list-style:none;margin:0;padding:0;display:grid;gap:3.4rem;counter-reset:s}
.mz-steps li{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.6rem;padding-bottom:3.4rem;border-bottom:1px solid var(--line-light)}
.mz-steps li:last-child{border-bottom:0;padding-bottom:0}
.mz-step-n{
  font-family:var(--disp);font-size:1.05rem;color:var(--gold);
  grid-row:1 / span 2;padding-top:.35rem;
}
.mz-steps h3{
  margin:0;font-family:var(--disp);font-weight:400;
  font-size:clamp(1.35rem,2.7vw,2.05rem);line-height:1.2;letter-spacing:-.01em;
}
.mz-steps p{margin:.7rem 0 0;opacity:.78;max-width:46ch}

/* ── rates over a scene ──────────────────────────────────────────────── */
.mz-rates{position:relative;padding:var(--bay) 0;overflow:hidden;color:var(--cream)}
.mz-scene-flat{position:absolute;inset:0;z-index:0}
.mz-scene-flat::after{content:"";position:absolute;inset:0;background:rgba(12,18,15,.52)}
.mz-scene-flat .mz-grain{position:absolute;inset:0;z-index:2}
.mz-rates .mz-wrap{position:relative;z-index:3}
.mz-cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));margin-top:3.4rem}
.mz-card{
  padding:2.4rem;border:1px solid rgba(243,235,225,.26);border-radius:4px;
  background:rgba(18,26,22,.62);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s;
}
.mz-card:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(20,28,24,.5)}
.mz-card-lit{border-color:rgba(196,162,101,.6)}
.mz-card-eyebrow{
  margin:0;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-lit);font-weight:600;
}
.mz-price{font-family:var(--disp);font-size:clamp(2.6rem,6vw,4rem);line-height:1;margin:1.1rem 0 .3rem}
.mz-price i{font-style:normal;font-size:.45em;vertical-align:.5em;margin-right:.12em;opacity:.7}
.mz-per{margin:0;font-size:.82rem;opacity:.7}
.mz-card ul{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.85rem;font-size:.9rem}
.mz-card li{display:flex;gap:.7rem;opacity:.88}
.mz-card li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--gold)}

/* ── booking widget ──────────────────────────────────────────────────── */
.mz-book{
  display:grid;gap:0;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  margin-top:3.4rem;border:1px solid var(--line-light);border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.4);
}
.mz-book-form{padding:clamp(1.5rem,3vw,2.6rem);display:grid;gap:1.7rem;align-content:start}
.mz-q label{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin-bottom:.75rem;font-weight:600}
.mz-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.mz-chip{
  font:inherit;font-size:.86rem;cursor:pointer;
  padding:.62rem 1.15rem;border-radius:2rem;
  border:1px solid var(--line-light);background:transparent;color:inherit;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.mz-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.mz-chip.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.mz-chip.is-off,.mz-chip:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.mz-chip.is-off:hover,.mz-chip:disabled:hover{transform:none;border-color:var(--line-light)}
.mz-row{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.mz-row input{
  font:inherit;padding:.85rem 1rem;border-radius:3px;
  border:1px solid var(--line-light);background:rgba(255,255,255,.6);color:inherit;
}
.mz-row input:focus{outline:none;border-color:var(--gold);background:#fff}

.mz-book-side{
  padding:clamp(1.5rem,3vw,2.6rem);background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;
}
.mz-side-eyebrow{margin:0 0 1.4rem;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lit);font-weight:600}
.mz-sum{margin:0;display:grid;gap:.8rem}
.mz-sum div{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;border-bottom:1px dotted rgba(243,235,225,.2);padding-bottom:.8rem}
.mz-sum dt{opacity:.6;margin:0}
.mz-sum dd{margin:0;text-align:right}
.mz-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1.6rem 0 .3rem}
.mz-total span{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.mz-total b{font-family:var(--disp);font-weight:400;font-size:2.4rem;line-height:1}
.mz-total-note{margin:0;font-size:.78rem;opacity:.6}
.mz-done{
  margin:1rem 0 0;padding:.9rem 1.1rem;border-left:2px solid var(--gold);
  background:rgba(196,162,101,.14);font-size:.86rem;
}
.mz-fine{margin:auto 0 0;padding-top:1.6rem;font-size:.74rem;opacity:.52;line-height:1.5}

/* ── footer ──────────────────────────────────────────────────────────── */
.mz-foot{background:var(--ink);color:var(--cream);padding:var(--bay) 0 0;overflow:hidden}
.mz-foot-grid{display:grid;gap:2.6rem 4rem;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,.9fr)}
.mz-map{
  aspect-ratio:16/10;border-radius:3px;position:relative;
  background:
    linear-gradient(0deg,rgba(243,235,225,.07) 1px,transparent 1px) 0 0/100% 2.4rem,
    linear-gradient(90deg,rgba(243,235,225,.07) 1px,transparent 1px) 0 0/2.4rem 100%,
    linear-gradient(150deg,#22302A,#141C18);
  display:grid;place-items:center;
}
.mz-map span{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;
  padding:.5rem 1rem;border:1px solid var(--line-dark);border-radius:2rem;
}
.mz-map::after{
  content:"";position:absolute;top:44%;left:38%;width:14px;height:14px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 8px rgba(196,162,101,.2),0 0 0 18px rgba(196,162,101,.08);
}
.mz-foot-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem;font-size:.9rem;opacity:.8}
.mz-foot-list a{color:inherit;text-decoration:none;transition:color .25s}
.mz-foot-list a:hover{color:var(--gold-lit)}
.mz-sp{margin-top:2.2rem}

.mz-ghost-mark{
  font-family:var(--disp);font-style:italic;text-align:center;white-space:nowrap;
  font-size:clamp(3rem,15vw,13rem);line-height:.9;margin:3rem 0 0;
  color:transparent;-webkit-text-stroke:1px rgba(243,235,225,.13);
  background:linear-gradient(180deg,rgba(243,235,225,.10),transparent 78%);
  -webkit-background-clip:text;background-clip:text;
}
.mz-foot-bar{
  border-top:1px solid var(--line-dark);margin-top:1.5rem;
  padding:1.4rem var(--gut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.06em;opacity:.5;
}

/* ── demo notice ─────────────────────────────────────────────────────── */
.mz-note{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem .6rem .5rem 1.1rem;border-radius:2rem;
  background:rgba(20,28,24,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-dark);color:var(--cream);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .4s,transform .4s;
}
.mz-note.is-gone{opacity:0;transform:translate(-50%,1.5rem);pointer-events:none}
.mz-note button{
  border:0;background:rgba(243,235,225,.12);color:inherit;cursor:pointer;
  width:1.6rem;height:1.6rem;border-radius:50%;font-size:1rem;line-height:1;
}
.mz-note button:hover{background:rgba(243,235,225,.24)}

/* ── narrow screens ──────────────────────────────────────────────────── */
@media (max-width:60rem){
  .mz-lede-grid,.mz-sticky-grid,.mz-book,.mz-foot-grid{grid-template-columns:1fr}
  .mz-lede-grid{align-items:start}
  .mz-sticky-head{position:static}
  .mz-accordion{flex-direction:column;height:auto}
  .mz-tile{min-height:11rem;flex:none}
  .mz-tile:hover,.mz-tile:focus-visible{flex-grow:0}
  .mz-accordion:hover .mz-tile,.mz-accordion:focus-within .mz-tile{filter:none}
  .mz-events{height:auto}
  .mz-panel{width:min(72vw,20rem)}
  .mz-avail{display:none}
  .mz-progress{max-width:none}
}
@media (max-width:40rem){
  .mz-row{grid-template-columns:1fr}
  .mz-bar{inset:.6rem .9rem auto}
  .mz-foot-bar{justify-content:center;text-align:center}
}

/* ── reduced motion ──────────────────────────────────────────────────
   Everything is shown at rest: no reveals to wait on, no parallax, no
   drifting mist. The layout is unchanged — only the movement goes. */
@media (prefers-reduced-motion:reduce){
  .mz *,.mz *::before,.mz *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .mz [data-rv]{opacity:1 !important;transform:none !important}
  .mz .mz-word{opacity:1 !important;transform:none !important;filter:none !important}
  .mz .mz-line>span{transform:none !important}
  .mz-scene>*{transform:none !important}
}