/* ============================================================
   ALT DIRECTION — light tinted page, floating media
   Loaded AFTER styles.css. Overrides only.
   ============================================================ */

:root{
  /* light, cool-neutral system — tinted page, white plates */
  --ink:#1e2126;
  --ink-soft:#697079;
  --line:#dde1e7;
  --bg:#f5f7fa;          /* soft cool page */
  --plate:#ffffff;       /* artwork sits on white */
  --chip:#e3e7ed;
  --maxw:1180px;
  --accent:#3d3357;
  --accent-deep:#2a2340;
}

body{background:var(--bg)}

/* ---- topbar: light tint, dark type (no black bar) ---- */
.topbar{background:var(--bg);border-top:none;border-bottom:1px solid var(--line)}
.topbar-photo{left:auto;right:24px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.10)}
.topbar-text{margin-left:0}
.topbar-brand{color:var(--accent)}
.topbar-brand:hover{color:var(--accent-deep)}
.topbar-tagline{color:var(--ink-soft)}

/* ---- footer: contact + meta ---- */
.site-footer{background:var(--bg);border-top:1px solid var(--line);margin-top:80px}
.site-footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:34px 24px 46px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-links{display:flex;align-items:center;gap:6px;margin-left:-8px}
.footer-links a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--ink-soft);border:none;
  transition:color .18s;
}
.footer-links a svg{width:17px;height:17px;display:block}
/* icon darkens only — the 34px circle stays as the hit target, never painted */
.footer-links a:hover{color:var(--ink)}
.footer-links a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.footer-meta{
  margin:0;font-size:14px;color:var(--ink-soft);
  letter-spacing:.02em;
}

/* ---- intro / about: lede + supporting ---- */
.header-intro,.page-nav{background:var(--bg)}
.header-intro-inner{padding:32px 24px 24px;max-width:var(--maxw)}
.header-intro-inner p{margin:0}
/* lede — big, dark, the first thing you read */
.header-intro-inner p:first-of-type{
  font-family:'mr-eaves-sans','Poppins',sans-serif;font-weight:400;
  font-size:clamp(22px,2.5vw,31px);line-height:1.26;
  letter-spacing:-.015em;color:var(--ink);
  max-width:44ch;text-wrap:pretty;
}
/* supporting — quieter, smaller */
.header-intro-inner p + p{
  margin-top:16px;
  font-size:clamp(16px,1.15vw,18px);line-height:1.5;
  color:var(--ink-soft);max-width:62ch;
}
.page-nav-inner{padding-left:24px;background:var(--bg)}
.page-nav{border-top:0}
.page-nav a:hover,.page-nav a.active{color:var(--ink);background:var(--chip)}
.page-nav.open .page-nav-toggle{color:var(--ink)}

/* ---- headings ---- */
/* ---- headings: smaller than the hero, calmer weight ---- */
.section-head{margin:0 0 26px}
.section-head h2{
  color:var(--ink);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.08;
}
.section-head p.section-date{font-size:14px;letter-spacing:.14em;padding-left:2px}
.section-write a{color:var(--ink);text-decoration-color:#a8b0ba}
.section-write a:hover{color:#000;text-decoration-color:#000}

/* ============================================================
   GRID: writeup above, media centered and comfortable
   ============================================================ */
.section{padding:9vh 24px}
.section-body{display:block}
.section-write{max-width:68ch;margin:0 0 38px}
.section-write p{font-size:clamp(18px,1.25vw,21px);color:var(--ink-soft)}

/* viewer sits narrower than full bleed */
.viewer{max-width:940px;margin:0 auto}

/* ============================================================
   MEDIA: white plate floating on the tint
   ============================================================ */
.media{
  aspect-ratio:16/9;
  height:auto;
  border-radius:10px;
  background:var(--plate);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.08);
  overflow:hidden;
}
.media.vid{background:var(--plate)}
.media video{width:100%;height:100%;object-fit:contain}

/* the one intentionally-small image keeps its scale */
.media img.free[src*="lens-goooogle"]{transform:scale(.5)}
.media img.free[src*="upside-slide07-01-payments"]{box-shadow:inset 0 0 0 1px #dbdfe5}

/* ---- caption ---- */
/* ---- caption + arrows share one row under the image ---- */
figcaption{
  margin:14px auto 0;max-width:100%;
  font-size:17px;color:var(--ink-soft);
  padding:0 48px;min-height:40px;
  display:flex;align-items:center;justify-content:center;
}

/* ---- nav arrows: flank the caption on the same line ---- */
.viewer{padding-bottom:0}
.nav{
  top:auto;bottom:4px;
  width:32px;height:32px;font-size:20px;
  border:1px solid var(--line);background:#fff;
  backdrop-filter:none;
}
.nav.prev{left:0;margin-left:0}
.nav.next{right:0;left:auto;margin-left:0}
.nav:hover{background:#fff;border-color:#b9c1cb;box-shadow:0 4px 14px rgba(0,0,0,.10)}

/* ---- lightbox ---- */
.lightbox{background:rgba(24,28,33,.93)}
.lightbox-frame{background:var(--plate);border-radius:10px}

footer{background:var(--bg)}

@media (max-width:720px){
  .section{padding:7vh 20px}
  .section-write{margin-bottom:26px}
  .viewer{max-width:none}
  .page-nav-toggle{padding-left:20px}
  .site-footer{margin-top:56px}
  .site-footer-inner{padding:26px 20px 36px;gap:14px}
}
@media (max-width:420px){
  .site-footer-inner{flex-direction:column;align-items:flex-start}
}