@font-face {
font-family: "Archivo";
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62% 125%;
src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}
@font-face {
font-family: "Caveat";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("/fonts/caveat-latin-600-normal.woff2") format("woff2");
}
/* shape rule: photos 6px, panels 16px, buttons and chips fully round */
:root {
color-scheme: light;
--bg: #ffffff;
--soft: #f5f5f3;
--ink: #161616;
--muted: #666664;
--line: #e7e7e4;
--scrim: rgb(14 14 13 / 0.97);
--pad: clamp(16px, 4vw, 56px);
--gap: 10px;
--max: 1440px;
--nav-h: 84px;
--r-img: 6px;
--r-panel: 16px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--wide: 125%;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
scroll-padding-top: calc(var(--nav-h) + 16px);
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
font-size: 17px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; font-stretch: var(--wide); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 40; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 999px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
/* buttons */
.btn {
display: inline-flex; align-items: center; gap: 8px;
min-height: 46px; padding: 0 22px; border-radius: 999px;
font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
background: var(--ink); color: #fff; border: 1px solid var(--ink);
transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:hover { background: #fff; color: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-whatsapp { color: #25d366; border-color: #25d366; }
.btn-whatsapp:hover { border-color: #1da851; color: #1da851; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: underline; font-size: 15px; }
.text-link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
/* logo: SHOOT and NORV as two equal width blocks, with a casual script "with" set tight between them */
.logo { --logo-fs: 19px; display: grid; justify-items: center; text-decoration: none; color: var(--ink); line-height: 1; padding: 6px 4px; }
.logo .lg-cap { font-weight: 700; font-stretch: var(--wide); font-size: var(--logo-fs); line-height: 1; }
.logo .lg-shoot { letter-spacing: 0.1em; }
.logo .lg-norv { letter-spacing: 0.344em; }
.logo .lg-with {
font-family: "Caveat", "Segoe Script", cursive; font-weight: 600;
font-size: calc(var(--logo-fs) * 1.6); line-height: 0.55; letter-spacing: 0.01em;
margin: calc(var(--logo-fs) * -0.28) 0 calc(var(--logo-fs) * -0.2); position: relative; z-index: 1;
}
.logo .lg-norv { margin-top: calc(var(--logo-fs) * 0.08); }
.logo.lg-small { --logo-fs: 15px; }
@media (max-width: 860px) { .nav .logo { --logo-fs: 16px; } }
/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.nav[data-stuck] { border-bottom-color: var(--line); }
.nav-in { height: var(--nav-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.nav-l, .nav-r { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-r { justify-content: flex-end; }
.nav-l a, .nav-r a:not(.btn) { text-decoration: none; font-size: 15px; padding-block: 10px; white-space: nowrap; }
.nav-l a:hover, .nav-r a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) { text-decoration: underline; }
.nav .btn { min-height: 40px; padding: 0 18px; }
.menu-btn { display: none; }
.menu-panel { display: none; }
@media (max-width: 1000px) {
.nav-l, .nav-r li:not(.keep) { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; justify-self: start; }
.menu-btn svg { width: 24px; height: 24px; }
.menu-icon-close { display: none; }
.nav[data-open] .menu-icon-open { display: none; }
.nav[data-open] .menu-icon-close { display: inline-flex; }
.menu-panel { display: block; position: fixed; inset: var(--nav-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--pad) 24px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s; }
.nav[data-open] .menu-panel { visibility: visible; opacity: 1; transform: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { display: block; padding: 14px 0; font-size: 22px; font-stretch: var(--wide); text-decoration: none; }
.menu-panel a.menu-enquire { display: inline-flex; padding: 0 22px; font-size: 15px; }
.menu-panel li.menu-enquire-row { display: flex; justify-content: flex-start; border-top: none; margin-top: 16px; }
}
@media (max-width: 860px) {
:root { --nav-h: 72px; }
.nav .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
}
/* hero: a wall of the work drifting behind the intro, always moving unless the visitor asked not to */
.hero { position: relative; height: clamp(560px, calc(100svh - var(--nav-h)), 920px); overflow: hidden; background: var(--soft); }
.wall { position: absolute; inset: 0 -40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.wall-col { overflow: hidden; }
.wall-track { display: grid; gap: var(--gap); }
.wall-ph { display: block; position: relative; }
.wall-track img { width: 100%; height: auto; border-radius: var(--r-img); background: var(--line); }
.wall-col:nth-child(even) .wall-track { margin-top: -120px; }
@media (prefers-reduced-motion: no-preference) {
.wall-track { animation: wall-up var(--dur, 90s) linear infinite; will-change: transform; }
.wall-col:nth-child(even) .wall-track { animation-direction: reverse; }
}
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 860px) {
.wall { grid-template-columns: repeat(3, 1fr); inset: 0 -24px; }
.wall-col:nth-child(n + 4) { display: none; }
}
.hero-card {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(460px, calc(100% - 2 * var(--pad)));
background: rgb(255 255 255 / 0.32); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--r-panel);
padding: clamp(18px, 2.6vw, 30px); text-align: center;
display: grid; gap: 12px; justify-items: center;
box-shadow: 0 30px 80px rgb(20 20 20 / 0.12);
}
.hero-card h1 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.04; }
.hero-card p { color: var(--muted); font-size: 15px; max-width: 38ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* sections */
.section { padding-block: clamp(64px, 8vw, 120px); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 62ch; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 52px); }
.section-head p { color: var(--muted); font-size: 18px; }
/* what I shoot: image led cards, staggered like a hand set photo wall, popping off the page */
/* what I shoot: Motherlight's list, muted text that darkens on hover while a tilted photo pops out beside it */
.shoot-list { border-top: 1px solid var(--line); }
.shoot-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.shoot-row-text h3 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 400; color: inherit; transition: color 0.3s var(--ease); }
.shoot-row-text p { font-size: 14px; margin-top: 6px; max-width: 48ch; color: inherit; }
.shoot-row:hover, .shoot-row:focus-visible { color: var(--ink); }
.shoot-arrow svg { width: 18px; height: 18px; flex: none; opacity: 0.55; }
.shoot-pop {
position: absolute; right: clamp(24px, 8vw, 140px); top: 50%; z-index: 2; pointer-events: none;
width: min(26vw, 220px); aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden;
box-shadow: 0 24px 48px rgb(20 20 20 / 0.2);
transform: translateY(-50%) rotate(-5deg) scale(0.92); opacity: 0;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.shoot-pop img { width: 100%; height: 100%; object-fit: cover; }
/* desktop vs phone here is a width breakpoint, same 860px cutoff as the rest of the
site (.wall below), not (hover: hover) -- a touchscreen laptop or a desktop browser
with its device toolbar left on both legitimately report no hover, which was making
plenty of real desktops wrongly get the phone's static list instead of the hover reveal */
@media (min-width: 861px) {
.shoot-row:hover .shoot-pop, .shoot-row:focus-visible .shoot-pop { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
}
@media (max-width: 860px) {
.shoot-row { flex-wrap: nowrap; }
.shoot-pop { position: static; opacity: 1; aspect-ratio: 4 / 5; box-shadow: 0 10px 22px rgb(20 20 20 / 0.18); flex: none; }
.shoot-row:nth-child(1) .shoot-pop { width: 70px; transform: rotate(-7deg); }
.shoot-row:nth-child(2) .shoot-pop { width: 54px; transform: rotate(6deg); }
.shoot-row:nth-child(3) .shoot-pop { width: 80px; transform: rotate(-5deg); }
.shoot-row:nth-child(4) .shoot-pop { width: 60px; transform: rotate(8deg); }
}
@media (max-width: 640px) { .shoot-arrow { display: none; } }
/* my work: one tile per category, on the home page, a single row so all of them sit in view together */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.cat { position: relative; display: block; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 3 / 4; text-decoration: none; background: var(--soft); }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat:hover img { transform: scale(1.04); }
.cat-label { position: absolute; inset: auto 0 0 0; padding: clamp(12px, 1.6vw, 18px); color: #f4f3f0; background: linear-gradient(to top, rgb(10 10 9 / 0.6), rgb(10 10 9 / 0)); padding-top: 48px; }
.cat-label h3 { font-size: clamp(16px, 1.6vw, 22px); }
@media (max-width: 760px) { .cats { grid-template-columns: repeat(2, 1fr); } }
/* about strip */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about img { border-radius: var(--r-img); width: 100%; max-height: 520px; object-fit: cover; }
.about-copy { display: grid; gap: 18px; max-width: 56ch; }
.about-copy h2 { font-size: clamp(30px, 3.4vw, 48px); }
.about-copy p { font-size: 18px; }
.about-copy p + p { color: var(--muted); }
.about-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about img { max-height: 420px; } }
/* a few real photos next to the Instagram link, instead of just naming it */
.insta { margin-top: clamp(40px, 6vw, 72px); }
.insta-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.insta-head p { font-size: 13px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.insta-grid a { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--soft); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.insta-grid a:hover img { transform: scale(1.08); }
@media (max-width: 760px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
/* enquire band */
.enquire { padding-block: clamp(48px, 6vw, 96px); }
.enquire-panel { background: var(--soft); border-radius: var(--r-panel); padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 64px); display: grid; gap: 22px; justify-items: center; text-align: center; }
.enquire-panel h2 { font-size: clamp(34px, 5vw, 72px); }
.enquire-panel p { color: var(--muted); font-size: 18px; max-width: 46ch; }
.enquire-links { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; justify-content: center; }
/* page heads */
.page-head { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.page-head h1 { font-size: clamp(40px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.02em; }
.page-head > p { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 56ch; }
/* category page: a card per project, click through to its own page */
.proj-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 7vw, 96px); }
.proj-card { display: grid; gap: 12px; text-decoration: none; }
.proj-card .ph { aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--soft); }
.proj-card .ph img, .proj-card .ph video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.proj-card:hover .ph img, .proj-card:hover .ph video { transform: scale(1.04); }
.proj-card h2 { font-size: clamp(22px, 2.2vw, 30px); }
.proj-card .meta { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .proj-cards { grid-template-columns: 1fr; } }
/* project page: title, then every photo, small, with no section titles in between */
.page-head .project-meta { font-size: 14px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-bottom: clamp(48px, 7vw, 96px); }
.grid a { display: block; overflow: hidden; border-radius: var(--r-img); background: var(--soft); aspect-ratio: 4 / 5; }
.grid img, .grid video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.grid a:hover img, .grid a:hover video { transform: scale(1.04); }
.video-tile { position: relative; }
.grid-dense { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
.grid-dense a.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1100px) { .grid-dense { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .grid-dense { grid-template-columns: repeat(3, 1fr); } .grid-dense a.big { grid-column: span 2; grid-row: span 2; } }
/* a single, understated back link on a project page */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; font-size: 14px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.back-link svg { width: 15px; height: 15px; }
/* about and contact pages */
.prose { display: grid; gap: 18px; max-width: 62ch; font-size: 18px; }
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); margin-top: 20px; }
.wrap-narrow { max-width: 760px; }
.or-email { margin-top: 28px; font-size: 15px; color: var(--muted); padding-bottom: clamp(48px, 7vw, 96px); }
.or-email a { text-decoration: underline; color: var(--ink); }
/* enquiry form */
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.enquiry-form[hidden] { display: none; }
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14px; color: var(--muted); }
.field .optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
font: inherit; font-size: 16px; color: var(--ink); background: #fff;
border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
min-height: 46px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #b3261e; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: 15px; color: var(--muted); }
.form-status.is-error { color: #b3261e; }
.form-status.is-error a { color: inherit; text-decoration: underline; }
.form-status.is-success { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .enquiry-form { grid-template-columns: 1fr; } }
/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 48px; }
.foot-in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0; font-size: 15px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .logo:hover { text-decoration: none; }
.foot p { font-size: 14px; color: var(--muted); }
main > .wrap:last-child { padding-bottom: clamp(64px, 8vw, 120px); }
/* reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
}
/* lightbox */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border: 0; background: var(--scrim); color: #f1f0ed; overscroll-behavior: contain; }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--pad); font-size: 15px; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; background: rgb(255 255 255 / 0.08); color: #f1f0ed; border: 1px solid rgb(241 240 237 / 0.25); cursor: pointer; }
.icon-btn:hover { border-color: #f1f0ed; }
.icon-btn svg { width: 20px; height: 20px; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(8px, 6vw, 96px) clamp(12px, 3vw, 32px); }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100dvh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lb-stage video { cursor: pointer; }
.lb-video-ui { position: absolute; left: clamp(8px, 6vw, 96px); bottom: clamp(20px, 4vw, 44px); display: flex; gap: 10px; }
.lb-video-ui[hidden] { display: none; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(8px, 2vw, 32px); }
.lb-next { right: clamp(8px, 2vw, 32px); }
@media (max-width: 640px) {
.lb-stage { padding-bottom: 72px; }
.lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
.lb-prev { left: calc(50% - 52px); }
.lb-next { right: calc(50% - 52px); }
}
@media (prefers-reduced-motion: no-preference) {
.lightbox[open] { animation: fade 0.3s var(--ease); }
.lb-stage img.swap { animation: fade 0.35s var(--ease); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* live editor: only active behind ?edit=1 plus the password, but the CSS loads for everyone */
.editable-text[contenteditable] { cursor: text; outline-offset: 4px; border-radius: 4px; }
.editable-text[contenteditable]:hover { outline: 1px dashed rgb(22 22 22 / 0.3); }
.editable-text[contenteditable]:focus { outline: 2px solid var(--ink); }
.editable-img { position: relative; }
.shoot-pop.editable-img { position: absolute; }
.edit-mode .shoot-pop { opacity: 1; pointer-events: auto; transform: translateY(-50%) rotate(0deg) scale(1); }
.edit-mode .wall-col { cursor: ns-resize; }
.edit-mode .wall-col.scroll-active { overflow-y: auto; cursor: auto; scrollbar-width: none; -ms-overflow-style: none; }
.edit-mode .wall-col.scroll-active::-webkit-scrollbar { display: none; }
.editable-img.dragging { opacity: 0.2 !important; }
.editable-img.dragging .edit-img-tools { display: none !important; }
.dnd-placeholder {
background: var(--soft) !important;
border: 2px dashed var(--muted) !important;
box-shadow: none !important;
pointer-events: none;
}
.dnd-placeholder img, .dnd-placeholder .edit-img-tools { display: none !important; }
/* the tint and its layout box never intercept clicks (pointer-events: none throughout), so
clicking a photo always reaches the link under it and navigates like anywhere else on the
site; only the buttons themselves opt back in, and only once they're actually visible, so
Change/Crop/Remove are the one thing that needs a deliberate, precise click */
.edit-img-tools {
position: absolute; inset: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px;
background: rgb(14 14 13 / 0.45); opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none;
}
.editable-img:hover .edit-img-tools, .edit-img-tools:focus-within { opacity: 1; }
@media not all and (hover: hover) { .edit-img-tools { opacity: 1; } }
.edit-img-btn {
font: inherit; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 999px; border: 1px solid rgb(241 240 237 / 0.4);
background: rgb(255 255 255 / 0.12); color: #f1f0ed; cursor: pointer; white-space: nowrap; pointer-events: none;
}
.editable-img:hover .edit-img-btn, .edit-img-tools:focus-within .edit-img-btn { pointer-events: auto; }
@media not all and (hover: hover) { .edit-img-btn { pointer-events: auto; } }
.edit-img-btn:hover { background: #f1f0ed; color: var(--ink); }
.edit-img-btn-danger { border-color: rgb(227 110 100 / 0.5); color: #ffb4ac; }
.edit-img-btn-danger:hover { background: #e34c3c; color: #fff; }
/* a brand pass on the native bits: ink/soft tokens instead of OS chrome, for the whole page
while editing (not just the picker) */
.edit-mode { scrollbar-color: #c9c8c2 var(--soft); scrollbar-width: thin; }
.edit-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
.edit-mode ::-webkit-scrollbar-track { background: var(--soft); }
.edit-mode ::-webkit-scrollbar-thumb { background: #c9c8c2; border-radius: 999px; border: 2px solid var(--soft); }
.edit-mode ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.edit-auth {
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--scrim); padding: var(--pad);
}
/* the password prompt never toggles [hidden] (it's added and .remove()d instead), but the
"Add project" dialog reuses this same shell and does toggle it -- without this rule,
.edit-auth's own `display: grid` outranks the browser's default [hidden] styling, so
setting .hidden = true has no visual effect at all and the dialog can't be dismissed */
.edit-auth[hidden] { display: none; }
.edit-auth-box { display: grid; gap: 14px; background: var(--bg); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 40px); width: min(100%, 360px); text-align: center; }
.edit-auth-box h2 { font-size: 22px; }
.edit-auth-box input { font: inherit; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); text-align: center; }
.edit-auth-box button { font: inherit; padding: 12px 16px; border-radius: 999px; border: none; background: var(--ink); color: var(--bg); cursor: pointer; }
.edit-auth-box button:hover { background: #3a3a38; }
.edit-auth-err { color: #b4432e; font-size: 14px; }
.edit-toolbar {
position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 12px;
background: var(--ink); color: var(--bg); border-radius: 999px; padding: 10px 10px 10px 18px; font-size: 13px; max-width: calc(100vw - 32px);
}
.edit-toolbar button { font: inherit; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(241 240 237 / 0.35); background: transparent; color: inherit; cursor: pointer; }
.edit-toolbar button:hover { background: rgb(241 240 237 / 0.15); }
.edit-status {
position: fixed; right: 16px; bottom: 16px; z-index: 90; background: var(--bg); border: 1px solid var(--line);
border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--muted); box-shadow: 0 8px 24px rgb(20 20 20 / 0.12);
}
.edit-status.saved { color: var(--ink); }
.edit-status.err { color: #b4432e; }
/* photo picker: a custom listbox in place of a native