/* =========================================================
   FARO DESIGN CONCEPTS — the infinite white room
   60% white, 20% black, 10% orange, 10% beige.
   Light type, thin lines, a lot of empty space.
   ========================================================= */
:root {
  --white: #faf9f6;      /* 60: the room, every page background */
  --paper: #ffffff;
  --ink: #151515;        /* 20: type, lines, the founder and the footer */
  --ink-2: #4b4842;
  --ink-3: #66625a;
  --orange: #e0581f;     /* 10: the sun, buttons, the one thing that matters */
  --orange-text: #b8461a;
  --beige: #ece3d3;      /* 10: the clients room, quiet surfaces, shadows */
  --beige-2: #e2d6c1;
  --line: rgba(21, 21, 21, 0.12);

  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(20px, 5vw, 88px);
  --void: clamp(96px, 11vw, 170px);       /* the space between things */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; color-scheme: light; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 300; background: var(--ink); color: var(--white); padding: 10px 14px; }
.skip:focus { left: 10px; }

/* type: light and large, a serif italic in orange for the words that matter */
.mega, .big { font-family: var(--sans); font-weight: 400; letter-spacing: -0.045em; line-height: 0.95; }
.mega { font-size: clamp(3.2rem, 1rem + 8vw, 10rem); }
.big { font-size: clamp(2.4rem, 1rem + 4vw, 5.4rem); }
.mega em, .big em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; color: var(--orange); }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; }
.kicker::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 38ch; font-weight: 300; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: transform .4s var(--ease), background .25s, color .25s; }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }
.btn--big { min-height: 56px; padding: 0 28px; font-size: 16px; }

/* =========================================================
   LOADER — frames inside frames, falling away
   ========================================================= */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--white); display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity 1s var(--ease), visibility 1s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { position: relative; width: 64px; height: 64px; }
.loader__mark i { position: absolute; inset: 0; border: 1px solid var(--ink); animation: recede 2.4s linear infinite; }
.loader__mark i:nth-child(2) { animation-delay: -.8s; }
.loader__mark i:nth-child(3) { animation-delay: -1.6s; }
.loader__mark b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--orange); }
@keyframes recede { from { transform: scale(1); opacity: 1; } to { transform: scale(.1); opacity: 0; } }
.loader__word { font: 400 30px/1 var(--sans); letter-spacing: -0.04em; }
.loader__bar { width: 140px; height: 1px; background: var(--line); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }
.loader__note { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.loader__note b { font-weight: 500; }

/* =========================================================
   THE WORLD
   ========================================================= */
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
/* a white wash on the left keeps words readable over the lines of the room */
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(250,249,246,.9) 0%, rgba(250,249,246,.55) 32%, rgba(250,249,246,0) 58%); }
html.no-webgl #world { background: var(--white); }
/* paper: a fine grain and a soft mottle over everything. Mid-grey, so it shows on white, beige and black alike.
   Still and unblended, so it costs nothing while scrolling. */
.paper {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .36 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 900px 900px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px; padding: 22px var(--gutter); transition: transform .5s var(--ease); }
.nav.is-hidden { transform: translateY(-110%); }
.brand { display: grid; line-height: 1; }
.brand__a { font: 500 22px/1 var(--sans); letter-spacing: -0.04em; }
.brand__b { font: italic 400 14px/1.15 var(--serif); color: var(--orange-text); }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { font-size: 13px; font-weight: 400; color: var(--ink-2); transition: color .2s; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
.nav__toggle { display: none; }

.progress { position: fixed; z-index: 40; right: calc(var(--gutter) / 2); top: 50%; translate: 0 -50%; width: 1px; height: 140px; background: var(--line); transition: opacity .5s; }
.progress i { display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleY(0); transform-origin: top; }
.is-past .progress { opacity: 0; }

/* =========================================================
   THE JOURNEY — words hold still while you walk
   ========================================================= */
main { position: relative; z-index: 2; }
.journey { pointer-events: none; }       /* clicks pass through to the pictures in the room */
.journey a, .journey button { pointer-events: auto; }
.chapter { position: relative; }
.chapter--hero { height: 120vh; }
.chapter--studio { height: 160vh; }
.chapter--process { height: 300vh; }
.chapter--work { height: 420vh; }
.chapter__inner { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 130px var(--gutter) 90px; display: flex; flex-direction: column; }
html.motion .chapter__inner > * { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.3s var(--ease); }
html.motion .chapter.is-on .chapter__inner > * { opacity: 1; transform: none; }
html.motion .chapter.is-on .chapter__inner > *:nth-child(2) { transition-delay: .1s; }
html.motion .chapter.is-on .chapter__inner > *:nth-child(3) { transition-delay: .2s; }

.chapter--hero .chapter__inner { justify-content: flex-end; padding-bottom: clamp(90px, 14vh, 150px); }
.chapter--hero .mega { max-width: 10ch; }
.hero__sub { margin-top: 28px; color: var(--ink-2); font-size: clamp(16px, 1.2vw, 19px); font-weight: 300; }
.scroll-cue { position: absolute; bottom: 34px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(var(--ink), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.chapter--studio .chapter__inner { justify-content: center; }
.panel-text { max-width: 620px; }
.panel-text .lead { margin-top: 28px; }
.mini-stats { margin-top: 48px; display: flex; gap: 48px; }
.mini-stats dt { font: 300 44px/1 var(--sans); letter-spacing: -0.04em; }
.mini-stats dd { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* the process: a single ink line that draws itself, a word under each part of it, one sentence below */
.chapter--process .chapter__inner { justify-content: space-between; }
.pen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.pen svg { width: min(92vw, 1500px); height: auto; max-height: 72vh; overflow: visible; transform: translateX(var(--pan, 0px)); }
.pen path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pen__ghost { stroke: var(--ink); stroke-width: 1; opacity: .07; stroke-dasharray: 2 9; }
.pen__line { stroke: var(--ink); stroke-width: 2.2; }
.pen__tip { fill: var(--orange); transition: opacity .4s; }
.pen__sun { fill: var(--orange); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1.2s var(--ease); }
.pen.is-done .pen__sun { transform: scale(1); }
.pen.is-done .pen__tip { opacity: 0; }
.pen__labels text { font: italic 400 34px var(--serif); fill: var(--ink-3); opacity: .35; transition: opacity .6s, fill .6s; }
.pen__labels .n { font: 500 15px var(--sans); font-style: normal; letter-spacing: .12em; fill: var(--orange-text); }
.pen__labels text.is-on { opacity: 1; fill: var(--ink); }
.pen__labels text.is-past { opacity: .7; }
.steps { position: relative; display: grid; max-width: 520px; }
.step { grid-area: 1 / 1; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; font-weight: 300; color: var(--ink-2); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.step b { font-weight: 500; color: var(--ink); }
.step.is-on { opacity: 1; transform: none; }
/* the 3D room steps back while the line is drawn */
#world { transition: opacity 1s var(--ease); }
body.in-process #world { opacity: .06; }
.chapter--work .chapter__inner { justify-content: space-between; }
.caption { max-width: 520px; }
.caption__cat { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange-text); }
.caption__title { font: italic 400 clamp(2.4rem, 1rem + 3.4vw, 4.6rem)/1 var(--serif); margin-top: 10px; transition: opacity .35s; }
.caption__hint { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.caption.is-swapping .caption__title { opacity: 0; }

/* =========================================================
   SHEETS — the rooms after the walk: plenty of void
   ========================================================= */
.sheet { position: relative; padding: var(--void) var(--gutter); background: var(--white); }
.disciplines { background: linear-gradient(rgba(250,249,246,0), var(--white) 240px); padding-top: calc(var(--void) + 80px); padding-bottom: 0; }
/* disciplines flow straight into the work: one gap between them, not two */
.disciplines + .work { padding-top: clamp(80px, 8vw, 120px); }

.rows { margin-top: clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); max-width: 1180px; }
.row { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--line); }
.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.row:hover::after { transform: scaleX(1); }
.row i { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row__name { font: 300 clamp(2rem, 1rem + 3vw, 4rem)/1 var(--sans); letter-spacing: -0.045em; transition: transform .6s var(--ease); }
.row:hover .row__name { transform: translateX(10px); }
.row__desc { font-size: 15.5px; color: var(--ink-2); font-weight: 300; max-width: 36ch; }

.work__head { margin-bottom: clamp(48px, 6vw, 90px); }
/* six pictures, scattered, with room to breathe */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: clamp(60px, 7vw, 110px); }
.g-card:nth-child(1) { grid-column: 1 / span 5; }
.g-card:nth-child(2) { grid-column: 8 / span 4; margin-top: 120px; }
.g-card:nth-child(3) { grid-column: 3 / span 4; }
.g-card:nth-child(4) { grid-column: 8 / span 5; margin-top: 90px; }
.g-card:nth-child(5) { grid-column: 1 / span 4; }
.g-card:nth-child(6) { grid-column: 7 / span 4; margin-top: 140px; }
.g-card button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.g-card button:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.g-card__img { overflow: hidden; aspect-ratio: 4/5; background: var(--beige); }
.g-card:nth-child(even) .g-card__img { aspect-ratio: 4/3; }
.g-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.g-card button:hover img { transform: scale(1.04); }
.g-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; }
.g-card__title { font: italic 400 22px/1.1 var(--serif); }
.g-card__cat { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* the clients room is beige */
.clients { background: var(--beige); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.clients__globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; touch-action: pan-y; cursor: grab; }
.clients__globe canvas { width: 100%; height: 100%; display: block; }
.clients__hint { position: absolute; bottom: 0; left: 50%; translate: -50% 0; font-size: 12px; color: var(--ink-3); transition: opacity .4s; }
.clients__globe.is-touched .clients__hint { opacity: 0; }
.clients .lead { margin-top: 28px; }
.cities { margin-top: 44px; border-top: 1px solid var(--line); }
.city { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding .4s var(--ease), color .3s; }
.city:hover, .city.is-active { padding-left: 10px; color: var(--orange-text); }
.city__name { font: italic 400 26px/1.1 var(--serif); }
.city__country { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.city__time { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-2); }

/* the founder: the one black room */
.founder { background: var(--ink); color: var(--white); --ink-2: #c9c4ba; --ink-3: #a19c92; --line: rgba(250,249,246,.16); }
.founder__quote { font: italic 400 clamp(2rem, 1rem + 3vw, 4rem)/1.1 var(--serif); max-width: 22ch; letter-spacing: -0.01em; }
.founder__quote em { color: var(--orange); }
.founder__grid { margin-top: var(--void); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 110px); }
.founder__role { margin-top: 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.timeline { margin-top: 40px; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.timeline span { font-size: 14px; color: var(--ink-3); }
.timeline b { font-weight: 400; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: end; }
.mega--contact { font-size: clamp(3rem, 1rem + 6vw, 8rem); }
.contact .lead { margin-top: 28px; }
.wa { display: grid; gap: 26px; align-content: start; }
.form__types { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form__types legend { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.form__types label { position: relative; }
.form__types input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.form__types span { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--beige); font-size: 14px; transition: .25s; }
.form__types input:checked + span { background: var(--ink); color: var(--white); }
.form__types input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 300 18px var(--sans); padding: 10px 0; min-height: 46px; resize: vertical; transition: border-color .3s; }
.field textarea:focus { outline: none; border-color: var(--ink); }
.btn--wa { justify-self: start; gap: 12px; background: var(--ink); color: var(--white); }
.btn--wa:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }
.wa__icon { width: 22px; height: 22px; fill: currentColor; }
.wa__note { font-size: 14px; color: var(--ink-3); }
.wa-float {
  position: fixed; z-index: 55; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(250, 249, 246, .28), 0 8px 24px rgba(21, 21, 21, .14); transition: transform .4s var(--ease), background .25s, color .25s, opacity .4s;
}
.wa-float:hover { background: var(--orange); color: var(--ink); transform: translateY(-3px); }
.wa-float svg { width: 22px; height: 22px; fill: #25d366; }   /* only the icon keeps WhatsApp green, so it is recognised */
.wa-float:hover svg { fill: currentColor; }

.footer { position: relative; z-index: 2; background: var(--ink); color: var(--white); padding: 60px var(--gutter) 96px; overflow: hidden; }
.footer__mark { font: 300 clamp(6rem, 28vw, 26rem)/.8 var(--sans); letter-spacing: -0.07em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(250,249,246,.25); user-select: none; }
.footer__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(250,249,246,.16); font-size: 13px; color: #a19c92; }
.footer__row a:hover { color: var(--orange); }

/* quiet reveals */
html.motion .reveal { opacity: 0; transform: translateY(30px); }
html.motion .reveal.is-in { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }

/* =========================================================
   LIGHTBOX — white, the picture alone
   ========================================================= */
.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(250,249,246,.97); color: var(--ink); }
.lightbox[open] { display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; animation: fade .4s var(--ease); }
.lightbox::backdrop { background: transparent; }
@keyframes fade { from { opacity: 0; } }
.lightbox figure { display: grid; justify-items: center; gap: 18px; }
.lightbox img { max-height: 76dvh; width: auto; animation: pop .7s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.lightbox figcaption { display: grid; text-align: center; gap: 4px; }
#lbCat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-text); }
#lbTitle { font: italic 400 30px/1.1 var(--serif); }
.lightbox__nav, .lightbox__close { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 24px; font-weight: 300; justify-self: center; transition: background .25s, color .25s; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--ink); color: var(--white); }
.lightbox__close { position: absolute; top: 20px; right: 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row__desc { grid-column: 2; }
}
@media (max-width: 860px) {
  .nav { gap: 14px; }
  .nav > .btn { margin-left: auto; }
  .nav__toggle { display: grid; gap: 6px; place-content: center; width: 42px; height: 42px; background: none; border: 0; padding: 0; }
  .nav__toggle span { width: 22px; height: 1px; background: var(--ink); transition: transform .3s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav nav { position: fixed; inset: 0; z-index: -1; margin: 0; background: var(--white); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  .nav.is-open nav { opacity: 1; visibility: visible; }
  .nav__links { flex-direction: column; align-items: center; gap: 20px; }
  .nav__links a { font: 300 2.4rem/1 var(--sans); letter-spacing: -0.04em; color: var(--ink); }
  .progress { right: 10px; height: 100px; }
  .veil { background: linear-gradient(180deg, rgba(250,249,246,.7), rgba(250,249,246,.2) 40%, rgba(250,249,246,.75)); }
  .chapter__inner { padding: 110px var(--gutter) 80px; }
  .chapter--process .chapter__inner { justify-content: flex-end; }
  /* on a phone the drawing is drawn large and pans with the pen */
  .pen svg { width: auto; height: 46vh; max-height: none; max-width: none; }
  .pen__labels text { font-size: 44px; }
  .pen__labels .n { font-size: 20px; }
  .clients, .contact, .founder__grid { grid-template-columns: 1fr; }
  .clients__globe { max-width: 420px; margin: 0 auto; }
  .gallery { grid-template-columns: 1fr 1fr; row-gap: 70px; }
  .g-card:nth-child(n) { grid-column: span 1; margin-top: 0; }
  .g-card:nth-child(even) { margin-top: 90px; }
  /* on phones the floating button would cover the walk's words: it waits until the walk is over */
  body:not(.is-past) .wa-float { opacity: 0; pointer-events: none; transform: translateY(16px); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav > .btn { display: none; }
  .nav__toggle { margin-left: auto; }
  .mini-stats { gap: 28px; }
  .mini-stats dt { font-size: 34px; }
  .gallery { grid-template-columns: 1fr; }
  .g-card:nth-child(n) { margin-top: 0; }
  .g-card:nth-child(even) { width: 78%; justify-self: end; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .city { grid-template-columns: 1fr auto; }
  .city__country { grid-column: 1; grid-row: 2; }
  .city__time { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .wa-float { padding: 0; width: 52px; justify-content: center; }
  .wa-float__label { display: none; }
  .lightbox[open] { grid-template-columns: 50px 1fr 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html.motion .chapter__inner > *, html.motion .reveal { opacity: 1; transform: none; }
}