/* =====================================================================
   Latitude Cartography — shared styles
   Layout idea: every page is a "map board" (parchment on a blue desk)
   with a leather strap at the top, the logo top-right, the
   "27 yrs" badge bottom-left and the compass rose (navigation) bottom-right.
   Sizes inside the board use --u = 1% of a reference board width, so the
   whole board scales together on any screen.
   ===================================================================== */

@font-face { font-family: "Tintin"; src: url("../fonts/tintin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Neutra"; src: url("../fonts/neutra.woff2") format("woff2"); font-display: swap; }

:root {
  --sienna: #9A643D;          /* brown handwriting colour */
  --rust: #AD1D00;            /* compass hover colour */
  --ink: #000;
  --grey: #727171;
  --highlight: rgba(255, 225, 0, .5);
  --link: #26399F;            /* link blue: the old site's #314ACA, a bit darker */
  --desk: linear-gradient(12deg, #2C538F 42%, #4288C7 68%, #5CAEE4 92%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #2C538F var(--desk) fixed;
  font-family: "Neutra", "Trebuchet MS", "Lucida Sans", Tahoma, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }   /* forms use the site font too */
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The board ---------- */
.board {
  position: relative;
  width: 85vw;
  height: 95vh;
  margin: 0 auto;
  container-type: size;
  box-shadow: rgba(0, 0, 0, .39) 10px 0 20px 15px;
}
@media (min-width: 1440px) { .board { width: 75vw; } }

/* one unit = 1% of the reference board (1080 x 855 px, i.e. a 1440x900 screen) */
.board * { --u: min(1cqw, 1.263cqh); }

.board__map { position: absolute; inset: 0; overflow: hidden; background: #e3c98f; }
.board__map::after {            /* inner bevel */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 20px -2px #000;
}
.parchment, .satellite {
  /* top-aligned and always covering the whole board, whatever the window shape */
  position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; min-height: 100%; object-fit: cover;
}
.parchment--tall { display: none; }
/* the contour map slowly drifts up and down, only as far as the picture reaches below the board (set in js/site.js),
   so no edge ever shows; the intro starts its drift when the animation ends (js/intro.js) */
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(var(--drift, 0px)); } }
.drift .parchment { animation: drift 120s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .drift .parchment { animation: none; } }

.leather {
  position: absolute; z-index: 2; left: -3%; top: -4cqh;
  width: 105%; max-width: none; height: 24cqh;
  pointer-events: none;
}
.buckle {
  position: absolute; z-index: 3; left: 5%; top: 0;
  width: calc(8.3 * var(--u)); pointer-events: none;
}
.logo {
  /* vertically centred in the visible leather strap: equal space above and below the logo (red line top to bottom).
     visible strap = top of the board to its torn edge at 16.5cqh (measured on screen) -> centre 8.25cqh;
     logo centre = 49.85% of the logo height (16.78u) */
  position: absolute; z-index: 4; right: 1.5%; top: calc(8.25cqh - 8.365 * var(--u));
  width: calc(31.4 * var(--u));   /* +15%, then +5% */
}
.logo img { width: 100%; }
.badge {
  /* the visible "27" starts in line with the buckle strap above it (strap starts 21.6% into the 8.3u buckle) */
  position: absolute; z-index: 3; left: calc(5% + 0.708 * var(--u)); bottom: 4%;
  width: calc(7 * var(--u)); min-width: 56px;
}

/* ---------- Compass rose navigation (the "footer" of every page) ---------- */
.compass, .compass-ghost {
  --g: calc(13.5 * var(--u));           /* size of the rose graphic */
  position: absolute; z-index: 5;
  left: 84.5%; top: 83%;
  width: var(--g); height: var(--g);
  transform: translate(-50%, -50%);
  font-size: calc(var(--g) * .118);
  line-height: 1;
}
.compass__rose { width: 100%; height: 100%; }
/* invisible copy of the compass box: holds the intro's flying CONTACT US button */
.compass-ghost { pointer-events: none; z-index: 6; }
.compass-ghost a { pointer-events: auto; }
.compass a, .compass-ghost a { position: absolute; text-decoration: none; white-space: nowrap; }
.compass__pt { color: var(--ink); text-align: center; transition: color .2s, transform .2s; }
.compass__pt:hover, .compass__pt:focus-visible { color: var(--rust); }
.compass a[aria-current="page"] { color: var(--rust); }   /* the page you are on */
.compass__pt--n { left: 50%; bottom: 101%; transform: translateX(-50%); }
.compass__pt--s { left: 50%; top: 101%;    transform: translateX(-50%); }
.compass__pt--e { left: 103%; top: 50%; transform: translateY(-50%); text-align: left; }
.compass__pt--w { right: 103%; top: 50%; transform: translateY(-50%); text-align: right; }
.compass__pt--n:hover { transform: translateX(-50%) scale(1.12); }
.compass__pt--s:hover { transform: translateX(-50%) scale(1.12); }
.compass__pt--e:hover { transform: translateY(-50%) scale(1.12); transform-origin: left center; }
.compass__pt--w:hover { transform: translateY(-50%) scale(1.12); transform-origin: right center; }

/* The four diagonal links lie "flat" on the tilted dial, each on the extension
   of a diagonal arm of the rose (arms at 30.5 deg), a small gap outside the big circle.
   skewY = direction of the arm, strong skewX = letters laid down in perspective.
   Right-hand labels start at their point, left-hand labels end at it. */
.compass__diag {
  color: var(--grey); font-weight: 700; letter-spacing: .08em;
  font-size: max(.55em, 8px);
  padding: .1em .3em;
  transform-origin: left center;
  transform: translateY(-50%) skew(var(--kx), var(--ky));
  transition: background-color .2s, color .2s;
}
.compass__diag--nw, .compass__diag--sw {
  transform-origin: right center;
  transform: translate(-100%, -50%) skew(var(--kx), var(--ky));
}
.compass__diag:hover, .compass__diag:focus-visible { background: var(--highlight); color: var(--ink); }
/* rising arm:  CONTACT US (bottom-left) ... LINKS (top-right) */
.compass__diag--ne { left: 97.1%; top: 19.8%; --kx: 62deg;  --ky: -30.5deg; }
.compass__diag--sw { left: 0.7%; top: 76.6%; --kx: 62deg;  --ky: -30.5deg; }
/* falling arm: SHOP (top-left) ... ABOUT US (bottom-right) */
.compass__diag--nw { left: 2.6%; top: 20.1%; --kx: -62deg; --ky: 30.5deg; }
.compass__diag--se { left: 99.1%; top: 76.9%; --kx: -62deg; --ky: 30.5deg; }

/* ---------- Home page (also the end state of the intro) ---------- */
.home__text {
  position: absolute; z-index: 4; left: calc(22.25% - 9.157 * var(--u)); top: 30%;   /* WE lines up with the left of the GIS picture */
  font-family: "Tintin", "Trebuchet MS", sans-serif; color: var(--sienna);
  font-size: calc(2.25 * var(--u)); line-height: 1.25;   /* handwritten lines (was 2.6u) */
}
.home__line { position: absolute; left: 0; margin: 0; white-space: nowrap; }
.home__line--1 { top: 0; font-family: "Neutra", "Trebuchet MS", sans-serif; font-size: 1.964em; letter-spacing: .04em; color: #3a1f0d; }   /* very deep dark brown */
.home__line--2 { top: 3.9em; left: 3.71em; }   /* lines up with "MAKE" */
.home__line--3 { top: 5.64em; left: 3.71em; }
.home__line--4 { top: 7.37em; left: 3.71em; }

.home__item { position: absolute; z-index: 3; display: block; transition: transform .25s, filter .25s; }
a.home__item:hover { transform: scale(1.04); filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.home__item img, .home__owning img { width: 100%; }
/* pictures follow a curve: management (bottom left) -> owning -> maps -> screen + tablet (top right) */
/* monitor's top-left corner at 74.9% / 23.6cqh (monitor starts 5.6% in and 14.2% down the picture) */
.home__making     { left: calc(74.9% - 1.57 * var(--u)); top: calc(23.6cqh - 3.11 * var(--u)); width: calc(28 * var(--u)); }
.home__maps       { left: 61%; top: 47.5%; width: calc(16 * var(--u)); }
/* management plans: as big as fits between the books (above), the wall map (left) and the compass labels (below right) */
.home__plans      { left: calc(49% + 17.6 * var(--u)); top: calc(48.5cqh + 7.3 * var(--u)); width: calc(19.35 * var(--u)); }
.home__maps .home__pubmap { position: absolute; right: -7.9cqw; top: 1cqh; width: 59%; }   /* books */
/* tablet shapes (board narrower than 1.263 : 1, same switch as the logo): books higher up, management plans tucked
   below them with a clear gap to the books and to the seated man's wall (4 Nov) */
@container (aspect-ratio < 1.263) {
  .home__maps, .home__plans, .home__viewer { --tab-room: clamp(0px, 6 * (1cqh - 1cqw), 1 * var(--u)); }   /* upright boards have room for a wider gap */
  .home__maps, .home__plans { --tab-up: min(4cqh, 24.9cqh - 19.3 * var(--u)); }   /* up 4% of the height, but kept clear of the monitor */
  .compass, .compass-ghost { left: calc(84.5% + clamp(0px, 6 * (1cqw - 1cqh), 1 * var(--u))); top: min(87%, 100% - 0.87 * var(--g)); }
  .compass:has(.compass__terms) { top: min(87%, 100% - 1.1 * var(--g)); }   /* room for the Terms link underneath */   /* compass a little lower, clear of the plans */
  .home__maps  { top: calc(47.5% - var(--tab-up)); }
  .home__plans { left: calc(49% + 22.3 * var(--u) + var(--tab-room)); top: calc(48.5cqh - var(--tab-up) + 8.3 * var(--u)); }
  .home .home__owning .home__viewer { left: calc(10.2 * var(--u) + var(--tab-room)); }   /* seated man clear of the lady's map */
  /* the three handwritten lines bigger: as big as fits beside the monitor (1.17x); same start under "MAKE",
     line spacing scaled with the text (positions are in the lines' own, bigger em) */
  .home__line--2, .home__line--3, .home__line--4 { --k: 1.17; --l2: calc(3.9 * 2.25 * var(--u)); font-size: calc(var(--k) * 1em); left: calc(3.71em / var(--k)); }
  .home__line--2 { top: var(--l2); }
  .home__line--3 { top: calc(var(--l2) + 1.74em); }
  .home__line--4 { top: calc(var(--l2) + 3.48em); }
}
/* upright tablets (board narrower than 0.88 : 1) have room for 1.5x: the lines start below the monitor,
   and the books and management plans move down to stay clear of them (4 Nov) */
@container (aspect-ratio < 0.88) {
  .home__line--2, .home__line--3, .home__line--4, .home__maps, .home__plans {
    --l2: max(8.775 * var(--u), 18.74 * var(--u) - 6.4cqh);      /* top of line 2, measured from the top of the text block */
  }
  .home__line--2, .home__line--3, .home__line--4 { --k: 1.35; left: 0; }            /* 1.35x, lined up with "WE" */
  /* positions from the user's sketch (red boxes, 780 x 874 window, 4 Nov) */
  .home__maps  { left: calc(61% + 6.06 * var(--u)); top: calc(23.64cqh + var(--l2) + 17.3 * var(--u)); }   /* books: right of the text, under the monitor */
  .home__plans { top: calc(24.64cqh + var(--l2) + 25.4 * var(--u)); }                                      /* plans 1u below the books */
  .home .home__owning .home__viewer { left: calc(14.23 * var(--u)); top: calc(4 * var(--u) + 0.44cqh); }  /* seated man: right and down */
  .home .home__owning .home__woman  { left: calc(3.83 * var(--u)); top: 7.18cqh; }                         /* lady: right and down */
}
.home__owning     { left: 38.5%; top: 62%; width: calc(32.6 * var(--u)); }
.home__owning .home__woman  { position: relative; width: 35%; margin-top: calc(2.6 * var(--u) + 3cqh); }
.home__owning .home__viewer { position: absolute; left: calc(10.5cqw - 2 * var(--u)); top: calc(4 * var(--u) - 2.5cqh); width: 66.3%; }   /* Home Farm Estate (seated man): between the lady and the management plans */
/* GIS picture: left edge moves with the badge (was placed with equal gaps 27 | GIS | woman, then shifted with the badge) */
/* bottom of the picture on the baseline of "27": badge bottom 4%, digits end 66.25% down the 7u badge;
   picture 22.46u tall, visible to 99.16% -> top = 96cqh - 2.3625u - 22.27u */
.home__management { left: calc(22.25% - 9.157 * var(--u)); top: calc(96cqh - 24.63 * var(--u)); width: calc(27 * var(--u)); }   /* moved with the badge */

/* ---------- Narrow / portrait screens: the board becomes a scrolling page ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .board {
    width: 95vw; height: auto; min-height: 98vh;
    container-type: inline-size;
    padding: 30cqw 6cqw 8cqw;
  }
  .board * { --u: 1.6cqw; }
  .parchment--wide { display: none; }
  .parchment--tall { display: block; top: 0; bottom: auto; min-height: 115%; object-fit: cover; }   /* 15% extra so it can drift */
  .leather { top: -1.5cqw; height: 22cqw; }
  .buckle  { width: 9cqw; left: 6%; top: -3cqw; }
  /* centred in the visible strap (strap edge = -1.5cqw + 0.854 x 22cqw = 17.3cqw -> centre 8.65cqw); 50cqw wide = 26.7cqw tall */
  .logo    { width: 50cqw; right: 2%; top: calc(8.65cqw - 13.3cqw); }
  .badge   { width: 13cqw; min-width: 0; left: 5%; bottom: 3cqw; }

  .home { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4cqw; justify-items: center; }
  .home__text { display: contents; }
  .home__line, .home__item { position: static; inset: auto; }
  .home__line { justify-self: start; white-space: normal; font-family: "Tintin", "Trebuchet MS", sans-serif; color: var(--sienna); font-size: 5.2cqw; }
  .home__line--1 { font-family: "Neutra", "Trebuchet MS", sans-serif; font-size: 8.5cqw; order: 1; margin-top: 4cqw; color: #3a1f0d; }
  .home__making     { width: 64cqw; order: 2; }
  .home__line--2    { order: 3; padding-left: 12cqw; }
  .home__plans      { width: 84cqw; order: 4; }
  /* books: after the seated man, pulled up so they overlap his top-right corner */
  .home__maps       { width: 34cqw; order: 7; position: relative; z-index: 4; justify-self: end; margin: -50cqw 4cqw 0 0; }
  /* phone: books on their own */
  .home__maps .home__pubmap { position: static; display: block; width: 100%; }
  .home__line--3    { order: 5; padding-left: 12cqw; }
  .home__owning     { width: 78cqw; order: 6; position: relative; }
  /* phone: seated man only (no standing lady), on his own line, clear of the books */
  .home__owning .home__woman  { display: none; }
  .home__owning .home__viewer { position: static; display: block; width: 76%; margin: 0 auto; }
  .home__line--4    { order: 8; padding-left: 12cqw; }
  .home__management { width: 70cqw; order: 9; }

  .compass-ghost { display: none; }
  .compass {
    --g: 34cqw;
    position: relative; left: auto; top: auto; transform: none;
    margin: 18cqw auto 22cqw;
  }
}

/* ---------- Skip intro button ---------- */
.skip-intro {
  position: fixed; right: 12px; bottom: 10px; z-index: 50;
  color: #fff; font-size: 14px; text-decoration: none;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 3px;
  background: rgba(0,0,0,.15);
}
.skip-intro:hover { background: rgba(0,0,0,.35); }

/* ---------- Simple content pages (Tuition & Support, ...) ----------
   The title sits on a horizontal rule crossed by a red vertical line (like the logo);
   the red line runs on down beside the picture; the text starts in line with the red line. */
.pg {
  --pg-red: #c8102e;
  --pg-in: calc(3 * var(--u));         /* how far the red line sits in from the rule's left end */
  position: absolute; z-index: 3;
  left: 15%; top: 20cqh; width: calc(68 * var(--u));   /* = length of the title's black line, the same on every page (ends where About Us's Royal Warrant sentence ends) */
}
.pg__title {
  margin: 0; padding: 0 0 calc(.4 * var(--u)) calc(1.4 * var(--u));
  margin-left: var(--pg-in);
  font-weight: normal; font-size: calc(3.3 * var(--u)); color: #945429;
  border-left: 1px solid var(--pg-red);
  position: relative;
}
.pg__title::after { content: ""; position: absolute; bottom: 0; right: 0; left: calc(-1 * var(--pg-in)); height: 1px; background: #5a3a20; }
.pg__pic {
  margin-left: var(--pg-in); padding: calc(1.5 * var(--u)) 0 calc(1 * var(--u)) calc(6 * var(--u));
  border-left: 1px solid var(--pg-red);
}
.pg__pic img { width: calc(22 * var(--u)); }
.pg__text {
  margin: calc(1.5 * var(--u)) 0 0 var(--pg-in);
  /* every page: the text block runs from just right of the red line to the end of the black line, aligned both sides;
     on boards where that would run into the compass labels (tall/wide screens) it stops 1.5u short of them */
  width: calc(min(68 * var(--u), 69.5cqw - 18.25 * var(--u)) - var(--pg-in));
  padding-left: calc(1.4 * var(--u));   /* clear of the red line (if it ran on down), in line with the title */
  font-size: calc(1.5 * var(--u)); line-height: 1.38; color: #333;
}
.pg__text h2 { margin: 1.2em 0 .15em; font-size: 1em; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; color: #222; }
.pg__text h2:first-child { margin-top: 0; }
.pg__text p { margin: 0 0 .5em; }
.pg__text p, .pg__text li { text-align: justify; }
.pg__text a { color: var(--link); font-weight: bold; }   /* links: the old site's blue, in bold */
.pg__text a:hover { color: var(--rust); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .pg { position: relative; left: auto; top: auto; width: auto; margin-top: 4cqw; }
  /* phones: a short red line crosses the title's rule, like the logo; the text starts in line with the title */
  .pg { --pg-in: 4cqw; }
  .pg__title { padding: 0 0 1.5cqw 2.5cqw; font-size: 8cqw; }
  .pg__title::before { content: ""; position: absolute; left: -1px; top: 100%; width: 1px; height: 4cqw; background: var(--pg-red); }
  .pg__pic { border-left: 0; margin-left: 0; padding: 5cqw 0; }
  .pg__pic img { width: 70cqw; margin: 0 auto; }
  .pg__text { font-size: 4.3cqw; padding-left: 2.5cqw; max-width: none; width: auto; }
}
.pg--airphoto-interpretation .pg__pic img { width: calc(30 * var(--u)); }   /* landscape picture: a bit wider */
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .pg--airphoto-interpretation .pg__pic img { width: 100%; } }
.pg--gis-management .pg__pic img { width: calc(38 * var(--u)); }   /* wide picture */
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .pg--gis-management .pg__pic img { width: 100%; } }
.pg__pic--none { padding: 0; height: calc(2 * var(--u)); }       /* page without a picture: just a short run of the red line */
.pg__links { margin: 0 0 .4em; padding-left: 1.1em; }
.pg__links li { margin: 0 0 .25em; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .pg__pic--none { height: 2cqw; } }
.pg__small { margin-top: 1.5em !important; font-size: .9em; }
.pg__gap2 { margin-top: 2.76em !important; }      /* two blank lines above (line height 1.38) */
/* small link under the compass rose (About Us: Terms and Conditions) */
.compass .compass__terms {
  left: 50%; top: calc(101% + .236 * var(--g) + .9em); transform: translateX(-50%);
  font-size: .8em; color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}
.compass .compass__terms:hover, .compass .compass__terms:focus-visible { color: var(--rust); }
/* Terms: long text scrolls inside the board on desktop and tablet */
.pg--terms .pg__text {
  max-height: calc(72cqh - 9.2 * var(--u)); overflow-y: auto; padding-right: calc(1.5 * var(--u)); padding-bottom: 3em;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent); mask-image: linear-gradient(to bottom, #000 90%, transparent);   /* soft bottom edge: there is more */
  scrollbar-width: thin; scrollbar-color: rgba(90, 58, 32, .45) transparent;
}
.pg--terms .pg__text h2 { text-transform: none; letter-spacing: 0; margin-top: 1em; }
.pg--terms .pg__text ul { margin: 0 0 .5em; padding-left: 1.1em; }
.pg__date { margin-top: 1.5em !important; font-style: italic; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .pg--terms .pg__text { max-height: none; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; } }
.pg--links .pg__text li { text-align: left; }   /* short list items: left-aligned (justify stretches the gaps) */
.pg__mail { font-size: 1.35em; margin-top: .6em !important; }
/* Shop */
.pg--shop-front .pg__pic img { width: calc(20 * var(--u)); filter: drop-shadow(3px 4px 5px rgba(0,0,0,.3)); }
.shop__buy { margin-top: 1.2em; display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; }
.shop__price { margin: 0 !important; font-size: 1.35em; font-weight: bold; text-align: left !important; }
.shop__price span { font-size: .7em; font-weight: normal; }
.shop__btn {
  border: 0; border-radius: 2em; cursor: pointer; padding: .55em 1.4em;
  background: #FFC439; color: #111; font: inherit; font-weight: bold;      /* PayPal's yellow */
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.shop__btn:hover { filter: brightness(.95); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .pg--shop-front .pg__pic img { width: 55cqw; } }
/* Software review: long article in a cream box (the old site's page colour), scrolling inside the board,
   with the old site's article styling: red-underlined section headings, blue sub-headings, yellow and green boxes */
.pg--mapping-gis-software-review .pg__title { font-size: calc(2.6 * var(--u)); }
.pg--mapping-gis-software-review .pg__text {
  margin-left: calc(4.2 * var(--u)); width: calc(min(68 * var(--u), 69.5cqw - 18.25 * var(--u)) - 5.7 * var(--u));   /* starts just right of the red line */
  max-height: calc(72cqh - 9.2 * var(--u)); overflow-y: auto;
  padding: calc(1.6 * var(--u)) calc(2.2 * var(--u)) calc(2 * var(--u));
  background: #FFF9E3; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  scrollbar-width: thin; scrollbar-color: rgba(90, 58, 32, .45) transparent;
}
.sw__intro { font-style: italic; margin: 0 8% .8em !important; }
.pg--mapping-gis-software-review h2 {
  font-size: 1.67em; font-weight: bold; text-transform: uppercase; letter-spacing: .02em; color: #333;
  border-bottom: 3px solid #ff0000; padding-bottom: .1em; margin: 1.3em 0 .5em;
}
.pg__text h3 { margin: 1.2em 0 .2em; font-size: 1em; font-weight: bold; color: #222; }
.pg__text h3.sw__sub { font-size: 1.44em; font-weight: normal; color: rgb(18, 125, 218); border-bottom: 1px solid rgb(3, 79, 255); margin-top: 1.4em; }
.pg__text h4 { margin: 1em 0 .15em; font-size: 1em; font-weight: bold; font-style: italic; color: #333; }
.pg__text hr { border: 0; border-top: 1px solid rgba(90, 58, 32, .35); margin: 1.4em 0; }
.pg__text figure { margin: .8em 0 1em; }
.pg__text figure img { max-width: 100%; max-height: calc(30 * var(--u)); width: auto; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pg__text figure.sw__small img { max-height: calc(4 * var(--u)); box-shadow: none; }
.pg__text figcaption { text-align: center; font-size: .9em; font-style: italic; margin-top: .4em; color: rgb(7, 150, 52); }
.sw__row { display: flex; gap: 2%; margin: .8em 0 1em; align-items: flex-end; }
.sw__row img { flex: 1 1 0; min-width: 0; height: auto; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pg__text .sw__yellow { background: rgb(255, 237, 137); text-align: center; font-size: 1.33em; margin: 1em 9% !important; padding: .6em 1.2em; }
.pg__text .sw__statement { background: rgba(255, 208, 0, .27); margin: .8em 6% 1em; padding: .7em 1.4em .7em 2.4em; }
.sw__alpha { list-style: lower-alpha; }
.pg__text ol, .pg__text ul { margin: 0 0 .6em; padding-left: 1.4em; }
.sw__links li { text-align: left !important; }
.pg__text .sw__sign { margin-top: 1.4em !important; font-size: 1.11em; text-align: left; }
.sw__sign strong { color: rgb(228, 49, 49); font-size: 1.1em; }
.sw__about { background: rgba(186, 255, 188, .44); padding: .3em 1.5em 1em; margin: 1.2em 0 .4em; }
.sw__about h3 { margin-top: .8em; }
.pg__text .sw__copy { text-align: right; font-size: .78em; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .pg--mapping-gis-software-review .pg__text { max-height: none; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  .pg__text figure img { max-height: none; }
  .sw__row { flex-wrap: wrap; } .sw__row img { flex: 1 1 30%; }
}

/* Tuition page: "Free" in a yellow star burst after the COURSE heading */
.free-badge {
  display: inline-grid; place-items: center; vertical-align: middle; margin-left: .5em;
  width: 5.4em; height: 3.4em; transform: rotate(-8deg);
  background: #FFD000; color: #222; font-size: .85em; letter-spacing: .04em;
  clip-path: polygon(100.0% 50.0%, 83.7% 54.8%, 98.0% 64.1%, 80.9% 64.1%, 92.1% 77.0%, 75.7% 72.3%, 82.7% 87.8%, 68.4% 78.6%, 70.8% 95.5%, 59.6% 82.6%, 57.1% 99.5%, 50.0% 84.0%, 42.9% 99.5%, 40.4% 82.6%, 29.2% 95.5%, 31.6% 78.6%, 17.3% 87.8%, 24.3% 72.3%, 7.9% 77.0%, 19.1% 64.1%, 2.0% 64.1%, 16.3% 54.8%, 0.0% 50.0%, 16.3% 45.2%, 2.0% 35.9%, 19.1% 35.9%, 7.9% 23.0%, 24.3% 27.7%, 17.3% 12.2%, 31.6% 21.4%, 29.2% 4.5%, 40.4% 17.4%, 42.9% 0.5%, 50.0% 16.0%, 57.1% 0.5%, 59.6% 17.4%, 70.8% 4.5%, 68.4% 21.4%, 82.7% 12.2%, 75.7% 27.7%, 92.1% 23.0%, 80.9% 35.9%, 98.0% 35.9%, 83.7% 45.2%);
}