/* Personal Website, one stylesheet.
   Direction (2026-09-23): a premium editorial site. Instrument Serif for display,
   Instrument Sans for reading; ivory paper, near-black ink, a deep forest "night"
   ground for panels and the footer, and one brass accent used sparingly (the ring
   of the monogram, active states, small numbers). Every photograph sits in a
   rounded frame and moves with the same timing as the type.

   Browser support: the full design in every browser from about 2018 on (Safari 12,
   Chrome and Edge 76, Firefox 68, Samsung Internet 10). Newer effects (view
   transitions, backdrop blur, clip-path reveals) are layered on top and simply
   do nothing where they are missing. Rules of the file: physical properties only
   (no margin-inline), no flex gap, no :is()/:where()/:has(), no nesting, no @layer,
   a plain value before every clamp(), and tokens that use clamp() are set twice
   (plain first, clamp inside @supports).

   Change colour, type, spacing, radius and timing in the tokens below. */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #f7f3ec;
  --paper-2: #efe8dc;           /* sand: image placeholders, quiet panels */
  --paper-3: #e6dccb;
  --ink: #1b1814;
  --ink-2: #3a342d;
  --muted: #675d53;             /* 5.8:1 on paper */
  --line: rgba(27, 24, 20, 0.13);
  --line-2: rgba(27, 24, 20, 0.24);
  --brass: #a07b45;             /* decoration and large type only (3.5:1) */
  --brass-deep: #8a6634;        /* small text on paper (4.7:1) */
  --night: #15201a;             /* deep forest */
  --night-2: #1c2a22;
  --night-ink: #f4efe6;         /* 14.6:1 on night */
  --night-muted: #a9b3a8;       /* 7.7:1 on night */
  --night-line: rgba(244, 239, 230, 0.16);
  --brass-light: #cdaa70;       /* 7.6:1 on night */

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --page: 90rem;
  --gutter: 1.25rem;
  --gap: 1.25rem;
  --space-1: 6rem;              /* between sections */
  --space-2: 3rem;              /* inside a section */
  --measure: 34rem;
  --head-h: 64px;

  --r-xl: 24px;                 /* hero image, panels */
  --r-lg: 20px;                 /* large images */
  --r-md: 16px;                 /* cards */
  --r-sm: 12px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h24M18 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 18V2M1 8l6-6 6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 12L12 2M4 2h8v8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}
@supports (width: clamp(1px, 1vw, 2px)) {
  :root {
    --gutter: clamp(1.125rem, 4.5vw, 4rem);
    --gap: clamp(1rem, 2.2vw, 2rem);
    --space-1: clamp(5.5rem, 11vw, 10.5rem);
    --space-2: clamp(2.5rem, 5vw, 4.5rem);
  }
}
@media (min-width: 48rem) { :root { --r-xl: 32px; --r-lg: 26px; --r-md: 20px; --r-sm: 14px; } }
@media (min-width: 64rem) { :root { --head-h: 80px; --r-xl: 40px; --r-lg: 30px; --r-md: 22px; } }

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;          /* German compounds never push the page sideways */
  word-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; -webkit-hyphens: manual; hyphens: manual; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
em { font-style: italic; }

/* German compounds may break, but only long ones and never into tiny fragments */
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .lead, :lang(de) .statement, :lang(de) .glance dd, :lang(de) .places .what, :lang(de) .facts dt {
  -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; hyphenate-limit-chars: 12 5 5;
}

::selection { background: #e7d6b6; color: var(--ink); }
.night ::selection { background: var(--brass-light); color: var(--night); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; -webkit-text-decoration-color: var(--line-2); text-decoration-color: var(--line-2); transition: text-decoration-color .3s, color .3s; }
a:hover { -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; }
a, button { touch-action: manipulation; }

:focus { outline: 2px solid var(--brass-deep); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.night :focus { outline-color: var(--brass-light); }

.skip { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none; transition: top .3s var(--ease-out); }
.skip:focus { top: 1rem; }

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

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--page); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); }
.grid > .inner { grid-column: 1 / -1; }
.section { padding-top: var(--space-1); }
.section--tight { padding-top: var(--space-2); }

/* ---------- type roles ---------- */

.display-1 { font-size: 3rem; font-size: clamp(2.85rem, 1.2rem + 5.6vw, 6.6rem); line-height: .98; letter-spacing: -0.022em; }
.display-2 { font-size: 3.4rem; font-size: clamp(3.25rem, 1.1rem + 7.6vw, 8.5rem); line-height: .92; letter-spacing: -0.028em; }
.h2 { font-size: 2.4rem; font-size: clamp(2.15rem, 1.3rem + 3.1vw, 3.9rem); line-height: 1.02; letter-spacing: -0.016em; }
.h3 { font-size: 1.75rem; font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.08; letter-spacing: -0.01em; }
.lead { font-family: var(--serif); font-size: 1.55rem; font-size: clamp(1.4rem, 1.05rem + 1.15vw, 2.1rem); line-height: 1.24; letter-spacing: -0.006em; color: var(--ink-2); }
.night .lead { color: var(--night-ink); }
.statement { font-family: var(--serif); font-size: 2.2rem; font-size: clamp(1.9rem, 1.05rem + 2.7vw, 3.6rem); line-height: 1.12; letter-spacing: -0.016em; }
.small { font-size: .875rem; line-height: 1.55; }
.muted { color: var(--muted); }
.num { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--brass-deep); }
.night .num { color: var(--brass-light); }
.label { font-size: .875rem; color: var(--muted); margin: 0 0 1rem; }
.eyebrow { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; font-size: .875rem; color: var(--muted); margin: 0 0 1.25rem; letter-spacing: .01em; }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--brass); margin-right: .75rem; -webkit-box-flex: 0; flex: none; }
.night .label, .night .eyebrow, .night .muted { color: var(--night-muted); }
.night .eyebrow::before { background: var(--brass-light); }
.prose { max-width: var(--measure); }

.h2 + p, .h2 + .prose, .h2 + .lead, .h3 + p { margin-top: 1.25rem; }
.label + .h2, .eyebrow + .h2 { margin-top: 0; }
.text > .h2, .intro > .h2 { margin-bottom: 1.25rem; }

/* ---------- links and buttons ---------- */

/* a link that leads somewhere: words, then a drawn arrow */
.go { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.3; padding: .35rem 0; }
.go span { background: -webkit-linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out); }
.go::after { content: ""; width: 1.5em; height: .8em; margin-left: .6em; background: currentColor; -webkit-mask: var(--arrow) no-repeat center / contain; mask: var(--arrow) no-repeat center / contain; transition: -webkit-transform .6s var(--ease-out); transition: transform .6s var(--ease-out); }
.go:hover span, .go:focus span { background-size: 100% 1px; }
.go:hover::after, .go:focus::after { -webkit-transform: translateX(.35em); transform: translateX(.35em); }
.go--out::after { width: .8em; -webkit-mask-image: var(--arrow-out); mask-image: var(--arrow-out); }
.go--out:hover::after { -webkit-transform: translate(.15em, -.15em); transform: translate(.15em, -.15em); }

.links { display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 1.75rem 0 0 -1px; }
.links > * { margin: 0 2.25rem .5rem 0; }
.links > *:last-child { margin-right: 0; }

.actions { display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; margin: 2rem 0 0; }
.actions > * { margin: 0 .75rem .75rem 0; }

.btn {
  position: relative; z-index: 0; overflow: hidden;
  display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center;
  min-height: 52px; padding: .5rem .55rem .5rem 1.5rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: .9375rem; font-weight: 500; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  transition: color .45s var(--ease-out), border-color .45s, -webkit-transform .45s var(--ease-out);
  transition: color .45s var(--ease-out), border-color .45s, transform .45s var(--ease-out);
}
.btn::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--night); -webkit-transform: translate3d(0, 101%, 0); transform: translate3d(0, 101%, 0); transition: -webkit-transform .6s var(--ease-out); transition: transform .6s var(--ease-out); }
.btn:hover::before, .btn:focus::before { -webkit-transform: none; transform: none; }
.btn:active { -webkit-transform: scale(.97); transform: scale(.97); }
/* the arrow sits in a round well at the end of the button and follows the text colour */
.btn { --well: rgba(247, 243, 236, .14); }
.btn__arrow { position: relative; -webkit-box-flex: 0; flex: none; width: 2.25rem; height: 2.25rem; margin-left: 1rem; border-radius: 50%; background: var(--well); transition: background-color .45s; }
.btn__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: .6rem; margin: -.3rem 0 0 -.5rem; background: currentColor; -webkit-mask: var(--arrow) no-repeat center / contain; mask: var(--arrow) no-repeat center / contain; transition: -webkit-transform .6s var(--ease-out); transition: transform .6s var(--ease-out); }
.btn:hover .btn__arrow::before, .btn:focus .btn__arrow::before { -webkit-transform: translateX(3px); transform: translateX(3px); }
.btn--out .btn__arrow::before { width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; -webkit-mask-image: var(--arrow-out); mask-image: var(--arrow-out); }
.btn--out:hover .btn__arrow::before, .btn--out:focus .btn__arrow::before { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); --well: rgba(27, 24, 20, .07); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus { color: var(--paper); border-color: var(--ink); --well: rgba(247, 243, 236, .14); }

.night .btn, .btn--light { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); --well: rgba(21, 32, 26, .1); }
.night .btn::before, .btn--light::before { background: var(--brass-light); }
.night .btn:hover, .night .btn:focus { color: var(--night); border-color: var(--brass-light); }
.night .btn--ghost { background: transparent; color: var(--night-ink); border-color: var(--night-line); --well: rgba(244, 239, 230, .1); }
.night .btn--ghost::before { background: var(--night-ink); }
.night .btn--ghost:hover, .night .btn--ghost:focus { color: var(--night); border-color: var(--night-ink); --well: rgba(21, 32, 26, .1); }

/* ---------- the monogram and wordmark ---------- */

.mono { width: 40px; height: 40px; -webkit-box-flex: 0; flex: none; overflow: visible; }
.mono__b, .mono__i { fill: currentColor; }
.mono__i { stroke: var(--mono-gap, var(--paper)); stroke-width: 3.2; paint-order: stroke; stroke-linejoin: round; }
.mono__ring { fill: none; stroke: var(--brass); stroke-width: 2.6; stroke-dasharray: 296; stroke-dashoffset: 0; }
.night .mono__ring { stroke: var(--brass-light); }
.night { --mono-gap: var(--night); }

.brand { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; text-decoration: none; color: inherit; line-height: 1; }
.brand .mono { margin-right: .7rem; transition: -webkit-transform .9s var(--ease-out); transition: transform .9s var(--ease-out); }
.brand__name { font-family: var(--serif); font-size: 1.28rem; letter-spacing: .005em; white-space: nowrap; }
.brand:hover .mono { -webkit-transform: rotate(-8deg) scale(1.04); transform: rotate(-8deg) scale(1.04); }

/* ---------- masthead and menu ---------- */

.masthead { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; transition: -webkit-transform .55s var(--ease-out); transition: transform .55s var(--ease-out); }
.masthead__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(247, 243, 236, .94); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .masthead__bg { background: rgba(247, 243, 236, .72); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); }
}
.masthead.is-scrolled .masthead__bg { opacity: 1; }
.masthead.is-hidden { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
.masthead__bar { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; min-height: var(--head-h); padding-top: env(safe-area-inset-top); }
.masthead__bar > .brand, .masthead__bar > .lang, .masthead__bar > .menu-btn { position: relative; z-index: 3; }
.masthead .brand { margin-right: auto; }

/* the language switch: a pill with a sliding knob */
.lang {
  position: relative; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center;
  height: 36px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .09em; line-height: 1;
  text-decoration: none; color: var(--muted); -webkit-flex-shrink: 0; flex-shrink: 0;
  transition: border-color .3s;
}
.lang:hover { border-color: var(--ink); }
.lang::after { content: ""; position: absolute; top: -5px; right: -4px; bottom: -5px; left: -4px; }   /* a 46 px tap target around the 36 px pill */
.lang__opt { position: relative; z-index: 1; display: block; width: 36px; text-align: center; transition: color .45s var(--ease-out); }
.lang__knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 36px; border-radius: 999px; background: var(--ink); transition: -webkit-transform .6s var(--ease-spring); transition: transform .6s var(--ease-spring); }
.lang--en .lang__opt:first-child, .lang--de .lang__opt:nth-child(2) { color: var(--paper); }
.lang--de .lang__knob { -webkit-transform: translateX(36px); transform: translateX(36px); }
.lang--en:hover .lang__knob { -webkit-transform: translateX(7px); transform: translateX(7px); }
.lang--de:hover .lang__knob { -webkit-transform: translateX(29px); transform: translateX(29px); }
.lang--en.is-switching .lang__knob { -webkit-transform: translateX(36px); transform: translateX(36px); }
.lang--de.is-switching .lang__knob { -webkit-transform: translateX(0); transform: translateX(0); }
.lang--en.is-switching .lang__opt:first-child, .lang--de.is-switching .lang__opt:nth-child(2) { color: var(--muted); }
.lang--en.is-switching .lang__opt:nth-child(2), .lang--de.is-switching .lang__opt:first-child { color: var(--paper); }
.night .lang { border-color: var(--night-line); color: var(--night-muted); }
.night .lang:hover { border-color: var(--night-ink); }
.night .lang__knob { background: var(--night-ink); }
.night .lang--en .lang__opt:first-child, .night .lang--de .lang__opt:nth-child(2),
.night .lang--en.is-switching .lang__opt:nth-child(2), .night .lang--de.is-switching .lang__opt:first-child { color: var(--night); }
.night .lang--en.is-switching .lang__opt:first-child, .night .lang--de.is-switching .lang__opt:nth-child(2) { color: var(--night-muted); }

/* the menu button: two lines that turn into a cross */
.menu-btn { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 44px; height: 44px; margin: 0 -10px 0 .6rem; color: inherit; text-decoration: none; border-radius: 50%; }
.menu-btn__lines { position: relative; display: block; width: 22px; height: 12px; }
.menu-btn__lines::before, .menu-btn__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: -webkit-transform .6s var(--ease-out), top .6s var(--ease-out), right .6s var(--ease-out); transition: transform .6s var(--ease-out), top .6s var(--ease-out), right .6s var(--ease-out); }
.menu-btn__lines::before { top: 0; }
.menu-btn__lines::after { top: 10.5px; right: 6px; }
.menu-btn:hover .menu-btn__lines::after { right: 0; }
.menu-open .menu-btn__lines::before { top: 5.25px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menu-open .menu-btn__lines::after { top: 5.25px; right: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.menu__list a { text-decoration: none; }
.menu__num { display: none; }
.menu__extra { display: none; }
.nav__close { display: none; }

/* Phones and tablets: the menu is a full-screen night panel. It opens with the button
   (script) or, without a script, as a :target anchor, so it works in every browser. */
@media (max-width: 63.99rem) {
  .nav {
    position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; left: 0;
    display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column;
    padding: calc(var(--head-h) + 1.5rem) var(--gutter) 2rem;
    padding-top: calc(var(--head-h) + env(safe-area-inset-top) + 1.5rem);
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    background: var(--night); color: var(--night-ink);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .45s ease, visibility 0s .7s;
  }
  .nav:target, .menu-open .nav { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }
  html:not(.js) .nav:target { z-index: 4; }    /* without the script the open menu covers the bar and brings its own Close */
  html:not(.js) .nav:target .nav__close { display: block; position: absolute; top: 1.1rem; right: var(--gutter); padding: .6rem 0; color: var(--night-ink); text-decoration: none; }
  .can-clip .nav { opacity: 1; -webkit-clip-path: circle(0 at calc(100% - 2.1rem) 2rem); clip-path: circle(0 at calc(100% - 2.1rem) 2rem); transition: -webkit-clip-path .7s var(--ease-in-out), clip-path .7s var(--ease-in-out), visibility 0s .7s; }
  .can-clip.menu-open .nav { -webkit-clip-path: circle(150% at calc(100% - 2.1rem) 2rem); clip-path: circle(150% at calc(100% - 2.1rem) 2rem); transition: -webkit-clip-path .85s var(--ease-out), clip-path .85s var(--ease-out), visibility 0s; }

  .menu__list { margin-top: .5rem; }
  .menu__list li { border-top: 1px solid var(--night-line); }
  .menu__list li:last-child { border-bottom: 1px solid var(--night-line); }
  .menu__list a { display: -webkit-box; display: flex; -webkit-box-align: baseline; align-items: baseline; padding: .6rem 0 .5rem; font-family: var(--serif); font-size: 2.3rem; font-size: clamp(2.1rem, 9vw, 3.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--night-ink); }
  .menu__list a[aria-current] { font-style: italic; color: var(--brass-light); }
  .menu__num { display: block; width: 2.6rem; -webkit-box-flex: 0; flex: none; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--brass-light); }
  .menu__extra { display: block; margin-top: auto; padding-top: 2.5rem; font-size: .9375rem; color: var(--night-muted); }
  .menu__extra p { margin: 0 0 .9rem; }
  .menu__extra p a { color: var(--night-ink); text-decoration: none; margin-right: 1.4rem; display: inline-block; padding: .35rem 0; }
  .menu__extra .lang { margin-top: .75rem; }

  /* the links arrive one after another */
  .js-motion .menu__list li, .js-motion .menu__extra { opacity: 0; -webkit-transform: translate3d(0, 24px, 0); transform: translate3d(0, 24px, 0); transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; }
  .js-motion.menu-open .menu__list li, .js-motion.menu-open .menu__extra { opacity: 1; -webkit-transform: none; transform: none; transition: opacity .7s ease, -webkit-transform .9s var(--ease-out); transition: opacity .7s ease, transform .9s var(--ease-out); }
  .js-motion.menu-open .menu__list li:nth-child(1) { transition-delay: .16s; }
  .js-motion.menu-open .menu__list li:nth-child(2) { transition-delay: .21s; }
  .js-motion.menu-open .menu__list li:nth-child(3) { transition-delay: .26s; }
  .js-motion.menu-open .menu__list li:nth-child(4) { transition-delay: .31s; }
  .js-motion.menu-open .menu__list li:nth-child(5) { transition-delay: .36s; }
  .js-motion.menu-open .menu__list li:nth-child(6) { transition-delay: .41s; }
  .js-motion.menu-open .menu__extra { transition-delay: .5s; }

  /* while the menu is open the bar sits on the night panel */
  .menu-open .masthead { color: var(--night-ink); --mono-gap: var(--night); }
  .menu-open .masthead .mono__ring { stroke: var(--brass-light); }
  .menu-open .masthead .masthead__bg { opacity: 0; }
  .menu-open .masthead .lang { border-color: var(--night-line); color: var(--night-muted); }
  .menu-open .masthead .lang__knob { background: var(--night-ink); }
  .menu-open .masthead .lang--en .lang__opt:first-child, .menu-open .masthead .lang--de .lang__opt:nth-child(2) { color: var(--night); }
  .menu-open, .menu-open body { overflow: hidden; }

  .masthead .brand__name { font-size: 1.15rem; }
  .masthead .mono { width: 36px; height: 36px; }
  .masthead .brand .mono { margin-right: .6rem; }
}
@media (max-width: 21.2rem) {
  .masthead__bar > .lang { display: none; }     /* the smallest phones (320 px): the switch lives in the menu */
  .masthead .brand__name { font-size: 1.08rem; }
}

/* Laptops and desktops: the same menu sits inline in the bar. */
@media (min-width: 64rem) {
  .menu-btn { display: none; }
  .nav { position: relative; z-index: 3; margin: 0 2rem 0 auto; }
  .menu__list { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }
  .menu__list li { margin-left: 2rem; }
  .menu__list li:first-child { margin-left: 0; }
  .menu__list a { position: relative; display: block; padding: .6rem 0; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; color: var(--ink-2); transition: color .3s; }
  .menu__list a:hover, .menu__list a[aria-current] { color: var(--ink); }
  .menu__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: var(--brass); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; transition: -webkit-transform .6s var(--ease-out); transition: transform .6s var(--ease-out); }
  .menu__list a:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; }
  .menu__list a[aria-current]::after { -webkit-transform: scaleX(1); transform: scaleX(1); }
  /* with the script, one line slides between the links instead */
  .has-ink .menu__list a::after { display: none; }
  .nav__ink { position: absolute; left: 0; bottom: .3rem; width: 10px; height: 1px; background: var(--brass); opacity: 0; -webkit-transform-origin: left; transform-origin: left; transition: opacity .3s, -webkit-transform .7s var(--ease-out); transition: opacity .3s, transform .7s var(--ease-out); pointer-events: none; }
}
@media (min-width: 64rem) and (max-width: 74rem) {
  .nav { margin-right: 1.25rem; }
  .menu__list li { margin-left: 1.35rem; }
  .masthead .brand__name { font-size: 1.2rem; }
}

/* ---------- photographs: rounded frames that move with the page ---------- */

.fig { margin: 0; position: relative; }
.frame {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-2);
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari: keep the rounded corners while the photo moves */
  isolation: isolate;
}
.frame img { display: block; width: 100%; height: auto; color: transparent; }   /* no alt text flashing in the frame while a photo loads */
/* fixed shapes: the box keeps its size before the photo arrives (padding ratios work in every browser) */
.ratio-45 .frame, .ratio-32 .frame, .ratio-43 .frame, .ratio-23 .frame, .ratio-1610 .frame, .ratio-83 .frame, .ratio-band .frame { height: 0; }
.ratio-45 .frame { padding-top: 125%; }
.ratio-32 .frame { padding-top: 66.667%; }
.ratio-43 .frame { padding-top: 75%; }
.ratio-23 .frame { padding-top: 150%; }
.ratio-1610 .frame { padding-top: 62.5%; }
.ratio-83 .frame { padding-top: 37.5%; }
.ratio-band .frame { padding-top: 75%; }
@media (min-width: 48rem) { .ratio-band .frame { padding-top: 42.86%; } }
.ratio-45 .frame img, .ratio-32 .frame img, .ratio-43 .frame img, .ratio-23 .frame img, .ratio-1610 .frame img, .ratio-83 .frame img, .ratio-band .frame img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.frame--parallax img { top: -7%; height: 114%; will-change: transform; }

.fig figcaption { margin-top: .85rem; font-size: .8125rem; line-height: 1.45; color: var(--muted); display: -webkit-box; display: flex; -webkit-box-align: baseline; align-items: baseline; }
.fig figcaption::before { content: ""; width: .9rem; height: 1px; background: var(--brass); margin-right: .6rem; -webkit-box-flex: 0; flex: none; -webkit-transform: translateY(-.28em); transform: translateY(-.28em); }
.night .fig figcaption { color: var(--night-muted); }
.night .fig figcaption::before { background: var(--brass-light); }

/* cards: the photo leans in on hover */
@media (hover: hover) {
  .card .frame img, .journal-row .frame img { transition: -webkit-transform 1.2s var(--ease-out); transition: transform 1.2s var(--ease-out); }
  .card:hover .frame img, .journal-row:hover .frame img { -webkit-transform: scale(1.045); transform: scale(1.045); }
}

/* ---------- night panels ---------- */

.night { background: var(--night); color: var(--night-ink); }
.night a { -webkit-text-decoration-color: var(--night-line); text-decoration-color: var(--night-line); }
.night a:hover { -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; }
.panel { margin: var(--space-1) auto 0; max-width: calc(var(--page) + 2rem); padding: var(--space-1) 0; border-radius: var(--r-xl); position: relative; overflow: hidden; }
@media (min-width: 48rem) { .panel { margin-left: 1rem; margin-right: 1rem; } }
@media (min-width: 93rem) { .panel { margin-left: auto; margin-right: auto; } }
.panel::before { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 120%; background: radial-gradient(closest-side, rgba(205, 170, 112, .10), rgba(205, 170, 112, 0)); pointer-events: none; }
.panel > * { position: relative; }

/* ---------- home ---------- */

.hero { padding-top: 1.5rem; padding-top: clamp(1.25rem, 4vw, 3.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "media" "text"; }
.hero__title { grid-area: title; margin-bottom: 2rem; }
.hero__media { grid-area: media; position: relative; padding: 0 0 12% 16%; margin-bottom: 2.5rem; }
.hero__text { grid-area: text; max-width: 36rem; }
.hero__main .frame { border-radius: var(--r-xl); }
.hero__inset { position: absolute; left: 0; bottom: 0; width: 42%; }
.hero__inset .frame { border-radius: var(--r-md); box-shadow: 0 0 0 6px var(--paper), 0 30px 60px -30px rgba(27, 24, 20, .45); }
.hero__badge { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: .5rem .85rem .5rem .6rem; border-radius: 999px; background: rgba(247, 243, 236, .88); color: var(--ink); font-size: .8125rem; font-weight: 500; line-height: 1; }
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .hero__badge { background: rgba(247, 243, 236, .66); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); } }
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5d8a61; margin-right: .5rem; box-shadow: 0 0 0 3px rgba(93, 138, 97, .22); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .hero__media { max-width: 34rem; }
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); grid-template-areas: none; -webkit-box-align: center; align-items: center; }
  .hero__title { grid-column: 1 / span 7; grid-row: 1; align-self: end; margin-bottom: 0; }
  .hero__text { grid-column: 1 / span 6; grid-row: 2; align-self: start; margin-top: 2.5rem; }
  .hero__media { grid-column: 8 / span 5; grid-row: 1 / span 2; padding: 0 0 10% 0; margin: 0; }
  .hero__inset { left: -24%; width: 44%; }
}

.marquee { margin-top: var(--space-2); padding: 1.35rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-block; white-space: nowrap; }
.marquee__track span { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 1.6rem; font-size: clamp(1.4rem, 1rem + 1.5vw, 2.3rem); line-height: 1.1; color: var(--ink-2); padding: 0 1.1rem; }
.marquee__track span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2.2rem; border-radius: 50%; background: var(--brass); vertical-align: middle; -webkit-transform: translateY(-.1em); transform: translateY(-.1em); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { -webkit-animation: marquee 48s linear infinite; animation: marquee 48s linear infinite; }
  .marquee:hover .marquee__track { -webkit-animation-play-state: paused; animation-play-state: paused; }
}
@-webkit-keyframes marquee { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); } }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.band { margin-top: var(--space-1); }
.marquee + .wrap > .band { margin-top: var(--space-2); }
.band .frame { border-radius: var(--r-xl); }

.statement-block { padding-top: var(--space-1); }
.statement-block .statement { max-width: 22em; }
@media (min-width: 64rem) { .statement-block .inner { grid-column: 2 / span 10; } }
.js-motion [data-highlight] .hw { opacity: .2; transition: opacity .35s linear; }
.js-motion [data-highlight] .hw.on { opacity: 1; }

.work-head { display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: justify; justify-content: space-between; margin-bottom: var(--space-2); }
.work-head > * { margin-top: .75rem; }
.work-head .h2 { margin-right: 2rem; }

.trio { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 3.5rem; row-gap: 3.5rem; }
.trio__item { position: relative; }
.trio__item .fig { margin-bottom: 1.5rem; }
.trio__item .frame { border-radius: var(--r-lg); }
.trio__item .num { display: block; margin-bottom: .75rem; }
.trio__item h3 a { text-decoration: none; }
.trio__item h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.trio__item p { margin-top: .85rem; max-width: 26rem; }
.card h3 { transition: color .3s; }
.card:hover h3 { font-style: italic; }
@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); }
  .trio__item:nth-child(2) { margin-top: 5rem; margin-top: clamp(3rem, 8vw, 7rem); }
  .trio__item:nth-child(3) { margin-top: 2.5rem; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
}

.venue-teaser { grid-row-gap: 2.75rem; row-gap: 2.75rem; -webkit-box-align: center; align-items: center; }
.venue-teaser .text { grid-column: 1 / -1; }
.venue-teaser .fig { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .venue-teaser .text { grid-column: 1 / span 5; }
  .venue-teaser .fig { grid-column: 7 / span 6; }
}

.entries-2 { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 3.25rem; row-gap: 3.25rem; }
@media (min-width: 48rem) { .entries-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); } }
.entry-card { position: relative; }
.entry-card .fig { margin-bottom: 1.35rem; }
.entry-card h3 a { text-decoration: none; }
.entry-card h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.entry-card .date { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .6rem; }
.entry-card p { margin-top: .8rem; max-width: 30rem; }
@media (min-width: 64rem) { .entries-2 .entry-card:nth-child(2) { margin-top: 5rem; } }

/* ---------- inner page head ---------- */

.page-head { padding-top: 2.5rem; padding-top: clamp(2rem, 7vw, 6.5rem); }
.page-head__grid { grid-row-gap: 2rem; row-gap: 2rem; }
.page-head h1 { grid-column: 1 / -1; }
.page-head .lead { grid-column: 1 / -1; max-width: 24em; }
.page-head .fig { grid-column: 1 / -1; width: 100%; max-width: 30rem; }
.page-head .fig .frame { border-radius: var(--r-xl); }
.page-head .aside { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .page-head--figure h1 { grid-column: 1 / span 8; }
  .page-head--figure .lead { grid-column: 1 / span 7; grid-row: 2; }
  .page-head--figure .aside { grid-column: 1 / span 7; grid-row: 3; }
  .page-head--figure .fig { grid-column: 9 / span 4; grid-row: 1 / span 3; width: 100%; align-self: start; margin-top: 2rem; }
}
.page-head--portrait .fig { max-width: 24rem; }

.index-list { margin-top: var(--space-2); display: grid; grid-row-gap: .1rem; row-gap: .1rem; font-family: var(--serif); font-size: 1.5rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); line-height: 1.3; }
.index-list a { text-decoration: none; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: baseline; align-items: baseline; padding: .15rem 0; }
.index-list .num { font-size: 1rem; min-width: 2.25rem; }
.index-list a span:last-child { background: linear-gradient(currentColor, currentColor) 0 95% / 0 1px no-repeat; transition: background-size .6s var(--ease-out); }
.index-list a:hover span:last-child { background-size: 100% 1px; }
.index-list .sub { padding-left: 2.25rem; font-size: .8em; }

/* ---------- about ---------- */

.chapter { grid-row-gap: 1.5rem; row-gap: 1.5rem; padding-top: var(--space-1); }
.chapter__label { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--brass-deep); margin: 0; }
.chapter__body { grid-column: 1 / -1; max-width: var(--measure); }
.chapter__body h2 { margin-bottom: 1.5rem; }
@media (min-width: 64rem) {
  .chapter__label { grid-column: 1 / span 2; padding-top: 1rem; }
  .chapter__body { grid-column: 3 / span 6; }
}
.figs { grid-row-gap: 2rem; row-gap: 2rem; margin-top: var(--space-2); }
.figs .fig { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .figs--pair .fig:nth-child(1) { grid-column: 1 / span 7; }
  .figs--pair .fig:nth-child(2) { grid-column: 8 / span 5; margin-top: 7rem; margin-top: clamp(4rem, 12vw, 11rem); }
  .figs--right .fig { grid-column: 5 / span 8; }
  .figs--offset .fig { grid-column: 3 / span 6; }
}

.principles { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 2.75rem; row-gap: 2.75rem; margin-top: var(--space-2); }
.principles li { max-width: 30rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.principles .num { display: block; margin-bottom: 1rem; }
.principles h3 { margin-bottom: .8rem; }
@media (min-width: 48rem) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); } }

/* ---------- practice ---------- */

.area { padding-top: var(--space-1); }
.area__head { grid-row-gap: 1.25rem; row-gap: 1.25rem; margin-bottom: var(--space-2); }
.area__head .num { grid-column: 1 / -1; font-size: 1.6rem; }
.area__head h2 { grid-column: 1 / -1; }
.area__head .lead { grid-column: 1 / -1; max-width: 22em; }
@media (min-width: 64rem) {
  .area__head .num { grid-column: 1 / span 1; padding-top: 1rem; }
  .area__head h2 { grid-column: 2 / span 7; }
  .area__head .lead { grid-column: 2 / span 7; }
}
.area__body { grid-row-gap: 3rem; row-gap: 3rem; -webkit-box-align: start; align-items: start; }
.area__body .facts { grid-column: 1 / -1; }
.area__body .fig { grid-column: 1 / -1; max-width: 32rem; }
@media (min-width: 64rem) {
  .area__body .facts { grid-column: 2 / span 7; }
  .area__body .fig { grid-column: 9 / span 4; position: -webkit-sticky; position: sticky; top: 7rem; }
}
.facts { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 2.25rem; row-gap: 2.25rem; }
.facts > div { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.night .facts > div { border-top-color: var(--night-line); }
.facts dt { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; margin-bottom: .5rem; }
.facts dd { max-width: var(--measure); }
@media (min-width: 48rem) { .facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); } }

.feature { grid-row-gap: 2.5rem; row-gap: 2.5rem; margin-top: var(--space-1); -webkit-box-align: center; align-items: center; }
.feature .fig { grid-column: 1 / -1; max-width: 32rem; }
.feature .text { grid-column: 1 / -1; max-width: var(--measure); }
@media (min-width: 64rem) {
  .feature .fig { grid-column: 2 / span 4; }
  .feature .text { grid-column: 7 / span 5; }
}
.feature .label { margin-bottom: .75rem; }
.feature h3 { font-style: italic; margin-bottom: 1.4rem; }
.stages { counter-reset: stage; margin: 1.5rem 0; }
.stages li { counter-increment: stage; position: relative; padding: .9rem 0 .9rem 2.75rem; border-top: 1px solid var(--line); }
.stages li:last-child { border-bottom: 1px solid var(--line); }
.stages li::before { content: counter(stage); position: absolute; left: 0; top: .8rem; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--brass-deep); }

.tta.panel { padding-top: 0; }
.tta .band { margin-top: 0; }
.tta .band .frame { border-radius: 0; }
.tta__body { grid-row-gap: 2.5rem; row-gap: 2.5rem; padding-top: var(--space-2); }
.tta__body .intro { grid-column: 1 / -1; }
.tta__body .facts { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .tta__body .intro { grid-column: 2 / span 4; }
  .tta__body .facts { grid-column: 7 / span 6; }
}

.boundary { padding-top: var(--space-1); }
.boundary .inner { max-width: 42rem; padding: 2rem 0 0; border-top: 1px solid var(--line); }
.boundary h2 { margin-bottom: .9rem; }
@media (min-width: 64rem) { .boundary .inner { grid-column: 2 / span 8; } }

/* ---------- venues ---------- */

.glance { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 1.75rem; row-gap: 1.75rem; margin-top: var(--space-2); }
.glance div { border-top: 1px solid var(--line-2); padding-top: 1rem; }
.glance dt { font-size: .875rem; color: var(--muted); margin-bottom: .45rem; }
.glance dd { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
@media (min-width: 48rem) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); } }
@media (min-width: 72rem) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.formats { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 1.25rem; row-gap: 1.25rem; margin-top: var(--space-2); }
.formats li { position: relative; padding: 2rem 1.5rem 2rem; border-radius: var(--r-md); background: var(--paper-2); transition: background-color .5s, -webkit-transform .7s var(--ease-out); transition: background-color .5s, transform .7s var(--ease-out); }
.formats li:hover { background: var(--paper-3); }
.formats .num { display: block; margin-bottom: 1.1rem; }
.formats h3 { margin-bottom: .8rem; }
.formats p { max-width: 32rem; }
.formats .for { margin-top: 1.1rem; font-size: .875rem; color: var(--muted); }
@media (min-width: 48rem) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: 1.25rem; column-gap: 1.25rem; } .formats li { padding: 2.5rem 2.25rem; } }

.places { margin-top: 1.5rem; }
.places li { display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: .25rem; row-gap: .25rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.places li:last-child { border-bottom: 1px solid var(--line); }
.places .what { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
.places .where { color: var(--muted); font-size: .9375rem; }
.places + p { margin-top: 1.75rem; }
@media (min-width: 48rem) { .places li { grid-template-columns: minmax(0, 1fr) auto; -webkit-column-gap: 2rem; column-gap: 2rem; -webkit-box-align: baseline; align-items: baseline; } .places .where { text-align: right; } }

.split { grid-row-gap: 2.5rem; row-gap: 2.5rem; }
.split > * { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .split > :first-child { grid-column: 1 / span 5; }
  .split > :last-child { grid-column: 7 / span 6; }
}

/* ---------- training ---------- */

.cv { grid-row-gap: 1.5rem; row-gap: 1.5rem; padding-top: var(--space-1); }
.cv h2 { grid-column: 1 / -1; }
.cv .entries { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .cv h2 { grid-column: 1 / span 4; position: -webkit-sticky; position: sticky; top: 7rem; align-self: start; }
  .cv .entries { grid-column: 5 / span 8; }
}
.entries li { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); -webkit-column-gap: 1.25rem; column-gap: 1.25rem; padding: 1.2rem 0; border-top: 1px solid var(--line); transition: background-color .4s; }
.entries li:last-child { border-bottom: 1px solid var(--line); }
.entries .year { font-size: .875rem; color: var(--brass-deep); padding-top: .4rem; font-variant-numeric: tabular-nums; }
.entries .title { font-family: var(--serif); font-size: 1.45rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.2; display: block; }
.entries .place { display: block; color: var(--muted); font-size: .9375rem; margin-top: .3rem; }
.entries--quiet .title { font-size: 1.22rem; }
@media (max-width: 30rem) { .entries li { grid-template-columns: minmax(0, 1fr); } .entries .year { padding-top: 0; margin-bottom: .25rem; } }

/* ---------- journal ---------- */

.journal-list { margin-top: var(--space-2); display: grid; grid-row-gap: var(--space-2); row-gap: var(--space-2); }
.journal-row { position: relative; grid-row-gap: 1.5rem; row-gap: 1.5rem; -webkit-box-align: center; align-items: center; }
.journal-row .fig { grid-column: 1 / -1; max-width: 34rem; }
.journal-row .text { grid-column: 1 / -1; max-width: 34rem; }
.journal-row h2 a { text-decoration: none; }
.journal-row h2 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.journal-row:hover h2 { font-style: italic; }
.journal-row .date { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .8rem; }
.journal-row p { margin-top: 1rem; }
@media (min-width: 64rem) {
  .journal-row .fig { grid-column: 1 / span 5; }
  .journal-row .text { grid-column: 7 / span 5; }
}

.post-head { padding-top: 2.5rem; padding-top: clamp(2rem, 6vw, 5.5rem); }
.post-head .inner { max-width: 58rem; }
.post-head .back { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; font-size: .9375rem; color: var(--muted); text-decoration: none; }
.post-head .back::before { content: ""; width: 1.2em; height: .7em; margin-right: .55em; background: currentColor; -webkit-mask: var(--arrow) no-repeat center / contain; mask: var(--arrow) no-repeat center / contain; -webkit-transform: scaleX(-1); transform: scaleX(-1); transition: -webkit-transform .5s var(--ease-out); transition: transform .5s var(--ease-out); }
.post-head .back:hover { color: var(--ink); }
.post-head .back:hover::before { -webkit-transform: scaleX(-1) translateX(.3em); transform: scaleX(-1) translateX(.3em); }
.post-head h1 { font-size: 2.9rem; font-size: clamp(2.6rem, 1.2rem + 5vw, 5.75rem); line-height: .98; letter-spacing: -0.02em; margin-top: 1.75rem; }
.post-head .meta { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }
.post-fig { margin-top: var(--space-2); }
.post-fig .fig { max-width: 50rem; }
.post-fig .frame { border-radius: var(--r-xl); }
.post-body { padding-top: var(--space-2); }
.post-body .inner { max-width: 36rem; }
@media (min-width: 64rem) { .post-body .inner { margin-left: calc((100% - 36rem) * .25); } .post-fig .fig { margin-left: calc((100% - 50rem) * .25); } }
.post-body h2 { font-size: 1.85rem; font-size: clamp(1.6rem, 1.3rem + .9vw, 2.2rem); line-height: 1.1; margin: 2.75rem 0 1rem; }
.post-body .intro { font-family: var(--serif); font-size: 1.5rem; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); line-height: 1.3; margin-bottom: 1.5em; }
.post-body ol { counter-reset: step; margin: 0 0 1.2em; }
.post-body ol li { counter-increment: step; position: relative; padding: .45rem 0 .45rem 2rem; }
.post-body ol li::before { content: counter(step); position: absolute; left: 0; top: .4rem; font-family: var(--serif); font-style: italic; color: var(--brass-deep); font-size: 1.25rem; line-height: 1.35; }
.post-end { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }

/* ---------- contact ---------- */

.contact-grid { grid-row-gap: 3rem; row-gap: 3rem; padding-top: 2.5rem; padding-top: clamp(2rem, 7vw, 6.5rem); -webkit-box-align: start; align-items: start; }
.contact-grid .text { grid-column: 1 / -1; }
.contact-grid .fig { grid-column: 1 / -1; width: 100%; max-width: 26rem; }
.contact-grid .fig .frame { border-radius: var(--r-xl); }
@media (min-width: 64rem) {
  .contact-grid .text { grid-column: 1 / span 7; }
  .contact-grid .fig { grid-column: 9 / span 4; margin-top: 2rem; }
}
.contact-grid .lead { max-width: 22em; margin-top: 2rem; }
.channel-list { margin-top: var(--space-2); }
.channel-list li { border-top: 1px solid var(--line); }
.channel-list li:last-child { border-bottom: 1px solid var(--line); }
.channel-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; -webkit-box-align: center; align-items: center; -webkit-column-gap: 1rem; column-gap: 1rem; padding: 1.15rem 0; text-decoration: none; }
.channel-list .name { font-family: var(--serif); font-size: 2.2rem; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.1; transition: -webkit-transform .7s var(--ease-out); transition: transform .7s var(--ease-out); }
.channel-list .detail { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; font-size: .9375rem; color: var(--muted); text-align: right; }
.channel-list .detail::after { content: ""; width: 2.5rem; height: 2.5rem; margin-left: 1rem; border-radius: 50%; border: 1px solid var(--line-2); background: var(--arrow-out) no-repeat center / .7rem .7rem; -webkit-box-flex: 0; flex: none; transition: background-color .5s, border-color .5s, -webkit-transform .7s var(--ease-out); transition: background-color .5s, border-color .5s, transform .7s var(--ease-out); }
.channel-list a:hover .name { font-style: italic; -webkit-transform: translateX(.4rem); transform: translateX(.4rem); }
.channel-list a:hover .detail::after { background-color: var(--brass-light); border-color: var(--brass-light); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.notes { margin-top: var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr); grid-row-gap: 1.5rem; row-gap: 1.5rem; }
@media (min-width: 48rem) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: var(--gap); column-gap: var(--gap); } }
.notes h2 { font-size: 1.4rem; line-height: 1.2; margin-bottom: .5rem; }

/* ---------- next page ---------- */

.next { margin-top: var(--space-1); }
.next a { position: relative; display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: baseline; align-items: baseline; -webkit-box-pack: justify; justify-content: space-between; padding: 2.5rem 0; padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--line-2); text-decoration: none; }
.next a::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--brass); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; transition: -webkit-transform 1s var(--ease-out); transition: transform 1s var(--ease-out); }
.next a:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); }
.next .label { margin: 0 1.5rem .5rem 0; }
.next .title { font-family: var(--serif); font-size: 2.6rem; font-size: clamp(2.4rem, 1.2rem + 5vw, 6.25rem); line-height: 1; letter-spacing: -0.02em; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; transition: -webkit-transform .8s var(--ease-out); transition: transform .8s var(--ease-out); }
.next .title::after { content: ""; width: .7em; height: .4em; margin-left: .3em; background: currentColor; -webkit-mask: var(--arrow) no-repeat center / contain; mask: var(--arrow) no-repeat center / contain; transition: -webkit-transform .8s var(--ease-out); transition: transform .8s var(--ease-out); }
.next a:hover .title { font-style: italic; }
.next a:hover .title::after { -webkit-transform: translateX(.2em); transform: translateX(.2em); }

/* ---------- footer ---------- */

.footer { position: relative; overflow: hidden; margin-top: var(--space-1); padding-top: var(--space-1); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.footer--plain { padding-top: var(--space-2); }
.footer--plain .footer__grid { border-top: 0; padding-top: 0; }
.footer__cta { padding-bottom: var(--space-1); -webkit-box-align: end; align-items: end; }
.footer__cta-text { grid-column: 1 / -1; }
.footer__fig { display: none; }
@media (min-width: 64rem) {
  .footer__cta-text { grid-column: 1 / span 7; }
  .footer__fig { display: block; grid-column: 9 / span 4; max-width: 22rem; justify-self: end; width: 100%; }
  .footer__fig .frame { border-radius: var(--r-xl); }
  .footer__fig img { object-position: 50% 30%; }
}
.footer__title { font-size: 3.2rem; font-size: clamp(3rem, 1.4rem + 7vw, 8rem); line-height: .92; letter-spacing: -0.028em; }
.footer__note { margin-top: 1.25rem; max-width: 26rem; color: var(--night-muted); }
.footer__cta .actions { margin-top: 2.25rem; }
.footer__grid { grid-row-gap: 2.5rem; row-gap: 2.5rem; padding-top: 3rem; border-top: 1px solid var(--night-line); }
.footer__brand { grid-column: 1 / -1; }
.footer__brand .brand { margin-bottom: 1.25rem; }
.footer__brand .mono { width: 56px; height: 56px; margin-right: .9rem; }
.footer__brand .brand__name { font-size: 1.8rem; color: var(--night-ink); }   /* the same lockup as the masthead, at footer scale */
.footer__brand .mono__ring { stroke-width: 1.8; }
.footer__brand p { color: var(--night-muted); max-width: 22rem; }
.footer__col { grid-column: span 6; }
.footer__label { font-size: .8125rem; color: var(--night-muted); margin: 0 0 .9rem; }
.footer ul li { margin-bottom: .35rem; }
.footer ul a { display: inline-block; padding: .15rem 0; text-decoration: none; color: var(--night-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out), color .3s; }
.footer ul a:hover { background-size: 100% 1px; }
.footer ul a[aria-current] { color: var(--brass-light); }
@media (min-width: 48rem) { .footer__col { grid-column: span 4; } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .footer__brand { grid-column: 1 / span 5; }
  .footer__col { grid-column: span 2; }
  .footer__col--first { grid-column: 7 / span 2; }
}
.footer__base { display: -webkit-box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; margin-top: var(--space-2); padding-top: 1.25rem; padding-bottom: 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--night-line); font-size: .8125rem; color: var(--night-muted); }
.footer__base p { margin: .35rem 2rem .35rem 0; }
.footer__base a { color: var(--night-ink); }
.to-top { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: .35rem 0; color: var(--night-ink); text-decoration: none; }
.to-top::after { content: ""; width: 2.25rem; height: 2.25rem; margin-left: .75rem; border-radius: 50%; border: 1px solid var(--night-line); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 18V2M1 8l6-6 6 6' fill='none' stroke='%23f4efe6' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / .55rem .8rem; transition: -webkit-transform .6s var(--ease-out), border-color .4s; transition: transform .6s var(--ease-out), border-color .4s; }
.to-top:hover::after, .to-top:focus::after { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: var(--night-ink); }
/* ---------- privacy, gate, 404 ---------- */

.page { padding-top: 2.5rem; padding-top: clamp(2rem, 7vw, 6.5rem); padding-bottom: var(--space-1); }
.page .inner { max-width: 40rem; }
.page h1 { font-size: 3rem; font-size: clamp(2.6rem, 1.4rem + 4vw, 4.75rem); line-height: 1; margin-bottom: 2rem; }
.page h2 { font-size: 1.55rem; line-height: 1.2; margin: 2.25rem 0 .6rem; }
.draft-note { font-size: .875rem; color: var(--muted); padding: 1rem 1.25rem; background: var(--paper-2); border-radius: var(--r-sm); margin-bottom: 2.5rem; }

.gate { min-height: 100vh; min-height: 100dvh; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; padding: var(--gutter); }
.gate .mono { width: 88px; height: 88px; margin: 0 auto 1.75rem; }
.gate .mono__ring { stroke-width: 1.4; }
.gate h1 { font-size: 3.2rem; font-size: clamp(2.8rem, 1.2rem + 7vw, 6.5rem); line-height: .95; letter-spacing: -0.028em; }
.gate .actions { -webkit-box-pack: center; justify-content: center; margin-top: 2.5rem; }
.gate .actions > * { margin: 0 .4rem .75rem; }
.gate p.muted { margin-top: 1.5rem; }

/* ---------- motion: one timing for type, photographs and pages ---------- */

/* Everything below only runs when the script has confirmed the browser can do it and
   the visitor has not asked their system for less motion. Without it, every element
   is simply visible. */

.js-motion [data-reveal] { opacity: 0; -webkit-transform: translate3d(0, 28px, 0); transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease-out), -webkit-transform 1.2s var(--ease-out); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion [data-reveal].is-in { opacity: 1; -webkit-transform: none; transform: none; }

/* photographs: the frame opens from its centre while the photo settles */
.js-motion .fig[data-reveal] { opacity: 1; -webkit-transform: none; transform: none; }
.js-motion .fig[data-reveal] .frame { opacity: 0; transition: opacity .9s ease, -webkit-clip-path 1.5s var(--ease-out), clip-path 1.5s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion.can-clip .fig[data-reveal] .frame { -webkit-clip-path: inset(9% 7% 9% 7% round var(--r-lg)); clip-path: inset(9% 7% 9% 7% round var(--r-lg)); }
.js-motion .fig[data-reveal] .frame img { -webkit-transform: scale(1.2); transform: scale(1.2); transition: -webkit-transform 1.9s var(--ease-out); transition: transform 1.9s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion .fig[data-reveal].is-in .frame { opacity: 1; -webkit-clip-path: inset(0 0 0 0 round var(--r-lg)); clip-path: inset(0 0 0 0 round var(--r-lg)); }
.js-motion .fig[data-reveal].is-in .frame img { -webkit-transform: none; transform: none; }
.js-motion .fig[data-reveal] figcaption { opacity: 0; transition: opacity 1s ease; transition-delay: .5s; transition-delay: calc(var(--d, 0s) + .5s); }
.js-motion .fig[data-reveal].is-in figcaption { opacity: 1; }
/* photographs that drift with the scroll skip the settle, so the drift never lags */
.js-motion .fig[data-reveal] .frame--parallax img, .js-motion .fig[data-reveal].is-in .frame--parallax img { -webkit-transform: none; transform: none; transition: none; }
/* hover zoom still works once a card has arrived */
@media (hover: hover) {
  .js-motion .card:hover .fig[data-reveal].is-in .frame img, .js-motion .journal-row:hover .fig[data-reveal].is-in .frame img { -webkit-transform: scale(1.045); transform: scale(1.045); transition-duration: 1.2s; }
}

/* the place badge arrives once the hero photograph has opened */
.js-motion .hero__main .hero__badge { opacity: 0; -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); transition: opacity .8s ease 1.1s, -webkit-transform .9s var(--ease-out) 1.1s; transition: opacity .8s ease 1.1s, transform .9s var(--ease-out) 1.1s; }
.js-motion .hero__main.is-in .hero__badge { opacity: 1; -webkit-transform: none; transform: none; }

/* the hero photograph breathes, very slowly */
.js-motion .hero__main.is-in .frame img { -webkit-animation: breathe 22s ease-in-out 2s infinite alternate; animation: breathe 22s ease-in-out 2s infinite alternate; }
@-webkit-keyframes breathe { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.07); } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.07); } }

/* headings rise word by word (hidden only for the instant before the script has split them) */
.js-motion [data-split] { opacity: 1; -webkit-transform: none; transform: none; }
.js-motion [data-split]:not(.is-split) { opacity: 0; }
.js-motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em .08em .24em 0; margin: -.24em -.08em -.24em 0; }   /* room for umlauts above and descenders below */
.js-motion [data-split] .w > span { display: inline-block; -webkit-transform: translate3d(0, 108%, 0); transform: translate3d(0, 108%, 0); transition: -webkit-transform 1.15s var(--ease-out); transition: transform 1.15s var(--ease-out); }
.js-motion [data-split].is-in .w > span { -webkit-transform: none; transform: none; }

/* the monogram draws its ring when a page opens */
.js-motion .masthead .mono__ring, .js-motion .gate .mono__ring { -webkit-animation: ring 1.8s var(--ease-out) .15s both; animation: ring 1.8s var(--ease-out) .15s both; }
.js-motion .masthead .mono__b, .js-motion .masthead .mono__i, .js-motion .gate .mono__b, .js-motion .gate .mono__i { -webkit-animation: mono-in 1.1s var(--ease-out) .35s both; animation: mono-in 1.1s var(--ease-out) .35s both; }
.js-motion .masthead .mono__i, .js-motion .gate .mono__i { -webkit-animation-delay: .5s; animation-delay: .5s; }
@-webkit-keyframes ring { from { stroke-dashoffset: 296; -webkit-transform: rotate(-90deg); } to { stroke-dashoffset: 0; -webkit-transform: none; } }
@keyframes ring { from { stroke-dashoffset: 296; transform: rotate(-90deg); } to { stroke-dashoffset: 0; transform: none; } }
.mono__ring { -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; }
@-webkit-keyframes mono-in { from { opacity: 0; -webkit-transform: translate3d(0, 8px, 0); } to { opacity: 1; -webkit-transform: none; } }
@keyframes mono-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* pages: each page settles in as it opens; browsers with view transitions cross-fade between pages instead */
.js-motion main { -webkit-animation: page-in .8s var(--ease-out) both; animation: page-in .8s var(--ease-out) both; }
@-webkit-keyframes page-in { from { opacity: 0; -webkit-transform: translate3d(0, 14px, 0); } to { opacity: 1; -webkit-transform: none; } }
@keyframes page-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.js-motion.is-leaving main, .js-motion.is-leaving .footer { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); transition: opacity .28s ease, -webkit-transform .28s ease; transition: opacity .28s ease, transform .28s ease; }
.vt.js-motion main { -webkit-animation: none; animation: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { -webkit-animation: vt-out .38s var(--ease-in-out) both; animation: vt-out .38s var(--ease-in-out) both; }
::view-transition-new(root) { -webkit-animation: vt-in .7s var(--ease-out) .08s both; animation: vt-in .7s var(--ease-out) .08s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { -webkit-animation-duration: .01ms !important; animation-duration: .01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- print: the site prints as a clean profile ---------- */

@media print {
  .masthead, .nav, .menu-btn, .next, .footer__cta, .footer__grid, .to-top, .skip, .marquee { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .night, .panel { background: #fff; color: #000; border-radius: 0; }
  .night .muted, .night .label, .night .num, .footer__base { color: #444; }
  .section, .area, .chapter, .cv, .panel { padding-top: 1.5rem; }
  .fig, .band { break-inside: avoid; max-width: 60%; }
  a { text-decoration: none; }
}