/* ==========================================================================
   TailorTech Blog — Global Stylesheet
   ========================================================================== */

/* ---------- Design tokens (Light) ---------- */
:root {
  --primary:       #102A20;
  --bg:            #F7F7F2;
  --bg-soft:       #DCE8DF;
  --bg-card:       #FFFFFF;
  --ink:           #17201C;
  --ink-soft:      #3E4A43;
  --ink-faint:     #66736C;
  --line:          #D9E0DB;
  --accent:        #C43A22;
  --accent-soft:   #FBE7E2;
  --accent-ink:    #9E2E1B;
  --accent-light:  #F08A6B;
  --teal:          #1E5238;
  --shadow:        0 1px 2px rgba(16,42,32,.06), 0 8px 24px -12px rgba(16,42,32,.20);
  --shadow-lg:     0 2px 4px rgba(16,42,32,.06), 0 24px 48px -20px rgba(16,42,32,.28);
  --radius:        14px;
  --radius-sm:     9px;
  --maxw:          1140px;
  --font-sans:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Design tokens (Dark) ---------- */
:root[data-theme="dark"] {
  --primary:       #16342A;
  --bg:            #0E1512;
  --bg-soft:       #141E18;
  --bg-card:       #16211B;
  --ink:           #EDF3EF;
  --ink-soft:      #B2BFB7;
  --ink-faint:     #7F8D85;
  --line:          #26332C;
  --accent:        #FF7C60;
  --accent-soft:   #2C1712;
  --accent-ink:    #FF9C85;
  --accent-light:  #FF9C85;
  --teal:          #6FC79A;
  --shadow:        0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.75);
  --shadow-lg:     0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.85);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding-left: 1.15em; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 760px; }
.section { padding-block: 72px; }
.section-sm { padding-block: 48px; }
.stack > * + * { margin-top: 16px; }
.center { text-align: center; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.03em; }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.22rem; letter-spacing: -.02em; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: 1.1rem; font-weight: 400; color: var(--ink-soft); }
.muted { color: var(--ink-faint); font-size: .92rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  font-size: .95rem; font-weight: 600;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
:root[data-theme="dark"] .btn-primary { color: #101711; }
.btn-ghost { border-color: var(--line); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); }
}
.nav { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.03em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none;
}
.brand-mark svg { width: 19px; height: 19px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a {
  padding: 8px 14px; border-radius: 8px;
  font-size: .94rem; font-weight: 500; color: var(--ink-soft);
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { display: none; }
.sun { display: none; }
.moon { display: block; }
:root[data-theme="dark"] .sun { display: block; }
:root[data-theme="dark"] .moon { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 14px 22px 22px; margin: 0;
    box-shadow: var(--shadow); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 1rem; }
  .nav-tools { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 84px 64px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(680px 320px at 88% -8%, var(--accent-soft), transparent 65%),
    radial-gradient(520px 280px at 4% 8%, var(--bg-soft), transparent 70%);
}
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 56ch; margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.95rem; line-height: 1.1; letter-spacing: -.03em; }
.stat span { font-size: .84rem; color: var(--ink-faint); }

/* ---------- Cards / Post grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.card-media { aspect-ratio: 16 / 9; background: var(--bg-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 { font-size: 1.16rem; }
.card-body p { color: var(--ink-soft); font-size: .95rem; }
.card-meta { margin-top: auto; padding-top: 6px; display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--ink-faint); }

.tag {
  display: inline-block; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
:root[data-theme="dark"] .tag { color: var(--accent); }

/* Featured card */
.featured { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.featured .card-media { aspect-ratio: auto; min-height: 320px; }
.featured .card-body { padding: 38px; justify-content: center; gap: 14px; }
.featured .card-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 800px) {
  .featured { grid-template-columns: 1fr; }
  .featured .card-media { min-height: 210px; }
  .featured .card-body { padding: 24px; }
}

/* ---------- Section head ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head p:not(.eyebrow) { color: var(--ink-soft); margin-top: 6px; }

/* ---------- Topic tiles ---------- */
.topic {
  display: block; padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-card);
  transition: border-color .2s ease, transform .2s ease;
}
.topic:hover { border-color: var(--accent); transform: translateY(-3px); }
.topic .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; }
.topic .ic svg { width: 21px; height: 21px; }
.topic h3 { font-size: 1.05rem; margin-bottom: 6px; }
.topic p { font-size: .92rem; color: var(--ink-soft); }

/* ---------- Filter bar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 30px; }
.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card);
}
.search:focus-within { border-color: var(--accent); }
.search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: .95rem; }
.search svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  font-size: .87rem; font-weight: 500; color: var(--ink-soft);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .chip.active { color: #101711; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--ink-faint); display: none; }
.empty-state.show { display: block; }

/* ---------- Article ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 100; }
.article-head { padding-block: 52px 30px; border-bottom: 1px solid var(--line); }
.article-head h1 { margin-top: 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 18px; font-size: .89rem; color: var(--ink-faint); }
.avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; font-family: var(--font-sans); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-row { display: flex; align-items: center; gap: 10px; }
.article-cover { margin-block: 30px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

.prose { font-size: 1.02rem; }
.prose > * + * { margin-top: 22px; }
.prose h2 { margin-top: 44px; font-size: 1.72rem; }
.prose h3 { margin-top: 34px; font-size: 1.24rem; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { color: var(--ink-soft); }
.prose li + li { margin-top: 8px; }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px;
  font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--ink);
}
.prose figure { margin: 32px 0; }
.prose figcaption { font-size: .86rem; color: var(--ink-faint); margin-top: 10px; text-align: center; }
.callout {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.callout b { display: block; margin-bottom: 4px; }
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; background: var(--bg-soft); }
.prose td { color: var(--ink-soft); }

.share-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 42px;
}
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.newsletter input {
  flex: 1 1 240px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-card); outline: 0;
}
.newsletter input:focus { border-color: var(--accent); }
.form-note { font-size: .85rem; margin-top: 12px; color: var(--ink-faint); min-height: 1.2em; }
.form-note.ok { color: var(--teal); }

/* ---------- Contact form ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: .88rem; font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 12px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-card); outline: 0;
  transition: border-color .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 130px; }
.field .err { font-size: .8rem; color: #C0392B; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid textarea { border-color: #C0392B; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-block: 52px; }
.footer-grid h4 { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-grid a { font-size: .93rem; color: var(--ink-soft); }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-faint); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Misc ---------- */
.breadcrumb { font-size: .86rem; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent); }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; }

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

/* ==========================================================================
   ASP.NET Web Forms additions
   The whole page sits inside one <form runat="server">, so a few selectors
   that assumed a nested <form> are restated here against class names instead.
   ========================================================================== */

/* Newsletter — was ".newsletter form" in the static build */
.newsletter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.newsletter-input {
  flex: 1 1 240px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-card);
  color: var(--ink); outline: 0;
}
.newsletter-input:focus { border-color: var(--accent); }

/* Search box on Blog.aspx — asp:TextBox renders a plain <input> */
.search-input {
  border: 0; outline: 0; background: transparent;
  width: 100%; font-size: .95rem; color: var(--ink);
}
.search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Topic chips are LinkButtons, so they render as <a> not <button> */
a.chip {
  display: inline-block; text-decoration: none;
  line-height: 1.35;
}
a.chip:hover { text-decoration: none; }

/* Validator messages (asp:RequiredFieldValidator / RegularExpressionValidator) */
.err-msg {
  display: block; font-size: .8rem; color: #C0392B; margin-top: 2px;
}

/* asp:Label renders <label>; keep the stacked field layout intact */
.field > label { font-size: .88rem; font-weight: 600; }

/* Buttons rendered by asp:Button are <input type="submit"> */
input.btn { -webkit-appearance: none; appearance: none; }

/* Toolbar wraps neatly once the Search and Reset buttons are added */
.toolbar .btn { flex: none; }
@media (max-width: 620px) {
  .toolbar { gap: 10px; }
  .toolbar .search { flex: 1 1 100%; }
}




/* ==========================================================================
   MODERN LAYER — larger radii, split hero, image zoom, condensing header
   Appended last so it overrides the base rules above.
   ========================================================================== */

:root  { --radius: 18px; --radius-sm: 12px; }

/* ---------- Header condenses on scroll ---------- */
.nav { transition: height .22s ease; }
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -24px rgba(23,39,29,.55); }
.site-header.scrolled .nav { height: 58px; }

/* ---------- Split hero: words left, artwork right ---------- */
.hero { padding-block: 76px 56px; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 52px; align-items: center;
}
.hero-grid .hero-copy { min-width: 0; }
.hero h1 { max-width: 16ch; }
.hero-art {
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-stats { margin-top: 52px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { order: -1; }
  .hero-art img { aspect-ratio: 16 / 10; }
}

/* ---------- Cards: soft corners, slow image zoom, underline grow ---------- */
.card { border-radius: 18px; }
.card:hover { border-color: var(--line); box-shadow: var(--shadow-lg); }
.card-media { overflow: hidden; }
.card-media img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.card:hover .card-media img { transform: scale(1.045); }
.card-body { padding: 22px; gap: 11px; }
.card-body h3 a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .32s cubic-bezier(.2,.6,.2,1);
}
.card:hover .card-body h3 a { background-size: 100% 1.5px; }
.featured { border-radius: 24px; }

/* ---------- Topic tiles ---------- */
.topic { border-radius: 18px; padding: 26px 24px; }
.topic .ic { border-radius: 13px; }

/* ---------- Newsletter as a centred band ---------- */
.newsletter { border-radius: 24px; padding: 54px 44px; text-align: center; }
.newsletter .lede { margin-inline: auto; }
.newsletter form, .newsletter-row { justify-content: center; }
@media (max-width: 620px) { .newsletter { padding: 36px 22px; } }

/* ---------- Article ---------- */
.article-cover { border-radius: 24px; }
.prose h2 { letter-spacing: -.035em; }
.prose blockquote { border-left-width: 4px; padding-left: 24px; }
.callout { border-radius: var(--radius-sm); border-left-width: 4px; }
.prose table { border-radius: var(--radius-sm); overflow: hidden; }

/* ---------- Buttons ---------- */
.btn { padding: 13px 24px; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost:hover { background: var(--bg-soft); }

/* ---------- Section rhythm ---------- */
.section { padding-block: 84px; }
.section-head { margin-bottom: 34px; }

/* ---------- Share row ---------- */
.share-row .btn { padding: 10px 18px; font-size: .9rem; }
.btn-share { gap: 7px; }
.btn-wa { background: #25D366; color: #0B2E17; border-color: #25D366; }
.btn-wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: #0B2E17; }
.btn-wa svg { flex: none; }

/* Article body styles links; share buttons must opt out of that */
.share-row .btn { text-decoration: none; }
.share-row .btn-ghost { color: var(--ink-soft); }
.share-row .btn-ghost:hover { color: var(--accent); }
.share-row .btn-wa { color: #08290F; }
.share-row .btn-wa:hover { color: #08290F; }

/* ---------- Palette accents ----------
   Tags sit on Soft Green with Primary text; the eyebrow carries the accent. */
.tag { background: var(--bg-soft); color: var(--primary); }
:root[data-theme="dark"] .tag { background: #1B2A22; color: #9CD9B6; }
.eyebrow { color: var(--accent); }
.progress { background: var(--accent); }

/* ---------- Primary dark footer ---------- */
.site-footer {
  background: var(--primary);
  border-top: 0;
  color: #D5E0D9;
}
.site-footer .brand { color: #FFFFFF; }
.site-footer .brand-mark { background: var(--accent); color: #FFFFFF; }
.site-footer h4 { color: #90A89A; }
.site-footer .muted { color: #A8BAAE; }
.site-footer a { color: #C6D4CB; }
.site-footer a:hover { color: var(--accent-light); }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: #93A79A; }
.site-footer .social-row a { border-color: rgba(255,255,255,.2); color: #C6D4CB; }
.site-footer .social-row a:hover { border-color: var(--accent-light); color: var(--accent-light); }

/* ---------- Deep dive band picks up Soft Green ---------- */
.deepdive { background: var(--bg-soft); }
:root[data-theme="dark"] .deepdive { background: var(--bg-soft); }

/* The newsletter panel sits on --bg-soft, where plain --accent measures 4.19.
   --accent-ink lifts it to 5.82 and clears AA. Dark mode already passes. */
.newsletter .eyebrow { color: var(--accent-ink); }
:root[data-theme="dark"] .newsletter .eyebrow { color: var(--accent-light); }


/* ==========================================================================
   COMMENTS under an article
   ========================================================================== */
.comments { margin-top: 46px; padding-top: 34px; border-top: 1px solid var(--line); }
.comments h2 { font-size: 1.35rem; margin-bottom: 4px; }
.comments > p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 24px; }

.comment { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px 0; }
.comment + .comment { border-top: 1px solid var(--line); }
.comment .avatar {
  grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-soft); color: var(--teal);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.comment-who { font-weight: 600; font-size: .94rem; }
.comment-when { font-size: .78rem; color: var(--ink-faint); }
.comment-body { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); margin-top: 5px; }

.comment-form { margin-top: 30px; padding: 24px; background: var(--bg-soft); border-radius: 16px; }
.comment-form h3 { font-size: 1.05rem; margin-bottom: 4px; }
.comment-form > p { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; }
.comment-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .comment-form .row-2 { grid-template-columns: 1fr; } }


/* The byline avatar is white on coral, which measures 2.53 in dark mode.
   Dark ink on the bright coral clears AA at 7.32. The comment avatar sits on
   --bg-soft instead and already passes, so it must not be caught by this. */
:root[data-theme="dark"] .avatar:not(.comment > .avatar) { color: #0E1512; }

/* ==========================================================================
   FLOATING PILL NAVBAR

   The header stops being a full-width band and becomes a rounded bar sitting
   on the page with air around it. Loaded last, so it wins over the band rules
   above without those needing to be deleted.
   ========================================================================== */

.site-header {
  position: sticky; top: 14px; z-index: 50;
  background: transparent;
  border-bottom: 0;
  padding-inline: 16px;
  margin-bottom: -68px;          /* the bar floats over the page, not above it */
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: transparent; backdrop-filter: none; }
}

/* the wrap becomes the pill itself */
.site-header .wrap.nav {
  height: 66px;
  padding-inline: 12px 12px;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 42, 32, .04), 0 12px 32px -18px rgba(16, 42, 32, .35);
  transition: box-shadow .25s ease, height .22s ease, border-color .25s ease;
}
:root[data-theme="dark"] .site-header .wrap.nav {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -18px rgba(0, 0, 0, .8);
}

.site-header.scrolled { box-shadow: none; }
.site-header.scrolled .wrap.nav {
  height: 60px;
  box-shadow: 0 2px 6px rgba(16, 42, 32, .07), 0 18px 42px -20px rgba(16, 42, 32, .5);
}
:root[data-theme="dark"] .site-header.scrolled .wrap.nav {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 42px -20px rgba(0, 0, 0, .9);
}

/* The menu card hangs off the pill, so the pill has to be its anchor. */
.site-header .wrap.nav { position: relative; }

/* ---------- Brand ---------- */
.site-header .brand { padding-left: 8px; flex: none; }

/* ---------- Links sit in the middle, not hard right ---------- */
.site-header .nav-links {
  margin-left: auto; margin-right: auto;
  gap: 2px;
}
.site-header .nav-links > a,
.site-header .nav-drop-btn {
  padding: 9px 15px; border-radius: 999px;
}
.site-header .nav-links > a.active {
  background: var(--accent-soft); color: var(--accent-ink);
}

/* ---------- Right cluster: two round icons, then the filled pill ---------- */
.site-header .nav-tools { gap: 8px; margin-left: 0; flex: none; }
.site-header .icon-btn { width: 40px; height: 40px; border-radius: 50%; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: transform .16s ease, background .16s ease;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--accent-ink); color: #FFFFFF; }
.nav-cta svg { width: 15px; height: 15px; }

/* Dark mode flips the coral bright, so white on it stops being readable. */
:root[data-theme="dark"] .nav-cta { color: #14100E; }
:root[data-theme="dark"] .nav-cta:hover { color: #14100E; }

/* ---------- The topics dropdown hangs off the pill ---------- */
.site-header .nav-drop { top: calc(100% + 14px); border-radius: 18px; }

/* ---------- Pages need room, since the bar now overlaps them ---------- */
body { padding-top: 0; }
main > :first-child:not(.progress) { padding-top: 112px; }
/* the reading-progress bar is a 3px fixed strip, not content: it must not
   eat the header clearance, and the element after it still needs it */
main > .progress:first-child + * { padding-top: 112px; }
.hero { padding-block: 116px 56px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1080px) {
  .nav-cta span { display: none; }
  .nav-cta { padding: 0 13px; }
}

@media (max-width: 860px) {
  .site-header { top: 10px; padding-inline: 12px; margin-bottom: -62px; }
  .site-header .wrap.nav { height: 60px; padding-inline: 10px; border-radius: 30px; }
  .site-header .brand { padding-left: 6px; }
  .site-header .nav-toggle { order: -1; }

  /* the menu drops out of the pill as its own rounded card */
  .site-header .nav-links {
    position: absolute; inset: calc(100% + 10px) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--line); border-radius: 20px;
    padding: 12px; margin: 0;
    box-shadow: 0 18px 44px -20px rgba(16, 42, 32, .55);
    display: none;
  }
  .site-header .nav-links.open { display: flex; }
  .site-header .nav-links > a,
  .site-header .nav-drop-btn { padding: 12px 15px; border-radius: 12px; }

  main > :first-child:not(.progress) { padding-top: 100px; }
  main > .progress:first-child + * { padding-top: 100px; }
  .hero { padding-block: 104px 44px; }
}

@media (max-width: 560px) {
  .nav-cta { display: none; }        /* the newsletter panel is a tap away anyway */
}

/* The floating bar overlaps the page, so a jump target must clear it. */
#newsletter, #deep-dive, [id^="sec-"] { scroll-margin-top: 96px; }

/* ==========================================================================
   REVIEWS
   Stars are text characters, not images or icon fonts: they survive a printed
   page and a copy-paste, and they cost no request. Colour carries the meaning
   for sighted readers, so every star row also carries the rating in words for
   a screen reader.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stars {
  color: var(--accent);
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
}
.stars-lg { font-size: 1.5rem; }

/* ---- The score block ---- */
.review-score {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
}
.score-big { text-align: center; }
.score-big b {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--primary);
}
.score-big .stars { display: block; margin: 8px 0 6px; }
.score-big small { color: var(--ink-faint); font-size: 0.85rem; }

.score-row {
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
}
.score-label { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.score-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.score-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.score-num { font-size: 0.82rem; color: var(--ink-faint); text-align: right; }

/* ---- One review ---- */
.review-card { padding: 26px 28px; }

.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.review-head > div { flex: 1; min-width: 0; }
.review-who {
  display: block;
  font-size: 0.96rem;
  color: var(--primary);
}
.review-when {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.review-body {
  margin: 0;
  color: var(--ink-soft);
  white-space: pre-line;   /* keep the line breaks the customer typed */
}

/* The desk's reply, set apart so it never reads as part of the review */
.review-reply {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-soft);
}
.review-reply p {
  margin: 6px 0 4px;
  color: var(--ink-soft);
  white-space: pre-line;
}
.review-reply small { color: var(--ink-faint); font-size: 0.78rem; }
.reply-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---- Writing one ---- */
.star-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.star-pick label {
  margin: 0 14px 0 4px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.92rem;
}
.star-pick input { cursor: pointer; accent-color: var(--accent); }

.review-thanks { padding: 6px 0; }

@media (max-width: 700px) {
  .review-score { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   NOT FOUND

   The search row on the 404 page. A reader who lands here wanted something
   specific, so the first thing offered is a way to look for it rather than a
   list of links they have to read through.
   ========================================================================== */

.nf-search {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  max-width: 520px;
}
.nf-search input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink);
  font: inherit;
}
.nf-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.nf-search .btn { flex: none; }

@media (max-width: 520px) {
  .nf-search { flex-direction: column; }
  .nf-search .btn { width: 100%; }
}

/* ==========================================================================
   NEXT / PREVIOUS PART  (series, foot of the article)

   Two cards at the end of an article that belongs to a series. The strip at
   the top lists every part; this is for the reader who has just finished one
   and is at the bottom of the page, where scrolling back up to carry on is
   exactly the friction that gets a series abandoned half-read.
   ========================================================================== */

.series-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 34px 0 6px;
}

.series-step {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
}
.series-step:hover {
  border-color: var(--accent);
  text-decoration: none;
}

/* The next part is the one most readers want, so it sits on the right and
   reads right-aligned - the direction they are travelling. */
.series-step.next { text-align: right; }

.series-step-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 5px;
}
.series-step.prev .series-step-label::before { content: "\2190\00a0"; }
.series-step.next .series-step-label::after  { content: "\00a0\2192"; }

.series-step-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--primary);
}

/* On a phone the two stack, and "next" aligning right would look like a
   mistake with nothing beside it. */
@media (max-width: 560px) {
  .series-step.next { text-align: left; }
}

/* ==========================================================================
   ASK ON WHATSAPP  (foot of an article)

   Only rendered when a number has been set in Settings, so these rules are
   inert until the company actually wants to be messaged.
   ========================================================================== */

.ask-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.ask-copy { flex: 1 1 320px; min-width: 0; }
.ask-copy b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--primary);
  margin-bottom: 4px;
}
.ask-copy span {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* WhatsApp's own green, because a messaging button people recognise gets
   pressed and a styled-to-match one does not. White on #25D366 measures
   2.4:1, so the label is dark rather than white. */
.btn-wa {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #04310F;
  border: 0;
  font-weight: 600;
}
.btn-wa:hover { background: #1FB855; color: #04310F; text-decoration: none; }

@media (max-width: 560px) {
  .ask-box { flex-direction: column; align-items: stretch; }
  .btn-wa { justify-content: center; }
}

/* ---------- Who wrote this ----------
   Sits between the tags and the share row: the byline at the top says whose
   name is on the article, this says why a reader should believe them - a
   question nobody has until they have read the thing.

   The photograph reuses .author-face from the author page, so a face is the
   same shape wherever it appears. */
.author-box {
  display: flex; gap: 20px; align-items: flex-start;
  margin-top: 40px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft, transparent);
}
.author-box-text { min-width: 0; }
.author-box-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.author-box h3 { margin: 4px 0 0; font-size: 1.15rem; }
.author-box h3 a { color: var(--ink); }
.author-box h3 a:hover { color: var(--accent-ink); }
.author-box-bio { margin: 8px 0 0; color: var(--ink-soft); font-size: .95rem; }
.author-box-more {
  display: inline-block; margin-top: 10px;
  font-size: .88rem; font-weight: 600; color: var(--accent-ink);
}
.author-box-more:hover { text-decoration: underline; }

/* Stacked on a phone, where 72px of face beside text leaves no room for the
   text to be a sentence. */
@media (max-width: 560px) {
  .author-box { flex-direction: column; gap: 14px; }
}

/* ---------- Disclosure ----------
   Said above the article, not below it: a reader who only finds out at the
   end has already read the piece as a neutral one.

   Deliberately quiet rather than alarming. This is a statement of fact that
   an honest trade publication makes as a matter of course, and dressing it
   as a warning would make an ordinary thing look like a confession. */
.disclosure {
  margin-block: 26px 4px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-soft, transparent);
  font-size: .9rem; line-height: 1.6; color: var(--ink-soft);
}
.disclosure b { color: var(--ink); }