/* FEACCO Journal: shared editorial layout. Components retain native controls. */
:root { --paper:#f4f5f3; --ink:#16251f; --muted:#5a655e; --blue:#1b47b8; --line:#d2d9d0; --serif:Fraunces,Georgia,serif; --sans:Inter,Arial,sans-serif; --mono:'IBM Plex Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.7 var(--sans); }
button,input,audio,video { font:inherit; }
a { color:inherit; text-underline-offset:4px; }
button { cursor:pointer; }
[hidden] { display:none!important; }
:where(a,button,input,summary,video):focus-visible { outline:3px solid #3f6ddd; outline-offset:5px; }
.skip-link { position:absolute; top:-90px; left:20px; padding:12px 20px; background:var(--ink); color:white; z-index:100; }
.skip-link:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.journal-wrap { max-width:1320px; margin:auto; padding:0 42px; }
.eyebrow { font:500 10px/1.6 var(--mono); letter-spacing:.12em; color:var(--blue); text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.045em; line-height:1.08; }
h1 { font-size:clamp(44px,5.6vw,78px); }
h2 { font-size:clamp(30px,3.2vw,44px); }
em { font-style:normal; color:var(--blue); }
.text-link { color:var(--blue); font-size:13px; font-weight:600; text-decoration:none; border-bottom:1px solid #9aadd6; padding-bottom:5px; }
.button { display:inline-flex; gap:24px; align-items:center; justify-content:space-between; padding:16px 22px; min-height:50px; font-size:13px; font-weight:600; text-decoration:none; border:0; }
.button-primary { background:var(--blue); color:white; }
.button-primary:hover { background:#113187; }

/* Journal landing */
.journal-intro { padding:66px 0 40px; }
.journal-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; }
.journal-heading h1 { margin:14px 0 0; }
.journal-heading > p { max-width:280px; color:var(--muted); font-size:14px; margin-bottom:7px; }
.journal-feature { display:grid; grid-template-columns:.8fr 1.35fr; align-items:center; background:#e8edde; border:1px solid #d5ddcd; padding:42px; gap:48px; }
.feature-copy h2 { font-size:clamp(34px,3.8vw,52px); margin:22px 0; }
.feature-copy > p:not(.eyebrow) { max-width:310px; font-size:14px; color:#58644f; }
.feature-rule { display:flex; gap:14px; align-items:center; margin:25px 0 28px; }
.feature-rule > span { font:500 42px var(--serif); color:#95a480; }
.feature-rule p { margin:0; line-height:1.5; font-size:13px; }
.media-credit { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; color:#667061; font-size:10px; line-height:1.7; margin:13px 0 0; }
.section-topline { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.section-topline h2 { margin:12px 0 0; }
.stories-section { padding:80px 0 64px; }
.journal-filters { display:flex; flex-wrap:wrap; align-items:center; gap:14px; border-block:1px solid var(--line); padding:20px 0; margin:30px 0 32px; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.filter-buttons button { background:transparent; color:#55614e; border:1px solid #d0d8c8; padding:8px 12px; border-radius:3px; font-size:11px; min-height:40px; }
.filter-buttons button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:white; }
.story-search { display:flex; align-items:center; gap:12px; margin-left:auto; font-size:11px; color:var(--muted); }
.story-search input { width:170px; background:transparent; border:0; border-bottom:1px solid #939f8b; padding:9px 5px; border-radius:0; font-size:12px; }
[data-results] { font-size:11px; color:var(--muted); min-width:52px; }
.stories-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.stories-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.story-card { min-width:0; display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-bottom:22px; }
.story-art { display:block; overflow:hidden; aspect-ratio:680/420; }
.story-art svg { display:block; width:100%; height:100%; transition:transform .4s ease; }
.story-art:hover svg { transform:scale(1.03); }
.story-meta { display:flex; justify-content:space-between; gap:15px; margin:20px 0 13px; color:#596451; font:500 9px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.story-card h3 { font:500 clamp(24px,2.2vw,30px)/1.18 var(--serif); letter-spacing:-.025em; margin:0 0 14px; }
.story-card h3 a { text-decoration:none; }
.story-card h3 a:hover { color:var(--blue); }
.story-card > p { color:var(--muted); font-size:13px; line-height:1.75; margin:0 0 25px; }
.story-link { display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; color:var(--blue); text-decoration:none; margin-top:auto; }
.empty-search { padding:35px; background:#e8edde; }
.learning-bridge { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; background:#e4e9f7; padding:45px; margin-bottom:20px; }
.learning-bridge p { max-width:570px; color:#566379; font-size:14px; }
.learning-bridge > div:last-child { display:flex; flex-direction:column; align-items:start; gap:24px; }
.learning-bridge h2 { margin:18px 0; }

/* Native video, captions, transcript and audio */
.learning-player { position:relative; }
.player-picture { position:relative; aspect-ratio:16/9; background:#1739a0; overflow:hidden; }
.player-picture video { width:100%; height:100%; display:block; object-fit:contain; }
.film-play { position:absolute; inset:0 0 42px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:0; background:linear-gradient(transparent,rgba(0,16,53,.12)); color:white; font-size:11px; }
.film-play > span:last-child { background:#092047d9; padding:6px 12px; border-radius:2px; }
.play-symbol { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:#f6f7ee; color:var(--blue); box-shadow:0 5px 35px #0e1e5b30; padding-left:3px; font-size:20px; transition:transform .2s ease; }
.film-play:hover .play-symbol { transform:scale(1.08); }
[data-media-error] { padding:14px; color:#7c3626; background:#fff0dc; font-size:13px; }
.transcript,.listen-only { border-bottom:1px solid #cbd3c4; font-size:12px; }
summary { cursor:pointer; padding:15px 0; color:#44523a; }
.transcript p { padding:4px 0 18px; line-height:1.9; color:#52604b; }
.listen-only audio { width:100%; display:block; margin:3px 0 15px; }
.listen-only p { font-size:12px; color:var(--muted); }

/* Article reading layout */
.reading-track { position:fixed; height:3px; bottom:0; inset-inline:0; background:#dce3d6; z-index:70; }
.reading-track span { display:block; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; }
.breadcrumb { display:inline-block; margin-top:35px; color:#5d6955; text-decoration:none; font-size:12px; }
.article-header { padding:38px 0; max-width:920px; }
.article-header h1 { margin:17px 0 23px; font-size:clamp(42px,5.4vw,72px); }
.article-dek { max-width:760px; font-size:19px; line-height:1.65; color:var(--muted); }
.article-byline { display:flex; flex-wrap:wrap; gap:12px 24px; color:#687260; font-size:11px; }
.article-cover { display:grid; grid-template-columns:1.2fr 1fr; background:#e8edde; align-items:center; }
.article-cover > svg { width:100%; display:block; }
.article-cover > div { padding:35px 45px; }
.article-cover > div > p { font:500 clamp(23px,2.4vw,33px)/1.35 var(--serif); letter-spacing:-.02em; margin:22px 0 0; }
.article-layout { display:grid; grid-template-columns:230px minmax(0,780px); justify-content:space-between; gap:55px; margin:60px 0; }
.article-toc { position:sticky; top:150px; align-self:start; }
.article-toc nav { display:flex; flex-direction:column; border-left:1px solid #c8d0c1; padding-left:18px; gap:18px; margin:22px 0 35px; }
.article-toc nav a { color:#58634e; font-size:12px; text-decoration:none; line-height:1.5; }
.article-toc nav a:hover { color:var(--blue); }
.article-toc > .text-link { display:inline-block; }
.article-main { min-width:0; }
.article-main section[id],#try-it { scroll-margin-top:155px; }
.article-media .section-topline { margin-bottom:25px; align-items:center; }
.article-media .section-topline h2 { font-size:30px; }
.article-media { margin-bottom:52px; }
.prose-section { margin:48px 0; }
.prose-section h2 { font-size:33px; margin:0 0 22px; }
.prose-section p,.prose-section li { font-size:16px; line-height:1.9; color:#3d4a40; }
.prose-section ul { padding-left:23px; }
.prose-section li + li { margin-top:12px; }
.prose-section .source-inline { font-size:10px; color:#63705b; }
.source-inline a { color:#526243; }
.action-sheet { padding:32px; background:#e8edde; border-top:3px solid var(--blue); margin:40px 0; }
.action-sheet h2 { font-size:30px; }
.action-sheet ol { padding-left:20px; color:#44513c; font-size:14px; }
.action-sheet li { padding-left:8px; margin-bottom:12px; }
.action-sheet .button { margin-top:16px; }
.concept-check { padding:32px; border:1px solid var(--line); margin:40px 0; }
.concept-check h2 { font-size:28px; margin:18px 0 26px; }
.quiz-options { display:flex; flex-direction:column; gap:9px; }
.quiz-options button { display:flex; text-align:left; gap:15px; border:1px solid #cbd4c3; padding:16px; background:transparent; color:#435038; line-height:1.6; font-size:13px; }
.quiz-options button > span { color:var(--blue); font:500 12px var(--mono); padding-top:3px; }
.quiz-options button[aria-pressed=true] { border-color:var(--blue); background:#e8eefb; }
.quiz-result { padding:20px; margin:20px 0 0; font-size:14px; background:#e8edde; color:#354a29; }
.article-sources { border-block:1px solid var(--line); font-size:12px; margin-top:30px; overflow-wrap:anywhere; }
.article-sources li { margin-bottom:10px; }
.related-stories { border-top:1px solid var(--line); padding:45px 0 20px; }
.related-stories h2 { margin:18px 0 32px; }

/* Interactive illustrations */
.experiment { padding:30px; background:#e8edde; border:1px solid #cfdbc3; margin:0 0 48px; min-width:0; }
.experiment-heading h2 { font-size:31px; margin:16px 0; }
.experiment-heading p { font-size:13px; color:#54624a; line-height:1.8; }
.experiment-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:25px 0 5px; }
.experiment-inputs label { display:flex; flex-direction:column; gap:9px; font-size:10px; color:#4a5940; }
.experiment-inputs label > span { min-height:30px; }
.experiment-inputs input { width:100%; min-width:0; background:#f7faf3; border:1px solid #bdcbb2; padding:10px; border-radius:2px; font-size:16px; color:#23361a; }
.experiment-inputs input[aria-invalid=true] { border-color:#a34123; }
.input-error { color:#893f24; font-size:12px; min-height:0; margin:10px 0; }
.input-error:empty { display:none; }
.compound-chart { width:100%; display:block; margin-top:25px; }
.chart-legend { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:9px; color:#536448; margin:15px 0 25px; }
.chart-legend [class^=legend]::before { content:''; display:inline-block; width:14px; height:3px; margin:0 6px 3px 0; background:#77826b; }
.chart-legend .legend-nominal::before { background:var(--blue); }
.chart-legend .legend-real::before { background:#517332; }
.experiment-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-block:1px solid #c5cfb9; padding:22px 0; }
.experiment-results small,.cashflow-result small { display:block; color:#536448; font-size:10px; }
.experiment-results strong { display:block; font:500 clamp(21px,2.5vw,31px)/1.4 var(--serif); color:var(--blue); margin-top:7px; overflow-wrap:anywhere; }
.assumption { font-size:10px; line-height:1.9; color:#59664f; margin:20px 0 0; }
.cashflow-bar { display:flex; height:18px; width:100%; background:#d1dac8; margin-top:28px; gap:3px; overflow:hidden; }
.cashflow-bar span:nth-child(1) { background:var(--blue); }
.cashflow-bar span:nth-child(2) { background:#96afdd; }
.cashflow-bar span:nth-child(3) { background:#849d5d; }
.cashflow-result { display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid #c5cfb9; padding-top:18px; }
.cashflow-result strong { display:block; color:var(--blue); font:500 45px/1.3 var(--serif); }
.cashflow-result p { max-width:310px; margin:0; color:#536448; font-size:12px; }
.goal-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:25px 0; }
.goal-choices button { border:1px solid #b6c7a6; background:transparent; padding:14px; font-size:12px; text-align:left; color:#384d29; }
.goal-choices button[aria-pressed=true] { background:var(--blue); color:white; border-color:var(--blue); }
.goal-response h3 { font:500 24px/1.3 var(--serif); }
.goal-response p { font-size:14px; color:#45583a; }
.goal-response .goal-next { border-top:1px solid #c5cfb9; padding-top:18px; font-weight:600; }

@media(max-width:1000px) {
  .journal-wrap { padding:0 28px; }
  .journal-heading { align-items:start; flex-direction:column; gap:25px; }
  .journal-heading > p { max-width:600px; }
  .journal-feature { padding:28px; gap:30px; grid-template-columns:.85fr 1.15fr; }
  .article-layout { grid-template-columns:180px minmax(0,1fr); gap:35px; }
  .article-cover > div { padding:25px; }
  .stories-grid { gap:22px; }
  .learning-bridge { gap:30px; padding:30px; }
}
@media(max-width:760px) {
  .journal-wrap { padding:0 20px; }
  .journal-intro { padding:40px 0 30px; }
  .journal-heading h1 { font-size:clamp(39px,8vw,58px); }
  .journal-feature { grid-template-columns:1fr; padding:24px; gap:28px; }
  .feature-copy h2 br:nth-of-type(1) { display:none; }
  .feature-copy h2 { font-size:39px; }
  .feature-copy > p:not(.eyebrow) { max-width:100%; }
  .feature-rule { display:none; }
  .section-topline { flex-direction:column; align-items:start; gap:20px; }
  .stories-section { padding:50px 0; }
  .stories-grid,.stories-grid.two { grid-template-columns:1fr; gap:36px; }
  .story-card h3 { font-size:30px; }
  .story-card > p { font-size:14px; }
  .story-meta { font-size:10px; }
  .story-search { width:100%; margin:8px 0 0; }
  .story-search input { flex:1; }
  .learning-bridge { grid-template-columns:1fr; gap:20px; }
  .article-header { padding:30px 0; }
  .article-header h1 { font-size:43px; }
  .article-dek { font-size:17px; }
  .article-cover { grid-template-columns:1fr; }
  .article-cover > div > p { font-size:25px; margin-top:15px; }
  .article-layout { display:block; margin-top:35px; }
  .article-toc { position:static; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:36px; }
  .article-toc nav { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:15px 0 20px; }
  .article-toc nav a { font-size:11px; }
  .article-media .section-topline { gap:10px; align-items:start; }
  .experiment,.concept-check,.action-sheet { padding:22px; }
  .experiment-heading h2 { font-size:28px; }
  .experiment-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .experiment-inputs.three { grid-template-columns:1fr; }
  .experiment-inputs.three label > span { min-height:0; }
  .experiment-results { gap:8px; }
  .experiment-results small { font-size:9px; }
  .experiment-results strong { font-size:22px; }
  .cashflow-result { flex-direction:column; align-items:start; gap:12px; }
  .cashflow-result p { max-width:100%; }
  .goal-choices { grid-template-columns:1fr; }
  .goal-choices button { padding:13px; }
  .play-symbol { width:48px; height:48px; font-size:17px; }
  .film-play { gap:8px; }
  .film-play > span:last-child { font-size:10px; }
  .prose-section p,.prose-section li { font-size:15px; }
  .prose-section h2 { font-size:29px; }
}
@media(max-width:380px) {
  .journal-wrap { padding-inline:16px; }
  .journal-feature { padding:18px; }
  .journal-heading h1 { font-size:36px; }
  .feature-copy h2,.article-header h1 { font-size:36px; }
  .experiment { padding:16px; }
  .experiment-results { grid-template-columns:1fr; gap:16px; }
  .article-toc nav { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}
@media print {
  .journal-wrap { max-width:none; padding:0; }
  .article-toc,.reading-track,.learning-player,.listen-only,.related-stories,.concept-check,.breadcrumb { display:none; }
  .article-layout { display:block; }
  .article-cover { grid-template-columns:1fr 1fr; }
  .prose-section { break-inside:avoid; }
  details > * { display:block; }
}