/*
  SIVENTURA — stylesheet

  Design direction: instruments, not templates. SIVENTURA's work is about
  taking a precise reading in a complex situation — a model's output, an
  R&D claim, a cloud architecture, a proof, a programme — and the identity
  borrows its vocabulary from the historical instruments built for exactly
  that job: the astrolabe, the azimuth ring, a ship's keel and bulkheads,
  a tiller held by hand rather than an autopilot. Two worlds, one system:
  a warm chart-table paper by day, a lamplit instrument panel by night.

  Typefaces are self-hosted (site/assets/fonts): Libre Caslon Display for
  headlines (the weight and cut of old survey and shipping documents),
  IBM Plex Sans for everything read at length, IBM Plex Mono reserved for
  the one place a monospaced register is actually structural — the
  location line in the footer — not used decoratively elsewhere.

  Themes: "system" (default), "light", "dark" — see the token blocks below.
  Both are complete, independently tuned palettes rather than one inverted
  into the other.
*/

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Libre Caslon Display";
  src: url("../assets/fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Variable.woff2") format("woff2-variations"),
    url("../assets/fonts/IBMPlexSans-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens: shared ---------- */
:root {
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code",
    Menlo, Consolas, monospace;

  --wrap: 74rem;
  --wrap-narrow: 42rem;
  --radius: 3px;
  --radius-sm: 2px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Tokens: light palette (default, and explicit "light") ---------- */
:root {
  color-scheme: light;

  --bg: #eef0ea;
  --surface: #ffffff;
  --surface-sunken: #e4e7dc;
  --text: #12202a;
  --text-muted: #48545b;
  --accent: #93591b;
  --accent-strong: #7a4712;
  --accent-2: #285f52;
  --border: #d3d6c9;
  --border-strong: #b7bcac;
  --on-accent: #fdfcf8;
  --focus-ring: #7a4712;
  --shadow: 0 1px 2px rgba(18, 32, 42, 0.06);
}

/* ---------- Tokens: dark palette (OS default when no explicit choice, and explicit "dark") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --bg: #0b1720;
    --surface: #12212c;
    --surface-sunken: #0e1a23;
    --text: #eef1ec;
    --text-muted: #a9b7bc;
    --accent: #e2a13f;
    --accent-strong: #f0b45c;
    --accent-2: #7fc4b1;
    --border: #23394a;
    --border-strong: #33526a;
    --on-accent: #0b1720;
    --focus-ring: #e2a13f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1720;
  --surface: #12212c;
  --surface-sunken: #0e1a23;
  --text: #eef1ec;
  --text-muted: #a9b7bc;
  --accent: #e2a13f;
  --accent-strong: #f0b45c;
  --accent-2: #7fc4b1;
  --border: #23394a;
  --border-strong: #33526a;
  --on-accent: #0b1720;
  --focus-ring: #e2a13f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef0ea;
  --surface: #ffffff;
  --surface-sunken: #e4e7dc;
  --text: #12202a;
  --text-muted: #48545b;
  --accent: #93591b;
  --accent-strong: #7a4712;
  --accent-2: #285f52;
  --border: #d3d6c9;
  --border-strong: #b7bcac;
  --on-accent: #fdfcf8;
  --focus-ring: #7a4712;
  --shadow: 0 1px 2px rgba(18, 32, 42, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent-strong);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 400;
}

h1 {
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
}

h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

p {
  margin: 0 0 1.15em;
  max-width: 40rem;
}

ul {
  margin: 0 0 1.15em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.4em;
}

button {
  font-family: inherit;
}

/* ---------- Utility ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: 0.65em 1em;
  border-radius: var(--radius);
  z-index: 100;
  transform: translateY(-140%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0.75rem);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.mono {
  font-family: var(--font-mono);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-mark {
  width: auto;
  height: 1.9rem;
  color: var(--text);
  /* The mark is referenced via <use> from a shared <symbol>; fill does not
     reliably cascade into a use-instance tree via descendant class
     selectors across browsers, so it is set once here, to inherit as
     currentColor for every shape inside. */
  fill: currentColor;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar {
  display: block;
  width: 1.3rem;
  height: 2px;
  margin-inline: auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  padding: 0.3em 0.1em;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--accent);
  color: var(--text);
}

/* ---------- Theme switch ---------- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
}

.theme-switch button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45em 0.7em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.theme-switch button:hover {
  color: var(--text);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.hero-inner {
  padding-block: clamp(3.5rem, 3rem + 4vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.hero-dial {
  position: relative;
  justify-self: center;
  width: min(26rem, 90%);
  color: var(--accent);
  opacity: 0.9;
}

.hero-dial .ring {
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  opacity: 0.55;
}

.hero-dial .ring--outer {
  opacity: 0.75;
}

.hero-dial .tick {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.75;
}

.hero-dial .bearing {
  stroke: var(--accent-2);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hero-dial .pivot {
  fill: var(--accent-2);
}

.hero-byline {
  font-size: 0.98rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  max-width: 32rem;
}

.hero h1 {
  max-width: 20ch;
  margin-bottom: 0.55em;
}

.hero-sub {
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.7rem;
}

/* Hero load-in: one deliberate, orchestrated sequence, not a per-section
   default. Runs once on page load. */
.hero-byline,
.hero h1,
.hero-sub,
.hero-actions,
.hero-dial {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-in 0.7s var(--ease) forwards;
}

.hero-byline {
  animation-delay: 0.05s;
}

.hero h1 {
  animation-delay: 0.15s;
}

.hero-sub {
  animation-delay: 0.28s;
}

.hero-actions {
  animation-delay: 0.4s;
}

.hero-dial {
  animation-delay: 0.2s;
  transform: translateY(0) scale(0.94);
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(3rem, 2.4rem + 2.4vw, 5.5rem);
  scroll-margin-top: 4.5rem;
}

.section-head {
  max-width: 40rem;
  margin-bottom: 2.75rem;
}

.section-kicker {
  display: block;
  font-size: 0.95rem;
  color: var(--accent-2);
  font-weight: 600;
  margin-bottom: 0.6em;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.08rem;
}

.section--sunken {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Capabilities ---------- */
.capability-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.capability-item {
  border-bottom: 1px solid var(--border);
  padding-block: 2.5rem;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.75rem;
}

.capability-glyph {
  width: 3rem;
  height: 3rem;
  color: var(--accent);
  margin-top: 0.2rem;
}

.capability-glyph circle,
.capability-glyph line,
.capability-glyph path,
.capability-glyph rect {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease);
}

.capability-glyph .fill-dot {
  fill: currentColor;
  stroke: none;
}

.capability-item.is-revealed .capability-glyph circle,
.capability-item.is-revealed .capability-glyph line,
.capability-item.is-revealed .capability-glyph path,
.capability-item.is-revealed .capability-glyph rect {
  stroke-dashoffset: 0;
}

.capability-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.15em;
}

.capability-name {
  margin: 0;
}

.capability-kind {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2);
}

.capability-tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: 0.6em;
  max-width: 36rem;
}

.capability-body {
  color: var(--text-muted);
  max-width: 40rem;
  margin-bottom: 0;
}

/* ---------- Approach ---------- */
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
}

.principle-list li {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--accent);
}

.principle-list h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4em;
}

.principle-list p {
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ---------- About ---------- */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: start;
}

.about-layout .prose p {
  max-width: none;
}

.fact-list {
  margin: 0;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fact-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.fact-list div:last-child {
  border-bottom: none;
}

.fact-list dt {
  color: var(--text-muted);
}

.fact-list dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 42rem);
  align-items: start;
}

.field {
  margin-bottom: 1.35rem;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  font-size: 0.95rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.7em 0.8em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
  margin-bottom: 1.35rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.form-status[hidden] {
  display: none;
}

.form-status.is-success {
  background: var(--surface-sunken);
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface));
  color: var(--accent-2);
  border-color: var(--border-strong);
  border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
}

.form-status.is-error {
  background: var(--surface-sunken);
  background: color-mix(in srgb, #b5432a 16%, var(--surface));
  color: #b5432a;
  border-color: var(--border-strong);
  border-color: color-mix(in srgb, #b5432a 40%, transparent);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
}

.footer-mark {
  height: 1.5rem;
  width: auto;
  color: var(--text-muted);
  fill: currentColor;
}

.footer-meta {
  text-align: right;
}

.legal {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin: 0;
  color: var(--text-muted);
  max-width: none;
}

/* ---------- 404 ---------- */
.notfound {
  padding-block: clamp(3.5rem, 2.8rem + 4vw, 7rem);
}

.notfound .code {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 1rem;
  margin-bottom: 0.5em;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-dial {
    order: -1;
    width: min(16rem, 60%);
    margin-inline: auto;
  }

  .principle-list {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .nav-toggle {
    display: flex;
  }

  .header-controls {
    gap: 0.75rem;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
  }

  .site-nav li {
    border-bottom: 1px solid var(--border);
  }

  .site-nav li:last-child {
    border-bottom: none;
  }

  .site-nav a {
    display: block;
    padding: 0.8em 0.1em;
  }

  .capability-item {
    grid-template-columns: 1fr;
  }

  .capability-glyph {
    width: 2.5rem;
    height: 2.5rem;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-meta {
    text-align: left;
  }
}

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

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero-byline,
  .hero h1,
  .hero-sub,
  .hero-actions,
  .hero-dial {
    opacity: 1;
    transform: none;
  }

  .capability-glyph circle,
  .capability-glyph line,
  .capability-glyph path,
  .capability-glyph rect {
    stroke-dashoffset: 0;
  }
}