/* OpenArch website.
   The page reads like flipping through spaces: sections take the colors of
   OpenArch's spaces (green Work, apricot Home, sky Travel) with Arc's
   grain, and each shows OpenArch in that space. The arch from the app icon
   frames the opening and the closing. One family, Archivo, in two widths. */

:root {
  --ink: #1b1d1a;
  --paper: #f6f6f2;
  --green: #55b860;
  --apricot: #e5a33b;
  --sky: #3fa9f5;
  --accent: #1f7a3a;

  /* What a section draws with; colored sections set their own. */
  --surface: var(--paper);
  --raised: #ffffff;
  --text: var(--ink);
  --text-soft: #4a4c47;
  --line: rgba(27, 29, 26, 0.14);
  --button-text: var(--paper);
  --soft-panel: #ebebe5;

  --wide: 76rem;
  --column: 40rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #141513;
    --raised: #20221f;
    --text: #edede8;
    --text-soft: #b3b5ae;
    --line: rgba(237, 237, 232, 0.16);
    --button-text: #141513;
    --soft-panel: #1a1c19;
  }
}

/* Colored sections keep dark text in both schemes. */
.hero,
.space,
.closing {
  --text: var(--ink);
  --button-text: var(--paper);
  --line: rgba(27, 29, 26, 0.2);
}

.hero,
.work,
.closing {
  --surface: var(--green);
  --text-soft: color-mix(in oklab, var(--ink) 84%, var(--green));
}

.home {
  --surface: var(--apricot);
  --text-soft: color-mix(in oklab, var(--ink) 86%, var(--apricot));
}

.travel {
  --surface: var(--sky);
  --text-soft: color-mix(in oklab, var(--ink) 86%, var(--sky));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body > section,
.space,
.hero,
footer {
  background: var(--surface);
  color: var(--text);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a,
button,
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus {
  top: 1rem;
}

/* Arc's grain, without any gradient. */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Type */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 720;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.1rem, 8.4vw, 7.25rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 112;
}

h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  font-variation-settings: "wdth" 110;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.meta {
  color: var(--text-soft);
  font-size: 0.95rem;
}

code,
kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Keys look like keys. */
kbd {
  display: inline-block;
  min-width: 1.85em;
  margin: 0 0.12em;
  padding: 0.1em 0.45em 0.15em;
  border: 1px solid rgba(27, 29, 26, 0.2);
  border-bottom-width: 3px;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 0.82em;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  vertical-align: 0.08em;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1.5px solid var(--text);
  border-radius: 12px;
  background: var(--text);
  color: var(--button-text);
  font-weight: 650;
  font-variation-settings: "wdth" 106;
  text-decoration: none;
  transition: transform 0.15s ease-out, background-color 0.15s ease-out;
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-1px);
  }

  .button.ghost:hover {
    background: color-mix(in oklab, var(--text) 8%, transparent);
  }
}

.button:active {
  transform: translateY(1px);
}

.button.ghost {
  background: transparent;
  color: var(--text);
}

.button.small {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  font-size: 0.95rem;
}

/* Hero */

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.2rem;
  font-weight: 760;
  font-variation-settings: "wdth" 112;
  text-decoration: none;
}

.nav nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}

.nav nav a {
  font-weight: 550;
  text-decoration: none;
}

.nav nav a:hover {
  text-decoration: underline;
}

.intro {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.notice {
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 42%, transparent);
  font-weight: 600;
  font-size: 0.95rem;
}

.lead {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  font-size: clamp(1.12rem, 1.7vw, 1.3rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.25rem 0 1rem;
}

/* The window seen through an arch; the arch's paper runs on into the
   next section. */
.portal {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(56px, 10.5vw, 136px) clamp(10px, 1.3vw, 16px) 0;
  background: var(--paper);
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.portal img {
  border-radius: 12px 12px 0 0;
}

@keyframes rise {
  from {
    transform: translateY(4rem);
  }
}

.intro > * {
  animation: arrive 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.intro > :nth-child(2) { animation-delay: 0.06s; }
.intro > :nth-child(3) { animation-delay: 0.12s; }
.intro > :nth-child(4) { animation-delay: 0.18s; }
.intro > :nth-child(5) { animation-delay: 0.24s; }

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* Import */

.import {
  --surface: var(--paper);
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}

@media (prefers-color-scheme: dark) {
  .portal,
  .import {
    background: var(--surface);
  }

  .import {
    --surface: #141513;
  }
}

.split-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: var(--wide);
  margin: 0 auto;
  align-items: start;
}

.split-text p {
  color: var(--text-soft);
  font-size: 1.15rem;
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.15rem;
  font-weight: 560;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.checklist li:first-child {
  border-top: 1px solid var(--line);
}

.checklist li::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 14%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231f7a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 0.95rem no-repeat;
}

@media (prefers-color-scheme: dark) {
  .checklist li::before {
    background: rgba(143, 217, 154, 0.14)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%238fd99a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 0.95rem no-repeat;
  }
}

/* Spaces: text on one side, the window running off the page on the other. */

.space {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  padding-block: clamp(5rem, 10vw, 8.5rem);
  overflow: hidden;
}

.space.travel,
.space.work {
  padding-left: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
}

.space.home {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
}

.space-text {
  max-width: 30rem;
}

.space-text p:not(.space-name) {
  color: var(--text-soft);
  font-size: 1.15rem;
}

.space-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 38%, transparent);
  font-weight: 650;
  font-size: 0.95rem;
}

.space-name svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.window {
  margin: 0;
}

.window img {
  width: 118%;
  max-width: none;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent),
    0 0.25rem 0.75rem color-mix(in oklab, var(--ink) 10%, transparent),
    0 2.5rem 5rem -2rem color-mix(in oklab, var(--ink) 55%, var(--surface));
}

.window.left img {
  width: 100%;
}

/* Shortcuts */

.shortcuts,
.extensions,
.yours,
.faq {
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}

.column {
  max-width: var(--column);
  margin: 0 auto;
}

.column.wide {
  max-width: var(--wide);
}

.intro-text {
  max-width: var(--column);
  color: var(--text-soft);
  font-size: 1.15rem;
}

.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  column-gap: 3rem;
  margin: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--line);
}

.keys div {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.keys dt {
  flex: none;
  width: 6.75rem;
  white-space: nowrap;
}

.keys dd {
  margin: 0;
  font-weight: 520;
}

/* Details: the features, as a quiet two-column list */

.details {
  --surface: var(--soft-panel);
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  column-gap: 3.5rem;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--line);
}

.features div {
  padding: 1.35rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}

.features dt {
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
  font-weight: 680;
  font-variation-settings: "wdth" 106;
}

.features dd {
  margin: 0;
  color: var(--text-soft);
}

/* Extensions */

.extensions {
  --surface: var(--soft-panel);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  font-weight: 620;
}

.extensions p,
.agents p:not(.meta) {
  color: var(--text-soft);
}

/* For developers */

.agents {
  padding: clamp(5rem, 9vw, 8rem) var(--gutter);
}

.terminal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
  padding: 1.1rem 1.1rem 1.1rem 1.35rem;
  border-radius: 14px;
  background: var(--ink);
  color: #e8e9e4;
  box-shadow: inset 0 0 0 1px rgba(237, 237, 232, 0.08);
}

.terminal code {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.terminal code::before {
  content: "$ ";
  color: var(--green);
}

.terminal button {
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(232, 233, 228, 0.35);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Promises */

.yours {
  --surface: var(--soft-panel);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.facts div {
  padding-top: 1.25rem;
  border-top: 2px solid var(--text);
}

.facts p {
  color: var(--text-soft);
}

.facts code,
.faq code {
  font-size: 0.86em;
}

/* Questions */

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  font-weight: 650;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0 0 1.25rem;
  color: var(--text-soft);
}

/* Closing: the arch again, rising into the footer. */

.closing {
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) 0;
}

.closing-arch {
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter) clamp(3.5rem, 7vw, 5rem);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: var(--paper);
  text-align: center;
}

.closing-arch h2 {
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  margin-bottom: 2rem;
}

.closing-arch .meta {
  margin-top: 1.25rem;
}

footer {
  --surface: var(--paper);
  padding: 2rem var(--gutter) 3.5rem;
  font-size: 0.9rem;
}

footer p {
  max-width: 50rem;
  margin: 0 auto 0.5rem;
  color: var(--text-soft);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .closing-arch,
  footer {
    --surface: #141513;
    background: #141513;
    color: #edede8;
    --text: #edede8;
    --text-soft: #b3b5ae;
    --button-text: #141513;
  }
}

/* Small screens */

@media (max-width: 900px) {
  .nav nav {
    display: none;
  }

  .nav .button {
    margin-left: auto;
  }

  .split-text,
  .facts {
    grid-template-columns: 1fr;
  }

  .space,
  .space.home {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }

  .space.home .window {
    order: 2;
  }

  .window img,
  .window.left img {
    width: 100%;
    margin-left: 0;
    border-radius: 10px;
  }

  .keys dt {
    width: 6.25rem;
  }

  .terminal {
    flex-direction: column;
  }

  .terminal button,
  .button.small {
    min-height: 2.75rem;
  }
}

@media (pointer: fine) {
  html {
    overscroll-behavior-y: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .portal,
  .intro > * {
    animation: none;
  }

  .button {
    transition: none;
  }
}