/* ============================================================
   Austin Benjamin — portfolio
   Palette taken from Power BI Director itself:
   petrol #03475A (title bar) · teal #0C7B8A · mint #BFE3DF
   ============================================================ */
:root {
  --petrol:#03475A;
  --petrol-deep:#032F3C;
  --teal:#0C7B8A;
  --teal-dark:#095F6B;
  --mint:#BFE3DF;
  --mint-soft:#EAF5F3;
  --ink:#0B2730;
  --body:#2C4650;
  --muted:#5E7681;
  --faint:#8AA0AA;
  --line:#DFE9EA;
  --ok:#0E8A62;
  --warn:#B7791F;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:#fff; color:var(--ink);
  -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:1280px; margin:0 auto; padding:0 clamp(20px, 3vw, 48px); }
@media (min-width:1500px){ .wrap { max-width:1500px; } }
@media (min-width:2000px){ .wrap { max-width:1760px; } }

/* ---------- full-bleed bands (content centered inside) ---------- */
.band { width:100%; }
.band-hero { background:
    radial-gradient(60vw 34vw at 15% 0%, rgba(191,227,223,.75), transparent 65%),
    radial-gradient(70vw 40vw at 88% 4%, rgba(12,123,138,.22), transparent 62%),
    linear-gradient(180deg, #E9F4F2 0%, #F8FCFB 75%, #FFFFFF 100%); }
.band-night { background:
    radial-gradient(60vw 36vw at 85% 0%, rgba(12,123,138,.45), transparent 62%),
    linear-gradient(135deg, var(--petrol-deep), var(--petrol) 65%, #074B5C);
  padding:68px 0 76px; }
.band-night .eyebrow { color:var(--mint); font-size:12.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; }
.band-night h2.nsec { color:#fff; font-size:clamp(26px, 2.2vw, 40px); letter-spacing:-.01em; margin:10px 0 6px; }
.band-night p.nsub { color:#9FBDC6; font-size:clamp(14.5px, 1vw, 17px); max-width:720px; }
.band-night .f { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14); }
.band-night .f h4 { color:var(--mint); }
.band-night .f p { color:#AFC9D1; }
.band-night .f:hover { background:rgba(255,255,255,.10); border-color:var(--mint);
  box-shadow:0 16px 40px rgba(0,0,0,.25); }
.band-night .grid3 { padding:34px 0 0; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .band-night .grid3 { grid-template-columns:1fr; } }
.band-alt { background:linear-gradient(180deg, #F1F8F6, #E6F0EE); padding:8px 0 64px; }
.band-dark { background:linear-gradient(120deg, var(--petrol-deep), var(--petrol) 55%, #085263);
  margin-top:70px; }
.band-art { background:linear-gradient(180deg, #F2F9F8, #FFFFFF); border-bottom:1px solid #E9F2F1;
  padding-bottom:34px; }

/* ---------- nav ---------- */
.navbar { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color .25s; }
.navbar.scrolled { border-bottom-color:var(--line); }
nav.top { display:flex; justify-content:space-between; align-items:center; padding:16px 0; }
nav.top .name { font-weight:800; font-size:17px; text-decoration:none; color:var(--petrol); }
nav.top .name .dotg { color:var(--teal); }
nav.top .links { display:flex; align-items:center; }
nav.top .links a { color:var(--muted); text-decoration:none; margin-left:24px; font-size:14.5px; font-weight:500;
  position:relative; }
nav.top .links a:not(.cta)::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--teal); transition:width .22s; }
nav.top .links a:not(.cta):hover::after { width:100%; }
nav.top .links a:hover { color:var(--petrol); }
nav.top .links a.cta { background:var(--petrol); color:#fff; padding:9px 16px; border-radius:8px; font-weight:600;
  transition:background .2s, transform .2s; }
nav.top .links a.cta:hover { background:var(--teal-dark); transform:translateY(-1px); }

/* ---------- buttons ---------- */
.btn { display:inline-block; text-decoration:none; font-size:15px; font-weight:700; padding:13px 26px;
  border-radius:10px; transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn.primary { background:var(--mint); color:var(--petrol); box-shadow:0 8px 24px rgba(3,71,90,.22); }
.btn.primary:hover { background:#AFDBD6; transform:translateY(-2px); box-shadow:0 12px 30px rgba(3,71,90,.28); }
.btn.solid { background:var(--teal); color:#fff; box-shadow:0 8px 24px rgba(12,123,138,.30); }
.btn.solid:hover { background:var(--teal-dark); transform:translateY(-2px); }
.btn.ghost { color:var(--ink); border:1.5px solid #CDD9DC; margin-left:12px; }
.btn.ghost:hover { border-color:var(--teal); color:var(--teal-dark); }

/* ---------- hero ---------- */
.hero { text-align:center; padding:clamp(56px, 5vw, 96px) 0 clamp(40px, 4vw, 70px); }
@media (min-width:1440px){
  .hero { display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center; text-align:left; }
  .hero p.lede { margin-left:0; }
  .hero .shot { margin:0; max-width:none; }
}
.hero .pill { display:inline-block; background:#fff; color:var(--teal-dark); font-size:clamp(12px, .8vw, 14.5px);
  font-weight:600; border-radius:999px; padding:6px 16px; border:1px solid #D2E8E4; }
.hero h1 { margin-top:22px; font-size:clamp(33px, 3.7vw, 66px); line-height:1.1; letter-spacing:-.02em;
  font-weight:800; color:var(--petrol-deep); }
.hero h1 .grn { color:var(--teal); }
.hero p.lede { margin:20px auto 0; max-width:min(100%, clamp(640px, 48vw, 780px));
  color:var(--body); font-size:clamp(16px, 1.15vw, 19.5px); line-height:1.65; }
.hero .btnrow { margin-top:30px; }
.trust { margin-top:34px; color:var(--faint); font-size:13px; letter-spacing:.05em; }
.trust b { color:var(--muted); font-weight:600; }

/* ---------- app mock (faithful to Power BI Director) ---------- */
.shot { margin:clamp(40px, 3.5vw, 64px) auto 0; max-width:min(1100px, 94%); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; box-shadow:0 34px 90px rgba(3,47,60,.18);
  font-size:clamp(12px, .78vw, 14.5px); text-align:left; background:#fff; }
.shot .titlebar { background:var(--petrol); color:#EAF5F3; display:flex; align-items:center; gap:8px;
  padding:9px 12px; font-size:12.5px; }
.shot .titlebar .logo { color:var(--mint); font-weight:800; }
.shot .titlebar .winbtns { margin-left:auto; letter-spacing:6px; color:#9FC3CC; font-size:11px; }
.shot .toolbar { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#F4F8F8;
  border-bottom:1px solid var(--line); flex-wrap:wrap; }
.shot .toolbar .mintbtn { background:var(--mint); color:var(--petrol); font-weight:700; padding:6px 14px;
  border-radius:6px; }
.shot .toolbar .lbl { color:var(--muted); font-weight:600; }
.shot .toolbar .field { background:#fff; border:1px solid #C9D8DA; border-radius:5px; padding:5px 10px;
  color:var(--body); min-width:150px; }
.shot .tabs { display:flex; border-bottom:1px solid var(--line); background:#fff; overflow-x:auto; }
.shot .tabs span { padding:9px 14px; color:var(--muted); border-right:1px solid #EDF2F3; white-space:nowrap; }
.shot .tabs span.on { color:var(--petrol); font-weight:700; box-shadow:inset 0 -2.5px 0 var(--teal); background:#FAFDFC; }
.shot .cols { display:grid; grid-template-columns:250px 1fr; }
.shot .panel { border-right:1px solid var(--line); padding:12px; background:#FBFDFD; }
.shot .panel h5 { font-size:12px; color:var(--petrol); margin-bottom:8px; }
.shot .panel .m { display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:5px; color:var(--body); }
.shot .panel .m:hover { background:var(--mint-soft); }
.shot .panel .cb { width:12px; height:12px; border-radius:3px; border:1.5px solid #9DB6BB; display:inline-block; }
.shot .panel .cb.c { background:var(--teal); border-color:var(--teal); position:relative; }
.shot .panel .cb.c::after { content:'✓'; color:#fff; font-size:9px; position:absolute; top:-2px; left:1.5px; }
.shot .panel .st { margin-left:auto; font-size:10.5px; }
.shot .grid { padding:12px; }
.shot table { width:100%; border-collapse:collapse; color:var(--body); }
.shot th { text-align:left; color:var(--faint); font-weight:600; padding:7px 8px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.shot td { padding:8px; border-bottom:1px solid #F0F5F5; }
.shot .okc { color:var(--ok); font-weight:700; }
.shot .runc { color:var(--warn); font-weight:700; }
.shot .runc .pulse { display:inline-block; animation:spin 1.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.shot .log { border-top:1px solid var(--line); background:var(--petrol-deep); color:#9FD0C8;
  font-family:Consolas,'Cascadia Code',monospace; font-size:11px; padding:8px 12px; }
.shot .log .cursor { display:inline-block; width:6px; height:11px; background:#9FD0C8; vertical-align:-1px;
  animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------- feature cards ---------- */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:64px 0 8px; }
.f { border:1px solid var(--line); border-radius:12px; padding:22px; transition:transform .25s, box-shadow .25s,
  border-color .25s; background:#fff; }
.f:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(3,47,60,.10); border-color:#BFDCD8; }
.f h4 { font-size:15.5px; color:var(--petrol); }
.f p { margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; }

/* ---------- sections ---------- */
h2.sec { margin:64px 0 4px; font-size:clamp(24px, 1.9vw, 34px); letter-spacing:-.01em; color:var(--petrol-deep); }
p.secsub { color:var(--muted); font-size:clamp(14.5px, 1vw, 17px); margin-bottom:22px; line-height:1.6; }

/* articles list: use the width on big screens */
#article-list { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:1100px){ #article-list { grid-template-columns:1fr 1fr; } }
#article-list .acard { margin-bottom:0; }

/* article cards on index */
.acard { display:flex; justify-content:space-between; gap:26px; border:1px solid var(--line); border-radius:12px;
  padding:22px 24px; margin-bottom:12px; transition:transform .22s, border-color .22s, box-shadow .22s; background:#fff; }
.acard:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 12px 30px rgba(3,47,60,.08); }
.acard h4 { font-size:17px; }
.acard h4 a { color:inherit; text-decoration:none; }
.acard h4 a:hover { color:var(--teal-dark); }
.acard p { margin-top:6px; color:var(--muted); font-size:14px; line-height:1.6; }
.acard .d { white-space:nowrap; color:var(--faint); font-size:13px; }
.acard .tag, .arthead .tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--teal-dark); background:var(--mint-soft); border-radius:999px;
  padding:3px 10px; margin-bottom:8px; }

/* ---------- about ---------- */
.about { display:grid; grid-template-columns:1.2fr .8fr; gap:44px; margin-top:8px; }
.about p { color:var(--body); font-size:15.5px; line-height:1.75; margin-bottom:14px; }
.xp { border-left:2px solid var(--line); padding-left:20px; }
.xp .row { margin-bottom:18px; position:relative; }
.xp .row::before { content:''; position:absolute; left:-25px; top:6px; width:8px; height:8px; border-radius:50%;
  background:var(--teal); }
.xp .role { font-weight:700; font-size:14.5px; }
.xp .co { color:var(--muted); font-size:13.5px; margin-top:2px; }
.xp .yr { color:var(--faint); font-size:12.5px; margin-top:2px; }
.chips { margin-top:18px; }
.chips span { display:inline-block; background:var(--mint-soft); border:1px solid #DCEDEA; border-radius:6px;
  padding:5px 11px; font-size:12.5px; color:var(--body); margin:0 6px 8px 0; }

/* ---------- contact / footer ---------- */
.contact { text-align:center; color:#fff; padding:clamp(56px, 5vw, 96px) 0; }
.contact h2 { font-size:clamp(26px, 2.2vw, 38px); letter-spacing:-.01em; }
.contact p { margin-top:12px; color:#A9C8CE; font-size:15.5px; }
.contact .btnrow { margin-top:26px; }
.contact .btn.ghost { color:#fff; border-color:#2E6070; }
.contact .btn.ghost:hover { border-color:var(--mint); color:var(--mint); }
footer.bottom { border-top:1px solid var(--line); margin-top:34px; padding:30px 0 60px; color:var(--faint);
  font-size:13.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer.bottom a { color:var(--muted); text-decoration:none; }
footer.bottom a:hover { color:var(--petrol); }

/* ---------- article pages ---------- */
.progress { position:fixed; top:0; left:0; height:3px; background:var(--teal); width:0; z-index:200;
  transition:width .1s linear; }
.arthead { max-width:820px; margin:48px auto 0; padding:0 28px; }
.arthead h1 { margin-top:16px; font-size:clamp(28px, 2.6vw, 46px); line-height:1.18; letter-spacing:-.02em;
  font-weight:800; color:var(--petrol-deep); }
.arthead .meta { margin-top:14px; color:var(--faint); font-size:14px; }
.artbody { max-width:820px; margin:34px auto 0; padding:0 28px 40px;
  font-size:clamp(16px, 1.05vw, 18.5px); line-height:1.75; color:var(--body); }
.artbody h2 { margin:40px 0 12px; font-size:24px; letter-spacing:-.01em; color:var(--petrol-deep); }
.artbody h3 { margin:30px 0 10px; font-size:18.5px; color:var(--petrol-deep); }
.artbody p { margin-bottom:16px; }
.artbody ul, .artbody ol { margin:0 0 16px 24px; }
.artbody li { margin-bottom:8px; }
.artbody a { color:var(--teal-dark); }
.artbody img { max-width:100%; border:1px solid var(--line); border-radius:10px; margin:10px 0 18px; }
.artbody blockquote { border-left:3px solid var(--teal); padding:4px 0 4px 18px; color:var(--muted);
  margin-bottom:16px; }
.artbody code { background:var(--mint-soft); border-radius:5px; padding:2px 7px; font-size:14px;
  font-family:Consolas,'Cascadia Code',monospace; color:var(--petrol); }
.artbody pre { background:var(--petrol-deep); color:#D9EAE6; border-radius:10px; padding:18px 20px;
  overflow-x:auto; margin-bottom:18px; }
.artbody pre code { background:none; color:inherit; padding:0; font-size:13.5px; }
.artbody table { border-collapse:collapse; width:100%; margin-bottom:18px; font-size:14.5px; }
.artbody th, .artbody td { border:1px solid var(--line); padding:9px 12px; text-align:left; }
.artbody th { background:#F5FAF9; }
.artbody hr { border:none; border-top:1px solid var(--line); margin:34px 0; }
.dlbox { max-width:820px; margin:8px auto 0; padding:0 28px 30px; }
.dlbox .inner { background:var(--mint-soft); border:1px solid #C6E3DE; border-radius:14px; padding:28px 30px; }
.dlbox h3 { font-size:19px; color:var(--petrol); }
.dlbox p { margin-top:8px; color:var(--body); font-size:14.5px; line-height:1.65; }
.dlbox .btnrow { margin-top:18px; }
.backlink { max-width:820px; margin:20px auto 0; padding:0 28px; }
.backlink a { color:var(--teal-dark); text-decoration:none; font-size:14.5px; font-weight:600; }

/* ---------- scroll reveal ---------- */
.rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .shot .runc .pulse, .shot .log .cursor { animation:none; }
}

@media (max-width:820px){
  .grid3 { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; }
  .hero h1 { font-size:34px; }
  .arthead h1 { font-size:29px; }
  .shot .cols { grid-template-columns:1fr; }
  .shot .panel { border-right:none; border-bottom:1px solid var(--line); }
  nav.top .links a { margin-left:14px; }
}

/* ---------- Power BI Director logo placements ---------- */
.shot .titlebar .tb-logo { width:16px; height:16px; border-radius:4px; display:block; }
.acard .cicon { width:46px; height:46px; border-radius:11px; flex-shrink:0; margin-top:2px;
  box-shadow:0 6px 16px rgba(3,71,90,.22); }
.acard .cbody { flex:1; }
.dlbox .inner.dl-flex { display:flex; align-items:center; gap:22px; }
.dlbox .applogo { width:62px; height:62px; border-radius:14px; flex-shrink:0;
  box-shadow:0 10px 24px rgba(3,71,90,.28); }
@media (max-width:560px){ .dlbox .inner.dl-flex { flex-direction:column; align-items:flex-start; } }

/* ---------- profile photo placements ---------- */
.about { grid-template-columns:230px 1.1fr .75fr; }
.about-me { display:flex; flex-direction:column; align-items:center; text-align:center; }
.about-me img { width:190px; height:190px; border-radius:50%; padding:5px;
  background:linear-gradient(135deg, var(--petrol), var(--teal) 55%, var(--mint));
  box-shadow:0 16px 40px rgba(3,71,90,.22); }
.about-me .nm { margin-top:14px; font-weight:800; font-size:17px; color:var(--petrol-deep); }
.about-me .rl { color:var(--muted); font-size:13.5px; margin-top:3px; line-height:1.5; }
.arthead .meta { display:flex; align-items:center; gap:9px; }
.arthead .meta .avi { width:26px; height:26px; border-radius:50%; }
.arthead .meta a { color:inherit; }
@media (max-width:820px){
  .about { grid-template-columns:1fr; }
  .about-me { align-items:flex-start; text-align:left; }
}

/* mobile nav: keep wordmark + CTA, drop text links */
@media (max-width:560px){
  nav.top .links a:not(.cta) { display:none; }
  nav.top .links a.cta { margin-left:0; padding:8px 13px; font-size:13px; }
  nav.top .name { font-size:15.5px; }
}