/*
  site.css: everything the designer did not draw, built on her tokens
  (styles.css :root), type scale, radii and button patterns. It never
  restyles her components; the few corrections to them are grouped first
  and each says why.
*/

/* ------------------------------------------------------------------ corrections to the designer's components */

/* One logo, one size, everywhere: the live Sanctity mark is 32 x 24 (her
   placeholder was square), and the wordmark keeps the header's size in the
   footer too. Every page's header and footer, the Sanctum and the games
   included, take their logo from these two rules. */
.brand .brand-mark { width: 30px; height: 23px; flex: none; }
.brand { font-size: 1.2rem; gap: 10px; }

/* The mascot button showed the browser's default button border (a dark box). */
.site-companion-button { border: 0; }
.site-companion-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 24px; }

/* The account link lives in the mobile menu only; on desktop it sits at the right. */
.primary-nav-account { display: none; }
@media (max-width: 880px) {
  .primary-nav-account { display: block; width: 100%; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .nav-actions .nav-login { display: none; }
}

/* ------------------------------------------------------------------ accessibility */

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: .88rem; transition: top .2s ease; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------------ page intro */

.page-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: end; padding-block: 112px 72px; }
.page-intro-copy { max-width: 860px; }
.page-intro h1 { margin: 0; font-size: clamp(2.9rem, 5.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.012em; font-weight: 600; text-wrap: balance; }
.page-lead { max-width: 660px; margin: 26px 0 0; color: #51514d; font-size: clamp(1.06rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.page-intro-aside { min-width: 250px; }

.intro-facts { margin: 0; border-top: 1px solid var(--line); }
.intro-facts > div { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.intro-facts dt { color: var(--muted); }
.intro-facts dd { margin: 0; font-weight: 500; text-align: right; }
.intro-facts a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ sections and cards */

.section-block { padding-block: 0 112px; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { margin: 0; font-size: clamp(2.1rem, 3.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.004em; font-weight: 600; text-wrap: balance; }
.section-head-split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 48px; }
.section-head-split > p { max-width: 380px; margin: 0; color: var(--muted); line-height: 1.55; }

.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.info-card { position: relative; padding: 32px 30px 34px; border: 1px solid rgba(23, 23, 22, .1); border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 rgba(23, 23, 22, .03); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.info-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(23, 23, 22, .07); }
.info-card-number { display: block; margin-bottom: 42px; color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.info-card h2, .info-card h3 { margin: 0 0 12px; font-size: 1.32rem; line-height: 1.2; font-weight: 500; }
.info-card p { margin: 0; color: #51514d; line-height: 1.6; }
.info-card p strong { color: var(--ink); font-weight: 500; }

.empty-card { max-width: 720px; padding: 44px; border: 1px dashed rgba(23, 23, 22, .22); border-radius: 18px; background: var(--white); }
.empty-card h2 { margin: 0 0 12px; font-size: 1.9rem; font-weight: 600; }
.empty-card p { margin: 0 0 26px; color: #51514d; line-height: 1.6; }
.empty-note { color: var(--muted); }

.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 26px 30px; border-radius: 18px; background: #f2f2f2; }
.inline-cta p { margin: 0; font-size: 1.1rem; font-weight: 500; }

/* ------------------------------------------------------------------ constitution page */

.constitution-page { padding-top: 88px; }
.constitution-page::before { top: 120px; }
.principle-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.principle-card { display: grid; grid-template-columns: 90px minmax(0, 1.5fr) minmax(220px, .8fr); gap: 36px; padding: 38px 36px; border: 1px solid rgba(23, 23, 22, .1); border-radius: 18px; background: var(--white); scroll-margin-top: 100px; }
.principle-card-number { color: var(--muted); font-size: .8rem; letter-spacing: .14em; }
.principle-card h3 { margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.08; font-weight: 600; }
.principle-card-statement { margin: 14px 0 26px; color: #3f3f3b; font-size: 1.1rem; line-height: 1.55; }
.principle-card-rule, .principle-card-questions { padding-top: 18px; border-top: 1px solid var(--line); }
.principle-card-rule { margin-bottom: 22px; }
.principle-card-rule span, .principle-card-questions > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.principle-card-rule p { margin: 0; line-height: 1.55; }
.principle-card-questions ul { margin: 0; padding-left: 18px; color: #51514d; line-height: 1.75; }
.principle-card-voices { display: flex; flex-direction: column; gap: 12px; }
.principle-card-voices blockquote { margin: 0; padding: 18px 20px; border-radius: 4px 14px 14px 14px; background: #fbf3cf; color: #3d3620; font-size: .98rem; line-height: 1.45; transform: rotate(-1deg); box-shadow: 0 10px 22px rgba(80, 70, 30, .08); }
.principle-card-voices blockquote:nth-child(2) { background: #e9edfb; color: #25325f; transform: rotate(1.2deg); }

/* ------------------------------------------------------------------ labs page */

.labs-page-demo .games { padding-top: 96px; }
.labs-page-demo + .section-block { padding-top: 112px; }
.game-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.game-tile { position: relative; min-height: 230px; display: flex; flex-direction: column; padding: 24px; border: 1px solid rgba(23, 23, 22, .1); border-radius: 18px; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; }
.game-tile:hover { transform: translateY(-4px); border-color: rgba(23, 23, 22, .2); box-shadow: 0 20px 44px rgba(23, 23, 22, .08); }
.game-tile-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.game-tile strong { margin-top: 42px; font-size: 1.4rem; line-height: 1.15; font-weight: 500; }
.game-tile-question { margin-top: 8px; color: #51514d; line-height: 1.45; }
.game-tile-cta { margin-top: auto; padding-top: 24px; font-size: .9rem; font-weight: 500; }
.game-tile-cta i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.game-tile:hover .game-tile-cta i { transform: translateX(4px); }

/* ------------------------------------------------------------------ products page */

.products-page .products { padding-top: 24px; }
.products-page .products-intro { display: none; }

/* ------------------------------------------------------------------ about page */

.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.about-card h2 { font-size: 1.7rem; font-weight: 600; }
.about-card p { font-size: 1.04rem; }
.statement-band { padding: clamp(40px, 6vw, 84px); border-radius: 22px; background: var(--ink); color: var(--white); }
.statement-band-text { max-width: 980px; margin: 0; font-size: clamp(1.45rem, 2.4vw, 2.2rem); line-height: 1.32; font-weight: 500; text-wrap: pretty; }
.statement-band-sign { margin: 32px 0 0; color: #aaa9a3; font-size: 1rem; }
.founder-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.founder-block h2 { margin: 0 0 18px; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08; font-weight: 600; }
.founder-block p { color: #51514d; line-height: 1.6; }
.founder-note { margin: 0; padding: 38px 40px; border-radius: 6px 22px 22px 22px; background: #fbf3cf; box-shadow: 0 24px 50px rgba(80, 70, 30, .1); transform: rotate(-1.2deg); }
.founder-note blockquote { margin: 0; font-size: 1.35rem; line-height: 1.45; font-weight: 500; color: #2d2816; }
.founder-note figcaption { margin-top: 22px; color: #6d6440; font-size: .9rem; }

/* ------------------------------------------------------------------ FAQ page */

.faq-page { display: grid; gap: 64px; }
.faq-group { display: grid; grid-template-columns: minmax(200px, .5fr) minmax(0, 1.5fr); gap: 48px; }
.faq-group-title { margin: 22px 0 0; font-size: 1.4rem; font-weight: 600; }

/* ------------------------------------------------------------------ blog */

.blog-section { padding-bottom: 112px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.topic-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(23, 23, 22, .16); border-radius: 999px; background: var(--white); font-size: .88rem; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.topic-chip span { color: var(--muted); font-size: .76rem; }
.topic-chip:hover { border-color: rgba(23, 23, 22, .4); }
.topic-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.topic-chip[aria-current="page"] span { color: #aaa9a3; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; }
.post-card { display: flex; flex-direction: column; min-width: 0; }
.post-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: #efefeb; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.035); }
/* Posts without a picture get an editorial tile: the designer's grid paper, in ink. */
.post-card-placeholder { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background-color: var(--ink); background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; color: var(--white); }
.post-card-placeholder::after { content: ""; position: absolute; inset: auto 12% 16% auto; width: 32%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5c83d9, #69a46e, #d6a421, #f16f50); }
.post-card-placeholder .brand-mark { width: 72px; height: 54px; transition: transform .8s var(--ease); }
.post-card:hover .post-card-placeholder .brand-mark { transform: scale(1.06); }
.post-card-large .post-card-placeholder .brand-mark { width: 112px; height: 84px; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.post-card-meta { display: flex; gap: 14px; color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.post-card-body strong { margin-top: 12px; font-size: 1.28rem; line-height: 1.22; font-weight: 500; text-wrap: balance; }
.post-card-summary { margin-top: 10px; color: #5a5a55; font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--muted); font-size: .84rem; }
.post-card-foot i { font-style: normal; color: var(--ink); transition: transform .3s var(--ease); }
.post-card:hover .post-card-foot i { transform: translate(3px, -3px); }

.post-card-large { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 72px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }
.post-card-large .post-card-media { aspect-ratio: 16 / 10; border-radius: 22px; }
.post-card-large .post-card-body { padding-top: 0; }
.post-card-large .post-card-body strong { font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.06; font-weight: 600; letter-spacing: -.006em; }
.post-card-large .post-card-summary { margin-top: 18px; font-size: 1.08rem; -webkit-line-clamp: 4; }
.post-card-large .post-card-foot { margin-top: 28px; padding-top: 0; justify-content: flex-start; gap: 18px; }

/* ------------------------------------------------------------------ article */

.article-head { max-width: 900px; padding-block: 104px 48px; text-align: center; }
.article-back { display: inline-flex; min-height: 34px; align-items: center; padding: 0 14px; border: 1px solid rgba(23, 23, 22, .16); border-radius: 999px; color: #42423e; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s ease; }
.article-back:hover { border-color: rgba(23, 23, 22, .45); }
.article-head h1 { margin: 26px 0 0; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.01em; font-weight: 600; text-wrap: balance; }
.article-dek { max-width: 700px; margin: 24px auto 0; color: #51514d; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; text-wrap: pretty; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 28px 0 0; color: var(--muted); font-size: .88rem; }
.article-meta span + span::before { content: "·"; margin-right: 22px; }
.article-cover { max-width: 1120px; margin: 0 auto 72px; }
.article-cover img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 22px; }
.article-rule { display: grid; place-items: center; max-width: 720px; margin: 0 auto 56px; }
.article-rule .brand-mark { width: 36px; height: 27px; color: var(--line); }

.prose { color: #2c2c29; font-size: 1.1rem; line-height: 1.75; }
.article-body, .prose-narrow { width: min(720px, calc(100% - 56px)); margin-inline: auto; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.1em 0 .6em; color: var(--ink); font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.004em; }
.prose h3 { margin: 1.9em 0 .5em; color: var(--ink); font-size: 1.32rem; line-height: 1.3; font-weight: 500; }
.prose h4 { margin: 1.6em 0 .4em; font-size: 1.1rem; font-weight: 500; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(72, 104, 200, .45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.prose a:hover { text-decoration-color: var(--blue); }
.prose strong, .prose b { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--muted); }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--yellow); color: var(--ink); font-size: 1.28rem; line-height: 1.5; font-weight: 500; }
.prose blockquote p { margin: 0; }
.prose hr { width: 64px; margin: 2.6em auto; border: 0; border-top: 2px solid var(--line); }
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; height: auto; border-radius: 16px; background: #f2f2f2; }
.prose figure svg { width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; color: var(--muted); font-size: .88rem; text-align: center; }
.prose code { padding: 2px 6px; border-radius: 6px; background: #f2f2f2; font-size: .92em; }
.prose-callout { padding: 18px 22px; border-radius: 14px; background: #fbf3cf; color: #3d3620 !important; font-size: 1rem; }
@media (min-width: 1100px) {
  .article-body figure:has(img) { margin-inline: -80px; }
}

.article-foot { max-width: 720px; margin: 64px auto 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: grid; gap: 40px; }
.article-share { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: .9rem; }
.article-share a { color: var(--ink); font-weight: 500; }
.article-share a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; border-radius: 18px; background: var(--ink); color: var(--white); }
.article-cta p { margin: 0; font-size: 1.12rem; font-weight: 500; }
.article-cta .button-dark { background: var(--white); color: var(--ink); }
.article-cta .button-dark:hover { background: #ececea; }
.related-posts { margin-top: 112px; padding-top: 88px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ forms */

.form-card { padding: clamp(26px, 3.5vw, 44px); border: 1px solid rgba(23, 23, 22, .1); border-radius: 22px; background: var(--white); box-shadow: 0 24px 60px rgba(23, 23, 22, .05); }
.section-block > .form-card { max-width: 820px; }
.form-card-title { margin: 0 0 22px; font-size: 1.35rem; font-weight: 600; }
.form-card-sticky { position: sticky; top: 100px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: .88rem; font-weight: 500; }
.field-optional { margin-left: 6px; color: var(--muted); font-weight: 400; font-size: .8rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid rgba(23, 23, 22, .2); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(23, 23, 22, .38); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(72, 104, 200, .14); }
.field-hint { color: var(--muted); font-size: .82rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.form-actions .button { min-width: 170px; }
.form-actions .button[disabled] { opacity: .55; cursor: progress; }
.form-status { margin: 0; color: var(--muted); font-size: .92rem; }
.form-status[data-state="done"] { color: var(--green); }
.form-status[data-state="error"] { color: #b23b27; }
.form-notice { margin: 0 0 22px; padding: 14px 18px; border-radius: 12px; font-size: .95rem; line-height: 1.5; }
.form-notice[data-tone="error"] { background: #fdecea; color: #8c2b1b; }
.form-notice[data-tone="success"] { background: #e8f2ea; color: #2f5a39; }

/* ------------------------------------------------------------------ auth and account */

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; min-height: calc(100vh - 76px); padding-block: 72px 112px; }
.auth-copy h1 { margin: 0; font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.04; font-weight: 600; }
.auth-points { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.auth-points li { position: relative; padding-left: 28px; color: #51514d; }
.auth-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); }
.auth-points li:nth-child(2)::before { background: var(--blue); }
.auth-points li:nth-child(3)::before { background: var(--coral); }
.auth-card .form-actions { justify-content: space-between; }
.auth-switch { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .94rem; }
.auth-switch a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.signed-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.signed-list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.signed-choice { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .82rem; }
.signed-list strong { display: block; font-weight: 500; }
.signed-list small { color: var(--muted); }
.signed-list time { color: var(--muted); font-size: .85rem; }
.account-details { margin: 0 0 26px; }
.account-details > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-details dt { color: var(--muted); font-size: .8rem; }
.account-details dd { margin: 4px 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ careers */

.role-list { border-top: 1px solid var(--line); }
.role-row { display: grid; grid-template-columns: 1fr auto 24px; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding-left .3s var(--ease); }
.role-row:hover { padding-left: 10px; }
.role-row strong { display: block; font-size: 1.3rem; font-weight: 500; }
.role-row small { color: var(--muted); }
.role-meta { color: var(--muted); font-size: .9rem; text-transform: capitalize; }
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: start; }

/* ------------------------------------------------------------------ error page */

.error-page { min-height: calc(100vh - 76px - 200px); display: flex; flex-direction: column; justify-content: center; padding-block: 120px; }
.error-page h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1.02; font-weight: 600; max-width: 900px; }

/* Pages without the closing call to action keep a comfortable gap above the footer. */
.footer-compact .footer-grid { padding-top: 72px; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle-card { grid-template-columns: 60px minmax(0, 1fr); }
  .principle-card-voices { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  .principle-card-voices blockquote { flex: 1 1 220px; }
  .job-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
}

@media (max-width: 880px) {
  .page-intro { grid-template-columns: 1fr; gap: 36px; padding-block: 72px 48px; }
  .page-intro-aside { min-width: 0; }
  .section-block { padding-bottom: 80px; }
  .section-head-split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .step-grid, .about-grid, .founder-block, .faq-group, .account-layout, .job-layout, .auth-layout { grid-template-columns: 1fr; }
  .auth-layout { gap: 40px; min-height: 0; padding-block: 56px 80px; }
  .faq-group { gap: 8px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card-large { grid-template-columns: 1fr; gap: 24px; }
  .form-card-sticky { position: static; }
  .article-head { padding-block: 64px 36px; }
  .article-cover { margin-bottom: 48px; }
  .inline-cta, .article-cta { flex-direction: column; align-items: flex-start; }
  .constitution-page { padding-top: 56px; }
}

@media (max-width: 590px) {
  .post-grid, .field-row { grid-template-columns: 1fr; }
  .principle-card { grid-template-columns: 1fr; gap: 14px; padding: 28px 22px; }
  .principle-card-voices { grid-column: auto; }
  .info-card { padding: 26px 22px; }
  .info-card-number { margin-bottom: 24px; }
  .role-row { grid-template-columns: 1fr 20px; }
  .role-meta { grid-column: 1; grid-row: 2; }
  .signed-list a { grid-template-columns: 40px 1fr; }
  .signed-list time { grid-column: 2; }
  .prose { font-size: 1.04rem; }
  .article-cover img { border-radius: 14px; }
  .statement-band { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .info-card, .game-tile, .post-card-media img, .role-row { transition: none; }
}

/* ------------------------------------------------------------ The Constitution, generated */
.clause-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 36px; padding: 38px 36px; border: 1px solid rgba(23, 23, 22, .1); border-radius: 18px; background: var(--white); scroll-margin-top: 100px; }
.clause-card:target { border-color: #438ff4; box-shadow: 0 0 0 3px rgba(67, 143, 244, .15); }
.clause-card h3 { margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.08; font-weight: 600; }
.clause-support { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; color: #3f3f3b; }
.clause-support.is-forming { color: var(--muted); }
.clause-support b { font-weight: 600; color: var(--ink); }
.clause-bar { position: relative; flex: 0 0 180px; height: 8px; border-radius: 8px; background: #ececec; overflow: hidden; }
.clause-bar span { position: absolute; inset: 0 auto 0 0; background: #438ff4; }
.clause-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.clause-conditions span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.clause-conditions ul { margin: 0; padding-left: 18px; color: #51514d; line-height: 1.6; }
.clause-conditions small { color: var(--muted); }
.clause-provenance { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: #51514d; }
.clause-provenance summary { cursor: pointer; color: var(--ink); }
.clause-provenance p { margin: 10px 0 0; line-height: 1.6; }
.clause-provenance a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ The record */
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding-bottom: 112px; }
.record-main .section-block { padding: 0 0 72px; }
.record-main .section-head-split { gap: 24px; }
.record-account { position: sticky; top: 100px; display: grid; gap: 18px; }
.record-account .form-card-title { margin: 0; }
.record-account p { margin: 0; color: #51514d; line-height: 1.6; }
.record-subhead { margin: 6px 0 0; font-size: 1rem; font-weight: 600; }
.record-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.record-highlight { padding: 22px 24px; border-radius: 16px; background: #f5f8ff; }
.record-highlight + .record-highlight { background: #f6f6f4; }
.record-highlight span { display: block; color: #246ac5; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.record-highlight strong { display: block; margin: 8px 0 6px; font-size: 1.15rem; font-weight: 600; }
.record-highlight p { margin: 0; color: #51514d; }
.record-note { color: var(--muted); }
.record-articles { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.record-articles li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.record-articles li.is-open { color: var(--muted); }
.record-article-number { color: var(--muted); font-size: .8rem; letter-spacing: .12em; }
.record-article-copy strong { display: block; font-weight: 500; color: var(--ink); }
.record-article-copy small { color: var(--muted); }
.record-article-share { font-size: .9rem; color: #3f3f3b; text-align: right; }
.record-article-share a { color: #246ac5; }
.record-calls { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.record-calls > li { padding: 18px 22px; border: 1px solid rgba(23, 23, 22, .1); border-radius: 14px; background: var(--white); }
.record-calls a { display: grid; gap: 4px; }
.record-calls time { color: var(--muted); font-size: .8rem; }
.record-calls strong { font-weight: 500; line-height: 1.35; }
.record-calls small { color: #51514d; }
.record-calls details { margin-top: 10px; color: #51514d; font-size: .92rem; }
.record-calls summary { cursor: pointer; color: var(--ink); }
.record-calls details ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.record-state { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #f0f0ec; font-size: .75rem; color: #666; }

/* ------------------------------------------------------------ Methodology */
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.method-card ul { margin: 0; padding-left: 18px; color: #51514d; line-height: 1.65; }
.method-card li + li { margin-top: 8px; }

/* ------------------------------------------------------------ The list form (footer) */
.footer-list { padding-block: 8px 28px; }
.list-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 8px 32px; align-items: center; padding: 24px 0; border-top: 1px solid rgba(23, 23, 22, .1); }
.list-form-copy strong { display: block; font-weight: 600; }
.list-form-copy span { color: var(--muted); font-size: .95rem; }
.list-form-row { display: flex; gap: 8px; }
.list-form-row input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(23, 23, 22, .18); border-radius: 999px; font: inherit; background: var(--white); }
.list-form-row .button { flex: none; }
.list-form small { grid-column: 2; color: var(--muted); font-size: .8rem; min-height: 1.2em; }
.list-form.is-done small { color: #1f7a3a; }

@media (max-width: 900px) {
  .clause-card { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .clause-conditions, .record-highlights, .method-grid { grid-template-columns: 1fr; }
  .record-layout { grid-template-columns: 1fr; }
  .record-account { position: static; }
  .list-form { grid-template-columns: 1fr; }
  .list-form small { grid-column: 1; }
}

/* The footer is dark, and has four link columns now (Explore, Products, Company, Connect). */
@media (min-width: 1101px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, .6fr); gap: 44px; } }
.site-footer .list-form { border-top-color: #3a3a37; }
.site-footer .list-form-copy strong { color: #f4f4f0; }
.site-footer .list-form-copy span, .site-footer .list-form small { color: #a3a39c; }
.site-footer .list-form-row input { border-color: #4a4a46; background: #252523; color: #f4f4f0; }
.site-footer .list-form-row .button { background: #f4f4f0; color: #191919; }
.site-footer .list-form.is-done small { color: #8fdc9f; }

/* Contrast (WCAG AA, checked with axe): a few of the designer's greys were just under 4.5:1. */
.preview-story-meta span, .preview-kicker { color: #5f5f5a; }
.principle-index button > span { color: #5f5f5a; }

/* Phones: room at the end of every page, so nothing has to stay under the robot. */
@media (max-width: 700px) { #main { padding-bottom: 96px; } }

/* ------------------------------------------------------------ /results (private) */
.results { padding-bottom: 96px; }
.results-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0 0 48px; }
.results-tiles div { padding: 18px 20px; border-radius: 14px; background: #f6f6f4; }
.results-tiles dt { color: #51514d; font-size: 13px; }
.results-tiles dd { margin: 4px 0 0; font-size: 26px; font-weight: 600; }
.results .section-block { padding: 0 0 48px; }
.results-files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.results-files li { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.results-files a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.results-files span { color: #51514d; font-size: 14px; }
.results-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.results-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.results-table caption { margin-bottom: 8px; color: #51514d; text-align: left; }
.results-table th, .results-table td { padding: 10px 12px; border-bottom: 1px solid #e6e6e2; text-align: left; vertical-align: top; }
.results-table th { color: #51514d; font-weight: 500; white-space: nowrap; }
.results-table small { display: block; color: #51514d; }
.results-split { display: inline-block; margin: 0 10px 2px 0; white-space: nowrap; }
.results-table td:first-child { white-space: nowrap; }

/* ------------------------------------------------------------ the Constitution: eight Articles, four positions */
.clause-covers { margin: -12px 0 26px; max-width: 70ch; color: #51514d; line-height: 1.6; }
.clause-standing { margin-top: 18px; }
.clause-positions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.clause-positions li { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(90px, 160px); gap: 12px; align-items: center; }
.clause-position-key { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9c9c4; border-radius: 50%; font-size: 13px; font-weight: 600; }
.clause-position-copy b { display: block; font-weight: 600; }
.clause-position-copy small { display: block; color: #51514d; line-height: 1.45; }
.clause-position-share { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.clause-position-share .clause-bar { flex: 1; }
.clause-standing-note { margin: 10px 0 0; color: #51514d; font-size: 14px; }
.clause-pending { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #f6f6f4; color: #3f3f3b; font-size: 14px; line-height: 1.55; }
.principle-covers { margin: 6px 0 16px; color: inherit; line-height: 1.6; }
@media (max-width: 700px) {
  .clause-positions li { grid-template-columns: 28px minmax(0, 1fr); }
  .clause-position-share { grid-column: 2; justify-content: flex-start; }
  .clause-position-share .clause-bar { max-width: 160px; }
}
.record-earlier { display: grid; gap: 4px; padding: 14px 0; } .record-earlier small { color: #51514d; }

/* Home preview: where people stand, across the four positions (real shares once formed). */
.impact-signal.impact-four { display: flex; gap: 3px; background: transparent; overflow: visible; }
.impact-four i { min-width: 0; height: 100%; border-radius: 999px; transform: none; }
.impact-four.is-forming i { flex: 1; background: #3f3f3b; }
.impact-four .impact-a { background: #e0503f; }
.impact-four .impact-b { background: #e9b43c; }
.impact-four .impact-c { background: #3fae6a; }
.impact-four .impact-d { background: #3d7fe8; }
.impact-four.is-forming i { background: #3f3f3b; }
.impact-four-labels span { flex: 1; }
.impact-four-labels span:last-child { text-align: right; }

/* Contact: the form, and what to know before writing, side by side. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(240px, 360px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-aside { display: grid; gap: 28px; padding-top: 8px; }
.contact-aside h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.contact-aside p { margin: 0; color: #51514d; line-height: 1.6; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-aside a { text-decoration: underline; text-underline-offset: 3px; }

/* Phones: two game tiles per row, so the eight games fit in a short scroll. */
@media (max-width: 700px) {
  .game-tiles { gap: 10px; }
  .game-tile { min-height: 0; padding: 16px 14px; }
  .game-tile strong { margin-top: 22px; font-size: 1.05rem; }
  .game-tile-question { font-size: .85rem; }
  .game-tile-cta { padding-top: 14px; }
  .game-tile-meta span:last-child { display: none; }
}

/* Footer on phones: four link columns sit two by two (the design had three, with the last spanning). */
@media (max-width: 590px) {
  .footer-column:last-child { grid-column: auto; }
}

/* Typography polish everywhere: headings balanced across lines, no one-word last lines in text. */
h1, h2, h3, h4, .story-title, .choice-heading { text-wrap: balance; }
p, li, dd, .choice-body, .bluf { text-wrap: pretty; }

/* The reveal animation slid sections in from the side, which made the page
   wider than the window on tablets before they settled. Below 1100px they
   rise straight up, and the page itself never scrolls sideways. */
@media (max-width: 1100px) {
  .js .motion-section [data-rise="left"],
  .js .motion-section [data-rise="right"] { transform: translate3d(0, 56px, 0) scale(.985); }
}

/* ------------------------------------------------------------ taking an answer back

   On the record, beside each answer. Quiet until it is used: this is a door,
   not an invitation. The first click asks; the second one does it.
*/
.record-withdraw { display: inline-flex; align-items: center; gap: 8px; }
.record-withdraw button { padding: 4px 10px; border: 1px solid var(--line, #dddeda); border-radius: 999px; background: transparent; color: #6b6b66; font-size: 12.5px; }
.record-withdraw button:hover { border-color: #b23b2e; color: #b23b2e; }
.record-withdraw.is-armed button { border-color: #b23b2e; background: #b23b2e; color: #fff; }
.record-withdraw-cancel { border: 0; color: #4f544e; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .record-articles li { grid-template-columns: 34px minmax(0, 1fr); } .record-article-share, .record-withdraw { grid-column: 2; justify-self: start; text-align: left; } }
.record-withdraw-all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #dddeda); color: #5f635c; font-size: 13.5px; }

/* The value notes in the home hero. The designer's text colour is
   rgba(23, 23, 22, .76), which reads at about 3.5 against the blue and the
   coral paper, under the 4.5 a person with ordinary eyesight needs. The old
   accessibility scan missed it because it ran while the notes were still
   fading in and measured a state nobody reads.

   The paper colours are the designer's and are not touched. Only the ink
   changes, to solid black, which is what carries the blue note over the line
   (4.86) while leaving the yellow and the coral where they already were. */
.hero-note span { color: #000; }

/* ==================================================================
   The home page asks its question
   ==================================================================

   What this replaced: a strip of three numbered steps ("read the story",
   "choose where you stand", "see what your answer changes") beside a card that
   shrank and slid to one side. Three descriptions of an action, on a page
   whose only job is to get the reader to take it. The page asks now. */

.ask {
  padding: clamp(56px, 7vw, 104px) 0;
  background: #141414;
  color: #f4f4f2;
}
.ask-shell { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 900px) { .ask-shell { grid-template-columns: 1fr; } }

.ask-intro .eyebrow { color: #9aa3b4; }
.ask-intro h2 {
  margin: 14px 0 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.14;
  letter-spacing: -.02em; font-weight: 500; color: #fff; text-wrap: balance;
}
.ask-lead { margin: 18px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: #c3c6cb; max-width: 46ch; }
.ask-note { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: #9aa3b4; max-width: 46ch; }
.ask-note b { color: #fff; font-weight: 500; }

.ask-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .ask-choices { grid-template-columns: 1fr; } }

.ask-choice {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 116px; padding: 18px 20px 20px;
  border: 1px solid #3a3a3a; border-radius: 14px; background: #1d1d1d;
  color: #f4f4f2; text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.ask-choice:hover:not(:disabled) { border-color: #6f7480; background: #242424; }
.ask-choice:focus-visible { outline: 2px solid #7ea6ff; outline-offset: 2px; }
.ask-choice b { font-size: 16px; font-weight: 500; line-height: 1.3; }
.ask-choice span { font-size: 13px; line-height: 1.5; color: #b6bac0; }

/* The share, drawn on the button the reader just pressed. Nothing moves and
   nothing scrolls, so an answer registers where the eye already is. */
.ask-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2f2f2f; }
.ask-bar em { display: block; height: 100%; width: 0; background: #7ea6ff; transition: width .5s var(--ease, ease); }
.ask-share { display: none; position: absolute; top: 14px; right: 16px; font-size: 12px; font-style: normal; text-decoration: none; color: #9aa3b4; font-variant-numeric: tabular-nums; }
.ask.is-answered .ask-bar, .ask.is-answered .ask-share { display: block; }
.ask.is-answered .ask-choice { cursor: default; opacity: .74; }
.ask.is-answered .ask-choice.is-mine { opacity: 1; border-color: #7ea6ff; background: #23283a; }
.ask.is-answered .ask-choice.is-mine .ask-share { color: #fff; }

.ask-after { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: #c3c6cb; }
.ask-next { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.ask-read { color: #9db6ea; font-size: 14px; }

@media (max-width: 700px) {
  .ask-choice { min-height: 44px; }
  .ask-choice span { font-size: 13px; }
}

/* ==================================================================
   What the answers turned into
   ==================================================================

   This replaced a grid of eight principle cards, each summarising what its
   Article was about. It described the Constitution rather than showing it.
   What is here now is the document's own text. */

.written { padding: clamp(56px, 7vw, 104px) 0; background: var(--paper); }
.written-intro { max-width: 62ch; }
.written-intro h2 { margin: 12px 0 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.16; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; }
.written-intro > p { margin: 16px 0 0; font-size: 16px; line-height: 1.68; color: var(--muted); }

.written-list { margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.written-article { padding: clamp(24px, 3vw, 34px) 0; border-top: 1px solid var(--line); }
.written-article:last-child { border-bottom: 1px solid var(--line); }
.written-number { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #6a6e67; }
.written-line { margin: 12px 0 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink); max-width: 62ch; }
.written-source { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #6a6e67; }
.written-source a { color: #2368c2; }
/* A line nobody has adopted reads in lighter ink and says what it waits for,
   because a Constitution that padded itself out with sentences no one voted
   for would be the one dishonest page on this site. */
.written-article.is-waiting .written-line { color: #5f6367; }

.written-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: clamp(28px, 3.5vw, 40px); }
.written-more { color: #2368c2; font-size: 15px; }

/* ==================================================================
   The Signal archive
   ==================================================================

   One line per signal, newest first, grouped by month. A place for finding a
   signal rather than for reading a week, so it is set as a list with the date
   in a fixed column and nothing competing with the line itself. */

.archive-page { padding-block: clamp(44px, 6vw, 88px); max-width: 900px; }
.archive-head h1 { margin: 12px 0 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.02em; font-weight: 500; }
.archive-head > p:not(.eyebrow) { margin: 16px 0 0; font-size: 16px; line-height: 1.66; color: var(--muted); max-width: 62ch; }
.archive-head .archive-back { margin-top: 12px; font-size: 15px; }
.archive-back a, .archive-empty a, .archive-gate-login { color: #2368c2; }

.archive-month { margin-top: clamp(32px, 4vw, 48px); }
.archive-month h2 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6a6e67; }
.archive-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.archive-lines li { border-bottom: 1px solid var(--line); }
.archive-lines a {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 14px 4px; color: var(--ink); text-decoration: none;
}
.archive-lines a:hover .archive-hook { text-decoration: underline; text-underline-offset: 3px; }
.archive-lines time { font-size: 13px; color: #6a6e67; font-variant-numeric: tabular-nums; }
.archive-hook { font-size: 16px; line-height: 1.5; }
.archive-dim { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6a6e67; }
@media (max-width: 600px) {
  .archive-lines a { grid-template-columns: 1fr; gap: 4px; }
  .archive-dim { justify-self: start; }
}

.archive-empty { margin-top: 32px; font-size: 16px; line-height: 1.66; color: var(--muted); max-width: 62ch; }
.archive-gate { margin-top: 36px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: 16px; background: #f6f6f3; }
.archive-gate-count { margin: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; }
.archive-gate > p:not(.archive-gate-count) { margin: 10px 0 0; font-size: 15px; line-height: 1.62; color: #4b4f4a; max-width: 60ch; }
.archive-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 20px; }
@media (max-width: 700px) { .archive-gate-login { display: inline-block; padding-block: 11px; } }

/* A proposed line reads in the document's own voice, because it is a real
   sentence real people chose, and carries its state in the note beneath it,
   the same way the Constitution page marks it: a rule in the margin. */
.written-article.is-proposed { position: relative; padding-left: 16px; }
.written-article.is-proposed::before { content: ""; position: absolute; left: 0; top: clamp(24px, 3vw, 34px); bottom: clamp(24px, 3vw, 34px); width: 2px; border-radius: 2px; background: #d8d4c4; }

/* ==================================================================
   Where Sanctity sits
   ==================================================================

   Three instruments on one question, set as three equal columns so none of
   them reads as a subsidiary of another, with Sanctity marked as the one the
   reader is standing in. Thin rules rather than cards: this is a statement
   about position, not three products competing for a click. */

.stack { padding: clamp(64px, 8vw, 120px) 0; background: var(--paper); }
.stack-head { max-width: 60ch; }
.stack-head h2 { margin: 14px 0 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.16; letter-spacing: -.018em; font-weight: 500; text-wrap: balance; }
.stack-list { margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stack-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 30px 0; }
.stack-item + .stack-item { padding-left: 28px; border-left: 1px solid var(--line); }
.stack-n { font-size: 12px; letter-spacing: .12em; color: #6a6e67; font-variant-numeric: tabular-nums; }
.stack-item h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stack-item h3 em { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #2368c2; }
.stack-item p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #4b4f4a; max-width: 36ch; }
.stack-item a { margin-top: auto; padding-top: 10px; font-size: 14.5px; color: #2368c2; }
.stack-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The one the reader is in carries a quiet mark along the top rule. */
.stack-item.is-here::before { content: ""; position: absolute; top: -1px; left: 0; right: 28px; height: 2px; background: #191919; }
.stack-item + .stack-item.is-here::before { left: 28px; }
.stack-promise { margin: clamp(28px, 3.4vw, 40px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; color: #4b4f4a; max-width: 70ch; }
.stack-promise a { color: #2368c2; }

@media (max-width: 860px) {
  .stack-list { grid-template-columns: 1fr; }
  .stack-item, .stack-item + .stack-item { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .stack-item.is-here::before, .stack-item + .stack-item.is-here::before { left: 0; right: 0; }
  .stack-item a { padding-block: 10px; }
}

/* The hero line: the brand's own sentence, set as the headline. */
.hero h1.hero-line { font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.1; letter-spacing: -.01em; }
.hero h1.hero-line .hero-subline { white-space: normal; }
@media (max-width: 700px) { .hero h1.hero-line { font-size: clamp(2.1rem, 9.6vw, 3rem); } }

/* The live count above the headline, with a small pulse that says it is live. */
.hero-count { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.hero-count i { width: 7px; height: 7px; border-radius: 50%; background: #3fa66b; box-shadow: 0 0 0 0 #3fa66b66; animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 #3fa66b66; } 70% { box-shadow: 0 0 0 9px #3fa66b00; } 100% { box-shadow: 0 0 0 0 #3fa66b00; } }
@media (prefers-reduced-motion: reduce) { .hero-count i { animation: none; } }

/* ==================================================================
   Texture, 23 September
   ================================================================== */

/* How far an Article has to go, drawn. It fills when the section comes into
   view, so the numbers read as something that moves, which they are. */
.written-meter { display: inline-block; vertical-align: middle; width: 64px; height: 4px; margin-right: 10px; border-radius: 4px; background: #e6e5df; overflow: hidden; }
.written-meter i { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: #8e8a7a; transform-origin: left; }
.js .motion-section .written-meter i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .35s; }
.js .motion-section.in-view .written-meter i { transform: scaleX(1); }
.written-source b { font-weight: 600; color: #3d403c; font-variant-numeric: tabular-nums; }

/* A line with a line: the rule beside it draws itself in. */
.js .motion-section .written-article.is-proposed::before { transform: scaleY(0); transform-origin: top; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .25s; }
.js .motion-section.in-view .written-article.is-proposed::before { transform: scaleY(1); }

/* The three instruments answer a pointer: the arrow leans the way it goes. */
.stack-item a span { display: inline-block; transition: transform .2s ease; }
.stack-item a:hover span { transform: translateX(3px); }
.stack-item a[target]:hover span { transform: translate(2px, -2px); }

/* Buttons press. A control that does not move when pressed feels like a
   picture of a control. */
.button { transition: transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.button:active { transform: translateY(1px) scale(.985); }
.button:focus-visible, .ask-choice:focus-visible, .robo-choice:focus-visible { outline: 2px solid #2368c2; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .js .motion-section .written-meter i, .js .motion-section .written-article.is-proposed::before { transform: none; transition: none; }
  .button:active { transform: none; }
}

/* A person's answers to deeper questions, under their eight. */
.record-subhead { margin: 28px 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6a6e67; }

/* ==================================================================
   The home page after the meeting of 23 September
   ==================================================================

   The question is a card, not a black band across the page: a white side
   saying why it matters and a dark side with the question, the same shape
   as a card in the Sanctum, so the home page shows what the Sanctum is.
   And the Constitution is all eight Articles on one screen, one row each. */

.ask { background: var(--paper); color: var(--ink); padding: clamp(40px, 5vw, 80px) 0; }
.ask-card {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  border: 1px solid #deded9; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 50px rgba(20, 22, 20, .07);
}
.ask .ask-intro { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; }
.ask .ask-intro .eyebrow { color: #6a6e67; }
.ask-title { margin: 18px 0 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ask .ask-lead { color: #4b4f4a; margin-top: 16px; }
.ask .ask-note { color: #6a6e67; margin-top: auto; padding-top: 24px; font-size: 13.5px; }
.ask .ask-positions { padding: clamp(26px, 3vw, 44px); background: #191919; color: #f4f4f2; }
.ask-label { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a4ab9f; }
.ask .ask-positions h2 {
  margin: 14px 0 0; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.16;
  letter-spacing: -.015em; font-weight: 500; color: #fff; text-wrap: balance;
}
.ask-choice[data-tone="red"] { --side: #e0503f; --tone-text: #ff8b7c; }
.ask-choice[data-tone="yellow"] { --side: #e9b43c; --tone-text: #f3c95e; }
.ask-choice[data-tone="green"] { --side: #3fae6a; --tone-text: #6fd49b; }
.ask-choice[data-tone="blue"] { --side: #3d7fe8; --tone-text: #8db6ff; }
.ask .ask-choices { margin-top: 24px; }
.ask-choice {
  border-width: 2px; border-color: #383838; min-height: 104px; justify-content: flex-start;
  background: linear-gradient(180deg, #262626, #1e1e1e);
  box-shadow: inset 0 3px 0 var(--side), 0 8px 18px -6px rgba(0, 0, 0, .55);
}
.ask-choice .choice-scale { display: inline-flex; align-items: center; gap: 3px; height: 8px; margin-bottom: 4px; }
.ask-choice .choice-scale i { width: 16px; height: 4px; border-radius: 3px; background: var(--pip); opacity: .28; }
.ask-choice .choice-scale i.on { height: 8px; opacity: 1; }
.tv-ladder { display: inline-flex; align-items: center; gap: 4px; }
.tv-ladder i { width: 18px; height: 7px; border-radius: 4px; }
.ask-choice:hover:not(:disabled), .ask-choice:focus-visible { border-color: var(--side); background: color-mix(in srgb, var(--side) 14%, #1d1d1d); }
.ask.is-answered .ask-choice.is-mine { border-color: var(--side); background: color-mix(in srgb, var(--side) 22%, #1d1d1d); }
.ask-bar em { background: var(--side, #7ea6ff); }
.button-light { background: #fff; color: #171716; }
.button-light:hover { background: #ececea; transform: translateY(-2px); }
.ask .ask-read { color: #9db6ea; }
@media (max-width: 900px) {
  .ask-card { grid-template-columns: 1fr; }
  .ask .ask-note { margin-top: 0; }
}

/* All eight, on one screen. The intro sits to the left and stays put; the
   rows are the document. */
.written-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.written-shell .written-intro .written-actions { margin-top: 26px; }
.written-list.written-compact { margin: 0; border-top: 1px solid var(--line); }
.written-compact .written-article {
  display: grid; grid-template-columns: 40px minmax(90px, 128px) minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px;
  padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line);
}
.written-compact .written-article.is-proposed { padding-left: 0; }
.written-compact .written-article.is-proposed::before { display: none; }
.written-compact .written-number { font-size: 12px; letter-spacing: .08em; color: #8a8e87; font-variant-numeric: tabular-nums; }
.written-name { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.written-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.written-compact .written-line { margin: 0; font-size: 15.5px; line-height: 1.45; max-width: none; }
.written-compact .is-waiting .written-line { color: #6a6e67; }
.written-compact .written-source { margin: 0; font-size: 12.5px; white-space: nowrap; text-align: right; }
.written-compact .is-proposed .written-source { color: #8a6d1f; }
.written-compact .is-adopted .written-source { color: #1f6a3f; }
.written-compact .written-meter { width: 44px; margin-right: 8px; }
#constitution.written { padding: clamp(40px, 4.5vw, 72px) 0; }
@media (max-width: 1100px) {
  .written-compact .written-article { grid-template-columns: 34px minmax(80px, 104px) minmax(0, 1fr); }
  .written-compact .written-source { grid-column: 3; text-align: left; white-space: normal; }
}
@media (max-width: 860px) {
  .written-shell { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .written-compact .written-article { grid-template-columns: 32px minmax(0, 1fr); }
  .written-compact .written-line, .written-compact .written-source { grid-column: 2; text-align: left; white-space: normal; }
}

/* The home question as the Sanctum's card in small: the scene in quotation
   marks on paper, the question on the dark side, and the same heavy stock. */
@font-face { font-family: "Urbanist"; src: url("/fonts/urbanist-latin-300-italic.woff2") format("woff2"); font-style: italic; font-weight: 300; font-display: swap; }
.ask-card {
  border-color: #d8d4c8; border-radius: 22px;
  box-shadow: 0 1px 0 #ece9e0, 0 2px 0 #e2ded3, 0 3px 0 #d8d3c6, 0 4px 0 #cdc8ba, 0 22px 40px -14px rgba(33, 28, 14, .30), 0 60px 100px -46px rgba(33, 28, 14, .40);
}
.ask .ask-intro { background: #faf8f3 url("/images/paper.webp") 0 0 / 700px 700px repeat; justify-content: center; }
.ask .ask-intro .eyebrow { margin-bottom: 26px; }
.ask .scene { position: relative; margin: 0; padding: 50px 0 0; }
.ask .scene::before {
  content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 31px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%23d3cab3' d='M0 36V22C0 10 6 3 18 0l2 4C13 7 10 11 10 17h8v19zm28 0V22c0-12 6-19 18-22l2 4c-7 3-10 7-10 13h8v19z'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
}
.ask .scene p { margin: 0; font-style: italic; font-weight: 300; font-size: clamp(20px, 1.6vw, 27px); line-height: 1.42; color: #1f211e; }
.ask .ask-positions {
  background-color: #161616;
  background-image: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, .06), transparent 60%);
}

/* ==================================================================
   The inheritance (src/views/home-visual.js)
   ==================================================================

   The picture at the top of the home page: people, the eight Articles and AI,
   with answers flowing from one to the next. MC chose it on 23 September. */

/* The first screen holds the headline and the picture together. */
.page-home .hero { padding-block: clamp(34px, 5vh, 56px) 28px; }
.home-visual { position: relative; z-index: 2; width: min(100%, 980px); margin: clamp(22px, 3vh, 36px) auto 0; }
.home-visual svg { display: block; width: 100%; height: auto; overflow: visible; }

/* One drawing at a time. (Scoped to .home-visual so the rule above, which is
   more specific than a bare class, cannot show both.) */
.home-visual .iv-narrow { display: none; }
@media (max-width: 700px) {
  .home-visual .iv-wide { display: none; }
  .home-visual .iv-narrow { display: block; }
}

/* Wires, and what travels on them. */
.iv-wire { fill: none; stroke: #dcdad3; stroke-width: 1.4; transition: stroke .25s ease, opacity .25s ease; }
.iv-flow circle { pointer-events: none; }
.iv-live { pointer-events: none; filter: drop-shadow(0 0 6px currentColor); }

/* The eight. */
.iv-node { cursor: pointer; }
.iv-node:focus-visible { outline: none; }
.iv-pill { fill: #fff; stroke: #d6d2c6; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(33, 28, 14, .10)); transition: stroke .2s ease, fill .2s ease; }
.iv-name { font: 500 14px "Urbanist", "Avenir Next", Arial, sans-serif; fill: #191919; }
.iv-count { font: 600 12.5px "Urbanist", Arial, sans-serif; fill: #6a6e67; font-variant-numeric: tabular-nums; }
.iv-track { fill: #ecebe6; }
.iv-fill { fill: #b9bbb5; }
.iv-node:hover .iv-pill, .iv-node:focus-visible .iv-pill, .iv-node.is-on .iv-pill { stroke: #191919; stroke-width: 1.6; }
.iv-node:focus-visible .iv-pill { stroke: #2368c2; stroke-width: 2; }
.iv-node:hover .iv-wire, .iv-node:focus-visible .iv-wire, .iv-node.is-on .iv-wire { stroke: #191919; opacity: .55; }
/* Pointing at one quiets the other seven. */
.inherit-visual.is-focus .iv-node:not(.is-on) { opacity: .38; }
.iv-node { transition: opacity .25s ease; }
.iv-node.is-bumped .iv-pill { animation: iv-bump .9s ease; }
.iv-node.is-bumped .iv-count { fill: #191919; }
@keyframes iv-bump { 30% { fill: #eef4fe; stroke: #3d7fe8; } }

/* The people. */
.iv-people-hit { fill: transparent; }
.iv-people:focus-visible { outline: none; }
.iv-people:focus-visible .iv-people-hit, .iv-people:hover .iv-people-hit { fill: rgba(25, 25, 25, .035); }
.iv-crowd circle { transition: transform .3s ease; }
.js .iv-crowd circle { animation: iv-breathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.js .iv-crowd circle:nth-child(3n) { animation-delay: -1.3s; }
.js .iv-crowd circle:nth-child(3n + 1) { animation-delay: -2.6s; }
@keyframes iv-breathe { 50% { transform: scale(.72); } }

/* Pixel's seat: a pad to stand on, where every wire ends. The robot itself
   is the site's one robot, moved here by public/js/features/home-visual.js
   while the picture is on screen. When a real answer reaches it, the wire it
   came along and the pad glow in the answer's colour. */
.iv-pad { fill: #3d7fe8; opacity: .14; filter: blur(3px); transition: fill .3s ease, opacity .3s ease; }
.iv-pad.is-lit { fill: var(--lit, #3d7fe8); opacity: .5; }
.iv-out.is-lit { stroke: var(--lit, #3d7fe8); stroke-width: 2.2; opacity: 1; }

/* Where the robot sits, over the seat. JS sizes it to the seat on screen. */
.iv-perch { position: absolute; z-index: 3; pointer-events: none; }
.iv-perch > .site-companion.is-docked {
  position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%;
  display: block; transform: none !important; transition: none; opacity: 1; pointer-events: none;
}
.iv-perch > .site-companion.is-docked .site-companion-button { width: 100%; height: 100%; }
.iv-perch > .site-companion.is-docked .site-companion-message { position: absolute; right: 70%; bottom: 88%; width: max-content; margin: 0; }
/* Until the page knows where the robot belongs, it is nowhere: never two. */
.hero-inherit .site-companion:not([data-placed]) { visibility: hidden; }

/* Captions under the three parts. */
.iv-cap { font: 600 11.5px "Urbanist", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; fill: #191919; }
.iv-sub { font: 400 13px "Urbanist", Arial, sans-serif; fill: #6a6e67; }

/* The key under the picture. */
.iv-caption { display: grid; justify-items: center; gap: 8px; margin-top: 10px; text-align: center; }
.tv-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; color: #4f544e; }
.tv-key span { display: inline-flex; align-items: center; gap: 6px; }
.tv-ladder { display: inline-flex; align-items: center; gap: 4px; }
.tv-ladder i { width: 18px; height: 7px; border-radius: 4px; }
.tv-note { max-width: 64ch; font-size: 14px; line-height: 1.55; color: #5f635c; }

/* What an Article reads, beside it, while it is pointed at. */
.iv-tip {
  position: absolute; z-index: 4; width: min(300px, 32%); display: grid; gap: 5px; padding: 14px 16px;
  border: 1px solid #e0ddd3; border-radius: 14px; background: #fffffd; text-align: left; pointer-events: none;
  box-shadow: 0 1px 0 #ecebe5, 0 18px 36px -14px rgba(33, 28, 14, .35);
  animation: iv-tip-in .18s ease;
}
@keyframes iv-tip-in { from { opacity: 0; transform: translateX(-6px); } }
.iv-tip b { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6a6e67; }
.iv-tip q { font-size: 15.5px; line-height: 1.4; color: #191919; }
.iv-tip span { font-size: 13px; line-height: 1.5; color: #5f635c; }
.iv-tip span em { font-style: normal; color: #191919; }
.iv-tip i { font-style: normal; font-size: 12.5px; color: #2368c2; }

@media (max-width: 700px) {
  .iv-name { font-size: 15px; }
  .iv-count { font-size: 14px; }
  .iv-cap { font-size: 13px; }
  .iv-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-flow { display: none; }
  .js .iv-crowd circle, .iv-node.is-bumped .iv-pill, .iv-tip { animation: none; }
  .site-companion.is-landing .site-companion-button { animation: none !important; }
}