/* Jason Wietholter personal site. Tokens mirror kit/tokens.css. */
@font-face { font-family:'Newsreader'; src:url('fonts/Newsreader-Var.ttf') format('truetype'); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('fonts/Newsreader-Italic-Var.ttf') format('truetype'); font-weight:200 800; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Var.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  --navy:#0B1F3A; --navy-2:#16325A; --accent:#3A86FF; --accent-ink:#1D5FD6; --sky:#E6EEFB;
  --paper:#F6F7F9; --white:#FFFFFF; --ink:#0E1726; --slate:#5A6679; --mist:#C3CFE0; --fog:#8FA3C0; --rule:#D9DEE6;
  --font-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --max:1200px; --gutter:clamp(20px, 5vw, 64px); --pad:clamp(72px, 10vw, 136px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; font-family:var(--font-sans); font-size:17px; line-height:1.65; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--accent-ink); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--white); color:var(--navy); padding:12px 16px; z-index:100; }
.skip:focus { left:16px; top:16px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
section { padding:var(--pad) 0; }
.dark { background:var(--navy); color:var(--white); }
.dark a { color:var(--white); }
.white { background:var(--white); }
.kicker { display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 28px; }
.kicker:before { content:''; width:32px; height:3px; background:currentColor; flex:none; }
.dark .kicker { color:var(--accent); }
h1, h2, h3 { font-family:var(--font-serif); font-weight:500; letter-spacing:-.02em; margin:0; text-wrap:balance; font-variation-settings:'opsz' 72; }
h1 { font-size:clamp(52px, 8vw, 112px); line-height:1.0; font-weight:600; }
h2 { font-size:clamp(34px, 4.2vw, 56px); line-height:1.1; }
h3 { font-size:26px; line-height:1.25; letter-spacing:-.01em; font-variation-settings:'opsz' 36; }
h1 i { font-style:normal; color:var(--accent); }
h2 em, h3 em { font-style:italic; color:var(--accent-ink); }
.dark h2 em { color:var(--accent); }
.lead { font-size:clamp(19px, 1.6vw, 22px); line-height:1.55; color:var(--slate); max-width:640px; }
.dark .lead { color:var(--mist); }
.bar { width:88px; height:5px; background:var(--accent-ink); margin:36px 0; border:0; }
.dark .bar { background:var(--accent); }

/* header */
.site-header { position:sticky; top:0; z-index:10; background:rgba(11,31,58,.96); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid rgba(255,255,255,.08); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
.wm { font-family:var(--font-serif); font-weight:600; font-size:24px; letter-spacing:-.005em; color:var(--white); text-decoration:none; font-variation-settings:'opsz' 36; }
.wm i { font-style:normal; color:var(--accent); }
.nav { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav a { color:var(--mist); text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.02em; }
.nav a:hover { color:var(--white); }
@media (max-width: 820px) { .nav { display:none; } }

/* hero */
.hero { position:relative; overflow:hidden; padding:clamp(80px, 12vw, 160px) 0 clamp(80px, 11vw, 150px); }
.hero .grid { display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(40px, 6vw, 96px); align-items:center; }
.hero .lead { margin-top:32px; font-size:clamp(20px, 1.8vw, 24px); }
.rings { position:absolute; width:640px; height:640px; border-radius:50%; border:2px solid rgba(58,134,255,.30); right:-220px; top:-200px; pointer-events:none; }
.rings:after { content:''; position:absolute; inset:96px; border-radius:50%; border:2px solid rgba(58,134,255,.16); }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px; font-weight:600; font-size:15px; letter-spacing:.02em; text-decoration:none; border:2px solid transparent; }
.btn.primary { background:var(--accent); color:var(--navy); }
.btn.primary:hover { background:#5C9BFF; }
.btn.ghost { border-color:rgba(255,255,255,.35); color:var(--white); }
.btn.ghost:hover { border-color:var(--white); }
.btn.ink { background:var(--navy); color:var(--white); }
.headshot { aspect-ratio:1; width:100%; max-width:400px; justify-self:end; border-radius:50%; border:4px solid var(--accent); background:linear-gradient(160deg, var(--navy-2), #0F2747);
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--fog); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:40px; }
img.headshot { position:relative; z-index:1; padding:0; object-fit:cover; object-position:50% 20%; display:block; height:auto; background:var(--navy-2); }
@media (max-width: 820px) { .hero .grid { grid-template-columns:1fr; } .headshot { justify-self:start; max-width:220px; order:-1; } }

/* about */
.about .grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(40px, 6vw, 96px); }
.about p { color:#3A4556; margin:0 0 20px; max-width:640px; }
.facts { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.facts li { padding:18px 0; border-bottom:1px solid var(--rule); }
.facts .l { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:4px; }
.facts .v { font-family:var(--font-serif); font-size:20px; line-height:1.35; color:var(--ink); font-variation-settings:'opsz' 24; }
@media (max-width: 820px) { .about .grid { grid-template-columns:1fr; } }

/* topics */
.cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:56px; }
.card { background:var(--white); border:1px solid var(--rule); border-radius:20px; padding:32px 28px 34px; }
.card .num { font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.card h3 { margin:18px 0 12px; }
.card p { margin:0; color:var(--slate); font-size:16px; line-height:1.6; }
@media (max-width: 1080px) { .cards { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns:1fr; } }

/* framework feature */
.feature h2 { max-width:820px; }
.levers { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:64px; border-top:1px solid rgba(255,255,255,.14); }
.lever { padding:36px 32px 36px 0; border-right:1px solid rgba(255,255,255,.14); }
.lever + .lever { padding-left:32px; }
.lever:last-child { border-right:0; }
.lever .w { font-family:var(--font-serif); font-size:clamp(40px, 4.4vw, 60px); line-height:1; letter-spacing:-.02em; font-variation-settings:'opsz' 72; }
.lever .t { font-family:var(--font-serif); font-style:italic; font-size:22px; color:var(--accent); margin:10px 0 16px; }
.lever p { margin:0; color:var(--mist); font-size:16px; }
.push { margin-top:64px; display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(32px, 5vw, 80px); align-items:start; background:var(--navy-2); border:1px solid rgba(58,134,255,.35); border-radius:20px; padding:clamp(28px, 4vw, 48px); }
.push { align-items:center; }
.push-cta { margin:0; justify-self:center; }
.push h3 { font-size:clamp(28px, 3vw, 38px); line-height:1.15; }
.push h3 em { color:var(--accent); }
.push ol { list-style:none; margin:0; padding:0; counter-reset:s; }
.push li { counter-increment:s; padding:16px 0 16px 52px; position:relative; border-top:1px solid rgba(255,255,255,.14); color:#E3EAF4; font-size:18px; }
.push li:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.push li:before { content:counter(s, decimal-leading-zero); position:absolute; left:0; top:17px; font-weight:700; color:var(--accent); font-size:15px; }
@media (max-width: 820px) { .levers { grid-template-columns:1fr; } .lever, .lever + .lever { padding:28px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); } .push { grid-template-columns:1fr; } .push-cta { justify-self:start; } }

/* speaking */
.speak .grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:start; }
.speak ul.tags { list-style:none; padding:0; margin:28px 0 36px; display:flex; flex-wrap:wrap; gap:10px; }
.speak ul.tags li { font-size:14px; font-weight:600; padding:8px 16px; border-radius:999px; background:var(--sky); color:var(--navy); }
.signup { display:flex; gap:10px; flex-wrap:wrap; }
.signup label { position:absolute; left:-9999px; }
.signup input { flex:1 1 220px; padding:14px 16px; font:inherit; font-size:16px; border:1px solid var(--rule); border-radius:12px; background:var(--white); color:var(--slate); }
.signup button { padding:14px 22px; border-radius:12px; border:0; font:inherit; font-weight:600; background:#AEB6C3; color:var(--ink); cursor:not-allowed; }

/* contact */
.links { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.links button { width:100%; text-align:left; font:inherit; cursor:pointer; color:inherit; }
.links a, .links button { display:block; padding:28px; border-radius:20px; background:var(--navy-2); border:1px solid rgba(255,255,255,.12); text-decoration:none; height:100%; }
.links a:hover, .links button:hover, .links button:focus-visible { border-color:var(--accent); }
.links .l { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); margin-bottom:8px; }
.links .v { font-family:var(--font-serif); font-size:24px; color:var(--white); font-variation-settings:'opsz' 36; }
@media (max-width: 820px) { .links { grid-template-columns:1fr; } }

/* footer */
.site-footer { background:#081729; color:var(--fog); padding:48px 0 56px; font-size:14px; }
.site-footer .row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:28px; margin-bottom:28px; }
.site-footer .wm { font-size:22px; }
.legal { max-width:860px; line-height:1.6; color:var(--fog); margin:0; }
@media (max-width: 820px) { .speak .grid { grid-template-columns:1fr; } }
.grid > * { min-width:0; }
.about p.kicker { color:var(--accent-ink); max-width:none; margin-bottom:28px; }
@media (max-width: 480px) { .kicker { letter-spacing:.1em; font-size:12px; } }
.feature h2 { max-width:none; }

/* nav cta */
.btn.nav-cta { padding:9px 18px; font-size:14px; background:var(--accent); color:var(--navy); }
.site-header nav { margin-left:auto; margin-right:28px; }
@media (max-width: 820px) { .site-header nav { display:none; } }

/* as seen in */
.speak h2 { max-width:none; }
.open-to { margin:40px 0 0; color:var(--slate); font-size:15px; }

/* newsletter */
.newsletter .grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:center; }
.newsletter .lead { margin-top:28px; }
.pillars { list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.pillars li { font-size:14px; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:var(--mist); }
.signup-card { background:var(--white); color:var(--ink); border-radius:20px; padding:clamp(24px, 4vw, 40px); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.signup-card h3 { font-size:30px; margin-bottom:8px; }
.signup-card p { color:var(--slate); margin:0 0 20px; font-size:16px; }
.signup-card .fine { margin:14px 0 0; font-size:13px; }
.signup button { background:var(--accent-ink); color:var(--white); cursor:pointer; }
.signup button:hover { background:var(--navy); }
.signup input { color:var(--ink); min-width:0; }
@media (max-width: 820px) { .newsletter .grid { grid-template-columns:1fr; } }

/* posts */
.post-list { list-style:none; padding:0; margin:48px 0 40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.post-list li a { display:block; height:100%; padding:28px; border-radius:20px; background:var(--paper); border:1px solid var(--rule); text-decoration:none; color:var(--ink); }
.white .post-list li a { background:var(--paper); }
.post-list li a:hover { border-color:var(--accent); }
.post-list .meta { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px; }
.post-list h3 { font-size:24px; line-height:1.2; margin-bottom:12px; }
.post-list p { margin:0; color:var(--slate); font-size:16px; }
@media (max-width: 960px) { .post-list { grid-template-columns:1fr; } }
.article { max-width:720px; margin:0 auto; }
.article h1 { font-size:clamp(38px, 5.5vw, 64px); line-height:1.08; }
.article .meta { color:var(--accent-ink); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:0 0 20px; }
.article .body { font-size:19px; margin-top:40px; }
.article .body h2 { font-size:32px; margin:44px 0 12px; }
.article .body li { margin:6px 0; }
.page-hero { padding:clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.article-cta { margin-top:64px; }

/* representative work */
.sub { font-size:clamp(26px,2.6vw,34px); margin:0; }
.matters { grid-template-columns:repeat(2, 1fr); margin-top:32px; }
.matter .meta { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin:0; }
.matter h3 { margin:10px 0 12px; }
.matter p { margin:0 0 12px; color:#3A4556; }
.matter .src { font-size:14px; margin:0; overflow-wrap:anywhere; }
.work-facts { padding-bottom:72px; }
.facts-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px,4vw,56px); }
.facts-grid h3 { margin:28px 0 12px; }
.facts-grid li { overflow-wrap:anywhere; }
.legal-note { margin-top:48px; font-size:14px; color:var(--slate); border-top:1px solid var(--rule); padding-top:20px; }
.work-teaser { padding:clamp(56px,7vw,96px) 0 0; }
@media (max-width: 900px) { .matters, .facts-grid { grid-template-columns:1fr; } }

/* Contact modal */
.cm-lock { overflow:hidden; }
.cmodal { width:min(560px, calc(100% - 32px)); max-height:calc(100% - 48px); padding:0; border:0; border-radius:24px; background:var(--white); color:var(--ink); box-shadow:0 30px 80px rgba(11,31,58,.45); }
.cmodal::backdrop { background:rgba(11,31,58,.72); }
.cm-form { position:relative; padding:40px; display:grid; gap:16px; }
.cm-form h2 { margin:0; font-size:40px; }
.cm-form .kicker { margin:0; }
.cm-sub { margin:0 0 8px; color:var(--slate); }
.cm-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:999px; border:1px solid var(--rule); background:var(--white); font-size:26px; line-height:1; color:var(--navy); cursor:pointer; }
.cm-close:hover { background:var(--sky); }
.cm-field { display:grid; gap:6px; }
.cm-field label { font-size:14px; font-weight:600; color:var(--navy); }
.cm-field input, .cm-field select, .cm-field textarea { font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--paper); color:var(--ink); width:100%; box-sizing:border-box; }
.cm-field textarea { resize:vertical; }
.cm-field input:focus, .cm-field select:focus, .cm-field textarea:focus { outline:3px solid var(--accent); outline-offset:1px; background:var(--white); }
.cm-field [aria-invalid="true"] { border-color:#B42318; }
.cm-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cm-status { margin:0; min-height:1.4em; font-size:15px; }
.cm-status.ok { color:#067647; font-weight:600; }
.cm-status.err { color:#B42318; font-weight:600; }
.cm-submit { justify-self:start; cursor:pointer; font-family:inherit; }
.cm-submit[disabled] { opacity:.6; cursor:wait; }
.cm-fine { margin:0; font-size:13px; color:var(--slate); }
.contact-cta { margin-top:32px; }
.site-footer .foot-contact { color:inherit; font-weight:600; }
@media (max-width:600px) {
  .cmodal { width:100%; max-width:100%; max-height:92vh; margin:auto 0 0; border-radius:24px 24px 0 0; }
  .cm-form { padding:28px 20px 32px; }
  .cm-form h2 { font-size:32px; }
  .cm-submit { justify-self:stretch; justify-content:center; }
}

/* Home representative work */
.home-work { background:var(--paper); }
.home-work .matters { margin:40px 0 24px; }
.home-work .fine { color:var(--slate); font-size:14px; margin:0 0 28px; }
@media (max-width:800px) { .home-work .matters { grid-template-columns:1fr; } }