@font-face { font-family: "Newsreader"; src: url(/serif.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --sky: #e9efe9; --sky-2: #dfe8e3; --land: #c9d6c6; --ink: #16231c; --ink-2: #46564d; --accent: #2f6b4f; --mill: #a9bcad;
  --rule: color-mix(in oklab, var(--ink) 16%, transparent);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --sky: #0d1512; --sky-2: #13201b; --land: #1b2b24; --ink: #e5ede8; --ink-2: #a5b4ab; --accent: #8cc4a6; --mill: #2a3d34; }
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body { margin: 0; min-height: 100dvh; background: linear-gradient(180deg, var(--sky), var(--sky-2)); color: var(--ink);
  font: 17px/1.55 var(--sans); position: relative; overflow-x: hidden; padding: 0 24px 200px; }
::selection { background: var(--accent); color: var(--sky); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.top { position: relative; z-index: 1; max-width: 62rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0; }
.mark { font: 600 1.35rem/1 var(--serif); letter-spacing: -0.01em; }
.btn { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--sky); text-decoration: none;
  font-weight: 600; font-size: 0.92rem; transition: background-color .2s cubic-bezier(.2,.8,.2,1); }
.btn:hover { background: var(--accent); }
main { position: relative; z-index: 1; max-width: 62rem; margin: 0 auto; padding-top: 7vh; }
h1 { font: 600 clamp(2.4rem, 6.4vw, 4.4rem)/1.04 var(--serif); letter-spacing: -0.025em; margin: 0 0 18px; max-width: 14ch; text-wrap: balance; }
.lede { margin: 0 0 52px; color: var(--ink-2); max-width: 46ch; font-size: 1.08rem; }
.apps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.app { border-bottom: 1px solid var(--rule); }
.app a, .app.soon { display: grid; grid-template-columns: 13rem 1fr 5.5rem 6.5rem; gap: 6px 24px; align-items: baseline; padding: 18px 4px; text-decoration: none; }
.app a { transition: background-color .25s cubic-bezier(.2,.8,.2,1); }
.app .name { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.app a:hover .name { transform: translateX(6px); }
.app a:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.name { font: 600 1.3rem/1.2 var(--serif); }
.line { color: var(--ink-2); }
.cc { font-size: 0.82rem; color: var(--ink-2); letter-spacing: 0.04em; }
.state { justify-self: end; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.soon .name, .soon .line, .soon .cc { color: color-mix(in oklab, var(--ink-2) 75%, transparent); }
.soon .state { color: var(--ink-2); font-weight: 500; }
.foot { margin: 40px 0 0; font-size: 0.85rem; color: var(--ink-2); }
.foot a { text-decoration-color: color-mix(in oklab, var(--ink-2) 45%, transparent); text-underline-offset: 3px; }
.scene { position: absolute; inset: auto 0 0 0; height: 100%; pointer-events: none; z-index: 0; }
.land { position: absolute; inset: auto 0 0 0; height: 90px; background: var(--land);
  clip-path: polygon(0 50%, 18% 38%, 37% 50%, 58% 32%, 79% 46%, 100% 36%, 100% 100%, 0 100%); }
.mill { position: absolute; right: clamp(-40px, 3vw, 6vw); bottom: 52px; width: clamp(180px, 22vw, 300px); height: auto; overflow: visible; color: var(--mill); }
.mill .body, .mill .cap, .mill .hub { fill: currentColor; }
.mill .gallery { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.mill .door, .mill .window { fill: var(--sky-2); }
.mill .stock { stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.mill .lattice { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.mill .sails { transform-box: view-box; transform-origin: 80px 70px; animation: turn 60s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mill .sails { animation: none; } .app a, .app .name, .btn { transition: none; } }
@media (max-width: 760px) {
  .app a, .app.soon { grid-template-columns: 1fr auto; }
  .line { grid-column: 1 / -1; grid-row: 2; }
  .cc { grid-column: 1; grid-row: 3; }
  .state { grid-column: 2; grid-row: 1; }
  .btn { padding: 8px 12px; font-size: 0.85rem; }
  body { padding-bottom: 300px; }
}