/* ==========================================================================
   SITE.CSS - the site's own styles
   ==========================================================================
   Rule: only var(--...) tokens from /brand/tokens.css, no raw colors or sizes.
   Reference for how things should look: /brand/style-tile.html

   Sections:
   1. Reset and base
   2. Layout
   3. Glass
   4. Header (logo, menu, tool buttons)
   5. Buttons
   6. Text content
   7. Wave field
   8. Footer
   9. Home page (hero + "right now")
   10. Post cards and feed
   11. Post page
   12. Category page: filter buttons and post list
   13. Media in posts: images with captions, video
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. RESET AND BASE
   -------------------------------------------------------------------------- */

/* Width and height include padding and border: makes sizes predictable */
*, *::before, *::after { box-sizing: border-box; }

/* Browsers add margins to headings, paragraphs etc. We set our own spacing instead. */
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

html {
  /* Smooth scrolling for "#" links, but only if the visitor doesn't mind motion */
  scroll-padding-top: var(--header-offset); /* jumped-to content lands below the sticky header (WCAG 2.4.11) */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  color: var(--color-text);
  font: var(--weight-body) var(--text-body)/var(--leading-body) var(--font-body);
  /* Two soft light pools on top of the page color give the background depth */
  background:
    radial-gradient(60% 50% at 85% 0%, var(--color-bg-glow-1), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, var(--color-bg-glow-2), transparent 70%),
    var(--color-bg);
  background-attachment: fixed; /* the light pools stay put while you scroll */
}

img, svg, video { max-width: 100%; display: block; }

a { color: var(--color-text-accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: var(--link-hover-thickness); }

/* Keyboard focus: always visible (WCAG 2.4.7). :focus-visible = only for keyboard, not mouse clicks. */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* "Skip to content" link: hidden above the screen until you press Tab (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -5rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }


/* --------------------------------------------------------------------------
   2. LAYOUT
   -------------------------------------------------------------------------- */

/* Centered column with a minimum gap left and right on phones */
.wrap {
  width: min(var(--width-content), 100% - 2 * var(--gutter));
  margin-inline: auto;
  position: relative;
  z-index: 1; /* above the wave field (added in session 2) */
}

main { padding-block: var(--space-6); }

/* Vertical rhythm between big blocks on a page */
main > * + * { margin-top: var(--space-5); }


/* --------------------------------------------------------------------------
   3. GLASS - the frosted panel used for all content
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass-gloss), var(--color-surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); /* Safari */
  border: var(--border-width) solid var(--color-border);
  border-top-color: var(--color-border-rim); /* light catching the top edge */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* A glass block with comfortable padding that grows with the screen */
.panel { padding: clamp(var(--space-5), 4vw, var(--space-7)); }


/* --------------------------------------------------------------------------
   4. HEADER - sticky glass bar at the top
   Phones: row 1 = logo + tool buttons, row 2 = the menu (swipe sideways if it doesn't fit).
           The header scrolls away with the page, so it doesn't eat reading space.
   Tablets (48rem+): same rows, but the header sticks to the top.
   Wide screens (64rem+): everything on one row.
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 10;
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  color: var(--color-text);
  text-decoration: none;
  font: var(--weight-heading) var(--text-brand) var(--font-display);
}
.brand svg { color: var(--color-logo); transition: filter var(--duration-base) var(--ease-out); }
.brand:hover svg { filter: var(--glow-mark); }

.header-tools { display: flex; gap: var(--space-1); margin-left: auto; }

/* --- The menu --- */
.site-nav {
  position: relative;       /* so nav.js can measure item positions inside the strip */
  order: 3;                 /* phones: after the tool buttons, on its own row */
  flex-basis: 100%;
  overflow-x: auto;         /* too many items for a small screen? swipe sideways */
  scrollbar-width: none;    /* hide the scrollbar (Firefox); the cut-off last item shows there's more */
}
.site-nav::-webkit-scrollbar { display: none; } /* same, for Chrome and Safari */

.site-nav ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);  /* room for the focus ring, which would otherwise be cut off by overflow */
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-ui);
  text-decoration: none;
  white-space: nowrap;      /* "Carrière" never breaks over two lines */
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.site-nav a:hover { color: var(--color-text); background: var(--color-surface-hover); }

/* The page you're on: orange pill.
   No outer glow here: the swipeable menu would cut it off into a square. Wide screens add it back below. */
.site-nav a[aria-current="page"] {
  color: var(--color-on-accent);
  background: var(--color-accent-gradient);
  box-shadow: var(--inner-shine);
}
/* The section you're in (e.g. reading a Media post): orange underline */
.site-nav a[aria-current="true"] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--indicator-width);
  text-underline-offset: var(--space-2);
}

/* --- Tool buttons (theme, pause): icon + text --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--target-min);
  min-height: var(--target-min);
}
.icon-btn .icon { display: none; width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }

/* Show the icon that matches what the button will do next */
.icon-btn[data-next="light"] .icon-sun,
.icon-btn[data-next="dark"] .icon-moon,
.icon-btn[data-state="playing"] .icon-pause,
.icon-btn[data-state="paused"] .icon-play { display: block; }

/* Below 80rem only the icon shows. The text is hidden visually but still read by screen readers. */
.icon-btn .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Very small phones (under 360px): only the monogram, the name is hidden visually
   (screen readers still read it). Otherwise logo + 2 buttons don't fit on one row.
   (Media queries can't use var(), so the breakpoints are written out.) */
@media (max-width: 22.49rem) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tablets and up: the header sticks to the top while you scroll */
@media (min-width: 48rem) {
  .site-header { position: sticky; top: var(--space-3); }
}

/* Wide screens: logo, menu and tools on one row */
@media (min-width: 64rem) {
  .site-header { flex-wrap: nowrap; border-radius: var(--radius-pill); }
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; overflow: visible; } /* no swiping needed: let the glow show */
  .site-nav a[aria-current="page"] { box-shadow: var(--inner-shine), var(--glow-accent); }
  .header-tools { margin-left: 0; }
}
@media (min-width: 80rem) {
  .icon-btn .label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   .btn    = primary, orange (one per view)
   .btn-2  = secondary, glass (add to .btn)
   .btn-sm = small glass button (header tools)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--pad-btn);
  border: 0;
  border-radius: var(--radius-pill);
  font: var(--weight-strong) var(--text-button) var(--font-body);
  color: var(--color-on-accent);
  background: var(--color-accent-gradient);
  box-shadow: var(--inner-shine), var(--glow-accent);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.btn:hover { box-shadow: var(--inner-shine), var(--glow-accent-hover); }

.btn-2,
.btn-sm {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--inner-shine-soft);
}

.btn-sm {
  min-height: var(--target-sm);
  padding: var(--pad-btn-sm);
  border-radius: var(--radius-pill);
  font: var(--weight-ui) var(--text-button-sm) var(--font-body);
  cursor: pointer;
  transition: box-shadow var(--duration-base), border-color var(--duration-base);
}

/* Secondary hover: the glow sits mostly inside, with a tight halo outside */
.btn-2:hover,
.btn-sm:hover {
  background: rgba(var(--halo-rgb), .10);
  border-color: rgba(var(--halo-rgb), .5);
  box-shadow: var(--inner-shine-mid), var(--glow-halo);
}

/* The "hidden" attribute must win over display: inline-flex above */
[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   6. TEXT CONTENT
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-heading); text-wrap: balance; overflow-wrap: break-word; } /* break a too-long word rather than overflow a phone screen */

.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}
/* One highlighted word in the hero heading: <em>signaal</em> */
.hero h1 em {
  font-style: normal;
  color: var(--color-heading-accent);
  text-shadow: var(--glow-text);
  transition: text-shadow var(--duration-base);
}
.hero h1 em:hover { text-shadow: var(--glow-text-hover); } /* the glow grows under the mouse */

.lead {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--text-lead);
  color: var(--color-text-muted);
}

/* Title of a category page or post */
.page-title {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}

/* Quiet line for "nothing here yet" messages */
.empty-note { margin-top: var(--space-5); color: var(--color-text-muted); }

/* Small uppercase label above a section */
.kicker {
  margin-bottom: var(--space-4);
  font: var(--weight-strong) var(--text-caption) var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-accent);
}

/* Running text: limited line length for comfortable reading */
.prose { max-width: var(--width-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-h2); line-height: var(--leading-snug); margin-top: var(--space-7); }
.prose > :first-child { margin-top: 0; } /* no extra gap above the first heading in a block */


/* --------------------------------------------------------------------------
   7. WAVE FIELD - fixed behind everything, drawn by /brand/waves.js
   -------------------------------------------------------------------------- */
.wave-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: var(--wave-opacity);
  pointer-events: none; /* clicks go through to the page */
}
.wave-field path { fill: none; }


/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-block: var(--space-7) var(--space-6);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.footer-brand { display: flex; align-items: center; gap: var(--space-2); }
.footer-brand svg { color: var(--color-logo); }

.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a,
.footer-top {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-sm); /* comfortable tap target */
}

.footer-top { margin-left: auto; color: var(--color-text-muted); }


/* --------------------------------------------------------------------------
   9. HOME PAGE - hero and "right now" panel side by side on wide screens
   -------------------------------------------------------------------------- */
.home-top {
  display: grid;
  gap: var(--space-5);
}
/* 56rem: from here there's room for two panels side by side (media queries can't use var()) */
@media (min-width: 56rem) {
  .home-top { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
}

/* "Right now": label left, value right, a thin line between rows */
.now dl { margin: 0; }
.now dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}
.now dt { font-weight: var(--weight-ui); }
.now dd { margin: 0; color: var(--color-text-muted); text-align: right; }

/* Heading above the post feed, sitting on the page (not on glass) */
.section-title {
  margin-block: var(--space-7) var(--space-4);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}


/* --------------------------------------------------------------------------
   10. POST CARDS AND FEED
   A grid that fits as many card columns as the screen allows, newest first,
   reading left to right like a normal list.
   -------------------------------------------------------------------------- */
.feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr)); /* min(): never wider than a small phone */
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}

/* Masonry: with assets/js/masonry.js, cards slide up into the gap under a shorter card.
   The script adds this class, which cuts the grid into thin rows (no space between them),
   and tells every card how many thin rows it covers. Without JavaScript: the normal grid above. */
.feed.is-masonry {
  grid-auto-rows: var(--space-1);
  row-gap: 0;
}

.card {
  display: block;
  overflow: hidden; /* keeps the cover image inside the rounded corners */
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base);
}
/* Rise and lean, only while hovered or focused. --tilt-x and --tilt-y are set by assets/js/tilt.js
   while the mouse moves over the card; without JavaScript they stay 0deg and the card only rises.
   No transform while resting on purpose: some browsers drop the glass blur on 3D-turned elements. */
.card:hover,
.card:focus-visible {
  transform: perspective(var(--tilt-depth)) translateY(calc(-1 * var(--lift-card)))
             rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover);
}
.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;  /* every cover gets the same shape, whatever the photo size */
  object-fit: cover;    /* fill that shape and crop the edges instead of squashing */
  background: var(--color-surface-hover);
}
.card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.card-body .tag { order: -1; } /* shown above the title, even though it comes after it in the HTML */
.card h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-h3);
  font-weight: var(--weight-title);
  line-height: var(--leading-snug);
}
.card time { font-size: var(--text-small); color: var(--color-text-muted); }

/* Small pill with the category or a subtag */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-tag-border);
  border-radius: var(--radius-pill);
  background: var(--color-tag-bg);
  color: var(--color-text-accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: box-shadow var(--duration-base), border-color var(--duration-base);
}
.tag:hover {
  border-color: var(--color-accent);
  box-shadow: var(--glow-tag);
}


/* --------------------------------------------------------------------------
   11. POST PAGE
   -------------------------------------------------------------------------- */
/* The post panel is as wide as the top bar. Inside it, everything sits in one centered column:
   title, text, photos and videos all line up at the same width (--width-post). */
.post-header,
.post .prose {
  max-width: var(--width-post);
  margin-inline: auto;
}
.post .lead { max-width: none; } /* the summary too (on the home page it stays narrower) */

/* The line between the summary and the text */
.post-header hr {
  margin: var(--space-6) 0 0;
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-sm);
  font-size: var(--text-small);
  font-weight: var(--weight-ui);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.post .page-title { margin-top: var(--space-3); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.post .prose { margin-top: var(--space-6); }

/* Quotes and lists inside posts */
.prose ul,
.prose ol { padding-left: var(--space-5); }
.prose blockquote {
  padding-left: var(--space-4);
  border-left: var(--indicator-width) solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-h3);
}

a.tag { text-decoration: none; }          /* subtags on a post link to the filtered category list */

.post-translations { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-muted); }

.prose img { width: 100%; height: auto; border-radius: var(--radius-md); } /* plain Markdown images */
.prose h3 { font-size: var(--text-h3); line-height: var(--leading-snug); margin-top: var(--space-6); }
.prose hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin-block: var(--space-7); }
.prose code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
  font-size: .9em; /* relative to the text around it, so it works in headings too */
}

/* Callout (a Notion callout block): a warm tinted box with an orange edge */
.prose .callout {
  padding: var(--space-4);
  border-left: var(--indicator-width) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-tag-bg);
}
.callout > * + *,
.prose details > * + * { margin-top: var(--space-3); }

/* Toggle (a Notion toggle block): click the first line to open the rest */
.prose summary {
  cursor: pointer;
  font-weight: var(--weight-ui);
}

/* Tables: a wide table scrolls sideways inside its own box; the page itself never does (WCAG 1.4.10) */
.table-wrap { overflow-x: auto; }
.prose table { min-width: 100%; border-collapse: collapse; }
.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
}
.prose th { font-weight: var(--weight-ui); }


/* --------------------------------------------------------------------------
   12. CATEGORY PAGE - filter buttons and post list
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.chip {
  min-height: var(--target-sm);
  padding: var(--pad-btn-sm);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-hover);
  color: var(--color-text);
  font: var(--weight-ui) var(--text-small) var(--font-body);
  cursor: pointer;
  transition: box-shadow var(--duration-base), border-color var(--duration-base);
}
.chip span { margin-left: var(--space-1); color: var(--color-text-accent); font-weight: var(--weight-strong); } /* the count */
.chip:hover { border-color: rgba(var(--halo-rgb), .5); box-shadow: var(--glow-halo); }

/* The active filter: orange pill, like the active menu item */
.chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--color-accent-gradient);
  color: var(--color-on-accent);
  box-shadow: var(--inner-shine), var(--glow-accent);
}
.chip[aria-pressed="true"] span { color: var(--color-on-accent); }

.post-count { margin-bottom: var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); }

.post-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* One row: small image left, text right */
.post-row {
  display: grid;
  grid-template-columns: var(--thumb-width-sm) minmax(0, 1fr); /* minmax(0, ...): the text column may shrink below its longest word */
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.post-row:hover { background: var(--color-surface-hover); border-color: var(--color-border); }
/* 30rem and wider: room for a bigger thumbnail (media queries can't use var()) */
@media (min-width: 30rem) {
  .post-row { grid-template-columns: var(--thumb-width) minmax(0, 1fr); gap: var(--space-4); }
}

.post-row img,
.thumb-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
}
.thumb-empty { display: grid; place-items: center; color: var(--color-border-ui); }

.post-row h3 { font-size: var(--text-h3); font-weight: var(--weight-title); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.post-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.post-row-meta span { color: var(--color-text-accent); overflow-wrap: anywhere; }


/* --------------------------------------------------------------------------
   13. MEDIA IN POSTS - images with captions, click-to-play video
   -------------------------------------------------------------------------- */
.post-figure,
.video { margin-block: var(--space-6); }

.post-figure img { width: 100%; height: auto; border-radius: var(--radius-md); }

/* Video and audio files uploaded to Notion: the browser's own player, full width */
.post-figure video,
.post-figure audio { width: 100%; }
.post-figure video { border-radius: var(--radius-md); }

figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* The play area before clicking: same shape as the video (16:9) */
.video-facade,
.video-player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-solid);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }

/* Big orange play button in the middle */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  background: var(--color-accent-gradient);
  color: var(--color-on-accent);
  box-shadow: var(--inner-shine), var(--glow-accent);
  transition: box-shadow var(--duration-base);
}
.video-play svg { width: var(--play-icon); height: var(--play-icon); }
.video-facade:hover .video-play { box-shadow: var(--inner-shine), var(--glow-accent-hover); }

/* Small note in the corner: tells visitors the video comes from YouTube before they click */
.video-note {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-solid); /* solid, not glass: text on a photo needs a guaranteed background */
  color: var(--color-text);
  font-size: var(--text-caption);
}