:root {
  color-scheme: light;
  --paper: #f3f4f0;
  --ink: #25382f;
  --green: #275948;
  --quiet: #56635b;
  --line: #ced6cc;
  --dusk: #596278;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
a { color: var(--green); text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.page { width: min(100% - 3rem, 64rem); margin-inline: auto; }
.skip { position: absolute; inset: .5rem auto auto .5rem; padding: .6rem 1rem; background: white; transform: translateY(-180%); z-index: 1; }
.skip:focus { transform: none; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: 2rem; }
.company { font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.company span { font-size: .8em; font-weight: 400; color: var(--quiet); }
nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
nav a { font-size: .95rem; }
h1, h2, h3 { line-height: 1.15; margin: 0; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -.045em; font-weight: 650; max-width: 17ch; }
h2 { font-size: 1.8rem; letter-spacing: -.025em; }
h3 { font-size: 1.3rem; font-weight: 650; }
p { margin: 0; overflow-wrap: anywhere; }
.intro { padding-block: 4rem 5rem; }
.intro p { margin-top: 1.7rem; max-width: 42rem; color: var(--quiet); font-size: 1.18rem; }
.section-heading { margin-bottom: 1.5rem; }
.section-heading p { margin-top: .6rem; color: var(--quiet); }
.project { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding-block: 1.7rem; border-top: 1px solid var(--line); }
.project:last-child { border-bottom: 1px solid var(--line); }
.app-icon { width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; display: grid; place-items: center; }
.app-icon svg { width: 3.5rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.day { background: #e1e8d4; color: #466530; }
.night { background: #e3e5ee; color: var(--dusk); }
.summit { background: #dce8e1; color: var(--green); }
.project-copy p { margin-top: .45rem; max-width: 36rem; color: var(--quiet); }
.status { color: var(--quiet); font-size: .85rem; white-space: nowrap; }
.approach { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-block: 4.5rem; }
.approach p { color: var(--quiet); max-width: 38rem; font-size: 1.1rem; }
.contact { padding: 2.2rem; background: #e5ebe1; border-radius: 1.5rem; }
.contact h2 { font-size: 2rem; }
.contact p { margin-top: .8rem; }
.contact a { font-size: 1.3rem; font-weight: 600; overflow-wrap: anywhere; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .7rem 2rem; padding-block: 2rem 3rem; font-size: .85rem; color: var(--quiet); }
.legal { max-width: 46rem; padding-block: 2rem 4rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }
.legal h2 { margin-block: 2rem .75rem; font-size: 1.5rem; }
.legal p { margin-block: 1rem; color: var(--quiet); }
@media (max-width: 42rem) {
  h1 { font-size: 2rem; }
  .intro { padding-block: 2.5rem 3.5rem; }
  .project { grid-template-columns: 3.5rem minmax(0, 1fr); gap: .8rem 1rem; align-items: start; }
  .app-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; grid-row: span 2; }
  .app-icon svg { width: 2.7rem; }
  .status { grid-column: 2; white-space: normal; }
  .approach { grid-template-columns: 1fr; gap: 1rem; padding-block: 3rem; }
  .contact { padding: 1.5rem; }
}