/* OutOnTime blog — Lime dark theme, shared by all articles */
:root {
  --bg:#16170F; --surface:#1F211A; --raise:#272A20; --line:rgba(255,255,255,.09);
  --ink:#F3F4EC; --ink-muted:#B7BAA9; --ink-subtle:#7E8174;
  --accent:#84C25A; --accent-deep:#3F7D2C; --accent-soft:#2B3A1E;
  --heat:#E0613A; --heat-soft:#3A271C; --heat-text:#F1A36A;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

nav { position:sticky; top:0; z-index:50; background:rgba(22,23,15,.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-inner { max-width:1140px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.logo:hover { text-decoration:none; }
.logo img { width:28px; height:28px; display:block; }
.nav-cta { font-family:var(--display); font-weight:600; font-size:14px; padding:11px 20px; border-radius:10px; background:var(--accent); color:#10160A; transition:transform .15s, box-shadow .2s; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(132,194,90,.35); text-decoration:none; }

.article { max-width:720px; margin:0 auto; padding:72px 28px 40px; }
.article .eyebrow { font-family:var(--display); font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.article h1 { font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(32px,5.4vw,52px); margin-bottom:20px; }
.article .standfirst { font-size:19px; color:var(--ink-muted); margin-bottom:14px; }
.article .byline { font-size:13.5px; color:var(--ink-subtle); margin-bottom:44px; }
.article h2 { font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.15; font-size:clamp(23px,3.2vw,30px); margin:44px 0 14px; }
.article p { font-size:16.5px; color:var(--ink-muted); margin-bottom:18px; }
.article p strong, .article li strong { color:var(--ink); }
.article ul, .article ol { margin:0 0 18px 22px; color:var(--ink-muted); font-size:16.5px; }
.article li { margin-bottom:8px; }
.article blockquote { border-left:3px solid var(--accent); padding:6px 0 6px 20px; margin:26px 0; font-family:var(--display); font-size:19px; color:var(--ink); line-height:1.5; }
.article .note { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-size:14.5px; color:var(--ink-subtle); margin:26px 0; }

/* Footnotes & references */
.article sup.fn { font-size:12px; line-height:0; }
.article sup.fn a { color:var(--accent); font-weight:600; text-decoration:none; }
.article sup.fn a:hover { text-decoration:underline; }
.refs { margin-top:52px; padding-top:18px; border-top:1px solid var(--line); }
.refs h2 { font-size:20px; margin-top:0; }
.refs ol { margin:14px 0 0 20px; }
.refs li { font-size:14px; color:var(--ink-subtle); margin-bottom:11px; line-height:1.6; }
.refs li em { color:var(--ink-muted); }
.refs li a { color:var(--accent); }

.cta-box { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:32px 30px; margin:52px 0 0; text-align:center; }
.cta-box h3 { font-family:var(--display); font-weight:600; font-size:22px; margin-bottom:10px; }
.cta-box p { font-size:15.5px; color:var(--ink-muted); margin-bottom:20px; }
.cta-box .btn { display:inline-block; font-family:var(--display); font-weight:600; font-size:15px; padding:13px 26px; border-radius:12px; background:var(--accent); color:#10160A; transition:transform .15s, box-shadow .2s; }
.cta-box .btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(132,194,90,.35); text-decoration:none; }

.more { max-width:720px; margin:0 auto; padding:20px 28px 60px; }
.more h4 { font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-subtle); margin:32px 0 14px; }
.more a.more-link { display:block; padding:14px 0; border-top:1px solid var(--line); color:var(--ink); font-family:var(--display); font-weight:500; font-size:16.5px; }
.more a.more-link:hover { color:var(--accent); text-decoration:none; }
.more a.more-link small { display:block; font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--ink-subtle); margin-top:2px; }

/* Blog index */
.blog-index { max-width:720px; margin:0 auto; padding:80px 28px 60px; }
.blog-index .eyebrow { font-family:var(--display); font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.blog-index h1 { font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(32px,5.4vw,52px); margin-bottom:16px; }
.blog-index .lede { font-size:18px; color:var(--ink-muted); margin-bottom:48px; }
.post-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-bottom:18px; transition:border-color .2s, transform .2s; color:var(--ink); }
.post-card:hover { border-color:var(--accent); transform:translateY(-3px); text-decoration:none; }
.post-card h2 { font-family:var(--display); font-weight:600; font-size:21px; line-height:1.25; margin-bottom:8px; }
.post-card p { font-size:14.5px; color:var(--ink-muted); }
.post-card .tag { font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }

footer { border-top:1px solid var(--line); padding:40px 28px; }
footer .f-inner { max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--ink-subtle); font-size:13px; }
footer a { color:var(--ink-subtle); }