/* bosbach.studio business card. Start page: the portrait of Caroline from page 1 of the BOSBACH brand guide (Nic, 28.10.2026)
   over the whole viewport, the wordmark small in warm white on the aubergine wall (Jonas' choice of 28.10.2026, then /2/).
   Sharp edges, no gradients, no overlays. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/BodoniModa-opsz.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --warm-white: #f4f1ea;
  --aubergine: #50364d;
  --teal: #6c9994;
  --taupe: #a99886;
  --sand: #e4d3be;
  --brown: #292017;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Figtree", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --edge: clamp(24px, 4.9vw, 96px);   /* page 1: wordmark starts at 4.9 % of the width */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--warm-white); color: var(--brown); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--aubergine); }
:focus-visible { outline: 2px solid var(--aubergine); outline-offset: 4px; }

/* Start page: one viewport, the photo over all of it */

html:has(.home) { background: var(--aubergine); }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: var(--aubergine); }
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 66% 28%; }
.home { --mark-w: clamp(140px, 16vw, 250px); --mark-top: calc(clamp(28px, 6vh, 60px) + env(safe-area-inset-top)); }
.hero-mark { position: absolute; z-index: 1; margin: 0; left: var(--edge); top: var(--mark-top); }
.hero-mark img { width: var(--mark-w); height: auto; }
@media (min-aspect-ratio: 1 / 1) {
  .hero-photo img { object-position: 70% 22%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img, .hero-mark img { animation: arrive 1.4s ease-out both; }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
}

/* Menu on the start page: the pattern of the agrippina.io coming-soon page in the BOSBACH palette. Two lines top right,
   level with the wordmark; warm white on the wall and hair (upright screens), aubergine on the cream pillar of the photo
   (landscape). Without JavaScript the toggle stays hidden and the menu shows as plain links in the same corner. */

.menu-bar { position: absolute; z-index: 3; top: 0; right: 0; }
.menu { position: absolute; top: calc(var(--mark-top) - 6px); right: var(--edge); }
.menu ul { margin: 0; padding: 0; list-style: none; text-align: right; }
.menu a { display: inline-block; padding-block: 10px; font-size: 0.8125rem; color: var(--warm-white); text-decoration: none; }
.menu-toggle { display: none; }
@media (min-aspect-ratio: 1 / 1) {
  .menu a { color: var(--aubergine); }
}

.js .menu-toggle {
  --line-long: 22px;
  --line-short: 15px;
  --line-gap: 6px;
  position: fixed;
  z-index: 3;
  top: calc(var(--mark-top) + var(--mark-w) * 0.095 - 24px);
  top: round(nearest, calc(var(--mark-top) + var(--mark-w) * 0.095 - 24px), 1px); /* whole pixels keep both lines equally sharp */
  right: calc(var(--edge) - 12px);
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--warm-white);
  cursor: pointer;
}
.menu-line {
  position: absolute;
  right: 12px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu-line--long { top: 20px; width: var(--line-long); }
.menu-line--short { top: 26px; width: var(--line-short); }
.menu-open .menu-line--long { width: var(--line-long); transform: translateY(calc(var(--line-gap) / 2)) rotate(-45deg); }
.menu-open .menu-line--short { width: var(--line-long); transform: translateY(calc(var(--line-gap) / -2)) rotate(45deg); }
@media (min-aspect-ratio: 1 / 1) {
  .js .menu-toggle { color: var(--aubergine); }
}
.js.menu-open .menu-toggle { color: var(--warm-white); }
.menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.js .menu {
  position: fixed;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(80, 54, 77, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.js .menu[hidden] { display: none; }
.js .menu ul { display: grid; gap: clamp(12px, 2.5vh, 24px); justify-items: center; text-align: center; }
.js .menu.is-visible { opacity: 1; }
.js .menu a {
  padding: 10px 4px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-variation-settings: "opsz" 48;
  color: var(--warm-white);
  text-decoration: underline 1px transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.35s ease;
}
.js .menu a:hover { text-decoration-color: currentColor; }
.js .menu a:focus-visible { outline: 1px solid var(--warm-white); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .menu-line, .js .menu, .js .menu a { transition: none; }
}

/* Impressum and 404 */

.page { max-width: 46rem; padding: calc(36px + env(safe-area-inset-top)) var(--edge) calc(48px + env(safe-area-inset-bottom)); }
.page-head img { width: 168px; height: auto; }
.page-main { padding-top: 64px; }
.page-main h1, .page-main .part { margin: 0 0 2.25rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1.1; font-variation-settings: "opsz" 60; }
.page-main .part { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--sand); font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem); }
.page-main h2:not(.part), .page-main h3 { margin: 2rem 0 0.5rem; font-family: var(--serif); font-weight: 500; font-size: 1.3125rem; line-height: 1.3; font-variation-settings: "opsz" 24; color: var(--aubergine); }
.page-main p { margin: 0 0 1rem; max-width: 38em; }