/* Revision 18: shared layout tracks keep brand, exhibit, copy and navigation separate. */
:root{--gold:#c6ab78;--muted:#c6baa5}[hidden]{display:none!important}
header{left:4%;right:4%;top:max(4px,env(safe-area-inset-top))}header button{font-size:12px;min-height:32px}
footer{left:4%;right:4%;bottom:max(6px,env(safe-area-inset-bottom));height:36px}#back{font-size:12px;min-height:36px}
.page,.page.words{inset:0;max-width:none;padding:42px 9% 52px 5%;background:none;text-shadow:none;isolation:isolate;display:grid;grid-template-columns:minmax(0,36fr) minmax(0,50fr);grid-template-rows:auto minmax(0,1fr);column-gap:9%;row-gap:16px;transition:opacity 1.4s ease;align-content:stretch}
.page::before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/collection-wall.png') left center/cover no-repeat}
.page::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#050403c0,transparent 25%),linear-gradient(90deg,#08060435,transparent 40%,#08060435)}
.page-brand{position:relative;inset:auto;grid-column:2;grid-row:1;justify-self:center;align-self:center;width:min(94%,420px,45vh);max-width:none;min-height:0;padding:0;z-index:4;filter:drop-shadow(0 2px 3px #000)}
.page-brand::before{content:'';position:absolute;inset:-10% -8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#0b0806b8,transparent 72%)}
.logo-crop{display:block;position:relative;width:100%;aspect-ratio:881/271;overflow:hidden;transform:scaleX(1.035)}
.logo-crop img{position:absolute;width:132.803%;max-width:none;left:-18.73%;top:-4.797%;height:auto}
.logo-crop .logo-tagline{clip-path:inset(76% 0 0);filter:brightness(2.25);pointer-events:none}
.page .page-copy,.page .collection-copy{position:relative;inset:auto;grid-column:2;grid-row:2;min-width:0;min-height:0;max-width:none;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.7vh,18px);text-align:left;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 2px 4px;pointer-events:auto;text-shadow:0 2px 8px #0008}
.page .page-copy>*{flex-shrink:0}
.page .page-copy .eyebrow,.collection-copy .eyebrow{position:static;display:block;font-size:10px;letter-spacing:.18em;margin:0;line-height:1.4}
.page .page-copy h1,.collection-copy h1{position:static;display:block;font:normal clamp(24px,2.7vw,40px)/1.12 Georgia;max-width:none;margin:0}
.page .page-copy p:not(.eyebrow),.collection-copy .collection-intro{position:static;display:block;font-size:clamp(13px,1.15vw,17px);line-height:1.5;margin:0;color:#e2d5c0}
.page .page-copy .text-link{font-size:14px;min-height:36px;margin:0;padding:0;text-align:left;line-height:1.4}
.page .exhibit{position:relative;inset:auto;grid-column:1;grid-row:1 / 3;width:100%;height:auto;min-height:0;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:center;align-self:stretch;overflow:auto;scrollbar-width:thin}
#mosaic{left:calc(var(--focus-w)*.035);top:calc(var(--focus-y) + var(--focus-h)*.148);width:calc(var(--focus-w)*.165);height:calc(var(--focus-h)*.457);padding:0;border:0;gap:0;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);background:transparent;box-shadow:none;transform:none;transition:opacity 1.1s}
#mosaic img{display:none}#mosaic button{min-height:0;padding:0;background:transparent}#mosaic button:hover{outline:1px solid #e8d1a9;outline-offset:-1px;background:#d1b68310}body[data-photo=open] #mosaic{pointer-events:none}
#photo{left:3%;top:16%;width:37%;height:66%;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform-origin:0 0;transition:none}
#hero{width:100%;height:calc(100% - 32px);max-height:none;object-fit:contain;border:0;background:#0c0906;filter:drop-shadow(0 15px 25px #000a)}#caption{height:24px;flex-shrink:0;margin:8px 0 0;font-size:11px;line-height:1.4;letter-spacing:.04em;text-align:center;color:#dac8a9}
#filters,.photo-controls{position:static;inset:auto;display:flex;justify-content:flex-start;align-items:center;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;padding:0;background:none}
#filters button,.photo-controls button,.photo-controls span{font-size:clamp(12px,1.05vw,15px);min-height:36px;white-space:nowrap;padding:0}
.photo-controls span{display:flex;align-items:center}.sample{display:none}#grid{display:none;opacity:1;pointer-events:auto;max-width:none}body[data-photo=open] #grid{display:inline-block}
#tabs,#storyChapters,#paletteChoices{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-start;border-bottom:1px solid #b59a6750}
#tabs button,#storyChapters button,#paletteChoices button{font-size:clamp(12px,1vw,15px);min-height:36px;padding:0;color:#c6b495}
#tabs button[aria-pressed=true],#storyChapters button[aria-pressed=true],#paletteChoices button[aria-pressed=true]{color:#f5e5c6;border-bottom:1px solid var(--gold)}
#serviceSteps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:8px;color:#d5c4a6;font-size:13px;line-height:1.4}#serviceSteps li{counter-increment:step;display:flex;gap:12px}#serviceSteps li::before{content:'0' counter(step);color:#b99b65;font-size:10px;padding-top:2px}
.palette-exhibit .eyebrow{font-size:10px;margin:0 0 12px}.palette-exhibit>*{flex-shrink:0}#paletteDisplay{box-shadow:0 18px 55px #000b;border:1px solid #b59a6750}#heroSwatch{height:clamp(65px,24vh,260px);display:flex;align-items:flex-end;padding:16px;font:clamp(24px,2.6vw,38px) Georgia;color:#f6f0e1;text-shadow:0 2px 5px #0005;transition:background-color 1.4s}#paletteStrip{height:7vh;display:flex}#paletteStrip span{flex:1}#paletteChoices{margin-top:10px;gap:12px}.page .study-note,.page.words .study-note{font-size:11px;line-height:1.4;margin:12px 0 0;color:#c6baa5}
#story .portrait-exhibit{align-self:center;height:100%;max-height:620px;overflow:hidden;background:#0c0906;box-shadow:0 18px 50px #000b,0 0 0 1px #bfa16a55}
#story .portrait-exhibit img{display:block;width:100%;height:calc(100% - 46px);min-height:0;object-fit:contain;object-position:center;filter:none}
#story .portrait-exhibit figcaption{flex-shrink:0;height:46px;padding:10px 12px;font-size:11px;background:linear-gradient(90deg,#1a130b,#090705);text-align:left;letter-spacing:.14em}
#story .portrait-exhibit figcaption span{display:block;font-size:9px;letter-spacing:.03em;margin-top:4px}
#story .page-copy>p:not(.eyebrow):not(#storyText){display:none}
.project-exhibit h2{font:normal clamp(26px,3vw,43px)/1.16 Georgia;margin:12px 0 20px}.page.words .project-exhibit p{font-size:15px;line-height:1.5;margin:0}.project-exhibit .contact{display:flex;flex-direction:column;gap:10px;margin-top:20px;font-size:13px;align-items:flex-start}.contact a{overflow-wrap:anywhere;line-height:1.4}
#formProgress{float:right;font-size:10px}#enquiry{min-width:0}fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:8px}legend{font:normal clamp(23px,2.4vw,34px)/1.15 Georgia;margin:0 0 14px;padding:0}label{font-size:12px;line-height:1.4}select,input,textarea{width:100%;min-width:0;min-height:40px;border:1px solid #a48b5b70;background:#0c0906b8;color:#ede1ca;padding:8px 10px;font:16px Arial;border-radius:0;margin:0}textarea{height:66px;resize:vertical}.form-actions{display:flex;gap:20px;justify-content:space-between;margin-top:14px}.form-actions button{font-size:14px;min-height:36px;color:#e1c794}#enquirySummary{white-space:pre-line;overflow-wrap:anywhere;line-height:1.5!important}
.page.active select{pointer-events:auto}body:not([data-page=home]) #brand{pointer-events:none}
@media(orientation:portrait){
 .page,.page.words{padding:44px 7% 54px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;row-gap:16px;column-gap:0}
 .page::before{background:linear-gradient(#100b0840,#100b0820),url('assets/collection-wall.png') 66% center/auto 100% no-repeat}
 .page .page-brand{grid-column:1;grid-row:1;width:min(92%,480px,61vh);justify-self:center}
 .page .exhibit{grid-column:1;grid-row:2;width:100%;min-height:0}
 .page .page-copy{grid-column:1;grid-row:3;justify-content:flex-start;gap:10px;padding:0;max-height:46vh}
 .page .page-copy h1,.collection-copy h1{font-size:clamp(23px,6vw,31px)}
 .page .page-copy p:not(.eyebrow){font-size:13px;line-height:1.45}
 .page .page-copy .eyebrow{font-size:9px}
 .page .page-copy .text-link{font-size:13px;min-height:32px}
 #collection{grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:12px}
 #collection .collection-copy{display:contents}
 .collection-copy .eyebrow{display:none}.collection-copy h1{grid-column:1;grid-row:2;text-align:center}
 .collection-copy .collection-intro{display:none}
 #mosaic{position:relative;inset:auto;grid-column:1;grid-row:3;align-self:stretch;justify-self:center;height:100%;width:auto;max-width:100%;aspect-ratio:310/490;transform:none;background:url('assets/collection-wall.png') 4.28% 27.4%/619.26% 218.84% no-repeat;box-shadow:0 18px 45px #000c;opacity:1}
 body[data-photo=open] #mosaic{opacity:.25!important}
 #photo{position:relative;inset:auto;grid-column:1;grid-row:3;align-self:stretch;width:100%;height:100%;min-height:0}
 #hero{height:calc(100% - 28px)}#caption{font-size:10px;height:24px;margin:4px 0 0}
 #filters{grid-column:1;grid-row:4;justify-content:center;gap:8px 14px;flex-wrap:wrap}
 .photo-controls{grid-column:1;grid-row:5;justify-content:center;gap:12px}
 #filters button,.photo-controls button,.photo-controls span{font-size:12px;min-height:32px}
 #grid{font-size:11px}
 .palette-exhibit .eyebrow{display:none}#heroSwatch{height:clamp(60px,11vh,130px);padding:12px;font-size:25px}#paletteStrip{height:4vh}#paletteChoices{margin-top:8px;gap:12px}#paletteChoices button{font-size:11px;min-height:32px}.page.words .study-note{font-size:10px;margin-top:7px}
 #tabs,#storyChapters{gap:14px}#tabs button,#storyChapters button{font-size:12px;min-height:32px}#serviceSteps{font-size:12px;gap:6px}
 #story .portrait-exhibit{height:100%;max-height:none;width:100%;justify-self:center}#story .portrait-exhibit img{height:calc(100% - 38px);object-fit:contain}#story .portrait-exhibit figcaption{height:38px;padding:9px 12px;font-size:10px}#story .portrait-exhibit figcaption span{display:inline;float:right;margin:0;font-size:8px}#story .page-copy .eyebrow{display:none}#story .page-copy h1 br{display:none}
 #project{grid-template-rows:auto auto minmax(0,1fr)}#project .project-exhibit{grid-row:2;overflow:visible;display:block}.project-exhibit .eyebrow,.project-exhibit h2,.project-exhibit p{display:none}.project-exhibit .contact{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:11px}
 #project .page-copy{grid-row:3;max-height:none;justify-content:center;gap:12px}legend{font-size:26px;margin-bottom:12px}fieldset{gap:8px}.form-actions{margin-top:12px}
}
@media(orientation:landscape) and (max-height:600px){
 .page,.page.words{padding:34px 10% 42px 5%;row-gap:10px;column-gap:9%;grid-template-rows:auto minmax(0,1fr)}
 .page .page-brand{width:min(90%,65vh)}
 .page .page-copy,.page .collection-copy{justify-content:flex-start;gap:6px}
 .page .page-copy h1,.collection-copy h1{font-size:clamp(21px,3.5vh,27px)}
 .page .page-copy p:not(.eyebrow),.collection-copy .collection-intro{font-size:12px;line-height:1.4}
 .page .page-copy .eyebrow,.collection-copy .eyebrow{font-size:9px}
 .page .page-copy .text-link{min-height:30px;font-size:12px}
 #tabs button,#storyChapters button,#filters button,.photo-controls button,.photo-controls span{font-size:11px;min-height:30px}
 #serviceSteps{font-size:11px;gap:4px}#heroSwatch{height:24vh;font-size:25px;padding:12px}#paletteStrip{height:7vh}#paletteChoices{gap:10px;margin-top:6px}#paletteChoices button{font-size:10px;min-height:28px}.page.words .study-note{font-size:10px;margin-top:8px}.palette-exhibit .eyebrow{font-size:9px;margin-bottom:8px}
 .project-exhibit h2{font-size:27px;margin:8px 0 12px}.page.words .project-exhibit p{font-size:12px}.project-exhibit .contact{font-size:11px;gap:8px;margin-top:12px}
 legend{font-size:23px;margin-bottom:8px}fieldset{gap:5px}label{font-size:11px}select,input,textarea{min-height:32px;padding:5px 8px;font-size:16px}textarea{height:42px}.form-actions{margin-top:7px}.form-actions button{min-height:30px;font-size:12px}
 #enquiry [data-step="1"]{grid-template-columns:minmax(90px,1fr) minmax(0,2fr);gap:6px 10px}#enquiry [data-step="1"] label{grid-column:1;align-self:center}#enquiry [data-step="1"] input,#enquiry [data-step="1"] select,#enquiry [data-step="1"] textarea{grid-column:2}
}
@media(orientation:portrait) and (max-height:720px){
 .page,.page.words{row-gap:10px;padding-top:38px;padding-bottom:46px}.page .page-brand{width:min(78%,48vh)}.page .page-copy{gap:7px;max-height:49vh}.page .page-copy h1,.collection-copy h1{font-size:23px}.page .page-copy p:not(.eyebrow){font-size:12px}#serviceSteps{font-size:11px;gap:4px}#tabs button,#storyChapters button{font-size:11px;min-height:28px}#heroSwatch{height:8vh;min-height:46px;font-size:22px}#paletteChoices button{font-size:10px;min-height:28px}#project .page-copy{max-height:none}legend{font-size:23px}select,input,textarea{min-height:36px}textarea{height:54px}
}
@media(orientation:landscape){#project .project-exhibit{padding:16px;background:radial-gradient(ellipse at 40% 50%,#080604e6 15%,#080604b0 55%,transparent 90%);text-shadow:0 2px 6px #000}}
/* Revision 19: portrait as part of the room; a material and lighting atelier. */
#story::before,#expertise::before,#project::before{background-image:url('assets/room-blank-alcove.png')}
#story .portrait-exhibit{background:radial-gradient(ellipse at 50% 35%,#bc8c451c,transparent 68%);box-shadow:none;overflow:visible}
#story .portrait-exhibit img{mask-image:url('assets/hadi-alpha-mask.png');-webkit-mask-image:url('assets/hadi-alpha-mask.png');mask-size:contain;-webkit-mask-size:contain;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;object-fit:contain;filter:none}
#story .portrait-exhibit figcaption{background:linear-gradient(90deg,transparent,#0a0806a0 25%,#0a0806a0 75%,transparent);border-top:1px solid #c6ab7840;text-shadow:0 2px 5px #000}
#expertise{--study-light:#e5ac62;--study-glow:#e5ac6250;--study-opacity:.55}
#expertise[data-lighting=neutral]{--study-light:#fff5de;--study-glow:#fff5de28;--study-opacity:.12}
#expertise[data-lighting=cool]{--study-light:#a8c9ec;--study-glow:#a8c9ec45;--study-opacity:.55}
#paletteDisplay{position:relative;isolation:isolate;overflow:hidden;border:1px solid #bfa77c75;box-shadow:0 18px 40px #000b,0 0 35px var(--study-glow);transition:box-shadow 1s ease;background:#15120d}
#paletteDisplay::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 0,var(--study-light),transparent 85%);mix-blend-mode:soft-light;opacity:var(--study-opacity);transition:background 1s,opacity 1s}
#heroSwatch{background-image:linear-gradient(120deg,#ffffff15,transparent 45%,#0003),url('../assets/charcoal-stone.png');background-size:auto,cover;background-blend-mode:soft-light;box-shadow:inset 0 1px 0 #fff2,inset 0 -10px 18px #0002;padding-top:30px}
#paletteStrip{gap:3px;padding:0 8px 8px;height:9vh}#paletteStrip span{box-shadow:inset 0 2px 3px #fff3,2px 3px 5px #0008;background-image:linear-gradient(115deg,#fff2,transparent 50%,#0003)}
.study-spots{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-around;z-index:3;pointer-events:none;height:18px;background:linear-gradient(#090705,transparent)}
.study-spots i{width:18px;height:6px;background:#b6a381;border:1px solid #e1cfaa60;border-radius:0 0 6px 6px;box-shadow:0 8px 18px 5px var(--study-glow);transition:box-shadow 1s}
#lightModes{display:flex;gap:10px;margin-top:12px}#lightModes button{flex:1;min-height:34px;font-size:12px;letter-spacing:.04em;border:1px solid #bda06a55;background:#08060455;transition:background .8s,border-color .8s}#lightModes button[aria-pressed=true]{border-color:#d5b878;background:#aa824620;color:#f2dfb9;box-shadow:inset 0 -1px #d5b878}
#lightingNote{font-size:11px;color:#e0cfaf;margin:8px 0 0;line-height:1.4;min-height:1.4em}
#paletteChoices{border:0}#paletteChoices button{font-size:11px}
#camera{container-type:inline-size}.entry span{position:absolute;left:0;right:0;bottom:0;display:block;padding:8px 0;color:#f1ddae;font:normal 1.15cqw Georgia;letter-spacing:.06em;text-align:center;text-shadow:0 0 10px #e0bc6870,0 2px 4px #000;background:linear-gradient(90deg,transparent,#080604ba 20%,#080604ba 80%,transparent);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
body[data-phase=ready][data-page=home] .entry span{opacity:1}body[data-phase=ready][data-page=home] .entry[data-seen=true] span{color:#c9ba9c}
@media(orientation:portrait){
 #story::before,#expertise::before,#project::before{background-image:linear-gradient(#100b0840,#100b0820),url('assets/room-blank-alcove.png')}
 #paletteStrip{height:4.5vh;padding-bottom:5px}#lightModes{margin-top:8px;gap:8px}#lightModes button{font-size:11px;min-height:30px}#lightingNote{font-size:10px;margin-top:5px}#paletteChoices{margin-top:5px}#paletteChoices button{min-height:28px}
 #heroSwatch{font-size:23px}.entry span{font-size:2.8cqw;padding:10px 0}
}
@media(orientation:landscape) and (max-height:600px){#heroSwatch{height:20vh;min-height:65px}#paletteStrip{height:6vh}#lightModes{margin-top:8px}#lightModes button{min-height:28px;font-size:11px}#paletteChoices button{min-height:26px;font-size:10px}#lightingNote{font-size:10px;margin-top:5px}.palette-exhibit .eyebrow{margin-bottom:7px}}
/* Brighten the existing engraved names in exact registration, without duplicate lettering. */
.entry span{display:none}#labelLight{filter:brightness(2.6);opacity:0;mask-image:radial-gradient(ellipse 7% 2% at 8% 61%,#000 55%,transparent),radial-gradient(ellipse 6% 2% at 75% 64%,#000 55%,transparent),radial-gradient(ellipse 6% 2% at 93% 61%,#000 55%,transparent),radial-gradient(ellipse 9% 2.5% at 87% 85%,#000 55%,transparent);-webkit-mask-image:radial-gradient(ellipse 7% 2% at 8% 61%,#000 55%,transparent),radial-gradient(ellipse 6% 2% at 75% 64%,#000 55%,transparent),radial-gradient(ellipse 6% 2% at 93% 61%,#000 55%,transparent),radial-gradient(ellipse 9% 2.5% at 87% 85%,#000 55%,transparent)}
body[data-phase=ready][data-page=home] #labelLight{opacity:1}
@media(orientation:portrait){#labelLight{mask-image:radial-gradient(ellipse 17% 1.8% at 22% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 80% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 22% 73.5%,#000 55%,transparent),radial-gradient(ellipse 25% 2% at 72% 79%,#000 55%,transparent);-webkit-mask-image:radial-gradient(ellipse 17% 1.8% at 22% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 80% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 22% 73.5%,#000 55%,transparent),radial-gradient(ellipse 25% 2% at 72% 79%,#000 55%,transparent)}}
@media(orientation:landscape) and (max-height:600px){#expertise .page-copy{gap:4px}}

#story .portrait-exhibit .portrait-person{display:block;width:100%;height:calc(100% - 46px);min-height:0;flex-shrink:1;overflow:visible}
@media(orientation:portrait){#story .portrait-exhibit .portrait-person{height:calc(100% - 38px)}}
@media(orientation:landscape) and (max-height:600px){#expertise .page-copy{padding:0;gap:3px}}
/* Revision 20: all engraved names, soft photographic integration, compact landscape study. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#labelLight{filter:brightness(3.2);mask-image:radial-gradient(ellipse 6% 1.7% at 9% 60.2%,#000 55%,transparent),radial-gradient(ellipse 5% 1.7% at 73.7% 58.2%,#000 55%,transparent),radial-gradient(ellipse 5% 1.7% at 93.7% 56.8%,#000 55%,transparent),radial-gradient(ellipse 7% 2% at 87.3% 76.6%,#000 55%,transparent);-webkit-mask-image:radial-gradient(ellipse 6% 1.7% at 9% 60.2%,#000 55%,transparent),radial-gradient(ellipse 5% 1.7% at 73.7% 58.2%,#000 55%,transparent),radial-gradient(ellipse 5% 1.7% at 93.7% 56.8%,#000 55%,transparent),radial-gradient(ellipse 7% 2% at 87.3% 76.6%,#000 55%,transparent)}
.page .eyebrow,.collection-copy .eyebrow{color:#efd6a5;text-shadow:0 0 12px #c3983935,0 2px 5px #000}
#story .portrait-exhibit{position:relative;background:none;isolation:isolate;justify-content:flex-end}
#story .portrait-exhibit::before{content:'';position:absolute;inset:12% 8% 14% 10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#0008,transparent 70%);filter:blur(14px);transform:translate(16px,8px);pointer-events:none}
#story .portrait-exhibit .portrait-person{height:calc(100% - 48px);filter:drop-shadow(10px 4px 9px #0006);transform:translateY(12px);position:relative;z-index:1}
#story .portrait-exhibit figcaption{position:relative;z-index:2;border:0;background:none;height:48px;padding:4px 12px 8px;letter-spacing:.14em;color:#f0dfba;text-shadow:0 2px 6px #000}
@media(orientation:portrait){
 #labelLight{mask-image:radial-gradient(ellipse 17% 1.8% at 22% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 80% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 22% 73.5%,#000 55%,transparent),radial-gradient(ellipse 25% 2% at 72% 79%,#000 55%,transparent);-webkit-mask-image:radial-gradient(ellipse 17% 1.8% at 22% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 80% 52.5%,#000 55%,transparent),radial-gradient(ellipse 17% 1.8% at 22% 73.5%,#000 55%,transparent),radial-gradient(ellipse 25% 2% at 72% 79%,#000 55%,transparent)}
 #story .portrait-exhibit .portrait-person{height:calc(100% - 38px);transform:translateY(8px)}
 #story .portrait-exhibit figcaption{height:38px;padding:1px 8px 7px}
}
@media(orientation:landscape) and (max-height:600px){
 #expertise .palette-exhibit{display:grid;grid-template-rows:auto minmax(55px,1fr) auto auto auto auto;align-content:stretch;gap:6px;overflow:visible;justify-content:stretch}
 .palette-exhibit .eyebrow{margin:0}
 #paletteDisplay{min-height:0;display:grid;grid-template-rows:minmax(32px,1fr) 24px}
 #heroSwatch{min-height:0;height:auto;padding:12px;font-size:23px}
 #paletteStrip{height:auto;min-height:0;padding:0 7px 6px}
 #lightModes,#lightingNote,#paletteChoices,.page.words .palette-exhibit .study-note{margin:0}
 #lightingNote{min-height:0;line-height:1.35;font-size:10px}
 #lightModes button{min-height:28px;font-size:11px}#paletteChoices button{min-height:26px;font-size:10px}
 .page.words .palette-exhibit .study-note{font-size:10px;line-height:1.35;overflow:visible}
 #expertise .page-copy{justify-content:flex-start;overflow:auto;padding:0;gap:4px}
}
@media(orientation:landscape) and (max-height:360px){
 .page,.page.words{padding-top:30px;padding-bottom:40px;row-gap:7px}
 .page .page-brand{width:min(85%,62vh)}
 #expertise .page-copy h1{font-size:21px}
 #expertise .page-copy .eyebrow{font-size:8px}
 #expertise .page-copy p:not(.eyebrow){font-size:11px;line-height:1.3}
 #expertise .page-copy{gap:3px}
 #tabs button{font-size:10px;min-height:26px}
 #serviceSteps{font-size:10px;line-height:1.25;gap:2px}
 #expertise .page-copy .text-link{font-size:11px;min-height:26px}
 #expertise .palette-exhibit{gap:4px}
 #heroSwatch{font-size:21px;padding:8px}#lightModes button{min-height:26px}#paletteChoices button{min-height:24px}
}
/* The original photographic surroundings dissolve into the stone behind the unchanged subject. */
#story .portrait-exhibit::after{content:'';position:absolute;inset:0 0 48px;z-index:0;pointer-events:none;background:url('assets/hadi-original.jpeg') center/contain no-repeat;transform:translateY(12px);opacity:.62;mask-image:radial-gradient(ellipse 48% 48% at 52% 43%,#000 15%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 48% 48% at 52% 43%,#000 15%,transparent 100%)}
@media(orientation:portrait){#story .portrait-exhibit::after{bottom:38px;transform:translateY(8px)}}
#story .portrait-exhibit::after{display:none}
#story .portrait-exhibit .portrait-person{height:100%;transform:none}
#story .portrait-exhibit figcaption{position:absolute;left:0;right:0;bottom:0;height:38px;padding:4px 12px;pointer-events:none}
@media(orientation:portrait){#story .portrait-exhibit .portrait-person{height:100%;transform:none}#story .portrait-exhibit figcaption{height:32px;padding:3px 8px}}
/* Revision 21: intact evening photograph, composed as an adjoining room. */
#story .portrait-exhibit{isolation:isolate;overflow:visible;background:none;box-shadow:none;max-height:none}
#story .portrait-exhibit::before,#story .portrait-exhibit::after{display:none}
#story .portrait-exhibit .portrait-scene{position:absolute;inset:-3% -10% 0 -6%;z-index:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 73%,transparent 100%),linear-gradient(to right,transparent 0%,#000 11%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 73%,transparent 100%),linear-gradient(to right,transparent 0%,#000 11%,#000 90%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
#story .portrait-exhibit .portrait-scene img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;mask:none;-webkit-mask:none;filter:none;transform:none;box-shadow:none;border:0}
#story .portrait-exhibit figcaption{z-index:2;left:4%;right:0;bottom:0;color:#f1dfba;height:38px;padding:5px 0;background:none;border:0;text-shadow:0 2px 7px #000}
#story .portrait-exhibit figcaption span{color:#cfbea1}
@media(orientation:portrait){
 #story .portrait-exhibit .portrait-scene{inset:-4% -12% -1% -5%}
 #story .portrait-exhibit figcaption{left:0;right:0;bottom:0;height:28px;padding:4px 0}
 #story .portrait-exhibit figcaption span{float:right;font-size:8px}
}
@media(orientation:landscape) and (max-height:600px){
 #story .portrait-exhibit .portrait-scene{inset:-4% -12% -1% -8%}
 #story .portrait-exhibit figcaption{left:1%;height:32px;font-size:10px}
}
/* Feather the photograph's own bounds so contain-letterboxing cannot expose a hard edge. */
#story .portrait-exhibit .portrait-scene{display:flex;align-items:center;justify-content:center;mask:none;-webkit-mask:none}
#story .portrait-exhibit .portrait-scene img{position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;flex-shrink:1;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 73%,transparent 100%),linear-gradient(to right,transparent 0%,#000 13%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 73%,transparent 100%),linear-gradient(to right,transparent 0%,#000 13%,#000 88%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}

/* Revision 22: original portrait RGB, with the room source aligned to its existing key light. */
#story .portrait-exhibit{isolation:isolate}
#story .portrait-exhibit::before{display:block;content:'';position:absolute;inset:-5% -7% 0 -8%;z-index:-1;transform:none;border-radius:0;filter:none;background:radial-gradient(ellipse 42% 64% at 82% 16%,#e7ad5c45,transparent 85%),linear-gradient(100deg,#0806049c,transparent 75%);pointer-events:none}
#story .portrait-exhibit::after{display:block;content:'';position:absolute;inset:16% 15% 12% 3%;z-index:0;transform:translate(-10px,12px);opacity:.7;mask:none;-webkit-mask:none;background:radial-gradient(ellipse at 46% 52%,#0009,transparent 68%);filter:blur(13px);pointer-events:none}
#story .portrait-exhibit .portrait-scene{inset:3% 0 24px 0;display:flex;align-items:flex-end;justify-content:flex-end;z-index:1;overflow:visible;mask:none;-webkit-mask:none}
#story .portrait-exhibit .portrait-spotlight{display:block;height:100%;width:auto;max-width:94%;overflow:visible;filter:drop-shadow(-9px 7px 9px #0005);flex-shrink:1}
#story .portrait-exhibit figcaption{z-index:2;left:3%;right:1%;height:28px;bottom:0}
@media(orientation:portrait){
 #story .portrait-exhibit .portrait-scene{inset:3% -4% 26px 8%;justify-content:flex-end}
 #story .portrait-exhibit .portrait-spotlight{max-width:94%;height:100%}
 #story .portrait-exhibit::before{inset:-3% -10% 0 -8%;background:radial-gradient(ellipse 40% 60% at 85% 15%,#e7ad5c4d,transparent 85%),linear-gradient(100deg,#0806048c,transparent 80%)}
 #story .portrait-exhibit figcaption{left:0;right:0;height:26px}
}
/* Feathered wall illumination has no rectangular bounds. The old alcove pool is subdued. */
#story::after{background:radial-gradient(ellipse 18% 48% at 7% 9%,#080604d9,transparent 100%),linear-gradient(0deg,#050403c0,transparent 25%),linear-gradient(90deg,#08060435,transparent 40%,#08060435)}
#story .portrait-exhibit::before{background:radial-gradient(ellipse 38% 58% at 82% 16%,#e7ad5c45,transparent 100%)}
@media(orientation:portrait){#story .portrait-exhibit::before{background:radial-gradient(ellipse 37% 57% at 85% 15%,#e7ad5c4d,transparent 100%)}}

/* Revision 23: left composition in a shadowed room, with a restrained right key. */
#story::before{filter:brightness(.28)}
#story::after{background:linear-gradient(90deg,#03030255,transparent 48%,#03030220),linear-gradient(0deg,#030302b3,transparent 40%)}
#story .portrait-exhibit::before{inset:-5% -7% 0 -8%;background:radial-gradient(ellipse 24% 38% at 67% 19%,#c59a4b1f,transparent 100%);opacity:.7}
#story .portrait-exhibit::after{inset:10% 18% 6% -9%;background:radial-gradient(ellipse at 36% 48%,#000c,transparent 70%);transform:translate(-12px,10px);opacity:.9;filter:blur(16px)}
#story .portrait-exhibit .portrait-scene{inset:3% 12% 24px -5%;justify-content:flex-start}
#story .portrait-exhibit .portrait-spotlight{max-width:100%;filter:drop-shadow(-12px 7px 12px #0009)}
@media(orientation:portrait){
 #story .portrait-exhibit .portrait-scene{inset:3% 12% 26px -5%;justify-content:flex-start}
 #story .portrait-exhibit::before{inset:-3% -8% 0 -8%;background:radial-gradient(ellipse 23% 36% at 68% 19%,#c59a4b1f,transparent 100%)}
}

/* Revision 24: quieter portrait highlights and dimmer-driven page illumination. */
#story .portrait-exhibit .portrait-spotlight{filter:brightness(.72) saturate(.9) drop-shadow(-12px 7px 12px #0009)}
.page,.page.words{filter:brightness(.12);transition:opacity 1.8s ease-in-out,filter 2.2s ease-in-out}
.page.active{filter:brightness(1)}
.page .page-brand{opacity:.2;transition:opacity 1.4s ease-in-out}
.page.active .page-brand{opacity:1}
.page .exhibit{opacity:.1;transition:opacity 1.8s ease-in-out}
.page.active .exhibit{opacity:1}
.page::before{transition:filter 2s ease-in-out}
#paletteStrip span{transition:background-color 1.2s ease,box-shadow 1.2s ease}
@media(prefers-reduced-motion:reduce){.page,.page.words,.page .page-brand,.page .exhibit{transition-duration:.01ms!important}}

button{transition:color .8s ease,background-color .8s ease,border-color .8s ease}

/* Revision 25: visible lamp ramps for the room, portrait and every page. */
.surface{transition:opacity 3600ms cubic-bezier(.45,0,.55,1)}
.light{filter:brightness(.08);will-change:opacity,filter}
#film{transition:opacity 1600ms ease-in-out}
body[data-phase=reveal] #film.visible{animation:film-lamp-up 4200ms cubic-bezier(.45,0,.55,1) both}
@keyframes film-lamp-up{from{filter:brightness(.12)}to{filter:brightness(1)}}
.page,.page.words{opacity:0;filter:brightness(.14);transform:scale(.99);transform-origin:center;transition:opacity 1200ms ease-in-out,filter 3800ms cubic-bezier(.45,0,.55,1),transform 3400ms cubic-bezier(.45,0,.55,1)}
.page.active{opacity:1;filter:brightness(1);transform:scale(1)}
.page.active.departing{opacity:.32;filter:brightness(.22);transform:scale(.985);transition:opacity 2600ms cubic-bezier(.45,0,.55,1),filter 2600ms cubic-bezier(.45,0,.55,1),transform 3000ms ease-in-out}
.page .page-brand{filter:brightness(.15);opacity:1;transition:filter 3400ms cubic-bezier(.45,0,.55,1)}
.page.active .page-brand{filter:brightness(1)}
.page .exhibit,.page .page-copy{filter:brightness(.16);opacity:1;transition:filter 3400ms cubic-bezier(.45,0,.55,1) 250ms}
.page.active .exhibit,.page.active .page-copy{filter:brightness(1)}
.page.departing .page-brand,.page.departing .exhibit,.page.departing .page-copy{filter:brightness(.5);transition:filter 2400ms ease-in-out}
@media(prefers-reduced-motion:reduce){.surface,.light,.page,.page.words,.page .page-brand,.page .exhibit,.page .page-copy{transition-duration:.01ms!important;transition-delay:0ms!important}#film{animation:none!important}}

/* Reduced motion removes spatial travel, while retaining non-flashing light fades. */
@media(prefers-reduced-motion:reduce){
 .surface,.light,.page,.page.words,.page .page-brand,.page .exhibit,.page .page-copy{transition-property:opacity,filter!important;transition-duration:2600ms!important;transition-delay:0ms!important}
 .page,.page.words,.page.active,.page.active.departing{transform:none!important}
}
/* Revision 26: pre-rendered transparent portrait avoids live SVG filter/mask failures on Safari. */
#story .portrait-exhibit .portrait-scene .portrait-raster{position:relative;inset:auto;display:block;width:auto;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:left bottom;mask:none;-webkit-mask:none;border:0;box-shadow:none;transform:none;flex-shrink:1;opacity:.02;filter:brightness(.06) saturate(.9);transition:opacity 3600ms cubic-bezier(.45,0,.55,1),filter 3600ms cubic-bezier(.45,0,.55,1)}
#story.active .portrait-exhibit .portrait-scene .portrait-raster{opacity:1;filter:brightness(.72) saturate(.9)}
#story.active.departing .portrait-exhibit .portrait-scene .portrait-raster{opacity:.3;filter:brightness(.14) saturate(.9);transition-duration:2600ms}
@media(prefers-reduced-motion:reduce){#story .portrait-exhibit .portrait-scene .portrait-raster{transition-property:opacity,filter!important;transition-duration:2600ms!important}}
/* Keep the landscape room prompt clear of the enlarged project plinth label. */
@media(orientation:landscape){body[data-page=home] #hint{position:absolute;left:30%;right:30%;bottom:0;margin:0;text-align:center;font-size:10px;line-height:1.35}}

/* Revision 28: consistent logo alignment and direct photo swiping. */
@media(orientation:landscape){.page .page-brand{transform:translateX(-4vw)}}
body[data-photo=open] #photo{pointer-events:auto;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
#hero{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* Cropped room geometry must not become a hidden scroll container when controls receive focus. */
#viewport{overflow:clip}

/* Revision 29: a selectable colour atelier and photographs floating above the room. */
#heroSwatch{width:100%;text-align:left;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:5px;line-height:1.1;cursor:pointer}
#heroSwatch small{font:10px/1.3 Arial;letter-spacing:.12em;text-shadow:none}
#paletteStrip button{flex:1;min-width:0;min-height:22px;padding:0;position:relative;transition:background-color 1.2s,outline-color .8s;outline:1px solid transparent;outline-offset:-3px}
#paletteStrip button[aria-pressed=true]{outline-color:#fff0cb;box-shadow:inset 0 0 0 4px #0004}
#expertise.active::before{transition:filter 2600ms ease-in-out;filter:brightness(1)}
body[data-palette-focus=true] #expertise.active::before{filter:brightness(.48)}
body[data-palette-focus=true] #expertise.active .page-copy{filter:brightness(.65)}
body[data-palette-focus=true] #expertise.active .page-brand{filter:brightness(.65)}
body[data-palette-focus=true] #paletteDisplay{box-shadow:0 20px 45px #000c,0 0 65px var(--study-glow)}
#paletteDisplay{transition:box-shadow 2600ms ease-in-out,filter 2600ms ease-in-out}
#expertise.active .palette-exhibit{filter:brightness(.86);transition:filter 2600ms ease-in-out}
body[data-palette-focus=true] #expertise.active .palette-exhibit{filter:brightness(1.06)}
#collection.active{pointer-events:auto}
#photo{background:transparent;border:0;box-shadow:none;z-index:6;pointer-events:none!important}
#hero{width:auto;height:auto;max-width:100%;max-height:calc(100% - 32px);object-fit:contain;background:transparent;border:0;box-shadow:none;filter:none;flex-shrink:1}
body[data-photo=open] #hero{pointer-events:auto;touch-action:pan-y pinch-zoom}
#caption{background:transparent;pointer-events:none}
#collection::before{transition:filter 2600ms ease-in-out;filter:brightness(1);mask-image:radial-gradient(ellipse 100% 100% at 48% 35%,#000 50%,#0008 100%);-webkit-mask-image:radial-gradient(ellipse 100% 100% at 48% 35%,#000 50%,#0008 100%)}
body[data-photo=open] #collection::before{filter:brightness(.54)}
body[data-photo=open] #collection .page-brand{filter:brightness(.62);transition:filter 2600ms ease-in-out}
body[data-photo=open] #collection .collection-copy{filter:brightness(.78);transition:filter 2600ms ease-in-out}
body[data-photo=closing] #photo{opacity:1}
body[data-photo=closing] #mosaic{pointer-events:none}
@media(orientation:portrait){#hero{width:auto;height:auto;max-height:calc(100% - 28px)}#heroSwatch small{font-size:9px}}
@media(orientation:landscape) and (max-height:360px){#heroSwatch{font-size:20px;gap:3px;padding:7px 10px}#heroSwatch small{font-size:8px}#paletteStrip button{min-height:18px}}

/* Revision 30: the colour atelier, with concealed light sources and verified paint chips. */
#expertise{--study-light:#fff4df;--study-glow:#e9dccd26;--study-opacity:.16;--colour-wash:linear-gradient(115deg,#fff8e41a,transparent 65%);--sample-saturation:1;--sample-temperature:0deg}
#expertise[data-lighting=warm]{--study-light:#ffc07e;--study-glow:#dda36a35;--study-opacity:.7;--colour-wash:linear-gradient(115deg,#ffb66a99 0%,#e2ac5e44 55%,#59361c24 100%);--sample-saturation:1.08;--sample-temperature:-2deg}
#expertise[data-lighting=cool]{--study-light:#a9d7ff;--study-glow:#8dbde038;--study-opacity:.72;--colour-wash:linear-gradient(115deg,#a1d3ff9c 0%,#89b6e34a 55%,#30496324 100%);--sample-saturation:1.06;--sample-temperature:3deg}
.study-spots{display:none}
#expertise .palette-exhibit{gap:9px;justify-content:center;overflow:visible}
#expertise .palette-exhibit .eyebrow{margin:0;font-size:9px;line-height:1.4}
#paletteChoices{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:0;border-bottom:0}
#paletteChoices button{font-size:12px;min-height:33px;text-align:left;white-space:nowrap;border-bottom:1px solid #b59a6735;color:#d3c3a7}
#paletteChoices button[aria-pressed=true]{color:#fff0ce;border-bottom-color:#d2b481}
#paletteChoices button:last-child{font-style:italic}
#paletteDisplay{display:grid;grid-template-rows:minmax(100px,1fr) 44px;flex:1;max-height:330px;min-height:144px;border-color:#bfa77c50;background:transparent;box-shadow:0 14px 34px #0008,0 0 35px var(--study-glow)}
#paletteDisplay::after{background:var(--colour-wash);mix-blend-mode:soft-light;opacity:1;transition:background 1800ms ease-in-out;z-index:2}
#heroSwatch{height:auto;min-height:0;padding:18px;background-image:none;box-shadow:none;text-shadow:none;font:normal clamp(24px,2.3vw,36px)/1.12 Georgia;filter:saturate(var(--sample-saturation)) hue-rotate(var(--sample-temperature));transition:background-color 1200ms ease-in-out,filter 1800ms ease-in-out}
#heroSwatch::before{content:'';position:absolute;inset:0;pointer-events:none;background:url('../assets/charcoal-stone.png') center/cover;mix-blend-mode:soft-light;opacity:.08}
#heroSwatch span,#heroSwatch small{position:relative;z-index:3}
#heroSwatch small{font:10px/1.35 Arial;letter-spacing:.06em;max-width:100%;overflow-wrap:anywhere}
#paletteStrip{display:flex;height:44px;min-height:44px;gap:5px;padding:5px 7px 7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;touch-action:pan-x;position:relative;z-index:3;background:#08070688}
#paletteStrip::-webkit-scrollbar{display:none}
#paletteStrip button{flex:0 0 calc((100% - 20px)/5);min-height:30px;scroll-snap-align:start;box-shadow:none;filter:saturate(var(--sample-saturation)) hue-rotate(var(--sample-temperature));transition:filter 1800ms ease-in-out}
#lightModes{margin:0;gap:8px}#lightModes button{min-height:32px;background:transparent;font-size:12px;color:#d7c7ab}
#lightModes button[aria-pressed=true]{color:#ffe9c1;background:#bca26c10;box-shadow:none}
#lightingNote{margin:0;min-height:1.4em;font-size:10px;color:#d6c5a7}
#expertise .palette-exhibit .study-note{margin:0;font-size:10px;line-height:1.4}
#expertise .accuracy-note{color:#a99e8c}
#expertise .page-copy{justify-content:center;gap:12px}
#expertise .page-copy h1{font-size:clamp(25px,2.7vw,40px)}
#paletteStory{display:grid;gap:9px}
#expertise .page-copy #paletteLabel{font-size:9px;letter-spacing:.1em;color:#c9ad77;line-height:1.4}
#paletteTitle{font:normal clamp(21px,2vw,29px)/1.15 Georgia;margin:0;color:#f1e5cb}
#expertise .page-copy #paletteDescription,#expertise .page-copy #paletteVerdict{font-size:13px;line-height:1.5}
#paletteVerdict{padding-left:12px;border-left:1px solid #b59a6750;color:#d1ba92!important}
#paletteSource{font-size:10px;line-height:1.4;color:#b8a689;justify-self:start;min-height:24px;display:flex;align-items:center}
#expertise .page-copy .personal-invite{font:italic 16px/1.45 Georgia;color:#ddd0b8;margin-top:2px}
#expertise .page-copy .colour-action{align-self:flex-start;color:#ffe1a4;border-bottom:1px solid #c6ab7860;min-height:36px;font-size:15px}
#finishNotes{border-top:1px solid #b59a6735;padding-top:9px;color:#c9b99a;font-size:12px}
#finishNotes summary{cursor:pointer;min-height:30px;list-style-position:inside;touch-action:manipulation}
#finishNotes #tabs{margin:5px 0 10px}#finishNotes #serviceSteps{margin-top:12px}
body[data-palette-focus=true] #expertise.active .page-copy{filter:brightness(.82)}
body[data-palette-focus=true] #expertise.active .palette-exhibit{filter:brightness(1)}
#expertise.active .palette-exhibit{filter:brightness(.9)}
#expertise.departing .palette-exhibit{filter:brightness(.4);transition:filter 2400ms ease-in-out}
.collection-action{margin-top:8px!important;align-self:flex-start;font-size:12px!important}
#welcome p{max-width:85%;text-align:center;line-height:1.4}
@media(orientation:landscape){#expertise{grid-template-columns:minmax(0,42fr) minmax(0,50fr);column-gap:7%}}
@media(orientation:landscape) and (max-height:600px){
 #expertise .palette-exhibit{display:flex;gap:5px;overflow:auto;justify-content:flex-start;padding-right:2px}
 #paletteChoices{gap:0 10px}#paletteChoices button{min-height:27px;font-size:11px}
 #paletteDisplay{min-height:100px;max-height:none;grid-template-rows:minmax(60px,1fr) 36px}
 #heroSwatch{padding:11px;font-size:23px}#heroSwatch small{font-size:9px}
 #paletteStrip{height:36px;min-height:36px;padding:4px 6px 5px}#paletteStrip button{min-height:26px}
 #lightModes button{min-height:27px;font-size:11px}#lightingNote{font-size:9px}
 #expertise .palette-exhibit .eyebrow,#expertise .palette-exhibit .study-note{font-size:9px}
 #expertise .page-copy{justify-content:flex-start;gap:7px}
 #expertise .page-copy h1{font-size:25px}#paletteStory{gap:6px}#paletteTitle{font-size:20px}
 #expertise .page-copy #paletteLabel{font-size:8px}
 #expertise .page-copy #paletteDescription,#expertise .page-copy #paletteVerdict{font-size:11px;line-height:1.4}
 #expertise .page-copy .personal-invite{font-size:13px}#expertise .page-copy .colour-action{font-size:13px;min-height:30px}
 #finishNotes{font-size:11px;padding-top:6px}#finishNotes summary{min-height:26px}
}
@media(orientation:portrait){
 #expertise{row-gap:12px;grid-template-rows:auto minmax(265px,1fr) minmax(0,auto)}
 #expertise .palette-exhibit{gap:6px;min-height:0}
 #paletteChoices{gap:0 14px}#paletteChoices button{min-height:30px;font-size:12px}
 #paletteDisplay{grid-template-rows:minmax(84px,1fr) 40px;min-height:124px;max-height:260px}
 #heroSwatch{padding:14px;font-size:26px}#heroSwatch small{font-size:9px}
 #paletteStrip{height:40px;min-height:40px;padding:4px 6px 6px}#paletteStrip button{min-height:30px}
 #lightModes button{min-height:30px;font-size:12px}#lightingNote{font-size:10px}
 #expertise .palette-exhibit .eyebrow{display:none}
 #expertise .page-copy{max-height:34vh;gap:9px;justify-content:flex-start;padding-bottom:6px}
 #expertise .page-copy h1{font-size:26px}#paletteStory{gap:7px}#paletteTitle{font-size:21px}
 #expertise .page-copy #paletteDescription,#expertise .page-copy #paletteVerdict{font-size:12px;line-height:1.45}
 #expertise .page-copy .personal-invite{font-size:14px}#expertise .page-copy .colour-action{font-size:14px}
}
@media(orientation:portrait) and (max-height:720px){
 #expertise{grid-template-rows:auto minmax(242px,1fr) minmax(0,auto);row-gap:9px}
 #expertise .page-brand{width:min(78%,42vh)}
 #expertise .page-copy{max-height:30vh}
 #paletteDisplay{min-height:105px;grid-template-rows:minmax(65px,1fr) 36px}#paletteStrip{height:36px;min-height:36px}
 #paletteChoices button{min-height:28px;font-size:11px}#heroSwatch{font-size:23px;padding:10px}
 #expertise .palette-exhibit{gap:5px}
}
@media(orientation:landscape) and (max-height:360px){
 #expertise .page-copy h1{font-size:22px}#paletteTitle{font-size:18px}
 #paletteChoices button{min-height:24px;font-size:10px}
 #paletteDisplay{min-height:86px;grid-template-rows:minmax(50px,1fr) 34px}
 #heroSwatch{font-size:20px;padding:8px 10px}#heroSwatch small{font-size:8px}
 #paletteStrip{height:34px;min-height:34px}#paletteStrip button{min-height:24px}
 #expertise .palette-exhibit{gap:4px}#lightModes button{min-height:26px}
 #expertise .accuracy-note{font-size:8px!important}
}
/* Keep the invitation within the first view, with practical detail available on demand. */
#expertise .page-copy #paletteDescription{max-width:49ch}
#expertise .page-copy .personal-invite{font-size:14px}
#expertise .page-copy #paletteLabel{font-size:8px}
@media(orientation:portrait){#expertise .page-copy{max-height:36vh;gap:8px}#expertise .page-copy .personal-invite{font-size:13px}#expertise .page-copy h1{font-size:25px}}
@media(orientation:portrait) and (max-height:720px){#expertise .page-copy{max-height:31vh}}
/* On short screens the next step stays above the longer editorial story. */
#expertise .page-copy .colour-action{margin:0 0 2px;padding:0;min-height:32px}
@media(orientation:portrait){
 #project .page-copy{justify-content:flex-start;padding-top:16px}
 #project .project-exhibit p{display:block;font:italic 14px/1.4 Georgia;margin:0 0 10px;color:#d4c6ad}
 #project .project-exhibit p br{display:none}
 #project .project-exhibit .contact{padding-top:7px;border-top:1px solid #b59a6735}
}
@media(orientation:landscape) and (max-height:600px){
 #expertise .page-copy #paletteLabel{display:none}
 #paletteStory{gap:4px}
 #expertise .page-copy #paletteVerdict{font-size:10px;line-height:1.35}
}

/* Revision 31: every paint chip visible, joined directly to the large colour field. */
#paletteDisplay{grid-template-rows:minmax(52px,1fr) auto;min-height:calc(52px + var(--swatch-rows,2)*28px);border:0;overflow:hidden}
#paletteStrip{display:grid;grid-template-columns:repeat(var(--swatch-columns,5),minmax(0,1fr));grid-auto-rows:28px;height:auto;min-height:0;padding:0;gap:0;overflow:visible;background:transparent;scroll-snap-type:none;touch-action:manipulation}
#paletteStrip button{width:100%;min-height:0;height:100%;padding:0;margin:0;border:0;outline:0;box-shadow:none;background-image:none}
#paletteStrip button[aria-pressed=true]{outline:1px solid #fff0cb;outline-offset:-3px;box-shadow:inset 0 0 0 2px #0004}
#heroSwatch{border:0;border-radius:0;margin:0}
@media(orientation:landscape) and (max-height:600px){#paletteStrip{grid-auto-rows:22px}#paletteDisplay{min-height:calc(52px + var(--swatch-rows,2)*22px)}}
@media(orientation:portrait){#paletteStrip{grid-auto-rows:28px}}

/* Revision 32: a single, seamless swipe rail; the selected chip alone is outlined. */
#paletteDisplay{grid-template-rows:minmax(52px,1fr) 34px;min-height:86px}
#paletteStrip{display:flex;flex-wrap:nowrap;height:34px;min-height:34px;gap:0;padding:0;overflow-x:auto;overflow-y:hidden;background:transparent;scroll-snap-type:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior-x:contain}
#paletteStrip:active{cursor:grabbing}
#paletteStrip button{flex:0 0 20%;width:20%;height:34px;min-height:34px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#paletteStrip:has(button:nth-child(6)) button{flex-basis:19%;width:19%}
@media(orientation:landscape) and (max-height:600px){#paletteDisplay{grid-template-rows:minmax(52px,1fr) 28px;min-height:80px}#paletteStrip,#paletteStrip button{height:28px;min-height:28px}}

/* Revision 34: let Safari and other touch browsers own the scroll gesture. */
#paletteStrip{touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch;scroll-behavior:auto}
#paletteStrip button{touch-action:pan-x pinch-zoom}

/* Revision 35: direct horizontal touch drag; vertical page gestures remain free. */
#paletteStrip,#paletteStrip button{touch-action:pan-y pinch-zoom}
#paletteStrip{-webkit-overflow-scrolling:auto;scroll-behavior:auto}

#paletteDisplay,#heroSwatch{touch-action:pan-y pinch-zoom}

/* Revision 44: discreet browsing guidance and invisible, spaced arrow hit areas. */
#filters #galleryCue{font:10px/1.4 Arial,sans-serif;color:#c6baa5;min-height:0;white-space:nowrap}
#prev,#next{position:relative}
#prev::before,#next::before{content:'';position:absolute;inset:-6px -12px;background:transparent}
#finishContent{display:flow-root}

/* Revision 45: a faceted brass waymark and matching fine-pointer nib. */
.waymark{display:inline-block;width:23px;height:14px;vertical-align:-2px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;color:#d3ba86;transition:color 650ms ease,filter 650ms ease}
.waymark path{vector-effect:non-scaling-stroke}
.waymark-left{transform:rotate(180deg);margin-left:0;margin-right:5px}
.waymark-diagonal{width:19px;transform:rotate(-40deg)}
#prev .waymark,#next .waymark{width:12px;margin:0;vertical-align:middle}
#prev .waymark{transform:rotate(180deg)}
button:hover .waymark,a:hover .waymark{color:#f1ddb0;filter:drop-shadow(0 0 3px #bfa16d55)}
@media(hover:hover) and (pointer:fine){
 body{cursor:url('assets/cursor-brass.svg') 4 3,default}
 button,a,summary,select{cursor:url('assets/cursor-brass-active.svg') 4 3,pointer}
 button:disabled{cursor:default}
 input,textarea{cursor:text}
}

/* Revision 48: separate compact landscape footer from room content. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
 .page,.page.words{padding-bottom:68px}
 footer{bottom:max(6px,env(safe-area-inset-bottom));left:4%;right:4%;min-height:44px}
 #back{max-width:44%;white-space:normal;line-height:1.25}
 #hint{max-width:48%;text-align:right;line-height:1.3}
 body[data-page=home] #hint{position:static;max-width:60%;margin-left:auto}
}
body[data-finale=true] .entry{pointer-events:none}
body[data-finale=true] #labelLight,body[data-finale=true] footer{opacity:0;pointer-events:none;transition:opacity 3600ms ease-in-out}