@charset "UTF-8";

:root {
  color-scheme: light;
  --bg: #f7f7f2;
  --text: #202820;
  --muted: #596256;
  --line: #d3d8cd;
  --accent: #2f593d;
  --accent-ink: #ffffff;
  --panel: #e9eee4;
  --chart-line: #aebba4;
  --focus: #80551c;
  --max-width: 1232px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #19201b;
  --text: #f0f2e9;
  --muted: #b8c3b3;
  --line: #424d40;
  --accent: #bfd3aa;
  --accent-ink: #19201b;
  --panel: #242e25;
  --chart-line: #66775d;
  --focus: #f2cf85;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button, a, summary, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
button, select, summary { cursor: pointer; }
button { color: inherit; }
a, button, summary { transition: color 160ms ease, background-color 160ms ease; }
a:hover { color: var(--accent); }
button:active, a:active { opacity: .8; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 2px; }
::selection { color: var(--accent-ink); background: var(--accent); }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
em { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 400; color: var(--accent); }
.wrap { width: min(calc(100% - 112px), var(--max-width)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; inset: 12px auto auto 12px; padding: 12px 20px; background: var(--text); color: var(--bg); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 108px; display: flex; align-items: center; gap: 36px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 600; letter-spacing: -.8px; text-decoration: none; margin-right: auto; white-space: nowrap; }
.wordmark span { color: var(--accent); }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { min-height: 44px; padding-block: 10px; font-size: 14px; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.theme-button { min-height: 44px; padding: 8px 14px; font-size: 13px; background: transparent; border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.theme-button:hover { background: var(--panel); }
.hero { padding-top: 48px; }
.hero-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
h1 { margin-top: 46px; font-size: clamp(48px, 6.9vw, 98px); line-height: 1.08; letter-spacing: -.065em; }
h1 em { font-size: 1.14em; letter-spacing: -.055em; }
.hero-bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; margin-top: 52px; margin-bottom: 64px; }
.hero-intro { max-width: 460px; }
.intro-name { margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.hero-intro > p + p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.primary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; margin-top: 25px; padding: 11px 20px; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 3px; font-size: 14px; font-weight: 500; text-decoration: none; }
.primary-link:hover { color: var(--accent-ink); opacity: .9; }
.primary-link span[aria-hidden] { font-size: 20px; line-height: 1; }
.disciplines { justify-self: end; align-self: end; width: 260px; border-top: 1px solid var(--line); }
.disciplines p { padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 18px; letter-spacing: -.4px; }
.hero-foot { display: flex; justify-content: space-between; gap: 32px; padding-block: 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.section { padding-block: 112px; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 64px; }
.section-index { padding-top: 8px; color: var(--muted); font-size: 13px; }
h2 { font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -.045em; line-height: 1.16; text-wrap: balance; }
.section-description { margin-top: 22px; max-width: 480px; color: var(--muted); font-size: 16px; }
.project { display: grid; grid-template-columns: 40px minmax(0, .95fr) minmax(0, 1.45fr); gap: 32px; padding-block: 44px; border-top: 1px solid var(--line); }
.project:last-child { border-bottom: 1px solid var(--line); }
.project-number { color: var(--muted); font-family: Georgia, serif; font-size: 18px; padding-top: 2px; }
.project-category { color: var(--muted); font-size: 13px; }
.project h3 { font-size: clamp(30px, 3.1vw, 42px); letter-spacing: -.045em; line-height: 1.3; margin-block: 6px 14px; }
.project-main > p:not(.project-category):not(.stack) { max-width: 530px; }
.stack { margin-top: 18px; color: var(--muted); font-size: 12px; }
.project-shot { margin: 0; min-width: 0; align-self: start; padding-top: 3px; }
.screenshot-link { display: block; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; }
.screenshot-link img { display: block; width: 100%; height: auto; }
.screenshot-link:hover { border-color: var(--accent); }
.project-shot figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; color: var(--muted); font-size: 12px; }
.project-shot figcaption span:last-child { font-size: 11px; }
summary { list-style: none; display: flex; gap: 20px; align-items: center; justify-content: space-between; min-height: 48px; font-size: 14px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--accent); }
.expand { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.expand::before, .expand::after { content: ""; position: absolute; background: currentColor; }
.expand::before { width: 12px; height: 1px; top: 6px; left: 1px; }
.expand::after { height: 12px; width: 1px; left: 6px; top: 1px; }
details[open] > summary .expand::after { display: none; }
.case-study { margin-top: 22px; max-width: 530px; }
.case-study > summary { justify-content: flex-start; width: fit-content; gap: 25px; }
.case-content { padding-top: 20px; }
.case-content > div { margin-bottom: 24px; }
.case-content h4 { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.case-content p { color: var(--muted); font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; text-decoration: underline; }
.analysis-section { background: var(--panel); }
.analysis-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 12px; }
.analysis-toolbar h3 { font-size: 22px; font-weight: 500; letter-spacing: -.5px; }
.analysis-toolbar p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.period-control label { display: block; font-size: 12px; margin-bottom: 6px; color: var(--muted); }
.period-control select { min-height: 44px; min-width: 190px; padding: 8px 36px 8px 12px; color: var(--text); border: 1px solid var(--muted); border-radius: 3px; background: var(--panel); }
.data-status { margin-block: 24px; }
.data-status:empty { display: none; }
.outline-button { min-height: 44px; border: 1px solid var(--text); padding: 8px 16px; background: transparent; border-radius: 3px; }
.conversion-summary { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--chart-line); }
.conversion-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.conversion-heading h4 { font-size: 15px; font-weight: 500; }
.conversion-heading > span { font-size: 12px; color: var(--muted); }
.conversion-result { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; margin-top: 28px; }
.conversion-count strong { display: block; font-size: clamp(58px, 7vw, 92px); line-height: 1.1; font-weight: 500; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.conversion-count p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.conversion-detail { margin: 0; }
.conversion-detail > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--chart-line); }
.conversion-detail > div:first-child { padding-top: 0; }
.conversion-detail dt { color: var(--muted); font-size: 13px; }
.conversion-detail dd { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.conversion-note { margin-top: 24px; max-width: 850px; font-size: 12px; color: var(--muted); }
.method-content code { overflow-wrap: anywhere; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 40px; padding-block: 28px 36px; border-top: 1px solid var(--chart-line); border-bottom: 1px solid var(--chart-line); }
.metrics p { font-size: 13px; }
.metrics strong { display: block; margin-block: 10px 6px; font-size: clamp(27px, 3.8vw, 49px); line-height: 1.3; font-weight: 500; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.metrics small { font-size: 12px; color: var(--muted); }
.chart-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 38px; gap: 20px; }
.chart-heading h4 { font-weight: 500; font-size: 14px; }
.chart-heading span { font-size: 12px; color: var(--muted); }
.spend-chart { margin-top: 18px; }
.spend-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.spend-chart text { fill: var(--muted); font-family: inherit; font-size: 13px; }
.spend-chart .chart-grid { stroke: var(--chart-line); stroke-width: 1; stroke-dasharray: 3 6; }
.spend-chart .chart-bar { fill: var(--accent); }
.chart-note { color: var(--muted); font-size: 12px; margin-top: 12px; }
.analysis-observation { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-top: 36px; margin-bottom: 32px; padding-top: 28px; border-top: 1px solid var(--chart-line); }
.analysis-observation > span { font-size: 13px; color: var(--muted); padding-top: 3px; }
.analysis-observation p { font-size: 16px; max-width: 650px; }
.analysis-observation strong { font-weight: 600; }
.data-details { border-top: 1px solid var(--chart-line); }
.data-details:last-child { border-bottom: 1px solid var(--chart-line); }
.data-details > summary { padding-block: 17px; }
.method-content { padding: 8px 0 28px; max-width: 760px; font-size: 14px; color: var(--muted); }
.method-content ul { padding-left: 20px; }
.method-content li { margin-block: 8px; }
.method-content strong { color: var(--text); }
.daily-table { max-height: 430px; overflow-y: auto; padding-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding-bottom: 18px; color: var(--muted); }
th, td { text-align: right; padding: 12px 16px; border-bottom: 1px solid var(--chart-line); }
th { font-weight: 600; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.text-button { padding: 12px 0; min-height: 48px; color: var(--text); background: none; border: 0; text-decoration: underline; text-underline-offset: 5px; margin-block: 8px; font-size: 14px; }
.noscript-note { margin-top: 30px; }
.about { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.about-content { max-width: 660px; }
.about h2 { margin-bottom: 32px; }
.about-lead { font-size: 21px; line-height: 1.6; letter-spacing: -.4px; margin-bottom: 18px; }
.about-content > p:not(.about-lead) { color: var(--muted); }
.capabilities { margin-top: 38px; margin-bottom: 0; }
.capabilities > div { display: grid; grid-template-columns: 165px minmax(0, 1fr); padding-block: 18px; border-top: 1px solid var(--line); gap: 20px; }
.capabilities dt { font-size: 13px; font-weight: 500; }
.capabilities dd { margin: 0; font-size: 14px; color: var(--muted); }
.contact { border-top: 1px solid var(--line); padding-block: 80px 96px; }
.contact-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.contact h2 { margin-bottom: 22px; }
.contact-inner > div > p { color: var(--muted); }
.contact-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 26px; }
.contact-links .primary-link { margin-top: 0; }
.contact-number { font-size: 12px; margin-top: 18px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 1500px) { .hero { padding-top: 60px; } h1 { margin-top: 56px; } .hero-bottom { margin-top: 64px; } }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 72px); }
  .site-header { gap: 22px; }
  .site-header nav { gap: 20px; }
  .hero-bottom { gap: 40px; }
  .section-heading, .about, .contact-inner, .analysis-observation { grid-template-columns: 1fr 2.1fr; gap: 28px; }
  .project { grid-template-columns: 32px minmax(0, 1fr); gap: 24px; }
  .project-shot { grid-column: 2; width: 100%; }
  .metrics { gap: 28px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; gap: 12px 20px; padding-block: 20px 10px; min-height: 0; }
  .wordmark { font-size: 21px; }
  .site-header nav { width: 100%; order: 3; justify-content: space-between; gap: 16px; }
  .site-header nav a { min-height: 44px; font-size: 13px; }
  .theme-button { margin-left: auto; }
  .hero { padding-top: 26px; }
  .hero-label { font-size: 11px; }
  h1 { font-size: clamp(39px, 7.7vw, 58px); margin-top: 36px; letter-spacing: -.06em; line-height: 1.17; }
  h1 em { font-size: 1.13em; }
  .hero-bottom { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; margin-bottom: 36px; }
  .hero-intro { max-width: 460px; }
  .intro-name { font-size: 15px; }
  .hero-intro > p + p { font-size: 16px; }
  .disciplines { justify-self: start; width: 100%; display: flex; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .disciplines p { font-size: 13px; padding: 0; border: 0; letter-spacing: 0; }
  .hero-foot { font-size: 11px; padding-top: 0; border: 0; }
  .hero-foot span:last-child { display: none; }
  .section { padding-block: 64px; }
  .section-heading, .about, .contact-inner, .analysis-observation { grid-template-columns: 1fr; gap: 22px; }
  .section-heading { margin-bottom: 36px; }
  .section-index { font-size: 12px; padding-top: 0; }
  h2 { font-size: clamp(31px, 6vw, 42px); line-height: 1.2; }
  .section-description { font-size: 15px; margin-top: 18px; }
  .project { grid-template-columns: 25px minmax(0, 1fr); gap: 16px; padding-block: 30px; }
  .project-number { font-size: 16px; }
  .project h3 { font-size: 32px; }
  .project-shot { grid-column: 1 / -1; margin-top: 8px; }
  .project-category { font-size: 12px; }
  .project-main > p:not(.stack):not(.project-category) { font-size: 15px; }
  .stack { font-size: 11px; line-height: 1.8; }
  .case-study { margin-top: 16px; }
  .analysis-toolbar { align-items: flex-start; flex-direction: column; gap: 20px; }
  .analysis-toolbar h3 { font-size: 21px; }
  .period-control { width: 100%; }
  .period-control select { width: 100%; }
  .metrics { grid-template-columns: 1fr; gap: 0; margin-top: 28px; padding-block: 0; }
  .conversion-summary { margin-top: 28px; padding-top: 22px; }
  .conversion-heading { align-items: flex-start; flex-wrap: wrap; gap: 4px 16px; }
  .conversion-result { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
  .conversion-count strong { font-size: 64px; }
  .conversion-detail > div { gap: 12px; }
  .conversion-detail dt { font-size: 12px; }
  .conversion-detail dd { font-size: 18px; }
  .metrics > div { padding-block: 22px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; }
  .metrics > div + div { border-top: 1px solid var(--chart-line); }
  .metrics p { font-size: 13px; }
  .metrics strong { margin: 0; font-size: 30px; grid-row: span 2; }
  .metrics small { font-size: 11px; }
  .chart-heading { margin-top: 28px; }
  .chart-heading span { font-size: 10px; }
  .spend-chart svg { min-height: 190px; }
  .analysis-observation { gap: 10px; padding-top: 20px; margin-top: 24px; }
  .analysis-observation p { font-size: 15px; }
  th, td { font-size: 12px; padding: 10px 4px; }
  .about-lead { font-size: 19px; }
  .about h2 { margin-bottom: 24px; }
  .capabilities > div { grid-template-columns: 1fr; gap: 6px; }
  .capabilities dd { font-size: 14px; }
  .contact-links { align-items: flex-start; flex-direction: column; gap: 14px; }
  .site-footer { align-items: flex-start; flex-wrap: wrap; gap: 0 24px; padding-block: 24px; }
  .site-footer span:first-child { width: 100%; }
  .site-footer span:nth-child(2) { font-size: 10px; }
  .site-footer a { margin-top: 6px; }
}

@media (max-width: 360px) { .wrap { width: calc(100% - 32px); } h1 { font-size: 35px; } .metrics strong { font-size: 25px; } .site-header nav { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }