/* AHEPA Relief Museum · tablet kiosk — shared styles */
@font-face{font-family:"GFS Didot";src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"GFS Didot";src:url(fonts/gfs-didot-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}
@font-face{font-family:"Commissioner";font-weight:400;src:url(fonts/commissioner-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Commissioner";font-weight:400;src:url(fonts/commissioner-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}
@font-face{font-family:"Commissioner";font-weight:600;src:url(fonts/commissioner-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Commissioner";font-weight:600;src:url(fonts/commissioner-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-024F,U+2000-206F,U+20AC}

:root{--navy:#13213F;--navy2:#1D2E52;--cream:#F4EEE2;--paper:#FBF8F1;--sand:#EAE2D2;--line:#D9CDB6;--red:#A3262A;--red2:#8F2226;--grey:#5A6272;--gold:#C9A45C;
  --serif:"GFS Didot",Georgia,serif;--sans:"Commissioner","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--navy);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{font-family:var(--sans);color:var(--navy)}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:800px;transform-origin:50% 50%;background:var(--cream);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block}
.screen{position:absolute;inset:0;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- attract ---------- */
#attract{background:#0c1528;color:var(--cream)}
#attract .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
#attract .slide img{width:100%;height:100%;object-fit:cover}
#attract .slide.on{opacity:1;animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
#attract .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,21,40,.92) 0%,rgba(12,21,40,.7) 45%,rgba(12,21,40,.15) 100%)}
#attract .brand{position:absolute;left:72px;top:56px;display:flex;align-items:center;gap:18px;font-size:20px;letter-spacing:3px;text-transform:uppercase;color:#E9DFC9}
#attract .brand img{width:64px;height:64px;object-fit:contain;-webkit-user-drag:none;touch-action:none;-webkit-touch-callout:none}
#attract .hero{position:absolute;left:72px;top:190px;width:800px;height:430px;display:flex;flex-direction:column;justify-content:center}
#attract .place{font-size:22px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:600}
#attract h1{margin:14px 0 18px;font-family:var(--serif);font-weight:400;font-size:92px;line-height:1.02}
#attract .en{font-size:30px;font-style:italic;color:#D8CCB4}
#attract .touch{position:absolute;left:72px;bottom:72px;display:flex;align-items:center;gap:22px}
#attract .ring{width:76px;height:76px;border-radius:50%;border:3px solid var(--cream);position:relative}
#attract .ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--cream);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(1.8);opacity:0}}
#attract .ring::before{content:"";position:absolute;left:26px;top:22px;border-left:28px solid var(--cream);border-top:16px solid transparent;border-bottom:16px solid transparent}
#attract .touch p{font-size:28px;line-height:1.3}
#attract .touch p span{display:block;font-size:22px;color:#CFC3AA}
#attract .langs{position:absolute;right:72px;bottom:80px;display:flex;gap:16px}
#attract .langs button{min-width:170px;height:72px;border-radius:36px;border:2px solid var(--cream);font-size:24px;font-weight:600;color:var(--cream);background:rgba(12,21,40,.55)}

/* ---------- header ---------- */
.hdr{position:absolute;left:0;right:0;top:0;height:84px;background:var(--navy);color:var(--cream);display:flex;align-items:center;padding:0 32px;gap:20px}
.hdr .logo{width:52px;height:52px;object-fit:contain;-webkit-user-drag:none;flex:none;touch-action:none;-webkit-touch-callout:none}
.hdr .ttl{flex:1;min-width:0}
.hdr .ttl small{display:block;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:600}
.hdr .ttl b{display:block;font-family:var(--serif);font-weight:400;font-size:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .back{height:56px;padding:0 26px 0 20px;border-radius:28px;border:2px solid rgba(244,238,226,.5);font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px}
.hdr .back::before{content:"";width:12px;height:12px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
.lang{display:flex;border:2px solid rgba(244,238,226,.5);border-radius:28px;overflow:hidden;height:56px}
.lang button{width:72px;font-size:19px;font-weight:600;color:var(--cream)}
.lang button.on{background:var(--cream);color:var(--navy)}

/* ---------- home ---------- */
#home .intro{position:absolute;left:48px;top:116px;width:1184px;display:flex;align-items:baseline;gap:24px}
#home .intro h2{font-family:var(--serif);font-weight:400;font-size:46px}
#home .intro p{font-size:22px;color:var(--grey)}
#home .tiles{position:absolute;left:48px;right:48px;top:196px;bottom:48px;display:grid;gap:24px}
.tile{position:relative;border-radius:6px;overflow:hidden;background:var(--navy);color:var(--cream);text-align:left;box-shadow:0 2px 0 rgba(0,0,0,.05)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:active img{transform:scale(1.04)}
.tile .g{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,33,63,0) 22%,rgba(19,33,63,.82) 58%,rgba(19,33,63,.97) 100%)}
.tile .t{position:absolute;left:24px;right:24px;bottom:22px}
.tile .t small{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600}
.tile .t b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.08;margin:4px 0 6px}
.tile .t span{font-size:17px;color:#DCD2BE}
.tile.quiz{background:var(--red)}
.tile.quiz .big{position:absolute;right:22px;top:12px;font-family:var(--serif);font-size:150px;line-height:1;color:rgba(244,238,226,.18)}
.tile.quiz .g{display:none}

/* ---------- topic (cards) ---------- */
.media{position:absolute;background:#0c1528;overflow:hidden;border-radius:4px}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media img.contain{object-fit:contain;background:#0c1528}
.media .ai{position:absolute;left:14px;top:14px;background:rgba(12,21,40,.78);color:var(--cream);font-size:14px;padding:7px 14px;border-radius:16px;letter-spacing:.3px}
.media .zoom{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:rgba(12,21,40,.7);display:flex;align-items:center;justify-content:center}
.media .zoom::before{content:"";width:18px;height:18px;border:3px solid var(--cream);border-radius:50%;transform:translate(-2px,-2px)}
.media .zoom::after{content:"";position:absolute;width:10px;height:3px;background:var(--cream);transform:translate(9px,9px) rotate(45deg)}
.typo{position:absolute;border-radius:4px;background:var(--navy);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:48px 56px;overflow:hidden}
.typo .yr{font-family:var(--serif);font-size:150px;line-height:.95}
.typo .lbl{font-size:24px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-top:18px}
.typo img{position:absolute;right:-60px;bottom:-60px;width:320px;opacity:.08}
.cap{position:absolute;font-size:16px;color:var(--grey);line-height:1.35}
.thumbs{position:absolute;display:flex;gap:12px}
.thumbs button{width:112px;height:63px;border-radius:3px;overflow:hidden;border:3px solid transparent;opacity:.6;position:relative;background:#0c1528}
.thumbs button.on{border-color:var(--red);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .pl::after{content:"";position:absolute;left:44px;top:17px;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.txt{position:absolute;display:flex;flex-direction:column}
.txt .k{font-size:17px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:600}
.txt h3{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.08;margin:10px 0 18px}
.txt p{font-size:21px;line-height:1.5}
.txt p+p{margin-top:14px}
.txt .qr{display:flex;align-items:center;gap:18px;margin-top:22px}
.txt .qr img{width:150px;height:150px}
.txt .qr span{white-space:pre-line;font-size:16px;color:var(--grey);line-height:1.4}
.listen{margin-top:auto;align-self:flex-start;height:60px;padding:0 28px 0 22px;border-radius:30px;background:var(--navy);color:var(--cream);font-size:19px;font-weight:600;display:flex;align-items:center;gap:12px}
.listen i{width:0;height:0;border-left:16px solid var(--cream);border-top:10px solid transparent;border-bottom:10px solid transparent}
.listen.on{background:var(--red)}
.listen.on i{width:14px;height:14px;border:0;background:var(--cream)}
.nav{position:absolute;left:48px;right:48px;bottom:26px;height:72px;display:flex;align-items:center;justify-content:space-between}
.nav .dots{display:flex;gap:12px}
.nav .dots i{width:14px;height:14px;border-radius:50%;background:var(--line)}
.nav .dots i.on{background:var(--red);width:40px;border-radius:7px}
.arrow{width:72px;height:72px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center}
.arrow::before{content:"";width:18px;height:18px;border-right:4px solid var(--cream);border-top:4px solid var(--cream);transform:translateX(-4px) rotate(45deg)}
.arrow.prev::before{transform:translateX(4px) rotate(-135deg)}
.arrow[disabled]{opacity:.18}
.navbtns{display:flex;gap:16px}
.count{font-size:18px;color:var(--grey);min-width:80px}

/* timeline rail */
.rail{position:absolute;left:48px;right:48px;top:104px;height:76px;display:flex}
.rail::before{content:"";position:absolute;left:0;right:0;top:37px;height:3px;background:var(--line)}
.rail button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:28px}
.rail button i{width:20px;height:20px;border-radius:50%;background:var(--cream);border:3px solid var(--grey);position:absolute;top:28px}
.rail button span{position:absolute;top:56px;font-size:17px;font-weight:600;color:var(--grey);white-space:nowrap}
.rail button span.top{top:0}
.rail button.on i{background:var(--red);border-color:var(--red);transform:scale(1.35)}
.rail button.on span{color:var(--red)}

/* map */
.mapbox{position:absolute;left:48px;top:108px;width:760px;height:396px}
.mapbox svg{width:100%;height:100%}
.mapbox .land{fill:#DCD0B8}
.mapbox .hi{fill:#B9C3D6}
.mapbox .pin{fill:var(--navy)}
.mapbox .pin.on{fill:var(--red)}
.mapbox .pulse{fill:none;stroke:var(--red);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.places{position:absolute;left:840px;right:48px;top:108px;display:flex;flex-direction:column;gap:10px}
.places button{height:56px;border-radius:28px;background:var(--paper);border:2px solid var(--line);text-align:left;padding:0 22px;font-size:19px;font-weight:600;display:flex;align-items:center;gap:12px}
.places button i{width:12px;height:12px;border-radius:50%;background:var(--navy)}
.places button.on{background:var(--red);border-color:var(--red);color:var(--cream)}
.places button.on i{background:var(--cream)}
.places button.here{border-color:var(--red)}
.mapdetail{position:absolute;left:48px;top:520px;width:760px;bottom:110px}
.mapdetail .k{font-size:17px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:600}
.mapdetail h3{font-family:var(--serif);font-weight:400;font-size:36px;margin:6px 0 8px}
.mapdetail p{font-size:20px;line-height:1.45}

/* quiz */
#quiz .qwrap{position:absolute;left:120px;right:120px;top:130px;bottom:60px;display:flex;flex-direction:column}
#quiz .prog{font-size:18px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:600}
#quiz h3{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.12;margin:14px 0 34px;min-height:110px}
#quiz .ans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#quiz .ans button{min-height:96px;border-radius:10px;background:var(--paper);border:3px solid var(--line);font-size:24px;font-weight:600;text-align:left;padding:16px 26px;display:flex;align-items:center;gap:18px}
#quiz .ans button b{width:44px;height:44px;flex:none;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:20px}
#quiz .ans button.ok{background:#2F6B4F;border-color:#2F6B4F;color:#fff}
#quiz .ans button.no{background:var(--red);border-color:var(--red);color:#fff}
#quiz .ans button.ok b,#quiz .ans button.no b{background:rgba(255,255,255,.25)}
#quiz .why{margin-top:28px;font-size:22px;line-height:1.45;display:flex;align-items:center;gap:28px;min-height:96px}
#quiz .why p{flex:1}
#quiz .why .next{height:72px;padding:0 34px;border-radius:36px;background:var(--navy);color:var(--cream);font-size:22px;font-weight:600;flex:none}
#quiz .end{text-align:center;margin-top:40px}
#quiz .end .score{font-family:var(--serif);font-size:160px;line-height:1;color:var(--red)}
#quiz .end p{font-size:28px;margin:14px 0 40px}
#quiz .end button{height:72px;padding:0 36px;border-radius:36px;font-size:22px;font-weight:600;margin:0 10px}
#quiz .end .a{background:var(--navy);color:var(--cream)}
#quiz .end .b{border:2px solid var(--navy)}

/* lightbox */
#lb{position:absolute;inset:0;background:rgba(8,14,28,.96);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadein .25s}
#lb img{max-width:1200px;max-height:690px;object-fit:contain}
#lb p{color:#D8CCB4;font-size:18px;margin-top:14px}
#lb .x{position:absolute;right:28px;top:24px;width:64px;height:64px;border-radius:50%;border:2px solid var(--cream)}
#lb .x::before,#lb .x::after{content:"";position:absolute;left:18px;top:29px;width:24px;height:3px;background:var(--cream);transform:rotate(45deg)}
#lb .x::after{transform:rotate(-45deg)}

/* ---------- hunt & extras ---------- */
.typo.q{background:var(--red)}
.typo.q .lbl{color:var(--cream)}
.reveal{align-self:flex-start;margin-top:22px;height:64px;padding:0 30px;border-radius:32px;background:var(--gold);color:var(--navy);font-size:21px;font-weight:600}
.answer{margin-top:20px;display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:16px 18px}
.answer b{flex:none;width:40px;height:40px;border-radius:50%;background:#2F6B4F;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.answer p{font-size:20px;line-height:1.45}
.nav .dots i.done{background:#2F6B4F}
.nav .dots i.on.done{background:var(--red)}
.tile.hunt .t small{color:var(--gold)}
#quiz .ans.three{grid-template-columns:1fr}
#quiz .ans.three button{min-height:76px}
#quiz .end .btns{display:flex;justify-content:center;gap:20px}
#quiz .end .btns button{margin:0}
.stars{display:flex;justify-content:center;gap:18px;margin:26px 0 6px}
.stars i{width:64px;height:64px;background:var(--line);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:var(--gold)}
#quiz .end.diploma{background:var(--paper);border:3px double var(--gold);outline:10px solid var(--paper);border-radius:6px;padding:36px 40px 40px;margin-top:10px}
#quiz .end.diploma .prog{font-size:24px}
#quiz .end .sig{font-size:16px;color:var(--grey);letter-spacing:2px;text-transform:uppercase;margin:-18px 0 28px}

/* ---------- school version ---------- */
#stage[data-aud=kids]{--red:#C8512A;--gold:#F0AE2E;--cream:#FFF6E6;--paper:#FFFBF3;--line:#EBD9BA}
#stage[data-aud=kids] .hdr{border-bottom:6px solid var(--gold)}
#stage[data-aud=kids] .tile{border-radius:22px}
#stage[data-aud=kids] .media,#stage[data-aud=kids] .typo{border-radius:22px}
#stage[data-aud=kids] .txt h3,#stage[data-aud=kids] #quiz h3,#stage[data-aud=kids] .mapdetail h3{font-family:var(--sans);font-weight:600;letter-spacing:-.3px}
#stage[data-aud=kids] .txt h3{font-size:36px}
#stage[data-aud=kids] .txt p{font-size:23px}
#stage[data-aud=kids] #quiz h3{font-size:42px}
#stage[data-aud=kids] #quiz .ans button{border-radius:22px}
#stage[data-aud=kids] #attract .ring{border-color:var(--gold)}
#stage[data-aud=kids] #attract .ring::after{border-color:var(--gold)}
#stage[data-aud=kids] #attract .ring::before{border-left-color:var(--gold)}
#stage[data-aud=kids] #attract .place{color:var(--gold)}

/* ---------- admin ---------- */
.ov{position:absolute;inset:0;z-index:80;background:rgba(8,14,28,.94);display:flex;align-items:center;justify-content:center;animation:fadein .2s}
.pbox{width:420px;text-align:center;color:var(--cream)}
.pmsg{font-size:22px;margin-bottom:22px}
.pdots{display:flex;justify-content:center;gap:18px;margin-bottom:30px}
.pdots i{width:20px;height:20px;border-radius:50%;border:2px solid var(--cream)}
.pdots i.on{background:var(--cream)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.keys button{height:84px;border-radius:42px;background:rgba(244,238,226,.1);color:var(--cream);font-size:32px}
.keys button:active{background:rgba(244,238,226,.3)}
.ov.shake .pbox{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-14px)}40%,80%{transform:translateX(14px)}}
.abox{width:1180px;height:740px;background:#FBF8F1;border-radius:16px;color:#13213F;display:flex;flex-direction:column;overflow:hidden}
.ahead{display:flex;align-items:center;gap:16px;padding:18px 28px;background:#13213F;color:#F4EEE2}
.ahead img{width:46px;height:46px}
.ahead small{display:block;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#C9A45C;font-weight:600}
.ahead b{font-family:var(--serif);font-weight:400;font-size:28px}
.cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:22px 28px;min-height:0;overflow:auto}
.col h4{font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#A3262A;margin:6px 0 10px}
.row{margin-bottom:16px}
.row label{display:block;font-size:16px;color:#5A6272;margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:50px;padding:0 18px;border-radius:25px;border:2px solid #D9CDB6;background:#fff;font-size:17px;font-weight:600}
.seg button.on{background:#13213F;border-color:#13213F;color:#F4EEE2}
.row input{width:100%;height:52px;border-radius:10px;border:2px solid #D9CDB6;padding:0 14px;font:inherit;font-size:17px;color:#13213F;background:#fff;user-select:text;-webkit-user-select:text}
.status{font-size:16px;line-height:1.45;background:#EAE2D2;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.acts button{min-height:50px;padding:0 20px;border-radius:25px;border:2px solid #13213F;font-size:17px;font-weight:600}
.foot{display:flex;justify-content:flex-end;gap:14px;padding:16px 28px;border-top:1px solid #D9CDB6}
.foot button{height:58px;padding:0 34px;border-radius:29px;font-size:19px;font-weight:600}
.foot .ghost{border:2px solid #13213F}
.foot .save{background:#A3262A;color:#fff}

/* install banner */
.installbar{position:absolute;right:40px;top:40px;max-width:470px;z-index:5;display:flex;align-items:center;gap:16px;background:#F4EEE2;color:#13213F;border-radius:20px;padding:10px 12px 10px 10px;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:fadein .5s}
.installbar img{width:48px;height:48px;border-radius:12px}
.installbar b{font-size:18px;white-space:nowrap}
.installbar span{font-size:16px;color:#5A6272}
.installbar .go{height:52px;padding:0 24px;border-radius:26px;background:#A3262A;color:#fff;font-size:18px;font-weight:600}
.installbar .x{width:44px;height:44px;border-radius:22px;font-size:28px;line-height:1;color:#5A6272}
.ov.help{z-index:90}
.hbox{width:560px;background:#FBF8F1;color:#13213F;border-radius:18px;padding:30px 34px;text-align:center}
.hbox img{width:72px;height:72px;border-radius:18px;margin:0 auto 12px}
.hbox b{font-size:26px;display:block;margin-bottom:16px}
.hbox ol{text-align:left;font-size:20px;line-height:1.5;padding-left:26px;margin-bottom:22px}
.hbox li{margin-bottom:8px}
.hbox button{height:56px;padding:0 40px;border-radius:28px;background:#13213F;color:#F4EEE2;font-size:19px;font-weight:600}

/* learn more */
.morebtn{align-self:flex-start;margin-top:18px;height:52px;padding:0 22px 0 8px;border-radius:26px;border:2px solid var(--navy);font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px;background:transparent}
.morebtn i{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--cream);font-style:normal;font-size:24px;line-height:36px;text-align:center}
.mapdetail .morebtn{margin-top:12px}
.ov.more{background:rgba(8,14,28,.75)}
.mbox{position:relative;width:1200px;height:730px;background:var(--cream);border-radius:14px;display:flex;gap:36px;padding:40px 40px 32px;overflow:hidden}
.mleft{width:560px;flex:none;display:flex;flex-direction:column;gap:12px}
.mdoc{position:relative;height:470px;background:#0c1528;border-radius:6px;overflow:hidden}
.mdoc img{width:100%;height:100%;object-fit:cover}
.mdoc img.contain{object-fit:contain}
.mdoc .zoom{position:absolute;right:12px;bottom:12px;width:52px;height:52px;border-radius:50%;background:rgba(12,21,40,.7)}
.mdoc .zoom::before{content:"";position:absolute;left:15px;top:14px;width:18px;height:18px;border:3px solid #F4EEE2;border-radius:50%}
.mdoc .zoom::after{content:"";position:absolute;left:33px;top:33px;width:10px;height:3px;background:#F4EEE2;transform:rotate(45deg)}
.mthumbs{display:flex;gap:10px}
.mthumbs button{width:110px;height:70px;border-radius:4px;overflow:hidden;border:3px solid transparent;opacity:.6}
.mthumbs button.on{border-color:var(--red);opacity:1}
.mthumbs img{width:100%;height:100%;object-fit:cover}
.mcap{font-size:16px;color:var(--grey)}
.mright{flex:1;min-width:0;overflow-y:auto;padding-right:10px;padding-bottom:70px}
.mright .k{font-size:16px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:600}
.mright h3{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.1;margin:8px 0 16px}
.mright p{font-size:20px;line-height:1.55}
.mright p+p{margin-top:12px}
.facts{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:8px}
.facts li{background:var(--paper);border-left:4px solid var(--red);padding:10px 14px;font-size:17px;line-height:1.4}
.mclose{position:absolute;right:28px;bottom:24px;height:54px;padding:0 26px;border-radius:27px;background:var(--navy);color:var(--cream);font-size:18px;font-weight:600}
.ov.more.nodocs .mright{max-width:820px;margin:0 auto}

/* admin logo hit area */
.secret{flex:none;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer}
.secret img{pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;object-fit:contain}
.hdr .secret.logo{width:64px;height:64px;margin:-6px}
#attract .brand .secret{width:72px;height:72px;margin:-4px}