/* ============================================================
   G16 · Paris Élysée — Le Bulletin du Turf
   France · ANJ aggregator · BEM · Vanilla
   Aesthetic : aged broadsheet · turf-green · brass · rouge
   Typography : IM Fell English SC · Spectral · Special Elite
   ============================================================ */

:root {
  /* — Paper & atmosphere — */
  --paper:           #f1e8d2;   /* aged cream broadsheet */
  --paper-deep:      #e7dcbe;   /* alt section ground */
  --paper-edge:      #d8c89e;   /* card edges, rules */
  --paper-shadow:    #c8b787;

  /* — Ink, the dominant text/structural colour — */
  --ink:             #16140e;   /* deep printer ink */
  --ink-soft:        #2d2820;
  --ink-fade:        #4a4337;
  --ash:             #6e6553;

  /* — Turf green : the primary accent — */
  --turf:            #1a3d2c;
  --turf-deep:       #0f2519;
  --turf-soft:       #2d5a3f;

  /* — Rouge : alert / hot accent — */
  --rouge:           #8a1c2b;
  --rouge-deep:      #5e0e1a;
  --rouge-bright:    #a93142;

  /* — Brass : metallic accents, numerals — */
  --brass:           #ad8540;
  --brass-bright:    #d2a55c;
  --brass-dark:      #7a5b27;

  /* — Rules & lines — */
  --rule:            rgba(22, 20, 14, .22);
  --rule-soft:       rgba(22, 20, 14, .12);
  --rule-strong:     rgba(22, 20, 14, .55);

  /* — Typography stacks — */
  --font-display:    "IM Fell English SC", "IM Fell DW Pica SC", "Cormorant Garamond", Georgia, serif;
  --font-display-it: "IM Fell English", "Cormorant Garamond", Georgia, serif;
  --font-body:       "Spectral", "IM Fell English", Georgia, "Times New Roman", serif;
  --font-mono:       "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace;

  /* — Geometry — */
  --container:       1240px;
  --container-tight: 980px;
  --gap:             clamp(20px, 3vw, 32px);

  /* — Shadows : soft, like ink bleeding into paper — */
  --shadow-paper:    0 1px 0 rgba(22, 20, 14, .08), 0 12px 24px -16px rgba(22, 20, 14, .35);
  --shadow-deep:     0 2px 0 rgba(22, 20, 14, .08), 0 24px 48px -22px rgba(22, 20, 14, .45);

  /* — Paper texture overlay (CSS noise via SVG data-uri) — */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

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

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

html, body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    /* faint vertical fold shadow, off-centre */
    linear-gradient(90deg, transparent 0, transparent 49%, rgba(22, 20, 14, .045) 50%, transparent 51%, transparent 100%),
    /* subtle warm vignette */
    radial-gradient(ellipse at 50% 0%, rgba(255, 245, 215, .35), transparent 60%),
    var(--paper-grain);
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, 220px 220px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "onum";
}

/* — Display headings — small caps letterpress — */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;          /* IM Fell only ships 400 */
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 .55em;
  letter-spacing: .01em;
  font-feature-settings: "kern", "liga", "smcp";
}

h1 {
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  letter-spacing: .005em;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

a {
  color: var(--turf);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: color .25s ease, background-size .25s ease;
}
a:hover {
  color: var(--rouge);
  background-size: 100% 2px;
}

img { max-width: 100%; display: block; height: auto; }

strong, b { font-weight: 600; }

em, i { font-style: italic; font-family: var(--font-display-it); }

::selection {
  background: var(--brass-bright);
  color: var(--ink);
}

/* — Layout containers — */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}
.container--tight {
  max-width: var(--container-tight);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* — Ornamental rules used across the bulletin — */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
}
.rule--double {
  height: 5px;
  background:
    linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat;
}
.rule--brass {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* Editorial flourish (used as section break) */
.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(28px, 5vw, 44px) auto;
  color: var(--brass-dark);
  max-width: 540px;
}
.flourish::before, .flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule));
}
.flourish::after {
  background: linear-gradient(90deg, var(--rule), transparent);
}
.flourish__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .25em;
  color: var(--brass-dark);
}

/* — Has-sticky-cta padding adjustment — */
body.has-sticky-cta { padding-bottom: 92px; }

/* — Tables get broadsheet treatment globally — */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0 1.6em;
  font-size: .96em;
  background: rgba(255, 250, 232, .55);
  border: 1px solid var(--rule);
}
th, td {
  text-align: left;
  padding: .65em .9em;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
thead th {
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--paper-deep);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 400;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(odd) td { background: rgba(232, 220, 188, .18); }

/* — Numbers feel like ticket type — */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* — Responsive base tweaks — */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 480px) {
  body { font-size: 15.5px; }
  table { font-size: .9em; }
  th, td { padding: .55em .65em; }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* — Print : honour the broadsheet roots — */
@media print {
  body { background: #fff; color: #000; }
  .top-strip, .cookie, .sticky-cta, .header__burger { display: none !important; }
}