/* ==========================================================================
   Vertigo — vertigomedia.no
   Design: Figma "Vertigo - Desktop v2" (1728 canvas, 1296 content grid)
   Plain CSS. No build step, no framework.
   ========================================================================== */

/* --- Design tokens (from the Figma variable set) ------------------------- */
:root {
  --purple:        #3d294d;
  --purple-light:  #544063;
  --pale:          #fffae3;
  --paper:         #fffcf5;
  --yellow:        #fcd14f;
  --ink:           #000000;

  --font: "Hepta Slab", "Zilla Slab", Georgia, "Times New Roman", serif;

  /* Top-of-page geometry. The eagle photo keeps its Figma width; the yellow
     logo block and the purple definition panel fill whatever is left, so the
     logo's bottom-right corner and the panel's top-left corner stay welded to
     the photo at every width.

       --edge     left margin  = the yellow block's width
       --hero-w   photo width  = the Figma 925px until space runs out
       purple     starts at --edge + --hero-w and bleeds to the right edge

     0.2693 is the design's split of the space either side of the photo
     (216 : 586 out of 1728 - 925), so the margins keep their Figma
     proportion as the window grows. */
  --hero-max: 925px;
  --purple-min: 240px;   /* floor for the whole right-hand column */
  --edge: clamp(88px, calc(0.2693 * (100vw - var(--hero-max))), 400px);
  --hero-w: min(var(--hero-max), calc(100vw - var(--edge) - var(--purple-min)));
  --purple-w: calc(100vw - var(--edge) - var(--hero-w));   /* the panel's width */

  --gutter: 24px;   /* plain inset, used once the layout goes to one column */

  /* The header starts at --header-max and shrinks to --header-min over the
     first stretch of scrolling; js/main.js writes --header-h each frame.
     Neither value reacts to window width — the bar has one height per
     breakpoint. Without JS it simply stays at the tall size. */
  /* The yellow block is sized from the wordmark, not the other way round, so
     the whole header scales as one piece. --logo-w is the wordmark's rendered
     width: the block's width less its side padding, capped at the Figma 134px.
     The two heights are that width times the Figma ratios (258/134 and
     142/134), so at design size they come out at exactly 258 and 142. */
  --brand-w: var(--edge);
  --logo-w: min(134px, var(--brand-w) - 2 * clamp(8px, var(--brand-w) * 0.12, 41px));
  --header-max: calc(var(--logo-w) * 1.9254);   /* 258px at design size */
  --header-min: calc(var(--logo-w) * 1.0597);   /* 142px at design size */
  --header-p: 0;   /* 0 = tall, 1 = compact; js/main.js writes this on scroll */
  --header-h: calc(
    var(--header-max) - (var(--header-max) - var(--header-min)) * var(--header-p)
  );

  /* Type scale — design px at 1728, fluid below */
  --fs-display:  clamp(1.75rem, 2.32vw, 2.5rem);    /* 40 */
  --fs-section:  clamp(1.625rem, 2.32vw, 2.5rem);   /* 40 */
  --fs-lead:     clamp(1.125rem, 1.39vw, 1.5rem);   /* 24 */
  --fs-title:    clamp(1.0625rem, 1.39vw, 1.5rem);  /* 24 */
  --fs-body:     clamp(1rem, 1.16vw, 1.25rem);      /* 20 */
  --fs-nav:      clamp(0.9375rem, 1.16vw, 1.25rem); /* 20 */
  --fs-small:    1rem;                              /* 16 */

  --lh-tight: 0.85;
  --lh-body: 1.75;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Digits beside synthesised small caps. Hepta Slab has no true small caps,
     so browsers make them by scaling the capitals down -- and they disagree
     about both how much, and whether digits come along:

         Chrome    letters 0.700   digits 0.700   already level
         Firefox   letters 0.800   digits 1.000   digits stand taller

     So no constant is right in both. js/main.js measures the two ratios at
     boot and writes letters/digits here: 1 in Chrome, 0.8 in Firefox, and
     whatever is correct in an engine that has not shipped yet.

     The default is 1, meaning no correction -- so if the script never runs,
     the digits render as the browser draws them rather than at some
     arbitrary size. */
  --smallcaps-scale: 1;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-min);   /* anchors clear the shrunken bar */
}

body {
  margin: 0;
  /* Reserves the header's tallest size. The bar is fixed, so shrinking it
     never reflows the page — only the bar itself changes. */
  padding-top: var(--header-max);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure, address { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Off-screen but still read out — keeps an element's accessible name when the
   label itself should not be visible. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* --- Layout helpers ----------------------------------------------------- */
.container {
  width: 100%;
  padding-inline: var(--edge);
}

/* Cropped media box. Images reproduce the exact Figma mask crop through
   --w / --h / --x / --y (percentages of the box). Without them they cover. */
.media {
  position: relative;
  overflow: hidden;
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media.is-cropped img {
  max-width: none;
  object-fit: cover;
}

/* Black caption plate used on the hero image and under the portrait */
.badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  line-height: 1.25;
  text-transform: uppercase;
  padding: 14px 31px;
  min-height: 90px;
  font-variant-caps: all-small-caps;
}
.badge__label,
.badge__title { display: block; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;   /* children align to the wordmark's band, not
                                to the middle of the yellow block */
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  background: var(--paper);
  padding-right: clamp(24px, 3.6vw, 92px);   /* 62px at the design width */
}

/* The yellow block: width still tracks the gutter, so its lower-right corner
   keeps meeting the hero photo's upper-left, but the height is now fixed.
   19% side padding reproduces the wordmark's inset in the original asset. */
.brand {
  flex: none;
  display: flex;             /* not grid: an auto-sized track makes the
                                wordmark's width:100% cyclic, and it collapses */
  align-items: flex-start;   /* the inner box is pinned to the top */
  justify-content: center;
  width: var(--brand-w);
  height: 100%;
  /* Based on --brand-w, not a percentage: percentage padding resolves against
     the containing block (the header), which has nothing to do with this
     block's own width. */
  padding-inline: clamp(8px, var(--brand-w) * 0.12, 41px);
  background: var(--yellow);
}
/* A constant-height box at the top of the yellow block, with the wordmark
   centred inside it. While the block is tall the wordmark keeps the Figma
   distance from the top; once the block shrinks to --header-min the box fills
   it and the wordmark is dead centre.

   The point of doing it this way rather than centring in the block and
   counter-shifting: this box never changes size, so the wordmark does not
   move at all during the shrink. A transform that tracked the block's height
   would be re-resolved against a layout height that snaps to whole device
   pixels every frame, which makes the logo shimmer. */
.brand__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--header-min);
}

.brand img {
  width: var(--logo-w);
  height: auto;
}

/* The same constant band the wordmark sits in, so the menu lines up with the
   logo rather than with the yellow block — and, like the wordmark, it does
   not move while the header shrinks. */
.site-nav {
  display: flex;
  align-items: center;
  height: var(--header-min);
}
.site-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.site-nav a {
  display: block;
  padding: 26px 28px;
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}
.site-nav a:hover { opacity: 0.55; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  height: var(--header-min);
  padding: 10px 9px;   /* widens the tap target now the label is icon-only */
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after  { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero__frame {
  position: relative;
  width: var(--hero-w);
  max-width: 100%;
}
.hero__media { aspect-ratio: 925 / 520.31; }

.hero__badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 216px;
  transition: background-color 0.2s var(--ease);
}
a.hero__badge:hover { background: var(--purple); }

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
  position: relative;
  min-height: 554px;   /* matches the purple panel, keeps the next section on grid */
}

.intro__text {
  /* Never wider than the photo, so it cannot reach under the purple panel —
     the panel starts exactly where the photo ends. */
  max-width: var(--hero-w);
  padding: 62px 0 100px;
}

.display {
  max-width: min(740px, var(--hero-w));   /* the Figma text box */
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-caps: all-small-caps;
}

.lead {
  max-width: 562px;
  margin-top: 40px;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* Purple definition panel — bleeds off the right edge, as designed.
   Anchored 278px right of centre so it keeps its relationship to the
   text column on very wide screens. */
.panel--purple {
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--edge) + var(--hero-w));   /* the photo's right edge */
  min-height: 554px;
  background: var(--purple);
  color: var(--paper);
  /* Scaled from the panel's own width, so the text keeps its margin when the
     panel is narrow. A percentage would resolve against .intro (the whole
     page) and stay stuck at the 92px cap, letting text reach the edge. */
  padding: 86px clamp(20px, var(--purple-w) * 0.157, 92px) 48px;
}
.panel--purple p {
  max-width: 279px;
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* ==========================================================================
   Om Joachim
   ========================================================================== */
.about {
  background: var(--pale);
  padding: 120px 0 129px;
}
/* The first column is the photo's width, so the second starts exactly where
   the hero photo ends — the same line the purple panel above starts on. The
   negative margin lets that column run out to the window edge like the panel
   does, instead of stopping at the content grid. */
.about__grid {
  display: grid;
  grid-template-columns: var(--hero-w) minmax(0, 1fr);
  align-items: center;
  padding-right: 0;
}
.about__text p {
  max-width: 562px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.about__aside { width: 308px; max-width: 100%; justify-self: start; }
.about__media { aspect-ratio: 1 / 1; }
.about__badge { width: 247px; max-width: 100%; }

/* ==========================================================================
   Prosjekter
   ========================================================================== */
.projects { padding: 108px 0 0; }

.section-title {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-caps: all-small-caps;
}
.section-title--purple { color: var(--purple); }
.section-title--spaced { margin-top: 108px; }

.accordion {
  margin-top: 36px;
  border-top: 2px solid var(--purple);
}

.project { border-bottom: 2px solid var(--purple); }

.project__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 66px;
  padding: 12px 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--purple);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-caps: all-small-caps;
}
button.project__header { cursor: pointer; }
button.project__header:hover .project__name { opacity: 0.6; }
/* Takes the free space, so the pill and the arrow sit together at the right
   rather than being spread apart by justify-content: space-between.
   min-width: 0 lets a long title wrap instead of pushing the pill out. */
.project__name {
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s var(--ease);
}

/* Digits are not small-capped, so they are scaled to sit level with the letters
   beside them. .project__year takes the middot with it, so the whole suffix
   shrinks as a unit; .nums is the general case, applied by main.js to digit
   runs inside small-capped copy (the address and the phone number). */
.project__year,
.nums {
  font-size: calc(1em * var(--smallcaps-scale));
}

/* "I arbeid" pill. Deliberately below --fs-small at every width so it stays
   subordinate to the title, which is more than twice its size on desktop but
   close to it on a phone. */
.project__tag {
  flex: none;
  align-self: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.project__arrow {
  flex: none;
  width: 19.21px;
  height: 19.74px;
  transition: transform 0.3s var(--ease);
}
.project.is-open .project__arrow { transform: rotate(180deg); }
.project--static .project__arrow { opacity: 0.3; }

/* Expandable panel. The 0fr -> 1fr grid row animates to the content's own
   height, so nothing has to be measured in JS and it stays correct when the
   content reflows (images loading, window resize). */
.project__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s var(--ease), visibility 0s linear 0.35s;
}
.project.is-open .project__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s var(--ease), visibility 0s;
}
/* The clip wrapper is what collapses; .project__inner keeps its padding,
   which could not shrink to zero on its own. */
.project__panel > .project__clip {
  overflow: hidden;
  min-height: 0;
}
.project__inner {
  display: grid;
  grid-template-columns: minmax(0, 494px) minmax(0, 1fr);
  gap: 60px;
  padding: 24px 0 95px;
  color: var(--purple);
}
.project__body { font-size: var(--fs-small); line-height: var(--lh-body); }

.credits {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  margin-top: 26px;
  font-size: var(--fs-small);
  line-height: 1.75;
  text-transform: uppercase;
}
.credits dt { font-weight: 700; }
.credits dd { margin: 0; font-weight: 600; }

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 247px;
  min-height: 44px;
  margin-top: 46px;
  padding: 0 16px;
  background: var(--yellow);
  color: var(--purple);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  transition: filter 0.2s var(--ease);
}
.play-button:hover { filter: brightness(0.92); }
.play-button__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 15.77px;
  height: 15.77px;
  transform: rotate(90deg);
}
.play-button__icon img { width: 13.65px; height: 11.82px; }

.project__media {
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 464px;
  aspect-ratio: 464 / 340;
}

/* ==========================================================================
   Nyheter
   ========================================================================== */
.news {
  margin-top: 108px;
  padding: 98px 0 0;
  background: var(--yellow);
  overflow: hidden;
}

/* The track deliberately runs past the right edge (as designed) and scrolls. */
.news__viewport {
  margin-top: 48px;
  padding-bottom: 172px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Must match the track's inline padding, or the initial snap pulls the
     first card flush to the viewport edge and eats the grid gutter. */
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
}
.news__viewport::-webkit-scrollbar { display: none; }
/* The row is draggable, so say so — but only while it actually overflows. */
.news__viewport.is-draggable { cursor: grab; }
.news__viewport.is-grabbing {
  cursor: grabbing;
  scroll-snap-type: none;   /* snapping would fight the drag */
  user-select: none;
}
.news__viewport img {
  -webkit-user-drag: none;   /* stops the native image drag stealing the pointer */
}

.news__track {
  display: flex;
  gap: 62px;
  width: max-content;
  padding-inline: var(--edge);
}

.news-item {
  flex: none;
  width: 432px;
  max-width: 78vw;
  scroll-snap-align: start;
}
.news-item__media { aspect-ratio: 1 / 1; }
.news-item__title {
  margin-top: 26px;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-caps: all-small-caps;
}
.news-item__body {
  margin-top: 26px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact {
  background: var(--pale);
  padding: 108px 0 0;
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 431px));
  gap: 62px;
  margin-top: 77px;
  max-width: 924px;
}
.contact__block {
  font-size: var(--fs-lead);
  line-height: 1.25;
  text-transform: uppercase;
  font-variant: all-small-caps;
}
.contact__block a { transition: opacity 0.2s var(--ease); }
.contact__block a:hover { opacity: 0.55; }

/* ==========================================================================
   Footer — oversized logotype, clipped at the bottom of the page
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--pale);
  padding-top: 275px;
  overflow: hidden;
}
.site-footer__logotype {
  width: 102.4%;            /* 1327 of 1296 */
  height: 0;
  padding-bottom: 42.06%;   /* 545 visible of the 881 designed height */
  overflow: visible;
}
.site-footer__logotype svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1097.6 / 730.9;   /* Firefox needs this to resolve height:auto */
  overflow: visible;
}

/* Rotated copyright strip down the left edge.
   writing-mode + rotate(180deg) keeps a real layout box (a rotate(-90deg)
   about `left bottom` would place the whole box at negative x).

   text-orientation: sideways is load-bearing, not decoration. In vertical
   writing mode the browser rotates each character according to its Unicode
   vertical-orientation property, and U+00A9 COPYRIGHT SIGN is classified
   upright while Latin letters are classified rotated -- so the letters turned
   and the (c) did not, leaving it 180 degrees out once the transform was
   applied. `sideways` rotates every glyph regardless of that property. */
.site-footer__legal {
  position: absolute;
  left: clamp(16px, 3.3vw, 56px);
  bottom: 68px;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: var(--fs-small);
  line-height: 1.25;
  text-transform: uppercase;
}
.site-footer__legal span { display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet / small laptop */

/* Where the purple panel and the text column start to collide */
/* Compact layout: the purple panel stops sitting beside the text, the grids
   go to one column, and the menu collapses. One breakpoint rather than three
   — the nav needs 762px to lay out flat, so it has room to spare here. */
@media (max-width: 1000px) {
  :root { --hero-w: 100%; }

  .site-header { padding-right: var(--gutter); }
  .site-nav a { padding: 26px 16px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    height: auto;   /* the dropdown must not be clipped */
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a {
    padding: 18px var(--gutter);
    font-size: 1.125rem;
    border-top: 2px solid var(--ink);
  }
  .site-nav li:first-child a { border-top: 0; }

  .about { padding: 88px 0; }
  .news__track { gap: 40px; }

  .intro { min-height: 0; }
  .intro__text { padding: 48px 0 0; }
  .lead { max-width: none; }

  .panel--purple {
    position: static;
    width: auto;
    min-height: 0;
    margin-top: 56px;
    padding: 56px 0;
  }
  .panel--purple p {
    max-width: 640px;
    padding-inline: var(--edge);
  }

  .about__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-right: var(--edge);
  }

  .project__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .project__media { justify-self: start; max-width: 464px; order: -1; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Collapsed navigation — four items stop fitting beside the logo here */

/* Phone */
@media (max-width: 700px) {
  :root { --gutter: 20px; --edge: 20px; }

  /* The gutter is too narrow to hold the block here, so the block sets its
     own width — and the heights follow from it as everywhere else. */
  :root { --brand-w: 108px; }

  .hero { margin-top: 24px; }
  .hero__badge {
    position: static;
    width: 100%;
    min-height: 0;
    padding: 16px var(--gutter);
  }

  .intro__text { padding-top: 40px; }
  .lead { margin-top: 28px; }
  .panel--purple { margin-top: 40px; padding: 40px 0; }

  .about { padding: 64px 0; }
  .about__aside { width: 100%; max-width: 308px; }
  .about__badge { width: 100%; padding: 14px 20px; min-height: 72px; }

  .projects { padding-top: 72px; }
  .section-title--spaced { margin-top: 72px; }
  .accordion { margin-top: 24px; }
  .project__header { min-height: 58px; gap: 16px; }
  .project__inner { padding: 20px 0 48px; }
  .credits { grid-template-columns: minmax(0, 1fr); }
  .credits dt { margin-top: 12px; }
  .credits dt:first-of-type { margin-top: 0; }
  .play-button { margin-top: 32px; width: 100%; justify-content: center; }

  .news { margin-top: 72px; padding-top: 64px; }
  .news__viewport { margin-top: 40px; padding-bottom: 72px; }
  .site-footer { padding-top: 96px; }
  .news__track { gap: 24px; }

  .contact { padding-top: 72px; }
  .contact__grid { margin-top: 40px; }

  .site-footer { padding-top: 64px; }
  .site-footer__logotype { width: 100%; padding-bottom: 41.07%; }
  .site-footer__legal {
    position: static;
    /* Clearing the transform is not enough on its own -- without this the
       strip stays in vertical writing mode and simply runs top to bottom. */
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0px var(--gutter) 70px 28px;
    white-space: normal;
    font-size: 12px;
  }
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}