/* Basis, navigatie en gedeelde elementen */
:root {
  --surface: #fffdf9;
  --ink: #272620;
  --wine-dark: #461b23;
  --gold: #c9aa73;
  --serif: "Playfair Display", Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
  background: none;
}
svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex: none;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
}
button,
a {
  touch-action: manipulation;
}
button,
a,
input,
select {
  outline-offset: 5px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid #b58d4b;
}
::selection {
  background: #dcc7a2;
  color: #231d17;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  transform: translateY(-160%);
}
.skip:focus {
  transform: none;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: min(1248px, calc(100% - 112px));
  margin: auto;
}
.eyebrow {
  font: 500 10px/1.6 var(--sans);
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid #bfb4a4;
}
.text-link svg {
  width: 17px;
}
.text-link:hover {
  color: var(--wine);
  border-color: var(--wine);
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #fff9f1;
  border: 1px solid transparent;
  padding: 13px 22px;
  font-weight: 500;
  font-size: 13px;
  min-height: 48px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.primary:hover {
  transform: translateY(-1px);
}
.primary svg {
  width: 18px;
}
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  padding: 11px 18px;
  min-height: 46px;
  border-radius: 5px;
  font-size: 13px;
}
.secondary:hover {
  background: #dfd8cb55;
}
.site-header {
  height: 94px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  color: #f6f1e8;
}
.header-inner {
  width: min(1328px, calc(100% - 80px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffffff21;
}
.brand {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-shrink: 0;
}
.brand-mark {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  color: #d3b785;
  letter-spacing: -7px;
  position: relative;
  width: 52px;
}
.brand-mark > span {
  font-family: Georgia;
  font-size: 29px;
  position: absolute;
  bottom: -3px;
  right: 0;
}
.brand-name {
  font-size: 11px;
  line-height: 1.5;
}
.brand-name small {
  display: block;
  font-size: 9px;
}
.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  align-self: stretch;
}
.desktop-nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: #ece6dc;
  white-space: nowrap;
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.2s;
}
.desktop-nav a:hover:after,
.desktop-nav a[aria-current="page"]:after {
  transform: scaleX(1);
}
.desktop-nav a[aria-current="page"] {
  color: #e3c798;
}
.header-actions {
  display: flex;
  align-items: center;
}
.saved-link {
  position: relative;
}
.saved-count {
  position: absolute;
  top: 1px;
  right: 0;
  border-radius: 50%;
  background: var(--gold);
  color: #211b16;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}
.menu-button {
  display: none;
}
.mobile-nav {
  display: none;
}
.hero {
  height: 488px;
  position: relative;
  background: #18140f;
  color: #f8f3e9;
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #100e0bea 0%, #100e0b9e 32%, #100e0b19 68%),
    linear-gradient(
      0deg,
      #17130c80,
      transparent 25%,
      transparent 70%,
      #100c0760
    );
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero .eyebrow {
  color: #dec99f;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
}
.hero .eyebrow:before {
  content: "";
  width: 27px;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  font-size: clamp(46px, 4.5vw, 66px);
  line-height: 1.06;
  margin: 21px 0 23px;
  max-width: 600px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: #e0c89c;
}
.hero-description {
  line-height: 1.8;
  max-width: 420px;
}
.search-form {
  display: flex;
  align-items: center;
  background: #fffdf9f7;
  min-height: 83px;
  padding: 13px 15px 13px 26px;
  gap: 20px;
}
.search-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 100px;
}
.search-main > svg {
  width: 21px;
}
.search-main input {
  border: 0;
  background: none;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  outline-offset: 6px;
  padding: 12px 0;
}
.search-select {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
}
.search-select label {
  text-transform: uppercase;
}
.search-select select {
  color: var(--ink);
  border: 0;
  background: transparent;
  padding: 2px 15px 2px 0;
  cursor: pointer;
}
.search-form > .primary {
  min-width: 122px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.section-heading h2 {
  letter-spacing: -0.5px;
}
.section-heading p {
  color: var(--muted);
  margin-top: 8px;
}
.section-heading .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.section-heading .text-link {
  flex-shrink: 0;
}
.concert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.concert-card {
  position: relative;
}
.concert-image {
  position: relative;
  height: auto;
  overflow: hidden;
  background: #e3ddd0;
}
.concert-image > a {
  display: block;
  height: 100%;
  overflow: hidden;
}
.concert-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.concert-card:hover .concert-image img {
  transform: scale(1.035);
}
.save-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff45;
  border-radius: 50%;
  transition: background 0.2s;
}
.save-button:hover {
  background: #171511c7;
}
.concert-meta {
  color: var(--muted);
  margin-top: 19px;
  letter-spacing: 0.15px;
  flex-wrap: wrap;
}
.concert-card h3 a:hover {
  color: var(--wine);
}
.concert-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
}
.concert-bottom > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  min-height: 30px;
}
.concert-bottom > a:hover {
  color: var(--wine);
}
.tag {
  font-size: 9px;
  letter-spacing: 0.3px;
  color: #7a7061;
}
.image-absent {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #e6dfd2;
  color: #766754;
}
.image-absent svg {
  width: 38px;
  height: 38px;
}
.image-absent small {
  font-size: 11px;
}
.venue-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
}
.venue-tile {
  height: 310px;
  overflow: hidden;
  position: relative;
  display: block;
  color: white;
  background: #282218;
}
.venue-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.venue-tile:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #100f0dd9, transparent 72%);
}
.venue-tile:hover > img {
  transform: scale(1.035);
}
.venue-caption {
  position: absolute;
  bottom: 26px;
  left: 28px;
  right: 28px;
  z-index: 1;
}
.venue-caption .eyebrow {
  color: #e7d4b5;
  font-size: 9px;
}
.venue-caption h3 {
  font-size: 29px;
  margin-top: 6px;
}
.venue-caption .venue-arrow {
  bottom: 2px;
  right: 0;
  border: 1px solid #ffffff60;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
body.inner-page .site-header {
  position: relative;
  background: #211d18;
  height: 85px;
}
.page-content {
  padding-top: 50px;
  min-height: calc(100dvh - 280px);
}
.page-search {
  margin-bottom: 26px;
}
.page-search .search-form {
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface);
}
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 26px 0 25px;
}
.filter-chip[aria-pressed="true"] {
  color: #fffdf8;
}
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.empty-state h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
.empty-state p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 22px;
}
.page-venues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.venue-item .venue-tile {
  height: 310px;
}
.follow-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.follow-button {
  font-size: 12px;
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}
.follow-button svg {
  width: 17px;
}
.artist-grid {
  display: grid;
}
.artist-card {
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 27px;
}
.artist-card > img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 5px;
}
.artist-card .eyebrow {
  color: #7a6d59;
  font-size: 9px;
}
.artist-card h2 {
  font-size: 29px;
}
.artist-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
}
.artist-card .text-link {
  margin: 10px 0;
}
.agenda-row {
  display: grid;
  gap: 25px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.date-column {
  text-align: center;
  color: var(--wine);
}
.date-column strong {
  font: 35px/1.2 var(--serif);
  display: block;
}
.date-column span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.agenda-row > img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}
.agenda-row h3 {
  font: 500 22px/1.3 var(--serif);
  margin: 0 0 5px;
}
.agenda-row p {
  font-size: 12px;
  color: var(--muted);
}
.agenda-row .icon-button {
  color: var(--muted);
}
.snapshot-note {
  font-size: 11px;
  margin-top: 24px;
}
.admin-summary {
  display: flex;
  gap: 50px;
  padding: 22px 0 30px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.admin-summary strong {
  display: block;
  font: 32px var(--serif);
}
.admin-summary span {
  color: var(--muted);
  font-size: 12px;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}
th {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
  background: #eee8df;
}
td {
  font-size: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
}
td:first-child {
  font-weight: 500;
}
td button {
  color: var(--wine);
  text-decoration: underline;
}
body:has(dialog[open]) {
  overflow: hidden;
}
dialog {
  color: var(--ink);
  border: 0;
  padding: 0;
  background: var(--surface);
  box-shadow: 0 30px 100px #0005;
}
dialog::backdrop {
  background: #100e0b9c;
  backdrop-filter: blur(5px);
}
dialog[open] {
  animation: arrive 0.25s var(--ease);
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.detail-dialog {
  width: min(940px, calc(100% - 48px));
  max-height: 90dvh;
  overflow: auto;
}
.dialog-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #fffdf9eb;
  z-index: 2;
  color: #302a23;
}
.dialog-close:hover {
  background: #fff;
}
.detail-layout {
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 580px;
}
.detail-photo {
  height: 100%;
  min-height: 580px;
  object-fit: cover;
  width: 100%;
}
.detail-copy .eyebrow {
  color: var(--wine);
}
.detail-place {
  margin-bottom: 19px;
  display: flex;
}
.detail-performers {
  line-height: 1.75;
  color: var(--muted);
}
.program h3 {
  font: 600 11px var(--sans);
  text-transform: uppercase;
}
.program ul {
  padding: 0;
  list-style: none;
  margin: 0;
}
.program li {
  border-top: 1px solid var(--line);
}
.program li strong {
  display: block;
  font-weight: 500;
}
.program li span {
  color: var(--muted);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
}
.detail-actions .primary {
  flex: 1;
}
.detail-secondary {
  display: flex;
  flex-wrap: wrap;
}
.detail-secondary button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
}
.detail-secondary svg {
  width: 16px;
}
.detail-note {
  color: var(--muted);
}
.message {
  margin-top: 20px;
}
.utility-dialog {
  width: min(600px, calc(100% - 36px));
  max-height: 88dvh;
  overflow: auto;
}
.utility-dialog h2 {
  font-size: 29px;
  margin: 4px 0 20px;
}
.utility-dialog p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.utility-dialog .menu-links {
  display: flex;
  flex-direction: column;
}
.menu-links a {
  font: 25px var(--serif);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 50;
  transform: translate(-50%, 15px);
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  color: #fffdf7;
  transition: 0.2s;
  max-width: 90%;
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (min-width: 1600px) {
  .hero {
    height: 540px;
  }
  .hero-content {
    padding-top: 165px;
  }
  .hero h1 {
    font-size: 72px;
  }
  .hero-description {
    font-size: 15px;
  }
  .concert-image {
    aspect-ratio: 1.8;
  }
}
@media (max-width: 1150px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .header-inner {
    width: calc(100% - 48px);
  }
  .brand-name {
    font-size: 9px;
  }
  .brand-name small {
    font-size: 8px;
  }
  .brand {
    gap: 10px;
  }
  .search-select {
    padding-left: 17px;
  }
  .search-form {
    gap: 15px;
  }
}
@media (max-width: 980px) {
  .desktop-nav {
    display: none;
  }
  .header-actions {
    margin-left: auto;
  }
  .menu-button {
    display: flex;
  }
  .hero h1 {
    font-size: 58px;
  }
  .hero-image {
    object-position: 58% 50%;
  }
  .search-select label {
    font-size: 8px;
  }
  .search-form {
    padding-left: 18px;
    gap: 12px;
  }
  .search-form > .primary {
    min-width: 95px;
    padding: 12px;
  }
  .concert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .venue-tile,
  .venue-item .venue-tile {
    height: 260px;
  }
  .artist-card {
    grid-template-columns: 1fr;
  }
  .artist-card > img {
    height: 280px;
  }
  .detail-copy {
    padding: 38px 28px 28px;
  }
}
@media (max-width: 640px) {
  html {
    scroll-padding-top: 20px;
  }
  body {
    /* Alleen de ruimte vlak boven de veegindicator vrijlaten; de volledige
       veilige onderrand maakte de tabbladbalk onnodig hoog. */
    --mobile-nav-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 20px));
    --mobile-nav-height: calc(52px + var(--mobile-nav-bottom));
    padding-bottom: var(--mobile-nav-height);
    font-size: 14px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 79px;
  }
  .header-inner {
    width: calc(100% - 36px);
    gap: 8px;
  }
  .brand-mark {
    font-size: 39px;
    width: 44px;
  }
  .brand-mark > span {
    font-size: 24px;
    right: 0;
  }
  .brand-name {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .brand-name small {
    font-size: 7px;
    letter-spacing: 1.6px;
  }
  .brand {
    gap: 10px;
  }
  .header-actions {
    gap: 2px;
  }
  .saved-link {
    display: none;
  }
  .hero {
    height: 408px;
  }
  .hero-image {
    object-position: 66% 50%;
  }
  .hero:after {
    background:
      linear-gradient(90deg, #0f0d0be8, #0f0d0b78 58%, #0f0d0b40),
      linear-gradient(0deg, #100d09b3, transparent 50%);
  }
  .hero .eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px;
    gap: 10px;
  }
  .hero .eyebrow:before {
    width: 19px;
  }
  .hero h1 {
    letter-spacing: -1.3px;
    line-height: 1.09;
    margin: 19px 0 20px;
    max-width: 330px;
  }
  .hero-description {
    max-width: 310px;
  }
  .search-form {
    display: grid;
    gap: 0;
  }
  .search-main {
    grid-column: 1/-1;
    border-bottom: 1px solid var(--line);
    gap: 10px;
  }
  .search-main input {
    line-height: 1.4;
  }
  .search-main > svg {
    width: 18px;
  }
  .search-select {
    padding: 9px 5px 0;
    border: 0;
  }
  .search-select select {
    width: 100%;
    padding-right: 2px;
  }
  .search-form > .primary {
    min-width: 0;
    padding: 0;
    margin-top: 10px;
    justify-self: end;
  }
  .search-form > .primary span {
    display: none;
  }
  .section-heading h2 {
    letter-spacing: -0.6px;
  }
  .section-heading p {
    margin-top: 9px;
  }
  .section-heading .text-link {
    padding: 4px 0;
    gap: 5px;
    white-space: nowrap;
  }
  .section-heading .text-link svg {
    width: 14px;
  }
  .concert-grid {
    grid-template-columns: 1fr;
  }
  .concert-image {
    border-radius: 5px;
  }
  .concert-card h3 {
    letter-spacing: -0.3px;
  }
  .concert-bottom {
    margin-top: 12px;
  }
  .concert-bottom > a {
    font-size: 11px;
    min-height: 35px;
  }
  .tag {
    font-size: 9px;
  }
  .venue-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .venue-tile {
    height: 260px;
  }
  .venue-caption {
    bottom: 22px;
    left: 23px;
    right: 23px;
  }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: var(--mobile-nav-height);
    padding: 4px 12px calc(4px + var(--mobile-nav-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid #ded7ca;
    backdrop-filter: blur(18px);
  }
  .mobile-nav > a,
  .mobile-nav > button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #6d665c;
    position: relative;
  }
  .mobile-nav [aria-current="page"] {
    color: var(--wine);
    font-weight: 600;
  }
  .mobile-nav [aria-current="page"]:after {
    content: "";
    position: absolute;
    background: var(--wine);
  }
  .mobile-nav > button {
    color: var(--wine);
  }
  body.inner-page .site-header {
    height: 73px;
  }
  .page-content {
    padding-top: 31px;
    min-height: 50vh;
  }
  .page-search {
    margin-bottom: 20px;
  }
  .filter-row {
    gap: 7px;
    margin: 19px 0 23px;
  }
  .page-venues {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .venue-item .venue-tile {
    height: 255px;
  }
  .artist-card {
    grid-template-columns: 43% 1fr;
    padding-bottom: 25px;
  }
  .artist-card > img {
    height: 215px;
  }
  .artist-card h2 {
    font-size: 25px;
  }
  .artist-card p {
    font-size: 11px;
  }
  .artist-card .text-link {
    font-size: 11px;
  }
  .agenda-row > img {
    display: none;
  }
  .admin-summary {
    gap: 30px;
  }
  .admin-summary strong {
    font-size: 26px;
  }
  .admin-summary span {
    font-size: 10px;
  }
  .detail-dialog {
    max-height: calc(100dvh - 24px);
  }
  .detail-layout {
    display: block;
    min-height: 0;
  }
  .detail-photo {
    width: 100%;
  }
  .detail-actions {
    gap: 8px;
  }
  .detail-actions .primary {
    font-size: 12px;
  }
  .toast {
    bottom: 83px;
    width: max-content;
    max-width: calc(100% - 40px);
  }
  .utility-dialog h2 {
    font-size: 26px;
  }
}
@media (max-width: 360px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .brand-name {
    font-size: 8px;
  }
  .brand-name small {
    font-size: 6.5px;
  }
  .section-heading .text-link {
    font-size: 9px;
  }
  .artist-card {
    gap: 14px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .search-form {
    background: #fffdf9;
  }
  dialog::backdrop {
    backdrop-filter: none;
  }
}
.photo-open {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  text-align: left;
}
.concert-card h3 button {
  font: inherit;
  text-align: left;
  padding: 0;
  line-height: inherit;
  letter-spacing: inherit;
}
.concert-card h3 button:hover {
  color: var(--wine);
}
.concert-bottom > button {
  font-weight: 500;
  padding: 0;
}
.concert-bottom > button:hover {
  color: var(--wine);
}
.concert-bottom > button svg {
  width: 16px;
}
.photo-open:focus-visible {
  outline-offset: -5px;
}
.empty-state > svg {
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  color: var(--wine);
}
@media (max-width: 640px) {
  .search-form {
    position: relative;
    grid-template-columns: 1fr 1fr;
    padding-top: 4px;
  }
  .search-main {
    padding-right: 44px;
  }
  .search-form > .primary {
    position: absolute;
    margin: 0;
  }
}
/* Materialen, contrast en detailvensters */
:root {
  --paper: #f5f2eb;
  --muted: #6e6a60;
  --line: #ddd6c9;
  --wine: #643039;
  --focus: #9d783c;
}
body {
  background-color: var(--paper);
  background-image: url("assets/paper-grain.svg");
}
button,
a,
input,
select {
  transition:
    color 0.18s,
    background-color 0.18s,
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
:focus-visible {
  outline-color: var(--focus);
}
.site-header,
body.inner-page .site-header {
  position: fixed;
  z-index: 30;
  height: var(--header-height);
  color: #faf5eb;
  background: linear-gradient(180deg, #18140fb8, #211a1499);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-inner {
  gap: 26px;
}
.brand-name {
  font-weight: 500;
  letter-spacing: 1.7px;
}
.brand-name small {
  letter-spacing: 1.55px;
}
.desktop-nav a {
  font-size: 14px;
  align-self: stretch;
}
.desktop-nav a:after {
  bottom: 13px;
  height: 2px;
  transform-origin: center;
}
.inner-page .header-inner {
  border-bottom: 1px solid #ffffff21;
}
.header-actions {
  gap: 13px;
}
.primary {
  border-color: #36192035;
  background: linear-gradient(#713a43, #602a33);
  box-shadow:
    inset 0 1px #ffffff1f,
    0 3px 8px #44232112;
  border-radius: 6px;
  letter-spacing: 0.1px;
}
.primary:hover {
  background: linear-gradient(#793f49, #5b2630);
  box-shadow:
    inset 0 1px #ffffff29,
    0 5px 12px #44232120;
}
.primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px #250c1425;
}
.secondary {
  background: #fffdf98c;
  box-shadow: inset 0 1px #fff;
  border-color: #d9d0c1;
}
.secondary[aria-pressed="true"] {
  border-color: #c3aa85;
  color: var(--wine);
  background: #f1e9dd;
}
.icon-button:hover {
  background: #b7a38217;
}
.icon-button:active {
  transform: scale(0.94);
}
.hero-image {
  object-position: 50% 57%;
}
.hero h1 {
  letter-spacing: -1.4px;
}
.hero .eyebrow {
  letter-spacing: 2.1px;
}
.hero-description {
  font-size: 15px;
  color: #ece3d5;
}
.hero-content {
  padding-top: 143px;
}
.search-form {
  border: 1px solid #fffaf1;
  border-radius: 9px;
  box-shadow:
    0 18px 36px -12px #30231232,
    0 2px 5px #3a2c1608,
    inset 0 1px #fff;
}
.search-form:focus-within {
  border-color: #b7a07a;
  box-shadow:
    0 16px 30px -12px #30231229,
    0 0 0 3px #a0834b12;
}
.search-main input {
  font-size: 15px;
}
.search-select label {
  color: #71634e;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 1.1px;
}
.search-select select {
  font-size: 14px;
  min-height: 32px;
}
.search-select {
  min-width: 152px;
}
.search-form > .primary {
  min-height: 49px;
}
.search-main > svg {
  color: #746550;
}
.search-main input::placeholder {
  color: #827b70;
}
.section-heading {
  margin-bottom: 29px;
}
.section-heading p {
  font-size: 13px;
}
.section-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 1.9px;
  color: #756347;
}
.section-heading h2 {
  font-size: 34px;
}
.text-link {
  font-size: 13px;
  border-bottom-color: #cabda7;
}
.text-link:hover svg {
  transform: translateX(3px);
}
.text-link svg {
  transition: transform 0.2s;
}
.listing-intro {
  position: relative;
  min-height: 245px;
  background: #211d18 url("assets/zaal-sfeer.png") right 57% / auto 190%
    no-repeat;
  color: #fbf6ed;
  isolation: isolate;
}
.listing-intro:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #211d18 2%, #211d18f5 35%, #211d188c 69%, #211d1833),
    linear-gradient(0deg, #211d18ad, transparent 70%);
}
.listing-intro > .wrap {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding-top: 39px;
  padding-bottom: 70px;
}
.listing-intro .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d9bc86;
  font-size: 9px;
  letter-spacing: 1.9px;
}
.listing-intro .eyebrow:before {
  content: "";
  width: 23px;
  height: 1px;
  background: #c6a776;
}
.listing-intro h1 {
  font-size: 44px;
  letter-spacing: -0.8px;
  line-height: 1.16;
  margin: 13px 0;
}
.listing-intro p {
  font-size: 14px;
  color: #dfd6c8;
  line-height: 1.75;
}
.listing-body {
  margin-top: -40px;
  position: relative;
  padding-top: 0;
}
.listing-body .page-search {
  margin-bottom: 0;
}
.listing-body .search-form {
  border-color: #fffbf2;
  box-shadow:
    0 12px 30px -15px #42301850,
    inset 0 1px #fff;
  background: #fffcf7;
}
.result-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 0 17px;
  border-bottom: 1px solid #d8cfbe;
}
.result-tools .filter-row {
  margin: 0;
}
.instrument-options {
  gap: 3px;
  padding: 4px;
  background: #e9e3d8a6;
  border: 1px solid #ded6c6;
  border-radius: 7px;
  box-shadow: inset 0 1px 3px #5b3a1306;
}
.filter-chip {
  border: 1px solid transparent;
  border-radius: 4px;
  color: #686152;
  font-size: 12px;
  line-height: 1.2;
  padding: 1px 18px;
  min-height: 20px;
}
.filter-chip[aria-pressed="true"] {
  border-color: #e2d8c7;
  background: #fffdf8;
  color: var(--wine);
  box-shadow: 0 2px 5px #3c2a1612;
  font-weight: 600;
}
.filter-chip:hover {
  border-color: #d7c9af;
  background: #fffaf178;
}
.sort-control {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.sort-control label {
  color: var(--muted);
  font-size: 11px;
}
.sort-control select {
  border: 0;
  border-bottom: 1px solid #bcae96;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  min-height: 40px;
  min-width: 94px;
  padding: 5px 12px 5px 3px;
  color: var(--ink);
  cursor: pointer;
}
.result-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.result-status p {
  display: flex;
  gap: 9px;
  font-size: 11px;
  align-items: center;
  color: var(--muted);
}
.result-status strong {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
}
.reset-link {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--wine);
  min-height: 40px;
  padding: 4px;
}
.reset-link svg {
  width: 14px;
  height: 14px;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.active-filters:not(:empty) {
  margin: 0 0 22px;
}
.active-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7c8b3;
  border-radius: 4px;
  background: #e9dfd159;
  padding: 7px 10px;
  min-height: 36px;
  font-size: 11px;
  color: #614936;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.active-filter svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.active-filter:hover {
  background: #e9dfd1;
}
.listing-body .snapshot-note {
  padding-top: 19px;
  border-top: 1px solid var(--line);
  margin-top: 37px;
}
.concert-grid {
  gap: 31px;
}
.concert-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.concert-image {
  aspect-ratio: 1.72;
  border-radius: 8px;
  box-shadow:
    0 6px 16px -9px #36291840,
    inset 0 0 0 1px #402d1712;
  isolation: isolate;
}
.concert-image:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #2e241214;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.concert-image img {
  transition: transform 0.65s var(--ease);
  filter: saturate(0.94);
}
.photo-open {
  border-radius: inherit;
}
.save-button {
  top: 13px;
  right: 13px;
  width: 44px;
  height: 44px;
  z-index: 2;
  color: #fffdf5;
  border-color: #fff8e36e;
  background: #211a1480;
  box-shadow:
    0 3px 10px #130c071a,
    inset 0 1px #fff8e31a;
  backdrop-filter: blur(12px);
}
.save-button svg {
  width: 20px;
  height: 20px;
  transition:
    transform 0.2s,
    fill 0.2s;
}
.save-button:active svg {
  transform: scale(0.82);
}
.save-button[aria-pressed="true"] {
  background: #fffaf0;
  color: #69323a;
  border-color: #fff9ed;
  box-shadow: 0 2px 8px #2c190d24;
}
.save-button[aria-pressed="true"] svg {
  fill: #69323a;
  stroke: #69323a;
}
.concert-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 1px;
}
.concert-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 11px;
  font-size: 12px;
  line-height: 1.4;
}
.concert-meta time {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  color: #60313a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.concert-meta time > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.55px;
}
.concert-meta strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0 1px;
}
.concert-time {
  color: #716a5e;
  border-left: 1px solid #cfc4b1;
  padding-left: 11px;
}
.concert-category {
  font-size: 11px;
  color: #746d60;
  text-align: right;
}
.concert-venue {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  color: #736550;
}
.concert-venue svg {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.concert-performers {
  font-size: 14px;
  line-height: 1.7;
  min-height: 46px;
  max-width: none;
  margin-bottom: 17px;
  color: #69675e;
}
.concert-bottom {
  margin-top: auto;
  padding: 12px 0 0;
  border-top: 1px solid #cfc3af;
  position: relative;
  min-height: 57px;
  gap: 8px;
}
.concert-bottom:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 25px;
  height: 1px;
  background: #ae8952;
}
.concert-bottom > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: 13px;
  color: #493e2f;
  text-align: left;
  flex: 1;
}
.concert-bottom svg {
  width: 15px;
  height: 15px;
}
.availability {
  font-size: 10px;
  color: #6e5f4e;
  background: #e9e1d5;
  padding: 4px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.page-content .concert-grid {
  row-gap: 48px;
}
.program-art {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 21px 28px;
  color: #f1e9d8;
  background:
    repeating-linear-gradient(0deg, transparent 0 37px, #dbc69508 37px 38px),
    radial-gradient(ellipse at 100% 0%, #69725b35, transparent 70%), #2d352f;
  position: relative;
}
.program-art:after {
  content: "";
  width: 180px;
  height: 180px;
  border: 1px solid #dfd2b714;
  border-radius: 50%;
  position: absolute;
  right: -35px;
  bottom: -45px;
  box-shadow:
    0 0 0 14px #dfd2b707,
    0 0 0 30px #dfd2b704;
}
.program-art > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.7px;
  color: #dac69d;
}
.program-art-names {
  font: 500 29px/1.17 var(--serif);
  letter-spacing: 0.1px;
  margin: 10px 0;
}
.program-art > small {
  font-size: 8px;
  color: #bfc3b7;
}
.empty-state {
  padding: 45px 20px 55px;
  background: radial-gradient(ellipse at 50% 20%, #fffdf8c7, transparent 72%);
  border: 0;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid #d9cbb4;
  color: #917142;
  background: #ede4d6;
}
.empty-state .eyebrow {
  font-size: 9px;
  color: #8c7048;
  display: block;
  margin-bottom: 12px;
}
.empty-state p {
  line-height: 1.8;
}
.empty-state .primary {
  margin-top: 5px;
}
.venue-tile {
  border-radius: 8px;
  box-shadow: 0 7px 20px -12px #2c201d6b;
}
.venue-caption .venue-arrow {
  background: #1a171124;
  backdrop-filter: blur(8px);
}
.follow-line {
  font-size: 12px;
}
.follow-button {
  min-height: 44px;
}
.snapshot-note {
  line-height: 1.8;
  color: #777063;
}
.page-content .snapshot-note {
  font-size: 11px;
}
.ticket-short {
  display: none;
}
.detail-dialog {
  border-radius: 11px;
  border: 1px solid #e2d6c0;
  box-shadow:
    0 35px 100px #0007,
    0 0 0 6px #fff9eb0a;
}
.detail-copy {
  padding: 42px 36px 30px;
  background: linear-gradient(145deg, #fffdf8, #f7f2e9);
}
.detail-copy h2 {
  font-size: 33px;
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin: 17px 0 18px;
}
.detail-copy .eyebrow {
  font-size: 10px;
  letter-spacing: 1.4px;
}
.detail-place {
  align-items: flex-start;
  font-size: 13px;
  color: #6a5840;
  gap: 8px;
}
.detail-place svg {
  width: 17px;
  margin-top: 1px;
}
.detail-place small {
  display: block;
  font-size: 11px;
  color: #817363;
  margin-top: 3px;
}
.detail-performers {
  font-size: 13px;
}
.program {
  margin: 26px 0;
}
.program h3 {
  font-size: 10px;
  color: #7b6241;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.program li {
  display: flex;
  gap: 15px;
  padding: 13px 0;
  border-color: #ddd2bf;
  font-size: 13px;
  line-height: 1.7;
}
.program-number {
  font-size: 10px !important;
  color: #a08760 !important;
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  min-width: 17px;
}
.program li strong {
  font-size: 12px;
  color: #4d493f;
}
.program li div > span {
  font-size: 13px;
  color: #726e64;
}
.detail-actions-block {
  margin: 0 -36px;
  padding: 22px 36px 17px;
  border-top: 1px solid #d9cbb5;
  border-bottom: 1px solid #e2d7c5;
  background: #eee6d86b;
  box-shadow: inset 0 1px #ffffffcf;
}
.detail-actions {
  gap: 10px;
}
.detail-actions .primary {
  font-size: 12px;
}
.detail-actions .secondary {
  font-size: 12px;
}
.detail-secondary {
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
}
.detail-secondary button {
  font-size: 12px;
  min-height: 44px;
  border-radius: 4px;
}
.detail-secondary button[aria-pressed="true"] {
  color: var(--wine);
  font-weight: 500;
}
.detail-secondary button:hover {
  color: var(--wine);
}
.detail-note {
  font-size: 10px;
  margin-top: 17px;
  line-height: 1.8;
}
.detail-photo {
  object-position: 42% center;
}
.dialog-close {
  box-shadow: 0 2px 8px #26190e25;
  border: 1px solid #d6c8b0;
}
.message {
  font-size: 14px;
}
.toast {
  box-shadow:
    0 10px 30px #17130929,
    inset 0 1px #fff2;
  border: 1px solid #545548;
  background: #30382e;
  font-size: 13px;
  padding: 13px 22px;
}
@media (min-width: 981px) {
  .concert-card h3 {
    min-height: 0;
  }
  .hero-content,
  .listing-body,
  .listing-intro > .wrap {
    width: min(1248px, calc(100% - 112px));
  }
}
@media (max-width: 1150px) {
  .header-inner {
    gap: 18px;
  }
  .header-actions {
    gap: 8px;
  }
  .desktop-nav {
    gap: 19px;
  }
  .desktop-nav a {
    font-size: 13px;
  }
  .search-select {
    min-width: 130px;
  }
  .hero-content,
  .listing-body,
  .listing-intro > .wrap {
    width: calc(100% - 64px);
  }
  .concert-grid {
    gap: 24px;
  }
  .concert-card h3 {
    font-size: 23px;
  }
  .concert-category {
    font-size: 10px;
  }
  .concert-meta {
    gap: 6px;
  }
  .concert-meta time {
    gap: 8px;
  }
  .concert-time {
    padding-left: 8px;
  }
  .concert-performers {
    font-size: 13px;
  }
  .concert-venue {
    font-size: 12px;
  }
  .concert-bottom > button {
    font-size: 12px;
  }
  .availability {
    font-size: 9px;
  }
  .listing-intro h1 {
    font-size: 41px;
  }
  .search-main input {
    font-size: 14px;
  }
}
@media (max-width: 980px) {
  .hero-description {
    font-size: 14px;
  }
  .search-select {
    min-width: 100px;
  }
  .listing-intro h1 {
    font-size: 37px;
  }
  .listing-intro {
    min-height: 235px;
  }
  .concert-performers {
    font-size: 13px;
  }
  .concert-venue {
    font-size: 12px;
  }
  .concert-meta {
    font-size: 12px;
  }
  .concert-category {
    font-size: 10px;
  }
  .concert-bottom > button {
    font-size: 12px;
  }
  .detail-copy {
    padding-left: 28px;
    padding-right: 28px;
  }
  .detail-actions-block {
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .sort-control {
    gap: 8px;
  }
  .filter-chip {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 640px) {
  .hero-content,
  .listing-body,
  .listing-intro > .wrap {
    width: calc(100% - 40px);
  }
  .hero-content {
    padding-top: 117px;
  }
  .hero h1 {
    font-size: 47px;
  }
  .hero-description {
    font-size: 13px;
    line-height: 1.8;
  }
  .search-form {
    padding: 5px 13px 12px;
    border-radius: 8px;
    min-height: 122px;
  }
  .search-main {
    padding: 2px 46px 0 3px;
  }
  .search-main input {
    font-size: 16px;
    padding: 13px 0;
  }
  .search-form > .primary {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 6px;
  }
  .search-form > .primary svg {
    width: 18px;
    height: 18px;
  }
  .search-select {
    padding-top: 10px;
    min-width: 0;
    padding-left: 3px;
    padding-right: 5px;
  }
  .search-select:last-of-type {
    padding-left: 13px;
    border-left: 1px solid #ded4c3;
  }
  .search-select label {
    font-size: 9px;
    letter-spacing: 0.7px;
    line-height: 1.6;
  }
  .search-select select {
    font-size: 16px;
    min-height: 33px;
  }
  .section-heading {
    flex-wrap: wrap;
    gap: 6px;
    align-items: start;
    margin-bottom: 23px;
  }
  .section-heading h2 {
    font-size: 29px;
    line-height: 1.18;
    max-width: 330px;
  }
  .section-heading p {
    font-size: 12px;
    max-width: none;
  }
  .section-heading .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
  }
  .section-heading .text-link {
    font-size: 12px;
    min-height: 38px;
    align-self: auto;
    margin-left: auto;
  }
  .concert-grid {
    gap: 35px;
  }
  .concert-image {
    aspect-ratio: 1.55;
  }
  .concert-meta {
    margin-top: 18px;
    margin-bottom: 9px;
    font-size: 11px;
    gap: 10px;
  }
  .concert-meta strong {
    font-size: 18px;
  }
  .concert-category {
    font-size: 10px;
  }
  .concert-venue {
    font-size: 12px;
    line-height: 1.7;
  }
  .concert-card h3 {
    max-width: 100%;
  }
  .concert-performers {
    font-size: 13px;
    min-height: 0;
    line-height: 1.7;
    margin-bottom: 18px;
  }
  .concert-bottom {
    padding-top: 9px;
    min-height: 55px;
  }
  .concert-bottom > button {
    font-size: 12px;
    min-height: 44px;
  }
  .availability {
    font-size: 9px;
    padding: 4px 6px;
  }
  .program-art {
    padding: 21px 25px;
  }
  .program-art-names {
    font-size: 31px;
  }
  .program-art > .eyebrow {
    font-size: 9px;
  }
  .program-art > small {
    font-size: 9px;
  }
  .venue-caption .eyebrow {
    font-size: 9px;
  }
  .listing-intro {
    min-height: 216px;
    background-size: auto 155%;
    background-position: 73% 52%;
  }
  .listing-intro:before {
    background: linear-gradient(90deg, #211d18f2, #211d18d9 55%, #211d189c);
  }
  .listing-intro > .wrap {
    padding-top: 29px;
    padding-bottom: 62px;
  }
  .listing-intro .eyebrow {
    font-size: 8px;
    letter-spacing: 1.6px;
  }
  .listing-intro h1 {
    font-size: 34px;
    line-height: 1.13;
    max-width: 290px;
    letter-spacing: -0.4px;
    margin-top: 12px;
    margin-bottom: 11px;
  }
  .listing-intro p {
    font-size: 12px;
    line-height: 1.8;
    max-width: 285px;
  }
  .listing-body {
    margin-top: -31px;
    padding-top: 0;
  }
  .result-tools {
    display: block;
    padding-top: 19px;
    padding-bottom: 12px;
  }
  .instrument-options {
    display: flex;
    width: 100%;
    padding: 3px;
    gap: 2px;
  }
  .filter-chip {
    flex: 1;
    min-height: 21px;
    font-size: 12px;
    padding: 1px 10px;
  }
  .sort-control {
    justify-content: flex-end;
    margin-top: 11px;
    gap: 9px;
  }
  .sort-control label {
    font-size: 11px;
  }
  .sort-control select {
    font-size: 16px;
    min-height: 37px;
    width: 105px;
    padding: 4px 6px 4px 2px;
  }
  .result-status {
    min-height: 56px;
    gap: 7px;
  }
  .result-status p {
    font-size: 10px;
    gap: 7px;
    flex-wrap: wrap;
    line-height: 1.5;
  }
  .result-status strong {
    font-size: 12px;
  }
  .reset-link {
    font-size: 10px;
    gap: 3px;
    white-space: nowrap;
  }
  .active-filters:not(:empty) {
    margin-bottom: 18px;
  }
  .active-filter {
    font-size: 11px;
    min-height: 40px;
  }
  .listing-body .concert-grid {
    row-gap: 38px;
  }
  .listing-body .snapshot-note {
    margin-top: 31px;
    padding-top: 20px;
    font-size: 10px;
  }
  .empty-state p {
    font-size: 12px;
  }
  .detail-dialog {
    width: calc(100% - 20px);
    border-radius: 10px;
  }
  .detail-photo {
    height: 210px;
    min-height: 0;
    object-position: 45% 43%;
  }
  .detail-copy {
    padding: 27px 23px 22px;
  }
  .detail-copy h2 {
    font-size: 30px;
    line-height: 1.19;
  }
  .detail-copy .eyebrow {
    font-size: 9px;
  }
  .detail-place {
    font-size: 13px;
  }
  .detail-performers {
    font-size: 13px;
    line-height: 1.8;
  }
  .detail-actions-block {
    margin-left: -23px;
    margin-right: -23px;
    padding: 18px 23px 12px;
  }
  .detail-actions .primary {
    min-height: 49px;
    padding: 10px 12px;
  }
  .detail-actions .secondary {
    padding: 10px 12px;
    font-size: 12px;
  }
  .detail-secondary {
    gap: 8px;
  }
  .detail-secondary button {
    font-size: 11px;
  }
  .detail-note {
    font-size: 10px;
  }
  .program li {
    gap: 12px;
  }
  .mobile-nav {
    border-top-color: #d2c5af;
    box-shadow: 0 -4px 18px #32200b09;
    background: #fffcf6f5;
  }
  .mobile-nav > a,
  .mobile-nav > button {
    font-size: 10px;
    gap: 2px;
  }
  .mobile-nav [aria-current="page"]:after {
    width: 29px;
    top: -4px;
    height: 2px;
  }
  .mobile-nav [aria-current="page"] > span[data-icon] {
    background: #eee3d2;
    border-radius: 20px;
    padding: 1px 12px;
    margin-top: -2px;
  }
  .mobile-nav svg {
    height: 21px;
    width: 21px;
  }
  .toast {
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .ticket-long {
    display: none;
  }
  .ticket-short {
    display: inline;
  }
  .detail-dialog .dialog-close {
    display: flex;
    position: sticky;
    top: 14px;
    right: auto;
    margin: 14px 14px -58px auto;
    z-index: 3;
  }
}
@media (max-width: 360px) {
  .hero-content,
  .listing-body,
  .listing-intro > .wrap {
    width: calc(100% - 32px);
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero-description {
    font-size: 12px;
  }
  .listing-intro h1 {
    font-size: 31px;
  }
  .search-main input {
    font-size: 16px;
    letter-spacing: -0.3px;
  }
  .search-select:last-of-type {
    padding-left: 7px;
  }
  .search-select {
    padding-right: 1px;
  }
  .search-select select {
    font-size: 16px;
    letter-spacing: -0.3px;
  }
  .concert-category {
    font-size: 10px;
  }
  .concert-meta time {
    gap: 8px;
  }
  .concert-time {
    padding-left: 8px;
  }
  .concert-venue {
    font-size: 11px;
  }
  .section-heading h2 {
    font-size: 27px;
  }
  .detail-copy {
    padding: 25px 19px 20px;
  }
  .detail-actions-block {
    margin-left: -19px;
    margin-right: -19px;
    padding-left: 19px;
    padding-right: 19px;
  }
  .detail-actions {
    flex-wrap: wrap;
  }
  .detail-actions .primary {
    flex-basis: 100%;
  }
  .detail-secondary {
    flex-direction: column;
    gap: 0;
  }
  .program-art-names {
    font-size: 28px;
  }
  .filter-chip {
    padding-left: 7px;
    padding-right: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header,
  body.inner-page .site-header {
    background: #211d18;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .save-button {
    background: #27221b;
    backdrop-filter: none;
  }
  .venue-caption .venue-arrow {
    background: #2c251c;
    backdrop-filter: none;
  }
  .mobile-nav {
    background: #fffcf6;
    backdrop-filter: none;
  }
}
.result-tools {
  flex-wrap: wrap;
  gap: 12px 24px;
}
#filter-area {
  min-width: 0;
  flex: 1;
}
.instrument-options {
  display: flex;
  flex-wrap: wrap;
}
.filter-chip {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .instrument-options .filter-chip {
    flex: 1 1 calc(25% - 3px);
    min-width: max-content;
    padding: 1px 9px;
    min-height: 22px;
  }
}
/* Ontdek */
.discovery-hero .hero-image {
  object-position: 50% 50%;
}
.discovery-desk {
  position: relative;
  z-index: 3;
}
.d-interaction {
  padding: 22px 28px 16px;
  border: 1px solid #e9dfd0;
  border-radius: 10px;
  background: #fffcf6;
  box-shadow:
    0 12px 30px -18px #3c2d184d,
    inset 0 1px #fff;
  scroll-margin-top: 20px;
}
.d-interaction-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.d-interaction-heading img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d4b988;
  flex: none;
}
.d-interaction-heading h2 {
  font: 500 21px/1.2 var(--serif);
  letter-spacing: -0.3px;
  margin: 0;
}
.d-demo {
  margin-left: auto;
  font-size: 10px;
  color: #807361;
  white-space: nowrap;
}
.d-response {
  padding-left: 52px;
  max-width: 1000px;
}
.d-response h2 {
  font: 500 24px/1.25 var(--serif);
  letter-spacing: -0.35px;
  margin: 0 0 7px;
}
.d-answer-body {
  font-size: 14px;
  line-height: 1.7;
  color: #615d53;
}
.d-question {
  font-size: 12px;
  color: #6f665a;
  margin: 0 0 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.d-question span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-right: 9px;
  color: #8d7756;
}
.d-composer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0 52px;
  padding: 5px 5px 5px 16px;
  background: #f5f0e7;
  border: 1px solid #d8cbb7;
  border-radius: 7px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.d-response:empty + .d-composer {
  margin-top: 0;
}
.d-composer input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
  padding: 7px 0;
  outline: none;
}
.d-composer input::placeholder {
  color: #7c7264;
}
.d-composer:focus-within {
  border-color: #a58554;
  box-shadow: 0 0 0 3px #ac8c521c;
}
.d-composer .primary {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 12px;
  gap: 16px;
  flex: none;
}
#d-directions {
  margin-left: 52px;
}
.d-starters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding-top: 8px;
}
.d-starters button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 0;
  font-size: 11px;
  color: #746044;
  text-align: left;
}
.d-starters button svg {
  width: 12px;
  height: 12px;
  color: #a38450;
}
.d-starters button:hover {
  color: var(--wine);
}
.d-direction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
  min-height: 42px;
}
.d-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.d-criteria button,
.d-scope {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid #ded1bb;
  border-radius: 4px;
  color: #715838;
  background: #eee5d64d;
}
.d-criteria button:hover {
  background: #eee5d6;
}
.d-criteria svg {
  width: 12px;
  height: 12px;
}
.d-reset {
  color: #7d6a51;
  font-size: 11px;
  padding: 5px 0;
  min-height: 36px;
  flex: none;
  text-decoration: underline;
  text-decoration-color: #bda98a;
  text-underline-offset: 4px;
}
.discovery-workspace {
  padding-top: 24px;
}
.d-empty {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border-top: 1px solid #ded0b9;
  border-bottom: 1px solid #ded0b9;
  padding: 34px 0;
  margin: 6px 0 15px;
}
.d-empty-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #d9c6a7;
  border-radius: 50%;
  color: #9b7e50;
  flex: none;
  background: #e9dfce66;
}
.d-empty h3 {
  font-size: 26px;
  margin-bottom: 10px;
}
.d-empty p {
  font-size: 13px;
  color: #85755f;
  line-height: 1.8;
  max-width: 650px;
}
.d-empty .text-link {
  margin-top: 15px;
  font-size: 12px;
}
.d-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 22px;
}
.d-selection-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 8px 0 6px;
}
.d-selection-top h2 {
  margin: 0;
}
.d-country-select {
  max-width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #d9c7a9;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}
.d-country-select:disabled {
  opacity: 0.65;
}
.d-selection-empty {
  color: #85755f;
}
.d-selection h2 {
  font: 500 30px/1.2 var(--serif);
  letter-spacing: -0.4px;
}
.d-selection-heading .text-link {
  font-size: 12px;
}
.d-concert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.d-concert-grid:has(> .concert-card:only-child) {
  grid-template-columns: minmax(0, 820px);
}
.d-concert-grid > .concert-card:only-child {
  display: grid;
  grid-template-columns: 43% minmax(0, 1fr);
  align-items: start;
}
.d-concert-grid > .concert-card:only-child .concert-image {
  height: 260px;
  aspect-ratio: auto;
}
.d-concert-grid > .concert-card:only-child .concert-meta {
  margin-top: 0;
}
.d-venue-results .venue-grid {
  gap: 26px;
}
.d-venue-results .venue-tile {
  height: 260px;
}
.d-venue-discover {
  font-size: 12px;
  margin-top: 8px;
}
@media (max-width: 980px) {
  .d-concert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .d-selection-heading {
    margin: 4px 0 20px;
  }
  .d-selection-heading .text-link {
    font-size: 11px;
  }
  .d-concert-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .d-concert-grid > .concert-card:only-child {
    display: flex;
    gap: 0;
  }
  .d-concert-grid > .concert-card:only-child .concert-image {
    height: auto;
    aspect-ratio: 1.72;
  }
  .d-concert-grid > .concert-card:only-child .concert-meta {
    margin-top: 15px;
  }
  .d-empty {
    gap: 15px;
    padding: 25px 0;
  }
  .d-empty-mark {
    width: 40px;
    height: 40px;
  }
  .d-empty h3 {
    font-size: 23px;
  }
  .d-empty p {
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .discovery-desk,
  .discovery-workspace {
    width: calc(100% - 32px);
  }
  .d-interaction {
    padding: 16px 16px 10px;
    border-radius: 8px;
    scroll-margin-top: 12px;
  }
  .d-interaction-heading {
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  .d-interaction-heading img {
    width: 34px;
    height: 34px;
  }
  .d-interaction-heading h2 {
    flex: 1;
  }
  .d-demo {
    font-size: 9px;
    margin: -13px 0 0 44px;
    flex-basis: 100%;
  }
  .d-response {
    padding-left: 0;
  }
  .d-response h2 {
    font-size: 23px;
    margin-bottom: 8px;
  }
  .d-answer-body {
    font-size: 13px;
    line-height: 1.75;
  }
  .d-question {
    font-size: 11px;
    margin-bottom: 9px;
  }
  .d-question span {
    font-size: 9px;
  }
  .d-composer {
    margin: 16px 0 0;
    padding: 4px 4px 4px 11px;
    gap: 7px;
  }
  .d-composer input {
    font-size: 16px;
  }
  .d-composer .primary {
    padding: 0;
    width: 44px;
    height: 44px;
  }
  .d-composer .primary > span {
    display: none;
  }
  .d-composer .primary svg {
    width: 19px;
    height: 19px;
  }
  #d-directions {
    margin-left: 0;
  }
  .d-starters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding-top: 5px;
  }
  .d-starters button {
    font-size: 10px;
    min-height: 44px;
    justify-content: space-between;
  }
  .d-starters button svg {
    width: 11px;
    height: 11px;
  }
  .d-direction {
    gap: 8px;
    padding-top: 7px;
  }
  .d-criteria {
    gap: 5px;
  }
  .d-criteria button,
  .d-scope {
    min-height: 40px;
    font-size: 10px;
    padding: 4px 7px;
  }
  .d-reset {
    min-height: 40px;
    font-size: 10px;
  }
  .discovery-workspace {
    padding-top: 20px;
  }
}
@media (max-width: 360px) {
  .d-interaction {
    padding: 14px 13px 9px;
  }
  .d-response h2 {
    font-size: 22px;
  }
  .d-starters {
    gap: 0 10px;
  }
  .d-starters button {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .d-composer {
    transition: none;
  }
}
.d-selection-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.d-selection-note {
  font: 400 10px/1.4 var(--sans);
  color: #776d5d;
}
@media (max-width: 640px) {
  .d-selection-label {
    gap: 4px 10px;
  }
  .d-selection-note {
    font-size: 9px;
  }
}
@media (min-width: 981px) {
  .d-interaction {
    position: relative;
    padding-left: 282px;
  }
  .d-interaction-heading img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: none;
    filter: drop-shadow(0 5px 7px #2a1b161c);
    mask-image: linear-gradient(to bottom, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent 100%);
  }
  .d-response {
    padding-left: 0;
  }
  .d-composer {
    margin-left: 0;
  }
  #d-directions {
    margin-left: 0;
  }
}
.d-quiz-invitation {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
  gap: 3px 13px;
  align-items: center;
  width: calc(100% + 56px);
  margin: 14px -28px -16px;
  padding: 15px 28px;
  text-align: left;
  color: #fff5e5;
  border-top: 1px solid #a77a5766;
  border-radius: 0 0 9px 9px;
  background:
    radial-gradient(ellipse at 90% 0, #98586355, transparent 70%),
    linear-gradient(115deg, #4d252a, #6b303d);
  box-shadow: inset 0 1px #fff1d51a;
  isolation: isolate;
  transition: filter 0.18s ease;
}
.d-quiz-invitation:focus-visible {
  outline: 3px solid #caa765;
  outline-offset: 4px;
}
.d-quiz-mark {
  grid-column: 1;
  grid-row: 1/3;
  display: grid;
  place-items: center;
  color: #d7b779;
}
.d-quiz-mark svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.4;
}
.d-quiz-copy {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.d-quiz-kicker {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #e4c9ac;
}
.d-quiz-title {
  display: none;
}
.d-quiz-action {
  display: contents;
}
.d-quiz-action > span {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.d-quiz-action > svg {
  grid-column: 3;
  grid-row: 1/3;
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: #e3c388;
  color: #452a24;
  box-shadow:
    inset 0 1px #fff7dd99,
    0 3px 8px #190c1429;
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .d-quiz-invitation:hover {
    filter: brightness(1.08);
  }
  .d-quiz-invitation:hover .d-quiz-action > svg {
    transform: translateX(3px);
  }
}
@media (min-width: 981px) and (max-width: 1279px) {
  .d-quiz-invitation {
    width: calc(100% + 310px);
    margin-left: -282px;
  }
}
@media (min-width: 1280px) {
  .d-interaction {
    padding-right: 290px;
  }
  .d-quiz-invitation {
    position: absolute;
    right: -1px;
    top: -1px;
    bottom: -1px;
    width: 258px;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) 30px;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 10px;
    padding: 18px 22px;
    border: 1px solid #8a59474a;
    border-radius: 0 10px 10px 0;
  }
  .d-quiz-mark {
    grid-column: 2;
    grid-row: 1;
  }
  .d-quiz-mark svg {
    width: 25px;
    height: 25px;
  }
  .d-quiz-copy {
    display: contents;
  }
  .d-quiz-kicker {
    grid-column: 1;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .d-quiz-title {
    display: block;
    grid-column: 1/3;
    grid-row: 2;
    font: 500 22px/1.16 var(--serif);
    letter-spacing: -0.15px;
  }
  .d-quiz-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    grid-column: 1/3;
    grid-row: 3;
    margin-top: 2px;
    padding: 11px 12px;
    border: 1px solid #e6cc9c;
    border-radius: 5px;
    background: linear-gradient(120deg, #eddbb5, #d9b776);
    color: #442d24;
    box-shadow:
      inset 0 1px #fff8e6b3,
      0 3px 8px #210d1629;
  }
  .d-quiz-action > span {
    font-size: 12px;
    line-height: 1.5;
  }
  .d-quiz-action > svg {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex: none;
  }
  .d-starters {
    gap: 4px 14px;
  }
  .d-starters button {
    font-size: 10px;
  }
}
@media (max-width: 640px) {
  .d-quiz-invitation {
    width: calc(100% + 32px);
    margin: 10px -16px -10px;
    padding: 14px 16px;
    border-radius: 0 0 7px 7px;
    gap: 3px 10px;
  }
  .d-quiz-action > span {
    font-size: 13px;
  }
  .d-quiz-kicker {
    font-size: 10px;
  }
}
@media (max-width: 360px) {
  .d-quiz-invitation {
    width: calc(100% + 26px);
    margin: 10px -13px -9px;
    padding: 13px;
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 3px 9px;
  }
  .d-quiz-mark svg {
    width: 25px;
    height: 25px;
  }
  .d-quiz-action > svg {
    width: 32px;
    height: 32px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .d-quiz-invitation,
  .d-quiz-action > svg {
    transition: none;
  }
  .d-quiz-invitation:hover .d-quiz-action > svg {
    transform: none;
  }
}
/* Contextuele Janine */
:root {
  --header-height: 72px;
  --page-banner-height: 200px;
}
.page-banner {
  height: calc(var(--header-height) + var(--page-banner-height));
  min-height: calc(var(--header-height) + var(--page-banner-height));
}
.page-title-mobile {
  display: none;
}
.page-banner > .wrap {
  height: 100%;
  min-height: 100%;
  padding-top: calc(var(--header-height) + 26px);
  padding-bottom: 40px;
  align-items: flex-start;
}
.page-banner h1 {
  font-size: 44px;
  line-height: 1.15;
  margin: 10px 0;
  max-width: 820px;
}
.page-banner p {
  max-width: 740px;
}
.page-body,
.listing-body {
  margin-top: -24px;
  padding-top: 0;
  position: relative;
}
.page-body > .page-guide {
  margin-bottom: 34px;
}
.listing-body > .page-guide {
  margin-top: 18px;
  margin-bottom: 0;
}
.page-guide {
  border: 1px solid #e4d8c5;
  border-radius: 8px;
  background: #fffcf6;
  box-shadow: 0 7px 22px -16px #45321b55;
}
.page-guide > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 22px;
  list-style: none;
  cursor: pointer;
}
.page-guide > summary::-webkit-details-marker {
  display: none;
}
.page-guide > summary img {
  width: 32px;
  height: 32px;
  border: 1px solid #cbb182;
  border-radius: 50%;
  object-fit: cover;
}
.guide-heading {
  display: flex;
  align-items: baseline;
  gap: 17px;
  flex: 1;
  min-width: 0;
}
.guide-heading strong {
  font: 500 19px/1.3 var(--serif);
  white-space: nowrap;
}
.guide-heading > span {
  font-size: 12px;
  color: #7a6d5c;
}
.guide-indicator {
  color: #9d7a45;
  display: flex;
}
.guide-indicator svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.page-guide[open] .guide-indicator svg {
  transform: rotate(45deg);
}
.guide-content {
  padding: 0 22px 15px 66px;
}
.guide-demo {
  font-size: 9px;
  color: #817563;
  margin-bottom: 11px;
}
.guide-answer {
  font-size: 14px;
  line-height: 1.7;
  color: #5f584d;
  max-width: 900px;
}
.guide-answer:not(:empty) {
  margin-bottom: 16px;
}
.guide-question {
  font-size: 11px;
  color: #8b7557;
  margin-bottom: 6px;
}
.guide-answer p {
  overflow-wrap: anywhere;
}
#page-guide-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 16px;
  background: #f5f0e7;
  border: 1px solid #d8cbb7;
  border-radius: 7px;
}
#page-guide-form:focus-within {
  border-color: #a58554;
  box-shadow: 0 0 0 3px #ac8c521c;
}
#page-guide-input {
  width: 100%;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  padding: 7px 0;
  line-height: 1.5;
  color: var(--ink);
}
#page-guide-form .primary {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
}
.guide-options {
  display: flex;
  align-items: center;
  gap: 6px 22px;
  flex-wrap: wrap;
  padding-top: 7px;
}
.guide-options button {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  min-height: 38px;
  color: #765e3d;
  text-align: left;
}
.guide-options svg {
  width: 12px;
  height: 12px;
}
.guide-options .guide-reset {
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.discovery-hero {
  height: 440px;
}
.discovery-hero .hero-content {
  padding-top: calc(var(--header-height) + 43px);
}
.discovery-hero h1 {
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -1.4px;
  margin: 20px 0 20px;
}
.discovery-hero .eyebrow {
  font-size: 9px;
  color: #ddc69c;
  letter-spacing: 2px;
}
.discovery-hero .hero-description {
  font-size: 14px;
  line-height: 1.7;
  color: #e9e0d2;
}
.discovery-desk {
  margin-top: -36px;
}
@media (max-width: 980px) {
  .page-banner h1 {
    font-size: 39px;
  }
  .guide-heading > span {
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  :root {
    --header-height: 52px;
    --page-banner-height: 164px;
  }
  .page-banner > .wrap {
    padding-top: calc(var(--header-height) + 18px);
    padding-bottom: 32px;
    display: block;
  }
  .page-title-desktop {
    display: none;
  }
  .page-title-mobile {
    display: inline;
  }
  .page-banner h1 {
    white-space: nowrap;
    font-size: 28px;
    max-width: 100%;
    line-height: 1.15;
    margin: 7px 0 8px;
  }
  .page-banner p {
    font-size: 12px;
    line-height: 1.6;
    max-width: 100%;
  }
  .page-body,
  .listing-body {
    margin-top: -24px;
  }
  .page-body > .page-guide {
    margin-bottom: 26px;
  }
  .page-guide > summary {
    padding: 10px 14px;
    gap: 10px;
    min-height: 62px;
  }
  .guide-heading {
    display: block;
  }
  .guide-heading strong {
    font-size: 17px;
  }
  .guide-heading > span {
    display: block;
    font-size: 10px;
    margin-top: 3px;
  }
  .guide-content {
    padding: 0 15px 12px;
  }
  .guide-demo {
    font-size: 9px;
  }
  .guide-answer {
    font-size: 13px;
  }
  .guide-options {
    gap: 0 16px;
  }
  .guide-options button {
    font-size: 10px;
    min-height: 44px;
  }
  .guide-options .guide-reset {
    margin-left: 0;
  }
  .listing-body > .page-guide {
    margin-top: 14px;
  }
  .discovery-hero .hero-content {
    padding-top: calc(var(--header-height) + 22px);
  }
  .discovery-hero h1 {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.65px;
    margin: 10px 0 12px;
  }
  .discovery-hero .eyebrow {
    font-size: 8px;
    letter-spacing: 1.5px;
  }
  .discovery-hero .hero-description {
    font-size: 12px;
    line-height: 1.55;
    max-width: 100%;
  }
  .discovery-desk {
    margin-top: -28px;
  }
}
@media (max-width: 360px) {
  .page-banner h1 {
    font-size: 27px;
  }
  .discovery-hero h1 {
    font-size: 30px;
  }
  .guide-options {
    gap: 0 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-indicator svg {
    transition: none;
  }
}
/* Concert- en solistenkaarten */
.concert-grid,
.d-concert-grid {
  gap: 24px;
  align-items: stretch;
}
.page-content .concert-grid,
.listing-body .concert-grid {
  row-gap: 24px;
}
.concert-card,
.artist-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fffcf6;
  border: 1px solid #ded4c5;
  border-radius: 11px;
  box-shadow:
    0 5px 15px -9px #38271836,
    inset 0 1px #fff;
  overflow: hidden;
  isolation: isolate;
}
.concert-card > .concert-image {
  aspect-ratio: 1.75;
  height: auto;
  flex: none;
  min-width: 0;
  border-radius: 0;
  box-shadow: none;
  background: #2b3028;
}
.concert-card > .concert-image:after {
  display: none;
}
.concert-card .photo-open {
  overflow: hidden;
}
.concert-card .concert-labels {
  position: absolute;
  left: 13px;
  top: 13px;
  right: 65px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;
}
.concert-card .concert-category,
.concert-card .availability {
  font: 500 10px/1.4 var(--sans);
  color: #fff7e8;
  letter-spacing: 0.2px;
  background: #241b15cc;
  border: 1px solid #ffefd233;
  border-radius: 4px;
  padding: 5px 8px;
  text-align: left;
  backdrop-filter: blur(8px);
}
.concert-card .availability {
  background: #6a303aeb;
  border-color: #e3bfac44;
}
.concert-card .save-button {
  top: 11px;
  right: 11px;
}
.concert-card .concert-meta {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 9px 16px;
  min-height: 48px;
  background: #1e1814d9;
  border-top: 1px solid #f8e7c029;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.concert-card .concert-meta time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  color: #fff7e8;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.concert-card .concert-meta strong {
  font-size: 21px;
  font-weight: 500;
  margin: 0 3px;
}
.concert-card .concert-time {
  border: 0;
  padding: 0;
  font-size: 12px;
  color: #f2e9d9;
  letter-spacing: 0.4px;
}
.concert-card > .concert-copy {
  padding: 16px 18px 15px;
  min-width: 0;
  flex: 1;
}
.concert-card .concert-venue {
  font-size: 11px;
  line-height: 1.55;
  color: #79684f;
  gap: 5px;
}
.concert-card .concert-venue svg {
  width: 13px;
  height: 13px;
  margin-top: 2px;
}
.concert-card h3 {
  font-size: 23px;
  line-height: 1.23;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 6px 0 8px;
  max-width: none;
  min-height: 0;
}
.concert-card h3 button {
  min-height: 0;
}
.concert-card .concert-performers {
  font-size: 12px;
  line-height: 1.6;
  min-height: 0;
  max-width: none;
  margin: 0;
  color: #686258;
}
.concert-card .concert-bottom {
  padding: 14px 0 0;
  margin-top: auto;
  min-height: 0;
  border: 0;
  display: block;
}
.concert-card .concert-bottom:before {
  display: none;
}
.concert-card .concert-bottom > button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  gap: 12px;
  font: 500 12px/1.4 var(--sans);
  color: #65313b;
  background: #f0e8dc;
  border: 1px solid #ded0ba;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff9;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.concert-card .concert-bottom > button svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.concert-card .concert-bottom > button:hover {
  background: #e8dccb;
  border-color: #c7af8d;
  color: #532530;
}
.concert-card .concert-bottom > button:active {
  background: #e0d0bb;
}
.concert-card .concert-bottom > button:focus-visible {
  outline-offset: 3px;
}
.concert-card .program-art {
  padding: 44px 20px 56px;
  justify-content: center;
}
.concert-card .program-art > .eyebrow {
  display: none;
}
.concert-card .program-art-names {
  line-height: 1.1;
  margin: 0 0 5px;
}
.concert-card .program-art > small {
  font-size: 8px;
}
.d-concert-grid > .concert-card:only-child {
  gap: 0;
  align-items: stretch;
}
.d-concert-grid > .concert-card:only-child > .concert-image {
  height: 100%;
  min-height: 255px;
  aspect-ratio: auto;
}
.d-concert-grid > .concert-card:only-child .concert-meta {
  margin: 0;
}
.d-concert-grid > .concert-card:only-child > .concert-copy {
  padding: 22px 24px;
}
@media (max-width: 980px) {
  .concert-card h3 {
    font-size: 23px;
  }
}
@media (max-width: 640px) {
  .concert-grid,
  .d-concert-grid,
  .page-content .concert-grid,
  .listing-body .concert-grid {
    gap: 20px;
  }
  .concert-card > .concert-image,
  .d-concert-grid > .concert-card:only-child > .concert-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.7;
  }
  .concert-card > .concert-copy,
  .d-concert-grid > .concert-card:only-child > .concert-copy {
    padding: 13px 15px 14px;
  }
  .concert-card .concert-meta {
    padding: 8px 15px;
    min-height: 45px;
  }
  .concert-card .concert-meta time {
    font-size: 11px;
  }
  .concert-card .concert-meta strong {
    font-size: 20px;
  }
  .concert-card .concert-time {
    font-size: 12px;
  }
  .concert-card .concert-venue {
    font-size: 11px;
  }
  .concert-card h3 {
    font-size: 23px;
    margin: 6px 0 7px;
    line-height: 1.22;
  }
  .concert-card .concert-performers {
    font-size: 12px;
    line-height: 1.55;
  }
  .concert-card .concert-bottom {
    padding-top: 12px;
  }
  .concert-card .concert-bottom > button {
    min-height: 42px;
  }
  .concert-card .concert-labels {
    top: 11px;
    left: 12px;
  }
  .concert-card .program-art {
    padding-top: 37px;
    padding-bottom: 50px;
  }
  .concert-card .program-art-names {
    font-size: 22px;
  }
}
@media (max-width: 360px) {
  .concert-card h3 {
    font-size: 21px;
  }
  .concert-card .concert-labels {
    gap: 4px;
    right: 62px;
  }
  .concert-card .concert-category,
  .concert-card .availability {
    font-size: 9px;
    padding: 4px 6px;
  }
  .concert-card .program-art-names {
    font-size: 19px;
  }
  .concert-card .program-art {
    padding-left: 15px;
    padding-bottom: 47px;
  }
  .concert-card .program-art > small {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .concert-card .concert-bottom > button {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .concert-card .concert-meta,
  .concert-card .concert-category {
    background: #241e18;
    backdrop-filter: none;
  }
}
.artist-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.artist-card {
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.artist-image {
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  flex: none;
  background: #2b3028;
}
.artist-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.artist-card[data-artist="yuja"] .artist-image > img {
  object-position: center 18%;
}
.artist-instrument {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid #ffefd233;
  background: #241b15cc;
  color: #fff7e8;
  font: 500 10px/1.4 var(--sans);
  letter-spacing: 0.2px;
  backdrop-filter: blur(8px);
}
.artist-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 16px 18px 15px;
}
.artist-card h2 {
  font: 500 23px/1.23 var(--serif);
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.artist-card .artist-availability,
.artist-concert-link {
  font: 400 12px/1.6 var(--sans);
  color: #686258;
  margin: 0;
}
.artist-concert-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  text-align: left;
  color: #79684f;
  text-decoration: underline;
  text-decoration-color: #c7b797;
  text-underline-offset: 4px;
}
.artist-concert-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.artist-concert-link:hover {
  color: #65313b;
}
.artist-actions {
  padding-top: 14px;
  margin-top: auto;
}
.artist-actions > .follow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ded0ba;
  border-radius: 6px;
  background: #f0e8dc;
  box-shadow: inset 0 1px #fff9;
  color: #65313b;
  font: 500 12px/1.4 var(--sans);
  transition:
    background 0.18s,
    border-color 0.18s;
}
.artist-actions > .follow-button:hover {
  background: #e8dccb;
  border-color: #c7af8d;
  color: #532530;
}
.artist-actions > .follow-button[aria-pressed="true"] {
  background: #65313b;
  border-color: #65313b;
  color: #fff8ef;
  box-shadow: inset 0 1px #ffffff26;
}
.artist-actions > .follow-button[aria-pressed="true"]:hover {
  background: #532530;
}
.artist-actions > .follow-button svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.artist-actions > .follow-button:focus-visible {
  outline-offset: 3px;
}
@media (max-width: 980px) {
  .artist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .artist-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .artist-card {
    gap: 0;
    padding: 0;
  }
  .artist-copy {
    padding: 13px 15px 14px;
  }
  .artist-instrument {
    top: 11px;
    left: 12px;
  }
  .artist-actions {
    padding-top: 12px;
  }
  .artist-actions > .follow-button {
    min-height: 44px;
  }
  .artist-concert-link {
    min-height: 44px;
  }
}
@media (max-width: 360px) {
  .artist-card h2 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .artist-actions > .follow-button {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .artist-instrument {
    background: #241e18;
    backdrop-filter: none;
  }
}
/* Agenda, smaak, quiz en beheer */
.more-label {
  font-size: 12px;
  font-weight: 650;
}
.header-actions .menu-button {
  display: flex;
  gap: 6px;
  width: auto;
  padding: 9px;
}
.extension-body {
  padding-bottom: 64px;
}
.extension-body h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 29px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 20px;
}
.extension-body h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.4;
  margin: 30px 0 14px;
}
.extension-body p {
  line-height: 1.75;
}
.muted,
.quiet-empty {
  color: #766a5e;
  font-size: 13px;
}
.quiet-empty {
  padding: 25px 0;
}
.storage-alert {
  border-left: 3px solid #783235;
  background: #f5e6dc;
  padding: 14px 18px;
  line-height: 1.6;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.section-toolbar,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.section-heading h2 {
  margin: 7px 0 0;
}
.field {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  min-width: 0;
}
.field input,
.field select,
.field textarea,
.inline-form > input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #cdbfae;
  border-radius: 4px;
  background: #fffcf5;
  color: #30291f;
  padding: 12px 13px;
  font:
    400 14px/1.5 Inter,
    sans-serif;
  min-height: 46px;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.inline-form > input:focus {
  outline: 2px solid #8b5741;
  outline-offset: 2px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-form {
  border-top: 1px solid #d8ccbb;
  border-bottom: 1px solid #d8ccbb;
  margin-bottom: 25px;
}
.settings-form h3 {
  margin-top: 24px;
}
.inline-form {
  display: flex;
  align-items: end;
}
.inline-form > .field {
  flex: 1;
  margin-bottom: 0;
}
.inline-form > input {
  flex: 1;
  min-width: 0;
}
.inline-form .primary {
  flex-shrink: 0;
}
.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid #d5c6b4;
  font-size: 13px;
  line-height: 1.5;
}
.choice input {
  accent-color: #722d34;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.taste-lead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 35px;
  border-bottom: 1px solid #d3c4b2;
}
.rating-counts {
  display: flex;
}
.rating-counts span {
  font-size: 13px;
}
.rating-counts strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  color: #652a2e;
  margin-top: 7px;
}
.editorial-sections {
  max-width: 1000px;
}
.editorial-sections > section {
  padding: 30px 0;
  border-bottom: 1px solid #d3c4b2;
  margin-bottom: 25px;
}
.editorial-sections > section h2 {
  margin-bottom: 12px;
}
.editorial-sections > section p {
  margin: 0 0 18px;
}
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #e6dccb;
  padding: 4px;
  border-radius: 5px;
  width: fit-content;
}
.segmented button {
  padding: 10px 17px;
  border: 0;
  border-radius: 3px;
  color: #6e5d4b;
  font-size: 12px;
  font-weight: 650;
}
.segmented button[aria-pressed="true"] {
  background: #fffaf1;
  color: #6a292d;
  box-shadow: 0 2px 5px #50352213;
}
.calendar {
  margin-top: 25px;
}
.calendar-heading {
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.calendar-heading h2 {
  text-transform: capitalize;
  font-size: 27px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid #cfc0ad;
  border-left: 1px solid #cfc0ad;
}
.calendar-weekday,
.calendar-day {
  border-right: 1px solid #cfc0ad;
  border-bottom: 1px solid #cfc0ad;
  min-width: 0;
}
.calendar-weekday {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  font-weight: 650;
  color: #775a48;
  background: #ede3d3;
}
.calendar-day {
  min-height: 105px;
  padding: 8px;
  background: #fffbf2;
}
.calendar-day time {
  font-size: 12px;
  font-weight: 600;
  color: #8c7560;
}
.calendar-day.vacant {
  background: #e9e1d4;
}
.quiz-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 30px 0;
}
.quiz-answers button {
  justify-content: flex-start;
  text-align: left;
  line-height: 1.6;
  padding: 18px;
  gap: 15px;
  white-space: normal;
}
.quiz-answers strong {
  font-size: 20px;
  color: #976b3a;
  flex-shrink: 0;
}
.quiz-feedback {
  padding: 25px 0;
  border-top: 1px solid #d4c4b0;
  margin-top: 25px;
}
.quiz-feedback > strong {
  font-size: 18px;
  color: #6d3034;
}
.conversation {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 45px;
  align-items: start;
  max-width: 960px;
}
.conversation > img {
  width: 170px;
  max-height: 300px;
  object-fit: contain;
  object-position: bottom;
}
.conversation h2 {
  margin-top: 7px;
}
.conversation .button-row {
  margin-top: 20px;
}
.login-study {
  margin: 0 auto;
}
.admin-tabs {
  flex-wrap: wrap;
}
.admin-tabs a {
  border-bottom: 3px solid transparent;
}
.admin-tabs a[aria-current] {
  color: #732e35;
  border-color: #732e35;
}
.admin-workspace {
  min-width: 0;
}
.admin-workspace > .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.admin-workspace table {
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}
.admin-workspace th {
  text-align: left;
  color: #6d563e;
  font-weight: 650;
}
.admin-workspace td {
  vertical-align: top;
  border-bottom: 1px solid #dfd2bf;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.admin-workspace td small {
  display: block;
  margin-top: 4px;
}
.admin-workspace td a,
.table-link {
  color: #752e35;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #b8a185;
  text-underline-offset: 3px;
}
.table-link:hover {
  text-decoration-color: currentColor;
}
.admin-workspace .admin-summary {
  flex-wrap: wrap;
  background: none;
}
.admin-summary > div {
  min-width: 90px;
}
.admin-workspace .admin-summary strong {
  font-family: "Playfair Display", Georgia, serif;
  color: #723139;
}
.inline-notice {
  padding: 12px 17px;
  border-left: 3px solid #ad8754;
  background: #ede3d1;
  color: #6b5642;
  font-size: 12px;
}
.compare-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.compare-values > div {
  padding: 18px;
}
.compare-values dt {
  font-size: 11px;
  color: #83694c;
  margin-bottom: 8px;
}
.compare-values dd {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
}
.held-change {
  padding-top: 35px;
  margin-top: 30px;
  border-top: 1px solid #d5c5b0;
}
.held-change h3 {
  margin-top: 12px;
}
.admin-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.admin-columns h3:first-child {
  margin-top: 5px;
}
.fact {
  padding-left: 15px;
  border-left: 2px solid #c4a779;
  color: #6f5b46;
  font-size: 13px;
}
.managed-list {
  list-style: none;
  padding: 0;
}
.managed-list li {
  display: flex;
  align-items: start;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.65;
  border-bottom: 1px solid #d7c8b4;
  padding: 13px 0;
}
.managed-list button {
  flex-shrink: 0;
}
.admin-columns details {
  margin-top: 25px;
  font-size: 13px;
}
.admin-columns summary {
  cursor: pointer;
  font-weight: 600;
}
.admin-columns details ul {
  line-height: 1.7;
}
.plain-details {
  display: grid;
  gap: 14px;
  margin: 25px 0;
}
.plain-details > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  font-size: 13px;
  line-height: 1.6;
}
.plain-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.reset-section {
  border-top: 1px solid #d2bfa6;
  margin-top: 35px;
  padding-top: 8px;
}
.admin-filter-form {
  flex-wrap: wrap;
}
.admin-filter-form > .field {
  flex: 1;
  min-width: 170px;
  margin: 0;
}
.admin-filter-form > .field:first-child {
  flex: 2;
  min-width: 220px;
}
.admin-filter-form > button {
  flex-shrink: 0;
}
.concert-admin-filters > .field:first-child {
  flex-basis: 260px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
}
.row-actions button {
  color: #78353b;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #866c4f;
}
.pagination > div {
  display: flex;
  gap: 8px;
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.batch-section {
  border-top: 1px solid #cdb99e;
  padding-top: 5px;
  margin-top: 40px;
}
.batch-section form {
  max-width: 780px;
  margin-top: 25px;
}
.batch-preview {
  font-size: 13px;
  line-height: 1.8;
  padding-left: 20px;
}
.batch-preview li {
  padding: 8px 0;
}
.batch-preview button {
  margin-left: 12px;
}
.normalization-tabs {
  display: flex;
  flex-wrap: wrap;
}
.normalization-tabs a {
  font-size: 12px;
  border: 1px solid #cdbb9f;
}
.normalization-tabs a[aria-current] {
  color: #fff4e2;
  background: #6d3036;
  border-color: #6d3036;
}
.normalization-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px 0;
}
.normalization-overview a {
  border-top: 2px solid #b59464;
}
.normalization-overview span {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #876e51;
}
.normalization-overview svg {
  width: 15px;
  height: 15px;
}
.back-link {
  display: inline-flex;
}
.normalization-detail h2 {
  font-size: 29px;
  overflow-wrap: anywhere;
}
.linked-list {
  padding-left: 20px;
  line-height: 1.7;
  font-size: 13px;
}
.linked-list li {
  padding: 7px 0;
}
.linked-list a,
.normalization-detail p > a {
  color: #733239;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.related-concerts {
  display: grid;
  gap: 0;
  margin: 20px 0;
}
.related-concerts > button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 15px;
  align-items: center;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  padding: 13px 0;
  border-bottom: 1px solid #dbc8b0;
  color: #71353b;
}
.related-concerts small {
  grid-column: 1;
  color: #897057;
  font-size: 11px;
}
.related-concerts svg {
  width: 17px;
  height: 17px;
  grid-column: 2;
  grid-row: 1;
}
.utility-dialog form {
  margin-top: 25px;
}
.utility-dialog .field {
  font-size: 12px;
}
.utility-dialog .field input,
.utility-dialog .field textarea,
.utility-dialog .field select {
  font-size: 14px;
}
.utility-dialog .choice {
  margin-bottom: 20px;
}
.utility-dialog h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  margin: 25px 0 15px;
}
.utility-dialog .primary {
  margin-top: 8px;
}
.utility-dialog ol {
  font-size: 13px;
  line-height: 1.7;
  padding-left: 20px;
}
.utility-dialog ol li {
  padding: 6px 0;
}
.artist-no-image,
.venue-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 60% 20%, #e2ceb0, #8b755e 85%);
  color: #fbf2dc;
  padding: 25px;
  box-sizing: border-box;
}
.artist-no-image svg {
  width: 65px;
  height: 65px;
  opacity: 0.65;
}
.artist-no-image small,
.venue-no-image small {
  font-family: Inter, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-top: 15px;
}
.venue-no-image {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  padding-bottom: 80px;
}
.menu-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.menu-links a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
}
.menu-links svg {
  width: 16px;
  height: 16px;
}
.concert-copy,
.artist-copy {
  min-width: 0;
}
.concert-copy h3,
.artist-copy h2 {
  overflow-wrap: anywhere;
}
.concert-card .concert-time {
  white-space: nowrap;
}
.concert-category {
  max-width: 85%;
  overflow-wrap: anywhere;
}
.concert-card .program-art-names {
  font-size: 25px;
}
.program-art {
  overflow: hidden;
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.admin-workspace > ul {
  font-size: 13px;
  line-height: 1.8;
  padding-left: 20px;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
.concert-status {
  margin: 10px 0 25px;
}
.concert-status small {
  font-size: 10px;
  margin-left: 5px;
}
@media (max-width: 1000px) {
  .admin-tabs {
    gap: 0 20px;
  }
  .admin-columns {
    gap: 30px;
  }
  .normalization-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  .conversation {
    gap: 30px;
    grid-template-columns: 140px 1fr;
  }
  .conversation > img {
    width: 140px;
  }
  .taste-lead {
    align-items: start;
  }
  .taste-lead > .primary {
    max-width: 280px;
    white-space: normal;
    text-align: left;
    line-height: 1.5;
  }
  .page-banner .page-title-desktop {
    font-size: inherit;
  }
}
@media (max-width: 600px) {
  .extension-body {
    padding-bottom: 35px;
  }
  .extension-body h2 {
    font-size: 26px;
    margin-bottom: 18px;
  }
  .extension-body h3 {
    font-size: 20px;
  }
  .extension-body p {
    font-size: 13px;
    line-height: 1.75;
  }
  .section-toolbar,
  .section-heading {
    align-items: start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .section-heading .button-row {
    width: 100%;
    gap: 8px;
  }
  .section-heading .button-row > button {
    font-size: 11px;
    padding: 10px 12px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .field input,
  .field textarea,
  .field select,
  .inline-form > input {
    font-size: 16px;
    min-height: 47px;
  }
  .inline-form {
    gap: 8px;
  }
  .inline-form > .secondary {
    padding: 12px 10px;
    font-size: 11px;
  }
  .choice-grid {
    gap: 7px;
  }
  .choice {
    font-size: 12px;
    padding: 9px 11px;
  }
  .taste-lead {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 28px;
  }
  .taste-lead > .primary {
    max-width: none;
    font-size: 12px;
  }
  .rating-counts {
    gap: 35px;
  }
  .editorial-sections > section {
    padding: 20px 0;
  }
  .quiz-stage {
    padding: 8px 0;
    min-height: 270px;
  }
  .quiz-answers {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 24px 0;
  }
  .quiz-answers button {
    font-size: 13px;
    padding: 15px;
  }
  .conversation {
    grid-template-columns: 60px 1fr;
    gap: 15px;
  }
  .conversation > img {
    width: 60px;
    max-height: 145px;
  }
  .conversation h2 {
    font-size: 25px;
  }
  .conversation .eyebrow {
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
  .conversation .inline-form {
    margin-left: -75px;
    margin-top: 25px;
  }
  .conversation .button-row {
    margin-left: -75px;
    gap: 10px;
  }
  .conversation .button-row .text-link {
    font-size: 11px;
  }
  .about-janine > div > p {
    margin-left: -75px;
  }
  .about-janine > div > p:first-of-type {
    margin-left: 0;
  }
  .about-janine .button-row .primary {
    font-size: 11px;
  }
  .login-study {
    padding-top: 10px;
  }
  .admin-tabs {
    gap: 0 15px;
    margin-bottom: 25px;
  }
  .admin-tabs a {
    font-size: 11px;
    padding: 12px 0;
  }
  .admin-workspace .admin-summary {
    gap: 24px;
    margin: 22px 0;
  }
  .admin-workspace .admin-summary > div {
    min-width: 65px;
    flex: 1;
  }
  .admin-workspace .admin-summary strong {
    font-size: 27px;
  }
  .admin-workspace .admin-summary span {
    font-size: 10px;
  }
  .admin-workspace th,
  .admin-workspace td {
    padding: 12px;
  }
  .admin-columns {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .admin-columns section + section {
    border-top: 1px solid #d3c1a8;
    padding-top: 25px;
  }
  .compare-values {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .compare-values > div {
    padding: 14px;
  }
  .compare-values dd {
    font-size: 18px;
  }
  .plain-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .plain-details dt {
    font-size: 11px;
  }
  .admin-filter-form {
    gap: 10px;
    align-items: stretch;
  }
  .admin-filter-form > .field,
  .admin-filter-form > .field:first-child {
    min-width: 0;
    flex-basis: 100%;
    flex-grow: 1;
  }
  .admin-filter-form > .secondary {
    align-self: start;
  }
  .concert-admin-filters > .field:nth-child(3),
  .concert-admin-filters > .field:nth-child(4) {
    flex-basis: calc(50% - 5px);
    flex-grow: 0;
  }
  .pagination {
    gap: 10px;
    align-items: start;
    font-size: 10px;
  }
  .pagination > span {
    max-width: 120px;
    line-height: 1.6;
  }
  .pagination .secondary {
    font-size: 10px;
    padding: 8px 10px;
  }
  .normalization-tabs {
    gap: 6px;
    margin-bottom: 25px;
  }
  .normalization-tabs a {
    font-size: 10px;
    padding: 8px 10px;
  }
  .normalization-overview {
    gap: 20px;
  }
  .normalization-overview h3 {
    font-size: 20px;
  }
  .normalization-overview span {
    font-size: 10px;
  }
  .normalization-detail h2 {
    font-size: 26px;
  }
  .menu-links {
    gap: 0 15px;
  }
  .menu-links a {
    font-size: 15px;
    padding: 14px 0;
  }
  .menu-links svg {
    width: 13px;
    height: 13px;
  }
  .more-label {
    display: none;
  }
  .utility-dialog .field input,
  .utility-dialog .field textarea,
  .utility-dialog .field select {
    font-size: 16px;
  }
  .utility-dialog .form-grid {
    grid-template-columns: 1fr;
  }
  .concert-card .program-art-names {
    font-size: 25px;
  }
  .held-change {
    padding-top: 25px;
  }
  .managed-list li {
    font-size: 12px;
  }
  .inline-form > .field {
    flex-basis: 0;
  }
  .concert-status button {
    padding: 9px 11px;
    font-size: 11px;
  }
  .segmented button {
    font-size: 11px;
  }
  .quiz-stage .primary {
    white-space: normal;
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.extension-body {
  margin-top: -24px;
  padding-top: 0;
}
.extension-body:has(> .page-guide) {
  margin-top: -24px;
  padding-top: 0;
}
.admin-workspace table {
  white-space: normal;
}
.utility-dialog .row-actions {
  margin-top: 12px;
}
@media (max-width: 600px) {
  .extension-body {
    padding-top: 0;
  }
  .extension-body:has(> .page-guide) {
    padding-top: 0;
  }
}
.source-criteria {
  margin: 20px 0;
  color: #785e43;
  font-size: 12px;
}
.source-criteria summary {
  cursor: pointer;
  font-weight: 650;
}
.source-criteria p {
  padding: 15px;
  border: 1px solid #d6c3a9;
  background: #f1e8d9;
  overflow-wrap: anywhere;
}
.admin-workspace td small {
  overflow-wrap: anywhere;
}
.normalization-detail table {
  max-width: 100%;
}
.utility-dialog {
  overflow-x: hidden;
}
.utility-dialog h2 {
  overflow-wrap: anywhere;
  max-width: 100%;
  padding-right: 6px;
}
.utility-dialog > .eyebrow {
  display: block;
  padding-right: 24px;
  line-height: 1.7;
}
.related-concerts > button {
  overflow-wrap: anywhere;
  min-width: 0;
}
.utility-dialog .primary,
.utility-dialog .secondary {
  white-space: normal;
  line-height: 1.6;
  max-width: 100%;
}
@media (max-width: 360px) {
  .utility-dialog h2 {
    font-size: 22px;
    line-height: 1.3;
    hyphens: auto;
  }
}
.discovery-hero .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 10%;
  align-items: start;
}
.discovery-welcome-copy {
  min-width: 0;
}
#daily-fact-slot {
  max-width: 350px;
  width: 100%;
  justify-self: end;
  margin-top: 13px;
  min-width: 0;
}
.daily-fact {
  position: relative;
  color: #fff7e7;
  padding: 0 34px 0 0;
  max-width: 100%;
  text-shadow: 0 1px 7px #100b07b3;
}
.daily-fact-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  color: #e5c88e;
}
.daily-fact-heading > svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.daily-fact-heading h2 {
  font: 500 20px/1.35 var(--serif);
  letter-spacing: 0.05px;
  margin: 0;
}
.daily-fact > p {
  font-size: 14px;
  line-height: 1.85;
  font-weight: 450;
  color: #fff7e7;
  overflow-wrap: anywhere;
}
.daily-fact > small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3px;
  color: #ded0b7;
  margin-top: 14px;
}
.daily-fact-close {
  position: absolute;
  right: -5px;
  top: -7px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  color: #e5d0a8;
  border-radius: 50%;
  background: #17130b42;
  transition: background 0.2s;
}
.daily-fact-close svg {
  width: 16px;
  height: 16px;
}
.daily-fact-close:hover {
  background: #17130ba3;
  color: #fff7e7;
}
.daily-fact-close:focus-visible {
  outline: 2px solid #e3bd75;
  outline-offset: 2px;
}
.daily-fact > p.daily-fact-message {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 12px;
  color: #ffdfaa;
}
.daily-fact-error a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #efd69f;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 10px;
}
.daily-fact-error a svg {
  width: 14px;
  height: 14px;
}
.discovery-hero:after {
  background:
    linear-gradient(90deg, #17130be6, #17130b65 50%, #17130b68),
    linear-gradient(0deg, #17130b55, transparent 60%);
}
#main {
  view-transition-name: whm-page;
}
.discovery-hero,
.page-banner {
  view-transition-name: whm-hero;
}
::view-transition-group(whm-page),
::view-transition-group(whm-hero) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1);
}
::view-transition-old(whm-page) {
  animation: whm-page-out 160ms ease-out both;
}
::view-transition-new(whm-page) {
  animation: whm-page-in 300ms ease-out both;
}
@keyframes whm-page-out {
  to {
    opacity: 0;
  }
}
@keyframes whm-page-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.quiz-route-enter {
  animation: whm-page-in 240ms ease-out both;
}
main h1:focus {
  outline: none;
}
@media (min-width: 641px) and (max-width: 980px) {
  .discovery-hero .hero-content {
    column-gap: 6%;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .discovery-hero h1 {
    font-size: 49px;
  }
  .daily-fact-heading h2 {
    font-size: 18px;
  }
  .daily-fact > p {
    font-size: 12px;
    line-height: 1.8;
  }
  .daily-fact {
    padding-right: 25px;
  }
  #daily-fact-slot {
    margin-top: 8px;
  }
  .daily-fact-heading {
    gap: 8px;
    margin-bottom: 12px;
  }
}
@media (max-width: 640px) {
  .discovery-hero {
    height: auto;
    min-height: 0;
  }
  .discovery-hero .hero-content {
    display: block;
    padding-bottom: 48px;
  }
  .discovery-hero .hero-image {
    object-position: 65% 48%;
  }
  .discovery-hero:after {
    background:
      linear-gradient(90deg, #17130bf0, #17130b9c),
      linear-gradient(0deg, #17130b87, transparent 65%);
  }
  #daily-fact-slot {
    max-width: none;
    margin-top: 16px;
    width: 100%;
  }
  #daily-fact-slot:empty {
    margin-top: 0;
  }
  .daily-fact {
    padding: 12px 0 0;
    border-top: 1px solid #d6b77845;
  }
  .daily-fact-heading {
    gap: 7px;
    margin-bottom: 7px;
    padding-right: 40px;
    min-height: 20px;
  }
  .daily-fact-heading h2 {
    font: 500 10px/1.4 var(--sans);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .daily-fact-heading > svg {
    width: 15px;
    height: 15px;
  }
  .daily-fact > p {
    font-size: 13px;
    line-height: 1.55;
  }
  .daily-fact > small {
    display: none;
  }
  .d-direction {
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .quiz-route-enter {
    animation: none;
  }
  .daily-fact-close {
    transition: none;
  }
}
body[data-page="quiz"] .extension-body {
  padding-top: 0;
  min-height: 0;
  padding-bottom: 24px;
}
.quiz-stage {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  min-height: 292px;
  box-sizing: border-box;
  border: 1px solid #e3d6c2;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 75%, #f0e6d346, transparent 38%), #fffcf6;
  box-shadow:
    0 15px 32px -23px #3e2c164d,
    inset 0 1px #fff;
}
.quiz-portrait {
  height: 260px;
  display: block;
  pointer-events: none;
}
.quiz-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 5px 7px #2a1b1617);
  mask-image: linear-gradient(to bottom, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent);
}
.quiz-panel-body {
  min-width: 0;
}
.quiz-local-label {
  font-size: 9px;
  color: #978570;
  white-space: nowrap;
}
.quiz-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 19px;
  border-bottom: 1px solid #e7dac6;
  margin-bottom: 23px;
}
.quiz-step-label {
  font-size: 11px;
  color: #79634b;
  font-weight: 500;
  line-height: 1.5;
}
.quiz-progress {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 145px;
  max-width: 45%;
  flex-shrink: 0;
}
.quiz-progress li {
  height: 4px;
  flex: 1;
  border-radius: 3px;
  background: #e5daca;
}
.quiz-progress li.complete {
  background: #7b3a3e;
}
.quiz-progress li.current {
  background: #b18a50;
  box-shadow:
    0 0 0 1px #fffaf1,
    0 0 0 2px #b18a5066;
}
.quiz-stage p {
  font-size: 13px;
  line-height: 1.8;
  color: #75634f;
}
.quiz-intro-text {
  margin: 0 0 6px;
}
.quiz-instructions {
  margin: 0;
  max-width: 620px;
}
.quiz-primary-action {
  margin-top: 22px;
}
.quiz-primary-action .primary {
  font-size: 12px;
  min-height: 45px;
  padding: 11px 21px;
}
.quiz-stage .quiz-pace-note {
  font-size: 10px;
  color: #9b8972;
  margin: 21px 0 0;
  padding-top: 0;
  line-height: 1.6;
}
.quiz-stage .quiz-answers {
  gap: 10px;
  margin: 23px 0 0;
}
.quiz-stage .quiz-answers button {
  padding: 8px 14px;
  gap: 12px;
  min-height: 48px;
  white-space: normal;
  font-size: 12px;
  align-items: center;
  justify-content: flex-start;
  box-shadow: none;
  background: #f8f2e8;
  border: 1px solid #d8c8ae;
  border-radius: 5px;
  line-height: 1.4;
}
.quiz-stage .quiz-answers button:hover {
  background: #efe4d3;
  border-color: #b28b52;
}
.quiz-stage .quiz-answers button > strong {
  font: 500 19px/1.2 var(--serif);
  color: #9f7b46;
  flex-shrink: 0;
}
.quiz-stage .quiz-answers button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quiz-stage .quiz-feedback {
  border: 0;
  border-left: 2px solid #b08b53;
  margin: 22px 0 0;
  padding: 0 0 0 18px;
}
.quiz-stage .quiz-feedback > strong {
  font-size: 14px;
  line-height: 1.65;
  display: block;
  color: #71343a;
  margin: 0 0 9px;
}
.quiz-running-score {
  display: inline-block;
  color: #9b7a4c;
  font-size: 10px;
  font-weight: 600;
  margin-top: 6px;
}
@media (min-width: 641px) and (max-width: 980px) {
  .quiz-stage {
    padding: 26px 30px 23px;
  }
  .quiz-portrait {
    position: static;
    width: 44px;
    height: 44px;
    float: left;
    margin: 0 13px 0 0;
  }
  .quiz-portrait img {
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #d5bd96;
    mask-image: none;
    -webkit-mask-image: none;
    filter: none;
  }
  .quiz-progress-header {
    clear: both;
  }
}
@media (max-width: 640px) {
  body[data-page="quiz"] .extension-body {
    padding-top: 0;
    padding-bottom: 6px;
  }
  .quiz-stage {
    padding: 20px 19px 19px;
    min-height: 0;
    border-radius: 8px;
  }
  .quiz-portrait {
    float: left;
  }
  .quiz-portrait img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #d5bd96;
    mask-image: none;
    -webkit-mask-image: none;
    filter: none;
  }
  .quiz-progress-header {
    gap: 12px;
    padding-bottom: 16px;
  }
  .quiz-step-label {
    font-size: 10px;
    line-height: 1.6;
  }
  .quiz-stage p {
    font-size: 12px;
    line-height: 1.85;
  }
  .quiz-primary-action {
    margin-top: 20px;
  }
  .quiz-primary-action .primary {
    min-height: 45px;
    padding: 11px 18px;
    font-size: 12px;
  }
  .quiz-stage .quiz-pace-note {
    font-size: 9px;
    margin-top: 18px;
    line-height: 1.7;
  }
  .quiz-stage .quiz-answers {
    grid-template-columns: 1fr;
    margin-top: 20px;
    gap: 9px;
  }
  .quiz-stage .quiz-answers button {
    padding: 4px 10px;
    min-height: 36px;
    gap: 12px;
    line-height: 1.3;
  }
  .quiz-stage .quiz-answers button > strong {
    font-size: 15px;
  }
  .quiz-stage .quiz-feedback {
    padding-left: 13px;
    margin-top: 19px;
  }
  .quiz-stage .quiz-feedback > strong {
    font-size: 13px;
  }
  .quiz-running-score {
    font-size: 10px;
  }
}
@media (max-width: 360px) {
  .quiz-stage {
    padding: 18px 15px 17px;
  }
  .quiz-progress {
    width: 90px;
  }
  .quiz-step-label {
    font-size: 9px;
  }
}
@media (max-width: 640px) {
  .daily-fact-close {
    width: 44px;
    height: 44px;
    min-height: 44px;
    top: 6px;
    right: -4px;
  }
  .daily-fact {
    padding-right: 0;
  }
}
.daily-fact .daily-fact-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05px;
}
@media (max-width: 640px) {
  .daily-fact .daily-fact-text {
    font-size: 15px;
    line-height: 1.45;
    padding-right: 2px;
  }
  .empty-state {
    padding: 22px 8px 30px;
  }
  .empty-state h2 {
    font-size: 24px;
    line-height: 1.25;
    max-width: 300px;
    margin: 0 auto 12px;
  }
  .section-heading h2,
  .extension-body h2 {
    font-size: 24px;
    line-height: 1.25;
  }
  .extension-body h3 {
    font-size: 20px;
  }
  .d-selection h2 {
    font-size: 24px;
  }
  .d-selection-heading {
    margin-bottom: 16px;
  }
  .quiz-progress {
    width: 130px;
    gap: 3px;
    max-width: 48%;
  }
}
html {
  scroll-padding-top: calc(var(--header-height) + 16px);
}
.daily-fact-dialog {
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px 24px 24px;
  border: 1px solid #d9c7a9;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffdf8, #f0e8da);
  color: var(--ink);
  box-shadow: 0 24px 90px #100b0766;
  overflow: auto;
}
.daily-fact-dialog::backdrop {
  background: #17120fc4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.daily-fact-dialog .daily-fact {
  padding: 0;
  border: 0;
  text-shadow: none;
  color: var(--ink);
}
.daily-fact-dialog .daily-fact-heading {
  padding-right: 30px;
  gap: 9px;
  margin-bottom: 22px;
  color: #8b6835;
}
.daily-fact-dialog .daily-fact-heading h2 {
  font: 500 18px/1.3 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.daily-fact-dialog .daily-fact-heading > svg {
  width: 20px;
  height: 20px;
}
.daily-fact-dialog .daily-fact-text {
  font-size: 19px;
  line-height: 1.55;
  color: #3c3228;
  padding: 0;
}
.daily-fact-dialog .daily-fact-close {
  top: -12px;
  right: -12px;
  background: transparent;
  color: #806a4f;
  width: 44px;
  height: 44px;
}
.daily-fact-dialog .daily-fact-close:hover {
  background: #e6dac6;
}
.daily-fact-dialog .daily-fact-continue {
  margin-top: 25px;
  min-height: 46px;
  width: 100%;
  justify-content: space-between;
  font-size: 13px;
}
.daily-fact-dialog .daily-fact-message {
  color: #7b3037;
}
@media (max-width: 640px) {
  #daily-fact-slot {
    display: none;
  }
}
html:has(.daily-fact-dialog[open]) {
  overflow: hidden;
}
.daily-fact-dialog .daily-fact-error > p {
  color: #3c3228;
}
.daily-fact-dialog .daily-fact-error a {
  color: #78343a;
}
#daily-fact-slot .daily-fact {
  padding-right: 0;
}
/* Janine en Gesprek */
.janine-scene,
.quiz-stage {
  position: relative;
  isolation: isolate;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 0 24px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.janine-figure,
.quiz-portrait {
  display: block;
  pointer-events: none;
  z-index: 2;
  float: none;
  height: auto;
  left: auto;
}
.janine-figure img,
.quiz-portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  mask-image: none;
  -webkit-mask-image: none;
  filter: none;
}
.janine-reading,
.quiz-panel-body {
  position: relative;
  min-width: 0;
  background: linear-gradient(120deg, #fffdf8, #faf6ee);
  border: 1px solid #e3d7c2;
  border-radius: 12px;
  box-shadow:
    0 14px 40px -28px #4c371b55,
    inset 0 1px #fff;
}
.janine-reading .eyebrow {
  display: block;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1.7px;
  color: #967341;
}
.janine-reading h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.5px;
  margin: 13px 0 19px;
}
.janine-reading p {
  font-size: 14px;
  line-height: 1.8;
  color: #665b4c;
  margin: 0 0 17px;
  max-width: 680px;
}
.janine-reading .janine-intro {
  font-size: 16px;
  line-height: 1.7;
  color: #493f33;
}
.janine-reading .inline-form {
  position: relative;
  z-index: 3;
  margin: 25px 0 0;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #cfc0aa;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 7px 22px -16px #4c371b66;
}
.janine-reading .inline-form:focus-within {
  outline: 2px solid #b49a6f;
  outline-offset: 3px;
}
.janine-reading .inline-form input {
  background: none;
  border: 0;
  outline: 0;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
}
.janine-reading .inline-form > .primary {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
}
.janine-reading .button-row {
  position: relative;
  z-index: 3;
  margin: 24px 0 0;
  gap: 12px 24px;
}
.janine-reading .button-row .primary {
  font-size: 12px;
  padding: 12px 18px;
  min-height: 46px;
}
.janine-reading .button-row .text-link {
  font-size: 12px;
  min-height: 44px;
}
.janine-reading .janine-study-note {
  font: 400 10px/1.7 var(--sans);
  color: #8c7e6c;
  margin: 22px 0 0;
  max-width: 600px;
}
.about-janine {
  display: block;
  min-height: 535px;
  padding-top: 28px;
}
.about-janine .janine-figure {
  position: absolute;
  left: 50%;
  right: auto;
  top: -38px;
  width: 365px;
  margin: 0;
  transform: translateX(-50%);
  z-index: 1;
}
.about-janine .janine-reading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 400px;
  width: 100%;
  padding: 26px 0 25px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  min-height: 0;
}
.about-janine .janine-about-copy {
  padding-top: 74px;
}
.about-janine .janine-reading p {
  max-width: none;
}
.about-janine .janine-reading h2 {
  font-size: 44px;
  line-height: 1.16;
  margin: 19px 0 23px;
}
/* Leesbaar als de quiztekst: het sans-lettertype, niet cursief. Een beschrijving van
   Janine, geen uitspraak van haar, dus zonder aanhalingstekens. */
.about-janine .janine-intro {
  font: 400 20px/1.6 var(--sans);
  color: #6c4435;
}
.about-janine .janine-study-note {
  max-width: 465px;
}
.quiz-stage {
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 0;
  align-items: start;
}
.quiz-portrait {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.quiz-panel-body {
  grid-column: 1;
  grid-row: 1;
  padding: 34px 75px 30px 38px;
}
.quiz-stage .quiz-pace-note {
  margin-top: 22px;
}
.quiz-progress-header {
  gap: 16px;
}
@media (min-width: 641px) and (max-width: 1100px) {
  .conversation-scene .janine-figure {
    right: 12px;
    top: -10px;
    width: 235px;
  }
  .conversation-scene .janine-reading {
    padding: 28px 27px 24px;
    min-height: 350px;
  }
  .conversation-scene .janine-greeting,
  .conversation-scene .janine-intro {
    max-width: calc(100% - 235px);
  }
  .conversation-scene .janine-study-note {
    max-width: calc(100% - 180px);
  }
  .janine-reading h2 {
    font-size: 28px;
  }
  .janine-reading .janine-intro {
    font-size: 14px;
  }
  .janine-reading p {
    font-size: 13px;
  }
  .about-janine {
    min-height: 0;
    padding: 22px 0 0;
  }
  .about-janine .janine-figure {
    width: 310px;
    left: auto;
    right: -5px;
    top: 22px;
    transform: none;
  }
  .about-janine .janine-reading {
    display: block;
    width: calc(100% - 220px);
    padding: 22px 42px 25px 10px;
    min-height: 490px;
  }
  .about-janine .janine-about-copy {
    padding-top: 0;
  }
  .about-janine .janine-reading h2 {
    font-size: 34px;
  }
  .about-janine .janine-intro {
    font-size: 18px;
  }
  .quiz-stage {
    grid-template-columns: minmax(0, 1fr) 195px;
  }
  .quiz-portrait {
    margin: 35px 0 -10px -45px;
  }
  .quiz-panel-body {
    padding: 27px 46px 25px 27px;
  }
}
@media (max-width: 640px) {
  .janine-scene,
  .quiz-stage {
    display: block;
    padding: 0;
    margin: 0;
    min-height: 0;
  }
  .janine-reading,
  .quiz-panel-body,
  .conversation-scene .janine-reading {
    padding: 22px 19px 23px;
    min-height: 0;
    border-radius: 10px;
  }
  .janine-reading .eyebrow {
    font-size: 8px;
    letter-spacing: 1.15px;
  }
  .janine-reading h2 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.35px;
    margin: 12px 0 17px;
  }
  .janine-reading .janine-intro {
    font-size: 14px;
    line-height: 1.7;
  }
  .janine-reading p {
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 15px;
  }
  .janine-reading .inline-form {
    margin: 20px 0 0;
  }
  .janine-reading .inline-form input {
    padding-left: 8px;
  }
  .janine-reading .button-row {
    margin: 19px 0 0;
    gap: 8px 18px;
  }
  .janine-reading .button-row .text-link {
    font-size: 11px;
  }
  .janine-reading .janine-study-note {
    font-size: 10px;
    margin: 20px 0 0;
  }
  .conversation-scene .janine-figure {
    position: absolute;
    left: -10px;
    right: auto;
    top: -14px;
    width: 146px;
    margin: 0;
  }
  .conversation-scene .janine-greeting {
    padding-left: 120px;
  }
  .conversation-scene .janine-intro,
  .conversation-scene .janine-study-note {
    max-width: none;
  }
  .about-janine .janine-figure {
    position: relative;
    float: right;
    top: auto;
    left: auto;
    right: auto;
    width: 155px;
    margin: -5px -8px 5px 8px;
    transform: none;
  }
  .about-janine .janine-reading {
    display: block;
    width: auto;
    padding: 33px 3px 0;
    min-height: 0;
  }
  .about-janine .janine-about-copy {
    padding-top: 0;
  }
  .about-janine .janine-reading h2 {
    font-size: 28px;
    line-height: 1.18;
    margin: 17px 0 18px;
  }
  .about-janine .janine-reading h2 br {
    display: none;
  }
  .about-janine .janine-intro {
    font-size: 17px;
    line-height: 1.6;
  }
  .about-janine .janine-reading > p,
  .about-janine .janine-reading .button-row {
    margin-left: 0;
  }
  .about-janine .janine-reading .button-row,
  .about-janine .janine-study-note {
    clear: both;
  }
  .quiz-portrait {
    position: absolute;
    left: auto;
    height: auto;
    margin: 0;
  }
  .quiz-local-label {
    font-size: 9px;
    white-space: normal;
  }
  .quiz-progress-header {
    clear: none;
    margin-bottom: 20px;
  }
  .quiz-stage .quiz-answers button {
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .janine-reading,
  .quiz-panel-body,
  .conversation-scene .janine-reading {
    padding: 20px 16px;
  }
  .conversation-scene .janine-figure {
    width: 126px;
    left: -10px;
    top: 0;
  }
  .conversation-scene .janine-greeting {
    padding-left: 103px;
    min-height: 178px;
  }
  .janine-reading h2 {
    font-size: 22px;
  }
  .about-janine .janine-figure {
    width: 132px;
  }
  .about-janine .janine-reading {
    padding: 32px 0 0;
  }
  .about-janine .janine-reading h2 {
    font-size: 25px;
  }
}
.janine-input-stage {
  position: relative;
  isolation: isolate;
}
.janine-edge-actor {
  position: absolute;
  left: auto;
  right: 75px;
  top: 0;
  width: calc(var(--janine-head-size) * 2.7);
  height: 0;
  z-index: 4;
  pointer-events: none;
}
.janine-edge-actor img {
  position: absolute;
  display: block;
  width: calc(var(--janine-head-size) * 2.7);
  height: calc(var(--actor-width) * var(--actor-ratio));
  max-width: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  filter: none;
  mask: none;
  -webkit-mask: none;
  transition: opacity 0.16s ease;
}
.janine-pose-waiting {
  top: calc(
    var(--actor-width) * var(--actor-ratio) * var(--actor-contact) * -1
  );
  opacity: 1;
}
.janine-pose-telling {
  top: calc(
    var(--actor-width) * var(--actor-ratio) * var(--actor-contact) * -1
  );
  opacity: 0;
}
[data-janine-state="telling"] > .janine-edge-actor > .janine-pose-waiting {
  opacity: 0;
}
[data-janine-state="telling"] > .janine-edge-actor > .janine-pose-telling {
  opacity: 1;
}
.conversation-scene .janine-study-note {
  max-width: none;
}
.conversation-scene .janine-reading {
  min-height: 0;
}
.discovery-input-stage .janine-edge-actor {
  right: 52px;
}
.discovery-input-stage .d-composer {
  position: relative;
  z-index: 2;
}
.d-interaction-heading {
  padding-right: 125px;
  min-height: 70px;
}
.d-interaction-heading h2 {
  max-width: 190px;
}
.d-response:not(:empty) {
  padding-right: 135px;
}
.page-guide {
  overflow: visible;
}
.page-guide[open] summary > img {
  display: none;
}
.guide-input-stage .janine-edge-actor {
  right: 65px;
}
.guide-answer:not(:empty) {
  padding-right: 135px;
}
#page-guide-form {
  position: relative;
  z-index: 2;
}
@media (min-width: 981px) {
  .d-interaction-heading {
    padding-right: 0;
    min-height: 40px;
  }
  .d-interaction-heading h2 {
    max-width: none;
  }
  .d-response:not(:empty) {
    padding-right: 0;
  }
  .discovery-input-stage {
    margin-left: -250px;
    width: calc(100% + 250px);
  }
  .discovery-input-stage .janine-edge-actor {
    left: 14px;
    right: auto;
  }
}
.quiz-stage {
  display: block;
  padding: 0;
}
.quiz-portrait {
  position: absolute;
  right: 18px;
  left: auto;
  top: -164px;
  width: 230px;
  margin: 0;
  z-index: 3;
}
.quiz-portrait:after {
  content: "";
  position: absolute;
  left: 23%;
  top: 53.5%;
  width: 50%;
  height: 3px;
  border-radius: 50%;
  background: #59402a33;
  filter: blur(2px);
  z-index: -1;
}
.quiz-panel-body {
  padding-right: 290px;
  min-height: 380px;
}
@media (min-width: 641px) and (max-width: 1100px) {
  .quiz-portrait {
    width: 170px;
    right: 18px;
    top: -121.2px;
  }
  .quiz-panel-body {
    padding-right: 220px;
    min-height: 350px;
  }
}
@media (max-width: 640px) {
  .conversation-scene .janine-greeting {
    padding: 0;
    min-height: 0;
    max-width: none;
  }
  .conversation-scene .janine-intro {
    max-width: none;
  }
  .d-interaction-heading {
    padding-right: 113px;
    min-height: 68px;
    gap: 5px;
    display: block;
  }
  .d-interaction-heading h2 {
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 5px;
    white-space: normal;
  }
  .d-interaction-heading .d-demo {
    margin: 0;
    display: block;
  }
  .d-response:not(:empty) {
    padding-right: 0;
    margin-bottom: 95px;
  }
  .guide-input-stage .janine-edge-actor {
    right: 58px;
  }
  .guide-answer:not(:empty) {
    padding-right: 105px;
  }
  .quiz-portrait {
    width: 112px;
    right: 2px;
    top: -79.9px;
  }
  .quiz-panel-body {
    padding: 22px 19px 23px;
    min-height: 0;
  }
}
@media (max-width: 360px) {
  .discovery-input-stage .janine-edge-actor {
    right: 48px;
  }
  .d-interaction-heading {
    padding-right: 135px;
  }
  .d-interaction-heading h2 {
    font-size: 17px;
  }
  .guide-input-stage .janine-edge-actor {
    right: 53px;
  }
  .guide-answer:not(:empty) {
    padding-right: 92px;
  }
  .quiz-portrait {
    width: 106px;
    top: -75.6px;
    right: -1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .janine-edge-actor img {
    transition: none;
  }
}
body[data-page="gesprek"] {
  --chat-bottom-inset: 0px;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
  background: #211d18 url("assets/zaal-sfeer.png") center 38% / cover fixed;
}
body[data-page="gesprek"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, #211d18eb, #211d1894);
  pointer-events: none;
}
body[data-page="gesprek"] .site-header {
  top: var(--chat-viewport-top, 0px);
}
body[data-page="gesprek"] #main {
  position: fixed;
  top: calc(var(--chat-viewport-top, 0px) + var(--header-height));
  left: 0;
  right: 0;
  height: calc(
    var(--chat-viewport-height, 100dvh) - var(--header-height) -
      var(--chat-bottom-inset)
  );
  padding: 0 0 20px;
  overflow: hidden;
}
.conversation-chat {
  display: block;
  width: calc(100% - 64px);
  max-width: 1040px;
  height: 100%;
  padding: 0;
  margin: 0 auto;
}
.conversation-chat .janine-reading {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.conversation-chat .conversation-toolbar {
  position: relative;
  flex: 0 0 168px;
  min-height: 0;
  padding: 27px 240px 12px 26px;
  color: #fbf6ed;
}
.conversation-toolbar h1 {
  margin: 9px 0 2px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.conversation-toolbar .eyebrow {
  color: #dcc18d;
  font-size: 9px;
  letter-spacing: 1.3px;
}
.conversation-toolbar .text-link {
  font-size: 12px;
  min-height: 44px;
  gap: 9px;
  border: 0;
  color: #e6d4b7;
}
.conversation-toolbar .text-link svg {
  width: 14px;
  height: 14px;
}
.conversation-presence {
  flex: 0 0 25px;
  border: 1px solid #e3d7c2;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #fffdf8;
}
.conversation-presence .janine-edge-actor {
  right: 30px;
}
.conversation-transcript {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d0c1aa #faf6ee;
  padding: 8px 26px 16px;
  scroll-padding-block: 20px;
  background: linear-gradient(120deg, #fffdf8, #faf6ee);
  border-inline: 1px solid #e3d7c2;
}
.conversation-transcript:focus-visible {
  outline: 2px solid #b49a6f;
  outline-offset: -3px;
}
.chat-message {
  max-width: 86%;
  padding: 13px 17px;
  margin: 0 0 15px;
  border-radius: 3px 14px 14px;
  background: #f3ede2;
  border: 1px solid #e7dcc8;
}
.chat-message--user {
  margin-left: auto;
  background: #f9f6ef;
  border-radius: 14px 3px 14px 14px;
  max-width: 75%;
}
.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
  font: 400 10px/1.5 var(--sans);
  color: #8b7d69;
}
.chat-message-meta strong {
  color: #713d45;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.janine-reading .chat-message p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
  max-width: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-welcome {
  padding: 24px 12px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.janine-reading .chat-welcome h2 {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.3;
  margin: 17px 0;
}
.janine-reading .chat-welcome p {
  font-size: 14px;
  margin: 0;
}
.conversation-chat .inline-form {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #e3d7c2;
  border-top-color: #e3d7c288;
  border-radius: 0 0 12px 12px;
  background: #fffdf8;
  box-shadow: 0 -5px 20px -16px #4c371b66;
}
.conversation-chat .inline-form:focus-within {
  outline: 0;
  box-shadow: inset 0 -2px #b49a6f;
}
.conversation-chat .inline-form input {
  min-width: 0;
  padding-left: 6px;
}
@media (max-width: 640px) {
  body[data-page="gesprek"] {
    --chat-bottom-inset: var(--mobile-nav-height);
  }
  body[data-page="gesprek"] #main {
    padding: 0;
  }
  .conversation-chat {
    width: 100%;
    margin: 0;
  }
  .conversation-chat .conversation-toolbar {
    flex-basis: 112px;
    padding: 12px 132px 4px 20px;
  }
  .conversation-toolbar h1 {
    font-size: 27px;
    margin: 7px 0 0;
  }
  .conversation-toolbar .eyebrow {
    font-size: 7px;
    letter-spacing: 0.7px;
    white-space: nowrap;
  }
  .conversation-toolbar .text-link {
    font-size: 11px;
  }
  .conversation-presence {
    flex-basis: 17px;
    border-radius: 10px 10px 0 0;
  }
  .conversation-presence .janine-edge-actor {
    right: 17px;
  }
  .conversation-transcript {
    padding: 8px 15px 12px;
    border-inline: 0;
  }
  .chat-message {
    max-width: 94%;
    padding: 11px 12px;
    margin-bottom: 12px;
  }
  .chat-message--user {
    max-width: 88%;
  }
  .janine-reading .chat-message p {
    font-size: 13px;
    line-height: 1.7;
  }
  .chat-welcome {
    padding: 20px 7px;
  }
  .janine-reading .chat-welcome h2 {
    font-size: 23px;
  }
  .janine-reading .chat-welcome p {
    font-size: 13px;
  }
  .conversation-chat .inline-form {
    padding: 9px 12px;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
  }
  .conversation-chat .inline-form input {
    font-size: 16px;
    padding-right: 8px;
  }
}
@media (max-height: 520px) {
  .conversation-chat .conversation-toolbar {
    flex-basis: 84px;
    padding-top: 6px;
    padding-bottom: 0;
  }
  .conversation-toolbar h1 {
    font-size: 23px;
    margin-top: 3px;
  }
  .conversation-toolbar .text-link {
    min-height: 32px;
  }
  .conversation-presence {
    flex-basis: 13px;
  }
}
/* Actieve quizreacties */
/* Quiz: elke fase heeft een eigen pose en een werkelijk steunvlak. */
.quiz-live {
  max-width: 1120px;
  scroll-margin-top: 84px;
}
.quiz-live .quiz-panel-body {
  padding: 22px 34px 22px;
  min-height: 0;
}
.quiz-live .quiz-progress-header {
  margin: 0;
  border: 0;
  padding-bottom: 8px;
}
.quiz-live .quiz-question-scene {
  padding: 20px 0 28px;
}
.quiz-live .quiz-character-scene {
  --arrival-x: 12px;
  position: relative;
  min-height: 210px;
  padding: 14px calc(var(--actor-width) + 30px) 18px 0;
  display: flex;
  align-items: center;
}
.quiz-live .quiz-character-scene[data-quiz-side="left"] {
  --arrival-x: -12px;
  padding-left: calc(var(--actor-width) + 30px);
  padding-right: 0;
}
.quiz-live .quiz-dialogue {
  min-width: 0;
  width: 100%;
}
.quiz-live .quiz-dialogue h2 {
  font: 500 21px/1.4 var(--serif);
  letter-spacing: -0.35px;
  margin: 0;
  color: var(--ink);
}
.quiz-live .quiz-portrait {
  position: absolute;
  display: block;
  float: none;
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  margin: 0;
  width: var(--actor-width);
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.quiz-live .quiz-character-scene[data-quiz-side="left"] .quiz-portrait {
  left: 0;
  right: auto;
}
.quiz-live .quiz-portrait:after {
  display: none;
}
.quiz-live .quiz-portrait img {
  position: absolute;
  left: 0;
  bottom: calc(
    var(--actor-width) * var(--actor-ratio) * (var(--actor-contact) - 1)
  );
  display: block;
  width: var(--actor-width);
  height: calc(var(--actor-width) * var(--actor-ratio));
  max-height: none;
  max-width: none;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  mask: none;
  -webkit-mask: none;
  filter: none;
  transform-origin: 70% calc(var(--actor-contact) * 100%);
}
.quiz-live .quiz-workspace {
  position: relative;
  border-top: 1px solid #cfb992;
  padding-top: 18px;
  min-height: 60px;
}
.quiz-live .quiz-primary-action {
  margin-top: 20px;
}
.quiz-live .quiz-workspace > .quiz-primary-action:first-child {
  margin-top: 0;
}
.quiz-live .quiz-answers {
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quiz-live .quiz-answers button {
  font-size: 13px;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
.quiz-live .quiz-answers button:hover,
.quiz-live .quiz-answers button:focus-visible {
  background: #f0e5d2;
  border-color: #ac854e;
  transform: translateY(-2px);
}
.quiz-live .quiz-feedback {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.quiz-live .quiz-feedback-scene {
  border-bottom: 1px solid #cfb992;
  margin-bottom: 30px;
  padding-top: 12px;
}
.quiz-live #quiz-response {
  display: block;
  font: 500 18px/1.35 var(--serif);
  color: #69353d;
  margin-bottom: 4px;
  outline: 0;
}
/* Janines woorden: het leesbare lettertype van de app, tussen aanhalingstekens (app.js),
   niet cursief (pakket 4). */
.quiz-live .quiz-reaction {
  color: #7a5734;
  font: 400 15px/1.55 var(--sans);
  margin: 0 0 15px;
  max-width: 620px;
}
.quiz-live .quiz-feedback-scene .quiz-reaction {
  margin-bottom: 0;
}
.quiz-reaction > span {
  display: block;
  font: 600 8px/1.5 var(--sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #8a6140;
  margin-bottom: 5px;
}
.quiz-extra-fact {
  font-size: 12px;
  color: #85643d;
  margin-top: 14px;
}
.quiz-extra-fact summary {
  cursor: pointer;
  width: fit-content;
  min-height: 34px;
  line-height: 2.2;
}
.quiz-live .quiz-extra-fact p {
  margin-top: 5px;
}
.quiz-live .quiz-pace-note {
  margin-top: 19px;
  font-size: 10px;
}
/* Alle beweging van Janine in de quiz alleen zonder "minder beweging": zo kan geen
   specifiekere stemmingsregel een uitschakelregel overstemmen (pakket 4). */
@media (prefers-reduced-motion: no-preference) {
  .quiz-live .quiz-portrait {
    animation: quiz-character-arrive 0.32s ease-out both;
  }
  .quiz-live[data-quiz-mood="correct"] .quiz-portrait img {
    animation: quiz-delight 0.55s ease-out both;
  }
  .quiz-live:is([data-quiz-mood="incorrect"], [data-quiz-mood="overruled"]) .quiz-portrait img {
    animation: quiz-oops 0.45s ease-out both;
  }
}
.quiz-live[data-quiz-step="result"] .quiz-dialogue h2 {
  font-size: 42px;
}
.quiz-result-label {
  display: block;
  margin-bottom: 8px;
  font: 600 12px/1.6 var(--sans);
  letter-spacing: 0.6px;
  color: #783e45;
}
.quiz-live[data-quiz-mood="passed"] .quiz-result-label {
  color: #4e644c;
}
.quiz-pass-rule {
  display: inline-block;
  margin-top: 8px;
  color: #786c5a;
  font: 12px/1.6 var(--sans);
}
@keyframes quiz-character-arrive {
  from {
    opacity: 0.2;
    transform: translateX(var(--arrival-x));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes quiz-delight {
  0%,
  100% {
    transform: rotate(0);
  }
  40% {
    transform: rotate(-4deg);
  }
  70% {
    transform: rotate(1deg);
  }
}
@keyframes quiz-oops {
  0%,
  100% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(3deg);
  }
  70% {
    transform: rotate(-2deg);
  }
}
@media (max-width: 980px) {
  .quiz-live .quiz-character-scene {
    min-height: 185px;
  }
  .quiz-live .quiz-dialogue h2 {
    font-size: 20px;
  }
}
@media (max-width: 640px) {
  .quiz-live {
    scroll-margin-top: 68px;
  }
  .quiz-live .quiz-panel-body {
    padding: 10px 14px 12px;
  }
  .quiz-live .quiz-local-label {
    font-size: 8px;
  }
  .quiz-live .quiz-question-scene {
    padding: 13px 0 22px;
  }
  .quiz-live .quiz-character-scene,
  .quiz-live .quiz-character-scene[data-quiz-side="left"] {
    min-height: 0;
    display: block;
    padding: 4px 0 8px;
  }
  .quiz-live .quiz-dialogue {
    display: flex;
    flex-direction: column;
  }
  .quiz-live .quiz-dialogue h2 {
    order: -2;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 6px;
  }
  .quiz-live .quiz-question-scene:not(.quiz-character-scene) h2 {
    margin-bottom: 0;
  }
  .quiz-live .quiz-reaction {
    margin: 0 calc(var(--actor-width) + 12px) 0 0;
    min-height: 110px;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .quiz-live .quiz-character-scene[data-quiz-side="left"] .quiz-reaction {
    margin-left: calc(var(--actor-width) + 12px);
    margin-right: 0;
  }
  .quiz-live .quiz-portrait {
    right: -3px;
  }
  .quiz-live .quiz-character-scene[data-quiz-side="left"] .quiz-portrait {
    left: -3px;
  }
  .quiz-live .quiz-workspace {
    padding-top: 8px;
  }
  .quiz-live .quiz-answers {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .quiz-live .quiz-answers button {
    min-height: 36px;
    font-size: 12px;
  }
  .quiz-live #quiz-response {
    font-size: 15px;
    margin-bottom: 2px;
  }
  .quiz-live .quiz-feedback-scene {
    padding-top: 0;
    margin-bottom: 25px;
  }
  .quiz-live .quiz-pace-note {
    font-size: 9px;
  }
  .quiz-live[data-quiz-step="result"] .quiz-dialogue h2 {
    font-size: 22px;
    margin-bottom: 4px;
  }
  .quiz-result-label {
    order: -3;
  }
}
@media (max-width: 360px) {
  .quiz-live .quiz-panel-body {
    padding: 18px 14px;
  }
  .quiz-live .quiz-reaction {
    font-size: 13px;
    min-height: 100px;
  }
  .quiz-live .quiz-dialogue h2 {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-live .quiz-answers button {
    transition: none;
  }
  .quiz-live .quiz-answers button:hover,
  .quiz-live .quiz-answers button:focus-visible {
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .quiz-live[data-quiz-mood="choosing"] .quiz-portrait img {
    transition: transform 0.22s ease-out;
  }
  .quiz-live[data-quiz-mood="choosing"]:has(
      .quiz-answers button:is(:hover, :focus-visible)
    )
    .quiz-portrait
    img {
    transform: rotate(-1.5deg);
  }
  .quiz-live[data-quiz-mood="choosing"]:has(
      .quiz-answers button:nth-child(even):is(:hover, :focus-visible)
    )
    .quiz-portrait
    img {
    transform: rotate(1.5deg);
  }
}
/* Leesvlakken, formulieren en mobiel beheer */
.extension-body {
  min-height: 0;
}
.admin-surface,
.taste-surface,
.login-study {
  --workspace-inset: 32px;
  position: relative;
  min-width: 0;
  background: linear-gradient(135deg, #fffdf8, #fcf9f2);
  border: 1px solid #e0d5c4;
  border-radius: 12px;
  box-shadow:
    0 14px 35px -25px #48371e55,
    inset 0 1px #fff;
}
.admin-workspace {
  padding: 30px var(--workspace-inset) var(--workspace-inset);
}
.admin-workspace > :last-child {
  margin-bottom: 0;
}
.admin-workspace > p,
.admin-columns p {
  max-width: 80ch;
}
.admin-workspace p {
  margin-bottom: 16px;
}
.admin-workspace .eyebrow,
.taste-lead .eyebrow {
  color: #806845;
  font-size: 10px;
  letter-spacing: 1.5px;
  line-height: 1.7;
}
.admin-workspace .section-heading {
  align-items: center;
  margin-bottom: 24px;
}
.admin-workspace .section-heading h2 {
  margin: 6px 0 0;
}
.admin-workspace > h2 {
  margin-bottom: 18px;
}
.admin-workspace h3 {
  margin-top: 28px;
}
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 8px 16px 0;
  border-bottom: 1px solid #dfd3c0;
  background: #f2ecdf60;
  border-radius: 12px 12px 0 0;
}
.admin-tabs a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 7px 16px;
  border: 0;
  border-radius: 5px 5px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  color: #76634e;
}
.admin-tabs a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.admin-tabs a[aria-current] {
  color: var(--wine);
  background: #ede2d344;
}
.admin-tabs a[aria-current]::after {
  background: var(--wine);
}
.admin-tabs a:hover {
  color: var(--wine);
  background: #ede2d366;
}
.admin-tabs a:focus-visible {
  outline-offset: -4px;
}
.admin-mobile-navigation {
  display: none;
}
.field {
  gap: 8px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: #5e5141;
}
.field > span {
  letter-spacing: 0.01em;
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #cfc0ab;
  border-radius: 6px;
  padding: 11px 13px;
  background-color: #fffdf8;
  box-shadow: inset 0 1px 2px #4e351408;
  color: #342e24;
  font: 400 14px/1.5 var(--sans);
}
.field input,
.field select {
  height: 48px;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2375624b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input[type="date"],
.field input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.field input::-webkit-date-and-time-value {
  text-align: left;
}
.field textarea {
  min-height: 112px;
  line-height: 1.65;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #a99170;
}
.field :is(input, select, textarea):focus-visible {
  outline: 2px solid #9c7446;
  outline-offset: 2px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8c8172;
  opacity: 1;
}
.admin-surface :is(.primary, .secondary),
.taste-surface .primary,
.login-study :is(.primary, .secondary) {
  min-height: 48px;
  white-space: normal;
  line-height: 1.5;
}
.admin-surface :is(.primary, .secondary) svg {
  flex-shrink: 0;
}
.admin-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 24px 0;
  padding: 20px;
  background: #f1ebdf80;
  border: 1px solid #e2d8c7;
  border-radius: 8px;
}
.admin-filter-form > .field,
.admin-filter-form > .field:first-child {
  min-width: 0;
  margin: 0;
}
.admin-filter-form > button {
  min-height: 48px;
  height: 48px;
}
.admin-filter-form[data-filter-form="normalization"] {
  grid-template-columns: minmax(0, 1fr) auto;
}
.concert-admin-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.concert-admin-filters > .field:first-child {
  grid-column: span 2;
}
.concert-admin-filters > .field:nth-child(2) {
  grid-column: span 2;
}
.concert-admin-filters > button {
  align-self: end;
}
.form-grid {
  gap: 0 20px;
}
.settings-form {
  max-width: 800px;
  padding: 24px 0;
  margin: 24px 0 30px;
  border-color: #e1d5c3;
}
.settings-form h3:first-child {
  margin-top: 0;
}
.settings-form > p {
  margin: 0 0 20px;
}
.inline-form {
  gap: 12px;
}
.admin-columns {
  gap: 36px;
}
.admin-columns > section {
  min-width: 0;
}
.admin-columns > section + section {
  padding-left: 36px;
  border-left: 1px solid #e3d7c5;
}
.admin-columns .fact {
  padding: 0 0 0 16px;
  margin: 0 0 18px;
  line-height: 1.85;
}
.admin-columns .inline-form {
  flex-wrap: wrap;
}
.admin-columns .inline-form > .field {
  flex: 1 1 200px;
}
.admin-columns .inline-form > button {
  min-height: 48px;
}
.managed-list {
  margin: 12px 0 20px;
}
.managed-list li {
  gap: 16px;
}
.managed-list li span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-workspace .inline-notice {
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  background: #f0e7d5;
  line-height: 1.7;
}
.admin-workspace .admin-summary {
  display: flex;
  gap: 0;
  padding: 20px 0;
  margin: 22px 0 28px;
  border-top: 1px solid #e5daca;
  border-bottom: 1px solid #e5daca;
}
.admin-workspace .admin-summary > div {
  flex: 1;
  min-width: 0;
  padding: 0 22px;
  border-left: 1px solid #e5daca;
}
.admin-workspace .admin-summary > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.admin-workspace .admin-summary strong {
  display: block;
  font-size: 28px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.admin-workspace .admin-summary span {
  display: block;
  margin-top: 6px;
  color: #7a6954;
  font-size: 11px;
  line-height: 1.5;
}
.admin-workspace .plain-details {
  margin: 22px 0;
  max-width: 800px;
}
.plain-details > div {
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9dfd1;
}
.plain-details dt {
  color: #78654e;
}
.compare-values {
  margin: 18px 0 22px;
}
.compare-values > div {
  border-radius: 6px;
  background: #f1e9db;
}
.reset-section,
.held-change,
.batch-section {
  margin-top: 32px;
  border-color: #dfd2be;
}
.reset-section p {
  margin: 0 0 18px;
}
.normalization-tabs {
  gap: 8px;
  margin-bottom: 28px;
}
.normalization-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 5px;
  line-height: 1.5;
}
.normalization-tabs a:hover {
  border-color: var(--wine);
}
.normalization-overview {
  gap: 24px;
  padding-bottom: 8px;
}
.normalization-overview a {
  padding-top: 12px;
}
.normalization-overview h3 {
  margin: 0 0 12px;
  font-size: 22px;
}
.normalization-overview span {
  min-height: 35px;
}
.normalization-detail {
  max-width: none;
}
.normalization-detail h2 {
  max-width: 40ch;
}
.back-link {
  min-height: 44px;
  margin-bottom: 20px;
}
.admin-workspace .table-scroll {
  border: 1px solid #e1d7c7;
  border-radius: 8px;
  background: #fffdf7;
}
.admin-workspace table {
  font-size: 13px;
}
.admin-workspace th {
  background: #efe6d7;
  padding: 14px 17px;
  font-size: 10px;
  letter-spacing: 0.8px;
  white-space: normal;
}
.admin-workspace td {
  padding: 17px;
  border-color: #e8dece;
  max-width: 420px;
}
.admin-workspace tbody tr:last-child td {
  border-bottom: 0;
}
.admin-workspace tbody tr:nth-child(even) {
  background: #f8f3e94d;
}
.admin-workspace tbody tr:hover {
  background: #f1e8d978;
}
.cell-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-workspace td small {
  font-size: 11px;
  color: #7d6e5d;
  line-height: 1.65;
}
.table-link,
.admin-workspace td a {
  line-height: 1.7;
  text-decoration-color: #c5af90;
  text-decoration-thickness: 1px;
}
.compact-list-text {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: #796953;
  margin-top: 4px;
}
.cell-list {
  margin-top: 4px;
  font-size: 12px;
  color: #796953;
}
.cell-list summary {
  min-height: 32px;
  padding: 6px 0;
  cursor: pointer;
  line-height: 1.6;
}
.cell-list summary:hover {
  color: var(--wine);
}
.admin-workspace .cell-list p {
  max-width: 65ch;
  margin: 8px 0 5px;
  padding: 10px 12px;
  background: #f3ebdd;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.85;
}
.row-actions {
  gap: 2px 14px;
}
.row-actions button {
  min-height: 32px;
  font-size: 12px;
}
.pagination {
  align-items: center;
  margin: 20px 0 30px;
  font-size: 12px;
}
.pagination .secondary {
  font-size: 12px;
  min-height: 44px;
  padding: 9px 14px;
}
.taste-lead {
  padding: 28px 32px;
  gap: 24px;
  border-bottom-color: #e1d5c3;
}
.rating-counts {
  gap: 0;
  margin-top: 14px;
}
.rating-counts > span {
  min-width: 95px;
  padding: 0 24px;
  border-left: 1px solid #e4d7c4;
  font-size: 12px;
  color: #786850;
}
.rating-counts > span:first-child {
  padding-left: 0;
  border-left: 0;
}
.rating-counts strong {
  margin: 0 0 4px;
  font-size: 30px;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.taste-lead > .primary {
  max-width: none;
  text-align: center;
}
.taste-surface .editorial-sections {
  max-width: none;
  padding: 0 32px;
}
.taste-surface .editorial-sections > section {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 32px;
  padding: 30px 0;
  margin: 0;
  border-color: #e4d9c8;
}
.taste-surface .taste-section-heading h2 {
  font-size: 25px;
  margin: 0 0 10px;
}
.taste-surface .taste-section-heading p {
  font-size: 12px;
  color: #7b6c58;
  line-height: 1.75;
  max-width: 24ch;
  margin: 0;
}
.taste-surface .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.choice {
  min-height: 44px;
  border-radius: 6px;
  background: #fcf9f2;
  transition:
    border-color 0.18s,
    background-color 0.18s;
  cursor: pointer;
}
.choice:hover {
  border-color: #aa8b62;
  background: #f7eedf;
}
.choice:has(input:checked) {
  border-color: #ae8b73;
  background: #eee1d5;
  color: #642e38;
}
.choice:has(input:focus-visible) {
  outline: 2px solid #9c7446;
  outline-offset: 2px;
}
.choice input:focus-visible {
  outline: 0;
}
.choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.taste-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: 26px 0;
}
.taste-save p {
  margin: 0;
  font-size: 12px;
}
.login-study {
  max-width: 540px;
  padding: 32px;
}
.login-study > .eyebrow {
  color: #8a704c;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.login-study h2 {
  margin: 12px 0 16px;
}
.login-study p {
  color: #716450;
  font-size: 14px;
}
.login-study form {
  margin-top: 24px;
}
.login-study .primary {
  width: 100%;
  justify-content: space-between;
}
.utility-dialog {
  border: 1px solid #daccb4;
  border-radius: 12px;
  padding: 36px;
  background: linear-gradient(135deg, #fffdf8, #f8f2e7);
  box-shadow: 0 28px 80px #17100855;
}
.utility-dialog > h2 {
  padding-right: 20px;
  margin-bottom: 20px;
  line-height: 1.3;
}
.utility-dialog > p {
  margin: 0 0 16px;
}
.utility-dialog > .eyebrow {
  color: #88704c;
  font-size: 10px;
  letter-spacing: 1.3px;
}
.utility-dialog .dialog-close {
  top: 12px;
  right: 12px;
}
.utility-dialog .button-row {
  gap: 10px;
  margin-top: 22px;
}
.utility-dialog form > .primary {
  margin-top: 22px;
}
.utility-dialog .plain-details {
  margin-top: 20px;
}
.agenda-empty {
  max-width: 640px;
  margin: 0 auto;
}
.agenda-empty p {
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.agenda-empty .empty-icon svg {
  width: 24px;
  height: 24px;
}
.agenda-row {
  grid-template-columns: 70px 110px minmax(0, 1fr) auto;
}
.calendar-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto 24px;
  text-align: center;
}
.calendar-heading h2 {
  margin: 0;
}
.calendar-grid {
  overflow: hidden;
  border-radius: 7px;
}
.venue-item {
  overflow: hidden;
  border: 1px solid #e0d5c3;
  border-radius: 9px;
  background: #fffcf6;
  box-shadow: 0 8px 18px -14px #34251b44;
}
.venue-item .venue-tile {
  border-radius: 0;
  box-shadow: none;
}
.venue-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px 16px;
  align-items: end;
}
.venue-caption > .eyebrow {
  grid-column: 1 / -1;
  line-height: 1.6;
}
.venue-caption h3 {
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.venue-caption .venue-arrow {
  position: static;
  grid-column: 2;
  grid-row: 2;
}
.venue-item .follow-line {
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 0;
}
.venue-item .follow-line > span {
  line-height: 1.6;
}
.venue-item .follow-button {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .admin-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 16px;
    gap: 2px 4px;
  }
  .admin-tabs a {
    min-height: 46px;
    padding: 10px;
    border-radius: 5px;
  }
  .admin-tabs a::after {
    height: 2px;
    bottom: 0;
    left: 20px;
    right: 20px;
  }
  .admin-columns {
    gap: 24px;
  }
  .admin-columns > section + section {
    padding-left: 24px;
  }
  .taste-surface .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .taste-surface .editorial-sections > section {
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 800px) {
  .admin-surface,
  .taste-surface,
  .login-study {
    --workspace-inset: 24px;
  }
  .admin-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .admin-columns > section + section {
    border-left: 0;
    border-top: 1px solid #e3d7c5;
    padding: 26px 0 0;
  }
  .admin-filter-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .admin-filter-form > .field:first-child {
    grid-column: 1 / -1;
  }
  .concert-admin-filters > .field:nth-child(2) {
    grid-column: 1 / -1;
  }
  .admin-filter-form[data-filter-form="normalization"] > .field:first-child {
    grid-column: auto;
  }
  .taste-lead {
    padding: 24px;
    align-items: center;
  }
  .taste-lead > .primary {
    font-size: 12px;
  }
  .taste-surface .editorial-sections {
    padding: 0 24px;
  }
  .rating-counts > span {
    min-width: 72px;
    padding: 0 16px;
  }
}
@media (max-width: 640px) {
  .admin-surface,
  .taste-surface,
  .login-study {
    --workspace-inset: 18px;
    border-radius: 9px;
  }
  .admin-workspace {
    padding-top: 24px;
  }
  .admin-desktop-tabs {
    display: none;
  }
  .admin-mobile-navigation {
    display: block;
    border-bottom: 1px solid #dfd3c0;
  }
  .admin-mobile-navigation > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 4px 12px;
    padding: 15px 18px;
    min-height: 66px;
    cursor: pointer;
    list-style: none;
  }
  .admin-mobile-navigation > summary::-webkit-details-marker {
    display: none;
  }
  .admin-mobile-navigation > summary > span {
    grid-column: 1;
    color: #8a7455;
    font-size: 10px;
    line-height: 1.5;
  }
  .admin-mobile-navigation > summary > strong {
    grid-column: 1;
    color: #66313a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }
  .admin-mobile-navigation > summary > svg {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 20px;
    height: 20px;
    align-self: center;
    color: #9f7a43;
  }
  .admin-mobile-navigation[open] > summary > svg {
    transform: rotate(45deg);
  }
  .admin-mobile-navigation[open] > summary {
    background: #f1e8d961;
    border-radius: 9px 9px 0 0;
  }
  .admin-mobile-navigation .admin-tabs {
    border: 0;
    border-top: 1px solid #e7dcc9;
    border-radius: 0;
  }

  .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    padding: 10px;
    border-radius: 9px 9px 0 0;
  }
  .admin-tabs a {
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    min-height: 44px;
  }
  .admin-tabs a::after {
    left: 12px;
    right: 12px;
  }
  .admin-workspace h2 {
    font-size: 25px;
    line-height: 1.3;
  }
  .admin-workspace .section-heading {
    gap: 16px;
    margin-bottom: 20px;
  }
  .admin-workspace .section-heading .button-row {
    gap: 8px;
  }
  .admin-workspace .section-heading .button-row > button {
    font-size: 12px;
    min-height: 44px;
    flex: 1;
  }
  .admin-workspace > p,
  .admin-columns p {
    font-size: 13px;
  }
  .field {
    font-size: 12px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .admin-filter-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    margin: 20px 0;
  }
  .admin-filter-form > .field:first-child {
    grid-column: auto;
  }
  .admin-filter-form > .secondary {
    align-self: end;
    justify-self: stretch;
  }
  .concert-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .concert-admin-filters > .field:first-child,
  .concert-admin-filters > .field:nth-child(2),
  .concert-admin-filters > .field:nth-child(5),
  .concert-admin-filters > button {
    grid-column: 1 / -1;
  }
  .concert-admin-filters .field input[type="date"] {
    padding: 10px 6px;
    font-size: 16px;
  }
  .admin-filter-form[data-filter-form="normalization"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .admin-workspace .admin-summary {
    flex-wrap: wrap;
    row-gap: 18px;
  }
  .admin-workspace .admin-summary > div {
    flex: 1 1 40%;
    padding: 0 14px;
  }
  .admin-workspace .admin-summary > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .admin-workspace .admin-summary strong {
    font-size: 25px;
  }
  .admin-workspace .admin-summary span {
    font-size: 11px;
  }
  .admin-workspace .table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .admin-workspace table,
  .admin-workspace tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .admin-workspace thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .admin-workspace tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 14px;
    background: #fffdf7;
    border: 1px solid #e3d7c4;
    border-radius: 7px;
  }
  .admin-workspace tbody tr:nth-child(even) {
    background: #fffdf7;
  }
  .admin-workspace tbody tr:last-child {
    margin-bottom: 0;
  }
  .admin-workspace td {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    max-width: none;
    padding: 9px 0;
    border: 0;
    font-size: 12px;
  }
  .admin-workspace td::before {
    content: attr(data-label);
    color: #877357;
    font: 500 10px/1.65 var(--sans);
    padding-top: 2px;
  }
  .admin-workspace td:first-child {
    display: block;
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e6dac6;
  }
  .admin-workspace td:first-child::before {
    display: none;
  }
  .admin-workspace td:first-child .cell-value > a,
  .admin-workspace td:first-child .table-link {
    display: inline-block;
    font-size: 14px;
    min-height: 32px;
  }
  .admin-workspace td:last-child {
    padding-bottom: 0;
  }
  .row-actions {
    gap: 0 14px;
  }
  .row-actions button {
    min-height: 44px;
  }
  .pagination {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .pagination > span {
    max-width: none;
    font-size: 11px;
  }
  .pagination > div {
    gap: 8px;
  }
  .pagination .secondary {
    font-size: 12px;
    padding: 10px 13px;
  }
  .normalization-tabs {
    gap: 6px;
    margin-bottom: 22px;
  }
  .normalization-tabs a {
    font-size: 11px;
    padding: 9px 11px;
  }
  .normalization-overview {
    gap: 24px 16px;
  }
  .normalization-overview h3 {
    font-size: 20px;
  }
  .normalization-overview span {
    font-size: 11px;
    line-height: 1.7;
  }
  .normalization-overview svg {
    flex-shrink: 0;
  }
  .plain-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .concert-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .concert-status button {
    min-height: 44px;
    padding: 8px 4px;
    font-size: 11px;
    line-height: 1.6;
  }
  .concert-status small {
    display: block;
    margin: 0;
    font-size: 10px;
  }
  .taste-lead {
    padding: 22px 18px;
    gap: 22px;
    align-items: stretch;
  }
  .taste-lead > .primary {
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
  }
  .rating-counts {
    justify-content: space-between;
  }
  .rating-counts > span {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
  }
  .taste-surface .editorial-sections {
    padding: 0 18px;
  }
  .taste-surface .editorial-sections > section {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .taste-surface .taste-section-heading h2 {
    margin: 0 0 6px;
  }
  .taste-surface .taste-section-heading p {
    max-width: none;
    font-size: 12px;
  }
  .taste-surface .choice-grid {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice {
    padding: 9px 10px;
    gap: 8px;
    font-size: 12px;
  }
  .taste-surface section:has(#taste-composers) .choice-grid {
    grid-template-columns: 1fr;
  }
  .taste-save {
    padding: 22px 0;
    gap: 14px;
  }
  .taste-save .primary {
    width: 100%;
    padding: 12px 14px;
    font-size: 12px;
  }
  .taste-save p {
    font-size: 11px;
    line-height: 1.7;
  }
  .login-study {
    padding: 26px 22px;
  }
  .utility-dialog {
    padding: 32px 22px 24px;
    max-height: calc(100dvh - 32px);
  }
  .utility-dialog > .eyebrow {
    padding-right: 20px;
  }
  .utility-dialog > h2 {
    font-size: 25px;
  }
  .utility-dialog .row-actions button {
    min-height: 44px;
  }
  .agenda-empty {
    padding: 22px 4px 26px;
  }
  .agenda-row {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    gap: 12px;
    padding: 18px 0;
  }
  .agenda-row > img,
  .agenda-row > span {
    display: none;
  }
  .agenda-row h3 {
    font-size: 20px;
    margin: 0 0 7px;
  }
  .agenda-row p {
    font-size: 12px;
    line-height: 1.65;
  }
  .date-column strong {
    font-size: 29px;
  }
  .date-column span {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  .venue-item .follow-line {
    padding: 9px 14px;
    gap: 12px;
    font-size: 11px;
  }
  .venue-item .follow-button {
    font-size: 11px;
  }
  .venue-caption {
    column-gap: 12px;
  }
  .venue-caption h3 {
    font-size: 25px;
  }
}
@media (max-width: 360px) {
  .admin-surface {
    --workspace-inset: 14px;
  }
  .admin-filter-form {
    padding: 12px;
  }
  .concert-admin-filters > .field {
    grid-column: 1 / -1;
  }
  .concert-admin-filters .field input[type="date"] {
    font-size: 16px;
    padding: 11px 13px;
  }
  .admin-workspace td {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
  }
  .taste-surface .choice-grid {
    grid-template-columns: 1fr;
  }
  .normalization-overview {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .choice {
    transition: none;
  }
}

/* Transparante appkop; respecteer de veilige rand die iOS werkelijk meldt.
   pwa-shell.js herkent ook iPhones die de display-mode-query niet bevestigen. */
@media (max-width: 640px) {
  :root.app-standalone {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --header-height: calc(52px + var(--app-safe-top));
  }
  /* iOS kiest de statusbalkkleur uit de pagina-achtergrond. Net als bij
     Gesprek is de buitenste achtergrond donker; het papier hoort bij de inhoud. */
  html.app-standalone {
    background: #211d18;
  }
  .app-standalone body:not([data-page="gesprek"]) {
    /* Ook achter de doorschijnende ondernavigatie blijft het bestaande papier. */
    background: url("assets/paper-grain.svg"),
      linear-gradient(to top, var(--paper) var(--mobile-nav-height), #211d18 var(--mobile-nav-height)) #211d18;
  }
  .app-standalone body:not([data-page="gesprek"]) > #main {
    min-height: calc(100dvh - var(--mobile-nav-height));
    background: var(--paper) url("assets/paper-grain.svg");
  }
  .app-standalone .site-header,
  .app-standalone body.inner-page .site-header {
    padding-top: var(--app-safe-top);
  }
  .app-standalone .header-inner {
    height: 52px;
  }
}

/* Op de telefoon blijft na scrollen alleen de menuknop staan.
   Geen eigen vaste paginascroller: de onderbalk volgt weer de browserrand. */
@media (max-width: 640px) {
  .site-header,
  body.inner-page .site-header {
    background: #211b16a6;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header-minimized .site-header,
  .header-minimized body.inner-page .site-header {
    height: 0;
    padding: 0;
    background: none;
    pointer-events: none;
  }
  .header-minimized .header-inner {
    height: 0;
    border: 0;
  }
  .header-minimized .brand {
    visibility: hidden;
  }
  .header-minimized .header-actions {
    position: absolute;
    top: calc(var(--app-safe-top, 0px) + 8px);
    right: 12px;
    margin: 0;
    pointer-events: auto;
  }
  .header-minimized .menu-button {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: #211b16cc;
    color: #fff9f1;
    box-shadow: 0 2px 8px #0002;
  }
}

/* Eén zichtbare hoofdmaat voor alle grote Janine-figuren; compacte menuportretten zijn iconen. */
:root {
  --janine-head-size: 88px;
}
.janine-edge-actor img {
  width: var(--actor-width);
  right: 0;
  left: auto;
}
.guide-answer:empty + .guide-input-stage {
  margin-top: calc(var(--janine-head-size) * 2.15);
}
.guide-answer:not(:empty) {
  min-height: calc(var(--janine-head-size) * 2.15);
  padding-right: calc(var(--janine-head-size) * 3.25);
}
.conversation-chat .conversation-toolbar {
  flex-basis: calc(var(--janine-head-size) * 2.25);
  padding-right: calc(var(--janine-head-size) * 2.9);
}
.conversation-presence .janine-edge-actor {
  right: 20px;
}
.about-janine .janine-figure {
  width: var(--actor-width);
}
.about-janine {
  min-height: 640px;
}
.about-janine .janine-reading {
  gap: 450px;
}
.quiz-live .quiz-character-scene {
  min-height: calc(
    var(--actor-width) * var(--actor-ratio) * var(--actor-contact) + 28px
  );
}
.quiz-live[data-quiz-body="full"] .quiz-workspace {
  padding-right: calc(var(--actor-width) + 30px);
  min-height: calc(
    var(--actor-width) * var(--actor-ratio) * (1 - var(--actor-contact)) + 35px
  );
}
.quiz-live[data-quiz-mood="correct"] #quiz-current-title {
  color: #4e644c;
  font-size: 28px;
}
.quiz-live:is([data-quiz-mood="incorrect"], [data-quiz-mood="overruled"]) #quiz-current-title {
  color: #783e45;
  font-size: 28px;
}
.quiz-live .quiz-feedback[data-answer-result="correct"] #quiz-response {
  color: #4e644c;
}
@media (min-width: 641px) and (max-width: 1100px) {
  .about-janine .janine-figure {
    position: relative;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
  }
  .about-janine .janine-reading {
    width: 100%;
    min-height: 0;
    padding: 25px 10px;
  }
}
@media (max-width: 980px) {
  .d-interaction-heading {
    min-height: calc(var(--janine-head-size) * 2.15);
    padding-right: calc(var(--janine-head-size) * 2.85);
  }
  .discovery-input-stage .janine-edge-actor {
    right: 30px;
  }
  .about-janine .janine-reading {
    gap: 0;
  }
}
@media (max-width: 640px) {
  :root {
    --janine-head-size: 64px;
  }
  .guide-input-stage .janine-edge-actor {
    right: 35px;
  }
  .guide-answer:not(:empty) {
    padding-right: 0;
    min-height: 0;
    margin-bottom: calc(var(--janine-head-size) * 2.15);
  }
  .d-response:not(:empty) {
    margin-bottom: calc(var(--janine-head-size) * 2.15);
  }
  .conversation-chat .conversation-toolbar {
    padding-top: 13px;
  }
  .about-janine {
    min-height: 0;
    padding-top: 0;
  }
  .about-janine .janine-figure {
    position: relative;
    float: none;
    top: auto;
    left: 50%;
    right: auto;
    width: var(--actor-width);
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }
  .about-janine .janine-reading {
    padding-top: 25px;
  }
  .quiz-live .quiz-character-scene {
    min-height: 0;
  }
  .quiz-live .quiz-character-scene .quiz-reaction {
    min-height: calc(
      var(--actor-width) * var(--actor-ratio) * var(--actor-contact) - 15px
    );
  }
  .quiz-live[data-quiz-body="full"] .quiz-character-scene .quiz-dialogue {
    padding-bottom: calc(
      var(--actor-width) * var(--actor-ratio) * var(--actor-contact) + 12px
    );
  }
  .quiz-live[data-quiz-body="full"] .quiz-character-scene .quiz-reaction {
    min-height: 0;
    margin: 0;
  }
  .quiz-live[data-quiz-body="full"] .quiz-portrait {
    right: calc((100% - var(--actor-width)) / 2);
  }
  .quiz-live[data-quiz-body="full"] .quiz-workspace {
    min-height: 0;
    padding-right: 0;
    padding-top: calc(
      var(--actor-width) * var(--actor-ratio) * (1 - var(--actor-contact)) +
        12px
    );
  }
  .quiz-live[data-quiz-body="full"] .quiz-workspace > .quiz-intro-text {
    min-height: 0;
    padding-right: 0;
  }
}

/* De complete liggende figuur steunt op de bovenrand; vingers blijven boven de tekst. */
.discovery-input-stage[data-janine-state="waiting"]:has(
    [data-janine-body="horizontal"]:first-child
  )
  .janine-edge-actor
  img[data-janine-body="horizontal"] {
  left: 0;
  right: auto;
}
@media (max-width: 980px) {
  .discovery-input-stage:has([data-janine-body="horizontal"]) .d-composer {
    padding-top: 35px;
  }
  .discovery-input-stage[data-janine-state="waiting"]:has(
      [data-janine-body="horizontal"]
    )
    .janine-edge-actor {
    left: 0;
    right: auto;
  }
}

@media (min-width: 981px) {
  .d-interaction:has(
      .discovery-input-stage[data-janine-state="waiting"]
        [data-janine-body="horizontal"]
    )
    .d-interaction-heading {
    padding-left: 150px;
  }
  /* De balk is ook 's nachts een gewone invoerregel. Tekst en caret blijven vrij van de
     liggende figuur (dezelfde handmaat als overdag, zie de module-regels): op Ontdek ligt
     ze links (14 px van de rand) en begint de invoer erna, in de paginamodule ligt ze
     rechts (65 px van de rand) en eindigt de invoer ervoor. */
  .discovery-input-stage[data-janine-state="waiting"]:has([data-janine-body="horizontal"])
    .d-composer {
    padding-left: calc(14px + var(--janine-hands-to) + 12px);
  }
  .guide-input-stage[data-janine-state="waiting"]:has([data-janine-body="horizontal"])
    #page-guide-input {
    margin-right: max(
      0px,
      calc(65px + var(--janine-actor) - var(--janine-hands-from) - var(--janine-bar-end) + 12px)
    );
  }
}
@media (max-width: 980px) {
  .d-interaction:has(
      .discovery-input-stage[data-janine-state="waiting"]
        [data-janine-body="horizontal"]
    )
    .d-interaction-heading {
    min-height: 180px;
    padding-right: 0;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .d-interaction:has(
      .discovery-input-stage[data-janine-state="waiting"]
        [data-janine-body="horizontal"]
    )
    .d-interaction-heading {
    min-height: 130px;
  }
}
/* Gegevens van WHM: mislukt laden, het hart, de kaartknoppen en Beoordelingen */
:root {
  --heart-gold: #d6b25e;
  --heart-red: #e0474c;
  /* De cirkellijn om het hart; het open hart en het nee-hart nemen dezelfde kleur. */
  --heart-ring: #fff8e36e;
}
.load-failure {
  padding: calc(var(--header-height) + 56px) 0 72px;
  max-width: 640px;
}
.load-failure h1 {
  font: 500 30px/1.25 var(--serif);
  margin: 0 0 12px;
}
.load-failure p {
  margin: 0 0 22px;
  color: var(--muted);
}
.card-rating {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.heart-button,
.rating-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--heart-ring);
  background: #211a1499;
  box-shadow:
    0 3px 10px #130c071a,
    inset 0 1px #fff8e31a;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
.heart-button:hover,
.rating-option:hover {
  background: #171511c7;
}
.heart-button svg,
.rating-option svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heart-button[data-heart-kind="own-yes"],
.heart-button[data-heart-kind="own-no"],
.rating-option {
  color: var(--heart-gold);
}
.heart-button[data-heart-kind="model-star"],
.heart-button[data-heart-kind="soloist"] {
  color: var(--heart-red);
}
.heart-button svg:not(.heart-open),
.rating-option svg:not(.heart-open) {
  fill: currentColor;
}
/* Open hart en nee-hart (pakket 4): de hartrand grijs als de cirkellijn; de streep van
   het nee-hart houdt de goudkleur van de knop (currentColor). */
.heart-open > path:not(.heart-stripe) {
  stroke: var(--heart-open-stroke, var(--heart-ring));
}
.heart-button svg + .heart-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  font: 700 9px/1 var(--sans);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  pointer-events: none;
}
/* Bezig: aria-disabled in plaats van disabled, zodat de focus op de bediening blijft. */
.heart-button[aria-busy="true"],
.rating-option[aria-busy="true"],
.card-action[aria-busy="true"],
.agenda-row .icon-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.rating-choice {
  display: flex;
  gap: 8px;
}
.card-rating .rating-choice {
  display: none;
}
.card-rating.open .rating-choice {
  display: flex;
}
.rating-option[aria-pressed="true"] {
  background: #fffaf0;
  border: 2px solid var(--heart-gold);
  color: #a9822f;
  /* Op de lichte gedrukte knop is de doorschijnende cirkelkleur onzichtbaar: hetzelfde
     grijs, dekkend. */
  --heart-open-stroke: #a39b8d;
}
.card-rating.open .heart-button {
  border-color: var(--heart-gold);
}
.concert-also-on,
.concert-program-unknown,
.concert-practical-line {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7a6a52;
}
.concert-program-unknown + .concert-practical-line {
  margin-top: 2px;
}
.concert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
}
.card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 11px;
  font: 500 12px/1.3 var(--sans);
  color: #65313b;
  background: #f0e8dc;
  border: 1px solid #ded0ba;
  border-radius: 6px;
  box-shadow: inset 0 1px #fff9;
}
.card-action:hover {
  background: #e8dccb;
  border-color: #c7af8d;
  color: #532530;
}
.card-action svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.card-action[aria-pressed="true"],
.card-action[aria-expanded="true"] {
  background: #65313b;
  border-color: #65313b;
  color: #fff7e8;
}
.concert-program {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ded0ba;
  font-size: 13px;
  line-height: 1.5;
  color: #4f473c;
}
.concert-program-list,
.concert-practical {
  list-style: none;
  margin: 0;
  padding: 0;
}
.concert-program-list li {
  padding: 4px 0;
  overflow-wrap: anywhere;
}
.concert-program-list strong {
  display: block;
  font-weight: 600;
  color: #3f362c;
}
.concert-program-list .program-pause {
  margin: 4px 0;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a7a62;
}
.concert-practical {
  margin-top: 10px;
  font-size: 12px;
  color: #6e6456;
}
.concert-practical li {
  padding: 1px 0;
}
.ratings-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rating-row-copy {
  min-width: 0;
}
.rating-row h2 {
  margin: 0 0 4px;
  font: 500 19px/1.3 var(--serif);
  overflow-wrap: anywhere;
}
.rating-row p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.rating-row .rating-option {
  background: #2a211b;
  border-color: #2a211b;
  flex: none;
}
.rating-row .rating-option[aria-pressed="true"] {
  background: #fffaf0;
  border-color: var(--heart-gold);
}
.rating-row span.rating-option {
  cursor: default;
}
@media (max-width: 640px) {
  .load-failure {
    padding-top: calc(var(--header-height) + 32px);
  }
  .load-failure h1 {
    font-size: 25px;
  }
  .rating-row h2 {
    font-size: 17px;
  }
  .card-action {
    padding: 8px 10px;
  }
}
/* Concerten: zoeken via WHM (deel Concerten, 2026-10-22) */
.search-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 49px;
  padding: 0 6px;
  color: var(--wine);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.search-reset svg {
  width: 17px;
  height: 17px;
}
.search-reset:hover {
  color: #532530;
}
.search-select optgroup {
  font-style: normal;
  font-weight: 600;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.recommended-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ded6c6;
  border-radius: 7px;
  background: #e9e3d8a6;
  min-height: 24px;
  padding: 1px 16px;
  line-height: 1.2;
}
/* Het hart is in beide standen gevuld in zijn eigen randkleur; de knop zelf toont aan/uit. */
.recommended-toggle svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.recommended-toggle[aria-pressed="true"] {
  border-color: var(--wine);
  background: #fffdf8;
  color: var(--wine);
}
.hidden-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 22px;
  padding: 10px 14px;
  border: 1px solid #d7c8b3;
  border-radius: 6px;
  background: #e9dfd159;
  font-size: 13px;
  color: #614936;
  overflow-wrap: anywhere;
}
.hidden-filter .text-link {
  font-size: 12px;
  min-height: 32px;
}
#results[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity 0.2s 0.15s;
}
/* Leesbaar als de quiztekst: het sans-lettertype, niet cursief, minstens 13 px. Het is
   de zoekreden van WHM, geen uitspraak van Janine, dus zonder aanhalingstekens. */
.concert-reason {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6e6456;
  overflow-wrap: anywhere;
}
.concert-also-on a {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-color: #cabda7;
  text-underline-offset: 3px;
}
.concert-also-on a:hover {
  text-decoration-color: currentColor;
}
.program-work-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: -4px 0 -4px 2px;
  border-radius: 50%;
  color: #8a7a62;
  vertical-align: middle;
}
.program-work-search svg {
  width: 14px;
  height: 14px;
}
.program-work-search:hover {
  color: var(--wine);
  background: #f0e8dc;
}
.results-more {
  display: flex;
  justify-content: center;
}
.results-more:not(:empty) {
  margin-top: 40px;
}
@media (max-width: 640px) {
  .search-main {
    padding-right: 94px;
  }
  .search-reset {
    position: absolute;
    top: 8px;
    right: 56px;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .search-reset span {
    display: none;
  }
  .result-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 12px;
  }
  #filter-area,
  .result-tools .filter-row {
    display: contents;
  }
  .instrument-options {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .instrument-options .filter-chip {
    padding: 1px 4px;
  }
  .recommended-toggle {
    justify-self: start;
    min-height: 20px;
  }
  .result-tools .sort-control {
    margin-top: 0;
  }
  .hidden-filter {
    font-size: 12px;
  }
}
.janine-failure {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #a3262f;
}
.conversation-transcript .janine-failure {
  margin: 12px 0 0;
}
.filter-chip-unknown {
  color: #a3262f;
}
.recommended-toggle[aria-pressed="mixed"] {
  border-color: #a3262f;
  color: #a3262f;
}

/* Deel Ontdek en Agenda: begroeting als kop, kaartverkoop en Ticketalert */
:root {
  --sale-alert: #b3262f;
  --sale-alert-dark: #8f1d25;
}
.d-interaction-heading {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.d-greeting-line {
  font-size: 13px;
  line-height: 1.5;
  color: #7a6d5c;
  max-width: 560px;
}
.guide-heading > span[data-janine-line] {
  white-space: normal;
}
.concert-card .sale-started,
.agenda-sale .sale-started {
  font: 600 10px/1.4 var(--sans);
  color: #fff;
  letter-spacing: 0.2px;
  background: var(--sale-alert);
  border: 1px solid var(--sale-alert);
  border-radius: 4px;
  padding: 5px 8px;
}
.card-action.card-action-alert {
  background: var(--sale-alert);
  border-color: var(--sale-alert);
  color: #fff;
  box-shadow: none;
}
.card-action.card-action-alert:hover {
  background: var(--sale-alert-dark);
  border-color: var(--sale-alert-dark);
  color: #fff;
}
.agenda-sale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.agenda-sale .card-action {
  min-height: 34px;
  padding: 6px 10px;
}
.agenda-sale[hidden],
.sale-mark[hidden] {
  display: none;
}
/* Kalender: in het concertvakje een stip; label en Tickets staan op de kaart eronder. */
.sale-mark:not([hidden]) {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--sale-alert);
  vertical-align: middle;
}
.nav-sale-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sale-alert);
  box-shadow: 0 0 0 2px #fffcf6;
  pointer-events: none;
}
.desktop-nav .nav-sale-dot {
  top: calc(50% - 13px);
  right: -9px;
  box-shadow: none;
}
.mobile-nav .nav-sale-dot {
  top: 4px;
  left: calc(50% + 7px);
}
.ticket-alerts ul {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ticket-alert {
  display: flex;
  align-items: stretch;
  border: 1px solid #e3c3bd;
  border-left: 4px solid var(--sale-alert);
  border-radius: 8px;
  background: var(--surface);
}
.ticket-alert > a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
}
.ticket-alert-label {
  font: 600 10px/1.4 var(--sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sale-alert);
  flex: none;
}
.ticket-alert-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}
.ticket-alert-copy strong {
  font: 500 16px/1.3 var(--serif);
  overflow-wrap: anywhere;
}
.ticket-alert-copy > span {
  font-size: 12px;
  color: #7a6d5c;
}
.ticket-alert > a > svg {
  width: 16px;
  height: 16px;
  color: #9d7a45;
}
.ticket-alert > a:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ticket-alert-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  color: var(--sale-alert);
  border-left: 1px solid #eadad3;
}
.ticket-alert-close:hover {
  color: var(--sale-alert-dark);
  background: #b3262f0f;
}
.ticket-alert-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.concert-card:focus {
  outline: 2px solid var(--sale-alert);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .d-greeting-line {
    font-size: 12px;
  }
  .ticket-alert > a {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
  }
  .ticket-alert > a > svg {
    display: none;
  }
  .ticket-alert-copy {
    display: block;
  }
  .ticket-alert-copy > span {
    display: block;
  }
}
/* Zalen en Solisten (contract § Deel Zalen en Solisten, 2026-10-22) */
.hall-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.hall-card,
.soloist-card,
.soloist-result {
  overflow: hidden;
  border: 1px solid #e0d5c3;
  border-radius: 9px;
  background: #fffcf6;
  box-shadow: 0 8px 18px -14px #34251b44;
}
.hall-card,
.soloist-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hall-photo {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: #282218;
}
.hall-photo > img,
.hall-no-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 0.3s,
    opacity 0.3s;
}
.hall-no-image {
  background: radial-gradient(ellipse at 60% 20%, #e2ceb0, #8b755e 85%);
}
.hall-card[data-followed="false"] .hall-photo > img,
.hall-card[data-followed="false"] .hall-no-image {
  filter: grayscale(1);
  opacity: 0.55;
}
.hall-card[data-followed="false"] .hall-copy h2,
.hall-card[data-followed="false"] .hall-description {
  color: #8a857b;
}
.hall-copy,
.soloist-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px 18px;
}
.hall-copy .eyebrow {
  color: #8a6f45;
}
.hall-copy h2,
.soloist-copy h2 {
  margin: 0;
  font: 500 26px/1.2 var(--serif);
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}
.hall-description {
  margin: 0;
  color: #4f4a41;
  font: 400 14px/1.65 var(--sans);
}
.hall-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 4px;
}
.upcoming-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  color: #686258;
  font: 400 13px/1.5 var(--sans);
}
a.upcoming-count {
  color: #79684f;
  text-decoration: underline;
  text-decoration-color: #c7b797;
  text-underline-offset: 4px;
}
a.upcoming-count:hover {
  color: #65313b;
}
.upcoming-count svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.follow-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #ded0ba;
  border-radius: 6px;
  background: #f0e8dc;
  box-shadow: inset 0 1px #fff9;
  color: #65313b;
  font: 500 13px/1.4 var(--sans);
}
.follow-toggle:hover {
  background: #e8dccb;
  border-color: #c7af8d;
}
.follow-toggle[aria-pressed="true"],
.follow-toggle.confirming {
  background: #65313b;
  border-color: #65313b;
  color: #fff8ef;
}
.follow-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.hall-card [aria-busy="true"],
.soloist-search [aria-busy="true"],
.soloist-result [aria-busy="true"],
.soloist-card [aria-busy="true"],
.hall-window input[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}
.hall-windows-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  color: #65313b;
  font: 500 13px/1.4 var(--sans);
}
.hall-windows-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}
.hall-windows-toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}
.hall-windows {
  display: grid;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid #eadfcd;
}
.hall-windows[hidden] {
  display: none;
}
.hall-windows fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.hall-windows legend {
  margin-bottom: 2px;
  padding: 0;
  color: #8a6f45;
  font: 600 11px/1.6 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hall-window {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: #3a362f;
  font: 400 14px/1.4 var(--sans);
  cursor: pointer;
}
.hall-window input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #65313b;
}
.hall-window-count {
  color: #8a857b;
  font-size: 12px;
}
.soloist-search {
  display: flex;
  gap: 10px;
  margin: 0 0 24px;
}
.soloist-search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #d9d0c1;
  border-radius: 6px;
  background: #fffdf9;
  color: var(--ink);
  font: 400 15px/1.4 var(--sans);
}
.soloist-search .primary {
  flex: none;
}
#soloist-result:empty {
  display: none;
}
#soloist-result {
  margin-bottom: 26px;
}
.soloist-result {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 16px 18px;
}
.soloist-result p {
  margin: 0;
  color: #4f4a41;
  font: 400 14px/1.6 var(--sans);
}
.soloist-result-name strong {
  color: var(--ink);
  font: 500 21px/1.3 var(--serif);
}
.soloist-result .primary,
.soloist-result .secondary {
  max-width: 100%;
  text-align: center;
}
.soloist-candidates {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.soloist-candidates li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 16px 0;
  border-top: 1px solid #e4d9c8;
}
.soloist-candidates li:first-child { border-top: 0; }
.soloist-already-followed,
.soloist-not-followable {
  color: #786850;
  font: 400 13px/1.5 var(--sans);
}
.soloist-example {
  display: block;
  color: #65313b;
  overflow-wrap: anywhere;
}
.soloist-failure {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid #783235;
  background: #f5e6dc;
  font: 400 14px/1.6 var(--sans);
}
.soloist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.soloist-photo {
  position: relative;
  aspect-ratio: 1.3;
  overflow: hidden;
  flex: none;
  background: #2b3028;
}
.soloist-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.soloist-photo[aria-busy="true"] > img {
  opacity: 0.6;
}
.soloist-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 60% 20%, #e2ceb0, #8b755e 85%);
  color: #fbf2dc;
  font: 400 13px/1.5 var(--sans);
  text-align: center;
}
.soloist-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ffefd233;
  border-radius: 50%;
  background: #241b15b3;
  color: #fff7e8;
  font: 400 28px/1 var(--serif);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s;
}
.soloist-arrow-previous {
  left: 10px;
}
.soloist-arrow-next {
  right: 10px;
}
.soloist-photo:hover .soloist-arrow,
.soloist-arrow:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .soloist-arrow {
    opacity: 1;
  }
}
.soloist-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}
.soloist-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff7e870;
}
.soloist-dot.on {
  background: #fff7e8;
}
.soloist-copy {
  gap: 4px;
  padding: 16px 18px;
}
.soloist-copy h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 23px;
}
.soloist-flag {
  font-size: 18px;
}
.soloist-facts {
  margin: 0;
  color: #686258;
  font: 400 13px/1.5 var(--sans);
}
.soloist-actions {
  margin-top: auto;
  padding-top: 8px;
}
@media (max-width: 980px) {
  .soloist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .hall-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hall-photo {
    height: 200px;
  }
  .hall-copy {
    padding: 15px 16px 14px;
  }
  .hall-copy h2 {
    font-size: 23px;
  }
}
@media (max-width: 640px) {
  .soloist-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .soloist-copy {
    padding: 13px 15px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hall-photo > img,
  .hall-windows-toggle svg,
  .soloist-arrow {
    transition: none;
  }
}
/* De nacht-beginstand van de Janine-module (23–5 uur, nog geen vraag): een
   schemerige kamer met witte tekst. Na de eerste vraag weer het lichte blok. */
.d-interaction[data-janine-night="true"],
.page-guide[data-janine-night="true"] {
  border-color: #3b3330;
  background: linear-gradient(165deg, #2c2631, #1e1a1c 70%);
  box-shadow:
    0 12px 30px -16px #120d0b99,
    inset 0 1px #ffffff12;
  color: #fff;
}
.d-interaction[data-janine-night="true"] .d-interaction-heading h2,
.d-interaction[data-janine-night="true"] .d-greeting-line,
.page-guide[data-janine-night="true"] .guide-heading strong,
.page-guide[data-janine-night="true"] .guide-heading > span {
  color: #fff;
}
.page-guide[data-janine-night="true"] .guide-indicator {
  color: #e7d4b5;
}
.page-guide[data-janine-night="true"] > summary img {
  border-color: #e7d4b580;
}
.d-interaction[data-janine-night="true"] .d-composer,
.page-guide[data-janine-night="true"] #page-guide-form {
  border-color: #ffffff38;
  background: #ffffff12;
}
.d-interaction[data-janine-night="true"] .d-composer:focus-within,
.page-guide[data-janine-night="true"] #page-guide-form:focus-within {
  border-color: #e7d4b5;
  box-shadow: 0 0 0 3px #e7d4b52e;
}
.d-interaction[data-janine-night="true"] .d-composer input,
.page-guide[data-janine-night="true"] #page-guide-input {
  color: #fff;
}
.d-interaction[data-janine-night="true"] .d-composer input::placeholder,
.page-guide[data-janine-night="true"] #page-guide-input::placeholder {
  color: #ffffffbf;
}
/* Opgeslagen, maar de gegevens zijn niet opnieuw geladen: één mislukt-melding met herstelknop. */
.reload-failure {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px;
  border-left: 3px solid #783235;
  border-radius: 6px;
  background: #f5e6dc;
  box-shadow: 0 10px 26px -12px #2c201d80;
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  transform: translateX(-50%);
}
.reload-failure[hidden] {
  display: none;
}
.reload-failure p {
  margin: 0;
}
.reload-failure .secondary[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
@media (max-width: 760px) {
  .reload-failure {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}
/* Losse items (2026-10-22): concertkaart, Uitgelicht, agenda en solistenkaart. */
/* Zonder footer: wat lucht onder de laatste inhoud (de gesprekspagina vult het scherm). */
body:not([data-page="gesprek"]) > main {
  padding-bottom: 56px;
}
@media (max-width: 640px) {
  body:not([data-page="gesprek"]) > main {
    padding-bottom: 32px;
  }
}
/* Concertkaart: de vier knoppen passen op een iPhone (390 px) op één regel; de zaal
   (de naam bevat de stad al) iets groter, de titel iets kleiner. */
.concert-card .concert-actions {
  gap: 4px;
}
.concert-card .card-action {
  gap: 4px;
  min-height: 24px;
  padding: 3px 8px;
  font-size: 11px;
}
.concert-card .card-action svg {
  width: 12px;
  height: 12px;
}
.concert-card .concert-venue {
  font-size: 13px;
}
.concert-card h3 {
  font-size: 20px;
}
.concert-card .concert-program {
  margin-top: 10px;
  padding-bottom: 2px;
}
/* Uitgelicht: kop met drie groepen, elk met een eigen subkop en link. */
.d-featured-group + .d-featured-group {
  margin-top: 34px;
}
.d-featured-group .d-selection-heading {
  margin: 14px 0 18px;
}
.d-featured-group h3 {
  margin: 0;
  font: 500 21px/1.25 var(--serif);
  color: var(--ink);
}
@media (max-width: 640px) {
  .d-featured-group + .d-featured-group {
    margin-top: 28px;
  }
  .d-featured-group h3 {
    font-size: 19px;
  }
}
/* Agenda: een kop per maand in de lijst. */
.agenda-month + .agenda-month {
  margin-top: 30px;
}
.agenda-month > h2 {
  margin: 18px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #cfc0ad;
  font: 500 24px/1.25 var(--serif);
  color: var(--wine);
}
.agenda-month > h2::first-letter {
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .agenda-month > h2 {
    font-size: 23px;
  }
}
/* Desktopkalender: per concert een vakje (tijd, titel afgekapt, zaal), zoals de oude
   agendapagina; de volledige kaart staat eronder. */
.calendar-event {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 5px 7px;
  overflow: hidden;
  text-align: left;
  font: 400 11px/1.35 var(--sans);
  color: var(--ink);
  background: #f3eed9;
  border: 1px solid #e0cfa6;
  border-radius: 6px;
  box-shadow: inset 3px 0 0 #b08a2e;
  cursor: pointer;
}
.calendar-event:hover {
  border-color: #b08a2e;
}
.calendar-event[aria-pressed="true"] {
  background: #65313b;
  border-color: #65313b;
  box-shadow: none;
  color: #fff7e8;
}
.calendar-event > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.calendar-event-time {
  font-weight: 600;
  color: #8c7560;
}
.calendar-event-title {
  font-weight: 600;
  color: #7d1f2e;
}
.calendar-event-venue {
  font-size: 10px;
  color: #7c6f5d;
}
.calendar-event[aria-pressed="true"] > span {
  color: inherit;
}
.calendar-detail:not(:empty) {
  margin-top: 28px;
}
/* Solistenkaart: leeftijd klein achter de naam, "Komende concerten:" met links,
   "Niet meer volgen" klein en onopvallend. */
.soloist-age {
  font: 400 15px/1 var(--sans);
  color: #7c756a;
}
.soloist-upcoming {
  margin-top: 6px;
}
.soloist-upcoming h3 {
  margin: 0 0 4px;
  font: 600 12px/1.5 var(--sans);
  color: #5d5446;
}
.soloist-upcoming-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font: 400 13px/1.5 var(--sans);
}
.soloist-upcoming-links + .soloist-upcoming-links {
  margin-top: 4px;
}
.soloist-upcoming-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: #65313b;
  text-decoration: underline;
  text-decoration-color: #c7b797;
  text-underline-offset: 4px;
}
.soloist-upcoming-links a:hover {
  color: #532530;
}
.soloist-upcoming-count {
  margin-left: 3px;
  color: #7c756a;
}
.soloist-actions {
  padding-top: 12px;
}
.soloist-unfollow {
  min-height: 30px;
  padding: 4px 0;
  color: #8a8174;
  font: 400 12px/1.4 var(--sans);
  text-decoration: underline;
  text-decoration-color: #d6cbb8;
  text-underline-offset: 3px;
}
.soloist-unfollow:hover {
  color: #65313b;
}
.soloist-unfollow.confirming {
  color: #7d1f2e;
  font-weight: 600;
}

/* Deel Janine: antwoord met keuzeknopjes, contextregel, "Vraag Janine" op de kaart en
   de beoordeelronde. */
.janine-answer-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.d-response .janine-answer-text {
  font-size: 14px;
  line-height: 1.7;
  color: #615d53;
}
.janine-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.janine-choice {
  min-height: 34px;
  padding: 6px 12px;
  font: 500 13px/1.3 var(--sans);
  color: #65313b;
  background: #f0e8dc;
  border: 1px solid #ded0ba;
  border-radius: 17px;
  cursor: pointer;
  text-align: left;
}
.janine-choice:hover {
  background: #e8dccb;
  border-color: #c7af8d;
}
.janine-about {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7a6a52;
  overflow-wrap: anywhere;
}
.janine-about strong {
  font-weight: 600;
  color: #4f4335;
}
.d-interaction .janine-about {
  margin-left: 52px;
}
/* Onder de invoer, gelijk met de invoerbalk (≤ 640 px zonder inspringing, ≥ 981 px
   schuift de invoerbalk 250 px naar links onder het beeld door). */
@media (max-width: 640px) {
  .d-interaction .janine-about {
    margin-left: 0;
  }
}
@media (min-width: 981px) {
  .d-interaction .janine-about {
    margin-left: -250px;
  }
}
/* "Vraag Janine": de module komt onder de vaste kop in beeld. */
.d-interaction,
.page-guide {
  scroll-margin-top: calc(var(--header-height) + 12px);
}
.janine-module-form button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.chat-message .janine-choices {
  margin-top: 10px;
}
.concert-card .card-ask {
  padding: 2px 7px;
}
/* Janine zelf op de kaartknop, als beeldje zoals in de gesloten module. */
.concert-card .card-ask img {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #cbb182;
  border-radius: 50%;
  object-fit: cover;
}
.round-slot:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
}
.round-slot .janine-failure {
  margin: 0;
}
.round-entry[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.taste-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.taste-actions .round-slot:not(:empty) {
  margin-top: 0;
}
.taste-actions .round-entry {
  text-align: left;
}
.taste-ratings-link {
  align-self: flex-start;
  min-height: 44px;
  text-decoration: none;
}
.round-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 18px 0;
}
.round-bar [aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.round-bar > p {
  margin: 0 auto 0 0;
  color: var(--muted);
}
.round-rating {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
}
.round-grid {
  margin-top: 8px;
}
/* Met "Vraag Janine" erbij blijven de vijf kaartknoppen op een iPhone (390 px) op één regel. */
@media (max-width: 640px) {
  .concert-card .card-action {
    gap: 3px;
    padding: 3px 6px;
  }
  .concert-card .card-ask {
    padding: 2px 6px;
  }
}
/* De terugweg ("← Mijn smaak") boven aan Beoordelingen en de ronde viel half onder de
   kopbanner (extension-body schuift 24 px omhoog voor de module). */
.extension-body > .back-link:first-child {
  margin-top: 32px;
}
.taste-actions .round-entry {
  flex: 1 1 auto;
}
/* Een beoordeelde rondekaart: beide hartjes op slot; het gekozen hart blijft gevuld. */
.round-rating .rating-option[aria-disabled="true"] {
  cursor: default;
}
.round-rating .rating-option[aria-disabled="true"]:not([aria-pressed="true"]) {
  opacity: 0.45;
}
/* Pakket 1 — kaart (besluiten § 8, 2026-10-22). De titel in de foto, linksonder. Titel
   en datumbalk staan samen onderin (.concert-image-foot) in de gewone tekststroom; de foto
   (of de lege stand) ligt eronder als achtergrond. Het fotovlak is een raster met één
   cel: een lege ::before houdt de verhouding (1 : 1,75) als minimum, en een lange titel
   of tekstvergroting maakt de voet en dus het vlak hoger in plaats van tekst weg te
   knippen. De donkere laag zit achter de hele voet en is dekkend vanaf de bovenste
   titelregel; alleen de vrije strook erboven loopt uit naar transparant. */
.concert-card > .concert-image,
.d-concert-grid > .concert-card:only-child > .concert-image {
  display: grid;
  grid-template: 1fr / 1fr;
  aspect-ratio: auto;
  height: auto;
}
.concert-card > .concert-image::before {
  content: "";
  grid-area: 1 / 1;
  padding-top: 57.15%;
}
.d-concert-grid > .concert-card:only-child > .concert-image {
  height: 100%;
}
.concert-card > .concert-image > img,
.concert-card > .concert-image > .program-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.concert-card .concert-labels,
.concert-card .card-rating,
.concert-card .round-rating {
  z-index: 2;
}
.concert-card .concert-image-foot {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: 60px;
  background: linear-gradient(
    to bottom,
    #140f0c00 0,
    #140f0ca6 calc(60px - 4px),
    #140f0cbf 60px,
    #140f0ce0 100%
  );
  pointer-events: none;
}
.concert-card .concert-image-foot .concert-meta {
  position: static;
  margin: 0;
  background: #140f0ccc;
}
.concert-card .concert-photo-title {
  padding: 0 16px 12px;
}
.concert-card .concert-photo-title h3 {
  margin: 0;
  max-width: none;
  min-height: 0;
  font: 500 20px/1.22 var(--serif);
  letter-spacing: -0.2px;
  color: #fffaf0;
  text-shadow: 0 1px 3px #000a;
  overflow-wrap: anywhere;
}
/* De zaalregel in de bordeaux van het palet, vet, met de zaal in het gebouw. */
.concert-card .concert-venue {
  color: #7d1f2e;
  font-weight: 600;
}
.concert-card .concert-venue svg {
  stroke: currentColor;
}
.concert-card .concert-performers {
  margin-top: 2px;
}
/* "Bekijk het programma" ▸ onder de uitvoerenden (zoals de oude <details>). */
.concert-program-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 4px 0;
  min-height: 32px;
  border: 0;
  background: none;
  font: 600 13px/1.4 var(--sans);
  color: #8a6a2a;
  cursor: pointer;
  text-align: left;
}
.concert-program-toggle:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.concert-program-caret {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.18s;
}
.concert-program-toggle[aria-expanded="true"] .concert-program-caret {
  transform: rotate(90deg);
}
.concert-card .concert-program {
  margin-top: 4px;
}
/* Tickets niet klikbaar (uitverkocht, verkoop niet open, geen link): grijs. */
.card-action[aria-disabled="true"],
.card-action[aria-disabled="true"]:hover {
  color: #a59d90;
  background: #f1ede6;
  border-color: #e3ddd2;
  box-shadow: none;
  cursor: default;
}
/* De vier kaartknoppen op één regel, ook op 390 px. */
.concert-card .concert-actions {
  flex-wrap: nowrap;
}
.concert-card .concert-actions > .card-action {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .concert-card > .concert-image::before {
    padding-top: 58.8%;
  }
  .concert-card .concert-photo-title {
    padding: 0 15px 10px;
  }
  .concert-card .concert-photo-title h3 {
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .concert-program-caret {
    transition: none;
  }
}

/* Pakket 2 (2026-10-22) — Janine-variatie, module, quiz en smaakmodel. */

/* De liggende nachtfiguur in de paginamodule: de hand hangt over de rand, net als op
   Ontdek; smaller begint de invoer onder de vingers. */
@media (max-width: 980px) {
  .guide-input-stage:has([data-janine-body="horizontal"]) #page-guide-form {
    padding-top: 35px;
  }
}
/* Variatiebeelden: links, midden of rechts boven de invoerbalk (opmaak uit het
   ontwerppakket); de positie verandert alleen bij een vraag. Alleen vanaf 981 px,
   waar de module breed genoeg is om tekst en beeld uit elkaar te houden; smaller
   staat het beeld altijd rechts naast de tekst, steunend op het invoerveld (de
   opmaak van vóór pakket 2). De nacht heeft geen data-module-pose en houdt zijn
   eigen opmaak. */
@media (min-width: 981px) {
  .janine-input-stage:has([data-module-pose]) > .janine-edge-actor {
    left: 0;
    right: 0;
    width: 100%;
  }
  .janine-edge-actor img[data-module-pose][data-position="left"] {
    left: 0;
    right: auto;
  }
  .janine-edge-actor img[data-module-pose][data-position="center"] {
    left: calc(50% - var(--actor-width) / 2);
    right: auto;
  }
  .janine-edge-actor img[data-module-pose][data-position="right"] {
    left: auto;
    right: var(--janine-button-clear);
  }
  /* De balk is een gewone invoerregel en haar handen vallen over de bovenrand. Rechts staat
     het beeld naast de verstuurknop (--janine-button-clear). Tekst en caret blijven vrij
     van wat onder de steunlijn over de tekstregel hangt: --janine-hands-from/-to (app.js,
     gemeten per beeld in janine.js) vanaf de linkerrand van het beeld dat nu staat. Links
     begint de invoer na de handen; midden en rechts eindigt hij ervoor (--janine-bar-end:
     knop, tussenruimte en binnenrand rechts van de invoer; 50 % van de balk is 11,5 px
     meer dan 50 % van de invoerregel). */
  .d-interaction {
    --janine-button-clear: 135px;
    --janine-bar-end: 140px;
  }
  .page-guide {
    --janine-button-clear: 57px;
    --janine-bar-end: 60px;
  }
  .janine-input-stage:is(
      [data-janine-state="waiting"]:has(.janine-pose-waiting[data-position="left"]),
      [data-janine-state="telling"]:has(.janine-pose-telling[data-position="left"])
    )
    :is(.d-composer, #page-guide-form) {
    padding-left: max(16px, calc(var(--janine-hands-to) + 12px));
  }
  .janine-input-stage:is(
      [data-janine-state="waiting"]:has(.janine-pose-waiting[data-position="center"]),
      [data-janine-state="telling"]:has(.janine-pose-telling[data-position="center"])
    )
    :is(.d-composer input, #page-guide-input) {
    margin-right: max(
      0px,
      calc(
        50% + 11.5px + var(--janine-actor) / 2 - var(--janine-hands-from) - var(--janine-bar-end) +
          12px
      )
    );
  }
  .janine-input-stage:is(
      [data-janine-state="waiting"]:has(.janine-pose-waiting[data-position="right"]),
      [data-janine-state="telling"]:has(.janine-pose-telling[data-position="right"])
    )
    :is(.d-composer input, #page-guide-input) {
    margin-right: max(
      0px,
      calc(
        var(--janine-button-clear) + var(--janine-actor) - var(--janine-hands-from) -
          var(--janine-bar-end) + 12px
      )
    );
  }
  .d-interaction:has([data-module-pose]) {
    padding-left: 28px;
  }
  .discovery-input-stage:has([data-module-pose]) {
    margin-left: 0;
    width: 100%;
  }
  .d-interaction:has([data-module-pose]) .d-quiz-invitation {
    margin-left: 0;
  }
  .d-interaction:has([data-module-pose]) .d-interaction-heading h2 {
    max-width: none;
  }
  .d-interaction:has([data-module-pose]) .d-interaction-heading {
    display: flex;
    min-height: 40px;
    padding-right: 0;
  }
  .d-interaction:has(.discovery-input-stage[data-janine-state="waiting"] [data-module-pose])
    .d-interaction-heading {
    min-height: calc(var(--janine-head-size) * 1.25);
  }
  /* Zonder antwoord staat de begroeting op het midden van de ruimte naast het beeld,
     niet bovenaan met een lege strook eronder. */
  .d-interaction:has([data-module-pose]):has(.d-response:empty) .d-interaction-heading {
    justify-content: center;
  }
  .d-interaction:has([data-module-pose]) .d-response:not(:empty) {
    min-height: calc(var(--janine-head-size) * 1.25);
    margin-bottom: 12px;
  }
  /* De tekst wijkt voor het beeld dat nu staat. */
  .d-interaction:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="left"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="left"]
    )
    :is(.d-interaction-heading, .d-response) {
    padding-left: calc(var(--janine-head-size) * 2.95);
    padding-right: 0;
  }
  .d-interaction:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="center"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="center"]
    )
    :is(.d-interaction-heading, .d-response) {
    padding-left: 0;
    padding-right: calc(50% + var(--janine-head-size) * 1.5);
  }
  .d-interaction:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="right"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="right"]
    )
    :is(.d-interaction-heading, .d-response) {
    padding-left: 0;
    padding-right: calc(var(--janine-head-size) * 2.95 + var(--janine-button-clear));
  }
}
@media (min-width: 981px) and (max-width: 1279px) {
  .d-interaction:has([data-module-pose]) .d-quiz-invitation {
    width: calc(100% + 56px);
    margin-left: -28px;
  }
}

/* De paginamodule: gesloten "Vraag Janine", open de begroeting als kop. */
.page-guide:not([open]) .guide-heading-open,
.page-guide[open] .guide-heading-closed {
  display: none;
}
/* Zonder antwoord is de open module zo hoog als Janine boven de invoerbalk plus de
   balk (alle breedtes): --janine-figure (app.js) is de hoogte van het beeld dat nu
   staat boven zijn steunlijn, de begroeting staat ernaast op haar midden en de balk
   is een gewone invoerregel waarop haar armen rusten (de hand mag over de bovenrand
   vallen). */
.page-guide[open]:has([data-module-pose]) > summary {
  align-items: flex-start;
}
.page-guide[open]:has([data-module-pose]) .guide-answer:empty + .guide-input-stage {
  margin-top: 0;
}
.page-guide[open]:has(.guide-answer:empty):has([data-module-pose]) > summary {
  min-height: calc(var(--janine-figure) + 10px);
}
.page-guide[open]:has(.guide-answer:empty):has([data-module-pose]) .guide-heading-open {
  align-self: center;
}
@media (min-width: 981px) {
  .page-guide[open]:has([data-module-pose]) .guide-content {
    padding-left: 22px;
  }
  /* 's Nachts (de liggende figuur, zonder data-module-pose) net zo. */
  .page-guide[open]:has(.guide-answer:empty):has(
      .guide-input-stage[data-janine-state="waiting"] [data-janine-body="horizontal"]
    )
    > summary {
    align-items: flex-start;
    min-height: calc(var(--janine-figure) + 10px);
  }
  .page-guide[open]:has(.guide-answer:empty):has(
      .guide-input-stage[data-janine-state="waiting"] [data-janine-body="horizontal"]
    )
    .guide-heading-open {
    align-self: center;
  }
  .page-guide[open]:has(
      .guide-input-stage[data-janine-state="waiting"] [data-janine-body="horizontal"]
    )
    .guide-answer:empty
    + .guide-input-stage {
    margin-top: 0;
  }
  /* Met een antwoord staan kop en antwoord samen naast het beeld en houden de
     ruimte boven de invoerbalk vrij. */
  .page-guide[open]:has([data-module-pose]) .guide-answer:not(:empty) {
    min-height: calc(var(--janine-head-size) * 2.15 - 54px);
    margin-bottom: 12px;
    padding-right: 0;
  }
  .page-guide[open]:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="left"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="left"]
    )
    :is(.guide-heading-open, .guide-answer) {
    padding-left: calc(var(--janine-head-size) * 2.95);
    padding-right: 0;
  }
  .page-guide[open]:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="center"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="center"]
    )
    :is(.guide-heading-open, .guide-answer) {
    padding-left: 0;
    padding-right: calc(50% + var(--janine-head-size) * 1.5);
  }
  .page-guide[open]:has(
      .janine-input-stage[data-janine-state="waiting"] .janine-pose-waiting[data-position="right"],
      .janine-input-stage[data-janine-state="telling"] .janine-pose-telling[data-position="right"]
    )
    :is(.guide-heading-open, .guide-answer) {
    padding-left: 0;
    padding-right: calc(var(--janine-head-size) * 2.95 + var(--janine-button-clear));
  }
}
/* Smaller: de begroeting links in de kop, het beeld rechts ernaast op het
   invoerveld, zonder lege strook tussen kop en invoer. */
@media (max-width: 980px) {
  .page-guide[open]:has([data-module-pose]) .guide-heading-open {
    padding-right: calc(var(--janine-head-size) * 2.85 - 10px);
  }
  .page-guide[open]:has([data-module-pose]) .guide-heading-open strong {
    white-space: normal;
  }
}
/* Smaller geldt hetzelfde voor Ontdek: de module is zo hoog als Janine boven de
   invoerbalk plus de balk, de begroeting op haar midden. */
@media (max-width: 980px) {
  .d-interaction:has([data-module-pose]):has(.d-response:empty) .d-interaction-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: var(--janine-figure);
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  .d-interaction:has([data-module-pose]):has(.d-response:empty) .d-interaction-heading h2 {
    flex: none;
  }
  .d-interaction:has([data-module-pose]) .d-response:empty + .discovery-input-stage .d-composer {
    margin-top: 0;
  }
}
/* Met een antwoord staat Janine onder de tekst op de balk: de kop houdt geen ruimte
   voor haar vrij, het antwoord precies haar hoogte. */
@media (max-width: 640px) {
  .d-interaction:has([data-module-pose]):has(.d-response:not(:empty)) .d-interaction-heading {
    min-height: 0;
  }
  .d-interaction:has([data-module-pose]) .d-response:not(:empty) {
    margin-bottom: var(--janine-figure);
  }
  .d-interaction:has([data-module-pose]) .discovery-input-stage .d-composer {
    margin-top: 0;
  }
  .page-guide[open]:has([data-module-pose]) .guide-answer:not(:empty) {
    margin-bottom: var(--janine-figure);
  }
}

/* De beoordeelronde in de module op Concerten: de opmaak van de quizknop op Ontdek
   (het bordeaux blok met kop en pijl). */
.round-slot .round-invitation {
  flex: 1 1 100%;
}
.round-invitation {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
  gap: 3px 13px;
  align-items: center;
  width: 100%;
  padding: 15px 22px;
  text-align: left;
  text-decoration: none;
  color: #fff5e5;
  border: 0;
  border-top: 1px solid #a77a5766;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 90% 0, #98586355, transparent 70%),
    linear-gradient(115deg, #4d252a, #6b303d);
  box-shadow: inset 0 1px #fff1d51a;
  cursor: pointer;
  transition: filter 0.18s ease;
}
.round-invitation:focus-visible {
  outline: 3px solid #caa765;
  outline-offset: 4px;
}
.round-invitation-mark {
  grid-column: 1;
  grid-row: 1/3;
  display: grid;
  place-items: center;
  color: #d7b779;
}
.round-invitation-mark svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.4;
}
.round-invitation-title {
  grid-column: 2;
  grid-row: 1/3;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.round-invitation-arrow {
  grid-column: 3;
  grid-row: 1/3;
  display: grid;
}
.round-invitation-arrow svg {
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: #e3c388;
  color: #452a24;
  box-shadow:
    inset 0 1px #fff7dd99,
    0 3px 8px #190c1429;
  transition: transform 0.18s ease;
}
@media (hover: hover) {
  .round-invitation:hover {
    filter: brightness(1.08);
  }
  .round-invitation:hover .round-invitation-arrow svg {
    transform: translateX(3px);
  }
}
@media (max-width: 640px) {
  .round-invitation {
    padding: 14px 16px;
    gap: 3px 10px;
  }
  .round-invitation-title {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .round-invitation,
  .round-invitation-arrow svg {
    transition: none;
  }
  .round-invitation:hover .round-invitation-arrow svg {
    transform: none;
  }
}

/* De quiz op de WHM-routes: timerbalk, Janines woorden en de uitslag. */
.quiz-timer {
  height: 6px;
  margin: 0 0 10px;
  border-radius: 3px;
  background: #eadfcb;
  overflow: hidden;
}
.quiz-timer > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b08a2e, #7d1f2e);
  transform-origin: left center;
  transform: scaleX(var(--quiz-from));
  animation: quiz-timer var(--quiz-left) linear forwards;
}
@keyframes quiz-timer {
  from {
    transform: scaleX(var(--quiz-from));
  }
  to {
    transform: scaleX(0);
  }
}
/* De regels nemen de maat van de reactie over (niet die van .quiz-stage p). */
.quiz-live .quiz-reaction p {
  margin: 0;
  font: inherit;
}
.quiz-live .quiz-reaction p + p {
  margin-top: 6px;
}
.quiz-answers [aria-disabled="true"] {
  cursor: default;
  opacity: 0.6;
}
.quiz-live [data-quiz-start][aria-busy="true"],
.quiz-live [data-quiz-again][aria-busy="true"],
.quiz-live [data-quiz-next][aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
.quiz-end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.quiz-live .janine-failure {
  margin: 12px 0 0;
}
@media (min-width: 641px) {
  .quiz-live[data-quiz-body="full"]:has(.quiz-question-scene[data-quiz-side="left"]) .quiz-workspace {
    padding-left: calc(var(--actor-width) + 30px);
    padding-right: 0;
  }
}
/* Uitslag: het applaudisserende jurylid staat kleiner en verder naar achteren. */
.quiz-live .quiz-result-duo > img:not(.quiz-result-guest) {
  z-index: 2;
}
.quiz-live .quiz-result-duo > img.quiz-result-guest {
  position: absolute;
  z-index: 1;
  left: -24%;
  bottom: calc(var(--actor-width) * 0.22);
  width: calc(var(--actor-width) * 0.68);
  height: calc(var(--actor-width) * 1.5 * 0.68);
}
.quiz-live[data-quiz-mood="shadow"] .quiz-portrait,
.quiz-live[data-quiz-mood="judge"] .quiz-portrait {
  animation: none;
}
.quiz-live[data-quiz-step="result"] .quiz-character-scene:has(.quiz-result-duo) {
  padding-right: calc(var(--actor-width) * 1.24 + 30px);
}
@media (max-width: 640px) {
  .quiz-live[data-quiz-step="result"] .quiz-character-scene:has(.quiz-result-duo) {
    padding-right: 0;
  }
  .quiz-live[data-quiz-body="full"] .quiz-character-scene[data-quiz-side="left"] .quiz-portrait {
    left: calc((100% - var(--actor-width)) / 2);
    right: auto;
  }
  .quiz-live .quiz-result-duo > img.quiz-result-guest {
    left: -12%;
    width: calc(var(--actor-width) * 0.6);
    height: calc(var(--actor-width) * 0.9);
  }
}

/* Het smaakmodel bovenaan Smaak: de hele compositie op ieder formaat. */
.taste-profile { padding: 0 32px; }
.taste-profile-section {
  padding: 28px 0;
  border-top: 1px solid #e4d9c8;
  min-width: 0;
}
.taste-profile-section:first-child { border-top: 0; }
.taste-profile-section h2 {
  margin: 0 0 20px;
  color: var(--ink);
  font: 500 25px/1.2 var(--serif);
}
.taste-timeline-scroll { overflow-x: auto; }
/* De server tekent deze meetkunde: nullijn 60px, maximale uitslag 46px. */
.taste-timeline {
  display: grid;
  grid-template-columns: repeat(10, minmax(min-content, 1fr));
  column-gap: 8px;
  position: relative;
  min-height: 184px;
}
.taste-timeline::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  border-top: 1px solid #d9cbb7;
}
.taste-period { position: relative; text-align: center; }
.taste-stem {
  position: absolute;
  top: var(--taste-stem-top);
  left: 50%;
  width: 3px;
  height: var(--taste-extent);
  margin-left: -1.5px;
  background: #ad8738;
  border-radius: 2px;
}
.taste-point {
  position: absolute;
  top: var(--taste-point-top);
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #ad8738;
}
.taste-point.negative,
.taste-stem.negative,
.taste-fill.negative { background: #968d7e; }
.taste-period-name {
  display: block;
  margin-top: 122px;
  padding: 0 4px;
  color: #4f4a41;
  font: 400 12px/1.4 var(--sans);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.taste-period.empty .taste-period-name,
.taste-preference.empty .taste-preference-name,
.taste-unknown { color: #8a7c67; }
.taste-preferences { list-style: none; margin: 0; padding: 0; }
.taste-preference {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(80px, 1.6fr);
  gap: 20px;
  align-items: center;
  padding: 8px 0;
  font: 400 14px/1.5 var(--sans);
}
.taste-preference-name { color: #4f4a41; }
.taste-unknown { font-size: 12px; }
.taste-track {
  position: relative;
  height: 9px;
  background: linear-gradient(#d9cbb7, #d9cbb7) center / 1px 100% no-repeat;
}
.taste-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #e4d9c8;
}
.taste-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: #ad8738;
}
.taste-composers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--taste-rows), auto);
  grid-auto-flow: column;
  column-gap: 32px;
}
.taste-composers .taste-preference {
  grid-template-columns: minmax(0, 1.4fr) minmax(50px, 1fr);
  gap: 12px;
}
.taste-composers .taste-track { background-position: left; }
@media (max-width: 700px) {
  .taste-profile { padding: 0 20px; }
  .taste-profile-section { padding: 24px 0; }
  .taste-profile-section h2 { font-size: 23px; }
  .taste-timeline {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .taste-timeline::before {
    top: 0;
    bottom: 0;
    left: 60px;
    right: auto;
    border-top: 0;
    border-left: 1px solid #d9cbb7;
  }
  .taste-period {
    display: flex;
    align-items: center;
    min-height: 52px;
    text-align: left;
  }
  /* Dezelfde uitslag, een kwartslag gedraaid: meer voorkeur naar rechts. */
  .taste-stem {
    top: 50%;
    left: calc(120px - var(--taste-stem-top) - var(--taste-extent));
    width: var(--taste-extent);
    height: 3px;
    margin: -1.5px 0 0;
  }
  .taste-point {
    top: 50%;
    left: calc(120px - var(--taste-point-top));
  }
  .taste-period-name {
    margin: 0 0 0 124px;
    padding: 10px 0;
    font-size: 13px;
  }
  .taste-preference { gap: 12px; grid-template-columns: minmax(130px, 1.2fr) minmax(60px, 1fr); }
  .taste-composers { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
.taste-model {
  margin: 0;
  padding: 28px 32px 0;
}
.taste-model img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
@media (min-width: 981px) {
  .taste-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px;
    padding: 28px 32px;
    border-bottom: 1px solid #e1d5c3;
  }
  .taste-overview .taste-lead {
    grid-area: 1 / 1;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-bottom: 0;
  }
  .taste-overview .taste-model {
    grid-area: 1 / 2;
    padding: 0;
  }
  .taste-overview .taste-model img {
    max-width: 480px;
    max-height: 300px;
  }
}
@media (max-width: 640px) {
  .taste-model {
    padding: 18px 18px 0;
  }
}
.page-guide[open] .guide-heading-open {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.page-guide[open] .guide-heading-open > span {
  font-size: 13px;
  line-height: 1.5;
}
.quiz-timer > i.is-frozen {
  animation: none;
}
@media (min-width: 641px) {
  .quiz-live .quiz-reaction-empty {
    display: none;
  }
}
.quiz-live[data-quiz-body="full"] .quiz-reaction-empty {
  display: none;
}

/* Pakket 3 (2026-10-22): de quiz op één scherm, zonder scrollen. De banner houdt label
   en titel (geen omschrijving) en is daarom lager; onderaan alleen wat lucht. De beelden
   rekenen vanuit de zichtbare hoogte (100dvh: ook met de balken van Safari): wat de vaste
   delen (kop, banner, tekst, knoppen, de navigatiebalk) niet gebruiken, krijgt het beeld. */
body[data-page="quiz"] {
  /* Het oorspronkelijke hoogtebudget, minus de extra ruimte van de iPhone-statusbalk
     en home-indicator. Zonder insets blijven alle ontwerpafmetingen gelijk. */
  --quiz-available-height: calc(100dvh - var(--app-safe-top, 0px) - env(safe-area-inset-bottom, 0px));
  --page-banner-height: 150px;
}
body[data-page="quiz"] > main {
  padding-bottom: 24px;
}
/* De uitslag van een vraag: klein label, het antwoord op de volgende regel. */
.quiz-live .quiz-feedback-label {
  display: block;
  font: 600 11px/1.5 var(--sans);
  letter-spacing: 0.3px;
  color: #786c5a;
}
.quiz-live .quiz-feedback .quiz-running-score {
  display: block;
  margin-top: 4px;
}
.quiz-live .quiz-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.quiz-live .quiz-feedback-actions .secondary {
  min-height: 45px;
  padding: 11px 21px;
  font-size: 12px;
}
/* Hele figuren (jurylid, uitslag, duo, de blije Janine): de kopmaat volgt de hoogte, zodat
   ook de langste vraag en de uitslagteksten met het beeld op één scherm passen. */
.quiz-live[data-quiz-body="full"] .quiz-current {
  --janine-head-size: clamp(0px, calc((var(--quiz-available-height) - 420px) * 0.15), 72px);
}
@media (max-width: 640px) {
  body[data-page="quiz"] > main {
    padding-bottom: 0;
  }
  /* Kopmaten lineair tussen ±664 px (Safari) en 844 px hoog, gemeten met de langste
     vraag, antwoorden en uitslagteksten uit de quizvoorraad. Geen ondergrens die het
     hoogtebudget overschrijft (pakket 5): op nog lagere schermen krimpt het beeld verder. */
  .quiz-live .quiz-current {
    --janine-head-size: clamp(0px, calc(var(--quiz-available-height) * .147 - 60px), 64px);
  }
  .quiz-live[data-quiz-body="full"] .quiz-current {
    --janine-head-size: clamp(0px, calc(var(--quiz-available-height) * .147 - 74px), 50px);
  }
  .quiz-live[data-quiz-step="result"] .quiz-current {
    --janine-head-size: clamp(0px, calc(var(--quiz-available-height) * .129 - 67px), 42px);
  }
  .quiz-live:is([data-quiz-mood="shadow"], [data-quiz-mood="judge"]) .quiz-current {
    --janine-head-size: clamp(0px, calc(var(--quiz-available-height) * .128 - 52px), 56px);
  }
  /* Alles wat geen beeld is, is op elke hoogte even compact, zodat de kopmaten hierboven
     lineair met de hoogte meeschalen; de banner krimpt mee tot ±664 px (Safari met zijn
     balken), label en titel blijven. */
  body[data-page="quiz"] {
    --page-banner-height: clamp(78px, calc(12.2dvh - 3px), 100px);
  }
  body[data-page="quiz"] .page-banner > .wrap {
    padding-top: calc(var(--header-height) + clamp(8px, calc(2.2dvh - 7px), 12px));
  }
  body[data-page="quiz"] .page-banner h1 {
    font-size: clamp(22px, calc(3.3dvh), 28px);
    margin: 3px 0 0;
  }
  .quiz-live .quiz-progress-header {
    padding-bottom: 4px;
  }
  .quiz-live[data-quiz-mood="correct"] #quiz-current-title,
  .quiz-live:is([data-quiz-mood="incorrect"], [data-quiz-mood="overruled"]) #quiz-current-title {
    font-size: 22px;
    margin-bottom: 4px;
  }
  .quiz-timer {
    margin-bottom: 8px;
  }
  .quiz-live .quiz-feedback-actions {
    margin-top: 10px;
  }
  .quiz-live .quiz-primary-action .primary,
  .quiz-live .quiz-feedback-actions .secondary,
  .quiz-live .quiz-end-actions .secondary {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Op een laag geïnstalleerd scherm kan de statusbalk met de langste vraag
   de vierde antwoordknop onder de navigatie duwen (390×664, 47/34 px insets).
   Houd alleen daar extra ruimte vrij door de bestaande vraagfiguur te verkleinen. */
@media (max-width: 640px) and (max-height: 700px) {
  .quiz-live[data-quiz-body="upper"] .quiz-current {
    --janine-head-size: clamp(0px, calc(var(--quiz-available-height) * .147 - 60px - min(12px, var(--app-safe-top, 0px) * .3)), 64px);
  }
}

/* Pakket 4 (2026-10-22). */
/* "PING!": het jurylid verschijnt in de schaduw. */
.quiz-live .quiz-ping {
  display: block;
  margin-bottom: 4px;
  font: 800 15px/1.2 var(--sans);
  letter-spacing: 1px;
  color: #a9822f;
}
/* De uitslag van een vraag: Uitleg goud links, verder rechts op dezelfde regel. */
.quiz-live .quiz-feedback-actions .quiz-explain {
  border-color: #c9aa73;
  background: linear-gradient(#f7ecd4, #ecd9b0);
  box-shadow:
    inset 0 1px #fffaf0,
    0 3px 8px #8a6a2a1f;
  color: #6b4d1c;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.quiz-live .quiz-feedback-actions .quiz-explain:hover {
  background: linear-gradient(#f3e3c2, #e6cd98);
  border-color: #b8945a;
}
.quiz-live .quiz-feedback-actions [data-quiz-next] {
  margin-left: auto;
}

/* Pakket 5 (2026-10-22): het welkomscherm. Janine zit op de onderrand van het vlak, een
   vensterbank: haar bovenlichaam staat vóór het vlak, haar benen bungelen eronder over de
   pagina. Alle maten rekenen vanuit één beeldbreedte W (--welcome-width) en de maten van
   janine-quiz-zit-palm-omhoog.png (1086 × 1448 px), in px en dus los van aspect-ratio of
   de geladen afbeelding: de uitsnede (.quiz-welcome-frame) is 1360 px hoog (daaronder is het
   beeld leeg), de kruin ligt op ±109 px, het zitvlak (waar haar rustende hand ligt) op
   810 px en het midden van de handpalm op (970, 548) px.
   W is het werkelijk resterende hoogtebudget, zonder ondergrens die het budget overschrijft:
   (100dvh − de vaste delen erboven en eronder − een eventuele foutmelding) / 1,1723 (de
   uitsnede min het lege stuk boven haar kruin), begrensd door de breedte en een maximum.
   Op lage schermen worden de vaste delen compacter (zie onder). */
.quiz-live[data-quiz-step="start"] {
  /* Vaste delen: bovenkant vlak (198) + binnenrand (22) + ruimte onder de benen (48) + 2. */
  --welcome-fixed: 270px;
  --welcome-notice: 0px;
  --welcome-max: 480px;
  --welcome-room: calc(100vw - 470px);
  --welcome-width: max(
    0px,
    min(
      var(--welcome-max),
      var(--welcome-room),
      calc((100dvh - var(--welcome-fixed) - var(--welcome-notice)) * 0.853)
    )
  );
  --welcome-sill: 8px;
  /* Het lege stuk boven haar kruin schuift onder de bovenrand van het vlak. */
  --welcome-lift: calc(var(--welcome-width) * 0.08);
  /* De scène in het vlak: van de kruin tot de onderrand van de vensterbank (810/1086 − lift). */
  --welcome-scene: calc(var(--welcome-width) * 0.66586 + var(--welcome-sill));
  /* Van de bovenrand van de vensterbank tot onder de uitsnede: (1360 − 810) / 1086. */
  --welcome-legs: calc(var(--welcome-width) * 0.50644 - var(--welcome-sill));
  --welcome-orb: max(48px, calc(var(--welcome-width) * 0.17));
}
/* Een foutmelding krijgt een vaste plek boven de scène: de volle breedte, ten hoogste drie
   regels (telefoon: vier; langer scrolt binnen de melding), en het beeldbudget houdt er
   rekening mee (3 × 19,5 + 10 ≤ 70; telefoon 4 × 19,5 + 10 ≤ 90). */
.quiz-live[data-quiz-step="start"]:has(.quiz-welcome > .janine-failure) {
  --welcome-notice: 70px;
}
.quiz-welcome > .janine-failure {
  max-height: 4.5em;
  margin: 0 0 10px;
  overflow-y: auto;
  font: 400 13px/1.5 var(--sans);
}
.quiz-live[data-quiz-step="start"] .quiz-panel-body {
  padding-bottom: 0;
  margin-bottom: var(--welcome-legs);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* De vensterbank: een smalle, iets uitstekende rand met een lichte afschuining en schaduw,
   in de kleuren van het vlak. Haar zitvlak ligt op de bovenrand. */
.quiz-live[data-quiz-step="start"] .quiz-panel-body::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -5px;
  right: -5px;
  bottom: -1px;
  height: calc(var(--welcome-sill) + 1px);
  box-sizing: border-box;
  border: 1px solid #dccdb2;
  border-radius: 3px;
  background: linear-gradient(#fffefb, #f5eee1 45%, #e8ddc8);
  box-shadow:
    inset 0 1px #fff,
    0 6px 9px -4px #4c371b59;
  pointer-events: none;
}
/* De figuur bepaalt de rijhoogte, niet de tekst: het zitvlak blijft op de vensterbank. */
.quiz-welcome-scene {
  display: grid;
  grid-template-columns: minmax(0, 300px) var(--welcome-width);
  grid-template-rows: var(--welcome-scene);
  justify-content: center;
  column-gap: 12px;
}
.quiz-welcome-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  min-width: 0;
}
.quiz-welcome h2 {
  margin: 0;
  font: 500 30px/1.25 var(--serif);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.quiz-welcome-figure {
  position: relative;
  z-index: 2;
  align-self: end;
  width: var(--welcome-width);
  height: calc(var(--welcome-width) * 1.2523);
  margin: calc(var(--welcome-lift) * -1) 0 calc(var(--welcome-legs) * -1);
}
.quiz-welcome-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.quiz-welcome-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--welcome-width);
  height: calc(var(--welcome-width) * 1.33333);
  max-width: none;
}
/* Het midden van de handpalm. */
.quiz-welcome-hand {
  position: absolute;
  left: calc(var(--welcome-width) * 0.89319);
  top: calc(var(--welcome-width) * 0.5046);
  width: 0;
  height: 0;
}
/* Een zachte slagschaduw op de handpalm, die meekrimpt als de bol opstijgt. */
.quiz-start-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--welcome-orb) * 0.78);
  height: calc(var(--welcome-orb) * 0.2);
  border-radius: 50%;
  background: radial-gradient(closest-side, #3a1f0f99, #3a1f0f00);
  transform: translate(-50%, -50%);
}
/* "Start" als bol in het wijnrood van de knoppen (Laurens 22 oktober: herkenbaar als knop):
   glans linksboven, dieper rood onderaan, de tekst in het crème van .primary. */
.quiz-start-orb {
  position: absolute;
  left: calc(var(--welcome-orb) / -2);
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--welcome-orb);
  height: var(--welcome-orb);
  padding: 0;
  border: 1px solid #3a161d;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    #b8737d 0,
    #94505a 15%,
    #713a43 42%,
    #5b2630 74%,
    #3f161d 100%
  );
  box-shadow:
    inset 0 -3px 6px #2a0c1180,
    inset 0 2px 2px #d9a3aa66,
    0 2px 4px #3a161d4d,
    0 0 10px 3px #c9aa7366;
  color: #fff9f1;
  font: 600 calc(var(--welcome-orb) * 0.27) / 1 var(--serif);
  letter-spacing: 0.2px;
  text-shadow: 0 1px #2a0c1180;
}
.quiz-start-orb:hover {
  filter: brightness(1.05);
}
/* De bol ligt stil in haar hand; alleen de gouden gloed pulseert (Laurens 22 oktober).
   Bij "minder beweging" blijft de gloed uit de basisregel staan. */
@media (prefers-reduced-motion: no-preference) {
  .quiz-start-orb {
    animation: quiz-orb-glow 2.4s ease-in-out infinite;
  }
}
@keyframes quiz-orb-glow {
  50% {
    box-shadow:
      inset 0 -3px 6px #2a0c1180,
      inset 0 2px 2px #d9a3aa66,
      0 2px 4px #3a161d4d,
      0 0 22px 9px #d9b97a99;
  }
}
/* Telefoon: de titel in twee regels over de volle breedte boven de scène, Janine zo breed
   als het vlak en het hoogtebudget toelaten. Vaste delen: bovenkant vlak (kop + banner −
   24) + binnenrand (10) + titel (2 × 30 + 8) + ruimte onder het vlak en de navigatiebalk
   (78) + 2. Wat van het budget overblijft (--welcome-free), verdeelt zich zo dat de opstelling
   midden tussen de onderrand van de banner en de navigatiebalk staat; het vlak begint 24 px
   in de banner, dus boven de titel komt (vrij + 24) / 2, nooit meer dan er vrij is. */
@media (max-width: 640px) {
  .quiz-live[data-quiz-step="start"] {
    --welcome-fixed: calc(var(--header-height) + var(--page-banner-height) + 134px + env(safe-area-inset-bottom, 0px));
    --welcome-room: calc(100vw - 70px);
    --welcome-max: var(--welcome-room);
    --welcome-free: max(
      0px,
      calc(
        100dvh - var(--welcome-fixed) - var(--welcome-notice) - var(--welcome-width) * 1.1723
      )
    );
  }
  .quiz-live[data-quiz-step="start"]:has(.quiz-welcome > .janine-failure) {
    --welcome-notice: 90px;
  }
  .quiz-welcome > .janine-failure {
    max-height: 6em;
  }
  .quiz-live[data-quiz-step="start"] .quiz-panel-body {
    padding-top: calc(10px + min(var(--welcome-free), (var(--welcome-free) + 24px) / 2));
  }
  .quiz-welcome-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--welcome-scene);
    row-gap: 8px;
  }
  .quiz-welcome-figure {
    justify-self: center;
  }
  .quiz-welcome h2 {
    font-size: 24px;
    text-wrap: balance;
  }
}
/* Lage schermen op tablet- en desktopbreedte (een liggende telefoon, een klein laptopvenster):
   de vaste delen van de quizpagina worden compacter (lagere banner, minder lucht onder het
   vlak), zodat wat overblijft het beeld krijgt. Vaste delen voor het welkom: bovenkant vlak
   (72 + 92 − 24 = 140) + binnenrand (14) + ruimte onder de benen (8 + 8) + 2. */
@media (min-width: 641px) and (max-height: 700px) {
  body[data-page="quiz"] {
    --page-banner-height: 92px;
  }
  body[data-page="quiz"] .page-banner > .wrap {
    padding-top: calc(var(--header-height) + 6px);
    padding-bottom: 0;
  }
  body[data-page="quiz"] .page-banner h1 {
    font-size: 30px;
    margin: 2px 0 0;
  }
  body[data-page="quiz"] > main,
  body[data-page="quiz"] .extension-body {
    padding-bottom: 8px;
  }
  .quiz-live .quiz-panel-body {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .quiz-live[data-quiz-step="start"] {
    --welcome-fixed: 172px;
  }
  .quiz-welcome h2 {
    font-size: 26px;
  }
  /* De vraagstappen: minder lucht rond de scène, en de kopmaten volgen het resterende
     hoogtebudget zonder ondergrens die het budget overschrijft. */
  .quiz-live .quiz-question-scene {
    padding: 10px 0 14px;
  }
  .quiz-live .quiz-dialogue h2 {
    font-size: 18px;
    line-height: 1.35;
  }
  .quiz-live .quiz-workspace {
    padding-top: 10px;
  }
  .quiz-live .quiz-answers button {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .quiz-live .quiz-current {
    --janine-head-size: min(88px, max(0px, calc((var(--quiz-available-height) - 330px) * 0.4)));
  }
  .quiz-live[data-quiz-body="upper"] .quiz-character-scene {
    min-height: calc(var(--janine-head-size) * 2.39);
  }
  .quiz-live[data-quiz-body="full"] .quiz-current {
    --janine-head-size: min(72px, max(0px, calc((var(--quiz-available-height) - 330px) * 0.15)));
  }
}
/* Nog lager (een liggende telefoon): de banner houdt alleen de paginatitel. Vaste delen voor
   het welkom: bovenkant vlak (72 + 68 − 24 = 116) + 14 + 16 + 2. */
@media (min-width: 641px) and (max-height: 560px) {
  body[data-page="quiz"] {
    --page-banner-height: 68px;
  }
  body[data-page="quiz"] .page-banner > .wrap {
    padding-top: calc(var(--header-height) + 4px);
  }
  body[data-page="quiz"] .page-banner .eyebrow {
    display: none;
  }
  body[data-page="quiz"] .page-banner h1 {
    font-size: 26px;
    margin: 0;
  }
  .quiz-live[data-quiz-step="start"] {
    --welcome-fixed: 148px;
  }
  .quiz-live .quiz-current {
    --janine-head-size: min(88px, max(0px, calc((var(--quiz-available-height) - 350px) * 0.4)));
  }
  .quiz-live .quiz-feedback-actions {
    margin-top: 8px;
  }
}

/* Tijdelijke kijkversie: vorm behouden, nog niet aangesloten bediening herkenbaar. */
[data-preview-disabled] { opacity: .55; cursor: not-allowed; }

/* De echte beheerinhoud volgt de hoogte van de nieuwe app. */
.beheer-host { overflow: hidden; }
.beheer-host iframe { display: block; width: 100%; min-height: 240px; border: 0; background: transparent; }
.beheer-host iframe[hidden], .beheer-host [hidden] { display: none; }
.beheer-loading, .beheer-failure { padding: 28px 32px; }
.beheer-failure p { margin-bottom: 18px; }
@media (max-width: 640px) { .beheer-loading, .beheer-failure { padding: 20px 18px; } }

/* De inlogactie blijft boven een eventuele algemene herlaadfout bereikbaar. */
.session-failure { z-index: 65; }
.processing-status {
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--muted, #7c7164);
  font-size: .875rem;
}

/* De bezigheid blijft leesbaar, ook als eerdere berichten buiten beeld staan. */
#conversation-progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 20px;
  background: #fffdf8;
  color: #713d45;
  font-size: 12px;
  line-height: 20px;
  border-inline: 1px solid #e3d7c2;
}
#conversation-progress:empty { display: none; }
.conversation-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: conversation-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes conversation-pulse { to { opacity: .3; } }

/* Met een schermtoetsenbord krijgt het gesprek de ruimte van decor en tabbladbalk. */
@media (max-width: 640px), (max-height: 520px) {
  body[data-page="gesprek"].conversation-keyboard {
    --chat-bottom-inset: 0px;
  }
  body[data-page="gesprek"].conversation-keyboard .conversation-toolbar,
  body[data-page="gesprek"].conversation-keyboard .conversation-presence,
  body[data-page="gesprek"].conversation-keyboard .mobile-nav {
    display: none;
  }
  body[data-page="gesprek"].conversation-keyboard #main {
    padding-bottom: 0;
  }
  body[data-page="gesprek"].conversation-keyboard .inline-form {
    padding-block: 6px;
  }
}

/* Over Janine gebruikt dezelfde uitnodiging als de bestaande beoordeelknop. */
.janine-about-copy h3 {
  margin: 26px 0 12px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
}
.janine-about-copy h3:first-child { margin-top: 0; }
.about-actions { display: grid; gap: 12px; margin-top: 25px; }
.about-actions .round-invitation { width: 100%; margin: 0; text-decoration: none; }
.about-actions .round-invitation:disabled { cursor: default; opacity: .55; }
.about-actions .round-slot { min-width: 0; }

.about-actions .round-slot:not(:empty) { margin-top: 0; }