/*
Theme Name: Loiso Cinema
Description: Tema custom para loiso.ar — identidad personal-profesional (presales técnico + cine/astronomía/música), diseño oscuro con gradientes tipo aurora, tarjetas glass y bento grid.
Author: Octavio Loiso
Version: 1.2
*/

:root {
  --bg: #07080d;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.075);
  --text: #F3F1EC;
  --text-dim: #9A9CAA;
  --text-dimmer: #6C6E7C;
  --magenta: #FF3EA5;
  --violet: #7C5CFF;
  --cyan: #3EE8E0;
  --amber: #F2A93B;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
a, button { touch-action:manipulation; }
::selection { background:var(--magenta); color:#07080d; }
em { font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; }
a { color:inherit; }

/* ---------- Ambient layers ---------- */
#stars { position:fixed; inset:0; z-index:0; pointer-events:none; }

.aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora .blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35; will-change:transform; }
.aurora .b1 { width:56vw; height:56vw; left:-14vw; top:-18vw; background:radial-gradient(circle at 30% 30%, var(--violet), transparent 70%); animation:drift1 26s ease-in-out infinite; }
.aurora .b2 { width:46vw; height:46vw; right:-12vw; top:6vw; background:radial-gradient(circle at 70% 30%, var(--magenta), transparent 70%); opacity:0.22; animation:drift2 32s ease-in-out infinite; }
.aurora .b3 { width:50vw; height:50vw; left:18vw; top:60vh; background:radial-gradient(circle at 50% 50%, var(--cyan), transparent 70%); opacity:0.16; animation:drift3 38s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,3vw) scale(1.08);} }
@keyframes drift2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-3vw,4vw) scale(0.95);} }
@keyframes drift3 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,-3vw) scale(1.05);} }

.grain { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; }

.spotlight {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,20%), rgba(124,92,255,0.10), transparent 70%);
}

.wrap { position:relative; z-index:3; }

/* ---------- Nav ---------- */
nav.top {
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:rgba(7,8,13,0.35);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color 0.3s ease, background 0.3s ease;
}
nav.top.scrolled { border-bottom-color:var(--line); background:rgba(7,8,13,0.6); }
nav.top .brand { font-weight:600; font-size:15px; letter-spacing:0.02em; display:flex; align-items:center; gap:10px; text-decoration:none; }
nav.top .brand .mark { width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--magenta),var(--violet)); box-shadow:0 0 12px var(--violet); }
nav.top .links { display:flex; gap:36px; font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-dim); letter-spacing:0.04em; }
nav.top .links a { color:inherit; text-decoration:none; transition:color 0.2s ease; position:relative; }
nav.top .links a:hover { color:var(--text); }
nav.top .links a::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease; }
nav.top .links a:hover::after { transform:scaleX(1); }

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle {
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  padding:0; margin:0; z-index:41; position:relative;
}
.nav-toggle span { display:block; width:20px; height:2px; background:var(--text); transition:transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-scrim {
  display:none;
  position:fixed; inset:0; z-index:38;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}

@media (max-width:720px){
  .nav-toggle { display:flex; }
  .nav-scrim { display:block; }
  .nav-scrim.open { opacity:1; pointer-events:auto; }

  nav.top .links {
    display:flex;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw,320px);
    background:rgba(7,8,13,0.94);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-left:1px solid var(--line);
    padding:100px 32px 32px;
    transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(.2,.7,.2,1);
    z-index:39;
    font-size:15px;
  }
  nav.top .links.open { transform:translateX(0); }
  nav.top .links a { padding:16px 0; border-bottom:1px solid var(--line); }
  nav.top .links a::after { display:none; }

  /* Lighten ambient effects for smoother scroll/perf on phones */
  .aurora .blob { filter:blur(46px); }
  .grain, .spotlight { display:none; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ---------- Scene divider ---------- */
.scene {
  display:flex; align-items:center; gap:14px;
  padding:96px clamp(20px,5vw,64px) 0;
  color:var(--text-dimmer);
}
.scene .pill {
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em;
  padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
}
.scene .pill .dot { width:5px; height:5px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber); }
.scene::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); }

/* ---------- Hero ---------- */
header.hero {
  min-height:100vh;
  display:grid; grid-template-columns:1.25fr 0.9fr; align-items:center; gap:40px;
  padding:120px clamp(20px,5vw,64px) 60px;
  position:relative;
}
@media (max-width:960px){ header.hero{ grid-template-columns:1fr; min-height:auto; padding-top:140px; } }

.eyebrow {
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:26px;
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 10px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
}
.eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

h1.title {
  font-weight:700;
  font-size:clamp(44px, 6.4vw, 92px);
  line-height:1.02;
  letter-spacing:-0.02em;
  position:relative;
}
h1.title .line { display:block; }
h1.title .grad { background:linear-gradient(100deg, var(--text) 30%, var(--violet) 60%, var(--magenta) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1.title .glitch-r, h1.title .glitch-b { position:absolute; top:0; left:0; width:100%; opacity:0; pointer-events:none; }
h1.title:hover .glitch-r { opacity:0.55; color:var(--magenta); transform:translate(2px,0); animation:glitchshift 0.5s infinite; }
h1.title:hover .glitch-b { opacity:0.55; color:var(--cyan); transform:translate(-2px,0); animation:glitchshift 0.5s infinite reverse; }
@keyframes glitchshift { 0%,100%{ transform:translate(2px,0); } 50%{ transform:translate(-1.5px,1px); } }

.tagline {
  max-width:560px;
  margin-top:26px;
  font-size:clamp(16px,1.7vw,19px);
  line-height:1.6;
  color:var(--text-dim);
  font-weight:400;
}
.tagline b { color:var(--text); font-size:1.08em; font-weight:600; }

.hero-chips { margin-top:36px; display:flex; gap:10px; flex-wrap:wrap; }
.chip {
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-dim);
  padding:9px 14px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.chip b { color:var(--text); font-weight:500; font-size:12.5px; }
.chip span.k { color:var(--amber); font-size:9.5px; letter-spacing:0.12em; }

.scroll-cue {
  margin-top:64px;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dimmer);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .bar { width:1px; height:30px; background:linear-gradient(var(--cyan),transparent); animation:scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* Hero orb graphic */
.orb-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:380px; }
.orb {
  width:min(60vw,340px); height:min(60vw,340px); border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), transparent 22%),
    conic-gradient(from 210deg, var(--violet), var(--magenta), var(--amber), var(--cyan), var(--violet));
  box-shadow:0 0 90px rgba(124,92,255,0.35), inset 0 0 60px rgba(0,0,0,0.5);
  position:relative;
  animation:spin 46s linear infinite;
}
.orb::after { content:''; position:absolute; inset:10%; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 40px rgba(0,0,0,0.6); }
@keyframes spin { to{ transform:rotate(360deg); } }
.ring { position:absolute; border:1px solid var(--line-strong); border-radius:50%; }
.ring.r1 { width:calc(min(60vw,340px) + 60px); height:calc(min(60vw,340px) + 60px); animation:spin 70s linear infinite reverse; }
.ring.r2 { width:calc(min(60vw,340px) + 120px); height:calc(min(60vw,340px) + 120px); opacity:0.5; animation:spin 90s linear infinite; }
.ring .sat { position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }

/* ---------- About ---------- */
section.about {
  padding:36px clamp(20px,5vw,64px) 60px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;
  align-items:start;
}
@media (max-width:860px){ section.about{ grid-template-columns:1fr; gap:32px; } }

.section-head { font-weight:700; font-size:clamp(30px,3.6vw,42px); letter-spacing:-0.01em; margin-bottom:22px; line-height:1.12; }
.about p { line-height:1.8; color:var(--text-dim); font-size:15.5px; margin-bottom:16px; font-weight:400; }
.about p b { color:var(--text); font-weight:600; }

.glass-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.glass-card:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.glass-card::before {
  content:'●  LIVE'; position:absolute; top:18px; right:20px;
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--magenta); letter-spacing:0.1em;
}
.interest-row { display:flex; justify-content:space-between; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.interest-row:last-child { border-bottom:none; }
.interest-row .label { color:var(--text-dim); font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.04em; }
.interest-row .val { color:var(--text); text-align:right; font-weight:600; }
.interest-row .val.c1{ color:var(--cyan); } .interest-row .val.c2{ color:var(--amber); } .interest-row .val.c3{ color:var(--magenta); }

/* ---------- Timeline ---------- */
section.timeline { padding:36px clamp(20px,5vw,64px) 80px; }
.tl { position:relative; margin-top:44px; padding-left:34px; }
.tl::before { content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--violet), var(--cyan), transparent); }
.tl-item { position:relative; padding:0 0 40px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before {
  content:''; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--cyan); box-shadow:0 0 0 4px rgba(62,232,224,0.12);
}
.tl-item.current::before { border-color:var(--magenta); box-shadow:0 0 0 4px rgba(255,62,165,0.16), 0 0 16px var(--magenta); }
.tl-item .tc { font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--amber); letter-spacing:0.04em; }
.tl-item .role { font-size:19px; font-weight:600; margin-top:6px; }
.tl-item .org { color:var(--cyan); font-size:14px; margin-top:3px; font-weight:500; }
.tl-item .period { color:var(--text-dimmer); font-size:12px; font-family:'JetBrains Mono', monospace; margin-top:8px; }
.tl-item.current .role::after {
  content:'ACTUAL'; margin-left:10px; font-family:'JetBrains Mono', monospace;
  font-size:9px; color:var(--bg); background:var(--magenta); padding:3px 8px; border-radius:999px; letter-spacing:0.08em; vertical-align:middle;
}

/* ---------- Fuera de oficina — bento ---------- */
section.offhours { padding:36px clamp(20px,5vw,64px) 100px; }
section.offhours > p.lead { color:var(--text-dim); max-width:600px; margin:18px 0 44px; line-height:1.75; font-size:15.5px; }
.bento { display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:16px; }
@media (max-width:860px){ .bento{ grid-template-columns:1fr; } }
.bento .cine { grid-row:span 2; }
.cell {
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:32px 30px; display:flex; flex-direction:column; min-height:200px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  position:relative; overflow:hidden;
}
.cell:hover { transform:translateY(-5px); border-color:var(--line-strong); }
.cell.cine:hover { box-shadow:0 20px 50px -20px rgba(255,62,165,0.35); }
.cell.music:hover { box-shadow:0 20px 50px -20px rgba(242,169,59,0.3); }
.cell.stars:hover { box-shadow:0 20px 50px -20px rgba(62,232,224,0.3); }
.cell .badge { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:16px; }
.cell.cine .badge { background:linear-gradient(135deg, rgba(255,62,165,0.25), rgba(255,62,165,0.06)); color:var(--magenta); }
.cell.music .badge { background:linear-gradient(135deg, rgba(242,169,59,0.25), rgba(242,169,59,0.06)); color:var(--amber); }
.cell.stars .badge { background:linear-gradient(135deg, rgba(62,232,224,0.25), rgba(62,232,224,0.06)); color:var(--cyan); }
.cell .tag { font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.16em; margin-bottom:10px; }
.cell.cine .tag{ color:var(--magenta); } .cell.music .tag{ color:var(--amber); } .cell.stars .tag{ color:var(--cyan); }
.cell h3 { font-size:23px; font-weight:600; letter-spacing:-0.01em; margin-bottom:14px; }
.cell p { color:var(--text-dim); font-size:14.5px; line-height:1.7; flex:1; font-weight:400; }
.cell .stat { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--text-dim); }
.cell .stat b { color:var(--text); font-weight:500; }
.cell.cine .statgrid, .cell.music .statgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.cell.cine .statgrid div span, .cell.music .statgrid div span { display:block; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--text-dimmer); letter-spacing:0.06em; margin-bottom:4px; }
.cell.cine .statgrid div b, .cell.music .statgrid div b { font-size:20px; font-weight:700; color:var(--text); }

/* ---------- Footer / contact ---------- */
footer.contact {
  margin:0 clamp(20px,5vw,64px) 60px;
  padding:64px clamp(28px,5vw,64px);
  border-radius:28px;
  background:linear-gradient(135deg, rgba(124,92,255,0.14), rgba(255,62,165,0.08));
  border:1px solid var(--line);
  position:relative; overflow:hidden;
  text-align:center;
}
footer.contact h2 { font-size:clamp(30px,4.4vw,52px); font-weight:700; letter-spacing:-0.02em; margin-bottom:16px; }
footer.contact p { color:var(--text-dim); max-width:480px; margin:0 auto 34px; font-size:15px; line-height:1.7; }
footer.contact .links { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
footer.contact .links a {
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
  text-decoration:none; padding:12px 22px; border-radius:999px;
  background:var(--surface-strong); border:1px solid var(--line-strong);
  transition:transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
footer.contact .links a:hover { transform:translateY(-2px); border-color:var(--cyan); background:rgba(62,232,224,0.1); }

.pagefoot { text-align:center; padding:30px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dimmer); }
.pagefoot a { color:var(--text-dimmer); text-decoration:none; }
.pagefoot a:hover { color:var(--text-dim); }

/* ---------- Blog: nav active state ---------- */
nav.top .links a.active-nav { color:var(--cyan); }

/* ---------- Blog: index ---------- */
.blog-hero { padding:140px clamp(20px,5vw,64px) 34px; max-width:900px; }
.blog-title { font-weight:700; font-size:clamp(34px,5vw,58px); line-height:1.1; letter-spacing:-0.02em; margin-top:22px; }
.blog-title .grad { background:linear-gradient(100deg, var(--text) 20%, var(--violet) 55%, var(--magenta) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.blog-hero .tagline { margin-top:20px; }

.blog-filters { display:flex; gap:10px; flex-wrap:wrap; padding:0 clamp(20px,5vw,64px) 40px; }
.blog-filters a { font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.06em; color:var(--text-dim); text-decoration:none; padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); transition:all 0.2s ease; }
.blog-filters a:hover, .blog-filters a.active { color:var(--text); border-color:var(--line-strong); background:var(--surface-strong); }

.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; padding:0 clamp(20px,5vw,64px) 60px; }
.post-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:transform 0.3s ease, border-color 0.3s ease; }
.post-card:hover { transform:translateY(-5px); border-color:var(--line-strong); }
.post-card-media { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-strong); }
.post-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.post-card:hover .post-card-media img { transform:scale(1.05); }
.post-card-media-fallback { width:100%; height:100%; background:linear-gradient(135deg, rgba(124,92,255,0.18), rgba(255,62,165,0.1)); }
.post-card-body { padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.post-card-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cat-badge { font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--line-strong); }
.cat-badge.accent-cyan { color:var(--cyan); border-color:rgba(62,232,224,0.35); background:rgba(62,232,224,0.08); }
.cat-badge.accent-magenta { color:var(--magenta); border-color:rgba(255,62,165,0.35); background:rgba(255,62,165,0.08); }
.cat-badge.accent-amber { color:var(--amber); border-color:rgba(242,169,59,0.35); background:rgba(242,169,59,0.08); }
.cat-badge.accent-violet { color:var(--violet); border-color:rgba(124,92,255,0.35); background:rgba(124,92,255,0.08); }
.cat-badge.accent-text-dim { color:var(--text-dim); }
.post-card-title { font-size:19px; font-weight:600; line-height:1.3; margin-bottom:10px; }
.post-card-title a { text-decoration:none; color:var(--text); }
.post-card-title a:hover { color:var(--cyan); }
.post-card-excerpt { color:var(--text-dim); font-size:14px; line-height:1.65; flex:1; margin-bottom:16px; }
.post-card-meta { font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-dimmer); display:flex; gap:8px; align-items:center; }

.blog-empty { padding:40px clamp(20px,5vw,64px) 100px; color:var(--text-dim); }

.pagination { display:flex; justify-content:center; gap:8px; padding:20px clamp(20px,5vw,64px) 100px; flex-wrap:wrap; }
.pagination .page-numbers { font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-dim); text-decoration:none; padding:10px 16px; border-radius:10px; background:var(--surface); border:1px solid var(--line); }
.pagination .page-numbers.current { color:var(--bg); background:var(--cyan); border-color:var(--cyan); font-weight:600; }
.pagination .page-numbers:hover:not(.current) { border-color:var(--line-strong); color:var(--text); }

/* ---------- Blog: single post ---------- */
.single-post { max-width:760px; margin:0 auto; padding:140px clamp(20px,5vw,40px) 40px; }
.back-link { display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-dim); text-decoration:none; margin-bottom:32px; }
.back-link:hover { color:var(--cyan); }
.post-header .post-card-cats { margin-bottom:18px; }
.post-title { font-size:clamp(30px,4.6vw,48px); font-weight:700; line-height:1.12; letter-spacing:-0.02em; margin-bottom:20px; }
.post-header .post-card-meta { margin-bottom:32px; }
.post-hero-media { width:100%; border-radius:20px; overflow:hidden; margin-bottom:40px; border:1px solid var(--line); }
.post-hero-media img { width:100%; display:block; }

.entry-content { color:var(--text-dim); font-size:16.5px; line-height:1.85; }
.entry-content p { margin-bottom:22px; }
.entry-content h2 { color:var(--text); font-size:28px; font-weight:700; margin:44px 0 18px; letter-spacing:-0.01em; }
.entry-content h3 { color:var(--text); font-size:22px; font-weight:600; margin:36px 0 14px; }
.entry-content a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.entry-content strong, .entry-content b { color:var(--text); font-weight:600; }
.entry-content em { color:var(--text); }
.entry-content blockquote { border-left:2px solid var(--violet); padding:4px 0 4px 22px; margin:28px 0; color:var(--text); font-family:'Instrument Serif', serif; font-style:italic; font-size:20px; }
.entry-content ul, .entry-content ol { margin:0 0 22px 22px; }
.entry-content li { margin-bottom:8px; }
.entry-content img { max-width:100%; border-radius:14px; margin:28px 0; }
.entry-content hr { border:none; border-top:1px solid var(--line); margin:44px 0; }
.entry-content code { font-family:'JetBrains Mono', monospace; background:var(--surface-strong); padding:2px 6px; border-radius:5px; font-size:0.9em; }

.share-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:52px 0 20px; padding-top:32px; border-top:1px solid var(--line); }
.share-bar .label { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--text-dimmer); margin-right:6px; }
.share-btn { font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text); text-decoration:none; padding:10px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); cursor:pointer; transition:all 0.2s ease; display:inline-flex; align-items:center; gap:6px; }
.share-btn:hover { border-color:var(--cyan); background:rgba(62,232,224,0.1); transform:translateY(-2px); }
.share-btn.copied { border-color:var(--cyan); color:var(--cyan); }