/* Small custom layer on top of Tailwind */
html { scroll-behavior: smooth; }
.navlink { position: relative; padding-bottom: 2px; }
.navlink::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:#2F4BD8; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.navlink:hover::after, .navlink.is-current::after { transform:scaleX(1); }
.index-row { transition: padding-left .25s ease, color .25s ease; }
.index-row:hover { padding-left: .75rem; color:#2F4BD8; }

/* Placeholder tones: soft, quiet fills. Delete once real images are in. */
.tone-1 { background:#E8E8E3; } .tone-2 { background:#DADDE6; } .tone-3 { background:#EFEEE9; }
.tone-4 { background:#D3D7E3; } .tone-5 { background:#E4E5E8; }

.work { cursor: zoom-in; }
.work .media { transition: opacity .2s ease; }
.work:hover .media { opacity:.88; }
:focus-visible { outline:2px solid #2F4BD8; outline-offset:3px; }

/* Lightbox */
.lb { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:rgba(251,251,249,.97); padding:4rem 1.5rem 2rem; cursor:zoom-out; }
.lb .lb-media { max-height:78vh; max-width:min(90vw,900px); width:auto; height:auto; }
.lb div.lb-media { height:78vh; aspect-ratio:4/5; }
.lb-cap { margin-top:1rem; text-align:center; font-size:.95rem; }
.lb-cap span { display:block; color:#80858E; }
.lb-close { position:absolute; top:1.25rem; right:1.5rem; font-size:.95rem; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* Owner editing */
.work { position: relative; }
.admin-btn { position:absolute; top:.5rem; right:.5rem; z-index:5; background:#FBFBF9; border:1px solid #23262B; padding:.25rem .75rem; font-size:.85rem; cursor:pointer; }
.admin-btn:hover { background:#23262B; color:#FBFBF9; }
.ed { border:1px solid #E3E3DE; background:#FBFBF9; color:#23262B; padding:2rem; width:min(92vw,28rem); margin:auto; }
.ed::backdrop { background:rgba(35,38,43,.35); }
.ed label { display:block; margin-top:1.25rem; font-size:.9rem; color:#80858E; }
.ed input { display:block; width:100%; margin-top:.25rem; padding:.5rem 0; border:0; border-bottom:1px solid #23262B; background:transparent; color:#23262B; font-size:1rem; }
.ed input[type=file] { border:0; padding:.5rem 0; font-size:.9rem; }
.ed-msg { margin-top:.75rem; font-size:.9rem; color:#2F4BD8; min-height:1.2em; }
.ed-row { display:flex; justify-content:flex-end; gap:1rem; margin-top:2rem; }
.btn { background:#23262B; color:#FBFBF9; padding:.5rem 1.25rem; }
.btn:hover { background:#2F4BD8; }
.btn-ghost { padding:.5rem 1rem; color:#80858E; }