/* Original comic artwork and its original words remain one reading unit. */
body[data-project="icon-colors"] .comic-panel{width:100%!important;max-width:840px!important;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:44px;align-items:center;margin:12px auto 24px}
body[data-project="icon-colors"] .comic-panel .figure-media{background:none!important;border:0;box-shadow:none;padding:0!important}
body[data-project="icon-colors"] .comic-panel .figure-media img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
body[data-project="icon-colors"] .comic-panel figcaption{display:block;max-width:none;margin:0;padding:0;text-align:left}
body[data-project="icon-colors"] .comic-panel .comic-step{display:block;font-size:12px;line-height:1.5;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
body[data-project="icon-colors"] .comic-panel figcaption>div>strong{display:block;font-size:23px;font-weight:600;line-height:1.25;color:var(--ink);margin-bottom:15px;text-wrap:balance}
body[data-project="icon-colors"] .comic-panel figcaption p{font-size:20px;line-height:1.55;color:var(--muted);margin:9px 0 0;text-wrap:pretty}
body[data-project="icon-colors"] .comic-panel figcaption p strong{font-size:inherit;line-height:inherit;font-weight:600;color:var(--accent)}
body[data-project="icon-colors"] .hero-figure.comic-panel{display:block;max-width:470px!important;align-self:center;margin:0;justify-self:center}
body[data-project="icon-colors"] .hero-figure.comic-panel .figure-media img{max-height:350px}
body[data-project="icon-colors"] .hero-figure.comic-panel figcaption{margin:24px auto 0;max-width:420px}
body[data-project="icon-colors"] .hero-figure.comic-panel .comic-step{float:left;margin-right:15px;margin-top:4px}
body[data-project="icon-colors"] .hero-figure.comic-panel figcaption>div{overflow:hidden}
body[data-project="icon-colors"] .hero-figure.comic-panel figcaption>div>strong{font-size:20px;margin-bottom:10px}
body[data-project="icon-colors"] .hero-figure.comic-panel figcaption p{font-size:18px}
body[data-project="icon-colors"] #guidelines .section-visuals{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
body[data-project="icon-colors"] #guidelines .comic-panel{grid-column:1/-1}
body[data-project="icon-colors"] #guidelines .project-figure:not(.comic-panel){grid-column:auto;max-width:260px}
body[data-project="icon-colors"] #guidelines .project-figure:not(.comic-panel) .figure-media img{max-height:115px}
body[data-project="icon-colors"] #guidelines .project-figure:not(.comic-panel) figcaption{font-size:17px}
body[data-project="icon-colors"] .section-visuals>.project-figure:not(.comic-panel){max-width:600px}
body[data-project="icon-colors"] #setup .figure-media img{max-height:270px}
body[data-project="icon-colors"] :is(#baseline,#meaning,#refinement) .figure-media img{max-height:330px}
body[data-project="icon-colors"] :is(#gradients,#reflection) .section-visuals>.project-figure{max-width:430px}
/* The homepage is a three-scene preview; complete narration appears in the case study. */
.icon-row .comic-art{height:270px;align-items:center;gap:15px;background:none}
.icon-row .comic-art figure{display:flex;flex-direction:column;align-items:stretch;translate:none!important;gap:14px}
.icon-row .comic-art figure img{width:100%;height:180px;max-height:180px;object-fit:contain;object-position:center bottom;background:none}
.icon-row .comic-art figcaption{font:400 14px/1.45 Inter,Arial,sans-serif;color:var(--rest-ink);opacity:.9;margin:0;min-height:42px;text-wrap:pretty}
.icon-row .comic-art figcaption strong{font-weight:500}
.icon-row:is(:hover,:focus-visible) .comic-art figcaption{color:#dedfdf}
@media(max-width:899px){
 body[data-project="icon-colors"] .comic-panel{gap:26px;grid-template-columns:minmax(0,1fr) minmax(200px,.85fr)}
 body[data-project="icon-colors"] .comic-panel figcaption p{font-size:18px}
 .icon-row .comic-art figure img{height:150px;max-height:150px}.icon-row .comic-art figcaption{font-size:13px}
}
@media(max-width:639px){
 body[data-project="icon-colors"] .comic-panel{display:block;max-width:420px!important;margin:8px auto 20px}
 body[data-project="icon-colors"] .comic-panel .figure-media{max-width:310px;margin:auto}
 body[data-project="icon-colors"] .comic-panel .figure-media img{max-height:300px}
 body[data-project="icon-colors"] .comic-panel figcaption{margin-top:24px}
 body[data-project="icon-colors"] .comic-panel figcaption>div>strong{font-size:22px}
 body[data-project="icon-colors"] .comic-panel figcaption p{font-size:18px}
 body[data-project="icon-colors"] #guidelines .section-visuals{display:grid;grid-template-columns:1fr;gap:28px}
 body[data-project="icon-colors"] #guidelines .project-figure:not(.comic-panel){display:grid;grid-template-columns:110px 1fr;align-items:center;gap:20px;max-width:none;width:100%}
 body[data-project="icon-colors"] #guidelines .project-figure:not(.comic-panel) figcaption{padding:0;font-size:17px}
 .icon-row .comic-art{height:180px;min-height:0;gap:10px}
 .icon-row .comic-art figure{gap:10px}.icon-row .comic-art figure img{height:115px;max-height:115px}.icon-row .comic-art figcaption{font-size:12px;line-height:1.4;min-height:50px}
}
/* Override alternating-layout rules: full-width original compositions stay centered. */
body[data-project="icon-colors"] .case-section.layout-editorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7%}
body[data-project="icon-colors"] .case-section.layout-editorial .section-heading{grid-column:1;grid-row:1}
body[data-project="icon-colors"] .case-section.layout-editorial .section-body{grid-column:2;grid-row:1;align-self:center;position:static}
body[data-project="icon-colors"] .case-section.layout-editorial .section-visuals{grid-column:1/-1;grid-row:2;position:static;width:min(100%,940px);justify-self:center}
@media(max-width:700px){body[data-project="icon-colors"] .case-section.layout-editorial{display:block}body[data-project="icon-colors"] .case-section.layout-editorial .section-visuals{margin:28px auto 0}body[data-project="icon-colors"] .case-section.layout-editorial .section-body{margin-top:22px}}
/* Guidelines: distinct applications, full-sized subheads, compact source art. */
body[data-project=icon-colors] #guidelines .section-visuals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;width:100%;max-width:1120px}
body[data-project=icon-colors] #guidelines .project-figure:not(.comic-panel){width:100%;max-width:none;display:block;padding:0}
body[data-project=icon-colors] #guidelines .figure-media{padding:0!important}
body[data-project=icon-colors] #guidelines .figure-media img{width:100%;height:auto;max-height:145px;object-fit:contain}
body[data-project=icon-colors] #guidelines .project-figure>figcaption{display:block;text-align:left;max-width:none;padding-top:22px;font-size:19px!important;line-height:1.5!important}
body[data-project=icon-colors] #guidelines figcaption>span{display:none}
body[data-project=icon-colors] #guidelines .figure-caption-title{font-size:25px!important;line-height:1.25;color:var(--ink);display:block;font-weight:600;margin-bottom:12px}
body[data-project=icon-colors] #guidelines figcaption p{font-size:19px!important;line-height:1.5!important;margin:0}
body[data-project=icon-colors] #reflection .section-heading{grid-column:1/-1;grid-row:1}
body[data-project=icon-colors] #reflection .section-body{grid-column:2;grid-row:2;align-self:center;max-width:550px;padding:0}
body[data-project=icon-colors] #reflection .section-visuals{grid-column:1;grid-row:2;width:100%;max-width:490px;justify-self:center}
body[data-project=icon-colors] #reflection .project-figure{max-width:460px;width:100%}
body[data-project=icon-colors] #reflection .figure-media{padding:0!important}
body[data-project=icon-colors] #reflection .figure-media img{max-height:235px;width:100%;object-fit:contain}
body[data-project=icon-colors] #reflection figcaption{display:block;font-size:19px!important;line-height:1.5!important;width:100%;max-width:none;padding:18px 0 0;text-wrap:pretty}
body[data-project=icon-colors] #reflection figcaption>span{display:none}
@media(max-width:700px){body[data-project=icon-colors] #guidelines .section-visuals{grid-template-columns:1fr;gap:30px}body[data-project=icon-colors] #guidelines .project-figure:not(.comic-panel){display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center}body[data-project=icon-colors] #guidelines .project-figure>figcaption{padding:0}body[data-project=icon-colors] #guidelines .figure-caption-title{font-size:22px!important}body[data-project=icon-colors] #guidelines figcaption p{font-size:17px!important}body[data-project=icon-colors] #reflection{display:flex;flex-direction:column;gap:24px}body[data-project=icon-colors] #reflection .section-visuals{display:block;margin:0!important}body[data-project=icon-colors] #reflection .section-body{margin:0}body[data-project=icon-colors] #reflection .figure-media img{max-height:210px}}
/* The opening chapters pair distinct source details with short explanations. */
body[data-project=icon-colors] #abstract .section-heading{grid-column:1/-1;grid-row:1}
body[data-project=icon-colors] #abstract .section-body{grid-column:1;grid-row:2;max-width:580px;padding:0}
body[data-project=icon-colors] #abstract .section-visuals{grid-column:2;grid-row:2;align-self:center;width:100%;max-width:480px}
body[data-project=icon-colors] #abstract .figure-media{padding:0!important}
body[data-project=icon-colors] #abstract figcaption{display:block;font-size:18px!important;line-height:1.5!important}
body[data-project=icon-colors] #abstract figcaption>span{display:none}
body[data-project=icon-colors] #abstract .figure-caption-title{display:block;font-size:23px;margin:0 0 8px;color:var(--ink)}
body[data-project=icon-colors] #abstract figcaption p{font-size:18px;line-height:1.5;margin:0}
body[data-project=icon-colors] #problem .section-visuals{max-width:780px;width:100%}
body[data-project=icon-colors] #problem .icon-outdoor-context{max-width:none!important}
.icon-outdoor-context .figure-media{position:relative;padding:0!important;overflow:hidden}
body[data-project=icon-colors] #problem .icon-outdoor-context .figure-media img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain}
.icon-outdoor-overlay{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;background:#0000f5;left:46%;top:33%;box-shadow:0 4px 20px #0003;opacity:.92;display:block}.icon-outdoor-overlay svg{color:#fff;width:100%;height:100%;display:block}
body[data-project=icon-colors] #problem .icon-outdoor-context figcaption{font-size:18px;max-width:none}
body[data-project=icon-colors] #meaning .icon-candidate-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:35px;max-width:none!important;width:100%;align-items:center;padding:12px 0}
body[data-project=icon-colors] #meaning .icon-candidate-board .figure-media{padding:0!important}
body[data-project=icon-colors] #meaning .icon-candidate-board figcaption{display:block;font-size:19px!important;line-height:1.5!important;margin:0;padding:0}
body[data-project=icon-colors] #meaning .icon-candidate-board figcaption>span{display:none}
body[data-project=icon-colors] #meaning .icon-candidate-board .figure-caption-title{display:block;font-size:25px;line-height:1.25;color:var(--ink);margin-bottom:12px}
body[data-project=icon-colors] #meaning .icon-candidate-board figcaption p{font-size:19px;line-height:1.5;margin:0}
@media(max-width:700px){body[data-project=icon-colors] #abstract{display:flex;flex-direction:column;gap:24px}body[data-project=icon-colors] #abstract .section-visuals{margin-top:0}body[data-project=icon-colors] #meaning .icon-candidate-board{display:block}body[data-project=icon-colors] #meaning .icon-candidate-board figcaption{margin-top:20px}body[data-project=icon-colors] #meaning .icon-candidate-board .figure-caption-title{font-size:23px}body[data-project=icon-colors] #meaning .icon-candidate-board figcaption p{font-size:18px}body[data-project=icon-colors] #problem .section-visuals.multiple{display:block}}
body[data-project=icon-colors] #setup .figure-media{background:none!important;padding:0!important;border:0!important;box-shadow:none!important}body[data-project=icon-colors] #guidelines .project-figure>figcaption>span{display:none!important}
/* Independent transparent assets, compact studies and equal guideline columns. */
body[data-project=icon-colors] #abstract .figure-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:start;width:100%}
body[data-project=icon-colors] #abstract .icon-bulb-original{max-width:180px!important;width:100%;margin:0 auto!important;display:block!important}
body[data-project=icon-colors] #abstract .icon-bulb-original .figure-media img{width:100%;height:auto;max-height:180px;object-fit:contain}
body[data-project=icon-colors] #abstract .icon-bulb-original figcaption{display:block!important;text-align:center;font-size:17px!important;line-height:1.35!important;margin:14px 0 0;padding:0!important}
body[data-project=icon-colors] #abstract .icon-bulb-original figcaption>span{display:none}
.icon-outdoor-overlay{left:7%;top:9%;opacity:.7;box-shadow:none;width:14%}
body[data-project=icon-colors] #setup .figure-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:65px}
body[data-project=icon-colors] #setup .project-figure{display:block!important;max-width:480px;width:100%;margin:0 auto}
body[data-project=icon-colors] #setup .project-figure figcaption{display:block!important;text-align:center;font-size:19px!important;line-height:1.4!important;margin:16px auto 0;padding:0!important;border:0!important;max-width:none}
body[data-project=icon-colors] #setup .project-figure figcaption>span{display:none}
body[data-project=icon-colors] #meaning{row-gap:25px}
body[data-project=icon-colors] #meaning .section-visuals{margin-top:0!important}
body[data-project=icon-colors] #meaning .icon-interactive-figure{padding:23px 0}
body[data-project=icon-colors] #refinement{grid-template-columns:1fr;row-gap:25px}
body[data-project=icon-colors] #refinement .section-heading{grid-column:1/-1;grid-row:1;max-width:none}
body[data-project=icon-colors] #refinement .section-visuals{grid-column:1/-1;grid-row:2;margin:0!important}
body[data-project=icon-colors] #refinement .section-body{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px;max-width:1040px;justify-self:center;align-self:start;margin:0;padding:0}
body[data-project=icon-colors] #refinement .section-body p{font-size:20px;line-height:1.5;margin:0}
body[data-project=icon-colors] #guidelines .section-visuals{max-width:1120px;grid-template-columns:repeat(3,minmax(0,1fr));gap:65px;align-items:start}
body[data-project=icon-colors] #guidelines .project-figure:not(.comic-panel){display:grid;grid-template-rows:30px 125px auto;gap:17px;align-items:start}
body[data-project=icon-colors] #guidelines .figure-media{height:125px;display:flex;align-items:center;width:100%}
body[data-project=icon-colors] #guidelines .figure-media img{height:110px!important;width:100%;max-height:110px!important;object-fit:contain}
body[data-project=icon-colors] #guidelines .project-figure>figcaption{padding:0!important;margin:0}
body[data-project=icon-colors] #guidelines .figure-caption-title{font-size:24px!important;line-height:1.25;min-height:60px;margin:0 0 12px}
body[data-project=icon-colors] .icon-case-letter{font-size:17px;line-height:1.4;color:var(--accent);border-top:1px solid var(--line);padding-top:11px;display:block;align-self:start}
@media(max-width:700px){body[data-project=icon-colors] #abstract .figure-pair{gap:24px}body[data-project=icon-colors] #setup .figure-pair{grid-template-columns:1fr;gap:32px}body[data-project=icon-colors] #setup .project-figure figcaption{font-size:18px!important}body[data-project=icon-colors] #refinement{display:flex;flex-direction:column}body[data-project=icon-colors] #refinement .section-heading{order:0}body[data-project=icon-colors] #refinement .section-visuals{order:1}body[data-project=icon-colors] #refinement .section-body{order:2;grid-template-columns:1fr;gap:20px;margin:0}body[data-project=icon-colors] #refinement .section-body p{font-size:19px}body[data-project=icon-colors] #guidelines .section-visuals{grid-template-columns:1fr;gap:34px}body[data-project=icon-colors] #guidelines .project-figure:not(.comic-panel){grid-template-columns:1fr;grid-template-rows:auto 105px auto;gap:16px;width:100%;max-width:none}body[data-project=icon-colors] #guidelines .figure-media{height:105px;max-width:300px;margin:0}body[data-project=icon-colors] #guidelines .figure-media img{height:100px!important;max-height:100px!important}body[data-project=icon-colors] #guidelines .figure-caption-title{min-height:0;font-size:25px!important;margin-bottom:10px}body[data-project=icon-colors] #guidelines figcaption p{font-size:19px!important}}