:root {
  --paper:      #f4f0ea;   /* warm off-white the globe sits on */
  --paper-lift: #f7f4ee;
  --paper-edge: #ece8e0;

  --ink:        #4b4644;   /* headings, nav */
  --ink-quiet:  #b1a9a0;   /* the standfirst under the globe */
  --chip:       #333;      /* marker and crosshair chips */
  --cta:        #2e332e;
  --rule:       rgba(63, 63, 63, 0.18);   /* the masthead hairline */
  --guide:      rgba(63, 63, 63, 0.28);   /* the crosshair, a shade stronger */
  --current:    #b2c6d5;   /* the bar under the active nav item */

  --gutter:     20px;
  --masthead:   50px;
  --backdrop-z: 0;

  /* The page below the globe. These are deliberately *not* themed: the three
     globe themes repaint the stage, not the company's own pages, so the
     sections keep one palette whichever look the globe is wearing. */
  --sheet:      #f4f0ea;   /* the cream ground the content sections sit on */
  --sheet-rule: rgba(43, 39, 36, 0.14);
  --ink-deep:   #2b2724;   /* section headings */
  --ink-soft:   #8d8880;   /* standfirsts and closed accordion rows */
  --ink-body:   #5d5853;
  --slate:      #3c4d5c;   /* the pill buttons */
  --steel-1:    #9fb1c0;   /* the About panel, top */
  --steel-2:    #7f97ad;   /* the About panel, bottom */

  /* Sized off Switzer's cap height (0.68em) so the display type lands at the
     same optical size as the reference regardless of the fallback in use. */
  --h1:         clamp(32px, 4.308vw, 74px);
  --standfirst: clamp(19px, 2.204vw, 38px);

  --font: Switzer, -apple-system, BlinkMacSystemFont, "Avenir Next",
          "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The sky the whole sequence plays against, globe through to open water. It is
   fixed, so it holds still while the scroll runs the morph over it.
   The galaxy image only shows on the fire theme (has-sky); on the paper
   theme the backdrop is the plain page colour. */
.backdrop {
  background-color: var(--paper);
  transition: background-color 400ms ease;
}

body.has-sky .backdrop {
  background: url("../assets/Background image- dark galaxy.png") center / cover no-repeat;
  background-color: #05050f;
}

/* The globe and the hero are fixed, so they contribute no height of their own.
   This is what the globe's stretch of scroll runs down: the length of the
   morph (the first 66% of it), plus a hold at the end so the water has
   somewhere to sit and be looked at before the page slides up over it. */
.scroll-track {
  height: 240vh;
  pointer-events: none;
}

h1, p { margin: 0; }

.backdrop {
  position: fixed;
  z-index: var(--backdrop-z);
  inset: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------- masthead
   A fixed 50px band with a hairline under it. The globe runs full-bleed
   beneath, so the rule reads as the top edge of the crosshair grid rather
   than as a bar the page hangs off. */

.masthead {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: var(--masthead);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;   /* an SVG's baseline is its bottom edge, so the
                              stylised A sits on the type's baseline */
  flex: none;
  font-size: clamp(19px, 1.712vw, 27px);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.wordmark__a {
  width: 0.641em;
  height: 0.68em;
  margin-right: 0.035em;
  fill: currentColor;
}

/* Both navs sit in the same flex row: the primary one takes the slack and
   centres itself in what is left between the wordmark and the secondary nav,
   which is where the reference lands it — not on the page centre. */
.masthead__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.masthead__nav--end {
  flex: none;
  justify-content: flex-end;
}

.navlink {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--masthead);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

.navlink:hover { opacity: 0.62; }

/* The bar straddles the masthead's own hairline rather than sitting above it. */
.navlink.is-current::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -2px;
  height: 4px;
  border-radius: 2px;
  background: var(--current);
}

/* ------------------------------------------------------------------ stage */

.glob {
  position: fixed;
  inset: 0;
}

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

/* The atmosphere. It reaches about a tenth of a radius past the limb and falls
   off into the sky, which is the gradient between the hot body and the cold
   ground behind it. Drawn under the canvas, so the body covers its middle;
   sized from the globe's on-screen radius, which the scroll changes. */
.glob__halo {
  display: none;
  pointer-events: none;
}

body.has-halo:not(.theme-paper) .glob__halo {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--halo-size, 0px);
  height: var(--halo-size, 0px);
  transform: translate(-50%, -50%);
  opacity: var(--halo-fade, 0);
  background: radial-gradient(circle closest-side,
    rgba(53, 35, 109, 0) 0%,
    rgba(53, 35, 109, 0) 68%,
    rgba(63, 41, 124, 0.85) 74%,
    rgba(40, 30, 100, 0.52) 79%,
    rgba(24, 22, 74, 0.26) 85%,
    rgba(13, 14, 46, 0.08) 93%,
    rgba(9, 10, 28, 0) 100%);
}

.glob__canvas-host {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.glob__canvas-host canvas {
  display: block;
  cursor: grab;
  touch-action: pan-y;
}

.glob__canvas-host canvas.is-grabbing { cursor: grabbing; }

body.is-ready .glob__canvas-host { opacity: 1; }

/* ----------------------------------------------------------- markers layer
   Chips and the crosshair are flat DOM projected from 3D each frame, so they
   keep a constant size and crisp edges. Nothing in here takes the pointer —
   hover is resolved in JS from the cursor's distance to each projected point,
   which leaves the whole viewport draggable. */

.glob__markers {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease 200ms;
}

body.is-ready .glob__markers { opacity: 1; }

body.is-morphing .glob__canvas-host canvas { cursor: default; }

.marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 19.5px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--chip);
  opacity: 0;
  will-change: transform;
}

.marker__icon {
  width: 10px;
  height: 10px;
  display: block;
}

.plus {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}

/* -------------------------------------------------------------- crosshair
   The cursor, drawn. It rides the pointer and locks onto a location when the
   pointer comes within reach of one. */

.crosshair {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}

.crosshair__line {
  position: absolute;
  display: block;
  background: var(--guide);
}

/* Stops at the masthead rule instead of crossing it. */
.crosshair__line--v {
  top: var(--masthead);
  bottom: 0;
  left: 0;
  width: 1px;
}

.crosshair__line--h {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
}

.crosshair__anchor {
  position: absolute;
  top: 0;
  left: 0;
}

.crosshair__center {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 6px;
  border-radius: 4px;
  background: var(--chip);
  z-index: 1;
}

/* The pill runs back under the chip, so the label starts clear of it and the
   rounded ground still reads as one piece. Held darker than the reference's
   20% black, which leaves white type unreadable everywhere the globe is pale
   — which is most of it. */
.crosshair__tag {
  position: absolute;
  top: 0;
  left: -13px;
  padding: 5px 10px 5px 32px;
  border-radius: 6px;
  background: rgba(30, 30, 30, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transform: translateY(-50%) scaleX(0.92);
  transform-origin: 0% 50%;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 260ms ease;
}

.crosshair.is-tagged .crosshair__tag {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
}

.crosshair__tag-label {
  display: block;
  font-size: 12px;
  line-height: 12.67px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

/* ------------------------------------------------------------------- hero
   Sits over the globe and passes the pointer straight through, so the drag
   works everywhere except on the two things you can actually click. */

.glob__content {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: calc(var(--masthead) + 27.5px - var(--h1) * 0.278)
           var(--gutter) 30px;
  opacity: 0;
  transition: opacity 900ms ease 120ms;
}

body.is-ready .hero { opacity: 1; }

.heading-1 {
  font-size: var(--h1);
  line-height: 1.19;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.hero__copy {
  max-width: min(680px, 45.3vw);
  font-size: var(--standfirst);
  line-height: 0.914;
  font-weight: 400;
  color: var(--ink-quiet);
}

.scroll-cta {
  flex: none;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  background: var(--cta);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.scroll-cta:hover { opacity: 0.85; }

.scroll-cta svg {
  width: 12px;
  height: 8.55px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- narrow
   The globe keeps its own scale off the viewport; what has to give is the
   masthead, which drops its primary nav, and the standfirst, which stops
   fighting the button for the same line. */

@media (max-width: 1000px) {
  .masthead__nav { display: none; }
  .masthead__nav--end { display: flex; flex: 1; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero__copy { max-width: none; }
}

.fallback {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

body.is-unsupported .fallback { display: grid; }
body.is-unsupported .glob { display: none; }

@media (prefers-reduced-motion: reduce) {
  .glob__canvas-host, .glob__markers, .hero { transition: none; }
  .crosshair, .crosshair__tag { transition-duration: 1ms; }
}

/* --------------------------------------------------------- theme toggle
   A pair of capsule buttons docked bottom-right, one per look. The active
   one gets a filled dot; the inactive one stays hollow. */

.theme-switch {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 63;
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(47, 48, 51, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.theme-btn:hover {
  background: rgba(47, 48, 51, 0.07);
}

.theme-btn.is-on {
  background: var(--chip);
  color: #fff;
}

.theme-btn__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background 180ms ease;
}

.theme-btn.is-on .theme-btn__dot {
  background: currentColor;
}

body.is-dark .theme-switch {
  background: rgba(28, 29, 33, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
}

body.is-dark .theme-btn {
  color: #e8e5df;
}

body.is-dark .theme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.is-dark .theme-btn.is-on {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

.theme-btn.is-on[data-theme="rings"] .theme-btn__dot {
  background: #f2c3cf;
  border-color: #f2c3cf;
  box-shadow: 0 0 8px rgba(242, 195, 207, 0.85);
}

/* The bloom. The disk is drawn as points, so the light it throws off has to
   come from somewhere else: this is the wash of it, sitting under the canvas
   so the shadow paints over its middle and the glow only shows where the
   ring already is. Sized off the globe's on-screen radius, which is the full
   body — the shadow is a fraction of that, so the stops sit early. */
body.has-halo.theme-rings .glob__halo {
  background: radial-gradient(circle closest-side,
    rgba(226, 152, 178, 0.115) 0%,
    rgba(226, 152, 178, 0.115) 46%,
    rgba(206, 124, 162, 0.080) 57%,
    rgba(168, 88, 134, 0.038) 69%,
    rgba(112, 52, 92, 0.014) 81%,
    rgba(10, 6, 20, 0) 96%);
}

body.theme-rings #markers {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* ------------------------------------------------------------------ panel
   Tuning controls, off by default — see the README for how to switch them
   back on. Docked right, out of the way of the globe, and slides off-screen
   when collapsed. */


#panel-toggle {
  position: fixed;
  top: 62px;
  right: 20px;
  z-index: 63;
  padding: 7px 13px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(47, 48, 51, 0.14);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  opacity: 0.2;
  transition: opacity 200ms ease;
}

#panel-toggle:hover {
  background: #fff;
  opacity: 1;
}

#panel {
  position: fixed;
  top: 104px;
  right: 20px;
  bottom: 20px;
  z-index: 62;
  width: 234px;
  padding: 4px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(47, 48, 51, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transform: translateX(calc(100% + 26px));
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}

body.panel-open #panel {
  transform: none;
  opacity: 1;
}

.panel__group {
  margin: 13px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a8a49c;
}

.panel__row {
  display: block;
  margin-bottom: 10px;
}

.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 12px;
  color: #45464a;
}

.panel__head output {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #8b8880;
}

.panel__row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(47, 48, 51, 0.16);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.panel__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  background: var(--chip);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.panel__row input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--chip);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.panel__row input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 48, 51, 0.14);
}

.panel__reset {
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(47, 48, 51, 0.16);
  border-radius: 8px;
  cursor: pointer;
}

.panel__reset:hover { background: rgba(47, 48, 51, 0.05); }

@media (max-width: 720px) {
  #panel, #panel-toggle { display: none; }
}

/* A colour row puts its swatch inline with the label rather than under it. */
.panel__row--color .panel__head {
  align-items: center;
  margin-bottom: 0;
  gap: 8px;
}

.panel__row--color .panel__head > span:first-child { flex: 1; }

.panel__swatch {
  width: 40px;
  height: 21px;
  padding: 0;
  background: none;
  border: 1px solid rgba(47, 48, 51, 0.22);
  border-radius: 6px;
  cursor: pointer;
}

.panel__swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.panel__swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.panel__swatch::-moz-color-swatch { border: none; border-radius: 4px; }

/* Chrome flips when the page colour goes dark, so the type and panel don't
   end up near-black on near-black. */
body.is-dark {
  --ink: #f1eee8;
  --ink-quiet: #9aa2b3;   /* cooled off, to sit with the nebula */
  --rule: rgba(255, 255, 255, 0.17);
  --guide: rgba(255, 255, 255, 0.30);
  --chip: #22232a;        /* the reference keeps dark chips on the hot body */
  --cta: #f2f0ea;
}
body.is-dark .plus { stroke: #fff; }
body.is-dark .scroll-cta { color: #24252a; }
body.is-dark .crosshair__tag-label { color: #fff; }
/* The chips go light against the sky, so the tag has to follow them rather
   than stay a dark pane — dark type on 16% white is unreadable out here. */
body.is-dark .crosshair__tag { background: rgba(20, 21, 27, 0.78); }
body.is-dark #panel,
body.is-dark #panel-toggle {
  background: rgba(28, 29, 33, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e8e5df;
}
body.is-dark .panel__head { color: #d6d3cd; }
body.is-dark .panel__row input[type="range"] { background: rgba(255, 255, 255, 0.20); }
body.is-dark .panel__reset { border-color: rgba(255, 255, 255, 0.20); }
body.is-dark .panel__reset:hover { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   THE PAGE

   Everything below the globe. The stage is fixed, so these sections scroll
   over the top of it — which is why every one of them paints an opaque ground
   of its own, and why the whole block sits above the hero's z-index but below
   the masthead's.
   ========================================================================== */

.page {
  position: relative;
  z-index: 55;
}

/* Shared furniture ------------------------------------------------------- */

.section-title {
  margin: 0;
  font-size: clamp(38px, 5.4vw, 94px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.032em;
  color: var(--ink-deep);
}

/* The one button shape the page uses, on cream and on the dark half alike. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 9px 14px;
  border-radius: 4px;
  background: var(--slate);
  color: #f4f0ea;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 220ms ease, transform 220ms ease;
}

.pill:hover {
  background: #4a5e70;
  transform: translateY(-1px);
}

.pill svg {
  width: 16px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ about
   Copy on a steel panel, photograph alongside it. The hairline between them
   is the same one the masthead uses, carried down the page. */

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(84vh, 780px);
  background: linear-gradient(168deg, var(--steel-1) 0%, #b4c2ce 42%, var(--steel-2) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(26px, 3vw, 44px);
  padding: clamp(44px, 6vw, 96px) clamp(20px, 4vw, 76px);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.intro__copy {
  max-width: 19em;
  font-size: clamp(19px, 1.95vw, 33px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}

.intro__media {
  overflow: hidden;
}

.intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- what we do
   Two columns under the heading: the hardware floating on the left, the
   programmes listed on the right. */

.doing {
  padding: clamp(52px, 7vw, 112px) var(--gutter) clamp(60px, 8vw, 124px);
  background: var(--sheet);
  color: var(--ink-deep);
}

.doing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(44px, 6vw, 104px);
  border-top: 1px solid var(--sheet-rule);
}

.doing__gallery {
  padding: 26px clamp(16px, 3vw, 48px) clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--sheet-rule);
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-deep);
}

.eyebrow__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-deep);
}

/* Absolute placement rather than a grid: the point is that nothing lines up.
   Each element carries its own left/top/width and its own phase, so the field
   drifts instead of pulsing in unison. */
.field {
  position: relative;
  margin-top: clamp(24px, 4vw, 54px);
  aspect-ratio: 1 / 0.94;
}

.field__el {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  animation: bob 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

@keyframes bob {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(7px); }
}

.doing__list {
  padding: 26px 0 0 clamp(16px, 3vw, 48px);
}

.doing__intro {
  max-width: 44em;
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--sheet-rule);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.acc__item {
  border-bottom: 1px solid var(--sheet-rule);
}

.acc__head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: clamp(18px, 2.2vw, 30px) 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: #b3ada4;
  cursor: pointer;
  transition: color 240ms ease;
}

.acc__item.is-open .acc__head,
.acc__head:hover { color: var(--ink-deep); }

.acc__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.acc__item.is-open .acc__num {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--sheet);
}

.acc__title {
  flex: 1;
  font-size: clamp(21px, 2.25vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* A plus that loses its upright when the row opens. */
.acc__sign {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.acc__sign::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
}

.acc__sign::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.acc__item.is-open .acc__sign::after { transform: scaleY(0); }

/* 0fr to 1fr rather than a height in pixels, so the row opens to whatever the
   copy actually needs without measuring it in script. */
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.acc__item.is-open .acc__body { grid-template-rows: 1fr; }

.acc__body > p {
  /* Two things are needed to get a closed row to nothing. A grid item's
     automatic minimum size is its content height, so min-height has to be
     zeroed; and padding survives the 0fr row, so the breathing space under
     the copy belongs to the open state rather than to the paragraph. */
  min-height: 0;
  overflow: hidden;
  max-width: 42em;
  padding-bottom: 0;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.5;
  color: var(--ink-body);
  transition: padding-bottom 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.acc__item.is-open .acc__body > p { padding-bottom: clamp(18px, 2.2vw, 30px); }

/* ---------------------------------------------------------- the dark half
   Destinations and the map share one ground so the gradient can run from the
   page's cream all the way down into deep space without a seam between them. */

.deep {
  background: linear-gradient(180deg,
    #f2efe9 0%, #ddd8d1 10%, #a8a29b 26%,
    #6d6761 46%, #453f3a 70%, #2a2624 100%);
  color: #f2efe9;
}

/* --------------------------------------------------------- destinations */

.dest {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(46px, 6vw, 96px) var(--gutter) 0;
}

.dest__title { color: #55504a; }

.dest__stage {
  position: relative;
  flex: 1;
  min-height: min(52vh, 560px);
  margin: clamp(18px, 3vw, 44px) 0;
}

.dest__img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: min(62%, 660px);
  max-height: 100%;
  opacity: 0;
  transform: scale(0.955);
  transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.dest__img.is-on {
  opacity: 1;
  transform: none;
}

.dest__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding-bottom: clamp(34px, 5vw, 72px);
}

.dest__meta {
  max-width: 52ch;
  transition: opacity 240ms ease;
}

.dest__meta.is-swapping { opacity: 0; }

.dest__name {
  margin: 0 0 10px;
  font-size: clamp(23px, 2.35vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
}

.dest__copy {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

.dest__nav {
  display: flex;
  gap: 10px;
  flex: none;
}

.arrow {
  display: grid;
  place-items: center;
  width: 54px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms ease;
}

.arrow:hover { background: rgba(255, 255, 255, 0.26); }

.arrow svg {
  width: 16px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------- global presence */

.reach {
  padding: 0 var(--gutter) clamp(44px, 6vw, 92px);
}

.reach__top {
  display: flex;
  padding-bottom: clamp(22px, 3vw, 46px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.reach__map {
  position: relative;
  margin: clamp(26px, 4vw, 64px) 0 clamp(16px, 2vw, 34px);
}

.reach__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* No `fill` here: the filled countries carry theirs as a presentation
   attribute pointing at their own pattern, and a CSS declaration would win
   over it and paint the photographs out. */
.reach__map .land {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The countries Auriga actually operates from are filled with a photograph of
   the place, which is the only colour on the map. */
.reach__map .land--on {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.4;
}

.reach__pin {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0;
}

.reach__chip {
  display: grid;
  place-items: center;
  width: 19.5px;
  height: 18px;
  border-radius: 3px;
  background: var(--chip, #333);
  cursor: pointer;
}

body.is-past-globe .reach__chip { background: #2f2b28; }

.reach__chip .plus {
  width: 10px;
  height: 10px;
}

.reach__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 18, 16, 0.86);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reach__pin:hover .reach__label,
.reach__pin:focus-within .reach__label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.reach__title {
  color: #fff;
}

/* -------------------------------------------------------------- the feed */

.feed {
  padding: clamp(52px, 7vw, 112px) var(--gutter) clamp(56px, 7vw, 110px);
  background: var(--sheet);
  color: var(--ink-deep);
}

.feed__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.feed__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 26px);
  max-width: 44em;
}

.feed__intro {
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.5;
  color: var(--ink-body);
}

.feed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 26px);
  margin-top: clamp(28px, 4vw, 58px);
}

.card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  text-decoration: none;
  background: #ddd8d1;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover img { transform: scale(1.04); }

/* The type sits on the photograph, so it brings its own ground rather than
   trusting whatever happens to be under it. */
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
}

.card__title {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2vw, 32px);
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 30px);
  margin: 0;
  font-size: clamp(18px, 1.75vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #fff;
}

/* ------------------------------------------------------------- the foot */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: clamp(26px, 3vw, 42px) var(--gutter);
  background: #201d1b;
  color: #cfc9c1;
}

.wordmark--foot {
  color: #f2efe9;
  font-size: 22px;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 22px;
}

.foot__nav a {
  font-size: 14px;
  color: #cfc9c1;
  text-decoration: none;
  transition: color 180ms ease;
}

.foot__nav a:hover { color: #fff; }

.foot__note {
  font-size: 13px;
  color: #8a837c;
}

/* ------------------------------------------------- the masthead, page-side
   Over the globe the masthead is a hairline on open sky. Over the page it has
   to become a bar, and it has to stop taking its colours from the globe theme
   — a fire-themed masthead is near-white type, which on cream is nothing. */

.masthead,
.theme-switch,
#panel-toggle {
  transition: background-color 260ms ease, border-color 260ms ease,
              opacity 260ms ease;
}

body.is-past-globe .masthead {
  background: var(--sheet);
  border-bottom-color: var(--sheet-rule);
}

body.is-past-globe .masthead .wordmark,
body.is-past-globe .masthead .navlink { color: var(--ink-deep); }

body.is-past-globe .theme-switch,
body.is-past-globe #panel-toggle,
body.is-past-globe #panel {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .intro,
  .doing__grid,
  .feed__head,
  .feed__grid { grid-template-columns: 1fr; }

  .intro__text { border-right: 0; }
  .intro__media { min-height: 54vh; }

  .doing__gallery {
    border-right: 0;
    border-bottom: 1px solid var(--sheet-rule);
    padding-inline: 0;
  }

  .doing__list { padding-left: 0; }

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

  .dest__nav { align-self: flex-end; }

  .dest__img { max-width: 82%; }

  .feed__aside { margin-top: 18px; }

  .foot__nav { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .field__el { animation: none; }
  .card img,
  .dest__img { transition-duration: 1ms; }
}