/* System Duo home: the masthead. Porcelain light, the name as the one large thing, and under it a field of blocks
   (assets/hero.js) that denoises into one dawn horizon: System One's ember terraces in four steps, System Two's
   dawn-blue ridge over thirty-six, interlocked under the actions, where the crest runs through the colours of "Duo"
   and a faint glow rises behind it. "fast" and "slow" catch the light as their sides resolve. The field thins out
   into the page's paper block by block, so the hero runs into "Try it" without an edge. */

/* Until Cormorant arrives, the serif lines are set in a Times-metric face scaled to Cormorant's widths and heights,
   so the swap moves nothing. */
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos"); size-adjust: 92.3%; ascent-override: 99.6%; descent-override: 31.4%; line-gap-override: 0%; }

.masthead { --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: max(660px, 100vh); min-height: max(660px, 100svh); background: var(--paper); }
.masthead::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(24% 16% at 50% 80%, rgba(214, 172, 228, .24), rgba(214, 172, 228, 0) 80%),
    radial-gradient(36% 20% at 18% 74%, rgba(255, 196, 168, .26), rgba(255, 196, 168, 0) 78%),
    radial-gradient(40% 22% at 80% 72%, rgba(178, 194, 246, .3), rgba(178, 194, 246, 0) 78%),
    linear-gradient(180deg, #fcfbf8 0%, #faf8f3 50%, #f8f4ec 82%, var(--paper) 100%); }
/* The field's canvas is sized by hero.js to whole blocks and scaled up without smoothing; hero.js keeps the part above
   the actions empty. */
.mh-field { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 60svh; overflow: hidden; pointer-events: none; }
.mh-field canvas { position: absolute; left: 0; bottom: 0; display: none; image-rendering: pixelated; }
.mh-field.on canvas { display: block; }
.mh-in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; padding: calc(var(--nav-h) + clamp(20px, 3.5vh, 44px)) 0 clamp(220px, 34svh, 380px); text-align: center; }

/* The name: Cormorant at display size, on one line; "Duo" in italic, from System One's ember into System Two's indigo. */
.mh-title { font: 500 clamp(84px, 12.6vw, 190px)/.84 var(--serif); letter-spacing: -.034em; color: var(--ink); white-space: nowrap; }
.mh-title .duo { font-style: italic; padding-right: .04em; color: #7a3a5e; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mh-title .duo { background: linear-gradient(100deg, #c03d1c 6%, #b23f62 34%, #6e4cc4 64%, #3a56a8 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* "fast" and "slow" in their systems' colours. As the field resolves, each catches the light once: a soft band crosses
   the word, clipped to it and screened over the porcelain, in a blink for "fast" and over seconds for "slow". */
.mh-slogan { margin-top: clamp(22px, 3.4vh, 34px); font: 500 clamp(30px, 3.3vw, 48px)/1.1 var(--serif); letter-spacing: -.012em; color: #2a2f3a; text-wrap: balance; }
.mh-slogan em { position: relative; display: inline-block; padding: 0 .1em; margin: 0 -.1em; font-style: italic; clip-path: inset(-.25em 0); }
.mh-slogan .fast { color: var(--ember-text); }
.mh-slogan .slow { color: #34509a; }
.mh-slogan em::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0)); mix-blend-mode: screen; transform: translateX(-100%); }
.mh-go .mh-slogan .fast::after { animation: mh-glint .45s cubic-bezier(.3, 0, .2, 1) .55s both; }
.mh-go .mh-slogan .slow::after { animation: mh-glint 3.3s cubic-bezier(.45, 0, .35, 1) .45s both; }
@keyframes mh-glint { from { transform: translateX(-100%); } to { transform: translateX(150%); } }
.mh-lede { margin-top: 14px; max-width: 34em; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.5; letter-spacing: -.014em; color: var(--ink-2); text-wrap: balance; }

/* Two actions of one height: the key, with the pixel key of the site's icons; DeepSeek Harness, with its mark. */
.masthead .key { margin-top: clamp(30px, 4.6vh, 44px); }
.masthead .key-form { gap: 14px; }
.mh-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.masthead .btn-label { display: inline-flex; align-items: center; gap: 11px; }
.btn-px { flex: none; width: 20px; height: 20px; }
.btn-alt { display: inline-flex; align-items: center; justify-content: center; gap: 11px; height: 56px; padding: 0 28px 0 22px; border-radius: 999px; background: rgba(255, 253, 249, .8); box-shadow: inset 0 0 0 1px var(--hair-2), 0 6px 20px rgba(40, 32, 20, .06); color: var(--ink); font: 500 17px/1 var(--sans); letter-spacing: -.012em; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, box-shadow .25s, transform .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn-alt img { flex: none; width: 22px; height: 22px; }
.btn-alt:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .26), 0 10px 26px rgba(40, 32, 20, .1); }
.btn-alt:active { transform: scale(.98); }
.masthead .consent { color: var(--muted); }

/* The intro: the name is there from the first paint; the lines under it rise. */
.mh-in > :not(.mh-title) { animation: mh-rise 1.1s var(--ease) both; }
.mh-slogan { animation-delay: .15s; }
.mh-lede { animation-delay: .25s; }
.masthead .key { animation-delay: .35s; }
@keyframes mh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .mh-in { padding: calc(var(--nav-h) + 36px) 0 clamp(190px, 28svh, 240px); }
  .mh-title { font-size: clamp(56px, 19vw, 88px); }
  .mh-slogan { font-size: clamp(27px, 7.6vw, 32px); }
  .mh-lede { max-width: 17em; font-size: 16.5px; }
  .mh-field { height: 50svh; }
  .mh-actions { flex-direction: column; }
  .btn-alt { min-width: 15rem; height: 54px; }
}
@media (min-width: 1800px) {
  .mh-title { font-size: clamp(190px, 9.8vw, 224px); }
  .mh-slogan { font-size: clamp(48px, 2.5vw, 56px); }
  .btn-alt { height: 60px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-in > :not(.mh-title), .mh-slogan em::after { animation: none; }
}