/* ============================================================
   Lee Basnight — Port 3
   Design font: ABC Diatype (self-hosted, licensed).
   ============================================================ */

@font-face{
  font-family:'ABC Diatype';
  src:url('../fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'ABC Diatype';
  src:url('../fonts/ABCDiatype-RegularItalic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'ABC Diatype';
  src:url('../fonts/ABCDiatype-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg:#fdfdfd;
  --navy:#121d62;
  --orange:#ff5e00;
  --orange-muted:#ffa774;
  --white:#fdfdfd;
  --ink-faint:rgba(18,29,98,0.24);
  --font:'ABC Diatype','Helvetica Neue','Helvetica',Arial,sans-serif;

  /* layout metrics from the 1440 design */
  --page:1300px;
  --nav-left:69px;
  --nav-width:210px;
  --content-max:979px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- Layout shell ---------- */
.page{
  max-width:var(--page);
  margin:0 auto;
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:44px;
  padding:0 28px 100px;
  zoom:0.8;
}

/* ---------- Sidebar nav ---------- */
.sidebar{
  flex:0 0 var(--nav-width);
  width:var(--nav-width);
  padding-top:79px;
  padding-right:16px;
  position:sticky;
  top:0;
  align-self:flex-start;
}
.nav{list-style:none;margin:0;padding:0;}
.nav li{margin:0;}
.nav a,.nav span{
  display:block;
  font-size:22px;
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--navy);
  padding:5px 0;
  overflow-wrap:break-word;
}
.nav a:hover{opacity:0.7;}
.nav .active{color:var(--orange);}
.nav .disabled{color:var(--navy);opacity:0.32;cursor:not-allowed;}

/* sub levels */
.nav .lvl1 a,.nav .lvl1 span{font-size:18px;padding-left:14px;padding-top:4px;padding-bottom:4px;}
.nav .lvl2 a,.nav .lvl2 span{font-size:18px;padding-left:32px;color:var(--orange);}
.nav .lvl2 a:hover{opacity:0.7;}

/* ---------- Main column ---------- */
.main{
  flex:1 1 auto;
  min-width:0;
  max-width:var(--content-max);
  margin-left:0;
  padding-top:62px;
}

/* ---------- Hero ---------- */
.hero{margin-bottom:24px;}
.hero h1{
  margin:0;
  font-weight:400;
  font-size:72px;
  line-height:0.9;
  letter-spacing:-0.03em;
  color:var(--navy);
}
.hero .subtitle{
  margin:10px 0 0;
  font-weight:400;
  font-size:36px;
  line-height:1.0;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.hero .tagline{
  margin:16px 0 0;
  font-size:18px;
  line-height:1.0;
  letter-spacing:-0.01em;
  color:var(--navy);
}

/* ---------- Panels (navy info boxes) ---------- */
.panel{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  background:var(--navy);
  color:var(--white);
}
.panel .panel-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.panel .panel-inner{position:relative;z-index:1;padding:63px 62px 58px;}

/* Ballpoint case header panel */
.ballpoint-panel{margin-top:0;}
.ballpoint-panel .bp-title{
  font-size:71.8px;line-height:1.0;letter-spacing:-0.02em;margin:0 0 14px;color:var(--white);font-weight:400;
}
.ballpoint-panel .bp-for{
  font-size:30.5px;line-height:1.05;letter-spacing:-0.01em;color:var(--orange-muted);margin:0;
}
.ballpoint-panel .bp-link{
  font-size:30.5px;line-height:1.05;letter-spacing:-0.01em;color:var(--white);margin:6px 0 30px;
  display:inline-block;text-decoration:underline;text-underline-offset:3px;
}
.ballpoint-panel .bp-meta{
  font-size:26.3px;line-height:1.62;letter-spacing:-0.01em;color:var(--white);margin:0;
}

/* About description panel */
.about-panel{margin-top:0;}
.about-panel .about-copy{
  font-size:26.3px;line-height:1.39;letter-spacing:-0.006em;color:var(--white);margin:0;white-space:pre-line;
}
.about-panel .about-email{
  font-size:26.3px;line-height:1.39;color:var(--white);margin:34px 0 0;display:inline-block;
}

/* ---------- Video ---------- */
.video-wrap{
  margin:24px 0 0;
  width:100%;
  aspect-ratio:979 / 523;
  background:#0b0f2a;
  border-radius:2px;
  overflow:hidden;
}
.video-wrap iframe{width:100%;height:100%;border:0;display:block;}
.video-mcp{aspect-ratio:977 / 597;margin-top:26px;}

/* ---------- Case study body ---------- */
.section{margin-top:60px;scroll-margin-top:24px;}
.section h2{
  font-size:30.5px;line-height:1.1;letter-spacing:-0.01em;color:var(--navy);
  font-weight:700;margin:0 0 18px;
}
.section p{
  font-size:26.3px;line-height:1.42;letter-spacing:-0.006em;color:var(--navy);
  margin:0 0 18px;
}
.section p.tools{color:var(--orange);}
.section ol.num,.section ol.alpha{
  font-size:26.3px;line-height:1.4;letter-spacing:-0.006em;color:var(--navy);
  list-style:none;margin:0 0 18px;padding-left:0;counter-reset:item;
}
.section ol.num.start3{counter-reset:item 2;margin-top:60px;}
.section ol.alpha{counter-reset:alpha;margin:12px 0 0;}
.section ol.num > li{counter-increment:item;position:relative;padding-left:2.3em;margin:0 0 13px;}
.section ol.alpha > li{counter-increment:alpha;position:relative;padding-left:2.3em;margin:0 0 11px;}
.section ol.num > li::before{content:counter(item) " .";position:absolute;left:0;top:0;}
.section ol.alpha > li::before{content:counter(alpha,lower-alpha) " .";position:absolute;left:0;top:0;}
.section ol.num > li:last-child,.section ol.alpha > li:last-child{margin-bottom:0;}
.section p:has(+ p.tools){margin-bottom:4px;}
.section p.tools{margin:0 0 20px;}
.section .case-img{
  width:100%;margin:26px 0 0;border-radius:2px;
}
.section .case-cap{
  font-size:18px;line-height:1.42;letter-spacing:-0.004em;
  color:rgba(18,29,98,0.58);margin:11px 0 0;
}

/* ---------- Blog posts (Strategy page) ---------- */
.post-title{
  font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-0.015em;
  color:var(--navy);margin:0 0 20px;
}
.section h3{
  font-size:26.3px;line-height:1.25;font-weight:700;letter-spacing:-0.01em;
  color:var(--navy);margin:28px 0 12px;
}
.section p strong{font-weight:700;color:var(--navy);}
.post-sig{
  font-size:20px;line-height:1.5;letter-spacing:-0.004em;
  color:rgba(18,29,98,0.62);margin:30px 0 0;
}
.post-sig a{text-decoration:underline;text-underline-offset:2px;}
@media (max-width:900px){
  .post-title{font-size:26px;}
  .section h3{font-size:19px;}
  .post-sig{font-size:15px;}
}
.section .case-img + .case-img{margin-top:22px;}

/* ---------- Responsive fallback ---------- */
@media (max-width:1120px){
  .hero h1{font-size:6vw;}
  .hero .subtitle{font-size:3vw;}
}
@media (max-width:900px){
  .page{flex-direction:column;padding-bottom:80px;}
  .sidebar{position:static;width:auto;margin:0;padding:24px 24px 0;flex:none;}
  .nav{display:flex;flex-wrap:wrap;gap:6px 20px;}
  .nav .lvl1 a,.nav .lvl1 span,.nav .lvl2 a,.nav .lvl2 span{padding-left:0;}
  .nav a,.nav span{font-size:18px;padding:2px 0;}
  .nav .lvl1 a,.nav .lvl1 span,.nav .lvl2 a,.nav .lvl2 span{font-size:16px;}
  .main{margin-left:0;max-width:100%;padding:24px;}
  .hero h1{font-size:8vw;}
  .hero .subtitle{font-size:4vw;}
  .hero .tagline{font-size:14px;}
  .panel .panel-inner{padding:32px 28px;}
  .ballpoint-panel .bp-title{font-size:42px;}
  .ballpoint-panel .bp-for,.ballpoint-panel .bp-link{font-size:20px;}
  .ballpoint-panel .bp-meta,.about-panel .about-copy,.about-panel .about-email{font-size:17px;}
  .section h2{font-size:22px;}
  .section p,.section ol,.section ul{font-size:17px;}
}

/* ============================================================
   Design polish pass — craft refinements across the whole site
   ============================================================ */

/* Selection + visible keyboard focus */
::selection{ background:var(--navy); color:var(--white); }
::-moz-selection{ background:var(--navy); color:var(--white); }
a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:3px;
}

/* Rounded, gently lifted surfaces */
.panel{
  border-radius:12px;
  box-shadow:0 1px 2px rgba(18,29,98,0.05), 0 22px 48px -24px rgba(18,29,98,0.28);
}
.video-wrap,.video-mcp{ border-radius:12px; }

/* Screenshots read as intentional, framed artifacts */
.section .case-img{
  border-radius:10px;
  border:1px solid rgba(18,29,98,0.10);
  box-shadow:0 1px 2px rgba(18,29,98,0.05), 0 16px 36px -16px rgba(18,29,98,0.22);
  transition:transform .28s ease, box-shadow .28s ease;
}
.section .case-img:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(18,29,98,0.06), 0 24px 52px -18px rgba(18,29,98,0.30);
}

/* Comfortable reading measure for prose; figures stay full width */
.section > p, .section > ol, .section > h3, .section > .post-sig, .section > .case-cap{
  max-width:760px;
}

/* Navigation: smooth, with a clear active + hover cue */
.nav a{ transition:color .18s ease, opacity .18s ease; }
.nav a:hover{ opacity:1; color:var(--orange); }
.nav .active{ color:var(--orange); font-weight:500; }

/* Content links */
.post-sig a, .about-panel .about-email, .bp-link{ transition:color .18s ease; }
.post-sig a:hover{ color:var(--orange); }
.about-panel .about-email:hover, .bp-link:hover{ color:var(--orange-muted); }

/* Panel meta typographic hierarchy */
.bp-meta .lbl{ color:var(--orange-muted); }

/* Footer */
.site-foot{
  margin-top:96px; padding-top:26px;
  border-top:1px solid rgba(18,29,98,0.12);
  display:flex; justify-content:space-between; align-items:baseline; gap:18px 28px;
  flex-wrap:wrap; font-size:18px; letter-spacing:-0.004em; color:rgba(18,29,98,0.55);
}
.site-foot a{ color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .18s ease; }
.site-foot a:hover{ color:var(--orange); }
.site-foot .foot-name{ color:var(--navy); }

/* Active/hover tick marker (desktop only) */
@media (min-width:901px){
  .nav a{ position:relative; }
  .nav a::before{
    content:''; position:absolute; left:-16px; top:0.72em;
    width:0; height:2px; background:var(--orange); transition:width .2s ease;
  }
  .nav a:hover::before, .nav a.active::before{ width:9px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
  .section .case-img:hover{ transform:none; }
}

/* ============================================================
   Strategy page — blog article treatment
   ============================================================ */
.post + .post{
  margin-top:60px; padding-top:56px;
  border-top:1px solid rgba(18,29,98,0.14);
}
.post .post-title{ margin-bottom:12px; }
.post-meta{
  font-size:15px; text-transform:uppercase; letter-spacing:0.11em;
  font-weight:500; color:rgba(18,29,98,0.48); margin:0 0 26px;
}
.post .lead{
  font-size:30px; line-height:1.42; letter-spacing:-0.008em;
  color:var(--navy); margin:0 0 24px; max-width:760px;
}
@media (max-width:900px){
  .post-meta{ font-size:12px; margin-bottom:18px; }
  .post .lead{ font-size:20px; }
  .post + .post{ margin-top:40px; padding-top:38px; }
}

/* ============================================================
   Lightbox — click any still image to expand
   ============================================================ */
.section .case-img{ cursor:zoom-in; }
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(9,13,42,0.93);
  display:flex; align-items:center; justify-content:center;
  padding:1.5vmin;
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:99vw; max-height:97vh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 30px 90px -24px rgba(0,0,0,0.65);
  transform:scale(0.985); transition:transform .22s ease;
}
.lightbox.open img{ transform:scale(1); }
.lightbox-close{
  position:fixed; top:20px; right:24px; z-index:1001;
  width:46px; height:46px; padding:0;
  border:1px solid rgba(253,253,253,0.22); border-radius:50%;
  background:rgba(253,253,253,0.10); color:#fdfdfd;
  font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.lightbox-close:hover{ background:rgba(253,253,253,0.22); transform:scale(1.06); }
.lightbox-close:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox img, .lightbox-close{ transition:none; }
}