/* Client portals, dashboard and every page he sends: glass on black */
:root {
  /* Shared by every page that links this file. Glass on black: one typeface, no colour,
     type dimmed by opacity rather than by a grey. */
  --bg: #000000;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #F2F2F2;
  --dim: rgba(242, 242, 242, 0.62);
  --radius: 14px;
  --font-display: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  --glass: rgba(255, 255, 255, 0.05);
  --glass-edge: rgba(255, 255, 255, 0.11);
  --glass-lip: 0 1px 0 rgba(255, 255, 255, 0.14) inset;
  --glass-float: rgba(20, 20, 24, 0.42);
  --glass-float-edge: rgba(255, 255, 255, 0.12);
  --glass-float-lip: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 18px 50px -18px rgba(0, 0, 0, 0.9);
  --glass-blur: blur(26px) saturate(180%);
  --well: rgba(0, 0, 0, 0.3);
}

@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* an explicit display rule must never resurrect a hidden element */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
}

/* ============ HERO ============ */
.hero {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4.5rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--line);
}

.hero-kicker {
  letter-spacing: 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}

.hero-sub {
  margin-top: 1.2rem;
  max-width: 36rem;
  color: var(--dim);
  font-size: 1.05rem;
}

/* ============ SECTIONS ============ */
.section {
  max-width: 62rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 1rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  color: var(--text);
  letter-spacing: -0.03em;
}

.section-lede {
  color: var(--dim);
  margin: 0.5rem 0 2rem;
  max-width: 42rem;
}

.muted { color: var(--dim); }

/* ============ DEAL TILES ============ */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}

.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.tile .num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.03em;
}

.tile .lbl {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.3rem;
}

/* ============ NEXT SHOOT ============ */
.shoot-card {
  border: 1px solid var(--text);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.shoot-date {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.shoot-meta { color: var(--dim); margin-top: 0.45rem; font-size: 0.95rem; }

.shoot-count {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.6rem;
  min-width: 8.5rem;
}

.shoot-count .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.shoot-count .lbl {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.shoot-checklist {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.shoot-checklist span {
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
}

/* ============ FOLDING ADMIN PANELS ============ */
/* Two classes, so these beat the single-class .panel rules written
   inside admin.html without depending on which stylesheet loads last. */
.panel.collapsible { padding: 0; }

.panel-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
}

.panel-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.panel-summary {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.panel-arrow {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--dim);
  transition: transform 0.18s ease, color 0.15s;
}

.panel.open .panel-arrow { transform: rotate(90deg); color: var(--text); }
.panel-head:hover .panel-arrow,
.panel-head:hover .panel-summary { color: var(--text); }
.panel-head:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

.panel-body { padding: 0 1.5rem 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .panel-arrow { transition: none; }
}

@media (max-width: 600px) {
  .panel-head { padding: 1rem 1.1rem; gap: 0.7rem; }
  .panel-title { font-size: 1.12rem; }
  .panel-body { padding: 0 1.1rem 1.2rem; }
}

/* A yes/no switch in the admin. Every other field stacks its label on
   top, this one sits beside the box, so it needs its own rule. */
.field.check {
  flex: 0 0 100%;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.field.check input {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  accent-color: #ffffff;
  cursor: pointer;
}

.field.check span {
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* A boxed row. The client admin defines its own version inside that
   page; this is the shared one, so a row on the dashboard is not
   unstyled just because it was written later. */
.item {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  position: relative;
}

/* ============ A PARTNER'S PAGE ============ */
/* Somebody arrives here from a person they trust, so it opens with the
   work moving and their name, and only then starts explaining. */
/* The top of a partner's page. It used to hold a reel behind the
   type; without one there is nothing to darken and nothing to clip,
   so it is sized to the words instead of to footage. */
.ref-reel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: 3rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.ref-mark {
  max-width: 62rem;
  margin: 0 auto;
  width: 100%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--dim);
}

.ref-from { max-width: 62rem; margin: 0 auto; width: 100%; }

.ref-sent {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.03em;
}

.ref-second {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 400;
  color: var(--dim);
}

.ref-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem;
}

.ref-h {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: 0.6rem;
  letter-spacing: -0.03em;
}

.ref-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
}

.ref-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
}

.ref-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.ref-card p { color: var(--dim); font-size: 0.95rem; }

.ref-peek {
  border: 1px solid var(--text);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.ref-peek p { color: var(--dim); max-width: 30rem; }

.ref-peek-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text) !important;
  margin-bottom: 0.4rem;
  letter-spacing: -0.03em;
}

/* One client, stated plainly. Numbers rather than adjectives, because a
   restaurant owner can check numbers against their own week. */
.ref-proof { border-top: 1px solid var(--line-soft); }

.ref-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.ref-num {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}

.ref-num b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ref-num span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Visible, because coming from somebody they trust, a hidden price
   reads as evasive. */
.ref-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.ref-price {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ref-price.pick { border-color: var(--text); }

.ref-price-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.ref-price-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  margin-top: 0.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ref-price-per { font-size: 0.8rem; color: var(--dim); }

.ref-price ul {
  list-style: none;
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ref-price li {
  font-size: 0.92rem;
  color: var(--dim);
  padding-left: 1rem;
  position: relative;
}

.ref-price li::before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--dim);
}

.ref-ask {
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.ref-ask .btn-send { margin-top: 0.6rem; padding: 1rem 2.4rem; }

/* Three fields, narrow, in the middle of the page. Wide inputs invite
   a long answer, and none of these is a long answer. */
.ref-form {
  max-width: 24rem;
  margin: 2.4rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.ref-form .field span { text-align: left; }

.ref-form .form-msg { text-align: center; margin-top: 0.2rem; }

.ref-done {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.03em;
}

.ref-form .ref-small { text-align: center; margin-top: 0.6rem; }

.ref-small { margin-top: 1.2rem; font-size: 0.9rem; color: var(--dim); }

@media (max-width: 600px) {
  .ref-reel { gap: 2.5rem; padding: 2.5rem 1.2rem 3rem; }
  .ref-peek { padding: 1.5rem 1.4rem; }
}

/* ============ A TRANSFER PAGE ============ */
/* Someone who may never have heard of the studio opens this, so it
   says who it is from and then gets out of the way. */
.transfer-wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 12vh, 7rem) 1.5rem 4rem;
}

.transfer-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--dim);
}

.transfer-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  margin-top: 1rem;
  text-wrap: balance;
  letter-spacing: -0.03em;
}

.transfer-note {
  color: var(--dim);
  margin-top: 1rem;
  max-width: 34rem;
}

.transfer-files { margin-top: 2.5rem; }

.transfer-expiry {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--dim);
}

/* ============ DELIVERIES ============ */
/* The month's finished work. Folded, because a client with a year of
   these wants this month, and the rest kept out of the way. */
.delivery-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.delivery {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.delivery-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
}

.delivery-month {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.delivery-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.delivery-arrow {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--dim);
  transition: transform 0.18s ease, color 0.15s;
}

.delivery-head.open .delivery-arrow { transform: rotate(90deg); color: var(--text); }
.delivery-head:hover .delivery-arrow { color: var(--text); }
.delivery-head:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

.delivery-body { padding: 0 1.5rem 1.3rem; }

.delivery-note {
  color: var(--dim);
  margin-bottom: 1rem;
  max-width: 38rem;
}

.delivery-files { display: flex; flex-direction: column; }

.delivery-file {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.15s;
}

.delivery-file:hover { opacity: 0.65; }
.delivery-file:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.delivery-name { overflow-wrap: anywhere; }

/* Already taken. Marked by presence rather than colour, since there is
   no colour to spend here. */
.delivery-tick {
  display: inline-block;
  margin-right: 0.45rem;
  color: var(--dim);
}

.delivery-all {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}

.delivery-size {
  color: var(--dim);
  font-size: 0.85rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .delivery-arrow { transition: none; }
}

@media (max-width: 600px) {
  .delivery-head { padding: 1rem 1.1rem; gap: 0.7rem; }
  .delivery-month { font-size: 1.15rem; }
  .delivery-body { padding: 0 1.1rem 1.1rem; }
}

/* ============ WHERE WE ARE (one off projects) ============ */
/* A line with four marks on it. Done and current are white, still to
   come is grey. No colour and no shadow, so the state is carried by
   weight and fill alone. */
.stage-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

.stage {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
  min-width: 0;
}

.stage::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}

.stage.done,
.stage.now { border-top-color: var(--text); }

.stage.done::before,
.stage.now::before {
  background: var(--text);
  border-color: var(--text);
}

/* the one they are on reads loudest */
.stage.now::before {
  top: -7px;
  width: 13px;
  height: 13px;
}

.stage-name {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-wrap: break-word;
}

.stage.done .stage-name { color: var(--text); }
.stage.now .stage-name { color: var(--text); font-weight: 600; }

.stage-note {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (max-width: 600px) {
  .stage-row { gap: 0.35rem; }
  .stage { padding-top: 1.1rem; }
  .stage-name { font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* ============ PICK A SHOOT DATE ============ */
/* Stands in for the shoot card while we are asking the client to
   choose, so the section never shows a date and a question at once. */
.pick-lede { color: var(--dim); margin-bottom: 1.2rem; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.pick-card:hover { border-color: var(--text); }
.pick-card:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pick-card:disabled { cursor: default; opacity: 0.45; }

/* The chosen date flips to white on black. A border alone was almost
   invisible on a phone: black on black, twice over. */
.pick-card.chosen {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.pick-card.chosen .pick-meta { color: rgba(0, 0, 0, 0.55); }
.pick-card.chosen .pick-cta { color: var(--bg); }

.pick-confirm {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.pick-chosen {
  flex: 1;
  min-width: 12rem;
  color: var(--dim);
  font-size: 0.95rem;
}

.pick-day {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.pick-meta { color: var(--dim); font-size: 0.9rem; }

.pick-cta {
  margin-top: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pick-done {
  border: 1px solid var(--text);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
}

.pick-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.6rem;
}

.pick-done .pick-meta { margin-top: 0.7rem; max-width: 34rem; }

/* ============ FILM PLAN ============ */
.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.plan-list li {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
}

.plan-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--dim);
  min-width: 2rem;
  text-align: right;
  letter-spacing: -0.03em;
}

.plan-what { font-weight: 600; }
.plan-note { color: var(--dim); font-size: 0.9rem; margin-top: 0.15rem; }

/* ============ MONTHS ============ */
.month-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.03em;
}

.badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
}

.badge.done { color: var(--text); border-color: var(--text); }
.badge.active { color: var(--bg); background: var(--text); border-color: var(--text); }

.progress-row {
  display: grid;
  grid-template-columns: 5.2rem 1fr 4.6rem;
  align-items: center;
  gap: 0.9rem;
  margin: 0.45rem 0;
  font-size: 0.85rem;
}

.progress-row .plabel { color: var(--dim); font-weight: 500; }
.progress-row .pcount { text-align: right; color: var(--text); font-weight: 600; }

.bar {
  height: 8px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--text);
  border-radius: 999px;
}

/* ============ DOCUMENTS ============ */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
}

.doc-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s;
}

.doc-card:hover { border-color: var(--text); }

.doc-type {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.doc-title { font-weight: 600; margin-top: 0.25rem; }
.doc-note { font-size: 0.85rem; color: var(--dim); margin-top: 0.3rem; }
.doc-card.pending { opacity: 0.55; pointer-events: none; }

/* ============ BILLING ============ */
.table-wrap { overflow-x: auto; margin-bottom: 2rem; }

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 34rem;
}

.invoice-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--line);
}

.invoice-table td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.pill {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dim);
}

.pill.paid { color: var(--bg); background: var(--text); border-color: var(--text); }
.pill.open { color: var(--text); border-color: var(--text); }

.invoice-table a { color: var(--text); font-weight: 500; }

/* ============ REQUESTS ============ */
.request-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }

.field span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.field textarea,
.field input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  resize: vertical;
  transition: border-color 0.2s;
}

.field textarea:focus,
.field input:focus { outline: none; border-color: var(--text); }

.request-form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.btn-send {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-send:hover { opacity: 0.85; }
.btn-send:disabled { opacity: 0.5; cursor: wait; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-msg { font-size: 0.85rem; color: var(--dim); min-height: 1.2em; margin: 0; }

.request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.request-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.request-body { font-size: 0.92rem; }
.request-meta { margin-top: auto; font-size: 0.78rem; color: var(--dim); }

/* ============ FOOTER ============ */
.footer {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  padding: 2.2rem 1.5rem 2.6rem;
  text-align: center;
  font-size: 0.88rem;
}

.footer p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.footer a { color: var(--text); }

@media (max-width: 600px) {
  .hero { min-height: 55vh; }
  .shoot-card { padding: 1.5rem 1.4rem; }
  .pick-card,
  .pick-done { padding: 1.3rem 1.4rem; }
}

/* ============ POSTING SCHEDULE ============ */
.month-nav { display: flex; gap: 0.5rem; align-items: center; }

.btn-month {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-month:hover { color: var(--text); border-color: var(--text); }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 1.6rem;
}

.cal-head {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
  padding-bottom: 0.4rem;
}

.cal-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 3rem;
}

/* ============ PICKING A DAY AND AN HOUR ============ */
/* The booking page when he offers a window of hours rather than three
   times. It reuses the posting calendar's grid, so a month looks the
   same wherever it appears. */
.cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cal-month {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.btn-month:disabled { opacity: 0.3; cursor: default; }
.btn-month:disabled:hover { color: var(--dim); border-color: var(--line); }

/* A day with hours left is a button. Everything else in the month is
   there to be counted, not pressed. */
.cal-cell.free {
  border-color: var(--line);
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cal-cell.free .cal-num { color: var(--text); font-weight: 600; }
.cal-cell.free:hover { border-color: var(--text); }
.cal-cell.free:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* white on black for the day being looked at, the same as a chosen
   shoot date, because a border alone disappears against this page */
.cal-cell.free.on {
  background: var(--text);
  border-color: var(--text);
}

.cal-cell.free.on .cal-num,
.cal-cell.free.on .cal-free { color: var(--bg); }

.cal-free {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}

/* Which days he takes calls. Same on and off look as everything
   else that is either chosen or not. */
.day-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.day {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.day:hover { color: var(--text); border-color: var(--text); }
.day:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.day.on { color: var(--bg); background: var(--text); border-color: var(--text); }

@media (prefers-reduced-motion: reduce) { .day { transition: none; } }

.hour-grid { margin-top: 1.8rem; }

.hour-day {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.9rem;
  letter-spacing: -0.03em;
}

.hour-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hour {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.hour:hover { border-color: var(--text); }
.hour:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.hour.chosen {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .cal-cell.free, .hour { transition: none; }
}

@media (max-width: 600px) {
  .hour { padding: 0.5rem 0.9rem; }
  .cal-free { display: none; }
}

.cal-cell.empty { border: none; }
.cal-cell.today { border-color: var(--text); }

.cal-cell.has-posts {
  border-color: var(--line);
  cursor: pointer;
  transition: border-color 0.15s;
}

.cal-cell.has-posts:hover { border-color: var(--text); }

/* A still from the piece, filling the day behind the number. Held
   back so the date and the dots stay readable over any frame: this is
   a calendar with pictures in it, not a gallery. */
.cal-cell { position: relative; overflow: hidden; }

.cal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 0;
}

.cal-cell.has-frame .cal-num,
.cal-cell.has-frame .cal-dots { position: relative; z-index: 1; }

.cal-cell.has-frame .cal-num {
  color: var(--text);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cal-cell.has-frame { border-color: var(--line); }
.cal-cell.has-posts.has-frame:hover .cal-frame { opacity: 0.7; }

.cal-num { font-size: 0.78rem; color: var(--dim); }
.cal-cell.has-posts .cal-num { color: var(--text); font-weight: 600; }

.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--text);
}

.dot.planned { background: transparent; }
.dot.posted { background: var(--text); }

/* --- the posts --- */
.post-list { display: flex; flex-direction: column; gap: 1rem; }

.post-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}

/* A posted piece used to fade out, which was right when the card only
   said what was planned. Now it carries the frame and the numbers, so
   the finished ones are the point of the page rather than the
   leftovers. */
.post-card.posted { opacity: 1; }
.post-card.posted .post-day, .post-card.posted .post-dow { color: var(--dim); }

.post-frame {
  width: 4.5rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex: none;
  display: block;
}

/* How it did, a month later. Weight rather than colour, the same as
   every other number on this site. */
.post-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0.6rem 0 0.2rem;
  font-size: 0.82rem;
  color: var(--dim);
}

.post-numbers b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The month added up. Its own names, because the dashboard's totals
   are styled inside the dashboard's own page and borrowing them out
   here left the number and its label with nothing between them. */
#month-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 600px) {
  .post-frame { width: 3.4rem; height: 4.5rem; }
}

.post-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.2rem;
  border-right: 1px solid var(--line-soft);
  padding-right: 1rem;
}

.post-day { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.post-dow { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 0.2rem; }
.post-time { font-size: 0.72rem; color: var(--dim); margin-top: 0.35rem; }

.post-body { flex: 1; min-width: 0; }

.post-top { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.35rem; }

.post-platform {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.post-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }

.caption {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.8rem 0.9rem 1.7rem;
  font-size: 0.9rem;
  color: var(--dim);
  white-space: pre-wrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.caption:hover, .caption:focus { border-color: var(--text); color: var(--text); outline: none; }
.caption.copied { border-color: var(--text); color: var(--text); }

.copy-hint {
  position: absolute;
  right: 0.7rem;
  bottom: 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 600px) {
  .cal { gap: 3px; }
  .cal-cell { padding: 0.25rem; min-height: 2.4rem; }
  .cal-num { font-size: 0.7rem; }
  .post-card { gap: 1rem; padding: 1rem; }
}

/* ============ IDEA BOXES ============ */
/* ============ FORM ============ */
.idea-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }

.field span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.field textarea,
.field input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  resize: vertical;
  transition: border-color 0.2s;
}

.field textarea:focus,
.field input:focus { outline: none; border-color: var(--text); }

.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ============ PICTURE FIELD ============ */
.pic-field { display: flex; flex-direction: column; gap: 0.5rem; }

.pic-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.pic-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.btn-file {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.btn-file:hover { border-color: var(--text); }
.btn-file input { display: none; }

.pic-name { font-size: 0.85rem; }

.btn-clear {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-clear:hover { color: var(--text); }

.pic-preview {
  max-width: 12rem;
  max-height: 9rem;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.idea-image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  display: block;
}

.btn-send {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-send:hover { opacity: 0.85; }
.btn-send:disabled { opacity: 0.5; cursor: wait; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-msg { font-size: 0.85rem; color: var(--dim); min-height: 1.2em; margin: 0; }

/* ============ WALL ============ */
.wall-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 3rem 0 1.4rem;
  letter-spacing: -0.03em;
}

.idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.idea-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.2s;
}

.idea-card:hover { border-color: var(--text); }

.idea-body { font-size: 0.92rem; }

.idea-meta {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--dim);
}

/* a quiet line under the tagline, used by the example portal */
.hero-notice {
  margin-top: 0.9rem;
  max-width: 32rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

/* The Add a client fold on the dashboard. Same idea as the folding
   panels in a client's admin, but this one is a single block rather
   than a page of them, so it carries its own small rule. */
.fold-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-body);
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.fold-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.fold-arrow {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--dim);
  transition: transform 0.18s ease, color 0.15s;
}

.fold-head.open .fold-arrow { transform: rotate(90deg); color: var(--text); }
.fold-head:hover .fold-arrow { color: var(--text); }
.fold-head:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

#add-client-body { padding-top: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .fold-arrow { transition: none; }
}

/* ============ GLASS: THE ROOM ============ */
/* Glass on flat black does nothing, so two soft lights sit behind every
   page. Fixed, so they stay put while the panels scroll over them. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56rem 38rem at 88% -8%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(48rem 34rem at -8% 108%, rgba(255, 255, 255, 0.06), transparent 62%);
}

/* the only texture in the system */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

::selection { background: #FFFFFF; color: #000000; }

@media print {
  body::before, body::after { display: none; }
}

/* ============ GLASS: SURFACES ============ */
/* Every bordered box becomes a pane: a breath of white, a lighter edge,
   and a highlight along the top. No blur on these. Blurring a soft
   gradient shows nothing and costs a lot with forty panes on a page;
   the blur is kept for the bars that real content scrolls under. */
.tile, .shoot-card, .shoot-count, .panel, .client-card, .item,
.ref-card, .ref-peek, .ref-num, .ref-price, .delivery,
.pick-card, .pick-done, .doc-card,
.request-form, .request-card, .post-card, .idea-form, .idea-card,
.idea-row, .hero-notice {
  background-color: var(--glass);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-lip);
}

/* a pane inside a pane steps down, so the nesting still reads */
.panel .item, .panel .tile, .delivery .item { background-color: rgba(255, 255, 255, 0.03); }

/* the ones meant to stand out keep a white edge, and gain a glow */
.shoot-card, .ref-peek, .pick-done, .ref-price.pick {
  border-color: rgba(242, 242, 242, 0.55);
  box-shadow: var(--glass-lip), 0 0 60px -20px rgba(255, 255, 255, 0.18);
}

/* hover edges were white; on glass that is loud, so half way */
.client-card:hover, .doc-card:hover, .idea-card:hover, .pick-card:hover,
.cal-cell.has-posts:hover, .cal-cell.free:hover { border-color: rgba(242, 242, 242, 0.5); }

/* chosen things flip to light, exactly as before */
.pick-card.chosen { background-color: var(--text); box-shadow: none; }
.pick-card.chosen .pick-meta { color: rgba(0, 0, 0, 0.55); }

/* the calendar's days are glass too, but quieter than a card */
.cal-cell { background-color: rgba(255, 255, 255, 0.025); }
.cal-cell.empty { background-color: transparent; }
/* a day you can press reads brighter than one you cannot */
.cal-cell.free { background-color: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
.cal-cell.free.on { background-color: var(--text); }
.cal-frame { filter: saturate(0.8) brightness(0.86); }

/* ============ GLASS: BARS ============ */
/* The two things content scrolls under: the dashboard's sheet tabs and
   the save bar at the foot of an admin page. These get the real blur. */
.dash .sheets {
  top: 0.6rem;
  padding: 0.4rem;
  border: 1px solid var(--glass-float-edge);
  border-radius: 22px;
  background: var(--glass-float);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-float-lip);
}

.dash .sheet-tab { border-radius: 999px; }
.dash .sheet-tab.on { background: rgba(242, 242, 242, 0.92); border-color: transparent; }

.admin-wrap .savebar, .dash .savebar {
  margin: 0 -0.8rem;
  padding: 0.9rem 0.8rem;
  border: 1px solid var(--glass-float-edge);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--glass-float);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ============ GLASS: CONTROLS ============ */
/* the primary button: light pill, bold, a dot before the word */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  padding: 0.95rem 1.6rem;
  border: 0;
  transition: background 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.15s;
}
.btn-send::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.btn-send:hover { opacity: 1; background: #FFFFFF; }

/* secondary buttons: a pane you can press */
.btn-mini:not(.solid):not(.armed), .btn-month, .btn-file, .day:not(.on), .hour:not(.chosen) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.btn-mini:not(.solid):not(.armed):hover, .btn-month:hover:not(:disabled), .btn-file:hover,
.day:not(.on):hover, .hour:not(.chosen):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--text);
}

/* fields sit a little darker than the pane they are in */
.field textarea, .field input, .ref-form input {
  background: var(--well);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.field textarea:focus, .field input:focus { border-color: rgba(255, 255, 255, 0.4); }
.field textarea::placeholder, .field input::placeholder { color: rgba(242, 242, 242, 0.45); }

/* a select keeps a solid fill, or its open list renders light on Windows */
select { background-color: #0B0B0B; border-color: rgba(255, 255, 255, 0.12); border-radius: 12px; }

/* labels: small capitals, spaced wide */
.field span, .pic-label, .doc-type, .post-platform, .panel-summary, .delivery-count,
.pick-kicker, .ref-eyebrow, .transfer-kicker, .invoice-table th, .cal-head {
  letter-spacing: 0.24em;
}

.bar { background: rgba(255, 255, 255, 0.08); }

/* the price list lost its long dash for a short rule */
.ref-price li::before {
  content: "";
  top: 0.72em;
  width: 0.45rem;
  height: 1px;
  background: var(--dim);
}

.invoice-table th { border-bottom-width: 1px; }
.footer { border-top-color: var(--line-soft); }
.footer p:first-child { letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.9rem; }

/* ============ THE CLIENT PORTAL, IN PAGES ============ */
/* A floating bar with the client's name and five pages, a large title
   per page, and the existing cards set into panes. Scoped to
   body.portal, so the dashboard, the admin and every page he sends are
   left exactly as they are. */

.portal { --pt-max: 74rem; --pt-gap: 1rem; }

.pt-top {
  position: sticky;
  top: 0.8rem;
  z-index: 90;
  max-width: var(--pt-max);
  margin: 0.8rem auto 0;
  padding: 0 1.25rem;
}

.pt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.45rem 0.45rem 1.3rem;
  border: 1px solid var(--glass-float-edge);
  border-radius: 999px;
  background: var(--glass-float);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-float-lip);
}

.pt-brand { display: flex; align-items: baseline; gap: 0.6rem; white-space: nowrap; min-width: 0; }
.pt-brand b { font-weight: 500; font-size: 0.92rem; letter-spacing: 0.24em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.pt-brand span { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242, 242, 242, 0.45); }

.pt-tabs {
  display: flex;
  gap: 0.2rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  overflow-x: auto;
  scrollbar-width: none;
}
.pt-tabs::-webkit-scrollbar { display: none; }

.pt-tab {
  position: relative;
  padding: 0.62rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 242, 242, 0.66);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.pt-tab:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.pt-tab[aria-selected="true"] { background: rgba(242, 242, 242, 0.92); color: #000; }
.pt-tab:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* something on the month page is waiting on the client */
.pt-dot { position: absolute; top: 0.4rem; right: 0.45rem; width: 5px; height: 5px; border-radius: 999px; background: #fff; }
.pt-tab[aria-selected="true"] .pt-dot { background: #000; }

.pt-shell { max-width: var(--pt-max); margin: 0 auto; padding: 0 1.25rem; }

.pt-view { animation: pt-rise 0.55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- type ---------- */
.pt-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.45);
}
.pt-eyebrow::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px; background: #fff; }

.pt-display {
  margin-top: 1.1rem;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.pt-h2 {
  margin-top: 0.8rem;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* the example portal's "this is invented" line, a pane rather than a pill
   now that it runs to three lines under a big title */
.portal .hero-notice { margin-top: 1rem; max-width: 36rem; border-radius: 14px; padding: 0.7rem 1rem; line-height: 1.55; }

.pt-lede { margin-top: 1rem; max-width: 36rem; font-size: 0.95rem; line-height: 1.7; color: rgba(242, 242, 242, 0.66); }
.pt-small { margin-top: 1rem; font-size: 0.84rem; line-height: 1.6; color: rgba(242, 242, 242, 0.6); }
.pt-meta { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242, 242, 242, 0.6); }

.pt-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  padding: 4.2rem 0 2.2rem;
}

.pt-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.7);
  white-space: nowrap;
}
.pt-pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; border: 1px solid currentColor; }
.pt-pill.live::before { background: #fff; border-color: #fff; animation: pt-pulse 2s ease-in-out infinite; }
@keyframes pt-pulse { 50% { opacity: 0.25; } }

/* ---------- panes ---------- */
.pt-stack { display: grid; gap: var(--pt-gap); }
.pt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--pt-gap); align-items: start; }
/* equal halves, stretched to the taller one; the bars sit at the top and
   whatever text the pane has settles to the bottom */
.pt-row.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pt-row.even > .pt-pane { display: flex; flex-direction: column; }
.pt-row.even #deal-notes { margin-top: auto; padding-top: 1rem; }

.pt-pane {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: var(--glass-lip);
}

.pt-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 1.3rem; }
.pt-head h2 { margin: 0; }
/* #deal keeps its old .section-head so a cached old script can still
   rename it; without this, that rule would blow the label up */
.portal .section-head h2.pt-eyebrow {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.3em;
  color: rgba(242, 242, 242, 0.45);
}

/* the pane that needs the client gets the brighter edge */
.pt-needs { padding: 2rem; border-color: rgba(242, 242, 242, 0.4); box-shadow: var(--glass-lip), 0 0 70px -24px rgba(255, 255, 255, 0.18); }
.pt-needs .shoot-card,
.pt-needs #pick-wrap { margin-top: 1.4rem; }
.pt-needs .shoot-card { border-color: var(--glass-edge); box-shadow: none; background: rgba(0, 0, 0, 0.25); }
/* the pane's own heading already says it */
.pt-needs .pick-kicker { display: none; }

/* cards that were full sections now sit inside a pane, so they step down */
.portal .pt-pane .tile,
.portal .pt-pane .doc-card,
.portal .pt-pane .delivery { background-color: rgba(0, 0, 0, 0.26); border-color: var(--line-soft); box-shadow: none; }

.portal .pt-pane .tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.portal .pt-pane .tile { padding: 1rem 1.1rem; }
.portal .pt-pane .tile .num { font-size: 1.8rem; }
.portal .pt-pane .tile .lbl { font-weight: 400; letter-spacing: 0.16em; font-size: 0.62rem; }
.portal .pt-pane .month-title { font-size: 1.05rem; }

.portal .pt-pane .plan-list { border-top: 0; }
.portal .pt-pane .plan-list li { padding: 0.85rem 0; }
.portal .pt-pane .plan-list li:last-child { border-bottom: 0; }
.portal .pt-pane .plan-num { font-size: 0.8rem; min-width: 1.6rem; text-align: left; }
.portal .pt-pane .plan-what { font-weight: 500; letter-spacing: -0.01em; }

.portal .pt-pane .stage-row { margin-top: 0.4rem; }
.portal .pt-pane .section-lede { margin: 0 0 1rem; }

.pt-meters { display: grid; gap: 1.3rem; }
.pt-meter { display: grid; gap: 0.6rem; }
.pt-meter-top { display: flex; justify-content: space-between; align-items: baseline; }
.pt-meter-top b { font-weight: 500; font-size: 2rem; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pt-meter-top b span { font-size: 0.95rem; color: rgba(242, 242, 242, 0.45); letter-spacing: -0.02em; }
.pt-meter .bar { display: block; height: 6px; }

/* ---------- last month ---------- */
.pt-result { padding: 0; display: grid; overflow: hidden; }
.pt-result.has-frame { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pt-result-frame { position: relative; margin: 0; min-height: 17rem; background: #0B0B0B; }
.pt-result-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.86); }
.pt-result-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6)); }

.pt-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.46);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pt-result-body { padding: 1.75rem; display: flex; flex-direction: column; }
.pt-big { margin-top: 1rem; font-weight: 500; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pt-result-body .pt-lede { margin-top: 0.7rem; }

.pt-result-stats {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
}
.pt-result-stats b,
.pt-totals b { display: block; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt-result-stats .btn-month { margin-left: auto; }

/* ---------- posts ---------- */
.pt-cal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pt-month { margin: 0 0.4rem; min-width: 9.5rem; text-align: center; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.pt-totals { display: flex; gap: 1.6rem; }
.pt-totals .pt-meta { display: block; }
.portal #calendar .cal { margin-top: 1.3rem; }

/* a day with posts is a real button now */
.portal button.cal-cell {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
/* one height for every day, so a week with frames is no taller than one
   without, and a wide screen does not blow the month up */
.portal #calendar .cal-cell { aspect-ratio: auto; height: clamp(3.2rem, 6.4vw, 5.6rem); min-height: 0; }
.portal .cal-cell.has-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 40%, transparent 55%, rgba(0, 0, 0, 0.65));
}
.portal .cal-cell.has-frame .cal-num,
.portal .cal-cell.has-frame .cal-dots,
.portal .cal-views { position: relative; z-index: 1; }
.cal-views { font-size: 0.7rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* a day whose film is ready says so, and the card below it carries the
   download itself */
.portal .cal-film {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  z-index: 1;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(242, 242, 242, 0.92);
  color: #000;
  font-size: 0.62rem;
  line-height: 1;
}

.post-film {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.post-film:hover { background: rgba(255, 255, 255, 0.12); }
/* a carousel: one pill per piece, wrapping, instead of one long button */
.post-films { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.post-films .post-film { margin-top: 0; }
.post-film span { font-size: 0.7rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; max-width: 14rem; white-space: nowrap; }
.portal .cal-cell.has-frame .cal-dots { display: none; }

.portal #v-posts .post-list { margin-top: var(--pt-gap); }
.post-card.flash { animation: pt-flash 1.4s ease; }
@keyframes pt-flash { 0%, 40% { border-color: rgba(242, 242, 242, 0.8); } }
.pt-empty { padding: 2rem 0.2rem; }

/* ---------- ideas + billing ---------- */
.portal #requests .request-form { margin-top: 0; }
.portal #billing .table-wrap { margin-bottom: 0; }

.portal .footer { max-width: var(--pt-max); margin: 4rem auto 0; }

@media (max-width: 900px) {
  .pt-intro { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-top: 2.8rem; }
  .pt-pills { justify-content: flex-start; }
  .pt-row, .pt-row.even, .pt-result.has-frame { grid-template-columns: minmax(0, 1fr); }
  .pt-result-frame { min-height: 0; aspect-ratio: 16 / 10; }
  .pt-brand span { display: none; }
}

@media (max-width: 600px) {
  .pt-top { padding: 0 0.6rem; top: 0.5rem; }
  .pt-bar { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.55rem 0.45rem 0.45rem; border-radius: 26px; }
  .pt-brand { justify-content: center; }
  .pt-tab { flex: 1; padding: 0.6rem 0.4rem; letter-spacing: 0.08em; font-size: 0.6rem; }
  .pt-dot { top: 0.3rem; right: 0.3rem; }
  .pt-shell { padding: 0 0.8rem; }
  .pt-pane, .pt-needs { padding: 1.25rem; }
  .pt-result { padding: 0; }
  .pt-result-body { padding: 1.25rem; }
  .pt-month { min-width: 0; font-size: 1rem; }
  .pt-cal-head #today-month { display: none; }
  .cal-views { display: none; }
  .portal .cal { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-view, .pt-pill.live::before, .post-card.flash { animation: none; }
}

/* ============ THE LOCK ============ */
/* On the dashboard and on each editor. Written the closed way round:
   locked is what the markup says and unlocking is a class that lock.js
   takes off, so a script that is blocked or broken leaves the page shut
   rather than open.

   It hides the interface, not the data: these pages and the files they
   read are public. What it stops is somebody at an open browser using
   the key saved in it. */
html.locked body > :not(.lock) { display: none !important; }
html:not(.locked) .lock { display: none; }

/* No pane, no paragraph, no black of its own: the two soft lights
   behind every page carry it, the way the booking page is carried. */
.lock {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.5rem;
  z-index: 50;
}

.lock-mark {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--dim);
}

.lock-field { position: relative; width: 100%; max-width: 19rem; }

.lock-field input {
  width: 100%;
  padding: 0.85rem 3.2rem 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: var(--glass-lip);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.lock-field input:focus { outline: none; border-color: rgba(255, 255, 255, 0.34); }

.lock-go {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.lock-go:hover { color: var(--text); border-color: var(--line); }
.lock-go:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lock-go:disabled { opacity: 0.4; cursor: default; }

/* empty until something goes wrong, which is the only time this screen
   has anything to say */
.lock-msg {
  min-height: 1.2rem;
  max-width: 19rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .lock-go { transition: none; }
}

/* ============ DATE AND TIME PICKERS IN THE EDITOR ============ */
/* The browser draws its own calendar and clock. Told the page is dark,
   it draws them dark too, with an icon that shows on black. Scoped to
   the editor, so the portals keep exactly what they had. */
.admin-wrap .field input[type="date"],
.admin-wrap .field input[type="time"] {
  color-scheme: dark;
  cursor: pointer;
}

.admin-wrap .field input[type="date"]::-webkit-calendar-picker-indicator,
.admin-wrap .field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}

/* ============ ONE TAKE REELS: THE CLIENT PAGE ============ */
/* A client who bought one take reels gets no tabs and no plan, only
   their reels in a row to swipe, each with a download under it. */
body.reels-only .pt-tabs { display: none; }
body.reels-only .pt-brand { flex: 1; text-align: center; }

.ro-month { margin-top: var(--pt-gap, 1.4rem); }
.ro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ro-empty p { color: var(--dim); }

.ro-rail {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
}
.ro-rail::-webkit-scrollbar { display: none; }

.ro-item { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; scroll-snap-align: center; }

.ro-frame {
  position: relative;
  height: min(62vh, 480px);
  aspect-ratio: 9 / 16;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  overflow: hidden;
  background: var(--well);
  cursor: pointer;
}
.ro-frame.wide { aspect-ratio: 16 / 9; height: auto; width: min(86vw, 640px); }
.ro-frame video, .ro-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ro-num {
  position: absolute; left: 0.7rem; top: 0.55rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(242, 242, 242, 0.8); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.ro-sound {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ro-frame.loud .ro-sound { background: var(--text); color: #000; }

.ro-dl {
  align-self: stretch;
  text-align: center;
  padding: 0.7rem 1rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ro-dl:hover { background: rgba(255, 255, 255, 0.12); }

.ro-nav { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ro-nav .btn-month:disabled { opacity: 0.35; cursor: default; }

/* ============ AN EVENT GALLERY ============ */
/* The tabs are hidden by .reels-only, which an event page carries too. */
.ev-gate { max-width: 26rem; margin: var(--pt-gap, 1.4rem) auto 0; display: grid; gap: 0.9rem; }
.ev-gate-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.ev-go {
  justify-self: start; border: 0; border-radius: 999px; padding: 0.85rem 1.5rem; cursor: pointer;
  background: var(--text); color: var(--bg);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.ev-go:disabled { opacity: 0.6; cursor: default; }
.ev-msg { min-height: 1.2em; font-size: 0.85rem; color: var(--text); }

.ev-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--pt-gap, 1.4rem); }
.ev-tile {
  position: relative; flex: 0 0 auto; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  border-radius: 16px; background: rgba(255, 255, 255, 0.05);
  /* keeps the corners round while the picture inside grows on hover */
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ev-tile img, .ev-tile video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.ev-tile:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .ev-tile:hover img, .ev-tile:hover video { transform: scale(1.03); } }
.ev-play {
  position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.6rem; color: #fff; background: rgba(0, 0, 0, 0.55); pointer-events: none;
}
.ev-by { margin: 2.4rem 0 0; text-align: center; font-size: 0.82rem; color: var(--dim); white-space: nowrap; }
.ev-by a { color: var(--text); }

.ev-box {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px; background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: ev-fade 0.2s ease;
}
.ev-card {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; max-width: 100%;
  border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.26);
  background:
    radial-gradient(26rem 14rem at 88% -12%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(14, 14, 18, 0.66);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  animation: ev-rise 0.28s cubic-bezier(.2, .8, .2, 1);
}
.ev-top, .ev-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ev-bar { justify-content: flex-end; }
.ev-stage { display: grid; place-items: center; }
.ev-stage img, .ev-stage video { display: block; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, 0.04); max-width: 100%; }
#ev-count { font-size: 0.78rem; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.ev-x, .ev-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--text);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 1.05rem; line-height: 1;
}
.ev-x { width: 34px; height: 34px; }
.ev-arrow { background: rgba(20, 20, 24, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.ev-x:hover, .ev-arrow:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.5); }
.ev-arrow:disabled { opacity: 0.25; cursor: default; }
.ev-get {
  padding: 0.7rem 1.4rem; border-radius: 999px; text-decoration: none; background: var(--text); color: var(--bg);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
@keyframes ev-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ev-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  .ev-box { padding: 10px; }
  .ev-arrow { display: none; }
  .ev-card { padding: 14px; gap: 12px; border-radius: 20px; }
  .ev-bar { justify-content: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (prefers-reduced-motion: reduce) { .ev-box, .ev-card { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ev-tile img, .ev-tile video { transition: none; } }