/* Warm paper, ink and vermilion. A restrained editorial identity. */
:root {
  --bg: #f3f0e9;
  --panel: #ebe7df;
  --text: #202e3b;
  --muted: #5e6568;
  --line: #cecac0;
  --accent: #ad472f;
}
body { font-family: 'Segoe UI', Arial, sans-serif; }
::selection { background: #d9b499; color: #202e3b; }
header { background: #f3f0e9f5; border-bottom-color: var(--line); }
.nav { min-height: 92px; }
.brand { font-size: 16px; font-weight: 750; letter-spacing: 1.3px; white-space: nowrap; }
.brand span { padding-inline: 5px; font-weight: 400; }
#nav-links { font-size: 12px; gap: 32px; }
#nav-links > a:not(.nav-contact) { border-bottom: 1px solid transparent; padding-block: 8px; }
#nav-links > a:hover { border-bottom-color: var(--accent); }
.nav-contact { border: 0; border-radius: 0; padding: 10px 0 10px 26px; border-left: 1px solid var(--line); }
.hero { padding-block: 90px 86px; gap: 85px; grid-template-columns: 1.4fr 1fr; }
.hero-copy { min-width: 0; }
.eyebrow, .feature-top, .feature-bottom, .project-meta, .date, .art-label, .art-foot {
  font-family: 'Courier New', monospace;
}
.eyebrow { font-size: 10px; letter-spacing: 1.1px; }
.dot { border-radius: 0; width: 6px; height: 6px; }
h1 { font-size: clamp(46px,5.1vw,73px); letter-spacing: -3.4px; line-height: 1.08; font-weight: 450; }
h1 em { color: var(--text); }
em { color: var(--text); }
.intro { font-size: 16px; line-height: 1.85; max-width: 470px; }
.button { border-radius: 0; font-weight: 600; padding: 14px 19px; }
.primary { background: var(--text); color: #fffaf2; }
.primary:hover { background: #374c5e; color: white; }
.secondary { border-color: var(--line); }
.hero-note { font-size: 10px; }
.feature { background: #e9e4d9; border: 0; border-top: 3px solid var(--text); border-bottom: 1px solid #b6b1a5; border-radius: 0; padding: 25px 28px; box-shadow: none; }
.feature-top { color: #60675f; font-size: 9px; letter-spacing: .3px; }
.feature-number { font-family: Georgia, serif; font-weight: 400; font-size: 132px; letter-spacing: -9px; line-height: 1.3; color: var(--accent); }
.feature-number .down { color: #9b9d90; font-family: Arial, sans-serif; }
.feature h2 { font-size: 19px; letter-spacing: -.5px; }
.feature p { color: #5e6560; font-size: 12px; }
.bar-label { color: #555f62; }
.bar { height: 10px; border-radius: 0; }
.before { background: repeating-linear-gradient(120deg,#999e98 0px,#999e98 1px,transparent 1px,transparent 4px); }
.after { background: var(--accent); }
.feature-bottom { color: #566166; border-color: #c6c2b6; font-size: 9px; }
.feature>a { font-size: 12px; font-weight: 600; }
.tool-strip { background: #ebe7de; }
.tool-strip strong { color: #4c585d; font-size: 15px; font-weight: 600; }
.tool-strip span { color: #656c6c; }
.section { padding-block: 90px; }
h2 { font-size: 46px; letter-spacing: -1.8px; }
.section-heading { margin-bottom: 35px; }
.section-heading>p { font-size: 14px; }
.filters { border-bottom: 1px solid var(--line); gap: 24px; margin-bottom: 0; }
.filters button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 13px 0; font-size: 12px; margin-bottom: -1px; }
.filters button.active { background: none; color: var(--accent); border-bottom-color: var(--accent); }
.filters button:hover { color: var(--accent); }
.project-grid { grid-template-columns: 1fr; gap: 0; }
.project { display: grid; grid-template-columns: .86fr 1.14fr; gap: 48px; padding-block: 36px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.project-art { border: 0; min-height: 260px; height: 100%; padding: 26px; }
.art-data { background: #dfe4db; }
.art-flow { background: #dfe5e7; }
.art-report { background: #e4dfd4; }
.art-finance { background: #eadfd6; }
.art-label, .art-foot { color: #53605b; letter-spacing: .7px; font-size: 8px; }
.pipeline small, .pipeline b { color: #5b695e; }
.pipeline .clean { color: #314d3c; border-color: #8a9c89; border-radius: 0; }
.flow b { color: #314652; border-color: #95a6ac; border-radius: 0; }
.flow>strong { font-family: Georgia, serif; font-size: 43px; }
.report-visual i { background: #8c9990; border-radius: 0; }
.report-visual i:nth-of-type(4) { background: var(--accent); }
.report-visual>div:first-child>span, .report-side span { color: #546259; }
.report-side hr { border-color: #b9bfb5; }
.finance-flow span { color: #855e49; }
.finance-flow>div { border-color: #c5b3a3; }
.project-body { padding: 3px 0; }
.project-meta { font-size: 9px; letter-spacing: .6px; }
.project-meta>span:last-child { color: var(--accent); }
.project-body h3 { font-size: 29px; font-weight: 450; letter-spacing: -.9px; }
.project-body>p { font-size: 14px; min-height: 0; }
.tags { gap: 0; margin-block: 20px; }
.tags>span { border: 0; border-right: 1px solid #b6bbb5; border-radius: 0; padding: 0 10px; color: #5d6766; font-size: 10px; }
.tags>span:first-child { padding-left: 0; }
.tags>span:last-child { border: 0; }
summary { border: 0; font-size: 12px; padding-top: 5px; justify-content: start; gap: 18px; }
.detail { border-left: 2px solid #bcb3a5; padding-left: 18px; }
.detail h4 { font-size: 13px; }
.detail p { font-size: 13px; }
.more-work { border: 0; margin-top: 4px; padding-bottom: 0; }
.more-work h3 { font-size: 19px; }
.more-work p { font-size: 12px; }
.more-work>div:last-child { font-size: 12px; }
.experience { background: #263846; color: #f1eee7; border: 0; --muted: #c1c9cc; --accent: #e6af87; }
.experience em { color: #e6af87; }
.experience .muted { font-size: 14px; }
.timeline article { border-left-color: #71818a; }
.company { color: #e4e5df; font-size: 13px; }
.timeline ul { font-size: 13px; }
.date { font-size: 10px; }
.about-copy { font-size: 14px; }
.education { border-color: #b7987d; }
.education strong { font-size: 13px; }
.education span { font-size: 12px; }
.skill-list h3 { font-size: 20px; }
.skill-list p { font-size: 13px; }
.contact { background: none; border-top: 2px solid var(--text); border-radius: 0; padding: 50px 0 0; color: var(--text); }
.contact .eyebrow { color: var(--accent); }
.contact h2 { font-size: 49px; }
.contact em { color: var(--text); }
.contact>p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.email { border-color: #bcb6aa; max-width: 720px; padding-block: 5px 18px; font-size: 34px; }
.email span { color: var(--accent); }
.contact a:hover { color: var(--accent); }
.contact-links { font-size: 12px; }
footer { border-top: 1px solid var(--line); padding-top: 28px; }
footer .brand { font-size: 12px; letter-spacing: 1px; }
footer p, footer>a:last-child { font-size: 11px; }
.skip { background: var(--text); color: white; }
@media(max-width:1050px) {
  .hero { gap: 40px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .5px; }
  .feature-number { font-size: 105px; }
  .project { gap: 30px; grid-template-columns: 1fr 1fr; }
  .project-art { padding: 20px; }
  .project-body h3 { font-size: 26px; }
}
@media(max-width:760px) {
  .nav { min-height: 74px; }
  .brand { font-size: 12px; letter-spacing: .7px; }
  .brand span { padding-inline: 1px; }
  .menu-toggle { font-size: 12px; border-radius: 0; padding: 8px 10px; }
  body.js-ready #nav-links { top: 74px; background: var(--bg); }
  .nav-contact { border-left: 0; }
  .hero { grid-template-columns: 1fr; padding-block: 46px; gap: 40px; }
  h1 { font-size: clamp(41px,10.8vw,66px); letter-spacing: -2px; }
  .intro { font-size: 15px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .15px; }
  .feature { max-width: none; box-shadow: none; padding: 24px; }
  .feature-number { font-size: 112px; }
  .feature-number .down { padding-top: 22px; }
  .hero-note { line-height: 1.9; }
  .tool-strip strong { font-size: 13px; }
  .section { padding-block: 55px; }
  h2 { font-size: 37px; }
  .filters { gap: 16px; }
  .filters button { font-size: 10px; padding-inline: 0; }
  .filters span { margin-left: 5px; }
  .project { grid-template-columns: 1fr; gap: 24px; padding-block: 28px; }
  .project-art { height: 215px; min-height: 0; padding: 22px; }
  .project-body { padding: 0; }
  .project-body h3 { font-size: 26px; }
  .project-meta { font-size: 8px; }
  .more-work { padding-top: 28px; }
  .contact { padding: 34px 0 0; }
  .contact h2 { font-size: 36px; }
  .email { font-size: clamp(17px,5.5vw,29px); }
  .contact-links { gap: 22px; }
  footer .brand { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { .button:hover { transform: none; } }