/* A workshop within the gallery: ink, paper, colour, and time. */
:root { color-scheme: light; --paper: #eee9db; --ink: #29372e; --muted: #536052; --line: #64705a55; --gold: #d9bf87; --serif: 'Iowan Old Style', Baskerville, 'Palatino Linotype', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .3em; text-decoration-thickness: 1px; }
a, button, summary { touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
:focus-visible { outline: 2px solid #a27b36; outline-offset: 5px; }
.skip { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .8rem 1rem; background: var(--paper); transform: translateY(-180%); }
.skip:focus { transform: none; }
.work-header { position: sticky; z-index: 20; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 76px; padding: .6rem clamp(1.1rem, 4vw, 4rem); color: #eee9db; background: #242d27f5; border-bottom: 1px solid #79836b66; font: .73rem/1.5 var(--sans); backdrop-filter: blur(14px); }
.work-header a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.work-brand { flex-direction: column; align-items: flex-start !important; justify-content: center; letter-spacing: .12em; }
.work-brand span { margin-top: .2rem; color: #c9cdbb; font: .8rem/1.3 var(--serif); letter-spacing: 0; }
.work-header nav { display: flex; gap: 2rem; }
.work-header nav a { gap: .65rem; }
.work-header nav a:hover { text-decoration: underline; }
.work-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2.5rem, 5vw, 6rem); min-height: min(820px, calc(100svh - 76px)); padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 7vw, 8rem); overflow: hidden; color: #f3eddc; background: #27372e; }
.hero-atmosphere { position: absolute; z-index: -2; inset: 0; }
.hero-atmosphere img { height: 100%; object-fit: cover; opacity: .28; filter: blur(16px) saturate(.4); transform: scale(1.1); }
.work-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #243229f5 4%, #243229b5 48%, #24322940), linear-gradient(0deg, #27372e, transparent 70%); }
.eyebrow { margin: 0 0 1.2rem; font: .67rem/1.7 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { font-weight: 400; }
h1 { margin: 0 0 1.8rem; font-size: clamp(3.5rem, 6.3vw, 6.8rem); line-height: 1.04; letter-spacing: -.045em; }
h1 em { color: #e1c88f; }
.hero-copy .hero-intro { max-width: 34ch; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.65; }
.hero-copy > p:not(.eyebrow, .hero-intro) { max-width: 42ch; color: #ccd2bf; font-size: 1.03rem; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; max-width: 100%; padding: .6rem 0; font: .76rem/1.6 var(--sans); }
.hero-copy .text-link { color: #e1c88f; margin-top: .7rem; }
.hero-art { align-self: center; min-width: 0; }
.hero-art > a { display: block; padding: 8px; background: #dfd3b8; border: 1px solid #eee7d0; box-shadow: 0 30px 60px -28px #080f0be6; }
.hero-art img { object-fit: contain; }
figcaption { margin-top: 1.3rem; }
figcaption cite { display: block; font-size: 1.2rem; font-style: normal; line-height: 1.5; }
figcaption span { display: block; margin-top: .3rem; font: .68rem/1.7 var(--sans); }
figcaption a { display: inline-flex; align-items: center; min-height: 44px; font: .69rem/1.6 var(--sans); }
.hero-art figcaption { color: #d3d8c7; }
.chapter-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.6rem clamp(1.5rem, 7vw, 8rem); gap: 1rem; border-bottom: 1px solid var(--line); }
.chapter-path a { display: flex; flex-direction: column; justify-content: center; min-height: 74px; padding: .6rem 1rem .6rem 0; text-decoration: none; font-size: 1rem; line-height: 1.45; }
.chapter-path a + a { padding-left: 1.3rem; border-left: 1px solid var(--line); }
.chapter-path span { margin-bottom: .45rem; color: #67725d; font: .63rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.chapter-path a:hover { text-decoration: underline; }
.chapter { padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 7vw, 8rem); scroll-margin-top: 0; }
.chapter-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: 1rem 5rem; }
.chapter-heading .eyebrow { grid-column: 1 / -1; }
h2 { margin: 0; font-size: clamp(2.8rem, 4.6vw, 4.6rem); letter-spacing: -.04em; line-height: 1.08; }
h2 em { color: #69764e; }
.chapter-heading > p:last-child { max-width: 44ch; margin: 0; color: var(--muted); font-size: 1.13rem; line-height: 1.75; }
.hands-trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 0; margin: 4rem 0 1.2rem; list-style: none; }
.hands-trail li { border-top: 1px solid #758264; padding-top: 1.2rem; }
.trail-mark { display: block; color: #8f9c7f; font: 1.9rem/1.4 var(--serif); }
.hands-trail h3 { margin: 1rem 0 .7rem; font-size: 1.45rem; }
.hands-trail p { max-width: 27ch; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; color: var(--muted); font: .69rem/1.7 var(--sans); }
.source-line a, .source-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: .35rem 0; font: .71rem/1.7 var(--sans); }
.world-note { max-width: 880px; margin: 3rem 0 1.1rem; padding: 2rem clamp(1.2rem, 3vw, 3rem); border-left: 2px solid #526f72; background: #e1e3d9; }
.world-note h3 { margin: 0 0 .8rem; font-size: 2rem; }
.world-note > p:not(.eyebrow, .small-note) { max-width: 65ch; font-size: 1.05rem; line-height: 1.75; }
.small-note { color: var(--muted); font: .75rem/1.75 var(--sans); }
.seurat-chapter, .jar-chapter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.seurat-chapter { background: #26392c; color: #f1ebd9; --muted: #c2cbb7; }
.seurat-chapter h2 em { color: #d7c590; }
.story-art { min-width: 0; }
.story-art > a { display: block; padding: .55rem; background: #171e17; border: 1px solid #859078; }
.story-art img { width: 100%; max-height: 610px; object-fit: contain; }
.story-art figcaption { color: var(--muted); }
.story-copy > p:not(.eyebrow, .small-note, .looking-question) { color: var(--muted); font-size: 1.04rem; line-height: 1.85; }
.story-copy h2 { margin-bottom: 1.8rem; }
.story-copy h3 { font-size: 1.6rem; line-height: 1.4; margin: 1.5rem 0 .7rem; }
.looking-question { margin: 1.7rem 0 .5rem; font: italic 1.24rem/1.65 var(--serif); }
.colour-chapter { background: #e7ddca; }
.colour-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 3rem 0 0; }
.colour-controls button { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .3rem .7rem; min-width: 0; min-height: 78px; padding: 1rem 1.25rem; text-align: left; color: var(--ink); background: transparent; border: 1px solid #7c816a; font: .9rem/1.4 var(--sans); }
.colour-controls button[aria-pressed="true"] { color: #eee9db; background: #29372e; border-color: #29372e; box-shadow: inset 0 -3px #e4ca91; }
.colour-controls button:hover { outline: 1px solid #586447; }
.colour-controls small { grid-column: 2; font-size: .68rem; line-height: 1.6; }
.swatch { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ffffff88; box-shadow: inset 0 0 5px #0003; }
.swatch.blue { background: #38499c; }.swatch.red { background: #a73858; }.swatch.mauve { background: #9c649f; }
.colour-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 2rem 0; }
.colour-field { --pigment: #344888; position: sticky; top: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1; min-height: 300px; background: radial-gradient(ellipse at center, #f4ead180, #d1c3a799); overflow: hidden; border: 1px solid #b4ae954a; }
.pigment-orbit { position: relative; display: grid; place-items: center; width: 69%; aspect-ratio: 1; border: 1px solid #786d4940; border-radius: 50%; }
.pigment-orbit::before, .pigment-orbit::after { content: ''; position: absolute; inset: 10%; border: 1px solid #786d4930; border-radius: 50%; }
.pigment-orbit::after { inset: -10%; }
.pigment-orbit span { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #ffffff28, transparent 60%), var(--pigment); box-shadow: inset -10px -15px 30px #171c2425, 0 18px 45px #30292820; }
.colour-field p { position: absolute; bottom: 1rem; padding: 0 1rem; color: #605e4d; font: .59rem/1.6 var(--sans); text-align: center; text-transform: uppercase; letter-spacing: .12em; }
[data-colour="cochineal"] .colour-field { --pigment: #a73858; }
[data-colour="mauveine"] .colour-field { --pigment: #9c649f; }
.colour-story { scroll-margin-top: 95px; }
.colour-story + .colour-story { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem; }
.colour-story[hidden] + .colour-story, .colour-stories:has([hidden]) .colour-story { border: 0; padding-top: 0; margin-top: 0; }
.colour-story h3 { margin: 0 0 1.5rem; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1.1; letter-spacing: -.03em; }
.colour-story > p:not(.eyebrow, .looking-question) { color: #4e584a; font-size: 1.07rem; line-height: 1.85; }
.colour-note { max-width: 85ch; margin-top: 2rem; }
.jar-chapter { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); background: #f1ebdd; }
.jar-art > a { background: #dfd7c7; padding: 1.5rem; border-color: #b5ad95; }
.jar-art img { max-height: 600px; }
.care-chapter { color: #ede9db; background: #202e27; --muted: #bec8b5; --line: #82917366; }
.care-chapter h2 em { color: #d5bd87; }
.care-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; margin-top: 3.5rem; }
.care-intro h3 { font-size: 1.9rem; line-height: 1.3; margin: 1.6rem 0 1rem; }
.care-intro > p:not(.looking-question) { max-width: 43ch; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.care-orbit { display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #d5bd8799; border-radius: 50%; }
.care-orbit span { width: 5px; height: 5px; background: #d5bd87; border-radius: 50%; }
.care-step { border-top: 1px solid var(--line); }
.care-step:last-child { border-bottom: 1px solid var(--line); }
.care-step summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: .5rem; min-height: 80px; padding: 1rem 0; cursor: pointer; font-size: 1.25rem; line-height: 1.4; list-style: none; }
.care-step summary::-webkit-details-marker { display: none; }
.care-step summary span { color: #d5bd87; font: .67rem/1.5 var(--sans); }
.care-step summary b { font-weight: 400; }
.care-step[open] summary b { transform: rotate(45deg); }
.care-step > div { padding: 0 0 1.5rem 2.5rem; }
.care-step p { margin: 0 0 .8rem; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.care-step a { color: #ddc897; }
.work-closing { padding: clamp(4rem, 9vw, 9rem) 1.5rem; text-align: center; background: #dedfce; }
.work-closing p:not(.eyebrow) { margin: 2rem auto 1.3rem; color: #526048; font-size: 1.15rem; line-height: 1.8; }
.work-closing > div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 2rem; }
.button { display: inline-flex; align-items: center; min-height: 48px; padding: .8rem 1.4rem; color: #ece8d9; background: #293b2c; text-decoration: none; font: .76rem/1.6 var(--sans); }
.work-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 2rem clamp(1.5rem, 7vw, 8rem); font: .7rem/1.75 var(--sans); }
.work-footer p:nth-child(2) { max-width: 69ch; color: var(--muted); }
.work-footer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1000px) {
  .work-hero { gap: 2rem; padding-inline: 2rem; }
  .chapter { padding-inline: 2rem; }
  .chapter-heading { gap: 1rem 2rem; }
  .hands-trail { gap: 1.5rem; }
  .seurat-chapter, .jar-chapter { gap: 2.5rem; }
}
@media (max-width: 760px) {
  .work-hero, .chapter-heading, .seurat-chapter, .jar-chapter, .care-layout { grid-template-columns: minmax(0, 1fr); }
  .work-hero { padding: 3.5rem 1.5rem; }
  .hero-copy { max-width: 520px; }
  .hero-art { max-width: 620px; }
  .chapter-path { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 1.5rem; gap: .5rem 1.5rem; }
  .chapter-path a + a { padding-left: 0; border-left: 0; }
  .chapter-path a { border-top: 1px solid var(--line); font-size: .95rem; }
  .chapter { padding-inline: 1.5rem; }
  .chapter-heading { gap: 1.3rem; }
  .chapter-heading .eyebrow { margin-bottom: 0; }
  .hands-trail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.5rem; }
  .seurat-chapter .story-art { order: 2; }
  .colour-stage { grid-template-columns: minmax(0, 1fr); }
  .colour-field { position: static; min-height: 0; height: 240px; aspect-ratio: auto; }
  .pigment-orbit { width: 170px; }
  .colour-field p { bottom: .25rem; }
  .colour-controls button { padding: .65rem; grid-template-columns: 1fr; gap: .45rem; font-size: .76rem; }
  .colour-controls small { grid-column: 1; font-size: .59rem; }
  .swatch { grid-row: auto; width: 23px; height: 23px; }
  .care-layout { margin-top: 2.5rem; }
}
@media (max-width: 480px) {
  .work-header { padding-inline: 1rem; font-size: .64rem; }
  .work-header nav { gap: .5rem; }
  .work-header nav a:last-child { display: none; }
  .work-brand span { font-size: .7rem; }
  .work-header nav a { max-width: 15ch; }
  h1 { font-size: clamp(3.1rem, 12vw, 4rem); }
  h2 { font-size: 2.8rem; }
  .hero-copy .hero-intro { font-size: 1.2rem; }
  .hero-art > a { padding: 5px; }
  .hands-trail { gap: 1rem; }
  .hands-trail h3 { font-size: 1.25rem; }
  .hands-trail p { font-size: .87rem; }
  .colour-controls { gap: .4rem; }
  .colour-controls button { padding: .65rem .45rem; font-size: .65rem; }
  .colour-controls small { font-size: .57rem; }
  .colour-story h3 { font-size: 2.65rem; }
  .care-step summary { font-size: 1.07rem; }
  .care-step > div { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .hero-atmosphere, .colour-field { display: none; } .colour-stage { grid-template-columns: 1fr; } .colour-controls button[aria-pressed="true"] { outline: 3px solid Highlight; } }
@media print { .work-header, .chapter-path, .hero-atmosphere, .colour-controls, .colour-field { display: none !important; } .colour-story[hidden] { display: block !important; } .chapter, .work-hero { display: block; color: black; background: white; padding: 1rem 0; } .chapter * { color: black !important; } .story-art img, .hero-art img { max-height: 35vh; object-fit: contain; } }