.vintage.vintage-workshop{padding:0;position:relative;aspect-ratio:1672/941;background:#1a1009 url('assets/vintage/workshop-v10.png') center/100% 100% no-repeat;isolation:isolate;overflow:hidden}
.vintage-workshop .vintage-heading{position:absolute;z-index:3;left:7%;right:8%;top:5%;margin:0;align-items:center;gap:20px}
.vintage-workshop h2{font-size:clamp(28px,4vw,70px);margin:0 0 8px;letter-spacing:-.04em;text-shadow:0 3px 12px #000}
.vintage-workshop .eyebrow{margin:0 0 8px;color:#e7b875}.vintage-workshop .vintage-heading p:not(.eyebrow){color:#eadaca;margin:0;font-size:clamp(12px,1.2vw,19px)}
.archive-open{display:inline-block;border:1px solid #c99555;color:#ffe2bb;background:#21160de8;border-radius:5px;padding:13px 20px;white-space:nowrap;cursor:pointer;transition:color .2s ease,text-shadow .2s ease}.archive-open span{margin-left:15px}
.vintage-set{position:absolute;inset:0}.vintage-portals{position:absolute;left:22.3%;top:31.5%;width:54.25%;height:35.3%;display:grid;grid-template-columns:repeat(3,1fr);gap:3.3%}
.vintage-portal{position:relative;padding:0;border:0;background:#151515;color:#fff;min-width:0;cursor:pointer;overflow:hidden;text-align:left;box-shadow:0 0 10px #0008}
.portal-picture{display:block;width:100%;height:100%;background:#181818}.portal-picture img{width:100%;height:100%;object-fit:contain;display:block}.paper-display{background:#d8cdbb}
.portal-label{position:absolute;inset:auto 0 0;padding:28px 10px 10px;background:linear-gradient(transparent,#080706f5 38%);display:flex;flex-direction:column;gap:4px}.portal-label small{font-size:clamp(7px,.65vw,11px);letter-spacing:.13em;color:#e5b777}.portal-label strong{font-size:clamp(12px,1.35vw,23px);line-height:1.1}.portal-label>span{font-size:clamp(9px,.8vw,13px);color:#e7d4b9}
.vintage-portal:hover .portal-label{background:linear-gradient(transparent,#332012f5 38%)}.vintage-workshop button:focus-visible{outline:3px solid #9decff;outline-offset:3px}
/* The desktop galleries follow the physical, uneven frames in the scene. */
@media(min-width:761px){
 .vintage-workshop .vintage-heading{top:2%;align-items:flex-start}
 .vintage-workshop h2{font-size:clamp(27px,3.2vw,54px);margin-bottom:4px}
 .vintage-workshop .eyebrow{margin-bottom:5px;font-size:clamp(8px,.7vw,12px)}
 .vintage-workshop .vintage-heading p:not(.eyebrow){font-size:clamp(10px,.95vw,16px)}
 .vintage-portals{inset:0;width:100%;height:100%;display:block;pointer-events:none}
 .vintage-portal{position:absolute;background:transparent;box-shadow:none;overflow:visible;pointer-events:auto}
 .vintage-portal:nth-child(1){left:19.5%;top:23%;width:19.4%;height:46.9%}
 .vintage-portal:nth-child(2){left:41.6%;top:27.4%;width:13.8%;height:42.5%}
 .vintage-portal:nth-child(3){left:58.2%;top:24.25%;width:20.6%;height:45.65%}
 .vintage-portal .portal-picture{display:none}
 .vintage-portal .portal-label{top:auto;bottom:0;padding:8px 10px;background:#140d08e8;border:1px solid #a0764260;border-radius:3px;box-shadow:0 4px 10px #0007}
 .vintage-portal .portal-label small{display:none}
 .vintage-portal .portal-label strong{font-size:clamp(11px,1.1vw,19px)}
 .vintage-portal:hover .portal-label{background:#412b15f5;border-color:#e4b06e}
}
#archive-dialog{padding:0;border:1px solid #8e714d;border-radius:8px;background:#100e0c;color:#fff;width:min(1100px,94vw);max-width:94vw;max-height:94dvh}#archive-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
.archive-viewer{padding:22px;position:relative}.archive-close{position:absolute;right:12px;top:12px;z-index:1}.archive-viewer button{background:#30271e;color:#ffedda;border:1px solid #8c704f;border-radius:5px;cursor:pointer;min-width:38px;min-height:38px}.archive-photo{display:block;width:100%;height:65dvh;object-fit:contain}.archive-navigation{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0}.archive-caption{margin:0;text-align:center}.archive-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.archive-thumbs button{padding:2px;width:56px;height:56px;opacity:.55}.archive-thumbs button[aria-pressed=true]{border-color:#ffcf8b;opacity:1}.archive-thumbs img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.vintage.vintage-workshop{aspect-ratio:auto;min-height:820px;background-size:auto 100%;background-position:center}.vintage-workshop .vintage-heading{position:relative;inset:auto;margin:0;padding:35px 6% 25px;display:block;background:linear-gradient(#100c09d9,transparent)}.vintage-workshop h2{font-size:36px}.archive-open{margin-top:18px}.vintage-set{position:relative;inset:auto;padding:0 7% 55px}.wall-print{display:none}.vintage-portals{position:relative;inset:auto;width:100%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.vintage-portal{height:400px;border:6px ridge #715337}.portal-label{padding:30px 7px 10px}.portal-label strong{font-size:17px}.portal-label small{font-size:8px}.portal-label>span{font-size:10px}.archive-photo{height:60dvh}.archive-viewer{padding:12px}}
@media(max-width:480px){.vintage-portals{grid-template-columns:1fr}.vintage-portal{height:300px}.portal-label strong{font-size:22px}.portal-picture img{object-fit:contain}.vintage.vintage-workshop{background-size:auto 100%;}.portal-label small{font-size:10px}}
.vintage-workshop .vintage-portal .portal-label{background:rgba(15,10,6,.035);border:0;border-radius:0;box-shadow:none;text-shadow:0 1px 3px #000,0 0 7px #000,0 2px 10px #000b}
.vintage-workshop .vintage-portal:hover .portal-label{background:rgba(15,10,6,.07);border:0}
.vintage-workshop .vintage-portal .portal-label{top:0;bottom:auto}
/* A bright, enlarged label and a soft black halo identify the active gallery. */
.vintage-workshop .vintage-portal .portal-label{isolation:isolate;transform-origin:15% top;transition:transform .2s ease,color .2s ease,text-shadow .2s ease}
.vintage-workshop .portal-label::before{content:"";position:absolute;inset:-10px -12px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 45% 50%,#000f 0%,#000d 38%,#0008 60%,transparent 78%);filter:blur(10px);opacity:0;transition:opacity .2s ease}
.vintage-workshop .vintage-portal:is(:hover,:focus-visible){z-index:5}
.vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label{transform:scale(1.25);background:transparent;color:#fff;text-shadow:0 0 2px #fff,0 0 7px #fff8,0 0 12px #ffe6b866,0 2px 4px #000,0 0 12px #000,0 0 24px #000,0 0 40px #000}
.vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label::before{opacity:1}
.vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label>span{color:#fff4da}
.reduced-motion .vintage-workshop .portal-label,.reduced-motion .vintage-workshop .portal-label::before{transition:none}
@media(prefers-reduced-motion:reduce){.vintage-workshop .portal-label,.vintage-workshop .portal-label::before{transition:none}}
/* The warm light beats twice; the hover enlargement stays still. */
.vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label,
.vintage-workshop .archive-open:is(:hover,:focus-visible){
 color:#ffe4b0;
 text-shadow:0 0 3px #fff2cc,0 0 9px #ffc45ca6,0 0 20px #ff8a2499,0 0 34px #f65b1466,0 2px 4px #000,0 0 12px #000,0 0 24px #000,0 0 40px #000;
 animation:vintage-lamp-heartbeat 1.8s ease-in-out infinite;
}
.vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label>span{color:inherit}
@keyframes vintage-lamp-heartbeat{
 0%,42%,100%{color:#ffd29a;text-shadow:0 0 2px #ffe5b7,0 0 6px #ffc45c70,0 0 14px #ff8a2460,0 0 26px #f65b1440,0 2px 4px #000,0 0 12px #000,0 0 24px #000,0 0 40px #000}
 12%,29%{color:#fff8e9;text-shadow:0 0 4px #fff,0 0 12px #ffe293,0 0 25px #ffb347,0 0 44px #ff741bd9,0 2px 4px #000,0 0 12px #000,0 0 24px #000,0 0 40px #000}
 20%{color:#ffe5b7;text-shadow:0 0 3px #fff2cc,0 0 8px #ffd275b3,0 0 18px #ff9c3299,0 0 32px #ff741b80,0 2px 4px #000,0 0 12px #000,0 0 24px #000,0 0 40px #000}
}
.reduced-motion .vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label,
.reduced-motion .vintage-workshop .archive-open:is(:hover,:focus-visible){animation:none}
@media(prefers-reduced-motion:reduce){
 .vintage-workshop .vintage-portal:is(:hover,:focus-visible) .portal-label,
 .vintage-workshop .archive-open:is(:hover,:focus-visible){animation:none}
 .vintage-workshop .archive-open{transition:none}
}
/* Titles sit in the empty backing above the pinned artwork. */
@media(min-width:761px){
 .vintage-workshop .vintage-portal .portal-label{height:12%;padding:0 3%;justify-content:center;align-items:center;text-align:center;transform-origin:50% 50%;background:transparent}
 .vintage-workshop .vintage-portal:nth-child(2) .portal-label{height:13%}
 .vintage-workshop .vintage-portal:nth-child(3) .portal-label{height:13.4%}
 .vintage-workshop .vintage-portal .portal-label strong{font-size:clamp(9px,1.03vw,18px);white-space:nowrap}
 .vintage-workshop .vintage-portal .portal-label>span{display:none}
}
@media(max-width:760px){
 .vintage-workshop .vintage-portal{height:500px;padding-top:100px;background:#241810}
 .vintage-workshop .vintage-portal .portal-label{height:100px;padding:20px 10px;justify-content:center;background:transparent}
 .vintage-workshop .vintage-portal .portal-picture{height:100%}
 .vintage-workshop .vintage-portal:nth-child(3){height:525px;padding-top:125px}
 .vintage-workshop .vintage-portal:nth-child(3) .portal-label{height:125px}
}
@media(max-width:480px){
 .vintage-workshop .vintage-portal{height:400px}
 .vintage-workshop .vintage-portal:nth-child(3){height:425px}
}
/* Restore the prominent title from the original workshop mockup. */
.vintage-workshop h2{
 font-family:"Arial Black","Segoe UI",Arial,sans-serif;
 font-weight:900;
 font-size:clamp(36px,5.3vw,94px);
 line-height:1.04;
 letter-spacing:-.045em;
 color:#f3e9d8;
 text-shadow:0 3px 9px #000c;
 margin:0 0 9px;
}
@media(min-width:761px){
 .vintage-workshop .vintage-heading{left:4.3%;right:4.3%;top:4.5%;align-items:center}
 .vintage-workshop .vintage-heading p:not(.eyebrow){font-size:clamp(11px,1.2vw,20px)}
}
@media(max-width:760px){
 .vintage-workshop .vintage-portal[data-archive="cg"] .portal-picture{overflow:hidden}
 .vintage-workshop .vintage-portal[data-archive="cg"] .portal-picture img{object-fit:cover;object-position:50% 35%;transform:scale(1.12)}
}