/* Minimal monospace one-pager. No JS, no images, no webfonts, no links. */

:root {
  --ink: #000;
  --paper: #fff;
  --col: 30rem;
  --pad-top: 8.5rem;
  --pad-left: 12rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  position: relative;
  margin: 0;
  padding: var(--pad-top) 1.5rem 9rem var(--pad-left);
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.brief-topbar {
  position: relative;
  z-index: 4;
}

/* Wordmark only. The body stays monospace; this is the one serif on the page. */
@font-face {
  font-family: "Instrument Serif";
  src: url("/home-assets/fonts/instrument-serif-3.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.wordmark {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem;
  /* The full company name is long, so it scales with the viewport rather
     than wrapping onto a second line on a narrow screen. */
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.5rem;
}

.wordmark-line .wordmark { margin: 0; }

.title-social-links {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
}

.title-social-links a {
  display: inline-flex;
  width: 0.82rem;
  height: 0.82rem;
  align-items: center;
  justify-content: center;
  color: #000;
  line-height: 0;
  opacity: 0.32;
  transition: opacity 0.18s ease;
}

.title-social-links a:hover,
.title-social-links a:focus-visible { opacity: 0.68; }

.title-social-links svg,
.title-social-links img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.title-social-links img { filter: grayscale(1) brightness(0); }

.brief > .social-links { display: none; }

/* Keep the serif wordmark compact but deliberately bold. */
.wordmark span {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0;
}

.brief-access {
  position: absolute;
  top: calc(-1 * var(--pad-top) + 1.75rem);
  right: 0;
  width: 17rem;
  color: #000;
  font-size: 0.66rem;
  line-height: 1.4;
}

.brief-access-toggle { display: none; }

.brief-access-form { width: 100%; }

.brief-access-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.brief-access-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000;
}

.brief-access-row input {
  min-width: 0;
  height: 2rem;
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #ff5a00;
  caret-color: #ff5a00;
  background: transparent;
  font: inherit;
}

.brief-access-row input::placeholder { color: #aaa; opacity: 1; }

.brief-access-row input:focus-visible {
  box-shadow: none;
}

.brief-access-row button {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  color: #000;
  background: transparent;
  font: 700 0.9rem/1 ui-monospace, monospace;
  cursor: pointer;
}

.brief-access-row button:disabled { cursor: wait; opacity: 0.4; }

.brief-access-status {
  min-height: 1em;
  margin: 0.3rem 0 0;
  font-size: 0.58rem;
}

.brief-access-status.is-error { color: #b42318; }
.brief-access-status.is-success { color: #176b32; }

.brief { position: relative; z-index: 1; max-width: var(--col); }

.brief p { margin: 0 0 1.55rem; }

.brief p:last-child { margin-bottom: 0; }

em { font-style: italic; }

.contact { margin-top: 2.5rem; }

.contact a {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: -0.55rem;
}

.social-links a {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  color: #000;
  line-height: 0;
}

.social-links svg,
.social-links img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
}

.social-links img {
  filter: grayscale(1) brightness(0);
}

.social-links a:focus-visible {
  outline: 1px solid #000;
  outline-offset: 0.25rem;
}

section { max-width: var(--col); margin-top: 5.5rem; }

h2 {
  margin: 0 0 1.75rem;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.careers-list {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.careers-apply { margin: 0 !important; color: #777; }

.careers-apply a {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.entry { margin-bottom: 3rem; }

.entry:last-child { margin-bottom: 0; }

.entry-headline { margin: 0 0 0.35rem; font-size: inherit; font-weight: 400; }

.entry-kicker { margin: 0 0 0.6rem; font-style: italic; }

.entry p { margin: 0; }

.listing { margin-bottom: 2.25rem; }

.listing:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
  :root { --pad-top: 1.5rem; --pad-left: 1rem; }
  body { padding-right: 1rem; padding-bottom: 4rem; }
  .brief-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }
  .wordmark {
    margin: 0;
    font-size: clamp(0.82rem, 4.2vw, 0.95rem);
  }
  .wordmark-line {
    gap: 0.62rem;
    margin: 0;
  }
  .brief-access {
    position: static;
    width: auto;
    margin-left: auto;
  }
  .brief-access-toggle {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid #000;
    border-radius: 0;
    color: #000;
    background: #fff;
    font: 700 0.62rem/1.1 ui-monospace, monospace;
    white-space: nowrap;
    cursor: pointer;
  }
  .brief-access-form { display: none; }
  .brief-access.is-open {
    width: 100%;
    flex-basis: 100%;
  }
  .brief-access.is-open .brief-access-toggle {
    display: flex;
    margin-left: auto;
  }
  .brief-access.is-open .brief-access-form {
    display: block;
    margin-top: 0.65rem;
  }
  .brief-access-label { display: none; }
  .brief-access-row input { height: 2.5rem; font-size: 0.75rem; }
  .brief-access-row button { width: 2.5rem; height: 2.5rem; }
  section { margin-top: 4rem; }
}

@media print {
  :root { --pad-top: 0; --pad-left: 0; }
}

/* Recorded hand motion turning a globe of noise. Decorative only: the page is
   complete without it, so it is hidden from assistive tech and simply absent
   if the data or canvas fails.

   On a wide screen it sits just beyond the text column rather than pinned to
   the window edge, so it stays beside the writing however wide the display
   gets. Narrower than that it drops into the flow it already occupies in the
   markup, between the wordmark and the first paragraph. */
.globe-stage {
  --api-progress: 0;
  --line-progress: 0;
  --api-shift: 0.75rem;
  --pin-x: 50%;
  --pin-y: 50%;
  --callout-left: 72%;
  position: absolute;
  top: calc(var(--pad-top) - 2rem);
  left: calc(var(--pad-left) + var(--col) + 2rem);
  width: min(26rem, calc(100vw - var(--pad-left) - var(--col) - 5rem));
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.globe-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.api-callout {
  position: absolute;
  left: var(--callout-left);
  top: calc(var(--pin-y) - 1.55rem);
  width: 19rem;
  min-height: 8.4rem;
  padding: 1rem 1.15rem;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  color: #000;
  font: 0.7rem/1.55 ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  opacity: var(--api-progress);
  transform: translateX(var(--api-shift));
  transform-origin: left center;
}

.api-callout::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  right: calc(100% - 0.5rem);
  width: calc(var(--callout-left) - var(--pin-x) + 0.5rem);
  height: 1px;
  background: #ff5a00;
  transform: scaleX(var(--line-progress));
  transform-origin: left center;
}

.api-callout::after {
  content: "";
  position: absolute;
  top: 1.55rem;
  bottom: 0.35rem;
  left: 0.5rem;
  width: 1px;
  background: #ff5a00;
  transform: scaleY(var(--flow-progress, 0));
  transform-origin: top center;
}

.api-callout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.api-callout-head code {
  color: #000;
  font: inherit;
  font-weight: 700;
}

.api-callout-head span {
  padding: 0.12rem 0.55rem;
  border-radius: 0.3rem;
  border: 0;
  background: #fff;
  color: #000;
  font-size: 0.62rem;
  font-weight: 700;
}

.api-callout-head span[data-state="success"] {
  background: #edf5ea;
  color: #244d2b;
}

.api-callout-head span[data-state="memory"] {
  background: transparent;
  color: #ff5a00;
}

.api-callout pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
}

.api-callout pre.typing::after {
  content: "_";
  animation: terminal-caret 0.7s steps(1, end) infinite;
}

@keyframes terminal-caret {
  50% { opacity: 0; }
}

.api-result-line {
  display: block;
  transform-origin: left center;
  will-change: opacity, filter, transform, clip-path;
  animation: api-result-line-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.paris-instruction .api-result-line {
  animation-name: robot-result-line-in;
}

.paris-comparison {
  --compare-position: 50%;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    max-height 0.5s cubic-bezier(0.2, 0.72, 0.3, 1),
    margin-top 0.42s ease,
    opacity 0.42s ease,
    transform 0.5s cubic-bezier(0.2, 0.72, 0.3, 1);
}

.paris-comparison.visible {
  max-height: 28rem;
  margin-top: 0.9rem;
  opacity: 1;
  transform: translateY(0);
}

.paris-comparison-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 647 / 368;
  overflow: hidden;
  border-radius: 4px;
  background: #ececec;
}

.paris-observation {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}

.paris-observation-after {
  clip-path: inset(0 0 0 var(--compare-position));
}

.paris-comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 1px;
  background: #000;
  transform: translateX(-0.5px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.paris-comparison-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.paris-comparison-label {
  position: absolute;
  top: 0.45rem;
  padding: 0.12rem 0.3rem;
  background: rgba(255, 255, 255, 0.86);
  color: #000;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.paris-comparison-label-before { left: 0.45rem; }
.paris-comparison-label-after { right: 0.45rem; }

.paris-change-region {
  position: absolute;
  top: 20%;
  right: 3%;
  width: 26%;
  height: 67%;
  border: 1px solid #ff5a00;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center;
  transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.2, 0.72, 0.3, 1);
}

.paris-change-region::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 90, 0, 0.08);
}

.paris-change-region::after {
  content: "CONSTRUCTION";
  position: absolute;
  top: -1px;
  bottom: auto;
  right: -1px;
  padding: 0.12rem 0.25rem;
  background: #ff5a00;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1;
}

.paris-change-region.visible {
  opacity: 1;
  transform: scale(1);
}

.paris-instruction {
  max-height: 0;
  margin-top: 0 !important;
  overflow: hidden;
  color: #ff5a00;
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    max-height 0.45s ease,
    margin-top 0.35s ease,
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.2, 0.72, 0.3, 1);
}

.paris-instruction.visible {
  max-height: 12rem;
  margin-top: 0.85rem !important;
  padding-bottom: 0.4rem;
  opacity: 1;
  transform: translateY(0);
}

.memory-current {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: #ff5a00;
  font-weight: 700;
  letter-spacing: 0.025em;
  opacity: 0;
  transform: translateY(0.12rem);
  transition:
    max-height 0.28s ease,
    margin-top 0.28s ease,
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.memory-current.visible {
  max-height: 2rem;
  margin-top: 0.55rem;
  opacity: 1;
  transform: translateY(0);
}

@keyframes api-result-line-in {
  0% {
    opacity: 0;
    filter: blur(2px);
    clip-path: inset(0 18% 0 0);
    transform: translate3d(0, 0.14rem, 0);
  }
  65% {
    opacity: 0.88;
    filter: blur(0.35px);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes robot-result-line-in {
  0% {
    opacity: 0;
    filter: blur(2.5px);
    clip-path: inset(0 22% 0 0);
    transform: translate3d(0, 0.16rem, 0);
  }
  65% {
    opacity: 0.9;
    filter: blur(0.4px);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
  }
}

/* Not enough room beside the column: let it sit in the flow instead. */
@media (max-width: 68rem) {
  .globe-stage {
    position: relative;
    top: auto;
    left: auto;
    width: min(26rem, 100%);
    height: 29rem;
    aspect-ratio: auto;
    margin: 0 0 1rem;
    overflow: hidden;
  }

  .globe-stage canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .api-callout {
    position: absolute;
    top: 0;
    left: 0;
    width: min(19rem, 100%);
    margin: 0;
    transform: translateY(var(--api-shift));
  }

  .api-callout::before { display: none; }
}

@media (max-width: 40rem) {
  .globe-stage {
    width: 100%;
    height: clamp(23.5rem, 110vw, 26rem);
    margin-bottom: 0.75rem;
  }

  .api-callout {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font-size: clamp(0.56rem, 2.5vw, 0.65rem);
    line-height: 1.4;
  }

  .api-callout-head { margin-bottom: 0.4rem; }
  .paris-comparison.visible { margin-top: 0.55rem; }
  .paris-comparison-viewport {
    height: clamp(6.5rem, 32vw, 8.75rem);
    aspect-ratio: auto;
  }
  .paris-instruction.visible { margin-top: 0.55rem !important; }
  .paris-comparison-label { font-size: clamp(0.46rem, 2.2vw, 0.52rem); }
}

@media print {
  .globe-stage { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .api-result-line { animation: none; }
  .api-callout pre.typing::after { animation: none; }
  .paris-comparison { transition: none; }
  .paris-change-region,
  .paris-instruction { transition: none; }
}

/* The access control starts in the header for no-JS source order, but is hidden
   there and moved into the action row before it can paint at the top right. */
.brief-topbar > .brief-access { display: none; }

/* Primary actions share one compact line; opening API access expands the email
   field immediately beside its label. */
.brief-actions {
  display: flex;
  min-height: 2.2rem;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.5rem;
}

.brief-actions .contact {
  margin: 0;
  display: inline-flex;
  height: 1.7rem;
  align-items: center;
  border-bottom: 1px solid #000;
  color: #000;
  text-decoration: none;
}

.brief-actions-separator {
  display: inline-flex;
  height: 1.7rem;
  align-items: center;
  color: #aaa;
}

.brief-actions .brief-access {
  position: relative;
  inset: auto;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #000;
  font: inherit;
}

.brief-actions .brief-access-toggle {
  display: inline-flex;
  height: 1.7rem;
  min-height: 1.7rem;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #000;
  color: #000;
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brief-actions .brief-access-form {
  display: block;
  width: 0;
  opacity: 0;
  transform: translateX(-0.35rem);
  pointer-events: none;
  transition:
    width 0.36s cubic-bezier(0.2, 0.72, 0.3, 1),
    opacity 0.22s ease,
    transform 0.36s cubic-bezier(0.2, 0.72, 0.3, 1);
}

.brief-actions .brief-access.is-open .brief-access-form {
  width: min(14rem, 42vw);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.brief-actions .brief-access-label { display: none; }

.brief-actions .brief-access-row {
  height: 1.7rem;
  overflow: hidden;
}
.brief-actions .brief-access-row input,
.brief-actions .brief-access-row button { height: 1.7rem; }

.brief-actions .brief-access-status {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 18rem;
  margin-top: 0.2rem;
}

.brief-actions + .social-links {
  margin-top: 0;
  padding-top: 1.25rem;
}

/* The comparison is a genuine before/after control: mouse, touch, pen, and
   keyboard can all move the divider. */
.paris-comparison-viewport {
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

.paris-comparison-viewport:focus-visible {
  outline: 1px solid #ff5a00;
  outline-offset: 2px;
}

.paris-comparison-divider { pointer-events: none; }

/* Image-space segmentation traced against the 647x368 construction frame.
   The fill follows the exposed scaffold/facade boundary pixel-for-pixel and
   scales with the observation without turning back into a generic box. */
.paris-change-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.995);
  transform-origin: center;
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.2, 0.72, 0.3, 1);
  pointer-events: none;
}

.paris-change-mask-fill {
  fill: rgba(255, 90, 0, 0.2);
}

.paris-change-mask-edge {
  fill: none;
  stroke: #ff5a00;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.paris-change-mask.visible {
  opacity: 1;
  transform: scale(1);
}

.paris-change-label {
  position: absolute;
  top: 1.45rem;
  right: 0.45rem;
  padding: 0.12rem 0.25rem;
  background: #ff5a00;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(-0.2rem);
  transition: opacity 0.22s ease, transform 0.25s ease;
  pointer-events: none;
}

.paris-change-mask.visible + .paris-change-label {
  opacity: 1;
  transform: translateY(0);
}

.api-callout pre.typing::after { content: none; }

@media (max-width: 40rem) {
  .brief-actions { flex-wrap: nowrap; }
  .brief-actions .brief-access { gap: 0.35rem; }
  .brief-actions .brief-access.is-open .brief-access-form { width: min(9rem, 38vw); }
}