/* HOME — editorial hero + strategic flow */

/* Hero */
.hero { background: var(--abyss); color: var(--fg); padding-top: clamp(2.6rem, 5vw, 5rem); overflow: hidden; }
.hero::before { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%); }
.hero__head { padding-bottom: clamp(1.8rem, 3.5vw, 3.2rem); }
.hero__title { margin: 0; max-width: 15.5ch; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
.hero__copy .lead { margin-bottom: 2rem; max-width: 46ch; }
.hero__meta { margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.hero__meta div { padding: 16px 12px 0 0; }
.hero__meta div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.hero__meta dt { font: 400 .64rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.hero__meta dd { margin: 0; font: 600 .88rem/1.35 var(--f-display); color: var(--fg); }
.hero__fig figcaption { border-top-color: var(--rule); }
.hero__fig { --ar: 2000 / 1333; }
.hero__index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.8rem, 6vw, 5rem); border-top: 1px solid var(--rule-2); }
.hero__index a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 22px 12px 26px 0; text-decoration: none; color: var(--fg); height: 100%; transition: background-color .3s; }
.hero__index li + li a { padding-left: 16px; border-left: 1px solid var(--rule); }
.hero__index .n { font: 400 .7rem/1.9 var(--f-mono); color: var(--acc); }
.hero__index .w { font: 700 1.15rem/1.3 var(--f-display); font-stretch: 116%; text-transform: uppercase; letter-spacing: .04em; }
.hero__index .s { grid-column: 2; font-size: .86rem; color: var(--fg-3); }
.hero__index a:hover .w { color: var(--acc); }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 4.5rem; }
  .hero__copy { padding-bottom: 42px; }
}
@media (max-width: 640px) {
  .hero__index .s { display: none; }
  .hero__index a { grid-template-columns: minmax(0, 1fr); padding-right: 6px; }
  .hero__index .w { font-size: .95rem; letter-spacing: .02em; }
  .hero__meta { grid-template-columns: minmax(0, 1fr); }
  .hero__meta div, .hero__meta div + div { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; }
  .hero__meta dt { margin: 0; }
  .hero__meta dd { text-align: right; }
  .hero .btns .btn { width: 100%; }
}

/* Positioning */
.position__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 5rem; }
@media (min-width: 1000px) { .position__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.position__brand { margin-bottom: 1.6rem; }
.position__name { display: block; font: 800 clamp(1.2rem, .3rem + 2.9vw, 2.6rem)/1 var(--f-display); font-stretch: 124%; letter-spacing: .01em; }
.position__line { display: block; margin-top: .7rem; font: 500 clamp(.8rem, .7rem + .4vw, 1.05rem)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.position__statement { font: 500 clamp(1.45rem, 1rem + 1.8vw, 2.5rem)/1.22 var(--f-display); letter-spacing: -.012em; color: var(--fg); max-width: 26ch; margin: 0; text-wrap: balance; }
.notlist { border: 1px solid var(--rule); padding: 26px 26px 24px; background: var(--paper); }
.notlist .mono { margin: 0 0 .8rem; color: var(--signal); }
.notlist ul { margin-bottom: 1.2rem; }
.notlist li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: .98rem; color: var(--fg-2); }
.notlist .x { position: relative; width: 11px; height: 11px; flex: none; top: 1px; }
.notlist .x::before, .notlist .x::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%; background: var(--signal); transform: rotate(45deg); }
.notlist .x::after { transform: rotate(-45deg); }

/* Landscape */
.landscape__sticky { position: sticky; top: calc(var(--hdr-h) + 32px); }
.landscape__body .fig { margin-bottom: 2.6rem; }
.landscape .ledger > li { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 18px; padding: 24px 0; }
.landscape .ledger p { grid-column: 2; }
.pull { margin: 2.8rem 0 0; padding: 2rem 0 0; border-top: 2px solid var(--copper); }
.pull p { font: 500 clamp(1.25rem, 1rem + 1vw, 1.8rem)/1.3 var(--f-display); color: var(--fg); letter-spacing: -.01em; }
@media (max-width: 979px) { .landscape__sticky { position: static; } }

/* Pillars */
.pillars__row { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-2); counter-reset: p; }
.pillar { position: relative; padding: 34px 0 40px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; }
.pillar::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--copper); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.pillar:hover::before, .pillar:focus-within::before { transform: scaleX(1); }
.pillar__n { display: block; font: 700 clamp(2.4rem, 1.6rem + 1.8vw, 3.4rem)/1 var(--f-display); font-stretch: 120%; color: transparent; -webkit-text-stroke: 1px var(--copper); margin-bottom: 1.4rem; }
@supports not (-webkit-text-stroke: 1px black) { .pillar__n { color: var(--copper); opacity: .5; } }
.pillar__word { font: 750 clamp(2.3rem, 1rem + 3.2vw, 4.2rem)/.95 var(--f-display); font-stretch: 116%; text-transform: uppercase; letter-spacing: -.015em; margin: 0 0 1.4rem; }
.pillar__def { font-size: 1.08rem; color: var(--fg); max-width: 34ch; }
.pillar__list { margin: .6rem 0 2rem; }
.pillar__list li { padding: 10px 0; border-top: 1px solid var(--rule); font: 400 .74rem/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.pillar .link { margin-top: auto; align-self: flex-start; }
@media (min-width: 900px) {
  .pillars__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillar { padding: 40px 36px 44px; border-bottom: 0; }
  .pillar:first-child { padding-left: 0; }
  .pillar + .pillar { border-left: 1px solid var(--rule); }
  .pillar:last-child { padding-right: 0; }
  .pillar + .pillar::before { left: 36px; width: calc(100% - 36px); }
}

/* Model flow */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.flow__node, .flow__hub { background: var(--paper); border: 1px solid var(--rule-2); padding: 26px; position: relative; }
.flow__node .coord, .flow__hub .coord { margin: 0 0 1rem; color: var(--acc); }
.flow__node h3 { margin-bottom: .6rem; }
.flow__node p:last-child { color: var(--fg-2); font-size: .98rem; }
.flow__hub { background: var(--abyss); color: var(--on-dark); border-color: var(--abyss); --fg: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --rule: var(--line-d); --acc: var(--copper-lt); }
.flow__hub-title { font: 700 1.3rem/1.1 var(--f-display); font-stretch: 116%; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.1rem; }
.flow__tabs { display: grid; border-top: 1px solid var(--line-d); }
.flow__tabs [role="tab"] {
  display: flex; gap: 12px; align-items: baseline; text-align: left; width: 100%;
  padding: 12px 10px; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-d);
  color: var(--on-dark-2); font: 500 .95rem/1.35 var(--f-body); cursor: pointer; transition: background-color .2s, color .2s;
}
.flow__tabs [role="tab"] span { font: 400 .68rem/1 var(--f-mono); color: var(--copper-lt); }
.flow__tabs [role="tab"]:hover { color: var(--on-dark); background: rgba(238, 233, 223, .04); }
.flow__tabs [role="tab"][aria-selected="true"] { color: var(--abyss); background: var(--copper-lt); }
.flow__tabs [role="tab"][aria-selected="true"] span { color: var(--abyss); }
.flow__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 86px; }
.flow__line { position: relative; width: 1px; flex: 1; min-height: 34px; background: repeating-linear-gradient(180deg, var(--copper) 0 6px, transparent 6px 11px); }
.flow__line::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 9px; height: 9px; border-right: 1.5px solid var(--copper); border-bottom: 1.5px solid var(--copper); transform: translateX(-50%) rotate(45deg); }
.flow__lbl { font: 500 .64rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc); padding: 6px 0; text-align: center; }
.flow__lbl--bot { color: var(--fg-3); }
@media (min-width: 1100px) {
  .flow { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1.25fr) 128px minmax(0, 1fr); align-items: center; }
  .flow__node { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .flow__link { flex-direction: column; min-height: 0; height: 100%; }
  .flow__line { flex: none; width: 100%; height: 1px; min-height: 0; background: repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 11px); margin: 10px 0; }
  .flow__line::after { left: auto; right: -1px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .flow__line::before { content: ""; position: absolute; left: -1px; top: 50%; width: 9px; height: 9px; border-left: 1.5px solid var(--copper); border-top: 1.5px solid var(--copper); transform: translateY(-50%) rotate(-45deg); }
}
html.js .flow__line { background-size: 100% 100%; }
.flow__panels { margin-top: 26px; border: 1px solid var(--rule-2); background: var(--paper); }
.flow__panel { padding: 28px 26px 30px; }
.flow__panel:focus-visible { outline-offset: -3px; }
.flow__panel-t { font: 600 1.25rem/1.2 var(--f-display); font-stretch: 106%; margin-bottom: 1.2rem; }
.flow__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 3rem; }
.flow__cols .mono { color: var(--acc); margin-bottom: .6rem; }
.flow__cols p:not(.mono) { color: var(--fg-2); }
@media (min-width: 760px) { .flow__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow__panel { padding: 34px 38px 38px; } }

.model__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3.5rem; margin-top: 3rem; }
@media (min-width: 980px) { .model__foot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.sovereign .mono { color: var(--acc); margin-bottom: 1rem; }
.sovereign__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); column-gap: 28px; }
.sovereign__list li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); position: relative; font-size: .96rem; }
.sovereign__list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 10px; height: 6px; border-left: 1.5px solid var(--copper-dp); border-bottom: 1.5px solid var(--copper-dp); transform: rotate(-45deg); }
@media (max-width: 420px) { .sovereign__list { grid-template-columns: minmax(0, 1fr); } }

/* Lawful */
.lawful__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 5rem; }
@media (min-width: 1000px) { .lawful__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.lawful__intro .body-2 { margin-bottom: 1.8rem; }
.lawful__intro h2 { font-size: clamp(1.5rem, .9rem + 1.5vw, 2.4rem); }
.lawful__list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.lawful__list li { padding: 24px 22px 26px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.lawful__list span { display: inline-block; font: 500 .68rem/1 var(--f-mono); letter-spacing: .14em; color: var(--acc); padding: 5px 7px; border: 1px solid var(--rule-2); margin-bottom: 1.1rem; }
.lawful__list h3 { margin-bottom: .45rem; }
.lawful__list p { font-size: .94rem; color: var(--fg-2); margin: 0; }
@media (min-width: 620px) { .lawful__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lawful__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Platform index */
.pindex { border-top: 1px solid var(--ink); }
.pindex a {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 22px; gap: 4px 16px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--fg);
  transition: padding .35s var(--ease), background-color .35s;
}
.pindex__n { font: 400 .7rem/1 var(--f-mono); letter-spacing: .1em; color: var(--acc); }
.pindex__t { font: 600 clamp(1.25rem, .9rem + 1.5vw, 2.3rem)/1.1 var(--f-display); font-stretch: 108%; letter-spacing: -.01em; text-transform: uppercase; }
.pindex__d { grid-column: 2; font-size: .92rem; color: var(--fg-3); }
.pindex .i { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--acc); transition: transform .35s var(--ease); }
.pindex a:hover { padding-left: 10px; }
.pindex a:hover .pindex__t { color: var(--copper-dp); }
.pindex a:hover .i { transform: translateX(4px); }
@media (min-width: 900px) {
  .pindex a { grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) 24px; padding: 26px 0; }
  .pindex__d { grid-column: 3; }
  .pindex .i { grid-column: 4; grid-row: 1; }
}

/* Vision */
.vision { border-bottom: 1px solid var(--line-d); }
.vision__title { max-width: 18ch; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.vision__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 5rem; }
@media (min-width: 980px) { .vision__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.vision__lines { border-top: 1px solid var(--rule-2); }
.vision__lines li { display: flex; gap: 22px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); font: 600 clamp(1.35rem, 1rem + 1.4vw, 2.3rem)/1.15 var(--f-display); font-stretch: 106%; color: var(--fg); letter-spacing: -.01em; }
.vision__lines li:nth-child(even) { padding-left: clamp(0px, 4vw, 56px); }
.vision__lines span { font: 400 .72rem/1 var(--f-mono); color: var(--acc); flex: none; }
.vision__lines li:last-child { color: var(--copper-lt); }
.vision__cta { margin-top: clamp(2.6rem, 5vw, 4rem); }
@media (max-width: 480px) { .vision__cta .btn { width: 100%; } }