:root {
  --background: #f8f8f8;
  --main-gray: #252627;
  --heavy-line: #3c3c3c;
  --orange: #ed713a;
  --dim-heading: #6d6f71;
  --purple: #713aed;
  --light-gray: #d3d4d9;
  --mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--background);
  color: var(--main-gray);
  font: 14px/20px var(--mono);
}

a {
  color: var(--heavy-line);
  text-decoration: none;
  border-bottom: 1px dashed var(--main-gray);
  transition: opacity .2s;
}

a:hover { opacity: .65; }

p a, td a, .note a { border-bottom: 1.5px dashed var(--orange); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

p { margin: 0 0 1.25rem; }

.p { color: var(--purple); }
.o { color: var(--orange); }
.dim { color: var(--dim-heading); }

.wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding: 1rem 0 .75rem;
}

.name {
  margin: 0;
  font: 700 32px/36px Rubik, var(--mono);
}

.name a { border: 0; }
.name a:hover { opacity: 1; }

.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}

.top nav a { border-bottom-color: var(--dim-heading); }
.top nav a[aria-current] { color: var(--purple); border-bottom-color: var(--purple); }
.top nav a.out { color: var(--purple); border-bottom-color: var(--purple); }

.what {
  max-width: 62ch;
  margin: 0 0 2rem;
  color: var(--dim-heading);
}

/* Layout */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
}

.page.sub { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.stack { display: grid; gap: 2.5rem; min-width: 0; }

.right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 2rem;
  min-width: 0;
}

.full { grid-column: 1 / -1; }

section { min-width: 0; }

.label {
  display: block;
  margin: 0 0 1.5rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dim-heading);
  color: var(--dim-heading);
  font: 400 1rem/1.25rem var(--mono);
  text-transform: uppercase;
}

.headline {
  margin: 0 0 1.5rem;
  font: 700 24px/30px Rubik, var(--mono);
}

.portrait {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin: 0 auto 2rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 0%;
  border-radius: 250px;
}

.note {
  margin: .75rem 0 0;
  color: var(--dim-heading);
  font-size: 12px;
  line-height: 17px;
}

.go {
  display: inline-block;
  color: var(--purple);
  border-bottom: 1.5px dashed var(--purple);
  text-transform: uppercase;
}

/* Questions */
.qa dt { margin: 0 0 .25rem; font-weight: 700; }
.qa dd { margin: 0 0 1.25rem; }

/* Services */
.services {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 17px;
}

.services td { padding: 0 0 .55rem; vertical-align: middle; }
.services .price { color: var(--dim-heading); white-space: nowrap; padding-left: .75rem; }
.services .heat { width: 26px; padding: 0 0 .55rem .25rem; }
.services .heat i { display: block; width: 22px; height: 17px; }

.pick {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--main-gray);
  background: none;
  color: var(--heavy-line);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pick[aria-pressed="true"] { color: var(--purple); border-bottom-color: var(--purple); }
.pick:hover { opacity: .65; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-top: .75rem;
  font-size: 12px;
}

.legend span { display: inline-flex; align-items: center; gap: .5rem; }
.legend i { display: block; width: 44px; height: 12px; }
.legend .words { background: linear-gradient(90deg, #f3effe, var(--purple)); }
.legend .cost { background: linear-gradient(90deg, #fdf0ea, var(--orange)); }

/* Calculator */
.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: 12px;
}

.controls label { display: grid; gap: .15rem; color: var(--dim-heading); }
.controls .wide { grid-column: 1 / -1; }

select,
input[type="number"],
textarea {
  width: 100%;
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px solid var(--dim-heading);
  border-radius: 0;
  background: transparent;
  color: var(--main-gray);
  font: 14px/20px var(--mono);
}

input[type="range"] { width: 100%; margin: .25rem 0 0; accent-color: var(--purple); }

.total {
  margin: 0;
  font: 700 32px/36px Rubik, var(--mono);
  color: var(--purple);
}

.sum { margin: .1rem 0 .75rem; color: var(--dim-heading); font-size: 12px; line-height: 17px; }

/* Price breakdown */
.breakdown { display: grid; gap: .35rem; }

.return-row {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr) 9ch;
  gap: .5rem;
  align-items: center;
  width: 100%;
  padding: .15rem 0;
  border: 0;
  background: none;
  color: var(--dim-heading);
  font: 12px/17px var(--mono);
  text-align: left;
  cursor: pointer;
}

.return-row:hover { opacity: .7; }
.return-row[aria-pressed="true"] { color: var(--main-gray); font-weight: 700; }
.return-price { text-align: right; }

.return-bar {
  display: flex;
  height: 14px;
  background: transparent;
}

.return-bar i { display: block; height: 100%; }
.seg-base { background: var(--purple); }
.seg-words { background: #b79bf6; }
.seg-rush { background: var(--orange); }
.return-row[aria-pressed="false"] .return-bar { opacity: .4; }
.legend i.seg-base, .legend i.seg-words, .legend i.seg-rush { width: 22px; }

.book-line { margin: 1rem 0 0; }

/* Booking table */
.book {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 17px;
}

.book th {
  padding: 0 .75rem .4rem 0;
  color: var(--dim-heading);
  font-weight: 400;
  text-align: left;
}

.book td {
  padding: .4rem .75rem .4rem 0;
  border-top: 1px solid var(--light-gray);
  vertical-align: top;
}

.book td:last-child, .book th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.book .num { white-space: nowrap; }
.book a { border-bottom: 1.5px dashed var(--purple); color: var(--purple); }

/* Charts */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font: 10px var(--mono); fill: #000; }
.chart .axis path,
.chart .axis line { stroke: var(--dim-heading); stroke-width: 1; }

.metrics {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  line-height: 15px;
}

.metrics a { border-bottom: 1px dashed var(--main-gray); }

.readout {
  min-height: 17px;
  margin: .5rem 0 0;
  font-size: 12px;
  line-height: 17px;
}

/* Schools */
.schools {
  columns: 4 150px;
  column-gap: 1rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 18px;
}

.schools li { cursor: default; }
.schools li:hover, .schools li.on { color: var(--purple); }
.schools li.home { color: var(--orange); }

/* Deadlines */
.dates {
  width: 100%;
  margin-top: .75rem;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 17px;
}

.dates td { padding: .15rem 0; vertical-align: top; }
.dates td:first-child { width: 7ch; white-space: nowrap; }
.dates td:last-child { width: 9ch; padding-left: 1rem; text-align: right; white-space: nowrap; color: var(--dim-heading); }
.dates tr.past { color: var(--light-gray); }
.dates tr.past td:last-child { color: var(--light-gray); }
.dates tr.on { color: var(--purple); }

/* Selectivity */
.dots svg { display: block; width: 100%; height: auto; }
.dots + .dots { margin-top: 1.5rem; }
.dots h3 { margin: 0 0 .5rem; font: 400 12px/17px var(--mono); }

/* Draft tool */
.draftbox {
  display: block;
  min-height: 300px;
  padding: .75rem;
  border: 1px solid var(--dim-heading);
  resize: vertical;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem 1.5rem;
  margin: .75rem 0 0;
  font-size: 12px;
}

.row label { display: grid; gap: .15rem; color: var(--dim-heading); }
.textbtn {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--main-gray);
  background: none;
  color: var(--heavy-line);
  font: inherit;
  cursor: pointer;
}

.meter { height: 12px; background: var(--light-gray); }
.meter i { display: block; height: 100%; background: var(--purple); }
.meter.over i { background: var(--orange); }

.figures {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 17px;
}

.figures td { padding: .2rem 0; }
.figures td:last-child { text-align: right; font-weight: 700; }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--dim-heading);
}

.bars button {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 28px;
  padding: 0;
  border: 0;
  background: var(--purple);
  cursor: pointer;
}

.bars button.long { background: var(--orange); }
.bars button:hover, .bars button:focus-visible, .bars button.on { opacity: .55; }

.preview {
  padding: .75rem;
  border-left: 1px solid var(--dim-heading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview:empty { display: none; }

mark { background: none; color: inherit; }
mark.spec { border-bottom: 1.5px dashed var(--purple); }
mark.stock { border-bottom: 1.5px dashed var(--orange); color: var(--orange); }
mark.now { background: #ece6fd; }

/* UCAS and Common App */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 17px;
}

.compare th {
  padding: 0 .75rem .4rem 0;
  color: var(--dim-heading);
  font-weight: 400;
  text-align: left;
}

.compare td {
  padding: .4rem .75rem .4rem 0;
  border-top: 1px solid var(--light-gray);
  vertical-align: top;
}

.compare td:first-child { color: var(--dim-heading); white-space: nowrap; }

.draftbox.short { min-height: 180px; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.measure { margin-top: 1.25rem; }
.measure .note { margin: .25rem 0 .75rem; }

.strip {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-top: .5rem;
}

.strip button {
  flex: 1 1 0;
  min-width: 3px;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.strip button:hover, .strip button:focus-visible, .strip button.on { opacity: .55; }
.strip ~ .readout + p { margin-top: .75rem; }

/* Footer */
footer {
  margin-top: 3rem;
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--dim-heading);
  color: var(--dim-heading);
  font-size: 12px;
  line-height: 17px;
}

footer p { margin: 0 0 .35rem; max-width: 90ch; }

@media (max-width: 991px) {
  .page, .page.sub { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 320px; }
}

@media (max-width: 767px) {
  .wrap { padding: 0 1rem; }
  .right { grid-template-columns: minmax(0, 1fr); }
  .name { font-size: 28px; line-height: 32px; }
}