/* gay-serbia.com design layer - phase 1 (chrome + tokens). ASCII only. */

/* ---------- self-hosted fonts (was Google Fonts CDN; Nik: no external font calls) ---------- */
/* Abel normal latin */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/shared/fonts/abel-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Google Sans Flex normal latin-ext */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/shared/fonts/gsf-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Google Sans Flex normal latin */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/shared/fonts/gsf-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 italic latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/shared/fonts/ss4-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 italic latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/shared/fonts/ss4-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 normal latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/shared/fonts/ss4-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 normal latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/shared/fonts/ss4-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gs-bg: #080807;
  --gs-raised: #141412;
  --gs-raised-2: #242422;
  --gs-text: #ffffff;
  --gs-btn-fill: #f2f2ef;
  --gs-body: #dcdcda;
  --gs-muted: #adadad;
  --gs-faint: #5a5a58;
  --gs-hair: #1e1e1c;
  --gs-field: #54544f;
  --gs-field-focus: #8a8a88;
  --gs-red: #E3231B;
  --gs-label: #a98963;
  --gs-paper: #fbfbfa;
  --gs-paper-text: #191917;
  --gs-paper-hair: #e4e4e0;
  --gs-paper-field: #d0d0cb;
  --gs-font: 'Google Sans Flex', 'Roboto', Arial, Helvetica, sans-serif;
}

html { overflow-x: clip; }
body { background-color: var(--gs-bg); margin: 0; overflow-x: clip; }

/* ---------- chrome bar ---------- */
.gs-chrome { font-family: var(--gs-font); background: var(--gs-bg);
  display: flex; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--gs-hair);
  position: relative; z-index: 40; }
.gs-wordmark { display: block; text-decoration: none; }
.gs-logo { display: block; height: 20px; width: auto; }
.gs-nav { display: none; }
.gs-utils { display: none; }
.gs-caplink { font-family: var(--gs-font); font-size: 10px; letter-spacing: .24em;
  color: var(--gs-muted); font-weight: 300; text-transform: uppercase;
  text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
.gs-caplink:hover, .gs-caplink:focus-visible { color: #fff; }
.gs-caplink--w { color: #fff; }
.gs-caplink--on { color: #fff; font-weight: 600;
  border-bottom: 2px solid var(--gs-red); padding-bottom: 6px; }
.gs-utilbtn { display: inline-flex; gap: 8px; align-items: center; }
/* thin divider between the account cluster and the globe (wired-style) */
.gs-utils-sep { display: none; }

/* burger (mobile trigger) */
.gs-burger { width: 44px; height: 44px; background: none; border: 0; padding: 15px 13px;
  cursor: pointer; display: inline-flex; flex-direction: column;
  justify-content: space-between; margin-left: auto; }
.gs-burger span { display: block; height: 1px; background: #fff; width: 18px; }

/* icons (pure CSS glyphs) */
.gs-ico-persona { width: 14px; height: 14px; border: 1px solid currentColor;
  border-radius: 50%; display: inline-block; position: relative; flex: none;
  box-sizing: border-box; }
.gs-ico-persona:after { content: ''; position: absolute; left: 3px; top: 2.5px;
  width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%;
  box-sizing: border-box; }
.gs-ico-globe { width: 14px; height: 14px; border: 1px solid currentColor;
  border-radius: 50%; display: inline-block; position: relative;
  box-sizing: border-box; flex: none; }
.gs-ico-globe:before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid currentColor; }
.gs-ico-globe:after { content: ''; position: absolute; left: 3.5px; right: 3.5px;
  top: -1px; bottom: -1px; border: 1px solid currentColor; border-radius: 50%; }

/* admin strip */
.gs-adminbar { font-family: var(--gs-font); background: var(--gs-raised);
  border-bottom: 1px solid var(--gs-hair); padding: 6px 20px; font-size: 11px; }
.gs-adminbar a { color: var(--gs-muted); }

/* ---------- mobile menu: level 1 (red) + level 2 (black) ---------- */
.gs-panel { position: fixed; top: 0; bottom: 0; left: 0; width: calc(100% - 56px);
  max-width: 420px; z-index: 90; font-family: var(--gs-font);
  transform: translateX(-105%); visibility: hidden;
  transition: transform .24s ease-out, visibility 0s linear .24s;
  display: flex; flex-direction: column; overflow-y: auto; }
.gs-backdrop { position: fixed; inset: 0; background: rgba(8,8,7,.62); z-index: 80;
  opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity .24s ease-out; }
html.gs-menu-open .gs-backdrop { opacity: 1; pointer-events: auto; }
html.gs-menu-open { overflow: hidden; }
.gs-panel--l1 { background: var(--gs-red); }
html.gs-menu-open .gs-panel--l1 { transform: translateX(0); visibility: visible;
  transition: transform .24s ease-out; }
.gs-panel--l2 { background: #21211f; z-index: 95;
  border-right: 1px solid var(--gs-hair); }
.gs-panel--l2 .gs-l2-title { font-size: 18px; }
.gs-panel--l2 .gs-glabel { font-size: 9.5px; }
.gs-panel--l2 .gs-gitem { font-size: 13px; }
html.gs-l2-open .gs-panel--l2 { transform: translateX(0); visibility: visible;
  transition: transform .24s ease-out; }

.gs-l1-head { padding: 22px 26px 0; text-align: left; }
.gs-l1-brand { color: #F0f0f0; font-size: 12px; letter-spacing: .32em;
  font-weight: 600; text-transform: uppercase; text-decoration: none; }
.gs-l1-items { flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 0 26px; }
.gs-l1-item { display: block; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 0; margin: 0 0 22px; font-family: var(--gs-font);
  font-size: 25px; letter-spacing: .14em; color: #F0f0f0; font-weight: 800;
  text-transform: uppercase; text-decoration: none; }
.gs-l1-foot { padding: 0 26px 39px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 16px; }
.gs-l1-foot .gs-ico-persona, .gs-l1-foot .gs-ico-globe { color: #F0f0f0; }
.gs-l1-foot .gs-ico-globe { width: 15px; height: 15px; }
.gs-l1-cap { font-size: 11px; letter-spacing: .22em; color: #F0f0f0;
  font-weight: 600; text-transform: uppercase; text-decoration: none;
  display: inline-flex; gap: 9px; align-items: center; background: none;
  border: 0; cursor: pointer; padding: 0; font-family: var(--gs-font); }
.gs-l1-user { display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; }
.gs-l1-avatar { width: 28px; height: 28px; object-fit: cover; display: block; }
.gs-l1-name { font-size: 11px; color: #F0f0f0; font-weight: 700; }
.gs-l1-foot .gs-circ { position: absolute; right: 26px; bottom: 26px; }
.gs-circ { width: 40px; height: 40px; border-radius: 50%;
  background: var(--gs-btn-fill); color: var(--gs-red); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 300; flex: none; }

.gs-l2-head { padding: 26px 28px 18px; border-bottom: 1px solid var(--gs-hair); }
.gs-l2-title { color: #fff; font-size: 17px; letter-spacing: .26em;
  font-weight: 200; text-transform: uppercase; }
.gs-l2-body { flex: 1; padding: 24px 28px 0; }
.gs-l2-foot { padding: 18px 28px 26px; display: flex;
  justify-content: space-between; align-items: center; }

/* menu group lists (shared by mobile L2 and desktop panel) */
.gs-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
  align-content: start; }
.gs-glabel { display: block; font-size: 8.5px; letter-spacing: .26em;
  color: var(--gs-label); font-weight: 400; text-transform: uppercase;
  margin: 0 0 10px; }
.gs-gitem { display: block; font-size: 11px; letter-spacing: .26em; color: var(--gs-body);
  font-weight: 200; text-transform: uppercase; line-height: 2.4;
  text-decoration: none; }
.gs-panel .gs-gitem { font-size: 12px; }
.gs-gitem:hover, .gs-gitem:focus-visible { color: #fff; }

/* desktop dropdown panels */
.gs-deskpanel { display: none; }

/* ---------- page wrapper ---------- */
.gs-page { display: flex; flex-wrap: wrap; align-items: stretch; }
.gs-main { flex: 1 1 640px; background: var(--gs-paper); min-height: 60vh;
  padding: 20px clamp(18px, 3vw, 40px); box-sizing: border-box; min-width: 0;
  overflow-x: auto; }
.gs-aside { flex: 1 1 100%; background: var(--gs-paper);
  border-top: 1px solid var(--gs-paper-hair); padding: 18px 20px;
  box-sizing: border-box; }

/* article comments/print bar (aid pages) */
.gs-artbar { font-family: var(--gs-font); font-size: 12px; margin: 26px 0 4px;
  padding-top: 14px; border-top: 1px solid var(--gs-paper-hair); }
.gs-artbar a { color: var(--gs-paper-text); text-decoration: none;
  border-bottom: 1px solid var(--gs-red); }
.gs-artbar .gs-artbar-count { color: #6a6a66; }
.gs-artbar .gs-artbar-sep { color: #b8b8b4; margin: 0 10px; }

/* ---------- footer ---------- */
.gs-foot { font-family: var(--gs-font); background: var(--gs-bg); width: 100%;
  border-top: 1px solid var(--gs-hair);
  padding: 18px 20px 26px; box-sizing: border-box; display: flex; flex-wrap: wrap;
  gap: 12px 22px; justify-content: space-between; align-items: baseline; }
.gs-foot-mark { color: var(--gs-muted); font-size: 11px; letter-spacing: .3em;
  font-weight: 300; }
.gs-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.gs-foot a { font-size: 10px; letter-spacing: .24em; color: var(--gs-muted);
  font-weight: 300; text-transform: uppercase; text-decoration: none; }
.gs-foot a:hover { color: #fff; }
.gs-foot-c { font-size: 10px; letter-spacing: .12em; color: var(--gs-faint);
  text-transform: uppercase; }

/* ---------- shared control system (used from phase 2 onward) ---------- */
.gs-btn, .gs-btn-ghost, .gs-btn-danger { font-family: var(--gs-font);
  border-radius: 4px; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.gs-btn { background: var(--gs-btn-fill); color: #0a0a09;
  border: 1px solid var(--gs-btn-fill); height: 36px; padding: 0 20px;
  font-weight: 700; }
.gs-btn-ghost { background: transparent; color: var(--gs-btn-fill);
  border: 1px solid var(--gs-field); height: 30px; padding: 0 14px;
  font-weight: 600; }
.gs-btn-danger { background: transparent; color: var(--gs-red);
  border: 1px solid var(--gs-red); height: 34px; padding: 0 16px;
  font-weight: 600; }
.gs-fld { display: flex; flex-direction: column; justify-content: center;
  gap: 3px; height: 48px; padding: 0 14px; border: 1px solid var(--gs-field);
  border-radius: 8px; background: transparent; box-sizing: border-box;
  font-family: var(--gs-font); }
.gs-fld:focus-within { border-color: var(--gs-field-focus); }
.gs-fld .gs-lbl { font-size: 13px; color: var(--gs-muted); line-height: 15px; }
.gs-fld input, .gs-fld select { background: transparent; border: 0; outline: 0;
  color: #fff; font-size: 14px; font-family: inherit; width: 100%;
  height: 21px; line-height: 21px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; }

/* reveal on scroll (gs.js adds html.gs-js, then .gs-in per element) */
html.gs-js .gs-reveal { opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s ease-out; }
html.gs-js .gs-reveal.gs-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gs-panel, .gs-backdrop, .gs-reveal { transition: none !important; }
  html.gs-js .gs-reveal { opacity: 1; transform: none; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 899px) {
  .gs-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- desktop (wired-style distribution) ---------- */
@media (min-width: 900px) {
  .gs-chrome { padding: 26px 34px; gap: 40px; }
  .gs-logo { height: 24.2px; }
  .gs-burger { display: none; }
  /* nav sits left, just after the logo */
  .gs-nav { display: flex; gap: 30px; align-items: center; }
  /* utils cluster pushed to the far right */
  .gs-utils { display: flex; gap: 20px; align-items: center; margin-left: auto; }
  .gs-utils-sep { display: block; width: 1px; height: 16px;
    background: var(--gs-field); }
  .gs-panel, .gs-backdrop { display: none; }
  html.gs-menu-open { overflow: auto; }
  .gs-deskpanel { display: block; position: absolute; left: 0; right: 0;
    top: 100%; background: var(--gs-bg); border-bottom: 0;
    padding: 26px 34px 30px; z-index: 39;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .24s ease-out, transform .24s ease-out,
      visibility 0s linear .24s; }
  .gs-deskpanel.gs-open { opacity: 1; visibility: visible; transform: none;
    transition: opacity .24s ease-out, transform .24s ease-out; }
  .gs-deskpanel .gs-groups { grid-template-columns: repeat(4, 1fr); }
  .gs-aside { flex: 0 0 220px; border-top: 0;
    border-left: 1px solid var(--gs-paper-hair); }
}

/* ---------- print ---------- */
@media print {
  .gs-chrome, .gs-panel, .gs-backdrop, .gs-deskpanel, .gs-foot, .gs-adminbar,
  .gs-aside { display: none !important; }
  body, .gs-main { background: #fff !important; }
}

/* ================= phase 2: rubrika mosaic + aktuelno ================= */

.gs-main--dark { background: var(--gs-bg); }

.gsr-wrap { max-width: 1180px; margin: 0 auto; font-family: var(--gs-font); }
.gsr-hero { color: #fff; font-weight: 200; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1;
  font-size: clamp(38px, 6vw, 64px); margin: 24px 0 10px; }
.gsr-sub { color: var(--gs-muted); font-size: 13px; font-weight: 300;
  line-height: 1.55; margin: 0 0 30px; }

.gsr-grid { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 24px 14px; align-items: stretch; }
.gsr-lead { grid-column: span 4; }
.gsr-side { grid-column: span 2; }
.gsr-cell { grid-column: span 2; }
.gsr-red  { grid-column: span 2; }
.gsr-wide { grid-column: span 4; }

.gsr-tile { display: flex; flex-direction: column; min-width: 0; }
.gsr-img { display: block; text-decoration: none; margin: 0 0 12px; }
.gsr-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  display: block; filter: saturate(.82); border: 0;
  transition: filter .3s ease-out; }
.gsr-tile:hover .gsr-img img { filter: saturate(1) brightness(1.06); }
.gsr-lead .gsr-img img { aspect-ratio: 16 / 9; }

.gsr-meta { display: flex; justify-content: space-between; gap: 12px;
  font-size: 9px; letter-spacing: .18em; color: var(--gs-faint);
  font-weight: 300; text-transform: uppercase; margin: 0 0 8px; }
.gsr-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gsr-title { display: block; color: #fff; font-weight: 200; line-height: 1.12;
  text-decoration: none; font-size: 16px; }
.gsr-title:hover { border-bottom: 0; box-shadow: none; opacity: .62; }
.gsr-lead .gsr-title { font-size: 26px; }
.gsr-side .gsr-title { font-size: 22px; }
.gsr-wide .gsr-title { font-size: 18px; }
.gsr-intro { color: var(--gs-muted); font-size: 13px; font-weight: 300;
  line-height: 1.55; margin: 8px 0 0; max-width: 560px; }

.gsr-type { background: var(--gs-raised); border: 1px solid var(--gs-hair);
  padding: 20px; box-sizing: border-box; }
.gsr-type .gsr-meta { margin-bottom: 14px; }
.gsr-redtile { background: var(--gs-red); border: 0; }
.gsr-redtile .gsr-meta { color: var(--gs-bg); }
.gsr-redtile .gsr-title { color: var(--gs-bg); font-weight: 400; font-size: 21px; }
.gsr-redtile .gsr-title:hover { box-shadow: none; opacity: .78; }

.gsr-admin { background: var(--gs-raised-2); color: var(--gs-muted);
  font-size: 10px; padding: 4px 8px; margin: 0 0 8px; }
.gsr-admin a { color: #fff; }

.gsr-pager { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; border-top: 1px solid var(--gs-hair); margin-top: 34px;
  padding: 16px 0 8px; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 300; }
.gsr-pager a { color: var(--gs-muted); text-decoration: none; }
.gsr-pager a:hover { color: #fff; }
.gsr-pages { display: flex; gap: 14px; align-items: baseline; }
.gsr-pages .gsr-cur { color: var(--gs-red); font-weight: 600;
  border-bottom: 2px solid var(--gs-red); padding-bottom: 3px; }
.gsr-dim { color: #3a3a38; }

/* aktuelno rows */
.gsa-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  border-top: 1px solid var(--gs-hair); padding: 18px 0; }
.gsa-row--pic { grid-template-columns: 110px 1fr 88px; }
.gsa-date { font-size: 9px; letter-spacing: .18em; color: var(--gs-faint);
  font-weight: 300; text-transform: uppercase; padding-top: 4px; }
.gsa-sec { display: block; font-size: 8.5px; letter-spacing: .26em;
  color: var(--gs-label); font-weight: 400; text-transform: uppercase;
  margin: 0 0 6px; }
.gsa-title { display: block; color: #fff; font-weight: 200; line-height: 1.15;
  font-size: 19px; text-decoration: none; }
.gsa-title:hover { box-shadow: none; opacity: .62; }
.gsa-intro { color: var(--gs-muted); font-size: 13px; font-weight: 300;
  line-height: 1.55; margin: 6px 0 0; max-width: 620px; }
.gsa-thumb { display: block; }
.gsa-thumb img { width: 88px; height: 66px; object-fit: cover; display: block;
  filter: saturate(.82); border: 0; }

@media (max-width: 699px) {
  .gsr-lead, .gsr-side, .gsr-cell, .gsr-red, .gsr-wide { grid-column: span 6; }
  .gsa-row, .gsa-row--pic { grid-template-columns: 84px 1fr; }
  .gsa-thumb { display: none; }
}

/* ================= phase 3: article (Wired: black lede -> paper two-col) ============ */

/* --- black lede: left-aligned to the content grid (Wired), generous air above --- */
.gs-art-lede { max-width: 1180px; margin: 0 auto; font-family: var(--gs-font);
  padding: 64px 0 44px; box-sizing: border-box; }
.gs-art-kicker { font-size: 12.5px; letter-spacing: .34em; color: #c0c0be;
  font-weight: 300; text-transform: uppercase; text-decoration: none;
  display: inline-block; }
a.gs-art-kicker:hover { color: var(--gs-red); }
.gs-art-title { color: #fff; font-weight: 200; line-height: .9;
  font-size: clamp(36px, 5.6vw, 52px); margin: 38px 0 0; }
/* standfirst/dek lives in the black lede under the title (Wired) */
.gs-art-standfirst { color: #ababab; font-size: 18px; font-weight: 300;
  line-height: 1.5; margin: 18px 0 0;
  font-family: var(--gs-font); }
.gs-art-info { font-size: 11px; letter-spacing: .18em; color: #c0c0be;
  font-weight: 300; text-transform: uppercase; margin: 34px 0 0; }
.gs-art-info b { color: inherit; font-weight: 300; }
.gs-art-admin { font-size: 10px; color: var(--gs-muted); margin-bottom: 12px;
  display: block; }

/* --- white paper takeover: full-bleed background, 1180px inner wrap --- */
.gs-art-paper { background: var(--gs-paper);
  margin: 0 calc(-1 * clamp(18px, 3vw, 40px)) -20px;
  padding: 44px clamp(18px, 3vw, 40px) 64px; }
.gs-art-wrap { max-width: 1180px; margin: 0 auto; }

/* --- hero band: the image lives fully on the black between lede and paper
   (Wired layout). The whole band is removed by onerror when the image 404s,
   so a missing hero can never leave a black void. --- */
.gs-art-heroband { max-width: 1180px; margin: 0 auto; padding-bottom: 34px; }
.gs-art-hero { margin: 0; }
.gs-art-hero img { width: 100%; display: block; filter: saturate(.82); }
.gs-art-caption { font-family: 'Abel', var(--gs-font); font-size: 14px;
  letter-spacing: .01em; color: #8a8a86; margin: 10px 0 0; }
@media (max-width: 860px) {
  /* Wired mobile hero: edge-to-edge 3:2 crop, 1px keyline, caption sits on
     the paper (no black band under the photo) */
  .gs-art-heroband { margin: 0 calc(-1 * clamp(18px, 3vw, 40px));
    padding-bottom: 0; }
  .gs-art-hero img { aspect-ratio: 3 / 2; object-fit: cover;
    border-bottom: 1px solid #0a0a09; }
  .gs-art-heroband .gs-art-caption { background: var(--gs-paper);
    color: #55554f; margin: 0; padding: 10px 26px 0; }
}

/* --- two columns: copy left, related rail right --- */
.gs-art-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px); align-items: start; }
.gs-art-main { min-width: 0; }

.gs-art-body { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 19px; font-weight: 420; line-height: 1.4;
  color: var(--gs-paper-text); max-width: 660px; overflow-wrap: break-word; }
.gs-art-body p { margin: 0 0 21px; }
/* old article HTML carries its own classes from article.css - reskin for paper */
.gs-art-body .articleInitial { float: left; color: var(--gs-red);
  font-size: 58px; line-height: .82; padding: 6px 10px 0 0;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.gs-art-body h2, .gs-art-body h3 { font-family: var(--gs-font);
  color: var(--gs-paper-text); font-size: 17px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 800; margin: 36px 0 12px; }
.gs-art-body .imageLeft, .gs-art-body .imageRight,
.gs-art-body .image520 { border-color: var(--gs-paper-hair); }
.gs-art-body .articleSpotlight { background: #f4f4f1;
  border-top: 1px solid var(--gs-paper-hair);
  border-bottom: 1px solid var(--gs-paper-hair); }
.gs-art-body .articleImageCaption { color: #8a8a86;
  border-bottom: 1px solid var(--gs-paper-hair); font-family: var(--gs-font); }
.gs-art-body .articleSection { background: var(--gs-red); }
.gs-art-body a { color: var(--gs-paper-text);
  border-bottom: 1px solid var(--gs-red); text-decoration: none; }
.gs-art-body a:hover { color: var(--gs-red); }
.gs-art-body img { max-width: 100%; height: auto; }
.gs-art-body iframe, .gs-art-body table { max-width: 100%; }
.gs-art-end { max-width: 660px; margin: 34px 0 0; display: flex;
  align-items: center; gap: 12px; font-family: var(--gs-font); }
.gs-art-end i { width: 10px; height: 10px; background: var(--gs-red);
  display: inline-block; }
.gs-art-end span { font-size: 9px; letter-spacing: .18em; color: #8a8a86;
  text-transform: uppercase; }

/* --- related rail --- */
.gs-art-rail { font-family: var(--gs-font); position: sticky; top: 20px; }
.gs-art-rail-head { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #6a6a66; font-weight: 400; padding-bottom: 12px;
  border-bottom: 2px solid var(--gs-paper-text); }
.gs-art-rail-sec { display: inline-block; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gs-red); text-decoration: none;
  font-weight: 600; margin: 14px 0 2px; }
.gs-art-rail-list { margin-top: 6px; }
.gs-art-rel { display: flex; gap: 14px; align-items: flex-start;
  text-decoration: none; padding: 16px 0;
  border-bottom: 1px solid var(--gs-paper-hair); }
.gs-art-rel:hover .gs-art-rel-title { color: var(--gs-red); }
.gs-art-rel-thumb { flex: none; width: 72px; height: 72px; overflow: hidden;
  background: #ecece8; }
.gs-art-rel-thumb img { width: 100%; height: 100%; object-fit: cover;
  display: block; filter: saturate(.82); }
.gs-art-rel--notext .gs-art-rel-body { padding-left: 0; }
.gs-art-rel-body { display: block; min-width: 0; }
.gs-art-rel-date { display: block; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #8a8a86; margin-bottom: 5px; }
.gs-art-rel-title { display: block; font-size: 17px; line-height: 1.3;
  color: var(--gs-paper-text); font-weight: 400; }
.gs-art-rail-empty { font-size: 14px; color: #8a8a86; padding: 16px 0; }

.gs-art-reviews { margin: 44px 0 0; max-width: 660px;
  font-family: var(--gs-font); border-top: 2px solid #0a0a09;
  padding-top: 26px; }
.gs-art-reviews .articleYourReviews { color: var(--gs-paper-text); font-size: 20px;
  font-weight: 200; margin-bottom: 22px; border: 0; text-transform: none;
  font-family: var(--gs-font); }
.gs-art-reviews .articleAddReview { float: right; }
.gs-art-reviews .articleAddReview a { font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; text-decoration: none;
  background: #111110; color: var(--gs-paper); border: 1px solid #111110;
  border-radius: 4px; padding: 0 20px; height: 36px; display: inline-flex;
  align-items: center; white-space: nowrap;
  transition: background-color .18s ease-out; }
.gs-art-reviews .articleAddReview a:hover { background: #2a2a28;
  border-color: #2a2a28; color: var(--gs-paper); text-decoration: none; }
.gs-art-reviews .reviewBody { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 15px; line-height: 1.6; color: #333331; margin: 18px 0 8px; }
.gs-art-reviews .reviewBody a { color: #333331; }
.gs-art-reviews .reviewInfo { font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #8a8a86; padding-bottom: 16px;
  border-bottom: 1px solid var(--gs-paper-hair); }
.gs-art-reviews .reviewInfo a { color: var(--gs-paper-text);
  text-decoration: none; }

.gs-main--dark .gs-artbar { border-color: var(--gs-hair); max-width: 1180px;
  margin-left: auto; margin-right: auto; }
.gs-main--dark .gs-artbar a { color: #fff; }
.gs-main--dark .gs-artbar .gs-artbar-count { color: var(--gs-muted); }
.gs-main--dark .gs-artbar .gs-artbar-sep { color: var(--gs-field); }

/* article: stack the rail under the copy on tablet/mobile */
@media (max-width: 860px) {
  .gs-art-cols { grid-template-columns: 1fr; gap: 0; }
  .gs-art-rail { position: static; margin-top: 40px;
    border-top: 1px solid var(--gs-paper-hair); padding-top: 8px; }
  .gs-art-body, .gs-art-end, .gs-art-reviews { max-width: none; }
  .gs-art-body .articleInitial { font-size: 48px; }
}

/* ================= phase 4: homepage ================= */

.gsr-lead--full { grid-column: span 6; }
.gsr-lead--full .gsr-img img { aspect-ratio: 16 / 7; }
.gsr-lead--full .gsr-title { font-size: clamp(24px, 3.2vw, 32px); }
.gsh-strip { border-top: 1px solid var(--gs-hair); margin-top: 30px;
  padding-top: 16px; }
.gsh-strip-head { display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 14px; font-family: var(--gs-font); }
.gsh-strip-head .t { font-size: 10px; letter-spacing: .24em; color: #fff;
  font-weight: 300; text-transform: uppercase; text-decoration: none; }
.gsh-strip-head .m { font-size: 10px; letter-spacing: .24em;
  color: var(--gs-muted); font-weight: 300; text-transform: uppercase;
  text-decoration: none; }
.gsh-strip-head .m:hover { color: #fff; }
.gsh-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gsh-news .gsr-title { font-size: 15px; }
.gsh-band { margin-top: 30px; background: var(--gs-raised);
  border: 1px solid var(--gs-hair); padding: 24px; display: flex;
  align-items: center; gap: 20px; flex-wrap: wrap; font-family: var(--gs-font); }
.gsh-band-t { color: #fff; font-weight: 200; font-size: 22px; }
.gsh-band-s { color: var(--gs-muted); font-size: 13px; font-weight: 300;
  margin-top: 4px; }
.gsh-band-grow { flex: 1 1 240px; min-width: 0; }
@media (max-width: 699px) {
  .gsh-news { grid-template-columns: 1fr; }
  .gsh-band .gs-btn, .gsh-band .gs-btn-ghost { width: 100%; box-sizing: border-box; }
}

/* ================= phase 5: personals public ================= */

.gsp-auth { max-width: 880px; margin: 30px auto 10px; display: flex;
  flex-wrap: wrap; gap: 40px; align-items: flex-start;
  font-family: var(--gs-font); }
.gsp-card { flex: 1 1 320px; min-width: 0; max-width: 420px; }
.gsp-title { color: #fff; font-weight: 200; font-size: 28px; margin: 0 0 10px; }
.gsp-sub { color: var(--gs-muted); font-size: 15px; font-weight: 300;
  line-height: 1.45; margin: 0 0 22px; }
.gsp-stack { display: grid; gap: 10px; }
.gsp-row { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-top: 16px; }
.gsp-check { display: inline-flex; gap: 8px; align-items: center; color: #fff;
  font-size: 14px; font-weight: 300; }
.gsp-check input { accent-color: #E3231B; width: 15px; height: 15px; }
.gsp-err { color: var(--gs-red); font-size: 12px; margin: 12px 0 0;
  line-height: 1.5; }
.gsp-link { color: var(--gs-muted); font-size: 12px; text-decoration: none;
  border-bottom: 1px solid var(--gs-red); padding-bottom: 1px; }
.gsp-link:hover { color: #fff; }
.gsp-mut { color: var(--gs-faint); font-size: 12px; margin-top: 14px; }
label.gs-fld { cursor: text; }
.gs-fld input:-webkit-autofill { -webkit-text-fill-color: #fff;
  transition: background-color 9999s; }
input.gs-btn { font-family: var(--gs-font); }

/* phase 5b: register + shared personals form bits */
.gsp-form { max-width: 560px; margin: 30px auto 10px;
  font-family: var(--gs-font); }
.gsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gsp-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gsp-glbl { display: block; font-size: 11px; color: var(--gs-muted);
  margin: 18px 0 8px; }
.gsp-radio { display: inline-flex; gap: 8px; align-items: center; color: #fff;
  font-size: 14px; margin-right: 22px; }
.gsp-radio input { accent-color: #E3231B; width: 15px; height: 15px; }
.gsp-form .formError { color: var(--gs-red); font-size: 11px; display: block;
  margin-top: 4px; }
.gsp-form .formError:empty { display: none; }
.gsp-form .gs-fld select, #city-wrapper select { width: 100%;
  background: transparent; border: 0; outline: 0; color: #fff;
  font-size: 14px; font-family: inherit; height: 21px; padding: 0;
  -webkit-appearance: none; appearance: none; }
.gsp-form .gs-fld option, #city-wrapper option { color: #111; }
.gsp-actions { display: flex; justify-content: flex-end; margin-top: 22px; }
.gsp-note { color: var(--gs-faint); font-size: 11px; line-height: 1.5;
  margin-top: 14px; }
span.gs-fld { display: flex; }
@media (max-width: 560px) { .gsp-grid2 { grid-template-columns: 1fr; } }

/* legacy h1 leakage kill for gs surfaces. font-family must be EXPLICIT:
   style.css targets the h1 element directly (self-hosted Roboto Condensed),
   which beats the inherited Nunito on every gs-classed heading. */
.gsp-title { text-transform: none; border-bottom: 0; letter-spacing: 0;
  font-family: var(--gs-font); }
h1.gsr-hero, .gsr-hero { border-bottom: 0; font-family: var(--gs-font); }
h1.gs-art-title, .gs-art-title { text-transform: none; border-bottom: 0;
  font-weight: 200 !important; letter-spacing: 0; padding-bottom: 0;
  font-family: var(--gs-font); }

/* phase 5c: search band + results shell (phase 8: grid, no more flex-grow raggedness) */
.gsp-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 10px; align-items: end;
  max-width: 1180px; margin: 0 auto 6px; font-family: var(--gs-font); }
.gsp-band > div { grid-column: span 3; min-width: 0; }
.gsp-band > div.gsp-nar { grid-column: span 1; }
.gsp-band > div.gsp-w4 { grid-column: span 4; }
.gsp-band .gsp-glbl { margin-top: 0; }
.gsp-chkcell { display: flex; align-items: center; height: 48px;
  grid-column: span 2; }
.gsp-gocell { display: flex; align-items: flex-end; grid-column: -3 / -1;
  justify-self: stretch; }
.gsp-gocell .gs-btn { height: 48px; padding: 0 28px; width: 100%; }
.gsp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 24px; max-width: 1180px; margin: 26px auto 0; font-family: var(--gs-font); }
.gsp-sidecard { display: grid; grid-template-rows: auto 48px 34px; gap: 10px;
  align-content: start; }
.gsp-sidecard .gsp-glbl { margin: 0; align-self: end; }
.gsp-sidestat { display: flex; align-items: center; color: #fff; font-size: 14px; }
.gsp-sidebtn { height: 34px; width: 100%; }
@media (max-width: 699px) {
  /* phones: one field per row (od/do age pair shares one); nothing ever clips */
  .gsp-band { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
  .gsp-band > div, .gsp-band > div.gsp-w4 { grid-column: span 4; }
  .gsp-band > div.gsp-nar { grid-column: span 2; }
  .gsp-band > div.gsp-chkcell { grid-column: span 4; }
  .gsp-band > div.gsp-gocell { grid-column: span 4; }
}
.gsp-results { max-width: 1180px; margin: 30px auto 0;
  border-top: 1px solid var(--gs-hair); padding-top: 16px;
  font-family: var(--gs-font); }
.gsp-count { font-size: 10px; letter-spacing: .24em; color: var(--gs-muted);
  text-transform: uppercase; margin-bottom: 16px; }
.gsp-results table { background: var(--gs-paper); }
/* results / member grid shared by index, favorites, blocked, online, unlocked */
.gsp-results { display: block; }
.gsp-results .gsp-count, .gsp-results .gsp-pager { grid-column: 1 / -1; }
.gsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 16px; }
.gsd-mcard-wrap { display: flex; flex-direction: column; }
.gsp-pager { text-align: center; padding: 18px 0; }

/* ================= phase 6: members dashboard ================= */

.gsd-wrap { max-width: 760px; margin: 0 auto; font-family: var(--gs-font); }
.gsd-nav { display: flex; gap: 22px; align-items: baseline; overflow-x: auto;
  border-top: 1px solid var(--gs-hair); border-bottom: 1px solid var(--gs-hair);
  padding: 14px 0 0; margin: 20px 0 24px; white-space: nowrap;
  -webkit-overflow-scrolling: touch; }
.gsd-nav::-webkit-scrollbar { display: none; }
.gsd-tab { font-size: 10px; letter-spacing: .24em; color: var(--gs-muted);
  font-weight: 300; text-transform: uppercase; text-decoration: none;
  padding-bottom: 12px; flex: none; }
.gsd-tab:hover { color: #fff; }
.gsd-tab.on { color: #fff; font-weight: 600;
  border-bottom: 2px solid var(--gs-red); padding-bottom: 10px; }

.gsd-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.gsd-title { color: #fff; font-weight: 200; font-size: 26px; margin: 0; }
.gsd-saved { font-size: 10px; letter-spacing: .18em; color: var(--gs-faint);
  text-transform: uppercase; }
.gsd-form { display: block; }
.gsd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px; }
.gsd-static { color: #fff; font-size: 14px; }
.gsd-emailrow { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; }
.gsd-mini { height: 30px; flex: none; }
.gsd-adminrow { display: flex; gap: 22px; margin-bottom: 16px; }
.gsd-notifycell { display: flex; align-items: center; }
.gsd-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.gsd-form .formError { color: var(--gs-red); font-size: 11px; display: block;
  margin: -8px 0 14px; }
.gsd-form .formError:empty { display: none; }
.gsd-form .gs-fld select, .gsd-form #city-wrapper select { width: 100%;
  background: transparent; border: 0; outline: 0; color: #fff; font-size: 14px;
  font-family: inherit; height: 21px; padding: 0; -webkit-appearance: none;
  appearance: none; }
.gsd-form .gs-fld option { color: #111; }

.gsd-danger { border-top: 1px solid var(--gs-hair); margin-top: 24px;
  padding-top: 16px; }
.gsd-danger-head { display: flex; justify-content: space-between;
  align-items: center; }
.gsd-danger-t { font-size: 10px; letter-spacing: .24em; color: var(--gs-muted);
  text-transform: uppercase; }
.gsd-danger-note { color: var(--gs-faint); font-size: 12px; line-height: 1.5;
  margin: 14px 0; }
.gsd-danger-note a { color: var(--gs-muted); }
.gsd-del-confirm { display: flex; gap: 12px; align-items: stretch;
  flex-wrap: wrap; }
.gsd-del-confirm .gs-fld { flex: 1 1 240px; }
.gsd-del-confirm .gs-btn-danger { height: 48px; }

@media (max-width: 560px) {
  .gsd-grid2 { grid-template-columns: 1fr; }
}

/* ================= phase 7: remaining dashboard surfaces ================= */

/* --- FAQ / help --- */
.gsd-faq { margin-top: 6px; }
.gsd-qa { border-bottom: 1px solid var(--gs-hair); padding: 20px 0; }
.gsd-qa:first-child { border-top: 1px solid var(--gs-hair); }
.gsd-q { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.gsd-a { color: var(--gs-body); font-size: 14px; line-height: 1.6; font-weight: 300; }
.gsd-a a { color: #fff; border-bottom: 1px solid var(--gs-red); text-decoration: none; }
.gsd-a a:hover { color: var(--gs-red); }

/* --- dashboard wide wrap (lists, photo grid) --- */
.gsd-wrap--wide { max-width: 1080px; }
.gsd-lead { color: var(--gs-muted); font-size: 13px; font-weight: 300;
  line-height: 1.6; margin: -8px 0 22px; max-width: 640px; }
.gsd-empty { color: var(--gs-faint); font-size: 14px; font-weight: 300;
  border: 1px solid var(--gs-hair); padding: 40px 24px; text-align: center;
  margin-top: 8px; }
.gsd-empty a { color: #fff; border-bottom: 1px solid var(--gs-red);
  text-decoration: none; }

/* --- member grid (favorites / blocked / results) --- */
.gsd-grid-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 16px; margin-top: 6px; }
.gsd-mcard { text-decoration: none; display: block; font-family: var(--gs-font); }
.gsd-mcard-pic { aspect-ratio: 3 / 4; background: var(--gs-raised);
  border: 1px solid var(--gs-hair); overflow: hidden; position: relative; }
.gsd-mcard-pic img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9); }
.gsd-mcard-none { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--gs-faint); font-size: 26px; font-weight: 200; }
.gsd-mcard-name { color: #fff; font-size: 13px; font-weight: 400; margin: 10px 0 2px; }
.gsd-mcard:hover .gsd-mcard-name { color: var(--gs-red); }
.gsd-mcard-meta { color: var(--gs-faint); font-size: 11px; font-weight: 300; }
.gsd-mcard-badge { position: absolute; top: 8px; left: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: #37d067; box-shadow: 0 0 0 2px var(--gs-bg); }
.gsd-mcard-x { display: inline-block; margin-top: 6px; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gs-faint);
  text-decoration: none; }
.gsd-mcard-x:hover { color: var(--gs-red); }

/* --- photo manager (pic-upload) --- */
.gsd-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px; margin: 6px 0 30px; }
.gsd-photo { position: relative; aspect-ratio: 1 / 1; background: var(--gs-raised);
  border: 1px solid var(--gs-hair); overflow: hidden; }
.gsd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsd-photo-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  background: rgba(8,8,7,.72); border: 1px solid var(--gs-field); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none; line-height: 1; }
.gsd-photo-del:hover { background: var(--gs-red); border-color: var(--gs-red); }
.gsd-photo-main { position: absolute; top: 8px; left: 8px;
  background: var(--gs-red); color: #fff; font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 7px; font-weight: 600; z-index: 1; }
.gsd-upload { border: 1px dashed var(--gs-field); padding: 26px 24px;
  margin-top: 8px; }
.gsd-upload-t { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.gsd-upload-note { color: var(--gs-faint); font-size: 12px; font-weight: 300;
  line-height: 1.5; margin-bottom: 16px; }
.gsd-rules { color: var(--gs-muted); font-size: 12px; font-weight: 300;
  line-height: 1.6; margin: 0 0 18px; padding-left: 18px; }
.gsd-rules li { margin-top: 3px; }
.gsd-rules b { color: var(--gs-body); }
.gsd-rules--err { color: var(--gs-red); }
.gsd-rules--err b { color: var(--gs-red); }
.gsd-upload-form { display: flex; flex-wrap: wrap; gap: 14px 18px;
  align-items: center; }
.gsd-file { color: var(--gs-body); font-size: 12px; font-family: inherit;
  max-width: 100%; }
.gsd-file::file-selector-button { background: transparent; color: #fff;
  border: 1px solid var(--gs-field); border-radius: 6px; padding: 7px 14px;
  font-family: inherit; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; margin-right: 12px; }
.gsd-file::file-selector-button:hover { border-color: var(--gs-field-focus); }
.gsd-check { display: inline-flex; align-items: center; gap: 8px;
  color: var(--gs-muted); font-size: 12px; font-weight: 300; }
.gsd-check input { accent-color: var(--gs-red); }
.gsd-upload-btn { height: 40px; padding: 0 24px; }

.gsd-photo-sec { margin-top: 34px; }
.gsd-photo-sec-head { color: #fff; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 400; padding-bottom: 12px;
  border-bottom: 1px solid var(--gs-hair); margin-bottom: 14px; }
.gsd-photo-acts { position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(8,8,7,.92), rgba(8,8,7,0));
  padding: 22px 8px 8px; display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transition: opacity .18s; }
.gsd-photo:hover .gsd-photo-acts { opacity: 1; }
.gsd-photo-acts a { color: #fff; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; }
.gsd-photo-acts a:hover { color: var(--gs-red); }
.gsd-photo--priv { border-color: var(--gs-field); }
.gsd-photo--priv:after { content: ''; position: absolute; top: 8px; left: 8px;
  width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; opacity: .6; }

/* --- conversations / message threads --- */
.gsd-threads { margin-top: 6px; border-top: 1px solid var(--gs-hair); }
.gsd-thread { display: flex; align-items: center; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--gs-hair); text-decoration: none; }
.gsd-thread-pic { flex: none; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; background: var(--gs-raised); }
.gsd-thread-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsd-thread-pic .gsd-mcard-none { font-size: 18px; }
.gsd-thread-body { flex: 1 1 auto; min-width: 0; }
.gsd-thread-name { color: #fff; font-size: 14px; font-weight: 600; }
.gsd-thread:hover .gsd-thread-name { color: var(--gs-red); }
.gsd-thread-snip { display: block; color: var(--gs-muted); font-size: 13px;
  font-weight: 300; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 2px; }
.gsd-thread-meta { flex: none; text-align: right; }
.gsd-thread-date { color: var(--gs-faint); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; }
.gsd-thread-unread { display: inline-block; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--gs-red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  margin-top: 6px; }
.gsd-thread.gsd-thread--unread .gsd-thread-name { color: #fff; }
.gsd-thread.gsd-thread--unread { background: rgba(227,35,27,.04); }
.gsd-thread-del { display: inline-block; margin-top: 6px; color: var(--gs-faint);
  font-size: 11px; text-decoration: none; }
.gsd-thread-del:hover { color: var(--gs-red); }

/* --- message conversation view --- */
.gsd-convo { margin-top: 8px; }
.gsd-msg { max-width: 74%; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 14px; font-size: 14px; line-height: 1.5; }
.gsd-msg-in { background: var(--gs-raised); color: var(--gs-body);
  border-bottom-left-radius: 4px; }
.gsd-msg-out { background: var(--gs-red); color: #fff; margin-left: auto;
  border-bottom-right-radius: 4px; }
.gsd-msg-time { display: block; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7; margin-top: 6px; }
.gsd-reply { display: flex; gap: 10px; align-items: flex-end; margin-top: 22px;
  border-top: 1px solid var(--gs-hair); padding-top: 18px; }
.gsd-reply textarea { flex: 1 1 auto; background: transparent;
  border: 1px solid var(--gs-field); border-radius: 8px; color: #fff;
  font-family: inherit; font-size: 14px; padding: 12px; min-height: 70px;
  resize: vertical; box-sizing: border-box; }
.gsd-reply textarea:focus { outline: 0; border-color: var(--gs-field-focus); }
.gsd-reply-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.gsd-reply-side .gs-btn { height: 40px; padding: 0 24px; }

/* conversation header */
.gsd-convo-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 20px; }
.gsd-convo-pic { flex: none; width: 60px; height: 60px; border-radius: 50%;
  overflow: hidden; background: var(--gs-raised); display: block; }
.gsd-convo-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsd-convo-who { min-width: 0; }
.gsd-convo-who .gsd-title { font-size: 22px; margin: 0; }
.gsd-convo-online { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #37d067; margin-left: 8px; vertical-align: middle; }
.gsd-convo-links { display: flex; gap: 16px; margin-top: 6px; }
.gsd-convo-links a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gs-muted); text-decoration: none; }
.gsd-convo-links a:hover { color: var(--gs-red); }
.gsd-convo-note { color: var(--gs-faint); font-size: 11px; }

@media (max-width: 560px) {
  .gsd-msg { max-width: 86%; }
  .gsd-reply { flex-direction: column; align-items: stretch; }
  .gsd-reply-side { align-items: stretch; }
}

/* --- public profile view (C board) --- */
.gsp-prof-head { border-bottom: 1px solid var(--gs-hair); padding-bottom: 18px;
  margin: 6px 0 26px; font-family: var(--gs-font); }
.gsp-prof-name { color: #fff; font-weight: 200; font-size: clamp(30px, 4vw, 40px);
  margin: 0; letter-spacing: .01em; }
.gsp-prof-online { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #37d067; margin-left: 12px; vertical-align: middle; }
.gsp-prof-headline { color: var(--gs-muted); font-size: 15px; font-weight: 300;
  margin-top: 8px; font-style: italic; }
.gsp-prof-hidden { color: var(--gs-red); font-style: normal; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; }

.gsp-prof-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start; font-family: var(--gs-font); }
.gsp-prof-aside { position: sticky; top: 20px; }
.gsp-prof-portrait { background: var(--gs-raised); border: 1px solid var(--gs-hair); }
.gsp-prof-portrait img { width: 100%; display: block; }
.gsp-prof-noportrait { aspect-ratio: 3 / 4; display: flex; align-items: center;
  justify-content: center; }
.gsp-prof-noportrait .gsd-mcard-none { font-size: 44px; }
.gsp-prof-actions { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 0; }
.gsp-prof-btn { width: 100%; height: 46px; margin-bottom: 8px; }
.gsp-prof-act { color: var(--gs-body); font-size: 12px; letter-spacing: .04em;
  text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--gs-hair); }
.gsp-prof-act:hover { color: #fff; }
.gsp-prof-act--danger:hover { color: var(--gs-red); }

.gsp-prof-stats { margin-top: 26px; }
.gsp-prof-sec { color: #fff; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 400; padding-bottom: 10px;
  border-bottom: 1px solid var(--gs-hair); margin: 26px 0 14px; }
.gsp-prof-aside .gsp-prof-sec:first-child { margin-top: 0; }
.gsp-prof-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px;
  margin: 0; }
.gsp-prof-dl dt { color: var(--gs-faint); font-size: 12px; font-weight: 300;
  white-space: nowrap; }
.gsp-prof-dl dd { color: #fff; font-size: 13px; margin: 0; }
.gsp-prof-dl dd a { color: var(--gs-red); text-decoration: none; }

.gsp-prof-self { color: var(--gs-body); font-size: 16px; font-weight: 300;
  line-height: 1.65; white-space: pre-line; }
.gsp-prof-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gsp-prof-thumb { display: block; width: 76px; height: 76px; overflow: hidden;
  background: var(--gs-raised); border: 1px solid var(--gs-hair); }
.gsp-prof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsp-prof-locked { display: flex; gap: 12px; align-items: flex-start;
  color: var(--gs-muted); font-size: 13px; font-weight: 300; line-height: 1.5;
  border: 1px dashed var(--gs-field); padding: 18px; }
.gsp-prof-lock { font-size: 20px; flex: none; opacity: .7; }
.gsp-prof-qa { display: grid; gap: 18px; }
.gsp-prof-q b { color: #fff; font-size: 13px; font-weight: 600; display: block;
  margin-bottom: 5px; }
.gsp-prof-q p { color: var(--gs-body); font-size: 14px; font-weight: 300;
  line-height: 1.6; margin: 0; white-space: pre-line; }
.gsp-prof-match b { color: #fff; font-size: 13px; font-weight: 600; display: block;
  margin-bottom: 8px; }
.gsp-prof-match div { color: var(--gs-body); font-size: 15px; font-weight: 300;
  line-height: 1.65; white-space: pre-line; }

@media (max-width: 760px) {
  .gsp-prof-cols { grid-template-columns: 1fr; }
  .gsp-prof-aside { position: static; }
  .gsp-prof-portrait { max-width: 280px; }
}

/* --- profile-edit form (long form) --- */
.gsd-form .gsd-formsec { color: #fff; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 400; padding-bottom: 10px;
  border-bottom: 1px solid var(--gs-hair); margin: 30px 0 16px; }
.gsd-form .gs-fld { height: auto; min-height: 48px; padding: 8px 14px;
  margin-bottom: 14px; }
.gsd-form .gs-fld textarea { background: transparent; border: 0; outline: 0;
  color: #fff; font-size: 14px; font-family: inherit; width: 100%;
  resize: vertical; line-height: 1.5; padding: 0; margin: 4px 0 0; }
.gsd-req .gs-lbl:after { content: ' *'; color: var(--gs-red); }
.gsd-hint { color: var(--gs-faint); font-size: 11px; font-weight: 300;
  margin: -8px 0 16px; line-height: 1.4; }
.gsd-hint a { color: var(--gs-muted); }
.gsd-radios { flex-direction: column; align-items: stretch; gap: 8px; }
.gsd-radios .gs-lbl { margin-bottom: 2px; }
.gsd-radios-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.gsd-radio { display: inline-flex; align-items: center; gap: 7px; color: #fff;
  font-size: 13px; font-weight: 300; white-space: nowrap; cursor: pointer; }
.gsd-radio input { accent-color: var(--gs-red); }
.gsd-vis { display: grid; gap: 12px; margin-bottom: 16px; }
.gsd-radio-block { display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--gs-hair); border-radius: 8px; padding: 14px;
  cursor: pointer; color: #fff; font-size: 14px; font-weight: 300; }
.gsd-radio-block input { accent-color: var(--gs-red); margin-top: 3px; }
.gsd-radio-block b { font-weight: 600; }
.gsd-suspend { border: 1px solid var(--gs-hair); border-radius: 8px;
  padding: 16px; margin-bottom: 8px; }
.gsd-suspend .gsd-check { color: var(--gs-red); font-weight: 400; }
.gsd-suspend .gsd-hint { margin: 8px 0 0; }
.gsd-form .gsd-actions { margin-top: 20px; }
.gsd-form .gsd-actions .gs-btn { height: 46px; padding: 0 32px; }

/* --- notice / success page --- */
.gsd-notice { max-width: 480px; margin: 40px auto; text-align: center;
  font-family: var(--gs-font); }
.gsd-notice-mark { display: flex; justify-content: center; margin-bottom: 20px; }
.gsd-notice-mark i { width: 14px; height: 14px; background: var(--gs-red);
  display: inline-block; }
.gsd-notice .gsd-title { margin: 0 0 12px; }
.gsd-notice-p { color: var(--gs-body); font-size: 15px; font-weight: 300;
  line-height: 1.6; margin: 0 0 24px; }
.gsd-notice-link { color: #fff; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--gs-red); padding-bottom: 3px; }
.gsd-notice-link:hover { color: var(--gs-red); }

/* --- known-issues list --- */
.gsd-issues { list-style: none; margin: 6px 0 0; padding: 0;
  border-top: 1px solid var(--gs-hair); }
.gsd-issues li { color: var(--gs-body); font-size: 14px; font-weight: 300;
  padding: 14px 0; border-bottom: 1px solid var(--gs-hair); }
.gsd-issues b { color: var(--gs-muted); font-weight: 600; margin-right: 10px;
  font-variant-numeric: tabular-nums; }
.gsd-issue-done { color: #37d067; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; margin-left: 8px; }

/* --- message archive (old messages) --- */
.gsd-arch-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.gsd-arch { border-top: 1px solid var(--gs-hair); }
.gsd-arch-row { display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--gs-hair); }
.gsd-arch-row--unread { background: rgba(227,35,27,.04); }
.gsd-arch-check { accent-color: var(--gs-red); flex: none; }
.gsd-arch-dot { flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gs-field); }
.gsd-arch-dot.on { background: var(--gs-red); }
.gsd-arch-link { flex: 1 1 auto; min-width: 0; display: flex;
  justify-content: space-between; align-items: baseline; gap: 16px;
  text-decoration: none; }
.gsd-arch-subj { color: #fff; font-size: 14px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsd-arch-row--unread .gsd-arch-subj { font-weight: 600; }
.gsd-arch-link:hover .gsd-arch-subj { color: var(--gs-red); }
.gsd-arch-meta { color: var(--gs-faint); font-size: 11px; flex: none;
  white-space: nowrap; }

/* --- single message view --- */
.gsd-msgview-meta { color: var(--gs-muted); font-size: 12px; font-weight: 300;
  padding-bottom: 14px; border-bottom: 1px solid var(--gs-hair); }
.gsd-msgview-meta a { color: #fff; text-decoration: none; }
.gsd-msgview-meta b { color: #fff; font-weight: 600; }
.gsd-msgview-subj { color: #fff; font-weight: 200; font-size: 24px;
  margin: 22px 0 16px; }
.gsd-msgview-body { color: var(--gs-body); font-size: 15px; font-weight: 300;
  line-height: 1.7; white-space: pre-line; }
.gsd-msgview-links { margin: 26px 0 0; padding-top: 18px;
  border-top: 1px solid var(--gs-hair); }
.gsd-msgview-sender { margin-top: 30px; }

/* ================= phase 8: legacy-css firewall + control completion ================= */

/* --- 8a: headings. style.css h1 {uppercase, dotted border, Roboto Condensed,
   -1px tracking} leaks into every gs-classed h1 not covered here. --- */
.gsd-title, .gsd-msgview-subj { font-family: var(--gs-font);
  text-transform: none; border-bottom: 0; letter-spacing: 0; }
.gsp-prof-name { font-family: var(--gs-font); text-transform: none;
  border-bottom: 0; }

/* --- 8a: links. style.css a{#1A1AB0} + a:hover{#CC0000; underline} beats any
   gs rule that omits color/text-decoration on hover. Every gs link component
   re-asserts BOTH states. --- */
.gs-caplink:hover, .gs-caplink:focus-visible { text-decoration: none; }
.gs-gitem:hover, .gs-gitem:focus-visible { text-decoration: none; }
.gs-l1-item:hover, .gs-l1-cap:hover, .gs-l1-brand:hover,
.gs-l1-user:hover { text-decoration: none; color: var(--gs-bg); }
.gs-foot a:hover { text-decoration: none; }
.gsr-title:hover { color: #fff; text-decoration: none; }
.gsa-title:hover { color: #fff; text-decoration: none; }
.gsr-redtile .gsr-title:hover { color: var(--gs-bg); }
.gsr-img:hover, .gsa-thumb:hover { text-decoration: none; }
.gsr-pager a:hover { text-decoration: none; }
.gsh-strip-head .t:hover, .gsh-strip-head .m:hover { text-decoration: none; }
a.gs-art-kicker:hover { text-decoration: none; }
.gs-art-body a:hover { text-decoration: none; }
.gs-art-rel:hover { text-decoration: none; }
.gs-art-rail-sec:hover { color: var(--gs-red); text-decoration: none; }
.gs-artbar a:hover { color: var(--gs-red); text-decoration: none; }
.gs-art-reviews .articleAddReview a:hover { color: var(--gs-paper-text);
  text-decoration: none; border-color: var(--gs-paper-text); }
.gs-art-reviews .reviewInfo a:hover { color: var(--gs-red); text-decoration: none; }
.gs-art-reviews .reviewBody a:hover { color: var(--gs-red); text-decoration: none; }
.gsp-link:hover { text-decoration: none; }
.gsp-mut a { color: var(--gs-muted); }
.gsp-mut a:hover, .gsp-note a:hover { color: #fff; text-decoration: none; }
.gsd-tab:hover { text-decoration: none; }
.gsd-mcard:hover, .gsd-mcard-x:hover { text-decoration: none; }
.gsd-thread:hover, .gsd-thread-del:hover { text-decoration: none; }
.gsd-a a:hover { text-decoration: none; }
.gsd-a a:visited { color: #fff; }
.gsd-empty a:hover, .gsd-notice-link:hover { text-decoration: none; }
.gsp-prof-act:hover { text-decoration: none; }
.gsp-prof-dl dd a:hover { color: var(--gs-red); text-decoration: none; }
.gsd-photo-acts a:hover, .gsd-convo-links a:hover { text-decoration: none; }
.gsd-arch-link:hover { text-decoration: none; }
.gsd-hint a:hover, .gsd-danger-note a:hover { color: #fff; text-decoration: none; }
.gsr-admin a:hover, .gs-adminbar a:hover { color: #fff; text-decoration: none; }

/* legacy pager include (prev-next-bottom) rendered inside dark results:
   neutralize until it is replaced. */
.gsp-pager a { color: var(--gs-muted); }
.gsp-pager a:hover { color: #fff; text-decoration: none; }
.gsp-pager img { filter: invert(1) opacity(.55); }
.gsp-pager .pageButtons { border: 0; margin: 0; padding: 0; }
.gsp-pager .pagePager, .gsp-pager .pagePagerEnd { color: var(--gs-faint); }

/* --- 8b: selects get a chevron (appearance:none stripped the native one) --- */
.gs-fld { position: relative; }
/* select spans the full field (its own padding clears the chevron) - a
   padding-right strip on the FIELD left the arrow zone select-less: clicking
   the arrow hit the wrapper and nothing opened (Nik caught it) */
.gs-fld select { padding-right: 24px; }
.gs-fld:has(select)::after { content: ''; position: absolute; right: 14px;
  top: 50%; margin-top: -2px; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid #6a6a68;
  pointer-events: none; }
.gs-fld select { cursor: pointer; }
.gs-fld option { color: #111; }

/* --- 8b: custom radios + checkboxes (locked spec: 15px, #5a5a58 border,
   near-white fill when on; default OS controls on black were unreadable) --- */
.gsp-check input, .gsd-check input, .gsp-radio input, .gsd-radio input,
.gsd-radio-block input, .gsd-arch-check {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px;
  margin: 0; padding: 0; flex: none; border: 1px solid #5a5a58;
  border-radius: 3px; background: transparent; position: relative;
  cursor: pointer; box-sizing: border-box; }
.gsp-radio input, .gsd-radio input, .gsd-radio-block input { border-radius: 50%; }
.gsp-check input:hover, .gsd-check input:hover, .gsp-radio input:hover,
.gsd-radio input:hover, .gsd-radio-block input:hover,
.gsd-arch-check:hover { border-color: var(--gs-field-focus); }
.gsp-check input:checked, .gsd-check input:checked, .gsd-arch-check:checked {
  background: var(--gs-btn-fill); border-color: var(--gs-btn-fill); }
.gsp-check input:checked::after, .gsd-check input:checked::after,
.gsd-arch-check:checked::after { content: ''; position: absolute; left: 4px;
  top: 1px; width: 4px; height: 8px; border: solid #0a0a09;
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gsp-radio input:checked, .gsd-radio input:checked,
.gsd-radio-block input:checked { border-color: var(--gs-btn-fill); }
.gsp-radio input:checked::after, .gsd-radio input:checked::after,
.gsd-radio-block input:checked::after { content: ''; position: absolute;
  left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gs-btn-fill); }
.gsp-check input:focus-visible, .gsd-check input:focus-visible,
.gsp-radio input:focus-visible, .gsd-radio input:focus-visible,
.gsd-radio-block input:focus-visible, .gsd-arch-check:focus-visible {
  outline: 1px solid var(--gs-field-focus); outline-offset: 2px; }
.gs-btn:focus-visible, .gs-btn-ghost:focus-visible,
.gs-btn-danger:focus-visible { outline: 2px solid var(--gs-field-focus);
  outline-offset: 2px; }

/* --- 8e: thread rows - keep snippet clear of the unread pill / date column --- */
.gsd-thread-body { padding-right: 6px; }
.gsd-thread-del { padding: 4px 6px; }

/* ================= phase 9: motion + premium polish ================= */

/* page crossfade between same-origin navigations (progressive enhancement) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* one consistent transition timing for every interactive element */
.gs-caplink, .gs-gitem, .gs-l1-item, .gs-l1-cap, .gs-foot a,
.gsr-pager a, .gsh-strip-head .t, .gsh-strip-head .m,
.gs-art-kicker, .gs-art-body a, .gs-art-rel-title, .gs-art-rail-sec,
.gs-artbar a, .gsp-link, .gsp-mut a, .gsd-tab, .gsd-mcard-name,
.gsd-mcard-x, .gsd-thread-name, .gsd-thread-del, .gsd-a a,
.gsp-prof-act, .gsd-photo-acts a, .gsd-convo-links a, .gsd-arch-subj,
.gsd-hint a, .gsd-danger-note a, .gsd-notice-link, .gsd-empty a,
.gsd-photo-del, .gsp-prof-dl dd a {
  transition: color .18s ease-out, opacity .18s ease-out,
    background-color .18s ease-out, border-color .18s ease-out; }
.gsr-title, .gsa-title { transition: color .18s ease-out, opacity .18s ease-out; }
.gs-fld { transition: border-color .18s ease-out; }
.gs-btn, .gs-btn-ghost, .gs-btn-danger {
  transition: color .18s ease-out, background-color .18s ease-out,
    border-color .18s ease-out, transform .12s ease-out; }
.gs-btn:hover { background: #fff; border-color: #fff; }
.gs-btn-ghost:hover { border-color: var(--gs-field-focus); color: #fff; }
.gs-btn-danger:hover { background: var(--gs-red); color: #fff; }
.gs-btn:active, .gs-btn-ghost:active, .gs-btn-danger:active {
  transform: translateY(1px); }

/* reveal staggers inside tile/card grids */
html.gs-js .gsr-grid .gs-reveal:nth-child(3n+2),
html.gs-js .gsh-news .gs-reveal:nth-child(3n+2),
html.gs-js .gsp-grid .gs-reveal:nth-child(3n+2) { transition-delay: .07s; }
html.gs-js .gsr-grid .gs-reveal:nth-child(3n+3),
html.gs-js .gsh-news .gs-reveal:nth-child(3n+3),
html.gs-js .gsp-grid .gs-reveal:nth-child(3n+3) { transition-delay: .14s; }

/* type/red tiles: title reads first, meta pinned to the bottom edge -
   stretched tiles in mixed rows no longer show a dead void */
.gsr-type { display: flex; flex-direction: column; }
.gsr-type > div:last-child { display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; }
.gsr-type .gsr-meta { order: 2; margin: auto 0 0; padding-top: 14px; }
.gsr-type .gsr-title { order: 0; }
.gsr-type .gsr-intro { order: 1; }
/* the date cell of a meta row never truncates */
.gsr-meta span:first-child { flex: none; }

/* dashboard subnav on small screens: right edge fades out (scroll affordance) */
@media (max-width: 599px) {
  .gsd-nav { -webkit-mask-image: linear-gradient(to right,
      #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}

/* article: universal red drop-cap (skips bodies that carry the legacy
   articleInitial span), board pull-quote, readable meta */
.gs-art-body:not(:has(.articleInitial)) > p:first-of-type:not(:has(img))::first-letter,
.gs-art-body:not(:has(.articleInitial)) > div:first-child:not(:has(img))::first-letter {
  float: left; font-size: 58px; line-height: .82; font-weight: 400;
  padding: 6px 10px 0 0; color: var(--gs-red); }
/* div-paragraph bodies (legacy WYSIWYG markup) get the paragraph rhythm */
.gs-art-body > div { margin: 0 0 8px; }
.gs-art-body blockquote { margin: 30px 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gs-red); font-weight: 700; font-size: 21px;
  line-height: 1.5; }
/* reviews: kill the legacy article.css byline bubble (white bar + tail gif) */
.gs-art-reviews .reviewBody { background: none; padding: 0; border: 0; }
.gs-art-reviews .reviewInfo { background: none; width: auto; margin: 0;
  padding: 6px 0 16px; }

/* auth cards get a raised surface (locked F board) */
.gsp-card { background: var(--gs-raised); border: 1px solid var(--gs-hair);
  padding: 51px 49px 49px; }
.gsp-card .gs-btn, .gsp-card .gs-btn-ghost { width: 100%;
  box-sizing: border-box; }
/* login row: checkbox stacks above so the submit can take the full line */
.gsp-card .gsp-row { flex-direction: column; align-items: stretch; gap: 18px; }

/* register: the temp-password note hangs under the email column */
.gsp-grid2 .gsp-note { grid-column: 2 / 3; margin-top: -2px; }
@media (max-width: 560px) { .gsp-grid2 .gsp-note { grid-column: 1 / -1; } }

@media (max-width: 860px) {
  .gs-art-body:not(:has(.articleInitial)) > p:first-of-type:not(:has(img))::first-letter,
  .gs-art-body:not(:has(.articleInitial)) > div:first-child:not(:has(img))::first-letter {
    font-size: 48px; }
  /* Wired mobile: bigger tight title, wider body gutters (26px inset);
     lede pads +8 over the 18px main gutter so everything lines up */
  .gs-art-title { font-size: 44px; }
  .gs-art-lede { padding-left: 18px; padding-right: 18px; }
  .gs-art-paper { padding-left: 36px; padding-right: 36px; }
}

/* ================= phase 10: finished pages (comments on paper, list actions) ============ */

/* comment pages (review-list / review-edit / review-sent) live on the paper surface */
.gsc-wrap { max-width: 660px; margin: 14px auto 40px; font-family: var(--gs-font); }
.gsc-kicker a { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: #8a8a86; text-decoration: none; border-bottom: 1px solid var(--gs-red);
  transition: color .18s ease-out; }
.gsc-kicker a:hover { color: var(--gs-red); text-decoration: none; }
.gsc-title { font-family: var(--gs-font); color: var(--gs-paper-text);
  font-weight: 200; font-size: 30px; margin: 14px 0 8px; text-transform: none;
  border-bottom: 0; letter-spacing: 0; }
.gsc-sub { color: #55554f; font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.gsc-err { color: var(--gs-red); font-size: 12px; margin: 10px 0 0; }
.gsc-err:empty { display: none; }
.gsc-none { color: #8a8a86; font-size: 14px; padding: 18px 0; }
.gsc-lbl { display: block; font-size: 11px; color: #8a8a86; margin: 20px 0 8px; }
.gsc-hint { color: #b0b0ab; text-transform: none; }
.gsc-ta, .gsc-inp { width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--gs-paper-field); border-radius: 8px; padding: 12px 14px;
  font-family: var(--gs-font); font-size: 14px; color: var(--gs-paper-text);
  transition: border-color .18s ease-out; }
.gsc-ta { min-height: 150px; resize: vertical; }
.gsc-inp { height: 44px; padding: 0 14px; max-width: 320px; }
.gsc-ta:focus, .gsc-inp:focus { outline: 0; border-color: #8a8a86; }
.gsc-radio { display: flex; gap: 9px; align-items: center;
  color: var(--gs-paper-text); font-size: 14px; margin: 0 0 10px; cursor: pointer; }
.gsc-botrow { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.gsc-actions { margin-top: 26px; }
/* paper button variants (primary inverts to near-black on paper) */
.gs-btn--paper { background: #111110; border-color: #111110; color: var(--gs-paper); }
.gs-btn--paper:hover { background: #2a2a28; border-color: #2a2a28; }
.gs-btn-ghost--paper { color: var(--gs-paper-text); border-color: var(--gs-paper-field); }
.gs-btn-ghost--paper:hover { color: var(--gs-paper-text); border-color: var(--gs-paper-text); }
.gsc-wrap .gs-art-reviews { margin-top: 12px; border-top: 0; padding-top: 0; }

/* list.jsp action row */
.gsd-listactions { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin: -6px 0 22px; flex-wrap: wrap; }
a.gsd-mini { height: 30px; padding: 0 12px; font-size: 9px; }

/* gsd-formsec used standalone (conversation-help) - was scoped to .gsd-form only */
.gsd-formsec { color: #fff; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 400; padding-bottom: 10px;
  border-bottom: 1px solid var(--gs-hair); margin: 30px 0 16px; }

/* profile galleries: no legacy img borders on thumbs */
.gsp-prof-thumb img, .gsp-prof-portrait img { border: 0; }

/* ================= phase 11: long-tail statics (queeropedia, zdravlje, coming-out, marketing, kontakt) ============ */

.gsq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px;
  margin: 0 0 34px; }
.gsq-mini { border-top: 1px solid var(--gs-hair); padding: 12px 0; display: block;
  text-decoration: none; }
.gsq-mini .d { font-size: 9px; letter-spacing: .18em; color: var(--gs-faint);
  text-transform: uppercase; display: block; margin-bottom: 4px; }
.gsq-mini .t2 { color: #fff; font-weight: 200; font-size: 17px; line-height: 1.25;
  transition: opacity .18s ease-out; }
.gsq-mini:hover { text-decoration: none; }
.gsq-mini:hover .t2 { opacity: .62; }
.gsq-more { display: inline-block; margin-top: 14px; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gs-muted);
  text-decoration: none; transition: color .18s ease-out; }
.gsq-more:hover { color: #fff; text-decoration: none; }
.gsq-linklist { display: block; }
.gsq-item { display: block; break-inside: avoid; color: var(--gs-body);
  font-size: 14px; font-weight: 300; line-height: 1.5; padding: 8px 0;
  text-decoration: none; border-top: 1px solid var(--gs-hair);
  transition: color .18s ease-out; }
.gsq-item:hover { color: #fff; text-decoration: none; }
.gsq-note { margin-top: 18px; color: var(--gs-faint); font-size: 12px;
  font-family: var(--gs-font); }
.gsq-note a { color: var(--gs-muted); text-decoration: none;
  border-bottom: 1px solid var(--gs-red); transition: color .18s ease-out; }
.gsq-note a:hover { color: #fff; text-decoration: none; }

/* queeropedia A-Z index */
.gsq-index { column-width: 260px; column-gap: 40px; margin-top: 10px; }
.gsq-letter { break-after: avoid; color: var(--gs-red); font-weight: 200;
  font-size: 34px; margin: 26px 0 6px; border-bottom: 1px solid var(--gs-hair);
  padding-bottom: 6px; font-family: var(--gs-font); }
.gsq-index .gsq-item { border-top: 0; padding: 5px 0; }

/* kontakt textarea (dark form) */
.gsk-ta { width: 100%; box-sizing: border-box; background: transparent;
  border: 1px solid var(--gs-field); border-radius: 8px; color: #fff;
  font-family: var(--gs-font); font-size: 14px; padding: 12px 14px;
  min-height: 140px; resize: vertical; transition: border-color .18s ease-out; }
.gsk-ta:focus { outline: 0; border-color: var(--gs-field-focus); }

/* marketing price tables (dark) */
.gsm-sec { margin: 0 0 34px; }
.gsm-table { width: 100%; border-collapse: collapse; font-family: var(--gs-font); }
.gsm-table th { text-align: left; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gs-muted); font-weight: 400;
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--gs-hair); }
.gsm-table td { font-size: 14px; font-weight: 300; color: var(--gs-body);
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--gs-hair);
  vertical-align: top; }
.gsm-table td:first-child { color: #fff; white-space: nowrap; }
.gsm-table td:last-child { color: #fff; white-space: nowrap; }

/* untouched legacy pages: center their fixed-width tables on the white main */
.gs-main > table[width], .gs-main > center > table[width] {
  margin-left: auto; margin-right: auto; }

@media (max-width: 699px) {
  .gsq-cols { grid-template-columns: 1fr; }
  .gsm-table td:first-child, .gsm-table td:last-child { white-space: normal; }
}

/* legacy in-body intro paragraphs (articleIntro spans) ride the paper cleanly */
.gs-art-body .articleIntro { font-family: var(--gs-font); font-size: 17px;
  color: #55554f; line-height: 1.65; }

/* rules-list links (marketing bullets) were unstyled -> browser blue on black */
.gsd-rules a { color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--gs-red); transition: color .18s ease-out; }
.gsd-rules a:hover { color: var(--gs-red); text-decoration: none; }

/* subnav: when scrolled, fade the left edge too (right fade is static) */
@media (max-width: 599px) {
  .gsd-nav.gsd-nav--scrolled { -webkit-mask-image: linear-gradient(to right,
      transparent, #000 28px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right,
      transparent, #000 28px, #000 calc(100% - 32px), transparent); }
}

/* inline links inside dashboard lead/note copy (arhivu, Lista pristupa, unlocked toggle) */
.gsd-lead a, .gsd-upload-note a, .gsd-photo-sec-note a {
  color: #fff; text-decoration: none; border-bottom: 1px solid var(--gs-red);
  transition: color .18s ease-out; }
.gsd-lead a:hover, .gsd-upload-note a:hover, .gsd-photo-sec-note a:hover {
  color: var(--gs-red); text-decoration: none; }
/* thread snippets: clip long unbreakable tokens at the body edge */
.gsd-thread-body { overflow: hidden; }

/* ================= phase 12: personals UX pass (chat order, search accordion, veze tabs) ============ */

/* --- 12a: members landing (index): pulse + accordion rows + chips --- */
.gsp-pulse { display: flex; gap: 9px; align-items: center; color: #fff;
  font-size: 13px; font-weight: 300; margin: 0 0 10px;
  font-family: var(--gs-font); }
.gsp-pulse i { width: 8px; height: 8px; border-radius: 50%; background: #37d067;
  flex: none; }
.gsp-acc { border-top: 1px solid var(--gs-hair); font-family: var(--gs-font); }
.gsp-acc summary { list-style: none; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 2px; color: #fff; font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 400; font-family: var(--gs-font);
  transition: color .18s ease-out; }
.gsp-acc summary::-webkit-details-marker { display: none; }
.gsp-acc summary:focus-visible { outline: 1px solid var(--gs-field-focus);
  outline-offset: 4px; }
.gsp-acc-x { flex: none; font-style: normal; }
.gsp-acc-x::before { content: '+'; color: var(--gs-muted); font-size: 17px;
  font-weight: 200; line-height: 1; }
.gsp-acc[open] > summary .gsp-acc-x::before { content: '\2212'; }
.gsp-acc-body { padding: 4px 0 26px; }
.gsp-acc[open] + .gsp-chips { display: none; }
.gsp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px;
  font-family: var(--gs-font); }
.gsp-chip { display: inline-flex; gap: 9px; align-items: center;
  border: 1px solid var(--gs-field); border-radius: 4px; padding: 8px 12px;
  color: #fff; font-size: 12px; font-weight: 300; text-decoration: none;
  transition: border-color .18s ease-out; }
.gsp-chip b { color: var(--gs-faint); font-weight: 400; font-size: 10px; }
.gsp-chip:hover { color: #fff; text-decoration: none;
  border-color: var(--gs-field-focus); }
.gsp-chip:hover b { color: var(--gs-red); }
.gsp-onlinerow { display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--gs-hair); border-bottom: 1px solid var(--gs-hair);
  padding: 18px 2px; text-decoration: none; font-family: var(--gs-font); }
.gsp-onlinerow .t { color: #fff; font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 400; }
.gsp-onlinerow .n { color: var(--gs-muted); font-size: 12px; font-weight: 300;
  display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.gsp-onlinerow .n i { width: 6px; height: 6px; border-radius: 50%;
  background: #37d067; }
.gsp-onlinerow .a { color: var(--gs-muted); font-size: 15px; font-weight: 200;
  transition: color .18s ease-out; }
.gsp-onlinerow:hover { text-decoration: none; }
.gsp-onlinerow:hover .a { color: #fff; }
.gsp-lookup { display: flex; gap: 10px; align-items: stretch; max-width: 460px; }
.gsp-lookup .gs-fld { flex: 1 1 auto; }
.gsp-lookup .gs-btn-ghost { height: 48px; padding: 0 20px; flex: none; }
/* segmented sort control (radio group styled as one bar) */
.gsp-seg { display: flex; border: 1px solid var(--gs-field); border-radius: 8px;
  height: 48px; overflow: hidden; box-sizing: border-box; }
.gsp-seg label { flex: 1 1 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--gs-muted);
  font-size: 11px; font-weight: 300; letter-spacing: .02em; padding: 0 6px;
  border-left: 1px solid var(--gs-field); text-align: center; min-width: 0;
  transition: color .18s ease-out, background-color .18s ease-out; }
.gsp-seg label:first-child { border-left: 0; }
.gsp-seg label span { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gsp-seg input { position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; }
.gsp-seg label:has(input:checked) { color: #fff; background: var(--gs-raised-2); }
.gsp-seg label:focus-within { outline: 1px solid var(--gs-field-focus);
  outline-offset: -2px; }
/* "sa slikom" stays a plain checkbox (locked control spec: glyphs, never boxed) */

/* --- 12b: conversation view flipped to messenger order --- */
.gsd-convo-head--stick { position: sticky; top: 0; z-index: 20;
  background: var(--gs-bg); margin: 0 0 8px; padding: 10px 0;
  border-bottom: 1px solid var(--gs-hair); }
.gsd-convo-head--stick .gsd-convo-pic { width: 48px; height: 48px; }
.gsd-convo-head--stick .gsd-title { font-size: 19px; }
.gsd-older { text-align: center; margin: 6px 0 16px; }
.gsd-older-t { display: block; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gs-faint); margin-bottom: 4px; }
.gsd-older .gsp-pager { padding: 0; }
.gsd-sep { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px; }
.gsd-sep::before, .gsd-sep::after { content: ''; flex: 1 1 auto; height: 1px;
  background: var(--gs-hair); }
.gsd-sep span { flex: none; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gs-faint); font-weight: 400; }
.gsd-unread { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.gsd-unread::before, .gsd-unread::after { content: ''; flex: 1 1 auto;
  height: 1px; background: var(--gs-red); opacity: .55; }
.gsd-unread span { flex: none; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gs-red); font-weight: 600; }
.gsd-msg--grp { margin-bottom: 4px; }
/* docked composer: block layout pinned to the viewport bottom while reading */
.gsd-reply--dock { display: block; position: sticky; bottom: 0; z-index: 20;
  background: var(--gs-bg); margin-top: 10px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gs-hair); }
.gsd-reply-row { display: flex; gap: 10px; align-items: flex-end; }
.gsd-reply--dock textarea { flex: 1 1 auto; min-height: 48px; }
.gsd-reply--dock .gs-btn { height: 48px; padding: 0 22px; flex: none; }
.gsd-unlock { display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--gs-field); border-radius: 4px; padding: 7px 12px;
  margin: 0 0 10px; color: var(--gs-muted); font-size: 11px; font-weight: 300;
  cursor: pointer; font-family: var(--gs-font);
  transition: color .18s ease-out, border-color .18s ease-out; }
.gsd-unlock input { position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; }
.gsd-unlock:has(input:checked) { color: #fff; border-color: var(--gs-red); }
.gsd-unlock:has(input:checked) .gs-ico-lock { color: var(--gs-red); }
.gsd-unlock:focus-within { outline: 1px solid var(--gs-field-focus);
  outline-offset: 2px; }
.gsd-unlock--on { cursor: default; border-style: dashed; color: var(--gs-faint); }
/* lock glyph = phosphor lock-simple via mask (was CSS-drawn; mask keeps every
   existing usage + sizing, color rides background-color: currentColor) */
.gs-ico-lock { position: relative; display: inline-block; width: 13px;
  height: 13px; border: 0; box-sizing: border-box; flex: none; margin-top: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.gs-ico-lock::before { content: none; }

/* --- 12c: inbox rows, veze tabs, unread badge --- */
.gsd-thread-dot { display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gs-red); margin-top: 8px; }
.gsd-tab-n { color: var(--gs-red); font-weight: 700; letter-spacing: 0; }
.gsd-archrow { margin-top: 26px; text-align: right; }
.gsd-archrow a { font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gs-faint); text-decoration: none;
  font-weight: 300; transition: color .18s ease-out; }
.gsd-archrow a:hover { color: #fff; text-decoration: none; }
.gsd-empty-act { margin-top: 18px; }
.gsd-empty-act a.gs-btn-ghost { color: var(--gs-btn-fill);
  border: 1px solid var(--gs-field); }
.gsd-empty-act a.gs-btn-ghost:hover { color: #fff; text-decoration: none;
  border-color: var(--gs-field-focus); }
.gsd-veze { display: flex; gap: 20px; flex-wrap: wrap; margin: -6px 0 20px;
  font-family: var(--gs-font); }
.gsd-vtab { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gs-muted); font-weight: 300; text-decoration: none;
  padding-bottom: 5px; transition: color .18s ease-out; }
.gsd-vtab:hover { color: #fff; text-decoration: none; }
.gsd-vtab.on { color: #fff; font-weight: 600;
  border-bottom: 2px solid var(--gs-red); }

/* --- 12d: profile chips, locked-photos teaser, mobile action bar --- */
.gsp-prof-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gsp-pchip { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--gs-field); border-radius: 4px; padding: 6px 11px;
  color: var(--gs-body); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 400; font-family: var(--gs-font); }
.gsp-pchip--on { color: #37d067; border-color: rgba(55, 208, 103, .35); }
.gsp-pchip--on i { width: 6px; height: 6px; border-radius: 50%;
  background: #37d067; }
.gsp-prof-lockrow { display: flex; gap: 8px; flex: none; }
.gsp-prof-lockthumb { width: 54px; height: 54px; background: var(--gs-raised);
  border: 1px solid var(--gs-hair); display: flex; align-items: center;
  justify-content: center; color: var(--gs-faint); }
.gsp-prof-lockthumb .gs-ico-lock { margin-top: 0; }
.gsp-prof-locktext { min-width: 0; }
.gsp-prof-locktext b { display: block; color: #fff; font-size: 13px;
  font-weight: 600; margin-bottom: 5px; }
.gsp-prof-locktext a { color: var(--gs-muted); font-size: 12px;
  text-decoration: none; border-bottom: 1px solid var(--gs-red);
  padding-bottom: 1px; transition: color .18s ease-out; }
.gsp-prof-locktext a:hover { color: #fff; text-decoration: none; }
.gsp-profbar { display: none; }
@media (max-width: 760px) {
  .gsp-profbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 45; gap: 10px; align-items: stretch;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--gs-bg); border-top: 1px solid var(--gs-hair); }
  .gsp-profbar .gs-btn { flex: 1 1 auto; height: 46px; }
  .gsp-profbar .gs-btn-ghost { flex: none; height: 46px; padding: 0 18px; }
  .gsd-wrap.gsp-hasbar { padding-bottom: 90px; }
}

/* band right edge: sa-slikom sits span-2, submit pins to the last two columns.
   (.gsp-band > div beats the bare cell classes on specificity - re-pin here) */
.gsp-band > div.gsp-chkcell { grid-column: span 2; }
.gsp-band > div.gsp-gocell { grid-column: -3 / -1; }
@media (max-width: 699px) {
  .gsp-band > div.gsp-chkcell, .gsp-band > div.gsp-gocell { grid-column: span 4; }
}

/* ================= phase 13: pic-upload three-zone rebuild (Opcija 1) ============ */
.gsd-head--split { justify-content: space-between; align-items: center; }
.gsd-headside { display: flex; gap: 16px; align-items: center; }
.gsd-headside .gs-btn[disabled] { opacity: .35; cursor: default; }
.gsd-capnote { color: var(--gs-muted); font-size: 13px; margin: -8px 0 18px; }
.gsd-errline { color: var(--gs-red); font-size: 13px; margin: -4px 0 18px; }
.gsd-okline { display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(55, 208, 103, .3); padding: 11px 14px; margin: 0 0 20px;
  font-size: 13px; color: var(--gs-body); font-family: var(--gs-font); }
.gsd-okline i { font-style: normal; color: #37d067; flex: none; }
.gsd-ok-undo { margin-left: auto; color: var(--gs-muted); font-size: 12px;
  text-decoration: none; border-bottom: 1px solid var(--gs-red);
  padding-bottom: 1px; white-space: nowrap; transition: color .18s ease-out; }
.gsd-ok-undo:hover { color: #fff; text-decoration: none; }
html.gs-js .gsd-addnative { display: none; }
.gsd-addnative { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center;
  border: 1px dashed var(--gs-field); padding: 18px; margin: 0 0 20px; }
.gsd-choice { border: 1px solid var(--gs-field); padding: 18px; margin: 0 0 22px;
  font-family: var(--gs-font); }
.gsd-choice-t { font-size: 13px; color: var(--gs-muted); margin-bottom: 12px; }
.gsd-choice-row { display: flex; gap: 10px; }
.gsd-choice-row .gs-btn-ghost { flex: 1 1 0; height: 48px; }
.gsd-choice-hint { font-size: 12px; color: var(--gs-faint); margin-top: 12px;
  line-height: 1.55; }
.gsd-pslot { display: flex; gap: 20px; align-items: flex-start; margin: 4px 0 8px; }
.gsd-pslot-big { position: relative; width: 190px; aspect-ratio: 3 / 4; flex: none;
  background: var(--gs-raised); border: 1px solid var(--gs-hair); overflow: hidden; }
.gsd-pslot-big img { width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0; }
.gsd-pslot-big--empty { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; border-style: dashed;
  border-color: var(--gs-field); cursor: pointer; color: var(--gs-faint); }
.gsd-pslot-big--empty i { font-style: normal; font-size: 30px; font-weight: 200;
  color: var(--gs-muted); }
.gsd-pslot-big--empty span { font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; padding: 0 12px; }
.gsd-pslot-meta { padding-top: 4px; min-width: 0; }
.gsd-pslot-t { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.gsd-pslot-s { color: var(--gs-faint); font-size: 13px; line-height: 1.6;
  max-width: 340px; margin-bottom: 14px; }
.gsd-photo-sec-head { display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 3px solid #f5f5f5; padding-top: 14px; }
.gsd-privnote { display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-size: 13px; color: var(--gs-body); font-weight: 300;
  font-family: var(--gs-font); }
.gsd-privnote .gs-ico-lock { color: var(--gs-muted); flex: none; margin-top: 2px; }
.gsd-privnote span { line-height: 1.5; flex: 1 1 200px; min-width: 0; }
.gsd-privnote .gs-btn-ghost { margin-left: auto; flex: none; height: 34px;
  padding: 0 14px; font-size: 9px; }
.gsd-pact-txt { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px;
  padding-right: 4px; }
.gsd-pacts a, .gsd-pacts .gsd-pact-off { flex: 0 0 36px; }
.gsd-pacts .gsd-pact-txt { flex: 1 1 auto; }
.gsd-sec-note { font-size: 11px; letter-spacing: .02em; text-transform: none;
  color: var(--gs-faint); font-weight: 300; }
.gsd-sec-note a { color: var(--gs-muted); text-decoration: none;
  border-bottom: 1px solid var(--gs-red); transition: color .18s ease-out; }
.gsd-sec-note a:hover { color: #fff; text-decoration: none; }
/* action bar sits UNDER the photo, never over it; tiles keep natural height */
.gsd-photos { align-items: start; }
.gsd-photo { aspect-ratio: auto; display: flex; flex-direction: column; }
.gsd-photo > img { width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; flex: none; }
.gsd-addtile { aspect-ratio: 1 / 1; }
.gsd-pacts { position: static; display: flex;
  background: var(--gs-raised); border-top: 1px solid var(--gs-hair); }
.gsd-pacts a, .gsd-pacts .gsd-pact-off { flex: 1 1 0; display: flex;
  align-items: center; justify-content: center; padding: 9px 0; font-size: 13px;
  color: var(--gs-body); text-decoration: none;
  border-left: 1px solid var(--gs-hair);
  transition: color .18s ease-out, background-color .18s ease-out; }
.gsd-pacts a:first-child, .gsd-pacts .gsd-pact-off:first-child { border-left: 0; }
.gsd-pacts a:hover { color: #fff; background: rgba(36, 36, 34, .9);
  text-decoration: none; }
.gsd-pacts .gsd-pact-del { color: var(--gs-red); }
.gsd-pacts .gsd-pact-del:hover { color: #fff; background: var(--gs-red); }
.gsd-pact-off { opacity: .35; cursor: default; }
.gs-ico-lock--open::before { transform: translateX(3px) rotate(18deg); }
.gsd-addtile { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; aspect-ratio: 1 / 1;
  border: 1px dashed var(--gs-field); color: var(--gs-faint); cursor: pointer;
  transition: border-color .18s ease-out, color .18s ease-out; }
.gsd-addtile:hover { border-color: var(--gs-field-focus); color: var(--gs-muted); }
.gsd-addtile i { font-style: normal; font-size: 24px; font-weight: 200;
  color: var(--gs-muted); }
.gsd-addtile span { font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; }
.gsd-addtile[data-gs-full] { opacity: .35; cursor: default; }
/* profile-photo picker page */
.gsd-pickgrid { align-items: start; }
.gsd-pick { position: relative; display: flex; flex-direction: column;
  background: var(--gs-raised); border: 1px solid var(--gs-hair);
  text-decoration: none; overflow: hidden;
  transition: border-color .18s ease-out; }
a.gsd-pick:hover { border-color: var(--gs-field-focus); text-decoration: none; }
.gsd-pick img { width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; display: block; border: 0; flex: none; }
.gsd-pick-lbl { display: flex; align-items: center; justify-content: center;
  padding: 10px 0; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gs-btn-fill); font-weight: 600;
  background: var(--gs-raised); border-top: 1px solid var(--gs-hair); }
a.gsd-pick:hover .gsd-pick-lbl { color: #fff; }
.gsd-pick--now { opacity: .6; }
.gsd-pick--now .gsd-pick-lbl { color: var(--gs-faint); font-weight: 300; }

.gsd-ruleline { margin-top: 34px; font-size: 12px; color: var(--gs-faint);
  line-height: 1.7; font-family: var(--gs-font); }
.gsd-ruleline > b { color: var(--gs-muted); font-weight: 600; }
.gsd-rulesd { display: inline-block; }
.gsd-rulesd summary { list-style: none; display: inline; cursor: pointer;
  color: var(--gs-muted); border-bottom: 1px solid var(--gs-red); }
.gsd-rulesd summary::-webkit-details-marker { display: none; }
.gsd-rulesd .gsd-rules { margin-top: 12px; }
@media (max-width: 640px) {
  .gsd-head--split { flex-wrap: wrap; }
  .gsd-headside { width: 100%; justify-content: space-between; }
  .gsd-headside .gs-btn { flex: 1 1 auto; margin-left: 14px; }
  .gsd-pslot-big { width: 140px; }
  .gsd-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gsd-pacts a, .gsd-pacts .gsd-pact-off { padding: 10px 0; font-size: 14px; }
  .gsd-pact-txt, .gsd-pacts .gsd-pact-off.gsd-pact-txt { font-size: 10px; }
  .gsd-privnote { flex-wrap: wrap; }
  .gsd-privnote .gs-btn-ghost { margin-left: 27px; height: 38px; font-size: 11px; }
}

/* --- 12e: iOS zoom kill: sub-16px form fonts trigger focus zoom on iPhones --- */
@media (max-width: 860px) {
  .gs-fld input, .gs-fld select, .gsp-form .gs-fld select, #city-wrapper select,
  .gsd-form .gs-fld select, .gsd-form .gs-fld textarea, .gsd-reply textarea,
  .gsk-ta, .gsc-ta, .gsc-inp { font-size: 16px; }
  .gs-fld input, .gs-fld select { height: 24px; line-height: 24px; }
}

/* --- 12f: mobile legibility pass (labels + copy text sized for real phones,
   iterated with Nik on-device) --- */
@media (max-width: 860px) {
  /* form labels + controls */
  .gsp-glbl { font-size: 15px; }
  .gs-fld .gs-lbl { font-size: 13px; }
  .gsp-acc summary { font-size: 14px; }
  .gsp-onlinerow .t { font-size: 14px; }
  .gsp-onlinerow .n { font-size: 14px; }
  .gsp-pulse { font-size: 16px; }
  .gsp-chip { font-size: 14px; padding: 10px 14px; }
  .gsp-seg label { font-size: 14px; }
  .gsp-check, .gsp-radio { font-size: 16px; }
  .gsp-count { font-size: 12px; }
  /* copy text */
  .gsr-sub { font-size: 16px; }
  .gsp-sub { font-size: 15px; }
  .gsp-note { font-size: 13px; }
  .gsd-lead { font-size: 15px; }
  .gsd-empty { font-size: 15px; }
  .gsd-hint { font-size: 12px; }
  /* messages: bubbles + inbox rows are copy too */
  .gsd-msg { font-size: 15px; }
  .gsd-thread-name { font-size: 15px; }
  .gsd-thread-snip { font-size: 14px; }
  .gsd-convo-links a { font-size: 11px; }
  .gsp-prof-dl { gap: 11px 18px; }
  .gsp-prof-dl dt { font-size: 14px; }
  .gsp-prof-dl dd { font-size: 15px; }
  .gsp-prof-self, .gsp-prof-q p, .gsp-prof-match div { font-size: 15px; }
  .gsp-pchip { font-size: 12px; }
  .gsd-a { font-size: 15px; }
  .gsd-q { font-size: 16px; }
}

/* --- 12g: controls sweep - actions are buttons (Nik's locked rule), touch
   sizes on mobile, photo actions visible without hover --- */
.gsp-prof-actions { gap: 8px; }
.gsp-prof-actions .gs-btn-ghost { width: 100%; height: 42px; box-sizing: border-box; }
.gsp-prof-actions .gs-btn-danger { width: 100%; height: 42px; box-sizing: border-box; }
.gsp-prof-addrow { margin: -12px 0 22px; }
.gsp-prof-addrow .gs-btn-ghost { height: 38px; padding: 0 18px; }
/* bubbles hug their content (block divs otherwise fill to max-width and a
   two-word message reads as a full-width slab) */
.gsd-msg { width: fit-content; }
/* locked teaser must wrap on narrow screens - the nowrap button otherwise
   stretches the whole profile column past the viewport */
.gsp-prof-locked { flex-wrap: wrap; }
.gsp-prof-locktext { flex: 1 1 180px; min-width: 0; }
/* locked-teaser CTA: full reset over the earlier link styling (leak class 3) */
.gsp-prof-locktext a.gsp-prof-lockbtn { color: var(--gs-btn-fill);
  border: 1px solid var(--gs-field); border-radius: 4px; padding: 0 16px;
  height: 36px; margin-top: 8px; font-size: 10px; }
.gsp-prof-locktext a.gsp-prof-lockbtn:hover { color: #fff;
  border-color: var(--gs-field-focus); text-decoration: none; }
/* thread header: block/delete as compact buttons, profil stays a link */
.gsd-convo-links { align-items: center; }
.gsd-convo-links a.gs-btn-ghost, .gsd-convo-links a.gs-btn-danger {
  height: 30px; padding: 0 12px; font-size: 9px; color: var(--gs-btn-fill); }
.gsd-convo-links a.gs-btn-ghost:hover { color: #fff;
  border-color: var(--gs-field-focus); text-decoration: none; }
.gsd-convo-links a.gs-btn-danger { color: var(--gs-red); }
.gsd-convo-links a.gs-btn-danger:hover { color: #fff;
  background: var(--gs-red); text-decoration: none; }
/* inbox delete: real round tap target instead of a bare x */
.gsd-thread-del { width: 32px; height: 32px; border: 1px solid var(--gs-field);
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; padding: 0; box-sizing: border-box; }
.gsd-thread-del:hover { color: var(--gs-red); border-color: var(--gs-red);
  text-decoration: none; }
/* archive single-message actions read as buttons too */
.gsd-msgview-links { display: flex; gap: 10px; flex-wrap: wrap; }
.gsd-msgview-links a { display: inline-flex; align-items: center; height: 34px;
  padding: 0 14px; border: 1px solid var(--gs-field); border-radius: 4px;
  color: var(--gs-btn-fill); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  transition: color .18s ease-out, border-color .18s ease-out; }
.gsd-msgview-links a:hover { color: #fff; border-color: var(--gs-field-focus);
  text-decoration: none; }
/* photo manager: hover-reveal actions never show on touch screens */
@media (hover: none) {
  .gsd-photo-acts { opacity: 1; }
}
/* --- 12h: mobile chrome = burger left / masthead centered / account right.
   The prime thumb corner belongs to the member, not the menu. --- */
.gs-mpersona { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; position: relative; flex: none;
  color: #fff; text-decoration: none; }
.gs-mpersona:hover { color: #fff; text-decoration: none; }
.gs-mpersona img { width: 26px; height: 26px; object-fit: cover; display: block;
  border: 0; }
.gs-mpersona-dot { position: absolute; top: 7px; right: 5px; width: 8px;
  height: 8px; border-radius: 50%; background: var(--gs-red);
  box-shadow: 0 0 0 2px var(--gs-bg); }
@media (max-width: 899px) {
  /* burger glyph sits on the content gutter (-13 cancels its inner padding) */
  .gs-burger { order: -1; margin-left: -13px; }
  .gs-wordmark { margin: 0 auto; }
  .gs-logo { height: 23px; }
  .gs-chrome { padding: 16px 20px; }
}
/* account avatar shows at ALL widths now (drawer = the account nav on desktop
   too); only the logged-out persona glyph stays mobile-only (desktop keeps the
   PRIJAVA text link). */
@media (min-width: 900px) {
  .gs-mpersona--out { display: none; }
  .gs-mpersona { margin-left: 6px; }
}
/* persona glyph redrawn: head-and-shoulders silhouette (the circle-in-circle
   read as a record button at header size). Scales by box size. */
.gs-ico-persona { border: 0; border-radius: 0; }
.gs-ico-persona::before { content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 44%; height: 44%;
  border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.gs-ico-persona::after { content: ''; position: absolute; top: auto; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 88%; height: 44%;
  border: 1px solid currentColor; border-bottom: 0;
  border-radius: 40px 40px 0 0; box-sizing: border-box; }
.gs-mpersona .gs-ico-persona { width: 18px; height: 18px; }
/* real photo = round avatar with a hairline ring (matches thread avatars) */
.gs-mpersona img { width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--gs-field); box-sizing: border-box; }
.gs-mpersona-dot { top: 8px; right: 6px; }
/* members landing: registration hook for logged-out visitors */
.gsp-joinrow { border-bottom: 0; }
.gsp-joinrow .a { color: var(--gs-red); }
.gsp-joinrow:hover .a { color: #fff; }

/* touch sizes: every control grows on mobile */
@media (max-width: 860px) {
  .gs-btn { height: 46px; padding: 0 24px; font-size: 11px; }
  .gs-btn-ghost { height: 42px; font-size: 11px; }
  .gs-btn-danger { height: 42px; font-size: 11px; }
  a.gsd-mini, .gsd-mini { height: 38px; font-size: 10px; }
  .gsd-tab { font-size: 11.5px; }
  .gsd-vtab { font-size: 11.5px; }
  .gsd-convo-links a.gs-btn-ghost, .gsd-convo-links a.gs-btn-danger {
    height: 34px; padding: 0 14px; font-size: 10px; }
  .gsd-thread-del { width: 38px; height: 38px; font-size: 14px; }
  .gsd-photo-del { width: 32px; height: 32px; font-size: 15px; }
  .gsd-photo-acts a { font-size: 12px; padding: 3px 0; }
  .gsd-reply--dock .gs-btn { height: 48px; }
  .gsp-profbar .gs-btn { height: 48px; }
}

/* ================= phase 13: thread app-frame (iMessage pane) ================= */

/* 13a: the pane - gs-chatjs scoped (set inline pre-pane; gs.js is deferred and
   its own class arrives post-parse); no-JS degrades to plain page flow */
html.gs-chatjs .gsd-chat { display: flex; flex-direction: column;
  height: calc(100vh - var(--gs-chat-off, 0px));
  height: calc(100dvh - var(--gs-chat-off, 0px));
  min-height: 380px; }
html.gs-chatjs .gsd-chat .gsd-convo-head { margin-bottom: 0; }
html.gs-chatjs .gsd-chat .gsd-convo-head--stick { position: static; }
html.gs-chatjs .gsd-chat .gsd-convo { flex: 1 1 auto; margin-top: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--gs-field) transparent;
  padding: 8px 2px 4px 0; }
/* short threads hug the composer (margin-auto spacer; flex-end would break scrolling) */
html.gs-chatjs .gsd-chat .gsd-convo > :first-child { margin-top: auto; }
html.gs-chatjs .gsd-chat .gsd-reply--dock { position: static; }
/* the OTHER sticky-killer: .gs-main{overflow-x:auto} is a scroll container too.
   Scoped escape for the sticky consumers (art rail, profile aside) - dark mains
   only, and article wide content is already max-width-clamped (gs-art-body).
   Paper mains keep auto for wide legacy tables. */
.gs-main--dark:has(.gs-art-rail), .gs-main--dark:has(.gsp-prof-aside) {
  overflow-x: clip; }

/* 13b: bubbles + separators legible (Nik: fonts too small, rules invisible;
   in-bubble was raised #141412 on #080807 = 1.16:1 invisible container) */
.gsd-msg { font-size: 15.5px; line-height: 1.45; border-radius: 18px; }
.gsd-msg-in { background: var(--gs-raised-2); font-weight: 400; color: #e6e6e4;
  border-bottom-left-radius: 5px; }
.gsd-msg-out { border-bottom-right-radius: 5px; }
.gsd-msg-time { font-size: 10.5px; opacity: .75; }
.gsd-sep span, .gsd-unread span, .gsd-older-t { font-size: 10.5px; }
.gsd-sep span { color: var(--gs-muted); }
.gsd-sep::before, .gsd-sep::after { background: #2a2a28; }
@media (max-width: 860px) {
  .gsd-msg { font-size: 16px; }
}

/* 13c: composer pill - filled surface, 16px at EVERY viewport */
.gsd-reply--dock textarea { background: var(--gs-raised); border-radius: 22px;
  padding: 13px 18px; font-size: 16px; }
.gsd-unlock { font-size: 12px; padding: 9px 14px; }

/* 13d: fields on raw black get a filled surface (border no longer alone) */
.gs-fld { background: var(--gs-raised); }
.gsd-form .gs-fld textarea, .gsp-form .gs-fld textarea { background: transparent; }

/* 13e: mobile thread = true app screen (Nik on-device: page-scroll parking left
   the header under Safari's top glass + no way back to the inbox). Page stays
   at scroll 0, site chrome hides on THIS screen only (gs-chatjs = set solely by
   conversation-messages.jsp), back chevron is the exit. No-JS keeps full chrome. */
.gsd-convo-back { display: inline-flex; align-items: center;
  justify-content: center; width: 40px; height: 44px; flex: none;
  margin-left: -10px; text-decoration: none; box-sizing: border-box; }
@media (max-width: 860px) {
  html.gs-chatjs .gs-chrome, html.gs-chatjs .gs-adminbar,
  html.gs-chatjs .gsd-nav, html.gs-chatjs .gs-foot { display: none; }
  html.gs-chatjs .gsd-chat { padding-top: env(safe-area-inset-top); }
}

/* 13f: grindr-borrowed header (slim identity + overflow panel) + lock states
   + read receipt. Firewall: every link re-asserts color + text-decoration. */
.gsd-convo-name { color: #fff; text-decoration: none; font: inherit; }
.gsd-convo-name:hover { color: #fff; text-decoration: none; opacity: .8; }
.gsd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #37d067; margin-right: 8px; vertical-align: 2px; }
.gsd-convo-sub { color: var(--gs-muted); font-size: 12px; font-weight: 300;
  margin-top: 2px; font-family: var(--gs-font); }
.gsd-convo-morebtn { margin-left: auto; flex: none; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: #fff; font-size: 26px;
  line-height: 1; font-family: var(--gs-font); padding: 0;
  transition: color .18s ease-out; }
.gsd-convo-morebtn:hover { color: var(--gs-red); }
.gsd-convo-more { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--gs-hair); }
.gsd-convo-more .gs-btn-ghost, .gsd-convo-more .gs-btn-danger { height: 42px;
  padding: 0 18px; }
html.gs-chatjs .gsd-convo-more { display: none; }
html.gs-chatjs .gsd-convo-more.gsd-open { display: flex; }
.gsd-lockrow { display: none; align-items: center; gap: 9px;
  color: var(--gs-muted); font-size: 12px; font-weight: 300;
  font-family: var(--gs-font); padding: 0 0 10px; }
.gsd-reply:has(.gsd-lockbtn input:checked) .gsd-lockrow { display: flex; }
.gsd-lockrow--on { display: flex; }
.gsd-lockrow--on .gs-ico-lock { color: var(--gs-red); flex: none; }
.gsd-lock-revoke { color: #fff; text-decoration: none; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  font-family: var(--gs-font); margin-left: auto; flex: none;
  border: 1px solid var(--gs-field); border-radius: 4px; padding: 7px 14px;
  transition: border-color .18s ease-out; }
.gsd-lock-revoke:hover { color: #fff; border-color: var(--gs-field-focus);
  text-decoration: none; }
.gsd-lockbtn { position: relative; flex: none; width: 48px; height: 48px;
  border: 1px solid var(--gs-field); border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gs-muted); background: var(--gs-raised);
  box-sizing: border-box; transition: color .18s ease-out, border-color .18s ease-out; }
.gsd-lockbtn input { position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; }
.gsd-lockbtn .gs-ico-lock { width: 12px; height: 10px; margin-top: 3px; }
.gsd-lockbtn:hover { color: #fff; }
.gsd-lockbtn:has(input:checked) { color: var(--gs-red);
  border-color: var(--gs-red); }
.gsd-lockbtn:focus-within { outline: 1px solid var(--gs-field-focus);
  outline-offset: 2px; }
.gsd-msg-read { text-align: right; color: var(--gs-faint); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; font-family: var(--gs-font);
  margin: -8px 0 14px; }

/* 13g: Nik on-device round 2 - big drawn back chevron, no city line, grindr
   sheet (his phosphor icons, lowercase labels), full-width pill composer with
   vertically-centered arrow send, photo toggle under the field. */
.gsd-convo-back::before { content: ''; display: block;
  width: 16px; height: 16px; border-left: 3px solid #fff;
  border-bottom: 3px solid #fff; transform: rotate(45deg); margin-left: 7px;
  transition: border-color .18s ease-out; }
.gsd-convo-back:hover::before { border-color: var(--gs-red); }
.gsd-mi { display: block; width: 22px; height: 22px; fill: currentColor;
  flex: none; }
.gsd-fav-badge { display: inline-block; color: var(--gs-red); margin-left: 9px;
  vertical-align: 1px; }
.gsd-fav-badge .gsd-mi { display: inline-block; width: 15px; height: 15px;
  vertical-align: baseline; }
.gsd-more-item { flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 2px 0; color: var(--gs-body);
  text-decoration: none; font-family: var(--gs-font); font-size: 12.5px;
  font-weight: 300; text-transform: none; letter-spacing: 0;
  transition: color .18s ease-out; }
.gsd-more-item:hover { color: #fff; text-decoration: none; }
.gsd-reply-row--pill { position: relative; display: block; }
.gsd-reply-row--pill textarea { width: 100%; display: block;
  padding-right: 58px; }
.gsd-send { position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%); width: 40px; height: 40px; border: 0;
  border-radius: 50%; background: none; cursor: pointer; padding: 0;
  color: var(--gs-red); display: inline-flex; align-items: center;
  justify-content: center; transition: color .18s ease-out; }
.gsd-send:hover { color: #fff; }
.gsd-send:focus-visible { outline: 2px solid var(--gs-field-focus);
  outline-offset: 2px; }
.gsd-send .gsd-mi { width: 20px; height: 20px; }
.gsd-thread-del .gsd-mi { width: 16px; height: 16px; display: inline-block;
  vertical-align: middle; }
.gsd-tool { position: relative; display: inline-flex; align-items: center;
  gap: 9px; margin-top: 10px; color: var(--gs-muted); font-size: 12.5px;
  font-weight: 300; font-family: var(--gs-font); cursor: pointer;
  text-decoration: none; text-transform: none;
  transition: color .18s ease-out; }
.gsd-tool:hover { color: #fff; text-decoration: none; }
.gsd-tool input { position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; }
.gsd-tool .gsd-mi { width: 20px; height: 20px; }
.gsd-tool .gsd-tool-t1 { display: none; }
.gsd-tool:has(input:checked) { color: var(--gs-red); }
.gsd-tool:has(input:checked) .gsd-tool-t0 { display: none; }
.gsd-tool:has(input:checked) .gsd-tool-t1 { display: inline; }
.gsd-tool--on { color: var(--gs-muted); }
.gsd-tool--on .gsd-mi { color: var(--gs-red); }
.gsd-tool:focus-within { outline: 1px solid var(--gs-field-focus);
  outline-offset: 2px; }

/* 13h: no-pic avatar = phosphor user glyph in the gray circle (Nik) - inbox
   rows + thread head only; mcard grids keep the dot. Mask carries the shape,
   background-color the tint; onerror-injected spans get it for free. */
/* 13n: one-line footer - (c) dates gay-serbia.com | KONTAKT, centered,
   whole line in the link's spec (was faint lowercase next to caps) */
.gs-foot { justify-content: center; align-items: center; text-align: center; }
.gs-foot-c { font-size: 10px; letter-spacing: .14em; color: var(--gs-muted);
  text-transform: uppercase; }
.gs-foot-sep { color: var(--gs-faint); margin: 0 10px; }
.gs-foot-c a { color: var(--gs-muted); text-decoration: none;
  text-transform: uppercase; letter-spacing: .14em;
  transition: color .18s ease-out; }
.gs-foot-c a:hover { color: #fff; text-decoration: none; }

/* 13m: own-profile edit = pencil circle next to the name (Promeni profil
   button retired; Uredi profil also first item in the account drawer) */
.gsp-prof-edit { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--gs-field);
  border-radius: 50%; margin-left: 16px; vertical-align: 6px;
  color: var(--gs-muted); text-decoration: none;
  transition: color .18s ease-out, border-color .18s ease-out; }
.gsp-prof-edit:hover { color: #fff; border-color: var(--gs-field-focus);
  text-decoration: none; }
.gsp-prof-edit .gsd-mi { width: 18px; height: 18px; }

/* 13l: fav star lit + header-scale, sheet fav = ajax state swap (no reload),
   sheet open/close eased (max-height + fade + slide; no-JS panel stays static) */
.gsd-fav-badge .gsd-mi { width: 20px; height: 20px; vertical-align: -4px; }
.gsd-fav-badge[hidden] { display: none; }
.gsd-more-item .gsd-mi-star1 { display: none; }
.gsd-more-item.gsd-fav-on .gsd-mi-star0 { display: none; }
.gsd-more-item.gsd-fav-on .gsd-mi-star1 { display: block; color: var(--gs-red); }
.gsd-more-item .gsd-fav-t1 { display: none; }
.gsd-more-item.gsd-fav-on .gsd-fav-t0 { display: none; }
.gsd-more-item.gsd-fav-on .gsd-fav-t1 { display: inline; }
html.gs-chatjs .gsd-convo-more { display: flex; flex: none; overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(-8px);
  padding-top: 0; padding-bottom: 0; border-bottom-color: transparent;
  visibility: hidden;
  transition: max-height .24s ease-out, opacity .18s ease-out,
    transform .24s ease-out, padding .24s ease-out,
    border-bottom-color .18s ease-out, visibility 0s linear .24s; }
html.gs-chatjs .gsd-convo-more.gsd-open { max-height: 170px; opacity: 1;
  transform: none; padding-top: 14px; padding-bottom: 14px;
  border-bottom-color: var(--gs-hair); visibility: visible;
  transition: max-height .24s ease-out, opacity .2s ease-out .04s,
    transform .24s ease-out, padding .24s ease-out,
    border-bottom-color .18s ease-out; }

/* 13k: account drawer (avatar tap) - site nav and account nav split; items
   mirror the dashboard tabs + Odjava moves here out of the red menu. */
.gs-panel--acct { left: auto; right: 0; transform: translateX(105%);
  background: var(--gs-bg); border-left: 1px solid var(--gs-hair); }
html.gs-acct-open .gs-panel--acct { transform: none; visibility: visible;
  transition: transform .24s ease-out; }
html.gs-acct-open .gs-backdrop { opacity: 1; pointer-events: auto; }
html.gs-acct-open { overflow: hidden; }
.gs-acct-head { display: flex; align-items: center; gap: 14px;
  padding: 24px 22px 20px; border-bottom: 1px solid var(--gs-hair);
  color: #fff; text-decoration: none; }
.gs-acct-head:hover { color: #fff; text-decoration: none; }
.gs-acct-ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--gs-raised); display: inline-flex; align-items: center;
  justify-content: center; flex: none; color: var(--gs-muted); }
.gs-acct-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-acct-ava .gs-ico-persona { width: 22px; height: 22px; }
.gs-acct-who { display: flex; flex-direction: column; min-width: 0; }
.gs-acct-name { font-family: var(--gs-font); font-size: 19px; font-weight: 700;
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.gs-acct-sub { font-family: var(--gs-font); font-size: 11px;
  color: var(--gs-muted); font-weight: 300; margin-top: 2px; }
.gs-acct-view { flex: none; margin-left: auto; font-family: var(--gs-font);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: #fff; border: 1px solid var(--gs-field);
  border-radius: 4px; padding: 9px 13px; white-space: nowrap;
  transition: border-color .18s ease-out; }
.gs-acct-head:hover .gs-acct-view { border-color: var(--gs-field-focus); }
.gs-acct-items { flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 26px 8px 12px 20px; overflow-y: auto; }
.gs-acct-item { display: flex; align-items: center; gap: 14px;
  padding: 13px 14px 13px 20px; border-radius: 6px; color: #b1b1af;
  text-decoration: none; font-family: var(--gs-font); font-size: 12px;
  font-weight: 300; letter-spacing: .24em; text-transform: uppercase;
  transition: color .18s ease-out,
  background-color .18s ease-out; }
.gs-acct-item:hover { color: #fff; background: var(--gs-raised);
  text-decoration: none; }
.gs-acct-item .gsd-mi { width: 25px; height: 25px; color: var(--gs-muted);
  flex: none; }
.gs-acct-item:hover .gsd-mi { color: #fff; }
.gs-acct-n { margin-left: auto; background: var(--gs-red); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
  border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 6px; }
.gs-acct-out { border-top: 1px solid var(--gs-hair); margin: 0 8px;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom)); }
/* phase-1 desktop rule hides ALL .gs-panel at >=900 - the account drawer is
   the exception (it IS the desktop account nav); backdrop revives with it */
@media (min-width: 900px) {
  .gs-panel--acct { display: flex; }
  html.gs-acct-open .gs-backdrop { display: block; }
}

/* 13p: disabled selects (city until a country is picked) read dimmed */
.gs-fld:has(select:disabled) { opacity: .45; }
.gs-fld select:disabled { cursor: not-allowed; }

/* 13o: aktuelno = simple photo+title card grid (Nik: simpler than rubrika;
   12 cards, 4-up desktop, 2-up tablet, 1-up phone) */
.gsa-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 64px 20px; margin-top: 14px; align-items: start; }
.gsa-card { min-width: 0; }
.gsa-card-img { display: block; }
.gsa-card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  display: block; }
.gsa-card-title { display: block; margin-top: 29px; color: #f0f0f0;
  font-family: var(--gs-font); font-size: 16px; font-weight: 400;
  line-height: 1.2; text-decoration: none;
  transition: color .18s ease-out, opacity .18s ease-out;
  text-transform: uppercase; }
.gsa-card-title:hover { color: #f0f0f0; }
@media (min-width: 861px) { .gsa-wrap .gsr-hero { margin-top: 96px; } }
@media (max-width: 560px) {
  .gsa-card-title { font-size: 20px; }
  .gsa-grid { row-gap: 60px; }
}
.gsa-card-title:hover { color: #fff; opacity: .62; text-decoration: none; }
.gsa-card--noimg { background: var(--gs-raised); border: 1px solid var(--gs-hair);
  padding: 18px; box-sizing: border-box; align-self: stretch; }
.gsa-card--noimg .gsa-card-title { margin-top: 0; }
.gsa-card-meta { display: flex; justify-content: flex-start; gap: 8px;
  margin-top: 18px; font-family: var(--gs-font); font-size: 10.5px;
  letter-spacing: .16em; color: var(--gs-muted); font-weight: 400;
  text-transform: uppercase; }
.gsa-card-meta span + span::before { content: '|'; margin-right: 8px;
  color: var(--gs-faint); }
.gsa-card-meta + .gsa-card-title { margin-top: 5px; }
.gsa-card--noimg .gsa-card-meta { margin-top: 0; }
.gsa-card--noimg .gsa-card-meta + .gsa-card-title { margin-top: 8px; }
@media (max-width: 1023px) { .gsa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gsa-grid { grid-template-columns: 1fr; } }

/* 13j: chrome content rides the 1180 grid (Nik: logo starts where text starts).
   Desktop only - mobile header layout is locked. Box = 1180 + 2x20 chrome pad;
   hairline re-drawn full-bleed via ::after since the box no longer spans. */
@media (min-width: 861px) {
  .gs-chrome { max-width: 1248px; box-sizing: border-box; margin: 0 auto;
    border-bottom: 0; }
  .gs-chrome::after { content: ''; position: absolute; left: -50vw;
    right: -50vw; bottom: 0; height: 1px; background: #232320; }
}

/* 13i: rubrika declutter (Nik: no dates/sources, titles up) + monocle pager
   (centered chevron-number row, 40px targets; ref monocle.com/fashion/page/2).
   All scoped to .gsr-wrap = rubrika/aktuelno only - homepage tiles stay locked. */
.gsr-wrap .gsr-meta { display: none; }
.gsr-wrap .gsr-title { font-size: 18px; }
.gsr-wrap .gsr-lead .gsr-title { font-size: 29px; }
.gsr-wrap .gsr-side .gsr-title { font-size: 24px; }
.gsr-wrap .gsr-wide .gsr-title { font-size: 20px; }
.gsr-wrap .gsr-redtile .gsr-title { font-size: 23px; }
.gsr-wrap .gsr-pager { justify-content: center; align-items: center; gap: 8px;
  font-size: 14px; letter-spacing: .04em; text-transform: none;
  font-weight: 400; margin-top: 40px; padding: 20px 0 10px; }
.gsr-wrap .gsr-pages { gap: 4px; align-items: center; }
.gsr-wrap .gsr-pages a, .gsr-wrap .gsr-pages .gsr-cur,
.gsr-wrap .gsr-pages .gsr-dim { display: inline-flex; align-items: center;
  justify-content: center; min-width: 40px; height: 40px; padding: 0 6px;
  box-sizing: border-box; }
.gsr-wrap .gsr-pages a { border-radius: 4px; }
.gsr-wrap .gsr-pages a:hover { color: #fff; background: var(--gs-raised);
  text-decoration: none; }
.gsr-wrap .gsr-pages .gsr-cur { border-bottom: 0; padding-bottom: 0; }
.gsr-pgprev, .gsr-pgnext { display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--gs-field); border-radius: 50%;
  box-sizing: border-box; color: var(--gs-muted); text-decoration: none;
  transition: color .18s ease-out, border-color .18s ease-out; }
a.gsr-pgprev:hover, a.gsr-pgnext:hover { color: #fff;
  border-color: var(--gs-field-focus); text-decoration: none; }
span.gsr-pgprev, span.gsr-pgnext { border-color: #2a2a28; }
.gsr-pgprev::before, .gsr-pgnext::before { content: ''; display: block;
  width: 11px; height: 11px; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; }
.gsr-pgprev::before { transform: rotate(45deg); margin-left: 5px; }
.gsr-pgnext::before { transform: rotate(225deg); margin-right: 5px; }

.gsd-thread-pic .gsd-mcard-none, .gsd-convo-pic .gsd-mcard-none {
  display: block; width: 100%; height: 100%; font-size: 0; line-height: 0;
  background-color: var(--gs-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E") no-repeat center / 52% 52%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E") no-repeat center / 52% 52%;
}

/* ================= phase 14: profile cover story ================= */
/* chapters: cover -> o meni -> list -> slike -> detaljnije -> koga trazim
   -> cta. Absent data = absent chapter. Firewall: every link re-asserts
   color + text-decoration on hover. */

/* --- container: profile page leaves the 760 dashboard wrap for the 1180 grid */
.gsp-cv-page { max-width: 1180px; margin: 0 auto; font-family: var(--gs-font); }
/* gutters come from main.gs-main (40/28/18 responsive) - gsr-wrap parity */

/* legacy personals/shared/style.css styles the bare `section` ELEMENT
   (arial-narrow/bold/lowercase/border - a 2004 rule that matched nothing
   until our html5 sections arrived). Neutralize all seven properties. */
section.gsp-cv, section.gsp-ch {
  font-size: inherit; color: inherit; font-family: var(--gs-font);
  font-weight: inherit; text-transform: none; margin-top: 0;
  border-bottom: 0; }

/* --- 14a cover --- */
.gsp-cv { display: flex; min-height: 74vh; align-items: stretch; border: 0; }
.gsp-cv-txt { flex: 1.1; display: flex; flex-direction: column;
  justify-content: center; padding: 56px 0; min-width: 0; }
.gsp-cv-kick { color: #6a6a68; font-family: var(--gs-font);
  font-size: 10px; letter-spacing: .35em;
  text-transform: uppercase; font-weight: 400; }
.gsp-cv-name { color: #f5f5f5; font-size: clamp(56px, 7vw, 84px);
  border: 0; text-transform: uppercase;
  font-weight: 100; letter-spacing: .04em; line-height: .95;
  margin: 26px 0 0; font-family: var(--gs-font); text-wrap: balance;
  overflow-wrap: anywhere; }
.gsp-cv--nopic .gsp-cv-name { font-size: clamp(56px, 8.5vw, 96px); }
.gsp-cv-dot { display: inline-block; width: 13px; height: 13px;
  border-radius: 50%; background: #37d067; vertical-align: super;
  margin-left: 12px; }
.gsp-cv-edit { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--gs-field); border-radius: 50%;
  margin-left: 18px; vertical-align: 18px; color: var(--gs-muted);
  text-decoration: none; transition: color .18s ease-out, border-color .18s ease-out; }
.gsp-cv-edit:hover { color: #fff; border-color: var(--gs-field-focus);
  text-decoration: none; }
.gsp-cv-edit .gsd-mi { width: 17px; height: 17px; }
.gsp-cv-head { color: #ababab; font-size: 19px; font-weight: 300;
  text-transform: none;
  line-height: 1.5; margin: 26px 0 0; max-width: 22em; text-wrap: balance; }
.gsp-cv-meta { color: #8a8a88; font-size: 11px; letter-spacing: .27em;
  text-transform: uppercase; margin-top: 34px; line-height: 2;
  font-variant-numeric: tabular-nums; }
.gsp-cv-meta a { color: #8a8a88; text-decoration: none; }
.gsp-cv-meta a:hover { color: #fff; text-decoration: none; }
.gsp-cv-cue { color: #4a4a48; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; font-family: var(--gs-font);
  margin-top: 72px; text-decoration: none; display: inline-block; }
a.gsp-cv-cue:hover { color: #9a9a98; text-decoration: none; }
.gsp-cv-pic { flex: 1; min-width: 0; position: relative; margin-left: 48px; }
.gsp-cv-pic img { width: 100%; height: 100%; max-height: 78vh;
  object-fit: cover; display: block; }
.gsp-hiddenbar { color: #8a8a88; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; padding: 14px 0 0; }

/* --- 14b chapters --- */
.gsp-ch { padding: 110px 0 0; border: 0; }
.gsp-ch:last-of-type { padding-bottom: 90px; }
.gsp-ch-kick { font-family: var(--gs-font); font-size: 10px;
  letter-spacing: .4em; text-transform: uppercase;
  color: #6a6a68; margin-bottom: 30px; font-weight: 400; }
.gsp-ch-kick--red { color: var(--gs-red); }
.gsp-ch-prose { color: #dcdcda;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 21px; line-height: 1.55; font-weight: 400; max-width: 620px; }

/* --- 14c the list --- */
.gsp-list { max-width: 500px; }
.gsp-list-row { border-top: 1px solid #232321; display: flex;
  justify-content: space-between; align-items: center; min-height: 60px;
  gap: 18px; }
.gsp-list-row:last-child { border-bottom: 1px solid #232321; }
.gsp-list-row dt { color: #8a8a88; font-size: 10px; letter-spacing: .3em;
  font-weight: 400; font-family: var(--gs-font);
  text-transform: uppercase; margin: 0; flex: none; }
.gsp-list-row dd { color: #e8e8e6; font-size: 15px; font-weight: 300;
  margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.gsp-list-row dd.gsp-list-on { color: #37d067; }

/* --- 14d slider --- */
.gsp-strip-head { display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 24px; }
.gsp-strip-nav { display: flex; align-items: center; gap: 16px; }
.gsp-strip-count { color: #8a8a88; font-size: 12.5px; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; }
.gsp-strip-btn { width: 42px; height: 42px; border: 1px solid var(--gs-field);
  border-radius: 50%; background: none; cursor: pointer; color: #f5f5f5;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: color .18s ease-out, border-color .18s ease-out; }
.gsp-strip-btn::before { content: ''; display: block; width: 12px; height: 12px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.gsp-strip-btn--prev::before { transform: rotate(45deg); margin-left: 3px; }
.gsp-strip-btn--next::before { transform: rotate(225deg); margin-right: 3px; }
.gsp-strip-btn:disabled { border-color: #33332f; color: #5a5a58;
  cursor: default; }
.gsp-strip-btn:not(:disabled):hover { border-color: var(--gs-field-focus); }
.gsp-strip { display: flex; gap: 3px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.gsp-strip::-webkit-scrollbar { display: none; }
.gsp-strip-card { flex: 0 0 236px; height: 295px; scroll-snap-align: start;
  position: relative; display: block; padding: 0; border: 0;
  background: var(--gs-raised); cursor: zoom-in; }
.gsp-strip-card img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
.gsp-strip-solo { max-width: 560px; }
.gsp-strip-solo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  display: block; cursor: zoom-in; }
/* locked private card (frosted) */
.gsp-strip-lock { flex: 0 0 236px; height: 295px; scroll-snap-align: start;
  position: relative; background: #1c1a17; text-decoration: none; }
a.gsp-strip-lock:hover { text-decoration: none; }
.gsp-strip-lock::before { content: ''; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  background: rgba(38,33,26,.55); border: 1px solid rgba(255,255,255,.07); }
.gsp-strip-lockin { position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; }
.gsp-strip-lockn { color: #e8e8e6; font-size: 21px; font-weight: 100; }
.gsp-strip-lockt { color: #9a9a98; font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; }
.gsp-strip-lockbtn { color: #e8e8e6; border: 1px solid #6a6a68;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 4px; }

/* --- 14e Q&A pull-quotes --- */
.gsp-qa { max-width: 620px; }
.gsp-qa-item { border-top: 1px solid #232321; padding: 32px 0 0;
  margin-top: 32px; }
.gsp-qa-item:first-of-type { margin-top: 16px; }
.gsp-qa-item:last-child { border-bottom: 1px solid #232321; padding-bottom: 32px; }
.gsp-qa-q { color: #8a8a88; font-weight: 400; font-family: var(--gs-font);
  font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; line-height: 1.7; }
.gsp-qa-a { color: #c9c9c7;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-style: normal; font-size: 17px; line-height: 1.5; margin-top: 13px; }

/* --- 14f CTA + footer actions --- */
.gsp-ctaband { display: flex; margin-top: 110px; }
.gsp-ctaband-sp { flex: 1; }
.gsp-ctablock { flex: 1.15; background: var(--gs-red); padding: 46px 48px;
  text-decoration: none; display: block; transition: background-color .18s ease-out; }
a.gsp-ctablock:hover { background: #c91d16; text-decoration: none; }
.gsp-ctablock-kick { color: rgba(255,255,255,.72); font-size: 10px;
  letter-spacing: .3em; text-transform: uppercase; }
.gsp-ctablock-t { color: #fff; font-size: 27px; font-weight: 200;
  letter-spacing: .02em; margin-top: 10px; }
.gsp-micro { display: flex; gap: 28px; align-items: center;
  padding: 28px 0 46px; }
.gsp-micro a { font-size: 9px; letter-spacing: .25em;
  text-transform: uppercase; color: #5a5a58; text-decoration: none;
  transition: color .18s ease-out; }
.gsp-micro a:hover { color: #fff; text-decoration: none; }
.gsp-micro a.gsp-act-fav { color: #8a8a88; }
.gsp-micro a.gsp-act-fav:hover { color: #fff; }
.gsp-micro a.gsp-act-fav.gsd-fav-on { color: var(--gs-red); }
/* mobile sticky bar */
.gsp-stickybar { display: none; }

/* --- 14g own-view ghosts --- */
.gsp-ghost { display: inline-block; border: 1px dashed #33332f;
  border-radius: 4px; padding: 18px 22px; color: #8a8a88; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase; text-decoration: none;
  transition: color .18s ease-out, border-color .18s ease-out; }
.gsp-ghost:hover { color: #fff; border-color: #54544f; text-decoration: none; }

/* --- 14h lightbox --- */
.gsp-lb { position: fixed; inset: 0; z-index: 120;
  background: rgba(4,4,4,.97); display: none; }
html.gs-lightbox-open { overflow: hidden; }
html.gs-lightbox-open .gsp-lb { display: block; }
.gsp-lb img { position: absolute; inset: 0; margin: auto;
  max-width: 90vw; max-height: 86vh; object-fit: contain; }
.gsp-lb-count { position: absolute; top: 20px; left: 24px; color: #8a8a88;
  font-size: 12px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.gsp-lb-x { position: absolute; top: 10px; right: 12px; width: 48px;
  height: 48px; background: none; border: 0; color: #9a9a98; font-size: 24px;
  cursor: pointer; font-family: var(--gs-font); }
.gsp-lb-x:hover { color: #fff; }
.gsp-lb-btn { position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 1px solid #3a3a38; border-radius: 50%;
  background: none; cursor: pointer; color: #f5f5f5; display: flex;
  align-items: center; justify-content: center; padding: 0; }
.gsp-lb-btn::before { content: ''; display: block; width: 13px; height: 13px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.gsp-lb-btn--prev { left: 18px; }
.gsp-lb-btn--prev::before { transform: rotate(45deg); margin-left: 3px; }
.gsp-lb-btn--next { right: 18px; }
.gsp-lb-btn--next::before { transform: rotate(225deg); margin-right: 3px; }
.gsp-lb-btn:disabled { border-color: #232321; color: #4a4a48; cursor: default; }

/* --- 14i cover reveal stagger + smooth anchor --- */
.gsp-cv-txt > .gs-reveal:nth-child(2) { transition-delay: .08s; }
.gsp-cv-txt > .gs-reveal:nth-child(3) { transition-delay: .16s; }
.gsp-cv-txt > .gs-reveal:nth-child(4) { transition-delay: .24s; }
.gsp-cv-txt > .gs-reveal:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.gsp-cv-page) { scroll-behavior: smooth; }
}
#gsp-chapters { scroll-margin-top: 24px; }

/* --- 14j responsive --- */
@media (max-width: 860px) {
  .gsp-cv { flex-direction: column-reverse; min-height: 0; }
  .gsp-cv-pic { margin: 0 -18px; }
  .gsp-cv-pic img { max-height: none; aspect-ratio: 4 / 5; }
  .gsp-cv-txt { padding: 24px 0 0; }
  .gsp-cv-name { font-size: 46px; }
  .gsp-cv--nopic .gsp-cv-name { font-size: 52px; }
  .gsp-cv-head { font-size: 17px; margin-top: 14px; }
  .gsp-cv-meta { font-size: 11px; letter-spacing: .22em; margin-top: 20px; }
  .gsp-cv-cue { display: none; }
  .gsp-ch { padding-top: 52px; }
  .gsp-ch-prose { font-size: 17px; }
  .gsp-cv-kick, .gsp-ch-kick { font-size: 11px; }
  .gsp-list-row dt { font-size: 11px; }
  .gsp-qa-q { font-size: 11px; }
  .gsp-micro a { font-size: 10.5px; }
  .gsp-list-row { min-height: 54px; }
  .gsp-list-row dd { font-size: 15px; }
  .gsp-strip-card, .gsp-strip-lock { flex-basis: 225px; height: 281px; }
  .gsp-strip-btn { display: none; }
  .gsp-qa-a { font-size: 16px; }
  .gsp-ctaband { display: none; }
  .gsp-stickybar { display: block; position: sticky; bottom: 0; z-index: 30;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    background: var(--gs-red); color: #fff; text-align: center;
    padding: 17px 16px calc(17px + env(safe-area-inset-bottom));
    font-size: 12px; letter-spacing: .27em; text-transform: uppercase;
    text-decoration: none; font-family: var(--gs-font); }
  a.gsp-stickybar:hover { color: #fff; text-decoration: none; }
  .gsp-stickybar--ghost { background: var(--gs-bg);
    border-top: 1px solid var(--gs-field); color: #e8e8e6; }
  .gsp-micro { flex-wrap: wrap; gap: 20px; }
}

/* ================= phase 14c: compact desktop spread ================= */
/* sticky-rail cure (leak class #4): .gs-main{overflow:auto} makes the dark
   main a scroll container and kills position:sticky - same fix as phase 13,
   scoped to pages bearing the profile rail */
.gs-main--dark:has(.gsp-rail) { overflow-x: clip; overflow-y: visible; }
/* Desktop (>=861): ONE two-column spread. Left = all text (.gsp-smain),
   right = sticky rail (.gsp-rail) with portrait + square photo grid +
   visitor red CTA. Mobile (<=860) reflows to column-reverse so the
   portrait becomes the full-bleed cover exactly as shipped at v=s; the
   grid/CTA hide and the mobile strip (.gsp-ph) + sticky bar carry photos.
   NOTE: photo grid is namespaced .gsp-pgrid* -- .gsp-grid already exists
   as the site-wide member-card grid (phase-5), reusing it would collide. */

/* --- base (all widths) --- */
.gsp-spread { display: flex; }
.gsp-smain { min-width: 0; }
.gsp-id { min-width: 0; }

/* rail portrait */
.gsp-rail-pic { margin: 0; }
.gsp-rail-pic img { width: 100%; object-fit: cover; display: block;
  cursor: zoom-in; }

/* square photo grid */
.gsp-pgrid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; margin-top: 2px; }
.gsp-pgrid-c { position: relative; aspect-ratio: 1 / 1; padding: 0;
  border: 0; background: var(--gs-raised); cursor: zoom-in; display: block; }
.gsp-pgrid-c img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
.gsp-pgrid-more::after { content: ''; position: absolute; inset: 0;
  background: rgba(4,4,4,.62); }
.gsp-pgrid-n { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #f5f5f5;
  font-size: 19px; font-weight: 100; z-index: 1; font-family: var(--gs-font); }
/* frosted lock tile (reuses .gsp-strip-lockin/-lockn/-lockt/-lockbtn) */
.gsp-pgrid-lock { position: relative; aspect-ratio: 1 / 1; display: block;
  background: #1c1a17; text-decoration: none; }
a.gsp-pgrid-lock:hover { text-decoration: none; }
.gsp-pgrid-lock::before { content: ''; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  background: rgba(38,33,26,.55); border: 1px solid rgba(255,255,255,.07); }

/* visitor red CTA card (rail) */
.gsp-railcta { display: block; background: var(--gs-red); padding: 26px 28px;
  margin-top: 16px; text-decoration: none;
  transition: background-color .18s ease-out; }
a.gsp-railcta:hover { background: #c91d16; text-decoration: none; }
.gsp-railcta-k { display: block; color: rgba(255,255,255,.72);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  font-family: var(--gs-font); }
.gsp-railcta-t { display: block; color: #fff; font-size: 20px;
  font-weight: 200; margin-top: 6px; font-family: var(--gs-font); }

/* --- desktop spread (>=861) --- */
@media (min-width: 861px) {
  .gsp-spread { gap: 48px; align-items: flex-start; }
  .gsp-smain { flex: 1.15; padding-top: 96px; }
  .gsp-rail { flex: 1; min-width: 0; position: sticky; top: 24px;
    align-self: flex-start; padding-top: 24px; }
  .gsp-rail-pic img { max-height: 52vh; aspect-ratio: 4 / 5; }
  /* mobile photo chapters hidden -- rail grid replaces them */
  .gsp-ph { display: none; }
  /* compact chapter spacing inside the text column */
  .gsp-smain .gsp-ch { padding: 72px 0 0; }
  .gsp-smain .gsp-ch:first-of-type { padding-top: 80px; }
  .gsp-smain .gsp-ch:last-of-type { padding-bottom: 0; }
  .gsp-smain .gsp-micro { padding: 56px 0 72px; }
  /* type-hero when there is no rail at all */
  .gsp-spread--nopic .gsp-smain { max-width: 720px; }
  .gsp-spread--nopic .gsp-cv-name { font-size: clamp(56px, 8.5vw, 96px); }
  /* cover reveal stagger re-pointed onto the identity block */
  .gsp-id > .gs-reveal:nth-child(2) { transition-delay: .08s; }
  .gsp-id > .gs-reveal:nth-child(3) { transition-delay: .16s; }
  .gsp-id > .gs-reveal:nth-child(4) { transition-delay: .24s; }
}

/* --- mobile reflow (<=860): shipped-at-v=s cover behaviour --- */
@media (max-width: 860px) {
  .gsp-spread { flex-direction: column-reverse; }
  .gsp-rail { width: auto; }
  /* portrait IS the mobile cover: full-bleed -18px, 4:5 */
  .gsp-rail-pic { margin: 0 -18px; }
  .gsp-rail-pic img { aspect-ratio: 4 / 5; max-height: none; }
  /* mobile uses the strip chapter + sticky bar, not the grid/CTA */
  .gsp-pgrid, .gsp-railcta { display: none; }
  .gsp-smain { padding-top: 24px; }
}

/* ===== phase 15: rubrika = aktuelno grid + intros (no meta - you are in the section) ===== */
.gsa-card-intro { color: var(--gs-muted); font-family: var(--gs-font);
  font-size: 13px; font-weight: 300; line-height: 1.5; margin: 8px 0 0; }
.gsa-card--noimg .gsa-card-intro { margin-top: 10px; }
@media (max-width: 560px) { .gsa-card-intro { font-size: 16px; line-height: 1.55; } }

/* phase 15b: whole card = one click target (stretched link via title's
   ::after), hover anywhere underlines the title */
.gsa-card { position: relative; }
.gsa-card-title::after { content: ''; position: absolute; inset: 0; }
.gsa-card:hover .gsa-card-title { color: #fff; opacity: 1;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
.gsr-admin { position: relative; z-index: 2; }

/* phase 15c: hover = slow photo zoom inside the fixed 3:2 crop (magazine
   ken-burns; transform-only, layout never moves) */
.gsa-card-img { overflow: hidden; }
.gsa-card-img img { transition: transform .45s cubic-bezier(.2, .6, .2, 1); }
.gsa-card:hover .gsa-card-img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .gsa-card-img img { transition: none; }
  .gsa-card:hover .gsa-card-img img { transform: none; }
}

/* phase 15d: native select popups on dark pages - dark panel, legible
   options (overrides the old light-panel option:#111 rule) */
.gs-main--dark select { color-scheme: dark; }
.gs-main--dark option,
.gs-main--dark .gs-fld option,
.gs-main--dark #city-wrapper option {
  background-color: #161614; color: #f0f0f0; }
.gs-main--dark option:disabled { color: #6a6a68; }

/* phase 15e: register grid cells - field + its own error live together */
.gsp-cell { min-width: 0; display: block; }

/* ===== phase 15f: nav polish - drawn red underline (hover) + luxe panel
   easing + group cascade. Right cluster (persona/Prijava, globe/EN)
   deliberately untouched. ===== */
.gs-nav .gs-caplink { position: relative; padding: 6px 0;
  font-size: 11px; color: #b1b1af; }
.gs-nav .gs-caplink::after { content: ''; position: absolute; left: 0;
  right: 0; bottom: 0; height: 2px; background: var(--gs-red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.gs-nav .gs-caplink:hover::after, .gs-nav .gs-caplink:focus-visible::after,
.gs-nav .gs-caplink--on::after { transform: scaleX(1); }
.gs-nav .gs-caplink--on { border-bottom: 0; }
@media (min-width: 861px) {
  .gs-deskpanel { transform: translateY(-14px);
    transition: opacity .38s cubic-bezier(.16, 1, .3, 1),
      transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .38s; }
  .gs-deskpanel.gs-open {
    transition: opacity .38s cubic-bezier(.16, 1, .3, 1),
      transform .38s cubic-bezier(.16, 1, .3, 1); }
  .gs-deskpanel .gs-groups > div { opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease-out, transform .3s ease-out; }
  .gs-deskpanel.gs-open .gs-groups > div { opacity: 1; transform: none; }
  .gs-deskpanel.gs-open .gs-groups > div:nth-child(1) { transition-delay: .05s; }
  .gs-deskpanel.gs-open .gs-groups > div:nth-child(2) { transition-delay: .11s; }
  .gs-deskpanel.gs-open .gs-groups > div:nth-child(3) { transition-delay: .17s; }
  .gs-deskpanel.gs-open .gs-groups > div:nth-child(4) { transition-delay: .23s; }
  /* full-bleed bottom hairline (border stopped at the 1248 grid edge) */
  .gs-deskpanel::after { content: ''; position: absolute; left: -50vw;
    right: -50vw; bottom: 0; height: 1px; background: #232320; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-nav .gs-caplink::after, .gs-deskpanel,
  .gs-deskpanel .gs-groups > div { transition: none; }
}

/* pic-upload: delete = phosphor trash (was a text x) */
.gsd-pacts .gsd-pact-del svg { width: 15px; height: 15px; display: block; }

/* pic-select: dashed add-new card (upload -> public + becomes profilna) */
.gsd-pick--add { background: none; border: 1px dashed #33332f; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; min-height: 150px; padding: 0;
  font-family: var(--gs-font);
  transition: border-color .18s ease-out, color .18s ease-out; }
.gsd-pick--add:hover { border-color: #54544f; }
.gsd-pick--add .gsd-pick-plus { color: #8a8a88; font-size: 30px;
  font-weight: 100; line-height: 1; }
.gsd-pick--add:hover .gsd-pick-plus { color: #fff; }
.gsd-pick--add .gsd-pick-lbl { position: static; background: none; }

/* pic-upload: Moj profil button rides the heading row */
.gsd-headbtn { margin-left: auto; align-self: center; }

/* ===== phase 15h: chrome pinned to the top, both breakpoints =====
   sticky (not fixed) - keeps flow, no body padding compensation. Full-bleed
   ::before paints the bar's bg past the 1248 grid so content can't ghost
   through the side gutters while scrolling; deskpanel gets the same layer. */
.gs-chrome { position: sticky; top: 0; }
.gs-chrome::before { content: ''; position: absolute; left: -50vw; right: -50vw;
  top: 0; bottom: 0; background: var(--gs-bg); z-index: -1; }
@media (min-width: 861px) {
  .gs-deskpanel::before { content: ''; position: absolute; left: -50vw;
    right: -50vw; top: 0; bottom: 0; background: var(--gs-bg); z-index: -1; }
}

/* ===== phase 15i: visitor profile action bar - sticky under the chrome =====
   full-bleed via negative vw margins (root is clip); inner rides the 1180
   grid with main-matching gutters. Star = the thread's outline/fill toggle. */
/* the 44px avatar must not inflate the bar: overlap the paddings so chrome
   height is constant whether logged in or out (desktop 76 / mobile 55) */
.gs-mpersona { margin-top: -9px; margin-bottom: -9px; }
@media (max-width: 899px) { .gs-mpersona { margin-top: -10px; margin-bottom: -10px; } }

.gsp-actbar { background: var(--gs-bg); border-bottom: 1px solid #232320;
  margin: -20px calc(50% - 50vw) 0; }
.gsp-actbar-in { max-width: 1180px; margin: 0 auto; padding: 13px 40px;
  display: flex; gap: 30px; align-items: center;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.gsp-actbar-in::-webkit-scrollbar { display: none; }
.gsp-actbar-in a { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--gs-font); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: #dddddb; text-decoration: none;
  flex: none; transition: color .18s ease-out; }
.gsp-actbar-in a:hover { color: #fff; text-decoration: none; }
.gsp-actbar-in .gsd-mi { width: 21px; height: 21px; flex: none; }
.gsp-actbar-in .gsp-st1, .gsp-actbar-in .gsp-ft1 { display: none; }
.gsp-actbar-in .gsp-act-fav.gsd-fav-on { color: var(--gs-red); }
.gsp-actbar-in .gsp-act-fav.gsd-fav-on:hover { color: var(--gs-red); }
.gsp-actbar-in .gsp-act-fav.gsd-fav-on .gsp-st0,
.gsp-actbar-in .gsp-act-fav.gsd-fav-on .gsp-ft0 { display: none; }
.gsp-actbar-in .gsp-act-fav.gsd-fav-on .gsp-st1 { display: inline-block; }
.gsp-actbar-in .gsp-act-fav.gsd-fav-on .gsp-ft1 { display: inline; }
@media (max-width: 1199px) { .gsp-actbar-in { padding: 13px 28px; } }
@media (max-width: 860px) {
  .gsp-actbar-in { display: grid; grid-auto-flow: column;
    grid-auto-columns: 1fr; gap: 0; padding: 0; overflow: visible;
    white-space: normal; align-items: stretch; }
  .gsp-actbar-in a { flex-direction: column; justify-content: flex-start;
    gap: 8px; padding: 13px 6px 12px; text-align: center;
    font-size: 9.5px; letter-spacing: .16em; line-height: 1.35; }
  .gsp-actbar-in a + a { border-left: 1px solid #232320; }
}

/* phase 15j: own-profile ADD tile at the end of the photo strip + rail grid */
.gsp-strip-add { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; background: none;
  border: 1px dashed #33332f; box-sizing: border-box; text-decoration: none;
  cursor: pointer; transition: border-color .18s ease-out; }
.gsp-strip-add:hover { border-color: #54544f; text-decoration: none; }
.gsp-pgrid-add { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; aspect-ratio: 1 / 1; background: none;
  border: 1px dashed #33332f; box-sizing: border-box; text-decoration: none;
  cursor: pointer; transition: border-color .18s ease-out; }
.gsp-pgrid-add:hover { border-color: #54544f; text-decoration: none; }
.gsp-add-plus { color: #8a8a88; font-size: 30px; font-weight: 100;
  line-height: 1; font-family: var(--gs-font); }
.gsp-strip-add:hover .gsp-add-plus, .gsp-pgrid-add:hover .gsp-add-plus { color: #fff; }
.gsp-add-t { color: #8a8a88; font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; font-family: var(--gs-font); }

/* ============================================================
   PHASE 16 - realtime thread: typing bubble, pending/failed sends
   ============================================================ */
.gsd-typing { display: inline-flex; align-items: center; gap: 5px; padding-top: 16px; padding-bottom: 16px; }
.gsd-typing[hidden] { display: none !important; }
.gsd-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a8a88; display: inline-block;
  animation: gs-typing 1.2s ease-in-out infinite; }
.gsd-typing i:nth-child(2) { animation-delay: .18s; }
.gsd-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes gs-typing { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gsd-typing i { animation: none; opacity: .6; }
}
.gsd-msg--pending { opacity: .55; }
.gsd-msg--fail { opacity: 1; box-shadow: inset 3px 0 0 #7c1511; }
.gsd-msg-retry { display: block; margin-top: 6px; padding: 4px 0; cursor: pointer;
  font-family: var(--gs-font); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 16b: unlock-share tool (button variant) + unlock card message */
button.gsd-tool { background: none; border: 0; padding: 0;
  appearance: none; -webkit-appearance: none; text-align: left; }
button.gsd-tool:disabled { opacity: .5; cursor: default; }
.gsd-tool[hidden] { display: none !important; }
.gsd-msg .gsd-unlockmsg { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--gs-font); color: #e6e6e4; text-decoration: none; }
.gsd-msg-out .gsd-unlockmsg { color: #fff; }
.gsd-msg .gsd-unlockmsg:visited { color: #e6e6e4; text-decoration: none; }
.gsd-msg-out .gsd-unlockmsg:visited { color: #fff; }
.gsd-msg .gsd-unlockmsg:hover { color: #e6e6e4; text-decoration: none; }
.gsd-msg-out .gsd-unlockmsg:hover { color: #fff; }
.gsd-msg .gsd-unlockmsg::before { content: ""; flex: none; width: 19px; height: 19px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* 16c: personals index - hero pushed down, sub retired (Nik 2026-07-15) */
.gsp-idxwrap .gsr-hero { margin-top: 96px; }
.gsp-idxwrap .gsp-pulse { margin-bottom: 26px; text-transform: uppercase; letter-spacing: .1em; }

/* 16d: pic-upload move-album links get a folder icon; star retired (Nik 2026-07-15) */
.gsd-pact-txt { display: inline-flex; align-items: center; gap: 6px; }
.gsd-pact-txt .gsd-mi { width: 15px; height: 15px; flex: none; }

/* ================= phase 17: homepage = hero band + news grid (Nik mock, 2026-07-16) ================= */
/* Red band runs edge-to-edge and flush under the chrome: negative margins mirror
   .gs-main padding (20px vertical, clamp(18px,3vw,40px) horizontal) exactly.
   NO overflow here - the big word's descender must escape into the black below. */
.gsh-hero { background: var(--gs-red); position: relative; z-index: 2;
  height: clamp(163px, 21.8vw, 292px);
  margin: -20px calc(clamp(18px, 3vw, 40px) * -1) 0; }
/* full-bleed negative margins would spawn a horizontal scrollbar on the dark main
   (it carries overflow-x:auto) - clip it like the .gsp-rail sticky cure does. */
.gs-main--dark:has(.gsh-hero) { overflow-x: clip; overflow-y: visible; }
/* content-box + inner padding keeps the word x-aligned with the 1180 grid below. */
.gsh-hero-in { max-width: 1180px; box-sizing: content-box;
  padding: 0 clamp(18px, 3vw, 40px); margin: 0 auto; height: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; font-family: var(--gs-font); }
/* the big word. negative bottom margin drops the baseline to the band edge so
   descenders (hej/sijaj/poz) hang into the black; flat words sit on the edge. */
.gsh-hero-w, .gsh-hero-g { color: #fff; font-family: var(--gs-font);
  font-weight: 200; font-size: clamp(70px, 14.8vw, 198px); line-height: .74;
  letter-spacing: -7px; text-transform: none; white-space: nowrap;
  position: relative; z-index: 2; margin: 0 0 -0.03em; }
.gsh-hero-s { color: #fff; font-size: clamp(13px, 1.6vw, 21px); font-weight: 300;
  margin: 0 0 -4px; white-space: nowrap; flex: none; }
@media (max-width: 640px) {
  /* mobile keeps the original band/word scale (Nik 2026-07-16) - the two
     desktop shrink rounds (-20%, -15%) apply above 640 only. */
  .gsh-hero { height: clamp(216px, 28.8vw, 387px); }
  .gsh-hero-w, .gsh-hero-g { font-size: clamp(101px, 21.3vw, 285px);
    letter-spacing: -3px; }
  /* small line goes top-right so it can't collide with the widest words. */
  .gsh-hero-in { position: relative; }
  .gsh-hero-s { position: absolute; top: 20px; right: 18px; margin: 0;
    font-size: 13px; }
}
/* clearance under the hanging descender so it never overlaps the first card row. */
.gsh-home .gsa-grid { margin-top: 84px; }
@media (max-width: 640px) { .gsh-home .gsa-grid { margin-top: 64px; } }
.gsh-allnews { display: flex; justify-content: center; margin: 72px 0 12px; }
/* homepage phone cards: thumbs 20% shorter than the 3:2 system crop (Nik 2026-07-16) */
@media (max-width: 560px) {
  .gsh-home .gsa-card-img img { aspect-ratio: 15 / 8; }
}

/* ---- phase 17b: minimalist polish round (Nik 2026-07-17) ----
   tagline margin -4px above = its baseline probe-locked to the word baseline.
   balance evens the ragged uppercase wraps (shared class: aktuelno/rubrika
   inherit the fix). focus ring moves off the title text onto the whole card
   (the stretched-link makes the card the real target). */
.gsa-card-title { text-wrap: balance; }
.gsa-card-title:focus-visible { outline: none; }
.gsa-card:has(.gsa-card-title:focus-visible) {
  outline: 2px solid var(--gs-field-focus); outline-offset: 4px; }

/* ---- phase 17c: hero word reveal - rise through the edge, tail dips after
   (Nik pick A, 2026-07-17). The wrapper is a static mask whose floor sits
   exactly on the band edge (clip bottom 0 = wrapper box bottom = flex line;
   the word's own -0.03em margin + glyph overflow poke below it and get cut).
   Rise: word translates up inside the window. Dip: the window floor drops
   (0 -> -90px) and the descender inks down into the black. animationend JS
   clears the clip entirely, so the resting state = the pre-reveal DOM. */
.gsh-hero-wm { position: relative; z-index: 2; }
/* hide/animate states key off html.gsh-boot - added SYNCHRONOUSLY by a 1-line
   script right before the hero markup, so the word is hidden from the very
   first paint (no fallback-font flash; no dependency on deferred gs.js).
   The wrapper clip is STATIC (floor on the band edge) - never animated, so
   iOS can't mis-interpolate it; the arming script releases it at the apex,
   when the whole word (tail included) is above the line and removal is
   invisible. Word motion: rise past rest (tail clears into the red), then
   settle down - the descender sinks through the line into the black. */
html.gsh-boot .gsh-hero-wm { -webkit-clip-path: inset(-999px -40px 0 -40px);
  clip-path: inset(-999px -40px 0 -40px); }
/* two-beat (Nik 2026-07-17): the greeting rises to the apex, HOVERS (never
   lands), sinks back through the line - then the verb arrives and stays.
   Greeting hidden entirely without gsh-boot (no-JS shows only the verb);
   inside the mask it needs no cleanup - gshSink parks it below the floor. */
.gsh-hero-g { display: none; }
html.gsh-boot .gsh-hero-g { display: block; position: absolute;
  left: 0; bottom: 0; transform: translateY(1.2em); }
html.gsh-boot .gsh-hero-w { transform: translateY(1.2em); }
html.gsh-boot .gsh-hero-s { opacity: 0; }
html.gsh-boot .gsh-hero--go .gsh-hero-g {
  animation: gshRise .5s cubic-bezier(.16, 1, .3, 1) forwards,
             gshSink .4s cubic-bezier(.5, 0, .8, .4) .95s forwards; }
html.gsh-boot .gsh-hero--go .gsh-hero-w {
  animation: gshRise .6s cubic-bezier(.16, 1, .3, 1) 1.3s forwards,
             gshSettle .32s cubic-bezier(.45, 0, .55, 1) 1.9s forwards; }
html.gsh-boot .gsh-hero--go .gsh-hero-s {
  animation: gshFade .45s ease-out 1.95s forwards; }
@keyframes gshRise { to { transform: translateY(-0.28em); } }
@keyframes gshSink { from { transform: translateY(-0.28em); }
  85% { opacity: 1; }
  to { transform: translateY(1.25em); opacity: 0; } }
@keyframes gshSettle { from { transform: translateY(-0.28em); }
  to { transform: none; } }
@keyframes gshFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.gsh-boot .gsh-hero-wm { -webkit-clip-path: none; clip-path: none;
    animation: none !important; }
  html.gsh-boot .gsh-hero-g { display: none !important;
    animation: none !important; }
  html.gsh-boot .gsh-hero-w { transform: none; animation: none !important; }
  html.gsh-boot .gsh-hero-s { opacity: 1; animation: none !important; }
}