/* mib2028a inner pages: the same paper, palette, grain and parallax scene as the front.
   The front page keeps its own copy because its boot sequence owns the layering there. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --indigo:#393357;--indigo-2:#2E2947;--ink:#1D1930;--cyan:#00A5D3;--lime:#C8FF3D;--paper:#F3F1EC;--card:#FBFAF7;--grey:#6B6A72;
  --ease:cubic-bezier(.22,1,.36,1);
  --grain: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:var(--paper)}
body{
  background:var(--paper);color:var(--indigo);
  font-family:Jost,"Avenir Next",Futura,"Helvetica Neue",Arial,sans-serif;
  min-height:100dvh;position:relative;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:var(--grain);background-size:220px;opacity:.55;mix-blend-mode:multiply}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(57,51,87,.14) 100%),linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%)}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── scene: the shard pieces on three depths, same placements as the front ── */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s .1s var(--ease)}
.ready .scene{opacity:1}
.scene .el{position:absolute;transform:translate3d(calc(var(--px,0)*var(--d)*-1px),calc(var(--py,0)*var(--d)*-.6px),0) translateY(var(--rise,0));
  transition:transform .9s var(--ease),opacity .9s var(--ease);opacity:0;--rise:28px}
.ready .scene .el{opacity:1;--rise:0px}
.scene .el img{display:block;width:100%;height:auto}
.scene .d1{--d:14}.scene .d2{--d:30}.scene .d3{--d:52}
.ready .scene .el:nth-child(1){transition-delay:.05s}.ready .scene .el:nth-child(2){transition-delay:.12s}
.ready .scene .el:nth-child(3){transition-delay:.18s}.ready .scene .el:nth-child(4){transition-delay:.24s}
.ready .scene .el:nth-child(5){transition-delay:.3s}.ready .scene .el:nth-child(6){transition-delay:.36s}
.ready .scene .el:nth-child(7){transition-delay:.42s}.ready .scene .el:nth-child(8){transition-delay:.48s}
.skyline{left:50%;bottom:-9vh;width:clamp(600px,58vw,980px);margin-left:calc(clamp(600px,58vw,980px)/-2)}
.skyline img:first-child{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.scene .skyline .figure{position:absolute;left:39.6%;top:40.5%;width:3.6%;height:auto;transform:translate(-50%,-100%)}
.sun{right:-5vw;top:-12vh;width:clamp(220px,24vw,420px)}
.disc{left:24vw;top:-5vh;width:clamp(60px,7vw,120px)}
.stripes{left:-1vw;top:3vh;width:clamp(90px,10vw,180px)}
.bar{right:5vw;top:38vh;width:clamp(120px,14vw,240px)}
.tri{right:24vw;top:22vh;width:clamp(50px,5.5vw,96px)}
.dot{right:31vw;bottom:31vh;width:clamp(24px,2.8vw,46px)}
.rhombus{left:25vw;top:46vh;width:clamp(60px,6.5vw,110px)}
.stairs{right:3vw;bottom:30vh;width:clamp(130px,15vw,250px)}
.plane{left:3vw;top:16vh;width:clamp(170px,22vw,380px)}
.crescent{left:2vw;bottom:20vh;width:clamp(110px,13vw,210px)}
@media (max-width:640px){
  .skyline{width:160vw;margin-left:-80vw;bottom:-1vh}
  .sun{width:46vw;right:-14vw;top:-6vh}.disc{width:12vw;left:14vw;top:2vh}.stripes{width:26vw;top:6vh;left:-4vw}.bar{left:auto;right:2vw;top:44vh;width:30vw}
  .tri{right:10vw;top:30vh;width:11vw}.rhombus{left:4vw;top:52vh;width:14vw}.dot{right:22vw;bottom:36vh;width:6vw}.plane{left:-4vw;top:20vh;width:40vw}
  .stairs{right:2vw;bottom:30vh;width:30vw}.crescent{left:1vw;bottom:20vh;width:24vw}
}

/* ── the mark as an image, with the offset-plate hover from the front ── */
.mark{display:block;width:100%;height:auto;user-select:none;
  transform:translate3d(calc(var(--px,0)*-6px),calc(var(--py,0)*-4px),0);transition:transform .9s var(--ease)}

/* ── card on a plate ── */
.card-host{position:relative;z-index:2}
.plate{position:absolute;inset:0;background:var(--indigo);z-index:0;
  transform:translate(calc(12px + var(--px,0)*6px),calc(12px + var(--py,0)*4px));transition:transform .6s var(--ease)}
.card{position:relative;z-index:1;background:var(--card);border:2px solid var(--indigo);padding:clamp(22px,4vw,40px)}
.card::after{content:"";position:absolute;right:-2px;top:-2px;width:34px;height:34px;background:var(--lime);
  clip-path:polygon(100% 0,0 0,100% 100%)}
.card[hidden]{display:none}

/* ── type and controls ── */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
h1{font-size:clamp(26px,3.2vw,36px);line-height:1.08;font-weight:800;letter-spacing:-.01em;color:var(--indigo)}
.lead{font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:var(--indigo);opacity:.9}
.muted{color:var(--grey);font-size:14px;line-height:1.5}
label.fld{display:block;margin-top:22px}
label.fld span{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.inp{display:block;width:100%;background:transparent;border:0;border-bottom:3px solid var(--indigo);color:var(--ink);
  font:inherit;font-size:clamp(20px,2vw,24px);font-weight:500;padding:8px 0 10px;border-radius:0;transition:border-color .2s}
.inp:focus{outline:none;border-bottom-color:var(--cyan)}
.inp::placeholder{color:#B9B6C2;font-weight:400}
.inp.code{font-size:clamp(36px,5vw,48px);font-weight:800;letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums;padding-left:.28em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;
  background:var(--indigo);color:var(--lime);border:0;border-radius:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:16px 24px;
  box-shadow:4px 4px 0 var(--cyan);transition:transform .15s var(--ease),box-shadow .15s var(--ease),opacity .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cyan)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cyan)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:4px 4px 0 var(--cyan)}
.btn.wide{width:100%}
.link{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--indigo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--cyan)}
.err{display:none;margin-top:14px;background:var(--lime);color:var(--ink);font-size:14px;font-weight:600;padding:10px 12px;line-height:1.4}
.err.on{display:block}
.note{margin-top:18px;font-size:13px;line-height:1.5;color:var(--grey)}
.note b{color:var(--indigo)}

/* reduced motion: no parallax drift, no rise */
@media (prefers-reduced-motion:reduce){
  .scene .el,.mark,.plate{transition:none;transform:none}
  .plate{transform:translate(12px,12px)}
}