/* Fonts: Inter and DM Sans latin variable files from Google Fonts, self-hosted and preloaded (13 Oct 2026).
   font-display optional: the page uses whichever font is ready at first paint, so text never reflows (no layout shift). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: optional; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: optional; src: url('/fonts/dmsans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* jayjanes.com on the Reformat Studio system (site.css). Only additions live here; spacing follows
   Studio's section rhythm: every band is an .s section (var(--pad) top and bottom), headings sit in .head,
   and nothing adds its own outer margins. */

/* Page wrapper (the rendered page body on the live sites) */
.jj { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: var(--ink); font-size: 17px; line-height: 1.6; background: var(--paper); overflow-x: hidden; }
.jj *, .jj *::before, .jj *::after { box-sizing: border-box; }
.jj .logo, .jj .nav a { color: var(--ink); }

/* Header mega menu: Explore | Topics | Latest articles */
.mega--jj { width: min(1080px, calc(100vw - 2 * var(--gutter))); }
.mega__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.mega__col { padding: 22px; }
.mega__col + .mega__col { border-left: 1px solid var(--line-2); }
.mega__col .mono { display: block; margin-bottom: 10px; }
.mega__link { display: block; padding: 10px 12px; margin-inline: -12px; border-radius: 12px; text-decoration: none; }
.mega__link:hover { background: var(--paper-2); }
.mega__link b { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.mega__link span { display: block; margin-top: 2px; font-size: 13px; color: var(--text); line-height: 1.45; }
@media (max-width: 980px) { .mega__cols { grid-template-columns: minmax(0, 1fr); } .mega__col + .mega__col { border-left: 0; border-top: 1px solid var(--line-2); } }

/* Speaking hero: photo in an ink frame with a card over its corner */
.hero-photo { position: relative; padding-left: 7%; }
.hero-photo .frame { background: var(--ink); padding: 5px; border-radius: 22px; box-shadow: 0 34px 70px -32px rgba(20, 20, 15, 0.5); }
.hero-photo .frame img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 30% 42%; border-radius: 17px; }
.hero-card { position: absolute; left: 0; bottom: -28px; width: min(300px, 58%); background: var(--white); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; box-shadow: 0 24px 48px -24px rgba(20, 20, 15, 0.45); }
.hero-card strong { display: block; margin-top: 8px; font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; }
.hero-card p { margin: 6px 0 14px; font-size: 14px; color: var(--text); line-height: 1.5; }
.hero-card .btn { min-height: 40px; font-size: 14px; padding: 0 16px; }
@media (max-width: 640px) { .hero-card { position: static; width: auto; margin-top: 16px; } .hero-photo { padding-left: 0; } }

/* Small shared parts */
.go { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
a:hover .go { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.btn--white { background: #ffffff; color: var(--ink); border-color: #ffffff; }
.btn--white:hover { background: var(--line-2); }
.filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--white); border-radius: 999px; box-shadow: 0 8px 24px -16px rgba(20, 20, 15, 0.35); }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.quad span { padding: 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.quad span b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.quad span.on { background: var(--ink); border-color: var(--ink); color: #a3a29b; }
.quad span.on b { color: #ffffff; }
@media (max-width: 640px) { .quad { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page heroes ---------- */
.phero { padding-top: clamp(48px, 6vw, 80px); }
.phero .h1 { margin-top: 16px; }
.phero .btns { margin-top: 32px; }
.hero--grid { align-items: center; padding-block: clamp(40px, 5vw, 64px) clamp(72px, 8vw, 112px); }

/* Home hero (Jay, 13 Oct 2026, collage option A): a tall Advisory photo, Workshops and Speaking offset
   beside it, and the Reformat family card bridging the two columns at the foot. */
.hero-l { position: relative; width: 100%; max-width: 600px; height: 520px; justify-self: end; }
.hero-l__img { position: absolute; margin: 0; background: var(--ink); padding: 4px; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(20, 20, 15, 0.55); }
.hero-l__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 18px; }
.hero-l__a { left: 0; top: 40px; width: 46%; height: 400px; }
.hero-l__a img { object-position: 22% 30%; }
.hero-l__b { right: 0; top: 0; width: 50%; height: 230px; }
.hero-l__c { right: 6%; top: 250px; width: 44%; height: 270px; }
.hero-l .hero-card--logos { position: absolute; left: 30%; bottom: 0; z-index: 3; width: 200px; height: auto; aspect-ratio: auto; padding: 6px 18px; }
.hero-l .hero-card--logos span { padding-block: 12px; }
.hero-l__tag { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: #ffffff; border: 1px solid var(--line-2); box-shadow: 0 12px 26px -16px rgba(20, 20, 15, 0.5); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.hero-l__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero-l__tag--ink { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.hero-l__tag--ink::before { background: var(--accent-on-ink); }
.hero-l__a .hero-l__tag { left: 14px; top: 14px; }
.hero-l__b .hero-l__tag, .hero-l__c .hero-l__tag { right: 14px; bottom: 14px; }
@media (max-width: 1100px) { .hero-l { justify-self: start; } }
@media (max-width: 640px) {
  .hero-l { height: 400px; }
  .hero-l__a { top: 30px; height: 300px; }
  .hero-l__b { height: 170px; }
  .hero-l__c { right: 0; top: 184px; width: 50%; height: 200px; }
  .hero-l .hero-card--logos { left: 22%; width: 160px; }
  .hero-l .hero-card--logos span { padding-block: 7px; }
  .hero-l .hero-card--logos img { max-width: 110px; }
  .hero-l__tag { font-size: 12px; padding: 5px 10px; }
  .hero-l__a .hero-l__tag { left: 10px; top: 10px; }
  .hero-l__b .hero-l__tag, .hero-l__c .hero-l__tag { right: 10px; bottom: 10px; }
}

/* ---------- Cards ---------- */
.cards3--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dcard__n { display: block; margin-bottom: 18px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 13px; }
@media (max-width: 900px) { .cards3--3 { grid-template-columns: minmax(0, 1fr); } }

/* Text-only article card */
.acard { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 24px 24px 20px; text-decoration: none; color: var(--ink); transition: box-shadow 0.25s; }
.acard:hover { box-shadow: 0 22px 44px -28px rgba(20, 20, 15, 0.4); }
.acard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.acard__t { margin: 4px 0 0; font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.025em; }
.acard__x { margin: 0; font-size: 15px; color: var(--text); line-height: 1.55; }
.acard__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: stretch; }

/* Latest article: dark card */
.lead-a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; background: var(--ink); color: #ffffff; border-radius: 28px; padding: clamp(28px, 4vw, 56px); text-decoration: none; margin-bottom: 24px; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; }
.lead-a .mono { color: #a3a29b; }
.lead-a h2 { margin: 14px 0 0; font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.04em; }
.lead-a p { margin: 16px 0 0; color: #c9c7bf; max-width: 520px; }
.lead-a .btn { margin-top: 28px; }
.lead-a__side { background: #1c1c17; border: 1px solid #2c2b26; border-radius: 18px; padding: 22px 24px; }
.lead-a__side ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: s; }
.lead-a__side li { counter-increment: s; display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid #2c2b26; font-size: 15px; color: #c9c7bf; }
.lead-a__side li::before { content: counter(s, decimal-leading-zero); font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--accent-on-ink); padding-top: 3px; }
@media (max-width: 900px) { .lead-a { grid-template-columns: minmax(0, 1fr); } }

.byline { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.byline img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.byline strong { display: block; font-size: 15px; font-weight: 600; }
.byline .mono { letter-spacing: 0.06em; }

/* Filter pills as links */
.filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 500 14px 'Inter', sans-serif; color: var(--muted); text-decoration: none; }
.filter a:hover { color: var(--ink); background: var(--paper-2); }
.filter a.on { background: var(--ink); color: #ffffff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-on-ink); }
.filter a b { margin-left: 6px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); }
.filter a.on b { color: #c9c7bf; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); text-decoration: none; font-size: 15px; font-weight: 500; }
.pager a:hover { border-color: var(--ink); }
.pager a.on { background: var(--ink); border-color: var(--ink); color: #ffffff; }

/* ---------- About ---------- */
.tl { margin: 0; }
.tl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.tl > div:last-child { border-bottom: 1px solid var(--line); }
.tl dt { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px; color: var(--muted); padding-top: 2px; }
.tl dd { margin: 0; }
.tl dd strong { display: block; font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.02em; }
.tl dd span { display: block; margin-top: 6px; color: var(--text); font-size: 16px; line-height: 1.6; max-width: 600px; }
@media (max-width: 640px) { .tl > div { grid-template-columns: minmax(0, 1fr); } }

.side2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 80px; align-items: start; }
.side2 .h2 { margin-top: 14px; }
@media (max-width: 900px) { .side2 { grid-template-columns: minmax(0, 1fr); } }

.qband { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.qband__img { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; object-fit: cover; object-position: 50% 20%; }
.qband .show__quote { margin-top: 18px; }
.qband p.b { margin: 24px 0 0; color: #c9c7bf; max-width: 620px; }
@media (max-width: 860px) { .qband { grid-template-columns: minmax(0, 1fr); } .qband__img { max-width: 220px; } }

/* ---------- Speaking ---------- */
.fmenu { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--white); border-radius: 999px; box-shadow: 0 8px 24px -16px rgba(20, 20, 15, 0.35); border: 1px solid var(--line-2); }
.fmenu a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); }
.fmenu a:hover { background: var(--paper-2); color: var(--ink); }
.fmenu a b { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; color: var(--faint); }
.fcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.fcard { grid-column: span 2; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; }
.fcard--wide { grid-column: span 3; }
.fcard__img { padding: 10px 10px 0; }
.fcard__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; display: block; border-radius: 14px; }
.fcard__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 24px; flex: 1; }
.fcard h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.fcard p { margin: 0; font-size: 15px; color: var(--text); }
.bestfor { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.bestfor b { display: block; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.fcard .dotlink { margin-top: auto; align-self: flex-start; padding-top: 8px; }
@media (max-width: 960px) { .fcards { grid-template-columns: minmax(0, 1fr); } .fcard, .fcard--wide { grid-column: auto; } }

/* ---------- Article page ---------- */
.reading { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 40px 80px; align-items: start; }
.toc { position: sticky; top: 24px; font-size: 14px; }
.toc .mono { display: block; margin-bottom: 10px; }
.toc a { display: block; padding: 9px 0 9px 14px; border-left: 2px solid var(--line-2); text-decoration: none; color: var(--text); line-height: 1.4; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.toc .btn { margin-top: 24px; width: 100%; }
@media (max-width: 960px) { .reading { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
.prose { max-width: 720px; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 0; font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.035em; color: var(--ink); }
.prose h3 { margin: 32px 0 0; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.prose p { margin: 18px 0 0; font-size: 18px; line-height: 1.7; }
.prose ul, .prose ol { margin: 18px 0 0; padding-left: 22px; font-size: 18px; line-height: 1.7; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ink); font-size: 20px; color: var(--ink); }
.author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 56px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 22px; padding: 28px; }
.author img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; }
.author p { margin: 8px 0 0; font-size: 16px; color: var(--text); }
.author .btns { margin-top: 18px; }
@media (max-width: 640px) { .author { grid-template-columns: minmax(0, 1fr); } }
.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.prevnext a { display: block; padding: 20px 24px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--white); text-decoration: none; }
.prevnext a:hover { border-color: var(--ink); }
.prevnext strong { display: block; margin-top: 6px; font-size: 17px; letter-spacing: -0.02em; line-height: 1.35; }
.prevnext a:last-child { text-align: right; }
@media (max-width: 640px) { .prevnext { grid-template-columns: minmax(0, 1fr); } .prevnext a:last-child { text-align: left; } }

/* ---------- Contact ---------- */
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px 72px; align-items: start; }
@media (max-width: 960px) { .cgrid { grid-template-columns: minmax(0, 1fr); } }
.fpanel { background: var(--white); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 60px -36px rgba(20, 20, 15, 0.35); }
.fpanel h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.field select { min-height: 50px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--white); font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); }
.me { display: flex; align-items: center; gap: 16px; }
.me img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.me strong { display: block; font-size: 17px; letter-spacing: -0.02em; }

/* ---------- Assessment ---------- */
.as { max-width: 760px; margin-inline: auto; }
.as--wide { max-width: 980px; }
.as__center { text-align: center; }
.as__center .h1, .as__center .lede { margin-inline: auto; }
.as__center .btns { justify-content: center; }
.as__bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.as__bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.as__q { margin: 18px 0 0; font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.035em; }
.as__opts { display: grid; gap: 10px; margin-top: 32px; }
.as__opt { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); font: 500 17px 'Inter', sans-serif; color: var(--ink); text-align: left; cursor: pointer; }
.as__opt:hover { border-color: var(--ink); }
.as__opt b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 13px; color: var(--muted); }
.as__opt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.as__opt.on b { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.as__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.as__nav .btn { min-width: 160px; }
.as__nav .btn[disabled] { opacity: 0.35; pointer-events: none; }
.as__box { background: var(--white); border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(24px, 3vw, 36px); }
.as__box h2 { margin: 10px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.as__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; }
.as__list > div { padding: 14px 0; border-top: 1px solid var(--line-2); }
.as__list p { margin: 0; font-size: 15px; color: var(--ink); }
.as__list span { display: inline-block; margin-top: 8px; }
@media (max-width: 700px) { .as__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.nf { text-align: center; padding-block: clamp(8px, 2vw, 24px); }
.nf .h1, .nf .lede { margin-inline: auto; }
.nf .btns { justify-content: center; margin-top: 32px; }

/* ---------- Footer extras ---------- */
.ftr__me { display: flex; align-items: center; gap: 14px; }
.ftr__me img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }

/* Step illustrations stack on a phone so chips stay on one line */
@media (max-width: 560px) { .ill-row { flex-direction: column; } .ill .chip { white-space: nowrap; } }

/* Facts panel on a grey section */
.s--paper2 .facts { background: var(--white); border: 1px solid var(--line-2); }


/* Footer middle row: the live Reformat Labs and Contact lines */
.ftr__mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; padding-block: 32px; border-bottom: 1px solid #2c2b26; }
.ftr__mid h4, .ftr__mid .ftr__h { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 14px; color: #a3a29b; }
.ftr__mid p { margin: 0 0 14px; font-size: 15px; color: #c9c7bf; max-width: 420px; }
@media (max-width: 640px) { .ftr__mid { grid-template-columns: minmax(0, 1fr); } }

/* About: the three steps in one row, inside Studio's steps panel (no illustrations) */
.steps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--row .step { display: block; }
.steps--row .step + .step { border-top: 0; border-left: 1px solid var(--line-2); }
@media (max-width: 860px) { .steps--row { grid-template-columns: minmax(0, 1fr); } .steps--row .step + .step { border-left: 0; border-top: 1px solid var(--line-2); } }

/* ---------- Build additions (13 Oct 2026): rules the mockup artboards set in their own <style> blocks, and the
   states only the live site has (form errors, focus, the phone menu). Tokens only. ---------- */
.jj .nav a.btn--ink { color: #ffffff; }
.closing .small { margin-top: 28px; font-size: 14px; color: var(--muted); max-width: 520px; }
.art-hero .h1 { max-width: 920px; }
.art-hero .lede { max-width: 720px; }
.art-hero { padding-top: 40px; padding-bottom: 44px; }
.byline .mono { display: block; }
.hero-photo .frame img { aspect-ratio: 4 / 3.4; object-position: 50% 30%; }
.prose blockquote p { margin: 0; font-size: inherit; line-height: 1.6; }
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }
.prose h2, .prose h3 { scroll-margin-top: 24px; }

/* Examples and comparisons stay inside the reading column at narrow widths. */
.reading > *, .prose { min-width: 0; }
.article-table { overflow-x: auto; margin-top: 24px; max-width: 100%; }
.article-table:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.article-table table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
.article-table th, .article-table td { vertical-align: top; text-align: left; min-width: 130px; }
.article-table th { background: var(--paper); color: var(--ink); }
.prose .article-table p { margin: 0; font-size: inherit; line-height: inherit; }
.reading-guide { max-width: 860px; margin-bottom: 56px; }
.contents { position: sticky; top: 24px; }
.contents .toc { position: static; }
.contents__toggle { display: none; }
.as__list h3 { font-size: 21px; line-height: 1.3; margin: 0; }
.as__list .as__answer { font-size: 14px; color: var(--text); margin-block: 10px; }
.as__remaining { margin-top: 24px; }
.as__remaining summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .contents { position: static; }
  .contents__toggle { display: inline-flex; }
  .contents[data-expanded="false"] .toc { display: none; }
  .contents .toc { margin-top: 16px; }
  .contents .toc > .mono { display: none; }
  .art-hero { padding-top: 32px; padding-bottom: 36px; }
  .art-hero .h1 { font-size: clamp(34px, 7vw, 52px); }
}
.navbtn { color: var(--ink); background: var(--paper-2); }
.as__opt { width: 100%; }
.as__opt:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.as__resume { display: block; margin: 20px auto 0; border: 0; background: none; font: 500 15px 'Inter', sans-serif; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; cursor: pointer; }
.fpanel .sent { padding: 48px 8px; text-align: center; }
.fpanel .sent h2 { font-size: 30px; }
.fpanel .sent p { margin: 12px auto 0; max-width: 380px; }
.field select { width: 100%; }
.field--error input, .field--error textarea, .field--error select { border-color: #b42318; }
.form__fail { margin: 0; color: #b42318; font-size: 14px; }
.form__fail a { color: inherit; }
.nf .h1 { max-width: 760px; }

/* Feature panels (Studio .feature) are ink: accent marks inside use the on-ink accent, as on .s--ink. */
.feature .accent-mark { color: var(--accent-on-ink); }

/* About hero: the Speaking hero's card, holding the Reformat family logos only */
.hero-card--logos { width: min(232px, 46%); aspect-ratio: 1; display: grid; grid-template-rows: repeat(3, 1fr); padding: 10px 22px; }
.hero-card--logos span { display: grid; place-items: center; }
.hero-card--logos span + span { border-top: 1px solid var(--line-2); }
.hero-card--logos img { display: block; height: auto; max-width: 100%; }
@media (max-width: 640px) { .hero-card--logos { width: auto; aspect-ratio: auto; } .hero-card--logos span { padding-block: 16px; } }

/* Wordmark in the Reformat family format (Jay, 13 Oct 2026): first word bold and dark, second word
   regular weight in the Reformat grey, no dot. */
.logo { color: #0B0B0F; }
.logo .logo__light { font-weight: 400; color: #8A8A94; }

/* Articles mega menu (Jay, 13 Oct 2026: "not great on opening and closing"). Desktop only.
   - The panel's transparent top padding now reaches up past the bottom of the Articles link, so there is
     no dead strip between link and panel (there was 21px, which closed the menu on the way down).
   - It fades rather than snapping, and waits 150ms before closing so a slightly wandering pointer
     doesn't shut it. It opens at once.
   - Keyboard focus still opens it, but a mouse click no longer latches it open (:focus-visible). */
@media (min-width: 861px) {
  .nav__drop .mega { display: block; top: calc(100% - 34px); padding-top: 38px; visibility: hidden; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.31s; transition-delay: 0.15s, 0.15s, 0.31s; pointer-events: none; }
  .nav__drop:hover .mega, .nav__drop:has(:focus-visible) .mega { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; pointer-events: auto; }
  .nav__drop:focus-within:not(:has(:focus-visible)):not(:hover) .mega { visibility: hidden; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav__drop .mega { transition: none; transform: translate(-50%, 0); } }

/* No petrol (Jay, 13 Oct 2026: "remove all petrol green"). The jj accent becomes the site's own ink, so
   every accent job (label dots, link and hover underlines, numbers, rules, focus) is monochrome, and the
   coloured underline under selected tabs and filters is dropped. */
:root[data-brand='jj'] { --accent: var(--ink); --accent-on-ink: #ffffff; --accent-soft: var(--paper-2); }
.tabbar button[aria-selected='true'], .filter a.on { box-shadow: none; }

/* Phone: the topic filter and the speaking formats menu wrap, so like .tabbar they become separate pills
   with no pill container behind them (no pill on pill). */
@media (max-width: 760px) {
  .filter, .fmenu { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .filter a, .fmenu a { background: var(--white); border: 1px solid var(--line); }
  .filter a.on { background: var(--ink); border-color: var(--ink); }
}

/* Phone tap targets (mobile review 13 Oct 2026): footer links, article topic tags and the form's privacy
   link get at least a 40px-tall tap area. Padding and an equal negative margin, so nothing moves. */
@media (max-width: 760px) {
  .ftr a:not(.btn), .form__small { display: inline-block; padding-block: 8px; margin-block: -8px; }
  a.tag { position: relative; }
  a.tag::after { content: ''; position: absolute; inset: -6px 0; }
}

/* Wordmark contrast (Lighthouse, 13 Oct 2026): on light backgrounds the light word is a touch darker than
   the Reformat grey so it meets text contrast (4.6:1); the dark footer keeps #8A8A94. */
.hdr .logo .logo__light { color: #707079; }

/* Font swap shift: a metric-matched local fallback for Inter, so text keeps its size while the web font
   loads and the hero doesn't jump (values as next/font uses for Inter on Arial). */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }
body { font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif; }

/* Editorial workflow: meeting notes to a follow-up (one-pass illustration, final state by default). */
/* Meeting notes to follow-up: one-pass illustration. Final state is the default,
   so it reads correctly with no JavaScript, reduced motion or after the pass ends. */
.nfl { margin: 36px 0 8px; padding: 20px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper-2); color: var(--ink); position: relative; }
.nfl-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; }
.nfl-cap strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.nfl-cap span { font-size: 13px; color: var(--muted); }
.nfl-row { display: grid; grid-template-columns: 1fr 18px 1.25fr 18px 1.1fr; align-items: stretch; }
.nfl-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; min-width: 0; font-size: 14px; line-height: 1.45; }
.nfl-card header { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.nfl-card header b { font-weight: 600; font-size: 14px; }
.nfl-step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-2); flex: none; }
.nfl-who { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.nfl-you { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.nfl-ai { background: transparent; color: var(--ink); border: 1px dashed var(--ink-2); }
.nfl-notes { list-style: none; margin: 0; padding: 0; }
.nfl-notes li { margin: 0 0 6px; padding: 4px 6px; border-radius: 6px; color: var(--text); font-size: 13.5px; }
.nfl-decision { margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--text); }
.nfl-decision span, .nfl-mail span { display: inline-block; min-width: 58px; margin-right: 6px; font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nfl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nfl-table th { text-align: left; font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 6px 6px 0; border-bottom: 1px solid var(--line-2); }
.nfl-table td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink-2); }
.nfl-table td:nth-child(2), .nfl-table td:nth-child(3) { white-space: nowrap; }
.nfl-gap { display: inline-grid; }
.nfl-gap > span { grid-area: 1 / 1; }
.nfl-tbc { padding: 0 6px; border: 1px dashed var(--ink-2); border-radius: 6px; font-style: italic; color: var(--muted); visibility: hidden; }
.nfl-ok { font-weight: 600; color: var(--ink); }
.nfl-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); font-size: 13px !important; line-height: 1.45 !important; color: var(--ink-2); }
.nfl-confirm .nfl-who { margin-left: 0; order: 0; }
.nfl-mail p { margin: 0 0 6px !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--ink-2); }
.nfl-mail p:first-child { padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.nfl-send { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 !important; font-size: 13px !important; font-weight: 600; color: var(--ink); }
.nfl-send .nfl-who { margin-left: 0; }
.nfl-arrow { position: relative; align-self: center; height: 18px; }
.nfl-arrow::before { content: ''; position: absolute; top: 50%; left: 3px; right: 5px; border-top: 1px solid var(--faint); }
.nfl-arrow::after { content: ''; position: absolute; top: calc(50% - 3.5px); right: 3px; width: 7px; height: 7px; border-top: 1px solid var(--faint); border-right: 1px solid var(--faint); transform: rotate(45deg); }
.nfl-replay { position: absolute; right: 20px; bottom: -34px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nfl-replay:hover { color: var(--ink); }

/* Animation states, set by notes-flow.js only when motion is allowed. */
.nfl[data-state='ready'] .nfl-in { opacity: 0; }
.nfl[data-state='ready'] .nfl-tbc, .nfl[data-state='play'] .nfl-tbc { visibility: visible; }
.nfl[data-state='ready'] .nfl-ok, .nfl[data-state='play'] .nfl-ok { opacity: 0; }
.nfl[data-state='play'] .nfl-in { animation: nfl-in 0.45s ease-out both; }
/* Each note line lights up as its row lands in the action list. */
.nfl[data-state='play'] .nfl-n7 { animation: nfl-hl 1s ease 0.5s both; }
.nfl[data-state='play'] .nfl-r1 { animation-delay: 1s; }
.nfl[data-state='play'] .nfl-n5 { animation: nfl-hl 1s ease 1.2s both; }
.nfl[data-state='play'] .nfl-r2 { animation-delay: 1.7s; }
.nfl[data-state='play'] .nfl-n4 { animation: nfl-hl 1s ease 1.9s both; }
.nfl[data-state='play'] .nfl-r3 { animation-delay: 2.4s; }
.nfl[data-state='play'] .nfl-n3 { animation: nfl-hl 1s ease 2.6s both; }
.nfl[data-state='play'] .nfl-r4 { animation-delay: 3.1s; }
.nfl[data-state='play'] .nfl-n6 { animation: nfl-hl 1s ease 3.3s both; }
.nfl[data-state='play'] .nfl-r5 { animation-delay: 3.8s; }
.nfl[data-state='play'] .nfl-n1, .nfl[data-state='play'] .nfl-n2 { animation: nfl-hl 1s ease 4s both; }
.nfl[data-state='play'] .nfl-d { animation-delay: 4.5s; }
/* People confirm the two gaps, one after the other. */
.nfl[data-state='play'] .nfl-c { animation-delay: 5.3s; }
.nfl[data-state='play'] .nfl-g1 .nfl-tbc { animation: nfl-out 0.3s ease 6s both; }
.nfl[data-state='play'] .nfl-g1 .nfl-ok { animation: nfl-in 0.45s ease-out 6.1s both; }
.nfl[data-state='play'] .nfl-g2 .nfl-tbc { animation: nfl-out 0.3s ease 6.6s both; }
.nfl[data-state='play'] .nfl-g2 .nfl-ok { animation: nfl-in 0.45s ease-out 6.7s both; }
/* AI drafts the follow-up from the checked list. */
.nfl[data-state='play'] .nfl-m0 { animation-delay: 7.4s; }
.nfl[data-state='play'] .nfl-m1 { animation-delay: 7.8s; }
.nfl[data-state='play'] .nfl-m2 { animation-delay: 8.1s; }
.nfl[data-state='play'] .nfl-m3 { animation-delay: 8.4s; }
.nfl[data-state='play'] .nfl-m4 { animation-delay: 8.7s; }
.nfl[data-state='play'] .nfl-m5 { animation-delay: 9s; }
.nfl[data-state='play'] .nfl-m6 { animation-delay: 9.3s; }
.nfl[data-state='play'] .nfl-m7 { animation-delay: 10s; }
@keyframes nfl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes nfl-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nfl-hl { 0%, 100% { background: transparent; } 25%, 70% { background: var(--line-2); } }

@media (max-width: 760px) {
  .nfl { padding: 16px; }
  .nfl-row { grid-template-columns: 1fr; grid-template-rows: auto 22px auto 22px auto; }
  .nfl-arrow { justify-self: center; width: 18px; height: 22px; }
  .nfl-arrow::before { top: 3px; bottom: 5px; left: 50%; right: auto; border-top: 0; border-left: 1px solid var(--faint); }
  .nfl-arrow::after { top: auto; bottom: 3px; right: auto; left: calc(50% - 3px); transform: rotate(135deg); }
  .nfl-replay { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nfl * { animation: none !important; }
}

/* Beat the article's .prose list, paragraph and table sizes inside the figure. */
.prose .nfl ul.nfl-notes { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.45; }
.prose .nfl .nfl-notes li + li { margin-top: 0; }
.prose .nfl .nfl-notes li { margin: 0 0 6px; padding: 4px 6px; font-size: 13.5px; line-height: 1.45; list-style: none; }
.prose .nfl .nfl-notes li::before, .prose .nfl .nfl-notes li::marker { content: none; }
.prose .nfl table.nfl-table { margin: 0; font-size: 13px; line-height: 1.4; }
.prose .nfl .nfl-table th, .prose .nfl .nfl-table td { font-size: 13px; line-height: 1.4; border-left: 0; border-right: 0; border-top: 0; background: none; }
.prose .nfl .nfl-table th { font-size: 10.5px; }
.prose .nfl .nfl-mail span { min-width: 0; margin-right: 10px; }
.nfl-confirm-lines { display: grid; gap: 2px; }
.nfl-who-gap .nfl-tbc { font-size: 12px; }

/* Five-row meeting: give the action list more room and let the figure sit wider than the text column on desktop. */
.nfl-row { grid-template-columns: 0.9fr 18px 1.45fr 18px 1fr; }
.prose .nfl .nfl-notes li { margin: 0 0 2px; padding: 3px 6px; font-size: 13px; line-height: 1.4; }
.prose .nfl .nfl-table td { padding: 6px 8px 6px 0; }
.prose .nfl .nfl-table td:first-child { width: 100%; }
.nfl-tbc { font-size: 11px; padding: 0 4px; }
.prose .nfl .nfl-mail p { margin-bottom: 4px !important; font-size: 13px !important; }
.nfl-confirm-lines { display: block; }
.nfl-confirm-lines span { display: block; }
/* The article page has a contents column on the left, so the figure only extends right, into the free gutter. */
@media (min-width: 1280px) { .prose .nfl { margin-right: -160px; } }
/* Tablet and small laptop: notes and action list side by side, follow-up full width underneath. */
@media (min-width: 761px) and (max-width: 1279px) {
  .nfl-row { grid-template-columns: 0.9fr 18px 1.45fr; row-gap: 14px; }
  .nfl-row > span.nfl-arrow:nth-of-type(2) { display: none; }
  .nfl-row > section:last-of-type { grid-column: 1 / -1; }
  .nfl-row > section:last-of-type .nfl-mail { column-count: 2; column-gap: 24px; }
  .nfl-row > section:last-of-type .nfl-mail p { break-inside: avoid; }
}
@media (max-width: 760px) { .nfl-row { grid-template-columns: 1fr; } }
@media print {
  .nfl * { animation: none !important; }
  .nfl { break-inside: avoid; }
  .nfl-replay { display: none; }
}