/* v21: image-led portfolio. Shared project-page styles remain in style.css. */
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.visual-portfolio { overflow-anchor:none; background: radial-gradient(ellipse at 12% 0%, #eaf0fb 0, transparent 650px), #f7f7f6; }
.visual-portfolio .section { margin-bottom:88px; }
.visual-portfolio button { font:inherit; cursor:pointer; }
.visual-portfolio .site-header { box-shadow:0 4px 20px #22354d08; }
.visual-hero { width:min(var(--max-width),calc(100% - 32px)); margin:56px auto 76px; display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:52px; }
.hero-intro { min-width:0; padding:14px 0; }
.hero-intro .eyebrow { font-size:11px; letter-spacing:.09em; margin-bottom:23px; }
.hero-intro h1 { margin:0; font-size:clamp(44px,4.7vw,66px); letter-spacing:-.062em; line-height:1.06; }
.hero-signature { display:block; color:var(--blue); font-size:23px; letter-spacing:-.025em; margin-top:12px; font-weight:600; }
.hero-statement { font-size:clamp(23px,2.35vw,31px); font-weight:620; line-height:1.3; letter-spacing:-.025em; margin:28px 0 15px; }
.hero-description { color:var(--muted); font-size:15px; line-height:1.7; max-width:445px; margin:0; }
.hero-intro .hero-actions { justify-content:flex-start; margin:24px 0 0; gap:10px; }
.hero-intro .button { padding:11px 17px; font-size:13px; gap:20px; }
.hero-footnote { display:flex; align-items:center; gap:8px; font-size:11px; color:#596778; margin:28px 0 0; }
.mini-line { display:inline-block; width:22px; height:2px; flex-shrink:0; background:#6282b6; }
.hero-showcase { min-width:0; }
.showcase-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; color:#58677c; font-size:11px; font-weight:650; }
.scene-controls { display:flex; gap:2px; padding:3px; background:#e7ebf1; border-radius:99px; }
.scene-controls button { border:0; border-radius:99px; padding:7px 11px; background:none; color:#48546a; font-size:11px; line-height:1.2; min-height:30px; }
.scene-controls button[aria-pressed=true] { color:#213856; background:white; box-shadow:0 1px 4px #15244212; }
.showcase-grid { display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:200px 200px; gap:12px; }
.showcase-main { grid-row:1 / 3; min-width:0; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px #1c304017; }
.scene-photo, .scene-schematic { position:relative; height:100%; width:100%; display:flex; text-decoration:none; overflow:hidden; }
.scene-photo > img { width:100%; height:100%; object-fit:cover; object-position:52% 52%; transition:transform .5s ease; }
.scene-photo:hover > img { transform:scale(1.045); }
.scene-caption { position:absolute; bottom:0; left:0; right:0; padding:75px 18px 21px; color:#fff; background:linear-gradient(transparent,#0c191be8); }
.scene-overline { display:block; font-size:9px; letter-spacing:.085em; text-transform:uppercase; font-weight:650; margin-bottom:8px; }
.scene-caption strong { display:block; font-size:23px; letter-spacing:-.025em; line-height:1.1; margin-bottom:11px; }
.scene-caption > span:last-child { display:flex; justify-content:space-between; font-size:10px; color:#e3e8e7; }
.scene-schematic { flex-direction:column; justify-content:center; padding:25px 22px; background:#e6eefb; color:#264575; }
.scene-schematic > .scene-overline { margin-bottom:25px; font-size:10px; }
.flow-node { display:flex; align-items:center; gap:11px; padding:15px 11px; border-radius:11px; background:white; box-shadow:0 3px 9px #21457406; }
.flow-node svg { width:26px; height:26px; flex-shrink:0; color:#376fbf; }
.flow-node strong { font-size:13px; line-height:1.25; display:block; }
.flow-node div > span { display:block; font-size:10px; color:#657590; margin-top:2px; }
.flow-connector { font-size:10px; align-self:center; margin:7px 0; color:#587293; }
.scene-detail { font-size:11px; margin-top:23px; font-weight:700; }
.showcase-tile { position:relative; overflow:hidden; border-radius:16px; text-decoration:none; min-width:0; }
.showcase-tile img { height:100%; width:100%; object-fit:cover; transition:transform .5s ease; }
.tile-workshop img { object-position:48% 45%; }
.tile-film img { object-position:57% 50%; }
.showcase-tile > span { position:absolute; inset:auto 0 0; padding:40px 15px 16px; font-size:12px; line-height:1.35; font-weight:650; color:white; background:linear-gradient(transparent,#122139d9); display:flex; justify-content:space-between; gap:4px; }
.showcase-tile:hover img { transform:scale(1.07); }
.showcase-tile b { font-size:17px; font-weight:400; }
.gallery-heading { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:23px; }
.gallery-heading .section-head { margin:0; }
.visual-portfolio .section-head h2 { font-size:clamp(29px,3.1vw,39px); letter-spacing:-.045em; }
.gallery-heading > p { max-width:270px; margin:0 0 2px; font-size:13px; color:var(--muted); }
.visual-portfolio .section-head .eyebrow { font-size:10px; letter-spacing:.12em; margin-bottom:10px; }
.project-filters { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 25px; }
.project-filters button { border:1px solid #dce1e6; color:#526078; font-size:12px; font-weight:600; min-height:39px; padding:8px 13px; border-radius:99px; background:transparent; display:flex; align-items:center; gap:8px; transition:background .15s,color .15s,border-color .15s; }
.project-filters button:hover { background:#edf1f9; border-color:#b9c9e2; }
.project-filters button[aria-pressed=true] { background:#263e65; color:white; border-color:#263e65; }
.filter-count { font-size:10px; opacity:.7; font-variant-numeric:tabular-nums; }
.visual-grid { gap:22px; align-items:stretch; }
.visual-card { box-shadow:0 3px 12px #1c2e4105; border:1px solid #e0e4e7; border-radius:16px; min-width:0; scroll-margin-top:105px; }
.visual-card:hover { transform:translateY(-4px); border-color:#b8c9e4; box-shadow:0 14px 25px #26446a12; }
.project-media { height:206px; flex-shrink:0; position:relative; overflow:hidden; background:#edf1f6; border-bottom:1px solid #e5e7ec; }
.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.visual-card:hover .project-media img { transform:scale(1.035); }
.media-notoxic-zero-fve-logger img { object-position:50% 8%; }
.media-fve img { object-position:50% 75%; }
.media-roccat-syn-max-air img { object-position:50% 45%; }
.media-3d-printing-hardware img,.media-hobbies img { object-position:50% 41%; }
.media-electronics-repair img { object-position:50% 45%; }
.project-state { position:absolute; top:12px; left:12px; max-width:calc(100% - 24px); font-size:10px; font-weight:650; line-height:1.3; padding:6px 9px; background:#fffffff0; color:#30435e; border:1px solid #ffffffbd; border-radius:6px; box-shadow:0 2px 8px #19314b0a; }
.diagram-label { position:absolute; right:10px; bottom:8px; font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#4f667c; }
.visual-card .card-body { padding:20px; }
.project-category { font-size:9px !important; line-height:1.35 !important; text-transform:uppercase; letter-spacing:.09em; color:#5c7496 !important; margin:0 0 9px !important; font-weight:700; }
.visual-card h3 { font-size:20px; line-height:1.2; letter-spacing:-.035em; margin:0 0 11px; }
.visual-card .project-summary { margin:0 0 18px; color:#647080; font-size:13px; line-height:1.6; }
.card-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:auto; }
.visual-card .skill-tags { gap:5px; }
.visual-card .skill-tags li { font-size:9px; color:#52647d; background:#f1f4f8; padding:4px 6px; border-radius:4px; }
.card-arrow { flex-shrink:0; font-size:19px; color:#3d6eb3; line-height:1; transition:transform .2s; }
.visual-card:hover .card-arrow { transform:translate(2px,-2px); }
.gallery-more { display:flex; justify-content:center; margin:28px 0 0; }
.gallery-more .button { font-size:12px; padding:11px 19px; gap:24px; background:white; }
.about-visual { padding-top:48px; border-top:1px solid #dce1e7; }
.about-visual .profile-layout { grid-template-columns:.93fr 1.07fr; gap:60px; margin-top:32px; }
.about-visual .profile-story { position:relative; padding-left:122px; min-height:180px; }
.about-visual .profile-portrait { position:absolute; top:0; left:0; width:100px; height:100px; margin:0; box-shadow:0 0 0 5px white,0 6px 20px #233b5510; }
.about-visual .profile-portrait .profile-image { transform:scale(.625); transform-origin:0 0; top:-17.5px; left:-40.625px; }
.about-visual .profile-story h3 { font-size:24px; margin:0 0 17px; }
.about-visual .profile-story h3 > span { display:block; margin-top:5px; font-size:13px; }
.about-visual .profile-story p { font-size:13px; line-height:1.75; margin-bottom:13px; }
.about-visual .profile-story .text-link { font-size:12px; margin-top:5px; }
.about-visual .career-history { padding:23px 26px; border:1px solid #e0e4e9; border-radius:15px; background:#fff; }
.about-visual .career-history h3 { font-size:13px; margin:0 0 19px; font-weight:650; color:#546a85; }
.about-visual .career-timeline li { grid-template-columns:39px minmax(0,1fr); gap:18px; margin:0 0 13px; padding-bottom:13px; border-color:#edf0f3; }
.about-visual .career-timeline li:last-child { margin:0; padding:0; }
.about-visual .career-timeline time { font-size:12px; margin-top:1px; }
.about-visual .career-company { font-size:9px; letter-spacing:.06em; }
.about-visual .career-timeline h4 { font-size:14px; margin:2px 0 3px; }
.about-visual .career-timeline p { font-size:11px; line-height:1.4; }
.visual-portfolio .about-visual { margin-bottom:55px; }
.skills-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.skills-heading .section-head { margin:0; }
.text-button { background:transparent; border:0; padding:9px 0 9px 9px; font-size:12px !important; color:var(--blue-dark); white-space:nowrap; }
.text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.skill-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.skill-item { min-width:0; background:white; border:1px solid #e0e5ed; border-radius:12px; }
.skill-item summary { list-style:none; display:flex; gap:11px; padding:17px 14px; align-items:center; cursor:pointer; min-height:105px; border-radius:12px; }
.skill-item summary::-webkit-details-marker { display:none; }
.skill-item summary:hover { background:#f2f6fc; }
.skill-icon { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; background:#edf3fc; color:#3f73b5; border-radius:9px; }
.skill-icon svg { width:21px; height:21px; }
.skill-label { min-width:0; flex:1; }
.skill-label strong { display:block; font-size:13px; line-height:1.35; letter-spacing:-.01em; }
.skill-level { display:block; font-size:8px; letter-spacing:.035em; text-transform:uppercase; color:#60718b; margin-bottom:5px; }
.skill-preview { display:block; font-size:10px; line-height:1.5; color:#61728b; margin-top:6px; }
.skill-toggle { font-size:21px; line-height:1; color:#6b7f9b; flex-shrink:0; font-weight:400; transition:transform .2s; }
.skill-item[open] .skill-toggle { transform:rotate(45deg); }
.skill-item[open] { border-color:#bacce4; }
.skill-content { padding:0 18px 18px; }
.skill-content p { color:#596b80; font-size:12px; line-height:1.65; margin:0 0 13px; }
.skill-content .skill-tags { gap:4px; }
.skill-content .skill-tags li { font-size:10px; }
.skill-content .text-link { margin-top:15px; font-size:11px; }
.visual-portfolio .contact-panel { padding:28px 32px; background:#eaf0f9; border-color:#dbe4f1; }
.visual-portfolio .contact-panel h2 { font-size:29px; }
.visual-portfolio .contact-panel p:not(.eyebrow) { font-size:13px; max-width:630px; }
.visual-portfolio .contact-panel .eyebrow { font-size:10px; }
.visual-portfolio .contact-panel .button { font-size:12px; }
.visual-portfolio .site-footer { font-size:11px; }
@media (max-width:1050px) {
 .visual-hero { gap:28px; }
 .hero-intro h1 { font-size:48px; }
 .showcase-grid { grid-template-rows:180px 180px; gap:10px; }
 .showcase-toolbar > span { max-width:115px; }
 .scene-controls button { padding:8px; }
 .scene-caption strong { font-size:21px; }
 .scene-schematic { padding:20px 14px; }
 .scene-schematic > .scene-overline { margin-bottom:17px; }
 .flow-node { padding:11px 8px; gap:8px; }
 .flow-node strong { font-size:12px; }
 .flow-node svg { width:22px; height:22px; }
 .scene-detail { margin-top:16px; }
 .visual-grid { gap:16px; }
 .visual-card .card-body { padding:17px; }
 .project-media { height:180px; }
 .about-visual .profile-layout { gap:30px; }
 .about-visual .profile-story { padding-left:0; }
 .about-visual .profile-portrait { position:relative; margin:0 0 21px; }
 .skill-item summary { padding:15px 11px; gap:8px; }
 .skill-icon { width:29px; height:32px; }
 .skill-icon svg { width:19px; height:19px; }
}
@media (max-width:800px) {
 .visual-hero { grid-template-columns:1fr; gap:34px; margin-top:35px; margin-bottom:54px; }
 .hero-intro { max-width:560px; }
 .hero-intro h1 { font-size:56px; }
 .hero-intro .eyebrow { margin-bottom:18px; }
 .hero-statement { margin:22px 0 13px; font-size:28px; }
 .hero-description { max-width:510px; }
 .hero-footnote { margin-top:19px; }
 .showcase-grid { grid-template-columns:1.5fr 1fr; grid-template-rows:185px 185px; }
 .showcase-toolbar > span { max-width:none; }
 .scene-photo > img { object-position:50% 44%; }
 .scene-caption { padding:70px 22px 22px; }
 .scene-caption strong { font-size:29px; }
 .scene-schematic { padding:20px 30px; }
 .gallery-heading { display:block; margin-bottom:20px; }
 .gallery-heading > p { max-width:none; margin-top:12px; }
 .visual-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .project-media { height:205px; }
 .visual-portfolio .section { margin-bottom:60px; }
 .skill-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-visual .profile-layout { grid-template-columns:1fr 1fr; gap:25px; }
 .about-visual .career-history { padding:22px 18px; }
}
@media (max-width:540px) {
 .visual-hero { margin-top:28px; gap:26px; }
 .hero-intro { padding:0; }
 .hero-intro h1 { font-size:clamp(41px,10.4vw,54px); }
 .hero-signature { font-size:20px; margin-top:9px; }
 .hero-intro .eyebrow { font-size:9px; letter-spacing:.05em; }
 .hero-statement { font-size:25px; margin-top:23px; }
 .hero-description { font-size:13px; }
 .hero-intro .hero-actions { margin-top:21px; }
 .hero-intro .button { font-size:11px; padding:10px 13px; gap:12px; }
 .hero-footnote { font-size:9px; }
 .showcase-toolbar { font-size:9px; gap:5px; }
 .scene-controls button { font-size:10px; padding:7px 9px; }
 .showcase-grid { grid-template-columns:1.28fr 1fr; grid-template-rows:142px 142px; gap:9px; }
 .showcase-main,.showcase-tile { border-radius:12px; }
 .scene-caption { padding:65px 12px 15px; }
 .scene-overline { font-size:8px; }
 .scene-caption strong { font-size:22px; }
 .scene-caption > span:last-child { font-size:8px; }
 .showcase-tile > span { font-size:10px; padding:40px 10px 12px; }
 .scene-schematic { padding:14px 10px; }
 .scene-schematic > .scene-overline { font-size:8px; margin-bottom:13px; }
 .flow-node { gap:7px; padding:10px 7px; }
 .flow-node strong { font-size:10px; }
 .flow-node div > span { font-size:8px; }
 .flow-node svg { width:20px; height:20px; }
 .flow-connector { font-size:8px; margin:5px 0; }
 .scene-detail { font-size:9px; margin-top:12px; }
 .visual-portfolio .section-head h2 { font-size:30px; }
 .gallery-heading > p { font-size:12px; }
 .project-filters { gap:6px; }
 .project-filters button { font-size:11px; padding:8px 11px; min-height:37px; }
 .visual-grid { grid-template-columns:1fr; gap:20px; }
 .project-media { height:auto; aspect-ratio:1.8; }
 .visual-card .card-body { padding:19px; }
 .visual-card h3 { font-size:22px; }
 .visual-card .project-summary { font-size:13px; margin-bottom:17px; }
 .project-category { font-size:9px !important; }
 .visual-card .skill-tags li { font-size:10px; }
 .about-visual { padding-top:36px; }
 .about-visual .profile-layout { grid-template-columns:1fr; gap:27px; margin-top:26px; }
 .about-visual .profile-story h3 { margin-top:0; }
 .about-visual .career-history { padding:22px; }
 .about-visual .career-timeline h4 { font-size:15px; }
 .skill-board { grid-template-columns:1fr; gap:9px; }
 .skills-heading { gap:12px; align-items:end; }
 .skills-heading .section-head h2 { font-size:27px; }
 .skills-heading .section-head .eyebrow { font-size:8px; }
 .text-button { font-size:10px !important; }
 .skill-item summary { padding:16px; min-height:94px; gap:13px; }
 .skill-icon { width:36px; height:36px; }
 .skill-label strong { font-size:14px; }
 .skill-level { font-size:9px; }
 .skill-preview { font-size:11px; }
 .visual-portfolio .contact-panel { padding:24px; }
 .visual-portfolio .contact-panel h2 { font-size:25px; }
}
@media (prefers-reduced-motion:reduce) {
 .visual-card,.project-media img,.scene-photo > img,.showcase-tile img,.card-arrow,.skill-toggle { transition:none; }
 .visual-card:hover,.visual-card:hover .project-media img,.scene-photo:hover > img,.showcase-tile:hover img,.visual-card:hover .card-arrow { transform:none; }
}
@media print {
 .visual-hero { grid-template-columns:1fr 1fr; margin:0 auto 30px; }
 .scene-controls,.project-filters,.gallery-more,.text-button { display:none !important; }
 .visual-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .visual-card { break-inside:avoid; }
 .skill-item { break-inside:avoid; }
 .skill-item > .skill-content { display:block; }
}
/* Keep the visual introduction in view on narrow screens. */
.hero-intro .hero-actions .button { width:auto; }
@media (min-width:681px) and (max-width:800px) {
 .visual-hero { grid-template-columns:.96fr 1.04fr; gap:24px; }
 .hero-intro h1 { font-size:41px; }
 .hero-statement { font-size:23px; }
 .hero-description { font-size:13px; }
 .hero-intro .hero-actions { gap:8px; }
 .hero-intro .button { font-size:11px; padding:10px 11px; gap:8px; }
 .hero-footnote { font-size:9px; }
 .showcase-toolbar { font-size:9px; gap:5px; }
 .showcase-toolbar > span { max-width:85px; }
 .scene-controls button { font-size:9px; padding:8px 7px; }
 .showcase-grid { grid-template-columns:1.3fr 1fr; grid-template-rows:168px 168px; }
 .scene-caption { padding:70px 12px 17px; }
 .scene-caption strong { font-size:21px; }
 .scene-caption .scene-overline { font-size:8px; }
 .scene-caption > span:last-child { font-size:8px; }
 .showcase-tile > span { padding:35px 10px 13px; font-size:10px; }
 .scene-schematic { padding:15px 10px; }
 .scene-schematic > .scene-overline { font-size:8px; }
 .flow-node { padding:11px 7px; gap:7px; }
 .flow-node strong { font-size:10px; }
 .flow-node div > span { font-size:8px; }
 .flow-connector,.scene-detail { font-size:9px; }
}

/* November 2026 project additions; preserve the v21 visual structure. */
.visual-card[data-new="1"] .project-state { background:#eef4ff; color:#244f8c; border-color:#d3e0f6; }
.tile-adapter img { width:210%; max-width:none; height:auto; position:absolute; left:0; top:0; }
.tile-adapter:hover img { transform:scale(1.035); transform-origin:top left; }
.media-parkside-x20v-adapter img { object-position:50% 35%; }
.evidence-link { display:block; }
@media (prefers-reduced-motion:reduce) { .tile-adapter:hover img { transform:none; } }