/* //GRID on the new site shell (grid/grid2.php). grid.css is loaded first and still does the
   mechanics — the masonry, the phone's snapping panels, the viewer's zoom, the composer's slide —
   and this file gives them the new design: black ground, #00FF50, square corners, Archivo, a
   light feedback column and a light composer. Everything is under body.gd_shell so the old page
   (grid/classic) is untouched. */

body.gd_shell { background: var(--ink); }
body.gd_shell.disable-scroll { overflow: hidden; }

/* — the palette grid.css reads, set to the new design — */
body.gd_shell .gd, body.gd_shell .gv {
    --gd-ink: #f5f5f3; --gd-dim: #bdbdb8; --gd-faint: #8d8d88;
    --gd-bg: #0a0a0a; --gd-card: #141414; --gd-surface: #111; --gd-well: #050505;
    --gd-line: #232323; --gd-line-strong: #3a3a3a; --gd-panel: rgba(255,255,255,.05);
    --gd-lime: #00FF50; --gd-lime-ink: #00FF50; --gd-like: #00FF50;
    --gd-halo: rgba(0,0,0,.8); --gd-danger: #ff8a6a;
}
body.gd_shell .gc, body.gd_shell .gv_side {
    --gd-ink: #0a0a0a; --gd-dim: #4a4a46; --gd-faint: #77776f;
    --gd-bg: #f5f5f3; --gd-card: #fff; --gd-surface: #f5f5f3; --gd-well: #fff;
    --gd-line: #deded9; --gd-line-strong: #0a0a0a; --gd-panel: rgba(10,10,10,.05);
    --gd-lime: #00FF50; --gd-lime-ink: #0a0a0a; --gd-orange-ink: #0a0a0a; --gd-like: #0a0a0a;
    --gd-halo: rgba(255,255,255,.9); --gd-danger: #b23c00;
}
body.gd_shell .gd, body.gd_shell .gv, body.gd_shell .gc { font-family: 'Archivo', sans-serif; }

/* — hero — */
.gd2-hero { position: relative; min-height: 560px; height: 66vh; overflow: hidden; background: var(--ink); color: var(--paper); }
.gd2-hero-px { position: absolute; left: 0; right: 0; top: -14%; height: 128%; }
.hp-js .gd2-hero-px .hp-bg { animation: gd2-push 2.4s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes gd2-push { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.gd2-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.6) 48%, rgba(10,10,10,.2) 80%), linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0) 40%); }
.gd2-ghost { position: absolute; right: -4%; bottom: -30px; font: 900 clamp(160px, 28vw, 460px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(0,255,80,.28); white-space: nowrap; pointer-events: none; }
.gd2-hero-text { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(40px, 7vh, 72px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; }
.gd2-hero-main { min-width: 0; flex: 1 1 520px; }
.gd2-hero .hp-kick { margin-bottom: 20px; }
.gd2-hero .hp-kick .hp-hatch { transform: none; }
.gd2-h1 { font: 900 clamp(62px, 10vw, 168px)/.82 'Archivo', sans-serif; letter-spacing: -.06em; margin: 0 0 22px; }
.gd2-h1 span { color: var(--g); }
.gd2-intro { font: 500 clamp(15px, 1.3vw, 18px)/1.5 'Archivo', sans-serif; color: #d0d0cc; max-width: 48ch; margin: 0; text-wrap: pretty; }
.gd2-potw { flex: none; display: block; width: min(320px, 100%); background: rgba(10,10,10,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid #2a2a2a; color: var(--paper); transition: border-color .25s, transform .25s; }
.gd2-potw:hover { border-color: var(--g); color: var(--paper); transform: translateY(-3px); }
.gd2-potw-k { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #2a2a2a; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); }
.gd2-potw-b { display: flex; gap: 12px; padding: 12px 14px; }
.gd2-potw-img { width: 64px; height: 64px; flex: none; background: #1a1a1a center / cover no-repeat; }
.gd2-potw-t { min-width: 0; display: flex; flex-direction: column; }
.gd2-potw-t strong { font: 900 16px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gd2-potw-by { font: 500 12px 'Archivo', sans-serif; color: #bdbdb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd2-potw-n { font: 700 12px 'Archivo', sans-serif; margin-top: 5px; }
.gd2-potw-n i { font-style: normal; color: var(--g); }

/* — the wall's frame — */
body.gd_shell .gd { border-radius: 0; padding: 0; overflow: visible; background: var(--gd-bg); }
body.gd_shell .gd a:hover { color: var(--g); }

/* — the sticky bar: under the header, and up with it when it shrinks — */
.gd2-bar { position: sticky; top: 74px; z-index: 15; display: flex; align-items: center; gap: 14px; padding: 12px var(--gut); background: rgba(10,10,10,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; transition: top .35s cubic-bezier(.2,.7,.2,1); }
.hp-scrolled .gd2-bar { top: 40px; }
.gd2-logo { display: none; }
body.gd_shell .gd_filters { flex: 1; min-width: 0; padding: 0; }
body.gd_shell .gd_filter_row { gap: 8px; }
body.gd_shell .gd_chip { flex: none; padding: 9px 14px; border-radius: 0; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font: 800 12px 'Archivo', sans-serif; letter-spacing: .06em; transition: background .2s, color .2s, border-color .2s; }
body.gd_shell .gd_chip:hover { border-color: var(--g); }
body.gd_shell .gd_chip.is_on { background: var(--g); border-color: var(--g); color: var(--ink); }
.gd2-order { flex: none; display: flex; border: 1px solid #3a3a3a; }
.gd2-order button { cursor: pointer; padding: 8px 12px; border: 0; background: transparent; color: #bdbdb8; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; transition: background .2s, color .2s; }
.gd2-order button:hover { color: var(--paper); }
.gd2-order button.on { background: var(--paper); color: var(--ink); }
.gd2-search-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); transition: border-color .2s, color .2s; }
.gd2-search-btn:hover { border-color: var(--g); color: var(--g); }
.gd2-search-btn svg { width: 17px; height: 17px; }
body.gd_shell .gd_search { padding: 14px var(--gut) 0; gap: 0; }
body.gd_shell .gd_search input { border-radius: 0; height: 46px; border: 2px solid var(--g); background: #141414; font: 500 14.5px 'Archivo', sans-serif; }
body.gd_shell .gd_search_clear { width: 46px; border: 2px solid var(--g); border-left: 0; background: var(--g); color: var(--ink); font: 400 22px/1 'Archivo', sans-serif; }

/* — composer bar — */
.gd2-wall { padding: 22px var(--gut) 80px; }
body.gd_shell .gd_composer { flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 12px; border-radius: 0; background: #141414; border: 1px solid #262626; }
body.gd_shell .gd_composer .gd_avatar { width: 40px; height: 40px; border: 2px solid var(--g); background-color: #333; }
body.gd_shell .gd_composer input { flex: 1 1 260px; height: 44px; padding: 0 14px; background: #0a0a0a; border: 1px solid #2a2a2a; color: var(--paper); cursor: text; font: 500 14px 'Archivo', sans-serif; transition: border-color .2s; }
body.gd_shell .gd_composer input::placeholder { color: #8d8d88; }
body.gd_shell .gd_composer input:hover { border-color: var(--g); }
body.gd_shell .gd_btn { border-radius: 0; padding: 11px 13px; border: 1px solid #3a3a3a; background: transparent; color: var(--paper); font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; transition: background .2s, color .2s, border-color .2s; }
body.gd_shell .gd_btn:hover { border-color: var(--paper); }
body.gd_shell .gd_btn.gd_publish { padding: 11px 16px; font-size: 11.5px; background: var(--g); border-color: var(--g); color: var(--ink); }
body.gd_shell .gd_btn.gd_publish:hover { background: var(--paper); border-color: var(--paper); }

/* — the wall — */
body.gd_shell .gd_feed { padding: 0; column-count: 4; column-gap: 14px; }
@media (max-width: 1200px) { body.gd_shell .gd_feed { column-count: 3; } }
@media (max-width: 980px) { body.gd_shell .gd_feed { column-count: 2; } }
body.gd_shell .gd_post { margin: 0 0 14px; border-radius: 0; background: #141414; border: 1px solid #232323; cursor: zoom-in; transition: border-color .25s; }
body.gd_shell .gd_post:hover { border-color: var(--g); }
/* arriving: up and in as they reach the screen, a batch at a time (grid2.js) */
.hp-js body.gd_shell .gd_post.gd-rv { opacity: 0; transform: translateY(28px); }
.hp-js body.gd_shell .gd_post.gd-rv.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--gd-d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--gd-d, 0ms), border-color .25s; }
body.gd_shell .gd_media { overflow: hidden; background: #0f0f0f; }
body.gd_shell .gd_img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s; }
body.gd_shell .gd_post:hover .gd_img { transform: scale(1.04); }
body.gd_shell .gd_noimg { background: repeating-linear-gradient(-45deg, #111 0 20px, #161616 20px 40px); }
body.gd_shell .gd_noimg p { font: 700 16px/1.4 'Archivo', sans-serif; letter-spacing: -.01em; }
body.gd_shell .gd_badges { top: 10px; left: 10px; gap: 6px; }
body.gd_shell .gd_badge { border-radius: 0; padding: 5px 8px; font: 800 10px/1.2 'Archivo', sans-serif; letter-spacing: .14em; background: var(--g); color: var(--ink); }
body.gd_shell .gd_tone_plain { background: var(--paper); }
body.gd_shell .gd_tone_blue { background: #2d6ea8; color: var(--paper); }
body.gd_shell .gd_tone_violet { background: #8f4bd0; color: var(--paper); }
body.gd_shell .gd_tone_grey { background: #3a3a3a; color: var(--paper); }
body.gd_shell .gd_tone_review { background: var(--ink); color: var(--g); box-shadow: inset 0 0 0 1px var(--g); }
body.gd_shell .gd_play { width: 58px; height: 58px; background: rgba(10,10,10,.72); border: 2px solid var(--g); color: var(--g); transition: background .2s, color .2s; }
body.gd_shell .gd_play:hover { background: var(--g); color: var(--ink); }
body.gd_shell .gd_meta { display: flex; flex-direction: column; padding: 14px 16px; }
body.gd_shell .gd_title { order: 0; font: 800 16px/1.25 'Archivo', sans-serif; letter-spacing: -.02em; padding: 0 0 10px; text-wrap: balance; }
body.gd_shell .gd_by { order: 2; gap: 10px; }
body.gd_shell .gd_by .gd_avatar { width: 32px; height: 32px; background-color: #333; }
body.gd_shell .gd_name { font: 700 13px 'Archivo', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gd_shell .gd_handle, body.gd_shell .gd_role { display: none; }
body.gd_shell .gd_sub { display: block; font: 500 11.5px 'Archivo', sans-serif; color: #8d8d88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gd_shell .gd_text { order: 3; }
/* a review request's text is the question it asks, so it shows, in the dashed box */
body.gd_shell .gd_text.is_ask { order: 1; max-height: none; margin: 0 0 12px; padding: 9px 11px; border: 1px dashed var(--g); font: 500 12.5px/1.45 'Archivo', sans-serif; color: #d0d0cc; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.gd_shell .gd_actions { order: 4; gap: 16px; margin-top: 12px; padding: 11px 0 0; border-top: 1px solid #232323; }
body.gd_shell .gd_act { font: 700 12.5px 'Archivo', sans-serif; color: #bdbdb8; }
body.gd_shell .gd_act:hover, body.gd_shell .gd_like.is_on { color: var(--g); }
body.gd_shell .gd_act .material-symbols-outlined { font-size: 17px; }
body.gd_shell .gd_review { margin-left: auto; padding: 6px 10px; background: var(--g); color: var(--ink); }
body.gd_shell .gd_review:hover { background: var(--paper); color: var(--ink); }
body.gd_shell .gd_review .material-symbols-outlined { display: none; }
body.gd_shell .gd_review .gd_word { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
body.gd_shell .gd_empty { padding: 60px 0; font: 800 18px 'Archivo', sans-serif; color: #8d8d88; column-span: all; }
body.gd_shell .gd_status { display: none; }

/* — the bottom of the wall — */
.gd2-end { display: flex; flex-direction: column; align-items: center; margin-top: 30px; min-height: 60px; color: var(--paper); }
.gd2-loading, .gd2-done { display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gd2-end.is-loading .gd2-loading, .gd2-end.is-done .gd2-done { display: flex; }
.gd2-loading > span:last-child { font: 800 11px 'Archivo', sans-serif; letter-spacing: .18em; color: #8d8d88; }
.gd2-load-bar { width: 160px; height: 10px; background: repeating-linear-gradient(-45deg, var(--g) 0 5px, transparent 5px 10px); background-size: 28px 10px; animation: gd2-hatch .8s linear infinite; }
@keyframes gd2-hatch { to { background-position: 28px 0; } }
.gd2-done { padding: 10px 0 20px; }
.gd2-done strong { font: 900 22px 'Archivo', sans-serif; letter-spacing: -.03em; }
.gd2-done > span { font: 500 13px 'Archivo', sans-serif; color: #8d8d88; max-width: 52ch; }
.gd2-done button { cursor: pointer; margin-top: 4px; border: 2px solid var(--paper); background: transparent; color: var(--paper); padding: 12px 20px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; transition: background .2s, color .2s, border-color .2s; }
.gd2-done button:hover { background: var(--g); color: var(--ink); border-color: var(--g); }

/* ============================ ONE POST OPENED ============================
   The whole screen, over the header, sliding in from the right. */
body.gd_shell #gv_host.gv_host { top: 0; bottom: 0; left: 0; right: 0; z-index: 70; border-radius: 0; background: var(--ink); transition: transform .5s cubic-bezier(.7,0,.2,1), box-shadow .5s; }
body.gd_shell #gv_host.gv_host.is_open { box-shadow: -30px 0 80px rgba(0,0,0,.6); }
body.gd_shell .gv { background: var(--ink); }
body.gd_shell .gv_stage { position: relative; overflow: hidden; background: #050505; color: var(--paper); }
body.gd_shell .gv_bar, body.gd_shell .gv_full { display: none; }
/* the picture's own colours, blurred, behind it, then a vignette */
.gd_shell .gv_blur { display: block; position: absolute; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(40px) saturate(1.3); opacity: .55; transform: scale(1.1); pointer-events: none; }
.gd_shell .gv_blur::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(5,5,5,.15) 0%, rgba(5,5,5,.88) 75%); }
/* the picture sits clear of the bar at the top and the caption at the bottom */
body.gd_shell .gv_media { position: absolute; inset: 70px 48px 190px; z-index: 2; background: transparent; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
/* stepping to another post: the picture drops away, the next one rises in (grid2.js) */
body.gd_shell .gv_media.gv-leave { opacity: 0; transform: translateY(calc(var(--gv-dir, 1) * -40px)) scale(.98); transition: opacity .16s, transform .16s; }
body.gd_shell .gv_media.gv-enter { opacity: 0; transform: translateY(calc(var(--gv-dir, 1) * 40px)) scale(.98); transition: none; }
.gd_shell .gv_hud { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(180deg, rgba(0,0,0,.7), transparent); }
.gv_hud_logo { font: 900 17px 'Archivo', sans-serif; letter-spacing: -.04em; }
.gv_hud_logo span { color: var(--g); }
.gv_hud_hatch { width: 30px; height: 9px; background: repeating-linear-gradient(-45deg, var(--g) 0 3px, transparent 3px 6px); }
.gv_hud_pos { margin-left: auto; font: 900 13px 'Archivo', sans-serif; letter-spacing: .08em; color: #8d8d88; }
.gv_hud_pos b { color: var(--g); font-weight: 900; }
.gv_hud_btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: var(--paper); font: 400 20px/1 'Archivo', sans-serif; transition: background .2s, color .2s, border-color .2s; }
.gv_hud_btn:hover { background: var(--g); color: var(--ink); border-color: var(--g); }
.gv_hud_btn svg { width: 18px; height: 18px; }
.gv_fs_off { display: none; }
.gv_stage.is_full .gv_fs_on { display: none; }
.gv_stage.is_full .gv_fs_off { display: inline; }
.gd_shell .gv_caption { display: block; position: absolute; left: 24px; right: 110px; bottom: 104px; z-index: 5; }
.gv_cap_t { margin: 0 0 10px; font: 900 clamp(24px, 2.4vw, 38px)/1 'Archivo', sans-serif; letter-spacing: -.04em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gv_cap_by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.gv_cap_by .gd_avatar { width: 28px; height: 28px; border: 2px solid var(--g); background-color: #333; }
body.gd_shell .gv_cap_name { font: 800 13.5px 'Archivo', sans-serif; white-space: nowrap; color: var(--paper); }
.gv_cap_sub { font: 500 13px 'Archivo', sans-serif; color: #bdbdb8; white-space: nowrap; }
.gd_shell .gv_side_like { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; cursor: pointer; padding: 5px 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(10,10,10,.55); color: var(--paper); font: 800 12px 'Archivo', sans-serif; transition: background .2s, color .2s, border-color .2s; }
.gd_shell .gv_side_like:hover { border-color: var(--g); }
.gd_shell .gv_side_like.is_on { background: var(--g); border-color: var(--g); color: var(--ink); }
.gv_heart { font-size: 14px; line-height: 1; }
/* a dot per post around this one; the lit one is where you are */
.gd_shell .gv_dots { display: flex; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 5; flex-direction: column; gap: 6px; }
.gv_dots button { width: 4px; height: 10px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,.35); transition: height .3s, background .2s; }
.gv_dots button:hover { background: var(--paper); }
.gv_dots button.on { height: 26px; background: var(--g); }
/* THE FEED / PREV / NEXT, bottom right */
body.gd_shell .gv_nav { display: flex; z-index: 6; right: 22px; bottom: 22px; gap: 10px; }
body.gd_shell .gv_nav_btn { gap: 7px; color: var(--paper); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; text-shadow: none; }
body.gd_shell .gv_nav_icon { width: 54px; height: 54px; border-radius: 0; background: rgba(10,10,10,.65); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s, color .2s; }
body.gd_shell .gv_nav_icon .material-symbols-outlined { font-size: 22px; }
body.gd_shell .gv_nav_btn:hover .gv_nav_icon { background: var(--paper); color: var(--ink); border-color: var(--paper); }
body.gd_shell .gv_nav_btn.is_primary .gv_nav_icon { background: var(--g); border-color: var(--g); color: var(--ink); }
body.gd_shell .gv_nav_btn.is_primary:hover .gv_nav_icon { background: var(--paper); border-color: var(--paper); }
body.gd_shell .gv_nav_btn:disabled:hover .gv_nav_icon { background: rgba(10,10,10,.65); color: var(--paper); border-color: rgba(255,255,255,.3); }
body.gd_shell .gv.is_playing .gv_nav { bottom: 22px; }
body.gd_shell .gv.is_playing .gv_caption { opacity: 0; pointer-events: none; }
body.gd_shell .gv_zoom_tools { left: 24px; bottom: 56px; }
/* the layer shows while the cursor is over the picture, and steps back when it leaves */
.gd_shell .gv_hud, .gd_shell .gv_caption, .gd_shell .gv_dots { transition: opacity .28s ease; }
@media (hover: hover) and (pointer: fine) {
    .gd_shell .gv_stage.is_quiet .gv_hud, .gd_shell .gv_stage.is_quiet .gv_caption, .gd_shell .gv_stage.is_quiet .gv_dots { opacity: 0; pointer-events: none; }
    .gd_shell .gv_stage.is_quiet:focus-within .gv_hud, .gd_shell .gv_stage.is_quiet:focus-within .gv_caption, .gd_shell .gv_stage.is_quiet:focus-within .gv_dots { opacity: 1; pointer-events: auto; }
}
/* the whole section, full screen */
.gd_shell .gv_stage:fullscreen { width: 100vw; height: 100vh; }
.gd_shell .gv_stage:fullscreen .gv_media { inset: 70px 60px 170px; }
body.gd_shell .gv_textonly { font: 700 clamp(20px, 2.2vw, 30px)/1.3 'Archivo', sans-serif; letter-spacing: -.02em; color: var(--paper); }

/* the light column */
body.gd_shell .gv_side { background: var(--paper); color: var(--ink); border-left: 0; }
body.gd_shell .gv_side a { color: var(--ink); }
.gd_shell .gv_author { display: flex; align-items: center; gap: 11px; flex: none; padding: 14px 16px; border-bottom: 1px solid #deded9; }
.gd_shell .gv_author .gd_avatar { width: 40px; height: 40px; border: 2px solid var(--g); background-color: #ccc; }
.gv_author_text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.gv_author_text a { font: 800 14px 'Archivo', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv_author_text a:hover { text-decoration: underline; }
.gv_author_text span { font: 500 12px 'Archivo', sans-serif; color: #4a4a46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv_follow { flex: none; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--g); padding: 8px 12px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; transition: background .2s, color .2s; }
.gv_follow:hover { background: var(--g); color: var(--ink); border-color: var(--g); }
.gv_follow.is_on { background: transparent; color: var(--ink); }
.gv_follow:disabled { opacity: .5; }
body.gd_shell .gv_side_head { gap: 18px; padding: 0 16px; border-bottom: 2px solid var(--ink); }
body.gd_shell .gv_tab { padding: 14px 0 12px; border: 0; color: #77776f; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
body.gd_shell .gv_tab.is_on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--g); }
body.gd_shell .gv_tab_n { font-size: 12px; }
body.gd_shell .gv_sort { margin: 0; border-radius: 0; border: 1px solid #cfcfca; background: #fff; color: var(--ink); font: 700 11.5px 'Archivo', sans-serif; padding: 6px 8px; }
body.gd_shell .gv_pane { border-top: 0; }
.gd_shell .gv_ask { display: block; margin: 14px 16px 4px; border: 1px dashed var(--ink); background: rgba(0,255,80,.12); padding: 11px 12px; }
.gv_ask_k { margin: 0 0 5px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.gv_ask_t { font: 600 13px/1.45 'Archivo', sans-serif; }
body.gd_shell .gf_item { gap: 11px; padding: 14px 16px; border-bottom-color: #deded9; }
body.gd_shell .gf_item.is_reply { padding: 12px 0 0; }
body.gd_shell .gf_avatar { width: 32px; height: 32px; background-color: #ccc; }
body.gd_shell .gf_who strong { font: 800 13px 'Archivo', sans-serif; }
body.gd_shell .gf_time { border-radius: 0; padding: 2px 6px; background: var(--ink); color: var(--g); font: 800 10px 'Archivo', sans-serif; letter-spacing: .04em; }
body.gd_shell .gf_time::before { content: '⏱ '; }
body.gd_shell .gf_time:hover { background: var(--g); color: var(--ink); }
body.gd_shell .gf_text { font: 500 13.5px/1.5 'Archivo', sans-serif; text-wrap: pretty; }
body.gd_shell .gf_role { font: 500 11.5px 'Archivo', sans-serif; }
body.gd_shell .gf_up, body.gd_shell .gf_reply { font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .06em; }
body.gd_shell .gf_up.is_on { color: var(--ink); }
body.gd_shell .gf_up.is_on .gf_arrow { color: #00b83a; }
body.gd_shell .gf_replies { border-left-color: var(--g); }
body.gd_shell .gf_empty, body.gd_shell .gf_pinned_note { font: 600 13.5px/1.5 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gf_pinned_dot { background: var(--g); border-radius: 0; }
body.gd_shell .gv_details { padding: 16px; }
body.gd_shell .gv_title { font: 900 22px/1.1 'Archivo', sans-serif; letter-spacing: -.03em; padding: 0 0 10px; }
body.gd_shell .gv_text { font: 500 13.5px/1.55 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gv_facts dt { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .14em; color: #4a4a46; }
body.gd_shell .gv_facts dd { font: 800 16px 'Archivo', sans-serif; }
body.gd_shell .gv_by .gd_avatar { background-color: #ccc; }
body.gd_shell .gv_side .gd_btn { border: 2px solid var(--ink); color: var(--ink); }
body.gd_shell .gv_side .gd_btn:hover { background: var(--ink); color: var(--paper); }
body.gd_shell .gv_like.is_on { background: var(--g); border-color: var(--g); color: var(--ink); }

/* leaving a note */
body.gd_shell .gv_compose { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: var(--paper); }
body.gd_shell .gv_pin_row { gap: 10px; padding: 0 0 9px; }
body.gd_shell .gv_pin { border-radius: 0; padding: 6px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 800 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
body.gd_shell .gv_pin.is_on { background: var(--g); }
body.gd_shell .gv_pin .material-symbols-outlined { font-size: 14px; }
body.gd_shell .gv_pin_note { font: 500 11.5px 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gv_replying { border-radius: 0; background: var(--ink); color: var(--g); font: 700 11.5px 'Archivo', sans-serif; }
body.gd_shell .gv_replying button { color: var(--g); }
body.gd_shell .gv_compose_row { gap: 8px; align-items: stretch; }
.gd_shell .gv_me { display: block; width: 36px; height: 36px; flex: none; margin-top: 5px; background-color: #ccc; }
.gd_shell .gv_join { display: block; flex: none; padding: 16px; border-top: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.gv_join strong { display: block; font: 900 17px 'Archivo', sans-serif; letter-spacing: -.02em; margin-bottom: 4px; }
.gv_join p { margin: 0 0 12px; font: 500 12.5px/1.5 'Archivo', sans-serif; color: #bdbdb8; }
.gv_join_do { display: flex; gap: 8px; }
.gv_join_do a { flex: 1; text-align: center; padding: 12px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .12em; transition: background .2s, color .2s; }
body.gd_shell .gv_side .gv_join_in { background: var(--g); color: var(--ink); }
body.gd_shell .gv_side .gv_join_up { border: 1px solid var(--paper); color: var(--paper); }
body.gd_shell .gv_side .gv_join_do a:hover { background: var(--paper); color: var(--ink); }
body.gd_shell .gv_compose_row textarea { border-radius: 0; min-height: 46px; padding: 12px; border: 2px solid var(--ink); background: #fff; font: 500 13.5px/1.4 'Archivo', sans-serif; }
body.gd_shell .gv_compose_row textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,255,80,.45); }
body.gd_shell #gv_send { flex: none; padding: 0 16px; border: 0; background: var(--ink); color: var(--g); font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; }
body.gd_shell #gv_send:hover { background: var(--g); color: var(--ink); }
body.gd_shell #gv_send:disabled { opacity: 1; background: #deded9; color: #77776f; }
body.gd_shell #gv_send .material-symbols-outlined { display: none; }
.gd_shell .gv_send_t { display: inline; }

.gv_hud_fb, .gv_swipe_note { display: none !important; }
.gd_shell .gv_hint[hidden] { display: none; }

/* — touch layout: the picture is the whole screen, the feedback column a sheet from the right
     (swipe left to show it, right to hide it, right again for the grid — grid2.js) — */
@media screen and (max-width: 900px) {
    body.gd_shell .gv { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); position: relative; overflow: hidden; }
    body.gd_shell .gv_side { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: 88%; max-width: 420px; border: 0; box-shadow: none; transform: translateX(102%); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
    body.gd_shell .gv.is_sheet .gv_side { transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,.5); }
    .gd_shell .gv_hud_fb { display: grid !important; position: relative; }
    .gv_hud_fb .material-symbols-outlined { font-size: 19px; }
    .gv_hud_fb i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--g); color: var(--ink); font: 800 10px/1 'Archivo', sans-serif; font-style: normal; }
    .gd_shell .gv_swipe_note { display: block !important; flex: none; margin: 0; padding: 8px 12px 12px; text-align: center; font: 700 10.5px 'Archivo', sans-serif; letter-spacing: .14em; color: #77776f; background: var(--paper); }
    .gd_shell .gv_hint { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(0,0,0,.72); color: var(--paper); font: 800 13px 'Archivo', sans-serif; letter-spacing: .14em; }
    .gv_hint_i { font: 900 40px 'Archivo', sans-serif; color: var(--g); letter-spacing: 0; }
    .gv_hint button { margin-top: 10px; border: 1px solid var(--paper); background: transparent; color: var(--paper); padding: 10px 16px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .14em; }
}
@media screen and (max-width: 900px) {
    body.gd_shell .gv_media { inset: 64px 12px 150px; }
    .gd_shell .gv_hud { padding: 12px 14px; gap: 10px; }
    .gv_hud_hatch { display: none; }
    .gd_shell .gv_caption { left: 14px; right: 14px; bottom: 84px; }
    .gv_cap_t { font-size: 20px; margin-bottom: 6px; -webkit-line-clamp: 1; }
    .gv_cap_sub { display: none; }
    .gd_shell .gv_dots { display: none; }
    body.gd_shell .gv_nav { right: 14px; bottom: 12px; }
    body.gd_shell .gv_nav_icon { width: 44px; height: 44px; }
    body.gd_shell .gv_zoom_tools { display: none; }
}

/* ================================ COMPOSER ================================
   Light, centred, over a dark veil; it rises into place rather than sliding up from the edge. */
body.gd_shell #gc_mask.gc_mask { z-index: 80; background: rgba(5,5,5,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.gd_shell #gc.gc { z-index: 81; top: 50%; bottom: auto; width: min(1060px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.6); opacity: 0; transform: translate(-50%, -46%); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s; }
body.gd_shell #gc.gc.is_open { opacity: 1; transform: translate(-50%, -50%); }
body.gd_shell .gc_head { position: relative; padding: 16px 20px; background: var(--ink); color: var(--paper); border-bottom: 0; }
body.gd_shell .gc_head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(-45deg, var(--g) 0 4px, var(--ink) 4px 8px); }
body.gd_shell .gc_head .gd_avatar { width: 42px; height: 42px; border: 2px solid var(--g); background-color: #333; }
body.gd_shell .gc_who strong { font: 900 16px 'Archivo', sans-serif; letter-spacing: -.02em; }
body.gd_shell .gc_who span { font: 500 12px 'Archivo', sans-serif; color: #bdbdb8; margin-top: 2px; }
body.gd_shell .gc_close { width: 40px; height: 40px; border-radius: 0; border: 1px solid #3a3a3a; color: var(--paper); }
body.gd_shell .gc_close:hover { background: var(--g); color: var(--ink); border-color: var(--g); }
body.gd_shell .gc_kinds_wrap { padding: 18px 20px 16px; border-bottom: 1px solid #deded9; }
body.gd_shell .gc_label { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .18em; color: var(--ink); }
body.gd_shell .gc_kinds { gap: 8px; }
body.gd_shell .gc_kind { gap: 10px; padding: 12px; border-radius: 0; border: 2px solid var(--ink); background: #fff; }
body.gd_shell .gc_kind:hover { border-color: var(--ink); background: rgba(0,255,80,.08); }
body.gd_shell .gc_kind.is_on, body.gd_shell .gc_kind.is_on[data-tone] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.gd_shell .gc_kind.is_on .gc_kind_text > span { color: var(--g); }
body.gd_shell .gc_kind_text strong { font: 900 14px 'Archivo', sans-serif; letter-spacing: -.015em; }
body.gd_shell .gc_kind_text > span { font: 500 11.5px 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gc_dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 0; border: 1px solid var(--ink); box-shadow: none; }
body.gd_shell .gc_kind.is_on .gc_dot { border-color: var(--paper); }
body.gd_shell .gc_body { grid-template-columns: minmax(0,1fr) 320px; border-top: 0; }
body.gd_shell .gc_write { padding: 18px 20px; gap: 12px; border-right: 1px solid #deded9; }
body.gd_shell .gc_text { min-height: 150px; padding: 13px 14px; border: 1px solid #cfcfca; background: #fff; resize: vertical; font: 500 14.5px/1.55 'Archivo', sans-serif; }
body.gd_shell .gc_text:focus { border-color: var(--ink); }
body.gd_shell .gc_chips { gap: 8px; padding: 0; }
body.gd_shell .gc_chip { border-radius: 0; padding: 8px 12px; border: 1px solid var(--ink); color: var(--ink); font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .06em; }
body.gd_shell .gc_chip:hover { background: rgba(0,255,80,.15); border-color: var(--ink); }
body.gd_shell .gc_chip_review.is_on { background: var(--g); color: var(--ink); }
body.gd_shell .gc_media { padding: 18px 20px; gap: 10px; border-left: 0; }
body.gd_shell .gc_drop { min-height: 180px; border-radius: 0; border: 2px dashed var(--ink); background: repeating-linear-gradient(-45deg, rgba(0,255,80,.07) 0 10px, transparent 10px 20px); }
body.gd_shell .gc_drop:hover, body.gd_shell .gc_drop.is_over { border-color: var(--ink); background-color: rgba(0,255,80,.12); }
body.gd_shell .gc_drop_idle .material-symbols-outlined { color: var(--ink); font-size: 32px; }
body.gd_shell .gc_drop_idle p { font: 900 16px 'Archivo', sans-serif; letter-spacing: -.02em; }
body.gd_shell .gc_browse { font: 600 12.5px 'Archivo', sans-serif !important; letter-spacing: 0 !important; color: var(--ink); }
body.gd_shell .gc_hint { font: 500 11.5px/1.5 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gc_url input { height: 44px; border-radius: 0; border: 2px solid var(--ink); background: #fff; }
body.gd_shell .gc_url input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,255,80,.45); }
body.gd_shell .gc_foot { gap: 10px; padding: 13px 20px; border-top: 2px solid var(--ink); }
body.gd_shell .gc_preview { font: 800 12px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
body.gd_shell .gc_note { font: 500 12px 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gc_foot .gd_btn { border: 2px solid var(--ink); color: var(--ink); padding: 11px 16px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
body.gd_shell .gc_foot .gd_btn:hover { background: var(--ink); color: var(--paper); }
body.gd_shell .gc_foot .gd_btn.gd_publish { padding: 13px 20px; background: var(--g); border-color: var(--g); color: var(--ink); }
body.gd_shell .gc_foot .gd_btn.gd_publish:hover { background: var(--ink); border-color: var(--ink); color: var(--g); }
@media (max-width: 860px) {
    body.gd_shell .gc_body { grid-template-columns: minmax(0,1fr); }
    body.gd_shell .gc_write { border-right: 0; }
}
@media screen and (max-width: 820px) {
    body.gd_shell #gc.gc { top: 0; left: 0; width: 100vw; height: 100dvh; max-height: 100dvh; transform: translateY(100%); opacity: 1; }
    body.gd_shell #gc.gc.is_open { transform: translateY(0); }
}

/* ================================== PHONE ==================================
   Below 820px grid.css turns the wall into full-screen panels. On the shell that means the header,
   the footer and the hero step aside the way the old masthead did, and the bar floats. */
@media screen and (max-width: 820px) {
    .gd_immersive .hp-hd, .gd_immersive .hp-foot, .gd_immersive .hp-sub, .gd_immersive .gd2-hero, .gd_immersive #footer { display: none !important; }
    body.gd_shell .gd { overflow: hidden; }
    .gd2-bar { position: relative; top: auto !important; flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px 10px; border: 0; background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .gd2-logo { display: block; order: 0; font: 900 18px 'Archivo', sans-serif; letter-spacing: -.04em; color: var(--paper); }
    .gd2-logo span { color: var(--g); }
    body.gd_shell .gd_scope { order: 1; margin-left: auto; gap: 0; border: 1px solid #3a3a3a; }
    body.gd_shell .gd_scope_btn { border-radius: 0; padding: 7px 12px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #bdbdb8; }
    body.gd_shell .gd_scope_btn.is_on { background: var(--paper); color: var(--ink); }
    .gd2-search-btn { order: 2; width: 32px; height: 32px; }
    .gd2-order { display: none; }
    body.gd_shell .gd_filters { order: 3; flex: 1 0 100%; background: none; padding: 0; }
    body.gd_shell .gd_chip { padding: 7px 11px; font-size: 11px; background: rgba(10,10,10,.5); }
    .gd2-wall { padding: 0; }
    .gd2-end { display: none; }
    body.gd_shell .gd_feed { column-count: initial; }
    body.gd_shell .gd_post { margin: 0; border: 0; cursor: default; }
    body.gd_shell .gd_post:hover .gd_img { transform: none; }
    body.gd_shell .gd_badges { top: 118px; left: 16px; }
    body.gd_shell .gd_meta { padding: 20px 16px 64px; }
    body.gd_shell .gd_title { font: 900 22px/1.05 'Archivo', sans-serif; letter-spacing: -.03em; }
    body.gd_shell .gd_text.is_ask { border: 0; border-left: 3px solid var(--g); padding: 0 0 0 10px; color: #e0e0dc; -webkit-line-clamp: 3; }
    body.gd_shell .gd_by .gd_avatar { width: 38px; height: 38px; border: 2px solid var(--g); }
    body.gd_shell .gd_rail_icon { border-radius: 0; }
    body.gd_shell .gd_rail_publish .gd_rail_icon { background: var(--g); color: var(--ink); }
    body.gd_shell .gd_rail_btn.is_on .gd_rail_icon { color: var(--g); }
    body.gd_shell .gd_search { position: relative; z-index: 15; padding: 0 16px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-js .gd2-hero-px .hp-bg, .gd2-load-bar { animation: none; }
    body.gd_shell #gv_host.gv_host, body.gd_shell #gc.gc { transition: none; }
}

/* the composer's field breathes, so it is the first thing asked of a visitor: a slow pulse from
   bright green to nothing; held solid while it is pointed at or used */
body.gd_shell .gd_composer input#create_content { border: 2px solid var(--g); animation: gdInvite 4.8s ease-in-out infinite; }
body.gd_shell .gd_composer input#create_content:hover,
body.gd_shell .gd_composer input#create_content:focus { animation: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(0,255,80,.25); outline: none; }
@keyframes gdInvite {
    0%, 100% { border-color: rgba(0,255,80,1); box-shadow: 0 0 14px rgba(0,255,80,.45); }
    50%      { border-color: rgba(0,255,80,0); box-shadow: 0 0 0 rgba(0,255,80,0); }
}
@media (prefers-reduced-motion: reduce) {
    body.gd_shell .gd_composer input#create_content { animation: none; }
}

/* the link card under the composer's text (gcLinkDraw): picture, site, title, description, × */
body.gd_shell .gc_lk { position: relative; margin: 10px 0 12px; }
body.gd_shell .gc_lk[hidden], body.gd_shell .gc_lk [hidden] { display: none !important; }
body.gd_shell .gc_lk_busy { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed #9a9a95; font: 700 12.5px 'Archivo', sans-serif; color: #4a4a46; }
body.gd_shell .gc_lk_busy span { width: 40px; height: 8px; background: repeating-linear-gradient(-45deg, #0a0a0a 0 4px, transparent 4px 8px); background-size: 22px 8px; animation: gcLkBar .6s linear infinite; }
@keyframes gcLkBar { to { background-position: 22px 0; } }
body.gd_shell .gc_lk_card { display: grid; grid-template-columns: 150px minmax(0, 1fr); border: 2px solid #0a0a0a; background: #fff; min-height: 100px; }
body.gd_shell .gc_lk_img { position: relative; background: #141414 center / cover no-repeat; }
body.gd_shell .gc_lk_img.is_none { background-image: repeating-linear-gradient(-45deg, #1d1d1d 0 6px, #141414 6px 12px) !important; }
body.gd_shell .gc_lk_txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 44px 12px 14px; min-width: 0; }
body.gd_shell .gc_lk_dom { font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; color: #4a4a46; }
body.gd_shell .gc_lk_t { font: 900 15px/1.25 'Archivo', sans-serif; letter-spacing: -.01em; color: #0a0a0a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.gd_shell .gc_lk_d { font: 500 12.5px/1.45 'Archivo', sans-serif; color: #4a4a46; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.gd_shell .gc_lk_x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; background: #0a0a0a; color: #fff; border: 0; border-radius: 50%; font: 400 18px/1 'Archivo', sans-serif; cursor: pointer; }
body.gd_shell .gc_lk_x:hover { background: var(--g); color: #0a0a0a; }

/* a video: the picture across the top, with its play mark */
body.gd_shell .gc_lk.is_video .gc_lk_card { grid-template-columns: minmax(0, 1fr); }
body.gd_shell .gc_lk.is_video .gc_lk_img { height: clamp(150px, 22vw, 240px); }
body.gd_shell .gc_lk.is_video .gc_lk_txt { padding-right: 14px; }
body.gd_shell .gc_lk_play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--g); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
body.gd_shell .gc_lk_play::after { content: ''; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #0a0a0a; }

@media (max-width: 600px) {
    body.gd_shell .gc_lk_card { grid-template-columns: 96px minmax(0, 1fr); }
}

/* a video that had to start muted (no click on the site yet): the way to its sound */
.gv_sound{ position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--g, #00FF50); color: #0a0a0a; font: 800 12px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.gv_sound .material-symbols-outlined{ font-size: 18px; }
.gv_sound:hover{ background: #fff; }

/* a member blocked from //GRID (Grid_model::isBlocked) sees this instead of the composer */
.gd_blocked { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #5a1f1f; background: #1a0d0d; color: #ffb3ad; font: 600 14px/1.45 'Archivo', sans-serif; }

/* a shared page (not a video): the way to the article -- on the card under its title, and in the opened post
   under its author (grid_items.php, grid_detail.php). Its own link: the card's click still opens the post. */
body.gd_shell .gd_src { order: 0; position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: -2px 0 12px; padding: 7px 10px; border: 1px solid #3a3a3a; color: var(--paper); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
body.gd_shell .gd_src span { flex: none; font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--g); }
body.gd_shell .gd_src b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px 'Archivo', sans-serif; }
body.gd_shell .gd_src:hover { border-color: var(--g); background: var(--g); color: var(--ink); }
body.gd_shell .gd_src:hover span { color: var(--ink); }
.gv_src { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 16px; border-bottom: 1px solid #deded9; background: #fff; color: var(--ink, #0a0a0a) !important; text-decoration: none; transition: background .2s; }
.gv_src:hover { background: #f4fff7; }
.gv_src_t { min-width: 0; flex: 1; }
.gv_src_t small { display: block; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: #77776f; }
.gv_src_t b { display: block; margin-top: 3px; font: 800 13.5px/1.3 'Archivo', sans-serif; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gv_src_go { flex: none; padding: 9px 11px; background: #0a0a0a; color: #00FF50; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; white-space: nowrap; }