/* ============================ //GRID - A MEMBER'S ARTICLE, READ ============================
   grid/article-view.php + grid/article-feedback.php (grid/article-view.js), from the user's design
   "ADAPT Grid Article": the long read on the left, scrolling on its own; the //GRID panel on the right.
   In the //GRID viewer it fills #gv_host; on its own page (grid/article/<slug>) the window under the
   site header. Under 980px the two stack and the page scrolls as one.
   ========================================================================== */
.gva { --ink: #0a0a0a; --paper: #f5f5f3; --g: #00FF50; --mute: #4a4a46; --faint: #77776f; --line: #deded9;
       display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: 100%; background: var(--ink); color: var(--ink); font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; }
.gva *, .gva *::before, .gva *::after { box-sizing: border-box; }
.gva h1, .gva h2, .gva p, .gva figure, .gva blockquote, .gva dl, .gva dd { margin: 0; }
.gva a { color: inherit; text-decoration: none; }
.gva button { font-family: 'Archivo', sans-serif; cursor: pointer; }
.gva ::selection { background: var(--g); color: var(--ink); }
.gva.is-page { height: calc(100vh - 74px); height: calc(100dvh - 74px); margin-top: 74px; }
body.gva-page #hpMain { background: var(--ink, #0a0a0a); }
/* the site's message and notification buttons sit above the note box rather than on it */
@media (min-width: 981px) { .hp.gva-page #footer #notification_bar { bottom: 132px; } .hp.gva-page #footer .footer_popup { bottom: 206px; } }

/* ---------------------------------------------------------------- the left: the article */
.gva-left { position: relative; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.gva-glow { position: absolute; left: 0; right: 0; top: 0; height: 900px; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, rgba(0,255,80,.08), transparent 55%); }
.gva-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 clamp(14px, 2.4vw, 28px); background: rgba(10,10,10,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #1e1e1e; color: var(--paper); }
.gva-sq { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid #3a3a3a; background: transparent; color: var(--paper) !important; font: 400 18px/1 'Archivo', sans-serif; padding: 0; }
.gva-sq:hover { background: var(--g); border-color: var(--g); color: var(--ink) !important; }
.gva-sq:disabled { opacity: .35; pointer-events: none; }
.gva-logo { font: 900 17px 'Archivo', sans-serif; letter-spacing: -.04em; } .gva-logo span { color: var(--g); }
.gva-tag { padding: 4px 8px; background: var(--g); color: var(--ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.gva-top-t { min-width: 0; flex: 1; font: 700 13px 'Archivo', sans-serif; color: #bdbdb8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gva-pos { margin-left: auto; font: 800 11px 'Archivo', sans-serif; letter-spacing: .14em; color: #9a9a95; white-space: nowrap; }
.gva-pos:empty { display: none; }
.gva-edit { margin-left: auto; padding: 9px 12px; background: var(--g); color: var(--ink) !important; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; white-space: nowrap; }
.gva-flag { position: relative; margin: 14px clamp(14px, 2.4vw, 32px) 0; padding: 10px 14px; background: #ffb020; color: var(--ink); font: 700 12.5px 'Archivo', sans-serif; border: 2px solid var(--ink); }
.gva-flag.is-warn { background: #ffd9d6; }

.gva-sheet { position: relative; margin: clamp(14px, 2.4vw, 32px); background: var(--paper); border: 2px solid var(--ink); }
.gva-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 2px solid var(--ink); }
.gva-hero.no-img { grid-template-columns: minmax(0, 1fr); }
.gva-hero-t { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px) clamp(22px, 3vw, 36px); }
.gva-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.gva-cat { padding: 5px 9px; background: var(--ink); color: var(--g); font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; }
.gva-when { font: 700 13px 'Archivo', sans-serif; color: #2a2a2a; }
.gva-community { padding: 4px 8px; border: 1px solid var(--ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.gva-hero h1 { font: 900 clamp(40px, 4.6vw, 82px)/.9 'Archivo', sans-serif; letter-spacing: -.055em; margin: 0 0 22px; text-wrap: balance; overflow-wrap: anywhere; }
.gva-hl { background: var(--g); box-shadow: 0 0 0 4px var(--g); }
.gva-dek { font: 500 clamp(16px, 1.35vw, 20px)/1.5 'Archivo', sans-serif; color: #2a2a2a; max-width: 46ch; margin: 0 0 26px !important; text-wrap: pretty; }
.gva-by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; border-top: 2px solid var(--ink); }
.gva-av { width: 40px; height: 40px; flex: none; border-radius: 999px; background: #333 center/cover; border: 2px solid var(--g); display: grid; place-items: center; color: var(--paper) !important; font: 900 15px 'Archivo', sans-serif; }
.gva-av.lg { width: 44px; height: 44px; }
.gva-av.sm { width: 36px; height: 36px; border: 0; font-size: 13px; }
.gva-by-t { min-width: 0; flex: 1; }
.gva-by-t a { display: block; font: 900 14px 'Archivo', sans-serif; }
.gva-by-t span { display: block; font: 600 12px 'Archivo', sans-serif; color: var(--mute); }
.gva-share { display: flex; gap: 6px; }
.gva-share a, .gva-share button { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 800 12px 'Archivo', sans-serif; padding: 0; }
.gva-share a:hover, .gva-share button:hover { background: var(--g); }
.gva-share svg { width: 14px; height: 14px; }
.gva-hero-i { position: relative; min-width: 0; min-height: 520px; overflow: hidden; background: #141414; border-left: 2px solid var(--ink); }
.gva-hero-i > div, .gva-hero-i > video { position: absolute; inset: 0; width: 100%; height: 100%; background: center/cover; object-fit: cover; }
.gva-credit { position: absolute; left: 14px; bottom: 14px; padding: 5px 9px; background: rgba(10,10,10,.82); color: var(--paper); font: 600 11px 'Archivo', sans-serif; }

.gva-body { position: relative; max-width: 820px; margin: 0 auto; padding: clamp(34px, 4vw, 60px) clamp(20px, 4vw, 60px) clamp(40px, 5vw, 70px); }
.gva-blk { position: relative; transition: background .2s; }
.gva-p { font: 500 clamp(16.5px, 1.25vw, 18.5px)/1.7 'Archivo', sans-serif; margin: 0 0 18px; text-wrap: pretty; overflow-wrap: break-word; }
.gva-p a { text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; }
.gva-p ul, .gva-p ol { margin: 6px 0; padding-left: 22px; }
.gva-blk.is-on .gva-p, .gva-blk.is-flash .gva-p, .gva-blk.is-on .gva-quote, .gva-blk.is-flash .gva-quote { background: rgba(0,255,80,.22); box-shadow: -10px 0 0 rgba(0,255,80,.22), 10px 0 0 rgba(0,255,80,.22); }
.gva-h { font: 900 clamp(26px, 2.4vw, 36px)/1 'Archivo', sans-serif; letter-spacing: -.04em; margin: 34px 0 14px !important; scroll-margin-top: 80px; }
.gva-quote { margin: 30px 0 !important; padding: 6px 0 6px 22px; border-left: 6px solid var(--g); font: 800 clamp(22px, 2vw, 30px)/1.25 'Archivo', sans-serif; letter-spacing: -.025em; }
.gva-quote span { display: block; margin-top: 10px; font: 700 13px 'Archivo', sans-serif; letter-spacing: 0; color: var(--mute); }
.gva-mark { position: absolute; right: calc(-1 * clamp(34px, 3.4vw, 52px)); top: 4px; min-width: 30px; height: 26px; padding: 0 6px; display: grid; place-items: center; font: 800 11px 'Archivo', sans-serif; background: transparent; color: #9a9a95; border: 1px solid #cfcfca; }
.gva-blk.is-quote .gva-mark { top: 34px; }
.gva-mark.has-n { background: var(--ink); color: var(--g); border-color: var(--ink); }
.gva-mark.is-on, .gva-mark:hover { background: var(--g); color: var(--ink); border-color: var(--ink); }
.gva-img, .gva-video { margin: 30px calc(-1 * clamp(0px, 4vw, 60px)) 8px !important; }
.gva-img button { display: block; width: 100%; padding: 0; border: 2px solid var(--ink); background: #141414; cursor: zoom-in; }
.gva-img img { display: block; width: 100%; height: auto; }
.gva-video { position: relative; aspect-ratio: 16 / 9; background: #141414 center/cover; border: 2px solid var(--ink); cursor: pointer; overflow: hidden; }
.gva-video.is-file { cursor: default; } .gva-video video, .gva-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gva-play { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; display: grid; place-items: center; background: var(--g); color: var(--ink); font-size: 24px; }
.gva-video-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: var(--paper); }
.gva-video-t small { display: block; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); } .gva-video-t b { font: 800 15px 'Archivo', sans-serif; }
.gva-cap { margin: 0 0 22px !important; font: 600 12.5px 'Archivo', sans-serif; color: var(--mute); }
.gva-gal { display: grid; gap: 6px; margin: 30px 0 8px; grid-template-columns: repeat(2, 1fr); }
.gva-gal.n1 { grid-template-columns: 1fr; } .gva-gal.n3 { grid-template-columns: repeat(3, 1fr); } .gva-gal.n4 { grid-template-columns: repeat(4, 1fr); }
.gva-gal button { padding: 0; border: 2px solid var(--ink); aspect-ratio: 1; background: #141414; cursor: zoom-in; } .gva-gal span { display: block; width: 100%; height: 100%; background: center/cover; }
.gva-legacy { font: 500 18px/1.7 'Archivo', sans-serif; } .gva-legacy img { max-width: 100%; height: auto; }
.gva-end { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--ink); }
.gva-tagx { padding: 6px 10px; border: 1px solid var(--ink); font: 800 12px 'Archivo', sans-serif; }
.gva-like { margin-left: auto; padding: 6px 12px; font: 800 12.5px 'Archivo', sans-serif; background: #fff; border: 2px solid var(--ink); color: var(--ink); }
.gva-like.is-on { background: var(--g); }

/* ---------------------------------------------------------------- the right: the //GRID panel */
.gva-panel { position: relative; z-index: 2; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--paper); border-left: 2px solid var(--ink); }
.gva-who { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.gva-who-t { min-width: 0; flex: 1; } .gva-who-t > a { display: block; font: 900 15px 'Archivo', sans-serif; } .gva-who-t > span { display: block; font: 600 12px 'Archivo', sans-serif; color: var(--mute); }
.gva-follow { flex: none; padding: 8px 12px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; background: var(--ink); color: var(--g) !important; border: 0; white-space: nowrap; }
.gva-follow.is-on { background: var(--g); color: var(--ink) !important; }
.gva-follow.line { background: transparent; color: var(--ink) !important; border: 2px solid var(--ink); }
.gva-mod { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: repeating-linear-gradient(-45deg, #fff6e0 0 8px, var(--paper) 8px 16px); border-bottom: 1px solid var(--line); }
.gva-mod span { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: #7a4d07; margin-right: auto; }
.gva-mod button { padding: 7px 10px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .12em; background: var(--ink); color: var(--paper); border: 0; }
.gva-mod button[data-ga-mod="hide"]:hover { background: #b3261e; }
.gva-tabs { flex: none; display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 2px solid var(--ink); }
.gva-tabs > button { padding: 13px 0; border: 0; background: none; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--faint); }
.gva-tabs > button.is-on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--g); }
.gva-sort { margin-left: auto; height: 32px; border: 1px solid var(--ink); background: #fff; padding: 0 8px; font: 700 12px 'Archivo', sans-serif; color: var(--ink); border-radius: 0; }
.gva-sort[hidden] { display: none; }
.gva-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gva-empty { padding: 26px 16px; font: 600 14px/1.5 'Archivo', sans-serif; color: var(--mute); }
.gvc { display: flex; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.gvc.is-reply { padding: 12px 0 0; border-bottom: 0; }
.gvc-b { min-width: 0; flex: 1; }
.gvc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 5px !important; }
.gvc-who a { font: 900 13.5px 'Archivo', sans-serif; } .gvc-who span { font: 600 11.5px 'Archivo', sans-serif; color: var(--faint); }
.gvc-q { display: block; width: 100%; text-align: left; margin-bottom: 7px; padding: 6px 9px; border: 0; border-left: 3px solid var(--g); background: #fff; font: 600 12px/1.4 'Archivo', sans-serif; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gvc-q:hover { color: var(--ink); }
.gvc-t { font: 500 14px/1.5 'Archivo', sans-serif; text-wrap: pretty; overflow-wrap: break-word; }
.gvc-t a { text-decoration: underline; }
.gvc-a { display: flex; align-items: center; gap: 14px; margin-top: 8px !important; }
.gvc-a button { padding: 0; border: 0; background: none; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; color: var(--mute); }
.gvc-a button:hover, .gvc-use.is-on { color: var(--ink); } .gvc-use.is-on b { background: var(--g); padding: 0 3px; }
.gvc-a button.is-warn:hover { color: #b3261e; }
.gvc-replies { margin-top: 4px; padding-left: 4px; border-left: 2px solid var(--line); }
.gva-facts { padding: 16px; } .gva-facts > div { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.gva-facts dt { flex: none; width: 96px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--mute); padding-top: 2px; }
.gva-facts dd { min-width: 0; font: 700 13.5px/1.4 'Archivo', sans-serif; overflow-wrap: anywhere; }
.gva-editbtn { display: block; margin: 0 16px 16px; padding: 12px; background: var(--ink); color: var(--g) !important; text-align: center; font: 800 11px 'Archivo', sans-serif; letter-spacing: .14em; }
.gva-compose { flex: none; padding: 12px 14px; border-top: 2px solid var(--ink); background: #fff; }
.gva-compose-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; min-height: 18px; }
.gva-hint { font: 600 12px 'Archivo', sans-serif; color: var(--mute); }
.gva-chip { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 0; background: var(--g); color: var(--ink); font: 800 11px 'Archivo', sans-serif; letter-spacing: .06em; text-align: left; }
.gva-chip[hidden], .gva-hint[hidden] { display: none; }
.gva-chip b { flex: none; } .gva-chip span { min-width: 0; flex: 1; font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gva-chip i { flex: none; font-style: normal; font-weight: 400; }
.gva-compose-r { display: flex; gap: 8px; }
.gva-compose textarea { flex: 1; min-width: 0; border: 2px solid var(--ink); background: #fff; padding: 9px 11px; outline: none; resize: none; font: 500 13.5px/1.45 'Archivo', sans-serif; color: var(--ink); border-radius: 0; }
.gva-compose textarea:focus { box-shadow: 0 0 0 3px rgba(0,255,80,.45); }
.gva-send { flex: none; align-self: stretch; padding: 0 14px; border: 0; background: var(--ink); color: var(--g); font: 800 11px 'Archivo', sans-serif; letter-spacing: .14em; }
.gva-send:disabled { background: #deded9; color: #9a9a95; cursor: default; }
.gva-join { flex: none; padding: 14px 16px; border-top: 2px solid var(--ink); background: #fff; }
.gva-join b { display: block; font: 900 14px 'Archivo', sans-serif; } .gva-join p { margin: 4px 0 10px !important; font: 600 12.5px/1.45 'Archivo', sans-serif; color: var(--mute); }
.gva-join div { display: flex; gap: 8px; }
.gva-lb { position: fixed; inset: 0; z-index: 990; background: rgba(5,5,5,.94); cursor: zoom-out; }
.gva-lb[hidden] { display: none; }
.gva-lb-i { position: absolute; inset: 4vh 4vw; background: center/contain no-repeat; }
.gva-lb button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font-size: 22px; }

/* ---------------------------------------------------------------- smaller screens: stacked */
@media (max-width: 1100px) { .gva-hero { grid-template-columns: minmax(0, 1fr); } .gva-hero-i { min-height: 320px; order: -1; border-left: 0; border-bottom: 2px solid var(--ink); } }
@media (max-width: 980px) {
    .gva { grid-template-columns: minmax(0, 1fr); height: auto; }
    .gva.is-viewer { height: 100%; overflow-y: auto; }
    .gva.is-page { height: auto; }
    .gva-left { overflow: visible; height: auto; }
    .gva.is-page .gva-top { position: relative; }
    .gva-panel { height: auto; border-left: 0; border-top: 2px solid var(--ink); }
    .gva-list { max-height: 520px; }
    .gva-mark { position: static; display: inline-grid; margin: -10px 0 16px; }
    .gva-blk.is-quote .gva-mark { margin-top: -18px; }
}
@media (max-width: 600px) { .gva-sheet { margin: 0; border-left: 0; border-right: 0; } .gva-top [data-hide] { display: none; } .gva-hero h1 { font-size: 40px; } }