/* Journal de Maison Barron (22 oct 2026). Mismos tokens y tipografías que index.html */
@font-face { font-family: 'Cochin'; src: url('/fonts/cochin.otf') format('opentype'); font-display: swap; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --beige-light: #EDE8DF; --beige-mid: #E5DDD2; --beige-deep: #D8CFC2; --black: #15140F; --black-text: #1A1A18; --muted: #6A6860; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; background: var(--beige-light); color: var(--black-text); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
#site-header { position: sticky; top: 0; z-index: 1000; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; background: rgba(237,232,223,.97); box-shadow: 0 1px 0 rgba(26,26,24,.08); }
.header-nav { display: flex; gap: 32px; align-items: center; }
.header-nav a, .header-right a { font-size: 10px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--black-text); text-decoration: none; }
.header-nav a:hover, .header-right a:hover { opacity: .45; }
.header-nav a[aria-current="page"] { border-bottom: 1px solid var(--black-text); padding-bottom: 3px; }
.header-logo-sticky { font-family: 'Cochin', Georgia, serif; font-size: 17px; letter-spacing: .12em; color: var(--black-text); text-decoration: none; white-space: nowrap; }
.header-right { display: flex; justify-content: flex-end; }
.cta-link { display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--black-text); text-decoration: none; border-bottom: 1px solid var(--black-text); padding-bottom: 4px; margin: 0 14px 12px 0; }
.cta-link:hover { opacity: .45; }
/* Listado */
.journal-head { padding: 120px 80px 80px; text-align: center; background: var(--beige-mid); }
.journal-head h1 { font-family: 'Cochin', Georgia, serif; font-weight: 400; font-size: clamp(40px, 6vw, 84px); letter-spacing: .02em; line-height: 1.05; }
.journal-head p { max-width: 620px; margin: 28px auto 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.journal-list { max-width: 1120px; margin: 0 auto; padding: 80px 48px 120px; display: grid; gap: 64px; }
.journal-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; text-decoration: none; }
.journal-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.journal-card h2 { font-family: 'Cochin', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin: 14px 0 18px; }
.journal-card p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.journal-card:hover h2 { opacity: .6; }
.kicker { font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* Artículo */
.post-head { padding: 110px 24px 60px; text-align: center; background: var(--beige-mid); }
.post-eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.post-eyebrow a { text-decoration: none; }
.post-head h1 { font-family: 'Cochin', Georgia, serif; font-weight: 400; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.12; letter-spacing: .01em; max-width: 960px; margin: 22px auto 24px; }
.post-meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-body { max-width: 720px; margin: 0 auto; padding: 72px 24px 110px; font-size: 17px; line-height: 1.8; }
.post-body p { margin-bottom: 1.3em; }
.post-lead { font-family: 'Cochin', Georgia, serif; font-size: 23px; line-height: 1.55; }
.post-body h2 { font-family: 'Cochin', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; margin: 2.2em 0 .7em; }
.post-body a { text-underline-offset: 3px; }
.post-list { margin: 0 0 1.3em 1.1em; }
.post-list li { margin-bottom: .8em; }
.post-figure { margin: 2.6em -60px; }
.post-figure img { width: 100%; height: auto; }
.post-figure figcaption { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-top: 12px; padding: 0 60px; }
.post-cta { margin-top: 3.5em; padding-top: 2.2em; border-top: 1px solid rgba(26,26,24,.18); }
.post-cta p { font-family: 'Cochin', Georgia, serif; font-size: 22px; margin-bottom: 1em; }
/* Pie (igual que la portada) */
#footer { background: var(--beige-deep); padding-top: 56px; }
.footer-logo-giant { font-family: 'Cochin', Georgia, serif; font-size: 15.5vw; letter-spacing: .01em; color: var(--black-text); line-height: 1; display: block; overflow: hidden; width: 100%; text-align: center; white-space: nowrap; }
.footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 56px 80px; border-top: 1px solid rgba(26,26,24,.1); margin-top: 40px; }
.footer-col-title { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; display: block; border-bottom: 1px solid rgba(26,26,24,.18); padding-bottom: 8px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; opacity: .6; }
.footer-col ul li a:hover { opacity: 1; }
.footer-bottom { padding: 22px 80px; border-top: 1px solid rgba(26,26,24,.07); display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 768px) {
  #site-header { padding: 0 20px; grid-template-columns: auto 1fr; }
  .header-nav a:not(.keep) { display: none; }
  .header-nav { order: 2; justify-content: flex-end; gap: 18px; }
  .header-right { display: none; }
  .journal-head { padding: 80px 24px 56px; }
  .journal-list { padding: 56px 16px 80px; }
  .journal-card { grid-template-columns: 1fr; gap: 20px; }
  .post-head { padding: 72px 16px 44px; }
  .post-body { padding: 48px 16px 80px; font-size: 16px; }
  .post-figure { margin: 2.2em 0; }
  .post-figure figcaption { padding: 0; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); padding: 40px 24px; }
  .footer-bottom { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }
}