/* Fiste AI: the one stylesheet of the site. Paper, ink, and the blue of the bird in the logo. Colour is flat: no
   gradients and no shadows, and a box only where it holds something. The logo is the one place with more colour.
   There are two sets of colours, light and dark. The page says which one in data-theme on the html element. */

:root {
  --paper: #FFFFFF; --paper-2: #F4F5F7; --rule: #E2E5EA; --line: #C4C9D2; --edge: #8891A2;
  --ink: #1B2333; --ink-2: #4A5265; --ink-3: #626B7E;
  --brand: #1F4FC4; --brand-soft: #EEF2FD;
  --rock: #1B2333; --snow: #A9B8CA;         /* the mountains: as in the logo for this ground */
  --on-brand: #FFFFFF;                      /* text on the brand colour */
  --block: #1B2333; --block-edge: #1B2333;  /* the dark block that holds commands */
  color-scheme: light;
  --sans: "Figtree", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --deva-sans: "Noto Sans Devanagari", "Mukta", sans-serif;
  --deva-serif: "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --range: 150px;
}
:root[data-theme="dark"] {
  --paper: #0F1217; --paper-2: #181C24; --rule: #272D38; --line: #3D4553; --edge: #5E6778;
  --ink: #EEF1F6; --ink-2: #B8BFCB; --ink-3: #8E97A6;
  --brand: #6C9BFF; --brand-soft: #172340;
  --rock: #8FA3C2; --snow: #FFFFFF;
  --on-brand: #0F1217;
  --block: #181C24; --block-edge: #272D38;
  color-scheme: dark;
}
/* the logo has a drawing for each ground: only the one for this theme is shown */
:root:not([data-theme="dark"]) .on-dark, :root[data-theme="dark"] .on-light { display: none; }

*, *::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(--ink); font: 400 20px/1.6 var(--serif);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:lang(ne) { font-family: var(--deva-serif); }
a { color: inherit; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--brand); color: var(--on-brand); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 10px 16px; border-radius: 6px; background: var(--ink);
        color: var(--paper); font: 600 15px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; color: var(--paper); }

/* ---------------------------------------------------------------- top bar */
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; font: 500 15px/1 var(--sans); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 18px/1 var(--sans);
         white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand img { display: block; height: 32px; width: auto; }
.top nav { display: flex; align-items: center; gap: 4px; }
.top nav a { padding: 10px 12px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 7px; }
.top nav a.cta { margin-left: 6px; padding: 11px 16px; border-radius: 6px; background: var(--ink); color: var(--paper); font-weight: 600;
                 transition: background .15s; }
.top nav a.cta:hover { background: var(--brand); color: var(--on-brand); }
/* the switch between the light and the dark theme; site.js shows it */
.theme { display: grid; place-items: center; width: 38px; height: 38px; margin-left: 6px; padding: 0; border: 0; border-radius: 6px;
         background: none; color: var(--ink-2); cursor: pointer; }
.theme[hidden] { display: none; }
.theme:hover { background: var(--paper-2); color: var(--ink); }
.theme svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rock); }
.hero > .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px;
                align-items: center; padding-top: 72px; padding-bottom: calc(var(--range) + 56px); }
.hero > .wrap.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.hero > .wrap.contact { align-items: start; row-gap: 0; grid-template-rows: auto 1fr; }
.contact .form-card { grid-column: 2; grid-row: 1 / span 2; }
.contact .facts { grid-column: 1; grid-row: 2; }
/* a hero without the skyline ends in a hairline, not in the ground the mountains stand on */
.hero.bare { --range: 16px; border-bottom-color: var(--rule); }
.kicker { margin: 0 0 22px; font: 600 13px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kicker b { color: var(--ink); font-weight: 700; }
.hero h1 { margin: 0; font: 700 clamp(64px, 10.4vw, 132px)/1.3 var(--deva-sans); letter-spacing: -.01em; color: var(--brand); }
.hero h1 small { display: block; margin-top: 2px; font: 600 clamp(22px, 2.7vw, 30px)/1.25 var(--sans); letter-spacing: 0; color: var(--ink); }
.hero h1.plain { font: 700 clamp(38px, 5.2vw, 60px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.hero h1.plain small { margin-top: 16px; font-size: clamp(20px, 2.2vw, 25px); font-weight: 500; line-height: 1.35; color: var(--ink-2); }
.lede { margin: 24px 0 0; max-width: 36ch; font-size: 22px; line-height: 1.5; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.hero-art { justify-self: end; width: min(100%, 400px); }
.hero-art img { display: block; width: 100%; height: auto; }

/* The Himalaya drawn as a waveform, in the rock and snow of the logo. It is used once on a page: in the hero of the
   home page and of the two model pages. site.js makes the bars; without scripts this plain skyline stands in. A slow
   ripple runs along the range and every bar flutters a little on top of it. */
.range { --bar: 8px; --gap: 6px; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: var(--range); display: flex;
         align-items: flex-end; justify-content: center; gap: var(--gap); overflow: hidden; pointer-events: none;
         transform-origin: 50% 100%; animation: lift 1.1s cubic-bezier(.2, .8, .25, 1) both; }
.range:empty { background: repeating-linear-gradient(90deg, var(--rock) 0 8px, transparent 8px 14px);
               clip-path: polygon(0 100%, 0 76%, 6% 62%, 12% 80%, 19% 44%, 26% 74%, 33% 58%, 40% 78%, 47% 30%, 55% 66%, 64% 4%, 73% 62%, 79% 40%, 86% 76%, 92% 60%, 100% 82%, 100% 100%); }
.range i { flex: 0 0 var(--bar); height: calc(var(--h) * 1%); border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
           background: linear-gradient(to top, var(--rock) calc(100% - var(--cap)), var(--snow) calc(100% - var(--cap)));
           animation: ripple 3.6s ease-in-out infinite, flutter var(--d) ease-in-out infinite alternate;
           animation-delay: calc(var(--i) * 75ms - 30s), calc(var(--i) * -137ms); }
.range.live i { animation: beat var(--d) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -41ms); }
.range.resting i { animation-play-state: paused; }
.range.still, .range.still i { animation: none; }
@keyframes lift { from { transform: scaleY(0); } }
@keyframes ripple { 50% { transform: scaleY(var(--dip)); } }
@keyframes flutter { to { scale: 1 .93; } }
@keyframes beat { from { transform: scaleY(.6); } to { transform: scaleY(1.05); } }

/* ---------------------------------------------------------------- one button, and a link for everything else */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border: 0; border-radius: 6px;
       background: var(--ink); color: var(--paper); font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
       transition: background .15s; }
.btn:hover { background: var(--brand); color: var(--on-brand); }
.more { font: 600 16px/1.3 var(--sans); }
.btn span, .more span { display: inline-block; transition: transform .15s; }
.btn:hover span, .more:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------- the box beside a hero: figures, or samples */
.plate { margin: 0; padding: 26px 28px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
         font: 500 16px/1.6 var(--sans); color: var(--ink-2); }
.state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; font: 700 13px/1.3 var(--sans); letter-spacing: .1em;
         text-transform: uppercase; color: var(--ink); }
.state em { margin-left: auto; font-style: normal; color: var(--ink-3); }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.dot.open { background: none; box-shadow: inset 0 0 0 2px var(--brand); }
.dot.beat { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; }
.glance div { margin: 0; }
.glance dt { font: 700 clamp(44px, 5vw, 60px)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.glance dd { margin: 10px 0 0; font: 500 14px/1.45 var(--sans); color: var(--ink-3); }
.plate .fine { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------- sections */
.section { padding: 80px 0 0; }
.label { position: relative; margin: 0 0 30px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
         font: 700 14px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.label::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background: var(--brand); }
.note { max-width: 78ch; margin: 0 0 18px; font: 400 16px/1.6 var(--sans); color: var(--ink-2); }

/* the models on the home page: one row each, name, what it does, where it stands */
.entry { display: grid; grid-template-columns: 270px minmax(0, 1fr) 210px; gap: 8px 40px; align-items: start; padding: 6px 0 34px;
         border-bottom: 1px solid var(--rule); }
.entry + .entry { padding-top: 36px; }
.entry .word { margin: -10px 0 0; font: 700 clamp(56px, 6.2vw, 80px)/1.3 var(--deva-sans); letter-spacing: -.01em; color: var(--brand); }
.entry h3 { margin: 0 0 4px; font: 700 26px/1.2 var(--sans); letter-spacing: -.01em; }
.kind { margin: 0 0 14px; font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.entry .what { margin: 0; max-width: 44ch; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 6px; }
.status { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font: 700 12px/1.4 var(--sans); letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink); }

/* one sentence, said by one model and written down by the other */
.duet { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--rule); border-radius: 10px; }
.duet > .track, .duet > .heard { padding: 26px 28px 28px; }
.duet > .track { align-items: start; border-bottom: 0; }
.duet > .heard { border-left: 1px solid var(--rule); }
.duet .bar { left: 28px; right: 28px; bottom: 0; }
.who { margin: 0 0 8px; font: 700 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.heard p { margin: 0; }
.heard .who, .track-text .who { margin-bottom: 8px; }

/* the plain ask at the end of a page */
.big { max-width: 30ch; margin: 0 0 28px; font: 400 clamp(26px, 3.3vw, 38px)/1.28 var(--serif); letter-spacing: -.01em; }

/* benchmark table */
.scroll { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--rule); border-radius: 10px; }
table.scores { width: 100%; border-collapse: collapse; font: 500 15px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
table.scores th, table.scores td { padding: 13px 16px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
table.scores tbody tr:last-child th, table.scores tbody tr:last-child td { border-bottom: 0; }
table.scores thead th { vertical-align: bottom; white-space: normal; background: var(--paper-2); color: var(--ink-2);
                        font: 700 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
table.scores th[scope="row"], table.scores thead th:first-child { min-width: 200px; text-align: left; white-space: normal; font-weight: 600; }
table.scores th[scope="row"] a { text-decoration-thickness: 1px; }
table.scores tr.ours { background: var(--brand-soft); }
table.scores tr.ours th[scope="row"] { box-shadow: inset 3px 0 0 var(--brand); font-weight: 700; }
table.scores b { color: var(--brand); font-weight: 700; }
/* the mean of each system as a bar: shorter is better */
table.scores td.mean { position: relative; min-width: 150px; }
table.scores td.mean::before { content: ""; position: absolute; left: 16px; top: 50%; width: calc(var(--v) * 1.45px); height: 6px; margin-top: -3px;
                               background: var(--line); }
table.scores tr.ours td.mean::before { background: var(--brand); }

/* the commands */
.term { margin: 0 0 22px; overflow: hidden; border: 1px solid var(--block-edge); border-radius: 10px; background: var(--block); }
.term-bar { display: flex; align-items: center; padding: 10px 14px 10px 22px; border-bottom: 1px solid rgba(255, 255, 255, .16);
            font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #B9C0CE; }
.copy { margin-left: auto; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; background: none;
        color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s; }
.copy:hover { border-color: #fff; }
pre { margin: 0; padding: 20px 22px; overflow-x: auto; color: #E9ECF2; font: 14px/1.75 var(--mono); }
code { padding: 1px 5px; border-radius: 4px; background: var(--paper-2); font: .86em var(--mono); }
pre code { padding: 0; background: none; font-size: 1em; }

/* samples: a sentence to play */
.tracks { list-style: none; margin: 0; padding: 0; }
.track { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0;
         border-bottom: 1px solid var(--rule); }
.track:last-child { border-bottom: 0; }
.play { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%;
        background: var(--paper); color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.play:hover { border-color: var(--brand); color: var(--brand); }
.play[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.play svg { width: 18px; height: 18px; fill: currentColor; }
.play .i-pause, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: block; }
.track-text p { margin: 0; }
.ne { font: 500 17px/1.55 var(--deva-sans); color: var(--ink); }
.en { margin-top: 3px; font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.heard .en, .track-text .en { margin-top: 3px; }
.time { font: 600 13px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.duet .time { padding-top: 4px; }
.bar { position: absolute; left: 56px; right: 0; bottom: -1px; height: 2px; }
.bar span { display: block; width: 0; height: 100%; background: var(--brand); }

/* short lists: what we are working on, what we can help with */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin: -24px 0 0; padding: 0; list-style: none; counter-reset: n; }
.tile { padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.tile h3 { margin: 0 0 6px; font: 700 21px/1.3 var(--sans); letter-spacing: -.01em; }
.tile h3 span { margin-left: 10px; font: 500 17px/1.3 var(--deva-sans); color: var(--ink-3); }
.tile p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
ol.grid .tile { counter-increment: n; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-content: start; }
ol.grid .tile::before { content: counter(n, decimal-leading-zero); grid-row: 1 / span 2; font: 700 14px/27px var(--sans); letter-spacing: .06em;
                        color: var(--brand); }

/* contact form */
.form-card { padding: 28px 30px 26px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); font-family: var(--sans); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin: 0 0 16px; }
.field label { display: block; margin: 0 0 7px; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field .opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.field input, .field select, .field textarea { display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 6px;
        background: var(--paper); color: var(--ink); font: 500 16px/1.4 var(--sans); transition: border-color .15s; }
.field textarea { min-height: 132px; resize: vertical; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 4px; font-size: 17px; }
.form-card .btn[disabled] { opacity: .6; cursor: progress; }
.status-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--brand-soft);
               font: 500 15px/1.5 var(--sans); }
.fineprint { margin: 14px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-3); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 40px 0 0; font: 500 15px/1.55 var(--sans); color: var(--ink-2); }
.facts div { margin: 0; }
.facts dt { margin: 0 0 6px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------- footer: one line */
.foot { margin-top: 96px; border-top: 1px solid var(--rule); font: 500 15px/1.6 var(--sans); color: var(--ink-3); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; padding-top: 26px; padding-bottom: 40px; }
.foot p { margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--brand); }

/* ---------------------------------------------------------------- page not found */
.lost { min-height: calc(100vh - 69px); display: grid; border-bottom: 0; }
.lost > .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; text-align: center; align-content: center; padding-bottom: 96px; }
.lost img { width: 190px; height: auto; margin-bottom: 26px; }
.lost .lede { max-width: 40ch; margin-top: 18px; }
.lost .actions { justify-content: center; }

@media (max-width: 900px) {
  :root { --range: 104px; }
  .range { --bar: 5px; --gap: 4px; }
  body { font-size: 18px; }
  .wrap { padding: 0 22px; }
  .top nav a:not(.keep) { display: none; }
  .hero > .wrap, .hero > .wrap.even, .hero > .wrap.contact { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px;
                                                              padding-bottom: calc(var(--range) + 40px); }
  .contact .form-card, .contact .facts { grid-column: auto; grid-row: auto; }
  .contact .facts { margin-top: 0; }
  .hero-art { display: none; }
  .lede { font-size: 20px; }
  .section { padding-top: 60px; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry .word { margin: 0 0 2px; }
  .meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 20px; }
  .status { flex-basis: 100%; margin: 0; }
  .duet, .grid { grid-template-columns: minmax(0, 1fr); }
  .duet > .heard { border-left: 0; border-top: 1px solid var(--rule); }
  .duet > .track, .duet > .heard { padding: 22px 20px 24px; }
  .duet .bar { left: 20px; right: 20px; }
  .plate, .form-card { padding: 22px 20px; }
  .foot { margin-top: 72px; }
}
@media (max-width: 520px) {
  .row2, .facts { grid-template-columns: minmax(0, 1fr); }
  .glance { gap: 18px; }
  .top nav a.cta { padding: 10px 13px; }
}
@media (max-width: 400px) {
  .top .wrap { gap: 8px; }
  .brand { gap: 8px; font-size: 17px; }
  .theme, .top nav a.cta { margin-left: 2px; }
  .top nav a.cta { padding: 10px 11px; }
}
@media (max-width: 359px) {
  .wrap { padding: 0 18px; }
  .brand { gap: 0; font-size: 0; }  /* the mark alone: the name does not fit beside the button */
}
@media print {
  .top { position: static; }
  .range { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}