/* diedetap.com — shared styles */

:root {
  --ink: #22231E;
  --cream: #F2EDE0;
  --paper: #EAE3D1;
  --coral: #C05F45;
  --olive: #3A4030;
  --line: #22231E33;
  --ink-75: #22231EC0;
  --ink-65: #22231EA6;
  --ink-60: #22231E99;
  --ink-35: #22231E59;
  --serif: 'Newsreader', serif;
  --sans: 'Jost', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover { color: var(--coral); }

img { display: block; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.rule { height: 1px; background: var(--line); }

/* Entry animations */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes revealCrop { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
[data-anim] { opacity: 0; animation: riseIn 0.34s cubic-bezier(0.16, 0.9, 0.24, 1) both; }
[data-anim-fade] { opacity: 0; animation: fadeIn 0.34s ease-out both; }
[data-anim-img] { opacity: 0; animation: revealCrop 0.44s cubic-bezier(0.16, 0.9, 0.24, 1) both; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim-fade], [data-anim-img] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Small-caps label used by nav links and "more" links */
.caps {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Arrow link with a coral star, e.g. "Meer over mij →" */
.more-link {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--olive);
}
.more-link img { height: 14px; width: auto; }
.more-link span { line-height: 1; margin-top: 4px; }

/* Header */
.site-header {
  padding: 38px 52px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.site-header .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
/* The width/height attributes round the SVG's true 196.667 x 35.214, which
   makes the box jump ~1.4px once the file lands. Pin the real ratio. */
.site-logo { height: 32px; width: auto; aspect-ratio: 196.667 / 35.214; }
.lang-switch {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
}
.lang-switch .sep { color: var(--line); font-size: 15px; }
.lang-switch .inactive { color: var(--ink-35); }
.site-nav {
  display: flex;
  align-items: center;
  gap: 21px;
}
.site-nav img { height: 18px; width: auto; }
.site-nav .active { color: var(--coral); }

/* Footer */
.site-footer {
  margin-top: 76px;
  overflow: hidden;
  background: var(--paper);
}
.footer-inner { padding: 8px 52px 30px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* With the call to action switched off, the nav column is the whole row and
   loses the gutter that separated it from the left half. It also has to hold
   the height the call to action used to set (40px + copy + 44px, ~317px in
   Dutch), so the page doesn't end on a visibly shorter block. Two-column
   layout only: stacked on narrow screens that floor would just be a gap. */
.footer-grid.solo { grid-template-columns: 1fr; }
.footer-grid.solo .footer-right { padding-left: 0; }
@media (min-width: 901px) {
  .footer-grid.solo { min-height: 320px; }
}

.footer-left {
  padding: 40px 44px 44px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-left h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.24;
  letter-spacing: 0.002em;
  max-width: 26ch;
  text-wrap: pretty;
}
.footer-left p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-75);
  max-width: 40ch;
  text-wrap: pretty;
}
.mail-link {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.mail-link img { height: 15px; width: auto; }
.footer-right {
  position: relative;
  padding: 40px 0 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: stretch;
}
.footer-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px 21px;
}
.footer-nav img { height: 18px; width: auto; }
.star-node { position: relative; line-height: 0; }
img.footer-stars {
  position: absolute;
  left: 50%;
  top: 20px;
  height: 258px;
  width: auto;
  transform: translateX(-59.1%);
  opacity: 0.15;
  pointer-events: none;
}
.legal {
  padding-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 26px;
  font-size: 14px;
}
.legal > * { white-space: nowrap; }
.legal .muted { color: var(--ink-65); }
.legal a { color: var(--olive); }
.legal .opinions {
  margin-left: auto;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-65);
  text-align: right;
  text-wrap: pretty;
  white-space: normal;
}

/* Cookie bar */
.cookie-bar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The class sets display, so the hidden attribute needs to win explicitly. */
.cookie-bar[hidden] { display: none; }

.cookie-bar .title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.cookie-bar .title a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #22231E4D;
}
.cookie-bar .rule { margin: 0 -20px; }
.cookie-bar .actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.cookie-bar button {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink);
}
.cookie-bar button:hover { color: var(--coral); }
.cookie-decline {
  margin-top: 2px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-65);
}
.cookie-accept {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cookie-accept img { height: 13px; width: auto; flex: none; }

/* Responsive chrome */
@media (max-width: 1240px) {
  .site-header { padding: 30px 34px 20px; }
  .site-footer { margin-top: 60px; }
  .footer-inner { padding: 0 34px 26px; }
  .footer-left { padding: 34px 34px 38px 0; }
  .footer-right { padding: 34px 0 38px 34px; }
  .footer-left h2 { font-size: 28px; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-left { padding: 30px 0 32px 0; }
  .footer-right { padding: 30px 0 34px 0; }
  .legal { flex-wrap: wrap; row-gap: 12px; }
  img.footer-stars { height: 210px; }
  .legal .opinions { margin-left: 0; text-align: left; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .site-header { padding: 24px 22px 16px; }
  .site-logo { height: 27px; }
  .site-nav { flex-wrap: wrap; gap: 15px; }
  .site-nav a { font-size: 12px; letter-spacing: 0.13em; }
  .site-footer { margin-top: 48px; }
  .footer-inner { padding: 0 22px 24px; }
  .footer-left h2 { font-size: 24px; }
  .mail-link { font-size: 17px; }
}
@media (max-width: 460px) {
  .site-nav img { display: none; }
  .site-nav { gap: 18px; }
}