/* ==========================================================================
Arrow Journal — editorial layer for the blog (index, collections, articles).
Stripe-inspired rhythm: left-aligned type, one reading measure, layered
shadows, hairline rules, and a restrained aurora built from house tokens.
No new palette, font or chrome: everything derives from /home.css tokens,
and the shared v5 nav, footer and booking modal are untouched.
Loaded last on blog pages. Removing the restores the previous look.
========================================================================== */
:root {
--jr-measure: 680px;
--jr-rail: 200px;
--jr-gap: clamp(40px, 5.5vw, 72px);
--jr-page: 1040px;
--jr-radius: 14px;
--jr-line: linear-gradient(90deg, var(--geo), var(--violet-600));
--jr-shadow-sm: 0 1px 1px var(--a4), 0 2px 6px -2px var(--a8);
--jr-shadow: 0 1px 1px var(--a4), 0 8px 18px -10px var(--a12), 0 22px 44px -22px var(--a16);
--jr-shadow-lg: 0 2px 4px var(--a4), 0 30px 60px -30px var(--a24),
0 50px 100px -24px color-mix(in srgb, var(--violet-900) 24%, transparent);
--jr-aurora:
radial-gradient(36% 58% at 76% 34%, color-mix(in srgb, var(--violet-600) 36%, transparent), transparent 72%),
radial-gradient(42% 64% at 48% 22%, color-mix(in srgb, var(--geo) 30%, transparent), transparent 74%),
radial-gradient(30% 50% at 94% 62%, color-mix(in srgb, var(--lavender) 85%, transparent), transparent 72%);
--jr-guides:
linear-gradient(var(--a8) 50%, transparent 0) 0 0 / 1px 8px repeat-y,
linear-gradient(var(--a8) 50%, transparent 0) 33.333% 0 / 1px 8px repeat-y,
linear-gradient(var(--a8) 50%, transparent 0) 66.666% 0 / 1px 8px repeat-y,
linear-gradient(var(--a8) 50%, transparent 0) 100% 0 / 1px 8px repeat-y;
}
/* ---------- shared details ---------- */
.jr-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
font: 500 12px/1.4 var(--mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.jr-eyebrow > :first-child {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--geo);
text-decoration: none;
}
.jr-eyebrow > :first-child::before {
content: "";
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--jr-line);
}
/* ==========================================================================
1. Blog index and collection pages (generated: scripts/lib/blog-magazine.mjs)
========================================================================== */
.frame:has(.blog-journal) { max-width: none; border: 0; background: var(--bg-card); }
.blog-journal { background: var(--bg-card); }
.blog-journal .section {
max-width: calc(var(--jr-page) + 80px);
margin-inline: auto;
padding: 48px 40px;
border: 0;
}
.blog-journal .section > .cross { display: none; }
.blog-journal .h-section { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; margin: 0; }
.blog-journal .mag-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* masthead */
.blog-journal .jr-masthead {
position: relative;
isolation: isolate;
max-width: none;
padding: clamp(64px, 9vw, 120px) max(40px, calc((100% - var(--jr-page)) / 2)) clamp(40px, 5vw, 64px);
overflow: hidden;
}
.blog-journal .jr-masthead::before {
content: "";
position: absolute;
inset: -12% -8% -8% 36%;
background: var(--jr-aurora);
transform: skewY(-9deg);
filter: blur(6px);
opacity: 0.8;
z-index: -2;
pointer-events: none;
}
.jr-masthead-inner { position: relative; }
.jr-masthead-inner::before {
content: "";
position: absolute;
inset: calc(-1 * clamp(64px, 9vw, 120px)) 0 calc(-1 * clamp(40px, 5vw, 64px));
background: var(--jr-guides);
-webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
z-index: -1;
pointer-events: none;
}
.jr-masthead h1 {
font-size: clamp(3rem, 7vw, 5.6rem);
font-weight: 600;
line-height: 0.98;
letter-spacing: -0.055em;
color: var(--ink);
margin: 26px 0 22px;
max-width: 12ch;
text-wrap: balance;
}
.jr-deck {
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
line-height: 1.55;
color: var(--ink-soft);
max-width: 620px;
margin: 0;
}
.jr-masthead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.jr-masthead-actions a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--a24); }
.jr-masthead-actions a:not(.btn):hover { text-decoration-color: currentColor; }
/* topic tabs */
.blog-journal .mag-navigation {
max-width: none;
padding: 0 max(40px, calc((100% - var(--jr-page)) / 2));
border-bottom: 1px solid var(--a8);
background: color-mix(in srgb, var(--bg-card) 86%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
}
.blog-journal .mag-nav { display: flex; gap: 28px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.blog-journal .mag-nav::-webkit-scrollbar { display: none; }
.blog-journal .mag-nav a {
display: inline-flex;
align-items: center;
min-height: 52px;
padding: 0;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
color: var(--muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.16s ease, border-color 0.16s ease;
}
.blog-journal .mag-nav a:hover { color: var(--ink); }
.blog-journal .mag-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--geo); }
.blog-journal .mag-rss { margin-left: auto; font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: 0.08em; text-transform: uppercase; }
/* category label + read arrow, shared by every card */
.blog-journal a.mag-category {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 12px/1.4 var(--mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--geo);
text-decoration: none;
}
.blog-journal .blog-card-link { display: block; text-decoration: none; }
.blog-journal .blog-card-link h2,
.blog-journal .blog-card-link h3 { font-weight: 600; color: var(--ink); transition: color 0.16s ease; }
.blog-journal .blog-card-link:hover h2,
.blog-journal .blog-card-link:hover h3 { color: var(--geo); }
.blog-journal .blog-card-link p { color: var(--muted); }
.blog-journal .blog-read {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-size: 14px;
font-weight: 500;
color: var(--geo);
text-decoration: none;
}
.blog-journal .blog-read span { display: none; }
.blog-journal .blog-read::after { content: "→"; transition: transform 0.18s ease; }
.blog-journal .blog-card-link:hover .blog-read::after { transform: translateX(4px); }
.blog-journal .blog-byline { justify-content: flex-start; gap: 6px 14px; font-size: 13px; color: var(--muted); margin: 0; }
.blog-journal .blog-author { color: var(--ink); font-weight: 500; }
.blog-journal .blog-author img { width: 20px; height: 20px; border-radius: 6px; }
.blog-journal .blog-card-link:focus-visible { outline: 0; }
.blog-journal .blog-card-link:focus-visible :is(h2, h3) { outline: 2px solid var(--geo); outline-offset: 5px; }
/* lead story */
.blog-journal .mag-feature-stage { padding-top: 64px; padding-bottom: 40px; }
.blog-journal .mag-lead {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 6vw, 80px);
align-items: center;
margin: 0;
padding: 0;
border: 0;
}
.blog-journal .mag-lead .mag-feature-copy { display: flex; flex-direction: column; align-items: flex-start; }
.blog-journal .mag-lead .blog-card-link h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); line-height: 1.06; letter-spacing: -0.045em; margin: 20px 0 18px; }
.blog-journal .mag-lead .blog-card-link p { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0; display: block; overflow: visible; -webkit-line-clamp: unset; }
.blog-journal .mag-lead .blog-byline { order: 3; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--a8); width: 100%; }
.blog-journal .mag-lead .mag-feature-media { display: block; }
.blog-journal .mag-feature-image { display: block; overflow: hidden; border-radius: 18px; background: var(--bg-lighter); box-shadow: var(--jr-shadow-lg); }
.blog-journal .mag-feature-image img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.blog-journal .blog-feature:hover .mag-feature-image img { transform: scale(1.02); }
.blog-journal .mag-lead .mag-feature-image { max-width: 500px; margin-left: auto; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform 0.5s ease; }
.blog-journal .mag-lead:hover .mag-feature-image { transform: perspective(1400px) rotateY(0) rotateX(0); }
/* highlight pair: two quiet cards */
.blog-journal .mag-highlights-section { padding-top: 24px; padding-bottom: 40px; }
.blog-journal .mag-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.blog-journal .mag-highlight { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; min-width: 0; }
.blog-journal .mag-highlight :is(.mag-feature-copy, .mag-feature-media) { display: contents; }
.blog-journal .mag-highlight .mag-feature-image { order: 0; aspect-ratio: 3 / 2; border-radius: var(--jr-radius); box-shadow: var(--jr-shadow); margin-bottom: 24px; }
.blog-journal .mag-highlight .mag-feature-image img { height: 100%; object-fit: cover; }
.blog-journal .mag-highlight .mag-category { order: 1; }
.blog-journal .mag-highlight .blog-card-link { order: 2; }
.blog-journal .mag-highlight .blog-byline { order: 3; margin-top: 18px; }
.blog-journal .mag-highlight .blog-card-link h2 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.18; letter-spacing: -0.035em; margin: 12px 0 10px; }
.blog-journal .mag-highlight .blog-card-link p { font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* editor's pick: one wide panel on a soft aurora */
.blog-journal .mag-highlight-editor .mag-highlights { grid-template-columns: 1fr; }
.blog-journal .mag-highlight-editor .mag-highlight {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
column-gap: clamp(28px, 5vw, 64px);
align-items: start;
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(24px, 4vw, 44px);
border-radius: 22px;
background: var(--bg-lighter);
border: 1px solid var(--a6);
}
.blog-journal .mag-highlight-editor .mag-highlight::before {
content: "";
position: absolute;
inset: -60% -30% 20% 35%;
background: var(--jr-aurora);
opacity: 0.45;
filter: blur(18px);
z-index: -1;
}
.blog-journal .mag-highlight-editor .mag-feature-image { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.blog-journal .mag-highlight-editor .mag-category { grid-column: 2; grid-row: 1; margin-top: 8px; }
.blog-journal .mag-highlight-editor .blog-card-link { grid-column: 2; grid-row: 2; }
.blog-journal .mag-highlight-editor .blog-byline { grid-column: 2; grid-row: 3; align-self: start; }
.blog-journal .mag-highlight-editor .blog-card-link h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.blog-journal .mag-highlight-editor .blog-card-link p { -webkit-line-clamp: 4; }
.blog-journal .mag-highlight-editor .mag-category::before { content: "Editor’s pick ·"; color: var(--muted); letter-spacing: 0.1em; }
/* topic index: typographic tiles instead of stock artwork */
.blog-journal .blog-topics { padding-top: 40px; padding-bottom: 40px; }
.blog-journal .blog-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.blog-journal .topic-link { font-size: 14px; font-weight: 500; color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--a24); }
.blog-journal .topic-link:hover { text-decoration-color: currentColor; }
.blog-journal .mag-topic-gallery,
.blog-journal .blog-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blog-journal .blog-topic-grid.is-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-journal .topic-card { min-width: 0; }
.blog-journal .topic-card > a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 22px 22px 20px;
border: 1px solid var(--a8);
border-radius: var(--jr-radius);
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
text-decoration: none;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-journal .topic-card > a::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--jr-line); opacity: 0; transition: opacity 0.2s ease; }
.blog-journal .topic-card > a:hover { transform: translateY(-3px); box-shadow: var(--jr-shadow); border-color: var(--a12); }
.blog-journal .topic-card > a:hover::before { opacity: 1; }
.blog-journal .topic-card-art { display: none; }
.blog-journal .topic-card-copy { display: flex; flex-direction: column; flex: 1; padding: 0; background: none !important; text-align: left; }
.blog-journal .topic-card .kicker { display: inline-flex; order: 0; margin: 0; font-size: 11px; color: var(--muted); }
.blog-journal .topic-card .kicker::before { background: var(--jr-line); }
.blog-journal .topic-card h3 { order: 1; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink) !important; margin: 18px 0 8px; }
.blog-journal .topic-card p { display: block !important; order: 2; font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.blog-journal .topic-card .topic-link { display: inline-flex !important; order: 3; margin-top: auto; gap: 6px; color: var(--geo); text-decoration: none; font-size: 13px; }
.blog-journal .topic-card .topic-link::after { content: "→"; transition: transform 0.18s ease; }
.blog-journal .topic-card > a:hover .topic-link::after { transform: translateX(4px); }
/* library: Stripe-style editorial list */
.blog-journal .blog-library { padding-top: 56px; }
.blog-journal .blog-tabs { gap: 24px; border-bottom: 1px solid var(--a8); margin-bottom: 20px; }
.blog-journal .blog-tabs button { font: 500 14px var(--sans); color: var(--muted); padding: 12px 0 14px; }
.blog-journal .blog-tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--geo); }
.blog-journal .blog-controls { margin: 24px 0 8px; }
.blog-journal .blog-search label,
.blog-journal .blog-filter label { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.blog-journal .blog-search input,
.blog-journal .blog-filter select {
height: 48px;
border: 1px solid var(--a12);
border-radius: 10px;
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.blog-journal .blog-search input:focus,
.blog-journal .blog-filter select:focus { border-color: var(--geo); box-shadow: 0 0 0 4px var(--geo-soft); outline: 0; }
.blog-journal .blog-search .btn { height: 48px; border-radius: 10px; }
.blog-journal .blog-results-meta { font: 12px var(--mono); color: var(--muted); padding-top: 8px; }
.blog-journal .blog-results { display: block; margin-top: 12px; border-top: 1px solid var(--a8); }
.blog-journal .blog-result.jr-row {
display: grid;
grid-template-columns: 170px minmax(0, 1fr) 208px;
grid-template-rows: auto 1fr;
grid-template-areas: "cat copy art" "meta copy art";
column-gap: clamp(24px, 4vw, 48px);
padding: 32px 0;
border: 0;
border-bottom: 1px solid var(--a8);
min-height: 0;
}
.blog-journal .jr-row :is(.mag-result-copy, .mag-result-media) { display: contents; }
.blog-journal .jr-row .mag-category { grid-area: cat; align-self: start; font-size: 11px; line-height: 1.5; }
.blog-journal .jr-row .blog-byline { grid-area: meta; align-self: start; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13px; }
.blog-journal .blog-result .blog-byline > span:last-child { font: 12px var(--mono); color: var(--muted); }
/* show the date only: the topic label already appears above the title */
.blog-journal .blog-result .blog-byline > span:last-child { font-size: 0; }
.blog-journal .blog-result .blog-byline > span:last-child time { font: 12px var(--mono); color: var(--muted); }
.blog-journal .jr-row .blog-card-link { grid-area: copy; }
.blog-journal .jr-row .blog-card-link h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.22; letter-spacing: -0.03em; margin: 0 0 10px; }
.blog-journal .jr-row .blog-card-link p { font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.blog-journal .jr-row .blog-read { margin-top: 14px; }
.blog-journal .jr-row .blog-card-art {
grid-area: art;
align-self: start;
display: block;
aspect-ratio: 3 / 2;
border-radius: 10px;
overflow: hidden;
background: var(--bg-lighter);
border: 1px solid var(--a6);
box-shadow: var(--jr-shadow-sm);
}
.blog-journal .jr-row .blog-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-journal .jr-row:hover .blog-card-art img { transform: scale(1.03); }
.blog-journal .blog-more-wrap { margin-top: 32px; }
.blog-journal .blog-more-wrap .btn { border-radius: 10px; }
/* collection pages: companion links */
.blog-journal .mag-end-links { padding-block: 8px; }
.blog-journal .mag-companion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; }
.blog-journal .mag-companion > span { color: var(--muted); }
/* closing call to action: dark band */
.blog-journal .blog-next,
.jr-dark-band {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: clamp(36px, 5vw, 64px);
border-radius: 24px;
background: var(--ink);
color: var(--bg-card);
}
.blog-journal .blog-next::before {
content: "";
position: absolute;
inset: -80% -25% -10% 35%;
background: var(--jr-aurora);
opacity: 0.55;
filter: blur(22px);
z-index: -1;
}
.blog-journal .blog-next .kicker { color: var(--lavender); }
.blog-journal .blog-next .kicker::before { background: var(--jr-line); }
.blog-journal .blog-next .h-section { color: var(--bg-card); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.blog-journal .blog-next p:not(.kicker) { color: color-mix(in srgb, var(--bg-card) 72%, transparent); max-width: 560px; }
.blog-journal .blog-next .topic-link { color: var(--bg-card); text-decoration-color: color-mix(in srgb, var(--bg-card) 40%, transparent); }
/* collection hubs (/blog/topics/…) share the journal type */
.blog-journal .blog-topic-hero { padding-top: clamp(56px, 8vw, 96px); }
.blog-journal .blog-crumb { font: 12px var(--mono); letter-spacing: 0.04em; }
.blog-journal .blog-crumb a { text-decoration: none; color: var(--geo); }
.blog-journal .blog-topic-intro .h-display { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; }
.blog-journal .blog-topic-cover img { border-radius: 18px; box-shadow: var(--jr-shadow-lg); }
.blog-journal .blog-topic-cover figcaption { font: 13px var(--sans); color: var(--muted); }
.blog-journal .blog-question-list > a { padding: 26px 0; border-top: 1px solid var(--a8); transition: padding 0.2s ease; }
.blog-journal .blog-question-list > a:hover { padding-left: 8px; }
.blog-journal .blog-question-list > a:hover h3 { color: var(--geo); }
.blog-journal .blog-question-list h3 { font-weight: 600; }
.blog-journal .blog-route { border-left: 1px solid var(--a8); }
.blog-journal .blog-subtopic summary strong { font-weight: 600; }
.blog-journal .blog-results:not(:has(.jr-row)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; border-top: 0; }
.blog-journal .blog-result:not(.jr-row) { display: block; padding: 0; border: 0; }
.blog-journal .blog-result:not(.jr-row) .blog-card-art { aspect-ratio: 3 / 2; border-radius: 12px; box-shadow: var(--jr-shadow); }
.blog-journal .blog-result:not(.jr-row) .blog-card-link h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; margin: 18px 0 8px; }
.blog-journal .blog-result:not(.jr-row) .blog-byline { margin-bottom: 14px; }
/* ==========================================================================
2. Articles (every blog// page). Scope: pages that render .blog-shell.
========================================================================== */
.frame:has(.blog-shell) { max-width: none; border: 0; background: var(--bg-card); }
.frame:has(.blog-shell) main > .section {
max-width: var(--frame-w);
margin-inline: auto;
border-top: 0;
}
.frame:has(.blog-shell) main > .section > .cross { display: none; }
/* header aligned with the reading column */
.frame:has(.blog-shell) .blog-masthead {
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: left;
isolation: isolate;
overflow: visible;
padding-top: clamp(56px, 8vw, 104px);
padding-bottom: clamp(32px, 4vw, 48px);
padding-left: calc(var(--pad-x) + var(--jr-rail) + var(--jr-gap));
}
.frame:has(.blog-shell) .blog-masthead > * { flex: 0 0 100%; max-width: 820px; }
.frame:has(.blog-shell) .blog-masthead::before {
inset: -60px -14vw auto 40%;
height: 460px;
background: var(--jr-aurora);
background-size: auto;
-webkit-mask-image: none;
mask-image: none;
transform: skewY(-8deg);
filter: blur(8px);
opacity: 0.55;
z-index: -1;
}
.frame:has(.blog-shell) .blog-masthead .hero-pill {
display: inline-flex;
flex: 0 0 auto;
gap: 10px;
padding: 0;
margin: 0 0 24px;
border: 0;
background: none;
font-size: 14px;
color: var(--muted);
}
.frame:has(.blog-shell) .blog-masthead .hero-pill:hover { background: none; color: var(--ink); }
.frame:has(.blog-shell) .blog-masthead .hero-pill .tag {
padding: 0;
background: none;
color: var(--geo);
font: 600 12px/1.4 var(--mono);
letter-spacing: 0.12em;
display: inline-flex;
align-items: center;
gap: 10px;
}
.frame:has(.blog-shell) .blog-masthead .hero-pill .tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--jr-line); }
.frame:has(.blog-shell) .blog-masthead .hero-pill .arr { color: var(--geo); font-family: var(--mono); }
.frame:has(.blog-shell) .blog-masthead .h-display {
font-size: clamp(2.3rem, 4.6vw, 3.9rem);
line-height: 1.04;
letter-spacing: -0.048em;
margin: 0 0 22px;
max-width: 820px;
text-align: left;
}
.frame:has(.blog-shell) .blog-masthead .lede {
font-size: clamp(1.1rem, 1.55vw, 1.3rem);
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
max-width: var(--jr-measure);
}
.frame:has(.blog-shell) .blog-masthead .author-row {
flex: 0 0 auto;
margin: 32px 20px 0 0;
gap: 10px;
font-size: 15px;
color: var(--ink);
}
.frame:has(.blog-shell) .blog-masthead .author-row a { color: var(--ink); font-weight: 600; text-decoration: none; }
.frame:has(.blog-shell) .blog-masthead .author-mark { width: 32px; height: 32px; border-radius: 9px; padding: 4px; box-shadow: var(--jr-shadow-sm); }
.frame:has(.blog-shell) .blog-masthead .article-meta {
flex: 1 1 auto;
justify-content: flex-start;
gap: 0;
margin: 32px 0 0;
}
.frame:has(.blog-shell) .blog-masthead .article-meta span {
border: 0;
background: none;
padding: 0;
border-radius: 0;
font: 14px/1.5 var(--sans);
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
.frame:has(.blog-shell) .blog-masthead .article-meta span + span::before { content: "·"; margin: 0 10px; color: var(--faint); }
/* cover */
.frame:has(.blog-shell) .article-cover { padding-top: 8px; padding-bottom: clamp(48px, 6vw, 80px); }
.frame:has(.blog-shell) .article-cover-card { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.frame:has(.blog-shell) .article-cover-card img { border-radius: 20px; box-shadow: var(--jr-shadow-lg); background: var(--bg-lighter); }
.frame:has(.blog-shell) .article-cover-caption {
border: 0;
background: none;
padding: 16px 0 0;
margin-left: calc(var(--jr-rail) + var(--jr-gap));
max-width: var(--jr-measure);
font: 13px/1.6 var(--sans);
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
/* two-column shell: contents rail + one reading measure; related below */
.frame:has(.blog-shell) .blog-shell {
grid-template-columns: var(--jr-rail) minmax(0, var(--jr-measure));
grid-template-areas: "rail body" "rail aside";
column-gap: var(--jr-gap);
row-gap: 0;
}
.frame:has(.blog-shell) .blog-side.is-left { grid-area: rail; align-self: start; top: 104px; }
.frame:has(.blog-shell) .article-body { grid-area: body; }
.frame:has(.blog-shell) .blog-side.is-right { grid-area: aside; display: block; position: static; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--a8); }
.frame:has(.blog-shell) .blog-side-card { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; margin: 0 0 32px; max-height: none; overflow: visible; }
.frame:has(.blog-shell) .blog-side-card .label { font: 600 11px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--ink); margin-bottom: 14px; }
.frame:has(.blog-shell) .article-toc { display: grid; gap: 0; border-left: 1px solid var(--a10); }
.frame:has(.blog-shell) .article-toc a {
display: block;
margin: 0 0 0 -1px;
padding: 7px 0 7px 16px;
border-left: 1px solid transparent;
border-radius: 0;
font-size: 14px;
font-weight: 450;
line-height: 1.45;
color: var(--muted);
background: none;
transition: color 0.16s ease, border-color 0.16s ease;
}
.frame:has(.blog-shell) .article-toc a::after { content: none; }
.frame:has(.blog-shell) .article-toc a:hover { color: var(--ink); background: none; }
.frame:has(.blog-shell) .article-toc a.is-active { color: var(--geo); border-left-color: var(--geo); font-weight: 550; }
.frame:has(.blog-shell) .share-list { gap: 2px; }
.frame:has(.blog-shell) .share-list a { padding: 5px 0; border-radius: 0; font-size: 14px; color: var(--muted); background: none; }
.frame:has(.blog-shell) .share-list a:hover { color: var(--geo); background: none; }
.frame:has(.blog-shell) .blog-side.is-right .share-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frame:has(.blog-shell) .blog-side.is-right .share-list a,
.frame:has(.blog-shell) .blog-side.is-right .related-mini a {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border: 1px solid var(--a8);
border-radius: 12px;
font-size: 15px;
font-weight: 550;
line-height: 1.4;
color: var(--ink);
box-shadow: var(--jr-shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.frame:has(.blog-shell) .blog-side.is-right .share-list a::after { content: "→"; color: var(--geo); transition: transform 0.18s ease; }
.frame:has(.blog-shell) .blog-side.is-right .share-list a:hover { transform: translateY(-2px); box-shadow: var(--jr-shadow); color: var(--ink); }
.frame:has(.blog-shell) .blog-side.is-right .share-list a:hover::after { transform: translateX(3px); }
.frame:has(.blog-shell) .blog-side.is-right .related-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frame:has(.blog-shell) .blog-side.is-right .related-mini a { flex-direction: column; }
.frame:has(.blog-shell) .blog-side.is-right .related-mini img { display: none; }
/* reading typography */
.frame:has(.blog-shell) .article-body { max-width: var(--jr-measure); margin: 0; }
.frame:has(.blog-shell) .article-body > p,
.frame:has(.blog-shell) .article-body > ul > li,
.frame:has(.blog-shell) .article-body > ol > li { font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.frame:has(.blog-shell) .article-body > p { margin: 0 0 24px; }
.frame:has(.blog-shell) .article-body > :is(ul, ol) { margin: 0 0 28px; padding-left: 1.3em; }
.frame:has(.blog-shell) .article-body > :is(ul, ol) > li { margin: 8px 0; padding-left: 4px; }
.frame:has(.blog-shell) .article-body > ul > li::marker { color: var(--geo); }
.frame:has(.blog-shell) .article-body > ol > li::marker { color: var(--geo); font: 600 15px var(--mono); }
.frame:has(.blog-shell) .article-body :is(p, li) strong { color: var(--ink); font-weight: 600; }
.frame:has(.blog-shell) .article-body h2 {
font-size: clamp(1.6rem, 2.7vw, 2.1rem);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.035em;
color: var(--ink);
margin: 64px 0 18px;
scroll-margin-top: 104px;
text-wrap: balance;
}
.frame:has(.blog-shell) .article-body > h2:first-child,
.frame:has(.blog-shell) .article-body > .answer-box + h2 { margin-top: 8px; }
.frame:has(.blog-shell) .article-body h3 { font-size: 1.28rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); margin: 36px 0 10px; scroll-margin-top: 104px; }
.frame:has(.blog-shell) .article-body :is(p, li, td) > a:not(.btn) {
color: var(--geo);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--geo) 35%, transparent);
transition: text-decoration-color 0.16s ease;
}
.frame:has(.blog-shell) .article-body :is(p, li, td) > a:not(.btn):hover { text-decoration-color: currentColor; }
.frame:has(.blog-shell) .article-body blockquote {
margin: 36px 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--geo);
font-size: 21px;
line-height: 1.55;
letter-spacing: -0.015em;
color: var(--ink);
}
.frame:has(.blog-shell) .article-body figure { margin: 36px 0; }
.frame:has(.blog-shell) .article-body figure img { border-radius: 14px; box-shadow: var(--jr-shadow); }
.frame:has(.blog-shell) .article-body figcaption { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.frame:has(.blog-shell) .article-body code { font: 0.88em var(--mono); background: var(--a4); border: 1px solid var(--a6); border-radius: 6px; padding: 1px 6px; }
.frame:has(.blog-shell) .article-body hr { border: 0; height: 1px; background: var(--a8); margin: 48px 0; }
/* short answer: the first thing a reader (or an answer engine) should quote */
.frame:has(.blog-shell) .answer-box {
position: relative;
overflow: hidden;
margin: 0 0 48px;
padding: 26px 28px 26px 30px;
border: 1px solid var(--a8);
border-radius: var(--jr-radius);
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
}
.frame:has(.blog-shell) .answer-box::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--geo), var(--violet-600)); }
.frame:has(.blog-shell) .answer-box .label { font: 600 11px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--geo); margin-bottom: 10px; }
.frame:has(.blog-shell) .answer-box p { font-size: 17px; line-height: 1.7; color: var(--ink); }
/* "The Arrow read" and other callouts */
.frame:has(.blog-shell) .article-callout {
position: relative;
isolation: isolate;
overflow: hidden;
margin: 56px 0;
padding: clamp(26px, 4vw, 40px);
border: 1px solid var(--a8);
border-radius: 18px;
background: var(--bg-lighter);
}
.frame:has(.blog-shell) .article-callout::before { content: ""; position: absolute; inset: -70% -40% 30% 30%; background: var(--jr-aurora); opacity: 0.35; filter: blur(20px); z-index: -1; }
.frame:has(.blog-shell) .article-callout .kicker { color: var(--geo); }
.frame:has(.blog-shell) .article-callout .kicker::before { background: var(--jr-line); }
.frame:has(.blog-shell) .article-callout h2 { margin-top: 0; font-size: clamp(1.4rem, 2.3vw, 1.75rem); }
.frame:has(.blog-shell) .article-callout p { font-size: 17px; }
/* tables */
.frame:has(.blog-shell) .data-table-wrap,
.frame:has(.blog-shell) .article-body > table {
margin: 36px 0;
border: 1px solid var(--a8);
border-radius: var(--jr-radius);
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
overflow-x: auto;
}
.frame:has(.blog-shell) .data-table-wrap table,
.frame:has(.blog-shell) .data-table { margin: 0; width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.frame:has(.blog-shell) .data-table-wrap :is(th, td) { padding: 14px 18px; border-bottom: 1px solid var(--a6); text-align: left; vertical-align: top; }
.frame:has(.blog-shell) .data-table-wrap thead th { font: 600 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg-lighter); white-space: nowrap; }
.frame:has(.blog-shell) .data-table-wrap tbody tr:last-child :is(th, td) { border-bottom: 0; }
.frame:has(.blog-shell) .data-table-wrap tbody :is(th, td):first-child { color: var(--ink); font-weight: 550; }
/* FAQ: hairline list in two columns */
.frame:has(.blog-shell) .section:has(> .faq-grid) { padding-top: clamp(56px, 7vw, 88px); }
.frame:has(.blog-shell) .faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(32px, 5vw, 64px);
max-width: var(--jr-page);
margin: 40px auto 0;
border-top: 1px solid var(--a8);
}
.frame:has(.blog-shell) .faq-item { border: 0; border-bottom: 1px solid var(--a8); border-radius: 0; background: none; box-shadow: none; padding: 28px 0; }
.frame:has(.blog-shell) .faq-item .label { color: var(--geo); font: 600 11px/1.4 var(--mono); letter-spacing: 0.12em; }
.frame:has(.blog-shell) .faq-item h3 { font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.frame:has(.blog-shell) .faq-item p { font-size: 16px; line-height: 1.7; color: var(--muted); }
/* closing call to action: dark band with the aurora */
.frame:has(.blog-shell) .article-cta {
position: relative;
isolation: isolate;
overflow: hidden;
border: 0;
border-radius: 24px;
background: var(--ink);
color: var(--bg-card);
padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
box-shadow: var(--jr-shadow-lg);
}
.frame:has(.blog-shell) .article-cta::before { content: ""; position: absolute; inset: -90% -20% -10% 30%; background: var(--jr-aurora); opacity: 0.6; filter: blur(24px); z-index: -1; }
.frame:has(.blog-shell) .article-cta .kicker { color: var(--lavender); }
.frame:has(.blog-shell) .article-cta .h-section { color: var(--bg-card); }
.frame:has(.blog-shell) .article-cta .lede { color: color-mix(in srgb, var(--bg-card) 74%, transparent); }
.frame:has(.blog-shell) .article-cta .btn-ghost,
.frame:has(.blog-shell) .article-cta .btn-dark { background: transparent; color: var(--bg-card); border-color: color-mix(in srgb, var(--bg-card) 32%, transparent); box-shadow: none; }
.frame:has(.blog-shell) .article-cta .btn-ghost:hover,
.frame:has(.blog-shell) .article-cta .btn-dark:hover { background: color-mix(in srgb, var(--bg-card) 10%, transparent); border-color: color-mix(in srgb, var(--bg-card) 60%, transparent); }
/* topic membership block ("Continue this topic"), aligned with the text */
.frame:has(.blog-shell) main > section[aria-labelledby="arrow-related-heading"] { padding-left: calc(var(--pad-x) + var(--jr-rail) + var(--jr-gap)); }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] .h-section { font-size: clamp(1.4rem, 2.3vw, 1.8rem); margin: 8px 0 18px; }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] ul { list-style: none; padding: 0; margin: 0; max-width: var(--jr-measure); border-top: 1px solid var(--a8); }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] li { border-bottom: 1px solid var(--a8); }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] li a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 550; color: var(--ink); text-decoration: none; }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] li a::after { content: "→"; color: var(--geo); transition: transform 0.18s ease; }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] li a:hover { color: var(--geo); }
.frame:has(.blog-shell) section[aria-labelledby="arrow-related-heading"] li a:hover::after { transform: translateX(4px); }
.frame:has(.blog-shell) [data-blog-cluster] a { color: var(--geo); }
/* reading progress (blog/journal.js) */
.jr-progress {
position: fixed;
inset: 0 0 auto;
height: 2px;
z-index: 1000;
background: var(--jr-line);
transform-origin: 0 50%;
transform: scaleX(var(--jr-read, 0));
pointer-events: none;
}
/* ==========================================================================
3. Responsive
========================================================================== */
@media (max-width: 1000px) {
.blog-journal .section { padding: 40px 24px; }
.blog-journal .jr-masthead,
.blog-journal .mag-navigation { padding-inline: 24px; }
.blog-journal .mag-lead,
.blog-journal .mag-highlight-editor .mag-highlight { grid-template-columns: 1fr; }
.blog-journal .mag-lead .mag-feature-image { margin: 8px 0 0; max-width: 440px; transform: none; }
.blog-journal .mag-highlight-editor .mag-feature-image { grid-row: auto; margin-bottom: 24px; }
.blog-journal .mag-highlight-editor :is(.mag-category, .blog-card-link, .blog-byline) { grid-column: 1; grid-row: auto; }
.blog-journal .mag-highlight-editor .blog-byline { margin-top: 16px; }
.blog-journal .mag-topic-gallery,
.blog-journal .blog-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-journal .blog-result.jr-row { grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "cat copy" "meta copy"; }
.blog-journal .jr-row .blog-card-art { display: none; }
.blog-journal .blog-results:not(:has(.jr-row)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-journal .blog-next { flex-direction: column; align-items: flex-start; }
.frame:has(.blog-shell) .blog-masthead,
.frame:has(.blog-shell) main > section[aria-labelledby="arrow-related-heading"] { padding-left: var(--pad-x); }
.frame:has(.blog-shell) .article-cover-caption { margin-left: 0; }
.frame:has(.blog-shell) .blog-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "body" "aside"; }
.frame:has(.blog-shell) .article-body { max-width: var(--jr-measure); }
.frame:has(.blog-shell) .blog-side.is-left { position: static; margin-bottom: 40px; padding: 20px 22px 4px; border: 1px solid var(--a8); border-radius: var(--jr-radius); background: var(--bg-lighter); }
.frame:has(.blog-shell) .blog-side.is-left .blog-side-card + .blog-side-card { display: none; }
.frame:has(.blog-shell) .blog-side.is-left .blog-side-card { margin-bottom: 16px; }
.frame:has(.blog-shell) .blog-side.is-right { display: block; }
}
@media (max-width: 700px) {
.blog-journal .section { padding: 32px 20px; }
.blog-journal .jr-masthead { padding: 56px 20px 36px; }
.blog-journal .mag-navigation { padding-inline: 20px; }
.jr-masthead h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); margin-top: 20px; }
.blog-journal .mag-feature-stage { padding-top: 40px; }
.blog-journal .mag-highlights { grid-template-columns: 1fr; gap: 40px; }
.blog-journal .mag-lead .blog-card-link p { font-size: 17px; }
.blog-journal .mag-topic-gallery,
.blog-journal .blog-topic-grid,
.blog-journal .blog-topic-grid.is-related,
.blog-journal .blog-results:not(:has(.jr-row)) { grid-template-columns: 1fr; }
.blog-journal .blog-result.jr-row { grid-template-columns: 1fr; grid-template-areas: "cat" "copy" "meta"; padding: 26px 0; row-gap: 10px; }
.blog-journal .jr-row .blog-byline { flex-direction: row; margin-top: 6px; }
.blog-journal .blog-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.blog-journal .blog-next { padding: 32px 24px; border-radius: 18px; }
.frame:has(.blog-shell) .blog-masthead .h-display { font-size: clamp(2.1rem, 9vw, 2.6rem); }
.frame:has(.blog-shell) .blog-masthead .author-row { margin-top: 24px; }
.frame:has(.blog-shell) .blog-masthead .hero-pill { flex-wrap: wrap; row-gap: 4px; max-width: 100%; white-space: normal; }
.frame:has(.blog-shell) .blog-masthead .article-meta { flex-basis: 100%; flex-direction: column; gap: 2px; margin-top: 12px; }
.frame:has(.blog-shell) .blog-masthead .article-meta span { width: auto; text-align: left; }
.frame:has(.blog-shell) .blog-masthead .article-meta span + span::before { content: none; }
.frame:has(.blog-shell) .article-body > p,
.frame:has(.blog-shell) .article-body > ul > li,
.frame:has(.blog-shell) .article-body > ol > li { font-size: 17px; }
.frame:has(.blog-shell) .article-cover-card img { border-radius: 14px; }
.frame:has(.blog-shell) .faq-grid { grid-template-columns: 1fr; }
.frame:has(.blog-shell) .blog-side.is-right .share-list,
.frame:has(.blog-shell) .blog-side.is-right .related-mini { grid-template-columns: 1fr; }
.frame:has(.blog-shell) .article-cta { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.blog-journal *,
.frame:has(.blog-shell) * { transition: none !important; }
.blog-journal .mag-lead .mag-feature-image { transform: none; }
.jr-progress { display: none; }
}
/* ==========================================================================
4. Resource-hub layer (Deel-inspired): search-first dark masthead, tinted
featured cards, topic rows with "View all", and conversion-aware articles.
Same house tokens; tints are color-mix() of --geo, --violet-600 and --heat.
========================================================================== */
:root {
--jr-tint-blue: color-mix(in srgb, var(--geo) 7%, var(--bg-card));
--jr-tint-violet: color-mix(in srgb, var(--violet-600) 8%, var(--bg-card));
--jr-tint-warm: color-mix(in srgb, var(--heat) 8%, var(--bg-card));
--jr-on-dark: color-mix(in srgb, var(--bg-card) 72%, transparent);
--jr-on-dark-line: color-mix(in srgb, var(--bg-card) 14%, transparent);
}
/* dark, search-first masthead */
.blog-journal .jr-masthead { background: var(--ink); color: var(--bg-card); padding-bottom: clamp(48px, 6vw, 72px); }
.blog-journal .jr-masthead::before { opacity: 0.95; filter: blur(10px); }
.blog-journal .jr-masthead .jr-masthead-inner::before {
background:
linear-gradient(var(--jr-on-dark-line) 50%, transparent 0) 0 0 / 1px 8px repeat-y,
linear-gradient(var(--jr-on-dark-line) 50%, transparent 0) 33.333% 0 / 1px 8px repeat-y,
linear-gradient(var(--jr-on-dark-line) 50%, transparent 0) 66.666% 0 / 1px 8px repeat-y,
linear-gradient(var(--jr-on-dark-line) 50%, transparent 0) 100% 0 / 1px 8px repeat-y;
}
.blog-journal .jr-masthead .jr-eyebrow { color: var(--jr-on-dark); }
.blog-journal .jr-masthead .jr-eyebrow > :first-child { color: var(--lavender); }
.blog-journal .jr-masthead h1 { color: var(--bg-card); }
.blog-journal .jr-masthead .jr-deck { color: var(--jr-on-dark); }
.jr-search {
display: flex;
align-items: center;
gap: 8px;
max-width: 660px;
margin-top: 34px;
padding: 6px 6px 6px 22px;
border-radius: 999px;
background: var(--bg-card);
box-shadow: var(--jr-shadow-lg);
}
.jr-search::before { content: "⌕"; font-size: 22px; line-height: 1; color: var(--muted); }
.jr-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--ink); font: 16px var(--sans); outline: 0; }
.jr-search input::placeholder { color: var(--faint); }
.jr-search:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--geo) 35%, transparent), var(--jr-shadow-lg); }
.jr-search .btn { border-radius: 999px; padding-inline: 24px; height: 48px; }
.jr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.jr-chips > span { font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jr-on-dark); margin-right: 6px; }
.jr-chips a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 14px;
border: 1px solid var(--jr-on-dark-line);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card) 6%, transparent);
color: var(--bg-card);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.16s ease, border-color 0.16s ease;
}
.jr-chips a:hover { background: color-mix(in srgb, var(--bg-card) 14%, transparent); border-color: color-mix(in srgb, var(--bg-card) 30%, transparent); }
.jr-chips small { font: 11px var(--mono); color: var(--jr-on-dark); }
.jr-chips .jr-chip-more { border-color: transparent; background: none; padding-inline: 6px; color: var(--lavender); }
/* section heads and pills */
.blog-journal .jr-featured-head { padding-top: 56px; padding-bottom: 0; }
.jr-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.jr-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--a16);
border-radius: 999px;
font-size: 13px;
font-weight: 550;
line-height: 1.2;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.jr-pill.is-dark { background: var(--ink); border-color: var(--ink); color: var(--bg-card); padding: 10px 18px; }
.jr-pill.is-dark:hover { background: var(--ink-soft); }
/* featured and trending: tinted cards */
.blog-journal .mag-feature-stage { padding-top: 28px; }
.blog-journal .mag-lead { padding: clamp(24px, 4vw, 52px); border-radius: 24px; background: var(--jr-tint-blue); }
.blog-journal .mag-lead .blog-read,
.blog-journal .mag-highlight .blog-read { padding: 9px 16px; border: 1px solid var(--a16); border-radius: 999px; color: var(--ink); background: var(--bg-card); }
.blog-journal .mag-highlight-pair .mag-highlight { padding: 20px 20px 24px; border-radius: 22px; }
.blog-journal .mag-highlight-pair .mag-highlight:nth-child(1) { background: var(--jr-tint-violet); }
.blog-journal .mag-highlight-pair .mag-highlight:nth-child(2) { background: var(--jr-tint-warm); }
.blog-journal .mag-highlight-pair .blog-read { align-self: flex-start; }
.blog-journal .mag-highlight-pair .blog-card-link { display: flex; flex-direction: column; align-items: flex-start; }
/* topic rows with resource cards */
.blog-journal .jr-topic-row { padding-top: 56px; padding-bottom: 16px; }
.jr-row-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--a8); }
.jr-row-head .jr-eyebrow { margin-bottom: 14px; }
.jr-row-head p:not(.jr-eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.jr-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jr-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--a8);
border-radius: 18px;
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jr-card:hover { transform: translateY(-3px); box-shadow: var(--jr-shadow); }
.jr-card-art { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-lighter); }
.jr-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.jr-card:hover .jr-card-art img { transform: scale(1.03); }
.jr-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.jr-card-type { font: 600 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--geo); }
.jr-card h3 { margin: 10px 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.jr-card h3 a { color: var(--ink); text-decoration: none; }
.jr-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jr-card h3 a:focus-visible { outline: 0; }
.jr-card:has(h3 a:focus-visible) { outline: 2px solid var(--geo); outline-offset: 3px; }
.jr-card:hover h3 a { color: var(--geo); }
.jr-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font: 12px var(--mono); color: var(--muted); }
.jr-card:hover .jr-pill { border-color: var(--ink); }
/* all topics: 8 tiles */
.blog-journal .blog-topics .mag-topic-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* articles: tinted header band (full bleed) */
.frame:has(.blog-shell) .blog-masthead {
background: var(--jr-tint-blue);
box-shadow: 0 0 0 100vmax var(--jr-tint-blue);
clip-path: inset(0 -100vmax);
margin-bottom: clamp(40px, 5vw, 64px);
}
.frame:has(.blog-shell) .article-cover { padding-top: 0; }
/* articles: key takeaways, warm like a highlighted note */
.frame:has(.blog-shell) .answer-box { background: var(--jr-tint-warm); border-color: color-mix(in srgb, var(--heat) 16%, transparent); border-radius: 18px; box-shadow: none; padding: 26px 28px; }
.frame:has(.blog-shell) .answer-box::before { content: none; }
.frame:has(.blog-shell) .answer-box .label { color: var(--heat-strong); display: flex; align-items: center; gap: 8px; }
.frame:has(.blog-shell) .answer-box .label::before { content: "✦"; font-size: 13px; }
/* articles: contents card with the audit CTA inside (journal.js adds it) */
.frame:has(.blog-shell) .blog-side.is-left .blog-side-card:first-child {
display: flex;
flex-direction: column;
max-height: calc(100vh - 136px);
padding: 18px 14px 14px;
border: 1px solid var(--a8);
border-radius: 18px;
background: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
}
.frame:has(.blog-shell) .blog-side.is-left .blog-side-card:first-child > .label { padding-inline: 8px; }
.frame:has(.blog-shell) .blog-side.is-left .article-toc { flex: 1; min-height: 0; overflow-y: auto; border-left: 0; overscroll-behavior: contain; }
.frame:has(.blog-shell) .blog-side.is-left .article-toc a { margin: 0; padding: 9px 8px; border-left: 0; border-top: 1px solid var(--a6); border-radius: 0; font-size: 13.5px; }
.frame:has(.blog-shell) .blog-side.is-left .article-toc a:first-child { border-top: 0; }
.frame:has(.blog-shell) .blog-side.is-left .article-toc a.is-active { color: var(--geo); background: var(--geo-soft); border-radius: 8px; border-top-color: transparent; }
.frame:has(.blog-shell) .blog-side.is-left .article-toc a.is-active + a { border-top-color: transparent; }
.jr-toc-cta { flex-shrink: 0; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--ink); color: var(--bg-card); position: relative; overflow: hidden; isolation: isolate; }
.jr-toc-cta::before { content: ""; position: absolute; inset: -60% -40% 10% 20%; background: var(--jr-aurora); opacity: 0.7; filter: blur(14px); z-index: -1; }
.jr-toc-cta p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--jr-on-dark); }
.jr-toc-cta strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--bg-card); }
.jr-toc-cta .btn { width: 100%; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.frame:has(.blog-shell) .blog-side.is-left.has-jr-cta .blog-side-card + .blog-side-card { display: none; }
.jr-toc-toggle { display: none; }
@media (max-width: 1000px) {
.jr-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jr-card-grid > :nth-child(3) { display: none; }
.blog-journal .blog-topics .mag-topic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frame:has(.blog-shell) .blog-side.is-left { padding: 0; border: 0; background: none; }
.frame:has(.blog-shell) .blog-side.is-left .blog-side-card:first-child { max-height: none; }
.jr-toc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 8px;
border: 0;
background: none;
font: 600 12px/1.4 var(--mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
min-height: 40px;
}
.jr-toc-toggle::after { content: "+"; font-size: 18px; color: var(--geo); transition: transform 0.2s ease; }
.blog-side.is-open .jr-toc-toggle::after { transform: rotate(45deg); }
.blog-side.has-jr-toc .blog-side-card:first-child > .label { display: none; }
.blog-side.has-jr-toc:not(.is-open) .article-toc { display: none; }
}
@media (max-width: 700px) {
.jr-search { padding-left: 16px; }
.jr-search .btn { padding-inline: 16px; }
.jr-chips > span { flex-basis: 100%; }
.jr-section-head,
.jr-row-head { flex-direction: column; align-items: flex-start; }
.jr-card-grid { grid-template-columns: 1fr; }
.jr-card-grid > :nth-child(3) { display: flex; }
.blog-journal .blog-topics .mag-topic-gallery { grid-template-columns: 1fr; }
.blog-journal .mag-highlight-pair .mag-highlight { padding: 16px 16px 20px; }
}
/* typographic covers for articles without their own artwork (no repeated stock images) */
.jr-card-art.is-type { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; position: relative; isolation: isolate; overflow: hidden; }
.jr-card-art.is-type::before { content: ""; position: absolute; inset: -40% -30% 30% 30%; background: var(--jr-aurora); opacity: 0.5; filter: blur(16px); z-index: -1; }
.jr-card-art.is-blue { background: var(--jr-tint-blue); }
.jr-card-art.is-violet { background: var(--jr-tint-violet); }
.jr-card-art.is-warm { background: var(--jr-tint-warm); }
.jr-card-art.is-type span { font: 600 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--geo); }
.jr-card-art.is-type b { align-self: flex-end; font: 500 clamp(64px, 7vw, 96px)/0.9 var(--sans); letter-spacing: -0.06em; color: color-mix(in srgb, var(--geo) 55%, var(--ink)); opacity: 0.85; }
.jr-card-art.is-violet b { color: color-mix(in srgb, var(--violet-600) 70%, var(--ink)); }
.jr-card-art.is-warm b { color: color-mix(in srgb, var(--heat-strong) 70%, var(--ink)); }
/* link colours: beat the hub's generic `.blog-hub a:not(.btn)` inheritance */
.blog-journal a.jr-pill { color: var(--ink); }
.blog-journal a.jr-pill.is-dark { color: var(--bg-card); }
.blog-journal .jr-chips a.jr-chip-more { color: var(--lavender); }
.blog-journal .jr-card h3 a { color: var(--ink); }
.blog-journal .jr-card:hover h3 a { color: var(--geo); }
/* ==========================================================================
5. Section mastheads with motion-style illustrations (/blog/geo/, /blog/ai-visibility/)
Light by design: one canvas (homepage globe data, drawn only on screen) and CSS
loops. The console rows reuse the homepage console language and colours.
========================================================================== */
.jr-masthead-inner.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.jr-masthead--visual h1 { max-width: none; }
.jr-art { position: relative; min-height: 460px; }
/* peps: staggered entrance and a drifting aurora */
.jr-masthead--visual::before { animation: jr-drift 18s ease-in-out infinite alternate; }
.jr-masthead--visual .jr-masthead-copy > * { animation: jr-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.jr-masthead--visual .jr-masthead-copy > :nth-child(2) { animation-delay: 0.08s; }
.jr-masthead--visual .jr-masthead-copy > :nth-child(3) { animation-delay: 0.16s; }
.jr-masthead--visual .jr-masthead-copy > :nth-child(4) { animation-delay: 0.24s; }
.jr-masthead--visual .jr-masthead-copy > :nth-child(5) { animation-delay: 0.32s; }
.jr-masthead--visual .jr-art { animation: jr-art-in 1s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes jr-drift { from { transform: skewY(-9deg) translate3d(0, 0, 0) scale(1); } to { transform: skewY(-7deg) translate3d(-6%, 4%, 0) scale(1.08); } }
@keyframes jr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jr-art-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
/* GEO: globe, engine chips, answer console */
.jr-globe-wrap { position: absolute; top: -28px; right: -24px; width: min(500px, 104%); aspect-ratio: 1; }
.jr-globe { display: block; width: 100%; height: 100%; }
.jr-globe-fallback { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid var(--jr-on-dark-line); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--geo) 40%, transparent), transparent 70%); }
.jr-globe-wrap.is-live .jr-globe-fallback { display: none; }
.jr-chip {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 8px 7px 12px;
border: 1px solid var(--jr-on-dark-line);
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 55%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--bg-card);
font: 500 13px/1 var(--sans);
white-space: nowrap;
box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
animation: jr-float 6s ease-in-out infinite;
}
.jr-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--heat) 22%, transparent); }
.jr-chip b { padding: 4px 8px; border-radius: 999px; background: var(--lavender); color: var(--ink); font: 600 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; animation: jr-ping 6s ease-in-out infinite; }
.jr-chip.c1 { top: 2%; left: 10%; }
.jr-chip.c2 { top: 17%; right: -2%; animation-delay: -1.5s; }
.jr-chip.c2 b { animation-delay: 1.5s; }
.jr-chip.c3 { top: 36%; right: -6%; animation-delay: -3s; }
.jr-chip.c3 b { animation-delay: 3s; }
.jr-chip.c4 { top: 55%; right: -9%; animation-delay: -4.5s; }
.jr-chip.c4 b { animation-delay: 4.5s; }
@keyframes jr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes jr-ping { 0%, 70%, 100% { background: var(--lavender); transform: none; } 78% { background: var(--bg-card); transform: scale(1.12); } }
.jr-console {
position: absolute;
z-index: 3;
left: -2%;
bottom: 0;
width: min(360px, 92%);
overflow: hidden;
border-radius: 14px;
background: var(--bg-card);
color: var(--ink);
box-shadow: var(--jr-shadow-lg);
font: 12px/1.5 var(--mono);
transform: rotate(-2deg);
}
.jr-console-bar { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--a8); background: var(--bg-lighter); color: var(--muted); font-size: 11px; }
.jr-console-bar em { font-style: normal; color: var(--geo); }
.jr-console-body { padding: 12px 14px 10px; }
.jr-console-body p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; opacity: 0; animation: jr-row 10s infinite; animation-delay: calc(var(--i) * 0.55s + 0.4s); }
.jr-console-body .p { color: var(--heat-strong); }
.jr-console-body .type { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--geo); animation: jr-type 10s steps(28) infinite 0.4s; }
.jr-console-body .k { color: var(--faint); white-space: nowrap; }
.jr-console-body .d { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--a24); transform: translateY(-3px); }
.jr-console-body .ok { color: #0c8a4d; white-space: nowrap; }
.jr-console-body .num { font-size: 16px; font-weight: 600; color: var(--ink); }
.jr-console-body .num small { font-size: 11px; color: var(--geo); }
@keyframes jr-type { 0% { width: 0; } 14%, 88% { width: 28ch; } 96%, 100% { width: 0; } }
@keyframes jr-row { 0% { opacity: 0; transform: translateY(4px); } 5%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
/* AI visibility: answer window and visibility meter */
.jr-art--answer { display: grid; align-items: center; justify-items: end; }
.jr-window { position: relative; z-index: 1; width: min(440px, 96%); overflow: hidden; border-radius: 16px; background: var(--bg-card); color: var(--ink); box-shadow: var(--jr-shadow-lg); transform: rotate(1.5deg); }
.jr-window-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--a8); background: var(--bg-lighter); }
.jr-dots { display: inline-flex; gap: 5px; }
.jr-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--a16); }
.jr-tabs { display: flex; gap: 4px; font: 500 12px/1 var(--sans); }
.jr-tabs b { padding: 6px 10px; border-radius: 8px; font-weight: 500; color: var(--muted); animation: jr-tab 9s infinite; }
.jr-tabs b:nth-child(2) { animation-delay: 3s; }
.jr-tabs b:nth-child(3) { animation-delay: 6s; }
.jr-tabs u { display: none; }
@keyframes jr-tab { 0%, 30% { background: var(--geo-soft); color: var(--geo); } 34%, 100% { background: transparent; color: var(--muted); } }
.jr-window-body { padding: 18px 18px 20px; }
.jr-ask { margin: 0 0 16px; font: 13px/1.4 var(--mono); color: var(--ink); }
.jr-ask .type { display: inline-block; width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid var(--geo); animation: jr-ask 9s steps(37) infinite; }
@keyframes jr-ask { 0% { width: 0; } 20%, 90% { width: 37ch; } 97%, 100% { width: 0; } }
.jr-line { display: block; height: 8px; margin: 10px 0; border-radius: 6px; background: var(--a8); transform-origin: left; transform: scaleX(0); animation: jr-grow 9s infinite; }
.jr-line.l1 { width: 94%; animation-delay: 1.9s; }
.jr-line.l2 { width: 76%; animation-delay: 2.1s; }
.jr-line.l3 { width: 58%; animation-delay: 3.1s; }
@keyframes jr-grow { 0% { transform: scaleX(0); } 6%, 72% { transform: scaleX(1); } 80%, 100% { transform: scaleX(0); } }
.jr-hit { margin: 14px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--geo) 30%, transparent); border-radius: 12px; background: var(--jr-tint-blue); opacity: 0; animation: jr-hit 9s infinite 2.5s; }
.jr-hit-tag { display: inline-block; padding: 4px 7px; border-radius: 6px; background: var(--geo); color: var(--bg-card); font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.jr-hit strong { display: block; margin-top: 8px; font-size: 15px; }
.jr-hit em { font-size: 12px; font-style: normal; color: var(--muted); }
@keyframes jr-hit { 0% { opacity: 0; transform: scale(0.94) translateY(6px); } 5%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
.jr-meter {
position: absolute;
z-index: 2;
left: 0;
bottom: 2%;
width: min(270px, 66%);
padding: 14px 16px 12px;
border-radius: 14px;
background: var(--bg-card);
color: var(--ink);
box-shadow: var(--jr-shadow-lg);
transform: rotate(-3deg);
font: 12px/1.4 var(--sans);
}
.jr-meter > p { display: flex; justify-content: space-between; margin: 0 0 10px; font-weight: 600; }
.jr-meter > p em { font: 11px var(--mono); font-style: normal; font-weight: 400; color: var(--geo); }
.jr-bar { display: grid; grid-template-columns: 70px 1fr 26px; align-items: center; gap: 10px; margin: 7px 0; }
.jr-bar span { color: var(--muted); }
.jr-bar b { position: relative; height: 7px; border-radius: 6px; background: var(--a8); overflow: hidden; }
.jr-bar b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--jr-line); transform-origin: left; transform: scaleX(0); animation: jr-fill 9s infinite; animation-delay: calc(var(--i) * 0.2s + 3.2s); }
.jr-bar em { font: 600 12px var(--mono); font-style: normal; text-align: right; }
@keyframes jr-fill { 0% { transform: scaleX(0); } 8%, 70% { transform: scaleX(var(--v)); } 78%, 100% { transform: scaleX(0); } }
.jr-fix { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--a8); font: 11px var(--mono); color: var(--muted); }
.jr-fix span { margin-right: auto; }
.jr-fix i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #0c8a4d; color: var(--bg-card); font-size: 10px; font-style: normal; transform: scale(0); animation: jr-check 9s infinite; }
.jr-fix i:nth-of-type(1) { animation-delay: 4.2s; }
.jr-fix i:nth-of-type(2) { animation-delay: 4.5s; }
.jr-fix i:nth-of-type(3) { animation-delay: 4.8s; }
@keyframes jr-check { 0% { transform: scale(0); } 5% { transform: scale(1.2); } 8%, 66% { transform: scale(1); } 72%, 100% { transform: scale(0); } }
@media (max-width: 1000px) {
.jr-masthead-inner.has-art { grid-template-columns: 1fr; }
.jr-art { min-height: 400px; margin-top: 8px; }
.jr-globe-wrap { right: 50%; transform: translateX(50%); width: min(420px, 100%); top: -10px; }
.jr-art--answer { justify-items: center; }
}
@media (max-width: 700px) {
.jr-art { min-height: 360px; }
.jr-globe-wrap { width: min(340px, 100%); }
.jr-chip { font-size: 11px; padding: 6px 7px 6px 10px; }
.jr-chip.c3,
.jr-chip.c4 { display: none; }
.jr-chip.c2 { right: 0; }
.jr-console { left: 0; width: 94%; font-size: 11px; }
.jr-console-body .type { max-width: 100%; }
.jr-meter { position: relative; left: auto; bottom: auto; width: 88%; margin: -28px auto 0; }
.jr-art--answer { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.jr-masthead--visual::before,
.jr-masthead--visual .jr-masthead-copy > *,
.jr-masthead--visual .jr-art,
.jr-art * { animation: none !important; }
.jr-console-body p,
.jr-hit { opacity: 1; }
.jr-console-body .type { width: 28ch; border-right: 0; }
.jr-ask .type { width: 37ch; border-right: 0; }
.jr-line { transform: none; }
.jr-bar b::after { transform: scaleX(var(--v)); }
.jr-fix i { transform: none; }
}
/* a little lift for the illustration cards (independent `translate`, keeps their tilt) */
.jr-window { animation: jr-bob 7s ease-in-out infinite; }
.jr-meter { animation: jr-bob 7s ease-in-out infinite -3.5s; }
.jr-console { animation: jr-bob 8s ease-in-out infinite -2s; }
@keyframes jr-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* code passages in articles (robots.txt, regex): the dark console used across the journal */
.frame:has(.blog-shell) .article-body pre {
margin: 28px 0;
padding: 20px 22px;
overflow-x: auto;
border-radius: var(--jr-radius);
background: var(--ink);
color: var(--bg-card);
box-shadow: var(--jr-shadow-sm);
font: 14px/1.7 var(--mono);
tab-size: 2;
}
.frame:has(.blog-shell) .article-body pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; white-space: pre; }