/* ==========================================================================
   TailorTech — Home page v2 components
   Loaded after style.css. Uses the same design tokens.
   ========================================================================== */

/* ---------- Wider nav (7 category links) ---------- */
.nav-links a { padding: 8px 11px; font-size: .875rem; white-space: nowrap; }
/* The navbar is short now (Guides / Topics / About / Contact), so the
   wordmark no longer needs hiding at mid widths — the logo is a monogram
   and does not spell the name on its own. */
@media (max-width: 1180px) and (min-width: 861px) {
  .nav-links a { padding: 8px 10px; font-size: .88rem; }
}

/* ---------- Search overlay ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  display: none; padding: 14vh 22px 22px;
}
.search-overlay.open { display: block; }
.search-panel {
  max-width: 620px; margin-inline: auto;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; box-shadow: var(--shadow-lg);
}
.search-panel h2 { font-size: 1.2rem; margin-bottom: 14px; }
.search-panel form { display: flex; gap: 10px; flex-wrap: wrap; }
.search-panel input {
  flex: 1 1 240px; padding: 13px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); outline: 0;
}
.search-panel input:focus { border-color: var(--accent); }
.search-hints { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.search-hints a {
  font-size: .82rem; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.search-hints a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 2. Hero — full-width featured story ---------- */
.hero-feature { padding-block: 34px 10px; }
.feature-card {
  position: relative; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  display: block; min-height: 460px;
}
.feature-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.feature-card:hover img { transform: scale(1.06); }
.feature-shade {
  position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(16,42,32,.93) 0%, rgba(16,42,32,.66) 44%, rgba(16,42,32,.18) 80%);
}
.feature-body {
  position: relative; z-index: 2;
  max-width: 640px; padding: 54px 44px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px;
}
.feature-body h1 {
  color: #FFFFFF; font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  margin-block: 14px 16px;
}
.feature-body p { color: rgba(255,255,255,.86); font-size: 1.03rem; max-width: 52ch; }
.feature-meta {
  display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center;
  margin-top: 18px; font-size: .86rem; color: rgba(255,255,255,.76);
}
.feature-meta .avatar { width: 30px; height: 30px; font-size: .72rem; }
.feature-tag {
  align-self: flex-start; padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #FFFFFF;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.feature-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; align-self: flex-start;
  padding: 13px 26px; border-radius: 999px;
  background: #FFFFFF; color: #101711; font-weight: 700; font-size: .95rem;
  transition: gap .22s ease, background .2s ease;
}
.feature-card:hover .feature-cta { gap: 15px; background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .feature-card, .feature-body { min-height: 420px; }
  .feature-body { padding: 32px 24px; }
  .feature-shade { background: linear-gradient(0deg, rgba(10,20,14,.92) 8%, rgba(10,20,14,.55) 58%, rgba(10,20,14,.25) 100%); }
}

/* ---------- 3. Latest stories — editorial split ---------- */
.stories { display: grid; grid-template-columns: 1.32fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 940px) { .stories { grid-template-columns: 1fr; gap: 28px; } }

.story-lead .card-media { aspect-ratio: 3 / 2; }
.story-lead .card-body { padding: 26px; gap: 12px; }
.story-lead h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); }

.story-list { display: flex; flex-direction: column; gap: 0; }
.story-row {
  display: grid; grid-template-columns: 104px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.story-row:first-child { padding-top: 0; }
.story-row:last-child { border-bottom: 0; }
.story-row .thumb {
  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.story-row .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.story-row:hover .thumb img { transform: scale(1.07); }
.story-row h4 { font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.story-row .kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 6px;
}
.story-row .meta { font-size: .8rem; color: var(--ink-faint); }

/* ---------- 4. Trending — horizontal scroller with numbers ---------- */
.trend-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 300px);
  gap: 20px; overflow-x: auto; padding: 6px 2px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.trend-scroll::-webkit-scrollbar { height: 7px; }
.trend-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.trend-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.trend-card {
  scroll-snap-align: start;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-card); padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.trend-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.trend-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.5rem;
  line-height: 1; letter-spacing: -.05em;
  color: var(--line);
  transition: color .22s ease;
}
.trend-card:hover .trend-num { color: var(--accent); }
.trend-card .kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
}
.trend-card h3 { font-size: 1.06rem; line-height: 1.32; }
.trend-card .meta { margin-top: auto; font-size: .8rem; color: var(--ink-faint); }
.scroll-hint { font-size: .82rem; color: var(--ink-faint); }

/* ---------- 5. Technology topics ---------- */
.topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; }
.topic-chip {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-card); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.topic-chip:hover { transform: translateY(-4px); border-color: var(--accent); }
.topic-chip .ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.topic-chip .ic svg { width: 19px; height: 19px; }
.topic-chip strong { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.02em; }
.topic-chip span { font-size: .82rem; color: var(--ink-faint); }

/* ---------- 6. Featured deep dive — scroll storytelling ---------- */
.deepdive {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
  padding-block: 84px;
}
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 940px) { .dd-grid { grid-template-columns: 1fr; gap: 28px; } }

.dd-sticky { position: sticky; top: 104px; }
.dd-stage {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-card);
  aspect-ratio: 4 / 3;
}
.dd-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.6,.2,1);
}
.dd-stage img.on { opacity: 1; transform: scale(1); }
.dd-progress { display: flex; gap: 7px; margin-top: 16px; }
.dd-dot { height: 4px; flex: 1; border-radius: 99px; background: var(--line); transition: background .3s ease; }
.dd-dot.on { background: var(--accent); }

.dd-step {
  padding-block: 34px;
  opacity: .38; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.dd-step.on { opacity: 1; transform: none; }
.dd-step:first-child { padding-top: 0; }
.dd-step .num {
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  letter-spacing: .12em; color: var(--accent); display: block; margin-bottom: 9px;
}
.dd-step h3 { font-size: 1.42rem; margin-bottom: 10px; }
.dd-step p { color: var(--ink-soft); }
@media (max-width: 940px) {
  .dd-sticky { position: static; }
  .dd-step { opacity: 1; transform: none; padding-block: 22px; }
}

/* ---------- 7. Latest articles feed ---------- */
.feed { display: flex; flex-direction: column; }
.feed-row {
  display: grid; grid-template-columns: 232px 1fr; gap: 26px;
  padding: 26px 0; border-top: 1px solid var(--line);
  align-items: center;
}
.feed-row:last-child { border-bottom: 1px solid var(--line); }
.feed-row .shot {
  border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.feed-row .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.feed-row:hover .shot img { transform: scale(1.05); }
.feed-row h3 { font-size: 1.24rem; margin-block: 8px 8px; }
.feed-row p { color: var(--ink-soft); font-size: .95rem; max-width: 62ch; }
.feed-row .meta { margin-top: 10px; font-size: .82rem; color: var(--ink-faint); display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .feed-row { grid-template-columns: 1fr; gap: 14px; }
  .feed-row .shot { aspect-ratio: 16 / 9; }
}

/* ---------- 9. Footer with legal + social ---------- */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.social-row { display: flex; gap: 9px; margin-top: 4px; }
.social-row a {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--ink-soft); transition: border-color .18s ease, color .18s ease;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent); }
.social-row svg { width: 17px; height: 17px; }

/* ---------- Shared section header with a link ---------- */
.sec-link {
  font-size: .88rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease;
}
.sec-link:hover { gap: 11px; }


/* ==========================================================================
   MODERN CARDS
   Inset media, a glass category pill floating on the image, an arrow badge
   that appears on hover, and a hairline divider above the meta row.
   Scoped with :has() so plain content cards (contact page) are untouched.
   ========================================================================== */

.card:has(.card-media) { position: relative; padding: 10px; }

.card:has(.card-media) .card-media {
  border-radius: 15px;
  overflow: hidden;
}

.card:has(.card-media) .card-body {
  padding: 18px 12px 12px;
  gap: 9px;
}

/* category pill floats over the image */
.card:has(.card-media) .card-body .tag {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 3;
  background: rgba(255, 255, 255, .93);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(16, 42, 32, .22);
  letter-spacing: .06em;
}
@supports (backdrop-filter: blur(4px)) {
  .card:has(.card-media) .card-body .tag { backdrop-filter: blur(6px); }
}

/* arrow badge, top-right of the image */
.card:has(.card-media)::after {
  content: "→";
  position: absolute;
  top: 20px; right: 20px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  opacity: 0;
  transform: scale(.72) translateY(-4px);
  transition: opacity .24s ease, transform .32s cubic-bezier(.2, .6, .2, 1);
  pointer-events: none;
}
.card:has(.card-media):hover::after { opacity: 1; transform: none; }

/* meta sits below a hairline */
.card:has(.card-media) .card-meta {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

/* even card heights in a grid: clamp the summary */
.grid-3 .card .card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured .card-body p,
.story-lead .card-body p { -webkit-line-clamp: none; overflow: visible; display: block; }

/* softer resting state, stronger lift */
.card { border-color: var(--line); }
.card:hover { transform: translateY(-6px); border-color: var(--line); }

/* ---------- Trending cards ---------- */
.trend-card { position: relative; overflow: hidden; padding-top: 26px; }
.trend-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.2, .6, .2, 1);
}
.trend-card:hover::before { transform: scaleX(1); }
.trend-num { font-size: 2.9rem; }

/* ---------- Topic chips ---------- */
.topic-chip { position: relative; }
.topic-chip::after {
  content: "→";
  position: absolute; top: 22px; right: 20px;
  color: var(--accent); font-weight: 700; font-size: 1rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .6, .2, 1);
}
.topic-chip:hover::after { opacity: 1; transform: none; }

/* ---------- Feed rows ---------- */
.feed-row .shot { border-radius: 15px; }
.feed-row h3 {
  display: inline-flex; align-items: baseline; gap: 9px;
}
.feed-row h3::after {
  content: "→";
  color: var(--accent); font-size: .9em;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .6, .2, 1);
}
.feed-row:hover h3::after { opacity: 1; transform: none; }

/* ---------- Story rows ---------- */
.story-row .thumb { border-radius: 13px; }
.story-row h4 { transition: color .18s ease; }
.story-row:hover h4 { color: var(--accent); }

@media (max-width: 620px) {
  .card:has(.card-media)::after { width: 34px; height: 34px; font-size: .95rem; }
  .card:has(.card-media) .card-body .tag { top: 20px; left: 20px; }
}

/* dark mode: the accent is light, so the arrow glyph needs dark ink */
:root[data-theme="dark"] .card:has(.card-media)::after { color: #0E1512; }


/* ==========================================================================
   TOPICS DROPDOWN
   The navbar now lists real destinations; the five category filters live
   inside a dropdown so nothing pretends to be a page that is not one.
   ========================================================================== */

.nav-links a { padding: 8px 14px; font-size: .94rem; }
.nav-item { position: relative; display: flex; align-items: center; }

.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: .94rem; font-weight: 500; color: var(--ink-soft);
  transition: background .18s ease, color .18s ease;
}
.nav-drop-btn:hover,
.nav-item:hover .nav-drop-btn,
.nav-item.open .nav-drop-btn { background: var(--bg-soft); color: var(--ink); }
.nav-drop-btn .caret { width: 15px; height: 15px; transition: transform .22s ease; }
.nav-item:hover .nav-drop-btn .caret,
.nav-item.open .nav-drop-btn .caret { transform: rotate(180deg); }

/* the current category lights up the Topics button too */
.nav-item:has(a.active) .nav-drop-btn { color: var(--accent); background: var(--accent-soft); }

.nav-drop {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  min-width: 292px; padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.6,.2,1), visibility .18s;
}
.nav-drop::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-drop a {
  display: block; padding: 10px 13px; border-radius: 11px;
  color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.3;
  transition: background .16s ease, color .16s ease;
}
.nav-drop a span {
  display: block; margin-top: 3px;
  font-size: .78rem; font-weight: 400; color: var(--ink-faint);
}
.nav-drop a:hover { background: var(--bg-soft); color: var(--accent); }
.nav-drop a:hover span { color: var(--ink-soft); }
.nav-drop a.active { background: var(--accent-soft); color: var(--accent); }

@media (min-width: 861px) {
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop,
  .nav-item.open .nav-drop { opacity: 1; visibility: visible; transform: none; }
}

/* inside the mobile drawer the dropdown expands inline */
@media (max-width: 860px) {
  .nav-item { position: static; display: block; }
  .nav-drop-btn { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 1rem; }
  .nav-drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; padding: 2px 0 6px 12px;
    background: transparent; border: 0; box-shadow: none;
  }
  .nav-item.open .nav-drop { display: block; }
  .nav-drop a { padding: 10px 12px; }
}

/* Active nav states sit on the soft accent tint, so use the deeper accent ink
   for text — plain --accent only reaches 4.43 against it in light mode. */
.nav-links a.active,
.nav-drop a.active,
.nav-item:has(a.active) .nav-drop-btn { color: var(--accent-ink); }


/* ==========================================================================
   HEADING HOVER EFFECTS  (v2)

   background-size percentages resolve against the whole inline box, not each
   wrapped line, so a two-line title got a highlight far wider than the second
   line's text. These two techniques size themselves to the text on every line:

     - text-decoration-color  for the underline
     - background-color       for the highlight block (with clone so each
                              line fragment paints its own padded box)
   ========================================================================== */

/* ---------- A. Underline — small headings ---------- */
.story-row h4,
.trend-card h3,
.card-body h3 a {
  background-image: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
  padding-bottom: 0;
  transition: text-decoration-color .28s ease;
}
.story-row:hover h4,
.trend-card:hover h3,
.card:hover .card-body h3 a { text-decoration-color: var(--accent); }

/* ---------- B. Highlight block — larger headings ---------- */
.feed-row h3,
.story-lead .card-body h3 a {
  display: inline;
  background-image: none;
  background-color: transparent;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 2px 6px;
  margin-left: -6px;
  line-height: 1.45;
  transition: background-color .22s ease, color .18s ease;
}
.feed-row:hover h3,
.card.story-lead:hover .card-body h3 a {
  background-color: var(--accent);
  color: #FFFFFF;
}
:root[data-theme="dark"] .feed-row:hover h3,
:root[data-theme="dark"] .card.story-lead:hover .card-body h3 a { color: #0E1512; }

/* the block replaces the arrow that used to slide in here */
.feed-row h3::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .story-row h4, .trend-card h3, .card-body h3 a,
  .feed-row h3, .story-lead .card-body h3 a { transition: none; }
}


/* ==========================================================================
   BRAND LOGO
   Replaces the drawn scissors mark. The header uses the coral artwork, the
   dark footer uses the cream one so it stays legible on Primary green.
   ========================================================================== */
.brand-logo {
  height: 36px; width: auto; flex: none;
  display: block;
  transition: transform .22s cubic-bezier(.2,.6,.2,1);
}
.brand:hover .brand-logo { transform: scale(1.05) rotate(-2deg); }
.site-header.scrolled .brand-logo { height: 32px; }
.site-footer .brand-logo { height: 34px; }
.brand { gap: 11px; }
@media (max-width: 420px) { .brand-logo { height: 32px; } }


/* ---------- Wordmark: "Blog" picks up the accent ---------- */
.brand em {
  font-style: normal;
  color: var(--accent);
}
.site-footer .brand em { color: var(--accent-light); }

/* "TailorTech Blog" is longer than the old wordmark — keep it on one
   line on small screens by easing the logo and type down a step. */
.brand span { white-space: nowrap; }
@media (max-width: 560px) {
  .brand { font-size: .95rem; gap: 9px; }
  .brand-logo { height: 30px; }
}
@media (max-width: 400px) {
  .brand { font-size: .88rem; }
  .brand-logo { height: 27px; }
}


/* ---------- Full lockup logo (name is inside the artwork) ---------- */
.brand-logo { height: 46px; }
.site-header.scrolled .brand-logo { height: 40px; }
.site-footer .brand-logo { height: 44px; }
.brand { gap: 0; }
@media (max-width: 560px) { .brand-logo { height: 40px; } }
@media (max-width: 400px) { .brand-logo { height: 36px; } }


/* ==========================================================================
   TOOLS, TABLE OF CONTENTS, BACK TO TOP, PRINT
   ========================================================================== */

/* ---------- Tool cards ---------- */
.tool-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 22px; padding: 30px;
}
.tool-card + .tool-card { margin-top: 26px; }
.tool-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.tool-num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  line-height: 1; letter-spacing: -.04em; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 12px;
  padding: 11px 13px; flex: none;
}
.tool-head h2 { font-size: 1.5rem; margin-bottom: 5px; }
.tool-head p { color: var(--ink-soft); font-size: .95rem; }

.tool-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .tool-grid { grid-template-columns: 1fr; gap: 22px; } }

.tool-inputs .field { margin-bottom: 18px; }
.tool-inputs .hint {
  font-size: .8rem; color: var(--ink-faint); line-height: 1.45; margin-top: 2px;
}
.check { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; margin-bottom: 10px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ---------- Tool output panel ---------- */
.tool-out {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px;
  position: sticky; top: 96px;
}
@media (max-width: 860px) { .tool-out { position: static; } }
.tool-out-label {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
}
.tool-out-value {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1;
  letter-spacing: -.04em; color: var(--ink); margin-top: 6px;
}
.tool-note { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; }

.tool-break { list-style: none; padding: 0; margin: 20px 0 0; }
.tool-break li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-soft);
}
.tool-break li:last-child { border-bottom: 0; }
.tool-break b { color: var(--ink); font-variant-numeric: tabular-nums; }

.tool-scale { display: flex; gap: 12px; margin-top: 18px; }
.tool-scale div {
  flex: 1; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.tool-scale span { display: block; font-size: .74rem; color: var(--ink-faint); }
.tool-scale b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; margin-top: 3px; font-variant-numeric: tabular-nums;
}

.bed-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.bed-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-card);
  font-size: .92rem;
}
.bed-list li span { font-weight: 600; color: var(--ink); }
.bed-list li em { grid-column: 1; font-style: normal; font-size: .8rem; color: var(--ink-faint); }
.bed-list li b { grid-row: 1 / span 2; align-self: center; font-size: .8rem; }
.bed-list li.ok { border-color: var(--teal); }
.bed-list li.ok b { color: var(--teal); }
.bed-list li.no { border-style: dashed; }
.bed-list li.no b { color: var(--ink-soft); }

/* ---------- Article table of contents ---------- */
.toc {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 20px 22px;
  margin-block: 4px 30px;
}
.toc h2 {
  font-family: var(--font-sans) !important;
  font-size: .74rem !important; font-weight: 700 !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 10px !important;
}
.toc-list { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; margin: 0; }
.toc-list li + li { margin-top: 2px; }
.toc-list a {
  display: block; padding: 5px 0 5px 26px; position: relative;
  font-size: .92rem; color: var(--ink-soft); line-height: 1.4;
  text-decoration: none;
  transition: color .16s ease;
}
.toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 5px;
  font-size: .76rem; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.toc-list a:hover { color: var(--accent); }
.toc-list a.on { color: var(--accent); font-weight: 600; }
.toc-list a.on::before { color: var(--accent); }

/* headings sit clear of the sticky header when jumped to */
.prose h2 { scroll-margin-top: 92px; }

/* ---------- Prev / next article ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 42px; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } }
.pager a {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; background: var(--bg-card);
  transition: border-color .2s ease, transform .2s ease;
}
.pager a:hover { border-color: var(--accent); transform: translateY(-3px); }
.pager span {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 6px;
}
.pager strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; line-height: 1.3; letter-spacing: -.02em; color: var(--ink);
}
.pager .next { text-align: right; }

/* ---------- Glossary ---------- */
.gloss-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.gloss-jump a {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--line); font-size: .84rem; font-weight: 700;
  color: var(--ink-soft);
}
.gloss-jump a:hover { border-color: var(--accent); color: var(--accent); }
.gloss-jump a.empty { opacity: .3; pointer-events: none; }

.gloss-group { margin-bottom: 34px; scroll-margin-top: 92px; }
.gloss-letter {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--accent); letter-spacing: -.03em;
  padding-bottom: 8px; border-bottom: 2px solid var(--line); margin-bottom: 14px;
}
.gloss-list { display: grid; gap: 0; }
.gloss-item {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 210px 1fr; gap: 6px 24px;
}
@media (max-width: 680px) { .gloss-item { grid-template-columns: 1fr; gap: 4px; } }
.gloss-item dt {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em; color: var(--ink);
}
.gloss-item dd { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.6,.2,1), visibility .22s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .search-overlay, .to-top,
  .share-row, .pager, .newsletter, .progress, .breadcrumb { display: none !important; }

  /* Added later: the rest of the screen furniture. A tailor printing a
     settings guide to keep by the machine does not want the nav, the reading
     bar, the helpful buttons, the questions, or two pages of "read next". */
  .nav-tools, .nav-links, .helpful, .series-nav, .article-tags,
  .qa, .qa-form, .nf-search, .hero-float, [data-hero-float],
  .btn, .no-print { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  /* A reader on the dark theme would otherwise print a solid page of ink.
     The tokens are forced back to paper colours for the print run only. */
  :root, :root[data-theme="dark"] {
    --bg: #FFFFFF; --bg-soft: #FFFFFF; --bg-card: #FFFFFF;
    --ink: #000000; --ink-soft: #222222; --ink-faint: #555555;
    --line: #BBBBBB; --shadow: none; --shadow-lg: none;
  }

  .wrap, .narrow { max-width: none; padding: 0; }

  /* The fixed header leaves a 112px hole at the top of the first element on
     screen. On paper there is no header to clear. */
  main > :first-child,
  main > :first-child:not(.progress),
  main > .progress:first-child + * { padding-top: 0; }

  .prose { font-size: 11pt; }
  .prose a { color: #000; text-decoration: underline; }

  /* A printed sheet gets passed around a workshop, and a link on paper is
     just underlined words unless the address is written out. Only real ones,
     and only inside the article. */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; color: #555; word-break: break-all;
  }

  .article-cover, .card-media { display: none; }
  .toc { border: 1px solid #999; break-inside: avoid; }
  .callout, .prose table, .prose blockquote { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* A heading stranded at the foot of a page, or one line of a paragraph
     carried over the fold, is the usual way a printed guide turns ugly. */
  p, li, blockquote { orphans: 3; widows: 3; }
  figure, .prose img { break-inside: avoid; }
  .prose img { max-width: 100%; height: auto; }

  .prose table { border-collapse: collapse; width: 100%; }
  .prose th, .prose td { border: 1px solid #BBB; padding: 4pt 6pt; }

  /* Whoever picks the sheet up should be able to find the original. */
  article > h1::after, .article-head h1::after {
    content: "tailortechblog.com";
    display: block; margin-top: 4pt;
    font-size: 9pt; font-weight: 400; color: #555;
  }

  @page { margin: 16mm 14mm; }
}

:root[data-theme="dark"] .tool-num { color: var(--accent-light); }

/* ==========================================================================
   SAVE FOR LATER
   ========================================================================== */

/* the full button, on an article page */
.btn-save { gap: 7px; }
.btn-save.is-saved {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.btn-save svg { flex: none; }
.btn-save.is-saved svg { fill: currentColor; stroke: currentColor; }

/* the small icon, on a card */
.icon-save {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-faint); cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.icon-save:hover { border-color: var(--accent); color: var(--accent-ink); }
.icon-save.is-saved {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}
.icon-save.is-saved svg { fill: currentColor; }

/* the card meta row has to make room for it */
.card-meta { display: flex; align-items: center; gap: 8px; }

/* the one-line confirmation, used on articles and on the saved page */
.note-line {
  margin-top: 12px; padding: 9px 14px; border-radius: 10px;
  background: var(--teal-soft, var(--bg-soft));
  border-left: 3px solid var(--teal);
  font-size: .88rem; color: var(--ink-soft);
}

/* the saved page */
.saved-tools { display: flex; justify-content: flex-end; margin-bottom: 18px; }

.empty-state {
  text-align: center; padding: 60px 24px;
  border: 1px dashed var(--line); border-radius: 20px;
  background: var(--bg-soft);
}
.empty-state svg { width: 40px; height: 40px; color: var(--ink-faint); margin-bottom: 14px; }
.empty-state b { display: block; font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.empty-state p {
  max-width: 42ch; margin: 0 auto 20px;
  color: var(--ink-soft); font-size: .95rem; line-height: 1.65;
}

/* the Saved item in the nav, with its live count */
.nav-saved { display: inline-flex; align-items: center; gap: 7px; }
.saved-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
:root[data-theme="dark"] .saved-count { color: #14100E; }

/* ==========================================================================
   BLOG FILTERS
   Search stays on the surface. Everything else sits behind one Filters button,
   so the page keeps its whitespace and the phone layout does not stack.
   ========================================================================== */
.filters {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 22px; position: relative;
}

.filter-search {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 46px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.filter-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.filter-search svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.filter-search input {
  flex: 1; border: 0; background: transparent; padding: 0;
  font-family: var(--font-sans); font-size: .95rem; color: var(--ink);
}
.filter-search input:focus { outline: none; box-shadow: none; }

.filter-clear {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-faint); font-size: 1.3rem; line-height: 1; padding: 0 2px;
}
.filter-clear:hover { color: var(--ink); }

.filter-open {
  height: 46px; border-radius: 999px; gap: 8px; flex: none; white-space: nowrap;
}
.filter-open svg { width: 16px; height: 16px; }

.filter-badge {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 19px; text-align: center;
}
:root[data-theme="dark"] .filter-badge { color: #14100E; }

/* ---------- The panel ---------- */
.filter-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: min(520px, 100%);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow-lg);
  display: none;
}
.filter-panel.open { display: block; }

.filter-panel-head {
  display: none;                       /* only the drawer needs a title bar */
  align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

.filter-group + .filter-group,
.filter-row + .filter-row,
.filter-group + .filter-row { margin-top: 16px; }

.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.filter-label {
  display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px;
}

.filter-panel select {
  width: 100%; height: 42px; padding: 0 34px 0 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-sans); font-size: .92rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366736C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
:root[data-theme="dark"] .filter-panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8D85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.filter-panel select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.filter-panel-foot {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.filter-panel-foot .btn-primary { display: none; }   /* only needed in the drawer */

.filter-veil { display: none; }

/* ---------- Phone: the panel becomes a bottom drawer ---------- */
@media (max-width: 720px) {
  .filters { flex-wrap: wrap; }
  .filter-search { width: 100%; flex-basis: 100%; }
  .filter-open { width: 100%; justify-content: center; }

  .filter-panel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: auto; max-height: 82vh; overflow-y: auto;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2, .7, .3, 1);
    display: block; z-index: 90;
  }
  .filter-panel.open { transform: none; }

  .filter-panel-head { display: flex; }
  .filter-panel-head b { font-size: 1.05rem; }
  .filter-row { grid-template-columns: 1fr; }
  .filter-panel-foot .btn-primary { display: inline-flex; }

  .filter-veil {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(10, 20, 15, .45);
  }
  .filter-veil[hidden] { display: none; }

  body.filters-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-panel { transition: none; }
}

/* An active item in the topics dropdown takes the accent wash, and the small
   description under it was left on --ink-faint: 4.16 there. --ink-soft is 7.44
   and still reads as the quieter line. */
.nav-drop a.active span { color: var(--ink-soft); }

/* Blog.aspx renders the same panel, but filters on the server so the page keeps
   working with JavaScript off. That needs the apply button at every width, not
   only inside the phone drawer, because there is no live "as you type" to lean
   on. Nothing else about the panel changes. */
.filters-server .filter-panel-foot .btn-primary { display: inline-flex; }

/* ==========================================================================
   TOOL CARDS 03-09
   Same card as the first two. What is new is the assumptions block and the
   footer, because the brief for these was that nothing may be assumed
   silently: if a number depends on something, the something is on the page.
   ========================================================================== */
.tool-inputs select {
  width: 100%; height: 42px; padding: 0 34px 0 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-card); color: var(--ink);
  font-family: var(--font-sans); font-size: .95rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366736C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
:root[data-theme="dark"] .tool-inputs select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8D85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.tool-inputs select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.tool-assume {
  margin-top: 24px; padding: 16px 18px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
}
.tool-assume b { display: block; font-size: .88rem; margin-bottom: 9px; }
.tool-assume ul { margin: 0; padding-left: 18px; }
.tool-assume li {
  font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 6px;
}
.tool-assume li:last-child { margin-bottom: 0; }

.tool-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.tool-foot .tool-formula {
  margin: 0; font-size: .84rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.tool-foot .btn { flex: none; }

/* Used when an input combination cannot give a sensible answer, so the card
   says why instead of printing a confident wrong number. */
.tool-warn { color: var(--accent-ink); font-weight: 700; }

/* ---------- Size conversion table ---------- */
.table-scroll { overflow-x: auto; margin-top: 18px; }
.size-table {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.size-table th, .size-table td {
  padding: 8px 10px 8px 0; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.size-table th {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.size-table td { color: var(--ink-soft); }
.size-table tr.match td {
  color: var(--ink); font-weight: 700;
  background: var(--accent-soft);
}
.size-table tr.match td:first-child { border-radius: 8px 0 0 8px; }
.size-table tr.match td:last-child { border-radius: 0 8px 8px 0; }

@media (max-width: 560px) {
  .tool-foot { flex-direction: column; align-items: stretch; }
  .tool-foot .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   TAG, AUTHOR AND SERIES PAGES
   Three listing pages that share one set of parts: a tile grid for the
   indexes, a face for an author, a numbered list for a series, and one
   pagination control used by all of them.
   ========================================================================== */

/* ---------- Tile grid, used by the topic and series indexes ---------- */
.topic-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.topic-tile {
  display: block; padding: 18px 18px 16px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.topic-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.topic-tile b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.topic-tile span { font-size: .84rem; color: var(--ink-soft); }

/* ---------- Author ---------- */
.author-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.author-tile {
  display: block; padding: 22px 18px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.author-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.author-tile b { display: block; color: var(--ink); margin: 12px 0 3px; }
.author-tile .muted { font-size: .84rem; }

.author-head { display: flex; gap: 22px; align-items: flex-start; margin-top: 16px; }
@media (max-width: 640px) { .author-head { flex-direction: column; gap: 16px; } }

/* One face style for the tile and the header, so an author looks the same
   wherever they appear. Overflow hidden so an uploaded avatar is clipped to
   the circle rather than escaping it. */
.author-face {
  width: 72px; height: 72px; flex: none;
  display: inline-grid; place-items: center; overflow: hidden;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display, inherit);
  font-size: 1.5rem; font-weight: 700; letter-spacing: .02em;
}
.author-face img { width: 100%; height: 100%; object-fit: cover; }
.author-tile .author-face { margin: 0 auto; }

/* ---------- Series ---------- */
.series-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.series-list li + li { margin-top: 10px; }
.series-list a {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.series-list a:hover { border-color: var(--accent); transform: translateX(3px); }
.series-n {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.series-title { color: var(--ink); font-weight: 600; }

/* The part you are reading now, when the list is shown inside an article. */
.series-list li.is-here a { border-color: var(--accent); background: var(--accent-soft); }
.series-list li.is-here .series-n { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .series-list li.is-here .series-n { color: #14100E; }
.series-list li.is-here .series-title { color: var(--ink); }

/* ---------- Pagination ---------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 40px; flex-wrap: wrap;
}
.page-step {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-card);
  color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: border-color .16s ease;
}
.page-step:hover { border-color: var(--accent); }

/* The disabled end of the range. Kept in the flow rather than removed, so the
   "Page 2 of 5" label stays in the middle instead of jumping side to side. */
.page-step.is-off { color: var(--ink-faint); border-style: dashed; cursor: default; }
.page-of { font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Odds and ends ---------- */
.chip-n {
  margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: var(--bg-soft); color: var(--ink-soft);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tag-more { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.tag-more h2 { font-size: 1.1rem; margin-bottom: 14px; }

/* ==========================================================================
   HERO, NEWS-STYLE  (replaces the full-bleed featured card)

   The old hero was a big photo with text laid over a dark shade. The brief
   changed to a compact news layout: a small image on the left, the headline
   beside it on the page background - the way a news site opens. Same markup,
   same tokens; these overrides load last and re-arrange it.
   ========================================================================== */
.feature-card {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: 36px; align-items: center;
  min-height: 0; overflow: visible;
  background: transparent; border: 0; border-radius: 0;
}
.feature-card img {
  position: static; width: 100%; height: 250px;
  border-radius: 18px; border: 1px solid var(--line);
  object-fit: cover; transform: none;
}
.feature-card:hover img { transform: none; }
.feature-shade { display: none; }

.feature-body {
  position: static; min-height: 0; padding: 0;
  justify-content: center; max-width: 62ch;
}
.feature-body h1 {
  color: var(--ink);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.16; margin-block: 12px 10px;
}
.feature-body p { color: var(--ink-soft); font-size: .99rem; }
.feature-meta { color: var(--ink-soft); margin-top: 14px; }
.feature-tag {
  background: var(--accent-soft); color: var(--accent-ink);
  backdrop-filter: none;
}
.feature-cta {
  margin-top: 18px; padding: 0; border-radius: 0;
  background: transparent; color: var(--accent-ink); font-size: .92rem;
}
.feature-card:hover .feature-cta { background: transparent; color: var(--accent-ink); gap: 14px; }

@media (max-width: 760px) {
  .feature-card { grid-template-columns: 1fr; gap: 18px; }
  .feature-card, .feature-body { min-height: 0; }
  .feature-body { padding: 0; }
  .feature-card img { height: 200px; }
}

/* ==========================================================================
   HERO ANIMATIONS

   Entrance: the image slides in from the left, then the text lines rise one
   after another - tag, headline, summary, meta, CTA - so the hero assembles
   the way a news page feels like it is loading in. Pure CSS, runs once on
   load. Hover: the image lifts gently. Reduced-motion users get none of it.
   ========================================================================== */
@keyframes hero-img-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.feature-card img {
  animation: hero-img-in .7s cubic-bezier(.2, .6, .2, 1) both;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1), box-shadow .45s ease;
}
.feature-card:hover img {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 22px 44px -26px rgba(16, 42, 32, .45);
}

.feature-tag     { animation: hero-rise .5s ease .14s both; }
.feature-body h1 { animation: hero-rise .55s ease .22s both; }
.feature-body p  { animation: hero-rise .55s ease .32s both; }
.feature-meta    { animation: hero-rise .55s ease .40s both; }
.feature-cta     { animation: hero-rise .55s ease .48s both; }

/* the arrow in the CTA nudges forward on hover */
.feature-cta span[aria-hidden] { transition: transform .25s ease; display: inline-block; }
.feature-card:hover .feature-cta span[aria-hidden] { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .feature-card img, .feature-tag, .feature-body h1, .feature-body p,
  .feature-meta, .feature-cta { animation: none; }
  .feature-card:hover img { transform: none; box-shadow: none; }
}

/* ==========================================================================
   FLOATING HERO

   Full-width opening section: a centred statement, and a field of small
   cover tiles drifting behind it (built by hero-float.js). The copy sits
   above the field and the field ignores the pointer, so nothing under the
   headline is ever unclickable.
   ========================================================================== */
.hero-float {
  position: relative; overflow: hidden;
  /* the whole first screen, like the reference - the news block below only
     appears once the reader scrolls */
  min-height: 100vh;
  min-height: 100svh;
  display: grid; place-items: center;
  padding-block: 40px;
}
.float-field { position: absolute; inset: 0; pointer-events: none; }
.ft {
  position: absolute; top: 0; left: 0;
  border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  will-change: transform;
}
.ft img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft.sw { border: 0; }
.ft.sw-a { background: var(--accent-soft); }
.ft.sw-b { background: var(--bg-soft); }
.ft.sw-c { background: var(--bg-card); border: 1px solid var(--line); }

.hero-float-copy { position: relative; z-index: 2; text-align: center; padding-inline: 22px; }
.hero-float-copy h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.12; letter-spacing: -.025em;
  max-width: 17ch; margin: 14px auto 0;
}

/* full-screen on phones too; svh keeps the browser bar honest */

/* the featured block's title kept its h1 styling when it became an h2 */
.feature-body .feature-h {
  color: var(--ink);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.16; margin-block: 12px 10px;
  animation: hero-rise .55s ease .22s both;
}
@media (prefers-reduced-motion: reduce) { .feature-body .feature-h { animation: none; } }

/* ==========================================================================
   HERO CURTAIN + SCROLL LAYERS

   The reference's scroll behaviour: the hero stays pinned while the next
   section slides up over it like a curtain. Sticky keeps the hero in normal
   flow (no scroll length changes); everything after it gets a background and
   a higher layer so it genuinely covers the tiles as it rises.
   ========================================================================== */
.hero-float {
  position: sticky; top: 0;
  z-index: 1;
}
/* every section after the hero rides above it and is opaque, so the curtain
   is solid. The progress bar keeps its own fixed layer. */
main > *:not(.hero-float):not(.progress) {
  position: relative; z-index: 2;
  background: var(--bg);
}
/* a soft top edge on the first covering section, so the overlap reads */
.hero-float + * {
  box-shadow: 0 -18px 40px -28px rgba(16, 42, 32, .35);
}

/* ==========================================================================
   TILE CAPTIONS

   Each cover tile carries its article's heading as a small caption on its
   right side. The caption lives inside the moving element, so it drifts,
   scales and fades exactly with its image - one object, not two.

   The rounding moves from the tile onto the image itself, because the tile
   now needs overflow: visible for the caption to hang outside it.
   ========================================================================== */
.ft {
  overflow: visible;
  border: 0; border-radius: 0; background: transparent;
}
.ft > img {
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-card);
}
/* swatch tiles keep their own body */
.ft.sw { border-radius: 9px; }

.ft-label {
  position: absolute; left: calc(100% + 9px); top: 6px;
  width: 96px;
  font-size: 10.5px; line-height: 1.35; font-weight: 600;
  color: var(--ink-soft); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px) {
  .ft-label { width: 74px; font-size: 9px; -webkit-line-clamp: 2; }
}

/* ==========================================================================
   CLICKABLE TILES

   The field itself still ignores the pointer (nothing under the hero is ever
   blocked), but each cover tile is a real link: hover brightens it and tints
   its caption, so it is obviously somewhere you can go.
   ========================================================================== */
a.ft { pointer-events: auto; cursor: pointer; display: block; }
a.ft img { transition: filter .2s ease, box-shadow .2s ease; }
a.ft:hover img {
  filter: brightness(1.08);
  box-shadow: 0 10px 26px -14px rgba(16, 42, 32, .5);
}
a.ft:hover .ft-label { color: var(--accent-ink); }
a.ft:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 9px; }

/* ==========================================================================
   HERO HEADLINE HIGHLIGHT

   The reference treatment: bold white type on a solid red bar, and because
   box-decoration-break is cloned, every wrapped line gets its own bar with a
   clean gap between them. The deep red stays fixed in dark mode too - the
   dark theme's pale accent would drown white text.
   ========================================================================== */
.hero-float-copy h1 .hl {
  /* the bar covers only the lower half of each line - bottom to centre -
     like a marker run under the words; the top half stays clean */
  background: linear-gradient(to top, #C43A22 0%, #C43A22 50%, transparent 50%);
  color: #17201C;
  padding: 0 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-float-copy h1 { line-height: 1.24; }

/* In the dark theme the headline was still being painted #17201C - almost
   the page background - so the half of each line above the red bar simply
   disappeared. The bar itself stays the same deep red in both themes, as the
   note above says, so the text over it has to carry the change on its own. */
:root[data-theme="dark"] .hero-float-copy h1 .hl { color: var(--ink); }

/* ---------- The header logo follows the theme ----------
   The header carried one file: the green wordmark. It is drawn to sit on
   cream, and on the dark background it all but vanished - the site had a
   dark theme and an invisible logo in it.

   Both files are in the markup and this picks between them, rather than
   swapping the src in JavaScript, which would show the wrong one for as long
   as the script took to arrive.

   The footer is always dark green, so its logo is fixed at the cream one and
   is deliberately left out of this. */
.brand-logo-dk { display: none; }
:root[data-theme="dark"] .site-header .brand-logo-lt { display: none; }
:root[data-theme="dark"] .site-header .brand-logo-dk { display: block; }

/* The footer keeps the one it was given, in either theme. */
.site-footer .brand-logo-dk { display: none; }

/* The Clear-the-list button while it is asking. It was window.confirm, and a
   browser that suppresses dialogs answers those false - the button then did
   nothing at all, silently. It asks in place now. */
[data-saved-clear].is-asking {
  border-color: var(--accent, #B4531A);
  color: var(--accent-ink, #AB4F19);
  font-weight: 700;
}