/* Research film editorial design */
:root { --paper:#111b1c; --ink:#f1f0e8; --muted:#b2bfbb; --rule:#35413d; --dark-amber:#d2e8a2; --amber:#d2e8a2; }
body { background:#0c1314; }
.wrap { width:min(1280px,calc(100% - 112px)); }
.masthead { background:#0c1314; }
.masthead-inner { min-height:83px; }
.author { font-size:14px; letter-spacing:-.02em; }
.player.is-ready { min-height:620px; height: min(76vw,740px); max-height:calc(100svh - 140px); margin:0 24px; border-radius:5px; overflow:hidden; }
.film-cover { background:linear-gradient(90deg,#081011ee 0%,#081011bd 37%,#08101124 100%),linear-gradient(0deg,#081011c0,transparent 65%),url("media/cockermouth.webp") center/cover no-repeat; }
.cover-inner { padding-block:60px; width:min(1232px,calc(100% - 64px)); }
.cover-inner::before,.cover-inner::after { display:none; }
.title-block h1 {
  max-width: 16ch;
  font: 520 clamp(2.65rem, 5.4vw, 5.25rem)/1.04 Inter, sans-serif;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.film-title-detail {
  display: block;
  margin-top: .5em;
  color: var(--amber);
  font-size: .46em;
  line-height: 1.22;
  letter-spacing: -.035em;
}
.eyebrow { font-size:10px; letter-spacing:.15em; margin-bottom:25px; }
.eyebrow>span { width:6px;height:6px;border-radius:50%; }
.film-subtitle { font-size:17px; line-height:1.55; margin-top:29px; }
.play-button { margin-top:34px; gap:18px; }
.play-icon { background:#d2e8a2; width:61px;height:61px; box-shadow:none; }
.play-button:hover .play-icon { background:#e5f5c2; box-shadow:0 0 0 8px #d2e8a21a; }
.map-label { bottom:28px;right:0;background:#0b171ac9;border-color:#a5bbae35; }
.research { background:#111b1c; }
.research-intro { padding-block:110px;grid-template-columns:1.2fr 1fr;align-items:center;gap:90px; }
.research h2 { font:480 clamp(40px,4.6vw,68px)/1.06 Inter,sans-serif;letter-spacing:-.065em;text-wrap:initial; }
.research-lede { font-size:16px;line-height:1.75;max-width:49ch; }
.approach { padding-block:95px 55px; }
.approach-heading { display:grid;grid-template-columns:1.2fr 1fr;gap:0 90px;align-items:end;margin-bottom:45px; }
.approach-heading .eyebrow { grid-column:1/-1; }
.approach-heading>p:last-child { margin:0;max-width:43ch;line-height:1.75;color:#b2bfbb; }
.method { border-top:0; }
.method>li { grid-template-columns:35px minmax(0,1fr) minmax(0,1.2fr);gap:35px;align-items:center;padding-block:45px;border-color:#35413d; }
.method>li::before { display:none; }
.step { align-self:start;margin-top:8px;background:transparent;border:0;font-size:12px;color:#819590; }
.method h3 { font:500 clamp(25px,2.5vw,36px)/1.15 Inter,sans-serif;letter-spacing:-.045em;margin-bottom:20px;max-width:17ch; }
.method p { font-size:14px;line-height:1.8;max-width:46ch; }
.system-visual { border:1px solid #3e514a;border-radius:9px;padding:24px;background:radial-gradient(ellipse at 60% 30%,#263b32,#162321 75%);min-height:255px; }
.visual-label { font:10px var(--mono);letter-spacing:.09em;color:#b4c8bc; }
.system-visual figcaption { color:#a6b9af;font-size:10px;margin-top:24px;display:flex;align-items:center;gap:8px; }
.network-grid { position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:145px;max-width:310px;margin:20px auto 0;background:linear-gradient(90deg,transparent 16.4%,#627e6e 16.4%,#627e6e 16.8%,transparent 16.8%,transparent 49.8%,#627e6e 49.8%,#627e6e 50.2%,transparent 50.2%,transparent 83.2%,#627e6e 83.2%,#627e6e 83.6%,transparent 83.6%),linear-gradient(transparent 16.4%,#627e6e 16.4%,#627e6e 17.2%,transparent 17.2%,transparent 49.6%,#627e6e 49.6%,#627e6e 50.4%,transparent 50.4%,transparent 82.8%,#627e6e 82.8%,#627e6e 83.6%,transparent 83.6%); }
.network-grid i { width:9px;height:9px;border:2px solid #d2e8a2;border-radius:50%;background:#1c2e27;place-self:center; }
.closure { position:absolute;top:calc(50% - 13px);left:calc(33.3% - 13px);width:26px;height:26px;text-align:center;line-height:24px;border:1px solid #ff9a7d;border-radius:50%;color:#ff9a7d;background:#292723; }
.legend-dot { width:5px;height:5px;border-radius:50%;background:#d2e8a2; }.legend-dot.closed { margin-left:12px;background:#ff9a7d; }
.option-row { margin-top:30px;display:grid;grid-template-columns:85px 1fr;gap:20px;align-items:center;font-size:11px;color:#dce5dc; }
.flow-track { display:flex;gap:7px;align-items:center;min-height:20px;border-bottom:1px solid #627e6e;padding-bottom:5px; }
.flow-track i { width:13px;height:8px;border-radius:2px;background:#d2e8a2; }
.split-track { display:grid;gap:13px; }
.agent-node,.human-node { margin:21px auto 0;padding:13px;border:1px solid #58715e;border-radius:5px;max-width:300px;font-size:14px; }
.agent-node span,.human-node span { display:block;margin-top:5px;color:#adbbb0;font-size:10px; }
.human-node { margin-top:0;border-color:#b2c88c;background:#d2e8a20b; }
.connector { text-align:center;color:#b2c88c;height:24px; }
.decision-visual figcaption { margin-top:15px; }
.evaluation { background:#d2e8a2;color:#182921; }
.evaluation-inner { padding-block:85px; }
.evaluation .eyebrow { color:#385233; }
.evaluation-heading>p:last-child,.evaluation-note { color:#3e553e; }
.evaluation-grid { margin-top:35px;gap:0; }
.evaluation-grid>div,.evaluation-grid>div:first-child { background:transparent;border:0;border-top:1px solid #526d4355;border-radius:0;padding:24px 24px 24px 0; }
.evaluation-grid>div+div { padding-left:24px;border-left:1px solid #526d4355; }
.evaluation dt { font:550 22px Inter,sans-serif;color:#182921;letter-spacing:-.04em; }
.evaluation dd { color:#3e553e;font-size:14px;line-height:1.7; }
.footer-inner { padding-block:28px; }
@media(max-width:1000px) {
.wrap { width:calc(100% - 64px); }
.research-intro,.approach-heading { gap:24px 40px; }
.method>li { grid-template-columns:24px 1fr 1fr;gap:18px; }
.system-visual { padding:17px; }
}
@media(max-width:760px) {
.wrap { width:calc(100% - 40px); }
.masthead-inner { min-height:63px; }
.player.is-ready { margin:0 10px;min-height:510px;height:65svh;max-height:none; }
.cover-inner { width:calc(100% - 34px);padding-block:40px; }
.title-block h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
.film-subtitle { font-size:14px; }
.map-label { font-size:9px;bottom:19px; }
.research-intro,.approach-heading { display:block; }
.research-intro { padding-block:60px; }.research-lede { margin-top:25px;font-size:14px; }
.approach { padding-block:55px 25px; }
.approach-heading>p:last-child { margin-top:23px;font-size:14px; }
.method>li { grid-template-columns:25px minmax(0,1fr);gap:13px;padding-block:28px; }
.system-visual { grid-column:2;min-height:225px;margin-top:10px; }
.method h3 { font-size:27px;max-width:22ch; }.method p { font-size:14px; }
.evaluation-inner { padding-block:55px; }
.evaluation-grid>div,.evaluation-grid>div:first-child,.evaluation-grid>div+div { padding:22px 0;border-left:0; }
.player.is-ready.is-playing { min-height:0;height:auto;aspect-ratio:16/9; }
}

.research-icon {
  display: block;
  flex: 0 0 32px;
  border-radius: 7px;
}
.abstract-layout {
  display: grid;
  width: min(1140px, calc(100% - 112px));
  grid-template-columns: minmax(0, 1fr) minmax(265px, 310px);
  align-items: start;
  gap: 24px clamp(26px, 3.6vw, 52px);
  padding-block: clamp(42px, 5vw, 72px);
}
.abstract-layout > h2 {
  grid-column: 1 / -1;
  font-size: clamp(2.35rem, 4vw, 3.5rem);
}
.abstract-copy p {
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.75;
}
.abstract-copy p + p { margin-top: 16px; }
.research-links { display: grid; gap: 12px; }
.proposal-card {
  padding: 22px;
  border: 1px solid #3e514a;
  border-radius: 8px;
  background: #192623;
}
.proposal-card h3 { font-size: 1.1rem; letter-spacing: -.025em; }
.proposal-card p { margin: 6px 0 18px; color: var(--muted); font-size: .87rem; }
.proposal-download, .profile-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: .84rem;
}
.proposal-download { color: #182921; background: var(--amber); font-weight: 650; }
.proposal-download:hover { background: #e5f5c2; }
.profile-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.profile-links a { border: 1px solid #3e514a; }
.profile-links a:hover { background: #263831; }

@media (max-width: 850px) {
  .abstract-layout {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .research-links { width: min(100%, 420px); }
}

.ui-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}
.section-link .ui-icon, .map-label .ui-icon, .proposal-card h3 .ui-icon, .profile-links .ui-icon {
  color: var(--amber);
}
.section-link .link-label { color: inherit; }
.play-icon .film-play {
  width: 23px;
  height: 23px;
  margin-left: 2px;
  color: #182921;
  fill: currentColor;
}
.map-label .ui-icon { width: 16px; height: 16px; }
.proposal-card h3 { display: flex; align-items: center; gap: 9px; }
.profile-links a { justify-content: center; padding-inline: 6px; gap: 6px; }
.profile-links .ui-icon { width: 15px; height: 15px; }


.chapters {
  background: #0c1314;
  padding-block: 16px 24px;
}
.chapters-inner {
  display: grid;
  gap: 11px;
  padding: clamp(12px, 1.5vw, 20px);
  border: 1px solid #a6c2b32b;
  border-radius: 12px;
  background:
    linear-gradient(115deg, #172523ee, #101a1ae8),
    url("media/cockermouth.webp") center 54% / cover;
  box-shadow: inset 0 1px #ffffff0d;
}
.chapters h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bccbc4;
  font: .69rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .095em;
}
.chapters h2 .ui-icon { width: 16px; height: 16px; }
.chapters ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
}
.chapters button {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 9px;
  row-gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 61px;
  padding: 9px;
  border: 1px solid #a6c2b325;
  border-radius: 7px;
  background: linear-gradient(145deg, #ffffff0c, #ffffff04);
  backdrop-filter: blur(10px);
  color: #e5ece7;
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease;
}
.chapters button:hover {
  background-color: #d2e8a214;
  border-color: #a6c2b35e;
}
.chapters button:focus-visible { outline-offset: -3px; }
.chapters button[aria-current] {
  background-color: #d2e8a21a;
  border-color: #d2e8a27a;
}
.chapters .time {
  grid-column: 2;
  grid-row: 1;
  color: #b2c0bb;
  font: .69rem var(--mono);
  font-variant-numeric: tabular-nums;
}
.chapter-label {
  grid-column: 2;
  grid-row: 2;
  font-size: .76rem;
  font-weight: 550;
  line-height: 1.2;
}
.chapter-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 29px;
  height: 29px;
  padding: 6px;
  border-radius: 5px;
  background: #c4ded012;
  color: #b4c7bc;
}
.chapters button[aria-current] :is(.time, .chapter-icon) { color: var(--amber); }
.chapters button[aria-current] .chapter-icon { background: #d2e8a222; }
@media (max-width: 1150px) {
  .chapters ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .chapters { padding-block: 12px 18px; }
  .chapters-inner { width: calc(100% - 20px); }
  .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .chapters button { transition: none; }
}

/* Keep the hover response subtle and consistent across controls. */
.section-link, .proposal-download, .profile-links a, .chapters button {
  transition: background-color 260ms ease, border-color 260ms ease,
    color 260ms ease, box-shadow 300ms ease,
    transform 300ms cubic-bezier(.2, .75, .25, 1);
}
.play-icon {
  transition: transform 340ms cubic-bezier(.2, .75, .25, 1),
    box-shadow 340ms ease, background-color 260ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chapters button:hover, .proposal-download:hover, .profile-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 13px #080e102c;
  }
  .play-button:hover .play-icon { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .play-button:hover .play-icon { transform: none; }
}