/* ==========================================================================
   The Advocate Path: the parts every inner page shares (human-made redesign, inner pages, 2026-10-14).
   Loaded after home.css and before the page files. It uses the home page's own pieces (the ribbon file card
   .file-card/.fc-ribbon, the intake sheet .ap-intake, the request section .ap-get, the ribbon label .ribbon-label from
   home.css) and adds: the inner page head, section heads, the article file card (PostCard), the oxblood file card, the
   ribbon-bound note, the Courier tab labels with a ribbon under the open one, the ribbon accordion, the oxblood curve
   panel, the brass-matted photo and the ribbon bullet list. Every rule is scoped to .in-page (the wrapper of each inner
   page), so the home page never sees them.
   ========================================================================== */

.in-page { overflow-x: clip; }
.in-page img { filter: saturate(0.86) sepia(0.06) contrast(1.02); }

/* ---- page head: crumbs, the title and the lede on parchment ---------------------------------------------------- */
.in-page .page-head { position: relative; padding: clamp(28px, 3vw, 44px) 0 clamp(44px, 4.6vw, 72px); }
.in-page .page-head h1 {
  max-width: 15em;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-size: var(--text-h1);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.in-page .page-head .lede { max-width: 33em; margin: 0; font-size: var(--text-lede); line-height: 1.6; }
.in-page .breadcrumb { margin-bottom: clamp(20px, 2.2vw, 30px); color: var(--muted-text); }
.in-page .breadcrumb-item + .breadcrumb-item::before { color: var(--brass); }
.in-page .breadcrumb a { color: var(--muted-text); text-decoration-color: var(--line-hair); }
.in-page .breadcrumb a:hover { color: var(--ox); text-decoration-color: var(--brass); }
.in-page .breadcrumb-item.active { color: var(--ink-text); }
/* the brass rule that closes a head drawn as one long curve (the path), like the home hero's foot */
.in-path { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: clamp(40px, 6vw, 92px); pointer-events: none; }
.in-path path { fill: none; stroke: var(--brass); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ---- sections and their heads -------------------------------------------------------------------------------- */
.in-page section { padding-block: 0; }
.in-page .in-sec { padding-block: clamp(56px, 40px + 4vw, 104px); }
.in-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(32px, 3.4vw, 48px); }
.in-sec-head h2 { margin: 0; max-width: 17em; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.014em; }
.in-sec-head .link-arrow { flex: none; padding-bottom: 6px; }
.in-page h2 { letter-spacing: -0.012em; }
.in-page .link-arrow { white-space: normal; }

/* ---- the article as a ribbon file card (PostCard) -------------------------------------------------------------- */
.in-page .post-card { height: 100%; padding: 12px 12px 20px; }
.in-page .post-card .fc-ribbon { left: 12px; }
.pc-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line-hair); }
.pc-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .pc-img { transform: scale(1.03); }
.pc-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 8px 0; }
.pc-cat { display: block; margin: 0 0 8px; color: var(--brass-ink); font: italic 400 16px / 1.3 var(--font-body); }
.post-card .pc-title { margin: 0 0 10px; color: var(--ink-text); font-size: clamp(20px, 0.3vw + 18.4px, 22px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; transition: color 0.18s ease; }
.pc-sum { display: block; margin: 0 0 18px; color: var(--ink-text); font-size: 16px; line-height: 1.6; }
.pc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-hair);
  color: var(--muted-text);
  font: 400 var(--text-meta) / 1.4 var(--font-label);
  letter-spacing: 0.04em;
}
.pc-dot { color: var(--brass); }
.pc-go { margin-left: auto; color: var(--ox); }
.pc-go svg { display: block; width: 20px; height: 12px; transition: transform 0.18s ease; }
.post-card:hover .pc-title, .post-card:focus-visible .pc-title { color: var(--ox); }
.post-card:hover .pc-go svg { transform: translateX(3px); }

/* a row of three (practice pages, practice areas): the cards take the row's height */
.in-page .row > .read-col { display: flex; }
.in-page .row > .read-col > .post-card { width: 100%; }

/* ---- the oxblood file card (the request card beside long pages): a brass hairline 6 px inside its edge ---------- */
.in-page .side-card.cta, .in-ox-card {
  --sheet-fill: var(--ox);
  position: relative;
  margin: 0 0 var(--sp-6);
  padding: 30px 28px 26px;
  border: 0;
  background: var(--ox);
  color: var(--parchment);
  box-shadow: inset 0 0 0 6px var(--ox), inset 0 0 0 7px var(--brass);
}
.in-page .side-card.cta::before { content: none; }
.in-page .side-card.cta h3, .in-ox-card h3 { margin: 0 0 10px; color: var(--parchment); font: 700 clamp(21px, 0.4vw + 18px, 24px) / 1.18 var(--font-heading); letter-spacing: -0.01em; }
.in-page .side-card.cta p, .in-ox-card p { margin: 0 0 18px; color: var(--parchment); font-size: 16px; line-height: 1.6; }
.in-page .side-card.cta .link-arrow, .in-ox-card .link-arrow { color: var(--parchment); text-decoration-color: var(--brass-light); }
.in-page .side-card.cta .link-arrow svg, .in-ox-card .link-arrow svg { color: var(--brass-light); }
.in-page .side-card.cta .link-arrow:hover, .in-ox-card .link-arrow:hover { color: var(--white); text-decoration-color: var(--white); }
.in-page .side-card.cta a:focus-visible, .in-ox-card a:focus-visible { outline-color: var(--parchment); }
/* the filled button on oxblood is parchment, with the oxblood inset rule (as in the header's practice panel) */
.in-page .side-card.cta .btn, .in-ox-card .btn {
  --btn-fill: var(--parchment);
  --btn-rule: var(--brass);
  background: var(--parchment);
  border-color: var(--parchment);
  color: var(--ox);
}
.in-page .side-card.cta .btn:hover, .in-page .side-card.cta .btn:focus-visible,
.in-ox-card .btn:hover, .in-ox-card .btn:focus-visible { --btn-fill: var(--white); --btn-rule: var(--ox); background: var(--white); border-color: var(--white); color: var(--ox); }
.in-page .side-card.cta .btn svg, .in-ox-card .btn svg { color: var(--ox); }

/* ---- the ribbon-bound note: a white page bound down its left edge by an oxblood ribbon that ends in a V-notch
   below it (the home page's "straight talk" notice, small) ---- */
.in-page .alert-note, .in-bound {
  position: relative;
  margin: clamp(32px, 3vw, 44px) 0 calc(clamp(32px, 3vw, 44px) + 18px);
  padding: 20px 24px 20px 52px;
  border: 1px solid var(--line-hair);
  background: var(--white);
  color: var(--ink-text);
  font-size: 15px;
  line-height: 1.65;
}
.in-page .alert-note::before, .in-bound::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -18px;
  left: 16px;
  width: 16px;
  height: auto;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}
.in-page .alert-note::after, .in-bound::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -8px;
  left: 20px;
  width: 8px;
  border-left: 1px dashed var(--brass);
  border-right: 1px dashed var(--brass);
  pointer-events: none;
}
.in-page .alert-note strong { color: var(--ox); }
.in-page .alert-note a { color: var(--ox); }
.in-page .alert-note p { max-width: none; }

/* ---- tab labels (practice areas, about, FAQ): Courier on a brass rule; the open one in oxblood with a short ribbon
   hanging under it. Bootstrap's tab behaviour and the ids stay. ---- */
.in-page .nav-tabs {
  gap: 0 clamp(20px, 2.6vw, 40px);
  padding: 0;
  overflow: visible;
  border-bottom: 1px solid var(--brass);
}
.in-page .nav-tabs .nav-link {
  min-height: 52px;
  padding: 0 0 2px;
  margin: 0;
  color: var(--ink-text);
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.in-page .nav-tabs .nav-link::before { content: none; }
.in-page .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto auto -15px 50%;
  width: 12px;
  height: 0;
  margin-left: -6px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
  transition: height 0.2s ease;
}
.in-page .nav-tabs .nav-link:hover { color: var(--ox); text-decoration: none; }
.in-page .nav-tabs .nav-link.active { color: var(--ox); font-weight: 700; }
.in-page .nav-tabs .nav-link.active::after { height: 15px; }
.in-page .nav-tabs .nav-link:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 2px; }
.in-page .tab-content { padding-top: clamp(36px, 3.6vw, 52px); }
.in-page .nav-tabs .tab-key { display: none; }

/* ---- questions and answers: Caslon questions on hairlines, the +/- in a small oxblood ribbon (as on the home page) */
.in-faq .accordion, .in-page .accordion.faq { border-top: 1px solid var(--brass); margin-bottom: 0; }
.in-page .accordion.faq .accordion-item { border-bottom: 1px solid var(--line-hair); }
.in-page .accordion.faq .accordion-button {
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  color: var(--ink-text);
  font: 400 clamp(18px, 0.4vw + 16.4px, 21px) / 1.35 var(--font-body);
}
.in-page .accordion.faq .accordion-button:hover { color: var(--ox); text-decoration: none; }
.in-page .accordion.faq .accordion-button:not(.collapsed) { color: var(--ox); }
.in-page .accordion.faq .accordion-button::after {
  content: "+";
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 38px;
  margin: -8px 0 0 auto;
  padding-top: 6px;
  background: var(--ox);
  color: var(--parchment);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
  font: 400 22px / 1 var(--font-body);
  transition: height 0.2s ease;
}
.in-page .accordion.faq .accordion-button:not(.collapsed)::after { content: "\2013"; height: 46px; }
.in-page .accordion.faq .accordion-body { padding: 0 52px 26px 0; max-width: 40em; font-size: 17px; line-height: 1.7; }
.in-page .accordion.faq .accordion-body p { max-width: none; }

/* ---- the oxblood curve panel: the closing call of an info page, under one large curve ------------------------- */
/* scoped like `.in-page section` above (0,1,1), so its own foot room is never reset to 0 (the button sat on the
   footer's brass rule); the content starts a little under the curve's lowest point */
.in-page .in-curve { position: relative; padding: 0 0 clamp(64px, 6vw, 96px); background: linear-gradient(var(--parchment) 0 3px, var(--ox) 3px); color: var(--parchment); }
.in-curve > .container { padding-top: clamp(12px, 2vw, 28px); }
.in-curve-edge { position: relative; top: -1px; display: block; width: 100%; height: clamp(56px, 8vw, 120px); margin: 0 0 -2px; fill: var(--parchment); }
.in-curve-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.in-curve-text { grid-column: 1 / span 7; }
.in-curve h2 { margin: 0 0 14px; color: var(--parchment); font-size: var(--text-h2); line-height: 1.1; max-width: 14em; }
.in-curve p { margin: 0; color: var(--parchment); font-size: var(--text-lede); line-height: 1.6; }
.in-curve-act { grid-column: 9 / span 4; justify-self: end; }
.in-curve .btn {
  --btn-fill: var(--parchment);
  --btn-rule: var(--brass);
  background: var(--parchment);
  border-color: var(--parchment);
  color: var(--ox);
}
.in-curve .btn:hover, .in-curve .btn:focus-visible { --btn-fill: var(--white); --btn-rule: var(--ox); background: var(--white); border-color: var(--white); color: var(--ox); }
.in-curve .btn svg { color: var(--ox); }
.in-curve .btn:focus-visible { outline-color: var(--parchment); }

/* ---- a photo in a brass hairline mat 14 px all round (concentric, never offset) ---------------------------------- */
.in-mat { position: relative; margin: 14px; }
.in-mat::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--brass); pointer-events: none; }
.in-mat img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
/* a bookmark over the top edge of a frame */
.in-bookmark {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 26px;
  width: 30px;
  height: 74px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
}
.in-bookmark::before { content: ""; position: absolute; left: 5px; right: 5px; top: 0; bottom: 13px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }

/* ---- lists with ribbon bullets (small oxblood bookmarks instead of dots or ticks) -------------------------------- */
.in-ribbons { margin: 0; padding: 0; list-style: none; }
.in-ribbons > li { position: relative; max-width: none; padding-left: 26px; }
.in-ribbons > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

/* ---- the Courier head of a notice or a card ("ON THIS PAGE", "PAGE NOT FOUND"): a brass rule runs on after it ---- */
.in-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  max-width: none;
  color: var(--brass-ink);
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.in-kicker::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--brass); }

/* ---- the two columns of a long page: text and a sticky column ---------------------------------------------------- */
@media (max-width: 991.98px) {
  .in-curve-grid { display: block; }
  .in-curve-act { margin-top: 28px; }
}
@media (max-width: 767.98px) {
  .in-sec-head { display: block; }
  .in-sec-head h2 { margin-bottom: 12px; }
  .in-page .accordion.faq .accordion-button { gap: 16px; padding: 18px 0; }
  .in-page .accordion.faq .accordion-body { padding-right: 0; }
  .in-page .alert-note, .in-bound { padding: 18px 18px 18px 46px; }
  .in-page .alert-note::before, .in-bound::before { left: 12px; width: 14px; }
  .in-page .alert-note::after, .in-bound::after { left: 15px; width: 8px; }
  .in-curve .btn { width: 100%; }
  .in-curve-act { justify-self: stretch; }
  /* at least 56 px of oxblood under the full-width button */
  .in-page .in-curve { padding-bottom: 64px; }
  .in-page .nav-tabs { flex-direction: column; gap: 0; border-bottom: 0; border-top: 1px solid var(--brass); }
  .in-page .nav-tabs .nav-item { width: 100%; }
  .in-page .nav-tabs .nav-link { width: 100%; justify-content: flex-start; min-height: 50px; border-bottom: 1px solid var(--line-hair); padding-left: 28px; }
  .in-page .nav-tabs .nav-link::after { inset: 14px auto auto 4px; margin: 0; width: 11px; height: 0; }
  .in-page .nav-tabs .nav-link.active::after { height: 22px; top: -1px; }
}
@media (max-width: 575.98px) {
  /* the oxblood file card with narrower side padding on phones, so its button keeps one line */
  .in-page .side-card.cta { padding: 26px 20px 22px; }
  /* the forms of the inner pages (contact, privacy request, get matched): the send button full width like the request
     form's, and the select's longest option ("Question about a request I submitted") whole at 16 px (the size phones
     do not zoom on): 16 px sheet sides, the arrow closer to the edge */
  .in-page .ap-intake button[type="submit"] { width: 100%; }
  .in-page .ap-intake .form-card { padding-left: 16px; padding-right: 16px; }
  .in-page .ap-intake .form-select { font-size: 16px; padding-left: 10px; padding-right: 28px; background-position: right 10px center; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-img, .pc-go svg, .in-page .nav-tabs .nav-link::after, .in-page .accordion.faq .accordion-button::after { transition: none; }
}

/* ==== photos on every device: every head whole, at every size (photos + devices pass, 2026-10-15) ==================
   Head boxes for every photo are in the review notes; each rule below keeps every marked head whole at all 19 measured
   screen sizes. */
/* article cards: the photos come with the articles (admin); faces sit in the upper part of most photos, so the crop keeps
   the top (also for articles added later); the photos below need their own framing */
.pc-img { object-position: 50% 25%; }
.pc-img[src*="pexels-10383588-w800."], .pc-img[src*="pexels-3958383-c800."],
.pc-img[src*="pexels-7904456-w800."], .pc-img[src*="pexels-8123813-w800."] { object-position: 50% 0%; }
.pc-img[src*="pexels-19963130-w800."] { object-position: 50% 12%; }
.pc-img[src*="pexels-29768245-w800."] { object-position: 50% 10%; }
.pc-img[src*="pexels-3772616-w800."] { object-position: 50% 16%; }
.pc-img[src*="pexels-39192333-w800."] { object-position: 0% 25%; }
.pc-img[src*="pexels-5622030-w800."] { object-position: 50% 21%; }
.pc-img[src*="pexels-6169652-w800."] { object-position: 50% 18%; }

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* phones: the crumb links get a 40 px tap height without moving the line (13 px Courier gave an 18 px target) */
@media (max-width: 575.98px) {
  .in-page .breadcrumb a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}
/* tablets (768-991 px): a row of three article cards left about 205 px per card (titles on four or five lines, three or
   four words per line), so there each card runs across the width with its photo on the left */
@media (min-width: 768px) and (max-width: 991.98px) {
  .in-page .row > .read-col { flex: 0 0 auto; width: 100%; }
  .in-page .row > .read-col > .post-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; padding: 12px 12px 16px; }
  .in-page .row > .read-col > .post-card .pc-photo { grid-column: 1; grid-row: 1 / span 2; }
  .in-page .row > .read-col > .post-card .pc-body { grid-column: 2; padding: 6px 8px 0 0; height: 100%; }
}
/* article cards: the arrow keeps the bottom-right corner of every card (on some cards it wrapped onto a line of its own
   and on their neighbours it did not, so the card feet did not match); the date line wraps beside it. Under 375 px the
   line closes up, so the date and the minutes share one line */
.pc-meta { position: relative; padding-right: 30px; }
.pc-go { position: absolute; right: 0; bottom: 3px; margin: 0; }
@media (max-width: 374.98px) {
  .pc-meta { gap: 2px 6px; letter-spacing: 0; }
}
/* the card photo's hover zoom grows from the photo's top edge, so it never trims the top of a head */
.pc-img { transform-origin: 50% 0; }
.pc-img[src*="pexels-39192333-w800."] { transform-origin: 0 0; }
/* tablets (768-991 px): an odd last card (the third of "Keep reading", the ninth of a /blog page or the last of a
   filtered list) runs across both columns with its photo on the left, so no row is left half empty */
@media (min-width: 768px) and (max-width: 991.98px) {
  .art-more-grid > .grid-cell:last-child:nth-child(odd),
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) { grid-column: 1 / -1; }
  .art-more-grid > .grid-cell:last-child:nth-child(odd) > .post-card,
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) > .post-card {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; padding: 12px 12px 16px;
  }
  .art-more-grid > .grid-cell:last-child:nth-child(odd) .pc-photo,
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) .pc-photo { grid-column: 1; grid-row: 1 / span 2; }
  .art-more-grid > .grid-cell:last-child:nth-child(odd) .pc-body,
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) .pc-body { grid-column: 2; padding: 6px 8px 0 0; height: 100%; }
}
/* phones under 375 px: the ribbon-bound notes keep a wider text column (about 22 characters a line before) */
@media (max-width: 374.98px) {
  .in-page .alert-note, .in-bound { padding: 16px 14px 16px 38px; }
  .in-page .alert-note::before, .in-bound::before { left: 10px; width: 12px; }
  .in-page .alert-note::after, .in-bound::after { left: 12px; width: 8px; }
}
/* phones: the selects of the inner forms keep their longest option whole from 375 px (at 16 px, the size phones do not
   zoom on); at 320 px a closed select still shortens it, the open list shows it whole */
@media (max-width: 575.98px) {
  .in-page .ap-intake .form-select { padding-left: 8px; padding-right: 24px; background-position: right 8px center; letter-spacing: -0.02em; }
}
/* the card's date line breaks only before its dot, never after it, so no dot is left hanging at a line's end
   ("September 7, 2026 ·" / "6 min read" on narrow cards); the date and the reading time each stay whole */
.pc-meta { display: block; }
.pc-meta > time, .pc-meta > span:not(.pc-dot):not(.pc-go) { white-space: nowrap; }
.pc-meta > time, .pc-dot { margin-right: 8px; }
.pc-dot::before { content: "\200B"; }

/* ==== every device looks finished (photos + devices pass, step 5 continued, 2026-10-16) ============================= */
/* the card's date line is a wrapping row of the date and the reading time again: run together as one line of inline
   text, the two read "September 7, 20266 min read" in the page's text and for screen readers. The dot is drawn in
   front of the reading time, so a line still breaks only before the dot ("September 7, 2026" / "· 6 min read") and never
   leaves it hanging at a line's end; screen readers skip the dot, as before (its own span stays hidden) */
.pc-meta { display: flex; }
.pc-meta > time { margin-right: 0; }
.pc-meta > .pc-dot { display: none; }
.pc-meta > span:not(.pc-dot):not(.pc-go)::before { content: "\00b7"; content: "\00b7" / ""; margin-right: 8px; color: var(--brass); }
@media (max-width: 374.98px) {
  .pc-meta > span:not(.pc-dot):not(.pc-go)::before { margin-right: 6px; }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* the inner forms' selects on phones under 360 px: the longest default option shows whole in the closed select (it read
   "Question about a request I sub"); the sheet's sides narrow a little */
@media (max-width: 359.98px) {
  .in-page .ap-intake .form-card { padding-inline: 10px; }
  .in-page .ap-intake .form-select { font-size: 14px; letter-spacing: -0.03em; }
}
/* tablets (768-991 px): an odd last card ("Related posts" on an article, the ninth of a /blog page, the last of a
   subject view) is a normal card again, centred under the two above it (run across both columns with its photo on the
   left, the 16:10 photo left about 110 px of empty card under it; a photo stretched to the card's height would have cut
   heads at its sides, e.g. the doctor of the malpractice card) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .art-more-grid > .grid-cell:last-child:nth-child(odd),
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) { justify-self: center; width: calc((100% - 20px) / 2); }
  .art-more-grid > .grid-cell:last-child:nth-child(odd) > .post-card,
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) > .post-card { display: flex; flex-direction: column; padding: 12px 12px 20px; }
  .art-more-grid > .grid-cell:last-child:nth-child(odd) .pc-body,
  .blog-grid > .grid-cell:nth-child(odd of :not([style*="none"])):nth-last-child(1 of :not([style*="none"])) .pc-body { padding: 18px 8px 0; height: auto; }
}
/* three cards in a row from 992 to 1199 px: the reading time goes on its own line under the date in every card, so the
   card feet (the hairline and the date line) are level across the row (a date line that wrapped in one card only set
   its foot higher than its neighbours') */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pc-meta > span:not(.pc-dot):not(.pc-go) { flex-basis: 100%; }
  .pc-meta > span:not(.pc-dot):not(.pc-go)::before { content: none; }
}