:root {
  --bg: #090910; --bg2: #0d0d1a; --bg3: #11111f;
  --pink: #ff2d6b; --pink-dim: #c4204e;
  --blue: #3a5aff; --blue-dim: #1e2f7a;
  /* palette is pink + blue only; no third accent */
  --muted: #4a4a6a; --text: #c8c8e0; --text-dim: #6a6a8a; --border: #1e1e32;
  --pixel: 'Press Start 2P', monospace; --mono: 'Share Tech Mono', monospace;
  --rail: 264px; --wrap: 900px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-color: var(--border) var(--bg); scrollbar-width: thin; }
body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.7; min-height: 100vh; overflow-x: hidden; }
body::before { content: ''; position: fixed; top: -20%; left: -10%; width: 60%; height: 200%;
  background: linear-gradient(115deg, transparent 0%, transparent 45%, rgba(58,90,255,0.03) 45%, rgba(58,90,255,0.03) 48%, transparent 48%, transparent 58%, rgba(255,45,107,0.025) 58%, rgba(255,45,107,0.025) 61%, transparent 61%);
  pointer-events: none; z-index: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--text); }
@keyframes flicker { 0%,96%,100% { opacity:1; } 97% { opacity:0.7; } 98% { opacity:1; } 99% { opacity:0.5; } }
@keyframes rise { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none; } }

/* language */
.lfr { display: block; } .len { display: none; }
.ifr { display: inline; } .ien { display: none; }
body.en .lfr { display: none; } body.en .len { display: block; }
body.en .ifr { display: none; } body.en .ien { display: inline; }

/* AGE GATE */
#agegate { position: fixed; inset: 0; background: var(--bg); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; text-align: center; }
#agegate img { width: 320px; max-width: 80vw; height: auto; display: block; }
.divider { color: var(--blue-dim); font-size: 11px; letter-spacing: 0.05em; }
#agegate p { color: var(--text-dim); font-size: 12px; max-width: 360px; line-height: 2; }
.gate-buttons { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.btn-enter { font-family: var(--pixel); font-size: 9px; color: var(--bg); background: var(--pink); border: none; padding: 14px 28px; cursor: pointer; letter-spacing: 0.1em; transition: background 0.15s; }
.btn-enter:hover { background: #ff5589; }
.btn-leave { font-family: var(--pixel); font-size: 9px; color: var(--muted); background: transparent; border: 1px solid var(--border); padding: 14px 28px; cursor: pointer; letter-spacing: 0.1em; }
.lang-toggle { display: flex; border: 1px solid var(--border); overflow: hidden; }
.lang-btn { font-family: var(--pixel); font-size: 7px; padding: 6px 12px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; letter-spacing: 0.1em; transition: all 0.15s; }
.lang-btn.active { background: var(--blue-dim); color: var(--text); }
.lang-btn:hover:not(.active) { color: var(--text); }

/* SITE */
#site { display: none; position: relative; z-index: 1; height: 100vh; flex-direction: column; }
#site.shown { display: flex; }
@media (min-width: 761px) { body.shown { overflow: hidden; } }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* HEADER: logo, icons, nav. No lines. */
header { padding-top: 1.75rem; }
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hdr img.logo { height: 44px; width: auto; display: block; }
.hdr .right { display: flex; align-items: center; gap: 1rem; }
.socials { display: flex; gap: 0.15rem; }
.socials a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-dim); }
.socials a:hover { color: var(--pink); }
.socials svg { width: 14px; height: 14px; fill: currentColor; }
.more { position: relative; }
.more summary { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); cursor: pointer; list-style: none; padding: 0 0.35rem; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--text); }
.more .menu { position: absolute; right: 0; top: 1.8rem; z-index: 60; background: rgba(13,13,26,0.96); backdrop-filter: blur(10px); border: 1px solid var(--border); padding: 0.5rem 0; min-width: 150px; display: flex; flex-direction: column; }
.more .menu a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; padding: 0.35rem 1rem; color: var(--text-dim); }
.more .menu a:hover { color: var(--text); }

/* LAYOUT */
.cols { display: grid; grid-template-columns: var(--rail) 1fr; gap: 3rem; padding: 2rem 1.25rem 1.5rem; align-items: stretch; flex: 1; min-height: 0; width: 100%; }

/* RAIL: plain, quiet, pinned */
.rail { min-height: 0; overflow-y: auto; scrollbar-width: none; padding-right: 0.5rem; }
.rail::-webkit-scrollbar { display: none; }
.who { display: flex; align-items: center; gap: 0.5rem; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; margin-bottom: 1rem; }
.who img { width: 22px; height: 22px; border-radius: 50%; }
.who:hover { color: var(--text); }
.sk-item { padding: 0 0 1.1rem; animation: rise 0.4s ease both; }
.sk-item .t { font-size: 12px; line-height: 1.6; color: var(--text-dim); word-break: break-word; }
.sk-item .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 0.5rem; }
.sk-item .imgs img.wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.sk-item .imgs img.sq { aspect-ratio: 1; }
.sk-item .imgs img.sq:only-child { grid-column: 1 / -1; }
.sk-item .imgs img { width: 100%; object-fit: cover; display: block; filter: saturate(0.6) brightness(0.85); transition: filter 0.2s; }
.sk-item .imgs img:hover { filter: none; }
.sk-item .m { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; margin-top: 0.3rem; display: flex; gap: 0.9rem; }
.sk-item .m a { color: inherit; }
.sk-more { display: block; font-size: 10px; letter-spacing: 0.15em; color: var(--text-dim); padding-top: 0.25rem; }
.sk-err { font-size: 11px; color: var(--muted); }

/* FEED */
.feedcol { min-width: 0; min-height: 0; padding: 1.25rem 1.75rem 0; display: flex; flex-direction: column;
  background: rgba(13,13,26,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(58,90,255,0.18); box-shadow: 0 0 0 1px rgba(9,9,16,0.6), 0 24px 60px rgba(0,0,0,0.55), inset 0 0 40px rgba(58,90,255,0.04); }
.tagsbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; min-height: 24px; }
.tags-toggle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0; }
.tags-toggle::after { content: ' ▸'; color: var(--muted); }
.tagsbar.open .tags-toggle::after { content: ' ▾'; }
.tags-toggle:hover { color: var(--text); }
.chips { display: none; gap: 0.35rem; flex-wrap: wrap; }
.tagsbar.open .chips { display: flex; animation: rise 0.25s ease both; }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: none; cursor: pointer; padding: 2px 6px; }
.chip.on { color: var(--pink); }
.chip:hover { color: var(--text); }
.add { margin-left: auto; font-family: var(--mono); font-size: 16px; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; opacity: 0.5; }
.add:hover { color: var(--blue); opacity: 1; }

.feed { display: flex; flex-direction: column; }
.post { animation: rise 0.35s ease both; }
.day { font-size: 9px; letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase; margin: 1.6rem 0 0.5rem; }
.day:first-child { margin-top: 0; }

/* small post: one line */
.post.small { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.3rem 0; }
.post.small .ico { flex: 0 0 14px; text-align: center; }
.post.small .txt { font-size: 13px; }
.post.small .txt a { color: var(--text); }
.post.small .txt a:hover { color: var(--pink); }
.post.small .where { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; margin-left: 0.5rem; }

/* big post: image, title, text. No box. */
.post.big { margin: 0.6rem 0 1.4rem; }
.post.big .cover { display: block; width: 100%; max-height: 320px; object-fit: cover; margin-bottom: 0.9rem; }
.post.big h2 { font-family: var(--pixel); font-size: 11px; line-height: 1.8; letter-spacing: 0.05em; color: var(--text); margin-bottom: 0.4rem; }
.post.big h2 a { color: var(--text); }
.post.big h2 a:hover { color: var(--pink); }
.post.big p { font-size: 13px; color: var(--text); line-height: 1.75; max-width: 56ch; }
.post.big .meta { margin-top: 0.6rem; font-size: 10px; letter-spacing: 0.12em; color: var(--muted); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.post.big .meta a { color: var(--text-dim); }
.post.big .meta a:hover { color: var(--pink); }
.post.locked .cover { filter: blur(16px) saturate(0.5); }
.post.locked .meta a.gold { color: var(--pink); }

.k { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.k.art, .k.store, .k.patron, .k.comms { color: var(--pink); } .k.release, .k.writing { color: var(--blue); }
.ico { font-size: 12px; line-height: 1; }

.btn { font-family: var(--pixel); font-size: 7px; letter-spacing: 0.12em; padding: 10px 14px; border: 1px solid var(--border); color: var(--text-dim); background: transparent; cursor: pointer; display: inline-block; }
.btn:hover { color: var(--text); border-color: var(--text-dim); }
.btn.p { background: var(--pink); color: var(--bg); border-color: var(--pink); }
.btn.p:hover { background: #ff5589; color: var(--bg); }

/* footer: under the feed column only, clustered right */
footer { margin: 3rem 0 1.5rem; font-size: 10px; color: var(--muted); letter-spacing: 0.08em; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right; }
footer a { color: var(--text-dim); }
footer a:hover { color: var(--text); }

/* COMPOSER */
#composer { position: fixed; inset: 0; background: rgba(9,9,16,0.85); backdrop-filter: blur(6px); z-index: 90; display: none; align-items: center; justify-content: center; padding: 1rem; }
#composer.open { display: flex; }
.cbox { width: 100%; max-width: 520px; background: var(--bg2); border: 1px solid var(--border); padding: 1.5rem; }
.cbox h3 { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.15em; color: var(--blue); margin-bottom: 1.2rem; }
.cbox label { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin: 0.9rem 0 0.3rem; }
.cbox input, .cbox textarea, .cbox select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 8px 10px; }
.cbox input:focus, .cbox textarea:focus, .cbox select:focus { outline: none; border-color: var(--blue); }
.cbox textarea { min-height: 90px; resize: vertical; }
.cbox .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.cbox .acts { display: flex; gap: 0.6rem; margin-top: 1.25rem; justify-content: flex-end; }
.seg { display: flex; border: 1px solid var(--border); }
.seg button { flex: 1; font-family: var(--pixel); font-size: 7px; padding: 8px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; letter-spacing: 0.1em; }
.seg button.on { background: var(--blue-dim); color: var(--text); }

@media (max-width: 760px) {
  header { padding-top: 1.1rem; }
  .hdr img.logo { height: 32px; }
  .hdr .right { gap: 0.5rem; }
  .socials a { width: 24px; height: 24px; }
  .lang-btn { padding: 5px 8px; font-size: 6px; }
  .more .menu { right: -2rem; }
  .cols { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.75rem; }
  .rail { position: static; max-height: none; order: 2; }
  .feedcol { padding: 1.25rem 1rem 0; }
  .post.small .where { display: none; }
}

/* monochrome emoji: Noto Emoji glyphs take the text colour */
.emo { font-family: 'Noto Emoji', var(--mono); font-weight: 400; color: var(--text-dim); font-size: 0.95em; }
svg.ic { width: 11px; height: 11px; fill: currentColor; vertical-align: -1px; }

/* the panel scrolls, the page does not */
.scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 0.5rem; margin-right: -0.5rem; }
.tagsbar { margin-bottom: 0.6rem; }
#tagsbar { margin-bottom: 1.1rem; }
.chip.pink { color: var(--text-dim); }
.page { font-size: 13px; line-height: 1.8; color: var(--text); }
.page p + p { margin-top: 1rem; }
.page .btn { margin-top: 0.5rem; }
/* admin: hide a rail post (hover ×) */
.sk-item { position: relative; }
.sk-item .hide { position: absolute; right: 0; top: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; opacity: 0; padding: 0 0.2rem; }
.sk-item:hover .hide { opacity: 0.7; }
.sk-item .hide:hover { color: var(--pink); opacity: 1; }
@media (max-width: 760px) {
  #site { height: auto; }
  .cols { flex: none; }
  .feedcol { display: block; }
  .scroller { overflow: visible; }
  .rail { max-height: none; }
}

[hidden] { display: none !important; }

/* support page only */
  .sup { max-width: 600px; padding: 0.5rem 0 1rem; }
  .note { font-size: 14px; line-height: 1.9; color: var(--text); }
  .note p + p { margin-top: 1.1rem; }
  .note em { color: var(--text-dim); font-style: normal; }
  .sig { margin: 1.5rem 0 2.5rem; font-family: var(--pixel); font-size: 8px; letter-spacing: 0.2em; color: var(--pink); animation: flicker 7s infinite; }
  .panel { padding: 1.75rem 1.75rem 1.5rem;
    background: rgba(13,13,26,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58,90,255,0.18); box-shadow: 0 0 0 1px rgba(9,9,16,0.6), 0 24px 60px rgba(0,0,0,0.55), inset 0 0 40px rgba(58,90,255,0.04); }
  .panel + .panel { margin-top: 1.5rem; }
  .panel p { font-size: 13px; line-height: 1.8; color: var(--text); }
  .perks { margin: 1rem 0 1.5rem; display: grid; gap: 0.35rem; }
  .perks div { font-size: 12px; color: var(--text-dim); display: flex; gap: 0.7rem; align-items: baseline; }
  .perks div::before { content: '·'; color: var(--pink); font-size: 14px; line-height: 1; }
  .bundles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
  .bundle { border: 1px solid var(--border); padding: 0.9rem 0.6rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .bundle:hover { border-color: var(--text-dim); }
  .bundle.on { border-color: var(--pink); background: rgba(255,45,107,0.06); }
  .bundle .m { font-family: var(--pixel); font-size: 9px; color: var(--text); letter-spacing: 0.05em; }
  .bundle .m small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 0.35rem; }
  .bundle .pr { font-size: 15px; color: var(--text); margin-top: 0.6rem; }
  .bundle .save { font-size: 9px; color: var(--blue); letter-spacing: 0.1em; }
  .pay { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
  .pay .btn { padding: 12px 18px; }
  .fine { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; margin-top: 0.9rem; line-height: 1.7; }
  .tips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 1rem; }
  .tip { font-family: var(--mono); font-size: 13px; color: var(--text-dim); border: 1px solid var(--border); background: transparent; padding: 7px 14px; cursor: pointer; }
  .tip.on, .tip:hover { color: var(--text); border-color: var(--pink); }
  .already { margin-top: 2rem; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .curr { display: flex; border: 1px solid var(--border); margin-left: auto; }
  .curr button { font-family: var(--pixel); font-size: 6px; padding: 6px 9px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; letter-spacing: 0.1em; }
  .curr button.on { background: var(--pink-dim); color: var(--text); }
  @media (max-width: 560px) { .bundles { grid-template-columns: repeat(2, 1fr); } }

/* ---------- hire me ---------- */
.page .intro { font-size: 13px; color: var(--text-dim); max-width: 60ch; }
.offer { margin: 1.75rem 0 2rem; }
.offer .head { display: flex; align-items: baseline; gap: 0.8rem; }
.offer h3 { font-family: var(--pixel); font-size: 10px; letter-spacing: 0.08em; color: var(--text); }
.offer .sub { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.offer .price { margin-left: auto; font-size: 12px; color: var(--pink); letter-spacing: 0.08em; text-align: right; }
.offer .desc { font-size: 12px; color: var(--text-dim); margin-top: 0.25rem; max-width: 60ch; }
.offer .ex { display: flex; gap: 4px; margin-top: 0.7rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.offer .ex::-webkit-scrollbar { display: none; }
.offer .ex .im { position: relative; flex: 0 0 auto; }
.offer .ex img { height: 110px; width: auto; display: block; cursor: zoom-in; filter: saturate(0.85); transition: filter 0.15s; }
.offer .ex img:hover { filter: none; }
.offer .ex .rm { position: absolute; top: 2px; right: 2px; font-family: var(--mono); font-size: 12px; color: var(--text); background: rgba(9,9,16,0.8); border: none; width: 18px; height: 18px; cursor: pointer; opacity: 0; }
.offer .ex .im:hover .rm { opacity: 0.85; }
.offer .ex .rm:hover { color: var(--pink); }
.offer .ex .addex { flex: 0 0 auto; height: 110px; width: 56px; border: 1px dashed var(--border); color: var(--muted); background: none; font-family: var(--mono); font-size: 18px; cursor: pointer; opacity: 0.6; }
.offer .ex .addex:hover { color: var(--blue); border-color: var(--blue); opacity: 1; }
#lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(9,9,16,0.92); display: none; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
/* will/not + tos */
.yncols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.ynh { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.15em; color: var(--blue); margin-bottom: 0.6rem; }
.ynh.pink { color: var(--pink); }
.yn ul { list-style: none; } .yn li { font-size: 13px; padding: 0.15rem 0; color: var(--text); }
.tos h3 { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.15em; color: var(--blue); margin: 1.4rem 0 0.4rem; }
.tos h3:first-child { margin-top: 0; }
.tos p { max-width: 62ch; }
@media (max-width: 560px) { .yncols { grid-template-columns: 1fr; } .offer .price { margin-left: 0; } }

/* admin controls on offerings */
.offer .adm { display: inline-flex; gap: 0.25rem; margin-left: 0.5rem; opacity: 0; transition: opacity 0.15s; }
.offer:hover .adm { opacity: 0.7; }
.offer .adm button { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0 0.25rem; }
.offer .adm button:hover { color: var(--blue); }
.addoffer { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); background: none; border: 1px dashed var(--border); padding: 0.6rem 1rem; cursor: pointer; margin: 0.5rem 0 1.5rem; width: 100%; opacity: 0.6; }
.addoffer:hover { color: var(--blue); border-color: var(--blue); opacity: 1; }
.addoffer .adm, .offer .adm { font-size: 9px; color: var(--muted); letter-spacing: 0.15em; }
.modal { position: fixed; inset: 0; background: rgba(9,9,16,0.85); backdrop-filter: blur(6px); z-index: 90; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.open { display: flex; }
.btn.danger { color: var(--pink); border-color: rgba(255,45,107,0.35); }
.cbox .acts { align-items: center; }

/* example carousel: arrows only when the strip overflows; fade hints at more */
.car { position: relative; margin-top: 0.7rem; }
.car .ex { margin-top: 0; scroll-snap-type: x proximity; }
.car .ex .im, .car .ex .addex { scroll-snap-align: start; }
.car .arr { position: absolute; top: 0; bottom: 2px; width: 34px; border: none; background: none; color: var(--text); font-family: var(--mono); font-size: 26px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 2; display: none; }
.car .arr.prev { left: 0; background: linear-gradient(90deg, rgba(9,9,16,0.85), transparent); text-align: left; padding-left: 4px; }
.car .arr.next { right: 0; background: linear-gradient(270deg, rgba(9,9,16,0.85), transparent); text-align: right; padding-right: 4px; }
.car.overflow .arr { display: block; opacity: 0.25; }
.car.overflow .arr:hover { opacity: 0.9; color: var(--pink); }
.car.overflow:hover .arr { opacity: 0.45; }
.car.overflow:hover .arr:hover { opacity: 1; }
@media (hover: none) { .car.overflow .arr { opacity: 0.5; } }

/* links editor */
.editlinks { font-family: var(--mono); font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; opacity: 0.35; padding: 0 0.3rem; }
.editlinks:hover { color: var(--blue); opacity: 1; }
.cbox.wide { max-width: 720px; }
.lhead, .lrow { display: grid; grid-template-columns: 44px 110px 1fr 2fr 36px 60px; gap: 0.5rem; align-items: center; }
.lhead { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.lrow { padding: 0.25rem 0; }
.lrow input[type="text"], .lrow select { padding: 6px 8px; font-size: 12px; }
.lrow .ord { display: flex; gap: 0; }
.lrow .ord button, .lrow .rm { font-family: var(--mono); font-size: 12px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0 3px; }
.lrow .ord button:hover { color: var(--blue); } .lrow .rm:hover { color: var(--pink); }
.lrow .ord button:disabled { opacity: 0.25; cursor: default; }
.lrow input[type="checkbox"] { accent-color: var(--pink); width: 14px; height: 14px; }
.socials a.txt { width: auto; padding: 0 0.3rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
@media (max-width: 760px) { .editlinks { display: none; } }

/* main column: nav row above the panel, aligned with the rail's handle line */
.maincol { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.maincol .feedcol { flex: 1; min-height: 0; }
.navrow { display: flex; align-items: center; gap: 1.1rem; height: 22px; margin-bottom: 1rem; padding-left: 0.25rem; }
.navrow .chip { padding: 0; font-size: 11px; letter-spacing: 0.2em; }
.navrow .chip.on { color: var(--pink); }
.subrow { margin-bottom: 1.1rem; }
.subrow .chips { display: flex; }
@media (max-width: 760px) { .maincol { display: block; } .navrow { margin-bottom: 0.75rem; } }

/* editable text blocks */
.tx { position: relative; }
.tx p + p { margin-top: 1.1rem; }
.tx { padding-right: 1.4rem; }
.tx .edit { position: absolute; right: 0; top: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; opacity: 0; padding: 0 0.3rem; }
.tx:hover .edit { opacity: 0.6; }
.tx .edit:hover { color: var(--blue); opacity: 1; }
.tx.intro p { font-size: 13px; color: var(--text-dim); max-width: 60ch; }
.panel .tx p { font-size: 13px; line-height: 1.8; }
.note .tx p { font-size: 14px; line-height: 1.9; }
.tx em { color: var(--text-dim); font-style: normal; }
.fine.tx p { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; line-height: 1.7; }

/* log tools */
.tagsbar .search { margin-left: auto; display: flex; align-items: center; }
.tagsbar .search input { width: 90px; background: transparent; border: none; border-bottom: 1px solid transparent; color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; padding: 2px 0; outline: none; transition: width 0.2s, border-color 0.2s; }
.tagsbar .search input::placeholder { color: var(--muted); letter-spacing: 0.2em; }
.tagsbar .search input:focus, .tagsbar .search input:not(:placeholder-shown) { width: 160px; border-bottom-color: var(--blue-dim); }
.tagsbar .search input::-webkit-search-cancel-button { filter: invert(0.6); }
.tagsbar .add { margin-left: 0.5rem; }
.tagsbar .months { display: none; width: 100%; }
.tagsbar.archive .months { display: flex; animation: rise 0.25s ease both; }
.tagsbar.archive .arch-toggle::after { content: ' ▾'; }
.months .yr { font-size: 9px; letter-spacing: 0.2em; color: var(--muted); padding: 2px 6px 2px 0; }
.morebtn { display: block; width: 100%; margin: 1.5rem 0 0.5rem; font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; color: var(--text-dim); background: none; border: none; cursor: pointer; }
.morebtn:hover { color: var(--text); }
.nores { font-size: 12px; color: var(--muted); padding: 1rem 0; }
@media (max-width: 760px) { .tagsbar .search { width: 100%; margin-left: 0; order: 9; } .tagsbar .search input { width: 100%; } }

/* keep the admin + on the first row; months and tag chips wrap below it */
.tagsbar .months { order: 10; }
#tagsbar #chips { order: 11; width: 100%; }

/* post keywords: muted, after the source link on big posts */
.post.big .meta .kws { margin-left: auto; font-size: 10px; letter-spacing: 0.08em; }
.post.big .meta .kws a { color: var(--muted); margin-left: 0.5rem; }
.post.big .meta .kws a:hover { color: var(--blue); }
.cbox label .adm { font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: none; margin-left: 0.4rem; }

/* header: full width inside the flex column (auto margins otherwise shrink-wrap it), nothing squeezes */
#site > .wrap { width: 100%; }
.hdr .right { flex-shrink: 0; gap: 0.9rem; }
.hdr .lang-toggle, .hdr .socials { flex-shrink: 0; }
.more { display: flex; align-items: center; height: 28px; }
.more summary { line-height: 28px; display: block; }
.editlinks { height: 28px; line-height: 28px; }

/* phones: icons fold into the links menu; header is logo · liens · FR/EN */
.more .menu a.m { display: none; }
@media (max-width: 760px) {
  .hdr .socials { display: none; }
  .more .menu a.m { display: block; }
  .more .menu { right: 0; }
  .hdr .right { gap: 0.75rem; }
}

@media (max-width: 760px) { .hdr img.logo { height: 28px; } .hdr { gap: 0.5rem; } }

@media (max-width: 360px) { .wrap { padding: 0 0.75rem; } .hdr img.logo { height: 24px; } }

.cbox input[type="date"], .cbox input[type="time"] { color-scheme: dark; }

/* ===== app additions (not in the mock) ===== */
body:not(.admin) .adminonly { display: none !important; }
.tx h3 { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.15em; color: var(--blue); margin: 1.4rem 0 0.4rem; }
.tx h3:first-child { margin-top: 0; }
.post .pctl { display: inline-flex; gap: 0.2rem; margin-left: 0.5rem; opacity: 0; transition: opacity 0.15s; vertical-align: baseline; }
.post:hover .pctl { opacity: 0.7; }
.post .pctl button { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0 0.2rem; }
.post .pctl button:hover { color: var(--pink); }
.post.future { outline: 1px dashed var(--blue-dim); outline-offset: 4px; }
.post.future .when::after, .post.small.future .where::after { content: ' · scheduled'; color: var(--blue); }
.pinned { display: flex; align-items: center; gap: 1rem; font-size: 10px; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 1rem; }
.pinned a { color: var(--blue); }
.railset { margin-top: 0.75rem; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.railset select { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); font-family: var(--mono); font-size: 10px; padding: 1px 4px; }
.sk-item.hiddenpost { opacity: 0.35; }
.sk-item.hiddenpost .hide { opacity: 0.7; color: var(--blue); }
.btn.disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.soon { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem; }
.admrow { font-size: 10px; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.4rem; }
.admrow a, .admrow button { color: var(--text-dim); background: none; border: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; cursor: pointer; padding: 0; }
.admrow a:hover, .admrow button:hover { color: var(--pink); }
.cbox .file { font-size: 11px; color: var(--text-dim); }
.cbox .file input[type="file"] { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.cbox .preview { margin-top: 0.4rem; max-height: 120px; display: none; }
.cbox .preview.on { display: block; }
.cbox .err { color: var(--pink); font-size: 11px; margin-top: 0.6rem; min-height: 1em; }
.note.c { font-size: 12px; color: var(--text-dim); margin-top: 0.5rem; }

/* rail: video posts */
.sk-item .imgs .vid { position: relative; display: block; }
.sk-item .imgs .vid.wide { grid-column: 1 / -1; }
.sk-item .imgs .vid.sq:only-child { grid-column: 1 / -1; }
.sk-item .imgs .vid img { width: 100%; }
.sk-item .imgs .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 0 14px rgba(0,0,0,0.9); opacity: 0.85; pointer-events: none; font-style: normal; }
.btn[data-armed], .rm[data-armed] { color: var(--pink) !important; border-color: var(--pink) !important; }

.mailaddr { font-size: 12px; color: var(--text-dim); letter-spacing: 0.05em; margin-left: 0.6rem; user-select: all; }

.cbox label.chk { display: flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0.05em; font-size: 12px; color: var(--text); margin-top: 1rem; cursor: pointer; }
.cbox label.chk input { accent-color: var(--pink); width: 14px; height: 14px; }
.post.small.islocked .where { color: var(--pink); }

/* attachments */
.post.big .gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: -0.5rem 0 0.9rem; }
.post.big .gal img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; filter: saturate(0.85); transition: filter 0.15s; }
.post.big .gal img:hover { filter: none; }
.post.big .files { list-style: none; margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.post.big .files li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 12px; }
.post.big .files a { color: var(--text); }
.post.big .files a:hover { color: var(--pink); }
.post.big .files span { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }
.cbox .attached { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.cbox .att { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); padding: 0.3rem 0.5rem; }
.cbox .att.img { padding: 0; }
.cbox .att.img img { height: 56px; width: auto; display: block; }
.cbox .att i { position: absolute; left: 3px; bottom: 3px; font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pink); background: rgba(9,9,16,0.8); padding: 1px 4px; font-style: normal; }
.cbox .att .rm { font-family: var(--mono); font-size: 12px; color: var(--text-dim); background: rgba(9,9,16,0.85); border: none; cursor: pointer; padding: 0 0.3rem; }
.cbox .att.img .rm { position: absolute; top: 2px; right: 2px; }
.cbox .att .rm:hover { color: var(--pink); }

/* patrons area */
.pstat { font-size: 13px; line-height: 1.8; margin-bottom: 1.2rem; }
.pstat.on b { color: var(--pink); }
.pstat .note.c { display: block; }
.pstat .btn { margin-bottom: 0.4rem; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.2rem 0 0.8rem; }
.tier { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-family: var(--mono); padding: 0.8rem 0.9rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; }
.tier b { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.1em; color: var(--text); }
.tier span { font-size: 11px; letter-spacing: 0.08em; }
.tier.on { border-color: var(--pink); background: rgba(255,45,107,0.06); }
.tier.on span { color: var(--pink); }
.eyebrow-ish { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.8rem; }
.libitem { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; }
.libitem img { width: 44px; height: 58px; object-fit: cover; }
.libitem > div { flex: 1; font-size: 12px; line-height: 1.5; }
.libitem small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; }