/* ═══════════════════════════════════════════════════════════
   CMS Structural Styles
   All colors and fonts come from a theme file (themes/*.css).
   This file contains only layout, spacing, and component structure.
   ═══════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--deep); color:var(--paper);
  font-family:var(--font-sans); font-weight:300;
  min-height:100vh; overflow-x:hidden;
}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar {
  background:var(--ink); border-bottom:1px solid var(--border);
  padding:0 1.5rem; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:300; flex-shrink:0;
}
.topbar-brand {
  font-family:var(--font-serif); font-size:1rem; font-weight:400;
  color:var(--warm); letter-spacing:0.05em; white-space:nowrap;
}
.topbar-right { display:flex; gap:0.5rem; align-items:center; flex-shrink:0; }
.topbar-repo {
  font-size:0.7rem; color:var(--stone); letter-spacing:0.04em;
  max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-posts-btn { display:none; }

/* ── APP LAYOUT ────────────────────────────────────────────── */
.app { display:flex; flex-direction:column; min-height:100vh; }
.main { display:flex; flex:1; overflow:hidden; height:calc(100vh - 56px); }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width:280px; min-width:280px;
  background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform 0.25s ease;
}
.sidebar-header {
  padding:1.25rem 1.5rem 1rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.sidebar-title {
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone);
}
.posts-list { flex:1; overflow-y:auto; padding:0.5rem 0; }
.posts-list::-webkit-scrollbar { width:4px; }
.posts-list::-webkit-scrollbar-track { background:transparent; }
.posts-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.post-item {
  padding:0.9rem 1.5rem; cursor:pointer;
  border-left:2px solid transparent;
  transition:all 0.15s; display:flex; flex-direction:column; gap:0.25rem;
  min-height:44px;
}
.post-item:hover {
  background:color-mix(in srgb, var(--warm) 6%, transparent);
  border-left-color:color-mix(in srgb, var(--warm) 30%, transparent);
}
.post-item.active {
  background:color-mix(in srgb, var(--warm) 9%, transparent);
  border-left-color:var(--warm);
}
.post-item-title { font-size:0.82rem; color:var(--paper); line-height:1.3; font-weight:400; }
.post-item.active .post-item-title { color:var(--warm); }
.post-item-meta { font-size:0.65rem; color:var(--stone); letter-spacing:0.05em; }
.post-item-cat {
  display:inline-block; font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--stone); background:var(--surface-subtle);
  padding:0.15rem 0.5rem; border-radius:2px;
}
.sidebar-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); flex-shrink:0; }

/* ── EDITOR AREA ───────────────────────────────────────────── */
.editor-area {
  flex:1; overflow-y:auto; padding:2rem;
  display:flex; gap:2rem;
}
.editor-area::-webkit-scrollbar { width:6px; }
.editor-area::-webkit-scrollbar-track { background:transparent; }
.editor-area::-webkit-scrollbar-thumb { background:var(--border); }
.editor-main { flex:1; min-width:0; }
.editor-preview { width:320px; min-width:320px; }

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; color:var(--stone);
}
.empty-state-title {
  font-family:var(--font-serif); font-size:1.8rem;
  font-weight:300; font-style:italic; color:var(--warm); opacity:0.6;
}

/* ── SECTION CARDS (modules) ───────────────────────────────── */
.section-card {
  background:var(--panel); border:1px solid var(--border);
  margin-bottom:1rem; overflow:hidden;
}
.section-header {
  padding:0.8rem 1.25rem; background:var(--surface-subtle);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; min-height:44px;
}
.section-header-left { display:flex; align-items:center; gap:0.75rem; min-width:0; }
.section-label {
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--warm); flex-shrink:0;
}
.section-toggle { font-size:0.7rem; color:var(--stone); transition:transform 0.2s; flex-shrink:0; }
.section-card.collapsed .section-toggle { transform:rotate(-90deg); }
.section-card.collapsed .section-body { display:none; }
.section-body { padding:1.25rem; }
.module-controls { display:flex; gap:0.25rem; align-items:center; flex-shrink:0; }
.mod-btn {
  background:transparent; border:1px solid var(--border);
  color:var(--stone); font-size:0.65rem; font-family:var(--font-sans);
  padding:0.2rem 0.5rem; cursor:pointer; transition:all 0.15s;
  min-height:28px; min-width:28px;
}
.mod-btn:hover { color:var(--paper); border-color:var(--stone); }
.mod-btn.danger { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.mod-btn.danger:hover { background:color-mix(in srgb, var(--warn) 10%, transparent); }
.mod-locked-badge {
  display:inline-flex; align-items:center;
  padding:0.2rem 0.55rem;
  border-radius:2px;
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--warm);
  border:1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  background:color-mix(in srgb, var(--warm) 8%, transparent);
  cursor:default;
  user-select:none;
}

/* source type pill */
.source-pill {
  font-size:0.55rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.15rem 0.5rem; border:1px solid var(--border); cursor:pointer;
  transition:all 0.15s; white-space:nowrap; flex-shrink:0;
  font-family:var(--font-sans);
}
.source-pill[data-source="verified"] { color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent); }
.source-pill[data-source="network"]  { color:#7bafd4; border-color:rgba(123,175,212,0.4); }
.source-pill[data-source="aggregate"]{ color:var(--stone); border-color:var(--border); }

/* ── FORM FIELDS ───────────────────────────────────────────── */
.field { margin-bottom:1rem; }
.field:last-child { margin-bottom:0; }
.field-label {
  display:block; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--stone); margin-bottom:0.4rem;
}
.field-hint { font-size:0.68rem; color:var(--stone); opacity:0.7; margin-top:0.3rem; line-height:1.4; }
.field-row   { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.75rem; }

input[type="text"],input[type="date"],input[type="url"],input[type="number"],select,textarea {
  width:100%; background:var(--field-bg);
  border:1px solid var(--border); color:var(--paper);
  font-family:var(--font-sans); font-size:0.85rem; font-weight:300;
  padding:0.6rem 0.85rem; outline:none; transition:border-color 0.2s;
  border-radius:0; -webkit-appearance:none; appearance:none;
  min-height:44px;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--warm);
  background:color-mix(in srgb, var(--warm) 5%, var(--field-bg));
}
textarea { resize:vertical; min-height:80px; line-height:1.6; }
select option { background:var(--panel); color:var(--paper); }

/* ── SCORECARD ─────────────────────────────────────────────── */
.scorecard-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.scorecard-dim  { background:var(--surface-subtle); border:1px solid var(--border); padding:0.75rem; }
.scorecard-dim-label {
  font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--stone); margin-bottom:0.5rem;
}
.scorecard-dim input,.scorecard-dim select { margin-bottom:0.4rem; }
.status-select-good    { color:var(--good)!important; }
.status-select-caution { color:var(--caution)!important; }
.status-select-warn    { color:var(--warn)!important; }

/* ── REPEAT BLOCKS ─────────────────────────────────────────── */
.repeat-block {
  border:1px solid var(--border); padding:1rem; margin-bottom:0.75rem;
  background:var(--surface-subtle);
}
.repeat-block-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem;
}
.repeat-block-label {
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--warm);
}
.repeat-block-controls { display:flex; gap:0.25rem; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.6rem 1.1rem; font-family:var(--font-sans);
  font-size:0.7rem; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; border:none; transition:all 0.2s; white-space:nowrap;
  min-height:44px;
}
.btn-primary  { background:var(--warm); color:var(--ink); }
.btn-primary:hover  { filter:brightness(1.12); }
.btn-secondary { background:transparent; color:var(--warm); border:1px solid var(--warm); }
.btn-secondary:hover { background:color-mix(in srgb, var(--warm) 10%, transparent); }
.btn-ghost    { background:transparent; color:var(--stone); border:1px solid var(--border); }
.btn-ghost:hover    { color:var(--paper); border-color:var(--stone); }
.btn-danger   { background:transparent; color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.btn-danger:hover   { background:color-mix(in srgb, var(--warn) 10%, transparent); }
.btn-sm    { padding:0.4rem 0.75rem; font-size:0.65rem; min-height:36px; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ── PREVIEW PANEL ─────────────────────────────────────────── */
.preview-sticky { position:sticky; top:0; }
.preview-card   { background:var(--panel); border:1px solid var(--border); overflow:hidden; margin-bottom:1rem; }
.preview-label  {
  padding:0.75rem 1rem; font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--warm); border-bottom:1px solid var(--border); background:var(--surface-subtle);
}
.thumb-wrap   { width:100%; height:180px; overflow:hidden; background:var(--ink); position:relative; }
.thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.92); transition:object-position 0.3s; }
.thumb-empty  {
  width:100%; height:180px;
  background:linear-gradient(135deg,var(--ink),var(--ash));
  display:flex; align-items:center; justify-content:center;
  color:var(--stone); font-size:0.72rem; letter-spacing:0.1em;
}
.preview-body   { padding:0.85rem 1rem; }
.preview-cat    { font-size:0.58rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--warm); margin-bottom:0.4rem; }
.preview-title  { font-family:var(--font-serif); font-size:1rem; font-weight:400; color:var(--paper); line-height:1.3; margin-bottom:0.4rem; }
.preview-excerpt{ font-size:0.72rem; color:var(--stone); line-height:1.5; margin-bottom:0.6rem; }
.preview-date   { font-size:0.6rem; color:var(--stone); letter-spacing:0.05em; }
.pos-controls   { padding:0.85rem 1rem; border-top:1px solid var(--border); }
.pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.3rem; margin-bottom:0.75rem; }
.pos-btn {
  background:var(--surface-hover); border:1px solid var(--border);
  color:var(--stone); font-size:0.7rem; padding:0.4rem; cursor:pointer;
  text-align:center; transition:all 0.15s; font-family:var(--font-sans); min-height:36px;
}
.pos-btn:hover  { border-color:var(--warm); color:var(--warm); background:color-mix(in srgb,var(--warm) 6%, transparent); }
.pos-btn.active { border-color:var(--warm); color:var(--warm); background:color-mix(in srgb,var(--warm) 10%, transparent); }

/* ── STATUS BAR ────────────────────────────────────────────── */
.status-bar {
  padding:0.5rem 1.25rem; font-size:0.7rem; color:var(--stone);
  background:var(--surface-subtle); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:0.5rem; flex-shrink:0;
}
.status-dot         { width:6px; height:6px; border-radius:50%; background:var(--stone); flex-shrink:0; }
.status-dot.saving  { background:var(--warm); animation:pulse 1s infinite; }
.status-dot.saved   { background:var(--good); }
.status-dot.error   { background:var(--warn); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

/* ── SETUP SCREEN ──────────────────────────────────────────── */
.setup-screen {
  flex:1; display:flex; align-items:center; justify-content:center; padding:2rem;
}
.setup-card {
  background:var(--panel); border:1px solid var(--border);
  padding:2.5rem; width:480px; max-width:100%;
}
.setup-title {
  font-family:var(--font-serif); font-size:1.8rem;
  font-weight:300; color:var(--warm); margin-bottom:0.5rem;
}
.setup-sub  { font-size:0.85rem; color:var(--stone); line-height:1.6; margin-bottom:2rem; }
.setup-step {
  font-size:0.62rem; letter-spacing:0.1em; color:var(--stone);
  margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border);
  line-height:1.7;
}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--panel); border:1px solid var(--border);
  padding:0.85rem 1.25rem; font-size:0.78rem; color:var(--paper);
  z-index:500; display:flex; align-items:center; gap:0.6rem;
  transform:translateY(100px); opacity:0; transition:all 0.3s; max-width:320px;
}
.toast.show    { transform:translateY(0); opacity:1; }
.toast.success { border-color:var(--good); }
.toast.error   { border-color:var(--warn); }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; background:var(--overlay);
  z-index:400; align-items:center; justify-content:center; padding:2rem;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--panel); border:1px solid var(--border);
  width:560px; max-width:100%; max-height:80vh;
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.modal-title {
  font-family:var(--font-serif); font-size:1.3rem;
  font-weight:300; font-style:italic; color:var(--warm);
}
.modal-close-btn {
  background:transparent; border:none; color:var(--stone);
  font-size:1.2rem; cursor:pointer; padding:0.25rem 0.5rem; font-family:var(--font-sans);
  min-height:44px; min-width:44px;
}
.modal-close-btn:hover { color:var(--paper); }
.modal-body { overflow-y:auto; flex:1; }
.template-item {
  padding:1rem 1.5rem; border-bottom:1px solid var(--border);
  cursor:pointer; transition:all 0.15s; min-height:44px;
}
.template-item:hover      { background:color-mix(in srgb, var(--warm) 6%, transparent); }
.template-item:last-child { border-bottom:none; }
.template-name { font-size:0.82rem; color:var(--paper); font-weight:400; margin-bottom:0.2rem; }
.template-desc { font-size:0.68rem; color:var(--stone); line-height:1.4; }
.template-modules {
  display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.55rem;
}
.mod-pill {
  font-size:0.55rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.15rem 0.45rem; border:1px solid var(--border);
  color:var(--stone); background:transparent; white-space:nowrap;
}
.mod-pill-required {
  color:var(--warm); border-color:color-mix(in srgb, var(--warm) 40%, transparent);
}

/* ── ADD MODULE PANEL ──────────────────────────────────────── */
.add-module-wrap { position:relative; margin-top:1rem; margin-bottom:2rem; }
.add-module-dropdown {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:100;
  background:var(--panel); border:1px solid var(--warm);
  margin-top:0.25rem; max-height:360px; overflow-y:auto;
}
.add-module-dropdown.open { display:block; }
.add-module-item {
  padding:0.75rem 1.25rem; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background 0.1s; min-height:44px;
  display:flex; flex-direction:column; justify-content:center;
}
.add-module-item:hover    { background:color-mix(in srgb, var(--warm) 8%, transparent); }
.add-module-item:last-child { border-bottom:none; }
.add-module-name { font-size:0.78rem; color:var(--paper); }
.add-module-hint { font-size:0.62rem; color:var(--stone); margin-top:0.15rem; }

/* ── MOBILE OVERLAY ────────────────────────────────────────── */
.mobile-overlay { display:none; position:fixed; inset:0; background:var(--overlay); z-index:250; }
.mobile-overlay.open { display:block; }

/* ── UTILITIES ─────────────────────────────────────────────── */
.divider    { height:1px; background:var(--border); margin:1rem 0; }
.mt-1       { margin-top:0.5rem; }
.mt-2       { margin-top:1rem; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.flex-gap   { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.save-bar   { display:flex; gap:0.75rem; padding:0.5rem 0 2rem; align-items:center; flex-wrap:wrap; }

/* ── MOBILE PREVIEW TOGGLE ─────────────────────────────────── */
.preview-toggle-bar { display:none; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:900px){
  .topbar { padding:0 1rem; }
  .topbar-brand { font-size:0.82rem; }
  .topbar-repo { display:none; }
  .topbar-posts-btn { display:flex; }

  .main { position:relative; }

  .sidebar {
    position:fixed; top:56px; left:0; bottom:0; z-index:260;
    transform:translateX(-100%); width:280px;
  }
  .sidebar.open { transform:translateX(0); }

  .editor-area { flex-direction:column; padding:1rem; gap:0; }
  .editor-preview { width:100%; min-width:0; display:none; }
  .editor-preview.mobile-open { display:block; }
  .preview-sticky { position:static; }
  .preview-toggle-bar { display:block; padding:0.75rem 0 0.5rem; }

  .field-row,.field-row-3 { grid-template-columns:1fr; }
  .scorecard-grid { grid-template-columns:1fr; }

  .modal-overlay { padding:0; }
  .modal { width:100%; max-width:100%; max-height:100dvh; height:100dvh; border:none; }

  .add-module-dropdown { position:static; margin-top:0.5rem; }

  .toast { right:50%; bottom:1.5rem; transform:translateX(50%) translateY(100px); max-width:90vw; }
  .toast.show { transform:translateX(50%) translateY(0); }

  .save-bar { flex-direction:column; align-items:stretch; }
  .save-bar .btn { width:100%; justify-content:center; }
}

@media(max-width:480px){
  .topbar-brand { font-size:0.75rem; }
  .editor-area  { padding:0.75rem; }
  .section-body { padding:0.9rem; }
}

/* ══════════════════════════════════════════════════════════
   THEME STUDIO — modal, preset tiles, live preview
   ══════════════════════════════════════════════════════════ */

.ts-modal {
  width: 840px;
  max-width: 98vw;
  max-height: 92vh;
}

.ts-body {
  display: flex;
  min-height: 460px;
  overflow: hidden;
}

.ts-left {
  flex: 0 0 290px;
  padding: 1.25rem;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.ts-right {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ts-section-label {
  font-size: 0.57rem;
  letter-spacing: 0.14em;
  color: var(--stone);
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

/* ── Preset grid ─────────────────────────────────────────── */

.ts-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.25rem;
}

.ts-preset-tile {
  cursor: pointer;
  border-radius: 3px;
  border: 2px solid var(--border);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}

.ts-preset-tile:hover  { border-color: var(--warm); opacity: 0.75; }
.ts-preset-tile.active { border-color: var(--warm); opacity: 1; }

.ts-tile-swatch {
  overflow: hidden;
}

.ts-tile-header {
  padding: 6px 7px 5px;
}

.ts-tile-body {
  padding: 0;
}

.ts-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.45rem 0.1rem;
}

.ts-tile-name {
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.03em;
}

.ts-tile-niche {
  font-size: 0.54rem;
  color: var(--stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ts-tile-desc {
  font-size: 0.58rem;
  color: var(--stone);
  line-height: 1.4;
  padding: 0.15rem 0.45rem 0.45rem;
}

/* ── Divider between presets and customize ───────────────── */

.ts-divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

/* ── Customize controls ──────────────────────────────────── */

.ts-control-group {
  margin-bottom: 1.1rem;
}

.ts-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  margin-bottom: 0.4rem;
}

.ts-font-sample {
  margin-top: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--paper);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ts-heading-sample { font-size: 0.9rem; }

.ts-body-sample {
  font-size: 0.68rem;
  line-height: 1.5;
  white-space: normal;
}

/* ── Live preview frame ──────────────────────────────────── */

.ts-preview-frame {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow-y: auto;
}

.ts-preview-note {
  font-size: 0.62rem;
  color: var(--stone);
  line-height: 1.55;
  margin-top: 0.75rem;
}

/* ── Preview inner elements ──────────────────────────────── */

.tsp-wrap  { background: var(--ts-paper, #f5f1eb); }

.tsp-header { background: var(--ts-deep, #111009); }

.tsp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--ts-border, rgba(200,169,126,0.2));
}

.tsp-brand {
  font-family: var(--ts-heading, serif);
  font-size: 0.78rem;
  color: var(--ts-warm, #d4a84b);
  letter-spacing: 0.06em;
}

.tsp-nav-links {
  display: flex;
  gap: 0.65rem;
  font-family: var(--ts-body, sans-serif);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,241,235,0.3);
}

.tsp-hero {
  padding: 0.85rem 0.85rem 0.6rem;
}

.tsp-eyebrow {
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-warm, #d4a84b);
  margin-bottom: 0.3rem;
  font-family: var(--ts-body, sans-serif);
}

.tsp-h1 {
  font-family: var(--ts-heading, serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ts-paper, #f5f1eb);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.tsp-desc {
  font-size: 0.65rem;
  color: rgba(245,241,235,0.4);
  font-family: var(--ts-body, sans-serif);
  line-height: 1.5;
}

.tsp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  padding: 0.85rem;
}

.tsp-card {
  background: var(--ts-surface, #fff);
  border: 1px solid var(--ts-mist, #e8e2d9);
  overflow: hidden;
}

.tsp-card-img {
  width: 100%;
  height: 65px;
}

.tsp-img-a {
  background: linear-gradient(135deg, var(--ts-mist, #e8e2d9) 0%, var(--ts-paper, #f5f1eb) 100%);
}

.tsp-img-b {
  background: linear-gradient(135deg, var(--ts-ash, #3d3830) 0%, var(--ts-deep, #111009) 100%);
  opacity: 0.65;
}

.tsp-card-body {
  padding: 0.55rem 0.6rem 0.6rem;
}

.tsp-card-cat {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-warm, #d4a84b);
  margin-bottom: 0.2rem;
  font-family: var(--ts-body, sans-serif);
}

.tsp-card-title {
  font-family: var(--ts-heading, serif);
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ts-ink, #1a1814);
  line-height: 1.25;
  margin-bottom: 0.28rem;
}

.tsp-card-excerpt {
  font-size: 0.58rem;
  color: var(--ts-stone, #8c8275);
  line-height: 1.5;
  margin-bottom: 0.28rem;
  font-family: var(--ts-body, sans-serif);
}

.tsp-card-date {
  font-size: 0.5rem;
  color: var(--ts-stone, #8c8275);
  font-family: var(--ts-body, sans-serif);
}

/* ── Responsive collapse ────────────────────────────────── */

@media (max-width: 700px) {
  .ts-body { flex-direction: column; }
  .ts-left { flex: none; border-right: none; border-bottom: 1px solid var(--border); }
  .ts-preset-grid { grid-template-columns: repeat(3, 1fr); }
  .ts-preview-frame { min-height: 300px; }
}