/* ==============================================================
   JOURNAL — sitewide design system (v5 direction)

   Loaded LAST so it re-skins every page without touching markup.
   Reference language: academic.oup.com · harvard.edu · medtigo
   Palette and font are unchanged — same navy, orange, Poppins.

   The single biggest visual shift is radius: your cards were
   16px pill-round (magazine). Journals use 4-6px (documents).
   ============================================================== */

:root {
  /* ── Text-safe colour variants ──
     The bright brand colours fail WCAG AA as small text on white:
       --iw-orange #ea580c  = 3.6:1   (needs 4.5:1)
       --iw-yellow #f59e0b  = 2.1:1
     Same hues, darkened. Use these for TEXT; keep the originals
     for fills, rules and buttons where contrast is inverted. */
  --iw-orange-t: #c2410c;
  --iw-green-t:  #047857;
  --iw-purple-t: #6d28d9;
  --iw-blue-t:   #1d4ed8;
  --iw-yellow-t: #b45309;
  --iw-rose-t:   #be123c;
  --iw-teal-t:   #0e7490;

  /* ── Journal geometry ── */
  --iw-radius:    6px;
  --iw-radius-sm: 5px;
  --iw-radius-xs: 4px;

  /* ── Restrained shadows — documents don't float ── */
  --iw-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --iw-shadow:    0 2px 10px rgba(15,23,42,.07);
  --iw-shadow-lg: 0 8px 28px rgba(15,23,42,.11);

  /* ── Vertical rhythm ── */
  --iw-sec-gap: 68px;

  --iw-t: .35s cubic-bezier(.22,.61,.36,1);
}

/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */
body { font-size: 15px; line-height: 1.65; }

h1, h2, h3, h4, h5, h6 {
  color: var(--iw-navy);
  letter-spacing: -.02em;
  line-height: 1.2;
}
h1 { font-weight: 800; }
h2 { font-weight: 800; }

/* Small-caps label — the academic signature */
.iw-label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--iw-orange-t);
}
.iw-label--mute { color: var(--iw-muted); }

/* Section header: heavy navy rule underneath */
.iw-sec-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--iw-navy);
}
.iw-sec-head h2 { font-size: clamp(21px, 2.6vw, 29px); }
.iw-sec-head .iw-sec-desc {
  font-size: 13.5px;
  color: var(--iw-muted);
  margin-top: 5px;
  max-width: 62ch;
}
.iw-sec-head .iw-sec-more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--iw-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: gap var(--iw-t), color var(--iw-t);
}
.iw-sec-head .iw-sec-more:hover { color: var(--iw-orange-t); gap: 14px; }

/* ══════════════════════════════════════════
   LINKS · BUTTONS · FORMS
   ══════════════════════════════════════════ */
a { transition: color var(--iw-t); }

/* Keyboard focus — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--iw-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Journal button, used sitewide ──
   Lives here rather than home.css because the thesis templates and the
   services page use it too, and journal.css is the only stylesheet that
   loads on every page. */
.iw-jbtns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.iw-jbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--iw-radius-xs);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--iw-t);
}
.iw-jbtn--o {
  background: var(--iw-orange);
  color: #fff;
  box-shadow: 0 6px 22px rgba(234,88,12,.35);
}
.iw-jbtn--o:hover { background: #c2410c; transform: translateY(-2px); color: #fff; }
.iw-jbtn--line {
  border: 1.5px solid var(--iw-gray-300);
  color: var(--iw-navy);
}
.iw-jbtn--line:hover { background: var(--iw-navy); color: #fff; border-color: var(--iw-navy); }

/* Thesis download sits at the end of the byline rule */
.iw-thesis-dl { margin-left: auto; }

button,
input[type="submit"],
.iw-btn,
.wp-block-button__link {
  border-radius: var(--iw-radius-xs);
  font-weight: 700;
  letter-spacing: .1px;
  transition: background var(--iw-t), color var(--iw-t),
              border-color var(--iw-t), transform var(--iw-t);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-gray-200);
  background: var(--iw-gray-50);
  padding: 12px 16px;
  font-size: 14px;
  transition: border-color var(--iw-t), background var(--iw-t), box-shadow var(--iw-t);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--iw-navy);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30,27,75,.07);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════
   PAGE HEADERS — the same masthead pattern on every listing page

   Small-caps eyebrow, large navy title, 2px navy rule underneath.
   Covers archive, category, tag, author, search, blog and 404 —
   so every page a reader lands on introduces itself identically.
   ══════════════════════════════════════════════════════════════ */
.iw-search-header,
.iw-term-banner,
.iw-archive-hero,
.iw-allcats-hero {
  background: #fff !important;
  border: 0;
  border-bottom: 2px solid var(--iw-navy);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 18px;
  margin-bottom: 34px;
  min-height: 0;
  color: var(--iw-text);
}

/* Those banners were image-backed; the journal pattern is typographic */
.iw-archive-hero-img,
.iw-archive-hero-gradient,
.iw-allcats-hero-dots { display: none !important; }

.iw-page-title,
.iw-archive-hero-title,
.iw-allcats-hero-title,
.iw-term-banner h1 {
  font-size: clamp(24px, 3.4vw, 36px) !important;
  font-weight: 800;
  color: var(--iw-navy) !important;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.iw-search-count,
.iw-archive-hero-excerpt,
.iw-allcats-hero-sub,
.iw-term-banner p {
  font-size: 13.5px !important;
  color: var(--iw-muted) !important;
  margin-top: 6px;
  max-width: 62ch;
}

/* Section headings inside single/archive pages */
.iw-section-header,
.iw-archive-section > h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.01em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--iw-navy);
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE — header, lead entry, two-column shell
   ══════════════════════════════════════════════════════════════ */
.iw-arch-head {
  padding-bottom: 20px;
  margin-bottom: 34px;
  border-bottom: 2px solid var(--iw-navy);
}
.iw-arch-head h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-top: 10px;
}
.iw-arch-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--iw-gray-700);
  max-width: 68ch;
  margin-top: 12px;
}
.iw-arch-desc p { margin-bottom: .6em; }
.iw-arch-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--iw-muted);
  margin-top: 12px;
}

.iw-arch-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 52px;
  align-items: start;
}
.iw-arch-list { min-width: 0; }
.iw-arch-rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* Lead entry — the one full-width item at the top */
.iw-arch-lead {
  padding-bottom: 30px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--iw-navy);
}
.iw-arch-lead-img {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--iw-radius);
  aspect-ratio: 16 / 9;
  background: var(--iw-gray-100);
  margin-bottom: 20px;
}
.iw-arch-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.iw-arch-lead:hover .iw-arch-lead-img img { transform: scale(1.03); }
.iw-arch-lead-noimg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--iw-navy), var(--iw-purple));
}
.iw-arch-lead h2 {
  font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 10px 0 12px;
}
.iw-arch-lead h2 a { color: var(--iw-navy); }
.iw-arch-lead h2 a:hover { color: var(--iw-orange-t); }
.iw-arch-lead p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--iw-muted);
  max-width: 68ch;
  margin-bottom: 12px;
}
.iw-arch-meta { font-size: 12.5px; color: var(--iw-gray-700); }

/* ══════════════════════════════════════════════════════════════
   LISTINGS → journal entries

   Card grids become a single stacked column of entries:
   thumbnail left, discipline label, title, excerpt, byline.
   This is the same pattern as "Latest articles" on the home page,
   applied to archive.php, search.php, index.php and the related
   posts block on single.php — without rewriting those templates.
   ══════════════════════════════════════════════════════════════ */
.iw-archive-grid,
.iw-articles-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.iw-article-card,
.iw-archive-card {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--iw-border);
  border-radius: 0;
  box-shadow: none;
  transition: none;
  min-width: 0;
}
.iw-article-card:first-child,
.iw-archive-card:first-child { padding-top: 0; }
.iw-article-card:hover,
.iw-archive-card:hover { transform: none; box-shadow: none; }

.iw-article-card-img,
.iw-archive-card-img,
.iw-article-card-no-img {
  border-radius: var(--iw-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  height: auto;
  background: var(--iw-gray-100);
}
.iw-article-card-img img,
.iw-archive-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.iw-article-card:hover .iw-article-card-img img,
.iw-archive-card:hover .iw-archive-card-img img { transform: scale(1.06); }

.iw-article-card-body,
.iw-archive-card-body { padding: 0; min-width: 0; }

/* Category label above the title, small-caps not a coloured pill */
.iw-article-card-cat,
.iw-archive-card-meta .iw-cat,
.iw-allcats-eyebrow {
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--iw-orange-t);
}

.iw-article-card-title,
.iw-archive-card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.015em;
  margin-bottom: 9px;
  transition: color var(--iw-t);
  overflow-wrap: break-word;
}
.iw-article-card:hover .iw-article-card-title,
.iw-archive-card:hover .iw-archive-card-title { color: var(--iw-orange-t); }

.iw-article-card-excerpt,
.iw-archive-card-excerpt {
  font-size: 13.5px;
  color: var(--iw-muted);
  line-height: 1.65;
}

/* Byline instead of a bordered card footer */
.iw-article-card-footer,
.iw-archive-card-meta {
  font-size: 12.5px;
  color: var(--iw-gray-700);
  border-top: 0;
  padding-top: 0;
  margin-top: 10px;
}
.iw-article-card-author,
.iw-archive-card-meta strong { font-weight: 600; }

/* The read-more link is redundant when the whole row is clickable */
.iw-read-link { font-size: 12.5px; font-weight: 700; color: var(--iw-orange-t); }

/* ══════════════════════════════════════════
   ARCHIVE HERO — flatter, editorial
   ══════════════════════════════════════════ */
.iw-archive-hero { border-radius: var(--iw-radius); }
.iw-archive-hero-title { font-weight: 800; letter-spacing: -.025em; }
.iw-archive-hero-featured {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════
   SIDEBAR → bordered panels with navy rule
   ══════════════════════════════════════════ */
.iw-sidebar-widget,
.iw-stats-card,
.iw-bloggers-card,
.iw-trending-card,
.iw-sidebar-popular,
.iw-sidebar-newsletter {
  border-radius: var(--iw-radius);
  border: 1px solid var(--iw-border);
  background: #fff;
  box-shadow: none;
}

.iw-widget-title,
.iw-bloggers-header {
  font-size: 14px !important;
  font-weight: 800;
  color: var(--iw-navy);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--iw-navy);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}

.iw-trending-tile { border-radius: var(--iw-radius-xs); }
.iw-stat-num { color: var(--iw-navy); font-weight: 800; letter-spacing: -1px; }
.iw-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--iw-muted);
}

.iw-blogger-row { border-bottom: 1px solid var(--iw-gray-100); transition: padding-left var(--iw-t); }
.iw-blogger-row:last-child { border-bottom: 0; }
.iw-blogger-row:hover { padding-left: 4px; }
.iw-blogger-name { font-weight: 700; color: var(--iw-navy); }
.iw-view-profile { border-radius: 50%; transition: background var(--iw-t), color var(--iw-t); }
.iw-blogger-row:hover .iw-view-profile { background: var(--iw-orange); color: #fff; }

.iw-sidebar-post-item { border-bottom: 1px solid var(--iw-gray-100); }
.iw-sidebar-post-item:last-child { border-bottom: 0; }
.iw-sidebar-post-img { border-radius: var(--iw-radius-xs); }
.iw-sidebar-post-title { font-weight: 600; line-height: 1.42; transition: color var(--iw-t); }
.iw-sidebar-post-item:hover .iw-sidebar-post-title { color: var(--iw-orange-t); }

/* ══════════════════════════════════════════════════════════════
   SINGLE POST — article page

   Journals lead with the discipline, then the title, then the
   byline rule. Body copy gets a comfortable measure so long
   articles stay readable.
   ══════════════════════════════════════════════════════════════ */
/* ── Article header ──
   The header and figure sit OUTSIDE .iw-single-body, which is where the
   template's 36px/42px padding lives — so they need their own, or they
   render flush against the card border. */
.iw-art-head {
  padding: 34px 42px 22px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--iw-border);
}

.iw-art-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.iw-art-eyebrow i {
  width: 26px; height: 2px;
  background: var(--iw-orange);
  display: block;
  flex: none;
}

.iw-art-title,
.iw-single-body h1,
.iw-single-hero h1 {
  font-size: clamp(27px, 3.8vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.14;
  margin-bottom: 16px;
}

/* Standfirst — the deck under the headline */
.iw-art-standfirst {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--iw-gray-700);
  font-weight: 400;
  max-width: 62ch;
  margin-bottom: 22px;
}

/* Byline rule: avatar, author, date, read time, share */
.iw-art-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.iw-art-byline .iw-art-avatar,
.iw-art-byline img {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: none;
}
.iw-art-byline-text { min-width: 0; }
.iw-art-by { font-size: 14px; font-weight: 600; color: var(--iw-navy); }
.iw-art-by a { color: inherit; }
.iw-art-by a:hover { color: var(--iw-orange-t); }
.iw-art-byline-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--iw-muted);
  margin-top: 2px;
}
.iw-art-byline-meta a { color: var(--iw-orange-t); font-weight: 600; }

.iw-art-share { margin-left: auto; display: flex; gap: 8px; }
.iw-art-share .iw-share-btn {
  width: 38px; height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-xs);
  background: #fff;
  color: var(--iw-gray-500);
  cursor: pointer;
  font-size: 0;
  transition: all var(--iw-t);
}
.iw-art-share .iw-share-btn:hover {
  background: var(--iw-navy);
  border-color: var(--iw-navy);
  color: #fff;
}

/* Featured image, now below the headline. Matches the header's
   horizontal padding so the whole article reads on one left edge. */
.iw-art-figure { margin: 30px 42px 0; }
.iw-art-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--iw-radius-sm);
  display: block;
}
.iw-art-figure figcaption {
  font-size: 12px;
  color: var(--iw-muted);
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid var(--iw-gray-100);
  line-height: 1.55;
}

/* The body already carries padding; without this the gap doubles up
   under the figure. */
.iw-art-figure + .iw-single-body { padding-top: 30px; }

/* Tags */
.iw-post-tags { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--iw-border); }
.iw-post-tags-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--iw-muted);
  margin-bottom: 10px;
}

/* Inside .iw-single-body the padding already exists — don't add it twice
   (the thesis template renders its figure there). */
.iw-single-body .iw-art-figure { margin-left: 0; margin-right: 0; }

/* The thesis catalogue panel also sits outside .iw-single-body */
.iw-thesis-single .iw-thesis-details { margin: 26px 42px; }

/* Breakpoints deliberately match .iw-single-body in inner-pages.css
   (42px → 24px at 820, → 18px at 560). If these drift apart the header
   and the body text sit on different left edges. */
@media (max-width: 820px) {
  .iw-art-head { padding: 26px 24px 20px; }
  .iw-art-figure { margin: 24px 24px 0; }
  .iw-art-figure + .iw-single-body { padding-top: 24px; }
  .iw-thesis-single .iw-thesis-details { margin: 22px 24px; }
}

@media (max-width: 620px) {
  .iw-art-share { margin-left: 0; width: 100%; }
  .iw-art-standfirst { font-size: 16px; }
}

@media (max-width: 560px) {
  .iw-art-head { padding: 20px 18px 16px; }
  .iw-art-figure { margin: 18px 18px 0; }
  .iw-art-figure + .iw-single-body { padding-top: 18px; }
  .iw-thesis-single .iw-thesis-details { margin: 18px; }
}

.iw-single-meta,
.iw-read-time,
.iw-meta-dot { font-size: 12.5px; color: var(--iw-muted); }

/* Article body: measure, rhythm and heading hierarchy */
.iw-single-content,
.entry-content {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--iw-gray-900, #0f172a);
}
.iw-single-content > p,
.entry-content > p { max-width: 72ch; margin-bottom: 1.35em; }

.iw-single-content h2,
.entry-content h2 {
  font-size: 24px;
  margin: 1.9em 0 .6em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--iw-border);
}
.iw-single-content h3,
.entry-content h3 { font-size: 19px; margin: 1.6em 0 .5em; }

.iw-single-content blockquote,
.entry-content blockquote {
  border-left: 3px solid var(--iw-orange);
  background: var(--iw-gray-50);
  padding: 16px 22px;
  margin: 1.6em 0;
  border-radius: 0 var(--iw-radius-xs) var(--iw-radius-xs) 0;
  font-size: 16px;
  color: var(--iw-gray-700);
}

.iw-single-content a,
.entry-content a {
  color: var(--iw-orange-t);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.iw-single-content a:hover,
.entry-content a:hover { color: var(--iw-navy); }

.iw-single-content img,
.entry-content img { border-radius: var(--iw-radius-sm); }

/* Tags read as catalogue keywords, not coloured pills */
.iw-post-tags a {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 5px 12px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-xs);
  color: var(--iw-gray-700);
  background: #fff;
  transition: all var(--iw-t);
}
.iw-post-tags a:hover { border-color: var(--iw-navy); color: var(--iw-navy); }

/* ══════════════════════════════════════════
   SINGLE POST — author box, comments
   ══════════════════════════════════════════ */
.iw-author-box {
  border-radius: var(--iw-radius);
  border: 1px solid var(--iw-border);
  box-shadow: none;
}
.iw-author-box-bio { font-size: 13.5px; color: var(--iw-muted); line-height: 1.7; }

.comment-respond,
.comment-body {
  border-radius: var(--iw-radius);
}
.comment-reply-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--iw-navy);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--iw-navy);
}
.comment-author { font-weight: 700; color: var(--iw-navy); }
.comment-metadata { font-size: 11.5px; color: var(--iw-muted); }
.comment-content { font-size: 14px; line-height: 1.7; }
.comment-reply-link {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--iw-orange-t);
}

/* ══════════════════════════════════════════
   ALL-CATEGORIES PAGE → discipline grid
   ══════════════════════════════════════════ */
.iw-allcats-hero { border-radius: var(--iw-radius); }
.iw-allcats-hero-title { font-weight: 800; letter-spacing: -.025em; }
.iw-allcats-grid > * { border-radius: var(--iw-radius); }

/* ══════════════════════════════════════════
   404
   ══════════════════════════════════════════ */
.iw-404-number {
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--iw-navy);
}
.iw-404-msg { color: var(--iw-muted); }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.iw-footer { background: var(--iw-navy); }
.iw-footer-col h4,
.iw-footer-col h3 {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: 13px;
}
.iw-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════
   LONG-FORM DOCUMENTS
   Privacy Policy · Terms of Use · any legal page

   These are read start-to-finish, not skimmed, so they get the
   strictest measure and the clearest heading hierarchy on the site.
   ══════════════════════════════════════════════════════════════ */
.iw-privacy-title,
.iw-page-content h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.iw-privacy-header {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--iw-navy);
  margin-bottom: 30px;
}
.iw-privacy-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-muted);
}

.iw-legal-card {
  background: #fff;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  box-shadow: none;
  padding: 30px 34px;
}

.iw-legal-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--iw-gray-700);
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--iw-border);
  max-width: 74ch;
}

.iw-legal-card h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 2em 0 .7em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--iw-border);
}
.iw-legal-card h3 { font-size: 16.5px; font-weight: 700; margin: 1.6em 0 .5em; }

.iw-legal-card p,
.iw-legal-card li {
  font-size: 15px;
  line-height: 1.78;
  color: var(--iw-gray-700);
  max-width: 76ch;
}
.iw-legal-card ul,
.iw-legal-card ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.iw-legal-card li { margin-bottom: .5em; list-style: disc; }
.iw-legal-card ol li { list-style: decimal; }

/* Callout — the clauses readers must not miss */
.iw-legal-note {
  border-left: 3px solid var(--iw-orange);
  background: var(--iw-peach);
  padding: 15px 20px;
  border-radius: 0 var(--iw-radius-xs) var(--iw-radius-xs) 0;
  margin: 1.5em 0;
  font-size: 14px;
  color: var(--iw-gray-700);
}

.iw-legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-sm);
  margin: 1.4em 0;
}
.iw-legal-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.iw-legal-table-wrap th {
  background: var(--iw-gray-50);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-navy);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--iw-navy);
}
.iw-legal-table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--iw-gray-100);
  color: var(--iw-gray-700);
}
.iw-legal-table-wrap tr:last-child td { border-bottom: 0; }

.iw-legal-footer {
  margin-top: 2em;
  padding-top: 18px;
  border-top: 1px solid var(--iw-border);
  font-size: 12.5px;
  color: var(--iw-muted);
}

/* ══════════════════════════════════════════════════════════════
   FORMS — Submit Article, login, register, password reset
   ══════════════════════════════════════════════════════════════ */
.iw-auth-card {
  border-radius: var(--iw-radius);
  border: 1px solid var(--iw-border);
  box-shadow: var(--iw-shadow-sm);
}

.iw-auth-field { margin-bottom: 18px; }
.iw-auth-field label,
.iw-auth-form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-gray-700);
  margin-bottom: 7px;
}

.iw-auth-input,
.iw-auth-form input,
.iw-auth-form select,
.iw-auth-form textarea {
  width: 100%;
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-gray-200);
  background: var(--iw-gray-50);
  padding: 12px 16px;
  font-size: 14.5px;
}
.iw-auth-input:focus,
.iw-auth-form input:focus,
.iw-auth-form textarea:focus {
  border-color: var(--iw-navy);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30,27,75,.07);
}

.iw-auth-btn {
  border-radius: var(--iw-radius-xs);
  font-weight: 700;
  letter-spacing: .2px;
  padding: 14px 26px;
}

.iw-auth-alert {
  border-radius: var(--iw-radius-xs);
  border-left: 3px solid var(--iw-orange);
  font-size: 13.5px;
  padding: 13px 18px;
}

/* Numbered review steps on the submission page */
.iw-review-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--iw-gray-100);
}
.iw-review-step:last-child { border-bottom: 0; }
.iw-review-step-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--iw-orange-t);
  letter-spacing: .5px;
}
.iw-review-step-title { font-size: 14px; font-weight: 700; color: var(--iw-navy); }
.iw-review-step-desc { font-size: 12.5px; color: var(--iw-muted); line-height: 1.6; }

.iw-guide-list li {
  font-size: 13.5px;
  color: var(--iw-gray-700);
  line-height: 1.65;
  padding: 7px 0;
  border-bottom: 1px solid var(--iw-gray-100);
}
.iw-guide-list li:last-child { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   IT SERVICES · CATEGORIES · CALCULATOR

   These pages carry their own inline <style> blocks, so only the
   shared shell is normalised here. Their semantic colours — the
   BMI risk bands, the per-category accents — are deliberately
   left alone: those hues carry meaning, they are not decoration.
   ══════════════════════════════════════════════════════════════ */
.iw-allcats-grid > *,
.bmi-card,
.bmi-panel {
  border-radius: var(--iw-radius) !important;
  border: 1px solid var(--iw-border);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   IT SERVICES PAGE
   ══════════════════════════════════════════════════════════════ */
.iw-svc-hero {
  background: linear-gradient(135deg, var(--iw-navy) 0%, #2d3478 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.iw-svc-hero::after {
  content: "";
  position: absolute;
  right: -140px; top: -160px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  pointer-events: none;
}
.iw-svc-hero .iw-jwrap { padding-top: 66px; padding-bottom: 66px; position: relative; z-index: 2; }

.iw-svc-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 56px;
  align-items: center;
}
.iw-svc-hero h1 {
  color: #fff;
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 14px 0;
  max-width: 17ch;
}
.iw-svc-hero p {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.72;
  max-width: 52ch;
}

/* Facts panel */
.iw-svc-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--iw-radius);
  overflow: hidden;
}
.iw-svc-fact {
  background: var(--iw-navy);
  padding: 24px 18px;
  text-align: center;
}
.iw-svc-fact b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--iw-yellow);
  letter-spacing: -1px;
  line-height: 1;
}
.iw-svc-fact span {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* Service cards */
.iw-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--iw-border);
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  overflow: hidden;
}
.iw-svc-card {
  position: relative;
  background: #fff;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  transition: background var(--iw-t);
  min-width: 0;
}
.iw-svc-card:hover { background: var(--iw-gray-50); }
.iw-svc-rule {
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--fc);
  opacity: 0;
  transition: opacity var(--iw-t);
}
.iw-svc-card:hover .iw-svc-rule { opacity: 1; }

.iw-svc-icon {
  width: 42px; height: 42px;
  border-radius: var(--iw-radius-xs);
  background: var(--iw-gray-50);
  border: 1px solid var(--iw-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--fc);
}
.iw-svc-icon svg { width: 21px; height: 21px; }

.iw-svc-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--iw-navy);
  letter-spacing: -.015em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.iw-svc-card p {
  font-size: 13px;
  color: var(--iw-muted);
  line-height: 1.62;
  margin-bottom: 16px;
  flex: 1;
}
.iw-svc-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--fc);
  transition: gap var(--iw-t);
}
.iw-svc-ask:hover { gap: 11px; }

/* Enquiry form */
.iw-svc-form-card {
  background: #fff;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  padding: 34px 38px 38px;
  max-width: 860px;
  margin: 0 auto;
  scroll-margin-top: 24px;
}
.iw-svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.iw-svc-form-card .iw-auth-form { display: flex; flex-direction: column; gap: 4px; }
.iw-required-mark { color: var(--iw-orange-t); }
.iw-svc-submit { align-self: flex-start; margin-top: 8px; border: 0; cursor: pointer; }
.iw-svc-privacy {
  font-size: 12px;
  color: var(--iw-muted);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--iw-gray-100);
}
.iw-auth-alert--success { background: #f0fdf4; color: #15803d; border-left-color: #16a34a; }
.iw-auth-alert--error   { background: #fef2f2; color: #b91c1c; border-left-color: #dc2626; }

.iw-svc-intro { max-width: 860px; margin: 0 auto; }

@media (max-width: 1080px) {
  .iw-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .iw-svc-hero-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .iw-svc-grid { grid-template-columns: 1fr; }
  .iw-svc-row { grid-template-columns: 1fr; gap: 0; }
  .iw-svc-form-card { padding: 24px 20px 28px; }
  .iw-svc-hero .iw-jwrap { padding-top: 42px; padding-bottom: 42px; }
  .iw-svc-submit { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ══════════════════════════════════════════════════════════════ */
.iw-toc {
  border: 1px solid var(--iw-border);
  border-left: 3px solid var(--iw-navy);
  border-radius: 0 var(--iw-radius-sm) var(--iw-radius-sm) 0;
  background: var(--iw-gray-50);
  padding: 20px 24px;
  margin: 32px 0;
}
.iw-toc-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--iw-muted);
  margin-bottom: 12px;
}
.iw-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: iw-toc; }
.iw-toc-item { margin: 0; }
.iw-toc-item a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--iw-gray-700);
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: color var(--iw-t), border-color var(--iw-t);
}
.iw-toc-item a:hover { color: var(--iw-orange-t); }
.iw-toc-item a.is-current {
  color: var(--iw-navy);
  font-weight: 600;
  border-left-color: var(--iw-orange);
}
.iw-toc-item--h3 a { padding-left: 28px; font-size: 13px; color: var(--iw-muted); }
.iw-toc-item--h3 a:hover { color: var(--iw-orange-t); }

/* ══════════════════════════════════════════════════════════════
   CITATION
   ══════════════════════════════════════════════════════════════ */
.iw-cite { margin-top: 34px; }
.iw-cite-box {
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-sm);
  background: var(--iw-gray-50);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.iw-cite-box p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--iw-gray-700);
  margin: 0;
  flex: 1;
  min-width: 240px;
  overflow-wrap: break-word;
}
.iw-cite-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--iw-border);
  border-radius: var(--iw-radius-xs);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--iw-navy);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--iw-t);
}
.iw-cite-copy:hover { background: var(--iw-navy); border-color: var(--iw-navy); color: #fff; }
.iw-cite-copy.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════════════════════════ */
.iw-nl-form { position: relative; }
.iw-nl-msg {
  flex-basis: 100%;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 0;
  min-height: 0;
}
.iw-nl-msg:empty { display: none; }
.iw-nl-msg.is-ok  { color: #16a34a; }
.iw-nl-msg.is-err { color: #dc2626; }

/* The footer sits on navy — the muted greens and reds vanish there */
.iw-footer .iw-nl-msg.is-ok  { color: #86efac; }
.iw-footer .iw-nl-msg.is-err { color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════
   PROFILE — journal treatment

   Restyled rather than rebuilt: this template carries avatar and
   cover uploads, a privacy toggle, quiz history, an article
   carousel and an AJAX revision-resubmission flow. Rewriting the
   markup would put all of that at risk for a purely visual gain,
   so the classes are re-skinned in place.
   ══════════════════════════════════════════════════════════════ */

/* ── Cover ── */
.iw-profile-cover {
  border-radius: 0;
  height: 220px;
  background: linear-gradient(135deg, var(--iw-navy) 0%, #2d3478 100%);
  border-bottom: 2px solid var(--iw-navy);
}
.iw-profile-cover--custom { background-size: cover; background-position: center; }

/* ── Identity card ── */
.iw-profile-card {
  background: #fff;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  box-shadow: none;
  padding: 26px 30px 24px;
}

.iw-profile-avatar,
.iw-profile-avatar-wrap img {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: var(--iw-shadow-sm);
}
.iw-profile-avatar-fallback {
  background: linear-gradient(135deg, var(--iw-yellow), var(--iw-orange));
  color: #fff;
  font-weight: 800;
}

.iw-profile-name {
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.028em;
  line-height: 1.14;
}
.iw-profile-meta { font-size: 12.5px; color: var(--iw-muted); }
.iw-profile-hidden-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--iw-radius-xs);
  background: var(--iw-peach);
  color: var(--iw-orange-t);
  border: 1px solid #fed7aa;
}

/* Stats read as a record, not as tiles */
.iw-profile-stats {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--iw-border);
}
.iw-profile-stat strong,
.iw-profile-stat b {
  font-size: 22px;
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.5px;
}
.iw-profile-stat span,
.iw-profile-stat small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-muted);
}
.iw-profile-stat-sep { background: var(--iw-border); }

/* ── Section headers match the rest of the site ── */
.iw-profile-section { margin-top: 40px; }
.iw-profile-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--iw-navy);
  margin-bottom: 20px;
}
.iw-profile-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.015em;
}
.iw-profile-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--iw-muted);
  background: var(--iw-gray-100);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: auto;
}

/* ── About / bio ── */
.iw-profile-about,
.iw-profile-body { background: transparent; box-shadow: none; }
.iw-profile-bio-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--iw-gray-700);
  max-width: 74ch;
}
.iw-profile-bio-empty { font-size: 14px; color: var(--iw-muted); font-style: normal; }

/* ── Edit form ── */
.iw-profile-edit-wrap {
  background: #fff;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  padding: 26px 28px;
}
.iw-profile-field { margin-bottom: 20px; }
.iw-profile-field > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-gray-700);
  margin-bottom: 7px;
}
.iw-profile-field-note { font-size: 12px; color: var(--iw-muted); margin-top: 6px; }
.iw-profile-field--privacy {
  background: var(--iw-gray-50);
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-sm);
  padding: 16px 18px;
}

.iw-profile-save-btn,
.iw-profile-edit-toggle {
  border-radius: var(--iw-radius-xs);
  font-weight: 700;
  letter-spacing: .2px;
}
.iw-profile-cancel-btn {
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-gray-300);
  background: #fff;
  color: var(--iw-gray-700);
  font-weight: 700;
}
.iw-profile-cancel-btn:hover { border-color: var(--iw-navy); color: var(--iw-navy); }

.iw-avatar-upload-preview,
.iw-cover-upload-preview { border-radius: var(--iw-radius-xs); border: 1px solid var(--iw-border); }
.iw-avatar-upload-btn {
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-gray-300);
  font-size: 12.5px;
  font-weight: 700;
}
.iw-avatar-upload-hint { font-size: 11.5px; color: var(--iw-muted); }

/* ── Notices ── */
.iw-profile-notice {
  border-radius: var(--iw-radius-xs);
  border-left: 3px solid;
  font-size: 13.5px;
  padding: 13px 18px;
}
.iw-profile-notice--success { background: #f0fdf4; color: #15803d; border-left-color: #16a34a; }
.iw-profile-notice--error   { background: #fef2f2; color: #b91c1c; border-left-color: #dc2626; }

/* ── Submission history — a status ledger ── */
.iw-sub-entry {
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius-sm);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.iw-sub-entry--revision { border-color: #fed7aa; }
.iw-sub-item { padding: 16px 18px; }
.iw-sub-icon { color: var(--iw-gray-400); }
.iw-sub-title { font-size: 14.5px; font-weight: 700; color: var(--iw-navy); line-height: 1.35; }
.iw-sub-meta { font-size: 11.5px; color: var(--iw-muted); margin-top: 3px; }

.iw-sub-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--iw-radius-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.iw-sub-status--pending  { background: var(--iw-gray-100); color: var(--iw-gray-700); border-color: var(--iw-gray-200); }
.iw-sub-status--review   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.iw-sub-status--revision { background: var(--iw-peach); color: var(--iw-orange-t); border-color: #fed7aa; }
.iw-sub-status--approved { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.iw-sub-status--rejected { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.iw-sub-file-btn,
.iw-revision-toggle-btn {
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-border);
  background: #fff;
  color: var(--iw-navy);
  font-size: 11.5px;
  font-weight: 700;
  transition: all var(--iw-t);
}
.iw-sub-file-btn:hover,
.iw-revision-toggle-btn:hover { background: var(--iw-navy); border-color: var(--iw-navy); color: #fff; }

.iw-revision-alert {
  border-top: 1px solid var(--iw-border);
  background: var(--iw-peach);
  padding: 14px 18px;
}
.iw-revision-alert-header {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--iw-orange-t);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.iw-revision-notes-text { font-size: 13.5px; line-height: 1.65; color: var(--iw-gray-700); }

.iw-revision-form {
  border-top: 1px solid var(--iw-border);
  background: var(--iw-gray-50);
  padding: 18px;
}
.iw-revision-field { margin-bottom: 14px; }
.iw-revision-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--iw-gray-700);
  margin-bottom: 6px;
}

/* ── Empty states ── */
.iw-profile-empty {
  border: 1px dashed var(--iw-gray-300);
  border-radius: var(--iw-radius-sm);
  background: var(--iw-gray-50);
  color: var(--iw-muted);
  padding: 32px 20px;
  text-align: center;
}
.iw-profile-empty svg { color: var(--iw-gray-300); margin-bottom: 10px; }
.iw-profile-empty p { font-size: 13.5px; }
.iw-profile-empty-link { font-weight: 700; color: var(--iw-orange-t); }

/* ── Article carousel ── */
.iw-carousel-arrow {
  border-radius: var(--iw-radius-xs);
  border: 1.5px solid var(--iw-border);
  background: #fff;
  color: var(--iw-navy);
  transition: all var(--iw-t);
}
.iw-carousel-arrow:hover { background: var(--iw-navy); border-color: var(--iw-navy); color: #fff; }
.iw-carousel-arrow--dim { opacity: .35; }

/* Inside the carousel the listing override must not apply — these are
   real cards in a horizontal scroller, not stacked entries. */
.iw-carousel .iw-article-card {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  background: #fff;
}
.iw-carousel .iw-article-card-img { aspect-ratio: 16 / 10; border-radius: 0; }
.iw-carousel .iw-article-card-body { padding: 14px 16px 16px; }
.iw-carousel .iw-article-card-title { font-size: 15px; }

@media (max-width: 620px) {
  .iw-profile-cover { height: 150px; }
  .iw-profile-card { padding: 20px 18px; }
  .iw-profile-edit-wrap { padding: 20px 18px; }
  .iw-profile-section-header { flex-wrap: wrap; gap: 8px; }
  .iw-profile-section-count { margin-left: 0; }
}

/* ══════════════════════════════════════════
   MODULES — quiz + text-to-speech

   Both module stylesheets already use the theme variables (44 and 39
   references), so the radius and shadow changes at the top of this file
   reach them automatically. What follows is only the journal chrome:
   headings, labels and rules that variables cannot express.
   ══════════════════════════════════════════ */

/* ── Quiz ── */
.iw-quiz,
.iw-quiz-wrap,
.iw-quiz-result-inner {
  border-radius: var(--iw-radius);
}
.iw-quiz-title,
.iw-quiz-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.01em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--iw-navy);
  margin-bottom: 16px;
}
.iw-quiz-note { font-size: 12.5px; color: var(--iw-muted); }
.iw-quiz-submit { border-radius: var(--iw-radius-xs); font-weight: 700; }

/* Leaderboard — podium tiles become ranked rows */
.iw-lb { border-radius: var(--iw-radius); border: 1px solid var(--iw-border); }
.iw-lb-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--iw-navy);
  letter-spacing: -.01em;
}
.iw-lb-sub { font-size: 12.5px; color: var(--iw-muted); }
.iw-lb-card {
  border-radius: var(--iw-radius-sm);
  border: 1px solid var(--iw-border);
  box-shadow: none;
  transition: border-color var(--iw-t), transform var(--iw-t);
}
.iw-lb-card:hover { transform: translateY(-3px); border-color: var(--iw-gray-300); }
.iw-lb-name { font-weight: 700; color: var(--iw-navy); }
.iw-lb-points strong { color: var(--iw-navy); font-weight: 800; }

/* ── Text-to-speech player ── */
.iw-tts,
.iw-tts-player {
  border-radius: var(--iw-radius);
  border: 1px solid var(--iw-border);
  box-shadow: none;
}
.iw-tts-label,
.iw-tts-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--iw-orange-t);
}

/* ══════════════════════════════════════════
   SCROLL REVEAL
   Paired with assets/js/reveal.js. The no-JS
   fallback lives in that file's <noscript>
   companion rule below — without it a failed
   script would leave the page blank.
   ══════════════════════════════════════════ */
/* Content is visible by DEFAULT. It is only hidden once the tiny inline
   script in wp_head has stamped .iw-reveal-ready on <html>, proving JS is
   alive and will be able to reveal it again. If JS is off, blocked, or
   errors, this class never appears and the page simply renders normally.
   A timer-based failsafe was rejected: it would reveal everything below
   the fold before the reader scrolled there, cancelling the effect. */
.iw-reveal-ready [data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.iw-reveal-ready [data-anim].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .iw-reveal-ready [data-anim] { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE

   The theme had grown 13 different breakpoints (420 → 1060px),
   which makes layouts jump at unpredictable widths. This layer
   does not delete them — it adds the safety nets that were
   missing, so nothing can overflow horizontally at any size.

   Reference sizes: 360 · 390 · 768 · 1024 · 1280 · 1440
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Overflow safety net ──
   The single most common cause of horizontal scroll on phones is
   an element that cannot shrink: a wide table, a code block, an
   embed, or one very long unbroken word (a URL in a comment). */
img, video, iframe, embed, object, canvas, svg:not([width]) {
  max-width: 100%;
}
iframe, embed, object { height: auto; }

/* Long words and URLs wrap instead of pushing the page wide */
p, li, h1, h2, h3, h4, h5, h6,
.iw-article-card-title, .iw-archive-card-title,
.comment-content, .iw-author-box-bio {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Wide content scrolls inside itself, never widens the page */
/* Scoped to editorial content only. A bare `table` selector would also
   hit any table used for layout and collapse its column widths. */
.entry-content table,
.iw-single-content table,
.comment-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 2. Grid and flex blowout guard ──
   A grid/flex child defaults to min-width:auto, so its content can
   force the track wider than the container. This is why long titles
   break card grids. */
.iw-articles-grid > *,
.iw-archive-grid > *,
.iw-allcats-grid > *,
.iw-footer-grid > *,
.iw-trending-grid > *,
.iw-stats-row > *,
.iw-content,
.iw-inner-main,
.iw-archive-main { min-width: 0; }

/* ── 3. Fluid typography ──
   Headings scale with the viewport instead of stepping at
   breakpoints, so there is no size that looks wrong. */
h1 { font-size: clamp(25px, 4.2vw, 38px); }
h2 { font-size: clamp(21px, 3vw, 30px); }
h3 { font-size: clamp(17px, 2vw, 22px); }

/* ── 4. Touch targets (WCAG 2.5.8) ──
   Anything tappable needs ~44px. Applies only to real pointers
   that are coarse, so desktop density is unaffected. */
@media (pointer: coarse) {
  button,
  input[type="submit"],
  .iw-btn,
  .iw-heart-btn,
  .iw-heart-outline,
  .iw-view-profile,
  .iw-sec-head .iw-sec-more,
  .comment-reply-link {
    min-height: 44px;
    min-width: 44px;
  }
  .iw-cat-pill,
  .iw-trending-tile { padding-top: 9px; padding-bottom: 9px; }
}

/* ── 5. Tablet ── */
@media (max-width: 1024px) {
  :root { --iw-sec-gap: 54px; }

  /* Archive rail drops below the listing */
  .iw-arch-cols { grid-template-columns: 1fr; gap: 40px; }
  .iw-arch-rail { position: static; }
}

/* ── 6. Mobile ── */
@media (max-width: 760px) {
  :root { --iw-sec-gap: 42px; }

  .iw-sec-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
  }
  .iw-sec-head .iw-sec-more { margin-left: 0; }

  /* Single column everywhere below tablet */
  .iw-articles-grid,
  .iw-archive-grid,
  .iw-allcats-grid { grid-template-columns: 1fr; }

  /* Listing entries: thumbnail shrinks before it stacks */
  .iw-article-card,
  .iw-archive-card { grid-template-columns: 120px 1fr; gap: 16px; padding: 20px 0; }

  /* Panels lose their side padding on small screens */
  .iw-sidebar-widget,
  .iw-stats-card,
  .iw-bloggers-card,
  .iw-trending-card { padding-left: 16px; padding-right: 16px; }
}

/* ── 7. Small phones (360px and below) ── */
@media (max-width: 520px) {
  /* Below this the thumbnail is too small to read — stack instead */
  .iw-article-card,
  .iw-archive-card { grid-template-columns: 1fr; gap: 13px; }
  .iw-article-card-img,
  .iw-archive-card-img,
  .iw-article-card-no-img { aspect-ratio: 16 / 9; }
  .iw-article-card-title,
  .iw-archive-card-title { font-size: 17px; }
}

@media (max-width: 400px) {
  body { font-size: 14.5px; }
  .iw-sec-head { padding-bottom: 12px; }
  .iw-stats-row { flex-wrap: wrap; }
  .iw-stat-sep { display: none; }

  /* Two-up tiles become one-up rather than squashing */
  .iw-trending-grid { grid-template-columns: 1fr; }
}

/* ── 8. Landscape phones — reclaim vertical space ── */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --iw-sec-gap: 32px; }
}

/* ── 9. Large screens — stop lines getting too long to read ── */
@media (min-width: 1600px) {
  .iw-article-card-excerpt,
  .iw-archive-card-excerpt,
  .comment-content { max-width: 72ch; }
}