/* RainyCalmness – site styles.
   Dark cinematic editorial (layout and button language after Ferrari's design system),
   type and warm paper ink taken from the channel's thumbnails. No external fonts or scripts. */
:root {
  --canvas: #181818;
  --elevated: #222222;
  --hairline: #303030;
  --ink: #f4f1ea;
  --body: #b4b2ac;
  --muted: #7d7b76;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--body); }
body { font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; }

.label {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.88;
}
.label::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: var(--s2);
  background: var(--ink);
}

/* Home */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--canvas) url("hero.jpg") center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,24,24,0.15) 0%, rgba(24,24,24,0.35) 45%, rgba(24,24,24,0.94) 100%);
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s6);
}
h1 {
  margin: var(--s3) 0 var(--s3);
  font: 400 clamp(44px, 8vw, 88px)/1.04 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lead {
  max-width: 560px;
  margin: 0 0 var(--s5);
  font-size: 18px;
  color: var(--body);
}
.button {
  display: inline-block;
  padding: 15px 32px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.facts {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s7) var(--s5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  border-top: 1px solid var(--hairline);
}
.facts h2 { margin: 0 0 var(--s1); font: 400 24px/1.3 var(--serif); color: var(--ink); }
.facts p { margin: 0; }

footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s5);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}
footer a { color: var(--body); }

/* Policy pages */
.page { max-width: 720px; margin: 0 auto; padding: var(--s7) var(--s3) var(--s6); }
.page h1 { font-size: clamp(36px, 6vw, 56px); }
.page h2 { margin: var(--s5) 0 var(--s2); font: 400 24px/1.3 var(--serif); color: var(--ink); }
.page p, .page li { color: var(--body); }
.page ul { padding-left: 1.2em; }
.page .updated { color: var(--muted); font-size: 14px; }
.back { display: inline-block; margin-bottom: var(--s5); font-size: 14px; color: var(--body); }

@media (max-width: 720px) {
  .hero-inner { padding: var(--s6) var(--s2) var(--s5); }
  .facts { grid-template-columns: 1fr; padding: var(--s6) var(--s2); gap: var(--s4); }
  footer { padding: var(--s4) var(--s2); }
}