/* Hangar Çeviri v3 — subpages (archive, patch detail, blog, team, forms, 404).
   Same system as the home page (v3.css tokens): a darker hero "scene", then a normal-coloured
   sheet with rounded top corners sliding over it, Epic-style cards and restrained motion. */

.v3 [hidden] { display: none !important; }
.v3.cover-collection main { background: var(--hx-bg); }

/* ---------- Hero ---------- */
.hx-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 6vw, 84px) clamp(84px, 9vw, 128px); background: var(--hx-bg-deep); }
.hx-hero-art { position: absolute; inset: 0; z-index: -1; }
.hx-hero-art img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transform: scale(1.06); will-change: transform; }
.hx-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hx-bg-deep) 6%, #060608b3 48%, #06060833 100%), linear-gradient(0deg, var(--hx-bg-deep) 0%, #06060800 55%), linear-gradient(180deg, #060608cc 0%, #06060800 30%); }
.hx-hero:not(.hx-hero--art)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 10%, #26bbff14, #26bbff00 60%), radial-gradient(40% 60% at 0% 100%, #ffffff08, #ffffff00 70%); }
.hx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(22px, 3vw, 36px); font-size: 13px; color: var(--hx-dim); }
.hx-crumbs a { color: var(--hx-muted); transition: color .2s; }
.hx-crumbs a:hover { color: var(--hx-text); }
.hx-crumbs i { font-size: 8px; opacity: .6; }
.hx-crumbs [aria-current] { overflow: hidden; max-width: 42ch; color: var(--hx-soft); white-space: nowrap; text-overflow: ellipsis; }
.hx-hero-title { max-width: 16em; font: 800 clamp(40px, 5.4vw, 78px)/1.02 var(--hx-font); letter-spacing: -.05em; text-wrap: balance; }
.hx-hero-title b { color: var(--hx-accent); }
.hx-hero-lead { max-width: 620px; margin-top: 18px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--hx-muted); }
.hx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.hx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* Entrance on first paint (CSS, so it never waits for scripts): the title rises out of its mask,
   the copy follows, the artwork settles and the sheet slides up over the hero. */
.js [data-hero-line] { animation: hx-rise 1.2s var(--hx-ease) .1s both; }
.js [data-hero-in] { animation: hx-fade-up 1s var(--hx-ease) calc(.25s + var(--d, 0s)) both; }
.js .hx-hero-lead[data-hero-in] { --d: .08s; }
.js .hx-hero-meta[data-hero-in], .js .hx-hero-actions[data-hero-in] { --d: .16s; }
.js .hx-hero-art img { animation: hx-art-in 1.8s cubic-bezier(.2, .7, .3, 1) both; }
.js .hx-sheet:not(.hx-sheet--flat) { animation: hx-sheet-in 1.3s var(--hx-ease) .15s backwards; }
@keyframes hx-rise { from { transform: translateY(115%); } }
@keyframes hx-fade-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes hx-art-in { from { opacity: 0; transform: scale(1.18); } }
@keyframes hx-sheet-in { from { transform: translateY(90px); } }
.hx-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; font-size: 13px; color: var(--hx-muted); }
.hx-pill strong { font-size: 15px; font-weight: 800; color: var(--hx-text); font-variant-numeric: tabular-nums; }
.hx-pill i { align-self: center; font-size: 12px; color: var(--hx-accent); }

/* ---------- Sheet: normal-coloured content panel over the hero ---------- */
.hx-sheet { position: relative; z-index: 2; margin-top: -28px; padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 88px); border-radius: 28px 28px 0 0; background: var(--hx-bg); box-shadow: 0 -1px 0 #ffffff0d, 0 -30px 60px #00000080; }
/* A sheet without a hero above it (blog list): starts right under the header. */
.hx-sheet--flat { margin-top: 0; padding-top: clamp(24px, 3vw, 40px); border-radius: 0; box-shadow: none; }
.hx-sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hx-title-lg { font: 800 clamp(26px, 2.6vw, 38px)/1.1 var(--hx-font); letter-spacing: -.035em; }
.hx-kicker { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--hx-accent); }

/* ---------- Fields, chips, pager ---------- */
.hx-field { position: relative; display: flex; align-items: center; min-height: 52px; border-radius: 12px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0f; transition: box-shadow .2s, background-color .2s; }
.hx-field:focus-within { background: #1c1c21; box-shadow: inset 0 0 0 1px var(--hx-accent), 0 0 0 4px #26bbff1f; }
.hx-field i { position: absolute; left: 18px; font-size: 15px; color: var(--hx-dim); pointer-events: none; }
.hx-field input { width: 100%; height: 52px; padding: 0 18px 0 48px; border: 0; background: transparent; color: var(--hx-text); font: 500 15px var(--hx-font); outline: 0; }
.hx-field input::placeholder { color: var(--hx-dim); }
.hx-select { position: relative; display: flex; align-items: center; }
.hx-select select { height: 52px; padding: 0 44px 0 18px; border: 0; border-radius: 12px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0f; color: var(--hx-text); font: 600 14px var(--hx-font); cursor: pointer; appearance: none; }
.hx-select select:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-select i { position: absolute; right: 18px; font-size: 11px; color: var(--hx-dim); pointer-events: none; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chip { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #ffffff0f; color: var(--hx-soft); font: 600 13px var(--hx-font); cursor: pointer; transition: background-color .2s, color .2s; }
.hx-chip:hover { background: #ffffff1f; color: var(--hx-text); }
.hx-chip[aria-pressed="true"], .hx-chip.is-active { background: var(--hx-text); color: var(--hx-bg); }
.hx-chip small { margin-left: 6px; font-size: 12px; opacity: .6; }
.hx-text-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--hx-muted); font: 600 13px var(--hx-font); cursor: pointer; }
.hx-text-btn:hover { color: var(--hx-text); }
.hx-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 44px; }
.hx-pager:empty { display: none; }
.hx-pager button { min-width: 42px; height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: #ffffff0f; color: var(--hx-soft); font: 600 14px var(--hx-font); cursor: pointer; transition: background-color .2s; }
.hx-pager button:hover:not(:disabled) { background: #ffffff1f; }
.hx-pager button[aria-current] { background: var(--hx-text); color: var(--hx-bg); }
.hx-pager button:disabled { opacity: .35; cursor: default; }
.hx-pager .pagination-gap { padding: 0 6px; color: var(--hx-dim); }

/* ---------- Cards (same language as the home page rows) ---------- */
.hx-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
.hx-grid .hx-card { transition: transform .45s var(--hx-ease); }
.hx-grid .hx-card:hover { transform: translateY(-4px); }
.hx-card-art img { transition: transform .8s var(--hx-ease); }
.hx-card:hover .hx-card-art .poster-image, .hx-card:hover .hx-card-art .poster-original { transform: scale(1.04); }
.hx-card-flag { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: #101014e6; font-size: 11px; font-weight: 700; color: var(--hx-soft); }
.hx-card-flag i { color: var(--hx-accent); }
.hx-card-status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hx-card[data-reveal].reveal-ready { opacity: .001; transform: translateY(26px); transition: opacity .7s var(--hx-ease), transform .9s var(--hx-ease); transition-delay: var(--reveal-delay, 0ms); }
.hx-card[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Empty state & call to action ---------- */
.hx-empty-state { display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 72px) 20px; border-radius: 20px; background: var(--hx-bg-2); text-align: center; }
.hx-empty-state-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: #ffffff0f; font-size: 20px; color: var(--hx-accent); }
.hx-empty-state h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hx-empty-state p { max-width: 440px; margin-bottom: 8px; color: var(--hx-muted); line-height: 1.6; }
.hx-cta-section { padding-top: 0; }
.hx-cta-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: radial-gradient(70% 140% at 100% 0%, #26bbff29, #26bbff00 60%), var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-cta-band h2 { font: 800 clamp(24px, 2.4vw, 34px)/1.12 var(--hx-font); letter-spacing: -.035em; }
.hx-cta-band p { max-width: 560px; margin-top: 10px; line-height: 1.65; color: var(--hx-muted); }
.hx-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

/* ---------- Archive ---------- */
/* Filter bar sticks under the header with the page colour behind it, full width; tighter while stuck. */
.hx-library { padding-top: clamp(18px, 2vw, 28px); }
.hx-sentinel { display: block; height: 1px; margin-bottom: -1px; }
.hx-library-bar { position: sticky; top: var(--hx-header-h); z-index: 15; padding-block: 14px 20px; border-bottom: 1px solid var(--hx-line); background: var(--hx-bg); transition: padding .35s var(--hx-ease), box-shadow .35s; }
.hx-library-bar > .hx-container { display: grid; gap: 14px; }
.hx-library-bar.is-stuck { padding-block: 10px 12px; box-shadow: 0 18px 40px #00000080; }
.hx-library-bar.is-stuck > .hx-container { gap: 10px; }
.hx-library-bar.is-stuck .hx-field, .hx-library-bar.is-stuck .hx-field input, .hx-library-bar.is-stuck .hx-select select { min-height: 44px; height: 44px; }
.hx-library-bar.is-stuck .hx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 94%, transparent); }
.hx-library-bar.is-stuck .hx-chip { flex-shrink: 0; min-height: 32px; }
.hx-library-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.hx-library-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 22px; font-size: 13px; color: var(--hx-muted); }

@media (max-width: 1280px) {
  .hx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .hx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hx-hero { padding-block: 28px 76px; }
  .hx-sheet { margin-top: -22px; border-radius: 22px 22px 0 0; }
  .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .hx-library-top { grid-template-columns: 1fr 1fr; }
  .hx-field--search { grid-column: 1 / -1; }
  .hx-select select { width: 100%; }
  .hx-chips { flex-wrap: nowrap; margin-inline: calc(var(--hx-gutter) * -1); padding-inline: var(--hx-gutter); overflow-x: auto; scrollbar-width: none; }
  .hx-chip { flex-shrink: 0; }
  .hx-cta-band { flex-direction: column; align-items: flex-start; }
  .hx-library-bar.is-stuck .hx-select { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-card[data-reveal].reveal-ready { opacity: 1; transform: none; }
  .js [data-hero-line], .js [data-hero-in], .js .hx-hero-art img, .js .hx-sheet { animation: none; }
}

/* ---------- Status, prose (editor HTML from the admin panel) ---------- */
.hx-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; font-size: 13px; font-weight: 600; }
.hx-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-accent); box-shadow: 0 0 0 3px #26bbff29; }
.hx-status--2 i { background: #ffc15c; box-shadow: 0 0 0 3px #ffc15c29; }
.hx-status--0 i { background: #8a8a93; box-shadow: none; }
.hx-prose { font-size: 16px; line-height: 1.8; color: var(--hx-soft); overflow-wrap: anywhere; }
.hx-prose > * + * { margin-top: 1em; }
.hx-prose p:empty { display: none; }
.hx-prose h2, .hx-prose h3, .hx-prose h4 { margin-top: 1.6em; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--hx-text); }
.hx-prose h2 { font-size: 22px; }
.hx-prose h3 { font-size: 19px; }
.hx-prose h4 { font-size: 17px; }
.hx-prose a { color: var(--hx-accent); text-decoration: underline; text-decoration-color: #26bbff66; text-underline-offset: 3px; }
.hx-prose a:hover { text-decoration-color: currentColor; }
.hx-prose strong, .hx-prose b { font-weight: 700; color: var(--hx-text); }
.hx-prose ul, .hx-prose ol { padding-left: 1.3em; }
.hx-prose li + li { margin-top: .4em; }
.hx-prose ul li::marker { color: var(--hx-accent); }
.hx-prose img, .hx-prose video, .hx-prose iframe { max-width: 100%; height: auto; border-radius: 12px; }
.hx-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.hx-prose blockquote { padding: 14px 18px; border-left: 3px solid var(--hx-accent); border-radius: 0 10px 10px 0; background: #ffffff08; color: var(--hx-muted); }
.hx-prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 12px; background: var(--hx-bg-deep); box-shadow: inset 0 0 0 1px #ffffff14; font: 13px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; }
.hx-prose code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; }
.hx-prose :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: #ffffff12; }
.hx-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hx-prose th, .hx-prose td { padding: 10px 12px; border-bottom: 1px solid var(--hx-line); text-align: left; }
.hx-prose hr { border: 0; border-top: 1px solid var(--hx-line); }
.hx-prose.is-collapsed { max-height: 330px; overflow: hidden; mask-image: linear-gradient(#000 55%, transparent); }
/* Copy helpers that main.js adds around install paths and code blocks. */
.hx-prose .code-copy-wrap { position: relative; }
.hx-prose .code-copy-wrap .copy-button { position: absolute; top: 10px; right: 10px; }
.hx-prose .copy-button, .hx-copy { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: #ffffff14; color: var(--hx-text); font: 600 12px var(--hx-font); cursor: pointer; transition: background-color .2s; }
.hx-prose .copy-button:hover, .hx-copy:hover { background: #ffffff26; }
.hx-prose .installation-path { display: flex; align-items: center; gap: 12px; margin-block: 6px; padding: 10px 10px 10px 16px; border: 0; border-radius: 12px; background: var(--hx-bg-deep); box-shadow: inset 0 0 0 1px #ffffff14; }
.hx-prose .installation-path code { flex: 1; min-width: 0; padding: 0; background: none; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.hx-prose .installation-path .copy-button { margin: 0; }

/* ---------- Patch detail ---------- */
.hx-patch-hero { padding-bottom: clamp(100px, 10vw, 150px); }
.hx-patch-hero .hx-hero-art img { opacity: .55; }
.hx-patch-head { display: grid; grid-template-columns: clamp(170px, 16vw, 240px) minmax(0, 1fr); align-items: end; gap: clamp(24px, 3.4vw, 52px); }
.hx-patch-poster { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--hx-surface); box-shadow: 0 30px 70px #000000b3, 0 0 0 1px #ffffff14; }
.hx-patch-poster .poster-image { width: 100%; height: 100%; object-fit: cover; }
.hx-patch-poster .poster-adapted { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.hx-patch-poster .poster-adapted .poster-image { position: relative; object-fit: contain; }
.hx-patch-poster .poster-fallback { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.hx-patch-poster .poster-fallback-title { display: none; }
.hx-patch-copy { min-width: 0; }
.hx-patch-tags { margin: 0 0 18px; }
.hx-patch-title { max-width: 18em; font-size: clamp(34px, 4.2vw, 64px); }
.hx-patch-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hx-patch-cats .hx-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; font-size: 12px; }
.hx-btn-icon { width: 56px; padding: 0; }
.hx-patch-sheet { padding-top: 0; overflow: clip; }
.hx-tabs { position: sticky; top: var(--hx-header-h); z-index: 20; border-bottom: 1px solid var(--hx-line); background: #101014f5; }
.hx-tabs .hx-container { display: flex; gap: clamp(20px, 2.6vw, 34px); overflow-x: auto; scrollbar-width: none; }
.hx-tabs a { position: relative; flex-shrink: 0; padding: 20px 0 18px; font-size: 14px; font-weight: 600; color: var(--hx-muted); transition: color .2s; }
.hx-tabs a:hover, .hx-tabs a[aria-current] { color: var(--hx-text); }
.hx-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--hx-text); transform: scaleX(0); transition: transform .35s var(--hx-ease); }
.hx-tabs a[aria-current]::after { transform: scaleX(1); }
.hx-patch-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); align-items: start; gap: clamp(32px, 5vw, 88px); padding-top: clamp(34px, 4vw, 56px); }
.hx-patch-aside { position: sticky; top: calc(var(--hx-header-h) + 84px); }
@media (max-height: 760px) { .hx-patch-aside { position: static; } }
.hx-block { margin-bottom: clamp(36px, 4vw, 52px); padding-bottom: clamp(36px, 4vw, 52px); border-bottom: 1px solid var(--hx-line); scroll-margin-top: calc(var(--hx-header-h) + 84px); }
.hx-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.hx-block-title { margin-bottom: 18px; font: 800 clamp(24px, 2.2vw, 32px)/1.15 var(--hx-font); letter-spacing: -.03em; }
.hx-block-lead { margin: -6px 0 18px; color: var(--hx-muted); }
.hx-block-link { margin-top: 18px; }
.hx-expand { margin-top: 14px; color: var(--hx-accent); }
.hx-ad { margin-bottom: clamp(36px, 4vw, 52px); }
.hx-note { display: flex; gap: 16px; padding: 20px 22px; border-radius: 16px; background: #26bbff0d; box-shadow: inset 0 0 0 1px #26bbff26; }
.hx-note > i { margin-top: 6px; color: var(--hx-accent); }
.hx-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hx-credit { padding: 18px; border-radius: 16px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; }
.hx-credit h3 { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hx-dim); }
.hx-credit ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hx-credit li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.hx-avatar { display: grid; flex-shrink: 0; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #6ad5ff, #0e8ccc); color: #0b0b0e; font-size: 12px; font-weight: 800; }
.hx-supporters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hx-supporters li { padding: 8px 14px; border-radius: 999px; background: #ffffff0d; font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-download { overflow: hidden; border-radius: 20px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff12, 0 30px 70px #00000066; scroll-margin-top: calc(var(--hx-header-h) + 84px); }
.hx-download-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.hx-download-body { padding: 22px 22px 20px; }
.hx-download h2 { font: 800 24px/1.15 var(--hx-font); letter-spacing: -.03em; }
.hx-download-help { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--hx-muted); }
.hx-download-links { display: grid; gap: 10px; margin-top: 18px; }
.hx-download-links .hx-btn { justify-content: flex-start; width: 100%; }
.hx-btn-end { margin-left: auto; font-size: 12px; opacity: .7; }
.hx-download-alt { justify-content: center; margin-top: 4px; font-size: 13px; color: var(--hx-muted); }
.hx-secret { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
.hx-secret > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--hx-dim); }
.hx-secret > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--hx-bg-deep); box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-secret code { font: 600 14px ui-monospace, "Cascadia Code", Consolas, monospace; }
.v3 .hx-artwork-dialog { width: min(1200px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--hx-bg-2); box-shadow: 0 0 0 1px #ffffff14, 0 40px 120px #000000b3; }
.hx-artwork-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 22px; }
.hx-artwork-dialog-head h2 { font-size: 16px; font-weight: 700; }
.hx-artwork-dialog .hx-client-dialog-close { position: static; }
.hx-artwork-dialog img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 120px); object-fit: contain; background: #000; }
.hx-related .hx-row-head { margin-bottom: 20px; }

@media (max-width: 960px) {
  .hx-patch-layout { grid-template-columns: 1fr; }
  .hx-patch-aside { position: static; max-width: 520px; }
}
@media (max-width: 760px) {
  .hx-patch-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .hx-patch-poster { width: 132px; }
  .hx-hero-actions .hx-btn-lg { flex: 1 1 0; min-width: 0; padding-inline: 14px; }
  .hx-hero-actions .hx-btn-icon { flex: 0 0 56px; }
  .hx-note { flex-direction: column; gap: 10px; }
  .hx-related .hx-grid .hx-card:nth-child(n + 5) { display: none; }
}

/* ---------- Blog list ---------- */
.hx-feature-row { grid-auto-columns: min(820px, 64%); gap: 16px; margin-bottom: clamp(34px, 4vw, 52px); }
.hx-feature { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7.5; border-radius: 18px; background: var(--hx-surface); scroll-snap-align: start; box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--hx-ease); }
.hx-feature:hover img { transform: scale(1.03); }
.hx-feature-copy { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 30px); background: linear-gradient(0deg, #0b0b0ef2 0%, #0b0b0e99 55%, #0b0b0e00 100%); }
.hx-feature-copy strong { max-width: 30ch; font: 800 clamp(20px, 2vw, 30px)/1.12 var(--hx-font); letter-spacing: -.03em; }
.hx-feature-copy span { display: -webkit-box; max-width: 60ch; overflow: hidden; font-size: 14px; line-height: 1.55; color: var(--hx-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-blog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hx-line); }
.hx-blog-bar .hx-chip { display: inline-flex; align-items: center; }
.hx-blog-search { width: min(340px, 100%); }
.hx-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hx-filter-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: #26bbff1a; box-shadow: inset 0 0 0 1px #26bbff40; font-size: 13px; font-weight: 600; color: var(--hx-text); transition: background-color .2s; }
.hx-filter-tag:hover { background: #26bbff2e; }
.hx-filter-tag i { font-size: 11px; color: var(--hx-accent); }
.hx-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 340px); align-items: start; gap: clamp(28px, 4vw, 64px); margin-top: 26px; }
.hx-results { margin-bottom: 20px; font-size: 13px; color: var(--hx-muted); }
.hx-results strong { color: var(--hx-text); }
.hx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; }
.hx-post { display: flex; flex-direction: column; min-width: 0; }
.hx-post-art { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 14px; border-radius: 12px; background: var(--hx-surface); }
.hx-post-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hx-ease); }
.hx-post:hover .hx-post-art img { transform: scale(1.04); }
.hx-post-art::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hx-post:hover .hx-post-art::after { opacity: .08; }
.hx-post-cat { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #101014e6; font-size: 11px; font-weight: 700; color: var(--hx-soft); }
.hx-post-cat i, .hx-dot, .hx-widget-link > i { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.hx-post-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--hx-dim); }
.hx-post-meta i { margin-right: 4px; }
.hx-post-title { display: -webkit-box; overflow: hidden; margin-bottom: 8px; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .2s; }
.hx-post:hover .hx-post-title { color: var(--hx-accent-hover); }
.hx-post-excerpt { display: -webkit-box; overflow: hidden; margin-bottom: 14px; font-size: 14px; line-height: 1.6; color: var(--hx-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-post-author { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-post[data-reveal].reveal-ready { opacity: .001; transform: translateY(26px); transition: opacity .7s var(--hx-ease), transform .9s var(--hx-ease); transition-delay: var(--reveal-delay, 0ms); }
.hx-post[data-reveal].is-visible { opacity: 1; transform: none; }
.hx-writer-avatar { display: inline-grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #6ad5ff, #0e8ccc); color: #0b0b0e; font-size: 11px; font-weight: 800; }
.hx-writer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hx-writer-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.hx-pager a { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 10px; background: #ffffff0f; color: var(--hx-soft); font-size: 14px; font-weight: 600; transition: background-color .2s; }
.hx-pager a:hover { background: #ffffff1f; }
.hx-pager a[aria-current] { background: var(--hx-text); color: var(--hx-bg); }
.hx-empty-state--sm { justify-items: start; margin-bottom: 20px; padding: 18px 20px; text-align: left; }
.hx-writer-card { display: flex; gap: 18px; margin-bottom: 28px; padding: 22px; border-radius: 18px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-writer-card h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hx-writer-role { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--hx-accent); }
.hx-writer-bio { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--hx-muted); }
.hx-writer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--hx-dim); }

/* Sidebar widgets (blog list and article) */
.hx-blog-aside, .hx-article-aside { display: grid; gap: 14px; }
.hx-widget { padding: 20px; border-radius: 18px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; }
.hx-widget-title { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hx-dim); }
.hx-widget-list { display: grid; gap: 2px; }
.hx-widget-link { display: flex; align-items: center; gap: 10px; margin-inline: -10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--hx-soft); transition: background-color .2s, color .2s; }
.hx-widget-link:hover, .hx-widget-link.is-active { background: #ffffff0d; color: var(--hx-text); }
.hx-widget-link span { flex: 1; min-width: 0; }
.hx-widget-link small { font-size: 12px; font-weight: 600; color: var(--hx-dim); font-variant-numeric: tabular-nums; }
.hx-widget-link--stack { display: grid; gap: 3px; }
.hx-widget-link--stack span { line-height: 1.4; }
.hx-mini-post { display: flex; align-items: center; gap: 12px; margin-inline: -8px; padding: 8px; border-radius: 12px; transition: background-color .2s; }
.hx-mini-post:hover { background: #ffffff0a; }
.hx-mini-rank { width: 14px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--hx-dim); text-align: center; }
.hx-mini-post img { flex-shrink: 0; width: 72px; height: 48px; object-fit: cover; border-radius: 8px; }
.hx-mini-post > span:last-child { display: grid; gap: 4px; min-width: 0; }
.hx-mini-post strong { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hx-mini-post small { font-size: 12px; color: var(--hx-dim); }
.hx-writer { display: flex; align-items: center; gap: 12px; margin-inline: -8px; padding: 8px; border-radius: 12px; transition: background-color .2s; }
.hx-writer:hover, .hx-writer.is-active { background: #ffffff0a; }
.hx-writer .hx-writer-avatar { width: 38px; height: 38px; font-size: 14px; }
.hx-writer > span:last-child { display: grid; gap: 2px; min-width: 0; }
.hx-writer strong { font-size: 14px; font-weight: 700; }
.hx-writer small { overflow: hidden; font-size: 12px; color: var(--hx-dim); white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Blog article ---------- */
.hx-article-hero { padding-bottom: clamp(100px, 10vw, 150px); }
/* Blog artwork often carries its own lettering: blur it into a soft backdrop behind the title. */
.hx-hero--soft .hx-hero-art img, .hx-article-hero .hx-hero-art img { opacity: .4; filter: blur(10px) saturate(1.1); }
.hx-article-cat { margin: 0 0 18px; }
.hx-article-cat .hx-pill { align-items: center; font-weight: 600; color: var(--hx-soft); }
.hx-article-title { max-width: 22em; font-size: clamp(32px, 4vw, 58px); letter-spacing: -.045em; }
.hx-article-meta { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.hx-article-meta .hx-writer-avatar { width: 44px; height: 44px; font-size: 16px; }
.hx-article-by { display: grid; gap: 2px; }
.hx-article-by a, .hx-article-by strong { font-size: 15px; font-weight: 700; color: var(--hx-text); }
.hx-article-by a:hover { color: var(--hx-accent); }
.hx-article-by small { font-size: 13px; color: var(--hx-muted); }
/* Reading pages use a narrower page so the text column and the sidebar sit together. */
.hx-article { --hx-max: 1240px; }
.hx-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 340px); align-items: start; gap: clamp(28px, 4vw, 56px); }
.hx-article-cover { overflow: hidden; margin-bottom: 22px; border-radius: 18px; background: var(--hx-surface); box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-article-cover img { display: block; width: 100%; height: auto; }
.hx-reader-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--hx-line); }
.hx-zoom, .hx-share { display: flex; align-items: center; gap: 6px; }
.hx-zoom button, .hx-share a { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: #ffffff0f; color: var(--hx-soft); font-size: 13px; cursor: pointer; transition: background-color .2s, color .2s; }
.hx-zoom button:hover, .hx-share a:hover { background: #ffffff1f; color: var(--hx-text); }
.hx-zoom span { min-width: 48px; font-size: 13px; font-weight: 700; text-align: center; color: var(--hx-muted); font-variant-numeric: tabular-nums; }
.hx-article-body { font-size: 18px; }
.hx-article-body > p:first-child { font-size: 1.1em; color: var(--hx-text); }
.hx-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.hx-article-tags .hx-chip { display: inline-flex; align-items: center; min-height: 34px; font-size: 12px; }
.hx-comments { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--hx-line); }
.hx-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-left: 6px; padding: 0 9px; border-radius: 999px; background: #ffffff14; font-size: 14px; vertical-align: middle; letter-spacing: 0; }
.hx-comment-list { display: grid; gap: 12px; margin-bottom: 26px; }
.hx-comment { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; }
.hx-comment .hx-writer-avatar { width: 36px; height: 36px; font-size: 14px; }
.hx-comment-body { flex: 1; min-width: 0; }
.hx-comment-body > p { font-size: 15px; line-height: 1.65; color: var(--hx-soft); overflow-wrap: anywhere; }
.hx-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.hx-comment-head strong { font-size: 14px; }
.hx-comment-head time, .hx-comment-head small { font-size: 12px; color: var(--hx-dim); }
.hx-comment-reply { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #26bbff0d; box-shadow: inset 2px 0 0 var(--hx-accent); }
.hx-comment-reply > p:last-child { font-size: 14px; line-height: 1.6; color: var(--hx-soft); }
.hx-reply-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--hx-accent); }
.hx-author-widget { display: grid; justify-items: start; gap: 4px; }
.hx-author-widget h2 { margin-top: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.hx-author-widget .hx-link { margin-top: 10px; }

/* ---------- Forms (comments, join form) ---------- */
.hx-form-card { padding: clamp(20px, 3vw, 30px); border-radius: 20px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff12; }
.hx-form-card > h3 { margin-bottom: 18px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hx-form { display: grid; gap: 16px; }
.hx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hx-form-group { display: grid; gap: 8px; }
.hx-form-group > span { font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-form-group small { font-size: 12px; color: var(--hx-dim); }
.hx-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .hx-form textarea, .hx-form select { width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 12px; background: var(--hx-bg); box-shadow: inset 0 0 0 1px #ffffff17; color: var(--hx-text); font: 500 15px/1.5 var(--hx-font); transition: box-shadow .2s; }
.hx-form textarea { min-height: 140px; resize: vertical; }
.hx-form select { padding-right: 40px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffffff80 50%), linear-gradient(135deg, #ffffff80 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.hx-form input::placeholder, .hx-form textarea::placeholder { color: var(--hx-dim); }
.hx-form input:focus, .hx-form textarea:focus, .hx-form select:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--hx-accent), 0 0 0 4px #26bbff1f; }
.hx-form .hx-btn { justify-self: start; }
.hx-form-msg { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.hx-form-msg.is-success { background: #2ecc7121; color: #7fe3a8; }
.hx-form-msg.is-error { background: #ff5c5c1f; color: #ff9b9b; }

@media (max-width: 1280px) {
  .hx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .hx-blog-layout, .hx-article-layout { grid-template-columns: 1fr; }
  .hx-blog-aside, .hx-article-aside { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 760px) {
  .hx-feature-row { grid-auto-columns: 86%; }
  .hx-feature { aspect-ratio: 16 / 10; }
  .hx-blog-bar .hx-chips { order: 2; width: 100%; }
  .hx-blog-search { width: 100%; }
  .hx-posts { grid-template-columns: 1fr; gap: 30px; }
  .hx-form-row { grid-template-columns: 1fr; }
  .hx-writer-card { flex-direction: column; }
  .hx-article-body { font-size: 17px; }
}

/* ---------- Shared: manifesto copy, numbered steps, tick list ---------- */
.hx-manifesto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--hx-line); }
.hx-manifesto p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: var(--hx-muted); }
.hx-manifesto p:first-child { color: var(--hx-soft); }
.hx-join-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hx-join-steps li { display: flex; gap: 16px; padding: 18px; border-radius: 16px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; }
.hx-join-steps li > span { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #26bbff1f; color: var(--hx-accent); font-size: 14px; font-weight: 800; }
.hx-join-steps p { font-size: 15px; line-height: 1.65; color: var(--hx-soft); }
.hx-join-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.hx-join-steps--row li { flex-direction: column; gap: 12px; }
.hx-join-steps--row p { font-weight: 600; }
.hx-ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hx-ticks li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.55; color: var(--hx-soft); }
.hx-ticks li::before { content: "\f00c"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #26bbff1f; color: var(--hx-accent); font: 900 9px "Font Awesome 6 Free"; }

/* ---------- Team ---------- */
.hx-team-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hx-line); }
.hx-team-bar .hx-results { margin: 0; }
.hx-team-bar .hx-chip { display: inline-flex; align-items: center; gap: 7px; }
.hx-team-bar .hx-chip i { font-size: 12px; opacity: .75; }
.hx-roles { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: clamp(28px, 4vw, 44px); }
.hx-role-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hx-role-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #26bbff1a; color: var(--hx-accent); font-size: 15px; }
.hx-role-head h2 { font: 800 clamp(22px, 2vw, 28px)/1.2 var(--hx-font); letter-spacing: -.03em; }
.hx-role-count { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: #ffffff0d; font-size: 13px; font-weight: 600; color: var(--hx-muted); }
.hx-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.hx-member { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; transition: transform .45s var(--hx-ease), box-shadow .3s; }
.hx-member:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #ffffff26, 0 24px 50px #00000066; }
.hx-member-photo { display: block; overflow: hidden; aspect-ratio: 1; background: var(--hx-surface); }
.hx-member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hx-ease); }
.hx-member:hover .hx-member-photo img { transform: scale(1.05); }
.hx-member-info { padding: 16px 16px 0; }
.hx-member-info h3 { overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hx-member-info p { margin-top: 3px; font-size: 13px; color: var(--hx-muted); }
.hx-member-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 14px 16px 16px; }
.hx-member-info:last-child { padding-bottom: 16px; }
.hx-member-link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #ffffff0f; color: var(--hx-soft); font-size: 13px; transition: background-color .2s, color .2s; }
.hx-member-link:hover { background: var(--hx-accent); color: var(--hx-bg); }
.hx-member-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 10px; overflow: hidden; border-radius: 9px; background: #ffffff0a; font-size: 12px; font-weight: 600; color: var(--hx-muted); white-space: nowrap; text-overflow: ellipsis; }
.hx-member-tag i { color: var(--hx-accent); }

/* ---------- Join ---------- */
.hx-join { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.hx-join-info { position: sticky; top: calc(var(--hx-header-h) + 24px); }
.hx-join-form-title { font: 800 clamp(22px, 2vw, 28px)/1.2 var(--hx-font); letter-spacing: -.03em; }
.hx-join-form-lead { margin: 8px 0 24px; font-size: 14px; line-height: 1.6; color: var(--hx-muted); }
.hx-form-group > label:not(.hx-check) { font-size: 13px; font-weight: 600; color: var(--hx-soft); }
.hx-form-group small:empty { display: none; }
.hx-form-group.form-error input, .hx-form-group.form-error textarea, .hx-form-group.form-error select { box-shadow: inset 0 0 0 1px #ff6b6b; }
.hx-form-group.form-error small { color: #ff9b9b; }
.hx-check { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--hx-soft); cursor: pointer; }
.hx-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.hx-check > span[aria-hidden] { display: grid; flex-shrink: 0; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--hx-bg); box-shadow: inset 0 0 0 1px #ffffff29; color: transparent; font-size: 11px; transition: background-color .2s, box-shadow .2s, color .2s; }
.hx-check input:checked + span { background: var(--hx-accent); box-shadow: none; color: var(--hx-bg); }
.hx-check input:focus-visible + span { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hx-check strong { color: var(--hx-text); }
.hx-success-pop { position: fixed; left: 50%; bottom: 28px; z-index: 90; display: flex; align-items: center; gap: 16px; width: min(560px, calc(100vw - 32px)); padding: 18px 18px 18px 20px; border-radius: 18px; background: var(--hx-bg-2); box-shadow: 0 0 0 1px #ffffff17, 0 30px 80px #000000b3; transform: translateX(-50%); animation: hx-fade-up .7s var(--hx-ease) both; }
.hx-success-pop h2 { font-size: 16px; font-weight: 800; }
.hx-success-pop p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--hx-muted); }
.hx-success-pop .hx-btn { flex-shrink: 0; }
.hx-success-icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2ecc7129; color: #7fe3a8; font-size: 16px; }
.hx-success-icon--lg { width: 64px; height: 64px; margin-bottom: 26px; font-size: 24px; }

/* ---------- Support ---------- */
.hx-support-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; gap: 16px; }
.hx-support-how { padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; }
.hx-support-how > p { font-size: 15px; line-height: 1.7; color: var(--hx-muted); }
.hx-support-how .hx-join-steps li { background: var(--hx-bg); }
.hx-support-why { padding: clamp(22px, 3vw, 28px); }
.hx-sheet-head .hx-block-lead { margin: 8px 0 0; }
.hx-hero-title--md { font-size: clamp(34px, 4.2vw, 62px); }
.hx-signature { margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--hx-dim); }
.hx-orgs { margin-top: clamp(40px, 5vw, 64px); }
.hx-org-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hx-org { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: 20px; background: var(--hx-bg-2); box-shadow: inset 0 0 0 1px #ffffff0d; transition: transform .45s var(--hx-ease), box-shadow .3s; }
.hx-org:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #ffffff26, 0 24px 50px #00000066; }
.hx-org-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: #26bbff1a; color: var(--hx-accent); font-size: 19px; }
.hx-org h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hx-org p { flex: 1; font-size: 14px; line-height: 1.6; color: var(--hx-muted); }
.hx-org .hx-btn { margin-top: 8px; }
.hx-org .hx-btn i { font-size: 11px; opacity: .7; }
.hx-support-note { margin-top: clamp(32px, 4vw, 48px); font-size: 15px; font-weight: 600; text-align: center; color: var(--hx-muted); }

/* ---------- 404 / status pages: hero only ---------- */
.hx-lost { display: flex; align-items: center; min-height: calc(100svh - var(--hx-header-h) - 120px); padding-block: 64px; }
.hx-lost .hx-container { position: relative; }
.hx-lost-code { position: absolute; right: -2vw; top: 50%; z-index: -1; font: 900 clamp(180px, 34vw, 520px)/1 var(--hx-font); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px #ffffff14; transform: translateY(-50%); pointer-events: none; user-select: none; }
.hx-lost .hx-kicker { margin-bottom: 18px; }
.hx-lost-note { max-width: 620px; margin-top: 22px; }
.hx-lost-note p { font-size: 14px; line-height: 1.65; color: var(--hx-soft); }

@media (max-width: 1080px) {
  .hx-join { grid-template-columns: 1fr; }
  .hx-join-info { position: static; }
  .hx-support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hx-manifesto { grid-template-columns: 1fr; }
  .hx-join-steps--row, .hx-org-grid { grid-template-columns: 1fr; }
  .hx-members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hx-member-info h3 { font-size: 15px; }
  .hx-team-bar .hx-chips { width: 100%; }
  .hx-success-pop { flex-wrap: wrap; }
  .hx-lost-code { right: -6vw; top: 18%; }
}