:root {
  --ink: #17164a;
  --paper: #eeeeee;
  --coral: #ff624d;
  --blue: #5966de;
  --mist: #cfd6ff;
  --white: #fbfbff;
  --line: rgba(23, 22, 74, .18);
  --display: "Syne", sans-serif;
  --body: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--body); overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
.grain { position: fixed; inset: 0; opacity: .16; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }

.site-header { height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(24px, 5vw, 78px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 14px; transform: rotate(-10deg); }
.tabs { display: flex; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,.3); }
.tab { border: 0; background: transparent; padding: 9px 17px; border-radius: 100px; cursor: pointer; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; transition: .25s ease; }
.tab:hover { background: rgba(89,102,222,.1); }
.tab.is-active { background: var(--ink); color: var(--white); }

main { min-height: calc(100vh - 150px); }
.panel { min-height: calc(100vh - 150px); padding: clamp(48px, 7vw, 100px) clamp(24px, 7vw, 110px); animation: enter .55s cubic-bezier(.2,.8,.2,1) both; }
.panel[hidden] { display: none; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.eyebrow { margin: 0 0 22px; font: 500 11px var(--mono); letter-spacing: .13em; text-transform: uppercase; }

.hero { position: relative; display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(330px, .85fr); align-items: start; gap: 5vw; overflow: visible; }
.hero h1, .section-heading h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.065em; line-height: .92; margin: 0; font-size: clamp(54px, 7.4vw, 116px); }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.intro { max-width: 590px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; margin: 32px 0; white-space: pre-line; }
.dial-wrap { position: sticky; top: clamp(28px, 7vh, 72px); aspect-ratio: 1; width: min(38vw, 520px); justify-self: center; }
.orbit { position: absolute; border-radius: 50%; inset: 0; border: 1px solid var(--blue); }
.orbit-one { animation: spin 38s linear infinite; }
.orbit-one::before, .orbit-one::after { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(23,22,74,.35); border-radius: 50%; }
.orbit-one::after { inset: 23%; border-style: solid; }
.orbit-one:has(.story-orb:hover), .orbit-one:has(.story-orb:focus-visible) { animation-play-state: paused; }
.story-orb { position: absolute; width: clamp(48px, 5.2vw, 72px); aspect-ratio: 1; padding: 0; overflow: hidden; border: 3px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--ink), 5px 6px 0 rgba(23,22,74,.22); cursor: pointer; transform: translate(-50%, -50%); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; z-index: 2; }
.story-orb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1) contrast(1.15); animation: spin 38s linear infinite reverse; transition: opacity .25s ease, filter .25s ease; }
.story-orb span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font: 500 10px var(--mono); letter-spacing: .04em; text-shadow: 0 1px 5px var(--ink); animation: spin 38s linear infinite reverse; transition: opacity .18s ease; }
.story-orb:hover, .story-orb:focus-visible { transform: translate(-50%, -50%) scale(1.85); box-shadow: 0 0 0 2px var(--coral), 9px 10px 0 rgba(23,22,74,.3); z-index: 8; }
.orbit-one:has(.story-orb:hover) .story-orb img, .orbit-one:has(.story-orb:hover) .story-orb span,
.orbit-one:has(.story-orb:focus-visible) .story-orb img, .orbit-one:has(.story-orb:focus-visible) .story-orb span { animation-play-state: paused; }
.story-orb:hover img, .story-orb:focus-visible img { opacity: 1; filter: none; }
.story-orb:hover span, .story-orb:focus-visible span { opacity: 0; }
.story-orb:nth-child(1) { left: 50%; top: 0; }
.story-orb:nth-child(2) { left: 75%; top: 7%; }
.story-orb:nth-child(3) { left: 93%; top: 25%; }
.story-orb:nth-child(4) { left: 100%; top: 50%; }
.story-orb:nth-child(5) { left: 93%; top: 75%; }
.story-orb:nth-child(6) { left: 75%; top: 93%; }
.story-orb:nth-child(7) { left: 50%; top: 100%; }
.story-orb:nth-child(8) { left: 25%; top: 93%; }
.story-orb:nth-child(9) { left: 7%; top: 75%; }
.story-orb:nth-child(10) { left: 0; top: 50%; }
.story-orb:nth-child(11) { left: 7%; top: 25%; }
.story-orb:nth-child(12) { left: 25%; top: 7%; }
.orbit-two { inset: 7%; border: 28px solid var(--mist); box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 1px var(--blue); pointer-events: none; }
.dial-center { position: absolute; inset: 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; border: 0; border-radius: 50%; background: var(--blue); color: var(--white); text-align: center; transform: rotate(7deg); box-shadow: 13px 13px 0 var(--coral); cursor: pointer; transition: background .2s ease, box-shadow .2s ease, scale .2s ease; }
.dial-center strong { font: 800 clamp(13px, 1.65vw, 23px)/1.05 var(--display); letter-spacing: -.04em; }
.dial-center:hover { background: var(--ink); box-shadow: 9px 9px 0 var(--coral); scale: 1.04; }

.dial-center-button { pointer-events: auto; display: grid; place-items: center; width: 100%; height: 100%; border: 0; border-radius: 50%; background: var(--blue); color: var(--white); transform: rotate(7deg); box-shadow: 13px 13px 0 var(--coral); cursor: pointer; font: 800 clamp(18px, 3.2vw, 36px)/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial-center-button strong { font-weight: 800; font-size: inherit; line-height: 1; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes particle-pulse { from { scale: .7; opacity: .55; } to { scale: 1.15; opacity: 1; } }

.section-heading { margin-bottom: clamp(42px, 6vw, 80px); }
.section-heading h2 { font-size: clamp(54px, 7vw, 105px); }
.author-grid { display: grid; grid-template-columns: minmax(280px, .7fr) 1.3fr; gap: clamp(40px, 8vw, 130px); align-items: center; max-width: 1180px; }
.portrait { position: relative; aspect-ratio: .9; background: var(--blue); border-radius: 48% 48% 8px 8px; overflow: hidden; box-shadow: -16px 16px 0 var(--coral); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bio .lead { font: 600 clamp(24px, 3vw, 42px)/1.25 var(--display); margin-top: 0; }
.bio > p:not(.lead) { font-size: 16px; line-height: 1.75; max-width: 680px; }
.quick-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }
.quick-facts div { display: flex; flex-direction: column; gap: 7px; }.quick-facts span { font: 10px var(--mono); text-transform: uppercase; opacity: .6; }.quick-facts strong { font-size: 13px; }

.episodes-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.episodes-heading > p { max-width: 360px; line-height: 1.6; }
.episode-list { border-top: 1px solid var(--ink); }
.episode-card { position: relative; display: grid; grid-template-columns: 100px 1fr auto; gap: 30px; align-items: center; padding: 34px 10px 25px; border-bottom: 1px solid var(--line); transition: .25s ease; }
.episode-card:hover { padding-left: 24px; background: var(--mist); }
.episode-views { position: absolute; top: 11px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font: 500 10px var(--mono); letter-spacing: .04em; opacity: .64; }
.episode-views svg, .article-views svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.episode-number, .meta { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.episode-date { display: block; margin-top: 8px; font-size: 9px; line-height: 1.45; letter-spacing: .03em; opacity: .62; }
.episode-content h3 { margin: 7px 0; font: 700 clamp(21px, 2.4vw, 34px)/1.2 var(--display); letter-spacing: -.03em; }.episode-content > p:last-child { margin: 0; opacity: .7; }
.read-button { border: 1px solid var(--ink); background: transparent; padding: 11px 15px; border-radius: 100px; cursor: pointer; font: 500 11px var(--mono); text-transform: uppercase; }.read-button:hover { color: var(--white); background: var(--ink); }
.featured { background: var(--coral); }.featured:hover { background: var(--coral); }

.article-view { max-width: 1120px; margin: 0 auto; }
.back-button { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 54px; padding: 13px 22px; border: 0; border-radius: 100px; background: var(--blue); color: var(--white); cursor: pointer; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; transition: .2s ease; }
.back-button:hover { background: var(--ink); transform: translateY(-2px); }
.article-shell { max-width: 850px; margin: 0 auto; }
.article-header { margin-bottom: clamp(48px, 8vw, 90px); padding-bottom: 40px; border-bottom: 1px solid var(--ink); }
.article-kicker { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.article-date { opacity: .62; }
.article-date::before { content: "Published "; }
.article-views { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; opacity: .62; }
.article-views[hidden] { display: none; }
.article-title { margin: 0; font: 700 clamp(42px, 6vw, 78px)/.98 var(--display); letter-spacing: -.055em; }
.article-body { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; }
.article-body > p { margin: 0 0 1.6em; }
.article-body figure { margin: clamp(42px, 7vw, 80px) 0; }
.article-body img { display: block; width: 100%; max-height: 680px; object-fit: contain; background: rgba(207,214,255,.42); border: 1px solid var(--line); }
.article-body figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 12px; font: 11px/1.5 var(--mono); }
.article-body figcaption a, .article-source { color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-source { display: block; margin: -1em 0 2em; font: 11px/1.5 var(--mono); }
.article-missing { padding: 40px; border: 1px solid var(--line); text-align: center; }
.episode-navigation { display: flex; justify-content: space-between; gap: 14px; margin-top: clamp(60px, 9vw, 110px); }
.episode-nav-button { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 18px; border: 0; border-radius: 100px; background: var(--coral); color: var(--ink); cursor: pointer; text-align: left; transition: .2s ease; }
.episode-nav-button:last-child { justify-content: flex-end; text-align: right; }
.previous-episode > span:first-child, .next-episode > span:last-child { font-size: 17px; }
.episode-nav-button small, .episode-nav-button strong { display: block; }
.episode-nav-button small { margin-bottom: 3px; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.episode-nav-button strong { font: 700 13px var(--display); }
.episode-nav-button:hover:not(:disabled) { background: #ff806f; transform: translateY(-2px); }
.episode-nav-button:disabled { cursor: not-allowed; opacity: .35; }

.comments { margin-top: clamp(68px, 10vw, 120px); padding-top: clamp(32px, 5vw, 52px); }
.comments-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.comments-eyebrow { margin: 0 0 8px; font: 500 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.comments h2 { margin: 0; font: 700 clamp(30px, 4vw, 45px)/1 var(--display); letter-spacing: -.045em; }
.comments h2 span { font: inherit; }
.comments-status { padding-bottom: 4px; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.comment-composer { display: grid; grid-template-columns: 46px 1fr; gap: 15px; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(89,102,222,.34); background: rgba(207,214,255,.34); }
.comment-avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: #d3d3d8; color: #777782; overflow: hidden; }
.comment-avatar svg { width: 31px; height: 31px; fill: #b1b1b8; stroke: currentColor; stroke-width: 1.4; }
.comment-avatar-user { background: var(--ink); color: var(--mist); }
.comment-avatar-user svg { fill: rgba(207,214,255,.28); }
.comment-field { min-width: 0; }
.comment-field label { display: block; margin-bottom: 9px; font: 700 13px var(--display); }
.comment-field textarea { display: block; width: 100%; min-height: 92px; resize: vertical; padding: 14px 15px; border: 1px solid var(--line); border-radius: 0; background: rgba(251,251,255,.72); color: var(--ink); font: 14px/1.6 var(--body); transition: border-color .2s ease, background .2s ease; }
.comment-field textarea::placeholder { color: rgba(23,22,74,.48); }
.comment-field textarea:focus { outline: 0; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(89,102,222,.13); }
.comment-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.comment-actions > span { font: 10px var(--mono); opacity: .58; }
.comment-actions button { padding: 10px 16px; border: 0; border-radius: 100px; background: var(--ink); color: var(--white); cursor: pointer; font: 500 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.comment-actions button:hover { background: var(--blue); transform: translateY(-1px); }
.comment-list { position: relative; margin-top: 12px; }
.comment-list::before { content: ""; position: absolute; top: 38px; bottom: 38px; left: 22px; width: 1px; background: var(--line); }
.comment { position: relative; display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.comment .comment-avatar { box-shadow: 0 0 0 7px var(--paper); z-index: 1; }
.comment-content { flex: 1; min-width: 0; }
.comment-content header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; }
.comment-content header strong { font: 700 14px var(--display); }
.comment-content time { font: 10px var(--mono); opacity: .53; }
.comment-content p { max-width: 680px; margin: 8px 0 12px; font-size: 14px; line-height: 1.7; }
.comment-tools { display: flex; gap: 15px; }
.comment-tools button { padding: 0; border: 0; background: transparent; cursor: pointer; font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.comment-tools button:hover { color: var(--blue); opacity: 1; }
.comment-tools span { color: var(--coral); }

footer { height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 5vw, 78px); border-top: 1px solid var(--line); font: 10px var(--mono); text-transform: uppercase; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 800px) {
  .site-header { height: auto; min-height: 126px; grid-template-columns: 1fr auto; gap: 16px; padding-block: 18px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hero { grid-template-columns: 1fr; }.hero-copy { position: relative; z-index: 1; }.dial-wrap { position: absolute; top: auto; width: 330px; opacity: .32; right: -110px; bottom: 20px; }
  .author-grid { grid-template-columns: 1fr; }.portrait { max-width: 400px; width: 85%; }
  .quick-facts { grid-template-columns: 1fr; }
  .episodes-heading { align-items: start; flex-direction: column; }
  .episode-card { grid-template-columns: 56px 1fr; gap: 12px; }.read-button { grid-column: 2; justify-self: start; }.episode-content > p:last-child { display: none; }
  .back-button { margin-bottom: 38px; }.article-header { padding-bottom: 28px; }
  .article-body figure { margin-inline: -12px; }.article-body figcaption { padding-inline: 12px; }
  .episode-navigation { flex-wrap: wrap; gap: 10px; }
  .comments-heading { align-items: start; flex-direction: column; gap: 8px; }
  .comments-status { padding: 0; }
  .comment-composer { grid-template-columns: 38px 1fr; gap: 11px; padding: 16px; }
  .comment-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .comment-avatar svg { width: 26px; height: 26px; }
  .comment-actions { align-items: end; }
  .comment-actions > span { max-width: 130px; line-height: 1.45; }
  .comment-list::before { left: 18px; }
  .comment { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }