/* ==========================================================================
   Portfolio — Communi case study
   Figma: Portfolio / frame 5:208 (896 wide: 800 column + 48 padding)
   ========================================================================== */

/* Fonts (self-hosted, SIL Open Font License) -------------------------------- */

/* Inter 3.19, the version the Figma file is set in. (Inter 4 is spaced a
   touch wider, which shifts where lines end.) */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter's own "→" arrow, which the Latin files above leave out. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-arrow-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2192;
}

/* Tokens -------------------------------------------------------------------- */

:root {
  --ink: #000;
  --paper: #fff;
  --muted: rgb(0 0 0 / 0.5);
  --link: #2c56ff;
  --grid-line: #eee;

  --yellow: #fcc327;
  --pink: #fc2788;
  --teal: #7ec7c6;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --column: 800px;
  --gutter: 48px;
  --gap-section: 36px;
  --gap-block: 24px;
  --radius: 16px;
}

/* Base ---------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Figma's "auto" line height for Inter, rounded to whole pixels as Figma does. */
  font: 400 17px / 21px var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: 37.8px;
  line-height: 46px;
}

h2 {
  font-size: 21px;
  line-height: 25px;
}

/* Cap-height trimming, as set on the swatch labels in Figma. */
.trim {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

/* Fallback for browsers without text-box-trim, from Inter's metrics
   (ascent 0.969, descent 0.241, cap height 0.727, at line-height 1). */
@supports not (text-box: trim-both cap alphabetic) {
  .trim::before,
  .trim::after {
    content: "";
    display: table;
  }
  .trim::before {
    margin-bottom: -0.136em;
  }
  .trim::after {
    margin-top: -0.136em;
  }
}

/* Page layout --------------------------------------------------------------- */

.case {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--gutter);
}

/* The page is two of these columns: the case study in <main>, then the other
   projects and the contacts in <footer>, the usual gap below it. The case
   study's column ends flush with its last section, and that is where the
   section menu stops (see .toc). */
main.case {
  position: relative;
  padding-bottom: 0;
}

footer.case {
  padding-top: var(--gap-section);
}

.case__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* A later part of the case study ("UI/UX") starts further down the page:
   67px in all with the usual 36px gap, which is 0.7 of the 96px that two
   stacked Figma frames would leave. */
.case__title ~ .case__title {
  margin-top: 31px;
}

/* The first part's heading ("Branding") is spaced as the same heading is on
   the Virtual Event Summit page: 24px from the text above it and from the text
   below it, in place of the 36px between sections. */
.case__title:first-of-type {
  margin-block: calc(var(--gap-block) - var(--gap-section));
}

/* The logo sits centred in a 179px-tall band. */
.case__logo {
  display: flex;
  justify-content: center;
  padding-block: 35px 34px;
}

/* Opening picture ----------------------------------------------------------- */

/* The gradient with its noise, mixed by a shader (hero-animation.js), under the
   mark and the headline. The corners are those of the image this replaces,
   which had them drawn in.

   The picture comes in as one piece. While the shader is getting ready
   (.hero-loading on the page, set in its head) nothing of it shows, only a
   hairline box in its place; once the shader has drawn it (.is-live) the
   canvas and the headline fade in together.

   Where the shader cannot run there is neither class, and the still picture
   shows: this background, with the noise below. 764 × 428 is the part of the
   gradient export that shows; the image is 128px larger on every side, and the
   background shows its middle. */
.case__hero {
  position: relative;
  aspect-ratio: 800 / 448;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: url("assets/animation-gradient.webp") center / calc(1020 / 764 * 100%) auto no-repeat;
  touch-action: pan-y;
}

/* The noise of the still picture. In the Figma file it is black, blended as
   soft light, and the shader does exactly what Figma does with that. The
   browser's own soft-light is a different formula and comes out heavier, so
   the still picture uses the nearest thing CSS has: colour burn with a 70%
   grey, in the shape of the noise. It is within a level or so of the shader. */
.case__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #b3b3b3;
  -webkit-mask: url("assets/animation-noise.webp") center / 100% 100% no-repeat;
  mask: url("assets/animation-noise.webp") center / 100% 100% no-repeat;
  mix-blend-mode: color-burn;
}

/* The noise comes in two sizes. Screens of ordinary density, and narrow ones,
   draw the picture with about as many pixels as the half-size one has, so
   that is the one they load: a quarter of the weight. The script picks its
   noise by the same test (SMALL_NOISE in hero-animation.js). */
@media (max-resolution: 1dppx), (max-width: 430px) {
  .case__hero::before {
    -webkit-mask-image: url("assets/animation-noise-1x.webp");
    mask-image: url("assets/animation-noise-1x.webp");
  }
}

/* With the shader, the still picture is put away. */
.hero-loading .case__hero,
.case__hero.is-live {
  background-image: none;
}

.hero-loading .case__hero::before,
.case__hero.is-live::before {
  display: none;
}

/* While the picture is on its way, a hairline box with the same corners holds
   its place. It fades out as the picture fades in. */
.hero-loading .case__hero {
  box-shadow: inset 0 0 0 1px var(--grid-line);
}

.case__hero.is-live {
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.3s ease;
}

.case__hero canvas,
.case__hero-graphic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The canvas and the headline fade in together. (The time is HANDOVER in
   hero-animation.js.) */
.case__hero canvas,
.hero-loading .case__hero-graphic {
  opacity: 0;
}

.case__hero.is-live canvas,
.case__hero.is-live .case__hero-graphic {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.case__hero canvas[hidden] {
  display: none;
}

/* The mark and the headline lie over the mix and let the pointer through. */
.case__hero-graphic {
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Browser window ------------------------------------------------------------ */

/* A screenshot in a minimal browser frame: hairline outline, and a 22px bar
   with three dots and an address pill. */
.browser {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--grid-line);
}

.browser::before {
  --dot: radial-gradient(circle closest-side, var(--grid-line) calc(100% - 0.5px), transparent);

  content: "";
  display: block;
  height: 22px;
  border-bottom: 1px solid var(--grid-line);
  background:
    var(--dot) 6px 6px / 10px 10px no-repeat,
    var(--dot) 19px 6px / 10px 10px no-repeat,
    var(--dot) 32px 6px / 10px 10px no-repeat;
}

.browser::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 32.25%; /* 258px of 800 */
  height: 10px;
  border-radius: 3px;
  background: var(--grid-line);
  translate: -50% 0;
}

.browser img {
  width: 100%;
}

/* "Live page" link ---------------------------------------------------------- */

.live-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--link);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-decoration: none;
}

.live-link__text {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* Under the pointer the label drops its underline (and the globe turns, see
   below). */
.live-link:hover .live-link__text {
  text-decoration: none;
}

.live-link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: 4px;
}

/* The icon is a globe: a round window onto the world map. Hovering (or
   focusing) the link slides the map past underneath for exactly one turn,
   easing in and out. The script at the end of the page adds .is-turning to
   start a turn and removes it when the turn ends, so a turn always finishes
   even if the pointer has already left.

   Centred on the line, the globe is level with the capital L. But most of the
   label is lower-case, with descenders and an underline, so its weight sits
   lower and the globe looks high beside it. It is therefore set 1.5px lower,
   where its bottom edge meets the bottom of the underline. (That is 4px into
   the 29px line, so it also lands on whole pixels on any screen.) */
.live-link__globe {
  --map: 45px; /* width of one copy of world-map.svg */

  position: relative;
  top: 1.5px;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background: var(--paper);
}

/* Three copies of the map side by side, moved along by exactly one copy, so
   the turn ends looking exactly as it began. */
.live-link__globe::before {
  content: "";
  position: absolute;
  top: -0.84px;
  left: calc(-4.5px - var(--map));
  width: calc(3 * var(--map));
  height: 25px;
  background: url("../assets/world-map.svg") 0 0 / var(--map) 25px repeat-x;
}

.live-link.is-turning .live-link__globe::before {
  animation: globe-turn 1.43s ease-in-out;
}

/* The ring around the globe. */
.live-link__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--link);
  border-radius: 50%;
}

@keyframes globe-turn {
  to {
    transform: translateX(calc(-1 * var(--map)));
  }
}

/* Gamification -------------------------------------------------------------- */

.gamification {
  display: flex;
  align-items: center;
  gap: 24px;
}

.gamification p {
  flex: 1 1 0;
}

.gamification img {
  flex: none;
}

/* Evolution ----------------------------------------------------------------- */

/* Three marks on a 16px construction grid. In Figma the lines are 0.5px
   hairlines in #eee: drawn as such on high-density screens, and as the 1px
   half-strength line they turn into on standard ones. */
.evolution {
  --line: 1px;
  --line-color: #f6f6f6;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
  min-height: 192px;
  padding-block: 15px 32px;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--line-color) var(--line), transparent var(--line)),
    linear-gradient(to bottom, var(--line-color) var(--line), transparent var(--line));
  background-size: 16px 16px;
  background-position: 5px 14px;
}

@media (min-resolution: 2dppx) {
  .evolution {
    --line: 0.5px;
    --line-color: var(--grid-line);
  }
}

.evolution__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 180px;
}

.evolution__step figcaption {
  color: var(--muted);
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

/* Colors -------------------------------------------------------------------- */

.colors {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Sits level with the middle of the yellow and teal bands. */
.colors__text {
  flex: 1 1 0;
  margin-top: 67px;
  line-height: 24px;
}

/* Three bands that come in from the left edge of the window. Yellow and teal
   stop inside the column; pink runs down the right, turns the corner around
   them and heads back out to the left. */
.palette {
  --width: 384px; /* the part of the palette inside the column */
  --gap: 24px;    /* white space between the bands */
  --band: calc((var(--width) - var(--gap)) * 152 / 360); /* pink thickness: 152px */
  --bleed: 100vw; /* how far the bands run on past the column */

  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: 1fr var(--band);
  grid-template-rows: 127px 79px var(--band);
  gap: var(--gap);
  width: var(--width);
  background: var(--paper);
}

/* Whole pixels keep the pieces of the pink band flush with each other when
   the palette narrows on small screens. */
@supports (width: round(down, 1.5px, 1px)) {
  .palette {
    --band: round(down, (var(--width) - var(--gap)) * 152 / 360, 1px);
  }
}

/* Noise along the top of the yellow and pink bands, fading out downwards. The
   texture is the one already used on the home page, repeated along the band;
   inside the column it shows the same patch of grain as the Figma frame. */
.palette::after {
  content: "";
  position: absolute;
  inset: 0 0 auto calc(-1 * var(--bleed));
  height: 102.45px;
  background: url("../assets/home/communi-noise.webp") calc(var(--bleed) - 35.2px) -139.3px / 424.7px 530.7px repeat-x;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}

.swatch {
  position: relative;
}

.swatch--community,
.swatch--courses {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.swatch--community {
  background: var(--yellow);
}

.swatch--courses {
  background: var(--teal);
}

/* The stretch of the yellow and teal bands outside the column. */
.swatch--community::before,
.swatch--courses::before {
  content: "";
  position: absolute;
  inset: 0 calc(100% - 1px) 0 auto;
  width: var(--bleed);
  background: inherit;
}

/* The pink band is drawn in three pieces. This one is its rounded top. */
.swatch--events {
  grid-column: 2;
  grid-row: 1 / 4;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(var(--pink), var(--pink)) top / 100% calc(2 * var(--radius) + 1px) no-repeat;
  color: var(--paper);
}

/* Down the right side, round the corner and along the bottom: the right and
   bottom borders of a box covering the whole palette. Rounding that box's
   corner gives the outer curve; the inner curve comes out concentric with the
   corner of the teal band, one gap away from it. */
.swatch--events::before {
  content: "";
  position: absolute;
  inset: calc(2 * var(--radius)) 0 0 calc(var(--band) - var(--width));
  border: 0 solid var(--pink);
  border-right-width: var(--band);
  border-bottom-width: var(--band);
  border-bottom-right-radius: calc(var(--radius) + var(--gap) + var(--band));
}

/* The stretch of the pink band outside the column. */
.swatch--events::after {
  content: "";
  position: absolute;
  right: calc(100% + var(--width) - var(--band) - 1px);
  bottom: 0;
  width: var(--bleed);
  height: var(--band);
  background: var(--pink);
}

/* Label positions are the hand-placed ones from the Figma frame. */
.swatch__label {
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 16.5px;
  letter-spacing: -0.165px;
  white-space: nowrap;
}

.swatch__label img {
  flex: none;
}

.swatch--community .swatch__label {
  left: 44px;
  top: 56px;
  gap: 9px;
}

.swatch--events .swatch__label {
  left: 38.375px;
  top: 41px;
  width: 74.25px;
  height: 64.5px;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}

.swatch--courses .swatch__label {
  left: 43px;
  top: 31.075px;
  gap: 4.5px;
}

/* Back link ----------------------------------------------------------------- */

/* "← Home" at the top of the column, leading to the home page, with 32px
   between it and whatever comes first on the page. The arrow is
   assets/icon-back.svg used as a mask, so it takes the colour of the text.
   The padding only makes the link easier to hit; the margins take it back out
   of the layout (and turn the usual gap between sections into 32px). */
.back {
  --hit: 8px;

  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-block: calc(-1 * var(--hit)) calc(32px - var(--gap-section) - var(--hit));
  padding-block: var(--hit);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.back::before {
  content: "";
  flex: none;
  width: 10px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("../assets/icon-back.svg") center / contain no-repeat;
  mask: url("../assets/icon-back.svg") center / contain no-repeat;
}

.back:hover {
  opacity: 0.6;
}

.back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Section menu -------------------------------------------------------------- */

/* A short list of the page's parts, beside the column on large screens: its
   text ends 40px from the column's left edge, 24px between the items. The
   part being read is at full opacity and the others at 60%; the script at the
   end of the page keeps aria-current on the right link.

   The menu keeps to the middle of the window for as long as the case study
   lasts. When the end of the case study comes up to the menu's bottom edge,
   the menu stops there and leaves with the page. This is position: sticky:
   .toc is a rail as tall as the case study, and the links stick inside it, so
   they cannot go past its end.

   (To try it on the other side of the column, swap "right" for "left" in .toc
   and "flex-end" for "flex-start" in .toc__links.)

   The links sit on a frosted panel, so they stay readable where the colour
   bands of the palette pass underneath. The panel's 24px padding comes out of
   the 40px gap: the panel itself stops 16px from the column and the text
   stays put.

   Where the menu stops, it is its text that lines up with the end of the case
   study, not the panel: the last link comes to rest on the baseline of the
   paragraph that ends the case study, beside it. So the rail runs on past the
   case study by the panel's padding, less the 3px that brings the two
   baselines together. */
.toc {
  --pad: 24px;

  position: absolute;
  top: 0;
  bottom: calc(3px - var(--pad));
  right: calc(100% - var(--gutter) + 40px - var(--pad));
  z-index: 1;
  display: none;
  pointer-events: none;
}

/* To centre the menu, sticky needs the menu's height, which is worked out
   here: --links lines of text with a gap between them, and the panel's
   padding above and below. Change --links when a link is added to the menu or
   taken out of it. */
.toc__links {
  --links: 3;
  --line: 15px;
  --gap: 24px;
  --height: calc(var(--links) * var(--line) + (var(--links) - 1) * var(--gap) + 2 * var(--pad));

  position: sticky;
  top: calc(50vh - var(--height) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap);
  padding: var(--pad);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0px -1px 2px rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  font-size: var(--line);
  line-height: 1;
  pointer-events: auto;
}

.toc a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.toc a:hover,
.toc a[aria-current="true"] {
  opacity: 1;
}

.toc a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
  opacity: 1;
}

/* Only where there is room for it beside the column. */
@media (min-width: 1200px) {
  .toc {
    display: block;
  }
}

/* A link in the menu brings its heading to the usual distance from the top. */
.case__title {
  scroll-margin-top: var(--gutter);
}

html {
  scroll-behavior: smooth;
}

/* See next ------------------------------------------------------------------ */

/* The other two projects, at the very end of the page: a small label over two
   pictures, each a link to its project. Like a new part of the case study, it
   starts 67px below what comes before it (31px plus the usual 36px gap). */
.next {
  margin-top: 31px;
}

.next__label {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}

/* 388 × 166 each in Figma, 24px apart. The two share the row, and stack once
   there is less than 200px for each (a phone held upright). The pictures
   (assets/preview-*.jpg) are plain rectangles; the card rounds their corners. */
.next__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-block);
}

.next__card {
  flex: 1 1 200px;
  overflow: hidden;
  border-radius: 12px;
}

.next__card img {
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The same lift as the cards on the home page. */
.next__card:hover img {
  transform: scale(1.025);
}

.next__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Contacts ------------------------------------------------------------------ */

/* What I am open to, with the ways to get in touch right under it, as on the
   home page. */
.availability {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.availability__status {
  font-size: 15px;
  line-height: 18px;
}

/* Email, WhatsApp and LinkedIn, as on the home page: an icon and an underlined
   label each, in a row. The padding only makes the links easier to hit; the
   list's negative margin takes it back out. */
.contacts {
  --hit: 8px;

  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-block: calc(-1 * var(--hit));
}

.contact {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--hit);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.contact__icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.contact__label {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.contact:hover {
  opacity: 0.6;
}

.contact:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Responsive ---------------------------------------------------------------- */

/* Tablets: the palette and its text no longer fit side by side. */
@media (max-width: 839.98px) {
  .colors {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-block);
  }

  /* Stacked under the palette, the text reads like every other paragraph. */
  .colors__text {
    margin-top: 0;
    line-height: inherit;
  }
}

/* Phones. */
@media (max-width: 599.98px) {
  :root {
    --gutter: 20px;
  }

  .case {
    padding-block: 32px;
  }

  .case__logo {
    padding-block: 24px;
  }

  /* The parts' headings are smaller on phones, as on the Virtual Event Summit
     page. */
  .case__title {
    font-size: 28px;
    line-height: 34px;
  }

  .case__title ~ .case__title {
    margin-top: 9px;
  }

  .gamification {
    flex-direction: column;
    align-items: flex-start;
  }

  .gamification img {
    flex: initial;
  }

  /* All three marks take the same size so their captions line up. */
  .evolution {
    align-items: flex-start;
    gap: 12px;
    padding-inline: 8px;
  }

  .evolution__step {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .evolution__step img {
    width: min(100%, 110px);
  }

  /* The palette narrows with the column, and the pink band with it. */
  .palette {
    --width: min(384px, 100vw - 2 * var(--gutter));
  }

  /* The bands get narrower, and the labels move with them. Community and
     Courses share a left edge, 60px left of the middle of their bands: that
     centres Community (120px wide) and lines Courses up under it. Courses
     also sits in the middle of its band's height. */
  .swatch--community .swatch__label,
  .swatch--courses .swatch__label {
    left: calc(50% - 60px);
  }

  .swatch--courses .swatch__label {
    top: 50%;
    translate: 0 -50%;
  }

  /* Events stays centred in the pink band. */
  .swatch--events .swatch__label {
    left: 50%;
    translate: -50% 0;
  }

  .next {
    margin-top: 9px;
  }

  /* The contacts stack, as on the home page. */
  .contacts {
    flex-direction: column;
    align-items: flex-start;
  }
}