/* The EMEA Brief — direction A, "Paper of record".
   One family (Newsreader, static instances), one accent (oxblood), one bold move:
   sources set as marginalia beside the claims they support. */

@font-face { font-family: "Newsreader Text"; src: url("fonts/Newsreader-Text-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Text"; src: url("fonts/Newsreader-Text-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Text"; src: url("fonts/Newsreader-Text-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Text"; src: url("fonts/Newsreader-Text-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader Display"; src: url("fonts/Newsreader-Display-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Display"; src: url("fonts/Newsreader-Display-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper: #FBF8F1;
  --ink: #1B1A17;
  --ink-2: #6B665C;
  --rule: #CFC8B8;
  --oxblood: #7A2E2E;
  --wash: #F4EFE3;
  --focus: #7A2E2E;
  --measure: 38rem;
  --margin-col: 15rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1A1815; --ink: #ECE5D5; --ink-2: #A39C8C; --rule: #3A352D;
    --oxblood: #D08A82; --wash: #24211C; --focus: #D08A82; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1A1815; --ink: #ECE5D5; --ink-2: #A39C8C; --rule: #3A352D;
  --oxblood: #D08A82; --wash: #24211C; --focus: #D08A82; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.58 "Newsreader Text", Georgia, serif;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--oxblood); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc { font-variant-caps: all-small-caps; letter-spacing: .06em; font-feature-settings: "c2sc", "smcp"; }

/* ------------------------------------------------------------ chrome */
.site { max-width: calc(var(--measure) + var(--margin-col) + 5rem); margin: 0 auto; padding: 0 1rem 5rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: baseline; padding: 1rem 0 .9rem;
       border-bottom: 1px solid var(--rule); font-size: .95rem; color: var(--ink-2); }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--oxblood); }
.nav .spacer { flex: 1; }
.nav button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ------------------------------------------------------------ masthead */
.mast { text-align: center; padding: 2.75rem 0 .9rem; border-bottom: 1px solid var(--ink); }
.mast h1 { font: 500 clamp(2.1rem, 6vw, 2.9rem)/1.05 "Newsreader Display", Georgia, serif; margin: 0; letter-spacing: .005em; }
.mast .meta { margin-top: .5rem; color: var(--ink-2); font-size: .98rem; }
.conf { text-align: center; color: var(--oxblood); font-size: .9rem; padding: .45rem 0 0; }
.dayline { font: italic 400 clamp(1.25rem, 3.4vw, 1.5rem)/1.38 "Newsreader Display", Georgia, serif;
           text-align: center; max-width: 34em; margin: 1.9rem auto 1.7rem; text-wrap: balance; }

.alert { border: 1px solid var(--oxblood); color: var(--oxblood); padding: .6rem .9rem; margin: 1.2rem 0; font-size: .98rem; }

/* ------------------------------------------------------------ the do-today strip: the spine */
.do { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: .75rem 0 .4rem; margin: 0 0 .5rem; }
.do h2 { font: 600 .98rem/1.3 "Newsreader Text", Georgia, serif; margin: 0 0 .45rem; }
.do ol { margin: 0; padding-left: 1.4em; }
.do li { margin: 0 0 .55rem; font-size: 1.06rem; line-height: 1.45; }
.do li::marker { color: var(--oxblood); font-weight: 600; }
.verb { color: var(--oxblood); font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .07em; }
.ref { color: var(--ink-2); font-size: .9rem; white-space: nowrap; }

/* ------------------------------------------------------------ sections and items */
.sec { display: flex; align-items: baseline; gap: .7rem; margin: 2.6rem 0 .6rem; font-size: 1.02rem; font-weight: 600; }
.sec .num { color: var(--oxblood); }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform: translateY(-.3em); }
.sec-note { color: var(--ink-2); font-size: .95rem; margin: -.2rem 0 1rem; max-width: var(--measure); }
.empty { color: var(--ink-2); font-style: italic; max-width: var(--measure); }

.item { margin: 1.4rem 0 2rem; }
.item .tag { color: var(--ink-2); font-size: .9rem; }
.item h3 { font: 600 1.28rem/1.3 "Newsreader Text", Georgia, serif; margin: .15rem 0 .45rem; text-wrap: pretty; }
.item .body p { margin: 0 0 .7rem; max-width: var(--measure); hyphens: auto; }
.item sup a { color: var(--oxblood); text-decoration: none; font-size: .72em; padding: 0 .08em; }
.tripwire { max-width: var(--measure); margin: 0 0 .8rem; font-style: italic; }
.tripwire b { font-style: normal; font-weight: 600; }

.action { max-width: var(--measure); background: var(--wash); border-left: 3px solid var(--oxblood); padding: .6rem .9rem .55rem; margin: .4rem 0 .2rem; }
.action p { margin: 0 0 .35rem; }
.action dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: 0; font-size: .95rem; }
.action dt { color: var(--ink-2); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.action dd { margin: 0; }
.action + .action { margin-top: .6rem; }
.action.compact { background: transparent; border-left-width: 2px; padding: .15rem 0 .15rem .8rem; }
.action.compact .meta { color: var(--ink-2); font-size: .92rem; margin: 0; }
.sub-label { margin: .8rem 0 .15rem; color: var(--ink-2); font-size: .95rem; font-style: italic; }
.status { display: flex; gap: .6rem; align-items: center; margin-top: .45rem; font-size: .9rem; color: var(--ink-2); }
.status form { display: inline; }
.status button { font: inherit; font-size: .9rem; background: transparent; color: var(--ink); border: 1px solid var(--rule);
                 padding: .12rem .55rem; cursor: pointer; }
.status button:hover { border-color: var(--oxblood); }
.status .is { color: var(--oxblood); font-weight: 600; }

.sources { font-size: .88rem; line-height: 1.42; color: var(--ink-2); margin: .8rem 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.sources li { margin: 0 0 .45rem; padding-left: 1.4em; text-indent: -1.4em; }
.sources .n { color: var(--oxblood); font-weight: 600; margin-right: .35em; }
.sources .outlet { color: var(--ink); }

/* marginalia: sources move into the right margin when there is room */
@media (min-width: 72rem) {
  .item { display: grid; grid-template-columns: minmax(0, var(--measure)) var(--margin-col); column-gap: 2.6rem; }
  .item > .main { grid-column: 1; }
  .item > .sources { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: 1.9rem 0 0; border-left: 1px solid var(--rule); padding-left: .9rem; }
}

/* gamechangers */
.gc .ifthen { max-width: var(--measure); margin: 0 0 .6rem; font-size: 1.08rem; }
.gc .ifthen i { font-family: "Newsreader Text", Georgia, serif; }
.move { font-weight: 600; }
.move.toward { color: var(--oxblood); }
.indicators { list-style: none; padding: 0; margin: .2rem 0 .8rem; max-width: var(--measure); font-size: .96rem; }
.indicators li { padding-left: 1.5em; text-indent: -1.5em; margin: .1rem 0; }
.indicators .g { display: inline-block; width: 1.5em; text-indent: 0; color: var(--oxblood); }
.impact { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; max-width: var(--measure); font-size: .95rem; margin: 0 0 .8rem; }
.impact dt { color: var(--ink-2); font-variant-caps: all-small-caps; letter-spacing: .06em; }
.impact dd { margin: 0; }
.standing { max-width: var(--measure); padding-left: 1.2em; }
.standing li { margin: .2rem 0; }

.also { max-width: var(--measure); padding-left: 1.2em; }
.also li { margin: .3rem 0; }
.coverage { max-width: var(--measure); font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: .8rem; }
.coverage p { margin: .2rem 0; }
.foot { text-align: center; color: var(--ink-2); font-size: .85rem; margin-top: 2.2rem; }

/* ------------------------------------------------------------ index pages */
.page-title { font: 500 2rem/1.15 "Newsreader Display", Georgia, serif; margin: 2.2rem 0 .3rem; }
.lede { color: var(--ink-2); max-width: var(--measure); margin: 0 0 1.6rem; }
.list { list-style: none; padding: 0; margin: 0; max-width: calc(var(--measure) + 8rem); }
.list li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.list .when { color: var(--ink-2); font-size: .95rem; }
.list .what a { font-weight: 600; text-decoration: none; }
.list .sub { color: var(--ink-2); font-size: .94rem; }
.timeline { list-style: none; padding: 0; margin: 1rem 0; max-width: var(--measure); border-left: 1px solid var(--rule); }
.timeline li { padding: 0 0 1rem 1rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -4px; top: .55em; width: 7px; height: 7px; background: var(--oxblood); border-radius: 50%; }
.timeline .when { color: var(--ink-2); font-size: .92rem; }
table.data { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1rem 0 2rem; }
table.data th, table.data td { text-align: left; padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data th { font-weight: 600; }
.pill { display: inline-block; font-size: .85rem; padding: 0 .45rem; border: 1px solid var(--rule); }
.pill.bad { border-color: var(--oxblood); color: var(--oxblood); }

/* login */
.login { max-width: 22rem; margin: 18vh auto 0; text-align: center; }
.login h1 { font: 500 2.4rem/1.1 "Newsreader Display", Georgia, serif; margin: 0 0 1.4rem; }
.login input { font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.login button { font: inherit; margin-top: .8rem; width: 100%; padding: .55rem; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; }
.login .err { color: var(--oxblood); margin-top: .8rem; }

@media (max-width: 40rem) {
  body { font-size: 1.02rem; }
  .list li { grid-template-columns: 1fr; gap: .1rem; }
  .action dl { grid-template-columns: 1fr; }
  .action dt { margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
  .nav, .status, .noprint { display: none !important; }
  body { background: #fff; }
}