@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500&family=Inter:wght@400;500&display=swap');

:root{
  --ink:#111110;
  --bone:#EDEAE2;
  --graphite:#6E6A62;
  --graphite-soft:#A6A198;
  --brick:#8C3B2E;
  --line:rgba(17,17,16,0.13);
  --sidebar-w:260px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* near-invisible paper grain — texture, not pattern */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.045;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  z-index:999;
}

a{color:inherit;text-decoration:none;}

/* ---- layout shell ---- */

.shell{
  display:flex;
  min-height:100vh;
  max-width:1240px;
  margin:0 auto;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  padding:56px 32px 40px 40px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.portrait{
  width:88px;
  height:88px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:20px;
  background:#dcd8cd;
  border:1px solid var(--line);
}

.portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(0.55) contrast(1.05) sepia(0.12) saturate(0.9);
}

.brandmark{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:0.01em;
  display:block;
  animation:fadeUp 0.7s ease both;
}

.brandmark .role{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:12px;
  color:var(--graphite);
  margin-top:4px;
}

nav.pagenav{margin-top:64px;}

nav.pagenav a{
  display:block;
  position:relative;
  font-size:14px;
  padding:9px 0;
  color:var(--graphite);
  padding-left:14px;
  margin-left:-14px;
  transition:color 0.2s ease;
}

nav.pagenav a::before{
  content:'';
  position:absolute;
  left:-1px;
  top:4px;
  bottom:4px;
  width:1px;
  background:var(--brick);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 0.35s cubic-bezier(.4,0,.2,1);
}

nav.pagenav a:hover{color:var(--ink);}
nav.pagenav a:hover::before{transform:scaleY(1);}

nav.pagenav a.active{color:var(--ink);}
nav.pagenav a.active::before{transform:scaleY(1);}

.sidebar-foot{
  font-size:12px;
  color:var(--graphite-soft);
  line-height:1.6;
}

.sidebar-foot a{color:var(--graphite);}
.sidebar-foot a:hover{color:var(--brick);}

main{
  flex:1;
  min-width:0;
  padding:72px 64px 120px 56px;
  border-left:1px solid var(--line);
}

/* ---- typography ---- */

.eyebrow{
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--brick);
  margin-bottom:18px;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes drawIn{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

.eyebrow{animation:fadeUp 0.6s ease both;}

h1{
  font-family:'Inter Tight',sans-serif;
  font-weight:300;
  font-size:clamp(38px,4.4vw,58px);
  line-height:1.08;
  letter-spacing:-0.01em;
  max-width:820px;
  margin-bottom:28px;
  animation:fadeUp 0.7s ease 0.08s both;
}

main > .lede{animation:fadeUp 0.7s ease 0.16s both;}

h2{
  font-family:'Inter Tight',sans-serif;
  font-weight:400;
  font-size:22px;
  letter-spacing:-0.005em;
  margin-bottom:14px;
}

h3{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:15px;
  margin-bottom:6px;
}

.lede{
  font-size:18px;
  line-height:1.6;
  color:#2b2a28;
  max-width:640px;
  margin-bottom:20px;
}

p{max-width:640px;margin-bottom:16px;color:#2b2a28;}

.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:56px 0;
  transform-origin:left;
  animation:drawIn 0.8s cubic-bezier(.4,0,.2,1) both;
}

/* ---- perspective / bullet list ---- */

.perspective{
  list-style:none;
  max-width:640px;
  margin:0 0 24px;
}

.perspective li{
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:15px;
  color:#2b2a28;
}

.perspective li:last-child{border-bottom:1px solid var(--line);}

.closing{
  max-width:560px;
  font-size:15px;
  color:var(--graphite);
  margin-top:24px;
}

/* ---- case study blocks ---- */

.case{
  margin-bottom:8px;
}

.case-num{
  font-family:'Inter Tight',sans-serif;
  font-size:12px;
  color:var(--graphite-soft);
  letter-spacing:0.04em;
  margin-bottom:10px;
}

.case-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:400;
  font-size:26px;
  margin-bottom:22px;
  max-width:640px;
}

.case-grid{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:6px 24px;
  max-width:700px;
  margin-bottom:14px;
}

.case-label{
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--graphite-soft);
  padding-top:2px;
}

.case-body p{margin-bottom:12px;font-size:14.5px;}
.case-body p:last-child{margin-bottom:0;}

.case-body ul{
  list-style:none;
  margin-bottom:12px;
}

.case-body ul li{
  font-size:14.5px;
  color:#2b2a28;
  padding-left:14px;
  position:relative;
  margin-bottom:8px;
}

.case-body ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:4px;
  height:1px;
  background:var(--graphite-soft);
}

.case-body strong{font-weight:500;color:var(--ink);}

.case-outcome{
  font-size:14.5px;
  padding:16px 20px;
  border-left:1px solid var(--brick);
  background:transparent;
  margin-top:4px;
  color:#2b2a28;
}

/* ---- pull quote / award ---- */

.pull{
  font-family:'Inter Tight',sans-serif;
  font-weight:300;
  font-size:22px;
  line-height:1.4;
  max-width:560px;
  margin:28px 0;
  color:var(--ink);
}

.pull .mark{color:var(--brick);}

/* ---- contact list on content page ---- */

.pressline{
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:14.5px;
}

.pressline:last-child{border-bottom:1px solid var(--line);}

.pressline .outlet{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  min-width:150px;
  flex-shrink:0;
}

.pressline .desc{color:var(--graphite);}

/* ---- mobile ---- */

.mobile-nav{display:none;}

@media (max-width:860px){
  .shell{flex-direction:column;max-width:100%;}
  .sidebar{
    position:relative;
    width:100%;
    height:auto;
    padding:28px 24px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  nav.pagenav{display:none;}
  .sidebar-foot{display:none;}
  .mobile-nav{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:0 24px 20px;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav a{
    font-size:13px;
    color:var(--graphite);
    white-space:nowrap;
    padding-bottom:6px;
    border-bottom:1px solid transparent;
  }
  .mobile-nav a.active{color:var(--ink);border-bottom:1px solid var(--brick);}
  main{padding:40px 24px 80px;border-left:none;}
  .case-grid{grid-template-columns:1fr;gap:2px 0;}
  .case-label{padding-top:12px;}
}