/* Backtoast content pages. Tokens and type match the live site (app/ui/base.css). How to use: TEMPLATE.md */

:root {
  --ink: #121110; --ink-2: #4f4a43; --ink-3: #7a746a;
  --line: #ebe7e0; --sunk: #f4f2ee;
  --gold: #e39a3b; --mark: #ffe0bf; --warm: #fffaf3; --warm-line: #f6e3cc;
  --shadow: 0 1px 2px rgba(40,25,10,.05), 0 14px 36px rgba(40,25,10,.08);
  --text: 680px; --wide: 1000px;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  background: linear-gradient(180deg, #fff5e8 0, #fff 520px) no-repeat, #fff;
  font: 18px/1.7 Figtree, ui-sans-serif, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #cbc4b8; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; border-radius: 4px; }

/* Delete the .draft line when a page goes live */
.draft { margin: 0; padding: 8px 20px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--mark); }

/* Top bar, same as the live home */
.top { max-width: 1120px; margin: 0 auto; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 26px; height: 26px; }
.btn { display: inline-block; border-radius: 999px; padding: 10px 18px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; }
.btn:hover { background: #2e2b27; }

/* Article: a text column, plus .wide for things that need more room */
article { display: grid; grid-template-columns: 1fr min(var(--text), 100% - 40px) 1fr; padding: 40px 0 0; }
article > * { grid-column: 2; min-width: 0; }
article > .wide { grid-column: 1 / -1; justify-self: center; width: min(var(--wide), 100% - 40px); }

.kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.kicker a { text-decoration: none; }
.kicker a:hover { color: var(--ink); }
.kicker .sep { color: #cbc4b8; }
h1 { margin: 0 0 16px; font-size: clamp(38px, 6vw, 56px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.meta { margin: 0 0 28px; font-size: 15px; color: var(--ink-3); }
.lede { margin: 0 0 36px; font-size: 21px; line-height: 1.55; color: var(--ink-2); }

article p { margin: 0 0 20px; }
article h2 { display: flex; align-items: center; gap: 14px; margin: 48px 0 12px; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; font-weight: 800; scroll-margin-top: 24px; }
h2 .n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--sunk); color: var(--ink-2); font-size: 17px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
h2.us .n { background: var(--mark); color: var(--ink); }

/* At a glance. One row per item, the first cell links to its section */
.glance { margin: 0 0 16px; }
.glance .card { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.glance table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.glance th { padding: 16px 14px 12px; text-align: left; vertical-align: bottom; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.glance td { padding: 15px 14px; border-top: 1px solid var(--line); white-space: nowrap; }
.glance th:first-child, .glance td:first-child { position: sticky; left: 0; z-index: 1; padding-left: 22px; background: #fff; }
.glance td:first-child { font-weight: 700; }
.glance td:first-child a { text-decoration: none; }
.glance td:first-child a:hover { text-decoration: underline; }
.glance .r { display: inline-block; width: 22px; color: var(--ink-3); font-weight: 600; }
.glance tr.us td { background: var(--warm); font-weight: 600; }
.glance tr.us td:first-child { font-weight: 800; }
.glance .none { color: var(--ink-3); }
.glance figcaption { margin: 12px 22px 0; font-size: 14px; color: var(--ink-3); }

/* Diagrams: a payoff at expiry or a price sketch. Lines are SVG stretched to the box, words are HTML so they stay readable on a phone */
.chart { margin: 0 0 16px; }
.chart .card { padding: 28px 28px 46px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.chart figcaption { margin: 12px 22px 0; font-size: 14px; color: var(--ink-3); }
.plot { position: relative; height: 240px; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot path, .plot line { vector-effect: non-scaling-stroke; }
.plot .gain { fill: var(--gold); fill-opacity: .16; }
.plot .loss { fill: var(--ink); fill-opacity: .045; }
.plot .guide { stroke: var(--line); stroke-width: 1; }
.plot .zero { stroke: #cbc4b8; stroke-width: 1; }
.plot .pay { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.plot .pay.alt { stroke: var(--ink-3); stroke-width: 2; }
.plot .wick { stroke: #cbc4b8; stroke-width: 1.5; }
.plot .body { stroke: #cbc4b8; stroke-width: 1.5; }
.plot .body.up { fill: #fff; }
.plot .body.down { fill: #cbc4b8; }
.plot .wick.on, .plot .body.on { stroke: var(--ink-2); }
.plot .body.down.on { fill: var(--ink-2); }
.plot .price { fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.plot .level { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.plot .level.soft { stroke: #cbc4b8; stroke-width: 1.5; }
.plot .band { fill: var(--gold); fill-opacity: .1; stroke: none; }
.plot .tag, .plot .tick, .plot .lab { position: absolute; font-size: 13px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plot .tag { left: 0; }
.plot .tag.up { transform: translateY(calc(-100% - 7px)); }
.plot .tag.down { transform: translateY(7px); }
.plot .tick { top: 100%; transform: translate(-50%, 12px); }
.plot .lab { color: var(--ink-2); font-weight: 600; transform: translate(12px, -50%); }
.plot .lab.l { transform: translate(calc(-100% - 12px), -50%); }
.plot .lab.a { transform: translate(-50%, calc(-100% - 10px)); }
.plot .lab.b { transform: translate(-50%, 10px); }
.plot .lab.ar { transform: translate(10px, calc(-100% - 6px)); }
.plot .lab.al { transform: translate(calc(-100% - 10px), calc(-100% - 6px)); }
.plot .lab.br { transform: translate(10px, 6px); }
.plot .lab.bl { transform: translate(calc(-100% - 10px), 6px); }
.plot .lab.soft { color: var(--ink-3); font-weight: 400; }
.plot .dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #fff; }
.plot .dot.soft { background: var(--ink-3); }
.chart .sketch { margin-bottom: -18px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -6px 0 18px; font-size: 13px; color: var(--ink-2); }
.key::before { content: ""; display: inline-block; width: 16px; height: 3px; margin: 0 8px 3px 0; vertical-align: middle; border-radius: 2px; background: var(--gold); }
.key.alt::before { background: var(--ink-3); }

/* The one thing the reader must not miss */
.note { margin: 56px 0 0; padding: 22px 24px 4px; background: var(--warm); border: 1px solid var(--warm-line); border-radius: 18px; }
.note h2 { margin: 0 0 6px; font-size: 21px; }
.note p { font-size: 17px; }

.sources { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-3); }

/* Same close on every page */
.cta { margin: 72px 0 0; padding: 32px 32px 34px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.cta .toast { position: relative; height: 41px; margin: 0 -32px 24px; background: url(assets/toast-burnt.jpg) center / 40px 41px repeat-x; filter: brightness(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.cta .toast::after { content: ""; position: absolute; top: 0; left: calc(50% + 20px); width: 40px; height: 41px; background: url(assets/toast-golden.jpg) 0 0 / 100% 100%; }
.cta h2 { display: block; margin: 0 0 8px; font-size: 30px; }
.cta p { max-width: 440px; margin: 0 auto 22px; color: var(--ink-2); text-wrap: balance; }
.cta .btn { padding: 14px 26px; font-size: 16px; }

.foot { max-width: calc(var(--text) + 40px); margin: 0 auto; padding: 56px 20px 64px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .lede { font-size: 19px; }
  article h2 { font-size: 24px; }
  .cta { padding: 24px 20px 26px; }
  .cta .toast { margin: 0 -20px 20px; }
  .cta h2 { font-size: 25px; }
  .chart .card { padding: 22px 18px 42px; }
  .plot { height: 190px; }
  .plot .tag, .plot .tick, .plot .lab { font-size: 12px; }
}