{% extends "base.html.j2" %}
{% set eyebrow = "Station blueprint" %}
{% set pal = {"bg1":"#13263a","bg2":"#1f3d57","ink":"#e6eef2","mute":"#b3c5d0","a":"#8fb8c9","b":"#d9a441","card":"rgba(143,184,201,.08)","line":"rgba(143,184,201,.35)","paper":"#e6eef2","paperink":"#13263a","r":4} %}
{% set fonts = {"h":"Jost","b":"Outfit","m":"Space Mono","hw":700,"ht":"uppercase","bt":"uppercase"} %}
{% set cycle = ["#8fb8c9","#d9a441","#9cc4a6","#d68f7a","#8fb8c9"] %}
{% block bg %}
<g stroke="#8fb8c9" stroke-opacity=".1" stroke-width="1">{% for x in range(0, 1601, 80) %}<line x1="{{ x }}" y1="0" x2="{{ x }}" y2="2260"/>{% endfor %}{% for y in range(0, 2261, 80) %}<line x1="0" y1="{{ y }}" x2="1600" y2="{{ y }}"/>{% endfor %}</g>
<rect x="60" y="60" width="1480" height="2140" fill="none" stroke="#8fb8c9" stroke-opacity=".5" stroke-width="2"/>
{% endblock %}
{% block hero %}
<g fill="none" stroke="#8fb8c9" stroke-width="3">
<rect x="190" y="130" width="100" height="140" rx="10" fill="#1f3d57"/><rect x="215" y="60" width="50" height="70"/><rect x="215" y="270" width="50" height="70"/>
<circle cx="240" cy="200" r="30" stroke="#d9a441"/>
<rect x="20" y="170" width="150" height="60" fill="#1f3d57"/><rect x="310" y="170" width="150" height="60" fill="#1f3d57"/>
<path d="M60 170V230M100 170V230M140 170V230M350 170V230M390 170V230M430 170V230" stroke-width="2"/>
<path d="M170 200H190M290 200H310" stroke="#d9a441"/>
<path d="M10 360H470M10 350V370M470 350V370" stroke-dasharray="6 6" stroke-width="2"/>
</g>
{% endblock %}
{% block css %}
.ig h1{font-size:66px}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:none}
.sg .mod{position:relative;padding:44px 26px 22px;background:var(--card);border:1px dashed var(--line)}
.sg .mod:last-child:nth-child(odd){grid-column:span 2}
.sg .mod:before,.sg .mod:after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--c)}
.sg .mod:before{left:-2px;top:-2px;border-right:0;border-bottom:0}
.sg .mod:after{right:-2px;bottom:-2px;border-left:0;border-top:0}
.sg .tag{position:absolute;left:26px;top:12px;font-family:var(--fm);font-size:18px;letter-spacing:.2em;color:var(--c);text-transform:uppercase}
.sg .tag em{font-style:normal;color:var(--mute)}
.sg b{display:block;font-family:var(--fh);font-weight:700;font-size:32px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.sg p{font-size:24px;line-height:1.34;color:var(--mute)}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;flex:none;border-top:2px solid var(--line)}
.lg .row{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto 1fr;align-content:start;gap:6px 18px;padding:12px 0;border-bottom:1px dashed var(--line)}
.lg .row small{grid-row:span 2;font-family:var(--fm);font-size:20px;color:var(--c);letter-spacing:.08em;padding-top:5px}
.lg .row b{font-family:var(--fh);font-weight:700;font-size:28px;letter-spacing:.04em;text-transform:uppercase}
.lg .row p{font-size:22px;line-height:1.3;color:var(--mute)}
.ig .band{border:3px double var(--a)}
{% endblock %}
{% block body %}<section><div class="lab">{{ c.items_label }}</div>
<div class="sg">
  {% for e in c["items"] %}<div class="mod" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><span class="tag">Module <em>{{ 'ABCDE'[loop.index0] }}-{{ '%02d'|format(loop.index) }}</em></span><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %}
</div></section>
<section><div class="lab">{{ c.steps_label }}</div>
<div class="lg">
  {% for e in c.steps %}<div class="row" style="--c:{{ cycle[loop.index0 % cycle|length] }}"><small>SEQ {{ '%02d'|format(loop.index) }}</small><b>{{ e.name }}</b><p>{{ e.text }}</p></div>{% endfor %}
</div></section>
{% endblock %}