@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.6.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-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-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-card-frac-side: 0.35;
  --telar-video-stack-max-h: 0.58;
}

@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.4.0
 */
/* 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.6.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.6.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-panel-layer2-text
 */
/* 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-panel-layer2-text);
  }
  .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-panel-layer2-text);
  }
  .user-page .telar-widget-accordion .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-panel-layer2-text);
  }
  .user-page .telar-widget-accordion .accordion-body {
    color: var(--color-panel-layer2-text);
  }
  .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-panel-layer2-text);
    opacity: 0.7;
  }
  .user-page .telar-widget-tabs .nav-tabs .nav-link.active {
    background: var(--color-panel-layer2-bg);
    color: var(--color-panel-layer2-text);
    border: none;
    opacity: 1;
  }
  .user-page .telar-widget-tabs .tab-content {
    background: var(--color-panel-layer2-bg);
    color: var(--color-panel-layer2-text);
    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-button-text);
    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;
    }
  }
  /* 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. The `!important` on `color` is deliberate: these
     buttons render as `<a class="btn btn-primary">`, and the unlayered link color
     otherwise wins over this layered rule (cascade layers lose to unlayered
     styles), leaving theme-coloured text on the theme-coloured button. */
  .btn-primary {
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
    color: var(--color-button-text) !important;
  }
  @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-button-text) !important;
    }
  }
  .btn-primary:focus,
  .btn-primary:active {
    background-color: var(--color-button-bg);
    border-color: var(--color-button-bg);
    opacity: 0.9;
    color: var(--color-button-text) !important;
  }
  /* 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) {
    .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;
    }
  }
  /* 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 (v0.8.0)
     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;
  }
  /* 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: #fff;
    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) {
    .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.
 *
 * Card-stack architecture introduced in v1.0.0-beta.
 *
 * Preserved: mobile navigation buttons, btn-home, story unlock overlay,
 * embed-mode styles, and height-based responsive tiers.
 *
 * @version v1.6.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-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 0.5s ease-out;
    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: 41%;
    width: 59%;
    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: calc(40% + 16px);
  }
  .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;
  }
  .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: 70%;
    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) {
    .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: 37%;
    background: #fff;
    border-radius: 3px;
    border: none;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: auto;
    transform: translateY(100vh);
    transition: transform 0.5s ease-out;
    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 {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-body);
    overflow-y: auto;
    flex: 1;
  }
  .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-button-text);
    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 {
      font-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 {
      font-size: 0.85rem;
    }
  }
  .story-intro {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease-out;
  }
  .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;
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75) {
    .intro-floating-card .hint-desktop {
      display: none;
    }
    .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-panel-layer2-text);
  }
  .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-panel-layer2-text);
    opacity: 0.85;
  }
  .story-intro--toc .intro-floating-card .intro-demo-label {
    color: var(--color-panel-layer2-text);
    opacity: 0.7;
  }
  .story-intro--toc .intro-floating-card .intro-hint {
    color: var(--color-panel-layer2-text);
    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-panel-layer2-text);
    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-panel-layer2-text);
    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 0.5s ease-out;
  }
  .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;
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75) {
    .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 (max-width: 1024px) and (hover: hover) and (pointer: fine), (max-aspect-ratio: 0.75) and (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);
    }
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75) {
    .mobile-nav button:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    .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 0.4s ease-out;
    }
  }
  @media (max-width: 1024px) and (max-height: 480px), (max-aspect-ratio: 0.75) and (max-height: 480px) {
    .text-card {
      left: 3%;
      width: 37%;
      top: auto !important;
      bottom: auto;
      height: auto !important;
      max-height: none;
    }
  }
  @media (max-width: 1024px), (max-aspect-ratio: 0.75) {
    @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%;
    }
  }
  .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-button-text);
    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) {
    .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.6.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-button-text);
    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-button-text);
      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-panel-layer1-text);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-layer1 .offcanvas-title {
    color: var(--color-panel-layer1-text);
    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-panel-layer2-text);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-layer2 .offcanvas-title {
    color: var(--color-panel-layer2-text);
    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-panel-layer2-text);
  }
  /* 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-panel-glossary-text);
    padding: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
  }
  #panel-glossary .offcanvas-title {
    color: var(--color-panel-glossary-text);
    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) */
  .glossary-inline-link {
    background-color: var(--color-panel-glossary-bg);
    color: var(--color-panel-glossary-text);
    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:hover {
      opacity: 0.85;
      text-decoration: none;
      color: var(--color-panel-glossary-text);
    }
  }
  /* 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-panel-layer2-text);
  }
  /* 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"]) {
    color: var(--color-link);
    text-decoration: underline;
  }
  @media (hover: hover) and (pointer: fine) {
    .offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]):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 */
  @media (min-width: 769px) 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) {
    /* 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,
    .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.6.0
 */
/* Viewer Containers */
#viewer-container {
  width: 100%;
  height: 100%;
}

#object-viewer {
  width: 100%;
  border-radius: 4px;
  position: relative;
}

/* Image object page: 1:1 square, white weave background, inset shadow */
#object-viewer.viewer-image {
  aspect-ratio: 1/1;
  max-height: 80vh;
  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), and accordions
 * (collapsible content sections). 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. 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.6.0
 */
/* ========================================
   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-panel-layer2-text);
  border-color: rgba(255, 255, 255, 0.1);
}

#panel-layer2 .telar-widget {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  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-panel-layer2-text);
}
#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 {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
}
#panel-layer2 .telar-widget-carousel .carousel-caption-below small,
#panel-layer2 .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-panel-layer2-text);
  opacity: 0.7;
}
#panel-layer1 .telar-widget-tabs .nav-tabs .nav-link.active {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border: none;
  opacity: 1;
}
#panel-layer1 .telar-widget-tabs .tab-content {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  border-radius: 0 0.5rem 0 0;
}

/* Panel-layer2: uses layer1 colors (light purple) */
#panel-layer2 .telar-widget-tabs {
  background: transparent;
  border: none;
}
#panel-layer2 .telar-widget-tabs .nav-tabs {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 0;
}
#panel-layer2 .telar-widget-tabs .nav-tabs .nav-item {
  margin: 0;
}
#panel-layer2 .telar-widget-tabs .nav-tabs .nav-item:first-child .nav-link {
  margin-left: 0;
}
#panel-layer2 .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-panel-layer1-text);
  opacity: 0.7;
}
#panel-layer2 .telar-widget-tabs .nav-tabs .nav-link.active {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  border: none;
  opacity: 1;
}
#panel-layer2 .telar-widget-tabs .tab-content {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  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-button-text);
  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-panel-layer2-text);
}
#panel-layer1 .telar-widget-accordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-panel-layer2-text);
}
#panel-layer1 .telar-widget-accordion .accordion-body {
  color: var(--color-panel-layer2-text);
}

#panel-layer2 .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 {
  background: rgba(0, 0, 0, 0.02);
  color: var(--color-panel-layer1-text);
}
#panel-layer2 .telar-widget-accordion .accordion-button:not(.collapsed) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-panel-layer1-text);
}
#panel-layer2 .telar-widget-accordion .accordion-body {
  color: var(--color-panel-layer1-text);
}

/* ========================================
   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;
  }
}
@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 (like mobile) 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.6.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 (like mobile) */
  }
  body.embed-mode .story-navigation {
    display: block;
  }
  body.embed-mode {
    /* Show mobile 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 (v0.5.0):
     * - Button navigation (like mobile) 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 {
    /* Show mobile navigation buttons in embed mode (even on desktop viewports) */
    /* Positioned over narrative panel, horizontally centered, with dynamic bottom spacing */
  }
  body.embed-mode .mobile-nav {
    position: fixed;
    left: 20%;
    /* The vertical-layout base pins `right`; with both edges set, the fixed
       box stretches across the viewport and translateX(-50%) throws it
       off-screen. Intrinsic width keeps it centred over the narrative column. */
    right: auto;
    bottom: max(8%, 1.5rem);
    transform: translateX(-50%);
    z-index: 9900;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
  }
  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;
    }
  }
  /* Mobile-sized embeds: revert to mobile positioning (right side, vertically stacked) */
  /* This media query is at root level to ensure proper source order over desktop embed rules */
  /* Boundary matches the canonical vertical-layout breakpoint (_responsive.scss $telar-vertical-min-width) */
  @media (max-width: 1024px) {
    body.embed-mode .mobile-nav {
      right: 1rem;
      left: auto;
      bottom: 50%;
      transform: translateY(50%);
      flex-direction: column;
    }
  }
  @media (max-width: 1024px) 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) {
    body.embed-mode .mobile-nav .mobile-prev:hover:not(:disabled),
    body.embed-mode .mobile-nav .mobile-next:hover:not(:disabled) {
      transform: scale(1.05);
    }
  }
  /* "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);
  }
  .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.6.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: white;
  }
  #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: white;
  }
  #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: white;
    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.6.0
 */
.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 a JS luminance check
 * adds .coord-dark or .coord-light to adapt text and field colours.
 *
 * @version v1.4.0
 */
/* Panel container */
.coordinate-panel {
  background-color: var(--color-button-bg);
  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;
}

.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 {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  border: none;
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  background: transparent;
}

/* "Identify coordinates" button — sits outside the panel, uses theme colour directly */
.btn-developer {
  background: var(--color-button-bg);
  color: var(--color-button-text);
  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 {
  font-weight: 600;
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-copy:hover {
    transform: translateY(-1px);
  }
}
/* -------------------------------------------------------
 * Dark background variant (luminance <= 0.179)
 * Light text, semi-transparent overlays
 * ------------------------------------------------------- */
.coord-dark {
  color: #fff;
}
.coord-dark .coordinate-panel-heading {
  color: #fff;
}

.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 .coord-field code {
  color: #fff;
}

.coord-dark .coord-copy-btn {
  color: rgba(255, 255, 255, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .coord-dark .coord-copy-btn:hover {
    color: #fff;
  }
}
.coord-dark .btn-copy {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  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);
  }
}
/* -------------------------------------------------------
 * Light background variant (luminance > 0.179)
 * Dark text, semi-transparent overlays
 * ------------------------------------------------------- */
.coord-light {
  color: #2c3e50;
}
.coord-light .coordinate-panel-heading {
  color: #2c3e50;
}

.coord-light .coord-field {
  background-color: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.coord-light .coord-field code {
  color: #2c3e50;
}

.coord-light .coord-copy-btn {
  color: rgba(0, 0, 0, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .coord-light .coord-copy-btn:hover {
    color: #2c3e50;
  }
}
.coord-light .btn-copy {
  background: rgba(0, 0, 0, 0.08);
  color: #2c3e50;
  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.6.0
 */
/* CSS Variables with hardcoded trama defaults as ultimate fallback */
:root {
  /* Text colors */
  --color-heading: #003660;
  --color-body: #333333;
  --color-link: #047C91;
  --color-accent: #047C91;
  --color-button-text: #FFFFFF;
  --color-panel-layer1-text: #FFFFFF;
  --color-panel-layer2-text: #FFFFFF;
  --color-panel-glossary-text: #333333;
  /* Background colors */
  --color-button-bg: #FEBC11;
  --color-panel-layer1-bg: #047C91;
  --color-panel-layer2-bg: #003660;
  --color-panel-glossary-bg: #F1EEEA;
  /* Fonts */
  --font-headings: 'Roboto Serif', serif;
  --font-body: 'Nunito Sans', 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 */