:root {
  --ink: #17110c;
  --paper: #f3e5bf;
  --paper-deep: #e2c980;
  --red: #b8322a;
  --blue: #214f82;
  --green: #1f6f55;
  --gold: #d39a2d;
  --gray: #736a5c;
  --gray-bubble: #ded2b3;
  --shadow: rgba(23, 17, 12, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(179, 50, 42, 0.14), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(33, 79, 130, 0.12), transparent 24rem),
    linear-gradient(90deg, rgba(23, 17, 12, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: auto, auto, 18px 18px, auto;
}

a {
  color: var(--blue);
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}

.page-shell {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

.hero {
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px);
  border-bottom: 4px double var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 32%),
    repeating-linear-gradient(
      -7deg,
      rgba(184, 50, 42, 0.1) 0 12px,
      rgba(243, 229, 191, 0.32) 12px 24px
    ),
    var(--paper-deep);
  box-shadow: 0 8px 0 var(--shadow);
  text-align: center;
}

.hero .kicker {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--red);
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
}

.hero .tagline {
  margin: 0 0 22px;
  font-size: 1.15rem;
  font-style: italic;
}

.hub-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hub-nav a {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.hub-nav a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}

/* Replaces the hero's hub-nav button row on the home page - a straight
   image needs no button chrome of its own. */
.hero-image {
  display: flex;
  justify-content: center;
  /* Keeps the button at the same height it sat at when the hero still had
     its own .tagline paragraph above it (one line at 1.15rem plus its
     22px margin, on top of the h1's own 10px margin) - removing that
     paragraph without this would pull the button up to sit right under
     the h1. */
  margin-top: 44px;
}

.hero-image img {
  width: clamp(182px, 28.6vw, 286px);
  height: auto;
  filter: drop-shadow(0 6px 0 var(--shadow));
}

main section {
  margin: 40px 0;
}

main section h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
  border-bottom: 3px solid var(--gold);
  display: inline-block;
  padding-bottom: 2px;
}

main section p {
  line-height: 1.6;
  font-size: 1.05rem;
}

/* A plain, de-emphasized text link used in place of a hub-nav button -
   "History" (top of the hub) and "Everybody is Nobody!" (below the chat
   widget) both use this. */
.section-link {
  text-align: center;
  margin: 8px 0 32px;
}

.underline-link {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 600;
  font-size: 1.05rem;
}

.underline-link:hover {
  color: var(--red);
}

.sayings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sayings-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 1.1rem;
  line-height: 1.55;
  font-style: italic;
}

.sayings-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background: url("nobody-for-president-button-black.png") center / contain no-repeat;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  text-decoration: none;
  font-weight: 600;
}

.back-link::before {
  content: "\2190 ";
}

.subpage h1 {
  margin-top: 0;
}

.store-note {
  padding: 18px 22px;
  border: 2px dashed var(--gray);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* --- Now: embedded chat, topic "nobody.news" --- */

#now .prompt {
  font-size: 1.1rem;
  font-weight: 400;
}

.chat-widget {
  border: 3px double var(--ink);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  padding: 16px;
}

#messages {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 22rem;
  overflow-y: auto;
}

#messages li {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  overflow-wrap: anywhere;
}

/* Coloring is keyed on which chassis authored the message (entry.author,
   an iroh-docs author id bound to that sidecar's own EndpointId) - not the
   free-text sender name, which every message from nobody.news itself sends
   as "Nobody" regardless. Gray: authored by the chassis currently serving
   this page. Blue: authored by any other chassis. */
#messages li.chassis-self {
  align-self: flex-end;
  background: var(--gray-bubble);
  color: var(--ink);
}

#messages li.chassis-other {
  align-self: flex-start;
  background: var(--blue);
  color: #f3e9d2;
}

#messages .sender {
  font-weight: 700;
  margin-right: 6px;
}

#messages li.chassis-other .time {
  color: rgba(243, 233, 210, 0.75);
  font-size: 0.8rem;
}

#messages li.chassis-self .time {
  color: rgba(23, 17, 12, 0.6);
  font-size: 0.8rem;
}

#messages .text {
  display: block;
  margin-top: 2px;
}

#sendForm {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#sendForm input[type="text"] {
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 6px;
}

#senderName {
  flex: 0 0 110px;
  background: var(--paper);
  color: var(--ink);
}

/* A disabled senderName (nobody.news itself, fixed to "Nobody") looks
   visibly inert - distinct from the free-text field every other chassis
   shows. */
#senderName:disabled {
  background: var(--paper-deep);
  color: var(--gray);
}

#messageText {
  flex: 1 1 220px;
}

#sendForm button {
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--red);
  color: #fff9df;
  font-weight: 700;
  cursor: pointer;
}

#sendForm button:hover {
  background: var(--ink);
}

.sendStatus {
  color: var(--red);
  font-size: 0.85rem;
  margin: 8px 0 0;
  min-height: 1.1em;
}

footer.hub-footer {
  text-align: center;
  padding: 20px 0 0;
  font-size: 0.85rem;
  color: var(--gray);
}

/* --- everybody.html: the chassis explainer --- */

.chassis-tagline {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: left;
}

.section-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 32px;
}

.section-nav a {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.section-nav a:hover {
  background: var(--ink);
  color: var(--paper);
}

.chassis-page .lead-text {
  font-style: normal;
  line-height: 1.6;
  font-size: 1.05rem;
  margin: 0 0 20px;
}

.chassis-page .points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chassis-page .points li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
  font-size: 1.05rem;
}

.chassis-page .points li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: var(--gold);
  font-weight: 700;
}

.term-key {
  color: var(--red);
  font-weight: 700;
}

.chassis-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
  background: rgba(23, 17, 12, 0.07);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.diagram-box {
  border: 3px double var(--ink);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  padding: 16px;
  overflow-x: auto;
}

.diagram-box pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.5rem, 1.7vw, 0.82rem);
  line-height: 1.3;
  white-space: pre;
  color: var(--ink);
}

.build-steps {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.build-steps li {
  line-height: 1.6;
  font-size: 1.05rem;
}

.structure-heading {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gray);
  margin: 0 0 12px;
}

.structure-steps {
  margin: 0 0 20px;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.structure-steps li {
  line-height: 1.6;
  font-size: 1.05rem;
}

.step-with-shot {
  margin: 14px 0 20px;
}

.step-two {
  margin: 0 0 14px;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 1.6;
  font-size: 1.05rem;
}

.screenshot {
  border: 3px double var(--ink);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  padding: 16px;
  margin: 0 0 20px;
}

.screenshot img {
  display: block;
  width: min(420px, 100%);
  height: auto;
  margin: 0 auto;
}

/* On a phone-width screen, .step-with-shot's children just stack in
   source order (step-two, the image, the caption) - already confirmed
   to read well. Only a wide/desktop viewport gets the two-column
   treatment below: the grid's "image" column track is sized "auto",
   i.e. to the image's own intrinsic width (capped by .screenshot img's
   max-width above), so the box hugs the image instead of stretching
   across the remaining page width. The caption stays full-width below
   the image at every size, regardless - it's never part of the
   two-column arrangement. */
@media (min-width: 640px) {
  .step-with-shot {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "step  image"
      "text  text";
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }

  .step-with-shot .step-two {
    grid-area: step;
    margin: 0;
  }

  .step-with-shot .screenshot {
    grid-area: image;
    margin: 0;
  }

  .step-with-shot .step-with-shot-caption {
    grid-area: text;
  }
}

.page-kicker {
  margin: 28px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--red);
}