*{box-sizing:border-box}

:root[data-theme="light"]{
  --bg:#E7E0D2;
  --surface:#DCD3C0;
  --text:#33302B;
  --secondary:#8F7C6A;
  --muted:#736556;
  --amber:#C97B5B;
  --border:rgba(51,48,43,.09);
}
:root[data-theme="dark"]{
  --bg:#1B1A17;
  --surface:#242220;
  --text:#EDE7DE;
  --secondary:#A79C8E;
  --muted:#A79C8E;
  --amber:#D98F6E;
  --border:rgba(237,231,222,.08);
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  background:radial-gradient(120% 60% at 50% -8%, rgba(201,123,91,.07), transparent 55%), var(--bg);
  color:var(--text);
}
a{color:var(--amber);text-decoration:none}

/* ---- layout containers ---- */
.container-wide{max-width:1180px;margin:0 auto;padding:0 56px}
.container-narrow{max-width:600px;margin:0 auto;padding:0 24px}
.container-page{max-width:1180px;margin:0 auto;padding:0 32px}
.container-blog{max-width:820px;margin:0 auto;padding:0 28px}

/* ---- desktop / mobile switching ---- */
@media (min-width:761px){
  .home-mobile,.nav-mobile{display:none !important}
}
@media (max-width:760px){
  .home-desktop,.nav-desktop{display:none !important}
  .grid-lg{grid-template-columns:repeat(2,1fr) !important}
}

/* ---- shared bits ---- */
.eyebrow{
  font-family:Monaco,'Courier New',monospace;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--secondary);
}
.mono-tag{
  font-family:Monaco,'Courier New',monospace;
  font-size:11px;color:var(--secondary);
  background:var(--bg);padding:3px 7px;border-radius:3px;
}
.accent{color:var(--amber)}
.post-date{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--muted)}
.photo-stripes{
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 10px,var(--bg) 10px,var(--bg) 20px);
}

/* ---- top nav ---- */
.topnav{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 0;border-bottom:1px solid var(--border);
}
.brand{font-family:Georgia,serif;font-size:21px;color:var(--text)}
.brand-active{padding-bottom:4px;border-bottom:2px solid var(--amber)}
.topnav-links{display:flex;align-items:center;gap:36px}
.topnav-links a{font-size:14px;color:var(--secondary)}
.topnav-links a.active{color:var(--text)}
.topnav-links a:hover{color:var(--text)}
.theme-toggle{
  appearance:none;cursor:pointer;width:30px;height:30px;border-radius:15px;
  border:1px solid var(--border);background:transparent;color:var(--secondary);
  font-size:14px;display:flex;align-items:center;justify-content:center;
}
.lang-toggle{
  appearance:none;cursor:pointer;height:30px;padding:0 12px;border-radius:15px;
  border:1px solid var(--border);background:transparent;color:var(--secondary);
  font-family:Monaco,'Courier New',monospace;font-size:11px;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;
}
.lang-toggle:hover{color:var(--text)}
.lang-toggle-m{
  appearance:none;cursor:pointer;background:transparent;border:none;
  padding:10px 0;text-align:left;font-size:15px;color:var(--secondary);
  display:block;
}

/* mobile nav */
.nav-mobile .topnav,.home-mobile .topnav{padding:20px 0}
.nav-mobile .brand,.home-mobile .brand{font-size:18px}
.menu-toggle{
  appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--border);width:34px;height:34px;border-radius:8px;
  color:var(--text);font-size:16px;display:flex;align-items:center;justify-content:center;
}
.mobile-menu{
  display:flex;flex-direction:column;gap:2px;
  padding:18px 0;border-bottom:1px solid var(--border);
}
.mobile-menu[hidden]{display:none}
.mobile-menu a{font-size:15px;color:var(--secondary);padding:10px 0}
.mobile-menu a.active{color:var(--text)}
.mobile-theme{
  appearance:none;cursor:pointer;background:transparent;border:none;
  width:auto;height:auto;border-radius:0;
  padding:10px 0;text-align:left;font-size:15px;color:var(--secondary);
  display:block;
}

/* ---- home desktop ---- */
.hero-grid{
  display:grid;grid-template-columns:240px 1fr;gap:64px;
  padding:64px 0 56px;
}
.reading-col{display:flex;flex-direction:column;gap:16px}
.featured-post{display:flex;flex-direction:column;height:100%}
.book-cover-lg{
  width:200px;height:288px;border:1px solid var(--border);border-radius:4px;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 9px,var(--bg) 9px,var(--bg) 18px);
  display:flex;align-items:flex-end;justify-content:center;padding:12px;
  overflow:hidden;
}
.cover-img{width:100%;height:100%;object-fit:cover;display:block}
.reading-title{font-family:Georgia,serif;font-size:16px;color:var(--text)}
.reading-since{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--secondary)}

.featured-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.featured-post h2{
  font-family:Georgia,serif;font-weight:400;font-size:32px;line-height:1.25;
  margin:0 0 18px;color:var(--text);
}
.feat-text-fade{
  position:relative;max-width:56ch;margin:0 0 22px;
  flex:1 1 auto;min-height:0;
}
.feat-text-fade p{
  font-size:16px;line-height:1.7;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;
  line-clamp:9;overflow:hidden;
}
.feat-text-fade::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:40px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.read-link{
  font-size:14px;color:var(--amber);
  border-bottom:1px solid var(--amber);padding-bottom:2px;
  flex:none;align-self:flex-start;
}
.read-link:hover{color:var(--secondary)}

.presentacion-wrap{padding:8px 0 56px}
.presentacion{border-left:2px solid var(--amber);padding:2px 0 2px 28px;max-width:760px}
.presentacion-text{
  font-family:Georgia,serif;font-size:22px;line-height:1.55;
  color:var(--text);margin:16px 0 0;
}
.presentacion-tagline{
  font-family:Georgia,serif;font-style:italic;font-size:18px;
  color:var(--secondary);margin:18px 0 0;
}
.presentacion-stack{
  font-family:Monaco,'Courier New',monospace;font-size:12.5px;
  color:var(--muted);margin:24px 0 0;letter-spacing:.3px;
}

/* ---- home mobile ---- */
.mobile-hero{padding:44px 0 8px}
.mobile-hero h1{
  font-family:Georgia,serif;font-weight:400;font-size:32px;line-height:1.15;
  margin:0;color:var(--text);
}
.mobile-hero p{font-size:16px;line-height:1.7;color:var(--muted);margin:22px 0 0}

.mobile-reading{display:flex;align-items:center;gap:16px;margin:48px 0 0}
.book-cover-sm{
  width:56px;height:80px;flex:none;border:1px solid var(--border);border-radius:3px;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 7px,var(--bg) 7px,var(--bg) 14px);
  overflow:hidden;
}
.mobile-reading-info{display:flex;flex-direction:column;gap:3px}
.mobile-reading-info .eyebrow{font-size:10.5px}
.reading-since-sm{font-size:12.5px;color:var(--muted)}

.mobile-lastpost{
  margin:40px 0 0;display:block;color:inherit;
}
.mobile-lastpost:active{opacity:.7}
.mobile-lastpost-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.mobile-lastpost-meta .eyebrow{font-size:10.5px}
.mobile-lastpost-meta .post-date{font-size:11px}
.mobile-lastpost-title{
  font-family:Georgia,serif;font-size:21px;line-height:1.3;
  color:var(--text);display:block;
}
.feat-text-fade-m{
  position:relative;margin:10px 0 0;
}
.feat-text-fade-m p{
  font-size:14.5px;line-height:1.65;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  line-clamp:4;overflow:hidden;
}
.feat-text-fade-m::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}

/* ---- page heads (proyectos/libros/blogs) ---- */
.page-head{padding:56px 0 8px}
.page-head h1{font-family:Georgia,serif;font-weight:400;font-size:40px;margin:0;color:var(--text)}
.page-head p{font-size:16px;line-height:1.6;color:var(--muted);margin:16px 0 0;max-width:56ch}
.section-label{padding:40px 0 16px}
.section-label + .section-label{padding-top:8px}

/* ---- proyectos grids ---- */
.grid-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:48px}
.grid-sm{display:grid;grid-template-columns:repeat(auto-fill,180px);gap:20px;padding-bottom:56px}

.project-card{cursor:pointer;display:flex;flex-direction:column;gap:14px}
.project-card .project-photo{
  width:100%;aspect-ratio:4/3;border:1px solid var(--border);border-radius:6px;
  display:flex;align-items:flex-end;justify-content:center;padding:12px;
  overflow:hidden;
}
.project-card .project-photo.has-img{padding:0}
.project-img{width:100%;height:100%;object-fit:cover;display:block}
.project-card .project-title{font-family:Georgia,serif;font-size:19px;color:var(--text);margin-bottom:5px}
.project-card .project-brief{font-size:14px;line-height:1.5;color:var(--muted)}

.project-card.small{gap:10px}
.project-card.small .project-photo{
  border-radius:5px;padding:8px;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 8px,var(--bg) 8px,var(--bg) 16px);
}
.project-card.small .mono-tag{font-size:10px;background:transparent;padding:0}
.project-card.small .project-title{font-family:inherit;font-size:13.5px;margin-bottom:3px}
.project-card.small .project-brief{font-size:12px;line-height:1.4}

/* ---- libros ---- */
.grid-books{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:28px;padding:40px 0 56px}
.book-card{display:flex;flex-direction:column;gap:8px}
.book-card .book-photo{
  width:100%;aspect-ratio:2/3;border:1px solid var(--border);border-radius:4px;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 8px,var(--bg) 8px,var(--bg) 16px);
  display:flex;align-items:flex-end;justify-content:center;padding:8px;
  overflow:hidden;
}
.book-card .book-photo.has-img{padding:0}
.book-img{width:100%;height:100%;object-fit:cover;display:block}
.book-card .mono-tag{font-size:10px;background:transparent;padding:0}
.book-card .book-title{font-family:Georgia,serif;font-size:14px;line-height:1.3;color:var(--text)}

/* ---- blogs ---- */
.blog-list{padding:8px 0 56px}
.blog-entry{
  display:block;padding:26px 0;border-top:1px solid var(--border);color:inherit;
}
.blog-entry:first-of-type{border-top:none}
.blog-entry:hover{opacity:.7}
.blog-entry-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:8px;
}
.blog-entry-meta .date{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--secondary)}
.blog-entry-meta .mins{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--muted)}
.blog-entry h3{
  font-family:Georgia,serif;font-weight:400;font-size:23px;line-height:1.3;
  margin:0 0 6px;color:var(--text);
}
.blog-entry p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}

/* ---- post ---- */
.post{padding:48px 0 40px}
.post-back{
  font-family:Monaco,'Courier New',monospace;font-size:12px;
  color:var(--secondary);display:inline-block;margin-bottom:28px;
}
.post-back:hover{color:var(--amber)}
.post-meta{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.post-meta .date{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--secondary)}
.post-meta .mins{font-family:Monaco,'Courier New',monospace;font-size:12px;color:var(--muted)}
.post h1{
  font-family:Georgia,serif;font-weight:400;font-size:34px;line-height:1.25;
  margin:0 0 26px;color:var(--text);
}
.post-body p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 18px}
.post-img{
  width:100%;height:auto;display:block;
  border:1px solid var(--border);border-radius:6px;
  margin:6px 0 26px;
  cursor:zoom-in;
}

/* ---- lightbox de imagenes ---- */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,9,8,.9);
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:1100;
  overflow:auto;
}
.lightbox-overlay[hidden]{display:none}
.lightbox-close{
  position:fixed;top:16px;right:16px;
  background:rgba(20,18,15,.6);border-color:rgba(237,231,222,.3);
  color:#EDE7DE;
}
#lightbox-img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:4px;
  cursor:zoom-out;
}

/* ---- footer ---- */
.site-footer{
  border-top:1px solid var(--border);
  padding:28px 0 56px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.home-desktop .site-footer{padding-bottom:48px}
.mobile-footer{padding-bottom:40px;margin-top:16px}
.site-footer a{font-size:14px;color:var(--secondary)}
.site-footer a:hover{color:var(--amber)}

/* ---- modal ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,18,15,.55);
  display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:1000;
}
.modal-overlay[hidden]{display:none}
.modal-card{
  background:var(--bg);border-radius:8px;max-width:640px;width:100%;
  max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
}
.modal-close{
  position:absolute;top:14px;right:14px;appearance:none;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);
  width:30px;height:30px;border-radius:15px;color:var(--text);font-size:13px;
  z-index:1;
}
.modal-photo{
  width:100%;min-height:200px;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 10px,var(--bg) 10px,var(--bg) 20px);
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.modal-photo.has-img{padding:0;background:var(--surface)}
.modal-img{width:100%;height:auto;max-height:60vh;object-fit:contain;display:block}
.modal-photo .mono-tag{background:transparent;padding:0}
.modal-head{padding:28px 36px 10px}
.modal-head h2{font-family:Georgia,serif;font-weight:400;font-size:26px;margin:0;color:var(--text)}
.modal-body{padding:0 36px 34px}
.modal-body p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}