/* Blog pages: same tokens and faces as the home page (index.html) */
:root {
  --bg:#f7f9fa; --surface:#ecf0f2; --ink:#1f3038; --muted:#5d6b72; --accent:#0d7480; --accent-ink:#ffffff;
  --display:"Big Shoulders", "Arial Narrow", sans-serif;
  --text:"Public Sans", system-ui, sans-serif;
  --step-small:clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead:clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --m:clamp(16px, 2vw, 28px);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font-family:var(--text); font-size:var(--step-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent); color:var(--accent-ink); }
.d, h1, h2 { font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-0.005em; line-height:.95; }

.top { display:flex; justify-content:space-between; align-items:baseline; padding:20px var(--m); font-size:var(--step-small); }
.top b { font-weight:600; }
.top a { text-decoration:none; }
.top nav { display:flex; gap:24px; }
.top nav a:hover { color:var(--accent); }

.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none; padding:.85em 1.5em; border-radius:999px; transition:transform .2s, background .2s; }
.btn:hover { background:#0a5f69; transform:translateY(-2px); }

/* Article */
.post-head { padding:clamp(64px, 10vw, 140px) var(--m) clamp(40px, 5vw, 72px); }
.post-head h1 { font-size:clamp(48px, 7vw, 112px); max-width:13em; }
.post-head .lead { font-size:var(--step-lead); line-height:1.4; max-width:40ch; margin-top:28px; }
.post-head .meta { font-size:var(--step-small); color:var(--muted); margin-top:20px; }
.post { padding:0 var(--m) 120px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 68ch) minmax(0, 1fr); }
.post > * { grid-column:2; }
.post h2 { font-size:clamp(32px, 3.6vw, 52px); line-height:1.05; margin:72px 0 20px; }
.post h3 { font-size:var(--step-lead); line-height:1.3; margin:36px 0 10px; }
.post p, .post ul, .post ol { margin-bottom:18px; }
.post ul, .post ol { padding-left:1.3em; }
.post li { margin-bottom:8px; }
.post strong { font-weight:600; }
.post a { text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:2px; }
.post a:hover { color:var(--accent); }
.post .wide { grid-column:1 / -1; }
.post .note { background:var(--surface); padding:20px 24px; border-radius:14px; }
.post table { width:100%; border-collapse:collapse; margin:8px 0 24px; font-variant-numeric:tabular-nums; }
.post th, .post td { text-align:left; padding:12px 14px; vertical-align:top; border-bottom:1px solid #d5dde1; }
.post th { font-weight:600; background:var(--surface); }
.post .tablewrap { overflow-x:auto; }
.timeline { list-style:none; padding:0 !important; }
.timeline li { display:grid; grid-template-columns:7.5em 1fr; gap:16px; padding:14px; margin:0 !important; border-radius:10px; }
.timeline li:nth-child(odd) { background:var(--surface); }
.timeline b { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.4em; line-height:1; }

.cta { background:var(--ink); color:var(--bg); padding:clamp(64px, 8vw, 120px) var(--m); }
.cta h2 { font-size:clamp(40px, 6vw, 96px); max-width:12em; }
.cta p { max-width:46ch; margin:24px 0 32px; font-size:var(--step-lead); line-height:1.4; }
.cta .alt { margin-left:20px; }
.cta .alt:hover { color:#6fc3cc; }
.foot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px var(--m); font-size:var(--step-small); background:var(--ink); color:var(--bg); }

/* Blog index */
.list { list-style:none; padding:0 var(--m) 140px; }
.list li { padding:40px 0; }
.list li + li { border-top:4px solid var(--surface); }
.list a { text-decoration:none; display:block; }
.list h2 { font-size:clamp(40px, 5.6vw, 88px); max-width:14em; transition:color .2s; }
.list a:hover h2 { color:var(--accent); }
.list p { max-width:60ch; margin-top:14px; }

@media (max-width: 600px) {
  .top nav a:not(.keep) { display:none; }
  .timeline li { grid-template-columns:1fr; gap:4px; }
  .cta .alt { display:block; margin:20px 0 0; }
  .post th, .post td { padding:10px 8px; }
  /* Wide tables become one card per row on phones */
  .post table.stack thead { display:none; }
  .post table.stack tr { display:block; padding:12px 0; border-bottom:1px solid #d5dde1; }
  .post table.stack td { display:block; border:0; padding:2px 0; }
  .post table.stack td:first-child { font-weight:600; }
}

/* Trade pages: a sample site shown inside a phone frame (data-ui keeps its own borders) */
.trade { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:56px; align-items:start; padding:0 var(--m) 40px; }
.trade .post { padding:0; display:block; max-width:68ch; }
.mock { width:100%; max-width:340px; background:#fff; border:10px solid var(--ink); border-radius:34px; overflow:hidden; position:sticky; top:24px; font-size:15px; line-height:1.45; color:#222; }
.mock .bar { height:22px; background:var(--ink); }
.mock header { padding:22px 20px 18px; color:#fff; }
.mock header b { display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:34px; line-height:1.02; }
.mock header span { display:block; margin-top:6px; font-size:13px; opacity:.9; }
.mock .rows { list-style:none; padding:8px 20px; margin:0; }
.mock .rows li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #eee; margin:0; } /* taste-skill-ignore: sample menu inside a data-ui mock */
.mock .rows li span:last-child { white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums; }
.mock .info { padding:6px 20px 0; font-size:13px; color:#555; }
.mock .wa { display:block; margin:14px 20px 22px; padding:12px; border-radius:999px; text-align:center; background:#177a41; color:#fff; font-weight:600; text-decoration:none; }
.mock-cap { font-size:var(--step-small); color:var(--muted); margin-top:12px; max-width:340px; }
.price-box { background:var(--surface); border-radius:14px; padding:24px; margin:8px 0 24px; }
.price-box .big { font-family:var(--display); font-weight:800; font-size:clamp(40px, 5vw, 64px); line-height:1; margin:6px 0 8px; font-variant-numeric:tabular-nums; }
@media (max-width: 900px) {
  .trade { grid-template-columns:1fr; gap:40px; }
  .trade aside { order:-1; }
  .mock { position:static; margin:0 auto; }
  .mock-cap { margin:12px auto 0; text-align:center; }
}