/* Native portfolio artwork, arranged as an interactive reading sequence. */
body[data-project="icon-colors"] .icon-comic-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:36px 0 42px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.icon-overview-scene{margin:0;min-width:0}.icon-overview-scene>img{width:100%;height:225px;object-fit:contain;display:block}.icon-overview-scene figcaption{display:grid;grid-template-columns:25px 1fr;gap:12px;margin-top:20px}.icon-overview-scene figcaption>span{font:500 13px/1.5 var(--font-body);color:var(--accent);padding-top:4px}.icon-overview-scene h3{font:600 23px/1.25 var(--font-body);margin:0 0 12px;text-wrap:balance}.icon-overview-scene p{font:400 18px/1.55 var(--font-body);margin:5px 0;color:var(--ink);text-wrap:pretty}
body[data-project="icon-colors"] .icon-overview-complete .hero-overview{display:block;margin-top:0}.icon-overview-complete .hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px 54px;max-width:none!important}.icon-overview-complete .hero-bottom>p{grid-column:1;grid-row:1;margin:0;font-size:25px!important;line-height:1.45!important}.icon-overview-complete .project-role{grid-column:2;grid-row:1/4;margin:0}.icon-overview-complete .hero-outcome{grid-column:1;grid-row:2;margin-top:14px}.icon-overview-complete .hero-links{grid-column:1;grid-row:3}.icon-overview-complete .project-meta{grid-column:1/-1}
body[data-project="icon-colors"] :is(#baseline,#meaning,#refinement,#gradients) .section-visuals{width:100%;max-width:none;display:grid;gap:36px;grid-column:1/-1;position:static}
.icon-interactive-figure{width:100%;min-width:0;color:var(--ink);font-family:var(--font-body);border-block:1px solid var(--line);padding:26px 0}
.icon-lab-instruction{display:flex;gap:20px;align-items:baseline;justify-content:space-between;margin:0 0 26px}.icon-lab-instruction strong{font-size:24px;font-weight:600}.icon-lab-instruction>span{font-size:17px;color:#c4cdce}
.icon-lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:32px;align-items:center}.icon-matrix-scroll{overflow-x:auto;min-width:0;padding:6px 3px 10px;scrollbar-color:#667477 #1a2124;scrollbar-width:thin}.icon-pair-matrix{display:grid;grid-template-columns:68px repeat(12,minmax(44px,1fr));gap:10px 7px;min-width:690px;align-items:center}.matrix-corner,.matrix-mode,.matrix-hue{font-size:13px;color:#d1d9da;text-align:center}.matrix-mode{text-align:left;font-size:14px}.icon-pair{border:1px solid transparent;padding:4px;border-radius:11px;background:none;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;aspect-ratio:1;min-width:0;line-height:0}.icon-pair svg{display:block;width:100%;height:auto}.icon-pair:hover,.icon-pair[aria-pressed=true]{background:#ffffff0e;border-color:#b8dce0;transform:translateY(-2px)}.icon-pair:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.icon-lab-preview{padding-left:30px;border-left:1px solid var(--line);min-width:0}.icon-preview-art{width:136px;margin:0 auto 22px;filter:drop-shadow(0 8px 20px #0004)}.icon-preview-art svg{width:100%;height:auto;display:block}.icon-preview-name{font-weight:600;font-size:23px;line-height:1.3;margin:0 0 8px}.icon-preview-pair{font-size:17px;color:#c8e5e7;margin:0 0 14px}.icon-preview-rule{font-size:17px;line-height:1.5;margin:0;color:#cbd3d4;text-wrap:pretty}.icon-lab-note{font-size:15px;line-height:1.5;margin:24px 0 0;color:#aebbbe;max-width:95ch;text-wrap:pretty}
.icon-refinement-lab{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}.icon-workshop-original{margin:0}.icon-workshop-original img{display:block;max-width:100%;width:330px;max-height:320px;object-fit:contain;margin:auto}.icon-workshop-original figcaption{display:block;margin:22px 0 0;font-size:18px;line-height:1.55;color:#d7dede}.icon-workshop-original figcaption strong{display:block;margin-bottom:10px;font-size:24px;color:var(--ink)}.icon-refinement-groups{display:grid;gap:24px}.icon-refinement-group h3{font-size:22px;margin:0 0 15px}.icon-refinement-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.icon-refinement-controls button{font:inherit;color:inherit;background:transparent;border:1px solid #ffffff22;padding:13px 12px 12px;border-radius:12px;cursor:pointer;text-align:center;transition:background .2s,border-color .2s,transform .2s}.icon-refinement-controls button[aria-pressed=true]{border-color:#97bec2;background:#d8f7ff0d;transform:translateY(-3px)}.icon-refinement-controls svg{display:block;width:66px;height:66px;max-width:100%;margin:0 auto 14px;overflow:hidden}.icon-refinement-controls button span{font-size:16px;line-height:1.3;display:block}.icon-refinement-note{min-height:45px;font-size:17px;line-height:1.5;margin:14px 0 0;color:#c9d6d8}
.icon-gradient-lab{max-width:930px;margin:auto}.icon-gradient-specimens{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.icon-gradient-option{border:0;border-bottom:2px solid transparent;background:none;color:var(--ink);padding:0 10px 20px;cursor:pointer;font:inherit;text-align:center}.icon-gradient-disc{display:block;width:120px;height:120px;border-radius:50%;margin:0 auto 20px;background:linear-gradient(120deg,#77fbfe 15%,var(--gradient-end) 80%);background-size:180% 180%;animation:icon-color-drift 5s ease-in-out infinite alternate;box-shadow:0 9px 30px #0002}.icon-gradient-disc svg{width:100%;height:100%;color:#fff;fill:currentColor}.icon-gradient-option[aria-pressed=true]{border-color:var(--accent)}.icon-gradient-option strong{font-size:21px;display:block;font-weight:500}.icon-gradient-option>span:last-child{display:block;font-size:16px;color:#c1ced0;margin-top:8px}.icon-gradient-result{font-size:21px;font-weight:500;margin:24px 0 0;text-align:center;min-height:30px;color:var(--accent)}
@keyframes icon-color-drift{from{background-position:0% 20%}to{background-position:100% 70%}}
@media(max-width:1100px){.icon-lab-layout{grid-template-columns:minmax(0,1fr) 190px;gap:22px}.icon-pair-matrix{min-width:650px;gap:9px 4px;grid-template-columns:60px repeat(12,minmax(40px,1fr))}.icon-lab-preview{padding-left:22px}.icon-refinement-lab{gap:30px}.icon-overview-scene>img{height:185px}}
@media(max-width:700px){
 body[data-project="icon-colors"] .icon-comic-overview{grid-template-columns:1fr;gap:28px;margin:28px 0;padding-bottom:28px}.icon-overview-scene{display:grid;grid-template-columns:1fr 1.1fr;gap:15px;align-items:center}.icon-overview-scene>img{height:auto;max-height:205px}.icon-overview-scene figcaption{display:block;margin:0}.icon-overview-scene figcaption>span{display:block;margin-bottom:8px}.icon-overview-scene h3{font-size:20px;margin:0 0 10px}.icon-overview-scene p{font-size:16px;line-height:1.5}
 .icon-overview-complete .hero-bottom{display:block}.icon-overview-complete .hero-bottom>p{font-size:22px!important}.icon-overview-complete .project-role{margin:25px 0}.icon-overview-complete .hero-outcome{margin:20px 0}
 .icon-lab-instruction{display:block;margin-bottom:20px}.icon-lab-instruction strong{font-size:22px;display:block;margin-bottom:10px}.icon-lab-instruction>span{font-size:16px}.icon-lab-layout{display:flex;flex-direction:column;align-items:stretch;gap:24px}.icon-matrix-scroll{width:100%}.icon-pair-matrix{min-width:665px}.icon-lab-preview{display:grid;grid-template-columns:110px 1fr;gap:7px 22px;border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.icon-preview-art{grid-column:1;grid-row:1/4;width:100%;margin:0;align-self:center}.icon-preview-name{font-size:22px;margin:0}.icon-preview-pair{font-size:16px;margin:0}.icon-preview-rule{font-size:16px}.icon-lab-note{font-size:14px;margin-top:20px}.icon-refinement-lab{display:block}.icon-workshop-original{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;margin-bottom:28px}.icon-workshop-original figcaption{margin:0;font-size:16px}.icon-workshop-original figcaption strong{font-size:21px}.icon-refinement-controls{gap:10px}.icon-refinement-controls button{padding:12px 5px}.icon-refinement-controls button span{font-size:15px}.icon-refinement-controls svg{width:62px;height:62px}.icon-refinement-note{font-size:16px;min-height:44px}.icon-gradient-specimens{gap:12px}.icon-gradient-option{padding-inline:0}.icon-gradient-disc{width:86px;height:86px}.icon-gradient-option strong{font-size:17px;line-height:1.3}.icon-gradient-option>span:last-child{font-size:15px}.icon-gradient-result{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.icon-gradient-disc{animation:none}.icon-pair,.icon-refinement-controls button{transition:none;transform:none!important}}
/* A compact first viewport: story, contribution and outcome remain together. */
body[data-project=icon-colors] .case-hero{padding-top:24px}
body[data-project=icon-colors] .case-hero h1{font-size:clamp(54px,6vw,88px);margin:12px 0 10px}
body[data-project=icon-colors] .hero-subtitle{font-size:clamp(25px,2.5vw,34px);line-height:1.15;margin-bottom:0}
body[data-project=icon-colors] .icon-overview-complete .hero-overview{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;margin-top:22px;align-items:center}
body[data-project=icon-colors] .icon-overview-complete .hero-bottom{display:block;max-width:none;margin:0}
body[data-project=icon-colors] .icon-overview-complete .hero-bottom>p{font-size:19px!important;line-height:1.4!important;margin:0 0 13px}
body[data-project=icon-colors] .icon-overview-complete .project-role{margin:13px 0;padding:12px 17px}
body[data-project=icon-colors] .icon-overview-complete .role-value{font-size:20px;line-height:1.25}
body[data-project=icon-colors] .icon-overview-complete .role-detail{font-size:17px;line-height:1.45;max-width:none}
body[data-project=icon-colors] .icon-overview-complete .hero-outcome{margin:12px 0 0}
body[data-project=icon-colors] .icon-overview-complete .hero-outcome p{font-size:17px!important;line-height:1.45!important}
body[data-project=icon-colors] .icon-overview-complete .hero-links{margin-top:12px;justify-content:flex-start;max-width:none}
body[data-project=icon-colors] .icon-overview-complete .project-meta{display:none}
body[data-project=icon-colors] .icon-comic-overview{gap:18px;margin:0;padding:0;border:0;align-items:start}
.icon-overview-scene>img{height:170px;object-position:center bottom}.icon-overview-scene figcaption{display:block;margin:12px 0 0;padding:0}.icon-overview-scene figcaption>span{font-size:12px;display:block;margin:0 0 6px}.icon-overview-scene h3{font-size:19px;line-height:1.25;margin-bottom:8px;text-wrap:pretty}.icon-overview-scene p{font-size:16px;line-height:1.4;margin:4px 0}
body[data-project=icon-colors] .case-hero .stats{margin-top:24px;padding:18px 0;gap:20px}body[data-project=icon-colors] .case-hero .stats strong{font-size:37px}body[data-project=icon-colors] .case-hero .stats span{font-size:14px;margin-top:6px}
/* Exactly twelve colors at rest. Foreground choices appear only on interaction. */
.icon-hue-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;width:100%}.icon-hue{border:1px solid transparent;background:none;padding:7px 5px;color:var(--ink);cursor:pointer;font:inherit;border-radius:8px;min-width:0}.icon-hue>span{display:block;border-radius:50%;aspect-ratio:1;max-width:65px;margin:0 auto 10px}.icon-hue>small{font-size:15px;display:block}.icon-hue:is(:hover,:focus-visible),.icon-hue[aria-expanded=true]{border-color:var(--accent)}.icon-hue:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.icon-hue-comparison[hidden]{display:none!important}.icon-hue-comparison{margin-top:24px;border-top:1px solid var(--line);padding-top:23px;animation:icon-compare-open .25s ease-out}.icon-compare-head{display:flex;gap:25px;justify-content:space-between;align-items:start}.icon-compare-head strong{font-size:23px;font-weight:500;line-height:1.3}.icon-compare-head p{font-size:17px!important;line-height:1.5!important;color:#cbd3d4;margin:7px 0 0}.icon-compare-head>button{border:0;background:none;color:var(--ink);font:inherit;font-size:15px;padding:7px 0 7px 12px;white-space:nowrap;cursor:pointer}.icon-compare-head>button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.icon-compare-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:560px;margin:23px auto 0}.icon-compare-options figure{margin:0}.icon-specimen-disc{display:block;width:116px;max-width:100%;aspect-ratio:1;border-radius:50%;margin:auto}.icon-specimen-disc>svg{width:100%;height:100%;display:block}.icon-compare-options figcaption{display:block;text-align:center;font-size:18px!important;line-height:1.3;color:var(--ink);padding-top:12px;margin:0}.icon-lab-note{font-size:14px;margin-top:18px}
@keyframes icon-compare-open{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1100px){body[data-project=icon-colors] .icon-overview-complete .hero-overview{grid-template-columns:1fr;gap:22px}body[data-project=icon-colors] .icon-overview-complete .hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}.icon-overview-complete .hero-bottom>p{grid-column:1;grid-row:1}.icon-overview-complete .project-role{grid-column:2;grid-row:1/4!important}.icon-overview-complete .hero-outcome{grid-column:1;grid-row:2}.icon-overview-complete .hero-links{grid-column:1;grid-row:3}.icon-overview-scene>img{height:165px}.icon-hue-grid{gap:8px}}
@media(max-width:700px){body[data-project=icon-colors] .case-hero{padding-top:25px}body[data-project=icon-colors] .icon-overview-complete .hero-bottom{display:block}body[data-project=icon-colors] .icon-comic-overview{grid-template-columns:1fr;gap:22px}.icon-overview-scene{grid-template-columns:.8fr 1.2fr;gap:18px}.icon-overview-scene>img{height:auto;max-height:170px}.icon-overview-scene figcaption{margin:0}.icon-overview-scene p{font-size:16px}.icon-overview-scene h3{font-size:19px}.icon-hue-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}.icon-hue>span{max-width:57px}.icon-hue>small{font-size:14px}.icon-compare-head strong{font-size:21px}.icon-compare-head p{font-size:16px!important}.icon-compare-options{gap:20px}.icon-specimen-disc{width:88px}.icon-compare-options figcaption{font-size:16px!important}.icon-lab-instruction{margin-bottom:17px}.icon-lab-note{font-size:13px}body[data-project=icon-colors] .case-hero .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.icon-hue-comparison{animation:none}}
/* Source-exported alternatives: each cell is an exact crop of the original board. */
body[data-project=icon-colors] .icon-refinement-lab{grid-template-columns:minmax(220px,.72fr) minmax(0,1.65fr);gap:46px;align-items:center}
.icon-original-explorations{min-width:0}.icon-exploration-heading h3{font-size:27px;line-height:1.2;margin:0 0 9px}.icon-exploration-heading p{font-size:17px!important;line-height:1.5!important;color:#cbd6d8;margin:0 0 22px}.icon-exploration-row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.icon-exploration-row h4{font-size:15px;font-weight:500;line-height:1.3;margin:0}.icon-exploration-variants{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.icon-exploration-variants button{background:transparent;border:1px solid transparent;border-radius:9px;padding:3px;min-width:0;font:inherit;color:#c7d3d4;cursor:pointer}.icon-exploration-variants img{width:100%;height:auto;display:block;border-radius:50%;margin:0;max-height:none!important}.icon-exploration-variants button>span{display:block;font-size:11px;margin-top:5px}.icon-exploration-variants button[aria-pressed=true],.icon-exploration-variants button:hover{border-color:var(--accent)}.icon-exploration-variants button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.icon-exploration-selection{font-size:18px!important;line-height:1.4!important;color:var(--accent);min-height:27px;margin:20px 0 0}.icon-original-explorations .icon-lab-note{font-size:14px!important;line-height:1.5!important;margin-top:10px}.icon-refinement-lab .icon-workshop-original img{max-height:230px;width:280px}.icon-refinement-lab .icon-workshop-original figcaption{font-size:18px!important;line-height:1.5!important;padding:0}.icon-refinement-lab .icon-workshop-original figcaption strong{font-size:25px!important}
body[data-project=icon-colors] .case-hero .stats strong [data-counter-display]{font:inherit;display:inline;letter-spacing:inherit;margin:0;line-height:inherit}
body[data-project=icon-colors] .case-hero .project-title-row{margin:12px 0}
body[data-project=icon-colors] .case-hero .project-title-row h1{margin:0}
body[data-project=icon-colors] .case-hero .hero-subtitle{font-size:clamp(25px,2.2vw,32px);margin:8px 0 0}
body[data-project=icon-colors] .case-hero .hero-overview{margin-top:17px}
body[data-project=icon-colors] .case-hero .stats{margin-top:18px;padding:15px 0}
@media(max-width:1100px){body[data-project=icon-colors] .icon-refinement-lab{display:block}.icon-refinement-lab .icon-workshop-original{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;margin-bottom:30px}.icon-refinement-lab .icon-workshop-original figcaption{margin:0}}
@media(max-width:700px){body[data-project=icon-colors] .icon-overview-complete .hero-bottom{order:0}.icon-overview-complete .icon-comic-overview{order:1}.icon-refinement-lab .icon-workshop-original{grid-template-columns:1fr;gap:18px}.icon-refinement-lab .icon-workshop-original img{max-height:195px;width:240px}.icon-refinement-lab .icon-workshop-original figcaption{font-size:17px!important}.icon-exploration-row{display:block;padding:17px 0}.icon-exploration-row h4{font-size:20px;margin:0 0 14px}.icon-exploration-variants{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.icon-exploration-variants button>span{font-size:13px}.icon-exploration-heading h3{font-size:26px}.icon-exploration-heading p{font-size:17px!important}.icon-exploration-selection{font-size:18px!important}body[data-project=icon-colors] .case-hero .stats>div>span{font-size:14px}}
body[data-project=icon-colors] .case-hero .stats strong{font-size:50px}
body[data-project=icon-colors] .icon-refinement-lab{display:block;max-width:950px;margin:auto}
.icon-cycle-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:42px;margin:25px 0}.icon-cycle-preview figure{margin:0;text-align:center}.icon-cycle-preview img{display:block;width:135px!important;height:135px!important;max-height:135px!important;border-radius:50%;margin:auto}.icon-cycle-preview figcaption{font-size:20px!important;display:block;text-align:center;color:var(--ink);padding:15px 0 0}.icon-cycle-toolbar{display:flex;gap:20px;align-items:center;padding:18px 0;border-block:1px solid var(--line)}.icon-cycle-toolbar>div{flex:1;min-width:0}.icon-cycle-count{font-size:13px;display:block;color:var(--accent);margin-bottom:6px}.icon-cycle-treatment{display:block;font-weight:500;font-size:23px;line-height:1.3}.icon-cycle-toolbar button,.icon-exploration-toggle{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--line);padding:9px 12px;cursor:pointer}.icon-exploration-toggle{margin-top:20px;border:0;border-bottom:1px solid var(--line);padding-inline:0}.icon-original-explorations [hidden]{display:none!important}.icon-exploration-full{margin-top:20px}
@media(max-width:700px){.icon-cycle-preview{grid-template-columns:repeat(2,1fr);gap:23px;margin:25px 0}.icon-cycle-preview img{width:115px!important;height:115px!important}.icon-cycle-preview figcaption{font-size:19px!important}.icon-cycle-toolbar{flex-wrap:wrap;gap:15px}.icon-cycle-toolbar>div{flex:0 0 100%}.icon-cycle-treatment{font-size:22px}body[data-project=icon-colors] .case-hero .stats strong{font-size:44px}}
/* The designer's original alternatives rotate on their own. */
.icon-cycle-toolbar{border:0;padding-bottom:0}.icon-cycle-toolbar>div{min-width:0}.icon-exploration-heading h3{font-size:25px}.icon-cycle-preview{margin:25px 0 20px}.icon-cycle-toolbar>button{font-size:15px;padding:8px 13px}
@media(max-width:700px){.icon-cycle-preview{gap:23px}.icon-cycle-toolbar{gap:14px}.icon-cycle-toolbar>div{flex:0 0 100%}}

/* Study 3 uses only its chapter boundaries, not nested divider rules. */
body[data-project=icon-colors] #refinement .icon-interactive-figure{border:0;padding-block:12px}