/* The Strataworks landing page, built in Prism. Components come from prism.css; this file is layout and the page's own parts. */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--ground); color-scheme: dark; scroll-padding-top: 96px; scrollbar-color: var(--hairline) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/24px var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--ink); color: var(--ground); }
input, textarea { caret-color: var(--ink); }
img { display: block; }
p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis { scroll-behavior: auto; } /* Lenis does the smoothing when it is running */

/* Type styles */
.display { margin: 0; font: 600 clamp(34px, 9vw, 64px)/.95 var(--font-sans); letter-spacing: -.02em; text-wrap: balance; }
.title { margin: 0; font: 600 28px/1.15 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
.lead { font: 400 20px/28px var(--font-sans); color: var(--muted); text-wrap: pretty; }
.small { font: 400 13px/18px var(--font-sans); color: var(--muted); }
.label { font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; background: var(--ground); }
.skip:focus { top: var(--space-3); }

/* The light: fixed, behind the words, above the hero's own field. */
.light { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: 1; pointer-events: none; }
.no-light .light { display: none; }

.site-nav { position: sticky; top: 0; z-index: 10; }
.prism-nav__brand img { height: 36px; width: auto; }
.nav-narrow { display: none; }

/* Hero */
.hero__top { position: relative; }
.hero__field { position: relative; display: grid; place-items: center; height: clamp(440px, calc(100svh - 64px - 148px), 780px); padding: 0 var(--space-4); text-align: center; }
.hero__field h1 { position: relative; z-index: 2; }
/* The headline sits on the waist of the light; the rest sits at the foot of the field, where the centre is dark. */
.hero__below { position: absolute; z-index: 2; bottom: var(--space-8); left: 50%; width: min(440px, calc(100vw - 2 * var(--space-4))); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.hero__below .lead { color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

.claims { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--hairline); }
.claims li { padding: var(--space-8); font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; }
.claims strong { display: block; font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; }
.claims span { display: block; margin-top: var(--space-1); color: var(--muted); font: 400 16px/24px var(--font-sans); letter-spacing: 0; }
.claims li + li { border-left: 1px solid var(--hairline); }

/* A chapter: words on the left, the stage the light draws in on the right. */
.chapter, .plain, .contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); max-width: 1280px; margin: 0 auto; padding: calc(var(--space-16) + var(--space-8)) var(--space-8) var(--space-16); }
.chapter { min-height: 100svh; }
.chapter__text, .plain__head, .contact__head, .steps, .limits, .form { position: relative; z-index: 2; }
.chapter__text > .lead, .plain__head > .lead, .contact__head > .lead { margin-top: var(--space-6); max-width: 46ch; }
.chapter__text > p:not([class]) { margin-top: var(--space-6); color: var(--muted); max-width: 52ch; }

/* z-index: a sticky box is its own stacking context, and its tags must sit above the light. */
.stage { position: sticky; z-index: 2; top: calc(64px + var(--space-8)); align-self: start; height: min(calc(100svh - 64px - 2 * var(--space-8)), 720px); }
.no-light .stage { display: none; }
/* The page a missing address gets. */
.missing { display: grid; gap: var(--space-6); justify-items: start; max-width: 720px; margin: 0 auto; padding: var(--space-16) var(--space-4); }
.no-light .chapter { grid-template-columns: minmax(0, 720px); min-height: 0; }
.tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 0 var(--space-2) 0 0; background: var(--ground); color: var(--muted); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform; transition: color .2s ease-out; }
.tag::before { content: ""; display: inline-block; width: var(--space-4); height: 1px; margin-right: var(--space-2); background: currentColor; vertical-align: middle; }
.tag--left { padding: 0 0 0 var(--space-2); }
.tag--left::before { display: none; }
.tag--left::after { content: ""; display: inline-block; width: var(--space-4); height: 1px; margin-left: var(--space-2); background: currentColor; vertical-align: middle; }
.tag[data-on] { color: var(--ink); }
.stage__note { position: absolute; right: 0; bottom: 0; }

/* Software: the layers */
.layers { margin-top: var(--space-8); }
.layer { border-bottom: 1px solid var(--hairline); }
.layer:first-child { border-top: 1px solid var(--hairline); }
.layer summary { display: grid; grid-template-columns: var(--space-8) 1fr 12px; align-items: center; column-gap: var(--space-4); padding: var(--space-6) 0; cursor: pointer; list-style: none; }
.layer summary::-webkit-details-marker { display: none; }
.layer summary::after { content: ""; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 12px no-repeat; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.layer[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 12px 1px no-repeat; transform: rotate(180deg); }
.layer summary:focus-visible { outline: 2px solid var(--prism); outline-offset: 2px; }
.layer__n { color: var(--muted); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; }
.layer__t { color: var(--muted); font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; transition: color .2s ease-out; }
.layer[open] .layer__t, .layer summary:hover .layer__t { color: var(--ink); }
.layer__body { display: grid; gap: var(--space-3); max-width: 56ch; padding: 0 0 var(--space-8) calc(var(--space-8) + var(--space-4)); color: var(--muted); }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); margin: var(--space-2) 0; }
.areas dt { color: var(--ink); font-weight: 600; }
.areas dd { margin: 0; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .layers { interpolate-size: allow-keywords; }
    .layer::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.16, 1, .3, 1), content-visibility .4s allow-discrete; }
    .layer[open]::details-content { block-size: auto; }
  }
}

/* Hardware: the two systems and the switch */
.models { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-8); }
.models__opt { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--muted); border-radius: var(--radius-0); background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color .12s ease-out, border-color .12s ease-out, background-color .12s ease-out; }
.models__opt + .models__opt { margin-left: -1px; }
.models__opt:hover { color: var(--ink); }
.models__opt[aria-pressed="true"] { position: relative; border-color: var(--ink); background: var(--surface); color: var(--ink); }
.models__opt:focus-visible { position: relative; outline: 2px solid var(--prism); outline-offset: 2px; }
.models__name { font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.spec { min-height: 56px; margin-top: var(--space-4); font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; max-width: 34ch; }

.power { display: grid; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--hairline); max-width: 52ch; }
.switch { display: inline-flex; align-items: center; justify-self: start; gap: var(--space-3); min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.switch__track { position: relative; width: 56px; height: 28px; border: 1px solid var(--ink); transition: border-color .18s ease-out; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--ink); transform: translateX(28px); transition: transform .24s cubic-bezier(.16, 1, .3, 1), background-color .18s ease-out; }
.switch[aria-checked="false"] .switch__track { border-color: var(--muted); }
.switch[aria-checked="false"] .switch__knob { background: var(--muted); transform: none; }
.switch:hover .switch__track { box-shadow: -1px 0 0 var(--spectrum-red), 1px 0 0 var(--spectrum-blue); }
.switch:focus-visible { outline: 2px solid var(--prism); outline-offset: 4px; }

/* How it starts: the light draws the rail down the left edge of the list. */
.plain { padding-top: var(--space-16); }
.steps { margin: 0; padding: 0 0 0 var(--space-8); list-style: none; counter-reset: step; border-left: 1px solid transparent; }
.no-light .steps, .no-light .limits, [data-light-off] .steps, [data-light-off] .limits { border-left-color: var(--hairline); }
.steps li { counter-increment: step; max-width: 56ch; }
.steps li + li { margin-top: var(--space-8); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--space-2); color: var(--muted); font: 500 12px/16px var(--font-mono); letter-spacing: .08em; }
.steps h3 { margin: 0 0 var(--space-2); font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; }
.steps p { color: var(--muted); }

.limits { margin: 0; padding: 0 0 0 var(--space-8); list-style: none; border-left: 1px solid transparent; }
.limits li { color: var(--muted); max-width: 56ch; }
.limits li + li { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }

/* The form. Its top rule is where the light comes to rest. */
.contact { padding-bottom: calc(var(--space-16) * 2); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
.form__wide { grid-column: 1 / -1; }
.form__trap { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__status { color: var(--muted); font: 400 13px/18px var(--font-sans); }
.form__status[data-state="error"] { color: var(--danger); }
.form__status[data-state="sent"] { color: var(--ink); }
.prism-input__hint:empty { display: none; }

.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-8); border-top: 1px solid var(--hairline); background: var(--ground); }
.foot img { height: 32px; width: auto; }
.foot p:last-child { margin-left: auto; }

@media (max-width: 899px) {
  .claims { grid-template-columns: 1fr 1fr; }
  .claims li { padding: var(--space-6) var(--space-4); }
  .claims li:nth-child(3) { border-left: 0; }
  .claims li:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .chapter, .plain, .contact { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); padding: var(--space-16) var(--space-4); }
  .chapter { min-height: 0; row-gap: 0; }
  /* One column: heading and lead, then the drawing, then its controls, so a control and what it changes are on screen
     together. The words' box dissolves so the stage can sit between its children; each child keeps its place above the light. */
  .chapter__text { display: contents; }
  .chapter__text > * { position: relative; z-index: 2; }
  .chapter__text > .title, .chapter__text > .lead { order: -2; }
  .stage { position: relative; top: 0; order: -1; height: min(48svh, 400px); margin: var(--space-6) 0 0; }
  .hero__field { height: clamp(340px, 56svh, 520px); }
  .hero__below { position: relative; bottom: auto; left: auto; width: auto; max-width: 440px; margin: 0 auto; padding: 0 var(--space-4) var(--space-8); transform: none; }
  .tag { display: none; }
  /* Under 900px the bar's button becomes a fourth link, so the links never crowd it. */
  .site-nav .prism-nav__actions > a { display: none; }
  .nav-narrow { display: block; }
  .site-nav { column-gap: var(--space-4); }
  .site-nav .prism-nav__links { gap: var(--space-4); }
  .foot { padding: var(--space-6) var(--space-4); }
  .foot p:last-child { margin-left: 0; }
}
@media (max-width: 720px) {
  .site-nav .prism-nav__links { padding-top: var(--space-2); }
}
@media (max-width: 520px) {
  .form, .areas { grid-template-columns: minmax(0, 1fr); }
  .models__name { font-size: 16px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer summary::after, .layer__t, .models__opt, .switch__track, .switch__knob, .tag { transition: none; }
}