/* ============================================================================================
   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}


/* ---- growing what is already there -------------------------------------------------------
   These sit INSIDE the content, under the last point or the last paragraph, because that is
   where the thing they add will appear. They only exist while he is editing.              */
.djgrow{list-style:none;margin:10px 0 0;padding:0}
li.djgrow::marker{content:''}
.djgrowb{appearance:none;background:rgba(240,180,92,.07);color:var(--gold-hi);
  border:1px dashed rgba(240,180,92,.45);border-radius:9px;cursor:pointer;
  font-family:var(--body);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;transition:background .18s,border-color .18s}
.djgrowb:hover{background:rgba(240,180,92,.18);border-color:var(--gold);border-style:solid}

/* a joined section is a continuation, so its controls sit tighter to it */

@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}
/* two of them now, side by side: add it HERE, or start a NEW SECTION. Harry's design -
   the old single button hid the choice inside a menu that could only half honour it. */
.djplusrow{display:flex;gap:10px;max-width:1200px;margin:0 auto}
.djplusb{display:block;flex:1 1 0;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}
/* ⚠️ The menu opens ABOVE the bar when there is not room below it. The code has been adding
   this class since the day it was written and there was never a rule for it, so a tall menu
   simply ran off the bottom of the window with the last choice unreachable. */
.djplus.up .djpickadd{top:auto;bottom:calc(100% + 8px)}
/* and whatever happens it stays inside the window */
.djpickadd{max-height:calc(100vh - 110px);overflow:auto}
.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}
  .djplusrow{flex-direction:column;gap:6px}
  .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)}

/* ---------- editing is a different job from reading -----------------------------------------
   A band carries 150px of padding top and bottom, which is right for somebody reading the page
   and wrong for somebody building it: the section he just added landed 300px of empty space
   from where he clicked, so it read as "far below" when it was in fact next. Pulled in while
   editing only - a visitor's page is not touched by any of this. */
body.djediting .band,
body.djediting .band--ink2,
body.djediting section.callout{padding-top:54px;padding-bottom:54px}
body.djediting .djblock{padding-top:46px}
/* ...but a JOINED section is a continuation of the band above, so it takes no gap at all.
   ⚠️ This has to come AFTER the two rules above, which have the same specificity: it sat
   before them and lost by source order, leaving a 46px gap that made "add it here" look
   like it had started a new section after all. */
body.djediting .band--joined,
body.djediting .band--joined.djblock{padding-top:0}

/* ---- moving the picture at the top --------------------------------------------------------
   The bar sits ON the picture it moves, because that is the thing being moved. */
.djmove{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;
  background:rgba(16,11,12,.92);border:1px solid rgba(240,180,92,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.55)}
.djmoveb,.djmovemid{appearance:none;cursor:pointer;border-radius:9px;font-family:var(--body);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 13px;
  border:1px solid rgba(240,180,92,.5);background:rgba(240,180,92,.12);color:var(--gold-hi)}
.djmoveb:hover,.djmovemid:hover{background:rgba(240,180,92,.26);border-color:var(--gold)}
.djmovesay{color:#e8dccb;font-family:var(--body);font-size:.76rem;white-space:nowrap}
.djgrab{cursor:grab}
body.djmoving .djgrab{outline:3px solid var(--gold);outline-offset:-3px}
body.djmoving .djgrab:active{cursor:grabbing}
/* while he is dragging the picture, nothing underneath should take the drag instead */
body.djmoving .phero *{user-select:none}
/* and nothing laid over the photograph may eat the drag */
body.djmoving .hero-veil,body.djmoving .phero-in{pointer-events:none}
body.djmoving .djmove{pointer-events:auto}

/* which section a + belongs to, while the mouse is on it */
body.djediting .djowner{outline:2px solid rgba(240,180,92,.55);outline-offset:-3px}

/* ---------- the add menu, in two halves ----------------------------------------------------
   Harry: "when clicking add something it should say DIRECTLY HERE or a NEW SECTION". The top
   half only shows what THIS section can really take - a paragraph into words, a picture into
   pictures - because offering it where it cannot go is another button that does the wrong
   thing. */
.djpickadd{min-width:320px}
.djaddlead{color:var(--muted);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  margin:8px 2px 5px;font-family:var(--body);font-weight:700}
.djaddlead:first-child{margin-top:2px}
.djinside{border-color:rgba(240,180,92,.5);background:rgba(240,180,92,.1);color:var(--gold-hi)}
.djinside:hover{background:rgba(240,180,92,.2)}

/* ---------- the grid picker, drawn the way Word draws it ------------------------------------
   "dump the 4 choice and change that to a grid choice sort of like Word does - this way if
   they just want 3 in a row, it just adds that." */
.djgridpick{padding:9px 10px 7px;border:1px solid var(--line);border-radius:10px;
  background:rgba(246,241,236,.04);margin-top:2px}
.djgridlabel{display:block;color:var(--paper);font-family:var(--body);font-size:.84rem;
  margin-bottom:7px}
.djgridcells{display:grid;grid-template-columns:repeat(4,22px);gap:4px;margin-bottom:6px}
/* a row of 8 for "how many points", the same gesture as the grid he liked.
   ⚠️ AFTER the rule above, not before it: same specificity, so source order decides, and
   sitting earlier in the file it lost and drew the points as a 4-wide block. */
.djpointcells{grid-template-columns:repeat(8,22px)}
.djgcell{appearance:none;width:22px;height:18px;padding:0;border-radius:3px;cursor:pointer;
  border:1px solid rgba(246,241,236,.28);background:rgba(246,241,236,.05);transition:none}
.djgcell.on{background:var(--gold);border-color:var(--gold-hi)}
.djgridsay{display:block;color:var(--muted);font-family:var(--body);font-size:.76rem;
  min-height:1.2em}

/* ---------- seeing a picture full size, for visitors as well as for Danny -------------------
   Harry's call: anyone browsing can click a photograph in a group and see it properly. */
.shots figure{cursor:zoom-in}