/* inspAIred studio — the magazine on near black. Shared look for all five sites: soft black paper, light from above, big type.
   inspAIred Display (a Latin subset of TeX Gyre Adventor, from the Avant Garde family of magazine type) for headlines,
   Manrope for text and interface, Poppins for the wordmark only. */

@font-face { font-family: 'inspAIred Display'; src: url('/assets/fonts/inspaired-display-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'inspAIred Display'; src: url('/assets/fonts/inspaired-display-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'inspAIred Display'; src: url('/assets/fonts/inspaired-display-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'inspAIred Display'; src: url('/assets/fonts/inspaired-display-bolditalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --night: #141414; --night-2: #191919; --panel: #1f1f1f; --panel-2: #262626;
  --ink: #ece8e1; --ink-2: #bcb7af; --ink-3: #8e8982;
  --line: rgba(236, 232, 225, .12); --line-2: rgba(236, 232, 225, .26);
  --azure: #0081fe; --azure-ink: #5eaaff; --navy: #003a9f;
  --rose: #ff4fa3; --amber: #ffae2b; --jade: #19c39a;
  --area: var(--azure-ink); --area-rgb: 0 129 254; --area-ink: #d7e6ff;
  --display: 'inspAIred Display', 'Century Gothic', 'URW Gothic', 'Avant Garde', Futura, system-ui, sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand: 'Poppins', var(--sans);
  --typewriter: 'Courier Prime', 'Courier New', Courier, ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.34, 1.45, .55, 1);
  --wrap: 1240px; --gut: clamp(18px, 4.2vw, 44px);
  --sec: clamp(84px, 11vw, 168px);
  color-scheme: dark;
}
.area-books { --area: var(--rose); --area-rgb: 255 79 163; --area-ink: #ffd5ea; }
.area-music { --area: var(--amber); --area-rgb: 255 174 43; --area-ink: #ffe7c2; }
.area-projects { --area: var(--jade); --area-rgb: 25 195 154; --area-ink: #c9f5e8; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; background: var(--night); }
body { margin: 0; min-height: 100vh; background: var(--night); color: var(--ink); font: 400 1.0625rem/1.68 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.6rem, 6vw, 6rem); line-height: .92; letter-spacing: -.045em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 4.3rem); line-height: .95; letter-spacing: -.042em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.04; letter-spacing: -.028em; }
h4 { letter-spacing: -.018em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgb(var(--area-rgb) / .5); color: #fff; }
:focus-visible { outline: 2px solid var(--area); outline-offset: 3px; border-radius: 4px; }
.ai { font-weight: bolder; }
[hidden] { display: none !important; }
.sr, .fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--night); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
main { display: block; position: relative; }

/* film grain over everything (cheap: one tiled image that jumps between positions) */
.grain { position: fixed; inset: -120px; z-index: 300; pointer-events: none; background: url('/assets/art/grain.png'); opacity: .05; animation: grain 1.1s steps(7) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 15% { transform: translate(-37px, 22px); } 30% { transform: translate(18px, -41px); } 45% { transform: translate(-11px, 53px); }
  60% { transform: translate(46px, 9px); } 75% { transform: translate(-52px, -17px); } 90% { transform: translate(23px, 38px); } 100% { transform: translate(0, 0); } }

/* light from above: every chapter is lit like a stage, in the colour of its area */
.lit { position: relative; isolation: isolate; }
.lit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(100%, 980px); z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% -6%, rgb(var(--area-rgb) / .19), transparent 72%),
    conic-gradient(from 151deg at 50% -14%, transparent 0deg, rgb(255 255 255 / .035) 7deg, transparent 13deg, transparent 19deg, rgb(var(--area-rgb) / .06) 25deg, transparent 32deg,
      transparent 37deg, rgb(255 255 255 / .028) 42deg, transparent 47deg, transparent 52deg, rgb(var(--area-rgb) / .045) 56deg, transparent 60deg);
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 34%, transparent 96%); mask: linear-gradient(transparent, #000 14%, #000 34%, transparent 96%); }
.lit-left::before { background: radial-gradient(48% 62% at 18% -8%, rgb(var(--area-rgb) / .18), transparent 72%),
    conic-gradient(from 160deg at 20% -14%, transparent 0deg, rgb(255 255 255 / .035) 6deg, transparent 12deg, transparent 18deg, rgb(var(--area-rgb) / .06) 24deg, transparent 31deg, transparent 38deg, rgb(255 255 255 / .025) 43deg, transparent 48deg); }

/* ---------------------------------------------------------------- type helpers */
/* a department label: the area's planet, then its name */
.kicker { margin: 0 0 18px; font: 700 clamp(.98rem, 1.2vw, 1.08rem)/1.25 var(--display); letter-spacing: -.012em; color: var(--area); }
.kicker::before { content: ""; display: inline-block; width: .52em; height: .52em; margin-right: .6em; vertical-align: .06em; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
/* the running head of a page, as in a magazine: department on the left, a fact on the right */
.folio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin: 0 0 clamp(28px, 4vw, 52px); padding-bottom: 13px; border-bottom: 1px solid var(--line-2); }
.folio > * { margin: 0; }
.folio-dept { font: 700 clamp(1.05rem, 1.35vw, 1.22rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--area); }
.folio-dept::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; vertical-align: .08em; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.folio-note { font: 600 .9rem/1.35 var(--sans); color: var(--ink-3); }
.lead { font-size: clamp(1.08rem, 1.42vw, 1.22rem); line-height: 1.62; color: var(--ink-2); max-width: 36em; }
.deck { font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.36 var(--display); letter-spacing: -.018em; color: var(--ink-2); max-width: 30em; }
.dropcap::first-letter { float: left; margin: .06em .1em -.1em 0; font: 700 3.9em/.8 var(--display); letter-spacing: -.04em; color: var(--area); }
.lit-ink { --ink-grad: linear-gradient(180deg, #f7f4ef 22%, var(--area-ink) 68%, rgb(var(--area-rgb) / .9) 124%);
  background: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lit-ink .fx-l, .lit-ink .ai { background: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the painted area must reach past the line box: the face's capitals, umlauts and descenders stand outside it */
.lit-ink { padding-top: .14em; margin-top: -.14em; padding-bottom: .12em; }
.lit-ink .fx-l, .mail .fx-l { padding: .14em 0 .2em; margin: -.14em 0 -.2em; }
.lit-ink.fx-split, .lit-ink .fx-vis, .lit-ink .fx-w, .mail.fx-split { background: none; }
.muted { color: var(--ink-3); }
.tlink { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: rgb(var(--area-rgb) / .55); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.tlink:hover { text-decoration-color: var(--area); }
.ext::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .15em; opacity: .65; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1.5 8.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1.5 8.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .85em 1.45em; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: 700 .95rem/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: none; color: var(--ink);
  transition: transform .35s var(--spring), box-shadow .35s var(--ease), background-color .25s, border-color .25s, color .25s; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); transition: transform .7s var(--ease); }
.btn:hover::before { transform: translateX(120%) skewX(-18deg); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--area); color: #141210; box-shadow: 0 14px 34px -16px rgb(var(--area-rgb) / .75), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-primary:hover { box-shadow: 0 18px 44px -14px rgb(var(--area-rgb) / .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-quiet { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.btn-quiet::before { background: linear-gradient(90deg, transparent, rgb(var(--area-rgb) / .28), transparent); }
.btn-quiet:hover { border-color: rgb(var(--area-rgb) / .8); }
.btn.ext::after { margin-left: -1px; }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; color: var(--ink);
  border: 1px solid var(--line-2); background: rgba(28, 28, 28, .78); transition: transform .3s var(--spring), border-color .2s, background-color .2s; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { transform: scale(1.08); border-color: var(--area); }
.icon-btn:focus-visible { outline: 2px solid var(--area); outline-offset: 3px; }

/* ---------------------------------------------------------------- masthead */
.mast { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--line); }
/* the blur sits on its own layer: a backdrop-filter on the header itself would trap the fixed phone menu inside it */
.mast::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 20, 20, .93), rgba(20, 20, 20, .76));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--area-rgb) / .7), transparent); opacity: .6; }
.mast-in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 30px); min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 1.1rem/1 var(--brand); letter-spacing: -.012em; white-space: nowrap; }
.brand img { width: 36px; height: 36px; transition: transform .8s var(--spring); }
.brand:hover img { transform: rotate(-12deg) scale(1.08); }
.brand b { color: var(--azure-ink); font-weight: 700; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { position: relative; padding: 12px 14px; color: var(--ink-2); text-decoration: none; font: 600 .97rem/1 var(--sans); letter-spacing: .005em; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--c, var(--area)); box-shadow: 0 0 12px var(--c, var(--area));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[data-area="books"] { --c: var(--rose); } .nav a[data-area="music"] { --c: var(--amber); } .nav a[data-area="projects"] { --c: var(--jade); } .nav a[data-area="me"] { --c: var(--azure-ink); }
.nav .nav-extra { display: none; }
.langs { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.langs a { min-width: 38px; padding: 8px 10px; border-radius: 999px; text-align: center; font: 800 .74rem/1 var(--sans); letter-spacing: .06em; color: var(--ink-3); text-decoration: none; transition: color .2s, background-color .2s; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { background: var(--ink); color: var(--night); }
.burger { display: none; position: relative; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; }
.burger span:not(.sr) { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; order: 3; }
  .langs { order: 2; margin-left: auto; }
  .nav { position: fixed; inset: 70px 0 0; z-index: 79; margin: 0; padding: 34px var(--gut) 60px; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: radial-gradient(90% 60% at 50% 0%, rgb(var(--area-rgb) / .16), transparent 70%), var(--night); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .nav::before { content: attr(data-title); display: block; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); font: 700 1.05rem/1 var(--display); letter-spacing: -.01em; color: var(--ink-3); }
  .nav a { padding: 16px 0 14px; border-bottom: 1px solid var(--line); font: 700 clamp(2.1rem, 10vw, 3rem)/1 var(--display); letter-spacing: -.045em; color: var(--ink); }
  .nav a::after { left: 0; right: auto; width: 60px; bottom: -1px; }
  .nav .nav-extra { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 26px; border: 0; }
  .nav .nav-extra a { padding: 0; border: 0; font: 600 1rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink-2); }
  .nav .nav-extra a::after { display: none; }
}
@media (max-width: 420px) { .brand { font-size: 1rem; } .brand img { width: 32px; height: 32px; } .langs a { min-width: 34px; padding: 8px 8px; } }

/* ---------------------------------------------------------------- sections */
.sec { padding: var(--sec) 0; position: relative; }
/* a section opens like a magazine department: a heavy rule, then the headline */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5.4vw, 72px);
  padding-top: clamp(16px, 1.8vw, 24px); border-top: 2px solid rgba(236, 232, 225, .78); }
.sec-head > p { color: var(--ink-2); max-width: 32em; margin: 0; }
.sec-head > div:only-child { grid-column: 1 / -1; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; } }
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); }

/* ---------------------------------------------------------------- text effects (run by art.js; without script the text simply stands) */
[data-fx~="stars"] { opacity: 0; animation: fxShow .01s 2.2s forwards; }
@keyframes fxShow { to { opacity: 1; } }
.fx-vis { display: inline; }
.fx-w { display: inline-block; white-space: nowrap; }
.fx-l { display: inline-block; will-change: auto; }
.fx-stars:not(.fx-done) .fx-l { opacity: 0; }
.fx-stars.fx-go .fx-l { animation: fxStar 1.6s cubic-bezier(.14, .82, .22, 1) both; animation-delay: var(--d, 0s); }
@keyframes fxStar {
  0% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(.06) rotate(var(--r, 0deg)); filter: blur(2px) brightness(5); }
  18% { opacity: 1; }
  62% { filter: blur(0) brightness(1.7); }
  100% { opacity: 1; transform: none; filter: none; }
}
.fx-stars.fx-go .fx-l::before { content: ""; position: absolute; left: 50%; top: 52%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 12px 4px rgb(var(--area-rgb) / .9), 0 0 30px 8px rgba(255, 255, 255, .45); animation: fxSpark 1.6s ease-out both; animation-delay: var(--d, 0s); pointer-events: none; }
.fx-stars .fx-l { position: relative; }
@keyframes fxSpark { 0% { opacity: 1; transform: scale(1.4); } 55% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(0); } }
.fx-done .fx-l::before { display: none; }
.fx-stars.fx-done .fx-l { animation: none; }
/* the pointer lifts the letters it passes, like a wave running through the line */
.fx-wave .fx-l { transform: translateY(calc(var(--k, 0) * -.17em)) rotate(calc(var(--k, 0) * var(--tw, 0deg))); transition: transform .4s var(--spring); }
.fx-dec { font-variant-numeric: tabular-nums; }
.fx-caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.fx-flap .fx-l { transform-origin: 50% 55%; }
.fx-flap .fx-l.flip { animation: flap .11s linear; }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(88deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
.marquee { --speed: 60s; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--speed) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex: 0 0 auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* a soft light follows the pointer on surfaces marked .spot */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .08), transparent 60%); }
.spot:hover::after { opacity: 1; }

/* dust in a beam of light (canvas added by art.js) */
.dust-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ---------------------------------------------------------------- official profiles: a constellation */
.constellation { position: relative; }
.cn-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cn-lines line { stroke: rgba(236, 232, 225, .22); stroke-width: 1; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.6s var(--ease), stroke .3s; }
.constellation.in .cn-lines line { stroke-dashoffset: 0; }
.cn-lines line.hot { stroke: var(--area); stroke-width: 1.4; }
.profiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.profiles a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 18px 18px 18px 16px; text-decoration: none; color: var(--ink);
  border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: border-color .3s, transform .4s var(--spring), background-color .3s; }
.profiles a:hover { border-color: rgb(var(--area-rgb) / .7); transform: translateY(-3px); }
.profiles .pi { grid-row: 1 / span 2; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 70%);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 0 rgb(var(--area-rgb) / 0); transition: box-shadow .4s; }
.profiles a:hover .pi { box-shadow: 0 0 0 1px var(--area), 0 0 26px rgb(var(--area-rgb) / .5); }
.profiles .pi svg { width: 20px; height: 20px; fill: currentColor; }
.profiles b { font: 700 1.02rem/1.25 var(--display); letter-spacing: -.015em; }
.profiles .h { font-size: .86rem; color: var(--ink-3); overflow-wrap: anywhere; }
@media (min-width: 1000px) {
  .constellation.sky { min-height: 460px; }
  .constellation.sky .profiles { display: block; height: 460px; }
  .constellation.sky .profiles li { position: absolute; left: var(--x); top: var(--y); transform: translate(-22px, -22px); }
  .constellation.sky .profiles a { display: grid; grid-template-columns: auto auto; padding: 0; border: 0; background: none; border-radius: 0; }
  .constellation.sky .profiles a:hover { transform: none; }
  .constellation.sky .profiles .pi { background: radial-gradient(circle at 40% 35%, #fff 0 8%, rgb(var(--area-rgb) / .45) 22%, rgba(22, 22, 22, .92) 60%); color: #fff; }
  .constellation.sky .profiles .pi::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--area-rgb) / .3), transparent 65%); opacity: .55; transition: opacity .4s, transform .6s var(--ease); }
  .constellation.sky .profiles a:hover .pi::after { opacity: 1; transform: scale(1.35); }
  .constellation.sky .profiles .pi svg { position: relative; z-index: 1; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .7)); }
  .constellation.sky .profiles b { align-self: end; font: 700 1.16rem/1.05 var(--display); letter-spacing: -.025em; }
  .constellation.sky .profiles .h { align-self: start; }
}
@media (max-width: 999px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .profiles { grid-template-columns: minmax(0, 1fr); } }
.official-note { margin-top: 28px; font-size: .95rem; color: var(--ink-3); max-width: 60em; }

/* ---------------------------------------------------------------- the sky behind the profiles */
.sky-sec { background:
  radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 28% 78%, rgba(255, 255, 255, .45), transparent),
  radial-gradient(1.5px 1.5px at 44% 38%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 61% 86%, rgba(255, 255, 255, .45), transparent),
  radial-gradient(1px 1px at 73% 14%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.5px 1.5px at 88% 52%, rgba(255, 255, 255, .45), transparent),
  radial-gradient(1px 1px at 94% 90%, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 6% 64%, rgba(255, 255, 255, .45), transparent),
  radial-gradient(60% 40% at 50% 62%, rgb(var(--area-rgb) / .07), transparent 70%); }

/* figure captions under the objects: a short rule, then the line in the oblique */
.caption::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: .32em; background: currentColor; }

/* a pull quote: set in the oblique, hung on a bar in the area colour */
.pullquote { margin: 26px 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--area); }
.pullquote p { margin: 0; font: italic 400 clamp(1.32rem, 2vw, 1.72rem)/1.34 var(--display); letter-spacing: -.016em; color: var(--ink); }

/* ---------------------------------------------------------------- letters (contact) */
.contact { padding: var(--sec) 0 calc(var(--sec) * .8); text-align: center; }
.contact .kicker, .contact p.kicker { margin: 0 0 18px; max-width: none; color: var(--area); }
.contact .kicker::before { display: none; }
.contact .kicker::after { content: ""; display: block; width: 44px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: currentColor; }
.contact h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); margin-bottom: 18px; }
.contact p { color: var(--ink-2); max-width: 34em; margin: 0 auto 30px; }
.mail { display: inline-block; max-width: 100%; margin-bottom: 34px; color: var(--ink); text-decoration: none; font: 400 clamp(1.55rem, 5.6vw, 5rem)/1.08 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #f7f4ef 30%, var(--area-ink) 75%, rgb(var(--area-rgb)) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mail .fx-l { background: linear-gradient(180deg, #f7f4ef 30%, var(--area-ink) 75%, rgb(var(--area-rgb)) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mail:hover { filter: drop-shadow(0 0 22px rgb(var(--area-rgb) / .3)); }
.contact .actions { justify-content: center; }

/* ---------------------------------------------------------------- colophon (footer) */
.colophon { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) 0 28px; border-top: 1px solid var(--line);
  background: radial-gradient(70% 90% at 50% 120%, rgb(var(--area-rgb) / .12), transparent 70%), var(--night); }
.col-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 34px clamp(24px, 4vw, 60px); }
.col-brand { display: flex; gap: 16px; align-items: flex-start; }
.col-brand img { width: 52px; height: 52px; flex: 0 0 auto; }
.col-brand p { margin: 0; color: var(--ink-2); font-size: .97rem; max-width: 22em; }
.col-brand b { color: var(--ink); font: 700 1.05rem/1.6 var(--brand); }
.colophon h2 { margin-bottom: 14px; font: 700 1.02rem/1 var(--display); letter-spacing: -.012em; color: var(--area); }
.colophon nav a { display: block; width: fit-content; padding: 6px 0; color: var(--ink-2); text-decoration: none; transition: color .2s, transform .3s var(--ease); }
.colophon nav a:hover { color: var(--ink); transform: translateX(4px); }
.icons { display: flex; flex-wrap: wrap; gap: 8px; max-width: 220px; }
.icons a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); transition: color .2s, border-color .2s, transform .3s var(--spring); }
.icons a:hover { color: var(--ink); border-color: var(--area); transform: translateY(-3px); }
.icons svg { width: 18px; height: 18px; fill: currentColor; }
.col-giant { margin: clamp(40px, 6vw, 80px) 0 clamp(18px, 2vw, 26px); font: 700 clamp(2.6rem, 12.4vw, 11.4rem)/.84 var(--display); letter-spacing: -.06em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 225, .22); user-select: none;
  background: radial-gradient(28% 120% at var(--gx, 50%) 50%, rgb(var(--area-rgb) / .85), rgb(var(--area-rgb) / 0) 70%); -webkit-background-clip: text; background-clip: text; }
.col-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); }
.col-base a { color: var(--ink-2); text-decoration: none; }
.col-base a:hover { color: var(--ink); }
.col-credits { flex-basis: 100%; order: 3; margin: 0; font-size: .84rem; color: var(--ink-3); }
@media (max-width: 900px) { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .col-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .col-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- questions and answers */
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line-2); }
.faq-list summary { position: relative; display: block; padding: 22px 52px 22px 0; cursor: pointer; list-style: none; font: 700 clamp(1.12rem, 1.6vw, 1.32rem)/1.28 var(--display); letter-spacing: -.02em; transition: color .2s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; margin-top: -9px; border-right: 2px solid var(--area); border-bottom: 2px solid var(--area);
  transform: rotate(45deg); transition: transform .4s var(--spring); }
.faq-list details[open] summary::after { transform: rotate(225deg); }
.faq-list summary:hover { color: var(--area-ink); }
.faq-list details p { margin: 0 0 26px; color: var(--ink-2); max-width: 44em; }

/* ---------------------------------------------------------------- legal pages and 404 */
.legal { padding: clamp(60px, 8vw, 110px) 0 var(--sec); }
.legal .wrap { max-width: 860px; }
.legal h1 { font-size: clamp(1.85rem, 5.4vw, 4.4rem); margin-bottom: 28px; }
html[lang="de"] .legal h1, html[lang="de"] .legal h2 { -webkit-hyphens: auto; hyphens: auto; }
.legal h2 { font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.05; margin: 52px 0 14px; }
@media (max-width: 420px) { .legal h1 { font-size: 8.2vw; } .legal h2 { font-size: 5.9vw; } }
.legal h3 { font-size: 1.22rem; margin: 30px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.legal a { color: var(--ink); text-decoration-color: rgb(var(--area-rgb) / .6); text-underline-offset: .2em; }
.legal a:hover { text-decoration-color: var(--area); }
.legal .btn { background: var(--area); color: #141210; margin: 6px 8px 6px 0; }
.legal .btn.secondary { background: rgba(255, 255, 255, .03); color: var(--ink); border-color: var(--line-2); }
.legal .panel { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); margin: 26px 0; }
.legal .panel h2:first-child { margin-top: 0; }
.legal .hero-label { margin-bottom: 14px; font: 700 clamp(1rem, 1.3vw, 1.12rem)/1.2 var(--display); letter-spacing: -.012em; color: var(--area); }
.legal address { font-style: normal; color: var(--ink-2); margin-bottom: 1em; }
.legal .small { font-size: .92rem; color: var(--ink-3); }
.legal .eyebrow, .legal .kicker { color: var(--area); }
.lost { padding: clamp(90px, 14vw, 200px) 0; text-align: center; }
.lost h1 { margin: 10px auto 22px; max-width: 12ch; }
.lost .lead { margin: 0 auto 34px; }
.lost .actions { justify-content: center; }
.lost-404 { font: 700 clamp(6rem, 22vw, 16rem)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgb(var(--area-rgb) / .7); display: block; animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(12px, -14px) rotate(-3deg); } }

/* ---------------------------------------------------------------- reveal (used sparingly: figures settle into place once) */
.js .settle:not(.in) { opacity: 0; transform: translateY(26px) scale(.985); }
.settle { transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain { animation: none; }
  .js .settle:not(.in) { opacity: 1; transform: none; }
  .fx-stars:not(.fx-done) .fx-l, [data-fx~="stars"] { opacity: 1; animation: none; }
}
@media print { .grain, .mast, .colophon, canvas { display: none !important; } body { background: #fff; color: #000; } }