/* Shared visual tokens for the React app and public server-rendered pages. */
:root {
  color-scheme: light;
  --flavors-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --flavors-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --flavors-canvas: #f8f6f1;
  --flavors-surface: #ffffff;
  --flavors-text: #262a24;
  --flavors-muted: #62675e;
  --flavors-subtle-text: #6d7269;
  --flavors-accent: #a33e24;
  --flavors-accent-hover: #82301c;
  --flavors-accent-soft: #fbefe7;
  --flavors-border: #dedfd5;
  --flavors-control-border: #90968b;
  --flavors-forest: #30483d;
  --flavors-sage: #eaf0e7;
  --flavors-radius-control: 0.625rem;
  --flavors-radius-card: 1rem;
  --flavors-radius-section: 1.5rem;
  --flavors-shadow-card: 0 2px 5px rgb(38 42 36 / 3%);
  --flavors-shadow-overlay: 0 16px 48px -16px rgb(36 32 29 / 18%);
}

.public-page {
  box-sizing: border-box;
  width: 100%; max-width: 56rem; margin: 0 auto; padding: 1.25rem 1rem 3rem;
  background: var(--flavors-canvas); color: var(--flavors-text);
  font-family: var(--flavors-font-body); font-size: 1rem; line-height: 1.6;
  overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
.public-page *, .public-page *::before, .public-page *::after { box-sizing: border-box; }
.public-page--wide { max-width: 72rem; }
.public-page h1, .public-page h2 { font-family: var(--flavors-font-display); font-weight: 500; text-wrap: balance; }
.public-page h1 { margin: 0.5rem 0 1rem; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.035em; }
.public-page h2 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.02em; }
.public-page h3 { font-family: var(--flavors-font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.public-page a { color: var(--flavors-accent); text-underline-offset: 0.2em; }
.public-page .meta, .public-page figcaption { color: var(--flavors-muted); font-size: 0.875rem; line-height: 1.6; }
.public-page .eyebrow { color: var(--flavors-accent); font-size: 0.6875rem; letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; }
.public-page .intro { max-width: 58ch; color: var(--flavors-muted); font-size: 1.0625rem; line-height: 1.7; }
.public-page .brand { margin-bottom: 2rem; font-family: var(--flavors-font-display); font-size: 1.5rem; font-weight: 600; }
.public-page .brand a { color: var(--flavors-text); }
.public-page .brand .mark { background: var(--flavors-accent); border-radius: var(--flavors-radius-control); }
.public-page .public-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-bottom: 1rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--flavors-border); }
.public-page .public-nav .brand { margin: 0; color: var(--flavors-text); text-decoration: none; }
.public-page .public-nav > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.public-page .public-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--flavors-muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.public-page .public-nav .brand { font-size: 1.5rem; font-weight: 600; }
.public-page .public-nav .brand::before { content: "f"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .625rem; border-radius: 50% 50% .5rem .5rem; background: var(--flavors-accent); color: white; font-size: 1.25rem; }
.public-page .cta, .public-page .open, .public-page .share {
  display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1rem; margin: 0.75rem 0.5rem 0 0; border: 1px solid transparent;
  border-radius: var(--flavors-radius-control); background: var(--flavors-accent); color: #fff;
  font: 600 0.875rem/1.4 var(--flavors-font-body); text-align: center; text-decoration: none;
}
.public-page .share { background: white; color: var(--flavors-text); border-color: var(--flavors-control-border); }
.public-page .cta:hover, .public-page .open:hover { background: var(--flavors-accent-hover); }
.public-page .share:hover { background: var(--flavors-accent-soft); }
.public-page .candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; padding: 0; }
.public-page .candidate, .public-page .guide-links li { border: 1px solid var(--flavors-border); border-radius: var(--flavors-radius-card); background: white; box-shadow: var(--flavors-shadow-card); padding: 1rem; }
.public-page .guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.public-page .guide-links li { padding: 1.5rem; border-top: 3px solid var(--flavors-forest); }
.public-page .guide-links h2 { margin: .5rem 0; font-size: 1.5rem; }
.public-page .guide-links h2 a { color: var(--flavors-text); text-decoration: none; }
.public-page details { padding: 1rem 0; border-block: 1px solid var(--flavors-border); margin: 1.5rem 0; }
.public-page summary { min-height: 2.75rem; align-content: center; cursor: pointer; font-weight: 500; }
.public-page .editorial-heading { border-bottom: 1px solid var(--flavors-border); padding-bottom: 1.75rem; margin-bottom: 2rem; }
.public-page .edition-grid { list-style-position: inside; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.public-page .edition-grid > li { min-width: 0; background: white; border: 1px solid var(--flavors-border); padding: 1rem; border-radius: var(--flavors-radius-card); }
.public-page .edition-grid .ph { height: auto; aspect-ratio: 3 / 2; }
.public-page figure { margin: 0; }
.public-page figure img, .public-page .photo { border-radius: 0.75rem; }
.public-page .public-photo-frame { position: relative; aspect-ratio: 3 / 2; border-radius: .75rem; overflow: hidden; background: var(--flavors-sage); }
.public-page .public-photo-frame > span { position: absolute; inset: 0; display: grid; place-items: center; font: 4rem var(--flavors-font-display); color: var(--flavors-control-border); }
.public-page .public-photo-frame img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.public-page .public-photo-frame img[hidden] { display: none; }
.public-page .actions { gap: 0.5rem 1rem; }
.public-page .actions a { min-height: 2.75rem; font-size: 0.875rem; font-weight: 500; }
.public-page footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--flavors-border); }
.public-page .public-footer { background: var(--flavors-forest); padding: 1.75rem; border: 0; border-radius: var(--flavors-radius-card); color: white; }
.public-page .public-footer .brand { margin: 0; color: white; text-decoration: none; }
.public-page .public-footer a { color: white; }
.public-page .public-footer .meta { color: #d9e1d8; }
.public-page .public-footer :focus-visible { outline-color: white; }
.public-page .public-footer > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.public-page .public-footer > div a { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: .875rem; }
.public-page .achievement-card { margin: 2rem 0; padding: 2rem; border-radius: var(--flavors-radius-card); background: var(--flavors-sage); color: var(--flavors-forest); }
.public-page .achievement-mark { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; background: var(--flavors-forest); color: white; font-size: 2rem; }
.public-page :where(a, button, input, summary):focus-visible { outline: 2px solid var(--flavors-accent); outline-offset: 4px; }
@media (min-width: 48rem) { .public-page { padding: 1.5rem 2rem 4rem; } }