@font-face {
  font-family: "Cormorant Garamond";
  src: local("Cormorant Garamond"), url("fonts/CormorantGaramond-SemiBold.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: local("Cormorant Garamond"),
    url("fonts/CormorantGaramond-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Source Sans";
  src: local("Source Sans"), url("fonts/SourceSans3-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Source Sans";
  src: local("Source Sans"), url("fonts/SourceSans3-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  /* the wordmark is set in this weight -- block rather than flash a
     fallback serif in the logo's place */
  font-display: block;
}

@font-face {
  font-family: "Source Sans";
  src: url("fonts/SourceSans3-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Source Sans";
  src: url("fonts/SourceSans3-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

::selection {
  background: #9a65c3;
}

/* Each project page has one accent colour. It was already driving
   ::selection; the footer wave and the page headings now use it too.
   --wave carries the whole url() because the colour is baked into the
   SVG data URI and cannot be swapped from outside it. */
:root {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%239a65c3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-interactive-design {
  --page-color: #65aca6;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%2365aca6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-graphic-design {
  --page-color: #eb5374;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%23eb5374' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-brand-design {
  --page-color: #cca4f6;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%23cca4f6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-ui-ux {
  --page-color: #0e50fc;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%230e50fc' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-flow-fever {
  --page-color: #9f9cfb;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M0,5q5.5,-3.6,11,0t11,0t11,0t11,0' fill='none' stroke='%239f9cfb' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-interactive-design ::selection {
  background: #65aca6;
}

.page-graphic-design ::selection {
  background: #eb5374;
}

.page-brand-design ::selection {
  background: #cca4f6;
}

.page-ui-ux ::selection {
  background: #0e50fc;
}

.page-flow-fever ::selection {
  background: #9f9cfb;
}

h1,
h2,
h3,
h4 {
  font-weight: 300;
  font-style: normal;
}

body {
  font-family: "Source Sans", sans-serif;
  margin: 0;
}

.header-background {
  top: 0;
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: white;
}

.header-title {
  line-height: normal;
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-weight: 500;
  font-size: 28px;
  position: fixed;
  z-index: 55;
  top: 14px;
  left: 30px;
  color: black;
}

/* under 500px the header shows the word "home"; above it, the wordmark.
   Weight 600 and 28px are the same as .header-menu, so the wordmark sits
   level with the nav instead of reading as an emphasised/active item --
   the hero keeps the heavier 700. (600 at 28px puts the ascender at
   20.3px, which is the height the old logo.svg img was rendered at.) */
.header-wordmark {
  display: none;
  font-weight: 700;
  white-space: nowrap;
}

.header-home {
  display: block;
}

@media screen and (min-width: 500px) {
  .header-wordmark {
    display: block;
  }

  .header-home {
    display: none;
  }
}

.header-menu {
  /* explicit so a page stylesheet setting line-height on body cannot
     shift the nav -- see the note in about.css */
  line-height: normal;
  top: 14px;
  right: 30px;
  position: fixed;
  z-index: 56;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: "Cormorant Garamond";
  font-weight: 600;
}

.header-menu li {
  display: inline;
  font-size: 28px;
  margin-left: 30px;
}

.header-menu li a {
  text-decoration: none;
  color: black;
}

/* ---------- Language switch ---------- */
/* Klaudi's design: outlined pill, black knockout sliding between the two
   halves, active language reversed out in white. Sized in em off its own
   font-size, so changing --lang-size below rescales stroke, padding and
   knockout together. Deliberately smaller than the 28px nav -- at nav size
   the filled pill outweighs the wordmark in a 60px header. */
.lang-switch {
  --lang-size: 17px;
  --pad: 0.18em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--pad);
  background: none;
  border: 1px solid black;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-size: var(--lang-size);
  line-height: 1;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.lang-switch::before {
  content: "";
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc(50% - var(--pad));
  background: black;
  border-radius: 999px;
  transition: transform 0.26s cubic-bezier(0.52, -0.42, 0.28, 1.42);
}

.lang-switch[data-lang="de"]::before {
  transform: translateX(100%);
}

/* squash on press, so it reads as flicked rather than merely animated */
.lang-switch:active::before {
  transform: translateX(var(--x, 0)) scaleX(0.88);
}

.lang-switch[data-lang="de"]:active::before {
  --x: 100%;
}

.lang-switch__side {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 2em;
  padding: 0.12em 0.42em;
  text-align: center;
  user-select: none;
  transition: color 0.2s ease 0.04s;
}

.lang-switch[data-lang="de"] .lang-switch__side--de,
.lang-switch[data-lang="en"] .lang-switch__side--en {
  color: white;
}

.lang-switch[data-lang="de"] .lang-switch__side--en,
.lang-switch[data-lang="en"] .lang-switch__side--de {
  color: black;
}

.lang-switch:focus-visible {
  outline: 2px solid #9a65c3;
  outline-offset: 4px;
}

/* Brand violet on hover for the two top-level items only. "about me" is a
   direct child of its li; "projects" sits inside .menu-dropdown, hence the
   second selector -- and keying it off .menu-dropdown:hover keeps "projects"
   violet while the pointer moves down into the open dropdown, instead of
   snapping back to black. The dropdown's own links keep their existing grey
   background hover. */
/* Nav items stay black and only colour on hover. On a project page that
   hover colour is the page's accent; elsewhere it is brand violet. */
.header-menu > li > a:hover,
.menu-dropdown:hover .menu-dropbtn {
  color: var(--page-color, #9a65c3);
}

/* Style The Dropdown Button */

.menu-dropbtn {
  color: white;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */

.menu-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */

.menu-dropdown-content {
  display: none;
  position: fixed;
  z-index: 55;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  margin-left: -45px;
}

/* Links inside the dropdown */

.menu-dropdown-content a {
  text-align: center;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 20px;
}

/* Change color of dropdown links on hover */

.menu-dropdown-content a:hover,
.menu-dropdown-content a:active {
  background-color: #dddddd;
}

/* Show the dropdown menu on hover */

.menu-dropdown:hover .menu-dropdown-content,
.menu-dropdown:active .menu-dropdown-content {
  display: block;
}

/* ---------- Mobile navigation ---------- */
/* Below 768px the nav does not fit beside the wordmark: three inline items
   at 28px need ~370px and the wordmark ~220px, so they collided -- at 390px
   "projects" printed straight over "home". Under that width the nav becomes
   a panel and a hamburger opens it.

   This block sits after the base .header-menu and dropdown rules on purpose:
   a media query adds no specificity, so anything declared later would win. */
.nav-toggle {
  display: none;
  position: fixed;
  z-index: 57;
  /* centred on the word "home", not on the bar. Its glyphs run from the
     ascender top to a baseline at y=41, so the optical centre is y=30.8;
     a 24px box therefore starts at 19, not 16. */
  top: 19px;
  right: 30px;
  width: 30px;
  height: 24px;
  padding: 4px 3px;
  box-sizing: border-box;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  /* 2px reads at the same weight as the 28px Cormorant beside it; 1.5px
     looked spindly next to the type */
  height: 2px;
  background: black;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 5px;
}

/* the three bars fold into a cross */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--page-color, #9a65c3);
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .nav-toggle {
    display: block;
  }

  .header-menu {
    position: fixed;
    z-index: 54;
    top: 60px;
    right: 0;
    bottom: auto;
    left: 0;
    display: none;
    /* 30px matches .header-title's `left: 30px`, so the panel items line up
       under the wordmark rather than under the narrower content measure */
    padding: 1.6rem 30px 2.2rem;
    background: white;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.09);
  }

  .header-menu[data-open] {
    display: block;
  }

  .header-menu li {
    display: block;
    margin-left: 0;
    margin-bottom: 1.1rem;
  }

  .header-menu li:last-child {
    margin-bottom: 0;
  }

  /* no hover on touch, so the project list is simply always open */
  .menu-dropdown,
  .menu-dropdown-content {
    display: block;
    position: static;
    min-width: 0;
    margin-left: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
  }

  .menu-dropbtn {
    display: block;
    cursor: default;
  }

  .menu-dropdown-content a {
    text-align: left;
    padding: 0.5rem 0 0 1.1rem;
    font-size: 22px;
  }

  .menu-dropdown-content a:hover,
  .menu-dropdown-content a:active {
    background: none;
    color: var(--page-color, #9a65c3);
  }
}


/* The wordmark is live text, not img/logo.svg: Cormorant Garamond 700 at
   the font's own default letter-spacing, matching every other run of this
   typeface on the site. (The old outlined logo carried ~0.062em of extra
   tracking; that is deliberately not reproduced.)

   font-size is in vw so the wordmark still spans the width the SVG did:
   "klaudia christiansen" measures 7.853em, so 85vw / 7.853 = 10.824vw, and
   likewise per breakpoint. To resize, change the 85/70 and keep the divisor. */
.big-logo {
  z-index: 31;
  font-family: "Cormorant Garamond";
  font-weight: 700;
  font-size: 10.824vw;
  line-height: 1;
  white-space: nowrap;
  color: black;
  /* overrides the global `h1, p` and `h1..h4` rules further down */
  padding-top: 0;
  margin-left: 0;
  text-align: center;
  filter: opacity(0%) blur(0px);
  animation: fadein ease-in-out 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@media only screen and (min-width: 650px) {
  .big-logo {
    font-size: 8.913vw;
  }
}

@media only screen and (min-width: 1050px) {
  /* old rule capped the image at 60rem; the type equivalent caps font-size */
  .big-logo {
    font-size: min(8.913vw, 8.913rem);
  }
}

@keyframes fadein {
  0% {
    filter: opacity(0%) blur(10px);
  }
  100% {
    filter: opacity(100%) blur(0px);
  }
}

.content {
  width: 100%;
  z-index: 0;
  padding-top: 60px;
}

.content h1 {
  color: rgb(0, 0, 0);
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
}

.hero-container {
  margin-top: calc(7rem + 60px);
  margin-bottom: 7rem;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .hero-container {
    margin-top: calc(10rem + 60px);
    margin-bottom: 10rem;
  }
}

.hero-text {
  font-family: "Cormorant Garamond";
  font-weight: 500;
  font-style: italic;
  font-size: 2.5rem;
  margin: 2rem;
}

@media screen and (min-width: 992px) {
  .hero-text {
    font-size: 4.5rem;
    margin: 3rem;
  }
}

/* Home project grid.
   Deliberately NOT .wrapper: that class is shared with the project pages
   (.wrapper.subpage-content, .wrapper.subpage-two-column) and the legal
   pages (.wrapper.text-page-content), which want the old flex behaviour.

   This was a flex row of fixed 32rem cards with `margin-inline: auto`.
   Auto margins in flex swallow all the free space, so the horizontal gap
   was whatever happened to be left over -- 31px at 1100px wide, 224px at
   1500px -- while the vertical gap stayed at a fixed 40px. A real grid
   with one `gap` keeps both identical at every width.

   Width is the site's content measure, the same 1240px and fluid padding
   used by .site-footer__inner and, on the about page, .wrap, so the grid
   lines up with the footer beneath it. */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(1.1rem, 4vw, 4rem);
  max-width: 1240px;
  margin-bottom: 60px;
}

@media only screen and (min-width: 848px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* an odd card last in the list spans both columns and centres at one
     column's width, rather than hanging off to the left */
  .project-grid .photo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 40px) / 2);
  }
}

/* the shared wrapper, unchanged: project pages and the legal pages use it */
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
  max-width: 92rem;
  margin-bottom: 60px;
}

.subpage-container {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.ui-ux-background {
  background-color: #0e50fc;
  margin-top: 40px;
  margin-bottom: 20px;
}

.ff-white-background {
  background-color: white;
  margin-bottom: 20px;
  padding: 40px;
  padding-bottom: 20px;
}

@media screen and (min-width: 992px) {
  .ff-white-background .subpage-container {
    max-width: 800px;
    padding-block: 40px;
  }
}

.ff-background {
  background-color: #9f9cfb;
  margin-top: 40px;
  padding: 20px;
}

@media screen and (min-width: 992px) {
  .ff-background .subpage-container {
    max-width: 800px;
    padding-block: 40px;
  }
}

/* The project name stays black; the subline under it carries the accent. */
h2.subpage-content {
  color: var(--page-color, black);
}

h1.subpage-content {
  display: block;
  font-family: "Cormorant Garamond";
  text-align: center;
  font-weight: 600;
  font-size: 4rem;
  margin-top: 4rem;
  margin-bottom: 0;
  line-height: 70%;
}

.page-interactive-design h1 {
  font-size: 3rem;
}

h2.subpage-content {
  display: block;
  font-family: "Source Sans";
  font-style: italic;
  text-align: center;
  font-size: 1rem;
  margin-top: 50px;
  margin-bottom: 0px;
}

p.subpage-content {
  display: block;
  font-size: 1.3rem;
  padding-top: 0;
  line-height: 130%;
}

.subpage-content span {
  display: block;
  text-align: center;
  margin-top: 2rem;
}

/* The rule above exists to centre the wrapper span around a call-to-action
   button. Spans that are only there to anchor a translation key must stay
   inline, or they break out of the flow of the paragraph they sit in. */
.subpage-content span[data-i18n] {
  display: inline;
  text-align: inherit;
  margin-top: 0;
}

.button-subpage {
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 0.7rem;
  padding-inline: 2.1rem;
  font-size: 1.4rem;
  border-radius: 8px;
}

.button-interactive-design {
  background-color: #42807b;
}

.button-interactive-design:hover {
  background-color: #3a716d;
}

.button-brand-design {
  background-color: #8d63bb;
}

.button-brand-design:hover {
  background-color: #8e50cc;
}

.button-flow-fever {
  color: black;
  margin-inline: auto;
  background-color: #9f9cfb;
}

.button-flow-fever:hover {
  background-color: #8481d0;
}

.wrapper.subpage-content {
  margin-top: 40px;
  margin-bottom: 20px;
}

.subpage-footer {
  margin-top: 120px;
}

.subpage-hero-with-text {
  display: flex;
  flex-direction: column;
}

.subpage-two-column .picture {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.subpage-two-column .picture img {
  display: block;
}

.desktop-only {
  display: none;
}

@media screen and (min-width: 768px) {
  h1.subpage-content {
    font-size: 6rem;
  }

  h2.subpage-content {
    font-size: 1.25rem;
  }

  p.subpage-content {
    font-size: 1.4rem;
  }


  .subpage-two-column {
    display: flex;
    flex-direction: row;
  }

  .subpage-two-column > div {
    width: 50%;
  }

  .mobile-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

@media screen and (min-width: 992px) {
  .subpage-container {
    max-width: 1400px;
  }

  h1.subpage-content {
    font-size: 8rem;
  }

  h2.subpage-content {
    font-size: 1.5rem;
  }

  p.subpage-content {
    font-size: 1.5rem;
    max-width: 755px;
    margin-top: 40px;
  }

  .subpage-hero-with-text {
    flex-direction: column-reverse;
  }

}

.text-page-content {
  margin-top: 92px;
  margin-bottom: 92px;
  padding-left: 30px;
  padding-right: 30px;
  display: block;
  max-width: calc(100% - 60px);
  width: 600px;
  min-width: 60%;
  font-size: 22px;
}

.text-page-content p {
  padding: initial !important;
  text-align: initial !important;
}

.text-page-content li {
  font-family: "Source Sans", sans-serif;
  font-style: normal;
  color: black;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  /*width: 1200px;*/
}

.text-page-content a {
  line-break: anywhere;
}

.position_anchor {
  width: 100%;
}

img,
video {
  width: 100%;
}

.photo {
  /* Width and spacing come from the grid; a card fills its column, so a row
     always spans the full content measure. */
  width: auto;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ffffff00;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: background-color 0.5s, opacity 0.5s;
}

.photo img {
  transition: transform 0.5s ease, 0.5s filter ease;
  filter: grayscale(100%);
}

@media (hover: hover) {
  .photo:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
  }
}

@media (hover: none) and (max-width: 768px) {
  .photo.viewport-visible-mobile img {
    transform: scale(1.1);
    filter: grayscale(0%);
  }
}

@media (hover: none) and (min-width: 768px) {
  .photo img {
    transform: scale(1.1);
    filter: grayscale(0%);
  }
}

.picture {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

p {
  font-family: "Source Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  hyphens: auto;
  font-size: 20px;
}

h1,
p {
  color: black;
  padding-top: 4rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Site footer ---------- */
/* Four label columns under a violet squiggle rule, from the about-page
   design. font-synthesis is off so a missing weight fails visibly rather
   than being faked by the browser. */
/* The wave rule spans the whole screen; the columns below it stay inside
   the 1240px content measure. Hence ::before on the full-bleed footer
   rather than a background on the column grid. */
.site-footer::before {
  content: "";
  display: block;
  height: 10px;
  background-image: var(--wave);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 44px 10px;
}

.site-footer {
  font-family: "Source Sans";
  font-weight: 400;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.6;
  color: black;
  background-color: white;
}

.site-footer__inner {
  /* border-box explicitly: about.css sets `* { box-sizing: border-box }`
     for its own page, so without this the shared footer measured 1240px
     of content there and 1240 + padding (1368px) on every other page.
     Now it is 1240px overall everywhere, matching .wrap on the about page
     and .wrapper on the home grid. */
  box-sizing: border-box;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 4rem);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem;
  padding: 2.6rem 0 4.5rem;
}

@media screen and (max-width: 767px) {
  /* Two columns on mobile, paired as location|social and contact|legal.
     The DOM order is location, contact, social, legal, so the grid is
     filled column-first rather than row-first to get those pairings
     without reordering the markup (which would break tab order). */
  .site-footer__cols {
    /* Not 50/50: the left column carries the 207px email address while the
       right only needs ~110px for "SOCIAL MEDIA" and "Data protection".
       1.85fr keeps the address on one line down to a 375px screen. */
    grid-template-columns: 1.85fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 1.6rem 1.1rem;
  }

  /* the email is 28 characters with nowhere to break; the <wbr> after the
     @ gives it a sensible break point, and this is the safety net below
     375px where even that is not enough */
  .site-footer a {
    overflow-wrap: anywhere;
  }

  /* the narrower right column cannot hold "SOCIAL MEDIA" at 13px/0.16em
     once the left column is widened for the address */
  .site-footer__label {
    font-size: 12px;
    letter-spacing: 0.11em;
  }
}

.site-footer__label {
  font-family: "Source Sans";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--page-color, #9a65c3);
  margin: 0 0 0.55rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--page-color, #9a65c3);
}

/* on a project page the footer links hover in that page's accent, matching
   the wave and the labels above them */
.site-footer a:hover {
  color: var(--page-color, #9a65c3);
}

.figma-prototype {
  width: 450px;
  max-width: 70%;
  aspect-ratio: 428 / 1000;
}

@media only screen and (min-width: 992px) {
  .figma-prototype {
    max-width: 100%;
    aspect-ratio: 428 / 900;
  }
}

iframe {
  overflow: hidden;
}