/* Soules Studio, shared styles for every page. Design: mockup B ("soft"). */

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Tokens. Grays are darker than the mockup so small text meets WCAG AA. */
:root {
  color-scheme: light dark;
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #2a2927;
  --ink-2: #5f5d58;
  --ink-3: #716e68;
  --line: rgba(42, 41, 39, 0.1);
  --btn-bg: #2a2927;
  --btn-bg-hover: #000000;
  --btn-ink: #ffffff;
  --focus: #2f6fdb;
  --shadow: rgba(30, 40, 60, 0.25);
  --glow-opacity: 0.55;
  --glow-opacity-hover: 0.85;
  --sky-a: #c9dcef;
  --sky-b: #f4d9c2;
  --sky-c: #d9e8d0;
  --cloud: #ffffff;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513;
    --card: #1f1e1b;
    --ink: #eceae5;
    --ink-2: #aeaba4;
    --ink-3: #8e8b84;
    --line: rgba(236, 234, 229, 0.1);
    --btn-bg: #eceae5;
    --btn-bg-hover: #ffffff;
    --btn-ink: #161513;
    --focus: #8ab4ff;
    --shadow: rgba(0, 0, 0, 0.6);
    --glow-opacity: 0.3;
    --glow-opacity-hover: 0.5;
    /* Dusk: deep blue in the middle, plum and pine on the sides. */
    --sky-a: #34466e;
    --sky-b: #583550;
    --sky-c: #264d46;
    --cloud: rgba(255, 255, 255, 0.07);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.skip-link:focus { top: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--btn-bg); color: var(--btn-ink); padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: transform 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-1px); background: var(--btn-bg-hover); }
.btn:focus-visible { border-radius: 999px; }
.btn-lg { padding: 12px 22px; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 32px; width: 100%; max-width: 1240px; margin: 0 auto; font-size: 14px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.logo svg { width: 22px; height: 22px; }
.site-nav { display: flex; gap: 28px; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }

/* Hero */
.hero { text-align: center; padding-top: 96px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 8vw, 92px); line-height: 1; letter-spacing: -0.02em; margin: 0 auto; max-width: 11ch; }
.hero h1 em { font-style: italic; }
.hero p { margin: 24px auto 0; max-width: 40ch; font-size: 18px; color: var(--ink-2); }
.hero .btn { margin-top: 32px; }

/* Sky with the floating icons */
.sky { position: relative; height: 460px; margin-top: 56px; overflow: hidden; }
.sky::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(45% 60% at 50% 72%, var(--sky-a) 0%, transparent 72%),
    radial-gradient(28% 45% at 28% 82%, var(--sky-b) 0%, transparent 72%),
    radial-gradient(28% 45% at 74% 80%, var(--sky-c) 0%, transparent 72%); }
.cloud { position: absolute; background: radial-gradient(closest-side, var(--cloud) 30%, transparent); }
.cloud-1 { width: 300px; height: 90px; left: 4%; top: 58%; }
.cloud-2 { width: 220px; height: 70px; left: 18%; top: 72%; }
.cloud-3 { width: 340px; height: 100px; right: 2%; top: 62%; }
.cloud-4 { width: 200px; height: 60px; right: 20%; top: 20%; opacity: 0.6; }
.sky-icons { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 22px; align-items: center; }
.sky-icons img { width: 104px; height: 104px; border-radius: 23%; box-shadow: 0 24px 48px -16px rgba(30, 40, 60, 0.28), 0 2px 6px rgba(30, 40, 60, 0.08); animation: float 6s ease-in-out infinite; }
.sky-icons img:nth-child(1) { transform: rotate(-8deg) translateY(18px); animation-delay: -1s; }
.sky-icons img:nth-child(2) { transform: rotate(-3deg); animation-delay: -2s; }
.sky-icons img:nth-child(3) { width: 128px; height: 128px; animation-delay: -3s; }
.sky-icons img:nth-child(4) { transform: rotate(3deg); animation-delay: -4s; }
.sky-icons img:nth-child(5) { transform: rotate(8deg) translateY(18px); animation-delay: -5s; }
@keyframes float { 50% { translate: 0 -10px; } }

/* Section heads */
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.015em; }
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 17px; }

/* Apps grid */
.apps { padding-top: 120px; padding-bottom: 140px; scroll-margin-top: 24px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

/* App card. The name link stretches over the whole card (::after), while the
   chips and the website link sit above it as separate links. */
.card { grid-column: span 2; position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; isolation: isolate; transition: transform 0.3s, box-shadow 0.3s; }
.card-wide { grid-column: span 3; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px var(--shadow); }
.card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; bottom: -110px; z-index: -1; border-radius: 50%; background: var(--tint); filter: blur(40px); opacity: var(--glow-opacity); transition: opacity 0.3s; }
.card:hover::before { opacity: var(--glow-opacity-hover); }
.card-icon { width: 64px; height: 64px; border-radius: 23%; box-shadow: 0 0 0 1px var(--line); }
.card-arrow { position: absolute; top: 28px; right: 28px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.card-arrow svg { width: 14px; height: 14px; }
.card:hover .card-arrow { background: var(--btn-bg); color: var(--btn-ink); }
.card-title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; margin-top: auto; padding-top: 40px; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 28px; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.card-desc { color: var(--ink-2); margin-top: 6px; }
.card-note { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { position: relative; z-index: 2; display: inline-block; font-size: 12px; line-height: 1.5; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s; }
span.chip { position: static; }
a.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip:focus-visible { border-radius: 999px; }
.card-site { position: relative; z-index: 2; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.card-site:hover { text-decoration-color: currentColor; }

/* Brand tints for the card glow */
.app-sigma { --tint: #f59e5b; }
.app-ayyam { --tint: #3fb39a; }
.app-menubar { --tint: #f2c94c; }
.app-jublu { --tint: #6fbf73; }
.app-arcescape { --tint: #2bb3a3; }

/* Founder note */
.founder { padding-bottom: 140px; }
.founder-card { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 40px; }
.founder-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.founder-photo svg { width: 44px; height: 44px; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; }
.founder p { color: var(--ink-2); margin-top: 14px; }
.founder-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; font-size: 14px; font-weight: 500; }
.founder-links a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.founder-links a:hover { text-decoration-color: currentColor; }

/* Contact */
.contact { text-align: center; padding: 120px 0 140px; background: var(--card); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.contact h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; max-width: 14ch; margin: 0 auto; }
.contact .btn { margin-top: 36px; }

/* Footer */
.site-footer { background: var(--card); border-top: 1px solid var(--line); }
.site-footer .wrap { max-width: 1240px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; padding-bottom: 36px; font-size: 13px; color: var(--ink-3); }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ink); }

/* Plain text pages: privacy and 404 */
.page { max-width: 680px; padding-top: 72px; padding-bottom: 120px; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 68px); line-height: 1.04; letter-spacing: -0.02em; }
.page h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin-top: 40px; }
.page p { color: var(--ink-2); margin-top: 14px; }
.page p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.page .lede { font-size: 18px; margin-top: 20px; }
.page .btn { margin-top: 32px; }
.page-center { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.page-center h1 { max-width: 12ch; }
.page-center .lede { max-width: 40ch; }

/* Phones */
@media (max-width: 820px) {
  .site-header { padding: 16px; }
  .site-nav { display: none; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 56px; }
  .sky { height: 300px; margin-top: 40px; }
  .sky-icons { gap: 10px; }
  .sky-icons img { width: 56px; height: 56px; }
  .sky-icons img:nth-child(3) { width: 72px; height: 72px; }
  .apps { padding-top: 72px; padding-bottom: 96px; }
  .grid { grid-template-columns: 1fr; }
  .card, .card-wide { grid-column: auto; min-height: 260px; padding: 24px; }
  .card-arrow { top: 24px; right: 24px; }
  .founder { padding-bottom: 96px; }
  .founder-card { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .contact { padding: 88px 0 100px; }
  .site-footer .wrap { padding-top: 20px; padding-bottom: 32px; }
  .page { padding-top: 40px; padding-bottom: 88px; }
}

/* No floating or lifting for people who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky-icons img { animation: none; }
  .btn, .card, .card::before, .card-arrow { transition: none; }
  .btn:hover, .card:hover { transform: none; }
}