@font-face { font-family:Inter; src:url('../fonts/Inter.ttf'); font-weight:100 900; }
@font-face { font-family:Garamond; src:url('../fonts/EBGaramond.ttf'); font-weight:400 800; }
@font-face { font-family:Garamond; font-style:italic; src:url('../fonts/EBGaramond-Italic.ttf'); font-weight:400 800; }
@font-face { font-family:Hand; src:url('../fonts/Caveat.ttf'); font-weight:400 700; }
* { margin:0; padding:0; box-sizing:border-box; }
html { background:#0b0a09; }
body { height:100vh; background:#0b0a09; overflow:hidden; overscroll-behavior:none; }
.viewport { position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; }
.stage { position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:center; overflow:hidden; background:#0b0a09; }
.abs { position:absolute; left:0; top:0; will-change:transform, opacity; }
.abs > img { display:block; width:100%; height:auto; }
#noteB1, #noteB2, #noteB3, #plan, #sabrang { filter:drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.cam { position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
canvas.fx { position:absolute; inset:0; width:1920px; height:1080px; pointer-events:none; }
.paper { position:absolute; inset:0; }
.paper > img { width:100%; height:100%; object-fit:cover; display:block; }
.hand { font-family:Hand; color:#23201b; }
.note-text { position:absolute; font:600 40px/1.15 Hand; color:#23201b; }
.note-text span { display:block; overflow:hidden; white-space:nowrap; }
.sub { position:absolute; left:0; right:0; bottom:70px; text-align:center; font:italic 500 44px/1.25 Garamond; color:#f4ecdc; opacity:0; padding:0 160px; z-index:22; }
.sub span { background:rgba(14,11,8,.72); padding:4px 26px 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; border-radius:4px; }
.sub.ink span { background:rgba(240,230,208,.92); color:#1d1a16; }
.big { position:absolute; left:0; right:0; text-align:center; font:500 70px/1.15 Garamond; color:#1d1a16; opacity:0; padding:0 180px; }
.big em { color:#7a6b55; }
.big.light { color:#f4ecdc; text-shadow:0 2px 6px rgba(0,0,0,.8); z-index:5; }
.big.light::before { content:''; position:absolute; left:0; right:0; top:-40px; bottom:-40px; z-index:-1; background:linear-gradient(rgba(12,10,8,0), rgba(12,10,8,.62) 30%, rgba(12,10,8,.62) 70%, rgba(12,10,8,0)); }
.big.light em { color:#d9c9a8; }
.ptitle { position:absolute; left:540px; top:92px; font:600 15px Inter; letter-spacing:.32em; text-transform:uppercase; color:#6b6153; }
.phead { position:absolute; left:540px; top:122px; font:500 62px/1.1 Garamond; color:#1d1a16; }
.phead em { color:#7a6b55; }
.tag { position:absolute; width:250px; text-align:center; }
.tag .fig { font:600 13px Inter; letter-spacing:.24em; text-transform:uppercase; color:#8a7b65; }
.tag .nm { margin-top:8px; font:700 30px Inter; letter-spacing:.06em; color:#1d1a16; }
.tag .q { margin-top:6px; font:italic 500 27px/1.2 Garamond; color:#4c4337; }
.mini { position:absolute; left:0; top:0; font:700 40px Hand; color:#2a241c; }
.colhead { position:absolute; top:240px; font:600 16px Inter; letter-spacing:.28em; text-transform:uppercase; }
.row { position:absolute; left:0; right:0; height:132px; }
.row .l, .row .r { position:absolute; top:40px; width:520px; font:italic 500 32px/1.15 Garamond; color:#2a241c; }
.row .l { right:calc(50% + 120px); text-align:right; }
.row .r { left:calc(50% + 120px); }
.letter { position:absolute; left:0; top:0; font:700 150px Hand; color:#23201b; will-change:transform; }
.stampText { position:absolute; inset:0; display:grid; place-items:center; font:900 80px/1.04 Inter; filter:url(#grit); letter-spacing:.04em; color:#0d0b08; padding:0 90px; text-align:center; mix-blend-mode:multiply; }
.sticky { position:absolute; left:0; top:0; z-index:20; opacity:0; transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1.2); filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); pointer-events:none; }
.sticky > img.bg { position:absolute; inset:0; width:100%; height:100%; }
.sticky .tape { position:absolute; left:50%; top:-22px; width:150px; margin-left:-75px; transform:rotate(-3deg); }
.sticky p { position:relative; font:700 37px/1.16 Hand; color:#1b1813; padding:44px 34px 40px; }
.anchor { position:absolute; left:34px; top:28px; width:430px; height:222px; z-index:21; filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); transition:opacity .5s, transform .6s cubic-bezier(.2,.9,.25,1.2); pointer-events:none; }
.anchor > img { position:absolute; inset:0; width:100%; height:100%; }
.anchor .k { position:absolute; left:36px; top:34px; font:700 14px Inter; letter-spacing:.26em; text-transform:uppercase; color:#8a6d3f; }
.anchor .q { position:absolute; left:36px; right:30px; top:60px; font:700 40px/1.1 Hand; color:#23201b; }
.hud { position:fixed; left:250px; bottom:14px; font:500 12px Inter; color:rgba(255,255,255,.35); z-index:9; }
.prog { position:fixed; left:0; bottom:0; height:2px; background:rgba(255,255,255,.5); z-index:9; }
.shot { position:fixed; right:18px; bottom:12px; font:600 12px Inter; color:rgba(255,255,255,.35); z-index:9; letter-spacing:.08em; }

/* ---- added for Seq 4–9 ---- */
.layer { position:absolute; inset:0; opacity:0; }
.lbl { font-size:40px; font-weight:700; white-space:nowrap; color:#1d1a16; background:#f0e6d0; padding:2px 18px 4px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.rule { position:absolute; left:0; top:0; width:480px; padding:14px 22px 14px 86px; background:#f0e6d0; border-radius:3px; box-shadow:0 8px 18px rgba(0,0,0,.55); font:700 27px/1.15 Inter; color:#1d1a16; opacity:0; text-align:left !important; }
.rule b { position:absolute; left:20px; top:12px; font:600 48px/1 Garamond; color:#9a6a1c; }
.rule small { display:block; margin-top:5px; font:italic 500 21px Garamond; color:#5f5240; }
.rule.dark { background:#f3ddd3; } .rule.dark b { color:#a8402a; }
.malas { position:absolute; left:0; top:0; font:700 230px/1 Hand; color:#1d1a16; letter-spacing:.04em; }
.dtag { position:absolute; left:0; top:0; width:330px; }
.dtag img { width:100%; display:block; }
.dtag p { position:absolute; left:30%; top:20%; right:4%; font:700 30px/1.05 Hand; color:#23201b; }
.dsmall { position:absolute; left:0; top:0; font:700 54px/1 Hand; color:#2a241c; }
.dsmall small { font:600 18px Inter; letter-spacing:.2em; color:#8a7b65; margin-left:12px; }
.chips { position:absolute; font:600 17px Inter; letter-spacing:.18em; text-transform:uppercase; color:#6b5d48; }
.col-h { position:absolute; font:600 16px Inter; letter-spacing:.3em; text-transform:uppercase; color:#6b6153; }
.clipText { position:absolute; left:860px; top:400px; width:900px; font:600 52px/1.15 Garamond; color:#1d1a16; }
.pcol { position:absolute; top:250px; width:500px; text-align:center; }
.pcol .fig { height:430px; display:flex; align-items:flex-end; justify-content:center; }
.pcol .fig img { height:100%; }
.pcol h3 { margin-top:16px; font:500 54px Garamond; color:#1d1a16; }
.pcol .att { margin-top:6px; font:italic 500 28px/1.2 Garamond; color:#4c4337; }
.pcol dl { margin-top:14px; font:500 20px/1.45 Inter; color:#4c4337; }
.pcol dt { font:600 12px Inter; letter-spacing:.24em; text-transform:uppercase; color:#8a7b65; margin-top:8px; }
.pcol .tyr { margin-top:14px; font:700 30px/1.15 Hand; color:#8a2a1c; }
.glabel { position:absolute; font:500 40px Garamond; color:#1d1a16; text-align:center; width:520px; }
.glabel small { display:block; font:600 14px Inter; letter-spacing:.24em; text-transform:uppercase; color:#8a7b65; margin-bottom:6px; }
.glabel.home { font-style:italic; }
.axis { position:absolute; font:600 16px Inter; letter-spacing:.26em; text-transform:uppercase; color:#6b6153; }
.d8 { position:absolute; left:300px; right:300px; display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:20px; padding:14px 0; border-top:1px solid rgba(42,36,28,.25); font:500 30px Garamond; color:#2a241c; opacity:0; }
.d8 .r { font:600 26px Inter; color:#8a2a1c; } .d8 .p { font:700 34px Hand; }
.d8.h { font:600 15px Inter; letter-spacing:.26em; text-transform:uppercase; color:#8a7b65; border-top:0; }
.l8line { position:absolute; left:0; top:0; font:600 40px Hand; color:#23201b; white-space:nowrap; }
.l8line.new { color:#2c4f8a; overflow:hidden; }
.typed { position:absolute; left:220px; right:220px; top:380px; text-align:center; font:500 54px/1.3 Garamond; color:#1d1a16; opacity:0; }
.typed em { color:#7a6b55; }
#closing { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; pointer-events:none; }
#closing p { font:500 66px/1.15 Garamond; color:#f4ecdc; opacity:0; }
#closing p em { color:#d9c9a8; }
#closing img { width:300px; margin-top:60px; opacity:0; }
#closing #gzLine { font:600 15px Inter; letter-spacing:.3em; text-transform:uppercase; color:#8f8574; margin-top:-4px; }
#loader { background:#0b0a09; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .6s; z-index:50; }
#loader p { font:600 16px Inter; letter-spacing:.3em; text-transform:uppercase; color:#8f8574; }
#loader span { font:italic 500 30px Garamond; color:#d9c9a8; }

.ptag { position:absolute; left:0; top:0; padding:6px 22px 9px; background:#f0e6d0; box-shadow:0 6px 14px rgba(0,0,0,.45); font:700 38px/1 Hand; color:#1d1a16; white-space:nowrap; opacity:0; }

.home { position:fixed; left:14px; bottom:8px; z-index:60; display:flex; gap:6px; }
.home a { font:600 13px Inter; letter-spacing:.06em; color:rgba(255,255,255,.72); text-decoration:none; padding:7px 11px; border-radius:6px; background:rgba(11,10,9,.55); }
.home a:hover { color:#fff; background:rgba(11,10,9,.85); }


/* ---- phone gate: portrait screens get an honest door instead of the film ---- */
#gate { display:none; }
body.gated #gate { display:flex; position:fixed; inset:0; z-index:100; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px 22px; background:#efe7d6 url('../art/web/board.webp') center/cover; color:#1d1a16; text-align:center; overflow-y:auto; }
body.gated .viewport, body.gated .home, body.gated .hud, body.gated .prog { display:none; }
#gate .g-k { font:600 11px Inter; letter-spacing:.26em; text-transform:uppercase; color:#8a6d3f; }
#gate h1 { font:500 30px/1.1 Garamond; }
#gate img { width:100%; max-width:420px; border-radius:4px; box-shadow:0 10px 24px rgba(0,0,0,.3); }
#gate .g-p { font:italic 500 21px/1.3 Garamond; }
#gate .g-btns { display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; margin-top:4px; }
#gate .g-rot { font:600 14px Inter; color:#4c4337; }
#gate .g-btn { display:block; padding:14px; border-radius:10px; background:#1d1a16; color:#f4ecdc; font:600 15px Inter; text-decoration:none; }
#gate .g-btn.ghost { background:transparent; color:#1d1a16; border:1.5px solid #1d1a16; }
#gate .g-home { margin-top:6px; font:600 13px Inter; color:#6b5d48; text-decoration:none; }

/* ---- PECI page ---- */
#peciPage { z-index:3; }
.peciRow { position:absolute; left:560px; width:1260px; display:flex; gap:30px; align-items:center; opacity:0; }
.peciRow b { width:110px; height:110px; flex:none; display:grid; place-items:center; background:#1d1a16; color:#efe6d2; font:600 72px/1 Garamond; border-radius:4px; box-shadow:0 6px 14px rgba(0,0,0,.3); }
.peciRow .pn { font:500 46px/1.05 Garamond; color:#1d1a16; }
.peciRow .pd { margin-top:4px; font:500 32px/1.2 Garamond; color:#2a241c; }
.peciRow .px { margin-top:4px; font:italic 500 28px/1.2 Garamond; color:#6b5d48; }
.peciRow .pw { margin-left:18px; font:600 15px Inter; letter-spacing:.14em; text-transform:uppercase; color:#8a6d3f; }
.peciRow .pw i { font:700 30px Hand; letter-spacing:0; text-transform:none; color:#8a2a1c; font-style:normal; }

/* ---- vertical progress track with milestones ---- */
#track { position:absolute; left:14px; top:0; bottom:0; width:16px; z-index:23; }
#track::after { content:''; position:absolute; left:-6px; right:-6px; top:282px; height:716px; border-radius:14px; background:rgba(14,11,8,.55); z-index:-1; }
#track::before { content:''; position:absolute; left:7px; top:300px; height:680px; width:2px; background:rgba(239,230,210,.4); }
#trackFill { position:absolute; left:7px; top:300px; width:2px; background:#d9b56a; }
.ms { position:absolute; left:-2px; height:20px; margin-top:-10px; display:flex; align-items:center; flex-direction:row; gap:10px; border:0; background:none; cursor:pointer; padding:0; }
.ms i { width:12px; height:12px; border-radius:50%; background:transparent; border:2px solid rgba(239,230,210,.75); flex:none; margin-right:0; transition:transform .25s; }
.ms.peci i { border-radius:3px; }
.ms.done i { background:#d9b56a; border-color:#d9b56a; }
.ms.on i { background:#efe6d2; border-color:#d9b56a; transform:scale(1.5); }
.ms span { font:600 15px Inter; letter-spacing:.06em; color:#efe6d2; background:rgba(14,11,8,.9); padding:4px 10px; border-radius:4px; white-space:nowrap; opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s; pointer-events:none; }
.ms.on span, #track:hover .ms span { opacity:1; transform:none; }
.peciBracket { position:absolute; left:24px; width:8px; border:2px solid rgba(217,181,106,.75); border-left:0; border-radius:0 3px 3px 0; pointer-events:none; }
.peciBracket span { position:absolute; right:12px; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:right center; font:700 12px Inter; letter-spacing:.3em; color:#d9b56a; display:none; }

.ladder { position:absolute; left:560px; top:900px; font:500 44px Garamond; color:#1d1a16; opacity:0; }
.ladder i { font-style:normal; color:#8a6d3f; margin:0 10px; }
.crow { position:absolute; left:600px; width:1100px; font:500 40px/1.2 Garamond; color:#1d1a16; opacity:0; }
.crow b { display:inline-block; width:56px; font:600 40px Garamond; color:#8a6d3f; }
.crow b.w { width:auto; margin-right:22px; color:#1d1a16; font-weight:600; }
.crow span { font-style:italic; color:#4c4337; font-size:34px; }
.where { position:absolute; font:600 17px Inter; letter-spacing:.18em; text-transform:uppercase; color:#6b5d48; opacity:0; }
.where b { font:700 40px Hand; letter-spacing:0; text-transform:none; color:#8a2a1c; }
.jelek { position:absolute; left:1000px; top:540px; width:600px; opacity:0; transform:rotate(-2deg); background:#f0e6d0; padding:22px 28px; box-shadow:0 8px 18px rgba(0,0,0,.3); }
.jelek .q, .inf .q { font:700 54px/1.15 Hand; color:#1d1a16; }
.jelek .a { margin-top:10px; font:italic 500 30px/1.25 Garamond; color:#8a2a1c; }
.inf { position:absolute; left:170px; top:300px; width:1500px; opacity:0; }
.inf .tags { margin-top:12px; font:600 17px Inter; letter-spacing:.16em; text-transform:uppercase; color:#6b5d48; }
.inf .tags b { color:#8a2a1c; }
.inf.fake { top:560px; }
.inf.fake .q { color:#6b5d48; text-decoration:line-through; text-decoration-color:#8a2a1c; text-decoration-thickness:4px; }
.tkh { position:absolute; left:560px; right:440px; top:280px; display:grid; grid-template-columns:1fr 1fr; gap:60px; font:600 18px Inter; letter-spacing:.18em; text-transform:uppercase; color:#6b5d48; }
.tkh b { font:700 44px Hand; letter-spacing:0; text-transform:none; }
.tkh span:first-child b { color:#8a2a1c; } .tkh span:last-child b { color:#2f6b3a; }
.tkr { position:absolute; left:170px; right:120px; display:grid; grid-template-columns:330px 1fr 1fr; min-height:130px; gap:60px; align-items:baseline; padding-top:18px; border-top:1px solid rgba(42,36,28,.25); opacity:0; }
.tkr .n { font:500 48px Garamond; color:#1d1a16; }
.tkr .a, .tkr .b { font:500 38px/1.2 Garamond; }
.tkr .a { color:#8a2a1c; } .tkr .b { color:#2f6b3a; }
.file { position:absolute; left:3px; height:14px; margin-top:-7px; display:flex; align-items:center; gap:12px; border:0; background:none; cursor:pointer; padding:0; opacity:0; pointer-events:none; transition:opacity .25s; }
.file.show { opacity:1; pointer-events:auto; }
.file i { width:6px; height:6px; border-radius:50%; background:rgba(239,230,210,.6); flex:none; }
.file.done i { background:#d9b56a; } .file.on i { background:#fff; transform:scale(1.6); }
.file span { font:500 13px Inter; color:#efe6d2; background:rgba(14,11,8,.85); padding:2px 8px; border-radius:3px; white-space:nowrap; margin-left:18px; opacity:0; transition:opacity .2s; }
.file:hover span, .file.on span { opacity:1; }
.file.on span { font-weight:700; background:#1d1a16; outline:1px solid #d9b56a; }
.ms span { margin-left:16px; }