/* THE SPEKTX IP PAGE (ip.html): the family tree, the member cards, the standings tables and the demonstrator pictures.
   Everything else (header, hero, sections, principles, company card, footer) comes from styles.css, the home page's own
   sheet, so the page wears the SPEKTX logo's palette: black ground, chrome type, the prism as the accent. Each member of the
   family takes one stop of the prism as its colour. (Kevin 2026-10-08: "build a new spektx ip sub page".) */

/* hero: the copy beside a picture of the foundation's demonstrator */
@media (min-width: 1040px) { .hero-inner.ip-hero { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); } }
.hero-shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.hero-shot img { width: 100%; height: auto; display: block; }
.hero-shot figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-top: 1px solid var(--line); line-height: 1.5; }
.boundary { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 760px; margin: 0 0 30px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid #ffd23f; border-radius: 0 14px 14px 0; background: var(--panel); }

/* the family tree: the two foundation tiles, a stem, the three branches hung from a bar; beside it the two tracks of their own */
.tree-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; margin: 0 0 40px; }
.tree { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 22px 22px 24px; overflow: hidden; }
.tree::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--prism); opacity: .6; }
.tree.aside::before { opacity: .3; }
.tree-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #b9bfcf; margin: 0 0 16px; }
.tree-row { display: grid; gap: 14px; }
.tree-row.trunk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tree-row.branches { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; padding-top: 24px; }
.tree-row.tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tree-stem { width: 2px; height: 30px; margin: 0 auto; background: var(--line-bright); }
/* the bar across the branches runs from the centre of the first tile to the centre of the last; each tile drops a line to it */
.tree-row.branches::before { content: ""; position: absolute; top: 0; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: var(--line-bright); }
.tree-row.branches > .tile { position: relative; }
.tree-row.branches > .tile::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px; background: var(--line-bright); transform: translateX(-50%); }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 14px 13px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), color-mix(in srgb, var(--c) 4%, transparent)); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--c); transform: translateY(-2px); }
.tile small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.tile b { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1.05; color: #fff; }
.tile span { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) { .tree-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tree-row.trunk, .tree-row.branches, .tree-row.tracks { grid-template-columns: 1fr; }
  .tree-row.branches { padding-top: 0; gap: 10px; }
  .tree-row.branches::before, .tree-row.branches > .tile::before { display: none; }
  .tree-stem { height: 18px; }
}

/* the member cards: one per filing, in its own prism colour, laid out as the tree is: two foundations, three branches, two tracks */
.members { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.member { grid-column: span 3; }
.member.branch { grid-column: span 2; }
.member { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 24px 24px 22px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s; scroll-margin-top: 90px; }
.member::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.member:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.member:target { border-color: var(--c); }
.member-head { display: flex; flex-direction: column; gap: 8px; }
.member-no { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.member h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 36px; letter-spacing: .03em; line-height: 1; color: #fff; }
.member h3 small { display: block; font-family: var(--sans); font-weight: 300; font-size: 16px; letter-spacing: 0; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.member p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.member .insw { font-size: 14.5px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); margin-top: auto; }
.member .insw b { color: var(--text); font-weight: 500; }
.member .insw a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c) 70%, transparent); }
.member .insw a:hover { text-decoration-color: #fff; }
@media (max-width: 900px) { .member, .member.branch { grid-column: 1 / -1; } }
@media (max-width: 760px) { .member h3 { font-size: 32px; } }

/* standing pills: the same words on the cards and in the tables */
.stand { display: inline-block; align-self: flex-start; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid; border-radius: 999px; background: rgba(5, 5, 7, .6); }
.st-complete { color: #9be8a4; border-color: rgba(155, 232, 164, .45); }
.st-mostly { color: #ffd27a; border-color: rgba(255, 210, 122, .45); }
.st-build { color: #8fc6ff; border-color: rgba(143, 198, 255, .45); }
.st-demo { color: #c9b6ff; border-color: rgba(201, 182, 255, .45); }
.st-spec { color: #ff9fb0; border-color: rgba(255, 159, 176, .45); }
@media (max-width: 560px) { .member-head .stand { white-space: normal; line-height: 1.5; } }

/* standings tables: a scrolling region a keyboard can reach */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.table-wrap:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
table.standings { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
table.standings th, table.standings td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
table.standings thead th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #b9bfcf; font-weight: 500; }
table.standings tbody th { color: #fff; font-weight: 600; min-width: 190px; }
table.standings td { color: var(--text); }
table.standings td a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-bright); white-space: nowrap; }
table.standings td a:hover { text-decoration-color: #fff; }
table.standings tbody tr:last-child th, table.standings tbody tr:last-child td { border-bottom: 0; }
table.standings tbody tr:target th, table.standings tbody tr:target td { background: rgba(255, 255, 255, .05); }
table.standings tbody tr { scroll-margin-top: 90px; }
.section .note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* the demonstrator pictures */
/* one picture per row at full width, the whole render, nothing cropped (Kevin 2026-10-08: "they need full render height") */
.sim-shots { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 22px; }
.sim-shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #000; }
.sim-shot img { width: 100%; height: auto; display: block; }
.sim-shot figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-top: 1px solid var(--line); line-height: 1.5; }

/* section 04 takes five articles; section 05 reuses the company grid */
#held .principles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#held .principles b { font-size: 26px; line-height: 1.05; }
.copy a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* the hero machine (Kevin 2026-10-09): no box, no caption, the mechanism alone on the page's own black; on a wide screen it sits
   behind the copy, pulled left so its lower-left leg fades into the text and the copy reads on that orb; the tile's ground is transparent */
.hero-mech { margin: 0; border: 0; background: none; box-shadow: none; }
.hero-mech img { width: 100%; height: auto; display: block; }
@media (min-width: 1040px) {
  .hero-inner.ip-hero { grid-template-columns: minmax(0, 1fr); position: relative; min-height: 860px; }
  .ip-hero .hero-copy { position: relative; z-index: 2; max-width: 760px; }
  .ip-hero .lede { max-width: 600px; }   /* the headline copy stays clear of the hub and the upper nodes; only the lower-left leg runs under the text */
  .hero-mech { position: absolute; z-index: 1; top: -40px; right: -140px; width: 920px; height: 920px; pointer-events: none; }
  .hero-mech img { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 34%); }
}
@media (min-width: 1040px) and (max-width: 1240px) { .hero-mech { width: 760px; height: 760px; right: -30px; top: 0; } }

/* the machine's own readouts over its lower-left orb (Kevin 2026-10-09: "dead space wording, underlying jargon, not web page copy") */
.copy-row { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; margin: 0 0 30px; max-width: 760px; }
.copy-row .boundary { margin: 0; flex: 1 1 380px; }
.mech-readout { list-style: none; margin: 0; padding: 0; flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mech-readout li { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b9bfcf; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(5, 5, 7, .62); line-height: 1.45; align-self: flex-start; }
.mech-readout b { font-weight: 500; color: #9be8a4; margin-left: 6px; }
.mech-readout li:nth-child(2) b { color: #ffd23f; }

/* how the machine works: a short block above the demonstrator pictures (Kevin 2026-10-09: "a little bit of copy explaining how the mech is functioning") */
.mech-how { margin: 0 0 22px; padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid #ffd23f; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel); max-width: 980px; }
.mech-how .section-label { margin-bottom: 10px; }
.mech-how p:last-child { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text); }