/* Time Frame: original visual treatment inspired by blog card layouts. */
:root {
  --ink: #293e4b; --muted: #5b6d7c; --green: #216f65; --line: #dfeae9;
  --paper: #f6fbfa; --surface: #fff; --soft: #e7f5ee; --accent: #93603c;
  --shadow: 0 12px 36px #4b8e9210;
  --hero-bg: radial-gradient(ellipse at 12% 15%,#dcf5e7,transparent 60%),radial-gradient(ellipse at 92% 12%,#e8def8,transparent 55%),radial-gradient(ellipse at 60% 110%,#ffedda,transparent 58%),#e8f4fc;
  --hero-ink: #29434f; --hero-muted: #4e6674; --hero-highlight: #216f65;
  --hero-button: #236f65; --hero-button-ink: #fff; --hero-dot: #278b76;
  --orbit-jade: #75b9a6; --orbit-lilac: #a593cc; --orbit-sky: #87acd0;
  --orb-light: #fcffed; --orb-mid: #b0decf; --orb-shade: #85a6cd;
  --hero-star: #9575b5; --hero-texture: #597b9830;
  --panel-jade: #eef9f2; --panel-cyan: #edf8fb; --panel-violet: #f5effb;
  --panel-blue: #eef4fc; --panel-amber: #fff5e6; --panel-rose: #fff0f3;
}
:root[data-theme="dark"] {
  --ink: #e4ebf5; --muted: #a7b5c8; --green: #7adac0; --line: #303e51;
  --paper: #101722; --surface: #192333; --soft: #223a36; --accent: #e3b27b;
  --shadow: 0 12px 36px #0003;
  --hero-bg: radial-gradient(ellipse at 78% 30%,#275260,transparent 48%),radial-gradient(ellipse at 60% 100%,#382e63,transparent 58%),#102333;
  --hero-ink: #f3f6ff; --hero-muted: #b5c8da; --hero-highlight: #a0e8d5;
  --hero-button: #acf1d8; --hero-button-ink: #152a38; --hero-dot: #98eac7;
  --orbit-jade: #9aebdb99; --orbit-lilac: #b6a5ff99; --orbit-sky: #89c7ffbb;
  --orb-light: #ecffe7; --orb-mid: #69bbbc; --orb-shade: #242849;
  --hero-star: #baedde; --hero-texture: #d0e4fa30;
  --panel-jade: #213831; --panel-cyan: #22343e; --panel-violet: #302c43;
  --panel-blue: #263349; --panel-amber: #3b3429; --panel-rose: #3c2c36;
}
body { background-image: radial-gradient(ellipse at 0% 0%,#73cba013,transparent 40%),radial-gradient(ellipse at 100% 30%,#a98adb12,transparent 45%),radial-gradient(ellipse at 35% 100%,#ffc59110,transparent 50%); }
.site-header { background: var(--surface); background: color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter: blur(18px); }
.header-inner { padding-top: 16px; padding-bottom: 16px; }
.brand img { box-shadow: 0 5px 15px #216d5420; border-radius: 11px; }
#primary-nav a { position: relative; }
#primary-nav a[aria-current="page"]::after { content: ''; position: absolute; height: 3px; width: 16px; border-radius: 4px; bottom: 0; left: 0; background: var(--green); }
button, .button, .icon-button { border-radius: 10px; }
.spectrum-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; margin: 28px 0 20px; padding: 48px; gap: 20px; min-height: 390px; color: var(--hero-ink); background: var(--hero-bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.spectrum-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--hero-texture) .7px,transparent .7px); background-size: 24px 24px; mask-image: linear-gradient(90deg,transparent,#000); }
.spectrum-hero .eyebrow { color: var(--hero-muted); font-size: 9px; letter-spacing: 2.3px; }
.spectrum-hero .dot { background: var(--hero-dot); box-shadow: 0 0 12px var(--hero-dot); }
.spectrum-hero h1 { font-size: clamp(29px,3vw,41px); line-height: 1.5; letter-spacing: 0; margin-top: 18px; }
.spectrum-hero h1 em { font-style: normal; color: var(--hero-highlight); }
.spectrum-hero .hero-description { color: var(--hero-muted); font-size: 13px; }
.spectrum-hero .hero-actions { gap: 25px; margin-top: 22px; }
.spectrum-hero .button { color: var(--hero-button-ink); background: var(--hero-button); border: 0; }
.spectrum-hero .text-link { color: var(--hero-ink); font-size: 12px; }
.spectrum-hero .hero-note { margin-top: 25px; color: var(--hero-muted); }
.spectrum-hero .hero-note strong { color: var(--hero-ink); }
.spectrum-hero .hero-visual { height: 300px; overflow: visible; background: none; border-radius: 0; }
.spectrum-hero .visual-label { color: var(--hero-muted); font-size: 8px; top: 3px; left: 25px; }
.spectrum-hero .visual-footer { color: var(--hero-muted); bottom: 0; }
.spectrum-ring { position: absolute; left: 50%; top: 50%; width: 235px; height: 235px; margin: -117px; border: 1px solid var(--orbit-jade); border-radius: 50%; transform: rotate(-28deg) scaleX(.53); box-shadow: 0 0 14px #78e7d32b,inset 0 0 14px #78e7d32b; }
.ring-one { border-width: 2px; }
.ring-two { transform: rotate(35deg) scaleX(.53); border-color: var(--orbit-lilac); width: 270px; height: 270px; margin: -135px; }
.ring-three { transform: rotate(90deg) scaleX(.53); border-color: var(--orbit-sky); width: 300px; height: 300px; margin: -150px; }
.spectrum-hero .hero-visual::before { content: ''; position: absolute; width: 140px; height: 140px; top: 50%; left: 50%; margin: -70px; border-radius: 50%; background: radial-gradient(circle at 32% 28%,var(--orb-light),var(--orb-mid) 28%,var(--orb-shade) 82%); box-shadow: inset -15px -15px 25px #6886ac20,0 0 65px #68d9df30; }
.spectrum-star { position: absolute; color: var(--hero-star); }
.star-one { top: 45px; right: 50px; font-size: 30px; }
.star-two { bottom: 54px; left: 40px; font-size: 22px; }
.tone-cyan { --tone: #176478; --tone-soft: #e3f3f7; --cover-a: #dff4ef; --cover-b: #d8eafa; --tone-panel: var(--panel-cyan); }
.tone-violet { --tone: #7356b1; --tone-soft: #f0eafa; --cover-a: #ece3fa; --cover-b: #e1ebfc; --tone-panel: var(--panel-violet); }
.tone-amber { --tone: #875321; --tone-soft: #fbf0df; --cover-a: #ffebd4; --cover-b: #f9e5e7; --tone-panel: var(--panel-amber); }
.tone-blue { --tone: #305889; --tone-soft: #e9f0fb; --cover-a: #dcebf9; --cover-b: #e4e4fb; --tone-panel: var(--panel-blue); }
.tone-rose { --tone: #934464; --tone-soft: #faeaf0; --cover-a: #fae4ee; --cover-b: #ffe8dc; --tone-panel: var(--panel-rose); }
.tone-jade { --tone: #237765; --tone-soft: #e7f3ee; --cover-a: #dff3e4; --cover-b: #dbf0ec; --tone-panel: var(--panel-jade); }
.topic-spotlights { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 23px 0 36px; }
.spotlight { display: flex; align-items: center; gap: 13px; padding: 17px; background: linear-gradient(130deg,var(--surface),var(--tone-panel)); border: 1px solid var(--line); border-radius: 14px; transition: transform .18s,box-shadow .18s; }
.spotlight:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.spotlight-symbol { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--tone-soft); color: var(--tone); font-size: 23px; }
.spotlight strong { display: block; font-size: 13px; }
.spotlight small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.spotlight-arrow { margin-left: auto; color: var(--muted); }
.heading-dot { color: var(--green); margin-left: 3px; }
.featured-section { margin-bottom: 35px; }
.featured-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.featured-card { display: grid; grid-template-columns: 42% minmax(0,1fr); overflow: hidden; min-height: 235px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); transition: border-color .2s; }
.featured-card:hover { border-color: var(--green); color: var(--ink); }
.article-cover { position: relative; isolation: isolate; overflow: hidden; height: 185px; background: linear-gradient(125deg,var(--cover-a),var(--cover-b)); }
.cover-art { position: absolute; inset: 0; overflow: hidden; }
.cover-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%,#fffb .6px,transparent 1px); background-size: 23px 23px; opacity: .3; }
.cover-orbit { position: absolute; width: 185px; height: 185px; border: 1px solid var(--tone); opacity: .5; border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%,-50%) rotate(-32deg) scaleY(.45); box-shadow: 0 0 20px #fff1; }
.orbit-two { transform: translate(-50%,-50%) rotate(43deg) scaleY(.45); }
.cover-spark { position: absolute; width: 53px; height: 53px; left: 50%; top: 45%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#bce4e0 20%,#8dbbc250,#ffffff00 80%); box-shadow: 0 0 25px #dff9ff44; }
.cover-caption { position: absolute; bottom: 15px; left: 20px; right: 20px; font-size: 8px; letter-spacing: 1.6px; color: var(--tone); }
.cover-figure { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; padding: 16px; background: #fff; }
.has-figure .cover-art { visibility: hidden; }
.featured-card .article-cover { height: 100%; min-height: 235px; }
.featured-copy { padding: 23px; display: flex; flex-direction: column; min-width: 0; background: linear-gradient(130deg,var(--surface),var(--panel-jade)); }
.featured-card:nth-child(even) .featured-copy { background: linear-gradient(130deg,var(--surface),var(--panel-violet)); }
.featured-copy h3 { font-size: 18px; line-height: 1.6; margin: 13px 0 10px; overflow-wrap: anywhere; }
.featured-copy p { font-size: 11px; color: var(--muted); line-height: 1.9; margin: 0 0 16px; }
.featured-copy .category-label { align-self: flex-start; }
.featured-bottom { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; font-size: 10px; color: var(--muted); }
.featured-bottom>span { color: var(--green); }
.journal { grid-template-columns: 230px minmax(0,1fr); gap: 30px; border: 0; padding-top: 10px; }
.topic-sidebar { padding: 0; border: 0; }
.journal-profile { background: linear-gradient(155deg,var(--surface) 30%,var(--panel-cyan),var(--panel-violet)); border: 1px solid var(--line); border-radius: 16px; padding: 25px 18px; text-align: center; margin-bottom: 26px; box-shadow: var(--shadow); }
.profile-mark { display: grid; place-items: center; position: relative; margin: 0 auto 13px; width: 65px; height: 65px; font-size: 23px; font-weight: 600; background: linear-gradient(140deg,#316f6b,#5979a4); color: #fff; border-radius: 22px; transform: rotate(-5deg); }
.profile-mark>span { position: absolute; right: -5px; bottom: -5px; color: #ffe2a9; font-size: 23px; }
.journal-profile>strong { font-size: 18px; }
.journal-profile p { font-size: 11px; color: var(--muted); }
.journal-profile>div { display: flex; justify-content: space-evenly; margin: 18px 0; font-size: 10px; color: var(--muted); }
.journal-profile b { display: block; font-size: 20px; font-weight: 600; color: var(--ink); }
.journal-profile .button { font-size: 11px; width: 100%; padding: 10px; }
.topic-sidebar>h2,.topic-sidebar>.eyebrow { padding-left: 14px; }
.topic-sidebar nav { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.topic-link { margin: 0; padding: 11px; }
.topic-sidebar .sidebar-note { margin: 20px 12px; border-top: 0; }
.journal-content>.section-heading { margin-top: 2px; }
.search { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.search-input { background: var(--paper); }
.cards { gap: 20px; }
.illustrated-card { padding: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); }
.illustrated-card .category-label { background: var(--tone-soft); color: var(--tone); }
.illustrated-card .card-content { background: linear-gradient(135deg,var(--surface) 45%,var(--tone-panel)); }
.card-cover-link { display: block; }
.card-content { display: flex; flex: 1; flex-direction: column; padding: 23px; min-width: 0; }
.card-content h3 { font-size: 18px; margin-top: 15px; }
.card-content p { font-size: 12px; }
.reading { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 35px 40px; box-shadow: var(--shadow); }
.article-heading { border-bottom: 1px solid var(--line); margin-bottom: 30px; padding-bottom: 28px; }
.article-heading h1 { font-size: 32px; }
.prose h2 { padding-left: 15px; border-left: 4px solid var(--green); }
.prose h2:nth-of-type(2n) { border-left-color: #8d78b4; }
.prose h2:nth-of-type(3n) { border-left-color: #779fc0; }
.prose blockquote { background: linear-gradient(110deg,var(--soft),var(--surface)); }
.reading-aside { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--surface); box-shadow: var(--shadow); margin-top: 0; }
.comment-form { border-radius: 14px; background: linear-gradient(135deg,var(--panel-jade),var(--panel-cyan)); }
.comment-child { background: var(--panel-violet); }
.comment-meta .badge { background: var(--panel-amber); color: var(--accent); }
.comments-section .eyebrow { color: var(--accent); }
.panel,.metrics>div,.activity-strip a { border-radius: 14px; box-shadow: var(--shadow); }
.metrics>div { position: relative; overflow: hidden; }
.metrics>div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #518ca4; }
.metrics>div:nth-child(2)::before { background: #b28b57; }
.metrics>div:nth-child(3)::before { background: #559b7c; }
.metrics>div:nth-child(4)::before { background: #9a73b8; }
.metrics>div.has-error::before { background: #b95a46; }
.metrics>div:nth-child(1) { background: linear-gradient(135deg,var(--surface),var(--panel-cyan)); }
.metrics>div:nth-child(2) { background: linear-gradient(135deg,var(--surface),var(--panel-amber)); }
.metrics>div:nth-child(3) { background: linear-gradient(135deg,var(--surface),var(--panel-jade)); }
.metrics>div:nth-child(4) { background: linear-gradient(135deg,var(--surface),var(--panel-violet)); }
.metrics>div.has-error { background: linear-gradient(135deg,var(--surface),var(--panel-rose)); }
.activity-strip a:first-child { background: linear-gradient(135deg,var(--surface),var(--panel-blue)); }
.activity-strip a:last-child { background: linear-gradient(135deg,var(--surface),var(--panel-rose)); }
.console-sidebar { background: var(--surface); padding: 23px 18px; border: 1px solid var(--line); border-radius: 16px; align-self: start; position: sticky; top: 100px; }
.console-sidebar nav a { margin: 0; padding: 9px; }
.console-sidebar .eyebrow { font-size: 8px; }
.console-sidebar h2 { font-size: 17px; }
.mode-banner { border-radius: 12px; }
.table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb,var(--paper) 65%,transparent); }
.site-footer { border: 0; padding-top: 35px; padding-bottom: 35px; }
.journal-controls { display: flex; align-items: center; gap: 16px; }
.layout-options { display: flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface); gap: 3px; }
.layout-options button { padding: 5px 9px; border-radius: 7px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1.3; }
.layout-options button[aria-pressed="true"] { color: var(--green); background: var(--soft); }
.illustrated-card .card-content>p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
:root[data-article-layout="list"] #article-cards { grid-template-columns: minmax(0,1fr); }
:root[data-article-layout="list"] #article-cards .illustrated-card { display: grid; grid-template-columns: 220px minmax(0,1fr); }
:root[data-article-layout="list"] #article-cards .article-cover { height: 100%; min-height: 190px; }
:root[data-article-layout="list"] #article-cards .card-content h3 { margin: 12px 0 10px; }
:root[data-article-layout="list"] #article-cards .card-content>p { -webkit-line-clamp: 2; margin-bottom: 15px; }
.related-section { margin-bottom: 45px; }
.related-jump { display: inline-block; margin-left: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.related-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s,transform .2s; }
.related-card:hover { border-color: var(--green); transform: translateY(-3px); color: var(--ink); }
.related-card .article-cover { height: 165px; }
.related-copy { padding: 21px; background: linear-gradient(135deg,var(--surface),var(--tone-panel)); }
.related-copy>span { font-size: 10px; color: var(--muted); }
.related-copy h3 { font-size: 17px; line-height: 1.7; margin: 11px 0; }
.related-copy p { font-size: 12px; color: var(--muted); margin-bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.focus-exit { position: fixed; right: 25px; top: 18px; z-index: 35; box-shadow: var(--shadow); font-size: 12px; }
body.focus-reading .site-header,body.focus-reading .site-footer,body.focus-reading .reading-aside,body.focus-reading .related-section { display: none; }
body.focus-reading .reading-layout { display: block; max-width: 910px; margin: auto; }
body.focus-reading .reading { padding-top: 40px; }
@media(max-width:1100px) {
  .spectrum-hero { padding: 35px; }
  .topic-spotlights { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-card { grid-template-columns: minmax(0,1fr); }
  .featured-card .article-cover { height: 175px; min-height: 0; }
  .journal { grid-template-columns: 200px minmax(0,1fr); gap: 22px; }
  .reading { padding: 30px; }
}
@media(max-width:800px) {
  .journal { grid-template-columns: minmax(0,1fr); }
  .journal-profile { display: none; }
  .topic-sidebar nav { padding: 8px; }
  .topic-link { border: 0; }
  .reading { padding: 25px; }
  .console-sidebar { display: block; position: static; padding: 8px; border-radius: 12px; }
  .console-sidebar>.eyebrow,.console-sidebar>h2,.console-sidebar>.sidebar-note { display: none; }
  .console-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 3px; font-size: 11px; }
  .console-sidebar nav a { padding: 7px 10px; }
  .related-grid { grid-template-columns: minmax(0,1fr); }
  .related-card { display: grid; grid-template-columns: 32% minmax(0,1fr); }
  .related-card .article-cover { height: 100%; min-height: 180px; }
}
@media(max-width:600px) {
  .spectrum-hero { grid-template-columns: minmax(0,1fr); margin-top: 18px; padding: 24px; gap: 18px; border-radius: 18px; }
  .spectrum-hero h1 { font-size: 28px; }
  .spectrum-hero .hero-visual { height: 135px; overflow: hidden; }
  .spectrum-ring { width: 130px; height: 130px; margin: -65px; }
  .ring-two { width: 150px; height: 150px; margin: -75px; }
  .ring-three { width: 160px; height: 160px; margin: -80px; }
  .spectrum-hero .hero-visual::before { width: 90px; height: 90px; margin: -45px; }
  .spectrum-hero .visual-label { top: 0; left: 0; font-size: 7px; }
  .spectrum-hero .visual-footer { left: 0; right: 0; bottom: 0; }
  .spectrum-star { font-size: 18px; }
  .star-one { right: 5px; top: 25px; }
  .star-two { left: 5px; bottom: 25px; }
  .topic-spotlights { gap: 10px; margin-top: 16px; }
  .spotlight { padding: 12px; gap: 8px; }
  .spotlight-symbol { width: 30px; height: 30px; font-size: 20px; border-radius: 9px; }
  .spotlight strong { font-size: 11px; }
  .spotlight small { font-size: 8px; }
  .spotlight-arrow { display: none; }
  .featured-grid { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .featured-card { grid-template-columns: 35% minmax(0,1fr); min-height: 195px; }
  .featured-card .article-cover { height: 100%; }
  .featured-copy { padding: 17px; }
  .featured-copy h3 { font-size: 16px; }
  .featured-copy p { display: none; }
  .featured-bottom { font-size: 9px; flex-wrap: wrap; }
  .cover-orbit { width: 130px; height: 130px; }
  .cover-figure { padding: 8px; }
  .cover-caption { left: 12px; font-size: 7px; }
  .search { padding: 10px; }
  .card-content { padding: 21px; }
  .reading { padding: 22px 18px; border-radius: 14px; }
  .article-heading h1 { font-size: 25px; }
  .reading-layout { padding-top: 20px; }
  .article-cover { height: 180px; }
  .console-layout { gap: 20px; }
  .spectrum-hero .hero-note { margin-top: 18px; }
  .journal-heading { flex-wrap: wrap; }
  .journal-controls { gap: 10px; margin-left: auto; }
  .journal-controls .result-count { margin-top: 0; }
  :root[data-article-layout="list"] #article-cards .illustrated-card { grid-template-columns: 105px minmax(0,1fr); }
  :root[data-article-layout="list"] #article-cards .card-content { padding: 16px; }
  :root[data-article-layout="list"] #article-cards .card-content h3 { font-size: 16px; }
  :root[data-article-layout="list"] #article-cards .card-meta { flex-wrap: wrap; gap: 5px; }
  :root[data-article-layout="list"] #article-cards .card-content>p { display: none; }
  :root[data-article-layout="list"] #article-cards .card-bottom { flex-wrap: wrap; gap: 5px; }
  .focus-exit { right: 15px; top: 10px; padding: 7px 12px; }
  .related-copy { padding: 17px; }
  .related-copy h3 { font-size: 16px; }
  .related-jump { display: block; margin: 12px 0 0; }
}
@media(prefers-reduced-motion:reduce) { .spotlight,.related-card { transition: none; } .spotlight:hover,.related-card:hover { transform: none; } }