/* Project dossiers and the written archive. */
.project-summary { max-width: 450px; min-height: 3.8em; margin-top: 20px; color: #aaa49d; font-size: 12px; line-height: 1.9; }
.writing { border-top: 1px solid var(--line); background: #0e0d0e; }
.writing .section-heading { margin-bottom: 0; }
/* Microtype floor for the archive: mono labels and metadata are at least 12px and clear WCAG AA (4.5:1) on the dark
   surfaces. masterpiece.css pins several of these shared label selectors at 10px, so the selectors here are scoped
   under .writing to win without touching the rest of the site. */
.writing .writing-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 55px; padding: 22px 0; border-top: 1px solid var(--line); color: #bcb5ac; font-size: 12px; letter-spacing: .1em; }
.writing .writing-topline > span:last-child { color: #aaa39b; }
.writing .section-heading .eyebrow { font-size: 12px; letter-spacing: .1em; }
.article-grid { display: flex; flex-direction: column; gap: 44px; }
.article-card { min-width: 0; border: 1px solid #3a2f31; background: linear-gradient(140deg,#1b1415,#111112 70%); transition: border-color .3s, background .3s; }
.article-card:hover { border-color: #99504c; background: linear-gradient(140deg,#26171a,#141213 70%); }
.article-link { display: flex; flex-direction: column; height: 100%; padding: 30px; }
.article-link:focus-visible { outline-offset: 5px; }
.article-body { min-width: 0; display: flex; flex-direction: column; }
/* Every meta line has the same anatomy: label, pills, and the date on the same baseline. */
.writing .article-topline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding-bottom: 22px; border-bottom: 1px solid #423235; color: #bcb0aa; font-size: 12px; line-height: 24px; letter-spacing: .08em; }
.article-topline time { white-space: nowrap; }
.article-topline-label { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
/* One pill system: NEW is filled, a topic is outlined, and both share height, padding and type. */
.writing :is(.article-new, .article-topic) { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.writing .article-new { border-color: #ef767b; background: #f0646a; color: #19090d; }
.writing .article-topic { border-color: #8a6f75; color: #e2cfc8; }
.article-media { position: relative; min-width: 0; aspect-ratio: 5 / 2; overflow: hidden; background: #150f11; }
.article-cover { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.article-plate { position: absolute; inset: 0; isolation: isolate; display: flex; align-items: flex-end; padding: 0 0 0 clamp(12px,2vw,22px); overflow: hidden; background: radial-gradient(ellipse at 88% 8%,#a8323a40,transparent 58%), repeating-linear-gradient(0deg,transparent 0 23px,#ffffff09 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,#ffffff09 23px 24px), #170f12; }
.article-plate-num { font: 800 clamp(96px,10.5vw,150px)/.78 var(--display); letter-spacing: -4px; color: transparent; -webkit-text-stroke: 1px #c8696d99; transform: translateY(8%); }
.article-plate:before, .article-plate:after { position: absolute; z-index: 1; font: 500 12px/1 var(--mono); letter-spacing: .14em; color: #b8a5a0; }
.article-plate:before { content: 'HT'; top: 14px; left: 16px; }
.article-plate:after { content: 'X / LONG FORM'; right: 16px; bottom: 14px; }
.article-card--featured { border-color: #8e454d; background: radial-gradient(ellipse at 100% 0,#82263924,transparent 65%),linear-gradient(140deg,#241519,#111112 70%); }
.article-card--featured .article-link { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(28px,4vw,52px); align-items: center; padding: 32px; }
.article-card--featured .article-body { align-self: stretch; justify-content: center; }
.article-card--featured h3 { max-width: 900px; }
.article-card--featured .article-excerpt { max-width: 720px; }
/* A cover on the featured card is the visual, not a second headline. X covers carry the title in their left half, so the
   frame is a 5:4 crop anchored to the right: the artwork stays, the baked-in headline is cropped out and the text title
   is the only one. It never gets wider than 5:4, so the crop only ever gets tighter. */
.article-card--cover .article-link { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.article-card--cover .article-media { align-self: stretch; aspect-ratio: 5 / 4; }
.article-card--cover .article-cover { position: absolute; inset: 0; object-position: 100% 50%; }
.article-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }
.writing .article-format { color: #f27375; font-size: 12px; letter-spacing: .1em; }
.article-card h3 { font: 600 clamp(31px,3vw,43px)/1.12 var(--display); letter-spacing: -.2px; margin-top: 15px; overflow-wrap: anywhere; }
.article-excerpt { font-size: 13px; line-height: 1.8; color: #b0a8a1; margin-top: 17px; }
/* The call to action is the site's red button, sitting right under the excerpt. It is a span: the card is the one link. */
.article-bottom { display: flex; margin-top: 28px; }
.article-cta { gap: 22px; }
.article-link:hover .article-cta { background: #b9292c; }
.article-link:hover .article-cta svg { transform: translate(2px,-2px); }
.article-list-label { margin: 0 0 14px; color: #bcb5ac; font-size: 12px; letter-spacing: .12em; }
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a2f31; }
.article-list > li { margin: 0; }
.article-list .article-card { border: 0; border-bottom: 1px solid #3a2f31; background: none; }
.article-list .article-card:hover { background: linear-gradient(90deg,#26171a,#14121300 85%); transform: none; }
.article-list .article-link { display: grid; grid-template-columns: 220px minmax(0,1fr) 40px; gap: 14px 28px; align-items: center; padding: 20px 18px; }
/* Rows share one height: the body reserves a one-line title plus a two-line excerpt, so a row without an excerpt
   does not collapse, and long excerpts clamp at two lines. Titles are never cut. */
.article-list .article-body { --row-title: clamp(24px,2.1vw,30px); justify-content: center; min-height: calc(33px + var(--row-title) * 1.15 + 8px + 13px * 1.7 * 2); }
.article-list .article-topline { padding-bottom: 9px; border: 0; }
.article-list .article-card h3 { margin-top: 0; font-size: var(--row-title); line-height: 1.15; }
.article-list .article-excerpt { margin-top: 8px; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.article-list .article-plate { padding: 0 0 0 10px; }
.article-list .article-plate-num { font-size: 58px; letter-spacing: -2px; transform: none; padding-bottom: 6px; }
.article-list .article-plate:before, .article-list .article-plate:after { display: none; }
.article-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #4a3a3d; border-radius: 50%; color: #d3c5bb; transition: border-color .3s, color .3s, transform .3s; }
.article-link:hover .article-arrow { border-color: var(--red-text); color: var(--red-text); transform: translate(2px,-2px); }
.article-more-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-bottom: 1px solid #3a2f31; background: #120e0f; color: #d3c5bb; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; transition: background .3s, color .3s; }
.article-more-toggle:hover { background: #1a1214; color: #fff; }
.article-more-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.article-more-icon:before, .article-more-icon:after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: currentColor; }
.article-more-icon:after { transform: rotate(90deg); transition: transform .3s; }
.article-more-toggle[aria-expanded="true"] .article-more-icon:after { transform: rotate(0); }
.article-list#article-more { border-top: 0; animation: fade-rise .6s var(--ease) both; }
.writing-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 28px; }
.writing .writing-footer > .mono { font-size: 12px; color: #aaa09a; letter-spacing: .08em; line-height: 1.7; }
.writing-footer .text-link { font-size: 12px; }
.writing-empty { grid-column: 1 / -1; padding: 35px; border: 1px solid #3a2f31; background: linear-gradient(120deg,#1a1315,#111112); }
.writing .writing-empty .eyebrow { font-size: 12px; color: var(--red-text); }
.writing-empty p { font-size: 17px; line-height: 1.7; margin-top: 20px; }
.writing-empty .text-link { font-size: 12px; margin-top: 20px; }
@media(min-width:761px) and (max-width:1050px) {
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 9px; }
}
@media(min-width:761px) and (max-width:1100px) {
  /* A narrow text column wraps most titles, so the rows reserve a second title line to stay level. */
  .article-list .article-body { min-height: calc(33px + var(--row-title) * 1.15 * 2 + 8px + 13px * 1.7 * 2); }
}
@media(max-width:760px) {
  .project-summary { min-height: 0; font-size: 11px; margin-top: 17px; }
  .writing .writing-topline { margin-top: 30px; padding: 20px 0; gap: 6px 12px; letter-spacing: .06em; }
  .article-grid { gap: 32px; }
  .article-link { padding: 24px; }
  .article-card--featured .article-link, .article-card--cover .article-link { grid-template-columns: 1fr; gap: 22px; padding: 18px 18px 24px; }
  .writing .article-topline { padding-bottom: 19px; letter-spacing: .06em; }
  .article-topline-label { gap: 6px 8px; }
  .writing .article-format { letter-spacing: .06em; }
  .article-kicker { margin-top: 20px; }
  .article-card h3 { font-size: 34px; }
  .article-bottom { margin-top: 24px; }
  .article-cta { width: 100%; }
  .article-plate-num { font-size: 104px; }
  .article-list .article-link { grid-template-columns: 76px minmax(0,1fr); gap: 14px 16px; align-items: start; padding: 16px 4px; }
  .article-list .article-media { aspect-ratio: 1; }
  .article-list .article-cover { object-position: 100% 50%; }
  .article-list .article-body { min-height: 0; justify-content: flex-start; }
  .article-list .article-plate-num { font-size: 44px; }
  .article-list .article-topline { padding-bottom: 7px; }
  .article-list .article-card h3 { font-size: 23px; }
  .article-list .article-excerpt, .article-arrow { display: none; }
  .article-more-toggle { padding: 0 4px; }
  .writing-footer { flex-direction: column; align-items: flex-start; gap: 13px; }
  .writing-empty { padding: 25px; }
  .writing-empty p { font-size: 15px; }
}
@media(max-width:370px) {
  .article-link { padding: 20px; }
  .article-card h3 { font-size: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .article-link:hover .article-cta svg, .article-link:hover .article-arrow { transform: none; }
}

/* Cartoon Network hub: inside the capsule, playable now, in the workshop, and a roadmap teaser.
   Same microtype floor as the archive: mono labels are at least 12px and clear WCAG AA, and every description,
   the roadmap included, shares one size (--hub-copy). */
.hub { --hub-copy: 13px; border-top: 1px solid #33332e; }
.hub-panels { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.35fr) minmax(0,1fr); }
.hub-panel { min-width: 0; padding: 30px 30px 34px; border-left: 1px solid #33332e; }
.hub-panel:first-child { padding-left: 35px; border-left: 0; }
.hub-panel:last-child { padding-right: 35px; }
.hub .hub-title { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--cream); font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hub .hub-title > span { color: var(--red-text); }
.hub .hub-intro { margin-top: 12px; color: #b5b3a9; font-size: var(--hub-copy); line-height: 1.7; }
.hub-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid #33332e; }
/* One item anatomy for every column: name, meta line, status tags, description. Capsule items omit the middle two. */
.hub-item { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border-bottom: 1px solid #2a2b26; }
.hub-name { color: var(--cream); font: 600 21px/1.15 var(--display); letter-spacing: .1px; overflow-wrap: anywhere; }
.hub .hub-note { color: #b9b6ac; font-size: var(--hub-copy); line-height: 1.65; }
.hub .hub-more { margin-top: 16px; color: #a9aba0; font-size: 12px; line-height: 1.75; }
/* The dot belongs to the part that follows it. The row is shifted left by the dot's slot and clipped, so a part that
   starts a line loses its dot instead of leaving one dangling at the end of the line above. */
.hub-meta { display: block; overflow: hidden; color: #b8bbac; font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.hub-meta-row { display: flex; flex-wrap: wrap; gap: 2px 0; margin-left: -16px; }
.hub-meta-row > span { position: relative; padding-left: 16px; }
.hub-meta-row > span:before { content: '·'; content: '·' / ''; position: absolute; left: 0; width: 16px; text-align: center; color: #8d9282; }
/* One status-tag system, one style per meaning: live (playable) green, wip (in progress) amber, partial (reconstructed or
   incomplete) neutral. All outlined, all the same height, padding and type, and the same pill shape as the archive. */
.hub-tags { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 6px 8px; max-width: 100%; }
.hub-tag { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 2px 10px; border: 1px solid; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hub-tag--live { border-color: #7f9f74; color: #bcd8b0; }
.hub-tag--wip { border-color: #b08a35; color: #f0c25e; }
.hub-tag--partial { border-color: #6f7066; color: #c9c6bb; }
.hub-game { transition: background .3s; }
.hub-game:hover { background: linear-gradient(90deg,#1b211c,transparent 90%); }
.hub-game-link { display: inline-flex; align-items: center; gap: 10px; }
.hub-game-link:after { content: ''; position: absolute; inset: 0; }
.hub .hub-game-link:focus-visible { outline: 0; }
.hub-game-link:focus-visible:after { outline: 2px solid var(--red-text); outline-offset: 2px; }
.hub-game-link .icon { width: 14px; height: 14px; color: var(--sage); transition: transform .3s; }
.hub-game:hover .hub-game-link .icon { transform: translate(2px,-2px); }
.hub-roadmap { display: grid; gap: 18px; padding: 28px 35px 32px; border-top: 1px solid #4b4d3f; background: linear-gradient(90deg,#1b2012,#13160e 75%); }
.hub-roadmap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; }
.hub .hub-title--roadmap { flex: 0 1 auto; min-width: 0; align-items: center; }
.hub-title--roadmap:before { content: ''; flex: 0 0 auto; width: 56px; height: 12px; background: repeating-linear-gradient(135deg,#d4d96c 0 6px,#16190f 6px 12px); }
.hub-roadmap-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; }
.hub-teasers { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px 32px; margin: 0; padding: 0; list-style: none; color: #c9c6bb; font-size: var(--hub-copy); line-height: 1.65; }
.hub-teasers li { position: relative; padding-left: 18px; }
.hub-teasers li:before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border: 1px solid #a9b57a; }
.hub-roadmap .text-link { font-size: 12px; color: #c9c6bb; }
.hub-asof { color: #a9aca0; font-size: 12px; letter-spacing: .08em; }
.hub--dialog { margin-top: 26px; border: 1px solid #33332e; }
.hub--dialog .hub-panels { grid-template-columns: 1fr; }
.hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 24px 24px 26px; border-left: 0; border-top: 1px solid #33332e; }
.hub--dialog .hub-panel:first-child { border-top: 0; }
.hub--dialog .hub-roadmap { padding: 20px 24px 22px; }
/* The cartoon card's own mono labels follow the same floor. styles.css and masterpiece.css pin them at 6-10px, so
   these selectors are scoped under the card to win. */
.project-featured :is(.feature-topline, .browser-chrome, .retro-caption), .project-featured .feature-copy > .eyebrow, .project-featured .feature-context { font-size: 12px; letter-spacing: .08em; }
.project-featured .feature-topline { color: #b5b2a8; }
.project-featured .feature-actions :is(.button, .text-link) { font-size: 12px; }
.project-featured .feature-copy > p { font-size: 12px; }
.project-featured .feature-context { color: #b0b3a5; }
@media(min-width:1101px) {
  /* Three columns share rows (heading, intro, list), so the lists start together and close on one hairline. */
  .hub:not(.hub--dialog) .hub-panels { grid-template-rows: auto auto 1fr; }
  .hub:not(.hub--dialog) .hub-panel { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  .hub:not(.hub--dialog) .hub-title { grid-row: 1; }
  .hub:not(.hub--dialog) .hub-intro { grid-row: 2; }
  .hub:not(.hub--dialog) .hub-body { grid-row: 3; border-bottom: 1px solid #33332e; }
  .hub:not(.hub--dialog) .hub-item:last-child { border-bottom: 0; }
}
@media(min-width:601px) and (max-width:1100px) {
  .hub-panels { grid-template-columns: 1fr; }
  .hub-panel, .hub-panel:first-child, .hub-panel:last-child { padding: 28px 35px 30px; border-left: 0; border-top: 1px solid #33332e; }
  .hub-panel:first-child { border-top: 0; }
  .hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 24px 24px 26px; }
  .hub--dialog .hub-panel:first-child { border-top: 0; }
}
@media(min-width:680px) and (max-width:1100px) {
  .hub:not(.hub--dialog) .hub-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
}
@media(max-width:760px) {
  .project-featured .retro-caption { max-width: min(60%,160px); text-align: right; line-height: 1.4; }
}
@media(max-width:600px) {
  .hub-panels { grid-template-columns: 1fr; }
  .hub-panel, .hub-panel:first-child, .hub-panel:last-child { padding: 24px 20px 26px; border-left: 0; border-top: 1px solid #33332e; }
  .hub-panel:first-child { border-top: 0; }
  .hub-roadmap { padding: 24px 20px 26px; gap: 14px; }
  .hub-roadmap-aside { margin-left: 0; }
  .hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 20px 16px 22px; }
  .hub--dialog .hub-panel:first-child { border-top: 0; }
  .hub--dialog .hub-roadmap { padding: 18px 16px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .hub-game:hover .hub-game-link .icon { transform: none; }
}
@media(max-width:600px) {
  /* On phones the capsule pages read as chips; the full notes stay in the project dialog. */
  .hub:not(.hub--dialog) .hub-capsule .hub-list { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .hub:not(.hub--dialog) .hub-capsule .hub-item { padding: 6px 12px 7px; border: 1px solid #33332e; }
  .hub:not(.hub--dialog) .hub-capsule .hub-name { font-size: 19px; }
  .hub:not(.hub--dialog) .hub-capsule .hub-note { display: none; }
}

/* City of Heroes: a wide coming-soon card. It reuses the release card (cover button, copy, actions) and the same hub as
   the Cartoon card, with two columns instead of three. The hub is drawn in the release card's crimson instead of olive
   (.hub--soon, so the dialog copy matches the card). Same microtype floor as the other dossiers: mono labels are at
   least 12px, and the copy is 13px.
   One grid for the whole card: --soon-pad is the card's inner padding, and the hub panels use it on both sides. On wide
   screens the cover/copy columns are equal and the gap is twice the padding, so the hub's column divider falls exactly on
   the middle of the cover/copy gutter, the cover's right edge and the first hub column's right edge are the same x, and
   so are the copy's left edge and the second hub column's left edge. */
.project-soon { --soon-pad: 28px; }
.project-soon .release-topline { padding-inline: var(--soon-pad); }
.project-soon .release-layout { padding: var(--soon-pad); align-items: center; }
/* A fixed 3:2 frame (not a stretched box), so the figures are never cropped harder than the art allows. */
.project-soon .release-visual { min-height: 0; aspect-ratio: 3 / 2; }
.project-soon :is(.release-topline, .release-art-label, .release-copy > .eyebrow, .project-tokens > span) { font-size: 12px; letter-spacing: .08em; }
.project-soon .release-topline { color: #b9b0aa; }
.project-soon .release-art-label { color: #e4dcd8; }
.project-soon .release-copy > .eyebrow { line-height: 1.6; }
.project-soon .release-description { max-width: 480px; color: #b9b1ac; font-size: 13px; line-height: 1.8; }
.project-soon .project-tokens > span { border-color: #4d3b3d; color: #c4bab4; }
.project-soon .release-actions :is(.button, .text-link) { font-size: 12px; }
.hub--soon, .hub--soon .hub-panel { border-color: #443435; }
.hub--soon .hub-list { border-top-color: #443435; }
.hub--soon .hub-item { border-bottom-color: #34292b; }
.hub--soon:not(.hub--dialog) .hub-body { border-bottom-color: #443435; }
.hub--soon:not(.hub--dialog) .hub-panel { padding-inline: var(--soon-pad); }
.hub--soon:not(.hub--dialog) .hub-roadmap { padding-inline: var(--soon-pad); }
.hub--soon .hub-roadmap { border-top-color: #5a3c3b; background: linear-gradient(90deg,#26161a,#141112 75%); }
.hub--soon .hub-title--roadmap:before { background: repeating-linear-gradient(135deg,#e0585d 0 6px,#190b0e 6px 12px); }
.hub--soon .hub-teasers { color: #d0c8c2; }
.hub--soon .hub-teasers li:before { border-color: #d27478; }
@media(min-width:1101px) {
  .project-soon .release-layout { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: calc(var(--soon-pad) * 2); }
  /* The two columns share their rows: item 1 sits level with item 1 of the other column, and so on, so each row is as tall
     as the taller of the two and the hairlines run straight across the divider. Neither column can end in a dead block. */
  .hub--soon:not(.hub--dialog) .hub-panels { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto repeat(var(--hub-rows,1),auto); }
  .hub--soon:not(.hub--dialog) .hub-panel { grid-row: span var(--hub-span,3); }
  .hub--soon:not(.hub--dialog) :is(.hub-body, .hub-list) { display: contents; }
  /* The divider is drawn centred on the gutter (not as a 1px border that would push the second column 1px off the copy). */
  .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel { position: relative; border-left: 0; }
  .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel:before { content: ''; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: #443435; }
  body.genjutsu-active .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel:before { background: #54283c; }
  .hub--soon:not(.hub--dialog) .hub-item:first-child { margin-top: 18px; border-top: 1px solid #443435; }
  .hub--soon:not(.hub--dialog) .hub-item:last-child { border-bottom: 1px solid #34292b; }
}
@media(max-width:1100px) {
  .project-soon { --soon-pad: 25px; }
}
@media(max-width:760px) {
  .project-soon { --soon-pad: 20px; }
}