/* Creative AI (redesign): a production wall. The brief drives five formats at their true proportions; the ribbon
   flows freely through the gaps behind them (hero atmosphere), never behind text. Client palette inside the example
   designs is drawn from the approved tokens: ink, coral text shade and the coral tint. */
.cr-hero{padding-bottom:var(--s9)}
.wl{margin-top:var(--s8);display:grid;grid-template-columns:330px minmax(0,1fr);gap:var(--s6);align-items:start}

/* the brief */
.wl-brief{position:sticky;top:20px;overflow:hidden}
.br-dl{padding:8px 22px 4px}
.br-dl div{padding:12px 0;border-top:1px solid var(--line)}.br-dl div:first-child{border-top:0}
.br-dl dt{font-size:14px;font-weight:700;color:var(--deep)}
.br-dl dd{margin-top:3px;font-size:16px;line-height:1.45;color:var(--ink);font-weight:600}
.br-ctl{padding:18px 22px;border-top:1px solid var(--line);background:#F7FAFF;display:grid;gap:12px}
.br-k{font-size:14px;font-weight:700;color:var(--deep)}
.br-dir{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.br-dir button{padding:10px 8px;border-radius:9px;font-size:15px;font-weight:700;color:var(--text);transition:background-color .25s ease,color .25s ease}
.br-dir [aria-pressed=true]{background:var(--cobalt);color:#fff}
.br-off{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer}
.br-chk{padding:18px 22px 22px;border-top:1px solid var(--line);display:grid;gap:8px}
.br-sum{font-size:16px;font-weight:700;color:var(--t-teal)}
.wl-wall.off~* .br-sum,.br-sum.bad{color:var(--t-coral)}
.br-probs{display:grid;gap:8px;counter-reset:p;margin-top:4px}
.br-probs li{counter-increment:p}
.br-probs button{display:grid;grid-template-columns:24px 1fr;gap:10px;text-align:left;font-size:15px;line-height:1.45;color:var(--ink);padding:8px 10px;border-radius:10px;transition:background-color .2s ease}
.br-probs button::before{content:counter(p);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--t-coral);color:#fff;font-size:13px;font-weight:800}
.br-probs button:hover,.br-probs button:focus-visible{background:#FFF0F2}

/* the wall: widths proportional to each format's ratio, so every row shares one height */
.wl-wall{display:grid;gap:22px}
.wl-row{display:flex;gap:20px;align-items:flex-start}
.as{margin:0;min-width:0;--ar:1}
.as-poster{flex:.8 1 0;--ar:4/5}.as-story{flex:.5625 1 0;--ar:9/16}.as-square{flex:1 1 0;--ar:1}
.as-banner{flex:1.91 1 0;--ar:1.91}.as-email{flex:2 1 0;--ar:2}
.as-art{position:relative;aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sh-ui);container-type:inline-size;transition:box-shadow .3s ease}
.as-art img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:left .7s var(--out),top .7s var(--out),width .7s var(--out),height .7s var(--out),border-radius .7s var(--out)}
.as figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-top:8px;padding:7px 11px;border-radius:9px;background:#fff;box-shadow:var(--sh-ui);font-size:14px;font-weight:700;color:var(--ink)}
.as-st::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.as-st{color:var(--t-teal)}.as-st.bad{color:var(--t-coral)}

/* the example design, direction A "Studio light": photograph, calm white caption panel */
.as-copy{position:absolute;left:5cqi;right:5cqi;bottom:5cqi;padding:5cqi 6cqi;border-radius:2.4cqi;background:#fff;color:var(--ink);display:grid;gap:1.6cqi;justify-items:start;transition:transform .7s var(--out),background-color .5s ease,left .7s var(--out),right .7s var(--out),top .7s var(--out),bottom .7s var(--out)}
.as-logo{font-size:max(9px,4.2cqi);font-weight:800;letter-spacing:.01em;color:var(--t-coral)}
.as-h{font-size:max(12px,8.6cqi);line-height:1.04;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.as-s{font-size:max(9px,4.4cqi);line-height:1.35;color:var(--text)}
.as-b{display:inline-block;margin-top:1cqi;padding:2.4cqi 4.2cqi;border-radius:1.8cqi;background:var(--t-coral);color:#fff;font-size:max(9px,4cqi);font-weight:800;transition:background-color .4s ease,color .4s ease}
.as-story .as-copy{bottom:22cqi}.as-story .as-h{font-size:12cqi}.as-story .as-logo,.as-story .as-s,.as-story .as-b{font-size:6.2cqi}
.as-poster .as-h{font-size:9.6cqi}
.as-banner .as-copy,.as-email .as-copy{left:auto;right:3cqi;top:3cqi;bottom:3cqi;width:44%;align-content:center;padding:3cqi 3.4cqi;border-radius:1.4cqi;gap:1cqi}
.as-banner .as-h,.as-email .as-h{font-size:4.6cqi}.as-banner .as-logo,.as-email .as-logo,.as-banner .as-s,.as-email .as-s,.as-banner .as-b,.as-email .as-b{font-size:max(9px,2.1cqi)}
.as-banner .as-b,.as-email .as-b{padding:1.2cqi 2cqi;border-radius:1cqi}

/* the set re-composes one format after another */
.wl-row .as:nth-child(2) .as-copy,.wl-row .as:nth-child(2) img{transition-delay:.06s}.wl-row .as:nth-child(3) .as-copy,.wl-row .as:nth-child(3) img{transition-delay:.12s}.r2 .as:nth-child(1) .as-copy,.r2 .as:nth-child(1) img{transition-delay:.16s}.r2 .as:nth-child(2) .as-copy,.r2 .as:nth-child(2) img{transition-delay:.22s}
/* direction B "Colour and clay": coral tint ground, the photograph set in as a framed picture */
.wl-wall[data-dir=b] .as-art{background:#FFF0F2}
.wl-wall[data-dir=b] .as-art img{left:5cqi;top:5cqi;width:calc(100% - 10cqi);height:47%;border-radius:2cqi}
.wl-wall[data-dir=b] .as-copy{background:transparent;padding:0;left:6cqi;right:6cqi;bottom:6cqi}
.wl-wall[data-dir=b] .as-story .as-art img{height:43%}.wl-wall[data-dir=b] .as-square .as-art img{height:38%}.wl-wall[data-dir=b] .as-poster .as-art img{height:42%}.wl-wall[data-dir=b] .as-story .as-copy{bottom:24cqi}
.wl-wall[data-dir=b] .as-banner .as-art img,.wl-wall[data-dir=b] .as-email .as-art img{left:4cqi;top:4cqi;width:calc(48% - 4cqi);height:calc(100% - 8cqi)}
.wl-wall[data-dir=b] .as-banner .as-copy,.wl-wall[data-dir=b] .as-email .as-copy{left:auto;right:4cqi;top:4cqi;bottom:4cqi;width:42%}

/* off-brand version: three typical drifts, each pinned */
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--t-coral);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.9);opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .45s var(--out);z-index:2;pointer-events:none}
.wl-wall.off .pin{opacity:1;transform:none}
.as-story .pin{left:90%;top:84%}.as-square .pin{left:62%;top:86%}.as-banner .pin{left:76%;top:26%}
.wl-wall .as-story .pin::after{content:"1"}.wl-wall .as-square .pin::after{content:"2"}.wl-wall .as-banner .pin::after{content:"3"}
.wl-wall.off .as-story .as-copy{bottom:3cqi}
.wl-wall.off .as-story .as-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:rgba(255,107,120,.22);box-shadow:inset 0 2px 0 var(--ma-coral)}
.wl-wall.off .as-square .as-b{background:var(--ma-amber);color:var(--ink)}
.wl-wall.off .as-banner .as-logo{visibility:hidden}
.wl-wall.off .as-banner .as-h{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:0}
.as.hl .as-art{box-shadow:0 0 0 3px var(--t-coral),var(--sh-ui)}

/* re-composed, not squeezed */
.cr-rc-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s5) var(--s9);align-items:end}
.rc-pair{margin-top:var(--s8);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,5fr);gap:var(--s7);align-items:start}
.rc{margin:0;display:grid;gap:16px}
.rc-frame{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;box-shadow:var(--sh-ui);container-type:inline-size;background:#fff;max-width:300px}
.rc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-bad img{object-position:8% 50%}
.rc-good img{object-position:46% 50%}
.rc-copy{position:absolute;left:6cqi;right:6cqi;top:6cqi;padding:6cqi;border-radius:3cqi;background:#fff;display:grid;gap:2cqi;justify-items:start}
.rc-copy .as-logo{font-size:6cqi}.rc-copy .as-h{font-size:10.5cqi}.rc-copy .as-b{font-size:6cqi;padding:2.8cqi 4.6cqi}
.rc-bad .rc-copy{left:-4cqi;right:auto;top:40%;padding:4cqi 6cqi;border-radius:0;white-space:nowrap}
.rc-bad .rc-copy .as-h{font-size:17cqi}
.rc-safe{position:absolute;left:0;right:0;bottom:0;height:18%;box-shadow:inset 0 2px 0 var(--ma-teal);background:rgba(25,188,169,.14)}
.rc figcaption{display:grid;gap:4px;max-width:300px}
.rc figcaption b{font-size:17px;color:var(--ink)}
.rc figcaption span{font-size:15.5px;line-height:1.5;color:var(--text)}
.rc-notes{display:grid;gap:14px;align-content:start;padding-top:8px}
.rc-notes ul{display:grid}
.rc-notes li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--text)}
.rc-notes li:last-child{border-bottom:1px solid var(--line)}
.rc-notes b{color:var(--ink)}

/* the studio */
.cr-studio{padding:0 0 var(--s10)}
.st-photo{margin:0 auto;max-width:1600px;padding:0 var(--gut)}
.st-photo img{width:100%;aspect-ratio:21/8;object-fit:cover;object-position:60% 45%;border-radius:14px}
.st-copy{padding:var(--s8) var(--gut) 0;display:grid;gap:var(--s7)}

@media (max-width:1100px){
  .wl{grid-template-columns:1fr}.wl-brief{position:static}
  .cr-rc-head{grid-template-columns:1fr}
  .rc-pair{grid-template-columns:1fr 1fr}.rc-notes{grid-column:1/-1}
}
@media (max-width:760px){
  .wl{margin-top:var(--s6)}
  .wl-row{flex-wrap:wrap;gap:14px}.wl-wall{gap:14px}
  .as-poster{flex:1 1 56%}.as-story{flex:1 1 34%}.as-square{flex:1 1 100%}.as-banner,.as-email{flex:1 1 100%}
  .rc-pair{gap:var(--s5)}.rc-notes li{grid-template-columns:1fr;gap:2px}
  .st-photo{padding:0 12px}.st-photo img{aspect-ratio:4/3;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){.as-art img,.as-copy,.pin{transition:none}}