/* Roughwork marketing site — shared stylesheet.
   Source: design/handoff/website.md (PR #58, design/website). Values copied from
   design/handoff/website/source/*.html. No framework, no build step — this file is served as-is. */

:root {
  /* Colour tokens — rule 1. These are the only colours on the site. */
  --navy: #0B1B2B;
  --on-navy: #F2F2F3;
  --on-navy-2: #A9B8C8;
  --underline: #4A90E2;
  --paper: #FFFFFF;
  --canvas: #F5F5F5;
  --ink: #1A1A1A;
  --muted: #484848;
  --faint: #6B6B6B;
  --rule: #DEDEDE;
  --field-border: #C4C7CC;
  --blue: #2A63AC;
  --blue-soft: #E8EFF8;
  --blue-soft-ink: #1E3A5F;
  --hand: #1E2B3A;
  --grid-line: rgba(255, 255, 255, .035);
  /* Matches the app's Theme.Mastery.mastered (ios/Sources/Theme.swift) — the
     green the app reserves for a correct mark drawn as pen ink on the page,
     never used for the verdict-band tick (that one stays ink). */
  --pen-check: #2E7D55;

  --font-head: Outfit, -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-text: -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-read: "New York", ui-serif, "Source Serif 4", Georgia, serif;
  --font-hand: Caveat, "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: #2A63AC; }
a:hover { color: #0B1B2B; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }

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

/* Skip link — not in the handoff, required for accessibility rule 36. */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 8px;
  font: 600 14px var(--font-text); transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Focus ring — rule 36. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--underline);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Navy grid background — rule 2. */
.navy-grid {
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Container — rule 6. */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Sections — rule 7. */
.section { padding: 110px 0; }
.section--paper { background: var(--paper); }
.section--canvas { background: var(--canvas); }
.section--navy { background: var(--navy); }
.section--tight { padding: 72px 0; }

/* Grids — rule 8. */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }

/* Two-column hero / feature row — rule 9. */
.row-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}
.row-2--wide { gap: 64px; }
.row-2 .visual { display: flex; justify-content: center; }
@media (max-width: 760px) {
  .row-2.row-2--reverse-stack > :first-child { order: 2; }
  .row-2.row-2--reverse-stack > :last-child { order: 1; }
}

/* Type scale — rule 5 and rule 18. */
.eyebrow {
  font: 600 12px/16px var(--font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.on-navy .eyebrow, .eyebrow--on-navy { color: var(--on-navy-2); }

h1.h1-home { font: 600 68px/1.05 var(--font-head); letter-spacing: -0.02em; margin: 10px 0 0; color: var(--on-navy); }
h1.h1-page { font: 600 56px/1.05 var(--font-head); letter-spacing: -0.02em; margin: 10px 0 0; }
h1.h1-page.on-light { color: var(--ink); }
h1.h1-page.on-navy { color: var(--on-navy); }
h1.h1-article { font: 600 48px/1.12 var(--font-head); letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 0; }

h2.h2-section { font: 600 44px/1.1 var(--font-head); letter-spacing: -0.015em; color: var(--ink); }
h2.h2-section.on-navy { color: var(--on-navy); }
h2.h2-small { font: 600 32px/1.1 var(--font-head); color: var(--ink); }
h2.h2-article { font: 600 30px/1.2 var(--font-head); color: var(--ink); margin-top: 48px; }
h3.h3-article { font: 600 21px/1.3 var(--font-head); color: var(--ink); margin: 32px 0 4px; }

.lead { font: 400 20px/30px var(--font-text); color: var(--muted); max-width: 640px; }
.on-navy .lead, .lead--on-navy { color: var(--on-navy-2); }

.card-title { font: 600 22px/1.25 var(--font-head); color: var(--ink); }
.card-text { font: 400 16px/24px var(--font-text); color: var(--muted); }

.meta { font: 400 14px/20px var(--font-text); color: var(--faint); }

.article-body, .article-body p, .article-body li {
  font: 400 19px/31px var(--font-read);
  color: var(--ink);
}

/* Header — rule 10. */
.site-header {
  position: relative;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 22px; padding-bottom: 22px;
}
.site-header.on-light { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .brand { display: block; line-height: 0; }
.site-header .brand img { height: 30px; width: auto; display: block; }
.site-header nav.main-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-header nav.main-nav a {
  text-decoration: none;
  font: 500 15px/20px var(--font-text);
  padding: 8px 2px;
  opacity: .86;
  border-bottom: 2px solid transparent;
}
.site-header.on-navy nav.main-nav a { color: var(--on-navy); }
.site-header.on-light nav.main-nav a { color: var(--ink); }
.site-header nav.main-nav a[aria-current="page"] {
  opacity: 1;
}
.site-header.on-navy nav.main-nav a[aria-current="page"] { border-bottom-color: var(--underline); }
.site-header.on-light nav.main-nav a[aria-current="page"] { border-bottom-color: var(--blue); }
.site-header .header-actions { display: flex; align-items: center; gap: 14px; }

.menu-btn {
  display: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.site-header.on-light .menu-btn { border-color: var(--field-border); }
.menu-btn svg { width: 18px; height: 14px; }
.menu-btn svg line { stroke: var(--on-navy); stroke-width: 2; stroke-linecap: round; }
.site-header.on-light .menu-btn svg line { stroke: var(--ink); }

.mobile-panel {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  padding: 8px 20px 24px;
}
.mobile-panel.navy { background: var(--navy); }
.mobile-panel.light { background: var(--paper); border-bottom: 1px solid var(--rule); }
.mobile-panel[hidden] { display: none; }
.mobile-panel.is-open { display: block; }
.mobile-panel nav { display: flex; flex-direction: column; }
.mobile-panel nav a {
  display: flex; align-items: center;
  height: 52px;
  font: 500 20px var(--font-text);
  text-decoration: none;
  color: var(--on-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mobile-panel.light nav a { color: var(--ink); border-bottom-color: var(--rule); }
.mobile-panel .btn { margin-top: 20px; width: 100%; justify-content: center; }

/* Buttons — rules 11-12. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  height: 50px;
  padding: 0 24px;
  font: 600 16px var(--font-text);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, filter .15s ease;
}
.btn-primary-navy { background: var(--underline); color: var(--navy); }
.btn-primary-navy:hover { filter: brightness(0.92); }
.btn-primary-light { background: var(--navy); color: var(--on-navy); }
.btn-primary-light:hover { filter: brightness(1.2); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--field-border);
  color: var(--ink);
}
.on-navy .btn-secondary, .btn-secondary--on-navy {
  border-color: rgba(255, 255, 255, .3);
  color: var(--on-navy);
}
.btn:disabled { opacity: .6; cursor: default; }

/* Email signup — rule 13. */
.signup-form {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.signup-form .field-wrap { flex: 1 1 260px; min-width: 0; }
.signup-input {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  padding: 0 20px;
  font: 400 17px var(--font-text);
  border: 1px solid var(--field-border);
  background: var(--paper);
  color: var(--ink);
}
.on-navy .signup-input, .signup-input--on-navy {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .22);
  color: var(--on-navy);
}
.signup-input::placeholder { color: var(--faint); opacity: .8; }
.on-navy .signup-input::placeholder, .signup-input--on-navy::placeholder { color: var(--on-navy-2); }
.signup-input.is-invalid { border-color: var(--underline); }
.signup-note {
  margin-top: 14px;
  font: 400 14px/20px var(--font-text);
  color: var(--faint);
  min-height: 20px;
}
.on-navy .signup-note, .signup-note--on-navy { color: var(--on-navy-2); }
.signup-note.is-error { color: var(--ink); }
.on-navy .signup-note.is-error { color: var(--on-navy); }
@media (max-width: 520px) {
  .signup-form { flex-direction: column; }
  /* The flex-basis above (260px) is a WIDTH, meant for a row. In a column
     layout flex-basis becomes a HEIGHT, stretching the field wrapper to
     260px tall around a 52px input. Reset the basis so it sizes to content. */
  .signup-form .field-wrap { flex: 1 1 auto; }
}

/* Card — rule 14. */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 28px;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Pathway icon badge — mirrors the app's PathwayGrid tile: a 40px soft-blue
   circle holding the same glyph the app uses for that pathway (David
   2026-10-16, "Create unique icons for each pathway"). */
.pathway-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pathway-icon svg { width: 20px; height: 20px; color: var(--blue); }

/* Pen-mark checkmark — the hand-drawn correction tick, not the verdict-band
   one (see --pen-check above). Sized to sit on a Caveat baseline. */
.pen-check { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-left: 4px; }
a.card { transition: border-color .15s ease; }
a.card:hover { border-color: var(--field-border); }

/* Numbered step card (how it works / pathway cards). */
.step-num {
  font: 600 14px var(--font-head);
  color: var(--blue);
  margin-bottom: 10px;
}

/* Work illustration — rule 15. */
.work-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
  max-width: 360px;
  width: 100%;
}
.work-card .eyebrow { margin-bottom: 14px; }
.work-card .problem {
  font: 400 17px/1.5 var(--font-read);
  color: var(--ink);
  margin-bottom: 6px;
}
.work-line {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #E6EAF0;
  font-family: var(--font-hand);
  font-size: 30px;
  color: var(--hand);
}
.work-line:last-of-type { border-bottom: none; }
.work-line .line-no {
  font: 400 13px var(--font-text);
  color: var(--faint);
  width: 16px;
  flex-shrink: 0;
}
.work-line.is-marked .line-content {
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.hint-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--blue-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  font: 400 15px/1.45 var(--font-text);
  color: var(--blue-soft-ink);
}
.hint-box svg { flex-shrink: 0; margin-top: 2px; }
.work-caption {
  font: 400 13px/1.5 var(--font-text);
  color: var(--faint);
  margin-top: 14px;
}

/* Device frames — rule 16. */
.device-frame {
  background: #111;
  padding: 8px;
  box-shadow: 0 24px 50px rgba(11, 27, 43, .22);
}
/* David 2026-10-24: "The rounded corners on all iphone mock images need to
   go." No radius anywhere on the phone frame or the image it holds —
   a percentage radius on a non-square box drew an ellipse, which is what
   was cutting into the image's own corners. */
.device-frame.phone { border-radius: 0; width: 300px; }
.device-frame.ipad { border-radius: 28px; padding: 12px; width: min(620px, 100%); }
.device-frame img { border-radius: inherit; width: 100%; height: auto; display: block; }
.device-frame.phone img { border-radius: 0; }

/* Progress words — rule 17. */
.progress-rows { display: flex; flex-direction: column; gap: 18px; }
.progress-row { display: flex; align-items: flex-start; gap: 16px; }
.progress-bar {
  width: 96px; height: 6px; flex-shrink: 0; margin-top: 8px;
  display: flex; gap: 2px;
}
.progress-bar span { flex: 1; background: var(--rule); border-radius: 0; }
.progress-bar span:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.progress-bar span:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.progress-bar span.filled { background: var(--ink); }
.progress-word { font: 600 17px var(--font-text); color: var(--ink); margin-bottom: 2px; }
.progress-line { font: 400 15px/1.4 var(--font-text); color: var(--muted); }

/* FAQ — rule 19. */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font: 600 19px var(--font-head);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font: 400 24px var(--font-text);
  color: var(--faint);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--blue); }
.faq-item .faq-answer {
  padding: 0 0 20px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--muted);
  max-width: 680px;
}

/* Footer — rule 20. */
.site-footer { color: var(--on-navy); }
.site-footer .container {
  padding-top: 72px; padding-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px;
}
.site-footer .brand-col .wordmark { height: 24px; margin-bottom: 14px; }
.site-footer .brand-col p { color: var(--on-navy-2); font-size: 15px; }
.site-footer .col-title {
  font: 600 12px var(--font-text);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-2);
  margin-bottom: 14px;
}
.site-footer .col a {
  display: block;
  color: var(--on-navy);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 0;
  opacity: .9;
}
.site-footer .col a:hover { text-decoration: underline; }
.site-footer .bottom-row {
  max-width: 1160px; margin: 0 auto; padding: 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 14px; color: var(--on-navy-2);
}
.site-footer .bottom-row a { color: var(--on-navy-2); text-decoration: none; }
.site-footer .bottom-row a:hover { text-decoration: underline; }

/* Closing band. */
.closing-band { text-align: center; }
.closing-band h2 { color: var(--on-navy); margin-bottom: 16px; }
.closing-band .lead { margin: 0 auto 32px; }
.closing-band .signup-form, .closing-band .signup-note { max-width: 460px; margin: 0 auto; }

/* Blog / article pieces. */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center;
  height: 40px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  font: 500 15px var(--font-text);
  text-decoration: none;
  color: var(--ink);
}
.chip[aria-current="page"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

.category-label {
  font: 600 12px var(--font-text);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--blue);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 240px;
  align-items: start;
  gap: 64px;
}
@media (max-width: 980px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

.article-aside {
  font-size: 14px;
}
.article-aside .eyebrow { margin-bottom: 14px; }
.article-aside a {
  display: block; padding: 7px 0;
  color: var(--muted); text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
}
.article-aside a:hover { color: var(--blue); border-left-color: var(--blue); }

.answer-box {
  background: var(--blue-soft);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 32px 0;
}
.answer-box .eyebrow { color: var(--blue); margin-bottom: 8px; }
.answer-box p { font: 400 17px/1.55 var(--font-text); color: var(--blue-soft-ink); margin: 0; }

.article-body blockquote {
  border-left: 3px solid var(--underline);
  padding-left: 20px;
  margin: 32px 0;
  font: italic 400 24px/1.4 var(--font-read);
  color: var(--ink);
}
.article-body blockquote cite, .article-body .cite-caption {
  display: block;
  font: normal 15px var(--font-text);
  color: var(--faint);
  font-style: normal;
  margin-top: 10px;
}
.article-body figure {
  background: var(--canvas);
  border-radius: 14px;
  padding: 24px;
  margin: 32px 0;
}
.article-body figcaption {
  font: 400 14px/1.5 var(--font-text);
  color: var(--faint);
  margin-top: 10px;
}
.article-body ol { margin: 0 0 20px 22px; }
.article-body ol li { margin-bottom: 12px; }
.article-body ul { margin: 0 0 20px 22px; }

.byline-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 32px; }
.byline-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: var(--on-navy);
  display: flex; align-items: center; justify-content: center;
  font: 600 13px var(--font-head);
  flex-shrink: 0;
}
.byline-text { font: 400 15px var(--font-text); color: var(--faint); }
.byline-text strong { color: var(--ink); font-weight: 600; }

.back-link {
  display: inline-block;
  font: 500 15px var(--font-text);
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { text-decoration: underline; }

.refs-list { font: 400 15px/1.7 var(--font-text); color: var(--muted); margin: 0 0 20px 20px; }
.refs-list li { margin-bottom: 8px; }

/* Search field (Help page). */
.search-field {
  display: flex; align-items: center; gap: 10px;
  height: 52px; border-radius: 999px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  max-width: 480px;
}
.search-field input {
  flex: 1; background: transparent; border: none; outline: none;
  font: 400 17px var(--font-text); color: var(--on-navy);
}
.search-field input::placeholder { color: var(--on-navy-2); }
.search-field svg { flex-shrink: 0; }

/* Pathway/ladder number badges (courses page). */
.ladder-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.ladder-row:last-child { border-bottom: none; }
.ladder-index { font: 600 14px var(--font-text); color: var(--faint); width: 20px; flex-shrink: 0; }
.ladder-glyph {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  font: 400 18px var(--font-read);
  color: var(--ink);
  flex-shrink: 0;
}
.ladder-title { font: 600 17px var(--font-head); color: var(--ink); }
.ladder-meta { font: 400 14px var(--font-text); color: var(--faint); margin-top: 2px; }

/* Price card (GRE/Learning). */
.price-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 32px;
}
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price { font: 600 44px var(--font-head); color: var(--ink); }
.price-unit { font: 400 16px var(--font-text); color: var(--faint); }
.price-check-list { margin: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.price-check-list li { display: flex; gap: 10px; font: 400 16px/1.4 var(--font-text); color: var(--ink); list-style: none; }
.price-check-list .check { color: var(--blue); flex-shrink: 0; }

.feature-link-row {
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.feature-link-row li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font: 400 16px/1.5 var(--font-text); color: var(--ink); }
.feature-link-row .arrow { color: var(--blue); flex-shrink: 0; }

.ol-steps { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ol-steps li { list-style: none; counter-increment: step; display: flex; gap: 14px; font: 400 17px/1.5 var(--font-text); color: var(--ink); }
.ol-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  font: 600 13px var(--font-text);
  display: flex; align-items: center; justify-content: center;
}
.ol-steps { counter-reset: step; }

/* Door panels (home GRE/Learning). */
.doors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.door-panel { border-radius: 20px; padding: 36px; }
.door-panel.navy { background: var(--navy); }
.door-panel.canvas { background: var(--canvas); }
.door-panel h3 { font: 600 28px/1.15 var(--font-head); margin: 10px 0 12px; }
.door-panel.navy h3 { color: var(--on-navy); }
.door-panel.canvas h3 { color: var(--ink); }
.door-panel p.lead { font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
.door-panel a.text-link { font: 600 15px var(--font-text); text-decoration: none; }
.door-panel.navy a.text-link { color: var(--underline); }
.door-panel.canvas a.text-link { color: var(--blue); }

/* Featured blog panel. */
.blog-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.blog-featured .visual-panel {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
  padding: 40px;
}
.blog-featured .text-panel { background: var(--paper); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.blog-hand-eq {
  font-family: var(--font-hand);
  color: var(--on-navy);
  font-size: 48px;
}
.blog-hand-eq .answer { text-decoration: underline; text-decoration-color: var(--underline); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Newsletter / email box at bottom of blog. */
.newsletter-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: center;
}

/* No sideways scroll, ever. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Phone width — rule 18. */
@media (max-width: 760px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }

  h1.h1-home { font: 600 42px/1.08 var(--font-head); }
  h1.h1-page { font: 600 42px/1.08 var(--font-head); }
  h1.h1-article { font: 600 32px/1.15 var(--font-head); }
  h2.h2-section { font: 600 30px/1.15 var(--font-head); }
  h2.h2-small { font: 600 26px/1.15 var(--font-head); }
  .lead { font: 400 18px/27px var(--font-text); }
  .article-body, .article-body p, .article-body li { font: 400 18px/29px var(--font-read); }

  .site-header nav.main-nav { display: none; }
  .site-header .header-actions .btn-primary-navy,
  .site-header .header-actions .btn-primary-light { display: none; }
  .site-header .brand img { height: 24px; }
  .menu-btn { display: flex; }

  .article-aside { display: none; }

  .row-2 { gap: 32px; }
}