/* www.cheban.com: Cheban's black and white, laid out like a financial news
   front page. Inter for text, Newsreader for big headlines, Azeret Mono for
   bylines and dates. */
:root {
  --ink: #111;
  --muted: #5f6368;
  --line: #e3e3e3;
  --paper: #fff;
  --soft: #f7f7f5;
  /* The one accent color (market green; it was gold, and these two are all
     that change to try another): bright for focus rings, a deeper shade for
     text on white (for contrast). */
  --gold: #1e8e3e;
  --gold-deep: #137333;
  --accent: #111;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Azeret Mono", ui-monospace, Menlo, monospace;
  /* Story text: a sturdy reading serif (Brew Markets uses Reckless). */
  --text-serif: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: the wordmark (white artwork, shown black here) and the links. */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand img { width: 120px; height: auto; filter: invert(1); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-weight: 600; font-size: 16px; text-decoration: none; }
.nav .nav-subscribe { padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 4px; }
/* Topics ▾: a small menu of the topic pages. */
.nav-topics { position: relative; }
.nav-topics summary { display: flex; align-items: center; gap: 4px; font-weight: 600; cursor: pointer; list-style: none; }
.nav-topics summary::-webkit-details-marker { display: none; }
.nav-topics summary::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.nav-topics[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.nav-menu { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 210px; padding: 8px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.nav-menu a { display: block; padding: 10px 16px; font-weight: 500; }
.nav-menu a:hover { background: var(--soft); text-decoration: none; }
.nav .nav-subscribe:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
/* Subscribe opens a panel that slides down under the header (on every page). */
.nav .nav-subscribe { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-subscribe::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.nav .nav-subscribe[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.nav .nav-subscribe[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
.sub-panel { border-top: 1px solid var(--line); background: var(--soft); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); animation: sub-slide .22s ease-out; max-height: calc(100vh - 68px); overflow-y: auto; }
@keyframes sub-slide { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sub-panel { animation: none; } }
.sub-panel-inner { padding-top: 28px; padding-bottom: 36px; }
.sub-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.sub-panel-head h2 { margin: 0 0 4px; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.5px; }
.sub-panel-head p { margin: 0; color: #3c4043; }
.sub-panel-close { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 30px; line-height: 1; color: var(--ink); cursor: pointer; }
.sub-panel-close:hover { background: rgba(0, 0, 0, .06); }
.sub-panel-body { max-width: 560px; }
.sub-panel-pitch { margin: 0 0 18px; font-size: 17px; line-height: 1.55; }

/* Hero: a black band, the pitch on the left and the signup on the right. */
.hero { background: var(--ink); color: #fff; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hero h1 { margin: 0 0 16px; font: 500 48px/1.1 var(--serif); letter-spacing: -.5px; }
.hero-copy p { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: #d6d6d6; }
.fine { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.hero .fine { color: #b5b5b5; }
.fine a { color: inherit; }

/* Signup forms: a full-width field and button, or fields side by side in the band. */
.signup { display: grid; gap: 12px; }
.signup input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff; color: var(--ink); font: 17px var(--sans); }
/* Focus: a gold ring around the field. */
.signup input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
/* The same on the black hero. */
.hero .signup input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 2px var(--gold); }
.signup button { height: 52px; border: 0; border-radius: 4px; background: var(--ink); color: #fff; font: 600 17px var(--sans); cursor: pointer; }
.signup button:hover { background: #333; }
.signup button:disabled { opacity: .6; cursor: default; }
.hero .signup button { background: #fff; color: var(--ink); }
.hero .signup button:hover { background: #e9e9e9; }
.signup-error { margin: 0; font-size: 14px; color: #d93025; }
.hero .signup-error { color: #ff8a80; }
.signup-done { margin: 0; padding: 16px; border-radius: 4px; background: #e6f4ea; color: #137333; font-weight: 600; }

/* Front page: the latest issue big on the left, the next five listed beside it. */
main.wrap { padding-top: 56px; padding-bottom: 72px; }
.top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.lead { display: block; border: 1px solid var(--line); text-decoration: none; background: var(--soft); }
.lead-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead-body { padding: 24px 28px 28px; }
.lead-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chip { padding: 3px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.mono, .byline, .mono-link { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.mono { color: var(--muted); }
.lead h2 { margin: 0 0 10px; font: 500 34px/1.15 var(--serif); }
.dek { margin: 0; color: var(--muted); font-size: 17px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.3px; }
.mono-link { font-weight: 500; text-decoration: none; white-space: nowrap; }
.latest-item { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-deep); }
.latest-item h3, .card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; }
.lead h2, .latest-item h3, .card h3, .story-row h3 { transition: color 150ms ease; }
.lead:is(:hover, :focus-visible) h2,
.latest-item:is(:hover, :focus-visible) h3,
.card:is(:hover, :focus-visible) h3,
.story-row:is(:hover, :focus-visible) h3 { color: var(--gold-deep); }
.byline { margin: 0; color: var(--muted); }

.more { margin-top: 72px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 24px; }
.card { display: block; text-decoration: none; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; background: var(--soft); }
.empty { padding: 48px 0; color: var(--muted); }

/* The second signup, with the optional mobile number and its SMS terms. */
.signup-band { background: var(--soft); border-top: 1px solid var(--line); }
.band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.signup-band h2 { margin: 0 0 8px; font: 500 34px/1.15 var(--serif); }
.signup-band p { margin: 0; color: var(--muted); }
/* Fields stack: email, mobile number, then the button. */
.signup-phone { grid-template-columns: minmax(0, 1fr); }
.signup-phone .signup-error { grid-column: 1 / -1; }
.signup-phone button { padding: 0 28px; }
.band-form .fine, .hero-form .fine { font-size: 12px; }
/* "SMS Terms": a text link that shows or hides the full SMS terms below. */
.sms-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.sms-toggle::after { content: " ▾"; text-decoration: none; display: inline-block; margin-left: 2px; }
.sms-toggle[aria-expanded="true"]::after { content: " ▴"; }
.sms-line, .signup-band .sms-line { margin-top: 20px; text-align: center; }
.band-form { width: 100%; max-width: 520px; justify-self: end; }
.sms-toggle:focus:not(:focus-visible) { outline: none; }
.sms-terms, .signup-band .sms-terms { margin-top: 20px; }

.site-footer { background: var(--ink); color: #bdbdbd; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 36px; padding-bottom: 36px; font-size: 14px; }
.footer-row nav { display: flex; gap: 24px; }
.footer-row a { text-decoration: none; color: #fff; }
.footer-row p { margin: 0; }

@media (max-width: 960px) {
  .hero-row, .top, .band-row { grid-template-columns: minmax(0, 1fr); }
  .band-form { justify-self: start; }
  .hero-row { gap: 28px; padding-top: 44px; padding-bottom: 44px; }
  .hero h1 { font-size: 36px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .header-row { height: 60px; }
  .brand img { width: 100px; }
  .nav { gap: 16px; }
  .nav-menu { left: auto; right: -8px; }
  .nav .nav-subscribe { padding: 6px 12px; }
  .hero h1 { font-size: 31px; }
  .hero-copy p { font-size: 17px; }
  main.wrap { padding-top: 32px; padding-bottom: 56px; }
  .lead-body { padding: 18px 18px 22px; }
  .lead h2 { font-size: 27px; }
  .grid, .signup-phone { grid-template-columns: minmax(0, 1fr); }
  .signup-band h2 { font-size: 28px; }
  .band-row { gap: 24px; padding-top: 32px; padding-bottom: 32px; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

/* Privacy policy and terms: one readable column of legal text. */
main.legal { padding-top: 56px; padding-bottom: 80px; }
.legal-body { max-width: 760px; font-size: 17px; line-height: 1.7; color: #2b2b2b; }
.legal-body h1 { margin: 0 0 28px; font: 500 44px/1.1 var(--serif); color: var(--ink); }
.legal-body h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.legal-body h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 16px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { text-underline-offset: 3px; }
.legal-body .callout, .legal-body .contact-box { margin: 20px 0; padding: 16px 20px; border-left: 3px solid var(--ink); background: var(--soft); }
@media (max-width: 600px) {
  main.legal { padding-top: 36px; padding-bottom: 56px; }
  .legal-body { font-size: 16px; }
  .legal-body h1 { font-size: 34px; }
}

/* Topic pages: the topic's name, then its stories in the image grid. */
main.topic-page { padding-top: 48px; padding-bottom: 80px; }
.topic-page h1 { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; }
@media (max-width: 600px) { main.topic-page { padding-top: 32px; } .topic-page h1 { font-size: 30px; } }

/* A story, laid out like Brew Markets': topic, headline, summary and a big
   picture across a wide column; then a narrower reading column with the
   byline, date and reading time, topic, and the text in a serif. */
main.story-page { padding-top: 40px; padding-bottom: 64px; }
.story-head { max-width: 1000px; margin: 0 auto; }
.story-topic { display: inline-block; text-decoration: none; }
.story-head h1 { margin: 10px 0 12px; font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -1px; }
.story-dek { margin: 0 0 32px; font-size: 22px; line-height: 1.45; color: #3c4043; }
.story-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--soft); }
.story-main { max-width: 640px; margin: 36px auto 0; }
.story-author { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.story-meta { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.story-topics { margin: 0 0 32px; font-size: 14px; color: var(--muted); }
.story-topics span { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-right: 6px; }
.story-topics a { color: var(--ink); text-underline-offset: 3px; }
.story-body { font-family: var(--text-serif); font-size: 21px; line-height: 1.65; color: #1f1f1f; }
.story-body p, .story-body ul, .story-body ol { margin: 0 0 22px; }
.story-body li { margin-bottom: 10px; }
.story-body h2 { margin: 40px 0 14px; font-family: var(--sans); font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--ink); letter-spacing: -.2px; }
.story-body a { text-underline-offset: 3px; }
.story-body strong, .story-body b { font-weight: 600; color: var(--ink); }
.story-more { margin-top: 64px; margin-bottom: 72px; }
@media (max-width: 600px) {
  main.story-page { padding-top: 24px; padding-bottom: 40px; }
  .story-head h1 { font-size: 32px; letter-spacing: -.5px; }
  .story-dek { font-size: 18px; margin-bottom: 22px; }
  .story-main { margin-top: 24px; }
  .story-body { font-size: 19px; }
}
/* Newsletter issues' text (imported from beehiiv): market tables, pictures and section headings. */
.story-body table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-family: var(--sans); font-size: 16px; line-height: 1.4; }
.story-body th, .story-body td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.story-body th { font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.story-body th p, .story-body td p { margin: 0; }
.story-body img { display: block; max-width: 100%; height: auto; margin: 8px auto 24px; }
.story-body li p { margin: 0; }
.story-body h3 { margin: 28px 0 10px; font-family: var(--sans); font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.story-body blockquote { margin: 0 0 20px; padding: 4px 0 4px 18px; border-left: 3px solid var(--ink); color: var(--muted); }
/* A topic page's top: its name big, a line about it, a rule under both. */
.topic-head { padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.topic-page .topic-head h1 { margin: 8px 0 18px; font-size: 76px; line-height: 1.05; font-weight: 700; letter-spacing: -2px; }
.topic-head p { max-width: 880px; margin: 0; font-size: 21px; line-height: 1.55; color: #3c4043; }
@media (max-width: 600px) {
  .topic-head { padding-bottom: 28px; margin-bottom: 28px; }
  .topic-page .topic-head h1 { font-size: 46px; letter-spacing: -1px; }
  .topic-head p { font-size: 18px; }
}
/* Topic pages list their stories as rows: picture left, words right. */
.story-list { max-width: 1040px; }
.story-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.story-list .story-row:first-child { padding-top: 0; }
.story-row img, .story-row-blank { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--soft); }
.story-row h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; }
.story-row-dek { margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: #3c4043; }
@media (max-width: 600px) {
  .story-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; }
  .story-row h3 { font-size: 18px; margin-bottom: 6px; }
  .story-row-dek { display: none; }
  .story-row .kicker { font-size: 11px; margin-bottom: 4px; }
}
.story-body td:first-child, .story-body th:first-child { white-space: nowrap; }

/* /subscribe: the pitch and form on white at the left; a black panel at the
   right with a tilted phone showing an issue. */
.subscribe-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.subscribe-left { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 64px 48px; }
/* One shared container keeps the headline, copy and fields aligned. */
.subscribe-content { width: 100%; max-width: 520px; min-width: 0; }
.subscribe-content .signup { width: 100%; }
.subscribe-brand { display: block; }
.subscribe-brand img { width: 150px; height: auto; filter: invert(1); }
.subscribe-left h1 { margin-top: 56px; margin-bottom: 18px; font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -1.4px; }
.subscribe-pitch { margin-top: 0; margin-bottom: 32px; font-size: 18px; line-height: 1.6; color: #3c4043; }
.subscribe-legal { margin-top: 10px; }
/* The art: a black panel over the right part of the page and a big phone
   lying at an angle that spills past its edge and off the screen, like Brew Markets'.
   Everything in the phone is sized in em off its font size, which grows
   with the window's height, so the whole phone scales together. */
.subscribe-page { position: relative; overflow: hidden; }
.subscribe-art { position: relative; }
.subscribe-art::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30%; right: 0; background: var(--ink); }
.phone { position: absolute; top: 15vh; left: -2%; z-index: 1; width: 26em; padding: .9em; border-radius: 3.4em; background: #f4f4f4; box-shadow: inset 0 0 0 .14em #dcdcdc; font-size: clamp(13px, 2.1vh, 25px); transform-style: preserve-3d; transform: perspective(240em) rotateX(44deg) rotateZ(-32deg); transform-origin: 50% 0; }
/* The phone lies on a table: layers under it give it a metal edge, and the
   lowest one casts its shadow onto the panel. */
.phone::before, .phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.phone::before { background: #c9c9c9; transform: translateZ(-.6em); }
.phone::after { background: #b5b5b5; transform: translateZ(-1.2em); box-shadow: 1.5em 2.5em 4em rgba(0, 0, 0, .45); }
/* Narrower laptops: the phone moves right so it clears the form. */
@media (min-width: 961px) and (max-width: 1200px) { .phone { left: 10%; } }
.phone-screen { height: 62em; overflow: hidden; padding: 2.2em 1.6em; border-radius: 2.6em; background: #fff; font-family: Helvetica, Arial, sans-serif; color: #202124; }
.phone-banner { width: 100%; border-radius: .8em; margin-bottom: 1.2em; }
.phone-intro { margin: 0 0 1em; font-size: .92em; line-height: 1.5; }
.phone-label { margin: .4em 0 .5em; font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.phone-market { width: 100%; margin-bottom: 1.2em; border-collapse: collapse; font-size: .92em; }
.phone-market td { padding: .5em 0; border-bottom: 1px solid #eee; }
.phone-market td:first-child { font-weight: 700; }
.phone-market td:last-child { text-align: right; }
.pill { display: inline-block; padding: .15em .55em; border-radius: .4em; font-weight: 700; font-size: .9em; }
.pill.up { background: #e6f4ea; color: #137333; }
.pill.down { background: #fce8e6; color: #c5221f; }
@media (max-width: 960px) {
  .subscribe-page { grid-template-columns: minmax(0, 1fr); }
  .subscribe-left { align-items: flex-start; padding: 40px 24px 56px; }
  .subscribe-content { max-width: 560px; }
  .subscribe-left h1 { margin-top: 40px; font-size: 40px; }
  .subscribe-art { display: none; }
}
@media (max-width: 600px) {
  .subscribe-left { padding: 28px 16px 44px; }
  .subscribe-brand img { width: 120px; }
  .subscribe-left h1 { margin-top: 32px; font-size: 34px; letter-spacing: -.8px; }
  .subscribe-pitch { font-size: 17px; }
}
/* On phones, a story's picture runs to the screen's edges (past the page's
   16px side padding). */
@media (max-width: 600px) { .story-image { width: calc(100% + 32px); max-width: none; margin: 0 -16px; border-radius: 0; } }
@media (max-width: 600px) {
  .sub-panel { max-height: calc(100vh - 60px); }
  .sub-panel-inner { padding-top: 20px; padding-bottom: 28px; }
  .sub-panel-head h2 { font-size: 26px; }
  .sub-panel-pitch { font-size: 16px; }
  .nav .nav-subscribe::after { display: none; }
}