/* Radiology Cracks, Direction B (Reading Room).
   Every colour and font lives in the :root block below. To switch to Direction A
   (Journal), swap these token values and nothing else. */

:root {
  /* Fonts */
  --ui: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --prose: 'Literata', Georgia, serif;
  --mark: 'Instrument Serif', Georgia, serif;

  /* Greyscale, darkest to brightest */
  --header: #0A0A0A;
  --well: #0B0B0B;
  --bg: #0F0F0F;
  --panel: #181818;
  --panel-2: #202020;
  --rule: #2F2F2F;
  --rule-strong: #4A4A4A;
  --dim: #9A9A9A;
  --body: #CFCFCF;
  --selected: #E6E6E6;
  --ink: #ECECEC;
  --on-selected: #111111;

  /* The one signal colour, kept for meaning only */
  --sig: #FF6A55;

  /* Wordmark underline, used only on the logo */
  --mark-rule: #FFB020;

  /* Shape */
  --radius: 3px;

  /* The 16 step window and level bar under the header, 14 to 254 */
  --ramp-height: 6px;
  --ramp: linear-gradient(to right,
    #0E0E0E 0 6.25%, #1E1E1E 0 12.5%, #2E2E2E 0 18.75%, #3E3E3E 0 25%,
    #4E4E4E 0 31.25%, #5E5E5E 0 37.5%, #6E6E6E 0 43.75%, #7E7E7E 0 50%,
    #8E8E8E 0 56.25%, #9E9E9E 0 62.5%, #AEAEAE 0 68.75%, #BEBEBE 0 75%,
    #CECECE 0 81.25%, #DEDEDE 0 87.5%, #EEEEEE 0 93.75%, #FEFEFE 0 100%);
}

/* Self hosted fonts, SIL Open Font License, see /fonts/OFL-*.txt */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--ui);
  font-variant-numeric: tabular-nums lining-nums;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; }
ul, ol { list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--selected); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 760px; }

/* Header */
.site-head { background: var(--header); }
.site-head .wrap { display: flex; align-items: center; gap: 40px; min-height: 76px; }
.site-head nav { display: flex; gap: 28px; margin-left: auto; }
.site-head nav a { font-size: 15px; color: var(--dim); text-decoration: none; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--ink); }
.ramp { height: var(--ramp-height); background: var(--ramp); }

/* Wordmark */
.wm { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; }
.wm-t { font: 400 30px/1 var(--mark); color: var(--ink); white-space: nowrap; }
.wm-u { display: block; width: 44px; height: 3px; background: var(--mark-rule); }
.wm.big .wm-t { font-size: 64px; }
.wm.big { gap: 10px; }
.wm.big .wm-u { width: 88px; height: 4px; }

/* Main */
main { flex: 1; padding: 56px 0 80px; }
h1 { font: 700 34px/1.2 var(--ui); color: var(--ink); text-wrap: balance; }
h2 { font: 700 24px/1.25 var(--ui); color: var(--ink); }
h3 { font: 700 18px/1.3 var(--ui); color: var(--ink); }
.lede { font: 400 19px/1.55 var(--prose); color: var(--body); max-width: 62ch; margin-top: 12px; }
.updated { font-size: 14px; color: var(--dim); margin-top: 8px; }

/* Home */
.hero { padding-bottom: 48px; border-bottom: 1px solid var(--rule); margin-bottom: 40px; }
.hero h1:not(.vh) { margin-top: 36px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 32px 36px 30px; text-decoration: none; min-height: 220px;
}
.choice h2 { font-size: 28px; }
.choice p { color: var(--body); max-width: 44ch; }
.choice .go { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 15px; color: var(--dim); }
.choice:hover { border-color: var(--rule-strong); background: var(--panel-2); }
.choice:hover .go { color: var(--ink); }

/* Exams */
.exams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.exam {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px 28px; text-decoration: none; min-height: 96px;
}
.exam h2 { font-size: 22px; }
.exam .state { font-size: 15px; color: var(--dim); white-space: nowrap; }
a.exam { border-color: var(--rule-strong); background: var(--panel-2); }
a.exam .state { font-weight: 700; color: var(--ink); }
a.exam:hover { border-color: var(--selected); }
.exam.soon h2 { color: var(--dim); }

/* Simple holding pages */
.hold p { margin-top: 12px; }
.back { display: inline-block; margin-top: 32px; }

/* Buttons */
.btn {
  display: inline-block; font: 700 15px/1.2 var(--ui); text-decoration: none;
  padding: 11px 18px; border-radius: var(--radius);
  background: transparent; color: var(--ink); border: 1px solid var(--rule-strong);
}
.btn:hover { border-color: var(--selected); }
.btn[disabled] { color: var(--dim); border-color: var(--rule); background: transparent; cursor: not-allowed; }

/* Pricing table, desktop */
.plans { width: 100%; border-collapse: collapse; margin-top: 32px; }
.plans th, .plans td { padding: 13px 16px; text-align: center; vertical-align: middle; }
.plans th:first-child, .plans td:first-child { text-align: left; padding-left: 14px; }
.plans thead th { font-size: 20px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-top: 0; padding-bottom: 16px; width: 18%; }
.plans thead td { border-bottom: 1px solid var(--rule-strong); }
.plans tbody th { font-weight: 400; color: var(--body); }
.plans tbody td { color: var(--ink); }
.plans tbody tr:nth-child(odd) { background: var(--panel); }
.plans tbody tr.first-price th, .plans tbody tr.first-price td { border-top: 1px solid var(--rule-strong); }
.plans .price-row th { font-weight: 700; color: var(--ink); }
.plans .price-row td { font-weight: 700; font-size: 17px; }
.plans .small { font-size: 14px; color: var(--body); font-weight: 400; }
.plans tfoot td { padding-top: 20px; }
.tick { display: inline-block; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; vertical-align: middle; }

.notes { margin-top: 28px; display: grid; gap: 8px; max-width: 72ch; }
.notes li { position: relative; padding-left: 18px; color: var(--body); }
.notes li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; background: var(--dim); border-radius: 1px; }

/* Pricing cards, phone */
.plan-cards { display: none; }
.plan {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 18px 24px;
}
.plan + .plan { margin-top: 12px; }
.plan h2 { font-size: 22px; }
.plan h3 { font-size: 14px; color: var(--dim); margin: 18px 0 8px; }
.plan .incl li { display: flex; gap: 12px; align-items: flex-start; padding: 5px 0; color: var(--body); }
.plan .incl .tick { flex: none; margin: 3px 4px 0 3px; }
.plan .prices div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.plan .prices dt { color: var(--body); }
.plan .prices dd { font-weight: 700; white-space: nowrap; }
.plan .btn { margin-top: 18px; }

/* Legal pages */
.legal ol { margin-top: 32px; display: grid; gap: 16px; counter-reset: item; }
.legal ol li { counter-increment: item; position: relative; padding-left: 34px; font: 400 17px/1.6 var(--prose); color: var(--body); }
.legal ol li::before { content: counter(item) "."; position: absolute; left: 0; top: 1px; font: 700 16px/1.6 var(--ui); color: var(--dim); }
.legal b { font-family: var(--ui); font-weight: 700; color: var(--ink); }
.legal .prose { margin-top: 32px; display: grid; gap: 16px; }
.legal .prose p { font: 400 17px/1.6 var(--prose); color: var(--body); max-width: 66ch; }
.legal a, .hold a, .notes a { text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.legal a:hover, .hold a:hover { text-decoration-color: var(--ink); }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); background: var(--header); padding: 28px 0 32px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-foot a { font-size: 15px; color: var(--body); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
.site-foot small { font-size: 14px; color: var(--dim); }

/* Phone */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .site-head .wrap { flex-wrap: wrap; gap: 6px 20px; padding-top: 16px; padding-bottom: 12px; min-height: 0; }
  .site-head nav { margin-left: 0; flex-basis: 100%; gap: 20px; }
  main { padding: 32px 0 56px; }
  h1 { font-size: 26px; }
  .wm.big .wm-t { font-size: 46px; }
  .wm.big .wm-u { width: 64px; }
  .hero { padding-bottom: 32px; margin-bottom: 28px; }
  .hero h1:not(.vh) { margin-top: 28px; }
  .lede { font-size: 17px; }
  .choices, .exams { grid-template-columns: 1fr; }
  .choice { padding: 22px 18px 22px; min-height: 0; }
  .choice h2 { font-size: 24px; }
  .exam { padding: 20px 18px; min-height: 0; }
  .exam h2 { font-size: 20px; }
  .legal ol li, .legal .prose p { font-size: 16px; }
  .site-foot .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .plans { display: none; }
  .plan-cards { display: block; margin-top: 24px; }
}