/* Shiftnet Blog — brand system: Outfit, gold on charcoal */
:root {
  --bg: #0e0f14;
  --bg-raise: #14151c;
  --line: rgba(240,180,90,0.22);
  --line-soft: rgba(255,255,255,0.08);
  --text: #e8eaf0;
  --text-dim: rgba(214,219,228,0.72);
  --text-faint: rgba(200,205,214,0.5);
  --gold: #f0b45a;
  --gold-deep: #d98a1b;
  --gold-pale: #ead0a4;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(217,151,6,0.09), transparent 60%),
    radial-gradient(1400px 900px at 0% -20%, rgba(37,106,191,0.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-size:18px; line-height:1.7; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(240,180,90,0.3); }
a { color:var(--gold); text-decoration:none; }
a:hover { color:#f6d29a; }

.shell { max-width:1080px; margin:0 auto; padding:0 28px; }

/* reading progress */
#progress { position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#f2bd6d,#d98a1b); z-index:20; }

/* header */
header.site {
  border-bottom:1px solid var(--line-soft);
  background:rgba(14,15,20,0.85); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
header.site .shell { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:13px; color:var(--text); }
.brand img { width:38px; height:38px; border-radius:9px; }
.brand .nm { font-size:23px; font-weight:600; letter-spacing:0.01em; }
.brand .nm b { font-weight:600; background:linear-gradient(120deg,#f2bd6d,#d98a1b); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .sep { color:var(--text-faint); font-weight:300; margin:0 2px; }
.brand .sect { font-weight:300; color:var(--text-dim); font-size:21px; }
nav.top { display:flex; gap:28px; font-size:15.5px; font-weight:400; align-items:center; }
nav.top a { color:var(--text-dim); letter-spacing:0.02em; }
nav.top a:hover { color:var(--gold-pale); }
nav.top a.cta-link { color:#0f1015; background:linear-gradient(120deg,#f2bd6d,#d98a1b);
  border-radius:24px; padding:9px 22px; font-weight:500; letter-spacing:0.04em; }
nav.top a.cta-link:hover { filter:brightness(1.08); color:#0f1015; }

/* index hero */
.hero { padding:84px 0 56px; }
.hero .kicker { font-size:14px; font-weight:400; letter-spacing:0.38em; text-transform:uppercase; color:var(--gold-pale); }
.hero h1 { margin-top:16px; font-size:52px; font-weight:600; line-height:1.12; letter-spacing:-0.01em; max-width:720px; }
.hero p { margin-top:18px; font-size:20px; color:var(--text-dim); max-width:620px; }

/* featured card */
.featured {
  display:block; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:var(--bg-raise); transition:transform .25s ease, border-color .25s ease;
}
.featured:hover { transform:translateY(-3px); border-color:rgba(240,180,90,0.45); }
.featured img.cover { width:100%; display:block; aspect-ratio:1600/840; object-fit:cover; }
.featured .body { padding:34px 40px 38px; }
.meta { display:flex; align-items:center; gap:14px; font-size:14.5px; color:var(--text-faint); font-weight:400; letter-spacing:0.03em; flex-wrap:wrap; }
.meta .tag { color:var(--gold-pale); border:1px solid var(--line); border-radius:20px; padding:3px 14px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; }
.featured h2 { margin-top:16px; font-size:32px; font-weight:600; line-height:1.2; color:var(--text); }
.featured p.excerpt { margin-top:12px; font-size:17.5px; color:var(--text-dim); max-width:760px; }
.featured .more { display:inline-block; margin-top:20px; font-size:15.5px; font-weight:500; letter-spacing:0.04em; }

/* all-posts list */
.allposts { margin:64px 0 40px; }
.allposts .head { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line-soft); padding-bottom:16px; }
.allposts .head h2 { font-size:24px; font-weight:600; }
.allposts .head a { font-size:15px; color:var(--text-faint); }
.postrow { display:flex; align-items:baseline; gap:26px; padding:24px 4px; border-bottom:1px solid var(--line-soft); color:var(--text); }
.postrow:hover .t { color:var(--gold-pale); }
.postrow .d { flex:none; width:130px; font-size:14.5px; color:var(--text-faint); font-weight:400; }
.postrow .t { font-size:19.5px; font-weight:500; line-height:1.35; transition:color .2s; }
.postrow .tag { margin-left:auto; flex:none; }

/* article */
article.post { padding:56px 0 40px; }
.backlink { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:400; color:var(--text-faint); margin-bottom:34px; }
.backlink:hover { color:var(--gold-pale); }
article.post .kicker { font-size:13.5px; font-weight:400; letter-spacing:0.38em; text-transform:uppercase; color:var(--gold-pale); }
article.post h1 { margin-top:16px; font-size:46px; font-weight:600; line-height:1.14; letter-spacing:-0.01em; max-width:840px; }
article.post .standfirst { margin-top:22px; font-size:21.5px; line-height:1.6; color:var(--text-dim); max-width:780px; }
article.post .meta { margin-top:26px; }
.byline { display:flex; align-items:center; gap:12px; }
.byline img { width:30px; height:30px; border-radius:8px; }
figure.cover { margin:44px 0 0; border-radius:20px; overflow:hidden; border:1px solid var(--line); }
figure.cover img { width:100%; display:block; }

.prose { max-width:760px; margin:56px auto 0; }
.prose h2 { font-size:29px; font-weight:600; line-height:1.25; margin:52px 0 18px; letter-spacing:-0.005em; position:relative; }
.prose h2 .n { color:var(--gold); font-weight:700; margin-right:14px; }
.prose h2 a.anchor { position:absolute; left:-34px; top:2px; font-size:24px; font-weight:400; color:var(--gold);
  opacity:0; transition:opacity .2s; }
.prose h2:hover a.anchor { opacity:0.7; }
.prose p { margin:18px 0; color:var(--text-dim); }
.prose p b, .prose li b { color:var(--text); font-weight:500; }
.prose ul { margin:18px 0 18px 4px; list-style:none; }
.prose li { margin:12px 0; padding-left:30px; position:relative; color:var(--text-dim); }
.prose li::before { content:''; position:absolute; left:2px; top:12px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#f2bd6d,#d98a1b); }
.prose .pull {
  margin:40px 0; padding:28px 34px; border-left:3px solid var(--gold-deep);
  background:linear-gradient(120deg, rgba(240,180,90,0.08), rgba(240,180,90,0.02));
  border-radius:0 16px 16px 0; font-size:21px; line-height:1.55; color:var(--gold-pale); font-weight:300;
}
.prose .pull b { color:#f6d29a; font-weight:600; }
.prose hr { border:0; height:1px; background:var(--line-soft); margin:48px 0; }

/* roadmap strip */
.roadmap { display:flex; gap:0; margin:36px 0 8px; align-items:center; flex-wrap:wrap; row-gap:18px; }
.roadmap .stop { display:flex; align-items:center; }
.roadmap .dotc { width:15px; height:15px; border-radius:50%; flex:none; }
.roadmap .live { background:linear-gradient(135deg,#f6d29a,#d98a1b); box-shadow:0 0 14px rgba(240,180,90,0.5); }
.roadmap .build { background:#0e0f14; border:2.5px dashed var(--gold); }
.roadmap .future { background:#0e0f14; border:2.5px solid rgba(240,180,90,0.55); }
.roadmap .lbl { margin-left:10px; font-size:14.5px; font-weight:500; letter-spacing:0.06em; color:var(--text-dim); }
.roadmap .lbl small { display:block; font-size:11.5px; font-weight:400; letter-spacing:0.14em; color:var(--gold-pale); text-transform:uppercase; }
.roadmap .link { width:56px; height:2px; margin:0 16px; background:linear-gradient(90deg, rgba(240,180,90,0.5), rgba(240,180,90,0.15)); }

/* share row */
.share { max-width:760px; margin:56px auto 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); padding-top:30px; }
.share .lbl { font-size:15px; color:var(--text-faint); margin-right:6px; letter-spacing:0.04em; }
.share a { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:400; color:var(--text-dim);
  border:1px solid var(--line-soft); border-radius:24px; padding:9px 20px; transition:border-color .2s, color .2s; }
.share a:hover { border-color:rgba(240,180,90,0.45); color:var(--gold-pale); }
.share a svg { width:16px; height:16px; fill:currentColor; }
.share a.copy { cursor:pointer; }

/* CTA + footer */
.cta {
  margin:64px auto 0; max-width:760px; text-align:center; border:1px solid var(--line); border-radius:22px;
  padding:48px 40px; background:linear-gradient(160deg, rgba(240,180,90,0.07), rgba(240,180,90,0.015));
}
.cta h3 { font-size:27px; font-weight:600; }
.cta p { margin-top:10px; color:var(--text-dim); }
.cta .pill { display:inline-block; margin-top:24px; font-size:14.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:#0f1015; background:linear-gradient(120deg,#f2bd6d,#d98a1b); border-radius:32px; padding:14px 36px; }
footer.site { margin-top:88px; border-top:1px solid var(--line-soft); }
footer.site .shell { display:flex; align-items:flex-start; justify-content:space-between; padding:44px 28px 48px; flex-wrap:wrap; gap:28px; }
footer.site .col .h { font-size:14px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-pale); margin-bottom:14px; }
footer.site .col a, footer.site .col span { display:block; font-size:15px; color:var(--text-faint); margin:8px 0; }
footer.site .col a:hover { color:var(--gold-pale); }
footer.site .brandcol { max-width:320px; }
footer.site .brandcol .l { font-size:16px; color:var(--text-dim); }
footer.site .brandcol .l b { color:var(--gold-pale); font-weight:500; }
footer.site .brandcol p { margin-top:10px; font-size:14px; color:var(--text-faint); line-height:1.6; }
footer.site .bottom { border-top:1px solid var(--line-soft); }
footer.site .bottom .shell { padding:20px 28px; font-size:13.5px; color:var(--text-faint); display:flex; justify-content:space-between; }

@media (max-width:720px) {
  .hero h1 { font-size:36px; }
  article.post h1 { font-size:32px; }
  .featured .body { padding:26px 24px 30px; }
  .prose h2 { font-size:24px; }
  .prose h2 a.anchor { display:none; }
  nav.top { gap:16px; }
  nav.top a:not(.cta-link) { display:none; }
  .postrow .d { width:auto; }
  .postrow .tag { display:none; }
}