/* Shared editorial interactions. Only the selected design uses this stylesheet. */
[data-variant=journal] {
  --motion-ink:#75485d;
  --motion-line:#bc7892;
  --motion-wash:#f0e1e6;
  --motion-ease:cubic-bezier(.22,.68,.18,1);
  --motion-speed:520ms;
}

/* Remove older effects before applying one consistent interaction system. */
[data-variant=journal] .text-link::after,
[data-variant=journal] .desktop-nav a::after { display:none; }
[data-variant=journal] a.motion-link,
[data-variant=journal] .toc a.motion-link:is(:hover,.is-active),
[data-variant=journal] .breadcrumb a.motion-link:hover { text-decoration:none; }
[data-variant=journal] .mag-link:is(:hover,:focus-visible) .mag-copy h3 { text-decoration:none; }
[data-variant=journal] .mag-link:hover .mag-image img { transform:none; }
[data-variant=journal] .mag-link:is(:hover,:focus-visible) .mag-read>.motion-icon,
[data-variant=journal] .journal-hero-side>a:is(:hover,:focus-visible)>span { transform:none; background:none; }

/* Labels keep their position. A fine line enters below the text. */
[data-variant=journal] a.motion-link {
  display:inline-flex; align-items:center; gap:12px; max-width:100%;
  transition:color var(--motion-speed) var(--motion-ease);
}
[data-variant=journal] a.motion-link>.motion-label,
[data-variant=journal] .mag-read>.motion-label {
  position:relative; display:inline-block; min-width:0;
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit;
  transform:none; text-decoration:none;
}
[data-variant=journal] .motion-label::after {
  content:''; position:absolute; inset:auto 0 -5px; height:1px;
  background:var(--motion-line); transform:scaleX(var(--line-rest,0));
  transform-origin:right; pointer-events:none;
  transition:transform var(--motion-speed) var(--motion-ease),background-color .3s;
}
[data-variant=journal] :is(.text-link,.journal-hero-side>a,.article-after a,.article-source a,.side-return a,.article-byline a) {
  --line-rest:.2;
}
[data-variant=journal] .journal-hero-side>a { justify-content:space-between; gap:24px; }
[data-variant=journal] .journal-hero-side>a>.motion-label { font-size:inherit; }
[data-variant=journal] .article-after a { display:flex; }
[data-variant=journal] .side-return a { width:100%; justify-content:space-between; }
[data-variant=journal] .desktop-nav a { --line-rest:0; --motion-line:#6b9cac; }
[data-variant=journal] .desktop-nav a:nth-child(2) { --motion-line:#bf6d89; }
[data-variant=journal] .desktop-nav a:nth-child(3) { --motion-line:#91898f; }
[data-variant=journal] .desktop-nav a:nth-child(4) { --motion-line:#b7a04d; }
[data-variant=journal] .desktop-nav a[aria-current] .motion-label::after {
  width:18px; height:2px; background:var(--journal-pink); transform:scaleX(1); transform-origin:left;
}
[data-variant=journal] .desktop-nav a[aria-current] .motion-label { padding-bottom:0; }
[data-variant=journal] .mobile-nav a.motion-link { display:flex; justify-content:space-between; min-height:52px; }

/* A single arrow extends toward its destination, staying visible throughout. */
[data-variant=journal] .motion-icon {
  --arrow-rotation:0deg;
  display:inline-block; position:relative; flex:0 0 auto; overflow:hidden;
  width:24px; height:24px; line-height:1; vertical-align:middle;
  border:0; border-radius:0; background:none; transform:none;
}
[data-variant=journal] .motion-icon[data-direction=diagonal] { --arrow-rotation:-45deg; }
[data-variant=journal] .motion-icon[data-direction=up] {
  --arrow-rotation:-90deg;
}
[data-variant=journal] .motion-icon[data-direction=down] {
  --arrow-rotation:90deg;
}
[data-variant=journal] .motion-icon svg {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(var(--arrow-rotation)); pointer-events:none;
}
[data-variant=journal] .motion-icon .arrow-shaft { transform:scaleX(1); transform-origin:4px 12px; }
[data-variant=journal] .motion-icon .arrow-head { transform:translateX(0); }
[data-variant=journal] .motion-icon path { transition:transform 420ms var(--motion-ease); }
[data-variant=journal] .desktop-nav .motion-icon { width:18px; height:18px; }
[data-variant=journal] .desktop-nav a.motion-link { gap:6px; }
[data-variant=journal] :is(.breadcrumb,.article-byline,.article-source,.footer-bottom) .motion-icon { width:19px; height:19px; }
[data-variant=journal] .return-list>.motion-label { font-size:inherit; }

/* Card color belongs to the frame; all titles retain a strong reading contrast. */
[data-variant=journal] .mag-card { --card-accent:#77b7c8; }
[data-variant=journal] .mag-card:nth-child(4n+2) { --card-accent:#bf6d89; }
[data-variant=journal] .mag-card:nth-child(4n+3) { --card-accent:#6ea9bc; }
[data-variant=journal] .mag-card:nth-child(4n) { --card-accent:#9a9397; }
[data-variant=journal] .mag-card:nth-child(4n+1):not(.lead-story) { --card-accent:#bca144; }
[data-variant=journal] .mag-link { --motion-line:var(--card-accent); }
[data-variant=journal] .mag-image::after {
  content:''; position:absolute; inset:auto 0 0; height:2px; z-index:2;
  background:var(--card-accent); transform:scaleX(0); transform-origin:right;
  transition:transform 650ms var(--motion-ease); pointer-events:none;
}
[data-variant=journal] .mag-image img { transition:transform 900ms var(--motion-ease); }
[data-variant=journal] .mag-copy h3 { transition:color 350ms var(--motion-ease); text-decoration:none; }
[data-variant=journal] .mag-read { transition:color 350ms; }
[data-variant=journal] .mag-read>.motion-icon { color:inherit; }
[data-variant=journal] .mag-read>.motion-label { --line-rest:.2; font-weight:400; }

/* Search, filters and page controls share an ink line and a gentle tint. */
[data-variant=journal] .category-nav button { transition:color 300ms; }
[data-variant=journal] .category-nav button,
[data-variant=journal] .category-nav button:hover:not([aria-pressed=true]) { background:none; box-shadow:none; }
[data-variant=journal] .category-nav button::before {
  content:''; position:absolute; inset:auto 0 0; height:1px;
  background:#a66d85; transform:scaleX(0); transform-origin:right;
  transition:transform var(--motion-speed) var(--motion-ease);
}
[data-variant=journal] .category-nav button[aria-pressed=true] { box-shadow:none; }
[data-variant=journal] .category-nav button[aria-pressed=true]::before { height:2px; background:var(--ink); transform:scaleX(1); }
[data-variant=journal] .category-nav button[aria-pressed=true]::after { display:none; }
[data-variant=journal] .search-form { transition:border-color 350ms,background-color 350ms; }
[data-variant=journal] .search-form button { transition:background-color 350ms,color 350ms; color:#69485c; }
[data-variant=journal] .pager a { position:relative; transition:color 350ms,background-color 350ms; }
[data-variant=journal] .pager-numbers a:hover:not([aria-current]) { background:transparent; }
[data-variant=journal] .pager a::after {
  content:''; position:absolute; inset:auto 0 3px; height:1px; background:#a46b81;
  transform:scaleX(0); transform-origin:right; transition:transform var(--motion-speed) var(--motion-ease);
}
[data-variant=journal] .pager-numbers a::after { inset:auto 12px 8px; }
[data-variant=journal] .pager-numbers a[aria-current]::after { display:none; }
[data-variant=journal] .return-list { --line-rest:0; transition:background-color 400ms,color 400ms; }
[data-variant=journal] .older-story { transition:border-color 400ms,color 400ms; }
[data-variant=journal] .older-story>span:last-child { transition:color 400ms; }

/* Article links stay identifiable before interaction. */
[data-variant=journal] .article-body p a.motion-link { display:inline; color:#75485d; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
[data-variant=journal] .article-body p a.motion-link>.motion-label { display:inline; }
[data-variant=journal] .article-body p a.motion-link>.motion-label::after { display:none; }
[data-variant=journal] .article-body p a.motion-link .motion-icon { width:17px; height:17px; margin-left:4px; vertical-align:-3px; }
[data-variant=journal] .toc a.motion-link { --line-rest:0; min-height:36px; }
[data-variant=journal] .toc a.is-active { --line-rest:1; color:#75485d; }
[data-variant=journal] .journal-contents>summary { transition:background-color 350ms,color 350ms; }
[data-variant=journal] .copy-code,
[data-variant=journal] .copy-code:hover { color:#644452; background:transparent; border-color:#b99daa; transition:background-color 350ms,color 350ms,border-color 350ms; }
[data-variant=journal] :is(.brand,.footer-brand) { transition:color 400ms; }

/* Keyboard gets the same intentional feedback, without image movement. */
[data-variant=journal] :is(a,button,input,summary):focus-visible { outline:2px solid #8a526d; outline-offset:5px; }
[data-variant=journal] .motion-link:focus-visible .motion-label::after,
[data-variant=journal] .mag-link:focus-visible .motion-label::after,
[data-variant=journal] .mag-link:focus-visible .mag-image::after,
[data-variant=journal] .category-nav button:focus-visible::before,
[data-variant=journal] .pager a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
[data-variant=journal] :is(.motion-link,.mag-link):focus-visible { color:var(--motion-ink); }
[data-variant=journal] :is(.motion-link,.mag-link):focus-visible .arrow-shaft { transform:scaleX(1.23077); }
[data-variant=journal] :is(.motion-link,.mag-link):focus-visible .arrow-head { transform:translateX(3px); }
[data-variant=journal] .copy-code:focus-visible { color:#fff; background:#654553; border-color:#654553; }

/* Hover only runs on a pointer that can hover. No cursor-following work is needed. */
@media (hover:hover) and (pointer:fine) {
  [data-variant=journal] .motion-link:hover { color:var(--motion-ink); }
  [data-variant=journal] .motion-link:hover .motion-label::after,
  [data-variant=journal] .mag-link:hover .motion-label::after,
  [data-variant=journal] .mag-link:hover .mag-image::after,
  [data-variant=journal] .category-nav button:hover::before,
  [data-variant=journal] .pager a:hover::after { transform:scaleX(1); transform-origin:left; }
  [data-variant=journal] :is(.motion-link,.mag-link):hover .arrow-shaft { transform:scaleX(1.23077); }
  [data-variant=journal] :is(.motion-link,.mag-link):hover .arrow-head { transform:translateX(3px); }
  [data-variant=journal] .mag-link:hover .mag-image img { transform:scale(1.025); }
  [data-variant=journal] .mag-link:hover .mag-copy h3 { color:var(--motion-ink); }
  [data-variant=journal] .mag-link:hover .mag-read { color:var(--motion-ink); }
  [data-variant=journal] .category-nav button:hover:not([aria-pressed=true]) { color:var(--motion-ink); }
  [data-variant=journal] .search-form:hover { border-color:#bdcfd1; }
  [data-variant=journal] .search-form button:hover { background:#eddae2; color:#563a4b; }
  [data-variant=journal] .pager-numbers a:hover:not([aria-current]) { background:#f0e2e8; }
  [data-variant=journal] .pager a:hover { color:#75485d; }
  [data-variant=journal] .return-list:hover { background:#e9c8d4; }
  [data-variant=journal] .older-story:hover { border-color:#ad6a84; }
  [data-variant=journal] .older-story:hover>span:last-child { color:var(--motion-ink); }
  [data-variant=journal] .article-body p a.motion-link:hover { color:#513044; text-decoration-color:#aa6b83; }
  [data-variant=journal] .journal-contents>summary:hover { background:#eddae2; color:#684557; }
  [data-variant=journal] .copy-code:hover { background:#654553; color:#fff; border-color:#654553; }
  [data-variant=journal] :is(.brand,.footer-brand):hover { color:#75485d; }
}

/* Immediate press feedback on touch, with readable links in their resting state. */
[data-variant=journal] :is(.motion-link,.mag-link,.older-story):active { color:#513044; }
[data-variant=journal] .mag-link:active .mag-image::after { transform:scaleX(1); transform-origin:left; }
[data-variant=journal] :is(.return-list,.pager a,.search-form button):active { background:#e4bece; }
[data-variant=journal] .copy-code:active { color:#fff; background:#513044; }
@media (prefers-reduced-motion:reduce) {
  [data-variant=journal] .motion-icon path { transition:none; transform:none!important; }
  [data-variant=journal] .mag-link:is(:hover,:focus-visible) .mag-image img { transform:none; }
}

[data-variant=journal] .pager-numbers a[aria-current]:is(:hover,:focus-visible,:active) { color:var(--ink); background:var(--journal-pink); }