:root{
  /* core palette */
  --oxblood:#530b06; --brick:#873338; --rose:#b78c7f; --cream:#f7f3ce;
  /* extended palette */
  --gold:#aa8c37; --ochre:#ce9b4c; --sage:#8fa698; --taupe:#a89988; --parchment:#f5eee0;
  --ink:#2a2a2a; --ink-soft:#555; --line:var(--rose);
  --bg:#ffffff; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'mr-eaves-modern','Poppins',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}

/* topbar */
.site-header{position:sticky;top:0;z-index:50}
.topbar{background:var(--oxblood);
  border-top:1px solid var(--rose)}
.topbar-inner{max-width:var(--maxw);margin:0;padding:10px 24px;position:relative;
  display:flex;flex-direction:row;align-items:center;gap:16px}
.topbar-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:112px}
.topbar-photo{position:absolute;left:24px;bottom:-20px;z-index:2;
  width:92px;height:92px;border-radius:50%;object-fit:cover;
  border:3px solid var(--rose);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.topbar-brand{font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:800;
  font-size:36px;line-height:1.02;letter-spacing:-.01em;color:var(--parchment);border-bottom:none}
.topbar-brand:hover{color:#fff}
.topbar-tagline{font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.235em;text-transform:uppercase;color:var(--rose)}

/* page nav (floats at top of content, scrolls away) */
.header-intro{background:var(--bg)}
.header-intro-inner{max-width:var(--maxw);margin:0;padding:26px 24px 6px 132px}
.header-intro-inner p{max-width:820px;font-family:'mr-eaves-modern','Poppins',system-ui,sans-serif;
  font-weight:400;color:var(--ink-soft);
  font-size:clamp(19px,2.1vw,25px);line-height:1.4;margin:0}
.page-nav{background:var(--bg)}
.page-nav-inner{max-width:var(--maxw);margin:0;padding:14px 24px 14px 132px;
  display:flex;flex-wrap:wrap;gap:8px}
.page-nav a{font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:400;
  font-size:15px;letter-spacing:.02em;color:var(--ink-soft);border-bottom:none;line-height:1;
  padding:7px 15px;border-radius:999px;background:none;transition:color .2s,background-color .2s}
.page-nav a:hover{color:var(--brick);background:var(--parchment)}
.page-nav a.active{color:var(--brick);background:var(--parchment)}
.page-nav-toggle{display:none}

/* hero */
.hero{padding:13vh 24px 6vh;background:var(--bg);color:var(--ink)}
.hero .eyebrow{color:var(--ink-soft)}
.hero .hero-kicker{color:var(--ink-soft)}
.hero .toc{gap:8px 22px;margin-top:22px}
.hero .toc a{background:none;color:var(--ink-soft);
  padding:0 0 2px;border-radius:0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.hero .toc a:hover{background:none;color:var(--brick);border-color:var(--brick)}
.hero-inner{max-width:var(--maxw);margin:0 auto}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:200;
  color:var(--ink-soft);margin:0 0 18px}
.role-sub{margin:14px 0 0}
.hero-kicker{margin:0 0 14px;padding-left:0}
.hero h1{font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:800;
  color:var(--ink);
  font-size:clamp(40px,7vw,72px);line-height:1.02;letter-spacing:-.02em;margin:0}
.lede{font-size:clamp(17px,2.2vw,21px);color:var(--ink-soft);max-width:44ch;margin:26px 0 34px}
.toc{display:flex;flex-wrap:wrap;gap:8px 22px}
.toc a{font-size:14px;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px}
.toc a:hover{color:var(--ink);border-color:var(--ink)}

/* sections */
.section{max-width:var(--maxw);margin:0;padding:9vh 24px;scroll-margin-top:var(--headh,150px)}
.section:first-child{padding-top:5vh}
.section-head{margin:0 0 34px}
.section-head h2{font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:800;
  color:var(--brick);
  font-size:clamp(40px,7vw,72px);line-height:1.02;margin:0 0 6px;letter-spacing:-.02em}
.section-head p.section-date{font-size:16px;letter-spacing:.13em;
  font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:200;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
  padding-left:8px;margin:0}
.role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.section-head h2.nodate{margin-bottom:0}
.section-body{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:56px;align-items:start}
.section-write p{font-size:clamp(19px,1.4vw,23px);line-height:1.5;color:var(--ink-soft);margin:0 0 1em}
.section-write p:last-child{margin-bottom:0}

/* viewer */
.viewer{position:relative}
.track{position:relative}
.item{position:absolute;top:0;left:0;width:100%;padding:0 2px;pointer-events:none}
.item.active{position:relative;pointer-events:auto}
.item .media,.item figcaption{opacity:0;transition:opacity .32s ease}
.item.active .media{opacity:1}
.item.active figcaption{opacity:1;transition-delay:.16s}
.item.active.leaving .media,.item.active.leaving figcaption{opacity:0;transition-delay:0s}
.media{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;
  border-radius:6px;background:#fff}
.media.vid{display:flex;align-items:center;justify-content:center;background:#faf9f7}
.media video{width:100%;height:100%;object-fit:contain}
.media iframe{width:100%;height:100%;border:0}
.media img.free[src*="upside-slide07-01-payments"]{box-shadow:inset 0 0 0 1px #969696}
.section-write a{color:#873338;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s}
.section-write a:hover{color:#530b06}
.stage{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size}
.stage img.d{position:absolute;object-fit:fill}
.stage img.fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media img.free{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer .media:not(.vid){cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(20,18,16,.94);padding:24px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox-frame{width:min(96vw,calc(92vh * 16 / 9));aspect-ratio:16/9;position:relative;
  background:#faf9f7;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.lightbox-frame .media{width:100%;height:100%;opacity:1;overflow:hidden}
.lightbox-close{position:fixed;top:18px;right:22px;z-index:201;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:201;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px}
.lightbox-nav.lb-prev{left:20px}.lightbox-nav.lb-next{right:20px}
.lightbox-nav:hover,.lightbox-close:hover{background:rgba(0,0,0,.6)}
.lightbox.single .lightbox-nav{display:none}
.stage .t{position:absolute;white-space:pre-wrap}
figure.item{margin:0}
figcaption{margin:16px auto 0;max-width:60ch;text-align:center;
  font-size:18px;color:var(--ink-soft);min-height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0 48px}

.nav{position:absolute;bottom:0;transform:none;
  z-index:5;width:26px;height:26px;border-radius:50%;border:1px solid #d9d7d2;
  background:#fff;cursor:pointer;
  font-size:14px;line-height:1;color:var(--ink);display:flex;align-items:center;
  justify-content:center;transition:background .2s,border-color .2s,box-shadow .2s}
.nav:hover{background:#faf9f7;border-color:#bdbbb6;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.nav.prev{left:0}.nav.next{right:0}
@media (max-width:720px){
  .section-body{grid-template-columns:1fr;gap:28px}
  .section-head{margin:0 0 20px}
  /* avatar shrinks to fit inside the bar */
  .topbar-photo{position:static;width:52px;height:52px;border-width:2px}
  .topbar-text{margin-left:0}
  .header-intro-inner{padding-left:24px;padding-right:24px}
  /* projects dropdown */
  .page-nav{position:relative}
  .page-nav-toggle{display:flex;align-items:center;gap:8px;width:100%;
    font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:400;font-size:15px;
    letter-spacing:.02em;color:var(--ink-soft);background:none;border:none;cursor:pointer;
    padding:14px 24px;line-height:1}
  .page-nav-toggle::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
    transition:transform .2s}
  .page-nav.open .page-nav-toggle{color:var(--brick)}
  .page-nav.open .page-nav-toggle::after{transform:rotate(-135deg) translateY(-1px)}
  .page-nav-inner{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;flex-wrap:nowrap;gap:2px;padding:8px 16px 14px;
    background:var(--bg);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .page-nav.open .page-nav-inner{display:flex}
  .page-nav a{padding:11px 15px}}

footer{padding:40px 24px;text-align:center}
footer p{font-size:13px;color:var(--ink-soft);margin:0}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}