/* The theme colours are registered as real colours so the light/dark switch
   can fade them all at once, at the top of the page; everything that uses
   them follows along in perfect step. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #faf8f5; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #1c1b19; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #6f6a62; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #e4dfd7; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #1c1b19; }
@property --menu-bg { syntax: '<color>'; inherits: true; initial-value: rgba(226, 226, 226, .95); }
@property --menu-line { syntax: '<color>'; inherits: true; initial-value: rgba(120, 120, 120, .9); }
@property --menu-link { syntax: '<color>'; inherits: true; initial-value: #3d3b37; }

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --text: #1c1b19;
  --muted: #6f6a62;
  --line: #e4dfd7;
  --accent: #1c1b19;
  /* clean, thin line font (no serifs) used everywhere */
  --display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  /* drop-down menu */
  --menu-bg: rgba(226, 226, 226, .95);
  --menu-line: rgba(120, 120, 120, .9);
  --menu-link: #3d3b37;
  --glow: 255, 255, 255; /* hover glow colour (r, g, b) */
  /* soft shadow under photos on the page, falling to the bottom right */
  --photo-shadow: 3px 4px 7px rgba(0, 0, 0, .32), 1px 2px 2px rgba(0, 0, 0, .14);
  /* the site's motion: slow-fast-slow, and a gentler version for hovers */
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.45, 0, .55, 1);
}
/* Dark mode: the site's colours inverted (photos are left untouched).
   Switched on with the moon button in the menu. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1b1b1b;
  --text: #ecebe8;
  --muted: #9b968e;
  --line: #2f2d2a;
  --accent: #ecebe8;
  --menu-bg: rgba(62, 62, 62, .95);
  --menu-line: rgba(140, 140, 140, .9);
  --menu-link: #d4d1cc;
  --glow: 0, 0, 0;
  --photo-shadow: 6px 8px 18px rgba(0, 0, 0, .6);
}

/* distance of the header's buttons (and the drop-down menu) from the screen
   edge, rounded to a whole pixel so the menu's right line and the menu icon
   always land on exactly the same pixel (Safari rounds fractions differently) */
:root { --edge: clamp(1rem, 4vw, 3rem); }
@supports (width: round(1px, 1px)) { :root { --edge: round(clamp(1rem, 4vw, 3rem), 1px); } }

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The page scrolls inside the body rather than the browser window: Safari
     always lets the window stretch past the top and bottom and snap back, but
     it respects "no bounce" on a scrolling box, so the page just stops at its
     ends. The window itself stays put at the screen's size. */
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* header, page, footer stacked so the page fills the space between them */
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  /* thin type stays crisp (most noticeable light-on-dark) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--text); color: var(--bg); }
body > * { flex-shrink: 0; } /* header, page and footer keep their full height */
img { max-width: 100%; display: block; }
a { color: inherit; }
code { font-size: .9em; background: var(--line); padding: .1em .35em; border-radius: 3px; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--edge);
  /* TRYING OUT: the header stays at the top of the page and scrolls away
     with it (it used to follow down the page: position: sticky; top: 0) */
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
}
/* header background lives on its own layer so the menu's blur can see the page */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.brand {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* name with a small, widely spaced "PRODUCTIONS INC" centred underneath,
   spread a little wider than the name itself */
.brand-text { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-name { line-height: .9; }
.brand-sub {
  font-size: .2857em; /* sized relative to the name, so it scales with it */
  font-weight: 400;
  letter-spacing: .8em;
  margin-right: -.8em; /* keep it centred despite the spacing after the last letter */
  margin-top: .3em; /* a little gap under the name */
  white-space: nowrap;
}
/* logo to the right of the name (upload any image to images/logo to show it) */
.logo { display: block; width: auto; object-fit: contain; flex-shrink: 0; }
.logo-small { height: 2.25rem; }

/* right side of the header: light/dark switch, then the menu button */
.header-actions { display: flex; align-items: center; gap: 1.1rem; }

/* light / dark switch: a circle outline with a moon (light) or sun (dark) */
.theme-toggle {
  /* circle and icon are drawn in one image so the icon is always centred;
     about the height of the menu icon, outline as thick as its bars */
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text);
  cursor: pointer; padding: 0;
  /* the icon swaps instantly; its colour eases along with the page fade */
  transition: transform .25s ease, opacity .25s ease, color 1.5s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible { transform: scale(1.1); outline: none; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* slow, gentle fade between light and dark (one and a half seconds): the theme
   colours themselves fade, at the top of the page, so every part of the site
   changes together. Nothing else transitions meanwhile (otherwise pieces
   would trail behind and jump at the end); photo shadows fade along. The
   button's icon swaps instantly. */
html.theme-fading {
  transition: --bg 1.5s ease, --surface 1.5s ease, --text 1.5s ease, --muted 1.5s ease, --line 1.5s ease,
    --accent 1.5s ease, --menu-bg 1.5s ease, --menu-line 1.5s ease, --menu-link 1.5s ease !important;
}
html.theme-fading body *:not(section.show *), html.theme-fading body *:not(section.show *)::before, html.theme-fading body *:not(section.show *)::after {
  transition: box-shadow 1.5s ease !important;
}
/* (the home page's photos carry on drifting and fading as they were) */

/* Menu button (top right) */
.nav-toggle {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .18em;
}
.nav-toggle .bars { position: relative; width: 22px; height: 14px; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* The menu: a tall panel that slides in from the right, slow-fast-slow,
   over the page (which dims behind it). The pages are listed big and thin,
   each with its number; they drift in one after another as it opens. The
   one you're on is lit, with a fine line under it, and the hovered one
   steps a little to the right as its line draws in. Instagram, email and
   YouTube sit along the bottom. */
.nav-toggle, .header-right { position: relative; z-index: 3; } /* (the menu button stays above the panel, as its close X) */
.site-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
  width: min(480px, 100vw);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--hdr, 6rem) + clamp(1.5rem, 6vh, 4rem)) var(--edge) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-left: 1px solid var(--line);
  /* (the shadow is the dimming over the rest of the page) */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  /* closing: back out to the right */
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), visibility 0s linear .5s;
}
.site-nav.open {
  transform: none; visibility: visible;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), visibility 0s;
}
.nav-links { display: flex; flex-direction: column; gap: clamp(.5rem, 2vh, 1.2rem); }
.nav-links a {
  display: flex; align-items: baseline;
  text-decoration: none; color: var(--muted); padding: .15rem 0;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; translate: 2.5rem 0;
  transition: opacity .35s var(--ease), translate .35s var(--ease), color .45s var(--ease-soft);
}
.site-nav.open .nav-links a {
  opacity: 1; translate: 0 0;
  transition: opacity .8s var(--ease), translate .9s var(--ease), color .45s var(--ease-soft);
}
.site-nav.open .nav-links a:nth-child(1) { transition-delay: .14s, .14s, 0s; }
.site-nav.open .nav-links a:nth-child(2) { transition-delay: .2s, .2s, 0s; }
.site-nav.open .nav-links a:nth-child(3) { transition-delay: .26s, .26s, 0s; }
.site-nav.open .nav-links a:nth-child(4) { transition-delay: .32s, .32s, 0s; }
.nav-name {
  position: relative;
  font-family: var(--display); font-weight: 200; line-height: 1.15;
  font-size: clamp(1.8rem, 5.5vw, 2.5rem); letter-spacing: .08em;
  transition: translate .6s var(--ease);
}
.nav-name::after {
  content: ""; position: absolute; left: 0; right: .08em; bottom: .02em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { color: var(--text); outline: none; }
.nav-links a:hover .nav-name, .nav-links a:focus-visible .nav-name { translate: .4rem 0; }
.nav-links a:hover .nav-name::after, .nav-links a:focus-visible .nav-name::after, .nav-links a.active .nav-name::after { transform: scaleX(1); }
.nav-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  opacity: 0; transition: opacity .3s var(--ease);
}
.site-nav.open .nav-foot { opacity: 1; transition: opacity .8s var(--ease) .4s; }
.nav-foot .social { margin: 0; justify-content: flex-start; }
.nav-sign { margin: 0; font-size: .58rem; letter-spacing: .22em; color: var(--muted); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav.open, .nav-links a, .site-nav.open .nav-links a, .nav-foot { transition-duration: .01s !important; transition-delay: 0s !important; }
}


@media (max-width: 760px) {
  /* phones: light/dark button on the left, EYESEERC in the middle, menu on
     the right, the two buttons the same distance from their edges */
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .header-actions { display: contents; }
  .theme-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* computers and iPads: laid out like phones (light/dark button on the left,
   EYESEERC in the middle, menu on the right), with a bigger header */
@media (min-width: 761px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 1.85rem; padding-bottom: 1.85rem; }
  .header-actions { display: contents; }
  .theme-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .brand { grid-column: 2; grid-row: 1; justify-self: center; font-size: 2.6rem; }
  .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
  .theme-toggle, .theme-toggle svg { width: 22px; height: 22px; }
  .nav-toggle .bars { width: 28px; height: 18px; }
  .nav-toggle .bars span { height: 1.7px; }
  .nav-toggle .bars span:nth-child(2) { top: 8px; }
  .nav-toggle .bars span:nth-child(3) { top: 16px; }
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1),
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 8px; }
}

/* ---------- Main ---------- */
.site-main {
  /* grows to fill short pages but never squashes below its contents (Safari
     would otherwise let the footer ride up over the photos) */
  flex: 1 0 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
  min-height: 70vh;
}
/* Photography and Shop: title, buttons and photos sit about half as far below the header line */
.site-main.tight-top { padding-top: clamp(1rem, 2.5vw, 2rem); }
/* page titles (COLOR PHOTOS, SHOP...) match the EYESEERC name in the header */
.page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 2.25rem;
  text-align: center;
  letter-spacing: .18em;
}
.page-intro { text-align: center; color: var(--muted); margin: -1rem 0 2.5rem; }

/* ---------- Home ---------- */
/* Home: your photo fills the left half of the page, from the line under the
   header down to the line above the footer, kept centred on you; the bio
   sits in the middle of the right half. */
.site-main.is-home {
  max-width: none; width: 100%;
  padding: 0; margin: 0;
  flex: 1 0 auto; display: flex; flex-direction: column;
  overflow: clip; /* keeps the dark-mode glow inside the page area */
}
.hero {
  flex: 1 0 auto; /* fills the space, never squashes below the bio */
  overflow: clip; /* the dark-mode glow stays beside the photo, not under the strip */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.hero-photo { position: relative; min-height: 22rem; background: var(--line); }
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 49% 45%; /* where you are in the frame */
}
.hero-text {
  align-self: center;
  padding: clamp(2rem, 5vw, 5rem);
  max-width: 40rem;
}
/* the blue mark turns slowly like a spinning sign (used beside the
   copyright line): each half turn goes from edge-on, round to facing you,
   and on to edge-on again; at that moment (when it's just a thin line) the
   next half turn starts, so it's never seen backwards */
@keyframes mark-spin { from { transform: rotateY(90deg); } to { transform: rotateY(-90deg); } }
.bio { font-size: 1.05rem; }
.bio p { margin: 0 0 1.1rem; }
.bio strong { font-weight: 500; }

/* a long strip of small photos above the footer, gliding slowly right to
   left and looping forever; both ends fade out. */
.strip { border-top: 1px solid var(--line); }
.strip-window {
  overflow: hidden;
  padding: clamp(.9rem, 2vh, 1.4rem) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.strip-track {
  display: flex; width: max-content;
  animation: strip-glide 110s linear infinite;
}
@keyframes strip-glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-item { display: block; flex: none; margin-right: clamp(.75rem, 1.6vw, 1.4rem); transition: transform .35s ease; }
.strip-item img {
  height: clamp(64px, 11vh, 120px); width: auto; aspect-ratio: 3 / 2; object-fit: cover;
  box-shadow: var(--photo-shadow);
}
.strip-item:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .strip-item img { height: 62px; }
  .strip-track { animation-duration: 80s; }
}
@media (prefers-reduced-motion: reduce) {
  .strip-window { overflow-x: auto; }
  .strip-track { animation: none; }
}

/* dark mode: a soft light glows out from around the home photo onto the
   page, so the photo looks lit up. It's a blurred shadow of the photo's own
   outline (so it always matches its shape, with no edges and nothing extra
   to load), and it fades in once the photo itself is showing. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  box-shadow: 0 0 110px 18px rgba(225, 225, 225, .2);
  opacity: 0; transition: opacity 1.4s ease;
  pointer-events: none;
}
.hero-photo .hero-main { z-index: 1; }
:root[data-theme="dark"] .hero-photo { background: transparent; }
:root[data-theme="dark"]:not(.home-intro) .hero-photo.ready::after { opacity: 1; }
.strip { position: relative; z-index: 1; } /* the strip's photos sit above the glow */
/* the moving photos can't be selected (or dragged) by quick clicks */
.strip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.strip img { -webkit-user-drag: none; }

/* first visit to the home page: the photo fades in with a slight drift,
   then the bio and the photo strip follow one by one */
@keyframes home-photo-in { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } }
@keyframes home-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.home-intro .is-home .hero-photo { background: transparent; }
/* (the photo's fade waits until the photo has actually downloaded) */
.home-intro .is-home .hero-photo:not(.ready) .hero-main { opacity: 0; }
.home-intro .is-home .hero-photo.ready .hero-main { animation: home-photo-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.home-intro .is-home .bio { animation: home-rise-in .9s ease-out .65s both; }
.home-intro .is-home .strip { animation: home-rise-in .9s ease-out .9s both; }
@media (prefers-reduced-motion: reduce) {
  .home-intro .is-home * { animation: none !important; }
}

/* computers and iPads (photo beside the bio): the home page fits the screen
   exactly, header at the top and the links at the bottom, with nothing to
   scroll. The bio's spacing and the mark shrink on shorter screens so it fits
   (a very short window still scrolls rather than cutting the bio off). */
@media (min-width: 761px) {
  .site-main.is-home { min-height: 0; }
  .site-main.is-home .hero-photo { min-height: 0; }
  .site-main.is-home .hero-text { padding-block: clamp(.75rem, 3vh, 5rem); }
}

/* phones and narrow tablets: photo across the top half, bio underneath */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { min-height: 0; height: 55vh; height: 55svh; }
}

.button {
  display: inline-block;
  margin-top: 1rem;
  padding: .75rem 1.75rem;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  transition: background .2s, color .2s;
}
.button:hover { background: transparent; color: var(--accent); }


/* ---------- Gallery ---------- */
.gallery { columns: 3 320px; column-gap: 1rem; }
.gallery-item { margin: 0 0 1rem; break-inside: avoid; overflow: hidden; }
.gallery-item img { width: 100%; height: auto; transition: transform .9s var(--ease-soft), opacity .5s var(--ease-soft); }
.gallery-item a:hover img { transform: scale(1.03); opacity: .92; }
/* the title under a photo brightens along with it */
.gallery-item:hover .gallery-title { color: var(--text); }

/* Grid style: 3 photos per row with generous space between them, row after
   row. Every tile is the 3:2 full-frame shape; the whole photo shows when
   it's opened full screen. */
.gallery-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.gallery-grid .gallery-item { margin: 0; overflow: visible; } /* let the photo shadow show */
.gallery-grid .gallery-item a { display: block; overflow: hidden; }
.gallery-grid .gallery-item img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.gallery-grid.gallery-square .gallery-item img { aspect-ratio: 1; object-position: center top; } /* Projects page: square tiles, showing the top of tall pieces (the artwork, not the blank border under it) */
/* Projects page: each piece at its own true shape, so it opens and closes
   in the photo viewer without any cropping or resizing */
.gallery-grid.gallery-natural { align-items: start; }
/* Projects on computers and iPads: four across (phones keep two) */
@media (min-width: 701px) { .gallery-grid.gallery-natural { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid.gallery-natural .gallery-item img { aspect-ratio: auto; height: auto; object-fit: contain; }
/* Photography page: a small numbered title just under each photo */
.gallery-title {
  margin-top: .45rem;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .14em;
  padding-left: .14em; /* balances the space letter-spacing leaves after the last letter, so it sits truly centred */
  color: var(--muted);
  transition: color .5s var(--ease-soft);
}
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: two photos per row, a little closer together, with smaller titles */
@media (max-width: 560px) {
  .gallery-grid { gap: 1.1rem .9rem; }
  .gallery-title { font-size: .6rem; letter-spacing: .12em; padding-left: .12em; margin-top: .35rem; }
}

/* COLOR / B&W buttons under the Photography title */
.gallery-filter { display: flex; justify-content: center; gap: 2.2rem; margin: -1.8rem 0 2.25rem; } /* tucked up close under the page title */
.gallery-filter button {
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 400; letter-spacing: .18em; margin-right: -.18em;
  color: var(--muted);
  position: relative;
  transition: color .2s ease;
}
.gallery-filter button:hover, .gallery-filter button:focus-visible { color: var(--text); outline: none; }
.gallery-filter button[aria-pressed="true"] { color: var(--text); }
/* selected button: a thin line underneath that fades out at both ends */
.gallery-filter button::after {
  content: "";
  position: absolute; left: 0; right: .18em; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, currentColor 30%, currentColor 70%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.gallery-filter button[aria-pressed="true"]::after { opacity: 1; }
/* with the script running, one line glides between the buttons instead */
.gallery-filter { position: relative; }
.gallery-filter.has-line button::after { display: none; }
.filter-line {
  position: absolute; bottom: 0; height: 1px; left: 0; width: 0;
  background: linear-gradient(to right, transparent, var(--text) 30%, var(--text) 70%, transparent);
  transition: left .8s cubic-bezier(.65, 0, .35, 1), width .8s cubic-bezier(.65, 0, .35, 1); /* slow, fast, slow — in step with the photos */
  pointer-events: none;
}
/* a button for something not open yet (SHIRTS): a small COMING SOON
   hangs underneath it */
.gallery-filter .soon-note {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: .2rem; margin-left: -.09em;
  font-size: .52rem; letter-spacing: .2em; white-space: nowrap;
  color: var(--muted); opacity: .8; pointer-events: none;
}
/* Photography / Projects: how many photos per row (small icons on the left,
   just above the photos) */
.grid-size { display: flex; justify-content: flex-start; gap: .35rem; margin: -1.35rem 0 .9rem; }
.grid-size button {
  background: none; border: 0; padding: .3rem; cursor: pointer; color: var(--muted); opacity: .55;
  transition: opacity .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent;
}
.grid-size button svg { display: block; width: 18px; height: 18px; }
.grid-size button:hover { opacity: .9; }
.grid-size button[aria-pressed="true"] { color: var(--text); opacity: 1; }
.grid-size button[data-cols="4"] { display: none; }
@media (min-width: 701px) {
  .grid-size button[data-cols="4"] { display: block; }
  .grid-size button[data-cols="1"] { display: none; }
}
/* soft-focus loading: a tiny blurred preview shows straight away and the
   photo sharpens in over it once it has arrived */
.soft { position: relative; isolation: isolate; }
.soft::before {
  content: ""; position: absolute; inset: -12px; z-index: -1;
  background: var(--soft) center / cover no-repeat;
  filter: blur(14px); transform: scale(1.04);
}
.js .soft img { opacity: 0; transition: opacity .9s cubic-bezier(.45, 0, .55, 1); }
.js .soft img.sharp { opacity: 1; }
/* photos sliding off the side of the screen never make the page scroll sideways */
.site-main { overflow-x: clip; }
.is-filtered-out { display: none !important; }

/* drop shadow on photos shown on the page (not when opened full screen) */
.gallery-item a,
.shop-photo { box-shadow: var(--photo-shadow); }

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed var(--line);
  color: var(--muted);
}
.empty-state p { margin: .25rem 0; font-family: var(--display); font-size: 1.5rem; }
.empty-state .hint { font-family: var(--sans); font-size: .85rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  visibility: hidden;
  transition: visibility 0s linear .4s; /* stay visible while closing */
}
.lightbox.open { visibility: visible; transition-delay: 0s; }
.lightbox.instant, .lightbox.instant::before { transition: none; }
/* the darkened, blurred page behind the photo; only this layer fades,
   the photo itself is always fully solid */
.lightbox::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(12, 12, 12, .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .35s ease;
}
.lightbox.open::before { opacity: 1; }
.lightbox button, .lightbox-caption { opacity: 0; transition: opacity .3s ease; }
.lightbox.open button { opacity: .75; }
.lightbox.open .lightbox-caption { opacity: 1; }
/* moving between photos: the name fades out quickly, then the new one fades in slowly */
.lightbox .lightbox-caption { transition: opacity .9s ease; }
.lightbox.open .lightbox-caption.is-changing { opacity: 0; transition: opacity .2s ease; }
/* arrows sit beside the photo, never on top of it */
.lb-stage { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; }
.lb-figure { margin: 0; position: relative; min-width: 0; }
.lightbox img {
  max-width: calc(100vw - 10rem); max-height: 84vh; object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  will-change: transform;
}
/* the neighbouring photo that slides in beside the current one */
.lightbox .lb-peek {
  position: fixed; z-index: 0; left: 0; top: 0; /* sized and moved into place by the script */
  max-width: none; max-height: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  pointer-events: none;
  display: none;
}
.lightbox .lb-peek.show { display: block; }
.lightbox { touch-action: none; overflow: hidden; } /* the swipe is handled by the page, not the browser */
.lightbox.zoomed .lb-prev, .lightbox.zoomed .lb-next, .lightbox.zoomed .lightbox-caption { opacity: 0 !important; pointer-events: none; }
/* the little magnifying glass that follows a mouse / trackpad over the photo */
.lb-mag {
  position: fixed; left: 0; top: 0; z-index: 6; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.lb-mag svg { width: 20px; height: 20px; }
.lb-mag.show { opacity: 1; }
.lb-mag.max .mag-plus { display: none; } /* as close as it goes */
@media (hover: hover) and (pointer: fine) {
  .lightbox:not(.shop-mode) .lb-figure > img { cursor: none; }
}
.lightbox.zoom-dragging, .lightbox.zoom-dragging * { cursor: grabbing !important; }
/* Safari draws fading text differently from still text, so the name and
   arrows looked brighter while fading in and then dropped dimmer at the
   end; drawing them the same way throughout keeps them steady */
.lightbox-caption, .lightbox .lb-prev, .lightbox .lb-next, .lightbox .lb-close {
  will-change: opacity; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}
/* quick clicks on the arrows or photos never select (and tint) anything */
.lightbox { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* caption hangs below the photo so the arrows line up with the photo's middle */
.lightbox-caption { position: absolute; top: 100%; left: 0; right: 0; text-align: center; color: #e6e6e6; font-size: .85rem; margin-top: 1rem; text-transform: capitalize; }
.lightbox button {
  background: none; border: 0; color: #fff;
  font-size: 2.5rem; line-height: 1; cursor: pointer; padding: 1rem;
}
.lightbox.open button:hover { opacity: 1; }
.lightbox .lb-close { position: absolute; z-index: 1; top: .5rem; right: 1rem; }
/* phones and iPads: no X (tapping around the photo closes it) */
.touch .lightbox .lb-close { display: none; }
.lightbox .lb-prev, .lightbox .lb-next { flex: none; width: 3.5rem; position: relative; z-index: 1; }
/* phones: the photo uses (almost) the full width, and the arrows move down
   to sit either side of the photo's name underneath it */
@media (max-width: 760px) {
  .lb-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 0;
    column-gap: .75rem;
  }
  .lb-figure { display: contents; }
  .lightbox img { grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: calc(100vw - 1.5rem); max-height: 78vh; }
  .lightbox-caption { position: static; grid-column: 2; grid-row: 2; margin-top: .35rem; }
  .lightbox .lb-prev { grid-column: 1; grid-row: 2; justify-self: end; }
  .lightbox .lb-next { grid-column: 3; grid-row: 2; justify-self: start; }
  .lightbox .lb-prev, .lightbox .lb-next { width: auto; padding: .35rem .5rem 0; font-size: 2rem; }
  /* on phones the arrows sit beside the name, so they fade out and back in with it */
  .lightbox .lb-prev, .lightbox .lb-next { transition: opacity .9s ease; }
  .lightbox.open.changing button.lb-prev, .lightbox.open.changing button.lb-next { opacity: 0; transition: opacity .2s ease; }
}

/* ---------- Shop ---------- */
/* Three equal spots per row. Inside each square spot a landscape photo fills
   the width and a portrait photo fills the height, so every print is the
   same size but keeps its own shape. Photos share a baseline, price below. */
.shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem);
}
.shop-item { margin: 0; }
.shop-frame { aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; }
.shop-photo { display: block; overflow: hidden; background: var(--line); }
.shop-landscape { width: 100%; aspect-ratio: 3 / 2; }
.shop-portrait { width: 66.667%; aspect-ratio: 2 / 3; }
.shop-square { width: 100%; aspect-ratio: 1; }
.shop-photo img { width: 100%; height: 100%; object-fit: cover; }
/* hovering a print: the whole print (edges and shadow too) grows a little */
a.shop-photo[href] { position: relative; transition: transform .5s cubic-bezier(.45, 0, .55, 1); }
a.shop-photo[href]:hover { transform: scale(1.04); z-index: 1; }
.shop-price {
  margin-top: .9rem;
  text-align: center;
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--text);
}
/* phones: two items per row (same square spots as on computers) */
@media (max-width: 560px) {
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .9rem; }
  .shop-price { margin-top: .5rem; font-size: .8rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.4rem clamp(1rem, 4vw, 3rem) 2.2rem;
  text-align: center;
  color: var(--muted);
  font-size: .74rem;
  letter-spacing: .06em;
}
.site-footer p { margin: 0; }
/* a small copy of the spinning blue mark at the end of the copyright line
   (the line is centred with it included) */
.footer-mark-wrap { display: inline-block; vertical-align: middle; margin-left: .55em; perspective: 300px; }
.footer-mark { display: block; height: 1.45em; width: auto; animation: mark-spin 5s linear infinite; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .footer-mark { animation: none; } }
/* Instagram / YouTube buttons */
.social { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 1.1rem; }
.social-btn { color: var(--text); opacity: .75; display: inline-flex; transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft); }
.social-btn:hover, .social-btn:focus-visible { opacity: 1; transform: scale(1.12); outline: none; }
.social-btn svg { width: 20px; height: 20px; display: block; }

/* ---------- 404 page ---------- */
/* 404: the spinning blue mark, NOTHING HERE and links back into the site */
.not-found { text-align: center; padding: clamp(2rem, 6vh, 4rem) 0 4rem; }
.not-found-mark { display: inline-block; perspective: 600px; margin-bottom: 1.6rem; }
.not-found-mark img { display: block; width: clamp(110px, 14vw, 160px); height: auto; animation: mark-spin 5s linear infinite; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .not-found-mark img { animation: none; } }
.not-found-code { margin: 0; font-size: .75rem; letter-spacing: .5em; margin-right: -.5em; color: var(--muted); }
.not-found .page-title { margin-top: .4rem; }
.not-found p.not-found-text { color: var(--muted); margin: -.5rem 0 2rem; letter-spacing: .04em; }
.not-found-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem 2.2rem; }
.not-found-links a { font-size: .8rem; letter-spacing: .2em; text-decoration: none; color: var(--muted); padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.not-found-links a:hover { color: var(--text); border-color: currentColor; }

/* ---------- Cart ---------- */
/* cart icon to the left of the menu icon; it fades in once something is in the cart */
.header-right { display: flex; align-items: center; gap: 1.1rem; }
.cart-link {
  position: relative; display: flex; align-items: center; color: var(--text);
  animation: cart-in .5s ease both;
}
.cart-link[hidden] { display: none; }
@keyframes cart-in { from { opacity: 0; transform: translateY(-3px); } }
.cart-link svg { width: 21px; height: 21px; display: block; }
.cart-count {
  position: absolute; top: -5px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--text); color: var(--bg);
  font-size: .58rem; font-weight: 500; line-height: 15px; text-align: center; letter-spacing: 0;
}
.cart-link.bump .cart-count { animation: cart-bump .35s ease; }
@keyframes cart-bump { 50% { transform: scale(1.35); } }
@media (max-width: 760px) { .header-right { grid-column: 3; grid-row: 1; justify-self: end; } }
@media (min-width: 761px) {
  .header-right { grid-column: 3; grid-row: 1; justify-self: end; gap: 1.3rem; }
  .cart-link svg { width: 24px; height: 24px; }
}

/* ADD TO CART under each shop price, styled like the COLOR / B&W buttons */
.add-to-cart {
  display: block; margin: .45rem auto 0; padding: .3rem 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 400; letter-spacing: .18em; margin-right: auto;
  padding-left: .18em; color: var(--muted); position: relative;
  transition: color .2s ease;
}
.add-to-cart:hover, .add-to-cart:focus-visible { color: var(--text); outline: none; }
.add-to-cart::after {
  content: ""; position: absolute; left: .18em; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, currentColor 30%, currentColor 70%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.add-to-cart:hover::after, .add-to-cart:focus-visible::after { opacity: 1; }

/* the logo screen: shown for a moment when the site is first opened (once
   per visit), then it fades away slow-fast-slow. Until it's gone, the home
   page's own entrance waits. */
.splash-screen { display: none; }
.splash .splash-screen {
  display: flex; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center; background: var(--bg);
  perspective: 700px; transition: opacity .75s cubic-bezier(.65, 0, .35, 1);
}
.splash-screen img { width: clamp(96px, 16vw, 150px); height: auto; animation: mark-spin 2.4s linear -1.2s infinite; backface-visibility: hidden; } /* (starts facing you) */
.splash.splash-out .splash-screen { opacity: 0; pointer-events: none; }
.splash .is-home *, .splash .is-home *::before, .splash .is-home *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .splash-screen img { animation: none; } }
/* the slide-in cart: a slim panel from the right over everything, moving
   slow-fast-slow; the page behind dims */
.cart-drawer { position: fixed; inset: 0; z-index: 140; visibility: hidden; transition: visibility 0s linear .62s; }
.cart-drawer.open { visibility: visible; transition-delay: 0s; }
.cart-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .6s cubic-bezier(.65, 0, .35, 1);
}
.cart-drawer.open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 88vw);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .35);
  padding: 1.1rem clamp(1rem, 4vw, 1.6rem) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(105%); transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.cart-drawer.open .cart-drawer-panel { transform: none; }
.cart-drawer.instant, .cart-drawer.instant * { transition: none !important; }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-size: 1rem; letter-spacing: .2em; padding-bottom: .9rem;
}
.cart-drawer-close { background: none; border: 0; color: var(--muted); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.cart-drawer-close:hover { color: var(--text); }
.cart-drawer .cart { max-width: none; width: 100%; }
.cart-drawer .cart-item { grid-template-columns: 64px 1fr auto; gap: .8rem; padding: .9rem 0; }
.cart-drawer .cart-item img { width: 64px; height: 64px; }
.cart-drawer .cart-item-title { font-size: .82rem; }
.cart-drawer .cart-empty { padding: 2.5rem 0 1rem; }
.cart-drawer-page { display: block; margin-top: 1.2rem; text-align: center; font-size: .72rem; letter-spacing: .2em; color: var(--muted); text-decoration: none; }
.cart-drawer-page:hover { color: var(--text); }
/* the cart page */
.cart { max-width: 640px; margin: 0 auto; }
.cart-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-item {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 1.1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cart-item img { width: 88px; height: 88px; object-fit: cover; box-shadow: var(--photo-shadow); }
.cart-item-title { font-family: var(--display); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; }
.cart-item-price { color: var(--muted); font-size: .85rem; letter-spacing: .08em; }
.cart-qty { display: inline-flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.cart-qty button, .cart-remove {
  background: none; border: 0; padding: .1rem .2rem; cursor: pointer; font: inherit; color: var(--muted);
}
.cart-qty button { font-size: 1.05rem; line-height: 1; }
.cart-qty button:hover, .cart-remove:hover { color: var(--text); }
.cart-qty span { min-width: 1.2em; text-align: center; font-size: .9rem; }
.cart-remove { font-size: .65rem; letter-spacing: .16em; align-self: start; margin-top: .2rem; }
.cart-summary { margin-top: 1.6rem; text-align: center; }
.cart-subtotal { display: flex; justify-content: space-between; font-size: .9rem; letter-spacing: .14em; }
.cart-note { color: var(--muted); font-size: .78rem; margin: .4rem 0 1.4rem; text-align: left; }
/* the checkout button in Shopify's signature Shop purple */
.shopify-checkout {
  display: block; width: 100%; min-height: 48px; padding: .8rem 1rem;
  background: #5a31f4; color: #fff; border: 0; border-radius: 6px; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  transition: background-color .2s ease;
}
.shopify-checkout:hover, .shopify-checkout:focus-visible { background: #4524db; outline: none; }
.cart-secure { color: var(--muted); font-size: .72rem; letter-spacing: .08em; margin: .6rem 0 0; }
.cart-soon { font-size: .8rem; letter-spacing: .14em; margin: .8rem 0 0; animation: cart-in .4s ease both; }
.cart-empty { text-align: center; padding: 2rem 0; }
.cart-empty p { font-family: var(--display); font-size: 1.1rem; letter-spacing: .1em; margin: 0 0 1.2rem; }
.cart-back { font-size: .8rem; letter-spacing: .18em; color: var(--muted); text-decoration: none; }
.cart-back:hover { color: var(--text); }
@media (max-width: 560px) {
  .add-to-cart { font-size: .62rem; letter-spacing: .14em; }
  .cart-item { grid-template-columns: 70px 1fr auto; gap: .8rem; }
  .cart-item img { width: 70px; height: 70px; }
}

/* ---------- Shop item details in the photo viewer ---------- */
/* no arrows or name; the photo leaves room for the box underneath */
.lb-panel { display: none; }
.lightbox.shop-mode .lb-prev, .lightbox.shop-mode .lb-next, .lightbox.shop-mode .lightbox-caption { display: none; }
.lightbox.shop-mode .lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox.shop-mode .lb-figure { display: flex; flex-direction: column; align-items: center; }
.lightbox.shop-mode .lb-figure img {
  max-width: calc(100vw - 3rem); max-height: calc(100vh - 21rem); max-height: calc(100svh - 21rem);
}
/* the item's other photos, stacked behind the main one (placed by the script) */
.lb-deck { position: absolute; z-index: 2; left: 0; top: 0; opacity: 0; pointer-events: none; } /* above the (hidden) main photo */
.lightbox.shop-mode .lb-figure .lb-deck img.lb-card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover;
  /* a dark edge all round each photo so the layers stand apart */
  box-shadow: 0 0 18px 2px rgba(0, 0, 0, .65), 0 24px 60px rgba(0, 0, 0, .45);
  transition: transform .72s cubic-bezier(.22, .8, .24, 1), filter .6s ease, opacity .35s ease;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
/* the arrows, taps and keys: the same move, slow-fast-slow (a bell curve) */
.lightbox.shop-mode .lb-figure .lb-deck.stepping img.lb-card { transition: transform .9s cubic-bezier(.37, 0, .63, 1), filter .9s ease, opacity .35s ease; }
/* while a thumb is dragging the stack, the photos follow it exactly */
.lightbox.shop-mode .lb-figure .lb-deck.dragging img.lb-card { transition: none; }
/* the arrow to the next photo, to the right of the stack */
.lightbox .lb-deck .lb-deck-next {
  position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; line-height: 1; color: #fff; opacity: .8;
  transition: opacity 1.2s ease; /* the arrows fade in / away gently at the ends */
}
.lightbox .lb-deck .lb-deck-next:hover { opacity: 1; transition-duration: .2s; }
/* on the photo itself (phones): faint, so it doesn't get in the way */
.lightbox .lb-deck .lb-deck-next.inside { border-radius: 50%; background: rgba(0, 0, 0, .18); font-size: 1.8rem; padding-bottom: 3px; opacity: .5; }
.lightbox .lb-deck .lb-deck-next.inside:hover { opacity: .7; }
.lightbox .lb-deck .lb-deck-next.hide { opacity: 0; cursor: default; } /* still catches extra clicks so they never close the viewer */
/* the box: the menu's translucent grey, blur and thin outline, no fades */
.lightbox.shop-mode .lb-panel {
  display: block; box-sizing: border-box; min-width: 260px;
  margin-top: 1.5rem; /* a quarter inch under the photo */
  padding: 1.1rem 1.25rem 1rem;
  background: var(--menu-bg);
  border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--menu-link); text-align: left;
  opacity: 0; /* faded in by the script as you scroll down */
  will-change: transform, opacity;
}
.lb-panel-title { font-family: var(--display); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.lb-panel-desc { margin: .35rem 0 .9rem; font-size: .85rem; line-height: 1.55; }
/* quantity | price | ADD TO CART: the button fills the rest of the row, so
   its right edge always lines up with the SIZE button's under it */
.lb-panel-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .65rem;
  padding-top: .75rem; border-top: 1px solid var(--menu-line);
}
.lightbox .lb-panel button {
  opacity: 1; padding: 0; font-family: var(--sans); font-weight: 400; font-size: inherit; line-height: 1; color: var(--menu-link); background: none; border: 0; cursor: pointer;
}
.lightbox .lb-panel button:hover { color: var(--text); }
.lb-qty { display: flex; align-items: center; gap: .55rem; font-size: .95rem; }
.lightbox .lb-qty button { font-size: 1.15rem; padding: .1rem .2rem; }
.lb-qty span { min-width: 1.3em; text-align: center; color: var(--text); }
/* the price keeps the same width whatever the size, so nothing shifts */
.lb-panel-price { font-size: .95rem; letter-spacing: .1em; color: var(--text); min-width: 3.7em; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox .lb-panel button.lb-panel-add {
  width: 100%; white-space: nowrap; overflow: hidden; text-align: center; /* always one line, never past the edge */
  font-size: .74rem; letter-spacing: .14em; padding: .55rem .4rem .55rem .54rem;
  border: 1px solid var(--menu-line); color: var(--text);
}
.lightbox .lb-panel button.lb-panel-add:hover { background: rgba(var(--glow), .35); }
/* SIZE: a long button like ADD TO CART along the bottom of the box; it opens
   a list of the sizes (with their prices) that rises up over the box */
.lb-size { position: relative; margin-top: .85rem; }
.lb-size + .lb-size { margin-top: .55rem; } /* PAPER, just under SIZE */
.lightbox .lb-panel button.lb-size-btn {
  width: 100%; display: flex; align-items: center; gap: .75rem;
  font-size: .74rem; letter-spacing: .18em; padding: .6rem .9rem;
  border: 1px solid var(--menu-line); color: var(--text);
}
.lightbox .lb-panel button.lb-size-btn:hover { background: rgba(var(--glow), .35); }
.lb-size-btn .lb-size-val { margin-left: auto; }
.lb-size-btn svg { width: 15px; height: 15px; flex: none; transition: transform .3s ease; }
.lb-size.open .lb-size-btn svg { transform: rotate(180deg); }
.lb-size-list {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.lb-size.open .lb-size-list { opacity: 1; transform: none; pointer-events: auto; }
.lightbox .lb-panel button.lb-size-opt {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: .7rem .9rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.lightbox .lb-panel button.lb-size-opt + .lb-size-opt { border-top: 1px solid var(--menu-line); }
.lightbox .lb-panel button.lb-size-opt:hover { background: rgba(var(--glow), .35); }
.lightbox .lb-panel button.lb-size-opt[aria-selected="true"] { color: var(--text); font-weight: 500; }
@media (max-width: 760px) {
  .lightbox.shop-mode .lb-stage { display: flex; }
  .lightbox.shop-mode .lb-figure { display: flex; }
  .lightbox.shop-mode .lb-figure img { grid-column: auto; max-width: calc(100vw - 1.5rem); max-height: calc(100svh - 21.5rem); }
  /* (never narrower than this, even under a tall, narrow photo, so ADD TO CART always fits) */
  .lightbox.shop-mode .lb-panel { margin-top: 1.5rem; min-width: min(300px, calc(100vw - 1.5rem)); padding: .95rem 1rem .9rem; }
  .lb-panel-row { gap: .45rem; }
  .lb-qty { gap: .45rem; }
  .lb-panel-price { min-width: 3.4em; letter-spacing: .06em; }
  .lightbox .lb-panel button.lb-panel-add { padding: .5rem .3rem .5rem .4rem; font-size: .66rem; letter-spacing: .1em; }
}

/* the photo sits in front of the details box when they meet */
.lightbox.shop-mode .lb-figure img { position: relative; z-index: 1; }
/* little arrow at the bottom hinting there's more below (shop items only) */
.lightbox .lb-more {
  display: none; position: fixed; z-index: 2; left: 50%; bottom: .4rem; transform: translateX(-50%);
  width: 2.6rem; height: 2.6rem; padding: .5rem; color: #fff;
}
.lightbox.shop-mode .lb-more { display: block; }
.lightbox.shop-mode.open .lb-more { opacity: 1; }
.lb-more svg { width: 100%; height: 100%; display: block; animation: lb-more-bob 1.8s ease-in-out infinite; }
@keyframes lb-more-bob { 50% { transform: translateY(4px); } }

/* in a shop item, scrolling past the details brings the page's footer up */
.lb-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--bg); color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 1.6rem clamp(1rem, 4vw, 3rem) 1.4rem;
  text-align: center; font-size: .8rem;
  opacity: 0; transform: translateY(100%); pointer-events: none;
}
.lb-foot .social { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: .8rem; }
.lb-foot .social-btn { color: var(--text); display: inline-flex; }
.lb-foot .social-btn svg { width: 22px; height: 22px; }
.lb-foot p { margin: 0; }

/* the header lifted above the photo viewer while a photo grows from / shrinks
   into a tile tucked under it; the dim layer matches the viewer's backdrop */
.site-header.lb-lift { z-index: 101; }
.header-dim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgba(12, 12, 12, .62);
}

/* in a shop item, the photo can be tapped to bring it back up big */
.lightbox.shop-mode .lb-figure img { cursor: zoom-in; }

/* ---------- Home: one photo fills the whole screen ---------- */
/* The photos fill the screen, running up behind the header (a see-through
   version of the usual bar, light or dark with the theme); scrolling down
   brings up the footer. --hdr is the header's height, measured by site.js. */
.site-main.full-show { flex: 1 0 auto; max-width: none; width: 100%; padding: 0; margin: calc(-1 * var(--hdr, 0px)) 0 0; }
body:has(section.show) .site-header::before { background: color-mix(in srgb, var(--bg) 55%, transparent); }
section.show { position: relative; height: 100vh; height: 100svh; background: #0b0b0b; color: #f4f3f0; overflow: hidden; }
.show-slides { position: absolute; inset: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; }
/* the new photo fades in over the old one (slow-fast-slow), so the screen never dips to black */
.show-slide.on { opacity: 1; z-index: 2; transition: opacity 1.6s cubic-bezier(.45, 0, .55, 1); }
.show-slide.was { opacity: 1; z-index: 1; }
.show-slide img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.07); -webkit-user-drag: none;
}
/* each photo drifts very slowly closer while it's showing, and keeps on
   drifting while the next one fades in over it */
.show-slide.on img, .show-slide.was img { transform: scale(1); transition: transform 9s cubic-bezier(.3, 0, .4, 1); }
@media (prefers-reduced-motion: reduce) { .show-slide img, .show-slide.on img, .show-slide.was img { transform: none; transition: none; } }
/* opening the site here: after the logo, the first photo fades up from
   black and the title and lines rise in */
.home-intro .full-show .show-slides { animation: show-in 1.8s cubic-bezier(.45, 0, .55, 1) both; }
.home-intro .full-show .show-bar { animation: home-rise-in .9s ease-out .9s both; }
.splash .full-show *, .splash .full-show *::before, .splash .full-show *::after { animation-play-state: paused !important; }
@keyframes show-in { from { opacity: 0; } }

.show-prev, .show-next {
  position: absolute; top: 50%; z-index: 3; margin-top: -2rem;
  width: 3.5rem; height: 4rem; padding: .5rem 1rem; border: 0; background: none; cursor: pointer;
  color: inherit; opacity: .5; transition: opacity .3s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.show-prev { left: calc(var(--edge) - 1rem); }
.show-next { right: calc(var(--edge) - 1rem); }
.show-prev:hover, .show-next:hover, .show-prev:focus-visible, .show-next:focus-visible { opacity: 1; }
.show-prev svg, .show-next svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.touch .show-prev, .touch .show-next { display: none; } /* swipe on phones and iPads */

.show-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  padding: 5rem var(--edge) calc(1.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.show-bar > * { pointer-events: auto; }
.show-title {
  font-size: .82rem; letter-spacing: .32em; text-transform: uppercase; text-decoration: none;
  line-height: 1.4; text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: opacity .45s cubic-bezier(.45, 0, .55, 1), transform .35s cubic-bezier(.45, 0, .55, 1);
  display: inline-block; transform-origin: left center;
  will-change: opacity, transform; /* (its own layer, so it's always repainted whole) */
}
/* hovering the name: it grows a little, to show it can be clicked */
/* (any-hover: an iPad with a trackpad counts too) */
@media (any-hover: hover) { .show-title:hover, .show-title:focus-visible { transform: scale(1.12); } }
.show-title.out { opacity: 0; }
/* iPad and desktop: the photo starts just under the header (at its full
   size; the bottom runs off the screen), and behind the header there's a
   strip of the same photo magnified a little, softened by the header's blur,
   so it looks like the photo carries on up underneath it. The header works
   as a magnifying glass: the strip is the part of the photo the header is
   over, magnified a little (1.08x) around the header's bottom edge (so it lines up with the
   photo there, nudged 20px right), and scrolling slides the photo
   through it. Above the photo's top edge it shows a mirrored copy of the
   photo, so there's always something under the glass. --s is how far the
   page is scrolled (set by site.js). */
.show-band { display: none; }
@media (min-width: 561px) {
  .show-slide .show-photo { top: var(--hdr, 0px); }
  /* the glass itself is pinned to the screen behind the header (like the
     header, so it can never lag behind it on a fast scroll); only the photo
     inside it moves with the scrolling */
  .show-band {
    /* (TRYING OUT the header that scrolls away: the strip goes with it;
       position: fixed when the header follows down the page) */
    display: block; position: absolute; top: 0; left: 0; right: 0; height: var(--hdr, 0px);
    overflow: hidden; z-index: 1; /* (over the photo itself, which can drift up under the header) */
  }
  .show-lens {
    position: absolute; left: 0; right: 0; top: calc(-1 * var(--s, 0px)); height: 100vh; height: 100svh;
    transform: scale(1.08); transform-origin: 50% calc(var(--s, 0px) + var(--hdr, 0px)); translate: 20px 0;
  }
  /* the copy sits exactly where the photo is and drifts with it */
  .show-drift { position: absolute; left: 0; right: 0; top: var(--hdr, 0px); height: 100%; transform: scale(1.07); }
  .show-slide.on .show-drift, .show-slide.was .show-drift { transform: scale(1); transition: transform 9s cubic-bezier(.3, 0, .4, 1); }
  .show-slide .show-band .show-drift img { transform: none; transition: none; }
  .show-slide .show-band .show-drift img.show-mirror { top: -100%; transform: scaleY(-1); }
}
@media (min-width: 561px) and (prefers-reduced-motion: reduce) {
  .show-drift, .show-slide.on .show-drift, .show-slide.was .show-drift { transform: none; transition: none; }
}
.show-dots { display: flex; gap: .45rem; }
.show-dot { width: 1.9rem; height: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.show-dot i { display: block; position: relative; width: 100%; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.show-dot i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.show-dot.done i::after { transform: none; }
/* the current photo's line fills up until the next photo comes */
.show-dot.now i::after { animation: show-fill var(--show-time, 6s) linear forwards; }
section.show.paused .show-dot.now i::after { animation-play-state: paused; }
@keyframes show-fill { to { transform: none; } }
@media (max-width: 560px) {
  .show-bar { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .show-dots { gap: .35rem; }
  .show-dot { width: 1.5rem; }
}

/* ---------- Photo viewer: a glow of the photo's own colours behind it ---------- */
@property --g1 { syntax: '<color>'; inherits: false; initial-value: rgba(0, 0, 0, 0); }
@property --g2 { syntax: '<color>'; inherits: false; initial-value: rgba(0, 0, 0, 0); }
@property --g3 { syntax: '<color>'; inherits: false; initial-value: rgba(0, 0, 0, 0); }
.lb-glow {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none; /* over the dimmed page, under the photo */
  background:
    radial-gradient(ellipse 58% 70% at 22% 45%, var(--g1), transparent 74%),
    radial-gradient(ellipse 58% 70% at 78% 55%, var(--g2), transparent 74%),
    radial-gradient(ellipse 75% 65% at 50% 50%, var(--g3), transparent 78%);
  opacity: 0;
  /* fades in and out with the viewer, and from one photo's colours to the next (slow-fast-slow) */
  transition: opacity .7s cubic-bezier(.45, 0, .55, 1), --g1 1.4s cubic-bezier(.45, 0, .55, 1), --g2 1.4s cubic-bezier(.45, 0, .55, 1), --g3 1.4s cubic-bezier(.45, 0, .55, 1);
}
.lightbox.open .lb-glow.on { opacity: .62; }
.lightbox.instant .lb-glow { transition: none; }
@media (prefers-reduced-motion: reduce) { .lb-glow { transition: opacity .3s ease; } }

/* ---------- Draw (the hidden drawing page, from the footer's spinning mark) ---------- */
a.footer-mark-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.footer-mark-wrap:hover .footer-mark { animation-duration: 2.2s; } /* spins a little faster, to show it does something */
.paint {
  /* the drawing tools down the left, the picture in the middle, colour and
     actions down the right: everything in view at once, no scrolling */
  display: flex; justify-content: center; align-items: stretch; gap: 1.4rem;
  height: calc(100vh - var(--hdr, 90px) - 2.5rem); height: calc(100svh - var(--hdr, 90px) - 2.5rem); min-height: 520px;
  margin-top: .25rem;
}
.paint-bar { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; flex: none; width: 84px; }
.paint-group { display: grid; grid-template-columns: repeat(2, 38px); gap: 6px; justify-content: space-between; }
.paint button, .paint-open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 3px;
  background: none; color: var(--muted); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.paint button:hover, .paint-open:hover { color: var(--text); border-color: var(--line); }
.paint button[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.paint button:disabled { opacity: .3; cursor: default; border-color: transparent; }
.paint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paint-open input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.paint-open { position: relative; }
.paint button.paint-save { grid-column: 1 / -1; width: 100%; font-size: .68rem; letter-spacing: .22em; padding-left: .22em; color: var(--text); border-color: var(--line); }
.paint .paint-save svg { display: none; }
.paint button.paint-save:hover { background: rgba(var(--glow), .15); }
/* colour: the current colour (tap it for any colour) over a grid of swatches */
.paint-colors { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.paint-current { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .7); cursor: pointer; overflow: hidden; flex: none; }
.paint-current input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.paint-current span { position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.paint-swatches { display: grid; grid-template-columns: repeat(4, 18px); gap: 4px; }
.paint .paint-swatches button { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(128, 128, 128, .45); }
.paint .paint-swatches button:hover { transform: scale(1.12); border-color: var(--text); }
.paint .paint-swatches button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.paint-sliders { display: flex; flex-direction: column; gap: .6rem; }
.paint-sliders label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .2rem; font-size: .56rem; letter-spacing: .16em; color: var(--muted); }
.paint-sliders input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; accent-color: var(--text); }
.paint-sliders output { font-variant-numeric: tabular-nums; color: var(--text); font-size: .62rem; }
.paint .paint-sliders .paint-solid { align-self: flex-start; }
/* the picture */
.paint-stage {
  /* wide (8:5), as tall as the space allows (and never past the edge of the screen) */
  position: relative; flex: 0 1 auto; height: 100%; aspect-ratio: 8 / 5; min-width: 0; max-width: calc(100% - 2 * 84px - 2.8rem);
  /* (a soft grey round the picture when it's zoomed out) */
  background: color-mix(in srgb, var(--text) 9%, var(--bg)); border: 1px solid var(--line); overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
  box-shadow: var(--photo-shadow);
  cursor: crosshair;
}
/* the picture: its layers stacked, zoomed and moved as one */
.paint-world { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  /* see-through parts show as a light checkerboard */
  background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px; pointer-events: none; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.paint-world canvas { position: absolute; left: 0; top: 0; display: block; }
.paint-layers { position: absolute; inset: 0; }
.paint-guide { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(47, 127, 214, .7); }
.paint-guide[hidden] { display: none; }
.paint-stage[data-tool="brush"], .paint-stage[data-tool="eraser"], .paint-stage[data-tool="smudge"], .paint-stage[data-tool="blur"], .paint-stage[data-tool="tone"] { cursor: none; }
.paint-stage[data-tool="hand"], .paint-stage.space { cursor: grab; }
.paint-stage.panning { cursor: grabbing; }
.paint-stage.corner-nwse:not(.panning) { cursor: nwse-resize !important; }
.paint-stage.corner-nesw:not(.panning) { cursor: nesw-resize !important; }
.paint-stage.picking:not(.panning) { cursor: crosshair; } /* (Alt / Option: pick a colour) */
.paint-stage[data-tool="text"] { cursor: text; }
@media (hover: none) { .paint-stage[data-tool] { cursor: default; } }
/* zoom: − 100% + in the corner */
.paint-zoom {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center;
  background: var(--menu-bg); border: 1px solid var(--menu-line); border-radius: 3px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.paint .paint-zoom button { width: 30px; height: 28px; font-size: 1rem; color: var(--menu-link); border: 0; border-radius: 0; }
.paint .paint-zoom button.paint-zoom-val { width: auto; min-width: 3.4rem; padding: 0 .4rem; font-size: .62rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.paint .paint-zoom button:hover { color: var(--text); background: rgba(var(--glow), .15); }
/* (above SAVE, in the right-hand column) */
.paint-right .paint-zoom {
  position: static; grid-column: 1 / -1; justify-content: space-between;
  background: none; border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.paint .paint-right .paint-zoom button { width: 26px; height: 30px; }
.paint .paint-right .paint-zoom button.paint-zoom-val { flex: 1; min-width: 0; padding: 0; font-size: .58rem; letter-spacing: .06em; }
/* what you can do with a selection */
.paint-selbar {
  position: absolute; left: 50%; top: 8px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 3px; max-width: calc(100% - 16px);
  background: var(--menu-bg); border: 1px solid var(--menu-line); border-radius: 3px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.paint-selbar[hidden] { display: none; }
/* (out of the way while a selection is being resized) */
.paint-selbar { transition: opacity .3s cubic-bezier(.45, 0, .55, 1); }
.paint-selbar.away { opacity: 0; pointer-events: none; }
/* right-click a layer: SELECT */
.paint-lmenu {
  position: fixed; z-index: 175; min-width: 120px; padding: .3rem;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  animation: pb-in .2s cubic-bezier(.45, 0, .55, 1);
}
.paint-lmenu[hidden] { display: none; }
.paint-lmenu button {
  display: block; width: 100%; padding: .55rem .7rem; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: .64rem; letter-spacing: .2em; color: var(--menu-link);
}
.paint-lmenu button:hover { color: var(--text); background: rgba(var(--glow), .15); }
.paint .paint-selbar button { width: auto; height: 28px; padding: 0 .6rem; font-size: .6rem; letter-spacing: .16em; color: var(--menu-link); }
.paint .paint-selbar button:hover { color: var(--text); background: rgba(var(--glow), .15); }
/* typing on the picture */
.paint-text {
  position: absolute; z-index: 2; min-width: 1ch; padding: 0; margin: 0; outline: 1px dashed rgba(47, 127, 214, .8); outline-offset: 2px;
  white-space: pre; line-height: 1.2; cursor: text; -webkit-user-select: text; user-select: text; caret-color: currentColor;
}
/* phones: two slim columns, one tool per row, so the picture keeps its width */
@media (max-width: 560px) {
  .paint { gap: .55rem; }
  .paint-bar { width: 36px; gap: .6rem; }
  .paint-group { grid-template-columns: 36px; gap: 5px; }
  .paint button, .paint-open { width: 36px; height: 36px; }
  .paint-stage { flex: 1 1 auto; aspect-ratio: auto; max-width: none; }
  .paint-current { width: 34px; height: 34px; }
  .paint-swatches { grid-template-columns: repeat(2, 16px); gap: 4px; }
  .paint .paint-swatches button { width: 16px; height: 16px; }
  /* size and opacity: standing up */
  .paint-sliders { gap: .45rem; }
  .paint-sliders label { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .46rem; letter-spacing: .08em; }
  .paint-sliders label span { order: 3; }
  .paint-sliders label output { order: 1; font-size: .58rem; }
  .paint-sliders input[type="range"] { order: 2; width: 62px; height: 20px; margin: 21px 0; transform: rotate(-90deg); }
  .paint .paint-swatches button:nth-child(n+9) { display: none; } /* (the colour circle has every other colour) */
  .paint button.paint-save { width: 36px; padding: 0; }
  .paint .paint-save svg { display: block; }
  .paint .paint-save span { display: none; }
}
/* the footer mark: each of the 5 clicks it takes gives it a little bump */
@keyframes mark-bump { 40% { transform: scale(1.35); } }
.footer-mark-wrap.bump { animation: mark-bump .35s cubic-bezier(.45, 0, .55, 1); }

/* nothing on the drawing page (or the footer mark) gets highlighted by quick clicks */
.paint, .footer-mark-wrap, .footer-mark { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.footer-mark { -webkit-user-drag: none; }

/* BRUSHES: the list that opens beside the brush tool */
.paint-left { position: relative; }
.paint [data-tool="brush"] { position: relative; }
.paint [data-tool="brush"]::after { /* a tiny corner mark: there's a list here */
  content: ""; position: absolute; right: 3px; bottom: 3px;
  border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .7;
}
.paint-brushes {
  position: absolute; left: calc(100% + 10px); z-index: 5; width: 168px; padding: .35rem;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: pb-in .25s cubic-bezier(.45, 0, .55, 1);
}
.paint-brushes[hidden] { display: none; }
@keyframes pb-in { from { opacity: 0; transform: translateX(-6px); } }
.paint .paint-brushes button {
  width: 100%; height: 34px; justify-content: flex-start; gap: .7rem; padding: 0 .6rem;
  font-size: .62rem; letter-spacing: .18em; color: var(--menu-link);
}
.paint .paint-brushes button[aria-checked="true"] { color: var(--text); background: rgba(var(--glow), .18); border-color: transparent; }
/* a little sample of each brush's mark */
.paint-brushes i { flex: none; width: 34px; height: 10px; display: block; color: currentColor; }
.pb-round { border-radius: 5px; background: currentColor; height: 6px !important; }
.pb-marker { background: currentColor; height: 7px !important; }
.pb-pencil { height: 2px !important; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px); opacity: .85; }
.pb-spray { background: radial-gradient(currentColor 0.8px, transparent 1.2px) 0 0 / 4px 4px; border-radius: 50%; opacity: .9; }
.pb-calligraphy { height: 9px !important; background: currentColor; clip-path: polygon(0 70%, 12% 100%, 100% 30%, 88% 0); }
.pb-highlighter { height: 10px !important; background: #f5d33a; opacity: .75; }
@media (max-width: 560px) { .paint-brushes { left: calc(100% + 6px); width: 150px; } }
/* light & dark: a little sample of each */
.paint-brushes i.pt-dodge, .paint-brushes i.pt-burn { width: 34px; height: 12px; border-radius: 2px; }
.pt-dodge { background: linear-gradient(90deg, #6b6b6b, #e9e9e9); }
.pt-burn { background: linear-gradient(90deg, #9a9a9a, #1e1e1e); }
/* FILLED: a switch at the foot of the shapes list */
.paint .paint-brushes .paint-solid { position: relative; margin-top: 5px; }
.paint-brushes .paint-solid::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: -4px; height: 1px; background: var(--menu-line); }
.paint-brushes .paint-solid[aria-checked="true"] i.ps-fill { background: currentColor !important; } /* (filled in when it's on) */
/* ADJUST: a panel of sliders beside the tools */
.paint-adjust {
  position: absolute; left: calc(100% + 10px); z-index: 6; width: 236px; max-height: 100%; overflow: auto; padding: .6rem .7rem .55rem;
  background: var(--menu-bg); border: 1px solid var(--menu-line); color: var(--menu-link);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: pb-in .25s cubic-bezier(.45, 0, .55, 1); overscroll-behavior: contain;
}
.paint-adjust[hidden] { display: none; }
.pa-title { font-size: .62rem; letter-spacing: .22em; margin-bottom: .45rem; }
.pa-title span { letter-spacing: .08em; opacity: .6; font-size: .58rem; margin-left: .3rem; text-transform: none; }
.pa-list { display: flex; flex-direction: column; gap: .32rem; }
.pa-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .3rem; font-size: .54rem; letter-spacing: .15em; cursor: default; }
.pa-row output { font-variant-numeric: tabular-nums; font-size: .6rem; letter-spacing: 0; min-width: 2.2em; text-align: right; }
.pa-row input[type="range"] { grid-column: 1 / -1; width: 100%; height: 16px; margin: 0; accent-color: var(--menu-link); }
.pa-acts { display: flex; gap: 4px; margin-top: .55rem; }
.paint .pa-acts button { flex: 1; width: auto; height: 28px; font-size: .56rem; letter-spacing: .14em; color: var(--menu-link); border-color: var(--menu-line); }
.paint .pa-acts button[data-adj-act="done"] { background: var(--menu-link); color: var(--bg); border-color: var(--menu-link); }
.paint .paint-adjust-btn[aria-expanded="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
@media (max-width: 560px) { .paint-adjust { left: calc(100% + 6px); width: 196px; padding: .5rem .55rem; } .pa-list { gap: .2rem; } }
/* SAVE: PNG or JPEG */
.paint-savemenu {
  position: absolute; right: calc(100% + 10px); z-index: 5; width: 200px; padding: .35rem; display: flex; flex-direction: column; gap: 2px;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: pl-in .25s cubic-bezier(.45, 0, .55, 1);
}
.paint-savemenu[hidden] { display: none; }
.paint .paint-savemenu button {
  width: 100%; height: auto; padding: .5rem .6rem; flex-direction: column; align-items: flex-start; gap: .2rem;
  font-size: .66rem; letter-spacing: .2em; color: var(--menu-link); text-align: left;
}
.paint .paint-savemenu button:hover { color: var(--text); background: rgba(var(--glow), .15); }
@media (max-width: 560px) { .paint-savemenu { right: calc(100% + 6px); width: 170px; } }
/* the brush-size ring (it follows the mouse, or a hovering Apple Pencil) */
.paint-ring { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; border: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.paint-ring[hidden] { display: none; }
/* the brush, shown in the middle while its size or opacity slider moves */
.paint-preview {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .8);
  background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  opacity: 0; transition: opacity .35s cubic-bezier(.45, 0, .55, 1);
}
.paint-preview.on { opacity: 1; transition-duration: .15s; }
.paint-preview i { position: absolute; inset: 0; border-radius: 50%; }
/* a colour being dragged from the swatches: it drops in and spreads */
.paint .paint-swatches button, .paint .paint-recent button { touch-action: none; }
.paint-blob {
  position: fixed; left: 0; top: 0; z-index: 180; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0, 0, 0, .35);
}
.paint-blob.over { scale: 1.25; transition: scale .2s cubic-bezier(.45, 0, .55, 1); }
.paint-blob.plop { animation: blob-plop .26s cubic-bezier(.45, 0, .55, 1) forwards; }
.paint-blob.gone { animation: blob-gone .26s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes blob-plop { 40% { scale: 1.5; } to { scale: .2; opacity: 0; } }
@keyframes blob-gone { to { scale: .3; opacity: 0; } }
/* the X that closes a selection, on its top left corner */
.paint .paint-selx {
  position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #141414; border: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.paint .paint-selx:hover { color: #000; background: #fff; border-color: #000; transform: scale(1.1); }
.paint .paint-selx svg { width: 12px; height: 12px; stroke-width: 2.2; }
.paint-selx[hidden] { display: none !important; }

/* the label beside the mouse over a drawing tool */
.paint-tip {
  position: fixed; left: 0; top: 0; z-index: 170; max-width: 220px; padding: .4rem .6rem;
  font-size: .68rem; line-height: 1.35; letter-spacing: .04em; color: var(--menu-link);
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  pointer-events: none; opacity: 0; transition: opacity .18s cubic-bezier(.45, 0, .55, 1);
}
.paint-tip.on { opacity: 1; transition-delay: .25s; }

/* BABBA!!! (the footer mark, clicked on the drawing page) */
.babba {
  position: fixed; inset: 0; z-index: 160; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0); transition: background .5s ease;
}
.babba.in { background: rgba(0, 0, 0, .35); }
.babba.out { background: rgba(0, 0, 0, 0); transition-duration: .4s; }
.babba figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(30px) scale(.8);
  transition: transform .6s cubic-bezier(.34, 1.4, .64, 1), opacity .4s ease;
}
.babba.in figure { opacity: 1; transform: none; }
/* leaving: it zooms off to the left, quickly */
.babba.out figure { opacity: 1; transform: translateX(-140vw) scale(.7) rotate(-12deg); transition: transform .5s cubic-bezier(.6, 0, .9, .45); }
.babba img { display: block; max-height: 66vh; max-width: 86vw; width: auto; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.babba figcaption {
  margin-top: 1rem; font-family: var(--display); font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 500;
  letter-spacing: .14em; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}

/* ---- Draw: the second colour, recent colours, layers, shape and font lists ---- */
.paint-pair { position: relative; width: 52px; height: 46px; flex: none; }
.paint-pair .paint-current { position: absolute; left: 0; top: 0; z-index: 1; }
.paint-second { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .7); overflow: hidden; cursor: pointer; }
.paint-second input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.paint-second span { position: absolute; inset: 2px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.paint .paint-swap { position: absolute; right: -6px; top: -4px; width: 22px; height: 22px; }
.paint .paint-swap svg { width: 14px; height: 14px; }
.paint-recent { display: grid; grid-template-columns: repeat(4, 18px); gap: 4px; min-height: 18px; }
.paint .paint-recent button { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .45); }
.paint .paint-recent button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.paint button.paint-layers-btn { grid-column: 1 / -1; width: 100%; gap: .45rem; font-size: .62rem; letter-spacing: .2em; color: var(--muted); border-color: var(--line); }
.paint button.paint-layers-btn svg { width: 16px; height: 16px; }
.paint button.paint-layers-btn[aria-expanded="true"] { color: var(--text); background: rgba(var(--glow), .15); }
.paint-right { position: relative; }
.paint-layerpanel {
  position: absolute; right: calc(100% + 10px); z-index: 5; width: 200px; padding: .45rem;
  background: var(--menu-bg); border: 1px solid var(--menu-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: pl-in .25s cubic-bezier(.45, 0, .55, 1);
}
.paint-layerpanel[hidden] { display: none; }
.pl-empty { padding: .6rem .4rem; font-size: .6rem; letter-spacing: .06em; line-height: 1.5; color: var(--menu-link); opacity: .75; }
@keyframes pl-in { from { opacity: 0; transform: translateX(6px); } }
.pl-title { font-size: .58rem; letter-spacing: .24em; color: var(--muted); padding: .15rem .3rem .45rem; }
.pl-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.pl-row { display: flex; align-items: center; gap: 2px; border-radius: 3px; }
.pl-row.on { background: rgba(var(--glow), .18); }
.paint .pl-row button { height: 32px; color: var(--menu-link); border: 0; }
.paint .pl-row .pl-eye { width: 32px; flex: none; }
.paint .pl-row .pl-eye svg { width: 16px; height: 16px; }
.paint .pl-row .pl-name { flex: 1; width: auto; justify-content: flex-start; padding: 0 .4rem; font-size: .66rem; letter-spacing: .12em; }
.paint .pl-row.on .pl-name { color: var(--text); }
.pl-acts { display: flex; justify-content: space-between; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--menu-line); }
.paint .pl-acts button { width: 36px; height: 30px; color: var(--menu-link); }
.paint .pl-acts button svg { width: 16px; height: 16px; }
/* samples in the shape and font lists */
.paint-brushes i[class^="ps-"] { width: 22px; height: 16px; border: 1.6px solid currentColor; background: none; box-sizing: border-box; }
.ps-rounded { border-radius: 5px; }
.ps-ellipse { border-radius: 50%; }
.ps-triangle { border: 0 !important; background: currentColor !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .85; }
.ps-star { border: 0 !important; background: currentColor !important; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: .85; }
.ps-arrow { border: 0 !important; height: 2px !important; background: currentColor !important; position: relative; }
.ps-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.paint-brushes i.pf { width: auto; height: auto; font-style: normal; font-size: .95rem; letter-spacing: 0; min-width: 28px; }
/* tools with a list: a tiny corner mark */
.paint [data-tool="shape"], .paint [data-tool="text"], .paint [data-tool="tone"] { position: relative; }
.paint [data-tool="shape"]::after, .paint [data-tool="text"]::after, .paint [data-tool="tone"]::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .7;
}
.paint .paint-mirror[aria-pressed="true"] svg path:not(:first-child) { fill: currentColor; }
/* phones: one tool per row, slimmer; the second colour tucked on the first */
@media (max-width: 560px) {
  .paint-left .paint-group { gap: 3px; }
  .paint-left button { width: 34px !important; height: 28px !important; }
  .paint-pair { width: 36px; height: 40px; }
  .paint-pair .paint-current { width: 32px; height: 32px; }
  .paint-second { width: 18px; height: 18px; right: -2px; }
  .paint .paint-swap, .paint-recent { display: none; }
  .paint .paint-swatches button:nth-child(n+7) { display: none; }
  .paint-sliders input[type="range"] { width: 54px; margin: 17px 0; }
  .paint button.paint-layers-btn { width: 36px; padding: 0; }
  .paint-right .paint-group[aria-label="Actions"] { gap: 3px; }
  .paint-right .paint-group[aria-label="Actions"] > * { height: 33px; }
  .paint button.paint-layers-btn span { display: none; }
  .paint-layerpanel { right: calc(100% + 6px); width: 180px; }
  .paint-zoom { right: 4px; bottom: 4px; }
  .paint .paint-zoom button { width: 26px; height: 26px; }
  .paint .paint-zoom button.paint-zoom-val { min-width: 2.8rem; font-size: .56rem; }
}
/* layers: rename in place, drag by the grip to reorder */
.pl-grip { flex: none; width: 26px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; }
.pl-grip svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pl-row.dragging { position: relative; z-index: 1; background: var(--menu-bg); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.pl-row.dragging .pl-grip { cursor: grabbing; }
.pl-input {
  flex: 1; min-width: 0; height: 28px; padding: 0 .4rem; font: inherit; font-size: .66rem; letter-spacing: .08em;
  color: var(--text); background: rgba(var(--glow), .12); border: 1px solid var(--menu-line); border-radius: 2px; outline: none;
  -webkit-user-select: text; user-select: text;
}
/* the feather brush's sample: a soft cloud */
.pb-feather { height: 12px !important; border-radius: 50%; background: radial-gradient(ellipse at center, currentColor 0%, transparent 70%); opacity: .9; }

/* ---------- Projects: the paint button, floating in the bottom right corner ---------- */
.pj-paint {
  position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); z-index: 40;
  display: flex; padding: 9px; border-radius: 50%; color: var(--text); -webkit-tap-highlight-color: transparent;
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .25s ease, opacity .25s ease;
}
.pj-paint svg { width: 26px; height: 26px; display: block; }
.pj-paint:hover, .pj-paint:focus-visible { transform: scale(1.1); outline: none; }

/* ---------- Darkroom: making the black and white pieces ---------- */
.dr .dr-stage { flex: 1 1 auto; aspect-ratio: auto; max-width: none; cursor: grab; }
.dr .dr-stage[data-drtool="select"], .dr .dr-stage[data-drtool="lasso"], .dr .dr-stage[data-drtool="ellipse"], .dr .dr-stage[data-drtool="triangle"], .dr .dr-stage[data-drtool="poly"] { cursor: crosshair; }
.dr .dr-stage.drop { outline: 2px dashed var(--text); outline-offset: -8px; }
/* the piece: a white frame (it's only ever white) round the square window */
.dr-piece { position: absolute; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.dr-win, .dr-empty {
  position: absolute; left: calc(52 / 2210 * 100%); top: calc(52 / 2576 * 100%);
  width: calc(2106 / 2210 * 100%); height: calc(2106 / 2576 * 100%); display: block;
}
.dr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: #ececec; color: #3d3b37; cursor: pointer; text-align: center;
  font-size: .72rem; letter-spacing: .26em; padding-left: .26em; transition: background .25s ease;
}
.dr-empty:hover { background: #e2e2e2; }
.dr-empty[hidden] { display: none; }
.dr-empty small { font-size: .6rem; letter-spacing: .12em; opacity: .6; }
.dr-empty input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dr-ghost, .dr-sel { position: absolute; left: 0; top: 0; pointer-events: none; }
.dr-ghost { opacity: 0; transition: opacity .25s cubic-bezier(.45, 0, .55, 1); }
.dr-ghost.on { opacity: 1; transition-duration: .1s; }
.dr .paint-selx, .dr .paint-selbar { z-index: 4; }
.dr .paint-selbar.t-mode [data-drsel="invert"] { display: none; } /* (FIT's box: just DONE) */
/* the sliders open to the left of the right-hand column */
.dr .dr-adjust { left: auto; right: calc(100% + 10px); }
.dr .paint-right .paint-open { cursor: pointer; }
@media (max-width: 560px) { .dr .dr-adjust { right: calc(100% + 6px); } }
/* the pointer shows what a drag will do: size (at a corner), turn (just outside one), move (inside) */
.dr .dr-stage[data-hover="nwse"] { cursor: nwse-resize; }
.dr .dr-stage[data-hover="nesw"] { cursor: nesw-resize; }
.dr .dr-stage[data-hover="ew"] { cursor: ew-resize; }
.dr .dr-stage[data-hover="ns"] { cursor: ns-resize; }
.dr .dr-stage[data-hover="move"] { cursor: move; }
.dr .dr-stage[data-hover="turn"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fff' stroke-width='4'%3E%3Cpath d='M18.5 12a6.5 6.5 0 1 1-1.9-4.6'/%3E%3Cpath d='M17.5 3.5v4h-4'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M18.5 12a6.5 6.5 0 1 1-1.9-4.6'/%3E%3Cpath d='M17.5 3.5v4h-4'/%3E%3C/g%3E%3C/svg%3E") 12 12, alias;
}
/* LEVELS */
.dr-levels .lv-hist { display: block; width: 100%; height: 90px; margin: .2rem 0 .15rem; background: rgba(0, 0, 0, .18); color: var(--menu-link); }
.lv-track { position: relative; height: 14px; cursor: ew-resize; touch-action: none; }
.lv-track i {
  position: absolute; top: 2px; width: 0; height: 0; translate: -50% 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #808080;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7));
}
.lv-track i.lv-b { border-bottom-color: #000; }
.lv-track i.lv-w { border-bottom-color: #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
.lv-nums { display: flex; justify-content: space-between; font-size: .6rem; font-variant-numeric: tabular-nums; margin: .1rem 0 .4rem; }
.lv-sub { font-size: .54rem; letter-spacing: .15em; margin-top: .2rem; }
.lv-grad { height: 9px; margin-top: .3rem; background: linear-gradient(to right, #000, #fff); border: 1px solid var(--menu-line); }
/* CURVES */
.dr-curves .cv-graph { display: block; width: 100%; margin: .25rem 0 .1rem; touch-action: none; cursor: crosshair; }
/* the little curved arrow by the pointer, where a drag turns the photo */
.dr-turn {
  position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #141414; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  opacity: 0; scale: .6; transition: opacity .18s cubic-bezier(.45, 0, .55, 1), scale .18s cubic-bezier(.45, 0, .55, 1);
}
.dr-turn.on { opacity: 1; scale: 1; }
.dr-turn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ADJUSTMENTS: ADJUST, LEVELS and CURVES as tabs along the top */
.dr-tabs { display: flex; gap: 2px; margin: -.1rem 0 .6rem; border-bottom: 1px solid var(--menu-line); }
.paint .dr-tabs button {
  flex: 1; width: auto; height: 28px; border: 0; border-radius: 0; padding: 0; background: none;
  font-size: .56rem; letter-spacing: .16em; color: var(--menu-link); opacity: .6; position: relative;
}
.paint .dr-tabs button:hover { opacity: .9; background: none; border-color: transparent; }
.paint .dr-tabs button[aria-selected="true"] { opacity: 1; color: var(--text); }
.paint .dr-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; background: currentColor; }
.dr-all .dr-tab-body > .pa-title, .dr-all .dr-tab-body > .pa-acts { display: none; }
.dr-all { width: 250px; }
/* the button's longer name, a touch tighter */
@media (min-width: 561px) {
  .dr .paint-right [data-dract="adjust"] span { letter-spacing: .08em; font-size: .58rem; }
  .dr .paint-right [data-dract="adjust"] svg { display: none; }
}
/* holding space: a hand that grabs */
.dr .dr-stage.space { cursor: grab; }
.dr .dr-stage.grabbing { cursor: grabbing; }
/* Arriving on the page (and scrolling down it): titles, buttons and photos
   rise gently into place, one after another, slow-fast-slow. Only what's
   on the page when it opens; nothing moves for anyone who prefers less motion. */
.rv { opacity: 0; translate: 0 14px; }
.rv.rv-in {
  opacity: 1; translate: 0 0;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
  transition-delay: var(--rv-delay, 0s);
}
/* keyboard focus on photos: a fine line around them */
.gallery-item a:focus-visible, .shop-photo:focus-visible { outline: 1px solid var(--text); outline-offset: 5px; }

/* =================================================================
   REDESIGN: the shared look for every page. Editorial page heads (a
   big thin title on the left, its buttons on the right, a fine line
   under them), captions set out like a magazine's, the about section
   with the photo beside the writing, and the name in the footer.
   ================================================================= */

/* small spaced-out capitals used for labels, links and buttons */
:root { --label: .7rem; --label-track: .24em; }

/* ---- Page heads (Photography, Projects, Shop, Cart) ---- */
.site-main:has(> .page-head) { padding-top: clamp(2.25rem, 6vw, 5rem); }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem 3rem;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.page-head .page-title {
  margin: 0 0 0 -.05em; text-align: left;
  font-weight: 200; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1; letter-spacing: .08em;
}
.page-head-tools { display: flex; align-items: center; gap: 2.5rem; padding-bottom: .35rem; }
.page-head .gallery-filter { margin: 0; justify-content: flex-start; gap: 2.2rem; }
.page-head .gallery-filter button { font-size: .74rem; letter-spacing: var(--label-track); margin-right: calc(-1 * var(--label-track)); }
.page-head .grid-size { margin: 0; gap: .25rem; }
@media (max-width: 700px) {
  .page-head { flex-direction: column; align-items: stretch; gap: 1.4rem; }
  .page-head-tools { justify-content: space-between; gap: 1rem; }
}

/* ---- Photo grids ---- */
.gallery-grid { gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 2.6vw, 2.5rem); }
.gallery-item a:hover img { transform: scale(1.04); opacity: 1; }
/* the name on the left, its number on the right, under each photo */
.gallery-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  text-align: left; padding: 0; margin-top: .85rem;
  font-size: .66rem; font-weight: 400; letter-spacing: .22em;
}
.gallery-num { font-variant-numeric: tabular-nums; letter-spacing: .12em; opacity: .7; }
@media (max-width: 560px) {
  .gallery-grid { gap: 1.9rem .9rem; }
  .gallery-title { font-size: .54rem; letter-spacing: .14em; margin-top: .5rem; padding: 0; }
}

/* ---- Cart: in line with its title, on the left ---- */
.page-head ~ .cart { margin: 0; max-width: 720px; }
.page-head ~ .cart .cart-empty { text-align: left; padding-top: .5rem; }
.page-head ~ .cart .cart-empty p { font-weight: 200; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .06em; }

/* ---- Home: the photo's name big and thin, with which one it is (01 / 08) ---- */
.show-caption { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.show-count { font-size: .64rem; letter-spacing: .32em; color: rgba(244, 243, 240, .65); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.show-count b { font-weight: 400; color: #f4f3f0; }
.show-title { font-size: clamp(1.35rem, 2.6vw, 2.4rem); font-weight: 200; letter-spacing: .14em; line-height: 1.15; }
@media (any-hover: hover) { .show-title:hover, .show-title:focus-visible { transform: scale(1.05); } }

/* ---- About (under the home page's photos): the photo beside the writing ---- */
.home-about { border-top: 1px solid var(--line); scroll-margin-top: 0; }
.home-about .hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 6vw, 6rem);
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 7.5rem) clamp(1rem, 4vw, 3rem);
  overflow: visible;
}
.home-about .hero-photo { width: 100%; height: auto; min-height: 0; box-shadow: var(--photo-shadow); }
/* the whole photo, uncropped */
.home-about .hero-photo img { position: relative; inset: auto; display: block; width: 100%; height: auto; object-fit: contain; }
.home-about .hero-text { align-self: center; padding: 0; max-width: 34rem; }
/* the opening line big and thin, the rest at reading size */
.home-about .bio p:first-child { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.5; margin-bottom: 1.5rem; }
.home-about .bio p { color: color-mix(in srgb, var(--text) 84%, var(--bg)); }
.home-about .bio p:first-child, .home-about .bio strong { color: var(--text); }
.home-about .bio p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .home-about .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.75rem; padding-bottom: 3.25rem; }
}

/* ---- Footer: the name above the links and the copyright line ---- */
.footer-brand {
  display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 1.4rem;
  text-decoration: none; color: var(--text); font-size: 1.2rem; font-weight: 400; letter-spacing: .07em; line-height: 1;
}
.footer-brand small { font-size: .2857em; letter-spacing: .8em; margin: .4em -.8em 0 0; white-space: nowrap; }
.lb-foot .footer-brand { margin-bottom: 1rem; }