/* NaviaCAIR — long-form article layout ("paper insert")
*
* Requires tokens.css to be loaded first.
*
* Structure: a navy hero band, a cream reading surface, then a navy outro.
* Same inversion the privacy policy uses — long documents are read on paper,
* not on the marketing navy. The hero and the paper share one 780px column so
* the headline sits directly above the first line of body text.
*
*
* breadcrumb, tag, h1, subtitle, byline
*
*
*
*
*
* cta-block, series-next
*
*/
:root {
/* Reading surface */
--paper: var(--cream); /* #F1E9D7 */
--paper-raised: #FBF5E3; /* cards and figures sitting on the paper */
--paper-sunken: rgba(26, 22, 16, 0.045);
/* Amber that clears AA as body-text-sized ink on cream (5.1:1).
--amber itself is only 2.9:1 on paper — fine for rules and fills,
not for anything a reader has to actually read. */
--amber-ink: var(--amber-deep); /* #8E5310 */
--amber-wash: rgba(197, 117, 24, 0.09);
--amber-edge: rgba(197, 117, 24, 0.28);
--art-col: 780px; /* hero + paper column, incl. 40px gutters */
--art-gutter: 40px;
}
/* ── Shared column ───────────────────────────────────────────── */
.art-col {
max-width: var(--art-col);
margin: 0 auto;
padding: 0 var(--art-gutter);
}
@media (max-width: 640px) {
:root { --art-gutter: 22px; }
}
/* ── Navy hero ───────────────────────────────────────────────── */
.art-hero {
background: var(--navy);
padding: 34px 0 62px;
}
@media (max-width: 640px) { .art-hero { padding: 22px 0 44px; } }
.breadcrumb { margin: 0 0 34px; font-size: 14px; font-weight: 600; }
.breadcrumb a {
color: var(--navy-fg-soft);
display: inline-flex; align-items: center; gap: 6px;
transition: color .2s;
}
.breadcrumb a:hover { color: var(--navy-fg); }
.article-meta {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px; flex-wrap: wrap;
}
.news-tag {
background: rgba(197, 117, 24, .14); color: var(--amber-bright);
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; padding: 5px 11px;
border-radius: 999px; border: 1px solid rgba(197, 117, 24, .3);
}
.article-date { color: var(--navy-fg-soft); font-size: 14px; }
.art-hero h1 {
font-family: var(--display); font-weight: 400;
font-size: clamp(32px, 5vw, 54px); line-height: 1.05;
margin: 0 0 16px; letter-spacing: -0.02em;
color: var(--navy-fg); text-wrap: balance;
}
.article-subtitle {
font-family: var(--display); font-style: italic;
font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45;
color: var(--navy-fg-soft); font-weight: 400;
margin: 0 0 24px; max-width: 34em;
}
.article-byline {
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
color: var(--navy-fg-mute); margin: 0; line-height: 1.7;
}
.article-byline a {
color: var(--amber-bright); text-decoration: underline;
text-decoration-color: rgba(224, 142, 42, .35); text-underline-offset: 2px;
}
.article-byline a:hover { text-decoration-color: var(--amber-bright); }
/* ── Cream reading surface ───────────────────────────────────── */
.art-paper {
background: var(--paper);
color: var(--ink);
padding: 62px 0 78px;
}
@media (max-width: 640px) { .art-paper { padding: 40px 0 56px; } }
/* Body copy: serif at 18px on a ~72ch measure. */
.article-body p {
font-family: var(--display); font-size: 18px; line-height: 1.75;
color: var(--ink-soft); margin: 0 0 18px;
}
.article-body p em { color: var(--ink); font-style: italic; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15;
color: var(--ink); letter-spacing: -0.015em;
margin: 52px 0 16px; text-wrap: balance; scroll-margin-top: 90px;
}
.article-body h2::after {
content: ""; display: block; width: 44px; height: 2px;
background: var(--amber); border-radius: 2px; margin-top: 14px;
}
.article-body ul {
margin: 0 0 20px; padding-left: 24px;
font-family: var(--display); color: var(--ink-soft);
line-height: 1.7; font-size: 18px;
}
.article-body ul li { margin-bottom: 12px; }
.article-body ul li::marker { color: var(--amber); }
/* Footnote references. No underline at rest — a dotted rule under a 10px
digit reads as a stray period, especially after a full stop. */
.article-body sup a {
font-family: var(--mono); font-size: 10px; font-weight: 500;
color: var(--amber-ink); text-decoration: none; padding: 0 1px;
}
.article-body sup a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Inline links in prose */
.article-body p > a:not(.btn-primary):not(.btn-secondary),
.article-body li > a {
color: var(--amber-ink); text-decoration: underline;
text-decoration-color: rgba(142, 83, 16, .4); text-underline-offset: 2px;
}
.article-body p > a:hover, .article-body li > a:hover {
text-decoration-color: var(--amber-ink);
}
/* ── Key takeaways ───────────────────────────────────────────── */
.summary-box {
background: var(--amber-wash); border: 1px solid var(--amber-edge);
border-radius: 14px; padding: 26px 30px; margin: 0 0 36px;
}
@media (max-width: 600px) { .summary-box { padding: 20px 18px; } }
.summary-label {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber-ink);
font-weight: 500; margin: 0 0 16px;
}
.summary-list { display: flex; flex-direction: column; gap: 15px; }
.summary-item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.summary-item svg { margin-top: 4px; }
.summary-item span {
font-family: var(--display); font-size: 16.5px;
line-height: 1.6; color: var(--ink-soft);
}
/* ── Figures ─────────────────────────────────────────────────── */
figure { margin: 0 0 30px; }
.diagram {
background: var(--paper-raised); border: 1px solid var(--rule);
border-radius: 16px; padding: 26px 24px 20px;
}
@media (max-width: 600px) { .diagram { padding: 18px 14px 14px; } }
figcaption {
font-family: var(--body); font-size: 13.5px; color: var(--ink-mute);
line-height: 1.6; margin-top: 14px;
}
figcaption strong { color: var(--ink-soft); }
/* Flow diagram */
.flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.15fr 24px 1fr; align-items: center; }
@media (max-width: 820px) {
.flow { grid-template-columns: 1fr; gap: 8px; }
.flow__arrow { transform: rotate(90deg); }
}
.flow__node {
border-radius: 8px; padding: 12px 9px; text-align: center;
font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.flow__node svg { display: block; margin: 0 auto 6px; }
/* The origin node stays navy: it is the one copy still inside the clinic. */
.flow__node--origin { background: var(--navy); border: 1px solid var(--navy); color: var(--navy-fg); }
.flow__node--portal { background: rgba(197, 117, 24, .16); border: 1px solid rgba(197, 117, 24, .5); color: var(--amber-ink); }
.flow__node--people { background: transparent; border: 2px dashed rgba(197, 117, 24, .55); color: var(--ink); }
.flow__arrow { text-align: center; color: var(--ink-faint); font-size: 15px; }
.flow__copies { display: flex; flex-direction: column; gap: 6px; }
.flow__copy {
background: var(--cream-soft); border: 1px solid var(--rule);
border-radius: 7px; padding: 8px 10px;
display: flex; align-items: center; gap: 9px;
font-size: 12px; color: var(--ink-soft);
}
.flow__copy svg { flex: none; }
.flow__legend {
display: flex; gap: 18px; margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--rule);
font-size: 11.5px; color: var(--ink-mute); flex-wrap: wrap;
}
.flow__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
/* ── Comparison table ────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin: 0 0 10px; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; min-width: 640px; }
.cmp th {
text-align: left; border-bottom: 2px solid rgba(26, 22, 16, .3);
padding: 0 14px 10px 0; font-family: var(--mono);
font-size: 10px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--amber-ink); white-space: nowrap;
}
.cmp th:last-child, .cmp td:last-child { padding-right: 0; }
.cmp td { border-bottom: 1px solid var(--rule); padding: 16px 14px 16px 0; vertical-align: top; color: var(--ink-soft); }
.cmp tr:last-child td { border-bottom: none; }
.cmp .cmp__tool { color: var(--ink); font-weight: 600; display: block; margin-bottom: 3px; }
.cmp .cmp__ex { color: var(--ink-faint); font-size: 11.5px; display: block; }
.table-hint {
font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-faint); margin: 0 0 30px;
}
@media (min-width: 821px) { .table-hint { display: none; } }
/* ── Callout / note ──────────────────────────────────────────── */
.note {
background: var(--paper-raised); border: 1px solid var(--rule);
border-left: 3px solid var(--amber);
border-radius: 10px; padding: 22px 24px; margin: 0 0 30px;
display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
}
@media (max-width: 600px) { .note { grid-template-columns: 1fr; gap: 12px; padding: 18px; } }
.note__icon {
width: 38px; height: 38px; border-radius: 50%; background: rgba(197, 117, 24, .18);
display: flex; align-items: center; justify-content: center;
}
.article-body .note p { margin: 0; font-size: 16.5px; }
.article-body .note p + p { margin-top: 10px; }
/* ── Pull quote ──────────────────────────────────────────────── */
.pull {
font-family: var(--display); font-style: italic;
font-size: clamp(19px, 2.5vw, 25px); line-height: 1.45;
color: var(--ink); text-align: center;
margin: 34px 0; padding: 0 8px;
}
.pull--rule { border-left: 3px solid var(--amber); text-align: left; padding-left: 20px; }
.article-body .quotes {
font-family: var(--display); font-style: italic; text-align: center;
font-size: 17px; color: var(--ink-mute); margin: 22px 0 26px; line-height: 1.6;
}
.quotes .sep { color: var(--amber); margin: 0 8px; }
/* ── Step strip ──────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 11px; padding: 15px 13px; }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.step__n { font-family: var(--display); font-size: 24px; color: var(--amber-ink); line-height: 1; }
.step__title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 5px; }
.step__sub { font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }
/* ── Tips ────────────────────────────────────────────────────── */
.tips { display: flex; flex-direction: column; gap: 24px; margin: 0 0 34px; }
.tip { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.tip__badge {
position: relative; width: 40px; height: 40px; border-radius: 10px;
background: var(--paper-raised); border: 1px solid var(--rule);
display: flex; align-items: center; justify-content: center;
}
.tip__n {
position: absolute; top: -7px; left: -7px; width: 18px; height: 18px;
border-radius: 50%; background: var(--amber); color: #FFF8EC;
font-family: var(--mono); font-size: 10px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
}
.tip__body { font-family: var(--display); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.tip__body strong { color: var(--ink); }
.tip__shot {
display: block; width: min(340px, 100%); margin-top: 12px;
border-radius: 8px; border: 1px solid var(--rule);
}
/* ── Going further ───────────────────────────────────────────── */
.further {
background: var(--paper-raised); border: 1px solid var(--rule);
border-radius: 14px; padding: 26px 28px; margin: 0 0 34px;
}
@media (max-width: 600px) { .further { padding: 20px 18px; } }
.further__label {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber-ink);
font-weight: 500; margin: 0 0 14px;
}
.further__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
@media (max-width: 620px) { .further__shots { grid-template-columns: 1fr; } }
.further__shots img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--rule); }
.article-body .further__note { font-family: var(--body); font-size: 12.5px; line-height: 1.6; color: var(--ink-mute); margin: 14px 0 0; }
/* ── Rule-of-thumb band ──────────────────────────────────────── */
.band {
text-align: center; border-top: 2px solid rgba(26, 22, 16, .28);
border-bottom: 2px solid rgba(26, 22, 16, .28);
padding: 24px 12px; margin: 10px 0 46px;
font-family: var(--display); font-size: 17px; font-weight: 600;
line-height: 1.9; color: var(--ink);
}
.band .sep { color: var(--amber); margin: 0 10px; }
/* ── Sources ─────────────────────────────────────────────────── */
.sources { counter-reset: src; list-style: none; padding: 0; margin: 0; }
.sources li {
counter-increment: src; position: relative;
padding: 0 0 14px 34px; margin-bottom: 14px;
border-bottom: 1px solid var(--rule);
font-size: 13.5px; line-height: 1.6; color: var(--ink-mute);
}
.sources li:last-child { border-bottom: none; }
.sources li::before {
content: counter(src); position: absolute; left: 0; top: 1px;
font-family: var(--mono); font-size: 10px; color: var(--amber-ink);
background: var(--amber-wash); border: 1px solid var(--amber-edge);
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.sources li:target { background: var(--amber-wash); border-radius: 8px; }
.sources a {
color: var(--ink-soft); text-decoration: underline;
text-decoration-color: rgba(26, 22, 16, .3); text-underline-offset: 2px;
}
.sources a:hover { color: var(--amber-ink); text-decoration-color: var(--amber-ink); }
/* ── Disclaimer ──────────────────────────────────────────────── */
.disclaimer {
background: var(--paper-sunken); border: 1px solid var(--rule);
border-radius: 12px; padding: 20px 24px; margin: 34px 0 0;
}
.article-body .disclaimer p {
font-family: var(--body); font-size: 13px; margin: 0;
color: var(--ink-mute); line-height: 1.65;
}
/* ── Navy outro (CTA + next in series) ───────────────────────── */
.art-outro { background: var(--navy); padding: 56px 0 10px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) { .btn-row { flex-direction: column; } .btn-row > * { width: 100%; justify-content: center; } }
.btn-primary {
background: var(--amber); color: #FFF8EC; font-weight: 700;
padding: 13px 26px; border-radius: 999px; font-size: 15px;
transition: transform .2s, background .2s;
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap; border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--amber-bright); transform: translateY(-2px); }
.btn-secondary {
background: transparent; color: var(--navy-fg); font-weight: 700;
padding: 13px 26px; border-radius: 999px; font-size: 15px;
border: 1.5px solid var(--rule-navy);
transition: background .2s, transform .2s;
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap; cursor: pointer;
}
.btn-secondary:hover { background: rgba(197, 117, 24, .18); transform: translateY(-2px); }
.cta-block {
background: rgba(197, 117, 24, .1); border: 1px solid rgba(197, 117, 24, .28);
border-radius: 14px; padding: 30px 32px; text-align: center;
}
.cta-block .btn-row { justify-content: center; }
.cta-block-title { font-size: 18px; font-weight: 700; color: var(--navy-fg); margin: 0 0 6px; }
.cta-block-sub { color: var(--navy-fg-soft); font-size: 14.5px; margin: 0 0 20px; line-height: 1.6; }
@media (max-width: 600px) { .cta-block { padding: 24px 20px; } }
.series-next {
border-top: 1px solid var(--rule-navy); margin-top: 40px; padding-top: 28px;
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.series-next__label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-fg-mute); margin: 0 0 6px; }
.series-next__title { font-family: var(--display); font-size: 20px; color: var(--navy-fg); margin: 0; }
.series-next__sub { font-size: 13.5px; color: var(--navy-fg-soft); margin: 5px 0 0; }
/* ── Footer ──────────────────────────────────────────────────── */
.art-foot { background: var(--navy); padding: 0 0 40px; }
.art-foot footer {
margin-top: 44px; text-align: center; color: var(--navy-fg-mute);
font-size: 13px; padding-top: 26px; border-top: 1px solid var(--rule-navy);
}
.art-foot footer p { margin: 6px 0; }
.art-foot footer a { color: var(--navy-fg-soft); text-decoration: underline; text-decoration-color: rgba(201, 184, 148, .4); }
.art-foot footer a:hover { color: var(--amber-bright); }
/* ── Scroll reveal ───────────────────────────────────────────── */
.animated-section { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.animated-section.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.animated-section { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ── Print ───────────────────────────────────────────────────── */
@media print {
body { background: #fff; }
.art-hero, .art-paper, .art-outro, .art-foot { background: #fff; padding: 0; }
.art-hero h1, .article-subtitle, .article-byline, .article-date { color: #000; }
.article-body p, .article-body ul, .sources li { color: #333; }
.article-body h2, .article-body strong { color: #000; }
.breadcrumb, .art-outro, .art-foot, #site-nav, .table-hint { display: none; }
.animated-section { opacity: 1; transform: none; }
.art-col { max-width: none; padding: 0; }
}