/* The templates (use cases, about, careers, blog, wiki, glossary): built from
   the approved pages' own parts (design/home.css: the notched card, the
   bands and their 45 degree cuts, the 12 column grid, JD's guide lines, the
   workflow cards, the drawn covers, the FAQ, the ask). What is here is the
   little each template adds: a shorter hero, the reading head and body,
   lists of articles and terms. Same colours, same four type sizes. */

/* ---- the page hero: the homepage's, a little shorter ---- */
.page-hero { height: calc(max(600px, 86svh) + var(--cut)); }
.card-eyebrow { margin: 0 0 22px; color: var(--card-soft); }
.card-teal { --card: #7F979B; }
.card-cream { --card: #F1F0E6; }
.card-brown { --card: #4C3725; --card-ink: #E2E0D7; --card-soft: rgba(226, 224, 215, 0.78); --card-line: rgba(226, 224, 215, 0.18); --card-btn: #9F816B; --card-btn-ink: #1A1A15; --card-btn-hover: #B59F8D; --card-alt-hover: rgba(226, 224, 215, 0.08); }
.card-body p + p { margin-top: 12px; }
.card-actions.one { grid-template-columns: 1fr; }

/* ---- a band's head: the heading on the left six columns, its paragraph beside ---- */
.band-head { align-items: end; row-gap: 24px; }
.band-head h2 { grid-column: 1 / span 6; }
.band-head .lede { grid-column: 8 / span 5; margin: 0; }
.band-head .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.band.ink .band-head .eyebrow, .band.warm .band-head .eyebrow { color: rgba(226, 224, 215, 0.55); }
.band.warm { background: var(--warm-grey); color: var(--cream); }
.band.surface { background: var(--surface); color: var(--ink); }
.band.brown { background: var(--brown); color: var(--cream); }
.lede p { margin: 0; }
.lede p + p { margin-top: 12px; }

/* ---- the reading head: cream, the nav in ink, the title on the grid ---- */
.read-head { position: relative; background: var(--cream); color: var(--ink); padding: calc(var(--nav-h) + 96px) var(--gutter) calc(80px + var(--cut)); }
.read-head .nav-links a, .read-head .nav-menu { color: var(--ink); }
.read-head .wrap::before, .read-head .wrap::after { content: ''; position: absolute; top: -400px; bottom: -400px; width: 1px; background: var(--rule); pointer-events: none; }
.read-head .wrap::before { left: -24px; }
.read-head .wrap::after { right: -24px; }
.read-head { overflow: hidden; }
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumb-sep { opacity: 0.5; }
.read-head h1 { grid-column: 1 / span 9; margin: 0; font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.read-lede { grid-column: 1 / span 7; margin: 28px 0 0; font-size: 20px; line-height: 1.45; color: rgba(26, 26, 21, 0.75); }
.read-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 44px 0 0; color: var(--muted); }

/* ---- the reading body: notes and contents on the left, the text on seven columns ---- */
.read { background: var(--surface); color: var(--ink); }
.read .wrap { align-items: start; }
.read-aside { grid-column: 1 / span 3; position: sticky; top: 32px; display: grid; gap: 32px; padding-right: 24px; }
.read-aside .mono { margin: 0; color: var(--muted); }
.read-aside .who { font-size: 16px; line-height: 1.35; }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 0; color: rgba(26, 26, 21, 0.6); text-decoration: none; font-size: 15px; line-height: 1.3; transition: color 0.15s; }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on { box-shadow: inset 2px 0 0 var(--gold); padding-left: 12px; margin-left: -14px; }
.prose { grid-column: 4 / span 7; min-width: 0; font-size: 18px; line-height: 1.62; color: rgba(26, 26, 21, 0.86); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table, .prose figure { margin: 0 0 24px; }
.prose h2 { margin: 72px 0 20px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; color: var(--ink); scroll-margin-top: 24px; }
.prose h3 { margin: 44px 0 14px; font-size: 22px; line-height: 1.2; color: var(--ink); }
.prose h4 { margin: 32px 0 10px; font: 400 12px/1.4 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 28px; margin: 0 0 10px; }
.prose ul > li::before { content: ''; position: absolute; left: 2px; top: 0.68em; width: 6px; height: 6px; background: var(--gold); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 0.3em; font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; color: var(--muted); }
.prose blockquote { padding: 4px 0 4px 26px; box-shadow: inset 2px 0 0 var(--gold); font-size: 22px; line-height: 1.4; color: var(--ink); }
.prose blockquote p:last-child { margin: 0; }
.prose code { font: 400 0.86em "Fragment Mono", ui-monospace, monospace; background: rgba(26, 26, 21, 0.06); padding: 1px 5px; }
.prose hr { border: 0; height: 1px; background: var(--rule); margin: 48px 0; }
.prose img { display: block; width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; font: 400 11px/1.4 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.table { overflow-x: auto; margin: 0 0 28px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th { text-align: left; font: 400 11px/1.3 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.read-end { grid-column: 4 / span 7; margin-top: 72px; }

/* the "From Fragment" card at an article's end: the ask's teal card, notched */
.inline-ask { position: relative; background: #7F979B; color: var(--ink); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.inline-ask .inner { padding: 30px 30px 32px; }
.inline-ask .mono { margin: 0 0 16px; color: rgba(26, 26, 21, 0.7); }
.inline-ask h2 { font-size: clamp(26px, 2.4vw, 34px); max-width: 16em; }
.inline-ask p { margin: 14px 0 0; max-width: 34em; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.8); }
.inline-ask .card-btn { border-top: 1px solid rgba(26, 26, 21, 0.22); background: var(--ink); color: var(--cream); padding-left: 30px; }
.inline-ask .card-btn:hover { background: #34271C; }

/* ---- rows: a list of links, a hairline between, title left, words right ---- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows > li { border-bottom: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 26px 0 28px; color: inherit; text-decoration: none; transition: background 0.15s; }
.row .row-title { grid-column: 1 / span 5; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.row .row-body { grid-column: 7 / span 5; margin: 0; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.68); }
.row .arrow { grid-column: 12; justify-self: end; align-self: center; }
a.row:hover { background: rgba(26, 26, 21, 0.035); }
a.row:hover .row-title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 1px; }
a.row:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.band.ink .rows, .band.ink .rows > li, .band.warm .rows, .band.warm .rows > li, .problem .rows, .problem .rows > li { border-color: var(--line); }
.band.ink .row .row-body, .band.warm .row .row-body, .problem .row .row-body { color: rgba(226, 224, 215, 0.68); }
.band.ink a.row:hover, .band.warm a.row:hover { background: rgba(226, 224, 215, 0.04); }

/* ---- cards: the homepage's workflow cards, three or four across ---- */
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band-head + .cards { margin-top: 72px; }
.wcard .mono.kicker { margin: 0; color: var(--muted); }

/* ---- posts: the drawn covers, three across ---- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); margin-top: 72px; }
.posts .res .res-cover { flex: none; aspect-ratio: 4 / 3; }
.posts .res h3 { font-size: 22px; }
.posts:hover .res:not(:hover) { opacity: 0.75; }
.res-list.one { grid-template-columns: 1fr; grid-template-rows: none; }
.res-list.one .res.lead { grid-column: 1; grid-row: auto; flex-direction: row; min-height: 440px; }
.res-list.one .res.lead .res-cover { flex: 0 0 58%; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.filters button { all: unset; box-sizing: border-box; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; cursor: pointer; background: rgba(226, 224, 215, 0.08); color: var(--cream); font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.15s, color 0.15s; }
.filters button:hover { background: rgba(226, 224, 215, 0.16); }
.filters button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.filters button:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }

/* ---- use case: the numbers, the side by side, the impact in units ---- */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.figure { padding-top: 28px; border-top: 1px solid var(--line); }
.figure-value { display: block; font-size: clamp(56px, 6.4vw, 104px); line-height: 0.9; letter-spacing: -0.045em; }
.figure-label { display: block; margin-top: 18px; max-width: 16em; font-size: 16px; line-height: 1.4; color: rgba(226, 224, 215, 0.72); }
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); margin-top: 72px; }
.side { padding: 30px 30px 34px; background: rgba(26, 26, 21, 0.06); }
.side.with { background: #7F979B; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.side h3 { font-size: 26px; }
.side ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.side li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.45; color: rgba(26, 26, 21, 0.78); }
.side li::before { content: ''; position: absolute; left: 1px; top: 0.6em; width: 6px; height: 6px; background: rgba(26, 26, 21, 0.35); }
.side.with li::before { background: var(--ink); }
.units { display: grid; gap: 40px; }
.unit-row .mono { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; color: rgba(226, 224, 215, 0.62); }
.unit-row .mono b { font-weight: 400; color: var(--cream); }
.unit-grid { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; }
.unit-grid i { aspect-ratio: 1; background: rgba(226, 224, 215, 0.12); transition: background 0.3s; }
.unit-grid i.on { background: var(--cream); }
.unit-grid i.maybe { background: rgba(226, 224, 215, 0.45); }
.impact-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.impact-list li { padding: 18px 0 20px; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.35; }
.impact .wrap { row-gap: 64px; align-items: start; }
.impact .impact-copy { grid-column: 1 / span 5; }
.impact .units { grid-column: 7 / span 6; }
.impact .impact-copy h2 + .impact-list { margin-top: 48px; }

/* ---- about and careers: principles two across, a statement in large type ---- */
.statement { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -0.025em; }
.statement p { margin: 0; max-width: 22em; text-wrap: balance; }
.statement p + p { margin-top: 0.6em; color: var(--tint); }
.pairs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 0; margin-top: 72px; border-top: 1px solid var(--rule); }
.pair { padding: 32px 48px 40px 0; border-bottom: 1px solid var(--rule); }
.pair h3 { font-size: 26px; }
.pair p { margin: 14px 0 0; max-width: 30em; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
.band.ink .pairs, .band.ink .pair { border-color: var(--line); }
.band.ink .pair p { color: rgba(226, 224, 215, 0.7); }
.story { align-items: start; }
.story h2 { grid-column: 1 / span 4; }
.story .prose { grid-column: 6 / span 7; }
.jobs-dept { margin-top: 56px; }
.jobs-dept > .mono { margin: 0 0 14px; color: var(--muted); }

/* ---- the glossary: the letters, then each letter's terms ---- */
.letters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 44px; }
.letters a, .letters span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font: 400 12px/1 "Fragment Mono", ui-monospace, monospace; text-decoration: none; }
.letters a { background: rgba(26, 26, 21, 0.07); color: var(--ink); transition: background 0.15s, color 0.15s; }
.letters a:hover { background: var(--ink); color: var(--cream); }
.letters span { color: rgba(26, 26, 21, 0.28); }
.letter { align-items: start; padding: 40px 0 8px; }
.letter + .letter { border-top: 1px solid var(--rule); }
.letter > h2 { grid-column: 1 / span 2; font-size: clamp(44px, 4.4vw, 64px); line-height: 0.9; scroll-margin-top: 24px; }
.terms { grid-column: 3 / span 10; margin: 0; }
.term { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 0 32px; }
.term dt { grid-column: 1 / span 4; font-size: 22px; line-height: 1.2; }
.term dd { grid-column: 5 / span 6; margin: 0; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.75); }
.term dd a { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink); text-decoration: none; font: 400 11px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.term dd a .arrow { width: 14px; height: 14px; }

/* ---- 404 ---- */
.lost .read-lede a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .posts, .cards.three { grid-template-columns: 1fr 1fr; }
  .read-aside { display: none; }
  .prose, .read-end { grid-column: 1 / span 10; }
}
@media (max-width: 760px) {
  .page-hero { height: calc(max(560px, 92svh) + var(--cut)); }
  .read-head { padding: calc(var(--nav-h) + 56px) var(--gutter) calc(56px + var(--cut)); }
  .read-head .wrap::before, .read-head .wrap::after { display: none; }
  .read-head h1, .read-lede { grid-column: 1 / -1; }
  .read-lede { font-size: 18px; }
  .band-head h2, .band-head .lede { grid-column: 1 / -1; }
  .prose, .read-end { grid-column: 1 / -1; font-size: 17px; }
  .posts, .cards.three, .figures, .split, .pairs { grid-template-columns: 1fr; }
  .figure + .figure { margin-top: 40px; }
  .side + .side { margin-top: 16px; }
  .res-list.one .res.lead { flex-direction: column; min-height: 0; }
  .res-list.one .res.lead .res-cover { flex: none; aspect-ratio: 4 / 3; }
  .row .row-title, .row .row-body { grid-column: 1 / span 11; }
  .row .row-body { margin-top: 10px; }
  .row .arrow { grid-column: 12; grid-row: 1; }
  .impact .impact-copy, .impact .units, .story h2, .story .prose { grid-column: 1 / -1; }
  .unit-grid { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
  .pair { padding-right: 0; }
  .letter > h2 { grid-column: 1 / -1; margin-bottom: 20px; }
  .terms, .term dt, .term dd { grid-column: 1 / -1; }
  .term { grid-template-columns: 1fr; row-gap: 8px; }
  .letters a, .letters span { width: 30px; height: 30px; }
}

/* the squares fill in once, in order, when the chart comes into view (page.js) */
.units.waiting .unit-grid i.on, .units.waiting .unit-grid i.maybe { background: rgba(226, 224, 215, 0.12); }
@media (prefers-reduced-motion: reduce) { .units.waiting .unit-grid i.on { background: var(--cream); } .units.waiting .unit-grid i.maybe { background: rgba(226, 224, 215, 0.45); } }
.diff-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band.warm .diff-list { border-color: var(--line); }
.row .row-body.mono { font-size: 11px; line-height: 1.4; }
@media (max-width: 760px) { .diff-list.three { grid-template-columns: 1fr; } }
.res .excerpt { margin: 4px 0 0; max-width: 36em; font-size: 16px; line-height: 1.5; color: rgba(26, 26, 21, 0.72); }
.blog-list { padding-top: 112px; }
.read-links { grid-column: 1 / -1; margin: 36px 0 0; }
.topic-band h2 a { color: inherit; text-decoration: none; }
.topic-band h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.topic-more { margin: 32px 0 0; }
.inline-ask .card-btn { height: 64px; }

/* ---- the media kit: each logo on its own ground, square, three across ---- */
.logos { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
.logo-ground { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 18%; }
.logo-ground.cream { background: var(--cream); box-shadow: inset 0 0 0 1px var(--rule); }
.logo-ground.surface { background: var(--surface); }
.logo-ground.ink { background: var(--ink); }
.logo-ground.brown { background: var(--brown); }
.logo-ground img { display: block; width: 100%; max-height: 100%; }
.logo-copy { padding-top: 18px; }
.logo-copy h3 { font-size: 22px; }
.logo-copy p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: rgba(26, 26, 21, 0.68); }
.logo-get { display: flex; gap: 18px; margin-top: 14px !important; }
.logo-get a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
@media (max-width: 760px) { .logos { grid-template-columns: 1fr 1fr; gap: 32px var(--gap); } }
/* the founders: one to a row, the photo on the left, the bio beside it */
.founders { list-style: none; margin: 72px 0 0; padding: 0; border-top: 1px solid var(--line); }
.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: 40px 0; border-bottom: 1px solid var(--line); }
.founder-photo { grid-column: 1 / span 4; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(226, 224, 215, 0.06); }
.founder-copy { grid-column: 6 / span 6; }
.founder-copy h3 { font-size: 26px; }
.founder-copy p { margin: 14px 0 0; max-width: 34em; font-size: 16px; line-height: 1.55; color: rgba(226, 224, 215, 0.7); }
.founder-copy .founder-role { margin-top: 10px; color: rgba(226, 224, 215, 0.55); }
.founder-copy .logo-get { margin-top: 22px !important; }
.founder-copy .logo-get a { color: var(--cream); }
@media (max-width: 760px) { .founder-photo { grid-column: 1 / span 8; } .founder-copy { grid-column: 1 / -1; margin-top: 24px; } }
.logo-ground.mark { padding: 32%; }

/* ---- a report: what's inside on the left, the form in the teal notched card ---- */
.report .wrap { align-items: start; }
.report-copy { grid-column: 1 / span 6; }
.report-cover { aspect-ratio: 4 / 3; margin-bottom: 48px; }
.report-copy > .mono { margin: 0 0 14px; color: var(--muted); }
.report-card { grid-column: 8 / span 5; position: sticky; top: 32px; background: #7F979B; color: var(--ink); clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
  --card-ink: #1A1A15; --card-soft: rgba(26, 26, 21, 0.8); --card-line: rgba(26, 26, 21, 0.22); --card-btn: #1A1A15; --card-btn-ink: #E2E0D7; --card-btn-hover: #34271C; --card-in: 30px; }
.report-card .inner { padding: 30px 30px 8px; }
.report-card .inner .mono { margin: 0 0 14px; color: rgba(26, 26, 21, 0.7); }
.report-card h2 { font-size: clamp(28px, 2.6vw, 38px); }
.report-card .form-done { padding: 30px; }
.report-card .form-done p { margin: 12px 0 24px; font-size: 16px; line-height: 1.5; }
.report-card.sent .form-fields, .report-card.sent .card-actions, .report-card.sent > .inner { display: none; }
@media (max-width: 760px) { .report-copy, .report-card { grid-column: 1 / -1; } .report-card { position: static; margin-top: 48px; } }

/* ---- a press release's end: About Fragment, then who to contact ---- */
.release-end { display: grid; gap: 40px; padding-top: 40px; border-top: 1px solid var(--rule); }
.release-end .prose { grid-column: auto; }
.release-end h3 { margin-top: 0; }
.release-contact .mono { margin: 0 0 10px; color: var(--muted); }
.release-contact p:not(.mono) { margin: 0; font-size: 17px; line-height: 1.5; }
.release-contact a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.read-aside .who .link { font-size: 11px; }

/* ---- the homepage's security band: the ACE page's enterprise-ready band (home.css), the Trust center link under its claim ---- */
.security-head { grid-column: 1 / span 5; }
.security-head h2 { max-width: 9em; text-wrap: balance; }
.security-head .link { margin-top: 32px; }
@media (max-width: 760px) { .security-head { grid-column: 1 / -1; } .security-head h2 { max-width: none; text-wrap: wrap; } }