/* Colours based on jackandjill.ai; serif is our own (EB Garamond) */
:root {
  --white: #ffffff;
  --paper: #f9f9f6;
  --panel: #f2f2eb;
  --ink: #100f0f;
  --ink-hover: #2a2a2f;
  /* Our own brand colour: a deep, bookish green */
  --brand: #1f4d3a;
  --brand-hover: #2a6049;
  --muted: rgba(16, 15, 15, 0.6);
  --line: rgba(16, 15, 15, 0.08);
  --sky: #00ccfa;
  --coral: #ff8042;
  --orchid: #f97cde;
  --emerald: #27d271;
  --honey: #ffd862;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "EB Garamond", ui-serif, Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 32px;
}

.muted { color: var(--muted); }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--white);
}
.header-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 15px;
  color: var(--muted);
}
.nav-links a { transition: color 0.15s; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }

.pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.15s;
}
.pill:hover { background: var(--brand-hover); }

.pill-lg { height: 44px; padding: 0 22px; font-size: 16px; }

/* Opening blocks (home hero, page heroes, sign up): header (68px) plus the block fill one
   screen, and the tag + headline start the same distance below the header on every page.
   svh leaves room for a phone's browser bars. */
:root { --headline-top: 17vh; }
@supports (height: 1svh) { :root { --headline-top: 17svh; } }
@media (max-width: 860px) {
  :root { --headline-top: 28vh; }
  @supports (height: 1svh) { :root { --headline-top: 28svh; } }
}

.hero {
  text-align: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--headline-top);
  padding-bottom: 24px;
}


/* Tags: a softened sky blue that sits with the green and beige.
   Ink text on it has a contrast of 10:1 (passes WCAG AA and AAA). */
.highlight {
  display: inline-block;
  background: #7cc6df;
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

h1 {
  margin-top: 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 100px);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.card { display: flex; flex-direction: column; }
.card .panel { flex: 1; display: flex; }
.card .mock { flex: 1; }
.card-head { margin-bottom: 32px; }
.card-head p,
.card-head h2 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.panel {
  position: relative;
  isolation: isolate;
  background: var(--panel);
  padding: 48px;
  overflow: hidden;
}

.mock {
  position: relative;
  background: var(--white);
  border-radius: 10px;
  padding: 22px 24px 28px;
  box-shadow: 0 1px 2px rgba(16, 15, 15, 0.04), 0 8px 24px rgba(16, 15, 15, 0.06);
  font-size: 14px;
}

.mock-top {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 16px;
}
.mock-meta { color: var(--muted); font-weight: 400; font-size: 12px; }

/* Timeline in the mock */
.steps { list-style: none; }
.steps li {
  position: relative;
  padding: 0 0 12px 26px;
  color: var(--muted);
}
.steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 15, 15, 0.2);
  background: var(--white);
  z-index: 1;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: rgba(16, 15, 15, 0.12);
}
.steps li:last-child::after { display: none; }
.steps li.done,
.steps li.current { color: var(--ink); }
.steps li.done::before { background: var(--ink); border-color: var(--ink); }
.steps li.current::before { border-color: var(--ink); box-shadow: 0 0 0 4px var(--panel); }
.steps em {
  font-style: normal;
  font-size: 12px;
  margin-left: 8px;
  background: var(--honey);
  padding: 1px 6px;
}

/* Study types in the mock */
.types { list-style: none; }
.types li {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
}
.types li span { color: var(--muted); font-size: 12px; }
.types li.selected { background: var(--panel); font-weight: 500; }

.progress { margin-top: 20px; padding: 0 12px; }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.bar { height: 6px; background: var(--panel); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); }

/* Study-type strip (like their logo row) */
.strip {
  margin-top: 96px;
  padding: 24px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.strip-track {
  display: flex;
  gap: 72px;
  width: max-content;
  animation: scroll 45s linear infinite;
}
.strip-track span {
  font-family: var(--serif);
  font-size: 30px;
  white-space: nowrap;
  color: var(--ink);
}
@keyframes scroll {
  to { transform: translateX(calc(-50% - 36px)); }
}
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
}

/* Footer */
.footer {
  margin-top: 96px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.footer-brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--muted);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 15px;
  color: var(--muted);
}
.footer-links a:hover { color: var(--ink); }
.footer-base {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding-top: 20px;
  padding-bottom: 32px;
  position: relative;
}

/* Mobile */
@media (max-width: 860px) {
  .container { padding: 0 16px; }
  .nav-links { display: none; }
  .hero { padding-top: var(--headline-top); padding-bottom: 0; } /* .container's padding shorthand above would reset it */
  .cards { grid-template-columns: 1fr; gap: 112px; }
  .card-head p, .card-head h2 { font-size: 22px; }
  .panel { padding: 32px 20px; }
  .strip-track span { font-size: 24px; }
  .footer-inner { flex-direction: column; }
  .footer-base { padding-top: 40px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Sign-up page (split layout) */
.split-page { height: 100vh; height: 100dvh; overflow: hidden; }

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  height: 100vh;
  height: 100dvh;
}

.journey {
  position: relative;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
  overflow: hidden;
}

.journey-inner {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: 10px;
  padding: 32px 32px 28px;
  box-shadow: 0 1px 2px rgba(16, 15, 15, 0.04), 0 16px 40px rgba(16, 15, 15, 0.07);
}

.journey-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

.route { list-style: none; }
.route li {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
}
.route li:last-child { padding-bottom: 0; }

/* line between nodes */
.route li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: rgba(16, 15, 15, 0.1);
}
.route li:last-child::before { display: none; }
.route li.done::before { background: var(--ink); }

.node {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid rgba(16, 15, 15, 0.18);
  background: var(--white);
  position: relative;
  z-index: 1;
}
.done .node { background: var(--ink); border-color: var(--ink); }
.current .node {
  border-color: var(--ink);
  box-shadow: 0 0 0 5px var(--honey);
  animation: pulse 2.4s ease-in-out infinite;
}
.goal .node { border-color: var(--emerald); background: var(--emerald); opacity: 0.35; }

@keyframes pulse {
  50% { box-shadow: 0 0 0 8px rgba(255, 216, 98, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .current .node { animation: none; }
}

.stage {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
  color: rgba(16, 15, 15, 0.4);
}
.done .stage,
.current .stage { color: var(--ink); }
.stage em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  background: var(--honey);
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 3px;
}
.note { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.journey-progress {
  margin-top: 28px;
}

.side {
  display: flex;
  flex-direction: column;
  padding: 32px 48px;
}

.side-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 0;
}
.side-body h1 {
  margin-top: 20px;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.06;
}
.side-body p { margin: 16px 0 32px; font-size: 16px; }

.pill-block { width: 100%; justify-content: center; }

/* Sits right under the PaperRoute header, above the centred invite message */
.back-link {
  align-self: flex-start;
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
}
.back-link:hover { color: var(--ink); }

.side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.side-top .nav-links { gap: 24px; font-size: 14px; }

.points {
  list-style: none;
  margin: -12px 0 32px;
  font-size: 15px;
}
.points li {
  position: relative;
  padding: 5px 0 5px 22px;
}
.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

/* Several papers at once (academics page) */
.paper-list { list-style: none; }
.paper-list li { padding: 16px 0; }
.paper-list li:first-child { padding-top: 0; }
.paper-list li:last-child { padding-bottom: 0; }
.paper-title { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.paper-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 10px;
}

/* Statement card (about page) */
.statement {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.statement em { display: block; margin-top: 12px; }

/* Shorter screens: tighten the sign-up timeline so it fits in one screen */
@media (max-height: 760px) {
  .journey { padding: 32px 48px; }
  .split .journey-inner { padding: 24px 28px 20px; }
  .split .journey-label { margin-bottom: 16px; }
  .split .route li { padding-bottom: 12px; }
  .split .stage { font-size: 18px; }
  .split .note { font-size: 12px; }
  .split .journey-progress { margin-top: 18px; }
  .side-body h1 { font-size: 38px; }
  .side-body p { margin: 12px 0 24px; }
}

/* Phones: one column, timeline hidden so the page stays one screen */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .journey { display: none; }
  .side { padding: 24px 16px; }
  /* the logo and back link already take 101px, versus the 68px header elsewhere */
  .side-body { justify-content: flex-start; padding-top: calc(var(--headline-top) - 33px); }
  .side-body h1 { margin-top: 28px; font-size: 48px; } /* same headline size and spacing as the other pages */
  .side-top .nav-links { display: none; }
}

/* Regular pages: academics, students, about. The opening block fills one screen, like the home hero */
.page-hero {
  text-align: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--headline-top);
  padding-bottom: 24px;
}

.lede {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 18px;
  color: var(--muted);
}

.showcase {
  display: flex;
  justify-content: center;
  padding: 64px 32px;
}
.showcase .journey-inner { max-width: 480px; }

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 80px;
}
.feature-row h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
}
.feature-row p { color: var(--muted); font-size: 15px; margin-top: 6px; }

.page-cta {
  text-align: center;
  margin-top: 96px;
}

@media (max-width: 860px) {
  .showcase { padding: 40px 16px; }
  .feature-row { grid-template-columns: 1fr; gap: 40px; margin-top: 96px; }
  .page-cta { margin-top: 96px; }
}

/* Charts and diagrams */
:root {
  /* Phase colours: five earthy hues that sit with the forest green and beige.
     Validated for colour-blind separation on the beige panel. Publish ends on green. */
  --phase-1: #5a74c4; /* Plan: dusty indigo */
  --phase-2: #d2663e; /* Approvals: terracotta */
  --phase-3: #a45a9c; /* Gather: plum */
  --phase-4: #d49b2c; /* Write: ochre */
  --phase-5: #2f8a62; /* Publish: green */
  /* Two-series colours for the radar chart */
  --series-a: #28805a; /* green, validated as a pair with the ochre */
  --series-b: #c88a35; /* ochre */
}
.viz-section { margin-top: 160px; }
.section-head { margin-bottom: 32px; }
.section-head p,
.section-head h2 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.viz-panel { padding: 40px 48px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Study routes: thin lines, one mark per step, every row the same length */
.routes-panel {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 56px 64px 44px;
}

.rl-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-left: 220px;
  margin-bottom: 40px;
  font-size: 13px;
  color: var(--muted);
}
.rl-legend li { display: inline-flex; align-items: center; gap: 8px; }
.rl-legend i { width: 18px; height: 5px; border-radius: 3px; }

.rl-rows { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 20px; }
.rl-row {
  display: grid;
  grid-template-columns: 188px 1fr 72px;
  align-items: center;
  gap: 32px;
}
.rl-name { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.rl-count { font-size: 13px; color: var(--muted); text-align: right; }

.rl-line { display: flex; gap: 14px; }
/* One hover target per phase; the steps are listed in its tooltip */
.phase {
  display: flex;
  align-items: center;
  padding: 14px 0; /* generous hover target around a slim line */
  cursor: default;
  transition: opacity 0.2s;
}
.phase i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
  transition: transform 0.15s;
}
.phase:hover i,
.phase:focus-visible i { transform: scaleY(2); }
.ph-1 { color: var(--phase-1); }
.ph-2 { color: var(--phase-2); }
.ph-3 { color: var(--phase-3); }
.ph-4 { color: var(--phase-4); }
.ph-5 { color: var(--phase-5); }
.rl-legend .ph-1 { background: var(--phase-1); }
.rl-legend .ph-2 { background: var(--phase-2); }
.rl-legend .ph-3 { background: var(--phase-3); }
.rl-legend .ph-4 { background: var(--phase-4); }
.rl-legend .ph-5 { background: var(--phase-5); }

.rl-line:hover .phase { opacity: 0.35; }
.rl-line .phase:hover,
.rl-line .phase:focus-visible { opacity: 1; }
.phase:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.rl-name { display: inline-flex; align-items: center; gap: 8px; }
.qmark {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 15, 15, 0.08);
  color: var(--muted);
  font: 600 11px/18px var(--sans);
  text-align: center;
  cursor: help;
  transition: background-color 0.15s, color 0.15s;
}
.qmark:hover,
.qmark:focus-visible { background: var(--ink); color: var(--white); outline: none; }

.section-lede {
  max-width: 560px;
  margin-top: 12px;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--muted);
  letter-spacing: 0 !important;
}

.rl-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 40px;
  margin-left: 220px;
  font-size: 13px;
  color: var(--muted);
}
.rl-foot .viz-table { margin-top: 0; flex-basis: auto; }
.rl-foot .viz-table[open] { flex-basis: 100%; order: 2; }

.viz-note { font-size: 13px; color: var(--muted); margin-top: 24px; }

.viz-table { margin-top: 12px; font-size: 13px; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.viz-table summary:hover { color: var(--ink); }
.table-wrap { overflow-x: auto; margin-top: 12px; background: var(--white); border-radius: 8px; }
.viz-table table { border-collapse: collapse; width: 100%; min-width: 720px; }
.viz-table th,
.viz-table td { text-align: left; vertical-align: top; padding: 10px 12px; }
.viz-table thead th { font-weight: 600; }
.viz-table tbody tr:nth-child(odd) { background: var(--paper); }

.tip {
  position: fixed;
  z-index: 20;
  max-width: 260px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
}
.tip { max-width: 340px; padding: 12px 16px; }
.tip strong { display: block; font-size: 14px; }
.tip p { margin-top: 4px; color: rgba(255, 255, 255, 0.85); }
.tip .tip-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}
.tip .tip-need { margin-top: 8px; color: var(--white); }
.tip .tip-need span { color: var(--honey); font-weight: 500; }
.tip ol { margin: 8px 0 0 18px; display: grid; gap: 6px; }
.tip ol b { color: var(--white); font-weight: 600; }
.tip li { color: rgba(255, 255, 255, 0.85); }

/* Radar (academics page) */
.radar-panel {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}
.radar-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: center;
}
.radar { display: block; width: 100%; max-width: 760px; height: auto; max-height: calc(80vh - 112px); margin: 0 auto; overflow: visible; }
.radar .ring-a { fill: rgba(16, 15, 15, 0.035); }
.radar .ring-b { fill: var(--white); }
.radar text { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.radar .axis { cursor: default; transition: fill 0.15s; }
.radar .axis:hover, .radar .axis:focus-visible { fill: var(--series-a); outline: none; font-weight: 600; }
.radar .series { fill-opacity: 0.18; stroke-width: 2; stroke-linejoin: round; cursor: default; transition: fill-opacity 0.2s, opacity 0.2s; }
.radar .series:hover { fill-opacity: 0.38; }
.radar:has(.s-1:hover) .s-2,
.radar:has(.s-1:hover) .pt-2,
.radar:has(.s-2:hover) .s-1,
.radar:has(.s-2:hover) .pt-1 { opacity: 0.25; }
.radar .s-1 { fill: var(--series-a); stroke: var(--series-a); }
.radar .s-2 { fill: var(--series-b); stroke: var(--series-b); }
.radar .pt { stroke: var(--white); stroke-width: 2; cursor: default; }
.radar .pt-1 { fill: var(--series-a); }
.radar .pt-2 { fill: var(--series-b); }
.radar .hit { fill: transparent; }
.radar-key h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
}
.radar-key p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.radar-key .legend { flex-direction: column; gap: 12px; font-size: 15px; margin-top: 24px; }
.radar-key .viz-table { margin-top: 24px; }
.radar-key .viz-table[open] { position: relative; }
.radar-key .table-wrap { width: max-content; max-width: 70vw; position: absolute; right: 0; top: 28px; z-index: 2; box-shadow: 0 12px 32px rgba(16, 15, 15, 0.12); }
.radar-key .viz-table table { min-width: 0; }

@media (max-width: 860px) {
  .viz-section { margin-top: 128px; }
  .section-head p, .section-head h2 { font-size: 22px; }
  .viz-panel { padding: 28px 20px; }
  .routes-panel { padding: 28px 20px; min-height: 0; }
  .rl-legend, .rl-foot { margin-left: 0; }
  .rl-row { grid-template-columns: 1fr auto; gap: 0 12px; }
  .rl-line { grid-column: 1 / -1; grid-row: 2; }
  .rl-name { font-size: 18px; }
  .radar-wrap { grid-template-columns: 1fr; gap: 24px; }
  .radar-panel { min-height: 0; padding: 28px 20px; }
  .radar-key .table-wrap { position: static; width: auto; max-width: none; box-shadow: none; }
}

/* Study routes on phones: each study is a row you tap to open its steps (built in viz.js) */
.rl-open, .rl-detail, .narrow-only { display: none; }

@media (max-width: 860px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .rl-legend { margin-bottom: 20px; gap: 8px 16px; }
  .rl-rows { gap: 0; }
  .rl-row { padding: 14px 0 12px; border-top: 1px solid var(--line); }
  .rl-row .rl-name { grid-row: 1; grid-column: 1; }
  .rl-row .rl-count { grid-row: 1; grid-column: 2; }
  .rl-row:last-child { border-bottom: 1px solid var(--line); }
  .rl-name .qmark, .rl-foot { display: none; }
  .rl-line { gap: 6px; pointer-events: none; }
  .rl-line .phase { padding: 10px 0 2px; }

  .rl-count { display: inline-flex; align-items: center; gap: 10px; }
  .rl-count::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s;
  }
  .rl-row.open .rl-count::after { transform: translateY(2px) rotate(-135deg); }

  /* Covers the name, count and line so the whole row is one tap target */
  .rl-open {
    display: block;
    grid-row: 1 / 3;
    grid-column: 1 / -1;
    align-self: stretch; /* the row centres its items, which left this empty button 0px tall */
    margin: -14px 0 -12px;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rl-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .rl-row.open .rl-detail { display: block; grid-row: 3; grid-column: 1 / -1; padding-top: 16px; }
  .rl-desc { margin-bottom: 18px; font-size: 15px; color: var(--muted); }

  /* One coloured route segment per phase, steps listed beside it */
  .rl-group { position: relative; padding: 0 0 18px 20px; }
  .rl-group::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    bottom: 8px;
    width: 4px;
    border-radius: 2px;
    background: currentColor;
  }
  .rl-group-head { font-size: 13px; font-weight: 600; color: var(--ink); }
  .rl-group ol { list-style: none; display: grid; gap: 10px; margin-top: 8px; color: var(--ink); }
  .rl-group li b { display: block; font-size: 15px; font-weight: 500; }
  .rl-group li span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .rl-count::after { transition: none; }
}

/* About: who we are */
.built { max-width: 640px; margin: 0 auto; text-align: center; }
.built h2 {
  margin-top: 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.built p { margin-top: 16px; font-size: 17px; color: var(--muted); }

/* Academics: supervising students (layered app windows, like the homepage cards) */
.sup-panel {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 720px);
  justify-content: center;
  align-items: start;
  padding: 72px 64px 88px;
}
.sup-side {
  margin-top: 40px;
  margin-right: -24px;
  padding: 22px 20px 120px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 15, 15, 0.04), 0 8px 24px rgba(16, 15, 15, 0.05);
  font-size: 13px;
}
.sup-brand { font-family: var(--serif); font-size: 17px; margin-bottom: 18px; }
.sup-side ul { list-style: none; display: grid; gap: 10px; color: var(--muted); }
.sup-side li.active { color: var(--ink); font-weight: 500; }
.sup-side li.active::before { content: "•"; margin-right: 6px; }

.sup-main {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: 10px;
  padding: 24px 28px 12px;
  box-shadow: 0 1px 2px rgba(16, 15, 15, 0.04), 0 16px 40px rgba(16, 15, 15, 0.07);
}
.sup-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: 14px; margin-bottom: 8px; }

.sup-rows { list-style: none; }
.sup-rows li {
  display: grid;
  grid-template-columns: 32px 150px 1fr 150px 56px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  font-size: 13px;
}
.sup-rows .avatar { width: 32px; height: 32px; font-size: 11px; }
.sup-who b { display: block; font-weight: 500; font-size: 14px; }
.sup-who small { color: var(--muted); font-size: 12px; }
.sup-progress .bar { display: block; height: 4px; }
.sup-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); white-space: nowrap; }
.sup-status i { width: 7px; height: 7px; border-radius: 50%; background: #3f9c74; }
.sup-status.late { color: var(--ink); }
.sup-status.late i { background: var(--honey); }
.sup-nudge {
  justify-self: end;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
}
.sup-nudge.sent { background: #dff1e8; color: #23674a; }
.sup-nudge.none { background: none; }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel);
}

.sup-toast {
  position: absolute;
  z-index: 2;
  right: 48px;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(16, 15, 15, 0.04), 0 18px 44px rgba(16, 15, 15, 0.12);
  font-size: 13px;
}
.sup-toast .avatar { width: 32px; height: 32px; font-size: 11px; background: #dff1e8; color: #23674a; }
.sup-toast b { display: block; font-weight: 500; }
.sup-toast small { color: var(--muted); font-size: 12px; }

@media (max-width: 1000px) {
  .sup-panel { grid-template-columns: 1fr; padding: 32px 20px 96px; }
  .sup-side { display: none; }
  .sup-rows li { grid-template-columns: 32px 1fr auto; }
  .sup-progress, .sup-nudge.none { display: none; }
  .sup-status { grid-column: 2; }
  .sup-nudge { grid-row: 1; grid-column: 3; }
  .sup-toast { right: 20px; bottom: 20px; }
}

/* Dotted route lines */
.hero-route {
  display: block;
  width: 60px;
  height: 140px;
  margin: 48px auto 0;
  overflow: visible;
}
.hero-route circle { fill: var(--brand); }
.hero-route path,
.route-line path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.6;
  stroke-dasharray: 0.1 8;
  stroke-linecap: round;
  opacity: 0.85;
}
/* Phones: one dotted route from under the headline to the first card's own route.
   .hero-trail only reserves the space; hero-route.js draws the line at real pixel size
   (so the dots stay evenly spaced) from the dot under the headline, past the right of
   the card heading, to the top of the first panel at 97% across, where that panel's
   phone route starts. Less flexible room above the headline than below lifts it. */
.hero-trail, .hero-route-m { display: none; }
main { position: relative; }
@media (max-width: 860px) {
  .hero-route { display: none; }
  .hero-trail { display: block; flex: 1; align-self: stretch; margin-top: 28px; }
  .hero-route-m {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
  }
  .hero-route-m path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: 0.85;
  }
  .hero-route-m circle { fill: var(--brand); }
  .cards { padding-top: 44px; }
  .cards .card:first-child .card-head h2 { padding-right: 36px; }
}

.route-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.journey-inner, .mock { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .hero-route { height: 100px; margin-top: 32px; }
}

/* Academics: your papers (same layered windows as the supervisor view) */
.page-hero + .container > .card-head { margin-top: 24px; }
.pap-rows li { grid-template-columns: minmax(0, 1fr) 140px 120px 48px; }
.pap-who b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.2; }
.pap-who small { color: var(--muted); font-size: 12px; }
.pap-stage { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pap-stage i { width: 7px; height: 7px; border-radius: 50%; }
.pap-count { justify-self: end; color: var(--muted); font-size: 12px; }
.toast-icon { font-size: 14px !important; }

@media (max-width: 1000px) {
  .pap-rows li { grid-template-columns: 1fr auto; }
  .pap-rows .pap-stage { grid-column: 1; }
  .pap-rows .pap-count { grid-row: 1; grid-column: 2; }
}

/* Photos scattered around the message at different sizes, each drifting gently (homepage) */
.gallery-section {
  position: relative;
  height: 760px;
  margin-top: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-copy { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.gallery-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.gallery-copy p { margin: 18px auto 28px; max-width: 420px; color: var(--muted); font-size: 17px; }

.gallery-photo {
  position: absolute;
  width: calc(var(--w) * 1px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  animation: drift var(--speed, 9s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-photo { animation: none; }
}

/* Phones: the photos sit in a staggered collage, three above the message and two below */
@media (max-width: 860px) {
  .gallery-section {
    height: auto;
    max-width: 560px;
    margin-top: 128px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    align-items: start;
  }
  .gallery-photo { position: static; width: 100%; grid-column: span 2; }
  .gallery-photo:nth-of-type(2) { margin-top: 28px; }
  .gallery-photo:nth-of-type(4) { grid-row: 3; grid-column: 2 / span 2; }
  .gallery-photo:nth-of-type(5) { grid-row: 3; grid-column: 4 / span 2; margin-top: 20px; }
  .gallery-copy { grid-row: 2; grid-column: 1 / -1; margin: 32px 0; }
}

/* Students: the first-paper view, wider than the other windows */
.sup-panel.wide { grid-template-columns: 200px minmax(0, 900px); }

.hroute {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 28px 0 32px;
}
.hroute li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
/* connector to the next stage */
.hroute li::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(16, 15, 15, 0.1);
}
.hroute li:last-child::after { display: none; }
.hroute li.done::after { background: var(--ink); }
.hnode {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(16, 15, 15, 0.2);
  background: var(--white);
}
.hroute .done .hnode { background: var(--ink); border-color: var(--ink); }
.hroute .current .hnode { border-color: var(--ink); box-shadow: 0 0 0 5px var(--honey); }
.hroute .goal .hnode { background: var(--brand); border-color: var(--brand); opacity: 0.4; }
.hlabel { font-size: 12px; line-height: 1.3; color: var(--muted); padding: 0 4px; }
.hroute .done .hlabel,
.hroute .current .hlabel { color: var(--ink); }
.hroute .current .hlabel { font-weight: 600; }

.now-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 22px 24px;
  margin-bottom: 16px;
  background: var(--paper);
  border-radius: 10px;
}
.now-kicker { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.now-title { margin-top: 4px; font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.now-note { margin-top: 6px; font-size: 14px; color: var(--muted); max-width: 340px; }
.now-side { display: grid; gap: 10px; justify-items: end; }
.now-due { font-size: 12px; font-weight: 500; background: var(--honey); padding: 3px 10px; border-radius: 6px; }
.now-needs { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 280px; }
.now-needs li { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: var(--white); }

@media (max-width: 1000px) {
  .sup-panel.wide { grid-template-columns: minmax(0, 1fr); }
  .hroute { grid-template-columns: repeat(7, minmax(56px, 1fr)); overflow-x: auto; }
  .now-card { grid-template-columns: 1fr; }
  .now-side { justify-items: start; }
  .now-needs { justify-content: flex-start; }
}

/* About: statement card, wide enough for each line to sit on one row */
.showcase .statement-card { max-width: 600px; padding: 44px 48px; }

/* Academics: supervisor section spacing */
.supervisor-section { margin-top: 160px; }
@media (max-width: 860px) { .supervisor-section { margin-top: 128px; } }

/* Mobile menu: hamburger in the header that opens the main nav as a dropdown */
.menu-toggle {
  display: none;
  flex: none;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(16, 15, 15, 0.2);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .header-inner { gap: 8px; }
  .header-inner .pill { margin-left: auto; }
  .side-top { position: relative; }

  .menu-open .nav-links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 12px 16px 24px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(16, 15, 15, 0.06);
    font-size: 18px;
  }
  .menu-open .nav-links a { padding: 18px 0; }
  .menu-open .nav-links a + a { border-top: 1px solid var(--line); }
  .side-top.menu-open .nav-links { padding: 12px 0 24px; z-index: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span { transition: none; }
}