/* ==========================================================================
   Sheet layout and page patterns for multiversal.ventures.
   Tokens and primitives come from hl.css (HL-SG-001 REV A, shared with
   hammer.ai). This file carries the sheet, the reading column, and the band
   patterns every page here reuses, so a page file is content and nothing else.
   ========================================================================== */

/* ---- palette: same standard, a different print ------------------------------
   hl.css is Hammer's sheet, copied verbatim so it can be re-synced. This block is
   the only place the two sites differ in colour. Hammer is a blueprint on warm
   stock with an orange finding. Multiversal is the diazo print of the same set:
   cool drafting film, violet line work, and a magenta redline, which is also the
   magenta of the firm's original cube. Proportions and rules are unchanged:
   the accent still marks exactly one thing per view.

   The token names stay Hammer's (--blue, --orange) so shared patterns keep
   working; read them as "structure" and "accent".

   Contrast, measured: ink on paper 15.5, graphite 7.2, violet 7.6, accent text
   7.2. Paper on the accent is 4.9 and clears AA, ink on it is 3.2 and does not,
   so the live button takes paper where Hammer's takes ink.                     */

:root {
  --paper:    #F4F5F8;  /* drafting film, a touch cool */
  --sheet:    #FFFFFF;
  --ink:      #181B33;  /* indigo-black */
  --graphite: #4B5169;
  --blue:     #4A3FA3;  /* structure: diazo violet */
  --orange:   #C8207A;  /* accent: magenta redline. One per view. */
  --orange-text: #9C1560;

  --hair:     #D4D7E0;
  --hair-2:   #E9EBF1;
  --field:    #B7BCCB;
  --link-under: #B7BCCB;
}
.btn--go { color: var(--paper); }
.btn--go:hover { color: var(--paper); }
.badge--find { color: var(--paper); }

/* ---- sheet ------------------------------------------------------------ */

.sheet { max-width: 1360px; margin: 0 auto; padding: 0 40px 96px; }
@media (max-width: 900px) { .sheet { padding: 0 20px 64px; } }

.sheethead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 32px;
  padding: 20px 0 12px; border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--graphite);
}
.sheethead a { border: 0; color: var(--graphite); }
.sheethead a:hover { color: var(--orange); }
.sheethead .l, .sheethead .r { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.sheethead .plate { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sheethead .brand { border: 0; color: var(--ink); font-family: var(--sans); font-weight: 800;
  font-size: 17px; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; }
/* The header aligns on text baselines. A flex container takes its baseline from the
   first item that takes part in baseline alignment, and an image's baseline is its
   bottom edge, so with the mark centred the wordmark rode 10px above the nav. The mark
   opts out; the wordmark supplies the baseline. */
.sheethead .brand { display: inline-flex; align-items: baseline; gap: 9px; }
.sheethead .brandmark { width: 24px; height: 24px; flex: none; align-self: center; }
.sheethead .brand:hover { color: var(--orange); }
.sheethead nav { display: flex; gap: 24px; flex-wrap: wrap; }
/* every link reserves the underline, so the current page does not make the header taller */
.sheethead nav a { white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.sheethead nav a[aria-current] { color: var(--ink); border-bottom-color: var(--orange); }
@media (max-width: 1080px) { .sheethead nav { gap: 16px; } }
/* anchored sections land clear of the header rule */
:target { scroll-margin-top: 24px; }
.sheethead .status { color: var(--orange); white-space: nowrap; }
.sheethead .sheetno { white-space: nowrap; }
/* Eight links plus a revision date need about 1180px on one row. Below that the date
   wrapped under the nav and left a gap, so the plate keeps the date and the head drops it. */
@media (max-width: 1180px) { .sheethead .status, .sheethead .rev { display: none; } }

/* Narrow sheet: the title block and the nav each get their own line rather
   than fighting for one, so nothing has to shrink or run off the paper. */
@media (max-width: 900px) {
  .sheethead { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0 10px; }
  .sheethead .l { gap: 14px; }
  .sheethead .r { gap: 14px; }
  .sheethead nav { gap: 10px 18px; }
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 0; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.footnav { display: flex; gap: 18px; flex-wrap: wrap; }
/* uppercase is the sheet foot's typography, not its text: a reader hears the address, not the letters */
.sheetfoot, .sheetfoot a { text-transform: uppercase; }

.sheetfoot {
  margin-top: var(--s8); padding: 16px 0 0; border-top: 2px solid var(--ink);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--graphite);
}

/* ---- the reading column and the figure rail ---------------------------
   Prose keeps a 64ch measure on the left. Figures float into a rail on the
   right, so the argument and the thing it is about are on screen together.
   A float rather than a grid track on purpose: prose then flows past a
   figure continuously instead of being parcelled into rows, which is what
   leaves dead paper between a tall widget and a short paragraph.        */

/* The rail is drawn as construction grid behind the figures, so an empty
   stretch reads as reserved space with something coming rather than as dead
   paper. Same 28px module as the hero plate. */
.doc {
  max-width: 1300px;
  background-image:
    linear-gradient(to right, var(--hair) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg,  var(--hair-2) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--hair-2) 0 1px, transparent 1px 28px);
  background-repeat: no-repeat;
  background-size: 1px 100%, 600px 100%, 600px 100%;
  background-position: right 600px top, right top, right top;
}
.doc::after { content: ""; display: block; clear: both; }
/* One measure for the whole column, in px. `ch` is relative to the element's
   own font-size, so 64ch on a 34px heading is nearly 1200px and the heading
   runs straight through the rail. 640px is the 64ch the body text wants. */
.doc > * { max-width: 640px; }

/* markdown wraps a lone image in a paragraph; that is still a plate, so it
   goes to the rail alongside anything authored as a <figure> */
.doc > figure.fig,
.doc > .rail,
.doc > p:has(> img:only-child) {
  float: right; clear: right;
  width: 600px; max-width: 46%;
  margin: 6px 0 var(--s5) 48px;
}
.doc > p:has(> img:only-child) { line-height: 0; }
/* a figure that genuinely needs the width takes the whole sheet */
.doc > figure.fig.fig--full,
.doc > .fig--full { float: none; width: auto; max-width: none; margin: var(--s5) 0; }

@media (max-width: 1180px) {
  .doc { max-width: 68ch; background-image: none; }
  .doc > * { max-width: none; }
  .doc > figure.fig, .doc > .rail, .doc > p:has(> img:only-child) {
    float: none; width: auto; max-width: none; margin: var(--s5) 0; }
}

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

article p, article li { color: var(--ink); }
article { font-size: 17px; }
article > p:first-of-type { font-size: 18px; }
article img { max-width: 100%; height: auto; border: 1px solid var(--hair); display: block; }
article ul, article ol { padding-left: 22px; }
article li { margin: 0.35em 0; }
article strong { font-weight: 600; }

figure.fig { margin: var(--s5) 0; }
figure.fig img, figure.fig svg { display: block; width: 100%; border: 1px solid var(--hair); }
figure.fig iframe {
  display: block; width: 100%; border: 1px solid var(--hair); border-radius: 0;
  background: var(--sheet);
}
figure.fig figcaption {
  margin-top: 10px; color: var(--graphite);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: 0.08em;
  text-transform: uppercase;
}
figure.fig figcaption a { font-family: var(--mono); }

/* ---- editorial primitives ---------------------------------------------- */

.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite); margin: 0 0 10px; }
.meta a { border: 0; }

.series-badge {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue); border: 1px solid var(--blue);
  padding: 4px 10px; margin-bottom: 12px; text-decoration: none;
}
.series-badge:hover { color: var(--orange); border-color: var(--orange); }
.series-badge .pt { color: var(--graphite); }

.callout { border: 1px solid var(--hair); border-left: 2px solid var(--blue);
  background: var(--sheet); padding: 18px 22px; margin: var(--s3) 0; }
.callout b { font-family: var(--sans); font-weight: 700; }
.callout p { margin: 0.35em 0; }

blockquote { margin: var(--s3) 0; padding: 2px 0 2px 20px;
  border-left: 1px solid var(--hair); color: var(--graphite); font-style: italic; }

.pull { margin: var(--s5) 0; padding: 0 0 0 20px; border-left: 2px solid var(--orange); max-width: 34em; }
.pull q { quotes: none; font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--ink); }
.pull .by { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); margin: var(--s3) 0; }
.compare > div { background: var(--sheet); padding: 20px 22px; }
.compare h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.compare .pos h4 { color: var(--blue); }
.compare .neg h4 { color: var(--orange); }
.compare p { margin: 0.3em 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

.video { position: relative; aspect-ratio: 16/9; margin: var(--s3) 0 6px;
  overflow: hidden; border: 1px solid var(--hair); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcap { margin: 0 0 var(--s3); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }

a.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); border: 1px solid var(--hair);
  padding: 3px 10px; margin: 0 6px 6px 0; text-decoration: none; }
a.tag:hover { color: var(--orange); border-color: var(--orange); }

/* a table can outgrow the prose column: let it scroll in its own container */
.doc > table, article table { display: block; overflow-x: auto; }
article table > tbody, article table > thead { display: table; width: 100%; }

/* ---- page head ----------------------------------------------------------- */

.head { padding: var(--s5) 0 var(--s3); }
.head .sec h1 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; }
.head .sec { flex-wrap: wrap; }
.dek { font-size: 16.5px; line-height: 1.6; color: var(--graphite); max-width: 46em; margin: 0 0 var(--s2); }
.standfirst { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink); max-width: 40em; margin: 0 0 var(--s2); }
.toc { display: flex; gap: 20px; flex-wrap: wrap; margin-top: var(--s2); }
.toc a { border: 0; color: var(--blue); }
.toc a:hover { color: var(--orange); }
.crumb { margin: 0 0 14px; }
.crumb a { border: 0; color: var(--graphite); }
.crumb a:hover { color: var(--orange); }

/* ---- bands ---------------------------------------------------------------- */

.band { position: relative; padding: var(--s8) 0; border-bottom: 1px solid var(--hair); }
.band--tight { padding: var(--s5) 0; }
.band:last-of-type { border-bottom: 0; }
.secdek { max-width: 44em; margin: 0 0 var(--s3); font-size: 16.5px; line-height: 1.65; color: var(--graphite); }
.secdek--wide { max-width: 55em; }
.split { display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 1fr); gap: 56px; align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
@media (max-width: 1000px) { .split, .split--wide { grid-template-columns: 1fr; gap: 32px; } }
.afterlist { margin: var(--s3) 0 0; display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
.afterlist > a:not(.btn), .more { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---- cell grids: 1px gaps on a hairline ground ---------------------------- */

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: var(--s3); border: 1px solid var(--hair); background: var(--hair); }
.pgrid--2 { grid-template-columns: repeat(2, 1fr); }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); }
.pcell { padding: 26px 30px 28px; background: var(--paper); }
.pgrid--sheet .pcell { background: var(--sheet); }
.pcell h3 { margin: 9px 0 8px; font-size: 19px; line-height: 1.2; }
.pcell p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--graphite); }
.pcell .label { color: var(--blue); }
.pcell .more { display: inline-block; margin-top: 12px; }
@media (max-width: 1000px) { .pgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .pgrid, .pgrid--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pgrid--4 { grid-template-columns: 1fr; } }
.proof-number { display: block; min-height: 1.2em; font-family: var(--sans); font-weight: 800;
  font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }

.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: var(--s3); border: 1px solid var(--ink); background: var(--ink); }
.boundary { padding: 30px; background: var(--sheet); display: flex; flex-direction: column; }
.boundary-head { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.boundary-head .aside { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--graphite); }
.boundary h3 { margin: 14px 0 10px; font-size: 23px; }
.boundary p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--graphite); }
.boundary .afterlist { margin-top: auto; padding-top: var(--s2); }
@media (max-width: 760px) { .boundary-grid { grid-template-columns: 1fr; } }

/* ---- keyed rows: ink top rule, hair dividers ------------------------------ */

.qkeys, .terms, .steps { margin: 0; border-top: 1px solid var(--ink); max-width: 72em; }
.qkeys > div { display: grid; grid-template-columns: 11ch 1fr; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.5; }
.qkeys dt { padding-top: 3px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.qkeys dd { margin: 0; }
.terms > div { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--hair); }
.terms dt { font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1.35; }
.terms dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--graphite); }
.terms dd b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .terms > div { grid-template-columns: 1fr; gap: 4px; } }
.steps { list-style: none; padding: 0; margin: var(--s2) 0 var(--s3); }
.steps li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.steps .label { display: block; color: var(--orange-text); margin-bottom: 4px; }
.steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--graphite); max-width: 62em; }

/* a list of things we will not do: the orange rule is the refusal mark */
.refuse { list-style: none; margin: var(--s2) 0 0; padding: 0; border: 1px solid var(--hair); background: var(--sheet); max-width: 72em; }
.refuse li { padding: 14px 18px; border-bottom: 1px solid var(--hair); border-left: 3px solid var(--orange);
  font-size: 15px; line-height: 1.55; color: var(--graphite); margin: 0; }
.refuse li:last-child { border-bottom: 0; }
.refuse li b { color: var(--ink); font-family: var(--sans); font-weight: 700; }

/* ---- schedule: plate, status, entry. A list, not a card wall. -------------- */

.index { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.index li { border-bottom: 1px solid var(--hair); margin: 0; }
.index a { display: grid; grid-template-columns: 96px 150px minmax(0, 1fr); gap: 24px;
  align-items: baseline; border: 0; padding: 20px 0; color: inherit; }
.index a:hover .t { color: var(--orange); }
.index .plate { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--orange-text); }
.index .kind { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--graphite); text-transform: uppercase; }
.index .body { display: flex; flex-direction: column; gap: 8px; }
.index .t { font-family: var(--sans); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.index .d { font-size: 15px; line-height: 1.55; color: var(--graphite); max-width: 62ch; }
.index .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.index .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite); border: 1px solid var(--hair); padding: 3px 9px; }
@media (max-width: 820px) { .index a { grid-template-columns: 1fr; gap: 6px; } }

/* ---- receipt: a bounded record of what was done and what was declined ------ */

.receipt { margin: 0; }
.rhead { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; padding: 10px 16px;
  border: 1px solid var(--ink); border-bottom: 0; background: var(--ink); color: var(--paper); }
.rhead .label { color: var(--orange); }
.rhead code { padding: 0; border: 0; background: transparent; color: var(--paper); font-size: 13px; }
.rbody { border: 1px solid var(--ink); background: var(--sheet); }
.rrow { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.rrow:last-child { border-bottom: 0; }
.rrow .label { display: block; margin-bottom: 4px; }
.rrow p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.rrow--refuse { border-left: 3px solid var(--orange); }
.rrow--refuse .label { color: var(--orange-text); }
.rrow--refuse p { color: var(--graphite); }
.rfoot { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 16px; background: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--graphite); }
.receipt figcaption { margin-top: 10px; font-family: var(--mono); font-size: 10px;
  line-height: 1.7; letter-spacing: .08em; color: var(--graphite); text-transform: uppercase; }

/* ---- the one ask ------------------------------------------------------------ */

.ask-band { margin-top: var(--s8); padding: 28px 30px; border: 1px solid var(--hair);
  border-left: 3px solid var(--orange); background: var(--sheet);
  display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.ask-band .label { color: var(--orange-text); }
.ask-band h2 { margin: 8px 0 6px; font-size: 24px; }
.ask-band p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--graphite); max-width: 44em; }

.foot { margin: var(--s5) 0 0; display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.foot a { border: 0; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 22px; margin: 1.8em 0 0.3em; }
.ext::after { content: " \2197"; }

/* ---- narrow sheet ------------------------------------------------------------
   Below 900px the header is a title block and a MENU control. The links become a
   ruled list, one per line, big enough to hit with a thumb.                     */

.navtoggle { display: none; }
@media (max-width: 900px) {
  .sheethead { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 0 12px; }
  .sheethead .l { gap: 8px 14px; padding-right: 84px; min-height: 32px; align-items: center; }
  .sheethead .brand { font-size: 16px; }
  .js .navtoggle { display: block; position: absolute; right: 0; top: 12px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0;
    padding: 8px 12px; cursor: pointer; min-width: 68px; }
  .js .navtoggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
  .sheethead .r { margin-top: 12px; }
  .js .sheethead .r { display: none; margin-top: 14px; }
  .js .sheethead.is-open .r { display: block; }
  .js .sheethead nav { display: block; border-top: 1px solid var(--hair); }
  .js .sheethead nav a { display: block; padding: 14px 0; font-size: 12px; border-bottom: 1px solid var(--hair); }
  .js .sheethead nav a[aria-current] { border-bottom-color: var(--hair); color: var(--orange-text); }
  .js .sheethead .status { display: block; padding-top: 12px; }

  .band { padding: 48px 0; }
  .band--tight { padding: 36px 0; }
  .head { padding: 28px 0 16px; }
  .sec { gap: 8px 14px; flex-wrap: wrap; }
  .toc { gap: 10px 18px; }
  .pcell { padding: 22px 20px 24px; }
  .boundary { padding: 24px 20px; }
  .ask-band { margin-top: 48px; padding: 24px 20px; }
  .ask-band .btn { width: 100%; text-align: center; }
  .refuse li { padding: 14px 16px; }
  .qkeys > div { grid-template-columns: 1fr; gap: 2px; }
  .index a { padding: 18px 0; }
  .index .t { font-size: 19px; }
  .sheetfoot { flex-direction: column; gap: 14px; }
  /* a 10px mono link is a 17px target; padding lifts it past the 24px minimum without changing the type */
  .footnav { gap: 4px 16px; }
  .footnav a { display: inline-block; padding: 6px 0; }
  .afterlist .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 520px) {
  h2 { font-size: 23px; }
  .standfirst { font-size: 18px; }
  .video { margin-left: -20px; margin-right: -20px; border-left: 0; border-right: 0; }
}
/* long mono strings and URLs must not push the sheet wider than the screen */
main { overflow-wrap: anywhere; }
pre, code { overflow-wrap: normal; }