/* Page frame, header, panels and headings */
.stripes{height:8px;background:linear-gradient(90deg,var(--coral) 0 20%,var(--saffron) 20% 40%,var(--leaf) 40% 60%,var(--sky) 60% 80%,var(--violet) 80% 100%)}
.wrap{max-width:1240px;margin:0 auto;padding:22px 16px;display:grid;gap:20px}
@media (min-width:900px){.wrap{grid-template-columns:370px 1fr;align-items:start;padding:36px 24px}}

header.top{grid-column:1/-1;display:flex;gap:18px;align-items:center}
.crayons{display:flex;gap:5px;align-items:flex-end;flex:none}
.crayons i{display:block;width:10px;border-radius:5px 5px 2px 2px;position:relative}
.crayons i::before{content:"";position:absolute;left:1px;right:1px;top:-8px;height:10px;background:inherit;clip-path:polygon(50% 0,100% 100%,0 100%);filter:brightness(.9)}
.crayons i:nth-child(1){height:34px;background:var(--coral)}
.crayons i:nth-child(2){height:44px;background:var(--saffron)}
.crayons i:nth-child(3){height:38px;background:var(--leaf)}
.crayons i:nth-child(4){height:48px;background:var(--sky)}
.crayons i:nth-child(5){height:40px;background:var(--violet)}
h1{font-family:var(--fd);font-weight:700;font-size:clamp(30px,6.5vw,48px);line-height:1.05;margin:0 0 6px;letter-spacing:-.015em;font-variation-settings:"opsz" 144}
.lede{margin:0;color:var(--muted);max-width:58ch}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);border-top:4px solid var(--c,var(--violet))}
.side{display:grid;gap:18px}
@media (min-width:900px){.side{position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}}
.c-violet{--c:var(--violet)} .c-sky{--c:var(--sky)} .c-coral{--c:var(--coral)} .c-leaf{--c:var(--leaf)} .c-saffron{--c:var(--saffron)}
h2{font-family:var(--fd);font-size:20px;font-weight:650;margin:0 0 14px;color:var(--ink)}