/* ---- front page opener: quote | lead story | research rail ---- */
.front3{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 0;display:grid;grid-template-columns:minmax(0,19fr) minmax(0,58fr) minmax(0,23fr);align-items:start}
.f3-left{padding-right:28px}
.f3-lead{padding:0 36px;border-left:1px solid var(--rule);border-right:1px solid var(--rule);min-height:100%}
.f3-right{padding-left:28px}
.f3-head{margin:0 0 6px}
.f3-sub{margin:0 0 14px;font-family:var(--display);font-style:italic;font-size:15px;line-height:1.45;color:var(--ink-3)}

/* lead */
.f3-figure{margin:0 0 20px}
.f3-figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)}
.f3-figure figcaption{padding-top:7px}
.f3-kicker{margin-bottom:10px}
.f3-lead .f3-title{margin:0;font-weight:500;font-size:clamp(30px,3.1vw,46px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.f3-lead .f3-title a{color:var(--ink)}
.f3-lead .f3-title a:hover{color:var(--accent);text-decoration:none}
.f3-lead .f3-dek{margin:14px 0 0;max-width:none;font-size:19px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.f3-byline{margin-top:14px}

/* quote: typographic in the left rail */
.f3-left .qotd-date{margin:0 0 18px}
.f3-left .qotd{margin:0;padding:0;border:0}
.f3-left .qcard{--ink:#141414 !important;--mark:#660000 !important;--by:#660000 !important;background:none !important;aspect-ratio:auto;padding:4px 0 0;justify-content:flex-start;overflow:visible}
.f3-left .qcard:after{display:none}
.f3-left .qcard .qcard-text,.f3-left .qcard.len-m .qcard-text,.f3-left .qcard.len-l .qcard-text{font-family:var(--display);font-style:italic;font-weight:400;font-size:28px;line-height:1.28;letter-spacing:-.005em}
.f3-left .qcard.len-s .qcard-text{font-size:32px;line-height:1.2}
.f3-left .qcard.len-xl .qcard-text{font-size:22px;line-height:1.34}
.f3-left .qcard .qcard-mark{height:44px;margin-top:28px;font-size:84px;line-height:.85}
.f3-left .qcard .qcard-name{font-size:10.5px}
.f3-left .qcard .qcard-src{font-size:13px;margin-top:4px}
.f3-left .qcard .qcard-by{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule)}

/* right rail */
.f3-right>section+section{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.f3-list{list-style:none;margin:0 0 12px;padding:0}
.f3-list li{border-top:1px solid var(--rule-light)}
.f3-list li:first-child{border-top:0}
.f3-list a{display:block;padding:10px 0;font-family:var(--display);font-weight:500;font-size:16.5px;line-height:1.3;color:var(--ink)}
.f3-list li:first-child a{padding-top:2px}
.f3-list a:hover{color:var(--accent);text-decoration:none}
.f3-news-title{margin:0 0 4px;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.2;color:var(--ink)}
.f3-form{display:flex;flex-direction:column;gap:8px}
.f3-input{min-height:42px;border:1px solid var(--rule);background:#fff;font-family:var(--ui);font-size:14px;padding:10px 12px;color:var(--ink)}
.f3-button{min-height:42px;border:0;background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.f3-button:hover{background:var(--ink)}
.f3-form .promo-button-busy,.f3-form.loading .promo-button-idle{display:none}
.f3-form.loading .promo-button-busy{display:inline}
.f3-form .promo-msg{margin:4px 0 0;font-family:var(--ui);font-size:13px}
.f3-fine{margin:8px 0 0;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.f3-quiz-title{display:block;margin:4px 0 8px;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;color:var(--ink)}
.f3-quiz-title:hover{color:var(--accent);text-decoration:none}

/* glossary card, now on its own below */
.hp-gloss .tg-slot{max-width:520px}
.hp-gloss .tg-card{margin:0}
.hp-gloss:has(.tg-slot:empty){display:none}

/* tablet: lead + research rail, quote under the lead */
@media (max-width:1180px){
  .front3{grid-template-columns:minmax(0,1fr) minmax(0,300px);grid-template-areas:"lead right" "left right"}
  .f3-lead{grid-area:lead;padding:0 32px 0 0;border:0;min-height:0}
  .f3-right{grid-area:right;padding-left:28px;border-left:1px solid var(--rule)}
  .f3-left{grid-area:left;padding:26px 32px 0 0;margin-top:26px;border-top:1px solid var(--rule);border-right:1px solid var(--rule)}
  .f3-left .qotd-date{display:none}
}
/* phone: lead, research, quote, newsletter, quiz */
@media (max-width:820px){
  .front3{display:flex;flex-direction:column;align-items:stretch;padding-top:18px}
  .f3-right{display:contents}
  .f3-lead{order:1;padding:0;border:0}
  .f3-sci{order:2}
  .f3-left{order:3}
  .f3-news{order:4}
  .f3-quiz{order:5}
  .f3-sci,.f3-left,.f3-news,.f3-quiz{margin-top:30px !important;padding:20px 0 0 !important;border:0 !important;border-top:1px solid var(--ink) !important}
  .f3-figure{margin:0 -18px 18px}
  .f3-lead .f3-title{font-size:clamp(28px,7.6vw,34px);line-height:1.12}
  .f3-lead .f3-dek{font-size:17.5px}
  .f3-left .qcard .qcard-mark{margin-top:6px}
}

/* ---- Quote of the Day as a card: cream field, oxblood rule, same system as the glossary card ---- */
.f3-left .qbox{background:#F4ECDF;border-top:3px solid #660000 !important;padding:18px 20px 22px !important;margin:0}
.qbox-head{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(102,0,0,.22);font-family:var(--display);font-style:italic;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:0;text-transform:none;color:#660000}
.f3-left .qbox .qcard{padding:0}
.f3-left .qbox .qcard .qcard-mark{height:34px;margin-top:0;font-size:64px}
.f3-left .qbox .qcard .qcard-text,.f3-left .qbox .qcard.len-m .qcard-text,.f3-left .qbox .qcard.len-l .qcard-text{font-size:22px;line-height:1.3}
.f3-left .qbox .qcard.len-s .qcard-text{font-size:25px;line-height:1.22}
.f3-left .qbox .qcard.len-xl .qcard-text{font-size:18px;line-height:1.36}
.f3-left .qbox .qcard .qcard-by{border-top-color:rgba(102,0,0,.22)}
.tg-slot-m:empty,.hp-quiz-m:empty{display:none}

/* ---- rubric strip under the phone header (swipe sideways) ---- */
.rubric-strip{display:none}

@media (max-width:820px){
  /* Today block: date, quote card, glossary card */
  .f3-left .qotd-date{display:block !important;margin:0 0 12px}
  .f3-left .qbox{padding:18px 20px 22px !important}
  .f3-left .qbox .qcard .qcard-text,.f3-left .qbox .qcard.len-m .qcard-text,.f3-left .qbox .qcard.len-l .qcard-text{font-size:25px}
  .f3-left .qbox .qcard.len-s .qcard-text{font-size:29px}
  .f3-left .qbox .qcard.len-xl .qcard-text{font-size:20px}
  .tg-slot-m .tg-card{margin:16px 0 0}

  .rubric-strip{display:block;position:relative;border-top:1px solid var(--rule-light)}
  .rubric-strip ul{display:flex;flex-wrap:nowrap;gap:22px;margin:0;padding:9px var(--pad) 10px;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
  .rubric-strip ul::-webkit-scrollbar{display:none}
  .rubric-strip li{flex:0 0 auto;border:0}
  .rubric-strip a{color:var(--ink)}
  .rubric-strip a:hover{color:var(--accent);text-decoration:none}
  .rubric-strip:after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);pointer-events:none}

  /* The Bookshelf: covers side by side, swipe */
  .hp-books .bk-grid{display:flex !important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none}
  .hp-books .bk-grid::-webkit-scrollbar{display:none}
  .hp-books .bk{flex:0 0 82%;scroll-snap-align:start;grid-template-columns:72px minmax(0,1fr)}
}