/* Nelly — modern portfolio. Photo-led login, quiet gallery, one warm accent. */
:root{
  --bg:#FAF8F3;
  --bg-2:#F1EDE5;
  --card:#FFFFFF;
  --ink:#1A1815;
  --text:#4F4940;
  --muted:#847C70;
  --line:#E5E0D5;
  --line-2:#CFC7B8;
  --amber:#C8871C;
  --amber-lift:#E8A62F;

  --d:"Outfit","Helvetica Neue",Arial,sans-serif;
  --s:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4.5vw,64px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%;max-width:100%}
body{background:var(--bg);color:var(--text);font-family:var(--s);
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.dot{color:var(--amber)}

.lbl{font-family:var(--s);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.lbl em{font-style:normal;font-weight:400;opacity:.7}

/* ================= login ================= */
.gate{position:fixed;inset:0;z-index:60;overflow:hidden;background:#151310}
.collage{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:3px}
.pane{overflow:hidden;position:relative;background:#1E1A16}
.pane img{width:100%;height:100%;object-fit:cover;
  animation:panIn 1.6s cubic-bezier(.2,.7,.25,1) both}
.pane-1 img{animation-delay:.05s;object-position:50% 45%}
.pane-2 img{animation-delay:.15s;object-position:50% 58%}
.pane-3 img{animation-delay:.25s;object-position:50% 38%}
@keyframes panIn{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}
@media(max-width:860px){
  .collage{grid-template-columns:1fr}
  .pane-1,.pane-3{display:none}
}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,10,8,.46) 0%,rgba(12,10,8,.10) 24%,rgba(12,10,8,.26) 56%,rgba(12,10,8,.84) 100%),
    radial-gradient(ellipse 46% 42% at 50% 46%,rgba(12,10,8,.58),transparent 72%)}

.gate-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:var(--pad);
  animation:riseIn 1s cubic-bezier(.2,.7,.25,1) .35s both}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gate-eyebrow{font-family:var(--s);font-size:11px;font-weight:600;letter-spacing:.2em;
  color:rgba(255,250,240,.7);font-variant-numeric:tabular-nums;margin-bottom:clamp(14px,2vw,22px)}
.wordmark{font-family:var(--d);font-weight:800;
  font-size:clamp(88px,20vw,300px);line-height:.8;letter-spacing:-.045em;
  color:#FCF8F0;margin:0;text-shadow:0 6px 60px rgba(0,0,0,.32)}
.gate-alias{font-family:var(--s);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,250,240,.72);margin:clamp(18px,2.6vw,30px) 0 0}

.gate-form{display:flex;align-items:center;gap:6px;margin-top:clamp(30px,4.5vw,48px);
  background:rgba(255,252,246,.1);border:1px solid rgba(255,252,246,.28);
  backdrop-filter:blur(14px);border-radius:2px;padding:5px 5px 5px 20px;
  width:min(400px,100%)}
.gate-input{flex:1;min-width:0;background:none;border:0;padding:11px 0;
  font-size:15px;color:#FCF8F0;letter-spacing:.02em}
.gate-input::placeholder{color:rgba(255,250,240,.55)}
.gate-input:focus{outline:none}
.gate-go{display:flex;align-items:center;gap:9px;padding:11px 17px;
  font-family:var(--s);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#1A1815;background:#FCF8F0;
  transition:background .22s ease,color .22s ease}
.gate-go svg{width:26px;height:11px;transition:transform .25s ease}
.gate-go:hover{background:var(--amber-lift)}
.gate-go:hover svg{transform:translateX(4px)}
.gate-err{margin:16px 0 0;font-size:13px;color:#F0A08C;font-weight:500}

/* ================= bees ================= */
.swarm{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;color:#2A251D}
.fly{position:absolute;width:42px;height:33px;opacity:.62;will-change:transform}
.fly1{top:22%;animation:drift 74s linear infinite}
.fly2{top:58%;width:31px;height:24px;opacity:.5;animation:driftBack 96s linear infinite -30s}
.fly3{top:81%;width:36px;height:28px;opacity:.42;animation:drift 112s linear infinite -58s}
.fly4{top:38%;width:26px;height:20px;opacity:.4;color:var(--amber);
  animation:driftBack 132s linear infinite -88s}
.fly5{top:69%;width:34px;height:26px;opacity:.34;animation:drift 152s linear infinite -20s}
@keyframes drift{
  0%{transform:translate(-12vw,0) rotate(5deg)}
  30%{transform:translate(26vw,-54px) rotate(-4deg)}
  62%{transform:translate(62vw,32px) rotate(6deg)}
  100%{transform:translate(116vw,-8px) rotate(4deg)}
}
@keyframes driftBack{
  0%{transform:translate(114vw,0) scaleX(-1) rotate(-4deg)}
  38%{transform:translate(66vw,44px) scaleX(-1) rotate(5deg)}
  70%{transform:translate(28vw,-36px) scaleX(-1) rotate(-5deg)}
  100%{transform:translate(-14vw,12px) scaleX(-1) rotate(3deg)}
}
.bee-wings{transform-origin:38px 16px;animation:flap .24s ease-in-out infinite alternate}
@keyframes flap{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}

/* perched bees — deliberate marks, not ambient */
.bee-mark{display:inline-block;color:var(--ink);vertical-align:baseline}
.bee-h{width:clamp(30px,3.4vw,46px);height:auto;margin-left:.28em;
  transform:translateY(-.34em) rotate(-12deg);color:var(--amber);
  animation:perch 6.5s ease-in-out infinite}
@keyframes perch{
  0%,100%{transform:translateY(-.34em) rotate(-12deg)}
  50%{transform:translateY(-.62em) translateX(.12em) rotate(-4deg)}
}
.bee-drop{width:34px;height:26px;color:var(--line-2);margin-bottom:10px;transition:color .25s ease}
.drop:hover .bee-drop,.drop.over .bee-drop{color:var(--amber)}
.drop.over .bee-drop{animation:perch 2.2s ease-in-out infinite}
.bee-empty{width:40px;height:31px;color:var(--line-2);margin-bottom:18px}

/* ================= bar ================= */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px var(--pad);background:rgba(250,248,243,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.bar-name{font-family:var(--d);font-weight:600;font-size:21px;letter-spacing:-.03em;color:var(--ink)}
.bar-add{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-2);padding:8px 15px;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s ease,color .2s ease}
.bar.has-add .bar-add{opacity:1;transform:none;pointer-events:auto}
.bar-add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.lnk{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);padding:5px 0;position:relative;white-space:nowrap}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(1);transform-origin:left;transition:transform .3s ease}
.lnk:hover::after{transform:scaleX(0);transform-origin:right}
.lnk-q{color:var(--muted)}.lnk-q::after{background:var(--line-2)}
.lnk:disabled{color:var(--muted);cursor:default}

.lnk:disabled::after{background:var(--line-2)}

/* ================= intro ================= */
.intro{position:relative;z-index:2;max-width:1440px;margin:0 auto;overflow:visible;
  padding:clamp(52px,9vw,120px) var(--pad) clamp(38px,6vw,72px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:end}
@media(max-width:860px){.intro{grid-template-columns:1fr;gap:26px;align-items:start}}
.intro-h{position:relative;z-index:2;overflow-wrap:break-word;font-family:var(--d);font-weight:600;font-size:clamp(38px,6.6vw,82px);
  line-height:1.02;letter-spacing:-.038em;color:var(--ink);margin:0}
.intro-side{position:relative;z-index:2}
.intro-p{margin:0 0 24px;font-size:16px;max-width:44ch;color:var(--text)}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.act{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;transition:background .22s ease,color .22s ease,border-color .22s ease;
  font-variant-numeric:tabular-nums}
.act-solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.act-solid:hover:not(:disabled){background:var(--amber);border-color:var(--amber);color:#1A1815}
.act-ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent;min-width:15ch}
.act-ghost:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:#fff}
.act:disabled{opacity:.45;cursor:default}
.acts-note{margin:14px 0 0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:520px){.acts{flex-direction:column}.act{width:100%}}

/* ================= gallery ================= */

.gallery{position:relative;z-index:2;max-width:1440px;margin:0 auto;
  padding:0 var(--pad) 40px;display:flex;flex-direction:column;gap:clamp(38px,5.5vw,70px)}
.day{display:grid;grid-template-columns:160px minmax(0,1fr);gap:clamp(20px,3vw,40px);
  align-items:start;padding-top:20px;border-top:1px solid var(--line)}
.day-h{display:flex;flex-direction:column;align-items:flex-start;gap:4px;position:sticky;top:78px}
.day-d{font-family:var(--d);font-weight:500;font-size:clamp(18px,2vw,23px);line-height:1.15;
  letter-spacing:-.022em;color:var(--ink)}
.day-n{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums}
.day-r{display:none}
.day-rows{display:flex;flex-direction:column;gap:10px;min-width:0}
@media(max-width:759px){
  .day{grid-template-columns:1fr;gap:13px}
  .day-h{position:static;flex-direction:row;align-items:baseline;gap:12px}
}

.row{display:flex;gap:10px;max-width:100%}
.cell{position:relative;overflow:hidden;background:var(--bg-2);flex:none;cursor:zoom-in;max-width:100%}
.cell img{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.25,1)}
.cell img.in{opacity:1}
.cell:hover img{transform:scale(1.035)}
.cell::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(26,24,21,.08)}
.cell.hidden-photo::after{box-shadow:inset 0 0 0 2px var(--amber)}
.cell.hidden-photo img{opacity:.32}
.who{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FBF7F0;
  opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease;
  background:linear-gradient(180deg,rgba(16,14,11,0),rgba(16,14,11,.72))}
.cell:hover .who{opacity:1;transform:none}
.admin-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.cell:hover .admin-tools{opacity:1}
.admin-tools button{background:rgba(255,255,255,.95);border:1px solid var(--line-2);
  padding:4px 9px;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.admin-tools button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ================= empty / footer ================= */
.empty{padding:96px 24px;text-align:center}
.empty p{margin:0;font-family:var(--d);font-weight:400;font-size:20px;color:var(--muted)}
.foot{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:13px;
  padding:50px var(--pad) 76px;border-top:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.foot-bee{width:28px;height:22px;color:var(--line-2)}
.foot-dates{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(max-width:640px){.foot{flex-wrap:wrap;gap:10px}.foot-dates{margin-left:0;width:100%}}

/* ================= panel ================= */
.panel{position:fixed;inset:0;z-index:70;background:rgba(26,24,21,.44);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){.panel{align-items:center;padding:28px}}
.panel-in{background:var(--card);width:min(520px,100%);max-height:92svh;overflow-y:auto;
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:20px;
  box-shadow:0 24px 70px rgba(26,24,21,.22)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline}
.panel-t{font-family:var(--d);font-weight:600;font-size:24px;letter-spacing:-.03em;
  color:var(--ink);margin:0}
.panel-x{font-size:24px;color:var(--muted);line-height:1;padding:0 4px}
.panel-x:hover{color:var(--ink)}
.drop{border:1px dashed var(--line-2);padding:44px 20px;display:flex;flex-direction:column;
  align-items:center;gap:6px;cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--bg)}
.drop-t{font-family:var(--d);font-size:17px;font-weight:400;color:var(--ink)}
.drop-s{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:8px}
.in-line{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:9px 0;
  font-size:15.5px;color:var(--ink);width:100%;border-radius:0}
.in-line::placeholder{color:#A79E90}
.in-line:focus{outline:none;border-bottom-color:var(--ink)}
.btn{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:15px 20px;width:100%;transition:background .2s ease}
.btn:hover:not(:disabled){background:var(--amber)}
.btn:disabled{opacity:.28;cursor:default}
.queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  max-height:230px;overflow-y:auto}
.qi{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--text)}
.qi img{width:40px;height:40px;object-fit:cover;flex:none;background:var(--bg-2)}
.qi-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qi-s{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;flex:none;color:var(--muted)}
.qi-s.done{color:#5B7A4E}
.qi-s.err{color:#9A4A34}

/* ================= lightbox ================= */
.lb{position:fixed;inset:0;z-index:90;background:rgba(18,16,13,.97);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
.lb img{max-width:100%;max-height:84svh;object-fit:contain}
.lb-meta{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,30px);
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;
  padding:0 clamp(16px,4vw,60px);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#B0A796}
.lb-dl{display:inline-flex;align-items:center;gap:8px;color:#E6DDCB;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(230,221,203,.34);padding:8px 14px;transition:background .2s,color .2s,border-color .2s}
.lb-dl svg{width:14px;height:14px}
.lb-dl:hover{background:#F5F0E6;color:#1A1815;border-color:#F5F0E6}
.lb-x{position:absolute;right:clamp(16px,4vw,44px);top:clamp(16px,3vw,30px);
  font-size:24px;color:#B0A796;line-height:1;padding:4px 8px}
.lb-x:hover{color:#FAF8F3}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:92px;
  color:#7E7668;font-size:28px;display:flex;align-items:center;justify-content:center}
.lb-nav:hover{color:#FAF8F3}
.lb-prev{left:4px}.lb-next{right:4px}

/* ---------- touch devices ---------- */
@media(hover:none){
  /* there is no hover on a phone — these have to be visible or they do not exist */
  .who{opacity:1;transform:none}
  /* admin controls sit bottom-right on touch so they never cover her face */
  .admin-tools{opacity:1;top:auto;bottom:8px;right:8px;gap:5px}
  .admin-tools button{padding:5px 8px;font-size:8.5px;letter-spacing:.06em}
  .cell:hover img{transform:none}
  .lb-nav{width:64px;height:120px;background:rgba(18,16,13,.45);font-size:32px}
  .lb-x{font-size:30px;padding:8px 12px}
  .lb-dl{padding:11px 18px}
}
@media(max-width:620px){
  .bar-name{font-size:19px}
  .bar-add{font-size:10px;padding:7px 12px;letter-spacing:.1em}
  .swarm .fly4,.swarm .fly5{display:none}   /* fewer moving parts on small screens */
  .fly{opacity:.42}
  .intro{padding-top:clamp(34px,8vw,60px)}
  .bar{gap:14px;padding-left:18px;padding-right:18px}
  .lb-meta{gap:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  .fly,.bee-wings,.bee-h{animation:none!important}
  .bee-h{transform:translateY(-.34em) rotate(-12deg)}
  .fly4{transform:translate(30vw,0) scaleX(-1)}.fly5{transform:translate(88vw,0)}
  .pane img,.gate-in{animation:none!important;opacity:1;transform:none}
  .fly1{transform:translate(16vw,0)}.fly2{transform:translate(64vw,0) scaleX(-1)}
  .fly3{transform:translate(40vw,0)}
}