.workshop-hero { position: relative; display: flex; min-height: min(68vw, 42rem); align-items: center; overflow: hidden; isolation: isolate; padding: clamp(3rem, 8vw, 7rem); border: 1px solid var(--color-line); }
.workshop-hero__art { position: absolute; z-index: -1; inset: 0; background-color: #3a1a20; background-image: linear-gradient(90deg, rgba(10, 11, 15, 0.92), rgba(10, 11, 15, 0.26)), url("../assets/branding/Mighty_Workshop_Logo.png"), radial-gradient(ellipse at 75% 45%, rgba(255, 61, 74, 0.32), transparent 34%), linear-gradient(135deg, #5a222a, #14161c 72%); background-position: center, 92% center, center, center; background-repeat: no-repeat; background-size: cover, min(34rem, 55%) auto, cover, cover; }
@media (max-width: 700px) { .workshop-hero__art { background-position: center, right -3rem top -2rem, center, center; background-size: cover, 12rem auto, cover, cover; opacity: 0.9; } }
.workshop-hero__copy { max-width: 37rem; }
.workshop-hero h1 { margin-bottom: var(--space-3); font-size: clamp(4rem, 10vw, 8rem); }
.workshop-hero__copy > p:not(.eyebrow) { max-width: 31rem; margin-bottom: var(--space-4); color: rgba(238, 240, 244, 0.8); font-size: 1.05rem; }
.workshop-hero__note { position: absolute; right: 1rem; bottom: 1rem; color: rgba(238, 240, 244, 0.65); font-size: 0.62rem; letter-spacing: 0.14em; writing-mode: vertical-rl; }
.workshop-details { padding: var(--space-7) 0 var(--space-6); }
.workshop-details h2 { font-size: clamp(1.4rem, 3vw, 2.6rem); }
.service-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-3) 0; }
.service-list span { padding: 0.5rem 0.75rem; border: 1px solid var(--color-line); color: var(--color-paper); font-size: 0.75rem; }
/* 8-bit garage: pegboard wall, hanging bulb, tool silhouettes, checkerboard floor. */
body.workshop-body { background-color: #14161a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cg fill='%230c0e12'%3E%3Crect x='3' y='3' width='3' height='3'/%3E%3Crect x='11' y='3' width='3' height='3'/%3E%3Crect x='19' y='3' width='3' height='3'/%3E%3Crect x='3' y='11' width='3' height='3'/%3E%3Crect x='11' y='11' width='3' height='3'/%3E%3Crect x='19' y='11' width='3' height='3'/%3E%3Crect x='3' y='19' width='3' height='3'/%3E%3Crect x='11' y='19' width='3' height='3'/%3E%3Crect x='19' y='19' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #14161a 0 55%, #181a15 55% 70%, #211c12 70% 100%); background-attachment: fixed; background-size: 48px 48px, 100% 100%; }
body.workshop-body::before { position: fixed; z-index: -1; inset: 0; height: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96' shape-rendering='crispEdges'%3E%3Crect x='31' width='2' height='26' fill='%230c0e12'/%3E%3Crect x='28' y='26' width='8' height='6' fill='%233a3f4a'/%3E%3Cg fill='%23ffd28a'%3E%3Crect x='26' y='32' width='12' height='4'/%3E%3Crect x='22' y='36' width='20' height='10'/%3E%3Crect x='26' y='46' width='12' height='6'/%3E%3C/g%3E%3Cg fill='%23ffb347'%3E%3Crect x='12' y='56' width='40' height='8' fill-opacity='.16'/%3E%3Crect x='8' y='64' width='48' height='10' fill-opacity='.11'/%3E%3Crect x='4' y='74' width='56' height='10' fill-opacity='.07'/%3E%3Crect y='84' width='64' height='12' fill-opacity='.04'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110' shape-rendering='crispEdges'%3E%3Cg fill='%234a5160'%3E%3Crect x='10' y='12' width='34' height='14'/%3E%3Crect x='40' y='8' width='10' height='8'/%3E%3Crect x='24' y='26' width='6' height='20'/%3E%3Crect x='74' y='8' width='6' height='12'/%3E%3Crect x='88' y='8' width='6' height='12'/%3E%3Crect x='74' y='16' width='20' height='5'/%3E%3Crect x='81' y='21' width='6' height='38'/%3E%3Crect x='77' y='59' width='14' height='12'/%3E%3Crect x='142' y='10' width='5' height='24'/%3E%3C/g%3E%3Cg fill='%23c8151f'%3E%3Crect x='24' y='46' width='6' height='26'/%3E%3Crect x='137' y='34' width='15' height='28'/%3E%3C/g%3E%3C/svg%3E"); background-position: center top, center 18%; background-repeat: no-repeat, no-repeat; background-size: auto 34vh, auto 24vh; content: ""; pointer-events: none; }
body.workshop-body::after { position: fixed; z-index: -1; right: 0; bottom: 0; left: 0; height: 11vh; border-top: 4px solid #0b0d11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Crect width='32' height='32' fill='%23171a21'/%3E%3Cg fill='%23101319'%3E%3Crect width='16' height='16'/%3E%3Crect x='16' y='16' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E"); background-size: 7vh 7vh; content: ""; pointer-events: none; }
.workshop-stream { margin-top: 0; }
/* Vintage Panasonic-style TV/VCR shell: matte cream casing, recessed screen, speaker strip, side tower. */
.workshop-stream__embed { position: relative; margin-right: 3.5%; margin-bottom: 0.75rem; }
.crt-body { position: relative; display: grid; grid-template-areas: "screen deck" "strip deck"; grid-template-columns: 7fr 2.1fr; gap: 2.5%; padding: 2.5% 2.5% 3%; background: #d6d0bd; box-shadow: inset 0 3px 0 #e8e3d2, inset 0 -6px 0 #a29b86, inset -6px 0 0 #b3ac96, 0 1rem 2.5rem rgba(0, 0, 0, 0.55); }
/* Right side face + top ridges give the box its 3D depth. */
.workshop-stream__embed::after { position: absolute; top: 4%; right: -3.5%; width: 3.5%; height: 92%; background: linear-gradient(90deg, #8f8a76, #6f6a59); clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%); content: ""; }
.crt-body::before { position: absolute; top: -1.1rem; right: 18%; left: 22%; height: 1.1rem; background: linear-gradient(180deg, #e8e3d2, #b3ac96); clip-path: polygon(2% 100%, 0 100%, 0 45%, 3% 0, 26% 0, 26% 45%, 28% 100%, 72% 100%, 74% 45%, 74% 0, 97% 0, 100% 45%, 100% 100%, 98% 100%); content: ""; }
.crt-screen { position: relative; z-index: 1; grid-area: screen; aspect-ratio: 4 / 3; overflow: hidden; border: 6px solid #3a362b; background: #05070a; box-shadow: inset 0 0 2.5rem rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.35); }
.crt-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.crt-screen::before { position: absolute; z-index: 1; inset: 0; border-radius: 3%/4%; background: radial-gradient(ellipse 125% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55)); content: ""; pointer-events: none; }
.crt-screen::after { position: absolute; z-index: 1; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(255, 0, 60, 0.04) 0 1px, rgba(0, 180, 255, 0.04) 1px 2px, transparent 2px 3px); content: ""; pointer-events: none; }
.crt-strip { grid-area: strip; display: flex; align-items: center; gap: 4%; padding: 2.5% 3%; background: #b3ac96; box-shadow: inset 0 2px 0 #8f8a76; font-family: var(--font-display); font-weight: 700; }
.crt-power { width: clamp(0.9rem, 2vw, 1.4rem); aspect-ratio: 1; border: 2px solid #6f6a59; background: linear-gradient(180deg, #e8e3d2, #a29b86); box-shadow: 0 2px 0 #6f6a59; }
.crt-led { width: 0.45rem; aspect-ratio: 1; background: var(--color-accent-deep); box-shadow: 0 0 0.5rem rgba(255, 61, 74, 0.8); }
.crt-grille { flex: 1; height: clamp(1.4rem, 3.4vw, 2.4rem); background: repeating-linear-gradient(90deg, #6f6a59 0 5px, #b3ac96 5px 9px); }
.crt-model { color: #6f6a59; font-size: clamp(0.55rem, 1.2vw, 0.8rem); letter-spacing: 0.2em; text-transform: uppercase; }
.crt-deck { grid-area: deck; display: flex; flex-direction: column; gap: 6%; padding: 6% 8%; background: #d0cab6; box-shadow: inset 2px 0 0 #e8e3d2, inset -2px 0 0 #b3ac96; font-family: var(--font-display); font-weight: 700; }
.crt-deck__brand { color: #4a4536; font-size: clamp(0.7rem, 1.7vw, 1.1rem); letter-spacing: 0.2em; text-transform: uppercase; }
.crt-deck__row { display: flex; gap: 0.4rem; }
.crt-btn { flex: 1; padding: 0.45em 0.2em; border: 2px solid #6f6a59; background: linear-gradient(180deg, #e8e3d2, #b3ac96); box-shadow: 0 2px 0 #6f6a59; color: #4a4536; font-size: clamp(0.45rem, 1vw, 0.65rem); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.crt-btn--accent { background: linear-gradient(180deg, #8ea3c4, #5a74a3); color: #10131c; }
.crt-btn--icon { padding: 0.3em 0.2em; font-size: clamp(1.1rem, 2.6vw, 1.9rem); line-height: 1; }
.crt-deck__brand-img { width: 85%; margin: 0 auto; object-fit: contain; filter: drop-shadow(0.2rem 0.2rem 0.15rem rgba(0, 0, 0, 0.55)) drop-shadow(1px 0 0 #c3cada) drop-shadow(-1px 0 0 #c3cada) drop-shadow(0 1px 0 #c3cada) drop-shadow(0 -1px 0 #c3cada); }
.crt-deck__display { padding: 0.35em 0.4em; border: 2px solid #6f6a59; background: #05070a; box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.9); color: var(--color-accent); font-size: clamp(0.55rem, 1.3vw, 0.85rem); letter-spacing: 0.25em; text-align: center; text-transform: uppercase; text-shadow: 0 0 0.5rem rgba(255, 61, 74, 0.7); }
.crt-deck__door { margin-top: auto; padding: 1.2em 0.3em; border: 2px solid #6f6a59; background: linear-gradient(90deg, #14161c, #2a2e37 18%, #14161c 55%, #0e1014); box-shadow: inset 0 0.4rem 0 rgba(255, 255, 255, 0.06); color: #8f97a8; font-size: clamp(0.5rem, 1.1vw, 0.7rem); letter-spacing: 0.35em; text-align: center; }
@media (max-width: 700px) { .crt-body { grid-template-areas: "screen" "strip" "deck"; grid-template-columns: 1fr; gap: 0.75rem; } .crt-deck { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .crt-deck__door { margin-top: 0; } }
.workshop-videos { position: relative; margin-top: var(--space-6); padding: clamp(2rem, 5vw, 4rem); border: 4px solid #656d7b; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 8px), linear-gradient(135deg, #343a46 0 8%, #20252e 8% 50%, #171b22 50% 92%, #303641 92%); box-shadow: inset 0 0 0 4px #11151b, inset 0 0 0 7px #8b94a3, inset 0 0 2.5rem rgba(0, 0, 0, 0.75), 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45); clip-path: polygon(1.25rem 0, calc(100% - 1.25rem) 0, calc(100% - 1.25rem) 0.5rem, 100% 0.5rem, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0.5rem 100%, 0.5rem calc(100% - 0.5rem), 0 calc(100% - 0.5rem), 0 1.25rem, 0.5rem 1.25rem, 0.5rem 0.5rem, 1.25rem 0.5rem); }
.workshop-videos::before, .workshop-videos::after { position: absolute; top: 1rem; width: 0.7rem; aspect-ratio: 1; border: 2px solid #11151b; background: #aab1bc; box-shadow: inset 2px 2px 0 #e2e6ec, inset -2px -2px 0 #555d69, 0 calc(100% + clamp(20rem, 52vw, 35rem)) 0 #aab1bc; content: ""; }
.workshop-videos::before { left: 1rem; }
.workshop-videos::after { right: 1rem; }
.workshop-videos .eyebrow { margin-bottom: clamp(2rem, 4vw, 3.5rem); color: #eef2f7; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.25; letter-spacing: 0.08em; text-shadow: 3px 3px 0 #0b0e13, 5px 5px 0 var(--color-accent-deep); }
.workshop-page { display: grid; width: min(100%, 112rem); padding-right: 1.25rem; padding-left: 1.25rem; grid-template-columns: clamp(13rem, 16vw, 14rem) minmax(0, 1fr) clamp(13rem, 16vw, 14rem); gap: clamp(1.25rem, 2vw, 2rem); align-items: start; }
.workshop-intro { grid-column: 1 / -1; padding: clamp(1.5rem, 3vw, 2.5rem); border: 4px solid #656d7b; background: linear-gradient(135deg, #2c323d, #171b22 72%); box-shadow: inset 0 0 0 3px #11151b, 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4); }
.workshop-intro h1 { margin-bottom: 1rem; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.2; }
.workshop-intro p { margin: 0; color: #c3cada; line-height: 1.5; }
.workshop-content { min-width: 0; }
.workshop-blog { position: sticky; top: calc(var(--header-height) + 1.5rem); min-width: 0; padding: 1rem; border: 6px solid #64412b; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(77, 44, 21, 0.12) 10px 13px, transparent 13px 19px), repeating-linear-gradient(0deg, #b9834b 0 7px, #c58e55 7px 10px, #ae7743 10px 13px); box-shadow: inset 3px 3px 0 #dfac72, inset -3px -3px 0 #8b592f, 4px 4px 0 #302015, 8px 8px 0 rgba(0, 0, 0, 0.3); }
.workshop-blog__eyebrow { margin-bottom: 0.9rem; color: #392519; font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.workshop-blog h2 { margin-bottom: 1.5rem; color: #fff0cc; font-size: clamp(1.1rem, 1.5vw, 1.5rem); overflow-wrap: anywhere; text-shadow: 2px 2px 0 #64412b; }
[data-workshop-blog] { position: relative; padding: 1.75rem 0.75rem 1rem; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(110, 135, 147, 0.15) 23px 24px), #fff1c9; color: #3c3027; box-shadow: 3px 3px 0 #805331, 6px 6px 0 rgba(61, 35, 18, 0.25); overflow-wrap: anywhere; }
[data-workshop-blog]::before { position: absolute; top: -0.5rem; left: calc(50% - 0.5rem); width: 1rem; height: 1rem; background: #c8151f; box-shadow: inset 3px 3px 0 #ff6570, inset -3px -3px 0 #7c1118, 2px 3px 0 #63452e; clip-path: polygon(25% 0, 75% 0, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0 75%, 0 25%, 25% 25%); content: ""; pointer-events: none; }
.workshop-blog__meta { margin: 0 0 0.7rem; color: #6d5745; font-size: 0.85rem; }
.workshop-blog h3 { margin-bottom: 0.65rem; font-size: 0.85rem; line-height: 1.5; }
.workshop-blog h3 a { color: #35281f; }
.workshop-blog h3 a:hover, .workshop-blog h3 a:focus-visible { color: #a10e1b; }
.workshop-blog__link { display: inline-block; margin-top: 1.25rem; padding: 0.35rem 0.5rem; background: #3e2b20; box-shadow: 2px 2px 0 #8b592f; color: #fff1c9; font-size: 0.85rem; }
.workshop-videos__list { display: grid; gap: var(--space-4); }
.workshop-video { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1rem, 2vw, 1.5rem); border: 2px solid #555e6d; background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.22)); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.09), inset -2px -2px 0 rgba(0, 0, 0, 0.45); }
.workshop-video__embed { aspect-ratio: 16 / 9; border: 4px solid #0b0e13; outline: 2px solid #7c8593; background: #0e1014; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45); }
.workshop-video__embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.workshop-video__preview { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0e1014; cursor: pointer; }
.workshop-video__preview img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.workshop-video__play { position: absolute; top: 50%; left: 50%; padding: 0.75rem 1rem; background: #c8151f; box-shadow: 3px 3px 0 #0b0e13; color: #fff; font-family: var(--font-display); font-size: 0.65rem; line-height: 1.5; transform: translate(-50%, -50%); }
.workshop-video__preview:hover .workshop-video__play, .workshop-video__preview:focus-visible .workshop-video__play { background: #ff3d4a; }
.workshop-video__copy h3 { margin-bottom: 0.5rem; font-size: clamp(0.9rem, 1.6vw, 1.3rem); line-height: 1.35; }
.workshop-video__date { margin: 0; color: var(--color-muted); font-size: 0.85rem; }
.workshop-video__description { margin-top: 0.75rem; color: rgba(238, 240, 244, 0.8); font-size: 0.95rem; line-height: 1.5; }
.workshop-videos__status { color: var(--color-muted); }
.workshop-videos__status a { color: var(--color-accent); }
@media (max-width: 1100px) { .workshop-content .workshop-video, .workshop-content .workshop-details { grid-template-columns: 1fr; } .workshop-videos .eyebrow { font-size: 1.5rem; letter-spacing: 0.04em; } }
@media (max-width: 900px) { .workshop-page { grid-template-columns: 1fr; } .workshop-blog { position: static; } }
@media (max-width: 760px) { .workshop-video { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .workshop-hero { min-height: 38rem; padding: 2rem; } .workshop-details { padding-top: var(--space-6); } }