/* Keep the portfolio's comic sequence and wording as original artwork + live text. */
body[data-project=icon-colors] .icon-comic-overview{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;gap:14px 20px;align-items:start;max-width:660px;width:100%;margin:0 auto;padding:0;border:0;
}
body[data-project=icon-colors] .icon-overview-scene{display:block;margin:0;min-width:0}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="01"]{grid-column:1;grid-row:1}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="02"]{grid-column:2;grid-row:1/3}
body[data-project=icon-colors] .icon-overview-scene>img{display:block;width:100%;height:155px;max-height:none;object-fit:contain;object-position:center bottom}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="02"]>img{height:205px}
body[data-project=icon-colors] .icon-overview-scene figcaption{display:block!important;padding:0!important;margin:8px 0 0!important;border:0}
body[data-project=icon-colors] .icon-overview-scene figcaption>span{display:none}
body[data-project=icon-colors] .icon-comic-copy,body[data-project=icon-colors] .icon-comic-reactions{background:#77fbfe;color:#071719;padding:11px 13px}
body[data-project=icon-colors] .icon-comic-reactions{margin-top:8px}
body[data-project=icon-colors] .icon-overview-scene p{font:400 17px/1.38 var(--font-body);letter-spacing:0;color:#071719;margin:0;text-wrap:pretty}
body[data-project=icon-colors] .icon-overview-scene p+p{margin-top:3px}
body[data-project=icon-colors] .case-study .icon-overview-scene p strong{color:#071719!important;font-weight:700}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]{display:contents}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]>img{grid-column:1;grid-row:2;height:137px}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]>figcaption{grid-column:1/-1;grid-row:3;margin:0!important}
body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"] .icon-comic-copy{padding:12px 15px}

/* Highlights share the project's blue-cyan accent; captions remain readable prose. */
body[data-project=icon-colors] .case-study :is(p,blockquote,li) strong{color:var(--accent)}
body[data-project=icon-colors] .case-study .text-emphasis{color:var(--accent)!important}
body[data-project=icon-colors] .case-study :is(#abstract,#workshop,#refinement,#future){display:block!important}
body[data-project=icon-colors] .case-study :is(#abstract,#workshop,#refinement,#future)>.section-heading{max-width:none;margin:0!important}
body[data-project=icon-colors] .case-study :is(#abstract,#workshop,#refinement,#future)>.section-body{position:static!important;display:block!important;width:100%;max-width:none!important;margin:22px 0 0!important;padding:0;grid-column:1/-1;grid-row:auto}
body[data-project=icon-colors] .case-study :is(#abstract,#workshop,#refinement,#future)>.section-body>p{max-width:none!important;width:100%;text-wrap:pretty}
body[data-project=icon-colors] .case-study #refinement>.section-visuals{position:static!important;display:block!important;grid-column:1/-1;grid-row:auto;margin:30px 0 0;width:100%;max-width:none}
body[data-project=icon-colors] .case-study #refinement>.section-body{order:1}
body[data-project=icon-colors] .case-study #refinement>.section-visuals{order:2}
body[data-project=icon-colors] #abstract .icon-abstract-pairs{display:none}

/* Screen rules and AR light are compared together, then the original design levers. */
body[data-project=icon-colors] .icon-context-explanation{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px;margin-top:-30px}
body[data-project=icon-colors] .icon-context-explanation p{margin:0;font-size:20px;line-height:1.5}
body[data-project=icon-colors] #problem .icon-abstract-pairs{padding-top:30px;margin-top:34px;border-top:1px solid var(--line);gap:35px}
body[data-project=icon-colors] .icon-abstract-pair-art{height:94px;gap:16px}
body[data-project=icon-colors] .icon-abstract-t-pair{position:static;overflow:visible;width:185px;height:82px;flex:none}
body[data-project=icon-colors] .icon-abstract-t-pair img{position:static;width:185px!important;height:82px!important;object-fit:contain}
body[data-project=icon-colors] .icon-abstract-opposite{display:block;width:76px;flex:none}
body[data-project=icon-colors] .icon-abstract-opposite .icon-specimen-disc{width:76px}
body[data-project=icon-colors] .icon-abstract-pairs figcaption{margin-top:17px!important}
body[data-project=icon-colors] .icon-abstract-pairs h3{font-size:22px}
body[data-project=icon-colors] .icon-abstract-pairs p{font-size:17px}

/* Parking is the shared worked example: all twelve original alternatives stay visible. */
body[data-project=icon-colors] .icon-gallery-heading{font:600 27px/1.25 var(--font-body);margin:0 0 26px}
body[data-project=icon-colors] .icon-parking-example h4,body[data-project=icon-colors] .icon-weather-treatments h4{font:600 20px/1.3 var(--font-body);color:var(--accent);margin:0 0 23px}
body[data-project=icon-colors] .icon-parking-alternatives{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 28px}
body[data-project=icon-colors] .icon-parking-alternatives figure{margin:0;min-width:0;text-align:center}
body[data-project=icon-colors] .icon-parking-alternatives figure>img{display:block;width:80px;height:80px;object-fit:contain;margin:0 auto;border-radius:50%}
body[data-project=icon-colors] .icon-parking-alternatives .icon-tested-art{width:80px}
body[data-project=icon-colors] .icon-parking-alternatives figcaption{display:block!important;font:400 16px/1.4 var(--font-body);color:var(--ink);text-align:center;margin:0;padding:13px 0 0!important;max-width:160px;margin-inline:auto}
body[data-project=icon-colors] .icon-weather-treatments{margin-top:40px}
body[data-project=icon-colors] .icon-weather-treatments .icon-tested-row{grid-template-columns:repeat(5,minmax(0,1fr));max-width:900px;gap:28px}
body[data-project=icon-colors] .icon-weather-treatments .icon-tested-art{width:76px}
body[data-project=icon-colors] .icon-weather-treatments figcaption{font-size:16px;line-height:1.4;color:var(--ink)}
body[data-project=icon-colors] .icon-alternatives-all{gap:30px;margin-top:42px}
body[data-project=icon-colors] .icon-alternative-family h4{font-size:20px;color:var(--accent);margin-bottom:20px}
body[data-project=icon-colors] .icon-alternative-family>div{gap:20px}
body[data-project=icon-colors] .icon-alternative-family img{width:72px;max-width:100%;height:72px;object-fit:contain}
body[data-project=icon-colors] .icon-alternative-family figcaption{font-size:15px;line-height:1.4;color:var(--ink)}

/* A single conclusion: urgency, evidence, then the less conventional color pairings. */
body[data-project=icon-colors] #guidelines.icon-guidelines-combined{display:block!important}
body[data-project=icon-colors] .icon-guidance-content{margin-top:22px}
body[data-project=icon-colors] .icon-guidance-intro p{font:400 20px/1.55 var(--font-body);margin:0 0 24px;max-width:100%;text-wrap:pretty}
body[data-project=icon-colors] .icon-priority-guidance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin-top:32px}
body[data-project=icon-colors] .icon-priority-label{display:block;color:var(--accent);font:600 15px/1.4 var(--font-body);letter-spacing:.04em;margin-bottom:17px}
body[data-project=icon-colors] .icon-priority-guidance figure{height:100px;display:flex;align-items:center;margin:0 0 22px}
body[data-project=icon-colors] .icon-priority-guidance figure img{width:100%;max-width:320px;height:100px;object-fit:contain;object-position:left center}
body[data-project=icon-colors] .icon-guidance-content h3{font:600 24px/1.25 var(--font-body);margin:0 0 14px;text-wrap:pretty}
body[data-project=icon-colors] .icon-guidance-content p{font:400 18px/1.5 var(--font-body);margin:0;text-wrap:pretty}
body[data-project=icon-colors] .icon-priority-guidance .icon-guidance-evidence{color:var(--muted);margin-top:14px;font-size:17px}
body[data-project=icon-colors] .icon-priority-guidance .icon-guidance-takeaway{margin-top:16px;padding-left:14px;border-left:2px solid var(--accent);color:var(--accent);font-size:18px}
body[data-project=icon-colors] .icon-guidance-findings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px;margin-top:42px;padding-top:34px;border-top:1px solid var(--line)}
body[data-project=icon-colors] .icon-guidance-findings article{min-width:0;display:flex;flex-direction:column}
body[data-project=icon-colors] .icon-guidance-findings figure{order:1;margin:24px 0 0;height:110px;display:flex;align-items:center}
body[data-project=icon-colors] .icon-guidance-findings img{max-width:360px;width:100%;height:110px;object-fit:contain;object-position:left center}
body[data-project=icon-colors] .icon-guidance-metric{display:block;font:600 30px/1.2 var(--font-display);color:var(--accent);margin:0 0 14px}
body[data-project=icon-colors] .icon-guidance-audience{display:grid;grid-template-columns:220px minmax(0,1fr);gap:38px;align-items:center;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
body[data-project=icon-colors] .icon-guidance-audience-art img{display:block;max-width:220px;width:100%;height:auto;object-fit:contain}
body[data-project=icon-colors] .icon-guidance-audience h3{margin-bottom:12px}

@media(max-width:1100px){
 body[data-project=icon-colors] .icon-comic-overview{max-width:780px;margin-top:24px}
 body[data-project=icon-colors] .icon-overview-scene>img{height:210px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="02"]>img{height:255px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]>img{height:170px}
 body[data-project=icon-colors] .icon-context-explanation{margin-top:0}
 body[data-project=icon-colors] .icon-priority-guidance{gap:26px}
}
@media(max-width:760px){
 body[data-project=icon-colors] .icon-comic-overview{gap:12px 16px}
 body[data-project=icon-colors] .icon-overview-scene>img{height:155px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="02"]>img{height:190px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]>img{height:140px}
 body[data-project=icon-colors] .icon-overview-scene p{font-size:17px}
 body[data-project=icon-colors] .icon-comic-copy,body[data-project=icon-colors] .icon-comic-reactions{padding:10px}
 body[data-project=icon-colors] .icon-context-explanation{grid-template-columns:1fr;gap:18px}
 body[data-project=icon-colors] #problem .icon-abstract-pairs{grid-template-columns:1fr;gap:30px}
 body[data-project=icon-colors] .icon-abstract-pairs figure{display:block}
 body[data-project=icon-colors] .icon-parking-alternatives{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
 body[data-project=icon-colors] .icon-parking-alternatives figcaption{font-size:15px}
 body[data-project=icon-colors] .icon-weather-treatments .icon-tested-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
 body[data-project=icon-colors] .icon-alternative-family>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 15px}
 body[data-project=icon-colors] .icon-priority-guidance{grid-template-columns:1fr;gap:35px}
 body[data-project=icon-colors] .icon-priority-guidance figure{margin-bottom:18px;max-width:320px}
 body[data-project=icon-colors] .icon-guidance-findings{grid-template-columns:1fr;gap:34px}
 body[data-project=icon-colors] .icon-guidance-audience{grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
 body[data-project=icon-colors] .icon-guidance-content h3{font-size:23px}
}
@media(max-width:540px){
 body[data-project=icon-colors] .icon-comic-overview{gap:12px}
 body[data-project=icon-colors] .icon-overview-scene>img{height:120px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="02"]>img{height:150px}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"]>img{height:120px}
 body[data-project=icon-colors] .icon-overview-scene p{font-size:16px;line-height:1.4}
 body[data-project=icon-colors] .icon-overview-scene[data-comic-step="03"] .icon-comic-copy{padding:11px 12px}
 body[data-project=icon-colors] .icon-parking-alternatives{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
 body[data-project=icon-colors] .icon-parking-alternatives figcaption{font-size:16px}
 body[data-project=icon-colors] .icon-alternative-family>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
 body[data-project=icon-colors] .icon-alternative-family img{width:80px;height:80px}
 body[data-project=icon-colors] .icon-alternative-family figcaption{font-size:16px}
 body[data-project=icon-colors] .icon-guidance-audience{grid-template-columns:1fr;gap:23px}
 body[data-project=icon-colors] .icon-guidance-audience-art img{max-width:200px}
}

/* Quiet comic panels retain readable type without opaque cyan blocks. */
body[data-project=icon-colors] :is(.icon-comic-copy,.icon-comic-reactions){background:rgba(119,251,254,.16);color:#edf5f4}
body[data-project=icon-colors] .icon-overview-scene p{color:#edf5f4}
body[data-project=icon-colors] .case-study .icon-overview-scene p strong{color:#a7f2f3!important}

/* Show every original pixel and provide breathing room around the icon edges. */
body[data-project=icon-colors] .icon-parking-example h4{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:23px}
body[data-project=icon-colors] .icon-parking-example h4 small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:.02em}
body[data-project=icon-colors] .icon-hue-swatch{display:inline-block;width:20px;height:20px;border:1px solid #85889a;border-radius:3px;flex:none}
body[data-project=icon-colors] .icon-parking-alternatives figure{padding-top:8px;overflow:visible}
body[data-project=icon-colors] .icon-parking-alternatives figure>img{width:88px;height:88px;max-width:100%;max-height:none;object-fit:contain;border-radius:0;clip-path:none}
body[data-project=icon-colors] .icon-parking-alternatives .icon-tested-art{width:80px;margin-block:4px;overflow:visible}
body[data-project=icon-colors] .icon-parking-alternatives .icon-tested-art>img{object-fit:contain;max-height:none;clip-path:none}

/* One Study chapter, three clearly subordinate experiments. */
body[data-project=icon-colors] #study.icon-study-group{display:block!important}
body[data-project=icon-colors] .icon-workshop-library img{aspect-ratio:600/464}
body[data-project=icon-colors] .icon-study-group>.section-heading{margin-bottom:34px;max-width:none}
body[data-project=icon-colors] .case-study .icon-study-group>.icon-study-stage{display:block!important;border:0;padding:0;min-height:0;margin:0;scroll-margin-top:90px}
body[data-project=icon-colors] .case-study .icon-study-group>.icon-study-stage+.icon-study-stage{margin-top:58px}
body[data-project=icon-colors] .icon-study-stage>.section-heading{width:100%;max-width:none;margin:0!important}
body[data-project=icon-colors] .icon-study-stage>.section-heading .eyebrow{font-size:15px;margin:0 0 10px}
body[data-project=icon-colors] .icon-study-stage>.section-heading h3{font:600 clamp(25px,2.3vw,33px)/1.2 var(--font-body);letter-spacing:-.025em;margin:0;color:var(--ink)}
body[data-project=icon-colors] .case-study .icon-study-stage>.section-body{width:100%;max-width:none;display:block;position:static;margin:18px 0 0!important;padding:0!important}
body[data-project=icon-colors] .case-study .icon-study-stage>.section-body>p{max-width:none;width:100%;margin-bottom:14px}
body[data-project=icon-colors] .case-study .icon-study-stage>.section-visuals{display:block!important;width:100%;max-width:none;margin:26px 0 0!important}
body[data-project=icon-colors] .icon-study-stage .icon-interactive-figure{border:0;padding-block:0!important}
body[data-project=icon-colors] .icon-study-stage .icon-refinement-lab{margin:0;padding:0}
body[data-project=icon-colors] .icon-study-stage .icon-gallery-heading{margin-top:28px}
body[data-project=icon-colors] .icon-parking-alternatives{background:#181a1d;padding:22px 24px 26px}
@media(max-width:760px){
 body[data-project=icon-colors] .icon-study-group>.section-heading{margin-bottom:29px}
 body[data-project=icon-colors] .case-study .icon-study-group>.icon-study-stage+.icon-study-stage{margin-top:44px}
 body[data-project=icon-colors] .icon-study-stage>.section-heading h3{font-size:27px}
 body[data-project=icon-colors] .icon-parking-example h4{gap:8px}
 body[data-project=icon-colors] .icon-parking-alternatives{padding:18px 14px 24px}
}
/* Link study observations to refinements without another full chapter. */
body[data-project=icon-colors] .icon-study-finding{margin:24px 0 0;padding:18px 24px;background:linear-gradient(100deg,#77fbfe12,#77fbfe04);border-radius:4px}
body[data-project=icon-colors] .icon-study-finding>small{display:block;color:var(--accent);margin-bottom:8px}
body[data-project=icon-colors] .icon-study-finding>p{margin:0;color:var(--ink)}
body[data-project=icon-colors] .icon-study-finding strong,body[data-project=icon-colors] .icon-refinement-reasoning strong{color:var(--accent)}
body[data-project=icon-colors] .icon-refinement-reasoning{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;margin:26px 0 0}
body[data-project=icon-colors] .icon-refinement-reasoning article{padding:20px 24px;background:#77fbfe08;border-radius:4px}
body[data-project=icon-colors] .icon-refinement-reasoning h4{margin:0 0 14px}
body[data-project=icon-colors] .icon-refinement-reasoning p{margin:0;color:var(--muted)}
body[data-project=icon-colors] .icon-refinement-reasoning .icon-refinement-decision{display:flex;align-items:baseline;gap:12px;margin-top:16px;color:var(--ink)}
body[data-project=icon-colors] .icon-refinement-decision>span:first-child{color:var(--accent)}
body[data-project=icon-colors] .icon-guidance-findings.icon-guidance-findings-single{display:block}
body[data-project=icon-colors] .icon-guidance-findings-single>article{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.5fr);gap:42px;align-items:center}
body[data-project=icon-colors] .icon-guidance-findings-single figure{order:0;height:auto;margin:0}
body[data-project=icon-colors] .icon-guidance-findings-single img{width:100%;max-width:360px;height:auto}
body[data-project=icon-colors] .icon-guidance-findings-single h3{margin-bottom:12px}
@media(max-width:700px){
 body[data-project=icon-colors] .icon-refinement-reasoning{grid-template-columns:1fr;gap:18px}
 body[data-project=icon-colors] .icon-refinement-reasoning article,body[data-project=icon-colors] .icon-study-finding{padding:18px}
 body[data-project=icon-colors] .icon-guidance-findings-single>article{grid-template-columns:1fr;gap:22px}
 body[data-project=icon-colors] .icon-guidance-findings-single figure{max-width:320px}
}
/* One explanation below both contexts; never a two-column text fragment. */
body[data-project=icon-colors] #problem>.icon-context-explanation{display:block;width:100%;max-width:none;margin:28px 0 0}
body[data-project=icon-colors] #problem>.icon-context-explanation p{width:100%;max-width:none;margin:0}
body[data-project=icon-colors] .icon-rating-results{max-width:920px;margin:20px auto 0}
body[data-project=icon-colors] .icon-rating-table{border-collapse:collapse;table-layout:fixed;width:100%;font-variant-numeric:tabular-nums}
body[data-project=icon-colors] .icon-rating-table caption{text-align:left;color:var(--muted);padding:0 0 16px}
body[data-project=icon-colors] .icon-rating-table th,body[data-project=icon-colors] .icon-rating-table td{padding:12px 14px;text-align:center;font-weight:400;vertical-align:middle}
body[data-project=icon-colors] .icon-rating-table th:first-child{width:25%;text-align:left}
body[data-project=icon-colors] .icon-rating-table thead th{padding-bottom:22px}
body[data-project=icon-colors] .icon-rating-table thead th>span:last-child{display:block;margin-top:12px}
body[data-project=icon-colors] .icon-rating-table .icon-specimen-disc{width:90px}
body[data-project=icon-colors] .icon-rating-table tbody tr{border-bottom:1px solid var(--line)}
body[data-project=icon-colors] .icon-rating-table tbody small{display:block;color:var(--muted)}
body[data-project=icon-colors] .icon-rating-table td{color:var(--accent)}
body[data-project=icon-colors] .icon-rating-source-note{display:block;color:var(--muted);margin-top:18px}
body[data-project=icon-colors] .icon-rating-source{margin-top:12px;color:var(--muted)}
body[data-project=icon-colors] .icon-rating-source summary{cursor:pointer;width:fit-content}
body[data-project=icon-colors] .icon-rating-source p{margin:12px 0 0}
body[data-project=icon-colors] .icon-rating-source a{margin-top:14px}
@layer case-typography{
 body[data-view=project][data-project=icon-colors] .case-study .icon-rating-table :is(th,td,caption){font-size:var(--case-caption)!important;line-height:1.4!important}
 body[data-view=project][data-project=icon-colors] .case-study .icon-rating-table :is(small,thead th:first-child){font-size:var(--case-label)!important;line-height:1.4!important}
 body[data-view=project][data-project=icon-colors] .case-study .icon-rating-source p{font-size:var(--case-caption)!important;line-height:1.45!important}
}
@media(max-width:700px){
 body[data-project=icon-colors] .icon-rating-table th,body[data-project=icon-colors] .icon-rating-table td{padding:10px 4px}
 body[data-project=icon-colors] .icon-rating-table th:first-child{width:29%}
 body[data-project=icon-colors] .icon-rating-table .icon-specimen-disc{width:55px}
 body[data-project=icon-colors] .icon-rating-table thead th{padding-bottom:15px}
 body[data-project=icon-colors] .icon-rating-table thead th>span:last-child{margin-top:8px}
 body[data-project=icon-colors] .icon-rating-table caption{padding-bottom:12px}
}

/* 18 Oct: shared study headers and source-grounded before/after reading rows. */
body[data-project=icon-colors] #setup {
 display:block!important;
}
body[data-project=icon-colors] #setup>.section-heading,
body[data-project=icon-colors] #setup>.section-body,
body[data-project=icon-colors] #setup>.section-body>p {
 width:100%;max-width:none!important;position:static;
}
body[data-project=icon-colors] #setup>.section-body {margin:22px 0 28px;padding:0}
body[data-project=icon-colors] #setup>.section-visuals {width:100%;max-width:none}
body[data-project=icon-colors] .icon-context-comparison :is(.icon-result-check,.icon-result-cross) {
 position:absolute;right:0;bottom:0;display:grid;place-items:center;
 width:64px;height:64px;line-height:1;margin:0;background:none;
 border-radius:0;text-shadow:none;
}
body[data-project=icon-colors] .icon-context-comparison .icon-result-check {color:#b1e0a8}
body[data-project=icon-colors] .icon-context-comparison .icon-result-cross {color:#efa79d}
body[data-project=icon-colors] .icon-study-stage>.section-heading h3 {
 display:inline-block;max-width:100%;margin:0;padding:11px 18px;
 color:#dce6e8;background:#222d31;border-radius:3px;letter-spacing:-.012em;
}
body[data-project=icon-colors] .icon-lab-instruction {
 display:block;width:100%;max-width:none;margin:0 0 22px;padding:0;
 background:none;border:0;color:var(--ink);line-height:1.5;
}
body[data-project=icon-colors] .icon-lab-instruction>span {
 display:inline;margin:0;padding:0;background:none;color:var(--accent);
}
body[data-project=icon-colors] .icon-refinement-reasoning {
 display:grid;grid-template-columns:1fr;gap:34px;margin:30px 0 0;
}
body[data-project=icon-colors] .icon-refinement-reasoning>.icon-refinement-row {
 display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
 align-items:center;gap:45px;padding:26px 0;background:none;border-radius:0;
}
body[data-project=icon-colors] .icon-refinement-before-after {
 display:flex;align-items:center;justify-content:center;gap:24px;min-width:0;
}
body[data-project=icon-colors] .icon-refinement-before-after figure {
 flex:1;min-width:0;max-width:180px;margin:0;text-align:center;
}
body[data-project=icon-colors] .icon-refinement-before-after img,
body[data-project=icon-colors] .icon-refinement-before-after .icon-specimen-disc,
body[data-project=icon-colors] .icon-refinement-before-after .icon-tested-art {
 display:block;width:104px;height:104px;max-width:100%;margin:0 auto;object-fit:contain;
}
body[data-project=icon-colors] .icon-refinement-before-after .icon-tested-art {position:relative;aspect-ratio:1}
body[data-project=icon-colors] .icon-refinement-before-after .icon-tested-art img {position:absolute;margin:0;max-width:none}
body[data-project=icon-colors] .icon-refinement-before-after figcaption {
 display:block;margin:14px 0 0;padding:0!important;border:0;text-align:center;color:var(--ink);
}
body[data-project=icon-colors] .icon-refinement-arrow {color:var(--accent);flex:none}
body[data-project=icon-colors] .icon-refinement-copy h4 {margin:0 0 15px}
body[data-project=icon-colors] .icon-refinement-copy .icon-refinement-evidence {
 margin-top:22px;color:var(--ink);
}
body[data-project=icon-colors] .icon-parking-alternatives {
 background:none;padding:0;gap:30px 26px;
}
body[data-project=icon-colors] .icon-native-alternative {
 display:block;width:88px;height:88px;margin:0 auto;position:relative;
 background:var(--variant-fill);border:3px solid var(--variant-outline);
 border-radius:50%;box-sizing:border-box;color:var(--variant-ink);
}
body[data-project=icon-colors] .icon-native-alternative>svg {
 display:block;width:100%;height:100%;color:inherit;
}
body[data-project=icon-colors] .icon-guidance-findings-single>article {align-items:start}
body[data-project=icon-colors] .icon-guidance-findings-single figure {align-self:center}
@layer case-typography {
 body[data-view=project][data-project=icon-colors] .case-study .icon-study-stage>.section-heading h3 {
  font-size:var(--case-subhead)!important;color:#dce6e8!important;
 }
 body[data-view=project][data-project=icon-colors] .case-study .icon-context-comparison :is(.icon-result-check,.icon-result-cross) {
  font-size:var(--case-title)!important;line-height:1!important;
 }
 body[data-view=project][data-project=icon-colors] .case-study .icon-lab-instruction,
 body[data-view=project][data-project=icon-colors] .case-study .icon-lab-instruction>span {
  font-size:var(--case-copy)!important;font-weight:400!important;
 }
 body[data-view=project][data-project=icon-colors] .case-study .icon-refinement-evidence {
  font-size:var(--case-note)!important;line-height:1.5!important;
 }
 body[data-view=project][data-project=icon-colors] .case-study .icon-refinement-arrow {
  font-size:var(--case-heading)!important;
 }
}
@media(max-width:800px) {
 body[data-project=icon-colors] .icon-refinement-reasoning>.icon-refinement-row {
  grid-template-columns:1fr;gap:25px;padding:14px 0;
 }
 body[data-project=icon-colors] .icon-refinement-before-after {gap:14px}
 body[data-project=icon-colors] .icon-refinement-before-after img,
 body[data-project=icon-colors] .icon-refinement-before-after .icon-specimen-disc,
 body[data-project=icon-colors] .icon-refinement-before-after .icon-tested-art {width:80px;height:80px}
 body[data-project=icon-colors] .icon-study-stage>.section-heading h3 {padding:10px 12px}
 body[data-project=icon-colors] .icon-parking-alternatives {padding:0}
}
/* The original parking alternatives sit directly on the page, without a board. */
body[data-project=icon-colors] #refinement .icon-parking-alternatives {
 background:transparent;border:0;border-radius:0;padding:0;
}
body[data-project=icon-colors] #meaning .icon-color-lab {margin-top:26px}
/* Each refinement rationale reads across the article before its visual evidence. */
body[data-project=icon-colors] .icon-refinement-reasoning>.icon-refinement-row {
 display:block;
}
body[data-project=icon-colors] .icon-refinement-copy,
body[data-project=icon-colors] .icon-refinement-copy>p {
 width:100%;max-width:none;
}
body[data-project=icon-colors] .icon-refinement-evidence-row {
 display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
 align-items:center;gap:45px;margin-top:28px;
}
body[data-project=icon-colors] .icon-refinement-evidence-row>.icon-refinement-evidence {
 margin:0;color:var(--ink);
}
@media(max-width:800px) {
 body[data-project=icon-colors] .icon-refinement-evidence-row {
  grid-template-columns:1fr;gap:24px;margin-top:24px;
 }
}

/* Air around the shared study setup; checks stay directly on the images. */
body[data-project=icon-colors] .case-study > #setup > .section-body {margin:26px 0 30px!important}
body[data-project=icon-colors] .icon-context-comparison :is(.icon-result-check,.icon-result-cross) svg {display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){body[data-project=icon-colors] .icon-context-comparison :is(.icon-result-check,.icon-result-cross){width:54px;height:54px}}

/* Stronger on-image markers and equal-size specimen comparisons. */
body[data-project=icon-colors] .icon-context-comparison .icon-result-check {color:#32986b}
body[data-project=icon-colors] .icon-context-comparison .icon-result-cross {color:#d95755}
body[data-project=icon-colors] .icon-refinement-before-after {--refinement-art-size:104px;align-items:flex-start}
body[data-project=icon-colors] .icon-refinement-before-after figure {align-self:flex-start}
body[data-project=icon-colors] .icon-refinement-before-after .icon-refinement-arrow {margin-top:calc(var(--refinement-art-size)/2 - .5em);line-height:1}
body[data-project=icon-colors] .icon-guidance-audience-art {display:flex;gap:24px;align-items:flex-start;justify-content:center}
body[data-project=icon-colors] .icon-guidance-audience-art figure {margin:0;min-width:0;text-align:center}
body[data-project=icon-colors] .icon-guidance-audience-art .icon-specimen-disc {display:block;width:88px;height:88px;max-width:none;border-radius:50%;margin:0 auto}
body[data-project=icon-colors] .icon-guidance-audience-art .icon-specimen-disc svg {display:block;width:100%;height:100%}
body[data-project=icon-colors] .icon-guidance-audience-art figcaption {margin:10px 0 0;text-align:center;font-size:var(--case-caption);color:var(--muted)}
@media(max-width:800px) {
 body[data-project=icon-colors] .icon-refinement-before-after {--refinement-art-size:80px}
 body[data-project=icon-colors] .icon-guidance-audience-art {gap:18px}
 body[data-project=icon-colors] .icon-guidance-audience-art .icon-specimen-disc {width:72px;height:72px}
}

/* Compact, aligned treatment rows: original/shadow, then two source gradients. */
body[data-project=icon-colors] .icon-refinement-evidence-row{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
body[data-project=icon-colors] .icon-refinement-before-after{--refinement-art-size:88px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:18px}
body[data-project=icon-colors] .icon-refinement-before-after figure{width:100%;max-width:none}
body[data-project=icon-colors] .icon-refinement-before-after .icon-refinement-arrow{display:none}
body[data-project=icon-colors] .icon-refinement-before-after :is(img,.icon-specimen-disc,.icon-tested-art){width:var(--refinement-art-size);height:var(--refinement-art-size)}
body[data-project=icon-colors] .icon-refinement-before-after .icon-tested-art img{max-width:none}
body[data-project=icon-colors] .icon-refinement-evidence p{margin:0}
body[data-project=icon-colors] .icon-refinement-evidence p+p{margin-top:14px}
@media(max-width:1000px){
 body[data-project=icon-colors] .icon-refinement-evidence-row{grid-template-columns:1fr;gap:24px}
 body[data-project=icon-colors] .icon-refinement-before-after{max-width:600px}
}
@media(max-width:600px){
 body[data-project=icon-colors] .icon-refinement-before-after{--refinement-art-size:64px;gap:12px}
 body[data-project=icon-colors] .icon-refinement-before-after figcaption{font-size:var(--case-label)!important;line-height:1.4!important;margin-top:10px}
}

/* Explicit comparison dismissal and three readable guideline subsections. */
body[data-project=icon-colors] .icon-compare-head>[data-icon-close] {
 border:1px solid var(--line);border-radius:4px;padding:8px 12px;
 min-height:40px;background:color-mix(in srgb,var(--accent) 8%,transparent);
}
body[data-project=icon-colors] .icon-refinement-copy h4 {
 display:inline-block;background:#263b41;color:#c5f5fa;
 padding:9px 14px;border-radius:3px;margin-bottom:14px;
}
body[data-project=icon-colors] .icon-treatment-art {
 display:block;width:88px;height:88px;max-width:100%;margin:0 auto;
 overflow:visible;background:none;border:0;border-radius:0;
}
body[data-project=icon-colors] .icon-refinement-before-after .icon-treatment-art {
 width:var(--refinement-art-size);height:var(--refinement-art-size);
}
body[data-project=icon-colors] .icon-refinement-row:nth-child(2) .icon-refinement-before-after {
 grid-template-columns:repeat(5,minmax(0,1fr));
}
body[data-project=icon-colors] .icon-refinement-evidence-row {
 grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:32px;margin-top:22px;
}
body[data-project=icon-colors] .icon-refinement-reasoning {gap:26px;margin-top:24px}
body[data-project=icon-colors] .icon-refinement-reasoning>.icon-refinement-row {padding:10px 0}
body[data-project=icon-colors] .icon-parking-alternatives {
 grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 20px;
}
body[data-project=icon-colors] .icon-parking-alternatives figure {padding-top:0}
body[data-project=icon-colors] .icon-guideline-section {margin-top:34px;padding:0;border:0}
body[data-project=icon-colors] .icon-guideline-section>h3 {margin-bottom:22px}
body[data-project=icon-colors] .icon-guideline-section>h3>span {color:var(--accent);margin-right:12px}
body[data-project=icon-colors] .icon-guideline-section .icon-priority-guidance {margin-top:0}
body[data-project=icon-colors] .icon-guideline-section :is(.icon-guidance-findings,.icon-guidance-audience) {
 border:0;margin:0;padding:0;
}
body[data-project=icon-colors] .icon-guideline-section h4 {
 font:600 var(--case-subhead)/1.3 var(--font-body);margin:0 0 12px;color:var(--ink);
}
body[data-project=icon-colors] .case-study .icon-study-group>.icon-study-stage+.icon-study-stage {margin-top:38px}
@media(max-width:1000px) {
 body[data-project=icon-colors] .icon-refinement-evidence-row {grid-template-columns:1fr;gap:20px}
 body[data-project=icon-colors] .icon-refinement-before-after {max-width:640px}
}
@media(max-width:700px) {
 body[data-project=icon-colors] .icon-parking-alternatives {grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
 body[data-project=icon-colors] .icon-parking-alternatives figcaption {font-size:var(--case-label)!important}
 body[data-project=icon-colors] .icon-guideline-section {margin-top:28px}
 body[data-project=icon-colors] .icon-guideline-section>h3 {margin-bottom:18px}
 body[data-project=icon-colors] .icon-refinement-row:nth-child(2) .icon-refinement-before-after {
  --refinement-art-size:54px;gap:8px;
 }
}
@media(max-width:420px) {
 body[data-project=icon-colors] .icon-refinement-row:nth-child(2) .icon-refinement-before-after {
  grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;
 }
}
/* Match the unmodified disc to the inset SVG discs without shifting captions. */
body[data-project=icon-colors] .icon-refinement-before-after .icon-specimen-disc {transform:scale(.865)}