/* ============================================================
   The Carnation — design system
   Future Old English · Retro Civic News · Modern Editorial
   ============================================================ */

:root {
  /* ink + paper (shared with Alliance Renaissance) */
  --ink: #15110c;          /* warm near-black */
  --ink-2: #2a2520;
  --paper: #ffffff;        /* clean white */
  --paper-2: #f5f4f1;      /* faint panel */
  --paper-3: #ecebe6;      /* tint panel */
  --card: #ffffff;
  --line: #dad7d0;         /* neutral hairline on white */
  --line-2: #e7e4dd;
  --line-strong: #1b1712;  /* near-black structural rule */
  --muted: #6a6354;
  --muted-2: #948c7a;

  /* accents — Alliance, Ohio town flag (the Scarlet Carnation) */
  --red: #c32219;          /* flag scarlet */
  --red-ink: #9c1a12;      /* darker scarlet, hover */
  --red-tint: #f8e4e1;
  --blue: #152364;         /* flag navy */
  --blue-ink: #0e1a4c;     /* darker navy, hover */
  --blue-tint: #e4e7f1;

  /* type */
  --black-letter: "UnifrakturMaguntia", "Times New Roman", serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --gut: clamp(18px, 4.5vw, 56px);
  --rule: 1px solid var(--line);
  --rule-ink: 1.5px solid var(--line-strong);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* paper grain — off for the clean, modern white edition */
body::before {
  content: "";
  position: fixed; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,-2%)}
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; }
::selection { background: var(--red); color: var(--paper); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.hide-sm { }
@media (max-width: 680px) { .hide-sm { display: none !important; } }
.wrap--narrow { max-width: 800px; }
.wrap--mid { max-width: 1020px; }
.section { padding: clamp(48px, 7vw, 92px) 0; }
.section--tight { padding: clamp(30px, 4vw, 52px) 0; }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .meta, .section--ink .kicker { color: #c9a3a8; }

/* hairline helpers */
.rule { border: 0; border-top: var(--rule); margin: 0; }
.rule--ink { border-top: var(--rule-ink); }
.rule--double { border: 0; border-top: 3px double var(--line-strong); }

/* ---------- shared labels ---------- */
.kicker {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.meta {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.dek { font-family: var(--serif); font-style: italic; color: var(--ink-2); }

/* section heading rule */
.sec-rule {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: var(--rule-ink); padding-bottom: 12px; margin-bottom: clamp(24px, 3vw, 40px);
}
.sec-rule h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
}
.sec-rule .meta { margin-left: auto; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper); --bd: var(--ink);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd);
  padding: 13px 22px; border-radius: 2px;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
  position: relative; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(21,17,12,.5); }
.btn:active { transform: translateY(0); }
.btn--red { --bg: var(--red); --fg: var(--paper); --bd: var(--red); }
.btn--red:hover { --bg: var(--red-ink); --bd: var(--red-ink); }
.btn--navy { --bg: var(--blue); --fg: var(--paper); --bd: var(--blue); }
.btn--navy:hover { --bg: var(--blue-ink); --bd: var(--blue-ink); }
.btn--line { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
.btn--line:hover { --bg: var(--ink); --fg: var(--paper); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn--ghost:hover { --bd: var(--ink); }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--sm { padding: 9px 15px; font-size: .8rem; }
.section--ink .btn--line, .dual__cell--ink .btn--line { --fg: var(--paper); --bd: rgba(244,239,227,.4); }
.section--ink .btn--line:hover, .dual__cell--ink .btn--line:hover { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }

/* arrow */
.arw { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arw, a:hover > .arw { transform: translateX(3px); }

/* ===== ENTRANCE ANIMATION =====
   Visible state is the BASE (never depends on motion completing — some
   preview/embed environments freeze CSS animations at frame 0). The
   entrance is a transform-only slide applied on reveal; opacity is never
   gated, so content is always visible. */
@media (prefers-reduced-motion: no-preference) {
  .in .rise { animation: riseIn .62s var(--ease) both; }
  .in .rise.d1 { animation-delay: .06s; }
  .in .rise.d2 { animation-delay: .12s; }
  .in .rise.d3 { animation-delay: .18s; }
  .in .rise.d4 { animation-delay: .24s; }
  .in .rise.d5 { animation-delay: .30s; }
  .in .rise.d6 { animation-delay: .36s; }
  @keyframes riseIn { from { transform: translateY(16px); } to { transform: none; } }
  /* route fade */
  .route { animation: routeIn .5s var(--ease) both; }
  @keyframes routeIn { from { transform: translateY(8px); } to { transform: none; } }
}