/* Parsecra company site. Brand kit PA02. Native CSS, no scripts.
   Theme follows the system. The base styles are the final states; every animation is added only under
   prefers-reduced-motion: no-preference, so reduced motion is simply the page at rest. */

@font-face { font-family: "Syne"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/syne-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* brand */
  --mulberry: #5b2a4a;
  --lilac: #a56a92;
  --saffron: #e0a030;
  --vellum: #f1eee6;
  --cellar: #1a0f17;

  /* light theme */
  --paper: #f1eee6;
  --surface: #eae4df;
  --text: #2a1824;
  --muted: #4b3743;
  --head: #5b2a4a;
  --rule: #c9c0b4;
  --rule-strong: #2a1824;
  --link: #5b2a4a;
  --focus: #5b2a4a;
  --tile-a: #5b2a4a;
  --tile-b: #a56a92;
  --tile-c: #e0a030;
  --btn-bg: #e0a030;
  --btn-fg: #1a0f17;
  --deep-bg: #1a0f17;

  --font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --section: clamp(64px, 8vw, 112px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a0f17;
    --surface: #2a1a26;
    --text: #e8dde4;
    --muted: #b8a4b2;
    --head: #d9a9c8;
    --rule: #43303d;
    --rule-strong: #d9a9c8;
    --link: #d9a9c8;
    --focus: #edbb55;
    --tile-a: #d9a9c8;
    --tile-b: #b77da3;
    --tile-c: #edbb55;
    --btn-bg: #edbb55;
    --btn-fg: #1a0f17;
    --deep-bg: #5b2a4a;
  }
}

/* the drenched band is always deep, in either theme */
.on-deep {
  --text: #f1eee6;
  --muted: #d9c9d3;
  --head: #f1eee6;
  --rule: rgba(241, 238, 230, 0.28);
  --rule-strong: #f1eee6;
  --link: #f1eee6;
  --focus: #edbb55;
  --tile-a: #d9a9c8;
  --tile-b: #b77da3;
  --tile-c: #edbb55;
  --btn-bg: #edbb55;
  --btn-fg: #1a0f17;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: 0.2em; }

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

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: var(--s3) var(--s5); border-radius: 999px; font-weight: 500; text-decoration: none;
}
.skip:focus { top: var(--s4); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* type */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--head); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
p { text-wrap: pretty; max-width: 62ch; }
.lede { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.5; }

/* buttons: the only pill shapes on the page */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s6);
  border: 2px solid var(--rule-strong); border-radius: 999px;
  background: transparent; color: var(--text);
  font: 500 1rem/1 var(--font-text); text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--rule-strong); color: var(--paper); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-fg); border-color: var(--btn-fg); color: var(--btn-bg); }
.on-deep .btn-primary:hover { background: var(--paper-on-deep, #f1eee6); border-color: #f1eee6; color: #1a0f17; }

/* header */
.top { border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
main:focus { outline: none; }
.brand svg { height: 34px; width: auto; }
.top nav { margin-inline: auto var(--s5); }
.top nav ul { display: flex; gap: var(--s6); }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 250ms var(--ease); }
.top nav a:hover { background-size: 100% 2px; }

/* logo colours come from the theme */
.logo .a { fill: var(--tile-a); }
.logo .b { fill: var(--tile-b); }
.logo .c { fill: var(--tile-c); }
.logo .w { fill: var(--head); }

/* hero: a wide two-line headline, then the copy on the left and the mark on the right */
.hero-wrap { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 64px); }
.hero h1 { max-width: 22ch; font-size: clamp(2.5rem, 0.9rem + 4.4vw, 5rem); }
.hero-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 6vw, 96px); align-items: stretch; margin-top: clamp(16px, 2.5vw, 32px);
}
.hero-copy > * + * { margin-top: var(--s6); }
.hero-copy { align-self: start; padding-top: clamp(8px, 2.5vw, 40px); }
.hero-copy .lede { max-width: 30ch; }
.hero-mark {
  justify-self: end; max-width: none;
  --crop: clamp(32px, 6vw, 96px);
  width: calc(100% + (100vw - min(100vw, 1200px)) / 2 + var(--gutter) + var(--crop));
  margin-right: calc((min(100vw, 1200px) - 100vw) / 2 - var(--gutter) - var(--crop));
}
.hero { overflow-x: clip; }
.hero-mark svg { width: 100%; height: auto; overflow: visible; }
.hero-mark .a { fill: var(--tile-a); }
.hero-mark .b { fill: var(--tile-b); }
.hero-mark .c { fill: var(--tile-c); }
.ruler {
  height: 18px;
  border-bottom: 1px solid var(--rule-strong);
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 24px) 0 0 / 100% 10px no-repeat;
  transform-origin: left center;
}

/* the span */
.platform { padding-block: var(--section); background: var(--surface); border-bottom: 1px solid var(--rule); }
.platform h2 { max-width: 26ch; }
.platform .status { margin-top: var(--s5); max-width: 58ch; font-size: 1rem; color: var(--muted); text-wrap: balance; }
.platform .parts { margin-top: clamp(32px, 4vw, 48px); font-weight: 500; color: var(--text); }
.platform .parts + .span { margin-top: var(--s5); }
.platform .intro { margin-top: var(--s5); color: var(--text); font-size: 1.1875rem; max-width: 58ch; }
.span { position: relative; margin-top: clamp(48px, 7vw, 88px); padding-top: 4.25rem; }
.span::before, .span::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3.25rem; height: 3px;
  transform-origin: left center;
}
.span::before { background: var(--rule-strong); }
.span::after { background: var(--tile-c); transform: scaleX(0); }
.end { position: absolute; top: 0; font-size: 1rem; font-weight: 500; color: var(--text); max-width: none; }
.end::after { content: ""; position: absolute; top: 2.25rem; width: 3px; height: 1.25rem; background: var(--rule-strong); }
.end-a::after { left: 0; }
.end-b::after { right: 0; }
.end-a { left: 0; }
.end-b { right: 0; text-align: right; }
.marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.marks li { position: relative; padding-top: 2.75rem; }
.marks li:nth-child(2) { padding-top: 4.25rem; }
.marks li:nth-child(3) { padding-top: 5.75rem; }
.marks li::before {
  content: ""; position: absolute; top: -1.9rem; left: 0; width: 34px; height: 52px;
  clip-path: polygon(20% 0, 100% 8%, 80% 100%, 0 92%);
}
.marks li:nth-child(1)::before { background: var(--tile-a); }
.marks li:nth-child(2)::before { background: var(--tile-b); }
.marks li:nth-child(3)::before { background: var(--tile-c); }
.marks h3 { margin-bottom: var(--s4); font-size: clamp(1.5rem, 1rem + 1.7vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.marks p { color: var(--text); font-size: 1.0625rem; }
.config { margin-top: clamp(40px, 6vw, 72px); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.config p { max-width: 58ch; color: var(--text); }

/* responsibility */
.resp { padding-block: var(--section); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(32px, 5vw, 64px); }
.cols > div { padding-right: clamp(24px, 5vw, 80px); }
.cols > div + div { padding-right: 0; padding-left: clamp(24px, 5vw, 80px); border-left: 1px solid var(--rule); }
.cols h3 { margin-bottom: var(--s5); font-family: var(--font-text); font-weight: 500; font-size: 1.25rem; letter-spacing: 0; }
.cols li { padding-block: var(--s4); border-top: 1px solid var(--rule); max-width: 40ch; }
.cols li:last-child { border-bottom: 1px solid var(--rule); }
.note { margin-top: clamp(32px, 5vw, 56px); color: var(--text); max-width: 58ch; }

/* contact band */
.deep { background: var(--deep-bg); color: var(--text); }
.contact { position: relative; overflow: hidden; padding-block: calc(var(--section) * 1.15) var(--section); }
.contact .wrap { position: relative; z-index: 1; }
.band-mark { position: absolute; right: -7%; bottom: -26%; width: min(64vw, 820px); pointer-events: none; }
.band-mark svg { width: 100%; height: auto; }
.band-mark path { fill: #d9a9c8; opacity: 0.16; }
.contact h2 { font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4.75rem); line-height: 1.04; max-width: 14ch; }
.contact .lede { margin-top: var(--s6); max-width: 38ch; color: var(--muted); }
.contact p + p { margin-top: var(--s6); }
.contact .addr { margin-top: var(--s4); color: var(--muted); font-size: 1rem; }
.foot { border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s6); padding-block: var(--s6); font-size: 1rem; color: var(--muted); }
.foot-grid a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.foot-grid p { max-width: none; }
.legal { white-space: nowrap; }

/* small screens: single column, the span runs vertically */
@media (max-width: 820px) {
  .top nav { display: none; }
  .bar { justify-content: space-between; }
  .hero-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-mark { justify-self: start; --crop: 56px; width: calc(100% + var(--gutter) + var(--crop)); margin-right: calc(-1 * (var(--gutter) + var(--crop))); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > div, .cols > div + div { padding: 0; border-left: 0; }
  .cols > div + div { margin-top: var(--s7); }
  .span { padding: 0 0 0 2.5rem; margin-top: var(--s7); }
  .span::before, .span::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: center top; }
  .span::after { transform: scaleY(0); }
  .end { position: static; font-size: 1rem; }
  .end::after { display: none; }
  .ruler { height: 22px; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 32px) 0 0 / 100% 14px no-repeat; border-bottom: 1px solid var(--rule-strong); }
  .band-mark { right: -22%; bottom: -8%; width: 92vw; }
  .end-b { text-align: left; margin-top: var(--s6); }
  .end-a { margin-bottom: var(--s6); }
  .marks { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .marks li, .marks li:nth-child(2), .marks li:nth-child(3) { padding-top: 0; }
  .marks li::before { top: 0.5rem; left: -2.5rem; transform: translateX(-12px); width: 22px; height: 34px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 420px) {
  .btn { padding: 0 var(--s5); }
  .bar { gap: var(--s3); }
  .brand svg { height: 24px; }
}

/* the one orchestrated moment, then quiet */
@media (prefers-reduced-motion: no-preference) {
  @keyframes settle { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .hero-mark path { transform-box: fill-box; animation: settle 800ms var(--ease) both; }
  .hero-mark path:nth-child(1) { animation-delay: 80ms; }
  .hero-mark path:nth-child(2) { animation-delay: 160ms; }
  .hero-mark path:nth-child(3) { animation-delay: 240ms; }
  .hero-mark path:nth-child(4) { animation-delay: 320ms; }
  .hero-mark path:nth-child(5) { animation-delay: 400ms; }
  .hero-mark path:nth-child(6) { animation-delay: 480ms; }
  .ruler { animation: draw-x 1100ms var(--ease) 600ms both; }
  @supports (animation-timeline: view()) {
    .span::after { animation: draw-x linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @media (max-width: 820px) {
      .span::after { animation-name: draw-y; }
    }
  }
}

@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .marks li:nth-child(n)::before { background: CanvasText; }
  .span::before, .ruler { background: CanvasText; }
  .span::after { display: none; }
  .logo .a, .logo .b, .logo .c, .logo .w { fill: CanvasText; }
  .hero-mark .a, .hero-mark .b, .hero-mark .c { fill: CanvasText; }
  .band-mark { display: none; }
}
@media (prefers-contrast: more) {
  :root { --rule: var(--rule-strong); }
}
@media print { .top nav, .skip { display: none; } }