/* Color-led edition. Original typefaces, copy, photographs and routes retained. */
:root{--bg:#f6f3ee;--ink:#302c30;--ink-2:#665f63;--ink-3:#72696b;--shade:#e9e4dd;--picked:#b58a6b;--side:clamp(248px,23vw,332px);--gap:clamp(18px,2vw,30px);--pad:clamp(22px,3vw,48px);--line:#ddd5cc}
body{background:var(--bg)}
.side{padding:var(--pad);border-right:1px solid var(--line);overflow-y:auto;gap:0;animation:none;opacity:1}
.mark{font-size:clamp(1.5rem,2.05vw,2rem);line-height:1.18;margin:0 0 38px;animation:none;letter-spacing:.06em}
.nav{gap:5px;width:100%}
.nav button{font-size:.92rem;min-height:40px;padding:8px 12px;width:100%;border-radius:3px;text-align:left;color:var(--ink-2)}
.nav button::after{display:none}
.nav button:hover{background:#ebe5dd;color:var(--ink)}
.nav button[aria-current="true"]{background:#403840;color:#fff8ee}
.nav--sub{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);flex-direction:row;gap:6px}
.nav--sub button{width:auto;padding-inline:12px;font-size:.82rem}
.nav--sub button[aria-current="page"]{background:#403840;color:#fff8ee}
.main{padding:var(--pad) var(--pad) 70px;margin-left:var(--side)}
.gallery-heading{font-family:var(--serif);font-size:clamp(2.5rem,4.5vw,4.5rem);line-height:1.1;letter-spacing:-.035em;font-weight:400;margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.wall{column-gap:var(--gap)}
.wall.masonry-ready{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1px;column-gap:var(--gap);row-gap:0;align-items:start}
.wall.masonry-ready .cell{margin:0;padding-bottom:var(--gap)}
.cell{margin-bottom:var(--gap);opacity:1;transform:none}
.cell.in{transition:opacity .3s ease}
.cell button{border-radius:2px;background:var(--shade)}
.cell img{filter:none;transition:transform .65s ease}
.cell button:hover img{transform:scale(1.018)}
.image-palette{display:flex;align-items:center;gap:0;margin-top:9px;width:100%;height:18px;opacity:1}
.cell:hover .image-palette,.cell:focus-within .image-palette{opacity:1}
.image-palette button{background:var(--swatch);height:18px;min-width:24px;flex:1;border-radius:0;position:relative;overflow:visible}
.image-palette button::before{content:"";position:absolute;inset:-6px 0}
.image-palette button:hover,.image-palette button:focus-visible{z-index:1;outline:2px solid var(--ink);outline-offset:2px}
.color-tool{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.color-field{position:relative;width:100%;aspect-ratio:1.45;border-radius:5px;overflow:hidden;touch-action:none;cursor:crosshair;border:1px solid #0000000d}
.color-field canvas{display:block;width:100%;height:100%;opacity:.85}
.color-cursor{position:absolute;width:19px;height:19px;border:2px solid white;box-shadow:0 0 0 1px #302c3099,0 2px 8px #0003;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.color-tool:not(.is-active) .color-cursor{opacity:.5}
.color-sliders{display:flex;gap:12px;margin-top:9px}
.color-sliders input{width:50%;min-width:0;height:24px;margin:0;accent-color:#403840;cursor:pointer}
.color-entry{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:8px 0 10px}
.color-entry input[type=color]{appearance:none;width:32px;height:32px;border:0;background:transparent;padding:0;cursor:pointer;flex-shrink:0}
.color-entry input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.color-entry input[type=color]::-webkit-color-swatch{border:1px solid #302c3033;border-radius:50%}
.color-entry input[type=color]::-moz-color-swatch{border:1px solid #302c3033;border-radius:50%}
.color-entry input[type=text]{font:400 .8rem var(--sans);letter-spacing:.1em;width:100%;min-width:0;background:none;border:0;color:var(--ink);height:38px}
.color-entry input[aria-invalid=true]{outline:2px solid #a43535}
.color-entry button{width:40px;height:40px;flex-shrink:0;text-align:center;border:1px solid var(--line);border-radius:50%;font-size:22px}
.color-entry button:hover{background:var(--ink);color:var(--bg)}
.color-presets{display:flex;gap:4px;justify-content:space-between;margin-top:12px}
.color-presets button{width:28px;height:36px;min-width:0;flex:1;position:relative;border-radius:3px;background:transparent}
.color-presets button::before{content:"";position:absolute;inset:8px 3px;background:var(--swatch);border-radius:50%;border:1px solid #302c301a}
.color-presets button[aria-pressed=true]{outline:1px solid var(--ink);outline-offset:1px}
.foot{padding:24px var(--pad) 36px;margin-left:var(--side);border-top:1px solid var(--line);font-size:.7rem;line-height:1.8}
.page{max-width:70ch;padding-block:20px}
.page h2{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.035em;line-height:1.15}
.page dl{padding-top:24px;border-top:1px solid var(--line);gap:16px 24px}
.page dd{overflow-wrap:anywhere}
.lb{background:var(--bg)}
.lb__arrow{width:12%;opacity:.75}
.lb__arrow span{background:var(--bg);border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.lb__b button{min-height:44px}
:focus-visible{outline:2px solid #725172;outline-offset:4px}
@media(min-width:1600px){.wall{columns:3}.wall.masonry-ready{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:759px){.wall.masonry-ready{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1023px){
 .side{position:relative;width:auto;border-right:0;border-bottom:1px solid var(--line);padding:24px var(--pad);display:grid;grid-template-columns:1fr auto;gap:18px 26px;overflow:visible}
 .mark{margin:0;font-size:1.7rem;grid-column:1;grid-row:1}
 .mark a,.mark span{display:inline}
 .nav{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:4px;width:auto;align-self:center}
 .nav button{width:auto;min-height:40px}
 .nav--sub{grid-column:2;grid-row:1;margin:0;padding:0;border:0;align-self:center}
 .color-tool{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:180px 1fr;gap:0 24px;padding-top:18px;margin:0}
 .color-field{grid-column:1;grid-row:1/4;aspect-ratio:1.8}
 .color-sliders{grid-column:2;grid-row:1;margin:0}
 .color-entry{grid-column:2;grid-row:2;padding:0;border:0}
 .color-presets{grid-column:2;grid-row:3;margin:0;max-width:360px}
 .main{margin:0;padding:28px var(--pad) 60px}
 .gallery-heading{font-size:2.5rem;margin-bottom:24px;padding-bottom:18px}
 .foot{margin-left:0}
}
@media(max-width:599px){
 :root{--pad:20px;--gap:22px}
 .side{gap:12px;padding-block:22px 18px}
 .mark{font-size:1.2rem;line-height:1.3}
 .mark span{display:block}
 .nav{grid-column:1/-1;justify-content:space-between;gap:2px}
 .nav button{font-size:.76rem;padding:9px 8px}
 .nav--sub{grid-column:2;gap:2px;justify-content:flex-end}
 .nav--sub button{font-size:.76rem}
 .color-tool{grid-template-columns:116px 1fr;gap:0 14px;padding-top:14px}
 .color-field{aspect-ratio:1.05}
 .color-entry{gap:4px}
 .color-entry input[type=text]{font-size:.72rem}
 .color-entry button{width:32px;height:32px;font-size:20px}
 .color-presets{gap:1px}
 .color-presets button::before{inset:10px 2px}
 .gallery-heading{font-size:2.2rem}
 .page{padding-top:0}.page dl{grid-template-columns:1fr;gap:5px}.page dd{margin-bottom:15px}
}
@media(prefers-reduced-motion:reduce){.wall.swap{opacity:1}.cell.in,.cell img,.image-palette,.page.on{transition:none;animation:none}.cell button:hover img{transform:none}}
/* Simple controls; details stay optional and every grid track can shrink. */
.side,.main,.color-tool,.color-custom,.nav{min-width:0}
.color-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.color-header h2{font:500 .88rem var(--sans);margin:0}
.color-header button{font-size:.75rem;text-decoration:underline;text-underline-offset:3px;padding:10px 0 10px 10px;min-height:40px}
.color-help{font-size:.76rem;line-height:1.5;color:var(--ink-2);margin:2px 0 14px}
.color-field{aspect-ratio:1.65}
.color-presets{gap:2px;max-width:none}
.color-presets button{height:36px}
.color-presets button::before{width:20px;height:20px;inset:8px auto auto 50%;transform:translateX(-50%)}
.color-custom{border-top:1px solid var(--line);margin-top:12px;padding-top:4px}
.color-custom summary{cursor:pointer;font-size:.76rem;color:var(--ink-2);padding:10px 0;min-height:40px}
.color-sliders label{width:50%;font-size:.7rem;color:var(--ink-2);min-width:0}
.color-sliders input{display:block;width:100%}
.nav--sub{flex-wrap:wrap}
.nav--sub a{font-size:.82rem;min-height:40px;padding:8px 12px;text-decoration:none;display:flex;align-items:center;color:var(--ink-2)}
.nav--sub a:hover{background:#ebe5dd;color:var(--ink)}
.wall{overflow-anchor:none}
@media(max-width:1023px){
 .side{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px var(--pad)}
 .mark{grid-column:1;grid-row:1}
 .nav{grid-column:1;grid-row:2;justify-content:flex-start}
 .nav--sub{grid-column:1;grid-row:3;justify-content:flex-start}
 .color-tool{grid-column:1;grid-row:4;display:block;width:100%;padding-top:16px}
 .color-field{width:100%;height:110px;aspect-ratio:auto}
 .color-sliders{display:flex;margin-top:6px}
 .color-entry{display:flex;padding:4px 0}
 .color-presets{display:flex;margin-top:8px}
 .color-presets button{flex:0 1 44px}
 .color-custom{margin-top:8px}
}
@media(max-width:599px){
 :root{--pad:20px}
 .mark{font-size:1.32rem}.mark span{display:inline}
 .nav:not(.nav--sub){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:4px}
 .nav:not(.nav--sub) button{width:100%;text-align:center;font-size:.84rem;padding:10px 6px;min-height:44px}
 .nav--sub{display:flex;gap:4px;margin:0;padding:0}
 .nav--sub button,.nav--sub a{font-size:.8rem;padding:8px 10px}
 .color-field{height:100px}
 .gallery-heading{font-size:2rem;margin-bottom:20px}
 .color-help{margin-bottom:10px}
 .main{padding-top:22px}
}
/* Compact color strip: one direct control, no expandable settings. */
.color-tool{margin-top:24px;padding-top:18px}
.color-header{margin-bottom:4px}
.color-header h2{font-size:.82rem}
.color-header button{font-size:.72rem;color:var(--ink-2);text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:20px;min-height:36px}
.color-header button:hover{background:var(--shade);color:var(--ink)}
.color-help{font-size:.72rem;margin:0 0 12px}
.color-field{height:64px;aspect-ratio:auto;border-radius:8px;overflow:visible}
.color-field canvas{border-radius:8px}
.color-cursor{width:16px;height:16px}
.color-tool:not(.is-active) .color-cursor{opacity:0}
.color-presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;margin-top:8px}
.color-presets button{width:100%;height:36px;border-radius:50%;outline:none}
.color-presets button::before{width:16px;height:16px;top:10px}
.color-presets button[aria-pressed=true]::before{outline:1px solid var(--ink);outline-offset:4px}
.color-presets button:focus-visible{outline:2px solid var(--ink);outline-offset:0}
@media(max-width:1023px){.color-tool{margin-top:0}.color-field{height:56px}.color-presets{max-width:320px}}
/* Color lens: concentric optical dial with an uninterrupted hue ring. */
.color-field{width:min(100%,240px);height:auto;aspect-ratio:1;margin:14px auto 4px;border:0;border-radius:50%;cursor:grab;background:repeating-conic-gradient(from 0deg,#40384022 0deg 1deg,transparent 1deg 10deg);box-shadow:inset 0 0 0 1px var(--line)}
.color-field:active{cursor:grabbing}
.color-field canvas{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;opacity:1;background:var(--bg);clip-path:circle(48.5%)}
.color-lens-center{position:absolute;z-index:2;inset:22%;border-radius:50%;background:var(--shade);box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--line),inset 0 0 20px #00000008;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.color-lens-center::after{content:"";position:absolute;inset:8%;border:1px solid #ffffff55;border-radius:50%}
.is-active .color-lens-center{background:var(--picked)}
.color-lens-label{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--ink-2)}
.is-active .color-lens-label{opacity:0}
.color-cursor{z-index:3;width:18px;height:18px;background:var(--picked);border:3px solid var(--bg);box-shadow:0 0 0 1px #40384099,0 2px 6px #0003}
.color-tool:not(.is-active) .color-cursor{opacity:1;background:#b58a6b}
.color-help{max-width:25ch;line-height:1.5}
@media(max-width:1023px){.color-field{width:180px;height:auto;aspect-ratio:1;margin:10px auto}.color-help{max-width:none}.color-tool{max-width:420px}.color-lens-label{font-size:1rem}}
.color-header{align-items:center;margin-bottom:12px}
.color-header h2{font:400 1.35rem var(--serif);letter-spacing:-.02em;line-height:1.2}
.color-header button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);flex-shrink:0}
.color-header button:hover{background:var(--shade);color:var(--ink)}
.color-field{margin-top:0;background:none;box-shadow:none}
.color-lens-center{box-shadow:0 0 0 4px var(--bg);background:var(--bg)}
.color-lens-center::after{display:none}
@media(max-width:599px){
 .nav--sub{width:100%;justify-content:center}
 .color-tool{display:grid;grid-template-columns:minmax(0,1fr) clamp(112px,30vw,140px);align-items:center;gap:18px;width:100%;max-width:none;padding-top:16px}
 .color-header{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;margin:0;min-width:0}
 .color-header h2{font-size:1.25rem;max-width:12ch}
 .color-header button{width:44px;height:44px;min-height:44px;margin-left:-10px}
 .color-field{grid-column:2;grid-row:1;width:100%;height:auto;aspect-ratio:1;margin:0;justify-self:end}
 .color-cursor{width:15px;height:15px;border-width:2px}
}
@media print{.color-tool,.image-palette,.gallery-heading{display:none!important}.side{border:0}.main,.foot{margin-left:0}.wall{columns:1}}