/* aaronmirman.com
   A paper page that the landing illustration sits on directly. Below it a slate Hello band;
   after that, quiet sections in the illustrations' own palette. Colours are sampled from the artwork. */

@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/assets/fonts/crimson-pro-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
:root {
  --paper: #F5F4EF;      /* sampled from the illustration ground */
  --ink: #23313B;        /* deep slate, all text */
  --ink-soft: #55636D;   /* secondary text */
  --slate: #44667F;      /* links, dot, Hello band */
  --kids-paper: #F2EFE8;     /* sampled from the kids illustration's paper */
  --card-alpha: .74;
  --card: rgba(250, 249, 245, var(--card-alpha)); /* translucent paper for text laid over illustration */
  --portrait-paper: #F9F8F5; /* sampled from the pencil portrait's paper; bio section ground */
  --rule: rgba(35, 49, 59, .16);
  --night-cloud: #E3DFD6;    /* the cloud colour the vignette version fades to */
  --on-night: #F3F0E7;
  --moon: #E6D6A8;           /* lifted from the moon for the email link */
  --on-slate: #F5F4EF;

  --f-display: "Outfit", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --f-text: "Crimson Pro", "Iowan Old Style", "Georgia", serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.1875rem/1.62 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}
img { height: auto; }
a { color: var(--slate); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 300; margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .3s, box-shadow .3s;
}
.site-head.is-scrolled { background: rgba(245, 244, 239, .92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: none; }
.mark { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--slate); }
.mark:hover { background: var(--ink); }
.site-head .nav { transition: opacity .35s, visibility .35s; }
.nav { display: flex; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav a { font: 400 .9375rem/1 var(--f-display); letter-spacing: .03em; text-transform: lowercase; color: var(--ink); text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:hover { border-color: var(--ink); }
.menu-btn { display: none; }

/* Narrow screens: the four links fold into a menu button that opens a panel under the header */
@media (max-width: 640px) {
  .menu-btn {
    display: grid; align-content: center; gap: 7px; width: 44px; height: 44px; margin-right: -10px; padding: 0 10px;
    background: none; border: 0; cursor: pointer; border-radius: 6px;
  }
  .menu-btn span { display: block; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .site-head nav { position: absolute; left: 0; right: 0; top: 100%; }
  .site-head .nav {
    display: grid; gap: 0; background: var(--paper); box-shadow: 0 1px 0 var(--rule);
    padding: 6px max(var(--gutter), env(safe-area-inset-left, 0px)) 14px max(var(--gutter), env(safe-area-inset-right, 0px));
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .site-head.menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  .site-head.menu-open { background: var(--paper); }
  .nav li + li { border-top: 1px solid var(--rule); }
  .nav a { display: block; padding-block: 15px; font-size: 1.125rem; border: 0; }
  .site-head .wrap { position: static; }
}

/* ---------- Landing ---------- */
.landing { position: relative; overflow: hidden; }
.landing .wrap { max-width: none; position: relative; }
.landing-inner {
  position: relative;
  min-height: clamp(520px, 50vw, 860px);
  padding-top: clamp(150px, 15vw, 230px);
}
.landing-art {
  position: absolute; z-index: 0;
  top: clamp(-30px, -2vw, 0px);
  right: -5vw;
  width: 68vw; max-width: 1400px; height: auto;
  --mx: linear-gradient(to right, transparent 0, #000 14%, #000 93%, transparent 100%);
  --my: linear-gradient(to bottom, transparent 0, #000 7%, #000 88%, transparent 100%);
  -webkit-mask-image: var(--mx), var(--my); -webkit-mask-composite: source-in;
  mask-image: var(--mx), var(--my); mask-composite: intersect;
}
.landing-text { position: relative; z-index: 1; }
.name {
  font-family: var(--f-text);
  font-weight: 200;
  font-size: clamp(2.86rem, 5.06vw, 5.72rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink);
  white-space: nowrap;
}
.roles {
  display: flex; align-items: stretch; gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
.roles ul { list-style: none; margin: 0; padding: 0; font: 400 clamp(.86rem, 1.1vw, 1.05rem)/2.15 var(--f-display); letter-spacing: .3em; text-transform: uppercase; }
.roles .what { font-weight: 600; }
.roles .what { color: var(--ink); }
.roles .where { color: var(--slate); padding-left: clamp(28px, 5vw, 72px); border-left: 1px solid var(--rule); text-transform: lowercase; letter-spacing: .14em; }


/* ---------- Hello band ---------- */
/* Generated texture: the band gets a canvas layer drawn by site.js */
.textured { position: relative; isolation: isolate; }
.texture { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.texture canvas { display: block; width: 100%; height: 100%; }

.hello { background: var(--slate); color: var(--on-slate); }
.hello .wrap { padding-block: clamp(40px, 4.4vw, 60px); display: grid; justify-items: center; text-align: center; gap: 12px; }
.hello h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: .45em; margin-right: -.45em; text-transform: uppercase; }
.hello p { font: 400 clamp(1.2rem, 1.5vw, 1.4rem)/1.5 var(--f-text); max-width: 72ch; text-wrap: balance; }

/* ---------- About ---------- */
.about { background: var(--portrait-paper); }
.about .wrap { padding-block: clamp(56px, 6.5vw, 100px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.portrait { margin: 0; position: sticky; top: 110px; }
.portrait img { display: block; width: 100%; max-width: 440px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 70%, transparent 100%); }
.bio { min-width: 0; display: grid; gap: 1.05em; max-width: 64ch; padding-top: 8px; }
.bio .lead { font: 300 clamp(1.3rem, 1.6vw, 1.5rem)/1.45 var(--f-text); margin-bottom: .2em; text-wrap: pretty; }
.bio p { text-wrap: pretty; hanging-punctuation: first; }
.bio em { font-style: italic; }

/* ---------- Kids ----------
   The illustration fills the section on desktop; content sits on translucent paper cards.
   Cards sit to the right: a wide intro across the top, then two equal cards held to the same height.
   The left column stays open for the tree and the kids on the log. */
.kids { position: relative; isolation: isolate; background: var(--kids-paper); }
.kids-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 0%; z-index: -1; display: block; }
.kids-grid { display: grid; gap: clamp(14px, 1.4vw, 22px); align-items: start; padding-block: clamp(44px, 4.5vw, 72px); }
.card, .k-credits {
  background: var(--card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 12px; padding: clamp(20px, 2vw, 30px); min-width: 0;
}
.section-title { font-family: var(--f-text); font-weight: 300; text-transform: lowercase; font-size: calc(clamp(1.8rem, 3vw, 2.8rem) * 1.1); line-height: 1.05; letter-spacing: 0; margin-bottom: .35em; }
.k-intro { display: grid; gap: .8em; grid-area: intro; }
.k-intro .section-title { margin-bottom: 0; }
.kids-lead { font: 300 clamp(1.15rem, 1.4vw, 1.35rem)/1.45 var(--f-text); display: grid; gap: .1em; }
.kids-lead span { display: block; text-wrap: balance; }
.k-intro { text-align: right; justify-items: end; }
.area h3, .ja h3 { text-align: right; }
@media (max-width: 640px) { .k-intro, .area h3, .ja h3 { text-align: left; justify-items: start; } }


.k-credits { grid-area: credits; min-width: 0; }
.area { display: grid; gap: 8px; min-width: 0; }
.area h3, .ja h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: .02em; }
.area p, .ja-text p { font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; max-width: 64ch; }
.ja { grid-area: ja; display: grid; gap: 22px; }
.ja-text { display: grid; gap: 8px; }
.ja-text p + p { margin-top: .5em; }
.area + .area { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 18px; }

.kids-art { object-position: 30% 100%; }
.kids-grid { grid-template-columns: minmax(0, 2.6fr) minmax(0, 4.7fr) minmax(0, 4.7fr); grid-template-areas: ". intro intro" ". credits ja"; }
.k-intro { justify-self: end; width: 75%; }
.ja, .k-credits { align-self: stretch; }


/* ---------- Player ---------- */
.player { min-width: 0; background: rgba(255, 255, 255, .55); border-radius: 10px; padding: 16px; }
.player-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.player-top img { width: 72px; aspect-ratio: 1; border-radius: 3px; display: block; }
.player-top .album { font: 400 1.15rem/1.2 var(--f-display); }
.player-top .meta { font-size: .95rem; color: var(--ink-soft); margin-top: 2px; }
.play {
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--slate); color: var(--paper); display: grid; place-items: center;
}
.play:hover { background: var(--ink); }
.play svg { width: 18px; height: 18px; fill: currentColor; }
.play .i-pause { display: none; }
.player.is-playing .play .i-play { display: none; }
.player.is-playing .play .i-pause { display: block; }
.now { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 500 .95rem/1.3 var(--f-display); }
.now .time { color: var(--ink-soft); font-weight: 400; font-variant-numeric: tabular-nums; }
.tracks-wrap {
  max-height: calc(5 * 42px); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  scrollbar-width: thin; scrollbar-color: rgba(68,102,127,.55) rgba(35,49,59,.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.tracks-wrap.at-end { -webkit-mask-image: none; mask-image: none; }
.tracks-wrap::-webkit-scrollbar { width: 6px; }
.tracks-wrap::-webkit-scrollbar-track { background: rgba(35,49,59,.08); border-radius: 6px; }
.tracks-wrap::-webkit-scrollbar-thumb { background: rgba(68,102,127,.55); border-radius: 6px; }
.tracks { list-style: none; margin: 0; padding: 0 8px 0 0; }
.tracks li + li { border-top: 1px solid var(--rule); }
.tracks button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 42px;
  display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; align-items: center;
  padding: 0 4px; font: 400 1rem/1.3 var(--f-display);
}
.tracks button:focus-visible { outline: 2px solid var(--slate); outline-offset: -2px; }
.tracks .n, .tracks .t { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: .9rem; }
.tracks button:hover .title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.tracks [aria-current="true"] .title { color: var(--slate); font-weight: 500; }
.tracks [aria-current="true"] .n { color: var(--slate); }
.scroll-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 .85rem/1 var(--f-display); color: var(--ink-soft); transition: opacity .2s; }
.scroll-hint svg { width: 12px; height: 12px; }
.scroll-hint.is-hidden { opacity: 0; }

/* ---------- Work ---------- */
.work { position: relative; isolation: isolate; overflow: hidden; }
.work .wrap { padding-block: clamp(56px, 6.5vw, 100px); }

/* Background: sparse hairlines, dots, rings and a plus in the manner of the landing illustration.
   Hand-placed so it feels random but stays in the margins and gutters. */
.work-geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; --g: rgba(68, 102, 127, .32); }
.work-geo i { position: absolute; display: block; }
.work-geo .v { width: 0; border-left: 1px solid var(--g); }
.work-geo .v.d { border-left-style: dashed; }
.work-geo .h { height: 0; border-top: 1px solid var(--g); }
.work-geo .h.d { border-top-style: dashed; }
.work-geo .dot { width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(68, 102, 127, .5); }
.work-geo .ring { border: 1px solid var(--g); border-radius: 50%; aspect-ratio: 1; }
.work-geo .box { border: 1px solid var(--g); }
.work-geo .half { transform: translateX(-50%); }
.work-geo .plus { width: 15px; height: 15px; margin: -7px 0 0 -7px;
  background: linear-gradient(rgba(68,102,127,.6), rgba(68,102,127,.6)) center / 100% 1px no-repeat,
              linear-gradient(rgba(68,102,127,.6), rgba(68,102,127,.6)) center / 1px 100% no-repeat; }


/* Thumbnails sit on paper cards, like a boutique card catalogue */
.work .tile a, .work .tile-card { background: #FBFAF6; border: 1px solid var(--rule); border-radius: 5px; padding: 12px 12px 16px; gap: 12px; }
.work .tile .frame { border-radius: 2px; }
.work-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.work-head .section-title { margin: 0; }
.work-head p { font-size: 1.0625rem; color: var(--ink-soft); }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(18px, 2.2vw, 32px); }
.tile a { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.tile .frame { position: relative; aspect-ratio: 3 / 2; max-width: 100%; border-radius: 4px; overflow: hidden; background: #dfe3e3; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile .badge {
  position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(245, 244, 239, .94); display: grid; place-items: center; opacity: 0; transform: scale(.85);
  transition: opacity .25s, transform .25s;
}
.tile .badge svg { width: 14px; height: 14px; fill: var(--ink); margin-left: 2px; }
.tile a:hover img, .tile a:focus-visible img { transform: scale(1.03); }
.tile a:hover .badge, .tile a:focus-visible .badge { opacity: 1; transform: none; }
.tile .cap { display: grid; gap: 2px; }
.tile .cap strong { font: 400 1.125rem/1.3 var(--f-display); }
.tile .cap span { font: italic 400 1rem/1.4 var(--f-text); color: var(--ink-soft); }


/* ---------- Contact ----------
   The night version of the landing scene, trimmed top and bottom to suit the short content.
   Past the image's own width (about 2000px) the sides fill with the cloud colour it fades into. */
.contact { position: relative; isolation: isolate; color: var(--on-night); background: var(--night-cloud);
  min-height: max(400px, min(31vw, 620px)); display: grid; }
.contact-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; max-width: 2008px; margin-inline: auto; }
.contact-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.contact .wrap { padding-block: clamp(48px, 5vw, 80px); display: grid; align-content: center; justify-items: center; text-align: center; gap: 14px; }
.contact .section-title { margin: 0; font-size: calc(clamp(1.8rem, 2.8vw, 2.6rem) * 1.1); color: var(--on-night); }
.contact p { color: rgba(243, 240, 231, .88); font-size: 1.3rem; line-height: 1.45; }
.contact .section-title, .contact p, .email { text-shadow: 0 1px 14px rgba(12, 22, 30, .55); }
.email {
  margin-top: 14px; font: 500 calc(clamp(1.2rem, 2.2vw, 1.875rem) * .95)/1.3 var(--f-display); letter-spacing: .01em; text-transform: lowercase;
  color: var(--moon); text-decoration: none; border-bottom: 1px solid rgba(230, 214, 168, .6); padding-bottom: .12em;
  overflow-wrap: anywhere;
}
.email:hover { color: var(--on-night); border-color: var(--on-night); }
.site-foot { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; font: 400 .875rem/1.4 var(--f-display); color: var(--ink-soft); }
.site-foot a { color: var(--ink-soft); }


/* ---------- Load sequence: illustration, name, roles ---------- */
@media (prefers-reduced-motion: no-preference) {
  .landing-art { animation: fade 1.4s ease-out both; }
  .name { animation: rise 1s .25s cubic-bezier(.2,.7,.2,1) both; }
  .roles { animation: rise 1s .5s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .landing-inner { padding-top: 130px; }
}
@media (max-width: 1100px) {
  /* Below desktop the illustration becomes a banner and the cards tuck up under it */
  .kids-art { position: relative; inset: auto; height: auto; object-fit: initial;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .kids-grid { margin-top: -8vw; padding-top: 0; }
  .kids-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro intro" "credits ja"; }
  .k-intro { width: 100%; }
}
@media (max-width: 860px) {
  .landing-inner { min-height: 0; padding-top: 118px; display: grid; }
  .landing-art { position: relative; top: auto; right: auto; width: calc(100% + 2 * var(--gutter)); max-width: none; margin: 28px calc(-1 * var(--gutter)) 0; order: 2;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10%); mask-image: linear-gradient(to top, transparent 0, #000 10%); }
  .landing-text { order: 1; }
  .name { font-size: 8.4vw; letter-spacing: .03em; }
  .about .wrap { grid-template-columns: minmax(0, 1fr); }
  .kids-grid { margin-top: -3vw; }
  .kids-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "credits" "ja"; }
  .portrait { position: static; }
  .portrait img { max-width: 340px; margin-inline: auto; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body { font-size: 1.0625rem; }
  .roles { gap: 22px; }
  .roles .where { padding-left: 22px; }
  .roles ul { letter-spacing: .22em; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .site-foot { flex-direction: column; align-items: center; }
}

/* ---------- Production additions ---------- */
picture { display: contents; }
picture > source { display: none; }  /* keeps <source> tags from becoming grid items; image selection is unaffected */
.bio p + p { margin-top: 0; }
.bio > p:not(.lead) { margin: 0; }
.tile-card { display: grid; gap: 12px; background: #FBFAF6; border: 1px solid var(--rule); border-radius: 5px; padding: 12px 12px 16px; }
.tile .frame-in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }

/* Player seek bar */
.seek { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 4px 0 6px; background: transparent; cursor: pointer;
  --pct: 0%; }
.seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--slate) var(--pct), var(--rule) var(--pct)); }
.seek::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--slate) var(--pct), var(--rule) var(--pct)); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: var(--slate); opacity: 0; transition: opacity .2s; }
.seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--slate); opacity: 0; transition: opacity .2s; }
.player:hover .seek::-webkit-slider-thumb, .seek:focus-visible::-webkit-slider-thumb, .player.is-playing .seek::-webkit-slider-thumb { opacity: 1; }
.player:hover .seek::-moz-range-thumb, .seek:focus-visible::-moz-range-thumb, .player.is-playing .seek::-moz-range-thumb { opacity: 1; }
.player .note { font: 400 .85rem/1.3 var(--f-display); color: var(--ink-soft); }

/* Video viewer */
.viewer { width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--on-night); }
.viewer::backdrop { background: rgba(20, 30, 38, .86); backdrop-filter: blur(4px); }
.viewer-box { display: grid; gap: 10px; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.viewer-title { font: 400 1.05rem/1.3 var(--f-display); }
.viewer-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(245, 244, 239, .12); color: inherit; cursor: pointer; }
.viewer-close:hover { background: rgba(245, 244, 239, .24); }
.viewer-close svg { width: 16px; height: 16px; }
.viewer-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.viewer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: rise .35s cubic-bezier(.2,.7,.2,1) both; }
}