/* Vegastina — the original sky-blue theme: soft panels, pill buttons, the Vegas banner. */
:root {
  --blue:#d6400b;
  --blue-dark:#a63108;
  --ink:#182b50;
  --muted:#62738c;
  --line:#e5ebf3;
  --line-soft:#eff3f8;
  --surface:#fff;
  --coral:#e5674f;
  --tint:#edf4ff;
  --shadow:0 6px 24px #1736650d;
  font-family:'Noto Sans KR',Arial,sans-serif;
  color:var(--ink);
  background:#f8fbff;
  font-synthesis:none;
}

* { box-sizing:border-box; }
html { scrollbar-gutter:stable; scroll-behavior:smooth; }
body { margin:0; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; padding:0; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
h1,h2,h3,p,ul,ol,dl,dd,figure { margin:0; }
ul,ol { padding:0; list-style:none; }
h1,h2,h3 { overflow-wrap:break-word; }
svg { flex-shrink:0; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid #427bf6; outline-offset:3px; }

.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.page-width { width:calc(100% - 80px); max-width:1560px; margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:15px; background:#fff; border:2px solid var(--blue); border-radius:24px; padding:10px 18px; z-index:50; transform:translateY(-200%); }
.skip-link:focus { transform:none; }

/* ----------------------------------------------------- live strip + header */
.live-strip { background:linear-gradient(90deg,#eaf3ff,#f3f8ff); border-bottom:1px solid #dfeafa; font-size:13px; color:#4a628a; }
.live-strip-inner { display:flex; align-items:center; gap:18px; min-height:34px; white-space:nowrap; }
.live-date { font-weight:600; color:#23407a; }
.live-strip b { font-weight:600; color:#23407a; font-variant-numeric:tabular-nums; }
.live-stat { display:inline-flex; align-items:center; gap:6px; }
.live-weather { margin-left:auto; }
.live-stat .icon { width:16px; height:16px; color:#f0a020; }

.site-header { background:#fff; border-bottom:1px solid #edf1f7; position:sticky; top:0; z-index:30; }
.header-inner { display:flex; align-items:center; gap:30px; height:80px; }
.brand { flex:0 0 150px; }
.brand img { width:150px; height:72px; object-fit:contain; }
.primary-nav { display:flex; align-self:stretch; align-items:stretch; gap:26px; white-space:nowrap; }
.nav-link { display:flex; align-items:center; font-size:15px; font-weight:500; position:relative; color:#425572; }
.nav-link.is-active { color:var(--blue); font-weight:700; }
.nav-link > span { position:relative; }
.nav-link.is-active > span::after { content:''; position:absolute; bottom:-7px; left:0; right:0; height:2px; border-radius:2px; background:var(--blue); }
.nav-link:hover { color:var(--blue); }
.header-utilities { margin-left:auto; display:flex; gap:16px; align-items:center; }
.search-form { display:flex; align-items:center; width:220px; border:1px solid #edf1f7; border-radius:24px; background:#f4f7fb; height:40px; transition:border-color 160ms,background-color 160ms; }
.search-form:focus-within { border-color:#9dbcf9; background:#fff; }
.search-form input { min-width:0; width:100%; padding:9px 0 9px 16px; background:none; border:0; outline:0; border-radius:24px; color:var(--ink); font-size:13px; }
.search-form input::placeholder { color:var(--muted); opacity:1; }
.search-form button { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; color:#627596; border-radius:50%; }
.search-form .icon { width:18px; height:18px; }
.language-switch { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; }
.language-switch a { padding:12px 0; color:var(--muted); }
.language-switch a[aria-current] { color:var(--blue); }
.language-switch span { height:11px; width:1px; background:#dbe3ef; }
.header-login { display:inline-flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; padding:10px 0; color:var(--ink); }
.header-login:hover { color:var(--blue); }
.header-user { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; white-space:nowrap; }
.logout-form { display:flex; }
.count-badge { background:var(--coral); color:#fff; border-radius:9px; font-size:13px; padding:0 6px; line-height:16px; font-weight:700; }

.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:10px 23px; border:1px solid transparent; border-radius:24px; font-size:14px; font-weight:600; line-height:1.5; transition:background-color 160ms,box-shadow 160ms,border-color 160ms; text-align:center; white-space:nowrap; }
.button .icon { width:16px; height:16px; }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 3px 8px color-mix(in srgb, var(--blue) 7%, transparent); }
.button-primary:hover { background:var(--blue-dark); box-shadow:0 4px 12px color-mix(in srgb, var(--blue) 16%, transparent); }
.button-outline,.button-secondary { color:var(--blue-dark); border-color:#739cf8; background:#ffffffcc; }
.button-outline:hover,.button-secondary:hover { background:#edf4ff; }
.button-danger { color:#c2413a; border-color:#f0b9b4; background:#fff; }
.button-danger:hover { background:#fff3f1; }
.button-small { font-size:13px; padding:8px 15px; min-height:38px; }
.header-signup { font-size:13px; min-height:40px; padding:9px 20px; }
.text-button { font-size:13px; color:var(--muted); }
.text-button:hover { color:#c2413a; text-decoration:underline; }

/* --------------------------------------------------------------- ticker */
.ticker { background:#fff; border-bottom:1px solid #edf1f7; font-size:15px; }
.ticker-inner { display:flex; align-items:center; gap:14px; min-height:44px; }
.ticker-label { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:#eaf2ff; color:#1d5ace; font-size:13px; font-weight:700; padding:3px 11px; border-radius:20px; }
.ticker-label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--coral); animation:pulse 1.8s ease-in-out infinite; }
.ticker-list { flex:1; min-width:0; }
.ticker-list li { display:flex; align-items:baseline; gap:10px; min-width:0; animation:ticker-in 320ms ease-out; }
.ticker-list a { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticker-list a:hover { color:var(--blue-dark); }
.ticker-list span { flex-shrink:0; font-size:13px; color:var(--muted); }
.ticker-controls { display:flex; gap:4px; flex-shrink:0; }
.ticker-controls button { width:28px; height:28px; display:grid; place-items:center; color:var(--muted); border-radius:50%; background:#f4f7fb; }
.ticker-controls button:hover { color:var(--blue-dark); background:#e8f0fe; }
.ticker-controls .icon { width:14px; height:14px; }
@keyframes ticker-in { from { opacity:0; transform:translateY(6px); } }
@keyframes pulse { 50% { opacity:.35; } }

/* ----------------------------------------------------------------- hero */
/* Home opens with the full Vegas skyline. Every other page gets a slim section
   header in its own tone: same structure everywhere, a different look per section. */
.hero { --tone:var(--blue); --tint:#5d9bff; --wash:#eef6ff; position:relative; isolation:isolate; overflow:hidden; }
.hero[data-tone="amber"] { --tone:#c25a1c; --tint:#ffb36b; --wash:#fff5ec; }
.hero[data-tone="indigo"] { --tone:#4a5bd4; --tint:#8794ff; --wash:#f0f2ff; }
.hero[data-tone="green"] { --tone:#2f8a4e; --tint:#74d48f; --wash:#eefaf1; }
.hero[data-tone="mint"] { --tone:#178a72; --tint:#52d3b0; --wash:#ebfaf5; }
.hero[data-tone="sand"] { --tone:#a9711a; --tint:#ffc766; --wash:#fff8e9; }
.hero[data-tone="peach"] { --tone:#d05c3b; --tint:#ff9d7d; --wash:#fff3ed; }
.hero[data-tone="teal"] { --tone:#127d8e; --tint:#4cc6d8; --wash:#e9f8fa; }
.hero[data-tone="violet"] { --tone:#7c4fd6; --tint:#b391ff; --wash:#f5f0ff; }
.hero[data-tone="pink"] { --tone:#d2447a; --tint:#ff8db5; --wash:#fff0f6; }

/* Original Vegastina neighborhood artwork is branding, not news imagery. */
.hero[data-art="full"] { min-height:310px; background:#d2edff url('/static/images/vegastina-neighborhood-v1.webp') center 58%/cover no-repeat; border-bottom:1px solid #dceefc; }
.hero[data-art="full"]::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#f4fafff2 0%,#edf8ffe6 25%,#edf8ff9e 38%,#edf8ff00 61%); }
.hero[data-art="full"] .hero-inner { min-height:inherit; padding-block:26px; display:flex; align-items:center; }
.hero[data-art="full"] .hero-content { padding-left:22px; width:520px; max-width:55%; }
.hero-eyebrow { display:inline-block; font-size:13px; font-weight:500; line-height:1.5; background:#d4e9ff; border:1px solid #c6e1ff; color:#1f5ec7; padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:800; letter-spacing:-1.4px; line-height:1.35; color:#142751; word-break:keep-all; }
.hero-text { font-size:17px; color:#33496d; line-height:1.75; max-width:420px; margin-top:12px; word-break:keep-all; overflow-wrap:anywhere; }
.hero-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hero[data-art="full"] .hero-actions { margin-top:20px; }
.hero[data-art="full"] .hero-actions .button { padding-inline:24px; min-height:44px; }
.hero[data-art="full"] .button-outline { background:#ffffffce; }

/* Section header: tone wash, emblem, title, and the section's art fading in on the right. */
.hero-slim { background:var(--wash); border-bottom:1px solid color-mix(in srgb,var(--tone) 13%,#fff); }
.hero-slim::after { content:''; position:absolute; inset:0 0 0 auto; width:min(48%,760px); z-index:-1; opacity:.8; background:linear-gradient(var(--tint),var(--tint)),url('/static/images/hero-back.png'); background-blend-mode:color,normal; background-size:cover; background-position:88% 78%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70%); mask-image:linear-gradient(90deg,transparent 0,#000 70%); }
.hero-slim[data-art="dusk"]::after { background:url('/static/images/editorial-vegas.png') center 64%/cover; }
.hero-slim[data-art="cafe"]::after { background:url('/static/images/editorial-community.png') center 34%/cover; }
.hero-slim[data-art="table"]::after { background:url('/static/images/vegastina-food-v1.webp') center 52%/cover; }
.hero-slim .hero-inner { display:flex; align-items:center; gap:16px; min-height:104px; padding-block:18px; }
.hero-slim .hero-content { min-width:0; flex:1; }
.hero-emblem { flex-shrink:0; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:var(--tone); background:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--tone) 20%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--tone) 14%,#fff); }
.hero-emblem .icon { width:25px; height:25px; stroke-width:2; fill:color-mix(in srgb,var(--tone) 10%,transparent); }
.hero-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:25px; font-weight:800; letter-spacing:-.9px; line-height:1.35; color:#142751; word-break:keep-all; }
.hero-title > span:first-child { min-width:0; overflow-wrap:anywhere; }
.hero-slim .hero-eyebrow { margin:0; font-weight:600; letter-spacing:0; background:color-mix(in srgb,var(--tone) 11%,#fff); border-color:color-mix(in srgb,var(--tone) 20%,#fff); color:var(--tone); padding:2px 10px; }
.hero-slim .hero-text { font-size:14px; line-height:1.6; margin-top:3px; max-width:620px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-slim .hero-actions { flex-shrink:0; flex-wrap:nowrap; }
.hero-slim .hero-actions .button { min-height:40px; padding:8px 18px; font-size:13px; }
.hero-slim .button-primary { background:var(--tone); box-shadow:0 6px 16px color-mix(in srgb,var(--tone) 24%,transparent); }
.hero-slim .button-primary:hover { background:color-mix(in srgb,var(--tone) 86%,#000); }
.hero-slim .button-outline { color:var(--tone); border-color:color-mix(in srgb,var(--tone) 36%,#fff); background:#ffffffe6; }
.hero-slim .button-outline:hover { background:color-mix(in srgb,var(--tone) 8%,#fff); }

.flash-stack { padding-top:20px; display:grid; gap:8px; }
.flash { padding:12px 18px; border-radius:14px; font-size:14px; font-weight:500; border:1px solid #cfe0fd; background:var(--tint); color:#1b4aa8; }
.flash-success { border-color:#c4ead6; background:#eefaf3; color:#1b6a43; }
.flash-error { border-color:#f4cdc8; background:#fff4f2; color:#b03a31; }

/* --------------------------------------------------------------- layout */
.page-layout { display:grid; grid-template-columns:176px minmax(0,1fr) 288px; gap:26px; padding-top:28px; padding-bottom:40px; align-items:start; }
.panel,.box { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 6px #21385b05; }
.main-column { min-width:0; display:flex; flex-direction:column; gap:32px; }
.sidebar { display:flex; flex-direction:column; gap:19px; min-width:0; }

.category-rail { padding:15px 9px 10px; position:sticky; top:96px; scrollbar-width:none; }
.category-rail::-webkit-scrollbar { display:none; }
.rail-label { display:block; font-size:13px; letter-spacing:1.2px; font-weight:600; color:var(--muted); padding:0 12px 11px; }
.rail-link { display:flex; align-items:center; gap:12px; min-height:42px; border-radius:10px; padding:8px 12px; font-size:15px; color:#34496a; transition:color 160ms,background-color 160ms; }
.rail-link .icon { width:19px; height:19px; color:#7286a5; }
.rail-link + .rail-link { margin-top:8px; }
.rail-link.is-active { background:#edf4ff; color:var(--blue-dark); font-weight:700; }
.rail-link.is-active .icon { color:var(--blue); fill:color-mix(in srgb, var(--blue) 5%, transparent); }
.rail-link:hover { color:var(--blue-dark); background:#f1f6ff; }
.rail-member-lock { display:flex; margin-left:auto; color:#7b8ba3; }
.rail-link .rail-member-lock .icon { width:13px; height:13px; }
.rail-link:has(.rail-member-lock) > .icon { color:#c96688; }
.rail-notice { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); padding:14px 12px 5px; border-top:1px solid var(--line); margin-top:10px; }
.rail-notice:hover { color:var(--blue-dark); }
.rail-notice .icon { width:17px; height:17px; }

.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 16px; }
.section-heading h1,.section-heading h2 { font-size:23px; line-height:1.4; letter-spacing:-.6px; font-weight:800; }
.more-link { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); white-space:nowrap; padding:5px 0; }
.more-link .icon { width:15px; height:15px; }
.more-link:hover { color:var(--blue); }
.auto-note { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); }
.auto-note .icon { width:14px; height:14px; }

/* ----------------------------------------------------------------- news */
.news-badge { display:inline-block; border-radius:7px; font-size:13px; line-height:20px; font-weight:600; padding:1px 9px; color:#1d5ace; background:#eaf2ff; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-badge.mint,.board-chip.tone-mint { background:#e4f5ef; color:#237566; }
.news-badge.peach,.board-chip.tone-peach { background:#fff0e7; color:#9a562b; }
.news-badge.lilac,.board-chip.tone-lilac { background:#f1ecff; color:#6b43b5; }
.news-badge.sand,.board-chip.tone-sand { background:#fff4dc; color:#8a611a; }
.board-chip.tone-teal { background:#e2f4f6; color:#196f7c; }
.board-chip.tone-rose { background:#fdebf1; color:#a63d64; }

.top-stories { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; }
/* The list shares the lead card's height, so its rows split that height evenly. */
.top-stories .story-list { display:flex; flex-direction:column; }
.top-stories .story-row { flex:1; }
.lead-story { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.lead-story img { width:100%; flex:1 1 210px; min-height:180px; height:0; object-fit:cover; }
.lead-story::after { display:none; }
.lead-story:hover img { transform:none; }
.lead-copy { padding:22px; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.lead-summary { font-size:15px; line-height:1.75; color:#33496d; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lead-foot { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; width:100%; margin-top:auto; padding-top:6px; }
.lead-foot .reading-label { color:var(--blue-dark); font-weight:600; }
.lead-copy strong { font-size:25px; font-weight:800; line-height:1.4; letter-spacing:-.8px; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lead-copy .story-meta,.lead-copy .story-source { color:var(--muted); }
.lead-copy .news-badge { background:#ffffffeb; }

.story-list { padding:6px 20px; }
.story-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.story-row:last-child { border-bottom:0; }
.story-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.story-row strong { font-size:16px; font-weight:600; line-height:1.55; letter-spacing:-.3px; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color 160ms; }
.story-row:hover strong,.news-card:hover h3 { color:var(--blue-dark); }
.story-summary { font-size:14px; line-height:1.7; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.story-meta { font-size:13px; color:#5f6e86; display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.story-source { font-weight:600; color:#536685; }
.story-source.is-ours { color:var(--blue-dark); }
.has-comments { display:inline-flex; align-items:center; gap:3px; color:var(--coral); font-weight:600; }
.has-comments .icon,.story-meta .icon { width:13px; height:13px; }
.story-thumb { flex:0 0 84px; height:64px; border-radius:10px; overflow:hidden; background:#e6eef9; }
.story-thumb img { width:100%; height:100%; object-fit:cover; }
.story-list.two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; }
.story-list.two-column .story-row:nth-last-child(-n+2) { border-bottom:0; }
.story-list-large .story-row { padding:18px 0; gap:20px; }
.story-list-large .story-row strong { font-size:17px; font-weight:700; }
.story-list-large .story-thumb { flex-basis:150px; height:98px; border-radius:12px; }

.news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.news-grid-top { margin-bottom:18px; }
.news-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; min-width:0; overflow:hidden; box-shadow:0 3px 9px #17366504; transition:box-shadow 200ms,border-color 200ms,transform 200ms; }
.news-card:hover { box-shadow:0 12px 28px #17366514; border-color:#c9d9f3; }
.news-image { position:relative; background:#dfedfa; height:132px; }
.news-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-image .news-badge { position:absolute; bottom:-11px; left:14px; border:2px solid #fff; max-width:calc(100% - 28px); }
.news-copy { padding:22px 16px 15px; flex:1; display:flex; flex-direction:column; gap:6px; }
.news-copy h3 { font-size:17px; line-height:1.5; font-weight:700; letter-spacing:-.35px; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color 160ms; }
.news-copy p { color:var(--muted); font-size:14px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-copy .story-meta { margin-top:auto; padding-top:8px; }
.news-waiting { display:flex; align-items:center; gap:12px; padding:26px; color:var(--muted); }
.lead-story.is-text-only { background:radial-gradient(circle at 100% 100%,#dce9ff 0,#dce9ff00 46%),linear-gradient(155deg,#edf4ff 0%,#fff 62%); border:1px solid #dbe6f7; align-items:stretch; }
.lead-story.is-text-only::after { display:none; }
.lead-story.is-text-only .lead-copy { position:static; flex:1; color:var(--ink); padding:32px; gap:14px; }
.lead-story.is-text-only .lead-copy strong { font-size:30px; line-height:1.36; letter-spacing:-1.1px; -webkit-line-clamp:4; }
.lead-story.is-text-only .lead-summary { font-size:15px; -webkit-line-clamp:5; }
.lead-story.is-text-only .news-badge { background:#fff; }
.lead-story.is-text-only .story-meta,.lead-story.is-text-only .story-source { color:var(--muted); }
.news-card.is-text-only { display:flex; }
.news-card.is-text-only .news-copy { padding:22px; }
.news-photo { float:right; width:36%; max-width:260px; margin:24px 0 18px 24px; }
.news-photo figcaption { color:var(--muted); font-size:13px; padding:8px 0; }
.news-photo .story-image { margin-bottom:0; }

/* Real local businesses; the food illustration belongs to the category only. */
.food-section h2 { scroll-margin-top:100px; }
.food-preview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); overflow:hidden; }
.food-preview-art { position:relative; display:block; min-height:260px; }
.food-preview-art img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.food-preview-art > span { position:absolute; left:12px; bottom:12px; padding:3px 8px; background:#fffef0e8; color:#625143; font-size:13px; border-radius:5px; }
.food-preview-list { padding:20px 24px; }
.food-intro { font-size:13px; line-height:1.7; color:var(--muted); margin:0 0 8px; }
.place-preview { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.place-preview:last-child { border:0; }
.place-preview strong { display:block; font-size:15px; }
.place-preview small { display:block; color:var(--muted); margin-top:3px; font-size:13px; }
.place-preview > .icon { width:16px; color:var(--muted); }
.place-preview:hover strong { color:var(--blue-dark); }
.food-directory-note { color:var(--muted); margin:0 0 20px; font-size:14px; }
.restaurant-list { display:grid; gap:18px; }
.restaurant-card { padding:26px; scroll-margin-top:110px; }
.restaurant-heading { display:flex; align-items:center; gap:16px; }
.restaurant-symbol { width:48px; height:48px; display:grid; place-items:center; flex-shrink:0; border-radius:14px; color:#b26640; background:#fff1e8; }
.restaurant-area { color:#93694e; font-size:13px; margin:0 0 3px; letter-spacing:.3px; }
.restaurant-heading h2 { font-size:23px; line-height:1.4; margin:0; }
.restaurant-english { color:var(--muted); font-size:13px; }
.restaurant-description { margin:20px 0 10px; font-size:14px; color:#425574; }
.restaurant-card address { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; font-style:normal; }
.restaurant-card address .icon { width:16px; flex-shrink:0; }
.restaurant-actions { display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.restaurant-actions .text-button { display:inline-flex; gap:5px; align-items:center; color:var(--blue-dark); }
.restaurant-verified { margin:18px 0 0; font-size:13px; color:var(--muted); }
.restaurant-verified a { text-decoration:underline; text-underline-offset:3px; }
.food-community-link { margin:24px 0 0; font-size:13px; color:var(--muted); }
.food-community-link a { color:var(--blue-dark); display:inline-flex; align-items:center; gap:3px; }
@media(max-width:650px) {
  .hero-slim[data-art="table"]::after { opacity:.24; }
  .food-preview { grid-template-columns:1fr; }
  .food-preview-art { min-height:180px; }
  .food-preview-list { padding:18px 20px; }
  .restaurant-card { padding:22px 18px; }
  .restaurant-heading h2 { font-size:21px; }
  .restaurant-actions { gap:16px; }
  .lead-story.is-text-only { min-height:200px; }
}

/* ------------------------------------------------------------ community */
.forum-section { scroll-margin-top:100px; }
.forum-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.forum-tile { min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; border:1px solid transparent; border-radius:12px; font-size:13px; font-weight:600; text-align:center; padding:13px 5px; transition:border-color 160ms,box-shadow 160ms; }
.forum-tile:hover { border-color:#adc8f8; box-shadow:0 6px 16px #1736650d; }
.forum-tile .icon { width:23px; height:23px; stroke-width:2; }
.forum-tile.blue,.board-box.blue .board-icon { background:#edf4ff; } .forum-tile.blue .icon,.board-box.blue .board-icon { color:#3375ef; }
.forum-tile.peach,.board-box.peach .board-icon { background:#fff1ed; } .forum-tile.peach .icon,.board-box.peach .board-icon { color:#e77763; }
.forum-tile.mint,.board-box.mint .board-icon { background:#edf8f4; } .forum-tile.mint .icon,.board-box.mint .board-icon { color:#28a387; }
.forum-tile.lilac,.board-box.lilac .board-icon { background:#f3efff; } .forum-tile.lilac .icon,.board-box.lilac .board-icon { color:#9462e3; }
.forum-tile.sand,.board-box.sand .board-icon { background:#fff6e6; } .forum-tile.sand .icon,.board-box.sand .board-icon { color:#b88231; }
.board-box.teal .board-icon { background:#e6f6f8; color:#1f8fa0; }
.board-box.rose .board-icon { background:#fdeef3; color:#cf5585; }

.conversation-panel { margin-top:20px; padding:18px 21px 6px; }
.conversation-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.conversation-heading h3 { font-size:16px; font-weight:700; }
.write-link { display:flex; align-items:center; gap:6px; color:var(--blue-dark); font-size:13px; font-weight:600; min-height:32px; }
.write-link .icon { width:15px; height:15px; }
.tabs-row { border-bottom:1px solid var(--line); margin-top:3px; }
.section-tabs { display:flex; gap:20px; }
.section-tabs button { font-size:13px; color:var(--muted); border-bottom:2px solid transparent; padding:8px 0; }
.section-tabs button[aria-selected=true] { border-color:var(--blue); color:var(--blue-dark); font-weight:600; }
.conversation-empty { display:flex; align-items:center; gap:12px; min-height:86px; padding:15px 0; color:var(--muted); font-size:13px; }
.conversation-empty .icon { color:#7899ca; width:23px; height:23px; }

.feed-item { position:relative; display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.feed-item:last-child { border-bottom:0; }
.feed-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.feed-top { display:flex; align-items:center; gap:7px; min-height:20px; flex-wrap:wrap; }
.feed-top:empty { display:none; }
.feed-title { font-size:17px; font-weight:700; line-height:1.5; letter-spacing:-.35px; min-width:0; }
.feed-title a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 160ms; }
.feed-title a::after { content:''; position:absolute; inset:0; }
.feed-item:hover .feed-title a { color:var(--blue-dark); }
.feed-excerpt { font-size:14px; line-height:1.65; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-meta { font-size:13px; color:#5f6e86; }
.feed-stats { display:flex; gap:12px; flex-shrink:0; font-size:13px; color:#5f6e86; font-variant-numeric:tabular-nums; }
.feed-stats span { display:inline-flex; align-items:center; gap:4px; }
.feed-stats .icon { width:14px; height:14px; }
.feed-thumb { flex:0 0 76px; width:76px; height:76px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.feed-compact .feed-item { padding:12px 0; }
.feed-compact .feed-title { font-size:15px; font-weight:600; }
.feed-compact .feed-meta { margin-left:2px; }
.is-pinned .feed-main { flex-direction:row; align-items:center; gap:10px; }
.is-pinned .feed-title { font-size:14px; }
.board-chip { position:relative; z-index:1; flex-shrink:0; font-size:13px; font-weight:600; color:#1d5ace; background:#eaf2ff; border-radius:7px; padding:1px 8px; line-height:20px; white-space:nowrap; }
a.board-chip:hover { filter:brightness(.96); }
.pin-badge { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:13px; font-weight:700; color:#b14a36; background:#fff0ea; border-radius:7px; padding:1px 8px; line-height:20px; }
.pin-badge .icon { width:12px; height:12px; }
.new-badge { font-size:13px; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--coral); border-radius:6px; padding:2px 6px; line-height:1.3; }
.comment-count { flex-shrink:0; font-size:13px; font-weight:700; color:var(--coral); background:#fff0ea; border-radius:9px; padding:0 7px; line-height:18px; margin-left:8px; }
.author { font-weight:600; color:#4c5d78; }
.author-badge { font-size:13px; font-weight:700; color:#fff; background:var(--blue); border-radius:5px; padding:1px 5px; margin-left:5px; vertical-align:1px; }
.author-badge.sample { background:#a3afc2; }
.author-badge.writer { background:#eaf2ff; color:var(--blue-dark); }
.feed-ad { padding:14px 0; border-bottom:1px solid var(--line-soft); }
.feed-ad a { position:relative; display:block; aspect-ratio:4/1; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.feed-ad img { width:100%; height:100%; object-fit:cover; }
.ad-tag { position:absolute; top:8px; right:8px; font-size:13px; font-weight:600; color:#fff; background:#182b50a6; border-radius:10px; padding:1px 8px; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.box-empty { padding:22px 16px; font-size:13px; color:var(--muted); text-align:center; }
.box-empty a { color:var(--blue-dark); font-weight:600; }

.board-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.board-box { padding:16px 18px 12px; transition:box-shadow 200ms,border-color 200ms; }
.board-box:hover { box-shadow:0 10px 24px #1736650f; border-color:#d3e0f5; }
.board-box h3 a { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; }
.board-box h3 a > .icon { width:15px; height:15px; margin-left:auto; color:#9aa8bf; }
.board-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.board-icon .icon { width:18px; height:18px; stroke-width:2; }
.board-box ul { margin-top:10px; }
.board-box li { display:flex; align-items:center; padding:7px 0; font-size:14px; min-width:0; color:#3f506c; }
.board-box li a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-box li a:hover { color:var(--blue-dark); }

/* -------------------------------------------------------------- sidebar */
.welcome-panel { text-align:center; padding:0 20px 20px; overflow:hidden; position:relative; background:linear-gradient(#edf5ff 0%,#fff 62%); }
.member-art { height:125px; position:relative; display:flex; justify-content:center; align-items:center; margin-bottom:2px; }
.member-art img { width:195px; height:130px; object-fit:contain; max-width:none; }
.welcome-spark { position:absolute; color:#74a5f6; }
.spark-one { left:25px; top:29px; font-size:22px; transform:rotate(14deg); }
.spark-two { right:25px; bottom:22px; font-size:27px; transform:rotate(-12deg); }
.welcome-panel h2 { font-size:18px; letter-spacing:-.5px; overflow:hidden; text-overflow:ellipsis; }
.welcome-panel p { font-size:14px; color:var(--muted); margin-top:5px; line-height:1.7; }
.member-actions { display:flex; gap:8px; margin-top:17px; }
.member-actions .button { flex:1; min-width:0; min-height:42px; padding:9px 10px; font-size:14px; }
.membership-link { display:inline-flex; justify-content:center; align-items:center; gap:6px; color:var(--blue-dark); font-size:13px; margin-top:14px; padding:3px 0; }
.membership-link .icon { width:14px; height:14px; }
.avatar { width:40px; height:40px; flex-shrink:0; display:inline-grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#5b8ff9,var(--blue)); color:#fff; font-weight:700; font-size:16px; }
.avatar-small { width:26px; height:26px; font-size:13px; }

.panel-title { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 0; }
.panel-title h2 { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:700; letter-spacing:-.3px; }
.panel-title h2 .icon { width:17px; height:17px; color:var(--coral); }
.panel-title > span { font-size:13px; color:var(--muted); }

.weather-panel { overflow:hidden; }
.weather-now { position:relative; isolation:isolate; padding:16px 18px 18px; background:#cfe8ff url('/static/images/hero-back.png') 88% 100%/auto 170%; }
.weather-now::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#f2f9fff5 0,#f2f9ffd6 50%,#f2f9ff33 100%); }
.weather-now h2 { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:#2f558f; }
.weather-now h2 .icon { width:14px; height:14px; }
.weather-current { display:flex; align-items:center; gap:11px; margin-top:9px; }
.weather-icon .icon { width:44px; height:44px; color:#f3a11d; stroke-width:1.6; }
.weather-temp { display:flex; flex-direction:column; line-height:1.1; }
.weather-temp strong { font-size:38px; font-weight:800; letter-spacing:-1.6px; }
.weather-temp span { font-size:13px; color:#4a6390; margin-top:3px; }
.weather-label { display:flex; flex-direction:column; margin-left:4px; line-height:1.5; }
.weather-label strong { font-size:14px; }
.weather-label span { font-size:13px; color:#4a6390; }
.weather-facts { display:grid; grid-template-columns:repeat(3,1fr); padding:12px 8px 4px; }
.weather-facts div { display:flex; flex-direction:column; align-items:center; gap:1px; font-size:13px; text-align:center; }
.weather-facts dt { display:flex; align-items:center; gap:4px; color:var(--muted); white-space:nowrap; }
.weather-facts dt .icon { width:13px; height:13px; }
.weather-facts dd { font-weight:700; font-size:14px; }
.weather-facts .aqi-row { grid-column:1/-1; flex-direction:row; justify-content:center; gap:8px; margin:10px 10px 0; padding:7px 12px; border-radius:20px; background:#f4f8fd; }
.aqi-row dd { font-size:13px; }
.aqi-good { color:#1a8a54; } .aqi-moderate { color:#a66c00; } .aqi-sensitive { color:#c65a10; }
.aqi-unhealthy,.aqi-very,.aqi-hazard { color:#c2413a; }
.forecast { display:grid; grid-template-columns:repeat(5,1fr); padding:14px 8px 10px; text-align:center; border-top:1px solid var(--line-soft); margin-top:12px; }
.forecast li { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:13px; }
.forecast li > span:first-child { color:var(--muted); font-weight:500; }
.forecast .icon { width:22px; height:22px; color:#6d8fca; }
.forecast strong { font-size:13px; }
.forecast em { font-style:normal; color:#5f6e86; font-size:13px; }
.widget-note { font-size:13px; color:#5f6e86; text-align:center; padding:0 13px 12px; }

.fx-rate { display:flex; align-items:baseline; gap:8px; padding:10px 18px 0; }
.fx-rate span { font-size:13px; color:var(--muted); }
.fx-rate strong { font-size:24px; font-weight:800; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.fx-rate em { font-style:normal; font-size:13px; font-weight:700; margin-left:auto; }
.fx-rate em.up { color:var(--coral); } .fx-rate em.down { color:var(--blue); }
.fx-converter { display:flex; align-items:center; gap:7px; padding:12px 18px 18px; color:#5f6e86; }
.fx-converter .icon { width:15px; height:15px; }
.fx-converter label { flex:1; min-width:0; display:flex; align-items:center; border:1px solid var(--line); border-radius:20px; background:#f4f7fb; transition:border-color 160ms,background-color 160ms; }
.fx-converter label:focus-within { border-color:#9dbcf9; background:#fff; }
.fx-converter span { font-size:13px; font-weight:700; color:var(--muted); padding-left:12px; }
.fx-converter input { width:100%; min-width:0; border:0; background:none; outline:0; padding:8px 12px 8px 5px; font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

.ranking { counter-reset:rank; padding:8px 8px 10px; }
.ranking li { counter-increment:rank; }
.ranking a { display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:14px; min-width:0; border-radius:10px; transition:background-color 160ms; }
.ranking a::before { content:counter(rank); flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:7px; font-size:13px; font-weight:700; color:#6d7f9c; background:#f1f4f9; }
.ranking li:nth-child(-n+3) a::before { color:#fff; background:var(--blue); }
.ranking a:hover { background:#f4f8ff; }
.ranking-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.ranking .comment-count { margin-left:auto; }

.advertisement { min-width:0; }
.ad-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); padding:0 3px 8px; }
.ad-label span:last-child { font-size:13px; letter-spacing:1.5px; }
.ad-slot { background:#f1f5fb; border:1px dashed #cad8ec; border-radius:14px; min-height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:20px 12px; }
.ad-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#e4edf9; color:#6887b4; margin-bottom:12px; }
.ad-icon .icon { width:25px; height:25px; }
.ad-slot h2 { font-size:15px; font-weight:600; }
.ad-slot p { font-size:13px; color:var(--muted); margin-top:5px; max-width:220px; }
.ad-manager-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--blue-dark); font-size:13px; font-weight:600; margin-top:15px; }
.ad-manager-link .icon { width:14px; height:14px; }
.sidebar-ad { position:relative; display:block; aspect-ratio:6/5; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.sidebar-ad img { width:100%; height:100%; object-fit:cover; }
.notice-panel ul { padding:8px 18px 14px; }
.notice-panel li a { display:block; padding:6px 0; font-size:14px; color:#3f506c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice-panel li a:hover { color:var(--blue-dark); }
.sidebar-footnote { display:flex; justify-content:center; align-items:flex-start; gap:7px; color:var(--muted); font-size:13px; line-height:1.8; }
.sidebar-footnote .icon { width:14px; height:14px; margin-top:3px; }
.sidebar-footnote strong { font-weight:400; }

/* ----------------------------------------------------- boards and posts */
.results-panel { padding:24px 26px 22px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.panel-heading h1,.panel-heading h2 { font-size:21px; letter-spacing:-.5px; font-weight:800; }
.board-nav { display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line); margin:16px 0 4px; padding:0 0 12px; overflow-x:auto; scrollbar-width:none; }
.board-nav::-webkit-scrollbar { display:none; }
.news-tabs { margin-top:0; margin-bottom:18px; }
.board-nav a { white-space:nowrap; font-size:13px; color:var(--muted); padding:6px 13px; border-radius:20px; transition:background-color 160ms,color 160ms; }
.board-nav a:hover { background:#f4f8ff; color:var(--blue-dark); }
.board-nav a[aria-current] { background:#edf4ff; color:var(--blue-dark); font-weight:600; }
.board-footer { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px; }
.board-search { display:flex; align-items:center; width:240px; border:1px solid #edf1f7; border-radius:24px; background:#f4f7fb; height:38px; }
.board-search:focus-within { border-color:#9dbcf9; background:#fff; }
.board-search input { flex:1; min-width:0; border:0; background:none; outline:0; padding:0 0 0 16px; font-size:13px; }
.board-search button { width:38px; height:36px; display:grid; place-items:center; color:#627596; }
.board-search .icon { width:17px; height:17px; }
.pagination { display:flex; justify-content:center; gap:5px; margin:30px auto 6px; }
.pagination a { min-width:36px; height:36px; display:grid; place-items:center; padding:0 6px; font-size:13px; font-weight:500; border-radius:50%; color:#4c5d78; transition:background-color 160ms; }
.pagination a:hover { background:#edf4ff; color:var(--blue-dark); }
.pagination a[aria-current] { background:var(--blue); color:#fff; font-weight:700; }
.pagination .icon { width:15px; height:15px; }

.empty-state { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:50px 20px; min-height:300px; gap:4px; }
.empty-state-icon { width:58px; height:58px; display:grid; place-items:center; background:#eff5ff; border-radius:18px; color:#6a8fcc; margin-bottom:17px; }
.empty-state-icon .icon { width:27px; height:27px; }
.empty-state h1,.empty-state h2 { font-size:19px; }
.empty-state p { font-size:14px; color:var(--muted); max-width:370px; margin:4px 0; }
.empty-state .button { margin-top:14px; }
.empty-state > img { width:150px; height:100px; object-fit:contain; }
.search-query { overflow-wrap:anywhere; max-width:100%!important; }

.post-view { padding:30px 34px 24px; }
.post-header { border-bottom:1px solid var(--line); padding-bottom:18px; }
.post-header h1 { font-size:26px; font-weight:800; letter-spacing:-.9px; line-height:1.4; margin-top:12px; word-break:keep-all; }
.post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin-top:14px; font-size:13px; color:#5f6e86; }
.post-meta span { display:inline-flex; align-items:center; gap:4px; }
.post-meta .avatar { color:#fff; margin-right:-6px; }
.post-meta .icon { width:14px; height:14px; }
.post-body { padding:26px 0 8px; font-size:16px; line-height:1.9; color:#22345a; white-space:pre-wrap; overflow-wrap:anywhere; min-height:120px; }
.post-body a,.comment-body a { color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; }
.post-image { margin:14px 0 8px; max-height:720px; border-radius:14px; border:1px solid var(--line); }
.post-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); scroll-margin-top:110px; }
.like-button { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border:1px solid #f3c5d3; border-radius:24px; color:#c9446f; font-size:14px; font-weight:600; background:#fff; transition:background-color 160ms; }
.like-button:hover { background:#fff3f7; }
.like-button .icon { width:17px; height:17px; }
.like-button.is-liked { background:#e8517f; border-color:#e8517f; color:#fff; }
.like-button.is-liked .icon { fill:#fff; }
.owner-actions { display:flex; gap:8px; margin-left:auto; }

.story-image { width:100%; max-height:180px; object-fit:contain; border-radius:10px; margin-top:0; background:#f4f7fb; }
.article-body { padding-top:24px; font-size:17px; line-height:1.9; color:#22345a; overflow-wrap:anywhere; }
.article-body p { margin:0 0 1.2em; }
.article-body h2,.article-body h3,.article-body h4 { margin:1.6em 0 .6em; line-height:1.5; }
.article-body ul,.article-body ol { padding-left:1.5em; margin:1em 0; }
.article-body a { color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; }
.article-body blockquote { margin:1.5em 0; padding-left:20px; border-left:3px solid var(--line); }
.article-body table { width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.9em; table-layout:fixed; }
.article-body td,.article-body th { border:1px solid var(--line); padding:10px; vertical-align:top; overflow-wrap:anywhere; }
.article-body caption,.article-body figcaption { color:var(--muted); font-size:13px; margin-bottom:10px; }
.reading-label { display:block; color:#247160; font-size:13px; font-weight:500; line-height:1.6; }
.content-kind { color:#8c603b; }
.syndication-credit { clear:both; border-top:1px solid var(--line); padding-top:18px; margin-top:28px; font-size:13px; line-height:1.8; color:var(--muted); }
.syndication-credit a { text-decoration:underline; text-underline-offset:3px; }
.syndication-credit > span { display:block; margin-top:4px; }
.story-lede { font-size:18px; line-height:1.85; color:#22345a; padding:26px 0 6px; word-break:keep-all; overflow-wrap:anywhere; }
.story-credit { clear:both; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:20px; padding:14px 18px; border-radius:14px; background:#f4f8fd; font-size:13px; color:var(--muted); }
.story-credit p { flex:1; min-width:200px; }
.story-credit .icon { width:14px; height:14px; }

.comments { padding:24px 34px 28px; scroll-margin-top:100px; }
.comments h2 { font-size:17px; font-weight:700; }
.comments h2 b { color:var(--blue); }
.comment-list { margin-top:8px; }
.comment-list li { position:relative; display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.comment-list li > .avatar { margin-top:2px; }
.comment-content { min-width:0; flex:1; }
.comment-meta { display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap; }
.comment-meta time { font-size:13px; color:#5f6e86; }
.comment-body { font-size:15px; line-height:1.75; color:#22345a; margin-top:3px; white-space:pre-wrap; overflow-wrap:anywhere; }
.comment-form { display:flex; gap:10px; align-items:flex-end; margin-top:20px; }
.comment-form textarea { flex:1; min-width:0; resize:vertical; min-height:80px; }
.login-prompt { margin-top:20px; padding:18px; text-align:center; font-size:14px; color:var(--muted); background:#f4f8fd; border-radius:14px; }
.login-prompt a { color:var(--blue-dark); font-weight:700; }
.post-neighbors { display:grid; overflow:hidden; }
.post-neighbors a { display:flex; align-items:center; gap:16px; padding:14px 22px; border-bottom:1px solid var(--line-soft); font-size:14px; min-width:0; transition:background-color 160ms; }
.post-neighbors a:hover { background:#f7faff; }
.post-neighbors a span { flex:0 0 64px; font-size:13px; color:var(--muted); }
.post-neighbors strong { min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-neighbors .back-to-list { justify-content:center; font-weight:600; color:var(--blue-dark); border-bottom:0; }

/* ---------------------------------------------------------------- forms */
.form-box { padding:30px 34px 32px; }
.form-box h1 { font-size:23px; font-weight:800; letter-spacing:-.6px; margin-bottom:20px; }
.form-intro { font-size:13px; color:var(--muted); margin:-12px 0 22px; }
.stacked-form { display:grid; gap:18px; }
.field { display:grid; gap:7px; min-width:0; }
.field > label:not(.check) { font-size:13px; font-weight:600; }
.optional { font-weight:400; color:var(--muted); }
.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea,.comment-form textarea { width:100%; padding:11px 14px; font-size:15px; line-height:1.6; color:var(--ink); border:1px solid #d9e2ef; border-radius:12px; background:#fff; transition:border-color 160ms,box-shadow 160ms; }
.field textarea { resize:vertical; min-height:240px; }
.field input:focus,.field select:focus,.field textarea:focus,.comment-form textarea:focus { outline:0; border-color:#7fa6f4; box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent); }
.field [aria-invalid=true] { border-color:#d8685e; }
.field input[type=file] { font-size:13px; }
.field-hint { font-size:13px; color:var(--muted); }
.field-error,.form-error { font-size:13px; color:#b03a31; font-weight:500; }
.form-error { background:#fff4f2; border:1px solid #f4cdc8; border-radius:12px; padding:11px 15px; margin-bottom:8px; }
.check { display:flex; align-items:flex-start; gap:8px; font-size:14px; font-weight:400; }
.check input { width:17px; height:17px; margin-top:3px; accent-color:var(--blue); flex-shrink:0; }
.check a { color:var(--blue-dark); text-decoration:underline; }
.current-image { display:flex; align-items:center; gap:14px; }
.current-image img { width:120px; height:80px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.form-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:6px; }

.auth-page { display:grid; place-items:start center; padding-top:44px; }
.auth-box { width:100%; max-width:440px; padding:26px 34px 32px; text-align:center; background:linear-gradient(#edf5ff 0%,#fff 32%); box-shadow:var(--shadow); }
.auth-box > img { width:150px; height:100px; object-fit:contain; margin:0 auto 4px; }
.auth-box h1 { font-size:23px; font-weight:800; letter-spacing:-.6px; }
.auth-intro { font-size:14px; color:var(--muted); margin:4px 0 22px; }
.auth-box form { text-align:left; }
.auth-box .button { width:100%; min-height:46px; font-size:15px; margin-top:4px; }
.auth-switch { margin-top:18px; font-size:14px; color:var(--muted); }
.auth-switch a { color:var(--blue-dark); font-weight:700; }
.auth-page .empty-state { width:100%; max-width:520px; }

/* --------------------------------------------------------------- dating */
.dating-panel { padding:27px 32px 30px; text-align:center; background:linear-gradient(160deg,#fff7fa,#fff 47%); }
.dating-labels { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; color:#8b4965; font-size:13px; }
.dating-labels span { border-radius:16px; background:#fbeaf1; padding:5px 10px; }
.dating-labels span:last-child { color:var(--muted); background:#fff; border:1px solid var(--line); }
.dating-symbol { width:88px; height:88px; border-radius:28px; margin:28px auto 20px; display:grid; place-items:center; position:relative; background:#fbe6ef; color:#bb507b; }
.dating-symbol > .icon { width:40px; height:40px; stroke-width:1.4; fill:#fff8fb; }
.dating-symbol > span { position:absolute; right:-9px; top:-13px; font-size:29px; color:#cf8eac; }
.dating-panel h1 { font-size:28px; line-height:1.5; letter-spacing:-.8px; word-break:keep-all; }
.dating-description { color:var(--muted); font-size:15px; line-height:1.8; max-width:430px; margin:11px auto 0; word-break:keep-all; }
.dating-launch { display:inline-block; color:#8b4965; font-size:13px; margin-top:14px; }
.dating-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:26px 0; margin-top:15px; }
.dating-features > div { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13px; color:#546984; }
.dating-features .icon { color:#b47792; width:23px; height:23px; }
.dating-gate { border-top:1px solid var(--line); padding-top:24px; }
.dating-lock { color:#7086aa; display:block; margin-bottom:8px; }
.dating-gate h2 { font-size:17px; }
.dating-gate p { color:var(--muted); font-size:13px; margin:7px auto 18px; max-width:380px; }

/* --------------------------------------------------------------- footer */
.site-footer { display:flex; gap:12px 20px; align-items:center; flex-wrap:wrap; padding:27px 0; margin-top:40px; border-top:1px solid var(--line); }
.footer-wordmark { font-family:'Nunito',sans-serif; font-size:23px; font-weight:1000; font-style:italic; color:var(--blue); }
.site-footer p { font-size:13px; color:var(--muted); }
.site-footer nav { display:flex; gap:20px; margin-left:auto; font-size:13px; color:var(--muted); }
.site-footer nav a:hover { color:var(--blue-dark); }
.footer-note { flex-basis:100%; color:#5f6e86!important; }

/* ----------------------------------------------------------- responsive */
@media (min-width:1600px) {
  .page-layout { grid-template-columns:216px minmax(0,1fr) 300px; gap:28px; }
  .rail-link { font-size:15px; }
  .hero[data-art="full"] { min-height:320px; }
  .hero h1 { font-size:40px; }
}
@media (max-width:1399px) {
  .page-width { width:calc(100% - 64px); }
  .header-inner { gap:22px; }
  .brand,.brand img { width:138px; flex-basis:138px; }
  .primary-nav { gap:20px; }
  .nav-link { font-size:14px; }
  .header-utilities { gap:12px; }
  .search-form { width:180px; }
  .page-layout { grid-template-columns:164px minmax(0,1fr) 264px; gap:22px; }
  .hero[data-art="full"] .hero-content { padding-left:12px; }
  .rail-link { padding-inline:10px; gap:9px; font-size:13px; }
  .lead-copy strong { font-size:22px; }
  .lead-story.is-text-only .lead-copy strong { font-size:26px; }
  .feed-stats span:nth-child(3) { display:none; }
}
@media (max-width:1199px) {
  .header-inner { height:auto; min-height:80px; flex-wrap:wrap; gap:0 24px; padding-top:4px; }
  .brand { margin-right:auto; }
  .header-utilities { order:2; margin-left:0; }
  .primary-nav { order:3; width:100%; justify-content:center; gap:40px; height:44px; }
  .page-layout { grid-template-columns:minmax(0,1fr) 264px; gap:24px; padding-top:22px; }
  .category-rail { grid-column:1/-1; position:static; display:flex; gap:6px; align-items:center; overflow-x:auto; padding:8px; border-radius:12px; }
  .category-rail .rail-core,.rail-label,.rail-notice { display:none; }
  .rail-link { white-space:nowrap; padding:8px 13px; min-height:38px; gap:7px; font-size:13px; }
  .rail-link + .rail-link { margin-top:0; }
  .rail-link .icon { width:17px; height:17px; }
  .hero h1 { font-size:34px; }
  .hero[data-art="full"] .hero-content { max-width:58%; width:460px; }
  .hero[data-art="full"]::before { background:linear-gradient(90deg,#f4fafff2 0%,#edf8ffe3 31%,#edf8ff00 75%); }
}
@media (max-width:959px) {
  .page-width { width:calc(100% - 40px); }
  .page-layout { grid-template-columns:minmax(0,1fr); }
  .sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
  .sidebar-footnote { display:none; }
  .hero[data-art="full"] .hero-content { max-width:63%; padding-left:0; }
  .hero h1 { font-size:32px; }
  .hero-slim .hero-text { white-space:normal; }
  .hero[data-art="full"] { background-position:57% bottom; }
  .hero[data-art="full"]::before { background:linear-gradient(90deg,#f4fafff7 0%,#edf8ffe8 32%,#edf8ff00 85%); }
  .top-stories { grid-template-columns:minmax(0,1fr); }
  .lead-story { min-height:300px; }
  .live-clock { display:none; }
}
@media (max-width:620px) {
  body { font-size:14px; }
  .page-width { width:calc(100% - 32px); }
  .live-strip-inner { gap:10px; min-height:32px; font-size:13px; }
  .live-date { overflow:hidden; text-overflow:ellipsis; }
  .live-weather span { display:none; }
  .site-header { position:static; }
  .header-inner { gap:0 12px; padding-top:4px; min-height:0; padding-bottom:2px; }
  .brand,.brand img { width:124px; flex-basis:124px; }
  .brand img { height:60px; }
  .header-utilities { display:contents; }
  .header-login,.header-user,.logout-form { display:none; }
  .header-signup { order:1; margin-left:1px; min-height:34px; font-size:13px; padding:7px 14px; }
  .language-switch { order:0; font-size:13px; gap:6px; margin-left:auto; }
  .search-form { order:2; width:100%; height:38px; margin:1px 0 4px; }
  .search-form input { font-size:16px; padding-block:7px; }
  .primary-nav { order:3; justify-content:space-between; gap:20px; height:45px; overflow-x:auto; scrollbar-width:none; }
  .primary-nav::-webkit-scrollbar { display:none; }
  .nav-link { font-size:13px; flex-shrink:0; }
  .ticker-inner { gap:9px; min-height:42px; }
  .ticker-list span,.ticker-controls [data-ticker-previous],.ticker-controls [data-ticker-next] { display:none; }
  .ticker-list a { font-size:13px; }
  .hero[data-art="full"] { min-height:300px; background-size:auto 245px; background-position:right -62px bottom; background-color:#edf8ff; }
  .hero[data-art="full"]::before { background:linear-gradient(180deg,#f1f9fff7 0%,#f1f9ffe8 34%,#f1f9ff93 59%,#f1f9ff00 100%); }
  .hero[data-art="full"] .hero-inner { align-items:flex-start; padding-top:22px; }
  .hero[data-art="full"] .hero-content { max-width:none; width:100%; padding:0; }
  .hero[data-art="full"] .hero-eyebrow { font-size:13px; padding:3px 10px; margin-bottom:8px; }
  .hero h1 { font-size:27px; line-height:1.33; letter-spacing:-1px; }
  .hero[data-art="full"] .hero-text { font-size:14px; line-height:1.65; max-width:290px; margin-top:9px; color:#385478; }
  .hero[data-art="full"] .hero-actions { gap:8px; margin-top:14px; }
  .hero[data-art="full"] .hero-actions .button { font-size:13px; min-height:37px; padding:8px 16px; }
  .hero-slim .hero-inner { flex-wrap:wrap; gap:10px 12px; min-height:0; padding-block:14px; }
  .hero-slim::after { width:70%; opacity:.45; }
  .hero-emblem { width:42px; height:42px; border-radius:13px; }
  .hero-emblem .icon { width:21px; height:21px; }
  .hero-title { font-size:20px; gap:8px; }
  .hero-slim .hero-text { font-size:13px; }
  .hero-slim .hero-eyebrow { font-size:13px; }
  .hero-slim .hero-actions { flex-basis:100%; flex-wrap:wrap; gap:7px; }
  .hero-slim .hero-actions .button { min-height:35px; padding:6px 14px; font-size:13px; }
  .page-layout { padding-top:16px; padding-bottom:26px; gap:22px; }
  .category-rail { margin-inline:-16px; border-left:0; border-right:0; border-radius:0; padding:8px 16px; gap:5px; }
  .rail-link { font-size:13px; padding:7px 11px; min-height:36px; }
  .main-column { gap:26px; }
  .section-heading { margin-bottom:13px; }
  .section-heading h1,.section-heading h2 { font-size:20px; }
  .lead-story { min-height:260px; border-radius:14px; }
  .lead-copy { padding:18px; }
  .lead-copy strong { font-size:20px; }
  .lead-story.is-text-only .lead-copy { padding:22px; gap:11px; }
  .lead-story.is-text-only .lead-copy strong { font-size:22px; letter-spacing:-.7px; }
  .lead-story.is-text-only .lead-summary { font-size:14px; -webkit-line-clamp:3; }
  .story-list { padding:4px 16px; }
  .story-list.two-column { grid-template-columns:minmax(0,1fr); }
  .story-list.two-column .story-row:nth-last-child(2) { border-bottom:1px solid var(--line-soft); }
  .story-thumb { flex-basis:76px; height:58px; }
  .story-list-large .story-thumb { flex-basis:96px; height:70px; }
  .story-list-large .story-row strong { font-size:15px; }
  .story-list-large .story-summary { display:none; }
  .news-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
  .news-card { display:grid; grid-template-columns:116px minmax(0,1fr); min-height:128px; }
  .news-image { height:100%; aspect-ratio:auto; }
  .news-image .news-badge { display:none; }
  .news-copy { padding:13px 14px 12px; }
  .news-copy h3 { font-size:15px; }
  .news-copy p { display:none; }
  .forum-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
  .forum-tile { grid-column:span 2; font-size:13px; min-height:76px; gap:9px; border-radius:10px; }
  .forum-tile:nth-last-child(-n+2) { grid-column:span 3; }
  .conversation-panel { margin-top:16px; padding:15px 16px 4px; }
  .feed-item { flex-wrap:wrap; gap:6px 12px; padding:14px 0; }
  .feed-main { flex-basis:calc(100% - 92px); }
  .feed-item:not(:has(.feed-thumb)) .feed-main { flex-basis:100%; }
  .feed-title a { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .feed-stats { order:3; flex-basis:100%; }
  .feed-thumb { flex-basis:68px; width:68px; height:68px; }
  .board-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .sidebar { gap:16px; grid-template-columns:minmax(0,1fr); }
  .welcome-panel { padding:15px 18px 18px; display:grid; grid-template-columns:84px 1fr; text-align:left; align-items:center; }
  .member-art { grid-row:1/4; height:110px; margin:0 3px 0 -13px; }
  .member-art img { width:150px; height:108px; }
  .welcome-spark { display:none; }
  .welcome-panel h2 { font-size:17px; align-self:end; }
  .welcome-panel p { margin:4px 0 0; align-self:start; }
  .member-actions { margin-top:11px; }
  .membership-link { grid-column:2; justify-content:flex-start; font-size:13px; margin-top:10px; }
  .ad-slot { min-height:145px; padding:17px; }
  .results-panel { padding:20px 16px; }
  .board-search { flex:1; width:auto; }
  .board-search input { font-size:16px; }
  .pagination { margin-inline:auto; }
  .post-view,.comments,.form-box { padding:20px 16px; }
  .post-header h1 { font-size:21px; }
  .post-body { font-size:15px; padding-top:20px; }
  .story-lede { font-size:16px; }
  .news-photo { float:none; width:100%; max-width:300px; margin:20px 0; }
  .story-image { max-height:160px; }
  .article-body { font-size:16px; line-height:1.85; padding-top:20px; }
  .comment-form { flex-direction:column; align-items:stretch; }
  .field input:not([type=checkbox]):not([type=file]),.field select,.field textarea,.comment-form textarea { font-size:16px; }
  .auth-page { padding-top:22px; }
  .auth-box { padding:22px 20px 24px; }
  .dating-panel { padding:20px 18px 24px; }
  .dating-panel h1 { font-size:23px; }
  .dating-features > div { font-size:13px; }
  .site-footer { margin-top:26px; padding:22px 0; gap:6px 14px; }
  .site-footer nav { width:100%; margin-left:0; gap:16px; margin-top:8px; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ------------------------------------------------------- reasons to join */
.hero-benefits { display:grid; gap:6px; margin-top:14px; }
.hero-benefits li { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:#23395f; }
.hero-benefits .icon { width:18px; height:18px; padding:3px; border-radius:50%; background:var(--blue); color:#fff; stroke-width:3; }
.hero-trust { font-size:13px; color:#3d5580; margin-top:10px; }
.hero[data-art="full"] { min-height:380px; }

.join-band { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 22px; margin-top:22px; padding:18px 26px 18px 12px; border-radius:16px; border:1px solid #cfe0fd; background:linear-gradient(100deg,#e6f0ff 0%,#f5f9ff 60%,#fff 100%); }
.join-band img { width:118px; height:80px; object-fit:contain; }
.join-band h2 { font-size:21px; font-weight:800; letter-spacing:-.6px; }
.join-band p { font-size:15px; color:#3d5580; margin-top:3px; }
.join-actions { display:flex; flex-direction:column; align-items:center; gap:8px; }
.join-actions .button { min-height:48px; padding-inline:26px; font-size:15px; }
.join-actions > a:not(.button) { font-size:13px; color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; }

.sticky-join { position:fixed; inset:auto 0 0 0; z-index:40; display:none; align-items:center; gap:10px; padding:10px 12px 10px 16px; background:#fff; border-top:1px solid #d6e2f5; box-shadow:0 -8px 24px #1736651a; }
.sticky-join p { flex:1; min-width:0; font-size:14px; font-weight:600; line-height:1.4; }
.sticky-join button { width:34px; height:34px; display:grid; place-items:center; color:var(--muted); flex-shrink:0; }
.sticky-join button .icon { width:16px; height:16px; }

.password-field { position:relative; }
.password-field input { padding-right:48px!important; }
.password-field button { position:absolute; inset:0 4px 0 auto; width:42px; display:grid; place-items:center; color:var(--muted); border-radius:10px; }
.password-field button[aria-pressed="true"] { color:var(--blue); }
.password-field button .icon { width:19px; height:19px; }
.auth-page.has-benefits { display:grid; grid-template-columns:minmax(0,340px) minmax(0,440px); justify-content:center; align-items:center; gap:44px; }
.auth-benefits h2 { font-size:26px; font-weight:800; letter-spacing:-.9px; line-height:1.35; word-break:keep-all; }
.auth-benefits ul { display:grid; gap:14px; margin:22px 0 20px; }
.auth-benefits li { display:flex; align-items:flex-start; gap:11px; font-size:16px; font-weight:500; line-height:1.55; color:#23395f; }
.auth-benefits li .icon { width:22px; height:22px; padding:4px; margin-top:1px; border-radius:50%; background:var(--blue); color:#fff; stroke-width:3; }
.auth-benefits p { font-size:14px; color:var(--muted); }

@media (max-width:959px) {
  .join-band { grid-template-columns:auto minmax(0,1fr); padding-right:18px; }
  .join-actions { grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:16px; padding-left:12px; }
  .auth-page.has-benefits { grid-template-columns:minmax(0,440px); gap:20px; }
  .auth-benefits h2 { font-size:21px; }
  .auth-benefits ul { margin:14px 0 12px; gap:9px; }
  .auth-benefits li { font-size:15px; }
}
@media (max-width:620px) {
  /* The words sit on a clean wash; the artwork gets its own band underneath. */
  .hero[data-art="full"] { min-height:0; padding-bottom:150px; background-size:auto 170px; background-position:right -40px bottom; background-color:#eef7ff; }
  .hero[data-art="full"]::before { background:linear-gradient(180deg,#eef7ff 0%,#eef7ff calc(100% - 175px),#eef7ff00 calc(100% - 95px)); }
  .hero[data-art="full"] .hero-text { max-width:none; font-size:15px; color:#2f466b; }
  .hero-benefits li { font-size:14px; }
  .join-band { grid-template-columns:minmax(0,1fr); padding:18px; text-align:center; }
  .join-band img { margin:0 auto -4px; }
  .join-band h2 { font-size:19px; }
  .join-band p { font-size:14px; }
  .join-actions { flex-direction:column; padding-left:0; gap:10px; }
  .join-actions .button { width:100%; }
  .sticky-join:not([hidden]) { display:flex; }
  body:has(.sticky-join:not([hidden])) { padding-bottom:62px; }
}

/* ------------------------------------- member features (added by the backend session;
   frontend is welcome to restyle: report control, profile links, account forms) */
.author-link:hover { color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; }
.report-menu { position:relative; font-size:13px; }
.report-menu summary { display:inline-flex; align-items:center; gap:5px; cursor:pointer; list-style:none; color:var(--muted); padding:6px 4px; border-radius:8px; }
.report-menu summary::-webkit-details-marker { display:none; }
.report-menu summary:hover { color:#b03a31; }
.report-menu summary .icon { width:14px; height:14px; }
.report-menu form { display:grid; gap:8px; margin-top:8px; padding:14px; width:min(300px,78vw); border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.report-menu select,.report-menu input[type=text] { width:100%; padding:9px 11px; font-size:14px; border:1px solid #d9e2ef; border-radius:10px; background:#fff; color:var(--ink); }
.post-actions .report-menu { margin-left:auto; }
.post-actions .report-menu[open] form { position:absolute; right:0; z-index:5; }
.comment-content .report-menu { margin-top:4px; }
.form-box h2 { font-size:19px; font-weight:800; letter-spacing:-.4px; margin-bottom:18px; }
.auth-forgot { margin-top:8px; font-size:13px; }

/* A restaurant with a photo leads with it; one without keeps the icon heading and fills the card as before. */
.restaurant-card.has-photo { padding-top:0; overflow:hidden; }
.restaurant-photo { display:block; width:calc(100% + 52px); max-width:none; margin:0 -26px 20px; aspect-ratio:16/7; object-fit:cover; background:#fff1e8; }
@media(max-width:640px) { .restaurant-photo { width:calc(100% + 36px); margin:0 -18px 18px; aspect-ratio:16/9; } }
.restaurant-thumbs { list-style:none; display:flex; gap:8px; margin:-8px 0 18px; padding:0; overflow-x:auto; }
.restaurant-thumbs img { width:88px; height:66px; object-fit:cover; border-radius:8px; display:block; }

/* Sponsored: paid to sit at the top, and always says so. */
.sponsor-badge { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; line-height:20px; color:#8a5a00; background:#fff4d6; border:1px solid #f3dc9c; border-radius:999px; padding:1px 9px; margin-inline-end:8px; white-space:nowrap; }
.sponsor-badge .icon { width:12px; height:12px; }
.restaurant-card.is-sponsored { border-color:#f3dc9c; box-shadow:0 0 0 1px #f3dc9c inset; }
.sponsored-feed { margin-bottom:18px; }
.social-sponsored { display:flex; gap:16px; align-items:flex-start; border-color:#f3dc9c; background:linear-gradient(180deg,#fffbef,#fff); }
.sponsored-shot img { width:120px; height:90px; object-fit:cover; border-radius:10px; display:block; }
.sponsored-by { font-size:13px; color:#5f6e86; }
.sponsor-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:#5f6e86; }
.sponsor-form select { font:inherit; font-size:13px; padding:5px 8px; border:1px solid #d9e2ef; border-radius:8px; background:#fff; }
@media(max-width:560px) { .social-sponsored { flex-direction:column; } .sponsored-shot img { width:100%; height:auto; aspect-ratio:16/9; } }

/* Admin preview of an ad spot on the real page (?spot=...). Visitors never get these classes. */
.spot-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; padding:14px 18px; background:#fff4d6; border:2px solid #f2a93b; border-radius:14px; font-size:17px; font-weight:600; color:#4a3300; }
.spot-preview-bar span { display:inline-flex; align-items:center; gap:8px; }
.spot-preview-bar .button { min-height:46px; font-size:16px; }
.spot-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:120px; margin:14px 0; padding:18px; border:4px dashed #f2a93b; border-radius:14px; background:#fff8e6; text-align:center; scroll-margin-top:120px; }
.spot-placeholder strong { font-size:22px; color:#8a5a00; }
.spot-placeholder span { font-size:16px; color:#6b4a00; }
.spot-preview-banner .ad-rail, .spot-preview-rail .rail-ad, .spot-preview-sidebar .rail-ads { position:relative; outline:5px solid #f2a93b; outline-offset:4px; border-radius:12px; scroll-margin-top:120px; }
.spot-preview-banner .ad-rail::after, .spot-preview-rail .rail-ad::after, .spot-preview-sidebar .rail-ads::after { content:"Your ad goes here"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 18px; border-radius:999px; background:#f2a93b; color:#1f1600; font-size:18px; font-weight:800; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.18); z-index:5; pointer-events:none; }
:lang(ko) .spot-preview-banner .ad-rail::after, :lang(ko) .spot-preview-rail .rail-ad::after, :lang(ko) .spot-preview-sidebar .rail-ads::after { content:"여기에 광고가 들어갑니다"; }
.spot-preview-rail .rail-ad::after, .spot-preview-sidebar .rail-ads::after { white-space:normal; width:80%; text-align:center; font-size:16px; }

/* Sign-in codes by email (account page and admin settings). */
.login-codes .codes-status { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-weight:700; color:#1b6b3a; }
.login-codes .codes-status .icon { width:18px; height:18px; flex-shrink:0; }
.login-codes form + form { margin-top:16px; }
.code-resend { margin-top:12px; }

/* A post brought over from dolxing.com: one quiet line above the text, linking to the original. */
.post-source { margin: 0 0 14px; color: #5f6e86; font-size: 14px; }
.post-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Robot trap on public forms (contact.html): a field people never see. Off screen rather than display:none,
   which some robots skip. */
.form-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Privacy policy and terms (privacy.html, terms.html): the article reading style inside one card. */
.legal-page { padding: 30px 34px 34px; }
.legal-page .article-body h2:first-of-type { margin-top: 28px; }
@media (max-width: 620px) { .legal-page { padding: 20px 18px 24px; } }