/* Echo Travels — static HTML/CSS site, based on approved version 10. */
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #242424;
  --ochre: #b78107;
  --brown: #66523d;
  --font-wordmark: "Futura", "Avenir Next", sans-serif;
  --font-text: "Avenir Next", "Helvetica Neue", sans-serif;
  --weight-normal: 400;
  --weight-emphasis: 500;
  --text-size: 1.125rem;
  --nav-size: 1.375rem;
  --caption-size: 0.875rem;
  --heading-size: 2rem;
  --subheading-size: 1.375rem;
  --wordmark-size: 5rem;
  --text-leading: 1.65;
  --compact-leading: 1.4;
  --heading-leading: 1.2;
  --wordmark-tracking: -0.04em;
  --nav-tracking: 0.01em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --top-space: 4rem;
  --page-width: 71.25rem;
  --reading-width: 33rem;
  --sidebar-width: 9rem;
  --column-gap: var(--space-6);
  --portrait-height: max(20rem, calc(100svh - 10rem));
  --wordmark-zone: calc(var(--portrait-height) + var(--space-3) + var(--caption-size) * var(--compact-leading));
  --nav-height: 3rem;
  --focus-width: 0.125rem;
  --focus-offset: 0.25rem;
  --underline-width: 0.0625rem;
  --underline-offset: 0.2em;
  --sr-size: 1px;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable both-edges; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--weight-normal) var(--text-size)/var(--text-leading) var(--font-text); }
h1, h2, h3, p, ul, figure { margin: 0; }
a { color: var(--brown); text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-color: var(--ochre); }
:focus-visible { outline: var(--focus-width) solid var(--brown); outline-offset: var(--focus-offset); }
img { display: block; max-inline-size: 100%; block-size: auto; }

/* The same three-column composition as version 10. */
.page { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--wordmark-size); column-gap: var(--column-gap); align-items: start; inline-size: fit-content; max-inline-size: min(100%, var(--page-width)); margin-inline: auto; padding: var(--top-space) var(--space-4) var(--space-6); }
.brand-column { grid-column: 3; grid-row: 1; display: flex; justify-content: center; align-items: center; block-size: var(--wordmark-zone); position: sticky; top: var(--top-space); }
.wordmark { display: block; color: var(--ochre); font-family: var(--font-wordmark); font-size: var(--wordmark-size); font-weight: var(--weight-normal); line-height: 1; letter-spacing: var(--wordmark-tracking); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase; text-decoration: none; }
.sidebar { grid-column: 1; grid-row: 1; position: sticky; top: var(--top-space); }
.sidebar ul { list-style: none; padding: 0; }
.nav-button { display: none; }
.sidebar a { display: block; inline-size: fit-content; min-block-size: var(--nav-height); font-size: var(--nav-size); font-weight: var(--weight-normal); line-height: var(--compact-leading); letter-spacing: var(--nav-tracking); text-transform: uppercase; text-decoration: none; }
.sidebar a:hover, .sidebar a[aria-current] { text-decoration: underline; }
.content { grid-column: 2; grid-row: 1; min-inline-size: 0; }

/* Full, unaltered home image. */
.home-portrait { inline-size: fit-content; max-inline-size: 100%; }
.home-portrait > a { display: block; }
.home-portrait img { inline-size: auto; max-block-size: var(--portrait-height); }
figcaption { margin-block-start: var(--space-3); font-size: var(--caption-size); line-height: var(--compact-leading); }

/* Text pages and source lists. */
.article, .poster-overview { inline-size: var(--reading-width); max-inline-size: 100%; }
h1 { font-size: var(--heading-size); font-weight: var(--weight-normal); line-height: var(--heading-leading); }
h2 { color: var(--brown); font-size: var(--subheading-size); font-weight: var(--weight-emphasis); line-height: var(--compact-leading); }
.article > * + * { margin-block-start: var(--space-5); }
.article > h2:not(:first-child) { margin-block-start: var(--space-7); }
.article a { overflow-wrap: anywhere; }
.source-list { list-style: none; padding: 0; }
.source-list li + li { margin-block-start: var(--space-4); }
.link-list { list-style: none; padding: 0; }
.link-list li + li { margin-block-start: var(--space-2); }

/* Poster overview and individual works — images and text only, no players. */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); margin-block-start: var(--space-6); }
.work-grid figure { min-inline-size: 0; }
.work-link { display: block; text-decoration: none; }
.work-link:hover .work-name { text-decoration: underline; }
.work-name { display: block; margin-block-start: var(--space-3); font-size: var(--text-size); line-height: var(--compact-leading); }
.work-status { display: block; margin-block-start: var(--space-1); color: var(--brown); font-size: var(--caption-size); line-height: var(--compact-leading); }
.work-figure img { inline-size: 100%; }
.credits { font-size: var(--caption-size); line-height: var(--compact-leading); }
.credits p + p { margin-block-start: var(--space-2); }
.back-link { display: inline-block; }

/* Narrow screens: wordmark on top, navigation as a wrapping row, one column below. */
@media (max-width: 56rem) {
  :root {
    --wordmark-size: 2.25rem;
    --nav-size: 1rem;
    --heading-size: 1.75rem;
    --subheading-size: 1.25rem;
    --top-space: 1.5rem;
    --nav-button-size: 2.75rem;
    --nav-line: 0.125rem;
  }
  .page { display: block; position: relative; inline-size: auto; padding: var(--top-space) var(--space-4) var(--space-7); }
  .brand-column { display: block; block-size: auto; position: static; }
  .wordmark { writing-mode: horizontal-tb; transform: none; }
  .sidebar { position: static; }
  .sidebar ul { display: none; margin-block-start: var(--space-4); }
  .nav-toggle:checked ~ ul { display: block; }
  .sidebar a { min-block-size: 0; padding-block: var(--space-2); font-size: var(--subheading-size); }
  /* Hamburger: three lines, becomes a cross when open. No JavaScript. */
  .nav-button { display: flex; align-items: center; justify-content: center; position: absolute; inset-block-start: calc(var(--top-space) - (var(--nav-button-size) - var(--wordmark-size)) / 2); inset-inline-end: var(--space-4); inline-size: var(--nav-button-size); block-size: var(--nav-button-size); cursor: pointer; }
  .nav-icon, .nav-icon::before, .nav-icon::after { display: block; inline-size: 1.5rem; block-size: var(--nav-line); background: var(--brown); transition: transform 0.2s, opacity 0.2s; }
  .nav-icon { position: relative; }
  .nav-icon::before, .nav-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
  .nav-icon::before { inset-block-start: -0.5rem; }
  .nav-icon::after { inset-block-start: 0.5rem; }
  .nav-toggle:checked + .nav-button .nav-icon { background: transparent; }
  .nav-toggle:checked + .nav-button .nav-icon::before { transform: translateY(0.5rem) rotate(45deg); }
  .nav-toggle:checked + .nav-button .nav-icon::after { transform: translateY(-0.5rem) rotate(-45deg); }
  .nav-toggle:focus-visible + .nav-button { outline: var(--focus-width) solid var(--brown); outline-offset: var(--focus-offset); }
  .content { margin-block-start: var(--space-5); }
  .home-portrait { inline-size: auto; }
  .home-portrait img { inline-size: 100%; max-block-size: none; }
  .article, .poster-overview { inline-size: auto; max-inline-size: var(--reading-width); }
  .work-grid { gap: var(--space-6) var(--space-4); }
}

@media (max-width: 24rem) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Keyboard access without JavaScript. */
.skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-4); transform: translateY(-200%); padding: var(--space-2); background: var(--paper); color: var(--ink); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; inline-size: var(--sr-size); block-size: var(--sr-size); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }