institutional-friction-toolkit/index.html at main · lumina-30/institutional-friction-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en" data-l30-lang-lock="EN_ONLY">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="l30:lang-lock" content="EN_ONLY" />
  <title>Institutional Friction Toolkit</title>
  <style>
    :root {
      color-scheme: light dark;
      --bg: Canvas;
      --text: CanvasText;
      --muted: color-mix(in srgb, CanvasText 67%, Canvas 33%);
      --line: color-mix(in srgb, CanvasText 28%, Canvas 72%);
      --panel: color-mix(in srgb, Canvas 93%, CanvasText 7%);
      --soft: color-mix(in srgb, Canvas 86%, CanvasText 14%);
      --accent: LinkText;
      --shadow: color-mix(in srgb, CanvasText 14%, transparent 86%);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, color-mix(in srgb, LinkText 12%, transparent 88%), transparent 32rem),
        var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.72;
    }
    a { color: var(--accent); }
    main { max-width: 1040px; margin: 0 auto; padding: 1.25rem 1.1rem 4rem; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(14px);
      background: color-mix(in srgb, Canvas 86%, transparent 14%);
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner {
      max-width: 1040px;
      margin: 0 auto;
      padding: .7rem 1.1rem;
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      align-items: center;
    }
    .topbar a, .pill {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      border: 1px solid var(--line);
      background: var(--soft);
      border-radius: 999px;
      padding: .44rem .68rem;
      text-decoration: none;
      font-size: .94rem;
    }
    header.hero {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 24px;
      padding: clamp(1.15rem, 3vw, 2rem);
      box-shadow: 0 18px 44px var(--shadow);
      margin: 1.1rem 0 1rem;
    }
    .kicker { color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
    h1 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; margin: .18em 0 .35em; }
    h2 { font-size: clamp(1.28rem, 3vw, 1.75rem); line-height: 1.25; margin-top: 0; }
    p { margin: .5rem 0; }
    .lead { color: var(--muted); font-size: clamp(1.04rem, 2.3vw, 1.22rem); max-width: 72ch; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .9rem; margin: 1rem 0; }
    .card {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 18px;
      padding: 1rem;
      min-height: 100%;
    }
    .card ul { padding-left: 1.25rem; margin: .45rem 0 0; }
    .card li { margin: .34rem 0; }
    .route-list { display: grid; gap: .75rem; margin: .7rem 0 0; }
    .route {
      display: block;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: .9rem 1rem;
      background: var(--soft);
      text-decoration: none;
    }
    .route strong { display: block; margin-bottom: .15rem; }
    .route span { color: var(--muted); }
    .note { color: var(--muted); font-size: .96rem; }
    footer { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; color: var(--muted); }
    [id] { scroll-margin-top: 5rem; }


    .place-badge {
      display: inline-flex;
      align-items: center;
      gap: .45em;
      margin: .45rem 0 1rem;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text, CanvasText);
      font-weight: 800;
      font-size: .98rem;
      box-shadow: none;
    }

    .square-return {
      display: inline-flex;
      align-items: center;
      gap: .35em;
      margin: .45rem 0 1rem .6rem;
      padding: .36rem .68rem;
      border-radius: 999px;
      border: 1px solid var(--line, var(--border, currentColor));
      background: transparent;
      color: var(--accent, LinkText);
      font-weight: 800;
      font-size: .95rem;
      text-decoration: none;
    }
    .square-return:hover,
    .square-return:focus {
      text-decoration: underline;
    }
    @media (max-width: 640px) {
      .square-return {
        margin-left: 0;
      }
    }
</style>
</head>
<body>
<div class="topbar"><div class="topbar-inner">
    <a href="https://lumina-30.github.io/lumina-30-overview/index.html#top">Overview</a>
    <a href="https://lumina-30.github.io/Lumi30-Index/index.html#top">Index</a>
    <a href="https://lumina-30.github.io/lumina30-incident-review/index.html#top">Incident Review</a>
    <a href="https://lumina-30.github.io/lumina30-public-reference/index.html">Public Reference</a>
    <a href="index-ja.html">Japanese</a>
    <a href="https://github.com/lumina-30/institutional-friction-toolkit">GitHub Source</a>
</div></div>
<main id="top">
  <header class="hero">
    <div class="kicker">Failure-to-stop analysis layer</div>
    <h1>Institutional Friction Toolkit</h1>
      <div class="place-badge">🧱 Institutional Friction Workshop</div>
<a class="square-return" href="https://lumina-30.github.io/Lumi30-Index/">🧭 Return to Central Square</a>
    <p class="lead">Reference toolkit for failure-to-stop, override breakdown, restart-control failure, procedural invalidity, and institutional delay. It is not the first incident intake route.</p>
  </header>

  <div class="grid">
    <section class="card"><h2>Use this repository when</h2><ul><li>Facts have been collected and institutional failure patterns need analysis.</li><li>A review concerns delay, override, resubmission, restart control, or procedural normalization.</li><li>Findings must be routed into audit, accountability, or governance language.</li></ul></section><section class="card"><h2>Do not use it as</h2><ul><li>The first incident intake form.</li><li>A policy recommendation or implementation mandate.</li><li>A certification or compliance checklist.</li></ul></section>
  </div>

  <section class="card" id="routes">
    <h2>Next routes</h2>
    <div class="route-list">
      <a class="route" href="societal-friction-research-starter.html"><strong>The Need for Societal Friction</strong><span>Why room to pause, verify, and correct matters before changes to employment, skills, organizational capacity, and responsibility become difficult to reverse.</span></a>
      <a class="route" href="reading-order.html"><strong>Reading order</strong><span>Choose the appropriate document route before opening individual files.</span></a>
<a class="route" href="post-incident-procedural-audit-checklist.html"><strong>Procedural audit checklist</strong><span>Post-incident procedural review route.</span></a>
<a class="route" href="audit-log-structure.html"><strong>Audit log structure</strong><span>Accountability trail and record integrity route.</span></a>
<a class="route" href="https://lumina-30.github.io/lumina30-incident-review/index.html#top"><strong>Use Incident Review first</strong><span>Initial boundary-check workflow for specific incidents.</span></a>
    </div>
  </section>

  <section class="card" id="source-role">
    <h2>Source text role</h2>
    <p>Markdown and text files are retained for source preservation, search discoverability, existing links, source review, and version comparison. Use this HTML entry for reader-facing orientation, navigation, and return paths.</p>
  </section>

  <footer>
    <p>LUMINA-30 boundary reference network. Non-binding; non-certifying; non-directive.</p>
  </footer>
</main>
</body>
</html>