:root {
  color-scheme: light;
  --paper: #f3f2ec;
  --surface: #fffefa;
  --ink: #162e27;
  --muted: #50625a;
  --line: #d5dad2;
  --green: #123d32;
  --lime: #d3f6af;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--paper); color: var(--ink) }
h1, h2, h3, p { margin: 0 }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.055em }
a { color: inherit }
button, input, select { font: inherit }
button, summary { cursor: pointer }
:focus-visible { outline: 3px solid #478367; outline-offset: 4px }
[hidden] { display: none !important }
.shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto }
.skip { position: absolute; left: 16px; top: 8px; transform: translateY(-150%); background: var(--surface); padding: 10px; z-index: 2 }
.skip:focus { transform: none }
.top, .footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 77px }
.top { border-bottom: 1px solid var(--line) }
.identity { display: flex; gap: 11px; align-items: center; font-weight: 770; letter-spacing: -.03em; text-decoration: none }
.top nav { display: flex; gap: 23px }
.top nav a, .footer a { font-size: .88rem; text-underline-offset: 5px }
.top nav a { text-decoration: none; font-weight: 670 }
.top nav a:hover { text-decoration: underline }
.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(32px, 6vw, 86px); padding-block: clamp(60px, 9vw, 115px) }
.kicker { font-size: .69rem; font-weight: 780; letter-spacing: .13em; color: var(--muted) }
.kicker > span:empty { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; background: #477b5b }
.hero h1 { font-size: clamp(3.05rem, 7vw, 6rem); margin: 16px 0 23px; line-height: .98 }
.hero em { font-family: Georgia, serif; font-weight: 400; color: #376c53 }
.intro { max-width: 46ch; font-size: 1.09rem; color: var(--muted); margin-bottom: 25px }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 10px 16px; min-height: 44px; border-radius: 7px; font-size: .87rem; font-weight: 750; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--surface); text-align: center }
.button:hover { background: #e9eee5 }
.primary { background: var(--green); border-color: var(--green); color: #fff }
.primary:hover { background: #235543 }
.hero-graphic { border-radius: 17px; overflow: hidden; background: var(--green); color: var(--lime) }
.hero-graphic svg { width: 100%; display: block }
.graphic-label { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid #ffffff26; font: 700 .65rem/1.4 ui-monospace, monospace; letter-spacing: .13em }
.work { border-top: 1px solid var(--line); padding-block: 52px 70px }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 9px 0 26px }
.section-head p { color: var(--muted) }
h2 { font-size: clamp(2.2rem, 5vw, 4.1rem) }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.05rem) }
.featured { display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: var(--surface); margin-bottom: 15px }
.feature-copy { padding: clamp(23px, 4vw, 42px) }
.feature-copy h3 { margin-top: 9px; font-size: 2.65rem }
.subtitle { font-weight: 700; margin: 8px 0 }
.feature-copy p:not(.kicker, .subtitle), .project p:not(.subtitle), .contact p:not(.kicker) { color: var(--muted) }
.feature-copy .button { margin-top: 20px }
.feature-art { display: grid; align-items: center; background: #dcebe4 }
.feature-art svg { width: 100%; display: block }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px }
.project { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: clamp(18px, 2.5vw, 28px) }
.project-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 19px }
.icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 8px; background: #e1eee5 }
.icon svg { width: 22px; fill: none; stroke: #234f40; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.project details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .9rem }
.project summary { font-weight: 700 }
.project details p { margin-top: 8px }
.tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 16px 0 0; list-style: none }
.tags li { padding: 2px 8px; background: #eef1ea; border-radius: 5px; font-size: .72rem; color: #3b5649 }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 43px }
.contact h2 { margin: 8px 0 12px }
.contact .button { overflow-wrap: anywhere }
.footer { min-height: 65px; color: var(--muted); font-size: .83rem }
.app { padding-block: 45px 62px }
.app h1 { font-size: clamp(2.6rem, 7vw, 4.7rem); margin: 8px 0 12px }
.app .intro { max-width: 67ch }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: clamp(15px, 3vw, 27px); margin-bottom: 18px }
.panel h2 { font-size: 1.55rem; margin-bottom: 15px }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.field { display: grid; gap: 4px; font-size: .86rem; font-weight: 680 }
.field input, .field select { min-width: 0; width: 100%; border: 1px solid #aab8ad; border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--ink) }
.form-actions, .controls, .row-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap }
.form-actions { margin-top: 13px }
.controls { justify-content: space-between; margin-bottom: 12px }
.controls h2 { margin: 0 0 7px }
.controls .field { min-width: min(190px, 100%) }
.status-text { color: var(--muted); font-size: .88rem }
.status-text:not(:empty) { margin-top: 9px }
.table-wrap { overflow-x: auto }
table { border-collapse: collapse; width: 100%; min-width: 610px; font-size: .9rem }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere }
tbody td:first-child, tbody td:nth-child(2) { max-width: 240px }
th { font-size: .75rem; color: var(--muted) }
td .button { padding: 5px 9px; min-height: 34px; font-size: .77rem }
.badge { border-radius: 999px; background: #e4eee5; padding: 3px 8px; white-space: nowrap; font-size: .75rem }
.empty { padding-block: 18px; color: var(--muted) }
button:disabled { opacity: .55; cursor: default }
@media (max-width: 850px) {
  .hero { gap: 26px }
  .project-grid { grid-template-columns: 1fr }
  .project-top { margin-bottom: 13px }
}
@media (max-width: 660px) {
  .shell { width: calc(100% - 34px) }
  .top { min-height: 65px }
  .top nav { gap: 13px }
  .hero, .featured { grid-template-columns: 1fr }
  .hero { padding-block: 48px }
  .hero-graphic { max-width: 480px }
  .section-head, .contact { display: grid; justify-content: stretch; align-items: start }
  .contact .button { justify-self: start }
  .work { padding-block: 38px 49px }
}
@media (max-width: 420px) { .form-grid { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }