/* ===== PROJECT DETAIL PAGE ===== */

:root {
  --accent: #E8503A;
  --bg: #000;
  --hd: #fff;
  --tx: #888;
  --muted: color-mix(in srgb, var(--tx) 55%, var(--bg));
  --line: color-mix(in srgb, var(--tx) 18%, var(--bg));
}

/* Project pages take their colours from the project's theme (set on <body>) */
body.themed {
  background: var(--bg);
  color: var(--tx);
  transition: background 0.3s;
  --muted: color-mix(in srgb, var(--tx) 55%, var(--bg));
  --line: color-mix(in srgb, var(--tx) 18%, var(--bg));
}
body.themed .back-link,
body.themed .contact-strip a { color: var(--muted); }
body.themed .back-link:hover,
body.themed .contact-strip a:hover { color: var(--hd); }

.project-page {
  min-height: 100vh;
  padding: 4rem 4rem 8rem;
  max-width: 1100px;
  margin: 0 auto;
}

.project-header {
  margin-bottom: 4rem;
}

.project-meta {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

.project-num,
.project-year {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}

.project-num::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  margin-right: 0.6rem;
  vertical-align: 0;
}

.project-title {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--hd);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}

.project-subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--tx);
  font-weight: 300;
  max-width: 640px;
}

.project-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.project-tags span {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 0.25rem 0.6rem;
  text-transform: uppercase;
  font-weight: 500;
}

.project-tags span.active-tag {
  border-color: var(--hd);
  color: var(--hd);
}

/* Content blocks */
.project-content {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
}

.project-placeholder {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.blk {
  position: relative;
  margin-bottom: 2.5rem;
}

.blk-text .rt {
  max-width: 640px;
  font-size: calc(0.9rem * var(--fs, 1));
  line-height: 1.85;
  color: var(--tx);
  font-weight: 300;
}

.blk-text .rt p,
.blk-text .rt div { margin-bottom: 1em; }
.blk-text .rt b,
.blk-text .rt strong { color: var(--hd); font-weight: 600; }
.blk-text .rt a { color: var(--hd); border-bottom: 1px solid var(--accent); }
.blk-text .rt ul,
.blk-text .rt ol { padding-left: 1.2em; }

.blk-heading h2 {
  font-size: calc(0.65rem * var(--fs, 1));
  line-height: 1.5;
  letter-spacing: 0.18em;
  color: var(--hd);
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 1.5rem;
}

.img-grid {
  display: grid;
  gap: 1rem;
}
.img-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.img-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.img-item {
  position: relative;
  margin: 0;
}

.img-item img {
  width: 100%;
  display: block;
  background: var(--line);
  cursor: zoom-in;
}

.img-grid.cols-2 .img-item img,
.img-grid.cols-3 .img-item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.img-item figcaption {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-top: 0.6rem;
  line-height: 1.5;
}

/* Next project */
.project-next {
  margin-top: 6rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

.project-next a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project-next .label {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-transform: uppercase;
}

.project-next .t {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.project-next a:hover .t { color: var(--hd); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  cursor: zoom-out;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; }
.lightbox p { color: #777; font-size: 0.75rem; margin-top: 1rem; letter-spacing: 0.03em; }

/* ===== PROJECT CARDS — cover images ===== */

.proj-card.has-cover .cover {
  margin: -2.2rem -2.2rem 1.6rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eee;
}

.proj-card.has-cover .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.proj-card.has-cover:hover .cover img { transform: scale(1.03); }
.proj-card.has-cover .num { margin-bottom: 0.8rem; }

/* ===== EDITOR ===== */

.cms-enter {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 300;
  background: #111;
  color: #777;
  border: 1px solid #222;
  font: 500 0.7rem 'Inter', sans-serif;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.cms-enter:hover { color: #fff; border-color: #555; }

body.cms-on { padding-top: 3.2rem; }

.cms-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem;
  background: #fff;
  color: #000;
  font: 500 0.7rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
}

.cms-dot {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.cms-label { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.cms-status { color: #888; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-status.bad { color: var(--accent); }
.cms-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.cms-bar button {
  font: inherit;
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
.cms-bar button:hover { border-color: #000; }
.cms-bar button.primary { background: #000; color: #fff; border-color: #000; }
.cms-bar button.primary:hover { background: var(--accent); border-color: var(--accent); }
.cms-bar button.ghost { border-color: transparent; color: #888; }
.cms-bar button.ghost:hover { color: #000; }

/* Editable text */
.cms-editable {
  outline: none;
  border-radius: 2px;
  transition: box-shadow 0.15s, background 0.15s;
  cursor: text;
}
.cms-editable:hover { box-shadow: 0 0 0 1px var(--line); }
.cms-editable:focus { box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cms-editable:empty::before {
  content: attr(data-ph);
  color: var(--muted);
  opacity: 0.55;
  pointer-events: none;
}
.cms-on .project-title.cms-editable:empty::before { color: var(--line); }
.cms-on .blk-text .rt { min-height: 1.85em; }
.cms-on .project-year:empty::before { content: attr(data-ph); }

/* Tags in edit mode */
.tag-hl,
.tag-add {
  font: 500 0.55rem 'Inter', sans-serif;
  letter-spacing: 0.1em;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.2rem;
  margin-left: -0.35rem;
  text-transform: uppercase;
}
.tag-hl:hover, .tag-hl.on { color: var(--accent); }
.tag-add { margin-left: 0.2rem; border: 1px dashed var(--line); padding: 0.25rem 0.6rem; }
.tag-add:hover { color: var(--hd); border-color: var(--muted); }

/* Block tools */
.cms-on .blk {
  padding: 0.4rem 0 0;
  margin-bottom: 0;
}

.blk-tools {
  position: absolute;
  top: -1.3rem;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
}
.blk:hover > .blk-tools,
.blk:focus-within > .blk-tools { opacity: 1; }

.blk-tools .kind {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0.5rem 0 0.2rem;
}

.blk-tools button,
.blk-tools .grip {
  font: 500 0.65rem 'Inter', sans-serif;
  background: #111;
  color: #888;
  border: 1px solid #222;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  user-select: none;
}
.blk-tools button:hover { color: #fff; border-color: #555; }
.blk-tools .grip { cursor: grab; letter-spacing: -0.15em; padding-right: 0.6rem; }
.blk.dragging { opacity: 0.25; }

/* Insert bars between blocks */
.inserter {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  height: 2.6rem;
  align-items: center;
  position: relative;
  opacity: 0;
  transition: opacity 0.15s;
}
.inserter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--line);
  z-index: -1;
}
.inserter:hover,
.inserter.last { opacity: 1; }
.inserter.last { height: 4rem; }

.inserter button {
  font: 500 0.62rem 'Inter', sans-serif;
  letter-spacing: 0.08em;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.inserter button:hover { color: var(--hd); border-color: var(--muted); }

.inserter.drop-here { opacity: 1; }
.inserter.drop-here::before { border-top: 2px solid var(--accent); }
.inserter.drop-here button { visibility: hidden; }

/* Photo blocks in edit mode */
.img-tools {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.img-item:hover .img-tools { opacity: 1; }

.img-tools button {
  font: 500 0.6rem 'Inter', sans-serif;
  letter-spacing: 0.05em;
  background: rgba(0,0,0,0.75);
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.img-tools button:hover { color: #fff; border-color: #fff; }
.img-tools button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.cms-on .img-item img { cursor: default; }
.cms-on .img-item figcaption:empty::before { color: var(--line); }

.img-add {
  border: 1px dashed var(--line);
  background: none;
  color: var(--muted);
  font: 400 0.8rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 5rem;
  transition: color 0.2s, border-color 0.2s;
}
.img-add b { font-size: 1.2rem; font-weight: 300; margin-right: 0.3rem; }
.img-add:hover { color: var(--hd); border-color: var(--muted); }
.img-add:not(:only-child) { min-height: 2.4rem; grid-column: 1 / -1; }
.img-add:only-child { min-height: 14rem; grid-column: 1 / -1; }

.cms-on .blk-images:has(.drop-here),
.cms-on .blk-images.drop-here { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Full-page drop veil */
.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  border: 2px solid var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
}
.drop-veil.on { opacity: 1; }
.drop-veil span {
  background: var(--accent);
  color: #fff;
  font: 600 0.75rem 'Inter', sans-serif;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.1rem;
}

/* Portfolio grid in edit mode */
.card-tools {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 3;
}
.proj-card:hover .card-tools { opacity: 1; }

.card-tools button {
  font: 500 0.6rem 'Inter', sans-serif;
  letter-spacing: 0.05em;
  background: #fff;
  color: #666;
  border: 1px solid #ddd;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.card-tools button:hover { color: #000; border-color: #000; }
.card-tools button[data-a="del"]:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.card-drop {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(232,80,58,0.92);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 4;
}
.proj-card.drop-cover .card-drop { display: flex; }

.cms-on .proj-card { cursor: grab; }
.proj-card.dragging { opacity: 0.3; }
.proj-card.drop-target { box-shadow: -6px 0 0 var(--accent); }

.add-card {
  background: transparent;
  border: 1px dashed #333;
  color: #666;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: 500 0.85rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.add-card .plus { font-size: 2.4rem; font-weight: 200; line-height: 1; }
.add-card small { font-size: 0.7rem; color: #444; }
.add-card:hover,
.add-card.drop-cover { color: #fff; border-color: #fff; }
.add-card.drop-cover { border-color: var(--accent); border-style: solid; }

@media (max-width: 768px) {
  .project-page {
    padding: 2rem 1.5rem 6rem;
  }

  .img-grid.cols-2,
  .img-grid.cols-3 {
    grid-template-columns: 1fr;
  }

  .cms-bar { flex-wrap: wrap; }
  .cms-status { order: 3; flex-basis: 100%; }
  body.cms-on { padding-top: 5.5rem; }
  .blk-tools, .img-tools, .card-tools { opacity: 1; }
}

/* ===== PROJECTS PAGE — white, with each card in its project's colours ===== */

body.light,
body.light .portfolio-page { background: #fff; color: #000; }
body.light .portfolio-title { color: #000; }
body.light .portfolio-count { color: #999; }
body.light .back-link,
body.light .contact-strip a { color: #999; }
body.light .back-link:hover,
body.light .contact-strip a:hover { color: #000; }
body.light .coord { color: #ccc; }

.projects-grid .proj-card {
  --muted: color-mix(in srgb, var(--tx) 60%, var(--bg));
  --line: color-mix(in srgb, var(--tx) 30%, var(--bg));
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.projects-grid .proj-card:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 14px 34px rgba(0,0,0,0.12); }
.projects-grid .proj-card .num { color: var(--muted); }
.projects-grid .proj-card .name { color: var(--hd); }
.projects-grid .proj-card .desc { color: var(--tx); }
.projects-grid .proj-card .tags span { color: var(--muted); border-color: var(--line); }
.projects-grid .proj-card .tags span.active-tag { color: var(--hd); border-color: var(--hd); }
.projects-grid .proj-card.has-cover .cover { background: var(--line); }

body.light .add-card { background: transparent; border: 1px dashed #ccc; color: #999; box-shadow: none; }
body.light .add-card small { color: #bbb; }
body.light .add-card:hover { color: #000; border-color: #000; }

/* ===== COLOUR PANEL ===== */

.theme-panel {
  position: fixed;
  top: 3.6rem;
  right: 1.2rem;
  z-index: 310;
  width: 280px;
  background: #fff;
  color: #000;
  border: 1px solid #ddd;
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  padding: 1rem;
  font: 500 0.7rem 'Inter', sans-serif;
  letter-spacing: 0.03em;
  display: none;
}
.theme-panel.on { display: block; }

.theme-panel h4 {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.theme-panel h4:not(:first-child) { margin-top: 1rem; }

.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
.swatches button {
  aspect-ratio: 1;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  font: 800 0.9rem 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.12s;
}
.swatches button:hover { transform: scale(1.08); }
.swatches button.on { outline: 2px solid #000; outline-offset: 2px; }

.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-top: 1px solid #f0f0f0;
}
.theme-row label { color: #333; }
.theme-row .pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  color: #888;
  text-transform: uppercase;
}
.theme-row input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 1.4rem;
  border: 1px solid #ddd;
  padding: 0;
  background: none;
  cursor: pointer;
}
.theme-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.theme-row input[type="color"]::-webkit-color-swatch { border: none; }
.theme-row input[type="color"]::-moz-color-swatch { border: none; }

/* Font colour swatches: "Aa" in the heading colour with an accent dot */
.swatches.fonts button {
  background: #fff;
  position: relative;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
}
.swatches.fonts button i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
}
.swatches.cards { margin-bottom: 0.4rem; }
.theme-panel h4 small { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: #aaa; }

.cms-bar { border-bottom: 1px solid #e5e5e5; }

/* ===== RESIZE HANDLES ===== */

.img-grid { position: relative; }
.img-grid.centered { margin-left: auto; margin-right: auto; }

.size-handle {
  position: absolute;
  top: 50%;
  right: -14px;
  width: 6px;
  height: 46px;
  margin-top: -23px;
  border-radius: 3px;
  background: var(--accent);
  cursor: ew-resize;
  opacity: 0;
  transition: opacity 0.15s;
  touch-action: none;
  z-index: 6;
}
.blk:hover .size-handle,
.cl-dragging .size-handle { opacity: 0.9; }
.size-handle[data-w]::after {
  content: attr(data-w);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 0.6rem 'Inter', sans-serif;
  color: var(--accent);
  white-space: nowrap;
}
.text-handle { right: auto; margin-left: 8px; top: 0.4rem; margin-top: 0; height: calc(100% - 0.4rem); max-height: 80px; }

/* ===== COLLAGE ===== */

.collage {
  position: relative;
  width: 100%;
  container-type: inline-size;
  isolation: isolate;
}
.cms-on .collage {
  outline: 1px dashed var(--line);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

.cl-item {
  position: absolute;
  margin: 0;
  transform-origin: center;
  touch-action: none;
}
.cl-item img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  user-select: none;
}
.cms-on .cl-item { cursor: grab; }
.cms-on .cl-item img { cursor: inherit; }
.cl-dragging, .cl-dragging * { user-select: none; cursor: grabbing !important; }

.cl-item:hover { outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }

.cl-frame {
  position: absolute;
  display: none;
  z-index: 9998;
  pointer-events: none;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  transform-origin: center;
}
.cl-frame .cl-tools,
.cl-frame .cl-resize { pointer-events: auto; }

.cl-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--accent);
  cursor: nwse-resize !important;
  display: none;
}
.cl-frame .cl-resize { display: block; }

.cl-tools {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: none;
  gap: 0.2rem;
  white-space: nowrap;
  cursor: default;
}
.cl-frame .cl-tools { display: flex; }
.cl-tools button {
  font: 500 0.6rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
  background: #111;
  color: #ccc;
  border: 1px solid #333;
  padding: 0.25rem 0.5rem;
  cursor: pointer !important;
}
.cl-tools button:hover { color: #fff; border-color: #fff; }
.cl-tools button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cl-height {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 56px;
  height: 12px;
  margin-left: -28px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--muted);
  cursor: ns-resize;
  z-index: 9999;
  touch-action: none;
}
.cl-height::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 4px;
  border-top: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  height: 1px;
}
.cl-height:hover { border-color: var(--accent); }

.cl-empty { position: absolute; inset: 0; width: 100%; min-height: 0 !important; }

.cms-on .blk-collage.drop-here .collage { outline: 2px solid var(--accent); }

/* ===== VIDEO ===== */

.video {
  position: relative;
  margin: 0;
}
.video.centered { margin-left: auto; margin-right: auto; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video figcaption {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-top: 0.6rem;
  line-height: 1.5;
}
.cms-on .video figcaption:empty::before { color: var(--line); }

/* iframes would swallow the mouse while dragging a resize handle */
.cl-dragging iframe { pointer-events: none; }

/* YouTube thumbnail with play button (swapped for the real player on click) */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: rgba(33,33,33,0.8);
  transition: background 0.15s;
}
.yt-play::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 14px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.video-facade:hover .yt-play { background: #f00; }

.video-note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--accent);
  margin-top: 0.6rem;
}

/* "Arya" name at the top of saved pages */
.site-name {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hd);
  margin-bottom: 4rem;
}

/* empty captions only show their placeholder while you hover the block */
.cms-on figcaption.cms-editable:empty:not(:focus) { min-height: 0; }
.cms-on .blk:not(:hover) figcaption.cms-editable:empty:not(:focus)::before { content: none; }

/* Captions have their own colour (set in the colour panel) */
.img-item figcaption,
.video figcaption { color: var(--cap, var(--muted)); }

.blk-tools .fs-val {
  font: 500 0.6rem 'Inter', sans-serif;
  color: var(--muted);
  min-width: 2.6rem;
  text-align: center;
}

/* ===== YouTube-style thumbnail overlay ===== */
.video-facade { cursor: pointer; overflow: hidden; }
.video-facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.yt-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem 2.2rem;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0));
  text-align: left;
  pointer-events: none;
}
.yt-avatar {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font: 700 1rem 'Roboto', 'Inter', Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-meta { display: flex; flex-direction: column; min-width: 0; }
.yt-title {
  color: #fff;
  font: 500 clamp(0.85rem, 1.6vw, 1.15rem)/1.3 'Roboto', 'Inter', Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.yt-author {
  color: rgba(255,255,255,0.85);
  font: 400 0.78rem/1.4 'Roboto', 'Inter', Arial, sans-serif;
}

/* red play button, like YouTube */
.yt-play { background: #ff0033; border-radius: 14px; }
.video-facade:hover .yt-play { background: #ff0033; filter: brightness(1.1); }

.yt-watch {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(23,23,23,0.8);
  color: #fff;
  font: 500 0.82rem 'Roboto', 'Inter', Arial, sans-serif;
  transition: background 0.15s;
}
.yt-watch:hover { background: rgba(0,0,0,0.95); }
.yt-logo { display: flex; align-items: center; gap: 0.25rem; font-weight: 700; letter-spacing: -0.03em; }
.yt-logo i {
  position: relative;
  width: 1.25rem;
  height: 0.88rem;
  border-radius: 0.22rem;
  background: #fff;
}
.yt-logo i::after {
  content: '';
  position: absolute;
  left: 0.48rem;
  top: 0.24rem;
  border-style: solid;
  border-width: 0.2rem 0 0.2rem 0.34rem;
  border-color: transparent transparent transparent #000;
}

@media (max-width: 600px) {
  .yt-top { padding: 0.6rem 0.7rem 1.6rem; gap: 0.5rem; }
  .yt-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }
  .yt-watch { right: 0.6rem; bottom: 0.6rem; padding: 0.4rem 0.7rem; font-size: 0.7rem; }
}