html, body { margin:0; padding:0; height:100%; background:#e9e5df; overflow:hidden; }
  #c { position:fixed; inset:0; display:block; touch-action:none; cursor:grab; }
  #c.dragging { cursor:grabbing; }

  #ov {
    position:fixed; left:0; top:0;
    pointer-events:none; visibility:hidden;
    --ink:#111; --inkSoft:rgba(0,0,0,.55); --inkHover:#fff;
    color:var(--ink); font-family:"Segoe UI", system-ui, sans-serif;
    transition: color .25s ease;
    border-radius:0.9em; overflow:hidden;
    border:1px solid rgba(255,255,255,.38);
    box-shadow: 0 1.2em 3em rgba(0,0,0,.45);
    display:flex; flex-direction:column; justify-content:space-between;
    padding:1.4em 1.6em;
  }
  /* the milk lives on its own layer so the mouse can wipe it locally
     (mask holes) while the text above stays crisp */
  #ov .glassFx {
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:rgba(255,255,255,.13);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  }
  #ov > *:not(.glassFx) { position:relative; z-index:1; }
  /* fade lives on the CHILDREN — #ov itself must stay opacity:1 so the
     glass layer keeps sampling the real backdrop while fading in */
  #ov > * { opacity: var(--op, 0); }
  /* dark image behind the card -> all-white ink (hover inverts to black) */
  #ov.dark { --ink:#f4f2ee; --inkSoft:rgba(255,255,255,.6); --inkHover:#111; }
  #ov .top { display:flex; justify-content:space-between; align-items:flex-start; }
  #ov .h1  { font-size:1.9em; font-weight:400; letter-spacing:.06em; line-height:1.05; text-transform:uppercase; }
  #ov .h2  { font-size:2.9em; font-weight:800; letter-spacing:.01em; line-height:.98; text-transform:uppercase; }
  #ov .pill{ display:inline-block; margin-top:1em; border:1px solid var(--inkSoft);
             border-radius:99em; padding:.32em .9em; font-size:.75em; font-weight:600; letter-spacing:.16em; }
  #ov .ovClose { width:2.2em; height:2.2em; flex:none; margin-top:.2em;
                 pointer-events:auto; cursor:pointer; stroke:var(--ink); transition:stroke .18s ease; }
  #ov .ovClose:hover:not(.clicked) { stroke:var(--inkHover); }
  #ov .num { font-size:3.6em; font-weight:800; line-height:.95; color:var(--ink); }
  #ov .cta { display:flex; align-items:center; gap:.7em; margin-top:1.1em;
             font-size:.82em; font-weight:600; letter-spacing:.2em;
             pointer-events:auto; width:max-content;
             transition:color .18s ease; }
  #ov.linked { cursor:pointer; }
  #ov .cta.linked { cursor:pointer; }
  #ov .cta svg { width:2.6em; height:1em; flex:none; stroke:var(--ink);
                 transition:transform .18s ease, stroke .18s ease; }
  #ov .cta.linked:hover:not(.clicked) { color:var(--inkHover); }
  #ov .cta.linked:hover:not(.clicked) svg { stroke:var(--inkHover); transform:translateX(.35em); }
  #ov .cta.linked:hover:not(.clicked) span { text-decoration:underline; text-underline-offset:.25em; }
  #ov .deco { position:absolute; right:1.6em; bottom:1.5em; width:1.15em; height:1.15em; opacity:.9; }


  #brand {
    position:fixed; left:22px; top:20px; z-index:6;
    font-family:"Segoe UI", system-ui, sans-serif; user-select:none;
  }
  /* glass pill: translucent, backdrop shows through blurred, bright rim */
  #brand .name {
    display:inline-block; padding:9px 18px; border-radius:6px;
    background:rgba(255,255,255,.30);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border:1px solid rgba(255,255,255,.8);
    box-shadow: 7px 9px 20px rgba(0,0,0,.18),
                inset 0 1.5px 0 rgba(255,255,255,.95),
                inset 0 -10px 18px rgba(255,255,255,.22);
    font-size:12px; font-weight:700; letter-spacing:.05em; color:#222;
  }
  /* icon chips float OUTSIDE, under the pill — same glass */
  #brand .social { display:flex; gap:8px; margin-top:9px; padding-left:6px; }
  #brand .social a {
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    border-radius:4px;
    background:rgba(255,255,255,.30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,.8);
    box-shadow: 4px 5px 10px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  #brand .social a:hover { transform: translateY(-2px);
    box-shadow: 5px 7px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.9); }
  #brand .social svg { width:11px; height:11px; fill:#2a2a2a; }


  /* ── Loading overlay: covers everything until the last image landed ── */
  #loader {
    position:fixed; inset:0; z-index:200;
background: #076585;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F5F3F0, #076585);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F5F3F0, #076585); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    display:flex; align-items:center; justify-content:center;
    font-family:"Segoe UI", system-ui, sans-serif; color:#1a1a1a;
    opacity:1; transition:opacity .45s ease;
  }
  #loader.done { opacity:0; pointer-events:none; }
  #loader .lTop { position:absolute; left:34px; top:30px; }
  #loader .lDay { font-size:13px; font-weight:700; letter-spacing:.14em; }
  #loader .lTitle { font-size:34px; font-weight:800; letter-spacing:.02em;
                    text-transform:uppercase; margin-top:6px; }
  #loader .lHint { margin-top:22px; font-size:12px; font-weight:700;
                   letter-spacing:.12em; line-height:1.7; opacity:.75; }
  #loader .lMid { display:flex; flex-direction:column; align-items:center; gap:14px; }
  #loader .lSpin {
    width:34px; height:34px; border-radius:50%;
    border:2px solid rgba(0,0,0,.14); border-top-color:#2c2c2c;
    animation:lspin .9s linear infinite;
  }
  @keyframes lspin { to { transform:rotate(360deg); } }
  #loader .lTxt { font-size:12px; font-weight:600; letter-spacing:.22em; opacity:.6; }

  /* ── Vignette ── */
  #vignette {
    pointer-events: none;
    background: transparent;
    height: 100vh;
    width: 100%;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.23);
    position: fixed;
    z-index: 98;
    left: 0; top: 0;
  }

  /* "get all sources" — bottom left, same glass optics as the social chips */
  #srcBtn {
    position:fixed; left:12px; bottom:12px; z-index:99;
    height:24px; padding:0 10px; border-radius:4px;
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,.8);
    box-shadow: 4px 5px 10px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration:none; user-select:none;
  }
  #srcBtn:hover { transform: translateY(-2px);
    box-shadow: 5px 7px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.9); }
  #srcBtn svg { width:11px; height:11px; fill:#2a2a2a; }
  #srcBtn span {
    font:700 10px/1 "Segoe UI", system-ui, sans-serif;
    color:#2a2a2a; letter-spacing:.03em; white-space:nowrap;
  }