/*
 * Root Collections (design "9-5 Source - Collections", screens 1-15 to 1-18, owner approval
 * 2026-10-10). Loaded after bde-f2.css and family-pages.css on the collection pages and on the
 * root home (the home section). Every value is the design's; colours through the f2 tokens.
 * Phone first; 768 px is the design's phone/desktop line, 1100 px brings the side list.
 */

.co-page { display: flex; flex-direction: column; gap: 26px; padding-top: 16px; padding-bottom: 24px; }
@media (min-width: 768px) { .co-page { gap: 40px; padding-top: 28px; padding-bottom: 48px; } }

.co-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-top: -10px; }
.co-h1 { margin: 0; font-family: var(--f2-display); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -.6px; color: var(--f2-ink); text-wrap: balance; overflow-wrap: anywhere; }
@media (min-width: 768px) { .co-h1 { font-size: 46px; letter-spacing: -1px; } }
.co-lead { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: var(--f2-body); text-wrap: pretty; }
@media (min-width: 768px) { .co-lead { font-size: 18px; } }
.co-h2 { margin: 0; font-family: var(--f2-display); font-weight: 700; font-size: 22px; letter-spacing: -.3px; color: var(--f2-ink); }
@media (min-width: 768px) { .co-h2 { font-size: 26px; } }
.co-meta { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--f2-muted); }

/* kind label: Timely coral, Lasting green */
.co-kind { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: var(--f2-success-tint); color: var(--f2-success); }
.co-kind--timely { background: var(--f2-coral-tint); color: var(--f2-link); }

/* filters */
.co-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.co-filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; background: var(--f2-surface); color: var(--f2-sub); box-shadow: var(--f2-shadow-card); text-decoration: none; }
.co-filters a:hover { color: var(--f2-coral); }
.co-filters a[aria-current="page"] { background: var(--f2-coral); color: #fff; box-shadow: none; }

/* lead image: whole covers side by side on a calm ground, never cropped, never with text */
/* The box's height comes from aspect-ratio, which a percentage height cannot resolve against, so the
   covers are sized in the box's own width: 62% of its height (630/1200 of its width) = 32.55cqw.
   [width][height]: bde-v3.css sets height:auto on every img carrying both attributes. */
.co-art { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 4%; width: 100%; aspect-ratio: 1200 / 630; padding: 0 6%; border-radius: 18px; background: #F6EAE4; overflow: hidden; container-type: inline-size; }
.co-art img, .co-art img[width][height] { flex: 0 1 auto; height: 32.55cqw; width: auto; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 16px 28px -14px rgba(80, 40, 25, .55); }
.co-art img { max-width: 33%; }
.co-art--4 img { max-width: 25%; }
.co-art--5 img { max-width: 20%; }
a.co-art-link { display: block; border-radius: 18px; overflow: hidden; }

/* index: the newest collection, larger */
.co-leadcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 14px; border-radius: 26px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
@media (min-width: 768px) { .co-leadcard { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; padding: 20px; } }
.co-leadcard__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.co-leadcard__h { margin: 0; font-family: var(--f2-display); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.5px; text-wrap: balance; overflow-wrap: anywhere; }
@media (min-width: 768px) { .co-leadcard__h { font-size: 32px; } }

/* cards */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .co-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 24px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
@media (min-width: 768px) { .co-card { padding: 14px; } }
.co-card--text { padding: 18px; }
@media (min-width: 768px) { .co-card--text { padding: 22px 24px; } }
.co-card__h { margin: 0; font-family: var(--f2-display); font-weight: 700; font-size: 19px; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
@media (min-width: 768px) { .co-card__h { font-size: 20px; } }
.co-card__h a, .co-leadcard__h a { color: var(--f2-ink); text-decoration: none; }
.co-card__h a:hover, .co-leadcard__h a:hover { color: var(--f2-coral); }
.co-sum { margin: 0; font-size: 15px; line-height: 1.55; color: var(--f2-body); text-wrap: pretty; }

/* pagination and empty states */
.co-pages { display: flex; align-items: center; justify-content: center; gap: 6px; }
.co-pages a, .co-pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.co-pages a { background: var(--f2-surface); color: var(--f2-ink); box-shadow: var(--f2-shadow-card); }
.co-pages [aria-current="page"] { background: var(--f2-coral); color: #fff; box-shadow: none; }
.co-pages [aria-disabled="true"] { color: #9B8B84; }
.co-empty { display: flex; flex-direction: column; gap: 10px; max-width: 820px; padding: 22px 26px; border-radius: 22px; background: var(--f2-soft); border: 1px solid var(--f2-line); }
.co-empty p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--f2-body); }

/* the article */
.co-article { display: flex; flex-direction: column; gap: 22px; margin: -14px 0 0; }
.co-article__head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.co-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14.5px; color: var(--f2-sub); }
.co-byline a { font-weight: 700; color: var(--f2-link); text-decoration: none; }
.co-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--f2-field); border-radius: 14px; background: var(--f2-surface); color: var(--f2-ink); font: 700 14px/1.2 var(--f2-ui); cursor: pointer; }
.co-copy:hover { border-color: var(--f2-coral); }
.co-copy[hidden] { display: none; }
.co-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 1100px) { .co-body { grid-template-columns: minmax(0, 1fr) 300px; } }
#co-list { scroll-margin-top: calc(var(--f2-header-h, 64px) + 16px); }
.co-body__main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.co-jump { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--f2-link); text-decoration: none; }
.co-prose { display: flex; flex-direction: column; gap: 16px; }
.co-prose p { margin: 0; max-width: 66ch; font-family: var(--f2-read); font-size: 18px; line-height: 1.7; color: #2E2420; text-wrap: pretty; }
@media (min-width: 768px) { .co-prose p { font-size: 19px; } }

.co-list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.co-entry { display: grid; grid-template-columns: 28px 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: 24px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); scroll-margin-top: calc(var(--f2-header-h, 64px) + 12px); }
@media (min-width: 768px) { .co-entry { grid-template-columns: 36px 132px minmax(0, 1fr); gap: 20px; padding: 20px; } }
.co-entry__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--f2-coral-tint); color: var(--f2-link); font: 800 14px/1 var(--f2-display); }
@media (min-width: 768px) { .co-entry__n { width: 36px; height: 36px; font-size: 16px; } }
.co-entry__cover { box-sizing: border-box; display: block; aspect-ratio: 2 / 3; padding: 6px; border-radius: 12px; background: #F6EAE4; overflow: hidden; container-type: inline-size; }
.co-entry__cover img, .co-entry__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: contain; }
.co-entry__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.co-entry__t { margin: 0; font-family: var(--f2-serif); font-size: 21px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.co-entry__t a { color: var(--f2-ink); text-decoration: none; }
.co-entry__t a:hover { color: var(--f2-coral); }
.co-entry__a { font-size: 15px; color: var(--f2-sub); }
.co-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.co-facts li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: var(--f2-soft); color: var(--f2-sub); border: 1px solid var(--f2-line); }
.co-facts .co-facts__lang { background: var(--f2-coral-tint); color: var(--f2-link); border-color: var(--f2-coral-tint); }
.co-facts .co-facts__pd { background: var(--f2-success-tint); color: var(--f2-success); border-color: var(--f2-success-tint); }
.co-why { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--f2-body); text-wrap: pretty; }
a.co-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 14px; background: var(--f2-coral); color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; }
a.co-open:hover { background: var(--f2-coral-dark); color: #fff; }

.co-how { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px; border-radius: 22px; background: var(--f2-soft); border: 1px solid var(--f2-line); }
@media (min-width: 768px) { .co-how { padding: 22px 26px; } }
.co-how h2 { margin: 0; font-family: var(--f2-display); font-size: 18px; font-weight: 700; }
.co-how p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--f2-body); }
.co-how a, .co-plain a { font-weight: 700; color: var(--f2-link); }

.co-side { display: none; }
@media (min-width: 1100px) {
  .co-side { position: sticky; top: calc(var(--f2-header-h, 72px) + 24px); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
}
.co-side b { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--f2-muted); }
.co-side ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.co-side a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--f2-line); color: var(--f2-ink); font-family: var(--f2-serif); font-size: 15.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.co-side a:hover { color: var(--f2-coral); }
.co-side a span { font: 700 13px/1.3 var(--f2-ui); color: var(--f2-link); }

.co-section { display: flex; flex-direction: column; gap: 14px; }
.co-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-section__head--home { align-items: flex-end; }
.co-section__intro { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.co-section__intro p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--f2-body); }
.co-section__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--f2-link); text-decoration: none; }
.co-section__more:hover { color: var(--f2-link-hover); }

/* the writer page */
.co-plain { display: flex; flex-direction: column; gap: 14px; max-width: 820px; padding: 20px 18px; border-radius: 26px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
@media (min-width: 768px) { .co-plain { padding: 28px 32px; } }
.co-plain p { margin: 0; max-width: 66ch; font-family: var(--f2-read); font-size: 18px; line-height: 1.7; color: #2E2420; }
@media (min-width: 768px) { .co-plain p { font-size: 19px; } }