/* ============================================================================================
   The editor Danny sees. Loaded on every page but only used when the address ends ?edit=1 and
   he is signed in, so none of it touches a visitor's page.

   Deliberately plain. He is not a web person: a bar along the bottom, the words he can change
   faintly outlined, the ones he HAS changed clearly marked, and one Save button.
============================================================================================ */

/* ---------- the sign-in and page-list screen ------------------------------------------- */
.adminpage{background:var(--ink);min-height:100vh}
.adminwrap{max-width:720px;margin:0 auto;padding:56px 24px 90px}
.adminlogo{height:58px;width:auto;margin-bottom:38px}
.adminpage h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:0 0 10px}
.adminlede{color:var(--muted);font-size:1.05rem;line-height:1.7;margin:0 0 28px;max-width:60ch}
.adminwarn{margin:0 0 22px;padding:14px 18px;border-radius:12px;color:#FFD9D6;
  border:1px solid rgba(224,87,79,.5);background:rgba(224,87,79,.12);font-size:.95rem}
.adminform{display:grid;gap:12px;max-width:340px}
.adminform label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.adminform input{padding:14px 16px;border-radius:12px;background:rgba(246,241,236,.05);
  border:1px solid var(--line);color:var(--paper);font:inherit;font-size:1rem}
.adminform input:focus{outline:none;border-color:var(--gold);background:rgba(246,241,236,.08)}
.adminform button{margin-top:6px;justify-content:center}
.adminbar{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 34px}
.admingroup{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:34px 0 12px}
.adminlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adminlist a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 18px;border-radius:11px;background:rgba(246,241,236,.025);
  border:1px solid transparent;transition:background .2s,border-color .2s}
.adminlist a:hover{background:rgba(240,180,92,.08);border-color:rgba(240,180,92,.25)}
.adminlist b{color:var(--paper);font-size:1.02rem}
.adminlist span{color:var(--muted);font-size:.82rem}

/* ---------- editing a page -------------------------------------------------------------- */
body.djediting{padding-bottom:78px}

/* every changeable thing, marked faintly so the page still reads like the page */
body.djediting [data-e]{outline:1px dashed rgba(240,180,92,.34);outline-offset:4px;
  border-radius:3px;cursor:text;transition:outline-color .2s,background .2s}
body.djediting [data-e]:hover{outline-color:rgba(240,180,92,.75)}
body.djediting [data-e]:focus{outline:2px solid var(--gold);outline-offset:4px;
  background:rgba(240,180,92,.08)}
/* one he has actually changed */
body.djediting [data-e].djchanged{outline:2px solid #5BD08A;outline-offset:4px;
  background:rgba(91,208,138,.1)}

/* ⚠️ The three big headings that sit over a video or photograph are painted with a
   GRADIENT CLIPPED TO THE LETTERS, so their own colour is transparent and the words you read
   are really the background showing through the type. Tinting the background on focus wipes
   that gradient out, and the heading disappears the instant he clicks it - which is exactly
   what he hit. Those ones get a plain colour back instead of a tint. */
body.djediting :is(.phero h1,.vmid h2,.hero-mid h1)[data-e]:focus,
body.djediting :is(.phero h1,.vmid h2,.hero-mid h1)[data-e].djchanged{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#FFF3E0;text-shadow:0 4px 26px rgba(0,0,0,.85)}

.djbar{position:fixed;left:0;right:0;bottom:0;z-index:999;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;padding:12px 18px;background:rgba(10,7,8,.97);
  backdrop-filter:blur(14px);border-top:1px solid rgba(240,180,92,.3);
  font-family:var(--body);box-shadow:0 -8px 30px rgba(0,0,0,.5)}
.djbrand{font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-hi)}
.djcount{color:var(--muted);font-size:.86rem}
.djmsg{color:#9FE0B8;font-size:.9rem;margin-left:auto}
.djmsg.djbad{color:#FF9A92}
.djbtn{appearance:none;border:1px solid var(--line);background:rgba(246,241,236,.06);
  color:var(--paper);font:inherit;font-size:.82rem;letter-spacing:.08em;padding:11px 18px;
  border-radius:999px;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s,color .2s,opacity .2s}
.djbtn:hover{background:rgba(246,241,236,.12);border-color:var(--gold)}
.djmsg + .djbtn{margin-left:0}
.djsave{background:var(--gold);border-color:var(--gold);color:#140C04;font-weight:700}
.djsave:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.djsave:disabled{opacity:.4;cursor:default;background:rgba(246,241,236,.06);
  border-color:var(--line);color:var(--muted)}
body.djdirty .djexit{opacity:.5}

.djseopanel{position:fixed;right:18px;bottom:78px;z-index:1000;width:min(420px,calc(100vw - 36px));
  padding:22px 24px;border-radius:16px;background:rgba(16,11,12,.98);
  border:1px solid rgba(240,180,92,.3);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.djseopanel h3{font-family:var(--head);font-weight:400;font-size:1.5rem;color:var(--gold-hi);
  margin:0 0 8px}
.djseopanel p{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0 0 16px}
.djseopanel label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.djseopanel label small{text-transform:none;letter-spacing:0;opacity:.7;margin-left:8px}
.djseopanel input,.djseopanel textarea{display:block;width:100%;margin-top:7px;padding:11px 13px;
  border-radius:10px;background:rgba(246,241,236,.05);border:1px solid var(--line);
  color:var(--paper);font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none}
.djseopanel input:focus,.djseopanel textarea:focus{outline:none;border-color:var(--gold)}
.djseoclose{margin:4px 0 0;text-align:right}

@media (max-width:760px){
  .djbar{gap:9px;padding:10px 12px}
  .djcount{display:none}
  .djmsg{order:9;width:100%;margin:0;text-align:center}
  .djbtn{flex:1;text-align:center;padding:12px 10px}
}

/* ---------- swapping a picture ----------------------------------------------------------- */
body.djediting [data-i]{outline:1px dashed rgba(240,180,92,.34);outline-offset:-3px}
body.djediting [data-i].djpicchanged{outline:3px solid #5BD08A;outline-offset:-3px}
.djpicbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  appearance:none;border:1px solid rgba(240,180,92,.6);background:rgba(10,7,8,.86);
  color:var(--gold-hi);font:inherit;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;
  opacity:0;transition:opacity .2s,background .2s}
body.djediting [data-i]:hover + .djpicbtn,
body.djediting .djpicbtn:hover,
body.djediting .djpicbtn:focus-visible{opacity:1}
.djpicbtn:hover{background:rgba(10,7,8,.96);border-color:var(--gold)}
/* on a touch screen there is no hover, so it is always there */
@media (hover:none){ body.djediting .djpicbtn{opacity:1} }

.djpicpanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1001;
  width:min(680px,calc(100vw - 32px));max-height:min(78vh,760px);overflow:auto;
  padding:26px 28px;border-radius:18px;background:rgba(16,11,12,.99);
  border:1px solid rgba(240,180,92,.32);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.djpicpanel h3{font-family:var(--head);font-weight:400;font-size:1.7rem;color:var(--gold-hi);
  margin:0 0 16px}
.djpicup{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.djpicpick{cursor:pointer}
.djpicmsg{color:var(--muted);font-size:.9rem}
.djpiclead{color:var(--muted);font-size:.88rem;margin:0 0 12px}
.djpicgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;
  color:var(--muted);font-size:.9rem}
.djpicthumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;
  background:none;cursor:pointer;aspect-ratio:4/3;transition:border-color .2s,transform .2s}
.djpicthumb img{width:100%;height:100%;object-fit:cover;display:block}
.djpicthumb:hover{border-color:var(--gold);transform:translateY(-2px)}
.djpicclose{margin:20px 0 0;text-align:right}

/* ---------- the sign-in door: show me what I am typing ----------------------------------- */
.adminwrap--door{max-width:460px;padding-top:72px}
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:52px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);appearance:none;
  border:0;background:none;color:var(--muted);padding:9px;cursor:pointer;line-height:0;
  border-radius:10px;transition:color .2s,background .2s}
.pweye:hover{color:var(--gold-hi);background:rgba(240,180,92,.1)}
.pweye.shown{color:var(--gold)}
/* the stroke through the eye only shows while the password is HIDDEN */
.pweye.shown .eyeslash{display:none}

/* ---------- going to another page, without dropping out of editing ----------------------- */
.djpages{display:inline-flex;align-items:center;gap:8px}
.djpagename{color:var(--gold-hi);max-width:22ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.djhelp{font-weight:700;padding:11px 15px}
.djpagepanel{position:fixed;left:18px;bottom:78px;z-index:1000;
  width:min(380px,calc(100vw - 36px));max-height:min(70vh,620px);overflow:auto;
  padding:22px 24px;border-radius:16px;background:rgba(16,11,12,.99);
  border:1px solid rgba(240,180,92,.3);box-shadow:0 20px 50px rgba(0,0,0,.65)}
.djpagepanel h3{font-family:var(--head);font-weight:400;font-size:1.5rem;color:var(--gold-hi);
  margin:0 0 14px}
.djpagepanel h4{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:18px 0 7px}
.djpagepanel ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.djpagepanel a{display:block;padding:9px 12px;border-radius:9px;color:var(--paper);
  font-size:.94rem;text-decoration:none;transition:background .2s}
.djpagepanel a:hover{background:rgba(240,180,92,.1)}
.djpagepanel a.here{color:var(--gold-hi);background:rgba(240,180,92,.07)}
.djpagepanel a.here::after{content:' (you are here)';color:var(--muted);font-size:.78rem}

/* ---------- what all this does, in his words --------------------------------------------- */
.djhelppanel{position:fixed;left:18px;bottom:78px;z-index:1002;
  width:min(440px,calc(100vw - 36px));max-height:min(74vh,680px);overflow:auto;
  padding:24px 26px;border-radius:16px;background:rgba(16,11,12,.99);
  border:1px solid rgba(240,180,92,.3);box-shadow:0 20px 50px rgba(0,0,0,.65)}
.djhelppanel h3{font-family:var(--head);font-weight:400;font-size:1.6rem;color:var(--gold-hi);
  margin:0 0 6px}
.djhelppanel h4{font-family:var(--body);font-weight:700;font-size:1rem;color:var(--paper);
  margin:18px 0 4px}
.djhelppanel p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}

@media (max-width:760px){
  .djpagepanel,.djhelppanel{left:12px;right:12px;width:auto;bottom:88px}
}

/* ---------- the styling toolbar ----------------------------------------------------------
   It sits over the field he is working in, not over his selection: anchored to the selection
   it jumped on every character and every drag of the mouse. */
.djpop{position:absolute;left:0;top:0;z-index:1003;display:none;align-items:center;gap:7px;
  padding:8px 10px;border-radius:12px;background:rgba(10,7,8,.98);
  border:1px solid rgba(240,180,92,.42);box-shadow:0 14px 36px rgba(0,0,0,.65);
  font-family:var(--body)}
.djpop.on{display:flex}
.djpop button{appearance:none;border:1px solid transparent;background:rgba(246,241,236,.07);
  color:var(--paper);font:inherit;font-size:.9rem;min-width:34px;height:32px;padding:0 9px;
  border-radius:8px;cursor:pointer;line-height:1;
  transition:background .18s,border-color .18s,color .18s}
.djpop button:hover{background:rgba(240,180,92,.18);border-color:var(--gold)}
.djpop button.on{background:var(--gold);border-color:var(--gold);color:#140C04}
.djpop .djsw{min-width:24px;width:24px;height:24px;padding:0;border-radius:50%;
  border:1px solid rgba(246,241,236,.35)}
.djpop .djsw:hover{transform:scale(1.14);border-color:#fff}
.djpop .djsep{width:1px;height:22px;background:var(--line)}
.djpop .djfont{height:32px;padding:0 8px;border-radius:8px;background:rgba(246,241,236,.07);
  border:1px solid transparent;color:var(--paper);font:inherit;font-size:.86rem;cursor:pointer}
.djpop .djfont:hover{border-color:var(--gold)}
.djpop .djfont option{background:#140F11;color:var(--paper)}

@media (max-width:760px){
  .djpop{flex-wrap:wrap;max-width:calc(100vw - 24px)}
}

/* the X on the picture panel: a second way out, top right, as well as Done at the foot */
.djx{position:absolute;top:12px;right:14px;appearance:none;border:0;background:none;
  color:#fff;font:700 30px/1 var(--body);padding:4px 10px;border-radius:9px;cursor:pointer;
  opacity:.85;transition:opacity .18s,background .18s}
.djx:hover{opacity:1;background:rgba(246,241,236,.12)}

/* the way out of the sign-in page - it is where Log out lands him too */
.adminback{margin:22px 0 0;max-width:340px}
.adminback .btn{display:flex;justify-content:center;width:100%}

/* ---------- the dashboard ----------------------------------------------------------------
   Server-rendered, ordinary forms, no JavaScript needed to use any of it - one less thing
   that can go wrong on his phone. */
.dash{max-width:760px}
.dashtop{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.dashtop .btn{flex:1 1 auto;justify-content:center;text-align:center}
.adminsaid{margin:0 0 22px;padding:14px 18px;border-radius:12px;color:#CFF3DE;
  border:1px solid rgba(91,208,138,.5);background:rgba(91,208,138,.12);font-size:.95rem}
.dashhead{font-family:var(--head);font-weight:400;font-size:1.9rem;color:var(--gold-hi);
  margin:46px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.dashnote{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0 0 18px}
.dashhint{color:var(--muted);font-size:.84rem;line-height:1.6;margin:-4px 0 10px}
.dashhint b{color:var(--gold-hi)}
.dashform{max-width:420px}
.dashform label{margin-top:6px}

.dashlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dashlist li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:13px 16px;border-radius:11px;background:rgba(246,241,236,.025)}
.dashwhat{display:flex;flex-direction:column;gap:2px}
.dashwhat b{color:var(--paper);font-size:1rem;font-weight:700}
.dashwhat em{color:var(--muted);font-size:.84rem;font-style:normal}
.dashinline{margin:0}
.btn-small{padding:9px 16px;font-size:.72rem}

.dashpages{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dashpages a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 17px;border-radius:11px;background:rgba(246,241,236,.025);
  border:1px solid transparent;text-decoration:none;
  transition:background .2s,border-color .2s}
.dashpages a:hover{background:rgba(240,180,92,.08);border-color:rgba(240,180,92,.25)}
.dashpages b{color:var(--paper);font-size:1rem;font-weight:400}
.dashpages span{color:var(--muted);font-size:.82rem;white-space:nowrap}

@media (max-width:620px){
  .dashlist li{flex-direction:column;align-items:stretch}
  .dashinline .btn{width:100%;justify-content:center}
}

/* ---------- adding, moving and deleting whole sections ------------------------------------

   ⚠️ ALWAYS VISIBLE, and OVER THE CONTENT. The first version hid all of this behind hover and
   pinned it to the corner of the band. Harry's report: "moving mouse all over pages, only once
   did a small pill show... it was far right at top of screen so very difficult to use... almost
   impossible to find the edit section between or anywhere near any boxes of text or images."

   He was right. A band is 1400px wide and its words are a 1200px column in the middle, so the
   corner of the band is 100px outside anything he is looking at, and a zero-height hover strip
   between sections is a target nobody can hit. This is an EDIT mode - the page is already
   covered in dotted outlines - so the controls are simply there, in the middle, where his eye
   already is.
------------------------------------------------------------------------------------------- */
body.djediting .djblock{position:relative;padding-top:46px}
body.djediting .djblock:hover{outline:1px dashed rgba(240,180,92,.22);outline-offset:-2px}

/* the section's own controls: centred over its content, always there */
.djstrip{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:999px;
  background:rgba(10,7,8,.94);border:1px solid rgba(240,180,92,.4);
  box-shadow:0 6px 20px rgba(0,0,0,.5);font-family:var(--body);white-space:nowrap}
.djwhat{color:var(--gold-hi);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:0 8px 0 6px;font-weight:700}
.djsb{appearance:none;border:1px solid transparent;background:rgba(246,241,236,.09);
  color:var(--paper);font:inherit;font-size:.72rem;height:28px;padding:0 11px;
  border-radius:7px;cursor:pointer;line-height:1}
.djsb:hover:not(:disabled){background:rgba(240,180,92,.24);border-color:var(--gold)}
/* ⚠️ a disabled button is DIMMED, never hidden: Harry read a missing Up as a broken Up */
.djsb:disabled{opacity:.32;cursor:not-allowed}
.djsdel{color:#FF9A92}
.djsdel:hover{background:rgba(224,87,79,.24);border-color:#E0574F}

/* where the last thing happened, so a move does not leave him hunting */
@keyframes djflash{from{box-shadow:inset 0 0 0 3px var(--gold)}
                   to{box-shadow:inset 0 0 0 3px transparent}}
.djjustdid{animation:djflash 2.4s ease-out}

/* the bar between sections: a real bar, full width, impossible to walk past */
/* room to breathe, so the bar reads as BETWEEN two sections rather than stuck to the one
   above it - it was landing a pixel under the last paragraph's outline */
.djplus{position:relative;z-index:5;text-align:center;padding:0 18px;margin:30px 0 14px}
.djplusb{display:block;width:100%;max-width:1200px;margin:0 auto;appearance:none;
  border:2px dashed rgba(240,180,92,.45);background:rgba(240,180,92,.05);
  color:var(--gold-hi);font-family:var(--body);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 16px;border-radius:12px;cursor:pointer;
  transition:background .18s,border-color .18s}
.djplusb:hover,.djplus.on .djplusb{background:rgba(240,180,92,.16);
  border-color:var(--gold);border-style:solid}

.djpickadd{display:none;position:absolute;left:50%;transform:translateX(-50%);top:58px;
  z-index:1004;flex-direction:column;gap:5px;padding:12px;border-radius:14px;
  background:rgba(16,11,12,.99);border:1px solid rgba(240,180,92,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.7);min-width:280px;text-align:left}
/* ⚠️ Raise the whole + row while its menu is open. The menu itself is z-index 1004, but it
   sits inside a row at z-index 5, and the NEXT section's controls are at 6 in a later
   element - so they painted straight over the open menu. A child cannot escape its parent's
   place in the stack. */
.djplus.on{z-index:1005}
.djplus.on .djpickadd{display:flex}
.djaddlead{color:var(--muted);font-size:.84rem;margin:0 2px 6px;font-family:var(--body)}
.djpickadd .djbtn{text-align:left;justify-content:flex-start;width:100%}

/* while a section change is being made, nothing should look clickable */
body.djbusy{cursor:progress}
body.djbusy .djstrip,body.djbusy .djplus{opacity:.35;pointer-events:none}

@media (max-width:760px){
  .djstrip{gap:4px;padding:4px 5px}
  .djwhat{display:none}
  .djsb{font-size:.68rem;padding:0 9px}
  .djplusb{font-size:.68rem;padding:11px 10px}
  .djpickadd{min-width:0;width:calc(100vw - 44px)}
}

/* choosing the picture for a new page */
.pickpic{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:9px;
  max-height:330px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:10px}
.pickpic label{display:block;cursor:pointer;position:relative}
.pickpic input{position:absolute;opacity:0;pointer-events:none}
.pickpic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;
  border:3px solid transparent;transition:border-color .15s,transform .15s}
.pickpic label:hover img{transform:translateY(-2px)}
.pickpic input:checked + img{border-color:var(--accent)}
.pickpic input:focus-visible + img{outline:2px solid var(--accent2);outline-offset:2px}

/* ---------- the picture grid ---------------------------------------------------------------
   Harry: "it would be good to be able to see that grid and then in turn the empty spaces where
   there are no images... click inside the empty grid section and have ability to add an image
   there." The grid is repeat(auto-fit, minmax(260px,1fr)), so how many cells sit empty on the
   last row depends on the window - the editor counts the resolved columns rather than guess. */
body.djediting .shots figure{position:relative;outline:2px dashed rgba(240,180,92,.45);
  outline-offset:-2px}
body.djediting .shots figure:hover{outline-color:var(--gold)}

.djcell{appearance:none;aspect-ratio:4/3;border:2px dashed rgba(240,180,92,.4);border-radius:14px;
  background:rgba(240,180,92,.05);color:var(--gold-hi);font-family:var(--body);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  transition:background .18s,border-color .18s}
.djcell span{font-size:1.9rem;line-height:1;font-weight:300}
.djcell:hover{background:rgba(240,180,92,.15);border-color:var(--gold);border-style:solid}

/* see it bigger, and take it out */
.djlook,.djunpic{position:absolute;z-index:4;appearance:none;border:1px solid rgba(240,180,92,.5);
  background:rgba(10,7,8,.9);color:var(--gold-hi);font-family:var(--body);font-size:.7rem;
  padding:6px 10px;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .18s}
.djlook{top:8px;right:8px;font-size:.9rem;padding:5px 9px}
.djunpic{bottom:8px;right:8px;color:#FF9A92;border-color:rgba(224,87,79,.5)}
body.djediting .shots figure:hover .djlook,
body.djediting .shots figure:hover .djunpic,
.djlook:focus-visible,.djunpic:focus-visible{opacity:1}
.djlook:hover{background:rgba(240,180,92,.25)}
.djunpic:hover{background:rgba(224,87,79,.3)}

.djbig{position:fixed;inset:0;z-index:2000;background:rgba(6,4,5,.94);display:flex;
  align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.djbig img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.8)}
.djbigx{position:fixed;top:18px;right:22px;appearance:none;border:0;background:none;color:#fff;
  font:700 42px/1 var(--body);cursor:pointer;padding:6px 14px;border-radius:10px;opacity:.9}
.djbigx:hover{opacity:1;background:rgba(246,241,236,.14)}