/* Category pages, editorial restyle (Ugur, 2026-10-20: the homepage's "C · Editorial" look;
   approved mockup 3P-handoff/category-pages/editorial-mockup-r1). Loaded only by
   Pages/Category.cshtml, after site.css, whose tokens and shared .cards / a.card rules it
   reuses. Every rule is scoped to body.catpage. The markup is unchanged: the hero card is now
   an open, text-only hero; section heads take the homepage's ruled head; the question rows
   and related categories are ruled rows and columns instead of boxed tiles. */
body.catpage { background:var(--surface); }
.catpage main { padding:0 22px 40px; }
.catpage .crumbs { max-width:1080px; margin:0 auto; padding:22px 22px 0; font-size:.82rem; color:var(--muted); }
.catpage .crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.catpage .crumbs li + li::before { content:"\203A"; margin-right:6px; color:var(--line-strong); }
.catpage .crumbs a:hover { color:var(--ink); text-decoration:underline; }
.catpage .crumbs [aria-current] { color:var(--ink); font-weight:600; }
/* Hero: the home hero's teal kicker, large Fraunces H1 and lede, with no card behind it. */
.catpage .hero { max-width:1080px; margin:0 auto; padding:40px 22px 64px; }
.catpage .hero-card { padding:0; background:none; color:var(--ink); }
.catpage .hero .eyebrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-teal); }
.catpage .hero .eyebrow .dot { width:4px; height:4px; border-radius:50%; background:var(--brand-teal); opacity:.6; }
.catpage .hero h1 { margin:16px 0 0; max-width:16ch; font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,5.6vw,4.2rem); line-height:1.02; letter-spacing:-.025em; color:var(--ink); overflow-wrap:break-word; text-wrap:balance; }
.catpage .hero .lede { margin:22px 0 0; max-width:40rem; font-size:1.15rem; line-height:1.6; color:#3f4757; }
/* The weekly pages' link to the other week (search.css has the same rule for its lede). */
.catpage .hero .lede a { font-weight:600; color:var(--accent); }
.catpage .hero .lede a:hover { color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }
/* Section heads: the homepage's .hp-head, a 2px ink rule, a teal eyebrow, a Fraunces title. */
.catpage main > section { padding-bottom:72px; }
.catpage .sec-head { border-top:2px solid var(--ink); padding-top:18px; margin:0 0 28px; }
.catpage .kicker { margin:0; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-teal); }
.catpage .sec-head h2 { margin:8px 0 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4vw,2.75rem);
  line-height:1.08; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
/* Question rows: ruled rows in two columns with a trailing arrow (the home canvas list). */
.catpage .tasks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
.catpage .task { display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); min-width:0; }
.catpage .task:nth-child(-n+2) { border-top:1px solid var(--line); }
.catpage .task > span:first-child { flex:1 1 auto; min-width:0; }
.catpage .task .q { display:block; font-weight:600; font-size:1.06rem; line-height:1.4; color:var(--ink); }
.catpage .task .to { display:block; margin-top:4px; font-size:.88rem; font-weight:500; color:var(--brand-teal); }
.catpage .task .arrow { flex:none; margin-left:auto; color:var(--muted); font-size:1.25rem; transition:transform .15s, color .15s; }
.catpage .task:hover .q { text-decoration:underline; text-underline-offset:3px; }
.catpage .task:hover .arrow, .catpage .task:focus-visible .arrow { color:var(--accent); transform:translateX(3px); }
/* Related categories: ruled columns with Fraunces names (the home release groups). */
.catpage .related { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 28px; }
.catpage .rel { display:block; min-width:0; border-top:2px solid var(--line-strong); padding-top:18px; }
.catpage .rel:hover { border-top-color:var(--brand-teal); }
.catpage .rel b { display:block; font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.catpage .rel span { display:block; margin-top:8px; font-size:.92rem; line-height:1.55; color:var(--muted); }
.catpage .rel em { display:block; margin-top:14px; font-style:normal; font-size:.88rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.catpage .rel:hover b { text-decoration:underline; text-underline-offset:3px; }
/* One layout on every category page (Ugur, 2026-11-04): the featured card beside the hero, the
   same size and in the same place everywhere. Its text boxes reserve their full height, two title
   lines and three description lines here and three and four on a phone, so a short description
   leaves white space inside the card and never changes its size (CategoryFeatured.MaxBlurbLength). */
.catpage .hero-split { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:40px; align-items:start; padding-bottom:56px; }
.catpage .hero-split .hero-card { align-self:center; min-width:0; }
.catpage .hp-featured h3 { font-size:1.32rem; line-height:1.2; min-height:2.4em; }
.catpage .hp-featured-blurb { margin-top:10px; font-size:.94rem; line-height:1.55; min-height:4.65em; }
.catpage .hp-featured-foot { margin-top:14px; flex-wrap:nowrap; }
.catpage .hp-note { white-space:nowrap; }
/* Personal Finance's body: a card per topic. */
.catpage .topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.catpage .topic { display:flex; flex-direction:column; min-width:0; padding:22px 22px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.catpage .topic h3 { margin:0; font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.22; letter-spacing:-.01em; color:var(--ink); overflow-wrap:break-word; }
.catpage .topic h3 a:hover { color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px; }
.catpage .topic-count { margin:6px 0 10px; font-size:.82rem; font-weight:600; color:var(--brand-teal); }
.catpage .topic-blurb { margin:0 0 14px; font-size:.92rem; line-height:1.5; color:var(--muted); }
.catpage .topic-picks { list-style:none; margin:0 0 16px; padding:12px 0 0; border-top:1px solid var(--line); font-size:.88rem; }
.catpage .topic-picks li { padding:4px 0; }
.catpage .topic-picks a { color:var(--ink); }
.catpage .topic-picks a:hover { color:var(--accent-strong); text-decoration:underline; }
.catpage .topic-all { margin-top:auto; font-size:.88rem; font-weight:600; color:var(--accent); }
.catpage .topic-all:hover { color:var(--accent-strong); text-decoration:underline; }
.catpage .powered { border-top:1px solid var(--line); }
/* Keyboard focus stays visible on every link the page adds (the whole row or tile is the link). */
.catpage .crumbs a:focus-visible,
.catpage .task:focus-visible,
.catpage .rel:focus-visible,
.catpage .topic a:focus-visible,
.catpage .hero-split a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:1020px) {
  .catpage .related { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px) {
  .catpage .hero-split { grid-template-columns:minmax(0,1fr); gap:28px; }
  .catpage .topics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .catpage .tasks { grid-template-columns:1fr; }
  .catpage .task:nth-child(2) { border-top:0; }
}
@media (max-width:640px) {
  .catpage .crumbs { padding:16px 16px 0; }
  .catpage .hero { padding:28px 16px 48px; }
  .catpage .hero .lede { font-size:1.05rem; }
  .catpage main { padding:0 16px 30px; }
  .catpage main > section { padding-bottom:56px; }
  .catpage .related { grid-template-columns:1fr; gap:24px; }
  .catpage .topics { grid-template-columns:minmax(0,1fr); gap:12px; }
  .catpage .topic { padding:18px; }
  .catpage .hp-featured h3 { font-size:1.3rem; min-height:3.6em; }
  .catpage .hp-featured-blurb { min-height:6.2em; }
  .catpage .hp-featured-foot { gap:8px; }
  .catpage .hp-featured .hp-go { white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce) { .catpage .task .arrow { transition:none; } }