/* Layout follows Eva's InDesign file 1:1. Desktop: every element sits where it is in the design, measured on a
   1168-unit-wide stage (--u = one design unit) so the whole page scales evenly. Phone: the same pieces stacked. */
@font-face { font-family: Panama; src: url(/fonts/Panama-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Panama; font-style: italic; src: url(/fonts/Panama-Iranic.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Acid Grotesk'; font-weight: 200; src: url(/fonts/FFF-AcidGrotesk-UltraLight.otf) format('opentype'); font-display: swap; }

* { box-sizing: border-box; }
:root { --paper: #ededed; --ink: #000; --pink: #ffa5ff; --grey: #2e2e2e; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: Panama, Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }

/* width follows the window height too: the top of the rocket (design y ≈ 722) shows without scrolling */
.stage { position: relative; width: min(100%, 1400px, 138vh); margin: 0 auto; container-type: inline-size;
  height: calc(1385 * var(--u)); --u: calc(100cqw / 1168); }
.stage > * { position: absolute; margin: 0; }
.sans { font-family: 'Acid Grotesk', Helvetica, sans-serif; }

.top-contact { right: calc(22 * var(--u)); top: calc(12 * var(--u)); font: 200 calc(18.25 * var(--u)) 'Acid Grotesk', Helvetica, sans-serif;
  letter-spacing: .02em; color: var(--grey); text-decoration: none; transition: color .2s; }
.top-contact:hover, .top-contact:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.masthead { left: 0; right: 0; top: calc(104 * var(--u)); text-align: center; }
.masthead h1 { font-weight: 400; font-size: calc(70.2 * var(--u)); letter-spacing: .05em; line-height: 1; margin: 0; }
.subtitle { font: 200 calc(18.25 * var(--u)) 'Acid Grotesk', Helvetica, sans-serif; letter-spacing: .02em; color: var(--grey);
  margin: calc(10 * var(--u)) 0 0; }

svg text { font-family: Panama, Georgia, serif; letter-spacing: .05em; }
.fun { left: calc(770 * var(--u)); top: calc(190 * var(--u)); width: calc(160 * var(--u)); overflow: visible; }
.fun text { font-size: 25px; fill: var(--ink); }

.portrait { left: calc(-60 * var(--u)); top: calc(225 * var(--u)); width: calc(490 * var(--u)); aspect-ratio: 1140 / 759; }
.portrait-shape { position: absolute; inset: 0; overflow: hidden; background: #c9c9c9;
  -webkit-mask: url(/assets/cloud-mask.png) 0 0 / 100% 100% no-repeat; mask: url(/assets/cloud-mask.png) 0 0 / 100% 100% no-repeat; }
/* same crop as the design: face a bit larger than the photo, eyes at about a third of the height */
.portrait-shape img { position: absolute; width: 104.7%; left: -2.1%; top: -8.2%; height: auto; display: block; }
.hello { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hello text { font-size: 35px; fill: #fff; }

.headline { left: calc(398 * var(--u)); width: calc(400 * var(--u)); top: calc(318 * var(--u)); text-align: center; font-weight: 400;
  font-size: calc(58.3 * var(--u)); line-height: .86; letter-spacing: .05em; }
.headline span { display: block; }
.headline .wavy { font-style: italic; }

.bio { left: calc(110 * var(--u)); width: calc(420 * var(--u)); top: calc(583 * var(--u)); text-align: center;
  font: 200 calc(18.25 * var(--u))/1.27 'Acid Grotesk', Helvetica, sans-serif; letter-spacing: .02em; color: var(--grey); }

.contact { left: calc(840 * var(--u)); top: calc(480 * var(--u)); width: calc(280 * var(--u)); aspect-ratio: 1400 / 975; text-decoration: none; }
.contact svg { width: 100%; height: 100%; overflow: visible; display: block; }
.contact .cloud { fill: var(--pink); transition: filter .2s; }
.contact text { font-size: 91px; fill: var(--ink); }
.contact .touch { font-size: 91px; }
.contact:hover .cloud, .contact:focus-visible .cloud { filter: brightness(.93) saturate(1.15); }
.contact:focus-visible { outline: none; }

.rocket { left: calc(228 * var(--u)); top: calc(722 * var(--u)); width: calc(632 * var(--u)); }
.rocket img { width: 100%; height: auto; display: block; }
.caption { left: 0; right: 0; top: calc(1262 * var(--u)); text-align: center; font-size: calc(42.6 * var(--u)); letter-spacing: .05em; }
.legal-link { left: 0; right: 0; top: calc(1338 * var(--u)); text-align: center; font: 200 calc(14 * var(--u)) 'Acid Grotesk', Helvetica, sans-serif;
  letter-spacing: .02em; color: var(--grey); text-decoration: none; }
.legal-link:hover, .legal-link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Impressum & Datenschutz: one quiet text column in the site's fonts */
.legal { max-width: 640px; margin: 0 auto; padding: 40px 20px 80px; font: 200 17px/1.5 'Acid Grotesk', Helvetica, sans-serif;
  letter-spacing: .02em; color: var(--grey); }
.legal h1 { font: 400 44px/1 Panama, Georgia, serif; letter-spacing: .05em; color: var(--ink); margin: 48px 0 6px; }
.legal h2 { font: 400 21px Panama, Georgia, serif; letter-spacing: .05em; color: var(--ink); margin: 30px 0 4px; }
.legal p { margin: 10px 0; }
.legal strong { font-weight: 200; color: var(--ink); }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal-back { text-decoration: none; }
.legal-note { font-size: 14px; }
.lines { white-space: pre-line; }
.inline-lines { white-space: normal; }
.missing { color: #c0392b; font-weight: 400; }

/* Stop motion (Eva: "so stop motion mäßig"): a few hand-placed poses that jump from one to the next, like frames
   of a stop-motion film — clouds at 4 frames a second, the rocket at 6. No smooth sliding in between. */
.boil { animation: boil 1.5s steps(1, end) infinite; transform-origin: 50% 60%; }
.boil-late { animation-delay: -.62s; }
@keyframes boil {
  0%      { transform: translate(0, 0) rotate(0deg); }
  16.66%  { transform: translate(2px, -1.5px) rotate(.6deg); }
  33.33%  { transform: translate(.5px, -3px) rotate(-.4deg); }
  50%     { transform: translate(-1.5px, -2px) rotate(.45deg); }
  66.66%  { transform: translate(-2.5px, 0) rotate(-.6deg); }
  83.33%  { transform: translate(-.5px, 1.5px) rotate(.25deg); }
}
.boil-rocket { animation: rocket 2s steps(1, end) infinite; transform-origin: 45% 55%; }
@keyframes rocket {
  0%      { transform: translate(0, 0) rotate(-.8deg); }
  8.33%   { transform: translate(3px, -3px) rotate(.2deg); }
  16.66%  { transform: translate(7px, -6px) rotate(-.3deg); }
  25%     { transform: translate(10px, -10px) rotate(.9deg); }
  33.33%  { transform: translate(14px, -13px) rotate(.1deg); }
  41.66%  { transform: translate(17px, -17px) rotate(1.1deg); }
  50%     { transform: translate(19px, -19px) rotate(.4deg); }
  58.33%  { transform: translate(16px, -15px) rotate(-.4deg); }
  66.66%  { transform: translate(12px, -11px) rotate(.6deg); }
  75%     { transform: translate(8px, -7px) rotate(-.6deg); }
  83.33%  { transform: translate(4px, -4px) rotate(.3deg); }
  91.66%  { transform: translate(1px, -1px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) { .boil, .boil-rocket { animation: none; } }

/* Phone: one column, same pieces, same order as you read the design */
@media (max-width: 700px) {
  .stage { height: auto; container-type: normal; padding: 0 16px 48px; display: flex; flex-direction: column; align-items: center; }
  .stage > * { position: relative; left: auto; right: auto; top: auto; }
  .top-contact { align-self: flex-end; margin-top: 14px; font-size: 13px; }
  .masthead { margin-top: 44px; }
  .masthead h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .subtitle { font-size: 13px; margin-top: 8px; }
  .fun { align-self: flex-end; width: 120px; margin: 6px 4% 0 0; }
  .portrait { align-self: flex-start; width: 88%; margin-left: -16px; margin-top: 4px; }
  .headline { width: 100%; margin-top: 28px; font-size: clamp(36px, 11vw, 48px); }
  .bio { width: 100%; max-width: 360px; margin-top: 26px; font-size: 15px; }
  .contact { align-self: flex-end; width: 78%; max-width: 300px; margin-top: 30px; }
  .rocket { width: 100%; max-width: 480px; margin-top: 30px; }
  .caption { margin-top: 10px; font-size: 32px; }
  .legal-link { margin-top: 26px; font-size: 13px; }
}