/* =====================================================================
   TMC Partner Letter Library — COMPONENTS
   Consumes tokens.css. Pure CSS, runtime-agnostic. See ../DESIGN-SYSTEM.md.
   Orange is RESTRICTED here per locked direction: pull-quote rule, link
   hover, and the wordmark "o" only. Maroon is the primary accent.
   ===================================================================== */

/* ---- reset + base ---- */
html,body{margin:0;padding:0}
body{background:#f7f4ed}
.tmc-letter *{box-sizing:border-box}
.tmc-letter{
  background:var(--bg);color:var(--ink);font-family:var(--serif);
  font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.tmc-letter a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  transition:color .14s var(--ease),border-color .14s var(--ease)}
.tmc-letter a:hover{color:var(--accent-2);border-color:var(--accent-2)}
.tmc-letter em{font-style:italic}

/* ---- layout containers ---- */
.tmc-letter .wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad-x)}

/* ---- wordmark bar (masthead-as-statement) ---- */
.tmc-letter .wordmark{font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  padding:30px var(--pad-x) 0;max-width:var(--measure);margin:0 auto;width:100%}
.tmc-letter .wordmark .o{color:var(--accent-2)}   /* the only brand orange */

/* ---- hero ---- */
.tmc-letter .kicker{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:54px 0 0}
.tmc-letter h1.display{font-family:var(--serif);font-weight:600;color:var(--accent);
  font-size:var(--t-display);line-height:1.1;letter-spacing:-.012em;margin:.12em 0 .1em}
.tmc-letter .dek{font-family:var(--serif);font-style:italic;color:var(--ink-muted);
  font-size:clamp(20px,3vw,27px);line-height:1.2;margin:.18em 0 0}
.tmc-letter .cover{width:100%;display:block;border-radius:4px;margin:30px 0 40px;
  height:clamp(280px,52vw,470px);object-fit:cover;object-position:50% 42%;
  box-shadow:0 20px 48px rgba(26,26,26,.22)}

/* ---- body prose ---- */
.tmc-letter p{margin:0 0 1.18em}
.tmc-letter .salutation{font-style:italic;color:var(--ink-muted);font-size:1.05em;margin-bottom:.5em}
.tmc-letter .dropcap{float:left;font-family:var(--serif);font-weight:700;color:var(--accent);
  font-size:4.6em;line-height:.66;padding:.04em .09em 0 0;font-style:normal}
.tmc-letter .lead-bold{font-weight:700;color:var(--ink)}
.tmc-letter .pull{font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--ink);font-size:var(--t-pull);line-height:1.4;
  border-left:3px solid var(--accent-2);padding:.05em 0 .05em 22px;margin:1.5em 0}
.tmc-letter .invite{font-weight:600;color:var(--ink);font-size:1.06em;margin-top:1.5em}
.tmc-letter .sig{font-style:italic;color:var(--ink-muted);font-size:1.05em;margin-top:1.3em}

/* ---- dividers + section labels ---- */
.tmc-letter .rule{border:none;border-top:1px solid var(--rule);margin:var(--s-12) 0 var(--s-8);clear:both}
.tmc-letter .label{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:11.5px;color:var(--ink-muted);margin:0 0 .5em}
.tmc-letter .full-letter p{font-size:.92em;color:var(--ink-muted)}

/* ---- buttons (orange demoted: primary is maroon, not orange) ---- */
.tmc-letter .btn{display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:14px;letter-spacing:.02em;text-decoration:none;border-bottom:none;
  padding:14px 26px;border-radius:5px;transition:transform .12s var(--ease),background .14s var(--ease)}
.tmc-letter .btn:hover{transform:translateY(-1px)}
.tmc-letter .btn-primary{background:var(--accent);color:var(--bg)}
.tmc-letter .btn-primary:hover{background:var(--accent-stroke,#4a1014)}
.tmc-letter .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.tmc-letter .btn-ghost:hover{color:var(--ink)}

/* ---- partner CTA — restrained, editorial (not a corporate landing block) ---- */
.tmc-letter .cta{border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  padding:30px 0 34px;margin:40px 0}
.tmc-letter .cta h3{font-family:var(--serif);font-weight:600;font-size:1.35em;color:var(--ink);margin:0 0 .35em}
.tmc-letter .cta .window{color:var(--accent);font-weight:600}
.tmc-letter .cta .fine{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-muted);margin:.7em 0 1.1em}

/* ---- footer disclosure ---- */
.tmc-letter .disc{font-family:var(--sans);font-size:12px;line-height:1.62;color:var(--ink-muted);
  padding:8px 0 70px}
.tmc-letter .disc a{color:var(--accent)}
.tmc-letter .foot-mark{font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:18px}

/* =====================================================================
   INDEX / LIBRARY — bound-volume table of contents (locked direction)
   Reverse-chronological, year-grouped, hairline rules, no cards.
   ===================================================================== */
.tmc-letter .index-head{margin:54px 0 8px}
.tmc-letter .index-head h1{font-family:var(--serif);font-weight:600;color:var(--accent);
  font-size:var(--t-display);line-height:1.1;letter-spacing:-.012em;margin:0}
.tmc-letter .index-head .ethos{font-family:var(--serif);font-style:italic;color:var(--ink-muted);
  font-size:clamp(18px,2.4vw,22px);margin:.3em 0 0}
.tmc-letter .index-year{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--ink-muted);margin:var(--s-12) 0 var(--s-3)}
.tmc-letter .index-list{list-style:none;margin:0;padding:0}
.tmc-letter .index-item{border-top:1px solid var(--rule)}
.tmc-letter .index-item:last-child{border-bottom:1px solid var(--rule)}
.tmc-letter .index-item a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px 2px;border-bottom:none}
.tmc-letter .index-item a:hover .index-title{color:var(--accent-2)}
.tmc-letter .index-title{font-family:var(--serif);font-size:1.15em;color:var(--ink);
  font-weight:500;transition:color .14s var(--ease)}
.tmc-letter .index-by{font-family:var(--sans);font-size:13px;color:var(--ink-muted);
  white-space:nowrap;flex:none}