@charset "UTF-8";
/**
 * Responsive Foundations
 *
 * Single source of truth for breakpoints, card geometry, density tiers,
 * audio/video scaling factors, and reduced-motion overrides. Declare values
 * here as Sass variables, mirror every value to a CSS custom property on
 * :root so JS can read them via getComputedStyle(), and expose the
 * vertical-layout mixin so partials can wrap @media queries without
 * duplicating the breakpoint literals.
 *
 * Consumers: import this partial as `@use 'responsive' as *` (namespace-free)
 * so that $vars and @mixin vertical-layout are available unqualified.
 *
 * @version v1.8.0
 */
@layer reset, third-party, telar-base, telar-bootstrap-overrides, telar-components, telar-overrides;
:root {
  --telar-vertical-min-width: 1024px;
  --telar-vertical-min-aspect: 0.75;
  --telar-vertical-short-windows: 488px 1380px, 496px 1380px, 504px 1380px, 512px 1380px, 520px 1380px, 528px 1366px, 536px 1341px, 544px 1316px, 552px 1292px, 560px 1267px, 568px 1243px, 576px 1218px, 584px 1193px, 592px 1169px, 600px 1144px, 608px 1119px, 616px 1095px, 624px 1070px, 632px 1046px;
  --telar-card-side-left: 3%;
  --telar-card-side-width: 37%;
  --telar-card-mobile-bottom: max(1rem, env(safe-area-inset-bottom));
  --telar-card-mobile-max-height: 40vh;
  --telar-card-mobile-max-height-media: 35vh;
  --telar-card-landscape-max-height: 480px;
  --telar-card-side-min-share: 0.37;
  --telar-card-side-max-share: 0.52;
  --telar-card-side-base: 1544;
  --telar-card-side-slope: 1.6;
  --telar-card-side-max-by-height: 718;
  --telar-density-min-vh: 600px;
  --telar-density-max-vh: 900px;
  --telar-density-mini: 0.7;
  --telar-density-comfortable: 1;
  --telar-audio-height-mobile: 0.35;
  --telar-audio-height-resize: 0.5;
  --telar-video-pad-factor: 0.025;
  --telar-video-stack-max-h: 0.58;
  --telar-media-below-gain: 0.15;
  --telar-audio-wave-side-gap: 1%;
  --telar-audio-wave-side-left: calc(var(--telar-card-side-left) + var(--telar-card-side-width) + 1%);
  --telar-audio-wave-side-width: calc(100% - var(--telar-card-side-left) - var(--telar-card-side-width) - 1%);
}

@media (prefers-reduced-motion: reduce) {
  .viewer-plate,
  .text-card {
    transition: none !important;
  }
  .offcanvas,
  [data-telar-panel],
  .telar-panel-overlay {
    transition: none !important;
  }
}
@media (max-height: 600px) {
  .page-content {
    font-size: 0.875rem;
  }
  .page-content h1 {
    margin-bottom: 1rem;
  }
  .page-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }
  .page-content p {
    margin-bottom: 1rem;
  }
  .collection-grid {
    gap: 1.25rem;
    padding: 1.25rem 0;
  }
  .collection-item img {
    height: 175px;
  }
  .collection-item h3 {
    font-size: 0.9rem;
    margin-top: 0.7rem;
  }
  .navbar-brand {
    font-size: 1.125rem;
  }
  .panel-trigger {
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
  }
  .mobile-nav button {
    width: 45px;
    height: 45px;
  }
  #panel-layer1 .offcanvas-body,
  #panel-layer2 .offcanvas-body,
  #panel-glossary .offcanvas-body {
    padding: 1.3rem;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  #panel-layer1 .offcanvas-body .offcanvas-title,
  #panel-layer2 .offcanvas-body .offcanvas-title,
  #panel-glossary .offcanvas-body .offcanvas-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  #panel-layer1 .offcanvas-body blockquote,
  #panel-layer2 .offcanvas-body blockquote,
  #panel-glossary .offcanvas-body blockquote {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
  }
  #panel-layer1 .offcanvas-body hr,
  #panel-layer2 .offcanvas-body hr,
  #panel-glossary .offcanvas-body hr {
    margin: 1.75rem 0 1rem 0;
  }
  #panel-layer1 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-layer2 .offcanvas-body p:has(a[href^="#_ftnref"]),
  #panel-glossary .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  #panel-layer1 .offcanvas-body img,
  #panel-layer2 .offcanvas-body img,
  #panel-glossary .offcanvas-body img {
    max-width: 100%;
    margin: 0.7rem auto;
  }
}
/**
 * Typography
 *
 * Global text styles: body font, heading hierarchy, link colours, and display
 * heading responsive sizing. These apply site-wide across all page types (home,
 * story, object, glossary). Font families and colours come from CSS custom
 * properties set by the theme system in the main stylesheet.
 *
 * @version v1.8.0
 */
@layer telar-base {
  /* Body */
  body {
    font-family: var(--font-body);
    color: var(--color-body);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  main {
    flex: 1;
  }
  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-heading);
  }
  /* Global link styling - theme color with underline */
  a {
    color: var(--color-link);
    text-decoration: underline;
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover {
      opacity: 0.8;
    }
  }
  /* Display headings - ensure proper word wrapping on mobile */
  @media (max-width: 767px) {
    .display-4 {
      font-size: 2.5rem;
    }
  }
}
/**
 * Layout
 *
 * The structural elements that appear on most pages: site header with navigation
 * bar, footer, page content grid, story card components (used on the home page
 * to list stories), collection gallery grid, glossary index page, global button
 * styling, and the demo story badge. These create the overall page frame that
 * story-specific and content-specific styles build on.
 *
 * User page widget styling is also here: widgets on standalone user pages
 * (outside of panels) follow the same colour convention as Layer 1 panels,
 * using Layer 2 colours for contrast.
 *
 * @version v1.8.0
 */
/**
 * Reusable Patterns
 *
 * Reusable patterns shared across partials. The main pattern here is the panel
 * colour inversion for tabs: in Telar's panel system, widgets inside panels use
 * the opposite panel's colours for visual contrast. A tabs widget in the Layer 1
 * panel (light background) gets Layer 2 colours (dark), and a tabs widget in
 * Layer 2 gets Layer 1 colours. User pages follow the same convention as
 * Layer 1. Rather than duplicating those colour rules for every context, this
 * mixin generates them from a single definition.
 *
 * The tabs panel inversion below is the file's sole mixin of this kind.
 *
 * Also home to the carousel-caption and accordion panel colour inversions
 * (same pattern as tabs) and the light-glass-button mixin shared between
 * the share button and the back-to-home button.
 *
 * @version v1.8.0
 */
/* Tabs panel colour inversion
 *
 * Generates the full set of overrides needed to restyle a .telar-widget-tabs
 * inside a particular context (a panel or a page type). The overrides strip the
 * default white background and borders, then apply the provided colour pair to
 * tab headers, active states, and tab content areas.
 *
 * $bg-var:   CSS custom property name for the background, e.g. --color-panel-layer2-bg
 * $text-var: CSS custom property name for the text, e.g. --color-on-panel-layer2
 */
/* Carousel caption panel colour inversion
 *
 * Generates the panel-colour override for .telar-widget-carousel caption
 * bands, mirroring widget-tabs-panel-colours above. The small/caption-credit
 * colour isn't derivable from the background/text pair — each panel context
 * uses a different overlay opacity — so it is passed explicitly.
 *
 * $bg-var:       CSS custom property name for the caption background
 * $text-var:     CSS custom property name for the caption text
 * $credit-color: colour for the smaller credit/caption-credit line
 */
/* Accordion panel colour inversion
 *
 * Generates the panel-colour override for .telar-widget-accordion, mirroring
 * widget-tabs-panel-colours above. The item border and button backgrounds
 * aren't derivable from the background/text pair — each panel context uses
 * different overlay opacities — so they are passed explicitly.
 *
 * $bg-var:            CSS custom property name for the background
 * $text-var:          CSS custom property name for the text
 * $item-border-color: accordion-item border colour
 * $button-bg:         accordion-button background
 * $button-active-bg:  accordion-button background when expanded (:not(.collapsed))
 */
/* Light-glass button
 *
 * Shared visual treatment for floating translucent buttons over the viewer
 * plate — the share button and the back-to-home button both use it. Only the
 * properties identical across both sites live here; each site keeps its own
 * display mode, position, sizing, font, and transition timing.
 */
@layer telar-components {
  /* Navigation */
  .navbar-brand {
    white-space: normal;
  }
  .site-header .navbar-brand {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    color: var(--color-heading);
  }
  .site-header .site-logo {
    max-height: 80px;
    width: auto;
  }
  .navbar-toggler {
    margin-left: auto;
  }
  /* Footer */
  .site-footer {
    border-top: 1px solid #dee2e6;
  }
  .footer-link {
    color: #6c757d;
    text-decoration: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .footer-link:hover {
      color: var(--color-link);
      text-decoration: underline;
    }
  }
  /* Page Content */
  .page-content {
    font-size: 1.25rem;
    font-weight: 300;
  }
  .page-content h1 {
    margin-bottom: 1.5rem;
    font-weight: 400;
  }
  .page-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 400;
  }
  .page-content p {
    margin-bottom: 1.5rem;
  }
  .page-content img {
    max-width: 100%;
    height: auto;
  }
  /* User Page Widget Styling - styled as if inside panel-layer1 */
  /* Widgets span full column width (no max-width constraint) */
  /* Carousel, accordion, and tabs styling - user pages use layer2 colors (like panel-layer1), generated by mixin */
  .user-page .telar-widget-carousel .carousel-caption-below {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
  }
  .user-page .telar-widget-carousel .carousel-caption-below small,
  .user-page .telar-widget-carousel .carousel-caption-below .caption-credit {
    color: rgba(255, 255, 255, 0.7);
  }
  .user-page .telar-widget-accordion .accordion-item {
    background: var(--color-panel-layer2-bg);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .user-page .telar-widget-accordion .accordion-button {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-on-panel-layer2);
  }
  .user-page .telar-widget-accordion .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-on-panel-layer2);
  }
  .user-page .telar-widget-accordion .accordion-body {
    color: var(--color-on-panel-layer2);
  }
  .user-page .telar-widget-tabs {
    background: transparent;
    border: none;
  }
  .user-page .telar-widget-tabs .nav-tabs {
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  .user-page .telar-widget-tabs .nav-tabs .nav-item {
    margin: 0;
  }
  .user-page .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link {
    margin-left: 0;
  }
  .user-page .telar-widget-tabs .nav-tabs .nav-link {
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1.25rem;
    margin: 0;
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    opacity: 0.7;
  }
  .user-page .telar-widget-tabs .nav-tabs .nav-link.active {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    border: none;
    opacity: 1;
  }
  .user-page .telar-widget-tabs .tab-content {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    border-radius: 0 0.5rem 0 0;
  }
  /* Site Description - Links appear darker than body text, show theme color and underline on hover */
  .site-description a {
    color: var(--color-body);
    text-decoration: none;
    transition: all 0.3s ease;
    filter: brightness(0.7);
  }
  @media (hover: hover) and (pointer: fine) {
    .site-description a:hover {
      color: var(--color-link);
      text-decoration: underline;
      filter: brightness(1);
    }
  }
  /* Story Cards - Paisajes Colonial Style */
  .story-card {
    display: block;
    color: inherit;
    transition: transform 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .story-card:hover {
      transform: translateY(-5px);
    }
  }
  .story-card .card {
    transition: box-shadow 0.3s ease;
    position: relative;
  }
  @media (hover: hover) and (pointer: fine) {
    .story-card:hover .card {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
  }
  .story-card .card-body {
    text-align: left;
  }
  .story-card h3 {
    font-family: var(--font-headings);
    color: var(--color-heading);
    font-size: 1.2rem;
    margin-top: 1rem;
    font-weight: 400;
  }
  .story-card-byline {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 0;
  }
  /* Demo story badge */
  .story-card .card.demo-story {
    background: rgba(0, 0, 0, 0.03);
  }
  .demo-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(108, 117, 125, 0.85);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    font-family: var(--font-body);
  }
  /* Inline demo badge for lists and inline contexts */
  .demo-badge-inline {
    display: inline-block;
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-family: var(--font-body);
  }
  .object-demo-label {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
  }
  .story-thumbnail {
    width: 100%;
    border-radius: 0.25rem 0.25rem 0 0;
  }
  .story-thumbnail-placeholder {
    font-family: var(--font-headings);
    font-size: 3rem;
    font-weight: 700;
    border-radius: 0.25rem 0.25rem 0 0;
  }
  /* Protected story thumbnail — keyhole on themed background */
  .story-protected-thumbnail {
    background: var(--color-panel-layer2-bg, #3d2645);
    border-radius: 0.25rem 0.25rem 0 0;
  }
  .story-protected-thumbnail .protected-keyhole {
    width: 48px;
    height: 72px;
    opacity: 0.9;
  }
  /* Story Byline */
  .story-byline {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }
  /* Collection Gallery */
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
  }
  .collection-item {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    position: relative;
  }
  @media (hover: hover) and (pointer: fine) {
    .collection-item:hover {
      transform: translateY(-5px);
    }
  }
  .collection-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
  }
  .collection-item h3 {
    font-size: 1.2rem;
    margin-top: 1rem;
  }
  .video-thumbnail,
  .audio-thumbnail {
    height: 250px;
    background: var(--color-button-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .media-type-icon {
    color: var(--color-on-button);
    width: 72px;
    height: 72px;
  }
  .featured-objects-grid .video-thumbnail,
  .featured-objects-grid .audio-thumbnail {
    height: auto;
    aspect-ratio: 1;
    border-radius: 8px;
  }
  .featured-objects-grid .media-type-icon {
    width: 48px;
    height: 48px;
  }
  .story-card .video-thumbnail,
  .story-card .audio-thumbnail {
    height: auto;
    border-radius: 0;
  }
  .story-card .media-type-icon {
    width: 48px;
    height: 48px;
  }
  /* Glossary Index */
  .glossary-list {
    padding: 2rem 0;
  }
  .glossary-letter {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--color-heading);
    border-bottom: 2px solid var(--color-heading);
    padding-bottom: 0.5rem;
  }
  .glossary-term {
    margin-bottom: 1rem;
    padding: 1rem;
    border-left: 3px solid var(--color-secondary);
    background: #f8f9fa;
  }
  .glossary-term h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }
  .glossary-term-link {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-link);
    text-decoration: none;
    display: inline;
    transition: color 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .glossary-term-link:hover {
      color: var(--color-link);
      text-decoration: underline;
      opacity: 0.8;
    }
  }
  /* Glossary kinds. The page renders these elements only when it lists more
     than the default kind, so a glossary of key terms alone is unaffected. A
     kind heading sits above the letter headings under it. */
  .glossary-section + .glossary-section {
    margin-top: 4rem;
  }
  .glossary-section-heading {
    margin-top: 2rem;
    font-size: 2.25rem;
    color: var(--color-heading);
  }
  .glossary-section .glossary-letter {
    margin-top: 2rem;
    font-size: 1.5rem;
  }
  /* Global Button Styling - Rounded like panel-trigger buttons */
  .btn {
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
  /* Theme-aware button colors. These buttons render as `<a class="btn btn-primary">`;
     this layer comes after Bootstrap's, so its rule wins without `!important`. */
  .btn-primary {
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
    color: var(--color-on-button);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
      background-color: var(--color-button-bg);
      border-color: var(--color-button-bg);
      opacity: 0.9;
      color: var(--color-on-button);
    }
  }
  .btn-primary:focus,
  .btn-primary:active {
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
    opacity: 0.9;
    color: var(--color-on-button);
  }
  /* Telar Alert Standardization */
  .telar-alert {
    max-width: 900px;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
  }
  @media (max-width: 991.98px) {
    .navbar-toggler {
      border-radius: 50px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      width: 48px;
      height: 48px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  @media (max-width: 991.98px) and (hover: hover) and (pointer: fine) {
    .navbar-toggler:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  @media (max-width: 991.98px) {
    .navbar-toggler:focus {
      box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
    }
    .navbar-toggler .navbar-toggler-icon {
      width: 1.3rem;
      height: 1.3rem;
    }
  }
  @media (max-width: 991px) {
    .navbar-collapse .navbar-nav {
      text-align: center;
    }
    .navbar-collapse .navbar-nav .nav-item .nav-link {
      font-size: 1.1rem;
      padding: 0.75rem 1rem;
    }
  }
  /* Mobile responsive grid - override auto-fill behavior */
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    .collection-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .collection-item img {
      height: 180px;
    }
    /* Glossary Index - reduce spacing on mobile */
    .glossary-letter {
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }
    .glossary-term {
      margin-bottom: 0.5rem;
      padding: 0.75rem;
    }
    .glossary-term h3 {
      font-size: 1.1rem;
    }
    .glossary-term-link {
      font-size: 1rem;
    }
    .glossary-section-heading {
      font-size: 1.75rem;
    }
    .glossary-section .glossary-letter {
      font-size: 1.25rem;
    }
  }
  /* Single column for screens up to 441px (iPhone Pro Max at 440px stays 1 column) */
  @media (max-width: 441px) {
    .collection-grid {
      grid-template-columns: 1fr;
    }
    .collection-item img {
      height: 200px;
    }
  }
  /* Small Phones: 576px and below - adjust collection grid spacing */
  @media (max-width: 576px) {
    .collection-grid {
      gap: 0.75rem;
    }
    .collection-item img {
      height: 150px;
    }
  }
  /* ============================================================================
     Objects Browse & Search
     Mobile-first design with collapsible filter panel
     ============================================================================ */
  .objects-browse-search {
    margin-bottom: 1.5rem;
  }
  /* Results count */
  .objects-results-count {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
  }
  .objects-no-results {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #666;
    padding: 2rem 0;
    text-align: center;
  }
  /* Active filters area */
  .objects-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .objects-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .objects-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-heading);
    color: var(--color-on-heading);
    border-radius: 50px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: default;
  }
  .objects-filter-chip-remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-filter-chip-remove:hover {
      opacity: 1;
    }
  }
  .objects-clear-all {
    background: #e8e8e8;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #333;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-clear-all:hover {
      background: #d8d8d8;
    }
  }
  /* Search input */
  .objects-search-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
  }
  .objects-search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 1rem;
    background: #f8f8f8;
    transition: border-color 0.2s, background-color 0.2s;
  }
  .objects-search-input:focus {
    outline: none;
    border-color: #2c3e50;
    background: #fff;
  }
  .objects-search-input::placeholder {
    color: #999;
  }
  .objects-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-search-clear:hover {
      color: #666;
    }
  }
  /* Filters wrapper - contains mobile toggle and content */
  .objects-filters-wrapper {
    margin-top: 1rem;
  }
  /* Mobile toggle pill */
  .objects-filters-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #e8e8e8;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-filters-mobile-toggle:hover {
      background: #d8d8d8;
    }
  }
  .objects-filter-chevron {
    transition: transform 0.2s;
  }
  .objects-filters-mobile-toggle[aria-expanded=true] .objects-filter-chevron {
    transform: rotate(180deg);
  }
  /* Filters content - hidden on mobile by default */
  .objects-filters-content {
    display: none;
    padding: 1rem;
    margin-top: 0.5rem;
    background: #f8f8f8;
    border-radius: 12px;
  }
  .objects-filters-content.show {
    display: block;
  }
  /* Filter by heading - hidden on mobile, shown on desktop */
  .objects-filter-heading {
    display: none;
    font-family: var(--font-headings);
    font-size: 1.25rem;
    color: var(--color-heading);
    margin: 0 0 1rem 0;
  }
  /* Filter sections (Type, Creator, Period, Subjects) */
  .objects-filter-section {
    margin-bottom: 0.5rem;
  }
  .objects-filter-section:last-child {
    margin-bottom: 0;
  }
  .objects-filter-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-heading);
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-filter-section-toggle:hover {
      color: var(--color-heading);
    }
  }
  .objects-filter-indicator {
    font-size: 1rem;
    color: #999;
  }
  .objects-filter-section-toggle[aria-expanded=true] .objects-filter-indicator {
    content: "−";
  }
  /* Filter options - hidden by default, shown when expanded */
  .objects-filter-options {
    display: none;
    padding-top: 0.5rem;
    padding-left: 0.25rem;
  }
  .objects-filter-options.show,
  .objects-filter-section-toggle[aria-expanded=true] + .objects-filter-options {
    display: block;
  }
  .objects-filter-empty {
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
  }
  .objects-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-filter-option:hover {
      color: var(--color-heading);
    }
  }
  .objects-filter-option input[type=checkbox] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-heading);
  }
  .objects-filter-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .objects-filter-option-count {
    color: #999;
    font-size: 0.85rem;
  }
  /* Hidden objects (filtered out) */
  .collection-item[data-hidden=true] {
    display: none;
  }
  /* Layout container */
  .objects-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .objects-sidebar {
    width: 100%;
  }
  .objects-main {
    flex: 1;
    min-width: 0;
  }
  .objects-header {
    margin-bottom: 1rem;
  }
  .objects-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
  }
  .objects-sort {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
  }
  .objects-sort-label {
    color: #666;
    margin-right: 0.25rem;
  }
  .objects-sort-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--color-link);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-sort-btn:hover {
      color: var(--color-heading);
      text-decoration: underline;
    }
  }
  .objects-sort-btn.active {
    color: var(--color-heading);
    font-weight: 600;
    cursor: pointer; /* Still clickable to toggle direction */
  }
  @media (hover: hover) and (pointer: fine) {
    .objects-sort-btn.active:hover {
      text-decoration: none;
    }
  }
  /* Hide arrow on inactive buttons */
  .objects-sort-arrow {
    display: none;
    margin-left: 0.15rem;
  }
  /* Show arrow only on active button */
  .objects-sort-btn.active .objects-sort-arrow {
    display: inline;
  }
  .objects-sort-divider {
    color: #ccc;
  }
  /* Desktop: sidebar layout (992px+) */
  @media (min-width: 992px) {
    .objects-layout {
      flex-direction: row;
      gap: 2rem;
    }
    .objects-main {
      order: 1; /* Grid on left */
      flex: 1;
      min-width: 0;
    }
    /* Grid with sidebar: cap card width at 255px */
    .objects-main .collection-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 255px));
    }
    .objects-sidebar {
      order: 2; /* Sidebar on right */
      width: 250px;
      flex-shrink: 0;
      position: sticky;
      top: 1rem;
      align-self: flex-start;
      max-height: calc(100vh - 2rem);
      overflow-y: auto;
    }
    /* dvh override for objects sidebar sticky max-height. */
    @supports (height: 100dvh) {
      .objects-sidebar {
        max-height: calc(100dvh - 2rem);
      }
    }
    /* Hide mobile toggle on desktop */
    .objects-filters-mobile-toggle {
      display: none;
    }
    /* Show filters content directly on desktop */
    .objects-filters-content {
      display: block;
      padding: 0;
      margin-top: 1rem;
      background: transparent;
      border-radius: 0;
    }
    /* Show "Filter by" heading on desktop */
    .objects-filter-heading {
      display: block;
    }
    .objects-search-wrapper {
      margin-bottom: 0;
    }
    .objects-filters-wrapper {
      margin-top: 1.5rem;
    }
    /* Hide sidebar chips on desktop - only show main area chips */
    #objects-sidebar-active-filters {
      display: none;
    }
  }
  /* Tablet adjustments (768px - 991px) */
  @media (max-width: 991px) {
    .objects-results-count {
      font-size: 0.85rem;
    }
    /* On mobile/tablet, hide main area chips - show sidebar chips instead */
    #objects-active-filters {
      display: none;
    }
    /* Add space between search and active filters on mobile */
    #objects-sidebar-active-filters {
      margin-top: 0.75rem;
    }
  }
  /* Mobile adjustments (768px and below) */
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    .objects-filter-chip {
      font-size: 0.8rem;
      padding: 0.3rem 0.6rem;
    }
  }
  /* Small phones (576px and below) */
  @media (max-width: 576px) {
    .objects-search-input {
      font-size: 0.95rem;
      padding: 0.65rem 2.25rem 0.65rem 0.875rem;
    }
  }
  /* ==========================================================================
     Featured Objects Grid (Homepage) — v0.8.0
     Smaller cards for homepage sample display
     ========================================================================== */
  .featured-objects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(167px, 170px));
    gap: 1.5rem;
  }
  .featured-objects-grid .collection-item {
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .featured-objects-grid .collection-thumbnail {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
  }
  .featured-objects-grid .featured-iiif-thumbnail {
    width: 100%;
    height: 100%;
  }
  .featured-objects-grid .collection-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .featured-objects-grid .collection-info {
    padding-top: 0.75rem;
  }
  .featured-objects-grid .collection-title {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: var(--color-heading);
  }
  .featured-objects-grid .collection-meta {
    margin: 0;
    color: #666;
    font-size: 0.75rem;
  }
  /* ==========================================================================
     Collection Mode — v1.1.0
     When site.collection_mode is true, the homepage
     reorders: objects lead with large .story-card treatment (reusing existing
     .story-card rules verbatim — no new CSS needed for the top grid), and
     stories drop into a small .featured-objects-grid.collection-mode-stories
     grid below. These rules add only the tweaks needed to host stories
     (which have a longer byline than object metadata) inside that small grid.
     ========================================================================== */
  .featured-objects-grid.collection-mode-stories {
    /* Reuse the auto-fill minmax(167px, 170px) grid from the base rule. */
  }
  .featured-objects-grid.collection-mode-stories .collection-item {
    position: relative; /* anchor for .demo-badge on demo stories */
  }
  .featured-objects-grid.collection-mode-stories .collection-item.demo-story {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
  }
  .featured-objects-grid.collection-mode-stories .collection-item .demo-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(108, 117, 125, 0.85);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    z-index: 2;
  }
  .featured-objects-grid.collection-mode-stories .collection-item .story-protected-thumbnail {
    aspect-ratio: 1;
    width: 100%;
    background: var(--color-heading);
  }
  .featured-objects-grid.collection-mode-stories .collection-item .story-thumbnail-placeholder {
    aspect-ratio: 1;
    width: 100%;
  }
  .featured-objects-grid.collection-mode-stories .collection-title {
    /* Slightly larger than default collection-title to give story titles breathing room */
    font-size: 0.95rem;
    font-weight: 500;
  }
  .featured-objects-grid.collection-mode-stories .collection-meta {
    /* Story bylines can be longer than object period/creator — allow two lines before truncating */
    font-size: 0.75rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/**
 * Story Layout
 *
 * Full-viewport card-stack layout for Telar story pages. Viewer plates fill
 * the entire viewport as backgrounds; text cards float over them on the left.
 * All transitions are pure CSS slide animations — no fading, no opacity changes.
 *
 * Also here: button navigation, btn-home, story unlock overlay,
 * embed-mode styles, and height-based responsive tiers.
 *
 * @version v1.8.0
 */
@layer telar-components {
  .story-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
  }
  @supports (height: 100dvh) {
    .story-container {
      height: 100dvh;
    }
  }
  .scroll-surface {
    position: relative;
    width: 1px;
    pointer-events: none;
  }
  .card-stack {
    position: absolute;
    inset: 0;
    overflow: visible;
    --card-motion-duration: 0.5s;
    --card-motion-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .card-stack.is-scrubbing .viewer-plate, .card-stack.is-scrubbing .text-card {
    transition: none;
  }
  .card-stack.is-scrubbing .title-card {
    transition: none;
  }
  .viewer-plate {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform var(--card-motion-duration) var(--card-motion-easing);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15), 0 -6px 24px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .viewer-plate.is-active {
    transform: translateY(0);
  }
  .viewer-plate .viewer-instance {
    width: 100%;
    height: 100%;
  }
  .viewer-plate .viewer-instance .openseadragon-container {
    background: #fff url("../img/background-gris.svg") repeat !important;
    background-size: 20px auto !important;
  }
  .viewer-plate .viewer-instance .openseadragon-canvas canvas {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
  }
  .viewer-plate[data-loading]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: 1;
    pointer-events: none;
  }
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .viewer-plate.video-plate {
    background: #fff url("../img/background-gris.svg") repeat;
    background-size: 20px auto;
  }
  .viewer-plate.video-plate .video-iframe {
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    border: none;
    overflow: hidden;
  }
  .viewer-plate.video-plate .video-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  .viewer-plate.video-plate .video-iframe.video-iframe--letterbox {
    background: #000;
  }
  .viewer-plate.video-plate .clip-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 300ms ease-in;
    pointer-events: none;
  }
  .viewer-plate.video-plate .clip-end-overlay.visible {
    opacity: 1;
  }
  .waveform-container {
    position: absolute;
    top: 50%;
    left: calc(var(--telar-card-side-left) + var(--telar-card-side-width) + 1%);
    width: calc(100% - var(--telar-card-side-left) - var(--telar-card-side-width) - 1%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
  }
  .audio-controls {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    bottom: calc(25% - 48px);
    right: min(40% + 16px, 100% - calc(var(--telar-card-side-left) + var(--telar-card-side-width) + 1%) - 16px - 156px);
  }
  .audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .audio-btn svg {
    flex-shrink: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .audio-btn:hover {
      background: rgba(255, 255, 255, 0.85);
      transform: scale(1.08);
    }
  }
  .audio-btn:active {
    transform: scale(0.95);
  }
  .audio-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }
  .audio-elapsed {
    position: absolute;
    z-index: 1;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 0.4rem 0.85rem;
    pointer-events: none;
    bottom: calc(25% - 48px);
    right: 16px;
  }
  .viewer-plate.audio-plate[data-media-arrangement=below] .waveform-container {
    top: var(--telar-audio-wave-top);
    left: var(--telar-audio-wave-left);
    width: var(--telar-audio-wave-width);
    transform: none;
  }
  .viewer-plate.audio-plate[data-media-arrangement=below] .audio-controls {
    bottom: var(--telar-audio-controls-bottom);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .viewer-plate.audio-plate[data-media-arrangement=below] .audio-elapsed {
    bottom: var(--telar-audio-controls-bottom);
  }
  .audio-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .audio-play-overlay button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 2rem;
    color: var(--color-link);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .audio-play-overlay button:hover {
      background: rgb(255, 255, 255);
    }
  }
  .audio-play-overlay button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }
  .audio-play-overlay.hidden {
    display: none;
  }
  .video-play-overlay {
    pointer-events: auto;
  }
  @media (hover: hover) and (pointer: fine) {
    .video-play-overlay button:hover {
      background: rgba(255, 255, 255, 0.85);
    }
  }
  .video-play-overlay button:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }
  .viewer-plate .telar-alert {
    position: absolute;
    z-index: 2;
    text-align: center;
    top: 50%;
    left: calc((var(--telar-card-side-left) + var(--telar-card-side-width) + 100%) / 2);
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 400px;
  }
  .audio-clip-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 300ms ease-in;
    pointer-events: none;
  }
  .audio-clip-end-overlay.visible {
    opacity: 1;
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    .audio-btn {
      min-width: 44px;
      min-height: 44px;
      font-size: 1.1rem;
    }
    .audio-controls {
      right: 16px;
      bottom: calc(25% - 56px);
    }
    .audio-elapsed {
      right: 16px;
      bottom: calc(25% - 56px);
    }
  }
  .text-card {
    container-type: inline-size;
    position: absolute;
    left: 3%;
    width: var(--telar-card-side-width);
    background: #fff;
    border-radius: 3px;
    border: none;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }
  .text-card > :only-child {
    margin-block: auto;
  }
  .text-card {
    pointer-events: auto;
    transform: translateY(100vh);
    transition: transform var(--card-motion-duration) var(--card-motion-easing);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  }
  .text-card.is-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  }
  .text-card.is-stacked {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  }
  .text-card .step-question {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
  }
  .text-card .step-answer {
    --telar-answer-base-size: 1rem;
    font-size: var(--telar-answer-base-size);
    line-height: 1.6;
    color: var(--color-body);
  }
  .text-card .step-answer p {
    margin: 0;
  }
  .text-card .step-answer p + p {
    margin-top: 10px;
  }
  .text-card .step-answer--long {
    font-size: calc(var(--telar-answer-base-size) * 0.9);
  }
  .text-card .step-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .text-card .panel-trigger {
    padding: 0.5rem 1.25rem;
    background: var(--color-button-bg);
    color: var(--color-on-button);
    font-weight: 600;
    border-radius: 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .text-card .panel-trigger:hover {
      opacity: 0.85;
    }
  }
  @container (max-width: 480px) {
    .text-card {
      padding: 1.3rem;
    }
    .text-card .step-question {
      font-size: 1.35rem;
      margin-bottom: 0.65rem;
    }
    .text-card .step-answer {
      --telar-answer-base-size: 0.95rem;
    }
  }
  @container (max-width: 360px) {
    .text-card {
      padding: 1rem;
    }
    .text-card .step-question {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }
    .text-card .step-answer {
      --telar-answer-base-size: 0.85rem;
    }
  }
  .story-intro {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--card-motion-duration) var(--card-motion-easing);
  }
  .intro-floating-card {
    text-align: center;
    max-width: 550px;
    width: 90%;
    padding: 2.5rem 3rem;
  }
  .intro-floating-card .intro-title {
    font-family: var(--font-headings);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  .intro-floating-card .intro-subtitle {
    font-family: var(--font-headings);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
  }
  .intro-floating-card .intro-demo-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
  }
  .intro-floating-card .intro-byline {
    font-size: 1rem;
    color: #5a6c7d;
    margin-bottom: 0.75rem;
    font-weight: 400;
  }
  .intro-floating-card .intro-description {
    font-size: 1.1rem;
    color: #5a6c7d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }
  .intro-floating-card .intro-hint {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #9aabbf;
  }
  .intro-floating-card .hint-mobile {
    display: none;
  }
  :root[data-navigation=buttons] .intro-floating-card .hint-desktop {
    display: none;
  }
  :root[data-navigation=buttons] .intro-floating-card .hint-mobile {
    display: inline;
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    :root:not([data-navigation]) .intro-floating-card .hint-desktop {
      display: none;
    }
    :root:not([data-navigation]) .intro-floating-card .hint-mobile {
      display: inline;
    }
  }
  .intro-floating-card .alert {
    text-align: left;
    font-size: 0.9rem;
  }
  .story-intro--toc {
    background: var(--color-panel-layer2-bg);
    padding-top: 100px;
  }
  .story-intro--toc .intro-floating-card .intro-title {
    color: var(--color-on-panel-layer2);
  }
  .story-intro--toc .intro-floating-card .intro-subtitle,
  .story-intro--toc .intro-floating-card .intro-byline,
  .story-intro--toc .intro-floating-card .intro-description {
    color: var(--color-on-panel-layer2);
    opacity: 0.85;
  }
  .story-intro--toc .intro-floating-card .intro-demo-label {
    color: var(--color-on-panel-layer2);
    opacity: 0.7;
  }
  .story-intro--toc .intro-floating-card .intro-hint {
    color: var(--color-on-panel-layer2);
    opacity: 0.5;
  }
  .intro-toc {
    margin-top: 3.5rem;
    text-align: center;
  }
  .intro-toc .intro-toc-heading {
    font-family: var(--font-headings);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-on-panel-layer2);
    opacity: 0.5;
    margin-bottom: 0.75rem;
  }
  .intro-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .intro-toc li {
    margin-bottom: 0.4rem;
  }
  .intro-toc .intro-toc-link {
    color: var(--color-on-panel-layer2);
    text-decoration: none;
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  @media (hover: hover) and (pointer: fine) {
    .intro-toc .intro-toc-link:hover {
      opacity: 1;
      text-decoration: underline;
    }
  }
  .title-card {
    position: absolute;
    inset: 0;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100vh);
    transition: transform var(--card-motion-duration) var(--card-motion-easing);
  }
  .title-card .title-card-inner {
    text-align: center;
    max-width: 550px;
    width: 90%;
    padding: 2.5rem 3rem;
  }
  .title-card .title-card-heading {
    font-family: var(--font-headings);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  .title-card .title-card-body {
    font-size: 1.1rem;
    color: #5a6c7d;
    line-height: 1.6;
  }
  .title-card.is-active {
    transform: translateY(0);
  }
  .title-card.is-stacked {
    transform: translateY(0);
  }
  .btn-nav-back {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-nav-back:hover {
      background: rgba(255, 255, 255, 0.85);
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .btn-nav-back {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    min-width: 9rem;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
    z-index: 9900;
    display: flex;
  }
  .btn-nav-icon {
    display: none;
  }
  .step-counter {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.6);
    color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 9900;
    pointer-events: none;
    backdrop-filter: blur(4px);
  }
  .object-credits-badge {
    position: fixed;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    right: max(0.75rem, env(safe-area-inset-right));
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.6);
    color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    font-size: 0.75rem;
    z-index: 9900;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100% - 2rem);
  }
  .credits-dismiss-btn {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .credits-dismiss-btn:hover {
      color: rgb(255, 255, 255);
    }
  }
  .hide-step-indicators .step-indicator {
    display: none;
  }
  .mobile-nav {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: 50%;
    transform: translateY(50%);
    z-index: 9900;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .mobile-nav button {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 1.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (hover: hover) and (pointer: fine) {
    .mobile-nav button:hover:not(:disabled) {
      background: rgb(255, 255, 255);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
  .mobile-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    .btn-nav-back {
      min-height: 44px;
      min-width: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      top: 1rem;
      left: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      border: 2px solid rgba(0, 0, 0, 0.1);
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .btn-nav-text {
      display: none;
    }
    .btn-nav-back.is-home .btn-nav-icon--home,
    .btn-nav-back.is-start .btn-nav-icon--start {
      display: block;
      font-size: 1.5rem;
    }
    .step-counter {
      font-size: 0.7rem;
      padding: 0.3rem 0.7rem;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }
    .object-credits-badge {
      font-size: 0.65rem;
      padding: 0.3rem 0.6rem;
      max-width: calc(100% - 1rem);
      bottom: 0.5rem;
      right: 0.5rem;
    }
    #object-credits-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: calc(100vw - 5rem);
    }
    .text-card {
      left: 1rem;
      width: calc(100% - 2rem);
      top: auto !important;
      bottom: max(1rem, env(safe-area-inset-bottom));
      max-height: 40vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transition: transform var(--card-motion-duration) var(--card-motion-easing);
    }
    @supports (height: 100dvh) {
      .text-card {
        max-height: 40dvh;
      }
    }
    .viewer-plate[data-card-type=youtube] + .text-card,
    .viewer-plate[data-card-type=vimeo] + .text-card,
    .viewer-plate[data-card-type=google-drive] + .text-card,
    .viewer-plate[data-card-type=audio] + .text-card {
      max-height: 35vh;
    }
    @supports (height: 100dvh) {
      .viewer-plate[data-card-type=youtube] + .text-card,
      .viewer-plate[data-card-type=vimeo] + .text-card,
      .viewer-plate[data-card-type=google-drive] + .text-card,
      .viewer-plate[data-card-type=audio] + .text-card {
        max-height: 35dvh;
      }
    }
    .text-card.is-active {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
    }
    .waveform-container {
      left: 5%;
      width: 90%;
      top: 27%;
      transform: translateY(-50%);
    }
    .audio-controls {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(35vh + 5rem);
    }
    @supports (height: 100dvh) {
      .audio-controls {
        bottom: calc(35dvh + 5rem);
      }
    }
    .audio-play-overlay {
      display: none;
    }
    .viewer-plate .telar-alert {
      left: 50%;
      width: calc(100% - 4rem);
      top: 25%;
    }
  }
  @media (max-height: 480px) {
    .text-card {
      left: 3%;
      width: 37%;
      top: auto !important;
      bottom: auto;
      height: auto !important;
      max-height: calc(100vh - 2rem);
    }
    @supports (height: 100dvh) {
      .text-card {
        max-height: calc(100dvh - 2rem);
      }
    }
  }
  .story-unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: var(--color-panel-layer2-bg, #3d2645);
  }
  .story-unlock-overlay.show {
    opacity: 1;
  }
  .story-unlock-overlay.show .unlock-content {
    opacity: 1;
    transform: translateY(0);
  }
  .story-unlock-overlay.show .unlock-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
  }
  .story-unlock-overlay.show .unlock-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
  .story-unlock-overlay.show .unlock-description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }
  .story-unlock-overlay.show .unlock-form {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }
  .story-unlock-overlay.show .unlock-back-link {
    opacity: 1;
    transition-delay: 0.5s;
  }
  .story-unlock-overlay.success .unlock-icon svg {
    animation: unlock-success 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .unlock-content {
    position: relative;
    text-align: center;
    padding: 3rem 2.5rem;
    max-width: 420px;
    color: #f5f0e8;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .unlock-icon {
    margin-bottom: 2rem;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .unlock-icon svg {
    width: 144px;
    height: 216px;
  }
  .unlock-title {
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    color: #f5f0e8;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .unlock-description {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    color: rgba(245, 240, 232, 0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .unlock-form {
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .unlock-form .input-group {
    display: flex;
    margin-bottom: 1.25rem;
    border-radius: 50px;
    overflow: hidden;
  }
  .unlock-form .input-group input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-right: none;
    border-radius: 50px 0 0 50px;
    color: #fff;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.25s ease;
  }
  .unlock-form .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  .unlock-form .input-group input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
  }
  .unlock-form .input-group button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-left: none;
    border-radius: 0 50px 50px 0;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 1.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .unlock-form .input-group button:hover {
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.9);
    }
  }
  .unlock-form .input-group button i {
    font-size: 1.1rem;
  }
  .unlock-form.shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  .unlock-error {
    color: #f8d7da;
    background: rgba(220, 53, 69, 0.3);
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }
  .unlock-button {
    width: 100%;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: var(--color-button-bg);
    color: var(--color-on-button);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .unlock-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }
  .unlock-button:active {
    transform: translateY(0);
  }
  .unlock-back-link {
    display: inline-block;
    color: rgba(245, 240, 232, 0.5);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.25s ease;
    opacity: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .unlock-back-link:hover {
      color: rgba(245, 240, 232, 0.85);
      background: rgba(245, 240, 232, 0.05);
    }
  }
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 50%, 90% {
      transform: translateX(-8px);
    }
    30%, 70% {
      transform: translateX(8px);
    }
  }
  @keyframes unlock-success {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(1.15) rotate(-5deg);
    }
    60% {
      transform: scale(1.1) rotate(3deg);
    }
    100% {
      transform: scale(1);
      opacity: 0.6;
    }
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    .unlock-content {
      padding: 2rem 1.5rem;
      max-width: 90%;
    }
    .unlock-icon svg {
      width: 120px;
      height: 180px;
    }
    .unlock-title {
      font-size: 1.6rem;
    }
    .unlock-description {
      font-size: 0.95rem;
      margin-bottom: 2rem;
    }
    .unlock-form .input-group input {
      padding: 0.875rem 1rem;
    }
    .unlock-button {
      padding: 0.875rem 1.5rem;
    }
  }
  .embed-mode .story-unlock-overlay .unlock-content {
    padding: 1.5rem;
  }
  .embed-mode .story-unlock-overlay .unlock-icon {
    margin-bottom: 1rem;
  }
  .embed-mode .story-unlock-overlay .unlock-icon svg {
    width: 96px;
    height: 144px;
  }
  .embed-mode .story-unlock-overlay .unlock-title {
    font-size: 1.25rem;
  }
  .embed-mode .story-unlock-overlay .unlock-description {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }
}
/**
 * Panels
 *
 * The information panels that slide in from the right side of the screen. Telar
 * has three panel types: Layer 1 (light background, broad coverage), Layer 2
 * (dark background, narrower, stacks on top of Layer 1), and Glossary (cream
 * background, opens from any context). This partial covers the panel base
 * styling, header and body layout, trigger buttons, the scroll-lock backdrop,
 * and content elements that appear inside panels: footnotes, blockquotes,
 * hyperlinks, images, and glossary inline links.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* Panel stacking — z-index 9910 sits above all scene cards (100–9899)
     and UI chrome (9900) but below the share modal (9950). */
  .offcanvas {
    z-index: 9910;
  }
  /* Panels - Theme-aware trigger buttons */
  .panel-trigger {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--color-button-bg);
    color: var(--color-on-button);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .panel-trigger:hover {
      background: var(--color-button-bg);
      color: var(--color-on-button);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      opacity: 0.9;
    }
  }
  /* Layer 1 Panel - Light blue background, wide coverage */
  #panel-layer1 {
    width: 65%;
    max-width: 800px;
    background: var(--color-panel-layer1-bg);
    backdrop-filter: blur(8px);
    border-left: none;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  }
  #panel-layer1 .offcanvas-header {
    background: var(--color-panel-layer1-bg);
    border-bottom: none;
    padding: 2rem 2rem 1rem 2rem;
  }
  #panel-layer1 .offcanvas-body {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-layer1 .offcanvas-title {
    color: var(--color-on-panel-layer1);
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 600;
  }
  /* Layer 2 Panel - Dark purple background, narrower than layer1 */
  #panel-layer2 {
    width: 55%;
    max-width: 750px;
    background: var(--color-panel-layer2-bg);
    backdrop-filter: blur(8px);
    border-left: none;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  }
  #panel-layer2 .offcanvas-header {
    background: var(--color-panel-layer2-bg);
    border-bottom: none;
    padding: 2rem 2rem 1rem 2rem;
  }
  #panel-layer2 .offcanvas-body {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-layer2 .offcanvas-title {
    color: var(--color-on-panel-layer2);
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 600;
  }
  #panel-layer2 .offcanvas-body h2,
  #panel-layer2 .offcanvas-body h3,
  #panel-layer2 .offcanvas-body h4 {
    color: var(--color-on-panel-layer2);
  }
  /* A covered panel is inert (telar.js), which does not change how it looks, and
     the panel over it leaves a strip of it in view. Its controls are hidden so
     none shows in that strip; they go once the panel over it has slid in
     (Bootstrap's 0.3s offcanvas transition) and return as soon as it leaves. */
  .offcanvas[inert] :is(button, a, [tabindex]:not([tabindex="-1"])) {
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }
  /* Panel text max-width for readability (centered, images/widgets span full width) */
  .offcanvas-body p,
  .offcanvas-body ul,
  .offcanvas-body ol,
  .offcanvas-body blockquote,
  .offcanvas-body h1,
  .offcanvas-body h2,
  .offcanvas-body h3,
  .offcanvas-body h4,
  .offcanvas-body h5,
  .offcanvas-body h6 {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Increase h1 spacing in panels for better visual hierarchy */
  .offcanvas-body h1 {
    margin-bottom: 1.5rem;
  }
  /* Layer 2 panel - narrower text for better proportions */
  #panel-layer2 .offcanvas-body p,
  #panel-layer2 .offcanvas-body ul,
  #panel-layer2 .offcanvas-body ol,
  #panel-layer2 .offcanvas-body blockquote,
  #panel-layer2 .offcanvas-body h1,
  #panel-layer2 .offcanvas-body h2,
  #panel-layer2 .offcanvas-body h3,
  #panel-layer2 .offcanvas-body h4,
  #panel-layer2 .offcanvas-body h5,
  #panel-layer2 .offcanvas-body h6 {
    max-width: 600px;
  }
  /* Widgets - constrain to same width as text */
  .offcanvas-body .telar-widget-accordion,
  .offcanvas-body .telar-widget-carousel,
  .offcanvas-body .telar-widget-tabs,
  .offcanvas-body .telar-widget-bibliography {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }
  #panel-layer2 .offcanvas-body .telar-widget-accordion,
  #panel-layer2 .offcanvas-body .telar-widget-carousel,
  #panel-layer2 .offcanvas-body .telar-widget-tabs,
  #panel-layer2 .offcanvas-body .telar-widget-bibliography {
    max-width: 600px;
  }
  /* Panel buttons styling */
  #panel-layer1 .btn-close,
  #panel-layer2 .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.7;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-layer1 .btn-close:hover,
    #panel-layer2 .btn-close:hover {
      opacity: 1;
    }
  }
  /* Back buttons — pill style, adapted to panel background */
  #panel-layer1-back,
  #panel-layer2-back {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-layer1-back:hover,
    #panel-layer2-back:hover {
      background: rgba(255, 255, 255, 0.35);
      color: #ffffff;
    }
  }
  #panel-glossary-back {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-glossary-back:hover {
      background: rgba(0, 0, 0, 0.15);
      color: rgba(0, 0, 0, 0.9);
    }
  }
  /* Glossary Panel - Cream/beige background */
  #panel-glossary {
    width: 50%;
    max-width: 700px;
    background: var(--color-panel-glossary-bg);
    border-left: none;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  }
  #panel-glossary .offcanvas-header {
    background: var(--color-panel-glossary-bg);
    border-bottom: none;
    padding: 2rem 2rem 1rem 2rem;
  }
  #panel-glossary .offcanvas-body {
    background: var(--color-panel-glossary-bg);
    color: var(--color-on-panel-glossary);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-glossary .offcanvas-title {
    color: var(--color-on-panel-glossary);
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 600;
  }
  #panel-glossary .btn-close {
    filter: none;
    opacity: 0.7;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-glossary .btn-close:hover {
      opacity: 1;
    }
  }
  /* Glossary panel - narrower text for better proportions */
  #panel-glossary .glossary-term-prefix,
  #panel-glossary .offcanvas-title,
  #panel-glossary .offcanvas-body p,
  #panel-glossary .offcanvas-body ul,
  #panel-glossary .offcanvas-body ol,
  #panel-glossary .offcanvas-body blockquote,
  #panel-glossary .offcanvas-body h1,
  #panel-glossary .offcanvas-body h2,
  #panel-glossary .offcanvas-body h3,
  #panel-glossary .offcanvas-body h4,
  #panel-glossary .offcanvas-body h5,
  #panel-glossary .offcanvas-body h6 {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  #panel-glossary .offcanvas-body .telar-widget-accordion,
  #panel-glossary .offcanvas-body .telar-widget-carousel,
  #panel-glossary .offcanvas-body .telar-widget-tabs,
  #panel-glossary .offcanvas-body .telar-widget-bibliography {
    max-width: 550px;
  }
  /* Glossary Inline Links (in story panel content). The glossary callout is
     styled by _widgets.scss. */
  .glossary-inline-link:not(.glossary-callout) {
    background-color: var(--color-panel-glossary-bg);
    color: var(--color-on-panel-glossary);
    padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
    border-radius: 6px; /* Increased for more rounded corners */
    text-decoration: none;
    font-size: 0.95em;
    display: inline-block;
    transition: opacity 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .glossary-inline-link:not(.glossary-callout):hover {
      opacity: 0.85;
      text-decoration: none;
      color: var(--color-on-panel-glossary);
    }
  }
  /* Glossary Link Error Indicator (nonexistent terms) */
  .glossary-link-error {
    background-color: #fff3cd;
    color: #856404;
    padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
    border-radius: 6px; /* Increased for more rounded corners */
    border: 1px solid #ffc107;
    font-size: 0.95em;
    display: inline-block;
  }
  /* Footnotes Styling */
  /* Footnote reference links in text (superscript numbers) */
  .offcanvas-body a[href^="#_ftn"] {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    text-decoration: none;
    font-weight: 600;
    padding: 0 0.15em;
  }
  /* Layer 1 (light blue) footnote references */
  #panel-layer1 .offcanvas-body a[href^="#_ftn"] {
    color: var(--color-link);
  }
  /* Layer 2 (dark purple) footnote references */
  #panel-layer2 .offcanvas-body a[href^="#_ftn"] {
    color: var(--color-link);
  }
  /* Horizontal rule separator before footnotes */
  .offcanvas-body hr {
    margin: 2.5rem 0 1.5rem 0;
    border: 0;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    opacity: 0.5;
  }
  #panel-layer2 .offcanvas-body hr {
    border-top-color: rgba(255, 255, 255, 0.2);
  }
  /* Footnote section styling */
  .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    opacity: 0.9;
  }
  /* Footnote number at start of footnote */
  .offcanvas-body a[href^="#_ftnref"] {
    font-size: 0.85em;
    text-decoration: none;
    font-weight: 600;
    margin-right: 0.5em;
  }
  /* Layer 1 footnote numbers */
  #panel-layer1 .offcanvas-body a[href^="#_ftnref"] {
    color: var(--color-link);
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-layer1 .offcanvas-body a[href^="#_ftnref"]:hover {
      color: var(--color-heading);
      text-decoration: underline;
    }
  }
  /* Layer 2 footnote numbers */
  #panel-layer2 .offcanvas-body a[href^="#_ftnref"] {
    color: var(--color-link);
  }
  /* Blockquote Styling */
  .offcanvas-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid;
    font-style: italic;
    position: relative;
  }
  /* Layer 1 (light blue) blockquotes */
  #panel-layer1 .offcanvas-body blockquote {
    border-left-color: var(--color-heading);
    background: color-mix(in srgb, var(--color-heading) 5%, transparent);
    color: var(--color-heading);
  }
  /* Layer 2 (dark purple) blockquotes */
  #panel-layer2 .offcanvas-body blockquote {
    border-left-color: var(--color-panel-layer1-bg);
    background: color-mix(in srgb, var(--color-panel-layer1-bg) 10%, transparent);
    color: var(--color-on-panel-layer2);
  }
  /* Blockquote paragraph spacing */
  .offcanvas-body blockquote p {
    margin-bottom: 0;
  }
  .offcanvas-body blockquote p:last-child {
    margin-bottom: 0;
  }
  /* General Hyperlinks in Panels (non-footnote links) */
  .offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]):not(.glossary-callout) {
    color: var(--color-link);
    text-decoration: underline;
  }
  @media (hover: hover) and (pointer: fine) {
    .offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]):not(.glossary-callout):hover {
      opacity: 0.8;
    }
  }
  /* Panel Images - centered with max-height */
  .offcanvas-body img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 1rem auto;
  }
  /* Image figures with captions */
  .telar-image-figure {
    display: block;
    margin: 1rem auto;
    text-align: center;
  }
  .telar-image-figure img {
    margin: 0 auto 0.25rem auto;
  }
  .telar-image-caption {
    font-size: 1rem;
    opacity: 0.9;
    margin-top: 0.25rem;
    text-align: center;
    display: block;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
    font-weight: 400;
  }
  /* Narrow desktop — widen panels so stacked content isn't truncated. The lower
     bound is one pixel above the vertical-layout width: at and below that width,
     and at any width in a window of vertical aspect, the vertical-layout rule
     below sets every panel full width. */
  @media (min-width: 1025px) and (max-width: 1200px) {
    #panel-layer1 {
      width: 80%;
      max-width: none;
    }
    #panel-layer2 {
      width: 75%;
      max-width: none;
    }
    #panel-glossary {
      width: 70%;
      max-width: none;
    }
  }
  /* Mobile Responsive - Panel System */
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    /* Panel System - full width bottom sheets */
    /* Layer 1 Panel - most content, tallest panel */
    #panel-layer1 {
      width: 100%;
      height: 65vh;
      max-width: 100%;
      max-height: 65vh;
    }
    /* Layer 2 Panel - medium content */
    #panel-layer2 {
      width: 100%;
      height: 60vh;
      max-width: 100%;
      max-height: 60vh;
    }
    /* Glossary Panel - brief definitions, shortest panel */
    #panel-glossary {
      width: 100%;
      height: 55vh;
      max-width: 100%;
      max-height: 55vh;
    }
    /* dvh overrides for mobile panel heights — consolidated into a single
       @supports block for readability. The vh values above are the fallbacks
       for Firefox 97-100 and Chrome 99-107. */
    @supports (height: 100dvh) {
      #panel-layer1 {
        height: 65dvh;
        max-height: 65dvh;
      }
      #panel-layer2 {
        height: 60dvh;
        max-height: 60dvh;
      }
      #panel-glossary {
        height: 55dvh;
        max-height: 55dvh;
      }
    }
    /* Touch Target Optimization - 44x44px minimum for accessibility */
    .panel-trigger {
      min-height: 44px;
      min-width: 44px;
      padding: 0.75rem 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .offcanvas-header .btn-close {
      width: 33px;
      height: 33px;
      padding: 0.5rem;
    }
    /* Mobile Offcanvas Panel Positioning - Option 2B (Right-Slide with Fixed Size & Top/Bottom Gaps) */
    .offcanvas-end {
      position: fixed;
      right: 0;
      left: auto;
      box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 300ms ease-out;
      border-radius: 0;
      transform: translateX(100%);
    }
    .offcanvas-end.show {
      transform: translateX(0);
    }
    /* Layer 1 - "Go Deeper" panels */
    #panel-layer1.offcanvas-end {
      top: 12vh;
      height: 76vh;
      max-height: 76vh;
      width: 98vw;
      max-width: 98vw;
      z-index: 9910;
    }
    /* Layer 2 - "Learn More" panels */
    #panel-layer2.offcanvas-end {
      top: 10vh;
      height: 76vh;
      max-height: 76vh;
      width: 96vw;
      max-width: 96vw;
      z-index: 9911;
    }
    /* Glossary */
    #panel-glossary.offcanvas-end {
      top: 8vh;
      height: 76vh;
      max-height: 76vh;
      left: 6vw;
      width: 94vw;
      max-width: 94vw;
    }
    .offcanvas-body {
      overflow-y: auto;
    }
    /* Hide Back buttons on mobile - X button is sufficient */
    #panel-layer1-back,
    #panel-layer2-back,
    #panel-glossary-back {
      display: none;
    }
    /* Center close button when Back button is hidden */
    .offcanvas-header {
      justify-content: flex-end;
    }
    /* Unified panel scrolling - header transparent, buttons float over content */
    .offcanvas {
      display: flex;
      flex-direction: column;
    }
    .offcanvas-header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 10;
      background: transparent;
      border: none;
      padding: 1rem;
      padding-top: max(1rem, env(safe-area-inset-top));
      min-height: auto;
    }
    .offcanvas-body {
      flex: 1 1 auto;
      overflow-y: auto;
      position: static;
      padding: 1.5rem;
      padding-top: 1.5rem;
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
    /* Title is now inside body - add top margin to clear floating close button */
    .offcanvas-body .offcanvas-title {
      margin-top: max(3rem, env(safe-area-inset-top) + 2.5rem);
      margin-bottom: 1.5rem;
    }
    /* Float close button over content - match navigation button style */
    .offcanvas-header .btn-close {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    /* Show the dark X like arrows/home. The base #panel-layer1/#panel-layer2
       rules invert the icon white for the dark desktop panels (and
       #panel-glossary dims it); their ID specificity beats a class-level
       reset, so this one must match it or the X paints white on the white
       circle above. */
    #panel-layer1 .btn-close,
    #panel-layer2 .btn-close,
    #panel-glossary .btn-close {
      filter: none;
      opacity: 1;
    }
    /* Back button gets same treatment on desktop */
    .offcanvas-header .btn-outline-secondary {
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    /* Glossary inline links - slightly smaller on mobile */
    .glossary-inline-link:not(.glossary-callout),
    .glossary-link-error {
      padding: 0.1em 0.35em;
      font-size: 0.9em;
    }
  }
}
/**
 * Viewer
 *
 * Styles for the IIIF image viewer embedded in story and object pages.
 * The viewer wrapper (assets/js/telar-story/iiif-viewer.js) ships no
 * chrome of its own, so selector-based specificity is enough here —
 * no `!important` is needed.
 *
 * Container styles cover all three media types (image / video / audio).
 * The .multipage class is added by object.html's inline script when
 * wrapper.pages.length > 1 — it currently relaxes `overflow` so the
 * wrapper's pagination chrome can extend beyond the viewer's rounded
 * corners if it overflows. The pagination + error UI rules at the
 * bottom of the file style the wrapper's injected DOM directly.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* Viewer Containers */
  #viewer-container {
    width: 100%;
    height: 100%;
  }
  #object-viewer {
    width: 100%;
    border-radius: 4px;
    position: relative;
  }
  /* Image object page: the authoring aspect, white weave background, inset shadow.
   *
   * The shape is not decoration. An author reads x/y/zoom off this pane and
   * pastes them into a spreadsheet, and the zoom is a multiple of the fit in
   * *this* pane, while a story replays it against a frame of the authoring
   * aspect (AUTHORING_ASPECT in telar-story/authoring-frame.js). The two agree
   * for every image only when this pane has that aspect, so 1.053 here is that
   * constant, and tests/js/authoring-aspect-css.test.js fails if they differ.
   *
   * The width is capped, not the height: with `width: 100%` a height cap alone
   * clamps on a short window while the width does not, and the pane's shape
   * moves with the window. Capping the width by the same measure keeps the
   * shape and shrinks the pane instead. */
  #object-viewer.viewer-image {
    aspect-ratio: 1.053;
    max-width: min(100%, 84.24vh);
    overflow: hidden;
    background: #fff url("../img/background-gris.svg") repeat;
    background-size: 20px auto;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.12), inset 0 -2px 12px rgba(0, 0, 0, 0.08);
  }
  /* Multipage image objects: relax overflow so the wrapper's pagination
     chrome can extend beyond the viewer's rounded clipping if needed. */
  #object-viewer.viewer-image.multipage {
    overflow: visible;
  }
  /* Drop shadow on the IIIF image canvas (matches story plates) */
  #object-viewer.viewer-image .openseadragon-canvas canvas {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
  }
  /* Video object page: no fixed aspect ratio, transparent background */
  #object-viewer.viewer-video {
    background: transparent;
  }
  /* Vimeo max-height constraint for extreme aspect ratios */
  #object-viewer.viewer-video iframe {
    max-height: 80vh;
  }
  /* Audio object page: landscape strip, accent-tinted background set by JS */
  #object-viewer.viewer-audio {
    aspect-ratio: 3/2;
    max-height: 80vh;
    min-height: 80px;
    overflow: hidden;
    /* solid accent-tinted background set inline by JS (no weave-pattern image
       on the audio object viewer — see _layouts/object.html's viewer init) */
  }
  /* Object-page viewer: transparent OSD background so the weave pattern
     set on #object-viewer shows through. Story-plate equivalent lives in
     _story.scss alongside the .viewer-plate .viewer-instance weave rule. */
  #object-viewer .openseadragon-container {
    background: transparent;
  }
  /* Audio object page: frosted glass controls (matches story .audio-btn) */
  .audio-object-controls {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    bottom: 12px;
    right: 12px;
  }
  .audio-object-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .audio-object-btn svg {
    flex-shrink: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .audio-object-btn:hover {
      background: rgba(255, 255, 255, 0.85);
      transform: scale(1.08);
    }
  }
  .audio-object-btn:active {
    transform: scale(0.95);
  }
  .audio-object-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }
  /* Audio object page: overlaid time display */
  .audio-object-time {
    position: absolute;
    z-index: 10;
    bottom: 16px;
    left: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 4px;
  }
  /* ============================================================
     Custom IIIF viewer chrome (iiif-viewer.js)
     The wrapper appends .telar-iiif-pagination to its OSD container
     on multi-page manifests when constructed with { showChrome: true }
     (object.html).  Story pages pass showChrome:false, so this block
     only renders on object-detail pages.
     Pill design, expressed without forcing the cascade — selector
     specificity is sufficient.
     ============================================================ */
  .telar-iiif-pagination {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dedede;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .telar-iiif-pagination .prev-btn,
  .telar-iiif-pagination .next-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #333;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .telar-iiif-pagination .prev-btn:hover,
    .telar-iiif-pagination .next-btn:hover {
      background: #fff;
      border-color: #bbb;
    }
  }
  .telar-iiif-pagination .prev-btn:focus-visible,
  .telar-iiif-pagination .next-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
  }
  .telar-iiif-pagination .prev-btn:disabled,
  .telar-iiif-pagination .next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .telar-iiif-pagination .prev-btn svg,
  .telar-iiif-pagination .next-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
  .telar-iiif-pagination .page-input {
    width: 4rem;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 50px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #333;
    text-align: center;
    font: inherit;
  }
  .telar-iiif-pagination .page-input:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
  }
  .telar-iiif-pagination .page-input {
    /* Hide the native number-input spinner — the pill design predates it */
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .telar-iiif-pagination .page-input::-webkit-outer-spin-button, .telar-iiif-pagination .page-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  /* ============================================================
     Custom IIIF viewer error UI (iiif-viewer.js _injectErrorUI)
     Renders when manifest fetch fails (network error, mixed content,
     empty manifest, etc.). The reader sees this in place of a blank
     viewer. Palette mirrors Bootstrap's warning-alert variant.
     ============================================================ */
  .telar-iiif-error {
    padding: 1rem 1.25rem;
    margin: 0;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 0.25rem;
    color: #856404;
  }
  .telar-iiif-error strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
  }
  .telar-iiif-error p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
/**
 * Widgets
 *
 * Interactive content components that appear inside panels: carousels (image
 * slideshows with captions), tabs (tabbed content sections), accordions
 * (collapsible content sections), and glossary callouts (a box linking a
 * glossary entry). Each widget type has its own styling plus
 * panel-specific colour variants.
 *
 * Telar's panel system uses a colour inversion pattern: widgets inside panels
 * use the opposite panel's colours for visual contrast. A carousel in the
 * Layer 1 panel (light background) gets Layer 2 colours (dark), and a carousel
 * in Layer 2 gets Layer 1 colours, and so does a widget in the glossary panel,
 * whose own colours a widget drawn in them would match. The carousel-caption, tabs, and accordion
 * colour overrides are each generated by a shared mixin (in _mixins.scss) to
 * avoid duplicating the same rules for each panel context.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* ========================================
     WIDGET SYSTEM STYLES
     ======================================== */
  /* Base Widget Container */
  .telar-widget {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  /* Panel-specific widget colors: widgets use opposite panel colors */
  #panel-layer1 .telar-widget {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    border-color: rgba(255, 255, 255, 0.1);
  }
  #panel-layer2 .telar-widget,
  #panel-glossary .telar-widget {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
    border-color: rgba(0, 0, 0, 0.1);
  }
  /* Widget Error Display */
  .telar-widget-error {
    padding: 1rem;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-weight: 500;
    margin: 1rem 0;
  }
  /* ========================================
     CAROUSEL WIDGET
     ======================================== */
  .telar-widget-carousel {
    padding: 0;
    background: transparent;
    border: none;
  }
  .telar-widget-carousel .carousel {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #000;
  }
  .telar-widget-carousel .carousel-inner {
    height: 550px;
  }
  .telar-widget-carousel .carousel-item {
    height: 100%;
  }
  .telar-widget-carousel .carousel-image-container {
    height: calc(100% - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  .telar-widget-carousel .carousel-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .telar-widget-carousel .carousel-caption-below {
    height: 80px;
    padding: 0.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  .telar-widget-carousel .carousel-caption-below .caption-text {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 100;
    opacity: 0.9;
  }
  .telar-widget-carousel .carousel-caption-below .caption-credit {
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.2;
  }
  /* Panel-specific carousel caption colors (generated by mixin) */
  #panel-layer1 .telar-widget-carousel .carousel-caption-below {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
  }
  #panel-layer1 .telar-widget-carousel .carousel-caption-below small,
  #panel-layer1 .telar-widget-carousel .carousel-caption-below .caption-credit {
    color: rgba(255, 255, 255, 0.7);
  }
  #panel-layer2 .telar-widget-carousel .carousel-caption-below, #panel-glossary .telar-widget-carousel .carousel-caption-below {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
  }
  #panel-layer2 .telar-widget-carousel .carousel-caption-below small,
  #panel-layer2 .telar-widget-carousel .carousel-caption-below .caption-credit, #panel-glossary .telar-widget-carousel .carousel-caption-below small,
  #panel-glossary .telar-widget-carousel .carousel-caption-below .caption-credit {
    color: rgba(0, 0, 0, 0.6);
  }
  .telar-widget-carousel .carousel-control-prev,
  .telar-widget-carousel .carousel-control-next {
    width: 8%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .telar-widget-carousel .carousel-control-prev:hover,
    .telar-widget-carousel .carousel-control-next:hover {
      opacity: 1;
    }
  }
  .telar-widget-carousel .carousel-control-prev-icon,
  .telar-widget-carousel .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 0.5rem;
  }
  .telar-widget-carousel .carousel-indicators {
    bottom: 90px;
    margin-bottom: 0;
  }
  .telar-widget-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    opacity: 0.7;
    transition: all 0.3s ease;
  }
  .telar-widget-carousel .carousel-indicators button.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
  }
  /* Carousel size variants (auto-detected based on image aspect ratios) */
  .carousel-size-compact .carousel-inner {
    height: 400px;
  }
  .carousel-size-tall .carousel-inner {
    height: 700px;
  }
  .carousel-size-portrait .carousel-inner {
    height: 850px;
  }
  /* ========================================
     TABS WIDGET
     ======================================== */
  .telar-widget-tabs {
    padding: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .telar-widget-tabs .nav-tabs {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
    margin-bottom: 0;
    padding: 0.5rem 1rem 0;
  }
  .telar-widget-tabs .nav-link {
    color: var(--color-body);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .telar-widget-tabs .nav-link:hover {
      color: var(--color-link);
      border-bottom-color: rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.02);
    }
  }
  .telar-widget-tabs .nav-link.active {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
    background: #fff;
    font-weight: 600;
  }
  .telar-widget-tabs .tab-content {
    padding: 0;
  }
  .telar-widget-tabs .tab-pane-content {
    padding: 2rem;
    line-height: 1.8;
  }
  .telar-widget-tabs .tab-pane-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
  }
  .telar-widget-tabs .tab-pane-content p {
    margin-bottom: 1rem;
  }
  .telar-widget-tabs .tab-pane-content h1,
  .telar-widget-tabs .tab-pane-content h2,
  .telar-widget-tabs .tab-pane-content h3,
  .telar-widget-tabs .tab-pane-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  /* Panel-specific tabs styling (generated by mixin) */
  /* Panel-layer1: uses layer2 colors (dark purple) */
  #panel-layer1 .telar-widget-tabs {
    background: transparent;
    border: none;
  }
  #panel-layer1 .telar-widget-tabs .nav-tabs {
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  #panel-layer1 .telar-widget-tabs .nav-tabs .nav-item {
    margin: 0;
  }
  #panel-layer1 .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link {
    margin-left: 0;
  }
  #panel-layer1 .telar-widget-tabs .nav-tabs .nav-link {
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1.25rem;
    margin: 0;
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    opacity: 0.7;
  }
  #panel-layer1 .telar-widget-tabs .nav-tabs .nav-link.active {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    border: none;
    opacity: 1;
  }
  #panel-layer1 .telar-widget-tabs .tab-content {
    background: var(--color-panel-layer2-bg);
    color: var(--color-on-panel-layer2);
    border-radius: 0 0.5rem 0 0;
  }
  /* Panel-layer2: uses layer1 colors (light purple) */
  #panel-layer2 .telar-widget-tabs, #panel-glossary .telar-widget-tabs {
    background: transparent;
    border: none;
  }
  #panel-layer2 .telar-widget-tabs .nav-tabs, #panel-glossary .telar-widget-tabs .nav-tabs {
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
  }
  #panel-layer2 .telar-widget-tabs .nav-tabs .nav-item, #panel-glossary .telar-widget-tabs .nav-tabs .nav-item {
    margin: 0;
  }
  #panel-layer2 .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link, #panel-glossary .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link {
    margin-left: 0;
  }
  #panel-layer2 .telar-widget-tabs .nav-tabs .nav-link, #panel-glossary .telar-widget-tabs .nav-tabs .nav-link {
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.75rem 1.25rem;
    margin: 0;
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
    opacity: 0.7;
  }
  #panel-layer2 .telar-widget-tabs .nav-tabs .nav-link.active, #panel-glossary .telar-widget-tabs .nav-tabs .nav-link.active {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
    border: none;
    opacity: 1;
  }
  #panel-layer2 .telar-widget-tabs .tab-content, #panel-glossary .telar-widget-tabs .tab-content {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
    border-radius: 0 0.5rem 0 0;
  }
  /* ========================================
     ACCORDION WIDGET
     ======================================== */
  .telar-widget-accordion {
    padding: 0;
    background: transparent;
    border: none;
  }
  .telar-widget-accordion .accordion {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .telar-widget-accordion .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
  }
  .telar-widget-accordion .accordion-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .telar-widget-accordion .accordion-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .telar-widget-accordion .accordion-header {
    margin-bottom: 0;
  }
  .telar-widget-accordion .accordion-button {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-heading);
    background: rgba(0, 0, 0, 0.02);
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
  }
  .telar-widget-accordion .accordion-button:not(.collapsed) {
    background: var(--color-button-bg);
    color: var(--color-on-button);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
  }
  .telar-widget-accordion .accordion-button:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-link) 25%, transparent);
  }
  .telar-widget-accordion .accordion-button::after {
    transition: transform 0.3s ease;
  }
  .telar-widget-accordion .accordion-body {
    padding: 1.5rem;
    line-height: 1.8;
  }
  .telar-widget-accordion .accordion-body img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    margin: 1rem 0;
  }
  .telar-widget-accordion .accordion-body p {
    margin-bottom: 1rem;
  }
  .telar-widget-accordion .accordion-body h1,
  .telar-widget-accordion .accordion-body h2,
  .telar-widget-accordion .accordion-body h3,
  .telar-widget-accordion .accordion-body h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  /* Panel-specific accordion styling (generated by mixin) */
  #panel-layer1 .telar-widget-accordion .accordion-item {
    background: var(--color-panel-layer2-bg);
    border-color: rgba(255, 255, 255, 0.1);
  }
  #panel-layer1 .telar-widget-accordion .accordion-button {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-on-panel-layer2);
  }
  #panel-layer1 .telar-widget-accordion .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-on-panel-layer2);
  }
  #panel-layer1 .telar-widget-accordion .accordion-body {
    color: var(--color-on-panel-layer2);
  }
  #panel-layer2 .telar-widget-accordion .accordion-item, #panel-glossary .telar-widget-accordion .accordion-item {
    background: var(--color-panel-layer1-bg);
    border-color: rgba(0, 0, 0, 0.1);
  }
  #panel-layer2 .telar-widget-accordion .accordion-button, #panel-glossary .telar-widget-accordion .accordion-button {
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-on-panel-layer1);
  }
  #panel-layer2 .telar-widget-accordion .accordion-button:not(.collapsed), #panel-glossary .telar-widget-accordion .accordion-button:not(.collapsed) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-on-panel-layer1);
  }
  #panel-layer2 .telar-widget-accordion .accordion-body, #panel-glossary .telar-widget-accordion .accordion-body {
    color: var(--color-on-panel-layer1);
  }
  /* ========================================
     BIBLIOGRAPHY WIDGET
     ======================================== */
  .telar-widget-bibliography {
    margin: 1.5rem 0;
  }
  .telar-widget-bibliography .telar-bib-entry p {
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 0.75rem;
  }
  .telar-widget-bibliography .telar-bib-entry:last-child p:last-child {
    margin-bottom: 0;
  }
  /* ========================================
     MOBILE RESPONSIVENESS
     ======================================== */
  @media (max-width: 768px) {
    .telar-widget {
      margin: 1.5rem 0;
      padding: 1rem;
    }
    /* Carousel Mobile */
    .telar-widget-carousel .carousel-item img {
      max-height: 400px;
    }
    .telar-widget-carousel .carousel-control-prev-icon,
    .telar-widget-carousel .carousel-control-next-icon {
      width: 2rem;
      height: 2rem;
    }
    /* Tabs Mobile */
    .telar-widget-tabs .nav-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .telar-widget-tabs .nav-link {
      padding: 0.6rem 1rem;
      font-size: 0.9rem;
      white-space: nowrap;
    }
    .telar-widget-tabs .tab-pane-content {
      padding: 1.25rem;
      font-size: 0.95rem;
    }
    /* Accordion Mobile */
    .telar-widget-accordion .accordion-button {
      font-size: 1rem;
      padding: 1rem;
    }
    .telar-widget-accordion .accordion-body {
      padding: 1rem;
      font-size: 0.95rem;
    }
  }
  /* Glossary callout: a box linking a glossary entry, floated in the text so
     the text wraps around it. It is a .glossary-inline-link too (the scripts
     find it by that class), which _panels.scss's inline-link and general link
     rules leave alone via :not(.glossary-callout). */
  .glossary-callout {
    float: right;
    clear: right;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    width: auto;
    max-width: 290px;
    margin: 0.35rem 0 0.9rem 1.4rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--color-panel-glossary-bg);
    color: var(--color-on-panel-glossary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
  }
  .glossary-callout--left {
    float: left;
    clear: left;
    margin: 0.35rem 1.4rem 0.9rem 0;
  }
  /* In the glossary panel its own colours would match the panel, so it takes
     layer 1's, as every widget there does. */
  #panel-glossary .glossary-callout {
    background: var(--color-panel-layer1-bg);
    color: var(--color-on-panel-layer1);
  }
  a.glossary-callout:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  @media (hover: hover) and (pointer: fine) {
    .glossary-callout:hover {
      color: var(--color-on-panel-glossary);
      text-decoration: none;
      opacity: 0.9;
    }
    #panel-glossary .glossary-callout:hover {
      color: var(--color-on-panel-layer1);
    }
  }
  .glossary-callout-icon {
    flex: none;
    width: 1.45rem;
    height: 1.45rem;
    margin-top: 0.1rem;
    color: var(--color-accent);
  }
  .glossary-callout-text {
    display: block;
    min-width: 0;
  }
  .glossary-callout-kind {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .glossary-callout-title {
    display: block;
    font-family: var(--font-headings);
    font-size: 1.02rem;
    font-weight: 600;
  }
  .glossary-callout-arrow {
    flex: none;
    align-self: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: auto;
    opacity: 0.5;
  }
  /* In a panel the box sits at the edge of the text column, not of the panel:
     the column is each panel's paragraph width in _panels.scss. */
  .offcanvas-body {
    --glossary-callout-column: 650px;
  }
  #panel-layer2 .offcanvas-body {
    --glossary-callout-column: 600px;
  }
  #panel-glossary .offcanvas-body {
    --glossary-callout-column: 550px;
  }
  .offcanvas-body a.glossary-callout--right {
    margin-right: max(0px, (100% - var(--glossary-callout-column)) / 2);
  }
  .offcanvas-body a.glossary-callout--left {
    margin-left: max(0px, (100% - var(--glossary-callout-column)) / 2);
  }
  /* The text that holds a callout closes below it. */
  .offcanvas-body > [id$=-content]::after,
  .glossary-content::after,
  .page-content::after {
    content: "";
    display: block;
    clear: both;
  }
  @media (max-width: 575.98px) {
    /* Too narrow to wrap text beside a 290px box: full width, in the flow. */
    .glossary-callout,
    .glossary-callout--left,
    .offcanvas-body a.glossary-callout--right,
    .offcanvas-body a.glossary-callout--left {
      float: none;
      max-width: none;
      width: 100%;
      margin: 1rem 0;
    }
  }
  @media (max-width: 480px) {
    /* Extra small screens */
    .telar-widget-carousel .carousel-item img {
      max-height: 300px;
    }
    .telar-widget-tabs .nav-link {
      font-size: 0.85rem;
      padding: 0.5rem 0.75rem;
    }
  }
}
/**
 * Embed Mode
 *
 * Styles for embed mode, which strips away navigation chrome (header, footer,
 * home button) so a story can be embedded in an iframe inside a learning
 * management system like Canvas. Includes the "View full site" floating banner
 * that links to the standalone version, and responsive adjustments for narrow
 * or short embed containers.
 *
 * In embed mode, navigation uses buttons rather than scroll
 * detection, because scroll events inside iframes are unreliable across
 * different host pages. The layout stays desktop-style but steps use static
 * positioning with show/hide logic instead of the absolute
 * positioning and transforms used in desktop scroll mode.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* =========================================
     EMBED MODE
     ========================================= */
  /* Embed mode: Hide navigation chrome for Canvas LMS / iframe embedding */
  body.embed-mode {
    /* Hide home button */
  }
  body.embed-mode .btn-home {
    display: none;
  }
  body.embed-mode {
    /* Hide share button */
  }
  body.embed-mode .share-button {
    display: none;
  }
  body.embed-mode {
    /* Hide viewer overlay (contains "Loading..." text) */
  }
  body.embed-mode .viewer-overlay {
    display: none;
  }
  body.embed-mode {
    /* Show embed banner */
  }
  body.embed-mode .telar-embed-banner {
    display: flex;
  }
  body.embed-mode {
    /* Maximize content area */
  }
  body.embed-mode .story-container {
    padding-top: 0;
  }
  body.embed-mode {
    /* Always show navigation buttons in embed mode */
  }
  body.embed-mode .story-navigation {
    display: block;
  }
  body.embed-mode {
    /* Show the button-navigation hint in embed mode (hide desktop hint) */
  }
  body.embed-mode .hint-desktop {
    display: none;
  }
  body.embed-mode .hint-mobile {
    display: inline;
  }
  body.embed-mode {
    /**
     * Embed mode navigation pattern:
     * - Button navigation for iframe/Canvas LMS compatibility
     * - Desktop-style layout and vertical centering
     * - Static positioning instead of absolute (simpler show/hide logic)
     */
    /* Hide all story steps by default */
  }
  body.embed-mode .story-step {
    display: none;
    position: static;
    height: 100vh;
    width: 100%;
    padding: 2rem;
    background: #fff;
    border-left: 3px solid transparent;
    /* Remove desktop transforms and transitions */
    transform: none;
    opacity: 1;
    transition: none;
  }
  body.embed-mode {
    /* dvh override — eliminates iOS Safari URL-bar jump in embed mode. */
  }
  @supports (height: 100dvh) {
    body.embed-mode .story-step {
      height: 100dvh;
    }
  }
  body.embed-mode {
    /* Show only the active step with desktop flex layout */
  }
  body.embed-mode .story-step.mobile-active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body.embed-mode {
    /* Preserve desktop-style vertical centering via .step-content */
  }
  body.embed-mode .story-step .step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  body.embed-mode {
    /* The previous/next buttons use the placement in _story.scss: a column at the
       right edge, centred vertically, clear of the side card and of the banner at
       the top left. They show in embed mode on desktop-sized viewports too. */
  }
  body.embed-mode .mobile-nav button {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (hover: hover) and (pointer: fine) {
    body.embed-mode .mobile-nav button:hover:not(:disabled) {
      background: rgb(255, 255, 255);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    body.embed-mode .mobile-nav .mobile-prev:hover:not(:disabled) {
      transform: scale(1.1) translateY(-4px);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    body.embed-mode .mobile-nav .mobile-next:hover:not(:disabled) {
      transform: scale(1.1) translateY(4px);
    }
  }
  body.embed-mode .mobile-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  body.embed-mode {
    /**
     * Width and height-responsive typography for embed mode
     * Ensures content remains readable in narrow or short iframes
     */
    /* Narrow viewports (< 900px width) */
  }
  @media (max-width: 900px) {
    body.embed-mode .story-step {
      padding: 1.5rem;
    }
    body.embed-mode .story-intro .intro-title {
      font-size: 2.75rem;
      line-height: 1.2;
    }
    body.embed-mode .story-intro .intro-byline {
      font-size: 0.95rem;
    }
    body.embed-mode .story-intro .intro-description {
      font-size: 1rem;
      line-height: 1.6;
    }
    body.embed-mode .story-step .step-content {
      font-size: 1rem;
      line-height: 1.7;
    }
    body.embed-mode .story-step h2 {
      font-size: 1.65rem;
    }
  }
  body.embed-mode {
    /* Medium-short viewports (< 650px height) */
  }
  @media (max-height: 650px) {
    body.embed-mode .story-step {
      padding: 1.5rem;
    }
    body.embed-mode .story-intro .intro-title {
      font-size: 2.5rem;
      line-height: 1.2;
      margin-bottom: 0.75rem;
    }
    body.embed-mode .story-intro .intro-byline {
      font-size: 0.95rem;
      margin-bottom: 0.75rem;
    }
    body.embed-mode .story-intro .intro-description {
      font-size: 1rem;
      line-height: 1.5;
      margin-bottom: 0.75rem;
    }
    body.embed-mode .story-step .step-content {
      font-size: 1rem;
      line-height: 1.6;
    }
    body.embed-mode .story-step h2 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }
  }
  body.embed-mode {
    /* Very short viewports (< 500px height) */
  }
  @media (max-height: 500px) {
    body.embed-mode .story-step {
      padding: 1rem;
    }
    body.embed-mode .story-intro .intro-title {
      font-size: 2rem;
      line-height: 1.1;
      margin-bottom: 0.5rem;
    }
    body.embed-mode .story-intro .intro-byline {
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
    }
    body.embed-mode .story-intro .intro-description {
      font-size: 0.95rem;
      line-height: 1.4;
      margin-bottom: 0.5rem;
    }
    body.embed-mode .story-step .step-content {
      font-size: 0.95rem;
      line-height: 1.5;
    }
    body.embed-mode .story-step h2 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    body.embed-mode .story-step p {
      margin-bottom: 0.75rem;
    }
  }
  /* Vertical layout: the text card is a bottom card, and the centred column of
     buttons would cross it. They sit at the right edge over the image, just above
     the card's tallest height (its max-height plus its bottom offset). */
  /* This block is at root level to ensure proper source order over the desktop embed rules */
  @media (max-width: 1024px), (max-aspect-ratio: 0.75), (max-height: 480px), (max-height: 488px) and (max-width: 1380px), (max-height: 496px) and (max-width: 1380px), (max-height: 504px) and (max-width: 1380px), (max-height: 512px) and (max-width: 1380px), (max-height: 520px) and (max-width: 1380px), (max-height: 528px) and (max-width: 1366px), (max-height: 536px) and (max-width: 1341px), (max-height: 544px) and (max-width: 1316px), (max-height: 552px) and (max-width: 1292px), (max-height: 560px) and (max-width: 1267px), (max-height: 568px) and (max-width: 1243px), (max-height: 576px) and (max-width: 1218px), (max-height: 584px) and (max-width: 1193px), (max-height: 592px) and (max-width: 1169px), (max-height: 600px) and (max-width: 1144px), (max-height: 608px) and (max-width: 1119px), (max-height: 616px) and (max-width: 1095px), (max-height: 624px) and (max-width: 1070px), (max-height: 632px) and (max-width: 1046px) {
    body.embed-mode .mobile-nav {
      bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 40vh + 0.75rem);
      transform: none;
    }
    @supports (height: 100dvh) {
      body.embed-mode .mobile-nav {
        bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 40dvh + 0.75rem);
      }
    }
  }
  @media (max-width: 1024px) and (hover: hover) and (pointer: fine), (max-aspect-ratio: 0.75) and (hover: hover) and (pointer: fine), (max-height: 480px) and (hover: hover) and (pointer: fine), (max-height: 488px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 496px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 504px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 512px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 520px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 528px) and (max-width: 1366px) and (hover: hover) and (pointer: fine), (max-height: 536px) and (max-width: 1341px) and (hover: hover) and (pointer: fine), (max-height: 544px) and (max-width: 1316px) and (hover: hover) and (pointer: fine), (max-height: 552px) and (max-width: 1292px) and (hover: hover) and (pointer: fine), (max-height: 560px) and (max-width: 1267px) and (hover: hover) and (pointer: fine), (max-height: 568px) and (max-width: 1243px) and (hover: hover) and (pointer: fine), (max-height: 576px) and (max-width: 1218px) and (hover: hover) and (pointer: fine), (max-height: 584px) and (max-width: 1193px) and (hover: hover) and (pointer: fine), (max-height: 592px) and (max-width: 1169px) and (hover: hover) and (pointer: fine), (max-height: 600px) and (max-width: 1144px) and (hover: hover) and (pointer: fine), (max-height: 608px) and (max-width: 1119px) and (hover: hover) and (pointer: fine), (max-height: 616px) and (max-width: 1095px) and (hover: hover) and (pointer: fine), (max-height: 624px) and (max-width: 1070px) and (hover: hover) and (pointer: fine), (max-height: 632px) and (max-width: 1046px) and (hover: hover) and (pointer: fine) {
    body.embed-mode .mobile-nav button:hover:not(:disabled) {
      background: rgb(255, 255, 255);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
  @media (max-width: 1024px) and (hover: hover) and (pointer: fine), (max-aspect-ratio: 0.75) and (hover: hover) and (pointer: fine), (max-height: 480px) and (hover: hover) and (pointer: fine), (max-height: 488px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 496px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 504px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 512px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 520px) and (max-width: 1380px) and (hover: hover) and (pointer: fine), (max-height: 528px) and (max-width: 1366px) and (hover: hover) and (pointer: fine), (max-height: 536px) and (max-width: 1341px) and (hover: hover) and (pointer: fine), (max-height: 544px) and (max-width: 1316px) and (hover: hover) and (pointer: fine), (max-height: 552px) and (max-width: 1292px) and (hover: hover) and (pointer: fine), (max-height: 560px) and (max-width: 1267px) and (hover: hover) and (pointer: fine), (max-height: 568px) and (max-width: 1243px) and (hover: hover) and (pointer: fine), (max-height: 576px) and (max-width: 1218px) and (hover: hover) and (pointer: fine), (max-height: 584px) and (max-width: 1193px) and (hover: hover) and (pointer: fine), (max-height: 592px) and (max-width: 1169px) and (hover: hover) and (pointer: fine), (max-height: 600px) and (max-width: 1144px) and (hover: hover) and (pointer: fine), (max-height: 608px) and (max-width: 1119px) and (hover: hover) and (pointer: fine), (max-height: 616px) and (max-width: 1095px) and (hover: hover) and (pointer: fine), (max-height: 624px) and (max-width: 1070px) and (hover: hover) and (pointer: fine), (max-height: 632px) and (max-width: 1046px) and (hover: hover) and (pointer: fine) {
    body.embed-mode .mobile-nav .mobile-prev:hover:not(:disabled),
    body.embed-mode .mobile-nav .mobile-next:hover:not(:disabled) {
      transform: scale(1.05);
    }
  }
  /* A window 480px tall or less has a side card at any width (_story.scss), so the
     column returns to the right edge, centred, as beside any side card. This comes
     after the vertical-layout block so it wins at equal specificity.
     The banner is fixed at the top left and can reach the right edge of a narrow
     window. Its height depends on the language and the window width, so embed.js
     sets `embed-banner-shown` on the body and `--telar-embed-banner-bottom` (its
     measured bottom edge) while it is in the page. The column starts no higher than
     that edge plus a gap. A column is 102px tall at these heights (two 45px buttons
     and a 0.75rem gap). Where the full banner and the column do not both fit in the
     window, embed.js gives the banner `is-compact` (below) so it shows one line, and
     the column starts below that. The clamp keeps the column inside the window in any case, and past
     the point where even the compact banner leaves no room, the buttons form a row
     at the right edge, as low as the window allows. Once the banner is dismissed,
     the column is centred again. The sizes here (the 102px column, the 45px row, the
     0.75rem gap, the 0.5rem margin and the 229px and 480px heights) are the ones
     embed.js uses to decide when the banner is compact. */
  @media (max-height: 480px) {
    body.embed-mode .mobile-nav {
      bottom: 50%;
      transform: translateY(50%);
    }
    body.embed-mode.embed-banner-shown .mobile-nav {
      top: min(max(50% - 45px - 0.375rem, var(--telar-embed-banner-bottom) + 0.75rem), 100% - 102px - 0.5rem);
      bottom: auto;
      transform: none;
    }
  }
  @media (max-height: 480px) and (max-height: 229px) {
    body.embed-mode.embed-banner-shown .mobile-nav {
      flex-direction: row;
      top: min(var(--telar-embed-banner-bottom) + 0.75rem, 100% - 45px - 0.5rem);
    }
  }
  /* "View full site" floating modal (only visible in embed mode) */
  .telar-embed-banner {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9900;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.875rem;
    font-family: var(--font-body);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: min(380px, 100% - 40px);
    line-height: 1.5;
    backdrop-filter: blur(2px);
    /* One line: the text is cut with an ellipsis, and the link and the close button
       keep their size. */
  }
  .telar-embed-banner.is-compact {
    top: 8px;
    left: 8px;
    padding: 8px 12px;
    align-items: center;
    max-width: min(380px, 100% - 16px);
  }
  .telar-embed-banner.is-compact .telar-embed-banner-text {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .telar-embed-banner.is-compact .telar-embed-banner-message {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .telar-embed-banner.is-compact .telar-embed-banner-link {
    flex-shrink: 0;
  }
  .telar-embed-banner.is-compact .telar-embed-banner-close {
    margin-top: 0;
  }
  .telar-embed-banner-text {
    color: #6c757d;
  }
  .telar-embed-banner-text .icon {
    display: none;
  }
  .telar-embed-banner-text a {
    color: var(--color-link);
    text-decoration: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .telar-embed-banner-text a:hover {
      text-decoration: underline;
    }
  }
  .telar-embed-banner-link {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .telar-embed-banner-link::after {
    content: "→";
    font-size: 1.1em;
  }
  .telar-embed-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #adb5bd;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px;
  }
  .telar-embed-banner-close .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  @media (hover: hover) and (pointer: fine) {
    .telar-embed-banner-close:hover {
      color: #6c757d;
    }
  }
  /* Hide banner in normal (non-embed) mode */
  body:not(.embed-mode) .telar-embed-banner {
    display: none;
  }
}
/**
 * Share & Embed UI
 *
 * The share button and share panel that let users copy the story URL or share
 * to social media. The button appears as a floating icon on story pages and as
 * a navbar item on other pages. The panel is a modal overlay with
 * copy-to-clipboard functionality, embed code generation, and social media
 * sharing links.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* =========================================
     SHARE & EMBED UI
     ========================================= */
  /* Share Button - Light Style (matches Back to Home button) */
  .share-button {
    background: rgba(255, 255, 255, 0.6);
    color: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .share-button:hover {
      background: rgba(255, 255, 255, 0.85);
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .share-button {
    display: inline-flex;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.3s ease;
  }
  .share-button .share-button-icon {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
  }
  .share-button:focus {
    outline: 2px solid #cbd5e0;
    outline-offset: 2px;
  }
  /* Icon+text variant (story pages) - fixed position floating at top of viewport */
  .share-button-icon-text {
    position: fixed;
    top: 0.75rem;
    left: 10.5rem;
    transform: none;
    z-index: 9900;
  }
  .share-button-icon-text .share-button-text {
    display: inline;
  }
  .share-button-icon-text {
    /* Mobile: Ghost/transparent style (Option 2) */
  }
  @media (max-width: 1024px) {
    .share-button-icon-text {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      justify-content: center;
      left: auto;
      right: 1rem;
      top: 1rem;
      transform: none;
      /* Ghost style - very subtle when not hovered */
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.6);
      color: rgba(255, 255, 255, 0.6); /* Icon matches border color */
    }
    .share-button-icon-text .share-button-icon {
      color: rgba(255, 255, 255, 0.6); /* Ensure SVG icon matches */
      fill: none; /* Keep stroke-only rendering */
    }
    .share-button-icon-text .share-button-text {
      display: none;
    }
    .share-button-icon-text {
      /* Solid on hover */
    }
  }
  @media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
    .share-button-icon-text:hover {
      background: rgba(255, 255, 255, 0.95);
      border: 2px solid rgba(0, 0, 0, 0.1);
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .share-button-icon-text:hover .share-button-icon {
      color: #333;
      fill: none;
    }
  }
  /* Navbar variant (for header) - styled as button with nav colors */
  .share-button-navbar {
    position: static;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.55);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 20px;
    margin-left: 0.5rem;
  }
  @media (hover: hover) and (pointer: fine) {
    .share-button-navbar:hover {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.3);
      color: rgba(0, 0, 0, 0.7);
      transform: none;
      box-shadow: none;
    }
  }
  .share-button-navbar .share-button-text {
    display: inline;
  }
  .share-button-navbar .share-button-icon {
    width: 1.1rem;
    height: 1.1rem;
  }
  @media (max-width: 991px) {
    .share-button-navbar {
      width: 48px;
      height: 48px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      color: rgba(0, 0, 0, 0.75);
    }
    .share-button-navbar .share-button-text {
      display: none;
    }
    .share-button-navbar .share-button-icon {
      width: 1.3rem;
      height: 1.3rem;
      color: rgba(0, 0, 0, 0.75);
      fill: none;
    }
  }
  @media (max-width: 991px) and (hover: hover) and (pointer: fine) {
    .share-button-navbar:hover {
      color: rgba(0, 0, 0, 0.75);
    }
    .share-button-navbar:hover .share-button-icon {
      color: rgba(0, 0, 0, 0.75);
    }
  }
  /* Share Panel Modal */
  #panel-share {
    z-index: 9950;
  }
  #panel-share .modal-dialog {
    max-width: 500px;
    width: 90vw;
    margin: 1.75rem auto;
  }
  #panel-share .modal-content {
    border-radius: 24px;
    overflow: hidden;
  }
  @media (max-width: 1024px) {
    #panel-share .modal-dialog {
      width: 95vw;
      max-width: 95vw;
      margin: 1rem auto;
    }
  }
  #panel-share .share-panel-header {
    border-bottom: none;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #panel-share .share-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  #panel-share .share-panel-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading);
  }
  #panel-share .share-pill-tabs {
    display: inline-flex;
    background: #e8e8e8;
    border-radius: 50px;
    padding: 4px;
  }
  #panel-share .share-pill-tab {
    padding: 6px 14px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: #666;
    font-size: 0.875rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-share .share-pill-tab:hover:not(.active) {
      color: #333;
    }
  }
  #panel-share .share-pill-tab.active {
    background: var(--color-heading);
    color: var(--color-on-heading);
  }
  #panel-share .share-pill-tab:focus {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }
  #panel-share .modal-body {
    padding-top: 0.25rem;
  }
  #panel-share .share-section {
    margin-bottom: 1rem;
  }
  #panel-share .share-section:last-child {
    margin-bottom: 0;
  }
  #panel-share .share-section-label {
    font-weight: 600;
    color: var(--color-body);
    display: block;
    margin-bottom: 0.25rem;
  }
  #panel-share .share-section-help {
    color: #6c757d;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  #panel-share .share-privacy-row {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  @media (max-width: 576px) {
    #panel-share .share-privacy-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }
  #panel-share .share-privacy-question {
    color: #6c757d;
    font-size: 0.8rem;
    flex: 1;
  }
  #panel-share .share-key-toggle {
    display: inline-flex;
    background: #e8e8e8;
    border-radius: 50px;
    padding: 3px;
    flex-shrink: 0;
  }
  #panel-share .share-key-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: #666;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-share .share-key-btn:hover:not(.active) {
      color: #333;
    }
  }
  #panel-share .share-key-btn.active {
    background: var(--color-heading);
    color: var(--color-on-heading);
  }
  #panel-share .share-key-btn:focus {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }
  #panel-share .share-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  #panel-share .share-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #f8f9fa;
    font-size: 0.8rem;
    height: 31px;
  }
  #panel-share .share-input:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
    outline: none;
  }
  #panel-share .share-copy-btn {
    padding: 0 16px;
    background: var(--color-heading);
    color: var(--color-on-heading);
    border: none;
    border-radius: 50px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 31px;
    white-space: nowrap;
    transition: all 0.2s ease;
  }
  #panel-share .share-copy-btn .icon {
    width: 1rem;
    height: 1rem;
  }
  @media (max-width: 576px) {
    #panel-share .share-copy-btn {
      padding: 0 10px;
    }
    #panel-share .share-copy-btn .btn-text {
      display: none;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    #panel-share .share-copy-btn:hover {
      opacity: 0.9;
    }
  }
  #panel-share .share-copy-btn:focus {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }
  #panel-share .share-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  #panel-share .share-warning {
    color: #856404;
    font-size: 0.75rem;
    margin: 0;
  }
  #panel-share .share-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #f8f9fa;
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    line-height: 1.3;
    resize: none;
    margin-bottom: 0.25rem;
  }
  #panel-share .share-textarea:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
    outline: none;
  }
  @media (max-width: 1024px) {
    #panel-share .share-textarea {
      font-size: 0.65rem;
      line-height: 1.3;
    }
  }
  #panel-share .share-embed-controls {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
  }
  @media (max-width: 576px) {
    #panel-share .share-embed-controls {
      flex-wrap: wrap;
    }
  }
  #panel-share .share-embed-preset {
    flex: 1.5;
  }
  @media (max-width: 576px) {
    #panel-share .share-embed-preset {
      flex: 1 1 100%;
      margin-bottom: 0.5rem;
    }
  }
  #panel-share .share-embed-dimension {
    flex: 0.5;
  }
  @media (max-width: 576px) {
    #panel-share .share-embed-dimension {
      flex: 1;
    }
  }
  #panel-share .share-embed-copy {
    flex: 0;
  }
  #panel-share .share-embed-label {
    font-size: 0.7rem;
    color: #6c757d;
    display: block;
    margin-bottom: 2px;
  }
  #panel-share .share-embed-select,
  #panel-share .share-embed-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.75rem;
    height: 31px;
  }
  #panel-share .share-embed-select:focus,
  #panel-share .share-embed-input:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
    outline: none;
  }
  #panel-share .share-story-select {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  #panel-share .share-story-select:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25);
    outline: none;
  }
  /* Story intro share button placement */
  .story-intro .share-button {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
/**
 * LaTeX
 *
 * KaTeX integration overrides. KaTeX's own CSS loads from CDN; this partial
 * only adjusts what doesn't fit Telar's layout — display math spacing, inline
 * math sizing, and panel overflow handling.
 *
 * @version v1.8.0
 */
@layer telar-components {
  .katex-display {
    margin: 1.5em 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .katex {
    font-size: 1.1em;
    display: inline;
  }
}
/**
 * Coordinate Panel
 *
 * Styles for the coordinate finder tool on object pages. The panel background
 * uses the theme's button colour (--color-button-bg), and its text is
 * --color-on-button, the colour the build derived to sit on that background —
 * the same property the button beside the panel uses, so the two cannot
 * disagree about the same ground.
 *
 * .coord-dark and .coord-light say which way the ground runs, for the things
 * that are not a text colour: the translucent wells, and the close icon,
 * which is a dark SVG that has to be inverted on a dark ground. The class is
 * written into the markup by _layouts/object.html from the build's own
 * `light.button`, so it reports that one decision rather than taking a
 * second one in the browser.
 *
 * @version v1.8.0
 */
@layer telar-components {
  /* Panel container */
  .coordinate-panel {
    background-color: var(--color-button-bg);
    color: var(--color-on-button);
    border-radius: 0;
    position: relative;
  }
  .coordinate-panel-body {
    padding-right: 3rem;
  }
  .coordinate-panel-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  .coordinate-panel-row {
    padding-top: 1rem;
  }
  .coordinate-panel-instructions {
    padding-left: 2rem;
  }
  .coordinate-panel-instructions p {
    line-height: 1.6;
    margin-bottom: 0.5rem;
  }
  /* Bootstrap gives a heading and a `code` their own colours, so the two that
     sit inside the panel have to be told the panel's. */
  .coordinate-panel-heading,
  .coord-field code {
    color: var(--color-on-button);
  }
  .coordinate-panel-heading {
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
  }
  .coordinate-panel-values {
    padding-top: 2rem;
  }
  .coordinate-panel-values-inner {
    max-width: 280px;
    margin: 0 auto;
  }
  /* Coordinate labels and fields */
  .coord-label {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
  }
  .coord-field {
    position: relative;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Hidden by default — JS sets display: flex for multi-page objects */
  .coord-page-row {
    display: none;
  }
  .coord-copy-btn {
    color: color-mix(in srgb, var(--color-on-button) 70%, transparent);
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    border: none;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    background: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .coord-copy-btn:hover {
      color: var(--color-on-button);
    }
  }
  /* "Identify coordinates" button — sits outside the panel, uses theme colour directly */
  .btn-developer {
    background: var(--color-button-bg);
    color: var(--color-on-button);
    border: 1px solid var(--color-button-bg);
    font-weight: 600;
    transition: all 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-developer:hover {
      opacity: 0.85;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
  .btn-developer i {
    margin-right: 0.5rem;
  }
  /* Copy all buttons */
  .btn-copy {
    color: var(--color-on-button);
    font-weight: 600;
    transition: all 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn-copy:hover {
      transform: translateY(-1px);
    }
  }
  /* -------------------------------------------------------
   * A dark ground: the close icon is inverted, and the wells
   * and the copy button are veiled in white
   * ------------------------------------------------------- */
  .coord-dark .coordinate-panel-close {
    filter: invert(1);
  }
  .coord-dark .coord-field {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .coord-dark .btn-copy {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  @media (hover: hover) and (pointer: fine) {
    .coord-dark .btn-copy:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
  /* -------------------------------------------------------
   * A light ground: the icon stands as it is, and the veils
   * are black
   * ------------------------------------------------------- */
  .coord-light .coord-field {
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  .coord-light .btn-copy {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  @media (hover: hover) and (pointer: fine) {
    .coord-light .btn-copy:hover {
      background: rgba(0, 0, 0, 0.15);
      border-color: rgba(0, 0, 0, 0.25);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}
/**
 * Telar - Digital Storytelling Framework CSS
 *
 * This is the main entry point for all Telar styles. It handles two things that
 * cannot live in SCSS partials: the YAML front matter (which tells Jekyll to
 * process this file) and the Liquid template tags that read the active theme
 * and set CSS custom properties. Every other style rule lives in a partial
 * inside _sass/, loaded via @use above.
 *
 * The partials are loaded in cascade order: typography first (lowest
 * specificity, most general), then layout, story, panels, viewer, widgets,
 * embed, and share (highest specificity, most specific). This order matches
 * the original monolithic stylesheet so that overrides work the same way.
 *
 * @version v1.8.0
 */
/* CSS Variables with hardcoded trama defaults as ultimate fallback */
:root {
  /* Text colors */
  --color-heading: #2c3e50;
  --color-body: #333333;
  --color-link: #8b4513;
  --color-accent: #8b4513;
  --color-button-text: #FFFFFF;
  /* Text on a theme background, derived by scripts/telar/theme_colours.py to
     reach a 4.5:1 contrast ratio. These are what _sass/ uses; the waveform
     palette in JS reads --color-button-text above. Each falls back to the
     theme's own choice, then to trama's, when the derived colours are absent. */
  --color-on-button: #FFFFFF;
  --color-on-panel-layer1: #2c3e50;
  --color-on-panel-layer2: #FFFFFF;
  --color-on-panel-glossary: #333333;
  /* The heading colour is a text colour the stylesheet also paints as a
     ground — the objects filter chip, and the share modal's active tabs and
     copy button. The schema names no text colour to sit on it, so the
     fallback is white. */
  --color-on-heading: #FFFFFF;
  /* Background colors */
  --color-button-bg: #2c3e50;
  --color-panel-layer1-bg: #A8C5D4;
  --color-panel-layer2-bg: #3d2645;
  --color-panel-glossary-bg: #F5EDE1;
  /* Fonts */
  --font-headings: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
  /* UI element tokens — theme-independent constants consumed by JS inline styles */
  --color-panel-backdrop: rgba(0, 0, 0, 0.025); /* panels.js scroll-lock backdrop */
  --color-overlay-dim: rgba(0, 0, 0, 0.25); /* audio-card.js pause/dim overlays */
  --z-panel-backdrop: 9900; /* below panel stack (9910+), above cards */
}

/*# sourceMappingURL=telar.css.map */