/* Q[B] — a letter about earnings
   Real typewriter: one size, one weight, no italics, no bold.
   Handwritten ink-blue cursive only for Q[*] tokens. */

:root{
  --paper:#f5ead0;
  --typewriter-ink:#2a1f14;
  --typewriter-faint:#5a4a36;
  --typewriter-mute:#8a7a60;
  --ink-blue:#1e3a6e;
  --ink-blue-deep:#14264a;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--paper);
  color:var(--typewriter-ink);
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:18px;
  font-weight:400;
  font-style:normal;
  -webkit-font-smoothing:antialiased;
  line-height:1.85;
  letter-spacing:.01em;
  min-height:100vh;
}

.letter{
  max-width:660px;
  margin:0 auto;
  padding:80px 32px 120px;
}
@media (max-width:540px){
  .letter{padding:48px 22px 80px}
  html,body{font-size:16px}
}

/* ============================================================
   HANDWRITING — ink-blue cursive, for Q[*] tokens only
   ============================================================ */
.hw{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  color:var(--ink-blue);
  letter-spacing:0;
}

/* Inline handwritten link — generic (not a Q[*] token).
   Used for one-off cursive words inside typewriter text.
   No rotation, no inline-block: just cursive ink-blue letters
   mixed into the typewriter line. The font is the contrast. */
.ink{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  color:var(--ink-blue);
  font-size:1.2em;
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:color 220ms ease;
}
a.ink:hover{color:var(--ink-blue-deep)}

/* Inline Q[*] mark — handwritten among typewriter text */
.qmark{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  color:var(--ink-blue);
  font-size:1.35em;
  line-height:0.8;
  display:inline-block;
  transform:translateY(3px) rotate(-2deg);
  letter-spacing:-.02em;
  /* pull tight against preceding word — cursive Q has visual left-bearing */
  margin:0 1px 0 -3px;
  text-decoration:none;
  border:0;
  transition:color 220ms ease;
}
.qmark:nth-of-type(2n){transform:translateY(2px) rotate(1.5deg)}
.qmark:nth-of-type(3n){transform:translateY(3px) rotate(-1deg)}
a.qmark{cursor:pointer}
a.qmark:hover{color:var(--ink-blue-deep)}

/* Letterhead — wordmark + date, both handwritten */
.head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin:0 0 64px;
}
@media (max-width:540px){
  .head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:48px;
  }
}

.wordmark{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  font-size:42px;
  line-height:1;
  color:var(--ink-blue);
  letter-spacing:.005em;
  transform:rotate(-1.5deg);
  display:inline-block;
}
@media (max-width:540px){.wordmark{font-size:36px}}

.date{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  font-size:26px;
  line-height:1;
  color:var(--ink-blue);
  transform:rotate(2deg);
  letter-spacing:.01em;
  display:inline-block;
}
@media (max-width:540px){.date{font-size:22px;transform:rotate(-1deg)}}

/* Handwritten links — same visual as non-link siblings.
   Affordance: cursor changes, the ink deepens, and the mark lifts 1px.
   No underline, no rotation change, no chrome at rest. */
a.wordmark, a.date, a.qsig{
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:color 220ms ease, transform 220ms ease;
}
a.wordmark:hover{
  color:var(--ink-blue-deep);
  transform:rotate(-1.5deg) translateY(-1px);
}
a.date:hover{
  color:var(--ink-blue-deep);
  transform:rotate(2deg) translateY(-1px);
}
@media (max-width:540px){
  a.date:hover{transform:rotate(-1deg) translateY(-1px)}
}
a.qsig:hover{
  color:var(--ink-blue-deep);
  transform:rotate(-3deg) translateY(-1px);
}

/* ============================================================
   TYPEWRITER — every non-handwritten element, same size + weight
   ============================================================ */
.salutation,
.lp,
.pr-quote,
.src,
.yours,
.years,
.years li,
.intro{
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:18px;
  font-weight:400;
  font-style:normal;
  line-height:1.85;
  letter-spacing:.01em;
  color:var(--typewriter-ink);
}
@media (max-width:540px){
  .salutation,.lp,.pr-quote,.src,.yours,.years,.years li,.intro{font-size:16px;line-height:1.75}
}

.salutation{margin:0 0 28px}
.lp{margin:0 0 28px}
.intro{margin:0 0 40px}

/* Pull-quote — indented both sides, no border, no italic (typewriter convention) */
.pr-quote{
  margin:32px 48px;
  padding:0;
  border:0;
}
@media (max-width:540px){.pr-quote{margin:24px 20px}}

.src{margin:0 0 28px}
.src a{
  color:var(--typewriter-ink);
  text-decoration:none;
  border-bottom:1px solid #b8a886;
}
.src a:hover{
  color:var(--ink-blue);
  border-bottom-color:var(--ink-blue);
}

/* The litany — 3 columns, top-to-bottom flow */
.years{
  list-style:none;
  margin:40px auto;
  padding:0;
  columns:3;
  column-gap:56px;
  text-align:center;
  max-width:420px;
  font-variant-numeric:lining-nums tabular-nums;
}
.years li{margin:0;break-inside:avoid}
@media (max-width:540px){
  .years{columns:3;column-gap:18px;max-width:none}
}

/* The litany — year + name + place, borderless table.
   Typewriter, baseline-aligned, faint third column. */
.acquisitions{
  margin:40px auto;
  border-collapse:collapse;
  font-variant-numeric:lining-nums tabular-nums;
}
.acquisitions td{
  border:0;
  padding:2px 28px 2px 0;
  vertical-align:baseline;
  white-space:nowrap;
}
.acquisitions td:last-child{
  padding-right:0;
  color:var(--typewriter-faint);
}
@media (max-width:540px){
  .acquisitions td{padding:2px 14px 2px 0;white-space:normal}
  .acquisitions td:first-child{white-space:nowrap}
}

/* P.S. — typewriter, indented, with a dotted divider above.
   No cursive. Q's most committed moment, plainly typeset. */
.ps{
  margin:64px 0 0;
  padding:32px 0 0;
  border-top:1px dotted var(--typewriter-mute);
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:18px;
  font-weight:400;
  line-height:1.85;
  color:var(--typewriter-ink);
}
.ps .label{color:var(--typewriter-faint);margin-right:6px}
@media (max-width:540px){
  .ps{font-size:16px;line-height:1.75;margin-top:48px;padding-top:24px}
}

/* Closing */
.yours{margin:52px 0 8px}

/* Signature — handwritten ink-blue cursive */
.qsig{
  margin:0;
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  font-size:58px;
  line-height:1;
  color:var(--ink-blue);
  transform:rotate(-3deg);
  display:inline-block;
  letter-spacing:.01em;
}
@media (max-width:540px){.qsig{font-size:50px}}

/* ============================================================
   LEDGER — the archive table.  Plain typewriter, no color signal.
   ============================================================ */
.ledger{
  width:100%;
  border-collapse:collapse;
  margin:0 0 56px;
  font-variant-numeric:lining-nums tabular-nums;
}
.ledger th{
  text-align:left;
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:13px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--typewriter-mute);
  padding:0 18px 14px 0;
  border-bottom:1px solid var(--typewriter-mute);
}
.ledger th:last-child,
.ledger td:last-child{padding-right:0;text-align:right}
.ledger td{
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:18px;
  color:var(--typewriter-ink);
  padding:18px 18px 18px 0;
  border-bottom:1px solid #d8c89c;
  vertical-align:baseline;
}
.ledger td.ticker{letter-spacing:.04em}
.ledger td .arrow{color:var(--typewriter-mute);padding:0 4px}
@media (max-width:540px){
  .ledger th{font-size:11px;padding:0 10px 10px 0}
  .ledger td{font-size:15px;padding:14px 10px 14px 0}
}

/* ============================================================
   SUBSCRIBE — typewriter input, handwritten send. One line.
   ============================================================ */
.subscribe{
  margin:48px 0;
  padding:0;
  border:0;
}
.subscribe .row{
  display:flex;
  align-items:baseline;
  gap:18px;
  border-bottom:1px solid var(--typewriter-mute);
  padding:6px 0 8px;
  transition:border-color 220ms ease;
}
.subscribe .row:focus-within{border-bottom-color:var(--ink-blue)}
.subscribe input[type=email]{
  font-family:"Special Elite","Courier Prime","Courier New",monospace;
  font-size:18px;
  color:var(--typewriter-ink);
  background:transparent;
  border:0;
  padding:4px 0;
  flex:1 1 auto;
  min-width:0;
  outline:none;
  letter-spacing:.01em;
}
.subscribe input[type=email]::placeholder{color:var(--typewriter-mute);opacity:.7}
.subscribe button{
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:600;
  font-size:30px;
  line-height:1;
  color:var(--ink-blue);
  background:transparent;
  border:0;
  padding:0 2px;
  cursor:pointer;
  transition:color 220ms ease;
  letter-spacing:.01em;
  transform:rotate(-2deg);
  display:inline-block;
  flex:0 0 auto;
}
.subscribe button:hover{color:var(--ink-blue-deep)}
@media (max-width:540px){
  .subscribe input[type=email]{font-size:16px}
  .subscribe button{font-size:26px}
}

/* Print */
@media print{
  html,body{background:#fff;color:#000}
  .letter{max-width:none;padding:0;margin:0}
  .salutation,.lp,.pr-quote,.src,.yours,.years,.intro{color:#000}
  .wordmark,.date,.qsig,.qmark{color:#1e3a6e !important}
  .subscribe{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  @page{margin:0.6in}
}