/* GFCA month-one summary: six pages that lead, with the full report as the detail.
   Builds on ../report.css (tokens, page canvas, motion, print); only what is
   different here is defined below. Same 1600 x 900 canvas. */

/* ----------------------------------------------------------- 01 cover -- */
/* this is the short version; the full report is one click away, on the first screen */
.edition { margin: 26px 0 28px; }
.edition .btn { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 18px; align-items: center;
  padding: 14px 20px 14px 22px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgba(4,6,139,.2), 0 10px 24px -12px rgba(4,6,139,.55); transition: transform .3s var(--out), box-shadow .3s var(--out); }
.edition .btn { font: 600 18px/1.2 var(--sans); }
.edition .btn span { grid-row: 2; font: 400 13.5px/1.35 var(--sans); color: rgba(255,255,255,.78); margin-top: 3px; }
.edition .btn i { grid-row: 1 / span 2; grid-column: 2; font: 400 26px/1 var(--sans); font-style: normal; transition: transform .3s var(--out); }
.edition .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(4,6,139,.25), 0 16px 32px -14px rgba(4,6,139,.6); }
.edition .btn:hover i { transform: translateX(4px); }
.edition .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------ 02 at a glance -- */
.glance .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 30px; }
.glance .n { border-top: 1px solid var(--ink); padding-top: 12px; }
.glance .where { font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.glance .v { font: 600 84px/1 var(--sans); letter-spacing: -.045em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.glance .v sup { font: 600 32px/1 var(--sans); vertical-align: 42px; margin-left: 3px; color: var(--accent); letter-spacing: 0; }
.glance .n p { font: 400 16px/1.4 var(--sans); color: var(--ink-2); margin-top: 6px; }
.baseline { margin-top: 18px; font: 400 15px/1.45 var(--sans); color: var(--ink-2); max-width: 1100px; }
.baseline b { font-weight: 600; color: var(--ink); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: auto; }
.three h2 { font: italic 400 28px/1 var(--serif); color: var(--accent); padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.three li { position: relative; padding: 6px 0 6px 22px; font: 400 15.5px/1.42 var(--sans); color: var(--ink); text-wrap: pretty; }
.three li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.three .done li::before { content: "✓"; width: auto; height: auto; border-radius: 0; background: none; left: 0; top: 6px; font: 600 15px/1.42 var(--sans); color: var(--accent); }

/* ------------------------------------- 03-04 London and Paris: tighter tiles -- */
/* the same four numbers as the full report, with room below for what was done and what's next */
.numbers h1.h { margin-top: 32px; }
.numbers .tiles { margin-top: 24px; margin-bottom: 18px; }
.numbers .tile { padding-top: 14px; }
.numbers .tile .label { margin-top: 10px; }
.numbers .tile .value { font-size: 64px; margin-top: 6px; }
.numbers .tile .note { font-size: 14px; margin-top: 8px; }
.numbers .tile .chart { margin-top: 10px; }
.numbers .tile .cap { margin-bottom: 6px; }

/* ------------------------------------------------ phones and tablets -- */
@media screen and (max-width: 1080px) {
  .edition { margin-top: 22px; } .edition .btn { display: grid; width: 100%; }
  .glance .nums { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .glance .v { font-size: 60px; } .glance .v sup { font-size: 26px; vertical-align: 28px; }
  .glance .n p { font-size: 15px; }
  .three { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
}
@media screen and (min-width: 640px) and (max-width: 1080px) {
  .glance .nums { grid-template-columns: repeat(4, 1fr); }
}