/* pages.css — layout styles specific to City Guide, Article Guide, Meridian, System */

/* ============================ CITY GUIDE ============================ */
.city-hero { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--rule); }
.city-crumbs { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .06em; display: flex; gap: .5em; align-items: center; margin-bottom: var(--s-4); }
.city-crumbs a { color: var(--ink-3); text-decoration: none; }
.city-crumbs a:hover { color: var(--saffron); }
.city-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.city-facts { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }
.city-fact .k { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.city-fact .v { font-weight: 700; font-size: var(--t-lg); margin-top: .15em; }

.city-layout { display: grid; grid-template-columns: 1fr 18rem; gap: var(--s-7); align-items: start; padding-top: var(--s-7); }
.city-side { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: var(--s-4); }

.listing { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.listing:first-child { border-top: 0; }
.listing-logo { width: 3em; height: 3em; flex: none; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ink-3); font-family: var(--mono); font-size: var(--t-xs); }
.listing-main { flex: 1; min-width: 0; }
.listing-main .ln { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.listing-main h4 { font-size: var(--t-base); font-weight: 700; }
.listing-main p { font-size: var(--t-sm); color: var(--ink-3); margin-top: .2em; }
.veg-dot { width: .85em; height: .85em; border-radius: 3px; border: 1.5px solid var(--forest); display: inline-grid; place-items: center; }
.veg-dot::after { content: ""; width: .42em; height: .42em; border-radius: 50%; background: var(--forest); }
.veg-dot.nonveg { border-color: var(--brick); }
.veg-dot.nonveg::after { background: var(--brick); }

/* ============================ ARTICLE GUIDE ============================ */
.article-head { padding: var(--s-7) 0 var(--s-6); }
.article-layout { display: grid; grid-template-columns: 13rem 1fr; gap: var(--s-7); align-items: start; }
.article-toc { position: sticky; top: 5rem; }
.article-toc .toc-label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.article-toc a { display: block; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: .4em 0 .4em var(--s-3); border-left: 2px solid var(--rule); transition: all var(--dur) var(--ease); }
.article-toc a:hover, .article-toc a.on { color: var(--saffron); border-left-color: var(--saffron); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-family: var(--serif); font-weight: 700; font-size: var(--t-2xl); margin-top: var(--s-7); letter-spacing: -.01em; }
.prose h3 { font-family: var(--serif); font-weight: 700; font-size: var(--t-xl); margin-top: var(--s-5); }
.prose p { font-size: var(--t-lg); line-height: 1.62; color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.prose ul li { position: relative; padding-left: 1.6em; font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; }
.prose ul li::before { content: ""; position: absolute; left: .15em; top: .62em; width: .5em; height: .5em; border: 1.5px solid var(--saffron); border-radius: 2px; transform: rotate(45deg); }
.pullquote { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.18; color: var(--ink); border-left: 3px solid var(--saffron); padding-left: var(--s-5); font-style: italic; }
.keyfacts { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.keyfacts dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); margin: 0; }
.keyfacts dt { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.keyfacts dd { margin: 0; font-weight: 600; font-size: var(--t-sm); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.compare-table th, .compare-table td { text-align: left; padding: .8em 1em; border-bottom: 1px solid var(--rule); }
.compare-table thead th { background: var(--surface-2); font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { font-weight: 700; }

/* ============================ MERIDIAN SUB-BRAND ============================ */
.mer { --m-bg: #11151c; --m-panel: #182030; --m-line: #283244; --m-ink: #e9edf4; --m-dim: #93a0b5;
  --m-accent: #5a78c8; --m-accent-2: #3fb6a8; --mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--m-bg); color: var(--m-ink); }
[data-dark="true"] .mer { --m-bg: #0c0f15; --m-panel: #141b27; }
.mer .mer-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--m-line); position: sticky; top: 0; background: color-mix(in oklab, var(--m-bg) 88%, transparent); backdrop-filter: blur(8px); z-index: 30; }
.mer-lock { display: flex; align-items: center; gap: .7em; }
.mer-lock .ms { width: 2.4em; height: 2.4em; border-radius: 7px; background: var(--m-accent); color: #fff; display: grid; place-items: center; }
.mer-lock .ms svg { width: 56%; height: 56%; }
.mer-lock b { font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 1.3em; letter-spacing: -.01em; }
.mer-lock .mk { font-family: var(--mono); font-size: .6em; letter-spacing: .2em; text-transform: uppercase; color: var(--m-dim); display: block; }
.mer-return { font-family: var(--mono); font-size: var(--t-xs); color: var(--m-dim); text-decoration: none; display: inline-flex; align-items: center; gap: .5em; border: 1px solid var(--m-line); padding: .55em .9em; border-radius: 999px; }
.mer-return:hover { color: var(--m-ink); border-color: var(--m-dim); }
.mer-band { padding: var(--s-7) var(--s-6); border-bottom: 1px solid var(--m-line); max-width: var(--maxw); margin: 0 auto; }
.mer-eyebrow { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--m-accent-2); }
.mer-h { font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: var(--t-4xl); line-height: 1.14; margin-top: var(--s-4); letter-spacing: -.01em; }
.mer-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); max-width: var(--maxw); margin: 0 auto; padding: var(--s-7) var(--s-6); align-items: start; }
.mer-panel { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 12px; padding: var(--s-5); }
.mer-field label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--m-dim); display: block; margin-bottom: .5em; }
.mer-input { width: 100%; background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 8px; color: var(--m-ink); font-family: var(--mono); font-size: var(--t-base); padding: .7em .8em; }
.mer-input:focus { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(90,120,200,.2); }
.mer-readout { display: flex; flex-direction: column; gap: var(--s-3); }
.mer-line { display: flex; justify-content: space-between; align-items: baseline; padding: .6em 0; border-bottom: 1px dashed var(--m-line); font-family: var(--mono); }
.mer-line .lk { color: var(--m-dim); font-size: var(--t-sm); }
.mer-line .lv { font-size: var(--t-base); }
.mer-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s-4); margin-top: var(--s-2); border-top: 2px solid var(--m-line); }
.mer-total .lv { font-family: "Newsreader", serif; font-size: var(--t-3xl); color: var(--m-accent-2); }
.mer-chip { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: var(--t-xs); color: var(--m-dim); border: 1px solid var(--m-line); padding: .35em .7em; border-radius: 999px; }

/* relationship diagram (on the home/system side) */
.rel-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); align-items: stretch; }
.rel-card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.rel-card.main { background: var(--surface); }
.rel-card.tool { background: #141b27; color: #e9edf4; border-color: #283244; }
.rel-bridge { display: grid; place-items: center; gap: var(--s-2); color: var(--ink-3); font-family: var(--mono); font-size: var(--t-xs); }

/* ============================ SYSTEM SHOWCASE ============================ */
.sys-wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9); }
.sys-block { padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
.sys-block:first-of-type { border-top: 0; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); }
.swatch { border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.swatch .chip { height: 4.5rem; }
.swatch .meta { padding: .6em .7em; font-family: var(--mono); font-size: var(--t-xs); }
.swatch .meta .nm { font-weight: 600; }
.swatch .meta .hx { color: var(--ink-3); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s-2); }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: var(--s-4) var(--s-2); border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); }
.icon-cell svg { width: 1.6rem; height: 1.6rem; color: var(--ink); }
.icon-cell span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.spec-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.type-spec { padding: var(--s-4) 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.type-spec .lbl { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.demo-shelf { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-5); background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md); }