/* ==========================================================================
   adschoolmaster.com — site.css
   Single stylesheet for the whole site. No framework, no build step.

   Tokens are the measured brand values:
     #FE8802 orange   #2D3B56 navy   #D3D6DD grey
   sampled from adschoolmaster_logo_1000px.jpg, not picked by eye.

   ACCESSIBILITY CONSTRAINTS THAT DRIVE THE CHOICES BELOW
     navy on white ............ 11.22:1  AAA
     white on navy ............ 11.22:1  AAA
     navy on orange ............ 4.67:1  AA   <- buttons use this
     orange on white ........... 2.40:1  FAIL <- never text
     white on orange ........... 2.40:1  FAIL <- never button labels
     grey on white ............. 1.46:1  FAIL <- borders only
   Orange as text uses --ink-orange (#B35F00, 4.61:1) instead.
   ========================================================================== */

:root{
  /* core, sampled */
  --orange:#FE8802;
  --navy:#2D3B56;
  --grey:#D3D6DD;

  /* derived for contrast */
  --muted:#5C6980;        /* 5.54:1 on white */
  --ink-orange:#B35F00;   /* 4.61:1 on white — orange used AS TEXT */
  --press:#E07800;        /* button hover */
  --hairline:#EDEFF2;
  --tint:#F5F7FA;
  --field:#2D3B56;        /* full-bleed band */
  --field-soft:#3D4D6B;
  --on-field:#C3CCDD;
  --paper:#FFFFFF;

  /* type scale — leading tightens as size grows.
     Ahrefs run their 92px hero at 0.87; Backlinko run 40px at 1.40.
     Tight for display, loose for body. */
  --t-display:62px;  --l-display:0.98;
  --t-h1:44px;       --l-h1:1.06;
  --t-h2:30px;       --l-h2:1.20;
  --t-h3:24px;       --l-h3:1.30;
  --t-lede:20px;     --l-lede:34px;
  --t-body:18px;     --l-body:32px;
  --t-small:15px;    --l-small:24px;

  --measure:34rem;   /* ~66 characters at 18px Inter */
  --shell:1180px;
  --wide:900px;      /* screenshots break past the measure to this */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:Inter,-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--t-body);line-height:var(--l-body);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--grey);
  text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:#FFE6CC;color:var(--navy)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------------
   Header. No promo bar — Backlinko run one site-wide and it is the loudest
   element on their page. One CTA, orange, navy label.
   -------------------------------------------------------------------------- */
.top{border-bottom:1px solid var(--hairline);background:var(--paper)}
.top .shell{display:flex;align-items:center;gap:32px;min-height:80px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{height:34px;width:auto}
/* wordmark: 'ad' heavier rather than coloured — survives greyscale, print,
   and small sizes where orange on white would fail contrast */
.brand .wm{font-size:19px;letter-spacing:-.045em;font-weight:400;color:var(--navy)}
.brand .wm b{font-weight:800}
nav.main{display:flex;gap:30px;margin-left:auto;font-size:16px;font-weight:500}
nav.main a{text-decoration:none;color:var(--muted)}
nav.main a:hover,nav.main a[aria-current]{color:var(--navy)}
nav.main a[aria-current]{font-weight:600}
.cta{display:inline-block;font-size:15px;font-weight:600;text-decoration:none;
  color:var(--navy);background:var(--orange);padding:11px 20px;border-radius:6px}
.cta:hover{background:var(--press);color:var(--navy)}
/* Nav is a <details> element, so it collapses with no JavaScript.
   On desktop the summary is hidden, which makes it uncollapsible. */
.navwrap{margin-left:auto}
.navwrap > summary{display:none;list-style:none;cursor:pointer;padding:10px}
.navwrap > summary::-webkit-details-marker{display:none}
.navwrap > summary span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0}
@media (max-width:980px){
  .top .shell{flex-wrap:wrap}
  .navwrap{margin-left:auto;order:1}
  .navwrap > summary{display:block}
  .navwrap[open] > summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navwrap[open] > summary span:nth-child(2){opacity:0}
  .navwrap[open] > summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .navwrap nav.main{position:absolute;left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--hairline);padding:4px 28px 18px;z-index:20}
  .navwrap nav.main a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--hairline)}
  .top{position:relative}
  .cta{order:2}
}

/* --------------------------------------------------------------------------
   Article hero. Ahrefs' structure — full-bleed field, pills, author left,
   meta right — in ASM navy rather than their blue.
   -------------------------------------------------------------------------- */
.hero{background:var(--field);color:#fff}
.hero .shell{padding:52px 28px 46px}
.hero h1{font-size:clamp(32px,5vw,var(--t-h1));font-weight:800;letter-spacing:-.03em;
  line-height:var(--l-h1);margin:0;max-width:20ch;color:#fff}
.hero .dek{font-size:var(--t-lede);line-height:var(--l-lede);color:var(--on-field);
  margin:18px 0 0;max-width:50ch}
.eyebrow{font-size:15px;font-weight:500;color:var(--on-field);margin:0 0 16px}
.eyebrow a{color:var(--on-field);text-decoration-color:#55627A}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:0;list-style:none}
.pill{font-size:13px;font-weight:600;color:#fff;background:var(--field-soft);
  padding:5px 11px;border-radius:4px;text-decoration:none}
.pill:hover{background:#4A5C7E;color:#fff}
.meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 0;
  font-size:15px;color:var(--on-field)}
.meta img{width:40px;height:40px;border-radius:50%}
.meta b{font-weight:600;color:#fff;display:block}
.meta .who{line-height:22px}
.meta .when{margin-left:auto;text-align:right;line-height:22px}
@media (max-width:640px){.meta .when{margin-left:0;text-align:left;width:100%}}

/* performance strip. Ahrefs put their own data on their own articles; on an
   SEO site that is proof. Numbers must be real or the strip is omitted. */
.perf{background:var(--field-soft);color:var(--on-field);font-size:15px}
.perf .shell{padding:13px 28px;display:flex;gap:26px;flex-wrap:wrap}
.perf b{color:#fff;font-weight:600}

/* --------------------------------------------------------------------------
   Two-column body: sticky contents rail left, prose centre, right margin
   deliberately empty. Backlinko put a social share rail there; at this
   traffic it earns nothing and costs attention.
   -------------------------------------------------------------------------- */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;
  align-items:start;padding-bottom:24px}
.toc{position:sticky;top:32px;font-size:15px;line-height:23px;
  max-height:calc(100vh - 64px);overflow-y:auto;padding-right:8px}
.toc > summary{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--hairline);
  list-style:none;cursor:default}
.toc > summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:11px}
.toc li.sub{padding-left:14px}
.toc li.sub a{font-size:14px}
.toc a{display:block;text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--navy)}
.toc a.on{color:var(--navy);font-weight:600;box-shadow:inset 2px 0 0 var(--orange);
  padding-left:11px;margin-left:-13px}

@media (max-width:940px){
  /* Backlinko's mobile pattern: an inline collapsible card that scrolls away,
     not a rail and not a bottom drawer. */
  .layout{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;border:1px solid var(--hairline);
    border-radius:10px;padding:18px 20px;margin:0 0 36px}
  .toc > summary{margin:0;padding-bottom:0;border-bottom:0;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;font-size:14px}
  .toc > summary::after{content:'\002B';font-size:19px;font-weight:400;line-height:1}
  .toc[open] > summary::after{content:'\2212'}
  .toc[open] > summary{margin-bottom:16px;padding-bottom:16px;
    border-bottom:1px solid var(--hairline)}
  .toc li{margin-bottom:16px}
  .toc a{font-size:17px;line-height:26px}
}

.body{max-width:var(--measure);margin:0 auto;padding-top:44px}
/* Screenshots break past the reading measure — a SERP squeezed into 66
   characters is unreadable, and the teaching content is mostly screenshots.
   Bounded by NEGATIVE MARGINS rather than viewport width: the article sits in
   the right-hand grid column, so anything measured against 100vw centres on
   the window and slides left over the contents rail. */
.body > figure{margin-left:-96px;margin-right:-96px}
.body > figure img{max-width:100%}
@media (max-width:1120px){.body > figure{margin-left:-40px;margin-right:-40px}}
@media (max-width:940px){.body > figure{margin-left:0;margin-right:0}}

.body h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.022em;
  line-height:var(--l-h2);margin:52px 0 16px}
.body h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;
  line-height:var(--l-h3);margin:42px 0 12px}
.body h4{font-size:19px;font-weight:600;line-height:1.4;margin:32px 0 8px}
.body p{margin:0 0 24px}
.body ul,.body ol{margin:0 0 24px;padding-left:24px}
.body li{margin-bottom:10px}
.body strong,.body b{font-weight:600}
.body blockquote{margin:32px 0;padding:2px 0 2px 22px;border-left:3px solid var(--orange);
  color:var(--muted)}
.body figure{margin:36px 0}
.body figure img{border:1px solid var(--hairline);border-radius:6px;margin-inline:auto}
.body figcaption{font-size:var(--t-small);line-height:var(--l-small);color:var(--muted);
  margin-top:12px;text-align:center}
.body details{border:1px solid var(--hairline);border-radius:8px;padding:16px 18px;margin:0 0 12px}
.body summary{font-weight:600;cursor:pointer}
.body details[open] summary{margin-bottom:10px}
.body .video iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:6px;border:0}
.body table{border-collapse:collapse;width:100%;font-size:16px;margin:0 0 24px}
.body th,.body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hairline)}
.body th{font-weight:600;font-size:14px;color:var(--muted)}

/* ---------------- landing pages ----------------
   No contents rail, no 66-character measure. These pages are read by scanning,
   not by reading, so the column runs wide and images fill it. */
[data-kind="landing"] .layout{grid-template-columns:1fr;gap:0}
[data-kind="landing"] .body{max-width:none;padding-top:52px}
[data-kind="landing"] .body > p,
[data-kind="landing"] .body > ul,
[data-kind="landing"] .body > ol,
[data-kind="landing"] .body > h2,
[data-kind="landing"] .body > h3,
[data-kind="landing"] .body > h4{max-width:var(--measure);margin-left:auto;margin-right:auto}
[data-kind="landing"] .body > figure{margin-left:0;margin-right:0;text-align:center}
[data-kind="landing"] .body h2{font-size:clamp(28px,3.6vw,38px);text-align:center;margin-top:64px}
[data-kind="landing"] .cta-row{text-align:center;margin:36px 0}

.cta-row{margin:32px 0}
.cta-row .btn{font-size:17px;padding:15px 30px}

/* chapter rule for long guides with a chapter structure */
.chapter{margin:64px 0 0;padding-top:28px;border-top:2px solid var(--navy)}
.chapter .n{font-size:14px;font-weight:600;color:var(--ink-orange);margin:0 0 6px}

/* --------------------------------------------------------------------------
   Dorqa hand-off. No API call is made from any page — the box routes by
   input type and redirects, so anonymous traffic costs nothing however
   well the page ranks.
   -------------------------------------------------------------------------- */
.handoff{max-width:var(--measure);margin:52px auto;padding:30px;
  border:1px solid var(--grey);border-radius:10px}
.handoff h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.handoff > p{font-size:17px;color:var(--muted);margin:0 0 20px}
.handoff form{display:flex;gap:10px;flex-wrap:wrap}
.handoff input,.handoff select{padding:13px 15px;font-family:inherit;font-size:17px;
  color:var(--navy);border:1px solid var(--grey);border-radius:6px;background:#fff}
.handoff input{flex:1 1 210px;min-width:0}
.handoff button{padding:13px 24px;font-family:inherit;font-size:16px;font-weight:600;
  color:var(--navy);background:var(--orange);border:0;border-radius:6px;cursor:pointer}
.handoff button:hover{background:var(--press)}
.handoff .fine{font-size:14px;line-height:22px;color:var(--muted);margin:14px 0 0}

/* --------------------------------------------------------------------------
   Buttons, cards, pager
   -------------------------------------------------------------------------- */
.btn{display:inline-block;padding:13px 24px;border-radius:6px;background:var(--orange);
  color:var(--navy);font-size:16px;font-weight:600;text-decoration:none}
.btn:hover{background:var(--press);color:var(--navy)}
.btn--quiet{background:transparent;color:var(--navy);border:1px solid var(--grey)}
.btn--quiet:hover{background:var(--tint);color:var(--navy)}
.btn--onfield{background:transparent;color:#fff;border:1px solid #55627A}
.btn--onfield:hover{background:var(--field-soft);color:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{display:block;border:1px solid var(--hairline);border-radius:10px;padding:20px;
  text-decoration:none;color:var(--navy)}
.card:hover{border-color:var(--grey);background:var(--tint)}
.card b{display:block;font-size:17px;font-weight:600;margin-bottom:4px;line-height:26px}
.card span{font-size:16px;line-height:26px;color:var(--muted)}

.pager{max-width:var(--measure);margin:0 auto;padding:36px 0 72px;
  border-top:1px solid var(--hairline);display:flex;gap:20px}
.pager a{text-decoration:none;max-width:47%}
.pager .dir{display:block;font-size:14px;font-weight:500;color:var(--muted)}
.pager .ttl{font-size:18px;font-weight:600;line-height:26px}
.pager a:hover .ttl{color:var(--ink-orange)}
.pager .next{margin-left:auto;text-align:right}

/* --------------------------------------------------------------------------
   Footer — dark navy, following Backlinko. White on navy is 11.22:1.
   -------------------------------------------------------------------------- */
footer.site{background:var(--field);color:var(--on-field);font-size:16px;margin-top:24px}
footer.site .shell{padding:52px 28px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:36px}
footer.site h4{font-size:14px;font-weight:600;margin:0 0 14px;color:#fff}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:10px}
footer.site a{color:var(--on-field);text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--orange)}
footer.site .blurb{font-size:16px;line-height:27px;max-width:30ch;margin:16px 0 0}
footer.site .wm{color:#fff;font-size:19px;letter-spacing:-.045em;font-weight:400}
footer.site .wm b{font-weight:800}
.base{border-top:1px solid var(--field-soft)}
.base .shell{padding:20px 28px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:15px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
@media print{
  .top,.toc,.pager,footer.site,.handoff{display:none}
  .body{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:12px;color:#555}
}

/* commitment section — badge + text rows */
.commit-lede { max-width: 62ch; margin: 0 auto 3rem; text-align: center; }
.commit-row { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem;
              align-items: center; max-width: 900px; margin: 0 auto 3rem; }
.commit-badge { width: 100%; height: auto; }
.commit-body h3 { margin: 0 0 .75rem; }
.commit-body p { margin: 0; }
@media (max-width: 700px) {
  .commit-row { grid-template-columns: 1fr; gap: 1.25rem; justify-items: center;
                text-align: center; }
  .commit-badge { max-width: 160px; }
}

/* global image sizing guard */
main img { max-width: 100%; height: auto; }
figure { margin: 2rem 0; }
figure img { display: block; margin: 0 auto; }

/* logo rows — any run of small square logos */
.logo-row { display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 40px; align-items: center; justify-items: center;
            max-width: 1000px; margin: 3rem auto; }
.logo-row img { height: 48px; width: auto; max-width: 140px;
                object-fit: contain; }
@media (max-width: 700px) {
  .logo-row { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .logo-row img { height: 36px; }
}

/* ---- shared band modifiers (were page-local on the Gurgaon page) ---- */
.band--navy{background:var(--field,#2D3B56);color:#fff}
.band--tint{background:var(--tint,#f4f6f9)}
.band--orange{background:var(--orange,var(--orange));color:var(--navy,#2D3B56)}
.band .shell{padding:72px 28px}
@media (max-width:700px){.band .shell{padding:48px 24px}}
.band--navy h1,.band--navy h2,.band--navy h3{color:#fff}
.band--navy p{color:var(--on-field,#c9d2e0)}

/* ---- forms ---- */
.f{max-width:560px;margin:2rem auto}
.f label{display:block;font-size:.875rem;font-weight:600;margin:.9rem 0 .3rem}
.f input,.f select,.f textarea{width:100%;padding:.6rem .8rem;font:inherit;
  border:1px solid #cbd2dc;border-radius:6px;background:#fff;box-sizing:border-box}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--orange);
  outline-offset:1px;border-color:var(--orange)}
.f textarea{resize:vertical;min-height:110px}
.f button{margin-top:1rem;padding:.7rem 1.5rem;font:inherit;font-weight:700;
  cursor:pointer;border:0;border-radius:6px;background:var(--orange);color:var(--navy)}
.f button:hover{filter:brightness(.95)}
.f--inline{display:flex;gap:.5rem;align-items:stretch;max-width:640px}
.f--inline input[type="email"]{flex:1}
.f--inline button{margin-top:0;white-space:nowrap}
@media (max-width:560px){.f--inline{flex-direction:column}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.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}

.f--stack{max-width:600px}

/* two-up rows on wider screens */
.f .pair{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.f .pair{grid-template-columns:1fr}}

/* newsletter — tighten vertical rhythm */
.nl-hero .shell{padding-top:56px;padding-bottom:56px}
.nl-proof .shell{padding-top:56px;padding-bottom:56px}
.nl-close .shell{padding-top:52px;padding-bottom:52px}
.nl-proof .where{margin-top:26px}
.nl-proof .logo-row{margin:20px auto 0}

/* per-logo optical sizing. The source crops have wildly different
   built-in whitespace, so equal box height looks unequal. Tuned by
   eye against the rendered row, not by file dimensions. */
.nl-proof .logo-row img{height:40px}
.nl-proof .logo-row img:nth-child(1){height:34px}  /* adobe  */
.nl-proof .logo-row img:nth-child(2){height:46px}  /* samsung */
.nl-proof .logo-row img:nth-child(3){height:32px}  /* google */
.nl-proof .logo-row img:nth-child(4){height:44px}  /* ibm */
.nl-proof .logo-row img:nth-child(5){height:52px}  /* amex */


/* header logo. The SVG already contains the wordmark, so it carries the
   brand alone and needs the height to keep "adschoolmaster" legible. */
.top .brand img{width:auto;height:72px}
.top .brand{gap:0}

/* A page with no headings deep enough for a contents rail has no .toc
   element, so the article became the FIRST grid child and rendered inside
   the 230px rail column. Collapse to one column when there is no rail. */
.layout:not(:has(.toc)){grid-template-columns:minmax(0,1fr)}

/* ---- /blog/ index ---------------------------------------------------
   No dates: nothing published since July 2023, so a dated list would
   only draw attention to the gap. Dates stay in the schema. */
.blog-lede{font-size:19px;line-height:31px;color:var(--muted);
  margin:0 0 34px;max-width:52ch}
.blog-list{list-style:none;margin:0;padding:0}
.blog-list li{padding:22px 0;border-bottom:1px solid var(--hairline)}
.blog-list li:first-child{border-top:1px solid var(--hairline)}
.blog-list a{font-size:21px;line-height:31px;font-weight:600;
  letter-spacing:-.01em;color:var(--navy);text-decoration:none;
  display:inline-block}
.blog-list a:hover{color:var(--ink-orange)}
.blog-list p{font-size:16px;line-height:27px;color:var(--muted);
  margin:7px 0 0;max-width:64ch}

.bby{display:block;font-size:14px;color:var(--muted);margin:8px 0 0}

/* ---- author block, end of every post -------------------------------
   Photos are object-fit: cover in a circular frame rather than
   pre-cropped, so an unusual headshot cannot lose its head. */
.authorbox{display:grid;grid-template-columns:150px minmax(0,1fr) 200px;
  gap:34px;align-items:start;max-width:1000px;margin:60px auto 0;
  padding:44px 0 0;border-top:1px solid var(--hairline)}
.ab-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block}
.ab-kicker{font-size:14px;color:var(--muted);margin:0 0 4px}
.authorbox h2{font-size:28px;font-weight:800;letter-spacing:-.025em;margin:0 0 14px}
.authorbox h2 a{color:inherit;text-decoration:none}
.authorbox h2 a:hover{color:var(--ink-orange)}
.ab-bio{font-size:17px;line-height:29px;color:var(--muted);margin:0}
.ab-links{margin:16px 0 0;display:flex;gap:16px}
.ab-links a{font-size:14px;color:var(--muted);text-decoration:none}
.ab-links a:hover{color:var(--ink-orange);text-decoration:underline}
.ab-contrib h3{font-size:14px;font-weight:400;color:var(--muted);margin:0 0 12px}
.ab-contrib a{display:flex;align-items:center;gap:10px;font-size:15px;
  font-weight:500;color:var(--navy);text-decoration:none}
.ab-contrib a:hover{color:var(--ink-orange)}
.ab-contrib img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.meta .with{display:block;font-size:14px;color:var(--muted);margin-top:2px}

@media (max-width:860px){
  .authorbox{grid-template-columns:1fr;gap:22px;text-align:left}
  .ab-photo{width:110px;height:110px}
}

/* ---- post hero -------------------------------------------------- */
.eyebrow .pill{display:inline-block;padding:6px 14px;border-radius:5px;
  background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.eyebrow .pill:hover{background:rgba(255,255,255,.24)}
.meta .who{display:flex;align-items:center;gap:13px}
.who-pic{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 52px}
.who-txt{display:block}
.meta .when .rt{display:block;font-size:14px;opacity:.75;margin-top:2px}

/* ---- related --------------------------------------------------- */
.related{padding:64px 0 8px;border-top:1px solid var(--hairline);margin-top:56px}
.related h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.03em;
  margin:0 0 32px}
.rl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rl-card a{display:block;text-decoration:none;color:inherit}
.rl-card img{width:100%;height:auto;border-radius:9px;display:block;
  border:1px solid var(--hairline)}
.rl-cat{display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-orange);margin:15px 0 6px}
.rl-card h3{font-size:18px;line-height:27px;font-weight:700;letter-spacing:-.015em;
  margin:0}
.rl-card a:hover h3{color:var(--ink-orange)}
.rl-by{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:14px;color:var(--muted)}
.rl-by img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:0}

/* ---- post newsletter band --------------------------------------- */
.postsub{text-align:center;margin-top:56px}
.postsub h2{font-size:clamp(25px,3.2vw,34px);font-weight:800;letter-spacing:-.03em;
  margin:0 auto 14px;max-width:20ch;color:#fff}
.postsub p{font-size:17px;line-height:28px;color:var(--on-field);
  margin:0 auto 26px;max-width:42ch}
.postsub .f{margin:0 auto}

@media (max-width:900px){
  .rl-grid{grid-template-columns:1fr;gap:32px}
}

/* Newsletter band on posts is light, not navy: it sat directly on the
   navy footer and the two read as a single block. */
.postsub h2{color:var(--navy)}
.postsub p{color:var(--muted)}
.postsub .consent label{color:var(--muted)}

/* Hero portrait: bigger, and biased upward so the crop lands on the face
   rather than the middle of a wide shot. */
.who-pic{width:64px;height:64px;min-width:64px;min-height:64px;flex:0 0 64px;object-position:center 18%}
.ab-photo{object-position:center 18%}
.rl-by img{object-position:center 18%}

/* The hero portrait was rendering as an oval: another rule was winning on
   height. Lock both axes explicitly. */
.meta .who .who-pic{
  width:64px; height:64px;
  min-width:64px; min-height:64px;
  max-width:64px; max-height:64px;
  flex:0 0 64px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}

/* Active contents item in brand orange. The earlier rule used a variable
   that may not exist, so it fell through to the inherited dark colour. */
.toc a.on,
.toc li a.on{
  color:#E8871E !important;
  font-weight:600;
}
.toc a.on::before{
  content:"";
  position:absolute;
  left:-14px;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#E8871E;
}

/* Active contents item. Uses --ink-orange (#B35F00), the accessible
   text orange, not --orange (#FE8802) which fails contrast on white. */
.layout .toc ol li a.on,
.layout .toc a.on{
  color:var(--ink-orange);
  font-weight:600;
}
.layout .toc a.on::before{
  content:"";
  position:absolute;
  left:-14px;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ink-orange);
}

/* The rail scrolls internally, so items were being sliced by its top and
   bottom edges mid-line. Fade the cut instead of a hard crop. */
.layout .toc{
  padding-top:4px;
  padding-bottom:4px;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
/* the summary must stay solid, so lift it out of the fade */
.layout .toc > summary{
  position:sticky;
  top:0;
  z-index:1;
  background:#fff;
  padding-bottom:8px;
}

/* The active item was shifting left: the dot sat at -14px with no gutter
   reserved, so the text moved when the class was applied. Pad every item
   the same amount and put the dot inside that space. */
.layout .toc ol li{
  padding-left:16px;
}
.layout .toc a.on::before{
  left:0;
}

/* Colour only, no marker. The bar was an existing li border showing
   through once the active class applied. */
.layout .toc a.on::before{content:none}
.layout .toc ol li{padding-left:0;border-left:0}
.layout .toc ol li.on,
.layout .toc ol li:has(a.on){border-left:0;background:none}

/* Drop the edge fade: it was making the first and last items unreadable.
   A plain scroll with a little breathing room is better than a soft crop. */
.layout .toc{
  -webkit-mask-image:none;
  mask-image:none;
  padding-top:0;
  padding-bottom:14px;
}

/* No internal scrolling. Any fixed-height box with overflow slices the
   item at its edge, which is what kept getting cut. The rail is now a
   normal column that scrolls with the page. */
.layout .toc{
  max-height:none;
  overflow:visible;
  position:sticky;
  top:24px;
  align-self:start;
}

/* ---- mobile: contents as a bottom sheet -------------------------------
   Pinned to the bottom, collapsed until tapped, the way Backlinko does
   it. The open/close is the native <details>; only the position and the
   +/- marker are CSS. toc.js removes the open attribute below 900px. */
@media (max-width:900px){
  .layout .toc{
    position:fixed;
    left:0; right:0; bottom:0;
    top:auto;
    z-index:60;
    margin:0;
    max-height:70vh;
    overflow-y:auto;
    background:#fff;
    border-top:1px solid var(--hairline);
    border-radius:14px 14px 0 0;
    box-shadow:0 -10px 30px rgba(15,23,42,.14);
    padding:0;
  }
  .layout .toc > summary{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
    margin:0;
    background:#fff;
    font-size:13px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-orange);
    cursor:pointer;
    list-style:none;
  }
  .layout .toc > summary::-webkit-details-marker{display:none}
  .layout .toc > summary::after{
    content:"+";
    font-size:22px; font-weight:400; line-height:1;
    color:var(--muted);
  }
  .layout .toc[open] > summary{
    border-bottom:1px solid var(--hairline);
  }
  .layout .toc[open] > summary::after{content:"\2212"}
  .layout .toc ol{
    padding:8px 20px 24px;
    margin:0;
  }
  .layout .toc ol li{padding:0}
  .layout .toc a{
    display:block;
    padding:11px 0;
    font-size:16px;
    line-height:24px;
  }
  /* clear the bar so the footer is reachable */
  body{padding-bottom:64px}
}

/* position:fixed was resolving against an ancestor, not the viewport,
   because something up the tree creates a containing block. Neutralise
   it at mobile width so the bar pins to the screen. */
@media (max-width:900px){
  .layout,
  .layout > *,
  main,
  body{
    transform:none;
    filter:none;
    perspective:none;
    contain:none;
    will-change:auto;
  }
}

/* ======================================================================
   QUIZ RESULTS — the gate and the score card.
   The answers below them use the .qz-item styles already on the page.
   ====================================================================== */
.qz-gate{border:1px solid var(--grey);border-radius:14px;padding:36px 34px;
  margin:0 0 40px;background:#fff}
.qz-gate h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;
  letter-spacing:-.025em;margin:0 0 10px}
.qz-gate-lede{font-size:17px;line-height:28px;color:var(--muted);
  margin:0 0 26px;max-width:52ch}
.qz-gate-form label{display:block;font-size:14px;font-weight:600;margin:0 0 7px}
.qz-gate-form input[type="text"],
.qz-gate-form input[type="email"]{width:100%;padding:13px 15px;
  font-family:inherit;font-size:17px;color:var(--navy);
  border:1px solid var(--grey);border-radius:8px;background:#fff;margin:0 0 18px}
.qz-gate-form input:focus{outline:2px solid var(--orange);outline-offset:1px;
  border-color:var(--orange)}
.qz-gate-form .consent{display:flex;align-items:flex-start;gap:9px;margin:0 0 22px}
.qz-gate-form .consent input[type="checkbox"]{width:15px;height:15px;
  flex:0 0 15px;margin-top:4px;padding:0}
.qz-gate-form .consent label{margin:0;font-size:13px;line-height:21px;
  font-weight:400;color:var(--muted)}
.qz-gate-form .btn{border:0;cursor:pointer;font-family:inherit;font-size:17px;
  padding:15px 30px}

.qz-result{text-align:center;padding:44px 28px;border-radius:14px;
  background:var(--tint);border:1px solid var(--hairline);margin:0 0 40px}
.qz-result.qz-pass{background:#F0FAF3;border-color:#BFE3CB}
.qz-score{font-size:clamp(44px,7vw,64px);font-weight:800;letter-spacing:-.04em;
  line-height:1;margin:0}
.qz-pct{font-size:21px;color:var(--muted);margin:8px 0 16px}
.qz-verdict{font-size:17px;line-height:28px;margin:0 auto 26px;max-width:44ch}
.qz-result .btn{border:0;cursor:pointer;font-family:inherit;font-size:17px;
  padding:15px 30px}
.qz-result .btn--quiet{border:1px solid var(--grey)}
.qz-note{font-size:15px;color:var(--ink-orange);margin:16px 0 0;font-weight:600}
.qz-share{margin:28px 0 26px}
.qz-sharenote{font-size:14px;line-height:23px;color:var(--muted);margin:12px 0 0}
.qz-reviewhead{font-size:clamp(24px,3vw,30px);font-weight:800;
  letter-spacing:-.025em;margin:0 0 6px}

@media (max-width:820px){
  .qz-gate{padding:28px 22px;border-radius:12px}
  .qz-result{padding:34px 20px}
  .qz-gate-form .btn,.qz-result .btn,.qz-share .btn{width:100%}
}