/* Artwork stays whole; names and actions never cover the source image. */
html { scrollbar-gutter:stable; }
.rail-wrap { bottom:20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; }
.rail-wrap::-webkit-scrollbar { display:none; }
.rail { width:max-content; min-width:100%; gap:16px; padding:14px 6vw 8px; transform:none!important; }
.rail .mini { flex:0 0 244px; width:244px; height:auto; display:block; padding:0; background:#0c1410; border-radius:14px; text-align:left; scroll-snap-align:center; box-shadow:0 8px 25px #0003; transition:transform .3s,border-color .3s; }
.rail .mini img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.rail .mini:hover,.rail .mini.active { transform:translateY(-5px); border-color:var(--lime); }
.mini-caption { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 13px; }
.rail .mini b { font-size:12px; font-weight:550; letter-spacing:0; text-shadow:none; }
.rail .mini small { font-size:9px; color:#a9b8ae; letter-spacing:0; }
.mini-caption>span { color:var(--lime); font-size:16px; }
.rail-controls { bottom:235px; }
.rail-controls button:disabled { opacity:.3; cursor:default; }
.rail-controls[hidden] { display:none; }
.works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; gap:30px 24px; }
.product-card { min-width:0; }
.works-grid .work-card { display:block; width:100%; height:100%; padding:0; border-radius:20px; text-align:left; background:#09100d; border:1px solid #ffffff1a; isolation:auto; transition:transform .3s,border-color .3s,box-shadow .3s; }
.works-grid .work-card::before { display:none; }
.works-grid .work-card:hover { transform:translateY(-5px); border-color:#baff1877; box-shadow:0 14px 40px #0004; }
.product-cover { display:block; background:#f4f4f0; overflow:hidden; }
.product-cover img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.work-meta { position:relative; display:flex; flex-direction:column; gap:12px; padding:23px 25px 25px; }
.work-eyebrow { font-size:10px; letter-spacing:.06em; color:#93a498; }
.work-name { display:block; padding-right:40px; color:#f4f6f2; font-size:23px; letter-spacing:-.035em; font-weight:550; }
.work-tagline { color:#a9b6ad; font-size:13px; line-height:1.7; }
.work-open { position:absolute; right:24px; top:48px; display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff25; border-radius:50%; color:#d8e3db; }
.work-card:hover .work-open { color:#131908; background:var(--lime); border-color:var(--lime); }
.mini:focus-visible,.work-card:focus-visible,.project-dialog button:focus-visible,.project-dialog a:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.project-dialog { position:fixed; inset:0; margin:auto; padding:0; width:min(1240px,calc(100vw - 48px)); max-width:none; height:min(850px,92dvh); max-height:92dvh; border:1px solid #ffffff26; border-radius:24px; background:#0a100d; color:#edf2eb; overflow:hidden; box-shadow:0 30px 140px #000a; overscroll-behavior:contain; }
.project-dialog::backdrop { background:#020604c7; backdrop-filter:blur(18px); }
.project-dialog[open] { animation:project-enter .3s cubic-bezier(.16,1,.3,1); }
.project-shell { height:100%; display:flex; flex-direction:column; }
.project-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 25px; border-bottom:1px solid #ffffff13; }
.project-kicker { color:#a7bba9; font-size:10px; letter-spacing:.14em; }
.project-header-right { display:flex; align-items:center; gap:20px; }
.project-count { color:#86998b; font-size:11px; }
.project-close { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#ffffff07; border:1px solid #ffffff26; color:#fff; font-size:23px; cursor:pointer; }
.project-close:hover { background:#ffffff17; }
.project-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); align-items:start; gap:32px; overflow-y:auto; padding:28px; scrollbar-width:thin; scrollbar-color:#556347 transparent; }
.project-media { position:sticky; top:0; min-width:0; }
.project-image-button { display:block; width:100%; border:1px solid #ffffff1a; border-radius:12px; overflow:hidden; background:#eaece8; cursor:zoom-in; }
.project-image { display:block; width:100%; height:auto; max-height:48dvh; object-fit:contain; background:#eaece8; }
.project-media-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 12px; }
.project-image-name { font-size:12px; font-weight:500; }
.project-zoom { border:0; border-bottom:1px solid #899a78; background:none; color:#d3e2bf; font-size:11px; padding:4px 0; cursor:pointer; }
.project-thumbnails { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.project-thumbnail { background:#111b15; padding:4px; border:1px solid #ffffff18; border-radius:9px; cursor:pointer; color:#a7b3a9; }
.project-thumbnail[aria-pressed="true"] { border-color:var(--lime); background:#192511; color:#e0eece; }
.project-thumbnail img { display:block; width:100%; height:64px; object-fit:contain; background:#eaece8; border-radius:5px; }
.project-thumbnail span { display:block; font-size:10px; padding:7px 1px 3px; }
.project-caption { color:#93a097; font-size:10px; line-height:1.65; margin-top:13px; }
.project-info { min-width:0; padding:0 2px 14px; }
.project-category { color:#c1d995; font-size:10px; letter-spacing:.09em; margin-bottom:12px; }
.project-info h2 { font-size:clamp(27px,2.5vw,36px); font-weight:550; letter-spacing:-.045em; line-height:1.25; }
.project-tagline { font-size:17px; line-height:1.6; color:#d9e5d1; margin:15px 0; }
.project-description { font-size:14px; line-height:1.85; color:#a9b5ac; }
.project-facts { margin:22px 0; display:grid; grid-template-columns:70px minmax(0,1fr); gap:11px 14px; font-size:11px; line-height:1.7; padding:15px 0; border-block:1px solid #ffffff12; }
.project-facts dt { color:#839589; }.project-facts dd { color:#c1cdc1; }
.project-feature-title { font-size:11px; font-weight:500; letter-spacing:.06em; margin-bottom:13px; color:#879c8a; }
.project-features { list-style:none; display:grid; gap:15px; counter-reset:feature; }
.project-features li { position:relative; padding-left:29px; counter-increment:feature; }
.project-features li::before { content:counter(feature,decimal-leading-zero); position:absolute; left:0; top:1px; font-size:10px; color:#b8d283; }
.project-features strong { display:block; color:#e0e9dc; font-size:13px; font-weight:500; line-height:1.5; }
.project-features p { color:#93a397; font-size:12px; line-height:1.8; margin-top:4px; }
.project-note { margin-top:21px; color:#87968b; font-size:10px; line-height:1.8; }
.project-footer { flex:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 28px; background:#0a100d; border-top:1px solid #ffffff17; }
.project-domain { font-size:12px; color:#c0cfb5; letter-spacing:.025em; }
.project-footer-note { display:block; color:#809187; font-size:10px; margin-top:5px; }
.project-action { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--lime); color:#131b07; border-radius:999px; padding:14px 23px; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s; }
.project-action:hover { background:#d2ff7f; }
.project-dialog.media-expanded .project-body { display:block; }
.project-dialog.media-expanded .project-info { display:none; }
.project-dialog.media-expanded .project-media { position:static; max-width:1040px; margin:auto; }
.project-dialog.media-expanded .project-image { height:clamp(280px,55dvh,580px); max-height:none; }
.project-dialog.media-expanded .project-image-button { cursor:zoom-out; }
.project-dialog.media-expanded .project-thumbnails { max-width:480px; }
@keyframes project-enter { from { opacity:0; transform:translateY(15px) scale(.985); } to { opacity:1; transform:none; } }
@media(max-width:900px) {
  .rail { padding-inline:20px; gap:12px; }.rail .mini { flex-basis:220px; width:220px; }
  .hero-copy { bottom:260px; }
  .works-grid { grid-template-columns:1fr; grid-template-rows:none; gap:24px; }
  .project-dialog { width:calc(100vw - 24px); border-radius:20px; height:94dvh; max-height:94dvh; }
  .project-body { grid-template-columns:1fr; padding:20px; gap:28px; }
  .project-media { position:static; }.project-image { max-height:50dvh; }
  .project-dialog.media-expanded .project-image-button { overflow:auto; max-height:55dvh; }
  .project-dialog.media-expanded .project-image { width:200%; height:auto; max-height:none; }
  .project-header { padding:13px 18px; }.project-info h2 { font-size:30px; }
  .project-description,.project-features p { font-size:13px; }.project-features strong { font-size:14px; }.project-facts { font-size:12px; }
  .project-footer { padding:14px 18px max(14px,env(safe-area-inset-bottom)); }
  .project-action { padding:13px 17px; gap:12px; }.project-domain { font-size:10px; }
}
@media(max-height:720px) { .project-media { position:static; } }
@media(max-width:420px) {
  .work-meta { padding:20px; }.work-name { font-size:21px; }
  .project-footer { gap:10px; }.project-footer-note { font-size:9px; }
  .project-domain { font-size:9px; }.project-action { font-size:11px; padding-inline:13px; }
  .project-dialog { width:calc(100vw - 16px); }.project-header { padding-inline:16px; }.project-body { padding:16px; }
}