/* mexico/ section — shared styles for the living-in-Mexico series.
   Linked after /style.css (the global base). */

/* ---- page header (top) ---- */
.top{
 background:linear-gradient(to bottom,var(--dusk-deep) 0%,var(--dusk) 60%,var(--dusk-high) 100%);
 padding:3rem 1.5rem 2.5rem;
 border-bottom:1px solid var(--line);
}
.top-inner{max-width:46rem;margin:0 auto}
.crumb{font-family:var(--mono);font-size:.85rem;color:var(--sand-dim)}
.crumb a{color:var(--saguaro);text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{font-family:var(--mono);font-size:clamp(2rem,6vw,3rem);letter-spacing:-.02em;margin:.6rem 0 .8rem;color:var(--sand)}
h1 .slash{color:var(--ember)}
.lede{max-width:38rem;color:var(--sand)}
.dateline{margin-top:1.2rem;font-family:var(--mono);font-size:.8rem;color:var(--sand-dim)}

/* ---- article body ---- */
main{max-width:46rem;margin:0 auto;padding:0 1.5rem 4rem}
section{padding-top:3.25rem}
h2{font-family:var(--mono);font-size:1.35rem;margin-bottom:1rem;color:var(--sand)}
h3{font-family:var(--mono);font-size:1.02rem;color:var(--ember);margin:1.8rem 0 .6rem}
p+p{margin-top:1rem}
em{color:var(--ember);font-style:normal}

.thesis{
 background:var(--panel);
 border-left:3px solid var(--ember);
 border-radius:0 10px 10px 0;
 padding:1.3rem 1.5rem;
 margin:1.4rem 0 2rem;
}
.thesis p{color:var(--sand)}

/* ---- tables ---- */
.routes{width:100%;border-collapse:collapse;margin:1.3rem 0 .6rem;font-size:.92rem}
.routes th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sand-dim);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.routes td{padding:.75rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.routes td:first-child{font-family:var(--mono);font-size:.85rem;white-space:normal}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:4px;white-space:nowrap}
.tag.ok{color:var(--saguaro);border:1px solid var(--saguaro)}
.tag.caution{color:var(--caution);border:1px solid var(--caution)}
.tag.never{color:var(--danger);border:1px solid var(--danger)}
.tbl-note{font-family:var(--mono);font-size:.78rem;color:var(--sand-dim)}

.costs{width:100%;border-collapse:collapse;margin:1.3rem 0 .6rem;font-size:.92rem}
.costs th{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sand-dim);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.costs td{padding:.7rem;border-bottom:1px solid var(--line)}
.costs td:last-child{font-family:var(--mono);color:var(--ember)}

/* ---- content callout panel ---- */
.panel{
 background:var(--panel);border:1px solid var(--line);border-radius:10px;
 padding:1.3rem 1.5rem;margin-top:1.2rem;
}
.panel p{font-size:.95rem}
.panel p+p{margin-top:1rem}

.disclaimer{
 font-family:var(--mono);font-size:.8rem;color:var(--sand-dim);
 border:1px dashed var(--line);border-radius:8px;
 padding:.9rem 1.1rem;margin-top:1.6rem;
}

/* ---- hub cards ---- */
.cards{display:grid;gap:1rem;margin-top:1.4rem}
@media(min-width:640px){.cards.two{grid-template-columns:1fr 1fr}}
.card{
 background:var(--panel);border:1px solid var(--line);border-radius:10px;
 padding:1.4rem 1.5rem;
}
.card h2{font-family:var(--mono);font-size:1.05rem;color:var(--sand);margin-bottom:.5rem}
.card h2 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--saguaro)}
.card h2 a:hover,.card h2 a:focus-visible{color:var(--saguaro)}
.card p{font-size:.95rem;color:var(--sand-dim)}
.card .note{display:inline-block;margin-top:.8rem;font-family:var(--mono);font-size:.75rem;color:var(--ember);border:1px solid var(--line);border-radius:4px;padding:.15rem .55rem}

/* ---- prev/next navigation ---- */
.prevnext{
 display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
 margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
 font-family:var(--mono);font-size:.88rem;
}
.prevnext a{color:var(--saguaro);text-decoration:none;display:inline-block}
.prevnext a:hover{text-decoration:underline}
.prevnext .pn-meta{display:block;font-size:.7rem;color:var(--sand-dim)}
.prevnext .pn-next{text-align:right}