:root {
  --water: #000;
  --ink: #fff;
  --silver: #b3bfa9;
  --dim: #6e786a;
  --gold: #e6be5a;
  --measure: 38rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--water); }

body {
  margin: 0;
  background: var(--water);
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  font-weight: 340;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--silver); }
a:focus-visible, button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

h1, h2, h3 { font-weight: 340; line-height: 1.1; margin: 0 0 0.6em; letter-spacing: -0.01em; }
h1 { font-size: clamp(3.4rem, 10vw, 7.5rem); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }
h3 { font-size: 1.45rem; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }
em, i { font-style: italic; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
small { font-size: 0.9rem; color: var(--silver); }

.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }

/* Top line */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0;
}
.top a { text-decoration: none; }
.top .name { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; }
.top .name img { width: 28px; height: 28px; border-radius: 7px; }
.top nav { display: flex; gap: 1.4rem; font-size: 1rem; }

/* Buttons */
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.12);
  color: var(--ink); text-decoration: none; font-size: 1.05rem; line-height: 1;
  backdrop-filter: blur(6px);
}
.pill:hover { background: rgba(255,255,255,0.22); color: var(--ink); }
.pill.quiet { background: transparent; border-color: rgba(255,255,255,0.3); }
.pill svg { width: 18px; height: 18px; fill: currentColor; }

/* Sections */
section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.flower-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}
.flower-row.flip { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); }
.flower-row.flip figure { order: -1; }
figure { margin: 0; text-align: center; }
figure img { width: 100%; max-width: 360px; height: auto; display: block; margin-inline: auto; }
figure figcaption { margin-top: 0.6rem; font-style: italic; color: var(--silver); font-size: 1rem; }

@media (max-width: 720px) {
  .flower-row, .flower-row.flip { grid-template-columns: 1fr; }
  .flower-row.flip figure { order: 0; }
  figure img { max-width: 220px; }
}

/* Text pages */
.page { padding: clamp(2rem, 6vw, 5rem) 0 5rem; }
.page h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 0.3em; }
.page h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.page ul { max-width: var(--measure); padding-left: 1.2rem; }
.page li { margin-bottom: 0.4em; }
.dateline { color: var(--silver); margin-bottom: 2.5rem; }

/* Footer */
footer {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 2.5rem 0 3rem; color: var(--silver); font-size: 0.95rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}