/* Marcelo Bielsa — Archivo · clean, readable, accessible */
:root{
  --bg:#f6f3ec; --surface:#fffdf8; --ink:#1d1c1a; --ink-2:#5c574f;
  --line:#e5ddcd; --accent:#2f6d5b; --accent-2:#8a5a2b; --quote:#eef3ef;
  --maxw:820px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:clamp(18px,16.5px+.3vw,21px); line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--accent-2)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#fff; padding:8px 14px; border-radius:8px; z-index:10}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:3px}

/* header */
.site-header{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:system-ui,sans-serif; font-weight:700; text-decoration:none; color:var(--ink)}
.brand-mark{color:var(--accent); font-size:.9em}
.brand-name{letter-spacing:.2px}
.site-header nav{display:flex; gap:18px; font-family:system-ui,sans-serif; font-size:.82em}
.site-header nav a{text-decoration:none; color:var(--ink-2); text-transform:uppercase; letter-spacing:.08em}
.site-header nav a:hover{color:var(--accent)}

/* hero */
.hero{background:linear-gradient(180deg,#20493f,#2f6d5b); color:#f6f3ec; border-bottom:5px solid var(--accent-2)}
.hero .wrap{padding-block:56px 44px}
.hero .eyebrow{font-family:system-ui,sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:.72em; opacity:.82; margin:0 0 8px}
.hero h1{font-size:clamp(2.1em,1.6em+2vw,3em); margin:0 0 12px; line-height:1.05}
.hero .lede{font-size:1.06em; opacity:.94; max-width:60ch; margin:0}

/* listing */
.listing{padding-block:44px 24px}
.listing h2, .prose .page-head h1{margin-top:0}
.listing h2{font-family:system-ui,sans-serif; color:#20493f}
.cards{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:12px}
.card a{display:block; padding:20px 24px; text-decoration:none; color:inherit}
.card h3{margin:0 0 6px; color:var(--accent); font-family:system-ui,sans-serif; font-size:1.15em; line-height:1.25}
.card-meta{margin:0; font-family:system-ui,sans-serif; font-size:.8em; color:var(--ink-2); letter-spacing:.02em}
.card-sum{margin:10px 0 0; font-size:.94em; color:var(--ink-2)}
.card:hover{border-left-color:var(--accent-2)}
.card:hover h3{color:var(--accent-2)}

/* prose / article */
.prose{padding-block:40px 72px}
.page-head{margin-bottom:8px}
.page-head .eyebrow{font-family:system-ui,sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.7em; color:var(--accent-2); margin:0 0 8px}
.page-head h1{font-size:clamp(1.7em,1.3em+1.6vw,2.3em); line-height:1.15; margin:0 0 10px}
.page-meta, .card-meta{font-family:system-ui,sans-serif}
.page-meta{font-size:.86em; color:var(--ink-2); margin:0 0 8px}
.prose h2{font-family:system-ui,sans-serif; color:#20493f; font-size:1.4em; margin:44px 0 4px; padding-top:12px; border-top:1px solid var(--line)}
.prose h3{font-family:system-ui,sans-serif; color:var(--accent); font-size:1.05em; margin:32px 0 6px; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.prose h3 .ts{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.72em; color:var(--accent-2); font-weight:500}
.prose p{margin:0 0 18px; text-align:justify; hyphens:auto}
.prose blockquote{
  margin:0 0 20px; padding:14px 20px; background:var(--quote);
  border:1px solid #d6e2da; border-left:4px solid var(--accent); border-radius:10px;
  color:var(--ink-2); font-style:italic;
}
.prose blockquote p{margin:0 0 8px; text-align:left}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0 20px}
.backhome{font-family:system-ui,sans-serif; font-size:.9em}

/* source box */
.source-box{
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent-2);
  border-radius:12px; padding:16px 22px; margin:0 0 32px;
}
.source-label{font-family:system-ui,sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.68em; color:var(--accent-2); font-weight:700; margin:0 0 4px}
.source-main{margin:0 0 2px; font-size:1.02em}
.source-url{margin:0 0 10px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.72em; color:var(--ink-2); word-break:break-all}
.source-note{margin:0; font-size:.82em; color:var(--ink-2); font-style:italic}

/* footer */
.site-footer{background:var(--surface); border-top:1px solid var(--line); margin-top:40px}
.site-footer .wrap{padding-block:26px}
.site-footer p{margin:0 0 4px; font-family:system-ui,sans-serif; font-size:.82em; color:var(--ink-2)}
.site-footer .fine{font-size:.76em; opacity:.85}

@media (max-width:560px){
  .prose p{text-align:left}
  .hero .wrap{padding-block:40px 32px}
}