/* Shared text-only index and native horizontal masonry gallery. */
#module .project-group + .project-group{margin-top:32px}
#module .project-group-title{font-size:16px;font-weight:650;letter-spacing:.09em;margin:0 0 12px;opacity:.72}
#module .project-row{display:grid;width:100%;text-align:left;grid-template-columns:28px minmax(0,1fr) 26px}
#module .project-row .project-row-copy{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:inherit;transform:none}
#module .project-row .project-row-role{display:block;font-size:14px;line-height:1.65;letter-spacing:.04em;font-weight:450;opacity:.75}
#module .project-row strong{font-size:clamp(18px,1.6vw,25px);overflow-wrap:anywhere}
#module .project-row:is(:hover,:focus-visible)>.project-row-copy{transform:none}
#module .project-row:is(:hover,:focus-visible){background:#252119;color:#fff3cf}
#module .project-row:is(:hover,:focus-visible) :is(small,span,strong){color:inherit}
#module .project-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Leaf layout is vertically ordered in both quick-browse and printed-object sheets. */
#module.quick-browse #module-body:has(.project-gallery){display:block}
#module .project-gallery{margin:22px 0 30px;min-width:0;--frame-height:clamp(230px,25vw,370px);--frame-gap:clamp(10px,1.25vw,18px)}
#module .project-gallery .photo-label{display:flex;align-items:center;gap:12px;margin-bottom:0;font-size:13px;letter-spacing:.08em}
#module .project-marquee{overflow:hidden;width:100%;min-height:calc(var(--frame-height) + 96px);padding-block:48px;isolation:isolate;touch-action:pan-y;cursor:grab;user-select:none;overscroll-behavior-x:contain}
#module .project-marquee.is-dragging{cursor:grabbing}
#module .project-marquee-track{display:flex;width:max-content;align-items:center;transform:translate3d(0,0,0);will-change:transform}
#module .project-photo-set{display:flex;align-items:center;gap:var(--frame-gap);flex:none;padding-right:var(--frame-gap)}
#module .project-frame{--card-scale:1;--tilt-x:0deg;--tilt-y:0deg;--frame-size:.9;--frame-shift:0px;display:block;height:calc(var(--frame-height)*var(--frame-size));width:auto;flex:none;border:0;border-radius:12px;background:#25211912;padding:0;cursor:grab;position:relative;transform:translate3d(0,var(--frame-shift),0) scale(var(--card-scale));transform-origin:center;transition:transform .48s cubic-bezier(.22,1,.36,1),filter .42s ease,opacity .42s ease,box-shadow .42s ease;perspective:900px;isolation:isolate}
#module .project-frame[data-layout="0"]{--frame-size:1;--frame-shift:-3px}
#module .project-frame[data-layout="1"]{--frame-size:.78;--frame-shift:26px}
#module .project-frame[data-layout="2"]{--frame-size:.91;--frame-shift:-20px}
#module .project-frame[data-layout="3"]{--frame-size:.73;--frame-shift:32px}
#module .project-frame[data-layout="4"]{--frame-size:.97;--frame-shift:9px}
#module .project-frame[data-layout="5"]{--frame-size:.82;--frame-shift:-25px}
#module .project-frame::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#ffffff30,transparent 48%);opacity:0;transition:opacity .35s;pointer-events:none;mix-blend-mode:screen}
#module .project-frame img{display:block;height:100%;width:auto;max-width:none;object-fit:contain;border-radius:inherit;filter:none;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.012);transform-style:preserve-3d;transition:transform .18s ease-out;pointer-events:none;-webkit-user-drag:none}
#module .project-marquee.has-hover .project-frame:not(.is-hovered),#module .project-marquee.has-selection .project-frame:not(.is-selected){--card-scale:.84;opacity:.57;filter:blur(1.6px)}
#module .project-frame.is-hovered,#module .project-frame.is-selected{--card-scale:1.15;z-index:5;opacity:1;filter:none;box-shadow:0 18px 42px #2521193d}
#module .project-frame.is-hovered::after{opacity:.38}
#module .project-frame.is-selected{cursor:zoom-out}
#module .project-marquee.is-static{overflow:auto;touch-action:auto;cursor:default}
#module .project-marquee.is-static .project-marquee-track{min-width:100%;justify-content:center}
#module .project-marquee.is-static .project-photo-set{padding-inline:18px}
#module .detail-copy{border-top:1px solid #25211938;padding-top:4px;margin-top:12px;max-width:1050px}
#module .detail-copy h3{margin:24px 0 10px;font-size:22px}
#module .detail-copy p{margin:0 0 16px}
#module .detail-copy .project-role{font-weight:650}
/* Capability first, tools second: readable without knowing the software names. */
.skill-catalog{display:grid;gap:22px}
.skill-cluster{border-top:1px solid #ffffff40;padding-top:16px}
#screen-anchor#screen-anchor .info-page .skill-cluster h3{font-size:21px;line-height:1.5;margin:0 0 8px}
#screen-anchor#screen-anchor .info-page .skill-cluster p{font-size:17px;line-height:1.9;color:inherit;margin:0;opacity:.91}
.skill-cluster b{font-weight:650}
/* Persistent detail navigation: always visible at the card's lower-right edge. */
#module.module-pending #module-actions{visibility:hidden}
#module .module-actions{position:relative;z-index:4;flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;padding:14px 24px 18px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);background:inherit}
#module .module-actions[hidden]{display:none!important}
#module .module-actions .back-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:196px;margin:0;padding:14px 22px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-size:17px;font-weight:700;line-height:1.2;letter-spacing:.055em;cursor:pointer;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
#module .module-actions .back-link:hover,#module .module-actions .back-link:focus-visible{background:currentColor;color:#f4cc5b;transform:translateY(-2px);box-shadow:0 8px 22px #0003;outline:2px solid currentColor;outline-offset:3px}
#module .module-actions .back-link:active{transform:translateY(0) scale(.98)}
#module .module-actions .back-link>span:first-child{font-size:23px;line-height:1}
@media(max-width:759px){
 #module .project-row{gap:12px;padding:16px 8px}
 #module .project-row .project-row-role{font-size:13px}
 #module .project-gallery{--frame-height:clamp(190px,43vw,260px);--frame-gap:11px}
 #module .project-marquee{min-height:calc(var(--frame-height) + 72px);padding-block:36px}
 #screen-anchor#screen-anchor .info-page .skill-cluster p{font-size:16px}
 #module .module-actions{padding:11px 18px 14px}
 #module .module-actions .back-link{min-width:176px;padding:12px 18px;font-size:15px}
}
:root[data-motion="reduced"]{
 #module .project-marquee{overflow-x:auto;touch-action:auto;cursor:auto}
 #module .project-marquee-track{transform:none!important}
 #module .project-photo-set [data-repeat],#module [data-cycle-clone]{display:none}
 #module .project-frame{transition:none;--card-scale:1!important;filter:none!important;opacity:1!important}
 #module .project-frame img{transform:none;transition:none}
}

/* Final layout pass: keep the gallery inside the dialog instead of allowing the footer to cover it. */
#module[open] {
  display: flex;
  flex-direction: column;
  width: min(1280px, calc(100vw - 48px));
  height: min(86dvh, calc(100dvh - 32px));
  max-height: none;
  min-height: 0;
  overflow: hidden;
}
#module[open] .module-bar {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
#module[open] #module-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px clamp(22px, 3vw, 38px) 34px;
}
#module[open] #module-actions {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
}
#module .project-gallery {
  --frame-height: clamp(174px, 28vh, 292px);
  --frame-gap: clamp(10px, 1.1vw, 18px);
  margin: 18px 0 26px;
}
#module .project-marquee {
  min-height: calc(var(--frame-height) + 42px);
  padding-block: 21px;
}
#module .project-marquee-track {
  align-items: center;
}
#module .project-photo-set {
  align-items: center;
}
#module .project-frame[data-layout="0"] { --frame-size: 1; --frame-shift: -5px; }
#module .project-frame[data-layout="1"] { --frame-size: .92; --frame-shift: 7px; }
#module .project-frame[data-layout="2"] { --frame-size: .97; --frame-shift: -4px; }
#module .project-frame[data-layout="3"] { --frame-size: .88; --frame-shift: 9px; }
#module .project-frame[data-layout="4"] { --frame-size: .98; --frame-shift: 3px; }
#module .project-frame[data-layout="5"] { --frame-size: .93; --frame-shift: -7px; }
#module .project-frame img {
  filter: none !important;
  backface-visibility: hidden;
}
#module .detail-copy {
  max-width: 980px;
  padding-top: 18px;
  margin-top: 8px;
}
#module .module-actions .back-link {
  min-width: 196px;
}
#module .project-row {
  position: relative;
  z-index: 0;
  color: var(--ink);
}
#module .project-row:is(:hover, :focus-visible) {
  z-index: 1;
  color: #fff3cf !important;
  background: #252119 !important;
}
#module .project-row:is(:hover, :focus-visible) :is(.project-row-copy, strong, small, span) {
  color: inherit !important;
  opacity: 1;
}
@media (max-width: 759px) {
  #module[open] {
    width: calc(100vw - 24px);
    height: min(90dvh, calc(100dvh - 20px));
  }
  #module[open] #module-body { padding: 18px 18px 26px; }
  #module .project-gallery { --frame-height: clamp(152px, 35vw, 230px); }
  #module .project-marquee { min-height: calc(var(--frame-height) + 34px); padding-block: 17px; }
  #module .module-actions { padding: 11px 18px 14px; }
}

/* Two intentional photo layouts: equal-height rail / compact static masonry. */
#module .gallery-rail{--frame-height:clamp(240px,32dvh,370px);padding-block:42px;min-height:calc(var(--frame-height) + 84px)}
#module .gallery-rail .project-frame[data-layout]{--frame-size:1;--frame-shift:0px;height:var(--frame-height)}
#module .gallery-rail .project-frame img{height:100%;width:auto;max-width:none;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
#module .gallery-masonry{overflow:visible;isolation:auto;padding:40px 0 48px;min-height:0;cursor:default;touch-action:pan-y}
#module .gallery-masonry .project-marquee-track{display:block;width:100%;transform:none;will-change:auto}
#module .gallery-masonry .project-photo-set{display:block;position:relative;width:100%;padding:0}
#module .gallery-masonry .project-frame[data-layout]{position:absolute;--frame-shift:0px;--frame-size:1;border-radius:8px;cursor:zoom-in;transform:scale(var(--card-scale));transform-origin:center}
#module .gallery-masonry .project-frame img{height:100%;width:100%;max-width:100%;object-fit:contain;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
#module .gallery-masonry .project-frame:is(.is-hovered,.is-selected){z-index:20;transform:translate(var(--zoom-x,0px),var(--zoom-y,0px)) scale(var(--zoom-scale,2.15));box-shadow:0 22px 48px #25211955}
#module .gallery-masonry.has-hover .project-frame:not(.is-hovered),#module .gallery-masonry.has-selection .project-frame:not(.is-selected){--card-scale:.87;filter:blur(1px);opacity:.6}
#module .module-bar .close-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:10px 20px;border:1px solid currentColor;border-radius:999px;font:inherit;font-size:clamp(16px,1.25vw,20px);font-weight:700;letter-spacing:.05em;line-height:1.3;white-space:nowrap;transition:transform .25s,background-color .25s,color .25s;cursor:pointer}
#module .module-bar .close-button:hover,#module .module-bar .close-button:focus-visible{background:#252119;color:#fff3cf;transform:translateY(-2px)}
#module .module-bar .close-button:active{transform:scale(.96)}
#module .module-action-arrow{display:inline-block;font-size:1.3em;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#module[data-level="detail"] .close-button:hover .module-action-arrow{transform:translateX(-5px)}
#module[data-level="list"] .close-button:hover .module-action-arrow{transform:rotate(90deg)}
@media(max-width:600px){#module .gallery-rail{--frame-height:clamp(210px,30dvh,300px)}#module .module-bar .close-button{padding:9px 14px}}
:root[data-motion="reduced"]{#module .gallery-rail{overflow-x:auto}#module .close-button,#module .module-action-arrow{transition:none}}

/* Review: short sheets retain complete images; selection has priority over hover. */
#module .gallery-rail{padding-block:24px;min-height:calc(var(--frame-height) + 48px)}
#module .project-marquee.has-selection .project-frame.is-selected{opacity:1;filter:none;--card-scale:1.15}
#module .gallery-masonry.has-selection .project-frame.is-selected{opacity:1;filter:none}
#module .project-marquee.has-selection .project-frame:not(.is-selected){--card-scale:.87;opacity:.6;filter:blur(1px)}
#module .gallery-masonry.has-selection .project-frame.is-hovered:not(.is-selected){z-index:0;transform:scale(.87)}
:root[data-motion="reduced"]{#module .gallery-masonry .project-frame:is(.is-hovered,.is-selected){transform:none}}