/* The free Retro T-Shirt Design Lab guide: the highlighted band on the front page and its own page (/design-lab/).
   Written alongside scripts/mz-design-lab.mjs. Uses the tokens in home.css. */
.dl-home{background:linear-gradient(135deg,#0F1B3A 0%,#16305F 100%);color:#fff;border-radius:56px;margin:0 12px;overflow:hidden}
.dl-home .tag{background:rgba(255,255,255,.12);color:#fff}
.dl-home .sub{color:#C9D3EA}
.dl-home h2{color:#fff}
.dl-home .fine{color:#AAB6D3}
.dl-home .row,.dl-hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.dl-home .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.dl-cover{display:block;border-radius:14px;overflow:hidden;box-shadow:0 24px 56px rgba(0,0,0,.35);transform:rotate(2deg);transition:transform .25s;max-width:430px;margin-inline:auto}
.dl-cover:hover{transform:rotate(0) translateY(-4px)}
.dl-cover img{display:block;width:100%;height:auto}
.dl-hero{padding:48px 0 70px}
.dl-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.dl-hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.08}
.dl-hero h1 em{font-style:normal;color:var(--orange)}
.dl-hero .lede{font-size:1.2rem;color:#33405e;margin-top:18px;max-width:52ch}
.dl-hero .cover{border-radius:14px;box-shadow:var(--soft);transform:rotate(2deg);max-width:440px;margin-inline:auto;overflow:hidden}
.dl-hero .cover img{display:block;width:100%;height:auto}
.dl-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.dl-list div{background:#fff;border-radius:20px;padding:22px 22px 24px;box-shadow:var(--soft2)}
.dl-list h3{font-size:1.15rem}
.dl-list p{margin-top:8px;color:var(--muted);font-size:.98rem}
.dl-peek{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.dl-peek figure{margin:0}
.dl-peek img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:var(--soft2);background:#fff}
.dl-peek figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}
.dl-two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:8px}
.dl-two p+p{margin-top:12px}
.dl-faq{margin-top:26px;max-width:820px}
.dl-faq details{background:#fff;border-radius:16px;padding:16px 20px;margin-top:10px;box-shadow:var(--soft2)}
.dl-faq summary{font:700 1.05rem var(--f-display);cursor:pointer}
.dl-faq p{margin-top:10px;color:var(--muted)}
@media(max-width:900px){.dl-hero .wrap,.dl-two{grid-template-columns:1fr}.dl-list{grid-template-columns:1fr}.dl-peek{grid-template-columns:repeat(2,1fr)}.dl-home{border-radius:32px}}
@media(prefers-reduced-motion:reduce){.dl-cover,.dl-cover:hover{transition:none}}