/* All optical layers share the original plate's size and origin. The outer
   viewport clips that single plane. Coordinates remain valid when panning. */
.photo-yard {
    --yard-ink:#09171e;--yard-ice:#acf7e7;
    --yard-edge:clamp(18px,4.5vw,88px);
    --yard-height:max(100svh,560px);--yard-pan:50%;
    isolation:isolate;position:relative;display:grid;align-items:center;
    min-height:var(--yard-height);background:var(--yard-ink);overflow:hidden;
}
.yard-film,.yard-links {
    position:absolute;left:var(--yard-pan);top:50%;
    width:max(100%,calc(var(--yard-height) * 1672 / 941));aspect-ratio:1672/941;
    transform:translate(calc(-1 * var(--yard-pan)),-50%);
}
.yard-film {isolation:isolate;margin:0;background:#11212d}
.yard-image {display:block;width:100%;height:100%;aspect-ratio:1672/941;transition:filter .55s ease}
.yard-film[data-worklight=boost] .yard-image {filter:brightness(1.14) saturate(1.07)}
.yard-film::before,.yard-film::after {content:'';position:absolute;inset:0;pointer-events:none}
.yard-film::after {
    z-index:1;opacity:0;transition:opacity .55s ease;
    background:radial-gradient(ellipse at 66% 38%,#ffe7b629,transparent 29%),radial-gradient(ellipse at 87% 56%,#ffdeb221,transparent 22%);
}
.yard-film[data-worklight=boost]::after {opacity:1}
.yard-film>canvas {position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.photo-yard::after {
    content:'';z-index:2;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,#07131ac9,transparent 49%),linear-gradient(180deg,#03101987,transparent 20%,transparent 77%,#05151a89);
}
.yard-hit-map {position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
/* The solid link lives on the photograph, but its visible focus belongs
   to the matching floor label. No browser focus rectangle across the image. */
#yard .yard-hit-map a, #yard .yard-hit-map a:focus-visible {outline:none; -webkit-tap-highlight-color:transparent}
.yard-hit-map polygon {pointer-events:fill;fill:transparent;stroke:none;cursor:pointer}
#yard:has(.yard-outline-40:hover) .yard-pick-40,
#yard:has(.yard-outline-20:hover) .yard-pick-20 {background:#b7fae4;color:#0d2724;border-color:#bcffe6}
#yard .yard-shift {position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){#yard .yard-shift {display:none}}
.yard-copy {
    z-index:3;align-self:center;justify-self:start;width:min(47%,790px);
    padding:86px 0 55px var(--yard-edge);color:#f4faf4;pointer-events:none;
}
#yard .yard-caption {display:contents}
.yard-eyebrow,.yard-pick small,.yard-catalog,.yard-caption,.yard-pan {
    font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.09em;
}
.yard-eyebrow {display:flex;align-items:center;gap:10px;color:#bdeae3}
.yard-eyebrow i {width:6px;height:6px;background:var(--yard-ice);border-radius:50%}
.yard-copy h1 {
    margin:20px 0 15px;font:570 clamp(50px,6.55vw,124px)/.98 Hangar,'Arial Narrow',sans-serif;
    letter-spacing:-.04em;color:#f4faf4;text-transform:none;
}
.yard-copy h1 span,.yard-catalog b {color:var(--yard-ice)}
.yard-lead {max-width:30ch;font:400 clamp(15px,1.35vw,22px)/1.46 system-ui,sans-serif;color:#e1edec}
.yard-catalog {
    display:inline-flex;align-items:center;justify-content:space-between;gap:27px;pointer-events:auto;min-height:44px;
    margin-top:23px;padding:10px 14px;color:#f3fcf8;background:#11292ad9;text-decoration:none;border:1px solid #80b0b0;
}
.yard-catalog:hover,.yard-pan:hover {border-color:var(--yard-ice);color:var(--yard-ice)}
.yard-links {z-index:4;pointer-events:none}
.yard-pick {
    display:flex;align-items:center;gap:5px;position:absolute;pointer-events:auto;min-height:44px;
    color:#edf9f5;border:1px solid #87b7ba;background:#0b1a20ef;text-decoration:none;
    transform:translate(-50%,-50%);padding:6px 11px;box-shadow:0 6px 18px #03101340;
}
.yard-pick-40 {left:48%;top:86%}.yard-pick-20 {left:82.5%;top:88%}
.yard-pick::before {content:'';position:absolute;bottom:100%;left:50%;height:clamp(8px,2.1vw,37px);width:1px;background:#afe8df}
.yard-pick:hover,.yard-pick:focus-visible {background:#b7fae4;color:#0d2724;border-color:#bcffe6}
.yard-point {width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);margin-right:5px}
.yard-pick strong {font:570 clamp(18px,1.7vw,28px)/1 Hangar,sans-serif}
.yard-pick small {font-size:10px;letter-spacing:0}.yard-pick b {margin-left:6px;font-size:13px}
.yard-pick-action {display:none}
.yard-credit {position:absolute;bottom:17px;left:var(--yard-edge);z-index:4;display:flex;align-items:center;gap:12px;color:#d9efed}
.yard-dashes {width:29px;height:8px;background:repeating-linear-gradient(110deg,#c0b88e 0 3px,transparent 3px 6px)}
/* The only lighting control is the fixture itself. Its image-space
   coordinates stay registered with the photograph through every crop. */
#yard .yard-lamp {
    position:absolute;left:51.6%;top:13.5%;z-index:4;transform:translate(-50%,-50%);
    width:48px;height:48px;border:0;padding:0;background:transparent;border-radius:50%;
    cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.yard-lamp[hidden],.yard-pan,.yard-pan[hidden] {display:none}
#yard .yard-lamp:focus-visible {outline:2px solid #ffe2ac;outline-offset:-6px}
@media(hover:hover){#yard .yard-lamp:hover {background:radial-gradient(ellipse,#ffe6a72b,transparent 65%)}}
.yard-pan {
    position:absolute;right:var(--yard-edge);z-index:5;align-items:center;gap:8px;cursor:pointer;
    min-height:44px;padding:7px 12px;border:1px solid #577780;background:#10252ce8;color:#d8e6e5;letter-spacing:.01em;
}
.photo-yard :is(a,button):focus-visible {outline:2px solid var(--yard-ice);outline-offset:3px}
@media(min-aspect-ratio:2/1) and (min-width:831px){
    #yard :is(.yard-film,.yard-links) {top:15%;transform:translate(calc(-1 * var(--yard-pan)),-15%)}
    .yard-pick-40 {top:78%}.yard-pick-20 {top:79%}
}
@media(max-width:830px){
    .photo-yard {--yard-pan:43%;--yard-height:max(100svh,570px);align-items:start}
    .photo-yard[data-closeup="20"] {--yard-pan:85%}
    #yard[data-closeup="20"] .yard-lamp {left:66.3%;top:10.9%}
    .yard-film {transition:left .62s ease,transform .62s ease}
    .photo-yard::after {background:linear-gradient(180deg,#041118bc 0%,#09192359 26%,transparent 45%,transparent 62%,#03131ad9 100%)}
    .yard-copy {align-self:start;width:100%;padding:clamp(94px,13svh,130px) var(--yard-edge) 0}
    .yard-copy h1 {font-size:clamp(44px,9.1vw,73px);margin:9px 0 11px}
    .yard-copy h1 br {display:none}
    .yard-lead {font-size:15px;max-width:34ch;color:#eef5f2;text-shadow:0 2px 12px #06151a}
    .yard-catalog {margin-top:13px}
    .yard-links {
        left:var(--yard-edge);right:var(--yard-edge);top:auto;bottom:43px;
        display:grid;grid-template-columns:1fr 1fr;gap:8px;width:auto;aspect-ratio:auto;transform:none;
    }
    .yard-pick {position:static;transform:none;gap:4px;min-height:46px;padding:6px 9px}
    .yard-point,.yard-pick::before,.yard-dashes {display:none}
    .yard-pick strong {font-size:21px}
    .yard-pick-action {display:inline;margin-left:auto;font:600 11px system-ui,sans-serif}
    .yard-pick b {margin-left:0}
    .yard-credit {bottom:15px;font-size:9px}
    .yard-pan {top:auto;bottom:100px;min-height:44px;font-size:11px;padding:7px 9px}
    .yard-pan:not([hidden]) {display:inline-flex}
}
@media(max-height:520px) and (orientation:landscape){
    .photo-yard {--yard-height:max(100svh,460px)}
    .yard-copy {width:65%;padding-top:92px}
    .yard-copy h1 {font-size:clamp(38px,6vw,64px)}
}
@media(prefers-reduced-motion:reduce){
    .yard-image,.yard-film,.yard-film::after,.yard-hit-map polygon {transition:none}
}

/* The rim traces the steel in image coordinates. The solid polygon beneath
   these optical strokes remains the link, including without JavaScript. */
#yard .yard-rim, #yard .yard-rim polygon {pointer-events:none}
#yard .yard-rim {opacity:0;transition:opacity .24s ease}
#yard .yard-rim polygon {vector-effect:non-scaling-stroke;stroke-linejoin:round}
#yard .yard-edge-halo {stroke:#76dfd5;stroke-width:5px;stroke-opacity:.19;fill:#a9fff8;fill-opacity:.055}
#yard .yard-edge-line {stroke:#bcfff0;stroke-width:1.25px;stroke-opacity:.88;fill:none}
#yard .yard-edge-glint {stroke:#fcfff0;stroke-width:2.1px;stroke-dasharray:4 96;stroke-linecap:round;fill:none}
#yard:has(.yard-outline-40:is(:hover,:active),.yard-pick-40:is(:hover,:focus-visible),.yard-tool[data-yard-size="40"]:is(:hover,:focus-visible,:active)) .yard-rim-40,
#yard:has(.yard-outline-20:is(:hover,:active),.yard-pick-20:is(:hover,:focus-visible),.yard-tool[data-yard-size="20"]:is(:hover,:focus-visible,:active)) .yard-rim-20 {opacity:1}
@media(prefers-reduced-motion:no-preference){
    #yard:has(.yard-outline-40:is(:hover,:active),.yard-pick-40:is(:hover,:focus-visible),.yard-tool[data-yard-size="40"]:is(:hover,:focus-visible,:active)) .yard-running .yard-rim-40 .yard-edge-glint,
    #yard:has(.yard-outline-20:is(:hover,:active),.yard-pick-20:is(:hover,:focus-visible),.yard-tool[data-yard-size="20"]:is(:hover,:focus-visible,:active)) .yard-running .yard-rim-20 .yard-edge-glint {animation:yard-edge-pass 1.7s ease-out both}
}
@keyframes yard-edge-pass {from{stroke-dashoffset:0}to{stroke-dashoffset:-89}}
.yard-mechanisms {position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;isolation:isolate}
.yard-mechanisms[hidden],#yard .yard-tool[hidden] {display:none}
.yard-film[data-worklight="boost"] :is(.yard-impeller,.yard-hatch) {filter:brightness(1.14) saturate(1.07)}
.yard-impeller,.yard-hatch {visibility:hidden}
.yard-hatch {transition:visibility 0s .65s}
.yard-hatch.yard-engaged {visibility:visible;transition-delay:0s}
.yard-impeller.yard-engaged {visibility:visible}
.yard-wheel {transform-origin:0 0}
.yard-impeller.yard-engaged .yard-wheel {animation:yard-impeller .86s linear infinite;animation-play-state:paused}
.yard-running .yard-impeller.yard-engaged .yard-wheel {animation-play-state:running}
@keyframes yard-impeller {to{transform:rotate(360deg)}}
.yard-leaf {transform-origin:0 0;transition:transform .64s cubic-bezier(.31,.04,.19,.99)}
.yard-hatch.yard-engaged .yard-leaf {transform:matrix(.18,.19,0,1,0,0)}
.yard-hinges,.yard-leaf-edge {opacity:0;transition:opacity .25s}
.yard-hatch.yard-engaged :is(.yard-hinges,.yard-leaf-edge) {opacity:1}
#yard .yard-tool {
    position:absolute;left:var(--px);top:var(--py);width:max(44px,var(--pw));height:max(44px,var(--ph));
    padding:0;border:0;border-radius:0;box-shadow:none;background:none;transform:translate(-50%,-50%);
    z-index:5;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#yard .yard-tool:focus-visible {outline:0;box-shadow:none}
#yard .yard-tool:focus-visible::before,#yard .yard-tool:hover::before,#yard .yard-tool:active::before {
    content:'';position:absolute;inset:2%;border:1px solid #b8f9ec;box-shadow:0 0 6px #78fcdfaf;
}
#yard .yard-tool-fan::before {border-radius:50%}
#yard .yard-tool-panel::before {transform:skewY(7deg)}
#yard .yard-tool-sign {
    display:grid;place-items:center;position:absolute;right:-4px;bottom:-4px;
    width:15px;height:15px;border-radius:50%;border:1px solid #ced9ca;background:#102426;
    color:#e9fff1;font:700 10px/1 system-ui;box-shadow:0 1px 3px #0310188a;pointer-events:none;
}
#yard .yard-tool[aria-pressed="true"] .yard-tool-sign {background:#acffe7;border-color:#c7fff1;color:#193231}
@media(prefers-reduced-motion:reduce){
    #yard .yard-rim,.yard-hatch,.yard-leaf,.yard-hinges,.yard-leaf-edge {transition:none}
    .yard-impeller.yard-engaged .yard-wheel {animation:none;transform:rotate(24deg)}
}