/* ============================================================================
   Nils Ettwein — Film & EB-Ton
   One stylesheet: tokens → base → layout → components.
   Fonts live in /fonts, images in /img (see the README in each).
   ========================================================================== */

/* --- Webfonts ------------------------------------------------------------ */
@font-face { font-family: Alegreya;           src: url("../fonts/alegreya-400.woff2")         format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: Alegreya;           src: url("../fonts/alegreya-700.woff2")         format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: "Source Sans Pro";  src: url("../fonts/source-sans-pro-400.woff2")  format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Source Sans Pro";  src: url("../fonts/source-sans-pro-700.woff2")  format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: "Amatic SC";        src: url("../fonts/amatic-sc-700.woff2")        format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: Oswald;             src: url("../fonts/oswald-700.woff2")           format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: Merriweather;       src: url("../fonts/merriweather-400.woff2")     format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: Quando;             src: url("../fonts/quando-400.woff2")           format("woff2"); font-weight: 400; font-display: swap }

/* --- Design tokens ------------------------------------------------------- */
:root {
  --ink: #151515;          /* dark surfaces, and text sitting on light ones */
  --paper: #f8f8f8;        /* page background, and text sitting on dark ones */
  --accent: #12cbc4;       /* headings on dark */
  --accent-deep: #077e7a;  /* headings on light */
  --action: #ff5722;       /* contact form accent + submit button */
  --muted: #888;

  --f-body: "Source Sans Pro", system-ui, sans-serif;
  --f-head: Alegreya, Georgia, serif;
  --f-display: "Amatic SC", var(--f-head);
  --f-brand: Oswald, var(--f-body);
  --f-footer: Merriweather, var(--f-head);
  --f-caption: Quando, var(--f-head);

  /* fluid type: one clamp replaces the theme's three breakpoint scales */
  --t-body: clamp(0.875rem, 0.761rem + 0.57vw, 1.125rem);
  --t-h1: clamp(2.188rem, 1.903rem + 1.42vw, 2.813rem);
  --t-h2: clamp(1.813rem, 1.585rem + 1.14vw, 2.313rem);
  --t-h3: clamp(1.500rem, 1.301rem + 0.99vw, 1.938rem);
  --t-h4: clamp(1.250rem, 1.080rem + 0.85vw, 1.625rem);
  --t-h5: clamp(1.000rem, 0.830rem + 0.85vw, 1.375rem);
  --t-h6: var(--t-body);
  --t-display: clamp(2.5rem, 2.045rem + 2.27vw, 3.5rem);

  --content: 960px;        /* the theme's content column */
  --bar: 112px;            /* header height, and the hero's top offset */
  --slant: 18px;           /* the theme's "edge18" angled section joins */
  --gap: 12px;
  --radius: 4px;
}

/* --- Base ---------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--paper);
  font: 400 var(--t-body)/1.5 var(--f-body);
  -webkit-text-size-adjust: 100%;
}
main { flex: 1 }

:is(h1, h2, h3, h4, h5, h6) { margin: 0; font: 400 1em/1.2 var(--f-head); color: var(--accent) }
h1 { font-size: var(--t-h1) } h2 { font-size: var(--t-h2) } h3 { font-size: var(--t-h3) }
h4 { font-size: var(--t-h4) } h5 { font-size: var(--t-h5) } h6 { font-size: var(--t-h6) }
:is(h5, h6) { color: var(--paper) }

:is(p, ul, ol) { margin: 0 }
ul { padding-inline-start: 1.25em }
img { display: block; max-width: 100%; height: auto }
a { color: inherit; text-underline-offset: .2em }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

/* --- Sections ------------------------------------------------------------
   Every band is a .sec. Its background sits on a ::before layer so the angled
   "slanted" joins can be clipped without touching the content. A slanted
   section cuts its bottom-right corner; the next section is pulled up by the
   same amount and cuts its top-left corner, so the two edges meet exactly. */
.sec {
  position: relative;
  isolation: isolate;
  padding: 64px max(16px, calc(50% - var(--content) / 2));
}
.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image: var(--img, none);
  background-position: var(--pos, 50% 50%);
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(0 var(--t, 0px), 100% 0, 100% calc(100% - var(--b, 0px)), 0 100%);
}
/* a slanted band cuts its bottom-right; the next one cuts its top-left */
.slant { --b: var(--slant) }
.slant + .sec { --t: var(--slant); margin-top: calc(-1 * var(--slant)) }

/* photo backgrounds: one class per image, all the theme's crops preserved */
.bg-home    { --img: linear-gradient(#15151580, #15151580), url("../img/hero.jpg");            --pos: 46% 39% }
.bg-about   { --img: linear-gradient(#15151599, #15151599), url("../img/about.jpg");           --pos: 41% 35% }
.bg-work    { --img: linear-gradient(#151515cc, #151515cc), url("../img/portfolio-hero.jpg");  --pos: 51% 14% }
.bg-imprint { --img: linear-gradient(#1515154d, #1515154d), url("../img/impressum-hero.jpg");  --pos: 50% 50% }
.bg-imprint::before { background-attachment: fixed }

/* stack of centred blocks — the theme's only content rhythm */
.stack { display: grid; gap: var(--gap); text-align: center }
.stack .btn { justify-self: center }
.left { text-align: start }
.h2 { font-size: var(--t-h2) }
.wide { --content: 1920px }

/* --- Header -------------------------------------------------------------- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--bar);
  padding: 8px max(16px, calc(50% - var(--content) / 2));
  transition: background-color .25s, color .25s;
}
.bar.stuck { background: var(--paper); color: var(--ink) }
.brand { font: 700 1.25rem/1.2 var(--f-brand); text-align: right }
.logo img { width: clamp(72px, 8vw, 124px) }

.bar :is(nav, .burger) { grid-area: 1 / 3 }
.bar nav { display: flex; gap: 32px; justify-self: start }
.bar nav a { text-decoration: none; padding: 4px 0 }
.bar nav a[aria-current] { box-shadow: inset 0 -1px currentcolor }

.burger { display: none; justify-self: end; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer }
.burger svg { width: 24px; fill: currentcolor }

/* --- Hero ---------------------------------------------------------------- */
.hero { display: grid; place-content: center; padding-top: calc(var(--bar) + 64px) }
.hero.tall { min-height: 100dvh }
.hero.deep { padding-block: calc(var(--bar) + 160px) 160px }
.hero :is(h1, h2, p) { color: var(--paper) }
.display { font-family: var(--f-display); font-weight: 700; font-size: var(--t-display) }
.display.sm { font-size: clamp(2rem, 1.773rem + 1.14vw, 2.5rem) }
.lead { font-family: var(--f-head); font-size: var(--t-h4) }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
}
.btn:hover { opacity: .9 }

/* --- Cards --------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: -200px;   /* the theme lifts the cards over the hero above */
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: clamp(24px, 4vw, 64px);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -16px 32px #0000001a;
  text-align: center;
}
.card h3 { color: var(--accent-deep); font-size: var(--t-h4) }
.card p { flex: 1 }

/* --- Prose (Über mich, Impressum) ---------------------------------------- */
.prose { display: grid; gap: 1em; text-align: start; font-family: var(--f-head); font-size: var(--t-h4) }
.panel {
  max-width: 600px;
  margin-inline: auto;
  padding: 40px;
  border-radius: 16px;
  background: var(--ink);
}
.panel .prose { font: inherit; text-align: center }

/* --- Contact form -------------------------------------------------------- */
.form { display: grid; gap: var(--gap); width: min(100%, 600px); margin-inline: auto; text-align: start }
.form label { font-size: .875rem }
.form :is(input[type=text], input[type=email], textarea) {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--action) 12%, transparent);
  color: var(--paper);
  font: inherit;
}
.form :is(input, textarea):focus-visible { border-color: var(--action); outline: none }
.form textarea { min-height: 10lh; resize: vertical }
.form .consent { display: flex; gap: 8px; align-items: start; font-size: .875rem }
.form button { background: var(--action); width: 100% }
.error { color: #ffb0b0; font-size: .875rem }
.ok { color: #aad3ab }
[hidden] { display: none !important }

/* --- Social icons -------------------------------------------------------- */
.social { display: flex; justify-content: center; gap: var(--gap) }
.social a { display: block }
.social svg { width: 32px; fill: currentcolor }
.social.lg svg { width: 40px }

/* --- Gallery ------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100% }
.gallery a { display: block; aspect-ratio: 1 }
.gallery img { width: 100%; height: 100%; object-fit: cover }
.caption { font-family: var(--f-caption) }
.note { color: var(--muted); font-size: .875rem }

/* lightbox */
dialog {
  max-width: 92vw;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  background: none;
}
dialog::backdrop { background: #151515e6 }
dialog img { max-height: 92dvh; width: auto }

/* --- Footer -------------------------------------------------------------- */
.foot {
  padding: 32px 16px;
  background: var(--ink);
  font-family: var(--f-footer);
  text-align: center;
}
.langs { display: flex; justify-content: center; gap: 8px; margin-top: var(--gap) }
.langs button {
  border: 0; padding: 4px 10px; border-radius: var(--radius);
  background: none; color: inherit; font: inherit; cursor: pointer; opacity: .6;
}
.langs button[aria-pressed=true] { background: #f8f8f81a; opacity: 1 }

/* --- Small screens ------------------------------------------------------- */
@media (width < 768px) {
  :root { --bar: 72px }
  .brand { font-size: 1rem }
  .burger { display: block }
  .bar nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--ink);
    color: var(--paper);
  }
  .bar nav[hidden] { display: none }
  .bar nav a { padding: 12px 0 }
  .cards { grid-template-columns: 1fr; margin-top: 0 }
  .gallery { grid-template-columns: repeat(2, 1fr) }
  .panel { padding: 24px }
}