/* Executive Sedan Forum: editorial index. Ivory paper, navy ink, oxblood accents, a silver coachline. */
:root{
  --paper:#F6F4EF;
  --paper-2:#EDEAE2;
  --card:#FBFAF7;
  --ink:#1C2433;
  --ink-soft:#434B5C;
  --ink-mute:#5A6272;
  --oxblood:#7A1F2B;
  --oxblood-deep:#5E1520;
  --silver:#A7ADB5;
  --silver-soft:#D5D8DC;
  --rule:#CFCBC1;
  --focus:#7A1F2B;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --col:44rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--sans)}
img{max-width:100%;height:auto}
a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--oxblood-deep)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem .8rem;z-index:5}
.skip:focus{left:1rem;top:1rem}

/* masthead */
.mast{background:var(--paper)}
.mast-line{border-bottom:1px solid var(--rule);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.mast-line .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;padding-bottom:.45rem}
.mast-line a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.mast-line a:hover{color:var(--oxblood)}
.mast-brand{display:flex;justify-content:center;padding-top:1.4rem;padding-bottom:1rem}
.brand{display:inline-block;line-height:0}
.logo-img{height:52px;width:auto}
.logo-img--sm{height:30px}
.sections-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 2rem;padding-bottom:.8rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.sections-nav a{color:var(--ink);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
.sections-nav a:hover{color:var(--oxblood)}
.sections-nav a[aria-current="page"]{border-bottom-color:var(--oxblood)}
.sections-nav .num{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:var(--oxblood);margin-right:.4rem;font-size:.95rem}
/* the one niche detail: a painted double coachline, like the pinstripe on a long wheelbase flank */
.coachline{height:6px;border-top:2px solid var(--oxblood);border-bottom:1px solid var(--silver);margin:0 auto;max-width:70rem}

/* home */
.lede{max-width:var(--col);margin:2.6rem auto 2rem;text-align:center}
.lede h1{font:700 clamp(1.9rem,4.5vw,2.8rem)/1.12 var(--serif);margin:0 0 .7rem;letter-spacing:-.01em}
.lede p{color:var(--ink-soft);margin:0;font-size:1.05rem}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:3rem;margin-bottom:3.5rem}
.rule-head{font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);border-top:1px solid var(--ink);padding-top:.7rem;margin:2.2rem 0 1rem;display:flex;justify-content:space-between;gap:1rem}
.rule-head:first-child{margin-top:0}
.rule-head span{letter-spacing:.06em;text-transform:none;font-weight:400;font-style:italic;font-family:var(--serif)}
.section-list{list-style:none;margin:0;padding:0}
.section-item{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.section-num{font:400 2.6rem/1 var(--serif);font-style:italic;color:var(--oxblood)}
.section-num.big{font-size:4.2rem}
.section-item h3{font:700 1.35rem/1.25 var(--serif);margin:0 0 .25rem}
.section-item h3 a{color:var(--ink);text-decoration:none}
.section-item h3 a:hover{color:var(--oxblood);text-decoration:underline}
.section-item p{margin:0;color:var(--ink-soft);font-size:.95rem}
.section-item .section-count{margin-top:.35rem;font-size:.8rem;color:var(--ink-mute);letter-spacing:.04em}
.dot{margin:0 .45rem;color:var(--silver)}

.index-list{list-style:none;margin:0;padding:0;counter-reset:idx}
.entry{counter-increment:idx;position:relative;padding:1rem 0 1rem 3rem;border-bottom:1px solid var(--rule)}
.entry::before{content:counter(idx,decimal-leading-zero);position:absolute;left:0;top:1.05rem;font:500 .95rem/1 var(--serif);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.entry-title{display:block;font:500 1.2rem/1.3 var(--serif);color:var(--ink);text-decoration:none}
.entry-title:hover{color:var(--oxblood);text-decoration:underline}
.entry-meta,.entry-last{margin:.3rem 0 0;font-size:.82rem;color:var(--ink-mute)}
.entry-last{margin-top:.1rem;font-style:italic}
.entry-meta b{color:var(--ink-soft);font-weight:600}
.pin{display:inline-block;font:700 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--oxblood);padding:.3rem .45rem;margin:0 .5rem .35rem 0;vertical-align:middle;border-radius:1px}

.side-box{border-top:1px solid var(--ink);padding-top:.7rem;margin-bottom:2rem}
.side-box h2{font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 .8rem}
.figures{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:2}
.figures b{font:700 1.5rem/1 var(--serif);color:var(--ink);margin-right:.3rem}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:.45rem 0;border-bottom:1px dotted var(--silver)}
.plain a{font-family:var(--serif);font-size:1.02rem;text-decoration:none}
.plain a:hover{text-decoration:underline}

/* board */
.crumbs{font-size:.78rem;letter-spacing:.06em;color:var(--ink-mute);margin:1.6rem 0 1rem}
.crumbs a{color:var(--ink-soft)}
.crumbs span[aria-hidden]{margin:0 .5rem;color:var(--silver)}
.board-head{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:1.2rem;margin-bottom:.5rem}
.board-head h1{font:700 clamp(1.7rem,4vw,2.5rem)/1.1 var(--serif);margin:0 0 .4rem}
.board-head p{margin:0;color:var(--ink-soft);max-width:40rem}
main > .index-list{max-width:52rem}
.reply-box{margin:2rem 0 3rem;padding:1rem 1.2rem;background:var(--paper-2);border-left:3px solid var(--silver);font-size:.92rem;color:var(--ink-soft)}
.reply-box p{margin:0}

/* thread: a narrow reading column */
.column{max-width:calc(var(--col) + 2.5rem)}
.thread-head{margin:0 0 2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--ink)}
.kicker{margin:0 0 .6rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--oxblood)}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline}
.thread-head h1{font:700 clamp(1.6rem,4vw,2.35rem)/1.15 var(--serif);margin:0 0 .8rem;letter-spacing:-.005em}
.thread-head .pin{font-size:.62rem}
.byline{margin:0;font-size:.85rem;color:var(--ink-mute)}
.byline b{color:var(--ink);font-weight:600}

.post{margin:0 0 2rem}
.letter-head{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.8rem;align-items:start;margin-bottom:.7rem}
.mono{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font:500 1.1rem/1 var(--serif);font-style:italic;color:var(--ink);background:var(--paper-2);border:1px solid var(--silver)}
.author-name{font-weight:700;font-size:.95rem;color:var(--ink);word-break:break-word}
.op-pill{display:inline-block;margin-left:.45rem;font:700 .62rem/1 var(--sans);letter-spacing:.12em;color:var(--oxblood);border:1px solid var(--oxblood);padding:.18rem .3rem;vertical-align:2px;border-radius:1px}
.author-meta{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.76rem;color:var(--ink-mute)}
.rank{font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.68rem;padding-top:.1rem}
.rank.r1{color:var(--ink-mute)}
.rank.r2{color:var(--ink-soft)}
.rank.r3{color:var(--ink)}
.rank.r4{color:var(--oxblood)}
.rank.rmod{color:var(--paper);background:var(--ink);padding:.1rem .35rem;border-radius:1px}
.when{text-align:right;font-size:.76rem;color:var(--ink-mute);line-height:1.4}
.when time{display:block}
.post-number{font-family:var(--serif);font-style:italic;color:var(--ink-mute);text-decoration:none}
.post-number:hover{color:var(--oxblood)}

.post-content{font-size:1.02rem}
.post-content p{margin:0 0 .95rem}
.post-content p:last-child{margin-bottom:0}
.post-content blockquote{margin:0 0 1rem;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--oxblood);font-family:var(--serif);font-style:italic;color:var(--ink-soft)}

/* the opening post reads like the lead of a feature */
.post.lead{padding-bottom:1.8rem;border-bottom:1px solid var(--rule);margin-bottom:2.2rem}
.post.lead .post-content{font-size:1.08rem}
.post.lead .post-content > p:first-child::first-letter,
.prose .dropcap::first-letter{float:left;font:700 3.6rem/.82 var(--serif);color:var(--oxblood);margin:.35rem .55rem 0 0;text-transform:uppercase}

/* replies are letters: indented, hung off a silver rule */
.post.letter{margin-left:2.2rem;padding-left:1.2rem;border-left:1px solid var(--silver)}
.post.letter.by-op{border-left:2px solid var(--oxblood)}

.post-footer{display:flex;gap:1rem;margin-top:.7rem}
.post-action,.post-link{background:none;border:0;padding:.2rem 0;font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;text-decoration:none}
.post-action:hover,.post-link:hover{color:var(--oxblood)}
.back{margin:-1.5rem 0 3rem;font-size:.85rem}

/* prose pages */
.prose h1{font:700 clamp(1.8rem,4vw,2.4rem)/1.15 var(--serif);margin:.2rem 0 1.2rem}
.prose h2{font:700 1.25rem/1.3 var(--serif);margin:2rem 0 .5rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.45rem}
.prose{padding-bottom:3rem}

/* colophon */
.colophon{border-top:2px solid var(--oxblood);background:var(--paper-2);font-size:.82rem;color:var(--ink-mute)}
.colophon .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;padding-top:1.4rem;padding-bottom:1.6rem}
.colophon p{margin:0;max-width:34rem}
.colophon nav{display:flex;gap:1.2rem}
.colophon nav a{color:var(--ink-soft);font-weight:600}

@media (max-width:860px){
  .home-grid{grid-template-columns:1fr;gap:1rem}
  .colophon .wrap{grid-template-columns:1fr;gap:.8rem}
}
@media (max-width:560px){
  .wrap{padding:0 1rem}
  .hide-sm{display:none}
  .logo-img{height:34px}
  .sections-nav{gap:.1rem 1.1rem;font-size:.74rem;justify-content:flex-start}
  .section-item{grid-template-columns:2.8rem 1fr}
  .section-num{font-size:2rem}
  .section-num.big{font-size:3rem}
  .entry{padding-left:2.3rem}
  .post.letter{margin-left:.6rem;padding-left:.9rem}
  .letter-head{grid-template-columns:2.2rem 1fr}
  .mono{width:2.2rem;height:2.2rem}
  .when{grid-column:2;text-align:left;display:flex;gap:.7rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}