:root {
  --bg: #fff;
  --fg: #0a0a0a;
  --muted: #8f8f8f;
  --line: #ebebeb;
  --surface: #fafafa;
  --hero: #a8e078;
  --hero-dot: #79b34b;
  --dark: 0;
  --lift: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0a0a0a; --fg: #ededed; --muted: #7d7d7d; --line: #1f1f1f; --surface: #111; --hero: #16210e; --hero-dot: #3f5f28; --dark: 1; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0a0a0a; --fg: #ededed; --muted: #7d7d7d; --line: #1f1f1f; --surface: #111; --hero: #16210e; --hero-dot: #3f5f28; --dark: 1; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0 auto;
  max-width: 1080px;
  padding-inline: 24px;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 "Geist", system-ui, sans-serif;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; font: inherit; }
i { display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 4px; }

/* The header lives inside the hero panel, and stays above the open menu */
.top { z-index: 3; align-self: center; width: min(1032px, 100%); display: flex; justify-content: space-between; align-items: center; padding-block: 20px; }
.mark { font-weight: 500; letter-spacing: -.05em; font-size: 1.125rem; }
.tools { display: flex; align-items: center; gap: 12px; }

/* Burger: two lines that cross when the menu is open */
.burger { position: relative; width: 40px; height: 40px; margin-right: -11px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.burger i { position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--fg); transition: translate .5s var(--lift), rotate .5s var(--lift); }
.burger i:first-child { top: 16px; }
.burger i:last-child { top: 23px; }
.menu-open .burger i:first-child { translate: 0 3.5px; rotate: 45deg; }
.menu-open .burger i:last-child { translate: 0 -3.5px; rotate: -45deg; }

/* Menu: a sheet that unrolls from the top; the links rise in one after another */
.menu {
  position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  padding: 96px max(24px, calc(50vw - 516px)); background: var(--bg);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--lift), visibility 0s .7s;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
.menu a {
  width: fit-content; font-size: clamp(3rem, 10vw, 7rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.08;
  translate: 0 48px; opacity: 0; transition: translate .7s var(--lift), opacity .4s, color .2s;
}
.menu-open .menu a { translate: 0; opacity: 1; transition-delay: calc(var(--i) * 70ms + 120ms), calc(var(--i) * 70ms + 120ms), 0s; }
@media (hover: hover) { .menu:hover a:not(:hover) { color: var(--muted); } }
html.menu-open { overflow: hidden; }

/* Theme switch: sun and moon side by side (Hugeicons, free stroke set); a thumb slides under the active one */
.theme {
  position: relative; display: flex; padding: 2px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 999px; background: none;
}
.theme::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 12%, transparent); translate: calc(26px * var(--dark)); transition: translate .5s var(--lift);
}
.theme svg {
  position: relative; width: 26px; height: 26px; padding: 5px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  --dim: color-mix(in srgb, var(--fg) 42%, transparent);
  color: color-mix(in srgb, var(--dim) calc(var(--dark) * 100%), var(--fg)); transition: color .3s;
}
.theme svg + svg { color: color-mix(in srgb, var(--fg) calc(var(--dark) * 100%), var(--dim)); }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: reveal .7s var(--lift); }
@keyframes reveal { from { clip-path: circle(0 at var(--x) var(--y)); } to { clip-path: circle(var(--r) at var(--x) var(--y)); } }

/* Hero: one large rounded panel, inset from the window's edges, everything centred */
.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 8px calc(50% - 50vw + 8px) 120px; padding: 0 24px; border-radius: 24px; background: var(--hero);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(var(--hero-dot) 1px, transparent 1.5px) 0 0 / 14px 14px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000, transparent);
}
.hero > * { position: relative; }
h1 {
  max-width: 15em; margin-top: 56px;
  font-size: clamp(2.25rem, 5.4vw, 4.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -.05em;
  text-wrap: balance;
}
.lead { max-width: 30em; margin-top: 24px; font-size: 1.125rem; color: color-mix(in srgb, var(--fg) 68%, var(--hero)); text-wrap: balance; }
#figure {
  --hairline-edge: color-mix(in srgb, var(--fg) 55%, var(--hero));
  --hairline-mid: color-mix(in srgb, var(--fg) 34%, var(--hero));
  --hairline-lo: color-mix(in srgb, var(--fg) 17%, var(--hero));
}
#figure { --hairline-plate: var(--hero); width: min(640px, 100%); margin-block: -96px -84px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; padding: 11px 20px 11px 16px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-weight: 500; font-size: .9375rem;
  transition: opacity .15s;
}
/* the figure's box reaches up over the button; the button stays on top of it */
.hero .btn { z-index: 1; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { opacity: .8; }

/* Sections open the way the hero does: a statement, then its continuation in grey */
.sec { padding-block: 0 140px; }
h2 { max-width: 22em; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
h2 span { color: var(--muted); }

/* Services: four cells on crossing hairlines, each with what it includes */
.services { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.services > li { padding: 40px 40px 44px 0; border-bottom: 1px solid var(--line); }
.services > li:nth-child(even) { padding-inline: 40px 0; border-left: 1px solid var(--line); }
.services h3 { font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.services p { margin-top: 10px; max-width: 24em; color: var(--muted); }
/* what each includes: plain words in a row, parted by hairlines (a row's first hairline is clipped away) */
.tags { margin: 20px 0 0 -13px; display: flex; flex-wrap: wrap; row-gap: 6px; clip-path: inset(0 0 0 13px); font-size: .875rem; }
.tags li { margin-right: 12px; padding-left: 12px; border-left: 1px solid var(--line); }

/* Work: framed panels, each with a hairline figure of the thing */
.work { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.work li { min-width: 0; padding: 8px 8px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.work .wide { grid-column: span 2; }
.work h3 { margin: 24px 20px 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.04em; }
.work p { margin: 6px 20px 0; max-width: 34em; color: var(--muted); }
.art {
  height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.wide .art { height: 340px; }
.art [data-figure] { height: 100%; aspect-ratio: 5 / 4; --hairline-plate: var(--bg); }

/* Contact: no block, the address itself is the button */
.contact { position: relative; padding-block: 120px 96px; }
.contact::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; translate: -50%; border-top: 1px solid var(--line); }
.mail {
  display: block; width: fit-content; margin-top: 48px;
  font-size: clamp(2rem, 8.4vw, 6.5rem); font-weight: 500; letter-spacing: -.06em; line-height: 1;
  transition: color .2s;
}
.mail:hover { color: var(--muted); }

.foot { padding-block: 32px 40px; color: var(--muted); font-size: .875rem; }

@media (max-width: 720px) {
  .hero { margin-inline: -16px; margin-bottom: 72px; padding: 0 16px; border-radius: 20px; }
  h1 { margin-top: 48px; }
  #figure { margin-block: -48px -44px; }
  .sec { padding-bottom: 88px; }
  .services { grid-template-columns: 1fr; }
  .services > li, .services > li:nth-child(even) { padding: 28px 0 32px; border-left: 0; }
  .work { grid-template-columns: 1fr; }
  .work .wide { grid-column: auto; }
  .art, .wide .art { height: 220px; }
  .contact { padding-block: 72px 56px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }