@charset "UTF-8";

/* Load after atelier.css. Colour-only revision: typography, layout, source
   artwork and animation behaviour stay in the existing stylesheet. */
:root {
  --cream: #fff9f1;
  --paper: #ffffff;
  --ink: #203b5e;
  --muted: #4c6787;
  --line: #c4dff2;
  --blue: #8bcaff;
  --blue-deep: #2867a1;
  --pink: #ffb4d6;
  --pink-deep: #a53d73;
  --sky-light: #d5eeff;
  --sky-mid: #acd9ff;
  --sky-rich: #6bb8f5;
  --pink-light: #ffe4f1;
  --pink-mid: #ffc5e0;
  --pink-rich: #ff9dca;
  --pink-ink: #87335f;
  --blue-shadow: 0 22px 48px rgba(48, 124, 196, .15), 0 6px 14px rgba(48, 124, 196, .08);
  --pink-shadow: 0 22px 48px rgba(218, 89, 154, .15), 0 6px 14px rgba(218, 89, 154, .08);
  --shadow: var(--blue-shadow);
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 74vw 570px at 100% 200px, rgba(155, 213, 255, .48), transparent 75%),
    radial-gradient(ellipse 62vw 570px at 0% 920px, rgba(255, 177, 216, .34), transparent 75%),
    var(--cream);
}
::selection { background: var(--pink-mid); color: var(--ink); }
:focus-visible { outline-color: #2678c4; }
.site-header { background: rgba(255, 253, 249, .94); border-color: var(--line); }
.brand, .primary-nav a { color: var(--ink); }
.primary-nav small { color: var(--muted); }
.primary-nav a:hover, .primary-nav a:focus-visible { background: var(--pink-light); }
.header-sign img { background: linear-gradient(145deg, #fff, var(--pink-mid)); box-shadow: inset 0 1px 2px #fff, 0 4px 10px rgba(218, 89, 154, .16); }
.menu-toggle { background: var(--pink-light); box-shadow: inset 0 2px 3px #fff, 0 4px 8px rgba(218, 89, 154, .12); }

/* Bright blue/pink exhibition surfaces keep the mascot's palette visible. */
.hero h1 { text-shadow: 0 4px 0 #fff, 0 15px 30px rgba(70, 136, 201, .1); }
.hero-prelude, .hero-prelude > span:last-child, .hero-byline,
.hero-byline > span:last-child, .hero-after, .section-rule,
.section-title p, .feature-caption small, .more-list small, .more-note,
.site-footer, .case-topline, .case-intro, .case-caption,
.case-story-item p, .case-section-label > p, .case-outro p { color: var(--muted); }
.hero-prelude em { color: var(--pink-deep); }
.hero-byline, .hero-after, .section-rule, .feature-caption,
.case-topline, .case-info, .case-assets, .case-outro { border-color: var(--line); }
.hero-prelude > span:first-child::before, .section-rule > span:first-child::before {
  background: radial-gradient(circle at 30% 26%, #fff 0 8%, #ffc9e3 27%, #f178b3 80%);
  box-shadow: 1px 2px 4px rgba(219, 93, 155, .25);
}
.hero-collage {
  border-color: #acd5f4;
  background:
    radial-gradient(ellipse at 75% 18%, rgba(255,255,255,.9), transparent 34%),
    radial-gradient(ellipse at 28% 36%, #a8d9ff, transparent 60%),
    linear-gradient(145deg, #d4edff, #c4e4ff 40%, #ffd5e9 72%, #ffb7d8);
  box-shadow: inset 0 3px 7px #fff, inset 0 -12px 30px rgba(219, 93, 155, .09), 0 26px 55px rgba(69, 137, 204, .16);
}
.hero-collage::before { background: radial-gradient(ellipse at 37% 34%, #fff, #a6d6ff 54%, #ffa8d0 100%); opacity: .75; }
.hero-collage::after { background: rgba(80, 151, 218, .16); }
.collage-sheet { border-color: #bcd8ed; background: var(--paper); box-shadow: var(--blue-shadow), inset 0 2px 2px #fff; }
.collage-sheet:hover, .collage-sheet:focus-visible { box-shadow: 0 30px 44px rgba(48, 124, 196, .2), 0 8px 14px rgba(48, 124, 196, .1), inset 0 2px 2px #fff; }
.sheet-top, .sheet-bottom { color: var(--muted); }
.sheet-image { border-color: #96c9ef; background: linear-gradient(140deg, #e7f6ff, #b7e0ff 57%, #8bcaff); box-shadow: inset 0 3px 7px #fff, inset 0 -14px 25px rgba(45, 130, 204, .11); }
.collage-left .sheet-image { border-color: #f4aad0; background: linear-gradient(140deg, #fff0f7, #ffcde4 57%, #ffabd1); }
.collage-right .sheet-image { border-color: #a5ceef; background: linear-gradient(140deg, #e8f7ff, #c7e7ff 57%, #a5d7ff); }
.sheet-image::before { background: rgba(255,255,255,.52); box-shadow: inset 2px 3px 5px #fff, 8px 13px 22px rgba(54, 133, 204, .12); }
.sheet-image::after { background: radial-gradient(circle at 30% 27%, #fff 0 5%, #ffcce4 30%, #f882b8 85%); box-shadow: 6px 9px 13px rgba(218, 89, 154, .16); opacity: .8; }
.sheet-image .sheet-small, .sheet-image > span:last-child { color: #3e5d7b; }
.hero-ip::before { background: linear-gradient(#ffe4f1, #ffaed2); box-shadow: inset 0 3px 5px #fff, 0 10px 11px rgba(214, 96, 157, .18); }
.hero-ip::after { background: radial-gradient(circle at 27% 24%, #fff, #c7e9ff 42%, #6bb8f5 88%); box-shadow: 4px 6px 10px rgba(48, 124, 196, .17); }
.hero-ip figcaption { background: #fff5fa; color: var(--pink-ink); box-shadow: 0 5px 13px rgba(218, 89, 154, .13); }

/* The tint belongs to image slots and UI surfaces, never to supplied images. */
.feature-art { border-color: #acd5f4; background: radial-gradient(circle at 30% 18%, #fff, transparent 35%), linear-gradient(150deg, #daf1ff, #a7d8ff 61%, #78c1ff); box-shadow: inset 0 3px 5px #fff, inset 0 -18px 32px rgba(45,130,204,.1), var(--blue-shadow); }
.feature-two .feature-art { border-color: #f0b0d0; background: radial-gradient(circle at 67% 15%, #fff, transparent 35%), linear-gradient(150deg, #ffe7f2, #ffc3df 61%, #ffa1cd); box-shadow: inset 0 3px 5px #fff, inset 0 -18px 32px rgba(218,89,154,.09), var(--pink-shadow); }
.feature-item:hover .feature-art, .feature-item:focus-visible .feature-art { box-shadow: inset 0 3px 5px #fff, inset 0 -18px 32px rgba(45,130,204,.1), 0 30px 52px rgba(48,124,196,.2); }
.feature-two:hover .feature-art, .feature-two:focus-visible .feature-art { box-shadow: inset 0 3px 5px #fff, inset 0 -18px 32px rgba(218,89,154,.09), 0 30px 52px rgba(218,89,154,.2); }
.feature-art::before { background: rgba(255,255,255,.47); box-shadow: inset 2px 3px 6px #fff, 10px 16px 21px rgba(48,124,196,.12); }
.feature-art::after { background: radial-gradient(circle at 29% 26%, #fff, #ffd1e6 33%, #f884b9 88%); box-shadow: 5px 9px 16px rgba(218,89,154,.2); }
.feature-two .feature-art::after { background: radial-gradient(circle at 29% 26%, #fff, #cceaff 36%, #72bdf5 88%); box-shadow: 5px 9px 16px rgba(48,124,196,.2); }
.feature-art > span, .feature-art em { color: #294f72; }
.feature-art-note { background: rgba(255,255,255,.88); color: #2e5a83; box-shadow: 0 8px 18px rgba(48,124,196,.12); }
.feature-two .feature-art-note { color: var(--pink-ink); }

.about-section { background: radial-gradient(circle at 87% 20%, #ffedf6, transparent 35%), linear-gradient(145deg, #d8f0ff, #afdfff 66%, #d8edff); }
.about-section::before { background: rgba(255,255,255,.35); box-shadow: inset 0 5px 15px rgba(255,255,255,.8), 0 20px 35px rgba(48,124,196,.13); }
.about-section .section-rule { color: #385a78; border-color: #8abfe8; }
.about-side h2 em { color: var(--blue-deep); }
.about-side img { background: radial-gradient(circle at 32% 28%, #fff6fb, #ffc6e1 64%, #ffacd1); box-shadow: inset 0 4px 7px #fff, var(--pink-shadow); }
.about-copy > p:not(.about-statement) { color: #385a78; }
.about-copy .draft-disclaimer { color: #385a78 !important; }
.about-keywords { border-color: #8abfe8; }
.about-keywords span { background: rgba(255,255,255,.8); color: #315a7a; box-shadow: 0 4px 7px rgba(48,124,196,.09); }

.more-list a { border-color: var(--line); background: var(--paper); box-shadow: 0 11px 19px rgba(48,124,196,.08), inset 0 1px 2px #fff; }
.more-list a:hover, .more-list a:focus-visible { background: linear-gradient(110deg, #fff, #ffe5f2 70%, #d8f0ff); box-shadow: 0 23px 32px rgba(48,124,196,.13); }
.more-list span { background: linear-gradient(145deg, #fff7fb, #ffb6d7); color: var(--pink-ink); box-shadow: inset 0 2px 4px #fff, 0 6px 9px rgba(218,89,154,.13); }
.more-list em { color: var(--pink-deep); }

.contact-section { background: radial-gradient(circle at 9% 7%, #fff8fc, transparent 31%), linear-gradient(145deg, #ffe4f1, #ffbadb 71%, #d9efff); }
.contact-section::before { background: rgba(255,255,255,.32); box-shadow: inset 0 4px 14px rgba(255,255,255,.75); }
.contact-section .section-rule { color: #6e3c5b; border-color: #e595bc; }
.contact-section h2 span { color: #9e386f; }
.contact-intro { color: #6e3c5b; }
.contact-list > div { background: rgba(255,255,255,.81); border-color: #fff7fc; box-shadow: inset 0 2px 3px #fff, var(--pink-shadow); }
.contact-list span, .contact-list small { color: var(--pink-ink); }
.contact-list em { color: #74506a; border-color: #edbbd4; }
.site-footer a { border-color: #d584ad; }

.eyebrow, .case-section-label > span, .case-story-item > span,
.case-outro > div > span { color: var(--pink-deep); }
.eyebrow-line { background: #e67bb0; }
.hero-punctuation { color: var(--pink-deep); }
.case-number { color: #ffaed2; text-shadow: 0 5px 0 #fff; }
.case-cover { border-color: #9cccf0; background: radial-gradient(circle at 22% 14%, #fff, transparent 35%), linear-gradient(145deg, #d7efff, #a7d8ff 54%, #ffcae3); box-shadow: inset 0 3px 6px #fff, inset 0 -21px 38px rgba(48,124,196,.09), var(--blue-shadow); color: var(--ink); }
.case-cover::before { background: rgba(255,255,255,.47); box-shadow: inset 0 3px 6px #fff, 15px 21px 32px rgba(48,124,196,.14); }
.case-cover::after { background: radial-gradient(circle at 30% 25%, #fff, #ffd0e7 37%, #f884b9 88%); box-shadow: 9px 13px 19px rgba(218,89,154,.2); }
.case-cover > span, .case-cover > em { background: rgba(255,255,255,.88); color: #3e5d7b; }
.case-cover > strong { background: rgba(255,255,255,.88); color: var(--ink); }
.case-info-grid > div, .case-story-item { border-color: var(--line); background: var(--paper); box-shadow: 0 9px 18px rgba(48,124,196,.08); }
.case-info-grid span { color: var(--muted); }
.case-asset-slot { border-color: #a5d1f3; background: linear-gradient(145deg, #e7f6ff, #b9e1ff); box-shadow: inset 0 2px 4px #fff, var(--blue-shadow); color: #325b7b; }
.case-asset-slot:nth-child(2) { border-color: #f2b5d4; background: linear-gradient(145deg, #fff0f7, #ffbfdd); box-shadow: inset 0 2px 4px #fff, var(--pink-shadow); color: var(--pink-ink); }
.case-asset-slot:nth-child(3) { border-color: #a5d1f3; background: linear-gradient(145deg, #ebf8ff, #c3e7ff); color: #325b7b; }
.case-outro > a { border-color: var(--line); background: var(--paper); color: var(--muted); box-shadow: 0 10px 19px rgba(48,124,196,.09); }
.case-outro > a:hover { box-shadow: 0 20px 29px rgba(48,124,196,.15); }

@media (max-width: 700px) {
  .primary-nav { background: rgba(255,253,249,.98); box-shadow: 0 15px 22px rgba(48,124,196,.09); }
}