/* Teonator homepage. Direction and colour decisions live in DESIGN.md. */

:root {
  color-scheme: light;
  --bg: #ECEAE6;
  --panel: #E2DACE;
  --text: #2A1E14;
  --muted: #5E4D3D;
  --link: #9A4413;
  --link-hover: #7A3510;
  --button-bg: #F59A23;
  --button-bg-hover: #F7B04F;
  --button-fg: #2A1E14;
  --focus: #9A4413;
  --rule: rgba(42, 30, 20, 0.16);
  --accent: #F59A23;
  --accent-text: #C8640F;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 1rem;
  --section-space: clamp(3rem, 2rem + 3vw, 4.5rem);

  /* Five text sizes: display (h1), heading (h2), lead, body, small. */
  --step-lead: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --step-small: 0.9375rem;
  --radius: 6px;
}

/* Light is the default for every visitor; dark only applies after the toggle is used (owner decision). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1712;
  --panel: #2A211A;
  --text: #F2EBDD;
  --muted: #B9AA96;
  --link: #F7A23B;
  --link-hover: #F9B866;
  --button-bg: #F7A23B;
  --button-bg-hover: #F9B866;
  --button-fg: #1E1712;
  --focus: #F7A23B;
  --rule: rgba(242, 235, 221, 0.16);
  --accent: #F7A23B;
  --accent-text: #F7A23B;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
}

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

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 0.6rem + 4.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.8vw, 2.5rem);
  font-weight: 600;
}

h3 {
  font-size: var(--step-lead);
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

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

.container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 40rem) {
  :root {
    --gutter: 2rem;
  }
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.skip-link:hover {
  color: var(--button-fg);
}

/* main only receives focus from the skip link (tabindex="-1"); it is not an interactive control. */
main:focus {
  outline: none;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand toggle"
    "nav nav";
  align-items: center;
  gap: 0.25rem 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.wordmark {
  grid-area: brand;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  justify-self: start;
  min-height: 44px;
  padding: 0.25rem 0;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
}

.wordmark:hover {
  color: var(--text);
}

.wordmark-name {
  font-size: var(--step-lead);
  font-weight: 700;
}


.site-nav {
  grid-area: nav;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-small);
}

@media (min-width: 30rem) {
  .site-nav ul {
    justify-content: flex-start;
    gap: 0.25rem 1.25rem;
    font-size: inherit;
  }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.theme-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Plain text control like the nav links: underline on hover, no box. */
.theme-toggle-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.theme-toggle:hover .theme-toggle-track {
  border-color: var(--link);
}

/* The knob carries the icon: a sun when off (light mode), a moon when on (dark mode). */
.theme-toggle-knob {
  position: absolute;
  top: 1.5px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  transition: transform 150ms ease;
}

.theme-toggle-knob svg {
  width: 0.75rem;
  height: 0.75rem;
}

.icon-moon,
.theme-toggle[aria-pressed="true"] .icon-sun {
  display: none;
}

.theme-toggle[aria-pressed="true"] .icon-moon {
  display: block;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-knob {
  transform: translateX(1.1875rem);
  background: var(--bg);
  color: var(--accent);
}

/* On (dark mode) lights up amber like an indicator; off stays a quiet outline so the main button keeps the attention. */
.theme-toggle[aria-pressed="true"] .theme-toggle-track {
  border-color: var(--accent);
  background: var(--accent);
}

@media (min-width: 56rem) {
  .header-inner {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand nav toggle";
    gap: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Shared pieces */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
}

.button:hover {
  background: var(--button-bg-hover);
  color: var(--button-fg);
}

/* Pressed like a calculator key. */
.button:active {
  transform: translateY(2px);
}

.section {
  padding: var(--section-space) 0;
  border-top: 1px solid var(--rule);
}

/* "Next" link closing each section: leads the reader down the page in order. */
.next {
  margin: 3rem 0 0;
  font-size: var(--step-lead);
}

.next a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  font-weight: 600;
}

.index-mark {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.section-lead {
  margin-top: 0.75rem;
  color: var(--muted);
}

.section-after {
  margin: 2.5rem 0 0;
  max-width: 40rem;
  text-wrap: balance;
}

.section-after a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Introduction */

.intro {
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 var(--section-space);
  /* The portrait spills past its column; trim it at the screen edge so the page never scrolls sideways. */
  overflow-x: clip;
}

.intro-grid {
  display: grid;
  gap: 2.5rem;
}

.intro-text {
  max-width: 38rem;
}

.accent-bar {
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 1.5rem;
  background: var(--accent);
}

.lead {
  font-size: var(--step-lead);
}

.intro-action {
  margin: 2rem 0;
}

.action-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: var(--step-small);
}

.credentials {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  color: var(--muted);
  font-size: var(--step-small);
}

.portrait {
  margin: 0 auto;
  max-width: 22rem;
}

/* The portrait is a cut-out with a transparent background, so it sits on the page without a frame. */

/* Dark mode swaps to a version with light handwriting. The hidden copy is lazy, so it only downloads when shown. */
.portrait-dark {
  display: none;
}

:root[data-theme="dark"] .portrait-light {
  display: none;
}

:root[data-theme="dark"] .portrait-dark {
  display: block;
}

@media (min-width: 40rem) {
  .credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
  }
}

@media (min-width: 56rem) {
  .intro-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-areas:
      "title portrait"
      "text portrait";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 2.5rem 2rem;
  }

  .intro-title {
    grid-area: title;
  }

  .intro-text {
    grid-area: text;
  }

  .portrait {
    grid-area: portrait;
  }

  .intro-title,
  .intro-text {
    position: relative;
    z-index: 1;
  }

  /* Let the cut-out spill past its column so the handwritten notes sit beside the headline. */
  .portrait {
    max-width: none;
    margin: -2rem -3rem 0 -5rem;
    align-self: start;
  }
}

/* Scenario cards: six equal-weight situations, so a uniform grid lets visitors scan for theirs. */

.cards {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
}

.card p {
  margin: 0;
}

.card-title {
  margin: 0 0 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card {
    padding: 2rem;
  }
}

/* Expandable rows: FAQ */

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

.row {
  border-bottom: 1px solid var(--rule);
}

.row summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

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

.row summary::after {
  content: "+" / "";
  margin-left: auto;
  padding-left: 1rem;
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1;
}

.row[open] summary::after {
  content: "\2212" / "";
}

.row summary:hover .row-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.row-title {
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.3;
}

.row-body {
  max-width: 40rem;
  padding: 0 0 1.25rem;
}

/* Free call: three steps read left to right on wider screens. */

.steps {
  display: grid;
  gap: 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.steps h3 {
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.steps p {
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.5;
}

@media (min-width: 56rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Working together */

.options {
  margin: 2rem 0 0;
  border-top: 1px solid var(--rule);
}

.option {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.option dt {
  font-weight: 600;
  font-size: var(--step-lead);
  line-height: 1.3;
}

.option dd {
  margin: 0;
  max-width: 40rem;
}

@media (min-width: 48rem) {
  .option {
    grid-template-columns: 18rem 1fr;
    gap: 2rem;
  }
}

/* For engineering teams */

.section-teams h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.nowrap {
  white-space: nowrap;
}

.teams-lead {
  margin-bottom: 1.75rem;
  font-size: var(--step-lead);
}

/* About and FAQ split layout */

.split {
  display: grid;
  gap: 1.5rem;
}

.prose {
  max-width: 40rem;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 4rem;
  }

  /* Wider heading column so the teams heading stays within two lines. */
  .split-teams {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

/* About: two columns of prose on wide screens. */
.prose-columns {
  margin-top: 2rem;
}

@media (min-width: 56rem) {
  .prose-columns {
    columns: 2;
    column-gap: 4rem;
  }

  .prose-columns p {
    break-inside: avoid;
  }
}

/* Contact */

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-inner .section-index {
  justify-content: center;
}

/* The page ends on its largest statement since the contact section is where every "Next" link leads. */
.contact-inner h2 {
  max-width: 60rem;
  font-size: clamp(1.75rem, 0.6rem + 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.contact-lead {
  margin: 1.5rem 0 2.5rem;
  max-width: 36rem;
  text-wrap: balance;
  font-size: var(--step-lead);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.button-secondary {
  border: 2px solid var(--link);
  background: transparent;
  color: var(--link);
}

.button-secondary:hover {
  background: transparent;
  color: var(--link-hover);
  border-color: var(--link-hover);
}

.direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.4em;
  margin: 1rem 0 0;
}

.direct a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Footer */

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--step-small);
}

.footer-inner p {
  margin: 0;
}

@media (min-width: 40rem) {
  .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* Motion: transform and opacity only, so nothing shifts layout. The classes come from script only when the
   visitor allows motion, and all text stays in the HTML for search engines and screen readers. */

.next .index-mark {
  transition: transform 150ms ease;
}

.next a:hover .index-mark {
  transform: translateX(4px);
}

/* Headline types itself. Hidden only while motion is allowed, and shown after 2s even if ui.js never runs. */
.motion-ok .intro h1 {
  opacity: 0;
  animation: show-headline 0s 2s forwards;
}

.motion-ok .intro h1.is-typing {
  opacity: 1;
  animation: none;
}

@keyframes show-headline {
  to {
    opacity: 1;
  }
}

.type-char:not(.is-typed) {
  opacity: 0;
}

/* Headline full stop in orange (3.31:1 light, 8.59:1 dark, large text). After typing it blinks like a cursor
   until the visitor scrolls, clicks, taps or presses a key (ui.js adds dot-still), then stays on. */
.headline-dot {
  color: var(--accent-text);
}

.motion-ok .intro h1.is-typed-all .headline-dot {
  animation: dot-blink 1s steps(1) infinite;
}

.motion-ok .intro h1.dot-still .headline-dot {
  animation: none;
}

@keyframes dot-blink {
  50% {
    opacity: 0;
  }
}

/* The orange bar draws in from the left once the headline is typed. */
.motion-ok .intro h1.is-typing + .accent-bar {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms ease-out;
}

.motion-ok .intro h1.is-typed-all + .accent-bar {
  transform: none;
}

/* Section parts rise into place once as they scroll into view. */
.motion .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}

.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Theme switch: the whole page crossfades (View Transitions, started in ui.js). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}