:root {
    --void: #000000;
    /* text colours match the PHOTO / VIDEO watermark: pure white, and white at the watermark's 75% strength */
    --tube: #ffffff;
    --sodium: #ff6a2b;
    --sodium-hot: #ffb36b;
    --uv: #6c5cff;
    --dim: rgba(255,255,255,.75);
    /* PHOTO BRIGHTNESS: how bright your photos appear on the site. 1 is exactly as exported; 1.25 is 25% brighter. */
    --photo-bright: 1.25;
    --rule: #4a4352;
    /* one typeface throughout: Poppins, as in the PHOTO / VIDEO watermark */
    --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --text: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    /* The tallest any photo may be: the screen height minus room for the menu bar */
    --fit: calc(100vh - 8rem);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0px)); background: var(--void); }
  body {
    margin: 0;
    background: transparent;
    color: var(--tube);
    font-family: var(--text);
    text-shadow: 0 1px 3px rgba(0,0,0,.65);   /* a soft dark edge keeps text crisp over the brighter background */
    font-weight: 300;
    font-size: clamp(.98rem, 0.92rem + 0.25vw, 1.1rem);   /* Poppins runs larger than the old serif, so body text is set a touch smaller */
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  /* Site background: a composite of neon lines from the photographs, held still behind the page
     and kept faint so it never competes with the text. Raise or lower opacity to taste (0 to 1). */
  /* On computers, whenever the window is wider in shape than the background image (a maximised window or full screen),
     a side-extended copy of the background is used, so the whole height shows: the cathedral vault at the top and the
     cross at the foot. Narrower windows already show the full height, so they keep the original exactly. */

  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    /* BACKGROUND: background-mix.jpg (canyon, cathedral and Vegas lights blended).
       The other backgrounds were removed from the site to save space; copies are kept separately. */
    background: #000 url("images/background-mix.jpg") center / cover no-repeat;
    opacity: .6;
    /* BRIGHTNESS: raises the background's light. 1 is the image as it is; higher is brighter. */
    filter: brightness(2.3) saturate(.935);    /* brighter again, while the lower opacity above lets it sit lighter on the page */
  }
  @supports (height: 100svh) { :root { --fit: calc(100svh - 8rem); } }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }

  /* ---------- Navigation: lit tube marks the section you're in ---------- */
  .bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    padding-top: env(safe-area-inset-top, 0px);
    /* The strip from the top of the header photo is always shown behind the menu */
    --strip: 1;
    --strip-size: 100% auto;
    --strip-pos: center top;
  }
  /* Layer 1: a strip from the top of the header photo, brightened */
  .bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: #000;
    background-image: url("images/header.jpg");
    background-repeat: no-repeat;
    background-size: var(--strip-size);
    background-position: var(--strip-pos);
    filter: brightness(1.45) saturate(1.15);
    opacity: var(--strip);
  }
  /* Layer 2: the centre stays bright and at full strength; the ends, where the text sits, are dimmed */
  .bar::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.66) 18%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.66) 82%, rgba(0,0,0,.66) 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
    opacity: var(--strip);
  }
  /* The menu bar slides away while scrolling down and returns on any scroll up */
  .bar { transition: transform .35s ease; will-change: transform; }
  .bar.bar-hidden { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
  .bar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1rem var(--gutter);
  }
  .mark {
    font-family: var(--display); font-weight: 300; font-size: 1.15rem;
    letter-spacing: .04em; text-decoration: none; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85);
  }
  .nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.25rem); }
  .nav a {
    font-family: var(--display); font-weight: 300; font-size: 1.1rem; letter-spacing: .03em;
    text-decoration: none; color: var(--tube); white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85);
    transition: color .25s, text-shadow .25s;
  }
  .nav a:hover, .nav a.lit {
    color: var(--tube);
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85), 0 0 6px rgba(255,106,43,.9), 0 0 18px rgba(255,106,43,.55);
  }


  /* Work dropdown */
  .work-menu { position: relative; }
  .nav-work {
    all: unset; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--display); font-weight: 300; font-size: 1.1rem; letter-spacing: .03em;
    color: var(--tube);
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85);
    transition: color .25s, text-shadow .25s;
  }
  .nav-work::after {
    content: ""; width: .42em; height: .42em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform .2s;
  }
  .nav-work[aria-expanded="true"]::after { transform: translateY(.1em) rotate(225deg); }
  .nav-work:hover, .nav-work.lit, .nav-work[aria-expanded="true"] {
    color: var(--tube);
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85), 0 0 6px rgba(255,106,43,.9), 0 0 18px rgba(255,106,43,.55);
  }
  .nav-work:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }
  .work-list {
    position: absolute; top: calc(100% + 1rem); left: -1.25rem; z-index: 30;
    min-width: 13rem; margin: 0; padding: .6rem 0;
    list-style: none;
    background: #000; border: 1px solid #3a3340;
    box-shadow: 0 18px 40px rgba(0,0,0,.6);
  }
  .work-list[hidden] { display: none; }
  .nav .work-list a {
    display: block; padding: .45rem 1.25rem;
    font-size: 1.45rem; font-weight: 300; color: var(--tube); text-shadow: none;
  }
  .nav .work-list a:hover, .nav .work-list a.lit { color: var(--tube); }
  @media (prefers-reduced-motion: no-preference) {
    .work-list:not([hidden]) { animation: drop .18s ease-out; }
    @keyframes drop { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }
  }

  /* ---------- Hero: header photograph ---------- */
  .hero { text-align: center; }
  /* The header photo fills the whole screen when the page opens, edge to edge and top to bottom,
     behind the menu. The rest of the page begins as you scroll down. */
  .hero figure {
    margin: 0; width: 100%;
    height: 100vh; height: 100svh;
  }
  /* the whole photo is shown, scaled to fit the screen; any space around it is filled with a soft, dimmed blur of the same photo */
  .hero figure { background: #000 url("images/header-fill.jpg") center / cover no-repeat; }
  .hero img { width: 100%; height: 100%; object-fit: contain; object-position: center top; filter: brightness(var(--photo-bright)); }
  /* the photo starts directly beneath the menu bar, with no gap between them */
  .hero figure { box-sizing: border-box; padding-top: 0; }   /* the photo starts at the very top, continuing behind the menu bar */
  .lede {
    margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding: 0 var(--gutter); max-width: 34ch;
    color: var(--dim); font-style: italic;
  }


  /* ---------- Featured work: a lit tube either side of the title, mirrored on the centre line ---------- */
  .featured {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) 0;
  }
  .featured::before, .featured::after {
    content: ""; height: 2px; visibility: hidden; border-radius: 2px;
    background: var(--sodium);
    box-shadow: 0 0 6px rgba(255,106,43,.9), 0 0 18px rgba(255,106,43,.5);
  }
  .featured { position: relative; z-index: 3; }   /* the heading stays in front of the band's reflection */
  .featured h2 {
    margin: 0;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1; letter-spacing: .02em;
    text-align: center;
    color: var(--tube);
    text-shadow: 0 0 4px rgba(255,255,255,.35), 0 0 22px rgba(0,0,0,.6);
  }
  /* ---------- Featured collections carousel ---------- */
  .collections { padding: clamp(2rem, 4.5vw, 3.5rem) var(--gutter) 0; }
  /* the band runs the full width of the window, edge to edge */
  .collections.has-band { padding-left: 0; padding-right: 0; }
  /* on the band, the collection name sits well inside the curved frame: smaller, and raised clear of the lower border */
  .collections.has-band .coll-stage .coll-text { left: calc(var(--gutter) + clamp(2.5rem, 6vw, 5.5rem)); bottom: 22%; }
  .collections.has-band .coll-stage .coll-title { font-size: clamp(1.4rem, 3.2vw, 2.6rem); line-height: 1.05; }
  .coll-track {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: clamp(.8rem, 2vw, 1.5rem);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .coll-track::-webkit-scrollbar { display: none; }
  .coll-track:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }
  .coll-slide { flex: 0 0 100%; scroll-snap-align: center; }
  .coll-slide a {
    position: relative; display: block; overflow: hidden; background: #000;
    aspect-ratio: 21 / 9; max-height: calc(var(--fit) - 5rem); width: 100%;
    color: var(--tube); text-decoration: none;
  }
  .coll-slide img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s, transform .6s; filter: brightness(var(--photo-bright)); }
  .coll-slide a:hover img { filter: brightness(calc(var(--photo-bright) * .85)); transform: scale(1.015); }
  .coll-slide a:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  /* a dark wash at the lower left keeps the title readable over any photo */
  .coll-slide a::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 60%);
  }
  .coll-text {
    position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.25rem); z-index: 1;
    display: grid; gap: .35rem; max-width: 70%;
  }
  .coll-text time { font-family: var(--display); font-weight: 300; font-size: 1.15rem; color: var(--dim); }
  .coll-title { font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 5vw, 4rem); line-height: .95; }
  .coll-open {
    justify-self: start; margin-top: .5rem;
    font-family: var(--display); font-weight: 300; font-size: 1.1rem; letter-spacing: .03em;
    padding: .35rem 1.1rem; border: 1px solid #5a5260; border-radius: 999px; background: rgba(0,0,0,.35);
    transition: color .25s, border-color .25s, box-shadow .25s;
  }
  .coll-slide a:hover .coll-open, .coll-slide a:focus-visible .coll-open {
    color: var(--tube); border-color: var(--sodium); box-shadow: 0 0 12px rgba(255,106,43,.45);
  }
  .coll-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.1rem; }
  .coll-arrow {
    all: unset; cursor: pointer; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid #4a4350; display: grid; place-items: center; color: var(--dim);
    transition: color .25s, border-color .25s, box-shadow .25s;
  }
  .coll-arrow::before {
    content: ""; width: .6rem; height: .6rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  }
  .coll-prev::before { transform: translateX(.12rem) rotate(135deg); }
  .coll-next::before { transform: translateX(-.12rem) rotate(-45deg); }
  .coll-arrow:hover { color: var(--tube); border-color: var(--sodium); box-shadow: 0 0 10px rgba(255,106,43,.4); }
  .coll-arrow:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  /* the three markers are small diamonds, drawn like the diamonds in the band's border */
  .coll-dots { display: flex; align-items: center; gap: 1.08rem; }    /* 20% further apart than before */
  .coll-dots button {
    all: unset; cursor: pointer; position: relative;
    width: .72rem; height: .72rem; transform: rotate(45deg);            /* 20% larger than before */
    box-sizing: border-box; border: 1.2px solid #ffb36b; background: rgba(255,106,43,.22);
    box-shadow: 0 0 6px rgba(255,106,43,.35);
    transition: background .25s, box-shadow .25s, border-color .25s;
  }
  .coll-dots button::after {
    content: ""; position: absolute; inset: 28%; background: rgba(255,214,168,.35); transition: background .25s;
  }
  .coll-dots button:hover { box-shadow: 0 0 10px rgba(255,106,43,.7); }
  .coll-dots button[aria-current="true"] {
    border-color: #ff8a3d; background: rgba(255,106,43,.45);
    box-shadow: 0 0 6px rgba(255,106,43,.9), 0 0 16px rgba(255,106,43,.55);
  }
  .coll-dots button[aria-current="true"]::after { background: #ffd6a8; }
  .coll-dots button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .coll-track { scroll-behavior: auto; } .coll-slide img { transition: none; } }
  @media (max-width: 760px) { .coll-slide a { aspect-ratio: 4 / 5; } .coll-text { max-width: 88%; } }
  /* the rotating band (built by site.js; the plain slides above remain for browsers without scripts) */
  .coll-frame { position: relative; }
  .coll-frame .coll-arrow {
    position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
    width: 3.2rem; height: 3.2rem; background: rgba(0,0,0,.5); border-color: rgba(255,179,107,.55); color: var(--tube);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  .coll-frame .coll-prev { left: clamp(.6rem, 2vw, 1.6rem); }
  .coll-frame .coll-next { right: clamp(.6rem, 2vw, 1.6rem); }
  .coll-frame .coll-arrow::before { width: .75rem; height: .75rem; }
  .coll-frame .coll-arrow:hover { background: rgba(0,0,0,.65); }
  .collections.has-band .coll-track { display: none; }
  .coll-stage {
    position: relative; display: block; width: 100%; aspect-ratio: 5 / 2; max-height: min(58vh, 600px);   /* wide and shallower, so it never dominates a large screen */
    overflow: visible; perspective: 4000px; background: transparent; color: var(--tube); text-decoration: none;
    cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  }
  .coll-stage:active { cursor: grabbing; }
  .coll-stage:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  .coll-cyl, .coll-label { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
  .coll-cyl { pointer-events: auto; }
  /* the heading and its tubes live on the band (built by site.js); the page heading keeps its space but is hidden */
  .featured.on-band { visibility: hidden; }
  .coll-letter {
    position: absolute; top: 50%; left: 50%; text-align: center; white-space: pre;
    font-family: var(--display); font-weight: 300; color: var(--tube);
    text-shadow: 0 0 4px rgba(255,255,255,.35), 0 0 22px rgba(0,0,0,.6);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .coll-tube {
    position: absolute; top: 50%; left: 50%; background: var(--sodium);
    box-shadow: 0 0 6px rgba(255,106,43,.9), 0 0 18px rgba(255,106,43,.5);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .coll-face {
    position: absolute; top: 0; bottom: 0; left: 50%;
    backface-visibility: visible; -webkit-backface-visibility: visible;
    box-sizing: border-box; transform-style: preserve-3d;
  }
  .coll-pic { position: absolute; inset: 0; background-repeat: no-repeat; filter: brightness(var(--photo-bright)); }
  /* the rim: a continuous bronze ledge round the band's top and bottom edges (laid out by site.js) */
  .coll-rim { position: absolute; top: 50%; left: 50%; display: block; backface-visibility: visible; -webkit-backface-visibility: visible; }
  .coll-rim.ledge { transform-origin: 50% 0; background: linear-gradient(to bottom, #3a1708 0%, #7a3814 45%, #c4581f 85%, #ffb36b 100%); }
  .coll-rim.edge { background: linear-gradient(to bottom, #ffb36b 0%, #e0702a 35%, #8a3c14 70%, #3a1708 100%); box-shadow: 0 0 6px rgba(255,106,43,.35); }
  /* the ornate border: a framed diamond chain running along the band's top and bottom edges (laid out by site.js) */
  .coll-orn {
    position: absolute; left: 0; right: 0; height: var(--orn, 22px);
    box-shadow: inset 0 1px 0 rgba(255,214,168,.7), inset 0 -1px 0 rgba(255,214,168,.35), inset 0 3px 4px rgba(255,179,107,.18), inset 0 -4px 5px rgba(0,0,0,.6);
    background-color: rgba(8,4,12,.55); background-repeat: repeat-x;
    background-size: calc(var(--orn, 22px) * 2) var(--orn, 22px);
  }
  .coll-orn.top::after, .coll-orn.bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 60%; pointer-events: none; }
  .coll-orn.top::after { top: 100%; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); }
  .coll-orn.bottom::after { bottom: 100%; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
  .coll-orn.top { top: 0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2224%22%20viewBox%3D%220%200%2048%2024%22%3E%3Cg%3E%3Cg%20stroke%3D%22%23ff6a2b%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%224%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.5H48%22/%3E%3Cpath%20d%3D%22M24%205L31%2012%2024%2019%2017%2012Z%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0%202.5H48%22%20stroke%3D%22%23ff8a3d%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M0%2021.5H48%22%20stroke%3D%22%23ff6a2b%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0%2012H17M31%2012H48%22%20stroke%3D%22%23ffb36b%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%22.9%22/%3E%3Cpath%20d%3D%22M24%205L31%2012%2024%2019%2017%2012Z%22%20fill%3D%22%23ff6a2b%22%20fill-opacity%3D%22.22%22%20stroke%3D%22%23ffb36b%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M24%209L27%2012%2024%2015%2021%2012Z%22%20fill%3D%22%23ffd6a8%22/%3E%3Cpath%20d%3D%22M0%209.6L2.4%2012%200%2014.4M48%209.6L45.6%2012%2048%2014.4%22%20fill%3D%22%23ff8a3d%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221.1%22%20fill%3D%22%23ffb36b%22/%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2212%22%20r%3D%221.1%22%20fill%3D%22%23ffb36b%22/%3E%3C/g%3E%3C/svg%3E"); }
  .coll-orn.bottom { bottom: 0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2224%22%20viewBox%3D%220%200%2048%2024%22%3E%3Cg%20transform%3D%22translate%280%2024%29%20scale%281%20-1%29%22%3E%3Cg%20stroke%3D%22%23ff6a2b%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%224%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%202.5H48%22/%3E%3Cpath%20d%3D%22M24%205L31%2012%2024%2019%2017%2012Z%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0%202.5H48%22%20stroke%3D%22%23ff8a3d%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M0%2021.5H48%22%20stroke%3D%22%23ff6a2b%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0%2012H17M31%2012H48%22%20stroke%3D%22%23ffb36b%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%22.9%22/%3E%3Cpath%20d%3D%22M24%205L31%2012%2024%2019%2017%2012Z%22%20fill%3D%22%23ff6a2b%22%20fill-opacity%3D%22.22%22%20stroke%3D%22%23ffb36b%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M24%209L27%2012%2024%2015%2021%2012Z%22%20fill%3D%22%23ffd6a8%22/%3E%3Cpath%20d%3D%22M0%209.6L2.4%2012%200%2014.4M48%209.6L45.6%2012%2048%2014.4%22%20fill%3D%22%23ff8a3d%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221.1%22%20fill%3D%22%23ffb36b%22/%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2212%22%20r%3D%221.1%22%20fill%3D%22%23ffb36b%22/%3E%3C/g%3E%3C/svg%3E"); }
  .coll-face::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim-face, 0); }
  /* no dark panel outside the band: the title carries its own soft shadow instead */
  .coll-shade { display: none; }
  .collections.has-band .coll-stage .coll-text { visibility: hidden; }   /* the names are drawn on the band instead */
  .coll-glyph {
    position: absolute; top: 50%; left: 50%; text-align: center; white-space: pre; pointer-events: none;
    font-family: var(--display); font-weight: 300; color: var(--tube);
    text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .coll-stage .coll-text { z-index: 2; transition: opacity .18s; text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8); }
  .coll-stage .coll-text.changing { opacity: 0; }
  .coll-stage:hover .coll-open, .coll-stage:focus-visible .coll-open {
    color: var(--tube); border-color: var(--sodium); box-shadow: 0 0 12px rgba(255,106,43,.45);
  }
  @media (max-width: 760px) { .coll-stage { aspect-ratio: 4 / 5; } }
  .collections + .work { padding-top: clamp(4rem, 9vw, 7rem); }

  /* ---------- Work sections ---------- */
  .work { padding: clamp(5rem, 11vw, 9rem) var(--gutter) 0; }
  /* Title and description sit side by side; a long title pushes the description underneath */
  .work-head {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 1rem 3rem; align-items: flex-end;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }
  .work h3 {
    margin: 0;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(3.5rem, 12vw, 10rem); line-height: .82; letter-spacing: .01em;
  }
  .work-head p { margin: 0; color: var(--dim); flex: 0 1 30rem; max-width: 46ch; }

  .grid { display: grid; gap: clamp(.6rem, 1.4vw, 1.2rem); }
  .grid button {
    all: unset; cursor: zoom-in; display: block; position: relative; overflow: hidden;
    background: #0a090c;
  }
  .grid button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  /* Photos are always fully solid: hovering darkens a photo rather than letting the background show through */
  .grid img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; filter: brightness(var(--photo-bright)); }
  .grid button:hover img { filter: brightness(calc(var(--photo-bright) * .82)); }

  .g-portrait { grid-template-columns: repeat(4, 1fr); }
  .g-portrait button { aspect-ratio: 4 / 5; }
  .g-portrait button:nth-child(even) { margin-top: clamp(1.5rem, 5vw, 4.5rem); }

  .g-landscape { grid-template-columns: repeat(3, 1fr); }
  .g-landscape button { aspect-ratio: 3 / 2; }
  .g-landscape button:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }

  .g-event { grid-template-columns: 2fr 1fr 1fr; }
  .g-event button:nth-child(1) { grid-row: span 2; }
  .g-event button:nth-child(2), .g-event button:nth-child(3) { aspect-ratio: 1 / 1; }
  .g-event button:nth-child(4) { grid-column: span 2; aspect-ratio: 2 / 1; }

  .g-wildlife { grid-template-columns: repeat(6, 1fr); }
  .g-wildlife button:nth-child(1) { grid-column: span 4; aspect-ratio: 5 / 4; }
  .g-wildlife button:nth-child(2) { grid-column: span 2; }
  .g-wildlife button:nth-child(3) { grid-column: span 3; aspect-ratio: 3 / 2; }
  .g-wildlife button:nth-child(4) { grid-column: span 3; aspect-ratio: 3 / 2; }

  /* Art is shown whole and uncropped: symmetry is the work */
  .g-art { grid-template-columns: 1fr 1fr; }
  .g-art button { background: none; }
  .g-art button:first-child { grid-column: 1 / -1; }


  /* ---------- Every photo fits on screen ---------- */
  /* Cropped galleries: a tile never grows taller than the screen */
  .grid button, .more button { max-height: var(--fit); }
  /* Uncropped photos (Art, collections): shrink to fit the screen, keeping the whole picture */
  /* The photo's own box is exactly the picture, so nothing behind it can show around its edges */
  .g-art button, .album-grid button { display: flex; justify-content: center; align-items: center; background: none; }
  .g-art img, .album-grid img { width: auto; height: auto; max-width: 100%; max-height: var(--fit); background: #000; }

  /* ---------- Videography reel ---------- */
  .reel { margin: 0; }
  .reel-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    max-width: calc(var(--fit) * 16 / 9); margin: 0 auto;
    background: #0a090c;
    box-shadow: 0 0 0 1px #2a2530;
  }
  .reel-frame iframe, .reel-frame video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
  }
  .reel-empty {
    position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem;
    text-align: center; padding: 1.5rem; color: var(--dim);
  }
  .reel-empty strong {
    font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--tube);
  }
  .reel figcaption { margin-top: 1rem; text-align: center; font-style: italic; color: var(--dim); }
  .reel figcaption:empty { display: none; }

  /* ---------- Video productions list ---------- */
  .productions {
    max-width: min(100%, calc(var(--fit) * 16 / 9)); margin: clamp(2rem, 4vw, 3rem) auto 0;
  }
  .productions h4 {
    margin: 0 0 .6rem;
    font-family: var(--display); font-weight: 300; font-size: 1.35rem; letter-spacing: .03em;
    color: var(--tube);
    text-align: center;
  }
  .productions ol { list-style: none; margin: 0; padding: 0; }
  .productions li {
    display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem;
    padding: .75rem 0; border-top: 1px solid var(--rule);
  }
  .productions li:last-child { border-bottom: 1px solid var(--rule); }
  .productions time { font-family: var(--display); font-weight: 300; font-size: 1.15rem; color: var(--dim); padding-top: .1rem; }
  .productions em { color: var(--dim); margin-left: .5rem; }
  .productions a {
    text-decoration: underline; text-decoration-color: var(--uv); text-underline-offset: .25em;
    transition: color .25s, text-shadow .25s;
  }
  .productions a:hover { color: var(--tube); text-shadow: 0 0 6px rgba(255,106,43,.7); text-decoration-color: var(--sodium); }

  /* ---------- Additional images ---------- */
  .more-row { text-align: center; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
  .more-toggle {
    all: unset; cursor: pointer; display: inline-block;
    font-family: var(--display); font-weight: 300; font-size: 1.3rem; letter-spacing: .03em;
    color: var(--dim);
    padding: .55rem 1.4rem;
    border: 1px solid #3a3340; border-radius: 999px;
    transition: color .25s, border-color .25s, box-shadow .25s, text-shadow .25s;
  }
  .more-toggle:hover, .more-toggle[aria-expanded="true"] {
    color: var(--tube); border-color: var(--sodium);
    text-shadow: 0 0 6px rgba(255,106,43,.8);
    box-shadow: 0 0 12px rgba(255,106,43,.45), inset 0 0 10px rgba(255,106,43,.2);
  }
  .more-toggle:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }
  .more-toggle[hidden], .more[hidden] { display: none !important; }
  .more {
    display: grid; grid-template-columns: repeat(2, 1fr); align-items: start;
    gap: clamp(.6rem, 1.4vw, 1.2rem);
    margin-top: clamp(.6rem, 1.4vw, 1.2rem);
  }
  #art-more { grid-template-columns: repeat(3, 1fr); }
  /* Portrait extras stay the same size as the portraits above, centred on the page */
  #portrait-more { grid-template-columns: repeat(4, 1fr); }
  #portrait-more button:nth-child(1) { grid-column: 2; }
  #portrait-more button:nth-child(2) { grid-column: 3; }
  .more button {
    all: unset; cursor: zoom-in; display: block; width: 100%;
    background: #0a090c;
  }
  .more button:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
  .more img { width: 100%; height: auto; transition: filter .3s; filter: brightness(var(--photo-bright)); }
  .more button:hover img { filter: brightness(calc(var(--photo-bright) * .82)); }
  @media (prefers-reduced-motion: no-preference) {
    .more.opening button { animation: reveal .6s ease-out both; }
    @keyframes reveal { from { filter: brightness(0); } to { filter: brightness(1); } }
  }

  /* ---------- About ---------- */
  .about {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    padding: clamp(6rem, 13vw, 11rem) var(--gutter) 0;
  }
  .about h2, .contact h2 {
    margin: 0 0 1.5rem;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1;
  }
  .statement p { margin: 0 0 1.2em; max-width: 34em; }
  .statement p:first-of-type { font-size: 1.3em; line-height: 1.5; }
  .record h3 {
    margin: 2.5rem 0 .6rem;
    font-family: var(--display); font-weight: 300; font-size: 1.35rem; letter-spacing: .03em;
    color: var(--tube);
  }
  .record h3:first-child { margin-top: 0; }
  .record ol { list-style: none; margin: 0; padding: 0; }
  .record li {
    display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem;
    padding: .7rem 0; border-top: 1px solid var(--rule);
  }
  .record li:last-child { border-bottom: 1px solid var(--rule); }
  .record ol.no-dates li { grid-template-columns: 1fr; }
  .record-more { margin: 1rem 0 0; }
  .coll-all { text-align: center; margin: 1.2rem 0 0; }
  .record-more a, .coll-all a {
    font-family: var(--display); font-weight: 300; font-size: 1.15rem; letter-spacing: .03em;
    color: var(--tube); text-decoration: underline; text-decoration-color: var(--sodium); text-underline-offset: .3em;
  }
  .record-more a:hover, .coll-all a:hover { color: var(--tube); text-shadow: 0 0 6px rgba(255,106,43,.7); }
  /* ---------- Full collections page ---------- */
  .all-collections { padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; }
  .all-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
  .all-grid a { display: block; color: var(--tube); text-decoration: none; }
  .all-grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
  .all-grid img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--photo-bright)); transition: transform .6s, filter .4s; }
  .all-grid a:hover img { transform: scale(1.03); filter: brightness(calc(var(--photo-bright) * .85)); }
  .all-grid h2 { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .7rem 0 .2rem; }
  .all-grid p { margin: 0; color: var(--dim); }
  .all-grid a:hover h2 { color: var(--tube); }
  .all-grid a:focus-visible { outline: 2px solid var(--sodium); outline-offset: 4px; }
  .record time { font-family: var(--display); font-weight: 300; font-size: 1.15rem; color: var(--dim); padding-top: .1rem; }
  .record em { font-style: italic; }

  /* ---------- Contact ---------- */
  .contact { padding: clamp(6rem, 13vw, 11rem) var(--gutter) clamp(3rem, 6vw, 5rem); text-align: center; }
  .contact p { margin: 0 auto 1.5rem; max-width: 36ch; color: var(--dim); }
  .email {
    display: inline-block;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(1.9rem, 6.5vw, 5.5rem); line-height: 1.05;
    text-decoration: none; word-break: break-word;
    transition: color .25s, text-shadow .25s;
  }
  .email:hover {
    color: var(--tube);
    text-shadow: 0 0 6px rgba(255,106,43,.9), 0 0 26px rgba(255,106,43,.5);
  }
  .elsewhere { display: flex; justify-content: center; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
  .elsewhere a { color: var(--dim); text-underline-offset: .25em; text-decoration-color: var(--uv); }
  .elsewhere a:hover { color: var(--tube); }

  footer {
    padding: 2rem var(--gutter); border-top: 1px solid var(--rule);
    color: var(--dim); font-size: .9rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }

  /* ---------- Viewer ---------- */
  dialog {
    width: 100vw; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: rgba(0,0,0,.97); color: var(--tube);
  }
  dialog::backdrop { background: #000; }
  .viewer { height: 100%; display: grid; grid-template-rows: 1fr auto; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  .viewer-stage { display: grid; place-items: center; min-height: 0; padding: 3.5rem 4rem 1rem; }
  .viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; filter: none; }   /* opened full screen, a photo is shown exactly as exported, without the gallery brightening */
  .viewer-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter) 1.5rem; }
  .viewer-foot p { margin: 0; font-style: italic; color: var(--dim); }
  .viewer button {
    all: unset; cursor: pointer;
    font-family: var(--display); font-weight: 300; font-size: 1.2rem; color: var(--dim);
    padding: .4rem .6rem;
  }
  .viewer button:hover { color: var(--tube); }
  .viewer button:focus-visible { outline: 2px solid var(--sodium); }
  .viewer-close { position: absolute; top: calc(.75rem + env(safe-area-inset-top, 0px)); right: var(--gutter); }
  .viewer-steps { display: flex; gap: .5rem; }

  /* ---------- Small screens ---------- */
  @media (max-width: 760px) {
    .bar-inner { flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: .8rem; padding-bottom: .7rem; }
    html { scroll-padding-top: calc(6rem + env(safe-area-inset-top, 0px)); }
    .about { grid-template-columns: 1fr; }
    .work-head p { flex-basis: 100%; }
    .g-portrait { grid-template-columns: 1fr 1fr; }
    .g-landscape { grid-template-columns: 1fr 1fr; }
    .g-landscape button:first-child { aspect-ratio: 3 / 2; }
    .g-landscape button:last-child { grid-column: 1 / -1; }
    .g-event { grid-template-columns: 1fr 1fr; }
    .g-event button:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
    .g-event button:nth-child(4) { grid-column: 1 / -1; }
    .g-wildlife { grid-template-columns: 1fr 1fr; }
    .g-wildlife button:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 5; }
    .g-wildlife button:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
    .g-art { grid-template-columns: 1fr; }
    #art-more, #portrait-more { grid-template-columns: repeat(2, 1fr); }
    #portrait-more button:nth-child(n) { grid-column: auto; }
    .viewer-stage { padding: 3.5rem .75rem 1rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }

  /* ---------- Client testimonials ---------- */
  .testimonials-section { padding: clamp(5rem, 10vw, 8rem) var(--gutter) 0; }
  .testimonials-section h2 {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--display); font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1;
    text-align: center;
  }
  .testimonials {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  }
  .quote {
    margin: 0; padding: 1.4rem 0 1.6rem;
    border-top: 1px solid var(--rule);
  }
  .quote blockquote { margin: 0; }
  .quote blockquote p {
    margin: 0; font-style: italic; font-size: 1.08em; line-height: 1.6;
    text-indent: -.42em;
  }
  .quote blockquote p::before { content: "\201C"; }
  .quote blockquote p::after { content: "\201D"; }
  .quote figcaption {
    margin-top: .7rem;
    font-family: var(--display); font-weight: 300; font-size: 1.1rem; letter-spacing: .02em;
    color: var(--tube);
  }
  .quote figcaption span { font-weight: 300; color: var(--dim); }

  /* ---------- Online collections links ---------- */
  .record a {
    text-decoration: underline; text-decoration-color: var(--uv); text-underline-offset: .25em;
    transition: color .25s, text-shadow .25s;
  }
  .record a:hover { color: var(--tube); text-shadow: 0 0 6px rgba(255,106,43,.7); text-decoration-color: var(--sodium); }

  /* ---------- Album pages ---------- */
  .album-head {
    padding: calc(5.25rem + clamp(3rem, 8vw, 6rem)) var(--gutter) 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: 1rem 3rem; align-items: end;
  }
  .album-head h1 {
    margin: 0;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(3rem, 9vw, 8rem); line-height: .85;
  }
  .album-head time {
    display: block; margin-bottom: .75rem;
    font-family: var(--display); font-weight: 300; font-size: 1.4rem; color: var(--dim);
  }
  .album-head p { margin: 0; color: var(--dim); max-width: 46ch; }
  .album { padding-top: clamp(2rem, 4vw, 3rem); }
  .album-grid { display: block; columns: 3; column-gap: clamp(.6rem, 1.4vw, 1.2rem); }
  .album-grid button { width: 100%; margin-bottom: clamp(.6rem, 1.4vw, 1.2rem); break-inside: avoid; }
  .album-back { padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 5rem); text-align: center; }
  .album-back a {
    font-family: var(--display); font-weight: 300; font-size: 1.3rem; color: var(--dim);
    text-decoration: underline; text-decoration-color: var(--uv); text-underline-offset: .3em;
  }
  .album-back a:hover { color: var(--tube); text-decoration-color: var(--sodium); }
  @media (max-width: 760px) {
    .album-head { grid-template-columns: 1fr; padding-top: calc(7rem + 2rem); }
    .album-grid { columns: 2; }
    /* On phones the menu text sits over the middle of the bar, so the bright centre is gentler */
    .bar::before { filter: brightness(1.25) saturate(1.1); }
    .bar::after { background: rgba(0,0,0,.45); }
    /* Match the phone header's scale on pages without the header photo */
    .bar { --strip-size: auto 62vh; }
  }

/* ---------- Orbiting globes: the gallery sections' photos as glass planets on one tilted orbit (laid out by site.js) ---------- */
.work.as-globes > .grid, .work.as-globes > .more, .work.as-globes > .more-row { display: none; }
html, body { overflow-x: clip; }   /* an enlarged globe can never push the page sideways */
.globes { position: relative; width: 100%; margin-top: clamp(1rem, 3vw, 2rem); }
.globes .globe {
  all: unset; position: absolute; display: block; cursor: zoom-in; border-radius: 50%;
  filter: brightness(var(--dim, 1)) blur(var(--blur, 0px));
}
.globes.has-focus .globe { transition: transform .5s cubic-bezier(.22,.8,.25,1), filter .4s, width .5s cubic-bezier(.22,.8,.25,1), height .5s cubic-bezier(.22,.8,.25,1), left .5s cubic-bezier(.22,.8,.25,1), top .5s cubic-bezier(.22,.8,.25,1); }
/* a soft shadow cast onto the orbit plane beneath each planet */
.globes .globe::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -16%; height: 16%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%); pointer-events: none;
}
.globe-orb {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: block;
  box-shadow: 0 22px 44px rgba(0,0,0,.6), 0 0 26px rgba(255,106,43,.22), inset 0 0 0 1px rgba(255,179,107,.4);
}
.globe-orb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--photo-bright)); }
/* the sphere: lit from the upper left, a crisp highlight, shade wrapping round to a dark edge, warm light bouncing back from below */
.globe-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 2.5%, rgba(255,255,255,.18) 9%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.32) 62%, rgba(0,0,0,.75) 86%, rgba(0,0,0,.9) 100%),
    radial-gradient(circle at 66% 84%, rgba(255,179,107,.35) 0%, rgba(255,179,107,0) 24%);
}
.globes .globe.focus .globe-orb { box-shadow: 0 34px 64px rgba(0,0,0,.65), 0 0 36px rgba(255,106,43,.45), inset 0 0 0 1px rgba(255,179,107,.7); }
.globes .globe:focus-visible .globe-orb { outline: 2px solid var(--sodium); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .globes .globe { transition: none !important; } }

/* each category's title sits at the centre of its orbit, the planets circling around it */
.globes .globes-title {
  position: absolute; z-index: 10; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
  font-size: clamp(2.2rem, 7vw, 6.5rem); line-height: 1; white-space: nowrap; text-align: center;
  text-shadow: 0 0 18px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.9);
}
.work.as-globes .work-head { justify-content: center; text-align: center; margin-bottom: 0; }
.work.as-globes .work-head p { flex: 0 1 40rem; }

/* hovering a globe opens it into an oval the shape of the photo, showing the flat, whole picture */
.globe-flat {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(var(--photo-bright)); opacity: 0; transition: opacity .4s ease;
}
.globes .globe.focus .globe-flat { opacity: 1; }
/* as an oval it reads as a lens rather than a ball: lighter shading at the rim */
.globes .globe.focus .globe-orb::after {
  /* the opened oval keeps the planet's bright point of reflected light, in the same place, so it doesn't vanish on hover */
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 1.2%, rgba(255,255,255,.16) 4.5%, rgba(255,255,255,0) 13%),
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.6) 100%);
}

/* the opened oval shows the photo at full detail: no magnified bitmap, and the browser's best scaling */
.globes .globe.focus .globe-orb img { image-rendering: auto; }

/* ---------- Lettering to match the watermark ----------
   The PHOTO / VIDEO lettering in the watermark is Poppins Light, in capitals, very widely spaced, white,
   with a soft grey shading along one edge. Headings, names, menus and labels now take that same treatment.
   Longer passages stay in normal capitals and lower case so they remain easy to read, in the same typeface and colour. */
h1, h2, h3, h4,
.mark, .nav a, .nav-work, .work-list a,
.coll-title, .coll-glyph, .coll-letter,
.all-grid h2, .record h3, .productions h4,
.record-more a, .coll-all a, .album-back a, .more-toggle {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: 300;
}
/* the large titles are spaced a little less, so they fit their space */
.work h3, .globes .globes-title, .featured h2, .album-head h1, .about h2, .videography h2 { letter-spacing: .2em; }
/* the watermark's soft grey shading along the lower right of each letter */
h1, h2, h3, .coll-title, .coll-glyph, .coll-letter, .all-grid h2 {
  text-shadow: .04em .05em 0 rgba(150,140,165,.55), 0 0 18px rgba(0,0,0,.6);
}

.album-head h1 { font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1.05; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  h1, h2, h3, .work h3, .globes .globes-title, .featured h2, .album-head h1 { letter-spacing: .1em; }
  .testimonials-section h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* Wide windows on computers (a maximised window or full screen) use the side-extended background, so the cathedral
   vault and the cross both show. Placed last so it takes precedence over the main background rule. */
html.is-fullscreen body::before { background-image: url("images/background-mix-full.jpg"); }
@media (min-aspect-ratio: 8/5) and (min-width: 900px) {
  body::before { background-image: url("images/background-mix-full.jpg"); }
}

/* the photo in the About section */
.about-photo { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.about-photo img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  filter: brightness(var(--photo-bright));
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,179,107,.35);
}

/* Portrait planets show their photos at original brightness, without the gallery brightening */
#portrait .globe-orb img { filter: none; }

/* the last entry in the Work menu leads to the full catalogue of collections, set apart by a fine rule */
.work-list .work-catalogue { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid rgba(255,179,107,.35); }
.work-list { max-width: calc(100vw - 16px); box-sizing: border-box; }
.work-list a { white-space: normal; }

/* When the page first opens, the menu bar and the header photo read as one picture: the bar shows the top of the
   same photo at the same size, brightness and position, with no dimming or dividing line between them. */
.bar.at-top::before { filter: brightness(var(--photo-bright)); }
.bar.at-top::after { opacity: 0; }
.bar::before, .bar::after { transition: filter .35s, opacity .35s; }

/* The Bay Bridge sits low in its photo, under a wide night sky. In its planet and in the opened oval the photo is
   enlarged slightly and lifted, so the lit bridge sits near the middle instead of being cut by the curved edge. */
.globe-orb img.frame-bridge { transform: translate(-4%, -15%) scale(1.3); }

/* ---------- Lettering in the style of the cel-shaded watermark ----------
   Headings and names take the look of the PGB mark itself: white faces lit from above, a cool grey lower face crossed
   by fine diagonal hatching, a thin dark ink outline, and a hard shadow cast down and to the right. */
h1, h2, h3, .coll-title, .coll-glyph, .coll-letter, .all-grid h2, .globes .globes-title {
  font-weight: 500;
  color: #fff;
  background-image:
    repeating-linear-gradient(135deg, rgba(58,48,74,0) 0 .09em, rgba(58,48,74,.55) .09em .12em),
    linear-gradient(to bottom, #ffffff 0%, #ffffff 52%, #cfc9d8 52%, #b9b2c5 100%);
  background-size: 100% 48%, 100% 100%;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .025em #2a2433;
  text-shadow: none;
  filter: drop-shadow(.045em .055em 0 rgba(30,24,40,.92)) drop-shadow(0 0 .35em rgba(0,0,0,.55));
}
/* small labels inside the record lists stay crisp at their size */
.record h3, .productions h4 { -webkit-text-stroke: .02em #2a2433; }

/* All the smaller text matches the watermark's PHOTO / VIDEO lettering: Poppins Light in spaced capitals, in white,
   with a shadow cast behind each letter. */
body { text-transform: uppercase; letter-spacing: .12em; }
body, p, li, a, span, em, time, figcaption, button, small, label {
  text-shadow: .07em .09em .05em rgba(0,0,0,.85), 0 0 .6em rgba(0,0,0,.35);
}
.mark, .nav a, .nav-work, .work-list a, .record-more a, .coll-all a, .album-back a { letter-spacing: .3em; }
em { font-style: italic; }

/* the rounded border: the flat ornament strips give way to a bronze tube built in 3D (laid out by site.js) */
.coll-orn { display: none; }
.coll-tube-seg { position: absolute; top: 50%; left: 50%; display: block; backface-visibility: visible; -webkit-backface-visibility: visible; }
.coll-tube-seg { background-color: #2a1438; background-image: url("images/border-skin.jpg"); background-repeat: repeat; }
.coll-tube-seg.inlay { background-repeat: repeat-x, repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M24 6L30 12 24 18 18 12Z' fill='%23ff6a2b' fill-opacity='.3' stroke='%23ffd9c2' stroke-opacity='.8' stroke-width='1'/%3E%3Cpath d='M24 9.5L26.5 12 24 14.5 21.5 12Z' fill='%23fff1e6' fill-opacity='.85'/%3E%3C/svg%3E"), url("images/border-skin.jpg"); }
/* the tube throws a soft shadow onto the photo just inside it */
.coll-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 5%, rgba(0,0,0,0) 95%, rgba(0,0,0,.45) 100%); }

/* The header photo always fills the whole screen when the site opens, with nothing trimmed: it morphs with the
   window, growing skinnier as the window narrows and wider as it widens, so it always fits the frame exactly. */
.hero img { object-fit: fill; }

/* phones and narrow windows: after scrolling past the header, the menu strip returns to the photo at its natural shape */
@media (max-aspect-ratio: 5/4) {
  .bar.past-hero:not(.at-top)::before { background-size: var(--strip-size-2, var(--strip-size)); background-position: var(--strip-pos-2, var(--strip-pos)); }
}

/* the short excerpt on each collection page, between the title and the photographs */
.excerpt {
  max-width: 62rem; margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(255,179,107,.35); border-bottom: 1px solid rgba(255,179,107,.35);
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.excerpt h2 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); margin: 0 0 1rem; letter-spacing: .3em; }
.excerpt p { margin: 0 0 1rem; line-height: 1.75; color: var(--tube); }
.excerpt p:last-child { margin-bottom: 0; }

/* ---------- Version 2: one planet per category ---------- */
.categories .globe-orb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.categories .globe-orb img.on { opacity: 1; }
.categories .globes .globe.focus .globe-orb img { transition-duration: .6s; }
/* each planet's category name, riding just beneath it */
.cat-name {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, .55em); white-space: nowrap; pointer-events: none;
  font-size: clamp(.78rem, 1.1vw, 1rem); letter-spacing: .3em; color: var(--tube);
}
.globes .globe.focus .cat-name { opacity: 0; transition: opacity .3s; }

/* The All Collections page and every collection page show photos exactly as exported: no added brightening.
   (Hovering still dims a photo slightly, to show it can be opened.) The background keeps its own brightening. */
.all-grid img { filter: none; }
.all-grid a:hover img { filter: brightness(.88); }
.album-grid img { filter: none; }
.album-grid button:hover img { filter: brightness(.85); }

/* "Photography" is a longer word than the old title, so it is set a little smaller to sit inside the orbit */
#work .globes .globes-title { font-size: clamp(1.6rem, 5vw, 4.6rem); letter-spacing: .14em; }

/* ---------- The Work menu: each entry sits on a photo from its category ----------
   The widest photo in each category is used, stretched to fill its row; wide photos stretch the least.
   A soft shade from the left keeps the lettering readable, and lifts when the entry is hovered. */
.work-list li a { display: block; position: relative; background-size: 100% 100%; background-repeat: no-repeat; transition: background-image .3s; }
.work-list li.wl-art a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/art-3.jpg"); }
.work-list li.wl-art a:hover, .work-list li.wl-art a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/art-3.jpg"); }
.work-list li.wl-event a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/event-3.jpg"); }
.work-list li.wl-event a:hover, .work-list li.wl-event a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/event-3.jpg"); }
.work-list li.wl-landscape a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/landscape-1.jpg"); }
.work-list li.wl-landscape a:hover, .work-list li.wl-landscape a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/landscape-1.jpg"); }
.work-list li.wl-portrait a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/portrait-6.jpg"); }
.work-list li.wl-portrait a:hover, .work-list li.wl-portrait a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/portrait-6.jpg"); }
.work-list li.wl-wildlife a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/wildlife-6.jpg"); }
.work-list li.wl-wildlife a:hover, .work-list li.wl-wildlife a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/wildlife-6.jpg"); }
.work-list li.wl-street a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("albums/album-4/10.jpg"); }
.work-list li.wl-street a:hover, .work-list li.wl-street a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("albums/album-4/10.jpg"); }
.work-list li.wl-night a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("albums/album-10/06.jpg"); }
.work-list li.wl-night a:hover, .work-list li.wl-night a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("albums/album-10/06.jpg"); }
.work-list li.wl-architecture a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("albums/album-2/04.jpg"); }
.work-list li.wl-architecture a:hover, .work-list li.wl-architecture a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("albums/album-2/04.jpg"); }
.work-list li.wl-botanical a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("albums/album-3/61.jpg"); }
.work-list li.wl-botanical a:hover, .work-list li.wl-botanical a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("albums/album-3/61.jpg"); }
.work-list li.wl-videography a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("images/header.jpg"); }
.work-list li.wl-videography a:hover, .work-list li.wl-videography a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("images/header.jpg"); }
.work-list li.wl-full a { background-image: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,.35) 70%, rgba(0,0,0,.2)), url("albums/album-4/06.jpg"); }
.work-list li.wl-full a:hover, .work-list li.wl-full a:focus-visible { background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.12) 70%, rgba(0,0,0,0)), url("albums/album-4/06.jpg"); }
.work-list li + li { border-top: 1px solid rgba(0,0,0,.6); }
.work-list { padding: 0; overflow: hidden; }

/* Version 2: no title at the centre of the orbit. The heading stays in the page, hidden from view, so screen readers still announce the section. */
#work .globes .globes-title {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; filter: none;
}

/* Version 2: the cathedral's stained glass rose window, high in the vault of the background, is redrawn
   in front of the planets, exactly where it sits in the background, so the planets pass behind it.
   (On phones and tablets, which don't hold a fixed background in place the same way, the planets stay in front.) */
#work.categories { position: relative; z-index: 0; }
.window-front {
  position: absolute; inset: 0; z-index: 90; pointer-events: none;
  background: url("images/window-front.webp") center / cover no-repeat fixed;
}
@media (min-aspect-ratio: 8/5) and (min-width: 900px) { .window-front { background-image: url("images/window-front-full.webp"); } }
html.is-fullscreen .window-front { background-image: url("images/window-front-full.webp"); }
@media (hover: none), (max-width: 899px) { .window-front { display: none; } }
/* a planet opened by hovering comes forward through the window, so its photo is never hidden */
#work .globes .globe.focus { z-index: 100 !important; }

/* ---------- Version 2: the reel waits behind an opaque oval until it is clicked ---------- */
.reel-frame { transition: border-radius .65s cubic-bezier(.22,.8,.25,1), width .65s cubic-bezier(.22,.8,.25,1), max-width .65s cubic-bezier(.22,.8,.25,1), box-shadow .65s; overflow: hidden; }
.reel-frame.oval { border-radius: 50%; width: min(72%, 820px); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 34px rgba(255,106,43,.22); }
.reel-cover {
  all: unset; position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; cursor: pointer;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 34% 26%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(ellipse at 50% 50%, #3d2356 0%, #1e1030 52%, #0b0710 100%);
  box-shadow: inset 0 0 0 1px rgba(255,179,107,.55), inset 0 -26px 50px rgba(0,0,0,.65);
  transition: box-shadow .3s, filter .3s;
}
.reel-cover:hover, .reel-cover:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,179,107,.9), inset 0 -26px 50px rgba(0,0,0,.55), 0 0 30px rgba(255,106,43,.45); filter: brightness(1.12); }
.reel-play {
  width: 0; height: 0; margin-left: .5rem;
  border-style: solid; border-width: 1.6rem 0 1.6rem 2.7rem; border-color: transparent transparent transparent #fff;
  filter: drop-shadow(.06em .08em 0 rgba(30,24,40,.9)) drop-shadow(0 0 10px rgba(255,106,43,.55));
}
.reel-label { font-size: .85rem; letter-spacing: .35em; color: var(--tube); text-transform: uppercase; }
.reel-frame.open { border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .reel-frame { transition: none; } }

/* Passing behind the stained glass: the window glows as a planet slips behind it, and the planet darkens and
   softens as if seen through coloured glass. */
.window-front { transition: filter .6s ease; }
.window-front.lit { filter: brightness(1.22) saturate(1.35) drop-shadow(0 0 22px rgba(255, 70, 190, .65)) drop-shadow(0 0 6px rgba(255, 179, 107, .6)); }
#work .globes .globe.behind-glass .globe-orb { filter: brightness(.55) saturate(1.4) blur(1.5px); }
#work .globes .globe .globe-orb { transition: filter .5s ease; }

/* Three layers, like layers in Photoshop: the mountains at the bottom (the background itself), the cathedral above them,
   and the planets as a third layer that moves between the two. A planet on the near side of its orbit passes in front
   of the cathedral; on the far side it passes behind the cathedral, while still showing in front of the mountains.
   The cathedral layer (including its rose window) is redrawn exactly where it sits in the background, at the depth of
   the orbit's middle, so each planet goes in front of it or behind it as it travels round. (Computers only.) */
.cathedral-front {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: url("images/cathedral-front.webp") center / cover no-repeat fixed;
}
@media (min-aspect-ratio: 8/5) and (min-width: 900px) { .cathedral-front { background-image: url("images/cathedral-front-full.webp"); } }
html.is-fullscreen .cathedral-front { background-image: url("images/cathedral-front-full.webp"); }
@media (hover: none), (max-width: 899px) { .cathedral-front { display: none; } }
/* the rose window is part of the cathedral layer, at the same depth */
.window-front { z-index: 10; }

/* In full-screen mode the rose window doesn't light up as planets pass behind it; they simply slip behind the glass */
html.is-fullscreen .window-front.lit { filter: none; }

/* The header photo dissolves softly into the background as it meets the Featured Collections below:
   its lower part fades out gradually, and the spinner's section rises a little into that fade. */
.hero figure {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.75) 76%, rgba(0,0,0,.35) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.75) 76%, rgba(0,0,0,.35) 88%, transparent 100%);
}
.hero + * { position: relative; margin-top: clamp(-7rem, -9vh, -3rem); }
/* nor in a maximised browser window. A maximised window is wider in shape than 16:10 (the browser's toolbar takes
   some of its height), so the glow is off for any window that wide. */
@media (min-aspect-ratio: 8/5) and (min-width: 900px) { .window-front.lit { filter: none; } }

/* A planet behind the cathedral disappears: it fades out wherever the cathedral stands in front of it,
   and reappears as it comes round past the cathedral's edge or onto the near side of its orbit. */
#work.categories .globes .globe { opacity: var(--behind, 1); }

/* "See all collections" sits lower beneath the spinner, with its blurb just below it */
.collections .coll-all { margin-top: clamp(2.2rem, 5vh, 3.6rem); }
.collections .coll-blurb {
  max-width: 46rem; margin: .9rem auto 0; padding: 0 1.25rem; text-align: center;
  font-size: .9rem; line-height: 1.75; color: var(--dim);
}

/* the wide orbit runs past the screen's edges without the page scrolling sideways */
#work.categories { overflow-x: clip; }
#work.categories .globes { overflow: visible; }

/* less empty space: the orbit sits close beneath the collections text, and the reel follows close beneath the orbit */
#work.categories { padding-top: clamp(.5rem, 2vh, 1.5rem); padding-bottom: 0; }
#work.categories .work-head { margin: 0; }
#videography { padding-top: clamp(1.5rem, 4vh, 3rem); }

/* the collections blurb now introduces the Featured Collections from above the spinner */
.coll-blurb.coll-blurb-top {
  position: relative; z-index: 2;
  max-width: 46rem; margin: 0 auto clamp(1.5rem, 4vh, 3rem); padding: 0 1.25rem; text-align: center;
  font-size: .9rem; line-height: 1.75; color: var(--dim);
}

/* the blurb stands clear of the header photo, and sits close above the spinner */
.hero + .coll-blurb.coll-blurb-top { margin-top: clamp(2.5rem, 7vh, 5rem); margin-bottom: 0; }

/* the stronger cathedral eases in and out at the top and bottom of the orbit's section, so there's no visible seam */
.cathedral-front {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

/* Filmography page: production cards in the same grid as the collections, each with a poster panel */
.all-grid .film-poster, .film-poster {
  margin: 0; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 34% 26%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%),
              radial-gradient(ellipse at 50% 50%, #3d2356 0%, #1e1030 55%, #0b0710 100%);
  box-shadow: inset 0 0 0 1px rgba(255,179,107,.45);
}
.film-poster img { width: 100%; height: 100%; object-fit: cover; }
.film-play {
  width: 0; height: 0; margin-left: .4rem; border-style: solid; border-width: 1.1rem 0 1.1rem 1.9rem;
  border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 10px rgba(255,106,43,.55)); transition: transform .3s;
}
.film-card:hover .film-play { transform: scale(1.12); }
.heading-link { color: inherit; text-decoration: none; -webkit-text-fill-color: inherit; }
.heading-link:hover { text-shadow: 0 0 8px rgba(255,106,43,.7); }

/* Arrows on each collection page, to step to the previous or next collection. They use the site's own lettering:
   Poppins Light in white, with the same soft shadow behind it, and the collection's name in small spaced capitals. */
.coll-step a {
  position: fixed; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: clamp(3.5rem, 7vw, 6.5rem); padding: .6rem 0; text-decoration: none; color: var(--tube);
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 300;
  text-shadow: .07em .09em .05em rgba(0,0,0,.85), 0 0 .6em rgba(0,0,0,.35);
  opacity: .78; transition: opacity .3s, transform .3s;
}
.coll-step-prev { left: max(.25rem, env(safe-area-inset-left, 0px)); }
.coll-step-next { right: max(.25rem, env(safe-area-inset-right, 0px)); }
.coll-step-arrow { font-size: clamp(3rem, 6vw, 5.5rem); line-height: .8; font-weight: 200; }
.coll-step-name { font-size: .62rem; letter-spacing: .28em; text-align: center; line-height: 1.5; max-width: 100%; opacity: 0; transition: opacity .3s; }
.coll-step a:hover, .coll-step a:focus-visible { opacity: 1; }
.coll-step-prev:hover { transform: translate(-3px, -50%); }
.coll-step-next:hover { transform: translate(3px, -50%); }
.coll-step a:hover .coll-step-arrow, .coll-step a:focus-visible .coll-step-arrow { text-shadow: 0 0 10px rgba(255,106,43,.75), .07em .09em .05em rgba(0,0,0,.85); }
.coll-step a:hover .coll-step-name, .coll-step a:focus-visible .coll-step-name { opacity: 1; }
@media (hover: none), (max-width: 700px) {
  .coll-step a { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: none; width: 4rem; opacity: .9; }
  .coll-step-prev:hover, .coll-step-next:hover { transform: none; }
  .coll-step-arrow { font-size: 3rem; }
}
@media (hover: none), (max-width: 700px) {
  /* on phones the arrows sit in the lower corners, on a soft dark disc so they stay clear over text and photos */
  .coll-step a { width: 3.2rem; height: 3.2rem; padding: 0; justify-content: center; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 72%); }
  .coll-step-name { display: none; }
  .coll-step-arrow { font-size: 2.6rem; line-height: 1; margin-top: -.3rem; }
}

/* Collection pages leave room at each side for the arrows, so text and photos never pass beneath them */
.collection-page { --step-w: clamp(3.5rem, 7vw, 6.5rem); --gutter: calc(var(--step-w) + 1.25rem); }
.collection-page .bar { --gutter: clamp(1.25rem, 4vw, 3.5rem); }      /* the menu bar keeps its usual edges */
@media (hover: none), (max-width: 700px) {
  /* on phones the arrows leave the corners and sit in their own row at the foot of the page, clear of everything */
  .collection-page { --gutter: clamp(1.25rem, 4vw, 3.5rem); }
  .collection-page .coll-step {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .collection-page .coll-step a {
    position: static; transform: none; width: auto; height: auto; border-radius: 0; background: none;
    flex-direction: row; gap: .5rem; padding: .4rem 0; opacity: .9;
  }
  .collection-page .coll-step a.coll-step-next { flex-direction: row-reverse; }
  .collection-page .coll-step-name { display: block; opacity: 1; font-size: .62rem; text-align: left; }
  .collection-page .coll-step-next .coll-step-name { text-align: right; }
  .collection-page .coll-step-arrow { font-size: 2.4rem; margin-top: -.25rem; }
}
/* the "About this collection" panel keeps clear of the arrows too, at every width */
.collection-page .excerpt { max-width: none; margin-left: max(var(--gutter), calc((100% - 62rem) / 2)); margin-right: max(var(--gutter), calc((100% - 62rem) / 2)); }

/* the collection arrows, three times their previous size */
.coll-step-arrow { font-size: clamp(9rem, 18vw, 16.5rem); line-height: .62; }
.collection-page { --step-w: clamp(4.5rem, 8.5vw, 8.5rem); }
.coll-step a { width: var(--step-w, clamp(4.5rem, 8.5vw, 8.5rem)); }
@media (hover: none), (max-width: 700px) {
  .collection-page .coll-step-arrow { font-size: 7.2rem; line-height: .62; margin-top: -.6rem; }
}

/* ---------- The photo viewer, reworked ----------
   A counter at the top left and Close at the top right, well apart; the photograph shown whole and to scale, never
   cropped or enlarged past its own size; large thin arrows either side; the caption and its collection beneath. */
dialog#viewer { padding: 0; border: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: #000; color: var(--tube); }
dialog#viewer::backdrop { background: #000; }
#viewer .viewer { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
#viewer .viewer-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 4vw, 3rem) .5rem; }
#viewer .viewer-count { font-size: .75rem; letter-spacing: .3em; color: var(--dim); }
#viewer button.viewer-close { position: static; all: unset; cursor: pointer; font-size: .8rem; letter-spacing: .3em; color: var(--tube); padding: .5rem 0 .5rem 1rem; text-shadow: .07em .09em .05em rgba(0,0,0,.85); }
#viewer button.viewer-close span { font-size: 1.3rem; vertical-align: -.12em; margin-left: .35rem; letter-spacing: 0; }
#viewer button.viewer-close:hover, #viewer button.viewer-close:focus-visible { text-shadow: 0 0 8px rgba(255,106,43,.75); }
#viewer .viewer-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 0; padding: .5rem clamp(4rem, 9vw, 9rem); }
#viewer .viewer-stage img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  transform: none; filter: none; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#viewer button.viewer-arrow {
  all: unset; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 200; font-size: clamp(5rem, 9vw, 9rem); line-height: .6; color: var(--tube);
  padding: 1rem clamp(.5rem, 2vw, 2rem); opacity: .7; text-shadow: .07em .09em .05em rgba(0,0,0,.85); transition: opacity .25s;
}
#viewer button.viewer-prev { left: 0; }
#viewer button.viewer-next { right: 0; }
#viewer button.viewer-arrow:hover, #viewer button.viewer-arrow:focus-visible { opacity: 1; text-shadow: 0 0 10px rgba(255,106,43,.75), .07em .09em .05em rgba(0,0,0,.85); }
#viewer .viewer-foot { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .75rem clamp(1.25rem, 4vw, 3rem) 1.25rem; text-align: center; }
#viewer .viewer-foot p { margin: 0; font-size: .82rem; letter-spacing: .14em; color: var(--tube); font-style: normal; }
#viewer .viewer-coll { font-size: .72rem; letter-spacing: .26em; color: var(--tube); text-decoration: none; border-bottom: 1px solid rgba(255,106,43,.7); padding-bottom: .15rem; }
#viewer .viewer-coll:hover { text-shadow: 0 0 8px rgba(255,106,43,.75); }
#viewer .viewer-coll-label { color: var(--dim); margin-right: .5em; }
#viewer .viewer-cat { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: #fff; text-decoration: none; border: 1px solid rgba(255,106,43,.7); border-radius: 999px; padding: .45rem 1.1rem; margin-top: .2rem; }
#viewer .viewer-cat:hover, #viewer .viewer-cat:focus-visible { border-color: var(--tube); box-shadow: 0 0 10px rgba(255,106,43,.55); }
#viewer .viewer-cat[hidden] { display: none; }
@media (max-width: 700px) {
  #viewer .viewer-stage { padding: .25rem 2.6rem; }
  #viewer button.viewer-arrow { font-size: 4rem; padding: 1rem .35rem; }
}

/* the viewer's group switcher: the set now showing, with the previous and next sets either side of it */
#viewer .viewer-top { display: grid; grid-template-columns: 1fr auto 1fr; }
#viewer .viewer-top .viewer-close { justify-self: end; }
#viewer .viewer-group { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem); font-size: .72rem; letter-spacing: .28em; }
#viewer .viewer-group[hidden] { display: none; }
#viewer .viewer-group-now { font-size: .9rem; letter-spacing: .32em; color: var(--tube); }
#viewer button.viewer-group-btn { all: unset; cursor: pointer; color: var(--dim); padding: .5rem .25rem; text-shadow: .07em .09em .05em rgba(0,0,0,.85); }
#viewer button.viewer-group-btn span[aria-hidden] { font-size: 1.6rem; vertical-align: -.18em; color: var(--tube); }
#viewer button.viewer-group-btn:hover, #viewer button.viewer-group-btn:focus-visible { color: var(--tube); text-shadow: 0 0 8px rgba(255,106,43,.75); }
@media (max-width: 700px) {
  #viewer .viewer-top { grid-template-columns: 1fr auto; row-gap: .25rem; }
  #viewer .viewer-group { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  #viewer .viewer-group .viewer-group-prev, #viewer .viewer-group .viewer-group-next { display: none; }
}

/* Close on each collection page: back to the page of all collections */
.collection-page main { position: relative; }
.coll-close {
  position: absolute; top: calc(var(--bar-h, 64px) + clamp(.75rem, 2vw, 1.5rem)); right: var(--gutter); z-index: 5;
  font-size: .8rem; letter-spacing: .3em; color: var(--tube); text-decoration: none; padding: .5rem 0;
  text-shadow: .07em .09em .05em rgba(0,0,0,.85);
}
.coll-close span { font-size: 1.3rem; vertical-align: -.12em; margin-left: .35rem; letter-spacing: 0; }
.coll-close:hover, .coll-close:focus-visible { text-shadow: 0 0 8px rgba(255,106,43,.75); }
@media (max-width: 700px) {
  /* on phones Close takes its own line just below the menu bar, so the year and title start beneath it */
  .collection-page .coll-close { position: relative; top: auto; right: auto; display: block; width: max-content; margin: calc(var(--bar-h, 93px) + .5rem) var(--gutter) -2.5rem auto; }
}

/* the Filmography on the Collections page: its heading lands at the top of the screen, just below the menu bar */
/* (the page already keeps a little room at the top when it scrolls to a heading; these settle the heading just below the menu bar) */
.film-section { scroll-margin-top: calc(var(--bar-h, 64px) + 1rem - 4.5rem - 3rem); }
.upcoming-grid > li { scroll-margin-top: calc(var(--bar-h, 64px) + 1rem - 4.5rem); }
@media (max-width: 760px) {
  .film-section { scroll-margin-top: calc(var(--bar-h, 93px) + 1rem - 6rem - 2rem); }
  .upcoming-grid > li { scroll-margin-top: calc(var(--bar-h, 93px) + 1rem - 6rem); }
}
.film-section { margin-top: clamp(3rem, 7vw, 6rem); }
/* the reel's link to the full filmography */
.reel-more { text-align: center; margin: .9rem 0 0; }
.reel-more a { font-size: .8rem; letter-spacing: .3em; color: var(--tube); text-decoration: none; border-bottom: 1px solid rgba(255,106,43,.7); padding-bottom: .15rem; }
.reel-more a:hover { text-shadow: 0 0 8px rgba(255,106,43,.75); }
/* the Upcoming collections page: one sample photograph per collection */
.upcoming-card { display: block; }
.upcoming-sample { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,179,107,.45); }
.upcoming-sample img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.all-grid .upcoming-empty, .upcoming-empty { display: grid; place-items: center;
  background: radial-gradient(ellipse at 34% 26%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%), radial-gradient(ellipse at 50% 50%, #3d2356 0%, #1e1030 55%, #0b0710 100%); }
.upcoming-empty span { font-size: .7rem; letter-spacing: .3em; color: var(--dim); padding: 1rem; text-align: center; }
.upcoming-card h2 { margin: 1rem 0 .3rem; }
.upcoming-card p { margin: 0; color: var(--dim); font-style: italic; }
/* the Filmography heading sits right at the top of the screen when its link is followed: no extra space above it,
   and the section is always at least a screen tall so the page can scroll that far */
.film-section .album-head { padding-top: 0; }
.film-section { min-height: calc(100vh - var(--bar-h, 64px)); min-height: calc(100dvh - var(--bar-h, 64px)); }

/* Phones (Patrick, 4 Oct 2026): the menu bar stays on one row - name on the left, Work / About / Contact on the
   right - with the lettering scaled to the screen width so it fits; the footer keeps its two columns side by side. */
@media (max-width: 760px) {
  .bar-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .8rem; padding-bottom: .8rem; }
  .mark { font-size: clamp(.55rem, 2.6vw, 1rem); letter-spacing: .12em; }
  .nav { gap: clamp(.5rem, 2.4vw, 1.1rem); }
  .nav a, .nav-work { font-size: clamp(.55rem, 2.6vw, 1rem); letter-spacing: .12em; }
  .nav-work { gap: .3rem; position: relative; top: -.18em; }
  .work-list { left: auto; right: -.75rem; }
  html { scroll-padding-top: calc(3.5rem + env(safe-area-inset-top, 0px)); }
  footer { flex-wrap: nowrap; align-items: flex-start; font-size: .68rem; }
  footer > span { flex: 1 1 0; min-width: 0; }
  footer > span:last-child { text-align: right; }
  /* About: your words on the left, Online collections / Upcoming / Filmography on the right, as on a computer */
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.9rem, 4vw, 2rem); }
  .about h2 { font-size: clamp(1.35rem, 7vw, 2.4rem); letter-spacing: .12em; margin-bottom: 1rem; }
  .about p, .about li, .about em { font-size: clamp(.62rem, 2.9vw, .9rem); letter-spacing: .06em; line-height: 1.55; }
  .statement p:first-of-type { font-size: clamp(.72rem, 3.4vw, 1.05rem); line-height: 1.45; }
  .record h3 { font-size: clamp(.68rem, 3.1vw, 1rem); letter-spacing: .14em; margin-top: 1.6rem; }
  .record li { padding: .5rem 0; gap: .5rem; }
  .record-more a { font-size: clamp(.62rem, 2.9vw, .9rem); letter-spacing: .14em; }
  .about a, .about p, .about li { overflow-wrap: break-word; }
  .record li { grid-template-columns: clamp(2.1rem, 9vw, 3.2rem) minmax(0, 1fr); }
  .record time { font-size: clamp(.68rem, 3vw, .95rem); padding-top: .05rem; }
}

/* Catalogue pages: photos after the first 50 wait behind "Show more" */
.album-grid button[data-later] { display: none; }
.cat-more-row { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Work menu (4 Oct 2026): with nine categories it can be taller than the screen. It stops at the bottom of the
   screen and scrolls on its own; reaching its end never scrolls the page behind it. */
.work-list { max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,179,107,.5) transparent; }

/* Work menu on computers: each category name stays on one line (the menu widens to fit "Light Painting") */
@media (min-width: 761px) { .work-list a { white-space: nowrap; } }

/* "Coming soon" oval (videography, 4 Oct 2026): the same glowing oval as the showreel, without a play button */
.soon-oval {
  position: relative; display: grid; place-content: center; justify-items: center; gap: .55rem; text-align: center;
  width: min(72%, 820px); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 26%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(ellipse at 50% 50%, #3d2356 0%, #1e1030 52%, #0b0710 100%);
  box-shadow: inset 0 0 0 1px rgba(255,179,107,.55), inset 0 -26px 50px rgba(0,0,0,.65), 0 24px 60px rgba(0,0,0,.6), 0 0 34px rgba(255,106,43,.22);
}
.soon-kicker { font-size: clamp(.6rem, 1.6vw, .85rem); letter-spacing: .35em; color: var(--dim); text-transform: uppercase; }
.soon-title { font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 5vw, 3.2rem); letter-spacing: .18em; color: var(--tube); text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,106,43,.55); }
.soon-line { font-size: clamp(.55rem, 1.5vw, .8rem); letter-spacing: .3em; color: var(--tube); text-transform: uppercase; opacity: .85; }
.film-section .soon-oval { margin-top: clamp(1rem, 3vw, 2rem); }
@media (max-width: 760px) { .soon-oval { width: 92%; } }

/* Contact form (4 Oct 2026): messages go to Patrick by Web3Forms; his address is never shown */
.contact-form { width: min(100%, 36rem); margin: 1.8rem auto 0; display: grid; gap: 1rem; text-align: left; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { display: grid; gap: .4rem; }
.contact-form label span { font-size: .72rem; letter-spacing: .26em; color: var(--dim); text-transform: uppercase; }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 1rem; letter-spacing: .04em; text-transform: none; color: var(--tube);
  background: rgba(10,8,14,.72); border: 1px solid rgba(255,179,107,.45); border-radius: 4px; padding: .7rem .85rem;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--tube); box-shadow: 0 0 0 1px var(--sodium), 0 0 12px rgba(255,106,43,.45); }
.contact-form .cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .cf-send {
  justify-self: center; cursor: pointer; font: inherit; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: #fff;
  background: rgba(30,16,48,.85); border: 1px solid rgba(255,106,43,.75); border-radius: 999px; padding: .75rem 1.6rem;
}
.contact-form .cf-send:hover, .contact-form .cf-send:focus-visible { box-shadow: 0 0 14px rgba(255,106,43,.6); }
.contact-form .cf-send[disabled] { opacity: .6; cursor: progress; }
.contact-form .cf-status { margin: 0; min-height: 1.4em; text-align: center; font-size: .82rem; letter-spacing: .12em; color: var(--tube); }
.contact-form .cf-status.error { color: #ffb36b; }
@media (max-width: 560px) { .contact-form .cf-row { grid-template-columns: 1fr; } }

/* Orbs (4 Oct 2026): .snap shows an oval instantly (site.js then shrinks it back into its orb frame by frame) */
.globes .globe.snap, .globes.has-focus .globe.snap { transition: none !important; }

/* Viewer category bar: the current category sits exactly in the centre, whatever the length of its neighbours */
#viewer .viewer-group { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: min(46rem, 62vw); }
#viewer .viewer-group [data-act="group-prev"] { justify-self: end; }
#viewer .viewer-group [data-act="group-next"] { justify-self: start; }
@media (max-width: 760px) { #viewer .viewer-group { width: 100%; } }

/* Preview Collections page: a tile for an upcoming collection that has no sample photo yet */
.preview-empty { margin: 0 0 clamp(.6rem, 1.5vw, 1rem); break-inside: avoid; aspect-ratio: 4 / 3; display: grid; place-content: center; gap: .6rem; text-align: center;
  padding: 1rem; border: 1px solid rgba(255,179,107,.35); background: radial-gradient(ellipse at 50% 40%, rgba(61,35,86,.75), rgba(11,7,16,.85)); }
.preview-empty-name { font-family: var(--display); font-weight: 300; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: .14em; color: var(--tube); text-transform: uppercase; }
.preview-empty-note { font-size: .7rem; letter-spacing: .28em; color: var(--dim); text-transform: uppercase; }
.preview-page .album-head h1 { font-size: clamp(1.9rem, 4vw, 3.3rem); overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* Featured spinner (4 Oct 2026): fills the width on smaller windows as before; on wide screens it is capped at about
   70% of the width, so the space either side grows with the window and it stays in proportion with the site */
.collections.has-band .coll-stage { width: min(100%, max(1000px, 70vw)); margin-left: auto; margin-right: auto; }