/* Floodlines website v2: "the mist before a storm" (Decision 005 Amendment C).
   Brand palette from brand/identity.md, leaning to the cooler silver end. No web fonts,
   no scripts, no third-party requests (the privacy note depends on it). */
:root {
  --bg: #F7F5F2; --ink: #1C1C1A; --iron: #6B6A66; --champ: #B7AA98; --gold: #9E8C78;
  --rule: #D3CFC8; --mist: 230, 228, 224;
  --sans: "Inter", "Helvetica Neue", "DejaVu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zh: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif;
  --measure: 36rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); animation: fade 1.2s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body, .mist { animation: none; } }
[lang^="zh"] { font-family: var(--zh); }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page { max-width: 64rem; margin: 0 auto; padding: 0 16px; position: relative; }
@media (min-width: 640px) { .page { padding: 0 2.5rem; } }

/* Header lock-up: FLOODLINES / straight silver rule / English slogan (inner pages) */
.site-header { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-end; padding-top: 2rem; position: relative; z-index: 1; }
.lockup { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.lockup-en { font-weight: 800; font-size: 1.35rem; letter-spacing: .14em; line-height: 1; }
.lockup-en sup { font-size: .45em; font-weight: 400; letter-spacing: 0; }
.lockup-rule { display: block; width: 100%; height: 1px; background: var(--rule); margin: .5rem 0 .4rem; }
.lockup-slogan { font-size: .75rem; letter-spacing: .02em; color: var(--iron); white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .92rem; color: var(--iron); }
.site-nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--ink); }

/* Home first screen */
.mist { position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); top: calc(18vh + 5rem); height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--mist),0), rgba(var(--mist),.55), rgba(var(--mist),0));
  animation: fade 2.4s ease-out .4s both; }
.hero { min-height: calc(100vh - 7rem); padding-top: 30vh; position: relative; }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; max-width: 28rem; margin: 0 0 1rem; }
.lede { color: var(--iron); max-width: 28rem; margin: 0 0 1.5rem; }
.cta { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule); }
.cta:hover { border-bottom-color: var(--gold); }

main { padding-bottom: 3rem; }
.block { padding: 3rem 0; border-top: 1px solid var(--rule); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.card { scroll-margin-top: 2rem; }
.card svg { width: 24px; height: 24px; color: var(--champ); display: block; margin-bottom: .75rem; }
.card h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; }
.card p { margin: 0 0 .75rem; color: var(--iron); font-size: .98rem; }
.teaser p { max-width: var(--measure); }
.teaser h2, .subscribe h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 .6rem; }
.teaser p, .subscribe p { color: var(--iron); }

/* Inner pages */
.inner { max-width: var(--measure); padding: 14vh 0 4rem; }
.inner h1 { margin-bottom: .3rem; }
.sub { color: var(--iron); margin: 0 0 3rem; }
.label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champ); font-weight: 600; margin: 2.5rem 0 .8rem; }
.slogan-line { font-weight: 700; margin: 2rem 0 1rem; }
.legal p { font-size: .98rem; }
.fine { font-size: .88rem; color: var(--iron); }

/* Footer and seal */
.site-footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; font-size: .85rem; color: var(--iron); }
.site-footer p { max-width: var(--measure); margin: 0 0 .8rem; }
.seal { margin-top: 2.5rem; color: var(--gold); }
.seal span { display: block; }
.seal-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .2em; }
.seal-name sup { font-size: .45em; letter-spacing: 0; }
.seal-slogan { font-size: .7rem; letter-spacing: .35em; margin-top: .3rem; }
.unconfirmed { background: #fff3cd; color: var(--ink); padding: .5rem 16px; font-size: .85rem; text-align: center; }