/* ==========================================================================
   Elcano
   One column, capped at 1600px so the 1920px hero video is never upscaled.
   From 1100px wide it also keeps a 50px margin of gold leaf on each side;
   past the cap the margins simply grow.
   ========================================================================== */

:root {
  --parchment: #f4ece1;
  --ink: #1c1712;
  --gilt: #b7955f;
  --gilt-light: #dcc08c;
  --gilt-dark: #9c7843;
  --gilt-text: #6f5329;     /* brass dark enough for small text: 6.1:1 on parchment, 5:1 over the harbour */
  --ink-soft: rgb(28 23 18 / .78);
  --pitch: #1d1c1a;
  --gold-leaf: #86693a;

  --glass-ink: #25282b;

  /* Text is Bricolage Grotesque, with the system UI face as a fallback. The
     headline and titles are Crimson Pro, and the wordmark DM Serif Display. */
  --font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --page-max: 1600px;
  --frame: 50px;
  --gutter: clamp(1.25rem, 5.5vw, 5.5rem);

  /* Header and headline type. The temporary Preferences panel
     (js/prefs.js) sets these live to try alternatives. */
  --wordmark-font: "DM Serif Display", var(--font-serif);
  --wordmark-size: 1.375rem;
  --wordmark-weight: 400;   /* DM Serif Display has no other weight */
  --wordmark-tracking: -.01em;
  --wordmark-case: lowercase;

  --menu-font: var(--font-sans);
  --menu-size: .9375rem;    /* tablet up; the phone sheet sets its own */
  --menu-weight: 400;
  --menu-tracking: 0em;
  --menu-gap: clamp(1.25rem, 2.2vw, 2.3125rem);   /* 30px at 1367px wide */

  --button-size: 1rem;
  --button-weight: 500;
  --button-pad: 1.25rem;

  --headline-font: "Crimson Pro", var(--font-serif);
  --headline-size: clamp(1.625rem, 1.281rem + 1.469vw, 2.75rem);
  --headline-weight: 400;
  --headline-tracking: -.02em;
  --headline-leading: 1.08;

  /* Sections below the intro. Titles follow the headline's font, weight and
     tracking, one size down. */
  --section-pad: clamp(4rem, 2.75rem + 5.25vw, 8rem);  /* above and below a section */
  --measure: 29em;                                     /* running text, under 70 characters a line */

  --eyebrow-font: var(--font-sans);
  --eyebrow-size: .75rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: .16em;

  --title-font: var(--headline-font);
  --title-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem);
  --title-weight: var(--headline-weight);
  --title-tracking: var(--headline-tracking);
  --title-leading: 1.1;

  --lede-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --body-size: clamp(1rem, .97rem + .12vw, 1.0625rem);

  --btn-h: 2.75rem;         /* section buttons; the header's matches from tablet up */

  /* Header: a glass bar with room above and below it */
  --bar-h: 3.25rem;
  --bar-space: .5rem;
  --bar-pad: clamp(1.25rem, 2.2vw, 1.875rem);    /* inside the pills; 30px from 1364px wide */
  --bar-tint: .36;
  --bar-blur: 22px;
  --header-h: calc(var(--bar-h) + 2 * var(--bar-space));
}

@media (min-width: 768px) {
  :root {
    --bar-h: 3rem;
    --bar-space: .75rem;
    --button-size: .9375rem;
    --btn-h: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --bar-space: 1.25rem;
    --menu-size: 1rem;
  }
}

/* Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Parchment where the column fills the screen, so Safari's toolbar tint and
   the overscroll match the page; the gold shows only in the wide margins */
body {
  margin: 0;
  background-color: var(--parchment);
  color: var(--ink);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Dark sections set --focus to a light colour */
:focus-visible {
  outline: 2px solid var(--focus, var(--ink));
  outline-offset: 3px;
}

.nowrap {
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .625rem 1.125rem;
  border-radius: 999px;
  background: var(--pitch);
  color: #fff;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: none;
}

/* Page column and the gold surround
   ========================================================================== */

.page {
  position: relative;
  max-width: var(--page-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  overflow-x: clip;
  background-color: var(--parchment);
  /* Faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .23 0 0 0 0 .14 0 0 0 .42 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Gold leaf in the margins, drawn in SVG so it stays sharp on any screen.
   Each margin gets its own layer sized to what is visible: browsers
   rasterise an SVG background at its full drawn size, so drawing it behind
   the column would be wasted work. The right margin is the same leaf turned
   180deg, putting its rules on the outer edge. Loaded only when seen. */
@media (min-width: 1100px) {
  :root {
    /* Resolved where used: against the body for the column, against the
       viewport for the fixed margins, which come to the same width */
    --col-w: min(var(--page-max), 100% - 2 * var(--frame));
  }

  body {
    background-color: var(--gold-leaf);
  }

  .page {
    max-width: var(--col-w);
    box-shadow:
      0 0 0 1px rgb(58 43 18 / .22),
      0 0 3.5rem rgb(30 20 6 / .38);
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--gold-leaf) 0 0 / 100% 100% no-repeat;
  }

  /* main.js adds .gold-leaf once the page has loaded: the texture's filters
     take a moment to draw on big screens, so they wait until the page is up. */
  .gold-leaf body::before,
  .gold-leaf body::after {
    background-image: url("../assets/gold-leaf.svg");
  }

  /* 1px of overlap under the column hides subpixel seams */
  body::before {
    left: 0;
    right: calc(50% + var(--col-w) / 2 - 1px);
  }

  body::after {
    left: calc(50% + var(--col-w) / 2 - 1px);
    right: 0;
    transform: rotate(180deg);
  }
}

/* A glint of lamplight on the leaf follows the mouse (main.js). It sits
   under the column, so it shows only in the margins, and fades out when
   the mouse leaves the window. */
.gilt-glint {
  display: none;
}

@media (min-width: 1100px) {
  .gilt-glint {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 36rem;
    height: 36rem;
    margin: -18rem 0 0 -18rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 240 210 / .5), rgb(255 240 210 / .18) 50%, rgb(255 240 210 / 0));
    mix-blend-mode: overlay;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }

  .gilt-glint.is-lit {
    opacity: 1;
  }
}

/* Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  padding-block: var(--bar-space);
  font-family: var(--menu-font);
}

/* The header row is a grid: the wordmark in a glass pill at the left, the
   menu in another and the CTA at the right. From tablet up the menu pill sits
   in the middle column, centred on the page; on phones the menu shrinks to a
   glass button. The menu's glass is drawn by the row's two pseudo-elements
   (grid items at z-index -1, in the menu's column), which also lets the
   phone menu sheet have glass of its own: backdrop filters don't nest. */
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--bar-h);
  align-items: center;
  margin-inline: var(--gutter);
}

.site-header__inner::before,
.site-header__inner::after {
  content: "";
  grid-row: 1;
  grid-column: 2;
  align-self: stretch;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

/* Both pills take a little more tint once content scrolls underneath, or
   while the menu is open */
.site-header {
  --glass-tint: var(--bar-tint);
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  --glass-tint: calc(var(--bar-tint) + .16);
}

/* Frosted body: blurred backdrop under a milky white tint, a sheen across
   the top, a soft glow inside the rim and a gentle lift */
.brand,
.site-header__inner::before {
  background-color: rgb(255 255 255 / var(--glass-tint));
  background-image: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 65%);
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.15);
  backdrop-filter: blur(var(--bar-blur)) saturate(1.15);
  box-shadow:
    inset 0 0 14px rgb(255 255 255 / .2),
    0 12px 32px -14px rgb(22 17 10 / .35),
    0 1px 3px rgb(22 17 10 / .08);
  transition: background-color .3s ease;
}

/* Rim: a 1px ring that catches the light at top-left and bottom-right */
.brand::after,
.site-header__inner::after {
  padding: 1px;
  background: linear-gradient(115deg,
    rgb(255 255 255 / .85),
    rgb(255 255 255 / .22) 24%,
    rgb(255 255 255 / .05) 50%,
    rgb(255 255 255 / .22) 76%,
    rgb(255 255 255 / .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* The wordmark's pill is as tall as the menu's */
.brand {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  align-self: stretch;
  display: grid;
  align-items: center;
  padding-inline: var(--bar-pad);
  border-radius: 999px;
  color: var(--glass-ink);
  font-family: var(--wordmark-font);
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  line-height: 1;
  letter-spacing: var(--wordmark-tracking);
  text-decoration: none;
  text-transform: var(--wordmark-case);
}

.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Trimmed to the capitals (cap height down to the baseline), so centring it
   leaves equal space above the letters and below the baseline, whatever
   the typeface. The lowercase l rises a little above the capitals (.70em
   against .66em in DM Serif Display), so the word drops by half the
   difference to centre the letters it actually shows. */
.brand__name {
  position: relative;
  top: .02em;
  text-box: trim-both cap alphabetic;
}

.site-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  border-radius: .25rem;
  color: var(--glass-ink);
  font-weight: var(--menu-weight);
  line-height: 1.2;
  letter-spacing: var(--menu-tracking);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
  white-space: nowrap;
  transition: text-decoration-color .2s ease;
}

.site-nav a:hover {
  text-decoration-color: currentColor;
}

.btn-voyage {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  height: 2.75rem;
  padding: 0 .375rem 0 var(--button-pad);
  border-radius: 999px;
  background-color: var(--pitch);
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / .55);
  color: #fff;
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease;
}

.btn-voyage:hover {
  background-color: #34302a;
}

/* Radii are concentric: the circle sits the same distance from every edge */
.btn-voyage__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #fff;
  color: var(--pitch);
}

/* Its arrow sails through on hover, like the section buttons' */
.btn-voyage__icon svg {
  width: .875rem;
  height: .875rem;
}

.menu-toggle {
  position: relative;
  grid-area: 1 / 2;
  width: var(--bar-h);
  height: var(--bar-h);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--glass-ink);
  cursor: pointer;
}

.menu-toggle__bar {
  position: absolute;
  top: 50%;
  left: calc(50% - .625rem);
  right: calc(50% - .625rem);
  height: 1.5px;
  margin-top: -.75px;
  border-radius: 1px;
  background-color: currentColor;
  transform: translateY(-4px) rotate(0);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.menu-toggle__bar + .menu-toggle__bar {
  transform: translateY(4px) rotate(0);
}

.is-menu-open .menu-toggle__bar {
  transform: translateY(0) rotate(45deg);
}

.is-menu-open .menu-toggle__bar + .menu-toggle__bar {
  transform: translateY(0) rotate(-45deg);
}

/* Phones: links and CTA drop down in a glass sheet */
@media (max-width: 767.98px) {
  .site-menu {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: .5rem 1.25rem 1.25rem;
    border-radius: 1.75rem;
    background-color: rgb(250 247 242 / .8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / .55),
      inset 0 1px 0 rgb(255 255 255 / .85),
      0 24px 48px -20px rgb(22 17 10 / .45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem) scale(.98);
    transform-origin: top center;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }

  .is-menu-open .site-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .site-nav__list {
    flex-direction: column;
  }

  .site-nav a {
    padding-block: .875rem;
    border-bottom: 1px solid rgb(28 23 18 / .1);
    font-size: 1.125rem;
  }

  .btn-voyage {
    align-self: flex-start;
  }
}

/* Tablet up: equal side columns keep the menu pill in the middle of the page */
@media (min-width: 768px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-toggle {
    display: none;
  }

  /* The wrapper steps aside so the links and CTA become grid items */
  .site-menu {
    display: contents;
  }

  .site-nav {
    grid-area: 1 / 2;
    padding-inline: var(--bar-pad);
  }

  .site-nav__list {
    gap: var(--menu-gap);
  }

  .site-nav a {
    padding-block: .5rem;
    font-size: var(--menu-size);
  }

  /* Same height as the glass bar, so the two line up top and bottom */
  .btn-voyage {
    grid-area: 1 / 3;
    justify-self: end;
    height: var(--bar-h);
  }

  .btn-voyage__icon {
    width: calc(var(--bar-h) - .75rem);
    height: calc(var(--bar-h) - .75rem);
  }
}

@media (min-width: 1024px) {
  /* Desktop: the header floats over the top of the hero */
  .site-header {
    margin-bottom: calc(var(--header-h) * -1);
  }
}

/* Solid fallbacks where the glass can't or shouldn't be see-through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .brand,
  .site-header__inner::before,
  .site-menu {
    background-color: rgb(248 244 237 / .94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .brand,
  .site-header__inner::before,
  .site-menu {
    background-color: rgb(248 244 237 / .97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Hero
   ========================================================================== */

/* The "voyage" lettering is part of the footage, so the frame is never
   cropped: the hero keeps its video's ratio, 16:9 here and 3:4 on phones,
   which get a portrait cut. The poster is the hero's background rather
   than the video's poster attribute, so each layout loads only its own. */
.hero {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #c9b28a url("../assets/hero-poster.webp") center / cover no-repeat;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(.75rem, 2.2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .4);
  border-radius: 50%;
  background-color: rgb(22 18 14 / .32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s ease, background-color .2s ease;
}

.hero__toggle:hover,
.hero__toggle:focus-visible {
  background-color: rgb(22 18 14 / .52);
  opacity: 1;
}

.hero__toggle:focus-visible {
  outline-color: #fff;
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle svg {
  width: 1rem;
  height: 1rem;
}

.hero__toggle-play,
.hero__toggle[data-state="paused"] .hero__toggle-pause {
  display: none;
}

.hero__toggle[data-state="paused"] .hero__toggle-play {
  display: block;
}

@media (max-width: 767.98px) {
  .hero {
    aspect-ratio: 3 / 4;
    background-image: url("../assets/hero-mobile-poster.webp");
  }

  .hero__toggle {
    right: .75rem;
    bottom: .75rem;
    width: 2rem;
    height: 2rem;
  }

  .hero__toggle svg {
    width: .8125rem;
    height: .8125rem;
  }
}

/* Section pieces: eyebrow, title, lede, body copy and buttons
   ========================================================================== */

.eyebrow {
  margin: 0 0 .875rem;
  color: var(--gilt-text);
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: 1.2;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.section-title {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-leading);
  letter-spacing: var(--title-tracking);
  text-wrap: balance;
}

.lede {
  max-width: var(--measure);
  margin: 1.125rem 0 0;
  color: var(--ink-soft);
  font-size: var(--lede-size);
  line-height: 1.5;
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
  font-size: var(--body-size);
  line-height: 1.6;
  text-wrap: pretty;
}

.prose p {
  margin: 0;
}

.prose p + p {
  margin-top: 1em;
}

/* Section buttons look like the header's "Get in touch" and share its type
   tokens: a dark pill with the arrow in a white disc, and a light pill for
   the quieter choice. .btn-voyage itself stays in the header, where the
   preferences panel reads it. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  height: var(--btn-h);
  padding: 0 var(--button-pad);
  border-radius: 999px;
  font-family: var(--menu-font);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, box-shadow .25s ease;
}

.btn--icon {
  padding-right: .375rem;
}

.btn--dark {
  background-color: var(--pitch);
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / .55);
  color: #fff;
}

.btn--dark:hover {
  background-color: #34302a;
}

.btn--light {
  background-color: rgb(255 255 255 / .55);
  box-shadow:
    inset 0 0 0 1px rgb(28 23 18 / .14),
    0 8px 20px -14px rgb(22 17 10 / .35);
  color: var(--ink);
}

.btn--light:hover {
  background-color: rgb(255 255 255 / .9);
}

/* Radii are concentric, as in the header's button */
.btn__icon {
  display: grid;
  place-items: center;
  width: calc(var(--btn-h) - .75rem);
  height: calc(var(--btn-h) - .75rem);
  border-radius: 50%;
  background-color: #fff;
  color: var(--pitch);
}

.btn--light .btn__icon {
  background-color: var(--pitch);
  color: #fff;
}

.btn__icon svg {
  width: .875rem;
  height: .875rem;
}

/* On hover or focus the arrow sails out of its disc to the right, and a
   second one, drawn by ::before, sails in from the left to take its place.
   The header's button does the same. */
.btn__icon,
.btn-voyage__icon {
  overflow: hidden;
}

:is(.btn__icon, .btn-voyage__icon) > svg,
:is(.btn__icon, .btn-voyage__icon)::before {
  grid-area: 1 / 1;
  transition: translate .5s cubic-bezier(.6, 0, .2, 1);
}

:is(.btn__icon, .btn-voyage__icon)::before {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M9 3.75 13.25 8 9 12.25' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: "";
  width: .875rem;
  height: .875rem;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  translate: -2rem 0;
}

:is(.btn, .btn-voyage):is(:hover, :focus-visible) :is(.btn__icon, .btn-voyage__icon) > svg {
  translate: 2rem 0;
}

:is(.btn, .btn-voyage):is(:hover, :focus-visible) :is(.btn__icon, .btn-voyage__icon)::before {
  translate: none;
}

/* Dark sections: light type, brass eyebrows and light focus rings */
.on-dark {
  --focus: var(--parchment);
  --ink-soft: rgb(244 236 225 / .8);
  color: var(--parchment);
}

.on-dark .eyebrow {
  color: var(--gilt-light);
}

.on-dark .btn--light {
  background-color: var(--parchment);
  box-shadow: 0 8px 20px -12px rgb(0 0 0 / .6);
}

.on-dark .btn--light:hover {
  background-color: #fff;
}

/* Intro
   ========================================================================== */

.intro {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 3.2vw, 2.875rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

.intro__title {
  position: relative;
  margin: 0 auto;
  font-family: var(--headline-font);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
  text-wrap: balance;
}

@media (max-width: 639.98px) {
  .intro__break { display: none; }
}

.intro__ornament {
  position: relative;
  width: clamp(8.75rem, 11.2vw, 10rem);
  height: auto;
  margin: clamp(.875rem, 1.4vw, 1.25rem) auto 0;
  overflow: visible;
  color: var(--gilt);
}

.intro__ornament-minor { fill: var(--gilt); }
.intro__ornament-light { fill: var(--gilt-light); }
.intro__ornament-dark { fill: var(--gilt-dark); }

/* Positioned, like the title, so they sit above the engravings */
.intro__lede {
  position: relative;
  max-width: 30em;
  margin: clamp(1.125rem, 1.8vw, 1.625rem) auto 0;
}

.intro__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}

/* Engraved chart marks behind the headline */
.intro__rose,
.intro__globe {
  position: absolute;
  top: 50%;
  color: var(--ink);
  pointer-events: none;
}

.intro__rose {
  left: clamp(-2.5rem, 7vw - 4.5rem, 3.5rem);
  width: clamp(8.5rem, 13vw, 12.5rem);
  translate: 0 -50%;
  opacity: .08;
}

.intro__globe {
  right: -7%;
  width: clamp(18rem, 36vw, 32rem);
  translate: 0 -44%;
  opacity: .06;
  stroke-width: .8;
}

@media (max-width: 639.98px) {
  .intro__globe { display: none; }
}

/* The engravings turn as the intro passes, the rose one way and the globe
   a little the other, like instruments on a moving deck. With the intro
   in the middle of the screen they sit as drawn. The timeline belongs to
   the intro, whose overflow would otherwise be their scroller. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .intro {
      view-timeline: --intro block;
    }

    .intro__rose,
    .intro__globe {
      animation: linear both;
      animation-timeline: --intro;
    }

    .intro__rose { animation-name: rose-turn; }
    .intro__globe { animation-name: globe-turn; }
  }
}

@keyframes rose-turn {
  from { rotate: -60deg; }
  to { rotate: 60deg; }
}

@keyframes globe-turn {
  from { rotate: 12deg; }
  to { rotate: -12deg; }
}

/* Placard: a museum wall label for a painting, a line of text and a small
   meta line after a brass rule. Always visible, never only on hover.
   ========================================================================== */

.placard {
  margin: 0;
  padding-left: .75rem;
  border-left: 1px solid var(--gilt);
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.placard__title {
  display: block;
}

.placard__meta {
  display: block;
  margin-top: .3rem;
  color: var(--gilt-text);
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.on-dark .placard__meta {
  color: var(--gilt-light);
}

/* Split: a painting flush with one edge of the column, text beside it.
   The painting always keeps its whole 3:2 frame, with its placard under it
   like a museum label; the section's copy runs longer than the painting is
   tall, so the two are centred on each other rather than the painting being
   cropped to fit. Side by side from 1280px; below that the painting spans
   the column and the text follows, in two columns from 768px.
   ========================================================================== */

.split {
  position: relative;
  display: grid;
}

.split__media {
  margin: 0;
}

.split__frame {
  position: relative;
}

.split__frame > img:last-child {
  width: 100%;
  height: auto;
}

.split__media .placard {
  max-width: 24rem;
  margin: .875rem var(--gutter) 0;
}

.split__body {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) var(--section-pad);
}

.split__text {
  margin-top: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .split__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  .split__text {
    margin-top: .25rem;
  }
}

@media (min-width: 1280px) {
  /* The section above already ends in its own padding */
  .split {
    grid-template-columns: 52% minmax(0, 1fr);
    align-items: center;
    padding-bottom: clamp(3rem, 5vw, 5.5rem);
  }

  .split--reverse {
    grid-template-columns: minmax(0, 1fr) 52%;
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split--reverse .split__media .placard {
    margin-left: auto;
  }

  .split__body {
    padding: 0 var(--gutter) 0 clamp(2.5rem, 4.5vw, 5rem);
  }

  .split--reverse .split__body {
    padding-inline: var(--gutter) clamp(2.5rem, 4.5vw, 5rem);
  }
}

/* The Voyage: Burak's story, beside the penguin painting. Elcano's voyage
   began with Magellan's expedition, and Burak's at Macellan.
   ========================================================================== */

/* The intro above ends in its own padding, so the menu's link stops a
   little short of the section */
.voyage {
  scroll-margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

/* The brass armillary hangs from the painting's corner, as in the design.
   main.js swings it from the top of its ring. */
.voyage__armillary {
  position: absolute;
  z-index: 1;
  top: 0;
  left: clamp(.75rem, 2.5vw, 2.5rem);
  display: none;
  width: 60px;
  height: auto;
  translate: 0 -55%;
  transform-origin: 50% 4.5%;
  filter: drop-shadow(0 8px 10px rgb(22 17 10 / .28));
  pointer-events: none;
}

@media (min-width: 768px) {
  .voyage__armillary {
    display: block;
  }
}

@media (min-width: 1024px) {
  .voyage__armillary {
    width: 80px;
  }
}

.voyage__byline {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.4;
}

.voyage__name {
  color: var(--ink);
  font-weight: 500;
}

.voyage__prose {
  margin-top: 1.5rem;
}

.voyage__lead {
  font-size: var(--lede-size);
  line-height: 1.45;
  text-wrap: balance;
}

/* Short facts, each after a small brass diamond like the ornament's points */
.voyage__facts {
  display: grid;
  gap: .625rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}

.voyage__facts li {
  position: relative;
  padding-left: 1.375rem;
  color: var(--ink-soft);
}

.voyage__facts li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: .2rem;
  width: .375rem;
  height: .375rem;
  background-color: var(--gilt);
  rotate: 45deg;
}

/* What matters in the age of AI: a small heading over the six skills */
.skills__title {
  margin: 2.25rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(28 23 18 / .12);
  color: var(--gilt-text);
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: 1.2;
  text-transform: uppercase;
}

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 1.5rem 2rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.skill {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: .875rem;
  align-content: start;
}

.skill__icon {
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .05rem;
  fill: none;
  stroke: var(--gilt-dark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skill__name {
  margin: 0;
  font-family: var(--title-font);
  font-size: 1.1875rem;
  font-weight: var(--title-weight);
  line-height: 1.3;
}

.skill p {
  grid-column: 2;
  margin: .25rem 0 0;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Figures: Burak's record at a glance, in a band under About
   ========================================================================== */

.figures {
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  border-block: 1px solid rgb(28 23 18 / .1);
  background-color: rgb(122 92 46 / .06);
}

.figures__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1324px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem .75rem;
  text-align: center;
}

/* Rules between the figures: a cross on phones, a row of dividers above */
.figure:nth-child(even) {
  border-left: 1px solid rgb(28 23 18 / .12);
}

.figure:nth-child(n + 3) {
  border-top: 1px solid rgb(28 23 18 / .12);
}

/* One box height for every value, so the labels line up */
.figure__value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  font-family: var(--title-font);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  font-variant-numeric: lining-nums;
  font-weight: var(--title-weight);
  line-height: 1;
  letter-spacing: -.01em;
}

/* The fonts have no ∞, so it's drawn: as tall as the numerals, with a
   stroke as fine as Crimson Pro's */
.figure__infinity {
  width: 1.35em;
  height: .675em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.figure__label {
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .figures__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .figure:nth-child(n + 3) {
    border-top: 0;
  }

  .figure + .figure {
    border-left: 1px solid rgb(28 23 18 / .12);
  }
}

/* CTO as a Service: four service cards on the parchment painting
   ========================================================================== */

.services {
  position: relative;
  isolation: isolate;
  padding: var(--section-pad) var(--gutter);
}

/* The parchment's engravings run down its sides; it fades out at the top
   and bottom to meet the plain parchment around it. On phones it keeps its
   natural width at the top, because covering a tall stack of cards would
   enlarge it until the engravings disappear. */
.services::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../assets/expedition/web/10-parchment-chart-background-1024.webp") top center / 100% auto no-repeat;
  /* The longer fade at the top keeps the engraving behind the eyebrow faint */
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 88%, transparent);
  pointer-events: none;
}

@media (min-width: 768px) {
  .services::before {
    background-image: url("../assets/expedition/web/10-parchment-chart-background-1536.webp");
    background-position: center;
    background-size: cover;
  }
}

.services__head,
.cards {
  max-width: 1324px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .services__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(2rem, 5vw, 6rem);
  }

  .services__head .lede {
    justify-self: end;
    margin: 0;
  }
}

.cards {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phones: one row to swipe through, the next card peeking in */
@media (max-width: 639.98px) {
  .cards {
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar {
    display: none;
  }

  .card {
    scroll-snap-align: start;
  }
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #faf6ef;
  box-shadow:
    inset 0 0 0 1px rgb(28 23 18 / .08),
    0 14px 30px -22px rgb(22 17 10 / .55);
}

.card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.125rem 1.125rem 1.25rem;
}

.card__title {
  margin: 0;
  font-family: var(--title-font);
  font-size: 1.5rem;
  font-weight: var(--title-weight);
  line-height: 1.2;
  text-wrap: balance;
}

.card__text {
  margin: .5rem 0 0;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* With a mouse, a card tilts in 3D towards the pointer, lifts a little and
   catches the light where it points. main.js sets the transform, --lift
   (0 flat, 1 lifted) and the light's position, and clears them once the
   card is flat again. Not on the phones' swiping row. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card {
    position: relative;
    box-shadow:
      inset 0 0 0 1px rgb(28 23 18 / .08),
      0 calc(14px + 8px * var(--lift, 0)) calc(30px + 10px * var(--lift, 0)) -22px rgb(22 17 10 / calc(.55 + .05 * var(--lift, 0)));
  }

  /* The light: a faint disc centred on the pointer, clipped by the card */
  .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 160%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgb(255 250 240 / .16), rgb(255 250 240 / 0));
    opacity: var(--lift, 0);
    translate: calc(var(--light-x, 0px) - 50%) calc(var(--light-y, 0px) - 50%);
    pointer-events: none;
  }
}

/* Banner: a painting across the full column with copy over its quiet side.
   The copy only fits there without covering the painting's subject on wide
   screens, so the overlay starts at 1280px; below that the painting comes
   first and the copy follows on a panel of the painting's own colour.
   ========================================================================== */

.banner {
  position: relative;
  isolation: isolate;
}

.banner__media {
  position: relative;
  margin: 0;
}

.banner__img {
  width: 100%;
  height: auto;
}

.banner__body {
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
  background-color: var(--banner-panel, var(--parchment));
}

.banner__text {
  max-width: var(--measure);
  margin: 1.125rem 0 1.75rem;
  color: var(--ink-soft);
  font-size: var(--body-size);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The painting's ratio sets the height through an empty spacer: on the
   banner itself, the minimum height would carry across the ratio and widen
   it past the column. The copy shares the spacer's grid cell. */
@media (min-width: 1280px) {
  /* A fixed column: sized by its content, the spacer would widen it too */
  .banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: var(--banner-min, 34rem);
  }

  .banner::before {
    content: "";
    grid-area: 1 / 1;
    aspect-ratio: var(--banner-ratio);
  }

  .banner__media {
    position: absolute;
    inset: 0;
  }

  .banner__img {
    height: 100%;
    object-fit: cover;
    object-position: var(--focus-art, 50% 50%);
  }

  .banner__body {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    align-self: center;
    width: 34%;
    padding: 3rem 1rem 3rem var(--gutter);
    background: none;
  }
}

/* A placard mounted on the painting's corner, on frosted glass */
.placard--on-art {
  position: absolute;
  right: clamp(.625rem, 1.5vw, 1.25rem);
  bottom: clamp(.625rem, 1.5vw, 1.25rem);
  max-width: min(17rem, 70%);
  padding: .5rem .75rem .5625rem;
  border: 0;
  border-radius: .625rem;
  background-color: rgb(244 236 225 / .86);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 10px 26px -14px rgb(0 0 0 / .6);
  color: rgb(28 23 18 / .86);
  font-size: .875rem;
}

.on-dark .placard--on-art {
  background-color: rgb(12 15 19 / .55);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .12),
    0 10px 26px -14px rgb(0 0 0 / .6);
  color: rgb(244 236 225 / .88);
}

@media (prefers-reduced-transparency: reduce) {
  .placard--on-art {
    background-color: rgb(244 236 225 / .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .on-dark .placard--on-art {
    background-color: rgb(12 15 19 / .92);
  }
}

/* Why Elcano: the night banner
   ========================================================================== */

.banner--night {
  --banner-ratio: 1983 / 793;
  --banner-panel: #1e262e;    /* the painting's night sea */
  --focus-art: 65% 50%;       /* Elcano and his tablet */
  background-color: #1e262e;
}

/* Then and now: a brass label, then one line each */
.timeline {
  display: grid;
  gap: .875rem;
  max-width: var(--measure);
  margin: 1.25rem 0 1.75rem;
}

.timeline__row {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
}

.timeline dt {
  color: var(--gilt-light);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: lining-nums;
  text-transform: uppercase;
}

.timeline dd {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The far shore's lit windows sit behind the copy. A night-blue scrim over
   the copy's third keeps every pixel behind the text at 4.5:1 or better,
   and fades out before Elcano. */
@media (min-width: 1280px) {
  .banner--night .banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(20 25 31 / .6) 34%, rgb(20 25 31 / 0) 50%);
    pointer-events: none;
  }

  .banner--night .placard--on-art {
    z-index: 1;
  }
}

/* Approach: principles beside the robot-and-parrot painting, then the stack
   ========================================================================== */

.approach {
  position: relative;
  isolation: isolate;
}

/* The parchment painting's compass and coastline, faint behind the text.
   It fades out to the left and at the bottom, where the contact section's
   plain parchment follows on narrower screens. */
.approach::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../assets/expedition/web/10-parchment-chart-background-1536.webp") right bottom / auto 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 40%, #000 75%),
    linear-gradient(#000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 40%, #000 75%),
    linear-gradient(#000 80%, transparent);
  mask-composite: intersect;
  opacity: .75;
  pointer-events: none;
}

@media (min-width: 1280px) {
  .approach .split {
    padding-block: var(--section-pad);
  }
}

.approach__lede {
  margin-top: 0;
}

.principles {
  display: grid;
  gap: .875rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.principle {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: var(--body-size);
  line-height: 1.3;
}

.principle__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--gilt-dark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contact: the harbour at sunset, and the way to get in touch
   ========================================================================== */

.banner--harbor {
  --banner-ratio: 2172 / 724;
  --banner-min: 26rem;
  --banner-panel: transparent;   /* stacked, the copy sits on the page's own grain */
  --focus-art: 53% 55%;          /* the main carrack */
}

.banner--harbor .banner__text {
  color: var(--ink);
}

/* Stacked, the copy sits on the parchment above the harbour */
@media (max-width: 1279.98px) {
  .banner--harbor .banner__body {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* The sky behind the copy darkens towards the mountains and cloud shadows,
   so a wash of parchment keeps every pixel behind the text at 4.5:1 or
   better; it has faded out before the main ship */
@media (min-width: 1280px) {
  .banner--harbor .banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(244 236 225 / .8) 34%, rgb(244 236 225 / 0) 50%);
    pointer-events: none;
  }

  .banner--harbor .placard--on-art {
    z-index: 1;
  }
}

/* The brass compass sits on the seam above, half over the section before */
.contact__medallion {
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(1rem, 4vw, 3.5rem);
  width: 64px;
  height: auto;
  translate: 0 -50%;
  filter: drop-shadow(0 8px 12px rgb(22 17 10 / .3));
  pointer-events: none;
}

@media (min-width: 768px) {
  .contact__medallion {
    width: 100px;
  }
}

/* As it comes up the screen the compass turns and settles on north, by
   the time it reaches the middle */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .contact__medallion {
      animation: medallion-settle ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

@keyframes medallion-settle {
  from { rotate: -45deg; }
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}

.contact__link {
  font-family: var(--menu-font);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(28 23 18 / .35);
  text-underline-offset: .3em;
  transition: text-decoration-color .2s ease;
}

.contact__link:hover {
  text-decoration-color: currentColor;
}

/* Footer
   ========================================================================== */

.site-footer {
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  background-color: var(--pitch);
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.5;
}

.site-footer__inner {
  display: grid;
  gap: 1.5rem 3rem;
  max-width: 1324px;
  margin: 0 auto;
}

.site-footer__brand {
  font-family: var(--wordmark-font);
  font-size: 1.75rem;
  letter-spacing: var(--wordmark-tracking);
  line-height: 1;
  text-decoration: none;
  text-transform: var(--wordmark-case);
}

.site-footer__tagline {
  margin: .5rem 0 0;
  color: var(--ink-soft);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(244 236 225 / .35);
  text-underline-offset: .3em;
}

.site-footer__links a:hover {
  text-decoration-color: currentColor;
}

.site-footer__motto {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-soft);
}

.site-footer__motto i {
  color: var(--gilt-light);
  font-style: normal;
}

.site-footer__legal {
  margin: 0;
  color: rgb(244 236 225 / .6);
  font-size: .875rem;
}

/* The base line: the copyright, then the company and legal pages */
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(244 236 225 / .14);
}

.site-footer__pages ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__pages a {
  color: rgb(244 236 225 / .72);
  font-size: .875rem;
  text-decoration: none;
  transition: color .2s ease;
}

.site-footer__pages a[href]:hover {
  color: var(--parchment);
}

/* Until its page exists, a placeholder link doesn't look clickable */
.site-footer__pages a:not([href]) {
  cursor: default;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .site-footer__links {
    justify-content: flex-end;
  }

  .site-footer__base {
    grid-column: 1 / -1;
  }
}

/* Reveals: main.js marks content below the fold, then lets it in as it
   scrolls into view. Only opacity, translate and strokes move, so the
   layout never shifts.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition:
      opacity .7s ease,
      translate .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.is-pending {
    opacity: 0;
    translate: 0 12px;
  }

  /* Line icons and the ∞ are drawn in, as if engraved: each stroke runs
     from its start. main.js measures every stroke as 1; hidden, the dash
     stops just short of the stroke, so round caps leave no dot. */
  .reveal :is(.skill__icon, .principle__icon, .figure__infinity) :is(path, circle) {
    stroke-dasharray: 1 2;
    transition: stroke-dashoffset 1.2s cubic-bezier(.45, .05, .25, 1);
    transition-delay: calc(var(--reveal-delay, 0s) + .2s);
  }

  .reveal.is-pending :is(.skill__icon, .principle__icon, .figure__infinity) :is(path, circle) {
    stroke-dashoffset: 1.01;
  }

  /* The ∞ takes its time, and its round caps close the loop without a seam */
  .reveal .figure__infinity path {
    stroke-linecap: round;
    transition-duration: 1.8s;
  }
}

/* Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}