/* Prioza — shared styles
   Palette: ink slate, cool paper, one decisive green for "the one that wins".
   Type: Zilla Slab for headings (technical, editorial), IBM Plex Sans for text. */

:root {
  --ink: #1e2a44;
  --ink-soft: #4a566e;
  --paper: #f5f6f8;
  --paper-deep: #e7eaef;
  --win: #2f6f4e;
  --win-soft: #e2ede7;
  --rule: #cdd3dc;
  --measure: 66ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 0;
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

a {
  color: var(--win);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--win);
  outline-offset: 3px;
}

code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--paper-deep);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  word-break: break-all;
}

pre {
  background: var(--ink);
  color: #eef1f6;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border-radius: 3px;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- masthead ---- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 0;
  flex-wrap: wrap;
}

.wordmark {
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* The nav wraps. It fits at 320px today, but it went from three entries to
   four and a flex row that cannot wrap is the kind that widens the whole
   document rather than just itself. The row gap is what makes the wrapped
   state readable. */

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
}

.masthead nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--win);
  text-decoration: underline;
}

/* ---- hero ---- */

.hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--rule);
}

.hero p.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 34rem;
}

/* the duel: the one thing this page is built around */

.duel {
  margin: 2.5rem 0 2rem;
  border: 1px solid var(--rule);
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.duel-side {
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.duel-side .task {
  font-size: 1.05rem;
  font-weight: 500;
}

.duel-side .meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.duel-side.chosen {
  background: var(--win-soft);
  box-shadow: inset 3px 0 0 var(--win);
}

.duel-side.chosen .verdict {
  color: var(--win);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: auto;
}

.duel-side.passed .verdict {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: auto;
}

.duel-split {
  width: 1px;
  background: var(--rule);
  position: relative;
}

.duel-split span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.cta {
  display: inline-block;
  background: var(--win);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0.75rem 1.4rem;
  border-radius: 3px;
}

.cta:hover {
  background: #275c41;
}

/* Two doors, not one: the app is the primary action, Claude the secondary.
   The ghost button carries the same weight of shape and none of the colour, so
   the eye still lands on "Open Prioza" first. */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.cta-ghost {
  background: none;
  color: var(--win);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.cta-ghost:hover {
  background: var(--win-soft);
}

.cta-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

/* ---- sections ---- */

/* `section.wrap` and not `section`: every section on this site also carries
   .wrap, whose `padding: 0 1.5rem` shorthand outranks a bare element selector
   and was zeroing the vertical padding — the sections had no breathing room at
   all and each heading sat on the rule above it. padding-block keeps .wrap in
   charge of the horizontal gutter. */

section.wrap {
  padding-block: 3rem;
  border-bottom: 1px solid var(--rule);
}

section:last-of-type {
  border-bottom: 0;
}

/* A subheading that is a direct child of a section starts a new idea inside it,
   so it needs air above. Scoped with `>` on purpose: the h3s inside .steps,
   .pair and .surfaces are grid items and already carry their own spacing. */

section.wrap > h3 {
  margin-top: 2.25rem;
}

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.75rem;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
}

.steps li::before {
  content: counter(step);
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.1rem;
  color: var(--win);
  border-top: 2px solid var(--win);
  padding-top: 0.35rem;
}

.steps p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
}

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.pair p {
  color: var(--ink-soft);
}

/* The inventory of screens. Same auto-fit grid as .pair, but each item is ruled
   at the top: this is a list of things that exist, not two ideas compared. */

.surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem 2rem;
  margin-top: 2rem;
}

.surfaces > div {
  border-top: 2px solid var(--win);
  padding-top: 0.75rem;
}

.surfaces h3 {
  margin-bottom: 0.35rem;
}

.surfaces p {
  margin: 0;
  color: var(--ink-soft);
}

.prompt {
  border-left: 2px solid var(--rule);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Sibling of .prompt: same left rule, but it states something instead of
   quoting, so it keeps the ink colour and drops the italics. */

.note {
  border-left: 2px solid var(--win);
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 1.75rem 0 1rem;
  max-width: var(--measure);
}

/* ---- long-form documents ---- */

.doc {
  padding: 3rem 0 4rem;
}

.doc h2 {
  margin-top: 2.5rem;
  font-size: 1.35rem;
}

.doc ul {
  max-width: var(--measure);
  padding-left: 1.1rem;
}

.doc li {
  margin-bottom: 0.4rem;
}

.updated {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.draft {
  border: 1px solid var(--win);
  background: var(--win-soft);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
  font-size: 0.95rem;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

footer nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

footer a {
  color: var(--ink-soft);
}

@media (max-width: 40rem) {
  .duel {
    grid-template-columns: 1fr;
  }

  .duel-split {
    width: auto;
    height: 1px;
  }

  .hero {
    padding-top: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}