/* /code-of-ethics (Isaac, 2026-10-23). The Don't examples are crimson: the ONLY crimson, and the only
   colour of its kind, in any MASHMAN asset (canon designSystem.crimsonException). Use it nowhere else. */
:root{--crimson:#A3122A;}

/* the code at a glance */
.ec-glance{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);}
.ec-glance li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule-light);}
.ec-n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--ink-label);}
.ec-t{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink);}
.ec-glance li:first-child .ec-t{font-weight:800;}

/* each principle, with what to do and what not to do */
.ec-rows{border-top:1px solid var(--ink);}
.ec-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);padding:clamp(36px,4vw,52px) 0;border-bottom:1px solid var(--rule-light);}
.ec-num{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--ink-label);margin-bottom:14px;}
.ec-head h3{font-family:var(--display);font-size:clamp(21px,2.3vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ink);margin:0 0 14px;}
.ec-head p{font-size:15.5px;line-height:1.75;color:var(--ink-body);margin:0;}
.ec-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;}
.ec-do,.ec-dont{padding:22px 22px 24px;border:1px solid var(--rule-light);border-top:3px solid var(--ink);background:var(--white);}
.ec-dont{border-color:var(--crimson);border-top-width:3px;}
.ec-label{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;}
.ec-dont .ec-label{color:var(--crimson);}
.ec-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--white);font-size:11px;letter-spacing:0;}
.ec-dont .ec-mark{background:var(--crimson);}
.ec-pair ul{list-style:none;margin:0;padding:0;}
.ec-pair li{position:relative;padding-left:16px;font-size:15px;line-height:1.65;color:var(--ink-body);}
.ec-pair li + li{margin-top:12px;}
.ec-pair li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--ink);}
.ec-dont li{color:var(--crimson);}
.ec-dont li::before{background:var(--crimson);}
@media (max-width:900px){.ec-row{grid-template-columns:minmax(0,1fr);}}
@media (max-width:560px){.ec-pair{grid-template-columns:minmax(0,1fr);}.ec-glance li{grid-template-columns:44px minmax(0,1fr);gap:12px;}}