/* ==========================================================================
   Sideline Photography — front-end styles
   One file, no build step. Edit the tokens in :root to rebrand the whole site.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Brand ---------------------------------------------------------------- */
  --accent:        #f5c451;
  --accent-ink:    #171207;
  --accent-soft:   rgba(245, 196, 81, .14);

  /* Surfaces ------------------------------------------------------------- */
  --bg:            #0c0e12;
  --bg-2:          #11141a;
  --panel:         #161a22;
  --panel-2:       #1c212b;
  --line:          #242a35;
  --line-soft:     #1b202a;

  /* Ink ------------------------------------------------------------------ */
  --ink:           #e9edf4;
  --ink-2:         #aab4c4;
  --ink-3:         #7a8496;

  --danger:        #f87171;
  --good:          #4ade80;

  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 18px 50px -20px rgba(0, 0, 0, .85);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Barlow Condensed", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 66px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Browsers give <figure> a default `margin: 1em 40px`. Both the photo tiles and
   the cart items are figures, so without this the justified grid gets 80px
   gutters and the layout never closes up. */
figure { margin: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(1360px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 1.75rem); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Header -- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 14, 18, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .bar {
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--header-h);
}

.brand { display: flex; align-items: baseline; gap: .55rem; flex-shrink: 0; }
.brand strong {
  font-family: var(--display);
  font-size: 1.55rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1;
}
.brand em {
  font-style: normal; color: var(--accent);
  font-size: 1.55rem; font-family: var(--display); font-weight: 700; line-height: 1;
}

.nav { display: flex; gap: 1.4rem; margin-left: .6rem; }
.nav a {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); transition: color .18s;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.header-search { flex: 1; max-width: 420px; margin-left: auto; }
.header-search form { position: relative; }
.header-search input {
  width: 100%; height: 40px; padding: 0 2.6rem 0 2.5rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); font: inherit; font-size: .92rem;
  transition: border-color .18s, background .18s;
}
.header-search input::placeholder { color: var(--ink-3); }
.header-search input:focus { background: var(--panel-2); border-color: #333c4b; outline: none; }
.header-search .icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-3); pointer-events: none;
}

.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  height: 40px; padding: 0 1rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: border-color .18s, background .18s;
}
.cart-btn:hover { background: var(--panel-2); border-color: #333c4b; }
.cart-btn.has-items { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cart-btn svg { width: 17px; height: 17px; }
.cart-count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Phone menu (hamburger) --
   Below 900px the horizontal nav does not fit, so it is replaced by this
   button and the panel underneath the bar. Before this existed the nav was
   simply hidden, which left a phone visitor with no way to reach any page. */

.menu-toggle {
  display: none; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 999px;
  place-items: center; padding: 0;
}
.menu-toggle:hover { background: var(--panel-2); border-color: #333c4b; }
.menu-toggle svg { width: 19px; height: 19px; }
.menu-toggle .ex { display: none; }
.site-header.nav-open .menu-toggle .bars { display: none; }
.site-header.nav-open .menu-toggle .ex   { display: block; }

.mobile-nav { display: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .header-search { max-width: none; }
  .menu-toggle { display: grid; }

  /* The real guard against the overflow this replaced: whatever the site gets
     renamed to, the brand gives way rather than shoving the buttons off-screen.
     Scoped to the header — the footer brand must stay free to wrap. */
  .site-header .brand { flex-shrink: 1; min-width: 0; }
  .site-header .brand strong {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .mobile-nav { border-top: 1px solid var(--line-soft); padding: .6rem 0 1rem; }
  .site-header.nav-open .mobile-nav { display: block; }
  .mobile-nav a {
    display: block; padding: .95rem 1.5rem;      /* a comfortable 44px+ tap target */
    font-size: .95rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav a:hover { color: var(--ink); background: var(--panel); }
  .mobile-nav a[aria-current="page"] { color: var(--accent); }

  .mobile-nav .m-search { display: none; position: relative; padding: .3rem 1.5rem 1rem; }
  .mobile-nav .m-search input {
    width: 100%; height: 44px; padding: 0 1rem 0 2.6rem;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; color: var(--ink); font: inherit; font-size: .95rem;
  }
  .mobile-nav .m-search input:focus { background: var(--panel-2); border-color: var(--accent); outline: none; }
  .mobile-nav .m-search .icon {
    position: absolute; left: 2.4rem; top: calc(50% - .35rem);
    transform: translateY(-50%); width: 16px; height: 16px;
    color: var(--ink-3); pointer-events: none;
  }
}

@media (max-width: 560px) {
  .site-header .bar { gap: .6rem; }
  .brand strong, .brand em { font-size: 1.25rem; }
  .cart-btn .label { display: none; }
  .cart-btn { padding: 0 .8rem; }

  /* No room for the search box beside a brand and two buttons, so it moves
     into the menu panel rather than being pushed off the edge. */
  .header-search { display: none; }
  .mobile-nav .m-search { display: block; }
}

/* The full site name is used everywhere except a narrow phone, where only the
   first two words fit. Both are in the markup; CSS picks one. */
.brand .short { display: none; }
@media (max-width: 560px) {
  .brand .full  { display: none; }
  .brand .short { display: block; }
}

/* ----------------------------------------------------------------- Hero -- */

.hero {
  /* No overflow:hidden here — it clips the search type-ahead dropdown.
     The decorative gradient below is inset:0 so it stays inside anyway. */
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(245, 196, 81, .13), transparent 62%),
    radial-gradient(90% 70% at 8% 110%, rgba(70, 120, 210, .10), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .7;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  line-height: .95; letter-spacing: -.01em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 1rem; max-width: 15ch;
}
.hero h1 span { color: var(--accent); }
.hero p.lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-2);
  max-width: 52ch; margin: 0 0 2rem;
}

.hero-search { max-width: 620px; position: relative; }
.hero-search input {
  width: 100%; height: 56px; padding: 0 7.5rem 0 3.2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); font: inherit; font-size: 1rem;
}
.hero-search input:focus { border-color: var(--accent); outline: none; }
.hero-search .icon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-3); }
.hero-search button {
  position: absolute; right: 6px; top: 6px; height: 44px; padding: 0 1.4rem;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: filter .18s;
}
.hero-search button:hover { filter: brightness(1.08); }

.quick-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; align-items: center; }
.quick-links span { font-size: .8rem; color: var(--ink-3); margin-right: .2rem; }
.chip {
  display: inline-block; padding: .32rem .85rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-2); transition: .18s;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }

/* -------------------------------------------------------------- Section -- */

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: 1;
}
.section-head p { margin: .45rem 0 0; color: var(--ink-3); font-size: .93rem; }
.link-more {
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- Event cards -- */

.event-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.event-card {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.event-card:hover { transform: translateY(-4px); border-color: #39424f; box-shadow: var(--shadow); }

.event-card .shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.event-card .shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1); filter: saturate(1.02);
}
.event-card:hover .shot img { transform: scale(1.05); }
.event-card .shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,14,18,.92) 0%, rgba(12,14,18,.35) 42%, transparent 70%);
}
.event-card .shot .empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-3); font-size: .85rem;
}

.event-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem; z-index: 2; }
.event-card h3 {
  font-family: var(--display); font-size: 1.45rem; text-transform: uppercase;
  margin: 0 0 .25rem; line-height: 1.05; letter-spacing: .005em;
}
.event-card .sub { font-size: .84rem; color: var(--ink-2); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.event-card .sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.badge {
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  background: rgba(12,14,18,.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.13);
  padding: .28rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
}
.badge.draft { background: rgba(248,113,113,.2); border-color: rgba(248,113,113,.4); color: #fca5a5; }

/* ------------------------------------------------------- Gallery header -- */

.gallery-head { padding: clamp(2rem, 5vw, 3.2rem) 0 1.6rem; border-bottom: 1px solid var(--line-soft); }
.crumbs { font-size: .8rem; color: var(--ink-3); margin-bottom: .9rem; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 .45rem; opacity: .5; }

.gallery-head h1 {
  font-family: var(--display); font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  text-transform: uppercase; margin: 0 0 .5rem; line-height: .98;
}
.gallery-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--ink-2); font-size: .92rem; }
.gallery-facts b { color: var(--ink); font-weight: 600; }
.gallery-note {
  margin-top: 1.3rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid rgba(245,196,81,.24);
  font-size: .88rem; color: #f3dfae; display: flex; gap: .6rem; align-items: flex-start;
}
.gallery-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .16rem; color: var(--accent); }

/* --------------------------------------------------- Justified photo grid */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0 1.1rem;
}
.toolbar .count { color: var(--ink-3); font-size: .88rem; }
.toolbar .actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
}
.btn:hover { background: var(--panel-2); border-color: #39424f; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: #ffd469; border-color: #ffd469; }
.btn-ghost { background: transparent; }
.btn-danger { color: #fca5a5; border-color: #52282b; }
.btn-danger:hover { background: #2b1618; border-color: #7f3336; }
.btn-lg { padding: .85rem 1.7rem; font-size: .96rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 3rem; }

.tile {
  position: relative; overflow: hidden; border-radius: 8px;
  background: var(--bg-2); cursor: pointer;
  flex-grow: 1; height: 250px;
  transition: box-shadow .25s;
}
/* The last row keeps its natural size rather than stretching absurdly. */
.photo-grid::after { content: ""; flex-grow: 999999999; }

@media (max-width: 900px) { .tile { height: 200px; } }
@media (max-width: 560px) { .tile { height: 152px; } .photo-grid { gap: 5px; } }

.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .3s;
  user-select: none; -webkit-user-drag: none;
}
.tile:hover img { transform: scale(1.045); }

.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,14,.6), transparent 45%);
  opacity: 0; transition: opacity .25s;
}
.tile:hover::after { opacity: 1; }

.tile .no {
  position: absolute; left: .55rem; bottom: .5rem; z-index: 2;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.82); opacity: 0; transition: opacity .25s;
  text-shadow: 0 1px 4px rgba(0,0,0,.7); font-variant-numeric: tabular-nums;
}
.tile:hover .no { opacity: 1; }

/* The select control is ALWAYS visible — faint at rest, solid on hover or when
   chosen. Hiding it behind :hover made it undiscoverable, and invisible outright
   on phones, which is where most visitors are. */
.tile .pick {
  position: absolute; top: .5rem; left: .5rem; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  background: rgba(12,14,18,.5); backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
  opacity: .75; transform: scale(1); transition: .2s;
  padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.tile:hover .pick, .tile.selected .pick, .tile .pick:focus-visible { opacity: 1; }
.tile .pick:hover { background: rgba(12,14,18,.8); transform: scale(1.08); }
.tile .pick svg { width: 16px; height: 16px; color: #fff; opacity: .55; transition: opacity .15s; }
.tile:hover .pick svg { opacity: .9; }
.tile.selected .pick { background: var(--accent); border-color: var(--accent); }
.tile.selected .pick svg, .tile.selected:hover .pick svg { color: var(--accent-ink); opacity: 1; }

/* Price badge on the thumbnail */
.tile .price {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 3;
  background: rgba(12,14,18,.78); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: .74rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  pointer-events: none;
}
.tile.selected .price { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.tile.selected { box-shadow: inset 0 0 0 3px var(--accent); }
.tile.selected img { filter: brightness(.92); }

.tile .zoom {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(12,14,18,.5);
  backdrop-filter: blur(6px); display: grid; place-items: center;
  opacity: 0; transition: .2s; padding: 0; cursor: zoom-in;
}
.tile:hover .zoom { opacity: 1; }
.tile .zoom svg { width: 14px; height: 14px; color: #fff; }

/* ------------------------------------------------------ Search type-ahead */

.suggest {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
}

.suggest-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover, .suggest-row.on { background: var(--panel-2); }
.suggest-row.on { box-shadow: inset 3px 0 0 var(--accent); }

.suggest .sg-text { min-width: 0; flex: 1; }
.suggest .sg-title {
  display: block; font-size: .93rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest .sg-sub {
  display: block; font-size: .78rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest .sg-count {
  flex: 0 0 auto; font-size: .74rem; font-weight: 700;
  color: var(--ink-2); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .18rem .6rem; font-variant-numeric: tabular-nums;
}

.suggest-all {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.suggest-all .sg-title {
  font-weight: 600; color: var(--accent); font-size: .85rem;
  white-space: normal;
}

/* The header box is narrow — drop the metadata line there. */
.header-search .suggest .sg-sub { display: none; }
@media (max-width: 560px) {
  .suggest .sg-count { display: none; }
}

/* ---------------------------------------------------------- Sticky cart -- */

.cartbar {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translate(-50%, 160%);
  z-index: 70; width: min(660px, calc(100% - 1.6rem));
  background: rgba(22, 26, 34, .93); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .6rem .55rem 1.3rem;
  transition: transform .38s cubic-bezier(.2,.8,.25,1), visibility .38s;
  visibility: hidden;
}
.cartbar.show { transform: translate(-50%, 0); visibility: visible; }
.cartbar .txt { flex: 1; min-width: 0; font-size: .9rem; }
.cartbar .txt b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cartbar .txt small { display: block; color: var(--ink-3); font-size: .78rem; }
.cartbar .btn { border-radius: 999px; }
@media (max-width: 520px) {
  .cartbar { padding-left: 1rem; gap: .5rem; }
  .cartbar .txt small { display: none; }
  .cartbar .btn { padding: .6rem .9rem; font-size: .82rem; }
}

/* ------------------------------------------------------------ Lightbox --- */

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6, 8, 11, .96);
  backdrop-filter: blur(6px);
}
/* minmax(0, 1fr), not 1fr. A bare 1fr keeps an automatic minimum equal to the
   content, so a 1500px-tall photo forces the middle row to its full natural
   height and shoves the "Add to selection" bar off the bottom of the screen. */
.lightbox.open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

/* Actions live in the TOP bar, beside the close button: always on screen
   whatever the photo's shape, and it leaves the full remaining height
   for the picture itself. */
.lb-top {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1.1rem; color: var(--ink-2); font-size: .85rem;
  flex-wrap: wrap;
}
.lb-top .who { min-width: 0; flex: 1 1 auto; }
.lb-top .who b {
  color: var(--ink); display: block; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-top .who span { font-variant-numeric: tabular-nums; }

.lb-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.lb-actions .btn { border-radius: 999px; padding: .55rem 1.05rem; font-size: .86rem; }
.lb-actions .btn svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  /* Title and close on the first line, the two actions on their own line
     underneath, each taking half the width so both stay comfortably tappable. */
  .lb-top { padding: .7rem .8rem; row-gap: .6rem; }
  .lb-top .who { flex: 1 1 60%; order: 1; }
  .lb-top .lb-icon { order: 2; }
  .lb-actions { order: 3; flex: 1 0 100%; }
  .lb-actions .btn { flex: 1; justify-content: center; padding: .6rem .5rem; }
}
.lb-icon {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: var(--ink); cursor: pointer; padding: 0; flex: 0 0 auto; transition: .18s;
}
.lb-icon:hover { background: rgba(255,255,255,.14); }
.lb-icon svg { width: 17px; height: 17px; }

/* Flex, not grid: inside a grid the image sits in an auto-sized implicit row,
   so its max-height:100% has nothing definite to resolve against and the photo
   spills past the controls. As a flex item against a definite-height container
   it is clamped properly. overflow:hidden is the backstop. */
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  min-height: 0;
  overflow: hidden;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px; user-select: none; -webkit-user-drag: none;
  animation: lbin .3s ease;
}
@keyframes lbin { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20,24,31,.72); border: 1px solid rgba(255,255,255,.12);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: .18s;
}
.lb-nav:hover { background: rgba(40,46,58,.9); }
.lb-nav svg { width: 20px; height: 20px; }
.lb-prev { left: .8rem; } .lb-next { right: .8rem; }
@media (max-width: 560px) { .lb-nav { width: 38px; height: 38px; } }

.lb-hint {
  text-align: center; color: var(--ink-3); font-size: .74rem;
  padding: .7rem 1rem .9rem; margin: 0;
}
/* Keyboard hints are noise on a touch device, and the space is better spent
   on the photo. */
@media (max-width: 700px), (hover: none) {
  .lb-hint { display: none; }
}

/* ------------------------------------------------------------- Cart page -- */

.page-head { padding: clamp(2rem, 5vw, 3.4rem) 0 1.4rem; }
.page-head h1 {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase; margin: 0 0 .4rem; line-height: 1;
}
.page-head p { color: var(--ink-2); margin: 0; max-width: 60ch; }

.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2.4rem; align-items: start; padding-bottom: 5rem; }
@media (max-width: 940px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-items { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cart-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.cart-item img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.cart-item .cap { padding: .5rem .6rem; font-size: .74rem; color: var(--ink-3); }
.cart-item .cap b {
  display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
  color: var(--ink-2); font-weight: 600; font-size: .78rem;
}
.cart-item .cap .line-price {
  color: var(--accent); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}

/* Order summary above the checkout form */
.totals {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .35rem .95rem; margin-bottom: 1.3rem; background: var(--bg-2);
}
.totals .row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; font-size: .9rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.totals .row + .row { border-top: 1px solid var(--line-soft); }
.totals .grand { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.totals .grand span:last-child { color: var(--accent); }
.cart-item .rm {
  position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(12,14,18,.75); border: 1px solid rgba(255,255,255,.16);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: .18s;
}
.cart-item .rm:hover { background: #7f3336; border-color: #a34a4d; }
.cart-item .rm svg { width: 13px; height: 13px; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.panel h2 { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; margin: 0 0 .3rem; }
.panel .hint { color: var(--ink-3); font-size: .85rem; margin: 0 0 1.2rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .7rem .85rem; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-size: .95rem; transition: border-color .18s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field .help { font-size: .78rem; color: var(--ink-3); margin-top: .3rem; }
.field.err input, .field.err textarea { border-color: var(--danger); }

.notice { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-size: .9rem; }
.notice-err  { background: #2c1719; border: 1px solid #6b2f33; color: #fca5a5; }
.notice-ok   { background: #12271c; border: 1px solid #2f6b47; color: #86efac; }
.notice-info { background: var(--accent-soft); border: 1px solid rgba(245,196,81,.28); color: #f3dfae; }

.empty-state { text-align: center; padding: 5rem 1rem; color: var(--ink-3); }
.empty-state svg { width: 46px; height: 46px; margin-bottom: 1rem; opacity: .45; }
.empty-state h2 { font-family: var(--display); text-transform: uppercase; color: var(--ink); font-size: 1.7rem; margin: 0 0 .4rem; }

.steps { list-style: none; padding: 0; margin: 1.4rem 0 0; counter-reset: s; }
.steps li {
  position: relative; padding-left: 2.4rem; margin-bottom: .9rem;
  color: var(--ink-2); font-size: .88rem; counter-increment: s;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid rgba(245,196,81,.3);
  color: var(--accent); font-size: .74rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------- Footer -- */

.site-footer {
  border-top: 1px solid var(--line-soft); background: var(--bg-2);
  padding: 2.6rem 0 2rem; margin-top: auto; color: var(--ink-3); font-size: .86rem;
}
.site-footer .cols { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ------------------------------------------------------- Search filters --
   Four columns where there is room; two, then one, where there is not. */

.search-form {
  margin-top: 1.5rem; display: grid; gap: .6rem;
  grid-template-columns: 1fr auto auto auto; align-items: end; max-width: 900px;
}
.search-form .field { margin: 0; min-width: 0; }
.search-form .field.wide { grid-column: 1 / -1; max-width: 420px; }
.search-form button { height: 44px; }

@media (max-width: 720px) {
  .search-form { grid-template-columns: 1fr 1fr; }
  .search-form .field:first-child { grid-column: 1 / -1; }
  .search-form button { grid-column: 1 / -1; }
  .search-form .field.wide { max-width: none; }
}
@media (max-width: 420px) {
  .search-form { grid-template-columns: 1fr; }
}

/* The footer brand carries the full site name and nothing squeezes it, so it
   wraps onto a second line rather than forcing the whole page sideways —
   which is what a long name did here on any phone under 380px. */
.site-footer .brand { flex-shrink: 1; min-width: 0; flex-wrap: wrap; }
.site-footer .brand strong { min-width: 0; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--ink); }
.site-footer .legal { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); font-size: .78rem; }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* -------------------------------------------------------------- Utility --- */

.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.protected img { -webkit-touch-callout: none; user-select: none; pointer-events: auto; }

.pager { display: flex; gap: .5rem; justify-content: center; padding: 1rem 0 4rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 .7rem; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 600;
}
.pager a:hover { border-color: var(--accent); }
.pager .current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pager .gap { background: none; border: 0; }

.toast {
  position: fixed; left: 50%; bottom: 5.6rem; transform: translate(-50%, 20px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: .7rem 1.15rem; border-radius: 999px; font-size: .86rem;
  box-shadow: var(--shadow); z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Portfolio and gear — the showcase side of the site

   Nothing here is for sale, so these pages are deliberately quieter than the
   match galleries: taller tiles, no badges, and no select circle.
   ========================================================================== */

/* Showcase tiles run a little taller than gallery ones — there is no price
   badge or select control competing for the frame, so the photo gets the room. */
.photo-grid.showcase .tile { height: 300px; }
@media (max-width: 900px) { .photo-grid.showcase .tile { height: 230px; } }
@media (max-width: 560px) { .photo-grid.showcase .tile { height: 170px; } }

.photo-grid.showcase .tile img { object-fit: cover; }

.tile .caption {
  position: absolute; left: .7rem; right: .7rem; bottom: .55rem; z-index: 2;
  font-size: .78rem; font-weight: 600; color: #fff;
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.tile:hover .caption, .tile:focus-visible .caption { opacity: 1; transform: none; }

/* .tile .zoom is already styled above — shared with the match galleries. */

/* -------------------------------------------------- Portfolio categories -- */

.cat-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .28s;
}
.cat-card:hover { transform: translateY(-4px); border-color: #39424f; box-shadow: var(--shadow); }
.cat-card .shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.cat-card .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.cat-card:hover .shot img { transform: scale(1.06); }
.cat-card .shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,10,14,.94) 4%, rgba(8,10,14,.45) 42%, transparent 72%);
}
.cat-card .shot .empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-3); font-size: .85rem;
}
.cat-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.3rem; z-index: 2; }
.cat-card h3 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .01em;
  font-size: 1.6rem; margin: 0 0 .25rem; color: var(--ink);
}
.cat-card .meta p { margin: 0 0 .5rem; font-size: .85rem; color: var(--ink-2); }
.cat-card .n { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------ Enquiry call-out -- */

.enquire-panel {
  display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; max-width: none;
}
.enquire-panel > div { flex: 1 1 320px; min-width: 0; }
.enquire-panel .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------ Gear -- */

.gear-grid {
  display: grid; gap: 1rem; margin-bottom: 2.4rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gear-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.gear-card.fav { border-color: rgba(245,196,81,.4); }
.gear-card .pic { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); }
.gear-card .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* An item with no picture still needs to read as a card rather than a hole. */
.gear-card .pic .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); opacity: .55; }
.gear-card .pic .ph svg { width: 44px; height: 44px; }
.gear-card .star {
  position: absolute; top: .6rem; left: .6rem;
  background: var(--accent); color: var(--accent-ink);
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px;
}
.gear-card .body { padding: 1rem 1.1rem 1.2rem; }
.gear-card h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.2rem; margin: 0 0 .25rem; color: var(--ink);
}
.gear-card .spec { margin: 0 0 .55rem; font-size: .8rem; color: var(--accent); font-weight: 600; }
.gear-card .note { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.55; }