:root{
  --bg:#FFFFFF; --bg-soft:#F7F9FC; --text:#212121; --muted:#6B7280;
  --border:#E5E7EB; --blue:#1B5AFF; --blue-light:#EEF2FF; --r:16px;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--text);line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
  background-color:#EEF1F5;
  background-image:
    radial-gradient(rgba(17,24,39,.035) 1px,transparent 1px),
    linear-gradient(180deg,#FBFCFE 0%,#E9EDF3 100%);
  background-size:26px 26px,auto;
  background-repeat:repeat,no-repeat;
  background-attachment:fixed}
a{color:inherit;text-decoration:none}
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.hdr-brand{font-weight:800;letter-spacing:.02em}
.btn-bracket{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border:1px solid var(--blue);color:var(--blue);border-radius:10px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em}
.btn-bracket:hover{background:var(--blue-light)}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.all-posts-link{transition:color .15s}
.all-posts-link:hover{color:var(--blue)}
/* Featured (latest) post — a card with the text and the cover artwork side by
   side, so the cover reads as intentional artwork rather than a boxed thumbnail. */
.latest{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg);
  padding:32px;margin-top:8px;box-shadow:0 10px 36px rgba(17,24,39,.05);
  transition:box-shadow .2s,transform .2s}
.latest:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(27,90,255,.10)}
.latest.has-media{grid-template-columns:1.05fr .95fr}
.latest-main h2{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:12px 0}
.latest-main p{color:var(--muted);margin-bottom:4px}
.latest-media{display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;
  padding:18px;min-height:240px;height:100%}
.latest-cover{width:100%;max-height:300px;object-fit:contain;border-radius:8px;display:block}
@media(max-width:720px){.latest.has-media{grid-template-columns:1fr}}
.byline{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:13px}
.byline img{width:28px;height:28px;border-radius:50%}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:40px 0}
.card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,transform .2s;background:var(--bg)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(27,90,255,.12)}
.card img{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--bg-soft)}
.card-body{padding:18px}
.card-body h3{font-size:18px;font-weight:800;margin:8px 0;letter-spacing:-.01em}
.post-frame{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;
  padding:12px 28px;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.post-frame a{font-size:13px;font-weight:700;color:var(--blue)}
.post-iframe{width:100%;height:calc(100vh - 58px);border:0;display:block}
footer{margin-top:auto;border-top:1px solid var(--border);padding:32px 28px;text-align:center;color:var(--muted);font-size:13px;background:var(--bg-soft)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:12px;border-bottom:1px solid var(--border);font-size:14px}
/* ---- Post editor: 50/50 form | live preview ---- */
.editor{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.editor-form{padding:32px 32px 40px;min-width:0}
.editor-preview{position:sticky;top:59px;height:calc(100vh - 59px);
  display:flex;flex-direction:column;gap:10px;
  padding:24px 32px;border-left:1px solid var(--border);background:#fff}
.editor-preview .preview-iframe{flex:1;width:100%;height:auto}
@media(max-width:900px){
  .editor{grid-template-columns:1fr}
  .editor-preview{position:static;height:70vh;border-left:0;border-top:1px solid var(--border)}
}

.form-field{display:block;margin:0 0 18px}
.form-field label{display:block;font-weight:700;margin-bottom:6px;font-size:14px}
.form-field label.check-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-field input,.form-field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:8px;font-family:inherit;font-size:14px}
.form-field label.check-label input{width:auto}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-light)}
.form-field textarea{min-height:260px;font-family:var(--mono);font-size:13px;line-height:1.5;resize:vertical}
.field-badge{display:inline-block;margin-left:6px;font-family:var(--mono);font-weight:400;
  font-size:10px;letter-spacing:.02em;text-transform:none;color:var(--blue);
  background:var(--blue-light);border-radius:100px;padding:2px 9px;vertical-align:middle}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:24px}
.preview-iframe{width:100%;height:420px;border:1px solid var(--border);border-radius:8px;background:#fff}
.btn{display:inline-block;padding:10px 22px;border-radius:10px;border:none;cursor:pointer;font-weight:700;
  font-family:inherit;background:var(--blue);color:#fff}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.danger{background:#DC2626;color:#fff}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.actions form{margin:0}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;font-size:16px;line-height:1}

/* ---- Auth gate: blurred skeleton + login card ---- */
/* Fill exactly the space between the sticky header and footer (body is a
   flex column) and clip the tall skeleton, so the overlay centers the login
   card on-screen instead of within the full skeleton height. Full-bleed: the
   blurred skeleton spans the whole viewport width (no .wrap max-width). */
.gate{position:relative;padding:36px 28px 0;flex:1 1 0;min-height:0;overflow:hidden}
/* Softer blur + full opacity so the shapes still read clearly as post cards. */
.gate-skeleton.blurred{filter:blur(8px);pointer-events:none;user-select:none}
/* Skeleton cards get a real card look (white, border, shadow) so, once blurred,
   the grid is obviously a set of post blocks rather than a vague haze. */
.gate-skeleton .card{box-shadow:0 10px 30px rgba(17,24,39,.10)}
/* Water-like motion: each tile drifts/bobs/tilts on its own random vector,
   phase and speed (set inline), so the blurred surface ripples like waves on
   water rather than pulsing in sync. Amplitudes/timing come from inline vars. */
.gate-skeleton .card,.gate-skeleton .latest{
  animation:sk-wave 6s ease-in-out infinite;will-change:transform}
@keyframes sk-wave{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(var(--wx,7px),var(--wy,-11px)) rotate(var(--wr,1deg))}
  66%{transform:translate(calc(-1*var(--wx,7px)),calc(-1*var(--wy,-11px))) rotate(calc(-1*var(--wr,1deg)))}
}
@media (prefers-reduced-motion: reduce){
  .gate-skeleton .card,.gate-skeleton .latest{animation:none}
}
.sk{background-image:linear-gradient(105deg,#ccd6e6,#e4eaf4 50%,#ccd6e6);border-radius:6px}
.sk-label{width:120px;height:11px;margin:6px 0}
.sk-h2{width:70%;height:38px;margin:12px 0}
.sk-h3{width:85%;height:22px;margin:10px 0}
.sk-line{width:100%;height:13px;margin:7px 0}
.sk-line.short{width:55%}
/* Cover/thumbnail blocks tinted brand-blue so they clearly read as images. */
.sk-cover,.sk-card-img{background-image:linear-gradient(120deg,#a9c2f5 0%,#cfdcfb 45%,#eaf0fd 100%);
  border-radius:6px}
.sk-cover{width:360px;max-width:100%;height:200px;margin-top:16px}
.sk-card-img{width:100%;aspect-ratio:16/9;border-radius:0}
.gate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 24px 60px rgba(27,90,255,.18);padding:40px 44px;text-align:center;max-width:440px}
.gate-card h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px}
.gate-card p{color:var(--muted);margin-bottom:24px}
.gate-card .btn{font-size:15px;padding:12px 28px}