@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Franklin:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');
:root { --paper:#f7f7f4; --ink:#1d1d1b; --muted:#575750; --rule:#c7c7bf; --accent:#313b63; }
html { scroll-behavior:smooth; }
body { background:var(--paper)!important; color:var(--ink)!important; font-family:'Libre Franklin',Arial,sans-serif!important; }
body.dark { --paper:#171818; --ink:#f1f0e9; --muted:#bebeb7; --rule:#4b4b48; --accent:#bac6e8; }
body.dark, .dark body { background:var(--paper)!important; color:var(--ink)!important; }
h1,h2,h3,blockquote,.font-display { font-family:'Newsreader',Georgia,serif!important; letter-spacing:-.025em!important; font-weight:500!important; }
h1 { font-size:clamp(3.2rem,6vw,5.9rem)!important; line-height:.99!important; max-width:850px; }
h2 { line-height:1.08!important; }
h3 { line-height:1.16!important; }
p { line-height:1.65; }
header { background:var(--paper)!important; backdrop-filter:none!important; border-color:var(--ink)!important; }
header > div { border-top:3px double var(--ink); margin-top:7px; padding-top:11px!important; padding-bottom:12px!important; }
header > div > a:first-child { font-family:'Newsreader',Georgia,serif; font-size:1.8rem!important; font-weight:700!important; }
nav a { color:var(--ink)!important; font-weight:600; }
a:hover { color:var(--accent)!important; }
.text-brandBlue,.text-brandCoral,.text-amber-500,.text-indigo-600,.text-cyan-600 { color:var(--accent)!important; }
.bg-brandBlue,.bg-brandCoral,.bg-brandCharcoal { background:var(--ink)!important; }
.bg-white,.bg-slate-100,.bg-blue-50,.bg-rose-100,.bg-emerald-100,.bg-indigo-50,.bg-cyan-50,.bg-slate-200,.bg-amber-400 { background:transparent!important; }
.text-white { color:var(--paper)!important; }
.text-slate-400,.text-slate-500,.text-slate-600,.text-slate-700,.text-slate-800 { color:var(--muted)!important; }
.border,.border-t,.border-b,.border-y { border-color:var(--rule)!important; }
.rounded-full,.rounded-3xl,.rounded-2xl,.rounded-xl,.rounded-md { border-radius:0!important; }
.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl { box-shadow:none!important; }
/* Lead story */
body > section:first-of-type { padding-top:4.5rem!important; padding-bottom:4rem!important; border-bottom:3px double var(--ink); }
body > section:first-of-type .inline-flex { background:transparent!important; border:0!important; border-top:1px solid var(--ink)!important; border-bottom:1px solid var(--ink)!important; padding:.65rem 0!important; color:var(--muted)!important; letter-spacing:.08em; text-transform:uppercase; }
body > section:first-of-type .animate-pulse { display:none; }
body > section:first-of-type h1 span { color:var(--ink)!important; font-style:normal!important; font-weight:500!important; }
body > section:first-of-type p { color:var(--muted)!important; font-weight:400!important; }
body > section:first-of-type .p-4 { padding:1rem 0!important; background:transparent!important; border:0!important; border-top:1px solid var(--rule)!important; border-bottom:1px solid var(--rule)!important; }
body > section:first-of-type .aspect-\[4\/5\] { border:0!important; }
body > section:first-of-type .absolute { background:var(--paper)!important; border:0!important; border-top:2px solid var(--ink)!important; left:0!important; right:0!important; bottom:0!important; padding:1rem!important; }
body > section:first-of-type .absolute p:first-child { color:var(--accent)!important; }
body > section:first-of-type img,.group img { transition:none!important; transform:none!important; }
/* Navigation and actions */
a[class*="rounded-full"],button[class*="rounded-full"] { border-radius:0!important; box-shadow:none!important; transform:none!important; }
a[class*="bg-brandCharcoal"],a[class*="bg-brandBlue"] { border:1px solid var(--ink)!important; }
a[class*="border-2"] { border:1px solid var(--ink)!important; }
a[class*="bg-brandCharcoal"]:hover,a[class*="bg-brandBlue"]:hover { background:var(--accent)!important; color:var(--paper)!important; }
button { color:var(--ink)!important; background:transparent!important; border:1px solid var(--rule); }
/* Sections and data: ruled editorial columns instead of floating cards */
section[id],body > section { scroll-margin-top:6rem; }
section[id] { border-top:2px solid var(--ink)!important; }
section h2 { font-size:clamp(2.5rem,4.5vw,4.4rem)!important; }
section h3 { font-size:1.55rem!important; }
section span[class*="uppercase"] { letter-spacing:.12em; }
section div[class*="rounded-2xl"],section div[class*="rounded-3xl"],section div[class*="rounded-xl"] { background:transparent!important; box-shadow:none!important; }
section div[class*="rounded-2xl"][class*="border"],section div[class*="rounded-3xl"][class*="border"],section div[class*="rounded-xl"][class*="border"] { border:0!important; border-top:1px solid var(--rule)!important; }
section div[class*="rounded-2xl"] p.text-xs,section div[class*="rounded-3xl"] p.text-xs,section div[class*="rounded-xl"] p.text-xs { font-size:.9rem!important; line-height:1.6!important; }
section div[class*="rounded-2xl"] h3,section div[class*="rounded-3xl"] h3 { margin-top:.45rem; }
section.impact-stats .grid > div { border:0!important; border-top:1px solid var(--ink)!important; padding:1rem .4rem!important; text-align:left; }
section.impact-stats .grid > div > div:first-child { font-family:'Newsreader',Georgia,serif; font-size:2.8rem!important; color:var(--ink)!important; }
#speaking .lg\:col-span-7 .grid.gap-2\.5 { gap:0!important; }
#speaking .lg\:col-span-7 .grid.gap-2\.5 > div { padding:.85rem 0!important; font-size:.9rem!important; border:0!important; border-bottom:1px solid var(--rule)!important; }
#speaking .lg\:col-span-7 span[class*="rounded-full"] { color:var(--ink)!important; background:transparent!important; border:1px solid var(--ink); font-family:'Newsreader',Georgia,serif; font-size:1.25rem!important; padding:.2rem .6rem!important; }
#projects .group { border-top:2px solid var(--ink)!important; }
#projects .group a { background:transparent!important; color:var(--ink)!important; border-top:1px solid var(--rule); text-align:left; }
#research .grid > div { border-top:1px solid var(--ink)!important; }
#research .grid span[class*="bg-"] { background:transparent!important; color:var(--muted)!important; padding:0!important; }
footer { background:var(--paper)!important; color:var(--ink)!important; }
@media (max-width:767px) { body > section:first-of-type { padding-top:2rem!important; } h1 { font-size:3.4rem!important; } section h2 { font-size:2.7rem!important; } header > div { gap:1rem; } }
/* Work index and social portfolio */
.work-index { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:4rem; border-top:2px solid var(--ink); }
.eyebrow { display:block; font-family:'Libre Franklin',Arial,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.1rem; }
.work-index h2 { font-size:clamp(2.5rem,4.2vw,4.2rem)!important; max-width:11ch; }
.work-index-heading p { max-width:34rem; margin-top:1.4rem; color:var(--muted); font-size:1rem; }
.work-index-grid { border-top:1px solid var(--ink); }
.work-index-grid a { display:grid; grid-template-columns:2.5rem 1fr 1.5rem; align-items:baseline; gap:.6rem; padding:1.1rem .2rem; border-bottom:1px solid var(--rule); color:var(--ink)!important; font-family:'Newsreader',Georgia,serif; font-size:1.55rem; line-height:1.15; }
.work-index-grid a:hover { color:var(--accent)!important; padding-left:.55rem; }
.work-index-grid a span:last-child { font-family:Arial,sans-serif; font-size:1rem; }
.index-number { font-family:'Libre Franklin',Arial,sans-serif; font-size:.68rem; font-weight:600; color:var(--muted); }
.social-portfolio { padding-top:5rem!important; padding-bottom:5rem!important; }
.social-intro { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; }
.social-intro h2 { max-width:11ch; }
.social-copy { border-top:1px solid var(--ink); padding-top:1rem; }
.social-copy p { font-size:1rem; margin-bottom:1.2rem; color:var(--ink); }
.social-copy a,.social-feature-heading a,.reel-item a,.social-partnership a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; font-weight:600; }
.social-feature-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-top:4.5rem; padding-bottom:1rem; border-bottom:2px solid var(--ink); }
.social-feature-heading h3,.social-partnership h3 { font-size:2.2rem!important; }
.social-feature-heading .eyebrow { margin-bottom:.4rem; }
.social-feature-heading a { font-size:.85rem; white-space:nowrap; }
.reel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; margin-top:1.5rem; }
.reel-item { min-width:0; border-top:1px solid var(--rule); padding-top:.75rem; }
.reel-frame { width:100%; aspect-ratio:9/14; background:#eee; border:1px solid var(--rule); overflow:hidden; }
.reel-frame iframe { width:100%; height:100%; border:0; background:#fff; }
.reel-item > a { display:inline-block; padding-top:.75rem; font-size:.82rem; }
.social-partnership { display:grid; grid-template-columns:1fr 300px; gap:3rem; align-items:start; border-top:2px solid var(--ink); margin-top:4rem; padding-top:1.5rem; }
.social-partnership p { max-width:30rem; margin:1rem 0; color:var(--muted); }
.social-partnership .reel-frame { max-width:300px; }
@media(max-width:900px) { .work-index,.social-intro { grid-template-columns:1fr; gap:2rem; } .reel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .work-index-grid a { font-size:1.35rem; } .social-feature-heading { align-items:start; flex-direction:column; gap:.6rem; } .reel-grid { gap:.7rem; } .social-partnership { grid-template-columns:1fr; } .social-partnership .reel-frame { width:min(100%,350px); } }
/* Connections-inspired pieces */
.work-index { display:block; max-width:1080px; }
.work-index-heading { text-align:center; max-width:700px; margin:0 auto 2.2rem; }
.work-index-heading h2 { max-width:none; }
.work-index-heading p { margin:1rem auto 0; }
.pieces-experience { max-width:760px; margin:0 auto; }
.pieces-instruction { text-align:center; font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.pieces-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.pieces-grid button { display:flex; align-items:center; justify-content:center; min-height:6.25rem; padding:.65rem; border:0!important; border-radius:5px!important; background:#eeeee6!important; color:#20201e!important; text-align:center; font-family:'Libre Franklin',Arial,sans-serif; font-size:.88rem; line-height:1.3; font-weight:700; cursor:pointer; transition:background .15s ease,transform .15s ease; }
.pieces-grid button:hover { background:#dcdcd1!important; transform:translateY(-2px); }
.pieces-grid button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.pieces-grid button.is-active[data-piece="speaking"] { background:#f9df75!important; }
.pieces-grid button.is-active[data-piece="social"] { background:#b2d989!important; }
.pieces-grid button.is-active[data-piece="research"] { background:#8fb2e8!important; }
.pieces-grid button.is-active[data-piece="building"] { background:#c594cb!important; }
.pieces-result { min-height:6rem; margin-top:1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.2rem; border:1px solid var(--rule); }
.pieces-result p { color:var(--muted); font-size:.88rem; }
.pieces-result.is-revealed { border:0; border-radius:5px; color:#20201e; gap:.25rem; }
.pieces-result.group-speaking { background:#f9df75; }
.pieces-result.group-social { background:#b2d989; }
.pieces-result.group-research { background:#8fb2e8; }
.pieces-result.group-building { background:#c594cb; }
.pieces-result strong { font-size:.95rem; text-transform:uppercase; }
.pieces-result span { font-size:.88rem; max-width:620px; }
.pieces-result a { color:#20201e!important; text-decoration:underline; text-underline-offset:3px; font-size:.83rem; font-weight:700; margin-top:.3rem; }
.pieces-note { text-align:center; margin-top:1rem; font-size:.8rem; color:var(--muted); }
.pieces-note a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
header nav a:first-child { font-family:'Libre Franklin',Arial,sans-serif!important; font-size:.75rem!important; font-weight:600!important; }
@media(max-width:620px) { .pieces-grid { gap:.35rem; } .pieces-grid button { min-height:5.3rem; font-size:.68rem; padding:.3rem; } .pieces-result { min-height:7rem; } }
/* The origin story connects the portfolio's sections in chronological order. */
.origin-story { display:grid; grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr); gap:5rem; border-top:0!important; }
.origin-story-lead { position:sticky; top:7rem; align-self:start; }
.origin-story-lead h2 { max-width:11ch; }
.origin-story-lead p { max-width:29rem; color:var(--muted); font-size:1.08rem; margin-top:1.6rem; }
.story-chapters { border-top:2px solid var(--ink); }
.story-chapter { display:grid; grid-template-columns:3rem 1fr; gap:1rem; border-bottom:1px solid var(--rule); padding:2.1rem 0 2.5rem; }
.story-number { font-family:'Libre Franklin',Arial,sans-serif; font-size:.77rem; font-weight:700; color:var(--muted); padding-top:.7rem; }
.story-chapter h3 { font-size:clamp(1.7rem,2.5vw,2.4rem)!important; line-height:1.1; margin:0 0 .85rem; }
.story-chapter p { font-size:1rem; max-width:33rem; color:var(--muted); }
.story-chapter a { display:inline-block; margin-top:1rem; color:var(--accent); font-size:.85rem; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.work-index { border-top:2px solid var(--ink)!important; }
@media(max-width:850px) { .origin-story { grid-template-columns:1fr; gap:2rem; } .origin-story-lead { position:static; } .origin-story-lead h2 { max-width:none; } }
@media(max-width:620px) { .origin-story { padding-top:3rem!important; padding-bottom:3rem!important; } .story-chapter { grid-template-columns:2rem 1fr; gap:.55rem; } }
#projects .loudly-logo-wrap { background:#fff!important; padding:1rem; }
#projects .loudly-logo-wrap img { object-fit:contain; }