/* G, "The Magazine" (Silvio's mock G): a bold cover and colour sections, in the brand v2.0 tokens (the mock's pink and
   violet become the brand's greens, its yellow the paper's sand, the sections green, ink and red). Shown when
   <html data-design="g"> (assets/design/). */
.fg { font-family: var(--serif); color: var(--ink); }
.fg a { color: inherit; text-decoration: none; }
.fg a:hover, .fg a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:where(.fg) :is(h2, h3) { border: 0; padding: 0; margin: 0; text-transform: none; letter-spacing: normal; font-family: var(--serif); }
.fg-w { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.fg-hd { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.fg-hd .wordmark { height: 26px; width: auto; }
.fg-hd nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 13px var(--sans); }
.fg-hd nav a[aria-current] { color: var(--brand); font-weight: 600; }
.fg-cover { max-width: calc(var(--page) - 2 * var(--gutter)); margin: 0 auto; border-radius: 22px; background: linear-gradient(135deg, #062a0e 0%, #0a4a16 55%, #006600 100%); color: #f6f3ec; overflow: hidden; }
.fg-cover .fg-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; padding: 40px 40px 44px; }
.fg-issue { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #cfe0cf; margin: 0 0 14px; }
.fg-h1 { font: 700 64px/1 var(--serif) !important; letter-spacing: -.025em !important; margin: 0 0 16px !important; color: #fff; }
.fg-h1 i { font-style: italic; background: var(--paper-2); color: var(--ink); padding: 0 10px; border-radius: 10px; }
.fg-dek { font-size: 18px; line-height: 1.5; color: #dfeadf; margin: 0 0 18px; max-width: 34em; }
.fg-lines a { display: block; border-top: 1px solid rgba(255, 255, 255, .25); padding: 10px 0; font: 600 18px/1.3 var(--serif); color: #fff; }
.fg-lines small { display: block; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #9fd89f; }
.fg-lines mark { background: var(--paper-2); color: var(--ink); padding: 0 4px; border-radius: 3px; }
.fg-fig { margin: 0; background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); transform: rotate(-1.5deg); }
.fg-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.fg-fig figcaption { font: 500 10.5px var(--mono); color: #3f424a; text-align: right; padding-top: 4px; }
.fg-sun { max-width: calc(var(--page) - 2 * var(--gutter)); margin: 16px auto 0; background: var(--paper-2); border-radius: 18px; }
.fg-sun .fg-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 22px 40px; }
.fg-sun b { display: block; font: 700 52px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.fg-sun span { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); }
.fg-ask { max-width: 820px; margin: 34px auto 0; }
.fg-pb { display: flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--panel); overflow: hidden; }
.fg-pr { font: 600 15px var(--mono); color: var(--brand); padding: 0 4px 0 14px; }
.fg-pb input { flex: 1; min-width: 0; border: 0; padding: 16px 10px; font: 17px var(--sans); background: transparent; color: var(--ink); }
.fg-pb button { border: 0; background: var(--ink); color: var(--paper); border-radius: 10px; margin: 5px; font: 600 15px var(--sans); padding: 0 20px; align-self: stretch; cursor: pointer; }
.fg-pcs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.fg-pcs a { font: 13px var(--sans); border: 1px solid var(--hair); background: var(--panel); border-radius: 999px; padding: 4px 12px; color: var(--ink-3); }
.fg-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0; }
.fg-sec { border-radius: 18px; padding: 20px; color: #fff; }
.fg-s0 { background: var(--brand); } .fg-s1 { background: var(--ink); } .fg-s2 { background: var(--brand-red); }
.fg-s3 { background: #0a3a14; } .fg-s4 { background: #3f424a; }
.fg-sec h2 { font: 700 30px/1.05 var(--serif) !important; margin: 0 0 12px !important; color: #fff; }
.fg-s { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .25); font: 600 15px/1.25 var(--serif); }
.fg-th { position: relative; display: block; }
.fg-th img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #fff; }
.fg-th i, .fg-fpic i { position: absolute; left: 2px; bottom: 2px; font: normal 500 12px var(--mono); background: rgba(18, 19, 23, .78); color: #fff; padding: 0 3px; border-radius: 2px; }
.fg-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; background: var(--panel); border: 1px solid var(--hair); border-radius: 18px; padding: 18px; margin: 0 0 40px; }
.fg-fpic { position: relative; display: block; }
.fg-fpic img { display: block; width: 100%; height: auto; border-radius: 12px; }
.fg-k { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-red); margin: 0 0 6px; }
.fg-feat h2 { font: 700 32px/1.1 var(--serif) !important; margin: 0 0 10px !important; }
.fg-feat p { color: var(--ink-2); font-size: 16px; margin: 0 0 10px; }
.fg-badge { display: inline-block; font: 500 11px var(--mono); color: var(--brand); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
@media (max-width: 1000px) { .fg-cover .fg-in, .fg-feat { grid-template-columns: minmax(0, 1fr); } .fg-secs { grid-template-columns: minmax(0, 1fr); } .fg-h1 { font-size: 48px !important; } }
@media (max-width: 600px) {
    .fg-hd nav { display: none; }
    .fg-cover, .fg-sun { border-radius: 0; }
    .fg-cover .fg-in { padding: 26px 16px 30px; }
    .fg-h1 { font-size: 38px !important; }
    .fg-sun .fg-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
    .fg-sun b { font-size: 36px; }
    .fg-pcs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .fg-pcs a { flex: 0 0 auto; }
}

/* Silvio's own palette for G (Dinis, about 01:20 UTC, 7 November: "F and G can keep their own colours";
   board/team/designer/brand-decisions.md): the hero gradient with a 30% ink scrim behind white text, the yellow band,
   coral as a fill only (ink text on it), blue for small coloured text. Inside G only. */
.fg { --paper: #fffaf3; --panel: #ffffff; --ink: #16131f; --ink-2: #625b6e; --ink-3: #625b6e; --hair: #ecdfcf; --rule-2: #d9c9b5;
      --brand: #3b5bfd; --brand-2: #2c47d6; --brand-red: #3b5bfd; --paper-2: #ffd23f; background: var(--paper); color: var(--ink); }
.fg-cover { background: linear-gradient(rgba(22, 19, 31, .3), rgba(22, 19, 31, .3)), linear-gradient(120deg, #ff6a4d 0%, #ff4f8b 50%, #7b61ff 100%); }
.fg-issue { color: #fff; }
.fg-dek { color: #fff; }
.fg-lines small { color: #ffe58a; }
.fg-h1 i, .fg-lines mark { background: #ffd23f; color: #16131f; }
.fg-sun { background: #ffd23f; }
.fg-sun span { color: #16131f; }
.fg-s0 { background: #3b5bfd; } .fg-s1 { background: #16131f; } .fg-s2 { background: #ff6a4d; color: #16131f; }
.fg-s2 h2 { color: #16131f !important; }
.fg-s2 .fg-s { border-top-color: rgba(22, 19, 31, .25); }
.fg-pb button { background: #16131f; color: #fffaf3; }

.fg-hd nav a { display: inline-flex; align-items: center; min-height: 24px; }

/* D4: the wordmark at least 240 px wide; D11: what is next, right under the numbers */
.fg-hd .wordmark { height: 40px; }
.fg-next { max-width: 820px; margin: 28px auto 0; }
.fg-next h2 { font: 800 12px var(--sans) !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin: 0 0 6px !important; }
.fg-next li { list-style: none; padding: 8px 0; border-top: 1px solid var(--hair); font: 16px/1.3 var(--serif); }
.fg-next ul { margin: 0; padding: 0; }
.fg-next time { display: inline-block; font: 700 12px var(--mono); background: #16131f; color: #fffaf3; padding: 2px 6px; border-radius: 3px; margin-right: 8px; }
.fg-next small { display: block; font: 12px var(--sans); color: var(--ink-3); margin-top: 2px; }