/* Conomium, site.css (builder on Claude Fable 5.1, 2026-11-08). The system: the V1 tokens of DUST-VARIATIONS.md in light and
   dark, Newsreader for the statements, Host Grotesk for the body and the wordmark, JetBrains Mono for the small labels and
   the chat card's metadata. One file, no script. */

@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url(/assets/fonts/host-grotesk-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --ground:#F7F3EA; --ink:#1A1A1A; --ink2:#5B554C;
  --card:#1F3A68; --station:#0E7C7B; --done:#B86E00;
  --action:#0E7C7B; --on-action:#F7F3EA;
  --tint:#E6E0D3; --surface:#FFFDF8; --paper:#F7F3EA;
  --line:rgba(26,26,26,.12); --line-strong:rgba(26,26,26,.48);
  --shadow:0 22px 44px -18px rgba(20,16,10,.30),0 2px 6px rgba(20,16,10,.06);
  --plate-shadow:none;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Host Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:16px; --max:1184px;
  --r-plate:20px; --r-card:18px; --r-ctl:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#1C2126; --ink:#EDE6D8; --ink2:#A8A196;
    --card:#7FA2E0; --station:#2BB3B1; --done:#E9A23B;
    --action:#2BB3B1; --on-action:#1C2126;
    --tint:#2A3037; --surface:#242A30;
    --line:rgba(237,230,216,.14); --line-strong:rgba(237,230,216,.38);
    --shadow:0 22px 44px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);
    --plate-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  }
}
@media (min-width:640px){:root{--gutter:32px}}
@media (min-width:1100px){:root{--gutter:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
main{flex:1 0 auto}
.masthead,.colophon{flex:none}
header.masthead{width:min(100% - 2*var(--gutter),var(--max))}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--action);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:color-mix(in srgb,var(--action) 55%,transparent)}
a:hover{color:var(--ink);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:3px}

.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip{position:absolute;left:var(--gutter);top:-200px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--ground);border-radius:8px;font-weight:500;text-decoration:none}
.skip:focus-visible{top:12px;outline-color:var(--ink)}

/* the header: the V1 mark with the wordmark (W2 without the card) at the left, the endorsement at the right */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
@media (min-width:1000px){.masthead{height:84px}}
.lockup{display:inline-flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.lockup:hover{color:var(--ink)}
.lockup img{width:24px;height:24px}
.lockup .word{font:500 25px/1 var(--sans);letter-spacing:-.01em;padding-bottom:2px}
.head-right{display:flex;align-items:center;gap:28px}
.head-cta{display:none;font-weight:500;text-decoration:none;color:var(--ink)}
.head-cta:hover{color:var(--action)}
@media (min-width:1000px){.head-cta{display:inline}}
.endorse{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1;color:var(--ink2);white-space:nowrap}
.endorse img{width:22px;height:22px}
.lang{font-size:14px;color:var(--ink2);text-decoration:none}
.lang:hover{color:var(--ink)}

/* the first screen */
.hero{padding:28px 0 56px}
@media (min-width:1000px){.hero{padding:48px 0 96px}}
.hero-grid{display:grid;gap:40px}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,43.75vw) minmax(0,1fr);gap:48px;align-items:start}}
@media (min-width:1600px){.hero-grid{grid-template-columns:minmax(0,700px) minmax(0,1fr)}}
.statement{font:300 clamp(42px,6.1vw,96px)/1.02 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.017em;color:var(--ink);text-wrap:balance}
html[lang="es"] .hero .statement{font-size:clamp(40px,5.5vw,88px)} /* the Spanish statement is longer: six lines at 1280 */
.lede{margin-top:22px;font-size:19px;line-height:1.5;color:var(--ink2);max-width:30em}
@media (min-width:1000px){.lede{margin-top:26px}}
.hero .btn{margin-top:28px}
.hero-art{position:relative;padding-top:132px;max-width:640px}
@media (min-width:1000px){.hero-art{padding-top:150px;max-width:none}}
.chat{position:absolute;top:0;left:16px;width:min(376px,calc(100% - 16px));z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card) var(--r-card) var(--r-card) 0;padding:15px 18px 16px;box-shadow:var(--shadow)}
@media (min-width:1000px){.chat{left:24px}}
.who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.who .name{font-weight:600;font-size:15px;color:var(--ink)}
.who .meta{font:400 11.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink2)}
.turns{display:grid;gap:10px}
.turns li{display:grid;grid-template-columns:16px 1fr auto;column-gap:11px;align-items:start;font-size:14.5px;line-height:1.42;color:var(--ink)}
.turns svg{width:15px;height:15px;margin-top:3px;overflow:visible}
.turns .say{min-width:0}
.chip{align-self:center;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:5px 7px 4px;border-radius:5px 5px 5px 0;background:var(--action);color:var(--on-action)}
/* the one motion: the card's lines arrive once, from a soft start so an early frame still reads */
@keyframes turn-in{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
.turns li{animation:turn-in .4s cubic-bezier(.2,.7,.2,1) both}
.turns li:nth-child(1){animation-delay:.1s}
.turns li:nth-child(2){animation-delay:.3s}
.turns li:nth-child(3){animation-delay:.5s}
@media (prefers-reduced-motion:reduce){.turns li{animation:none}}

/* the primitives in colour: the card, the station, the done job */
.g-card{fill:var(--card)}.g-st{fill:var(--station)}.g-done{fill:var(--done)}.g-tint{fill:var(--tint)}.g-surface{fill:var(--surface)}.g-ink{fill:var(--ink)}

/* the pictures: paper plates; on paper the plate is invisible and the objects sit on the page, on slate it shows as a print */
.plate{position:relative;border-radius:var(--r-plate);overflow:hidden;background:var(--paper);box-shadow:var(--plate-shadow)}
.plate img{width:100%;height:auto}
.hero .plate img{transform:scale(1.3);transform-origin:50% 48%}
@media (prefers-color-scheme:dark){.plate img{filter:brightness(.93)}}
.plate.sq{aspect-ratio:1}
.plate.sq img{height:100%;object-fit:cover}

/* buttons and controls */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border:0;border-radius:var(--r-ctl);background:var(--action);color:var(--on-action);font:500 17px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* sections */
.sec{padding:64px 0;border-top:1px solid var(--line)}
@media (min-width:1000px){.sec{padding:96px 0}}
.label{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--action)}
.label svg{width:10px;height:10px;overflow:visible}
.h{margin-top:18px;font:300 clamp(30px,3.3vw,44px)/1.12 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.012em;color:var(--ink);max-width:22em;text-wrap:balance}
.sec-head{display:grid;gap:8px;margin-bottom:40px}
@media (min-width:1000px){.sec-head{margin-bottom:56px}}

/* the proof: three engines */
.engines{display:grid;gap:40px}
@media (min-width:700px){.engines{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (min-width:1000px){.engines{gap:32px}}
.engine-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px}
.engine-head h3{font:600 22px/1.2 var(--sans);letter-spacing:-.005em}
.status{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--action);white-space:nowrap}
.status svg{width:10px;height:10px;overflow:visible}
.engine .what{margin-top:10px;color:var(--ink2)}
.runs{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid var(--line)}
.runs dt{font:500 11px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.runs dd{font-size:16px;line-height:1.5;color:var(--ink)}

/* how an engine works: the flow drawn in the V1 grammar, then four lines with their pictures */
.flow{margin:0 0 40px;width:100%;height:auto;overflow:visible}
@media (min-width:1000px){.flow{margin-bottom:56px}}
.steps{display:grid;gap:32px}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
@media (min-width:700px){.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step .num{display:block;margin-top:18px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink2)}
.step p{margin-top:10px;color:var(--ink)}
.step p strong{font-weight:600}

/* the SwitchAPI band */
.band{background:var(--tint);border-radius:var(--r-plate);padding:32px 24px;display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between}
@media (min-width:1000px){.band{padding:44px 48px}}
.band p{font:300 clamp(22px,2.2vw,30px)/1.25 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.008em;max-width:26em;text-wrap:balance}
.door{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--mono);letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.door svg{width:18px;height:18px;transition:transform .15s ease}
.door:hover{color:var(--ink)}
.door:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.door svg{transition:none}.door:hover svg{transform:none}}

/* contact */
.contact-grid{display:grid;gap:40px}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.contact-aside p{color:var(--ink2);margin-top:18px;max-width:26em}
.mailbox{display:inline-block;margin-top:14px;font:500 16px/1.4 var(--mono);color:var(--ink);user-select:all;-webkit-user-select:all}
.form{display:grid;gap:18px}
@media (min-width:640px){.form{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 20px}}
.field{display:grid;gap:7px}
.field.wide,.consent,.actions{grid-column:1 / -1}
.field label,.consent label{font-size:15px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:400 17px/1.4 var(--sans);transition:border-color .15s ease}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%235B554C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
@media (prefers-color-scheme:dark){.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23A8A196' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink2)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--action)}
.consent label{font-weight:400;font-size:15px;line-height:1.5;color:var(--ink2)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.actions{display:flex;align-items:center;gap:20px;margin-top:4px}

/* footer */
.colophon{border-top:1px solid var(--line);padding:40px 0 56px;font-size:14px;color:var(--ink2)}
.colophon-grid{display:grid;gap:24px}
@media (min-width:900px){.colophon-grid{grid-template-columns:auto 1fr auto;align-items:center;gap:40px}}
.c-endorse{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.c-endorse img{width:24px;height:24px}
.c-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
@media (min-width:900px){.c-legal{justify-content:center}}
.c-legal a,.c-base a{color:var(--ink2);text-decoration:none}
.c-legal a:hover,.c-base a:hover{color:var(--ink);text-decoration:underline}
.c-base{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}

/* the small pages */
.small{padding:48px 0 120px;min-height:50vh}
@media (min-width:1000px){.small{padding:80px 0 160px}}
.small .statement{font-size:clamp(40px,5vw,72px);max-width:12em}
.small .lede{margin-top:24px}
.small .more{margin-top:28px}
.small .more a{font-weight:500}

@media print{.skip,.head-cta{display:none}}

/* fold of the Opus read 2026-11-09, H1: the two marks never shrink; under 430 the endorsement wraps instead */
.lockup,.lockup picture,.endorse picture{flex:none}
.head-right{min-width:0}
@media (max-width:429px){.endorse{white-space:normal;text-align:right;line-height:1.25}}