/* ===================== NUDNIK — an Israeli newspaper, mid-1980s ===================== */
:root{
  --paper:#f5f3ec;
  --ink:#1b1a18;
  --font:"Heebo", "Arial Hebrew", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{overflow:hidden; background:#2a2622; font-family:var(--font); color:var(--ink); -webkit-tap-highlight-color:transparent; user-select:none}

/* ------------------------------------------------ the table ------------------------------------------------ */
.scenery{position:fixed; inset:0; z-index:0}
.scene{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease}
body[data-scene="cafe"] .s-cafe{opacity:1}
.vignette{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.45) 100%)}

/* café: a wooden table, a cup of coffee */
.s-cafe{background-color:#6a432a; background-image:
  repeating-linear-gradient(0deg, transparent 0 168px, rgba(0,0,0,.28) 168px 170px, rgba(255,220,180,.06) 170px 171px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='340'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.0025 0.11' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .18  0 0 0 0 .09  0 0 0 0 .03  0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  background-size:auto, 900px 340px}
.cup{position:absolute; right:-46px; top:-40px; width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle, #3b2212 0 54px, #24140a 55px 58px, #f3efe7 59px 72px, rgba(0,0,0,.18) 73px 75px, #ebe5da 76px 116px, rgba(0,0,0,.2) 117px 120px, transparent 121px);
  filter:drop-shadow(8px 14px 14px rgba(0,0,0,.45))}
.cup::after{content:""; position:absolute; left:26px; top:112px; width:42px; height:20px; border-radius:12px; background:#efeae0; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}

/* ------------------------------------------------ the newspaper ------------------------------------------------ */
.stage{position:fixed; inset:0 0 72px 0; z-index:1; display:grid; place-items:center}
.book{position:relative; perspective:2600px; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.5,.05,.25,1); touch-action:none; cursor:grab}
.book:active{cursor:grabbing}
.leaf{position:absolute; top:0; left:0; width:var(--pw); height:var(--ph); transform-origin:left center; transform-style:preserve-3d; will-change:transform}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.25), 0 14px 30px rgba(0,0,0,.28)}
.face.back{transform:rotateY(180deg)}
.shade{position:absolute; inset:0; pointer-events:none; opacity:0}
.face.front .shade{background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 80%)}
.face.back .shade{background:linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 45%, rgba(0,0,0,0) 80%)}

.page{position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(var(--pw)*.055) calc(var(--pw)*.06) calc(var(--pw)*.06);
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='11'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 .62  0 0 0 0 .45  0 0 0 .22 -.04'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>"),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(170,150,105,.18) 100%);
  background-size:240px 240px, 800px 800px, 100% 100%}
/* the spine (book opens left to right): right pages bind on their left edge, left pages on their right */
.face.front .page::after, .face.back .page::after{content:""; position:absolute; top:0; bottom:0; width:9%; pointer-events:none}
.face.front .page::after{left:0; background:linear-gradient(90deg, rgba(60,45,20,.22), transparent)}
.face.back .page::after{right:0; background:linear-gradient(270deg, rgba(60,45,20,.22), transparent)}
body[data-mode="single"] .face.front .page::after{width:4%}
body[data-mode="spread"] .leaf{left:var(--pw)}

/* faint print from the other side of the sheet */
.through{position:absolute; inset:0; transform:scaleX(-1); opacity:.055; filter:grayscale(1) blur(1.3px); pointer-events:none}
.through .content{position:absolute; left:6%; right:6%; top:10.5%; bottom:6%}
.through .art{position:absolute}
.through img{width:100%; height:100%; display:block}

/* horizontal fold, the way it came off the stand */
.fold{position:absolute; left:0; right:0; top:50%; height:14px; transform:translateY(-50%); pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.05) 45%, rgba(255,255,255,.55) 52%, rgba(0,0,0,.03) 60%, transparent); mix-blend-mode:multiply}
.ring{position:absolute; width:calc(var(--pw)*.3); aspect-ratio:1; right:8%; bottom:12%; border-radius:50%; pointer-events:none; mix-blend-mode:multiply; opacity:.55;
  background:radial-gradient(circle, transparent 0 60%, rgba(140,90,40,.18) 63%, rgba(120,75,30,.32) 66%, rgba(140,90,40,.1) 69%, transparent 72%); transform:rotate(20deg) scale(1,.96)}

/* ---- masthead (front page) ---- */
.mast{position:relative; margin-bottom:calc(var(--pw)*.03)}
.mast-strip{display:flex; align-items:center; gap:calc(var(--pw)*.02); direction:rtl; font-weight:700; font-size:calc(var(--pw)*.026); border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); padding:calc(var(--pw)*.006) 0}
.mast-strip .dots{flex:1; border-bottom:1px dotted rgba(0,0,0,.5); transform:translateY(-.3em)}
.mast-main{display:flex; align-items:center; justify-content:center; padding:calc(var(--pw)*.02) 0 calc(var(--pw)*.014)}
.logo{height:calc(var(--pw)*.27); width:auto; mix-blend-mode:multiply; filter:contrast(1.3)}
.mast-rule{height:calc(var(--pw)*.012); background:var(--ink); box-shadow:0 calc(var(--pw)*.008) 0 -1px var(--paper), 0 calc(var(--pw)*.012) 0 -1px var(--acc)}

/* ---- running head (inside pages) ---- */
.runhead{display:flex; direction:rtl; align-items:center; gap:calc(var(--pw)*.02); margin-bottom:calc(var(--pw)*.035); font-weight:900}
.runhead .mark{font-size:calc(var(--pw)*.036); line-height:1.25; letter-spacing:0; white-space:nowrap}
.runhead .bar{flex:1; height:calc(var(--pw)*.018); background:var(--acc); box-shadow:1.5px -1px 0 rgba(0,140,200,.3)}
.runhead .num{font-size:calc(var(--pw)*.03); font-weight:700; border:2px solid var(--ink); border-radius:50%; width:1.9em; height:1.9em; display:grid; place-items:center}
.is-back .runhead .bar{background:repeating-linear-gradient(90deg, var(--acc) 0 30%, var(--ink) 30% 32%)}

/* ---- the art, printed ---- */
.content{position:relative; flex:1; min-height:0}
.tinted .content::before{content:""; position:absolute; inset:calc(var(--pw)*-.022); pointer-events:none;
  background:radial-gradient(color-mix(in srgb, var(--acc) 55%, transparent) 28%, transparent 31%) 0 0/5px 5px; opacity:.55; mix-blend-mode:multiply}
.art{position:absolute; margin:0; background:#ddd8cc; outline:1px solid rgba(20,18,15,.75); outline-offset:0}
.art img, .art video{display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply;
  filter:contrast(1.06) saturate(.86) brightness(.98) drop-shadow(1.2px 0 0 rgba(0,170,230,.22)) drop-shadow(-1px .6px 0 rgba(235,0,120,.18))}
.art::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.2;
  background:radial-gradient(rgba(0,0,0,.6) 27%, transparent 31%) 0 0/3px 3px}
.content .art{cursor:zoom-in}
/* video comics: a moving picture in the paper, framed like a TV */
.art.vid{outline:0; border-radius:calc(var(--pw)*.018); box-shadow:0 0 0 calc(var(--pw)*.009) #1e1c1a, 0 0 0 calc(var(--pw)*.013) #6d655a}
.art.vid video{border-radius:inherit; mix-blend-mode:normal; filter:sepia(.18) contrast(1.06) saturate(.9)}
.art.vid::after{border-radius:inherit; opacity:.35; background:repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px)}
.sound-hint{position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background:rgba(20,18,16,.75) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3ec' stroke-width='2'><path d='M5 9h3l4-3v12l-4-3H5zM16 9a4 4 0 0 1 0 6'/></svg>") center/14px no-repeat; z-index:2}

/* back page: printer's color control strip */
.colorbar{display:flex; height:calc(var(--pw)*.022); margin-top:calc(var(--pw)*.025)}
.colorbar i{flex:1}
.colorbar i:nth-child(1){background:#00a0e3} .colorbar i:nth-child(2){background:#e5007e} .colorbar i:nth-child(3){background:#ffe500}
.colorbar i:nth-child(4){background:#1b1a18} .colorbar i:nth-child(5){background:#7fcff1} .colorbar i:nth-child(6){background:#f27fbe}
.colorbar i:nth-child(7){background:#fff27f} .colorbar i:nth-child(8){background:#8d8c8b}

/* ------------------------------------------------ controls (no words, just shapes) ------------------------------------------------ */
.edge{position:fixed; top:calc(50% - 36px); z-index:5; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(25,22,19,.55); display:grid; place-items:center; transition:opacity .3s, background .2s; backdrop-filter:blur(4px)}
.edge:hover{background:rgba(25,22,19,.85)}
.edge:disabled{opacity:0; pointer-events:none}
.edge svg{width:26px; height:26px; fill:none; stroke:#f5f3ec; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.edge-l{left:16px} .edge-r{right:16px}
body[data-mode="single"] .edge{display:none}

.dock{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:4px;
  padding:6px; border-radius:999px; background:rgba(25,22,19,.72); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.35)}
.dock button{width:42px; height:42px; border-radius:50%; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; opacity:.6; transition:opacity .2s, background .2s}
.dock button:hover{opacity:1}
.dock button[aria-pressed="true"]{opacity:1; background:rgba(245,243,236,.16)}
.dock svg{width:22px; height:22px; fill:none; stroke:#f5f3ec; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.dock button{position:relative}
/* which take is playing: two small dots under the active icon */
.dock button[data-take]::after{content:""; position:absolute; left:50%; bottom:4px; width:3px; height:3px; border-radius:50%; transform:translateX(-50%);
  background:transparent; box-shadow:-3px 0 0 rgba(245,243,236,.35), 3px 0 0 rgba(245,243,236,.35)}
.dock button[data-take="1"]::after{box-shadow:-3px 0 0 #f5f3ec, 3px 0 0 rgba(245,243,236,.3)}
.dock button[data-take="2"]::after{box-shadow:-3px 0 0 rgba(245,243,236,.3), 3px 0 0 #f5f3ec}
.dock .sep{width:1px; height:24px; background:rgba(245,243,236,.25); margin:0 4px}

/* ------------------------------------------------ viewer ------------------------------------------------ */
.viewer{border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100vw; height:100dvh; margin:0; cursor:zoom-out}
.viewer::backdrop{background:rgba(12,10,8,.9)}
.viewer .holder{width:100%; height:100%; display:grid; place-items:center; padding:3vh 3vw}
.viewer img, .viewer video{max-width:94vw; max-height:92dvh; box-shadow:0 20px 60px rgba(0,0,0,.6); background:#000}

@media (max-width:700px){
  .cup{width:150px; height:150px; right:-40px; top:-44px; transform:scale(.6); transform-origin:top right}
}
@media (prefers-reduced-motion:reduce){ .scene{transition:none} .book{transition:none} }