/* Sqript Software: site styles */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Neutral greys with a hair of warmth towards the brand orange.
     The orange marks "done" and focus, and is never used as decoration. */
  --bg: #f5f4f4;
  --surface: #eae9e9;
  --ink: #171616;
  --ink-2: #484646;
  --ink-3: #666363;
  --rule: #d6d4d4;
  --accent: #e2482a;
  --accent-text: #b5361a;

  /* One family. Its optical-size axis handles text and display sizes. */
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Radii: 8px for controls, 16px for panels. Nothing else. */
  --radius-sm: 8px;
  --radius: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 10;
  --z-skip: 20;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121111;
    --surface: #1c1b1b;
    --ink: #f0eeee;
    --ink-2: #bdbaba;
    --ink-3: #959292;
    --rule: #2e2c2c;
    --accent: #ff6b45;
    --accent-text: #ff8c6b;
  }
}

/* ---------- Base ---------- */

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

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

/* Column layout keeps the footer at the bottom of short pages */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

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

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

p,
figure,
dl,
dd {
  margin: 0;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

.nowrap {
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

/* min-width: 0 lets the logo scale down on the narrowest phones instead of
   pushing the nav off screen */
.brand {
  display: inline-flex;
  min-width: 0;
}

/* Inline SVG rather than an image, so the logo takes the ink colour in
   both themes. The footer copy reuses the header's path with <use>. */
.logo {
  width: auto;
  height: 40px;
  fill: var(--ink);
}

.site-nav ul {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.site-nav a:hover {
  color: var(--ink);
}

@media (max-width: 420px) {
  .site-header .logo { height: 34px; }
  .site-nav a { font-size: 0.9rem; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75em 1.35em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  font: 600 1rem/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.08s;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* Bricolage is already tight at display sizes; more negative tracking
   than this makes the letters collide. */
h1 {
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.04;
}

/* The orange full stop on page headlines */
.stop {
  color: var(--accent);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 104px);
}

.hero-row {
  display: grid;
  gap: 48px;
}
@media (min-width: 1080px) {
  .hero-row {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }
}

/* The headline sizes to its column, so it sets on two lines beside the
   timeline, and the floor drops on the narrowest phones so it never needs
   four. Browsers without container units fall back to the h1 size. */
.hero-copy {
  container-type: inline-size;
}
.hero h1 {
  font-size: clamp(min(2.75rem, 12cqi), 10.4cqi, 4.5rem);
}

.lede {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero-copy .btn {
  margin-top: 32px;
}

/* ---------- Chase timeline (hero visual) ---------- */

.chase-panel {
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  border-radius: var(--radius);
}

.chase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.chase-client {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.chase-job {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.chase-steps {
  --day: 3.6rem;
  --node: 11px;
  --gap: 14px;
  --pad: 7px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.chase-steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--day) var(--node) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: var(--pad);
}

.chase-day {
  grid-column: 1;
  grid-row: 1;
  color: var(--ink-3);
}
.chase-event {
  grid-column: 3;
  grid-row: 1;
  color: var(--ink-2);
  text-wrap: pretty;
}
.chase-event strong {
  margin-right: 0.45ch;
  font-weight: 650;
  color: var(--ink);
}

/* Node: a ring when FileChaser acts, filled when the client does,
   orange when the job is done. */
.chase-steps li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  margin-top: calc((1.5em - var(--node)) / 2);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}
.chase-steps .is-client::before {
  background: var(--ink);
}
.chase-steps .is-wait::before {
  border-color: var(--ink-3);
}
.chase-steps .is-done::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* Track joining each node to the next */
.chase-steps li::after {
  content: "";
  position: absolute;
  top: calc(var(--pad) + 0.75em);
  left: calc(var(--day) + var(--gap) + var(--node) / 2 - 0.75px);
  width: 1.5px;
  height: 100%;
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}
.chase-steps li:last-child::after {
  display: none;
}

.chase-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.chase-total strong {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.chase figcaption {
  margin-top: 14px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* The chase plays out in order on load */
@media (prefers-reduced-motion: no-preference) {
  .chase-steps li,
  .chase-total {
    animation: step-in 0.6s var(--ease-out) both;
  }
  .chase-steps li:nth-child(1) { animation-delay: 0.3s; }
  .chase-steps li:nth-child(2) { animation-delay: 0.75s; }
  .chase-steps li:nth-child(3) { animation-delay: 1.2s; }
  .chase-steps li:nth-child(4) { animation-delay: 1.65s; }
  .chase-steps li:nth-child(5) { animation-delay: 2.1s; }
  .chase-steps li:nth-child(6) { animation-delay: 2.55s; }
  .chase-total { animation-delay: 3.1s; }

  .chase-steps .is-done::before {
    animation: done-in 0.5s var(--ease-out) 2.7s both;
  }
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes done-in {
  from { transform: scale(0.3); }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(80px, 11vw, 144px) clamp(88px, 12vw, 160px);
  border-top: 1px solid var(--rule);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 46rem;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head p {
  max-width: 38em;
  font-size: 1.125rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Products ---------- */

.product {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 5vw, 64px);
  background: var(--surface);
  border-radius: var(--radius);
}

.product-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.product-brand svg {
  width: 40px;
  height: 40px;
}
.product-name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-url {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.product h3 {
  max-width: 24ch;
  margin-top: 24px;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.375rem);
  line-height: 1.04;
}

.product-detail {
  display: grid;
  gap: 32px clamp(40px, 6vw, 80px);
}
@media (min-width: 880px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.product-copy > p {
  max-width: 34em;
  color: var(--ink-2);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}
.product-note {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.features {
  margin: 0;
  padding: 0;
  list-style: none;
}
.features li {
  padding-block: 14px;
  font-size: 1rem;
  line-height: 1.5;
}
.features li:first-child {
  padding-top: 0;
}
.features li + li {
  border-top: 1px solid var(--rule);
}

/* Escalation ladder: echoes the rising bars of FileChaser's icon */
.ladder {
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--rule);
}

.ladder figcaption {
  display: grid;
  gap: 4px;
}
.ladder-title {
  font-weight: 650;
}
.ladder-note {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.ladder ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 16px);
  height: clamp(190px, 22vw, 260px);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  view-timeline-name: --ladder;
}
.ladder li {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  min-width: 0;
}
.ladder .bar {
  align-self: end;
  border-radius: var(--radius-sm) var(--radius-sm) 2px 2px;
  background: var(--ink);
  transform-origin: bottom;
}
.ladder li:nth-child(1) .bar { height: 22%; opacity: 0.28; }
.ladder li:nth-child(2) .bar { height: 40%; opacity: 0.42; }
.ladder li:nth-child(3) .bar { height: 58%; opacity: 0.58; }
.ladder li:nth-child(4) .bar { height: 76%; opacity: 0.76; }
.ladder li:nth-child(5) .bar { height: 96%; opacity: 1; }

.ladder .label {
  min-height: 2.5em;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  line-height: 1.25;
  color: var(--ink-2);
}

/* Bars climb one after another as the ladder scrolls into view. Every range
   starts while the ladder is still below the fold, and there is no backwards
   fill, so outside the range (print, full-page captures) bars sit at full height. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ladder .bar {
      animation: bar-rise cubic-bezier(0.5, 0, 0.75, 0) forwards;
      animation-timeline: --ladder;
      animation-range-start: entry 0%;
    }
    .ladder li:nth-child(1) .bar { animation-range-end: cover 14%; }
    .ladder li:nth-child(2) .bar { animation-range-end: cover 18%; }
    .ladder li:nth-child(3) .bar { animation-range-end: cover 22%; }
    .ladder li:nth-child(4) .bar { animation-range-end: cover 26%; }
    .ladder li:nth-child(5) .bar { animation-range-end: cover 30%; }
  }
}

@keyframes bar-rise {
  from { transform: scaleY(0.06); }
}

.next {
  display: grid;
  gap: 20px;
  align-items: end;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .next {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
  }
}
.next h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.1;
}
.next p {
  max-width: 40em;
  margin-top: 10px;
  color: var(--ink-2);
}
.next .btn {
  justify-self: start;
}

/* ---------- About ---------- */

.about {
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 8vw, 128px);
  }
}

.about-intro p {
  max-width: 34em;
  margin-top: 20px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.principles {
  margin: 0;
  padding: 0;
  list-style: none;
}
.principles li {
  padding-block: 22px 30px;
  border-top: 1px solid var(--rule);
}
.principles h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.principles p {
  max-width: 34em;
  margin-top: 8px;
  color: var(--ink-2);
}

/* ---------- Contact ---------- */

/* The address is about 14.4em wide, so 6vw keeps it on one line from 360px
   up. The <wbr> after the @ breaks it cleanly on anything narrower. */
.contact-email {
  display: inline-block;
  font-weight: 650;
  font-size: clamp(1.25rem, 6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease-out);
}
.contact-email:hover {
  color: var(--accent-text);
}

.contact-details {
  display: grid;
  gap: 28px 48px;
  max-width: 52rem;
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .contact-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.contact-details dt {
  font-weight: 650;
}
.contact-details dd {
  margin-top: 6px;
  color: var(--ink-2);
}
.contact-details dd a {
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.contact-details address {
  font-style: normal;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 40px 48px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-top a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer-top a:hover {
  color: var(--ink);
}
.legal {
  max-width: 60em;
  margin-top: 24px;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- Privacy / prose pages ---------- */

.prose-page {
  padding-block: clamp(48px, 8vw, 96px) clamp(80px, 11vw, 144px);
}
.prose {
  max-width: 68ch;
}
.prose h1 {
  margin-bottom: 14px;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
}
.prose .updated {
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.prose h2 {
  margin: 48px 0 12px;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.prose p,
.prose ul {
  margin: 0 0 16px;
  color: var(--ink-2);
}
.prose ul {
  padding-left: 1.2em;
}
.prose li + li {
  margin-top: 6px;
}
.prose .btn {
  margin-top: 16px;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .btn:active { transition: none; }
}