/*------------------------------------*\
    $Avaluator 3.0
\*------------------------------------*/

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/caveat.woff2") format("woff2"); }

:root {
  /* Card colours, sampled from the printed v3.0 cards */
  --teal-deep: #006962;
  --teal: #1a8f86;
  --teal-bright: #1ea499;
  --navy: #334287;
  --blue: #00a6da;
  --blue-ink: #0a9fd8;
  --red: #cc232a;
  --yellow: #fff12e;
  --green: #33a357;
  --green-ink: #2e9a51;
  --cream: #f9f9ef;
  --snow: #f2f4f6;
  --ink: #17191d;
  --pencil: #1b1c1f;

  /* Page */
  --table: #e6eaee;
  --table-glow: #f5f7f9;
  --text: #1c2128;
  --text-muted: #56606c;
  --link: #2d3f8f;
  --focus: #0b67d0;

  --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --flip-ms: 800ms;
  --flip-ease: cubic-bezier(.35, .1, .2, 1);
  /* When --flip-ease reaches 90° and the card is edge-on */
  --flip-edge: calc(var(--flip-ms) * .315);
}

@media (prefers-color-scheme: dark) {
  :root {
    --table: #10151b;
    --table-glow: #1a222b;
    --text: #e4e8ed;
    --text-muted: #9aa5b2;
    --link: #a9bbff;
    --focus: #7fb4ff;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--table);
  background-image: radial-gradient(120% 60% at 50% 0%, var(--table-glow), var(--table) 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*------------------------------------*\
    $Wordmark
\*------------------------------------*/
.wordmark {
  display: inline-block;
  white-space: nowrap;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1;
}

/* A real "O" stays in the text for search engines and screen readers; the snowflake is drawn over it */
.wordmark__o {
  position: relative;
  padding: 0 .1em 0 .06em;
  -webkit-text-fill-color: transparent;
}

.wordmark__o::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .92em;
  height: .92em;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><path transform='rotate%280%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%2860%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28120%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28180%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28240%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28300%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/></g></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><path transform='rotate%280%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%2860%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28120%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28180%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28240%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/><path transform='rotate%28300%29' d='M0 0V-10.5M0-6.4L-3.2-9.3M0-6.4L3.2-9.3M0-2.9L-2.3-4.9M0-2.9L2.3-4.9'/></g></svg>") center / contain no-repeat;
}

/*------------------------------------*\
    $Page
\*------------------------------------*/
.intro,
.deck,
.colophon {
  width: 100%;
  max-width: 912px;
  margin: 0 auto;
  padding: 0 16px;
}

.intro {
  padding-top: clamp(28px, 6vw, 56px);
  padding-bottom: 8px;
}

.intro__brand {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--teal-deep);
  font-size: clamp(30px, 6vw, 44px);
}

.intro__version {
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .02em;
}

.intro__lede {
  max-width: 44em;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(16px, 2vw, 18px);
  text-wrap: pretty;
}

.intro__lede a {
  color: var(--text);
  font-weight: 600;
}

.step {
  padding-top: clamp(28px, 5vw, 44px);
}

.step__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.step__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--teal-deep);
  color: #fff;
  font-size: .85em;
  font-weight: 700;
}

.colophon {
  padding-top: 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  color: var(--text-muted);
  font-size: 14px;
}

.colophon p {
  margin: 0 0 6px;
}

@media (prefers-color-scheme: dark) {
  .intro__brand {
    color: #5fd0c4;
  }

  .step__num {
    background: var(--teal-bright);
  }
}

/*------------------------------------*\
    $Card: the physical object
\*------------------------------------*/
.card {
  container: card / inline-size;
  position: relative;
  width: 100%;
  --radius: clamp(14px, 2.6cqw, 26px);
}

.card__shadow {
  position: absolute;
  inset: 2% 1.5% 0 1.5%;
  border-radius: 26px;
  background: rgba(18, 28, 40, .34);
  filter: blur(18px);
  transform: translateY(12px);
  pointer-events: none;
}

.card__lift {
  position: relative;
  perspective: 2400px;
}

.card__inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) var(--flip-ease);
}

.card__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: var(--ink);
  background-color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .07),
    0 1px 2px rgba(0, 0, 0, .16);
  transition: visibility 0s linear var(--flip-edge);
}

.card__face--front {
  transform: rotateY(0deg);
}

.card__face--back {
  transform: rotateY(180deg);
}

/*
 * iOS Safari can show the turned-away side through backface-visibility when
 * parts of a face sit on their own layers (the rotated axis tabs, chart blur,
 * sheen, pencil marks). Hide that side outright once the card is edge-on.
 */
.card[data-showing="front"] .card__face--back,
.card[data-showing="back"] .card__face--front {
  visibility: hidden;
}

/* Lamination sheen. Follows the pointer on devices that hover. */
.card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(60cqw circle at var(--mx, 18%) var(--my, -10%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 34%);
  mix-blend-mode: soft-light;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.card__face--back::after {
  background:
    radial-gradient(60cqw circle at calc(100% - var(--mx, 82%)) var(--my, -10%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 34%);
}

.card.is-flipping .card__lift {
  animation: card-lift var(--flip-ms) var(--flip-ease);
}

.card.is-flipping .card__shadow {
  animation: card-shadow var(--flip-ms) var(--flip-ease);
}

@keyframes card-lift {
  50% { transform: translateY(-2.4cqw) scale(1.035); }
}

@keyframes card-shadow {
  50% {
    transform: translateY(6cqw) scaleX(.1) scaleY(.94);
    opacity: .5;
    filter: blur(26px);
  }
}

@media (prefers-color-scheme: dark) {
  .card__shadow {
    background: rgba(0, 0, 0, .7);
  }

  .card__face {
    filter: brightness(.96);
  }
}

/*------------------------------------*\
    $Card: shared parts
\*------------------------------------*/
.card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.9cqw 2.6cqw 1.9cqw 2.6cqw;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, var(--teal-deep) 0%, var(--teal) 45%, var(--teal-bright) 100%);
  border-bottom: max(3px, .45cqw) solid #fff;
}

.card-head__flake {
  position: absolute;
  top: -7cqw;
  left: 1cqw;
  width: 19cqw;
  height: 19cqw;
  color: rgba(255, 255, 255, .13);
}

.card-head__title {
  position: relative;
  margin: 0;
  font-size: clamp(21px, 6.4cqw, 58px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-head__brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9cqw;
  margin: 0;
}

.card-head__brand .wordmark {
  margin-top: 1.4cqw;
  font-size: clamp(12px, 3.5cqw, 32px);
}

.card-head__version {
  font-size: clamp(10px, 2.5cqw, 23px);
  font-weight: 500;
  line-height: 1;
}

/* Axis title tabs (the navy and blue labels printed along the chart edges) */
.axis-tab {
  margin: 0;
  color: #fff;
  font-size: clamp(11px, 3cqw, 28px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.axis-tab strong {
  display: block;
  font-weight: 500;
}

.axis-tab span {
  display: block;
  font-size: .72em;
  text-transform: none;
  letter-spacing: .01em;
}

.axis-tab a {
  color: inherit;
}

.axis-tab--y {
  grid-area: ytab;
  align-self: stretch;
  padding: 2cqw 1.3cqw;
  background: var(--navy);
  border-radius: 1.6cqw 0 0 1.6cqw;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: start;
}

.axis-tab--x {
  grid-area: xtab;
  justify-self: center;
  width: min(100%, 72cqw);
  margin-top: 1.4cqw;
  padding: 1.2cqw 3cqw 1cqw;
  background: var(--blue);
  border-radius: 1.6cqw 1.6cqw 0 0;
  text-align: center;
}

/* Zone words printed on the charts */
.zone-label {
  position: absolute;
  top: calc(var(--y) * 100%);
  left: calc(var(--x) * 100%);
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 3.5cqw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}

.zone-label--extra {
  color: #111;
}

/* Grease pencil loops, drawn on with stroke-dashoffset */
.pencil-mark {
  position: absolute;
  pointer-events: none;
}

.pencil-loop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--mark, var(--pencil));
  stroke-width: var(--mark-width, 4);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  visibility: hidden;
  transition: stroke-dashoffset .5s cubic-bezier(.55, 0, .35, 1);
}

.is-on > .pencil-loop {
  stroke-dashoffset: 0;
  visibility: inherit;
}

/* Bottom strip on every face: result + turn-over button */
.card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2cqw 2cqw;
  padding: 1.7cqw 2.6cqw;
  background: rgba(255, 255, 255, .92);
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.card-foot__note {
  margin: 0;
  font-size: clamp(14px, 2.4cqw, 21px);
  color: var(--green-ink);
  font-weight: 500;
}

.card-foot__note a {
  color: #e0822a;
  font-weight: 700;
}

.flip-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  margin-left: auto;
  padding: .7em 1.1em .7em 1.25em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: clamp(14px, 2.1cqw, 18px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 2px 6px rgba(0, 70, 64, .28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.flip-btn svg {
  width: 1.2em;
  height: 1.2em;
  transition: transform .4s var(--flip-ease);
}

.flip-btn:hover {
  filter: brightness(1.06);
}

.card__face[data-flip-face] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.flip-btn:hover svg,
.card__face[data-flip-face]:hover .flip-btn svg {
  transform: rotate(180deg);
}

.flip-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 70, 64, .3);
}

/* Result readout */
.result {
  display: flex;
  flex: 1 1 13em;
  align-items: center;
  gap: 1.4cqw;
  min-width: 0;
}

.result__swatch {
  position: relative;
  flex: none;
  width: clamp(34px, 5.6cqw, 50px);
  aspect-ratio: 1;
  border: 2px dashed rgba(0, 0, 0, .22);
  border-radius: max(6px, .9cqw);
  transition: background-color .3s ease, border-color .3s ease;
}

.result__body {
  min-width: 0;
}

.result__zone {
  display: block;
  font-size: clamp(15px, 2.9cqw, 26px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.result__detail {
  display: block;
  margin-top: .15em;
  font-size: clamp(13px, 2cqw, 17px);
  line-height: 1.3;
  color: #4b525c;
}

.result[data-zone] .result__swatch {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.result[data-zone="normal"] .result__swatch { background: var(--green); }
.result[data-zone="extra"] .result__swatch { background: var(--yellow); }
.result[data-zone="not"] .result__swatch { background: var(--red); }

/* Pencil loop around the rating swatch, matching the circled grid cell */
.result__mark {
  inset: -32% -30%;
  transform: rotate(-5deg);
  --mark-width: 6;
}

.result:has(.result__mark) {
  gap: max(18px, 2.4cqw);
}

.result:has(.result__mark) .result__swatch {
  margin: 6px 0 6px 8px;
}

/*------------------------------------*\
    $Trip Planner / front
\*------------------------------------*/
.tp-front,
.tp-back {
  background: var(--cream) url("/images/topo.svg") 30% 40% / 110cqw auto repeat;
}

.tp-note {
  margin: 2.2cqw 3.4cqw 0;
  font-size: clamp(13px, 2.3cqw, 21px);
  line-height: 1.3;
  text-wrap: pretty;
}

.tp-plot {
  flex: 1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "ytab ylab chart"
    "ytab .    xlab"
    ".    .    xtab";
  column-gap: 1.2cqw;
  padding: 3.4cqw 3cqw 0 0;
}

.tp-plot .axis-tab--y {
  margin-bottom: 1.6cqw;
}

.tp-chart {
  grid-area: chart;
  position: relative;
  min-height: 40cqw;
  border-radius: max(6px, .8cqw);
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tp-chart__zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tp-chart__grid path {
  fill: none;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.tp-guide {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: rgba(17, 17, 17, .72);
}

.tp-guide--row {
  top: calc(var(--y) * 100%);
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  transition: top .35s cubic-bezier(.3, .7, .3, 1);
}

.tp-guide--col {
  left: calc(var(--x) * 100%);
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  transition: left .35s cubic-bezier(.3, .7, .3, 1);
}

.tp-marker {
  top: calc(var(--y) * 100%);
  left: calc(var(--x) * 100%);
  z-index: 3;
  width: clamp(46px, 10cqw, 96px);
  height: clamp(30px, 6.4cqw, 62px);
  transform: translate(-50%, -50%) rotate(-4deg);
  transition: top .35s cubic-bezier(.3, .7, .3, 1), left .35s cubic-bezier(.3, .7, .3, 1);
  --mark-width: 5;
}

.tp-marker__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(9px, 1.5cqw, 14px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pencil);
  box-shadow: 0 0 0 2px #fff;
  transform: translate(-50%, -50%) rotate(4deg);
}

/* Axis labels double as radio buttons */
.tp-ylabels,
.tp-xlabels {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(11px, 2.6cqw, 24px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.tp-ylabels {
  grid-area: ylab;
}

/* Sizes the column to the longest label */
.tp-ylabels::before {
  content: "Considerable";
  display: block;
  height: 0;
  padding: 0 .4em;
  overflow: hidden;
  visibility: hidden;
}

.tp-xlabels {
  grid-area: xlab;
  height: 2.2em;
  margin-top: .8cqw;
}

.tp-ylabels label,
.tp-xlabels label {
  position: absolute;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tp-ylabels label {
  top: calc(var(--y) * 100%);
  right: 0;
  transform: translateY(-50%);
}

.tp-xlabels label {
  top: 0;
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
}

.tp-ylabels input,
.tp-xlabels input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tp-ylabels span,
.tp-xlabels span {
  display: block;
  padding: .3em .4em;
  border-radius: .35em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.tp-ylabels span {
  color: var(--navy);
}

.tp-xlabels span {
  color: var(--blue-ink);
}

.tp-ylabels label:hover span {
  background: rgba(51, 66, 135, .1);
}

.tp-xlabels label:hover span {
  background: rgba(0, 166, 218, .12);
}

.tp-ylabels input:checked + span {
  color: #fff;
  background: var(--navy);
}

.tp-xlabels input:checked + span {
  color: #fff;
  background: var(--blue);
}

.tp-ylabels input:focus-visible + span,
.tp-xlabels input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tp-plot .axis-tab--x {
  margin-top: 1.6cqw;
}

/*------------------------------------*\
    $Trip Planner / back
\*------------------------------------*/
.tp-back__body {
  flex: 1;
  padding: 3.2cqw 3.6cqw 2cqw;
}

.tp-back__title {
  margin: 0;
  color: var(--green-ink);
  font-size: clamp(21px, 4.5cqw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.tp-back__hint {
  margin: .4cqw 0 1.6cqw;
  color: #5b6168;
  font-size: clamp(13px, 2cqw, 17px);
}

.terrain-list {
  display: grid;
  gap: .8cqw;
  margin: 0 -1.4cqw;
  padding: 0;
  list-style: none;
}

.terrain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.6cqw;
  width: 100%;
  padding: 1.1cqw 1.4cqw;
  border: 0;
  border-radius: 1.4cqw;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.terrain:hover {
  background: rgba(0, 0, 0, .04);
}

.terrain[aria-pressed="true"] {
  background: rgba(51, 163, 87, .1);
  box-shadow: inset 0 0 0 2px rgba(46, 154, 81, .45);
}

.terrain__name {
  position: relative;
  display: inline-block;
  margin-bottom: .25em;
  font-size: clamp(15px, 2.6cqw, 24px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.terrain__name .pencil-mark {
  inset: -45% -14% -40% -12%;
  --mark-width: 4;
}

.terrain[aria-pressed="true"] .pencil-loop {
  stroke-dashoffset: 0;
  visibility: inherit;
}

.terrain__desc {
  display: block;
  font-size: clamp(13px, 2.25cqw, 20px);
  line-height: 1.32;
  text-wrap: pretty;
}

.terrain__photo {
  display: block;
  width: clamp(64px, 15cqw, 150px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1.4cqw;
}

/*------------------------------------*\
    $Slope Evaluator / front
\*------------------------------------*/
.se-front,
.se-back {
  background: var(--snow) url("/images/ridges.svg") center bottom / cover no-repeat;
}

.se-plot {
  flex: 1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "ytab ynums grid"
    "ytab .     xnums"
    ".    .     xtab";
  column-gap: 1.4cqw;
  padding: 1.6cqw 4.4cqw 0 0;
}

.se-plot .axis-tab--y {
  margin-bottom: 1cqw;
  text-align: center;
}

.se-grid {
  grid-area: grid;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  min-height: 50cqw;
  margin: 1cqw;
  border-radius: 1.2cqw;
  box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .96);
}

.se-cell {
  position: relative;
  border-right: max(2px, .22cqw) dotted rgba(255, 255, 255, .95);
  border-bottom: max(2px, .22cqw) dotted rgba(255, 255, 255, .95);
  transition: box-shadow .25s ease;
}

.se-cell:nth-child(5n) { border-right: 0; }
.se-cell:nth-child(n + 31) { border-bottom: 0; }
.se-cell:nth-child(1) { border-top-left-radius: 1.2cqw; }
.se-cell:nth-child(5) { border-top-right-radius: 1.2cqw; }
.se-cell:nth-child(31) { border-bottom-left-radius: 1.2cqw; }
.se-cell:nth-child(35) { border-bottom-right-radius: 1.2cqw; }

.se-cell[data-zone="normal"] { background: var(--green); }
.se-cell[data-zone="extra"] { background: var(--yellow); }
.se-cell[data-zone="not"] { background: var(--red); }

.se-cell.is-active {
  z-index: 1;
  box-shadow: inset 0 0 0 max(3px, .45cqw) var(--pencil);
}

.se-marker {
  top: calc((6.5 - var(--a)) / 7 * 100%);
  left: calc((var(--t) - .5) / 5 * 100%);
  z-index: 3;
  width: 25%;
  height: 19%;
  transform: translate(-50%, -50%) rotate(-5deg);
  transition: top .35s cubic-bezier(.3, .7, .3, 1), left .35s cubic-bezier(.3, .7, .3, 1);
  --mark-width: 5;
}

.se-ynums,
.se-xnums {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(14px, 3.3cqw, 30px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.se-ynums {
  grid-area: ynums;
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  align-items: center;
  margin: 1cqw 0;
  color: var(--navy);
}

.se-xnums {
  grid-area: xnums;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1.8cqw 1cqw 0;
  color: var(--blue-ink);
}

.se-ynums li,
.se-xnums li {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin: auto;
  border-radius: 50%;
  transition: background-color .25s ease, color .25s ease;
}

.se-ynums li.is-active {
  color: #fff;
  background: var(--navy);
  font-weight: 700;
}

.se-xnums li.is-active {
  color: #fff;
  background: var(--blue);
  font-weight: 700;
}

/*------------------------------------*\
    $Slope Evaluator / back
\*------------------------------------*/
.se-tabs {
  display: none;
}

.se-panels {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 2cqw;
  margin: 0;
  padding: 1.6cqw 2.2cqw 2.2cqw;
}

.se-panel {
  min-width: 0;
}

.se-panel__title {
  margin: 0 0 .4cqw 1cqw;
  color: var(--navy);
  font-size: clamp(16px, 3.2cqw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.se-panel--terrain .se-panel__title {
  color: var(--blue-ink);
}

.se-box {
  --pts: clamp(40px, 6.4cqw, 58px);
  position: relative;
  margin: 1cqw;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
  border-radius: .6cqw;
  box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .96);
}

.se-panel--terrain .se-box {
  background: var(--blue);
}

/* The printed divider between the questions and the points column */
.se-box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--pts);
  width: 2px;
  background: rgba(255, 255, 255, .92);
}

.q {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pts);
  border-bottom: 2px solid rgba(255, 255, 255, .92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.q input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.q__text {
  padding: 1cqw 1.3cqw;
  font-size: clamp(13.5px, 2.1cqw, 19px);
  line-height: 1.2;
  transition: background-color .2s ease;
}

.q__text strong {
  display: block;
  font-weight: 600;
}

.q__pts {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1cqw;
  font-size: clamp(16px, 2.8cqw, 26px);
  font-weight: 700;
  line-height: 1.2;
  opacity: .55;
  transition: opacity .2s ease, background-color .2s ease;
}

.q__pts .pencil-mark {
  bottom: 1cqw;
  left: 50%;
  width: 2.3em;
  height: 1.6em;
  transform: translate(-50%, .2em) rotate(-6deg);
  --mark: var(--yellow);
  --mark-width: 6;
}

.q:hover .q__text,
.q:hover .q__pts {
  background: rgba(255, 255, 255, .06);
}

.q input:checked ~ .q__text,
.q input:checked ~ .q__pts {
  background: rgba(255, 255, 255, .14);
}

.q input:checked ~ .q__pts {
  opacity: 1;
}

.q input:checked ~ .q__pts .pencil-loop {
  stroke-dashoffset: 0;
  visibility: inherit;
}

.q input:focus-visible ~ .q__text {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.q-group {
  border-bottom: 2px solid rgba(255, 255, 255, .92);
}

.q-group__head,
.q-group__or {
  margin: 0 var(--pts) 0 0;
  padding: 1cqw 1.3cqw 0;
  font-size: clamp(13.5px, 2.1cqw, 19px);
  line-height: 1.2;
}

.q-group__head strong {
  font-weight: 600;
}

.q-group__or {
  padding-top: .4cqw;
  padding-bottom: .4cqw;
}

.q--sub {
  border-bottom: 0;
}

.q--sub .q__text {
  padding-top: .5cqw;
}

.se-total {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--pts);
  align-items: center;
  gap: 0 1cqw;
  padding-left: .6cqw;
}

.se-total__label {
  font-size: clamp(13.5px, 2.2cqw, 20px);
  font-weight: 600;
  text-align: right;
}

.score-box {
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(30px, 4.4cqw, 40px);
  aspect-ratio: 1;
  margin: .9cqw 0;
  color: var(--pencil);
  background: #fff;
  font-family: var(--hand);
  font-size: clamp(28px, 4.8cqw, 44px);
  font-weight: 700;
  line-height: 1;
}

.score-box:not(:empty) {
  animation: pencil-in .35s ease-out;
}

.score-box span {
  display: block;
  transform: rotate(-6deg) translateY(-.04em);
}

@keyframes pencil-in {
  from { color: rgba(27, 28, 31, 0); }
}

.erase {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
}

.erase svg {
  width: 20px;
  height: 20px;
}

.erase:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.erase:disabled {
  visibility: hidden;
}

.se-back__credit {
  margin: 2.4cqw 1cqw 0;
  font-size: clamp(12px, 1.75cqw, 15px);
  line-height: 1.4;
  color: #30353c;
}

.se-back__credit a {
  color: inherit;
  font-weight: 600;
}

/*------------------------------------*\
    $Compact cards (phones)
\*------------------------------------*/
@container card (max-width: 620px) {

  .card-head {
    padding: 2.8cqw 3.4cqw;
  }

  .card-head__flake {
    width: 26cqw;
    height: 26cqw;
    top: -9cqw;
  }

  .card-foot {
    padding: 2.6cqw 3.4cqw;
  }

  .axis-tab span {
    display: none;
  }

  .axis-tab--y {
    padding: 2.4cqw 1.6cqw;
  }

  .axis-tab--x {
    width: auto;
    padding: 1.6cqw 5cqw 1.4cqw;
  }

  .zone-label {
    font-size: clamp(11px, 3.7cqw, 20px);
  }

  /* Trip Planner */
  .tp-note {
    margin: 3cqw 3.4cqw 0;
  }

  .tp-plot {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "ytab ."
      "ylab chart"
      ".    xlab"
      ".    xtab";
    column-gap: 1cqw;
    padding: 3.4cqw 3.4cqw 0 2.4cqw;
  }

  .tp-plot .axis-tab--y {
    justify-self: end;
    margin: 0 0 2.4cqw;
    padding: .45em .8em;
    font-size: 11px;
    border-radius: 999px;
    writing-mode: horizontal-tb;
    transform: none;
    white-space: nowrap;
  }

  .tp-chart {
    min-height: 74cqw;
  }

  .tp-ylabels,
  .tp-xlabels {
    font-size: clamp(10.5px, 3.1cqw, 16px);
  }

  .tp-xlabels span {
    padding: .35em .25em;
    letter-spacing: -.01em;
  }

  .zone-label--not {
    white-space: normal;
    width: min-content;
  }

  .tp-back__body {
    padding: 4.4cqw 4cqw 3cqw;
  }

  .terrain {
    gap: 3cqw;
    padding: 2cqw 2.4cqw;
    align-items: start;
  }

  .terrain-list {
    margin: 0 -2.4cqw;
  }

  .terrain__photo {
    width: 18cqw;
    margin-top: .4em;
    border-radius: 2.4cqw;
  }

  /* Slope Evaluator */
  .se-plot {
    padding: 3cqw 4cqw 0 0;
    column-gap: 1.6cqw;
  }

  .se-grid {
    min-height: 92cqw;
    margin: 1.6cqw;
    box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, .96);
  }

  .se-ynums {
    margin: 1.6cqw 0;
  }

  .se-xnums {
    margin: 2.6cqw 1.6cqw 0;
  }

  .se-ynums,
  .se-xnums {
    font-size: clamp(14px, 4.4cqw, 20px);
  }

  .se-tabs {
    display: flex;
    gap: 2cqw;
    padding: 3.4cqw 3.4cqw 0;
  }

  .se-tabs__tab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    min-height: 44px;
    padding: .45em .6em .45em .9em;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    font-size: clamp(13px, 3.7cqw, 16px);
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .se-tabs__tab--avalanche {
    color: var(--navy);
  }

  .se-tabs__tab--terrain {
    color: var(--blue-ink);
  }

  .se-tabs__tab[aria-pressed="true"] {
    color: #fff;
    border-color: transparent;
  }

  .se-tabs__tab--avalanche[aria-pressed="true"] {
    background: var(--navy);
  }

  .se-tabs__tab--terrain[aria-pressed="true"] {
    background: var(--blue);
  }

  .se-tabs__score {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    color: var(--pencil);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
    font-family: var(--hand);
    font-size: 1.35em;
    font-weight: 700;
    text-transform: none;
  }

  .se-panels {
    grid-template-columns: minmax(0, 1fr);
    padding: 2.6cqw 3cqw 3.4cqw;
  }

  .se-panel {
    grid-area: 1 / 1;
  }

  .se-back[data-tab="avalanche"] .se-panel--terrain,
  .se-back[data-tab="terrain"] .se-panel--avalanche {
    visibility: hidden;
  }

  .se-panel__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .se-box {
    margin: 1.6cqw;
    border-radius: 1cqw;
    box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, .96);
  }

  .q__text,
  .q-group__head,
  .q-group__or {
    padding-left: 2.6cqw;
    padding-right: 2.2cqw;
  }

  .q__text {
    padding-top: 2cqw;
    padding-bottom: 2cqw;
  }

  .q__text strong {
    display: inline;
  }

  .q-group__head {
    padding-top: 2cqw;
  }

  .q--sub .q__text {
    padding-top: 1cqw;
    padding-bottom: 1.4cqw;
  }

  .q__pts {
    padding-bottom: 2cqw;
  }

  .q__pts .pencil-mark {
    bottom: 2cqw;
  }

  .se-back__credit {
    margin: 3.4cqw 1.6cqw 0;
  }
}

/*------------------------------------*\
    $Motion preferences
\*------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card__inner,
  .card__face,
  .pencil-loop,
  .tp-marker,
  .tp-guide,
  .se-marker,
  .flip-btn svg {
    transition: none;
  }

  .card.is-flipping .card__lift,
  .card.is-flipping .card__shadow,
  .score-box:not(:empty) {
    animation: none;
  }
}