/* Journal: the Aurora system, set for reading. Tinted blocks, no outlines; inside a figure the blocks flip to page colour. One 680px column; figures may run wider; Yoin interrupts from the margin. */
:root { --well: var(--card); --rule-line: rgba(106, 27, 209, .55); --gap-ring: #ff59cd; --measure: 680px; --sp-std: ease; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --well: var(--card); --rule-line: rgba(205, 178, 255, .6); } }
:root[data-theme="dark"] { --well: var(--card); --rule-line: rgba(205, 178, 255, .6); }

/* ---- index */
.jhero { position: relative; overflow: hidden; padding-block: 48px 40px; }
.jhero .wrap { position: relative; z-index: 1; }
.jhero .aurora, .ahead .aurora { -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
.jhero .duo .bubble { max-width: 700px; }
.jhero .duo.side .buddy { width: clamp(104px, 14vw, 180px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.posts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.posts.two .post .art { aspect-ratio: 16 / 9; }
.posts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.posts.four .post h2 { font-size: 22px; }
.post { display: flex; flex-direction: column; border-radius: 30px; background: var(--card); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .3s, transform .5s var(--sp-std); min-width: 0; }
.post:hover { box-shadow: 0 26px 50px -30px rgba(70, 30, 140, .45); transform: translateY(-3px); }
.post .art { aspect-ratio: 4 / 3; background: var(--well); position: relative; overflow: hidden; }
.post .art > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.post .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.post h2 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; font-variation-settings: "ROND" 60; text-wrap: balance; }
.post p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* ---- article */
.ahead { position: relative; overflow: hidden; padding-block: 40px 0; }
.ahead .wrap { position: relative; z-index: 1; }
.ahead .inner { max-width: 860px; }
.ahead h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.025em; margin: 14px 0 0; font-variation-settings: "ROND" 40; text-wrap: balance; }
.ahead .dek { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--ink-2); margin: 18px 0 0; max-width: 40ch; text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
.byline .face { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.byline .face svg { width: 34px; height: auto; }
.byline b { color: var(--ink); font-weight: 600; }
.byline small { display: flex; gap: 12px; color: var(--ink-3); font-size: 13px; }
.cover { margin: 40px auto 0; max-width: 1120px; border-radius: 36px; background: var(--well); overflow: hidden; position: relative; aspect-ratio: 16 / 7; }
.cover > * { position: absolute; inset: 0; width: 100%; height: 100%; }

article.prose { max-width: var(--measure); margin: 0 auto; padding: 56px 0 24px; font-size: 19px; line-height: 1.72; }
.prose p { margin: 0 0 1.05em; text-wrap: pretty; }
.prose h2 { scroll-margin-top: 88px; font-size: 30px; line-height: 1.18; font-weight: 600; letter-spacing: -.012em; margin: 2.1em 0 .6em; text-wrap: balance; }
.prose h3 { font-size: 21px; font-weight: 600; margin: 1.8em 0 .4em; }
.prose a { color: var(--link); text-underline-offset: 3px; }
.prose .first::first-letter { font-size: 3.1em; float: left; line-height: .9; margin: .06em .1em 0 0; font-weight: 600; font-variation-settings: "ROND" 100; color: var(--violet); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin: .35em 0; }
.prose code, .codeblock { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: .84em; }
.prose code:not(.codeblock) { background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.codeblock { display: block; white-space: pre; overflow-x: auto; background: var(--card); border-radius: 18px; padding: 16px 18px; margin: 0 0 1.2em; line-height: 1.6; font-size: 14px; color: var(--ink); }
.prose .codeblock { font-size: 13.5px; }
.codeblock .c { color: var(--ink-3); }
.prose blockquote { margin: 1.4em 0; padding: 0 0 0 20px; border-left: 3px solid var(--violet); font-size: 22px; line-height: 1.5; color: var(--ink); font-variation-settings: "ROND" 60; }
.prose .zh { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", var(--f); }
.prose .ja { font-family: "Hiragino Sans", "Noto Sans JP", "PingFang SC", var(--f); }

/* figures may leave the column */
figure.f { margin: 2.2em 0; }
figure.f.wide { margin-left: calc(50% - min(48vw, 520px)); margin-right: calc(50% - min(48vw, 520px)); }
figure.f .stage { display: block; justify-items: normal; border-radius: 30px; background: var(--well); padding: 26px; position: relative; overflow: hidden; }
figure.f figcaption { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 6px 0; text-wrap: pretty; }
figure.f figcaption b { color: var(--ink); font-weight: 600; }

/* Yoin interrupts: a small mascot with a bubble, in the right margin when there is room. */
.aside { display: flex; gap: 8px; align-items: flex-start; margin: 1.2em 0 1.4em; font-size: 15px; line-height: 1.45; }
.aside .buddy.m { flex: none; width: 58px; margin: 4px 0 0; }
.aside .buddy.m::before { inset: -30%; }
.aside .say { position: relative; background: var(--bubble); color: var(--bubble-ink); border-radius: 18px; padding: 10px 14px 11px; box-shadow: var(--bubble-shadow); font-variation-settings: "ROND" 60; margin-top: 6px; }
.aside .say::before { content: ""; position: absolute; left: -8px; top: 14px; width: 12px; height: 16px; background: var(--bubble); clip-path: path("M12 0C12 5 0 6 0 8C0 10 12 11 12 16Z"); }
.aside .say b { font-weight: 600; }
@media (min-width: 1260px) {
  .aside { float: right; clear: right; width: 220px; margin: .2em -264px 1em 0; }
}

/* end of article */
.more { max-width: 1120px; margin: 72px auto 0; }
.more h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.more .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.more .post .art { aspect-ratio: 2 / 1; }

/* shared figure pieces */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { border-radius: 20px; background: var(--paper); overflow: hidden; }
.tile .shot { position: relative; aspect-ratio: 1; background: var(--paper); overflow: hidden; }
.tile .shot .bar { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: var(--paper); z-index: 2; }
.tile .shot .bar::after { content: ""; position: absolute; left: 10%; top: 38%; width: 46%; height: 30%; border-radius: 999px; background: var(--paper-2); }
.tile .shot .cv { position: absolute; left: 14%; width: 72%; aspect-ratio: 1; top: 12%; border-radius: 4px; background-size: cover; }
.tile .t { padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.35; }
.tile .t b { display: block; font-size: 14.5px; }
.tile .t span { color: var(--ink-2); }
.tile .x { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--ink-3); font-size: 14px; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rule { border-radius: 22px; background: var(--card); overflow: hidden; display: grid; grid-template-columns: 42% minmax(0, 1fr); min-width: 0; }
.rule .fig { background: var(--paper-2); display: grid; place-items: center; color: var(--ink); aspect-ratio: 1; }
.rule .fig svg { width: 64%; height: auto; overflow: visible; }
.rule .txt { padding: 14px 16px; align-self: center; }
.rule h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.rule p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }

.motions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcard { border-radius: 22px; background: var(--card); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; align-items: center; min-width: 0; }
.mcard .well { width: 96px; height: 96px; border-radius: 20px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); }
.mcard .well svg { width: 48px; height: 48px; overflow: visible; }
.mcard h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.mcard p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.mcard .ctl { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.mbtn, .tog { height: 32px; padding: 0 14px; border-radius: 16px; border: 0; cursor: pointer; font: 500 13px var(--f); background: var(--paper-2); color: var(--ink); transition: border-radius .35s cubic-bezier(.3, 1.4, .5, 1); }
.mbtn:hover, .tog:hover { border-radius: 10px; }
.tog[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.seg2 { display: inline-flex; padding: 3px; border-radius: 20px; background: var(--paper-2); }
.seg2 button { height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: transparent; color: var(--ink-2); font: 500 13px var(--f); cursor: pointer; font-variant-numeric: tabular-nums; }
.seg2 button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.setbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.sname { margin-left: auto; font: 500 13.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-3); }
.sgrid { --sw: 1.5; margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.sg { aspect-ratio: 1; border: 0; border-radius: 15px; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-radius .35s cubic-bezier(.3, 1.4, .5, 1); }
.sg svg { width: 26px; height: 26px; stroke-width: var(--sw); }
.sg:hover, .sg:focus-visible { background: var(--paper-2); border-radius: 21px; }

.dis { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
.dframe { width: 100%; max-width: 340px; padding: 9px; border-radius: 44px; background: var(--ym-bezel); box-shadow: var(--ym-shadow); }
.dframe canvas { display: block; width: 100%; height: auto; aspect-ratio: 360 / 700; border-radius: 35px; touch-action: none; cursor: grab; background: var(--paper-2); }
.dctl { display: grid; gap: 14px; align-content: start; }
.dctl .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dctl .row > span { font-size: 13px; color: var(--ink-3); width: 70px; }
.read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.read div { border-radius: 14px; background: var(--paper); padding: 9px 11px; }
.read small { display: block; font-size: 11.5px; color: var(--ink-3); }
.read b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dctl .note { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.prose .look, .look { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.look li { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.look b { color: var(--ink); font-weight: 600; }

.plot text { font: 12px var(--f); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.plot .ax { stroke: var(--line); }

@media (max-width: 1000px) {
  .posts, .posts.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dis { grid-template-columns: minmax(0, 1fr); }
  .dframe { margin: 0 auto; }
}
@media (max-width: 760px) {
  .posts, .posts.two, .posts.four, .more .posts { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules, .motions { grid-template-columns: minmax(0, 1fr); }
  article.prose { font-size: 18px; padding-top: 40px; }
  .cover { aspect-ratio: 4 / 3; border-radius: 28px; margin-top: 28px; }
  figure.f.wide { margin-left: 0; margin-right: 0; }
  figure.f .stage { padding: 16px; border-radius: 24px; }
  .read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sname { margin-left: 0; width: 100%; }
}

/* the bottom bar, as a figure: slot widths are set by blog.js; colours come from the mock's palette tokens */
.bk { display: flex; justify-content: center; }
.bk-bar { flex: none; height: 64px; padding: 8px; border-radius: 32px; background: var(--y-surface2); color: var(--y-ink); display: flex; align-items: center; box-shadow: 0 14px 30px -20px rgba(20, 10, 60, .45); overflow: hidden; transform-origin: 50% 50%; }
.bk-s { flex: none; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; white-space: nowrap; color: var(--y-ink2); }
.bk-s svg { flex: none; }
.bk-s em { font-style: normal; font-weight: 600; font-size: 15px; overflow: hidden; }
.bk-home { background: var(--y-pc); color: var(--y-onpc); }
.bk-pill { justify-content: flex-start; padding-left: 7px; background: var(--y-pc); color: var(--y-onpc); }
.bk-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bk-cv { flex: none; width: 34px; height: 34px; border-radius: 8px; background-size: cover; background-color: var(--y-surface); }
.bk-t { display: grid; line-height: 1.2; min-width: 0; text-align: left; }
.bk-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.bk-t small { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; }
.bk-play { background: var(--y-primary); color: var(--y-onp); }
.bk-view { display: flex; justify-content: center; padding: 22px 0 6px; }
.bk-seg { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 18px auto 0; width: max-content; max-width: 100%; }
figure.f .stage.stay { display: grid; justify-items: center; gap: 22px; }
.st-screen { position: relative; width: 300px; height: 560px; margin: 9px; border-radius: 34px; overflow: hidden; background: var(--y-bg); color: var(--y-ink); box-shadow: 0 0 0 9px var(--ym-bezel), var(--ym-shadow); }
.st-shell { position: absolute; inset: 0; padding: 40px 18px; transform-origin: 50% 50%; }
.st-shell small { display: block; font-size: 12px; color: var(--y-ink2); }
.st-shell b { display: block; font-size: 26px; font-weight: 500; font-variation-settings: "ROND" 100; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.st-grid i { aspect-ratio: 1; border-radius: 4px; background-size: cover; }
.st-page { position: absolute; inset: 0; padding: 40px 18px 0; background: var(--y-surface); transform-origin: 50% 50%; overflow: hidden; box-shadow: -12px 0 30px -14px rgba(0, 0, 0, .3); }
.st-cv { display: block; width: 150px; aspect-ratio: 1; border-radius: 6px; background-size: cover; margin-bottom: 14px; }
.st-page small { font-size: 12px; color: var(--y-ink2); }
.st-page b { display: block; font-size: 24px; font-weight: 500; line-height: 1.15; }
.st-page span { font-size: 14px; color: var(--y-ink2); }
.st-page ol { margin: 14px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 2.1; }
.st-bar { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 2; }
.st-ctl { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(320px, 100%); }
.st-ctl label { display: grid; gap: 6px; width: 100%; font-size: 13px; color: var(--ink-3); text-align: center; }
.st-ctl input { width: 100%; accent-color: var(--violet); }

:lang(zh) article.prose { font-size: 18px; line-height: 1.9; }
:lang(zh) .jhero .b-title { line-height: 1.14 !important; }
:lang(zh) .prose h2 { line-height: 1.3; }
:lang(zh) .ahead h1 { line-height: 1.12; letter-spacing: 0; }
:lang(zh) .ahead .dek { line-height: 1.65; }

/* Pre-save: the launcher icon as a record sleeve, with a pre-save button (blog.js, heroPresave) */
.presave { container-type: size; }
.presave .ps { display: flex; align-items: center; justify-content: center; gap: 7cqw; }
.ps-cv { position: relative; flex: none; width: 62cqh; aspect-ratio: 1; border-radius: 3cqh; background: radial-gradient(circle, #092163, #000 72%); display: grid; place-items: center; }
.ps-mk { width: 74%; display: block; }
.ps-mk svg { display: block; width: 100%; height: auto; }
.ps-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ps-meta small { font-size: max(12px, 3.2cqh); font-weight: 500; color: var(--ink-3); }
.ps-meta b { font-size: max(30px, 14cqh); line-height: 1; font-weight: 600; font-variation-settings: "ROND" 100; letter-spacing: -.02em; margin-top: 1.2cqh; }
.ps-meta > span:not(.ps-btn) { font-size: max(14px, 4cqh); color: var(--ink-2); margin-top: 1cqh; }
.ps-btn { display: inline-flex; align-items: center; gap: 8px; height: max(44px, 11cqh); margin-top: 5cqh; padding: 0 max(18px, 4cqh) 0 max(14px, 3.4cqh); border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 max(15px, 3.8cqh)/1 var(--f); cursor: pointer; transition: background-color .4s, color .4s; }
.ps-btn i { display: grid; place-items: center; }
.ps-btn[aria-pressed="true"] { background: var(--pink); color: #fff; }
.presave.card .ps-meta small, .presave.card .ps-meta > span:not(.ps-btn) { display: none; }
.presave.card .ps { gap: 6cqw; }
.presave.card .ps-cv { width: 54cqh; }
.presave.card .ps-meta b { font-size: 13cqh; margin-top: 0; }
.presave.card .ps-btn { height: 13cqh; margin-top: 4cqh; padding: 0 4.5cqh 0 3.6cqh; font-size: 4.6cqh; gap: 1.6cqh; }
.presave.card .ps-btn svg { width: 6cqh; height: 6cqh; }
@media (max-width: 640px) { .presave:not(.card) .ps-meta small { display: none; } }
/* a break in a post: three dots in the icon's colours, no rule */
.prose hr { border: 0; width: 48px; height: 8px; margin: 2.6em auto; background: radial-gradient(circle, var(--pink) 3px, transparent 3.6px) 0 50% / 16px 8px no-repeat, radial-gradient(circle, var(--violet) 3px, transparent 3.6px) 50% 50% / 16px 8px no-repeat, radial-gradient(circle, var(--navy) 3px, transparent 3.6px) 100% 50% / 16px 8px no-repeat; }
/* the newest post leads: twice the size on Home, full width in the Journal */
.posts.five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.posts.five .post h2 { font-size: 22px; }
.posts.five .post.feature { grid-column: span 2; grid-row: span 2; }
.posts.five .post.feature h2 { font-size: 30px; }
.posts.five .post.feature .art { aspect-ratio: auto; flex: 1; min-height: 260px; }
.posts.two .post.feature { grid-column: 1 / -1; }
.posts.two .post.feature .art { aspect-ratio: 21 / 8; }
@media (max-width: 920px) { .posts.five { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .posts.five .post.feature { grid-row: auto; } .posts.five .post.feature .art { aspect-ratio: 16 / 9; flex: none; } }
@media (max-width: 640px) { .posts.five { grid-template-columns: minmax(0, 1fr); } .posts.five .post.feature { grid-column: auto; } .posts.two .post.feature .art { aspect-ratio: 4 / 3; } }