/* Breezi Side. Colour values are filled in by the builder from the palette in
   src/main.rs, which a test checks for contrast; edit them there, not here. */

@font-face {
  font-family: "Playfair Display";
  src: url("playfair.b035634dee.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("sourcesans.beee444cb0.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --paper:#f6f8f5;--ink:#16211b;--muted:#47584e;--green:#2c6a43;--flag:#b3122e;
  --gutter: clamp(1.25rem, 6vw, 6rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root { --paper:#0f1613;--ink:#e7eee9;--muted:#a5b5ab;--green:#7cc493;--flag:#ff5a6e; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

/* Name on the left, the pin flag on the right: the page fills a wide screen
   instead of sitting in a phone-width column. */
main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: var(--gutter);
}

.words { max-width: 48rem; }

h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 10vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0.9em 0 0;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  letter-spacing: 0.01em;
  color: var(--green);
}

.about {
  margin: clamp(1.4rem, 2.5vw, 2rem) 0 0.4rem;
  max-width: 30rem;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}

.status {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
}

a { color: var(--green); text-underline-offset: 0.2em; }

a:focus-visible {
  outline: 3px solid var(--flag);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The pin flag, swaying a few times when the page opens, then still. */
.pin {
  width: 100%;
  max-width: 22rem;
  height: auto;
  justify-self: center;
  overflow: visible;
}

.pole { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.cup { fill: var(--green); }

.flag {
  fill: var(--flag);
  transform-box: view-box;
  transform-origin: 100px 53px;
  animation: breeze 3.2s ease-in-out 0.6s 3;
}

@keyframes breeze {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  35% { transform: skewY(-5deg) scaleX(0.94); }
  70% { transform: skewY(3deg) scaleX(1.03); }
}

@media (max-width: 48rem) {
  main { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .pin { order: -1; max-width: 6.5rem; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .flag { animation: none; }
}