/* Claustel's site, in the neutral white of Codex's latest study (2026-10-23, 22:14): white and
   light grey surfaces, charcoal text and controls, no tinted surface, like the familiar light
   look of the online assistants. EB Garamond for the titles, Figtree for the text, IBM Plex Mono
   for the small labels. The previous architectural mark is back, in its own blue and slate, and
   those two colours belong to the mark alone. No style is inline: the Content-Security-Policy
   forbids it, so every rule lives here. */

/* ---------- fonts ----------
   Self-hosted, the same files as Clerc's (software/clerc/frontend/public/fonts), under the
   SIL Open Font License 1.1 (their texts are beside them). A changed font gets a new name:
   the server keeps fonts for a year. Chinese uses the system's own fonts. */
@font-face { font-family: 'Figtree'; src: url('fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- colours ----------
   Codex's neutral palette. Text on --bg: ink 15.7:1, muted 6.0:1 (5.6:1 on --panel); a field's
   outline 3.5:1. In dark: ink 15.4:1, muted 8.8:1, field 4.9:1. The site has no colour of
   meaning: --brand is the charcoal of the controls, and the mark keeps --mark-blue and
   --mark-silver, used nowhere else. */
:root {
  --bg: #FFFFFF; --panel: #F7F7F7; --surface: #FFFFFF; --hover: #EDEDED; --ink: #242424; --muted: #626262;
  --brand: #242424; --brand-hover: #3D3D3D; --soft: #F1F1F1; --line: #E5E5E5; --field: #8A8A8A; --on: #FFFFFF;
  --mark-blue: #1F5FC4; --mark-silver: #8494A8;
  --sans: 'Figtree', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
  --serif: 'EB Garamond', 'Songti SC', 'Noto Serif CJK SC', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --wrap: 1120px;
  --gutter: 32px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #171717; --panel: #202020; --surface: #232323; --hover: #303030; --ink: #EFEFEF; --muted: #B2B2B2;
  --brand: #E6E6E6; --brand-hover: #CFCFCF; --soft: #303030; --line: #3C3C3C; --field: #858585; --on: #171717;
  /* The mark, lighter on the dark page, as the site drew it until 2026-10-23. */
  --mark-blue: #4C94FF; --mark-silver: #8E9DB0;
  color-scheme: dark;
}
/* Chinese has no serif in the page's fonts: its titles stay in the system's sans-serif. */
:root[lang|="zh"] { --serif: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The header stays at the top: a section reached by its link starts below it. */
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px;
  background: var(--ink); color: var(--bg); border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* The mark: the architectural enclosure of brand/01-claustel-mark.svg, its three paths
   unchanged, the outer walls and the arch in blue, the right wall in slate. Beside it in the
   header, the wordmark of brand/02-claustel-wordmark.svg, in the text's colour. */
.mark-svg { display: block; width: 24px; height: 26px; fill: var(--mark-blue); flex: none; }
.mark-svg .mark-wall { fill: var(--mark-silver); }
.word-svg { display: block; width: auto; height: 15px; fill: var(--ink); }
/* In the header, the mark sits on a small tile in the brand's navy version, as the favicon, the
   touch icon and the large tile do: off-white, the silver gradient on the right wall (defined in the
   header's own SVG), on #050A13. */
.brand .mark-svg { width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: #050A13; fill: #F7F7F4; }
.brand .mark-svg .mark-wall { fill: url(#brand-silver); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  font: 400 31px/1 'EB Garamond', Georgia, serif; letter-spacing: -0.02em; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.menu { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.menu a, .langs a { text-decoration: none; }
.menu a:hover, .langs a:hover { text-decoration: underline; }
.langs { display: flex; gap: 4px; font-size: 13px; color: var(--muted); }
.langs a { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; }
.langs a[aria-current="page"], .menu a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
/* The theme switch shows a sun; its word, unseen, and its spoken name name the other theme (site.js).
   Flex, not grid: in a grid the unseen word took a second row and pushed the sun 4 px up. */
.theme {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none;
  display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--ink);
}
.theme::before {
  content: ''; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.theme:hover { background: var(--hover); }
.pill {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px;
  border: 1px solid var(--field); border-radius: 999px; font-size: 15px; text-decoration: none;
}
.pill:hover, .pill[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); text-decoration: none; }

/* ---------- buttons and small type ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 500; text-decoration: none;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on); text-decoration: none; }
.btn-quiet { background: none; color: var(--ink); border-color: var(--field); }
.btn-quiet:hover { background: var(--hover); color: var(--ink); border-color: var(--ink); }
.label { font: 400 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.label .num { color: var(--brand); margin-right: 10px; }
.aside { font-size: 15px; color: var(--muted); max-width: 760px; }
.lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 640px; }

h1 { font: 400 clamp(42px, 6vw, 68px)/1.04 var(--serif); letter-spacing: -0.025em; max-width: 780px; }
h2 { font: 400 clamp(30px, 3.4vw, 42px)/1.12 var(--serif); letter-spacing: -0.015em; }
h3 { font: 500 25px/1.2 var(--serif); letter-spacing: -0.01em; }
:root[lang|="zh"] h1, :root[lang|="zh"] h2, :root[lang|="zh"] h3 { letter-spacing: 0; font-weight: 500; }

/* ---------- the title's note (the asterisk) ----------
   It shows on hover, on focus and on a click, and Escape hides it (WCAG 1.4.13). */
.fn { position: relative; display: inline-block; vertical-align: top; }
/* The title's last word and its asterisk stay on one line: alone, the asterisk could wrap
   onto a line of its own at some widths (Italian at 375 px, for one). */
.nobr { white-space: nowrap; }
.fn-mark {
  border: 0; background: none; padding: 0 4px; margin-left: 2px;
  font: 400 0.6em/1 var(--serif); color: var(--brand);
}
.fn-text {
  position: absolute; z-index: 15; top: calc(100% + 8px); left: 0; width: 340px; max-width: calc(100vw - 2 * var(--gutter));
  transform: translateX(var(--dx, 0px));
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--field); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  font: 400 15px/1.6 var(--sans); letter-spacing: 0; color: var(--ink); text-align: left; white-space: normal;
  display: none;
}
/* A strip above the note keeps it open while the pointer crosses the gap from the asterisk. */
.fn-text::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* Hidden, it takes no room, so that it can never make the page scroll sideways. */
.fn:hover .fn-text, .fn:focus-within .fn-text, .fn.open .fn-text { display: block; }
.fn.hush .fn-text { display: none; }

/* ---------- home: the opening ---------- */
.hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 56px; }
.kicker { font-size: 15px; color: var(--muted); margin-bottom: 22px; max-width: 520px; }
.hero .lead { margin-top: 26px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }

/* The drawing beside the title, from Codex's study: the mark on a tilted tile, and a label. */
.art { position: relative; min-height: 380px; display: grid; place-items: center; isolation: isolate; }
.art::before { content: ''; position: absolute; inset: 30px -24px; z-index: -1; background: radial-gradient(ellipse, var(--soft) 5%, transparent 68%); }
.tile {
  width: 300px; height: 284px; display: grid; place-items: center;
  border: 1px solid var(--field); border-radius: 112px 112px 32px 32px; background: var(--surface);
  box-shadow: 16px 22px 0 var(--soft); transform: rotate(-8deg);
}
.tile .mark-svg { width: 132px; height: 132px; }
/* The tile wears the brand's navy version of the mark (as on LinkedIn, the favicon and the touch
   icon): off-white walls and arch, the right wall in the silver gradient of brand/01-claustel-mark.svg
   (defined in the tile's own SVG), on the deep navy of the brand lockups, in both themes. */
.tile { background: #050A13; border-color: #050A13; }
.tile .mark-svg { fill: #F7F7F4; }
.tile .mark-svg .mark-wall { fill: url(#tile-silver); }
.tag {
  position: absolute; left: 0; bottom: 22px; width: 232px; display: flex; gap: 14px; align-items: center;
  padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05); font-size: 13px; color: var(--muted); line-height: 1.4;
}
.tag b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.lines { width: 46px; height: 46px; flex: none; display: grid; gap: 5px; align-content: center; padding: 0 8px; border: 1px solid var(--field); border-radius: 5px; background: var(--bg); }
.lines i { display: block; height: 2px; background: var(--field); }
.lines i:last-child { width: 65%; }

/* The event (until 3 November 2026): a bar above the header on every page, which leads to
   its card under the opening of the home page. The bar is the one dark band of the page. */
.launch-bar { margin: 0; background: var(--ink); color: var(--bg); text-align: center; font-size: 14px; line-height: 1.45; }
.launch-bar a { display: block; padding: 10px var(--gutter); text-decoration: none; }
.launch-bar a:hover { text-decoration: underline; }
.launch-bar a:focus-visible { outline-color: var(--bg); outline-offset: -5px; }
/* A chevron drawn in CSS: the fonts carry no arrow, and a symbol would stand for a word. */
.launch-bar a::after {
  content: ''; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 10px; vertical-align: 0.12em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.event {
  display: flex; align-items: center; gap: 22px; padding: 22px 26px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
}
/* The club's logo is black on transparent: a white ground keeps it readable in dark mode. */
.event img { width: 64px; height: 64px; padding: 6px; border-radius: 12px; background: #FFFFFF; flex: none; }
.event-title { margin: 0 0 6px; font: 600 21px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
.event p { font-size: 16px; color: var(--muted); }
.event-wrap { margin-top: 8px; margin-bottom: 8px; }

/* ---------- sections ---------- */
.block { padding-top: 80px; padding-bottom: 8px; }
.block > h2 { margin-bottom: 18px; max-width: 760px; }
.block > p:not(.label) { color: var(--muted); max-width: 720px; }

/* The two offers. */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
/* Under the two products, the way to the demo page. */
.block > p.demo-link { margin-top: 22px; color: var(--ink); }
.demo-link a { color: var(--ink); text-underline-offset: 3px; }
.demo-link a::after { content: ' →' / ''; }
/* The two cards share their rows (subgrid): label, heading, text, small line and drawing line up
   across the cards, and the conversation and the diagram take the same height. */
.offer {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.offer p:not(.label) { color: var(--muted); }
.offer .small { font-size: 15px; }
.offer .scene, .offer .connections-box { align-self: stretch; }
.offer .scene p { color: var(--ink); }
.offer-1 { box-shadow: inset 0 3px 0 var(--brand); }

/* How we start: three steps, each with its drawing, joined by a dotted line; then what the
   client owns and what comes under our licence, side by side. The drawings are inline SVG in
   the text's colour (.ico). */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; counter-reset: step; }
.steps li { position: relative; counter-increment: step; font-size: 16px; color: var(--muted); }
.step-ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink);
}
.step-ico .ico { width: 26px; height: 26px; }
/* The line to the next step, behind the drawings. */
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 26px; left: 64px; right: -12px; border-top: 1.5px dotted var(--field); }
.step-title { margin-bottom: 6px; font: 600 18px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
.step-title::before { content: counter(step, decimal-leading-zero); margin-right: 10px; font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }

.own {
  display: grid; grid-template-columns: 2fr 1fr; gap: 0; margin-top: 40px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden;
}
.own-part { padding: 22px 24px; }
.own-lic { border-left: 1px solid var(--line); }
.own .label { margin-bottom: 14px; }
.own-list { display: flex; flex-wrap: wrap; gap: 10px; }
.own-list li {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 1.3;
}
.own-list li span small { display: block; font-size: 13px; color: var(--muted); }

/* Played once in view (site.js): the steps one after another, then the line between them,
   then what is yours. */
@media screen { .play .steps:not(.is-in) li, .play .own:not(.is-in) .own-list li { opacity: 0; } }
.motion .steps.is-in li { animation: rise 0.5s ease-out both; }
.motion .steps.is-in li:nth-child(2) { animation-delay: 0.25s; }
.motion .steps.is-in li:nth-child(3) { animation-delay: 0.5s; }
.motion .steps.is-in li::after { animation: draw 0.6s ease-out 0.3s both; transform-origin: left; }
.motion .own.is-in .own-list li { animation: rise 0.4s ease-out both; }
.motion .own.is-in .own-list li:nth-child(2) { animation-delay: 0.1s; }
.motion .own.is-in .own-list li:nth-child(3) { animation-delay: 0.2s; }
.motion .own.is-in .own-list li:nth-child(4) { animation-delay: 0.3s; }
.motion .own.is-in .own-lic .own-list li { animation-delay: 0.45s; }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes draw-down { from { transform: scaleY(0); } to { transform: none; } }

/* Our way in: a switch the reader opens and closes. Blue, because the access is the client's. */
.door { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; margin-top: 30px; padding: 32px; background: var(--soft); border-radius: 18px; }
.door-scene { display: grid; grid-template-columns: 1fr 72px auto; align-items: center; }
.room { position: relative; padding: 38px 20px 22px; border: 1.5px solid var(--brand); border-radius: 14px; background: var(--surface); }
.room-name { position: absolute; left: 16px; top: 11px; font: 400 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.box { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; white-space: nowrap; }
.box .mark-svg { width: 16px; height: 16px; }
.gate { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--field) 0 6px, transparent 6px 11px); }
.gate i { position: absolute; left: 50%; top: -13px; width: 3px; height: 28px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transform-origin: 50% 100%; }
.motion .gate i { transition: transform 0.35s ease; }
.door.is-open .gate { background: var(--brand); }
.door.is-open .gate i { transform: rotate(-75deg); }
.door.is-open .gate::after { content: ''; position: absolute; top: -3px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.motion .door.is-open .gate::after { animation: visit 1.6s ease-in-out infinite; }
@keyframes visit { from { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(-64px); opacity: 0; } }
.door-text p { color: var(--ink); }
.door-control { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.door-state { font-size: 15px; color: var(--muted) !important; }

/* Open models: a few names, as examples. */
.models-label { margin-top: 26px; margin-bottom: 12px; }
.models { display: flex; flex-wrap: wrap; gap: 12px; }
.models li { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.models b { font: 500 22px/1.15 'EB Garamond', Georgia, serif; }
.models span { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.models + .aside { margin-top: 20px; }

/* The last band of the home page. */
.cta { margin-top: 96px; margin-bottom: 72px; }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 34px 36px; border-radius: 18px; background: var(--panel); }
.cta p { font: 400 clamp(24px, 2.6vw, 30px)/1.25 var(--serif); max-width: 640px; }

/* The contact page and the 404 page. */
.page-head { padding-top: 72px; padding-bottom: 8px; }
.page-head .lead { margin-top: 22px; }

/* The team. */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.person { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.initials {
  width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 22px;
  border-radius: 50%; background: var(--soft); color: var(--brand); font: 400 25px/1 'EB Garamond', Georgia, serif;
}
.person h3 { font-size: 26px; line-height: 1.15; }
.person .label { margin: 8px 0 14px; }
.person p:not(.label) { color: var(--muted); font-size: 16px; }

/* ---------- the contact page ---------- */
.enquiry { margin-top: 36px; max-width: 860px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.field { display: grid; gap: 7px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 500; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--field); border-radius: 10px;
  background: var(--surface); font-size: 16px; line-height: 1.45;
}
textarea { resize: vertical; min-height: 120px; }
::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-radius: 10px; }
[aria-invalid="true"] { border-color: #AA312B; }
:root[data-theme="dark"] [aria-invalid="true"] { border-color: #FFB4A9; }
.err { font-size: 14px; color: #AA312B; }
:root[data-theme="dark"] .err { color: #FFB4A9; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.send .note-line, .after .note-line, .required-note { font-size: 15px; color: var(--muted); }
.required-note { margin-bottom: 22px; }
.after { display: grid; gap: 14px; margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.status { font-weight: 500; }
pre { margin: 0; padding: 16px; overflow-x: auto; white-space: pre-wrap; background: var(--panel); border-radius: 10px; font: 400 13px/1.6 var(--mono); }
.after .btn { justify-self: start; }

/* ---------- the 404 page ---------- */
.lost { display: grid; gap: 12px; margin-top: 26px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { margin-top: 0; border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding-top: 26px; padding-bottom: 34px; font-size: 14px; color: var(--muted); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand .mark-svg { width: 18px; height: 18px; }
.foot-links { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---------- narrower windows ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
  .art { min-height: 280px; max-width: 420px; }
  .art::before { inset: 20px 0; }
  .tile { width: 240px; height: 228px; border-radius: 90px 90px 28px 28px; }
  .tile .mark-svg { width: 104px; height: 104px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; }
  .steps li .step-ico { grid-row: span 2; margin-bottom: 0; }
  /* On a phone the line runs down from one drawing to the next. */
  .steps li:not(:last-child)::after { top: 52px; bottom: -22px; left: 26px; right: auto; border-top: 0; border-left: 1.5px dotted var(--field); }
  .motion .steps.is-in li::after { transform-origin: top; animation-name: draw-down; }
  .own { grid-template-columns: 1fr; }
  .own-lic { border-left: 0; border-top: 1px solid var(--line); }
  .offers { grid-template-columns: minmax(0, 1fr); }
  .people { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 860px) {
  .top-in {
    display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; padding-top: 10px; padding-bottom: 10px;
    grid-template-areas: "brand theme pill" "menu menu langs";
  }
  .brand { grid-area: brand; font-size: 28px; }
  .theme { grid-area: theme; }
  .pill { grid-area: pill; min-height: 38px; padding: 0 16px; font-size: 14px; }
  .menu { grid-area: menu; margin: 0; gap: 16px; font-size: 14px; }
  .langs { grid-area: langs; align-self: center; }
}
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .lead { font-size: 17px; }
  .fields { grid-template-columns: 1fr; }
  .offer { padding: 24px; }
  .block { padding-top: 60px; }
  .door { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .tile { width: 210px; height: 200px; border-radius: 80px 80px 26px 26px; }
  .tile .mark-svg { width: 92px; height: 92px; }
  .door-scene { grid-template-columns: minmax(0, 1fr) 44px auto; }
  .room .box { white-space: normal; }
  .room { padding: 36px 12px 16px; }
  .box { font-size: 13px; padding: 8px 10px; }
  .cta { margin-top: 72px; margin-bottom: 48px; }
  .cta-in { padding: 24px; }
  /* On a phone the header scrolls away with the page, so that it never covers the text. */
  .top { position: static; }
  section[id] { scroll-margin-top: 16px; }
  .event { align-items: flex-start; }
  .person { padding: 24px; }
}

/* The narrowest phones: the languages get their own row. */
@media (max-width: 400px) {
  .top-in { grid-template-areas: "brand theme pill" "menu menu menu" "langs langs langs"; }
  .langs { justify-self: start; margin-left: -6px; }
}

@media print {
  .top, .theme, .cta, .art { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- the scenes ----------
   Small pictures of the products at work. Each plays once when it comes into view
   (site.js adds .is-in); without html.motion they show their last frame at once.
   Only opacity and transforms move. */
.scene { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 22px; overflow: hidden; }
.scene-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font: 400 21px/1 'EB Garamond', Georgia, serif; }
.scene-bar .mark-svg { width: 18px; height: 18px; }

/* The assistant: a job to schedule, the assistant thinking, its answer with the job's steps, then the
   scheduled task, active. */
.chat { display: grid; gap: 12px; font-size: 15px; line-height: 1.5; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.msg.q { justify-self: end; background: var(--soft); border-color: transparent; }
.msg.typing { display: flex; gap: 5px; padding: 14px; width: max-content; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--field); }
/* Clerc's answer lists the steps of the job it scheduled; with motion, each one is ticked in turn. */
.run { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.run li { display: flex; align-items: center; gap: 9px; }
.run li::before { content: ''; flex: none; box-sizing: border-box; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.msg.wait { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 100%; font-size: 14px; }
.msg.wait b { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 13px; }
.chat .msg.typing { display: none; }
/* The dots and the answer share one place, so the window keeps its height while it plays. */
.chat .msg.typing, .chat .msg.a { grid-area: 3 / 1; }
.motion .chat .msg.typing { display: flex; }
@media screen { .play .chat:not(.is-in) .msg { opacity: 0; } }
.motion .chat.is-in .msg { animation: rise 0.45s ease-out both; }
.motion .chat.is-in .msg.q { animation-delay: 0.15s; }
.motion .chat.is-in .msg.typing { animation: rise 0.3s ease-out 0.75s both, gone 0.2s ease-in 2.1s forwards; }
.motion .chat.is-in .msg.typing i { animation: blink 0.9s ease-in-out 0.75s 2 both; }
.motion .chat.is-in .msg.typing i:nth-child(2) { animation-delay: 0.9s; }
.motion .chat.is-in .msg.typing i:nth-child(3) { animation-delay: 1.05s; }
.motion .chat.is-in .msg.a { animation-delay: 2.3s; }
.motion .chat.is-in .run li::before { animation: tick 0.35s ease-out both; }
.motion .chat.is-in .run li:nth-child(1)::before { animation-delay: 2.9s; }
.motion .chat.is-in .run li:nth-child(2)::before { animation-delay: 3.3s; }
.motion .chat.is-in .run li:nth-child(3)::before { animation-delay: 3.7s; }
.motion .chat.is-in .run li:nth-child(4)::before { animation-delay: 4.1s; }
.motion .chat.is-in .msg.wait { animation-delay: 4.6s; }
@keyframes tick { from { background: transparent; border-color: var(--field); } to { background: var(--ink); border-color: var(--ink); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gone { to { opacity: 0; transform: scale(0.9); } }
@keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* The made-to-measure card's diagram (Codex's option 1 of 2026-10-24, calmed): Clerc in a circle at
   the centre and a straight hairline spoke to each of the seven chips around it, clockwise from the
   top: the firm's software, then the everyday tools, then the devices and the private data. The
   mark is the only colour, with no shadow. Complete without script and without motion.

   Every position is a number in a custom property, in hundredths of the drawing's width
   (.connections-orbit is a container, so 1cqi is one hundredth of it), so each spoke ends under
   the centre of its chip at any width. A spoke is the ::before of its item: it starts at Clerc's
   centre, has the slot's length and is turned by the slot's angle; Clerc and the chip cover its
   two ends. */
.connections-box { container: connections / inline-size; display: flex; }
.connections-box > .connections { flex: 1; }
.connections {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  min-height: 0; padding: 18px 10px 16px; color: var(--ink);
}

/* The drawing: 100 wide and 80 high in its own units, Clerc at (50, 41.5), the chips on a circle
   of radius 35.4 around it. */
.connections-orbit {
  --cy: 41.5; --core: 104px;
  position: relative; isolation: isolate; container-type: inline-size;
  width: 100%; max-width: 454px; margin: 0 auto; aspect-ratio: 100 / 80;
}
.connections-item { position: absolute; inset: 0; }
.connections-item::before {
  content: ''; position: absolute; z-index: 1;
  left: 50cqi; top: calc(var(--cy) * 1cqi - 0.5px);
  width: calc(var(--len) * 1cqi); height: 1px; background: var(--field);
  transform-origin: 0 50%; transform: rotate(calc(var(--rot) * 1deg));
}

/* Clerc: the mark above its name, in a hairline circle of the surface colour. */
.connections-core {
  position: absolute; z-index: 3; left: 50cqi; top: calc(var(--cy) * 1cqi);
  width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--field); border-radius: 50%; background: var(--surface);
  font: 400 23px/1 'EB Garamond', Georgia, serif; letter-spacing: -0.01em; color: var(--ink);
}
.connections-core .mark-svg { width: 28px; height: 30px; }

/* A chip: its drawing and its name, on one line. Its width is its content's (max-content): a
   chip right of the centre would otherwise shrink to the room between its left edge, before the
   translate, and the drawing's right edge. */
.connections-tag {
  position: absolute; z-index: 2;
  left: calc((50 + var(--x)) * 1cqi); top: calc((var(--cy) + var(--y)) * 1cqi);
  transform: translate(-50%, -50%);
  width: max-content; display: flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 500 13px/1.25 var(--sans); color: var(--ink); white-space: nowrap; overflow-wrap: normal;
}
.connections-glyph {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.scene.connections .connections-legend {
  margin: 0; text-align: center; text-wrap: balance; color: var(--muted);
  font: 400 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* The seven slots around Clerc, every 360/7 degrees from the top, clockwise. --i is the order in
   which they appear with motion. */
.connections-business { --x: 0;      --y: -35.4;  --len: 35.4; --rot: -90;     --i: 0; }
.connections-other    { --x: 27.68;  --y: -22.07; --len: 35.4; --rot: -38.57;  --i: 1; }
.connections-accounts { --x: 34.51;  --y: 7.88;   --len: 35.4; --rot: 12.86;   --i: 2; }
.connections-agenda   { --x: 15.36;  --y: 31.89;  --len: 35.4; --rot: 64.29;   --i: 3; }
.connections-mail     { --x: -15.36; --y: 31.89;  --len: 35.4; --rot: 115.71;  --i: 4; }
.connections-devices  { --x: -34.51; --y: 7.88;   --len: 35.4; --rot: 167.14;  --i: 5; }
.connections-data     { --x: -27.68; --y: -22.07; --len: 35.4; --rot: -141.43; --i: 6; }

/* Narrow drawings (phones, and the two cards side by side on a small screen): the chips stack
   their drawing above their name, which may take two lines, and sit on an upright oval, with the
   two shortest names (e-mail and calendar) beside Clerc, the only place where the room is short.
   The drawing is 100 wide and 127 high, Clerc at (50, 69.2); the oval's half-axes are 35.65 and
   55.09. */
@container connections (max-width: 429px) {
  .connections { padding: 16px 8px 14px; gap: 10px; }
  .connections-orbit {
    --cy: 69.21; --core: 70px;
    max-width: 300px; aspect-ratio: 100 / 127.08;
  }
  .connections-core { gap: 4px; font-size: 16px; }
  .connections-core .mark-svg { width: 20px; height: 22px; }
  .connections-tag {
    flex-direction: column; gap: 4px; max-width: 86px; padding: 7px 6px 6px; border-radius: 13px;
    font-size: 12px; text-align: center; white-space: normal;
  }
  .connections-other .connections-tag { max-width: none; white-space: nowrap; }
  .connections-devices .connections-tag, .connections-accounts .connections-tag { max-width: 104px; }
  .connections-other    { --x: 0;      --y: -55.09; --len: 55.09; --rot: -90; }
  .connections-accounts { --x: 30.09;  --y: -29.54; --len: 42.16; --rot: -44.46; }
  .connections-agenda   { --x: 35.65;  --y: 0;      --len: 35.65; --rot: 0; }
  .connections-business { --x: 27.78;  --y: 34.53;  --len: 44.32; --rot: 51.18; }
  .connections-data     { --x: -27.78; --y: 34.53;  --len: 44.32; --rot: 128.82; }
  .connections-mail     { --x: -35.65; --y: 0;      --len: 35.65; --rot: 180; }
  .connections-devices  { --x: -30.09; --y: -29.54; --len: 42.16; --rot: -135.54; }
}

/* With motion (site.js adds .is-in once the drawing is in view): Clerc appears, the
   chips come in one after another, and each spoke is then drawn from Clerc to its chip, once the
   chip is opaque (a chip still fading in would show its spoke through it). Only opacity and
   transforms move. */
@media screen {
  .play .connections:not(.is-in) .connections-core,
  .play .connections:not(.is-in) .connections-tag,
  .play .connections:not(.is-in) .connections-item::before { opacity: 0; }
}
.motion .connections.is-in .connections-core { animation: connections-core 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.motion .connections.is-in .connections-tag { animation: connections-tag 0.35s ease-out both; animation-delay: calc(0.35s + var(--i) * 0.08s); }
.motion .connections.is-in .connections-item::before { animation: connections-spoke 0.4s ease-out both; animation-delay: calc(0.65s + var(--i) * 0.08s); }
@keyframes connections-core { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes connections-spoke {
  from { transform: rotate(calc(var(--rot) * 1deg)) scaleX(0); }
  to { transform: rotate(calc(var(--rot) * 1deg)) scaleX(1); }
}
@keyframes connections-tag {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}


/* The opening's one moment: the mark's two walls close in, and its arch rises between them. */
.motion .tile { animation: settle 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.motion .tile .mark-svg path:first-child { animation: band-a 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.motion .tile .mark-svg .mark-wall { animation: band-b 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.motion .tile .mark-svg path:last-child { animation: arch 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
.motion .tag { animation: rise 0.6s ease-out 1.2s both; }
@keyframes settle { from { opacity: 0; transform: rotate(-2deg) translateY(14px); } to { opacity: 1; transform: rotate(-8deg); } }
/* In the mark's own units: its drawing is 163 wide. */
@keyframes band-a { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes band-b { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes arch { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }