/* diebirke.org: the one stylesheet of all twelve pages (#6, direction A "Hell und ruhig").
   White, the section photos in a band beside the page title, brand red as the one accent.
   System fonts only: no page loads a font or anything else from another host.

   Layout, from the top: .site-header (logo, main menu) | .layout: main.content (.band with the
   h1 and the section photo, nav.subnav, the page's text) beside aside.sidebar (.card blocks) |
   .site-footer (copyright, legal links). Below 60rem the sidebar's cards follow the text, the
   counselling card first; below 40rem the header and the band are compact. */

:root {
  --bg: #fff;
  --surface: #fff;
  --band: #f3f4f6;
  --tint: #fbefef;
  --text: #1f2933;
  --line: #e4e7eb;
  --link: #a3121a;
  --accent: #c4161c;
  --btn: #a3121a;
  --btn-hover: #7f0e14;
  --focus: #1d4ed8;
  --footer-bg: #1f2933;
  --footer-text: #f3f4f6;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 var(--font);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header: the logo and the main menu */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand { display: block; }
.brand img { display: block; width: 140px; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.nav a {
  display: block;
  padding: .5rem .85rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.nav a:hover { background: var(--band); }
.nav a[aria-current] { background: var(--btn); color: #fff; }

/* The page: text beside the sidebar */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 3.5rem;
  align-items: start;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}
.content { min-width: 0; }

/* The photo band: the page title on the left, the section photo fading in on the right. Title and
   photo share the band 55 : 45 and never overlap, so the title always sits on the plain grey; a long
   word keeps its width and the photo gives way. The photo runs to the band's top, right and bottom.
   The fade is a fixed 4rem at the photo's left edge, and each photo is shifted so that its faces sit
   in the unfaded part: --shift centres the faces between the fade and the right edge (it is
   2rem + 225px minus the faces' centre in the 450 px crop), and the clamp keeps the photo covering
   its box, so a narrow photo is never shifted off its edge. */
.band {
  display: flex;
  align-items: center;
  min-height: 180px;
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--band);
  border-radius: 20px;
  overflow: hidden;
}
.band h1 { flex: 55 1 0; margin: 0; }
.band-photo {
  flex: 45 1 0;
  align-self: stretch;
  min-width: 0;
  max-width: 450px;
  height: auto;
  margin: -1.5rem -1.75rem -1.5rem 1rem;
  object-fit: cover;
  object-position: clamp(100%, calc(50% + var(--shift, 0px)), 0%) center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem);
  mask-image: linear-gradient(90deg, transparent, #000 4rem);
}
/* The faces in each crop, in its 450 px: woman 165-335; two women 165-410; child 120-275;
   baby 205-360 with its hand; newborn 140-350 */
.band-photo[src$="hero-bg-header.jpg"] { --shift: 7px; }
.band-photo[src$="hero-header_3.jpg"] { --shift: -30px; }
.band-photo[src$="hero-header_5.jpg"] { --shift: 60px; }
.band-photo[src$="hero-header_6.jpg"] { --shift: -25px; }
.band-photo[src$="hero-header_7.jpg"] { --shift: 12px; }

h1, h2 { color: var(--text); line-height: 1.2; text-wrap: balance; }
h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
  /* Titles break between words only, and a short word stays with the next one (.keep, in the page) */
  hyphens: manual;
  text-wrap: pretty;
}
h1 .keep { white-space: nowrap; }
.content h2 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
.content p, .content ul, .content form, .content blockquote { margin: 0 0 1.1rem; }

/* The section's sub-menu */
.subnav ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.subnav a {
  display: block;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  text-decoration: none;
}
.subnav a:hover { border-color: var(--link); }
.subnav a[aria-current] { border-color: var(--btn); color: var(--btn); font-weight: 600; }

/* Blocks in the page's text */
.pillars { list-style: none; padding: 0; display: grid; gap: .75rem; }
.pillars li {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.callout { padding: 1.25rem 1.5rem; background: var(--tint); border-radius: var(--radius); }
.partner { margin-top: 2rem; }
.account {
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.option { border-top: 1px solid var(--line); padding: 1.5rem 0 .25rem; }
.quote { margin-left: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--accent); }
.quote p { margin: 0; }
.content h2.quote-name { font-size: 1.15rem; margin: 2rem 0 .5rem; }

/* The one button style (#2, #7, #6 "One button style"): the PayPal button and the links that were
   buttons or pictures of buttons, a <button> and an <a> alike, hover included. White on --btn is
   7.9 : 1, on --btn-hover 10.6 : 1. A long label wraps inside the pill, centred. */
.birke-button {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  padding: .7rem 1.5rem;
  border: 2px solid var(--btn);
  border-radius: 999px;
  background: var(--btn);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.birke-button:hover { background: var(--btn-hover); border-color: var(--btn-hover); }

/* Sidebar cards: labels and text at body size, in the body text colour */
.sidebar { display: grid; gap: 1rem; }
.card { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card h2 { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 700; }
.card p { margin: 0; }
/* The counselling card: the button centred on the tint */
.card-cta { background: var(--tint); border-color: var(--tint); text-align: center; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li + li { margin-top: .25rem; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer a { color: var(--footer-text); }
.site-footer :focus-visible { outline-color: #fff; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.footer-inner p { margin: 0; }
.menu-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Narrow screens: one column, the counselling card before the text, the other cards after it */
@media (max-width: 60rem) {
  .layout { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; padding-top: 1.25rem; }
  .sidebar { display: contents; }
  .card-cta { order: -1; }
  .content { order: 0; }
  .sidebar .card:not(.card-cta) { order: 1; }
}

/* Phones: a compact header, the whole photo above the title */
@media (max-width: 40rem) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
  .header-inner { justify-content: center; gap: .35rem; padding-top: .5rem; padding-bottom: .5rem; }
  .brand img { width: 120px; }
  /* the five items fit one row from 360 px, each word 12 px clear of the filled pill beside it */
  .nav { justify-content: center; gap: .4rem; }
  .nav a { padding: .45rem .35rem; font-size: .875rem; }
  .layout { padding-top: 1rem; }
  .band { flex-direction: column; align-items: stretch; min-height: 0; margin-bottom: 1rem; padding: 0; background: none; border-radius: 0; overflow: visible; }
  .band h1 { flex: none; }
  .band-photo {
    flex: none;
    order: -1;
    width: 100%;
    max-width: none;
    aspect-ratio: 5 / 2;   /* the whole crop, so no face is cut */
    margin: 0 0 1rem;
    object-position: center;
    border-radius: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .subnav ul { justify-content: flex-start; gap: .4rem; margin-bottom: 1.25rem; }
  .subnav a { padding: .35rem .7rem; }
  .content h2 { margin-top: 1.75rem; }
  .footer-inner { flex-direction: column; }
}