/*
RHODOS CODE / Teil II von CODE — THE GREAT EXODOS
Theodor (Doc) Yemenis · 2026-11-07 · Version 1.1
*/
:root {
  color-scheme: light;
  --ink: #24211c;
  --muted: #5c5449;
  --paper: #f3ebdc;
  --stone: #e8dcc6;
  --night: #1a1916;
  --gold: #e1bb87;
  --rule: #baa98c;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Arial, sans-serif;
  --mono: Consolas, 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.75 var(--serif); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.13; }
p { margin: 0 0 1em; }
.wrap { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; top: 12px; left: 20px; padding: 10px 14px; transform: translateY(-160%); color: var(--ink); background: var(--paper); }
.skip-link:focus { transform: translateY(0); }
.dark { background: var(--night); color: var(--paper); }
.label, .chapter-label, .frame-caption, .film-index, .status {
  font: 500 .75rem/1.5 var(--mono);
  letter-spacing: .085em;
  text-transform: uppercase;
}
.label, .chapter-label { display: block; margin-bottom: 16px; }
.dark .label, .dark .chapter-label, .dark .status { color: var(--gold); }
.masthead { border-bottom: 1px solid #504739; }
.masthead nav { min-height: 67px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-block: 15px; font: 600 .78rem/1.5 var(--sans); }
.masthead nav a { text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
.masthead .index-links { display: flex; flex-wrap: wrap; gap: 12px 22px; color: #ded0bc; }
.hero { padding: clamp(38px, 6vw, 84px) 0 24px; }
.hero .chapter-label { margin: 0 0 20px; }
.title-line { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.title-line h1 { font-size: clamp(2.85rem, 8.7vw, 7.6rem); line-height: .98; letter-spacing: -.065em; }
.status { border: 1px solid #806a50; padding: 8px 12px; margin: 4px 0 6px; }
.subtitle { font-size: clamp(1.12rem, 2.3vw, 1.75rem); color: #e4cfb2; margin: 18px 0 29px; }
.hero-screen { background: #000; }
.hero-screen img, .film-frame img { width: 100%; }
.frame-caption { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 12px 0; color: var(--muted); font-size: .69rem; }
.dark .frame-caption { color: #cbbb9f; }
.section { padding: clamp(56px, 8.2vw, 108px) 0; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 8%; align-items: start; margin-bottom: 36px; }
.section h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); letter-spacing: -.045em; }
.section h3 { font-size: clamp(1.32rem, 2.3vw, 1.85rem); }
.section-heading > p { color: var(--muted); margin-top: 5px; }
.dark .section-heading > p { color: #d6c6ad; }
.concept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px 8%; }
.concept .lead { font-size: clamp(1.21rem, 2.2vw, 1.52rem); line-height: 1.55; }
.concept .copy p:last-child { margin-bottom: 0; }
.film-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.film-frame a { display: block; background: #000; }
.film-frame h3 { margin: 9px 0 10px; color: var(--gold); }
.film-frame p { color: #dfd1bd; font-size: .98rem; margin: 0; }
.film-index { color: #c5ab87; }
.method { background: var(--stone); }
.method-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.1fr); align-items: start; gap: 34px 8%; }
.analog img { width: 100%; }
.motifs { margin: 0; }
.motifs > div { display: grid; grid-template-columns: 37px minmax(0, 1fr); column-gap: 16px; border-top: 1px solid var(--rule); padding: 18px 0; }
.motifs dt { position: relative; font-size: 1.35rem; line-height: 1.3; }
.motifs dt, .motifs dd { grid-column: 2; margin: 0; }
.motifs .motif-no { position: absolute; left: -53px; top: 0; font: .78rem/1.7 var(--mono); color: #705a3e; }
.motifs dd { color: var(--muted); margin-top: 8px; }
.workbench { border-block: 1px solid var(--rule); }
.workbench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 8%; align-items: center; }
.workbench-grid .work-image { background: var(--night); }
.workbench-grid .work-image img { width: 100%; }
.workbench-grid h2 { margin-bottom: 24px; }
.workbench-grid .related { display: inline-block; margin-top: 8px; font: 600 .86rem/1.6 var(--sans); }
.trilogy { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.trilogy article { border-top: 1px solid #75644e; padding: 21px 0 0; }
.trilogy article[aria-current] { border-top: 3px solid var(--gold); padding-top: 19px; }
.trilogy h3 { margin-bottom: 12px; }
.trilogy p { color: #d6c6ad; }
.trilogy a { color: var(--gold); font: 600 .85rem/1.6 var(--sans); }
.endline { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 24px 0; font: .8rem/1.6 var(--sans); }
.syn-network[data-network-theme="rhodos"] {
  --network-bg: #1a1916;
  --network-card: #26221b;
  --network-text: #f3ebdc;
  --network-muted: #cbbba3;
  --network-line: #665744;
  --network-accent: #e1bb87;
}
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  .film-strip { gap: 16px; }
  .section-heading, .concept, .method-layout, .workbench-grid { column-gap: 32px; }
}
@media (max-width: 660px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding-top: 32px; }
  .title-line { gap: 14px; }
  .title-line h1 { font-size: clamp(2.45rem, 10vw, 4.6rem); }
  .subtitle { margin: 13px 0 22px; }
  .section-heading, .concept, .film-strip, .method-layout, .workbench-grid, .trilogy { grid-template-columns: 1fr; }
  .film-strip { gap: 35px; }
  .film-frame h3 { margin-top: 4px; }
  .analog { max-width: 440px; }
  .section-heading { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The screening sits between the ground-level studies and the discussion of method. */
.screening { background: #26221b; border-top: 1px solid #645540; }
.screening-heading { margin-bottom: 28px; }
.screening-heading h2 { font-size: clamp(2.1rem, 5.5vw, 4.8rem); }
.screening-heading h2 span {
  display: block;
  margin-top: 9px;
  color: var(--gold);
  font-size: .52em;
  letter-spacing: -.015em;
}
.screening-heading > p { margin-top: 14px; color: #d6c6ad; }
.screening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px 5%;
}
.screening-cover, .screening-player {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}
.screening-preview [hidden] { display: none; }
.screening-cover img, .screening-player iframe { width: 100%; height: 100%; border: 0; }
.screening-cover img { object-fit: contain; }
.screening-play {
  position: absolute;
  inset: auto auto 16px 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 15px;
  color: var(--paper);
  background: var(--night);
  border: 1px solid var(--gold);
  font: 600 .86rem/1.45 var(--sans);
}
.screening-cover:hover .screening-play { color: var(--night); background: var(--gold); }
.screening-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
  margin-top: 10px;
  font: .78rem/1.6 var(--sans);
}
.screening-actions p { margin: 0; color: #d6c6ad; }
.screening-actions a, .screening-copy a, .screening-chapters a { color: var(--gold); }
.screening-actions button {
  padding: 5px 8px;
  color: var(--paper);
  background: transparent;
  border: 1px solid #9b8261;
  cursor: pointer;
  font: inherit;
}
.screening-copy h3 { margin-bottom: 14px; }
.screening-copy p { color: #e0d2bc; }
.screening-copy .screening-credit { font: .83rem/1.6 var(--sans); }
.screening-copy a { font: .83rem/1.6 var(--sans); }
.screening-notes { max-width: 820px; margin-top: 25px; }
.screening-notes details { padding: 12px 0; border-top: 1px solid #645540; }
.screening-notes summary { cursor: pointer; color: var(--gold); font: 600 .85rem/1.65 var(--sans); }
.screening-notes details > div { margin-top: 17px; color: #e0d2bc; }
.screening-notes details h3 { margin: 18px 0 10px; font-size: 1.24rem; }
.screening-chapters { margin: 12px 0 0; padding: 0 0 0 1.25em; font: .87rem/1.8 var(--sans); }
.screening-chapters time { display: inline-block; min-width: 3.75em; font-family: var(--mono); }
.screening-companion { margin: 18px 0 0; color: #cbbb9f; font: .76rem/1.65 var(--sans); }
@media (max-width: 760px) {
  .screening-grid { grid-template-columns: 1fr; }
}