:root{--bg:#f6f7f8;--card:#ffffff;--text:#1f2937;--muted:#6b7280;--brand:#2563eb;--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.06)}*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1180px;margin:0 auto;padding:24px}.nav{display:flex;gap:28px;align-items:center;padding:14px 0;position:sticky;top:0;background:var(--bg);z-index:5}
.nav a{color:var(--text);text-decoration:none;font-weight:600}.brand{font-weight:800}.notice{background:#fde68a;color:#7c2d12;border:1px solid #f59e0b;padding:10px 14px;border-radius:10px;margin-bottom:12px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.card{grid-column:span 4;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0 0 4px 0;font-size:22px}.card p{margin:0;color:var(--muted);line-height:1.6}.btnrow{display:flex;gap:12px;margin-top:auto}
.btn{padding:10px 14px;border-radius:10px;border:1px solid #d1d5db;background:#fff;cursor:pointer;text-decoration:none;color:var(--text);font-weight:600}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}.case{grid-column:span 4;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.case .thumb{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e5e7eb}.case .thumb img{width:100%;height:100%;object-fit:cover;display:block}.case .body{padding:16px 16px 18px 16px}.case .meta{color:var(--muted);font-size:14px;margin-top:6px}
.prose{max-width:800px;margin:0 auto;background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:28px;line-height:1.8}.prose h1{margin-top:0}
.kv{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#e5e7eb;margin-bottom:16px}.kv img{width:100%;height:100%;object-fit:cover;display:block}
.form{background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px}
input,textarea,select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px}label{font-weight:600}table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}.actions{display:flex;gap:10px}.badge{font-size:12px;color:#6b7280}
@media (max-width:980px){.card,.case{grid-column:span 6}}@media (max-width:680px){.grid,.case-grid{gap:14px}.card,.case{grid-column:span 12}}
/* spacing tweaks */
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav .brand{margin-right:12px;font-weight:700}
.nav a + a{margin-left:16px}
.prose h1 + a, .prose h2 + a, .prose h3 + a{margin-left:12px}
.actions .btn + .btn{margin-left:8px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace}
.small{font-size:12px;color:#6b7280}

/* ====== Elegant Typography & Spacing (added) ====== */
:root{ --measure: 68ch; }
.prose{ max-width: var(--measure); line-height: 1.8; font-size: 1rem; color:#1f2937; }
.prose.lead{ font-size: 1.06rem; color:#111827; }
.prose p{ margin: 0.65rem 0; }
.prose h2, .prose h3{ margin: 1.2rem 0 0.55rem; line-height:1.3; }
.prose ul{ padding-left:1.2rem; margin:0.65rem 0; }
.prose li{ margin:0.3rem 0; }
.prose strong{ font-weight:600; }
.prose em{ font-style:italic; }

/* Image balance */
.details img, .prose img, .card img{
  display:block;
  max-width:100%;
  height:auto;
  max-height: 360px;
  margin: 0.8rem auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  object-fit: cover;
}

/* Buttons spacing */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.62rem 1rem; border-radius:10px; }
.btn + .btn{ margin-left: 0.8rem; }
.card .btn-group, .prose .btn-group{ display:flex; flex-wrap:wrap; gap: .55rem .8rem; }
.card .actions, .prose .actions{ display:flex; flex-wrap:wrap; gap:.55rem .8rem; }

/* Nav spacing */
.nav a{ margin-right: 1rem; }
.nav a:last-child{ margin-right: 0; }

/* ===== Unified comfortable style ===== */
:root{
  --radius: 16px;
  --radius-lg: 18px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --measure: 70ch;
}
body{ background:#f3f4f6; }
.container{ max-width: 1100px; margin: 0 auto; padding: 0 18px; }
.nav{ display:flex; align-items:center; gap: 1.25rem; padding: 12px 0; }
.nav .brand{ font-weight:700; margin-right: .5rem; }
.nav a{ margin: 0 .25rem; padding: 0 0.1rem; font-weight:600; color:#111827; text-decoration:none; }
.nav a + a{ margin-left: 1rem; }
.notice{
  margin: 10px auto 16px;
  background:#FEF3C7;
  border:1px solid #FACC15;
  color:#92400E;
  padding: 10px 14px;
  border-radius: 999px;
  max-width: 960px;
}

.card{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.card img{ display:block; width:100%; height:auto; max-height: 420px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }

h1{ font-size: 2rem; line-height:1.25; margin: 0.5rem 0 0.75rem; color:#111827; }
h2{ font-size: 1.35rem; margin: 1.25rem 0 0.5rem; }
.small-muted{ color:#6b7280; font-size: .95rem; }

.prose{ max-width: var(--measure); line-height:1.8; color:#1f2937; font-size: 1.02rem; }
.prose.lead{ font-size: 1.06rem; color:#111827; margin: .25rem 0 0.75rem; }
.prose p{ margin: 0.7rem 0; }
.prose img{ border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.06); margin: .75rem auto; max-height: 420px; }
.prose strong{ font-weight:600; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding: .68rem 1rem; border-radius: 10px; }
.btn + .btn{ margin-left: .85rem; }
.actions{ display:flex; flex-wrap:wrap; gap: .6rem .85rem; }

.grid{ gap: 24px; }

/* Case page tuning */
.case .card{ padding: 20px; }
.case h3{ margin: .5rem 0 .25rem; }


/* === Unified top spacing across all pages === */
.notice-bar{margin:0 auto 16px; display:block;}
body > .grid:first-of-type{margin-top:24px;}
.card h1:first-child{margin-top:0;}
.prose h1:first-child{margin-top:0;}
.grid{gap:24px;}