/* The design studio's course list: a short head, where to pick up, and a grid of course cards set like the news
   cards: a picture, a meta line, a name, one line on what it teaches, and a pip per level.
   Each picture is printed, so its inks stay the same in light and dark. It is a size container, so everything
   inside is set in container units and scales with the card. */
.dzl{max-width:1180px;margin:0 auto;padding:56px 16px 90px}
.dz-count{font:12px var(--f-mono);color:var(--muted)}
.dzl .eyebrow{margin:0;font:500 13px var(--f-display);letter-spacing:.06em;color:var(--pink)}
.dzl h1{margin:6px 0 0;font:400 clamp(44px,7vw,84px)/.95 var(--f-serif);letter-spacing:-.01em}
.dzl h1 i{color:var(--pink-soft,#f7b6d7)}
:root[data-theme="light"] .dzl h1 i{color:#d23f87}
.dzl .lede{max-width:560px;margin:14px 0 0;color:var(--muted);text-wrap:pretty}

/* where to pick up */
.resume{display:inline-flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:28px;padding:11px 16px 11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .2s}
.resume:hover{border-color:var(--pink)}
.resume:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.r-k{padding:3px 8px;border-radius:5px;background:var(--pink);color:#2a0b1b;font:600 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.r-t{font:400 22px/1 var(--f-serif)}
.r-c{font:12px var(--f-mono);color:var(--muted)}
.r-a{font-style:normal;color:var(--pink);font-family:var(--f-mono);transition:translate .25s cubic-bezier(.2,.8,.3,1)}
.resume:hover .r-a{translate:4px 0}

/* the list */
.cl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:56px 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cl-head h2{margin:0;font:400 30px/1 var(--f-serif)}
.cl-n{margin:0;font:12px var(--f-mono);color:var(--muted)}
.cl-n span{margin:0 3px;color:var(--faint,var(--muted))}
.cl-n b{color:var(--ink);font-weight:600}
.cl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 22px}

.cc{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.cc:focus-visible{outline:2px solid var(--pink);outline-offset:6px;border-radius:10px}
/* the picture: a print with a hairline edge and a soft shadow that deepens as it lifts */
.cc-art{position:relative;display:block;aspect-ratio:16/10;container-type:size;overflow:hidden;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 28px -22px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s cubic-bezier(.2,.8,.3,1)}
.cc-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);pointer-events:none}
:root[data-theme="dark"] .cc-art::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
a.cc:hover .cc-art{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 26px 40px -24px rgba(0,0,0,.55)}
/* the words: a small mono kicker, the name in the page's serif, one line, then a footer for progress */
.cc-meta{display:flex;align-items:center;gap:8px;height:16px;margin-top:16px;font:600 10.5px/16px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cc-meta em{font-style:normal;color:var(--ink)}
.cc-meta .new{margin-left:auto;padding:0 6px;border-radius:4px;background:var(--pink);color:#2a0b1b;letter-spacing:.06em}
.cc-t{margin-top:6px;font:400 27px/1.02 var(--f-serif);letter-spacing:-.01em;text-wrap:balance}
a.cc .cc-t::after{content:"→";display:inline-block;margin-left:8px;font:400 15px var(--f-mono);color:var(--pink);vertical-align:.22em;transition:translate .35s cubic-bezier(.2,.8,.3,1)}
a.cc:hover .cc-t::after{translate:5px 0}
.cc-b{margin:8px 0 16px;color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
/* a pip per level; finished ones take the course's ink. The footer sits on a hairline at the bottom of the card,
   so every footer in a row lines up */
.cc-p{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font:11.5px var(--f-mono);color:var(--muted)}
.pips{display:flex;gap:3px;flex:none}
.pips i{width:10px;height:6px;border-radius:2px;background:var(--line)}
.pips i.on{background:var(--ac)}
/* where a click takes you: the state, then the level it opens */
.cc-s{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cc-s b{font-weight:400;color:var(--ink)}
.cc-s.all{color:var(--ok,#3faa52)}
.cc-how{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.5}
.cc-how li+li{margin-top:3px}
.cc-how li::marker{font:600 11px var(--f-mono);color:var(--pink)}

/* ---- Foundations: wayfinding stripes over a box, a circle and a pill ---- */
.a-stripes{--ac:#3f9b6d}
.a-stripes .cc-art{background:#2f7d57}
.a-stripes .bars{position:absolute;inset:0 0 auto;height:52cqh;display:grid;grid-template-rows:repeat(4,1fr)}
.a-stripes .bars i{display:flex}
.a-stripes .shapes{position:absolute;left:7cqw;bottom:11cqh;display:flex;align-items:center;gap:4cqw}
.a-stripes .shapes i{height:24cqh;background:#f3ecd9}
.a-stripes .shapes i:nth-child(1){width:24cqh}
.a-stripes .shapes i:nth-child(2){width:24cqh;border-radius:50%;background:#e3b23c}
.a-stripes .shapes i:nth-child(3){width:46cqh;border-radius:99px;background:#6f97e0}

/* ---- Type: a specimen ladder on one ratio, and an ampersand ---- */
.a-type{--ac:#d23f87}
.a-type .cc-art{background:#f1eadb;color:#1b1814}
.a-type .lad{position:absolute;left:7cqw;top:9cqh;display:grid;gap:1.4cqh}
.a-type .lad i{display:flex;align-items:baseline;gap:3cqw;font:400 calc(var(--z) * .44cqh)/.86 var(--f-serif);font-style:normal}
.a-type .lad b{min-width:6cqw;font:600 4.4cqh var(--f-mono);color:#c2407f}
.a-type .amp{position:absolute;right:5cqw;bottom:-14cqh;font:italic 400 108cqh/1 var(--f-serif);color:#ff6fb5}

/* ---- Colour and light: colour fields under a halftone screen ---- */
.a-aurora{--ac:#8a63ff}
.a-aurora .cc-art{background:#14121f}
.a-aurora .cc-art>i{position:absolute;border-radius:50%;filter:blur(7cqw)}
.a-aurora .b1{width:60cqw;height:60cqw;left:-14cqw;top:-24cqh;background:#ff4fa3}
.a-aurora .b2{width:56cqw;height:56cqw;right:-16cqw;top:-6cqh;background:#22c4e8}
.a-aurora .b3{width:60cqw;height:44cqw;left:18cqw;top:46cqh;background:#7c4dff}
.a-aurora .cc-art>.dots{inset:0;border-radius:0;filter:none;background:radial-gradient(circle,rgba(20,18,31,.55) 34%,transparent 36%) 0 0/2.4cqw 2.4cqw;
  -webkit-mask:linear-gradient(160deg,transparent 30%,#000 85%);mask:linear-gradient(160deg,transparent 30%,#000 85%)}
.a-aurora .tok{position:absolute;left:6cqw;bottom:9cqh;display:flex;gap:2cqw}
.a-aurora code{padding:1.6cqh 3cqw;border-radius:1.4cqw;background:rgba(20,18,31,.6);color:#fff;font:600 5.6cqh var(--f-mono);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.a-aurora code::before{content:"";display:inline-block;width:4.4cqh;height:4.4cqh;margin-right:1.6cqw;border-radius:50%;background:#ff6fb5;vertical-align:-.4cqh}
.a-aurora code+code::before{background:#14121f;box-shadow:0 0 0 1px rgba(255,255,255,.5)}

/* ---- Layout systems: a sheet of tiles with routes through it ---- */
.a-tiles{--ac:#7a4dff}
.a-tiles .cc-art{background:#5b1cff}
.a-tiles .sheet{position:absolute;inset:12cqh 8cqw;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);gap:2.2cqw;padding:3.4cqw;border-radius:1.6cqw;background:#fff}
.a-tiles .sheet i{border-radius:1cqw;background:#2fc22f}
.a-tiles .sheet i.on{background:#ff9ee0;box-shadow:0 0 0 1cqw #ff9ee0}
.a-tiles svg{position:absolute;inset:3.4cqw;width:calc(100% - 6.8cqw);height:calc(100% - 6.8cqw);overflow:visible}
.a-tiles polyline{fill:none;stroke:#5b1cff;stroke-width:.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:none}

/* ---- Posters and patterns: a printed weave ---- */
.a-mosaic{--ac:#ff7a12}
.a-mosaic .cc-art{background:#ff7a12}
.a-mosaic .mo{position:absolute;left:50%;top:50%;height:84cqh;aspect-ratio:1;translate:-50% -50%;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.a-mosaic .mo i{background:var(--c,transparent)}

/* ---- Real interfaces: parts of an app as stickers ---- */
.a-stickers{--ac:#d9a800}
.a-stickers .cc-art{background:#ffd21f;color:#151515;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.a-stickers .st{position:absolute;display:flex;align-items:center;gap:1.6cqw;border-radius:2cqw;box-shadow:0 1cqh 0 rgba(0,0,0,.12),0 3cqh 5cqh -2cqh rgba(0,0,0,.3);white-space:nowrap}
.a-stickers .s-toast{left:6cqw;top:11cqh;padding:3cqh 3cqw;background:#fff;font:500 7cqh/1 inherit;rotate:-3deg}
.a-stickers .s-toast i{display:grid;place-items:center;width:8cqh;height:8cqh;border-radius:50%;background:#18b26b;color:#fff;font:700 5cqh/1 inherit;font-style:normal}
.a-stickers .s-toast b{margin-left:1.4cqw;color:#5b1cff}
.a-stickers .s-price{right:7cqw;top:9cqh;align-items:baseline;gap:.6cqw;padding:3cqh 3.4cqw;background:#151515;color:#fff;font:700 15cqh/1 inherit;letter-spacing:-.03em;rotate:4deg}
.a-stickers .s-price small{font:500 5cqh/1 inherit;letter-spacing:0;opacity:.7}
.a-stickers .s-cmd{left:40cqw;top:42cqh;gap:1.2cqw;rotate:-6deg;box-shadow:none}
.a-stickers kbd{display:grid;place-items:center;width:17cqh;height:17cqh;border-radius:2.6cqh;background:#fff;font:600 8cqh/1 inherit;box-shadow:inset 0 -1.6cqh 0 #d9d2b8,0 1.4cqh 0 rgba(0,0,0,.12)}
.a-stickers .s-chat{left:7cqw;bottom:13cqh;padding:3cqh 3.4cqw;background:#2f6bff;color:#fff;border-radius:6cqh 6cqh 6cqh 1.6cqh;font:500 7cqh/1 inherit;rotate:3deg}
.a-stickers .s-play{right:7cqw;bottom:12cqh;gap:2cqw;padding:2.4cqh;background:#1b1b22;rotate:-3deg}
.a-stickers .s-play i{width:14cqh;height:14cqh;border-radius:2cqh;background:linear-gradient(135deg,#ff6fb5,#7c4dff)}
.a-stickers .s-play u{width:24cqw;height:2.4cqh;border-radius:2cqh;background:linear-gradient(90deg,#fff 60%,#3a3a46 0)}

/* ---- Responsive: one layout on three screens ---- */
.a-devices{--ac:#ff6fb5}
.a-devices .cc-art{background:#121418}
.a-devices .dv{position:absolute;display:block;background:#f4efe6;border:2.2cqh solid #2c2f37;box-shadow:0 3cqh 6cqh -2cqh rgba(0,0,0,.7)}
.a-devices .desk{left:7cqw;top:13cqh;width:56cqw;height:64cqh;border-radius:2cqh;border-top-width:7cqh}
.a-devices .tab{left:56cqw;top:32cqh;width:24cqw;height:56cqh;border-radius:3.4cqh}
.a-devices .phone{left:80cqw;top:46cqh;width:13cqw;height:44cqh;border-radius:4cqh}
.a-devices .lay{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-auto-rows:1fr;gap:6%}
.a-devices .lay i{border-radius:1cqh;background:#5b1cff}
.a-devices .lay i:nth-child(3n+2){background:#ff6fb5}
.a-devices .lay i:nth-child(3n){background:#ffd21f}

/* ---- How it works: the target, your board, and the meter ---- */
.a-how .cc-art{background:var(--soft,var(--card));box-shadow:inset 0 0 0 1px var(--line)}
.a-how .pair{position:absolute;left:50%;top:14cqh;translate:-50% 0;display:flex;gap:6cqw}
.a-how .tg,.a-how .bd{position:relative;display:block;width:42cqh;height:42cqh;border-radius:1.6cqh;background:#fff4dc;box-shadow:0 1cqh 0 rgba(0,0,0,.1)}
.a-how .tg i,.a-how .bd i{position:absolute;left:22%;top:22%;width:56%;height:56%;border-radius:50%;background:#ff6fb5}
.a-how .bd i{left:26%;top:20%;width:52%;height:52%;background:#ff86c1}
.a-how .tg::after,.a-how .bd::after{position:absolute;left:0;right:0;top:calc(100% + 2.4cqh);text-align:center;font:600 5cqh var(--f-mono);color:var(--muted)}
.a-how .tg::after{content:"target"}.a-how .bd::after{content:"yours"}
.a-how .mt{position:absolute;left:50%;bottom:10cqh;translate:-50% 0;display:flex;align-items:center;gap:2.4cqw;padding:1.8cqh 3cqw;border-radius:99px;background:#fff4dc;color:#10313d;font:600 5.6cqh var(--f-mono)}
@property --hm{syntax:"<integer>";inherits:true;initial-value:96}
.a-how .mt{--hm:96;transition:--hm .6s cubic-bezier(.2,.8,.3,1)}
.a-how .mt i{width:22cqw;height:2.4cqh;border-radius:2cqh;background:linear-gradient(90deg,#ff6fb5 calc(var(--hm) * 1%),#d9e7dc 0)}
.a-how .mt b::after{counter-reset:m var(--hm);content:counter(m) "%"}

/* ---- pointing at a card: each picture does one small thing from its own course ---- */
.cc-art *{transition:transform .5s cubic-bezier(.2,.8,.3,1),rotate .5s cubic-bezier(.2,.8,.3,1),translate .5s cubic-bezier(.2,.8,.3,1),background .4s}
.a-stripes .bars b:first-child{transition:flex-grow .6s cubic-bezier(.2,.8,.3,1)}
.a-stripes:hover .bars i:nth-child(odd) b:first-child{flex-grow:40}
.a-stripes:hover .shapes i:nth-child(1){rotate:45deg;scale:.8}
.a-stripes:hover .shapes i:nth-child(2){translate:0 -18%}
.a-type:hover .amp{rotate:-8deg;translate:-4% 0}
.a-aurora:hover .b1{translate:18% 10%}.a-aurora:hover .b2{translate:-14% 14%}.a-aurora:hover .b3{translate:-10% -16%}
.a-tiles:hover polyline{animation:route .9s cubic-bezier(.4,0,.2,1)}
@keyframes route{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.a-mosaic .mo{transition:rotate .9s cubic-bezier(.5,0,.2,1)}
.a-mosaic:hover .mo{rotate:90deg}
.a-stickers:hover .st{rotate:0deg}
.a-devices:hover .tab{translate:0 -8%}.a-devices:hover .phone{translate:0 -12%}.a-devices:hover .desk{translate:0 -3%}
.cc.a-how:hover .bd i{left:22%;top:22%;width:56%;height:56%;background:#ff6fb5}
.cc.a-how:hover .mt{--hm:100}
.cc.a-how .bd i{transition:left .6s cubic-bezier(.2,.8,.3,1),top .6s cubic-bezier(.2,.8,.3,1),width .6s,height .6s,background .4s}

/* ---------------- smaller screens ---------------- */
@media (max-width:1040px){.cl{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}}
@media (max-width:560px){
  .dzl{padding-top:36px}
  .cl{grid-template-columns:1fr;gap:40px}
  .cl-head{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.cc-art,.cc-art *,.r-a{transition:none!important;animation:none!important}}